/* ============================================================
   TONGUE RUSH — game page styles.
   Loaded after styles.css so it can lean on the site's palette
   custom properties. Only ever used by game.html.
   ============================================================ */

html, body { overscroll-behavior: none; }

.cg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The game is the point of this page, so its intro is trimmed hard: on a
   1440x900 laptop the nav, the intro and the whole shell fit without a scroll. */
main > .section { padding-top: clamp(.9rem, 2.2vw, 1.5rem); padding-bottom: clamp(1.2rem, 3vw, 2rem); }
.section-head { margin-bottom: clamp(.7rem, 1.4vw, .9rem); }
.section-head .section-title { font-size: clamp(2.2rem, 5.2vw, 3rem); }
.section-head .section-sub { font-size: .95rem; }

/* ─────────── shell ─────────── */

#cuna-game {
  position: relative;
  display: grid;
  gap: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px;
  background: rgba(36, 4, 15, .62);
  border: var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--pop-lg);
  touch-action: none;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  min-height: 420px;
}
#cuna-game.is-nap { display: block; text-align: center; }

.cg-probe {
  position: absolute; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* portrait touch — the two gutters become a bottom deck, side by side */
@media (orientation: portrait) {
  #cuna-game {
    grid-template-columns: 1fr 1fr;
    /* The maze is width-bound in portrait, so leftover height is unavoidable
       slack. Cap the thumb deck and centre the field in what is left, which
       pulls the maze down toward the sticks instead of stranding it under the
       HUD with a dead band between the two. */
    grid-template-rows: auto 1fr clamp(240px, 34svh, 330px);
    grid-template-areas: "hud hud" "field field" "gl gr";
    min-height: min(92svh, 820px);
  }
}
/* landscape — gutters flank the maze */
@media (orientation: landscape) {
  #cuna-game {
    grid-template-columns: minmax(132px, 1fr) auto minmax(132px, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "hud hud hud" "gl field gr";
  }
}
/* desktop */
@media (hover: hover) and (pointer: fine) {
  #cuna-game {
    grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "hud hud hud" "gl field gr";
    min-height: 0;
  }
  .cg-stick, .cg-pad { display: none; }
}
#cuna-game.cg-desktop {
  grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "hud hud hud" "gl field gr";
  min-height: 0;
}
#cuna-game.cg-desktop .cg-stick { display: none; }
/* Each gutter shows one instrument and hides the other, so the two are never
   stacked in the same place. Which side gets which is a stored preference —
   handedness, nothing more; both are live either way. */
#cuna-game.cg-touch .cg-stick { display: block; pointer-events: none; }
#cuna-game.cg-touch .cg-gutter[data-ctl="pad"] .cg-stick { opacity: 0; }
#cuna-game.cg-touch .cg-gutter[data-ctl="pad"] .cg-stick.is-live { opacity: 1; }
#cuna-game.cg-touch .cg-gutter[data-ctl="stick"] .cg-stick { opacity: .62; }
#cuna-game.cg-touch .cg-gutter[data-ctl="stick"] .cg-stick.is-live { opacity: 1; }
#cuna-game.cg-touch .cg-gutter[data-ctl="stick"] .cg-pad { display: none; }

/* On the stick side the ring is furniture and has to sit still enough to aim
   for; on the pad side it only appears under a thumb mid-drag. Either way it
   springs back to its printed home on release. */
.cg-gutter[data-ctl="stick"] .cg-stick { transition: transform .18s cubic-bezier(.2,.9,.3,1), opacity .12s ease; }

/* Both gutters are live, permanently, and identical. The stick no longer
   migrates between them: a cross is printed in each and either thumb can
   swipe or tap at any moment. That is what makes a resting hand harmless —
   there is no "active" side to take over, so a stationary touch commits
   nothing no matter where it lands. The ring is not furniture any more; it
   is drawn under your thumb only while you actually drag. */
#cuna-game.cg-desktop .cg-pad { display: none; }
#cuna-game.cg-touch .cg-pad { display: block; }

/* A three-column grid needs ~560px. Below that, collapse to one column and
   drop the side panels rather than letting the maze get sliced off and the
   body scroll sideways. */
@media (max-width: 560px) {
  #cuna-game.cg-desktop {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "hud" "field";
  }
  #cuna-game.cg-desktop .cg-panel,
  #cuna-game.cg-desktop .cg-gut { display: none; }
}

/* ─────────── HUD ─────────── */

