@font-face {
  font-family: 'Bedstead';
  src: url('../fonts/bedstead.woff2') format('woff2');
  font-display: block;
}

:root {
  --wall-1: #2a1d15;
  --wall-2: #3a271b;
  --wall-ink: rgba(255, 196, 120, 0.05);
  --plastic-1: #34343a;
  --plastic-2: #1d1d21;
  --plastic-3: #121214;
  --rubber-1: #e3dfd6;
  --rubber-2: #a7a39a;
  --rubber-ink: #2a2a2a;
  --ttx-red: #ff2b1f;
  --ttx-green: #22ff3d;
  --ttx-yellow: #fff23d;
  --ttx-blue: #2f45ff;
  --ttx-cyan: #2af4ff;
  --glow: rgba(90, 130, 255, 0.0);
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--wall-1);
  color: #d9cbb8;
  font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.noscript { margin: 0; padding: 14px 16px; text-align: center; font: 15px / 1.5 Bedstead, monospace; color: #f0dcc3; background: #1d1612; }

/* ------------------------------------------------------------------ room */
.room {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  padding: clamp(110px, 17vh, 170px) 24px 20px;
  position: relative;
  isolation: isolate;
  /* 70s/80s Spanish living-room wallpaper (ogee lattice with flowers), lit by a warm lamp from the left */
  background:
    radial-gradient(ellipse 55% 45% at 12% 0%, rgba(255, 196, 130, 0.20), transparent 70%),
    radial-gradient(ellipse 130% 95% at 50% 38%, transparent 52%, rgba(10, 5, 2, 0.55)),
    linear-gradient(180deg, rgba(0, 0, 0, .12), transparent 30%),
    url('../img/wallpaper.svg') 50% 0 / 96px 128px,
    var(--wall-1);
}
/* wood panelling on the lower wall ("el friso"), with its moulding */
.friso {
  position: absolute; left: 0; right: 0; bottom: 22vh; height: clamp(110px, 21vh, 240px);
  z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 22%, transparent 80%, rgba(0,0,0,.25)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.42) 0 2px, rgba(255,220,170,.05) 2px 3px, transparent 3px 74px),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,0,0,.05) 9px 10px, transparent 10px 17px, rgba(255,255,255,.02) 17px 18px, transparent 18px 31px),
    linear-gradient(180deg, #5c3820, #4a2b17 60%, #3b2212);
  box-shadow: 0 -10px 24px rgba(0,0,0,.35);
}
.friso::before {   /* the moulding along the top */
  content: ''; position: absolute; left: 0; right: 0; top: -9px; height: 11px;
  background: linear-gradient(180deg, #7a4d2b, #9b6a3f 30%, #5a3519 70%, #2e1a0c);
  box-shadow: 0 3px 6px rgba(0,0,0,.45);
}

/* ------------------------------------------------------------------ on the wall */
.wall-clock, .wall-cal {
  position: absolute; z-index: 0; border: 0; padding: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wall-clock {
  top: clamp(18px, 4.5vh, 60px); left: max(18px, calc(50% - 690px));
  width: clamp(96px, 9.5vw, 150px); aspect-ratio: 1;
  filter: drop-shadow(6px 9px 7px rgba(0,0,0,.55));
  transition: transform .3s;
}
.wall-clock .face, .wall-clock svg { display: block; width: 100%; height: 100%; }
.wall-clock:hover, .wall-clock:focus-visible { transform: rotate(-3deg) scale(1.03); outline: none; }
.wall-cal {
  top: clamp(26px, 6vh, 80px); right: max(18px, calc(50% - 700px));
  width: clamp(84px, 7.2vw, 112px);
  display: flex; flex-direction: column; text-align: center; color: #1b1b1b;
  font-family: var(--sans);
  filter: drop-shadow(5px 8px 6px rgba(0,0,0,.5));
  transform: rotate(1.6deg); transform-origin: 50% -12px;
  transition: transform .35s;
}
.wall-cal::before {   /* the nail it hangs from */
  content: ''; position: absolute; left: 50%; top: -14px; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ddd, #555 60%, #222);
}
.wall-cal:hover, .wall-cal:focus-visible { transform: rotate(-1deg); outline: none; }
.cal-ad {
  display: flex; flex-direction: column; gap: 1px; padding: 7px 5px 6px;
  background: linear-gradient(180deg, #c8251c, #9d1913); color: #ffe9b0; border-radius: 3px 3px 0 0;
  box-shadow: inset 0 0 0 2px rgba(255, 233, 176, .35);
}
.cal-ad small { font-size: 8px; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.cal-ad b { font: 900 clamp(11px, 1.05vw, 15px) / 1.05 Georgia, 'Times New Roman', serif; letter-spacing: .02em; }
.cal-ad i { font-size: 7px; font-style: normal; opacity: .8; line-height: 1.25; }
.cal-pad {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 4px 4px 7px; background: #f6f1e4; border-radius: 0 0 2px 2px;
  box-shadow: 0 2px 0 #e3dccb, 0 4px 0 #d8d0bd, 0 6px 0 #c9c0ab, 0 7px 2px rgba(0,0,0,.4);
}
.cal-month { font-size: 8px; font-weight: 800; letter-spacing: .12em; color: #b3201a; text-transform: uppercase; }
.cal-day { font: 900 clamp(34px, 3.6vw, 52px) / .95 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.03em; margin: 2px 0 1px; }
.cal-day.red { color: #c3221b; }
.cal-wd { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cal-saint { font: italic 8px / 1.2 Georgia, serif; color: #555; margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-cal.tear .cal-pad::after {   /* tearing off yesterday's page */
  content: ''; position: absolute; inset: 0; background: #f6f1e4; border-radius: 2px;
  transform-origin: 50% 0; animation: tear .6s cubic-bezier(.4,.1,.6,1) forwards;
}
@keyframes tear { 0% { transform: none; opacity: 1; } 100% { transform: translate(18px, -26px) rotate(-38deg) rotateX(70deg); opacity: 0; } }
@media (max-width: 1100px), (max-height: 720px) { .wall-clock, .wall-cal { display: none; } }
/* CRT light spilling onto the wall when the TV is on */
.room::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 45% at 42% 45%, rgba(110, 140, 255, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 1.2s ease;
  animation: ambient 7s ease-in-out infinite;
}
body.on .room::before { opacity: 1; }
@keyframes ambient { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(40deg); } }
/* sideboard / table top */
.room::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22vh;
  z-index: -1;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 9px, rgba(255,255,255,.025) 9px 10px, transparent 10px 23px),
    linear-gradient(180deg, #5a3820, #3f2615 30%, #2b190d);
  box-shadow: 0 -2px 0 #6e4528, 0 -30px 60px rgba(0,0,0,.35);
}

.stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(24px, 4vw, 64px);
  width: 100%;
  max-width: 1320px;
}

/* ------------------------------------------------------------------ TV */
.tv-unit { position: relative; flex: 0 1 clamp(440px, calc((100vh - 300px) * 1.3), 900px); min-width: 0; }
.tv {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 18%),
    linear-gradient(180deg, var(--plastic-1), var(--plastic-2) 60%, var(--plastic-3));
  border-radius: 34px 34px 26px 26px;
  padding: clamp(14px, 2.6vw, 34px) clamp(14px, 2.6vw, 34px) 0;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.12),
    inset 0 -3px 0 rgba(0,0,0,.5),
    inset 3px 0 6px rgba(255,255,255,.04),
    0 30px 60px -10px rgba(0,0,0,.7),
    0 8px 18px rgba(0,0,0,.5);
  z-index: 2;
}
.bezel {
  background: linear-gradient(180deg, #0c0c0e, #050506);
  border-radius: 28px;
  padding: clamp(8px, 1.4vw, 16px);
  box-shadow: inset 0 0 0 2px #000, inset 0 6px 14px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.08);
}
.screen {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 24px / 30px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #0d0f0e, #030303 75%);
  box-shadow: inset 0 0 40px rgba(0,0,0,.9);
  contain: layout paint;
}
.tube, .tube canvas, .fx, .standby { position: absolute; inset: 0; }
.tube { transform-origin: 50% 50%; }
.tube canvas { width: 100%; height: 100%; display: block; }
/* teletext sits inside the "safe area" of the tube, like on a real set */
.tube #ttx, .tube #glow { inset: 4.2% 5.2% 4.6%; width: auto; height: auto; width: calc(100% - 10.4%); height: calc(100% - 8.8%); }
#tvpic { opacity: 0; transition: opacity .3s; }
#ttx { image-rendering: auto; filter: saturate(1.08) contrast(1.04); }
#glow {
  filter: blur(9px) saturate(1.6) brightness(1.15);
  mix-blend-mode: screen;
  opacity: .55;
  pointer-events: none;
  transform: scale(1.01);
}
.fx { pointer-events: none; }
.scan {
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 1px, rgba(0,0,0,.30) 1px 3px);
  mix-blend-mode: multiply;
}
.flicker { background: rgba(255,255,255,.012); animation: flicker 0.12s steps(2) infinite; }
@keyframes flicker { 50% { opacity: .2; } }
.vignette {
  background:
    radial-gradient(ellipse 75% 70% at 50% 50%, transparent 62%, rgba(0,0,0,.55) 100%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 70%, rgba(0,0,0,.6));
}
.glass {
  background:
    radial-gradient(ellipse 60% 35% at 30% 12%, rgba(255,255,255,.075), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.05), transparent 35%, transparent 75%, rgba(255,255,255,.025));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 0 80px rgba(0,0,0,.35);
  border-radius: inherit;
}

