@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700;900&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  color-scheme: dark;
  --ink: #071013;
  --ink-2: #0d181b;
  --panel: rgba(10, 24, 26, .78);
  --panel-solid: #0b171a;
  --line: rgba(178, 220, 204, .16);
  --text: #e7efe8;
  --muted: #8ea49d;
  --acid: #c8f169;
  --acid-2: #91ba49;
  --cyan: #79d8d0;
  --amber: #f6b64e;
  --red: #ff655e;
  --ui-scale: 1;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #05090a; }

body {
  font-family: "Noto Sans SC", system-ui, sans-serif;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }

.app { position: fixed; inset: 0; overflow: hidden; background: var(--ink); }
#game-canvas { position: absolute; width: 100%; height: 100%; inset: 0; opacity: 0; transition: opacity 1s ease; }
.app[data-scene="game"] #game-canvas { opacity: 1; }
.app.reduced-motion *, .app.reduced-motion *::before, .app.reduced-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.app.high-contrast { --acid: #e6ff62; --cyan: #7dfff5; --line: rgba(221, 255, 235, .32); }

.glass-panel {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(17, 36, 38, .88), rgba(6, 18, 21, .72));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 18px 45px rgba(0,0,0,.22);
  backdrop-filter: blur(15px) saturate(1.12);
  -webkit-backdrop-filter: blur(15px) saturate(1.12);
}

.screen { position: absolute; inset: 0; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .45s ease, visibility .45s; z-index: 40; }
.screen.is-active { visibility: visible; opacity: 1; pointer-events: auto; }