.cg-hud {
  grid-area: hud;
  display: flex; align-items: center; gap: clamp(.5rem, 2vw, 1.1rem);
  padding: 0 .4rem .5rem;
  min-width: 0;
}
.cg-stat { display: flex; flex-direction: column; line-height: 1; flex: 0 0 auto; }
.cg-stat span {
  font-size: .58rem; letter-spacing: .14em; font-weight: 800; color: var(--pink-3);
  text-transform: uppercase;
}
.cg-stat strong {
  font-family: var(--font-display); font-size: clamp(1rem, 3.2vw, 1.45rem);
  color: var(--cream); letter-spacing: .03em;
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
}
.cg-lives { display: flex; gap: 3px; margin-left: auto; align-items: center; flex: 0 1 auto; min-width: 0; overflow: hidden; }
@media (max-width: 430px) {
  .cg-hud { gap: .85rem; padding: 0 .1rem .35rem; }
  .cg-stat span { font-size: .47rem; letter-spacing: .07em; }
  .cg-stat strong { font-size: 1.1rem; -webkit-text-stroke-width: 3px; }
  .cg-icon { width: 30px; height: 30px; font-size: .85rem; box-shadow: 0 3px 0 var(--ink); }
  .cg-lives { gap: 2px; }
}
.cg-lives canvas { display: block; }

/* Muted = the note with a slash through it. */
#cg-sound { position: relative; }
#cg-sound.is-muted::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 62%; height: 3px; margin: -1.5px 0 0 -31%;
  background: currentColor; border-radius: 2px;
  transform: rotate(-45deg);
}
.cg-icon {
  flex: 0 0 auto;
  width: 34px; height: 34px; display: grid; place-items: center;
  font-family: var(--font-body); font-weight: 800; font-size: .95rem; line-height: 1;
  color: var(--cream-2); background: var(--plum-3);
  border: 3px solid var(--ink); border-radius: 50%;
  box-shadow: 0 4px 0 var(--ink); cursor: pointer; padding: 0;
}
.cg-icon.is-on { background: var(--mint); color: var(--ink); }
.cg-icon:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.cg-icon[hidden] { display: none; }

/* ─────────── field ─────────── */

.cg-field {
  grid-area: field;
  display: grid; place-items: center; position: relative;
  min-width: 0; min-height: 0;
  touch-action: none;
}
#cg-canvas {
  display: block; border-radius: 12px;
  border: 3px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  touch-action: none;
}
.cg-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 8px;
  z-index: 3;
  overflow: auto;
}
.cg-overlay[hidden] { display: none; }
.cg-overlay.cg-pass { pointer-events: none; }
/* The attract overlay deliberately lets taps fall through to the field so
   that tapping anywhere starts the run. Anything genuinely interactive on it
   has to opt back in, or it is simply not tappable. */
.cg-overlay.cg-pass [data-act] { pointer-events: auto; }
.cg-card {
  max-width: min(100%, 30rem);
  background: rgba(36, 4, 15, .9);
  border: var(--edge); border-radius: 18px;
  box-shadow: var(--pop);
  padding: 1rem 1.2rem; text-align: center;
  max-width: 100%;
}
.cg-big {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(1.4rem, 5vw, 2.3rem); line-height: 1.05; color: var(--cream);
  -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill;
}
.cg-sub { margin: .4rem 0 0; font-size: .82rem; color: var(--pink-3); font-weight: 700; }
.cg-pill {
  display: inline-block; margin: .7rem 0 0;
  background: var(--cream); color: var(--ink);
  font-weight: 800; font-size: .95rem;
  padding: .5rem 1.1rem; border: var(--edge); border-radius: 999px;
  box-shadow: 0 5px 0 var(--ink);
}
.cg-attract .cg-pill { animation: cgbob 1.4s ease-in-out infinite alternate; }
@keyframes cgbob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
.cg-btns { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .9rem; }

/* On the game-over card the buttons sat ink-on-ink against the dark scrim, so
   the site's signature 3px ink border and hard shadow were invisible at the
   one moment they matter. Give that row a cream plate to sit on, continuing
   the nutrition label above it. */
.cg-label-wrap .cg-btns {
  margin-top: 0;
  padding: .9rem .7rem 1.15rem;
  background: var(--cream-2);
  border: var(--edge);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-width: 340px;
  margin-left: auto; margin-right: auto;
}
.cg-label-wrap .cg-label { border-radius: 8px 8px 0 0; border-bottom: none; margin-bottom: 0; }

/* Three buttons never fit one row, and letting them wrap left the third
   centred on its own line looking accidental. Give them a deliberate
   hierarchy instead: AGAIN is what people want after a game over, so it
   spans the full width; the other two share the row under it. */