/* states */
.screen.off .tube { opacity: 0; }
.screen .standby {
  display: grid; place-items: end center; padding-bottom: 9%;
  font: 600 clamp(11px, 1.4vw, 15px) / 1 var(--sans);
  letter-spacing: .12em; text-transform: uppercase; color: rgba(210, 225, 215, .28);
  opacity: 0; transition: opacity .4s;
}
.screen.off .standby { opacity: 1; animation: breathe 3.5s ease-in-out infinite; }
.screen .standby b { color: rgba(255, 90, 70, .6); font-weight: 600; }
@keyframes breathe { 50% { opacity: .45; } }
body:not(.ready) .standby { visibility: hidden; }
/* the standby text sits over the tube: it must never catch taps meant for the screen */
.screen .standby { pointer-events: none; }

.screen.powering-on .tube { animation: crt-on 1.15s cubic-bezier(.2,.7,.2,1) both; }
@keyframes crt-on {
  0% { transform: scale(0.0, 0.004); filter: brightness(10); opacity: 1; }
  12% { transform: scale(1, 0.004); filter: brightness(8); }
  38% { transform: scale(1, 0.006); filter: brightness(5); }
  62% { transform: scale(1, 1.04); filter: brightness(2.2) blur(.6px); }
  80% { transform: scale(1, .99); filter: brightness(1.2); }
  100% { transform: none; filter: none; }
}
.screen.powering-off .tube { animation: crt-off .52s cubic-bezier(.6,0,.9,.4) both; }
@keyframes crt-off {
  0% { transform: none; filter: none; }
  45% { transform: scale(1, 0.005); filter: brightness(6); }
  80% { transform: scale(0.04, 0.005); filter: brightness(10); }
  100% { transform: scale(0, 0); filter: brightness(10); opacity: 0; }
}
.screen.mix #tvpic, .screen.tvmode #tvpic { opacity: 1; }
/* channels with film: the video sits where the painted picture does */
.tube #tvvid {
  position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain;
  opacity: 0; transition: opacity .25s; pointer-events: none;
  filter: contrast(1.12) saturate(1.25) brightness(1.05) blur(calc(.35px + (1 - var(--signal, 1)) * 2.4px));
}
.screen.vid.mix #tvvid, .screen.vid.tvmode #tvvid { opacity: 1; }
.screen.tuning #tvvid { opacity: 0 !important; transition: none; }
/* reception: --signal (0..1) comes from the antenna; bad signal = snow and a soft, ghosty picture */
.tube .signal {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background-size: 256px 192px; image-rendering: pixelated; mix-blend-mode: screen;
}
/* only animate the snow when it can be seen (weak signal, picture on screen) */
.screen.tvmode.weak .signal, .screen.mix.weak .signal { animation: snowshift .12s steps(4) infinite; }
.screen.tvmode .signal, .screen.mix .signal { opacity: calc((1 - var(--signal, 1)) * .85); }
.screen.tvmode #tvpic, .screen.mix #tvpic { filter: blur(calc((1 - var(--signal, 1)) * 2.4px)); }
@keyframes snowshift { 0% { background-position: 0 0; } 25% { background-position: -64px 32px; } 50% { background-position: 48px -40px; } 75% { background-position: -20px 70px; } }
.osd small { display: block; margin-top: .3em; font-size: .38em; text-align: right; letter-spacing: .04em; }
.tvcredit {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); width: max-content; max-width: 86%;
  text-align: center; pointer-events: none; padding: .3em .6em .2em;
  font: clamp(10px, 1.5vw, 16px) / 1.3 Bedstead, monospace; color: #fff; background: #000;
  opacity: 0; transition: opacity .4s;
}
.tvcredit.show { opacity: .9; }
.screen:not(.tvmode) .tvcredit { display: none; }
.screen.tvmode:not(.cap) #ttx, .screen.tvmode #glow { opacity: 0; }

