/* Approved component artwork, used directly without modifying the source files. */
.hifi .supplied-display .track-duration{position:absolute;left:7.1%;top:73.5%;width:15.3%;height:5%;font:clamp(6px,.5cqw,10px)/1 monospace;color:#80dfff;text-align:center;white-space:nowrap}
/* Dark recessed surround, like the deck display; retain the existing border
   width so the VU faces and centre indicators do not move. */
.hifi .amplifier-glass{border-style:solid;border-color:#191b1a;border-radius:6px;box-shadow:0 0 0 1px #3e413e,0 2px 4px #0009,inset 0 0 0 1px #555854,inset 0 2px 5px 2px #000b,inset 0 0 25px #000}
/* Reference speaker selectors: two recessed rectangular switches and printed legends. */
.hifi .amp-speakers .speaker-heading{display:flex;align-items:center;gap:5px;margin-inline:16%;white-space:nowrap;line-height:1}
.speaker-heading>span:first-child,.speaker-heading>span:last-child{display:flex;align-items:center;gap:6px;flex:1}
.speaker-heading>span:first-child:after,.speaker-heading>span:last-child:before{content:'';display:block;flex:1;min-width:12px;height:1px;background:#676a65}
.hifi .amp-speakers .speaker-buttons{margin-top:5px}
.hifi .amp-speakers button{padding:0;border:2px solid #050605;border-radius:4px;background:linear-gradient(180deg,#ffffff0c,transparent 28%,#0005),repeating-linear-gradient(0deg,#ffffff06 0 1px,#0003 1px 2px),#1b1d1b;box-shadow:0 0 0 1px #41443e,inset 0 0 0 1px #4c4e48,inset 0 3px 3px #0007,0 2px 2px #0008;cursor:default}
.hifi .amp-speakers .speaker-switch-legend{display:flex;justify-content:center;gap:9px;margin-top:7px;font:9px/1 Arial;color:#757872}
.speaker-switch-legend>span{display:flex;align-items:center;gap:4px}
.speaker-switch-legend i{display:inline-block;width:8px;height:4px;box-sizing:border-box;border:1px solid #757872}
.speaker-switch-legend .switch-on-mark{height:2px;background:#757872}
.speaker-switch-legend .switch-off-mark{border-bottom:0}
@media(min-width:901px){
 .hifi .amp-speakers .speaker-heading{gap:.3cqw;font-size:.6cqw}
 .speaker-heading>span:first-child,.speaker-heading>span:last-child{gap:.4cqw}
 .speaker-heading>span:first-child:after,.speaker-heading>span:last-child:before{min-width:.8cqw}
 .hifi .amp-speakers .speaker-buttons{margin-top:.4cqw}
 .hifi .amp-speakers button{border-width:.15cqw;border-radius:.22cqw}
 .hifi .amp-speakers .speaker-switch-legend{font-size:.6cqw;gap:.55cqw;margin-top:.55cqw}
 .speaker-switch-legend>span{gap:.25cqw}
 .speaker-switch-legend i{width:.5cqw;height:.28cqw}
 .speaker-switch-legend .switch-on-mark{height:.12cqw}
}
/* Six independent amplifier LEDs, matching the reference's vertical/horizontal arrangement. */
.hifi .amp-warnings{display:flex;flex-direction:column;gap:12px;margin-top:14px;width:80px}
.hifi .amp-warning,.hifi .amp-mode>div{display:flex;flex-direction:column;align-items:center;gap:5px}
.hifi .amp-warning>span,.hifi .amp-mode span{font:10px/1 Arial;color:#727572;white-space:nowrap}
.hifi .amp-indicator{display:block;flex:none;width:40px;height:4px;background:#181a18;box-shadow:inset 0 1px 1px #0005}
.hifi .amp-warning .amp-indicator{width:80px}
.hifi .amp-mode{display:flex;justify-content:center;gap:30px;margin-top:15px}
.hifi .amp-stereo{background:#14e435;box-shadow:0 0 7px #0f4a}
.hifi[data-state="off"] .amp-stereo{background:#181a18;box-shadow:inset 0 1px 1px #0005}
.hifi .amp-warning .amp-indicator[data-lit="true"]{background:#ff3c0a;box-shadow:0 0 8px #ff3c0aaa;animation:amp-warning-flash .8s step-end infinite}
@keyframes amp-warning-flash{0%,100%{opacity:1}50%{opacity:.18}}
@media(min-width:901px){
 .hifi .amp-warnings{position:absolute;top:25%;bottom:27%;margin:0;width:4.9cqw;justify-content:space-between;gap:0}
 .hifi .amp-warning,.hifi .amp-mode>div{gap:.35cqw}
 .hifi .amp-warning>span,.hifi .amp-mode span{font-size:.66cqw}
 .hifi .amp-indicator{width:2.4cqw;height:.22cqw}
 .hifi .amp-warning .amp-indicator{width:4.9cqw}
 .hifi .amp-mode{position:absolute;bottom:7%;gap:2.4cqw;margin:0}
}
@media(max-width:650px){.hifi .amp-center{flex-direction:column;flex-wrap:nowrap}}
@media(prefers-reduced-motion:reduce){.hifi .amp-warning .amp-indicator[data-lit="true"]{animation:none}}
/* Decorative balance control: recessed metal face, centre mark and dot arc. */
.hifi .balance-control{gap:0}
.hifi .balance-control>i{display:block;flex:none;width:58px;height:58px;border:0;border-radius:0;background:transparent url("../assets/player/balance-knob.svg") center/contain no-repeat;margin-bottom:-4px}
.hifi .balance-control>i:after{content:none}
.hifi .balance-control>.balance-directions{display:flex;justify-content:space-between;width:94px;font:8px/10px Arial;color:#666}
.hifi .balance-control>.balance-caption{font:8px/10px Arial;color:#666}
@media(min-width:901px){
 .hifi .balance-control{top:156%}
 .hifi .balance-control>i{width:3.6cqw;height:3.6cqw;margin-bottom:-.25cqw}
 .hifi .balance-control>.balance-directions{width:5.8cqw;font-size:.55cqw;line-height:.65cqw}
 .hifi .balance-control>.balance-caption{font-size:.55cqw;line-height:.65cqw}
}
/* A square scale shares the knob's centre; its geometry is independent of
   the rectangular volume panel height. Numbers stay upright around the arc. */
@media(min-width:901px){
 .hifi .volume-panel .knob-scale{inset:0 auto auto -10%;transform:translateY(-8.333333%);width:120%;height:auto;aspect-ratio:1;background:url("../assets/player/volume-scale.svg") center/contain no-repeat;pointer-events:none}
 .hifi .knob-scale span{display:none}
}
/* Both PHONES sockets share a square vector face: no font glyph or flex squash. */
.hifi .headphone{display:block;box-sizing:border-box;width:30px;height:30px;min-width:30px;min-height:30px;aspect-ratio:1;flex:none;padding:0;border:0;border-radius:50%;background:transparent url("../assets/player/phones-socket.svg") center/contain no-repeat;box-shadow:0 1px 2px #000;margin-inline:auto}
.hifi .amp-phones{display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap}
.hifi .amp-phones .headphone{margin:0}
@media(min-width:901px){
 .hifi .headphone{width:2.2cqw;height:2.2cqw;min-width:2.2cqw;min-height:2.2cqw}
 .hifi .deck-side .headphone{margin:0}
 .hifi .amplifier-bottom>.amp-phones{left:96%;top:43%;width:2.8cqw;gap:.12cqw}
}
@media(max-width:650px){.hifi .deck-side .headphone{display:none}}
.hifi .component {
  background:linear-gradient(180deg,#ffffff08,transparent 18%,#0004),
    repeating-linear-gradient(0deg,#ffffff05 0 1px,#0004 1px 2px,transparent 2px 3px),
    linear-gradient(110deg,#171817,#242524 50%,#151615);
}
.hifi .vu-face,.hifi[data-state="playing"] .vu-face{
  background:#805900 url("../assets/player/vu-gold.png") center/100% 100% no-repeat;
}
.hifi .vu-face .needle{stroke:#ed1919;stroke-width:1.8;transform-origin:172px 172px;filter:drop-shadow(0 1px 1px #0008)}
.hifi .amp-center strong{color:#d6bb74;background:#272114;box-shadow:0 0 9px #b08b3333;text-shadow:0 0 3px #e6c26966}
.hifi .cassette-bay{padding:0;border:0;border-radius:7px;background:#080909;box-shadow:inset 0 0 14px #000,0 1px 2px #6a6a5d66;perspective:900px;overflow:visible;isolation:isolate}
.cassette-interior{position:absolute;inset:4%;border-radius:5px;background:linear-gradient(#030403,#191b18);box-shadow:inset 0 6px 14px #000;overflow:hidden}
.cassette-door{position:absolute;inset:0;z-index:2;transform-origin:50% 100%;transition:transform .6s ease,filter .6s;pointer-events:none}
.cassette-door>svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 2px #0009)}
.cassette-bay[data-open="true"] .cassette-door{transform:rotateX(-72deg);filter:brightness(.75)}
.compact-cassette{position:absolute;left:12%;top:15%;width:76%;height:68%;border:2px solid #333631;border-radius:9px;background:linear-gradient(130deg,#252724,#0a0c0a 70%);box-shadow:0 5px 7px #000,inset 0 1px #7775}
.cassette-paper{position:absolute;inset:6% 5% 35%;border:1px solid #44463d;border-radius:4px;background:linear-gradient(#b9ad87 0 32%,#3e4035 33% 38%,#b9ad87 39%);color:#25251f;font:8px Arial;padding:3%}
.cassette-paper span{float:right;font-size:7px}
.cassette-mechanism{position:absolute;left:8%;top:29%;width:84%;height:32%;border-radius:6px;background:#11130f;box-shadow:inset 0 1px 5px #000}
.tape-spool{position:absolute;top:4%;height:92%;aspect-ratio:1;display:grid;place-items:center}
.tape-spool.supply{left:6%}.tape-spool.takeup{right:6%}
.tape-pack{position:absolute;width:var(--pack,90%);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#342a20 0 1px,#59432e 1px 2px);box-shadow:0 0 1px #8b7759}
/* Original 48 × 48 px hubs, centred at (155,135) and (315,135).
   Display the supplied artwork directly; do not approximate its teeth in CSS.
   Each hub remains a separate rotating element driven by the existing player. */
.cassette-hub{position:relative;width:81.521739%;aspect-ratio:1;border:0;border-radius:50%;background-image:url("../assets/player/cassette-door.png");background-repeat:no-repeat;background-size:979.166667% 679.166667%;background-position:31.042654% 39.928058%;box-shadow:none;transform-origin:50% 50%;flex-shrink:0}
.takeup .cassette-hub{background-position:68.957346% 39.928058%}
.tape-path{position:absolute;left:16%;right:16%;bottom:5%;height:3px;background:repeating-linear-gradient(90deg,#67482c 0 7px,#38291a 7px 14px)}
.cassette-bottom{position:absolute;left:18%;bottom:0;width:64%;height:21%;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);background:linear-gradient(#33382e,#151812);display:flex;align-items:center;justify-content:space-evenly}
.cassette-bottom i{width:10%;aspect-ratio:1;border-radius:50%;background:#000;border:1px solid #535a49}
.cassette-screw{position:absolute;z-index:1;width:5px;height:5px;border-radius:50%;background:linear-gradient(45deg,#777 44%,#111 45% 55%,#777 56%)}
.screw-a{left:3%;top:4%}.screw-b{right:3%;top:4%}.screw-c{left:3%;bottom:4%}.screw-d{right:3%;bottom:4%}
/* Closed door shows the mechanism through its original transparent window. */
.cassette-bay[data-open="false"] .cassette-mechanism{left:13%;top:24%;width:74%;height:32%}
/* Match the original door-window coordinates when closed. */
.cassette-bay[data-open="false"] .compact-cassette{left:-4.347826%;top:-4.347826%;width:108.695652%;height:108.695652%;border:0}
.cassette-bay[data-open="false"] .cassette-mechanism{left:25.957447%;top:31.595092%;width:48.085106%;height:19.631902%}
.cassette-bay[data-open="false"] .tape-spool.supply{left:1.575221%}
.cassette-bay[data-open="false"] .tape-spool.takeup{right:1.575221%}
.hifi .supplied-display{background:#050606 url("../assets/player/display.png") center/100% 100% no-repeat;border:0;padding:0;box-shadow:none;border-radius:5px}
.supplied-display .db-scale,.supplied-display .digital-level>span{visibility:hidden}
.supplied-display:after{display:none}
.hifi .supplied-display .track-display{position:absolute;left:4%;top:7%;width:90%;height:auto;margin:0;color:#80dcf6;font-size:clamp(8px,.8cqw,15px)}
.hifi .supplied-display .digital-level{position:absolute;left:25.2%;width:69.1%;height:5%;margin:0;display:block}
.supplied-display .digital-level:nth-of-type(1){top:29.7%}
.supplied-display .digital-level:nth-of-type(3){top:49.7%}
.supplied-display .digital-level>span{display:none}
.supplied-display .level-bar{height:100%;background:none}
/* Keep the original fixed two-row segment grid; reveal complete cells only. */
/* 0 dB begins at cell 21 of the supplied 32-cell scale. The colour boundary
   stays fixed on the scale, independent of the current illuminated length. */
.hifi .supplied-display .level-bar:after{width:100%;clip-path:inset(0 calc(100% - var(--level,0%)) 0 0);background:linear-gradient(90deg,#80dfff 0 62.5%,#ff3c0a 62.5% 100%);mask-image:repeating-linear-gradient(90deg,#000 0 2.42%,transparent 2.42% 3.125%),linear-gradient(#000 0 38%,transparent 38% 62%,#000 62%);mask-composite:intersect;box-shadow:none;opacity:.9}
.hifi[data-state="stopped"] .supplied-display .track-display,
.hifi[data-state="off"] .supplied-display .track-display{visibility:hidden}
.hifi .supplied-display .display-bottom{position:absolute;left:7.1%;top:59%;width:15.3%;height:13.5%;margin:0;background:#010404;display:block}
.hifi .supplied-display .display-bottom time{display:block;width:100%;height:100%;font-size:0}
.track-clock-svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 2px #45e8ff88)}
.track-clock-svg path{fill:#7fe7f3}.track-clock-svg text{fill:#7fe7f3;font:italic 17px Arial}
.track-segments{position:absolute;left:5.55%;top:79.7%;width:88.8%;height:5%;overflow:hidden}
.track-segments i{display:block;width:100%;height:100%;clip-path:inset(0 calc(100% - var(--progress,0%)) 0 0);background:repeating-linear-gradient(90deg,#80dfff 0 1.89%,transparent 1.89% 2.439024%);mask-image:linear-gradient(#000 0 38%,transparent 38% 62%,#000 62%);opacity:.88}
.hifi .deck-function-row{left:52.4%;top:35.4%;width:28.7%;height:4.1%;display:flex;gap:0}
.deck-function-row .micro-control{flex:1;background:transparent!important;box-shadow:none!important;border-color:transparent!important;color:transparent!important;height:100%;padding:0}
.hifi[data-state="playing"] .deck-function-row .micro-control:nth-child(3),
.hifi[data-state="stopped"] .deck-function-row .micro-control:nth-child(2){box-shadow:inset 0 0 0 1px #64dcff!important;color:#80dfff!important;background:#041012!important}
@media(max-width:900px){
 .hifi .cassette-bay{position:relative;aspect-ratio:470/326;min-height:0;width:100%}
 .hifi .supplied-display{position:relative;aspect-ratio:2169/592;min-height:0}
 .hifi .deck-function-row{position:relative;left:auto;top:auto;width:100%;height:18px;margin-top:-40px;margin-bottom:22px;padding-left:25%;padding-right:5%}
 .supplied-display .display-bottom>strong,.supplied-display .display-bottom>span{display:none}
}
@media(prefers-reduced-motion:reduce){.cassette-door{transition:none}}