:root{--sys-bg: #04070f;--sys-panel: rgba(8, 20, 42, .92);--sys-panel-deep: rgba(4, 10, 24, .96);--sys-cyan: #4fd8ff;--sys-cyan-dim: #1d7fa8;--sys-cyan-glow: rgba(79, 216, 255, .55);--sys-text: #cfeeff;--sys-text-dim: #6fa8c4;--sys-gold: #ffd25e;--sys-danger: #ff5d6c;--sys-violet: #9a6bff;--hud-height: 34%;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background:var(--sys-bg);overflow:hidden;font-family:Avenir Next,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}#app{height:100%;display:flex;flex-direction:row;padding-top:var(--safe-top);padding-left:var(--safe-left);padding-right:var(--safe-right)}#battlefield{flex:1 1 auto;min-width:0;min-height:0;position:relative;background:#000}#battlefield canvas{display:block;image-rendering:pixelated}#system-hud{flex:0 0 236px;height:100%;background:linear-gradient(270deg,rgba(79,216,255,.06),transparent 20%),var(--sys-panel-deep);border-left:1px solid var(--sys-cyan-dim);box-shadow:-6px 0 24px #4fd8ff1a;padding:10px 10px calc(10px + var(--safe-bottom));display:flex;flex-direction:column;gap:8px;color:var(--sys-text);position:relative;z-index:10;overflow-y:auto}#system-hud .hud-bottom-row{margin-top:auto}#hud-strip{padding:8px 10px}#hud-strip .objective{font-size:12px;line-height:1.4;letter-spacing:.04em;text-transform:none;color:var(--sys-text);margin-bottom:6px}#hud-strip .strip-stats{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:14px}#hud-unit-card{display:none}#hud-unit-card.visible{display:flex}.hud-bottom-row [data-role=threat]{flex:0 0 44px;color:var(--sys-gold);border-color:#6a5a2a;text-shadow:0 0 6px rgba(255,210,94,.4)}.hud-bottom-row [data-role=threat].active{background:#ff5d6c2e;color:var(--sys-danger);border-color:#7a2a34}#end-turn-popup{position:absolute;left:50%;bottom:18px;transform:translate(-50%);z-index:46;padding:12px 26px;font-size:13px;animation:sys-notif-in .25s ease-out,sys-pulse 1.1s ease-in-out infinite}@media (orientation: portrait){#app{flex-direction:column}#system-hud{flex:0 0 var(--hud-height);height:auto;border-left:none;border-top:1px solid var(--sys-cyan-dim);box-shadow:0 -6px 24px #4fd8ff1f}#system-hud .hud-bottom-row{margin-top:0}}.sys-window{position:relative;background:var(--sys-panel);border:1px solid var(--sys-cyan-dim);box-shadow:inset 0 0 18px #4fd8ff12,0 0 10px #4fd8ff26;padding:8px 10px;border-radius:2px}.sys-window:before{content:"";position:absolute;inset:-1px;pointer-events:none;--c: linear-gradient(var(--sys-cyan), var(--sys-cyan));background:var(--c) top left / 9px 2px,var(--c) top left / 2px 9px,var(--c) top right / 9px 2px,var(--c) top right / 2px 9px,var(--c) bottom left / 9px 2px,var(--c) bottom left / 2px 9px,var(--c) bottom right / 9px 2px,var(--c) bottom right / 2px 9px;background-repeat:no-repeat;filter:drop-shadow(0 0 3px var(--sys-cyan-glow))}.sys-title{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sys-cyan);text-shadow:0 0 6px var(--sys-cyan-glow);display:flex;align-items:center;gap:6px}.sys-title:before{content:"◈";font-size:9px}.sys-label{font-size:11px;letter-spacing:.08em;color:var(--sys-text-dim);text-transform:uppercase}.sys-value{font-size:15px;font-weight:600;color:var(--sys-text)}.sys-value.gold{color:var(--sys-gold)}.sys-value.danger{color:var(--sys-danger)}.sys-value.violet{color:var(--sys-violet)}.sys-button{background:linear-gradient(180deg,#4fd8ff29,#4fd8ff0d);border:1px solid var(--sys-cyan-dim);color:var(--sys-cyan);font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:10px 14px;min-height:44px;border-radius:2px;cursor:pointer;text-shadow:0 0 6px var(--sys-cyan-glow);transition:background .15s,box-shadow .15s}.sys-button:active,.sys-button:hover{background:linear-gradient(180deg,#4fd8ff4d,#4fd8ff1a);box-shadow:0 0 12px #4fd8ff59}.sys-button:disabled{opacity:.35;cursor:default;box-shadow:none}.sys-button.danger{color:var(--sys-danger);border-color:#7a2a34;text-shadow:0 0 6px rgba(255,93,108,.5)}.sys-button.violet{color:var(--sys-violet);border-color:#4b3580;text-shadow:0 0 6px rgba(154,107,255,.5)}.hud-top-row{display:flex;gap:6px;align-items:stretch}.hud-top-row .sys-window{flex:1}#hud-status{display:flex;justify-content:space-between;align-items:center;gap:10px}#hud-status .stat{display:flex;flex-direction:column;align-items:center;min-width:44px}#hud-unit-card.visible{flex:0 0 auto;display:flex;gap:10px;align-items:flex-start}#hud-unit-card .portrait{width:44px;height:44px;border:1px solid var(--sys-cyan-dim);background:#060d1d;image-rendering:pixelated;flex:0 0 auto}#hud-unit-card .portrait canvas,#hud-unit-card .portrait img{width:100%;height:100%;image-rendering:pixelated}#hud-unit-card .info{flex:1;display:flex;flex-direction:column;gap:3px}#hud-unit-card .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 8px;margin-top:2px}.hud-bottom-row{display:flex;gap:6px}.hud-bottom-row .sys-button{flex:1}.hp-bar{height:5px;background:#0a1526;border:1px solid var(--sys-cyan-dim);position:relative}.hp-bar .fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--sys-cyan-dim),var(--sys-cyan));transform-origin:left}.hp-bar .fill.low{background:linear-gradient(90deg,#7a2a34,var(--sys-danger))}#sys-notifications{position:absolute;top:calc(var(--safe-top) + 12px);left:50%;transform:translate(-50%);width:min(340px,86vw);display:flex;flex-direction:column;gap:8px;z-index:50;pointer-events:none}.sys-notification{background:var(--sys-panel-deep);border:1px solid var(--sys-cyan);box-shadow:0 0 20px #4fd8ff59,inset 0 0 24px #4fd8ff14;padding:10px 14px;text-align:center;animation:sys-notif-in .25s ease-out;border-radius:2px}.sys-notification .head{font-size:11px;letter-spacing:.3em;color:var(--sys-cyan);text-shadow:0 0 8px var(--sys-cyan-glow);margin-bottom:4px}.sys-notification .body{font-size:15px;color:var(--sys-text)}.sys-notification.fade-out{animation:sys-notif-out .3s ease-in forwards}@keyframes sys-notif-in{0%{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes sys-notif-out{to{opacity:0;transform:translateY(-8px)}}.power-buttons{display:flex;flex-direction:column;gap:6px}.power-buttons:empty{display:none}.power-buttons .sys-button{padding:8px;font-size:10px}#engagement{position:absolute;inset:0;z-index:52;display:flex;align-items:center;justify-content:center;background:#02040ab8;animation:sys-notif-in .2s ease-out}#engagement.closing{opacity:0;transition:opacity .25s}#engagement .arena{display:flex;align-items:center;gap:26px;padding:20px 30px}#engagement .fighter{width:150px;text-align:center;transition:transform .12s ease-out}#engagement .fighter .stage{position:relative;height:84px;display:flex;align-items:flex-end;justify-content:center}#engagement .fighter img{width:64px;height:64px;image-rendering:pixelated}#engagement .fighter .stage img+img{position:absolute;opacity:.65}#engagement .fighter.swarm .stage img:nth-child(2){transform:translate(-26px,-8px) scale(.75)}#engagement .fighter.swarm .stage img:nth-child(3){transform:translate(26px,-5px) scale(.75)}#engagement .fighter.lunge-right{transform:translate(16px)}#engagement .fighter.lunge-left{transform:translate(-16px)}#engagement .fighter.hit img{filter:brightness(3) saturate(0)}#engagement .fighter .fname{font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin:6px 0 4px;color:var(--sys-text)}#engagement .hp-bar{height:7px}#engagement .hp-bar .fill{transition:transform .35s ease-out}#engagement .vs{font-size:20px;font-weight:800;color:var(--sys-cyan);text-shadow:0 0 12px var(--sys-cyan-glow)}#engagement .stance{position:absolute;top:14px;left:50%;transform:translate(-50%);font-size:11px;letter-spacing:.28em;color:var(--sys-danger);text-shadow:0 0 10px rgba(255,93,108,.6)}#engagement .dmg{position:absolute;top:-6px;left:50%;transform:translate(-50%);font-size:22px;font-weight:800;color:var(--sys-danger);text-shadow:0 0 8px rgba(255,93,108,.7);animation:sys-notif-in .2s ease-out}#roster-overlay{position:absolute;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;background:#02040ab8}#roster-overlay .panel{width:min(340px,88%);max-height:80%;display:flex;flex-direction:column;gap:8px;padding:14px}#roster-overlay .roster-list{overflow-y:auto;display:flex;flex-direction:column;gap:6px}.roster-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid rgba(79,216,255,.15);background:#08142a99}.roster-row img{width:32px;height:32px;image-rendering:pixelated}.roster-row .info{flex:1}.roster-row .status{font-size:9px}.roster-row .elite{color:var(--sys-gold);font-size:9px;letter-spacing:.15em;text-shadow:0 0 6px rgba(255,210,94,.5)}.power-flash{position:absolute;inset:0;z-index:45;pointer-events:none;background:radial-gradient(circle,rgba(154,107,255,.45),rgba(154,107,255,.08) 65%,transparent);animation:power-flash-anim .8s ease-out forwards}@keyframes power-flash-anim{0%{opacity:0}25%{opacity:1}to{opacity:0}}.sys-button.pulse{animation:sys-pulse 1.1s ease-in-out infinite}@keyframes sys-pulse{0%,to{box-shadow:0 0 4px #4fd8ff40}50%{box-shadow:0 0 22px #4fd8ffbf,inset 0 0 12px #4fd8ff33}}#outcome-overlay{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#02040ac7;animation:sys-notif-in .35s ease-out}#outcome-overlay .panel{text-align:center;padding:30px 38px;width:min(460px,86vw)}#outcome-overlay .head{font-size:10px;letter-spacing:.3em;color:var(--sys-cyan);text-shadow:0 0 8px var(--sys-cyan-glow)}#outcome-overlay .title{font-size:30px;font-weight:800;letter-spacing:.12em;margin:12px 0 6px}#outcome-overlay .title.win{color:var(--sys-cyan);text-shadow:0 0 14px var(--sys-cyan-glow)}#outcome-overlay .title.lose{color:var(--sys-danger);text-shadow:0 0 14px rgba(255,93,108,.6)}#outcome-overlay .sub{font-size:15px;color:var(--sys-text-dim);margin-bottom:18px}#outcome-overlay .sys-button{width:100%;padding:14px;font-size:13px}#app.cinematic #system-hud,#app.cinematic #end-turn-popup,#app.cinematic #sys-notifications{display:none!important}#primer-overlay{position:fixed;inset:0;z-index:120;display:flex;background:#02040af5}#primer-overlay .panel{width:100%;height:100%;padding:calc(var(--safe-top) + 26px) 22px calc(var(--safe-bottom) + 18px);display:flex;flex-direction:column;gap:18px;color:var(--sys-text);font-family:Avenir Next,Segoe UI,system-ui,sans-serif}#primer-overlay .sys-title{font-size:15px;flex-shrink:0}#primer-overlay .primer-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:20px;font-size:17px;line-height:1.65}#primer-overlay .primer-list b{color:var(--sys-cyan);letter-spacing:.08em}#primer-overlay .sys-button{flex-shrink:0;width:100%;padding:17px;font-size:15px}#hud-forecast{margin-top:4px;padding:6px 8px;border:1px solid #7a2a34;background:#ff5d6c12;font-size:13px}.scene-backdrop{position:absolute;inset:0;z-index:56;background:#010208;display:flex;align-items:center;justify-content:center;transition:opacity .65s ease}.scene-backdrop.fade-out{opacity:0}.scene-card{text-align:center;padding:0 24px;animation:scene-card-in .9s ease-out;transition:opacity .45s ease}.scene-card.fade-out{opacity:0}.scene-subtitle{font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--sys-text-dim)}.scene-rule{width:120px;height:1px;margin:12px auto;background:linear-gradient(90deg,transparent,var(--sys-cyan),transparent);box-shadow:0 0 8px var(--sys-cyan-glow)}.scene-title{font-size:32px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--sys-cyan);text-shadow:0 0 16px var(--sys-cyan-glow),0 0 46px rgba(79,216,255,.25)}@keyframes scene-card-in{0%{opacity:0;transform:translateY(8px);letter-spacing:.3em}to{opacity:1;transform:translateY(0)}}#dialogue-overlay{position:absolute;inset:0;z-index:58;display:flex;align-items:flex-end;padding:12px;background:linear-gradient(transparent 55%,#02040ad9)}.dialogue-box{width:100%;padding:12px 14px;min-height:96px;cursor:pointer}.dialogue-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}.dialogue-head .portrait{width:36px;height:36px;image-rendering:pixelated;border:1px solid var(--sys-cyan-dim);background:#060d1d}.dialogue-head .speaker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sys-text)}.dialogue-head .speaker.system{color:var(--sys-cyan);text-shadow:0 0 8px var(--sys-cyan-glow)}.dialogue-box .text{position:relative;font-size:15px;line-height:1.55;color:var(--sys-text);min-height:48px}.dialogue-box .text .ghost{visibility:hidden}.dialogue-box .text .typed{position:absolute;inset:0}.dialogue-footer{display:flex;justify-content:flex-end;align-items:center;min-height:52px;margin-top:8px}.dialogue-next{min-width:120px;padding:10px 18px;font-size:12px}.dialogue-box.narration .dialogue-head{display:none}.dialogue-box.narration .text{font-style:italic;text-align:center;color:var(--sys-text-dim);padding:12px 8px 4px}.dialogue-box .choice-button{display:block;width:100%;padding:12px;font-size:14px;animation:sys-pulse 1.4s infinite}#screen-root{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at 50% 30%,rgba(79,216,255,.06),transparent 60%),radial-gradient(ellipse at 50% 110%,rgba(154,107,255,.1),transparent 55%),var(--sys-bg);overflow-y:auto;color:var(--sys-text);font-family:Avenir Next,Segoe UI,system-ui,sans-serif}.screen{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:calc(var(--safe-top) + 24px) 18px calc(var(--safe-bottom) + 24px)}.title-screen{justify-content:center;text-align:center;gap:10px}.title-emblem{font-size:42px;color:var(--sys-violet);text-shadow:0 0 24px rgba(154,107,255,.8);animation:sys-pulse 2s infinite}.title-screen h1{font-size:52px;font-weight:800;letter-spacing:.22em;line-height:1.1;color:var(--sys-cyan);text-shadow:0 0 18px var(--sys-cyan-glow),0 0 60px rgba(79,216,255,.3)}.title-screen .tagline{color:var(--sys-text-dim);letter-spacing:.3em;text-transform:uppercase;font-size:11px;margin-bottom:26px}.title-buttons{display:flex;flex-direction:column;gap:10px;width:min(260px,80vw)}.title-buttons .sys-button{padding:13px;font-size:13px}.dev-links{margin-top:30px}.dev-links a{color:#2d4a5e;font-size:10px;letter-spacing:.1em;text-decoration:none}.select-screen{align-items:stretch;gap:8px;max-width:480px;margin:0 auto;width:100%}.select-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px}.mission-list{display:flex;flex-direction:column;gap:10px}.mission-card{text-align:left;padding:12px 14px;cursor:pointer;color:var(--sys-text);font-family:inherit;transition:box-shadow .15s}.mission-card:not(.locked):hover{box-shadow:0 0 16px #4fd8ff4d}.mission-card .rank-label{font-size:10px;letter-spacing:.24em;color:var(--sys-cyan);text-shadow:0 0 6px var(--sys-cyan-glow);margin-bottom:4px}.mission-card.done .rank-label{color:var(--sys-gold);text-shadow:0 0 6px rgba(255,210,94,.5)}.mission-card .mission-title{font-size:17px;font-weight:700;margin-bottom:3px}.mission-card .mission-blurb{font-size:12px;color:var(--sys-text-dim)}.mission-card.locked{opacity:.45;cursor:default}#action-menu{position:absolute;z-index:40;display:flex;flex-direction:column;gap:4px;min-width:110px}#action-menu{min-width:150px}#action-menu .sys-button{padding:12px 14px;font-size:12px;text-align:left;background:linear-gradient(180deg,#4fd8ff29,#4fd8ff0d),#081428;box-shadow:0 4px 18px #000000a6,0 0 10px #4fd8ff2e}#action-menu .sys-button:active,#action-menu .sys-button:hover{background:linear-gradient(180deg,#4fd8ff4d,#4fd8ff1a),#081428}#app.cinematic #dialogue-overlay{align-items:center;padding:24px;background:transparent}#app.cinematic .dialogue-box{max-width:760px;margin:0 auto;padding:28px 34px;min-height:150px}#app.cinematic .dialogue-box .text{font-size:21px;line-height:1.65;min-height:70px}#app.cinematic .dialogue-box.narration .text{font-size:23px}#app.cinematic .dialogue-head .speaker{font-size:16px}#app.cinematic .dialogue-head .portrait{width:56px;height:56px}#app.cinematic .dialogue-box .choice-button{font-size:16px;padding:18px}#app.cinematic .dialogue-next{font-size:14px;padding:14px 26px;min-width:160px}#app.cinematic .dialogue-footer{min-height:60px}