@font-face {
  font-family: "VT323";
  src: url("../fonts/vt323-latin.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Press Start 2P";
  src: url("../fonts/press-start-2p-latin.woff2") format("woff2");
  font-display: swap;
}

/* A 90s living room at night: striped wallpaper, a wooden stand, a black TV, and a blue on-screen display like a VCR menu. */
:root {
  color-scheme: dark;
  --wall: #2b3f4a;
  --wall-alt: #2f4651;
  --plastic: #2b2b33;
  --plastic-hi: #3d3d48;
  --plastic-lo: #1b1b21;
  --bezel: #101015;
  --osd: #1532c8;
  --osd-deep: #0b1a7a;
  --ink: #ffffff;
  --ink-dim: #b9c6ff;
  --cyan: #2ee6ff;
  --yellow: #ffe23d;
  --pink: #ff3fa4;
  --teal: #19d3b0;
  --purple: #8b5cff;
  --lime: #a8ff3e;
  --danger: #ff6b6b;
  --chin: 64px;
  --gutter: 24px;
  --pixel: "Press Start 2P", ui-monospace, monospace;
  font-family: "VT323", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 24px;
  line-height: 1.2;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }
html { overflow: hidden; }

body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--gutter) 16px;
  overflow: hidden;
  color: var(--ink);
  background: repeating-linear-gradient(90deg, var(--wall) 0 26px, var(--wall-alt) 26px 52px) var(--wall);
}

