/* MBS television shell, a 1990s black-plastic set. The set is shared by every character channel; the channel lives inside .channel. */
:root{
  --purple:#7a2fc4; --purple-deep:#290063; --gold:#ffd36e; --gold-ink:#d6ad3a;
  --plastic:#7d6140; --plastic-hi:#a5865c; --plastic-lo:#4a3722; --plastic-edge:#2e2216;
  --label:#f6ead2; --chrome:#f1e2c2; --key:#5a4328; --key-hi:#8a6a44; --key-lo:#33251a;
  --vfd-glass:#0d0a08; --vfd:#ffb347;
  --system:"VT323", "Lucida Console", monospace;
  --phosphor:#0b0616; --tube-off:#101318; --text:#f4efff;
  --display:"Bowlby One SC", "Zilla Slab", Georgia, serif;
  --body:"Zilla Slab", Georgia, serif;
  --print:"Barlow Condensed", "Arial Narrow", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0a0a0c;color:var(--text);font-family:var(--body)}
body{display:block;padding:0;overflow:hidden}
::selection{background:var(--gold);color:var(--purple-deep)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.tv{width:100vw; height:100vh; height:100dvh;
  /* 2.22/C003: the CRT treatment is two numbers, not two hard-coded layers. Default 1 is the set as
     it has always looked; the picture key lowers them. Any surface inside the glass can raise or
     lower its own copy - the overlays read whatever they inherit. */
  --scanline-opacity:1; --glass-distortion:1}
/* the cabinet: textured black plastic with a slight sheen, thin bezel, panel beside the screen on a desk, below it on a phone */
.cabinet{
  display:grid; grid-template-columns:82px 1fr 200px; grid-template-rows:100%; gap:0; height:100%;
  border-radius:0;
  /* a channel with data-gauge="off" hides the stress meter and reclaims its column (see .tv[data-gauge=off]) */
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px),
    linear-gradient(170deg, var(--plastic-hi), var(--plastic) 40%, var(--plastic-lo));
  box-shadow:inset 0 1px 0 rgba(255,240,210,.35), inset 0 -3px 0 #2a1d10, inset 1px 0 0 rgba(255,240,210,.12);
  padding:14px 12px 16px 14px;
}
/* the stress gauge on the cabinet's left, opposite the controls: fills bottom-up and swells as it climbs */
.gauge{display:grid; grid-template-rows:auto 1fr auto; justify-items:center; gap:8px; padding:10px 6px 12px; align-content:stretch;
  border-right:1px solid rgba(0,0,0,.2); font-family:var(--print)}
.gauge-pct{font-family:"Anton", sans-serif; font-size:22px; color:var(--label); text-shadow:0 1px 0 rgba(0,0,0,.5)}
.gauge-track{position:relative; width:100%; border-radius:9px; overflow:hidden;
  background:linear-gradient(180deg,#160f08,#241a10); box-shadow:inset 0 2px 6px rgba(0,0,0,.85), 0 1px 0 rgba(255,240,210,.15)}
.gauge-fill{position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:calc(44% + var(--meter,0) * 0.56%);
  height:calc(var(--meter,0) * 1%);
  border-radius:8px 8px 0 0;
  background:linear-gradient(0deg, var(--gold-ink) 0%, #ffcf5c 45%, var(--purple) 78%, #ff2f7a 100%);
  box-shadow:0 0 12px rgba(255,180,80,.4), inset 0 1px 0 rgba(255,255,255,.4);
  transition:height 140ms linear, width 140ms linear}
.gauge-label{font-family:"Anton", sans-serif; writing-mode:vertical-rl; text-orientation:mixed; font-size:12px; letter-spacing:.24em; color:var(--label); text-shadow:0 1px 0 rgba(0,0,0,.5)}
/* a channel that opts out of the stress meter (data-gauge="off"): hide it and give the column back to the screen */
.tv[data-gauge="off"] .gauge{display:none}
.tv[data-gauge="off"] .cabinet{grid-template-columns:1fr 200px}
.bezel{
  padding:9px; height:100%; min-height:0; position:relative;
  border-radius:12px;
  background:linear-gradient(180deg,#2b2018,#160f0a);
  box-shadow:inset 0 1px 0 rgba(255,240,210,.12), 0 0 0 1px var(--plastic-edge);
}
.glass{
  position:relative; overflow:hidden; height:100%; min-height:0;
  border-radius:22px / 18px;                       /* the corner radius of a curved tube */
  background:var(--phosphor);
  box-shadow:inset 0 0 0 2px #000, inset 0 0 46px rgba(0,0,0,.95);
}
.screen{
  position:absolute; inset:0; overflow:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--gold) transparent;
  transform-origin:50% 50%; will-change:transform;
}
.screen::-webkit-scrollbar{width:6px}
.screen::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}
.channel{min-height:100%; width:100%}   /* 2.16/C002: zoom:1.15 retired 2026-09-06. CSS zoom put rects and events in VISUAL px while clientWidth stayed LAYOUT px, so every channel carried a /1.15 correction and one of them got it wrong. Channels now render at their design size; a channel that wants to read larger sizes its own type. */
.phosphor{
  position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.6) 100%);
  mix-blend-mode:multiply;
  opacity:var(--scanline-opacity,1);
}
.glare{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 22% 12%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(115deg, rgba(255,255,255,.06) 0%, transparent 35%);
  opacity:var(--glass-distortion,1);
}
/* "Clear picture" (C003): scanlines and glare down to a trace rather than off, because a tube with
   nothing on the glass reads as a broken effect rather than a chosen one. The tube curvature, the
   inset shadow and the phosphor colour stay - this is a legibility control, not a theme switch. */
