/* Shared shell for Genius Arcade games: header, HUD, prompt bar, board, overlay and controls.
   Calm dark theme to match the site (decision #18). Fonts are self-hosted (SIL Open Font License,
   see fonts/), so games make no third-party requests. */
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:600 800;font-display:swap;src:url(/games/_shared/fonts/Baloo2.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:400 900;font-display:swap;src:url(/games/_shared/fonts/Nunito.woff2) format("woff2")}

:root{
  --bg:#0b1020; --surface:#151b2e; --surface-2:#1d2540; --line:#2a3352;
  --navy:#0b1020; --navy-2:#151b2e; --navy-3:#1d2540; --edge:#2a3352;
  --purple:#8b5cf6; --purple-2:#6d3fe0; --yellow:#ffd60a; --yellow-2:#e8a400;
  --text:#f3f4fb; --muted:#a7adc8; --good:#3ddc84; --bad:#ff6b81;
  --head:"Baloo 2","Nunito",system-ui,sans-serif; --body:"Nunito",system-ui,sans-serif;
  color-scheme:dark;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);
  background-image:radial-gradient(ellipse at top,rgba(139,92,246,.16),transparent 60%);
  overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.wrap{max-width:900px;margin:0 auto;padding:8px 14px 20px;display:flex;flex-direction:column;align-items:center;gap:10px}
.topbar{width:100%;display:flex}
.back{font-weight:800;font-size:15px;color:var(--muted);text-decoration:none;padding:6px 2px}
.back:hover{color:var(--yellow)}
h1{font-family:var(--head);font-weight:800;font-size:clamp(22px,4vw,34px);line-height:1.1;margin:0;text-align:center;color:var(--text)}

.hud{width:100%;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.chip{background:var(--surface);border-radius:999px;padding:4px 14px;font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px;box-shadow:inset 0 0 0 1px var(--line)}
.dots{display:flex;gap:5px}
.dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--muted)}
.dot.on{background:var(--yellow);border-color:var(--yellow-2)}
.hearts{display:flex;gap:4px}
.heart{width:19px;height:19px}

