/* RetroTV — a 1980s console set in a dark den */

:root {
  --room: #120d0a;
  --room-2: #1d1410;
  --wood-1: #5b3a21;
  --wood-2: #4a2e19;
  --wood-3: #6e4728;
  --bezel: #1b1b1b;
  --panel: #2a2622;
  --panel-edge: #171412;
  --btn: #3b3631;
  --btn-hi: #4d4640;
  --btn-text: #d9cfc0;
  --chrome: #b9b2a6;
  --osd: #3cff5a;
  --osd-shadow: rgba(0, 0, 0, .85);
  --guide-bg: #1a1f8f;
  --guide-row: #20279e;
  --guide-cell: #2833b3;
  --guide-line: #0d1160;
  --guide-text: #f4f1d0;
  --guide-yellow: #ffe14a;
  --guide-sel: #c2187a;
  --font-osd: "VT323", ui-monospace, Menlo, Consolas, monospace;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 170, 90, .10), transparent 60%),
    repeating-linear-gradient(90deg, var(--room) 0 46px, var(--room-2) 46px 48px);
  background-color: var(--room);
  color: var(--btn-text);
  font-family: var(--font-ui);
  overflow-x: hidden;
}

.room {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  gap: 16px;
}

/* ---------- cabinet ---------- */

.tv { width: min(1080px, 100%); }

.cabinet {
  display: grid;
  grid-template-columns: 1fr 168px;
  gap: 18px;
  padding: 22px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.10) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, rgba(255,255,255,.04) 0 1px, transparent 1px 23px),
    linear-gradient(180deg, var(--wood-3), var(--wood-1) 40%, var(--wood-2));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.12),
    inset 0 -3px 0 rgba(0,0,0,.35),
    0 30px 60px rgba(0,0,0,.6);
}

.bezel {
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(160deg, #2a2a2a, var(--bezel) 50%, #0e0e0e);
  box-shadow: inset 0 0 0 2px #000, inset 0 4px 12px rgba(0,0,0,.8);
}

/* ---------- screen ---------- */

.screen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 7% / 9%;
  background: #050605;
  box-shadow: inset 0 0 60px rgba(0,0,0,.9);
  isolation: isolate;
}

.screen video,
.screen .testcard {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  filter: saturate(1.15) contrast(1.05) brightness(1.03);
}

/* Pan and scan: the stream arrives 16:9 and the tube is 4:3, so trim the sides
   to fill the screen, the way old broadcasts showed widescreen films.
   4:3 shows arrive with side bars baked in, and this trims exactly those away. */
.screen video { object-fit: cover; }

/* Overscan: a real CRT drew the picture a little larger than the glass, hiding the
   ragged black edges every tape and broadcast had. Do the same here. Not in the
   guide's preview box or in full screen, where the whole frame is shown. */
.screen:not(.guide-on) video { transform: scale(1.1); }
.screen:fullscreen video { transform: none; }

.screen.off video,
.screen.off .testcard,
.screen.off .static,
.screen.off .guide,
.screen.off .osd,
.screen.off .banner { visibility: hidden; }

.screen .static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
  z-index: 3;
}
.screen .static.on { opacity: 1; }

.crt-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  animation: flicker 6s infinite steps(1);
}

.crt-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background:
    radial-gradient(ellipse at 30% 15%, rgba(255,255,255,.10), transparent 40%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
  box-shadow: inset 0 0 40px rgba(0,0,0,.7);
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  48% { opacity: .93; }
  52% { opacity: 1; }
}

/* power on / off */
.screen.powering-on > video,
.screen.powering-on > .testcard,
.screen.powering-on > .static { animation: crt-on .55s ease-out both; }
.screen.powering-off { animation: crt-off .45s ease-in both; }

@keyframes crt-on {
  0%   { transform: scale(1, .004); filter: brightness(6); }
  45%  { transform: scale(1, .004); filter: brightness(6); }
  70%  { transform: scale(1, 1.02); filter: brightness(2); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}
@keyframes crt-off {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(4); clip-path: inset(49.6% 0 49.6% 0); }
  100% { filter: brightness(4); clip-path: inset(49.6% 49.6% 49.6% 49.6%); }
}

.power-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-osd);
  font-size: clamp(18px, 3vw, 28px);
  letter-spacing: .2em;
  color: rgba(255,255,255,.22);
  z-index: 10;
  pointer-events: none;
}
.screen:not(.off) .power-hint { display: none; }

