/* Retro Arcade shared audio settings panel (glass neon). Loaded by every cabinet with ra-settings.js. */
.ras-overlay{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  background:rgba(8,4,16,.72);overflow:auto;-webkit-tap-highlight-color:transparent;
  font-family:'Chakra Petch',system-ui,sans-serif;font-weight:500;color:#fff;line-height:1.3}
.ras-overlay.ras-on{display:flex}
.ras-overlay *{box-sizing:border-box}
.ras-panel{position:relative;width:min(440px,100%);max-height:100%;padding:18px 20px 16px;border-radius:22px;
  background:rgba(20,12,36,.82);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(153,69,255,.35);box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
  --neon:linear-gradient(110deg,#9945FF 0%,#00C2FF 25%,#14F195 50%,#ff2bd6 75%,#9945FF 100%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ras-panel{background:rgba(20,12,36,.94)}}
.ras-panel::before{content:"";position:absolute;inset:-2px;border-radius:24px;padding:2px;pointer-events:none;
  background:var(--neon);background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:rasShift 12s ease-in-out infinite alternate}
.ras-panel::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;z-index:-1;
  box-shadow:0 0 14px rgba(153,69,255,.55),0 0 36px rgba(0,194,255,.28);animation:rasBreathe 6s ease-in-out infinite alternate}
@keyframes rasShift{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes rasBreathe{0%{opacity:.55}100%{opacity:1}}
.ras-title{margin:0;text-align:center;font-family:Audiowide,monospace;font-weight:400;font-size:clamp(20px,6vw,26px);line-height:1.15;letter-spacing:1px;
  background:linear-gradient(90deg,#9945FF,#00C2FF 50%,#14F195);-webkit-background-clip:text;background-clip:text;color:transparent}
.ras-sub{margin:6px auto 10px;text-align:center;font-size:12px;letter-spacing:2px;color:#cabbe8}
.ras-tube{height:3px;width:60%;margin:0 auto 10px;border-radius:3px;background:#ff2bd6;box-shadow:0 0 6px #ff2bd6,0 0 16px rgba(255,43,214,.7)}
.ras-rows{display:flex;flex-direction:column;gap:4px}
.ras-row{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;min-height:56px;padding:6px 10px 2px;border-radius:12px;
  border:1px solid transparent;transition:background .15s,border-color .15s}
.ras-row:focus-within{background:rgba(153,69,255,.16);border-color:rgba(153,69,255,.6);box-shadow:0 0 10px rgba(153,69,255,.35)}
.ras-lab{font-family:Audiowide,monospace;font-size:clamp(11px,2.6vw,13px);letter-spacing:.5px;text-transform:uppercase;min-width:0}
.ras-val{font-family:Audiowide,monospace;font-size:clamp(11px,2.6vw,13px);color:#14F195;min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}
.ras-range{grid-column:1 / -1;width:100%;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:pan-y;--p:50%}
.ras-range:focus{outline:none}
.ras-range::-webkit-slider-runnable-track{height:8px;border-radius:8px;border:1px solid rgba(153,69,255,.5);
  background:linear-gradient(90deg,#9945FF,#00C2FF,#14F195) 0 0/var(--p) 100% no-repeat,rgba(255,255,255,.1)}
.ras-range::-moz-range-track{height:8px;border-radius:8px;border:1px solid rgba(153,69,255,.5);background:rgba(255,255,255,.1)}
.ras-range::-moz-range-progress{height:8px;border-radius:8px;background:linear-gradient(90deg,#9945FF,#00C2FF,#14F195)}
.ras-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;
  background:#fff;border:3px solid #9945FF;box-shadow:0 0 10px rgba(153,69,255,.9),0 0 22px rgba(0,194,255,.45)}
.ras-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #9945FF;box-shadow:0 0 10px rgba(153,69,255,.9)}
.ras-muted .ras-range{opacity:.45}
.ras-btn{--t:153,69,255;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:44px;padding:10px 14px;margin:0;
  font-family:Audiowide,monospace;font-size:clamp(10px,2.4vw,12px);letter-spacing:.5px;text-transform:uppercase;text-decoration:none;color:#fff;cursor:pointer;
  border-radius:12px;background:rgba(var(--t),.14);border:1px solid rgb(var(--t));
  box-shadow:0 0 10px rgba(var(--t),.6),inset 0 0 12px rgba(var(--t),.3);transition:background .15s,box-shadow .15s}
.ras-btn:hover,.ras-btn:focus-visible,.ras-btn.ras-focus{background:rgba(var(--t),.24);outline:none;
  box-shadow:0 0 14px rgba(var(--t),1),0 0 34px rgba(var(--t),.45),inset 0 0 16px rgba(var(--t),.5)}
.ras-btn:focus-visible{outline:2px solid rgb(var(--t));outline-offset:3px}
.ras-btn[aria-checked="true"]{--t:255,43,214}
.ras-state{font-family:Audiowide,monospace;font-size:12px;color:#14F195}
.ras-btn[aria-checked="true"] .ras-state{color:#ff2bd6}
.ras-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.ras-actions .ras-btn.ras-back{--t:0,194,255}
.ras-hint{margin:10px 0 0;text-align:center;font-size:11px;letter-spacing:.5px;color:#cabbe8}
@media (max-height:520px){
  .ras-panel{padding:12px 16px 10px}
  .ras-sub{margin:2px auto 6px}.ras-tube{margin-bottom:6px}
  .ras-row{min-height:50px;padding-top:2px}
  .ras-range{height:30px}
  .ras-range::-webkit-slider-thumb{width:24px;height:24px;margin-top:-9px}
  .ras-btn{min-height:44px}
  .ras-actions{margin-top:6px}.ras-hint{display:none}
}
@media (max-width:420px){.ras-actions{grid-template-columns:1fr}.ras-panel{padding:16px 14px 14px}}
@media (max-width:420px) and (max-height:700px){.ras-row{min-height:50px}.ras-range{height:34px}.ras-actions{gap:6px}}
@media (prefers-reduced-motion:reduce){.ras-panel::before,.ras-panel::after{animation:none}}