.prompt{width:100%;padding:6px 14px;text-align:center;font-family:var(--head);font-weight:800;font-size:clamp(24px,5vw,40px);line-height:1.15;min-height:1.7em;
  background:linear-gradient(180deg,#232c52,#1a2142);border-radius:16px;box-shadow:inset 0 0 0 2px rgba(139,92,246,.55),0 8px 24px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;gap:.4em;flex-wrap:wrap}
.prompt small{font-family:var(--body);font-size:.42em;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.prompt .hl{color:var(--yellow)}
.prompt.intro{font-size:clamp(16px,3vw,24px)}

.feedback{width:100%;min-height:2.9em;margin:0;font-size:16px;line-height:1.4;color:var(--muted);text-align:center}
.feedback b{color:var(--text)}
.feedback .ok{color:var(--good)}
.feedback .no{color:var(--bad)}
.board{display:flex;justify-content:center;max-width:100%;width:100%}
.stage{position:relative;max-width:100%}
canvas{display:block;max-width:100%;touch-action:none;border-radius:16px;box-shadow:0 0 0 2px rgba(139,92,246,.45),0 14px 40px rgba(0,0,0,.45);background:#0d1430}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;border-radius:16px;
  background:rgba(11,16,32,.86);backdrop-filter:blur(6px);text-align:center;padding:16px;overflow:auto}
.overlay[hidden]{display:none}
/* center when it fits, scroll from the top when it doesn't */
.overlay>:first-child{margin-top:auto}
.overlay>:last-child{margin-bottom:auto}
.overlay h2{font-family:var(--head);font-weight:800;font-size:clamp(22px,3.6vw,32px);line-height:1.15;margin:0;color:var(--text)}
.overlay p{margin:0;max-width:46ch;font-size:clamp(15px,2.3vw,18px);line-height:1.4;color:var(--muted)}
.overlay p strong{color:var(--text)}
.overlay .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

.btn{font-family:var(--body);font-weight:900;font-size:16px;padding:11px 20px;border:0;border-radius:999px;background:var(--yellow);color:#141000;transition:transform .1s,background .2s}
.btn:hover{background:#ffe14d}
.btn:active{transform:scale(.96)}
.btn.alt{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.btn.alt:hover{background:#273055}
.btn.lvl{display:flex;flex-direction:column;align-items:center;min-width:150px;line-height:1.25;border-radius:18px;padding:12px 18px}
.btn.lvl small{font-weight:700;font-size:13px;opacity:.85}

.controls{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%}
.pad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,52px);gap:6px}
.pad button{border:0;border-radius:14px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font-size:20px;font-weight:900;touch-action:manipulation}
.pad button:active{background:var(--purple);color:#fff}
.pad .up{grid-column:2}.pad .left{grid-column:1;grid-row:2}.pad .down{grid-column:2;grid-row:2}.pad .right{grid-column:3;grid-row:2}
.side{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* games that only steer left and right */
.pad.h-only{grid-template-columns:repeat(2,76px);grid-template-rows:56px}
.pad.h-only .up,.pad.h-only .down{display:none}
.pad.h-only .left,.pad.h-only .right{grid-row:1}
.pad.h-only .right{grid-column:2}
.prompt.long{font-size:clamp(18px,3.8vw,30px)}
.side .btn{font-size:14px;padding:7px 10px;min-height:40px}
.hint{font-size:14px;color:var(--muted);text-align:center;max-width:62ch;margin:0}

@media (pointer:coarse){
  .pad{grid-template-columns:repeat(3,68px);grid-template-rows:repeat(2,60px);gap:8px}
  .pad button{font-size:26px}
  .pad.h-only{grid-template-columns:repeat(2,88px);grid-template-rows:60px}
  .side .btn{min-height:46px}
  .kbd-hint{display:none}
}
@media (max-width:480px) and (orientation:portrait){
  .wrap{gap:7px;padding-top:4px}
  h1{font-size:20px}
  .hud{gap:5px}
  .chip{font-size:14px;padding:2px 8px}
  .prompt{font-size:26px;padding:4px 10px}
  .prompt.long{font-size:20px}
  .feedback{font-size:14px;min-height:2.8em}
  .controls{gap:8px}
  .side{grid-template-columns:repeat(4,1fr);width:100%}
  .side .btn{font-size:13px;padding:4px 2px}
}
/* Phones held sideways: HUD on the left, board in the middle, controls on the right. */
@media (orientation:landscape) and (max-height:560px){
  .wrap{max-width:none;height:100vh;height:100dvh;padding:6px 10px;gap:6px 10px;display:grid;
    grid-template-columns:clamp(140px,22vw,210px) minmax(0,1fr) clamp(156px,24vw,210px);
    grid-template-rows:auto auto auto 1fr;grid-template-areas:"top board controls" "hud board controls" "prompt board controls" "feedback board controls";align-items:start}
  h1,.hint{display:none}
  .topbar{grid-area:top}
  .hud{grid-area:hud;flex-direction:column;align-items:stretch;gap:5px}
  .chip{font-size:13px;padding:2px 8px;justify-content:space-between;flex-wrap:wrap}
  .prompt{grid-area:prompt;font-size:clamp(18px,3.2vw,26px);padding:4px 8px}
  .prompt.intro{font-size:15px}
  .feedback{grid-area:feedback;font-size:13px;text-align:left}
  .board{grid-area:board;align-self:stretch;justify-self:stretch;align-items:center;min-height:0;overflow:hidden}
  .controls{grid-area:controls;flex-direction:column;align-self:center;gap:10px}
  .pad{width:100%;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,minmax(44px,15vh));gap:6px}
  .pad.h-only{grid-template-columns:repeat(2,1fr);grid-template-rows:minmax(48px,18vh)}
  .prompt.long{font-size:clamp(15px,2.6vw,20px)}
  .side{width:100%}
  .side .btn{font-size:13px;padding:4px 6px;min-height:40px}
  .overlay{gap:8px;padding:10px}
  .overlay p{font-size:14px}
  .btn.lvl{min-width:120px;font-size:14px;padding:6px 10px}
  .btn.lvl small{font-size:11px}
  .overlay h2{font-size:18px}
}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}
.topbar{justify-content:space-between;align-items:center;gap:10px}
.who{font-weight:800;font-size:14px;color:var(--text);text-decoration:none;padding:4px 12px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
/* games that only steer up and down */
.pad.v-only{grid-template-columns:76px;grid-template-rows:repeat(2,56px)}
.pad.v-only .left,.pad.v-only .right{display:none}
.pad.v-only .up{grid-column:1;grid-row:1}
.pad.v-only .down{grid-column:1;grid-row:2}
@media (pointer:coarse){.pad.v-only{grid-template-columns:88px;grid-template-rows:repeat(2,60px)}}
@media (orientation:landscape) and (max-height:560px){.pad.v-only{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(48px,18vh))}}
.prompt .ans{color:var(--good)}
.prompt.reveal{box-shadow:inset 0 0 0 2px rgba(255,107,129,.8),0 8px 24px rgba(0,0,0,.25)}
/* typing games: a real text box (so phone keyboards work), kept out of sight */
.typer{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;border:0;padding:0;font-size:16px}
.prompt .flag{height:1.35em;width:auto;border-radius:4px;box-shadow:0 0 0 2px #1a1238,0 4px 10px rgba(0,0,0,.35);vertical-align:middle}