:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #11131c;
  color: #f5f0e5;
  --ink: #11131c;
  --panel: #1b1e2c;
  --raised: #25293b;
  --paper: #f5f0e5;
  --muted: #c1c5d5;
  --border: #565d77;
  --gold: #ffc680;
  --cyan: #a9e8fa;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; }
a { color: inherit; }
button, select, .button-link {
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--raised);
  color: var(--paper);
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  overflow-wrap: anywhere;
}
button:disabled { cursor: default; opacity: .56; }
button:not(:disabled):hover, .button-link:hover { border-color: var(--cyan); }
:is(button, select, a):focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.primary { background: var(--gold); border-color: var(--gold); color: #23180c; font-weight: 750; }
.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.skip-link { position: fixed; left: 16px; top: 8px; padding: 12px; z-index: 2; background: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.game-header, .game-shell { width: min(calc(100% - 36px), 1120px); margin-inline: auto; }
.game-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 72px; border-bottom: 1px solid #343849; }
.game-brand { display: inline-flex; gap: 9px; align-items: center; text-decoration: none; font-size: 14px; font-weight: 800; letter-spacing: .12em; }
.game-brand strong { color: var(--gold); }
.brand-mark { color: var(--gold); font-size: 24px; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 14px; }
.game-nav { display: flex; align-items: center; gap: 17px; }
.account-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 14px; }
.round-mode-help { grid-column: 1/-1; margin: 0; color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
.round-mode-help a { color: var(--cyan); text-underline-offset: 3px; }
.game-shell { padding-block: clamp(24px, 5vw, 48px); }
.eyebrow, .round-label { margin: 0; color: var(--cyan); font-weight: 750; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.game-intro h1 { margin: 8px 0 12px; font-size: clamp(32px, 7vw, 62px); line-height: 1.04; letter-spacing: -.055em; }
.game-intro p { max-width: 64ch; }
#description { min-height: 1.4em; margin-block: 12px 6px; font-size: clamp(16px, 3vw, 19px); }
.controls { margin-block: 6px 20px; color: var(--muted); line-height: 1.5; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px); gap: 14px; align-items: start; }
.game-panel, .host-panel { min-width: 0; border: 1px solid #3f465e; background: var(--panel); border-radius: 16px; padding: clamp(14px, 3vw, 24px); }
#play { display: grid; gap: 12px; min-width: 0; min-height: 150px; }
.host-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .07em; font-weight: 800; }
.host-name span:last-child { color: var(--cyan); margin-left: auto; font-size: 11px; }
.host-indicator { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px #a9e8fa80; }
[data-mood="skeptical"] .host-indicator, [data-mood="try"] .host-indicator { background: var(--gold); box-shadow: none; }
#speech { min-height: 2.5em; margin-block: 16px 12px; line-height: 1.5; }
.host-caption { color: var(--muted); margin: 0; font-size: 12px; }
.start-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 1fr); gap: 10px; align-items: center; max-width: 460px; }
.start-card :is(.mission-art, .round-label, button) { grid-column: 1/-1; }
.mission-art { width: 100%; height: clamp(108px, 17vh, 156px); object-fit: cover; border-radius: 10px; border: 1px solid #3f465e; }
.start-card label { font-weight: 650; }
.result-card { display: grid; justify-items: start; gap: 12px; }
.result-card h2, .result-card p { margin: 0; }
.result-card p { color: var(--muted); }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.score { display: flex; gap: 7px; align-items: baseline; font-variant-numeric: tabular-nums; }
.score strong { font-size: clamp(44px, 9vw, 72px); line-height: 1; color: var(--gold); }
.score span { color: var(--muted); }

.game-status, .meter-note, .goal-info, .whack-status, .key-status, .scene-status, .scene-hint, .code-hint {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.bug-prompt { font-weight: 700; }
.choices, .bug-grid, .timeline-grid, .goal-options, .whack-grid, .key-controls { display: grid; gap: 8px; }
.choices, .goal-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bug-grid, .timeline-grid, .whack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.goal-options button { text-align: left; }
.goal-options small, .clip-card small { display: block; margin-top: 6px; color: var(--muted); }
.tracking-status { color: var(--muted); font-size: .76rem; line-height: 1.5; border-top: 1px solid var(--border); padding-top: 12px; }
.bug-tile { min-height: 78px; display: grid; gap: 4px; place-items: center; }
.bug-tile img, .whack-hole img { display: block; width: 38px; height: 38px; object-fit: contain; }
.whack-hole { display: grid; place-items: center; height: 72px; padding: 4px; background: #151825; }
.whack-hole[data-active="true"] { border-color: var(--gold); }
.meter { height: 64px; position: relative; border: 1px solid var(--border); border-radius: 10px; background: #121622; overflow: hidden; cursor: pointer; touch-action: manipulation; }
.zone { position: absolute; inset-block: 0; background: #ffc68055; border-inline: 2px solid var(--gold); }
.marker { position: absolute; left: calc(var(--position, 0) * 1%); top: 0; bottom: 0; width: 4px; background: var(--paper); }
.panic-grid { display: grid; gap: 10px; }
.panic-row { display: grid; grid-template-columns: minmax(40px, 85px) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.panic-track { height: 16px; border-radius: 20px; background: #111520; border: 1px solid var(--border); overflow: hidden; }
.panic-fill { height: 100%; width: var(--level, 72%); background: linear-gradient(90deg, var(--cyan), var(--gold)); }
.code-field { height: clamp(185px, 35vh, 320px); position: relative; overflow: hidden; touch-action: none; border: 1px solid var(--border); border-radius: 10px; background: repeating-linear-gradient(90deg, #141824 0 calc(100% / var(--lanes) - 1px), #4b5268 calc(100% / var(--lanes) - 1px) calc(100% / var(--lanes))); user-select: none; }
.code-digit, .code-paddle { position: absolute; left: var(--x); transform: translateX(-50%); }
.code-digit { top: var(--y); color: var(--cyan); font: 750 26px/1 ui-monospace, monospace; }
.code-paddle { bottom: 5px; width: calc(82% / var(--lanes)); height: 16px; border-radius: 8px; background: var(--gold); }
.lane-controls { display: grid; grid-template-columns: repeat(var(--lanes), minmax(0, 1fr)); gap: 6px; }
.lane-controls button[aria-pressed="true"], .scene-widgets button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.key-grid { width: min(100%, 440px); display: grid; grid-template-columns: repeat(var(--key-cols), minmax(0, 1fr)); gap: 3px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: #111520; }
.key-cell { display: grid; place-items: center; border-radius: 4px; aspect-ratio: 1; font-size: clamp(14px, 4vw, 23px); }
.key-row { display: contents; }
.key-wall { background: #141925; }
.key-floor { background: #383f57; }
.key-player { background: #536798; color: white; }
.key-key { background: #5a4d35; color: var(--gold); }
.key-exit { background: #1f524b; color: var(--cyan); }
.key-drone { background: #733845; color: #ffe1e3; }
.key-controls { max-width: 360px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.clip-grid { display: grid; gap: 7px; }
.clip-card { text-align: left; }
.scene-widgets { display: flex; flex-wrap: wrap; gap: 6px; }
.scene-frame { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 10px; background: #111520; border: 1px solid var(--border); }
.scene-zone { min-height: 59px; padding: 8px 4px; }
.scene-zone.valid:not(.occupied) { border: 2px solid var(--cyan); }
.scene-zone.face { background: #392c4c; }
.scene-zone.occupied, .scene-widgets .placed { color: var(--gold); }

@media (max-width: 640px) {
  .game-layout { grid-template-columns: 1fr; }
  .game-header, .game-shell { width: calc(100% - 26px); }
  .game-header { min-height: 62px; }
  .host-panel { padding: 12px 14px; }
  #speech { min-height: 0; margin-block: 8px 4px; }
}
@media (max-width: 370px) {
  .choices { grid-template-columns: 1fr; }
  .game-header { padding-block: 7px; }
  .game-header .back-link { min-height: 38px; }
  .start-card { grid-template-columns: minmax(0, 1fr) minmax(110px, 1fr); }
}