.arcade-audio { position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); z-index:50; display:grid; grid-template-columns:34px minmax(125px,205px) auto 64px; align-items:center; gap:8px; min-height:50px; padding:6px 9px 6px 7px; border:1px solid rgba(255,255,255,.24); border-radius:14px; background:rgba(5,5,5,.94); box-shadow:0 14px 42px rgba(0,0,0,.48),0 0 26px rgba(77,225,255,.1); color:#fff; backdrop-filter:blur(14px); }
.arcade-audio button { min-height:36px; border:0; color:#fff; cursor:pointer; }
.arcade-audio-play { width:36px; display:grid; place-items:center; padding:0; border-radius:50%; background:linear-gradient(135deg,#4de1ff,#ff3f81); color:#050505!important; font-weight:900; }
.arcade-audio-next { padding:0 10px; border:1px solid #454545!important; border-radius:999px; background:#171717; font:800 .68rem Inter,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.arcade-audio button:focus-visible,.arcade-audio input:focus-visible { outline:2px solid #ffd44a; outline-offset:3px; }
.arcade-audio-now { min-width:0; display:flex; flex-direction:column; gap:2px; }
.arcade-audio-now small { color:#777; font-size:.58rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.arcade-audio-now strong,.arcade-audio-now em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.arcade-audio-now strong { font:700 .74rem/1.15 Inter,sans-serif; }
.arcade-audio-now em { color:#aaa; font:normal .64rem/1.15 Inter,sans-serif; }
.arcade-audio input { width:74px; min-height:44px; margin:-8px 0; accent-color:#4de1ff; cursor:pointer; touch-action:none; }
@media (max-width:620px) { .arcade-audio { right:9px; bottom:9px; left:9px; grid-template-columns:34px minmax(0,1fr) auto 54px; min-height:46px; border-radius:12px; } .arcade-audio input { width:54px; } .arcade-audio-next { padding:0 8px; } }
@media (max-width:620px) { body[data-arcade-sound] { padding-bottom:calc(92px + env(safe-area-inset-bottom)); } }
@media (max-width:900px) and (max-height:600px) and (orientation:landscape) { .arcade-audio { top:max(3px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right)); bottom:auto; left:auto; grid-template-columns:30px minmax(0,145px); gap:6px; min-height:36px; padding:3px 7px 3px 4px; border-radius:10px; } .arcade-audio-play { width:28px; min-height:28px!important; } .arcade-audio-now small,.arcade-audio-now em,.arcade-audio-next,.arcade-audio input { display:none; } .arcade-audio-now strong { font-size:.68rem; } }
@media (prefers-reduced-motion:reduce) { .arcade-audio { backdrop-filter:none; } }