*{box-sizing:border-box}
html,body{margin:0;background:#0e0a07;color:#f3e6c8;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace}
body{min-height:100vh;background:radial-gradient(ellipse at top,#2a1c12 0%,#0e0a07 70%)}
button,input{font:inherit}
.set{max-width:560px;margin:0 auto;padding:12px 10px 24px}
.brand{display:flex;align-items:baseline;justify-content:space-between;padding:4px 6px 10px}
.brand-name{font-weight:800;letter-spacing:.3em;font-size:18px;color:#ffcf6b;text-shadow:0 0 8px rgba(255,170,40,.45)}
.brand-sub{font-size:11px;opacity:.6;letter-spacing:.1em}

/* the cabinet */
.tube{background:linear-gradient(160deg,#6b4423,#3d2412 55%,#2b190c);border-radius:22px;padding:14px;box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -6px 14px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.6)}
.screen{position:relative;aspect-ratio:4/5;width:100%;background:#000;border-radius:26px/22px;overflow:hidden;box-shadow:inset 0 0 40px rgba(0,0,0,.9),0 0 0 6px #151008,0 0 0 8px #4a2f17}
@media (min-width:520px){.screen{aspect-ratio:4/3}}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.snow{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .12s;image-rendering:pixelated}
.snow.on{opacity:1}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 60px rgba(0,0,0,.7);border-radius:inherit}
.osd{position:absolute;top:10px;left:12px;right:12px;display:flex;gap:10px;align-items:baseline;pointer-events:none;font-weight:800;color:#7dff7d;text-shadow:0 0 6px #2f2,2px 2px 0 #000;transition:opacity .6s}
.osd-ch{font-size:22px;letter-spacing:.06em}
.osd-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.osd.fade{opacity:0}
.card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:radial-gradient(circle at 50% 40%,#1d3a2a,#06100b)}
.card[hidden]{display:none}
.card-name{font-size:22px;font-weight:800;color:#ffcf6b}
.card-note{font-size:13px;opacity:.8}
.card-btn{display:inline-block;padding:12px 18px;border-radius:10px;background:#ffcf6b;color:#1b120c;font-weight:800;text-decoration:none}
.card.vip{background:radial-gradient(circle at 50% 35%,#1e4fd8 0,#0b1e5c 45%,#040a1f 100%)}
.card.vip .card-name{font-size:28px;color:#9fd0ff;text-shadow:0 0 14px #3a8bff,0 0 2px #fff;letter-spacing:.04em}
.card.vip .card-note{font-size:15px;opacity:.95;color:#e8eeff}
.card.vip .card-btn{font-size:20px;padding:18px 26px;min-width:72%;border-radius:14px;background:linear-gradient(#7fc4ff,#2f7bff);color:#04102e;box-shadow:0 0 22px rgba(80,160,255,.75),0 4px 0 #0a2a7a}
.caption{position:absolute;left:8px;right:8px;bottom:10px;padding:8px 10px;background:rgba(0,0,0,.82);color:#fff;font-size:15px;line-height:1.35;font-weight:700;border-left:4px solid #ffcf6b;text-shadow:1px 1px 0 #000;z-index:3}
.caption[hidden]{display:none}
.caption small{display:block;font-weight:400;opacity:.65;font-size:11px;margin-bottom:2px;letter-spacing:.08em}

/* the radio panel */
.panel{margin-top:12px;background:linear-gradient(180deg,#d9c39a,#b89c6b);color:#2a1b0e;border-radius:16px;padding:12px;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 6px 18px rgba(0,0,0,.5)}
.readout{display:flex;gap:10px;align-items:center}
.lcd{min-width:64px;text-align:center;font-size:30px;font-weight:800;padding:4px 8px;border-radius:8px;background:#142014;color:#9dff6a;text-shadow:0 0 8px #4f4;box-shadow:inset 0 2px 6px #000}
.station{flex:1;min-width:0}
.station-name{font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.station-link{font-size:12px;color:#5a2e0a}
.band{position:relative;height:38px;margin:10px 2px;border-radius:6px;background:#f6ecd2;box-shadow:inset 0 1px 4px rgba(0,0,0,.4);overflow:hidden}
.band-scale{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:flex-end;padding:0 10px 4px;font-size:11px;font-weight:800;background:repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 8px) top/100% 10px no-repeat}
.band-scale span{width:18px;text-align:center}
.needle{position:absolute;top:0;bottom:0;width:3px;background:#d01c10;box-shadow:0 0 6px #f33;transition:left .45s cubic-bezier(.5,1.6,.4,1);left:10px}
.controls{display:flex;align-items:center;justify-content:center;gap:22px;margin:6px 0 10px}
.nudge{width:52px;height:52px;border-radius:50%;border:0;background:#3a2414;color:#ffcf6b;font-size:18px;box-shadow:0 3px 0 #1b0f06,inset 0 1px 0 rgba(255,255,255,.2);cursor:pointer}
.nudge:active{transform:translateY(2px);box-shadow:0 1px 0 #1b0f06}
.knob{position:relative;width:96px;height:96px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 35% 30%,#7a5a3c,#2a1a0e 70%);box-shadow:0 6px 12px rgba(0,0,0,.55),inset 0 2px 2px rgba(255,255,255,.25);transition:transform .45s cubic-bezier(.5,1.6,.4,1);touch-action:none}
.knob-grip{position:absolute;inset:8px;border-radius:50%;background:repeating-conic-gradient(rgba(0,0,0,.35) 0 6deg,transparent 6deg 12deg)}
.knob-mark{position:absolute;top:8px;left:50%;width:6px;height:22px;margin-left:-3px;border-radius:3px;background:#ffcf6b;box-shadow:0 0 6px #ffb02e}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.presets button{padding:8px 3px;border-radius:8px;border:0;background:#efe0bd;color:#2a1b0e;font-weight:800;font-size:11px;box-shadow:0 2px 0 #8a6d3f;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.presets button[aria-current="true"]{background:#2a1b0e;color:#ffcf6b;box-shadow:inset 0 2px 4px #000}
.presets b{display:block;font-size:10px;opacity:.6}

.ask{margin-top:12px;background:#1c140d;border:1px solid #3e2a18;border-radius:14px;padding:12px}
.ask-label{display:block;font-weight:800;color:#ffcf6b;margin-bottom:8px;font-size:14px}
.ask-row{display:flex;gap:8px}
.ask-row input{flex:1;min-width:0;padding:12px;border-radius:10px;border:1px solid #5a3d22;background:#0d0906;color:#f3e6c8;font-size:16px}
.ask-row button{padding:0 16px;border-radius:10px;border:0;background:#ffcf6b;color:#1b120c;font-weight:800;cursor:pointer}
.ask-row button:disabled{opacity:.5}
.ask-meta{display:flex;justify-content:space-between;font-size:11px;opacity:.7;margin-top:6px;min-height:14px}
.foot{text-align:center;font-size:11px;opacity:.55;margin-top:14px}
.foot code{color:#ffcf6b}
@media (prefers-reduced-motion:reduce){.needle,.knob{transition:none}}

/* CH 00 - The River */
.river{position:absolute;inset:0;background:#0a1430}
.river[hidden],.radio[hidden],.screen iframe[hidden]{display:none}
.river canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.river-sound{position:absolute;top:44px;right:10px;z-index:2;padding:6px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);color:#fff;font:inherit;font-size:12px;cursor:pointer}
.river-block{position:absolute;right:12px;bottom:10px;z-index:2;font-size:11px;color:rgba(255,255,255,.75);text-shadow:1px 1px 0 #000;letter-spacing:.05em;pointer-events:none}

/* CH 07 - Punk Link Radio */
.radio{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:52px 16px 16px;background:radial-gradient(circle at 50% 30%,#3a1446,#120612 75%);color:#ffe9c9}
.radio-head{font-weight:800;letter-spacing:.2em;font-size:13px;color:#ff5fa2;text-shadow:0 0 8px #ff2f86;display:flex;justify-content:space-between;align-items:center}
.radio-live{font-size:10px;letter-spacing:.08em;color:#aaa;text-shadow:none}
.radio-live.on{color:#ff3b3b;text-shadow:0 0 6px #f00}
.radio-eq{display:flex;align-items:flex-end;gap:4px;height:56px;padding:0 4px}
.radio-eq i{flex:1;height:12%;background:linear-gradient(0deg,#7dff7d,#ffcf6b 60%,#ff5f5f);border-radius:2px 2px 0 0;opacity:.85}
.radio.playing .radio-eq i{animation:eq 0.9s ease-in-out infinite alternate}
.radio-eq i:nth-child(2n){animation-duration:.7s!important}.radio-eq i:nth-child(3n){animation-duration:1.1s!important}.radio-eq i:nth-child(5n){animation-duration:.55s!important}
@keyframes eq{0%{height:10%}50%{height:85%}100%{height:35%}}
.radio-now{background:rgba(0,0,0,.45);border:1px solid #5b2a5f;border-radius:10px;padding:10px}
.radio-label{font-size:10px;letter-spacing:.15em;opacity:.7;display:flex;justify-content:space-between}
.radio-title{font-size:18px;font-weight:800;color:#ffcf6b;margin:4px 0 8px;min-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radio-bar{height:4px;background:#3b2440;border-radius:2px;overflow:hidden}
.radio-bar span{display:block;height:100%;width:0;background:#ff5fa2}
.radio-time{font-size:10px;opacity:.6;margin-top:4px;text-align:right}
.radio-ctl{display:flex;align-items:center;justify-content:center;gap:16px}
.radio-btn{width:48px;height:48px;border-radius:50%;border:0;background:#2a1430;color:#ffcf6b;font-size:18px;cursor:pointer;box-shadow:0 3px 0 #000,inset 0 1px 0 rgba(255,255,255,.15)}
.radio-btn.big{width:64px;height:64px;font-size:24px;background:#ffcf6b;color:#2a1430}
.radio-shuffle{font-size:11px;opacity:.75}
.radio-submit{margin-top:auto;align-self:center;padding:9px 14px;border-radius:18px;border:1px dashed #ff5fa2;background:transparent;color:#ff9cc6;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.submit-form{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;gap:8px;justify-content:center;padding:20px 16px;background:rgba(18,6,18,.96)}
.submit-form[hidden]{display:none}
.submit-title{font-weight:800;color:#ffcf6b;font-size:16px}
.submit-form input{padding:10px;border-radius:8px;border:1px solid #5b2a5f;background:#0d060d;color:#ffe9c9;font:inherit;font-size:16px;min-width:0}
.submit-row{display:flex;gap:8px;justify-content:flex-end}
.submit-row button{padding:10px 14px;border-radius:8px;border:0;background:#ffcf6b;color:#2a1430;font:inherit;font-weight:800;cursor:pointer}
.submit-row button.ghost{background:transparent;color:#ffe9c9;border:1px solid #5b2a5f}
.submit-hint{font-size:11px;opacity:.6}

/* caption under the screen (channel notes) */
.chan-note{margin:10px 4px 0;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.35);color:#ffe2a8;font-size:12px;line-height:1.4;border-left:3px solid #ffcf6b}
.chan-note[hidden]{display:none}
.chan-note small{display:block;font-size:10px;opacity:.55;letter-spacing:.08em}

/* email ask */
.gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(6,4,2,.72);backdrop-filter:blur(2px)}
.gate[hidden]{display:none}
.gate-card{width:100%;max-width:340px;background:#1c140d;border:2px solid #ffcf6b;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 40px rgba(0,0,0,.7)}
.gate-static{font-size:10px;letter-spacing:.3em;color:#7dff7d;text-shadow:0 0 6px #2f2}
.gate-title{font-size:20px;font-weight:800;color:#ffcf6b}
.gate-body{font-size:14px;opacity:.9}
.gate-card input{padding:12px;border-radius:10px;border:1px solid #5a3d22;background:#0d0906;color:#f3e6c8;font:inherit;font-size:16px}
.gate-card button{padding:12px;border-radius:10px;border:0;background:#ffcf6b;color:#1b120c;font:inherit;font-weight:800;cursor:pointer}
.gate-err{min-height:14px;font-size:12px;color:#ff8a8a}

/* CH 00 easter egg: the flying pig (?pig=1 to force) */
.pig-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.pig-layer.on{opacity:1;visibility:visible;transition:opacity .4s}
.pig-layer.measure{visibility:visible}
.pig{position:absolute;left:0;top:0;width:62px;height:47px;pointer-events:auto;cursor:pointer;will-change:transform;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.35))}
.pig svg{display:block;width:62px;height:47px}
.pig.wiggle svg{animation:pig-wiggle .35s ease-in-out}
.pig-bubble.off{opacity:0}
.pig-wing{transform-box:fill-box;transform-origin:85% 95%;animation:pig-flap .24s ease-in-out infinite alternate}
.pig-wing-back{animation-delay:-.12s}
.pig-bubble{position:absolute;left:0;top:0;max-width:min(176px,62%);padding:6px 9px;border-radius:10px;background:#fff;color:#2a1a22;border:2px solid #2a1a22;font-size:11px;line-height:1.3;font-weight:800;box-shadow:2px 2px 0 rgba(0,0,0,.35);will-change:transform;transition:opacity .3s}
.pig-bubble::after{content:"";position:absolute;bottom:-7px;left:var(--tail,24px);margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top:7px solid #2a1a22}
.pig-coin{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#f7931a;color:#fff;font:800 10px/14px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-align:center;box-shadow:inset -1px -1px 0 rgba(0,0,0,.25),0 0 0 1px #c76f00}
.pig-splash{position:absolute;left:0;top:0;width:34px;height:9px;border-radius:50%;border:2px solid rgba(255,255,255,.85)}
.pig-drop{position:absolute;left:0;top:0;width:3px;height:3px;border-radius:50%;background:rgba(220,240,255,.95)}
@keyframes pig-flap{from{transform:scaleY(1) rotate(0)}to{transform:scaleY(.45) rotate(18deg)}}
@keyframes pig-wiggle{0%,100%{rotate:0deg}25%{rotate:-12deg}75%{rotate:12deg}}
@media (prefers-reduced-motion:reduce){.pig-wing,.pig.wiggle svg{animation:none}.pig-layer,.pig-layer.on{transition:none}}

/* CH 00 - River SHOWTIME: floating items, time picker, lineup, SHOWTIME overlay */
.float-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.float-item{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;max-width:50%;min-height:40px;padding:5px 9px 5px 6px;border-radius:10px 10px 16px 16px;border:2px solid #2a1b0e;background:#f6ecd2;color:#2a1b0e;font:inherit;font-size:11px;font-weight:800;line-height:1.15;text-align:left;cursor:pointer;pointer-events:auto;will-change:transform;box-shadow:0 3px 0 rgba(0,0,0,.4),0 8px 8px -5px rgba(150,210,255,.55)}
.float-item.gone{visibility:hidden}
.float-item.t-pitch{background:#ffcf6b}.float-item.t-meme{background:#c9f5a2}.float-item.t-link{background:#bfe1ff}
.float-item.booked::after{content:"\23F0";position:absolute;top:-10px;right:-7px;font-size:14px;filter:drop-shadow(1px 1px 0 #000)}
.float-item:focus-visible{outline:3px solid #fff;outline-offset:2px}
.float-ic{font-size:15px;flex:none}
.float-title{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.river-lineup{position:absolute;top:44px;left:10px;z-index:2;padding:6px 10px;border-radius:14px;border:1px solid rgba(255,207,107,.6);background:rgba(0,0,0,.5);color:#ffcf6b;font:inherit;font-size:12px;cursor:pointer}
.river-lineup[hidden],.lineup[hidden],.pick[hidden],.show[hidden],.show [hidden]{display:none}
.lineup{position:absolute;top:78px;left:10px;z-index:6;width:min(280px,calc(100% - 20px));max-height:calc(100% - 96px);overflow:auto;padding:10px;border-radius:10px;background:rgba(10,8,6,.94);border:1px solid #ffcf6b;color:#f3e6c8;font-size:12px}
.lineup-head{font-size:10px;letter-spacing:.2em;color:#7dff7d;margin-bottom:6px}
.lineup-list{list-style:none;margin:0;padding:0}
.lineup-list li{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid rgba(255,255,255,.1)}
.lineup-list li b{color:#ffcf6b;white-space:nowrap}
.lineup-list li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lineup-list li button{flex:none;width:32px;height:32px;border-radius:8px;border:1px solid #5a3d22;background:transparent;color:#ff9a8a;font:inherit;cursor:pointer}
.lineup-empty{opacity:.7}
.lineup-done{margin-top:8px;width:100%;padding:8px;border-radius:8px;border:0;background:#ffcf6b;color:#1b120c;font:inherit;font-weight:800;cursor:pointer}
.pick{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;background:rgba(6,10,24,.92);text-align:center;color:#f3e6c8}
.pick-head{font-size:12px;letter-spacing:.14em;color:#7dff7d;text-shadow:0 0 6px #2f2;text-transform:uppercase}
.pick-title{font-size:13px;opacity:.85;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-arrow{width:64px;height:44px;border-radius:10px;border:0;background:#2a1b0e;color:#ffcf6b;font-size:18px;cursor:pointer;box-shadow:0 3px 0 #000;touch-action:none;user-select:none;-webkit-user-select:none}
.pick-arrow:active{transform:translateY(2px);box-shadow:0 1px 0 #000}
.pick-choice{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:220px;max-width:100%;padding:12px 16px;border-radius:12px;border:3px solid #ffcf6b;background:#000;color:#ffcf6b;font:inherit;cursor:pointer;box-shadow:0 0 14px rgba(255,190,60,.35)}
.pick-choice b{font-size:26px;line-height:1.1}
.pick-choice small{font-size:11px;color:#f3e6c8;opacity:.75}
.pick-row{display:flex;gap:10px;margin-top:6px}
.pick-row button{padding:12px 18px;border-radius:10px;font:inherit;font-weight:800;cursor:pointer;min-height:44px}
.pick-go{border:0;background:#ffcf6b;color:#1b120c;font-size:16px}
.pick-no{border:1px solid #5a3d22;background:transparent;color:#f3e6c8}
html.show-open,html.show-open body{overflow:hidden}
.show{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 35%,#2b1a3d,#07040c 75%);color:#f3e6c8;overflow:auto;-webkit-overflow-scrolling:touch}
.show::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px)}
.show-tap{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;cursor:pointer;max-width:520px}
.show-nav{align-items:center}.show-pos{min-width:56px;font-weight:800;color:#ffcf6b}
.show-card,.show-missed{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;max-width:520px}
.show-star{font-size:clamp(34px,11vw,64px);font-weight:900;letter-spacing:.06em;color:#ffcf6b;text-shadow:0 0 18px #ff9d2e,3px 3px 0 #000}
.show-star.missed{font-size:clamp(26px,8vw,44px);color:#ff8fb8;text-shadow:0 0 14px #ff2f86,3px 3px 0 #000}
.show-card .show-star{animation:show-roll .5s steps(6) both}
.show-sub{font-size:14px;opacity:.85}
.show-name{font-size:18px;font-weight:800;color:#fff}
.show-body{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:560px;margin:auto;text-align:center}
.show-tag{font-size:11px;letter-spacing:.15em;color:#7dff7d;text-shadow:0 0 6px #2f2}
.show-img{display:block;max-width:100%;max-height:45vh;border-radius:10px;border:3px solid #ffcf6b;background:#000;object-fit:contain}
.show-title{margin:0;font-size:clamp(22px,6vw,32px);color:#ffcf6b}
.show-cap{margin:0;font-size:15px;line-height:1.4;max-width:46ch}
.show-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.show-links a{padding:10px 14px;border-radius:10px;background:#bfe1ff;color:#0b1e3a;font-weight:800;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.show-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.show-btn{padding:12px 18px;min-height:44px;border-radius:10px;border:0;background:#ffcf6b;color:#1b120c;font:inherit;font-weight:800;cursor:pointer}
.show-btn.ghost{background:transparent;color:#f3e6c8;border:1px solid #7a5a8f}
@keyframes show-roll{0%{transform:translateY(-40%) scaleY(1.4);opacity:0;filter:blur(3px)}60%{opacity:1}100%{transform:none;opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){.show-card .show-star{animation:none}.pick-arrow:active{transform:none}}