.cg-label-wrap .cg-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.cg-label-wrap .cg-btns > :first-child { grid-column: 1 / -1; }
.cg-label-wrap .cg-btns .btn { width: 100%; justify-content: center; }

/* Below this the two secondary labels get too tight side by side. */
@media (max-width: 430px) {
  .cg-label-wrap .cg-btns { grid-template-columns: 1fr; }
}
.cg-toast {
  position: absolute; left: 50%; top: 8%;
  transform: translate(-50%, -6px);
  font-family: var(--font-display); font-size: clamp(1rem, 3.6vw, 1.5rem);
  color: var(--cream-2); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill;
  letter-spacing: .06em; pointer-events: none; opacity: 0; z-index: 2;
  transition: opacity .16s ease, transform .16s ease;
}
.cg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ─────────── nutrition facts label ─────────── */

.cg-label-wrap { padding: .7rem; }
.cg-label {
  background: var(--cream-2); color: var(--ink);
  border: var(--edge); border-radius: 8px;
  padding: .75rem .9rem; text-align: left;
  max-width: 340px;
}
.cg-label h3 {
  margin: 0 0 .3rem; font-family: var(--font-display);
  font-size: 1.5rem; line-height: 1; letter-spacing: .02em;
  border-bottom: 6px solid var(--ink); padding-bottom: .25rem;
}
.cg-newbest {
  margin: 0 0 .35rem; font-family: var(--font-display); font-size: .95rem;
  color: var(--pink-deep); letter-spacing: .08em;
}
.cg-lrule { border-top: 4px solid var(--ink); margin: .35rem 0; }
.cg-lrow {
  display: flex; align-items: baseline; gap: 4px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .72rem; line-height: 1.75; font-weight: 600;
}
.cg-lrow i {
  flex: 1 1 auto; border-bottom: 2px dotted rgba(36, 4, 15, .45);
  transform: translateY(-2px);
}
.cg-lrow b { font-weight: 800; white-space: nowrap; }
.cg-lrow-top { font-size: .7rem; }
.cg-lfoot {
  margin: .5rem 0 0; font-size: .58rem; line-height: 1.45;
  font-weight: 600; color: rgba(36, 4, 15, .78);
}

.cg-nap { padding: 2rem 1rem; }
.cg-nap .cg-sub { max-width: 42ch; margin: .6rem auto 1rem; }

/* ─────────── gutters ─────────── */

.cg-gutter {
  position: relative; min-width: 0; min-height: 0;
  touch-action: none;
}
.cg-gutter-l { grid-area: gl; }
.cg-gutter-r { grid-area: gr; }

.cg-panel { display: none; padding: 0 .7rem; }
@media (hover: hover) and (pointer: fine) { .cg-panel { display: block; } }
#cuna-game.cg-desktop .cg-panel { display: block; }
#cuna-game.cg-touch .cg-panel { display: none; }

