/* Audio + controls settings block (js/prefs.js), shown on the Settings screen and in the in-raid menu, plus the raid
   menu itself (hud.js toggleMenu: the pause button under the raid gold, the menu card, self-destruct).
   Uses the tokens both layers define (--ol, --fh, --fb, --mut); fallbacks keep it readable anywhere. */

/* ---------- settings block ---------- */
.prefs { --pOl:var(--ol,#0b1a33); display:flex; flex-direction:column; gap:8px; }
.prefs .pSec { font:400 15px/1 var(--fh); letter-spacing:.6px; text-transform:uppercase; color:#fff; text-shadow:var(--so2, 0 2px 0 #0b1a33); margin:6px 2px 0; display:flex; align-items:center; gap:8px; }
.prefs .pSec::after { content:""; flex:1; height:2px; border-radius:1px; background:rgba(8,20,45,.55); }
.prefs .pSec:first-child { margin-top:0; }
.prefs .pRow { background:#0d2a55; border:2.5px solid var(--pOl); border-radius:14px; padding:9px 11px 10px; box-shadow:inset 0 2px 0 rgba(140,205,255,.18); }
.prefs .pTop { display:flex; align-items:center; gap:10px; }
.prefs .pLbl { flex:1; min-width:0; }
.prefs .pLbl b { display:block; font:400 16px/1.1 var(--fh); letter-spacing:.3px; color:#fff; text-shadow:0 1.5px 0 var(--pOl); }
.prefs .pLbl small { display:block; font:700 11.5px/1.3 var(--fb); color:var(--mut,#bcd6f5); margin-top:2px; }
.prefs .pv { flex:none; min-width:44px; text-align:right; font:400 16px/1 var(--fh); color:#ffd23f; text-shadow:0 1.5px 0 var(--pOl); font-variant-numeric:tabular-nums; }
.prefs .pRow.off .pv { color:#86a9d4; }

/* on/off switch */
.prefs .pSw { flex:none; position:relative; width:52px; height:30px; padding:0; border-radius:15px; background:#0b2448; border:3px solid var(--pOl); box-shadow:inset 0 3px 0 rgba(0,0,0,.35); cursor:pointer; transition:background .15s; }
.prefs .pSw span { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:linear-gradient(180deg,#e8f1fa,#9fb3c8); box-shadow:0 2px 0 rgba(0,0,0,.35); transition:transform .15s; }
.prefs .pSw.on { background:linear-gradient(180deg,#8def58,#35ae22); }
.prefs .pSw.on span { transform:translateX(22px); background:#fff; }
.prefs .pSw:focus-visible, .prefs .pSeg button:focus-visible, .prefs .pRange:focus-visible { outline:3px solid #ffd23f; outline-offset:2px; }

/* volume slider: a chunky track filled to --p */
.prefs .pRange { -webkit-appearance:none; appearance:none; display:block; width:100%; height:32px; margin:6px 0 0; background:transparent; cursor:pointer; touch-action:pan-y; pointer-events:none; }
.prefs .pRow { touch-action:pan-y; } /* sideways drags reach prefs.js; vertical swipes scroll */
.prefs .pRange::-webkit-slider-runnable-track { height:14px; border-radius:8px; border:2.5px solid var(--pOl); background:linear-gradient(90deg,#ffc21a,#ff8a1a) 0 0/var(--p,50%) 100% no-repeat, #0b2346; box-shadow:inset 0 2px 0 rgba(0,0,0,.3); }
.prefs .pRange::-moz-range-track { height:9px; border-radius:8px; border:2.5px solid var(--pOl); background:#0b2346; }
.prefs .pRange::-moz-range-progress { height:9px; border-radius:8px; background:linear-gradient(90deg,#ffc21a,#ff8a1a); }
.prefs .pRange::-webkit-slider-thumb { -webkit-appearance:none; width:28px; height:28px; margin-top:-9.5px; border-radius:50%; background:radial-gradient(circle at 40% 32%,#fff,#dfe9f5 55%,#9fb3c8); border:3px solid var(--pOl); box-shadow:0 2px 0 var(--pOl); }
.prefs .pRange::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 40% 32%,#fff,#dfe9f5 55%,#9fb3c8); border:3px solid var(--pOl); }
.prefs .pRow.off .pRange { opacity:.45; filter:grayscale(.7); }

/* left / right stick */
.prefs .pSeg { display:flex; gap:5px; margin-top:8px; padding:4px; border:3px solid var(--pOl); border-radius:14px; background:#0b2448; box-shadow:inset 0 3px 0 rgba(0,0,0,.3); }
.prefs .pSeg button { flex:1; min-height:38px; border:0; border-radius:10px; background:transparent; font:400 15px var(--fh); letter-spacing:.3px; color:#9fc3ee; text-shadow:0 1.5px 0 var(--pOl); cursor:pointer; }
.prefs .pSeg button.on { background:linear-gradient(180deg,#57b8ff,#1e6fdc); color:#fff; box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 2px 0 var(--pOl), 0 0 0 2px var(--pOl); }
.prefs.compact .pLbl small { font-size:11px; }

/* ---------- raid: pause button (under the raid gold) ---------- */
#bMenu { position:absolute; left:10px; top:calc(10px + var(--st) + 50px); width:42px; height:42px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:13px;
  background:linear-gradient(180deg,#24508f,#12305e 70%,#0e2750); border:3px solid var(--ol); box-shadow:inset 0 2px 0 rgba(140,205,255,.35), 0 3px 0 var(--ol), 0 5px 10px rgba(0,0,0,.28); z-index:2; }
#bMenu svg { width:26px; height:26px; fill:#fff; filter:drop-shadow(0 1.5px 0 var(--ol)); }
#bMenu:active, #bMenu.open { transform:translateY(2px); box-shadow:inset 0 2px 0 rgba(140,205,255,.35), 0 1px 0 var(--ol); }
#hud.plane #bMenu { top:calc(10px + var(--st) + 8px); } /* the raid gold is hidden on the plane */

/* ---------- raid menu ---------- */
#ovMenu { position:absolute; inset:0; z-index:6; display:none; align-items:center; justify-content:center; padding:calc(10px + var(--st)) 12px calc(10px + var(--sb)); box-sizing:border-box; background:rgba(5,14,32,.78); } /* no backdrop-filter: blurring the live WebGL canvas every frame is expensive on phones */
#ovMenu.open { display:flex; animation:mFade .15s ease-out; }
@keyframes mFade { from { opacity:0; } }
#ovMenu .mCard { width:100%; max-width:420px; max-height:100%; display:flex; flex-direction:column; overflow:hidden; border-radius:20px; border:3px solid var(--ol);
  background:linear-gradient(180deg,#2a6fc0,#1c4f95 45%,#153d77); box-shadow:inset 0 2px 0 rgba(140,205,255,.35), inset 0 0 0 2px rgba(110,180,255,.2), 0 4px 0 var(--ol), 0 12px 40px rgba(0,0,0,.45); animation:ovIn .2s cubic-bezier(.3,1.4,.6,1); }
#ovMenu .ovh { flex:none; }
#ovMenu .ovh .mRes { border-color:#1d5a0c; background:linear-gradient(180deg,#8def58,#35ae22); box-shadow:inset 0 2px 0 rgba(235,255,220,.6), inset 0 -3px 0 rgba(0,60,0,.25), 0 3px 0 #1d5a0c; }
#mState { flex:none; padding:7px 12px; font:800 12.5px/1.3 var(--fb); text-align:center; border-bottom:3px solid var(--ol); }
#mState.live { background:linear-gradient(180deg,#ffe467,#ffbe1a); color:#4a2600; }
#mState.paused { background:#0f3166; color:#bfe0ff; font:400 14px/1 var(--fh); letter-spacing:1px; text-transform:uppercase; }
#ovMenu .mBody { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:10px 10px 12px; -webkit-overflow-scrolling:touch; }
#mLeave { margin-top:12px; }
#mLeave .pSec { font:400 15px/1 var(--fh); letter-spacing:.6px; text-transform:uppercase; color:#fff; text-shadow:var(--so2); margin:0 2px 8px; display:flex; align-items:center; gap:8px; }
#mLeave .pSec::after { content:""; flex:1; height:2px; border-radius:1px; background:rgba(8,20,45,.55); }
.mSdBox { background:linear-gradient(180deg,#4a1410,#2e0c0a); border:2.5px solid var(--ol); border-radius:14px; padding:10px 11px 11px; box-shadow:inset 0 2px 0 rgba(255,140,120,.18); }
.mSdH { display:block; font:400 17px/1 var(--fh); color:#ff8a6a; text-shadow:0 1.5px 0 var(--ol); letter-spacing:.3px; }
.mSdSub { margin:5px 0 4px; font:700 12px/1.35 var(--fb); color:#ffd9cf; }
#mSdList { margin:0 0 10px; padding-left:18px; font:700 12px/1.4 var(--fb); color:#ffe9e3; }
#mSdList li { margin:2px 0; } #mSdList b { color:#ffb49e; font-weight:900; }
.mSd { position:relative; width:100%; min-height:48px; overflow:hidden; border-radius:13px; border:3px solid #5a0a05; background:linear-gradient(180deg,#ff7a5a,#e0302a); color:#fff; font:400 16px/1 var(--fh); letter-spacing:.6px; text-shadow:var(--so2);
  box-shadow:inset 0 2px 0 rgba(255,220,210,.55), inset 0 -3px 0 rgba(100,0,0,.25), 0 3px 0 #5a0a05; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
.mSd i, .mSd span { pointer-events:none; } /* the hold always targets the button itself */
.mSd i { position:absolute; left:0; top:0; bottom:0; width:calc(var(--k, 0) * 100%); background:linear-gradient(180deg,#ffe467,#ffbe1a); opacity:.85; }
.mSd span { position:relative; }
.mSd.arm { animation:sdShake .12s linear infinite; }
@keyframes sdShake { 25% { transform:translateX(-1.5px); } 75% { transform:translateX(1.5px); } }
.mSd.no, .mSd[aria-disabled="true"], .mSd:disabled { background:linear-gradient(180deg,#6a5a58,#4a3c3a); border-color:#2a1a18; box-shadow:0 3px 0 #2a1a18; color:#e0d0cc; cursor:default; font-size:14px; }
@media (prefers-reduced-motion: reduce) { .mSd.arm { animation:none; } #ovMenu.open, #ovMenu .mCard { animation:none; } }

/* ===== compact settings (overnight 2026-09-28): one line per setting — name · slider · % (0% = off), toggles inline ===== */
.prefs { gap:6px; }
.prefs .pSec { font-size:13px; margin:4px 2px 0; }
.prefs .pRow.pAud, .prefs .pRow.pLine { display:flex; align-items:center; gap:10px; padding:5px 11px; min-height:44px; box-sizing:border-box; }
.prefs .pN { flex:none; width:92px; font:400 14px/1.1 var(--fh); letter-spacing:.3px; color:#fff; text-shadow:0 1.5px 0 var(--pOl); }
.prefs .pRow.pLine .pN { flex:1; width:auto; }
.prefs .pAud .pRange { flex:1; min-width:0; margin:0; height:30px; }
.prefs .pAud .pv { min-width:40px; font-size:14px; }
.prefs .pRow.pAud.off .pRange { opacity:.55; filter:grayscale(.6); }
.prefs .pLine .pSeg { flex:none; margin:0; padding:3px; border-width:2.5px; border-radius:12px; }
.prefs .pLine .pSeg button { min-height:30px; padding:0 12px; font-size:13px; }
.prefs .pLine .pSw { width:46px; height:26px; } .prefs .pLine .pSw span { width:17px; height:17px; } .prefs .pLine .pSw.on span { transform:translateX(19px); }
/* raid menu: no "raid keeps running" strip, no penalty explainer: just the settings and the hold-to-self-destruct button */
#mState { display:none !important; }
#ovMenu .mBody { padding:8px 10px 10px; }
#mLeave { margin-top:10px; }
#mLeave .pSec, .mSdH, .mSdSub, #mSdList { display:none !important; }
.mSdBox { background:none; border:0; padding:0; box-shadow:none; }

/* Keyboard bindings (computers) */
.prefs .pKeys { display:flex; flex-direction:column; gap:6px; }
.prefs .pKey { display:flex; align-items:center; gap:10px; background:#0d2a55; border:2.5px solid var(--pOl); border-radius:14px; padding:7px 10px; }
.prefs .pKey .pLbl { flex:1; min-width:0; }
.prefs .pKc { flex:none; min-width:74px; padding:6px 10px; border-radius:7px; background:#f4f7ff; color:#0b1a33; border:2px solid #0b1a33; box-shadow:0 2px 0 #0b1a33; font:900 13px/1.2 "Nunito",system-ui,sans-serif; text-align:center; cursor:pointer; }
.prefs .pKey.fixed .pKc { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(11,26,51,.6); box-shadow:none; cursor:default; }
.prefs .pKc.wait { background:#ffd23f; animation:pKw 1s ease-in-out infinite; }
@keyframes pKw { 50% { filter:brightness(1.15); } }
.prefs .pKReset { align-self:flex-start; margin-top:4px; padding:6px 12px; border-radius:8px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.2); color:#fff; font:800 12px "Nunito",system-ui,sans-serif; }

/* Report a problem (shell.js BUGREPORT): the raid menu and Settings */
.bugBox { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.bugBox .pSec { font:400 15px/1 var(--fh,"Lilita One"); letter-spacing:.6px; text-transform:uppercase; color:#fff; margin:6px 2px 0; }
.bugTx { width:100%; box-sizing:border-box; resize:vertical; min-height:62px; padding:8px 10px; border-radius:12px; border:2.5px solid #0b1a33; background:#0b2346; color:#fff; font:700 13px/1.35 "Nunito",system-ui,sans-serif; user-select:text; -webkit-user-select:text; }
.bugTx::placeholder { color:#86a9d4; }
.bugRow { display:flex; align-items:center; gap:10px; }
.bugSend { padding:7px 14px; border-radius:10px; border:2.5px solid #0b1a33; background:linear-gradient(180deg,#57b8ff,#1e6fdc); color:#fff; font:400 14px "Lilita One","Nunito",system-ui,sans-serif; cursor:pointer; box-shadow:0 2px 0 #0b1a33; }
.bugSend:disabled { filter:grayscale(.6); }
.bugOk { color:#7ff05a; font:800 12px "Nunito",system-ui,sans-serif; }
#hud .bugSend { color:#fff; } #hud .bugTx { color:#fff; }

/* Sound check (2026-10-08): what the browser audio is doing, plus a measured test sound */
.pDiag { flex-wrap:wrap; gap:8px 12px; }
.pDiag .pDiagOut { flex:1 1 100%; font:700 13px/1.5 var(--fb); color:var(--mut, #c9d6ea); font-variant-numeric:tabular-nums; }
.pCamRow .pCamR { flex:1 1 auto; min-width:120px; accent-color:#ffb43c; }
.pCamRow .pSeg { flex-wrap:wrap; }
.pNote { margin:4px 2px 10px; font:700 12.5px/1.5 var(--fb, system-ui); color:var(--mut, #c9d6ea); }