:root {
  --bg: #fff6e0;
  --tv: #ff6b6b;
  --tv-dark: #d94a4a;
  --ink: #2b2140;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vh, 32px);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

/* Title: every letter its own font */
h1 {
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: clamp(28px, 8vw, 76px);
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
}
h1 span {
  display: inline-block;
  font-size: calc(1em * var(--z, 1));
  margin: 0 .01em;
  transform: translateY(var(--y, 0)) rotate(var(--r));
  color: var(--c);
  /* sticker look: white outline behind the fill, a colour echo, then a chunky ink shadow */
  -webkit-text-stroke: .1em #fff;
  paint-order: stroke fill;
  text-shadow: .06em .06em 0 var(--e), .1em .12em 0 var(--ink);
}
h1 span:nth-child(1) { font-family: 'Titan One', cursive;   --c: #ff4d6d; --e: #ffb703; --r: -12deg; --z: 1.25; --y: .02em; }
h1 span:nth-child(2) { font-family: 'Pacifico', cursive;    --c: #ffb703; --e: #ff4d6d; --r: 10deg;  --z: 1.45; --y: -.06em; }
h1 span:nth-child(3) { font-family: 'Chewy', cursive;       --c: #2ec4b6; --e: #8d5cf6; --r: -8deg;  --z: 1.05; --y: .08em; }
h1 span:nth-child(4) { font-family: 'Shrikhand', cursive;   --c: #8d5cf6; --e: #2ec4b6; --r: 12deg;  --z: 1.3;  --y: -.03em; }
h1 span:nth-child(5) { font-family: 'Titan One', cursive;   --c: #ff6fb5; --e: #3a86ff; --r: 0deg;   --z: 1.2;  --y: .06em; }
h1 span:nth-child(6) { font-family: 'Lobster', cursive;     --c: #3a86ff; --e: #ff6fb5; --r: 9deg;   --z: 1.4;  --y: -.05em; }
h1 span:nth-child(7) { font-family: 'Bowlby One', cursive;  --c: #fb8500; --e: #ffd166; --r: -14deg; --z: 1.1;  --y: .04em; }

/* TV: chunky retro wood-cabinet set */
.tv {
  --wood: #e8913a;
  --wood-dark: #c4701f;
  position: relative;
  width: min(92vw, 1100px, calc((100vh - 310px) * 1.6));
  min-width: 260px;
  margin-top: 110px;
  transform: rotate(-1deg);
}

/* rabbit-ear antenna on a little dome */
.antenna {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
}
.antenna::before {               /* dome base */
  content: '';
  position: absolute;
  left: -34px; top: -14px;
  width: 68px; height: 28px;
  background: #2ec4b6;
  border: 5px solid var(--ink);
  border-radius: 34px 34px 0 0;
}
.antenna b {                     /* the two ears */
  position: absolute;
  bottom: 12px;
  width: 5px; height: 58px;
  background: var(--ink);
  border-radius: 3px;
  transform-origin: bottom center;
}
.antenna b:nth-child(1) { left: -2px; transform: rotate(-34deg); animation: ear-sway-1 4.6s ease-in-out infinite alternate; }
.antenna b:nth-child(2) { left: -2px; transform: rotate(30deg);  animation: ear-sway-2 5.3s ease-in-out infinite alternate; }
.antenna.zap b:nth-child(1) { animation: ear-zap-1 .7s ease-out; }
.antenna.zap b:nth-child(2) { animation: ear-zap-2 .7s ease-out; }
@keyframes ear-sway-1 { from { transform: rotate(-37deg); } to { transform: rotate(-31deg); } }
@keyframes ear-sway-2 { from { transform: rotate(27deg); }  to { transform: rotate(33deg); } }
@keyframes ear-zap-1 {
  0%   { transform: rotate(-34deg); }
  20%  { transform: rotate(-47deg); }
  45%  { transform: rotate(-26deg); }
  70%  { transform: rotate(-38deg); }
  100% { transform: rotate(-34deg); }
}
@keyframes ear-zap-2 {
  0%   { transform: rotate(30deg); }
  20%  { transform: rotate(43deg); }
  45%  { transform: rotate(22deg); }
  70%  { transform: rotate(34deg); }
  100% { transform: rotate(30deg); }
}
.antenna b::after {              /* tip balls */
  content: '';
  position: absolute;
  top: -9px; left: -6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #ff4d6d;
  border: 3px solid var(--ink);
  animation: tip-pulse 2.4s ease-in-out infinite;
}
@keyframes tip-pulse {
  0%, 100% { transform: scale(1); background: #ff4d6d; }
  50%      { transform: scale(1.18); background: #ff7a93; }
}

/* wood-grain cabinet */
.body {
  position: relative;
  display: flex;
  gap: 3%;
  padding: 5% 4% 5% 5%;
  background:
    repeating-linear-gradient(90deg, rgba(120,60,10,.18) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(90deg, rgba(255,220,160,.18) 0 3px, transparent 3px 17px),
    linear-gradient(180deg, #f3a850, var(--wood) 55%, var(--wood-dark));
  border: 6px solid var(--ink);
  border-radius: 7% / 10%;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.25), 9px 10px 0 var(--ink);
}

/* cream bezel around the curved glass */
.bezel {
  flex: 1;
  align-self: center;
  padding: 3.5%;
  background: #fff1cf;
  border: 5px solid var(--ink);
  border-radius: 11% / 15%;
  box-shadow: inset 4px 4px 0 rgba(0,0,0,.18), inset -3px -3px 0 #fff;
}
.screen {
  position: relative;
  /* 16:9 via padding rather than aspect-ratio: Firefox mis-sizes the picture layer inside aspect-ratio boxes */
  height: 0;
  padding-bottom: 56.25%;
  isolation: isolate;
  background: #000;
  border: 5px solid var(--ink);
  border-radius: 12% / 18%;
  overflow: hidden;
  box-shadow: inset 0 0 28px rgba(0,0,0,.7);
}
/* One layer that exactly covers the screen; everything inside is sized relative to it */
.layer {
  position: absolute;
  inset: 0;
}

/* The <video> only decodes and plays sound; its picture is drawn onto #picture instead.
   (Browsers can mis-draw a video layer under clips, rotation and scaling; a canvas can't.) */
.screen video {
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 2px;
  opacity: 0;
  pointer-events: none;
}
#picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
/* TV static between channels */
#static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .35s ease-out;
  image-rendering: pixelated;
  pointer-events: none;
}
.screen.snow #static {
  opacity: .8;
  transition: none;
  animation: tv-flicker .5s ease-in-out infinite alternate;
}
@keyframes tv-flicker {
  from { filter: brightness(.9) contrast(.85); }
  to   { filter: brightness(1) contrast(.95); }
}
/* rolling "vertical hold" bar */
.roll {
  position: absolute;
  left: 0; right: 0;
  height: 32%;
  top: -40%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.1) 45%, rgba(255,255,255,.16) 52%, rgba(0,0,0,.08) 70%, transparent);
}
.screen.snow .roll {
  opacity: 1;
  animation: tv-roll 1.6s linear infinite;
}
@keyframes tv-roll {
  from { top: -40%; }
  to   { top: 110%; }
}

/* scanlines, vignette and glass shine */
.screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 32%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);
}

/* control panel */
.panel {
  width: 17%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6%;
  padding: 3% 0;
}
.dial {
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-conic-gradient(var(--ink) 0 4deg, transparent 4deg 30deg) content-box,
    #fff1cf;
  border: 4px solid var(--ink);
  padding: 7%;
  position: relative;
  box-shadow: 3px 4px 0 var(--ink);
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dial:hover { filter: brightness(1.06); }
.dial:focus-visible { outline: 4px dashed #fff; outline-offset: 3px; }
/* the part you twist */
.cap {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: rotate(var(--twist, 0deg));
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.cap::before {                   /* chunky knob */
  content: '';
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: var(--k, #ff4d6d);
  border: 4px solid var(--ink);
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.2);
}
.cap::after {                    /* pointer */
  content: '';
  position: absolute;
  left: 50%; top: 22%;
  width: 9%; height: 26%;
  margin-left: -4.5%;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 3px;
  transform-origin: 50% 90%;
  transform: rotate(var(--a, 25deg));
}
.dial { --a: 60deg; }   /* pointer start angles; script.js reads these for the peppa combo */
.dial.b { --k: #3a86ff; --a: -120deg; }
.speaker {
  width: 82%;
  flex: 1;
  min-height: 24px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 9px), #7a3f0e;
  border: 4px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px #7a3f0e;
}

.legs {
  display: flex;
  justify-content: space-between;
  padding: 0 12%;
  margin-top: -2px;
}
.legs i {
  width: 7%;
  height: 44px;
  background: #7a3f0e;
  border: 4px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  transform: skewX(var(--s));
}
.legs i:first-child { --s: 16deg; }
.legs i:last-child  { --s: -16deg; }

@media (max-width: 420px) {
  .body { border-width: 4px; padding: 4%; box-shadow: inset 0 0 0 4px rgba(255,255,255,.25), 6px 7px 0 var(--ink); }
  .bezel { border-width: 4px; }
  .screen { border-width: 4px; }
  .dial { border-width: 3px; }
  .legs i { height: 32px; }
}

/* Firefox draws clipped content inside a rotated, rounded box in the wrong place; keep the TV straight there */
@supports (-moz-appearance: none) {
  .tv { transform: none; }
}

/* Power LED: steady glow while a picture is playing, fast blink while tuning */
.led {
  width: clamp(8px, 1.6vw, 12px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff4d6d;
  border: 3px solid var(--ink);
  box-shadow: 0 0 8px 2px rgba(255, 77, 109, .7);
  animation: led-breathe 3s ease-in-out infinite;
}
@keyframes led-breathe {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(255, 77, 109, .55); }
  50%      { box-shadow: 0 0 11px 3px rgba(255, 77, 109, .85); }
}
.tuning .led { animation: led-blink .3s steps(2) infinite; }
@keyframes led-blink {
  from { background: #ff4d6d; box-shadow: 0 0 10px 3px rgba(255, 77, 109, .9); }
  to   { background: #7a2338; box-shadow: none; }
}

/* speaker grille buzzes a little while tuning */
.tuning .speaker { animation: buzz .09s steps(2) infinite; }
@keyframes buzz {
  from { transform: translateX(-.6px); }
  to   { transform: translateX(.6px); }
}

@media (prefers-reduced-motion: reduce) {
  .antenna b, .antenna b::after, .led, .tuning .led, .tuning .speaker { animation: none; }
}