.cg-panel h3 {
  margin: 0 0 .45rem; font-family: var(--font-display);
  font-size: .95rem; letter-spacing: .1em; color: var(--pink-2);
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
}
.cg-pcard {
  background: rgba(36, 4, 15, .55); border: var(--edge);
  border-radius: 16px; box-shadow: var(--pop); padding: .65rem .75rem;
  margin-bottom: .5rem;
}
.cg-prow { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.cg-prow + .cg-prow { margin-top: .45rem; }
.cg-prow span {
  font-size: .6rem; letter-spacing: .13em; font-weight: 800; color: var(--pink-3);
  text-transform: uppercase;
}
.cg-prow strong {
  font-family: var(--font-display); color: var(--cream); font-size: 1.05rem;
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
}
.cg-prow.cg-prow-big strong { font-size: 1.75rem; }
.cg-prow .cg-lives { margin-left: 0; }

.cg-legend { list-style: none; margin: 0; padding: 0; }
.cg-legend li { display: flex; gap: .55rem; align-items: flex-start; }
.cg-legend li + li { margin-top: .36rem; }
.cg-legend canvas { flex: 0 0 auto; margin-top: 2px; }
.cg-legend b {
  display: block; font-family: var(--font-display); letter-spacing: .05em;
  font-size: .84rem; color: var(--cream);
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
}
.cg-legend p { margin: 0; font-size: .68rem; line-height: 1.28; color: var(--pink-3); font-weight: 600; }

.cg-keys { display: flex; flex-wrap: wrap; gap: .26rem; }
/* a short laptop window loses the decorative badge before it loses the maze */
@media (max-height: 820px) { .cg-badge { display: none; } }
.cg-key {
  font-family: var(--font-body); font-weight: 800; font-size: .62rem;
  min-width: 23px; text-align: center;
  padding: .18rem .34rem; color: var(--ink); background: var(--cream);
  border: 3px solid var(--ink); border-radius: 7px; box-shadow: 0 3px 0 var(--ink);
}
.cg-badge {
  display: block; width: 58px; height: 58px; margin: 0 auto .6rem;
  border-radius: 50%; border: 3px solid var(--ink); box-shadow: var(--pop);
}

/* ─────────── control chooser ─────────── */

.cg-swap {
  /* Pinned to the bottom of the overlay, not placed in the card. In the card
     it sat within 5px of the dead centre of an iPad screen — precisely where
     a thumb lands to start the game — so tapping to play flipped your
     controls instead. */
  position: absolute; left: 50%; bottom: 10px;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .8rem;
  font: inherit; font-size: .62rem; font-weight: 800; letter-spacing: .04em;
  color: var(--cream); background: color-mix(in srgb, var(--plum-2) 82%, transparent);
  border: 2px solid var(--ink); border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  /* The card above it is tap-to-start; this must not inherit that. */
  touch-action: manipulation;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .cg-swap { background: rgba(82, 15, 51, .82); }
}
.cg-swap span { white-space: nowrap; }
.cg-swap i { font-style: normal; font-size: .95rem; color: var(--pink); }
.cg-swap:active { transform: translateX(-50%) translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* ─────────── the gutter pad ─────────── */

/* A cross printed in the middle of each gutter. It is two things at once: a
   tap target for people who want discrete buttons, and — mostly — a visible
   sign that this dead-looking margin does something. A bare swipe surface
   tests fine and still fails in the wild, because nothing tells you it is
   there. The arms are deliberately low-contrast: they are an affordance, not
   the main event. */
.cg-pad {
  position: absolute;
  width: var(--pad, 148px); height: var(--pad, 148px);
  display: none;
  touch-action: none;
  opacity: .5;
  transition: opacity .2s ease;
}
.cg-pad.is-hot { opacity: .92; }
/* While this gutter is being dragged, the ring is drawn on top of its own
   cross and buries it. Fade the cross out rather than stacking two controls
   in the same place — the ring is the live readout at that moment, and the
   cross on the other side still shows the committed direction. */
.cg-pad.is-dragging { opacity: .1; }
.cg-padbtn {
  position: absolute; width: 34%; height: 34%;
  background: color-mix(in srgb, var(--plum-2) 72%, transparent);
  border: 2px solid var(--ink);
  transition: background .07s linear;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .cg-padbtn { background: rgba(82, 15, 51, .72); }
}
.cg-padbtn.is-on { background: var(--pink); }
.cg-padbtn::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; border-style: solid; --c: var(--cream);
}
.cg-pu { left: 33%; top: 0; border-radius: 12px 12px 0 0; }
.cg-pd { left: 33%; bottom: 0; border-radius: 0 0 12px 12px; }
.cg-pl { left: 0; top: 33%; border-radius: 12px 0 0 12px; }
.cg-pr { right: 0; top: 33%; border-radius: 0 12px 12px 0; }
.cg-pu::after { margin: -7px 0 0 -8px; border-width: 0 8px 11px 8px; border-color: transparent transparent var(--c) transparent; }
.cg-pd::after { margin: -4px 0 0 -8px; border-width: 11px 8px 0 8px; border-color: var(--c) transparent transparent transparent; }
.cg-pl::after { margin: -8px 0 0 -7px; border-width: 8px 11px 8px 0; border-color: transparent var(--c) transparent transparent; }
.cg-pr::after { margin: -8px 0 0 -4px; border-width: 8px 0 8px 11px; border-color: transparent transparent transparent var(--c); }
.cg-padhub {
  position: absolute; left: 33%; top: 33%; width: 34%; height: 34%;
  background: color-mix(in srgb, var(--plum-2) 72%, transparent);
  border: 2px solid var(--ink);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .cg-padhub { background: rgba(82, 15, 51, .72); }
}
@media (prefers-reduced-motion: reduce) {
  .cg-pad, .cg-padbtn { transition: none; }
}

/* ─────────── the drag ring ─────────── */


.cg-stick {
  position: absolute;
  width: var(--ring, 120px); height: var(--ring, 120px);
  display: none;
  transform: translate3d(0, 0, 0);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1);
  touch-action: none;
}
.cg-stick.is-drag, .cg-gutter[data-ctl="stick"] .cg-stick.is-drag { transition: opacity .1s ease; }
.cg-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--plum-2) 88%, transparent);
  border: 3px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .cg-ring { background: rgba(82, 15, 51, .88); }
}
.cg-ring::before {
  content: ""; position: absolute; inset: 8px;
  border: 2px dashed var(--cream); border-radius: 50%; opacity: .82;
}
.cg-stick.is-live .cg-ring { border-color: var(--pink-2); background: rgba(45, 7, 28, .94); }

