:root{
  color-scheme:dark;
  --bg:#030812;
  --panel:rgba(7,17,31,.90);
  --panel-2:rgba(10,26,45,.92);
  --line:rgba(75,207,255,.28);
  --cyan:#49dcff;
  --blue:#268dff;
  --purple:#a46cff;
  --orange:#ffad4d;
  --red:#ff5166;
  --green:#55e98d;
  --text:#f3fbff;
  --muted:#91a8bc;
}
*{box-sizing:border-box}
html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}
button,select{font:inherit}
button{cursor:pointer}
canvas{display:block;width:100%;height:100%;background:radial-gradient(circle at 50% 40%,#10284b 0,#050b16 45%,#02050a 100%)}
.hidden{display:none!important}
.screen,.overlay,.hud,.mobile-controls{position:absolute;inset:0}
.screen{z-index:20;display:none;overflow:auto}
.screen.active{display:block}
.menu-backdrop{position:fixed;inset:0;background:linear-gradient(90deg,rgba(2,8,16,.97) 0%,rgba(3,10,21,.86) 45%,rgba(3,10,21,.60) 100%),url('assets/cover.jpg') center/cover no-repeat;filter:saturate(.9)}
.menu-shell{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:clamp(24px,4vw,64px);min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:28px}
.brand{max-width:850px;text-shadow:0 3px 18px #000}
.brand h1{font-size:clamp(44px,7vw,96px);margin:4px 0 10px;letter-spacing:.08em;line-height:.92;background:linear-gradient(180deg,#fff,#8feaff 55%,#518fff);-webkit-background-clip:text;color:transparent}
.brand p{font-size:clamp(16px,2vw,21px);color:#d3e7f4;max-width:760px;line-height:1.55}
.eyebrow{display:block;color:var(--cyan);letter-spacing:.18em;font-size:12px;font-weight:800;text-transform:uppercase}
.menu-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(310px,.75fr);gap:22px;align-items:stretch}
.panel,.modal{background:linear-gradient(180deg,rgba(12,28,48,.95),rgba(4,13,25,.96));border:1px solid var(--line);box-shadow:0 24px 80px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.05);backdrop-filter:blur(16px)}
.panel{border-radius:20px;padding:22px}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
h2{margin:4px 0 0;font-size:28px}
.currency-pill{border:1px solid rgba(164,108,255,.5);background:rgba(99,56,177,.22);color:#d7c4ff;padding:8px 12px;border-radius:999px;font-weight:800}
.ship-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.ship-card{min-height:155px;border:1px solid rgba(75,207,255,.18);background:rgba(6,16,30,.78);border-radius:15px;padding:14px;color:var(--text);text-align:left;transition:.18s transform,.18s border-color,.18s background;position:relative;overflow:hidden}
.ship-card:hover{transform:translateY(-2px);border-color:rgba(75,207,255,.55)}
.ship-card.selected{border-color:var(--cyan);background:linear-gradient(180deg,rgba(31,104,144,.36),rgba(7,20,36,.9));box-shadow:inset 0 0 35px rgba(56,205,255,.10)}
.ship-card.locked{filter:grayscale(.8);opacity:.58}
.ship-card .ship-glyph{height:62px;display:flex;align-items:center;justify-content:center}
.ship-card strong{display:block;font-size:15px;text-transform:uppercase;letter-spacing:.06em}
.ship-card small{display:block;color:var(--muted);margin-top:5px}
.lock-tag{position:absolute;right:10px;top:10px;border:1px solid rgba(255,173,77,.45);color:var(--orange);font-size:10px;padding:4px 6px;border-radius:999px}
.launch-panel{display:flex;flex-direction:column;gap:16px}
.selected-ship-art{height:150px;display:flex;align-items:center;justify-content:center;border-radius:15px;background:radial-gradient(circle,rgba(48,168,225,.14),transparent 66%);border:1px solid rgba(75,207,255,.12)}
.stat-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.stat-item{padding:10px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);border-radius:10px}
.stat-item span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.stat-item strong{font-size:18px}
.field-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.select-input{width:100%;border:1px solid var(--line);border-radius:11px;background:#081727;color:var(--text);padding:12px 13px}
.primary-btn,.secondary-btn,.icon-btn{border-radius:11px;border:1px solid transparent;color:var(--text);padding:12px 16px;font-weight:800;letter-spacing:.035em;transition:.16s transform,.16s filter,.16s border-color}
.primary-btn{background:linear-gradient(135deg,#1888d8,#6b5af5);box-shadow:0 10px 28px rgba(37,128,231,.28)}
.primary-btn:hover,.secondary-btn:hover,.icon-btn:hover{filter:brightness(1.15);transform:translateY(-1px)}
.secondary-btn{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12)}
.secondary-btn.danger{color:#ff9ca8;border-color:rgba(255,81,102,.28)}
.menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.small-note{color:var(--muted);font-size:12px;line-height:1.5;text-align:center;margin:0}

.hud{z-index:10;pointer-events:none;padding:18px;display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.hud-top-left,.hud-top-right{display:flex;gap:8px;align-items:center}.hud-top-right{justify-content:flex-end}.hud .icon-btn{pointer-events:auto}
.hud-chip{min-width:90px;padding:8px 12px;background:rgba(5,15,29,.76);border:1px solid rgba(75,207,255,.20);border-radius:10px;backdrop-filter:blur(8px)}
.hud-chip span{display:block;color:var(--muted);font-size:10px;letter-spacing:.12em}.hud-chip strong{font-size:17px}
.wave-block{text-align:center;padding:7px 24px;background:linear-gradient(90deg,transparent,rgba(4,16,31,.82),transparent);min-width:260px}.wave-block span{display:block;color:var(--cyan);font-size:12px;font-weight:900;letter-spacing:.14em}.wave-block strong{display:block;font-size:30px;line-height:1.05}.wave-block small{color:var(--muted)}
.icon-btn{padding:10px 13px;background:rgba(5,15,29,.82);border-color:var(--line)}
.status-panel{position:absolute;left:18px;bottom:18px;width:min(420px,calc(100vw - 36px));padding:13px 15px;background:rgba(5,15,29,.82);border:1px solid rgba(75,207,255,.22);border-radius:14px;backdrop-filter:blur(10px)}
.ship-id{display:flex;align-items:center;gap:12px;margin-bottom:7px}.ship-id strong{display:block;font-size:13px;letter-spacing:.08em}.ship-id small{display:block;color:var(--muted);font-size:10px}.hud-ship-icon{width:52px;height:36px;display:flex;align-items:center;justify-content:center}
.bar-row{display:grid;grid-template-columns:48px 1fr 72px;gap:8px;align-items:center;font-size:10px;margin-top:5px}.bar-row>span{color:var(--muted);font-weight:800}.bar-row>b{text-align:right;font-variant-numeric:tabular-nums}.bar{height:7px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}.bar i{display:block;height:100%;width:50%;background:linear-gradient(90deg,#20ba60,#63f09c);transition:width .12s}.bar.blue i{background:linear-gradient(90deg,#1687e8,#50dcff)}.bar.purple i{background:linear-gradient(90deg,#7546f6,#c17aff)}
.weapon-dock{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:8px;padding:8px;background:rgba(4,13,25,.72);border:1px solid rgba(75,207,255,.18);border-radius:14px;backdrop-filter:blur(8px)}
.weapon-slot{width:48px;height:48px;border-radius:10px;border:1px solid rgba(75,207,255,.25);background:rgba(24,69,101,.28);display:flex;align-items:center;justify-content:center;position:relative;font-size:22px}.weapon-slot small{position:absolute;right:4px;bottom:2px;font-size:9px;background:#08111e;padding:1px 4px;border-radius:99px}.weapon-slot.cooldown{opacity:.45}
.dash-indicator{position:absolute;right:18px;bottom:22px;width:145px;padding:9px 11px;background:rgba(5,15,29,.78);border:1px solid rgba(75,207,255,.18);border-radius:11px}.dash-indicator span{display:block;color:var(--muted);font-size:10px;margin-bottom:5px}.dash-track{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.dash-track i{display:block;height:100%;background:var(--cyan);width:100%}

.overlay{z-index:30;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(1,5,11,.76);backdrop-filter:blur(8px);overflow:auto}
.modal{width:min(1080px,100%);border-radius:20px;padding:26px}.modal.compact{width:min(420px,100%);display:flex;flex-direction:column;gap:12px;text-align:center}.modal.wide{max-width:1160px}.choice-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0 18px}.choice-card{min-height:245px;text-align:left;border:1px solid rgba(75,207,255,.18);background:linear-gradient(180deg,rgba(14,35,59,.92),rgba(5,14,26,.96));border-radius:15px;padding:16px;color:var(--text);position:relative;transition:.18s transform,.18s border-color}.choice-card:hover{transform:translateY(-4px);border-color:var(--cyan)}.choice-card .choice-icon{font-size:36px;height:50px}.choice-card h3{font-size:17px;margin:10px 0 8px;text-transform:uppercase;letter-spacing:.05em}.choice-card p{color:#bfd0dc;font-size:13px;line-height:1.55}.choice-card .tag{display:inline-block;margin-top:10px;padding:4px 7px;border-radius:6px;background:rgba(75,207,255,.1);color:var(--cyan);font-size:10px;font-weight:800}.rarity{position:absolute;right:11px;top:11px;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}.rarity.rare{color:#6facff}.rarity.epic{color:#bd83ff}.rarity.legendary{color:#ffc257}.choice-footer{display:flex;align-items:center;gap:12px}.choice-footer span{color:var(--muted);font-size:12px}
.result-modal{text-align:center;max-width:680px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.result-stat{padding:13px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.result-stat span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase}.result-stat strong{font-size:22px}
.hangar-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.hangar-card{padding:15px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09)}.hangar-card h3{margin:8px 0}.hangar-card p{color:var(--muted);font-size:13px;min-height:58px}.hangar-card button{width:100%}.upgrade-level{font-size:11px;color:var(--cyan)}
.howto-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.howto-grid article{padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03)}.howto-grid p{color:var(--muted);line-height:1.5}
.toast{position:absolute;z-index:50;left:50%;top:18%;transform:translateX(-50%);background:rgba(5,15,29,.94);border:1px solid var(--cyan);border-radius:10px;padding:10px 16px;font-weight:800;box-shadow:0 12px 32px rgba(0,0,0,.4)}
.mobile-controls{z-index:15;pointer-events:none;display:none}.joystick-base{pointer-events:auto;position:absolute;left:24px;bottom:26px;width:124px;height:124px;border-radius:50%;background:rgba(40,160,220,.12);border:1px solid rgba(75,207,255,.28)}.joystick-knob{position:absolute;left:37px;top:37px;width:50px;height:50px;border-radius:50%;background:rgba(75,207,255,.55);border:2px solid rgba(255,255,255,.7)}.mobile-dash{pointer-events:auto;position:absolute;right:28px;bottom:38px;width:82px;height:82px;border-radius:50%;border:1px solid rgba(75,207,255,.45);color:#fff;background:rgba(19,113,176,.55);font-weight:900}
.ship-svg{width:100%;height:100%;max-width:220px;filter:drop-shadow(0 0 16px rgba(78,218,255,.35))}

@media(max-width:1000px){
  .menu-grid{grid-template-columns:1fr}.ship-cards{grid-template-columns:repeat(3,1fr)}.launch-panel{display:grid;grid-template-columns:1fr 1fr;align-items:start}.launch-panel .selected-ship-art{grid-row:span 3}.choice-cards{grid-template-columns:1fr 1fr}.hangar-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .menu-shell{padding:20px}.brand h1{font-size:44px}.brand p{font-size:15px}.ship-cards{grid-template-columns:1fr 1fr}.launch-panel{display:flex}.selected-ship-art{height:120px}.hud{padding:8px}.hud-chip{min-width:auto;padding:6px 8px}.hud-top-left .hud-chip:nth-child(2){display:none}.wave-block{min-width:130px;padding:5px}.wave-block strong{font-size:22px}.status-panel{left:8px;bottom:145px;width:calc(100vw - 16px)}.weapon-dock{bottom:88px}.dash-indicator{display:none}.choice-cards{grid-template-columns:1fr}.choice-card{min-height:unset}.modal{padding:18px}.result-stats{grid-template-columns:1fr 1fr}.howto-grid,.hangar-cards{grid-template-columns:1fr}.menu-actions{grid-template-columns:1fr}.mobile-controls{display:block!important}.hud-top-right .hud-chip{display:none}
}
@media(pointer:coarse){.mobile-controls:not(.hidden){display:block}}