/* ==========================================================================
   SILLYSPHERE ARCADE — LOW-POLY 3D DESIGN SYSTEM
   ========================================================================== */

/* Design Tokens */
:root {
  --lp-dark-void:    #06020e;
  --lp-deep-indigo:  #100c28;
  --lp-navy:         #14103a;
  --lp-violet-dark:  #1c1250;
  --lp-violet-mid:   #261a60;
  --lp-violet:       #3a2480;
  --lp-purple:       #5c3490;
  --lp-magenta:      #c4246c;
  --lp-pink:         #ff2a7a;
  --lp-cyan-deep:    #004870;
  --lp-cyan-mid:     #006aaa;
  --lp-cyan:         #00b8d4;
  --lp-teal:         #00e4c8;
  --lp-gold:         #ffb800;
  --lp-white:        #f0ecfc;
  --lp-grey:         #8890a8;
  --lp-phosphor:     #22ff88;

  /* Flat-shaded panel faces */
  --panel-top:    #2a1e52;
  --panel-front:  #1e1440;
  --panel-side:   #120c2a;
  --panel-accent: #5a2a80;
  --bezel-top:    #3c2860;
  --bezel-front:  #2a1a48;
  --bezel-side:   #180e30;
  --wood-top:     #6b3010;
  --wood-front:   #4a2008;
  --wood-side:    #2e1204;

  --font-arcade: 'Press Start 2P', monospace;
  --font-ui: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --transition-fast: 0.15s;
  --transition-mid:  0.3s;
  --transition-slow: 0.5s;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  background: var(--lp-dark-void);
  color: var(--lp-white);
  font-family: var(--font-ui);
  line-height: 1.5;
  overflow-x: hidden;
}

body {
  min-block-size: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ── BACKGROUND CANVAS ─────────────────────────────────────────────────────── */
#starfield {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

/* ── TV SET ────────────────────────────────────────────────────────────────── */
.tv-set {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  z-index: 10;
  overflow: hidden;
}

.tv-antenna { display: none; }

/* ── TV BODY ───────────────────────────────────────────────────────────────── */
.tv-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: var(--panel-front);
}

/* Top lit-face strip */
.tv-body::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg,
    var(--panel-top) 0%, var(--panel-accent) 40%,
    var(--panel-top) 70%, var(--panel-side) 100%);
  z-index: 100;
}

/* Bottom shadow strip */
.tv-body::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 5px;
  background: var(--panel-side);
  z-index: 100;
}

/* ── SCREEN BEZEL ──────────────────────────────────────────────────────────── */
.tv-screen-frame {
  flex: 1;
  padding: 28px 28px 28px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background:
    linear-gradient(135deg, var(--bezel-top) 0%, var(--bezel-top) 50%, transparent 50%) 0 0 / 48px 48px no-repeat,
    linear-gradient(315deg, var(--bezel-side) 0%, var(--bezel-side) 60%, transparent 60%) 100% 100% / 48px 48px no-repeat,
    var(--bezel-front);
  box-shadow: inset -8px 0 24px rgba(0,0,0,0.6);
}

/* Top-right lit corner triangle */
.tv-screen-frame::before {
  content: '';
  position: absolute;
  top: 0; right: 200px;
  width: 0; height: 0;
  border-top: 48px solid var(--bezel-top);
  border-left: 48px solid transparent;
  opacity: 0.6;
  pointer-events: none;
}

/* Bottom-left shadow corner triangle */
.tv-screen-frame::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 0;
  border-bottom: 36px solid var(--bezel-side);
  border-right: 36px solid transparent;
  opacity: 0.9;
  pointer-events: none;
}

/* ── CRT SCREEN ────────────────────────────────────────────────────────────── */
.tv-screen {
  position: relative;
  background-color: #050308;
  clip-path: polygon(5% 0%, 95% 0%, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0% 95%, 0% 5%);
  overflow: hidden;
  border: 0;
  outline: 8px solid #0a0714;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,0.95),
    0 0 32px rgba(0,180,210,0.1),
    0 0 8px rgba(0,0,0,0.8);
  cursor: pointer;
  aspect-ratio: 4 / 3;
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: 100%;
  block-size: auto;
  transition: box-shadow 0.25s ease;
}