.tv[data-picture="clear"]{--scanline-opacity:.16; --glass-distortion:.28}
.press-layer{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.press{
  position:absolute; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,0,0,.55) 0 18%, rgba(122,47,196,.35) 34%, rgba(255,211,110,.18) 46%, transparent 62%);
  mix-blend-mode:screen; transform:scale(var(--k,0.2)); opacity:.9; transition:transform 90ms linear;
}
.press.release{transition:transform 420ms cubic-bezier(.2,.9,.3,1.4), opacity 420ms ease-out; opacity:0}  /* the glass springing back; the brief earns the overshoot */

/* the shared orange wave: one pixelated band of MYR5's colour sweeps through the glass. window.MBS.wave() */
.wave{position:absolute; inset:0; z-index:6; pointer-events:none; opacity:0; overflow:hidden}
.wave.go{opacity:1; animation:mbswavefade 760ms ease-out forwards}
.wave::before{content:""; position:absolute; top:-6%; bottom:-6%; left:-46%; width:40%;
  background:repeating-linear-gradient(90deg,
    transparent 0 3px, rgba(255,150,50,.9) 3px 9px, rgba(255,196,96,.96) 9px 12px, rgba(255,128,32,.9) 12px 18px, transparent 18px 22px);
  image-rendering:pixelated; filter:contrast(1.35) saturate(1.4) drop-shadow(0 0 8px rgba(255,150,50,.6));
  transform:skewX(-9deg);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 48%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 48%, transparent)}
.wave.go::before{animation:mbswave 760ms steps(22,end) forwards}
@keyframes mbswave{from{left:-46%} to{left:108%}}
@keyframes mbswavefade{0%{opacity:0} 12%{opacity:1} 82%{opacity:1} 100%{opacity:0}}
/* the purple restore wave: the same sweep in MOM's colour, fired after the orange one to put the page back */
.wave.purple::before{background:repeating-linear-gradient(90deg,
    transparent 0 3px, rgba(140,60,220,.9) 3px 9px, rgba(190,130,255,.96) 9px 12px, rgba(110,30,190,.9) 12px 18px, transparent 18px 22px);
  filter:contrast(1.35) saturate(1.4) drop-shadow(0 0 8px rgba(140,60,220,.6))}
/* the MOM Inc bug: bottom-centre of the glass on every channel; glows purple when the restore wave is about to pass */
.momlogo{position:absolute; right:14px; bottom:12px; z-index:5; width:44px; height:auto; pointer-events:none;
  opacity:.42; filter:drop-shadow(0 0 0 rgba(122,47,196,0)); transition:opacity 1.4s ease, filter 1.4s ease}
.momlogo.glow{opacity:1; filter:drop-shadow(0 0 6px rgba(122,47,196,.9)) drop-shadow(0 0 18px rgba(122,47,196,.55))}

