/* ==========================================================================
   Dogfight — Pacific Aces v1.0
   Original work by Tawajo — www.tawajo.com
   Copyright (c) 2026 Tawajo. All rights reserved.
   ========================================================================== */

@font-face{font-family:'Oswald';src:url('../assets/fonts/oswald-variable.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:'Rajdhani';src:url('../assets/fonts/rajdhani-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Rajdhani';src:url('../assets/fonts/rajdhani-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Rajdhani';src:url('../assets/fonts/rajdhani-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --ink:#061215;
  --ink-2:#081a1e;
  --deep:#0a2227;
  --teal:#0f3a3f;
  --aqua:#6fd6cf;
  --cream:#f1e9d6;
  --cream-dim:#c9c1ac;
  --muted:#879b99;
  --amber:#ffb347;
  --amber-hot:#ffd27d;
  --red:#ff4b3b;
  --red-dark:#8d2119;
  --green:#8bc34a;
  --line:rgba(241,233,214,.14);
  --line-strong:rgba(241,233,214,.3);
  --panel:rgba(4,16,19,.62);
  --panel-strong:rgba(4,15,18,.86);
  --shadow:0 24px 70px rgba(0,0,0,.55);
  --font:'Oswald',Impact,'Arial Narrow',sans-serif;
  --font-num:'Rajdhani','Oswald',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#041012;color:var(--cream);font-family:var(--font);
  overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
canvas{display:block}
kbd{
  display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;
  padding:0 6px;border:1px solid rgba(241,233,214,.28);border-bottom-color:rgba(241,233,214,.5);
  border-radius:2px;background:rgba(241,233,214,.06);color:var(--cream);
  font-family:var(--font-num);font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.4);vertical-align:middle;
}
.hidden{display:none !important}
em,b{font-style:normal}

#app{position:fixed;inset:0;overflow:hidden;background:#041012}
#app::after{
  content:'';position:absolute;inset:0;z-index:7;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 46%,rgba(0,8,10,.16) 76%,rgba(0,5,7,.42) 100%);
}
#world{position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:none}
#grain{
  position:absolute;inset:0;z-index:8;pointer-events:none;opacity:.22;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}

#damage-vignette,#speed-vignette,#hit-flash{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0}
#damage-vignette{
  background:radial-gradient(ellipse at center,transparent 42%,rgba(150,18,10,.45) 82%,rgba(110,8,4,.82) 100%);
  transition:opacity .18s linear;
}
#speed-vignette{
  background:radial-gradient(ellipse at center,transparent 50%,rgba(120,235,230,.1) 88%,rgba(255,255,255,.16) 100%);
  mix-blend-mode:screen;
}
#hit-flash{background:rgba(255,78,52,.16);mix-blend-mode:screen}
#hit-flash.flash{animation:hitFlash .22s ease-out}
@keyframes hitFlash{0%{opacity:1}100%{opacity:0}}

/* ==========================================================================
   SCREENS
   ========================================================================== */
.screen{
  position:absolute;inset:0;z-index:20;display:none;flex-direction:column;
  background:radial-gradient(120% 90% at 72% 42%,rgba(6,24,28,.1),rgba(3,10,12,.72) 58%,rgba(2,6,7,.92) 100%);
  overflow:hidden;
}
.screen.active{display:flex;animation:screenIn .45s ease both}
.screen.leaving{animation:screenOut .32s ease both}
@keyframes screenIn{from{opacity:0}to{opacity:1}}
@keyframes screenOut{from{opacity:1}to{opacity:0}}
.screen-menu{
  background:
    linear-gradient(90deg,rgba(2,8,10,.9) 0%,rgba(2,8,10,.62) 34%,rgba(2,8,10,.06) 62%,rgba(2,8,10,.22) 100%),
    radial-gradient(90% 80% at 80% 30%,transparent 38%,rgba(2,8,10,.48) 100%);
  justify-content:space-between;
}

/* ---- menu header ---- */
.menu-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 38px;position:relative;z-index:2;
}
.brand{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:500;letter-spacing:.32em;color:var(--cream-dim)}
.brand-mark{width:26px;height:26px;position:relative;display:inline-block}
.brand-mark::before,.brand-mark::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--amber)}
.brand-mark::before{transform:rotate(45deg)}
.brand-mark::after{transform:rotate(-45deg)}
.menu-tools{display:flex;gap:10px}

.icon-btn{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:rgba(4,16,19,.5);color:var(--cream-dim);
  transition:.18s ease;position:relative;border-radius:2px;
}
.icon-btn:hover{border-color:var(--amber);color:var(--amber);background:rgba(255,179,71,.1)}
.icon-btn.large{width:44px;height:44px}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-btn.sound-off svg .wave{display:none}
.icon-btn.sound-off::after{content:'';position:absolute;width:24px;height:1px;background:var(--red);transform:rotate(-45deg)}

/* ---- menu hero ---- */
.menu-main{flex:1;display:flex;align-items:center;padding:0 7vw;position:relative;z-index:2;min-height:0}
.menu-copy{max-width:640px;animation:menuIn 1s cubic-bezier(.2,.8,.25,1) both .1s}
@keyframes menuIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.eyebrow{
  display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.34em;
  color:var(--cream-dim);font-weight:500;margin-bottom:16px;white-space:nowrap;
}
.eyebrow span{display:block;width:34px;height:1px;background:var(--red)}
.eyebrow em{font-style:normal}
.eyebrow.small{font-size:10px;letter-spacing:.28em;margin-bottom:10px;color:var(--amber)}
.eyebrow.small span{width:22px;background:var(--amber)}
.game-title{
  margin:0;position:relative;line-height:.78;font-weight:700;letter-spacing:-.015em;
  display:flex;flex-direction:column;filter:drop-shadow(0 16px 34px rgba(0,0,0,.55));
}
.title-top,.title-bottom{
  display:block;
  background:linear-gradient(178deg,#fff9ea 8%,#eadfc4 42%,#b9ac8f 68%,#f7edd8 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:clamp(84px,14.2vw,214px);letter-spacing:-.01em;
}
.title-bottom{margin-left:.22em;color:transparent}
.title-slash{
  position:absolute;left:-18px;top:8%;width:10px;height:74%;
  background:linear-gradient(180deg,var(--amber-hot),var(--red) 60%,var(--red-dark));
  transform:skewX(-16deg);box-shadow:0 0 38px rgba(255,75,59,.34);
  animation:slashGlow 5s ease-in-out infinite;
}
@keyframes slashGlow{0%,100%{box-shadow:0 0 26px rgba(255,75,59,.25)}50%{box-shadow:0 0 60px rgba(255,90,60,.5)}}
.title-sub{
  margin:20px 0 0 4px;font-size:14px;letter-spacing:.36em;color:var(--cream);
  font-weight:500;display:flex;align-items:center;gap:10px;
}
.title-sub b{color:var(--red)}
.menu-blurb{
  margin:22px 0 26px;font-family:var(--font-num);font-weight:500;font-size:17px;line-height:1.5;
  color:var(--cream-dim);max-width:440px;
}
.menu-buttons{display:flex;flex-direction:column;gap:9px;max-width:380px}

/* ---- buttons ---- */
.btn{
  display:flex;align-items:center;gap:16px;width:100%;padding:15px 20px 15px 18px;
  background:linear-gradient(90deg,rgba(9,25,28,.82),rgba(9,25,28,.52));
  border:1px solid var(--line);border-left:3px solid rgba(255,75,59,.42);
  color:var(--cream);text-transform:uppercase;letter-spacing:.14em;font-size:14px;font-weight:500;
  position:relative;overflow:hidden;transition:.19s cubic-bezier(.2,.8,.2,1);text-align:left;
}
.btn::before{
  content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,179,71,.16),transparent 70%);
  transform:translateX(-100%);transition:transform .35s ease;
}
.btn:hover{border-color:rgba(255,179,71,.5);border-left-color:var(--amber);transform:translateX(5px);color:#fff6e2}
.btn:hover::before{transform:translateX(0)}
.btn:active{transform:translateX(3px) scale(.995)}
.btn-index{font-family:var(--font-num);font-weight:700;font-size:11px;letter-spacing:.08em;color:var(--amber);opacity:.8;width:18px}
.btn-text{flex:1;position:relative}
.btn-arrow{font-size:20px;line-height:1;color:var(--amber);transition:transform .2s;position:relative}
.btn:hover .btn-arrow{transform:translateX(4px)}
.btn.primary{
  background:linear-gradient(92deg,#ffcb74,#ffb347 46%,#f19a2e);color:#191307;
  border-color:#ffe0a3;border-left-color:#fff3d4;font-weight:600;
  box-shadow:0 10px 28px rgba(255,158,47,.18),inset 0 1px 0 rgba(255,255,255,.5);
}
.btn.primary .btn-index,.btn.primary .btn-arrow{color:#4a2c05;opacity:.75}
.btn.primary::before{background:linear-gradient(90deg,rgba(255,255,255,.42),transparent 70%)}
.btn.primary:hover{color:#120d04;border-color:#fff;box-shadow:0 14px 38px rgba(255,158,47,.32)}
.btn.ghost{background:transparent;border-left-color:transparent;color:var(--muted);font-size:12px;letter-spacing:.18em;padding:12px 20px}
.btn.ghost:hover{color:var(--cream);border-color:var(--line)}
.btn.compact{width:auto;padding:12px 18px;font-size:12px;letter-spacing:.12em}
.btn.danger{background:rgba(80,18,12,.4);border-color:rgba(255,75,59,.3);border-left-color:var(--red);color:#ffb7ae}
.btn.danger:hover{background:rgba(120,24,16,.5);border-color:var(--red);color:#fff}

.menu-best{
  display:flex;align-items:baseline;gap:12px;margin-top:26px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:14px;max-width:380px;
}
.best-label{font-size:10px;letter-spacing:.26em;color:var(--muted)}
.best-value{font-family:var(--font-num);font-weight:700;font-size:22px;color:var(--amber);letter-spacing:.06em}
.best-record{font-size:9px;letter-spacing:.18em;color:var(--muted);margin-left:auto}

.menu-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 38px 20px;border-top:1px solid rgba(241,233,214,.08);
  background:linear-gradient(0deg,rgba(2,8,10,.75),transparent);
  position:relative;z-index:2;
}
.menu-controls{display:flex;gap:22px;flex-wrap:wrap}
.menu-controls span{font-size:9px;letter-spacing:.17em;color:var(--muted);display:flex;align-items:center;gap:5px}
.menu-controls em{font-style:normal}
.menu-controls kbd{min-width:20px;height:19px;font-size:10px;padding:0 4px}
.menu-meta{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.16em;color:rgba(135,155,153,.65);white-space:nowrap}
.meta-dot{width:4px;height:4px;border-radius:50%;background:var(--red);display:block}

/* ==========================================================================
   PANEL SCREENS (manual / settings)
   ========================================================================== */
.screen-panel{
  background:linear-gradient(180deg,rgba(3,11,13,.9),rgba(3,10,12,.95));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:0;justify-content:center;align-items:center;overflow:auto;
}
.screen-panel.active{display:flex}
.panel-wrap{
  width:min(1180px,94vw);max-height:94vh;overflow:auto;padding:34px 40px;
  border:1px solid var(--line);background:rgba(5,18,21,.68);
  box-shadow:var(--shadow);position:relative;
  animation:panelIn .5s cubic-bezier(.2,.8,.2,1) both;
  scrollbar-width:thin;scrollbar-color:rgba(255,179,71,.4) transparent;
}
.panel-wrap::before,.panel-wrap::after{
  content:'';position:absolute;width:26px;height:26px;border:2px solid var(--amber);pointer-events:none;
}
.panel-wrap::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.panel-wrap::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
@keyframes panelIn{from{opacity:0;transform:translateY(18px) scale(.99)}to{opacity:1;transform:none}}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:28px;border-bottom:1px solid var(--line);padding-bottom:20px}
.panel-head h2{margin:0;font-size:clamp(34px,4vw,52px);line-height:.95;letter-spacing:.01em}
.panel-head h2 em{color:var(--amber)}
.close-panel{font-family:var(--font-num);font-size:17px;flex:none}
.close-panel:hover{color:var(--red);border-color:var(--red)}

.manual-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line)}
.manual-card{background:rgba(6,22,26,.9);padding:24px 26px;position:relative;min-height:190px}
.manual-card:hover{background:rgba(9,29,33,.95)}
.manual-num{font-family:var(--font-num);font-size:12px;font-weight:700;color:var(--red);letter-spacing:.14em;margin-bottom:8px}
.manual-card h3{margin:0 0 12px;font-size:18px;letter-spacing:.13em;font-weight:600;color:var(--cream)}
.manual-card p{margin:0 0 10px;font-family:var(--font-num);font-size:15px;line-height:1.5;color:var(--cream-dim)}
.manual-card p:last-child{margin-bottom:0}
.manual-card b{color:var(--amber);font-weight:600}
.manual-card kbd{height:20px;min-width:20px;font-size:11px}
.pick{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:3px;font-family:var(--font-num);font-weight:700;font-size:11px;color:#041012;vertical-align:-3px}
.pick.hp{background:#7ecb66}
.pick.rk{background:var(--amber)}
.manual-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:26px;flex-wrap:wrap}
.controls-table{display:grid;grid-template-columns:repeat(4,auto);gap:12px 26px}
.controls-table div{display:flex;align-items:center;gap:7px;font-family:var(--font-num);font-size:12px;color:var(--cream-dim);letter-spacing:.04em}
.controls-table kbd{font-size:10px;height:20px;min-width:20px}

/* ---- settings ---- */
.settings-wrap{width:min(1020px,94vw)}
.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.settings-group{border-right:1px solid var(--line);padding-right:30px}
.settings-group:last-child{border-right:0;padding-right:0}
.settings-group h3{margin:0 0 18px;font-size:12px;letter-spacing:.24em;color:var(--amber);font-weight:500}
.setting{display:block;margin-bottom:22px;position:relative}
.setting > span{display:flex;align-items:baseline;justify-content:space-between;font-family:var(--font-num);font-size:14px;color:var(--cream-dim);margin-bottom:9px;gap:8px}
.setting > span em{font-size:12px;font-weight:700;color:var(--amber);letter-spacing:.04em}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;background:rgba(241,233,214,.14);outline:none;border-radius:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:13px;height:13px;background:var(--amber);cursor:pointer;
  border:2px solid #142023;box-shadow:0 0 0 1px var(--amber);
}
input[type=range]::-moz-range-thumb{width:11px;height:11px;background:var(--amber);border:2px solid #142023;border-radius:0;cursor:pointer}
.seg{display:flex;border:1px solid var(--line);background:rgba(0,0,0,.22)}
.seg button{
  flex:1;padding:8px 6px;font-family:var(--font-num);font-weight:700;font-size:10px;letter-spacing:.14em;
  color:var(--muted);border-right:1px solid var(--line);transition:.15s;
}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--cream)}
.seg button.active{background:rgba(255,179,71,.16);color:var(--amber);box-shadow:inset 0 -2px 0 var(--amber)}
.setting.check{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.setting.check > span{margin:0}
.setting.check input{position:absolute;opacity:0;pointer-events:none}
.switch{width:38px;height:20px;border:1px solid var(--line-strong);background:rgba(0,0,0,.3);position:relative;flex:none;transition:.2s}
.switch::after{content:'';position:absolute;top:3px;left:4px;width:12px;height:12px;background:var(--muted);transition:.2s}
.setting.check input:checked + .switch{border-color:rgba(255,179,71,.6);background:rgba(255,179,71,.14)}
.setting.check input:checked + .switch::after{left:20px;background:var(--amber)}
.settings-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:28px;border-top:1px solid var(--line);padding-top:20px;flex-wrap:wrap}
.settings-note{font-family:var(--font-num);font-size:12px;color:var(--muted);letter-spacing:.04em}
.settings-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ==========================================================================
   HANGAR / SHOP
   ========================================================================== */
.screen-shop{
  background:
    radial-gradient(90% 70% at 78% 22%,rgba(15,58,63,.45),transparent 62%),
    linear-gradient(180deg,rgba(3,11,13,.95),rgba(2,8,10,.98));
}
.shop-wrap{
  width:min(1260px,95vw);padding:26px 32px 20px;display:flex;flex-direction:column;
  max-height:94vh;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(7,25,29,.85),rgba(4,15,18,.94)),
    repeating-linear-gradient(90deg,rgba(111,214,207,.03) 0 1px,transparent 1px 72px);
}
.shop-head{margin-bottom:16px;align-items:flex-end;flex-wrap:wrap}
.shop-title h2{margin:0}
.shop-head-right{display:flex;align-items:center;gap:16px}
.shop-wallet{text-align:right}
.wallet-label{display:block;font-size:8px;letter-spacing:.24em;color:var(--muted);margin-bottom:2px}
.wallet-amount{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.wallet-amount b{font-family:var(--font-num);font-weight:700;font-size:28px;line-height:1;color:var(--amber);letter-spacing:.04em;text-shadow:0 0 24px rgba(255,179,71,.25)}
.wallet-amount em{font-size:9px;letter-spacing:.2em;color:var(--muted);align-self:flex-end;margin-bottom:3px}
.credit-glyph{
  width:17px;height:17px;border-radius:50%;border:1px solid rgba(255,179,71,.6);
  background:radial-gradient(circle at 35% 32%,rgba(255,244,210,.95),rgba(255,179,71,.65) 46%,rgba(140,82,12,.55));
  box-shadow:0 0 12px rgba(255,179,71,.25),inset 0 0 0 2px rgba(6,18,21,.55);
  align-self:center;
}
.menu-wallet{
  display:flex;align-items:center;gap:7px;height:38px;padding:0 12px;margin-right:4px;
  border:1px solid rgba(255,179,71,.28);
  background:linear-gradient(180deg,rgba(255,179,71,.11),rgba(255,179,71,.025));
  position:relative;
}
.menu-wallet::before{content:'';position:absolute;left:-1px;top:-1px;width:8px;height:8px;border-left:1px solid var(--amber);border-top:1px solid var(--amber);opacity:.65}
.menu-wallet b{font-family:var(--font-num);font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--amber-hot)}
.menu-wallet em{font-size:8px;letter-spacing:.18em;color:var(--muted)}
.wallet-mark{width:13px;height:13px;border-radius:50%;border:1px solid var(--amber);position:relative;flex:none;box-shadow:inset 0 0 0 2px rgba(255,179,71,.16)}
.wallet-mark::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px rgba(255,179,71,.55)}
.btn-tag{
  font-family:var(--font-num);font-weight:700;font-size:8px;letter-spacing:.14em;color:var(--aqua);
  border:1px solid rgba(111,214,207,.28);padding:2px 6px;flex:none;position:relative;
  background:rgba(111,214,207,.06);
}
.btn-tag.complete{color:var(--amber);border-color:rgba(255,179,71,.35);background:rgba(255,179,71,.07)}

