/* SoundSpeed CDX-99 head unit — late-90s single-DIN deck */
:root{
  --hu-face:#16181a; --hu-face2:#0c0d0e; --hu-trim:#3a3f44; --hu-btn:#24282c; --hu-btn-hi:#33393f;
  --hu-glass:#05100f; --hu-lcd:#ff9a2e; --hu-lcd-dim:rgba(255,154,46,.14); --hu-lcd-glow:rgba(255,154,46,.55);
  --hu-red:#e3262b; --hu-ink:#8d949b;
}
.hu-dock[data-theme-lcd="blue"]{--hu-lcd:#4fd2ff;--hu-lcd-dim:rgba(79,210,255,.13);--hu-lcd-glow:rgba(79,210,255,.55)}
.hu-dock[data-theme-lcd="green"]{--hu-lcd:#5cffa8;--hu-lcd-dim:rgba(92,255,168,.13);--hu-lcd-glow:rgba(92,255,168,.5)}
.hu-dock[data-theme-lcd="red"]{--hu-lcd:#ff3b3b;--hu-lcd-dim:rgba(255,59,59,.15);--hu-lcd-glow:rgba(255,59,59,.55)}

.hu-dock{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:120;font-family:"Barlow Condensed","Arial Narrow",sans-serif;-webkit-tap-highlight-color:transparent}
.hu-pill{display:flex;align-items:center;gap:10px;background:#0c0d0e;color:#f2efe6;border:1px solid #2f3532;border-radius:999px;padding:9px 16px 9px 10px;cursor:pointer;font:700 13px/1 "Barlow Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.hu-pill:hover{border-color:var(--hu-lcd)}
.hu-pill i{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#555,#111 70%);display:grid;place-items:center;box-shadow:inset 0 0 0 2px #2a2e31}
.hu-pill i::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--hu-lcd);box-shadow:0 0 8px var(--hu-lcd)}
.hu-pill .eq{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.hu-pill .eq b{width:3px;background:var(--hu-lcd);height:30%;border-radius:1px}
.hu-dock.playing .hu-pill .eq b{animation:hueq .9s ease-in-out infinite alternate}
.hu-pill .eq b:nth-child(2){animation-delay:-.3s}.hu-pill .eq b:nth-child(3){animation-delay:-.6s}.hu-pill .eq b:nth-child(4){animation-delay:-.15s}
@keyframes hueq{from{height:20%}to{height:100%}}
.hu-dock.open .hu-pill{display:none}

/* ---- the unit ---- */
.hu{display:none;width:min(640px,calc(100vw - 32px));position:relative;perspective:900px}
.hu-dock.open .hu{display:block;animation:huin .35s cubic-bezier(.2,.8,.2,1)}
@keyframes huin{from{transform:translateY(20px);opacity:0}}
.hu-chassis{background:linear-gradient(#0a0b0c,#050606);border-radius:6px;padding:7px;box-shadow:0 24px 60px rgba(0,0,0,.75),0 0 0 1px #000,inset 0 1px 0 #1d2023}
.hu-face{position:relative;display:grid;grid-template-columns:96px 1fr 128px;gap:12px;align-items:center;padding:12px 14px 10px;border-radius:4px;
  background:linear-gradient(180deg,#24282c 0%,var(--hu-face) 35%,var(--hu-face2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.6);transform-origin:50% 100%;transition:transform .55s cubic-bezier(.5,0,.3,1.3),opacity .3s}
.hu-face::before{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px)}
.hu-face.off-rel{transform:rotateX(-100deg) translateY(10px);opacity:0;pointer-events:none}

/* knob */
.hu-knobwrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.hu-knob{width:76px;height:76px;border-radius:50%;border:0;padding:0;cursor:grab;position:relative;touch-action:none;
  background:conic-gradient(from 0deg,#3b4146,#1a1d20,#3b4146,#1a1d20,#3b4146,#1a1d20,#3b4146);
  box-shadow:0 0 0 3px #0a0b0c,0 0 0 4px #2f3438,0 6px 14px rgba(0,0,0,.7),inset 0 2px 3px rgba(255,255,255,.12)}
.hu-knob::before{content:"";position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a4045,#141618 75%);box-shadow:inset 0 1px 2px rgba(255,255,255,.1)}
.hu-knob .mark{position:absolute;left:50%;top:6px;width:3px;height:12px;margin-left:-1.5px;border-radius:2px;background:var(--hu-lcd);box-shadow:0 0 6px var(--hu-lcd-glow);transform-origin:50% 32px}
.hu-knob:active{cursor:grabbing}
.hu-knob:focus-visible,.hu-b:focus-visible,.hu-p:focus-visible{outline:2px solid var(--hu-lcd);outline-offset:2px}
.hu-lbl{font:600 9px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em;color:var(--hu-ink);text-transform:uppercase}

/* center */
.hu-center{display:flex;flex-direction:column;gap:7px;min-width:0}
.hu-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.hu-brand{font:italic 800 17px/1 "Barlow Condensed",sans-serif;letter-spacing:.04em;color:#e8e6df;text-transform:uppercase}
.hu-brand b{color:var(--hu-red);font-weight:800}
.hu-model{font:600 9px/1 "Barlow Condensed",sans-serif;letter-spacing:.18em;color:var(--hu-ink)}
.hu-slot{height:5px;border-radius:3px;background:#000;box-shadow:inset 0 1px 2px #000,0 1px 0 rgba(255,255,255,.06)}
.hu-glass{position:relative;background:var(--hu-glass);border-radius:3px;padding:7px 10px 6px;overflow:hidden;
  box-shadow:inset 0 0 0 1px #000,inset 0 2px 10px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.05)}
.hu-glass::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(170deg,rgba(255,255,255,.07),transparent 40%)}
.hu-row1{display:flex;justify-content:space-between;align-items:center;font:20px/1 "VT323","Share Tech Mono",monospace;color:var(--hu-lcd);text-shadow:0 0 6px var(--hu-lcd-glow);min-height:20px}
.hu-ind{display:flex;gap:7px;align-items:center}
.hu-ind span{font-size:14px;padding:0 3px;border:1px solid currentColor;border-radius:2px;line-height:14px;opacity:.18}
.hu-ind span.on{opacity:1}
.hu-row1 .tm{font-variant-numeric:tabular-nums;letter-spacing:.06em}
.hu-mq{overflow:hidden;white-space:nowrap;font:26px/1.05 "VT323","Share Tech Mono",monospace;color:var(--hu-lcd);text-shadow:0 0 8px var(--hu-lcd-glow);margin:3px 0 4px;height:28px;letter-spacing:.05em}
.hu-mq span{display:inline-block;padding-left:0}
.hu-mq span.run{animation:humq var(--mqdur,10s) linear infinite;padding-left:100%}
@keyframes humq{to{transform:translateX(-100%)}}
.hu-viz{display:block;width:100%;height:46px}
.hu-off .hu-row1,.hu-off .hu-mq,.hu-off .hu-viz{opacity:.06;text-shadow:none}

/* presets */
.hu-presets{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.hu-p{height:22px;border:0;border-radius:2px;cursor:pointer;background:linear-gradient(#2b3034,#1b1e21);color:#c9ccce;font:700 12px/1 "Barlow Condensed",sans-serif;box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 2px 3px rgba(0,0,0,.6);position:relative}
.hu-p::after{content:"";position:absolute;left:50%;bottom:3px;width:10px;height:2px;margin-left:-5px;background:#000;border-radius:1px}
.hu-p.on::after{background:var(--hu-lcd);box-shadow:0 0 5px var(--hu-lcd)}
.hu-p:active,.hu-b:active{transform:translateY(1px);box-shadow:none}

/* right buttons */
.hu-right{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hu-b{height:30px;border:0;border-radius:3px;cursor:pointer;background:linear-gradient(var(--hu-btn-hi),var(--hu-btn));color:#d9dbdc;font:700 11px/1 "Barlow Condensed",sans-serif;letter-spacing:.12em;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.6)}
.hu-b svg{width:14px;height:14px;fill:currentColor;vertical-align:middle}
.hu-b.play{grid-column:1/-1;height:34px;background:linear-gradient(#3a1a1b,#241112);color:#ffd9d9}
.hu-b.play.on{color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 12px rgba(227,38,43,.45)}
.hu-b.rel{background:linear-gradient(#5a1416,#3a0c0e);color:#fff}
.hu-b.x{background:transparent;box-shadow:none;color:var(--hu-ink);height:20px}
.hu-ir{position:absolute;right:18px;bottom:5px;width:5px;height:5px;border-radius:50%;background:#2a0607}
.hu-dock.playing .hu-ir{background:var(--hu-red);box-shadow:0 0 6px var(--hu-red);animation:hublink 1.6s steps(1) infinite}
@keyframes hublink{50%{opacity:.25}}

/* faceplate-off back panel */
.hu-back{position:absolute;inset:7px;border-radius:4px;display:none;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  background:repeating-linear-gradient(45deg,#0b0c0d 0 10px,#0e1011 10px 20px);color:#9aa0a5;font:600 13px/1.3 "Share Tech Mono",monospace;letter-spacing:.1em;text-align:center;padding:10px}
.hu-back.on{display:flex}
.hu-back .led{width:9px;height:9px;border-radius:50%;background:var(--hu-red);box-shadow:0 0 10px var(--hu-red);animation:hublink 1s steps(1) infinite}
.hu-back button{font:700 12px/1 "Barlow Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;border:1px solid #f2efe6;background:transparent;color:#f2efe6;cursor:pointer}
.hu-pins{display:flex;gap:3px}.hu-pins i{width:3px;height:10px;background:#b8963e;border-radius:1px}

.hu-cap{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding:0 4px;font:500 11px/1.2 "Share Tech Mono",monospace;color:#7c8287;letter-spacing:.06em}

@media (max-width:560px){
  .hu-dock.open{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px))}
  .hu{width:100%}
  .hu-face{grid-template-columns:72px 1fr;grid-template-areas:"c c" "k r";gap:10px;padding:10px}
  .hu-center{grid-area:c}.hu-knobwrap{grid-area:k}.hu-right{grid-area:r;grid-template-columns:repeat(4,1fr)}
  .hu-b.play{grid-column:auto}
  .hu-knob{width:62px;height:62px}.hu-knob .mark{transform-origin:50% 25px}
  .hu-mq{font-size:23px}
}
@media (prefers-reduced-motion:reduce){.hu-mq span.run{animation-duration:40s}.hu-face{transition:none}}

/* fold-out monitor for YouTube discs (YouTube's player must stay visible) */
.hu-screen{display:none;margin:0 0 8px auto;width:min(300px,100%);transform-origin:50% 100%}
.hu-screen.on{display:block;animation:huflip .5s cubic-bezier(.2,.8,.2,1)}
@keyframes huflip{from{transform:rotateX(70deg);opacity:0}}
.hu-screen-bezel{background:linear-gradient(#1e2124,#0b0c0d);padding:8px 8px 10px;border-radius:5px;box-shadow:0 14px 40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.07)}
.hu-yt,.hu-screen iframe{display:block;width:100%;aspect-ratio:16/9;max-width:100%;border:0;background:#000;border-radius:2px}
.hu-screen-lbl{display:block;text-align:right;font:600 9px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--hu-ink);margin-top:5px}
.hu-p:disabled{opacity:.35;cursor:default}
@media (max-width:560px){.hu-screen{width:100%}}
.hu-mq{text-transform:uppercase}