/* off-air: a dark grey-green tube with a reflection and one line the set says itself */
.dark{
  position:absolute; inset:0; z-index:12; display:grid; place-items:center; text-align:center;   /* above anything a channel pins to the glass: off means off */
  background:radial-gradient(ellipse at 50% 45%, #1a1e26 0%, var(--tube-off) 60%, #06070a 100%);
  transition:opacity 700ms ease-out;
}
.tv[data-state="on"] .dark{opacity:0; pointer-events:none}
.dark-note{
  font-family:var(--display); font-size:clamp(14px, 3vw, 20px); letter-spacing:.04em;
  color:var(--gold); text-shadow:0 0 18px rgba(255,211,110,.35); margin:0; padding:0 8%; line-height:1.35;
}
.dark-note a{color:inherit; text-underline-offset:4px; display:inline-flex; align-items:center; min-height:44px; padding:0 4px; margin-top:.2em}   /* 2.23: the calendar affordance, in the set's own gold */
.dark-note a:hover,.dark-note a:focus-visible{color:#fff}
.tv[data-state="warming"] .dark{opacity:1; animation:tubeopen 900ms cubic-bezier(.2,.8,.2,1) forwards}
@keyframes tubeopen{0%{clip-path:inset(49.5% 0 49.5% 0);opacity:1} 55%{clip-path:inset(0 0 0 0);opacity:.9} 100%{clip-path:inset(0 0 0 0);opacity:0}}

/* the control panel: printed legends, a numbered dial, hard rectangular keys, a grille */
.panel .row{display:contents}
.panel .dial-block{order:1} .panel .lcd{order:2} .panel .keys{order:3} .panel .maker{order:4} .panel .model{order:5}
.panel{
  display:grid; align-content:start; justify-items:center; gap:14px;
  padding:4px 8px 0 16px;
  border-left:1px solid rgba(0,0,0,.18);
  font-family:var(--print);
}
.legend{font-family:var(--print); font-weight:500; font-size:9px; letter-spacing:.22em; color:var(--label); text-shadow:0 1px 0 rgba(0,0,0,.5)}

.bezel::after{content:"MOM INC"; position:absolute; right:20px; bottom:8px; z-index:3; font-family:"Anton", sans-serif; font-size:16px; letter-spacing:.12em;
  color:rgba(255,240,210,.07); font-size:16px; text-shadow:0 1px 0 rgba(0,0,0,.45); pointer-events:none;}   /* engraved into the front glass frame */
.dial-block{position:relative; display:grid; justify-items:center; gap:6px; width:120px}
.dial-ring{position:absolute; top:0; left:0; width:120px; height:120px; pointer-events:none}
.dial-ring text{font-family:var(--print); font-size:9px; fill:var(--label); font-weight:600}
/* the channel LCD: a tall dark panel. The readout of what is on sits at its top, then MOM INC as the heading and every channel as a card.
   A card is dim until its page exists, bright when it is the one on, and turns orange once its interaction is complete (Ian, 2026-08-26). */
.lcd{width:100%; display:grid; gap:6px; padding:6px; border-radius:6px;
  background:radial-gradient(ellipse at 50% 0%, #1a1410, var(--vfd-glass) 70%);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.9), 0 1px 0 rgba(255,240,210,.25), 0 0 0 1px #2a1d10}
.lcd .vfd{box-shadow:none; background:transparent; border-bottom:1px solid rgba(255,179,71,.25); border-radius:0; padding:4px 3px 7px}
.lcd-list{display:grid; grid-template-columns:1fr 1fr; gap:4px}
.lcd-card{grid-column:1 / -1}
.lcd-card.half{grid-column:auto; grid-template-columns:1fr; justify-items:center; gap:0; padding:6px 4px}   /* DRINKS and GOON, side by side under MOM INC */
.lcd-card.half .lcd-ch{display:none}
.lcd-card.half .lcd-name{font-size:15px; letter-spacing:.06em}
.lcd-card{display:grid; grid-template-columns:auto 1fr; gap:7px; align-items:center; padding:5px 7px; border-radius:3px; text-decoration:none;
  font-family:var(--system); color:#c9a6ff; text-shadow:0 0 2px rgba(150,90,230,.35); border:1px solid rgba(150,90,230,.45); background:rgba(122,47,196,.18);   /* purple until its node is unlocked (Ian) */
  transition:background 160ms, color 160ms, border-color 160ms}
.lcd-card .lcd-ch{font-size:11px; letter-spacing:.06em; opacity:.75}
.lcd-card .lcd-name{font-size:14px; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lcd-card.head{grid-template-columns:1fr; justify-items:center; gap:1px; padding:8px 7px 7px; margin-bottom:3px; border-width:2px; border-color:#9a5fd0; background:rgba(122,47,196,.3)}
.lcd-card.head .lcd-name{font-size:22px; letter-spacing:.08em; text-shadow:0 0 8px rgba(255,179,71,.7)}
.lcd-card.head .lcd-ch{font-size:10px; letter-spacing:.2em}
.lcd-card:hover{background:rgba(122,47,196,.38)}
.lcd-card.on{background:rgba(122,47,196,.5); border-color:#c9a6ff; color:#fff}
.lcd-card.off{color:#5a4a78; text-shadow:none; border-color:rgba(150,90,230,.15); background:transparent; cursor:default}
.lcd-card.filled .lcd-name::after{content:" ¹3"; color:#ffd36e}   /* this channel's form is in (the forms gate, Ian 2026-08-27) */
/* MYR5's offer once every form on the network is filled: gate one of two, the free workout template */
.myr-offer{position:absolute; left:8px; right:8px; bottom:8px; z-index:40; display:grid; grid-template-columns:44px 1fr auto; gap:9px; align-items:center;
  padding:9px 10px; border-radius:6px; background:linear-gradient(150deg,#2a0a44,#4a1a86 70%); color:#f4ecd8;
  box-shadow:0 8px 24px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,211,110,.5); animation:myrOfferIn .5s ease-out both}
@keyframes myrOfferIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.myr-offer img{width:44px; height:auto; display:block}
.myr-offer p{margin:0; font-family:"Special Elite",monospace; font-size:11px; line-height:1.45}
.myr-offer a{color:#ffd36e; font-weight:700}
.myr-offer button{background:none; border:0; color:#f4ecd8; font-size:22px; line-height:1; cursor:pointer; padding:4px 6px}
@media (prefers-reduced-motion:reduce){ .myr-offer{animation:none} }
.lcd-card.done{background:#ff8a2a; border-color:#ffb066; color:#2a0a00; text-shadow:none; box-shadow:0 0 10px rgba(255,138,42,.7)}
/* the unlock window: the whole LCD goes orange for 30 s, then the purple wave passes and it returns */
.lcd.armed{background:radial-gradient(ellipse at 50% 0%, #ffb066, #ff8a2a 70%); box-shadow:inset 0 2px 8px rgba(120,40,0,.6), 0 0 0 1px #ffb066, 0 0 22px rgba(255,138,42,.8); animation:lcdarm 1.2s ease-in-out infinite}
/* over the window, purple takes the orange from the bottom up; --armed-elapsed (set by tv.js) lets a reload pick up mid-way */
.lcd{position:relative; overflow:hidden}
.lcd .vfd,.lcd .lcd-list{position:relative; z-index:1}
.lcd.armed::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg,#b06fe0,#7a2fc4 60%,#4a1a86); transform-origin:bottom; transform:scaleY(0);
  animation:lcdtake 30s linear forwards; animation-delay:var(--armed-elapsed,0ms)}
@keyframes lcdtake{from{transform:scaleY(0)} to{transform:scaleY(1)}}
.lcd.armed .vfd,.lcd.armed .lcd-card{color:#2a0a00; text-shadow:none; border-color:rgba(42,10,0,.35); background:rgba(255,255,255,.14)}
.lcd.armed .lcd-card.head{border-color:#2a0a00}
.lcd.armed .lcd-card.off{color:rgba(42,10,0,.45)}
@keyframes lcdarm{0%,100%{filter:brightness(1)} 50%{filter:brightness(1.18)}}
.tv[data-state="off"] .lcd-card{color:#3a2b50; text-shadow:none; border-color:rgba(150,90,230,.1); background:transparent}
.tv[data-state="off"] .lcd-card.done{background:#7a3a10; color:#2a0a00; box-shadow:none}
/* the sub-screen: the readout of what is on, at the top of the LCD */
.vfd{
  width:100%; padding:7px 9px 6px; border-radius:4px; display:grid; gap:1px; text-align:left;
  background:radial-gradient(ellipse at 50% 0%, #1a1410, var(--vfd-glass) 70%);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.9), 0 1px 0 rgba(255,240,210,.25), 0 0 0 1px #2a1d10;
  font-family:var(--system); color:var(--vfd); text-shadow:0 0 6px rgba(255,179,71,.6);
}
.vfd-ch{font-size:13px; letter-spacing:.08em; opacity:.8}
.vfd-name{font-size:19px; line-height:1; letter-spacing:.04em; white-space:nowrap; overflow:hidden}
.vfd-show{font-size:12px; letter-spacing:.06em; opacity:.75; white-space:nowrap; overflow:hidden}
.tv[data-state="off"] .vfd{color:#3b2a18; text-shadow:none}
.dial{
  width:84px; height:84px; margin:18px 0 0; border-radius:50%; border:0; cursor:default; position:relative;
  background:
    radial-gradient(circle at 40% 32%, #8a6a44, #4a3722 58%, #2a1d12);
  box-shadow:0 4px 8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,240,210,.3), 0 0 0 4px #3a2a1a, 0 0 0 5px #6b5236;
  transform:rotate(var(--rot,0deg)); transition:transform 120ms ease-out;
}
.dial-grip{
  position:absolute; inset:14px; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, #5e4730 0 6deg, #33251a 6deg 12deg);
  box-shadow:inset 0 0 0 1px #000;
}
.dial-pointer{position:absolute; left:50%; top:4px; width:4px; height:18px; margin-left:-2px; background:var(--gold); border-radius:1px; box-shadow:0 0 6px rgba(255,211,110,.5)}
.dial-block .legend{margin-top:2px}

.keys{display:flex; flex-direction:column; align-items:center; gap:9px}
.key-item{display:grid; grid-template-columns:auto auto; align-items:center; gap:12px; width:120px; justify-content:start}
.key-item .legend{font-size:14px; letter-spacing:.12em; text-align:left; color:var(--label)}
.key{
  width:46px; height:44px; border:0; border-radius:6px; cursor:pointer; padding:0; display:grid; place-items:center; position:relative;
  background:linear-gradient(180deg,#171207,#0d0a05); box-shadow:inset 0 2px 5px rgba(0,0,0,.85), 0 1px 0 rgba(255,240,210,.18);
  transition:transform 60ms ease-out;
}
.key::before{content:""; position:absolute; left:5px; right:5px; top:5px; bottom:14px; border-radius:5px 5px 3px 3px;
  background:linear-gradient(180deg,#f2f0ec 0%,#c7c9cd 26%,#8f9297 55%,#5f6266 100%);
  box-shadow:0 3px 4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 3px rgba(0,0,0,.35); transition:all 70ms ease-out;}
.key svg{position:relative; z-index:1; width:15px; height:15px; margin-top:-8px; fill:#2a2c30; stroke:#2a2c30}
.key span{font-family:var(--print); font-weight:600; font-size:8.5px; letter-spacing:.12em; color:var(--chrome)}
.key:active::before,.key.pressed::before{top:9px; bottom:6px; box-shadow:0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);}
.key.power{width:52px; height:48px}
.key.power::before{background:linear-gradient(180deg,#9a5fd0 0%,#7a2fc4 45%,#4a1a86 100%)}
.key.power svg{stroke:var(--gold); fill:none; margin-top:-8px}
/* the picture key: chrome-faced, so POWER stays the one purple key on the panel */
.key.picture::before{background:linear-gradient(180deg,#f6ead2 0%,#d8c3a0 45%,#8d7550 100%)}
.key.picture svg{stroke:#2e2216; fill:none; margin-top:-8px}
.pilot{align-self:center; width:7px; height:7px; border-radius:50%; background:#3a1a1a; box-shadow:inset 0 0 2px #000; transition:background 300ms, box-shadow 300ms; margin-top:7px}
.tv[data-state="on"] .pilot,.tv[data-state="warming"] .pilot{background:#ff3b3b; box-shadow:0 0 9px #ff3b3b}

.maker{display:flex; align-items:baseline; gap:7px; margin-top:4px; opacity:.95}
.maker .emboss{font-family:"Anton", var(--print); font-size:26px; letter-spacing:.06em; color:var(--plastic);
  text-shadow:0 1.5px 0 rgba(255,240,210,.5), 0 -1.5px 0 rgba(0,0,0,.6);}
.maker .engrave{font-family:"Anton", var(--print); font-size:26px; letter-spacing:.06em; color:var(--plastic-lo);
  text-shadow:0 1px 0 rgba(255,240,210,.4);}
.model{font-family:var(--print); font-size:9px; letter-spacing:.18em; color:var(--label); opacity:.7; margin-top:2px}

/* the test card the set plays when no channel is named */
.testcard{
  min-height:100%; display:grid; grid-template-rows:auto 1fr auto; text-align:center; color:var(--text);
  background:linear-gradient(90deg,#ffd36e 0 12.5%,#f2f0ff 12.5% 25%,#7a2fc4 25% 37.5%,#290063 37.5% 50%,#ff5c8a 50% 62.5%,#2bd4ff 62.5% 75%,#1d1230 75% 87.5%,#0b0616 87.5%);
}
.testcard h1{font-family:var(--display); font-size:clamp(28px, 9vw, 64px); letter-spacing:.06em; margin:0; padding:18px 12px 10px; background:rgba(11,6,22,.82); text-shadow:0 0 22px rgba(122,47,196,.8)}
.testcard p{margin:0; padding:10px 14px 16px; background:rgba(11,6,22,.82); font-size:clamp(14px,3.4vw,18px); line-height:1.5}
.testcard .spacer{background:rgba(11,6,22,.35)}

@media (prefers-reduced-motion:reduce){
  .press,.press.release,.dial,.dark{transition:none}
  .tv[data-state="warming"] .dark{animation:none; opacity:0}
  .wave.go{animation-duration:820ms; animation-timing-function:step-end}
  .lcd.armed{animation:none}
  .momlogo{transition:none}
}
@media (max-width:640px){
  .cabinet{grid-template-columns:1fr; grid-template-rows:auto 1fr; grid-template-areas:"panel" "screen"; padding:8px 8px 10px}
  .tv[data-gauge="off"] .cabinet{grid-template-columns:1fr; grid-template-areas:"panel" "screen"}
  .cabinet .gauge{display:none}
  .cabinet .bezel{grid-area:screen; min-height:0} .cabinet .panel{grid-area:panel}
  /* the console on a phone: the tabs, then one row of dial + power + maker */
  .panel{border-left:0; border-bottom:1px solid rgba(0,0,0,.18); margin:0 0 8px; padding:2px 0 6px; gap:6px; display:grid; grid-template-columns:1fr; justify-items:stretch}
  .lcd{width:100%; padding:4px; gap:4px}
  .lcd .vfd{display:flex; gap:10px; align-items:baseline; padding:2px 4px 5px} .vfd-name{font-size:15px} .vfd-show{font-size:11px} .vfd-ch{font-size:11px}
  .lcd-list{display:flex; flex-wrap:wrap; gap:4px; padding-bottom:2px}   /* wraps, so no card is ever cut off (Ian) */
  .lcd-card,.lcd-card.half{grid-column:auto}
  .lcd-card{flex:0 0 auto; grid-template-columns:auto; gap:0; padding:8px 11px; min-height:36px; align-content:center; white-space:nowrap}
  .momlogo{width:34px; right:10px; bottom:10px}
  .lcd-card .lcd-ch{display:none} .lcd-card .lcd-name{font-size:13px}
  .lcd-card.head{grid-template-columns:auto; padding:8px 14px; margin:0; border-width:2px} .lcd-card.head .lcd-name{font-size:15px}
  .lcd.armed::after{transform-origin:left; animation-name:lcdtake-x}
  @keyframes lcdtake-x{from{transform:scaleX(0)} to{transform:scaleX(1)}}
  .panel .row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:0 4px}
  .panel .lcd{order:1} .panel #ctlrow{order:2; display:flex; justify-content:space-between}
  .dial-block{width:54px; gap:0} .dial-ring{display:none} .dial{width:44px; height:44px; margin:0} .dial-block .legend{display:none}
  .keys{flex-direction:row; align-items:center; gap:8px; margin:0}
  .key-item{width:auto; grid-template-columns:auto; justify-items:center; gap:0} .key-item .legend{display:none}
  .key.power{width:48px; height:44px}
  .pilot{margin-top:0}
  .maker{margin-top:0} .maker .emboss,.maker .engrave{font-size:18px}
  .model{display:none}
}

/* --- game mode: the set hands the whole viewport to the game (2.15 / C001).
   `data-mode="game"` sits on .tv and means the LAYOUT mode. It is not the TONE switch of the same
   name: that one is live/public and lives on <html> (tv.js) and on a channel's own root (corgi.html).
   Nothing selects on .tv[data-mode] but this block.

   F.1's resolution, adopted: the CRT furniture comes off games and stays on every non-game page, while
   the shell controls remain around an unframed stage. So the phosphor, glare, glass curvature and the
   engraved MOM INC all go, and the panel becomes one compact strip above the stage carrying the two
   things C001 names - an exit control and a reachable channel drawer.

   The stage takes the whole viewport apart from that strip rather than a literal 100dvh, because
   C001's own check is "enter, exit, rotate and navigate channels without losing progress OR HIDING
   CONTROLS", and a stage covering every pixel can only satisfy that by floating the controls over the
   picture, which hides part of the game instead. The strip is ~56px; everything below it is game.

   This block sits last in the file on purpose: it ties on specificity with .tv[data-gauge="off"] and
   with the phone rules above, so source order is what decides, and game mode has to win both. */
.tv[data-mode="game"] .cabinet{grid-template-columns:1fr; grid-template-rows:auto 1fr; grid-template-areas:"panel" "screen";
  padding:0; background:#0a0a0c; box-shadow:none}
.tv[data-mode="game"] .gauge{display:none}
.tv[data-mode="game"] .bezel{grid-area:screen; min-height:0; padding:0; border-radius:0; background:#000; box-shadow:none}
.tv[data-mode="game"] .bezel::after{display:none}                       /* the engraved MOM INC is cabinet, not picture */
.tv[data-mode="game"] .glass{border-radius:0; box-shadow:none}
.tv[data-mode="game"] .phosphor,
.tv[data-mode="game"] .glare,
.tv[data-mode="game"] .momlogo{display:none}                            /* CRT furniture off (S1) */
/* the controls stay visible above the stage: never an overlay on the picture, never a hidden drawer */
.tv[data-mode="game"] .panel{grid-area:panel; display:flex; align-items:center; gap:10px;
  margin:0; padding:5px 10px 6px; border-left:0; border-bottom:1px solid rgba(0,0,0,.45)}
.tv[data-mode="game"] .dial-block,
.tv[data-mode="game"] .maker,
.tv[data-mode="game"] .model,
.tv[data-mode="game"] .lcd .vfd,
.tv[data-mode="game"] #pictureKey{display:none}   /* the CRT furniture is already off in game mode (S1); a key controlling nothing is worse than no key */
.tv[data-mode="game"] .lcd{flex:1 1 auto; width:auto; min-width:0; padding:4px; gap:0}
.tv[data-mode="game"] .lcd-list{display:flex; flex-wrap:nowrap; overflow-x:auto; gap:4px; padding-bottom:2px}
.tv[data-mode="game"] .lcd-card,
.tv[data-mode="game"] .lcd-card.half,
.tv[data-mode="game"] .lcd-card.head{flex:0 0 auto; grid-column:auto; grid-template-columns:auto; gap:0;
  margin:0; padding:5px 9px; white-space:nowrap}
.tv[data-mode="game"] .lcd-card .lcd-ch{display:none}
.tv[data-mode="game"] .lcd-card .lcd-name,
.tv[data-mode="game"] .lcd-card.head .lcd-name{font-size:13px}
.tv[data-mode="game"] .keys{flex:0 0 auto; flex-direction:row; align-items:center; gap:10px; margin:0}
.tv[data-mode="game"] .key-item{width:auto; grid-template-columns:auto auto; gap:6px}
/* the strip is unlit black plastic rather than the cabinet's front, so the printed legends have to
   stop being printed ink: #3a2b18 on #0a0a0c is unreadable, and POWER and EXIT are the two controls
   C001 says must stay usable. */
.tv[data-mode="game"] .key-item .legend{font-size:11px; letter-spacing:.14em; color:rgba(255,240,210,.72)}
.tv[data-mode="game"] .panel{border-bottom-color:rgba(255,240,210,.14)}
/* the key itself: hidden until the channel on the set is a game. #gameKey beats .key-item's display:grid,
   which an author rule otherwise wins over the UA sheet's [hidden]. */
#gameKey[hidden]{display:none}
.key.game::before{background:linear-gradient(180deg,#ffe6a8 0%,#ffd36e 45%,#c79a2c 100%)}
.key.game svg{stroke:#3a2b18; fill:none; margin-top:-8px}