.shop-body{
  display:grid;grid-template-columns:minmax(304px,366px) minmax(0,1fr);
  height:min(58vh,540px);min-height:330px;
  border:1px solid var(--line);background:var(--line);gap:1px;position:relative;
}
.shop-body::before,.shop-body::after{
  content:'';position:absolute;width:18px;height:18px;border:1px solid rgba(255,179,71,.4);pointer-events:none;z-index:3;
}
.shop-body::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.shop-body::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.shop-side{display:flex;flex-direction:column;min-height:0;min-width:0;background:rgba(4,15,18,.92)}
.shop-tabs{
  display:flex;flex-wrap:wrap;gap:1px;padding:4px;flex:none;
  border-bottom:1px solid var(--line);background:rgba(3,12,15,.62);
}
.shop-tab{
  display:flex;align-items:center;gap:4px;padding:5px 6px;border:1px solid transparent;
  font-family:var(--font-num);font-weight:700;font-size:7.5px;letter-spacing:.1em;
  color:var(--muted);transition:.15s ease;white-space:nowrap;background:transparent;
}
.shop-tab b{
  font-family:var(--font-num);font-weight:700;font-size:6.5px;line-height:10px;padding:0 2px;
  color:rgba(255,179,71,.65);border:1px solid rgba(255,179,71,.18);
}
.shop-tab:hover{color:var(--cream);background:rgba(255,179,71,.06)}
.shop-tab.active{
  color:var(--amber);background:rgba(255,179,71,.12);border-color:rgba(255,179,71,.32);
}
.shop-tab.active b{color:var(--amber);border-color:rgba(255,179,71,.45)}
.shop-list-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--line);font-size:8px;letter-spacing:.26em;color:var(--muted);flex:none;
}
.shop-list-head b{font-family:var(--font-num);font-size:11px;letter-spacing:.08em;color:var(--amber)}
.shop-list{
  flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1px;padding:1px;
  scrollbar-width:thin;scrollbar-color:rgba(255,179,71,.35) transparent;
}
.shop-list::-webkit-scrollbar{width:6px}
.shop-list::-webkit-scrollbar-thumb{background:rgba(255,179,71,.3)}
.shop-list::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}

