/* ==================================================================
   MEGA-SCOPES :: OWL-TRONIC receiver
   A 1970s hi-fi: walnut sleeve, brushed faceplate, glass tuning dial
   with a sweeping needle, analog VU meters, preset keys and two knobs.
   ================================================================== */

.rcv{max-width:1120px;margin:0 auto;position:relative}
.rcv-face{position:relative;border-radius:14px;padding:clamp(12px,2.2vw,22px);
  background:
    linear-gradient(180deg,#3a2716 0%,#2a1b0f 100%),
    repeating-linear-gradient(91deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px);
  box-shadow:0 36px 80px rgba(0,0,0,.72),inset 0 2px 0 rgba(255,255,255,.12),
             inset 0 -3px 0 rgba(0,0,0,.55);
  border:1px solid #140c05}
/* the brushed aluminium plate inside the walnut sleeve */
.rcv-face::before{content:"";position:absolute;inset:clamp(8px,1.4vw,14px);border-radius:8px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,.05) 1px 2px,transparent 2px 3px),
    linear-gradient(180deg,#c9cdd1 0%,#a9aeb3 48%,#8f959b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 4px rgba(0,0,0,.35)}
.rcv-face>*{position:relative}
.rcv-feet{height:12px;margin:0 7%;
  background:radial-gradient(ellipse 10% 100% at 8% 0,#0a0603 60%,transparent 62%),
             radial-gradient(ellipse 10% 100% at 92% 0,#0a0603 60%,transparent 62%)}

/* ---------------- top strip ---------------- */
.rcv-top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px clamp(10px,2vw,20px) 6px}
.rcv .brand b{display:block;font-family:var(--disp);font-size:clamp(18px,2.4vw,26px);
  letter-spacing:.2em;color:#23262a;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.rcv .brand span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:#3c4247;
  text-transform:uppercase}
.rcv .lamps{display:flex;gap:14px}
.rcv .lamp{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#4a4f54;display:flex;align-items:center;gap:6px}
.rcv .lamp::before{content:"";width:9px;height:9px;border-radius:50%;background:#3b2a1a;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);transition:.25s}
.rcv.tuned .lamp.tuned::before{background:#ffd400;box-shadow:0 0 10px #ffb400}
.rcv.playing .lamp.stereo::before{background:#ff2d3d;box-shadow:0 0 10px #ff2d3d}

/* ---------------- meters + dial ---------------- */
.rcv-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(10px,2vw,20px);
  padding:6px clamp(10px,2vw,20px)}
.rcv .meters{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rcv .vu{position:relative;width:clamp(110px,13vw,150px);aspect-ratio:1.45;border-radius:6px;
  overflow:hidden;background:linear-gradient(180deg,#f4d9a0,#dcb670);
  box-shadow:inset 0 0 0 3px #1b1b1d,inset 0 6px 14px rgba(0,0,0,.45)}
.rcv .vu canvas{position:absolute;inset:0;width:100%;height:100%}
.rcv .vu span{position:absolute;right:8px;bottom:5px;font-family:var(--mono);font-size:10px;
  font-weight:700;color:#5a3a12}

.rcv .dial{position:relative;border-radius:6px;overflow:hidden;min-height:clamp(110px,12vw,140px);
  background:linear-gradient(180deg,#07121a,#040a10);
  box-shadow:inset 0 0 0 3px #16191c,inset 0 10px 30px rgba(0,0,0,.9)}
.rcv .dial::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 38%)}
.rcv .scale{position:absolute;left:4%;right:4%;top:10px;height:62px}
.rcv .ticks{position:absolute;left:0;right:0;top:26px;height:14px;
  background:repeating-linear-gradient(90deg,rgba(255,196,90,.55) 0 1px,transparent 1px 2%)}
.rcv .ticks::after{content:"";position:absolute;left:0;right:0;top:-6px;height:20px;
  background:repeating-linear-gradient(90deg,rgba(255,196,90,.9) 0 2px,transparent 2px 10%)}
.rcv .freqs{position:absolute;left:0;right:0;top:44px;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10px;color:rgba(255,196,90,.8);letter-spacing:.08em}
.rcv .marks{position:absolute;left:0;right:0;top:0;height:22px}
.rcv .marks button{position:absolute;top:0;translate:-50% 0;min-width:22px;height:20px;padding:0 5px;
  border-radius:3px;border:1px solid rgba(34,211,238,.45);background:rgba(34,211,238,.08);
  color:#7eeaff;font-family:var(--mono);font-size:10px;cursor:pointer;transition:.2s}
.rcv .marks button:hover,.rcv .marks button[aria-current="true"]{background:#22d3ee;color:#031016;
  box-shadow:0 0 12px rgba(34,211,238,.8)}
.rcv .needle{position:absolute;top:6px;bottom:34px;left:4%;width:3px;margin-left:-1px;
  background:#ff2d3d;box-shadow:0 0 10px #ff2d3d,0 0 2px #fff;border-radius:2px;
  transition:left .9s cubic-bezier(.3,.1,.2,1)}
.rcv .snow{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;
  mix-blend-mode:screen;transition:opacity .15s;image-rendering:pixelated}
.rcv.scanning .snow{opacity:.35}
.rcv .readout{position:absolute;left:0;right:0;bottom:0;display:flex;gap:14px;align-items:center;
  padding:7px 12px;border-top:1px solid rgba(255,196,90,.15);background:rgba(0,0,0,.35)}
.rcv .readout .freq{font-family:var(--mono);font-size:13px;color:#ffc45a;
  text-shadow:0 0 8px rgba(255,170,40,.8);white-space:nowrap}
.rcv .readout .now{font-family:var(--mono);font-size:12px;color:#bff6ff;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 0 8px rgba(34,211,238,.6)}

/* ---------------- controls ---------------- */
.rcv-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(12px,2.4vw,28px);padding:14px clamp(10px,2vw,20px) 14px}
.rcv .knobwrap{display:grid;justify-items:center;gap:6px}
.rcv .klabel{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:#33383d}
.rcv .knob{position:relative;width:62px;height:62px;border-radius:50%;cursor:grab;touch-action:none;
  background:
    repeating-conic-gradient(from 0deg,#2b2e31 0 4deg,#3a3e42 4deg 8deg);
  box-shadow:0 6px 12px rgba(0,0,0,.45),inset 0 0 0 5px #1c1e20,inset 0 2px 0 7px rgba(255,255,255,.08)}
.rcv .knob.big{width:clamp(78px,9vw,96px);height:clamp(78px,9vw,96px)}
.rcv .knob::before{content:"";position:absolute;inset:22%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d9dde0,#8b9196 70%);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.3)}
.rcv .knob i{position:absolute;left:50%;top:9%;width:3px;height:22%;margin-left:-1.5px;
  border-radius:2px;background:#ff2d3d;transform-origin:50% 186%}
.rcv .knob.big i{transform-origin:50% 186%}
.rcv .knob:active{cursor:grabbing}
.rcv .knob:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}

.rcv .centre{display:grid;gap:12px;min-width:0}
.rcv .presets{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.rcv .presets button{height:38px;border-radius:3px 3px 6px 6px;cursor:pointer;
  border:1px solid #1b1d1f;background:linear-gradient(180deg,#f3f4f5,#c7cbcf);
  font-family:var(--mono);font-size:12px;font-weight:700;color:#26292c;
  box-shadow:0 4px 0 #6b7075,0 6px 8px rgba(0,0,0,.35);transition:transform .08s,box-shadow .08s}
.rcv .presets button:hover{background:linear-gradient(180deg,#fff,#d6dade)}
.rcv .presets button[aria-pressed="true"]{transform:translateY(3px);
  box-shadow:0 1px 0 #6b7075,0 2px 3px rgba(0,0,0,.35);
  background:linear-gradient(180deg,#22d3ee,#0ea5c0);color:#02141a}

.rcv .transport{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rcv .tbtn{width:42px;height:42px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  border:1px solid #1b1d1f;background:linear-gradient(180deg,#3a3e42,#24272a);
  box-shadow:0 3px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12)}
.rcv .tbtn svg{width:18px;height:18px;fill:#e6ebef}
.rcv .tbtn.play{width:52px;height:52px;background:linear-gradient(180deg,#ff4452,#c61e2b)}
.rcv .tbtn:hover{filter:brightness(1.15)}
.rcv .tbtn:focus-visible,.rcv .presets button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.rcv .tbtn .i-pause{display:none}
.rcv.playing .tbtn .i-pause{display:block}
.rcv.playing .tbtn .i-play{display:none}
.rcv .counter{margin-left:auto;font-family:var(--mono);font-size:13px;color:#2a2e32;
  background:#0a0d10;color:#ffc45a;padding:6px 10px;border-radius:4px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.8);white-space:nowrap}
.rcv .counter b{font-weight:400}

/* the seek control styled as a slide fader */
.rcv .seek{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer}
.rcv .seek::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#1a1d20;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
.rcv .seek::-moz-range-track{height:6px;border-radius:3px;background:#1a1d20}
.rcv .seek::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:22px;margin-top:-8px;
  border-radius:3px;background:linear-gradient(180deg,#f2f3f4,#9ea3a8);border:1px solid #222;
  box-shadow:0 2px 4px rgba(0,0,0,.5)}
.rcv .seek::-moz-range-thumb{width:16px;height:22px;border-radius:3px;
  background:linear-gradient(180deg,#f2f3f4,#9ea3a8);border:1px solid #222}
.rcv .seek:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.rcv-note{max-width:1120px;margin:14px auto 0;min-height:1.4em;color:var(--dim);font-size:14px}
.rcv-note a{color:var(--cyan)}

/* ---------------- station guide ---------------- */
.guide{max-width:1120px;margin:clamp(36px,6vw,64px) auto 0}
.stlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.strow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel);transition:.2s}
.strow:hover{border-color:#2a3a52}
.strow.on{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset}
.stbtn{display:grid;grid-template-columns:28px 56px minmax(0,1fr) auto auto;align-items:center;
  gap:14px;padding:8px 10px;background:none;border:0;color:inherit;text-align:left;cursor:pointer;
  font:inherit;min-width:0}
.stbtn .pre{font-family:var(--mono);font-size:12px;color:var(--cyan);text-align:center}
.stbtn img{width:56px;height:56px;border-radius:4px;object-fit:cover;display:block}
.stbtn .t{min-width:0}
.stbtn .t b{display:block;font-weight:500;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stbtn .ft{display:block;font-size:13px;color:var(--dim)}
.stbtn .d{font-family:var(--mono);font-size:12px;color:var(--dim)}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 7px;border-radius:3px;white-space:nowrap}
.tag.full{color:#9fffc4;border:1px solid rgba(46,230,168,.45)}
.tag.prev{color:#ffd98a;border:1px solid rgba(255,196,90,.45)}
.outs{display:flex;gap:12px;padding-right:14px}
.outs a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);text-decoration:none}
.outs a:hover{color:var(--cyan)}
.stbtn:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:8px}

/* ---------------- narrow screens ---------------- */
@media (max-width:860px){
  .rcv-main{grid-template-columns:1fr}
  .rcv .meters{order:2;grid-template-columns:1fr 1fr}
  .rcv .vu{width:100%}
  .rcv-controls{grid-template-columns:1fr 1fr;grid-template-areas:"c c" "t v";row-gap:18px}
  .rcv .transport{justify-content:center}
  .rcv .counter{margin-left:8px}
  .rcv-controls .centre{grid-area:c}
  .rcv-controls .knobwrap:first-child{grid-area:t}
  .rcv-controls .knobwrap:last-child{grid-area:v}
  .rcv .presets{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rcv .lamps{display:none}
}
@media (max-width:640px){
  .strow{grid-template-columns:1fr}
  .stbtn{grid-template-columns:22px 48px minmax(0,1fr) auto;gap:10px}
  .stbtn img{width:48px;height:48px}
  .stbtn .tag{display:none}
  .outs{padding:0 12px 10px 90px}
}
@media (prefers-reduced-motion:reduce){
  .rcv .needle{transition:none}
}