.osd {
  position: absolute; top: 7%; right: 7%;
  font: clamp(18px, 3.4vw, 40px) / 1 Bedstead, monospace;
  color: #3cff5a; text-shadow: 0 0 6px rgba(60,255,90,.7), 2px 2px 0 #000;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.osd.show { opacity: 1; }

.prompt {
  position: absolute; left: 5%; right: 5%; bottom: 10%;
  display: flex; align-items: center; gap: .6em;
  padding: .55em .8em;
  background: var(--ttx-blue);
  font: clamp(14px, 2.2vw, 24px) / 1 Bedstead, monospace;
  color: var(--ttx-yellow);
  box-shadow: 0 0 0 3px #000, 0 0 24px rgba(47,69,255,.6);
  z-index: 3;
}
.prompt[hidden] { display: none; }
.prompt label { white-space: nowrap; }
.prompt input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  font: inherit; color: #fff; caret-color: var(--ttx-yellow);
  text-transform: none;
}
.prompt button {
  background: var(--ttx-yellow); color: #000; border: 0; padding: .25em .6em; cursor: pointer;
  font: inherit;
}

/* TV front panel */
.tv-front {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: clamp(10px, 1.6vw, 18px) 6px clamp(12px, 1.8vw, 22px);
}
.badges { display: flex; flex-direction: column; gap: 4px; }
.brand {
  font: 800 clamp(13px, 1.7vw, 19px) / 1 var(--sans);
  letter-spacing: .32em;
  background: linear-gradient(180deg, #f5f5f5, #9a9a9a 55%, #e6e6e6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.8));
}
.model { font: 600 clamp(8px, .9vw, 10px) / 1 var(--sans); letter-spacing: .14em; color: #8a8a90; text-transform: uppercase; }
.model i { font-style: normal; color: #b9b9be; border: 1px solid #55555c; border-radius: 3px; padding: 1px 4px; }
.grille {
  height: clamp(14px, 2vw, 24px);
  background: radial-gradient(circle, #050506 0 1.2px, transparent 1.6px) 0 0 / 6px 6px;
  border-radius: 6px;
  opacity: .9;
}
.front-ctl { display: flex; align-items: center; gap: 14px; }
.led {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff2a1a; box-shadow: 0 0 6px 1px rgba(255,40,20,.8);
  transition: background .3s, box-shadow .3s;
}
body.on .led { background: #36ff5b; box-shadow: 0 0 6px 1px rgba(50,255,90,.8); }
.tv-power {
  width: clamp(28px, 3vw, 38px); height: clamp(20px, 2.2vw, 26px);
  border-radius: 6px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #4a4a52, #26262b);
  color: #c9c9cf; font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 0 #000;
}
.tv-power:active, .tv-power.pressed { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.tv-feet { display: flex; justify-content: space-between; padding: 0 18%; margin-top: -2px; position: relative; z-index: 1; }
.tv-feet span { width: 70px; height: 9px; background: linear-gradient(180deg, #1b1b1e, #0b0b0c); border-radius: 0 0 6px 6px; }
.doily {
  position: absolute; left: 50%; bottom: -46px; width: 84%; aspect-ratio: 1;
  transform: translate(-50%, 0) perspective(600px) rotateX(78deg);
  transform-origin: 50% 100%;
  z-index: 0; pointer-events: none;
  background: url('../img/doily.svg') center / contain no-repeat;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.4));
  opacity: .9;
}

/* the doll every Spanish TV had on top */
.flamenca {
  position: absolute; right: 9%; bottom: 100%; width: clamp(54px, 6.4vw, 78px);
  margin-bottom: -3px; filter: drop-shadow(6px 4px 4px rgba(0,0,0,.45));
  transform-origin: 50% 100%; cursor: pointer; z-index: 1;
}
.flamenca:hover, .flamenca.dance { animation: ole .9s ease-in-out; }
@keyframes ole { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-7deg); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-4deg); } }

/* ------------------------------------------------------------------ remote */
.remote {
  flex: 0 0 auto;
  width: 214px;
  padding: 22px 18px 26px;
  border-radius: 46px 46px 64px 64px / 40px 40px 90px 90px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), transparent 22%, transparent 78%, rgba(0,0,0,.25)),
    linear-gradient(180deg, #3d3d44, #26262b 45%, #1d1d21);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.12),
    inset 0 -4px 10px rgba(0,0,0,.5),
    0 40px 50px -16px rgba(0,0,0,.8),
    0 6px 12px rgba(0,0,0,.5);
  transform: rotate(-5deg) translateY(10px);
  display: flex; flex-direction: column; gap: 14px;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  margin-bottom: -4vh;
  z-index: 3;
}
.r-head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
.ir { width: 30px; height: 10px; border-radius: 6px; background: linear-gradient(180deg, #3a0d0d, #160404); box-shadow: inset 0 1px 2px rgba(255,255,255,.15); transition: background .05s; }
.remote.tx .ir { background: linear-gradient(180deg, #ff5a3a, #a01408); box-shadow: 0 0 10px 2px rgba(255, 60, 30, .55), inset 0 1px 2px rgba(255,255,255,.3); }
.remote.dead .rb, .remote.dead .dp { filter: brightness(.82) saturate(.7); }
.remote.smack { animation: smack .26s cubic-bezier(.3,.7,.4,1); }
@keyframes smack { 0% { translate: 0 0; rotate: 0deg; } 30% { translate: -4px 3px; rotate: -3deg; } 65% { translate: 2px -1px; rotate: 1.5deg; } 100% { translate: 0 0; rotate: 0deg; } }
.rb {
  position: relative;
  border: 0; cursor: pointer;
  height: 34px;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 30%, var(--rubber-1), var(--rubber-2));
  color: var(--rubber-ink);
  font: 700 15px / 1 var(--sans);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.7), 0 2px 0 #0d0d0f, 0 3px 6px rgba(0,0,0,.5);
  transition: transform .06s, box-shadow .06s, filter .06s;
}
.rb:hover { filter: brightness(1.05); }
.rb:active, .rb.pressed { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 #0d0d0f, 0 1px 2px rgba(0,0,0,.5); filter: brightness(.92); }
.rb:focus-visible, .dp:focus-visible, .tv-power:focus-visible { outline: 2px solid var(--ttx-yellow); outline-offset: 2px; }
.rb.sm { height: 24px; font-size: 10px; letter-spacing: .08em; border-radius: 8px; }
.rb.fn { background: radial-gradient(ellipse at 50% 30%, #8d8d96, #5d5d66); color: #f2f2f2; }
.rb.power { width: 38px; height: 30px; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #ff6b55, #c51d10); color: #fff; font-size: 14px; }
#k-sound.off { color: #999; text-decoration: line-through; }
.r-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.r-main { display: flex; flex-direction: column; gap: 16px; }
.r-digits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 10px; }
.r-dpad {
  position: relative; width: 150px; height: 150px; margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle, #2c2c31 0 40%, #1a1a1d 41% 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.08);
}
.dp {
  position: absolute; border: 0; cursor: pointer;
  background: radial-gradient(ellipse at 50% 30%, #6a6a73, #43434a);
  color: #eee; font: 700 12px / 1 var(--sans);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 #0b0b0d;
  transition: transform .06s;
}
.dp:active, .dp.pressed { transform: translateY(2px); filter: brightness(.9); }
.dp.up, .dp.down { left: 50%; width: 52px; height: 40px; margin-left: -26px; border-radius: 14px 14px 8px 8px; }
.dp.up { top: 6px; }
.dp.down { bottom: 6px; border-radius: 8px 8px 14px 14px; }
.dp.down:active, .dp.down.pressed { transform: translateY(2px); }
.dp.left, .dp.right { top: 50%; width: 40px; height: 52px; margin-top: -26px; font-size: 13px; }
.dp.left { left: 6px; border-radius: 14px 8px 8px 14px; }
.dp.right { right: 6px; border-radius: 8px 14px 14px 8px; }
.dp.ok { left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, var(--rubber-1), var(--rubber-2)); color: var(--rubber-ink); }
.r-colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rb.c { height: 20px; border-radius: 7px; }
.rb.c.red { background: radial-gradient(ellipse at 50% 30%, #ff5a4a, #c4180c); }
.rb.c.green { background: radial-gradient(ellipse at 50% 30%, #54e86b, #11962c); }
.rb.c.yellow { background: radial-gradient(ellipse at 50% 30%, #fff07a, #d8b40c); }
.rb.c.blue { background: radial-gradient(ellipse at 50% 30%, #66d4ff, #1287c4); }
.r-ttx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rb.rec { color: #b3201a; font-weight: 700; }
.rb.hint { animation: keyhint 1.4s ease-in-out infinite; }
@keyframes keyhint { 50% { box-shadow: 0 0 0 2px var(--ttx-yellow), 0 0 14px 3px rgba(255, 242, 61, .55); } }
.rb.rec::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: #e2261b; vertical-align: 1px; }
.rb.rec.busy::before { animation: recblink .5s steps(2) infinite; }
@keyframes recblink { 50% { opacity: 0; } }
.r-brand {
  margin-top: 6px; text-align: center;
  font: 800 12px / 1 var(--sans); letter-spacing: .34em; color: #b8b8bf;
  display: flex; flex-direction: column; gap: 4px;
}
.r-brand small { font-size: 8px; letter-spacing: .3em; color: #77777f; font-weight: 600; }

/* ------------------------------------------------------------------ footer */
.help {
  margin-top: clamp(36px, 7vh, 72px);
  text-align: center;
  font-size: 12px;
  color: rgba(240, 220, 195, .55);
  max-width: 980px;
  position: relative;
}
.help p { margin: 6px 0; line-height: 1.6; }
.help kbd {
  font: 11px / 1 Bedstead, monospace;
  display: inline-block; padding: 3px 5px 2px; margin: 0 1px;
  border-radius: 4px; background: rgba(0,0,0,.35); color: var(--ttx-yellow);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}
.help .credits { font-size: 11px; color: rgba(240, 220, 195, .38); }
.help .share-row { margin: 0 0 14px; }
.share {
  font: 15px / 1 Bedstead, monospace; letter-spacing: .04em;
  padding: 9px 16px 8px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--ttx-blue, #2f45ff); color: var(--ttx-yellow, #fff23d);
  box-shadow: 0 0 0 2px #000, 0 6px 18px -4px rgba(47, 69, 255, .55);
  transition: transform .12s, box-shadow .2s;
}
.share b { color: #fff; font-weight: normal; margin-left: .35em; }
.share:hover, .share:focus-visible { transform: translateY(-1px); box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--ttx-yellow, #fff23d), 0 8px 22px -4px rgba(47, 69, 255, .7); outline: none; }
.share:active { transform: translateY(1px); }
.share-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; }
/* CAST · CAT: two piano keys like the ones on the front of an old set; the one pressed in is lit */
.langsw { display: inline-flex; padding: 3px; gap: 3px; border-radius: 4px; background: #0d0a08; box-shadow: 0 0 0 2px #000, inset 0 1px 0 rgba(255, 255, 255, .06); }
.langsw button {
  font: 13px / 1 Bedstead, monospace; letter-spacing: .08em; cursor: pointer;
  padding: 8px 10px 7px; border: 0; border-radius: 2px;
  background: linear-gradient(#3a332d, #26201c); color: rgba(240, 220, 195, .55);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .1s, color .2s, background .2s;
}
.langsw button[aria-pressed="true"] {
  transform: translateY(1px); color: #000; background: var(--ttx-yellow, #fff23d);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35), 0 0 12px -2px rgba(255, 242, 61, .55);
}
.langsw button:hover:not([aria-pressed="true"]), .langsw button:focus-visible { color: #fff; outline: none; }
.langsw button:focus-visible { box-shadow: 0 0 0 2px var(--ttx-yellow, #fff23d); }
.help .made { font-size: 12.5px; letter-spacing: .02em; color: rgba(240, 220, 195, .62); }
.help .made a {
  color: var(--ttx-yellow); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid rgba(255, 242, 61, .35); transition: border-color .2s, color .2s;
}
.help .made a:hover, .help .made a:focus-visible { color: #fff; border-color: #fff; outline: none; }

/* ------------------------------------------------------------------ physical gags */
/* static on the glass: sparks are drawn on their own canvas above the tube */
#spark { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; mix-blend-mode: screen; }
#ttx { touch-action: pan-y; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.screen { -webkit-user-select: none; user-select: none; }
.screen.zapped .tube { animation: zapflash .2s ease-out; }
@keyframes zapflash { 0% { filter: brightness(1.9) saturate(.7); } 100% { filter: none; } }
/* a slap on the cabinet: the set rocks, the picture jumps, the doll wobbles */
.tv.slapped { animation: slap .32s cubic-bezier(.3,.7,.4,1); }
@keyframes slap {
  0% { transform: none; } 18% { transform: translate(-5px, 1px) rotate(-.7deg); }
  42% { transform: translate(3px, 0) rotate(.45deg); } 68% { transform: translate(-1.5px, 0) rotate(-.15deg); } 100% { transform: none; }
}
.screen.jolt .tube { animation: jolt .3s steps(6); }
@keyframes jolt {
  0% { transform: translateY(-3%) scaleY(1.03); filter: brightness(1.3); }
  40% { transform: translateY(1.5%) skewX(1.5deg); } 70% { transform: translateY(-.6%); } 100% { transform: none; filter: none; }
}
.flamenca.wobble { animation: wobble .9s cubic-bezier(.3,.6,.4,1); }
@keyframes wobble {
  0% { transform: none; } 12% { transform: translateY(-14px) rotate(-14deg); } 30% { transform: translateY(0) rotate(10deg); }
  48% { transform: rotate(-7deg); } 66% { transform: rotate(4deg); } 84% { transform: rotate(-2deg); } 100% { transform: none; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .remote { transform: rotate(-3deg); width: 196px; padding: 18px 14px 22px; }
  .r-dpad { width: 136px; height: 136px; }
}
@media (max-width: 900px) {
  .room { justify-content: flex-start; padding: 120px 14px 18px; }
  .room::after { height: 30vh; }
  .stage { flex-direction: column; align-items: center; gap: 34px; }
  .tv-unit { width: 100%; flex: none; }
  .remote {
    transform: none; margin: 0; width: min(100%, 560px);
    border-radius: 34px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "head modes" "main main" "colors colors" "ttx ttx" "brand brand";
    gap: 14px 16px;
    padding: 18px;
  }
  .r-head { grid-area: head; }
  .r-modes { grid-area: modes; }
  .r-main { grid-area: main; flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; }
  .r-digits { flex: 1; max-width: 260px; }
  .r-colors { grid-area: colors; }
  .rb.c { height: 30px; }
  .r-ttx { grid-area: ttx; }
  .r-brand { grid-area: brand; flex-direction: row; justify-content: center; align-items: baseline; gap: 10px; margin: 0; }
  .help .keys { display: none; }
}
@media (max-width: 600px) {
  .room { padding: 10px 8px 14px; }
  .tv { border-radius: 20px; padding: 8px 8px 0; }
  .bezel { border-radius: 16px; padding: 6px; }
  .screen { aspect-ratio: 24 / 25; border-radius: 12px / 14px; }   /* native 40x25 cells: much more legible on phones */
  .tube #ttx, .tube #glow { inset: 2.5% 2.6%; width: calc(100% - 5.2%); height: calc(100% - 5%); }
  .tv-front { padding: 8px 4px 10px; gap: 10px; }
  .model { display: none; }
  .tv-feet, .doily, .flamenca { display: none; }
  .remote { gap: 12px; padding: 14px 14px 16px; border-radius: 26px; }
  .r-main { gap: 12px; }
  .rb { height: 40px; font-size: 17px; }
  .rb.sm { height: 30px; font-size: 11px; }
  .r-dpad { width: 144px; height: 144px; flex: none; }
  .r-brand { display: none; }
  .help { margin-top: 18px; }
}
@media (max-width: 360px) {
  .r-dpad { width: 124px; height: 124px; }
  .dp.up, .dp.down { width: 44px; margin-left: -22px; height: 34px; }
  .dp.left, .dp.right { width: 34px; height: 44px; margin-top: -22px; }
  .dp.ok { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}
@media (prefers-reduced-motion: reduce) {
  .flicker, .room::before, .screen.off .standby { animation: none; }
  .tv.slapped, .screen.jolt .tube, .flamenca.wobble { animation-duration: .01s; }
  .screen.powering-on .tube, .screen.powering-off .tube { animation-duration: .01s; }
}

/* ------------------------------------------------------------------ QA fixes */
.share { max-width: 100%; overflow-wrap: anywhere; }
/* short laptop windows: the remote shrinks with the height instead of running off the bottom */
@media (min-width: 901px) and (max-height: 800px) { .remote { scale: .88; transform-origin: 50% 100%; } }
@media (min-width: 901px) and (max-height: 720px) { .remote { scale: .78; } }
@media (min-width: 901px) and (max-height: 640px) { .remote { scale: .68; } }
.help .visitas { font: 13px / 1.4 Bedstead, monospace; color: rgba(240, 220, 195, .7); }
.help .visitas b { color: #000; background: var(--ttx-yellow); padding: 1px 5px; letter-spacing: .12em; font-weight: normal; }
/* AV input: a home VHS tape — softer, washed colours and the head-switching noise band at the bottom */
.screen.vhs.tvmode #tvvid { filter: contrast(1.04) saturate(.8) sepia(.08) blur(.7px); }
.screen.vhs.tvmode .signal {
  opacity: .45; animation: snowshift .12s steps(4) infinite;
  -webkit-mask-image: linear-gradient(to top, #000 0 6%, transparent 9%); mask-image: linear-gradient(to top, #000 0 6%, transparent 9%);
}