@import url('data:text/css,');

:root {
  --ink: #050711;
  --panel: rgba(8, 12, 25, .78);
  --cyan: #72f7ff;
  --cyan2: #14b8c9;
  --violet: #a879ff;
  --magenta: #ff4fd8;
  --amber: #ffc95c;
  --red: #ff5268;
  --green: #66ffb2;
  --text: #e9fbff;
  --muted: #7d9cab;
  --line: rgba(114, 247, 255, .18);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); color: var(--text); touch-action: none; overscroll-behavior: none; }
body { font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif; letter-spacing: .02em; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
button { font: inherit; }
.hidden { display: none !important; }

#game-shell { position: relative; width: 100vw; height: 100vh; isolation: isolate; background: #03050c; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
#game:focus { outline: none; }

.glass {
  background: linear-gradient(145deg, rgba(9, 16, 31, .88), rgba(6, 9, 20, .64));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 32px rgba(58, 221, 255, .035), 0 10px 40px rgba(0,0,0,.2);
  backdrop-filter: blur(9px);
}
.micro-label { display: block; color: var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 23px; padding: 3px 6px; color: var(--text); border: 1px solid rgba(114,247,255,.33); border-bottom-color: rgba(114,247,255,.13); border-radius: 3px; background: rgba(114,247,255,.08); font: 800 9px/1 monospace; box-shadow: 0 2px 0 rgba(0,0,0,.35); }

/* Start */
.screen { position: absolute; inset: 0; z-index: 50; background: radial-gradient(circle at 65% 40%, rgba(42, 15, 81, .35), transparent 35%), radial-gradient(circle at 60% 45%, rgba(12, 124, 146, .16), transparent 60%), #03050c; overflow: hidden; }
.screen::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(3,5,12,.98) 0%, rgba(3,5,12,.82) 37%, rgba(3,5,12,.2) 72%, rgba(3,5,12,.75) 100%); }
.screen::after { content:""; position:absolute; width: 58vw; height: 58vw; right:-8vw; top:-13vw; border:1px solid rgba(114,247,255,.08); border-radius:50%; box-shadow: 0 0 0 5vw rgba(114,247,255,.012), 0 0 0 10vw rgba(114,247,255,.009), inset 0 0 100px rgba(86,24,143,.13); animation: orbit 35s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
.scanlines { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.16; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(117,247,255,.08) 4px); mix-blend-mode: screen; }
.starfield { position:absolute; inset:0; z-index:1; opacity:.8; }
.star { position:absolute; width:2px; height:2px; border-radius:50%; background:#c6fbff; box-shadow:0 0 8px #72f7ff; animation: twinkle var(--t) ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity:.1; transform:scale(.5); } }
.start-content { position:absolute; z-index:5; left: clamp(38px, 8vw, 150px); top:50%; transform:translateY(-53%); width:min(650px, 58vw); }
.eyebrow { color:var(--cyan); font:800 10px/1 monospace; letter-spacing:.28em; text-transform:uppercase; }
h1 { position:relative; margin:18px 0 -12px; font:900 clamp(68px, 10vw, 150px)/.78 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing:-.055em; text-transform:uppercase; color:#edfaff; text-shadow: 0 0 35px rgba(114,247,255,.16); }
h1 span { color:transparent; -webkit-text-stroke:1px rgba(178,247,255,.8); text-shadow:none; }
.start-content h2 { margin: 16px 0 24px 4px; color:var(--magenta); font:800 clamp(16px,2.1vw,27px)/1 monospace; letter-spacing:.48em; }
.tagline { max-width:560px; color:#9bb7c2; font-size:13px; line-height:1.7; letter-spacing:.04em; }
.start-actions { display:flex; gap:10px; margin-top:34px; align-items:stretch; }
button { color:var(--text); border:0; cursor:pointer; text-transform:uppercase; }
.primary { position:relative; min-width:265px; padding:15px 25px; overflow:hidden; text-align:left; color:#031015; background:var(--cyan); border:1px solid #caffff; clip-path:polygon(0 0,94% 0,100% 28%,100% 100%,6% 100%,0 72%); box-shadow:0 0 28px rgba(114,247,255,.18); transition:.18s ease; }
.primary::before { content:""; position:absolute; inset:0; transform:translateX(-105%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); transition:.3s; }
.primary:hover { transform:translateY(-2px); filter:brightness(1.15); box-shadow:0 0 38px rgba(114,247,255,.32); }
.primary:hover::before { transform:translateX(105%); }
.primary span { display:block; font-size:12px; font-weight:900; letter-spacing:.12em; }
.primary small { display:block; margin-top:5px; font:700 8px monospace; letter-spacing:.18em; opacity:.55; }
.primary.compact { min-width:180px; padding:13px 22px; text-align:center; font-size:10px; font-weight:900; letter-spacing:.15em; }
.secondary { padding:13px 20px; color:var(--cyan); border:1px solid rgba(114,247,255,.25); background:rgba(9,17,30,.75); font-size:10px; font-weight:800; letter-spacing:.12em; transition:.18s; }
.secondary:hover { border-color:var(--cyan); background:rgba(114,247,255,.1); }
.secondary.accent { color:var(--magenta); border-color:rgba(255,79,216,.3); }
.secondary.accent:hover { border-color:var(--magenta); background:rgba(255,79,216,.09); box-shadow:0 0 24px rgba(255,79,216,.12); }
.seed-line { margin-top:18px; color:#536e79; font:700 8px monospace; letter-spacing:.2em; }
.profile-line { display:flex; align-items:center; gap:8px; width:280px; margin-top:8px; color:#536e79; font:700 8px monospace; letter-spacing:.16em; }
.profile-line input { min-width:0; flex:1; padding:5px 7px; color:var(--cyan); outline:0; border:0; border-bottom:1px solid #314d58; background:transparent; font:800 9px monospace; text-transform:uppercase; }
#seed-btn { margin-left:8px; padding:5px 8px; color:#8aaab5; border-bottom:1px dotted #49616b; background:none; font:inherit; }
#seed-btn:hover { color:var(--cyan); }
.legacy-card { position:absolute; z-index:5; right:5vw; top:50%; transform:translateY(-50%); display:grid; grid-template-columns:repeat(3,1fr); gap:1px; width:270px; padding:17px; }
.legacy-card > .micro-label { grid-column:1/-1; margin-bottom:8px; }
.legacy-card div { padding:12px 7px; text-align:center; border:1px solid rgba(114,247,255,.08); }
.legacy-card b { display:block; color:var(--text); font:700 20px monospace; }
.legacy-card small { color:#5f7d87; font:700 7px monospace; letter-spacing:.13em; }
.legacy-card p { grid-column:1/-1; margin:10px 3px 0; color:#526f7a; font-size:9px; line-height:1.5; }
.screen footer { position:absolute; z-index:5; left:0; right:0; bottom:0; display:flex; justify-content:center; gap:3.5vw; padding:16px; color:#66848f; border-top:1px solid rgba(114,247,255,.08); background:rgba(3,5,12,.72); font:700 8px monospace; letter-spacing:.13em; }

/* HUD */
#hud { position:absolute; inset:0; z-index:10; pointer-events:none; }
.hud-left { position:absolute; top:18px; left:18px; width:275px; padding:13px 14px 11px; clip-path:polygon(0 0,95% 0,100% 14%,100% 100%,0 100%); }
.pilot-line { display:flex; align-items:baseline; gap:9px; margin-bottom:10px; }
.pilot-line .micro-label { margin-right:auto; }
.pilot-line strong { font:800 12px monospace; letter-spacing:.12em; }
.pilot-line #level-label { color:var(--violet); font:800 9px monospace; }
.bar-row { display:grid; grid-template-columns:27px 1fr; gap:7px; align-items:center; margin:4px 0; color:#7797a3; font:800 7px monospace; }
.bar { position:relative; height:11px; overflow:hidden; border:1px solid rgba(255,255,255,.07); background:rgba(0,0,0,.35); }
.bar i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#ff5268,#ff826d); box-shadow:0 0 12px rgba(255,82,104,.45); transition:width .2s; }
.bar.shield i { background:linear-gradient(90deg,#4b87ff,#72f7ff); box-shadow:0 0 12px rgba(114,247,255,.4); }
.bar.energy i { background:linear-gradient(90deg,#7745dd,#c07cff); box-shadow:0 0 12px rgba(168,121,255,.4); }
.bar b { position:absolute; inset:0 4px 0 auto; color:rgba(255,255,255,.7); font:700 6px/10px monospace; }
.xp-wrap { display:flex; align-items:center; gap:8px; margin-top:8px; color:#6e8b96; font:700 7px monospace; }
.xp { flex:1; height:2px; background:rgba(255,255,255,.07); }
.xp i { display:block; width:0; height:100%; background:var(--violet); box-shadow:0 0 8px var(--violet); }
.objective { position:absolute; top:18px; left:50%; transform:translateX(-50%); width:min(390px,34vw); padding:11px 17px 10px; text-align:center; clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%); }
.objective strong { display:block; margin:4px; font:800 11px monospace; letter-spacing:.13em; }
.objective p { margin:2px 0; color:#6d8b96; font-size:8px; }
.anchor-pips { display:flex; justify-content:center; gap:8px; margin-top:7px; }
.anchor-pips i { width:26px; height:3px; background:#24343d; transform:skewX(-25deg); }
.anchor-pips i.active { background:var(--cyan); box-shadow:0 0 9px var(--cyan); }
.hud-right { position:absolute; top:18px; right:18px; display:grid; grid-template-columns:repeat(3,auto); gap:16px; min-width:250px; padding:12px 15px; }
.hud-right > div { min-width:50px; }
.hud-right strong { display:block; margin-top:3px; font:800 12px monospace; }
.hud-right .timer { grid-column:1/-1; margin-top:-2px; color:#587783; text-align:right; font:700 9px monospace; }
#minimap { position:absolute; top:104px; right:18px; width:184px; height:128px; opacity:.84; border:1px solid rgba(114,247,255,.14); background:rgba(3,7,15,.7); clip-path:polygon(0 0,90% 0,100% 14%,100% 100%,0 100%); }
.squad-hud { position:absolute; top:240px; right:18px; width:184px; padding:10px; pointer-events:auto; }
#squad-code { cursor:pointer; }
.squad-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:7px; border-bottom:1px solid rgba(114,247,255,.09); }
.squad-heading b { color:var(--magenta); font:900 10px monospace; letter-spacing:.14em; }
.squad-member { display:grid; grid-template-columns:9px 1fr auto; align-items:center; gap:6px; margin-top:7px; color:#9ec0ca; font:800 7px monospace; letter-spacing:.06em; }
.squad-member > i { width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 7px currentColor; }
.squad-member > b { color:#5e7e8a; font-size:7px; }
.squad-member .mate-hp { grid-column:2/-1; height:2px; background:#1a2930; }
.squad-member .mate-hp i { display:block; height:100%; background:var(--green); }
.network-state { display:block; margin-top:8px; color:#526d76; font:700 6px monospace; letter-spacing:.1em; }
.network-state.good { color:var(--green); }
.network-state.warn { color:var(--amber); }
.comms { position:absolute; left:18px; bottom:103px; width:300px; max-height:92px; overflow:hidden; padding:9px 12px; color:#7799a5; font:700 8px/1.7 monospace; border-left:2px solid var(--cyan); }
.comms span { display:block; animation:commsIn .25s ease both; }
.comms span:first-child { color:var(--cyan); }
@keyframes commsIn { from { opacity:0; transform:translateX(-10px); } }
.weapon-card { position:absolute; left:18px; bottom:18px; width:210px; padding:10px 13px; }
.weapon-card strong { display:block; margin:4px 0 8px; font:800 9px monospace; letter-spacing:.1em; }
.heat { height:3px; background:#1b2730; }
.heat i { display:block; width:0; height:100%; background:var(--amber); box-shadow:0 0 7px var(--amber); }
.weapon-card > span:last-child { display:block; margin-top:4px; color:#66838d; font:700 7px monospace; }
.ability-dock { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:flex; gap:6px; }
.ability { position:relative; min-width:112px; padding:9px 10px 8px; overflow:hidden; color:#688893; border:1px solid rgba(114,247,255,.13); background:rgba(5,9,19,.83); text-align:center; }
.ability kbd { position:relative; z-index:2; color:var(--cyan); }
.ability b { position:relative; z-index:2; display:block; margin-top:6px; font:800 7px monospace; letter-spacing:.09em; }
.ability > i { position:absolute; z-index:1; left:0; right:0; bottom:0; height:0; background:rgba(114,247,255,.12); transition:height .1s linear; }
.ability.ready { color:#c8faff; border-color:rgba(114,247,255,.35); box-shadow:inset 0 0 16px rgba(114,247,255,.05); }
.ability.ready kbd { box-shadow:0 0 10px rgba(114,247,255,.25); }
.ability.hint { min-width:88px; }
.combo { position:absolute; right:28px; bottom:28px; text-align:right; color:var(--magenta); text-shadow:0 0 12px rgba(255,79,216,.4); }
.combo b { display:block; font:900 34px/.8 monospace; transform:skewX(-8deg); }
.combo span { color:#8f7194; font:800 7px monospace; letter-spacing:.22em; }
.interact { position:absolute; left:50%; top:66%; transform:translate(-50%,-50%); min-width:210px; padding:10px 13px; overflow:hidden; text-align:center; color:var(--cyan); border:1px solid rgba(114,247,255,.28); background:rgba(4,11,20,.88); font:800 9px monospace; letter-spacing:.14em; }
.interact kbd { margin-right:8px; }
.interact i { position:absolute; z-index:-1; inset:0 auto 0 0; width:0; background:rgba(114,247,255,.15); }
.boss-wrap { position:absolute; top:94px; left:50%; transform:translateX(-50%); width:min(540px,50vw); text-align:center; }
.boss-title { display:flex; justify-content:space-between; margin-bottom:6px; color:#dcb7ff; font:900 9px monospace; letter-spacing:.18em; }
.boss-title b { color:var(--magenta); }
.boss-bar { height:7px; padding:1px; border:1px solid rgba(255,79,216,.33); background:rgba(0,0,0,.5); transform:skewX(-16deg); }
.boss-bar i { display:block; width:100%; height:100%; background:linear-gradient(90deg,var(--violet),var(--magenta)); box-shadow:0 0 15px rgba(255,79,216,.45); }

/* Modal */
.modal { position:absolute; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:25px; background:rgba(1,3,8,.74); backdrop-filter:blur(7px); }
.modal-card { position:relative; width:min(920px,92vw); max-height:90vh; overflow:auto; padding:30px; color:var(--text); border:1px solid rgba(114,247,255,.22); background:linear-gradient(145deg,rgba(10,17,32,.97),rgba(5,8,18,.98)); box-shadow:0 25px 80px rgba(0,0,0,.6), inset 0 0 80px rgba(77,197,255,.025); clip-path:polygon(0 0,97% 0,100% 5%,100% 100%,3% 100%,0 95%); }
.modal-card::before { content:""; position:absolute; left:0; top:0; width:90px; height:2px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.modal-card h2 { margin:8px 0 22px; font-size:29px; letter-spacing:-.02em; }
.close { position:absolute; top:16px; right:19px; color:#7896a0; background:none; font:300 24px sans-serif; }
.close:hover { color:var(--cyan); }
.manual-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-bottom:22px; background:rgba(114,247,255,.08); }
.manual-grid article { min-height:115px; padding:19px; background:#080d19; }
.manual-grid b { color:var(--cyan); font:800 10px monospace; letter-spacing:.12em; }
.manual-grid p { color:#7f9da8; font-size:11px; line-height:1.7; }
.coop-card { width:min(760px,94vw); }
.coop-card h2 { margin-bottom:8px; }
.coop-intro { max-width:620px; margin:0 0 22px; color:#7896a1; font-size:11px; line-height:1.65; }
.field-label { display:block; margin-bottom:6px; color:var(--cyan); font:800 8px monospace; letter-spacing:.15em; }
.terminal-input { width:100%; padding:13px 14px; color:#e7fcff; outline:0; border:1px solid rgba(114,247,255,.22); background:#050b15; font:800 12px monospace; letter-spacing:.14em; text-transform:uppercase; caret-color:var(--cyan); }
.terminal-input:focus { border-color:var(--cyan); box-shadow:inset 0 0 18px rgba(114,247,255,.05),0 0 16px rgba(114,247,255,.06); }
.coop-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.coop-grid article { min-height:150px; padding:17px; border:1px solid rgba(114,247,255,.1); background:#080d18; }
.coop-grid p { min-height:32px; color:#66838e; font-size:10px; line-height:1.55; }
.join-line { display:grid; grid-template-columns:1fr auto; gap:6px; }
.terminal-input.code { text-align:center; font-size:16px; letter-spacing:.25em; }
.coop-status { margin-top:12px; padding:9px 12px; color:#607f89; border-left:2px solid #314d58; background:rgba(0,0,0,.2); font:800 8px monospace; letter-spacing:.11em; }
.coop-status.good { color:var(--green); border-color:var(--green); }
.coop-status.bad { color:var(--red); border-color:var(--red); }
.relay-note { margin:11px 0 0; color:#49646e; font-size:8px; line-height:1.5; }
.relay-note b { color:#708d97; }
.level-card { width:min(1040px,95vw); text-align:center; overflow:visible; }
.level-card h2 { margin-bottom:26px; }
.upgrade-options { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; text-align:left; }
.upgrade { position:relative; min-height:270px; padding:21px; overflow:hidden; color:var(--text); border:1px solid rgba(114,247,255,.16); background:linear-gradient(160deg,#0c1424,#070b15); text-transform:none; transition:.2s ease; }
.upgrade::after { content:""; position:absolute; width:120px; height:120px; right:-45px; top:-45px; border:1px solid currentColor; border-radius:50%; opacity:.12; box-shadow:0 0 0 20px currentColor,0 0 0 40px currentColor; }
.upgrade:hover { transform:translateY(-7px); border-color:currentColor; box-shadow:0 14px 30px rgba(0,0,0,.35), inset 0 0 30px rgba(114,247,255,.03); }
.upgrade.common { color:var(--cyan); }
.upgrade.rare { color:var(--violet); }
.upgrade.legendary { color:var(--amber); }
.upgrade .rarity { display:block; color:currentColor; font:800 8px monospace; letter-spacing:.18em; }
.upgrade .icon { display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin:27px 0 17px; border:1px solid currentColor; background:rgba(255,255,255,.025); font:900 25px monospace; transform:rotate(45deg); }
.upgrade .icon span { transform:rotate(-45deg); }
.upgrade h3 { margin:0 0 9px; color:var(--text); font:900 16px monospace; letter-spacing:.04em; }
.upgrade p { margin:0; color:#72909b; font-size:11px; line-height:1.55; }
.upgrade .stacks { position:absolute; bottom:17px; right:18px; color:#526d77; font:700 8px monospace; }
.upgrade .pick-key { position:absolute; bottom:17px; left:20px; color:currentColor; font:900 9px monospace; }
.key-help { margin:20px 0 -5px; color:#526f79; font-size:9px; }
.systems-card { height:min(690px,90vh); overflow:hidden; }
.systems-card header h2 { margin:7px 0 18px; }
.tabs { display:flex; gap:0; overflow-x:auto; border-bottom:1px solid rgba(114,247,255,.13); }
.tabs button { padding:10px 17px; color:#58747f; border-bottom:2px solid transparent; background:none; font:800 8px monospace; letter-spacing:.12em; }
.tabs button.active { color:var(--cyan); border-bottom-color:var(--cyan); }
.systems-content { height:calc(100% - 100px); padding-top:18px; overflow-y:auto; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.stat { padding:15px; border:1px solid rgba(114,247,255,.09); background:rgba(114,247,255,.025); }
.stat span { display:block; color:#607e89; font:700 8px monospace; letter-spacing:.1em; }
.stat b { display:block; margin-top:7px; font:800 18px monospace; color:#dffcff; }
.protocol-list,.codex-grid,.directive-list { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.protocol-item,.codex-item,.directive-item { position:relative; padding:15px 16px; border:1px solid rgba(114,247,255,.09); background:#080d18; }
.protocol-item b,.codex-item b,.directive-item b { display:block; color:#bfeef2; font:800 10px monospace; letter-spacing:.07em; }
.protocol-item p,.codex-item p,.directive-item p { margin:7px 0 0; color:#66838e; font-size:10px; line-height:1.55; }
.protocol-item em { position:absolute; top:12px; right:13px; color:var(--violet); font:800 9px monospace; font-style:normal; }
.codex-item.locked { filter:grayscale(1); opacity:.35; }
.codex-item i { float:left; display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin-right:11px; border:1px solid #314852; border-radius:50%; color:var(--cyan); font:900 13px monospace; font-style:normal; }
.pause-card { width:420px; text-align:center; }
.pause-card h2 { font:900 58px/1 Impact,sans-serif; letter-spacing:.06em; }
.pause-card button { display:block; width:240px; margin:8px auto; }
.pause-card p { color:#597681; font-size:9px; }

/* End */
#end-screen { z-index:70; }
.end-content { position:absolute; z-index:5; left:50%; top:50%; transform:translate(-50%,-50%); width:min(700px,90vw); text-align:center; }
.end-content h2 { margin:13px 0 9px; font:900 clamp(42px,7vw,84px)/.9 Impact,sans-serif; letter-spacing:.02em; }
.end-content > p { color:#7896a1; font-size:12px; }
.end-stats { display:grid; grid-template-columns:repeat(4,1fr); margin:31px 0 22px; border:1px solid rgba(114,247,255,.13); }
.end-stats div { padding:18px; border-right:1px solid rgba(114,247,255,.1); background:rgba(7,13,25,.73); }
.end-stats div:last-child { border:0; }
.end-stats b { display:block; font:800 20px monospace; }
.end-stats span { color:#607c86; font:700 7px monospace; letter-spacing:.15em; }
.rank { position:absolute; right:-15px; top:80px; color:transparent; -webkit-text-stroke:1px rgba(255,79,216,.3); font:900 180px/1 Impact,sans-serif; transform:rotate(8deg); z-index:-1; }
.end-content .primary { margin:0 auto; text-align:center; }

#toast-layer { position:absolute; z-index:100; top:24%; left:50%; transform:translateX(-50%); pointer-events:none; }
.toast { margin:6px; padding:9px 16px; color:var(--cyan); border:1px solid rgba(114,247,255,.23); background:rgba(4,10,19,.88); text-align:center; font:800 9px monospace; letter-spacing:.12em; animation:toast 2.6s ease both; }
.toast.danger { color:var(--red); border-color:rgba(255,82,104,.3); }
.toast.legend { color:var(--amber); border-color:rgba(255,201,92,.3); }
@keyframes toast { 0%{opacity:0;transform:translateY(10px) scale(.95)} 10%,75%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-20px)} }

/* Touch — independent movement and aim/fire sticks */
#touch-controls { position:absolute; z-index:30; inset:0; pointer-events:none; }
.touch-stick { position:absolute; bottom:max(24px,env(safe-area-inset-bottom)); width:126px; height:126px; border:1px solid rgba(114,247,255,.22); border-radius:50%; background:radial-gradient(circle,rgba(114,247,255,.07),rgba(4,10,18,.22) 62%,rgba(4,10,18,.55)); box-shadow:inset 0 0 28px rgba(114,247,255,.04); pointer-events:auto; touch-action:none; }
.touch-stick::before,.touch-stick::after { content:""; position:absolute; background:rgba(114,247,255,.08); pointer-events:none; }
.touch-stick::before { left:10%; right:10%; top:50%; height:1px; }
.touch-stick::after { top:10%; bottom:10%; left:50%; width:1px; }
.touch-stick > span { position:absolute; left:0; right:0; top:-17px; color:#52717c; text-align:center; font:800 7px monospace; letter-spacing:.13em; }
#stick-zone { left:max(22px,env(safe-area-inset-left)); }
#aim-zone { right:max(22px,env(safe-area-inset-right)); border-color:rgba(255,79,216,.28); background:radial-gradient(circle,rgba(255,79,216,.07),rgba(4,10,18,.22) 62%,rgba(4,10,18,.55)); }
#stick-knob,#aim-knob { position:absolute; left:39px; top:39px; width:46px; height:46px; border:1px solid rgba(114,247,255,.58); border-radius:50%; background:rgba(114,247,255,.15); box-shadow:0 0 16px rgba(114,247,255,.12); pointer-events:none; }
#aim-knob { border-color:rgba(255,109,224,.7); background:rgba(255,79,216,.14); box-shadow:0 0 16px rgba(255,79,216,.15); }
#touch-controls button { position:absolute; width:52px; height:52px; color:#aefaff; border:1px solid rgba(114,247,255,.32); border-radius:50%; background:rgba(7,16,27,.82); box-shadow:0 5px 18px rgba(0,0,0,.3); pointer-events:auto; touch-action:none; font:800 8px monospace; }
#touch-controls button:active { transform:scale(.92); background:rgba(114,247,255,.17); }
#touch-dash { left:calc(50% - 26px); bottom:max(20px,env(safe-area-inset-bottom)); }
#touch-weapon { left:calc(50% - 88px); bottom:max(82px,calc(env(safe-area-inset-bottom) + 62px)); }
#touch-emp { left:calc(50% - 26px); bottom:max(82px,calc(env(safe-area-inset-bottom) + 62px)); }
#touch-ult { left:calc(50% + 36px); bottom:max(82px,calc(env(safe-area-inset-bottom) + 62px)); color:#ff9eea!important; border-color:rgba(255,79,216,.4)!important; }
#touch-flux { left:calc(50% - 26px); bottom:max(144px,calc(env(safe-area-inset-bottom) + 124px)); color:#c7a6ff!important; border-color:rgba(168,121,255,.45)!important; }

@media (max-width: 900px) {
  .legacy-card { display:none; }
  .start-content { width:80vw; }
  .hud-right { display:none; }
  #minimap { top:18px; right:12px; width:130px; height:90px; }
  .squad-hud { top:116px; right:12px; width:160px; }
  .objective { top:112px; width:320px; }
  .ability.hint { display:none; }
  .ability { min-width:88px; }
  .comms { display:none; }
  .manual-grid { grid-template-columns:1fr; }
  .upgrade-options { gap:6px; }
  .upgrade { padding:13px; min-height:235px; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 620px) {
  .start-content { left:25px; width:calc(100vw - 50px); }
  h1 { font-size:72px; }
  .start-content h2 { letter-spacing:.28em; }
  .tagline { font-size:11px; }
  .start-actions { flex-wrap:wrap; }
  .start-actions .primary { width:100%; }
  .start-actions .secondary { flex:1; }
  .screen footer { display:none; }
  .hud-left { width:220px; top:8px; left:8px; }
  #minimap { display:none; }
  .squad-hud { top:auto; bottom:170px; left:8px; right:auto; width:180px; padding:7px 9px; }
  .squad-member { margin-top:4px; }
  .objective { top:112px; width:290px; }
  .weapon-card { display:none; }
  .ability-dock { left:auto; right:8px; transform:none; bottom:8px; }
  .ability { display:none; }
  .ability:nth-child(2),.ability:nth-child(3) { display:block; min-width:75px; }
  .upgrade-options { grid-template-columns:1fr; max-height:65vh; overflow-y:auto; }
  .upgrade { min-height:180px; }
  .upgrade .icon { margin:18px 0 13px; }
  .protocol-list,.codex-grid,.directive-list { grid-template-columns:1fr; }
  .end-stats { grid-template-columns:repeat(2,1fr); }
  .coop-grid { grid-template-columns:1fr; max-height:50vh; overflow-y:auto; }
  .coop-grid article { min-height:130px; }
  .coop-card { padding:23px 18px; }
}
@media (pointer: coarse) {
  #game { cursor:default; }
  .ability-dock { display:none; }
  .weapon-card { bottom:154px; }
}
/* SALEMSTAR progression, rankings, and compact mobile presentation */
.primary.continue { background:var(--violet); border-color:#d8c2ff; color:#080411; }
.leaderboard-card { width:min(840px,94vw); }
.leaderboard-head,.leaderboard-row { display:grid; grid-template-columns:42px 1.2fr 1fr 70px 110px; align-items:center; gap:10px; padding:11px 13px; }
.leaderboard-head { color:#54727d; border-bottom:1px solid rgba(114,247,255,.12); font:800 8px monospace; letter-spacing:.13em; }
.leaderboard-list { max-height:55vh; overflow:auto; }
.leaderboard-row { color:#97b5be; border-bottom:1px solid rgba(114,247,255,.06); background:rgba(114,247,255,.018); font:700 10px monospace; }
.leaderboard-row:nth-child(-n+3) { color:var(--amber); background:rgba(255,201,92,.035); }
.leaderboard-row strong { color:#e8fdff; }
.leaderboard-row em { color:var(--cyan); text-align:right; font-style:normal; font-size:12px; }
.leaderboard-empty { padding:28px; color:#65828c; text-align:center; font:800 9px/1.7 monospace; }
.end-board { margin:-8px 0 15px; padding:11px 14px; text-align:left; }
.leaderboard-mini { display:grid; gap:3px; margin-top:7px; }
.leaderboard-mini > div { display:grid; grid-template-columns:24px 1fr auto; color:#7897a1; font:700 8px monospace; }
.leaderboard-mini b { color:#dffcff; }
.leaderboard-mini em { color:var(--amber); font-style:normal; }
.end-actions { display:flex; align-items:stretch; justify-content:center; gap:8px; }
.end-actions .primary { margin:0; }
.armory-list { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.armory-item { padding:14px; border:1px solid rgba(114,247,255,.1); background:#080d18; }
.armory-item.locked { opacity:.38; filter:grayscale(1); }
.armory-item b { display:block; color:#dffcff; font:800 10px monospace; }
.armory-item span { color:var(--amber); font:800 7px monospace; }
.armory-item p { color:#67858f; font-size:9px; line-height:1.5; }

/* Reduced-footprint touch controls: two translucent sticks plus one compact tray. */
.touch-stick { width:106px; height:106px; bottom:max(12px,env(safe-area-inset-bottom)); opacity:.42; transition:opacity .15s,transform .15s; }
.touch-stick:active { opacity:.82; transform:scale(1.03); }
#stick-zone { left:max(12px,env(safe-area-inset-left)); }
#aim-zone { right:max(12px,env(safe-area-inset-right)); }
#stick-knob,#aim-knob { left:34px; top:34px; width:36px; height:36px; }
.touch-actions { position:absolute; left:50%; bottom:max(8px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:grid; grid-template-columns:repeat(3,36px); gap:5px; padding:5px; border:1px solid rgba(114,247,255,.08); border-radius:10px; background:rgba(3,8,15,.28); backdrop-filter:blur(3px); pointer-events:auto; opacity:.62; }
#touch-controls .touch-actions button { position:static; width:36px; height:36px; font-size:6px; box-shadow:none; background:rgba(7,16,27,.62); }
#touch-weapon,#touch-vehicle,#touch-dash,#touch-emp,#touch-ult,#touch-flux { left:auto; right:auto; bottom:auto; }

@media (pointer:coarse) {
  #hud .hud-left { top:6px; left:6px; width:162px; padding:6px 8px; opacity:.58; backdrop-filter:blur(3px); }
  #hud .pilot-line { margin-bottom:4px; }
  #hud .pilot-line .micro-label { display:none; }
  #hud .pilot-line strong { font-size:8px; }
  #hud .pilot-line #level-label { font-size:7px; }
  #hud .bar-row { grid-template-columns:19px 1fr; gap:3px; margin:2px 0; font-size:6px; }
  #hud .bar { height:6px; }
  #hud .bar b { display:none; }
  #hud .xp-wrap { margin-top:4px; }
  #hud .xp-wrap > span { display:none; }
  #hud .objective { top:6px; left:auto; right:6px; transform:none; width:188px; min-height:56px; padding:7px 12px; opacity:.58; backdrop-filter:blur(3px); }
  #hud .objective .micro-label,#hud .objective p { display:none; }
  #hud .objective strong { margin:2px; font-size:8px; }
  #hud .anchor-pips { margin-top:5px; }
  #hud .hud-right,#hud #minimap,#hud .comms,#hud .weapon-card,#hud .ability-dock,#hud .combo { display:none!important; }
  #hud .boss-wrap { top:68px; width:62vw; }
  #hud .squad-hud { top:68px; right:6px; bottom:auto; left:auto; width:135px; max-height:76px; overflow:hidden; padding:6px; opacity:.68; }
  #hud .squad-heading .micro-label { font-size:6px; }
  #hud .squad-member { margin-top:3px; font-size:6px; }
  #hud .squad-member .mate-hp,.network-state { display:none; }
  .interact { top:28%; transform:translate(-50%,-50%) scale(.82); }
  #toast-layer { top:16%; }
}

@media (max-width:620px) {
  h1 { font-size:clamp(51px,16vw,68px); }
  .start-content { top:47%; }
  .start-content h2 { margin-top:18px; }
  .tagline { max-height:48px; overflow:hidden; }
  .start-actions { margin-top:18px; max-height:190px; overflow-y:auto; }
  .start-actions .primary { min-width:0; }
  .leaderboard-head,.leaderboard-row { grid-template-columns:28px 1fr 58px 78px; gap:5px; padding:9px 6px; }
  .leaderboard-head span:nth-child(3),.leaderboard-row span:nth-child(3) { display:none; }
  .end-content { max-height:94vh; overflow-y:auto; }
  .end-content h2 { font-size:38px; }
  .end-stats { margin:14px 0 10px; }
  .end-stats div { padding:10px; }
  .end-board { margin:0 0 10px; }
  .armory-list { grid-template-columns:1fr; }
}

@media (max-width:390px) and (pointer:coarse) {
  #hud .hud-left { width:138px; }
  #hud .objective { width:158px; }
  .touch-stick { width:94px; height:94px; }
  #stick-knob,#aim-knob { left:30px; top:30px; width:32px; height:32px; }
  .touch-actions { grid-template-columns:repeat(2,34px); }
  #touch-controls .touch-actions button { width:34px; height:30px; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } }