/* paranoidream · radio A (neon tuner pill). Shared by / and /shop/; the element persists across in-page navigation. */
.radio,.radio *{box-sizing:border-box;margin:0}
.radio{position:fixed;top:14px;right:14px;z-index:20;display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border:1px solid rgba(255,42,69,.5);border-radius:999px;background:rgba(10,0,4,.75);box-shadow:0 0 20px rgba(255,42,69,.25);color:#ffd7de;font-family:"IBM Plex Mono",ui-monospace,monospace;text-transform:none;letter-spacing:normal}
.radio button{display:flex;align-items:center;justify-content:center;padding:0;font-family:inherit;cursor:pointer;color:#ff2a45;background:rgba(255,42,69,.06);border:1px solid rgba(255,42,69,.55);border-radius:50%;box-shadow:0 0 14px rgba(255,42,69,.3),inset 0 0 10px rgba(255,42,69,.1);text-shadow:0 0 8px #ff2a45;transition:box-shadow .3s ease,color .3s ease}
.radio button:hover{color:#fff;box-shadow:0 0 22px rgba(255,42,69,.6),inset 0 0 12px rgba(255,42,69,.2)}
.radio .rplay{width:52px;height:52px;font-size:20px}
.radio .rsk{width:44px;height:44px;font-size:14px}
.radio[data-on="1"] .rplay{color:#fff;background:rgba(255,42,69,.18)}
.radio .r-meta{display:flex;flex-direction:column;gap:3px;padding:0 2px;min-width:110px;text-align:left}
.radio .r-lbl{font-size:10px;letter-spacing:.28em;text-transform:lowercase;color:rgba(255,42,69,.65);display:flex;align-items:center;gap:5px}
.radio .r-tt{font-size:13px;letter-spacing:.16em;color:#ffd7de;text-shadow:0 0 8px rgba(255,42,69,.8);white-space:nowrap;overflow:hidden;max-width:150px;font-family:"IBM Plex Mono",ui-monospace,monospace,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";text-overflow:clip;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.radio .r-tt>span{display:inline-block}
.radio .r-tt:not(.long){-webkit-mask-image:none;mask-image:none}
.radio .r-tt.long>span{animation:pdmarquee 9s ease-in-out infinite alternate}
@keyframes pdmarquee{0%,15%{transform:none}85%,100%{transform:translateX(var(--over))}}
.radio .r-eq{display:flex;gap:3px;align-items:flex-end;height:16px}
.radio .r-eq i{width:3px;height:var(--h);background:#ff2a45;box-shadow:0 0 6px #ff2a45;transform-origin:bottom;transform:scaleY(.35);opacity:.6}
.radio[data-on="1"] .r-eq i{opacity:1;animation:pdeq .9s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes pdeq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.radio .ic{width:18px;height:18px;fill:currentColor;filter:drop-shadow(0 0 3px #ff2a45) drop-shadow(0 0 8px rgba(255,42,69,.7))}
.radio .rplay .ic{width:22px;height:22px}
.radio .rplay .i-pause,.radio[data-on="1"] .rplay .i-play{display:none}
.radio[data-on="1"] .rplay .i-pause{display:block}
.radio button:hover .ic,.radio[data-on="1"] .rplay .ic{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #ff2a45)}
.radio .lh{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.4;filter:drop-shadow(0 0 3px rgba(255,42,69,.8))}
.radio[data-on="1"] .lh{fill:currentColor}
/* v10b: compact size (~78%). Visual buttons are 34/40px; an invisible ::before extends each hit area to >=42px. */
.radio{gap:8px;padding:4px 10px 4px 4px;box-shadow:0 0 16px rgba(255,42,69,.22)}
.radio button{position:relative}
.radio button::before{content:"";position:absolute;inset:-4px;border-radius:50%}
.radio .rplay{width:40px;height:40px}
.radio .rsk{width:34px;height:34px}
.radio .rplay .ic{width:17px;height:17px}.radio .ic{width:14px;height:14px}
.radio .r-meta{gap:2px;min-width:86px}
.radio .r-lbl{font-size:8.5px;letter-spacing:.24em;gap:4px}
.radio .lh{width:8px;height:8px}
.radio .r-tt{font-size:11px;letter-spacing:.12em;max-width:118px}
.radio .r-eq{height:12px;gap:2px}.radio .r-eq i{width:2.5px;height:calc(var(--h) * .8)}
/* shop on desktop: bottom center, fixed to the viewport (the page reserves room for it) */
body[data-page="shop"] .radio{position:fixed;top:auto;bottom:calc(env(safe-area-inset-bottom) + 16px);right:auto;left:calc(50% + (env(safe-area-inset-left) - env(safe-area-inset-right)) / 2);transform:translateX(-50%)}
@media (max-width:600px){
  /* phones: smaller still; visual 30/36px, hit areas 40/44px */
  .radio{top:auto;bottom:calc(env(safe-area-inset-bottom) + 10px);right:calc(env(safe-area-inset-right) + 8px);gap:7px;padding:3px 8px 3px 3px}
  .radio button::before{inset:-5px}
  .radio .rplay{width:36px;height:36px}
  .radio .rsk{width:30px;height:30px}
  .radio .rplay .ic{width:15px;height:15px}.radio .ic{width:12px;height:12px}
  .radio .r-meta{min-width:70px}
  .radio .r-lbl{font-size:7.5px;letter-spacing:.18em}
  .radio .r-tt{font-size:10px;letter-spacing:.1em;max-width:84px}
  /* home on phones: bottom middle, centered within the safe area */
  body[data-page="home"] .radio{left:calc(50% + (env(safe-area-inset-left) - env(safe-area-inset-right)) / 2);right:auto;transform:translateX(-50%)}
  /* shop on phones: upper right, docked in the HUD row (scrolls away with it) */
  body[data-page="shop"] .radio{position:absolute;top:calc(env(safe-area-inset-top) + 9px);bottom:auto;right:calc(env(safe-area-inset-right) + 8px);left:auto;transform:none}
}
@media (max-width:380px){.radio .r-tt{max-width:70px}.radio .r-meta{min-width:62px}}
.pd-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: reduce){.radio .r-tt{text-overflow:ellipsis}.radio .r-tt.long>span{animation:none;display:inline}.radio .r-tt.long{-webkit-mask-image:none;mask-image:none}.radio[data-on="1"] .r-eq i{animation:none;transform:none}.radio button{transition:none}}