/* ============================================================
   TERRAPIN TUNER — a 1970s silver-face receiver for the
   Grateful Dead live archive. Pure CSS, no dependencies.
   ============================================================ */

:root{
  --bg:#0b0c0d;
  /* brushed aluminum chassis */
  --alu-hi:#e7e9ec;
  --alu:#c3c7cc;
  --alu-lo:#9da1a7;
  --alu-edge:#6c7075;
  --engrave:#5b5f64;
  /* lit blue-green dial glass */
  --glass-0:#06181c;
  --glass-1:#0b2a2e;
  --glow:#54e6d2;
  --glow-soft:#7ff0e0;
  --glow-dim:#2c6f69;
  --lit:#e4fdf6;
  /* warm accents */
  --amber:#f1b24c;
  --red:#df4631;
  /* source colors */
  --sbd:#5fd08a;
  --mtx:#f1b24c;
  --aud:#7db4e6;
  /* vu meter */
  --vu-face:#efe7d2;
  --vu-ink:#23201a;
  --vu-red:#cf3c28;
  /* knobs */
  --knob-hi:#43474d;
  --knob:#27292d;
  --knob-lo:#0d0e10;
  --panel-bg:#14171a;
  --r:14px;
  font-synthesis:none;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
/* honor the hidden attr even on elements we style with display:flex */
[hidden]{display:none!important;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:#e9ecef;
  font-family:"Helvetica Neue",Arial,"Segoe UI",system-ui,sans-serif;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}
button:disabled{cursor:default;}

/* ============================================================
   RECEIVER CHASSIS
   ============================================================ */
.receiver{
  position:relative;
  height:100dvh;
  display:flex;
  flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:
    linear-gradient(178deg,#f0f2f4 0%,#cfd3d8 7%,#b4b8be 12%,
                    #c6cacf 50%,#aeb2b8 88%,#8f9399 95%,#7c8086 100%);
  isolation:isolate;
}
/* brushed-metal grain + soft vignette */
.receiver::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.05) 0 1px,
      rgba(0,0,0,.045) 1px 2px,
      rgba(255,255,255,.015) 2px 3px),
    radial-gradient(140% 90% at 50% 38%,
      rgba(255,255,255,.22),rgba(0,0,0,0) 55%),
    radial-gradient(130% 120% at 50% 110%,
      rgba(0,0,0,.34),rgba(0,0,0,0) 60%);
}

/* ============================================================
   BRAND BAR
   ============================================================ */
.brand-bar{
  flex:0 0 auto;
  display:flex;align-items:center;gap:14px;
  padding:7px clamp(10px,2.2vw,22px);
  background:linear-gradient(180deg,#2b2d30,#191a1c 60%,#0f1011);
  border-bottom:1px solid #040506;
  box-shadow:0 1px 0 rgba(255,255,255,.16),0 3px 9px rgba(0,0,0,.4);
}
.brand{display:flex;align-items:center;gap:9px;}
.logo-mark{
  width:clamp(20px,3.4vmin,28px);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,#0a1c1e 0 30%,transparent 31%),
    conic-gradient(from 0deg,var(--red) 0 33.3%,#f2f3f4 0 66.6%,#2b6cc4 0);
  box-shadow:0 0 0 2px #0c0d0e,0 0 12px var(--glow-dim),inset 0 0 6px rgba(0,0,0,.6);
  position:relative;flex:none;
}
.logo-mark::after{ /* lightning bolt */
  content:"";position:absolute;inset:0;margin:auto;width:42%;height:60%;
  background:#f4f6f7;
  clip-path:polygon(58% 0,12% 56%,46% 56%,38% 100%,90% 40%,52% 40%);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.7));
}
.brand-name{
  font-weight:800;letter-spacing:.16em;font-size:clamp(12px,2.3vmin,17px);
  color:#eef0f2;text-shadow:0 1px 0 #000;
}
.brand-name em{font-style:normal;color:var(--glow);text-shadow:0 0 10px var(--glow-dim);}
.brand-sub{
  flex:1;min-width:0;
  font-size:clamp(7px,1.35vmin,10px);letter-spacing:.34em;
  color:#7e8186;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;
}
.brand-bar{flex-wrap:wrap;}
.actions{display:flex;flex-wrap:wrap;gap:6px;flex:0 1 auto;justify-content:flex-end;}

.chip{
  font-size:clamp(8.5px,1.4vmin,11px);font-weight:800;letter-spacing:.1em;
  padding:5px 10px;border-radius:7px;color:#cfd2d6;
  background:linear-gradient(180deg,#3a3d41,#212327);
  box-shadow:0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px #0a0b0c,
             0 2px 4px rgba(0,0,0,.5);
  transition:transform .08s,color .15s,box-shadow .15s;
}
.chip:hover{color:#fff;}
.chip:active{transform:translateY(1px);}
/* Show-jumper chips share the warm accent; tool chips the cool one. */
.chip-random,.chip-today,.chip-legends{color:var(--amber);}
.chip-eras,.chip-devices,.chip-skin{color:var(--glow-soft);}

/* ============================================================
   DIAL GLASS
   ============================================================ */
.dial-glass{
  flex:1 1 39%;
  position:relative;min-height:clamp(108px,21vh,210px);
  margin:clamp(7px,1.6vmin,15px) clamp(10px,2.2vw,22px) 0;
  border-radius:var(--r);
  background:
    radial-gradient(120% 150% at 50% 8%,rgba(84,230,210,.16),transparent 60%),
    linear-gradient(180deg,var(--glass-1),var(--glass-0) 70%);
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.85),
    inset 0 0 30px rgba(0,0,0,.6),
    inset 0 0 14px rgba(84,230,210,.10),
    0 1px 0 rgba(255,255,255,.5);
  overflow:hidden;
}
/* glass reflection sheen */
.dial-glass::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(106deg,rgba(255,255,255,.12) 0%,
            rgba(255,255,255,.03) 18%,transparent 34%);
}

