/* Loaded after ../styles.css (linked from index.html so deploy.sh can cache-bust it); this sheet overrides the site chrome for the stage. */
:root { --mint:#77ffd2; --ink:#080e13; --muted:#91a7b4; }
* { box-sizing:border-box; }
body { margin:0; background:#080e13; color:#edf6f5; font-family:Arial,sans-serif; }
body::after { display:none; }
/* Page-wide scanlines stay off over the stage, but the logo keeps the same overlay as every other page. */
body.game-page .brand { position:relative; }
body.game-page .brand::after { content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); opacity:.5; mix-blend-mode:multiply; }
a { color:inherit; text-decoration:none; }
.badge { font:10px monospace; letter-spacing:1.5px; border:1px solid #426958; color:var(--mint); padding:6px 10px; margin-left:14px; vertical-align:middle; display:inline-block; white-space:nowrap; }
main { max-width:1440px; padding:30px 36px; margin:auto; }
.intro { display:flex; align-items:end; justify-content:space-between; margin-bottom:24px; gap:20px; }.eyebrow { color:var(--mint); font:10px monospace; letter-spacing:2px; }.intro h1 { font-size:clamp(28px,3.4vw,46px); letter-spacing:-1.7px; margin:12px 0 0; font-weight:600; }.intro em { color:var(--mint); font-style:normal; }.intro>p { color:var(--muted); font-size:13px; line-height:1.7; margin:0; }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 268px; gap:22px; }.toolbar { min-height:48px; display:flex; align-items:center; justify-content:space-between; background:#101b23; border:1px solid #2d404b; padding:8px 12px; gap:8px; }
button { background:var(--mint); border:1px solid var(--mint); padding:13px 20px; cursor:pointer; color:#081811; font-weight:700; font-size:13px; }.quiet { background:transparent; color:#d7e9ed; border:1px solid #48616d; }.toolbar button { font:11px monospace; padding:8px 12px; }button:disabled { opacity:.4; cursor:default; }button:hover:not(:disabled) { filter:brightness(1.12); }button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible { outline:2px solid #fff; outline-offset:4px; }[hidden] { display:none!important; }
.stage { position:relative; width:100%; max-width:100%; aspect-ratio:16/9; background:#080e13; border:1px solid #2d404b; border-top:0; overflow:hidden; touch-action:none; }canvas { display:block; width:100%; height:100%; }.hud { position:absolute; top:20px; left:22px; right:22px; display:flex; justify-content:space-between; pointer-events:none; }.hud strong { font:700 28px monospace; color:var(--mint); }.hud strong small { font-size:11px; }.hud span { display:block; font:10px monospace; margin-top:6px; color:#9fbac5; }.hud-right { text-align:right; }.hud-right span:first-child { color:var(--mint); }.section-banner { position:absolute; bottom:11px; left:20px; font:10px monospace; letter-spacing:1px; color:#c6dedf; pointer-events:none; }
.overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:24px; background:#080e13eF; overflow-y:auto; }.overlay h2 { font-size:clamp(23px,3vw,37px); letter-spacing:-1px; margin:14px 0; color:#f2faf7; }.overlay p { max-width:460px; color:#b4c6cd; line-height:1.6; font-size:13px; margin:0 0 20px; }.overlay .small { margin:16px 0 0; font:10px/1.6 monospace; color:#9db2ba; }.actions { display:flex; gap:10px; }.actions button span { margin-left:24px; }
.below { display:flex; justify-content:space-between; gap:12px; padding:14px 0; color:#9bb0bb; font:10px/1.5 monospace; }.below label { display:flex; gap:6px; align-items:center; }input { accent-color:var(--mint); }kbd { font:inherit; color:#d6e6e5; border:1px solid #3e525c; padding:2px 4px; }.lesson { border-left:2px solid var(--mint); padding:10px 15px; background:#0e1c21; }.lesson p { color:#cfdee1; font-size:13px; line-height:1.5; margin:8px 0 0; }
.panel { border:1px solid #2b3c46; padding:21px; margin-bottom:14px; background:#0d171e; }.panel h3 { font-size:20px; margin:14px 0 24px; font-weight:500; }.stats { border-top:1px solid #2b3c46; padding-top:17px; display:flex; justify-content:space-between; }.stats span { font:9px monospace; color:#8ea6b2; }.stats strong { display:block; color:#edf8f4; font:16px monospace; margin-top:9px; }
.legend p { display:flex; gap:14px; align-items:center; color:#91a7b4; font-size:11px; line-height:1.6; margin:20px 0 0; }.legend b { display:block; color:#dfebed; font-weight:500; }.legend i { display:block; flex-shrink:0; width:23px; height:28px; border:2px solid #ffae7b; background:#3c2624; }.legend .field { height:12px; border-color:#c8a0ff; background:#342541; }.legend .core { width:17px; height:17px; transform:rotate(45deg); border-color:var(--mint); background:#1e483b; margin:0 3px; }.footnote { color:#8ea6b2; font:10px/1.7 monospace; margin:18px 0; }.back { font:11px monospace; color:var(--mint); }
@media(max-width:1000px) { .layout { grid-template-columns:minmax(0,1fr); }aside { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.panel { margin:0; }.footnote { margin:0; }.intro>p { display:none; } }
@media(max-width:600px) { .badge { display:block; width:max-content; margin:8px 0 0; }main { padding:22px 12px; }.intro { margin-bottom:18px; }aside { grid-template-columns:1fr; }.toolbar { padding:8px 6px; }.hud { top:9px; left:10px; right:10px; }.hud strong { font-size:19px; }.hud span { font-size:8px; }.overlay { padding:12px; justify-content:flex-start; }.overlay h2 { font-size:21px; margin:8px 0; }.overlay p { font-size:11px; margin-bottom:10px; }.overlay .small { font-size:9px; margin-top:9px; }.overlay .eyebrow { font-size:8px; }.overlay button { padding:9px 15px; }.section-banner { font-size:8px; left:10px; bottom:7px; }.below { flex-wrap:wrap; }.badge { font-size:8px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }

.result-card { width:100%; max-width:460px; }
.actions { justify-content:center; }
.overlay[data-state="over"] { align-items:flex-end; background:linear-gradient(90deg,#08131b22,#08131bf5 55%); }
.overlay[data-state="over"] .result-card { max-width:55%; }
.overlay .result-hint { font:11px/1.6 monospace; color:#e2bf9c; }
.panel .record { font:700 38px monospace; color:var(--mint); margin:18px 0; }
.score-rule { color:#9bb1bb; font:12px/1.8 monospace; margin-bottom:20px; }
.stats + .stats { margin-top:20px; }
.stats strong span { display:inline; color:inherit; font:inherit; }
.pattern-note { color:#9bb1bb; font-size:12px; line-height:1.6; }
.pattern-note p { margin-top:8px; }
@media(max-width:600px) { .toolbar .eyebrow { font-size:8px; letter-spacing:1px; } .overlay[data-state="over"] .result-card { max-width:100%; } .overlay[data-state="over"] { background:#08131be8; } .overlay .result-hint { font-size:10px; } }

/* Mobile selection can jump to text beyond the canvas. Protect the whole
   play page, including standings, without disabling page scrolling. */
body.game-page, body.game-page *, .stage, .stage * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
/* Outside the stage, preserve scrolling while suppressing double-tap zoom. */
.play-area .below, .play-area .lesson { touch-action:manipulation; }
/* Callsigns retain normal selection, paste and editing controls. */
.stage input, body.game-page input, body.game-page textarea, body.game-page [contenteditable="true"] { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; touch-action:manipulation; }
@media(max-width:1000px) {
  /* Let the menu size the stage without an inner scrollbar. Preserve the
     full 16:9 canvas view so obstacle lookahead and proportions stay intact. */
  .stage { display:grid; aspect-ratio:auto; min-height:340px; }
  .stage > canvas, .stage > .overlay { grid-area:1 / 1; }
  .stage > canvas { min-width:0; min-height:0; height:100%; object-fit:contain; }
  .stage > .overlay { position:relative; inset:auto; overflow:visible; justify-content:center; padding:18px 12px 30px; }
  .stage .actions button { min-height:44px; }
  .stage .idrow input { font-size:16px; min-height:44px; }
  .stage .rank-line:empty, .stage .submit-state:empty, .stage .result-hint:empty { display:none; }
}
@media(max-width:600px) {
  main { padding:12px; }
  .intro { margin-bottom:12px; }
  .intro h1 { margin-top:8px; }
  .stage .actions button { padding:9px 10px; font-size:12px; }
  .stage .actions button span { display:none; }
}
/* identity row, submission report and standings, ported from the previous ranked page */
.toolbar #runStatus { color:#c6dedf; }
.idrow { display:flex; gap:10px; align-items:center; justify-content:center; margin:0 0 16px; }
.idrow input { width:180px; padding:9px 12px; font:12px monospace; letter-spacing:1px; text-align:center; background:#0a1319; border:1px solid #3e525c; color:#edf6f5; }
.idrow input:focus { outline:none; border-color:var(--mint); }
.netdot { font:9px monospace; letter-spacing:2px; text-transform:uppercase; }
.netdot::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; background:#4a5c64; vertical-align:middle; }
.netdot.on { color:var(--mint); }.netdot.on::before { background:var(--mint); box-shadow:0 0 8px var(--mint); }.netdot.off { color:#7e939d; }
.rank-line { font:700 15px monospace; letter-spacing:1px; color:#ffc384; min-height:18px; margin:0 0 6px; }
.submit-state { font:10px/1.6 monospace; letter-spacing:.5px; min-height:16px; margin:0 0 14px; color:#9db2ba; }
.submit-state.pending { color:#9db2ba; }.submit-state.ok { color:var(--mint); }.submit-state.warn { color:#ff9c8a; }
.actions { flex-wrap:wrap; }
.board { display:flex; flex-direction:column; padding:0; }
.board-head { display:flex; justify-content:space-between; align-items:baseline; padding:16px 18px 12px; border-bottom:1px solid #2b3c46; }
.board-head .sub { font:9px monospace; letter-spacing:1px; color:#7e939d; }
.board-tabs { display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid #2b3c46; }
.board-tabs .lb-tab { flex:1; font:10px monospace; letter-spacing:1.5px; padding:7px 6px; }
.board-tabs .lb-tab.active { background:var(--mint); color:#081811; border-color:var(--mint); }
.lb-scroll { max-height:300px; overflow-y:auto; overscroll-behavior:contain; padding:4px 6px 8px; }
.lb-list { list-style:none; margin:0; padding:0; }
.lb-list li { display:flex; align-items:center; gap:10px; padding:7px 8px; border-bottom:1px solid #1b2a33; font:12px monospace; color:#dfebed; }
.lb-list li.top { background:#0f2320; }.lb-list li.me { background:#12332b; border-left:2px solid var(--mint); }
.lb-rank { width:24px; text-align:right; color:#7e939d; font-weight:700; }.lb-list li.top .lb-rank { color:var(--mint); }
.lb-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-score { color:var(--mint); }
.lb-watch { font-size:9px; letter-spacing:1px; color:#9db2ba; text-transform:uppercase; }.lb-watch:hover { color:var(--mint); }
.lb-empty { display:block; padding:18px 10px; text-align:center; font:10px/1.7 monospace; color:#7e939d; }
.board-foot { padding:10px 18px; border-top:1px solid #2b3c46; font:9px/1.6 monospace; letter-spacing:1px; color:#7e939d; text-transform:uppercase; }.board-foot b { color:#ffc384; }
.seat-note { margin:0; padding:10px 18px 16px; font:10px/1.6 monospace; color:#9db2ba; }.seat-note a { color:var(--mint); text-decoration:underline; }
@media(max-width:1000px) { .board { grid-column:1 / -1; } }
@media(max-width:600px) { .idrow input { width:140px; } .lb-scroll { max-height:220px; } }

/* One aligned column on every result card, including wide desktop stages. */
.overlay .result-card { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.overlay .result-card > * { margin:0; }
.overlay .result-card > p { width:100%; max-width:460px; }
.overlay .result-card > .rank-line:empty,
.overlay .result-card > .submit-state:empty,
.overlay .result-card > .result-hint:empty { display:none; }
.overlay .result-card .idrow, .overlay .result-card .actions { justify-content:center; flex-wrap:wrap; }
@media(max-width:600px) { .overlay .result-card { gap:10px; } }

.overlay .result-card .idrow { position:relative; width:100%; }
.overlay .result-card .idrow .netdot { position:absolute; left:calc(50% + 100px); }
@media(max-width:600px) { .overlay .result-card .idrow .netdot { left:calc(50% + 80px); } }