.shop-card{
  position:relative;display:grid;grid-template-columns:18px 80px minmax(0,1fr) auto;
  align-items:center;gap:10px;padding:7px 12px 7px 9px;width:100%;text-align:left;
  background:rgba(6,21,25,.6);border-left:2px solid transparent;color:var(--cream);
  transition:background .18s ease,border-color .18s ease;flex:none;
}
.shop-card:hover{background:rgba(10,32,37,.92)}
.shop-card:focus-visible{outline:1px solid var(--amber);outline-offset:-1px}
.shop-card.selected{background:linear-gradient(90deg,rgba(255,179,71,.15),rgba(8,27,31,.92) 62%);border-left-color:var(--amber)}
.shop-card.equipped .sc-price{color:var(--aqua)}
.shop-card.equipped .sc-badge{color:var(--aqua)}
.shop-card.equipped:not(.selected){border-left-color:rgba(111,214,207,.55);background:linear-gradient(90deg,rgba(111,214,207,.07),rgba(6,21,25,.75) 62%)}
.shop-card.locked .sc-price{color:var(--amber)}
.sc-index{font-family:var(--font-num);font-weight:700;font-size:9px;letter-spacing:.06em;color:rgba(255,179,71,.5)}
.sc-thumb{
  width:80px;height:52px;display:block;border:1px solid rgba(111,214,207,.12);
  background:radial-gradient(circle at 50% 50%,rgba(111,214,207,.09),rgba(2,10,12,.5));
}
.sc-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.sc-name{font-size:12px;font-weight:600;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-meta{display:flex;align-items:center;gap:5px;min-width:0}
.sc-role{font-family:var(--font-num);font-size:10px;letter-spacing:.08em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sc-gen{
  font-family:var(--font-num);font-weight:700;font-size:7px;letter-spacing:.08em;color:rgba(111,214,207,.85);
  border:1px solid rgba(111,214,207,.22);padding:0 3px;white-space:nowrap;flex:none;
}
.shop-card.equipped .sc-gen{color:var(--aqua);border-color:rgba(111,214,207,.42)}
.sc-state{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.sc-price{font-family:var(--font-num);font-weight:700;font-size:12px;letter-spacing:.02em;color:var(--amber);white-space:nowrap}
.sc-badge{font-size:7px;letter-spacing:.16em;color:rgba(135,155,153,.7);white-space:nowrap}

.shop-detail{
  display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;overflow:hidden;
  background:linear-gradient(165deg,rgba(7,25,29,.92),rgba(4,14,17,.97));
}
.shop-detail.flash-good{animation:shopFlashGood .8s ease}
.shop-detail.flash-bad{animation:shopFlashBad .4s ease}
@keyframes shopFlashGood{
  0%{box-shadow:inset 0 0 0 2px rgba(255,179,71,.85),inset 0 0 90px rgba(255,179,71,.22)}
  100%{box-shadow:inset 0 0 0 0 rgba(255,179,71,0),inset 0 0 0 rgba(255,179,71,0)}
}
@keyframes shopFlashBad{
  0%{box-shadow:inset 0 0 0 2px rgba(255,75,59,.8),inset 0 0 70px rgba(255,75,59,.18)}
  100%{box-shadow:inset 0 0 0 0 rgba(255,75,59,0)}
}
.shop-preview-wrap{
  position:relative;height:200px;flex:none;overflow:hidden;border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 46%,rgba(14,52,57,.85),rgba(3,13,15,.96) 72%),
    linear-gradient(180deg,rgba(111,214,207,.04),transparent);
}
.shop-detail.is-stealth .shop-preview-wrap{
  background:
    radial-gradient(circle at 50% 46%,rgba(10,36,44,.92),rgba(2,10,13,.98) 72%),
    linear-gradient(180deg,rgba(111,214,207,.07),transparent);
}
.shop-detail.is-stealth .preview-reticle{border-color:rgba(111,214,207,.28)}
.shop-detail.is-stealth .preview-reticle::before{border-color:rgba(255,179,71,.14)}
#shop-preview{position:absolute;inset:0;width:100%;height:100%}
.preview-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(111,214,207,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(111,214,207,.06) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 76%);
  mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 76%);
}
.preview-reticle{
  position:absolute;left:50%;top:50%;width:min(200px,44%);aspect-ratio:1;transform:translate(-50%,-50%);
  border:1px dashed rgba(255,179,71,.16);border-radius:50%;pointer-events:none;
}
.preview-reticle::before{content:'';position:absolute;inset:15px;border:1px solid rgba(111,214,207,.1);border-radius:50%}
.preview-reticle::after{
  content:'';position:absolute;left:50%;top:-9px;bottom:-9px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,179,71,.2),transparent);
}
.preview-scan{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.preview-scan::after{
  content:'';position:absolute;left:0;right:0;height:46px;top:-20%;
  background:linear-gradient(180deg,transparent,rgba(111,214,207,.09),transparent);
  animation:shopScan 5.6s linear infinite;
}
@keyframes shopScan{0%{top:-20%}100%{top:114%}}
.preview-tag{
  position:absolute;left:16px;bottom:12px;padding-left:9px;border-left:2px solid var(--amber);
  font-family:var(--font-num);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--cream);
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.preview-badge{position:absolute;right:16px;bottom:14px;font-size:8px;letter-spacing:.24em;color:rgba(135,155,153,.8)}

.detail-body{padding:13px 22px 8px;overflow-y:auto;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(255,179,71,.3) transparent}
.detail-kicker{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.24em;color:var(--amber);margin-bottom:4px}
.detail-tier{
  font-family:var(--font-num);font-weight:700;font-size:8px;letter-spacing:.16em;padding:2px 6px 1px;
  border:1px solid rgba(241,233,214,.2);color:var(--cream-dim);
}
.detail-tier[data-tier="veteran"]{color:#9fe0d8;border-color:rgba(111,214,207,.35);background:rgba(111,214,207,.06)}
.detail-tier[data-tier="elite"]{color:var(--amber);border-color:rgba(255,179,71,.4);background:rgba(255,179,71,.07)}
.detail-tier[data-tier="ace"]{color:#ff9a70;border-color:rgba(255,120,80,.4);background:rgba(255,90,60,.07)}
.detail-tier[data-tier="legend"]{color:#ffe1a0;border-color:rgba(255,210,125,.6);background:rgba(255,179,71,.14);box-shadow:0 0 18px rgba(255,179,71,.16)}
#shop-name{margin:0 0 5px;font-size:clamp(24px,2.4vw,32px);line-height:.98;letter-spacing:.03em;color:var(--cream)}
#shop-blurb{
  margin:0 0 9px;font-family:var(--font-num);font-size:13px;line-height:1.42;color:var(--cream-dim);
  max-width:700px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.detail-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;margin-bottom:9px}
.stat{display:flex;align-items:center;gap:8px}
.stat span{font-family:var(--font-num);font-weight:600;font-size:9px;letter-spacing:.16em;color:var(--muted);width:66px;flex:none}
.stat-bar{flex:1;height:4px;background:rgba(0,0,0,.5);border:1px solid rgba(241,233,214,.1);overflow:hidden}
.stat-bar i{display:block;height:100%;background:linear-gradient(90deg,#2e7f79,var(--aqua));box-shadow:0 0 8px rgba(111,214,207,.3);transition:width .35s ease}
.stat:nth-child(3) .stat-bar i,.stat:nth-child(5) .stat-bar i{background:linear-gradient(90deg,#c8862b,var(--amber));box-shadow:0 0 8px rgba(255,179,71,.25)}
.stat b{font-family:var(--font-num);font-weight:700;font-size:10px;color:var(--cream-dim);width:22px;text-align:right}
.detail-specs{
  display:grid;grid-template-columns:repeat(4,1fr);padding:7px 0;margin-bottom:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.spec{border-right:1px solid var(--line);padding:0 10px;text-align:center;min-width:0}
.spec:first-child{padding-left:0;text-align:left}
.spec:last-child{border-right:0;padding-right:0;text-align:right}
.spec span{display:block;font-size:8px;letter-spacing:.16em;color:var(--muted);margin-bottom:2px}
.spec b{font-family:var(--font-num);font-weight:700;font-size:13px;color:var(--cream);white-space:nowrap}
.detail-armament{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:9px}
.detail-armament div{display:flex;align-items:baseline;gap:7px}
.detail-armament span{font-size:8px;letter-spacing:.18em;color:var(--muted)}
.detail-armament b{font-family:var(--font-num);font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--cream-dim)}

.detail-foot{
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 22px;flex:none;
  border-top:1px solid var(--line);background:linear-gradient(0deg,rgba(1,8,10,.72),rgba(0,0,0,.1));
}
.detail-price span{display:block;font-size:8px;letter-spacing:.22em;color:var(--muted);margin-bottom:1px}
.detail-price b{font-family:var(--font-num);font-weight:700;font-size:24px;letter-spacing:.03em;color:var(--amber);text-shadow:0 0 20px rgba(255,179,71,.18)}
.detail-actions{display:flex;gap:8px}
#btn-shop-action{min-width:214px;justify-content:center;border-left-width:1px}
.btn.is-disabled,.btn:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.45);transform:none!important;box-shadow:none}
.btn.is-disabled:hover,.btn:disabled:hover{transform:none!important;border-color:var(--line);color:inherit}

.shop-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:13px;flex-wrap:wrap;flex:none}
.shop-note{font-family:var(--font-num);font-size:11px;letter-spacing:.03em;color:var(--muted)}
.shop-footer-actions{display:flex;gap:8px;flex-wrap:wrap}
#btn-shop-fly{min-width:184px;justify-content:center}

/* debrief credits */
.debrief-credits{display:flex;align-items:baseline;justify-content:center;gap:8px;padding:0 0 14px;flex-wrap:wrap}
.debrief-credits span{font-size:8px;letter-spacing:.2em;color:var(--muted)}
.debrief-credits b{font-family:var(--font-num);font-weight:700;font-size:20px;color:var(--amber);letter-spacing:.03em}
.debrief-credits em{font-size:8px;letter-spacing:.18em;color:var(--muted)}
.debrief-credits i{font-family:var(--font-num);font-style:normal;font-size:10px;color:rgba(135,155,153,.7);margin-left:8px}

/* ==========================================================================
   HUD
   ========================================================================== */
#hud{position:absolute;inset:0;z-index:10;pointer-events:none;opacity:1;transition:opacity .4s;touch-action:none}
#hud.hidden{display:none !important}
#hud-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hud-top{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;
  padding:20px 22px;gap:20px;
}
.hud-panel{
  background:linear-gradient(160deg,rgba(4,18,21,.78),rgba(4,14,17,.55));
  border:1px solid rgba(241,233,214,.16);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  position:relative;box-shadow:0 12px 34px rgba(0,0,0,.24);
}
.hud-panel::before,.hud-panel::after{content:'';position:absolute;width:9px;height:9px;border:1px solid var(--amber);opacity:.55;pointer-events:none}
.hud-panel::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.hud-panel::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.aircraft-panel{width:280px;padding:11px 13px 12px}
.aircraft-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.aircraft-name{font-size:12px;font-weight:600;letter-spacing:.17em;color:var(--cream)}
.aircraft-tag{font-family:var(--font-num);font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--amber);border:1px solid rgba(255,179,71,.35);padding:2px 5px 1px}
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bar-row:last-child{margin-bottom:0}
.bar-label{font-size:8px;letter-spacing:.16em;color:var(--muted);width:31px}
.bar{flex:1;height:7px;background:rgba(0,0,0,.45);border:1px solid rgba(241,233,214,.14);overflow:hidden;position:relative}
.bar i{display:block;height:100%;width:100%;transform-origin:left center;transition:transform .18s ease}
.bar.hull i{background:linear-gradient(90deg,#6fae42,#9bcf55);box-shadow:0 0 12px rgba(139,195,74,.45)}
.bar.hull.warn i{background:linear-gradient(90deg,#e79a2a,#ffc247);box-shadow:0 0 12px rgba(255,179,71,.4)}
.bar.hull.crit i{background:linear-gradient(90deg,#d93425,#ff6a4d);box-shadow:0 0 14px rgba(255,75,59,.55);animation:critPulse .8s infinite}
@keyframes critPulse{50%{opacity:.55}}
.bar.ammo i{background:linear-gradient(90deg,#9aa6a4,#d9ded8)}
.bar.ammo.low i{background:linear-gradient(90deg,#c8862b,#ffb347)}
.bar-value{font-family:var(--font-num);font-size:11px;font-weight:700;color:var(--cream-dim);width:30px;text-align:right;letter-spacing:.02em}
.reload-line{
  height:0;overflow:hidden;display:flex;align-items:center;gap:7px;margin-top:0;
  font-size:8px;letter-spacing:.2em;color:var(--amber);transition:.2s;
}
.reload-line.on{height:12px;margin-top:4px}
.reload-line i{width:11px;height:11px;border:1.5px solid rgba(255,179,71,.25);border-top-color:var(--amber);border-radius:50%;animation:spin .5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.hud-center{text-align:center;padding-top:2px;flex:1;min-width:0}
.mission-line{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:9px;letter-spacing:.22em;color:var(--cream-dim);text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,.8);white-space:nowrap;
}
.mission-line .divider{width:16px;height:1px;background:rgba(241,233,214,.4)}
#wave-label{color:var(--amber)}
#objective-label{color:var(--cream-dim);overflow:hidden;text-overflow:ellipsis;max-width:300px}
.score-line{display:flex;align-items:baseline;justify-content:center;gap:7px;margin-top:1px}
#score-value{
  font-family:var(--font-num);font-weight:700;font-size:clamp(26px,3.4vw,36px);line-height:1;
  letter-spacing:.06em;color:var(--cream);text-shadow:0 2px 18px rgba(0,0,0,.6);font-variant-numeric:tabular-nums;
}
.score-cap{font-size:8px;letter-spacing:.24em;color:var(--muted)}
.combo{
  font-family:var(--font-num);font-weight:700;font-size:13px;color:var(--amber);letter-spacing:.04em;
  opacity:0;transform:translateY(3px);transition:.25s;text-shadow:0 0 16px rgba(255,179,71,.6);
}
.combo.on{opacity:1;transform:none}
.combo-meter{
  width:90px;height:2px;margin:4px auto 0;background:rgba(255,179,71,.14);
  opacity:0;transition:opacity .2s;
}
.combo-meter.on{opacity:1}
.combo-meter i{display:block;height:100%;width:100%;transform-origin:left;background:var(--amber);box-shadow:0 0 8px rgba(255,179,71,.45)}
.objective-timer{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:6px;font-size:8px;letter-spacing:.18em;color:var(--cream-dim)}
.objective-timer.hidden{display:none !important}
.timer-bar{width:150px;height:3px;background:rgba(0,0,0,.5);border:1px solid rgba(241,233,214,.15)}
.timer-bar i{display:block;height:100%;width:100%;background:var(--amber);transform-origin:left;transition:transform .2s linear}
#objTimerValue{font-family:var(--font-num);font-size:11px;font-weight:700;color:var(--amber);min-width:34px;text-align:left}

.hud-right{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.radar-panel{width:172px;height:172px;padding:9px;border-radius:50%;overflow:hidden}
.radar-panel::before,.radar-panel::after{display:none}
#radar{width:152px;height:152px;border-radius:50%}
.radar-range{
  position:absolute;bottom:8px;left:0;right:0;text-align:center;font-family:var(--font-num);
  font-weight:600;font-size:8px;letter-spacing:.18em;color:rgba(241,233,214,.45);
}
.hud-buttons{display:flex;gap:6px;pointer-events:auto}
.hud-buttons .icon-btn{background:rgba(4,16,19,.6);backdrop-filter:blur(6px);width:32px;height:32px}
.hud-buttons .icon-btn svg{width:16px;height:16px}

.hud-bottom{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 22px 18px;gap:20px;pointer-events:none;
}
.throttle-block{
  width:206px;background:rgba(4,16,19,.55);border:1px solid var(--line);border-left:2px solid var(--amber);
  padding:8px 10px 9px;backdrop-filter:blur(5px);
}
.throttle-head{display:flex;align-items:baseline;gap:5px;margin-bottom:6px}
.throttle-head span{font-size:8px;letter-spacing:.18em;color:var(--muted);flex:1}
.throttle-head b{font-family:var(--font-num);font-size:19px;line-height:1;color:var(--cream);font-weight:700}
.throttle-head em{font-family:var(--font-num);font-size:8px;letter-spacing:.1em;color:var(--muted)}
.throttle-track{height:5px;background:rgba(0,0,0,.5);position:relative;border:1px solid rgba(241,233,214,.12);overflow:hidden}
.throttle-track i{display:block;height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,#3a8f86,var(--aqua) 55%,var(--amber));transition:transform .1s linear}
.throttle-marks{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),rgba(0,0,0,.55) calc(20% - 1px) 20%)}
.throttle-hint{font-size:7px;letter-spacing:.2em;color:rgba(135,155,153,.6);margin-top:5px}
.boost-row{display:flex;align-items:center;gap:6px;margin-top:5px}
.boost-row span{font-size:7px;letter-spacing:.16em;color:var(--muted);width:62px;flex:none}
.boost-bar{flex:1;height:4px;background:rgba(0,0,0,.5);border:1px solid rgba(241,233,214,.12);overflow:hidden}
.boost-bar i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);transition:transform .1s linear;background:linear-gradient(90deg,#4aa6c8,#8fe6ff 55%,#ffb347)}
.boost-row.active .boost-bar i{box-shadow:0 0 10px rgba(111,214,207,.65)}
.boost-row.overheat span{color:var(--red)}
.boost-row.overheat .boost-bar i{background:linear-gradient(90deg,#ff8a3c,#ff4b3b)}

.weapons-block{display:flex;gap:6px;pointer-events:none}
.weapon{
  display:flex;align-items:center;gap:8px;padding:7px 10px;min-width:132px;
  background:rgba(4,16,19,.6);border:1px solid var(--line);backdrop-filter:blur(5px);position:relative;overflow:hidden;
}
.weapon.cooldown{min-width:146px}
.wp-key{font-family:var(--font-num);font-size:9px;font-weight:700;color:var(--amber);letter-spacing:.06em;border:1px solid rgba(255,179,71,.3);padding:2px 4px;min-width:22px;text-align:center}
.wp-icon{width:22px;height:22px;position:relative;flex:none;opacity:.85}
.guns-icon::before,.guns-icon::after{content:'';position:absolute;left:8px;top:2px;width:2px;height:16px;background:var(--cream-dim);box-shadow:0 0 6px rgba(241,233,214,.4)}
.guns-icon::after{left:13px;height:12px;top:4px}
.rocket-icon::before{content:'';position:absolute;left:5px;top:5px;width:12px;height:12px;border:2px solid var(--cream-dim);border-radius:50% 50% 2px 50%;transform:rotate(45deg);border-left-color:transparent;border-bottom-color:transparent}
.roll-icon::before{content:'';position:absolute;inset:3px;border:2px solid var(--cream-dim);border-radius:50%;border-left-color:transparent;border-bottom-color:transparent;transform:rotate(-45deg)}
.roll-icon::after{content:'';position:absolute;right:2px;top:1px;border-left:4px solid var(--cream-dim);border-top:4px solid transparent;border-bottom:4px solid transparent}
.wp-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.wp-name{font-size:7px;letter-spacing:.15em;color:var(--muted);white-space:nowrap}
.wp-info b{font-family:var(--font-num);font-size:15px;line-height:1.1;font-weight:700;color:var(--cream);letter-spacing:.02em}
.weapon.low .wp-info b{color:var(--amber)}
.weapon.empty .wp-info b{color:var(--red)}
.weapon.flash{animation:weaponFlash .22s ease}
@keyframes weaponFlash{0%{background:rgba(255,179,71,.4)}100%{background:rgba(4,16,19,.6)}}
.cd-fill{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--amber);transform-origin:left;transform:scaleX(0);transition:transform .05s linear}
.weapon.ready .cd-fill{background:var(--green);box-shadow:0 0 8px rgba(139,195,74,.7)}
.weapon.ready .wp-info b{color:var(--green);font-size:11px;letter-spacing:.08em}

.hint-block{display:flex;flex-direction:column;gap:2px;text-align:right;font-family:var(--font-num);font-size:9px;letter-spacing:.06em;color:rgba(201,193,172,.6)}
.hint-block kbd{height:16px;min-width:18px;font-size:9px;padding:0 3px;margin-left:4px;opacity:.8}
body.touch-device .wp-key{display:none}
body.touch-device .hint-block{display:none}
body.touch-device .throttle-hint{display:none}
body.touch-device .wp-name{display:block}
body.touch-device .wp-icon{display:none}

/* banner */
.banner{
  position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;opacity:0;width:min(760px,88vw);
}
.banner.show{animation:bannerShow 3.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes bannerShow{
  0%{opacity:0;transform:translate(-50%,-46%) scale(.98)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  82%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-54%) scale(1)}
}
.banner-kicker{
  font-size:9px;letter-spacing:.36em;color:var(--amber);margin-bottom:9px;
  display:flex;align-items:center;justify-content:center;gap:12px;
}
.banner-kicker::before,.banner-kicker::after{content:'';width:42px;height:1px;background:linear-gradient(90deg,transparent,var(--amber))}
.banner-kicker::after{background:linear-gradient(90deg,var(--amber),transparent)}
.banner-title{
  font-size:clamp(32px,5vw,58px);line-height:1;letter-spacing:.07em;font-weight:600;
  color:var(--cream);text-shadow:0 6px 30px rgba(0,0,0,.75);
}
.banner-sub{margin-top:9px;font-family:var(--font-num);font-size:14px;letter-spacing:.12em;color:var(--cream-dim);text-shadow:0 2px 10px rgba(0,0,0,.9)}

/* mission splash */
.mission-splash{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(90deg,rgba(1,7,9,.94),rgba(2,12,14,.82),rgba(1,7,9,.94));
  opacity:0;pointer-events:none;z-index:13;
}
.mission-splash.show{animation:splashShow 2.2s ease both}
@keyframes splashShow{
  0%{opacity:0}
  10%{opacity:1}
  76%{opacity:1}
  100%{opacity:0}
}
.ms-kicker{font-size:9px;letter-spacing:.4em;color:var(--amber);margin-bottom:14px}
.ms-title{font-size:clamp(40px,7vw,84px);letter-spacing:.1em;line-height:1;color:var(--cream);text-shadow:0 0 60px rgba(111,214,207,.25)}
.ms-rule{width:110px;height:2px;background:linear-gradient(90deg,transparent,var(--red),transparent);margin:18px 0}
.ms-sub{font-family:var(--font-num);font-size:12px;letter-spacing:.24em;color:var(--cream-dim)}
.mission-splash.modern .ms-kicker{color:var(--aqua)}
.mission-splash.modern .ms-title{color:#dff7f4;text-shadow:0 0 60px rgba(111,214,207,.4)}
.mission-splash.modern .ms-rule{background:linear-gradient(90deg,transparent,var(--aqua),transparent)}

/* kill feed */
.kill-feed{position:absolute;right:214px;top:196px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:280px}
.kill-row{
  display:flex;align-items:center;gap:8px;padding:4px 8px;background:rgba(3,14,17,.55);
  border-right:2px solid var(--red);font-family:var(--font-num);font-size:11px;letter-spacing:.04em;
  color:var(--cream-dim);animation:killIn .35s cubic-bezier(.2,.8,.2,1) both;
}
.kill-row.ally{border-right-color:var(--aqua)}
.kill-row b{color:var(--cream);font-weight:600}
.kill-row em{color:var(--amber);font-weight:700;font-style:normal;margin-left:4px}
@keyframes killIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.kill-row.out{animation:killOut .4s ease both}
@keyframes killOut{to{opacity:0;transform:translateX(20px)}}

/* tutorial */
.tutorial{
  position:absolute;left:50%;bottom:112px;transform:translateX(-50%);
  background:rgba(3,14,17,.72);border:1px solid var(--line);border-top:2px solid var(--amber);
  padding:10px 16px 12px;backdrop-filter:blur(7px);text-align:center;
  transition:opacity .5s,transform .5s;pointer-events:none;max-width:94vw;z-index:5;
}
.tutorial.hide{opacity:0;transform:translate(-50%,12px)}
.tut-title{font-size:8px;letter-spacing:.3em;color:var(--amber);margin-bottom:8px}
.tut-grid{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.tut-grid div{display:flex;align-items:center;gap:4px;font-family:var(--font-num);font-size:10px;letter-spacing:.04em;color:var(--cream-dim)}
.tut-grid kbd{height:18px;min-width:18px;font-size:9px}

/* lock warning */
.lock-warning{
  position:absolute;left:50%;top:126px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;padding:7px 14px;
  background:rgba(70,10,6,.7);border:1px solid rgba(255,75,59,.6);
  opacity:0;transition:opacity .15s;pointer-events:none;
  box-shadow:0 0 30px rgba(255,75,59,.18);
}
.lock-warning.on{opacity:1;animation:lockPulse .5s infinite}
@keyframes lockPulse{50%{border-color:rgba(255,75,59,.25);box-shadow:0 0 12px rgba(255,75,59,.05)}}
.lw-icon{color:var(--red);font-size:18px;line-height:1}
.lw-text{display:flex;flex-direction:column;gap:1px}
.lw-text b{font-size:11px;letter-spacing:.2em;color:#ffb1a8}
.lw-text span{font-family:var(--font-num);font-size:10px;letter-spacing:.04em;color:rgba(255,209,202,.7)}

.combo-pop{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  font-family:var(--font-num);font-weight:700;font-size:28px;color:var(--amber);
  opacity:0;pointer-events:none;text-shadow:0 0 24px rgba(255,179,71,.5);
}
.combo-pop.pop{animation:comboPop .8s ease both}
@keyframes comboPop{0%{opacity:0;transform:translate(-50%,-40%) scale(.9)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-72%) scale(1.05)}}

.hud-toast{
  position:absolute;left:50%;top:22%;transform:translate(-50%,8px);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 18px;background:rgba(3,14,17,.72);border-left:2px solid var(--amber);
  border-right:2px solid rgba(255,179,71,.25);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;text-align:center;
}
.hud-toast.on{opacity:1;transform:translate(-50%,0)}
.hud-toast.with-banner{top:37%}
.hud-toast b{font-size:12px;letter-spacing:.16em;color:var(--cream)}
.hud-toast span{font-family:var(--font-num);font-size:11px;letter-spacing:.04em;color:var(--cream-dim)}

body.in-mission{cursor:crosshair}
body.in-mission .hud-buttons button,body.in-mission .touch-btn{cursor:pointer}
.joy-knob{transition:transform .04s linear}
.btn.confirming{background:rgba(140,32,22,.5)!important;border-color:var(--red)!important;color:#ffd0c9!important}

/* ==========================================================================
   PAUSE / GAME OVER
   ========================================================================== */
.screen-overlay{
  background:rgba(2,9,11,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  align-items:center;justify-content:center;padding:24px;
}
.pause-wrap{
  width:min(480px,94vw);border:1px solid var(--line);background:linear-gradient(170deg,rgba(6,23,27,.94),rgba(4,15,18,.96));
  padding:34px 34px 26px;box-shadow:var(--shadow);position:relative;
  animation:panelIn .35s ease both;
}
.pause-wrap::before,.pause-wrap::after{content:'';position:absolute;width:22px;height:22px;border:2px solid var(--amber)}
.pause-wrap::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.pause-wrap::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.pause-tools{position:absolute;top:12px;right:12px;display:flex;gap:5px;z-index:2}
.pause-tools .icon-btn{width:30px;height:30px}
.pause-tools .icon-btn svg{width:15px;height:15px}
.pause-head{text-align:center;margin-bottom:24px}
.pause-head h2{margin:0;font-size:56px;line-height:.95;letter-spacing:.06em;color:var(--cream)}
.pause-sub{margin:8px 0 0;font-family:var(--font-num);font-size:12px;letter-spacing:.13em;color:var(--amber)}
.pause-buttons{display:flex;flex-direction:column;gap:7px}
.pause-stats{
  display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-top:22px;padding:13px 0;
}
.pause-stats div{text-align:center;border-right:1px solid var(--line)}
.pause-stats div:last-child{border-right:0}
.pause-stats span{display:block;font-size:8px;letter-spacing:.18em;color:var(--muted);margin-bottom:3px}
.pause-stats b{font-family:var(--font-num);font-weight:700;font-size:18px;color:var(--cream)}
.pause-hint{text-align:center;margin-top:16px;font-family:var(--font-num);font-size:11px;color:var(--muted);letter-spacing:.06em}

.debrief{
  width:min(720px,95vw);max-height:94vh;overflow:auto;text-align:center;
  border:1px solid var(--line);background:linear-gradient(170deg,rgba(7,25,29,.94),rgba(4,14,17,.97));
  padding:36px 44px 32px;position:relative;box-shadow:var(--shadow);animation:panelIn .4s ease both;
}
.debrief::before,.debrief::after{content:'';position:absolute;width:24px;height:24px;border:2px solid var(--red)}
.debrief::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.debrief::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.debrief-stamp{
  display:inline-block;border:3px solid var(--red);color:var(--red);padding:4px 14px;
  font-size:15px;font-weight:600;letter-spacing:.24em;transform:rotate(-3deg);
  margin-bottom:20px;opacity:.92;
}
.debrief-stamp.success{border-color:var(--green);color:var(--green)}
.debrief .eyebrow{justify-content:center;margin-bottom:10px}
.debrief h2{margin:0;font-size:clamp(42px,6vw,64px);line-height:.95;letter-spacing:.03em}
.debrief-sub{margin:12px auto 22px;font-family:var(--font-num);font-size:15px;line-height:1.5;color:var(--cream-dim);max-width:460px}
.debrief-score{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;position:relative}
.debrief-score span{display:block;font-size:9px;letter-spacing:.26em;color:var(--muted);margin-bottom:2px}
.debrief-score b{font-family:var(--font-num);font-weight:700;font-size:48px;line-height:1;color:var(--amber);letter-spacing:.05em}
.debrief-score em{
  display:inline-block;vertical-align:top;margin-left:10px;margin-top:8px;font-family:var(--font-num);font-size:9px;font-weight:700;
  letter-spacing:.12em;color:#1a1307;background:var(--amber);padding:2px 6px;font-style:normal;
  animation:recordBlink 1s infinite;
}
@keyframes recordBlink{50%{opacity:.55}}
.debrief-stats{display:grid;grid-template-columns:repeat(4,1fr);padding:16px 0 10px}
.debrief-stats div{border-right:1px solid var(--line)}
.debrief-stats div:last-child{border-right:0}
.debrief-stats span{display:block;font-size:8px;letter-spacing:.2em;color:var(--muted);margin-bottom:4px}
.debrief-stats b{font-family:var(--font-num);font-weight:700;font-size:22px;color:var(--cream)}
.debrief-buttons{display:flex;gap:8px;margin-top:18px;text-align:left}
.debrief-buttons .btn{flex:1;min-width:0;padding:13px 12px;font-size:12px;letter-spacing:.1em;gap:10px}
.debrief-buttons .btn-index{width:14px;font-size:10px}
.debrief-buttons .btn-arrow{font-size:17px}

/* ==========================================================================
   TOUCH CONTROLS
   ========================================================================== */
#touch-controls{position:absolute;inset:0;pointer-events:none;z-index:12}
#touch-controls.hidden{display:none !important}
.joystick{
  position:absolute;left:28px;bottom:112px;width:112px;height:112px;border-radius:50%;
  border:1px solid rgba(241,233,214,.24);background:rgba(3,14,17,.35);
  pointer-events:auto;touch-action:none;backdrop-filter:blur(4px);
}
.joy-ring{position:absolute;inset:18px;border:1px dashed rgba(241,233,214,.15);border-radius:50%}
.joystick::after{
  content:'STEER';position:absolute;left:0;right:0;top:-17px;text-align:center;
  font-family:var(--font-num);font-weight:700;font-size:8px;letter-spacing:.22em;color:rgba(241,233,214,.42);
}
.joy-knob{
  position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.5),rgba(255,179,71,.55) 55%,rgba(255,179,71,.18));
  border:1px solid rgba(255,209,141,.6);box-shadow:0 0 18px rgba(255,179,71,.22);
}
.touch-actions{position:absolute;right:20px;bottom:100px;display:grid;grid-template-columns:64px 80px;grid-template-rows:50px 78px;gap:8px;pointer-events:auto}
.touch-btn{
  height:100%;width:100%;border:1px solid rgba(241,233,214,.26);background:rgba(3,14,17,.58);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:var(--font-num);font-weight:700;font-size:11px;letter-spacing:.1em;color:var(--cream);
  border-radius:12px;touch-action:none;backdrop-filter:blur(4px);position:relative;
}
#t-roll{grid-area:1/1}
#t-rocket{grid-area:1/2}
#t-sharp{grid-area:2/1}
#t-fire{grid-area:2/2;height:100%;width:100%;background:rgba(120,28,16,.62);border-color:rgba(255,75,59,.5);color:#ffe4df;border-radius:50%}
.touch-btn small{font-size:8px;color:var(--muted);font-weight:600}
.touch-btn b{font-size:9px;color:var(--amber)}
.touch-btn:active{background:rgba(255,179,71,.28);border-color:var(--amber)}
.touch-btn.small.on{background:rgba(255,179,71,.2);border-color:var(--amber)}

/* ==========================================================================
   LOADING / ROTATE
   ========================================================================== */
.loading-screen{
  display:flex;background:#041012;z-index:60;align-items:center;justify-content:center;
}
.loading-screen.done{opacity:0;pointer-events:none;transition:opacity .6s ease}
.loader-inner{text-align:center;width:280px}
.loader-mark{
  width:54px;height:54px;border:1px solid rgba(255,179,71,.35);margin:0 auto 20px;position:relative;
  animation:loaderSpin 3s linear infinite;
}
.loader-mark::before,.loader-mark::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--amber);opacity:.8}
.loader-mark::before{transform:rotate(45deg)}
.loader-mark::after{transform:rotate(-45deg)}
@keyframes loaderSpin{to{transform:rotate(90deg)}}
.loader-title{font-size:34px;letter-spacing:.3em;margin-bottom:18px;color:var(--cream)}
.loader-bar{height:2px;background:rgba(241,233,214,.12);overflow:hidden}
.loader-bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,transparent,var(--amber),transparent);animation:loaderBar 1.1s ease infinite}
@keyframes loaderBar{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.loader-text{font-family:var(--font-num);font-size:9px;letter-spacing:.28em;color:var(--muted);margin-top:12px}

#rotate-notice{
  position:absolute;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  background:#041012;text-align:center;padding:30px;
}
#rotate-notice b{display:block;font-size:20px;letter-spacing:.2em;margin-bottom:8px}
#rotate-notice span{font-family:var(--font-num);font-size:13px;color:var(--muted);line-height:1.5}
@media (max-width:900px) and (orientation:portrait){
  #rotate-notice{display:flex}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1200px){
  .menu-main{padding:0 5.5vw}
  .kill-feed{right:198px}
  .aircraft-panel{width:250px}
  .radar-panel{width:150px;height:150px;padding:7px}
  #radar{width:134px;height:134px}
  .hint-block{display:none}
}
@media (max-width:980px){
  .menu-controls{display:none}
  .menu-bottom{justify-content:flex-end}
  .settings-grid{grid-template-columns:1fr 1fr;gap:24px}
  .settings-group:nth-child(2){border-right:0}
  .settings-group:nth-child(3){grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;padding-right:0}
  .hud-center{position:absolute;left:50%;transform:translateX(-50%);top:96px}
  .kill-feed{right:16px;top:172px}
  .weapons-block{flex-wrap:wrap;justify-content:flex-end}
  .weapon.cooldown{display:none}
}
@media (max-width:760px){
  .menu-header{padding:16px 20px}
  .brand{font-size:10px;letter-spacing:.22em}
  .menu-main{padding:0 24px;align-items:center}
  .menu-copy{max-width:100%}
  .title-top,.title-bottom{font-size:clamp(66px,19vw,120px)}
  .title-bottom{margin-left:.12em}
  .menu-blurb{font-size:14px;max-width:360px;margin:16px 0 20px}
  .menu-buttons{max-width:100%}
  .btn{padding:13px 16px;font-size:13px}
  .menu-best{margin-top:18px}
  .menu-bottom{padding:12px 20px;justify-content:center}
  .menu-meta{display:none}
  .eyebrow{font-size:9px;letter-spacing:.24em}
  .eyebrow span{width:20px}
  .title-sub{font-size:10px;letter-spacing:.24em;margin-top:15px}
  .hud-top{padding:12px}
  .hud-right{gap:6px}
  .radar-panel{width:112px;height:112px;padding:6px}
  #radar{width:98px;height:98px}
  .radar-range{display:none}
  .aircraft-panel{width:200px;padding:8px 9px}
  .aircraft-name{font-size:10px;letter-spacing:.1em}
  .aircraft-tag{display:none}
  .bar-label{width:26px;font-size:7px}
  .bar-value{font-size:10px;width:26px}
  .hud-center{top:88px}
  .mission-line{font-size:8px;gap:6px}
  #objective-label{max-width:180px}
  .hud-bottom{padding:0 12px 10px}
  .throttle-block{width:150px}
  .weapons-block{gap:4px}
  .weapon{min-width:0;padding:6px 7px;gap:5px}
  .wp-icon{display:none}
  .wp-name{display:none}
  .wp-info b{font-size:13px}
  .hud-buttons .icon-btn{width:28px;height:28px}
  .tutorial{bottom:96px;padding:8px 10px}
  .tut-grid{gap:8px}
  .tut-grid div{font-size:9px}
  .banner{top:30%}
  .lock-warning{top:150px}
  .kill-feed{top:140px;right:12px}
  .panel-wrap{padding:22px 20px;width:96vw;max-height:96vh}
  .manual-grid{grid-template-columns:1fr}
  .manual-card{min-height:0;padding:18px}
  .manual-footer{flex-direction:column;align-items:stretch}
  .controls-table{grid-template-columns:repeat(2,1fr)}
  .settings-grid{grid-template-columns:1fr}
  .settings-group{border-right:0;padding-right:0;border-bottom:1px solid var(--line);padding-bottom:18px}
  .settings-group:nth-child(3){border-top:0;padding-top:0}
  .settings-group:last-child{border-bottom:0}
  .pause-wrap{padding:24px 20px 20px}
  .pause-head h2{font-size:44px}
  .pause-stats{grid-template-columns:repeat(2,1fr);gap:10px 0}
  .pause-stats div:nth-child(2){border-right:0}
  .debrief{padding:24px 20px}
  .debrief-stats{grid-template-columns:repeat(2,1fr);gap:12px 0}
  .debrief-stats div:nth-child(2){border-right:0}
  .debrief-buttons{flex-direction:column}
  .weapon#weapon-roll{display:none}
  .joystick{left:16px;bottom:100px;width:100px;height:100px}
  .touch-actions{right:14px;bottom:92px;grid-template-columns:58px 72px;grid-template-rows:46px 72px;gap:7px}
  .touch-btn{font-size:10px}
  .hint-block{display:none}
}
@media (max-height:980px){
  .menu-header{padding:18px 34px}
  .title-top,.title-bottom{font-size:clamp(70px,11.4vw,168px)}
  .title-sub{margin-top:14px}
  .menu-blurb{font-size:15px;line-height:1.45;margin:16px 0 20px;max-width:420px}
  .menu-buttons{gap:7px}
  .btn{padding:12px 17px;font-size:13px}
  .menu-best{margin-top:16px;padding-top:11px}
}
@media (max-height:820px){
  .menu-header{padding:14px 28px}
  .menu-main{padding:0 6vw}
  .title-top,.title-bottom{font-size:clamp(62px,10.2vw,150px)}
  .title-sub{font-size:11px;letter-spacing:.28em;margin-top:12px}
  .eyebrow{font-size:9px;margin-bottom:10px}
  .menu-blurb{font-size:14px;line-height:1.4;margin:14px 0 18px;max-width:400px}
  .menu-buttons{gap:6px}
  .btn{padding:11px 16px;font-size:13px}
  .menu-best{margin-top:14px;padding-top:10px}
  .menu-bottom{padding:10px 28px 12px}
  .menu-controls{gap:14px}
  .menu-meta{font-size:8px}
}
@media (max-height:620px){
  .menu-main{padding-top:0}
  .menu-blurb{display:none}
  .menu-best{margin-top:14px}
  .title-top,.title-bottom{font-size:clamp(58px,12vh,110px)}
  .menu-buttons{gap:6px}
  .btn{padding:11px 15px}
  .tutorial{bottom:88px}
  .hud-bottom{padding-bottom:8px}
  .mission-splash .ms-title{font-size:42px}
}
@media (max-height:560px){
  .menu-header{padding:10px 16px}
  .brand{display:none}
  .menu-tools .icon-btn.large{width:36px;height:36px}
  .menu-main{padding:0 24px;align-items:center;justify-content:center}
  .menu-copy{max-width:600px;width:100%}
  .game-title{flex-direction:row;align-items:flex-end;line-height:.82}
  .title-top,.title-bottom{font-size:clamp(48px,17vh,86px);letter-spacing:-.02em}
  .title-bottom{margin-left:.04em}
  .title-slash{left:-12px;top:6%;height:80%;width:7px}
  .eyebrow{display:none}
  .title-sub{font-size:9px;letter-spacing:.24em;margin:8px 0 0 3px}
  .menu-blurb{display:none}
  .menu-buttons{gap:5px;margin-top:12px;max-width:360px}
  .btn{padding:9px 13px;font-size:12px;letter-spacing:.11em}
  .btn-index{font-size:9px;width:15px}
  .btn-arrow{font-size:16px}
  .menu-best{margin-top:10px;padding-top:8px;max-width:360px}
  .best-label{font-size:8px}
  .best-value{font-size:17px}
  .best-record{font-size:8px}
  .menu-bottom{display:none}

  .hud-top{padding:10px}
  .aircraft-panel{width:206px;padding:7px 9px}
  .aircraft-head{margin-bottom:6px}
  .aircraft-name{font-size:10px;letter-spacing:.11em}
  .aircraft-tag{display:none}
  .bar-row{gap:5px;margin-bottom:4px}
  .bar-label{width:24px;font-size:7px}
  .bar{height:6px}
  .bar-value{font-size:9px;width:24px}
  .reload-line.on{height:10px;margin-top:2px}
  .reload-line{font-size:7px}
  .hud-center{position:absolute;left:50%;transform:translateX(-50%);top:60px}
  .mission-line{font-size:7px;gap:6px;letter-spacing:.16em}
  #objective-label{max-width:180px}
  .score-line{margin-top:0}
  #score-value{font-size:23px}
  .score-cap{font-size:7px}
  .combo{font-size:11px}
  .objective-timer{margin-top:3px;gap:6px}
  .timer-bar{width:100px}
  .radar-panel{width:106px;height:106px;padding:5px}
  #radar{width:96px;height:96px}
  .radar-range{display:none}
  .hud-buttons{gap:4px}
  .hud-buttons .icon-btn{width:30px;height:30px}
  .hud-buttons .icon-btn svg{width:15px;height:15px}
  .hud-bottom{padding:0 10px 8px;gap:8px}
  .throttle-block{width:138px;padding:6px 8px 7px}
  .throttle-head{margin-bottom:4px}
  .throttle-head span{font-size:7px}
  .throttle-head b{font-size:16px}
  .throttle-hint{font-size:6px;margin-top:3px}
  .weapons-block{gap:4px}
  .weapon{padding:5px 7px;min-width:0;gap:5px}
  .weapon.cooldown{display:none}
  .wp-icon{display:none}
  .wp-name{display:none}
  body.touch-device .wp-name{display:block;font-size:6px;letter-spacing:.08em}
  .wp-key{font-size:8px;min-width:18px;padding:1px 3px}
  .wp-info b{font-size:13px}
  .hint-block{display:none}
  .tutorial{display:none}
  .kill-feed{top:112px;right:128px;max-width:190px}
  .kill-row{font-size:9px;padding:3px 6px}
  .banner{top:31%}
  .banner-kicker{font-size:8px;margin-bottom:5px}
  .banner-title{font-size:clamp(26px,4.5vw,38px)}
  .banner-sub{font-size:10px;margin-top:5px}
  .lock-warning{top:112px;padding:5px 10px}
  .hud-toast{padding:6px 12px}
  .hud-toast b{font-size:10px}
  .hud-toast span{font-size:9px}
  .mission-splash .ms-title{font-size:38px}
  .ms-kicker{font-size:7px;margin-bottom:8px}
  .ms-sub{font-size:9px}
  .ms-rule{margin:10px 0}

  .touch-actions{right:12px;bottom:72px;grid-template-columns:56px 74px;grid-template-rows:46px 70px;gap:7px}
  .touch-btn{font-size:9px}
  .touch-btn small{font-size:7px}
  .joystick{left:14px;bottom:78px;width:92px;height:92px}
  .joy-ring{inset:14px}
  .joy-knob{width:38px;height:38px;margin:-19px 0 0 -19px}
  .menu-header{justify-content:flex-end}

  .panel-wrap{padding:16px 20px;max-height:97vh;width:96vw}
  .panel-head{margin-bottom:14px;padding-bottom:12px}
  .panel-head h2{font-size:30px}
  .manual-card{padding:13px 16px;min-height:0}
  .manual-card h3{font-size:15px;margin-bottom:6px}
  .manual-card p{font-size:13px;margin-bottom:6px}
  .manual-footer{margin-top:12px}
  .controls-table{gap:6px 18px}
  .settings-grid{gap:18px}
  .setting{margin-bottom:12px}
  .settings-footer{margin-top:14px;padding-top:12px}
  .pause-wrap{padding:16px 22px;max-height:97vh;overflow:auto;width:min(480px,96vw)}
  .pause-head{margin-bottom:12px}
  .pause-head h2{font-size:34px}
  .pause-sub{font-size:10px;margin-top:5px}
  .pause-buttons{gap:5px}
  .pause-stats{margin-top:12px;padding:8px 0}
  .pause-stats b{font-size:15px}
  .pause-hint{margin-top:8px}
  .debrief{padding:14px 20px;max-height:97vh}
  .debrief-stamp{padding:2px 10px;font-size:11px;margin-bottom:8px;border-width:2px}
  .debrief h2{font-size:34px}
  .debrief-sub{font-size:12px;margin:5px auto 10px}
  .debrief-score{padding:8px 0}
  .debrief-score b{font-size:34px}
  .debrief-stats{padding:8px 0 4px}
  .debrief-stats b{font-size:17px}
  .debrief-buttons{margin-top:10px}
  .debrief .eyebrow{margin-bottom:4px}
}
/* ---- hangar responsive ---- */
@media (max-width:1100px){
  .shop-tab{padding:4px 5px;font-size:7px;letter-spacing:.07em}
  .shop-tab b{display:none}
  .shop-body{grid-template-columns:minmax(276px,318px) minmax(0,1fr)}
  .shop-card{grid-template-columns:16px 68px minmax(0,1fr) auto;gap:8px}
  .sc-thumb{width:68px;height:46px}
  .detail-stats{gap:5px 18px}
  .detail-body{padding:15px 20px 10px}
  .detail-foot{padding:11px 20px}
}
@media (max-width:900px){
  .shop-wrap{max-height:96vh}
  .shop-head{align-items:flex-start}
  .shop-body{grid-template-columns:minmax(244px,286px) minmax(0,1fr)}
  .shop-card{grid-template-columns:16px 64px minmax(0,1fr) auto;gap:8px}
  .sc-thumb{width:64px;height:46px}
  .shop-preview-wrap{height:178px}
  .detail-stats{grid-template-columns:1fr 1fr}
  .shop-detail{min-height:0}
}
@media (max-width:760px){
  .shop-wrap{width:96vw;padding:16px 16px 14px}
  .shop-head{margin-bottom:12px;gap:10px}
  .shop-head-right{width:100%;justify-content:space-between}
  .wallet-amount b{font-size:23px}
  #shop-blurb{font-size:12.5px}
  .detail-foot{flex-wrap:wrap;gap:10px}
  #btn-shop-action{min-width:0;flex:1}
  .shop-footer{flex-direction:column;align-items:stretch;gap:10px}
  .shop-footer-actions{justify-content:flex-end}
  .btn-tag{display:none}
  .menu-wallet{height:34px;padding:0 9px}
  .menu-wallet b{font-size:13px}
  .debrief-credits i{display:none}
}
@media (max-height:860px){
  .shop-body{height:min(64vh,540px);min-height:300px}
  .shop-preview-wrap{height:180px}
}
@media (max-height:720px){
  .shop-body{height:min(62vh,480px);min-height:280px}
  .shop-preview-wrap{height:170px}
  .detail-body{padding:13px 20px 9px}
  #shop-name{font-size:clamp(22px,2.4vw,30px)}
  #shop-blurb{display:none}
  .detail-stats{gap:4px 20px;margin-bottom:10px}
  .detail-specs{padding:6px 0;margin-bottom:8px}
  .detail-foot{padding:10px 20px}
  .detail-price b{font-size:20px}
  .shop-note{font-size:10px}
}
@media (max-height:620px){
  .shop-wrap{padding:13px 20px 12px}
  .shop-head{margin-bottom:10px}
  .shop-preview-wrap{height:120px}
  .shop-body{height:min(62vh,400px);min-height:260px}
  #shop-blurb{display:none}
  .detail-armament{margin-top:2px}
  .detail-body{overflow-y:auto}
  .detail-body{padding:10px 16px 8px}
  .detail-kicker{font-size:8px;margin-bottom:3px}
  #shop-name{font-size:21px;margin-bottom:4px}
  .detail-specs{padding:5px 0;margin-bottom:6px}
  .detail-stats{gap:3px 14px;margin-bottom:7px}
  .stat span{width:58px;font-size:8px}
  .detail-foot{padding:8px 16px}
  .detail-price b{font-size:18px}
  .shop-footer{margin-top:8px}
  .shop-list-head{padding:7px 10px}
  .shop-note{display:none}
}
@media (max-height:560px){
  .shop-wrap{padding:10px 16px}
  .shop-head{margin-bottom:8px}
  .shop-preview-wrap{height:110px}
  .shop-body{height:min(50vh,310px);min-height:236px}
  .detail-body{padding:8px 14px 6px}
  .detail-price b{font-size:17px}
  .detail-foot{padding:7px 14px}
  .shop-footer{margin-top:7px}
}

/* compact landscape screens: keep the list beside the detail panel */
@media (max-width:900px) and (max-height:760px){
  .shop-wrap{padding:8px 12px;max-height:97vh;overflow:hidden}
  .shop-head{margin-bottom:8px;align-items:center}
  .shop-title h2{font-size:26px}
  .shop-head-right{gap:10px}
  .wallet-label{display:none}
  .wallet-amount b{font-size:20px}
  .shop-body{grid-template-columns:minmax(196px,228px) minmax(0,1fr);height:min(62vh,420px);min-height:0}
  .shop-tabs{flex-wrap:nowrap;overflow-x:auto;padding:3px}
  .shop-tab{padding:4px 6px;font-size:7px}
  .shop-tab b{display:none}
  .shop-list{flex-direction:column;overflow-y:auto;overflow-x:hidden;padding:1px}
  .shop-list-head{padding:6px 10px;font-size:7px}
  .sc-gen{display:none}
  .shop-card{
    min-width:0;grid-template-columns:13px 50px minmax(0,1fr);grid-template-rows:auto auto;
    gap:1px 7px;padding:5px 8px;
  }
  .sc-index{grid-row:1/3;align-self:start;font-size:8px}
  .sc-thumb{grid-row:1/3;width:50px;height:36px;align-self:center}
  .sc-body{grid-column:3;grid-row:1}
  .sc-state{grid-column:3;grid-row:2;flex-direction:row;align-items:center;gap:6px;justify-content:flex-start}
  .sc-name{font-size:10px;letter-spacing:.06em}
  .sc-role{font-size:8px}
  .sc-price{font-size:9px}
  .sc-badge{font-size:6px}
  .shop-preview-wrap{display:none}
  .shop-detail{min-height:0}
  .detail-body{overflow-y:auto;padding:9px 14px 6px}
  .detail-kicker{font-size:7px;letter-spacing:.16em;gap:6px;margin-bottom:3px}
  .detail-tier{font-size:7px;padding:1px 4px}
  #shop-name{font-size:19px;margin-bottom:3px}
  #shop-blurb{display:none}
  .detail-armament{margin-bottom:6px;gap:16px}
  .detail-armament span{font-size:7px}
  .detail-armament b{font-size:10px}
  .detail-stats{grid-template-columns:1fr 1fr;gap:2px 14px;margin-bottom:6px}
  .stat span{width:54px;font-size:7px}
  .stat b{font-size:9px;width:18px}
  .detail-specs{display:grid;padding:4px 0;margin-bottom:0}
  .spec span{font-size:7px}
  .spec b{font-size:10px}
  .detail-foot{padding:7px 12px;gap:8px;flex-wrap:nowrap}
  .detail-price span{font-size:7px}
  .detail-price b{font-size:17px}
  #btn-shop-action{min-width:0;padding:9px 12px;font-size:10px}
  .shop-footer{margin-top:6px;justify-content:flex-end}
  .shop-footer-actions .btn{padding:8px 12px;font-size:10px}
  .shop-note{display:none}
}

@media (pointer:coarse){
  input[type=range]::-webkit-slider-thumb{width:18px;height:18px}
  input[type=range]{height:4px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}


/* ==========================================================================
   CAMPAIGN / LEVEL SELECT
   ========================================================================== */
.wingmen-label{color:var(--aqua);font-family:var(--font-num);font-size:9px;font-weight:700;letter-spacing:.18em}
.mission-line .wingmen-divider{background:rgba(111,214,207,.4)}
.debrief-stamp.clear{border-color:var(--aqua);color:var(--aqua)}

.screen-levels{
  background:
    radial-gradient(90% 70% at 78% 22%,rgba(15,58,63,.45),transparent 62%),
    linear-gradient(180deg,rgba(3,11,13,.95),rgba(2,8,10,.98));
}
.levels-wrap{
  width:min(1240px,95vw);padding:26px 32px 20px;display:flex;flex-direction:column;
  max-height:94vh;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(7,25,29,.85),rgba(4,15,18,.94)),
    repeating-linear-gradient(90deg,rgba(111,214,207,.03) 0 1px,transparent 1px 72px);
}
.levels-head{margin-bottom:16px;align-items:flex-end;flex-wrap:wrap}
.levels-title h2{margin:0}
.levels-head-right{display:flex;align-items:center;gap:18px}
.levels-progress{text-align:right;min-width:126px}
.levels-progress span{display:block;font-size:8px;letter-spacing:.22em;color:var(--muted);margin-bottom:2px}
.levels-progress b{font-family:var(--font-num);font-weight:700;font-size:20px;line-height:1;color:var(--aqua);letter-spacing:.04em}
.levels-progress-bar{width:136px;height:3px;margin-top:5px;background:rgba(0,0,0,.5);border:1px solid rgba(111,214,207,.2);overflow:hidden}
.levels-progress-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2e7f79,var(--aqua));box-shadow:0 0 10px rgba(111,214,207,.35);transition:width .35s ease}

.levels-body{
  display:grid;grid-template-columns:minmax(304px,366px) minmax(0,1fr);
  height:min(60vh,560px);min-height:360px;
  border:1px solid var(--line);background:var(--line);gap:1px;position:relative;
}
.levels-body::before,.levels-body::after{content:'';position:absolute;width:18px;height:18px;border:1px solid rgba(255,179,71,.4);pointer-events:none;z-index:3}
.levels-body::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.levels-body::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.levels-side{display:flex;flex-direction:column;min-height:0;min-width:0;background:rgba(4,15,18,.92)}
.levels-tabs{display:flex;flex-wrap:wrap;gap:1px;padding:4px;flex:none;border-bottom:1px solid var(--line);background:rgba(3,12,15,.62)}
.level-tab{
  display:flex;align-items:center;gap:5px;padding:5px 7px;border:1px solid transparent;
  font-family:var(--font-num);font-weight:700;font-size:7.5px;letter-spacing:.1em;
  color:var(--muted);transition:.15s ease;white-space:nowrap;background:transparent;
}
.level-tab:hover{color:var(--cream);background:rgba(255,179,71,.06)}
.level-tab.active{color:var(--amber);background:rgba(255,179,71,.12);border-color:rgba(255,179,71,.32)}
.levels-list-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--line);font-size:8px;letter-spacing:.26em;color:var(--muted);flex:none;
}
.levels-list-head b{font-family:var(--font-num);font-size:10px;letter-spacing:.08em;color:var(--amber)}
.levels-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1px;padding:1px;scrollbar-width:thin;scrollbar-color:rgba(255,179,71,.35) transparent}
.levels-list::-webkit-scrollbar{width:6px}
.levels-list::-webkit-scrollbar-thumb{background:rgba(255,179,71,.3)}
.level-card{
  position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;gap:10px;padding:9px 12px 9px 10px;width:100%;text-align:left;
  background:rgba(6,21,25,.6);border-left:2px solid transparent;color:var(--cream);
  transition:background .18s ease,border-color .18s ease;flex:none;
}
.level-card:hover{background:rgba(10,32,37,.92)}
.level-card.selected{background:linear-gradient(90deg,rgba(255,179,71,.15),rgba(8,27,31,.92) 62%);border-left-color:var(--amber)}
.level-card.locked{opacity:.46}
.level-card.locked .lc-state{color:var(--muted)}
.level-card.cleared .lc-state{color:var(--aqua)}
.lc-num{font-family:var(--font-num);font-weight:700;font-size:13px;letter-spacing:.04em;color:rgba(255,179,71,.65)}
.lc-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.lc-name{font-size:11px;font-weight:600;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-meta{font-family:var(--font-num);font-size:8px;letter-spacing:.1em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-state{font-family:var(--font-num);font-weight:700;font-size:7px;letter-spacing:.12em;color:rgba(135,155,153,.7);white-space:nowrap}

.levels-detail{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;overflow:hidden;background:linear-gradient(165deg,rgba(7,25,29,.92),rgba(4,14,17,.97))}
.level-hero{padding:18px 24px 12px;border-bottom:1px solid var(--line);flex:none}
.level-hero h3{margin:3px 0 6px;font-size:clamp(26px,3vw,38px);line-height:.98;letter-spacing:.03em;color:var(--cream)}
.level-hero p{margin:0;font-family:var(--font-num);font-size:13px;line-height:1.45;color:var(--cream-dim);max-width:760px}
.level-columns{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(210px,.8fr);gap:24px;padding:14px 24px;flex:1;min-height:0;overflow:hidden}
.level-enemy-panel,.level-info-panel{display:flex;flex-direction:column;min-width:0;min-height:0}
.level-columns h4{margin:0 0 6px;font-size:8px;letter-spacing:.22em;color:var(--muted);font-weight:500}
.level-enemy-list{display:flex;flex-wrap:wrap;align-content:flex-start;gap:5px;overflow-y:auto;min-height:0;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(255,179,71,.3) transparent}
.enemy-chip{
  display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(241,233,214,.16);
  background:rgba(3,13,16,.65);padding:4px 6px;white-space:nowrap;
}
.enemy-chip b{font-family:var(--font-num);font-size:9px;font-weight:700;letter-spacing:.04em;color:var(--cream-dim)}
.enemy-chip em{font-family:var(--font-num);font-size:10px;font-weight:700;font-style:normal;color:var(--amber)}
.enemy-chip span{font-family:var(--font-num);font-size:6.5px;letter-spacing:.08em;color:rgba(135,155,153,.7)}
.enemy-chip[data-tier="gen4"]{border-color:rgba(111,214,207,.22)}
.enemy-chip[data-tier="gen45"]{border-color:rgba(255,179,71,.28)}
.enemy-chip[data-tier="gen5"]{border-color:rgba(255,120,80,.32);background:rgba(46,17,13,.28)}
.level-info-panel p{margin:0 0 10px;font-family:var(--font-num);font-size:12px;line-height:1.35;color:var(--cream-dim)}
#level-reward{color:var(--amber);font-weight:700;font-size:15px}
#level-best{color:var(--cream);font-weight:700;font-size:13px}
.level-foot{
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 24px;flex:none;
  border-top:1px solid var(--line);background:linear-gradient(0deg,rgba(1,8,10,.72),rgba(0,0,0,.1));
}
.level-foot #btn-level-launch{min-width:190px;justify-content:center}
.level-foot #btn-level-hangar{min-width:150px;justify-content:center}
.levels-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:13px;flex-wrap:wrap;flex:none}
.levels-note{font-family:var(--font-num);font-size:11px;letter-spacing:.03em;color:var(--muted)}
#btn-levels-back{min-width:150px;justify-content:center}

@media(max-width:1050px){
  .levels-body{grid-template-columns:minmax(268px,320px) minmax(0,1fr)}
  .level-columns{grid-template-columns:1fr;overflow:auto}
  .level-enemy-list{overflow:visible}
}
@media(max-width:820px){
  .levels-wrap{width:96vw;padding:16px 16px 14px;max-height:97vh}
  .levels-head-right{gap:10px;flex-wrap:wrap}
  .levels-progress{min-width:100px}
  .levels-progress-bar{width:110px}
  .levels-body{grid-template-columns:1fr;height:auto;min-height:0;overflow:auto}
  .levels-side{max-height:34vh}
  .levels-list{max-height:25vh}
  .levels-detail{min-height:0}
  .level-hero{padding:14px 16px 10px}
  .level-columns{padding:12px 16px;grid-template-columns:1fr;gap:14px}
  .level-foot{padding:10px 16px;flex-wrap:wrap}
  .level-foot #btn-level-launch,.level-foot #btn-level-hangar{min-width:0;flex:1}
  .levels-footer{flex-direction:column;align-items:stretch;gap:9px}
  #btn-levels-back{width:100%}
}
@media(max-height:700px){
  .levels-wrap{padding:14px 20px 12px}
  .levels-head{margin-bottom:9px}
  .levels-body{height:min(64vh,500px);min-height:300px}
  .level-hero{padding:12px 18px 9px}
  .level-hero h3{font-size:26px}
  .level-hero p{font-size:12px}
  .level-columns{padding:10px 18px}
  .level-foot{padding:8px 18px}
  .levels-footer{margin-top:8px}
}

/* campaign tag on the primary menu button */
.btn.primary .btn-tag{border-color:rgba(6,18,21,.35);background:rgba(6,18,21,.16);color:#1d1408}
.btn.primary .btn-tag.complete{color:#1d1408;border-color:rgba(6,18,21,.45);background:rgba(6,18,21,.2)}
.level-card.cleared .lc-num{color:var(--aqua)}
.level-card.cleared .lc-name{color:rgba(220,255,248,.92)}

/* ==========================================================================
   POLISH PASS — refined art direction, motion, onboarding & flight school
   ========================================================================== */

/* ---- shared texture & corner language ---------------------------------- */
:root{
  --line-soft:rgba(241,233,214,.08);
  --glass:rgba(5,20,24,.66);
  --glass-deep:rgba(3,12,15,.92);
  --amber-glow:0 0 28px rgba(255,179,71,.24);
}
::selection{background:rgba(255,179,71,.28);color:#fff8e7}

.screen-panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.screen-panel::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(115deg,transparent 0 49.85%,rgba(111,214,207,.034) 49.9% 50.1%,transparent 50.15%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px);
}
.panel-wrap{box-shadow:0 32px 90px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.045);isolation:isolate}
.panel-wrap::before,.panel-wrap::after{box-shadow:0 0 22px rgba(255,179,71,.14)}
.panel-head{position:relative}
.panel-head::after{
  content:'';position:absolute;left:0;bottom:-1px;width:120px;height:1px;
  background:linear-gradient(90deg,var(--amber),transparent);
}
.eyebrow span{background:linear-gradient(90deg,transparent,var(--red));box-shadow:0 0 10px rgba(255,75,59,.24)}
.eyebrow.small span{background:linear-gradient(90deg,transparent,var(--amber))}
.close-panel{transition:transform .2s ease,color .2s ease,border-color .2s ease,background .2s ease}
.close-panel:hover{transform:rotate(90deg);background:rgba(255,75,59,.08)}

/* ---- custom brand & main menu ------------------------------------------ */
.brand{gap:11px}
.brand-crest{
  width:38px;height:38px;display:block;flex:none;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(255,179,71,.14));
  animation:crestFloat 7s ease-in-out infinite;
}
@keyframes crestFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.brand-copy{display:flex;flex-direction:column;gap:2px;line-height:1}
.brand-copy b{font-size:12px;font-weight:600;letter-spacing:.31em;color:var(--cream-dim)}
.brand-copy em{font-family:var(--font-num);font-style:normal;font-size:7px;font-weight:600;letter-spacing:.24em;color:rgba(135,155,153,.66)}
.menu-tools{align-items:center}
.menu-tools .icon-btn{align-self:center}

.screen-menu::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.8;
  background:
    radial-gradient(circle at 78% 47%,transparent 0 148px,rgba(241,233,214,.055) 149px 150px,transparent 151px 249px,rgba(111,214,207,.06) 250px 251px,transparent 252px 388px,rgba(241,233,214,.035) 389px 390px,transparent 391px),
    linear-gradient(90deg,transparent 61%,rgba(111,214,207,.025) 61.1%,transparent 61.2%),
    linear-gradient(0deg,transparent 63%,rgba(111,214,207,.02) 63.1%,transparent 63.2%);
  -webkit-mask-image:linear-gradient(90deg,transparent 34%,#000 72%);
  mask-image:linear-gradient(90deg,transparent 34%,#000 72%);
}
.screen-menu::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(111,214,207,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(111,214,207,.032) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(circle at 79% 48%,transparent 0 34%,#000 78%);
  mask-image:radial-gradient(circle at 79% 48%,transparent 0 34%,#000 78%);
  opacity:.35;
}
.menu-main{isolation:isolate}
.menu-copy{position:relative;z-index:2}
.menu-insignia{
  position:absolute;right:6.5vw;top:52%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:4px;width:148px;text-align:center;
  pointer-events:none;opacity:.82;filter:drop-shadow(0 18px 35px rgba(0,0,0,.5));
  animation:insigniaIn 1.4s cubic-bezier(.2,.8,.2,1) both .5s;
}
@keyframes insigniaIn{from{opacity:0;transform:translateY(-46%) scale(.94)}to{opacity:.82;transform:translateY(-50%) scale(1)}}
.menu-insignia img{width:112px;height:112px;margin-bottom:2px;filter:drop-shadow(0 0 25px rgba(255,179,71,.16))}
.menu-insignia span{font-size:8px;letter-spacing:.28em;color:rgba(241,233,214,.58)}
.menu-insignia em{font-family:var(--font-num);font-style:normal;font-size:7px;letter-spacing:.2em;color:rgba(111,214,207,.48)}

.game-title{filter:drop-shadow(0 18px 39px rgba(0,0,0,.62))}
.title-top,.title-bottom{
  background:linear-gradient(172deg,#fffdf3 4%,#f1e6c9 30%,#c3b595 56%,#f9efdb 72%,#d8c9aa 100%);
  -webkit-background-clip:text;background-clip:text;
}
.title-top{position:relative}
.title-top::after{
  content:'DOG';position:absolute;inset:0;color:transparent;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 48%,transparent 60%);
  -webkit-background-clip:text;background-clip:text;
  animation:titleGlint 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes titleGlint{0%,72%{opacity:0;transform:translateX(-8%)}80%{opacity:.7}90%,100%{opacity:0;transform:translateX(9%)}}
.title-slash{width:9px;border-radius:1px}
.title-sub{text-shadow:0 2px 10px rgba(0,0,0,.6)}
.menu-blurb{
  position:relative;padding-left:14px;
  border-left:1px solid rgba(255,179,71,.28);
}
.menu-blurb::before{content:'';position:absolute;left:-1px;top:0;width:1px;height:18px;background:var(--amber);box-shadow:0 0 8px rgba(255,179,71,.6)}

.menu-buttons{max-width:390px}
.btn{
  border-left-width:2px;border-left-color:rgba(255,75,59,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.btn::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.16) 48%,transparent 57%);
  transform:translateX(-40%);
}
.btn:hover::after{opacity:1;animation:btnSweep .55s ease}
@keyframes btnSweep{from{transform:translateX(-40%)}to{transform:translateX(40%)}}
.btn:focus-visible,.icon-btn:focus-visible,.seg button:focus-visible,.shop-card:focus-visible,.level-card:focus-visible,.coach-skip:focus-visible{
  outline:1px solid var(--amber);outline-offset:2px;
}
.btn.primary{
  border-left-width:3px;
  box-shadow:0 10px 28px rgba(255,158,47,.17),inset 0 1px 0 rgba(255,255,255,.58),inset 0 -1px 0 rgba(116,68,0,.25);
}
.btn.primary:hover{box-shadow:0 15px 42px rgba(255,158,47,.34),inset 0 1px 0 rgba(255,255,255,.62)}
.btn.btn-school{
  border-left-color:rgba(111,214,207,.6);
  background:linear-gradient(90deg,rgba(8,38,42,.84),rgba(7,25,28,.48));
}
.btn.btn-school:hover{border-left-color:var(--aqua);border-color:rgba(111,214,207,.44);background:linear-gradient(90deg,rgba(13,53,57,.9),rgba(8,29,33,.55))}
.btn.btn-school .btn-index{color:var(--aqua)}
.btn.btn-school .btn-tag{color:var(--amber);border-color:rgba(255,179,71,.34);background:rgba(255,179,71,.07)}
.btn.btn-school .btn-tag.complete{color:var(--aqua);border-color:rgba(111,214,207,.4);background:rgba(111,214,207,.08)}
.menu-buttons > .btn:nth-child(1){animation:menuItemIn .55s cubic-bezier(.2,.8,.2,1) both .2s}
.menu-buttons > .btn:nth-child(2){animation:menuItemIn .55s cubic-bezier(.2,.8,.2,1) both .26s}
.menu-buttons > .btn:nth-child(3){animation:menuItemIn .55s cubic-bezier(.2,.8,.2,1) both .32s}
.menu-buttons > .btn:nth-child(4){animation:menuItemIn .55s cubic-bezier(.2,.8,.2,1) both .38s}
.menu-subnav{animation:menuItemIn .55s cubic-bezier(.2,.8,.2,1) both .44s}
@keyframes menuItemIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.menu-subnav{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.btn.compact-sub{
  padding:9px 13px;font-size:10px;letter-spacing:.14em;justify-content:space-between;
  background:rgba(4,16,19,.3);border-left-color:rgba(241,233,214,.12);gap:8px;
}
.btn.compact-sub .btn-arrow{font-size:15px}
.menu-best{border-top-color:rgba(241,233,214,.1);position:relative}
.menu-best::before{content:'';position:absolute;left:0;top:-1px;width:58px;height:1px;background:linear-gradient(90deg,var(--amber),transparent)}
.menu-bottom{gap:24px}
.menu-credit{
  display:flex;align-items:center;gap:8px;font-family:var(--font-num);font-size:9.5px;
  letter-spacing:.12em;color:rgba(215,205,182,.74);white-space:nowrap;
}
.menu-credit b{color:var(--amber);font-weight:700;letter-spacing:.2em}
.credit-rule{width:28px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,179,71,.5))}
.credit-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,179,71,.5)}
.credit-inline{display:block;margin-top:5px;font-size:9px;letter-spacing:.1em;color:rgba(135,155,153,.58)}
.credit-inline b{color:var(--amber);letter-spacing:.16em}

/* ---- onboarding -------------------------------------------------------- */
.onboarding-screen{background:radial-gradient(80% 90% at 68% 40%,rgba(11,44,50,.9),rgba(2,8,10,.97) 65%)}
.onboarding-card{
  display:grid;grid-template-columns:280px minmax(0,1fr);width:min(870px,94vw);
  border:1px solid var(--line);background:linear-gradient(145deg,rgba(8,31,35,.96),rgba(3,12,15,.98));
  box-shadow:0 36px 110px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);
  position:relative;animation:panelIn .55s cubic-bezier(.2,.8,.2,1) both;
}
.onboarding-card::before,.onboarding-card::after{content:'';position:absolute;width:28px;height:28px;border:2px solid var(--amber);pointer-events:none}
.onboarding-card::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.onboarding-card::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.onboarding-art{
  position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-right:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 50%,rgba(255,179,71,.11),transparent 62%),
    repeating-linear-gradient(45deg,rgba(111,214,207,.035) 0 1px,transparent 1px 18px),
    #061b1f;
}
.onboarding-art img{width:132px;height:132px;position:relative;z-index:2;filter:drop-shadow(0 0 32px rgba(255,179,71,.2));animation:crestFloat 6s ease-in-out infinite}
.onboarding-ring{position:absolute;left:50%;top:50%;width:210px;height:210px;margin:-105px 0 0 -105px;border:1px solid rgba(111,214,207,.16);border-radius:50%}
.onboarding-ring.r2{width:268px;height:268px;margin:-134px 0 0 -134px;border-style:dashed;border-color:rgba(255,179,71,.12);animation:slowSpin 38s linear infinite}
@keyframes slowSpin{to{transform:rotate(360deg)}}
.onboarding-cross{position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(111,214,207,.12),transparent)}
.onboarding-copy{padding:34px 36px 28px}
.onboarding-copy h2{font-size:clamp(36px,4.4vw,56px);line-height:.92;margin:0 0 15px;letter-spacing:.02em}
.onboarding-copy h2 em{color:var(--amber)}
.onboarding-copy > p{font-family:var(--font-num);font-size:15px;line-height:1.55;color:var(--cream-dim);margin:0 0 18px;max-width:480px}
.onboarding-points{display:flex;flex-direction:column;gap:7px;margin-bottom:22px}
.onboarding-points span{display:flex;align-items:center;gap:9px;font-family:var(--font-num);font-size:11px;letter-spacing:.05em;color:rgba(201,193,172,.8)}
.onboarding-points i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-style:normal;font-size:8px;font-weight:700;color:var(--amber);border:1px solid rgba(255,179,71,.3);background:rgba(255,179,71,.06)}
.onboarding-actions{display:flex;flex-direction:column;gap:7px;max-width:390px}
.onboarding-actions .btn.primary{justify-content:center;border-left-width:1px}
.onboarding-actions .btn.ghost{justify-content:center;text-align:center}
.onboarding-foot{margin-top:12px;font-family:var(--font-num);font-size:9px;letter-spacing:.08em;color:rgba(135,155,153,.5)}

/* ---- guided coach (training / first sortie) --------------------------- */
.coach{
  position:absolute;left:50%;bottom:118px;transform:translate(-50%,14px);
  width:min(580px,90vw);z-index:8;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility .3s;
  background:linear-gradient(155deg,rgba(5,22,26,.93),rgba(3,13,16,.9));
  border:1px solid rgba(255,179,71,.3);border-top:2px solid var(--amber);
  box-shadow:0 22px 70px rgba(0,0,0,.62),0 0 40px rgba(255,179,71,.08);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.coach.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.coach::before,.coach::after{content:'';position:absolute;width:15px;height:15px;border:1px solid rgba(255,179,71,.55);pointer-events:none}
.coach::before{left:-1px;bottom:-1px;border-right:0;border-top:0}
.coach::after{right:-1px;top:-2px;border-left:0;border-bottom:0}
.coach-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px 8px;border-bottom:1px solid var(--line)}
.coach-kicker{font-size:8px;letter-spacing:.26em;color:var(--amber)}
.coach-skip{pointer-events:auto;font-family:var(--font-num);font-size:8px;font-weight:700;letter-spacing:.13em;color:rgba(135,155,153,.75);padding:3px 6px;border:1px solid transparent;transition:.15s}
.coach-skip:hover{color:var(--red);border-color:rgba(255,75,59,.35);background:rgba(255,75,59,.06)}
.coach-body{display:flex;align-items:center;gap:13px;padding:12px 14px}
.coach-emblem{
  width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;position:relative;
  border:1px solid rgba(255,179,71,.28);background:rgba(255,179,71,.055);
}
.coach-emblem::before{content:'';width:15px;height:15px;border:1.5px solid var(--amber);border-radius:50%;box-shadow:0 0 12px rgba(255,179,71,.25)}
.coach-emblem::after{content:'';position:absolute;inset:10px;border:1px dashed rgba(111,214,207,.4);border-radius:50%;animation:slowSpin 9s linear infinite}
.coach-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.coach-copy b{font-size:14px;letter-spacing:.14em;color:var(--cream)}
.coach-copy span{font-family:var(--font-num);font-size:12px;line-height:1.4;letter-spacing:.02em;color:var(--cream-dim)}
.coach-copy kbd{height:18px;min-width:18px;font-size:9px;margin:0 1px}
.coach-keys{display:flex;align-items:center;gap:5px;flex:none}
.coach-keys kbd{height:30px;min-width:30px;font-size:13px;background:rgba(255,179,71,.07);border-color:rgba(255,179,71,.35);box-shadow:inset 0 -1px 0 rgba(0,0,0,.5),0 0 12px rgba(255,179,71,.08)}
.coach-keys kbd.pulse{animation:keyPulse 1.2s ease infinite}
@keyframes keyPulse{50%{border-color:var(--amber);background:rgba(255,179,71,.2);box-shadow:0 0 18px rgba(255,179,71,.25)}}
.coach-progress{display:flex;gap:3px;padding:0 14px 10px}
.coach-progress i{height:2px;flex:1;background:rgba(241,233,214,.12);transition:.3s}
.coach-progress i.done{background:var(--aqua);box-shadow:0 0 5px rgba(111,214,207,.35)}
.coach-progress i.active{background:var(--amber);box-shadow:0 0 7px rgba(255,179,71,.5)}
.coach.done{animation:coachDone .5s ease both}
@keyframes coachDone{to{opacity:0;transform:translate(-50%,-8px)}}

/* training HUD badge */
.training-badge{
  position:absolute;left:22px;top:112px;z-index:3;
  display:flex;align-items:center;gap:7px;padding:4px 10px;
  border:1px solid rgba(111,214,207,.3);background:rgba(4,21,24,.7);
  font-family:var(--font-num);font-size:8px;font-weight:700;letter-spacing:.2em;color:var(--aqua);
  backdrop-filter:blur(6px);
}
.training-badge i{width:5px;height:5px;border-radius:50%;background:var(--aqua);box-shadow:0 0 8px rgba(111,214,207,.8);animation:trainingPulse 1.4s ease infinite}
@keyframes trainingPulse{50%{opacity:.35}}
.training-badge.hidden{display:none!important}

/* training complete */
.training-debrief{width:min(680px,95vw)}
.training-seal{
  display:flex;flex-direction:column;align-items:center;gap:3px;margin:2px auto 16px;
  width:220px;padding:12px 14px 10px;border:1px solid rgba(255,179,71,.24);
  background:linear-gradient(180deg,rgba(255,179,71,.07),rgba(255,179,71,.015));
}
.training-seal img{width:50px;height:50px;filter:drop-shadow(0 0 12px rgba(255,179,71,.18))}
.training-seal b{font-size:10px;letter-spacing:.26em;color:var(--amber)}
.training-seal span{font-family:var(--font-num);font-size:7px;letter-spacing:.16em;color:var(--muted)}
.debrief h2 em{color:var(--amber)}

/* ---- level select tactical chart --------------------------------------- */
.level-hero{
  display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:22px;align-items:stretch;
  padding:18px 24px 14px;
}
.level-hero-copy{display:flex;flex-direction:column;min-width:0;justify-content:center}
.level-ops{display:flex;gap:18px;flex-wrap:wrap;margin-top:11px}
.level-ops span{display:flex;flex-direction:column;gap:2px;padding-left:9px;border-left:1px solid rgba(255,179,71,.22)}
.level-ops em{font-style:normal;font-size:7px;letter-spacing:.2em;color:var(--muted)}
.level-ops b{font-family:var(--font-num);font-size:11px;letter-spacing:.06em;color:var(--amber)}
.level-chart-wrap{
  position:relative;min-height:136px;border:1px solid rgba(111,214,207,.14);overflow:hidden;
  background:radial-gradient(circle at 50% 45%,rgba(10,44,48,.68),rgba(2,11,13,.94) 75%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.35);
}
#level-chart{position:absolute;inset:0;width:100%;height:100%}
.chart-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(111,214,207,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(111,214,207,.055) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 35%,transparent 82%);mask-image:radial-gradient(circle at 50% 50%,#000 35%,transparent 82%)}
.chart-corner{position:absolute;width:13px;height:13px;border:1px solid rgba(255,179,71,.5);pointer-events:none}
.chart-corner.tl{left:-1px;top:-1px;border-right:0;border-bottom:0}
.chart-corner.br{right:-1px;bottom:-1px;border-left:0;border-top:0}
.chart-label,.chart-coords{position:absolute;font-family:var(--font-num);font-size:7.5px;letter-spacing:.13em;color:rgba(174,190,184,.72);pointer-events:none}
.chart-label{left:8px;top:7px;color:rgba(111,214,207,.58)}
.chart-coords{right:8px;bottom:6px}
.chart-scan{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.chart-scan::after{content:'';position:absolute;left:0;right:0;height:34%;top:-40%;background:linear-gradient(180deg,transparent,rgba(111,214,207,.07),transparent);animation:shopScan 7s linear infinite}
.level-card{transition:background .18s ease,border-color .18s ease,transform .18s ease,padding .18s ease}
.level-card:hover{transform:translateX(2px);border-left-color:rgba(255,179,71,.4);padding-left:14px}
.level-card.selected:hover{transform:none;padding-left:10px}
.level-card.cleared .lc-state{color:var(--aqua);text-shadow:0 0 8px rgba(111,214,207,.4)}
.level-card:focus-visible{outline:1px solid var(--amber);outline-offset:-1px}
.enemy-chip{transition:.16s ease;position:relative}
.enemy-chip:hover{border-color:rgba(255,179,71,.42);background:rgba(255,179,71,.05);transform:translateY(-1px)}

/* ---- HUD refinement ---------------------------------------------------- */
.mission-line{font-size:9.5px;letter-spacing:.24em}
#score-value{font-size:clamp(28px,3.5vw,38px)}
.hud-panel{box-shadow:0 14px 38px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.035)}
.aircraft-panel{background:linear-gradient(155deg,rgba(5,23,27,.84),rgba(4,14,17,.62))}
.aircraft-panel::after{box-shadow:0 0 20px rgba(255,179,71,.12)}
.bar-label{font-size:8px;letter-spacing:.18em}
.bar-value{font-size:12px}
.weapon,.throttle-block{box-shadow:0 10px 28px rgba(0,0,0,.2)}
.wp-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--cream-dim);opacity:.9}
.weapon.flash{animation:weaponFlash .26s ease}
.hud-bottom{padding-bottom:20px}
.kill-feed{right:216px;top:200px}
.tutorial{
  background:linear-gradient(155deg,rgba(4,20,23,.88),rgba(3,13,16,.78));
  border:1px solid rgba(241,233,214,.17);border-top:2px solid var(--amber);
  box-shadow:0 14px 40px rgba(0,0,0,.32);
}
.tut-title{color:var(--amber);font-size:8.5px;letter-spacing:.34em}
.tut-grid div{font-size:10.5px}
.tut-grid kbd{background:rgba(255,179,71,.06);border-color:rgba(255,179,71,.25)}

/* ---- buttons & cards global feedback ---------------------------------- */
.shop-tab,.level-tab,.icon-btn,.weapon,.enemy-chip,.spec,.stat{will-change:transform}
.shop-card{transition:background .18s ease,border-color .18s ease,transform .18s ease,padding .18s ease}
.shop-card:hover{transform:translateX(2px);border-left-color:rgba(255,179,71,.35);padding-left:12px}
.shop-card.selected:hover{transform:none;padding-left:9px}
.shop-card:focus-visible{outline:1px solid var(--amber);outline-offset:-1px}
.shop-tab:hover,.level-tab:hover{transform:translateY(-1px)}
.shop-preview-wrap::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 46%,transparent 48%,rgba(2,9,11,.34) 100%);
}
.sc-thumb{transition:border-color .18s ease,transform .18s ease}
.shop-card:hover .sc-thumb{border-color:rgba(255,179,71,.3)}
.debrief,.pause-wrap{box-shadow:0 34px 100px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.04)}
.debrief h2 em{color:var(--amber)}
.debrief-stamp{box-shadow:0 0 24px rgba(255,75,59,.1)}
.debrief-buttons .btn:hover{transform:translateX(2px)}
.btn.ghost:hover{background:rgba(241,233,214,.035)}
.setting:hover > span{color:var(--cream)}
.seg button{min-height:30px}
input[type=range]::-webkit-slider-thumb{transition:box-shadow .15s ease,transform .15s ease}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 2px rgba(255,179,71,.25);transform:scale(1.08)}
.switch{transition:.2s ease}
.setting.check:hover .switch{border-color:rgba(255,179,71,.45)}

