/* Buffer Zone. The scene is an illustration of a lit room, so its colours hold in both themes. */
:root {
  --scene-ink: #17160f;
  --scene-you: #ffc400;
  --porcelain: #fdfdfb;
  --porcelain-line: #8f9692;
  --porcelain-shade: #dfe4e1;
  --chrome: #8a918d;
  --chrome-dark: #5f6562;
  --door: #6f7a75;
  --door-line: #4f5854;
  --stall: #e7e9e5;
  --stall-line: #5f6562;
  --vacant: #0a7a46;
  --engaged: #c8201a;
  --mirror: #cfe0e8;
  --bag: #24231b;
  --tape: #ffc400;
  /* Replaced per room by the palette rules below. */
  --tile: #e3e7e4;
  --grout: #cbd0cc;
  --floor: #848c88;
  --floor-line: #6c7470;
}

.scene[data-palette="office"]     { --tile: #e3e7e4; --grout: #cbd0cc; --floor: #848c88; --floor-line: #6c7470; }
.scene[data-palette="services"]   { --tile: #c6dccf; --grout: #a8c5b5; --floor: #667a70; --floor-line: #52645b; }
.scene[data-palette="station"]    { --tile: #efeddd; --grout: #d6d2b8; --floor: #6f6b5a; --floor-line: #5a5747; }
.scene[data-palette="mall"]       { --tile: #d8deea; --grout: #bcc6d6; --floor: #6e7789; --floor-line: #5a6272; }
.scene[data-palette="restaurant"] { --tile: #ecdcc8; --grout: #d8c4aa; --floor: #84604a; --floor-line: #6c4d3a; }
.scene[data-palette="hotel"]      { --tile: #dcd5c6; --grout: #c7bea9; --floor: #47575a; --floor-line: #364447; }
.scene[data-palette="conference"] { --tile: #e4e4dc; --grout: #cdcdc1; --floor: #787b70; --floor-line: #62655b; }
.scene[data-palette="airport"]    { --tile: #d7e4ec; --grout: #bbcdd8; --floor: #5f6e78; --floor-line: #4c5962; }
.scene[data-palette="stadium"]    { --tile: #bfbfb6; --grout: #a6a69c; --floor: #575850; --floor-line: #44453e; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scene { filter: brightness(0.92); }
}
:root[data-theme="dark"] .scene { filter: brightness(0.92); }

.sound-toggle {
  min-height: 36px;
  padding: 0.15rem 0.7rem;
  border: 2px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.sound-toggle:hover { color: var(--on-board); }
.sound-toggle[aria-pressed="true"] { background: var(--on-board); border-color: var(--on-board); color: var(--on-signal); }

/* Menu */
.menu-sign { background: var(--signal); color: var(--on-signal); }
.menu-sign-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.menu-kicker { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.menu-sign h1 { margin-top: 0.3rem; font-size: clamp(5rem, 12vw, 10rem); line-height: 0.88; }
.menu-sign h1 span { display: block; }
.menu-lead { margin-top: 1rem; max-width: 44ch; font-size: clamp(1.15rem, 2vw, 1.3rem); font-weight: 600; line-height: 1.3; }
.menu-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.menu-note { margin-top: 1rem; max-width: 62ch; font-size: 0.95rem; }
.menu-preview .scene { max-height: none; box-shadow: 0 0 0 4px var(--on-signal); }
@media (max-width: 860px) {
  .menu-sign-inner { grid-template-columns: minmax(0, 1fr); }
  .menu-sign h1 { font-size: clamp(5rem, 25vw, 10rem); }
}

/* Stage */
.stage { padding-block: 0.75rem 2rem; }
.stage-inner { max-width: 1040px; display: grid; gap: 0.6rem; }
.hud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 1rem; min-height: 42px; }
.hud-where { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.7rem; min-width: 0; }
.hud-where strong { font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; line-height: 1.05; text-transform: uppercase; white-space: nowrap; }
.hud-where span { color: var(--muted); font-size: 0.95rem; }
.strip { display: flex; flex-wrap: wrap; gap: 3px; }
.strip > * { width: 16px; height: 16px; }
@media (max-width: 380px) { .strip > * { width: 15px; height: 15px; } }
@media (max-width: 340px) { .strip > * { width: 13px; height: 13px; } }
.strip-empty { border: 2px solid var(--rule); border-radius: 2px; }
.rush-meta { display: flex; align-items: center; gap: 1rem; font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.rush-strikes { display: flex; gap: 4px; }
.rush-strikes svg { width: 22px; height: 22px; }

.timebar { height: 10px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.timebar span { display: block; height: 100%; background: var(--ink); transform-origin: left; }

.scene-host { line-height: 0; }
.scene {
  display: block;
  width: 100%;
  height: auto;
  max-height: 56vh;
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
}

/* Scene parts */
.fig-part { fill: var(--scene-ink); }
.fig-arm { fill: none; stroke: var(--scene-ink); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }

.urinal-panel { fill: var(--grout); }
.porcelain { fill: var(--porcelain); stroke: var(--porcelain-line); stroke-width: 2; }
.porcelain-shade { fill: var(--porcelain-shade); }
.chrome { fill: var(--chrome); }
.chrome-dark { fill: var(--chrome-dark); }
.bag { fill: var(--bag); }
.tape { fill: var(--tape); }
.tape-text { fill: var(--scene-ink); font-family: var(--font-display); font-weight: 900; text-anchor: middle; }

.door-panel { fill: var(--door); stroke: var(--door-line); stroke-width: 3; }
.door-sign { fill: var(--signal); }
.stall-door { fill: var(--stall); stroke: var(--stall-line); stroke-width: 3; }
.stall-post { fill: var(--stall-line); }
.lock-vacant { fill: var(--vacant); }
.lock-engaged { fill: var(--engaged); }
.lock-text { fill: #ffffff; font-family: var(--font-display); font-weight: 800; text-anchor: middle; }
.isa-plate { fill: #1257a8; }
.isa-mark { fill: #ffffff; }
.isa-line { fill: none; stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.shoe { fill: var(--scene-ink); }
.mirror { fill: var(--mirror); stroke: var(--chrome-dark); stroke-width: 3; }
.mirror-shine { fill: none; stroke: #ffffff; stroke-width: 4; stroke-linecap: round; opacity: 0.7; }

.slot-chip { fill: var(--scene-ink); }
.slot-chip-text { fill: var(--scene-you); font-family: var(--font-display); font-weight: 900; text-anchor: middle; dominant-baseline: central; }
.tag-bg { fill: var(--scene-ink); }
.tag-text { fill: #ffffff; font-family: var(--font-body); font-weight: 700; text-anchor: middle; dominant-baseline: central; }

.opt { cursor: pointer; outline: none; }
.opt .hit { fill: transparent; stroke: transparent; stroke-width: 4; rx: 6; }
.opt:hover .hit { fill: rgb(255 196 0 / 0.22); }
.opt:focus-visible .hit { fill: rgb(255 196 0 / 0.22); stroke: var(--scene-ink); stroke-dasharray: 8 5; }
.opt .ghost { opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.opt:hover .ghost, .opt:focus-visible .ghost { opacity: 0.6; }
.scene[data-locked] .opt { cursor: default; }
.scene[data-locked] .opt .hit { fill: transparent; stroke: transparent; }
.scene[data-locked] .opt .ghost { opacity: 0; }

.player-walker.walking { animation: walk-bob 320ms ease-in-out infinite; }
@keyframes walk-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-5px) rotate(1.5deg); }
}
.player.gone { opacity: 0; transition: opacity 240ms ease; }
/* Legs swing from the hip. Arms hang until you reach something to stand at. */
.leg { transform-box: fill-box; transform-origin: 50% 0; }
.player-walker.walking .leg { animation: leg-swing 320ms ease-in-out infinite alternate; }
@keyframes leg-swing {
  from { transform: rotate(-9deg); }
  to { transform: rotate(9deg); }
}
.player .arms-bent { display: none; }
.player.at-fixture .arms-bent { display: inline; }
.player.at-fixture .arms-down { display: none; }
/* The tag points you out at the door, then gets out of the way. */
.you-tag { transition: opacity 160ms ease; }
.player.moved .you-tag { opacity: 0; }
.you-tag-bg { fill: var(--scene-ink); }
.you-tag-text { fill: var(--scene-you); font-family: var(--font-display); font-weight: 900; letter-spacing: 0.04em; text-anchor: middle; dominant-baseline: central; text-transform: uppercase; }

.man { transition: transform 260ms cubic-bezier(0.3, 1.6, 0.6, 1); }
.man.flinch-left { transform: translateX(-9px) rotate(-3deg); }
.man.flinch-right { transform: translateX(9px) rotate(3deg); }

.bubble-bg { fill: #ffffff; stroke: var(--scene-ink); stroke-width: 3; stroke-linejoin: round; }
.bubble-text { fill: var(--scene-ink); font-family: var(--font-body); font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.bubble { animation: pop 200ms cubic-bezier(0.3, 1.8, 0.6, 1) both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.scene-badge { animation: pop 220ms cubic-bezier(0.3, 1.8, 0.6, 1) both; transform-box: fill-box; transform-origin: 50% 50%; }

/* Safety signs */
.sg-green { fill: var(--sign-green); }
.sg-blue { fill: var(--sign-blue); }
.sg-yellow { fill: var(--sign-yellow); stroke: var(--sign-ink); stroke-width: 3; stroke-linejoin: round; }
.sg-white { fill: #ffffff; }
.sg-ring { fill: none; stroke: var(--sign-red); stroke-width: 7; }
.sg-mark { fill: none; stroke: var(--sign-mark); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.sg-mark-ink { fill: none; stroke: var(--sign-ink); stroke-width: 6; stroke-linecap: round; }
.sg-dot-ink { fill: var(--sign-ink); }
.sg-person { fill: var(--sign-ink); }

/* Dock: the prompt, then the verdict, always in the same place. */
.dock { min-height: 178px; display: grid; align-content: start; gap: 0.7rem; padding-top: 0.25rem; }
.dock-prompt { font-family: var(--font-display); font-size: clamp(1.55rem, 3.4vw, 2.1rem); font-weight: 800; line-height: 1.05; text-transform: uppercase; text-wrap: balance; }
.dock-hint { color: var(--muted); font-size: 0.95rem; min-height: 1.5em; }
.dock-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dock-actions .btn { font-size: 1.15rem; min-height: 44px; padding: 0.4rem 0.85rem; border-width: 2px; }
.key-hint { opacity: 0.6; font-family: var(--font-body); font-size: 0.75em; font-weight: 700; }
@media (hover: none) { .key-hint { display: none; } }

.answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0.5rem; }
.answer {
  min-height: 52px;
  padding: 0.55rem 0.85rem;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.answer:hover { background: var(--signal); border-color: var(--on-signal); color: var(--on-signal); }

.verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem 1rem; align-items: start; }
.verdict-sign { width: 68px; height: 68px; }
.verdict-sign svg { display: block; width: 100%; height: 100%; }
.verdict-label { font-family: var(--font-display); font-size: clamp(2.1rem, 5vw, 3rem); font-weight: 900; line-height: 0.95; text-transform: uppercase; }
.verdict-note { margin-top: 0.35rem; max-width: 64ch; line-height: 1.42; }
.verdict-best { margin-top: 0.35rem; color: var(--muted); font-size: 0.95rem; font-weight: 600; }
.verdict-next { grid-column: 1 / -1; display: flex; }

/* Result */
.result-sign { background: var(--signal); color: var(--on-signal); }
.result-sign-inner { padding-block: clamp(1.75rem, 5vw, 3.5rem); display: grid; gap: 1rem; }
.result-kicker { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.result-sign h1 { font-size: clamp(3.8rem, 13vw, 9.5rem); line-height: 0.84; }
.result-blurb { max-width: 46ch; font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 600; line-height: 1.3; }
.result-score { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.result-signs { display: grid; grid-template-columns: repeat(8, 30px); gap: 5px; }
.result-signs > * { width: 30px; height: 30px; background: #ffffff; border-radius: 3px; padding: 2px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.result-copy-fallback { width: 100%; max-width: 480px; min-height: 96px; padding: 0.6rem; border: 2px solid var(--on-signal); border-radius: 4px; background: #ffffff; color: var(--on-signal); font: inherit; }
.review { padding-block: 2rem 1rem; }
.review h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.review-list { display: grid; gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none; max-width: 70ch; }
.review-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0.75rem; }
.review-item svg { display: block; width: 34px; height: 34px; }
.review-where { font-weight: 800; }
.review-note { color: var(--muted); }

/* Rules */
.rules { border-top: 3px solid var(--ink); margin-top: 1.5rem; padding-block: 2.25rem 3rem; }
.rules-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 4rem); }
.rules h2 { font-size: clamp(2.6rem, 6vw, 4rem); }
.rules h3 { font-size: 1.8rem; margin-bottom: 0.6rem; }
.rules-lead { margin-top: 0.5rem; color: var(--muted); }
.rules-list { display: grid; gap: 0.7rem; margin: 1rem 0 0; padding: 0; list-style: none; }
@media (max-width: 760px) { .rules-inner { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .player-walker.walking, .player-walker.walking .leg { animation: none; }
}