:root{--bg: #05070f;--panel: rgba(10, 14, 28, .42);--panel-border: rgba(140, 170, 255, .18);--text: #e8edf8;--muted: #8a94ad;--cyan: #6ee7ff;--orange: #ff8c42;--teal: #3ff2c8;--magenta: #d24dff;--danger: #ff5c6c;--gold: #ffd166;--green: #4ade80;--display: "Orbitron", "Exo 2", system-ui, sans-serif;--body: "Exo 2", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--body);overflow:hidden;-webkit-font-smoothing:antialiased}button{font-family:inherit}#app{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 0%,#141a3a 0%,var(--bg) 60%)}#game{display:block;image-rendering:auto;box-shadow:0 0 80px #000000b3}[hidden]{display:none!important}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 6px 24px #00000059,inset 0 1px #ffffff0d}.label{font-family:var(--display);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}.eyebrow{font-family:var(--display);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan);opacity:.85}.btn-primary,.btn-ghost{appearance:none;border:0;cursor:pointer;border-radius:999px;padding:14px 34px;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.18em;text-transform:uppercase;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.btn-primary{color:#071018;background:linear-gradient(135deg,#8ef0ff,#4fb8ff 60%,#6b7dff);box-shadow:0 0 0 1px #ffffff40 inset,0 10px 30px #50b4ff59}.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 0 1px #ffffff59 inset,0 14px 38px #50b4ff80}.btn-primary:active{transform:translateY(0) scale(.99)}.btn-ghost{color:var(--text);background:#ffffff0f;border:1px solid rgba(255,255,255,.14)}.btn-ghost:hover{background:#ffffff1f;transform:translateY(-1px)}.button-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}kbd{display:inline-block;min-width:22px;padding:2px 7px;margin:0 2px;border-radius:6px;border:1px solid rgba(255,255,255,.2);border-bottom-width:2px;background:#ffffff12;font-family:var(--display);font-size:11px;text-align:center;color:var(--text)}.hud{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(10px,1.6vw,22px);animation:hud-in .6s ease both}@keyframes hud-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.hud-top{display:grid;grid-template-columns:1fr minmax(220px,480px) 1fr;gap:14px;align-items:start}.hud-score,.hud-right{padding:10px 16px;min-width:150px}.hud-score{justify-self:start}.hud-right{justify-self:end}.hud-score .value{font-family:var(--display);font-weight:900;font-size:clamp(20px,2.4vw,30px);line-height:1.15;letter-spacing:.04em;color:#fff;text-shadow:0 0 18px rgba(110,231,255,.45)}.hud-score .value.bump{animation:bump .25s ease}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.08);color:var(--gold)}to{transform:scale(1)}}.hud-score .sub{font-size:12px;color:var(--muted)}.hud-center{display:flex;flex-direction:column;align-items:center;gap:5px;padding-top:4px}.hud-center .phase{font-family:var(--display);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 14px rgba(110,231,255,.5)}.progress{display:flex;align-items:center;gap:10px;width:100%;max-width:460px}.progress .planet{width:14px;height:14px;border-radius:50%;flex:none}.progress .earth{background:radial-gradient(circle at 35% 35%,#9fe1ff,#1d6fd1 55%,#0b2f6b);box-shadow:0 0 10px #50a0ff99}.progress .mars{background:radial-gradient(circle at 35% 35%,#ffb28a,#d4703f 55%,#7a2d16);box-shadow:0 0 12px #ff8c5ab3}.progress .track{position:relative;flex:1;height:6px;border-radius:999px;background:#ffffff1a;box-shadow:inset 0 0 0 1px #ffffff0f}.progress .fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#6ee7ff,#ff8c42);box-shadow:0 0 12px #6ee7ff99;transition:width .25s linear}.progress .ship-marker{position:absolute;top:50%;left:0%;width:0;height:0;transform:translate(-50%,-50%);transition:left .25s linear}.progress .ship-marker:before{content:"";position:absolute;left:-7px;top:-9px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:13px solid #fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.9));transform:rotate(90deg)}.hud-center .distance{font-family:var(--display);font-size:12px;letter-spacing:.1em;color:#e8edf8d9}.boss-bar{width:100%;max-width:460px;margin-top:6px;animation:boss-in .6s ease both}@keyframes boss-in{0%{opacity:0;transform:scaleX(.6)}to{opacity:1;transform:none}}.boss-label{font-family:var(--display);font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--danger);text-align:center;margin-bottom:4px;text-shadow:0 0 12px rgba(255,92,108,.7)}.boss-track{height:8px;border-radius:999px;background:#ff5c6c26;border:1px solid rgba(255,92,108,.4);overflow:hidden}.boss-fill{height:100%;width:100%;background:linear-gradient(90deg,#ff3d5a,#ff8c42);box-shadow:0 0 14px #ff3d5acc;transition:width .15s linear}.boss-bar.enraged .boss-fill{animation:enrage .5s steps(2) infinite}@keyframes enrage{to{filter:brightness(1.6)}}.hud-right{display:flex;flex-direction:column;gap:8px;align-items:flex-end;text-align:right}.hull{display:flex;align-items:center;gap:10px}.pips{display:flex;gap:5px}.pips i{width:22px;height:10px;border-radius:3px;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);transition:background .2s,box-shadow .2s;transform:skew(-14deg)}.pips i.on{background:linear-gradient(180deg,#a7f3ff,#4fb8ff);box-shadow:0 0 10px #6ee7ffb3}.pips.critical i.on{background:linear-gradient(180deg,#ff9aa5,#ff3d5a);box-shadow:0 0 12px #ff3d5ae6;animation:pulse-pip .7s ease-in-out infinite alternate}@keyframes pulse-pip{to{opacity:.45}}.crew{display:flex;gap:14px}.crew-item{display:flex;align-items:baseline;gap:6px}.crew-value{font-family:var(--display);font-weight:700;font-size:18px}.rescued .crew-value{color:var(--teal);text-shadow:0 0 12px rgba(63,242,200,.5)}.lost .crew-value{color:var(--danger)}.hud-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.powerups{display:flex;gap:8px;flex-wrap:wrap}.chip{--chip-color: #fff;--p: 360deg;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--panel);border:1px solid var(--panel-border);backdrop-filter:blur(8px);animation:chip-in .3s ease both}@keyframes chip-in{0%{transform:translateY(10px) scale(.9);opacity:0}to{transform:none;opacity:1}}.chip.expiring{animation:chip-blink .4s steps(2) infinite}@keyframes chip-blink{to{opacity:.4}}.chip-ring{position:relative;width:26px;height:26px;border-radius:50%;background:conic-gradient(var(--chip-color) var(--p),rgba(255,255,255,.1) 0);flex:none}.chip-ring:after{content:"";position:absolute;inset:4px;border-radius:50%;background:#0b1020}.chip-icon{position:absolute;margin-left:6px;width:26px;text-align:center;font-size:13px;font-weight:700;color:var(--chip-color);line-height:26px}.chip-label{font-family:var(--display);font-size:10px;letter-spacing:.16em;color:var(--chip-color)}.chip-time{font-family:var(--display);font-size:11px;color:var(--muted);min-width:26px;text-align:right}.hud-buttons{display:flex;gap:8px;pointer-events:auto}.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--panel-border);background:var(--panel);color:var(--text);cursor:pointer;font-size:15px;backdrop-filter:blur(8px);transition:background .15s,transform .15s}.icon-btn:hover{background:#ffffff1f;transform:translateY(-1px)}.icon-btn.muted{opacity:.6}.announce{position:absolute;left:0;top:26%;width:100%;transform:translateY(-50%);padding:0 16px;text-align:center;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .5s ease}.announce.show{opacity:1}.announce-eyebrow{font-family:var(--display);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--cyan);opacity:0;animation:rise .6s ease .05s both}.announce-title{font-family:var(--display);font-weight:900;font-size:clamp(26px,4.6vw,52px);letter-spacing:.22em;text-transform:uppercase;color:#fff;text-shadow:0 0 30px rgba(110,231,255,.55),0 2px 0 rgba(0,0,0,.4);animation:title-in .7s cubic-bezier(.2,.9,.2,1) both}.announce-sub{margin-top:6px;font-size:clamp(13px,1.4vw,17px);color:#e8edf8d9;letter-spacing:.05em;animation:rise .6s ease .25s both}.announce:after{content:"";display:block;margin:12px auto 0;width:160px;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:line-grow .8s ease both}.announce.boss{top:50%}.announce.boss .announce-eyebrow{color:var(--danger);animation:rise .6s ease both,warn-blink .5s steps(2) infinite .6s}.announce.boss:after{background:linear-gradient(90deg,transparent,var(--danger),transparent);animation:line-grow .8s ease both,warn-blink .5s steps(2) infinite .8s}.announce.boss .announce-title{color:#ffdfe3;text-shadow:0 0 40px rgba(255,61,90,.8),0 2px 0 rgba(0,0,0,.5)}.announce.victory .announce-title{color:#fff4e6;text-shadow:0 0 40px rgba(255,176,120,.9)}.announce.victory:after{background:linear-gradient(90deg,transparent,var(--orange),transparent)}@keyframes title-in{0%{opacity:0;letter-spacing:.6em;transform:translateY(10px)}to{opacity:1;letter-spacing:.22em;transform:none}}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes line-grow{0%{width:0}to{width:160px}}@keyframes warn-blink{to{opacity:.35}}.vignette{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,#ff283c00 45%,#ff283c8c)}.vignette.hit{animation:vignette-hit .6s ease-out both}.vignette.critical{animation:vignette-critical 1.4s ease-in-out infinite}.vignette.hit.critical{animation:vignette-hit .6s ease-out both,vignette-critical 1.4s ease-in-out infinite .6s}@keyframes vignette-hit{0%{opacity:1}to{opacity:0}}@keyframes vignette-critical{0%,to{opacity:.15}50%{opacity:.55}}.touch-hint{position:absolute;left:50%;bottom:14%;transform:translate(-50%);padding:10px 18px;border-radius:999px;background:var(--panel);border:1px solid var(--panel-border);font-size:13px;pointer-events:none;animation:rise .5s ease both}.screen{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;padding:16px;background:#03050c8c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .35s ease;overflow:auto}.screen.visible{opacity:1}.card{width:min(100%,1040px);max-height:calc(100vh - 32px);overflow:auto;padding:clamp(18px,2.6vw,32px);border-radius:22px;background:linear-gradient(160deg,#0e1428db,#080b18e6);border:1px solid rgba(140,170,255,.2);box-shadow:0 30px 90px #0009,inset 0 1px #ffffff0f;transform:translateY(14px) scale(.985);transition:transform .45s cubic-bezier(.2,.9,.2,1);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.screen.visible .card{transform:none}.card-small{width:min(100%,520px);text-align:center}.card-end{width:min(100%,720px);text-align:center}.title-block{text-align:center;margin-bottom:16px}.title{margin:6px 0 0;font-family:var(--display);font-weight:900;font-size:clamp(30px,5.2vw,58px);letter-spacing:.24em;text-transform:uppercase;line-height:1;background:linear-gradient(180deg,#fff,#bfe8ff 45%,#ff9d5c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(110,231,255,.35));animation:title-in 1s cubic-bezier(.2,.9,.2,1) both}.title-line{margin:10px auto 0;width:220px;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--orange),transparent)}.section-title{margin:0 0 12px;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan)}.start-columns{display:grid;grid-template-columns:1.05fr 1fr;gap:32px}@media(max-width:820px){.start-columns{grid-template-columns:1fr;gap:22px}}.briefing p{margin:0 0 9px;font-size:14px;line-height:1.5;color:#e8edf8e6;opacity:0;animation:rise .6s ease both;animation-delay:calc(.15s + var(--i) * .12s)}.briefing strong{color:var(--orange);font-weight:700}.howto{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}@media(max-width:520px){.howto{grid-template-columns:1fr}}.howto-card{display:flex;gap:10px;align-items:center;padding:8px;border-radius:14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);transition:background .2s,border-color .2s}.howto-card:hover{background:#ffffff12}.howto-card.tone-good{border-color:#3ff2c84d}.howto-card.tone-hive{border-color:#3ff2c833}.howto-card.tone-hunter{border-color:#d24dff4d}.howto-card.tone-boss{border-color:#ff3d5a59}.howto-card.tone-ship{border-color:#6ee7ff4d}.howto-icon{flex:none;border-radius:12px;background:radial-gradient(circle at 50% 50%,#ffffff14,#0003)}.howto-title{font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}.howto-text{font-size:12.5px;line-height:1.4;color:#e8edf8c7}.pickup-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.pickup-item{--c: #fff;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:#ffffff0a;border:1px solid color-mix(in srgb,var(--c) 40%,transparent);font-family:var(--display);font-size:10px;letter-spacing:.14em;color:var(--c)}.controls{display:grid;gap:6px;padding:10px 14px;border-radius:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);font-size:13px;color:#e8edf8d9}.controls-touch{color:var(--muted)}.start-actions{position:sticky;bottom:-1px;margin:14px -12px -12px;padding:18px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;background:linear-gradient(180deg,#0a0d1b00,#0a0d1beb 55%)}.start-columns{padding-bottom:6px}.start-actions .btn-primary{font-size:15px;padding:16px 46px;animation:glow-pulse 2.4s ease-in-out infinite}@keyframes glow-pulse{0%,to{box-shadow:0 0 0 1px #ffffff40 inset,0 10px 30px #50b4ff59}50%{box-shadow:0 0 0 1px #ffffff59 inset,0 14px 44px #50b4ff99}}.records{font-size:13px;color:var(--muted)}.records b{color:var(--gold)}.heading{margin:6px 0 4px;font-family:var(--display);font-weight:900;font-size:clamp(24px,4vw,40px);letter-spacing:.16em;text-transform:uppercase}.muted{color:var(--muted);margin:0}.card-end.victory .heading{color:#fff3e2;text-shadow:0 0 30px rgba(255,176,120,.7)}.card-end.failed .heading{color:#ffd9de;text-shadow:0 0 30px rgba(255,61,90,.6)}.rank-block{margin:14px auto 10px}.rank{display:inline-grid;place-items:center;width:84px;height:84px;border-radius:50%;font-family:var(--display);font-weight:900;font-size:44px;color:#fff;border:2px solid rgba(255,255,255,.25);background:radial-gradient(circle at 40% 35%,#ffffff24,#ffffff05);box-shadow:0 0 30px #ffffff26;animation:rank-in .7s cubic-bezier(.2,.9,.2,1) .2s both}.rank[data-rank=S]{color:var(--gold);border-color:var(--gold);box-shadow:0 0 40px #ffd1668c}.rank[data-rank=A]{color:var(--teal);border-color:var(--teal);box-shadow:0 0 30px #3ff2c873}.rank[data-rank=B]{color:var(--cyan);border-color:var(--cyan)}.rank[data-rank=—]{color:var(--danger);border-color:#ff5c6c99}@keyframes rank-in{0%{transform:scale(.4) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}.rank-label{margin-top:6px;font-family:var(--display);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}.end-text{max-width:560px;margin:8px auto 20px;font-size:15px;line-height:1.6;color:#e8edf8e6}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}@media(max-width:640px){.stats-grid{grid-template-columns:repeat(2,1fr)}}.stat{padding:12px 10px;border-radius:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}.stat-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}.stat-value{font-family:var(--display);font-weight:700;font-size:18px}.stat-note{display:block;font-family:var(--body);font-size:11px;font-weight:400;color:var(--gold);letter-spacing:.06em}@media(max-width:700px){.hud{padding:8px}.hud-top{grid-template-columns:1fr 1fr;gap:8px}.hud-center{order:-1;grid-column:1 / -1;gap:3px;padding-top:0}.hud-center .phase{font-size:10px}.hud-center .distance{font-size:11px}.hud-score,.hud-right{padding:6px 10px;min-width:0}.hud-score .value{font-size:18px}.hud-score .sub{font-size:11px}.hud-right{gap:4px}.crew-value{font-size:15px}.pips i{width:16px;height:8px}.chip-label{display:none}.icon-btn{width:36px;height:36px}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
