:root {
  --bg:#120b08;
  --wood:#3a1f12;
  --wood2:#1c0e08;
  --cream:#f9d77b;
  --gold:#e8a939;
  --amber:#ffb11b;
  --red:#f14b28;
  --red2:#a51f12;
  --ink:#1b120c;
  --panel:#17100c;
  --chrome:#d4c5a4;
  --muted:#bda777;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 0,#3c2115 0,#140c08 46%,#070504 100%);color:#fff;font-family:Georgia, 'Times New Roman', serif}
body{padding:24px 12px 44px}
button{font:inherit}
.page-shell{display:flex;justify-content:center}
.jukebox{position:relative;width:min(1040px,100%);padding:54px 34px 30px;border:4px solid #2f1a0f;border-radius:46% 46% 28px 28px/11% 11% 28px 28px;background:linear-gradient(90deg,#26130b,#4c2a15 4%,#1a0e09 10%,#0e0a08 50%,#1a0e09 90%,#4c2a15 96%,#26130b);box-shadow:0 0 0 4px #b67b25,0 0 0 9px #31180d,0 30px 80px #000}
.jukebox__arch{position:absolute;inset:8px 10px auto;height:180px;border-radius:50% 50% 0 0/72% 72% 0 0;border:18px solid #5b180e;box-shadow:inset 0 0 0 7px #d3a13d,0 0 0 5px #17100b;pointer-events:none}
.jukebox__arch:before{content:"";position:absolute;inset:-8px;border-radius:inherit;border:10px solid #ffb72a;box-shadow:0 0 18px #ff7a1c,inset 0 0 12px #ffe18a}
.brand-panel{position:relative;text-align:center;padding:58px 10px 20px}
.brand-panel__eyebrow{margin:0;color:var(--gold);letter-spacing:.35em;font-size:.78rem}.brand-panel h1{margin:6px 0 0;font-size:clamp(2.4rem,7vw,5.4rem);line-height:.95;font-style:italic;color:#ff623c;text-shadow:0 0 8px #bd170d,0 0 20px #7d120d}.brand-panel__sub{margin:9px 0 0;letter-spacing:.28em;color:var(--cream);font:700 clamp(1rem,3vw,1.6rem)/1 Arial,sans-serif}
.chrome-rule{height:5px;margin:0 auto 18px;width:90%;background:linear-gradient(90deg,transparent,#d8c49d 12%,#5d5348 45%,#eadab9 52%,#5d5348 58%,#d8c49d 88%,transparent);border-radius:5px}
.genre-panel,.now-playing-card,.queue-panel{background:linear-gradient(#1c130e,#0d0907);border:2px solid #a87528;box-shadow:inset 0 0 0 3px #332116,0 5px 16px #0008;border-radius:18px}
.genre-panel{padding:18px 18px 20px;margin-bottom:18px}.panel-title{text-align:center;color:#ff7b45;font:700 .95rem/1 Arial,sans-serif;letter-spacing:.22em;margin:0 0 14px}.genre-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}.genre-btn{border:2px solid #6f4a1e;border-radius:14px;background:linear-gradient(#ffe39a,#d7a84b);color:#2b180c;padding:12px 10px;font:800 .95rem/1.1 Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em;box-shadow:inset 0 0 0 2px #fff3b8,0 3px 0 #6d3b11;cursor:pointer}.genre-btn:hover{filter:brightness(1.08)}.genre-btn.is-active{background:linear-gradient(#ff6a3d,#bd2817);color:#fff2c7;border-color:#ffad4b;box-shadow:0 0 14px #ff5a2c,inset 0 0 0 2px #ff9f58,0 3px 0 #651208}
.now-playing{display:flex;align-items:center;justify-content:center;gap:10px;color:#ff7045;font:700 1rem/1 Arial,sans-serif;letter-spacing:.2em;margin:15px 0 12px}.now-playing__lamp{width:9px;height:9px;border-radius:50%;background:#ff5b31;box-shadow:0 0 10px #ff5b31}
.now-playing-card{padding:18px}.media-deck{display:grid;grid-template-columns:minmax(220px,36%) 1fr;gap:20px;align-items:stretch}.sleeve__frame{position:relative;aspect-ratio:1;border-radius:13px;overflow:hidden;border:3px solid #8d672f;box-shadow:0 8px 25px #0008;background:#25180f}.sleeve__frame img{width:100%;height:100%;object-fit:cover;display:block}.sleeve__shine{position:absolute;inset:0;background:linear-gradient(130deg,#fff3 0,transparent 18%,transparent 65%,#fff1 75%,transparent);pointer-events:none}.sleeve__label{text-align:center;background:#e0b45f;color:#26160c;padding:8px;border-radius:0 0 8px 8px;margin:-3px 8px 0;font:800 .75rem/1.2 Arial,sans-serif;letter-spacing:.16em}.sleeve__label small{display:block;font-size:.62rem;margin-top:4px}.video-console__bezel{height:100%;min-height:250px;border:8px solid #2d2118;border-radius:14px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 2px #8f754d}.video-console__bezel iframe{width:100%!important;height:100%!important;min-height:250px}.video-console__caption{text-align:center;color:#a98c58;font:700 .72rem Arial,sans-serif;letter-spacing:.16em;margin:8px 0 0}
.title-strip{text-align:center;margin:17px 0 12px}.title-strip__label{font:700 .72rem Arial,sans-serif;letter-spacing:.23em;color:#d9aa4d;margin:0 0 6px}.title-strip__window{padding:11px 18px;background:#ead082;color:#28180d;border:2px solid #8a632e;border-radius:9px;box-shadow:inset 0 0 14px #fff3}.title-strip h2{font-size:clamp(1.25rem,3.8vw,2rem);margin:0}.title-strip__meta{font:700 .72rem Arial,sans-serif;color:#bda777;letter-spacing:.12em;margin:8px 0 0}
.progress-panel{display:grid;grid-template-columns:48px 1fr 48px;gap:10px;align-items:center;font:700 .82rem Arial,sans-serif;color:#f4c466}.progress-track{height:9px;border:2px solid #6b5940;border-radius:9px;background:#070605;overflow:hidden}.progress-track__fill{height:100%;width:0;background:linear-gradient(90deg,#b51d14,#ff6b37,#ffc249)}
.controls{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:12px;margin:18px 0}.control{min-height:68px;border-radius:18px;border:2px solid #7e5925;background:linear-gradient(#392416,#180f0a);color:#f6c861;box-shadow:inset 0 0 0 2px #0a0705,0 4px 0 #0b0603;cursor:pointer;display:flex;gap:8px;align-items:center;justify-content:center;font:800 .84rem Arial,sans-serif;letter-spacing:.08em}.control:disabled{opacity:.45;cursor:default}.control--primary{border-radius:50%;width:94px;height:94px;justify-self:center;align-self:center;background:radial-gradient(circle,#633018 0,#26140b 64%);border:5px solid #cc7a21;box-shadow:0 0 0 4px #4f2110,0 0 18px #ff642b}.control--primary .control__icon{font-size:1.45rem}.control__icon{font-size:1.15rem}
.queue-panel{padding:14px 18px;margin-top:10px}.queue-list{display:grid;gap:7px}.queue-row{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;background:#e4c66f;color:#2a1b0e;padding:7px 10px;border-radius:7px;font:700 .78rem Arial,sans-serif}.queue-row span:last-child{font-weight:500;color:#6b4a20}.queue-empty{color:#aa9167;text-align:center;font:italic .9rem Georgia,serif}
.status-panel{display:flex;align-items:center;justify-content:center;gap:9px;color:#c6ad7c;font:.82rem Arial,sans-serif;margin:16px 0}.status-panel__dot{width:8px;height:8px;border-radius:50%;background:#ee512b;box-shadow:0 0 8px #ee512b}.jukebox__footer{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;border-top:1px solid #7c5627;color:#dcb968;font:700 .72rem Arial,sans-serif;letter-spacing:.1em}
@media(max-width:760px){body{padding:8px 4px 20px}.jukebox{padding:42px 12px 18px;border-radius:42% 42% 20px 20px/7% 7% 20px 20px}.jukebox__arch{height:135px;border-width:12px}.brand-panel{padding-top:44px}.media-deck{grid-template-columns:1fr}.sleeve{max-width:390px;margin:auto}.video-console__bezel{min-height:205px}.controls{grid-template-columns:1fr 1fr 1fr;gap:7px}.control{min-height:58px;font-size:.68rem;flex-direction:column}.control--primary{width:78px;height:78px}.genre-grid{grid-template-columns:repeat(2,1fr)}.queue-row{grid-template-columns:24px 1fr}.queue-row span:last-child{display:none}.jukebox__footer{flex-direction:column;text-align:center}}

/* Wurlitzer visual refinement */
body{background:radial-gradient(ellipse at 50% -10%,#3f2415 0,#140a06 48%,#050302 100%);padding-top:16px}
.jukebox{overflow:hidden;border-width:5px;border-color:#1b0c05;box-shadow:0 0 0 3px #e5b14e,0 0 0 7px #3a1709,0 0 0 10px #b67b25,0 32px 90px #000, inset 0 0 50px #0008;background:linear-gradient(90deg,#180904 0,#713714 3%,#321406 7%,#120906 11%,#0b0705 50%,#120906 89%,#321406 93%,#713714 97%,#180904 100%)}
.jukebox:before,.jukebox:after{content:"";position:absolute;z-index:0;top:120px;bottom:28px;width:25px;border-radius:18px;background:linear-gradient(90deg,#5a190b,#ff7b13 18%,#ffe27a 48%,#ff9d1d 72%,#71190c);box-shadow:0 0 7px #ff8b1d,0 0 24px #ff7a16,inset 0 0 5px #fff3}
.jukebox:before{left:10px}.jukebox:after{right:10px}.jukebox>*:not(.jukebox__arch){position:relative;z-index:1}
.jukebox__arch{border-color:#6f1c0d;box-shadow:inset 0 0 0 5px #ffd35d,inset 0 0 0 10px #b22610,0 0 0 4px #15100b,0 0 24px #ff7c17}
.jukebox__arch:before{border-color:#ffc33c;box-shadow:0 0 10px #ff6b0b,0 0 24px #ff8b18,inset 0 0 8px #fff1a0}
.brand-panel{margin:0 22px 16px;padding-bottom:24px;border-radius:46% 46% 16px 16px/38% 38% 16px 16px;background:radial-gradient(ellipse at center,#241207 0,#090604 72%);box-shadow:inset 0 0 0 2px #8b5c25,inset 0 0 0 5px #16100c}
.brand-panel h1{font-family:"Brush Script MT","Segoe Script",cursive;font-style:normal;font-weight:500;color:#ff762f;text-shadow:0 0 3px #ffe09a,0 0 10px #ff5b15,0 0 24px #b5200d}
.brand-panel__sub{color:#ffd56e;text-shadow:0 0 8px #c77c16}
.genre-panel,.now-playing-card,.queue-panel{border-color:#c78b2e;box-shadow:inset 0 0 0 2px #090604,inset 0 0 0 4px #76501e,0 7px 18px #000a}
.genre-panel{margin-left:22px;margin-right:22px;background:radial-gradient(ellipse at 50% 20%,#20130b,#090604 75%)}
.genre-btn{border:2px solid #8e5d20;background:linear-gradient(#fff0ae 0,#f5d071 48%,#c88b30 100%);box-shadow:inset 0 0 0 2px #fff5c6,inset 0 -5px 8px #9a5c1b55,0 3px 0 #4b250b,0 0 8px #d9932788;text-shadow:0 1px #fff6b0}
.genre-btn:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 2px #fff7d2,0 4px 0 #4b250b,0 0 15px #ffc44a}
.genre-btn.is-active{background:linear-gradient(#ff7540,#d52f18 58%,#8d160c);border-color:#ffc45a;color:#fff4c9;text-shadow:0 1px #721207;box-shadow:inset 0 0 0 2px #ffad62,0 3px 0 #641006,0 0 9px #ff5424,0 0 22px #ff6b22}
.now-playing:before,.now-playing:after{content:"";height:4px;width:90px;border-radius:4px;background:linear-gradient(90deg,transparent,#d6a544,#f05a25)}.now-playing:after{transform:scaleX(-1)}
.now-playing-card{margin-left:22px;margin-right:22px;background:linear-gradient(#17100b,#090604)}
.sleeve__frame{border-color:#b88b45;box-shadow:0 0 0 3px #25170c,0 8px 25px #000b}
.sleeve__label{background:linear-gradient(#f9dc86,#c99439);border:1px solid #7c4d16}
.video-console__bezel{border-color:#1b130d;box-shadow:0 0 0 2px #a3793b,inset 0 0 0 2px #0a0705,0 8px 20px #000b}
.title-strip__window{background:linear-gradient(#fff0ae,#ddb552);box-shadow:inset 0 0 18px #fff7cf,0 0 8px #e6a93866}
.progress-track{box-shadow:inset 0 1px 5px #000,0 0 0 1px #a67b42}.progress-track__fill{box-shadow:0 0 8px #ff632d}
.controls{margin-left:22px;margin-right:22px}.control{border-color:#b27b2b;background:linear-gradient(#4b2815,#160b06);box-shadow:inset 0 0 0 2px #0a0604,inset 0 0 12px #b4672433,0 4px 0 #080402,0 0 7px #d48a2b55}.control:hover:not(:disabled){filter:brightness(1.18);box-shadow:inset 0 0 0 2px #0a0604,0 4px 0 #080402,0 0 14px #ff9b2f}.control--primary{background:radial-gradient(circle,#9a351b 0,#501b0e 45%,#1b0c06 75%);border-color:#e6a33a;box-shadow:0 0 0 4px #5b240e,0 0 10px #ff5b1e,0 0 24px #ff7a22,inset 0 0 12px #ffb14955}
.queue-panel{margin-left:22px;margin-right:22px}.queue-row{background:linear-gradient(#f4d982,#c99b40);border:1px solid #7c511d;box-shadow:inset 0 1px #fff2b0}
.jukebox__footer{margin:18px 22px 0;border:1px solid #7d5422;border-radius:10px;background:linear-gradient(#24160d,#0e0906);box-shadow:inset 0 0 0 2px #090604;color:#e8c777}
@media(max-width:760px){.jukebox:before,.jukebox:after{width:12px;top:100px}.brand-panel,.genre-panel,.now-playing-card,.controls,.queue-panel,.jukebox__footer{margin-left:8px;margin-right:8px}.now-playing:before,.now-playing:after{width:35px}}

/* =============================================================
   FINAL WURLITZER FINISH — decorative layer only
   ============================================================= */
:root{
  --wl-gold:#f6c65a;
  --wl-brass:#9e6524;
  --wl-chrome-hi:#f5ead0;
  --wl-chrome-mid:#8e806d;
  --wl-neon:#ff6b2d;
  --wl-red:#c52e18;
  --wl-black:#090604;
}
body{
  background:
    radial-gradient(ellipse at 50% -8%,rgba(132,66,26,.42),transparent 38%),
    radial-gradient(ellipse at 50% 42%,#211109 0,#0b0604 56%,#030202 100%);
}
.jukebox{
  max-width:1100px;
  padding:64px 43px 34px;
  border-radius:48% 48% 30px 30px/10% 10% 30px 30px;
  border:5px solid #160a05;
  background:
    linear-gradient(90deg,rgba(255,191,58,.09),transparent 8%,transparent 92%,rgba(255,191,58,.09)),
    linear-gradient(90deg,#170804,#773817 2.4%,#371608 5%,#110805 10%,#090604 50%,#110805 90%,#371608 95%,#773817 97.6%,#170804);
  box-shadow:
    0 0 0 2px #f1be4f,
    0 0 0 6px #50200b,
    0 0 0 9px #bd7d29,
    0 0 0 13px #160a05,
    0 36px 100px #000,
    inset 0 0 70px #000b;
}
.jukebox::before,.jukebox::after{
  top:126px;bottom:36px;width:31px;border-radius:20px;
  border:2px solid #2d1208;
  background:linear-gradient(90deg,#3a0f08 0,#b92c12 8%,#ff8b1d 25%,#fff0a1 50%,#ffae2e 70%,#c73515 90%,#3a0f08 100%);
  box-shadow:
    inset 4px 0 6px #6e170c,
    inset -3px 0 5px #fff4b566,
    0 0 0 4px #211009,
    0 0 0 7px #9c6d2e,
    0 0 11px #ff9528,
    0 0 32px #ff5d12;
}
.jukebox::before{left:12px}.jukebox::after{right:12px}
.jukebox__arch{
  inset:9px 12px auto;height:198px;border-width:20px;
  border-color:#761f10;
  background:transparent;
  box-shadow:
    inset 0 0 0 4px #271006,
    inset 0 0 0 9px #f0b03d,
    inset 0 0 0 13px #9c240e,
    0 0 0 4px #130a06,
    0 0 0 7px #b47a2d,
    0 0 28px #ff6817;
}
.jukebox__arch::before{
  inset:-10px;border-width:11px;border-color:#ffd254;
  background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 36%);
  box-shadow:0 0 7px #fff1ad,0 0 19px #ff8b1d,0 0 38px #ff5e0d,inset 0 0 10px #fff7c5;
}
.brand-panel{
  margin:0 27px 20px;padding:61px 16px 25px;
  border:2px solid #94682e;
  border-radius:48% 48% 17px 17px/40% 40% 17px 17px;
  background:
    radial-gradient(ellipse at 50% 55%,rgba(95,39,14,.3),transparent 48%),
    linear-gradient(#0c0705,#090604);
  box-shadow:inset 0 0 0 3px #1c110b,inset 0 -18px 30px #0008,0 7px 18px #0007;
}
.crest{
  position:absolute;left:50%;top:-39px;transform:translateX(-50%);
  width:92px;height:62px;display:grid;place-items:center;
  color:#ffe484;font-size:2.3rem;
  border-radius:50% 50% 38% 38%;
  border:3px solid #d99a32;
  background:radial-gradient(circle,#bc3018 0 34%,#59170c 36% 60%,#160b06 62%);
  box-shadow:0 0 0 3px #241008,0 0 17px #ff6f1c,inset 0 0 12px #ff9c3155;
  text-shadow:0 0 8px #ff7d1e;
}
.crest::before,.crest::after{content:"";position:absolute;top:26px;width:68px;height:8px;border-top:4px double var(--wl-chrome-hi);border-bottom:2px solid #55483c}
.crest::before{right:73px;transform:rotate(-13deg)}.crest::after{left:73px;transform:rotate(13deg)}
.brand-panel__eyebrow{font-family:Arial,sans-serif;font-weight:700;color:#e6b451;text-shadow:0 0 6px #aa581d}
.brand-panel h1{font-size:clamp(3.1rem,7.3vw,6rem);letter-spacing:.01em;color:#ff7635;text-shadow:0 0 2px #ffe6a6,0 0 9px #ff6b23,0 0 20px #d92d12,0 0 42px #7d1007}
.brand-panel__sub{display:flex;justify-content:center;align-items:center;gap:17px;color:#ffdc79;text-shadow:0 0 8px #d68319,0 0 16px #8e410d}
.brand-panel__sub span{font-size:.95em;color:#f29b2e}
.chrome-rule{height:8px;margin-bottom:20px;background:linear-gradient(90deg,transparent 0,#544335 5%,#f3e7cb 11%,#766554 16%,#30241c 46%,#faf0d8 50%,#30241c 54%,#766554 84%,#f3e7cb 89%,#544335 95%,transparent);box-shadow:0 2px 7px #000;border-radius:50%}
.genre-panel,.now-playing-card,.queue-panel{
  border:2px solid #d29635;
  box-shadow:inset 0 0 0 2px #090604,inset 0 0 0 5px #61421f,0 0 0 1px #f2bf5644,0 9px 22px #000b;
}
.genre-panel{margin-left:27px;margin-right:27px;padding:20px 20px 23px}
.panel-title{position:relative;color:#ff7540;text-shadow:0 0 8px #bc2a12;font-size:1rem}
.genre-grid{gap:12px}
.genre-btn{
  min-height:64px;border-radius:13px;border:2px solid #81501b;
  background:linear-gradient(#fff0ac 0,#f4d376 42%,#d49e3c 75%,#b97625 100%);
  color:#24150b;
  box-shadow:inset 0 0 0 2px #fff7cb,inset 0 -7px 10px #78410f44,0 3px 0 #4a250c,0 0 0 2px #24140a,0 0 10px #ecaa3c66;
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;
}
.genre-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}
.genre-btn.is-active{background:linear-gradient(#ff7742,#df391d 47%,#9e180e 100%);box-shadow:inset 0 0 0 2px #ffba73,inset 0 -7px 12px #5c0c07aa,0 3px 0 #5c0b05,0 0 0 2px #321008,0 0 13px #ff4d22,0 0 26px #ff5d1c99}
.now-playing{font-size:1.05rem;margin:18px 0 13px;text-shadow:0 0 8px #db3517}
.now-playing::before,.now-playing::after{height:7px;width:112px;background:linear-gradient(90deg,transparent,#8a5a27 20%,#f0c060 56%,#ef5425 100%);box-shadow:0 1px #160b06}
.now-playing-card{margin-left:27px;margin-right:27px;padding:20px;background:radial-gradient(ellipse at 50% 5%,#25150c 0,#0b0705 65%)}
.media-deck{gap:23px}
.sleeve{position:relative;padding:7px;border-radius:17px;background:linear-gradient(135deg,#ece1c6,#655440 18%,#211710 34%,#c8ad7c 50%,#271a11 66%,#7b674d 84%,#efe4cb);box-shadow:0 11px 28px #000c}
.sleeve__frame{border:3px solid #2a180d;border-radius:10px;box-shadow:0 0 0 2px #d6b978,0 0 0 5px #17100b,inset 0 0 12px #000}
.sleeve__label{margin:4px 9px -1px;border:2px solid #7b511d;background:linear-gradient(#ffe89b,#d9a43d);box-shadow:inset 0 1px #fff6c7}
.video-console{display:flex;flex-direction:column}
.video-console__bezel{flex:1;border:9px solid #15100c;border-radius:16px;box-shadow:0 0 0 2px #b18445,0 0 0 5px #342319,inset 0 0 0 2px #000,0 10px 24px #000c}
.video-console__caption{color:#ca9c50;text-shadow:0 0 6px #7e4016}
.title-strip{margin:20px 0 12px}
.title-strip__window{position:relative;overflow:hidden;border:2px solid #9f6b29;background:linear-gradient(#fff1b0,#eccb72 58%,#c7943c);box-shadow:inset 0 0 16px #fff8d5,0 0 0 3px #25160b,0 0 10px #f4b33e77}
.title-strip__window::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(90,52,19,.05) 9px 10px);pointer-events:none}
.title-strip h2{position:relative;font-family:Georgia,'Times New Roman',serif;color:#241309;text-shadow:0 1px #fff3b6}
.progress-panel{max-width:720px;margin:0 auto}
.progress-track{height:11px;border-color:#7c6d59;background:#050403;box-shadow:inset 0 2px 6px #000,0 0 0 2px #24160d,0 0 0 3px #8c6735}
.progress-track__fill{background:linear-gradient(90deg,#a91b11,#ff562b 55%,#ffc64d);box-shadow:0 0 9px #ff5a29}
.controls{grid-template-columns:1fr 145px 1fr;align-items:center;gap:30px;margin:22px 44px 14px}
.control{min-height:78px;border-radius:28px;border:3px solid #a46c28;background:radial-gradient(ellipse at 50% 25%,#4b2917,#160c07 70%);box-shadow:inset 0 0 0 2px #080504,inset 0 0 0 5px #3b271a,0 5px 0 #050302,0 0 0 2px #6e4a26,0 0 10px #d7842c55;color:#ffc95c;text-shadow:0 0 7px #b36016}
.control:hover:not(:disabled){transform:translateY(-1px);filter:none;box-shadow:inset 0 0 0 2px #080504,inset 0 0 0 5px #4b301d,0 6px 0 #050302,0 0 0 2px #a36a2d,0 0 16px #ff9b35}
.control--primary{width:124px;height:124px;border:6px solid #e7a137;background:radial-gradient(circle at 50% 35%,#a8381c 0,#6f210f 36%,#2b1008 66%,#110805 100%);box-shadow:0 0 0 3px #261008,0 0 0 7px #a66422,0 0 0 10px #2a1309,0 0 13px #ff4c1e,0 0 32px #ff6a22,inset 0 0 20px #ff9e3955}
.control--primary::before{content:"";position:absolute;width:93px;height:93px;border-radius:50%;border:1px solid #ffc85a66;box-shadow:inset 0 0 12px #ff6a2433;pointer-events:none}
.control--primary{position:relative}.control--primary .control__icon{font-size:2rem;color:#ffd66e;text-shadow:0 0 9px #ff9a2c}.control--primary .control__text{position:absolute;bottom:-31px;white-space:nowrap;padding:5px 12px;border-radius:12px;background:#2b160b;border:1px solid #9b6828;color:#f6c65d;font-size:.72rem}
.control:not(.control--primary) .control__icon{font-size:1.45rem;color:#ff6932;text-shadow:0 0 8px #ff451e}
.marquee{margin:34px auto 5px;max-width:720px;min-height:67px;display:grid;grid-template-columns:42px 1fr auto 42px;align-items:center;padding:8px 14px;border:3px solid #5c3b18;border-radius:10px;background:linear-gradient(#ffecaa,#d7a64a);color:#38180c;box-shadow:inset 0 0 0 3px #fff1b6,inset 0 0 19px #a9682133,0 0 0 3px #1d1008,0 7px 13px #0008;font-family:Arial,sans-serif}.marquee strong{font-family:"Brush Script MT","Segoe Script",cursive;font-size:1.8rem;font-weight:500;color:#c92f19;text-align:center;text-shadow:0 1px #fff0a2}.marquee small{font-weight:900;letter-spacing:.12em;font-size:.67rem}.marquee>span{font-size:1.1rem;text-align:center;color:#8b4b17}
.queue-panel{margin:18px 27px 0;padding:16px 20px;background:linear-gradient(#21140c,#0a0604)}
.queue-list{max-width:800px;margin:auto}.queue-row{min-height:37px;border:1px solid #704514;border-radius:5px;background:linear-gradient(#f4dc8a,#c7953b);box-shadow:inset 0 1px #fff4be,0 2px 4px #0008}
.speaker-section{position:relative;margin:18px 52px 0;height:170px;border:4px solid #1a0d07;border-radius:24px;background:linear-gradient(#4a2815,#160c07);box-shadow:0 0 0 2px #b0782d,0 0 0 5px #2e160b,inset 0 0 22px #000,0 10px 24px #000a;overflow:hidden;display:grid;grid-template-columns:95px 1fr 95px;gap:8px;align-items:stretch;padding:9px}.speaker-grille{position:relative;border:3px solid #89602b;border-radius:16px;background-color:#8c651f;background-image:linear-gradient(45deg,#1d1209 25%,transparent 25%,transparent 75%,#1d1209 75%),linear-gradient(-45deg,#1d1209 25%,transparent 25%,transparent 75%,#1d1209 75%);background-size:30px 30px;background-position:0 0,15px 15px;box-shadow:inset 0 0 0 4px #26170d,inset 0 0 32px #000}.speaker-grille::after{content:"";position:absolute;inset:12px;border-radius:14px;border:1px solid #d2a54955;box-shadow:inset 0 0 18px #000}.speaker-star{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;display:grid;place-items:center;border-radius:50%;font-size:3.1rem;color:#ffd159;background:radial-gradient(circle,#cb381a 0 27%,#4b180b 29% 54%,#160b06 56%);border:4px double #dca23d;box-shadow:0 0 0 4px #1b0e08,0 0 15px #000,inset 0 0 11px #ff9c3555;text-shadow:0 0 7px #ff8125}.speaker-rib{border:3px solid #211009;border-radius:13px;background:repeating-linear-gradient(0deg,#4a160c 0 8px,#e04a1f 9px 15px,#ff8b2f 16px 18px,#371109 19px 28px);box-shadow:inset 0 0 0 3px #8d622e,inset 0 0 12px #000,0 0 0 2px #996826}
.status-panel{margin:16px 0 12px}.jukebox__footer{margin:10px 27px 0;min-height:67px;align-items:center;border:2px solid #a36b27;border-radius:14px;padding:10px 20px;background:linear-gradient(#24150d,#0c0705);box-shadow:inset 0 0 0 3px #150b06,0 6px 15px #000a}.jukebox__footer a{color:#f5c35d;text-decoration:none;font:800 .72rem Arial,sans-serif;letter-spacing:.07em}.jukebox__footer a:hover{color:#ffe8a0}.footer-message{font-family:"Brush Script MT","Segoe Script",cursive;font-size:1.55rem;color:#f4c76b;text-align:center;font-weight:400;letter-spacing:0}.footer-message small{display:block;margin-top:3px;font:700 .55rem Arial,sans-serif;letter-spacing:.25em;color:#a98b55}
@media(max-width:760px){
  .jukebox{padding:48px 15px 22px}.jukebox::before,.jukebox::after{width:14px;top:106px}.jukebox__arch{height:145px;border-width:13px}.crest{top:-28px;width:66px;height:46px;font-size:1.6rem}.crest::before,.crest::after{width:38px;top:19px}.crest::before{right:52px}.crest::after{left:52px}.brand-panel{padding-top:48px}.brand-panel__sub{gap:7px}.genre-panel,.now-playing-card,.queue-panel,.jukebox__footer{margin-left:8px;margin-right:8px}.genre-btn{min-height:57px}.now-playing::before,.now-playing::after{width:35px}.controls{grid-template-columns:1fr 92px 1fr;gap:9px;margin:18px 5px 13px}.control{min-height:63px;border-radius:19px;flex-direction:column}.control--primary{width:88px;height:88px}.control--primary::before{width:66px;height:66px}.control--primary .control__icon{font-size:1.4rem}.control--primary .control__text{bottom:-25px;font-size:.58rem;padding:3px 7px}.marquee{margin-top:30px;grid-template-columns:22px 1fr 22px}.marquee small{display:none}.marquee strong{font-size:1.4rem}.speaker-section{height:120px;margin:15px 17px 0;grid-template-columns:45px 1fr 45px;padding:7px}.speaker-star{width:58px;height:58px;font-size:2.2rem}.jukebox__footer{display:grid;grid-template-columns:1fr;text-align:center;gap:8px}.footer-message{order:-1}.video-console__bezel{min-height:220px}
}