/* ---------- on-screen display ---------- */

.osd {
  position: absolute;
  font-family: var(--font-osd);
  color: var(--osd);
  text-shadow: 3px 3px 0 var(--osd-shadow), 0 0 8px rgba(60,255,90,.5);
  z-index: 6;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  white-space: nowrap;
}
.osd.show { opacity: 1; }

.osd-channel {
  top: 6%;
  right: 7%;
  font-size: clamp(34px, 7vw, 72px);
  line-height: 1;
}

.osd-volume {
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(18px, 3.2vw, 32px);
}

/* ---------- program banner ---------- */

.banner {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 6%;
  z-index: 6;
  padding: 10px 14px 12px;
  border: 2px solid rgba(255,255,255,.75);
  background: rgba(16, 20, 120, .88);
  color: var(--guide-text);
  font-family: var(--font-osd);
  font-size: clamp(15px, 2.4vw, 24px);
  line-height: 1.15;
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
}
.banner .b-head { display: flex; justify-content: space-between; gap: 12px; color: var(--guide-yellow); }
.banner .b-now { font-size: 1.15em; margin-top: 2px; }
.banner .b-next { opacity: .8; margin-top: 2px; }
.banner .b-bar { height: 6px; margin-top: 6px; background: rgba(255,255,255,.2); }
.banner .b-bar span { display: block; height: 100%; background: var(--guide-yellow); }
.banner .b-ellip, .banner .b-now, .banner .b-next { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- demo test card ---------- */

.testcard {
  display: grid;
  place-items: center;
  background:
    linear-gradient(90deg,
      #c0c0c0 0 14.28%, #c0c000 14.28% 28.57%, #00c0c0 28.57% 42.85%, #00c000 42.85% 57.14%,
      #c000c0 57.14% 71.42%, #c00000 71.42% 85.71%, #0000c0 85.71% 100%) !important;
}
.testcard { container-type: size; }
.testcard .tc-box {
  width: 78%;
  padding: 4% 5%;
  background: rgba(0,0,0,.82);
  border: 3px solid #fff;
  text-align: center;
  font-family: var(--font-osd);
  color: #fff;
  line-height: 1.1;
}
.tc-chan { color: var(--guide-yellow); font-size: 3.4cqw; letter-spacing: .08em; }
.tc-title { font-size: 6.4cqw; margin: 4px 0; }
.tc-sub { font-size: 3.4cqw; opacity: .85; }
.tc-time { font-size: 2.9cqw; margin-top: 8px; color: var(--osd); }
.tc-note { font-size: 2.3cqw; margin-top: 10px; opacity: .6; letter-spacing: .1em; }

/* ---------- guide ---------- */

.guide {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-rows: 42% 58%;
  background: var(--guide-bg);
  font-family: var(--font-osd);
  color: var(--guide-text);
}

.screen.guide-on video,
.screen.guide-on .testcard {
  inset: 3% auto auto 4%;
  width: 36%;   /* 4:3 like the tube itself */
  height: 36%;
  z-index: 6;
  border: 2px solid #fff;
}
.screen.guide-on .static { inset: 3% auto auto 4%; width: 36%; height: 36%; z-index: 7; }
.screen.guide-on .banner { display: none; }
.screen.guide-on .osd-channel { display: none; }

.g-top {
  position: relative;
  padding: 3% 4% 0 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.g-logo { font-size: clamp(22px, 4.2vw, 44px); color: var(--guide-yellow); letter-spacing: .06em; text-shadow: 3px 3px 0 #000; line-height: 1; }
.g-clock { font-size: clamp(20px, 3.6vw, 38px); text-shadow: 2px 2px 0 #000; }
.g-date { font-size: clamp(14px, 2vw, 21px); opacity: .85; }
.g-sel { font-size: clamp(13px, 1.9vw, 20px); margin-top: 6px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.g-grid {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  border-top: 3px solid #fff;
}
.g-head, .g-row {
  display: grid;
  grid-template-columns: 22% 1fr;
}
.g-head { background: var(--guide-line); color: var(--guide-yellow); font-size: clamp(13px, 2vw, 21px); }
.g-head .g-times { position: relative; height: 1.4em; }
.g-head .g-times span { position: absolute; top: 0; padding-left: 4px; border-left: 2px solid rgba(255,255,255,.4); }
.g-head .g-now { padding: 0 6px; }

.g-rows {
  overflow-y: auto;
  scrollbar-width: none;
  min-height: 0;
}
.g-rows::-webkit-scrollbar { display: none; }

.g-row {
  border-bottom: 2px solid var(--guide-line);
  font-size: clamp(13px, 1.9vw, 20px);
  cursor: pointer;
}
.g-row .g-ch {
  padding: 4px 6px;
  background: var(--guide-line);
  color: var(--guide-yellow);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.g-row .g-ch b { display: inline-block; min-width: 1.6em; color: #fff; font-weight: normal; }
.g-row .g-progs { position: relative; min-height: 2.1em; }
.g-row .g-prog {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 4px 6px;
  background: var(--guide-cell);
  border-right: 2px solid var(--guide-line);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.g-row .g-prog.cont::before { content: "◄ "; color: var(--guide-yellow); }
.g-row .g-prog.movie { color: #ffd2a8; }
.g-row.sel .g-ch, .g-row.sel .g-prog { background: var(--guide-sel); color: #fff; }
.g-row.current .g-ch b::after { content: "•"; color: var(--osd); margin-left: 2px; }

.g-empty { padding: 12px; opacity: .8; }

/* ---------- control panel ---------- */

.panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #33302c, var(--panel) 30%, #1f1c19);
  box-shadow: inset 0 0 0 2px var(--panel-edge), inset 0 2px 0 rgba(255,255,255,.08);
}

.brand {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .12em;
  color: var(--chrome);
  text-align: center;
  font-style: italic;
}
.brand span { color: #e2483d; }

.power-row { display: flex; align-items: center; gap: 10px; }
.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4a1512;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
  flex: none;
}
.led.on { background: #ff3b2f; box-shadow: 0 0 8px #ff3b2f, inset 0 -1px 2px rgba(0,0,0,.4); }

.btn, .key {
  appearance: none;
  border: 0;
  border-radius: 6px;
  padding: 9px 4px;
  font: 700 12px/1 var(--font-ui);
  letter-spacing: .06em;
  color: var(--btn-text);
  background: linear-gradient(180deg, var(--btn-hi), var(--btn));
  box-shadow: 0 3px 0 #111, inset 0 1px 0 rgba(255,255,255,.12);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
.btn:active, .key:active, .btn.pressed { transform: translateY(2px); box-shadow: 0 1px 0 #111, inset 0 1px 0 rgba(255,255,255,.08); }
.btn:focus-visible, .key:focus-visible { outline: 2px solid var(--osd); outline-offset: 2px; }

.btn-power { flex: 1; background: linear-gradient(180deg, #7a2a22, #5a1c16); color: #fff; }

.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.key { padding: 9px 0; font-size: 14px; }
.key-wide { font-size: 11px; }

.speaker {
  flex: 1;
  min-height: 60px;
  border-radius: 8px;
  background:
    radial-gradient(circle, #0c0b0a 1.6px, transparent 2px) 0 0 / 9px 9px,
    #26221f;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7);
}

.feet { display: flex; justify-content: space-between; padding: 0 10%; }
.feet span { width: 70px; height: 16px; background: linear-gradient(180deg, #2a1a0e, #140c06); border-radius: 0 0 6px 6px; }

.help {
  margin: 0;
  max-width: 1080px;
  text-align: center;
  font-size: 13px;
  line-height: 2;
  color: #8c7f70;
}
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 5px;
  margin: 0 1px;
  border-radius: 4px;
  border: 1px solid #4d4237;
  background: #241c16;
  color: #d9cfc0;
  font: 12px/1.6 var(--font-ui);
  text-align: center;
}

/* full screen: just the tube */
.screen:fullscreen { border-radius: 0; width: 100vw; height: 100vh; aspect-ratio: auto; background: #000; }
.screen:fullscreen video { object-fit: contain; }

/* ---------- small screens ---------- */

@media (max-width: 760px) {
  .room { padding: 16px; justify-content: flex-start; }
  .cabinet { grid-template-columns: 1fr; padding: 12px; gap: 12px; border-radius: 14px; }
  .bezel { padding: 10px; }
  .panel { padding: 12px; gap: 10px; }
  .brand { display: none; }
  .btn-grid { grid-template-columns: repeat(4, 1fr); }
  .keypad { grid-template-columns: repeat(6, 1fr); }
  .speaker, .feet { display: none; }
  .help { display: none; }
}