:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #050711; touch-action: none; }
body { display: grid; place-items: center; }
.game-shell { position: relative; width: 100%; height: 100%; max-width: 520px; overflow: hidden; background: #080b18; box-shadow: 0 0 80px #000; }
canvas { display: block; width: 100%; height: 100%; }
.hud { position: absolute; z-index: 3; inset: max(12px, env(safe-area-inset-top)) 12px auto; display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: start; pointer-events: none; }
.hud > div { display: grid; gap: 2px; padding: 9px 10px; border: 1px solid #25304e; border-radius: 13px; background: linear-gradient(145deg,#12182bd9,#090d1bd9); box-shadow: 0 8px 24px #0005, inset 0 1px #ffffff0c; backdrop-filter: blur(8px); }
.hud .score-card{border-color:#57f3ff55;background:linear-gradient(145deg,#11273bd9,#090d1bd9)}.hud .run-card{border-color:#9f72ff55}.hud .best{border-color:#ffe75a44}.hud .best span{color:#b9a95d}
.hud span { font-size: 10px; letter-spacing: .18em; color: #8790ac; }
.hud strong { font-size: 23px; line-height: 1; font-variant-numeric: tabular-nums; }
.hud small { color: #ffe75a; font-weight: 900; font-size: 10px; }
.hud .best strong { color: #57f3ff; }
.hud .run-card { min-width: 0; padding: 8px; }
.run-line { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.run-line b { color:#dce4ff; font-size:10px; letter-spacing:.08em; white-space:nowrap; }
.run-line span { color:#ff4f7d; letter-spacing:1px; font-size:11px; }
.progress-track { height:5px; overflow:hidden; border-radius:9px; background:#252c45; }
.progress-track i { display:block; width:0%; height:100%; background:linear-gradient(90deg,#57f3ff,#9f72ff); box-shadow:0 0 10px #57f3ff; transition:width .2s; }
.mission { overflow:hidden; color:#7f8aa8; font-size:8px; white-space:nowrap; text-overflow:ellipsis; }
.icon-button { pointer-events: auto; width: 41px; height: 41px; border: 1px solid #26304c; border-radius: 13px; color: white; background: #11162ad9; font-weight: 900; font-size: 16px; }
.power-hud { position:absolute; z-index:3; top:max(92px,calc(env(safe-area-inset-top) + 80px)); left:12px; display:flex; gap:6px; pointer-events:none; }
.power-pill { padding:6px 9px; border:1px solid currentColor; border-radius:20px; background:#09101de8; font-size:10px; font-weight:900; box-shadow:0 0 14px currentColor; }
.wallet-hud { position:absolute; z-index:3; right:13px; top:max(66px,calc(env(safe-area-inset-top) + 54px)); display:flex; gap:5px; color:#ffe75a; font-size:11px; pointer-events:none; text-shadow:0 0 10px #ffe75a; }
.ability-button{position:absolute;z-index:4;right:18px;bottom:max(22px,env(safe-area-inset-bottom));display:grid;place-items:center;width:70px;height:70px;overflow:hidden;border:2px solid #57f3ff;border-radius:50%;color:#fff;background:#0b1730e8;box-shadow:0 0 26px #57f3ff55;opacity:0;pointer-events:none}.ability-button.visible{opacity:1;pointer-events:auto}.ability-button span{font-size:25px;z-index:1}.ability-button small{font-size:7px;font-weight:950;z-index:1}.ability-button i{position:absolute;inset:auto 0 0;height:0%;background:#57f3ff44;transition:height .1s}.ability-button.ready{animation:readyPulse 1.2s infinite}
.boss-hud{position:absolute;z-index:3;top:max(108px,calc(env(safe-area-inset-top) + 95px));left:50%;width:min(72%,320px);padding:8px 10px;border:1px solid #ff3b76;border-radius:12px;background:#130a18e8;transform:translateX(-50%) translateY(-20px);opacity:0;transition:.3s;pointer-events:none}.boss-hud.visible{opacity:1;transform:translateX(-50%)}.boss-hud span{display:block;margin-bottom:5px;color:#ff799d;font-size:9px;font-weight:950;letter-spacing:.14em;text-align:center}.boss-hud div{height:7px;overflow:hidden;border-radius:8px;background:#311020}.boss-hud i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ff315f,#ff8c42);box-shadow:0 0 12px #ff315f}
.overlay { position: absolute; z-index: 5; inset: 0; display: none; place-content: center; justify-items: center; padding: 30px; text-align: center; background: linear-gradient(#070a15df, #090c1bf5); backdrop-filter: blur(7px); overflow-y: auto; }
.overlay.visible { display: grid; }
.eyebrow { color: #57f3ff !important; font-size: 11px !important; font-weight: 800; letter-spacing: .24em; }
h1 { margin: 8px 0; font-size: clamp(54px, 17vw, 86px); line-height: .78; letter-spacing: -.08em; font-style: italic; text-shadow: 0 0 28px #5775ff66; }
h1 em { color: #ff3b76; font-style: inherit; }
h2 { margin: 8px 0; font-size: 64px; line-height: 1; }
.overlay p { color: #aab1c9; font-size: 15px; line-height: 1.6; }
.ship-preview { margin: 20px 0 8px; color: #57f3ff; font-size: 42px; transform: scaleX(.72); filter: drop-shadow(0 0 16px #57f3ff); animation: hover 1.6s ease-in-out infinite; }
.primary { margin-top: 22px; min-width: 220px; padding: 17px 25px; border: 0; border-radius: 15px; color: #060914; background: #57f3ff; box-shadow: 0 8px 30px #2edbea45; font-weight: 950; letter-spacing: .08em; font-size: 14px; }
.primary:active { transform: translateY(2px) scale(.98); }
.secondary { margin-top: 10px; padding: 11px 18px; border: 1px solid #323d61; border-radius: 12px; color: #aeb8d7; background: #11162ab0; font-weight: 800; letter-spacing: .08em; }
.shop-button { min-width:220px; display:flex; justify-content:space-between; }.shop-button span{color:#ffe75a}
.difficulty { display: flex; gap: 8px; margin-top: 12px; padding: 4px; border: 1px solid #252d49; border-radius: 13px; background: #090d1b; }
.difficulty-button { padding: 9px 18px; border: 0; border-radius: 9px; color: #6f7896; background: transparent; font-weight: 900; font-size: 11px; letter-spacing: .1em; }
.difficulty-button.active { color: #07101a; background: #57f3ff; box-shadow: 0 0 16px #57f3ff55; }
.menu-chips{display:flex;gap:6px;margin:12px 0 0;flex-wrap:wrap;justify-content:center}.menu-chips span{padding:6px 9px;border:1px solid #283252;border-radius:20px;color:#8590ad;background:#0a0f20;font-size:9px;font-weight:900;letter-spacing:.07em}
.how-to { max-width: 300px; margin-top: 12px; padding: 12px; border-radius: 12px; color: #aab1c9; background: #10152a; font-size: 13px; line-height: 1.5; }
.how-to b { color: #ffe75a; }.how-to i { color: #6affb7; font-style: normal; }
.how-to u { color:#bc89ff;text-decoration:none }.how-to strong{color:#59a7ff}
.reward { margin:10px 0 2px; padding:9px 18px; border:1px solid #ffe75a66; border-radius:30px; color:#ffe75a; background:#ffe75a10; box-shadow:0 0 20px #ffe75a22; font-size:22px; font-weight:950; }
.hangar-tabs{display:grid;grid-template-columns:1fr 1fr;width:min(100%,380px);margin-bottom:10px;padding:4px;border:1px solid #293453;border-radius:13px;background:#090e1d}.hangar-tab{padding:10px;border:0;border-radius:9px;color:#7783a2;background:transparent;font-weight:900}.hangar-tab.active{color:#06101a;background:#57f3ff}.ship-stats{display:flex;gap:5px;margin-top:5px}.ship-stats span{padding:3px 5px;border-radius:5px;color:#8e9ab9;background:#080d1b;font-size:8px}.rarity{color:#bc89ff;font-size:8px!important}.shop-screen .weapon-list{max-height:46vh;overflow-y:auto}.weapon-list[hidden]{display:none}
.shop-title { font-size:42px;margin:5px 0 }.shop-balance{margin:5px 0 12px!important}.shop-balance strong{color:#ffe75a;font-size:18px}.weapon-list{width:min(100%,380px);display:grid;gap:9px}.weapon-card{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:12px;border:1px solid #293453;border-radius:15px;text-align:left;background:linear-gradient(145deg,#151b31,#0b1021)}.weapon-card.equipped{border-color:#57f3ff;box-shadow:inset 0 0 20px #57f3ff12}.weapon-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:12px;color:#57f3ff;background:#57f3ff12;font-size:25px;text-shadow:0 0 12px #57f3ff}.weapon-info b{display:block;color:#e8edff;font-size:13px}.weapon-info small{display:block;margin-top:3px;color:#78839f;font-size:9px;line-height:1.35}.weapon-buy{min-width:76px;padding:9px 8px;border:1px solid #3a4668;border-radius:10px;color:#ffe75a;background:#10172b;font-weight:900;font-size:10px}.weapon-buy.active{color:#07101a;background:#57f3ff;border-color:#57f3ff}.weapon-buy:disabled{opacity:.38}.shop-screen{place-content:center}.shop-screen.visible{display:grid}
.upgrade-title{font-size:30px}.upgrade-list{display:grid;gap:11px;width:min(100%,390px)}.upgrade-card{display:grid;grid-template-columns:58px 1fr;gap:13px;align-items:center;padding:15px;border:1px solid #344264;border-radius:18px;color:#fff;background:linear-gradient(145deg,#18213a,#0a1021);text-align:left;box-shadow:0 10px 30px #0005}.upgrade-card:active{transform:scale(.98);border-color:#57f3ff}.upgrade-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;color:#57f3ff;background:#57f3ff14;font-size:28px;box-shadow:inset 0 0 18px #57f3ff12}.upgrade-card b{display:block;font-size:14px}.upgrade-card small{display:block;margin-top:4px;color:#8d99b8;line-height:1.4}.upgrade-level{color:#ffe75a!important;font-size:9px!important}
@keyframes readyPulse{50%{box-shadow:0 0 38px #57f3ffaa;transform:scale(1.04)}}
.panel-title{font-size:38px}.panel-screen h3{margin:18px 0 8px;color:#7785a8;font-size:10px;letter-spacing:.16em}.panel-list{display:grid;gap:8px;width:min(100%,380px)}.daily-card,.panel-item{padding:13px;border:1px solid #2c3858;border-radius:15px;background:#10172a;text-align:left}.daily-card{width:min(100%,380px);border-color:#ffe75a66;background:linear-gradient(135deg,#29230d,#11162a)}.daily-card button,.panel-item button{float:right;padding:7px 9px;border:0;border-radius:8px;color:#07101a;background:#ffe75a;font-weight:900}.panel-item b,.daily-card b{display:block;font-size:12px}.panel-item small,.daily-card small{color:#8691af;font-size:9px}.settings-list{display:grid;width:min(100%,350px);border:1px solid #2b3655;border-radius:16px;overflow:hidden}.settings-list label{display:flex;justify-content:space-between;align-items:center;padding:16px;background:#0d1427;border-bottom:1px solid #222d48;font-size:11px;font-weight:900}.settings-list input{width:20px;height:20px;accent-color:#57f3ff}.tutorial-icon{margin:15px;width:90px;height:90px;display:grid;place-items:center;border:2px solid #57f3ff;border-radius:50%;color:#57f3ff;background:#57f3ff11;font-size:42px;box-shadow:0 0 35px #57f3ff44}.panel-item.done{border-color:#6affb766}.panel-item.done b{color:#6affb7}
@keyframes hover { 50% { transform: scaleX(.72) translateY(-7px); } }
@media (min-width: 521px) { .game-shell { height: min(100%, 920px); border-radius: 24px; } }
@media (max-width:390px){.hud .best{display:none}.hud{grid-template-columns:auto 1fr auto}.mission{font-size:7px}}