/* RED EYES NYC — the radio. A slim version of the REV·ENGINE head unit: LED spectrum display + back / play-pause / next.
   While it plays, the display, power LED and all three button markings cycle together through the shop palette
   (red → white → smoke grey → deep red; --c, set by player.js, which also tints the spectrum canvas). */
#hu{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:55;width:300px;max-width:calc(100vw - 24px);font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;user-select:none;-webkit-user-select:none;animation:hu-in .35s cubic-bezier(.2,.9,.3,1)}
@keyframes hu-in{from{transform:translateY(20px);opacity:0}}
#hu .face{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 7px 6px 8px;border-radius:8px;border:1px solid #000;
 background:linear-gradient(180deg,#26282e,#141518 60%,#0e0f11);box-shadow:0 10px 26px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.6)}
#hu .face:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(60% 50% at 25% 15%,rgba(255,255,255,.06),transparent 70%)}
#hu .vfd{position:relative;min-width:0;height:36px;padding:4px 6px 4px 16px;border-radius:4px;border:1px solid #000;background:#0c0607;box-shadow:inset 0 0 12px rgba(0,0,0,.9);overflow:hidden}
#hu .vfd:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),radial-gradient(70% 60% at 50% 40%,transparent,rgba(0,0,0,.35))}
#hu canvas{display:block;width:100%;height:100%}
#hu .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#hu .led{position:absolute;left:6px;top:7px;width:5px;height:5px;border-radius:50%;background:var(--c,#ff1f3d);box-shadow:0 0 5px var(--c,#ff1f3d);z-index:1}
#hu .btns{display:flex;gap:4px}
#hu button{display:grid;place-items:center;width:38px;height:36px;padding:0;border-radius:5px;border:1px solid #0a0a0c;color:#dfe1e6;cursor:pointer;-webkit-tap-highlight-color:transparent;
 background:linear-gradient(180deg,#3a3d44,#1d1f24);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 3px rgba(0,0,0,.6)}
#hu button:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,0,0,.6)}
#hu button:focus-visible{outline:2px solid #fff;outline-offset:1px}
#hu button svg{width:14px;height:14px;fill:currentColor}
#hu .play{color:#fff}
/* off: display shows only its unlit segments, power LED goes dark, buttons are plain */
#hu.off .led{background:#3a1418;box-shadow:none}
/* on: every button marking glows in the current palette colour */
#hu:not(.off) button{color:var(--c,#ff1f3d)}
#hu:not(.off) button svg{filter:drop-shadow(0 0 3px var(--c,#ff1f3d))}
#hu:not(.off) .play svg{filter:drop-shadow(0 0 4px var(--c,#ff1f3d))}
#hu.nudge .face{animation:hu-nudge 1.1s ease-in-out 3}
@keyframes hu-nudge{0%,100%{transform:none}50%{transform:translateY(-4px)}}
body.hu-on .toast{bottom:calc(72px + env(safe-area-inset-bottom))}
@media(max-width:420px){#hu{left:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:272px}#hu button{width:34px}}
@media(prefers-reduced-motion:reduce){#hu,#hu .face{animation:none!important}}