/* The arcade games built on js/arcade.js (the Economics games: Shift Storm, Elasticity Sniper, Account
   Drop). The look is Hexa-Tac's (computer-science/hexa-tac.css), shared so every game is the same: before a
   game, the instructions on the left and the high scores on the right; in a game, the HUD, the arena (a
   canvas filling the height that's left) and the pad of answer buttons. The page chrome is the one-screen
   layout in /css/resource.css. Theme tokens throughout, except inside the game: the arena is always dark (the
   canvas draws it), and so is the game-over overlay. */

.stage-wrap{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;flex-direction:column}

/* ---------- before a game ---------- */
.setup{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:28px;padding:24px 26px}
.setup[hidden]{display:none}
.setup-main{display:flex;flex-direction:column;gap:12px;max-width:660px}
.setup-main h2{margin:0;font:700 24px/1.1 var(--font-display);color:var(--accent-deep)}
.inst{font-size:15px;color:var(--ink-soft);line-height:1.55}
.inst p{margin:0}
.inst p+p{margin-top:8px}
.inst code,.inst-keys code,.objective code{font-family:var(--font-mono);font-size:13px;background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:1px 6px;color:var(--ink)}
.inst kbd,.inst-keys kbd,.objective kbd{font-family:var(--font-mono);font-size:12.5px;background:var(--panel-2);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:var(--ink)}
.inst-keys{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--ink-soft)}
.inst-keys li{line-height:1.5}
.inst-keys b{color:var(--ink)}
.swatch{display:inline-block;width:13px;height:13px;border-radius:4px;vertical-align:-1px;margin-right:8px;background:var(--sw, var(--accent))}
.setup-footer{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.best-score{font-family:var(--font-mono);font-size:13px;color:var(--ink-soft)}
.best-score b{color:var(--ink)}
.launch-btn{font-size:16px;padding:12px 28px}
.setup-boards{justify-self:end;width:100%;display:flex;flex-direction:column;gap:8px}
.group-label{margin:0;font:600 11px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.group-label:not(:first-child){margin-top:10px}
.leaderboard-panel{background:var(--paper);border:1px solid var(--line-strong);border-radius:6px;padding:10px 14px;font-family:var(--font-mono);font-size:13px}
.leaderboard-panel .small{color:var(--muted);font-family:var(--font-body);font-size:13px;line-height:1.45}
.leaderboard-table{width:100%;border-collapse:collapse}
.leaderboard-table td{padding:4px 0;border:none}
.leaderboard-table .rank{color:var(--muted);width:24px}
.leaderboard-table .name{color:var(--accent-deep);font-weight:700;letter-spacing:1px}
.leaderboard-table .score{text-align:right;font-weight:700;color:var(--ink)}
.rejected-table .name,.rejected-table .score{color:var(--muted)}
.rejected-table .reason{text-align:right;padding-left:10px;font-size:11px;color:var(--muted);white-space:nowrap}
.arc-h{margin:18px 0 8px;font:700 15px/1.2 var(--font-display);color:var(--accent-deep)}

/* ---------- the game ---------- */
.stage{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;position:relative;background:var(--panel);padding:10px 12px 12px}
.stage[hidden]{display:none}
.stage:fullscreen{width:100vw;height:100vh}
.hud{display:flex;justify-content:space-between;align-items:center;gap:6px;flex:none}
.hud-left,.hud-right{display:flex;align-items:center;gap:6px}
.hud-left{flex-wrap:wrap;min-width:0}
.ov-chip{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.03em;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:3px 8px;display:flex;align-items:center;gap:5px;white-space:nowrap}
.ov-chip[hidden]{display:none}
.ov-chip b{color:var(--ink);font-weight:700;font-size:14px}
.score-chip b{color:var(--accent-b-deep)}
.icon-btn{width:28px;height:28px;border-radius:4px;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.lives-row{display:inline-flex;gap:2px}
.life-icon{width:14px;height:14px;color:var(--bad);transition:opacity .2s ease}
.life-icon.lost{opacity:.2}

/* the arena: a canvas that fills the height left, with a message across its top for feedback */
/* (width:max-content: at left:50% the message would otherwise wrap to half the arena) */
/* (z-index: above the site's brain watermark, which would otherwise show through the dark arena) */
.arena{flex:1;min-height:220px;position:relative;z-index:1;border-radius:6px;overflow:hidden;background:#070B14}
.arena canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}
.feedback{position:absolute;left:50%;top:10px;transform:translate(-50%,-8px);width:max-content;max-width:calc(100% - 24px);padding:7px 14px;border-radius:6px;font:600 13.5px/1.35 var(--font-body);text-align:center;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:2}
.feedback.show{opacity:1;transform:translate(-50%,0)}
.feedback.bad{background:rgba(127,19,29,.94);color:#fff;border:1px solid #F87171}
.feedback.good{background:rgba(6,78,59,.94);color:#fff;border:1px solid #34D399}
.feedback.info{background:rgba(15,23,42,.94);color:#fff;border:1px solid #64748B}

/* the pad: the answer buttons, one row on a laptop, wrapping on a phone; each shows its key */
.pad{flex:none;display:grid;grid-template-columns:repeat(var(--pad-cols, 4),minmax(0,1fr));gap:6px}
.pad-btn{font:700 15px/1.15 var(--font-display);padding:9px 6px;min-height:44px;border-radius:6px;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);cursor:pointer;touch-action:manipulation;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:border-color .1s,background .1s;border-bottom:3px solid var(--pad-c, var(--line-strong))}
.pad-btn .pad-key{font:600 11px/1 var(--font-mono);color:var(--muted)}
/* a second, smaller line on a button (e.g. what the answer means: |E| < 1) */
.pad-btn .pad-sub{display:block;margin-top:3px;font:500 11.5px/1.1 var(--font-mono);color:var(--ink-soft)}
@media (hover:hover){.pad-btn:hover{border-color:var(--accent);color:var(--accent-deep)}}
.pad-btn:active,.pad-btn.pressed{transform:translateY(1px);background:var(--accent-tint)}
.pad-btn:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.pad-btn[hidden]{display:none}
.pad-btn:disabled{opacity:.4;cursor:default;pointer-events:none}

/* game over: the overlay is always dark */
.stage-overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;background:rgba(8,12,18,.92);text-align:center;padding:20px;z-index:10;overflow:auto}
.stage-overlay.visible{display:flex}
/* (centred with auto margins, not justify-content, so a long review scrolls from the top instead of hiding the title) */
.stage-overlay>:first-child{margin-top:auto}
.stage-overlay>:last-child{margin-bottom:auto}
.stage-overlay h3{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,4vw,32px);color:#fff;margin:0}
.stage-overlay p{color:#C7D2E3;margin:0;font-size:14.5px;max-width:52ch}
.stage-overlay .score-final{font-family:var(--font-mono);font-size:15px;color:#fff}
.stage-overlay .score-final b{font-size:26px;color:#FFC94A}
.stage-overlay .new-best{color:#FFC94A;font-weight:600}
.stage-overlay .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.telemetry-grid{display:grid;grid-template-columns:repeat(4,auto);gap:4px 18px;font-family:var(--font-mono);font-size:12px;color:#C7D2E3}
.telemetry-grid b{color:#fff;margin-left:4px}
.review{max-width:min(560px,100%);text-align:left;font-size:13.5px;color:#C7D2E3;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:10px 14px}
.review[hidden]{display:none}
.review h4{margin:0 0 6px;font:600 11px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#FFC94A}
.review ul{margin:0;padding-left:18px}
.review li{margin:3px 0;line-height:1.45}
.review b{color:#fff}
.submit-area{display:flex;flex-direction:column;align-items:center;gap:8px;margin:4px 0}
.submit-area[hidden]{display:none}
.submit-area label{color:#C7D2E3;font-family:var(--font-mono);font-size:12px;letter-spacing:.05em}
.submit-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.overlay-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.initials-input{font-family:var(--font-mono);font-size:18px;font-weight:700;text-align:center;text-transform:uppercase;width:70px;padding:6px;border:1.5px solid #5CADDF;background:rgba(5,8,16,.9);color:#7CF7C4;border-radius:4px;outline:none}
.submit-status{font-family:var(--font-mono);font-size:12px;color:#7CF7C4}
.submit-status[hidden]{display:none}
.count-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 clamp(48px,10vw,96px)/1 var(--font-display);color:#fff;pointer-events:none;z-index:3;text-shadow:0 4px 24px rgba(0,0,0,.6)}
.count-in[hidden]{display:none}

/* ---------- smaller screens: the setup stacks and scrolls; the game keeps an arena most of the screen tall ---------- */
@media (max-width:900px),(max-height:560px){
  .setup{grid-template-columns:1fr;overflow:visible}
  .setup-boards{justify-self:stretch}
  .stage-wrap{flex:none}
  /* the header bar stays at the top (sticky, about 64px): the game fills the screen under it */
  .stage{flex:none;height:calc(100dvh - 76px);min-height:440px;scroll-margin-top:70px}
}
@media (max-width:760px){
  .pad{grid-template-columns:repeat(var(--pad-cols-sm, 2),minmax(0,1fr))}
  .pad-btn .pad-key{display:none}
}
@media (max-width:560px){
  .setup{padding:18px 16px}
  .stage{padding:8px}
  .hud-left{gap:4px}
  .mode-chip,.chip-word{display:none}
  .ov-chip{padding:3px 6px;font-size:10.5px}
  .ov-chip b{font-size:13px}
  .telemetry-grid{grid-template-columns:repeat(2,auto)}
}
@media (prefers-reduced-motion:reduce){.feedback,.life-icon,.pad-btn{transition:none}}