.game-body::before { opacity: .34; }
.game-shell { width: min(100% - 40px, 1440px); }
.game-header { min-height: 68px; }
.game-header-meta { display: flex; align-items: center; gap: 24px; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.game-back-link { color: var(--soft); letter-spacing: .04em; transition: color 160ms ease; }
.game-back-link:hover { color: var(--white); }
.game-back-link:focus-visible, .game-footer a:focus-visible, .mobile-controls button:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.game-main { padding: 54px 0 72px; }
.game-intro { display: flex; align-items: end; justify-content: space-between; gap: 32px; padding-bottom: 32px; }
.game-intro .eyebrow { margin-bottom: 16px; }
.game-intro h1 { margin-bottom: 0; font-size: clamp(46px, 6vw, 82px); letter-spacing: -.075em; line-height: .88; }
.game-intro h1 em, .overlay-panel h2 em { color: #a7d9b4; font-style: normal; }
.game-deck { width: min(100%, 310px); margin: 0 4px 6px 0; color: #bdbdb7; font-size: 14px; line-height: 1.65; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; align-items: stretch; }
.game-play-column { min-width: 0; }
.game-stage { position: relative; min-height: 440px; height: clamp(440px, 56vw, 620px); overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: radial-gradient(ellipse at 50% 38%, #18211f 0%, #0e1112 54%, #090a0b 100%); isolation: isolate; }
.game-stage::after { position: absolute; inset: 0; z-index: 0; border: 1px solid rgba(167,217,180,.025); pointer-events: none; content: ""; }
#game-canvas { display: block; width: 100%; height: 100%; outline: 0; touch-action: none; }
#game-canvas:focus-visible { outline: 2px solid #a7d9b4; outline-offset: -4px; }
.stage-coordinate { position: absolute; z-index: 1; top: 15px; left: 17px; right: 17px; display: flex; justify-content: space-between; color: rgba(226,232,222,.58); font-family: var(--mono); font-size: 9px; letter-spacing: .13em; pointer-events: none; }
.game-loading { position: absolute; z-index: 2; left: 50%; top: 50%; color: var(--soft); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; transform: translate(-50%,-50%); }
.game-overlay { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(8,10,10,.43); backdrop-filter: blur(2px); }
.game-overlay[hidden], .game-countdown[hidden], .game-error[hidden], .overlay-panel[hidden] { display: none; }
.overlay-panel { width: min(100%, 390px); padding: 30px; border: 1px solid rgba(255,255,255,.2); background: rgba(8,9,9,.92); box-shadow: 0 20px 60px rgba(0,0,0,.26); }
.overlay-panel:has(.game-run-options) { width: min(100%, 460px); }
.overlay-panel .eyebrow { margin-bottom: 18px; font-size: 9px; }
.overlay-panel h2 { margin: 0 0 14px; font-size: clamp(40px, 5vw, 58px); font-weight: 450; letter-spacing: -.08em; line-height: .9; }
.overlay-panel > p:not(.eyebrow) { margin: 0 0 22px; color: #c3c5bd; font-size: 13px; line-height: 1.65; }
.game-action { min-height: 46px; border-radius: 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.game-action:disabled { opacity: .45; }
.game-action:focus-visible, .game-run-options select:focus-visible { outline: 2px solid #a7d9b4; outline-offset: 3px; }
.game-run-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; }
.game-run-options label { display: grid; gap: 7px; color: #9ba398; font-family: var(--mono); font-size: 8px; letter-spacing: .12em; }
.game-run-options select { width: 100%; min-height: 42px; padding: 0 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 0; background: #101413; color: #e4e8df; font: 10px var(--mono); letter-spacing: .02em; }
.game-run-options select:disabled { opacity: .62; }
.game-run-options p { grid-column: 1 / -1; margin: 0; color: #858b82; font-size: 10px; line-height: 1.55; }
.game-footnote { display: block; margin-top: 18px; color: #888d83; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; line-height: 1.6; }
.result-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.result-actions .button { flex: 1 1 145px; }
.result-actions [hidden] { display: none; }
.share-status { min-height: 14px; margin: 9px 0 0; color: #a7d9b4; font-family: var(--mono); font-size: 8px; letter-spacing: .04em; }
.game-countdown { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; color: #f4f5ec; font-family: var(--mono); font-size: clamp(88px, 18vw, 180px); font-weight: 600; letter-spacing: -.1em; text-shadow: 0 0 36px rgba(167,217,180,.38); pointer-events: none; }
.game-error { position: absolute; z-index: 5; inset: auto 16px 16px; padding: 13px 16px; border: 1px solid rgba(228,160,101,.45); background: rgba(24,14,10,.96); color: #f1c19a; font-family: var(--mono); font-size: 10px; line-height: 1.6; }
.mobile-controls { display: none; }
.game-control-strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; padding: 13px 2px 0; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.game-control-strip strong { color: var(--soft); font-weight: 600; }
.terminal-mark { color: #6f756f; }
.game-sidebar { display: flex; flex-direction: column; min-height: 0; border: 1px solid rgba(255,255,255,.16); background: rgba(16,18,18,.72); }
.score-readout { padding: 21px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.13); }
.sidebar-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; }
.score-live { width: 6px; height: 6px; border-radius: 50%; background: #59615a; }
.score-live.is-active { background: #a7d9b4; box-shadow: 0 0 0 4px rgba(167,217,180,.1); }
.score-value { display: block; margin-top: 20px; color: var(--white); font-size: clamp(54px, 6vw, 74px); font-variant-numeric: tabular-nums; font-weight: 450; letter-spacing: -.09em; line-height: .9; }
.score-unit { display: block; margin-top: 9px; color: #858983; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
.run-stats { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(255,255,255,.13); }
.run-stats > div { min-height: 72px; padding: 15px 16px; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.run-stats > div:nth-child(even) { border-right: 0; }
.run-stats > div:last-child { grid-column: 1 / -1; min-height: 58px; border-bottom: 0; }
.run-stats span { display: block; color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.run-stats strong { display: block; margin-top: 8px; color: var(--white); font-family: var(--mono); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
#time-value.is-urgent { color: #f0bb8d; }
.ticker-board { padding: 18px 17px 12px; }
.ticker-board .sidebar-label { margin-bottom: 8px; }
#ticker-status { color: #82877e; font-size: 8px; }
.ticker-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ticker-list li { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 42px; border-bottom: 1px solid rgba(255,255,255,.08); color: #c8cbc2; }
.ticker-index { color: #777c75; font-family: var(--mono); font-size: 9px; }
.ticker-copy { min-width: 0; }
.ticker-symbol { display: block; overflow: hidden; color: #e3e5de; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.ticker-company { display: block; overflow: hidden; margin-top: 3px; color: #828780; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ticker-points { color: #737970; font-family: var(--mono); font-size: 8px; }
.ticker-list li.is-collected .ticker-index, .ticker-list li.is-collected .ticker-symbol, .ticker-list li.is-collected .ticker-points { color: #a7d9b4; }
.ticker-list li.is-collected .ticker-company { color: #a1b2a0; }
.ticker-list li.is-collected .ticker-points::after { content: " ✓"; }
.game-disclaimer { margin: auto 0 0; padding: 14px 17px 17px; color: #777c75; font-size: 9px; line-height: 1.55; }
.leaderboard-card { margin-top: 18px; border: 1px solid rgba(255,255,255,.16); background: rgba(16,18,18,.72); }
.leaderboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 20px 22px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.leaderboard-heading .eyebrow { margin: 0 0 8px; color: #92988e; font-family: var(--mono); font-size: 8px; letter-spacing: .13em; }
.leaderboard-heading h2 { margin: 0; color: #e3e5de; font-size: 22px; font-weight: 450; letter-spacing: -.045em; }
.leaderboard-local { padding: 6px 8px; border: 1px solid rgba(167,217,180,.24); color: #a7d9b4; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; white-space: nowrap; }
.leaderboard-table-wrap { overflow-x: auto; }
.leaderboard-table { width: 100%; border-collapse: collapse; text-align: left; }
.leaderboard-table th, .leaderboard-table td { padding: 12px 22px; border-bottom: 1px solid rgba(255,255,255,.075); color: #c8cbc2; font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: .06em; }
.leaderboard-table thead th { color: #777e75; font-size: 8px; letter-spacing: .13em; }
.leaderboard-table tbody th { color: #e0e4dc; font-weight: 500; }
.leaderboard-table tbody td:nth-child(2) { color: #a7d9b4; font-variant-numeric: tabular-nums; }
.leaderboard-table tbody td:last-child { color: #888f86; font-size: 8px; }
.leaderboard-table .is-locked { color: #646a64 !important; }
.leaderboard-table .campaign-record-row th, .leaderboard-table .campaign-record-row td { border-top: 1px solid rgba(167,217,180,.2); color: #a7d9b4; }
.game-footer { display: flex; justify-content: space-between; gap: 20px; padding: 19px 0 24px; border-top: 1px solid var(--line); color: #73736e; font-family: var(--mono); font-size: 9px; letter-spacing: .09em; }
.game-footer a { color: #c7c9c1; transition: color 160ms ease; }
.game-footer a:hover { color: #a7d9b4; }

@media (max-width: 980px) {
  .game-layout { grid-template-columns: minmax(0, 1fr) 220px; }
  .game-stage { height: clamp(420px, 58vw, 560px); }
  .game-sidebar .score-readout { padding-inline: 16px; }
  .ticker-board { padding-inline: 13px; }
}

@media (max-width: 760px) {
  .game-shell { width: min(100% - 28px, 620px); }
  .game-header { min-height: 60px; }
  .game-header-meta > span { display: none; }
  .game-main { padding: 38px 0 50px; }
  .game-intro { display: block; padding-bottom: 23px; }
  .game-intro h1 { font-size: clamp(52px, 13vw, 72px); }
  .game-deck { margin: 18px 0 0; font-size: 13px; }
  .game-layout { grid-template-columns: 1fr; gap: 12px; }
  .game-stage { height: min(68vh, 590px); min-height: 410px; }
  .overlay-panel { padding: 24px; }
  .overlay-panel:has(.game-run-options) { width: min(100%, 460px); }
  .game-sidebar { display: grid; grid-template-columns: 1fr 1.2fr; }
  .score-readout { grid-row: span 2; align-self: stretch; border-right: 1px solid rgba(255,255,255,.12); border-bottom: 0; }
  .score-value { font-size: 60px; }
  .run-stats { border-bottom: 1px solid rgba(255,255,255,.12); }
  .run-stats > div { min-height: 62px; padding: 12px; }
  .run-stats > div:last-child { min-height: 49px; }
  .ticker-board { grid-column: 1 / -1; padding: 16px; }
  .ticker-list { grid-template-columns: 1fr 1fr; column-gap: 15px; }
  .ticker-list li { min-height: 44px; }
  .game-disclaimer { grid-column: 1 / -1; margin: 0; padding-top: 2px; }
  .mobile-controls { position: absolute; z-index: 2; right: 16px; bottom: 15px; display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 46px); gap: 4px; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .mobile-controls button { display: grid; place-items: center; width: 48px; height: 46px; border: 1px solid rgba(227,235,221,.31); border-radius: 2px; background: rgba(9,12,11,.85); color: #eff3e9; font-size: 18px; touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .mobile-controls button:focus:not(:focus-visible) { outline: none; }
  .mobile-controls button:focus-visible { outline: 2px solid #a7d9b4; outline-offset: 2px; }
  .mobile-controls button:active { border-color: #a7d9b4; background: rgba(38,58,45,.94); }
  .mobile-controls button[data-direction="up"] { grid-column: 2; grid-row: 1; }
  .mobile-controls button[data-direction="left"] { grid-column: 1; grid-row: 2; }
  .mobile-controls button[data-direction="down"] { grid-column: 2; grid-row: 2; }
  .mobile-controls button[data-direction="right"] { grid-column: 3; grid-row: 2; }
  .game-control-strip { padding-top: 11px; font-size: 8px; }
  .leaderboard-heading { padding-inline: 16px; }
  .leaderboard-table th, .leaderboard-table td { padding-inline: 14px; }
  .terminal-mark { display: none; }
}

@media (max-width: 420px) {
  .game-header .wordmark { gap: 7px; font-size: 9px; }
  .game-back-link { font-size: 9px; }
  .game-stage { min-height: 390px; }
  .stage-coordinate { left: 11px; right: 11px; top: 12px; font-size: 8px; }
  .mobile-controls { right: 10px; bottom: 10px; transform: scale(.92); transform-origin: bottom right; }
  .score-readout { padding: 17px 13px; }
  .score-value { font-size: 52px; }
  .ticker-list { column-gap: 8px; }
  .game-footer { font-size: 8px; letter-spacing: .04em; }
  .leaderboard-heading { align-items: start; flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-back-link, .game-footer a, .game-action { transition: none; }
}
