:root{
  color-scheme:dark;
  --panel:rgba(4,14,24,.76);
  --border:rgba(255,255,255,.18);
  --gold:#f4c74d;
  --cyan:#69dcff;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#020609;font-family:Tahoma,"Segoe UI",Arial,sans-serif;overflow:hidden}
body{overscroll-behavior:none}
#app{width:100vw;height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 15%,#112435 0,#020609 65%)}
.game-shell{position:relative;width:100vw;height:100vh;overflow:hidden;background:#78b7e4;touch-action:none;user-select:none;-webkit-user-select:none}
canvas{display:block;width:100%;height:100%;touch-action:none}
[hidden]{display:none!important}
.hud{position:absolute;z-index:10;top:max(12px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));display:flex;justify-content:space-between;gap:8px;pointer-events:none}
.hud-left{display:flex;gap:7px;flex-wrap:wrap}
.hud-chip{padding:7px 11px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(4,14,24,.76);backdrop-filter:blur(8px);color:#fff;font-size:clamp(12px,1.35vw,17px);font-weight:700;text-shadow:0 1px 2px #000;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.hud-chip strong{color:var(--gold);margin-inline-start:5px}
.health strong{color:#ff5a58;letter-spacing:1px;display:inline-flex;gap:2px;align-items:center}
.heart-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;vertical-align:middle}
.heart-svg{width:20px;height:20px;display:block;overflow:visible}
.heart-bg{fill:rgba(255,255,255,.22)}
.heart-fg{fill:#ff5a58;filter:drop-shadow(0 0 5px rgba(255,90,88,.32))}
.top-actions{position:absolute;z-index:12;top:58px;left:max(14px,env(safe-area-inset-left));display:flex;gap:7px}

.koji-meter{position:absolute;z-index:12;top:118px;left:max(16px,env(safe-area-inset-left));width:112px;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;--koji-progress:0deg;--koji-ring:#49c8ff}
.koji-meter-ring{position:relative;width:98px;height:98px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--koji-ring) var(--koji-progress),rgba(255,255,255,.13) 0);filter:drop-shadow(0 0 8px rgba(58,189,255,.18));transition:filter .18s ease}
.koji-meter-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:rgba(5,18,31,.78);border:1px solid rgba(255,255,255,.20);box-shadow:inset 0 0 18px rgba(62,180,255,.09)}
.koji-meter-ring img{position:relative;z-index:1;width:98%;height:98%;object-fit:contain;filter:drop-shadow(0 0 6px rgba(76,205,255,.40))}
.koji-meter-label{font-size:12px;font-weight:900;color:#dff7ff;text-shadow:0 1px 4px #000;background:rgba(3,14,25,.48);padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.11);min-width:44px;text-align:center}
.koji-timer{position:absolute;z-index:2;inset:auto 50% 7px auto;transform:translateX(50%);min-width:30px;padding:2px 5px;border-radius:999px;background:rgba(0,0,0,.64);border:1px solid rgba(255,255,255,.24);font-size:11px;font-weight:950;color:#fff;text-shadow:0 1px 3px #000;display:none}
.koji-meter.active{--koji-progress:360deg;--koji-ring:#42f07f}
.koji-meter.active .koji-meter-ring{filter:drop-shadow(0 0 11px rgba(66,240,127,.72)) drop-shadow(0 0 22px rgba(66,240,127,.28))}
.koji-meter.active .koji-timer{display:block}
.koji-meter.active .koji-meter-label{color:#8dffaf;border-color:rgba(66,240,127,.34)}
.icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(4,14,24,.76);backdrop-filter:blur(8px);color:#fff;font-size:20px;font-weight:900;cursor:pointer}
.icon-btn:disabled{opacity:.45}
.touch-controls{position:absolute;z-index:12;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;justify-content:flex-end;gap:10px;direction:ltr;pointer-events:none}
.move-controls{display:none;align-items:center;justify-content:center;pointer-events:auto}
.move-row{display:flex;gap:10px;align-items:center}
.round-btn{pointer-events:auto;width:66px;height:66px;border-radius:50%;border:1.5px solid rgba(255,255,255,.34);background:rgba(7,20,32,.34);color:#eef8ff;font-size:28px;font-weight:900;display:grid;place-items:center;box-shadow:inset 0 0 18px rgba(255,255,255,.06),0 2px 10px rgba(0,0,0,.16);backdrop-filter:blur(7px);touch-action:none}
.round-btn.small{width:44px;height:44px;font-size:23px}
.round-btn.active,.round-btn:active{transform:scale(.94);background:rgba(255,255,255,.22)}
.round-btn:disabled{opacity:.35}
.fire-btn{width:84px;height:84px;background:rgba(152,24,20,.58);line-height:1.05;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fire-btn small{font-size:10px;letter-spacing:1.5px;color:#ffd1c9;margin-top:4px}
.hidden-pad{display:none!important}
.joystick-base{position:relative;width:104px;height:104px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);background:radial-gradient(circle at 50% 50%,rgba(77,205,255,.08),rgba(7,20,32,.18) 58%,rgba(7,20,32,.32) 100%);backdrop-filter:blur(8px);box-shadow:inset 0 0 22px rgba(255,255,255,.05),0 2px 12px rgba(0,0,0,.18);touch-action:none}
.joystick-thumb{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 35%,rgba(103,214,255,.98),rgba(53,174,222,.95) 68%,rgba(31,122,170,.95));box-shadow:0 0 16px rgba(65,200,255,.24), inset 0 0 16px rgba(255,255,255,.16);transition:none;will-change:transform}
.joystick-arrows{position:absolute;inset:0;color:rgba(159,210,232,.62);font-size:18px;font-weight:900;pointer-events:none}
.j-arrow{position:absolute;line-height:1}
.j-arrow.up{top:8px;left:50%;transform:translateX(-50%)}
.j-arrow.right{right:8px;top:50%;transform:translateY(-50%)}
.j-arrow.down{bottom:8px;left:50%;transform:translateX(-50%)}
.j-arrow.left{left:8px;top:50%;transform:translateY(-50%)}
.score-pop{position:absolute;z-index:13;left:50%;top:18%;transform:translate(-50%,-10px) scale(.9);opacity:0;color:#ffe56d;font-size:30px;font-weight:950;text-shadow:0 2px 6px #000;pointer-events:none;transition:opacity .2s,transform .2s}
.score-pop.show{opacity:1;transform:translate(-50%,0) scale(1)}
.overlay{position:absolute;z-index:20;inset:0;display:block}

.splash-screen{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#000}
.pwa-install-screen{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;min-height:100svh;padding:max(20px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;background:radial-gradient(circle at 50% 18%,#174c76 0%,#081b2f 43%,#020a13 100%);color:#fff;text-align:center}
.pwa-install-card{width:min(430px,94vw);padding:clamp(24px,5vw,42px) clamp(20px,5vw,38px);border:1px solid rgba(156,220,255,.4);border-radius:28px;background:linear-gradient(160deg,rgba(18,62,94,.82),rgba(3,15,28,.93));box-shadow:0 22px 70px rgba(0,0,0,.44)}
.pwa-install-icon{display:block;width:94px;height:94px;margin:0 auto 16px;border-radius:22px;box-shadow:0 0 0 3px rgba(139,220,255,.35),0 13px 28px rgba(0,0,0,.35)}
.pwa-install-kicker{margin:0 0 8px;color:#8edfff;font-weight:800;font-size:13px;letter-spacing:.9px}.pwa-install-card h2{margin:0;font-size:clamp(25px,6vw,34px)}
.pwa-install-card>p:not(.pwa-install-kicker){margin:13px auto 20px;max-width:340px;line-height:1.7;color:#d9eeff;font-size:15px}.pwa-install-btn{width:min(320px,100%);min-height:53px;border:0;border-radius:15px;background:linear-gradient(135deg,#86e9ff,#328bd4);color:#031322;font-size:18px;font-weight:900;cursor:pointer;box-shadow:0 9px 23px rgba(25,161,234,.3)}.pwa-install-btn:disabled{opacity:.68;cursor:wait}
.ios-install-guide{display:grid;grid-template-columns:28px 1fr;gap:9px 10px;margin:18px auto 0;max-width:330px;text-align:right;align-items:center;color:#e3f5ff;font-size:14px;line-height:1.45}.ios-step{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#5ccaff;color:#06243c;font-weight:900}.ios-install-guide b{color:#95e8ff}.ios-share-icon{display:inline-block;width:30px;height:30px;vertical-align:middle;object-fit:contain;margin-inline:5px;border-radius:6px}/* V152: the install guide never blocks initial entry; play is its primary action. */
.pwa-install-play{display:block;width:min(320px,100%);min-height:54px;margin:12px auto 10px;border:0;border-radius:15px;background:linear-gradient(135deg,#9cf2ff,#479cf0);color:#04162b;font:900 19px Tajawal,Tahoma,Arial,sans-serif;cursor:pointer}
.pwa-install-btn{display:block;margin:0 auto;background:rgba(32,81,121,.55);border:1px solid rgba(155,218,248,.55);box-shadow:none;color:#f1faff;font-size:15px;min-height:43px}
.pwa-install-btn[hidden]{display:none!important}
.pwa-install-note{margin:18px 0 0!important;color:#98bbd4!important;font-size:12px!important}.pwa-install-close{margin-top:12px;border:0;background:transparent;color:#c5def0;text-decoration:underline;font:inherit;cursor:pointer}.install-shortcut{border:1px solid rgba(149,232,255,.48);border-radius:999px;background:rgba(4,25,43,.66);color:#dff7ff;padding:8px 15px;font-weight:800;font-size:13px;cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,.18)}.install-shortcut:hover,.install-shortcut:focus-visible{background:rgba(35,115,159,.72)}
.splash-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;height:100%;border:0;background:transparent;color:#fff;cursor:pointer;padding:24px}
.splash-logo{max-width:min(520px,78vw);width:100%;height:auto;filter:drop-shadow(0 0 12px rgba(255,255,255,.22)) drop-shadow(0 0 30px rgba(90,180,255,.18));animation:logoPulse 2.8s ease-in-out infinite}
.splash-caption{font-size:clamp(16px,1.8vw,22px);font-weight:800;color:#dbeeff;letter-spacing:1px;opacity:.9}
.menu-screen{position:absolute;inset:0;overflow:hidden}
.menu-backdrop{position:absolute;inset:0;background:url('assets/menu-bg.webp') center center / cover no-repeat;transform:scale(1.02)}
.menu-backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,14,25,.18),rgba(5,14,25,.34) 45%,rgba(5,10,18,.58));backdrop-filter:blur(1px)}
.menu-panel{position:relative;z-index:1;display:flex;min-height:100%;flex-direction:column;align-items:center;justify-content:center;padding:18px 18px 20px;text-align:center;overflow:auto}
.logo-zone{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:min(92vw,760px)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:6px;color:#f0f6ff;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.overlay-title{margin:0;font-size:clamp(22px,2.8vw,34px);color:#fff;text-shadow:0 4px 14px rgba(0,0,0,.5)}
.overlay-text{margin:0 0 16px;color:#edf8ff;font-size:clamp(13px,1.4vw,17px);line-height:1.9;text-shadow:0 2px 10px rgba(0,0,0,.42)}
.logo-image{max-width:min(600px,88vw);width:100%;height:auto;filter:drop-shadow(0 0 10px rgba(255,255,255,.32)) drop-shadow(0 0 24px rgba(95,210,255,.28));}
.animated-logo{animation:logoPulse 2.8s ease-in-out infinite}
@keyframes logoPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 8px rgba(255,255,255,.28)) drop-shadow(0 0 18px rgba(90,180,255,.22));}50%{transform:scale(1.06);filter:drop-shadow(0 0 14px rgba(255,255,255,.42)) drop-shadow(0 0 34px rgba(90,180,255,.42));}}
.menu-buttons{display:flex;flex-direction:column;gap:14px;align-items:center;width:min(460px,88vw)}
.menu-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:14px;min-height:68px;padding:0 22px;border-radius:18px;border:2px solid rgba(255,255,255,.65);font-size:clamp(23px,2.8vw,36px);font-weight:900;color:#fff;cursor:pointer;position:relative;overflow:hidden;text-shadow:0 2px 4px rgba(0,0,0,.45);box-shadow:0 0 10px rgba(255,255,255,.18),0 10px 28px rgba(0,0,0,.25),inset 0 0 14px rgba(255,255,255,.16);transition:transform .16s ease,filter .16s ease}
.menu-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 44%,rgba(0,0,0,.18));pointer-events:none}
.menu-btn:hover,.menu-btn:focus-visible{transform:translateY(-1px) scale(1.01);filter:brightness(1.06)}
.menu-btn:active{transform:scale(.98)}
.menu-btn:disabled{opacity:.55;cursor:wait}
.btn-icon{font-size:clamp(22px,2.4vw,30px);line-height:1}
.btn-start{background:linear-gradient(180deg,#ff5f4d,#c51912);box-shadow:0 0 12px rgba(255,112,86,.45),0 0 34px rgba(255,74,43,.18),inset 0 0 14px rgba(255,255,255,.18)}
.btn-settings{background:linear-gradient(180deg,#1770df,#0e3f8d);box-shadow:0 0 12px rgba(76,160,255,.42),0 0 34px rgba(19,98,222,.16),inset 0 0 14px rgba(255,255,255,.16)}
.btn-exit{background:linear-gradient(180deg,#3f4756,#171d27);box-shadow:0 0 10px rgba(190,215,255,.18),0 0 28px rgba(40,44,56,.26),inset 0 0 14px rgba(255,255,255,.12)}
.menu-footer{margin-top:18px;display:flex;flex-direction:column;gap:8px;align-items:center;color:#eef7ff;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.best-inline{padding:10px 16px;border-radius:999px;background:rgba(4,20,34,.46);border:1px solid rgba(255,255,255,.18);font-weight:800}
.best-inline strong{color:#ffe56d}
.voice-hint{font-size:14px;color:#ffeb98}
.settings-modal{position:absolute;z-index:3;inset:0;background:rgba(5,10,16,.55);display:grid;place-items:center;padding:20px}
.settings-card{width:min(640px,90vw);max-height:min(76vh,420px);overflow:hidden;background:linear-gradient(180deg,rgba(8,18,31,.96),rgba(10,24,38,.92));border:1px solid rgba(255,255,255,.18);border-radius:24px;color:#fff;padding:14px 14px 12px;box-shadow:0 20px 50px rgba(0,0,0,.32);display:flex;flex-direction:column;gap:10px;justify-content:center}
.settings-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.settings-header h2{margin:0;font-size:28px}
.close-settings{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-size:28px;cursor:pointer}
.settings-section{margin-top:14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.settings-section.compact{padding-bottom:10px}
.section-title{font-size:16px;font-weight:900;color:#d8ebff;margin-bottom:10px}
.difficulty-options{display:flex;flex-wrap:wrap;gap:10px}
.difficulty-option{position:relative;cursor:pointer;flex:1 1 120px}
.difficulty-option input{position:absolute;inset:0;opacity:0;pointer-events:none}
.difficulty-option span{display:flex;justify-content:center;align-items:center;padding:12px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font-weight:800;transition:.18s}
.difficulty-option input:checked+span{background:linear-gradient(180deg,#f45242,#b81d17);border-color:rgba(255,255,255,.34);box-shadow:0 8px 22px rgba(176,26,20,.25)}
.volume-row{display:flex;align-items:center;gap:14px}
#volumeRange{flex:1;accent-color:#4bc4ff}
.volume-value{min-width:60px;font-weight:900;color:#ffe07d;text-align:center}
.best-scores{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.best-scores li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:13px}
.best-rank{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.09);font-weight:900;color:var(--gold)}
.best-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.best-meta small{color:#a8c1d7;font-size:11px}
.best-score{font-weight:900;color:#ffe37a;white-space:nowrap}
.best-empty{font-size:13px;color:#b7cada}
.portrait-hint{display:none;position:absolute;z-index:30;inset:0;background:#03080df0;color:#fff;place-items:center;text-align:center;font-size:17px;gap:8px;pointer-events:none}
.portrait-hint div{font-size:48px;line-height:1}
@media (pointer:coarse) and (orientation:portrait) and (max-width:760px){.portrait-hint{display:grid}}
@media (max-width:700px){
  .menu-btn{min-height:62px;font-size:24px;padding-inline:16px}
  .voice-hint{font-size:12px}
  .settings-card{padding:14px}
}
@media (max-height:560px){
  .hud-chip{padding:5px 9px;font-size:12px}
  .top-actions{top:47px}
  .round-btn{width:58px;height:58px;font-size:24px}
  .round-btn.small{width:52px;height:52px;font-size:22px}
  .fire-btn{width:70px;height:70px;font-size:12px}
  .logo-image{max-width:min(360px,72vw)}
  .overlay-text{margin-bottom:10px;font-size:12px}
  .menu-buttons{gap:10px}
  .menu-btn{min-height:54px;font-size:20px}
}

@media (max-width:900px){
  .logo-image{max-width:min(420px,72vw)}
  .menu-buttons{width:min(380px,76vw);gap:10px}
  .menu-btn{min-height:58px;font-size:19px;padding-inline:14px;border-radius:16px}
  .overlay-title{font-size:24px}
  .overlay-text{font-size:13px;line-height:1.6;margin-bottom:10px}
  .menu-footer{margin-top:10px;gap:5px}
  .best-inline{padding:8px 14px;font-size:13px}
  .voice-hint{font-size:12px}
}
@media (max-height:540px){
  .menu-panel{justify-content:flex-start;padding-top:14px;padding-bottom:14px}
  .logo-zone{gap:4px}
  .eyebrow{font-size:10px;letter-spacing:4px}
  .logo-image{max-width:min(300px,58vw)}
  .overlay-title{font-size:20px}
  .overlay-text{font-size:11px;line-height:1.45;margin-bottom:8px}
  .menu-buttons{width:min(340px,72vw);gap:8px}
  .menu-btn{min-height:50px;font-size:17px;padding-inline:12px}
  .btn-icon{font-size:19px}
  .menu-footer{margin-top:8px;gap:4px}
  .best-inline{padding:7px 12px;font-size:12px}
  .voice-hint{font-size:11px}
}
@media (max-height:430px){
  .logo-image{max-width:min(230px,48vw)}
  .menu-buttons{width:min(300px,66vw)}
  .menu-btn{min-height:44px;font-size:15px}
  .overlay-text{display:none}
  .menu-footer{margin-top:6px}
}

@media (pointer:coarse), (max-width:900px){
  .touch-controls{justify-content:space-between}
  .move-controls{display:flex}
}
@media (max-width:700px){
  .settings-modal{padding:10px}
  .settings-card{width:min(430px,90vw);max-height:min(72vh,390px);padding:12px;border-radius:20px;gap:8px}
  .settings-header h2{font-size:22px}
  .settings-section{margin-top:0;padding:10px;border-radius:14px}
  .section-title{font-size:14px;margin-bottom:8px}
  .difficulty-options{gap:7px}
  .difficulty-option span{padding:9px 10px;font-size:13px}
  .volume-row{gap:10px}
  .best-scores{gap:6px}
  .best-scores li{padding:8px 10px;font-size:12px}
  .best-rank{width:22px;height:22px;font-size:12px}
  .best-meta small{font-size:10px}
}
@media (max-height:540px){
  .settings-card{max-height:min(74vh,350px);padding:10px;gap:6px}
  .settings-header h2{font-size:20px}
  .settings-section{padding:8px}
  .close-settings{width:36px;height:36px;font-size:24px}
}

.settings-grid{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:10px;align-items:stretch;min-height:0}
.settings-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.settings-side{margin-top:0!important;display:flex;flex-direction:column;min-height:0}
.settings-side .best-scores{flex:1;overflow:auto;padding-inline-end:3px}

@media (pointer:coarse), (max-width:900px){
  .touch-controls{justify-content:space-between}
  .move-controls{display:flex}
}
@media (max-width:700px){
  .joystick-base{width:104px;height:104px}
  .joystick-thumb{width:46px;height:46px}
  .settings-modal{padding:10px}
  .settings-card{width:min(92vw,620px);max-height:min(68vh,300px);padding:10px;border-radius:18px;gap:8px}
  .settings-grid{grid-template-columns:minmax(0,1fr) 180px;gap:8px}
  .settings-header h2{font-size:22px}
  .settings-section{margin-top:0;padding:9px;border-radius:14px}
  .section-title{font-size:13px;margin-bottom:7px}
  .difficulty-options{gap:6px}
  .difficulty-option span{padding:8px 8px;font-size:12px}
  .volume-row{gap:8px}
  .best-scores{gap:5px}
  .best-scores li{padding:7px 8px;font-size:11px}
  .best-rank{width:20px;height:20px;font-size:11px}
  .best-meta small{font-size:9px}
  .best-empty{font-size:11px}
}
@media (max-width:520px){
  .settings-card{max-height:min(68vh,280px)}
  .settings-grid{grid-template-columns:minmax(0,1fr) 150px}
  .difficulty-option span{min-width:auto}
}
@media (max-height:540px){
  .settings-card{max-height:min(66vh,280px);padding:9px;gap:6px}
  .settings-grid{grid-template-columns:minmax(0,1fr) 160px}
  .settings-header h2{font-size:19px}
  .settings-section{padding:7px}
  .close-settings{width:34px;height:34px;font-size:22px}
}

@media (pointer:coarse), (max-width:900px){
  .touch-controls{left:max(0px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(4px,env(safe-area-inset-bottom))}
  .move-controls{margin-left:0;padding-left:2px}
  .joystick-base{width:104px;height:104px}
  .joystick-thumb{width:46px;height:46px}
}

@media (pointer:coarse), (max-width:900px){
  .fire-btn{display:none!important}
}

@media (max-width:900px), (max-height:560px){
  .koji-meter{top:102px;left:max(8px,env(safe-area-inset-left));width:78px;gap:2px}
  .koji-meter-ring{width:68px;height:68px}
  .koji-meter-ring::before{inset:5px}
  .koji-meter-label{font-size:9px;padding:2px 5px;min-width:36px}
  .koji-timer{bottom:5px;font-size:9px;min-width:25px;padding:1px 4px}
}


/* Hikaru assist meter */
.hikaru-meter{position:absolute;z-index:12;top:228px;left:max(16px,env(safe-area-inset-left));width:112px;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;--hikaru-progress:0deg;--hikaru-ring:#ff8e4a}
.hikaru-meter-ring{position:relative;width:98px;height:98px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--hikaru-ring) var(--hikaru-progress),rgba(255,255,255,.13) 0);filter:drop-shadow(0 0 8px rgba(255,154,58,.18));transition:filter .18s ease}
.hikaru-meter-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:rgba(5,18,31,.78);border:1px solid rgba(255,255,255,.20);box-shadow:inset 0 0 18px rgba(255,166,62,.09)}
.hikaru-meter-ring img{position:relative;z-index:1;width:98%;height:98%;object-fit:contain;filter:drop-shadow(0 0 6px rgba(255,188,76,.38))}
.hikaru-meter-label{font-size:12px;font-weight:900;color:#fff0df;text-shadow:0 1px 4px #000;background:rgba(24,10,3,.46);padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.11);min-width:44px;text-align:center}
.hikaru-timer{position:absolute;z-index:2;inset:auto 50% 7px auto;transform:translateX(50%);min-width:30px;padding:2px 5px;border-radius:999px;background:rgba(0,0,0,.64);border:1px solid rgba(255,255,255,.24);font-size:11px;font-weight:950;color:#fff;text-shadow:0 1px 3px #000;display:none}
.hikaru-meter.active{--hikaru-progress:360deg;--hikaru-ring:#42f07f}
.hikaru-meter.active .hikaru-meter-ring{filter:drop-shadow(0 0 11px rgba(66,240,127,.72)) drop-shadow(0 0 22px rgba(66,240,127,.28))}
.hikaru-meter.active .hikaru-timer{display:block}
.hikaru-meter.active .hikaru-meter-label{color:#8dffaf;border-color:rgba(66,240,127,.34)}
@media (max-width:900px), (max-height:560px){
  .hikaru-meter{top:172px;left:max(8px,env(safe-area-inset-left));width:78px;gap:2px}
  .hikaru-meter-ring{width:68px;height:68px}
  .hikaru-meter-ring::before{inset:5px}
  .hikaru-meter-label{font-size:9px;padding:2px 5px;min-width:36px}
  .hikaru-timer{bottom:5px;font-size:9px;min-width:25px;padding:1px 4px}
}


/* === V36 redesigned settings screen: bright classic game panel === */
.settings-modal{
  background:linear-gradient(180deg,rgba(168,221,255,.18),rgba(12,73,136,.32));
  backdrop-filter:blur(7px);
}
.settings-card{
  position:relative;
  width:min(760px,92vw);
  max-height:min(82vh,520px);
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(247,252,255,.98),rgba(189,225,248,.97) 45%,rgba(148,202,238,.98));
  border:3px solid rgba(214,243,255,.95);
  border-radius:28px;
  color:#08355f;
  padding:18px 18px 16px;
  box-shadow:
    0 16px 42px rgba(8,33,66,.30),
    0 0 0 4px rgba(44,119,184,.24) inset,
    0 0 26px rgba(92,202,255,.30);
  gap:14px;
}
.settings-card::before,
.settings-card::after{
  content:"";
  position:absolute;
  inset:auto;
  pointer-events:none;
}
.settings-card::before{
  top:12px;left:14px;right:14px;height:82px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
}
.settings-card::after{
  top:-40px;left:-30px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(98,214,255,.34),rgba(98,214,255,0) 65%);
}
.settings-header{
  position:relative;
  margin-bottom:0;
  padding:6px 4px 10px;
  border-bottom:2px solid rgba(69,137,194,.28);
}
.settings-header h2{
  margin:0;
  color:#0d3558;
  font-size:34px;
  font-weight:1000;
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 14px rgba(124,225,255,.28);
  letter-spacing:.4px;
}
.settings-header h2::before{
  content:"⚙";
  display:inline-grid;
  place-items:center;
  width:48px;height:48px;
  margin-inline-start:0;
  margin-inline-end:12px;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(180deg,#6ec8ff,#246dc0);
  box-shadow:0 6px 14px rgba(41,125,191,.28), inset 0 1px 8px rgba(255,255,255,.35);
  vertical-align:middle;
}
.close-settings{
  width:48px;height:48px;
  border-radius:16px;
  border:2px solid rgba(255,255,255,.75);
  background:linear-gradient(180deg,#ff7f74,#df3b2e);
  color:#fff;
  font-size:30px;
  font-weight:900;
  box-shadow:0 8px 20px rgba(213,70,54,.28), inset 0 1px 10px rgba(255,255,255,.35);
}
.close-settings:hover{transform:translateY(-1px)}
.settings-grid{
  grid-template-columns:minmax(0,1.2fr) minmax(220px,.82fr);
  gap:14px;
}
.settings-main{gap:14px}
.settings-section{
  position:relative;
  margin-top:0;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(246,251,255,.96),rgba(197,229,248,.90));
  border:2px solid rgba(255,255,255,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 10px 18px rgba(35,99,158,.12);
}
.settings-section::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:16px;
  border:1px solid rgba(84,165,216,.16);
  pointer-events:none;
}
.section-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  font-weight:1000;
  color:#0e416b;
  margin-bottom:14px;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.settings-main .settings-section:first-child .section-title::before,
.settings-main .settings-section:nth-child(2) .section-title::before,
.settings-side .section-title::before{
  display:inline-grid;
  place-items:center;
  width:34px;height:34px;border-radius:12px;
  color:#fff;
  font-size:18px;font-weight:900;
  box-shadow:0 6px 14px rgba(42,110,180,.2), inset 0 1px 10px rgba(255,255,255,.28);
}
.settings-main .settings-section:first-child .section-title::before{
  content:"✦";
  background:linear-gradient(180deg,#65cbff,#2f6fe1);
}
.settings-main .settings-section:nth-child(2) .section-title::before{
  content:"♪";
  background:linear-gradient(180deg,#5ee1cf,#0b979f);
}
.settings-side .section-title::before{
  content:"★";
  background:linear-gradient(180deg,#ffd86f,#f39b15);
}
.difficulty-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.difficulty-option{flex:unset}
.difficulty-option span{
  position:relative;
  min-height:68px;
  border-radius:20px;
  border:2px solid rgba(255,255,255,.9);
  background:linear-gradient(180deg,#edf6ff,#bddcf4);
  color:#18486f;
  font-size:22px;
  font-weight:1000;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
  box-shadow:0 10px 18px rgba(58,121,176,.14), inset 0 1px 10px rgba(255,255,255,.6);
}
.difficulty-option span::before{
  content:"";
  position:absolute;
  top:10px;left:12px;right:12px;height:18px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));
}
.difficulty-option input:checked+span{
  color:#fff;
  background:linear-gradient(180deg,#ff715a,#da2b1d);
  border-color:#fff2ef;
  box-shadow:0 0 0 3px rgba(255,116,97,.14),0 12px 24px rgba(210,45,29,.28),0 0 18px rgba(255,96,77,.32), inset 0 1px 12px rgba(255,255,255,.28);
}
.difficulty-option input:checked+span::after{
  content:"●";
  position:absolute;
  top:8px;right:12px;
  font-size:14px;
  color:#fffdb0;
  text-shadow:0 0 8px rgba(255,240,132,.9);
}
.volume-row{gap:14px}
#volumeRange{
  -webkit-appearance:none;appearance:none;
  height:12px;border-radius:999px;
  background:linear-gradient(90deg,#82d8ff,#45a5ff);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.65), inset 0 2px 5px rgba(0,0,0,.15);
}
#volumeRange::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(180deg,#ffffff,#bbf0ff 45%,#59c2ff);
  border:2px solid #ffffff;
  box-shadow:0 0 0 3px rgba(88,202,255,.20),0 4px 10px rgba(22,86,126,.24);
}
#volumeRange::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(180deg,#ffffff,#bbf0ff 45%,#59c2ff);
  border:2px solid #ffffff;
}
.volume-value{
  min-width:84px;
  padding:8px 12px;
  border-radius:14px;
  background:linear-gradient(180deg,#fff9d0,#ffd96b);
  border:2px solid rgba(255,255,255,.84);
  color:#654700;
  font-size:28px;
  font-weight:1000;
  box-shadow:0 8px 16px rgba(179,140,35,.18);
}
.settings-side{
  background:linear-gradient(180deg,rgba(240,250,255,.98),rgba(207,232,247,.95));
}
.settings-side .best-scores{padding-inline-end:6px}
.best-scores{gap:10px}
.best-scores li{
  padding:10px 12px;
  border-radius:16px;
  background:linear-gradient(180deg,#f6fbff,#dbeefb);
  border:2px solid rgba(255,255,255,.88);
  color:#123c63;
  box-shadow:0 8px 16px rgba(53,110,170,.10);
}
.best-rank{
  width:32px;height:32px;
  background:linear-gradient(180deg,#ffe78f,#ffbe37);
  color:#7b5100;
  box-shadow:0 5px 10px rgba(200,145,31,.22), inset 0 1px 6px rgba(255,255,255,.45);
}
.best-meta small{color:#5b7b96}
.best-score{color:#d78f09;font-size:19px}
.best-empty{padding-top:8px;color:#487092}

@media (max-width:760px){
  .settings-card{width:min(95vw,560px);max-height:min(82vh,560px);padding:14px;border-radius:24px}
  .settings-grid{grid-template-columns:1fr;gap:10px}
  .settings-side{order:-1}
  .settings-side .best-scores{max-height:168px;overflow:auto}
  .difficulty-options{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .difficulty-option span{min-height:56px;font-size:18px}
  .volume-value{min-width:70px;font-size:22px;padding:7px 10px}
  .settings-header h2{font-size:28px}
  .settings-header h2::before{width:40px;height:40px;font-size:24px;margin-inline-end:10px}
}
@media (max-width:520px){
  .settings-modal{padding:10px}
  .settings-card{max-height:min(86vh,620px);padding:12px 12px 10px;border-radius:22px}
  .settings-header{padding:2px 2px 8px}
  .settings-header h2{font-size:24px}
  .close-settings{width:42px;height:42px;font-size:26px}
  .settings-section{padding:12px;border-radius:18px}
  .section-title{font-size:16px;gap:8px;margin-bottom:10px}
  .section-title::before{width:30px;height:30px;font-size:16px}
  .difficulty-options{grid-template-columns:1fr;gap:8px}
  .difficulty-option span{min-height:50px;font-size:18px;border-radius:16px}
  .volume-row{flex-direction:row;align-items:center;gap:10px}
  .volume-value{font-size:18px;min-width:60px}
  .best-scores li{padding:8px 10px}
  .best-score{font-size:16px}
}
@media (max-height:560px){
  .settings-card{max-height:min(88vh,460px)}
  .settings-header h2{font-size:26px}
  .difficulty-option span{min-height:50px;font-size:18px}
}


/* === V37 classic game settings panel === */
.settings-modal.settings-theme-classic{
  background:rgba(7,28,53,.20);
  backdrop-filter:blur(3px);
}
.settings-theme-classic .settings-card{
  position:relative;
  width:min(1040px,90vw);
  max-height:min(82vh,560px);
  padding:14px 16px 18px;
  color:#eaf8ff;
  background:
    linear-gradient(180deg,#2b76bf 0%,#1d5ea0 7%,#123a68 7.1%,#0e3059 100%);
  border:3px solid #9ad8ff;
  border-radius:22px;
  box-shadow:
    0 0 0 3px rgba(14,36,65,.75) inset,
    0 0 0 8px rgba(131,208,255,.12) inset,
    0 0 30px rgba(69,172,255,.45),
    0 24px 46px rgba(2,12,25,.45);
}
.settings-theme-classic .settings-card::before,
.settings-theme-classic .settings-card::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:16px;
  pointer-events:none;
}
.settings-theme-classic .settings-card::before{
  border:1px solid rgba(203,241,255,.32);
}
.settings-theme-classic .settings-card::after{
  inset:auto 20px 14px;
  height:10px;
  background:linear-gradient(90deg,transparent 0 4%, #ef4343 4% 8%, transparent 8% 18%, #7fb5ef 18% 33%, transparent 33% 67%, #7fb5ef 67% 82%, transparent 82% 92%, #ef4343 92% 96%, transparent 96%);
  opacity:.9;
}
.settings-theme-classic .settings-header{
  display:grid;
  grid-template-columns:64px 1fr 120px;
  align-items:center;
  gap:14px;
  padding:0 2px 12px;
  border-bottom:none;
}
.settings-theme-classic .settings-title-stack{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:84px;
  padding:10px 18px 12px;
  border-radius:18px;
  background:linear-gradient(180deg,#145a98,#10497d 45%,#0c3965);
  border:2px solid #9ad8ff;
  box-shadow:0 0 0 2px rgba(14,35,61,.55) inset, 0 0 18px rgba(79,184,255,.35);
}
.settings-theme-classic .settings-title-stack::before,
.settings-theme-classic .settings-title-stack::after{
  content:"";
  position:absolute;
  top:50%;
  width:52px;height:12px;
  transform:translateY(-50%) skewX(-28deg);
  background:linear-gradient(180deg,#f9d467,#bb8722);
  border:1px solid rgba(255,237,177,.55);
  box-shadow:0 0 10px rgba(255,203,86,.25);
}
.settings-theme-classic .settings-title-stack::before{right:calc(100% + 10px)}
.settings-theme-classic .settings-title-stack::after{left:calc(100% + 10px)}
.settings-theme-classic .settings-header h2{
  margin:0;
  font-size:56px;
  line-height:1;
  font-weight:1000;
  color:#f4fbff;
  letter-spacing:.2px;
  text-shadow:0 2px 0 rgba(4,19,38,.5), 0 0 16px rgba(110,223,255,.25);
}
.settings-theme-classic .settings-header h2::before{display:none !important;content:none !important}
.settings-theme-classic .settings-sub{
  margin-top:4px;
  font-size:15px;
  letter-spacing:2px;
  color:#d9f2ff;
  opacity:.9;
}
.settings-theme-classic .close-settings{
  width:58px;height:58px;border-radius:50%;
  border:4px solid #ffd067;
  background:radial-gradient(circle at 35% 30%,#ffb5a3,#f9493b 55%,#b61f14 100%);
  box-shadow:0 0 18px rgba(255,91,71,.45), 0 0 0 2px rgba(83,22,11,.45) inset;
  font-size:38px;font-weight:1000;
  justify-self:start;
}
.settings-theme-classic .settings-emblem{
  justify-self:end;
  width:106px;height:82px;
  display:grid;place-items:center;
  overflow:hidden;
  filter:drop-shadow(0 0 12px rgba(116,224,255,.35));
}
.settings-theme-classic .settings-emblem img{
  max-width:100%;max-height:100%;object-fit:contain;
}
.settings-theme-classic .settings-grid{
  grid-template-columns:minmax(280px,.9fr) minmax(0,1.35fr);
  gap:12px;
  align-items:stretch;
}
.settings-theme-classic .settings-side,
.settings-theme-classic .settings-main .settings-section{
  position:relative;
  background:linear-gradient(180deg,#104a81,#0a315d);
  border:2px solid #79d2ff;
  border-radius:18px;
  box-shadow:0 0 0 2px rgba(11,28,49,.65) inset, 0 0 15px rgba(75,184,255,.18);
}
.settings-theme-classic .settings-main{display:grid;grid-template-rows:auto auto;gap:12px}
.settings-theme-classic .settings-side{padding:12px 12px 10px}
.settings-theme-classic .settings-main .settings-section{padding:14px}
.settings-theme-classic .settings-section::before{
  content:"";
  position:absolute;inset:8px;
  border-radius:12px;
  border:1px solid rgba(214,245,255,.18);
  pointer-events:none;
}
.settings-theme-classic .section-title{
  margin-bottom:12px;
  font-size:20px;
  color:#f6fbff;
  font-weight:1000;
  text-shadow:0 1px 0 rgba(4,18,35,.6);
}
.settings-theme-classic .settings-side .section-title{
  justify-content:center;
  font-size:22px;
  color:#ffea87;
}
.settings-theme-classic .settings-side .section-title::before{content:"🏆"; background:none; box-shadow:none; width:auto; height:auto; font-size:34px}
.settings-theme-classic .settings-main .settings-section:first-child .section-title::before{content:"🛡"; background:none; box-shadow:none; width:auto; height:auto; font-size:26px}
.settings-theme-classic .settings-main .settings-section:nth-child(2) .section-title::before{content:"🔊"; background:none; box-shadow:none; width:auto; height:auto; font-size:28px}
.settings-theme-classic .difficulty-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.settings-theme-classic .difficulty-option span{
  min-height:60px;
  padding:10px 12px;
  border-radius:18px;
  border:2px solid #87d8ff;
  background:linear-gradient(180deg,#d7efff,#89c8ff 48%,#65b7f8 49%,#98d0ff 100%);
  color:#0a2752;
  font-size:20px;
  font-weight:1000;
  box-shadow:0 0 0 2px rgba(255,255,255,.38) inset, 0 4px 12px rgba(9,22,41,.22);
}
.settings-theme-classic .difficulty-option input:checked + span{
  background:linear-gradient(180deg,#ff7868,#ef3f32 48%,#cf261b 49%,#ff5f41 100%);
  color:#fff8d7;
  border-color:#ffd882;
  box-shadow:0 0 0 2px rgba(255,255,255,.34) inset,0 0 18px rgba(255,120,75,.38),0 4px 14px rgba(76,15,4,.3);
}
.settings-theme-classic .volume-row{
  display:grid;
  grid-template-columns:90px 1fr 80px;
  align-items:center;
  gap:14px;
}
.settings-theme-classic .volume-row::before{
  content:"";
  width:54px;height:54px;justify-self:center;
  background:radial-gradient(circle at 40% 35%,#ffffff 0 10%,#88dbff 11% 36%,#0c3965 37% 100%);
  mask: radial-gradient(circle at 28% 50%, transparent 15%, #000 16%) left/50% 100% no-repeat, linear-gradient(#000 0 0);
  opacity:.95;
  border-radius:50%;
}
.settings-theme-classic .settings-main .settings-section:nth-child(2) .volume-row::before{content:"♪"; display:grid; place-items:center; background:none; width:auto; height:auto; font-size:54px; color:#d6f2ff; text-shadow:0 0 12px rgba(117,223,255,.3)}
.settings-theme-classic #volumeRange{
  height:14px;
  border-radius:999px;
  background:linear-gradient(180deg,#50d1ff,#2ea5e8);
  box-shadow:0 0 0 2px rgba(211,245,255,.35) inset;
}
.settings-theme-classic #volumeRange::-webkit-slider-thumb{
  width:34px;height:34px;
  background:linear-gradient(180deg,#feffff,#cbf0ff 45%,#6dccff);
  border:3px solid #effcff;
  box-shadow:0 0 12px rgba(139,223,255,.35),0 4px 10px rgba(5,23,45,.25);
}
.settings-theme-classic #volumeRange::-moz-range-thumb{
  width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#feffff,#cbf0ff 45%,#6dccff);border:3px solid #effcff;
}
.settings-theme-classic .volume-value{
  min-width:72px;
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
  color:#ffe26c;
  font-size:24px;
  font-weight:1000;
}
.settings-theme-classic .best-scores{gap:6px}
.settings-theme-classic .best-scores li{
  padding:10px 12px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(17,66,111,.95),rgba(13,49,86,.95));
  border:1px solid rgba(138,214,255,.45);
  box-shadow:0 2px 0 rgba(202,241,255,.12) inset;
}
.settings-theme-classic .best-rank{
  width:42px;height:42px;
  font-size:30px;font-weight:1000;
  background:linear-gradient(180deg,#ffe88f,#f2b93f);
  color:#7b4d00;
  border:2px solid rgba(255,247,203,.6);
}
.settings-theme-classic .best-scores li:nth-child(2) .best-rank{background:linear-gradient(180deg,#f4f7fb,#b9c9dc);color:#39516f}
.settings-theme-classic .best-scores li:nth-child(3) .best-rank{background:linear-gradient(180deg,#f0ba84,#cf7539);color:#5d2b0c}
.settings-theme-classic .best-meta{gap:0}
.settings-theme-classic .best-meta small{font-size:12px;color:#b7d8f3}
.settings-theme-classic .best-score{font-size:21px;color:#ffe26c}
.settings-theme-classic .best-empty{color:#d7efff}
@media (max-width:900px){
  .settings-theme-classic .settings-card{width:min(96vw,840px);max-height:min(86vh,620px)}
  .settings-theme-classic .settings-header{grid-template-columns:56px 1fr 92px;gap:10px}
  .settings-theme-classic .settings-header h2{font-size:42px}
  .settings-theme-classic .settings-title-stack::before,.settings-theme-classic .settings-title-stack::after{width:34px}
  .settings-theme-classic .settings-grid{grid-template-columns:1fr;gap:10px}
  .settings-theme-classic .settings-side{order:1}
  .settings-theme-classic .settings-main{order:2}
  .settings-theme-classic .settings-side .best-scores{max-height:190px;overflow:auto}
}
@media (max-width:620px){
  .settings-theme-classic .settings-card{padding:10px 10px 12px;border-radius:18px;max-height:min(88vh,640px)}
  .settings-theme-classic .settings-header{grid-template-columns:48px 1fr 68px;gap:8px;padding-bottom:8px}
  .settings-theme-classic .close-settings{width:48px;height:48px;font-size:32px;border-width:3px}
  .settings-theme-classic .settings-emblem{width:68px;height:56px}
  .settings-theme-classic .settings-title-stack{min-height:60px;padding:8px 12px 10px;border-radius:14px}
  .settings-theme-classic .settings-header h2{font-size:28px}
  .settings-theme-classic .settings-sub{font-size:10px;letter-spacing:1px}
  .settings-theme-classic .settings-title-stack::before,.settings-theme-classic .settings-title-stack::after{display:none}
  .settings-theme-classic .settings-main .settings-section,.settings-theme-classic .settings-side{padding:10px}
  .settings-theme-classic .section-title{font-size:16px;margin-bottom:8px}
  .settings-theme-classic .settings-side .section-title{font-size:18px}
  .settings-theme-classic .best-scores li{padding:8px 10px}
  .settings-theme-classic .best-rank{width:34px;height:34px;font-size:22px}
  .settings-theme-classic .best-score{font-size:18px}
  .settings-theme-classic .difficulty-options{grid-template-columns:1fr;gap:8px}
  .settings-theme-classic .difficulty-option span{min-height:48px;font-size:18px;border-radius:14px}
  .settings-theme-classic .volume-row{grid-template-columns:1fr 60px;gap:10px}
  .settings-theme-classic .volume-row::before{display:none}
  .settings-theme-classic .volume-value{font-size:20px;justify-self:end}
}


/* === V38 settings panel closer to reference mockup === */
.settings-theme-classic .settings-card{
  width:min(1060px,92vw);
  max-height:min(86vh,660px);
  padding:14px 16px 18px;
  background:linear-gradient(180deg,#b7dcff 0%,#9ecdf4 1%,#9fc9ef 6%,#78b0df 6.2%,#0f3f70 6.3%,#123f70 100%);
  border:3px solid #a7e4ff;
  border-radius:8px;
  color:#eefaff;
  overflow:hidden;
}
.settings-theme-classic .settings-card::before{inset:6px;border:1px solid rgba(255,255,255,.24);border-radius:6px}
.settings-theme-classic .settings-card::after{display:none}
.settings-theme-classic .settings-header{
  grid-template-columns:70px 1fr 142px;
  gap:14px;
  align-items:start;
  padding:2px 2px 10px;
}
.settings-theme-classic .close-settings{
  width:66px;height:66px;justify-self:start;
  margin-top:4px;
  border-radius:50%;
  border:5px solid #ffcc5e;
  background:radial-gradient(circle at 38% 30%,#ffc7ad 0 16%,#ff7a4e 17% 40%,#ef392d 41% 72%,#b81f1a 73% 100%);
  color:#fff;font-size:38px;line-height:1;
  box-shadow:0 0 0 4px rgba(68,92,125,.85),0 0 18px rgba(255,104,75,.36);
}
.settings-theme-classic .settings-title-stack{
  min-height:94px;
  border-radius:10px;
  border:2px solid #5dbff6;
  background:linear-gradient(180deg,#1f6db4 0%,#0f4e8a 52%,#0a3c6a 53%,#0d3b66 100%);
  box-shadow:0 0 0 2px rgba(220,248,255,.16) inset,0 0 20px rgba(59,171,255,.26);
}
.settings-theme-classic .settings-title-stack::before,
.settings-theme-classic .settings-title-stack::after{
  display:block;
  width:44px;height:14px;border-radius:2px;
  top:31px;
  background:linear-gradient(180deg,#ffd86f,#c38f1d);
  border:1px solid rgba(255,240,180,.45);
  transform:translateY(0) skewX(-24deg);
  box-shadow:0 0 10px rgba(255,205,94,.2);
}
.settings-theme-classic .settings-title-stack::before{right:12px;left:auto}
.settings-theme-classic .settings-title-stack::after{left:12px;right:auto}
.settings-theme-classic .settings-header h2{font-size:54px;font-weight:1000;letter-spacing:0;text-shadow:0 2px 0 rgba(4,16,28,.55),0 0 12px rgba(133,233,255,.2)}
.settings-theme-classic .settings-sub{font-size:16px;letter-spacing:2px;color:#dcefff;margin-top:3px}
.settings-theme-classic .settings-emblem{width:132px;height:92px;align-self:start;margin-top:2px;filter:drop-shadow(0 0 8px rgba(96,224,255,.3))}
.settings-theme-classic .settings-grid{grid-template-columns:minmax(310px,.84fr) minmax(0,1.34fr);gap:14px}
.settings-theme-classic .settings-side,
.settings-theme-classic .settings-main .settings-section{
  background:linear-gradient(180deg,#195896 0%,#0f4377 34%,#0c345d 100%);
  border-radius:8px;
  border:2px solid #57c9ff;
  box-shadow:0 0 0 2px rgba(210,245,255,.1) inset,0 0 16px rgba(68,181,255,.15);
}
.settings-theme-classic .settings-side{padding:12px 12px 10px}
.settings-theme-classic .settings-main{gap:12px}
.settings-theme-classic .settings-main .settings-section{padding:14px 16px}
.settings-theme-classic .settings-section::before{inset:6px;border-radius:4px;border-color:rgba(197,241,255,.2)}
.settings-theme-classic .settings-side .section-title,
.settings-theme-classic .difficulty-panel .section-title,
.settings-theme-classic .audio-label,.settings-theme-classic .toggle-title{
  text-shadow:0 1px 0 rgba(5,20,38,.7);
}
.settings-theme-classic .settings-side .section-title{
  justify-content:flex-start;
  color:#ffe370;
  font-size:28px;
  gap:12px;
  margin-bottom:10px;
}
.settings-theme-classic .settings-side .section-title::before{content:"🏆";font-size:34px;background:none;box-shadow:none;width:auto;height:auto}
.settings-theme-classic .best-scores{gap:8px;max-height:350px;overflow:auto;padding-inline-end:4px}
.settings-theme-classic .best-scores li{
  position:relative;
  padding:10px 12px;
  border-radius:8px;
  background:linear-gradient(180deg,#113f70,#0d325a);
  border:1px solid rgba(132,212,255,.35);
}
.settings-theme-classic .best-scores li::before{
  content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.settings-theme-classic .best-rank{width:46px;height:46px;font-size:30px;font-weight:1000;border:2px solid rgba(255,253,208,.6)}
.settings-theme-classic .best-scores li:nth-child(1) .best-rank{background:linear-gradient(180deg,#ffe989,#efbd2d);color:#7d5600}
.settings-theme-classic .best-scores li:nth-child(2) .best-rank{background:linear-gradient(180deg,#f5f9fd,#c3ced8);color:#34485f}
.settings-theme-classic .best-scores li:nth-child(3) .best-rank{background:linear-gradient(180deg,#f8cd9c,#db8749);color:#652f12}
.settings-theme-classic .best-score{font-size:22px;color:#ffe56e}
.settings-theme-classic .scores-brand{
  margin-top:10px;
  text-align:center;
  color:#6f9cc5;
  font-size:14px;
  letter-spacing:2px;
  opacity:.8;
}
.settings-theme-classic .scores-brand strong{display:block;color:#628db8;font-size:18px;letter-spacing:1px}
.settings-theme-classic .difficulty-panel .section-title{color:#eefbff;font-size:22px;margin-bottom:12px;justify-content:flex-start}
.settings-theme-classic .difficulty-panel .section-title::before{content:"✦";font-size:22px;background:none;box-shadow:none;width:auto;height:auto;color:#c1eeff}
.settings-theme-classic .difficulty-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.settings-theme-classic .difficulty-option span{
  min-height:60px;border-radius:20px;padding:10px 14px;
  border:2px solid #74d1ff;
  background:linear-gradient(180deg,#eff8ff 0%,#bfe4ff 32%,#7dc6ff 49%,#63b5f7 50%,#c4e9ff 100%);
  color:#0d3060;font-size:22px;font-weight:1000;
  box-shadow:0 0 0 2px rgba(255,255,255,.35) inset,0 8px 16px rgba(7,21,39,.18);
}
.settings-theme-classic .difficulty-option span::before{display:none}
.settings-theme-classic .difficulty-option input:checked+span{
  background:linear-gradient(180deg,#ff9c6f 0%,#ff6546 25%,#e23426 49%,#d51d18 50%,#ff6542 100%);
  color:#fff8dd;border-color:#ffcf6a;
  box-shadow:0 0 0 2px rgba(255,255,255,.28) inset,0 0 18px rgba(255,111,79,.38),0 8px 18px rgba(84,16,6,.28);
}
.settings-theme-classic .difficulty-option input:checked+span::after{
  content:"◀";right:auto;left:10px;top:50%;transform:translateY(-50%);color:#ffe480;font-size:14px;text-shadow:0 0 10px rgba(255,233,133,.9)
}
.settings-theme-classic .difficulty-option input:checked+span::before{
  display:block;content:"▶";position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#ffe480;font-size:14px;text-shadow:0 0 10px rgba(255,233,133,.9)
}
.settings-theme-classic .audio-panel{display:flex;flex-direction:column;gap:14px}
.settings-theme-classic .audio-row{
  display:grid;grid-template-columns:220px 1fr 84px;align-items:center;gap:14px;
  padding:10px 12px;border-radius:12px;
  background:linear-gradient(180deg,#154f89,#0f3f71);
  border:1px solid rgba(127,215,255,.28);
}
.settings-theme-classic .audio-row::before{display:none}
.settings-theme-classic .audio-label{position:relative;padding-inline-start:46px;font-size:18px;font-weight:1000;color:#eefbff}
.settings-theme-classic .sfx-row .audio-label::before,
.settings-theme-classic .music-row .audio-label::before{
  content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:grid;place-items:center;color:#e7f9ff;font-size:28px;
}
.settings-theme-classic .sfx-row .audio-label::before{content:"🔊"}
.settings-theme-classic .music-row .audio-label::before{content:"♪";font-size:30px}
.settings-theme-classic #volumeRange,.settings-theme-classic #musicRange{
  -webkit-appearance:none;appearance:none;height:14px;border-radius:999px;
  background:linear-gradient(180deg,#3ed6ff,#20a9ed);
  box-shadow:inset 0 0 0 2px rgba(224,248,255,.28), 0 0 0 1px rgba(8,27,51,.45);
}
.settings-theme-classic #volumeRange::-webkit-slider-thumb,.settings-theme-classic #musicRange::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:34px;height:34px;border-radius:50%;border:3px solid #f6fdff;
  background:linear-gradient(180deg,#ffffff,#d3f2ff 38%,#8fd8ff 60%,#eefcff 100%);
  box-shadow:0 0 16px rgba(122,227,255,.38),0 6px 12px rgba(6,20,40,.25)
}
.settings-theme-classic #volumeRange::-moz-range-thumb,.settings-theme-classic #musicRange::-moz-range-thumb{
  width:34px;height:34px;border-radius:50%;border:3px solid #f6fdff;background:linear-gradient(180deg,#ffffff,#d3f2ff 38%,#8fd8ff 60%,#eefcff 100%)
}
.settings-theme-classic .volume-value{background:none;border:none;box-shadow:none;color:#ffe16e;font-size:22px;font-weight:1000;min-width:74px;text-align:center}
.settings-theme-classic .toggle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.settings-theme-classic .toggle-card{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:96px;padding:14px 16px;border-radius:14px;
  background:linear-gradient(180deg,#164f88,#103d6e);
  border:1px solid rgba(127,215,255,.28);cursor:pointer;
}
.settings-theme-classic .toggle-card:nth-child(1)::before,
.settings-theme-classic .toggle-card:nth-child(2)::before{
  content:"✦";position:absolute;inset-inline-start:16px;top:14px;font-size:34px;color:#c7f3ff;opacity:.95
}
.settings-theme-classic .toggle-card:nth-child(2)::before{content:"⌁";font-size:36px}
.settings-theme-classic .toggle-title{padding-inline-start:42px;font-size:18px;font-weight:1000;color:#eefbff}
.settings-theme-classic .toggle-card input{position:absolute;opacity:0;pointer-events:none}
.settings-theme-classic .toggle-switch{
  position:relative;display:inline-flex;align-items:center;justify-content:flex-start;
  width:116px;height:44px;padding:0 12px;border-radius:999px;
  background:linear-gradient(180deg,#0d3c68,#154e89);border:2px solid #7bd4ff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);
}
.settings-theme-classic .toggle-track{position:absolute;inset:5px;border-radius:999px;background:linear-gradient(180deg,#30ceff,#199fe4);box-shadow:0 0 12px rgba(59,208,255,.35)}
.settings-theme-classic .toggle-knob{position:absolute;right:6px;width:32px;height:32px;border-radius:50%;background:linear-gradient(180deg,#ffffff,#d3f2ff 40%,#8dd8ff);border:2px solid #f6fdff;box-shadow:0 4px 10px rgba(6,20,40,.22)}
.settings-theme-classic .toggle-on{position:relative;z-index:1;color:#fff;font-size:18px;font-weight:1000;margin-inline-start:12px;text-shadow:0 1px 0 rgba(7,27,49,.7)}
.settings-theme-classic .toggle-card input:not(:checked)+.toggle-switch .toggle-track{background:linear-gradient(180deg,#447293,#24465f);box-shadow:none}
.settings-theme-classic .toggle-card input:not(:checked)+.toggle-switch .toggle-knob{right:auto;left:6px;background:linear-gradient(180deg,#ecf0f4,#bfcad4)}
.settings-theme-classic .toggle-card input:not(:checked)+.toggle-switch .toggle-on{margin-inline-start:48px;color:#d7e8f4}
.settings-theme-classic .toggle-card input:not(:checked)+.toggle-switch .toggle-on::after{content:"OFF"}
.settings-theme-classic .toggle-card input:checked+.toggle-switch .toggle-on::after{content:""}
.settings-theme-classic .settings-bottom-bar{
  margin-top:12px;padding:10px 18px 4px;text-align:center;
  color:#0f2b50;font-weight:1000;font-size:18px;
  background:linear-gradient(180deg,#cbddf3,#afcae8);
  border:2px solid rgba(255,255,255,.35);
  border-radius:0 0 6px 6px;
  box-shadow:0 -1px 0 rgba(255,255,255,.3) inset;
}
.settings-theme-classic .settings-bottom-bar::before,.settings-theme-classic .settings-bottom-bar::after{content:"";display:inline-block;vertical-align:middle;width:72px;height:6px;margin:0 14px;border-top:3px solid #2d527f;border-bottom:3px solid #2d527f;opacity:.7}
@media (max-width:900px){
  .settings-theme-classic .settings-card{width:min(96vw,850px);max-height:min(90vh,700px)}
  .settings-theme-classic .settings-header{grid-template-columns:60px 1fr 100px}
  .settings-theme-classic .settings-header h2{font-size:42px}
  .settings-theme-classic .settings-grid{grid-template-columns:1fr}
  .settings-theme-classic .settings-side{order:1}
  .settings-theme-classic .settings-main{order:2}
  .settings-theme-classic .best-scores{max-height:180px}
}
@media (max-width:620px){
  .settings-theme-classic .settings-card{padding:10px 10px 12px;max-height:min(92vh,760px)}
  .settings-theme-classic .settings-header{grid-template-columns:52px 1fr 72px;gap:8px;padding-bottom:8px}
  .settings-theme-classic .close-settings{width:50px;height:50px;font-size:30px;border-width:3px;box-shadow:0 0 0 2px rgba(68,92,125,.85),0 0 12px rgba(255,104,75,.28)}
  .settings-theme-classic .settings-title-stack{min-height:68px;padding:8px 10px}
  .settings-theme-classic .settings-header h2{font-size:30px}
  .settings-theme-classic .settings-sub{font-size:11px}
  .settings-theme-classic .settings-emblem{width:64px;height:50px}
  .settings-theme-classic .settings-title-stack::before,.settings-theme-classic .settings-title-stack::after{display:none}
  .settings-theme-classic .settings-grid{gap:10px}
  .settings-theme-classic .settings-main .settings-section,.settings-theme-classic .settings-side{padding:10px}
  .settings-theme-classic .difficulty-options{grid-template-columns:1fr}
  .settings-theme-classic .difficulty-option span{min-height:46px;font-size:18px}
  .settings-theme-classic .audio-row{grid-template-columns:1fr 66px;gap:10px;padding:10px}
  .settings-theme-classic .audio-label{grid-column:1 / -1;padding-inline-start:36px;font-size:16px}
  .settings-theme-classic .audio-label::before{width:26px;height:26px;font-size:24px}
  .settings-theme-classic .volume-value{font-size:18px;min-width:60px}
  .settings-theme-classic .toggle-grid{grid-template-columns:1fr}
  .settings-theme-classic .toggle-card{min-height:76px;padding:12px 14px}
  .settings-theme-classic .toggle-title{font-size:16px;padding-inline-start:36px}
  .settings-theme-classic .toggle-card:nth-child(1)::before,.settings-theme-classic .toggle-card:nth-child(2)::before{font-size:28px}
  .settings-theme-classic .toggle-switch{width:100px;height:40px}
  .settings-theme-classic .settings-bottom-bar{font-size:16px;padding-top:8px}
  .settings-theme-classic .settings-bottom-bar::before,.settings-theme-classic .settings-bottom-bar::after{width:34px;margin:0 8px}
}


.maria-meter{position:absolute;z-index:12;top:338px;left:max(16px,env(safe-area-inset-left));width:112px;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;--maria-progress:0deg;--maria-ring:#ff5e85}
.maria-meter-ring{position:relative;width:98px;height:98px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--maria-ring) var(--maria-progress),rgba(255,255,255,.13) 0);filter:drop-shadow(0 0 8px rgba(255,94,133,.18));transition:filter .18s ease}
.maria-meter-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:rgba(23,7,14,.78);border:1px solid rgba(255,255,255,.20);box-shadow:inset 0 0 18px rgba(255,100,152,.12)}
.maria-meter-ring img{position:relative;z-index:1;width:98%;height:98%;object-fit:contain;filter:drop-shadow(0 0 6px rgba(255,160,192,.42))}
.maria-meter-label{font-size:12px;font-weight:900;color:#ffe4ee;text-shadow:0 1px 4px #000;background:rgba(26,5,14,.48);padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.11);min-width:44px;text-align:center}
.maria-timer{display:none;position:absolute;inset:auto 0 5px 0;text-align:center;font-size:16px;font-weight:900;color:#fff5dd;text-shadow:0 1px 6px rgba(0,0,0,.8);z-index:2}
.maria-meter.active{--maria-progress:360deg;--maria-ring:#42f07f}
.maria-meter.active .maria-meter-ring{filter:drop-shadow(0 0 11px rgba(66,240,127,.72)) drop-shadow(0 0 22px rgba(66,240,127,.28))}
.maria-meter.active .maria-timer{display:block}
.maria-meter.active .maria-meter-label{color:#8dffaf;border-color:rgba(66,240,127,.34)}
@media (max-width: 760px){
  .maria-meter{top:242px;left:max(8px,env(safe-area-inset-left));width:78px;gap:2px}
  .maria-meter-ring{width:68px;height:68px}
  .maria-meter-ring::before{inset:5px}
  .maria-meter-label{font-size:9px;padding:2px 5px;min-width:36px}
  .maria-timer{font-size:12px;bottom:4px}
}

/* === V40 mobile settings panel fixes === */
@media (max-height:560px) and (orientation: landscape){
  .settings-theme-classic .settings-card{
    width:min(98vw,920px);
    max-height:94vh;
    overflow-y:auto;
    padding:8px 8px 10px;
    border-radius:14px;
  }
  .settings-theme-classic .settings-header{
    grid-template-columns:50px 1fr 74px;
    gap:8px;
    padding:0 0 6px;
  }
  .settings-theme-classic .close-settings{
    width:46px;height:46px;font-size:28px;border-width:3px;margin-top:2px;
  }
  .settings-theme-classic .settings-title-stack{
    min-height:60px;
    padding:6px 10px 8px;
  }
  .settings-theme-classic .settings-header h2{font-size:28px}
  .settings-theme-classic .settings-sub{font-size:10px;letter-spacing:1px}
  .settings-theme-classic .settings-emblem{width:72px;height:52px;margin-top:0}
  .settings-theme-classic .settings-title-stack::before,
  .settings-theme-classic .settings-title-stack::after{display:none}
  .settings-theme-classic .settings-grid{
    grid-template-columns:minmax(240px,.82fr) minmax(0,1.18fr);
    gap:8px;
    align-items:start;
  }
  .settings-theme-classic .settings-side,
  .settings-theme-classic .settings-main .settings-section{padding:8px}
  .settings-theme-classic .settings-side .section-title{font-size:20px;margin-bottom:8px}
  .settings-theme-classic .difficulty-panel .section-title{font-size:18px;margin-bottom:8px}
  .settings-theme-classic .difficulty-options{gap:8px}
  .settings-theme-classic .difficulty-option span{min-height:42px;font-size:18px;border-radius:14px;padding:8px 12px}
  .settings-theme-classic .audio-panel{gap:8px}
  .settings-theme-classic .audio-row{
    grid-template-columns:150px 1fr 58px;
    gap:8px;
    padding:8px 10px;
  }
  .settings-theme-classic .audio-label{font-size:15px;padding-inline-start:34px}
  .settings-theme-classic .sfx-row .audio-label::before,
  .settings-theme-classic .music-row .audio-label::before{width:24px;height:24px;font-size:22px}
  .settings-theme-classic #volumeRange,
  .settings-theme-classic #musicRange{height:12px}
  .settings-theme-classic #volumeRange::-webkit-slider-thumb,
  .settings-theme-classic #musicRange::-webkit-slider-thumb{width:26px;height:26px}
  .settings-theme-classic #volumeRange::-moz-range-thumb,
  .settings-theme-classic #musicRange::-moz-range-thumb{width:26px;height:26px}
  .settings-theme-classic .volume-value{font-size:17px;min-width:54px}
  .settings-theme-classic .toggle-grid{gap:8px}
  .settings-theme-classic .toggle-card{min-height:68px;padding:10px 12px;border-radius:12px}
  .settings-theme-classic .toggle-title{font-size:14px;padding-inline-start:32px}
  .settings-theme-classic .toggle-card:nth-child(1)::before,
  .settings-theme-classic .toggle-card:nth-child(2)::before{font-size:24px;top:10px;inset-inline-start:12px}
  .settings-theme-classic .toggle-switch{width:84px;height:34px;padding:0 10px}
  .settings-theme-classic .toggle-knob{width:24px;height:24px}
  .settings-theme-classic .toggle-on{font-size:14px;margin-inline-start:10px}
  .settings-theme-classic .toggle-card input:not(:checked)+.toggle-switch .toggle-on{margin-inline-start:38px}
  .settings-theme-classic .best-scores{max-height:140px;gap:6px}
  .settings-theme-classic .best-scores li{padding:7px 9px}
  .settings-theme-classic .best-rank{width:34px;height:34px;font-size:21px}
  .settings-theme-classic .best-meta small{font-size:11px}
  .settings-theme-classic .best-score{font-size:18px}
  .settings-theme-classic .scores-brand{display:none}
  .settings-theme-classic .settings-bottom-bar{margin-top:8px;padding:8px 12px 3px;font-size:14px}
  .settings-theme-classic .settings-bottom-bar::before,
  .settings-theme-classic .settings-bottom-bar::after{width:28px;margin:0 6px}
}

@media (max-width:620px){
  .settings-theme-classic .settings-card{
    width:min(98vw,460px);
    max-height:94vh;
    overflow-y:auto;
  }
  .settings-theme-classic .settings-grid{grid-template-columns:1fr;gap:8px}
  .settings-theme-classic .settings-side{order:2}
  .settings-theme-classic .settings-main{order:1;gap:8px}
  .settings-theme-classic .best-scores{max-height:150px}
  .settings-theme-classic .scores-brand{display:none}
}


/* V44 — unobtrusive return-to-menu action and game-style confirmation. */
.return-menu-btn{
  color:#e7f8ff;
  border-color:rgba(125,215,255,.5);
  background:linear-gradient(180deg,rgba(32,96,150,.86),rgba(9,42,80,.86));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 0 10px rgba(65,172,250,.14);
  font-size:29px;
  line-height:1;
}
.return-menu-btn:active{transform:scale(.94)}
.return-confirm{
  position:absolute;z-index:42;inset:0;
  display:grid;place-items:center;
  padding:clamp(8px,2.4vw,22px);
  background:rgba(2,13,29,.66);
  backdrop-filter:blur(5px);
}
.return-confirm-panel{
  position:relative;
  width:min(510px,90vw);
  max-height:calc(100dvh - 20px);
  overflow:auto;
  padding:clamp(15px,3vh,26px);
  border:3px solid #94d7ff;
  border-radius:19px;
  background:linear-gradient(155deg,#d8f0ff,#a6d5f9 16%,#256aa9 16.3%,#104173 100%);
  color:#f5fcff;
  text-align:center;
  box-shadow:0 0 0 3px rgba(5,29,65,.7) inset,0 0 28px rgba(71,179,255,.3),0 20px 48px rgba(0,10,24,.5);
}
.return-confirm-emblem{
  display:grid;place-items:center;
  width:clamp(34px,8vh,50px);height:clamp(34px,8vh,50px);
  margin:0 auto 7px;border-radius:50%;font-size:clamp(21px,5vh,32px);
  background:linear-gradient(180deg,#aeeeff,#1772b5);
  border:2px solid #dcf8ff;color:#103a64;
  box-shadow:0 0 15px rgba(100,211,255,.45);
}
.return-confirm-panel h2{
  margin:3px 0 8px;
  font-size:clamp(19px,2.7vw,27px);
  text-shadow:0 2px 3px rgba(0,18,45,.45);
}
.return-confirm-panel p{font-size:clamp(12px,1.5vw,16px);line-height:1.65;margin:0 0 16px;color:#e8f6ff}
.return-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.return-confirm-button{
  min-height:clamp(42px,8vh,53px);
  border-radius:13px;border:2px solid rgba(245,253,255,.8);
  font-family:inherit;font-size:clamp(14px,1.8vw,18px);font-weight:900;
  color:#fff;cursor:pointer;
  box-shadow:0 5px 13px rgba(0,15,36,.25),inset 0 1px 8px rgba(255,255,255,.17);
}
.return-cancel{background:linear-gradient(180deg,#268bd2,#124987)}
.return-accept{background:linear-gradient(180deg,#ff6b57,#bb241c)}
.return-confirm-button:focus-visible,.return-menu-btn:focus-visible{outline:3px solid #ffdb63;outline-offset:3px}
.return-confirm-button:active{transform:scale(.97)}
@media(max-height:420px) and (orientation:landscape){
  .return-confirm-panel{width:min(600px,90vw);padding:10px 18px 12px}
  .return-confirm-panel p{margin-bottom:9px;line-height:1.45}
  .return-confirm-emblem{margin-bottom:4px}
}

/* V45: distinct return arrow, aligned with the existing game controls. */
.return-menu-btn .return-arrow-icon{display:block;flex:none;width:26px;height:26px;margin:auto;filter:drop-shadow(0 0 4px rgba(175,230,255,.3))}


/* V46: boss phase. All values scale to desktop and landscape mobile. */
.boss-hud{position:absolute;z-index:13;right:max(12px,env(safe-area-inset-right));top:65px;
  width:clamp(132px,17vw,218px);padding:6px 9px 9px;border:1px solid rgba(255,224,138,.70);
  border-radius:13px;background:linear-gradient(180deg,rgba(9,18,43,.86),rgba(29,13,43,.90));
  box-shadow:0 0 14px rgba(253,126,49,.25),inset 0 0 15px rgba(255,255,255,.06);pointer-events:none}
.boss-hud img{display:block;width:100%;height:51px;object-fit:contain;filter:drop-shadow(0 1px 5px #000)}
.boss-hp-track{height:13px;border:2px solid rgba(255,237,185,.82);border-radius:10px;background:rgba(25,4,13,.84);
  overflow:hidden;box-shadow:0 0 6px rgba(255,183,93,.26)}
.boss-hp-fill{height:100%;width:100%;border-radius:8px;transition:width .09s linear,background .14s ease;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.3)}
.boss-intro{position:absolute;inset:0;z-index:16;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(14,9,45,.4),rgba(0,0,0,0) 65%)}
.boss-intro img{width:min(73vw,770px);max-height:43vh;object-fit:contain;filter:drop-shadow(0 0 21px rgba(255,250,190,.62));
  animation:bossTitleAppear 2.7s ease-in-out both}
@keyframes bossTitleAppear{0%{opacity:0;transform:scale(.65)}16%{opacity:1;transform:scale(1.03)}
  37%{opacity:1;transform:scale(1)}76%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.13)}}

.victory-screen{position:absolute;inset:0;z-index:36;display:grid;place-items:center;
  padding:14px;background:radial-gradient(ellipse at center,rgba(5,18,44,.52),rgba(0,5,17,.78));backdrop-filter:blur(7px)}
.victory-screen[hidden]{display:none}
.victory-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  width:min(760px,94vw);max-height:94vh;padding:24px 26px 18px;overflow:auto;color:#f8fdff;
  border:2px solid rgba(156,225,255,.72);border-radius:24px;
  background:linear-gradient(180deg,rgba(8,27,58,.93),rgba(4,15,36,.96));
  box-shadow:0 0 44px rgba(69,167,255,.32),inset 0 0 28px rgba(255,255,255,.08)}
.victory-screen:not([hidden]) .victory-card{animation:victoryCardIntro .52s cubic-bezier(.16,1,.3,1) both}
@keyframes victoryCardIntro{from{opacity:0;transform:translateY(22px) scale(.965)}to{opacity:1;transform:translateY(0) scale(1)}}
.victory-logo{display:block;width:min(360px,74vw);height:auto;max-height:20vh;object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(103,198,255,.36));animation:logoPulse 3.1s ease-in-out infinite}
.victory-headline{font:900 clamp(12px,1.35vw,16px)/1.2 Tahoma,Arial,sans-serif;letter-spacing:.18em;color:#9dd8ff;
  text-transform:uppercase;opacity:.95}
.victory-medal{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:radial-gradient(circle,#ffe598,#daa530 62%,#7b4d00 100%);color:#7a4c00;
  font-size:30px;box-shadow:0 0 26px rgba(255,205,74,.34)}
.victory-card h2{margin:0;color:#ffffff;font-size:clamp(23px,3.3vw,39px);line-height:1.24;
  text-shadow:0 0 18px rgba(114,206,255,.24)}
.victory-card p{margin:0;font-size:clamp(14px,1.7vw,19px);line-height:1.6;color:#d7edff}
.victory-story{max-width:min(640px,92%);padding:8px 16px;border-radius:14px;
  background:linear-gradient(180deg,rgba(14,38,73,.72),rgba(7,22,44,.64));border:1px solid rgba(136,205,255,.18)}
.victory-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:640px}
.victory-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:104px;
  padding:14px 16px;border-radius:18px;border:1px solid rgba(145,215,255,.22);
  background:linear-gradient(180deg,rgba(240,248,255,.08),rgba(53,105,164,.08))}
.victory-stat span{font-size:clamp(13px,1.45vw,17px);color:#c9e9ff}
.victory-stat strong{font-size:clamp(26px,3vw,42px);color:#ffd671;text-shadow:0 0 18px rgba(255,212,90,.18)}
.victory-stat-wide{grid-column:1/-1;min-height:92px}
.victory-stat-wide strong{font-size:clamp(20px,2.4vw,28px);color:#93f0ff}
.victory-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.victory-actions button{font-family:inherit;font-size:clamp(15px,1.75vw,21px);font-weight:900;color:white;
  border:2px solid rgba(255,255,255,.75);border-radius:16px;padding:12px 22px;cursor:pointer;
  background:linear-gradient(180deg,#e2ba49,#b97b11);box-shadow:0 6px 18px rgba(219,155,32,.24)}
.victory-actions button+button{background:linear-gradient(180deg,#3ea5ff,#165ea7)}
.victory-footer{margin-top:2px;font-size:clamp(12px,1.45vw,16px);letter-spacing:.08em;color:#9ec9eb}
@media (max-height:520px) and (orientation:landscape){
 .boss-hud{top:46px;right:max(7px,env(safe-area-inset-right));width:clamp(96px,14vw,145px);padding:3px 6px 6px;border-radius:9px}
 .boss-hud img{height:28px}
 .boss-hp-track{height:9px}
 .boss-intro img{max-height:38vh;width:min(69vw,590px)}
 .victory-card{gap:6px;padding:12px 16px 10px;max-height:95vh}
 .victory-logo{max-height:18vh;width:min(220px,44vw)}
 .victory-medal{width:44px;height:44px;font-size:22px}
 .victory-stat{min-height:82px;padding:10px}
 .victory-actions button{padding:8px 14px}
}
@media (max-width:700px){
 .victory-card{width:min(96vw,760px);padding:20px 16px 16px}
 .victory-stats-grid{grid-template-columns:1fr}
 .victory-stat,.victory-stat-wide{grid-column:auto;min-height:78px}
}

/* ==========================================================
   V47 — Pilot carousel, dedicated hall of fame, compact settings
   ========================================================== */
.menu-screen{isolation:isolate}
.menu-panel{
  width:100%;height:100%;min-height:0;overflow:auto;
  display:grid;direction:ltr;
  grid-template-columns:minmax(0,1.18fr) minmax(235px,.82fr);
  grid-template-rows:auto auto auto;
  justify-items:center;align-content:center;align-items:center;
  gap:clamp(3px,1vh,9px) clamp(15px,2.7vw,40px);
  padding:clamp(8px,1.7vh,18px) clamp(52px,5.5vw,76px);
}
.menu-panel .logo-zone,.menu-panel .menu-buttons,.menu-panel .menu-footer{direction:rtl;grid-column:2;width:100%;max-width:410px;min-width:0}
.menu-panel .logo-zone{grid-row:1;gap:1px}
.menu-panel .eyebrow{font-size:clamp(7px,1.2vh,11px);letter-spacing:4px}
.menu-panel .logo-image{width:min(100%,380px);max-height:clamp(44px,13vh,112px);object-fit:contain}
.menu-panel .overlay-title{font-size:clamp(15px,2.8vh,27px);line-height:1.12}
.menu-panel .overlay-text{font-size:clamp(9px,1.65vh,12px);margin:1px 0;line-height:1.3}
.menu-panel .menu-buttons{grid-row:2;display:flex;gap:clamp(5px,1.2vh,11px)}
.menu-panel .menu-btn{min-height:clamp(34px,8.5vh,57px);font-size:clamp(14px,2.9vh,24px);border-radius:12px;gap:9px}
.menu-panel .btn-icon{font-size:clamp(15px,3.1vh,25px)}
.menu-panel .menu-footer{grid-row:3;margin-top:0;gap:2px}
.menu-panel .best-inline{padding:clamp(3px,.8vh,7px) 12px;font-size:clamp(10px,1.8vh,13px)}
.menu-panel .voice-hint{font-size:clamp(9px,1.65vh,12px)}
.pilot-select{grid-column:1;grid-row:1 / 4;position:relative;width:100%;height:min(86vh,570px);min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;direction:rtl;color:#fff;isolation:isolate}
.pilot-heading{display:flex;align-items:center;gap:clamp(6px,1vw,14px);width:86%;max-width:420px;justify-content:center;font-weight:1000;letter-spacing:.02em;font-size:clamp(13px,2.4vh,22px);text-shadow:0 2px 9px #071725,0 0 15px rgba(87,205,255,.72);white-space:nowrap}
.pilot-heading-line{flex:1;height:2px;background:linear-gradient(90deg,transparent,#89e9ff,transparent);box-shadow:0 0 9px #56d6ff}

.defeat-screen{background:radial-gradient(circle at 50% 24%,rgba(255,105,92,.2),rgba(0,0,0,.82) 60%)}
.defeat-card{background:linear-gradient(180deg,rgba(62,20,27,.96),rgba(16,7,12,.97));border-color:rgba(255,152,131,.42);box-shadow:0 28px 60px rgba(0,0,0,.42),0 0 0 1px rgba(255,143,120,.14) inset,0 0 40px rgba(255,95,71,.18)}
.defeat-card h2{color:#ffd2c4;text-shadow:0 0 18px rgba(255,122,99,.26)}
.defeat-card p{max-width:520px;margin-inline:auto;color:#ffe7df}
.defeat-mark{width:84px;height:84px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-size:42px;color:#fff2d7;background:radial-gradient(circle,#ff9c6f,#db4031 62%,#731818 100%);box-shadow:0 0 22px rgba(255,122,99,.28)}

.pilot-carousel{--pilot-accent:#6ad9ff;position:relative;width:100%;max-width:650px;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;touch-action:pan-y;outline-offset:-3px;cursor:grab}
.pilot-carousel:active{cursor:grabbing}
.pilot-carousel:focus-visible{outline:2px solid #9af2ff;border-radius:20px}
.pilot-stage{position:absolute;inset:1% 11% 0;isolation:isolate;pointer-events:none;overflow:visible;background:radial-gradient(ellipse at 50% 52%,rgba(73,171,239,.23),transparent 70%)}
.pilot-stage::before{content:"";position:absolute;inset:9% 9% 11%;border-radius:50%;border:1px solid rgba(186,239,255,.28);box-shadow:inset 0 0 25px rgba(74,167,255,.12),0 0 24px rgba(105,218,255,.1)}
.pilot-energy-ring{position:absolute;inset:13% 16% 18%;border-radius:50%;border:2px dashed rgba(125,226,255,.32);box-shadow:0 0 18px var(--pilot-accent);animation:pilotRing 25s linear infinite}
@keyframes pilotRing{to{transform:rotate(360deg)}}
.pilot-stage .pilot-ship{position:absolute;top:11%;left:54%;width:82%;height:56%;object-fit:contain;transform:translateX(-50%) rotate(-4deg);filter:drop-shadow(0 0 15px var(--pilot-accent)) drop-shadow(0 12px 15px rgba(0,23,53,.78));animation:pilotHover 4s ease-in-out infinite;user-select:none;opacity:.98}
.pilot-stage .pilot-portrait{position:absolute;right:1%;top:17%;width:auto;height:clamp(86px,31vh,208px);max-width:39%;object-fit:contain;border-radius:50%;filter:drop-shadow(0 2px 13px rgba(7,26,48,.65)) drop-shadow(0 0 10px var(--pilot-accent));animation:pilotPortraitHover 4s ease-in-out infinite;user-select:none;z-index:2}
.pilot-stage[data-pilot="duke"] .pilot-ship{left:50%;width:84%;height:58%;top:10%}
.pilot-stage[data-pilot="koji"] .pilot-ship{left:48%;width:78%;height:52%;top:14%;transform:translateX(-50%) rotate(-5deg)}
.pilot-stage[data-pilot="hikaru"] .pilot-ship{left:50%;width:72%;height:50%;top:12%;transform:translateX(-50%) rotate(-3deg)}
.pilot-stage[data-pilot="maria"] .pilot-ship{left:50%;width:75%;height:50%;top:13%;transform:translateX(-50%) rotate(-4deg)}
.pilot-stage .pilot-info{position:absolute;bottom:1%;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:clamp(1px,.4vh,5px);background:linear-gradient(90deg,transparent,rgba(4,30,66,.75) 16%,rgba(6,40,80,.86) 50%,rgba(4,30,66,.75) 84%,transparent);padding:clamp(3px,.8vh,9px) 6px;text-align:center;text-shadow:0 1px 5px rgba(0,0,0,.9);border-top:1px solid rgba(176,239,255,.38);border-bottom:1px solid rgba(176,239,255,.28)}
.pilot-number{font-size:clamp(8px,1.55vh,12px);font-weight:800;letter-spacing:2px;color:#c5edff}
.pilot-info strong{font-size:clamp(19px,4vh,34px);line-height:1;color:#fff6c5;text-shadow:0 0 12px rgba(251,216,96,.67),0 2px 5px #061729}
.pilot-info small{font-size:clamp(10px,1.85vh,14px);font-weight:900;color:#c4efff}
.pilot-arrow{position:absolute;z-index:3;top:40%;transform:translateY(-50%);width:clamp(29px,4vw,51px);height:clamp(39px,8vh,65px);display:grid;place-items:center;border-radius:12px;border:2px solid #b7efff;background:linear-gradient(165deg,rgba(111,203,255,.85),rgba(7,69,130,.94));box-shadow:0 0 15px rgba(113,219,255,.56),inset 0 0 12px rgba(255,255,255,.28);color:#fff;font-size:clamp(20px,3.7vh,33px);font-weight:900;text-shadow:0 2px 4px #123a67;cursor:pointer;transition:transform .15s,filter .15s}
.pilot-arrow:hover,.pilot-arrow:focus-visible{filter:brightness(1.22);transform:translateY(-50%) scale(1.05)}
.pilot-arrow:active{transform:translateY(-50%) scale(.94)}
.pilot-prev{right:0}.pilot-next{left:0}
.pilot-dots{display:flex;justify-content:center;gap:clamp(5px,1vw,12px);padding:2px 8px}
.pilot-dot{width:clamp(7px,1.7vh,11px);height:clamp(7px,1.7vh,11px);border-radius:50%;border:1px solid rgba(229,252,255,.92);background:rgba(17,68,112,.82);box-shadow:0 0 5px rgba(129,224,255,.5);cursor:pointer;transition:background .2s,width .2s}
.pilot-dot.is-current{width:clamp(21px,4vh,31px);border-radius:12px;background:#ffe48a;box-shadow:0 0 12px rgba(255,214,79,.76)}
.pilot-enter{animation:pilotEnter .28s ease-out}
@keyframes pilotEnter{from{opacity:.5;transform:translateY(6px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pilotHover{0%,100%{transform:translateX(-50%) translateY(0) rotate(-6deg)}50%{transform:translateX(-50%) translateY(-7px) rotate(-4deg)}}
@keyframes pilotPortraitHover{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.trophy-shortcut{position:absolute;z-index:2;left:clamp(4px,1.5vw,20px);bottom:clamp(8px,3vh,25px);display:flex;flex-direction:column;align-items:center;gap:2px;background:linear-gradient(150deg,rgba(255,247,212,.94),rgba(243,180,44,.96));border:2px solid #fff0ac;border-radius:14px;padding:clamp(4px,1vh,9px);color:#604012;box-shadow:0 0 16px rgba(255,220,101,.8),inset 0 1px 7px rgba(255,255,255,.8);cursor:pointer;transform:rotate(-4deg);transition:transform .18s,filter .18s}
.trophy-shortcut span{font-size:clamp(22px,4.7vh,39px);line-height:1.15;animation:trophyGlow 2.8s ease-in-out infinite}
.trophy-shortcut small{font-size:clamp(8px,1.6vh,12px);font-weight:900;white-space:nowrap}
.trophy-shortcut:hover,.trophy-shortcut:focus-visible{transform:rotate(0deg) scale(1.07);filter:brightness(1.08)}
@keyframes trophyGlow{0%,100%{filter:drop-shadow(0 0 3px rgba(255,255,255,.7))}50%{filter:drop-shadow(0 0 9px #fffdaf)}}
.scores-modal{position:absolute;z-index:9;inset:0;display:grid;place-items:center;background:rgba(2,15,30,.68);padding:clamp(8px,2vw,20px);backdrop-filter:blur(7px)}
.scores-card{position:relative;width:min(580px,92vw);max-height:min(91vh,620px);display:flex;flex-direction:column;gap:clamp(4px,1vh,10px);padding:clamp(12px,2.3vh,22px);overflow:hidden;border:3px solid #9fddff;border-radius:12px;background:linear-gradient(160deg,#1e70b2 0%,#0a4279 48%,#102d57 100%);box-shadow:0 0 0 4px rgba(7,39,74,.65),0 15px 60px rgba(0,0,0,.55),inset 0 1px 0 #ebfaff;color:#fff}
.scores-card::before{content:"";position:absolute;inset:7px;border:1px solid rgba(201,242,255,.3);border-radius:7px;pointer-events:none}
.scores-head{display:grid;grid-template-columns:40px 1fr 52px;gap:12px;align-items:center;text-align:center;position:relative;z-index:1;border-bottom:2px solid #68ceff;padding-bottom:clamp(6px,1vh,12px)}
.scores-head img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 0 7px #8ae7ff)}
.scores-head span{font-size:clamp(9px,1.7vh,13px);letter-spacing:3px;color:#bce9ff;font-weight:900}
.scores-head h2{font-size:clamp(19px,4vh,33px);line-height:1.05;margin:2px 0 0;color:#ffdf76;text-shadow:0 0 12px rgba(255,210,77,.38)}
.scores-close{width:38px;height:38px;border-radius:50%;border:2px solid #ffd477;background:linear-gradient(#ff986c,#e63829);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.scores-card .best-scores{position:relative;z-index:1;min-height:0;overflow:auto;padding:1px 4px;gap:clamp(4px,.9vh,9px)}
.scores-card .best-scores li{padding:clamp(5px,1vh,10px) 10px;gap:8px;border:1px solid #4f9dcb;background:linear-gradient(160deg,#104778,#0d315e);font-size:clamp(10px,1.8vh,14px);border-radius:8px}
.scores-card .best-rank{width:clamp(25px,5vh,42px);height:clamp(25px,5vh,42px);font-size:clamp(15px,3vh,24px);background:#f0bd45;color:#45330a;border:2px solid rgba(255,246,184,.9)}
.scores-card .best-scores li:nth-child(2) .best-rank{background:#d7e0eb;color:#34516b}
.scores-card .best-scores li:nth-child(3) .best-rank{background:#e5a670;color:#512f20}
.scores-card .best-meta strong{font-size:clamp(10px,2vh,16px);color:#fff}
.scores-card .best-meta small{font-size:clamp(8px,1.5vh,11px);color:#bad9f0}
.scores-card .best-score{font-size:clamp(15px,3vh,24px);color:#ffe278}
.scores-card .best-empty{padding:14px;text-align:center;color:#e3f4ff;font-size:clamp(11px,2vh,15px)}
.scores-footer{text-align:center;font-size:clamp(8px,1.5vh,12px);font-weight:900;letter-spacing:2px;color:#a5d2f1;border-top:1px solid rgba(165,223,255,.3);padding-top:clamp(4px,1vh,10px)}
/* Removing the record column makes settings substantially more spacious. */
.settings-theme-classic .settings-grid{grid-template-columns:minmax(0,1fr)!important}
.settings-theme-classic .settings-card{width:min(740px,93vw);max-height:min(88vh,610px);overflow:auto}
.settings-theme-classic .settings-main{width:100%}
.settings-theme-classic .settings-main .settings-section{padding:clamp(9px,1.7vh,16px)}
.settings-theme-classic .settings-header h2{font-size:clamp(25px,5vh,48px)}
.settings-theme-classic .difficulty-option span{min-height:clamp(39px,8vh,60px);font-size:clamp(14px,3vh,21px)}
.settings-theme-classic .audio-row{padding:clamp(7px,1.2vh,12px)}
.settings-theme-classic .toggle-card{min-height:clamp(42px,8vh,75px)}
.settings-theme-classic .settings-header{grid-template-columns:clamp(35px,8vh,60px) 1fr clamp(50px,12vh,98px);min-height:0}
.settings-theme-classic .settings-title-stack{min-height:clamp(43px,11vh,85px)}
.settings-theme-classic .settings-emblem{width:100%;max-height:clamp(44px,11vh,85px)}
.settings-theme-classic .close-settings{width:clamp(34px,8vh,59px);height:clamp(34px,8vh,59px);font-size:clamp(19px,5vh,32px);border-width:3px}
.settings-theme-classic .settings-bottom-bar{font-size:clamp(10px,2.2vh,16px);margin-top:2px;padding:clamp(4px,1vh,8px)}
@media(max-height:450px){
  .menu-panel{gap:2px 18px;padding:5px 55px}
  .pilot-select{height:87vh}
  .pilot-stage .pilot-portrait{height:clamp(70px,28vh,125px)}
  .pilot-stage .pilot-ship{top:12%;height:54%}
  .trophy-shortcut{left:5px;bottom:5px}
  .trophy-shortcut small{display:none}
  .settings-theme-classic .settings-card{max-height:94vh;padding:8px 12px}
  .settings-theme-classic .settings-header{padding-bottom:3px}
  .settings-theme-classic .settings-main{gap:5px}
  .settings-theme-classic .settings-bottom-bar{display:none}
}
@media(max-width:650px) and (orientation:portrait){
  .menu-panel{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;align-content:start;gap:8px;padding:14px 46px}
  .menu-panel .logo-zone{grid-column:1;grid-row:1}
  .pilot-select{grid-column:1;grid-row:2;height:min(42vh,360px)}
  .menu-panel .menu-buttons{grid-column:1;grid-row:3}
  .menu-panel .menu-footer{grid-column:1;grid-row:4}
  .trophy-shortcut{bottom:14px}
}
@media(prefers-reduced-motion:reduce){.pilot-energy-ring,.pilot-stage .pilot-ship,.pilot-stage .pilot-portrait,.trophy-shortcut span{animation:none!important}}

.pilot-number{direction:ltr;unicode-bidi:isolate}

/* ==========================================================
   V49 — Start screen inspired by user Photoshop mockup
   ========================================================== */
.menu-screen{
  background:#081d38;
}
.menu-backdrop{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(7,31,68,.14),rgba(2,12,28,.28)),
    radial-gradient(circle at 50% 0%,rgba(92,176,255,.22),transparent 38%),
    url("assets/menu-bg.webp") center center / cover no-repeat;
  filter:saturate(1.08) contrast(1.03);
}
.menu-screen::before{
  content:"";
  position:absolute;
  inset:auto auto 0 0;
  width:min(36vw,470px);
  height:min(54vh,430px);
  background:url("assets/grendizer.webp") left bottom / contain no-repeat;
  opacity:.24;
  filter:drop-shadow(0 0 18px rgba(115,214,255,.28));
  z-index:0;
  pointer-events:none;
}
.menu-screen::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,17,34,.12) 0%,rgba(5,17,34,0) 28%,rgba(5,17,34,0) 72%,rgba(5,17,34,.22) 100%),
    radial-gradient(circle at 78% 12%,rgba(255,255,255,.18),transparent 18%);
  z-index:0;
  pointer-events:none;
}

/* Support craft launch briefing */
.vehicle-briefing{--briefing-accent:#64deff;position:absolute;z-index:30;inset:0;overflow:hidden;background:radial-gradient(ellipse at 28% 43%,color-mix(in srgb,var(--briefing-accent) 22%,transparent),transparent 34%),linear-gradient(125deg,#020b1d,#061a38 54%,#020711);color:#f7fbff;direction:rtl}.vehicle-briefing[hidden]{display:none}.briefing-stars,.briefing-stars::before,.briefing-stars::after{position:absolute;inset:0;content:"";background-image:radial-gradient(circle,#fff 0 1px,transparent 1.6px);background-size:44px 44px;opacity:.37;animation:briefingDrift 24s linear infinite}.briefing-stars::before{background-size:71px 71px;opacity:.25;animation-duration:38s}.briefing-stars::after{background-size:105px 105px;opacity:.2;animation-duration:56s}.briefing-shell{position:relative;z-index:1;width:min(1180px,94vw);height:100%;margin:auto;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:clamp(8px,1.5vh,18px);padding:clamp(20px,4vh,48px) 0 clamp(16px,3vh,34px)}.briefing-skip{position:absolute;top:clamp(16px,3vh,36px);left:0;border:1px solid color-mix(in srgb,var(--briefing-accent) 70%,#fff);border-radius:999px;padding:8px 15px;background:#071b35bb;color:#e9f9ff;font:800 clamp(11px,1.6vh,15px) Tajawal,sans-serif;cursor:pointer}.briefing-head{text-align:right;padding-left:160px}.briefing-kicker{color:var(--briefing-accent);font:800 clamp(9px,1.7vh,14px) sans-serif;letter-spacing:.18em}.briefing-head h2{margin:4px 0 2px;font-size:clamp(30px,6.5vh,68px);line-height:1;text-shadow:0 0 20px color-mix(in srgb,var(--briefing-accent) 60%,transparent)}.briefing-head p{margin:0;max-width:720px;font-size:clamp(12px,2.1vh,19px);line-height:1.55;color:#d5e8f8}.briefing-main{display:grid;grid-template-columns:1fr minmax(190px,.42fr) minmax(210px,.48fr);align-items:center;gap:clamp(12px,2.5vw,34px);direction:ltr;min-height:0}.briefing-visual{position:relative;align-self:stretch;min-height:220px}.briefing-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 20px var(--briefing-accent)) drop-shadow(0 20px 22px #0009);animation:briefingShip 2.8s ease-in-out infinite}.briefing-radar{position:absolute;inset:8%;border:2px solid color-mix(in srgb,var(--briefing-accent) 70%,transparent);border-radius:50%;box-shadow:0 0 0 18px color-mix(in srgb,var(--briefing-accent) 8%,transparent),0 0 36px color-mix(in srgb,var(--briefing-accent) 48%,transparent);animation:briefingSpin 18s linear infinite}.briefing-pilot{direction:rtl;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.briefing-portrait-wrap{width:clamp(110px,18vh,188px);height:clamp(110px,18vh,188px);padding:5px;border-radius:50%;background:linear-gradient(135deg,#fff,var(--briefing-accent));box-shadow:0 0 30px color-mix(in srgb,var(--briefing-accent) 75%,transparent)}.briefing-portrait-wrap img{width:100%;height:100%;object-fit:contain;border-radius:50%;background:#071b35}.briefing-pilot span,.briefing-weapons>span{font-size:clamp(11px,1.7vh,15px);font-weight:900;color:var(--briefing-accent)}.briefing-pilot strong{display:block;font-size:clamp(22px,3.6vh,37px);color:#fff4b5}.briefing-pilot small{font-weight:800;color:#c9def1}.briefing-specs{direction:rtl;display:grid;grid-template-columns:1fr 1fr;gap:8px}.briefing-specs div{padding:10px 12px;border:1px solid #bceeff38;border-radius:10px;background:#0b2b5180}.briefing-specs span{display:block;font-size:11px;color:#aed0e9}.briefing-specs strong{font-size:clamp(14px,2.3vh,20px);color:#fff}.briefing-weapons{border-top:1px solid color-mix(in srgb,var(--briefing-accent) 65%,transparent);padding-top:8px}.briefing-weapons>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}.briefing-weapons article{padding:8px 10px;border-radius:9px;background:linear-gradient(135deg,#0d345db0,#06162ec4);border-inline-start:3px solid var(--briefing-accent)}.briefing-weapons strong{display:block;font-size:clamp(12px,1.8vh,16px);color:#fff4bf}.briefing-weapons small{font-size:clamp(9px,1.45vh,13px);line-height:1.3;color:#c5e0f2}.briefing-launch{justify-self:center;min-width:min(310px,78vw);padding:12px 28px;border:2px solid #fff0a8;border-radius:12px;background:linear-gradient(135deg,#f2aa31,#c95018);box-shadow:0 0 20px #ffae3673;color:#fff;font:1000 clamp(16px,2.5vh,24px) Tajawal,sans-serif;cursor:pointer}.briefing-launch:hover{filter:brightness(1.12);transform:scale(1.02)}@keyframes briefingShip{0%,100%{transform:translateY(-4px) rotate(-2deg)}50%{transform:translateY(6px) rotate(2deg)}}@keyframes briefingSpin{to{transform:rotate(360deg)}}@keyframes briefingDrift{to{transform:translateX(-55px)}}@media(max-width:700px),(max-height:600px){.briefing-shell{width:92vw;gap:5px;padding:12px 0}.briefing-skip{top:10px;padding:5px 9px}.briefing-head{padding-left:90px}.briefing-head h2{font-size:clamp(23px,6.3vh,38px)}.briefing-head p{font-size:clamp(10px,1.8vh,13px);line-height:1.35}.briefing-main{grid-template-columns:1.15fr .75fr;grid-template-rows:minmax(0,1fr) auto;gap:4px 10px}.briefing-visual{min-height:110px}.briefing-pilot{grid-column:2;grid-row:1}.briefing-portrait-wrap{width:clamp(70px,15vh,105px);height:clamp(70px,15vh,105px)}.briefing-pilot strong{font-size:clamp(16px,3vh,22px)}.briefing-pilot small{font-size:10px}.briefing-specs{grid-column:1/3;grid-template-columns:repeat(4,1fr);gap:4px}.briefing-specs div{padding:4px 5px;text-align:center}.briefing-specs span{font-size:8px}.briefing-specs strong{font-size:11px}.briefing-weapons{padding-top:4px}.briefing-weapons>span{font-size:10px}.briefing-weapons>div{gap:4px;margin-top:3px}.briefing-weapons article{padding:4px 5px}.briefing-weapons strong{font-size:10px}.briefing-weapons small{display:none}.briefing-launch{min-width:200px;padding:7px 14px;font-size:15px}}

.menu-panel{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:minmax(420px,1.14fr) minmax(300px,.86fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  align-items:center;
  align-content:stretch;
  justify-items:stretch;
  gap:clamp(10px,2.2vh,22px) clamp(18px,3vw,42px);
  padding:clamp(18px,3vh,32px) clamp(46px,5vw,72px) clamp(22px,3.2vh,36px);
  overflow:hidden;
}
.menu-panel .logo-zone,
.menu-panel .menu-buttons,
.menu-panel .menu-footer{
  grid-column:2;
  direction:rtl;
  width:100%;
  max-width:none;
}
.menu-panel .logo-zone{
  grid-column:1 / -1;
  grid-row:1;
  position:relative;
  display:grid;
  justify-items:center;
  align-items:start;
  min-height:120px;
  padding-top:4px;
  gap:4px;
  text-align:center;
}
.menu-panel .eyebrow{
  font-size:clamp(10px,1.5vh,14px);
  letter-spacing:4px;
  color:rgba(236,246,255,.92);
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}
.menu-panel .logo-image{
  width:min(42vw,560px);
  max-width:100%;
  max-height:clamp(86px,24vh,210px);
  object-fit:contain;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.38)) drop-shadow(0 0 18px rgba(139,223,255,.12));
}
.menu-panel .overlay-title,
.menu-panel .overlay-text{
  position:absolute;
  right:0;
  width:min(26vw,360px);
  margin:0;
  text-align:right;
  text-shadow:0 2px 10px rgba(0,0,0,.58);
}
.menu-panel .overlay-title{
  top:calc(100% - 28px);
  font-size:clamp(26px,5.2vh,44px);
  color:#ffffff;
  line-height:1.05;
}
.menu-panel .overlay-text{
  top:calc(100% + 18px);
  font-size:clamp(12px,1.8vh,16px);
  color:#f1fbff;
  line-height:1.45;
  opacity:.95;
}

.pilot-select{
  grid-column:1;
  grid-row:2 / 4;
  position:relative;
  height:min(62vh,520px);
  min-height:360px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-items:stretch;
  gap:10px;
  padding:18px 18px 8px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(16,70,125,.23),rgba(7,26,55,.16));
  border:1px solid rgba(178,235,255,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 14px 45px rgba(0,0,0,.18);
  backdrop-filter:blur(4px);
}
.pilot-select::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.16));
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}
.pilot-heading{
  width:auto;
  max-width:none;
  justify-content:center;
  gap:14px;
  font-size:clamp(22px,3.6vh,40px);
  color:rgba(241,248,255,.92);
  text-shadow:0 3px 10px rgba(0,0,0,.4);
}
.pilot-heading-line{
  min-width:40px;
  max-width:88px;
  flex:0 0 68px;
  height:3px;
  background:linear-gradient(90deg,transparent,#b8efff,transparent);
}
.pilot-carousel{
  width:100%;
  max-width:none;
  min-height:0;
}
.pilot-stage{
  position:relative;
  inset:auto;
  width:100%;
  height:100%;
  border-radius:24px;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(89,187,255,.08),rgba(17,47,86,.10)),
    radial-gradient(circle at 26% 58%,rgba(74,176,255,.26),transparent 34%),
    linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,0));
}
.pilot-stage::before{
  inset:7% 6% 14%;
  border-radius:30px;
  border:1px solid rgba(186,239,255,.18);
  box-shadow:inset 0 0 30px rgba(74,167,255,.10),0 0 20px rgba(105,218,255,.08);
}
.pilot-energy-ring{
  inset:11% 15% 16%;
  opacity:.45;
}
.pilot-stage .pilot-ship{
  left:34%;
  top:11%;
  width:74%;
  height:66%;
  object-position:center;
  transform:translateX(-50%) rotate(-8deg);
  filter:drop-shadow(0 16px 18px rgba(0,11,28,.55)) drop-shadow(0 0 16px var(--pilot-accent));
}
.pilot-stage .pilot-portrait{
  right:7%;
  left:auto;
  top:auto;
  bottom:11%;
  height:46%;
  max-width:40%;
  padding:6px;
  border:7px solid rgba(255,255,255,.94);
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.18),rgba(14,48,84,.34));
  box-shadow:0 18px 28px rgba(0,0,0,.25),0 0 0 5px rgba(75,175,255,.12);
}
.pilot-stage[data-pilot="duke"] .pilot-ship{left:31%;width:80%;height:73%;top:8%;transform:translateX(-50%) rotate(-10deg)}
.pilot-stage[data-pilot="koji"] .pilot-ship{left:31%;width:69%;height:60%;top:15%;transform:translateX(-50%) rotate(-8deg)}
.pilot-stage[data-pilot="hikaru"] .pilot-ship{left:31%;width:66%;height:60%;top:14%;transform:translateX(-50%) rotate(-6deg)}
.pilot-stage[data-pilot="maria"] .pilot-ship{left:31%;width:67%;height:61%;top:14%;transform:translateX(-50%) rotate(-8deg)}
.pilot-stage .pilot-info{
  left:0;
  right:0;
  bottom:4px;
  padding:10px 16px 14px;
  gap:1px;
  align-items:center;
  background:linear-gradient(180deg,transparent,rgba(4,20,42,.28) 12%,rgba(4,24,48,.74) 58%,rgba(5,27,54,.92));
  border:none;
  text-align:center;
}
.pilot-number{font-size:clamp(14px,2.2vh,18px);letter-spacing:2px;color:#d8efff}
.pilot-info strong{font-size:clamp(33px,5.1vh,56px);line-height:1;color:#fff3b0;text-shadow:0 0 18px rgba(255,220,107,.40),0 2px 4px rgba(0,0,0,.42)}
.pilot-info small{font-size:clamp(16px,2.5vh,24px);color:#d8f6ff}
.pilot-arrow{
  top:50%;
  width:clamp(40px,5.2vw,56px);
  height:clamp(58px,11vh,76px);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(117,206,255,.96),rgba(35,103,189,.96));
  border:2px solid rgba(234,251,255,.84);
}
.pilot-prev{right:6px}
.pilot-next{left:6px}
.pilot-dots{padding:0 8px 2px;gap:10px}
.pilot-dot{width:10px;height:10px;background:rgba(111,199,255,.42)}
.pilot-dot.is-current{width:34px;background:#7dcaff}

.menu-panel .menu-buttons{
  grid-row:2;
  align-self:center;
  justify-self:end;
  max-width:430px;
  display:flex;
  gap:14px;
  padding:8px 0 0;
}
.menu-panel .menu-btn{
  min-height:70px;
  font-size:clamp(22px,4vh,34px);
  font-weight:1000;
  border-radius:16px;
  gap:12px;
  box-shadow:0 12px 18px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.34);
}
.menu-panel .btn-icon{font-size:clamp(22px,4vh,30px)}
.menu-panel .menu-footer{
  grid-row:3;
  align-self:end;
  justify-self:end;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  padding:0 8px 4px 0;
  text-align:right;
}
.menu-panel .best-inline{
  padding:0;
  border:none;
  background:none;
  font-size:clamp(22px,3.4vh,34px);
  font-weight:1000;
  color:#f8fbff;
  text-shadow:0 2px 8px rgba(0,0,0,.48);
}
.menu-panel .best-inline strong{color:#ffe86d}
.menu-panel .voice-hint{font-size:clamp(14px,2.1vh,18px);color:#ffdf7a;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.trophy-shortcut{
  left:18px;
  bottom:18px;
  padding:10px 12px;
  border-radius:18px;
  transform:none;
}
.trophy-shortcut small{font-size:clamp(12px,1.9vh,15px)}

@media (max-width:1100px){
  .menu-panel{
    grid-template-columns:minmax(320px,1fr) minmax(280px,.9fr);
    padding-inline:24px;
  }
  .menu-panel .logo-image{width:min(54vw,520px)}
  .menu-panel .overlay-title,.menu-panel .overlay-text{width:min(30vw,300px)}
  .pilot-stage .pilot-portrait{height:42%}
}

@media (max-width:820px), (max-height:520px){
  .menu-panel{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    gap:10px;
    padding:14px 18px 20px;
    overflow:auto;
  }
  .menu-panel .logo-zone,
  .menu-panel .menu-buttons,
  .menu-panel .menu-footer,
  .pilot-select{
    grid-column:1;
    justify-self:stretch;
  }
  .menu-panel .logo-zone{grid-row:1;min-height:unset;padding-top:2px}
  .menu-panel .logo-image{width:min(86vw,520px);max-height:130px}
  .menu-panel .overlay-title,
  .menu-panel .overlay-text{
    position:static;
    width:auto;
    text-align:center;
  }
  .menu-panel .overlay-title{font-size:28px}
  .menu-panel .overlay-text{font-size:13px}
  .pilot-select{grid-row:2;height:min(56vh,460px);min-height:320px}
  .menu-panel .menu-buttons{grid-row:3;max-width:none;padding-top:0}
  .menu-panel .menu-btn{min-height:60px;font-size:24px}
  .menu-panel .menu-footer{grid-row:4;align-items:center;text-align:center;padding:0}
  .menu-panel .best-inline{font-size:20px}
  .menu-panel .voice-hint{font-size:14px}
  .menu-screen::before{opacity:.14;width:42vw;height:28vh}
}

/* ==========================================================
   V50 — wider left presentation, circular glow only, new background
   ========================================================== */
.menu-backdrop{
  background:
    linear-gradient(180deg,rgba(7,31,68,.10),rgba(2,12,28,.24)),
    radial-gradient(circle at 50% 0%,rgba(92,176,255,.18),transparent 40%),
    url("assets/menu-bg.webp") center center / cover no-repeat;
}
.menu-screen::before{
  display:none;
}
.menu-panel{
  grid-template-columns:minmax(520px,1.3fr) minmax(300px,.7fr);
  gap:clamp(10px,2vh,20px) clamp(18px,3vw,36px);
}
.menu-panel .logo-zone{
  min-height:110px;
}
.pilot-select{
  background:none;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  padding:4px 8px 2px;
  min-height:420px;
  height:min(66vh,560px);
}
.pilot-select::before{display:none}
.pilot-heading{
  justify-content:flex-start;
  width:100%;
  padding-inline:50px 40px;
  font-size:clamp(22px,3.5vh,38px);
}
.pilot-heading-line{
  display:none;
}
.pilot-carousel{
  overflow:visible;
}
.pilot-stage{
  background:none;
  border-radius:0;
  overflow:visible;
}
.pilot-stage::before{display:none}
.pilot-energy-ring{
  inset:auto;
  right:11%;
  bottom:10%;
  width:min(28vw,320px);
  height:min(28vw,320px);
  border:4px solid rgba(255,255,255,.92);
  box-shadow:0 0 0 7px rgba(92,192,255,.16),0 0 30px var(--pilot-accent), inset 0 0 28px rgba(255,255,255,.10);
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.16),rgba(37,110,186,.12) 55%,rgba(255,255,255,0) 70%);
  opacity:1;
  animation:pilotRingGlow 5s ease-in-out infinite;
}
@keyframes pilotRingGlow{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 10px rgba(154,230,255,.65))}
  50%{transform:scale(1.04);filter:drop-shadow(0 0 22px rgba(154,230,255,.95))}
}
.pilot-stage .pilot-ship{
  left:34%;
  top:4%;
  width:82%;
  height:78%;
  filter:drop-shadow(0 22px 22px rgba(0,11,28,.52)) drop-shadow(0 0 22px rgba(121,220,255,.34));
}
.pilot-stage .pilot-portrait{
  right:12%;
  bottom:13%;
  height:48%;
  max-width:34%;
  border-radius:50%;
  border:7px solid rgba(255,255,255,.96);
  background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.18),rgba(22,67,112,.25));
  box-shadow:0 18px 30px rgba(0,0,0,.22),0 0 0 7px rgba(79,173,255,.14);
  z-index:2;
}
.pilot-stage[data-pilot="duke"] .pilot-ship{left:32%;top:1%;width:86%;height:84%;transform:translateX(-50%) rotate(-10deg)}
.pilot-stage[data-pilot="koji"] .pilot-ship{left:31%;top:11%;width:78%;height:69%;transform:translateX(-50%) rotate(-8deg)}
.pilot-stage[data-pilot="hikaru"] .pilot-ship{left:31%;top:11%;width:76%;height:70%;transform:translateX(-50%) rotate(-6deg)}
.pilot-stage[data-pilot="maria"] .pilot-ship{left:31%;top:11%;width:77%;height:70%;transform:translateX(-50%) rotate(-8deg)}
.pilot-stage .pilot-info{
  bottom:0;
  right:0;
  left:0;
  width:100%;
  background:linear-gradient(180deg,transparent,rgba(4,24,48,.18) 10%,rgba(4,24,48,.66) 52%,rgba(5,27,54,.84));
  padding:10px 10px 10px;
}
.pilot-number{font-size:clamp(16px,2.4vh,21px)}
.pilot-info strong{font-size:clamp(34px,5.4vh,62px)}
.pilot-info small{font-size:clamp(18px,2.7vh,26px)}
.pilot-arrow{
  top:55%;
  background:linear-gradient(180deg,rgba(119,210,255,.98),rgba(40,108,192,.98));
}
.pilot-prev{right:14px}
.pilot-next{left:14px}
.menu-panel .menu-buttons{
  align-self:center;
  padding-top:20px;
}
@media (max-width:1100px){
  .menu-panel{grid-template-columns:minmax(420px,1.12fr) minmax(280px,.78fr)}
  .pilot-stage .pilot-portrait{right:8%;height:44%;max-width:36%}
  .pilot-energy-ring{right:7%;width:min(30vw,250px);height:min(30vw,250px)}
}
@media (max-width:820px), (max-height:520px){
  .pilot-select{height:min(58vh,460px);min-height:300px;padding:4px 0}
  .pilot-heading{justify-content:center;padding:0;font-size:28px}
  .pilot-stage .pilot-ship{left:36%;width:80%;height:72%}
  .pilot-stage .pilot-portrait{right:8%;bottom:14%;height:40%;max-width:34%}
  .pilot-energy-ring{right:4%;bottom:15%;width:min(34vw,180px);height:min(34vw,180px);border-width:3px;box-shadow:0 0 0 5px rgba(92,192,255,.16),0 0 24px var(--pilot-accent)}
}

/* ==========================================================
   V51 — cleanup pilot area per user markup
   ========================================================== */
.menu-panel{
  grid-template-columns:minmax(610px,1.42fr) minmax(310px,.62fr);
  gap:clamp(8px,1.4vh,16px) clamp(12px,2.2vw,24px);
  padding:clamp(18px,3vh,28px) clamp(34px,4vw,58px) clamp(18px,2.6vh,28px);
}
.menu-panel .logo-zone{
  min-height:95px;
}
.menu-panel .logo-image{
  width:min(42vw,520px);
  max-height:clamp(90px,22vh,190px);
}
.menu-panel .overlay-title,
.menu-panel .overlay-text{
  width:min(25vw,330px);
}
.pilot-select{
  height:min(68vh,590px);
  min-height:430px;
  padding:0;
  transform:translate(34px,-22px);
}
.pilot-heading{
  padding-inline:46px 0;
  margin-bottom:2px;
  font-size:clamp(24px,3.8vh,42px);
}
.pilot-carousel{
  min-height:0;
  height:100%;
}
.pilot-stage{
  height:100%;
}
.pilot-energy-ring{
  left:4%;
  right:auto;
  bottom:7%;
  width:min(42vw,500px);
  height:min(42vw,500px);
  border-width:5px;
  box-shadow:0 0 0 8px rgba(92,192,255,.12),0 0 34px var(--pilot-accent),inset 0 0 26px rgba(255,255,255,.08);
}
.pilot-stage .pilot-ship{
  left:42%;
  top:6%;
  width:88%;
  height:80%;
  object-position:center;
}
.pilot-stage .pilot-portrait{
  right:20%;
  bottom:20%;
  height:21%;
  max-width:20%;
  padding:0;
  border:none;
  background:none;
  border-radius:50%;
  box-shadow:0 0 18px rgba(102,208,255,.35),0 10px 18px rgba(0,0,0,.20);
  filter:drop-shadow(0 0 10px var(--pilot-accent)) drop-shadow(0 4px 9px rgba(0,0,0,.28));
}
.pilot-stage[data-pilot="duke"] .pilot-ship{left:40%;top:0%;width:91%;height:85%;transform:translateX(-50%) rotate(-10deg)}
.pilot-stage[data-pilot="koji"] .pilot-ship{left:41%;top:9%;width:82%;height:70%;transform:translateX(-50%) rotate(-8deg)}
.pilot-stage[data-pilot="hikaru"] .pilot-ship{left:42%;top:8%;width:81%;height:71%;transform:translateX(-50%) rotate(-6deg)}
.pilot-stage[data-pilot="maria"] .pilot-ship{left:42%;top:8%;width:82%;height:71%;transform:translateX(-50%) rotate(-8deg)}
.pilot-stage .pilot-info{
  bottom:10px;
  left:0;
  right:0;
  width:100%;
  padding:6px 14px 0;
  background:none;
  box-shadow:none;
  border:none;
}
.pilot-number{font-size:clamp(17px,2.5vh,22px);margin-bottom:2px}
.pilot-info strong{font-size:clamp(38px,5.8vh,68px);line-height:.98}
.pilot-info small{font-size:clamp(20px,3vh,28px)}
.pilot-arrow{
  top:53%;
  width:clamp(28px,3.5vw,40px);
  height:clamp(48px,8vh,64px);
  font-size:clamp(24px,3.5vh,32px);
  border-radius:12px;
}
.pilot-prev{left:7%;right:auto}
.pilot-next{right:8%;left:auto}
.pilot-dots{
  margin-top:2px;
}
.menu-panel .menu-buttons{
  padding-top:0;
  align-self:center;
}
.menu-panel .menu-btn{
  min-height:76px;
  font-size:clamp(24px,4.2vh,38px);
}
.menu-panel .menu-footer{
  padding-right:2px;
}
@media (max-width:1100px){
  .menu-panel{grid-template-columns:minmax(440px,1.18fr) minmax(290px,.72fr)}
  .pilot-select{transform:translate(16px,-14px);min-height:380px}
  .pilot-energy-ring{width:min(42vw,390px);height:min(42vw,390px)}
  .pilot-stage .pilot-portrait{right:18%;bottom:22%;height:18%;max-width:20%}
  .pilot-prev{left:5%}
  .pilot-next{right:6%}
}
@media (max-width:820px), (max-height:520px){
  .pilot-select{transform:none;height:min(58vh,470px);min-height:310px}
  .pilot-heading{padding:0;justify-content:center;font-size:28px}
  .pilot-energy-ring{left:12%;bottom:11%;width:min(58vw,290px);height:min(58vw,290px);border-width:4px}
  .pilot-stage .pilot-ship{left:43%;width:86%;height:73%}
  .pilot-stage .pilot-portrait{right:21%;bottom:22%;height:18%;max-width:18%}
  .pilot-prev{left:10px}
  .pilot-next{right:10px}
  .pilot-info strong{font-size:40px}
  .pilot-info small{font-size:18px}
}

/* ==========================================================
   V53 — menu layout matched closely to Photoshop mockup
   ========================================================== */
.menu-screen::before,.menu-screen::after{display:none!important}
.menu-backdrop{
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(180deg,rgba(10,25,52,.06),rgba(4,10,22,.18)),
    url("assets/menu-bg.webp") center center / cover no-repeat!important;
  filter:none!important;
}

.menu-panel{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  padding:0!important;
  overflow:hidden!important;
  width:100%!important;
  height:100%!important;
}
.menu-panel .logo-zone,
.menu-panel .menu-buttons,
.menu-panel .menu-footer,
.pilot-select{direction:rtl}
.menu-panel .logo-zone{
  position:absolute!important;
  top:18px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:min(54vw,760px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:2px!important;
  z-index:2;
}
.menu-panel .eyebrow{
  display:block!important;
  font-size:clamp(10px,1.2vw,16px)!important;
  font-weight:1000;
  letter-spacing:6px;
  color:#eef7ff;
  text-shadow:0 2px 7px rgba(0,0,0,.3);
}
.menu-panel .logo-image{
  width:100%!important;
  max-height:280px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.12)) drop-shadow(0 8px 18px rgba(0,0,0,.08));
}
.menu-panel .overlay-title,
.menu-panel .overlay-text{
  position:absolute!important;
  right:86px!important;
  width:min(29vw,430px)!important;
  text-align:right!important;
  margin:0!important;
  color:#fff!important;
  text-shadow:0 2px 10px rgba(0,0,0,.42);
  z-index:2;
}
.menu-panel .overlay-title{
  top:210px!important;
  font-size:clamp(36px,3.7vw,62px)!important;
  line-height:1.05!important;
  font-weight:1000;
}
.menu-panel .overlay-text{
  top:268px!important;
  font-size:clamp(15px,1.25vw,23px)!important;
  line-height:1.3!important;
}

.pilot-select{
  position:absolute!important;
  left:16px!important;
  top:170px!important;
  width:min(62vw,875px)!important;
  height:min(71vh,620px)!important;
  min-height:470px!important;
  padding:0!important;
  background:none!important;
  border:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  z-index:2;
}
.pilot-select::before{display:none!important}
.pilot-heading{
  position:absolute!important;
  top:86px!important;
  left:350px!important;
  width:auto!important;
  max-width:none!important;
  justify-content:center!important;
  font-size:clamp(28px,2.7vw,50px)!important;
  font-weight:1000!important;
  color:#fff!important;
  text-shadow:0 2px 8px rgba(0,0,0,.38);
  white-space:nowrap;
  z-index:4;
}
.pilot-heading-line{display:none!important}
.pilot-carousel{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  overflow:visible!important;
  cursor:default!important;
}
.pilot-stage,
.pilot-stage::before{background:none!important;border:none!important;box-shadow:none!important}
.pilot-stage{
  position:absolute!important;
  inset:0!important;
  overflow:visible!important;
}
.pilot-energy-ring,
.pilot-stage .pilot-info,
.pilot-dots{display:none!important}
.pilot-stage .pilot-ship{
  position:absolute!important;
  left:12px!important;
  top:140px!important;
  width:min(56vw,700px)!important;
  height:min(48vh,370px)!important;
  object-fit:contain!important;
  object-position:left center!important;
  transform:rotate(-8deg)!important;
  transform-origin:center center!important;
  filter:drop-shadow(-18px 18px 18px rgba(0,0,0,.38)) drop-shadow(0 8px 14px rgba(0,0,0,.22))!important;
  animation:pilotShipFloat 4.8s ease-in-out infinite;
}
.pilot-stage[data-pilot="duke"] .pilot-ship{left:-8px!important;top:115px!important;width:min(59vw,735px)!important;height:min(53vh,420px)!important;transform:rotate(-8deg)!important}
.pilot-stage[data-pilot="koji"] .pilot-ship{left:20px!important;top:145px!important;width:min(50vw,625px)!important;height:min(45vh,330px)!important;transform:rotate(-8deg)!important}
.pilot-stage[data-pilot="hikaru"] .pilot-ship{left:26px!important;top:136px!important;width:min(49vw,610px)!important;height:min(44vh,320px)!important;transform:rotate(-6deg)!important}
.pilot-stage[data-pilot="maria"] .pilot-ship{left:16px!important;top:138px!important;width:min(50vw,620px)!important;height:min(45vh,330px)!important;transform:rotate(-8deg)!important}
.pilot-stage .pilot-portrait{
  position:absolute!important;
  left:min(42vw,575px)!important;
  top:300px!important;
  width:min(22vw,320px)!important;
  height:min(22vw,320px)!important;
  max-width:none!important;
  object-fit:cover!important;
  padding:0!important;
  border:8px solid #fff!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.05)!important;
  box-shadow:0 14px 26px rgba(0,0,0,.28),0 0 0 5px rgba(255,255,255,.06)!important;
  filter:none!important;
  z-index:3!important;
  animation:pilotPortraitFloat 4.8s ease-in-out infinite;
}
.pilot-arrow{
  position:absolute!important;
  bottom:58px!important;
  top:auto!important;
  width:82px!important;
  height:104px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:10px!important;
  border:2px solid rgba(232,247,255,.94)!important;
  background:linear-gradient(180deg,#95d9ff,#5097de)!important;
  box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.42)!important;
  color:#fff!important;
  font-size:58px!important;
  font-weight:900!important;
  line-height:1!important;
  text-shadow:0 2px 4px rgba(0,0,0,.24)!important;
  z-index:4!important;
}
.pilot-prev{left:286px!important;right:auto!important}
.pilot-next{left:495px!important;right:auto!important}
.pilot-arrow:hover,.pilot-arrow:focus-visible{transform:scale(1.03)!important;filter:brightness(1.05)!important}
.pilot-arrow:active{transform:scale(.97)!important}

.menu-panel .menu-buttons{
  position:absolute!important;
  right:92px!important;
  top:352px!important;
  width:min(30vw,390px)!important;
  max-width:390px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:18px!important;
  z-index:2;
}
.menu-panel .menu-btn{
  min-height:84px!important;
  font-size:clamp(24px,3vw,42px)!important;
  font-weight:1000!important;
  border-radius:18px!important;
  gap:12px!important;
  box-shadow:0 12px 18px rgba(0,0,0,.17), inset 0 2px 0 rgba(255,255,255,.34)!important;
}
.menu-panel .btn-icon{font-size:clamp(20px,2.3vw,31px)!important}

.menu-panel .menu-footer{
  position:absolute!important;
  right:74px!important;
  bottom:35px!important;
  width:min(38vw,520px)!important;
  padding:12px 18px 14px!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,rgba(117,130,153,.34),rgba(62,80,101,.22))!important;
  backdrop-filter:blur(3px)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;
  z-index:2;
  gap:4px!important;
  align-items:flex-start!important;
  text-align:right!important;
}
.menu-panel .best-inline{
  background:none!important;
  border:none!important;
  padding:0!important;
  margin:0!important;
  font-size:clamp(34px,3.9vw,64px)!important;
  font-weight:1000!important;
  color:#fff!important;
  text-shadow:0 2px 10px rgba(0,0,0,.34)!important;
}
.menu-panel .best-inline strong{color:#ffe66d!important}
.menu-panel .voice-hint{
  font-size:clamp(14px,1.4vw,24px)!important;
  color:#f0d674!important;
  text-shadow:0 2px 7px rgba(0,0,0,.28)!important;
}
.trophy-shortcut{
  left:18px!important;
  bottom:18px!important;
  transform:none!important;
  z-index:3!important;
}

@keyframes pilotShipFloat{
  0%,100%{transform:translateY(0) rotate(-8deg)}
  50%{transform:translateY(-6px) rotate(-6deg)}
}
@keyframes pilotPortraitFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.pilot-stage[data-pilot="hikaru"] .pilot-ship{animation-name:pilotShipFloatHikaru}
@keyframes pilotShipFloatHikaru{
  0%,100%{transform:translateY(0) rotate(-6deg)}
  50%{transform:translateY(-6px) rotate(-4deg)}
}

@media (max-width:1200px){
  .menu-panel .logo-zone{width:min(58vw,700px)!important}
  .menu-panel .overlay-title{right:54px!important;top:204px!important;font-size:clamp(34px,3.5vw,52px)!important}
  .menu-panel .overlay-text{right:54px!important;top:258px!important;width:min(33vw,390px)!important}
  .pilot-select{left:8px!important;top:178px!important;width:min(64vw,790px)!important;height:min(68vh,560px)!important}
  .pilot-heading{left:292px!important;top:82px!important;font-size:clamp(25px,2.5vw,42px)!important}
  .pilot-stage .pilot-ship{left:6px!important;width:min(56vw,660px)!important}
  .pilot-stage[data-pilot="duke"] .pilot-ship{width:min(58vw,690px)!important}
  .pilot-stage .pilot-portrait{left:min(42vw,510px)!important;top:300px!important;width:min(22vw,280px)!important;height:min(22vw,280px)!important}
  .pilot-prev{left:232px!important}.pilot-next{left:418px!important}
  .pilot-arrow{width:74px!important;height:96px!important;font-size:50px!important}
  .menu-panel .menu-buttons{right:54px!important;top:354px!important;width:min(31vw,360px)!important}
  .menu-panel .menu-btn{min-height:76px!important}
  .menu-panel .menu-footer{right:46px!important;width:min(42vw,470px)!important}
}
@media (max-width:900px), (max-height:600px){
  .menu-panel{overflow:auto!important}
  .menu-panel .logo-zone{position:relative!important;top:auto!important;left:auto!important;transform:none!important;width:90%!important;margin:14px auto 0!important}
  .menu-panel .overlay-title,.menu-panel .overlay-text{position:static!important;width:auto!important;text-align:center!important;display:block!important;margin-inline:auto!important}
  .pilot-select,
  .menu-panel .menu-buttons,
  .menu-panel .menu-footer{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:92%!important;margin:0 auto!important}
  .pilot-select{height:420px!important;min-height:420px!important;margin-top:6px!important}
  .pilot-heading{left:50%!important;transform:translateX(-50%)!important;top:20px!important;font-size:30px!important}
  .pilot-stage .pilot-ship{left:2%!important;top:100px!important;width:78%!important;height:250px!important}
  .pilot-stage[data-pilot="duke"] .pilot-ship{width:82%!important;height:290px!important;left:-1%!important;top:78px!important}
  .pilot-stage .pilot-portrait{left:auto!important;right:6%!important;top:190px!important;width:180px!important;height:180px!important}
  .pilot-prev{left:140px!important;bottom:48px!important}.pilot-next{left:265px!important;bottom:48px!important}
  .pilot-arrow{width:60px!important;height:74px!important;font-size:40px!important}
  .menu-panel .menu-buttons{margin-top:12px!important;width:min(92%,420px)!important}
  .menu-panel .menu-footer{margin:14px auto 24px!important;width:min(92%,520px)!important}
}

/* ==========================================================
   V55 — cleaner menu text and arrows placed below portrait
   ========================================================== */
/* Remove extra texts above and around the menu to reduce clutter */
.menu-panel .eyebrow,
.menu-panel .overlay-title,
.menu-panel .overlay-text{
  display:none !important;
}

/* Keep the logo but give it a little breathing room */
.menu-panel .logo-zone{
  top:22px !important;
  width:min(52vw,720px) !important;
}
.menu-panel .logo-image{
  max-height:250px !important;
}

/* Small caption below the portrait */
.pilot-heading{
  top:auto !important;
  bottom:22px !important;
  left:min(42vw,575px) !important;
  transform:translateX(-50%) !important;
  font-size:clamp(16px,1.25vw,22px) !important;
  line-height:1.1 !important;
  color:rgba(255,255,255,.95) !important;
  text-shadow:0 2px 7px rgba(0,0,0,.34) !important;
  z-index:6 !important;
}

/* Portrait stays centered like the Photoshop sample */
.pilot-stage .pilot-portrait{
  left:min(42vw,575px) !important;
  top:304px !important;
  width:min(22vw,320px) !important;
  height:min(22vw,320px) !important;
  border-width:8px !important;
}

/* Make the arrows smaller and place them under the portrait with clear spacing */
.pilot-arrow{
  top:auto !important;
  bottom:86px !important;
  width:56px !important;
  height:70px !important;
  font-size:38px !important;
  border-radius:10px !important;
  z-index:6 !important;
}
.pilot-prev{
  left:min(42vw,575px) !important;
  right:auto !important;
  transform:translateX(-152px) !important;
}
.pilot-next{
  left:min(42vw,575px) !important;
  right:auto !important;
  transform:translateX(96px) !important;
}
.pilot-prev:hover,.pilot-prev:focus-visible{
  transform:translateX(-152px) scale(1.03) !important;
}
.pilot-next:hover,.pilot-next:focus-visible{
  transform:translateX(96px) scale(1.03) !important;
}
.pilot-prev:active{
  transform:translateX(-152px) scale(.97) !important;
}
.pilot-next:active{
  transform:translateX(96px) scale(.97) !important;
}

/* Ensure arrows do not sit on top of the images visually */
.pilot-stage .pilot-ship{
  z-index:2 !important;
}
.pilot-stage .pilot-portrait{
  z-index:4 !important;
}

@media (max-width:1200px){
  .pilot-heading{
    left:min(42vw,510px) !important;
    bottom:22px !important;
    font-size:clamp(15px,1.35vw,20px) !important;
  }
  .pilot-stage .pilot-portrait{
    left:min(42vw,510px) !important;
    width:min(22vw,280px) !important;
    height:min(22vw,280px) !important;
  }
  .pilot-arrow{
    bottom:80px !important;
    width:52px !important;
    height:66px !important;
    font-size:34px !important;
  }
  .pilot-prev{
    left:min(42vw,510px) !important;
    transform:translateX(-138px) !important;
  }
  .pilot-next{
    left:min(42vw,510px) !important;
    transform:translateX(88px) !important;
  }
  .pilot-prev:hover,.pilot-prev:focus-visible{transform:translateX(-138px) scale(1.03) !important;}
  .pilot-next:hover,.pilot-next:focus-visible{transform:translateX(88px) scale(1.03) !important;}
  .pilot-prev:active{transform:translateX(-138px) scale(.97) !important;}
  .pilot-next:active{transform:translateX(88px) scale(.97) !important;}
}

@media (max-width:900px), (max-height:600px){
  .menu-panel .logo-zone{width:88% !important; top:12px !important;}
  .pilot-stage .pilot-portrait{
    left:auto !important;
    right:12% !important;
    top:188px !important;
    width:170px !important;
    height:170px !important;
  }
  .pilot-heading{
    left:auto !important;
    right:106px !important;
    bottom:18px !important;
    transform:none !important;
    font-size:15px !important;
  }
  .pilot-arrow{
    bottom:60px !important;
    width:48px !important;
    height:60px !important;
    font-size:32px !important;
  }
  .pilot-prev{
    left:auto !important;
    right:220px !important;
    transform:none !important;
  }
  .pilot-next{
    left:auto !important;
    right:108px !important;
    transform:none !important;
  }
  .pilot-prev:hover,.pilot-prev:focus-visible,
  .pilot-next:hover,.pilot-next:focus-visible,
  .pilot-prev:active,
  .pilot-next:active{transform:none !important;}
}

/* ==========================================================
   V56 — arrows fully below portrait + smaller best score under menu
   ========================================================== */
/* Move portrait slightly higher so arrows can sit fully below it */
.pilot-stage .pilot-portrait{
  top:288px !important;
}

/* Place the navigation arrows completely below the portrait */
.pilot-arrow{
  top:auto !important;
  bottom:54px !important;
  width:54px !important;
  height:66px !important;
  font-size:34px !important;
  border-radius:10px !important;
}
.pilot-prev{
  left:min(42vw,575px) !important;
  right:auto !important;
  transform:translateX(-144px) !important;
}
.pilot-next{
  left:min(42vw,575px) !important;
  right:auto !important;
  transform:translateX(90px) !important;
}
.pilot-prev:hover,.pilot-prev:focus-visible{transform:translateX(-144px) scale(1.03) !important;}
.pilot-next:hover,.pilot-next:focus-visible{transform:translateX(90px) scale(1.03) !important;}
.pilot-prev:active{transform:translateX(-144px) scale(.97) !important;}
.pilot-next:active{transform:translateX(90px) scale(.97) !important;}

/* Put the small title underneath the arrows, as in the reference */
.pilot-heading{
  bottom:14px !important;
  left:min(42vw,575px) !important;
  font-size:clamp(15px,1.15vw,20px) !important;
}

/* Shrink and relocate the best score block just below the last menu button */
.menu-panel .menu-footer{
  right:96px !important;
  top:640px !important;
  bottom:auto !important;
  width:min(25vw,340px) !important;
  padding:4px 8px 6px !important;
  border-radius:0 !important;
  background:none !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
  gap:0 !important;
  align-items:flex-end !important;
  text-align:right !important;
}
.menu-panel .best-inline{
  font-size:clamp(18px,2vw,30px) !important;
  line-height:1.05 !important;
  text-shadow:0 2px 8px rgba(0,0,0,.28) !important;
}
.menu-panel .voice-hint{
  font-size:clamp(10px,1vw,14px) !important;
  color:#f5d975 !important;
}

@media (max-width:1200px){
  .pilot-stage .pilot-portrait{top:288px !important; left:min(42vw,510px) !important;}
  .pilot-arrow{bottom:58px !important; width:50px !important; height:62px !important; font-size:31px !important;}
  .pilot-prev{left:min(42vw,510px) !important; transform:translateX(-130px) !important;}
  .pilot-next{left:min(42vw,510px) !important; transform:translateX(82px) !important;}
  .pilot-prev:hover,.pilot-prev:focus-visible{transform:translateX(-130px) scale(1.03) !important;}
  .pilot-next:hover,.pilot-next:focus-visible{transform:translateX(82px) scale(1.03) !important;}
  .pilot-prev:active{transform:translateX(-130px) scale(.97) !important;}
  .pilot-next:active{transform:translateX(82px) scale(.97) !important;}
  .pilot-heading{left:min(42vw,510px) !important;}
  .menu-panel .menu-footer{right:58px !important; top:604px !important; width:min(28vw,300px) !important;}
  .menu-panel .best-inline{font-size:clamp(17px,1.8vw,26px) !important;}
}

@media (max-width:900px), (max-height:600px){
  .pilot-stage .pilot-portrait{
    right:12% !important;
    top:176px !important;
    width:166px !important;
    height:166px !important;
  }
  .pilot-arrow{
    bottom:56px !important;
    width:46px !important;
    height:56px !important;
    font-size:30px !important;
  }
  .pilot-prev{
    right:214px !important;
    left:auto !important;
    transform:none !important;
  }
  .pilot-next{
    right:106px !important;
    left:auto !important;
    transform:none !important;
  }
  .pilot-heading{
    right:104px !important;
    left:auto !important;
    bottom:14px !important;
    transform:none !important;
    font-size:14px !important;
  }
  .menu-panel .menu-footer{
    position:relative !important;
    right:auto !important;
    top:auto !important;
    width:min(88%,300px) !important;
    margin:6px auto 18px !important;
    align-items:center !important;
    text-align:center !important;
  }
}

/* ==========================================================
   V57 — force arrows fully below portrait + smaller score under menu
   ========================================================== */
.pilot-stage .pilot-portrait{
  top:270px !important;
  width:min(20vw,285px) !important;
  height:min(20vw,285px) !important;
}

/* Put both arrows clearly beneath the portrait, not on top of it */
.pilot-arrow{
  top:auto !important;
  bottom:26px !important;
  width:50px !important;
  height:58px !important;
  font-size:30px !important;
  z-index:6 !important;
}
.pilot-prev{
  left:min(42vw,575px) !important;
  right:auto !important;
  transform:translateX(-118px) !important;
}
.pilot-next{
  left:min(42vw,575px) !important;
  right:auto !important;
  transform:translateX(68px) !important;
}
.pilot-prev:hover,.pilot-prev:focus-visible{transform:translateX(-118px) scale(1.03) !important;}
.pilot-next:hover,.pilot-next:focus-visible{transform:translateX(68px) scale(1.03) !important;}
.pilot-prev:active{transform:translateX(-118px) scale(.97) !important;}
.pilot-next:active{transform:translateX(68px) scale(.97) !important;}

/* Keep caption under the portrait and aligned with the arrows */
.pilot-heading{
  bottom:2px !important;
  left:min(42vw,575px) !important;
  font-size:clamp(14px,1.05vw,18px) !important;
}

/* Small score block directly below the final menu button */
.menu-panel .menu-footer{
  right:102px !important;
  top:612px !important;
  bottom:auto !important;
  width:min(23vw,300px) !important;
  padding:0 !important;
  gap:0 !important;
}
.menu-panel .best-inline{
  font-size:clamp(16px,1.55vw,24px) !important;
  line-height:1.02 !important;
}
.menu-panel .voice-hint{
  font-size:clamp(9px,.88vw,12px) !important;
  line-height:1.15 !important;
}

@media (max-width:1200px){
  .pilot-stage .pilot-portrait{
    top:274px !important;
    left:min(42vw,510px) !important;
    width:min(20vw,255px) !important;
    height:min(20vw,255px) !important;
  }
  .pilot-arrow{
    bottom:28px !important;
    width:46px !important;
    height:54px !important;
    font-size:27px !important;
  }
  .pilot-prev{left:min(42vw,510px) !important; transform:translateX(-106px) !important;}
  .pilot-next{left:min(42vw,510px) !important; transform:translateX(62px) !important;}
  .pilot-prev:hover,.pilot-prev:focus-visible{transform:translateX(-106px) scale(1.03) !important;}
  .pilot-next:hover,.pilot-next:focus-visible{transform:translateX(62px) scale(1.03) !important;}
  .pilot-prev:active{transform:translateX(-106px) scale(.97) !important;}
  .pilot-next:active{transform:translateX(62px) scale(.97) !important;}
  .pilot-heading{left:min(42vw,510px) !important; bottom:2px !important; font-size:clamp(13px,1.05vw,16px) !important;}
  .menu-panel .menu-footer{right:64px !important; top:586px !important; width:min(25vw,270px) !important;}
  .menu-panel .best-inline{font-size:clamp(15px,1.45vw,21px) !important;}
}

@media (max-width:900px), (max-height:600px){
  .pilot-stage .pilot-portrait{
    right:12% !important;
    top:170px !important;
    width:154px !important;
    height:154px !important;
  }
  .pilot-arrow{
    bottom:34px !important;
    width:42px !important;
    height:48px !important;
    font-size:26px !important;
  }
  .pilot-prev{left:auto !important; right:204px !important; transform:none !important;}
  .pilot-next{left:auto !important; right:118px !important; transform:none !important;}
  .pilot-prev:hover,.pilot-prev:focus-visible,.pilot-next:hover,.pilot-next:focus-visible,.pilot-prev:active,.pilot-next:active{transform:none !important;}
  .pilot-heading{right:100px !important; bottom:4px !important; left:auto !important; transform:none !important; font-size:13px !important;}
  .menu-panel .menu-footer{position:relative !important; right:auto !important; top:auto !important; width:min(88%,280px) !important; margin:2px auto 16px !important; align-items:center !important; text-align:center !important;}
}

/* ==========================================================
   V58 — fix footer overlap and cleaner pilot controls
   ========================================================== */
/* Arrows and caption: push them a bit lower and keep clear spacing */
.pilot-stage .pilot-portrait{
  top:262px !important;
}
.pilot-arrow{
  bottom:14px !important;
  width:48px !important;
  height:56px !important;
  font-size:28px !important;
}
.pilot-prev{transform:translateX(-116px) !important;}
.pilot-next{transform:translateX(68px) !important;}
.pilot-prev:hover,.pilot-prev:focus-visible{transform:translateX(-116px) scale(1.03) !important;}
.pilot-next:hover,.pilot-next:focus-visible{transform:translateX(68px) scale(1.03) !important;}
.pilot-prev:active{transform:translateX(-116px) scale(.97) !important;}
.pilot-next:active{transform:translateX(68px) scale(.97) !important;}
.pilot-heading{
  bottom:-8px !important;
  font-size:clamp(13px,1vw,17px) !important;
}

/* Best score block: place fully under the menu, small, no overlap */
.menu-panel .menu-footer{
  right:94px !important;
  top:690px !important;
  width:300px !important;
  padding:0 !important;
  background:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  align-items:flex-end !important;
  text-align:right !important;
  line-height:1.05 !important;
  z-index:3 !important;
}
.menu-panel .best-inline{
  font-size:19px !important;
  font-weight:1000 !important;
  white-space:nowrap !important;
}
.menu-panel .voice-hint{
  font-size:11px !important;
  color:#f2da79 !important;
  white-space:nowrap !important;
}

@media (max-width:1200px){
  .pilot-stage .pilot-portrait{top:266px !important;}
  .pilot-arrow{bottom:18px !important; width:44px !important; height:52px !important; font-size:26px !important;}
  .pilot-prev{left:min(42vw,510px) !important; transform:translateX(-102px) !important;}
  .pilot-next{left:min(42vw,510px) !important; transform:translateX(58px) !important;}
  .pilot-prev:hover,.pilot-prev:focus-visible{transform:translateX(-102px) scale(1.03) !important;}
  .pilot-next:hover,.pilot-next:focus-visible{transform:translateX(58px) scale(1.03) !important;}
  .pilot-prev:active{transform:translateX(-102px) scale(.97) !important;}
  .pilot-next:active{transform:translateX(58px) scale(.97) !important;}
  .pilot-heading{left:min(42vw,510px) !important; bottom:-6px !important; font-size:13px !important;}
  .menu-panel .menu-footer{right:56px !important; top:662px !important; width:260px !important;}
  .menu-panel .best-inline{font-size:17px !important;}
  .menu-panel .voice-hint{font-size:10px !important;}
}

@media (max-width:900px), (max-height:600px){
  .pilot-stage .pilot-portrait{top:162px !important; width:148px !important; height:148px !important;}
  .pilot-arrow{bottom:26px !important; width:40px !important; height:46px !important; font-size:24px !important;}
  .pilot-prev{right:198px !important; left:auto !important; transform:none !important;}
  .pilot-next{right:116px !important; left:auto !important; transform:none !important;}
  .pilot-prev:hover,.pilot-prev:focus-visible,.pilot-next:hover,.pilot-next:focus-visible,.pilot-prev:active,.pilot-next:active{transform:none !important;}
  .pilot-heading{right:96px !important; left:auto !important; bottom:-2px !important; transform:none !important; font-size:12px !important;}
  .menu-panel .menu-footer{position:relative !important; right:auto !important; top:auto !important; width:min(88%,260px) !important; margin:4px auto 14px !important; align-items:center !important; text-align:center !important;}
}

/* ==========================================================
   V59 — tiny arrows + dynamic glowing pilot name and craft
   ========================================================== */
/* Hide the generic caption and use the dynamic pilot info instead */
.pilot-heading{
  display:none !important;
}

/* Show pilot name/craft as the main label block, to the left of the controls */
.pilot-stage .pilot-info{
  display:flex !important;
  position:absolute !important;
  left:min(42vw,575px) !important;
  bottom:20px !important;
  transform:translateX(-325px) !important;
  width:260px !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  gap:2px !important;
  align-items:flex-start !important;
  text-align:right !important;
  z-index:6 !important;
}
.pilot-number{
  display:none !important;
}
.pilot-info strong{
  font-size:clamp(28px,2.7vw,44px) !important;
  line-height:1 !important;
  color:#f8fdff !important;
  text-shadow:0 0 18px rgba(110,223,255,.95), 0 2px 8px rgba(0,0,0,.42) !important;
}
.pilot-info small{
  font-size:clamp(15px,1.35vw,22px) !important;
  font-weight:1000 !important;
  color:#ffe56c !important;
  text-shadow:0 0 14px rgba(255,215,91,.82), 0 2px 6px rgba(0,0,0,.42) !important;
}

/* Portrait and controls */
.pilot-stage .pilot-portrait{
  top:258px !important;
  width:min(20vw,280px) !important;
  height:min(20vw,280px) !important;
}
.pilot-arrow{
  top:auto !important;
  bottom:34px !important;
  width:34px !important;
  height:42px !important;
  font-size:22px !important;
  border-radius:8px !important;
  z-index:7 !important;
}
.pilot-prev{
  left:min(42vw,575px) !important;
  right:auto !important;
  transform:translateX(-60px) !important;
}
.pilot-next{
  left:min(42vw,575px) !important;
  right:auto !important;
  transform:translateX(26px) !important;
}
.pilot-prev:hover,.pilot-prev:focus-visible{transform:translateX(-60px) scale(1.03) !important;}
.pilot-next:hover,.pilot-next:focus-visible{transform:translateX(26px) scale(1.03) !important;}
.pilot-prev:active{transform:translateX(-60px) scale(.97) !important;}
.pilot-next:active{transform:translateX(26px) scale(.97) !important;}

/* Smaller score directly below menu */
.menu-panel .menu-footer{
  right:98px !important;
  top:646px !important;
  width:250px !important;
  padding:0 !important;
  background:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  gap:0 !important;
  align-items:flex-end !important;
  text-align:right !important;
}
.menu-panel .best-inline{
  font-size:18px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
}
.menu-panel .voice-hint{
  font-size:11px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
}

@media (max-width:1200px){
  .pilot-stage .pilot-info{
    left:min(42vw,510px) !important;
    transform:translateX(-286px) !important;
    width:228px !important;
  }
  .pilot-info strong{font-size:clamp(24px,2.45vw,36px) !important;}
  .pilot-info small{font-size:clamp(13px,1.15vw,18px) !important;}
  .pilot-stage .pilot-portrait{
    top:262px !important;
    left:min(42vw,510px) !important;
    width:min(20vw,248px) !important;
    height:min(20vw,248px) !important;
  }
  .pilot-arrow{
    bottom:38px !important;
    width:32px !important;
    height:38px !important;
    font-size:20px !important;
  }
  .pilot-prev{left:min(42vw,510px) !important; transform:translateX(-54px) !important;}
  .pilot-next{left:min(42vw,510px) !important; transform:translateX(22px) !important;}
  .pilot-prev:hover,.pilot-prev:focus-visible{transform:translateX(-54px) scale(1.03) !important;}
  .pilot-next:hover,.pilot-next:focus-visible{transform:translateX(22px) scale(1.03) !important;}
  .pilot-prev:active{transform:translateX(-54px) scale(.97) !important;}
  .pilot-next:active{transform:translateX(22px) scale(.97) !important;}
  .menu-panel .menu-footer{right:60px !important; top:622px !important; width:228px !important;}
  .menu-panel .best-inline{font-size:16px !important;}
  .menu-panel .voice-hint{font-size:10px !important;}
}

@media (max-width:900px), (max-height:600px){
  .pilot-stage .pilot-info{
    left:auto !important;
    right:210px !important;
    bottom:6px !important;
    transform:none !important;
    width:160px !important;
    align-items:flex-end !important;
  }
  .pilot-info strong{font-size:21px !important;}
  .pilot-info small{font-size:12px !important;}
  .pilot-stage .pilot-portrait{
    right:12% !important;
    top:164px !important;
    width:146px !important;
    height:146px !important;
  }
  .pilot-arrow{
    bottom:36px !important;
    width:30px !important;
    height:36px !important;
    font-size:19px !important;
  }
  .pilot-prev{left:auto !important; right:180px !important; transform:none !important;}
  .pilot-next{left:auto !important; right:122px !important; transform:none !important;}
  .pilot-prev:hover,.pilot-prev:focus-visible,.pilot-next:hover,.pilot-next:focus-visible,.pilot-prev:active,.pilot-next:active{transform:none !important;}
  .menu-panel .menu-footer{position:relative !important; right:auto !important; top:auto !important; width:min(88%,240px) !important; margin:4px auto 14px !important; align-items:center !important; text-align:center !important;}
}

/* ==========================================================
   V60 — arrows lower and farther from image, more gap from pilot text
   ========================================================== */
.pilot-stage .pilot-portrait{
  top:248px !important;
}

/* Move the dynamic pilot label farther left for a clear gap */
.pilot-stage .pilot-info{
  left:min(42vw,575px) !important;
  bottom:8px !important;
  transform:translateX(-405px) !important;
  width:300px !important;
  gap:6px !important;
}
.pilot-info strong{
  font-size:clamp(30px,2.9vw,46px) !important;
}
.pilot-info small{
  font-size:clamp(16px,1.45vw,24px) !important;
}

/* Put arrows clearly below the portrait and reduce overlap completely */
.pilot-arrow{
  top:auto !important;
  bottom:2px !important;
  width:32px !important;
  height:40px !important;
  font-size:20px !important;
  border-radius:8px !important;
}
.pilot-prev{
  left:min(42vw,575px) !important;
  right:auto !important;
  transform:translateX(-78px) !important;
}
.pilot-next{
  left:min(42vw,575px) !important;
  right:auto !important;
  transform:translateX(46px) !important;
}
.pilot-prev:hover,.pilot-prev:focus-visible{transform:translateX(-78px) scale(1.03) !important;}
.pilot-next:hover,.pilot-next:focus-visible{transform:translateX(46px) scale(1.03) !important;}
.pilot-prev:active{transform:translateX(-78px) scale(.97) !important;}
.pilot-next:active{transform:translateX(46px) scale(.97) !important;}

@media (max-width:1200px){
  .pilot-stage .pilot-portrait{
    top:252px !important;
    left:min(42vw,510px) !important;
  }
  .pilot-stage .pilot-info{
    left:min(42vw,510px) !important;
    bottom:8px !important;
    transform:translateX(-360px) !important;
    width:270px !important;
  }
  .pilot-info strong{font-size:clamp(26px,2.55vw,38px) !important;}
  .pilot-info small{font-size:clamp(14px,1.2vw,19px) !important;}
  .pilot-arrow{
    bottom:4px !important;
    width:30px !important;
    height:36px !important;
    font-size:18px !important;
  }
  .pilot-prev{left:min(42vw,510px) !important; transform:translateX(-70px) !important;}
  .pilot-next{left:min(42vw,510px) !important; transform:translateX(40px) !important;}
  .pilot-prev:hover,.pilot-prev:focus-visible{transform:translateX(-70px) scale(1.03) !important;}
  .pilot-next:hover,.pilot-next:focus-visible{transform:translateX(40px) scale(1.03) !important;}
  .pilot-prev:active{transform:translateX(-70px) scale(.97) !important;}
  .pilot-next:active{transform:translateX(40px) scale(.97) !important;}
}

@media (max-width:900px), (max-height:600px){
  .pilot-stage .pilot-portrait{
    top:158px !important;
    width:142px !important;
    height:142px !important;
  }
  .pilot-stage .pilot-info{
    right:198px !important;
    left:auto !important;
    bottom:8px !important;
    transform:none !important;
    width:150px !important;
  }
  .pilot-info strong{font-size:19px !important;}
  .pilot-info small{font-size:11px !important;}
  .pilot-arrow{
    bottom:18px !important;
    width:28px !important;
    height:34px !important;
    font-size:17px !important;
  }
  .pilot-prev{right:170px !important; left:auto !important; transform:none !important;}
  .pilot-next{right:116px !important; left:auto !important; transform:none !important;}
  .pilot-prev:hover,.pilot-prev:focus-visible,.pilot-next:hover,.pilot-next:focus-visible,.pilot-prev:active,.pilot-next:active{transform:none !important;}
}

/* ==========================================================
   V61 — glowing rotating pilot ring, stronger ship hover, entry sound
   ========================================================== */
.pilot-energy-ring{
  display:block !important;
  position:absolute !important;
  left:min(42vw,575px) !important;
  top:244px !important;
  width:calc(min(20vw, 280px) + 30px) !important;
  height:calc(min(20vw, 280px) + 30px) !important;
  transform:translateX(-50%) !important;
  border-radius:50% !important;
  background:
    conic-gradient(from 0deg,
      rgba(255,255,255,.0) 0deg,
      rgba(120,232,255,.98) 36deg,
      rgba(255,255,255,.15) 82deg,
      rgba(255,218,89,.92) 138deg,
      rgba(255,255,255,.05) 198deg,
      rgba(120,232,255,.98) 254deg,
      rgba(255,255,255,.0) 360deg) !important;
  -webkit-mask:radial-gradient(circle, transparent 58%, #000 60%, #000 69%, transparent 71%) !important;
  mask:radial-gradient(circle, transparent 58%, #000 60%, #000 69%, transparent 71%) !important;
  filter:drop-shadow(0 0 12px rgba(117,230,255,.9)) drop-shadow(0 0 22px rgba(255,220,92,.45)) !important;
  opacity:.97 !important;
  z-index:3 !important;
  pointer-events:none !important;
  animation:pilotAuraSpin 8.5s linear infinite, pilotAuraPulse 2.6s ease-in-out infinite !important;
}
.pilot-stage .pilot-portrait{
  z-index:4 !important;
}
.pilot-stage .pilot-ship{
  animation:pilotSpaceDrift 3.4s ease-in-out infinite !important;
  transform-origin:center center !important;
  will-change:transform, filter;
}
.pilot-stage[data-pilot="hikaru"] .pilot-ship{animation-name:pilotSpaceDriftHikaru !important;}
.pilot-stage[data-pilot="duke"] .pilot-ship{animation-duration:3.2s !important;}
.pilot-stage[data-pilot="koji"] .pilot-ship{animation-duration:3.55s !important;}
.pilot-stage[data-pilot="maria"] .pilot-ship{animation-duration:3.6s !important;}

@keyframes pilotAuraSpin{
  from{transform:translateX(-50%) rotate(0deg)}
  to{transform:translateX(-50%) rotate(360deg)}
}
@keyframes pilotAuraPulse{
  0%,100%{filter:drop-shadow(0 0 10px rgba(117,230,255,.78)) drop-shadow(0 0 18px rgba(255,220,92,.38));opacity:.86}
  50%{filter:drop-shadow(0 0 16px rgba(117,230,255,1)) drop-shadow(0 0 28px rgba(255,220,92,.58));opacity:1}
}
@keyframes pilotSpaceDrift{
  0%,100%{transform:translateY(0) rotate(-8deg) scale(1)}
  20%{transform:translateY(-5px) translateX(2px) rotate(-7.2deg) scale(1.01)}
  50%{transform:translateY(3px) translateX(-3px) rotate(-9.2deg) scale(.995)}
  80%{transform:translateY(-4px) translateX(2px) rotate(-7.4deg) scale(1.008)}
}
@keyframes pilotSpaceDriftHikaru{
  0%,100%{transform:translateY(0) rotate(-6deg) scale(1)}
  25%{transform:translateY(-5px) translateX(3px) rotate(-5deg) scale(1.01)}
  55%{transform:translateY(3px) translateX(-2px) rotate(-7.2deg) scale(.996)}
  82%{transform:translateY(-4px) translateX(2px) rotate(-5.3deg) scale(1.008)}
}

@media (max-width:1200px){
  .pilot-energy-ring{
    left:min(42vw,510px) !important;
    top:248px !important;
    width:calc(min(20vw, 248px) + 28px) !important;
    height:calc(min(20vw, 248px) + 28px) !important;
  }
}
@media (max-width:900px), (max-height:600px){
  .pilot-energy-ring{
    left:auto !important;
    right:11.4% !important;
    top:154px !important;
    width:166px !important;
    height:166px !important;
    transform:none !important;
    animation:pilotAuraSpinMobile 8.5s linear infinite, pilotAuraPulse 2.6s ease-in-out infinite !important;
  }
  @keyframes pilotAuraSpinMobile{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
  }
}
@media(prefers-reduced-motion:reduce){
  .pilot-energy-ring,.pilot-stage .pilot-ship{animation:none !important}
}

/* ==========================================================
   V62 — fix ring position/spin visibility and stronger ship movement
   ========================================================== */
.pilot-energy-ring{
  display:block !important;
  left:min(42vw,575px) !important;
  top:243px !important;
  width:310px !important;
  height:310px !important;
  margin-left:-15px !important;
  transform:none !important;
  border-radius:50% !important;
  border:7px solid rgba(255,255,255,.78) !important;
  border-left-color:rgba(112,233,255,1) !important;
  border-bottom-color:rgba(255,220,84,1) !important;
  background:radial-gradient(circle at center, rgba(255,255,255,.04) 0 57%, rgba(116,231,255,.08) 58% 61%, rgba(255,220,84,.04) 62% 66%, transparent 67%) !important;
  box-shadow:0 0 18px rgba(112,233,255,.95), 0 0 32px rgba(255,220,84,.38), inset 0 0 18px rgba(255,255,255,.18) !important;
  opacity:1 !important;
  z-index:3 !important;
  pointer-events:none !important;
  animation:pilotRingSpinStrong 6s linear infinite, pilotRingPulseStrong 2s ease-in-out infinite !important;
}
.pilot-stage .pilot-portrait{
  top:258px !important;
  z-index:4 !important;
}

@keyframes pilotRingSpinStrong{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes pilotRingPulseStrong{
  0%,100%{box-shadow:0 0 14px rgba(112,233,255,.82), 0 0 26px rgba(255,220,84,.28), inset 0 0 14px rgba(255,255,255,.14)}
  50%{box-shadow:0 0 24px rgba(112,233,255,1), 0 0 42px rgba(255,220,84,.46), inset 0 0 22px rgba(255,255,255,.22)}
}

/* Stronger floating motion for the ship so it feels alive in space */
.pilot-stage .pilot-ship{
  will-change:transform !important;
}
.pilot-stage[data-pilot="duke"] .pilot-ship{animation:shipFloatDuke 2.8s ease-in-out infinite !important;}
.pilot-stage[data-pilot="koji"] .pilot-ship{animation:shipFloatKoji 3s ease-in-out infinite !important;}
.pilot-stage[data-pilot="hikaru"] .pilot-ship{animation:shipFloatHikaruStrong 3s ease-in-out infinite !important;}
.pilot-stage[data-pilot="maria"] .pilot-ship{animation:shipFloatMaria 3.1s ease-in-out infinite !important;}

@keyframes shipFloatDuke{
  0%,100%{transform:translate3d(0,0,0) rotate(-8deg)}
  25%{transform:translate3d(8px,-7px,0) rotate(-6.8deg)}
  50%{transform:translate3d(-6px,5px,0) rotate(-9.2deg)}
  75%{transform:translate3d(5px,-4px,0) rotate(-7.4deg)}
}
@keyframes shipFloatKoji{
  0%,100%{transform:translate3d(0,0,0) rotate(-8deg)}
  20%{transform:translate3d(7px,-6px,0) rotate(-6.9deg)}
  52%{transform:translate3d(-5px,5px,0) rotate(-9.1deg)}
  78%{transform:translate3d(4px,-4px,0) rotate(-7deg)}
}
@keyframes shipFloatHikaruStrong{
  0%,100%{transform:translate3d(0,0,0) rotate(-6deg)}
  22%{transform:translate3d(7px,-6px,0) rotate(-4.8deg)}
  50%{transform:translate3d(-5px,5px,0) rotate(-7.3deg)}
  80%{transform:translate3d(4px,-3px,0) rotate(-5.1deg)}
}
@keyframes shipFloatMaria{
  0%,100%{transform:translate3d(0,0,0) rotate(-8deg)}
  24%{transform:translate3d(8px,-6px,0) rotate(-6.7deg)}
  52%{transform:translate3d(-6px,5px,0) rotate(-9.3deg)}
  82%{transform:translate3d(5px,-4px,0) rotate(-7.2deg)}
}

@media (max-width:1200px){
  .pilot-energy-ring{
    left:min(42vw,510px) !important;
    top:247px !important;
    width:274px !important;
    height:274px !important;
    margin-left:-13px !important;
    border-width:6px !important;
  }
  .pilot-stage .pilot-portrait{top:262px !important;}
}

@media (max-width:900px), (max-height:600px){
  .pilot-energy-ring{
    left:auto !important;
    right:12% !important;
    top:158px !important;
    width:162px !important;
    height:162px !important;
    margin-left:0 !important;
    border-width:5px !important;
  }
  .pilot-stage .pilot-portrait{top:164px !important;}
}

@media(prefers-reduced-motion:reduce){
  .pilot-energy-ring,.pilot-stage .pilot-ship{animation:none !important}
}

/* ==========================================================
   V63 — lock the glow ring to the portrait and make ship motion obvious
   ========================================================== */
.pilot-stage{
  --pilot-portrait-left:min(42vw,575px);
  --pilot-portrait-top:258px;
  --pilot-portrait-size:min(20vw,280px);
}

/* Portrait exact anchor */
.pilot-stage .pilot-portrait{
  left:var(--pilot-portrait-left) !important;
  top:var(--pilot-portrait-top) !important;
  width:var(--pilot-portrait-size) !important;
  height:var(--pilot-portrait-size) !important;
  z-index:4 !important;
}

/* The glow ring is now tied directly to the portrait position and size */
.pilot-energy-ring{
  display:block !important;
  left:calc(var(--pilot-portrait-left) - 14px) !important;
  top:calc(var(--pilot-portrait-top) - 14px) !important;
  width:calc(var(--pilot-portrait-size) + 28px) !important;
  height:calc(var(--pilot-portrait-size) + 28px) !important;
  margin:0 !important;
  transform:none !important;
  border-radius:50% !important;
  border:6px solid rgba(255,255,255,.78) !important;
  border-left-color:#72e8ff !important;
  border-bottom-color:#ffd54d !important;
  background:transparent !important;
  box-shadow:0 0 18px rgba(114,232,255,.92), 0 0 34px rgba(255,213,77,.35) !important;
  z-index:3 !important;
  animation:pilotRingLockedSpin 5.2s linear infinite, pilotRingLockedPulse 1.8s ease-in-out infinite !important;
}
@keyframes pilotRingLockedSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes pilotRingLockedPulse{
  0%,100%{box-shadow:0 0 12px rgba(114,232,255,.72),0 0 24px rgba(255,213,77,.22)}
  50%{box-shadow:0 0 22px rgba(114,232,255,1),0 0 38px rgba(255,213,77,.46)}
}

/* Stronger movement for the ship in the background */
.pilot-stage .pilot-ship{
  will-change:transform !important;
}
.pilot-stage[data-pilot="duke"] .pilot-ship{animation:pilotShipSpaceMoveDuke 2.4s ease-in-out infinite !important;}
.pilot-stage[data-pilot="koji"] .pilot-ship{animation:pilotShipSpaceMoveKoji 2.7s ease-in-out infinite !important;}
.pilot-stage[data-pilot="hikaru"] .pilot-ship{animation:pilotShipSpaceMoveHikaru 2.6s ease-in-out infinite !important;}
.pilot-stage[data-pilot="maria"] .pilot-ship{animation:pilotShipSpaceMoveMaria 2.8s ease-in-out infinite !important;}

@keyframes pilotShipSpaceMoveDuke{
  0%,100%{transform:translate3d(0,0,0) rotate(-8deg)}
  25%{transform:translate3d(10px,-8px,0) rotate(-6.7deg)}
  50%{transform:translate3d(-8px,6px,0) rotate(-9.4deg)}
  75%{transform:translate3d(7px,-5px,0) rotate(-7.1deg)}
}
@keyframes pilotShipSpaceMoveKoji{
  0%,100%{transform:translate3d(0,0,0) rotate(-8deg)}
  25%{transform:translate3d(11px,-8px,0) rotate(-6.6deg)}
  50%{transform:translate3d(-8px,6px,0) rotate(-9.3deg)}
  75%{transform:translate3d(6px,-5px,0) rotate(-7deg)}
}
@keyframes pilotShipSpaceMoveHikaru{
  0%,100%{transform:translate3d(0,0,0) rotate(-6deg)}
  25%{transform:translate3d(10px,-8px,0) rotate(-4.7deg)}
  50%{transform:translate3d(-7px,6px,0) rotate(-7.5deg)}
  75%{transform:translate3d(6px,-4px,0) rotate(-5deg)}
}
@keyframes pilotShipSpaceMoveMaria{
  0%,100%{transform:translate3d(0,0,0) rotate(-8deg)}
  25%{transform:translate3d(10px,-8px,0) rotate(-6.8deg)}
  50%{transform:translate3d(-8px,6px,0) rotate(-9.5deg)}
  75%{transform:translate3d(7px,-5px,0) rotate(-7.2deg)}
}

@media (max-width:1200px){
  .pilot-stage{
    --pilot-portrait-left:min(42vw,510px);
    --pilot-portrait-top:262px;
    --pilot-portrait-size:min(20vw,248px);
  }
}

@media (max-width:900px), (max-height:600px){
  .pilot-stage{
    --pilot-portrait-left:auto;
    --pilot-portrait-top:164px;
    --pilot-portrait-size:146px;
  }
  .pilot-stage .pilot-portrait{
    left:auto !important;
    right:12% !important;
  }
  .pilot-energy-ring{
    left:auto !important;
    right:calc(12% - 10px) !important;
    top:calc(var(--pilot-portrait-top) - 10px) !important;
    width:calc(var(--pilot-portrait-size) + 20px) !important;
    height:calc(var(--pilot-portrait-size) + 20px) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .pilot-energy-ring,.pilot-stage .pilot-ship{animation:none !important}
}

/* ==========================================================
   V64 — remove ring, restore centered pilot title panel, Tajawal font
   ========================================================== */
@font-face{
  font-family:'Tajawal';
  src:local('Tajawal'), local('Tajawal Regular');
  font-weight:400;
  font-style:normal;
}
@font-face{
  font-family:'Tajawal';
  src:local('Tajawal Bold');
  font-weight:700 900;
  font-style:normal;
}
.menu-screen,
.menu-screen button,
.menu-screen .menu-btn,
.menu-screen .pilot-info,
.menu-screen .menu-footer,
.menu-screen .trophy-shortcut,
.menu-screen .overlay-text,
.menu-screen .overlay-title{
  font-family:'Tajawal', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* remove the ring completely */
.pilot-energy-ring{
  display:none !important;
}

/* centered info panel similar to the sample */
.pilot-stage .pilot-info{
  display:flex !important;
  position:absolute !important;
  left:50% !important;
  bottom:58px !important;
  transform:translateX(-50%) !important;
  width:min(52vw, 500px) !important;
  min-height:112px !important;
  padding:8px 24px 12px !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  text-align:center !important;
  direction:rtl !important;
  background:linear-gradient(180deg, rgba(16,53,101,.44), rgba(8,26,53,.34)) !important;
  border-top:1px solid rgba(255,255,255,.42) !important;
  border-bottom:1px solid rgba(255,255,255,.28) !important;
  border-left:none !important;
  border-right:none !important;
  box-shadow:inset 0 0 30px rgba(120,195,255,.08), 0 10px 20px rgba(0,0,0,.10) !important;
  backdrop-filter:blur(2px) !important;
  z-index:6 !important;
}
.pilot-number{
  display:block !important;
  font-size:clamp(16px,1.55vw,26px) !important;
  font-weight:800 !important;
  letter-spacing:3px !important;
  color:#e6f5ff !important;
  line-height:1 !important;
  margin-bottom:4px !important;
  text-shadow:0 2px 8px rgba(0,0,0,.35) !important;
  direction:ltr !important;
}
.pilot-info strong{
  display:block !important;
  font-size:clamp(40px,4vw,72px) !important;
  font-weight:900 !important;
  line-height:.96 !important;
  color:#f7eca8 !important;
  text-shadow:0 0 14px rgba(248,236,168,.25), 0 2px 8px rgba(0,0,0,.36) !important;
  margin:0 !important;
}
.pilot-info small{
  display:block !important;
  font-size:clamp(18px,1.85vw,32px) !important;
  font-weight:800 !important;
  line-height:1 !important;
  color:#edf5ff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.34) !important;
  margin-top:2px !important;
}

/* pilot dots below the title block */
.pilot-dots{
  display:flex !important;
  position:absolute !important;
  left:50% !important;
  bottom:24px !important;
  transform:translateX(-50%) !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  z-index:7 !important;
}
.pilot-dots button{
  width:18px !important;
  height:18px !important;
  border-radius:50% !important;
  border:2px solid rgba(218,244,255,.92) !important;
  background:rgba(0,0,0,.08) !important;
  box-shadow:0 0 10px rgba(101,210,255,.14) !important;
}
.pilot-dots button.active{
  width:42px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#ffe993,#e7c95c) !important;
  border-color:#fff3b8 !important;
  box-shadow:0 0 14px rgba(255,228,121,.55) !important;
}

/* small generic heading no longer needed */
.pilot-heading{display:none !important;}

/* keep arrows below portrait and small */
.pilot-arrow{
  bottom:24px !important;
  width:32px !important;
  height:40px !important;
  font-size:20px !important;
  z-index:8 !important;
}

@media (max-width:1200px){
  .pilot-stage .pilot-info{
    width:min(54vw, 430px) !important;
    bottom:54px !important;
    min-height:102px !important;
  }
  .pilot-number{font-size:clamp(14px,1.35vw,22px) !important;}
  .pilot-info strong{font-size:clamp(34px,3.5vw,58px) !important;}
  .pilot-info small{font-size:clamp(16px,1.55vw,26px) !important;}
  .pilot-dots{bottom:22px !important; gap:16px !important;}
}

@media (max-width:900px), (max-height:600px){
  .pilot-stage .pilot-info{
    width:min(82vw, 340px) !important;
    bottom:52px !important;
    min-height:84px !important;
    padding:8px 16px 10px !important;
  }
  .pilot-number{font-size:14px !important; letter-spacing:2px !important;}
  .pilot-info strong{font-size:34px !important;}
  .pilot-info small{font-size:16px !important;}
  .pilot-dots{bottom:18px !important; gap:12px !important;}
  .pilot-dots button{width:15px !important; height:15px !important;}
  .pilot-dots button.active{width:34px !important;}
}

@media(prefers-reduced-motion:reduce){
  .pilot-dots button,.pilot-stage .pilot-info{transition:none !important;}
}

/* V65 — separate artwork, title and navigation into clear rows. */
.pilot-select{
  --pilot-panel-width:min(52vw,500px);
  --pilot-panel-height:156px;
  --pilot-title-bottom:64px;
}
.pilot-stage .pilot-info{
  width:var(--pilot-panel-width) !important;
  height:var(--pilot-panel-height) !important;
  min-height:0 !important;
  box-sizing:border-box !important;
  bottom:var(--pilot-title-bottom) !important;
  right:auto !important;
}
.pilot-stage .pilot-portrait{
  top:auto !important;
  bottom:calc(var(--pilot-title-bottom) + var(--pilot-panel-height) + 24px) !important;
}
.pilot-stage[data-pilot] .pilot-ship{
  top:auto !important;
  bottom:calc(var(--pilot-title-bottom) + var(--pilot-panel-height) + 50px) !important;
  height:min(38vh,330px) !important;
}
.pilot-arrow{
  top:auto !important;
  bottom:0 !important;
  right:auto !important;
  width:44px !important;
  height:44px !important;
  font-size:24px !important;
}
.pilot-prev{left:calc(50% - var(--pilot-panel-width) / 2) !important;}
.pilot-next{left:calc(50% + var(--pilot-panel-width) / 2 - 44px) !important;}
.pilot-arrow,
.pilot-arrow:hover,.pilot-arrow:focus-visible,.pilot-arrow:active{
  transform:none !important;
}
.pilot-dots{bottom:13px !important;right:auto !important;}
@media(max-width:1200px){
  .pilot-select{--pilot-panel-width:min(54vw,430px);--pilot-panel-height:122px;}
}
@media(max-width:900px),(max-height:600px){
  .pilot-select{--pilot-panel-width:min(82vw,340px);--pilot-panel-height:104px;}
  .pilot-stage[data-pilot] .pilot-ship{height:210px !important;}
  .pilot-stage .pilot-portrait{bottom:calc(var(--pilot-title-bottom) + var(--pilot-panel-height) + 24px) !important;}
  .pilot-dots{bottom:14px !important;}
}

/* V66 — slightly lower portrait and subtle powered-flight motion. */
.pilot-stage .pilot-portrait{
  bottom:calc(var(--pilot-title-bottom) + var(--pilot-panel-height) + 8px) !important;
}
.pilot-stage[data-pilot] .pilot-ship{
  animation:pilotPoweredFlight 2.8s ease-in-out infinite !important;
  filter:drop-shadow(0 0 9px rgba(112,220,255,.36))
         drop-shadow(0 0 19px rgba(82,178,255,.18))
         drop-shadow(-12px 14px 14px rgba(0,0,0,.30)) !important;
  will-change:translate,rotate !important;
}
/* Independent properties preserve each craft's existing angle, whose
   important transform previously prevented transform keyframes from moving. */
@keyframes pilotPoweredFlight{
  0%,100%{translate:0 0;rotate:0deg;}
  20%{translate:3px -4px;rotate:.45deg;}
  40%{translate:-2px 1px;rotate:-.35deg;}
  60%{translate:2px -3px;rotate:.3deg;}
  80%{translate:-3px 3px;rotate:-.4deg;}
}
@media(prefers-reduced-motion:reduce){
  .pilot-stage[data-pilot] .pilot-ship{
    animation:none !important;
    translate:none;
    rotate:none;
    will-change:auto !important;
  }
}

/* V67 — place the portrait lower at the marked title-side position. */
.pilot-stage .pilot-portrait{
  bottom:calc(var(--pilot-title-bottom) + var(--pilot-panel-height) - 80px) !important;
  z-index:7 !important;
}
/* Keep the name readable beside the lowered portrait. */
.pilot-stage .pilot-info{
  padding-right:150px !important;
}
.pilot-stage[data-pilot] .pilot-ship{
  filter:drop-shadow(-5px 0 10px rgba(75,195,255,.60))
         drop-shadow(5px 0 10px rgba(255,219,79,.50))
         drop-shadow(0 0 23px rgba(87,183,255,.22))
         drop-shadow(0 10px 13px rgba(0,0,0,.24)) !important;
}
@media(max-width:900px),(max-height:600px){
  .pilot-stage .pilot-portrait{
    bottom:calc(var(--pilot-title-bottom) + var(--pilot-panel-height) - 48px) !important;
  }
  .pilot-stage .pilot-info{padding-right:100px !important;}
}

/* V69 — persistent world selection in settings. */
.world-help{margin:4px 0 12px;font-size:14px;line-height:1.6;color:#385976;}
.world-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;direction:rtl;}
.menu-screen .world-choice{display:flex;flex-direction:column;padding:0;overflow:hidden;border:2px solid #b9cad8;border-radius:14px;background:#f3f8ff;color:#153a60;text-align:right;cursor:pointer;font-family:'Tajawal',sans-serif !important;}
.menu-screen .world-choice[aria-pressed="true"]{border-color:#d6a628;box-shadow:0 0 0 2px rgba(214,166,40,.18);background:#fff9e6;}
.menu-screen .world-choice:disabled{cursor:default;opacity:.65;}
.menu-screen .world-choice:focus-visible{outline:3px solid #2875ca;outline-offset:3px;}
.world-thumbnail{display:block;flex:none;width:100%;height:110px;background-size:auto 100%,cover;background-position:center bottom,center;background-repeat:no-repeat;}
.world-copy{display:flex;flex-direction:column;gap:5px;padding:10px 12px;}
.world-copy strong{font-size:20px;line-height:1.3;}
.world-copy small{font-size:13px;line-height:1.6;}
.world-status{font-size:12px;font-weight:800;color:#73530b;}
#victoryNextBtn{background:linear-gradient(#ffe48b,#d7a729);color:#15243b;}
#victoryNextBtn[hidden]{display:none !important;}
.victory-actions{flex-wrap:wrap;}
.settings-theme-classic .settings-card{overflow-y:auto;}
@media(max-width:520px){.world-choices{grid-template-columns:1fr;}.menu-screen .world-choice{flex-direction:row;align-items:stretch;}.world-thumbnail{width:100px;height:auto;min-height:112px;}.world-copy{flex:1;}.world-copy strong{font-size:17px;}}


/* V70 — Dedicated, light world selection after pressing Start. */
.world-modal{position:absolute;z-index:12;inset:0;display:grid;place-items:center;padding:clamp(8px,2.5vw,20px);background:rgba(4,26,53,.57);backdrop-filter:blur(6px)}
.world-card{position:relative;display:flex;flex-direction:column;gap:clamp(8px,1.6vh,16px);width:min(940px,94vw);max-height:calc(100dvh - 22px);padding:clamp(12px,2.1vh,22px);overflow:auto;overscroll-behavior:contain;border:3px solid #d8f3ff;border-radius:19px;background:linear-gradient(160deg,#f7fcff 0%,#e5f3ff 51%,#c2e0f6 100%);color:#153c65;box-shadow:0 0 0 4px rgba(33,102,165,.22) inset,0 20px 52px rgba(1,23,49,.46);font-family:'Tajawal',sans-serif}
.world-card::before{content:"";position:absolute;inset:6px;pointer-events:none;border:1px solid rgba(59,127,183,.28);border-radius:12px}
.world-modal-head{position:relative;display:grid;grid-template-columns:clamp(35px,6vh,54px) 1fr clamp(40px,9vh,73px);align-items:center;gap:12px;border-bottom:2px solid #acd3ec;padding-bottom:clamp(6px,1.3vh,12px)}
.world-modal-head img{width:100%;height:clamp(38px,9vh,65px);object-fit:contain}
.world-modal-title{text-align:center}
.world-kicker{font-weight:900;color:#477db0;letter-spacing:2.5px;font-size:clamp(9px,1.7vh,12px)}
.world-modal-title h2{margin:2px 0 0;font-size:clamp(23px,5vh,39px);line-height:1.2;color:#123f70}
.world-close{width:clamp(34px,6vh,48px);height:clamp(34px,6vh,48px);border:2px solid #ffdc9b;border-radius:50%;background:linear-gradient(#ff9882,#d94233);color:#fff;font-size:clamp(21px,4vh,30px);font-weight:900;cursor:pointer}
.world-card>.world-help{position:relative;margin:0;text-align:center;font-size:clamp(11px,2.2vh,15px);color:#426381}
.world-card .world-choices{position:relative;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(9px,1.9vw,18px);min-height:0}
.world-card .world-choice{position:relative;min-width:0;display:flex;flex-direction:column;overflow:hidden;padding:0;border:2px solid #a8c5db;border-radius:13px;background:#fff;color:#163c61;text-align:right;cursor:pointer;font-family:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
.world-card .world-choice[aria-pressed="true"]{border-color:#d8a32b;box-shadow:0 0 0 3px rgba(222,170,57,.22),0 6px 18px rgba(29,86,134,.15);background:#fff8e6}
.world-card .world-choice:disabled{opacity:.64;cursor:not-allowed;filter:grayscale(.38)}
.world-card .world-choice:not(:disabled):hover{transform:translateY(-2px);border-color:#318fcd}
.world-card .world-thumbnail{width:100%;height:clamp(65px,16vh,155px);background-size:auto 100%,cover;background-position:center bottom,center}
.world-card .world-copy{padding:clamp(7px,1.6vh,13px) clamp(8px,1.4vw,15px);gap:clamp(2px,.5vh,6px)}
.world-card .world-copy strong{font-size:clamp(15px,3vh,22px);color:#113d68}
.world-card .world-copy small{font-size:clamp(11px,2vh,14px);line-height:1.45;color:#46627d}
.world-card .world-status{font-size:clamp(10px,1.7vh,13px);color:#815c13}
.world-modal-actions{position:relative;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding-top:clamp(3px,.9vh,9px);border-top:1px solid #bbd6e8}
.world-modal-actions button{min-height:clamp(34px,7vh,48px);padding:6px clamp(13px,3vw,26px);border:2px solid #f9fdff;border-radius:11px;font-family:inherit;font-size:clamp(13px,2.6vh,19px);font-weight:900;cursor:pointer;box-shadow:0 3px 10px rgba(28,92,148,.15)}
.world-back{color:#19466d;background:linear-gradient(#fff,#d6e8f8)}
.world-launch{color:#fff;background:linear-gradient(#4aa8eb,#1463a7)}
.world-launch:disabled{opacity:.65;cursor:wait}
.world-card button:focus-visible{outline:3px solid #d49c1e;outline-offset:3px}
@media(max-width:620px),(max-height:420px){
 .world-card .world-help{line-height:1.35}
 .world-card .world-choices{gap:8px}
 .world-card .world-thumbnail{height:clamp(48px,15vh,85px)}
 .world-card .world-copy small{font-size:clamp(9px,1.8vh,11px)}
 .world-card .world-copy strong{font-size:clamp(12px,2.5vh,17px)}
 .world-card .world-copy{padding:6px 8px}
}
@media(max-width:530px) and (orientation:portrait){
 .world-card .world-choices{grid-template-columns:minmax(0,1fr)}
 .world-card .world-choice{flex-direction:row}
 .world-card .world-thumbnail{width:34%;height:auto;min-height:80px}
 .world-card .world-copy{flex:1}
}

/* V70 — Spacious victory dialog with the same light blue / gold game-settings language. */
#victoryScreen{background:radial-gradient(ellipse at center,rgba(14,68,123,.50),rgba(2,20,45,.76))}
#victoryScreen .victory-light-card{position:relative;width:min(790px,94vw);max-height:calc(100dvh - 24px);gap:clamp(6px,1.3vh,13px);padding:clamp(13px,2.4vh,25px) clamp(15px,3vw,32px);border:3px solid #d7f3ff;border-radius:19px;background:linear-gradient(160deg,#f8fcff 0%,#e5f4ff 54%,#c6e2f6 100%);color:#19466c;box-shadow:0 0 0 4px rgba(35,114,183,.22) inset,0 22px 56px rgba(4,29,62,.52);overflow:auto}
#victoryScreen .victory-light-card::before{content:"";position:absolute;inset:6px;pointer-events:none;border:1px solid rgba(45,113,171,.23);border-radius:12px}
#victoryScreen .victory-head{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding-bottom:4px;border-bottom:2px solid #c4dfef;color:#3974a7;font-size:clamp(10px,1.9vh,14px);letter-spacing:2px;font-weight:950}
#victoryScreen .victory-head img{height:clamp(25px,5vh,46px);width:clamp(30px,6vh,54px);object-fit:contain}
#victoryScreen .victory-logo{width:min(335px,63vw);max-height:clamp(42px,13vh,114px);filter:drop-shadow(0 3px 8px rgba(17,100,157,.20))}
#victoryScreen .victory-medal{display:grid;place-items:center;flex:none;width:clamp(34px,7vh,56px);height:clamp(34px,7vh,56px);border:2px solid #f9db80;border-radius:50%;background:linear-gradient(160deg,#fff4bf,#dca836);color:#8c6316;font-size:clamp(22px,4vh,35px);box-shadow:0 3px 10px rgba(149,112,28,.18)}
#victoryScreen .victory-light-card h2{font-size:clamp(22px,4.8vh,39px);line-height:1.2;color:#104c80;text-shadow:0 2px 0 #fff,0 0 13px rgba(71,150,205,.18)}
#victoryScreen .victory-light-card p{max-width:640px;font-size:clamp(13px,2.6vh,19px);line-height:1.55;color:#355f82}
#victoryScreen .victory-score{display:flex;align-items:center;gap:clamp(8px,2vw,22px);justify-content:center;flex-wrap:wrap;width:min(530px,100%);padding:clamp(8px,1.5vh,13px) 16px;border:2px solid #b8d9ef;border-radius:12px;background:linear-gradient(#fff,#deefff);font-size:clamp(15px,3vh,23px);font-weight:900;color:#22517a}
#victoryScreen .victory-score strong{font-size:clamp(20px,4vh,32px);color:#af7411;margin:0}
#victoryScreen .victory-actions{position:relative;width:100%;gap:clamp(7px,1.3vw,12px);padding-top:clamp(4px,1vh,10px)}
#victoryScreen .victory-actions button{flex:1 1 180px;max-width:310px;min-height:clamp(39px,7.5vh,54px);padding:6px 12px;font-size:clamp(13px,2.7vh,18px);border:2px solid #fcfeff;border-radius:11px;color:#fff;background:linear-gradient(#4ca9e8,#1565a9);box-shadow:0 4px 10px rgba(28,93,151,.19)}
#victoryScreen .victory-actions #victoryNextBtn{background:linear-gradient(#f9df85,#d19c2d);color:#25415f;border-color:#fff6d1}
#victoryScreen .victory-actions #victoryMenuBtn{background:linear-gradient(#fff,#d2e5f5);color:#255275;border-color:#c1d9e9}
#victoryScreen .victory-footer{width:100%;padding-top:clamp(4px,1vh,10px);border-top:1px solid #b5d4e9;color:#6591b0;font-size:clamp(9px,1.6vh,12px);letter-spacing:1px;font-weight:900}
@media(max-height:430px) and (orientation:landscape){
 #victoryScreen .victory-light-card{gap:3px;padding:6px 13px}
 #victoryScreen .victory-logo{max-height:39px;width:180px}
 #victoryScreen .victory-medal{display:none}
 #victoryScreen .victory-light-card h2{font-size:clamp(17px,4vh,22px)}
 #victoryScreen .victory-light-card p{font-size:11px;line-height:1.25}
 #victoryScreen .victory-score{padding:3px 10px;font-size:13px}
 #victoryScreen .victory-score strong{font-size:18px}
 #victoryScreen .victory-actions{padding-top:2px}
 #victoryScreen .victory-actions button{min-height:30px;padding:3px 7px;font-size:12px;flex-basis:130px}
 #victoryScreen .victory-footer{display:none}
}

/* V70 — One flow layout prevents support meters overlapping at any resolution. */
.support-meters{position:absolute;z-index:12;top:clamp(105px,15.5vh,145px);left:max(15px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;gap:clamp(13px,2.5vh,24px);width:clamp(84px,8.3vw,112px);pointer-events:none}
.support-meters>.koji-meter,.support-meters>.hikaru-meter,.support-meters>.maria-meter{position:relative!important;top:auto!important;left:auto!important;right:auto!important;width:100%!important;min-height:0;gap:5px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.support-meters .koji-meter-ring,.support-meters .hikaru-meter-ring,.support-meters .maria-meter-ring{flex:none;width:clamp(77px,10.5vh,98px);height:clamp(77px,10.5vh,98px)}
.support-meters .koji-meter-label,.support-meters .hikaru-meter-label,.support-meters .maria-meter-label{box-sizing:border-box;display:block;flex:none;min-height:23px;min-width:55px;font-size:12px;line-height:17px;white-space:nowrap;padding:2px 8px;text-align:center}
.support-meters .koji-timer,.support-meters .hikaru-timer,.support-meters .maria-timer{font-size:clamp(9px,1.7vh,12px);line-height:1.2;bottom:4px;min-width:23px;padding:2px 4px}
/* No visible fire button: shooting remains automatic while moving. */
.touch-controls{justify-content:flex-start}
@media (max-width:900px),(max-height:600px),(pointer:coarse){
 .support-meters{top:clamp(49px,14.5vh,80px);left:max(5px,env(safe-area-inset-left));width:clamp(46px,10vw,78px);gap:clamp(5px,1.2vh,11px)}
 .support-meters>.koji-meter,.support-meters>.hikaru-meter,.support-meters>.maria-meter{gap:2px}
 .support-meters .koji-meter-ring,.support-meters .hikaru-meter-ring,.support-meters .maria-meter-ring{width:clamp(35px,calc((100dvh - 85px) / 4.6),62px);height:clamp(35px,calc((100dvh - 85px) / 4.6),62px)}
 .support-meters .koji-meter-ring::before,.support-meters .hikaru-meter-ring::before,.support-meters .maria-meter-ring::before{inset:4px}
 .support-meters .koji-meter-label,.support-meters .hikaru-meter-label,.support-meters .maria-meter-label{min-width:32px;min-height:15px;font-size:clamp(8px,1.75vh,10px);line-height:11px;padding:1px 4px}
 .support-meters .koji-timer,.support-meters .hikaru-timer,.support-meters .maria-timer{font-size:9px;bottom:3px;padding:0 3px}
}

/* V70 finish — clear contrast for the white game logo on the light victory card. */
#victoryScreen .victory-logo{box-sizing:border-box;width:min(325px,64vw);padding:4px 15px;border:2px solid #99d8ff;border-radius:12px;background:linear-gradient(165deg,#1c71b4,#0d3e70);filter:drop-shadow(0 3px 8px rgba(17,100,157,.18))}
@media(max-height:430px) and (orientation:landscape){#victoryScreen .victory-logo{width:190px;max-height:45px;padding:2px 10px}}
/* Small landscape phones: place the utility controls between the top HUD groups;
   keep all three support meters above the left-hand joystick. */
@media (max-width:900px),(max-height:600px),(pointer:coarse){
 .top-actions{top:max(10px,env(safe-area-inset-top));left:50%;right:auto;transform:translateX(-50%);gap:5px}
 .top-actions .icon-btn{width:clamp(31px,6.5vh,42px);height:clamp(31px,6.5vh,42px);font-size:clamp(17px,3vh,21px)}
 .top-actions .return-arrow-icon{width:clamp(18px,3.5vh,24px);height:clamp(18px,3.5vh,24px)}
 .support-meters{gap:clamp(3px,1vh,8px)}
 .support-meters .koji-meter-ring,.support-meters .hikaru-meter-ring,.support-meters .maria-meter-ring{width:clamp(29px,calc((100dvh - 170px) / 4.6),52px);height:clamp(29px,calc((100dvh - 170px) / 4.6),52px)}
 .support-meters .koji-meter-label,.support-meters .hikaru-meter-label,.support-meters .maria-meter-label{min-height:13px;line-height:11px;padding:1px 4px}
}


/* V74 — Premium full-screen world picker carousel (borderless, cinematic) */
.world-modal{position:absolute;inset:0;z-index:12;display:flex;align-items:stretch;justify-content:center;padding:0;background:radial-gradient(circle at center,rgba(39,101,171,.14),rgba(4,17,34,.70) 48%,rgba(2,10,20,.88) 100%);backdrop-filter:blur(8px)}
.world-screen{position:relative;display:flex;flex-direction:column;gap:clamp(8px,1.4vh,18px);width:100%;min-height:100%;padding:max(16px,env(safe-area-inset-top)) clamp(14px,3vw,42px) max(16px,env(safe-area-inset-bottom)) clamp(14px,3vw,42px);color:#ecf7ff;font-family:'Tajawal',sans-serif;overflow:hidden}
.world-screen::before,.world-screen::after{content:'';position:absolute;left:-8%;right:-8%;height:26vh;pointer-events:none;opacity:.24;background:url('assets/clouds.webp') repeat-x;background-size:auto 100%;animation:worldClouds 90s linear infinite}
.world-screen::before{top:7%;filter:blur(1px)}
.world-screen::after{bottom:12%;opacity:.12;animation-duration:120s;transform:scaleX(-1)}
@keyframes worldClouds{from{background-position:0 0}to{background-position:-1600px 0}}
.world-screen-head{position:relative;z-index:2;display:grid;grid-template-columns:clamp(42px,5vw,64px) 1fr clamp(48px,6vw,88px);align-items:center;gap:14px;padding-bottom:clamp(8px,1.6vh,14px)}
.world-screen-head img{width:100%;height:clamp(42px,6vw,76px);object-fit:contain;filter:drop-shadow(0 5px 12px rgba(0,0,0,.28))}
.world-modal-title{text-align:center}
.world-kicker{display:block;color:#9fd3ff;font-weight:900;letter-spacing:4px;font-size:clamp(10px,1.25vw,15px)}
.world-modal-title h2{margin:2px 0 0;font-size:clamp(28px,4vw,58px);line-height:1.1;color:#f4fbff;text-shadow:0 4px 18px rgba(50,144,233,.34)}
.world-help{position:relative;z-index:2;margin:0 auto;max-width:min(1040px,92vw);text-align:center;font-size:clamp(13px,1.45vw,22px);line-height:1.7;color:#d8ebff}
.world-close{align-self:start;width:clamp(40px,4.8vw,60px);height:clamp(40px,4.8vw,60px);border:none;border-radius:50%;background:linear-gradient(180deg,#ff9c84,#d94839);color:#fff;font-size:clamp(24px,2.8vw,34px);font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.world-carousel-shell{position:relative;z-index:2;display:grid;grid-template-columns:clamp(42px,5vw,64px) minmax(0,1fr) clamp(42px,5vw,64px);align-items:center;gap:clamp(10px,1.2vw,18px);flex:1;min-height:0}
.world-viewport{position:relative;overflow:hidden;min-height:min(62vh,600px);outline:none}
.world-track{position:relative;width:100%;height:100%;direction:ltr}
.world-slide{position:absolute;top:50%;left:50%;width:min(76vw,980px);height:min(72vh,540px);min-width:0;padding:0;border:none;border-radius:0;background:transparent;color:#fff;text-align:right;overflow:visible;cursor:pointer;transition:transform .45s cubic-bezier(.22,.75,.2,1),opacity .35s ease,filter .35s ease;filter:drop-shadow(0 22px 34px rgba(0,0,0,.24));pointer-events:auto}
.world-slide::before{content:'';position:absolute;inset:0;border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.00) 30%,rgba(255,255,255,.02));pointer-events:none}
.world-slide.is-center{transform:translate(-50%,-50%) scale(1);opacity:1;z-index:5}
.world-slide.is-prev{transform:translate(calc(-50% - 45%),calc(-50% + 1%)) scale(.84);opacity:.68;z-index:3}
.world-slide.is-next{transform:translate(calc(-50% + 45%),calc(-50% + 1%)) scale(.84);opacity:.68;z-index:3}
.world-slide.is-far-prev{transform:translate(calc(-50% - 82%),calc(-50% + 2%)) scale(.66);opacity:.12;z-index:1;pointer-events:none}
.world-slide.is-far-next{transform:translate(calc(-50% + 82%),calc(-50% + 2%)) scale(.66);opacity:.12;z-index:1;pointer-events:none}
.world-slide.is-hidden{transform:translate(-50%,-50%) scale(.55);opacity:0;z-index:0;pointer-events:none}
.world-slide.is-locked{filter:grayscale(.48) saturate(.82) brightness(.88) drop-shadow(0 22px 34px rgba(0,0,0,.18));opacity:.58}
.world-slide[aria-pressed="true"] .world-thumbnail{box-shadow:0 0 0 2px rgba(255,224,149,.35),0 30px 54px rgba(0,0,0,.26),0 0 32px rgba(112,189,255,.18)}
.world-slide-hero{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:radial-gradient(circle at center,rgba(255,255,255,.16),rgba(255,255,255,.04) 42%,rgba(255,255,255,.00) 62%)}
.world-slide .world-thumbnail{position:absolute;inset:0;width:100%;height:100%;min-height:280px;border-radius:34px;background-size:auto 100%,cover;background-position:center bottom,center;background-repeat:no-repeat;transition:transform .45s ease,filter .35s ease}
.world-slide.is-center .world-thumbnail{transform:scale(1.02)}
.world-slide-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,21,40,.00) 0%,rgba(1,21,40,.02) 35%,rgba(1,16,32,.52) 72%,rgba(1,12,24,.82) 100%);z-index:1;pointer-events:none}
.world-slide-hero::after{content:'';position:absolute;left:0;right:0;top:0;height:42%;background:url('assets/clouds.webp') repeat-x;background-size:auto 100%;opacity:.28;mix-blend-mode:screen;animation:worldClouds 78s linear infinite;z-index:1;pointer-events:none}
.world-copy{position:absolute;right:0;left:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:clamp(8px,1vh,12px);padding:clamp(18px,2.2vw,28px) clamp(20px,2.3vw,34px) clamp(20px,2.3vw,30px);background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(1,23,42,.22) 18%,rgba(4,28,52,.68) 64%,rgba(5,24,43,.88) 100%)}
.world-slide .world-copy strong{display:flex;align-items:center;gap:12px;font-size:clamp(28px,2.9vw,44px);line-height:1.15;color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.26)}
.world-slide .world-copy small{font-size:clamp(15px,1.35vw,21px);line-height:1.75;color:#d9edff;text-shadow:0 2px 10px rgba(0,0,0,.18)}
.world-slide .world-status{font-size:clamp(14px,1.25vw,18px);font-weight:900;color:#ffd979;text-shadow:0 2px 8px rgba(0,0,0,.26)}
.world-slide .world-status.locked{color:#d8e0e9}
.world-order{display:inline-flex;align-items:center;justify-content:center;min-width:clamp(44px,4vw,58px);height:clamp(44px,4vw,58px);border-radius:999px;background:linear-gradient(180deg,rgba(103,184,255,.96),rgba(28,95,156,.92));color:#fff;font-size:clamp(20px,2vw,28px);box-shadow:0 10px 22px rgba(7,58,103,.28)}
.world-nav{width:100%;height:clamp(56px,8vh,84px);border:none;border-radius:50%;background:linear-gradient(180deg,rgba(236,248,255,.24),rgba(76,119,164,.22));color:#fff;font-size:clamp(24px,2.5vw,38px);font-weight:900;cursor:pointer;backdrop-filter:blur(4px);box-shadow:0 10px 24px rgba(0,0,0,.22)}
.world-nav:disabled{opacity:.26;cursor:default}
.world-dots{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:10px;min-height:18px}
.world-dot{width:12px;height:12px;border:none;border-radius:999px;background:rgba(212,235,255,.35);cursor:pointer;transition:transform .2s ease,background-color .2s ease,opacity .2s ease}
.world-dot.is-active{width:38px;background:linear-gradient(90deg,#ffd97c,#f1b93d)}
.world-dot.is-locked{opacity:.45}

/* V107 — cinematic space backdrop for the world-selection screen. */
.world-modal{background:rgba(1,7,18,.28)!important;backdrop-filter:blur(2px)!important}
.world-screen{
  background:
    linear-gradient(90deg,rgba(1,8,20,.18) 0%,rgba(1,8,20,.04) 50%,rgba(1,8,20,.2) 100%),
    url('assets/world-selection-background.webp') center center / cover no-repeat !important;
}
.world-screen::before{content:""!important;display:block!important;position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,5,18,.12),rgba(0,5,18,.03) 52%,rgba(0,5,18,.26));z-index:0}
.world-screen>*{position:relative;z-index:1}
.world-modal-actions-full{position:relative;z-index:2;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;padding-top:clamp(6px,1vh,12px)}
.world-modal-actions-full button{min-width:min(320px,88vw);min-height:clamp(44px,7vh,60px);padding:8px 20px;border:none;border-radius:16px;font-family:inherit;font-size:clamp(18px,1.65vw,28px);font-weight:900;cursor:pointer;box-shadow:0 9px 22px rgba(0,0,0,.18)}
.world-back{color:#1b4d77;background:linear-gradient(180deg,#fff,#d8e9f8)}
.world-launch{color:#fff;background:linear-gradient(180deg,#53b0f0,#1763aa)}
.world-launch.is-locked{background:linear-gradient(180deg,#8a98a7,#596775)}
.world-screen button:focus-visible,.world-viewport:focus-visible{outline:3px solid #ffd86f;outline-offset:3px}
@media (max-width:1100px){
  .world-slide{width:min(82vw,880px);height:min(66vh,500px)}
  .world-slide.is-prev{transform:translate(calc(-50% - 39%),calc(-50% + 1%)) scale(.8)}
  .world-slide.is-next{transform:translate(calc(-50% + 39%),calc(-50% + 1%)) scale(.8)}
}
@media (max-width:900px){
  .world-screen{padding-inline:10px}
  .world-carousel-shell{grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
  .world-viewport{min-height:min(58vh,520px)}
  .world-slide{width:min(88vw,760px);height:min(60vh,460px)}
  .world-slide.is-prev{transform:translate(calc(-50% - 33%),calc(-50% + 1%)) scale(.78)}
  .world-slide.is-next{transform:translate(calc(-50% + 33%),calc(-50% + 1%)) scale(.78)}
  .world-slide .world-copy{padding:14px 14px 18px}
  .world-slide .world-copy strong{font-size:clamp(22px,4.4vw,31px)}
  .world-slide .world-copy small{font-size:clamp(13px,2.7vw,16px);line-height:1.6}
  .world-slide .world-status{font-size:clamp(12px,2.5vw,15px)}
  .world-modal-actions-full button{min-width:min(260px,86vw);font-size:clamp(16px,3.5vw,22px)}
}
@media (max-width:560px){
  .world-screen-head{grid-template-columns:44px 1fr 54px;gap:8px}
  .world-kicker{letter-spacing:2px}
  .world-modal-title h2{font-size:clamp(24px,8vw,34px)}
  .world-help{font-size:13px;line-height:1.55}
  .world-carousel-shell{grid-template-columns:36px minmax(0,1fr) 36px}
  .world-viewport{min-height:62vh}
  .world-slide{width:100%;height:min(58vh,430px)}
  .world-slide.is-center{transform:translate(-50%,-50%) scale(1)}
  .world-slide.is-prev{transform:translate(calc(-50% - 18%),calc(-50% + 1%)) scale(.76);opacity:.18}
  .world-slide.is-next{transform:translate(calc(-50% + 18%),calc(-50% + 1%)) scale(.76);opacity:.18}
  .world-slide .world-thumbnail,.world-slide-hero{border-radius:24px}
  .world-slide .world-copy{padding:12px 11px 14px}
  .world-order{min-width:36px;height:36px;font-size:18px}
  .world-dots{gap:7px}
  .world-dot{width:10px;height:10px}
  .world-dot.is-active{width:28px}
  .world-modal-actions-full{gap:10px}
  .world-modal-actions-full button{min-width:unset;width:100%}
}
@media (max-height:540px) and (orientation:landscape){
  .world-screen{gap:6px;padding-block:8px}
  .world-help{font-size:12px;line-height:1.4}
  .world-viewport{min-height:48vh}
  .world-slide{height:min(56vh,320px)}
  .world-slide .world-copy{padding:10px 12px 12px}
  .world-slide .world-copy strong{font-size:21px}
  .world-slide .world-copy small{font-size:12px;line-height:1.45}
  .world-slide .world-status{font-size:12px}
  .world-modal-actions-full button{min-height:40px;font-size:15px}
}

.world-modal{position:absolute;inset:0;z-index:12;display:flex;align-items:stretch;justify-content:center;padding:0;background:linear-gradient(180deg,rgba(7,24,44,.72),rgba(4,14,28,.82));backdrop-filter:blur(7px)}
.world-screen{position:relative;display:flex;flex-direction:column;gap:clamp(8px,1.6vh,18px);width:100%;min-height:100%;padding:max(16px,env(safe-area-inset-top)) clamp(14px,3vw,42px) max(16px,env(safe-area-inset-bottom)) clamp(14px,3vw,42px);color:#ecf7ff;font-family:'Tajawal',sans-serif;background:radial-gradient(circle at center,rgba(52,111,170,.18),rgba(3,17,32,.12) 40%,transparent 72%)}
.world-screen::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 20%,transparent 80%,rgba(255,255,255,.03))}
.world-screen-head{position:relative;display:grid;grid-template-columns:clamp(42px,5vw,64px) 1fr clamp(48px,6vw,88px);align-items:center;gap:14px;padding-bottom:clamp(8px,1.6vh,14px);border-bottom:1px solid rgba(192,225,255,.28)}
.world-screen-head img{width:100%;height:clamp(42px,6vw,76px);object-fit:contain;filter:drop-shadow(0 5px 12px rgba(0,0,0,.28))}
.world-modal-title{text-align:center}
.world-kicker{display:block;color:#9fd3ff;font-weight:900;letter-spacing:4px;font-size:clamp(10px,1.25vw,15px)}
.world-modal-title h2{margin:2px 0 0;font-size:clamp(28px,4vw,58px);line-height:1.1;color:#f4fbff;text-shadow:0 4px 18px rgba(50,144,233,.34)}
.world-help{margin:0 auto;max-width:min(1040px,92vw);text-align:center;font-size:clamp(13px,1.45vw,22px);line-height:1.7;color:#d8ebff}
.world-close{align-self:start;width:clamp(40px,4.8vw,60px);height:clamp(40px,4.8vw,60px);border:2px solid rgba(255,242,205,.72);border-radius:50%;background:linear-gradient(180deg,#ff9c84,#d94839);color:#fff;font-size:clamp(24px,2.8vw,34px);font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.world-carousel-shell{position:relative;display:grid;grid-template-columns:clamp(44px,5vw,68px) minmax(0,1fr) clamp(44px,5vw,68px);align-items:center;gap:clamp(10px,1.2vw,18px);flex:1;min-height:0}
.world-viewport{position:relative;overflow:hidden;min-height:min(58vh,560px);border-radius:28px;padding:clamp(6px,1vh,14px);background:linear-gradient(180deg,rgba(186,224,255,.12),rgba(80,124,172,.08));box-shadow:inset 0 0 0 1px rgba(199,228,255,.22),0 18px 45px rgba(0,0,0,.26)}
.world-track{display:flex;flex-wrap:nowrap;height:100%;transition:transform .38s cubic-bezier(.22,.75,.2,1);will-change:transform;direction:ltr}
.world-slide{position:relative;flex:0 0 100%;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:0;min-width:0;height:100%;padding:0;border:2px solid rgba(161,204,237,.58);border-radius:24px;background:linear-gradient(180deg,rgba(237,248,255,.98),rgba(212,232,250,.96));color:#11385d;text-align:right;overflow:hidden;cursor:pointer;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease,filter .25s ease}
.world-slide::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.world-slide[aria-pressed="true"]{border-color:#ffd368;box-shadow:0 0 0 4px rgba(255,210,94,.16),0 18px 34px rgba(4,27,56,.22);transform:translateY(-3px)}
.world-slide.is-locked{opacity:.55;filter:grayscale(.35) saturate(.85)}
.world-slide:not(.is-locked):hover{transform:translateY(-4px);border-color:#8dd0ff}
.world-slide-hero{position:relative;min-height:0;background:radial-gradient(circle at center,rgba(255,255,255,.24),transparent 62%)}
.world-slide .world-thumbnail{width:100%;height:100%;min-height:280px;background-size:auto 100%,cover;background-position:center bottom,center;background-repeat:no-repeat}
.world-slide .world-copy{padding:clamp(18px,2.1vw,28px);gap:clamp(8px,1vh,12px);background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.5))}
.world-slide .world-copy strong{font-size:clamp(26px,2.8vw,42px);line-height:1.15;color:#0d3967}
.world-slide .world-copy small{font-size:clamp(15px,1.35vw,21px);line-height:1.75;color:#476887}
.world-slide .world-status{font-size:clamp(14px,1.25vw,18px);font-weight:900;color:#8a6516}
.world-slide .world-status.locked{color:#6b7e95}
.world-order{display:inline-flex;align-items:center;justify-content:center;min-width:clamp(44px,4vw,58px);height:clamp(44px,4vw,58px);margin-left:12px;border-radius:50%;background:linear-gradient(180deg,#2d7fd0,#0f4f8e);color:#fff;font-size:clamp(20px,2vw,28px);box-shadow:0 8px 18px rgba(17,75,130,.28)}
.world-nav{width:100%;height:clamp(56px,8vh,84px);border:2px solid rgba(218,239,255,.32);border-radius:50%;background:linear-gradient(180deg,rgba(236,248,255,.24),rgba(76,119,164,.22));color:#fff;font-size:clamp(24px,2.5vw,38px);font-weight:900;cursor:pointer;backdrop-filter:blur(4px);box-shadow:0 10px 24px rgba(0,0,0,.22)}
.world-nav:disabled{opacity:.32;cursor:default}
.world-dots{display:flex;justify-content:center;align-items:center;gap:10px;min-height:18px}
.world-dot{width:12px;height:12px;border:none;border-radius:999px;background:rgba(212,235,255,.35);cursor:pointer;transition:transform .2s ease,background-color .2s ease,opacity .2s ease}
.world-dot.is-active{width:36px;background:linear-gradient(90deg,#ffd97c,#f1b93d)}
.world-dot.is-locked{opacity:.45}
.world-modal-actions-full{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;padding-top:clamp(6px,1vh,12px)}
.world-modal-actions-full button{min-width:min(320px,88vw);min-height:clamp(44px,7vh,60px);padding:8px 20px;border:2px solid rgba(255,255,255,.85);border-radius:14px;font-family:inherit;font-size:clamp(18px,1.65vw,28px);font-weight:900;cursor:pointer;box-shadow:0 9px 22px rgba(0,0,0,.18)}
.world-back{color:#1b4d77;background:linear-gradient(180deg,#fff,#d8e9f8)}
.world-launch{color:#fff;background:linear-gradient(180deg,#53b0f0,#1763aa)}
.world-launch.is-locked{background:linear-gradient(180deg,#8a98a7,#596775);border-color:rgba(222,232,241,.6)}
.world-screen button:focus-visible,.world-viewport:focus-visible{outline:3px solid #ffd86f;outline-offset:3px}
@media (max-width:900px){
  .world-screen{padding-inline:10px}
  .world-carousel-shell{grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
  .world-viewport{min-height:min(56vh,510px);border-radius:20px}
  .world-slide .world-thumbnail{min-height:220px}
  .world-slide .world-copy{padding:14px 14px 18px}
  .world-slide .world-copy strong{font-size:clamp(21px,4.4vw,30px)}
  .world-slide .world-copy small{font-size:clamp(13px,2.7vw,16px);line-height:1.6}
  .world-slide .world-status{font-size:clamp(12px,2.5vw,15px)}
  .world-modal-actions-full button{min-width:min(260px,86vw);font-size:clamp(16px,3.5vw,22px)}
}
@media (max-width:560px){
  .world-screen-head{grid-template-columns:44px 1fr 54px;gap:8px}
  .world-kicker{letter-spacing:2px}
  .world-modal-title h2{font-size:clamp(24px,8vw,34px)}
  .world-help{font-size:13px;line-height:1.55}
  .world-carousel-shell{grid-template-columns:36px minmax(0,1fr) 36px}
  .world-viewport{min-height:62vh;padding:4px}
  .world-slide{border-radius:18px}
  .world-slide .world-thumbnail{min-height:185px}
  .world-slide .world-copy{padding:12px 11px 14px}
  .world-order{min-width:36px;height:36px;font-size:18px;margin-left:8px}
  .world-dots{gap:7px}
  .world-dot{width:10px;height:10px}
  .world-dot.is-active{width:28px}
  .world-modal-actions-full{gap:10px}
  .world-modal-actions-full button{min-width:unset;width:100%}
}
@media (max-height:540px) and (orientation:landscape){
  .world-screen{gap:6px;padding-block:8px}
  .world-help{font-size:12px;line-height:1.4}
  .world-viewport{min-height:46vh}
  .world-slide .world-thumbnail{min-height:130px}
  .world-slide .world-copy{padding:10px 12px 12px}
  .world-slide .world-copy strong{font-size:21px}
  .world-slide .world-copy small{font-size:12px;line-height:1.45}
  .world-slide .world-status{font-size:12px}
  .world-modal-actions-full button{min-height:40px;font-size:15px}
}


/* V75 — Fix world images, remove the rectangular frame, add soft edge fade + bottom reflection */
.world-screen{background:radial-gradient(circle at center,rgba(45,112,187,.12),rgba(3,16,31,.68) 48%,rgba(2,10,20,.86) 100%)}
.world-screen::before,.world-screen::after{opacity:.18}
.world-screen-head{border-bottom:1px solid rgba(192,225,255,.2)}
.world-carousel-shell{gap:clamp(10px,1.2vw,20px)}
.world-viewport{overflow:visible !important;min-height:min(68vh,630px);background:transparent !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important}
.world-track{position:relative;height:100%;width:100%}
.world-slide{width:min(78vw,980px);height:min(68vh,560px);background:transparent !important;filter:none !important}
.world-slide::before,.world-slide::after{display:none !important}
.world-slide.is-locked{opacity:.5 !important;filter:grayscale(.55) saturate(.78) brightness(.86) !important}
.world-slide.is-center{transform:translate(-50%,-50%) scale(1) !important;opacity:1;z-index:5}
.world-slide.is-prev{transform:translate(calc(-50% - 41%),calc(-50% + 1%)) scale(.82) !important;opacity:.58;z-index:3}
.world-slide.is-next{transform:translate(calc(-50% + 41%),calc(-50% + 1%)) scale(.82) !important;opacity:.58;z-index:3}
.world-slide.is-far-prev{transform:translate(calc(-50% - 74%),calc(-50% + 3%)) scale(.62) !important;opacity:.10;z-index:1}
.world-slide.is-far-next{transform:translate(calc(-50% + 74%),calc(-50% + 3%)) scale(.62) !important;opacity:.10;z-index:1}
.world-slide.is-hidden{transform:translate(-50%,-50%) scale(.50) !important;opacity:0;z-index:0}
.world-slide-hero{position:relative;width:100%;height:100%;background:transparent !important;border-radius:0 !important;overflow:visible !important}
.world-visual{position:relative;width:100%;height:72%;overflow:visible}
.world-image,.world-reflection{display:block;background-image:var(--world-bg);background-repeat:no-repeat;background-size:100% 100%,cover;background-position:center bottom,center}
.world-image{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;box-shadow:0 26px 44px rgba(0,0,0,.28),0 0 24px rgba(114,190,255,.10);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.85) 10%,#000 17%,#000 83%,rgba(0,0,0,.85) 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.85) 10%,#000 17%,#000 83%,rgba(0,0,0,.85) 90%,transparent 100%)}
.world-slide.is-center .world-image{box-shadow:0 30px 54px rgba(0,0,0,.34),0 0 34px rgba(130,203,255,.14)}
.world-image::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 35%,rgba(3,24,43,.18) 72%,rgba(5,23,43,.72) 100%);pointer-events:none;z-index:1}
.world-image::after{content:'';position:absolute;left:-5%;right:-5%;top:6%;height:36%;background:url('assets/clouds.webp') repeat-x;background-size:auto 100%;opacity:.36;mix-blend-mode:screen;animation:worldClouds 76s linear infinite;pointer-events:none;z-index:1}
.world-reflection{position:absolute;left:6%;right:6%;top:calc(100% + 8px);height:26%;border-radius:0 0 30px 30px;transform:scaleY(-1);opacity:.20;filter:blur(1.6px);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.12) 42%,transparent 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.12) 42%,transparent 100%)}
.world-reflection::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(5,18,34,.48));pointer-events:none}
.world-copy{position:absolute;right:0;left:0;bottom:0;z-index:2;padding:clamp(16px,2vw,28px) clamp(16px,2vw,26px) clamp(16px,2vw,24px);background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(2,19,35,.14) 20%,rgba(3,23,42,.62) 58%,rgba(4,20,38,.88) 100%)}
.world-slide .world-copy strong{font-size:clamp(28px,2.8vw,43px)}
.world-slide .world-copy small{max-width:92%;font-size:clamp(15px,1.25vw,20px)}
.world-slide .world-status{font-size:clamp(14px,1.15vw,18px)}
.world-slide .world-status.locked{color:#eef6ff}
.world-nav{background:linear-gradient(180deg,rgba(236,248,255,.22),rgba(76,119,164,.18));border:none}
.world-modal-actions-full{padding-top:0}
.world-modal-actions-full button{border:none}
@media (max-width:900px){
  .world-viewport{min-height:min(61vh,520px)}
  .world-slide{width:min(88vw,780px);height:min(58vh,470px)}
  .world-slide.is-prev{transform:translate(calc(-50% - 30%),calc(-50% + 1%)) scale(.78) !important;opacity:.28}
  .world-slide.is-next{transform:translate(calc(-50% + 30%),calc(-50% + 1%)) scale(.78) !important;opacity:.28}
  .world-image{border-radius:26px}
  .world-copy{padding:14px 14px 16px}
}
@media (max-width:560px){
  .world-viewport{min-height:62vh}
  .world-slide{width:100%;height:min(54vh,430px)}
  .world-slide.is-prev{transform:translate(calc(-50% - 14%),calc(-50% + 1%)) scale(.76) !important;opacity:.15}
  .world-slide.is-next{transform:translate(calc(-50% + 14%),calc(-50% + 1%)) scale(.76) !important;opacity:.15}
  .world-image{border-radius:22px}
  .world-reflection{left:10%;right:10%;height:22%}
}
@media (max-height:540px) and (orientation:landscape){
  .world-viewport{min-height:50vh}
  .world-slide{height:min(52vh,320px)}
  .world-visual{height:70%}
  .world-reflection{height:22%}
  .world-copy{padding:10px 12px 12px}
}


/* V76 — Robust cinematic carousel rebuild */
.world-carousel-shell{position:relative;z-index:2;display:grid !important;grid-template-columns:clamp(42px,5vw,64px) minmax(0,1fr) clamp(42px,5vw,64px) !important;align-items:center;gap:clamp(10px,1.3vw,18px) !important}
.world-viewport{position:relative;overflow:hidden !important;min-height:min(70vh,650px) !important;background:transparent !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important}
.world-viewport::before,.world-viewport::after{content:'';position:absolute;top:0;bottom:0;width:18%;z-index:8;pointer-events:none}
.world-viewport::before{left:0;background:linear-gradient(90deg,rgba(2,11,22,.88),rgba(2,11,22,.42),transparent)}
.world-viewport::after{right:0;background:linear-gradient(270deg,rgba(2,11,22,.88),rgba(2,11,22,.42),transparent)}
.world-track{display:flex !important;flex-wrap:nowrap !important;align-items:flex-start;gap:clamp(22px,2vw,34px);height:auto !important;width:max-content;min-width:100%;padding:clamp(10px,1vh,16px) 0 clamp(34px,4vh,58px);transition:transform .48s cubic-bezier(.22,.75,.2,1) !important;will-change:transform;direction:ltr !important}
.world-slide{position:relative !important;top:auto !important;left:auto !important;flex:0 0 min(74vw,980px);width:min(74vw,980px) !important;height:auto !important;transform:none !important;border:none !important;background:transparent !important;opacity:1;filter:none;overflow:visible !important;transition:transform .36s ease,opacity .36s ease,filter .36s ease !important}
.world-slide::before,.world-slide::after{display:none !important}
.world-slide.is-center{z-index:5;transform:scale(1) !important;opacity:1 !important}
.world-slide.is-prev,.world-slide.is-next{z-index:4;transform:scale(.86) translateY(18px) !important;opacity:.54 !important}
.world-slide.is-far-prev,.world-slide.is-far-next,.world-slide.is-hidden{z-index:1;transform:scale(.72) translateY(26px) !important;opacity:.10 !important}
.world-slide.is-locked{filter:grayscale(.58) saturate(.8) brightness(.86) !important}
.world-slide-hero{position:relative;width:100%;height:auto !important;min-height:0 !important;background:transparent !important;overflow:visible !important}
.world-visual{position:relative;width:100%;aspect-ratio:16/8.7;overflow:visible}
.world-image,.world-reflection{display:block;background-image:var(--world-bg);background-repeat:no-repeat;background-size:100% 100%,cover;background-position:center bottom,center}
.world-image{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;box-shadow:0 28px 46px rgba(0,0,0,.30),0 0 24px rgba(112,189,255,.12);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.88) 8%,#000 18%,#000 82%,rgba(0,0,0,.88) 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.88) 8%,#000 18%,#000 82%,rgba(0,0,0,.88) 92%,transparent 100%)}
.world-image::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 32%,rgba(2,20,36,.14) 60%,rgba(3,19,35,.74) 100%);pointer-events:none;z-index:1}
.world-image::after{content:'';position:absolute;left:-4%;right:-4%;top:5%;height:34%;background:url('assets/clouds.webp') repeat-x;background-size:auto 100%;opacity:.36;mix-blend-mode:screen;animation:worldClouds 76s linear infinite;pointer-events:none;z-index:2}
.world-reflection{position:absolute;left:7%;right:7%;top:calc(100% + 10px);height:26%;transform:scaleY(-1);transform-origin:top center;opacity:.22;filter:blur(1.8px);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.48),rgba(0,0,0,.15) 40%,transparent 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.48),rgba(0,0,0,.15) 40%,transparent 100%)}
.world-copy{position:absolute !important;right:0;left:0;bottom:0;z-index:3;padding:clamp(18px,2vw,26px) clamp(18px,2.1vw,28px) clamp(18px,2vw,24px) !important;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(3,19,34,.12) 24%,rgba(4,24,43,.62) 62%,rgba(4,20,38,.9) 100%) !important}
.world-slide .world-copy strong{display:flex;align-items:center;gap:12px;font-size:clamp(28px,2.7vw,42px) !important;line-height:1.15;color:#fff !important;text-shadow:0 3px 10px rgba(0,0,0,.28)}
.world-slide .world-copy small{display:block;max-width:92%;font-size:clamp(15px,1.2vw,19px) !important;line-height:1.7;color:#dff0ff !important;text-shadow:0 2px 8px rgba(0,0,0,.24)}
.world-slide .world-status{display:block;margin-top:8px;font-size:clamp(14px,1.05vw,17px) !important;font-weight:900;color:#ffd36a !important;text-shadow:0 2px 8px rgba(0,0,0,.28)}
.world-slide .world-status.locked{color:#eef5ff !important}
.world-order{display:inline-flex;align-items:center;justify-content:center;min-width:clamp(42px,3.8vw,54px);height:clamp(42px,3.8vw,54px);border-radius:999px;background:linear-gradient(180deg,#66b6ff,#1d5f9d);color:#fff;font-size:clamp(19px,1.8vw,26px);box-shadow:0 10px 20px rgba(8,53,92,.3)}
.world-nav{width:100%;height:clamp(56px,8vh,82px);border:none !important;border-radius:50%;background:linear-gradient(180deg,rgba(236,248,255,.22),rgba(76,119,164,.18)) !important;color:#fff;font-size:clamp(24px,2.5vw,38px);font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.world-nav:disabled{opacity:.3;cursor:default}
.world-dots{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:10px;min-height:18px}
.world-dot{width:12px;height:12px;border:none;border-radius:999px;background:rgba(212,235,255,.35);cursor:pointer;transition:transform .2s ease,background-color .2s ease,opacity .2s ease}
.world-dot.is-active{width:36px;background:linear-gradient(90deg,#ffd97c,#f1b93d)}
.world-dot.is-locked{opacity:.45}
@media (max-width:920px){
  .world-viewport{min-height:min(64vh,560px) !important}
  .world-track{gap:16px;padding-bottom:42px}
  .world-slide{flex-basis:min(86vw,760px);width:min(86vw,760px) !important}
  .world-slide.is-prev,.world-slide.is-next{transform:scale(.8) translateY(16px) !important;opacity:.38 !important}
  .world-copy{padding:14px 14px 16px !important}
  .world-slide .world-copy strong{font-size:clamp(22px,4.2vw,30px) !important}
  .world-slide .world-copy small{font-size:clamp(13px,2.4vw,16px) !important;line-height:1.55}
}
@media (max-width:560px){
  .world-carousel-shell{grid-template-columns:36px minmax(0,1fr) 36px !important;gap:6px !important}
  .world-viewport{min-height:60vh !important}
  .world-slide{flex-basis:100%;width:100% !important}
  .world-slide.is-prev,.world-slide.is-next{opacity:.12 !important;transform:scale(.76) translateY(14px) !important}
  .world-image{border-radius:24px}
  .world-reflection{left:10%;right:10%;height:22%}
  .world-slide .world-copy strong{font-size:clamp(20px,6vw,26px) !important}
}

/* V125 — final, explicit craft alignment in the main character selector. */
@media (min-width:901px) and (min-height:601px){
  .menu-screen .pilot-stage[data-pilot="duke"] .pilot-ship{left:-42px !important}
  .menu-screen .pilot-stage[data-pilot="koji"] .pilot-ship{left:-15px !important}
  .menu-screen .pilot-stage[data-pilot="hikaru"] .pilot-ship{top:170px !important}
  .menu-screen .pilot-stage[data-pilot="maria"] .pilot-ship{top:172px !important}
}
@media (max-width:900px), (max-height:600px){
  .menu-screen .pilot-stage[data-pilot="duke"] .pilot-ship{left:-7% !important}
  .menu-screen .pilot-stage[data-pilot="koji"] .pilot-ship{left:-3% !important}
  .menu-screen .pilot-stage[data-pilot="hikaru"] .pilot-ship{top:128px !important}
  .menu-screen .pilot-stage[data-pilot="maria"] .pilot-ship{top:128px !important}
}

/* Fine alignment in the main player selector: keep every craft opposite its pilot portrait. */
.menu-screen .pilot-stage[data-pilot="duke"] .pilot-ship,
.menu-screen .pilot-stage[data-pilot="koji"] .pilot-ship{translate:clamp(-28px,-1.5vw,-12px) 0}
.menu-screen .pilot-stage[data-pilot="hikaru"] .pilot-ship,
.menu-screen .pilot-stage[data-pilot="maria"] .pilot-ship{translate:0 clamp(14px,1.7vh,24px)}

/* Desktop selector: exact 3% alignment offsets, independent from the flight animation. */
@media (min-width:901px) and (min-height:601px){
  .menu-screen .pilot-stage[data-pilot="duke"] .pilot-ship{
    left:calc(-42px - 20%) !important;
  }
  .menu-screen .pilot-stage[data-pilot="koji"] .pilot-ship{
    left:calc(-15px - 3vw) !important;
    bottom:calc(var(--pilot-title-bottom) + var(--pilot-panel-height) + 50px - 3vh) !important;
  }
  .menu-screen .pilot-stage[data-pilot="hikaru"] .pilot-ship{
    top:calc(170px - 20%) !important;
    bottom:auto !important;
  }
  .menu-screen .pilot-stage[data-pilot="maria"] .pilot-ship{
    top:calc(172px - 20%) !important;
    bottom:auto !important;
  }
}

/* Main player-selection only: mirror craft art away from the pilot portrait. */
.menu-screen .pilot-stage .pilot-ship{scale:-1 1;transform-origin:center}

/* V108 — final world-screen backdrop: this rule deliberately comes last. */
#app .world-modal{background:rgba(0,5,17,.18)!important}
#app .world-screen{
  background:
    linear-gradient(180deg,rgba(0,7,22,.12),rgba(0,7,22,.30)),
    url('assets/world-selection-background.webp') center center / cover no-repeat!important;
}
#app .world-screen::before,#app .world-screen::after{display:none!important}

/* Full-body commanders in the vehicle briefing screens. */
.vehicle-briefing .briefing-pilot{position:relative;display:grid;grid-template-columns:minmax(130px,1fr) minmax(110px,.8fr);align-items:center;gap:clamp(8px,1.6vw,18px);direction:ltr;text-align:right}
.vehicle-briefing .briefing-portrait-wrap{position:relative;width:clamp(160px,20vw,285px);height:clamp(260px,48vh,510px);padding:0;border-radius:0;background:transparent;box-shadow:none;isolation:isolate;overflow:visible}
.vehicle-briefing .briefing-portrait-wrap::before{content:"";position:absolute;z-index:-1;inset:14% -22%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--briefing-accent) 72%,transparent) 0%,color-mix(in srgb,var(--briefing-accent) 24%,transparent) 34%,transparent 70%);filter:blur(7px);animation:briefingCommanderAura 2.6s ease-in-out infinite}
.vehicle-briefing .briefing-portrait-wrap::after{content:"";position:absolute;z-index:-1;inset:19% -11%;border:1px solid color-mix(in srgb,var(--briefing-accent) 70%,transparent);border-radius:50%;box-shadow:0 0 26px var(--briefing-accent),inset 0 0 23px color-mix(in srgb,var(--briefing-accent) 40%,transparent);animation:briefingCommanderRing 9s linear infinite}
.vehicle-briefing .briefing-portrait-wrap img{width:100%;height:100%;object-fit:contain;border-radius:0;background:transparent;filter:drop-shadow(0 0 10px var(--briefing-accent)) drop-shadow(0 18px 20px rgba(0,0,0,.72));animation:briefingCommanderFloat 3.4s ease-in-out infinite}
.vehicle-briefing .briefing-pilot-copy{direction:rtl;text-align:right;align-self:center;padding:12px 10px;border-inline-start:2px solid var(--briefing-accent);background:transparent}
.vehicle-briefing .briefing-pilot-copy span{display:block;margin-bottom:4px}.vehicle-briefing .briefing-pilot-copy strong{font-size:clamp(19px,3.1vh,33px);line-height:1.1}.vehicle-briefing .briefing-pilot-copy em{display:block;margin:7px 0;font-style:normal;font-size:clamp(12px,1.8vh,16px);font-weight:900;color:#fff2ae}.vehicle-briefing .briefing-pilot-copy small{display:block;line-height:1.45}
@keyframes briefingCommanderAura{0%,100%{opacity:.65;scale:.94}50%{opacity:1;scale:1.08}}@keyframes briefingCommanderRing{to{rotate:360deg}}@keyframes briefingCommanderFloat{0%,100%{translate:0 -4px}50%{translate:0 5px}}
@media(max-width:700px),(max-height:600px){.vehicle-briefing .briefing-pilot{grid-template-columns:1fr;gap:0}.vehicle-briefing .briefing-portrait-wrap{width:clamp(105px,23vw,150px);height:clamp(175px,31vh,230px)}.vehicle-briefing .briefing-pilot-copy{padding:4px 6px;border-inline-start-width:1px}.vehicle-briefing .briefing-pilot-copy span{font-size:9px}.vehicle-briefing .briefing-pilot-copy strong{font-size:clamp(13px,2.4vh,18px)}.vehicle-briefing .briefing-pilot-copy em{margin:3px 0;font-size:10px}.vehicle-briefing .briefing-pilot-copy small{font-size:9px}}

/* Keep the commander clear of the information panel: aura only, no circular ring. */
@media(min-width:701px) and (min-height:601px){.vehicle-briefing .briefing-portrait-wrap{translate:clamp(-115px,-5vw,-62px) 0}}
.vehicle-briefing .briefing-portrait-wrap::after{display:none}

/* V101 — world mission briefing: one native image inside a simple glowing orb. */
.world-screen .world-slide{width:min(88vw,1060px) !important;max-width:100% !important}
.world-screen .world-slide-hero{display:grid !important;grid-template-columns:minmax(0,1.25fr) minmax(210px,.75fr) !important;align-items:center !important;gap:clamp(20px,4vw,58px) !important;direction:ltr !important;background:rgba(1,17,35,.18) !important;border-radius:28px !important;overflow:visible !important}
.world-screen .world-copy{position:relative !important;inset:auto !important;display:block !important;margin:0 !important;padding:clamp(16px,2.4vw,30px) !important;background:linear-gradient(90deg,rgba(2,17,35,.84),rgba(5,28,53,.55),transparent) !important;direction:rtl !important;text-align:right !important}
.world-screen .world-copy::before{content:'موجز المهمة';display:block;margin-bottom:8px;color:var(--world-accent);font-size:12px;font-weight:900;letter-spacing:2px}
.world-screen .world-slide .world-copy strong{font-size:clamp(27px,3vw,43px) !important;color:#fff !important}
.world-screen .world-slide .world-copy small{max-width:100% !important;margin-top:12px;font-size:clamp(14px,1.25vw,19px) !important;line-height:1.82 !important;color:#e7f4ff !important}
.world-screen .world-status{margin-top:14px !important;color:var(--world-accent) !important}
.world-screen .world-status.locked{color:#e7edf3 !important}
.world-screen .world-visual{position:relative !important;width:100% !important;height:auto !important;aspect-ratio:1 !important;min-height:0 !important;display:grid !important;place-items:center !important;overflow:visible !important}
.world-screen .world-orb{position:relative;display:block;width:min(100%,330px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#09223c;border:5px solid var(--world-accent);box-shadow:0 0 0 7px rgba(255,255,255,.10),0 0 22px var(--world-accent),0 20px 34px rgba(0,0,0,.36)}
.world-screen .world-orb::before{content:'';position:absolute;inset:10px;border:1px solid rgba(255,255,255,.75);border-radius:50%;z-index:2;pointer-events:none}
.world-screen .world-orb::after{content:'';position:absolute;inset:-13px;border:2px solid var(--world-accent);border-radius:50%;z-index:3;pointer-events:none}
.world-screen .world-orb-image{display:block !important;width:100% !important;height:100% !important;opacity:1 !important;visibility:visible !important;object-fit:cover !important;object-position:center !important;transform:none !important}
.world-screen .world-image,.world-screen .world-card-img{display:none !important}
@media (max-width:920px){.world-screen .world-slide-hero{grid-template-columns:minmax(0,1.2fr) minmax(170px,.8fr) !important;gap:18px !important}.world-screen .world-orb{width:min(100%,250px)}}

/* V102 — larger world art, no card framing, and a quiet translucent black veil. */
.world-modal{background:rgba(0,0,0,.74) !important;backdrop-filter:none !important}
.world-screen{background:transparent !important}
.world-screen-head{grid-template-columns:clamp(68px,7vw,104px) 1fr clamp(86px,9vw,132px) !important;border-bottom:none !important;padding-bottom:0 !important}
.world-screen-head img{height:clamp(66px,9vw,118px) !important}
.world-modal-title h2{font-size:clamp(34px,4.8vw,68px) !important}
.world-kicker{font-size:clamp(12px,1.45vw,18px) !important}
.world-help{font-size:clamp(15px,1.6vw,23px) !important}
.world-screen .world-slide{width:min(94vw,1180px) !important}
.world-screen .world-slide-hero{grid-template-columns:minmax(0,1fr) minmax(320px,1fr) !important;gap:clamp(20px,3vw,44px) !important;background:transparent !important}
.world-screen .world-copy{padding:clamp(18px,2.6vw,36px) !important;background:linear-gradient(90deg,rgba(0,0,0,.56),rgba(0,0,0,.22),transparent) !important}
.world-screen .world-slide .world-copy strong{font-size:clamp(32px,3.6vw,52px) !important}
.world-screen .world-slide .world-copy small{font-size:clamp(16px,1.45vw,22px) !important;line-height:1.88 !important}
.world-screen .world-status{font-size:clamp(15px,1.25vw,19px) !important}
.world-screen .world-orb{width:min(100%,420px) !important;border-width:5px !important}
@media (max-width:920px){.world-screen .world-slide-hero{grid-template-columns:minmax(0,1fr) minmax(250px,1fr) !important}.world-screen .world-orb{width:min(100%,340px) !important}}

/* V104 — calm navigation treatment shared by desktop and mobile. */
.world-close{border:1px solid rgba(162,218,255,.72) !important;background:linear-gradient(180deg,#398bc8,#123f75) !important;box-shadow:0 8px 20px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.25) !important}

/* V105 — focused mission page, using the game Arabic typeface. */
.world-modal,.world-screen{background:#030507 !important;backdrop-filter:none !important}
.world-screen,.world-screen *{font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',Tahoma,Arial,sans-serif !important}
.world-screen-head{grid-template-columns:1fr clamp(72px,8vw,112px) !important}

/* V106 — desktop web play is always available; installation remains an optional shortcut. */
@media (pointer:fine){.install-shortcut{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:'Tajawal',sans-serif}.menu-footer{gap:7px}}
@media (max-height:540px) and (orientation:landscape){
  .world-viewport{min-height:50vh !important}
  .world-track{padding-bottom:24px}
  .world-slide{flex-basis:min(76vw,640px);width:min(76vw,640px) !important}
  .world-copy{padding:10px 12px 12px !important}
  .world-slide .world-copy strong{font-size:20px !important}
  .world-slide .world-copy small{font-size:12px !important;line-height:1.4}
}


/* V77 — simplified world slider: no clouds, no frame, clearer images */
.world-screen::before,.world-screen::after,.world-viewport::before,.world-viewport::after,.world-image::after{display:none !important;content:none !important}
.world-screen{background:radial-gradient(circle at center,rgba(31,94,162,.10),rgba(4,16,32,.56) 48%,rgba(2,10,20,.78) 100%) !important}
.world-screen-head{border-bottom:1px solid rgba(183,216,245,.18) !important}
.world-carousel-shell{grid-template-columns:clamp(42px,5vw,64px) minmax(0,1fr) clamp(42px,5vw,64px) !important;gap:clamp(8px,1vw,16px) !important}
.world-viewport{overflow:hidden !important;min-height:min(66vh,600px) !important;background:transparent !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important}
.world-track{display:flex !important;flex-wrap:nowrap !important;align-items:center !important;gap:clamp(18px,1.6vw,28px) !important;min-width:100%;width:max-content !important;height:auto !important;padding:8px 0 42px !important;direction:ltr !important;transition:transform .42s cubic-bezier(.22,.75,.2,1) !important}
.world-slide{position:relative !important;top:auto !important;left:auto !important;flex:0 0 min(74vw,920px) !important;width:min(74vw,920px) !important;height:auto !important;border:none !important;background:transparent !important;overflow:visible !important;transition:transform .34s ease,opacity .34s ease,filter .34s ease !important;opacity:1}
.world-slide::before,.world-slide::after{display:none !important}
.world-slide.is-center{transform:scale(1) !important;opacity:1 !important;z-index:5}
.world-slide.is-prev,.world-slide.is-next{transform:scale(.84) translateY(14px) !important;opacity:.34 !important;z-index:3}
.world-slide.is-far-prev,.world-slide.is-far-next,.world-slide.is-hidden{transform:scale(.72) translateY(20px) !important;opacity:.06 !important;z-index:1}
.world-slide.is-locked{filter:grayscale(.52) saturate(.82) brightness(.88) !important}
.world-slide-hero{position:relative;width:100%;height:auto !important;min-height:0 !important;background:transparent !important;overflow:visible !important}
.world-visual{position:relative;width:100%;aspect-ratio:16/8.6;overflow:visible}
.world-image,.world-reflection{display:block;background-image:var(--world-bg);background-repeat:no-repeat;background-size:100% 100%,cover;background-position:center bottom,center}
.world-image{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;box-shadow:0 22px 42px rgba(0,0,0,.28);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.92) 9%,#000 18%,#000 82%,rgba(0,0,0,.92) 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.92) 9%,#000 18%,#000 82%,rgba(0,0,0,.92) 91%,transparent 100%)}
.world-image::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0) 28%,rgba(2,18,35,.08) 56%,rgba(3,17,32,.66) 100%);pointer-events:none;z-index:1}
.world-reflection{position:absolute;left:8%;right:8%;top:calc(100% + 8px);height:24%;transform:scaleY(-1);opacity:.18;filter:blur(1.2px);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.12) 42%,transparent 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.12) 42%,transparent 100%)}
.world-copy{position:absolute !important;right:0;left:0;bottom:0;z-index:3;padding:18px 22px 18px !important;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(3,18,34,.16) 26%,rgba(4,23,42,.62) 66%,rgba(4,20,38,.88) 100%) !important}
.world-slide .world-copy strong{display:flex;align-items:center;gap:12px;font-size:clamp(28px,2.7vw,40px) !important;line-height:1.15;color:#fff !important;text-shadow:0 2px 8px rgba(0,0,0,.28)}
.world-slide .world-copy small{display:block;max-width:95%;font-size:clamp(14px,1.12vw,18px) !important;line-height:1.65;color:#e2f2ff !important;text-shadow:0 2px 8px rgba(0,0,0,.24)}
.world-slide .world-status{display:block;margin-top:8px;font-size:clamp(13px,1vw,16px) !important;font-weight:900;color:#ffd266 !important;text-shadow:0 2px 8px rgba(0,0,0,.28)}
.world-slide .world-status.locked{color:#edf5ff !important}
.world-order{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;border-radius:999px;background:linear-gradient(180deg,#67b7ff,#2164a1);color:#fff;font-size:22px;box-shadow:0 8px 18px rgba(8,53,92,.3)}
.world-nav{border:none !important;background:linear-gradient(180deg,rgba(236,248,255,.24),rgba(76,119,164,.18)) !important;color:#fff !important;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.world-nav:disabled{opacity:.28}
@media (max-width:920px){
  .world-viewport{min-height:min(60vh,520px) !important}
  .world-slide{flex-basis:min(86vw,760px) !important;width:min(86vw,760px) !important}
  .world-slide.is-prev,.world-slide.is-next{transform:scale(.80) translateY(12px) !important;opacity:.22 !important}
  .world-copy{padding:14px 14px 16px !important}
  .world-slide .world-copy strong{font-size:clamp(22px,4.3vw,30px) !important}
  .world-slide .world-copy small{font-size:clamp(13px,2.25vw,15px) !important;line-height:1.55}
}
@media (max-width:560px){
  .world-carousel-shell{grid-template-columns:34px minmax(0,1fr) 34px !important;gap:4px !important}
  .world-viewport{min-height:58vh !important}
  .world-slide{flex-basis:100% !important;width:100% !important}
  .world-slide.is-prev,.world-slide.is-next{opacity:.10 !important;transform:scale(.75) translateY(10px) !important}
  .world-image{border-radius:22px}
  .world-reflection{left:12%;right:12%;height:20%}
  .world-slide .world-copy strong{font-size:clamp(20px,6vw,26px) !important}
}


/* V78 — remove gradient fade, simplify world images for maximum clarity */
.world-screen{background:radial-gradient(circle at center,rgba(38,106,178,.06),rgba(4,16,32,.42) 50%,rgba(2,10,20,.72) 100%) !important}
.world-screen::before,.world-screen::after,.world-viewport::before,.world-viewport::after,.world-image::before,.world-image::after,.world-reflection{display:none !important;content:none !important}
.world-viewport{overflow:hidden !important;min-height:min(64vh,560px) !important}
.world-track{padding:8px 0 28px !important;gap:18px !important}
.world-slide{flex:0 0 min(72vw,900px) !important;width:min(72vw,900px) !important}
.world-slide.is-center{transform:scale(1) !important;opacity:1 !important}
.world-slide.is-prev,.world-slide.is-next{transform:scale(.82) translateY(10px) !important;opacity:.20 !important}
.world-slide.is-far-prev,.world-slide.is-far-next,.world-slide.is-hidden{transform:scale(.74) translateY(16px) !important;opacity:.02 !important}
.world-slide.is-locked{filter:grayscale(.35) saturate(.9) brightness(.94) !important}
.world-visual{aspect-ratio:16/7.8 !important}
.world-image{border-radius:26px !important;overflow:hidden !important;box-shadow:0 18px 38px rgba(0,0,0,.24) !important;-webkit-mask-image:none !important;mask-image:none !important;background-size:100% 100%,100% 100% !important;background-position:center center,center center !important}
.world-copy{position:relative !important;right:auto !important;left:auto !important;bottom:auto !important;margin-top:12px !important;padding:10px 8px 0 !important;background:none !important}
.world-slide .world-copy strong{font-size:clamp(26px,2.4vw,36px) !important;color:#ffffff !important;text-shadow:none !important}
.world-slide .world-copy small{max-width:100% !important;font-size:clamp(14px,1vw,17px) !important;color:#dcebfa !important;text-shadow:none !important}
.world-slide .world-status{font-size:clamp(13px,.92vw,15px) !important;color:#ffd35e !important;text-shadow:none !important}
.world-slide .world-status.locked{color:#eaf2fb !important}
.world-order{min-width:42px !important;height:42px !important;font-size:20px !important}
.world-modal-actions-full{padding-top:4px !important}
@media (max-width:920px){
  .world-viewport{min-height:min(58vh,500px) !important}
  .world-slide{flex-basis:min(84vw,740px) !important;width:min(84vw,740px) !important}
  .world-slide.is-prev,.world-slide.is-next{opacity:.12 !important;transform:scale(.78) translateY(8px) !important}
}
@media (max-width:560px){
  .world-viewport{min-height:54vh !important}
  .world-slide{flex-basis:100% !important;width:100% !important}
  .world-slide.is-prev,.world-slide.is-next{opacity:.08 !important;transform:scale(.74) translateY(6px) !important}
  .world-image{border-radius:18px !important}
  .world-slide .world-copy strong{font-size:clamp(20px,5vw,24px) !important}
}


/* V79 — world picker rebuilt as a simple single-card selector */
.world-screen::before,.world-screen::after,.world-viewport::before,.world-viewport::after,.world-image::before,.world-image::after,.world-reflection{display:none !important;content:none !important}
.world-screen{background:radial-gradient(circle at center,rgba(35,99,167,.08),rgba(4,16,32,.52) 52%,rgba(2,10,20,.78) 100%) !important}
.world-screen-head{border-bottom:1px solid rgba(190,220,245,.18) !important}
.world-carousel-shell{display:grid !important;grid-template-columns:clamp(44px,5vw,64px) minmax(0,1fr) clamp(44px,5vw,64px) !important;align-items:center !important;gap:12px !important}
.world-viewport{overflow:visible !important;min-height:min(64vh,590px) !important;background:transparent !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important}
.world-track{display:block !important;width:100% !important;min-width:0 !important;height:auto !important;padding:10px 0 12px !important;transform:none !important}
.world-slide{position:relative !important;display:block !important;top:auto !important;left:auto !important;flex:none !important;width:min(88vw,1050px) !important;max-width:100% !important;height:auto !important;margin:0 auto !important;border:none !important;background:transparent !important;transform:none !important;opacity:1 !important;filter:none !important;overflow:visible !important}
.world-slide::before,.world-slide::after{display:none !important}
.world-slide.is-locked{filter:grayscale(.4) brightness(.9) !important}
.world-slide-hero{position:relative;width:100%;background:transparent !important;overflow:visible !important}
.world-visual{position:relative;width:100%;aspect-ratio:16/8.1}
.world-image{position:relative;display:block;width:100%;height:100%;border-radius:26px;overflow:hidden;background-image:var(--world-bg);background-repeat:no-repeat;background-size:100% 100%,100% 100%;background-position:center center,center center;box-shadow:0 20px 44px rgba(0,0,0,.26)}
.world-copy{position:relative !important;right:auto !important;left:auto !important;bottom:auto !important;margin-top:14px !important;padding:0 6px !important;background:none !important;text-align:right}
.world-slide .world-copy strong{display:flex;align-items:center;gap:12px;font-size:clamp(28px,2.6vw,40px) !important;line-height:1.12;color:#ffffff !important;text-shadow:none !important}
.world-slide .world-copy small{display:block;max-width:100% !important;font-size:clamp(15px,1.15vw,18px) !important;line-height:1.7;color:#dcebf8 !important;text-shadow:none !important;margin-top:10px}
.world-slide .world-status{display:block;margin-top:10px;font-size:clamp(14px,1vw,16px) !important;font-weight:900;color:#ffd86f !important;text-shadow:none !important}
.world-slide .world-status.locked{color:#eef5ff !important}
.world-order{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;border-radius:999px;background:linear-gradient(180deg,#67b7ff,#2164a1);color:#fff;font-size:22px;box-shadow:0 8px 18px rgba(8,53,92,.3)}
.world-nav{width:100%;height:clamp(56px,8vh,82px);border:none !important;border-radius:50%;background:linear-gradient(180deg,rgba(236,248,255,.24),rgba(76,119,164,.18)) !important;color:#fff !important;font-size:clamp(24px,2.5vw,38px);font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.world-nav:disabled{opacity:.3;cursor:default}
.world-dots{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:10px;min-height:18px}
.world-dot{width:12px;height:12px;border:none;border-radius:999px;background:rgba(212,235,255,.35);cursor:pointer;transition:transform .2s ease,background-color .2s ease,opacity .2s ease}
.world-dot.is-active{width:36px;background:linear-gradient(90deg,#ffd97c,#f1b93d)}
.world-dot.is-locked{opacity:.45}
@media (max-width:920px){
  .world-viewport{min-height:min(58vh,500px) !important}
  .world-slide{width:min(92vw,780px) !important}
  .world-slide .world-copy strong{font-size:clamp(22px,4.2vw,30px) !important}
  .world-slide .world-copy small{font-size:clamp(13px,2.2vw,16px) !important;line-height:1.6}
}
@media (max-width:560px){
  .world-carousel-shell{grid-template-columns:36px minmax(0,1fr) 36px !important;gap:6px !important}
  .world-viewport{min-height:54vh !important}
  .world-slide{width:100% !important}
  .world-image{border-radius:18px}
  .world-slide .world-copy strong{font-size:clamp(20px,6vw,26px) !important}
}

/* V147: slimmer, lower-left notices; the full-height pilot still extends above the panel.
   A small clearance from the virtual joystick is preserved on touchscreens. */
.battle-notice{
  position:absolute;z-index:26;top:auto;bottom:clamp(18px,3.2dvh,35px);
  left:max(5px,env(safe-area-inset-left));right:auto;
  width:min(30vw,425px);max-width:calc(100vw - 12px);min-height:48px;
  padding:0;direction:ltr;display:flex;align-items:flex-end;pointer-events:none;
  font-family:Tajawal,Tahoma,Arial,sans-serif;font-size:clamp(14px,1.2vw,18px);
  color:#b7ffbf;opacity:0;transform:translateX(-15px) scale(.97);transform-origin:left bottom;
  transition:opacity .32s ease,transform .4s cubic-bezier(.18,1,.32,1),filter .32s ease;
}
.battle-notice.visible{opacity:1;transform:translateX(0) scale(1)}
.battle-notice.fading{opacity:0;transform:translateX(-8px) scale(.985);filter:blur(.5px)}
.battle-notice .bn-panel{
  position:relative;width:100%;min-height:48px;display:flex;flex-direction:column;
  align-items:stretch;justify-content:center;padding:7px 11px;direction:rtl;text-align:right;
  border:1px solid rgba(104,248,166,.6);border-radius:10px;
  background:linear-gradient(120deg,rgba(0,12,12,.17),rgba(0,7,10,.23));
  box-shadow:inset 0 0 8px rgba(60,255,138,.04),0 4px 16px rgba(0,0,0,.10);
  -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);
}
.battle-notice.urgent .bn-panel{border-color:rgba(207,249,148,.78)}
.battle-notice .bn-label{font-size:.7em;color:#c2f5ff;font-weight:900;line-height:1.23;margin-bottom:3px;
  text-shadow:0 2px 5px #01121b,0 0 10px #01121b}
.battle-notice .bn-body{display:block;font-weight:900;line-height:1.3;unicode-bidi:plaintext;overflow-wrap:anywhere;
  text-shadow:0 2px 5px #001309,0 0 12px #001309,1px 1px 2px #001309}
.battle-notice .bn-craft{font-size:.78em;line-height:1.4;color:#e0f6ff;font-weight:800;margin-top:3px;
  text-shadow:0 2px 5px #00121b,0 0 10px #00121b}
.battle-notice .bn-cursor{display:inline-block;width:.55ch;height:.81em;vertical-align:-.08em;
  margin-inline-start:3px;background:currentColor;animation:noticeCursor .95s steps(1) infinite}
.battle-notice .bn-pilot{display:none}
.battle-notice.support-arrival{--bn-portrait-w:clamp(118px,13vw,184px);
  width:min(35vw,485px);min-height:clamp(76px,11vh,105px)}
.battle-notice.support-arrival .bn-pilot{
  position:absolute;z-index:2;left:5px;bottom:5px;display:flex;align-items:flex-end;justify-content:center;
  width:var(--bn-portrait-w);height:clamp(206px,33vh,285px);overflow:visible;
  animation:bnPilotEnter .58s cubic-bezier(.16,1,.3,1) both;
}
.battle-notice .bn-pilot img{display:block;max-width:100%;width:100%;height:100%;object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 0 8px var(--bn-accent,#6bdcff)) drop-shadow(0 5px 8px #001923)}
.battle-notice.support-arrival .bn-panel{
  width:100%;min-height:clamp(76px,11vh,105px);
  margin-left:0;padding:7px 10px 7px calc(var(--bn-portrait-w) + 9px);
  border-color:var(--bn-accent,#6bdcff);
}
@keyframes bnPilotEnter{from{opacity:0;transform:translateX(-18px) scale(.94)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes noticeCursor{50%{opacity:0}}
.boss-charge-state{text-align:center;font:bold 11px Tajawal,Tahoma,sans-serif;color:#fff1b1;line-height:1.5;padding-top:4px}
.boss-hud.charging{border-color:rgba(255,227,93,.92);box-shadow:0 0 19px rgba(255,188,61,.54),inset 0 0 15px rgba(255,255,255,.06)}
/* Landscape touchscreens: place the shorter banner immediately above the joystick. */
@media(max-width:1024px),(pointer:coarse),(max-height:600px){
  #app .battle-notice{top:auto;bottom:calc(max(6px,env(safe-area-inset-bottom)) + 6px);
    left:max(0px,env(safe-area-inset-left));right:auto;
    width:min(34vw,236px);max-width:calc(100vw - 8px);
    min-height:40px;font-size:clamp(10px,1.45vw,13px)}
  #app .battle-notice .bn-panel{min-height:40px;padding:5px 7px;border-radius:8px}
  #app .battle-notice.support-arrival{--bn-portrait-w:clamp(60px,9.5vw,82px);
    width:min(36vw,266px);min-height:clamp(56px,16vh,66px)}
  #app .battle-notice.support-arrival .bn-pilot{left:1px;bottom:1px;height:clamp(104px,30vh,130px)}
  #app .battle-notice.support-arrival .bn-panel{min-height:clamp(56px,16vh,66px);
    width:100%;margin-left:0;padding:5px 7px 5px calc(var(--bn-portrait-w) + 4px)}
  #app .battle-notice .bn-craft{margin-top:2px}
  #app .battle-notice .bn-label{margin-bottom:2px}
}
/* Narrow portrait screens: keep the full standing pilot, trim the panel, avoid joystick. */
@media(max-width:480px) and (orientation:portrait){
  #app .battle-notice{top:auto;bottom:calc(max(8px,env(safe-area-inset-bottom)) + 104px);
    left:max(4px,env(safe-area-inset-left));width:min(51vw,182px);
    max-width:calc(100vw - 10px);font-size:clamp(10px,2.9vw,13px)}
  #app .battle-notice.support-arrival{--bn-portrait-w:clamp(56px,17vw,76px);
    width:min(57vw,214px);min-height:64px}
  #app .battle-notice.support-arrival .bn-pilot{height:126px}
  #app .battle-notice.support-arrival .bn-panel{min-height:64px;padding:5px 7px 5px calc(var(--bn-portrait-w) + 4px)}
}
@media(prefers-reduced-motion:reduce){.battle-notice .bn-cursor,.battle-notice.support-arrival .bn-pilot{animation:none}}





/* V151: compact shared scores list; no extra controls on the in-battle HUD. */
.score-tabs{display:flex;gap:7px;position:relative;z-index:1;flex:0 0 auto}
.score-tabs button{flex:1;min-width:0;padding:clamp(5px,1vh,9px) 7px;border:1px solid #91d4f0;border-radius:9px;background:#0c2e51;color:#b5dcf4;font:800 clamp(11px,1.8vh,15px) Tajawal,Tahoma,sans-serif;cursor:pointer}
.score-tabs button[aria-selected="true"]{background:linear-gradient(125deg,#ffe68e,#eaba41);border-color:#fff0a6;color:#352a0e}
.leaderboard-status{position:relative;z-index:1;margin:0;color:#d3f2ff;font:700 clamp(10px,1.55vh,13px)/1.35 Tajawal,Tahoma,sans-serif;text-align:center;flex:0 0 auto}
.scores-card .best-scores{flex:1 1 auto;min-height:0;max-height:none!important;scrollbar-width:thin;overscroll-behavior:contain}
.scores-card .best-scores li{min-height:29px;padding:clamp(3px,.65vh,6px) 8px!important;flex-shrink:0}
.scores-card .best-rank{flex:0 0 auto}
.scores-card .best-meta{flex:1 1 auto;min-width:0}
.scores-card .best-meta strong,.scores-card .best-meta small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scores-card .best-score{white-space:nowrap;flex:0 0 auto}
.victory-actions .register-score{background:linear-gradient(125deg,#ffe393,#ebad2e)!important;color:#17263c!important;border:2px solid #fff4ab!important;font-weight:900!important}
.score-submit-modal{position:absolute;inset:0;z-index:75;display:grid;place-items:center;overflow:auto;padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));background:rgba(4,12,27,.80);direction:rtl;touch-action:pan-y;user-select:text}
.score-submit-card{position:relative;flex-shrink:0;width:min(400px,94vw);max-height:calc(100dvh - 24px);overflow:auto;padding:clamp(12px,2.8vh,23px);background:linear-gradient(145deg,#123f72,#071c38);border:2px solid #a7e2fa;border-radius:15px;box-shadow:0 12px 50px #0009;color:#fff;font-family:Tajawal,Tahoma,Arial,sans-serif;display:flex;flex-direction:column;gap:clamp(6px,1.2vh,12px)}
.score-submit-card h2{font-size:clamp(18px,3.6vh,27px);padding-inline-end:24px;margin:0;color:#ffdc7b}
.score-submit-card p{margin:0;font-size:clamp(11px,1.9vh,14px);line-height:1.45}
.score-submit-close{position:absolute;top:7px;left:7px;width:32px;height:32px;border-radius:50%;color:#fff;border:1px solid #ffc371;background:#a93d30;font-size:23px;cursor:pointer}
.score-result-summary{color:#cde8ff}
#scoreSubmitForm{display:flex;flex-direction:column;gap:6px}
#scoreSubmitForm label{font-size:12px;font-weight:900;color:#d9f5ff}
#scorePlayerName{font:800 16px Tajawal,Tahoma,Arial,sans-serif;min-height:39px;height:39px;padding:7px 10px;border:1px solid #80d5ff;border-radius:9px;background:#f6fbff;color:#08233c;direction:rtl;user-select:text;resize:none;overflow:hidden;white-space:nowrap;line-height:23px}
#scoreSubmitBtn{min-height:38px;border-radius:9px;border:1px solid #fff0af;background:linear-gradient(120deg,#ffdf78,#e7a535);color:#183251;font:900 15px Tajawal,Tahoma,sans-serif;cursor:pointer}
#scoreSubmitBtn:disabled{opacity:.55}
#scoreSubmitStatus{color:#a9efde;min-height:1.3em}
@media(max-width:1024px),(pointer:coarse),(max-height:600px){
  #app .scores-card{gap:clamp(3px,.7vh,6px)!important;max-height:100%!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;padding:clamp(6px,1.5vh,12px)!important}
  #app .scores-card .scores-head{grid-template-columns:28px 1fr 30px;gap:6px;padding-bottom:4px}
  #app .scores-card .scores-head img{width:30px;height:30px}
  #app .scores-card .scores-head h2{font-size:clamp(17px,4vh,24px)}
  #app .scores-card .scores-close{width:28px;height:28px;font-size:19px}
  #app .scores-card .best-scores{overflow-y:auto!important;flex:1!important;min-height:0!important;max-height:none!important;padding:0 3px!important;gap:3px!important}
  #app .scores-card .best-scores li{padding:3px 7px!important;min-height:26px;gap:6px}
  #app .scores-card .best-rank{width:23px;height:23px;font-size:12px}
  #app .scores-card .best-meta strong{font-size:clamp(11px,2.2vh,13px)}
  #app .scores-card .best-meta small{font-size:clamp(9px,1.8vh,11px)}
  #app .scores-card .best-score{font-size:clamp(11px,2.4vh,16px)}
  #app .scores-card .scores-footer{padding-top:3px}
  #app .score-submit-modal{padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left))}
  #app .score-submit-card{max-height:calc(100dvh - 16px);padding:10px 14px;gap:5px}
}

/* V153: clear install-first flow for mobile browsers. There is no play-in-browser escape. */
.pwa-install-screen[hidden],.ios-install-guide[hidden],.pwa-install-browser-help[hidden],
.pwa-install-already[hidden],.pwa-install-reset[hidden],.pwa-install-copy[hidden]{display:none!important}
.pwa-install-btn:not([hidden]){display:block;margin:12px auto 8px;min-height:54px;background:linear-gradient(135deg,#86e9ff,#328bd4);color:#031322;font-size:18px}
.pwa-install-browser-help{margin:14px auto 8px!important;line-height:1.65;color:#def2ff!important}
.pwa-install-already{display:block;width:min(320px,100%);margin:14px auto 0;min-height:45px;padding:7px 10px;border:1px solid rgba(164,216,250,.45);border-radius:13px;background:rgba(14,39,66,.85);color:#d7ecff;font:700 14px Tajawal,Tahoma,Arial,sans-serif;cursor:pointer}
.pwa-install-reset,.pwa-install-copy{display:block;width:min(320px,100%);margin:11px auto 0;min-height:40px;padding:7px 10px;border:1px solid rgba(135,195,232,.4);border-radius:12px;background:rgba(17,59,85,.7);color:#d9f0ff;font:700 13px Tajawal,Tahoma,Arial,sans-serif;cursor:pointer}

/* V154: bilingual selector. Desktop: upper-left; mobile: directly below trophy. */
#app .menu-screen .language-switch{position:absolute;z-index:8;left:clamp(8px,1.6vw,22px);top:clamp(8px,1.8vh,17px);display:flex;align-items:center;gap:3px;direction:rtl;background:rgba(5,24,45,.81);border:1px solid rgba(183,219,255,.55);border-radius:11px;padding:4px;box-shadow:0 3px 15px #03162a80}
.language-switch button{font:800 12px/1.1 Tajawal,Tahoma,Arial,sans-serif;color:#c3def8;border:0;background:transparent;border-radius:7px;min-height:28px;padding:5px 8px;cursor:pointer;white-space:nowrap}
.language-switch button.selected,.language-switch button[aria-pressed="true"]{color:#08223f;background:#d6f2ff;box-shadow:0 0 8px #a0e6ff72}
.language-switch span{color:#d9efff;font-size:11px}
.language-switch button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pwa-install-screen .language-switch-install{position:absolute;z-index:12;top:max(9px,env(safe-area-inset-top));left:max(9px,env(safe-area-inset-left));display:flex;align-items:center;gap:3px;direction:rtl;border:1px solid #b7d9f9aa;background:#0d2946ea;border-radius:10px;padding:4px}
@media(max-width:1024px),(pointer:coarse),(max-height:600px){
 #app .menu-screen .language-switch{left:var(--edge-left,6px)!important;top:calc(var(--edge-top,6px) + 43px)!important;right:auto!important;bottom:auto!important;gap:1px;padding:3px 2px;border-radius:7px;max-width:94px;flex-wrap:wrap;justify-content:center}
 #app .menu-screen .language-switch button{font-size:9px;min-height:21px;padding:3px 5px;line-height:1}
 #app .menu-screen .language-switch span{font-size:8px}
}
.lang-en #app .bn-panel,.lang-en #app .world-copy,.lang-en #app .scores-card,.lang-en #app .settings-card,.lang-en #app .victory-card,.lang-en #app .score-submit-card,.lang-en #app .return-confirm-panel,.lang-en #app .briefing-specs,.lang-en #app .briefing-weapons,.lang-en #app .briefing-pilot-copy,.lang-en #app .pilot-info,.lang-en #app .menu-buttons,.lang-en #app .overlay-text,.lang-en .pwa-install-card{direction:ltr;text-align:left}
.lang-en #app .world-copy small,.lang-en #app .bn-panel,.lang-en #app .pilot-info small{overflow-wrap:anywhere}
.lang-en #app .hud-chip,.lang-en #app .bn-panel,.lang-en #app .pilot-info strong{font-family:Tajawal,Arial,Tahoma,sans-serif}

/* V157: touch controls replace the retired effects/vibration settings. */
.mobile-control-panel{display:none!important}
.has-mobile-controls .mobile-control-panel{display:block!important}
.mobile-control-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mobile-control-choice{position:relative;display:block;cursor:pointer;min-width:0}
.mobile-control-choice input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mobile-control-choice span{display:grid;place-items:center;text-align:center;min-height:clamp(36px,7vh,48px);padding:6px 8px;border-radius:12px;border:1px solid #6299c3;background:#194b76;color:#ebf7ff;font-size:clamp(13px,2.7vh,17px);font-weight:900;transition:background .15s,border-color .15s}
.mobile-control-choice input:checked+span{background:linear-gradient(140deg,#36bcf7,#196da9);border-color:#b9f1ff;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.mobile-control-choice input:focus-visible+span{outline:3px solid #ffde7d;outline-offset:2px}
.mobile-control-help{color:#bfdeef;font-size:clamp(10px,1.9vh,12px);line-height:1.4;margin-top:6px}
.has-mobile-controls.mobile-touch-drag #app .touch-controls{display:none!important}
.has-mobile-controls.mobile-touch-drag #app #game{touch-action:none!important}

/* V169 — small, always-accessible update check; nonblocking update notice. */
#app .menu-panel .menu-footer .game-update-shortcut{display:inline-flex!important;align-items:center!important;justify-content:center!important;align-self:flex-end!important;min-height:29px!important;max-width:100%;margin:3px 0!important;padding:4px 12px!important;border:1px solid #bde6ff!important;border-radius:999px!important;background:rgba(8,42,68,.88)!important;color:#fff!important;font:800 12px Tajawal,Tahoma,Arial,sans-serif!important;white-space:nowrap;cursor:pointer!important;box-shadow:0 2px 10px #00152d66!important;flex-shrink:0}
#app .menu-panel .menu-footer .game-update-shortcut:hover,#app .menu-panel .menu-footer .game-update-shortcut:focus-visible{background:#246ca0!important;outline:2px solid #fff;outline-offset:1px}
.game-update-notice[hidden],.game-update-status[hidden]{display:none!important}
.game-update-notice,.game-update-status{position:fixed!important;z-index:100100!important;left:50%!important;bottom:max(11px,env(safe-area-inset-bottom))!important;right:auto!important;transform:translateX(-50%)!important;box-sizing:border-box!important;max-width:min(94vw,540px)!important;width:max-content!important;padding:12px 17px!important;text-align:center!important;border:1px solid #ffe49a!important;border-radius:14px!important;background:rgba(5,25,45,.96)!important;color:#fff!important;font:700 14px/1.5 Tajawal,Tahoma,Arial,sans-serif!important;box-shadow:0 7px 28px rgba(0,0,0,.65)!important;direction:rtl}
.game-update-notice-actions{display:flex;gap:9px;justify-content:center;margin-top:8px}
.game-update-notice-actions button{min-height:35px;border:1px solid #e9dbab;border-radius:8px;background:#f4cd6b;color:#10263e;font:800 12px Tajawal,Tahoma,Arial,sans-serif;padding:6px 13px;cursor:pointer}
.game-update-notice-actions button+button{background:transparent;color:#fff;border-color:#9db4c7}
.game-update-notice-actions button:disabled{opacity:.55;cursor:wait}
.game-update-status{bottom:max(9px,env(safe-area-inset-bottom))!important;max-width:90vw!important;font-size:12px!important;z-index:100102!important}
@media(max-width:1024px),(pointer:coarse),(max-height:600px){
 #app .menu-panel .menu-footer .game-update-shortcut{align-self:center!important;font-size:11px!important;min-height:26px!important;margin:1px 0!important;padding:3px 8px!important}
 .game-update-notice{bottom:max(8px,env(safe-area-inset-bottom))!important;padding:8px 12px!important;font-size:12px!important;max-width:88vw!important}
 .game-update-notice-actions{margin-top:5px;gap:7px}
 .game-update-notice-actions button{min-height:31px;font-size:11px;padding:4px 9px}
}
@media(min-width:1025px) and (min-height:601px){#app .menu-panel .menu-footer{top:640px!important}}

/* V170 — Top 10: on short landscape phones the list must never collapse to zero height. */
.scores-retry{align-self:center;position:relative;z-index:2;flex:0 0 auto;min-height:32px;padding:5px 16px;border:1px solid #ffe7a0;border-radius:9px;background:#e9bc54;color:#142944;font:900 12px Tajawal,Tahoma,Arial,sans-serif;cursor:pointer}
@media (max-width:1024px), (pointer:coarse), (max-height:600px){
  #app .scores-modal{z-index:40!important;display:flex;align-items:center;justify-content:center;overflow:hidden!important;box-sizing:border-box}
  #app .scores-card{
    box-sizing:border-box;width:min(100%,620px)!important;max-width:620px!important;
    height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)))!important;
    max-height:100%!important;min-height:0!important;
    display:flex!important;flex-direction:column!important;align-self:center;
    overflow:hidden!important;justify-content:flex-start!important;
  }
  #app .scores-card .scores-head,#app .scores-card .score-tabs,#app .scores-card .leaderboard-status,#app .scores-card .scores-footer,#app .scores-card .best-empty{flex:0 0 auto!important}
  #app .scores-card .best-scores{
    display:flex!important;flex-direction:column!important;flex:1 1 0!important;
    min-height:35px!important;height:auto!important;max-height:none!important;
    overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;touch-action:pan-y!important;align-content:start;
  }
  #app .scores-card .best-scores li{flex:0 0 auto!important;min-height:29px!important}
  #app .trophy-shortcut{width:78px!important;height:40px!important;min-width:78px;flex-direction:row!important;justify-content:center!important;gap:3px!important;transform:none!important}
  #app .trophy-shortcut span{display:grid;place-items:center}
  #app .trophy-shortcut span svg{width:21px;height:21px}
  #app .trophy-shortcut small{display:block!important;font-size:11px!important;line-height:1.1!important;white-space:nowrap}
}
@media (max-height:360px) and (orientation:landscape){
  #app .scores-card{gap:2px!important;padding:5px 8px!important}
  #app .scores-card .scores-footer{display:none}
  #app .scores-card .scores-head h2{font-size:17px}
  #app .scores-card .leaderboard-status{font-size:10px}
}


/* V179: cinematic loading interstitial + in-game team support switch. */
.game-loading-screen{position:absolute;z-index:26;inset:0;display:grid;place-items:center;background:#02070c;overflow:hidden}
.game-loading-screen[hidden],.support-control[hidden]{display:none!important}
.game-loading-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;user-select:none;-webkit-user-drag:none;filter:saturate(1.04) contrast(1.02)}
.game-loading-vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,12,.18),rgba(2,7,13,.1) 50%,rgba(2,7,13,.66) 100%)}
.game-loading-ui{position:absolute;left:5%;right:5%;bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));display:flex;flex-direction:column;align-items:center;gap:8px}
.game-loading-track{position:relative;width:100%;height:16px;border-radius:999px;padding:3px;border:1px solid rgba(216,244,255,.78);background:linear-gradient(180deg,rgba(7,24,45,.82),rgba(3,15,30,.78));box-shadow:0 0 0 1px rgba(116,200,255,.14) inset,0 0 18px rgba(69,154,255,.18)}
.game-loading-fill{position:relative;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#59d2ff 0%,#4bb3ff 38%,#7bf1ff 100%);box-shadow:0 0 16px rgba(88,206,255,.62),0 0 26px rgba(88,206,255,.32);transition:width .12s linear}
.game-loading-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.32),rgba(255,255,255,0) 55%);border-radius:inherit}
.game-loading-text{font:900 clamp(17px,2.2vw,25px)/1 Tajawal,Tahoma,Arial,sans-serif;color:#eefaff;text-shadow:0 0 8px rgba(74,186,255,.62),0 2px 6px rgba(0,0,0,.65);padding:2px 20px 4px;border-radius:999px;background:linear-gradient(180deg,rgba(1,9,18,.05),rgba(1,9,18,.26))}
.support-control{position:absolute;z-index:18;top:max(12px,env(safe-area-inset-top));left:calc(max(14px,env(safe-area-inset-left)) + 158px);display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none;direction:rtl;user-select:none;pointer-events:auto}
.support-control-title{font:900 12px/1 Tajawal,Tahoma,Arial,sans-serif;color:#ebf9ff;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 12px rgba(77,177,255,.28);letter-spacing:.2px}
.support-toggle{position:relative;display:flex;align-items:center;gap:6px;width:auto;height:auto;padding:0;border:0;overflow:visible;cursor:pointer;background:none;box-shadow:none;direction:ltr;touch-action:none}
.support-toggle-off,.support-toggle-on{position:static;z-index:2;width:auto;min-width:92px;height:34px;padding:0 18px;display:grid;place-items:center;border-radius:999px;font:900 11px/1 Tajawal,Tahoma,Arial,sans-serif;pointer-events:none;transition:transform .12s ease,opacity .14s ease,filter .14s ease,box-shadow .14s ease,border-color .14s ease}
.support-toggle-off{color:#fff;text-shadow:0 1px 2px #000;border:1px solid rgba(255,255,255,.5);background:linear-gradient(180deg,#cb2638,#94121f);box-shadow:0 4px 12px rgba(85,8,15,.3),inset 0 1px 8px rgba(255,255,255,.16)}
.support-toggle-on{color:#0a3922;text-shadow:0 1px 0 rgba(255,255,255,.72);border:1px solid rgba(10,120,64,.55);background:linear-gradient(180deg,#edf8ef,#d9efe0);box-shadow:0 4px 12px rgba(0,0,0,.16),inset 0 1px 8px rgba(255,255,255,.6)}
.support-toggle-knob,.support-toggle-hint{display:none!important}
.support-control.is-on .support-toggle-on{opacity:1;filter:brightness(1.03) saturate(1.05);transform:translateY(-1px);box-shadow:0 0 0 2px rgba(115,219,153,.34),0 5px 14px rgba(0,0,0,.16),inset 0 1px 8px rgba(255,255,255,.64)}
.support-control.is-on .support-toggle-off{opacity:.74;filter:saturate(.84) brightness(.94)}
.support-control.is-off .support-toggle-off{opacity:1;filter:brightness(1.04) saturate(1.06);transform:translateY(-1px);box-shadow:0 0 0 2px rgba(255,109,127,.3),0 5px 14px rgba(0,0,0,.18),inset 0 1px 8px rgba(255,255,255,.16)}
.support-control.is-off .support-toggle-on{opacity:.78;filter:saturate(.78) brightness(.95)}
.support-toggle:focus-visible{outline:2px solid rgba(132,215,255,.78);outline-offset:4px;border-radius:999px}
.support-meters.support-disabled{opacity:.36;filter:saturate(.35);transition:opacity .16s,filter .16s}
@media(max-width:900px),(pointer:coarse){
  .game-loading-ui{left:4%;right:4%;bottom:max(10px,env(safe-area-inset-bottom));gap:5px}
  .game-loading-track{height:12px;border-width:1px;padding:2px}
  .game-loading-text{font-size:clamp(12px,3.4vh,18px);padding:2px 15px 3px}
  .support-control{top:max(4px,env(safe-area-inset-top));left:calc(max(6px,env(safe-area-inset-left)) + 124px);gap:2px}
  .support-control-title{font-size:10px}
  .support-toggle{gap:4px}
  .support-toggle-off,.support-toggle-on{min-width:74px;height:28px;padding:0 14px;font-size:10px}
}
@media(max-width:620px){
  .support-control{top:max(2px,env(safe-area-inset-top));left:calc(max(5px,env(safe-area-inset-left)) + 106px)}
  .support-control-title{font-size:9px}
  .support-toggle-off,.support-toggle-on{min-width:66px;height:25px;padding:0 10px;font-size:9px}
}
@media(max-height:430px){
  .support-control{top:max(2px,env(safe-area-inset-top));gap:2px}
  .support-control-title{font-size:8.5px}
  .support-toggle-off,.support-toggle-on{height:24px;min-width:64px;padding:0 10px;font-size:8.5px}
}


/* V186: difficulty-aware Hall of Fame. */
.score-difficulty-tabs{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:5px;position:relative;z-index:1;flex:0 0 auto;direction:rtl}
.score-difficulty-tabs[hidden]{display:none!important}
.score-difficulty-tabs button{min-width:0;padding:5px 5px;border:1px solid rgba(145,212,240,.72);border-radius:8px;background:rgba(7,39,70,.78);color:#c8e8fa;font:800 clamp(9px,1.55vh,12px) Tajawal,Tahoma,sans-serif;cursor:pointer;white-space:nowrap}
.score-difficulty-tabs button[aria-selected="true"]{background:linear-gradient(125deg,#7ae3ff,#3d91d1);border-color:#d8f7ff;color:#071b31;box-shadow:0 0 10px rgba(103,214,255,.28)}
.scores-card .best-name-line{display:flex;align-items:center;gap:6px;min-width:0}
.scores-card .best-name-line strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.difficulty-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:42px;padding:2px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.28);font:900 9px/1.25 Tajawal,Tahoma,sans-serif;letter-spacing:.1px}
.difficulty-badge-normal{background:rgba(77,181,255,.18);color:#bfe8ff;border-color:rgba(115,210,255,.55)}
.difficulty-badge-medium{background:rgba(255,199,75,.17);color:#ffe5a0;border-color:rgba(255,209,91,.55)}
.difficulty-badge-fast{background:rgba(255,89,77,.20);color:#ffd0c9;border-color:rgba(255,127,107,.62)}
.scores-card .ranking-value{color:#8fdcff!important;font-size:clamp(8px,1.35vh,10px)!important}
.scores-card .difficulty-fast{border-color:rgba(255,115,94,.58)!important}
.scores-card .difficulty-medium{border-color:rgba(255,204,84,.42)!important}
@media(max-width:1024px),(pointer:coarse),(max-height:600px){
  #app .score-difficulty-tabs{gap:3px}
  #app .score-difficulty-tabs button{padding:3px 3px;font-size:9px;border-radius:6px}
  #app .difficulty-badge{min-width:34px;padding:1px 4px;font-size:8px}
  #app .scores-card .ranking-value{font-size:8px!important}
}