/* clearer launch / action hierarchy */
#btn-level-launch,#btn-shop-fly,#btn-lc-next,#btn-tc-campaign{position:relative}
#btn-level-launch::after,#btn-shop-fly::after,#btn-lc-next::after,#btn-tc-campaign::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 49%,transparent 59%);
}
#btn-level-launch:hover::after,#btn-shop-fly:hover::after,#btn-lc-next:hover::after,#btn-tc-campaign:hover::after{
  opacity:1;animation:btnSweep .6s ease;
}

/* responsive additions */
@media (max-width:1100px){
  .menu-insignia{display:none}
  .level-hero{grid-template-columns:minmax(0,1fr) 270px}
  .menu-credit{display:none}
}
@media (max-width:900px){
  .level-hero{grid-template-columns:1fr 240px}
  .level-ops{gap:12px}
  .onboarding-card{grid-template-columns:210px minmax(0,1fr)}
  .onboarding-art img{width:104px;height:104px}
}
@media (max-width:820px){
  .level-hero{grid-template-columns:1fr}
  .level-chart-wrap{min-height:110px;order:-1}
  .onboarding-card{grid-template-columns:1fr;width:min(560px,94vw)}
  .onboarding-art{min-height:140px;border-right:0;border-bottom:1px solid var(--line)}
  .onboarding-art img{width:88px;height:88px}
  .onboarding-copy{padding:24px 22px 22px}
  .onboarding-copy h2{font-size:38px}
  .menu-credit{display:none}
  .coach{bottom:92px}
  .coach-keys{display:none}
  .coach-body{padding:10px 12px}
  .coach-copy b{font-size:12px}
  .coach-copy span{font-size:11px}
}
@media (max-height:820px){
  .menu-insignia{display:none}
  .onboarding-card{grid-template-columns:200px minmax(0,1fr);max-height:92vh}
  .onboarding-art img{width:94px;height:94px}
  .onboarding-copy{padding:24px 28px 22px}
  .onboarding-copy h2{font-size:40px;margin-bottom:10px}
  .onboarding-copy > p{font-size:13px;margin-bottom:13px}
  .onboarding-points{gap:5px;margin-bottom:15px}
  .onboarding-points span{font-size:10px}
  .coach{bottom:96px}
}
@media (max-height:700px){
  .onboarding-art{display:none}
  .onboarding-card{grid-template-columns:1fr}
  .onboarding-actions .btn{padding:10px 14px}
  .training-badge{display:none}
  .training-seal{display:none}
  .coach{bottom:78px;width:min(500px,92vw)}
  .coach-head{padding:6px 12px 5px}
  .coach-body{padding:8px 12px}
  .coach-progress{padding:0 12px 8px}
}
@media (max-width:760px){
  .brand-crest{width:30px;height:30px}
  .brand-copy b{font-size:10px;letter-spacing:.22em}
  .brand-copy em{font-size:6px}
  .menu-subnav{grid-template-columns:1fr 1fr}
  .menu-credit{display:none}
  .level-hero{padding:14px 16px 10px}
  .level-chart-wrap{min-height:100px}
  .level-ops{gap:10px;margin-top:8px}
  .onboarding-copy h2{font-size:34px}
  .onboarding-copy > p{font-size:12.5px}
}
/* SVG weapon glyphs replace the earlier CSS-drawn marks */
.guns-icon::before,.guns-icon::after,.rocket-icon::before,.roll-icon::before,.roll-icon::after{display:none!important}
.wp-icon{display:flex;align-items:center;justify-content:center}

