/* ==========================================================================
   Bento Games — landing page
   A 1950s tube TV fills the viewport. The site lives on its screen: a small
   on-screen menu drawn on the glass, and full-screen pages stacked behind it.
   Switching grows the new page out of the menu item (or link) that was picked.

   Sections:
     1. Tokens
     2. Base + room (the page never scrolls)
     3. The set: walnut cabinet, bakelite mask, tube
     4. Glass: scanlines, vignette, static
     5. On-screen menu
     6. Pages (stacked; switching is animated by script.js)
     7. Home
     8. Games (feature / cards / listings guide)
     9. Focus, utilities, motion preferences
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  /* Brand palette (from the Chōchin Lantern logo, Tamago variant) */
  --tamago: #ffc93c;
  --ume: #d7263d;
  --nori: #1d1b1a;
  --rice: #fbf7ef;
  --sumi: #12100d;                           /* near-black, warm */

  --font-wordmark: 'Reggae One', 'Outfit', system-ui, sans-serif;   /* the wordmark only */
  --font-ui: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Viewport height, preferring the dynamic unit on mobile */
  --vh: 100vh;

  /* The set's frame: kept thin so the screen is ~80% of the viewport */
  --room: clamp(4px, 1.3vmin, 20px);         /* wall visible around the set */
  --cabinet: clamp(8px, 2.5vmin, 36px);      /* walnut */
  --bezel: clamp(7px, 2vmin, 28px);          /* cream bakelite mask */
  --tube-rx: clamp(14px, 6vmin, 96px);       /* the tube's pillowy corners */
  --tube-ry: clamp(16px, 7vmin, 112px);

  /* Frame 1 materials (walnut cabinet, cream bakelite mask). Other frames override these in
     section 3b; the mask and its top-most overlay ring share --mask-bg/--mask-hi so they match. */
  --room-bg:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgb(255 201 60 / .1), transparent 75%),
    #16120f;
  --cab-bg:
    radial-gradient(ellipse 80% 50% at 30% 0%, rgb(255 214 170 / .2), transparent 70%),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .09) 0 1px, transparent 1px 5px, rgb(255 230 200 / .04) 5px 6px, transparent 6px 11px),
    repeating-radial-gradient(ellipse 140% 22% at 38% 130%, rgb(40 18 6 / .22) 0 2px, transparent 2px 13px),
    linear-gradient(180deg, #7b4a2a 0%, #643a20 55%, #4e2c17 100%);
  --cab-shadow:
    inset 0 2px 0 rgb(255 220 180 / .25),
    inset 0 -4px 0 rgb(0 0 0 / .3),
    inset 0 0 0 1px rgb(0 0 0 / .35),
    0 1vmin 3vmin rgb(0 0 0 / .55);
  --mask-bg: linear-gradient(172deg, #f6edd8 0%, #e6d6b4 45%, #cfb98f 100%);
  --mask-trim: 0 0 0 2px #b8913f, 0 0 0 3px rgb(0 0 0 / .4);
  --mask-hi: inset 0 2px 1px rgb(255 255 255 / .75), inset 0 -3px 5px rgb(110 75 30 / .35);
  --glass-shade:
    inset 0 0 0 1px rgb(0 0 0 / .55),
    inset 0 0 3cqmin rgb(0 0 0 / .45),
    inset 0 0 12cqmin rgb(0 0 0 / .16);
  --vignette: .3;
  --lip:
    0 0 0 2px #2a2119,
    0 0 0 4px rgb(120 90 50 / .45),
    0 -2px 8px 4px rgb(255 250 235 / .35),
    0 3px 8px 4px rgb(90 60 25 / .35);
}

@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

/* 2. Base + room ----------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;            /* hard rule: the page never scrolls */
  overscroll-behavior: none;
}

body {
  display: grid;
  width: 100%;
  height: var(--vh);
  padding: var(--room);
  font-family: var(--font-ui);
  color: var(--rice);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* A dim, warm room lit by the set */
  background: var(--room-bg);
}

p, h1, h2, h3, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 3. The set ---------------------------------------------------------------- */

.tv {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: var(--cabinet);
  border-radius: calc(var(--tube-rx) + var(--bezel) + var(--cabinet) * .6);
  background: var(--cab-bg);         /* frame 1: walnut veneer */
  box-shadow: var(--cab-shadow);
}

/* Cream bakelite mask, moulded: lit top edge, shaded bottom, one brass trim line outside. */
.mask {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: var(--bezel);
  border-radius: calc(var(--tube-rx) + var(--bezel)) / calc(var(--tube-ry) + var(--bezel));
  background: var(--mask-bg);
  box-shadow: var(--mask-trim), var(--mask-hi);
  position: relative;
  isolation: isolate;
  overflow: clip;              /* nothing on the glass can ever paint past the set */
}

/* The tube frame is repainted ON TOP of everything inside the screen (highest z-index), so
   nothing animating on the glass can show over the bezel. ::after is the cream ring (the
   same gradient as the mask, with a rounded hole exactly the size of the screen); ::before
   puts the moulded highlights back on top of it. Both ignore the pointer. */
.mask::after,
.mask::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  border-radius: inherit;
}
.mask::after {
  border: var(--bezel) solid transparent;
  background: var(--mask-bg);
  background-origin: border-box;
  background-clip: border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box;
}
.mask::before {
  z-index: 101;
  box-shadow: var(--mask-hi);
}

/* 3b. Frames ------------------------------------------------------------------
   Twenty looks for the set, cycled with F (script.js); there is no UI for
   it. Frame 1 is the :root default above. A frame only overrides the custom properties
   (materials and geometry). To add one: copy a block, give it the next number, and raise
   FRAME_COUNT in script.js. */

