/* ===========================================================================
   TEDDY'S TAP RUN — section + overlay styles. The playfield itself is canvas
   (game.js); everything here is the frame and the three HTML screens.

   SIZE: the stage is the full viewport (100svh × full width). game.js caps
   the PLAYFIELD at 1.4:1 inside it and sizes everything off the shorter side,
   so the difficulty (tuned in stage-heights per second) is the same on every
   screen. The stage is a size container — panels scale with it (cqmin) and
   switch to two columns when it is short and wide (landscape phones).

   FULLSCREEN: native :fullscreen on the stage, or .is-immersive (fixed over
   the page) where element fullscreen doesn't exist (iPhone Safari).
   .game-frame keeps the stage's slot in the page so neither makes it jump.
   =========================================================================== */
.game{background:var(--ink);color:var(--cream);padding:clamp(56px,9vh,110px) 0 0}
.game-head{padding:0 var(--pad);max-width:1100px;margin:0 auto clamp(18px,3vh,28px);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px}
.game-head .eyebrow{margin:0}
.game-sub{font-weight:600;font-size:clamp(.86rem,1.3vw,1rem);opacity:.75}

.game-frame{position:relative;height:100vh;height:100svh;min-height:320px}
.game-stage{
  position:absolute;inset:0;overflow:hidden;background:var(--olive);
  container-type:size;container-name:game;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
.game-stage:fullscreen{position:fixed;inset:0;width:100%;height:100%}
.game-stage:-webkit-full-screen{position:fixed;inset:0;width:100%;height:100%}
.game-stage::backdrop{background:var(--night)}
.game.is-immersive .game-stage{position:fixed;inset:0;z-index:9995;width:100vw;height:100vh;height:100dvh}
html.game-lock,html.game-lock body{overflow:hidden;overscroll-behavior:none}

.game-canvas{display:block;width:100%;height:100%;touch-action:pan-y;outline:none}
.game.is-playing .game-canvas,.game.is-full .game-canvas{touch-action:none}
.game-canvas:focus-visible{outline:3px solid var(--lemon);outline-offset:-3px}
/* vignette as a compositor layer — it was a full-screen gradient fill every frame */
.game-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(0,0,0,.36) 100%)}

/* CURSOR. The page hides the OS cursor (body.has-cursor) and draws its own
   ring — which lives outside the stage, so it can't follow into fullscreen,
   and it is hidden during a run. Give the real pointer back in both cases;
   only the canvas hides it, and only while a run is live. */
body.game-on .cursor{visibility:hidden}
body.game-on,body.game-on a,body.game-on button{cursor:auto}
.game-stage:fullscreen{cursor:auto}
.game-stage:-webkit-full-screen{cursor:auto}
.game .game-stage button,.game .game-stage a{cursor:pointer}
.game.is-playing .game-canvas{cursor:none}

