/* The 3D street: the same instrument layer as the page, laid over a canvas. */

html.walk,
html.walk body {
  height: 100%;
  overflow: hidden;
}

#world,
#world canvas {
  position: fixed;
  inset: 0;
  display: block;
}

.walk #app {
  position: fixed;
  inset: 0;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.walk #app:has(> #chat:not([hidden])) {
  max-width: none;
}

.walk #intro {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  pointer-events: auto;
  padding: 24px max(16px, calc((100% - 720px) / 2)) 32px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
}

.loading {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#progress {
  height: 3px;
  background: var(--hud-dim);
}

#bar {
  width: 0;
  height: 100%;
  background: var(--hud);
  transition: width 120ms linear;
}

.walk #cast {
  position: absolute;
  inset: 0;
  padding: 16px;
  gap: 12px;
}

.walk #cast .hud-bar {
  margin: 0;
  text-shadow: 0 0 6px var(--bg);
}

.walk #cast .case-brief {
  max-width: 420px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border: 1px solid var(--hud-dim);
  border-radius: var(--radius);
}

.walk-hint,
.talk-prompt {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  white-space: nowrap;
}

.walk-hint {
  top: 46%;
  color: var(--muted);
  border: 1px solid var(--border);
}

.talk-prompt {
  bottom: 22%;
  color: var(--hud);
  border: 1px solid var(--hud);
}

.hud-dock {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  pointer-events: auto;
  width: max-content;
  max-width: 100%;
}

.hud-dock > * {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}

#roster {
  font-family: var(--mono);
  font-size: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: min(420px, calc(100vw - 32px));
}

#roster summary {
  cursor: pointer;
  padding: 8px 14px;
}

#roster .cards {
  max-height: 46vh;
  overflow-y: auto;
  padding: 0 8px 8px;
  margin: 0;
}

#open-diary {
  color: var(--text);
  border: 1px solid var(--border);
}

#open-diary.has-news {
  color: var(--hud);
  border-color: var(--hud);
}

.walk-keys {
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  border-radius: var(--radius);
}

.walk #chat {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100%);
  overflow-y: auto;
  pointer-events: auto;
  padding: 16px 16px 0;
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  border-left: 1px solid var(--hud-dim);
}

.walk .tabs {
  display: flex;
}

.walk .chat-layout {
  display: block;
}

.walk #chat[data-tab="conversation"] .diary,
.walk #chat[data-tab="diary"] .conversation {
  display: none;
}

.walk .diary {
  position: static;
  max-height: none;
  overflow: visible;
  margin-bottom: 24px;
}

.walk .composer {
  background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 96%, transparent) 12px);
}

#chat.diary-solo .chat-header > :not(#back),
#chat.diary-solo .tabs,
#chat.diary-solo .conversation {
  display: none;
}

#labels {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.name-tag {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -100%;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  pointer-events: auto;
}

.name-tag.in-reach {
  color: var(--hud);
  border-color: var(--hud);
}

.name-tag.outside {
  font-style: italic;
}

@media (max-width: 640px) {
  .walk-keys {
    display: none;
  }
}

.flat #world,
.flat #labels,
.flat .walk-hint,
.flat .walk-keys {
  display: none;
}

@media (pointer: coarse) {
  .walk-hint,
  .walk-keys {
    display: none;
  }
}