/* yeldee live: shared by /live and /host. Same crate look as /B: paper, ink, Anton + Space Mono, tape, one red. */
@font-face{font-family:Anton;src:url(/fonts/anton.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Space Mono";src:url(/fonts/spacemono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url(/fonts/spacemono-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--paper:#eeedea;--card:#f7f6f3;--ink:#0b0b0b;--grey:#9e9d9d;--muted:#5d5d5d;--line:#cfcdc8;--red:#C33729;--ok:#1f6b3a;
  --display:Anton,"Arial Narrow",Impact,sans-serif;--mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--mono);overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}

.wrap{max-width:1180px;margin:0 auto;padding:12px 16px 48px}

/* label-maker tape */
.tape{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(#1b1b1b,#050505 55%,#151515);color:#f4f4f4;
  font:700 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;padding:7px 10px 7px 12px;margin:0;
  text-shadow:0 1px 0 rgba(255,255,255,.18),0 -1px 0 #000;box-shadow:0 1px 1px rgba(0,0,0,.35);
  clip-path:polygon(0 0,100% 0,100% 30%,calc(100% - 3px) 50%,100% 70%,100% 100%,0 100%,0 70%,3px 50%,0 30%)}
.tape--red{background:linear-gradient(#d24434,#b02e21 55%,#c33729);text-shadow:none}

/* header */
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:6px 0 10px;border-bottom:2px solid var(--ink)}
.brand{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.wordmark{font:400 clamp(56px,17vw,104px)/.82 var(--display);margin:0;text-transform:lowercase;letter-spacing:-.01em}
.wordmark a{text-decoration:none}
.sub{font:700 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.onair{transform:rotate(-2deg)}
.onair .lamp{width:9px;height:9px;border-radius:50%;background:#666}
.onair.live{background:linear-gradient(#d24434,#b02e21 55%,#c33729);text-shadow:none}
.onair.live .lamp{background:#fff;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.back{font-size:12px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--ink);padding:8px 0 1px}
.back:hover{color:var(--red);border-color:var(--red)}

.lead{font:400 clamp(26px,7vw,40px)/1 var(--display);text-transform:uppercase;margin:18px 0 6px}
.muted{color:var(--muted)}
.banner{margin:14px 0 0;padding:12px 14px;border:2px solid var(--ink);background:var(--card);display:flex;gap:12px;align-items:flex-start}
.banner b{font:400 20px/1.05 var(--display);text-transform:uppercase;display:block}
.banner.red{border-color:var(--red);box-shadow:4px 4px 0 var(--red)}
.banner.red b{color:var(--red)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 0}
.stat{border:2px solid var(--ink);background:var(--card);padding:10px 10px 8px}
.stat b{display:block;font:400 30px/1 var(--display)}
.stat span{display:block;margin-top:4px;font-size:10px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* panels */
.panel{background:var(--card);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:16px;min-width:0}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 12px}
.panel h2,.h2{font:400 26px/1 var(--display);text-transform:uppercase;margin:0;letter-spacing:.01em}
.count{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cols{display:grid;gap:20px;margin-top:20px}
.stack{display:grid;gap:20px;min-width:0}

/* now playing: the black record sleeve */
.now{background:var(--ink);color:#f2f2f2;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--red);padding:16px;margin-top:20px;position:relative;overflow:hidden}
.now-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.now .tape{background:#f2f2f2;color:var(--ink);text-shadow:none}
.now.on .tape{background:var(--red);color:#fff}
.clock{font:700 20px/1 var(--mono);letter-spacing:.04em}
.now-song{font:400 clamp(30px,8.5vw,56px)/.95 var(--display);text-transform:uppercase;margin:14px 0 6px;overflow-wrap:anywhere}
.now-who{color:#bdbdbd;font-size:13px;margin:0}
.disc{position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;opacity:.16;pointer-events:none;
  background:repeating-radial-gradient(circle,#fff 0 1px,transparent 1px 4px);-webkit-mask:radial-gradient(circle,transparent 0 16%,#000 16.5%);mask:radial-gradient(circle,transparent 0 16%,#000 16.5%)}
.now.on .disc{animation:spin 3s linear infinite;opacity:.25}
@keyframes spin{to{transform:rotate(360deg)}}

/* lists */
.list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.list li,.list article{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);min-width:0}
.place{font:400 26px/1 var(--display);color:var(--muted)}
.t{font:400 19px/1.1 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.s{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.eta{font-size:12px;white-space:nowrap;text-align:right}
.list li.me{background:rgba(195,55,41,.08);box-shadow:inset 4px 0 0 var(--red);padding-left:8px}
.list li.me .place{color:var(--red)}
.score{width:42px;height:42px;display:grid;place-items:center;border:2px solid var(--ink);font:400 22px/1 var(--display)}
.score.hi{background:var(--ink);color:#fff}
.score.mid{background:#e2e0db}
.fb{font-size:13px;margin-top:4px;padding-left:10px;border-left:3px solid var(--red);overflow-wrap:anywhere}
.empty{color:var(--muted);font-size:13px;margin:12px 0 0}

/* form */
.field{display:grid;gap:5px;margin:0 0 14px;min-width:0}
.field label,.lab{font:700 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.field small{font-size:11px;color:var(--muted)}
input[type=text],input[type=url],input[type=password],input[type=number],input:not([type]),textarea{width:100%;min-height:48px;padding:10px 12px;border:2px solid var(--ink);background:#fff;border-radius:0;font-size:16px}
textarea{min-height:88px;resize:vertical}
input::placeholder,textarea::placeholder{color:#9a9a9a}
.row2{display:grid;gap:0 12px}
.seg{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);margin:0 0 14px}
.seg label{display:block;cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg span{display:block;text-align:center;padding:12px 6px;font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.seg input:checked+span{background:var(--ink);color:#fff}
.seg input:focus-visible+span{outline:3px solid var(--red);outline-offset:-3px}
.drop{display:block;border:2px dashed var(--ink);padding:18px 12px;text-align:center;cursor:pointer;background:#fff;font-size:13px}
.drop.over{border-color:var(--red);background:rgba(195,55,41,.06)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.bar{height:8px;border:2px solid var(--ink);background:#fff}
.bar i{display:block;height:100%;width:0;background:var(--red);transition:width .2s}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;margin:4px 0 14px;cursor:pointer}
.check input{width:22px;height:22px;flex:0 0 22px;accent-color:var(--red);margin:0}
.msg{margin:0 0 14px;padding:10px 12px;font-size:13px;border:2px solid var(--ink)}
.msg.ok{border-color:var(--ok);color:var(--ok);background:#eef5f0}
.msg.err{border-color:var(--red);color:var(--red);background:#fbefed}

/* buttons */
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border:2px solid var(--ink);
  background:var(--card);color:var(--ink);font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .15s,color .15s}
.btn:hover{background:var(--ink);color:#fff}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn:disabled{opacity:.35;cursor:default;box-shadow:none;transform:none;background:var(--card);color:var(--ink)}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:var(--red);border-color:var(--red)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff;box-shadow:3px 3px 0 var(--ink)}
.btn.red:hover{background:#a92c20}
.btn.ghost{background:transparent;box-shadow:none}
.btn.danger{color:var(--red);border-color:var(--red);box-shadow:3px 3px 0 var(--red)}
.btn.danger:hover{background:var(--red);color:#fff}
.btn.block{width:100%;min-height:56px;font-size:13px}
.btns{display:flex;flex-wrap:wrap;gap:10px}

.rules{margin:0;padding-left:18px;font-size:13px}
.rules li{margin:4px 0}
.foot a{text-decoration:none;border-bottom:1px solid #bbb;padding:4px 0}
.foot a:hover{color:var(--red);border-color:var(--red)}
.foot{margin-top:36px;font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (min-width:720px){
  .row2{grid-template-columns:1fr 1fr}
}
@media (min-width:980px){
  .wrap{padding:20px 40px 60px}
  .cols{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

.wordmark__dot{display:inline-block;width:.17em;height:.17em;border-radius:50%;background:#3b1e54;margin-left:.04em;vertical-align:baseline}