*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:#070a10}body{font-family:Courier New,ui-monospace,monospace;color:#cfd4c8;-webkit-user-select:none;user-select:none;touch-action:none}#app{position:fixed;inset:0}#canvas-container,#canvas-container canvas{position:absolute;inset:0}#ui-root{position:absolute;inset:0;pointer-events:none}#ui-root>*{pointer-events:auto}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(ellipse at 50% 35%,#141e16eb,#050808f7);z-index:20;text-align:center;letter-spacing:.18em}.screen h1{font-size:clamp(34px,7vw,64px);letter-spacing:.28em;color:#d8d2bd;text-shadow:0 2px 12px rgba(0,0,0,.8);font-weight:700}.screen h2{font-size:18px;color:#9aa38c;letter-spacing:.3em}.screen .sub{font-size:13px;color:#7d8672;max-width:520px;line-height:1.8;letter-spacing:.08em}.roundel{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle,#7a3020 0 26%,#e8e4d0 26% 55%,#1f3a5f 55% 100%);box-shadow:0 0 0 5px #caa53f,0 6px 24px #0009}.btn{padding:13px 34px;border:1px solid #4c5844;border-radius:40px;background:linear-gradient(180deg,#2a3a2c,#17231a);color:#cfd8bd;letter-spacing:.3em;font-size:15px;text-transform:uppercase;transition:transform .08s ease,box-shadow .12s ease;box-shadow:0 4px 16px #00000080,inset 0 1px #ffffff14}.btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #3c6e3c59}.btn--primary{background:linear-gradient(180deg,#3c5c38,#1d3320);border-color:#6c8a58;color:#e6f0d4;font-size:18px;padding:16px 52px}.btn--ghost{opacity:.75;font-size:12px;padding:9px 22px}.btn:disabled{opacity:.4;cursor:default}.menu-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}.toggle-row{display:flex;gap:26px;font-size:12px;color:#8a947c}.toggle-row label{display:flex;gap:8px;align-items:center;cursor:pointer;letter-spacing:.2em}.mission-list{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:640px}.mission-chip{border:1px solid #3c4838;border-radius:6px;padding:8px 12px;font-size:11px;letter-spacing:.14em;color:#9aa88c;background:#141e1499}.mission-chip.unlocked:hover{border-color:#86a068;color:#d6e2be}.mission-chip.locked{opacity:.35;cursor:default}.mission-chip.current{border-color:#caa53f;color:#e8d9a0}.scores{width:min(400px,84vw);border:1px solid #35402f;border-radius:8px;overflow:hidden;background:#080e0ab8}.scores-head,.scores-row{display:grid;grid-template-columns:34px 1fr 90px;padding:7px 14px;font-size:12px;letter-spacing:.14em;text-align:left}.scores-head{background:#202b1e;color:#d8d2bd;font-weight:700}.scores-row{border-top:1px solid rgba(70,84,60,.35);color:#97a289}.scores-row .val{text-align:right}.scores-row.you{color:#e8d9a0}.scores-row input{background:#0006;border:1px solid #6a7a52;color:#e8d9a0;font:inherit;letter-spacing:inherit;text-transform:uppercase;padding:1px 6px;width:100%}.briefing-map{position:absolute;inset:0;opacity:.14;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 46px,rgba(150,170,140,.25) 46px 47px),repeating-linear-gradient(90deg,transparent 0 46px,rgba(150,170,140,.25) 46px 47px)}.briefing-year{font-size:clamp(40px,9vw,80px);color:#4c5844;letter-spacing:.4em}.briefing-upgrade{font-size:12px;color:#caa53f;letter-spacing:.3em}.load-bar{width:min(340px,70vw);height:2px;background:#2a3326}.load-bar i{display:block;height:100%;background:#b8c49a;width:0%;transition:width .3s ease}.load-status{font-size:11px;color:#77816b;letter-spacing:.34em}.hud{position:absolute;inset:0;pointer-events:none;z-index:10;display:none}.hud.visible{display:block}.hud-top{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:center;align-items:flex-start;gap:18px}.dial{width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 50% 42%,#1d251c 0 62%,#11170f 62% 100%);box-shadow:0 0 0 3px #2c3626,0 0 0 4px #0a0d08,0 6px 18px #0000008c;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;gap:1px}.dial .label{font-size:8px;letter-spacing:.3em;color:#6d7761}.dial .value{font-size:15px;font-weight:700;color:#d6dcc2;letter-spacing:.1em}.dial .value.warn{color:#d9b23a}.dial .value.crit{color:#e0452e;animation:blink .8s steps(2) infinite}.dial svg.ring{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);transform:rotate(-90deg)}.dial svg.ring circle{fill:none;stroke-width:3.4}.dial svg.ring .track{stroke:#78826940}.dial svg.ring .fill{stroke:#6c3;transition:stroke .2s}.radar{width:148px;height:148px;border-radius:50%;background:radial-gradient(circle,#10160f 0 70%,#0a0e08 70% 100%);box-shadow:0 0 0 3px #2c3626,0 0 0 5px #0a0d08,0 8px 22px #0009;position:relative}.radar.lock{box-shadow:0 0 0 3px #a03824,0 0 0 5px #0a0d08,0 0 22px #dc46288c}.radar svg{position:absolute;inset:0;width:100%;height:100%}.radar .nav{position:absolute;left:0;right:0;bottom:-68px;text-align:center;font-size:9px;color:#8f9a6f;letter-spacing:.2em;line-height:1.7}.special{position:absolute;inset:-9px;pointer-events:none}.special svg{width:100%;height:100%;transform:rotate(-90deg)}.special .track{fill:none;stroke:#7882694d;stroke-width:2.6}.special .fill{fill:none;stroke:#f0b01a;stroke-width:2.6}.special.ready .fill{stroke:#ffe044;filter:drop-shadow(0 0 7px #ffe044);animation:ring-breathe 1.2s ease infinite}.special.threat .fill{stroke:#e0452e;filter:drop-shadow(0 0 7px #e0452e);animation:ring-breathe .6s ease infinite}.special .count{position:absolute;left:50%;bottom:-30px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;font-size:19px;font-weight:700;color:#e8d9a0;line-height:1.1;text-shadow:0 0 8px rgba(0,0,0,.9);white-space:nowrap}.special.threat .count{color:#ff5a3c;animation:blink .7s steps(2) infinite}.special .count small{font-size:7px;letter-spacing:.2em;color:#9aa38c}.special.threat .count small{color:#d08a7a}@keyframes ring-breathe{50%{opacity:.45}}.boss-bar{position:absolute;top:244px;left:50%;transform:translate(-50%);width:min(430px,72vw);display:none}.boss-bar .name{font-size:10px;letter-spacing:.3em;color:#c8b08e;text-align:center;margin-bottom:4px}.boss-bar .track{height:4px;background:#5a281e66;border-radius:3px;overflow:hidden}.boss-bar .fill{height:100%;background:linear-gradient(90deg,#c23a20,#e06a3a);width:100%;transition:width .25s ease}.combo-chip{position:absolute;top:220px;left:50%;transform:translate(-50%);font-size:22px;font-weight:700;color:#ffe044;letter-spacing:.2em;text-shadow:0 0 14px rgba(255,200,40,.6);opacity:0;transition:opacity .3s ease,transform .2s ease}.combo-chip.on{opacity:1;transform:translate(-50%) scale(1.12)}.banner{position:absolute;top:30%;left:0;right:0;text-align:center;font-size:clamp(16px,3vw,26px);letter-spacing:.4em;color:#e6d8ac;text-shadow:0 2px 14px rgba(0,0,0,.8);opacity:0;transition:opacity .25s ease}.banner.on{opacity:1}.toast{position:absolute;bottom:17%;left:0;right:0;text-align:center;font-size:14px;letter-spacing:.34em;color:#b8e08c;text-shadow:0 1px 8px rgba(0,0,0,.9);opacity:0;transition:opacity .2s ease}.toast.on{opacity:1}.life-overlay{position:absolute;top:40%;left:0;right:0;text-align:center;display:none;color:#d8d2bd;letter-spacing:.3em}.life-overlay .big{font-size:24px;margin-bottom:8px}.life-overlay .small{font-size:13px;color:#98a288}@keyframes blink{50%{opacity:.25}}.tally{width:min(430px,86vw);font-size:13px;letter-spacing:.12em}.tally-row{display:grid;grid-template-columns:1fr 60px 90px;padding:5px 10px;color:#a7b195;text-align:left}.tally-row .pts{text-align:right;color:#d6dcc2}.tally-row.total{border-top:1px solid #46543c;font-weight:700;color:#e8d9a0;margin-top:6px}.star{color:#caa53f}.wingman-chip{position:absolute;bottom:16px;left:18px;font-size:11px;letter-spacing:.22em;color:#6d7761;text-shadow:0 1px 6px rgba(0,0,0,.8)}.wingman-chip.ready{color:#ffe044;animation:blink 1.6s steps(2) infinite}.wingman-chip.active{color:#b8e08c}.touch-hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:10px;color:#5d6653;letter-spacing:.2em}@media(max-width:720px){.dial{width:70px;height:70px}.radar{width:110px;height:110px}.dial .value{font-size:12px}.hud-top{gap:8px}}