.tv-screen:hover {
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.9),
    0 0 40px rgba(0,200,220,0.2),
    0 0 12px rgba(0,0,0,0.8);
}

/* CRT scanlines */
.tv-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px
  );
  z-index: 10;
  pointer-events: none;
}

/* Vignette */
.tv-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.65) 100%);
  z-index: 11;
  pointer-events: none;
}

/* Static canvas */
.tv-static {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s ease;
}
.tv-static.active { opacity: 1; }

/* ── GAME MENU GRID ────────────────────────────────────────────────────────── */
.tv-menu-container {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 48px 24px 80px;
  box-sizing: border-box;
  width: 100%; height: 100%;
}

/* Game card — low-poly faceted panel */
.game-card-retro {
  flex: 1;
  max-width: 175px;
  display: flex;
  flex-direction: column;
  background: var(--lp-deep-indigo);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.25,0.8,0.25,1), filter 0.22s ease;
  position: relative;
  cursor: pointer;
  box-shadow:
    inset 2px 2px 0 var(--lp-violet),
    inset -2px -2px 0 var(--lp-dark-void),
    0 4px 16px rgba(0,0,0,0.7);
}

/* Top-right corner lit triangle */
.game-card-retro::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-top: 16px solid var(--lp-violet);
  border-left: 16px solid transparent;
  z-index: 20;
}

/* Bottom-left corner shadow triangle */
.game-card-retro::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 0;
  border-bottom: 16px solid var(--lp-dark-void);
  border-right: 16px solid transparent;
  z-index: 20;
}

.game-card-retro:hover {
  transform: translateY(-8px) skewX(-1deg);
  filter: brightness(1.2);
  box-shadow:
    inset 2px 2px 0 var(--lp-cyan),
    inset -2px -2px 0 var(--lp-dark-void),
    0 12px 32px rgba(0,200,220,0.3),
    0 0 20px rgba(0,200,220,0.15);
}

.card-screen-mini {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: #000;
  overflow: hidden;
  border-bottom: 2px solid var(--lp-violet-dark);
}

.card-thumbnail-mini {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.game-card-retro:hover .card-thumbnail-mini { transform: scale(1.08); }

.card-overlay-mini {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 2;
}

.game-card-retro:hover .card-overlay-mini { opacity: 1; }

.play-prompt {
  font-family: var(--font-arcade);
  font-size: 0.45rem;
  color: var(--lp-cyan);
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  background: rgba(0,200,220,0.1);
  padding: 5px 10px 5px 12px;
  box-shadow: 0 0 10px rgba(0,200,220,0.3);
  animation: pulse-slow 1s infinite alternate;
  letter-spacing: 0.05rem;
}

@keyframes pulse-slow {
  0%   { opacity: 0.7; }
  100% { opacity: 1; box-shadow: 0 0 18px rgba(0,200,220,0.5); }
}

.card-info-mini {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  flex-grow: 1;
  justify-content: center;
}

.card-title-mini {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--lp-white);
  letter-spacing: 0.04rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease;
}

.game-card-retro:hover .card-title-mini { color: var(--lp-cyan); }

.card-genre-mini {
  font-family: var(--font-arcade);
  font-size: 0.38rem;
  color: var(--lp-grey);
  letter-spacing: 0.02rem;
}

/* ── OSD PAGINATION ────────────────────────────────────────────────────────── */
.tv-osd-pagination {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--font-arcade);
  font-size: 0.55rem;
  color: var(--lp-phosphor);
  text-shadow: 0 0 6px rgba(34,255,136,0.6);
  z-index: 15;
  padding: 3px 8px;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  background: rgba(0,0,0,0.55);
  pointer-events: none;
  letter-spacing: 0.06rem;
}

/* ── NO SIGNAL ─────────────────────────────────────────────────────────────── */
.tv-nosignal {
  position: absolute;
  inset: 0;
  background: #0004aa;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--font-arcade);
  text-align: center;
  gap: 24px;
  z-index: 6;
}