/* Title */
.boot-screen {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(32px + var(--safe-top)) calc(44px + var(--safe-right)) calc(30px + var(--safe-bottom)) calc(44px + var(--safe-left));
  background:
    radial-gradient(circle at 68% 55%, rgba(183, 228, 121, .14), transparent 23%),
    linear-gradient(90deg, rgba(4, 9, 10, .98) 0%, rgba(5, 12, 13, .82) 42%, rgba(7, 15, 15, .25) 70%, rgba(4,9,9,.68)),
    linear-gradient(0deg, #08100f, #172521);
  overflow: hidden;
}
.boot-screen::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(113deg, transparent 60%, rgba(200,241,105,.09) 60.2%, transparent 60.45%),
    repeating-linear-gradient(90deg, transparent 0 13.5vw, rgba(206,237,214,.035) 13.55vw 13.62vw),
    linear-gradient(180deg, transparent 60%, rgba(2,6,6,.8)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%239fba9e' stroke-opacity='.10'%3E%3Ccircle cx='690' cy='470' r='240'/%3E%3Ccircle cx='690' cy='470' r='205' stroke-dasharray='4 22'/%3E%3Cpath d='M690 110v720M330 470h570M520 255h340M510 680h350'/%3E%3Cpath d='M620 230l-80 240 80 240M760 230l80 240-80 240'/%3E%3C/g%3E%3C/svg%3E") 78% 50% / min(70vw, 900px) no-repeat;
  opacity: .95;
}
.boot-screen::after {
  content: ""; position: absolute; width: 24vw; height: 75vh; min-width: 260px; right: 12%; bottom: -14%;
  background: linear-gradient(90deg, transparent, rgba(171,201,164,.12), transparent);
  clip-path: polygon(43% 0, 58% 0, 63% 14%, 71% 22%, 66% 48%, 88% 100%, 10% 100%, 35% 49%, 29% 23%, 39% 14%);
  filter: blur(6px); opacity: .7;
}
.boot-noise { position:absolute; inset:-30%; pointer-events:none; opacity:.07; z-index: 1; animation: grain .22s steps(2) infinite; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
@keyframes grain { 0%{transform:translate(0)} 25%{transform:translate(3%,-2%)} 50%{transform:translate(-2%,4%)} 75%{transform:translate(4%,2%)} 100%{transform:translate(-3%,-3%)} }
.boot-header, .boot-copy, .boot-footer { position: relative; z-index: 3; }
.boot-header { display:flex; align-items:center; gap:16px; }
.brand-mark { width:37px;height:37px; position:relative; border:1px solid rgba(200,241,105,.34); transform:rotate(45deg); }
.brand-mark span { position:absolute; background:var(--acid); box-shadow:0 0 10px rgba(200,241,105,.5); }
.brand-mark span:nth-child(1){ width:3px;height:22px;left:8px;top:7px}.brand-mark span:nth-child(2){width:3px;height:22px;right:8px;top:7px}.brand-mark span:nth-child(3){width:14px;height:3px;left:11px;top:17px}
.sys-id { font: 600 11px/1 Rajdhani, monospace; letter-spacing:.22em;color:#a1b7ac; }
.boot-copy { align-self:center; width:min(520px,85vw); margin-top: 2vh; }
.eyebrow { margin:0 0 15px; color:var(--acid); letter-spacing:.32em; font:600 11px/1.4 Rajdhani, sans-serif; }
.boot-copy h1 { margin:0; font-size:clamp(55px,8.2vw,122px); line-height:.82; letter-spacing:-.08em; font-weight:900; text-shadow:0 14px 60px rgba(0,0,0,.6); }
.boot-copy h1 span { color:var(--acid); }
.english-title { margin:15px 0 0; font:700 clamp(16px,2vw,25px)/1 Rajdhani,sans-serif; letter-spacing:.55em; color:#d2ddd5; }
.tagline { color:#9aaba3; font-size:14px; letter-spacing:.14em; margin:33px 0 34px; }
.boot-actions { width:300px; display:grid; gap:10px; }
.primary-btn,.ghost-btn { position:relative; border:0; cursor:pointer; text-align:left; transition:transform .2s ease, background .2s, color .2s, border-color .2s; }
.primary-btn { min-height:66px; padding:12px 48px 12px 20px; color:#0a110d; background:var(--acid); clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%); }
.primary-btn::after { content:"↗";position:absolute;right:19px;top:19px;font-size:21px;transition:transform .2s; }
.primary-btn span {display:block;font-size:16px;font-weight:800;letter-spacing:.12em}.primary-btn small{display:block;margin-top:3px;color:rgba(5,12,7,.6);font-size:10px;letter-spacing:.12em}.primary-btn:hover{background:#d9ff7e;transform:translateX(4px)}.primary-btn:hover::after{transform:translate(2px,-2px)}
.ghost-btn { min-height:42px; padding:10px 16px; color:#adbbb4; background:rgba(166,204,184,.035);border:1px solid rgba(166,204,184,.13);letter-spacing:.15em;font-size:11px; }
.ghost-btn:hover{border-color:rgba(200,241,105,.55);color:var(--acid);background:rgba(200,241,105,.06)}
.boot-footer { display:flex;justify-content:space-between;align-items:end;color:#72877d;font:600 10px/1 Rajdhani,sans-serif;letter-spacing:.18em}.boot-footer span:first-child{color:#aebfb6}.boot-footer b{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 12px var(--acid);margin-right:7px;animation:pulse 2s infinite}@keyframes pulse{50%{opacity:.35}}

/* Prologue */
.prologue-screen { display:grid;place-items:center;background:#020606;overflow:hidden;text-align:center; }
.prologue-screen::before {content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(124,216,207,.12),transparent 35%),repeating-linear-gradient(0deg,transparent 0 4px,rgba(120,220,211,.02) 5px);}
.awakening-ring {position:relative;width:min(29vw,320px);aspect-ratio:1;border:1px solid rgba(121,216,208,.15);border-radius:50%;display:grid;place-items:center;color:var(--cyan);font:700 42px Rajdhani;animation:prologueSpin 12s linear infinite;box-shadow:0 0 100px rgba(121,216,208,.06),inset 0 0 80px rgba(121,216,208,.04)}
.awakening-ring::before,.awakening-ring::after,.awakening-ring i{content:"";position:absolute;border-radius:50%;border:1px solid rgba(121,216,208,.2)}.awakening-ring::before{inset:8%;border-style:dashed}.awakening-ring::after{inset:23%;border-color:rgba(200,241,105,.25)}.awakening-ring i{inset:-9%;border-color:transparent;border-top-color:var(--acid);border-bottom-color:var(--acid)}.awakening-ring span{animation:prologueSpin 12s linear infinite reverse}@keyframes prologueSpin{to{transform:rotate(360deg)}}
.prologue-copy{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);width:min(760px,86vw)}.prologue-copy p:first-child{color:var(--cyan);font-size:11px;letter-spacing:.24em}.prologue-copy h2{font-size:clamp(21px,3vw,36px);font-weight:400;letter-spacing:.12em;margin:13px}.prologue-copy p:last-child{color:#7d918a;font-size:13px}.prologue-screen button{position:absolute;right:4%;bottom:4%;border:0;background:transparent;color:#60706b;font-size:11px;letter-spacing:.14em;cursor:pointer}

/* HUD */
.hud { position:absolute; inset:0; z-index:10; pointer-events:none; opacity:0; transition:opacity .5s; transform:scale(var(--ui-scale)); transform-origin:center; }
.app[data-scene="game"] .hud { opacity:1; }
.hud button { pointer-events:auto; }
.top-hud{position:absolute;left:calc(25px + var(--safe-left));right:calc(25px + var(--safe-right));top:calc(20px + var(--safe-top));display:flex;align-items:start;justify-content:space-between;gap:14px}
.identity-panel{height:58px;min-width:220px;display:flex;align-items:center;padding:8px 15px 8px 8px;clip-path:polygon(0 0,100% 0,calc(100% - 11px) 100%,0 100%)}
.avatar-core{width:40px;height:40px;border:1px solid rgba(200,241,105,.25);display:grid;place-items:center;margin-right:11px;position:relative;background:rgba(200,241,105,.06);font:700 15px Rajdhani;color:var(--acid)}.avatar-core::before{content:"";position:absolute;inset:5px;border:1px solid rgba(200,241,105,.12);transform:rotate(45deg)}
.identity-panel strong,.identity-panel span{display:block}.identity-panel strong{font-size:12px;letter-spacing:.08em}.identity-panel span{font-size:9px;color:var(--muted);margin-top:4px;letter-spacing:.08em}
.world-status{height:51px;min-width:200px;padding:8px 20px;text-align:center;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%,0 9px)}.world-status span,.world-status b,.world-status i{display:block}.world-status span{font-size:9px;color:var(--muted);letter-spacing:.18em}.world-status b{font:600 15px/1.4 Rajdhani,sans-serif;letter-spacing:.12em}.world-status i{position:absolute;right:8px;bottom:5px;color:var(--amber);font-size:8px;font-style:normal}
.resource-strip{height:50px;min-width:245px;padding:0 15px;display:flex;align-items:center;gap:15px}.resource{display:flex;gap:7px;align-items:center}.resource-icon{width:22px;height:22px;display:grid;place-items:center;color:var(--acid);font-size:13px;background:rgba(200,241,105,.08);border:1px solid rgba(200,241,105,.12)}.resource span{display:block;font-size:8px;color:var(--muted);letter-spacing:.08em}.resource strong{display:block;font:700 12px Rajdhani,sans-serif}
.vitals{position:absolute;left:calc(25px + var(--safe-left));bottom:calc(25px + var(--safe-bottom));width:260px;padding:12px 15px}.vital{display:grid;grid-template-columns:37px 1fr 30px;align-items:center;gap:8px;margin:4px 0}.vital>span{color:var(--muted);font-size:8px;letter-spacing:.1em}.vital>i{height:3px;background:rgba(255,255,255,.08);overflow:hidden}.vital>i b{display:block;height:100%;width:100%;background:var(--cyan);box-shadow:0 0 8px currentColor;transition:width .25s}.vital.health>i b{background:var(--acid)}.vital>strong{text-align:right;font:600 11px Rajdhani}.survival-readout{display:flex;gap:17px;border-top:1px solid var(--line);margin-top:10px;padding-top:9px}.survival-readout span{font-size:8px;color:var(--muted);letter-spacing:.08em}.survival-readout b{color:var(--text);margin:0 4px}.survival-readout i{color:var(--cyan);font-style:normal}
.objective-card{position:absolute;left:25px;top:98px;width:min(330px,calc(100vw - 50px));padding:17px 18px;overflow:hidden;transition:transform .4s,opacity .4s}.objective-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acid);box-shadow:0 0 15px var(--acid)}.objective-kicker{display:flex;align-items:center;justify-content:space-between;color:var(--acid);font-size:8px;letter-spacing:.2em}.objective-kicker button{border:1px solid var(--line);background:transparent;color:var(--muted);font:600 9px Rajdhani;padding:3px 7px}.objective-card h2{font-size:16px;margin:11px 0 6px;letter-spacing:.05em}.objective-card p{font-size:10px;line-height:1.7;color:#9aaca4;margin:0 0 13px}.objective-card kbd{color:var(--text);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);padding:1px 5px}.objective-progress{display:flex;gap:9px;align-items:center}.objective-progress>i{flex:1;height:2px;background:rgba(255,255,255,.08)}.objective-progress>i b{display:block;height:100%;width:0;background:var(--acid);box-shadow:0 0 8px var(--acid);transition:width .45s}.objective-progress span{font:600 9px Rajdhani;color:#a9bab1}.objective-card>small{display:block;margin-top:7px;color:#668079;font-size:8px}
.context-prompt{position:absolute;left:50%;bottom:26%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:rgba(5,14,15,.82);border:1px solid rgba(200,241,105,.25);padding:9px 16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}.context-prompt[hidden]{display:none}.context-prompt kbd{width:27px;height:27px;display:grid;place-items:center;background:var(--acid);color:#10170c;font:700 12px Rajdhani}.context-prompt b,.context-prompt small{display:block}.context-prompt b{font-size:11px}.context-prompt small{font-size:8px;color:var(--muted);margin-top:2px}
.weapon-hud{position:absolute;right:calc(25px + var(--safe-right));bottom:calc(25px + var(--safe-bottom));width:295px;height:100px;padding:13px;display:grid;grid-template-columns:72px 1fr;gap:12px}.weapon-art{position:relative;background:linear-gradient(135deg,rgba(200,241,105,.07),transparent);overflow:hidden}.weapon-art i{position:absolute;width:48px;height:11px;background:#76877c;left:10px;top:25px;clip-path:polygon(0 25%,75% 0,100% 30%,85% 70%,42% 68%,30% 100%,16% 100%,20% 62%,0 55%)}.weapon-art b{position:absolute;left:29px;top:33px;width:10px;height:20px;background:#3c5048;transform:skewX(-12deg)}.weapon-data>span{font-size:9px;color:#a3b5ad;letter-spacing:.1em}.weapon-data>strong{display:block;font:700 27px Rajdhani;margin-top:1px}.weapon-data>strong i{font-style:normal;font-size:14px;color:#53625d;margin:0 4px}.weapon-data>strong small{font-size:13px;color:#8c9b95}.ability-row{display:flex;gap:8px;position:absolute;right:12px;bottom:10px}.ability-row span{position:relative;width:47px;height:27px;border:1px solid var(--line);display:grid;grid-template-columns:19px 1fr;align-items:center;padding:3px;overflow:hidden}.ability-row kbd{position:relative;z-index:2;font:700 9px Rajdhani;text-align:center}.ability-row i{position:absolute;bottom:0;left:0;height:2px;width:100%;background:var(--acid)}.ability-row b{font-size:7px;color:var(--muted)}
.crosshair{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);transition:width .08s,height .08s}.crosshair i{position:absolute;background:rgba(220,244,225,.8)}.crosshair i:nth-child(1){width:7px;height:1px;left:0;top:16px}.crosshair i:nth-child(2){width:7px;height:1px;right:0;top:16px}.crosshair i:nth-child(3){width:1px;height:7px;top:0;left:16px}.crosshair i:nth-child(4){width:1px;height:7px;bottom:0;left:16px}.crosshair b{position:absolute;left:15px;top:15px;width:3px;height:3px;border-radius:50%;background:var(--acid);box-shadow:0 0 6px var(--acid)}.crosshair.firing{width:42px;height:42px}.crosshair.firing i:nth-child(1),.crosshair.firing i:nth-child(2){top:20px}.crosshair.firing i:nth-child(3),.crosshair.firing i:nth-child(4){left:20px}.crosshair.hit b{background:#fff;box-shadow:0 0 10px #fff}
.quick-nav{position:absolute;left:50%;bottom:25px;transform:translateX(-50%);height:42px;display:flex;padding:4px}.quick-nav button{min-width:57px;border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}.quick-nav button:last-child{border-right:0}.quick-nav kbd,.quick-nav span{display:block}.quick-nav kbd{font:600 8px Rajdhani;color:#d7e0dc}.quick-nav span{font-size:7px;margin-top:2px}.quick-nav button:hover{color:var(--acid);background:rgba(200,241,105,.05)}
.minimap{position:absolute;right:25px;top:91px;width:152px;height:152px;border-radius:50%;padding:8px;overflow:hidden}.minimap canvas{width:100%;height:100%;border-radius:50%;opacity:.9}.minimap>span{position:absolute;top:7px;left:50%;transform:translateX(-50%);font:700 8px Rajdhani;color:var(--acid)}
.toast-stack{position:absolute;right:25px;top:260px;width:280px;display:grid;gap:8px}.toast{padding:12px 15px;background:rgba(7,18,20,.91);border:1px solid var(--line);border-left:2px solid var(--acid);animation:toastIn .35s ease both}.toast strong,.toast span{display:block}.toast strong{font-size:10px;letter-spacing:.08em}.toast span{font-size:8px;color:var(--muted);margin-top:4px;line-height:1.5}@keyframes toastIn{from{opacity:0;transform:translateX(25px)}}
.subtitle{position:absolute;bottom:142px;left:50%;transform:translateX(-50%);max-width:min(600px,80vw);padding:9px 16px;background:rgba(4,10,11,.78);font-size:12px;line-height:1.6;text-align:center}.subtitle[hidden]{display:none}.subtitle b{color:var(--acid);margin-right:10px}.subtitle span{color:#d6dfdb}
.boss-bar{position:absolute;top:83px;left:50%;transform:translateX(-50%);width:min(500px,55vw);text-align:center}.boss-bar[hidden]{display:none}.boss-bar span{font-size:10px;letter-spacing:.2em}.boss-bar>i{display:block;height:5px;margin-top:7px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.12)}.boss-bar>i b{display:block;width:100%;height:100%;background:linear-gradient(90deg,#b83c35,var(--red));box-shadow:0 0 12px rgba(255,101,94,.5)}

/* Panels */
.panel-layer{position:absolute;inset:0;z-index:60;pointer-events:auto}.panel-layer[hidden]{display:none}.panel-backdrop{position:absolute;inset:0;background:rgba(2,7,8,.72);backdrop-filter:blur(6px)}.game-panel{position:absolute;right:0;top:0;bottom:0;width:min(610px,92vw);padding:calc(32px + var(--safe-top)) calc(30px + var(--safe-right)) 28px 30px;border-top:0;border-bottom:0;animation:panelIn .35s ease}@keyframes panelIn{from{transform:translateX(100%)}}.game-panel>header,.settings-card>header{display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px}.game-panel header p,.settings-card header p{font:600 9px Rajdhani;color:var(--acid);letter-spacing:.25em;margin:0 0 4px}.game-panel header h2,.settings-card header h2{margin:0;font-size:25px;letter-spacing:.08em}.game-panel header button,.settings-card header button{border:1px solid var(--line);background:transparent;width:35px;height:35px;font-size:25px;line-height:1;cursor:pointer;color:var(--muted)}.panel-content{height:calc(100% - 74px);overflow:auto;padding:20px 4px 50px 0;scrollbar-width:thin;scrollbar-color:var(--acid) transparent}.panel-section-title{font-size:9px;color:var(--muted);letter-spacing:.18em;margin:15px 0 10px}.mission-card,.build-card,.codex-entry{border:1px solid var(--line);background:rgba(255,255,255,.025);padding:15px;margin-bottom:9px;position:relative}.mission-card.active{border-color:rgba(200,241,105,.35);background:rgba(200,241,105,.045)}.mission-card small{color:var(--acid);font-size:8px;letter-spacing:.15em}.mission-card h3,.build-card h3,.codex-entry h3{margin:8px 0 5px;font-size:13px}.mission-card p,.build-card p,.codex-entry p{margin:0;color:var(--muted);font-size:10px;line-height:1.7}.mission-reward{margin-top:12px;color:var(--amber);font-size:8px}.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.build-card{margin:0;min-height:150px;display:flex;flex-direction:column}.build-card .build-icon{width:38px;height:38px;border:1px solid rgba(200,241,105,.2);display:grid;place-items:center;color:var(--acid);font-size:20px;background:rgba(200,241,105,.04)}.build-card button{margin-top:auto;border:1px solid rgba(200,241,105,.28);background:rgba(200,241,105,.08);color:var(--acid);font-size:9px;padding:8px;cursor:pointer}.build-card button:disabled{opacity:.35;cursor:not-allowed}.build-cost{font:600 9px Rajdhani;margin:8px 0;color:#b9c8c0}.codex-entry.locked{opacity:.38;filter:grayscale(1)}

/* Pause/settings/loading */
.pause-screen{display:grid;place-items:center;background:rgba(2,7,8,.72);backdrop-filter:blur(12px)}.pause-card{width:min(370px,88vw);padding:35px}.pause-card>p{color:var(--acid);font:600 9px Rajdhani;letter-spacing:.24em}.pause-card h2{font-size:32px;margin:5px 0 27px}.pause-card button{width:100%;margin-top:9px}.ghost-btn.danger:hover{color:var(--red);border-color:rgba(255,101,94,.5)}
.settings-screen{display:grid;place-items:center;background:rgba(2,7,8,.9);z-index:80}.settings-card{width:min(550px,91vw);padding:30px}.setting-row{padding:24px 0 18px;border-bottom:1px solid var(--line)}.setting-row label{display:flex;justify-content:space-between;font-size:11px}.setting-row output{color:var(--acid);font:600 12px Rajdhani}.setting-row input{width:100%;margin-top:16px;accent-color:var(--acid)}.setting-toggle{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:17px 0}.setting-toggle b,.setting-toggle small{display:block}.setting-toggle b{font-size:11px}.setting-toggle small{font-size:8px;color:var(--muted);margin-top:4px}.setting-toggle button{width:42px;height:21px;border:1px solid var(--line);background:#111e20;padding:2px;border-radius:12px;cursor:pointer}.setting-toggle button i{display:block;width:15px;height:15px;border-radius:50%;background:#71827a;transition:.2s}.setting-toggle button[aria-checked="true"]{background:rgba(200,241,105,.18);border-color:rgba(200,241,105,.5)}.setting-toggle button[aria-checked="true"] i{transform:translateX(20px);background:var(--acid)}.settings-note{font-size:8px;color:#61766d;line-height:1.6;margin-top:20px}.loading-screen{position:absolute;inset:0;z-index:100;background:#04090a;display:grid;place-items:center;align-content:center;gap:15px}.loading-screen[hidden]{display:none}.loading-mark{width:70px;height:70px;position:relative;border:1px solid rgba(200,241,105,.2);transform:rotate(45deg);display:grid;place-items:center}.loading-mark i{position:absolute;inset:8px;border:1px dashed var(--acid);animation:loadSpin 3s linear infinite}.loading-mark span{transform:rotate(-45deg);font:700 18px Rajdhani;color:var(--acid)}@keyframes loadSpin{to{transform:rotate(360deg)}}.loading-screen p{font-size:10px;color:var(--muted);letter-spacing:.18em}.loading-screen>b{display:block;width:160px;height:2px;background:rgba(255,255,255,.07);overflow:hidden}.loading-screen>b i{display:block;height:100%;background:var(--acid);animation:loading 1.4s ease infinite}@keyframes loading{0%{width:0;transform:translateX(0)}50%{width:75%}100%{width:30%;transform:translateX(160px)}}

#cinematic-bars{position:absolute;inset:0;z-index:30;pointer-events:none}#cinematic-bars i{position:absolute;left:0;right:0;height:0;background:#000;transition:height .7s ease}#cinematic-bars i:first-child{top:0}#cinematic-bars i:last-child{bottom:0}.app.cinematic #cinematic-bars i{height:9vh}#screen-fx{position:absolute;inset:0;z-index:9;pointer-events:none;box-shadow:inset 0 0 170px rgba(0,0,0,.62);transition:background .12s}#screen-fx.damage{background:radial-gradient(circle,transparent 35%,rgba(154,25,17,.55));}#screen-fx.scan{animation:scanFx .75s ease}@keyframes scanFx{0%{box-shadow:inset 0 0 170px rgba(0,0,0,.62),inset 0 0 0 0 rgba(121,216,208,.55)}100%{box-shadow:inset 0 0 170px rgba(0,0,0,.62),inset 0 0 0 140vmax rgba(121,216,208,0)}}

.mobile-controls{display:none}.move-stick{position:absolute;left:35px;bottom:40px;width:116px;height:116px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(5,15,16,.38);pointer-events:auto}.move-stick::before{content:"";position:absolute;inset:24px;border:1px solid rgba(200,241,105,.16);border-radius:50%}.move-stick i{position:absolute;width:46px;height:46px;border-radius:50%;background:rgba(200,241,105,.2);border:1px solid rgba(200,241,105,.38);left:34px;top:34px}.mobile-actions{position:absolute;right:22px;bottom:28px;width:180px;height:160px}.mobile-actions button{position:absolute;width:54px;height:54px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(6,18,19,.63);font-size:9px;backdrop-filter:blur(7px)}.mobile-actions [data-action="fire"]{right:0;bottom:10px;width:70px;height:70px;border-color:rgba(200,241,105,.4);color:var(--acid)}.mobile-actions [data-action="interact"]{right:72px;bottom:80px}.mobile-actions [data-action="dash"]{right:80px;bottom:12px}.mobile-actions [data-action="scan"]{right:8px;bottom:92px}.move-stick,.mobile-actions button,#game-canvas{touch-action:none}

@media (pointer: coarse), (max-width: 760px) {
  .mobile-controls{display:block}.weapon-hud{right:15px;bottom:205px;transform:scale(.8);transform-origin:right bottom}.vitals{left:15px;bottom:175px;width:220px}.quick-nav{display:none}.crosshair{display:none}.identity-panel{min-width:0;width:164px}.identity-panel span{display:none}.world-status{position:absolute;left:50%;transform:translateX(-50%);min-width:145px}.resource-strip{min-width:0;padding:0 8px;gap:7px}.resource span{display:none}.resource-icon{width:18px;height:18px}.objective-card{left:15px;top:82px;width:270px}.minimap{right:15px;top:80px;width:112px;height:112px}.toast-stack{right:15px;top:205px;width:230px}.top-hud{left:15px;right:15px;top:12px}.boot-screen{padding:25px}.boot-actions{width:min(300px,80vw)}.boot-screen::after{right:0}.game-panel{width:100%;padding:24px 18px}.build-grid{grid-template-columns:1fr}.subtitle{bottom:225px}.boss-bar{top:70px;width:70vw}
}

@media (max-width: 540px) {
  .world-status{display:none}.resource-strip{margin-left:auto}.objective-card{transform:scale(.88);transform-origin:left top}.minimap{width:90px;height:90px}.weapon-hud{display:none}.vitals{bottom:164px;transform:scale(.85);transform-origin:left bottom}.boot-copy h1{font-size:55px}.english-title{font-size:15px;letter-spacing:.38em}.tagline{font-size:11px}.boot-footer span:last-child{display:none}
}

/* Loadout and weapon manufacturing */
.weapon-art i { filter: drop-shadow(0 0 5px var(--weapon-color, var(--acid))); }
.armory-list { display: grid; gap: 11px; }
.armory-card { display: grid; grid-template-columns: 64px 1fr 118px; gap: 15px; align-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.025); padding: 16px; position: relative; }
.armory-card.active { border-color: rgba(200,241,105,.45); background: rgba(200,241,105,.045); }
.armory-card.locked { border-style: dashed; }
.weapon-emblem { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--item-color) 50%, transparent); background: color-mix(in srgb, var(--item-color) 8%, transparent); color: var(--item-color); font: 700 19px Rajdhani; box-shadow: inset 0 0 25px color-mix(in srgb, var(--item-color) 5%, transparent); }
.armory-copy small { color: var(--acid); font: 600 8px Rajdhani; letter-spacing: .15em; }
.armory-copy h3 { font-size: 13px; margin: 5px 0; }
.armory-copy p { font-size: 9px; color: var(--muted); line-height: 1.55; margin: 0; }
.weapon-stats { display: flex; gap: 12px; margin-top: 9px; }
.weapon-stats span { font-size: 8px; color: #71847b; }
.weapon-stats b { color: #d6e1db; margin-left: 3px; }
.ammo-readout { font: 600 9px Rajdhani; color: var(--amber); margin-top: 6px; }
.armory-actions { display: grid; gap: 7px; }
.armory-actions button { border: 1px solid rgba(200,241,105,.25); background: rgba(200,241,105,.07); color: var(--acid); font-size: 8px; padding: 8px; cursor: pointer; }
.armory-actions button:disabled { opacity: .32; cursor: not-allowed; }
.mobile-actions [data-action="switch"] { right: 138px; bottom: 86px; width: 46px; height: 46px; }
.field-event-detail { border: 1px solid rgba(246,182,78,.28); background: rgba(246,182,78,.035); padding: 22px; position: relative; overflow: hidden; }
.field-event-detail::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 42px, rgba(246,182,78,.025) 43px 44px); pointer-events: none; }
.field-event-detail .event-signal { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid rgba(246,182,78,.45); color: var(--amber); font: 700 22px Rajdhani; box-shadow: 0 0 30px rgba(246,182,78,.08), inset 0 0 20px rgba(246,182,78,.08); }
.field-event-detail p { color: #b8c4be; font-size: 11px; line-height: 1.8; margin: 18px 0 10px; max-width: 470px; }
.field-event-detail small { color: #7c8d84; font: 600 8px Rajdhani; letter-spacing: .12em; }
.event-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.event-choices button { min-height: 86px; padding: 15px; text-align: left; border: 1px solid var(--line); background: rgba(255,255,255,.025); cursor: pointer; }
.event-choices button:hover { border-color: rgba(246,182,78,.55); background: rgba(246,182,78,.055); }
.event-choices span,.event-choices small { display: block; }
.event-choices span { color: var(--amber); font-size: 12px; font-weight: 700; }
.event-choices small { color: var(--muted); font-size: 9px; line-height: 1.6; margin-top: 6px; }

@media (pointer: coarse), (max-width: 760px) {
  .armory-card { grid-template-columns: 48px 1fr; }
  .weapon-emblem { width: 44px; height: 44px; }
  .armory-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}

/* Settlement operations */
.settlement-overview { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); background: rgba(121,216,208,.035); }
.settlement-overview > div { padding: 12px 9px; border-right: 1px solid var(--line); min-width: 0; }
.settlement-overview > div:last-child { border-right: 0; }
.settlement-overview small,.settlement-overview strong { display: block; }
.settlement-overview small { color: var(--muted); font-size: 8px; }
.settlement-overview strong { color: var(--text); font: 700 16px Rajdhani; margin-top: 5px; }
.settlement-note { color: var(--acid); font: 600 9px Rajdhani; letter-spacing: .08em; padding: 11px 0 4px; }
.settlement-alert { display: grid; gap: 4px; border: 1px solid var(--line); padding: 10px 12px; margin: 7px 0 12px; background: rgba(255,255,255,.025); }
.settlement-alert strong { font-size: 10px; }
.settlement-alert span { color: var(--muted); font: 600 9px Rajdhani; }
.settlement-alert.ready { border-color: rgba(200,241,105,.28); }
.settlement-alert.ready strong { color: var(--acid); }
.settlement-alert.warning { border-color: rgba(246,182,78,.4); background: rgba(246,182,78,.045); }
.settlement-alert.warning strong { color: var(--amber); }
.resident-list { display: grid; gap: 8px; }
.resident-row { display: grid; grid-template-columns: 37px 1fr 125px; align-items: center; gap: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.025); padding: 10px; }
.resident-row.locked { opacity: .35; filter: grayscale(1); }
.resident-avatar { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--resident-color) 45%,transparent); color: var(--resident-color); font: 700 15px Rajdhani; background: color-mix(in srgb,var(--resident-color) 8%,transparent); font-style: normal; }
.resident-row strong,.resident-row small { display: block; }
.resident-row strong { font-size: 10px; }
.resident-row small { color: var(--muted); font-size: 8px; line-height: 1.45; margin-top: 3px; }
.resident-row .resident-status { color: #aebdb5; font: 600 8px Rajdhani; letter-spacing: .04em; }
.resident-row select { color: var(--text); background: #101f20; border: 1px solid var(--line); padding: 8px 5px; font-size: 9px; }
.resident-row select:focus { border-color: var(--acid); }
.tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.tech-card { border: 1px solid var(--line); background: rgba(255,255,255,.025); padding: 13px; min-height: 174px; display: flex; flex-direction: column; }
.tech-card.researched { border-color: rgba(200,241,105,.48); background: rgba(200,241,105,.045); }
.tech-card.locked { opacity: .42; }
.tech-card > i { width: 31px; height: 31px; display: grid; place-items: center; color: var(--cyan); border: 1px solid rgba(121,216,208,.25); font-style: normal; font-size: 16px; }
.tech-card > small { color: var(--acid); font: 600 8px Rajdhani; letter-spacing: .13em; margin-top: 9px; }
.tech-card h3 { margin: 4px 0; font-size: 12px; }
.tech-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.tech-card .build-cost { margin-top: auto; }
.tech-card button { border: 1px solid rgba(200,241,105,.25); background: rgba(200,241,105,.07); color: var(--acid); font-size: 8px; padding: 8px; cursor: pointer; }
.tech-card button:disabled { opacity: .4; cursor: not-allowed; }
.settlement-logs { border-top: 1px solid var(--line); color: var(--muted); font: 600 9px Rajdhani; }
.settlement-logs div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 8px 2px; }
.settlement-logs span { color: #aebdb5; }
.raid-badge { margin-left: 10px; font: 600 8px Rajdhani; font-style: normal; white-space: nowrap; }
.raid-badge.repelled { color: var(--acid); }
.raid-badge.breached { color: var(--amber); }

@media (max-width: 760px) {
  .settlement-overview { grid-template-columns: repeat(3,1fr); }
  .settlement-overview > div:nth-child(3) { border-right: 0; }
  .settlement-overview > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .resident-row { grid-template-columns: 37px 1fr; }
  .resident-row select { grid-column: 1 / -1; width: 100%; }
  .tech-grid { grid-template-columns: 1fr; }
}