/* ============================================================================
   Channel [V] — nostalgia rebuild
   Anchored on 2000–2002 lime era with a 2008 dark-red on-air ribbon up top.
   Real colours & type pulled from Wayback captures (see research/).
   ============================================================================ */

:root {
  /* brand */
  --v-red: #fc0f34;
  --v-red-deep: #b10021;
  --v-red-light: #ff5870;

  /* 2000–2002 era */
  --lime: #87cf00;
  --lime-dark: #68be00;
  --lime-bright: #d0ff50;
  --cream: #f0ffce;
  --mint: #e8ffd8;

  /* 2008 on-air strip */
  --night: #0a0a0a;
  --row-a: #141414;
  --row-b: #262626;
  --ash: #404040;
  --dim: #9b9b9b;

  /* accents */
  --orange: #ff8a00;
  --orange-dark: #e02400;
  --hot-pink: #ff0099;
  --yellow: #e6e382;

  /* type */
  --sans: "Verdana", "Geneva", "DejaVu Sans", Tahoma, sans-serif;
  --mono: "Courier New", "Lucida Console", Monaco, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 12px;
  color: #0a0a0a;
  background: var(--lime);
  /* subtle tiled dots — the 2000 "home_back.gif" feeling */
  background-image:
    radial-gradient(circle at 2px 2px, rgba(0,0,0,0.08) 1px, transparent 0);
  background-size: 14px 14px;
  min-height: 100vh;
}

a { color: var(--orange-dark); text-decoration: none; font-weight: bold; }
a:hover { color: var(--hot-pink); text-decoration: underline; }
a:visited { color: var(--orange-dark); }

img { max-width: 100%; display: block; }

/* ============================================================================
   TOP BAR — the dark on-air ribbon (2008)
   ============================================================================ */
#topbar {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #000 0%, #1a0008 100%);
  color: #fff;
  border-bottom: 3px solid var(--v-red);
  box-shadow: 0 2px 0 #000, 0 3px 12px rgba(0,0,0,0.4);
  position: sticky;
  top: 0;
  z-index: 40;
}

.logo img { height: 42px; filter: drop-shadow(0 0 6px rgba(252,15,52,0.5)); }

.tagline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cream);
  text-transform: uppercase;
}

.nowplaying {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.np-label {
  font-family: var(--mono);
  color: var(--v-red);
  font-weight: bold;
  letter-spacing: 0.2em;
}
.np-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--v-red);
  box-shadow: 0 0 8px var(--v-red), 0 0 2px #fff inset;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
.np-text { color: var(--yellow); font-family: var(--mono); max-width: 36ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.clock {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--v-red);
  background: #000;
  padding: 3px 8px;
  border: 1px solid var(--v-red);
  letter-spacing: 0.1em;
}

/* ============================================================================
   TICKER — scrolling list of programming below the ribbon
   ============================================================================ */
.ticker {
  background: var(--row-a);
  color: #d0ffd0;
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 0;
  border-bottom: 2px solid #000;
  overflow: hidden;
  position: sticky;
  top: 72px;
  z-index: 39;
}
.ticker-track {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: ticker 60s linear infinite;
}
.ticker-track span { color: var(--v-red); font-weight: bold; }
.ticker-track em { color: var(--yellow); font-style: normal; }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ============================================================================
   FRAME — main content grid: nav / tv / content
   Mimics the old frameset (nav | main) but with a persistent TV widget.
   ============================================================================ */
#frame {
  display: grid;
  grid-template-columns: 120px 1fr 340px;
  gap: 14px;
  padding: 14px;
  max-width: 1400px;
  margin: 0 auto;
  min-height: calc(100vh - 200px);
}

@media (max-width: 1100px) {
  #frame { grid-template-columns: 110px 1fr; }
  #tv { grid-column: 2; grid-row: 2; margin-top: 14px; }
}

/* ============================================================================
   NAV — the 2002 left-rail rollover buttons
   ============================================================================ */
#nav {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-buttons {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-buttons li { margin-bottom: 2px; }

.btn {
  display: block;
  padding: 5px 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  color: var(--cream) !important;
  background: #000;
  border: 1px solid #000;
  border-right-color: var(--v-red);
  border-bottom-color: var(--v-red);
  letter-spacing: 0.04em;
  transition: transform 0.08s ease, background 0.12s ease;
}
.btn:hover {
  background: var(--v-red);
  color: #fff !important;
  text-decoration: none;
  transform: translateX(2px);
}
.btn.btn-red {
  background: var(--v-red);
  color: #fff !important;
  border-color: #000;
}
.btn.active {
  background: var(--cream);
  color: #000 !important;
  border-right-color: #000;
  border-bottom-color: #000;
  border-left: 4px solid var(--v-red);
}

.sub-cluster {
  background: var(--cream);
  border: 2px solid #000;
  padding: 6px 8px;
  margin-top: 8px;
  font-size: 10px;
  box-shadow: 2px 2px 0 var(--v-red);
}
.cluster-title {
  font-family: var(--mono);
  font-weight: bold;
  color: #000;
  margin-bottom: 4px;
  border-bottom: 1px dashed #000;
  padding-bottom: 2px;
}
.cluster-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cluster-list li { padding: 1px 0; }
.cluster-list li::before { content: "★ "; color: var(--v-red); font-size: 9px; }

.sub-cluster.subscribe {
  background: #000;
  color: var(--yellow);
  text-align: center;
  font-family: var(--mono);
  padding: 8px;
}
.sub-cluster.subscribe a { color: var(--v-red); }
.sub-cluster.subscribe a:hover { color: var(--yellow); }

.viewer-count {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: #000;
  text-align: center;
  background: var(--cream);
  border: 1px dashed #000;
  padding: 4px;
}
.viewer-count span { font-weight: bold; color: var(--v-red); letter-spacing: 0.1em; }

/* ============================================================================
   TV — persistent YouTube player widget
   ============================================================================ */
#tv {
  grid-column: 3;
  grid-row: 1;
  position: sticky;
  top: 110px;
  height: fit-content;
  background: #000;
  border: 3px solid #000;
  box-shadow:
    6px 6px 0 var(--v-red),
    inset 0 0 0 1px var(--ash);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  align-self: start;
}

.tv-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #2a2a2a, #0a0a0a);
  padding: 6px 10px;
  border-bottom: 2px solid var(--v-red);
}
.tv-lights { display: flex; gap: 4px; }
.tv-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2a0008;
  box-shadow: 0 0 2px #000 inset;
}
.tv-led.led-red { background: var(--v-red); box-shadow: 0 0 4px var(--v-red); }
.tv-led.led-green.on { background: #0aff66; box-shadow: 0 0 6px #0aff66; }

.tv-label {
  flex: 1;
  color: var(--v-red);
  font-weight: bold;
  letter-spacing: 0.2em;
}
.tv-rhs { display: flex; gap: 4px; }
.tv-btn {
  background: #1a1a1a;
  color: var(--cream);
  border: 1px solid var(--ash);
  width: 22px; height: 22px;
  cursor: pointer;
  font-family: var(--mono);
}
.tv-btn:hover { background: var(--v-red); border-color: #fff; }

.tv-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.player-host { position: absolute; inset: 0; }
#player, .player-host iframe { width: 100% !important; height: 100% !important; border: 0; }

.tv-off {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(0deg, rgba(252,15,52,0.06) 0 2px, transparent 2px 4px),
    radial-gradient(circle at center, #1a0008 0%, #000 70%);
  z-index: 2;
  animation: staticNoise 0.2s steps(2) infinite;
}
.tv-off-text { text-align: center; color: #fff; font-family: var(--mono); }
.tv-off-big {
  font-size: 24px;
  letter-spacing: 0.3em;
  color: var(--v-red);
  text-shadow: 0 0 8px var(--v-red), 2px 0 #0ff, -2px 0 #f0f;
  animation: chroma 1.6s ease-in-out infinite;
}
.tv-off-small { font-size: 10px; color: var(--yellow); margin-top: 6px; letter-spacing: 0.1em; }
@keyframes chroma {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(1px); }
}
@keyframes staticNoise {
  0% { background-position: 0 0; }
  100% { background-position: 4px 4px; }
}
.tv-off.hidden { display: none; }

.tv-scanlines {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.12) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: multiply;
}

.tv-overlay {
  position: absolute; inset: auto 0 0 0; z-index: 4;
  padding: 6px 10px;
  background: linear-gradient(0deg, rgba(0,0,0,0.82), transparent);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.tv-ch {
  font-size: 14px;
  color: var(--v-red);
  font-weight: bold;
  text-shadow: 0 0 4px var(--v-red);
}
.tv-meta { color: var(--yellow); max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tv-ctrl {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: #1a1a1a;
  border-top: 1px solid var(--ash);
}
.ctrl {
  background: #000;
  color: var(--cream);
  border: 1px solid var(--ash);
  padding: 4px 8px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  min-width: 28px;
}
.ctrl:hover { background: var(--v-red); color: #fff; border-color: #fff; }
.ctrl-big { min-width: 44px; font-size: 14px; }
.ctrl-spacer { flex: 1; }
.ctrl-shuffle.on { background: var(--v-red); color: #fff; }

.tv-queue {
  background: var(--night);
  padding: 6px;
  border-top: 1px solid var(--ash);
  max-height: 180px;
  overflow-y: auto;
}
.tv-queue-title {
  color: var(--v-red);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  margin-bottom: 4px;
}
.tv-queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 10px;
}
.tv-queue-list li {
  padding: 3px 4px;
  color: var(--dim);
  border-bottom: 1px solid #1a1a1a;
  cursor: pointer;
  display: flex; gap: 6px;
}
.tv-queue-list li:hover { background: var(--row-b); color: var(--cream); }
.tv-queue-list li.playing { background: rgba(252,15,52,0.18); color: #fff; border-left: 3px solid var(--v-red); padding-left: 2px; }
.tv-queue-list li .q-num { color: var(--v-red); min-width: 20px; }
.tv-queue-list li .q-rm { margin-left: auto; color: var(--dim); }
.tv-queue-list li .q-rm:hover { color: var(--v-red); }

/* ============================================================================
   CONTENT — the main panel per section
   ============================================================================ */
#content {
  grid-column: 2;
  grid-row: 1;
}

.panel {
  background: var(--cream);
  border: 3px solid #000;
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 5px 5px 0 var(--v-red);
  position: relative;
}
.panel::before {
  /* curved top like the 2002 topcurve.gif */
  content: "";
  position: absolute;
  top: -3px; left: -3px; right: -3px;
  height: 8px;
  background: linear-gradient(90deg, var(--v-red) 0%, #000 50%, var(--v-red) 100%);
}

.panel h1, .panel h2, .panel h3 {
  font-family: var(--mono);
  text-transform: uppercase;
  margin: 0 0 10px;
  color: #000;
  letter-spacing: 0.08em;
}
.panel h1 { font-size: 22px; color: var(--v-red); border-bottom: 2px dashed #000; padding-bottom: 6px; }
.panel h2 { font-size: 16px; }
.panel h3 { font-size: 13px; color: var(--v-red); }

.panel p { line-height: 1.5; margin: 0 0 10px; }

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 8px;
  background: #000;
  color: var(--yellow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 6px;
}
.pill.red { background: var(--v-red); color: #fff; }
.pill.pink { background: var(--hot-pink); color: #fff; }

.divider {
  height: 14px;
  background-image: url("../img/dot.svg"), url("../img/star.svg");
  background-repeat: repeat-x;
  background-position: left center, right 12px center;
  background-size: 8px 8px, 12px 12px;
  border-top: 1px dashed #000;
  border-bottom: 1px dashed #000;
  margin: 14px 0;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* --- video list rows (used across sections) --- */
.video-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.video-list li {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px dashed rgba(0,0,0,0.3);
  cursor: pointer;
  transition: background 0.1s;
}
.video-list li:hover { background: var(--mint); }
.video-list li.playing { background: var(--v-red); color: #fff; }
.video-list li.playing .vl-meta, .video-list li.playing .vl-year { color: #fff; }
.video-list .vl-num { font-family: var(--mono); color: var(--v-red); font-weight: bold; font-size: 14px; text-align: right; }
.video-list .vl-main { display: flex; flex-direction: column; }
.video-list .vl-artist { font-weight: bold; font-size: 13px; }
.video-list .vl-title { font-size: 12px; color: #333; }
.video-list .vl-meta { font-family: var(--mono); font-size: 10px; color: #555; }
.video-list .vl-year { font-family: var(--mono); font-size: 10px; color: #555; }
.video-list .vl-add {
  background: #000; color: var(--v-red);
  border: 1px solid #000; padding: 2px 6px;
  font-family: var(--mono); font-size: 10px;
  cursor: pointer;
}
.video-list .vl-add:hover { background: var(--v-red); color: #fff; }
.video-list li.playing .vl-add { background: #fff; color: var(--v-red); }

/* --- whatUwant request wall --- */
.wuw-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.wuw-card {
  background: #000;
  color: #fff;
  padding: 10px;
  border: 2px solid var(--v-red);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.08s ease, background 0.12s ease;
  position: relative;
  overflow: hidden;
}
.wuw-card::before {
  content: "[V]";
  position: absolute;
  top: 4px; right: 6px;
  font-size: 9px; color: var(--v-red); opacity: 0.6;
}
.wuw-card:hover { transform: scale(1.04) rotate(-0.5deg); background: var(--v-red); border-color: #fff; }
.wuw-card .c-artist { font-weight: bold; color: var(--yellow); font-size: 12px; }
.wuw-card .c-title  { color: #fff; margin-top: 4px; }
.wuw-card .c-cta {
  margin-top: auto;
  font-size: 10px; color: var(--cream);
  letter-spacing: 0.12em;
}
.wuw-card.requested { background: var(--hot-pink) !important; border-color: #fff; }
.wuw-card.requested::after { content: "✓ requested"; position: absolute; bottom: 4px; right: 6px; font-size: 9px; color: #fff; }

/* --- VJ cards --- */
.vj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.vj-card {
  background: #000;
  color: #fff;
  padding: 10px;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 var(--v-red);
}
.vj-card h3 { color: var(--v-red); font-family: var(--mono); font-size: 14px; margin: 0; }
.vj-card .era { color: var(--yellow); font-family: var(--mono); font-size: 10px; }
.vj-card p { font-size: 11px; color: var(--cream); margin: 6px 0 0; line-height: 1.4; }

/* --- charts countdown --- */
.chart-row {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 12px;
  background: var(--mint);
  border: 2px solid #000;
  padding: 8px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--v-red);
  position: relative;
}
.chart-row:hover { background: #fff; transform: translateX(4px); }
.chart-row .rank {
  font-family: var(--mono); font-weight: bold; font-size: 32px; color: var(--v-red); text-align: right;
}
.chart-row .rank::before { content: "#"; font-size: 14px; opacity: 0.6; margin-right: 2px; }
.chart-row.chart-1 { background: var(--v-red); color: #fff; }
.chart-row.chart-1 .rank { color: var(--yellow); }
.chart-row.chart-1 .ch-artist, .chart-row.chart-1 .ch-title { color: #fff; }
.ch-artist { font-weight: bold; }
.ch-title  { color: #333; font-size: 11px; }

/* --- gig guide --- */
.gig-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 14px;
  padding: 8px;
  border-bottom: 1px dashed #000;
  align-items: baseline;
}
.gig-date { font-family: var(--mono); color: var(--v-red); font-weight: bold; }
.gig-act { font-weight: bold; font-size: 13px; }
.gig-venue { font-family: var(--mono); font-size: 10px; color: #333; }

/* --- vmail form --- */
.vmail-form { display: flex; flex-direction: column; gap: 8px; }
.vmail-form textarea, .vmail-form input {
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 8px;
  border: 2px solid #000;
  background: #fff;
  color: #000;
}
.vmail-form button {
  align-self: flex-start;
  background: var(--v-red);
  color: #fff;
  border: 2px solid #000;
  padding: 6px 14px;
  font-family: var(--mono);
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  box-shadow: 3px 3px 0 #000;
}
.vmail-form button:hover { background: #000; color: var(--v-red); transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--v-red); }

.mail-thread {
  background: #fff;
  border: 2px solid #000;
  padding: 8px 12px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  white-space: pre-wrap;
  line-height: 1.5;
}
.mail-thread .from { color: var(--v-red); font-weight: bold; }

/* --- room208 dancefloor --- */
.dance-floor {
  background: linear-gradient(135deg, #000 0%, #1a0008 50%, #000 100%);
  color: #fff;
  padding: 18px;
  border: 3px solid var(--v-red);
  position: relative;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--v-red);
}
.dance-floor::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(252,15,52,0.35) 0, transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(255,0,153,0.35) 0, transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(10,255,102,0.15) 0, transparent 24%);
  animation: discolights 5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes discolights {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(60deg); }
}
.dance-floor h1 {
  color: #fff !important;
  border-bottom-color: var(--v-red) !important;
  text-shadow: 0 0 8px var(--v-red);
}
.dance-floor p { color: var(--cream); position: relative; }
.dance-floor .video-list li { border-bottom-color: rgba(255,255,255,0.1); color: #fff; position: relative; }
.dance-floor .video-list li:hover { background: rgba(255,0,153,0.22); }
.dance-floor .video-list .vl-title, .dance-floor .video-list .vl-meta, .dance-floor .video-list .vl-year { color: var(--cream); }

/* --- heavyshift (dark heavy metal themed) --- */
.pit {
  background: #0a0a0a;
  color: #fff;
  padding: 18px;
  border: 3px solid #1a1a1a;
  box-shadow: 6px 6px 0 #000;
  position: relative;
  overflow: hidden;
}
.pit::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 8px,
    rgba(255,0,0,0.04) 8px 9px
  );
}
.pit h1 {
  color: var(--v-red) !important;
  font-family: "Courier New", monospace;
  border-bottom-color: var(--v-red) !important;
  text-transform: uppercase;
}
.pit .video-list li { border-bottom-color: rgba(255,255,255,0.08); color: #fff; position: relative; }
.pit .video-list li:hover { background: rgba(252,15,52,0.15); }
.pit .video-list .vl-title, .pit .video-list .vl-meta, .pit .video-list .vl-year { color: var(--dim); }

/* --- HQ live stage --- */
.stage {
  background: linear-gradient(180deg, #141414 0%, #000 100%);
  color: #fff;
  padding: 18px;
  border: 3px solid var(--v-red);
  box-shadow: 6px 6px 0 #000;
  position: relative;
}
.stage::before {
  content: "● LIVE";
  position: absolute; top: 10px; right: 14px;
  font-family: var(--mono); font-weight: bold;
  color: var(--v-red);
  animation: blink 1.4s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.stage h1 { color: #fff !important; border-bottom-color: var(--v-red) !important; }

/* --- shows grid --- */
.show-card {
  background: var(--cream);
  border: 2px solid #000;
  padding: 10px 12px;
  box-shadow: 3px 3px 0 var(--v-red);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.show-card h3 { margin: 0; color: var(--v-red); font-family: var(--mono); }
.show-card .era { font-family: var(--mono); font-size: 10px; color: #000; }
.show-card p { font-size: 11px; margin: 0; line-height: 1.4; }

/* --- Big Day Out --- */
.bdo {
  background: url("../img/star.svg"), url("../img/star.svg"), var(--cream);
  background-repeat: repeat-x;
  background-position: top left, bottom left;
  background-size: 20px;
  padding: 24px 18px;
  border: 3px solid var(--v-red);
  box-shadow: 6px 6px 0 #000;
}
.bdo h1 { color: var(--v-red); border-bottom-color: #000; }

/* ============================================================================
   CHAT window — late 90s IRC feel
   ============================================================================ */
.chat-window {
  position: fixed;
  bottom: 42px;
  left: 20px;
  width: 260px;
  max-height: 280px;
  background: var(--cream);
  border: 3px solid #000;
  box-shadow: 4px 4px 0 var(--v-red);
  z-index: 50;
  font-family: var(--mono);
  font-size: 11px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}
.chat-window.hidden { transform: translateY(calc(100% + 60px)); }
.chat-title {
  background: var(--v-red);
  color: #fff;
  padding: 4px 8px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chat-x {
  background: #fff;
  color: var(--v-red);
  border: 1px solid #000;
  width: 18px; height: 18px;
  cursor: pointer;
  font-weight: bold;
  line-height: 14px;
  padding: 0;
}
.chat-log {
  list-style: none;
  margin: 0;
  padding: 6px 8px;
  overflow-y: auto;
  flex: 1;
  max-height: 220px;
}
.chat-log li { margin-bottom: 4px; line-height: 1.3; animation: fadein 0.3s ease; }
.chat-log .nick { color: var(--hot-pink); font-weight: bold; }
.chat-log .nick.op { color: var(--v-red); }
.chat-log .nick.op::before { content: "@"; }
.chat-log .sys { color: #555; font-style: italic; font-size: 10px; }
@keyframes fadein { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }

/* ============================================================================
   FOOTER — vmail scroll + legal
   ============================================================================ */
#footer {
  background: #000;
  color: var(--yellow);
  font-family: var(--mono);
  font-size: 11px;
  border-top: 3px solid var(--v-red);
}
.vmail-strip {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 6px 0;
  border-bottom: 1px solid #1a1a1a;
}
.vmail-tag {
  background: var(--v-red);
  color: #fff;
  padding: 4px 10px;
  font-weight: bold;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.vmail-track {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: ticker 90s linear infinite;
  color: var(--cream);
}
.vmail-track em { color: var(--hot-pink); font-style: normal; }
.vmail-track span.div { color: var(--v-red); margin: 0 20px; }

.legal {
  padding: 10px 20px;
  font-size: 10px;
  color: var(--dim);
  text-align: center;
  line-height: 1.6;
}
.legal .mono { display: block; margin-top: 4px; font-size: 9px; }

/* ============================================================================
   BOOT overlay — plays once
   ============================================================================ */
.boot {
  position: fixed; inset: 0;
  z-index: 100;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  animation: bootFade 2.4s ease forwards;
  animation-delay: 1.1s;
}
@keyframes bootFade {
  to { opacity: 0; visibility: hidden; }
}
.boot-inner { text-align: center; }
.boot-bar {
  width: 280px;
  height: 14px;
  background: #111;
  border: 2px solid var(--v-red);
  margin: 24px auto 10px;
  position: relative;
  overflow: hidden;
}
.boot-bar span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--v-red), var(--hot-pink), var(--yellow));
  animation: bootFill 1.2s ease forwards;
}
@keyframes bootFill { to { width: 100%; } }
.boot-text {
  font-family: var(--mono);
  color: var(--v-red);
  letter-spacing: 0.2em;
  font-size: 12px;
  text-transform: uppercase;
}

/* ============================================================================
   misc utilities
   ============================================================================ */
.mono { font-family: var(--mono); }
.fine { font-size: 10px; color: #333; }
.cursor { cursor: pointer; }
.center { text-align: center; }
.muted { color: #555; }
.hot  { color: var(--hot-pink); font-weight: bold; }
.btn-primary {
  display: inline-block;
  padding: 6px 14px;
  background: #000;
  color: #fff !important;
  border: 2px solid var(--v-red);
  font-family: var(--mono);
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--v-red);
}
.btn-primary:hover { background: var(--v-red); text-decoration: none; }

/* selection */
::selection { background: var(--v-red); color: #fff; }

/* ============================================================================
   NEW COMPONENTS — playlist cards, on-air strip, lanes, schedule, search, heart
   ============================================================================ */

/* On-air strip — compact "what's playing right now" bar at the top of panels */
.on-air-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #000;
  color: var(--cream);
  padding: 6px 10px;
  margin: -14px -16px 12px;
  border-bottom: 2px solid var(--v-red);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.on-air-strip.subtle {
  background: #1a0008;
  border-bottom-color: #4a0012;
}
.oa-tag {
  background: var(--v-red);
  color: #fff;
  padding: 2px 8px;
  font-weight: bold;
  letter-spacing: 0.15em;
}
.oa-show {
  color: var(--yellow);
  font-weight: bold;
  text-transform: uppercase;
}
.oa-era {
  color: var(--dim);
  margin-left: auto;
  font-size: 10px;
}
.oa-hint {
  font-family: var(--mono);
  font-size: 11px;
  color: #333;
  margin: -4px 0 10px;
}
.oa-dot {
  color: var(--v-red);
  animation: pulse 1.2s ease-in-out infinite;
}

.on-air-panel h1 {
  margin-top: 0;
}

/* Action buttons */
.pl-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
  align-items: center;
}
.btn-ghost {
  background: transparent;
  color: #000;
  border: 2px dashed #000;
  padding: 5px 12px;
  font-family: var(--mono);
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-ghost:hover { border-style: solid; background: #000; color: var(--v-red); }

/* Playlist card — used in Shows, VJs, BDO, Gigs */
.playlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.playlist-card {
  background: var(--cream);
  border: 2px solid #000;
  box-shadow: 4px 4px 0 var(--v-red);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.playlist-card.current {
  box-shadow: 4px 4px 0 var(--hot-pink);
  border-color: var(--v-red);
}
.playlist-card .now-badge {
  position: absolute;
  top: -8px;
  right: 8px;
  background: var(--v-red);
  color: #fff;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  font-weight: bold;
  animation: pulse 1.2s ease-in-out infinite;
}
.playlist-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.pl-title {
  color: var(--v-red);
  font-family: var(--mono);
  font-size: 14px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pl-era {
  font-family: var(--mono);
  font-size: 10px;
  color: #000;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.pl-hint {
  font-size: 11px;
  line-height: 1.45;
  color: #222;
  margin: 0;
}

/* Home page lane grid — 4 big tap targets */
.lane-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.lane {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: #000;
  color: #fff !important;
  border: 2px solid #000;
  text-decoration: none !important;
  box-shadow: 3px 3px 0 var(--v-red);
  cursor: pointer;
  min-height: 90px;
  justify-content: space-between;
  transition: transform 0.08s ease, background 0.12s;
}
.lane:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--v-red);
  background: var(--v-red-deep);
}
.lane-tag {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--v-red);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.lane-label {
  font-size: 14px;
  font-weight: bold;
  color: var(--yellow);
  font-family: var(--mono);
}
.lane-cta {
  font-size: 16px;
  color: var(--cream);
  align-self: flex-end;
}

/* Home page schedule list — the full on-air rundown */
.schedule-grid {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.sched-row {
  display: grid;
  grid-template-columns: 70px 1fr 2fr;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--mint);
  border: 2px solid transparent;
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.sched-row:hover {
  background: #fff;
  border-color: #000;
  transform: translateX(3px);
}
.sched-row.sched-now {
  background: #000;
  color: #fff;
  border-color: var(--v-red);
}
.sched-row.sched-now .sched-title { color: var(--yellow); }
.sched-row.sched-now .sched-hint { color: var(--cream); }
.sched-time {
  font-family: var(--mono);
  font-weight: bold;
  color: var(--v-red);
  font-size: 13px;
}
.sched-title {
  font-family: var(--mono);
  font-weight: bold;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sched-hint {
  font-family: var(--mono);
  font-size: 10px;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Gig cards — tap-to-play gig sets */
.gig-grid {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.gig-card {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--mint);
  border: 2px solid #000;
  box-shadow: 3px 3px 0 var(--v-red);
}
.gig-card .gig-date {
  font-family: var(--mono);
  font-weight: bold;
  color: var(--v-red);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.gig-card .gig-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gig-card .gig-act {
  font-weight: bold;
  font-size: 13px;
}
.gig-card .gig-venue {
  font-family: var(--mono);
  font-size: 10px;
  color: #333;
}

/* Search + filter */
.wuw-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.search-input {
  background: #fff;
  border: 2px solid #000;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: #000;
  box-shadow: 3px 3px 0 var(--v-red);
}
.search-input:focus {
  outline: none;
  background: var(--cream);
  box-shadow: 3px 3px 0 var(--hot-pink);
}
.search-input-big { font-size: 14px; padding: 10px 14px; }
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.chip {
  background: #fff;
  color: #000;
  border: 2px solid #000;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: bold;
}
.chip:hover { background: var(--mint); }
.chip.active {
  background: var(--v-red);
  color: #fff;
  border-color: #000;
  box-shadow: 2px 2px 0 #000;
  transform: translate(-1px, -1px);
}

/* Video list heart button */
.video-list li {
  grid-template-columns: 40px 1fr auto auto 28px !important;
  gap: 8px;
}
.video-list li.is-fav .vl-heart { color: var(--v-red); }
.vl-heart {
  background: transparent;
  border: none;
  color: #bbb;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: transform 0.1s ease;
}
.vl-heart:hover { color: var(--v-red); transform: scale(1.2); }
.vl-heart.on, .vl-heart[aria-pressed="true"] { color: var(--v-red); }
.video-list li.playing .vl-heart { color: #fff; }
.video-list li.playing .vl-heart.on { color: var(--yellow); }

/* Chart row meta */
.ch-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Queue "show all" toggle */
#queue-more {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: #1a1a1a;
  color: var(--v-red);
  border: 1px solid var(--ash);
  padding: 6px;
  font-family: var(--mono);
  font-size: 10px;
  cursor: pointer;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
#queue-more:hover { background: var(--v-red); color: #fff; }

/* Tighter TV queue — cap at 6 rows by default, expandable */
.tv-queue { max-height: 220px; }
#tv.q-expanded .tv-queue { max-height: 400px; }

/* Desktop TV collapsed state — compact strip like mobile */
#tv.collapsed .tv-screen,
#tv.collapsed .tv-queue,
#tv.collapsed .tv-ctrl {
  display: none;
}
#tv.collapsed .tv-chrome::after {
  content: "▾ expand";
  color: var(--yellow);
  font-size: 10px;
  letter-spacing: 0.15em;
  margin-left: auto;
  margin-right: 8px;
}

/* Favourite state on video lists */
.video-list li.is-fav { background: linear-gradient(90deg, transparent 70%, rgba(252,15,52,0.1) 100%); }