/* 2. Black bakelite with a chrome ring */
html[data-frame="2"] {
  --room-bg: radial-gradient(ellipse 70% 60% at 50% 50%, rgb(180 200 220 / .08), transparent 75%), #0e0f11;
  --cab-bg:
    radial-gradient(ellipse 70% 40% at 35% 0%, rgb(255 255 255 / .22), transparent 70%),
    linear-gradient(180deg, #2a2a2c 0%, #151516 60%, #0a0a0b 100%);
  --cab-shadow: inset 0 2px 0 rgb(255 255 255 / .18), inset 0 -3px 0 rgb(0 0 0 / .6), 0 1vmin 3vmin rgb(0 0 0 / .7);
  --mask-bg: linear-gradient(180deg, #e9edf1 0%, #9aa3ad 28%, #f4f6f8 52%, #7d8792 78%, #c9d0d7 100%);
  --mask-trim: 0 0 0 1px #000, 0 0 0 3px rgb(0 0 0 / .5);
  --mask-hi: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -2px 3px rgb(0 0 0 / .45);
  --lip: 0 0 0 2px #050505, 0 0 0 3px rgb(255 255 255 / .25);
  --cabinet: clamp(10px, 3.2vmin, 44px);
  --bezel: clamp(4px, 1vmin, 14px);
}

/* 3. Mint enamel with chrome trim */
html[data-frame="3"] {
  --room-bg: radial-gradient(ellipse 70% 60% at 50% 50%, rgb(150 230 205 / .12), transparent 75%), #10171a;
  --cab-bg:
    radial-gradient(ellipse 80% 45% at 30% 0%, rgb(255 255 255 / .45), transparent 70%),
    linear-gradient(180deg, #b6eadb 0%, #8fd3bf 55%, #6cb9a3 100%);
  --cab-shadow: inset 0 2px 0 rgb(255 255 255 / .6), inset 0 -4px 0 rgb(30 90 75 / .35), 0 1vmin 3vmin rgb(0 0 0 / .55);
  --mask-bg: linear-gradient(175deg, #fbfaf3 0%, #ecebe0 60%, #d6d4c4 100%);
  --mask-trim: 0 0 0 3px #d7dde2, 0 0 0 4px #7f8a93, 0 0 0 5px rgb(0 0 0 / .3);
  --mask-hi: inset 0 2px 1px rgb(255 255 255 / .9), inset 0 -3px 5px rgb(60 70 60 / .25);
  --lip: 0 0 0 2px #1d2224, 0 0 0 4px rgb(150 160 165 / .6);
  --tube-rx: clamp(18px, 8vmin, 130px);
  --tube-ry: clamp(18px, 8vmin, 130px);
}

/* 4. Two-tone: red lacquer cabinet, cream mask */
html[data-frame="4"] {
  --room-bg: radial-gradient(ellipse 70% 60% at 50% 50%, rgb(215 38 61 / .1), transparent 75%), #140d0d;
  --cab-bg:
    radial-gradient(ellipse 80% 45% at 30% 0%, rgb(255 210 200 / .35), transparent 70%),
    linear-gradient(180deg, #d7263d 0%, #b3261e 55%, #861a14 100%);
  --cab-shadow: inset 0 2px 0 rgb(255 200 190 / .45), inset 0 -4px 0 rgb(0 0 0 / .35), 0 1vmin 3vmin rgb(0 0 0 / .6);
  --mask-bg: linear-gradient(172deg, #fff8e8 0%, #f1e4c6 50%, #dcc9a0 100%);
  --mask-trim: 0 0 0 2px #fbf7ef, 0 0 0 3px rgb(0 0 0 / .35);
  --bezel: clamp(9px, 2.8vmin, 38px);
}

/* 5. Brushed aluminium, heavy steel bezel */
html[data-frame="5"] {
  --room-bg: radial-gradient(ellipse 70% 60% at 50% 50%, rgb(200 210 220 / .08), transparent 75%), #121416;
  --cab-bg:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .06) 0 1px, transparent 1px 3px, rgb(0 0 0 / .05) 3px 4px),
    linear-gradient(180deg, #e3e6e9 0%, #b9bfc5 45%, #9aa1a8 100%);
  --cab-shadow: inset 0 2px 0 rgb(255 255 255 / .8), inset 0 -3px 0 rgb(0 0 0 / .3), inset 0 0 0 1px rgb(0 0 0 / .3), 0 1vmin 3vmin rgb(0 0 0 / .6);
  --mask-bg: linear-gradient(180deg, #5c646c 0%, #3c4349 50%, #2a2f34 100%);
  --mask-trim: 0 0 0 1px #f2f4f6, 0 0 0 2px rgb(0 0 0 / .5);
  --mask-hi: inset 0 2px 1px rgb(255 255 255 / .35), inset 0 -3px 5px rgb(0 0 0 / .5);
  --lip: 0 0 0 2px #0b0c0d, 0 0 0 3px rgb(255 255 255 / .15);
  --cabinet: clamp(6px, 1.8vmin, 26px);
  --bezel: clamp(10px, 3.2vmin, 44px);
  --tube-rx: clamp(12px, 4.5vmin, 72px);
  --tube-ry: clamp(12px, 5vmin, 80px);
}

/* 6. Blond oak with a thin brass edge and a dark mask */
html[data-frame="6"] {
  --room-bg: radial-gradient(ellipse 70% 60% at 50% 50%, rgb(255 220 150 / .1), transparent 75%), #17130d;
  --cab-bg:
    radial-gradient(ellipse 80% 50% at 30% 0%, rgb(255 250 230 / .35), transparent 70%),
    repeating-linear-gradient(90deg, rgb(120 80 30 / .1) 0 1px, transparent 1px 6px, rgb(255 255 255 / .06) 6px 7px, transparent 7px 13px),
    repeating-radial-gradient(ellipse 160% 20% at 60% 140%, rgb(140 95 40 / .16) 0 2px, transparent 2px 15px),
    linear-gradient(180deg, #e2c290 0%, #cfa86e 55%, #b38a52 100%);
  --cab-shadow: inset 0 2px 0 rgb(255 245 220 / .5), inset 0 -4px 0 rgb(80 50 20 / .3), 0 1vmin 3vmin rgb(0 0 0 / .55);
  --mask-bg: linear-gradient(180deg, #3a2f26 0%, #241d17 100%);
  --mask-trim: 0 0 0 2px #c9a24a, 0 0 0 3px rgb(60 40 10 / .6);
  --mask-hi: inset 0 2px 1px rgb(255 230 190 / .25), inset 0 -3px 5px rgb(0 0 0 / .45);
  --lip: 0 0 0 2px #0e0b08, 0 0 0 3px rgb(201 162 74 / .35);
  --bezel: clamp(5px, 1.4vmin, 20px);
}

/* 7. Porthole: very round turquoise tube */
html[data-frame="7"] {
  --room-bg: radial-gradient(ellipse 70% 60% at 50% 50%, rgb(80 200 210 / .1), transparent 75%), #0c1416;
  --cab-bg:
    radial-gradient(ellipse 80% 45% at 30% 0%, rgb(255 255 255 / .35), transparent 70%),
    linear-gradient(180deg, #4fb3b8 0%, #2f8f96 55%, #1f6d73 100%);
  --cab-shadow: inset 0 2px 0 rgb(220 255 255 / .45), inset 0 -4px 0 rgb(0 40 45 / .4), 0 1vmin 3vmin rgb(0 0 0 / .6);
  --mask-bg: linear-gradient(172deg, #f7f2e4 0%, #e5dcc4 55%, #c9bd9c 100%);
  --mask-trim: 0 0 0 2px #e9eef0, 0 0 0 3px rgb(0 0 0 / .35);
  --tube-rx: clamp(24px, 13vmin, 210px);
  --tube-ry: clamp(24px, 13vmin, 210px);
  --bezel: clamp(8px, 2.4vmin, 32px);
}

/* 8. Squarer late-50s tube, thin black mask, slate cabinet */
html[data-frame="8"] {
  --room-bg: radial-gradient(ellipse 70% 60% at 50% 50%, rgb(120 140 170 / .1), transparent 75%), #0f1114;
  --cab-bg:
    radial-gradient(ellipse 80% 45% at 30% 0%, rgb(255 255 255 / .15), transparent 70%),
    linear-gradient(180deg, #4a5566 0%, #364050 55%, #252c37 100%);
  --cab-shadow: inset 0 1px 0 rgb(255 255 255 / .25), inset 0 -3px 0 rgb(0 0 0 / .4), 0 1vmin 3vmin rgb(0 0 0 / .6);
  --mask-bg: linear-gradient(180deg, #1c1c1e 0%, #0d0d0e 100%);
  --mask-trim: 0 0 0 1px rgb(255 255 255 / .18), 0 0 0 2px rgb(0 0 0 / .5);
  --mask-hi: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 -2px 3px rgb(0 0 0 / .6);
  --lip: 0 0 0 1px #000;
  --tube-rx: clamp(6px, 2vmin, 30px);
  --tube-ry: clamp(6px, 2.4vmin, 36px);
  --bezel: clamp(4px, 1vmin, 14px);
  --cabinet: clamp(10px, 3vmin, 42px);
}

/* 9. Heavy mahogany cabinet with a very thick cream bezel */
html[data-frame="9"] {
  --cab-bg:
    radial-gradient(ellipse 80% 50% at 30% 0%, rgb(255 190 160 / .18), transparent 70%),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .1) 0 1px, transparent 1px 4px, rgb(255 200 180 / .04) 4px 5px, transparent 5px 9px),
    linear-gradient(180deg, #6b2a1c 0%, #521f14 55%, #3a150d 100%);
  --mask-bg: radial-gradient(ellipse 120% 90% at 50% 40%, #fbf3df 0%, #ecdcb8 60%, #d3bd8f 100%);
  --mask-trim: 0 0 0 2px #8a6a2c, 0 0 0 3px rgb(0 0 0 / .45);
  --mask-hi: inset 0 3px 2px rgb(255 255 255 / .8), inset 0 -5px 8px rgb(110 75 30 / .4);
  --cabinet: clamp(10px, 3.4vmin, 48px);
  --bezel: clamp(12px, 4vmin, 56px);
  --tube-rx: clamp(18px, 8vmin, 120px);
  --tube-ry: clamp(20px, 9vmin, 136px);
}

/* 10. Space-age white moulding with a pastel pink shell */
html[data-frame="10"] {
  --room-bg: radial-gradient(ellipse 70% 60% at 50% 50%, rgb(255 170 200 / .12), transparent 75%), #171214;
  --cab-bg:
    radial-gradient(ellipse 80% 45% at 30% 0%, rgb(255 255 255 / .5), transparent 70%),
    linear-gradient(180deg, #f9c5d1 0%, #f0a8b9 55%, #d98a9d 100%);
  --cab-shadow: inset 0 2px 0 rgb(255 255 255 / .7), inset 0 -4px 0 rgb(150 60 80 / .3), 0 1vmin 3vmin rgb(0 0 0 / .55);
  --mask-bg: radial-gradient(ellipse 110% 80% at 40% 20%, #ffffff 0%, #f1f1ef 55%, #d9d9d6 100%);
  --mask-trim: 0 0 0 1px rgb(0 0 0 / .2);
  --mask-hi: inset 0 3px 2px rgb(255 255 255 / 1), inset 0 -4px 7px rgb(0 0 0 / .18);
  --lip: 0 0 0 2px #1a1a1a, 0 0 0 3px rgb(0 0 0 / .2), 0 0 6px 3px rgb(0 0 0 / .15);
  --cabinet: clamp(8px, 2.2vmin, 32px);
  --bezel: clamp(9px, 2.6vmin, 36px);
  --tube-rx: clamp(20px, 10vmin, 160px);
  --tube-ry: clamp(18px, 8vmin, 130px);
}

/* Frames 11-20: unmistakably pre-LCD. Shared CRT cues: a bulging tube (taller corner curves
   than wide), a thick black rubber gasket where the glass meets the mask, deep shading
   towards the glass edges. Each frame then sets its own materials. */
html[data-frame="11"], html[data-frame="12"], html[data-frame="13"], html[data-frame="14"],
html[data-frame="15"], html[data-frame="16"], html[data-frame="17"], html[data-frame="18"],
html[data-frame="19"], html[data-frame="20"] {
  --tube-rx: clamp(20px, 9vmin, 140px);
  --tube-ry: clamp(26px, 13vmin, 190px);
  --glass-shade:
    inset 0 0 0 1px rgb(0 0 0 / .8),
    inset 0 0 2cqmin 1cqmin rgb(0 0 0 / .55),
    inset 0 0 9cqmin rgb(0 0 0 / .35),
    inset 0 0 22cqmin rgb(0 0 0 / .18);
  --vignette: .5;
  --lip:
    0 0 0 clamp(3px, .9vmin, 9px) #0a0a0a,
    0 0 0 calc(clamp(3px, .9vmin, 9px) + 1px) rgb(255 255 255 / .18),
    0 0 10px calc(clamp(3px, .9vmin, 9px) + 2px) rgb(0 0 0 / .45);
}

/* 11. 1950s console: deep walnut, brass mask, heavily bulged tube */
html[data-frame="11"] {
  --cabinet: clamp(12px, 3.6vmin, 50px);
  --bezel: clamp(10px, 3vmin, 40px);
  --mask-bg: linear-gradient(170deg, #f3d98b 0%, #c9a24a 45%, #8f6d26 100%);
  --mask-trim: 0 0 0 2px #4e2c17, 0 0 0 3px rgb(0 0 0 / .5);
  --mask-hi: inset 0 2px 1px rgb(255 245 200 / .8), inset 0 -3px 6px rgb(60 40 10 / .5);
}

/* 12. Orange 60s portable, chunky plastic shell */
html[data-frame="12"] {
  --room-bg: radial-gradient(ellipse 70% 60% at 50% 50%, rgb(255 122 89 / .12), transparent 75%), #160f0c;
  --cab-bg:
    radial-gradient(ellipse 80% 45% at 30% 0%, rgb(255 255 255 / .4), transparent 70%),
    linear-gradient(180deg, #ff8a4c 0%, #ef6a2a 55%, #c24e18 100%);
  --cab-shadow: inset 0 3px 0 rgb(255 220 190 / .55), inset 0 -5px 0 rgb(90 30 0 / .4), 0 1vmin 3vmin rgb(0 0 0 / .6);
  --mask-bg: linear-gradient(175deg, #fbf5ea 0%, #ebe0cc 60%, #cfc0a3 100%);
  --mask-trim: 0 0 0 2px #fff3e6, 0 0 0 3px rgb(0 0 0 / .35);
  --cabinet: clamp(12px, 3.8vmin, 52px);
  --bezel: clamp(8px, 2.2vmin, 30px);
}

/* 13. Ribbed brown bakelite, the 1949 table set */
html[data-frame="13"] {
  --cab-bg:
    radial-gradient(ellipse 80% 45% at 30% 0%, rgb(255 220 180 / .3), transparent 70%),
    linear-gradient(180deg, #5a3520 0%, #3f2414 55%, #2a170c 100%);
  --cab-shadow: inset 0 2px 0 rgb(255 210 170 / .35), inset 0 -4px 0 rgb(0 0 0 / .45), 0 1vmin 3vmin rgb(0 0 0 / .65);
  --mask-bg:
    repeating-linear-gradient(0deg, rgb(255 230 200 / .12) 0 2px, rgb(0 0 0 / .14) 2px 4px, transparent 4px 7px),
    linear-gradient(180deg, #6e4429 0%, #4d2e1a 100%);
  --mask-trim: 0 0 0 2px #2a170c, 0 0 0 3px rgb(255 200 150 / .2);
  --mask-hi: inset 0 2px 1px rgb(255 220 180 / .4), inset 0 -3px 5px rgb(0 0 0 / .5);
  --bezel: clamp(12px, 3.6vmin, 50px);
}

/* 14. Hammertone grey lab monitor, faint green phosphor glass */
html[data-frame="14"] {
  --room-bg: radial-gradient(ellipse 70% 60% at 50% 50%, rgb(120 255 160 / .06), transparent 75%), #0d100e;
  --cab-bg:
    radial-gradient(circle at 30% 30%, rgb(255 255 255 / .06) 0 1px, transparent 2px) 0 0 / 7px 7px,
    radial-gradient(circle at 70% 60%, rgb(0 0 0 / .1) 0 1px, transparent 2px) 0 0 / 9px 9px,
    linear-gradient(180deg, #7d8580 0%, #5f6762 55%, #474e4a 100%);
  --cab-shadow: inset 0 2px 0 rgb(255 255 255 / .3), inset 0 -4px 0 rgb(0 0 0 / .4), 0 1vmin 3vmin rgb(0 0 0 / .65);
  --mask-bg: linear-gradient(180deg, #2c302e 0%, #1a1d1b 100%);
  --mask-trim: 0 0 0 1px rgb(255 255 255 / .2), 0 0 0 2px rgb(0 0 0 / .5);
  --mask-hi: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 -3px 4px rgb(0 0 0 / .6);
  --glass-shade:
    inset 0 0 0 1px rgb(0 0 0 / .8),
    inset 0 0 2cqmin 1cqmin rgb(0 20 5 / .55),
    inset 0 0 9cqmin rgb(0 30 10 / .35),
    inset 0 0 22cqmin rgb(60 255 120 / .08);
  --cabinet: clamp(10px, 3vmin, 42px);
  --bezel: clamp(10px, 3vmin, 42px);
}

/* 15. Ivory and gold, protective safety-glass sheen */
html[data-frame="15"] {
  --cab-bg:
    radial-gradient(ellipse 80% 45% at 30% 0%, rgb(255 255 255 / .55), transparent 70%),
    linear-gradient(180deg, #f6efdc 0%, #e4d8bb 55%, #c8b994 100%);
  --cab-shadow: inset 0 2px 0 rgb(255 255 255 / .8), inset 0 -4px 0 rgb(120 90 40 / .3), 0 1vmin 3vmin rgb(0 0 0 / .55);
  --mask-bg: linear-gradient(170deg, #f7e3a1 0%, #d4ae55 50%, #a6812e 100%);
  --mask-trim: 0 0 0 1px #fffbe8, 0 0 0 2px rgb(0 0 0 / .3);
  --mask-hi: inset 0 2px 1px rgb(255 250 220 / .9), inset 0 -3px 5px rgb(80 55 10 / .45);
  --bezel: clamp(6px, 1.6vmin, 22px);
}

/* 16. Late-60s woodgrain console, extra-thick black gasket */
html[data-frame="16"] {
  --cab-bg:
    repeating-linear-gradient(90deg, rgb(0 0 0 / .14) 0 2px, transparent 2px 7px, rgb(255 210 160 / .05) 7px 8px, transparent 8px 15px),
    linear-gradient(180deg, #8a5a32 0%, #6b4223 55%, #4f2f17 100%);
  --mask-bg: linear-gradient(180deg, #2a2522 0%, #151210 100%);
  --mask-trim: 0 0 0 2px #c0c4c8, 0 0 0 3px rgb(0 0 0 / .5);
  --mask-hi: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 -3px 4px rgb(0 0 0 / .6);
  --cabinet: clamp(14px, 4vmin, 56px);
  --bezel: clamp(5px, 1.4vmin, 20px);
  --lip:
    0 0 0 clamp(5px, 1.5vmin, 16px) #050505,
    0 0 0 calc(clamp(5px, 1.5vmin, 16px) + 1px) rgb(255 255 255 / .15);
}

/* 17. Cream portable with smoked, deeply curved glass */
html[data-frame="17"] {
  --cab-bg:
    radial-gradient(ellipse 80% 45% at 30% 0%, rgb(255 255 255 / .5), transparent 70%),
    linear-gradient(180deg, #f2e7d0 0%, #ddcdac 55%, #bfac86 100%);
  --cab-shadow: inset 0 3px 0 rgb(255 255 255 / .7), inset 0 -5px 0 rgb(100 80 40 / .3), 0 1vmin 3vmin rgb(0 0 0 / .55);
  --mask-bg: linear-gradient(175deg, #8f8a80 0%, #6c675e 100%);
  --mask-trim: 0 0 0 2px #f2e7d0, 0 0 0 3px rgb(0 0 0 / .3);
  --mask-hi: inset 0 2px 1px rgb(255 255 255 / .35), inset 0 -3px 5px rgb(0 0 0 / .4);
  --vignette: .65;
  --tube-rx: clamp(24px, 12vmin, 180px);
  --tube-ry: clamp(30px, 16vmin, 230px);
}

/* 18. Two-tone turquoise and white, round-shouldered 1957 set */
html[data-frame="18"] {
  --room-bg: radial-gradient(ellipse 70% 60% at 50% 50%, rgb(64 200 200 / .1), transparent 75%), #0c1314;
  --cab-bg:
    linear-gradient(180deg, #fbfbf6 0%, #fbfbf6 34%, #3fb7b4 34.5%, #2d9895 70%, #1f7774 100%);
  --cab-shadow: inset 0 3px 0 rgb(255 255 255 / .8), inset 0 -5px 0 rgb(0 50 50 / .4), 0 1vmin 3vmin rgb(0 0 0 / .6);
  --mask-bg: linear-gradient(175deg, #e9eef0 0%, #b9c3c9 50%, #8a959c 100%);
  --mask-trim: 0 0 0 2px #fbfbf6, 0 0 0 3px rgb(0 0 0 / .35);
  --mask-hi: inset 0 2px 1px rgb(255 255 255 / .9), inset 0 -3px 5px rgb(0 0 0 / .3);
  --cabinet: clamp(12px, 3.6vmin, 50px);
}

/* 19. Black studio monitor: thick matte bezel, glossy deep tube */
html[data-frame="19"] {
  --room-bg: #0a0a0b;
  --cab-bg: linear-gradient(180deg, #202022 0%, #141415 100%);
  --cab-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 -3px 0 rgb(0 0 0 / .6), 0 1vmin 3vmin rgb(0 0 0 / .8);
  --mask-bg: linear-gradient(180deg, #2b2b2e 0%, #1b1b1d 100%);
  --mask-trim: 0 0 0 1px rgb(255 255 255 / .1);
  --mask-hi: inset 0 2px 2px rgb(255 255 255 / .12), inset 0 -4px 6px rgb(0 0 0 / .7);
  --cabinet: clamp(6px, 1.6vmin, 22px);
  --bezel: clamp(14px, 4.2vmin, 58px);
}

/* 20. Red-and-cream diner set with chrome surround */
html[data-frame="20"] {
  --room-bg: radial-gradient(ellipse 70% 60% at 50% 50%, rgb(215 38 61 / .12), transparent 75%), #130c0c;
  --cab-bg:
    radial-gradient(ellipse 80% 45% at 30% 0%, rgb(255 220 210 / .35), transparent 70%),
    linear-gradient(180deg, #e0303f 0%, #b81f2c 55%, #8a141e 100%);
  --cab-shadow: inset 0 3px 0 rgb(255 200 200 / .5), inset 0 -5px 0 rgb(0 0 0 / .4), 0 1vmin 3vmin rgb(0 0 0 / .6);
  --mask-bg: linear-gradient(180deg, #f0f3f5 0%, #a9b2ba 30%, #f7f9fa 55%, #8f99a2 80%, #d3d9de 100%);
  --mask-trim: 0 0 0 3px #fbf3df, 0 0 0 4px rgb(0 0 0 / .35);
  --mask-hi: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -2px 3px rgb(0 0 0 / .4);
  --bezel: clamp(7px, 2vmin, 28px);
}

.screen {
  container: screen / size;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  border-radius: var(--tube-rx) / var(--tube-ry);
  background: #0b0a09;
  /* The lip where the mask turns in to meet the glass */
  box-shadow: var(--lip);

  /* Shared geometry for everything on the glass. These hold cq units, so they resolve
     against this container wherever a descendant uses them. */
  --edge: clamp(12px, 3.6cqmin, 48px);                         /* content inset from the tube */
  --corner: clamp(6px, 2.2vmin, 34px);                         /* extra inset beside a curved corner */
  --menu-fs: clamp(13px, 1.3cqmin + 6px, 23px);
  --menu-y: clamp(8px, 2.4cqmin, 30px);
  --menu-h: calc(var(--menu-fs) * 2.7);
  --band: calc(var(--menu-y) + var(--menu-h) + clamp(8px, 2cqmin, 26px));  /* room kept for the menu */
}

/* 4. Glass ------------------------------------------------------------------- */

.glass,
.static {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* Faint scanlines plus curvature shading; nothing here animates at idle. */
.glass {
  z-index: 5;
  background: repeating-linear-gradient(180deg, rgb(0 0 0 / .07) 0 1px, transparent 1px 3px);
  box-shadow: var(--glass-shade);   /* curvature shading; frames 11-20 deepen it */
}

.glass::after {                     /* vignette */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 58%, rgb(0 0 0 / var(--vignette)) 100%);
}

/* Channel-change static: shown for ~120ms by script.js, invisible otherwise. */
.static {
  z-index: 6;
  opacity: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px,
    #777;
  mix-blend-mode: hard-light;
}

/* 5. On-screen menu ------------------------------------------------------------
   A small OSD strip on the glass: top left on landscape screens, bottom centre
   (thumb reach) on portrait ones. Numbers are a quiet channel nod, hidden from
   screen readers so the link names are just "Home" and "Games".
   --------------------------------------------------------------------------- */

.menu {
  position: absolute;
  z-index: 4;
  top: var(--menu-y);
  left: calc(var(--menu-y) + var(--corner));
  font: 600 var(--menu-fs) / 1 var(--font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.menu ul {
  display: flex;
  gap: .2em;
  padding: .3em;
  border-radius: 999px;
  background: rgb(22 19 16 / .8);
  box-shadow: 0 0 0 1px rgb(251 247 239 / .14), 0 .25em 1em rgb(0 0 0 / .25);
}

.menu a {
  display: flex;
  align-items: center;
  gap: .6em;
  height: calc(var(--menu-h) - .6em);
  padding: 0 .9em;
  border-radius: 999px;
  color: rgb(251 247 239 / .8);
  text-decoration: none;
  text-shadow: 0 0 .6em rgb(255 201 60 / .3);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, color 200ms ease;
}

.menu-label { margin-right: -.14em; }      /* cancel the trailing letter-spacing */

.menu a:hover { color: var(--rice); background: rgb(251 247 239 / .12); }

.menu a[aria-current="page"] {
  background: var(--rice);
  color: var(--nori);
  text-shadow: none;
}

/* 6. Pages --------------------------------------------------------------------
   Every <section class="page"> fills the whole screen; they are stacked and only
   the active one is visible. script.js adds .is-leaving to the outgoing page for
   the length of the switch animation. Adding pages costs no screen space.
   --------------------------------------------------------------------------- */

.pages {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  overflow: clip;
  visibility: hidden;
  background: var(--page-bg);
  color: var(--page-fg);
}

.page.is-active,
.page.is-leaving,
html:not(.js) .page:first-child,
html:not(.js) .page:target { visibility: visible; }

.page.is-active { z-index: 2; }
.page.is-leaving { z-index: 1; }
html:not(.js) .page:target { z-index: 3; }

/* Content box: clear of the tube edge, with a band kept free for the menu. */
.page-inner {
  position: absolute;
  inset: 0;
  padding: var(--band) calc(var(--edge) + var(--corner)) var(--edge);
}

/* Portrait screens: the menu moves to the bottom, and so does the band. */
@container screen (max-aspect-ratio: 9/10) {
  .menu {
    top: auto;
    bottom: var(--menu-y);
    left: 50%;
    translate: -50% 0;
  }
  .page-inner { padding: var(--edge) var(--edge) var(--band); }
}

/* 7. Home ------------------------------------------------------------------------ */

.page--home {
  --page-fg: var(--nori);
  /* Tamago, lit from within behind the lantern, with a faint dot texture */
  --page-bg:
    radial-gradient(ellipse 40% 50% at 24% 45%, rgb(255 238 175 / .6), transparent 70%),
    radial-gradient(circle at 1px 1px, rgb(29 27 26 / .07) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
    var(--tamago);
}

.home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  align-content: center;
  column-gap: clamp(20px, 5cqw, 140px);
  /* Ultrawide: keep the composition together rather than spread edge to edge */
  padding-inline: max(calc(var(--edge) + var(--corner)), (100cqw - 165cqh) / 2);
}

/* Lockup proportions follow the logo reference (96px mark, 27px wordmark, 16px gap). */
.lockup {
  --mark: clamp(64px, min(31cqh, 17cqw), 360px);
  display: flex;
  align-items: center;
  gap: calc(var(--mark) * .05);   /* the lantern's own side margin makes up the rest of the reference gap */
}

.lockup-mark {
  flex: none;
  width: var(--mark);
  height: var(--mark);
}

.wordmark {
  font: 400 max(32px, var(--mark) * .28) / 1.1 var(--font-wordmark);
  text-transform: uppercase;
  white-space: nowrap;
}

.wordmark > span { display: block; }

.tagline {
  margin-top: clamp(12px, 3.4cqmin, 44px);
  font: 600 clamp(18px, 2.6cqmin + 4px, 42px) / 1.2 var(--font-ui);
  letter-spacing: -.01em;
}

.about {
  max-width: 34ch;
  margin-top: .55em;
  font: 400 clamp(15px, 1.4cqmin + 7px, 27px) / 1.45 var(--font-ui);
}

/* "Coming soon": the page's one action, and the picture Games grows out of. */
.now-showing {
  --pad: clamp(10px, 1.6cqmin, 22px);
  justify-self: center;
  display: grid;
  gap: calc(var(--pad) * .8);
  width: 100%;
  /* never taller than the space under the menu band */
  max-width: calc((100cqh - var(--band) - var(--edge) - 2 * var(--pad) - 5.2em) * 1.745 + 2 * var(--pad));
  padding: var(--pad);
  border-radius: calc(var(--pad) * 1.4);
  background: var(--nori);
  color: var(--rice);
  font-size: clamp(15px, 1.5cqmin + 5px, 26px);
  text-decoration: none;
  box-shadow: 0 .5cqmin 0 rgb(0 0 0 / .3), 0 2cqmin 5cqmin rgb(90 50 0 / .3);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.now-showing:hover { transform: translateY(-3px); box-shadow: 0 calc(.5cqmin + 3px) 0 rgb(0 0 0 / .3), 0 3cqmin 6cqmin rgb(90 50 0 / .35); }

.now-label {
  display: flex;
  align-items: center;
  gap: .6em;
  font: 600 max(12px, .72em) / 1 var(--font-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tamago);
}

.now-label::before {                /* the on-air light */
  content: '';
  width: .65em;
  height: .65em;
  border-radius: 50%;
  background: var(--ume);
  box-shadow: 0 0 .5em rgb(215 38 61 / .8);
}

picture { display: contents; }   /* the <picture> wrappers are transparent to layout */
picture > source { display: none; }   /* …and their <source>s must not take a grid cell */

.now-art {
  width: 100%;
  height: auto;
  aspect-ratio: 1232 / 706;
  object-fit: cover;
  border-radius: calc(var(--pad) * .6);
  background: #222;
}

.now-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 800 1em / 1.1 var(--font-ui);
}

.now-arrow { color: var(--tamago); }

/* Portrait: one centred column, lantern above a one-line wordmark. */
@container screen (max-aspect-ratio: 9/10) {
  .home {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: clamp(14px, 3.5cqh, 44px);
    text-align: center;
  }
  .lockup {
    --mark: clamp(56px, min(30cqw, 15cqh), 220px);
    flex-direction: column;
    gap: calc(var(--mark) / 10);
  }
  .wordmark { font-size: clamp(32px, 10cqw, 60px); }
  .wordmark > span { display: inline; }
  .tagline { margin-top: clamp(10px, 2.4cqh, 28px); }
  .about { margin-inline: auto; }
  .page--home { --page-bg:
    radial-gradient(ellipse 60% 30% at 50% 22%, rgb(255 238 175 / .6), transparent 70%),
    radial-gradient(circle at 1px 1px, rgb(29 27 26 / .07) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
    var(--tamago); }
  .now-showing {
    max-width: min(520px, 100%);
    text-align: left;
  }
}

/* Short portrait screens (small phones): the picture gives way first. */
@container screen (max-aspect-ratio: 9/10) and (max-height: 640px) {
  .now-art { max-height: 22cqh; }
  .lockup { --mark: clamp(56px, 13cqh, 120px); }
}

/* 8. Games ------------------------------------------------------------------------ */

.page--games {
  --page-fg: var(--rice);
  /* Near-black; the art brings the colour, picked up faintly behind it */
  --page-bg:
    radial-gradient(ellipse 55% 55% at 36% 52%, rgb(150 140 80 / .13), transparent 70%),
    var(--sumi);
}

.games {
  --fade: clamp(8px, 2cqmin, 26px);    /* scrolled text fades out over this, before the menu */
  --peek: clamp(40px, 7cqmin, 80px);   /* room left under the art, so the store text's heading shows */
  --about-fs: clamp(15px, .8cqmin + 9px, 20px);
  /* One column for the feature and the store text: a readable measure for the text, and short
     enough that the art leaves the words under it (and the peek) on the first screen. */
  --column: min(100%, 40 * var(--about-fs), (100cqh - var(--band) - var(--peek) - 5cqmin - 24px) * 1.745);
}

/* The only scrolling on the site, kept inside the glass: the lineup, then the store text right
   under it. Starts just under the menu and fades out there. */
.games-scroll {
  position: absolute;
  inset: calc(var(--band) - var(--fade)) 0 0;
  display: grid;
  grid-auto-rows: max-content;   /* rows take their content's height, even once it overflows */
  align-content: start;
  padding: var(--fade) max(calc(var(--edge) + var(--corner)), (100cqw - 175cqh) / 2) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(251 247 239 / .3) transparent;
  mask-image: linear-gradient(transparent, #000 var(--fade));
}

/* A small station ident in the band opposite the menu (landscape only). */
.station-bug {
  position: absolute;
  top: var(--menu-y);
  right: calc(var(--menu-y) + var(--corner));
  width: var(--menu-h);
  height: var(--menu-h);
  opacity: .9;
}

.lineup {
  display: grid;
  min-height: 0;
  counter-reset: channel;
}

.game {
  min-width: 0;
  min-height: 0;
  counter-increment: channel;
}

.game article {
  display: grid;
  min-height: 0;
}

.game-art {
  width: 100%;
  height: auto;
  aspect-ratio: 1232 / 706;
  object-fit: cover;
  border-radius: clamp(4px, .8cqmin, 10px);
  background: #222;
  /* sits in the broadcast: a hairline edge and a soft fall-off, no print border */
  box-shadow: 0 0 0 1px rgb(251 247 239 / .14), 0 1.5cqmin 6cqmin rgb(0 0 0 / .55);
}

/* Each part on its own line, except the game line and the button, which share one when they fit. */
.game-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, 1.8cqmin, 24px);
  min-width: 0;
}

.game-text > * { flex-basis: 100%; }
.game-text > .game-line,
.game-text > .game-action { flex-basis: auto; }

.game-title { font: 800 clamp(18px, 2cqmin + 8px, 34px) / 1.1 var(--font-ui); }

.game-line {
  font: italic 600 clamp(19px, 2.6cqmin + 4px, 40px) / 1.15 var(--font-ui);
  color: var(--tamago);
}

.game-desc {
  max-width: 38ch;
  font: 400 clamp(15px, 1.3cqmin + 7px, 26px) / 1.5 var(--font-ui);
  color: rgb(251 247 239 / .9);
}

/* The call to action: a cream pill like the active menu item. */
.game-action {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .7em 1.2em;
  border-radius: 999px;
  background: var(--rice);
  color: var(--nori);
  font: 600 clamp(13px, .8cqmin + 8px, 18px) / 1 var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms ease;
}

.game-action:hover { background: var(--tamago); }

/* Facts on one muted line; each item carries its own marker, so wrapping never strands a separator. */
.game-facts {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.2em;
  row-gap: .2em;
  font: 600 clamp(12px, .8cqmin + 7px, 17px) / 1.5 var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgb(251 247 239 / .62);
}

.game-facts li {
  display: flex;
  align-items: center;
  gap: .55em;
  white-space: nowrap;
}

.game-facts li::before {
  content: '';
  width: .4em;
  height: .4em;
  background: var(--tamago);
  opacity: .8;
}

/* One game: a feature. The art carries the title, so a heading marked
   .game-title--in-art is hidden visually here (still the accessible name). */
/* The words go under the art, in the same column as the store text. */
.lineup:not(:has(> .game:nth-child(2))) .game article {
  grid-template-columns: var(--column);
  justify-content: center;
  row-gap: clamp(12px, 2cqmin, 24px);
}

.lineup:not(:has(> .game:nth-child(2))) .game-art { width: 100%; }

.lineup:not(:has(> .game:nth-child(2))) .game-title--in-art {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Two or three games: cards in a row. */
.lineup:has(> .game:nth-child(2)) {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 3cqw, 60px);
}

.lineup:has(> .game:nth-child(2)) .game article { align-content: center; gap: clamp(10px, 2cqmin, 24px); }
.lineup:has(> .game:nth-child(2)) .game-line { font-size: clamp(16px, 1.6cqmin + 6px, 26px); }
.lineup:has(> .game:nth-child(2)) .game-desc { font-size: clamp(15px, 1cqmin + 7px, 19px); }

/* Four or more: a TV-listings guide, one row per game (channel number, picture, title, line). */
.lineup:has(> .game:nth-child(4)) {
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  align-content: center;
  height: 100%;
  gap: 0;
}

.lineup:has(> .game:nth-child(9)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(14px, 3cqw, 60px);
}

.lineup:has(> .game:nth-child(4)) .game { border-top: 1px solid rgb(251 247 239 / .14); }

.lineup:has(> .game:nth-child(4)) .game article {
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(12px, 2cqw, 32px);
  padding-block: clamp(4px, 1cqmin, 12px);
}

.lineup:has(> .game:nth-child(4)) .game article::before {
  content: counter(channel, decimal-leading-zero);
  min-width: 2ch;
  font: 800 clamp(14px, 1.4cqmin + 6px, 24px) / 1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  color: var(--tamago);
}

.lineup:has(> .game:nth-child(4)) .game-art { width: auto; height: 100%; max-height: 7em; }
.lineup:has(> .game:nth-child(4)) .game-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 1em; row-gap: 2px; }
.lineup:has(> .game:nth-child(4)) .game-text > * { flex-basis: auto; }
.lineup:has(> .game:nth-child(4)) .game-line { font-size: clamp(15px, 1cqmin + 8px, 22px); }
.lineup:has(> .game:nth-child(4)) .game-desc,
.lineup:has(> .game:nth-child(4)) .game-facts { display: none; }

/* The store text under the lineup: one readable column, styled like the facts. */
.game-about {
  justify-self: center;
  width: 100%;
  max-width: var(--column);
  margin-top: clamp(16px, 3cqmin, 40px);
  padding-block: clamp(14px, 2.4cqmin, 28px) clamp(28px, 7cqmin, 80px);
  border-top: 1px solid rgb(251 247 239 / .14);
  font: 400 var(--about-fs) / 1.6 var(--font-ui);
  color: rgb(251 247 239 / .85);
}

.game-about > * + * { margin-top: 1em; }

.game-about-title,
.game-about h4 {
  font: 600 clamp(12px, .8cqmin + 7px, 17px) / 1.5 var(--font-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tamago);
}

.game-about h4 { margin: 2em 0 0; }

.game-about strong { font-weight: 600; color: var(--rice); }

.game-about-list > li {
  position: relative;
  padding-left: 1.3em;
}

.game-about-list > li + li { margin-top: .6em; }

.game-about-list > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: .4em;
  height: .4em;
  background: var(--tamago);
  opacity: .8;
}

.game-about-list ul { margin-top: .3em; color: rgb(251 247 239 / .7); }
.game-about-list ul li::before { content: '– '; }

.game-about-note { font-style: italic; color: rgb(251 247 239 / .7); }

/* Short landscape screens (phones on their side): tighter rhythm so every word fits. */
@container screen (max-height: 440px) and (min-aspect-ratio: 9/10) {
  .game-text { gap: 8px; }
  .game-line { font-size: 18px; }
  .game-desc { line-height: 1.4; }
}

/* Portrait: art on top, words underneath, centred above the menu. */
@container screen (max-aspect-ratio: 9/10) {
  .games-scroll {
    inset: 0 0 calc(var(--band) - var(--fade));
    padding-block: var(--edge) var(--fade);
    mask-image: linear-gradient(to top, transparent, #000 var(--fade));
  }
  .station-bug { display: none; }
  .lineup:not(:has(> .game:nth-child(2))) .game article { row-gap: clamp(16px, 4cqh, 40px); }
  .lineup:has(> .game:nth-child(2)):not(:has(> .game:nth-child(4))) { grid-auto-flow: row; grid-auto-columns: auto; }
}

/* Phones only (tall AND narrow): the tall 2:3 capsule art is swapped in by the <picture> sources in
   index.html under this same media query, so it is shown in its own tall frame, never cropped wide.
   Tablets and desktop windows keep the wide art. */
@media (max-aspect-ratio: 9/10) and (max-width: 600px) {
  /* Home: the card IS the picture, with no dark frame around it. The label and title sit on the art. */
  .now-showing {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    background: none;
    font-size: 15px;
  }
  .now-art { display: block; aspect-ratio: 2 / 3; width: auto; max-width: 100%; max-height: none; height: clamp(180px, 43.2cqh, 432px); border-radius: 0; }
  .now-label, .now-title { position: absolute; left: 0; right: 0; padding: .7em .9em; }
  .now-label { top: 0; white-space: nowrap; letter-spacing: .1em; background: linear-gradient(rgb(0 0 0 / .7), transparent); }
  .now-title { bottom: 0; padding-top: 1.6em; background: linear-gradient(transparent, rgb(0 0 0 / .75)); }
  .lineup:not(:has(> .game:nth-child(2))) .game-art {
    aspect-ratio: 2 / 3;
    justify-self: center;
    width: auto;
    max-width: 100%;
    height: clamp(150px, 44cqh, 480px);
  }
}
@media (max-aspect-ratio: 9/10) and (max-width: 600px) and (max-height: 700px) {
  .now-art { height: 37.2cqh; }
  .now-label { font-size: 11px; letter-spacing: .06em; padding-inline: .7em; }
  .now-label::before { display: none; }
  .lineup:not(:has(> .game:nth-child(2))) .game-art { height: 33cqh; }
}

/* 9. Focus, utilities, motion ----------------------------------------------------- */

/* One focus ring for every background: warm white with a dark halo. */
:focus-visible {
  outline: 3px solid var(--rice);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--nori);
}

.now-showing:focus-visible { box-shadow: 0 0 0 7px var(--nori), 0 2cqmin 5cqmin rgb(90 50 0 / .3); }

/* Headings are focused by script only, to move screen-reader position after a switch. */
[tabindex="-1"]:focus { outline: none; box-shadow: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .menu a,
  .now-showing { transition: none; }
  .now-showing:hover { transform: none; }
}