.cg-chev {
  position: absolute; width: 0; height: 0; border-style: solid;
  --c: var(--plum-3);
  transition: border-color .08s linear;
}
.cg-chev.is-on { --c: var(--pink); filter: drop-shadow(0 0 0 var(--ink)); }
.cg-u { top: 7px; left: 50%; margin-left: -9px; border-width: 0 9px 12px 9px; border-color: transparent transparent var(--c) transparent; }
.cg-d { bottom: 7px; left: 50%; margin-left: -9px; border-width: 12px 9px 0 9px; border-color: var(--c) transparent transparent transparent; }
.cg-l { left: 7px; top: 50%; margin-top: -9px; border-width: 9px 12px 9px 0; border-color: transparent var(--c) transparent transparent; }
.cg-r { right: 7px; top: 50%; margin-top: -9px; border-width: 9px 0 9px 12px; border-color: transparent transparent transparent var(--c); }

.cg-nub {
  position: absolute; left: 50%; top: 50%;
  width: 47%; height: 47%; margin: -23.5% 0 0 -23.5%;
  border-radius: 50%;
  background: var(--pink-2);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  will-change: transform;
  /* The nub snaps between four positions rather than tracking the thumb, so
     a short ease makes it read as clunking into a detent instead of
     teleporting. Long enough to see, short enough not to lag the input. */
  transition: transform .07s linear;
}
@media (prefers-reduced-motion: reduce) { .cg-nub { transition: none; } }
.cg-nub::after {
  content: ""; position: absolute; left: 20%; top: 16%;
  width: 26%; height: 26%; border-radius: 50%;
  background: var(--cream-2); opacity: .85;
}

/* ─────────── page furniture ─────────── */

.cg-underline {
  max-width: 62ch; margin: 1rem auto 0; text-align: center;
  font-size: .82rem; font-weight: 700; color: var(--pink-3);
  transition: opacity .3s ease;
}
.cg-underline.is-gone { opacity: 0; }
.cg-legend-m { margin-top: 1.2rem; }
.cg-legend-m summary {
  font-family: var(--font-display); letter-spacing: .06em; cursor: pointer;
  color: var(--cream); font-size: 1.05rem;
}
.cg-legend-m .cg-legend { margin-top: .9rem; }
@media (hover: hover) and (pointer: fine) { .cg-legend-m { display: none; } }
.cg-fineprint {
  margin-top: 1.2rem; font-size: .8rem; line-height: 1.55; color: var(--pink-3);
  text-align: center;
}

/* On a phone the whole game — HUD, maze and both sticks — has to be reachable
   before immersive mode takes over, so the intro above it stays compact. */
@media (hover: none) and (pointer: coarse) {
  main > .section { padding-top: .9rem; padding-bottom: 1.4rem; }
  .section-head { margin-bottom: .8rem; }
  .section-head .hero-kicker { font-size: 1rem; letter-spacing: .16em; margin-bottom: .1rem; }
  .section-head .section-title { font-size: clamp(2rem, 9vw, 2.7rem); -webkit-text-stroke-width: 7px; }
  .section-head .section-sub { font-size: .84rem; line-height: 1.4; }
  #cuna-game { min-height: min(66svh, 680px); }
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  #cuna-game { min-height: min(94svh, 460px); }
  .section-head { display: none; }
}

/* ─────────── immersive (touch only) ─────────── */

body.cuna-playing #cuna-game {
  position: fixed; inset: 0; z-index: 60;
  max-width: none; margin: 0; border-radius: 0; border: 0;
  box-shadow: none; min-height: 0;
  padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom));
}
body.cuna-playing { overflow: hidden; }
body.cuna-playing .nav, body.cuna-playing .footer,
body.cuna-playing .section-head, body.cuna-playing .cg-underline,
body.cuna-playing .cg-legend-m, body.cuna-playing .cg-fineprint { display: none; }

/* ─────────── reduced motion ─────────── */

@media (prefers-reduced-motion: reduce) {
  .cg-attract .cg-pill { animation: none; }
  .cg-stick { transition: none; }
  .cg-toast { transition: none; }
  .cg-underline { transition: none; }
  html { scroll-behavior: auto; }
}