/* --- year scale ruler --- */
.scale{
  position:absolute;left:5%;right:5%;top:9px;height:26px;
}
.scale .tick{
  position:absolute;bottom:0;width:1px;background:var(--glow-dim);
  transform:translateX(-50%);
}
.scale .tick.minor{height:6px;opacity:.55;}
.scale .tick.major{height:12px;background:var(--glow);opacity:.9;}
.scale .tick .yr{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  font-size:clamp(7px,1.3vmin,10px);font-weight:700;letter-spacing:.04em;
  color:var(--glow-soft);text-shadow:0 0 6px var(--glow-dim);
}
.scale-needle{
  position:absolute;top:4px;height:34px;width:2px;left:5%;
  background:linear-gradient(180deg,#ff6a4d,#ffd24a);
  box-shadow:0 0 7px 1px rgba(255,120,70,.9);
  transform:translateX(-50%);
  transition:left .12s linear;
  z-index:4;
}
.scale-needle::before{
  content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#ff8a4d;
}

/* --- the big lit readout --- */
.readout{
  position:absolute;left:0;right:0;top:41px;bottom:25px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 12px;gap:1px;
}
.readout-date{
  font-size:clamp(19px,5.5vmin,50px);font-weight:800;letter-spacing:.05em;
  color:var(--lit);line-height:1;
  text-shadow:0 0 16px var(--glow),0 0 34px var(--glow-dim);
}
.readout-venue{
  font-size:clamp(10px,2.1vmin,17px);font-weight:600;letter-spacing:.02em;
  color:var(--glow-soft);max-width:92%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 0 10px var(--glow-dim);
}
.readout-meta{
  display:flex;align-items:center;gap:8px;margin-top:3px;
  font-size:clamp(8px,1.55vmin,12px);
}
#readout-city{color:#6fb6ad;letter-spacing:.06em;}
.src-badge{
  font-weight:800;letter-spacing:.1em;padding:2px 7px;border-radius:4px;
  font-size:.92em;color:#06181c;background:var(--sbd);
}
.src-badge[data-t="MTX"]{background:var(--mtx);}
.src-badge[data-t="AUD"]{background:var(--aud);}
.src-more{
  font-size:.92em;font-weight:700;letter-spacing:.04em;
  color:var(--glow-soft);text-decoration:underline;text-underline-offset:2px;
  padding:2px 2px;
}
.src-more:hover{color:#fff;}

/* --- signal strength --- */
.signal{
  position:absolute;left:0;right:0;bottom:7px;
  display:flex;align-items:center;gap:7px;padding:0 13px;
}
.signal-label{
  font-size:clamp(7px,1.25vmin,9px);font-weight:800;letter-spacing:.22em;
  color:var(--glow-dim);
}
.signal-bars{display:flex;align-items:flex-end;gap:2.5px;height:14px;flex:1;}
.signal-bars i{
  width:clamp(3px,.9vmin,6px);background:var(--glow-dim);border-radius:1px;
  transition:background .14s,box-shadow .14s,height .14s;
}
.signal-bars i.on{background:var(--glow);box-shadow:0 0 6px var(--glow);}
.signal-bars i.hot{background:#ff7a4d;box-shadow:0 0 7px #ff7a4d;}
.fav{
  font-size:clamp(13px,2.5vmin,19px);color:var(--glow-dim);
  line-height:1;padding:0 2px;transition:color .15s,transform .12s,text-shadow .15s;
}
.fav:hover{color:var(--glow-soft);}
.fav[aria-pressed="true"]{color:var(--amber);text-shadow:0 0 12px var(--amber);}
.fav:active{transform:scale(1.25);}

/* --- between-stations static --- */
.static-screen{
  position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;background:rgba(4,12,13,.78);
}
.static-noise{
  position:absolute;inset:0;opacity:.5;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:static-jitter .26s steps(3) infinite;
}
@keyframes static-jitter{
  0%{background-position:0 0;opacity:.5;}
  33%{background-position:-40px 24px;opacity:.34;}
  66%{background-position:30px -28px;opacity:.55;}
  100%{background-position:-18px 12px;opacity:.42;}
}
.static-text{position:relative;text-align:center;display:flex;
  flex-direction:column;gap:9px;align-items:center;padding:0 16px;}
.static-line{
  font-size:clamp(9px,1.8vmin,13px);letter-spacing:.22em;font-weight:700;
  color:#9fb8b3;text-transform:lowercase;
}
.static-jump{
  font-size:clamp(10px,2vmin,15px);font-weight:800;letter-spacing:.04em;
  color:#06181c;background:var(--glow);padding:7px 15px;border-radius:8px;
  box-shadow:0 0 18px var(--glow-dim);transition:transform .1s,box-shadow .15s;
}
.static-jump:hover{box-shadow:0 0 26px var(--glow);}
.static-jump:active{transform:translateY(1px);}

/* ============================================================
   CONTROL DECK — VU meters + knobs
   ============================================================ */
.deck{
  flex:1 1 52%;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,2.4vw,40px);
  padding:clamp(4px,1.4vmin,14px) clamp(10px,2.4vw,30px);
  min-height:0;
}

/* --- VU meter --- */
.vu{
  flex:0 1 clamp(118px,25vmin,280px);
  align-self:center;
  background:linear-gradient(180deg,var(--vu-face),#ddd3b6);
  border-radius:8px;
  padding:5px 7px 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 2px 6px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.55),0 3px 8px rgba(0,0,0,.4);
}
.vu-face{display:block;width:100%;height:auto;}
.vu-arc{stroke:var(--vu-ink);stroke-width:2.4;}
.vu-arc-red{stroke:var(--vu-red);stroke-width:3.4;}
.vu-tick{stroke:var(--vu-ink);stroke-width:1.6;}
.vu-tick.red{stroke:var(--vu-red);}
.vu-tick.minor{stroke-width:1;opacity:.7;}
.vu-needle{
  stroke:#22242a;stroke-width:2.2;stroke-linecap:round;
  transform-box:view-box;transform-origin:100px 104px;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.vu-hub{fill:#1c1d22;}
.vu-label{font:800 15px "Helvetica Neue",sans-serif;fill:var(--vu-ink);
  letter-spacing:.12em;}
.vu-side{font:700 8px "Helvetica Neue",sans-serif;fill:#8a8366;
  letter-spacing:.3em;}
.vu-tnum{font:700 8.5px "Helvetica Neue",sans-serif;fill:var(--vu-ink);}
.vu-tnum.red{fill:var(--vu-red);}

/* --- knobs --- */
.knobs{display:flex;gap:clamp(10px,3vw,46px);align-items:flex-start;}
.knob-unit{display:flex;flex-direction:column;align-items:center;gap:7px;}
.knob{
  width:clamp(70px,16.5vmin,142px);aspect-ratio:1;border-radius:50%;
  position:relative;touch-action:none;
  transition:transform .03s linear;
  outline:none;
}
.knob-skirt{
  position:absolute;inset:0;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,
      #34373c 0deg 5deg,#1c1e21 5deg 10deg);
  box-shadow:0 4px 10px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.4);
}
.knob-cap{
  position:absolute;inset:14%;border-radius:50%;
  background:
    radial-gradient(circle at 38% 30%,#54585e 0%,#303237 34%,
                    #1a1b1f 72%,#0d0e10 100%);
  box-shadow:inset 0 2px 5px rgba(255,255,255,.18),
             inset 0 -7px 14px rgba(0,0,0,.7),
             0 1px 2px rgba(0,0,0,.5);
}
.knob-mark{
  position:absolute;left:50%;top:7%;width:clamp(3px,.85vmin,6px);height:26%;
  border-radius:3px;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--glow-soft),var(--glow));
  box-shadow:0 0 9px var(--glow);
}
.knob:focus-visible .knob-skirt{box-shadow:0 0 0 3px var(--glow),0 4px 10px rgba(0,0,0,.55);}
.knob.grab{cursor:grabbing;}
.knob.grab .knob-cap{filter:brightness(1.16);}

.knob-meta{display:flex;flex-direction:column;align-items:center;gap:1px;}
.knob-meta label{
  font-size:clamp(7.5px,1.4vmin,11px);font-weight:800;letter-spacing:.2em;
  color:var(--engrave);text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.knob-meta output{
  font-size:clamp(13px,3vmin,24px);font-weight:800;letter-spacing:.03em;
  color:#1b1d20;min-width:2.4em;text-align:center;
  padding:1px 9px;border-radius:5px;
  background:linear-gradient(180deg,#aab0a2,#878d80);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.45),
             inset 0 0 0 1px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}

/* ============================================================
   TRANSPORT
   ============================================================ */
.transport{
  flex:0 0 auto;
  display:flex;align-items:center;gap:clamp(8px,1.8vw,18px);
  padding:8px clamp(10px,2.4vw,24px)
          calc(8px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#26282b,#161719 70%,#0d0e0f);
  border-top:1px solid #050606;
  box-shadow:0 -1px 0 rgba(255,255,255,.14);
}
.transport-controls{display:flex;align-items:center;gap:7px;flex:none;}
.t-btn{
  width:clamp(34px,7vmin,52px);aspect-ratio:1;border-radius:50%;
  font-size:clamp(12px,2.4vmin,19px);color:#cdd0d3;
  display:grid;place-items:center;
  background:radial-gradient(circle at 40% 32%,#43464b,#26282b 70%,#16171a);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22),
             inset 0 -4px 8px rgba(0,0,0,.6),
             0 2px 5px rgba(0,0,0,.55);
  transition:transform .07s,color .15s;
}
.t-btn:hover:not(:disabled){color:#fff;}
.t-btn:active:not(:disabled){transform:translateY(1px) scale(.97);}
.t-btn:disabled{opacity:.4;}
.t-play{
  width:clamp(42px,8.6vmin,64px);font-size:clamp(15px,3vmin,24px);
  color:var(--glow);
}
.t-play.playing{color:var(--amber);}
.t-play:hover:not(:disabled){color:var(--glow-soft);}

.track{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.track-line{display:flex;align-items:baseline;gap:8px;font-size:clamp(10px,1.9vmin,14px);}
.track-num{
  font-weight:800;color:var(--amber);flex:none;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.track-title{
  flex:1;min-width:0;color:#eef0f2;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.track-time{
  flex:none;color:#83878c;font-variant-numeric:tabular-nums;
  font-size:.92em;letter-spacing:.02em;
}
.scrub{display:flex;align-items:center;}
#scrubber{
  -webkit-appearance:none;appearance:none;width:100%;height:18px;
  background:transparent;cursor:pointer;
}
#scrubber::-webkit-slider-runnable-track{
  height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--glow) var(--p,0%),
            #34373b var(--p,0%));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
}
#scrubber::-moz-range-track{
  height:5px;border-radius:3px;background:#34373b;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
}
#scrubber::-moz-range-progress{height:5px;border-radius:3px;background:var(--glow);}
#scrubber::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;margin-top:-5px;
  background:radial-gradient(circle at 38% 32%,#fff,#c2c6ca 60%,#84888d);
  box-shadow:0 0 8px var(--glow-dim),0 1px 3px rgba(0,0,0,.7);
}
#scrubber::-moz-range-thumb{
  width:15px;height:15px;border:0;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#fff,#c2c6ca 60%,#84888d);
  box-shadow:0 0 8px var(--glow-dim),0 1px 3px rgba(0,0,0,.7);
}
.chip-setlist{flex:none;color:var(--amber);}

/* ============================================================
   SLIDING PANELS
   ============================================================ */
.scrim{
  position:fixed;inset:0;z-index:40;
  background:rgba(3,6,7,.62);backdrop-filter:blur(2px);
  animation:fade .2s ease;
}
@keyframes fade{from{opacity:0;}to{opacity:1;}}

.panel{
  position:fixed;top:0;right:0;bottom:0;z-index:50;
  width:min(440px,90vw);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#1b1f22,#101315);
  border-left:1px solid #000;
  box-shadow:-18px 0 50px rgba(0,0,0,.6);
  animation:slide-in .26s cubic-bezier(.22,1,.36,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.panel-wide{width:min(620px,94vw);}
@keyframes slide-in{from{transform:translateX(100%);}to{transform:translateX(0);}}
.panel.closing{animation:slide-out .2s ease forwards;}
@keyframes slide-out{to{transform:translateX(100%);}}

.panel-head{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid #000;
  background:linear-gradient(180deg,#2a2e31,#1a1d20);
}
.panel-head h2{
  font-size:15px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#eef0f2;
}
.panel-close{
  font-size:26px;line-height:1;color:#9a9ea3;width:34px;height:34px;
  border-radius:7px;display:grid;place-items:center;
}
.panel-close:hover{color:#fff;background:rgba(255,255,255,.07);}
.panel-sub{
  flex:none;padding:11px 18px;font-size:12px;color:var(--glow-soft);
  letter-spacing:.03em;border-bottom:1px solid #000;background:#0c0f10;
}
.panel-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 0;}
.panel-note{
  flex:none;padding:12px 18px;font-size:11px;line-height:1.55;
  color:#8b9aa0;border-top:1px solid #000;background:#0c0f10;
}
.panel-note b{color:#c8d6da;}

/* setlist + sources rows */
.row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:11px 18px;border-bottom:1px solid rgba(255,255,255,.045);
  transition:background .12s;
}
.row:hover{background:rgba(84,230,210,.06);}
.row.active{background:rgba(84,230,210,.11);}
.row-num{
  flex:none;width:26px;font-weight:800;color:#71757a;
  font-variant-numeric:tabular-nums;font-size:13px;text-align:right;
}
.row.active .row-num{color:var(--glow);}
.row-main{flex:1;min-width:0;}
.row-title{
  font-size:13.5px;color:#e7eaec;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row.active .row-title{color:var(--glow-soft);}
.row-meta{font-size:11px;color:#80858a;margin-top:2px;letter-spacing:.02em;}
.row-time{flex:none;font-size:11.5px;color:#80858a;
  font-variant-numeric:tabular-nums;}
.row-eq{flex:none;display:flex;gap:2px;align-items:flex-end;height:13px;width:14px;}
.row-eq span{width:3px;background:var(--glow);border-radius:1px;
  animation:eq .9s ease-in-out infinite;}
.row-eq span:nth-child(2){animation-delay:.3s;}
.row-eq span:nth-child(3){animation-delay:.6s;}
@keyframes eq{0%,100%{height:3px;}50%{height:13px;}}

.badge{
  flex:none;font-size:10px;font-weight:800;letter-spacing:.08em;
  padding:2px 6px;border-radius:4px;color:#06181c;background:var(--sbd);
}
.badge[data-t="MTX"]{background:var(--mtx);}
.badge[data-t="AUD"]{background:var(--aud);}
.stars{color:var(--amber);font-size:11px;letter-spacing:1px;}

/* ============================================================
   THE GUIDE
   ============================================================ */
.guide-sec{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.05);}
.guide-sec h3{
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--glow);margin-bottom:4px;
}
.guide-hero{
  font-size:13px;color:#c6d2d4;line-height:1.5;margin-bottom:10px;
}
.guide-hero b{color:#fff;}
.guide-hero .big{
  display:block;font-size:21px;font-weight:800;color:var(--lit);
  letter-spacing:.03em;margin-bottom:3px;
}
.gcard{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 11px;margin:6px 0;border-radius:9px;
  background:linear-gradient(180deg,#22272a,#181c1e);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .08s,box-shadow .15s;
}
.gcard:hover{box-shadow:inset 0 0 0 1px var(--glow-dim),0 4px 12px rgba(0,0,0,.4);}
.gcard:active{transform:scale(.99);}
.gcard-date{
  flex:none;text-align:center;width:52px;
}
.gcard-date .yr{font-size:17px;font-weight:800;color:var(--glow-soft);
  display:block;line-height:1;}
.gcard-date .md{font-size:9.5px;color:#80858a;letter-spacing:.08em;
  font-weight:700;}
.gcard-main{flex:1;min-width:0;}
.gcard-venue{font-size:13px;color:#e7eaec;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gcard-note{font-size:11px;color:#869aa0;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gcard-note.star{color:var(--amber);}
.gcard-go{flex:none;color:var(--glow);font-size:17px;}

.era-grid{display:flex;flex-wrap:wrap;gap:7px;}
.era-btn{
  font-size:11px;font-weight:700;padding:7px 11px;border-radius:7px;
  color:#cdd6d8;background:#23282b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.era-btn:hover{box-shadow:inset 0 0 0 1px var(--glow-dim);color:#fff;}
.era-btn b{color:var(--glow-soft);}
.guide-empty{padding:8px 0;font-size:12px;color:#80858a;font-style:italic;}

/* ============================================================
   PORTRAIT — stack VUs above the knobs, give the dial glass more
   vertical room. Works phone-portrait, tablet-portrait, and tall
   desktop windows.
   ============================================================ */
@media (orientation:portrait){
  .deck{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "vul vur"
      "knobs knobs";
    gap:clamp(10px,2.4vmin,22px) clamp(12px,3vw,28px);
    align-items:center;
    justify-items:center;
    padding:clamp(10px,2.4vmin,22px) clamp(10px,3vw,26px);
  }
  #vu-left {grid-area:vul; width:100%; max-width:clamp(170px,38vw,300px);}
  #vu-right{grid-area:vur; width:100%; max-width:clamp(170px,38vw,300px);}
  .knobs   {grid-area:knobs;}
  /* portrait has more vertical room — let the readout breathe */
  .dial-glass{min-height:clamp(150px,26vh,260px);}
  .readout-date{font-size:clamp(26px,7.5vmin,58px);}
  .readout-venue{font-size:clamp(12px,2.4vmin,18px);}
  /* knobs scale by viewport-width too in portrait (vmin alone is too small) */
  .knob{width:clamp(78px,22vw,150px);}
}

@media (orientation:portrait) and (max-width:520px){
  /* phone-portrait: free up brand-bar room */
  .brand-sub{display:none;}
}

/* desktop: contain the receiver nicely */
@media (min-width:1100px){
  body{display:grid;place-items:center;
    background:radial-gradient(130% 100% at 50% 0%,#1a1c1e,#050606 75%);}
  .receiver{
    height:min(100dvh,760px);width:min(100vw,1240px);
    border-radius:18px;overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px #2c2e30,
               inset 0 0 0 1px rgba(255,255,255,.3);
  }
}

/* ============================================================
   ERAS LIST  (rows inside the Eras panel)
   ============================================================ */
.era-row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.045);
  transition:background .12s;
}
.era-row:hover{background:rgba(84,230,210,.06);}
.era-info{flex:1;min-width:0;}
.era-row .era-name{
  font-size:14px;font-weight:700;color:#e7eaec;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.era-row .era-sub{
  font-size:11.5px;color:#869aa0;margin-top:2px;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.era-row .era-go{flex:none;color:var(--glow);font-size:18px;}

/* ============================================================
   SKIN CHOOSER
   ============================================================ */
.skin-card{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.045);
  transition:background .12s;
}
.skin-card:hover{background:rgba(84,230,210,.06);}
.skin-card.active{background:rgba(84,230,210,.10);}
.skin-swatch{
  flex:none;width:72px;height:44px;border-radius:7px;position:relative;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 2px 5px rgba(0,0,0,.5);
}
.skin-swatch::after{
  content:"";position:absolute;left:14%;right:14%;top:25%;height:52%;border-radius:4px;
}
.skin-info{flex:1;min-width:0;}
.skin-name{font-size:14px;font-weight:700;color:#e7eaec;display:block;}
.skin-sub{font-size:11.5px;color:#8c9095;margin-top:2px;display:block;}
.skin-mark{flex:none;color:transparent;font-size:18px;font-weight:800;}
.skin-card.active .skin-mark{color:var(--glow);}

.skin-swatch-silver{background:linear-gradient(180deg,#e7e9ec 0%,#b6babf 50%,#8f9399 100%);}
.skin-swatch-silver::after{background:linear-gradient(180deg,#0b2a2e,#06181c);box-shadow:0 0 8px #54e6d2 inset;}
/* Walnut/Marshall — black tolex top + brass control panel preview */
.skin-swatch-walnut{
  background:
    linear-gradient(180deg,#1a1a1c 0%,#0c0c0e 18%,
                    #f5e08c 22%,#c8a04c 50%,#7a5820 78%,
                    #1a1a1c 82%,#0c0c0e 100%);
}
.skin-swatch-walnut::after{
  background:linear-gradient(180deg,#1a0e08,#0c0604);
  box-shadow:0 0 8px #ffb845 inset;
}
/* Steal Your Face — full tie-dye spiral preview */
.skin-swatch-syf{
  background:conic-gradient(from 0deg at 50% 50%,
    #d62820,#ff8c28,#ffdc28,#50c828,#288cff,#8c28ff,#ff28c8,#d62820);
}
.skin-swatch-syf::after{
  background:linear-gradient(180deg,#1a0828,#0c0418);
  box-shadow:0 0 12px #ff3a4d inset;
}

/* ============================================================
   DEVICES PANEL
   ============================================================ */
.devices-tip{
  padding:18px;font-size:13.5px;line-height:1.55;color:#c6d0d2;
}
.devices-tip b{color:#fff;}
.devices-tip .icon-note{
  display:flex;gap:12px;padding:14px;margin-top:12px;border-radius:9px;
  background:rgba(84,230,210,.06);box-shadow:inset 0 0 0 1px rgba(84,230,210,.18);
}
.devices-tip .icon-note .glyph{
  font-size:22px;color:var(--glow);flex:none;line-height:1;margin-top:2px;
}

/* ============================================================
   SKIN: MARSHALL STACK  (black tolex · brass control panel ·
   salt-and-pepper grille cloth · gold knobs)
   ============================================================ */
body.skin-walnut{
  --bg:#08080a;
  --alu-hi:#2a2a2c; --alu:#16161a; --alu-lo:#0a0a0c; --alu-edge:#040405;
  --engrave:#b89958;
  --glass-0:#0a0604; --glass-1:#1a0e05;
  --glow:#ffb845; --glow-soft:#ffd070; --glow-dim:#7a4f10;
  --lit:#fff0c8;
  --amber:#ffd158;
  --vu-face:#f0d590; --vu-ink:#2a1a08;
}
/* Outer cabinet: black tolex/leatherette base */
body.skin-walnut .receiver{
  background:linear-gradient(180deg,#1a1a1c 0%,#0c0c0e 60%,#050506 100%);
}
/* Crosshatched leatherette texture + white piping at the edges */
body.skin-walnut .receiver::before{
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.025) 0 1px,
      rgba(0,0,0,.06) 1px 3px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.025) 0 1px,
      rgba(0,0,0,.06) 1px 3px),
    radial-gradient(160% 110% at 50% 50%,transparent 40%,rgba(0,0,0,.45) 95%);
}
/* Brand-bar: top of the head cabinet, with the wordmark in a Marshall-script gold */
body.skin-walnut .brand-bar{
  background:linear-gradient(180deg,#1c1c1e,#0a0a0c 70%,#050506);
  box-shadow:
    inset 0 1px 0 rgba(255,250,200,.10),
    0 1px 0 rgba(255,250,200,.18),
    0 3px 9px rgba(0,0,0,.6);
}
body.skin-walnut .brand-name{
  font-family:"Snell Roundhand","Brush Script MT","Lucida Handwriting","Segoe Script",cursive;
  font-style:italic;font-weight:700;letter-spacing:0;
  font-size:clamp(16px,3.2vmin,24px);
  color:#ffeebd;
  text-shadow:1px 1px 0 rgba(0,0,0,.5),0 0 9px rgba(255,200,80,.15);
}
body.skin-walnut .brand-name em{color:#ffeebd;text-shadow:1px 1px 0 rgba(0,0,0,.5);}
body.skin-walnut .brand-sub{color:#a88940;}
body.skin-walnut .logo-mark{
  /* swap to a single brass dot — the Marshall pilot light */
  background:radial-gradient(circle at 35% 30%,#fff4c0,#ffb845 50%,#7a4f10);
  box-shadow:0 0 0 2px #0a0a0c,0 0 14px rgba(255,184,69,.7),inset 0 0 4px rgba(80,40,0,.6);
}
body.skin-walnut .logo-mark::after{content:none;}    /* drop the SYF bolt for Marshall */
/* Chips on the brass top of head */
body.skin-walnut .chip{
  background:linear-gradient(180deg,#2a2a2c,#16161a);
  box-shadow:
    0 1px 0 rgba(255,250,200,.18),
    inset 0 0 0 1px rgba(255,200,80,.22),
    0 2px 4px rgba(0,0,0,.6);
}
/* Dial glass becomes the brushed-brass control panel */
body.skin-walnut .dial-glass{
  background:
    repeating-linear-gradient(90deg,
      rgba(255,240,180,.06) 0 1px,
      rgba(0,0,0,.06) 1px 2px),
    linear-gradient(180deg,
      #f7e498 0%,#e8c870 8%,#d4ae58 25%,
      #c8a04c 50%,#b89240 75%,#a78338 92%,#7a5820 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,250,200,.7),
    inset 0 -2px 5px rgba(80,50,0,.5),
    inset 0 0 0 1px rgba(0,0,0,.4),
    0 1px 0 rgba(0,0,0,.5);
}
body.skin-walnut .dial-glass::after{
  background:linear-gradient(106deg,rgba(255,250,200,.22) 0%,
            rgba(255,250,200,.04) 18%,transparent 34%);
}
body.skin-walnut .readout-date{
  color:#1a0e00;
  text-shadow:0 0 12px rgba(255,140,40,.45),0 1px 0 rgba(255,250,200,.5);
}
body.skin-walnut .readout-venue{color:#3a2008;text-shadow:0 1px 0 rgba(255,250,200,.5);}
body.skin-walnut #readout-city{color:#5a3a10;}
body.skin-walnut .scale .tick{background:#7a4f10;}
body.skin-walnut .scale .tick.major{background:#1a0e00;}
body.skin-walnut .scale .tick .yr{color:#1a0e00;text-shadow:0 1px 0 rgba(255,250,200,.4);}
body.skin-walnut .scale-needle{
  background:linear-gradient(180deg,#1a0e00,#3a2008);
  box-shadow:0 0 6px rgba(0,0,0,.5);
}
body.skin-walnut .scale-needle::before{border-top-color:#1a0e00;}
body.skin-walnut .signal-bars i{background:rgba(40,20,0,.35);}
body.skin-walnut .signal-bars i.on{background:#7a4f10;box-shadow:0 0 5px rgba(255,160,40,.6);}
body.skin-walnut .signal-bars i.hot{background:#d62820;box-shadow:0 0 6px #d62820;}
body.skin-walnut .signal-label{color:#5a3a10;}
body.skin-walnut .fav{color:rgba(60,30,0,.3);}
body.skin-walnut .fav[aria-pressed="true"]{color:#d62820;text-shadow:0 0 10px rgba(214,40,32,.5);}
body.skin-walnut .src-badge{color:#fff;}
body.skin-walnut .src-more{color:#3a2008;}
/* Deck = salt-and-pepper grille cloth */
body.skin-walnut .deck{
  background:
    repeating-linear-gradient(45deg,
      rgba(245,220,170,.20) 0 1px,
      transparent 1px 3px),
    repeating-linear-gradient(-45deg,
      rgba(245,220,170,.20) 0 1px,
      transparent 1px 3px),
    linear-gradient(180deg,#1a0e08,#0c0604);
  box-shadow:
    inset 0 0 0 2px rgba(255,184,69,.22),
    inset 0 0 30px rgba(0,0,0,.5);
}
/* Black knobs with brass tops */
body.skin-walnut .knob-skirt{
  background:repeating-conic-gradient(from 0deg,#2a2a2c 0deg 5deg,#0a0a0c 5deg 10deg);
  box-shadow:0 4px 10px rgba(0,0,0,.7),0 0 0 1px rgba(255,200,80,.25);
}
body.skin-walnut .knob-cap{
  background:radial-gradient(circle at 38% 30%,
    #ffe07a 0%,#d4a838 34%,#8a6418 72%,#4a380c 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,250,200,.5),
    inset 0 -6px 12px rgba(50,30,0,.7),
    0 1px 2px rgba(0,0,0,.6);
}
body.skin-walnut .knob-mark{
  background:#1a0e00;
  box-shadow:0 0 4px rgba(0,0,0,.8);
}
body.skin-walnut .knob-meta label{color:#b89958;text-shadow:0 1px 0 rgba(0,0,0,.5);}
body.skin-walnut .knob-meta output{
  background:linear-gradient(180deg,#d4a838,#8a6418);
  color:#1a0e00;text-shadow:0 1px 0 rgba(255,250,200,.4);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(0,0,0,.4),
    0 1px 0 rgba(255,250,200,.4);
}
/* VU meters with brass surrounds */
body.skin-walnut .vu{
  background:linear-gradient(180deg,#f0d590,#cc9f4a);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 2px 6px rgba(0,0,0,.28),
    0 0 0 2px #2a1a08,
    0 0 0 3px #c8a04c,
    0 0 0 4px #604812,
    0 1px 0 rgba(255,250,200,.6),
    0 3px 8px rgba(0,0,0,.7);
}
/* Transport = bottom of cab, black tolex with a gold-bordered LED screen */
body.skin-walnut .transport{
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.025) 0 1px,
      rgba(0,0,0,.06) 1px 3px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.025) 0 1px,
      rgba(0,0,0,.06) 1px 3px),
    linear-gradient(180deg,#1a1a1c,#0c0c0e 70%,#050506);
  box-shadow:0 -1px 0 rgba(255,250,200,.18);
}
body.skin-walnut .t-btn{
  background:radial-gradient(circle at 40% 32%,#42383a,#22202a 70%,#16141a);
  color:#d4a838;
}
body.skin-walnut .t-play{color:#ffd35a;}

/* ============================================================
   SKIN: STEAL YOUR FACE  (tie-dye burst, R/W/B canon, the 13-pt
   bolt, dancing-bear-colored knobs)
   ============================================================ */
body.skin-syf{
  --bg:#04020a;
  --alu-hi:#2a2030; --alu:#15101c; --alu-lo:#08040e; --alu-edge:#030106;
  --engrave:#ff8c98;
  --glass-0:#0c0418; --glass-1:#1a0828;
  --glow:#ff3a4d; --glow-soft:#ff9aa4; --glow-dim:#80152a;
  --lit:#ffffff;
  --amber:#5a7eff;                       /* SYF blue takes the warm-accent slot */
  --vu-face:#f5e8d0; --vu-ink:#1a0510; --vu-red:#d63a30;
  --sbd:#5fd08a; --mtx:#ffd44a; --aud:#5a7eff;
}
/* Black base + a tie-dye spiral that peeks through under everything */
body.skin-syf .receiver{
  background:linear-gradient(178deg,#0e041a 0%,#06020e 50%,#020108 100%);
}
body.skin-syf .receiver::before{
  background:
    radial-gradient(55% 55% at 50% 50%,transparent 30%,rgba(0,0,0,.78) 100%),
    conic-gradient(from 0deg at 50% 50%,
      rgba(214,40,32,.55) 0deg,
      rgba(255,140,40,.55) 45deg,
      rgba(255,220,40,.55) 90deg,
      rgba(80,200,40,.55) 135deg,
      rgba(40,140,255,.55) 180deg,
      rgba(140,40,255,.55) 225deg,
      rgba(255,40,200,.55) 270deg,
      rgba(214,40,32,.55) 360deg);
}
body.skin-syf .brand-bar{
  background:
    linear-gradient(90deg,rgba(214,40,32,.18) 0%,rgba(255,255,255,.04) 50%,rgba(32,80,214,.18) 100%),
    linear-gradient(180deg,#1a0820,#0a0214 60%,#04010a);
  box-shadow:
    0 1px 0 rgba(255,255,255,.16),
    0 3px 12px rgba(0,0,0,.7);
}
body.skin-syf .brand-name em{color:#ff5a6a;text-shadow:0 0 14px var(--glow-dim);}
body.skin-syf .brand-sub{color:#5a7eff;letter-spacing:.34em;}
/* Bigger, brighter Stealie-style mark with the 13-pt bolt */
body.skin-syf .logo-mark{
  width:clamp(24px,4vmin,32px);
  background:
    radial-gradient(circle at 50% 50%,#fff 0 30%,transparent 31%),
    conic-gradient(from -10deg,#d62820 0 33.3%,#ffffff 0 66.6%,#2050d6 0);
  box-shadow:
    0 0 0 2px #04010a,
    0 0 22px rgba(255,80,90,.55),
    inset 0 0 8px rgba(0,0,0,.6);
}
body.skin-syf .logo-mark::after{
  background:#1a0510;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.9));
}
/* Dial glass: dark with a red/white/blue color cast */
body.skin-syf .dial-glass{
  background:
    radial-gradient(120% 150% at 50% 8%,rgba(255,58,77,.18),transparent 60%),
    linear-gradient(180deg,var(--glass-1),var(--glass-0) 70%);
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.85),
    inset 0 0 30px rgba(0,0,0,.6),
    inset 0 0 14px rgba(255,58,77,.14),
    0 1px 0 rgba(255,255,255,.4);
}
body.skin-syf .scale-needle{
  width:3px;
  background:linear-gradient(180deg,#d62820,#ffffff 50%,#2050d6);
  box-shadow:0 0 12px 2px rgba(255,255,255,.85);
}
body.skin-syf .scale-needle::before{border-top-color:#ffffff;}
/* Three knobs in classic Dancing Bear colors — red, yellow, blue */
body.skin-syf #knob-year .knob-cap{
  background:radial-gradient(circle at 38% 30%,#ff8a98 0%,#d62820 34%,#8a1820 70%,#4a0a10 100%);
}
body.skin-syf #knob-year .knob-skirt{
  box-shadow:0 0 18px rgba(214,40,32,.5),0 4px 10px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.3);
}
body.skin-syf #knob-month .knob-cap{
  background:radial-gradient(circle at 38% 30%,#ffe070 0%,#f0a020 34%,#8a5a10 70%,#3a2a08 100%);
}
body.skin-syf #knob-month .knob-skirt{
  box-shadow:0 0 18px rgba(240,160,32,.5),0 4px 10px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.3);
}
body.skin-syf #knob-day .knob-cap{
  background:radial-gradient(circle at 38% 30%,#7ab4ff 0%,#2050d6 34%,#102a7a 70%,#08134a 100%);
}
body.skin-syf #knob-day .knob-skirt{
  box-shadow:0 0 18px rgba(32,80,214,.5),0 4px 10px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.3);
}
body.skin-syf .knob-skirt{
  background:repeating-conic-gradient(from 0deg,#2a2030 0deg 5deg,#15101a 5deg 10deg);
}
body.skin-syf .knob-mark{
  background:linear-gradient(180deg,#fff,#fff);
  box-shadow:0 0 7px rgba(255,255,255,.85);
}
body.skin-syf .knob-meta label{color:#c8b8e0;}
body.skin-syf .knob-meta output{
  background:linear-gradient(180deg,#d0d0d8,#807080);color:#1a0510;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.4);
}
/* VU meters: red top stripe, cream face, blue bottom stripe — the Stealie palette */
body.skin-syf .vu{
  background:linear-gradient(180deg,
    #d62820 0%,#d62820 8%,
    #f5e8d0 8%,#f5e8d0 92%,
    #2050d6 92%,#2050d6 100%);
}
body.skin-syf .transport{
  background:linear-gradient(180deg,#1a0820,#0a0214 70%,#04010a);
  box-shadow:0 -1px 0 rgba(255,255,255,.18);
}
body.skin-syf .t-btn{
  background:radial-gradient(circle at 40% 32%,#4a3045,#231828 70%,#100818);
  color:#ffd0d4;
}
body.skin-syf .t-play{color:#ff5a6a;}
body.skin-syf .t-play.playing{color:#ffd33b;}
body.skin-syf #scrubber::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--glow) var(--p,0%),#231828 var(--p,0%));
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}