/* The room is dim and lit mostly by the screen: a blue glow around the TV and
   dark corners. Drawn over the wall and the stand, under the TV. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 50% 45%, rgba(60, 100, 255, 0.22), transparent 70%),
    radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0, 0, 0, 0.65) 100%);
}

/* The wooden stand the TV sits on, running off both edges of the window. */
.tv-stand {
  position: absolute;
  z-index: -1;
  top: calc(100% - 2px);
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, #6b4627 0 6px, #4a2e1a 6px 8px, transparent 8px),
    linear-gradient(180deg, #3b2416, #24150c 60%);
  box-shadow: 0 -2px 0 rgba(255, 255, 255, 0.05);
}

a { color: inherit; }
p { margin: 0; }

button, input {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

[hidden] { display: none !important; }

kbd {
  display: inline-block;
  padding: 0 6px;
  margin-right: 2px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--osd-deep);
  font-family: inherit;
  line-height: 1.1;
  text-shadow: none;
}

.error { color: var(--danger); }
.error:empty { display: none; }

/* The television: a black early-90s set with speaker grilles either side of
   the tube and a control strip under it. Sized from the viewport and drawn the
   same in every view, so moving between the menu and a game never shifts it. */

.tv {
  --spk: 54px;
  --gap: 14px;
  --frame: 18px;
  --side: 20px;
  position: relative;
  width: min(100%, 1040px, calc((100svh - var(--gutter) * 2 - var(--chin) - var(--side) - var(--frame) * 2 - 14px) * 4 / 3 + var(--frame) * 2 + var(--spk) * 2 + var(--gap) * 2 + var(--side) * 2));
  padding: var(--side) var(--side) 0;
  border-radius: 26px 26px 16px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 6%),
    linear-gradient(180deg, #2c2b2a, #1f1e1d 45%, #161515);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -4px 0 rgba(0, 0, 0, 0.5),
    0 30px 60px rgba(0, 0, 0, 0.55),
    0 8px 0 #0d0c0c;
}

/* The plinth the set stands on. */
.tv::after {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: -14px;
  height: 14px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #121111, #1c1b1a);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.tv-face {
  display: grid;
  grid-template-columns: var(--spk) 1fr var(--spk);
  gap: var(--gap);
}

.tv-speaker {
  border-radius: 14px;
  background:
    radial-gradient(circle, #0a0a0a 1.1px, transparent 1.7px) 0 0 / 5px 5px,
    linear-gradient(90deg, #1a1919, #2a2928 50%, #1a1919);
  box-shadow: inset 0 0 0 2px #121111, inset 0 3px 8px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* The stepped bezel around the tube. */
.tv-frame {
  padding: var(--frame);
  border-radius: 12px;
  background: linear-gradient(180deg, #252423, #191818);
  box-shadow:
    inset 0 0 0 2px #2f2e2d,
    inset 0 0 0 6px #161515,
    inset 0 4px 10px rgba(0, 0, 0, 0.6);
}

.tv-screen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 18px / 24px;
  background: radial-gradient(ellipse at 50% 40%, var(--osd) 0%, var(--osd-deep) 100%);
  box-shadow: 0 0 0 3px #050505;
  isolation: isolate;
}

body[data-view="game"] .tv-screen { background: #000; }

/* Scanlines, the glare on the glass and the dark curve of the tube. */
.tv-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(100deg, transparent 0 78%, rgba(255, 255, 255, 0.07) 82%, rgba(255, 255, 255, 0.12) 88%, transparent 92%),
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.18) 2px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.6);
}

.tv-screen:fullscreen { border-radius: 0; aspect-ratio: auto; box-shadow: none; background: #000; }

.tv-chin {
  height: var(--chin);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 calc(var(--spk) * 0.5);
}

.tv-brand,
.tv-model {
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8d8a86;
  text-shadow: 0 1px 0 #000;
}

.tv-model { justify-self: end; color: #5f5c58; }

/* The moulded control strip: AV jacks, buttons, power. */
.tv-panel {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 7px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #131212, #232221);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tv-jacks { display: flex; gap: 6px; }

.tv-jacks i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #050505 0 30%, var(--jack) 34% 62%, #3a3836 66%);
  --jack: var(--yellow);
}

.tv-jacks i:nth-child(2) { --jack: #f2f2f2; }
.tv-jacks i:nth-child(3) { --jack: #ff4b3e; }

.tv-buttons { display: flex; align-items: center; gap: 8px; }

.knob {
  min-width: 58px;
  padding: 6px 9px 5px;
  border-radius: 7px;
  background: linear-gradient(180deg, #3b3a38, #262524);
  box-shadow: 0 2px 0 #0a0a0a, inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #cfcac3;
  font-family: var(--pixel);
  font-size: 8px;
  text-transform: uppercase;
  transition: transform 0.06s, box-shadow 0.06s, color 0.1s;
}

.knob:hover { color: var(--yellow); }
.knob:active,
.knob[aria-expanded="true"] { transform: translateY(1px); box-shadow: 0 1px 0 #0a0a0a; color: var(--yellow); }
.knob[data-phase="live"] { color: var(--lime); }

.tv-power { display: flex; align-items: center; gap: 8px; }

.tv-power i {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(180deg, #3b3a38, #1d1c1b);
  box-shadow: 0 2px 0 #0a0a0a, inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.tv-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 6px var(--lime);
}

/* Views. Both fill the screen; only one is shown. */

.view { position: absolute; inset: 0; }

.osd {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 7% 8%;
  overflow: hidden;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
  z-index: 10;
}

.logo {
  margin: 0;
  font-family: var(--pixel);
  font-size: clamp(22px, 4.4vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 var(--osd-deep);
}

.osd-label {
  font-family: var(--pixel);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--cyan);
  letter-spacing: 0.08em;
}

.osd-title {
  font-family: var(--pixel);
  font-size: clamp(14px, 2.2vw, 22px);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--yellow);
}

.osd-dim { color: var(--ink-dim); }

.osd-link {
  justify-self: start;
  align-self: flex-start;
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.osd-link:hover { color: var(--yellow); }

/* Menu: channels in a list, the selected one on a yellow bar. */

.menu {
  list-style: none;
  margin: 0;
  padding: 0 4px 0 0;
  display: grid;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cyan) transparent;
}

.menu-item {
  display: grid;
  grid-template-columns: 2.4ch 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 1px 10px;
  text-decoration: none;
  text-transform: uppercase;
}

.menu-channel { color: var(--cyan); }
.menu-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-meta { display: flex; align-items: center; gap: 8px; color: var(--ink-dim); white-space: nowrap; }

.menu-item:hover { background: rgba(255, 255, 255, 0.1); }

.menu-item:focus {
  outline: none;
  background: var(--yellow);
  color: var(--osd-deep);
  text-shadow: none;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
}

.menu-item:focus .menu-channel,
.menu-item:focus .menu-meta { color: var(--osd-deep); }

.menu-empty { color: var(--ink-dim); }

.chip {
  padding: 0 6px;
  border-radius: 3px;
  background: var(--purple);
  color: #fff;
  font-size: 0.8em;
  text-shadow: none;
}

.chip[data-system="nes"] { background: var(--pink); }
.chip[data-system="gba"] { background: var(--teal); color: #08202a; }
.chip[data-system="psx"] { background: var(--purple); }

.hint { margin-top: auto; color: var(--ink-dim); font-size: 20px; }

.pin-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

.pin-form label { color: var(--cyan); text-transform: uppercase; }

.pin-form input {
  width: 8ch;
  padding: 0 6px;
  border: 0;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
  letter-spacing: 0.3em;
}

.pin-form input:focus { outline: 2px solid var(--yellow); }
.pin-form input::placeholder { color: rgba(255, 255, 255, 0.3); }

.pin-form button {
  padding: 0 10px;
  border-radius: 3px;
  background: var(--pink);
  color: #fff;
  text-transform: uppercase;
}

.pin-form .error { flex-basis: 100%; }

/* Game view */

.stage #game { position: absolute; inset: 0; z-index: 1; }

#remote-video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* The channel banner, green like a 90s TV's OSD, fades after a few seconds. */
.banner {
  position: absolute;
  top: 6%;
  right: 7%;
  z-index: 25;
  font-family: var(--pixel);
  font-size: clamp(10px, 1.6vw, 16px);
  line-height: 1.6;
  text-align: right;
  text-transform: uppercase;
  color: var(--lime);
  text-shadow: 2px 2px 0 #000;
  pointer-events: none;
  transition: opacity 0.6s;
}

.banner span { display: block; }
#game-channel { font-size: 1.6em; }
#game-system { color: var(--cyan); }
.banner.is-gone { opacity: 0; }

.loader {
  position: absolute;
  inset: 0;
  justify-content: center;
  z-index: 15;
  background: radial-gradient(ellipse at 50% 40%, var(--osd) 0%, var(--osd-deep) 100%);
}

.loader .osd-title::after { content: "_"; animation: blink 1s steps(1) infinite; }

.loader-art { margin-top: 8px; min-height: 0; }
.loader-art .pad { max-width: 520px; margin: 0; }

.bar {
  --progress: 0%;
  width: 100%;
  height: 22px;
  border: 3px solid var(--ink);
  padding: 3px;
  background:
    repeating-linear-gradient(90deg, var(--yellow) 0 12px, transparent 12px 16px) left / var(--progress) 100% no-repeat content-box,
    rgba(0, 0, 0, 0.3);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
}

.screen-button {
  position: absolute;
  inset: 0;
  z-index: 16;
  width: 100%;
  font-family: var(--pixel);
  font-size: 18px;
  text-transform: uppercase;
  color: var(--yellow);
  background: rgba(11, 26, 122, 0.75);
}

/* Panels drawn over the picture: Keys and Invite. */

.osd-panel {
  position: absolute;
  inset: 6% 7%;
  z-index: 26;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px;
  overflow: auto;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: rgba(11, 26, 122, 0.94);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

.osd-panel > div { display: grid; gap: 8px; }

.pin {
  font-family: var(--pixel);
  font-size: clamp(28px, 5vw, 52px);
  letter-spacing: 0.2em;
  line-height: 1.2;
  color: var(--ink);
  text-shadow: 4px 4px 0 var(--pink);
}

details summary { cursor: pointer; color: var(--cyan); text-transform: uppercase; font-size: 20px; }
details p { margin-top: 4px; font-size: 20px; }

/* Controller diagram, white line art on blue. */

.pad { display: block; width: 100%; max-width: 680px; margin: 0 auto; font-family: inherit; }
.pad-body { fill: rgba(0, 0, 0, 0.18); stroke: var(--ink); stroke-width: 2.5; }
.pad-part { fill: var(--osd-deep); stroke: var(--ink-dim); stroke-width: 2; }
.pad-off { opacity: 0.3; }
.pad-symbol { fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; }
.pad-label { fill: var(--ink-dim); font-size: 18px; }
.pad-small { font-size: 16px; }
.pad-key { fill: var(--yellow); }
.pad-key-text { fill: var(--osd-deep); font-size: 18px; }

/* Player 2 bar on the picture */

.guest-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 24;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 7% 14px;
  background: linear-gradient(transparent, rgba(11, 26, 122, 0.9));
  text-transform: uppercase;
  font-size: 20px;
  transition: opacity 0.2s;
}

.guest-bar.is-hidden { opacity: 0; pointer-events: none; }
.guest-bar-spacer { flex: 1; }
.guest-bar-button:hover, .text-button:hover { color: var(--yellow); }
.text-button { text-transform: uppercase; }
.guest-volume { display: flex; align-items: center; gap: 10px; }

.guest-volume input[type="range"] {
  --value: 100%;
  width: 90px;
  height: 6px;
  appearance: none;
  background: linear-gradient(90deg, var(--yellow) var(--value), rgba(255, 255, 255, 0.25) var(--value));
}

.guest-volume input[type="range"]::-webkit-slider-thumb { appearance: none; width: 10px; height: 16px; background: var(--ink); }
.guest-volume input[type="range"]::-moz-range-thumb { width: 10px; height: 16px; border: 0; border-radius: 0; background: var(--ink); }

.guest-settings {
  position: absolute;
  inset: 0;
  z-index: 27;
  overflow: auto;
  padding: 7% 8%;
  background: rgba(11, 26, 122, 0.97);
}

.guest-settings-card { display: grid; gap: 12px; }
.guest-settings-card h2 { margin: 0; font-family: var(--pixel); font-size: 18px; font-weight: 400; text-transform: uppercase; color: var(--yellow); }
.guest-settings-card p { color: var(--ink-dim); font-size: 20px; }
.guest-settings-rows { display: grid; gap: 2px; font-size: 20px; }
.guest-bind-row { display: grid; grid-template-columns: 1fr 8ch 12ch; gap: 12px; align-items: center; }
.guest-bind-row button { text-align: left; color: var(--ink-dim); }
.guest-bind-row button:hover { color: var(--yellow); }
.guest-settings-actions { display: flex; gap: 22px; }
.is-listening { color: var(--yellow) !important; animation: blink 0.8s steps(1) infinite; }

@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 700px) {
  :root { --chin: 56px; --gutter: 14px; font-size: 19px; }
  body { padding: var(--gutter) 10px; }
  .tv { --spk: 12px; --gap: 6px; --frame: 7px; --side: 10px; border-radius: 16px 16px 10px 10px; }
  .tv-speaker { border-radius: 6px; }
  .tv-screen { border-radius: 10px / 13px; }
  .tv-chin { grid-template-columns: 1fr; justify-items: center; padding: 0; }
  .tv-brand, .tv-model, .tv-jacks { display: none; }
  .tv-panel { gap: 10px; padding: 6px 10px; }
  .tv-buttons { gap: 6px; }
  .knob { min-width: 0; padding: 7px 8px 6px; }
  .osd { padding: 6% 6%; gap: 6px; }
  .osd-label { font-size: 8px; }
  .menu-item { gap: 8px; padding: 0 6px; }
  .menu-meta { font-size: 16px; }
  .hint { display: none; }
  .osd-panel { inset: 3% 4%; padding: 10px 12px; gap: 6px; }
  .loader-art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}