/* v7 photoreal boombox window + matching mini player */
.bb2-on .bb{display:none}
.bb2{position:relative;margin:-6px -14px 10px;padding:10px 12px 12px;border-radius:0 0 26px 26px;background:radial-gradient(120% 70% at 50% 18%,#f5f2ec 0,#e2ddd4 45%,#b9b2a7 100%);box-shadow:inset 0 -1px 0 rgba(255,255,255,.4),0 14px 30px rgba(40,10,60,.25)}
.bb2[hidden]{display:none}
.bb2-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(env(safe-area-inset-top) + 2px) 4px 4px}
.bb2-brand{font:italic 900 19px/1 Archivo,system-ui;letter-spacing:.08em;color:#1a1b20}.bb2-brand b{color:#c41a3a}
.bb2-brand small{display:block;margin-top:4px;font:800 8.5px/1 Inter,system-ui;letter-spacing:.16em;color:#5a5e68;font-style:normal}
.bb2 .bb2-x{position:static;width:44px;height:44px;flex:none;background:linear-gradient(180deg,#fdfdff,#b8bcc6);color:#1b1c22;box-shadow:0 3px 0 #6f737d,inset 0 1px 0 #fff;border-radius:12px}
.bb2-stage{position:relative;height:min(92vw,400px);margin:2px -12px 0;touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none}
.bb2-stage .bb3-cv{position:absolute;inset:0;display:block}
.bb2-load{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;color:#3a3d46;font:800 14px Inter,system-ui}
.bb2-load[hidden]{display:none}.bb2-load i{width:42px;height:42px;border-radius:50%;border:4px solid rgba(0,0,0,.12);border-top-color:#c41a3a;animation:bb2spin 1s linear infinite}
@keyframes bb2spin{to{transform:rotate(1turn)}}
.bb2-views{display:flex;gap:8px;justify-content:center;margin:2px 0 10px}
.bb2-views button{min-height:44px;padding:0 16px;border:0;border-radius:99px;background:linear-gradient(180deg,#fdfdff,#c3c7cf);color:#22242b;font:800 13.5px Archivo,system-ui;box-shadow:0 3px 0 #7d818b,inset 0 1px 0 #fff}
.bb2-views button.on{background:linear-gradient(180deg,#3a3c44,#15161a);color:#ffd23f;box-shadow:0 3px 0 #000,inset 0 1px 0 rgba(255,255,255,.2)}
.bb2-views button:active{transform:translateY(2px);box-shadow:0 1px 0 #7d818b}
.bb2-now{margin:0 2px;padding:12px 14px;border-radius:16px;background:linear-gradient(180deg,#1c1a17,#0d0c0a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 2px 8px rgba(0,0,0,.6)}
.bb2-now small{font:800 10px Inter,system-ui;letter-spacing:.16em;color:#ffb347}
.bb2-now b{display:block;margin:3px 0 8px;font:600 26px/1.05 Caveat,'Comic Sans MS',cursive;color:#ffe7b8;text-shadow:0 0 12px rgba(255,170,60,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb2-prog{display:flex;align-items:center;gap:8px;color:#ffb347;font:700 12px/1 'VT323',monospace}.bb2-prog span{font-size:16px;min-width:36px}
.bb2-bar{flex:1;height:6px;border-radius:3px;background:#2a2620;overflow:hidden}.bb2-bar i{display:block;height:100%;background:linear-gradient(90deg,#ff8a3d,#ffd23f);transform-origin:0 50%;transform:scaleX(0)}
.bb2-hint{margin:8px 0 0;font:600 12px Inter,system-ui;color:#9a937f}
@font-face{font-family:Caveat;src:url(/assets/fonts/caveat.woff) format('woff');font-weight:400 700;font-display:swap}
/* mini player */
.r-bb.v2{width:68px;height:46px}
.r-bb.v2>i,.r-bb.v2>span{display:none}
.r-bb2{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.radio{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 40%),repeating-linear-gradient(0deg,rgba(255,255,255,0) 0 1px,rgba(255,255,255,.06) 1px 2px),linear-gradient(180deg,#5d6069,#2c2e34 60%,#1f2025)!important;border:1px solid #7b7f8a!important;box-shadow:0 10px 24px rgba(20,0,40,.55),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.4)!important}
.radio .r-meta{background:linear-gradient(180deg,#1b1a17,#0b0a09);border-radius:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 2px 6px rgba(0,0,0,.8)}
.radio .r-meta small{color:#ffb347!important;text-shadow:0 0 6px rgba(255,160,50,.55)}.radio .r-meta b{color:#ffe7b8!important}
.radio .r-btn{background:linear-gradient(180deg,#fbfbfd,#c3c7cf 55%,#a9adb6)!important;border-radius:9px!important;box-shadow:0 3px 0 #50535b,inset 0 1px 0 #fff!important;border:0!important}
.radio .r-btn svg{fill:#1b1c22!important;stroke:#1b1c22!important;filter:none!important}
.radio .r-btn.play{background:linear-gradient(180deg,#ff6b6b,#c41a3a 60%,#9a1230)!important;box-shadow:0 3px 0 #5a0a18,inset 0 1px 0 rgba(255,255,255,.5)!important}
.radio .r-btn.play svg{fill:#fff!important;stroke:#fff!important}
.radio .r-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #50535b!important}
/* RX-84 colourway toggle */
.bb2-cw{display:flex;gap:8px;justify-content:center;margin:0 0 10px}
.bb2-cw button{min-height:44px;padding:0 14px;border:0;border-radius:12px;background:linear-gradient(180deg,#fdfdff,#c3c7cf);color:#22242b;font:800 13.5px Archivo,system-ui;box-shadow:0 3px 0 #7d818b,inset 0 1px 0 #fff;display:inline-flex;align-items:center;gap:8px}
.bb2-cw button.on{outline:3px solid #ffd23f;outline-offset:1px}
.bb2-cw button:active{transform:translateY(2px);box-shadow:0 1px 0 #7d818b}
.bb2-cw .sw{width:22px;height:22px;border-radius:5px;display:inline-block;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.bb2-cw .sw.ry{background:linear-gradient(135deg,#c4202b 50%,#f3c11d 50%)}
.bb2-cw .sw.bg{background:linear-gradient(135deg,#1e3b88 50%,#9aa2ae 50%)}