.tv-nosignal-title {
  font-size: 1.5rem;
  background: #fff;
  color: #0004aa;
  padding: 8px 24px;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.tv-nosignal-text {
  font-size: 0.65rem;
  line-height: 2;
  color: #ccddff;
  letter-spacing: 0.05rem;
  padding-inline: 40px;
}

/* ── CHANNEL NUMBER ────────────────────────────────────────────────────────── */
.tv-channel-number {
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--font-arcade);
  font-size: 0.85rem;
  color: var(--lp-phosphor);
  text-shadow: 0 0 8px rgba(34,255,136,0.6);
  z-index: 15;
  padding: 4px 10px;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  background: rgba(0,0,0,0.55);
  opacity: 1;
  transition: opacity 0.5s ease 3s;
  pointer-events: none;
}

.tv-channel-number.flash { animation: channel-flash 0.15s ease 3; }

@keyframes channel-flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

/* ── INFO BANNER ───────────────────────────────────────────────────────────── */
.tv-info-banner {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  z-index: 14;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.25,0.8,0.25,1);
  pointer-events: none;
}

.tv-info-banner.visible {
  transform: translateY(0);
  pointer-events: auto;
}

.info-banner-inner {
  background: linear-gradient(
    to top,
    rgba(6,2,14,0.95) 0%,
    rgba(12,8,28,0.85) 70%,
    transparent 100%
  );
  padding: 2.5rem 1.5rem 1.25rem;
  position: relative;
}

/* Angled top-left cut on banner */
.info-banner-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-bottom: 24px solid rgba(6,2,14,0.95);
  border-right: 32px solid transparent;
}

.info-genre {
  font-family: var(--font-arcade);
  font-size: 0.48rem;
  color: var(--lp-gold);
  letter-spacing: 0.1rem;
  text-shadow: 0 0 4px rgba(255,184,0,0.5);
  display: block;
  margin-bottom: 0.4rem;
}

.info-title {
  font-family: var(--font-ui);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--lp-white);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04rem;
}

.info-desc {
  font-size: 0.85rem;
  color: var(--lp-grey);
  line-height: 1.5;
  margin-bottom: 1rem;
  max-width: 480px;
}

.info-play-btn {
  display: inline-block;
  background: rgba(0,180,210,0.12);
  border: none;
  color: var(--lp-cyan);
  font-family: var(--font-arcade);
  font-size: 0.6rem;
  padding: 0.6rem 1.6rem 0.6rem 1.2rem;
  cursor: pointer;
  transition: all var(--transition-mid) ease;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
  box-shadow: 0 0 12px rgba(0,180,210,0.2);
  pointer-events: auto;
  outline: none;
  letter-spacing: 0.06rem;
}

.info-play-btn:hover {
  background: rgba(0,200,230,0.25);
  color: var(--lp-teal);
  box-shadow: 0 0 24px rgba(0,200,220,0.4);
}

/* ── CONTROLS PANEL ────────────────────────────────────────────────────────── */
.tv-controls-panel {
  width: 200px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 36px 16px 20px;
  position: relative;
  z-index: 2;
  gap: 28px;
  overflow: hidden;
  background: var(--wood-front);
}

/* Top/right edge facets */
.tv-controls-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    linear-gradient(180deg, var(--wood-top) 0%, var(--wood-top) 6px, transparent 6px),
    linear-gradient(270deg, var(--wood-side) 0%, var(--wood-side) 6px, transparent 6px),
    linear-gradient(135deg, var(--wood-top) 0%, var(--wood-top) 40px, transparent 40px);
  pointer-events: none;
}

/* Diagonal low-poly facet triangles */
.tv-controls-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(150deg, rgba(255,140,40,0.06) 0%, rgba(255,140,40,0.06) 45%, transparent 45%),
    linear-gradient(330deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.18) 50%, transparent 50%),
    linear-gradient(120deg, transparent 30%, rgba(255,100,10,0.04) 30%, rgba(255,100,10,0.04) 55%, transparent 55%);
  pointer-events: none;
}

.tv-controls-panel > * { position: relative; z-index: 1; }

/* ── BRAND ─────────────────────────────────────────────────────────────────── */
.tv-brand {
  text-align: center;
  padding-bottom: 12px;
  width: 100%;
  border-bottom: 2px solid transparent;
  position: relative;
}

