/* Hexa-Tac (computer-science/hexa-tac.php). The page chrome is the one-screen layout in /css/resource.css,
   the setup, leaderboards, HUD and game-over overlay are the CS games' shared parts (cs-game.css). Before a
   game: the instructions on the left, the high scores on the right. In a game: the HUD, the sky (a canvas
   filling the height that's left) and the keypad. Theme tokens throughout: the sky is a dark screen in both
   modes (--screen-*, --neon-*: the canvas reads them too). */

/* ---------- before a game ---------- */
.inst{font-size:15px;color:var(--ink-soft)}
.inst p{margin:0}
.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,.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)}
/* the aliens' colours, as the canvas draws them (hexa-tac.js) */
.swatch{display:inline-block;width:13px;height:13px;border-radius:4px;vertical-align:-1px;margin-right:8px}
.swatch.green{background:color-mix(in srgb,var(--neon-green) 80%,var(--screen-bg));box-shadow:0 0 0 1px var(--neon-green)}
.swatch.blue{background:color-mix(in srgb,var(--neon-blue) 80%,var(--screen-bg));box-shadow:0 0 0 1px var(--neon-blue)}

/* ---------- the Explanation ---------- */
.ht-h{margin:18px 0 8px;font:700 15px/1.2 var(--font-display);color:var(--accent-deep)}

/* ---------- the game ---------- */
.stage{gap:8px;padding:10px 12px 12px}
.hud{gap:6px;flex-wrap:nowrap}
.hud-left{min-width:0}
.hud-right{flex-wrap:nowrap}
.ov-chip{padding:3px 8px;white-space:nowrap}
.ov-chip b{font-size:14px}
.icon-btn{width:28px;height:28px}
.life-icon{width:14px;height:14px}
.buffer-row{display:inline-flex;gap:3px}
.buffer-slot{min-width:20px;text-align:center;font:700 15px/20px var(--font-mono);color:var(--accent-deep);background:var(--accent-tint);border:1px solid var(--accent);border-radius:3px}
.buffer-slot.empty{color:transparent;background:transparent;border-style:dashed;border-color:var(--line-strong)}

/* the sky: a canvas that fills the height left, with a message across its top when something goes wrong */
/* (z-index: above the site's brain watermark, which would otherwise show through the night sky) */
.arena{flex:1;min-height:220px;position:relative;z-index:1;border-radius:6px;overflow:hidden;background:var(--screen-bg)}
.arena canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.feedback{position:absolute;left:50%;top:10px;transform:translate(-50%,-8px);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}
.feedback.show{opacity:1;transform:translate(-50%,0)}
.feedback.bad{background:color-mix(in srgb,color-mix(in srgb,var(--neon-red) 45%,var(--screen-bg)) 92%,transparent);color:var(--screen-ink);border:1px solid var(--neon-red)}

/* the keypad: 0–F in one row on a laptop (Clear only in 8-bit), four rows on a phone */
.keypad{flex:none;display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:6px}
.keypad.two-digit{grid-template-columns:repeat(16,minmax(0,1fr)) minmax(0,1.6fr)}
.keypad:not(.two-digit) .key-clear{display:none}
.key-btn{font:700 18px/1 var(--font-mono);padding:11px 0;border-radius:6px;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);cursor:pointer;touch-action:manipulation;transition:border-color .1s,background .1s}
@media (hover:hover){.key-btn:hover{border-color:var(--accent);color:var(--accent-deep)}}
.key-btn:active{transform:translateY(1px);background:var(--accent-tint)}
.key-btn:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.key-clear{font:600 13px/1 var(--font-display);color:var(--ink-soft)}

/* game over */
.stage-overlay{overflow:auto}

/* ---------- the 3D game (hexa-tac-3d.js): the Unity build fills the arena; it draws its own score and lives ---------- */
.inst-keys[hidden]{display:none}
.inst p+p{margin-top:8px}
.stage-3d .arena{background:var(--screen-bg)}
.stage-3d .arena canvas:focus{outline:none}
.hint-chip kbd{font-family:var(--font-mono);font-size:11px;background:var(--panel-2);border:1px solid var(--line-strong);border-radius:3px;padding:0 4px;color:var(--ink)}
.load-bar{width:min(320px,70%);height:8px;border-radius:999px;background:color-mix(in srgb,var(--screen-ink) 12%,transparent);overflow:hidden}
.load-bar span{display:block;height:100%;width:0;background:var(--neon-green);transition:width .2s ease}
@media (max-width:760px){.hint-chip{display:none}}
@media (prefers-reduced-motion:reduce){.load-bar span{transition:none}}

/* ---------- smaller screens: the setup stacks and scrolls; the game keeps a sky the height of most of the screen ---------- */
@media (max-width:900px),(max-height:560px){
  /* 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:420px;scroll-margin-top:70px}
}
@media (max-width:760px){
  .keypad,.keypad.two-digit{grid-template-columns:repeat(4,minmax(0,1fr))}
  .keypad.two-digit .key-clear{grid-column:span 4}
  .key-btn{padding:9px 0;font-size:17px}
}
@media (max-width:560px){
  .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}
}
@media (prefers-reduced-motion:reduce){.feedback,.key-btn{transition:none}}