/* ---- mission intel & compact manual ------------------------------------ */
.level-intel{margin-top:14px;padding-top:11px;border-top:1px solid var(--line);max-width:560px}
.level-intel h4{margin-bottom:5px!important}
.level-intel p{margin:0 0 9px;font-family:var(--font-num);font-size:11px;line-height:1.4;color:rgba(201,193,172,.7)}
.intel-bars{display:flex;flex-direction:column;gap:5px}
.intel-bars > div{display:flex;align-items:center;gap:9px}
.intel-bars span{font-family:var(--font-num);font-weight:600;font-size:8px;letter-spacing:.15em;color:var(--muted);width:104px;flex:none}
.intel-bars i{height:3px;flex:1;max-width:230px;background:rgba(0,0,0,.45);border:1px solid rgba(241,233,214,.1);overflow:hidden}
.intel-bars b{display:block;height:100%;width:0;background:linear-gradient(90deg,#2e7f79,var(--aqua));transition:width .4s ease}
.intel-bars > div:nth-child(2) b{background:linear-gradient(90deg,#c8862b,var(--amber))}
.intel-bars > div:nth-child(3) b{background:linear-gradient(90deg,#a9372b,#ff7a52)}
.manual-card{padding:20px 22px;min-height:0}
.manual-card h3{font-size:16px;margin-bottom:10px}
.manual-card p{font-size:13.5px;line-height:1.42;margin-bottom:8px}
.manual-footer{margin-top:20px}
.panel-head{margin-bottom:22px;padding-bottom:17px}
@media (max-height:820px){
  .manual-card{padding:15px 18px}
  .manual-card h3{font-size:14px;margin-bottom:7px}
  .manual-card p{font-size:12.5px;line-height:1.36;margin-bottom:6px}
  .manual-num{margin-bottom:4px}
  .manual-footer{margin-top:14px}
}
@media (max-width:760px){
  .level-intel{max-width:none}
  .intel-bars span{width:90px}
}

/* ---- short landscape screens (phones + small windows) ------------------ */
@media (max-height:560px){
  .menu-bottom{display:flex;padding:5px 20px 6px;justify-content:center;border-top:1px solid rgba(241,233,214,.06);background:none}
  .menu-controls,.menu-meta{display:none}
  .menu-credit{display:flex;font-size:7.5px;letter-spacing:.1em;color:rgba(201,193,172,.6)}
  .menu-best{display:none}
  .menu-buttons{gap:4px;margin-top:9px}
  .menu-subnav{gap:5px}
  .btn.compact-sub{padding:7px 10px;font-size:9px}
  .menu-subnav .btn{padding:7px 10px}
  .menu-copy{max-width:520px}
  .game-title{flex-direction:row;align-items:flex-end}
  .title-top,.title-bottom{font-size:clamp(44px,16vh,76px)}
  .title-bottom{margin-left:.04em}
  .title-sub{font-size:8px;margin-top:5px}
  .level-chart-wrap{display:none}
  .levels-wrap{width:98vw;padding:9px 14px 7px;max-height:100vh;overflow:hidden}
  .levels-head{margin-bottom:7px;padding-bottom:10px;align-items:center}
  .levels-title h2{font-size:30px}
  .levels-head .eyebrow{display:none}
  .levels-head-right{gap:10px;flex-wrap:nowrap}
  .levels-progress{min-width:90px}
  .levels-progress b{font-size:16px}
  .levels-progress-bar{width:96px}
  .shop-head-right{gap:10px}
  .shop-title h2{font-size:30px}
  .levels-body{grid-template-columns:minmax(220px,260px) minmax(0,1fr);height:calc(100vh - 96px);min-height:0;overflow:hidden}
  .levels-side{max-height:none}
  .levels-list{max-height:none}
  .levels-tabs{padding:3px}
  .level-tab{padding:4px 5px;font-size:6.5px}
  .levels-list-head{padding:6px 10px;font-size:7px}
  .level-card{padding:6px 9px;grid-template-columns:26px minmax(0,1fr) auto;gap:7px}
  .lc-num{font-size:11px}
  .lc-name{font-size:9.5px}
  .lc-meta{font-size:7px}
  .level-hero{grid-template-columns:1fr;padding:8px 12px 7px;gap:0}
  .level-hero h3{font-size:23px;margin:1px 0 3px}
  .level-hero p{font-size:11px;line-height:1.35}
  .detail-kicker{font-size:7px;margin-bottom:2px}
  .level-ops{margin-top:6px;gap:12px}
  .level-ops em{font-size:6.5px;letter-spacing:.14em}
  .level-ops b{font-size:9px}
  .level-columns{padding:7px 12px;gap:10px;grid-template-columns:minmax(0,1.35fr) minmax(150px,.8fr);overflow:auto}
  .level-columns h4{font-size:7px;margin-bottom:4px;letter-spacing:.16em}
  .level-intel{margin-top:7px;padding-top:5px}
  .level-intel p{display:none}
  .intel-bars{gap:3px}
  .intel-bars span{width:76px;font-size:6.5px;letter-spacing:.08em}
  .intel-bars i{max-width:150px}
  .enemy-chip{padding:2px 4px;gap:3px}
  .enemy-chip b{font-size:8px}
  .enemy-chip em{font-size:8px}
  .level-info-panel p{font-size:10px;margin-bottom:4px}
  #level-reward{font-size:12px}
  #level-best{font-size:11px}
  .level-foot{padding:7px 12px}
  .level-foot .btn{padding:8px 12px;font-size:10px;min-width:0!important}
  .levels-footer{margin-top:5px;padding-top:0}
  .levels-note{font-size:8.5px}
  .levels-footer .btn{padding:7px 12px;font-size:9px}
  .onboarding-screen{padding:12px}
  .onboarding-copy{padding:18px 22px 16px}
  .onboarding-copy h2{font-size:29px;margin-bottom:7px}
  .onboarding-copy > p{font-size:11.5px;margin-bottom:10px}
  .onboarding-points{margin-bottom:10px}
  .onboarding-points span{font-size:9px}
  .onboarding-actions .btn{padding:9px 12px;font-size:11px}
  .onboarding-foot{display:none}
  .onboarding-art{display:none}
  .onboarding-card{grid-template-columns:1fr}
  .coach{bottom:77px}
}

/* ---- hit confirmation -------------------------------------------------- */
.hit-marker{
  position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  pointer-events:none;opacity:0;z-index:6;filter:drop-shadow(0 0 6px rgba(255,200,120,.6));
}
.hit-marker i{position:absolute;width:9px;height:1.5px;background:#ffd58a;border-radius:1px}
.hit-marker i:nth-child(1){left:3px;top:6px;transform:rotate(45deg)}
.hit-marker i:nth-child(2){right:3px;top:6px;transform:rotate(-45deg)}
.hit-marker i:nth-child(3){left:3px;bottom:6px;transform:rotate(-45deg)}
.hit-marker i:nth-child(4){right:3px;bottom:6px;transform:rotate(45deg)}
.hit-marker.hit{animation:hitMarker .22s ease-out}
@keyframes hitMarker{
  0%{opacity:1;transform:scale(.65)}
  55%{opacity:1;transform:scale(1.12)}
  100%{opacity:0;transform:scale(1)}
}

/* ---- boot / loader identity ------------------------------------------- */
.loader-inner{width:320px;position:relative}
.loader-mark{display:flex;align-items:center;justify-content:center;overflow:hidden;background:rgba(255,179,71,.03)}
.loader-mark img{width:38px;height:38px;filter:drop-shadow(0 0 10px rgba(255,179,71,.22));animation:loaderCrest 3.4s ease-in-out infinite}
@keyframes loaderCrest{0%,100%{opacity:.74;transform:scale(.96)}50%{opacity:1;transform:scale(1.03)}}
.loader-title{font-size:38px;letter-spacing:.34em;margin-bottom:3px}
.loader-sub{font-family:var(--font-num);font-size:8px;letter-spacing:.42em;color:rgba(255,179,71,.7);margin-bottom:18px}
.loader-credit{font-family:var(--font-num);font-size:8px;letter-spacing:.2em;color:rgba(135,155,153,.5);margin-top:22px}
.loader-credit b{color:var(--amber);letter-spacing:.26em}
.loader-mark::before,.loader-mark::after{display:none}

/* ---- compact manual for 720p-class displays ---------------------------- */
@media (max-height:760px) and (min-width:761px){
  .manual-grid .manual-card{padding:11px 15px}
  .manual-card h3{font-size:13.5px;margin-bottom:6px}
  .manual-card p{font-size:11.8px;line-height:1.3;margin-bottom:4px}
  .manual-num{font-size:9px;margin-bottom:2px}
  .manual-footer{margin-top:8px;gap:14px}
  .controls-table{gap:6px 16px}
  .controls-table div{font-size:10px}
  .controls-table kbd{height:17px;min-width:17px;font-size:9px}
  .panel-head{margin-bottom:11px;padding-bottom:9px}
  .panel-head h2{font-size:34px}
  .panel-wrap{padding:18px 24px}
  .eyebrow.small{font-size:8px;margin-bottom:6px}
}
.loader-mark{animation:none}
.intel-tip{margin:9px 0 0!important;padding-top:7px;border-top:1px solid rgba(241,233,214,.08);font-style:italic;color:rgba(135,155,153,.66)!important;font-size:10.5px!important}

/* compact command screens on short landscape displays */
@media (max-height:560px){
  .settings-wrap{padding:10px 16px 8px;max-height:100vh}
  .settings-wrap .panel-head{margin-bottom:8px;padding-bottom:7px}
  .settings-wrap .panel-head h2{font-size:28px}
  .settings-wrap .eyebrow{display:none}
  .settings-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .settings-group{border-right:1px solid var(--line)!important;padding-right:14px!important;border-bottom:0!important;padding-bottom:0!important}
  .settings-group:nth-child(2){border-right:1px solid var(--line)!important}
  .settings-group:nth-child(3){grid-column:auto;border-top:0!important;padding-top:0!important}
  .settings-group h3{font-size:9px;margin-bottom:9px}
  .setting{margin-bottom:9px}
  .setting > span{font-size:11px;margin-bottom:5px}
  .setting > span em{font-size:10px}
  .seg button{min-height:24px;font-size:8px}
  .setting.check .switch{width:32px;height:18px}
  .setting.check .switch::after{width:10px;height:10px}
  .setting.check input:checked + .switch::after{left:18px}
  .settings-footer{margin-top:7px;padding-top:7px}
  .settings-note{font-size:9px}
  .credit-inline{display:none}
  .settings-actions .btn{padding:7px 12px;font-size:9px}
}

/* ---- level select: keep the launch action reachable at every size ----- */
.levels-detail{
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(255,179,71,.35) transparent;
}
.levels-detail::-webkit-scrollbar{width:6px}
.levels-detail::-webkit-scrollbar-thumb{background:rgba(255,179,71,.32)}
.level-columns{flex:0 0 auto;overflow:visible}
.level-enemy-list{overflow:visible;max-height:none}
.level-foot{
  position:sticky;bottom:0;z-index:5;margin-top:auto;
  background:linear-gradient(0deg,rgba(3,13,16,.99),rgba(4,16,19,.94));
  box-shadow:0 -10px 26px rgba(0,0,0,.22);
}
@media (max-width:820px){
  .levels-body{
    height:calc(100vh - 142px);height:calc(100dvh - 142px);min-height:0;overflow:hidden;
  }
  .levels-side{height:100%;max-height:none;min-height:0}
  .levels-list{max-height:none}
  .levels-detail{min-height:0;height:100%}
}
@media (max-width:820px) and (max-height:560px){
  .levels-body{height:calc(100vh - 96px);height:calc(100dvh - 96px)}
}

/* ---- debriefs: scroll the report, never the actions -------------------- */
.debrief{
  display:flex;flex-direction:column;overflow:hidden;padding:0;
}
.debrief-scroll{
  flex:1;min-height:0;overflow-y:auto;padding:34px 44px 6px;
  scrollbar-width:thin;scrollbar-color:rgba(255,179,71,.32) transparent;
}
.debrief-scroll::-webkit-scrollbar{width:6px}
.debrief-scroll::-webkit-scrollbar-thumb{background:rgba(255,179,71,.3)}
.debrief-buttons{flex:none;margin:10px 44px 28px}
#screen-levelclear .debrief::before,#screen-levelclear .debrief::after,
#screen-trainingclear .debrief::before,#screen-trainingclear .debrief::after{border-color:var(--aqua)}
#screen-levelclear .debrief-stamp,#screen-trainingclear .debrief-stamp{box-shadow:0 0 30px rgba(111,214,207,.08)}
@media (max-width:760px){
  .debrief-scroll{padding:24px 20px 4px}
  .debrief-buttons{margin:8px 20px 20px}
}
@media (max-height:600px){
  .debrief-scroll{padding:16px 22px 3px}
  .debrief-stamp{margin-bottom:10px;padding:3px 10px;font-size:12px}
  .debrief .eyebrow{margin-bottom:6px}
  .debrief h2{font-size:clamp(32px,5.5vw,48px)}
  .debrief-sub{margin:7px auto 11px;font-size:12px}
  .debrief-score{padding:8px 0}
  .debrief-score b{font-size:34px}
  .debrief-score em{margin-top:4px}
  .debrief-stats{padding:8px 0 5px}
  .debrief-stats b{font-size:17px}
  .debrief-credits{padding-bottom:8px}
  .debrief-buttons{margin:6px 22px 14px}
  .debrief-buttons .btn{padding:9px 10px;font-size:10.5px}
  .training-seal{padding:7px 10px;margin-bottom:8px}
  .training-seal img{width:36px;height:36px}
}
@media (max-width:760px) and (max-height:560px){
  .debrief-buttons{flex-direction:row;flex-wrap:wrap;gap:5px}
  .debrief-buttons .btn{flex:1 1 45%;min-width:0}
}

/* ---- shop detail refinements ------------------------------------------ */
.shop-detail .stat:last-child:nth-child(odd){grid-column:1/-1}
.shop-detail .stat:last-child:nth-child(odd) .stat-bar{max-width:calc(100% - 96px)}
.btn.is-disabled,.btn:disabled{
  opacity:1;background:rgba(241,233,214,.045);border-color:rgba(241,233,214,.13);
  color:rgba(241,233,214,.46);filter:none;
}
.btn.primary.is-disabled,.btn.primary:disabled{
  background:rgba(255,179,71,.09);border-color:rgba(255,179,71,.22);color:rgba(255,214,150,.62);
}
#btn-shop-action.is-disabled[data-mode="service"]{
  background:rgba(111,214,207,.07);border-color:rgba(111,214,207,.24);color:rgba(170,235,225,.8);
}

/* ---- visible focus for form controls ---------------------------------- */
input[type=range]:focus-visible{outline:1px solid var(--amber);outline-offset:5px}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(255,179,71,.28)}
.setting.check input:focus-visible + .switch{outline:1px solid var(--amber);outline-offset:2px}

/* ---- intel tracks ------------------------------------------------------ */
.intel-bars i{background:rgba(241,233,214,.11);border-color:rgba(241,233,214,.2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.intel-bars b{min-width:2px}

/* Touch players get labelled on-screen controls instead of keyboard hints. */
body.touch-device .menu-controls{display:none}
body.touch-device .tutorial{display:none}

/* Reduced motion must still show the mission title and banner for their
   intended duration, just without movement. */
@media (prefers-reduced-motion:reduce){
  .banner.show{animation:bannerReduced 3.4s linear both!important}
  .mission-splash.show{animation:splashReduced 2.2s linear both!important}
}
@keyframes bannerReduced{0%,82%{opacity:1}100%{opacity:0}}
@keyframes splashReduced{0%,84%{opacity:1}100%{opacity:0}}

/* On short landscape the onboarding art is removed; don't leave its grid column behind. */
@media (max-width:900px){
  .onboarding-card{grid-template-columns:1fr;width:min(560px,94vw)}
  .onboarding-art{display:none}
}

/* Do not lock narrow desktop windows; touch devices still get the prompt.
   A player can explicitly continue in portrait if they prefer. */
@media (max-width:900px) and (orientation:portrait){
  #rotate-notice{display:none}
  body.touch-device #rotate-notice{display:flex}
  body.ignore-portrait #rotate-notice{display:none!important}
}
.rotate-continue{margin-top:18px;border:1px solid var(--line);padding:10px 14px}

/* Notched-device safe areas and larger touch targets */
body.touch-device .hud-top{padding-top:max(20px,env(safe-area-inset-top));padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
body.touch-device .hud-bottom{padding-bottom:max(18px,calc(env(safe-area-inset-bottom) + 8px));padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
body.touch-device .hud-buttons .icon-btn{width:40px;height:40px}
body.touch-device .menu-header{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-top:max(16px,env(safe-area-inset-top))}
body.touch-device .menu-bottom{padding-bottom:max(12px,calc(env(safe-area-inset-bottom) + 6px))}
@media (max-height:560px){
  body.touch-device .hud-buttons .icon-btn{width:36px;height:36px}
}

/* On short touch screens the coach becomes a top instruction strip so the
   joystick and action buttons can never cover the lesson or SKIP. */
@media (pointer:coarse) and (max-height:700px){
  .coach{
    top:max(8px,env(safe-area-inset-top));bottom:auto;
    width:calc(100vw - 20px);left:50%;
    transform:translate(-50%,0);
    z-index:14;
  }
  .coach.on{transform:translate(-50%,0)}
  .coach-head{padding:6px 10px 5px}
  .coach-body{padding:7px 10px;gap:8px}
  .coach-emblem{display:none}
  .coach-copy b{font-size:11.5px}
  .coach-copy span{font-size:10.5px;line-height:1.3}
  .coach-keys{display:none}
  .coach-progress{padding:0 10px 7px}
  body.training-mode .hud-center,
  body.training-mode .aircraft-panel{opacity:.16}
}

@media (max-width:760px) and (max-height:560px){
  .aircraft-panel{width:168px;padding:6px 8px}
  .aircraft-name{font-size:9px;letter-spacing:.06em}
  .bar-label{width:22px;font-size:6px}
  .bar-value{font-size:9px;width:22px}
  .hud-center{top:64px}
  .mission-line{font-size:6.5px;letter-spacing:.13em;gap:4px}
  #objective-label{max-width:150px}
  #score-value{font-size:22px}
  .hud-toast{top:34%}
  .hud-toast.with-banner{top:45%}
  .lock-warning{top:106px}
}
@media (max-height:420px){
  .kill-feed{display:none}
}
@media (max-width:820px){
  .levels-body{grid-template-rows:minmax(0,40%) minmax(0,1fr)}
  .levels-side{height:100%;max-height:none}
}
@media (max-width:820px) and (max-height:560px){
  .levels-body{grid-template-rows:1fr}
}
.pause-wrap{max-height:94vh;overflow-y:auto;scrollbar-width:thin}
@media (max-height:560px){
  .pause-wrap{width:min(460px,94vw);padding:16px 20px 12px;max-height:96vh}
  .pause-tools{top:7px;right:7px}
  .pause-head{margin-bottom:10px}
  .pause-head h2{font-size:36px}
  .pause-sub{margin-top:4px;font-size:10px}
  .pause-buttons{gap:4px}
  .pause-buttons .btn{padding:9px 13px;font-size:11px}
  .pause-stats{margin-top:10px;padding:8px 0}
  .pause-stats b{font-size:15px}
  .pause-hint{margin-top:7px;font-size:9px}
}
@media (max-width:900px){
  .level-hero{grid-template-columns:1fr}
  .level-chart-wrap{display:none}
}

/* Extremely short landscape (568x320 class): keep all menu actions and the
   studio credit above the fold. */
@media (max-height:400px){
  .menu-header{padding:7px 12px}
  .menu-main{padding:0 18px;align-items:flex-start}
  .menu-copy{max-width:100%}
  .title-top,.title-bottom{font-size:clamp(34px,11vh,44px)}
  .title-sub{display:none}
  .menu-buttons{gap:3px;margin-top:5px;max-width:100%}
  .menu-buttons .btn{padding:7px 10px;font-size:10.5px;gap:8px}
  .menu-buttons .btn-index{font-size:8px;width:12px}
  .menu-buttons .btn-arrow{font-size:14px}
  .menu-subnav{gap:4px}
  .menu-subnav .btn{padding:5px 8px;font-size:8px}
  .menu-bottom{padding:3px 12px 4px}
  .menu-credit{font-size:7px;gap:5px}
  .credit-rule{width:16px}
}
.onboarding-screen{overflow-y:auto;padding-top:16px;padding-bottom:16px}
.onboarding-screen .onboarding-card{margin:auto}
@media (max-height:400px){
  .onboarding-copy{padding:14px 18px 12px}
  .onboarding-copy h2{font-size:26px;margin-bottom:6px}
  .onboarding-copy > p{font-size:10.5px;margin-bottom:7px;line-height:1.35}
  .onboarding-points{display:none}
  .onboarding-actions .btn{padding:7px 10px;font-size:10px}
  .onboarding-foot{display:none}
}
@media (max-height:400px){
  .pause-stats,.pause-hint{display:none}
}
.mission-splash.show{pointer-events:auto}

/* Readability pass for tiny status labels */
.lc-state{font-size:8px;color:rgba(185,198,190,.82)}
.sc-badge{font-size:8px;color:rgba(185,198,190,.82)}
.shop-tab{font-size:8px}
.level-tab{font-size:8px}
.wp-name{font-size:8px;color:rgba(152,170,166,.92)}
.radar-range{color:rgba(241,233,214,.6)}
.manual-footer{
  position:sticky;bottom:-1px;z-index:3;
  background:linear-gradient(0deg,rgba(4,16,19,.99),rgba(4,16,19,.94));
  padding-top:12px;border-top:1px solid var(--line);
}
@media (max-height:560px){
  .manual-footer .controls-table{display:none}
  .manual-footer{padding-top:8px;margin-top:8px}
}

/* Scroll affordance for long aircraft/sortie lists */
.shop-side,.levels-side{position:relative}
.shop-side::after,.levels-side::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:24px;pointer-events:none;z-index:2;
  background:linear-gradient(0deg,rgba(4,15,18,.96),rgba(4,15,18,0));
}
.rotate-continue{width:auto!important;display:inline-flex!important;justify-content:center!important}