/* Game page: field layers, stage, printer (spec §3, §4, §7). */
/* Anything focusable over the field takes the skin's own nav ink, which every
   skin already has to pass against --field. Gold would be 1.99:1 on Icon. */
body.game{background:var(--field);overflow-x:hidden;--focus-ring:var(--nav-ink)}
.game .site-nav{position:sticky;top:0;color:var(--nav-ink);background:linear-gradient(var(--field) 65%,transparent)}
.game .site-foot{color:var(--nav-ink)}

/* ---- field (fixed; JS moves the layers at their own speeds) ---- */
.field{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.field__ghost{position:absolute;left:-.04em;top:10vh;font:400 min(70vw,640px)/.8 var(--font-display);color:transparent;-webkit-text-stroke:2px var(--ghost);white-space:nowrap;will-change:transform}

/* ---- layout ---- */
.game-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);padding:4px var(--gutter) 0}
.feed{position:relative;width:100%;max-width:460px;margin:0 auto}
.stage{display:none}

/* ---- printer: sticky at the bottom of the feed column; paper passes under it ---- */
.printer{
  --printer-h:64px;
  position:sticky;bottom:0;z-index:5;
  height:var(--printer-h);margin:0 -14px;
  background:linear-gradient(var(--printer-hi),var(--printer-lo));
  border-radius:12px 12px 0 0;
  box-shadow:0 -12px 28px var(--printer-shadow);
  transition:height .35s cubic-bezier(.22,1,.36,1);
}
.printer::before{content:"";position:absolute;left:10px;right:10px;top:-5px;height:9px;border-radius:5px;background:var(--printer-slot);box-shadow:inset 0 2px 3px var(--printer-slot-shadow)}
.printer__label{position:absolute;left:22px;top:24px;font:700 var(--t-micro)/1 var(--font-mono);letter-spacing:.2em;color:var(--printer-label);transition:opacity .2s}
.printer__led{position:absolute;right:22px;top:25px;width:7px;height:7px;border-radius:50%;background:var(--ink-accent);box-shadow:0 0 8px var(--ink-accent);transition:top .35s,width .35s,height .35s}
/* Nothing left to print: the LED drops its glow and goes to the housing's own
   grey, so a finished receipt stops claiming to still be printing. */
.printer.is-done .printer__led{background:var(--printer-label);box-shadow:none}
.printer.is-mini{--printer-h:14px}
.printer.is-mini .printer__label{opacity:0}
.printer.is-mini .printer__led{top:4px;width:4px;height:4px}

/* ---- ink-in: only once printer.js has run (no-JS = everything visible) ---- */
.ink-ready .receipt .ln:not(.is-inked){opacity:0}
.ink-ready .receipt .ln{transition:opacity .12s steps(2,end)}

/* The stepper sits on the field, not on paper, so it takes the nav ink. */
.game .pager{color:var(--nav-ink)}
.game .pager__step,.game .pager__up{border-color:var(--nav-ink)}
.game .pager__dir{color:inherit;opacity:.72}
/* On the field the accent is the field, so the up kicker takes the ink. */
.game .pager__dir--up{color:inherit;opacity:1;font-weight:700}

/* ---- stage (tablet + desktop) ---- */
.scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;color:var(--nav-ink);opacity:0;transform:translateY(30px);transition:opacity .15s ease,transform .3s ease}
.scene.is-active{opacity:1;transform:none;transition:opacity .35s ease .12s,transform .6s cubic-bezier(.22,1,.36,1) .12s}
.scene[data-key="highlights"].is-active{opacity:.55}
.scene__kicker{font:700 var(--t-meta)/1.4 var(--font-mono);letter-spacing:.22em}
.scene__big{margin-top:.08em;font:400 clamp(6rem,13vw,16.25rem)/.85 var(--font-display);letter-spacing:.01em;overflow-wrap:anywhere}
.scene__sub{max-width:28ch;margin-top:16px;font:600 clamp(var(--t-lede),2.1vw,30px)/1.15 var(--font-body)}
.qbars{display:flex;gap:4%;align-items:flex-end;height:55%;margin:28px 0 36px}
.qbars__period{position:relative;flex:1;display:flex;gap:8%;align-items:flex-end;height:100%}
.qbars__bar{display:block;flex:1;height:var(--h);background:var(--nav-ink);opacity:.3}
.qbars__bar--tor{background:var(--nav-ink);opacity:1}
.qbars__period span{position:absolute;left:0;bottom:-28px;font:700 var(--t-meta)/1 var(--font-mono)}

@media (min-width:820px){
  .game-layout{grid-template-columns:minmax(0,1fr) minmax(0,min(55%,420px));gap:4vw;max-width:1440px;margin:0 auto;padding:4px 4vw 0}
  .stage{display:block;position:sticky;top:72px;align-self:start;height:calc(100vh - 168px)}
  .feed{max-width:none}
  .printer{--printer-h:96px}
  .printer__label{top:34px;font-size:var(--t-micro)}
  .printer__led{top:35px}
}

@media (prefers-reduced-motion:reduce){
  .ink-ready .receipt .ln{transition:none}
  .printer,.printer__label,.printer__led,.scene,.scene.is-active{transition:none}
  .scene{transform:none}
}

/* ---- mural: the halfcourt ascii render, masked so the field's own ink draws
   it. The art is a dither, not a picture: at cover the claw and the arc
   surface where the cells crowd, and the rest reads as a screened surface.
   Taking its luminance as a mask rather than pasting the art keeps a skin in
   charge -- change --field and the mural changes with it.
   It replaced the diagonal stripes rather than layering over them: both are
   diagonal line patterns, and two of them is noise. The OG card still draws
   its own (og.html.j2) -- a 1200x630 still has no room for this much detail.
   No parallax: a cover-sized mask has no bleed to travel into, and tiling to
   buy some would run a seam through the claw. ---- */
.field__mural{
  position:absolute;inset:0;
  background:var(--mural-ink);
  opacity:var(--mural-op);
  -webkit-mask:url(../img/kawhi-halfcourt.webp) center/cover no-repeat;
          mask:url(../img/kawhi-halfcourt.webp) center/cover no-repeat;
}