:root {
  --page: #0f0d0b;
  --amber: #f0a74b;
  --amber-hot: #ffc46e;
  --amber-dim: #9f6728;
  --ink: #c7bca9;
  --ink-dim: #71695e;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; background: var(--page); }
body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  color: var(--ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(circle at 50% -15%, rgba(255,255,255,.055), transparent 38%),
    linear-gradient(180deg, #191612 0%, #0d0c0a 58%, #090807 100%);
}
button { font: inherit; }

.app-shell {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) 0 0;
}

/* ----- Header ----- */
.masthead {
  display: flex; align-items: center; justify-content: center; gap: 10px; color: #a99e8d;
  padding: 0 16px 4px; flex: 0 0 auto;
}
.brand-lockup { display: flex; align-items: center; gap: 9px; }
.brand-mark {
  width: 34px; height: 28px; display: grid; place-items: center; overflow: hidden;
  border-bottom: 1px solid #5b5248; opacity: .88;
}
.brand-mark img {
  width: 40px; height: 40px; object-fit: contain; opacity: .95;
  filter: invert(76%) sepia(20%) saturate(560%) hue-rotate(350deg) brightness(88%) contrast(84%);
}
.masthead h1 { margin: 0; font-size: 13px; line-height: .95; font-weight: 700; letter-spacing: .14em; }
.masthead p {
  margin: 3px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 6px; letter-spacing: .2em; color: var(--ink-dim);
}

/* ----- Hero: now-playing display + monitor, centered with real room ----- */
.hero {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 8px 20px;
}

/* Display panel — the exact treatment from the dial page. This part was
   never the problem; it stays. */
.display {
  position: relative; overflow: hidden; width: 100%; max-width: 420px; min-height: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px 16px 15px; border: 2px solid #18130f; border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, rgba(255,190,94,.025) 0, rgba(255,190,94,.025) 1px, transparent 1px, transparent 4px),
    radial-gradient(ellipse at 50% 44%, rgba(244,163,67,.065), transparent 48%),
    linear-gradient(180deg, #100b07, #170f09 49%, #0b0806 100%);
  box-shadow: inset 0 0 0 1px rgba(255,177,77,.055), inset 0 12px 35px rgba(0,0,0,.84),
    inset 0 -7px 23px rgba(0,0,0,.76), 0 1px rgba(255,255,255,.075);
}
.display-glass {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(106deg, transparent 0 24%, rgba(255,255,255,.028) 24.2% 34%, transparent 34.2% 100%),
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 26%); mix-blend-mode: screen;
}
.frequency-row { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; }
.frequency {
  font-family: "Courier New", ui-monospace, monospace; font-size: clamp(50px, 15vw, 76px);
  font-weight: 400; line-height: .88; letter-spacing: -.105em; color: var(--amber-hot);
  text-shadow: 0 0 3px rgba(255,194,102,.58), 0 0 12px rgba(240,167,75,.30), 0 0 28px rgba(240,130,25,.13);
  font-variant-numeric: tabular-nums; transform: scaleY(1.03);
}
.unit {
  margin: 0 0 7px 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; letter-spacing: .16em; color: var(--amber-dim);
}
.station-name {
  position: relative; width: 100%; min-height: 1.25em; margin-top: 10px; overflow: hidden;
  text-align: center; text-overflow: ellipsis; white-space: nowrap; color: #d99b51;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(12px, 3.4vw, 15px);
  line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 7px rgba(240,167,75,.17);
}
.signal-status {
  margin-top: 6px; min-height: 1em; color: #76522e;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 7px; letter-spacing: .28em;
}

/* ----- Monitor — given real space instead of being squeezed between
   button walls. Still 200px minimum in both dimensions (YouTube's own
   requirement), but now the dominant, deliberate visual element it should
   be, not an afterthought. ----- */
.monitor-bay { width: min(80vw, 232px); flex: 0 0 auto; }
.monitor-bezel {
  padding: 8px; border-radius: 10px;
  background: linear-gradient(180deg, #4b463f 0%, #2b2823 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 0 0 2px rgba(0,0,0,.3);
}
.monitor-screen {
  position: relative; width: 100%; aspect-ratio: 1; min-width: 200px; min-height: 200px;
  overflow: hidden; border-radius: 6px;
  background: radial-gradient(ellipse at 50% 43%, #1a120b 0%, #0b0907 70%);
  box-shadow: inset 0 0 18px rgba(0,0,0,.9);
}
.youtube-player, .monitor-screen iframe {
  display: block; width: 100% !important; height: 100% !important; min-height: 200px; border: 0;
  filter: grayscale(100%) contrast(1.28) brightness(.78);
}
.monitor-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 6px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, rgba(0,0,0,.055) 1px, rgba(0,0,0,.055) 3px),
    radial-gradient(ellipse at 50% 45%, transparent 48%, rgba(0,0,0,.22) 100%);
  box-shadow: inset 0 0 18px rgba(0,0,0,.42);
}
.monitor-standby {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none;
  overflow: hidden;
  color: #6f4a27; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 7px;
  letter-spacing: .18em;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(113deg, rgba(255,255,255,.015) 0 2px, rgba(0,0,0,.035) 2px 5px),
    radial-gradient(ellipse at 50% 43%, #17130e 0%, #090806 72%);
}
.monitor-standby::before {
  content: ""; position: absolute; inset: 0;
  background-color: #6a4522;
  -webkit-mask: url("pyratedial-ship.png") center 55% / 34% no-repeat;
  mask: url("pyratedial-ship.png") center 55% / 34% no-repeat;
  opacity: .3;
}
.monitor-standby span {
  position: relative; z-index: 1; background: rgba(11,9,7,.55); padding: 3px 10px; border-radius: 2px;
}

.unmute-button {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 5;
  appearance: none; border: 1px solid #6b3a1c; border-radius: 3px; cursor: pointer;
  background: linear-gradient(180deg, #d6812f 0%, #a8601c 100%);
  color: #1c1108; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; letter-spacing: .14em; padding: 7px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.unmute-button:disabled { opacity: .5; cursor: default; }
.unmute-button:not(:disabled):active { background: #8f5119; }

/* ----- Tuning scale + needle — same component as the dial page, recolored
   for this page's darker background (the original used near-black text
   meant to sit on a lighter steel bezel). ----- */
.dial-scale {
  width: 100%; max-width: 340px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-dim); user-select: none;
}
.scale-labels { display: flex; justify-content: space-between; padding: 0 1px; font-size: 8px; letter-spacing: .05em; }
.scale-line {
  position: relative; height: 10px; margin-top: 5px; border-top: 1px solid #3a352e;
  background: repeating-linear-gradient(90deg, #3a352e 0 1px, transparent 1px 8.5%);
  background-size: 100% 5px; background-repeat: no-repeat;
}
.scale-marker {
  position: absolute; top: -5px; width: 2px; height: 13px; transform: translateX(-1px);
  background: var(--amber); box-shadow: 0 0 8px rgba(240,167,75,.5); transition: left 380ms cubic-bezier(.2,.8,.2,1);
}

/* ----- Preset strip — swipe through all 20 stations like radio presets.
   Native momentum scroll with scroll-snap, one row, always reachable with
   a thumb. Tapping a preset navigates directly to it. ----- */
.preset-strip {
  flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.preset-strip::-webkit-scrollbar { display: none; }
.preset-pill {
  flex: 0 0 auto; scroll-snap-align: center;
  width: 92px; appearance: none; border: 1px solid #3a352e; border-radius: 4px; cursor: pointer;
  background: linear-gradient(180deg, #29261f 0%, #1c1a15 100%);
  color: var(--ink); text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 9px 4px; text-align: center;
}
.preset-pill .freq {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: var(--amber-dim); letter-spacing: .03em;
}
.preset-pill .name {
  font-size: 9px; line-height: 1.15; letter-spacing: .01em; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.preset-pill.is-active {
  border-color: var(--amber-dim);
  background: linear-gradient(180deg, #3a2a15 0%, #241a0d 100%);
}
.preset-pill.is-active .freq { color: var(--amber-hot); }
.preset-pill.is-active .name { color: var(--amber); }
.preset-pill:active { background: #241f18; }

@media (max-height: 700px) {
  .hero { gap: 12px; padding: 4px 20px; }
  .display { min-height: 100px; padding: 10px 12px 11px; }
}