/* RED EYEZ NYC — the radio. A slim version of the REV·ENGINE head unit: LED display + back / play-pause / next.
   Colours drift through the RGB wheel while it plays (--hue, set by player.js) and the top line breathes. */
#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 8px 3px 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 .l1,#hu .l2{white-space:nowrap;color:#ff3b4f;text-shadow:0 0 6px #ff0a2a,0 0 14px rgba(255,10,42,.5);font-family:'DSEG14','IBM Plex Mono',monospace;font-weight:700;letter-spacing:1px}
#hu .l1{font-size:9.5px;line-height:15px;height:15px;overflow:hidden}
#hu .l1 span{display:inline-block;white-space:pre}
#hu .l2{display:flex;justify-content:space-between;gap:8px;margin-top:3px;font-size:6.5px;opacity:.9}
#hu .l2 span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
#hu .l2 span:last-child{flex:none;font-family:'DSEG7','IBM Plex Mono',monospace}
#hu .led{position:absolute;left:6px;top:7px;width:5px;height:5px;border-radius:50%;background:#ff3b4f;box-shadow:0 0 5px #ff3b4f;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 #ffc21a;outline-offset:1px}
#hu button svg{width:14px;height:14px;fill:currentColor}
#hu .play{color:#fff}
/* off: display goes dark red and nothing moves */
#hu.off .l1,#hu.off .l2{color:#3a1418;text-shadow:none}
#hu.off .led{background:#3a1418;box-shadow:none}
/* on: breathing RGB wave (hue drift from player.js + a gentle swell) */
#hu:not(.off) .l1,#hu:not(.off) .l2,#hu:not(.off) .led,#hu:not(.off) .play{filter:hue-rotate(var(--hue,0deg))}
#hu:not(.off) .play{color:#ff3b4f;text-shadow:0 0 6px #ff0a2a}
#hu:not(.off) .l1{animation:hu-breathe 4.5s ease-in-out infinite}
@keyframes hu-breathe{0%,100%{opacity:1}50%{opacity:.72}}
#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,#hu:not(.off) .l1{animation:none!important}#hu .l1 span{display:block;overflow:hidden;text-overflow:ellipsis}}
body.hu-on .cr-pill{bottom:calc(66px + env(safe-area-inset-bottom))}