/* Our Sitcom TV: the set from the TV System kit (Our Sitcom TV System / SitcomTV / SitcomTVFullscreen .dc.html) in a
   dim living room. Sizes inside the set are in --u, a 760th of the set's width, so the whole TV scales as one object down
   to phone width. UI colours, fonts and motion come from the design system (packages/ui tokens.css + derived.css), the
   holiday dressing from tv-sets.css (--tv-*); the literal colours left here are the set's own art (walnut, chrome,
   brass, glass, bulbs, ornaments), as in the kit. */

:root {
  --wall: #2a1914;
  --wall-2: #1c100c;
  --ink: #2b1d16;
  --brass: #c99a55;
  --brass-2: #8a6330;
  --glow: 255 196 120;      /* warm screen spill, rgb triplet; JS updates --glow-a */
  --glow-a: 0;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wall: #24150f; } }
:root[data-theme="dark"] { --wall: #24150f; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--wall-2);
  color: #f3e6cf;
  font-family: var(--ep-font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------- the room ---- */
.room {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 1.5vh 2vw;
  isolation: isolate;
  overflow: clip;
  background:
    /* floor */
    linear-gradient(to bottom, transparent 0 82%, #140b07 82%, #1d110b 84%, #2a1810 100%),
    /* wainscot rail */
    linear-gradient(to bottom, transparent 0 60.5%, rgb(255 210 160 / .06) 60.5% 61%, #160d09 61% 61.6%, transparent 61.6%),
    /* wainscot panels */
    repeating-linear-gradient(90deg, transparent 0 118px, rgb(0 0 0 / .22) 118px 121px, rgb(255 220 180 / .04) 121px 123px) 0 0 / 100% 100%,
    /* damask-ish wallpaper */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='92' viewBox='0 0 64 92'%3E%3Cg fill='none' stroke='%23e8b98a' stroke-opacity='.07' stroke-width='1.3'%3E%3Cpath d='M32 6c10 10 14 22 0 40C18 28 22 16 32 6z'/%3E%3Cpath d='M32 46c10 10 14 22 0 40C18 68 22 56 32 46z' transform='translate(32 0)'/%3E%3Cpath d='M32 46c10 10 14 22 0 40C18 68 22 56 32 46z' transform='translate(-32 0)'/%3E%3Ccircle cx='32' cy='46' r='2'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 60% at 40% 45%, #3a221a, var(--wall) 60%, var(--wall-2));
}
.room::before {            /* the TV's light spilling onto the wall, tinted by the picture */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 58% at var(--glow-x, 38%) var(--glow-y, 40%), rgb(var(--glow) / calc(var(--glow-a) * .7)), rgb(var(--glow) / calc(var(--glow-a) * .32)) 42%, rgb(var(--glow) / calc(var(--glow-a) * .1)) 66%, transparent 85%);
}
.wall-lights {             /* a soft string of warm bulbs high on the wall */
  position: absolute; left: 0; right: 0; top: 10px; height: 46px; z-index: -1; pointer-events: none; opacity: .75;
  background:
    radial-gradient(circle at 50% 70%, rgb(255 190 110 / .9) 0 2.5px, rgb(255 170 80 / .25) 4px, transparent 13px) 0 0 / 74px 46px,
    radial-gradient(circle at 50% 30%, rgb(255 120 90 / .8) 0 2px, rgb(255 110 80 / .2) 4px, transparent 12px) 37px 0 / 74px 46px;
  -webkit-mask: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  animation: wl 5s ease-in-out infinite alternate;
}
@keyframes wl { to { opacity: .5; } }


/* ---------------------------------------------------------------- the TV ---- */
/* The set, built to the TV System kit (SitcomTV.dc.html): the kit's 760-unit-wide cabinet with room round it for
   everything that sticks out, so nothing is ever clipped: 132.5 units of headroom (the kit's 96, plus the rabbit ears'
   ball tips), 54 under for the legs, 12 each side (the ornament overhangs the top-right corner by 8). The set is
   784 x 676 units; every part is sized in --u (a 784th of the set's width), so the whole TV scales as one object and
   never resizes its parts. Holiday colours: packages/ui tv-sets.css (--tv-*). */
.stage { display: flex; flex-direction: column; align-items: center; min-width: 0; width: 100%; }
.tv-wrap {
  container-type: inline-size;
  position: relative;
  width: min(100%, calc((100dvh - 120px) * 784 / 676));
  min-width: 0;
}
.tv {
  --u: calc(100cqw / 784);
  --walnut-mid: #7a4426;
  --brass: #caa56a;
  --chrome: linear-gradient(155deg, #fbfaf7 0%, #b9b2a8 35%, #f1ece5 55%, #8c857b 100%);
  --knob-cap: radial-gradient(circle at 35% 28%, #ffffff, #d2d2d2 55%, #8c8c8c);
  --label: #f1d7a8;
  position: relative; padding: calc(132.5 * var(--u)) calc(12 * var(--u)) calc(54 * var(--u));
}
.tv-shadow { position: absolute; bottom: calc(4 * var(--u)); left: 7%; right: 7%; height: calc(40 * var(--u)); pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(0 0 0 / .55), transparent 70%); }

/* legs: tapered walnut with brass ferrules, splayed 9° */
.legs i { position: absolute; bottom: calc(10 * var(--u)); display: flex; flex-direction: column; align-items: center; transform-origin: top center; }
.legs i.l { left: calc(140 * var(--u)); transform: rotate(9deg); }
.legs i.r { right: calc(140 * var(--u)); transform: rotate(-9deg); }
.legs i::before { content: ""; width: calc(20 * var(--u)); height: calc(50 * var(--u));
  background: linear-gradient(90deg, #2a1408, #6a3a1e 45%, #2a1408); clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%); }
.legs i::after { content: ""; width: calc(10 * var(--u)); height: calc(8 * var(--u)); margin-top: -1px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #9c7a3e, #f1d18e, #9c7a3e); }

/* rabbit ears: chrome, asymmetric (−27° / +25°), never dressed */
.antenna { position: absolute; top: calc(36.5 * var(--u)); left: 50%; width: calc(200 * var(--u)); height: calc(100 * var(--u)); translate: -50% 0; pointer-events: none; }
.antenna .rod { position: absolute; bottom: calc(24 * var(--u)); left: calc(98 * var(--u)); width: calc(4 * var(--u)); border-radius: 2px;
  background: linear-gradient(90deg, #8a8a8a, #f4f4f4, #8a8a8a); transform-origin: bottom center; }
.antenna .rod.l { height: calc(112 * var(--u)); transform: rotate(-27deg); }
.antenna .rod.r { height: calc(104 * var(--u)); transform: rotate(25deg); }
.antenna .rod::after { content: ""; position: absolute; top: calc(-7 * var(--u)); left: calc(-5 * var(--u)); width: calc(14 * var(--u)); height: calc(14 * var(--u));
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9a9a9a); }
.antenna .neck { position: absolute; bottom: calc(28 * var(--u)); left: calc(89 * var(--u)); width: calc(22 * var(--u)); height: calc(12 * var(--u));
  border-radius: calc(4 * var(--u)); background: linear-gradient(#777, #444); }
.antenna .base { position: absolute; bottom: 0; left: calc(46 * var(--u)); width: calc(108 * var(--u)); height: calc(34 * var(--u));
  border-radius: calc(54 * var(--u)) calc(54 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
  background: radial-gradient(ellipse at 40% 15%, #e2e2e2, #7a7a7a 55%, #3a3a3a); }

/* the walnut cabinet: radius 50 / 42, grain and light from the top left */
.body {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) calc(132 * var(--u)); gap: calc(22 * var(--u));
  padding: calc(30 * var(--u)) calc(26 * var(--u)) calc(30 * var(--u)) calc(28 * var(--u));
  border-radius: calc(50 * var(--u)) calc(50 * var(--u)) calc(42 * var(--u)) calc(42 * var(--u));
  background:
    radial-gradient(ellipse 120% 60% at 30% 0%, rgb(255 210 160 / .2), transparent 60%),
    repeating-linear-gradient(88deg, rgb(40 15 5 / .16) 0 2px, transparent 2px 7px, rgb(255 220 180 / .05) 7px 9px, transparent 9px 15px, rgb(40 15 5 / .08) 15px 16px, transparent 16px 26px),
    linear-gradient(175deg, var(--ep-walnut-hi) 0%, var(--walnut-mid) 40%, var(--ep-walnut-lo) 100%);
  box-shadow: inset 0 3px 0 rgb(255 225 190 / .3), inset 0 calc(-16 * var(--u)) calc(30 * var(--u)) rgb(0 0 0 / .42),
    inset calc(12 * var(--u)) 0 calc(22 * var(--u)) rgb(0 0 0 / .16), inset calc(-12 * var(--u)) 0 calc(22 * var(--u)) rgb(0 0 0 / .2),
    0 calc(40 * var(--u)) calc(80 * var(--u)) rgb(0 0 0 / .5);
}

/* the dressing rail: the holiday's lights, garland and snow on the top edge (tv.js dress()) */
.rail { position: absolute; z-index: 3; top: calc(-26 * var(--u)); left: calc(20 * var(--u)); right: calc(20 * var(--u)); height: calc(70 * var(--u)); pointer-events: none; }
.rail .snowcap { position: absolute; top: calc(22 * var(--u)); left: calc(10 * var(--u)); right: calc(10 * var(--u)); height: calc(12 * var(--u));
  border-radius: calc(8 * var(--u)); background: linear-gradient(#ffffff, #e6eaee); }
.rail .drip { position: absolute; top: calc(27 * var(--u)); border-radius: 50%; background: #eef1f4; }
.rail .garland { position: absolute; top: calc(10 * var(--u)); left: calc(-12 * var(--u)); right: calc(-12 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(11 * var(--u));
  background: radial-gradient(circle at 30% 40%, #5a9a5f 0 2.5px, transparent 3.5px) 0 0 / 8px 8px, radial-gradient(circle at 70% 60%, #183d21 0 3px, transparent 4px) 3px 2px / 10px 10px,
    radial-gradient(circle at 50% 50%, #3f7d47 0 2px, transparent 3px) 1px 5px / 6px 7px, #2a5831;
  box-shadow: 0 calc(5 * var(--u)) calc(8 * var(--u)) rgb(0 0 0 / .35); }
.cords { position: absolute; top: calc(14 * var(--u)); left: 0; right: 0; display: flex; }
.cords i { flex: 1; height: calc(18 * var(--u)); border-bottom: max(1.5px, calc(2.5 * var(--u))) solid var(--tv-cord); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.bulb { position: absolute; display: flex; flex-direction: column; align-items: center; animation: tv-twinkle var(--d, 3s) ease-in-out var(--dl, 0s) infinite alternate; }
.bulb::before { content: ""; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 2px; background: #2a2a2a; }
.bulb::after { content: ""; width: calc(12 * var(--u)); height: calc(17 * var(--u)); border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .85) 0 calc(2 * var(--u)), var(--c) calc(5 * var(--u))); box-shadow: 0 0 calc(12 * var(--u)) calc(3 * var(--u)) var(--c); }
@keyframes tv-twinkle { from { opacity: .75; } to { opacity: 1; } }
html.sctv-theatre.tv-playing .bulb { animation-play-state: paused; }

/* the ornament at the top right (one per holiday) */
.orn { position: absolute; z-index: 4; top: calc(-44 * var(--u)); right: calc(-8 * var(--u)); pointer-events: none; }
.orn > div { position: relative; }
.orn i { position: absolute; display: block; }
.orn .bow { width: calc(96 * var(--u)); height: calc(80 * var(--u)); }
.orn .bow .t1, .orn .bow .t2 { top: calc(36 * var(--u)); width: calc(14 * var(--u)); border-radius: 3px; background: linear-gradient(90deg, #8e0f19, #c81e2c);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); }
.orn .bow .t1 { left: calc(34 * var(--u)); height: calc(40 * var(--u)); transform: rotate(16deg); }
.orn .bow .t2 { left: calc(48 * var(--u)); height: calc(44 * var(--u)); transform: rotate(-14deg); }
.orn .bow .l1, .orn .bow .l2 { top: calc(12 * var(--u)); width: calc(46 * var(--u)); height: calc(32 * var(--u)); }
.orn .bow .l1 { left: calc(2 * var(--u)); border-radius: 60% 40% 40% 60% / 60% 50% 50% 40%; background: radial-gradient(circle at 40% 35%, #ff6060, #b3121f 70%);
  transform: rotate(-18deg); box-shadow: inset calc(-6 * var(--u)) calc(-4 * var(--u)) 0 rgb(0 0 0 / .18); }
.orn .bow .l2 { left: calc(48 * var(--u)); border-radius: 40% 60% 60% 40% / 50% 60% 40% 50%; background: radial-gradient(circle at 60% 35%, #ff6060, #b3121f 70%);
  transform: rotate(18deg); box-shadow: inset calc(6 * var(--u)) calc(-4 * var(--u)) 0 rgb(0 0 0 / .18); }
.orn .bow .k { left: calc(38 * var(--u)); top: calc(22 * var(--u)); width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(7 * var(--u));
  background: radial-gradient(circle at 40% 35%, #ff5050, #a50f1b); }
.orn .pumpkin { width: calc(70 * var(--u)); height: calc(60 * var(--u)); margin-top: calc(18 * var(--u)); }
.orn .pumpkin .stem { left: calc(30 * var(--u)); top: 0; width: calc(8 * var(--u)); height: calc(14 * var(--u)); border-radius: 3px; background: #4a6a2a; transform: rotate(12deg); }
.orn .pumpkin .a, .orn .pumpkin .b, .orn .pumpkin .c { top: calc(10 * var(--u)); width: calc(30 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffad4a, #d9600f); }
.orn .pumpkin .a { left: calc(6 * var(--u)); }
.orn .pumpkin .b { left: calc(32 * var(--u)); }
.orn .pumpkin .c { left: calc(19 * var(--u)); top: calc(8 * var(--u)); height: calc(43 * var(--u)); background: radial-gradient(circle at 40% 35%, #ffbb5e, #e46c14); }
.orn .heart { width: calc(64 * var(--u)); height: calc(60 * var(--u)); margin-top: calc(16 * var(--u)); transform: rotate(12deg); }
.orn .heart .a, .orn .heart .b { top: calc(6 * var(--u)); width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; background: #e8336a; }
.orn .heart .a { left: calc(4 * var(--u)); }
.orn .heart .b { left: calc(24 * var(--u)); }
.orn .heart .c { left: calc(14 * var(--u)); top: calc(16 * var(--u)); width: calc(28 * var(--u)); height: calc(28 * var(--u)); background: #e8336a; transform: rotate(45deg); }
.orn .heart .d { left: calc(12 * var(--u)); top: calc(12 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: rgb(255 255 255 / .55); }
.orn .star { width: calc(58 * var(--u)); height: calc(58 * var(--u)); margin: calc(16 * var(--u)) calc(10 * var(--u)) 0 0; background: var(--tv-star);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 8px rgb(255 230 160 / .6)); transform: rotate(12deg); }
.orn .leaf { width: calc(60 * var(--u)); height: calc(64 * var(--u)); margin: calc(14 * var(--u)) calc(8 * var(--u)) 0 0; transform: rotate(18deg); }
.orn .leaf .a { left: calc(8 * var(--u)); top: calc(4 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 0 80% 0 80%;
  background: linear-gradient(135deg, #f7a43a, #c4421a); transform: rotate(45deg); }
.orn .leaf .b { left: calc(29 * var(--u)); top: calc(38 * var(--u)); width: calc(3 * var(--u)); height: calc(24 * var(--u)); border-radius: 2px; background: #6a3a1c; }
.orn .menorah { display: flex; flex-direction: column; align-items: center; margin: calc(14 * var(--u)) calc(6 * var(--u)) 0 0; }
.orn .menorah .row { display: flex; align-items: flex-end; gap: calc(4 * var(--u)); }
.orn .menorah .cd { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); }
.orn .menorah .cd::before { content: ""; width: calc(5 * var(--u)); height: calc(8 * var(--u)); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #ffcf5a; box-shadow: 0 0 calc(8 * var(--u)) calc(2 * var(--u)) rgb(255 200 80 / .8); }
.orn .menorah .cd::after { content: ""; width: calc(4 * var(--u)); height: calc(var(--h, 14) * var(--u)); background: var(--c, #7fb8ff); }
.orn .menorah .arm { width: calc(70 * var(--u)); height: calc(4 * var(--u)); border-radius: 2px; background: #d9b46a; }
.orn .menorah .stem { width: calc(4 * var(--u)); height: calc(10 * var(--u)); background: #d9b46a; }
.orn .menorah .foot { width: calc(30 * var(--u)); height: calc(4 * var(--u)); border-radius: 2px; background: #d9b46a; }

/* the screen stack: chrome bezel > dark tube surround > the 4:3 tube */
.housing { position: relative; min-width: 0; }
.trim { padding: calc(11 * var(--u)); border-radius: calc(46 * var(--u)); background: var(--chrome);
  box-shadow: inset 0 1px 0 #fff, 0 calc(5 * var(--u)) calc(12 * var(--u)) rgb(0 0 0 / .5); }
.bezel { padding: calc(6 * var(--u)); border-radius: calc(38 * var(--u)); background: radial-gradient(ellipse at 50% 35%, #21170f, #060403 75%);
  box-shadow: inset 0 calc(10 * var(--u)) calc(22 * var(--u)) rgb(0 0 0 / .95), inset 0 -2px 0 rgb(255 255 255 / .06); }
.screen { position: relative; aspect-ratio: 4 / 3; border-radius: calc(64 * var(--u)) / calc(54 * var(--u)); overflow: hidden; isolation: isolate;
  background: #0b0a09; box-shadow: 0 0 calc(46 * var(--u)) var(--tv-glow); container-type: inline-size; transition: box-shadow .6s; }
.tv:not(.on):not(.turning-on) .screen { box-shadow: none; }
.screen > * { position: absolute; inset: 0; pointer-events: none; }
.glass-off { background: radial-gradient(ellipse at 50% 45%, #1d2220, #070908 70%); }
.picture { transform-origin: 50% 50%; transform: scale(0, 0); background: #000; }
.picture canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* scanlines, vignette and a glass glare over everything on the tube */
.glass { z-index: 6;
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / .14) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 64%, rgb(0 0 0 / .42) 100%),
    radial-gradient(ellipse 55% 30% at 28% 6%, rgb(255 255 255 / .16), transparent 70%), linear-gradient(160deg, rgb(255 255 255 / .12) 0%, rgb(255 255 255 / .03) 28%, transparent 29%);
  box-shadow: inset 0 0 calc(18 * var(--s)) rgb(0 0 0 / .45); }
.dot { z-index: 5; inset: auto; left: 50%; top: 50%; width: 1.3cqw; height: 1.3cqw; margin: -.65cqw; border-radius: 50%; background: #fff;
  box-shadow: 0 0 2.8cqw 1cqw rgb(220 240 255 / .7); opacity: 0; transition: opacity .3s; }
.tv:not(.on):not(.turning-on) .dot { opacity: 1; }

/* power on (600ms): the dot becomes a line (150ms), the line opens (250ms, ease-out), the glow fades in */
.tv.on .picture { transform: none; }
.tv.turning-on .picture { animation: tv-on .6s both; }
.tv.turning-off .picture { animation: tv-off .4s cubic-bezier(.6, 0, .8, .4) both; }
@keyframes tv-on {
  0%   { transform: scale(.02, .006); filter: brightness(6) saturate(0); animation-timing-function: linear; }
  25%  { transform: scale(1, .006); filter: brightness(5) saturate(0); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  67%  { transform: scale(1, 1); filter: brightness(1.5) saturate(.8); }
  100% { transform: none; filter: none; }
}
@keyframes tv-off {
  0%   { transform: none; filter: none; }
  60%  { transform: scale(1, .006); filter: brightness(5) saturate(0); }
  100% { transform: scale(0, .004); filter: brightness(9) saturate(0); }
}

/* title and end cards (tv.js cards()): the card system, lettering by the episode's holiday (or the brand's) */
.screen { --s: calc(100cqw / 490); }
.card { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; opacity: 0; visibility: hidden;
  background: radial-gradient(rgb(255 255 255 / .45) calc(1.2 * var(--s)), transparent calc(1.8 * var(--s))) 0 0 / calc(52 * var(--s)) calc(44 * var(--s)),
    radial-gradient(rgb(255 255 255 / .28) calc(1 * var(--s)), transparent calc(1.6 * var(--s))) calc(26 * var(--s)) calc(22 * var(--s)) / calc(52 * var(--s)) calc(44 * var(--s)),
    radial-gradient(ellipse at 50% 40%, var(--tv-card-hi), var(--tv-card) 72%); }
.card.up { visibility: visible; }
.card .f1 { position: absolute; inset: calc(28 * var(--s)) calc(36 * var(--s)); border-radius: calc(30 * var(--s)) / calc(26 * var(--s)); border: calc(2 * var(--s)) solid var(--tv-gold); }
.card .f2 { position: absolute; inset: calc(36 * var(--s)) calc(44 * var(--s)); border-radius: calc(24 * var(--s)) / calc(20 * var(--s)); border: calc(1.5 * var(--s)) solid var(--tv-accent); opacity: .8; }
.card.end .f2 { display: none; }
.card .ct { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--s)); text-align: center; padding: 0 calc(54 * var(--s)); }
.card .presents { font: 700 calc(12 * var(--s))/1.2 var(--ep-font-ui); letter-spacing: .34em; color: var(--tv-gold); }
.card .fam { font: 400 calc(26 * var(--s))/1.05 var(--ep-font-display); color: #fbf3e4; text-shadow: 0 2px 0 rgb(0 0 0 / .4); }
.card .big { max-width: calc(470 * var(--s)); font: 400 calc(46 * var(--s))/1.05 var(--ep-font-display); color: #fbf3e4; text-wrap: balance;
  text-shadow: calc(3 * var(--s)) calc(3 * var(--s)) 0 var(--ep-tomato), calc(6 * var(--s)) calc(6 * var(--s)) 0 rgb(0 0 0 / .4); }
.card .se { margin-top: calc(6 * var(--s)); font: 400 calc(13 * var(--s))/1.2 var(--ep-font-mono); letter-spacing: .14em; color: var(--tv-gold); }
/* a holiday special: Shrikhand for the holiday name and the family, the holiday's accent in the shadow */
.card:not([data-card="neutral"]) .fam { font-family: var(--ep-font-logo); font-size: calc(30 * var(--s)); text-shadow: calc(2 * var(--s)) calc(2 * var(--s)) 0 var(--tv-accent); }
.card:not([data-card="neutral"]) .big { font-family: var(--ep-font-logo); font-size: calc(var(--big, 62) * var(--s));
  text-shadow: calc(3 * var(--s)) calc(3 * var(--s)) 0 var(--tv-accent), calc(6 * var(--s)) calc(6 * var(--s)) 0 rgb(0 0 0 / .4); }
.card.end .ct { gap: calc(14 * var(--s)); }
.card.end .big { font-size: calc(92 * var(--s)); line-height: 1; color: var(--tv-gold); white-space: nowrap; }
.card.end:not([data-card="neutral"]) .big { font-size: calc(80 * var(--s)); }
.card.end[data-card="neutral"] .big { text-shadow: calc(3 * var(--s)) calc(3 * var(--s)) 0 var(--ep-tomato), calc(6 * var(--s)) calc(6 * var(--s)) 0 rgb(0 0 0 / .4); }
.card.end .sign { font: 700 calc(21 * var(--s))/1.2 var(--ep-font-ui); color: #fbf3e4; }
.card.end .dots { display: flex; gap: calc(4 * var(--s)); }
.card.end .dots i { width: calc(9 * var(--s)); height: calc(9 * var(--s)); border-radius: 50%; background: var(--tv-accent); }
.card.end .dots i:nth-child(2) { background: var(--tv-gold); }

/* casting: colour bars and the progress plate while the characters are drawn (tv.js casting()) */
.casting { z-index: 3; display: flex; flex-direction: column; background: #111; visibility: hidden; }
.tv.casting-up .casting { visibility: visible; }
.casting .bars, .casting .bars2 { display: flex; }
.casting .bars { flex: 1; }
.casting .bars2 { height: 16%; }
.casting span { flex: 1; }
.casting .bars span:nth-child(1), .casting .bars2 span:nth-child(7) { background: #bdbdbd; }
.casting .bars span:nth-child(2) { background: #c9c13a; }
.casting .bars span:nth-child(3), .casting .bars2 span:nth-child(5) { background: #3ab9c0; }
.casting .bars span:nth-child(4) { background: #3fb04a; }
.casting .bars span:nth-child(5), .casting .bars2 span:nth-child(3) { background: #b23fb0; }
.casting .bars span:nth-child(6) { background: #c0393a; }
.casting .bars span:nth-child(7), .casting .bars2 span:nth-child(1) { background: #3a45c0; }
.casting .bars2 span:nth-child(even) { background: #151515; }
.casting .plate { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max-content; max-width: 86%; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--s)); padding: calc(20 * var(--s)) calc(30 * var(--s));
  border-radius: calc(16 * var(--s)); background: rgb(20 12 8 / .92); box-shadow: 0 0 0 calc(2 * var(--s)) var(--tv-gold); }
.casting .k { font: 400 calc(12 * var(--s))/1 var(--ep-font-mono); letter-spacing: .24em; color: var(--tv-gold); }
.casting .nm { font: 400 calc(28 * var(--s))/1 var(--ep-font-display); color: #fbf3e4; }
.casting .segs { display: flex; gap: calc(5 * var(--s)); width: calc(220 * var(--s)); }
.casting .segs i { flex: 1; height: calc(7 * var(--s)); border-radius: 2px; background: rgb(255 255 255 / .18); }
.casting .segs i.on { background: var(--tv-gold); }
.casting .n { font: 400 calc(13 * var(--s))/1.2 var(--ep-font-ui); color: #d9c7a8; }

/* the side panel: enamel badge, episode window, tuning knob, grille and lamp */
.side { display: flex; flex-direction: column; align-items: center; gap: calc(16 * var(--u)); padding-top: 2px; min-height: 0; }
.badge { padding: calc(3 * var(--u)); border-radius: 999px; background: linear-gradient(#fdfdfd, #c4c4c4 55%, #f0f0f0);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #9a9a9a, 0 2px 4px rgb(0 0 0 / .45); margin-bottom: calc(-2 * var(--u)); }
.badge i { display: flex; align-items: center; padding: calc(6 * var(--u)) calc(13 * var(--u)); border-radius: 999px; background: linear-gradient(#d63c35, #a82420);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .45), inset 0 -1px 0 rgb(255 255 255 / .18); }
.badge img { display: block; height: calc(17 * var(--u)); width: auto; }
.epwin { all: unset; cursor: pointer; position: relative; box-sizing: border-box; width: calc(96 * var(--u)); height: calc(66 * var(--u)); flex: none;
  border-radius: calc(12 * var(--u)); border: calc(3 * var(--u)) solid var(--brass); overflow: hidden;
  background: linear-gradient(#0d0704, #22140e 30% 70%, #0d0704); box-shadow: inset 0 calc(3 * var(--u)) calc(8 * var(--u)) rgb(0 0 0 / .7); }
.epwin:focus-visible { outline: 3px solid var(--ep-mustard); outline-offset: 3px; }
.epwin .drum { position: absolute; left: 0; right: 0; top: 50%; display: flex; flex-direction: column; align-items: center;
  transform: translateY(calc((var(--off, 0) - 2.5) * var(--row) * var(--u))); transition: transform .42s cubic-bezier(.3, 1.4, .5, 1); }
.epwin .drum.jump { transition: none; }
.epwin .row { height: calc(var(--row) * var(--u)); display: flex; align-items: center; font: 400 calc(13 * var(--u))/1 var(--ep-font-display); color: rgb(255 244 224 / .28);
  transition: font-size .42s cubic-bezier(.3, 1.4, .5, 1), color .42s; }
.epwin .row.now { font-size: calc(24 * var(--u)); color: var(--ep-cream); }
.epwin { --row: 21; }
.epwin .hair { position: absolute; left: 0; right: 0; top: 50%; margin-top: calc(-15 * var(--u)); height: calc(30 * var(--u));
  border-top: 1px solid var(--tv-plate); border-bottom: 1px solid var(--tv-plate); opacity: .7; }
.epwin .sheen { position: absolute; inset: 0; background: linear-gradient(105deg, rgb(255 255 255 / .12), transparent 40%); }
.eplabel { margin-top: calc(-8 * var(--u)); font: 400 calc(9 * var(--u))/1 var(--ep-font-mono); letter-spacing: .24em; color: var(--label); }
.knob { all: unset; cursor: pointer; position: relative; flex: none; width: calc(70 * var(--u)); height: calc(70 * var(--u)); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(from -1.5deg, rgb(241 215 168 / .85) 0 3deg, transparent 3deg 30deg); }
.knob:focus-visible { outline: 3px solid var(--ep-mustard); outline-offset: 3px; }
.knob::before { content: ""; position: absolute; inset: calc(7 * var(--u)); border-radius: 50%; background: radial-gradient(circle, #3a2212, #2c180c); }
.knob .cap { position: relative; width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; background: var(--knob-cap);
  box-shadow: 0 0 0 calc(3 * var(--u)) #2a180c, 0 calc(4 * var(--u)) calc(8 * var(--u)) rgb(0 0 0 / .55), inset 0 -2px 3px rgb(0 0 0 / .18); }
.knob .ptr { position: absolute; inset: 0; transition: transform .42s cubic-bezier(.3, 1.4, .5, 1); }
.knob .ptr::after { content: ""; position: absolute; top: calc(4 * var(--u)); left: 50%; width: calc(4 * var(--u)); height: calc(14 * var(--u)); margin-left: calc(-2 * var(--u));
  border-radius: 2px; background: var(--tv-plate); }
.grille { width: calc(100 * var(--u)); flex: 1; min-height: calc(70 * var(--u)); box-sizing: border-box; border-radius: calc(14 * var(--u)); border: calc(3 * var(--u)) solid var(--brass);
  background: repeating-linear-gradient(45deg, rgb(0 0 0 / .28) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgb(0 0 0 / .28) 0 1px, transparent 1px 3px),
    linear-gradient(#93704a, #7a5a36);
  box-shadow: inset 0 calc(3 * var(--u)) calc(8 * var(--u)) rgb(0 0 0 / .45); }
.lamp { all: unset; cursor: pointer; position: relative; flex: none; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%;
  background: #6a4a20; transition: background .2s, box-shadow .2s; }
.lamp::before { content: ""; position: absolute; inset: calc(-12 * var(--u)); border-radius: 50%; }   /* a finger-sized target */
.lamp:focus-visible { outline: 3px solid var(--ep-mustard); outline-offset: calc(6 * var(--u)); }
.tv.on .lamp, .tv.turning-on .lamp { background: #ffb84a; box-shadow: 0 0 calc(12 * var(--u)) calc(3 * var(--u)) rgb(255 184 74 / .6); }

/* audience cues (tv.js cues()): never over the picture. On the set the live sign hangs above the cabinet, top left */
.tv-cue { position: absolute; z-index: 6; top: calc(42.5 * var(--u)); left: calc(48 * var(--u)); pointer-events: none; }
.tv-cue[hidden], .band-cue[hidden] { display: none; }
.tv-cue .ep-sign, .band-cue .ep-sign { display: block; }
/* full screen: the cabinet unfolds round the picture (tv.js fitFull()): the signs in the left pillar, the panel in the right */
.pillar-l, .toplights, .band { display: none; }
html.sctv-theatre, html.sctv-theatre body { overflow: hidden; background: var(--ep-page-bottom); }
html.sctv-theatre .room { position: fixed; inset: 0; min-height: 0; padding: 0; display: block; background: none; }
html.sctv-theatre .room::before, html.sctv-theatre .wall-lights, html.sctv-theatre .castbtn, html.sctv-theatre .panel,
html.sctv-theatre .floor-glow, html.sctv-theatre .remote { display: none !important; }
html.sctv-theatre .stage { position: fixed; inset: 0; display: block; }
html.sctv-theatre .tv-wrap { position: fixed; inset: 0; width: auto; max-width: none; container-type: normal;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgb(255 210 160 / .16), transparent 70%),
    repeating-linear-gradient(88deg, rgb(40 15 5 / .16) 0 2px, transparent 2px 7px, rgb(255 220 180 / .05) 7px 9px, transparent 9px 15px, rgb(40 15 5 / .08) 15px 16px, transparent 16px 26px),
    linear-gradient(175deg, #8a4f2c 0%, #6a3a20 45%, #3e200f 100%); }
html.sctv-theatre .tv-wrap::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 120px rgb(0 0 0 / .55); pointer-events: none; }
html.sctv-theatre .tv { --u: var(--fu, 1px); position: absolute; inset: 0; padding: 0; }
html.sctv-theatre :is(.tv-shadow, .legs, .antenna, .rail, .orn, .tv-cue) { display: none; }
html.sctv-theatre .body { position: absolute; inset: 0; display: block; padding: 0; border-radius: 0; background: none; box-shadow: none; }
html.sctv-theatre .housing { position: absolute; left: var(--tx); top: var(--ty); width: var(--tw); height: var(--th); }
html.sctv-theatre .trim { height: 100%; box-sizing: border-box; padding: calc(9 * var(--u)); border-radius: calc(42 * var(--u)); box-shadow: inset 0 1px 0 #fff, 0 calc(8 * var(--u)) calc(24 * var(--u)) rgb(0 0 0 / .55); }
html.sctv-theatre .bezel { height: 100%; padding: 0; border-radius: calc(34 * var(--u)); background: none; box-shadow: none; }
html.sctv-theatre .screen { height: 100%; aspect-ratio: auto; border-radius: calc(34 * var(--u)); box-shadow: 0 0 calc(60 * var(--u)) var(--tv-glow); --s: calc(100cqw / 600); }
html.sctv-theatre .glass { background: repeating-linear-gradient(0deg, rgb(0 0 0 / .1) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgb(0 0 0 / .5) 100%),
  linear-gradient(160deg, rgb(255 255 255 / .08) 0%, transparent 30%); box-shadow: none; }
/* the holiday lights along the top edge */
html.sctv-theatre .toplights { display: block; position: absolute; z-index: 4; left: 0; right: 0; top: calc(-6 * var(--u)); height: calc(30 * var(--u)); pointer-events: none; }
html.sctv-theatre .toplights .cords { top: 0; }
html.sctv-theatre .toplights .cords i { height: calc(16 * var(--u)); }
html.sctv-theatre .toplights .bulb::before { width: calc(5 * var(--u)); height: calc(5 * var(--u)); }
html.sctv-theatre .toplights .bulb::after { width: calc(10 * var(--u)); height: calc(14 * var(--u)); box-shadow: 0 0 calc(10 * var(--u)) calc(3 * var(--u)) var(--c); }
/* the left pillar: the audience, all three signs, the live one lit */
html.sctv-theatre .pillar-l { display: flex; position: absolute; left: var(--plx); top: var(--py, 0); height: var(--ph, 100%); width: var(--pl);
  flex-direction: column; align-items: center; justify-content: center; gap: calc(16 * var(--u)); }
.pillar-l .ep-sign { min-width: 0; }
.pillar-l .ep-sign[data-sign="applause"] { --ep-sign-w: calc(150 * var(--u)); }
.pillar-l .ep-sign[data-sign="laugh"] { --ep-sign-w: calc(118 * var(--u)); }
.pillar-l .ep-sign[data-sign="on-air"] { --ep-sign-w: calc(124 * var(--u)); }
.pillar-l .aud { margin-top: calc(6 * var(--u)); font: 400 calc(9 * var(--u))/1 var(--ep-font-mono); letter-spacing: .24em; color: var(--label); }
/* the right pillar: the side panel, a little larger (the kit's zoom 1.3 badge, 118 x 80 window, 76 knob, 110 x 150 grille) */
html.sctv-theatre .side { position: absolute; left: var(--prx); top: var(--py, 0); height: var(--ph, 100%); width: var(--pl); justify-content: center; gap: calc(20 * var(--u)); padding: 0; }
html.sctv-theatre .badge { zoom: 1.3; margin: 0; }
html.sctv-theatre .epwin { width: calc(118 * var(--u)); height: calc(80 * var(--u)); border-radius: calc(14 * var(--u)); --row: 25; }
html.sctv-theatre .epwin .row { font-size: calc(15 * var(--u)); }
html.sctv-theatre .epwin .row.now { font-size: calc(30 * var(--u)); }
html.sctv-theatre .epwin .hair { margin-top: calc(-18 * var(--u)); height: calc(36 * var(--u)); opacity: .75; }
html.sctv-theatre .eplabel { margin-top: calc(-10 * var(--u)); }
html.sctv-theatre .knob { width: calc(76 * var(--u)); height: calc(76 * var(--u)); }
html.sctv-theatre .knob .cap { width: calc(52 * var(--u)); height: calc(52 * var(--u)); }
html.sctv-theatre .knob .ptr::after { height: calc(16 * var(--u)); }
html.sctv-theatre .grille { flex: none; width: calc(110 * var(--u)); height: calc(150 * var(--u)); min-height: 0; }
/* narrow landscape (under 900px): 120px pillars, APPLAUSE and LAUGH only */
html[data-tv-mode="full-narrow"] .pillar-l .ep-sign[data-sign="on-air"] { display: none; }
html[data-tv-mode="full-narrow"] .pillar-l .ep-sign[data-sign="applause"] { --ep-sign-w: calc(104 * var(--pu, 1px)); }
html[data-tv-mode="full-narrow"] .pillar-l .ep-sign[data-sign="laugh"] { --ep-sign-w: calc(84 * var(--pu, 1px)); }
/* portrait phones: the video full width at the top in its bezel; the band under it: the live sign, the badge and the
   episode readout (the page puts its scrubber under those); the grille and knob drop out */
html[data-tv-mode="portrait"] :is(.side, .pillar-l, .toplights) { display: none; }
html[data-tv-mode="portrait"] .band { display: flex; position: absolute; left: 0; right: 0; top: var(--by); flex-direction: column; align-items: center; gap: calc(14 * var(--u)); }
.band-cue { height: var(--bsh, 44px); display: flex; align-items: center; justify-content: center; }
.band-row { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.band .badge { margin: 0; }
.band .readout { all: unset; cursor: pointer; padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); border: calc(2 * var(--u)) solid var(--brass);
  background: linear-gradient(#0d0704, #22140e); font: 400 calc(17 * var(--u))/1.2 var(--ep-font-display); color: var(--ep-cream); }
.band .readout:focus-visible { outline: 3px solid var(--ep-mustard); outline-offset: 3px; }
/* entering full screen (480ms): the screen scales up, the cabinet fades to the pillars, the panel slides into the right pillar */
html.sctv-theatre.tv-entering .housing { animation: tv-full-in .48s var(--ep-ease) both; }
html.sctv-theatre.tv-entering :is(.side, .pillar-l, .band) { animation: tv-panel-in .48s var(--ep-ease) both; }
html.sctv-theatre.tv-entering .tv-wrap { animation: tv-fade-in .48s ease-out both; }
@keyframes tv-full-in { from { transform: scale(.9); } }
@keyframes tv-panel-in { from { opacity: 0; translate: calc(24 * var(--u)) 0; } }
@keyframes tv-fade-in { from { opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .bulb { animation: none; }
  html.sctv-theatre.tv-entering :is(.housing, .side, .pillar-l, .band, .tv-wrap) { animation: none; }
  .epwin .drum, .epwin .row, .knob .ptr { transition: none; }
}

/* ---- captions: comic speech bubbles with a tail to the speaker's mouth ---- */
.caps { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
/* speech bubbles: the design system's (../ui/bubbles.css), placed by tv.js inside the screen, under the glass */
.caps > .ep-bubble { position: absolute; z-index: 1; }
.caps > .ep-bubble[data-variant="caption"] { z-index: 2; }
.caps > .ep-bubble[data-shape="line"] { max-width: none; white-space: nowrap; }   /* captions(): one line above a high head */
.caps > .ep-bubble[data-shape="narrow"] { max-width: 7em; }                    /* or narrow, beside it */
.caps > .ep-bubble.is-laugh { --s: calc(var(--ep-bubble-scale) * .72); }   /* the laugh-track tag ("hahaha") */
.cc { position: absolute; left: 50%; bottom: 7%; translate: -50% 0; width: max-content; max-width: 84%; z-index: 2;
  background: rgb(0 0 0 / .86); color: #fff; padding: .2em .55em .25em;
  font: 600 clamp(9px, 1.9cqw, 24px)/1.32 var(--ep-font-mono); text-transform: uppercase; letter-spacing: .02em; text-align: center; }
.cc .off { visibility: hidden; }

/* ---- remote: a slim bar at the bottom of the room; hides itself while the show plays ---- */
.remote {
  position: fixed; z-index: 50; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); translate: -50% 0;
  transition: opacity .35s, translate .35s;
  display: flex; align-items: center; gap: 10px; width: min(calc(100% - 24px), 720px);
  padding: 8px 14px 8px 8px; border-radius: 16px;
  background: var(--ep-cream); color: var(--ep-ink); border: var(--ep-border-strong); box-shadow: 4px 4px 0 var(--ep-tomato);
}
.rb { all: unset; cursor: pointer; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fbf1dc, #d9c39b 60%, #a88a5a); color: #2b1d16;
  box-shadow: 0 3px 0 #0e0805, 0 4px 8px rgb(0 0 0 / .4); transition: transform .08s, box-shadow .08s; }
.rb:active { transform: translateY(2px); box-shadow: 0 1px 0 #0e0805; }
.rb:focus-visible, .scrub input:focus-visible { outline: 3px solid var(--ep-mustard); outline-offset: 3px; }
.rb svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.rb.back10 svg path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rb.back10 svg text { font: 700 7.5px var(--ep-font-ui); stroke: none; }
.rb.restart svg path { stroke-width: 2; stroke-linejoin: round; }
.rb.play { width: 50px; height: 50px; background: radial-gradient(circle at 38% 30%, #f07a6c, #b8302c 60%, #7e1716); color: #fff6ea; }
.rb.play svg { width: 24px; height: 24px; }
.rb.play .i-pause, .rb.play.playing .i-play { display: none; }
.rb.play.playing .i-pause { display: block; }
.scrub { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.scrub input { flex: 1; min-width: 60px; -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; }
.scrub input::-webkit-slider-runnable-track { height: 6px; border-radius: 9px;
  background: linear-gradient(90deg, #c8392f var(--p, 0%), #4a3529 var(--p, 0%)); box-shadow: inset 0 1px 2px #000; }
.scrub input::-moz-range-track { height: 6px; border-radius: 9px; background: #4a3529; }
.scrub input::-moz-range-progress { height: 6px; border-radius: 9px; background: #c8392f; }
.scrub input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff3d0, #e2b75a 55%, #8a6330); box-shadow: 0 2px 4px #000; }
.scrub input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #e2b75a; }
.time { flex: none; font: var(--ep-text-mono); font-variant-numeric: tabular-nums; color: var(--ep-ink); min-width: 7.6ch; text-align: right; }

/* ---- cast panel ---- */
.panel {
  position: fixed; z-index: 60; top: 0; right: 0; height: 100dvh; width: min(360px, 92vw); overflow-y: auto;
  color: var(--ep-ink); background: var(--ep-cream); 
  border-radius: 22px 0 0 22px; padding: 20px 18px 16px;
  box-shadow: -20px 0 50px -20px #000, 0 0 0 1px rgb(255 240 210 / .3);
  transform: translateX(105%); visibility: hidden; transition: transform .35s var(--ep-ease), visibility 0s .35s;
}
.panel.open { transform: none; visibility: visible; transition: transform .35s var(--ep-ease); }
.panel header { text-align: left; margin-bottom: 12px; }
.kicker { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ep-ink-2); }
.panel h1 { margin: 2px 0 0; font-family: var(--ep-font-display); font-weight: 800; font-size: 1.9rem; line-height: 1.05; color: var(--ep-tomato); }
.sub { margin: 4px 0 0; font-family: var(--ep-font-display); color: var(--ep-ink); }
.slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 12px 0 8px; }
.slot { display: grid; justify-items: center; gap: 2px; padding: 6px 2px 4px; border-radius: 10px; border: 1.5px dashed var(--ep-line-on-cream);
  font-size: 12px; color: var(--ep-ink-2); min-width: 0; }
.slot b { font-family: var(--ep-font-display); color: var(--ep-ink); font-size: 14px; }
.slot.full { border-style: solid; border-color: rgb(156 31 51 / .5); background: rgb(156 31 51 / .05); }
.slot canvas, .slot .blank { width: 32px; height: 32px; border-radius: 50%; background: var(--ep-cream-2); }
.slot span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hint { margin: 6px 0 12px; font-size: 12px; line-height: 1.4; color: var(--ep-ink-2); }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.pgroup { grid-column: 1 / -1; margin: 6px 0 -2px; font: var(--ep-text-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ep-ink-2); }
.pgroup:first-child { margin-top: 0; }
.pick { all: unset; cursor: pointer; position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: 14px;
  background: var(--ep-white); box-shadow: 0 2px 6px rgb(0 0 0 / .18); transition: transform var(--ep-dur-ui), box-shadow var(--ep-dur-ui); }
.pick:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgb(0 0 0 / .22); }
.pick:focus-visible { outline: 3px solid var(--ep-mustard); outline-offset: 2px; }
.pick canvas { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fdf7ea, #e8d6b2); }
.pick .nm { font-family: var(--ep-font-display); font-weight: 600; font-size: 15px; color: var(--ep-ink); }
.pick .badge { position: absolute; top: 4px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: none; place-items: center;
  font: 700 13px var(--ep-font-ui); background: var(--ep-tomato); color: var(--ep-white); box-shadow: 0 2px 4px rgb(0 0 0 / .3); }
.pick.on { box-shadow: 0 0 0 2.5px var(--ep-tomato), 0 6px 14px rgb(0 0 0 / .22); }
.pick.on .badge { display: grid; }
.keys { margin: 14px 0 0; font-size: 12px; color: var(--ep-ink-2); }
kbd { font: 600 11px var(--ep-font-ui); padding: 1px 5px; border-radius: 4px; background: var(--ep-cream-2); border: 1px solid var(--ep-line-on-cream); }
.loading { font-size: 14px; color: var(--ep-ink-2); }

.remote.idle { opacity: 0; translate: -50% 14px; pointer-events: none; }
.rb.cc { font: 700 13px var(--ep-font-ui); letter-spacing: .04em; }

/* ---- cast: a pill with the picked faces opens the drawer ---- */
.castbtn { all: unset; cursor: pointer; position: fixed; z-index: 55; top: 12px; right: 14px; display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px; border-radius: 999px; background: rgb(28 18 13 / .78); color: #f6e4c2;
  box-shadow: inset 0 0 0 1.5px rgb(201 154 85 / .45), 0 6px 18px -6px #000; font: 700 14px var(--ep-font-ui); letter-spacing: .02em;
  backdrop-filter: blur(4px); transition: opacity .35s; }
.castbtn:focus-visible { outline: 3px solid var(--ep-mustard); outline-offset: 3px; }
.castbtn .faces { display: flex; }
.castbtn canvas { width: 28px; height: 28px; border-radius: 50%; background: #e8d6b2; box-shadow: 0 0 0 2px #1c120d; }
.castbtn canvas + canvas { margin-left: -8px; }
.castbtn.idle { opacity: .35; }
.panel .close { all: unset; cursor: pointer; position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font: 700 20px/1 var(--ep-font-ui); color: var(--ep-ink-2); background: var(--ep-cream-2); }
.panel .close:focus-visible { outline: 3px solid var(--ep-mustard); }
.rb.cc[aria-pressed="true"] { background: radial-gradient(circle at 38% 30%, #3a3a3a, #111 70%); color: #fff; }


/* ---- responsive ---- */
@media (max-width: 700px) {
  .room { place-items: center; padding: 52px 6px 92px; }
  .panel { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto; max-height: 80dvh; border-radius: 22px 22px 0 0;
    transform: translateY(105%); box-shadow: 0 -20px 50px -20px #000; }
  .remote.idle { opacity: 1; translate: -50% 0; pointer-events: auto; }   /* phones: keep the controls (no hover) */
}
@media (max-width: 520px) {
  .remote { gap: 6px; padding: 8px 10px; }
  .rb { width: 34px; height: 34px; }
  .rb.play { width: 42px; height: 42px; }
  .time { font-size: 12px; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .wall-lights { animation: none; } }

/* ---- embedded (StorycardTV.mount in a page that is not the demo room): the remote sits under the set ---- */
.sctv { position: relative; min-width: 0; }
.sctv:not(.room .sctv) { display: flex; flex-direction: column; align-items: center; width: 100%; font-family: var(--ep-font-ui); color: var(--ep-cream); }
.sctv:not(.room .sctv) .remote { position: relative; left: auto; bottom: auto; translate: none; margin: 14px auto 0; }
.sctv:not(.room .sctv) .remote.idle { opacity: 1; translate: none; pointer-events: auto; }
.sctv-nocontrols .remote { display: none; }
.sctv-nocontrols :is(.lamp, .epwin, .knob, .readout) { pointer-events: none; }

/* ---- in the web app (?embed=1): the page draws the player; the set stands on the page's own background ---- */
.sctv-noremote .remote { display: none; }
html.embed, html.embed body { background: transparent; overflow: hidden; }
html.embed .room { min-height: 100dvh; padding: 0; background: none; place-items: start center; }
html.embed .wall-lights, html.embed .castbtn, html.embed .panel { display: none; }
html.embed .tv-wrap { width: 100%; }