.tv-brand::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%;
  width: 80%; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--wood-top) 20%,
    rgba(255,200,80,0.4) 50%, var(--wood-top) 80%, transparent 100%
  );
}

.tv-brand-name {
  display: block;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.22rem;
  color: var(--lp-gold);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  margin-bottom: 2px;
}

.tv-brand-model {
  display: block;
  font-family: var(--font-arcade);
  font-size: 0.42rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.15rem;
}

/* ── KNOB SECTION ──────────────────────────────────────────────────────────── */
.tv-knob-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.knob-label {
  font-family: var(--font-arcade);
  font-size: 0.42rem;
  color: rgba(255,200,100,0.45);
  letter-spacing: 0.12rem;
}

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

/* Parallelogram arrow buttons */
.knob-arrow {
  background: var(--wood-side);
  border: none;
  color: rgba(255,200,100,0.55);
  font-size: 0.75rem;
  padding: 5px 10px;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  line-height: 1;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  outline: none;
  box-shadow: inset 0 2px 0 rgba(255,200,100,0.1);
}

.knob-arrow:hover {
  background: var(--lp-cyan-mid);
  color: var(--lp-teal);
  box-shadow: 0 0 10px rgba(0,200,220,0.35);
}

.knob-arrow:active { transform: scale(0.92); }

/* ── ROTARY KNOB — Hexagonal low-poly shape ────────────────────────────────── */
.tv-knob {
  width: 64px;
  height: 64px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, #5a4090 0%, #3e2d6e 45%, #241a40 100%);
  cursor: grab;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.25,0.8,0.25,1);
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 0 2px rgba(90,50,130,0.5);
}

.tv-knob:focus-visible {
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 0 3px var(--lp-cyan);
}

.tv-knob:active { cursor: grabbing; }

.tv-knob-decorative {
  width: 48px;
  height: 48px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, #3c2a60 0%, #271a45 100%);
  cursor: default;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}

/* Diamond notch indicator */
.knob-notch {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 14px;
  clip-path: polygon(50% 0%, 100% 40%, 50% 100%, 0% 40%);
  background: linear-gradient(to bottom, var(--lp-teal), var(--lp-cyan-mid));
  box-shadow: 0 0 4px rgba(0,228,200,0.6);
}

.tv-knob-decorative .knob-notch { height: 10px; top: 5px; }

/* ── SPEAKER GRILL ─────────────────────────────────────────────────────────── */
.tv-speaker-grill {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px;
  width: 100%;
}

.speaker-slot {
  width: 100%;
  height: 4px;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  background: linear-gradient(90deg,
    transparent 0%, var(--wood-side) 8%,
    rgba(0,0,0,0.75) 12%, rgba(0,0,0,0.75) 88%,
    var(--wood-side) 92%, transparent 100%
  );
}

/* ── POWER LED — Diamond indicator ────────────────────────────────────────── */
.tv-power-led {
  display: flex;
  align-items: center;
  gap: 7px;
}

.power-dot {
  width: 10px;
  height: 10px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: var(--lp-phosphor);
  box-shadow: 0 0 8px rgba(34,255,136,0.7);
  animation: pulse-led 2s infinite alternate;
}

@keyframes pulse-led {
  0%   { opacity: 0.55; box-shadow: 0 0 4px rgba(34,255,136,0.4); }
  100% { opacity: 1;    box-shadow: 0 0 14px rgba(34,255,136,0.8); }
}

.power-label {
  font-family: var(--font-arcade);
  font-size: 0.34rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.1rem;
}

/* ── TV LEGS ───────────────────────────────────────────────────────────────── */
.tv-legs { display: none; }

/* ── FOOTER ────────────────────────────────────────────────────────────────── */
.tv-footer {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.65rem;
  color: rgba(255,255,255,0.3);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 14px;
  position: relative;
  width: 100%;
}

.tv-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 10%;
  width: 80%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,200,80,0.25) 50%, transparent);
}