/* ---- screens ----------------------------------------------------------- */
.game-screen{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:min(90%,560px);max-height:calc(100% - 2 * var(--gf,16px) - 12px);overflow:auto;
  text-align:center;background:rgba(20,22,15,.86);border:2px solid rgba(250,236,228,.35);
  padding:clamp(16px,3.4cqmin,34px) clamp(14px,3.4cqmin,34px);
  display:grid;justify-items:center;align-items:center;gap:clamp(10px,2cqmin,18px);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.gs-a,.gs-b,.go-a,.go-b{display:grid;justify-items:center;gap:clamp(8px,1.6cqmin,14px);width:100%}
.game-start{top:44%}

.game-title{font-family:var(--display);font-size:clamp(2.2rem,11cqmin,5.2rem);line-height:.86;letter-spacing:-.005em}
.game-legend{display:flex;gap:clamp(12px,3.4cqmin,28px);justify-content:center;flex-wrap:wrap}
.game-legend li{display:grid;justify-items:center;gap:4px}
.game-legend .chips{display:flex}
.game-legend b{font-size:clamp(.58rem,1.5cqmin,.78rem);font-weight:900;letter-spacing:.24em;opacity:.8}
.game-play{background:var(--lemon);border-color:var(--lemon);color:var(--ink);
  font-size:clamp(.85rem,2.2cqmin,1.15rem);padding:clamp(13px,2.4cqmin,20px) clamp(34px,7cqmin,64px)}
.game-play:hover{background:var(--cream);border-color:var(--cream)}
.game-hint{font-size:clamp(.62rem,1.5cqmin,.78rem);font-weight:900;letter-spacing:.22em;opacity:.6;text-transform:uppercase}
.game-best{font-size:clamp(.6rem,1.4cqmin,.74rem);font-weight:900;letter-spacing:.16em;color:var(--lemon)}
.game-best:empty{display:none}

.game-badgebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.game-badges{display:flex;gap:6px}
.gb{width:clamp(12px,2cqmin,16px);aspect-ratio:1;border-radius:50%;border:2px solid rgba(250,236,228,.45)}
.gb.is-on{background:var(--lemon);border-color:var(--lemon)}
.gb.is-new{box-shadow:0 0 0 3px rgba(230,195,58,.35);animation:gbpop .6s ease-out 2}
@keyframes gbpop{50%{transform:scale(1.5)}}
.game-badges-n{font-size:.58rem;font-weight:900;letter-spacing:.18em;opacity:.7}

.go-title{font-family:var(--display);font-size:clamp(1.3rem,5cqmin,2.4rem);color:var(--lemon);line-height:1}
.go-score{font-family:var(--display);font-size:clamp(2.8rem,13cqmin,6.2rem);line-height:.9;font-variant-numeric:tabular-nums}
.go-best{font-size:clamp(.62rem,1.5cqmin,.78rem);font-weight:900;letter-spacing:.16em;opacity:.85;text-transform:uppercase}
.go-near{font-size:clamp(.8rem,1.9cqmin,1rem);font-weight:700;opacity:.9}
.go-near:empty{display:none}
.go-badge{font-size:clamp(.6rem,1.5cqmin,.76rem);font-weight:900;letter-spacing:.14em;color:var(--lemon);text-transform:uppercase}

/* party timeline: 4PM → 10PM, this run filled, best run as a tick */
.go-line{position:relative;width:88%;height:8px;margin:6px 0 16px;background:rgba(250,236,228,.18)}
.go-run{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--lemon);transition:width .8s cubic-bezier(.16,1,.3,1)}
.go-ghost{position:absolute;top:-5px;width:3px;height:18px;margin-left:-1px;background:var(--cream)}
.go-line i{position:absolute;top:13px;transform:translateX(-50%);font-style:normal;font-size:.55rem;font-weight:900;letter-spacing:.1em;opacity:.6}

.go-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.go-btns .btn{padding:clamp(12px,2.2cqmin,18px) clamp(20px,4cqmin,34px)}
.go-draw{font-size:clamp(.72rem,1.7cqmin,.9rem);font-weight:600;opacity:.85;line-height:1.45;max-width:36ch}
.go-draw a{color:var(--lemon);font-weight:900;white-space:nowrap}

/* ---- controls: bottom-right, inside the poster frame, under the rail ---- */
.game-ctrls{position:absolute;right:calc(var(--gf,16px) + 4px);bottom:calc(var(--gf,16px) + 4px);z-index:3;display:flex;gap:6px}
.game-ctl{font:900 .56rem/1 var(--ui);letter-spacing:.2em;color:var(--cream);
  background:rgba(20,22,15,.6);border:1.5px solid rgba(250,236,228,.4);padding:8px 10px;cursor:pointer}
.game-ctl:hover{border-color:var(--cream)}
.game-ctl[aria-pressed="true"]{opacity:.6}
.game-ctl:focus-visible{outline:2px solid var(--lemon);outline-offset:2px}
@media (pointer:coarse){ .game-ctl{min-height:40px;padding:12px 14px} }
.go-draw a{display:inline-block;padding:12px 6px;margin:-12px -6px}

/* ---- short + wide (landscape phones): panels go two-column ------------- */
@container game (max-height:560px) and (min-width:560px){
  .game-screen{grid-template-columns:1fr 1fr;width:min(92%,860px);column-gap:clamp(16px,4cqw,40px)}
  .game-pause{grid-template-columns:1fr}
  .game-start{top:48%}
  .game-title{font-size:clamp(2rem,15cqh,3.6rem)}
  .go-score{font-size:clamp(2.4rem,17cqh,4.4rem)}
}
@container game (max-height:420px){
  .game-screen{padding:12px 14px;gap:8px}
  .gs-a,.gs-b,.go-a,.go-b{gap:6px}
  .game-hint{display:none}
  .go-line{margin:4px 0 14px}
  .game-legend canvas{transform:scale(.85)}
}
/* narrow + short fallback (tiny phones in landscape without the width) */
@container game (max-height:560px) and (max-width:559px){
  .game-legend,.game-hint{display:none}
}