.tv-footer-links {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

.tv-footer-links a {
  color: rgba(255,200,100,0.35);
  text-decoration: none;
  font-size: 0.55rem;
  letter-spacing: 0.08rem;
  transition: color var(--transition-fast) ease;
}

.tv-footer-links a:hover {
  color: var(--lp-pink);
  text-shadow: 0 0 4px rgba(255,42,122,0.5);
}

.bullet { color: rgba(255,255,255,0.15); }

/* ── BIOS LOADING OVERLAY ──────────────────────────────────────────────────── */
.loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity var(--transition-slow) ease;
}

.loader-overlay.hidden { opacity: 0; pointer-events: none; }

.loader-crt {
  width: 90%;
  max-width: 580px;
  background: var(--lp-deep-indigo);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  padding: 2.5rem;
  box-shadow: 0 0 40px rgba(90,40,130,0.35), 0 0 0 2px var(--lp-violet);
  font-family: var(--font-arcade);
  font-size: 0.7rem;
  line-height: 1.8;
  position: relative;
}

/* Top-right corner facet */
.loader-crt::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-top: 20px solid var(--lp-violet);
  border-left: 20px solid transparent;
}

/* Scanlines on loader */
.loader-crt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 3px,
    rgba(0,0,0,0.12) 3px, rgba(0,0,0,0.12) 4px
  );
  pointer-events: none;
}

.loader-title {
  color: var(--lp-cyan);
  font-size: 0.88rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--lp-cyan-mid);
  padding-bottom: 0.5rem;
  text-shadow: 0 0 8px rgba(0,200,220,0.5);
}

.loader-sys-info { color: var(--lp-grey); margin-bottom: 2rem; }

.loader-status-msg { font-size: 0.78rem; margin-bottom: 1rem; color: var(--lp-white); }

.highlight-text-gold { color: var(--lp-gold); text-shadow: 0 0 6px rgba(255,184,0,0.4); }

.loader-progress-bar {
  width: 100%;
  height: 18px;
  background: var(--lp-dark-void);
  margin-bottom: 0.5rem;
  position: relative;
  overflow: hidden;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  border: 1px solid var(--lp-violet);
}

.loader-progress-fill {
  width: 0%;
  height: 100%;
  background: repeating-linear-gradient(
    60deg,
    var(--lp-pink), var(--lp-pink) 8px,
    var(--lp-purple) 8px, var(--lp-purple) 16px
  );
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(255,42,122,0.4);
}

.loader-percent { text-align: right; color: var(--lp-grey); font-size: 0.65rem; }

/* ── UTILITIES ─────────────────────────────────────────────────────────────── */
@keyframes pulse {
  0%   { opacity: 0.3; }
  100% { opacity: 1; }
}

@keyframes crt-flicker {
  0%   { opacity: 0.987; }
  50%  { opacity: 0.993; }
  100% { opacity: 0.987; }
}

/* ── SCROLLBAR ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--lp-dark-void); }
::-webkit-scrollbar-thumb { background: var(--lp-violet); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--lp-pink); }

/* ── RESPONSIVE ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body { padding: 0; }

  .tv-body { flex-direction: column; }

  .tv-screen-frame { padding: 12px; }

  .tv-screen {
    border: 0;
    outline-width: 4px;
    clip-path: polygon(3% 0%, 97% 0%, 100% 3%, 100% 97%, 97% 100%, 3% 100%, 0% 97%, 0% 3%);
  }

  .tv-controls-panel {
    width: 100%;
    min-width: unset;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 10px 16px;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    border-top: 4px solid var(--wood-side);
  }

  .tv-brand { width: auto; padding-bottom: 0; border-bottom: none; }
  .tv-brand::after { display: none; }
  .tv-knob-section { gap: 4px; }
  .tv-speaker-grill { display: none; }
  .tv-knob { width: 44px; height: 44px; }
  .tv-knob-decorative { display: none; }
  .knob-notch { height: 8px; top: 4px; }
  .tv-footer { display: none; }
  .info-title { font-size: 1.2rem; }
  .info-desc { font-size: 0.75rem; }
  .info-play-btn { font-size: 0.55rem; padding: 0.5rem 1rem; }
  .tv-channel-number { font-size: 0.7rem; top: 10px; right: 10px; }
}

@media (max-width: 480px) {
  .tv-screen-frame { padding: 8px; }
  .info-banner-inner { padding: 1.5rem 0.75rem 0.75rem; }
  .info-desc { display: none; }
}