:root{color-scheme:dark;font-family:Arial Narrow,Roboto Condensed,Helvetica Neue,Arial,sans-serif;--ink: #101511;--panel: rgba(18, 23, 18, .94);--panel-soft: rgba(24, 30, 23, .84);--line: rgba(204, 207, 185, .22);--line-strong: rgba(204, 207, 185, .48);--paper: #e2e0d0;--muted: #9da092;--olive: #737858;--olive-bright: #9ba277;--brass: #b7945d;--rust: #b45f43;--allies: #aab8a9;--axis: #777c72;--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink)}body{color:var(--paper);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}[hidden]{display:none!important}button,input,select{font:inherit}button{color:inherit}#world{position:fixed;inset:0;display:block;width:100%;height:100%;outline:0}#app:before{position:fixed;z-index:2;inset:0;pointer-events:none;content:"";background:linear-gradient(90deg,rgba(6,9,6,.5),transparent 28%,transparent 70%,rgba(6,9,6,.35)),repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px);mix-blend-mode:multiply}.topbar{position:fixed;z-index:20;top:0;left:0;right:0;height:66px;padding:10px calc(22px + var(--safe-right)) 10px calc(22px + var(--safe-left));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0c100ce0,#0c100c2e);pointer-events:none}.brand{display:flex;align-items:center;gap:12px;color:var(--paper);text-decoration:none;pointer-events:auto}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--brass);color:var(--brass);font-size:10px;font-weight:900;letter-spacing:.16em;transform:rotate(45deg)}.brand-mark:first-line{transform:rotate(-45deg)}.brand>span:last-child{display:grid;gap:2px}.brand strong{font-family:Georgia,Times New Roman,serif;font-size:15px;letter-spacing:.15em}.brand small,.net-state,.eyebrow,label,legend{font-size:9px;letter-spacing:.18em;font-weight:800}.brand small{color:var(--muted)}.net-state{display:flex;align-items:center;gap:8px;color:var(--muted)}.net-lamp{width:7px;height:7px;border-radius:50%;border:1px solid currentColor;background:transparent}.net-state[data-state=connected]{color:#b6c99f}.net-state[data-state=connected] .net-lamp{background:#8fa770;box-shadow:0 0 10px #8fa770}.net-state[data-state=connecting] .net-lamp{background:var(--brass);animation:blink .8s steps(2) infinite}.net-state[data-state=error]{color:#d88365}@keyframes blink{50%{opacity:.25}}.screen{position:fixed;z-index:10;inset:66px 0 0}.globe-screen{pointer-events:none}.theatre-copy{position:absolute;left:max(5vw,calc(24px + var(--safe-left)));top:50%;width:min(390px,34vw);transform:translateY(-48%);pointer-events:none}.eyebrow{margin:0 0 14px;color:var(--brass)}.theatre-copy h1{margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(36px,5.5vw,78px);font-weight:400;line-height:.94;letter-spacing:-.045em;text-wrap:balance}.lede{max-width:370px;margin:22px 0;color:#b4b5aa;font-family:Georgia,Times New Roman,serif;font-size:clamp(13px,1.35vw,17px);line-height:1.55}.front-key{width:min(350px,100%);min-height:66px;padding:12px 16px;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:13px;color:var(--paper);border:1px solid var(--line-strong);border-left:3px solid var(--rust);background:#141914c7;text-align:left;cursor:pointer;pointer-events:auto;transition:border-color .18s,background .18s,transform .18s}.front-key:hover,.front-key:focus-visible{border-color:var(--brass);background:#1d231bf0;transform:translate(4px);outline:none}.front-key span:nth-child(2){display:grid;gap:4px}.front-key small{color:var(--muted);font-size:8px;letter-spacing:.16em}.front-key strong{font-size:13px;letter-spacing:.08em}.pulse{position:relative;width:11px;height:11px;margin:auto;border-radius:50%;background:var(--rust);box-shadow:0 0 0 6px #b45f432e}.pulse:after{position:absolute;inset:-7px;content:"";border:1px solid var(--rust);border-radius:50%;animation:pulse 1.8s ease-out infinite}@keyframes pulse{to{opacity:0;transform:scale(1.8)}}.globe-hint{margin:12px 0 0;color:#747a70;font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.mission-panel{position:absolute;top:0;right:0;bottom:0;width:min(520px,46vw);padding:32px max(34px,calc(24px + var(--safe-right))) 28px 34px;overflow-y:auto;border-left:1px solid var(--line-strong);background:linear-gradient(#131812f7,#0f140ff7),repeating-linear-gradient(135deg,transparent 0 8px,rgba(255,255,255,.02) 8px 9px);box-shadow:-28px 0 80px #0006;transform:translate(104%);transition:transform .42s cubic-bezier(.2,.76,.25,1);pointer-events:auto}.mission-panel.open{transform:none}.panel-close{position:absolute;top:16px;right:max(18px,var(--safe-right));width:34px;height:34px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:24px;cursor:pointer}.mission-panel h2{margin:0 0 14px;font-family:Georgia,Times New Roman,serif;font-size:clamp(28px,3.2vw,46px);font-weight:400;line-height:1}.front-line{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.12em}.front-line b{height:1px;background:linear-gradient(90deg,var(--allies),var(--rust),var(--axis))}.briefing{margin:15px 0 18px;color:#b8b9ad;font-family:Georgia,Times New Roman,serif;font-size:13px;line-height:1.48}.identity-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:10px}label{display:grid;gap:6px;color:var(--muted)}input,select{width:100%;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:0;outline:none;background:#111610;color:var(--paper);font-size:12px;font-weight:800;letter-spacing:.08em}input:focus,select:focus{border-color:var(--brass)}.role-fieldset{min-width:0;margin:17px 0 14px;padding:0;border:0}legend{margin-bottom:8px;color:var(--muted)}.roles{display:grid;grid-template-columns:1fr 1fr;gap:7px}.role-card{position:relative;min-width:0;min-height:92px;padding:9px;display:grid;grid-template-columns:44px 1fr;gap:9px;border:1px solid var(--line);background:#0a0e0a99;text-align:left;cursor:pointer}.role-card:hover:not(:disabled),.role-card:focus-visible{border-color:var(--olive-bright);outline:none}.role-card.selected{border-color:var(--brass);background:#45483173}.role-card.locked{opacity:.45;cursor:not-allowed}.role-copy{min-width:0;display:grid;align-content:start}.role-copy small{color:var(--brass);font-size:7px;font-weight:900;letter-spacing:.12em}.role-copy strong{margin:3px 0;font-family:Georgia,Times New Roman,serif;font-size:13px}.role-copy em{color:var(--muted);font-size:8px;font-style:normal;line-height:1.3}.role-state{grid-column:1 / -1;padding-top:6px;border-top:1px solid var(--line);color:var(--olive-bright);font-size:7px;font-weight:900;letter-spacing:.14em}.locked .role-state{color:#a27d6b}.role-silhouette{position:relative;width:42px;height:42px;display:block;border:1px solid var(--line);background:#181e16}.role-silhouette:before,.role-silhouette:after{position:absolute;content:"";background:#8e947c}.role-silhouette[data-role=infantry]:before{top:8px;left:17px;width:8px;height:23px;box-shadow:-5px 18px 0 -2px #8e947c,5px 18px 0 -2px #8e947c}.role-silhouette[data-role=infantry]:after{top:5px;left:16px;width:10px;height:8px}.role-silhouette[data-role=tank]:before{top:20px;left:5px;width:32px;height:12px}.role-silhouette[data-role=tank]:after{top:14px;left:14px;width:16px;height:8px;box-shadow:14px 2px 0 -3px #8e947c}.role-silhouette[data-role=fighter]:before,.role-silhouette[data-role=bomber]:before{top:20px;left:4px;width:34px;height:6px}.role-silhouette[data-role=fighter]:after,.role-silhouette[data-role=bomber]:after{top:10px;left:18px;width:7px;height:27px}.role-silhouette[data-role=bomber]:before{height:9px}.deploy-button{width:100%;min-height:52px;padding:10px 16px;display:grid;place-items:center;gap:3px;border:1px solid #b7a077;background:#6c6f4c;color:#f4f0df;font-weight:900;letter-spacing:.12em;cursor:pointer}.deploy-button:hover,.deploy-button:focus-visible{background:#7c8059;outline:2px solid rgba(183,160,119,.25);outline-offset:2px}.deploy-button small{color:#d2d0bf;font-size:7px;letter-spacing:.16em}.queue-screen,.result-screen{display:grid;place-items:center;padding:28px;background:#080b0899;backdrop-filter:blur(6px)}.queue-card,.result-card{width:min(520px,90vw);padding:34px;border:1px solid var(--line-strong);border-top:3px solid var(--brass);background:var(--panel);box-shadow:0 24px 80px #00000080;text-align:center}.queue-card h2,.result-card h2{margin:4px 0 12px;font-family:Georgia,Times New Roman,serif;font-size:clamp(27px,4vw,43px);font-weight:400}.queue-card>p:not(.eyebrow,.integrity-note),.result-card>p:not(.eyebrow){color:var(--muted);font-family:Georgia,Times New Roman,serif;line-height:1.5}.loader{width:52px;height:52px;margin:0 auto 18px;border:1px solid var(--line-strong);border-top:3px solid var(--brass);border-radius:50%;animation:rotate 1.4s linear infinite}@keyframes rotate{to{transform:rotate(360deg)}}.roster-meter{width:180px;margin:20px auto 12px;padding:12px;display:grid;border:1px solid var(--line)}.roster-meter span{font-family:Georgia,Times New Roman,serif;font-size:35px}.roster-meter small{color:var(--muted);font-size:7px;font-weight:900;letter-spacing:.13em}.integrity-note{margin:16px 0;padding:12px;border-left:2px solid var(--brass);background:#b7945d14;color:#bcb9aa;font-size:10px;line-height:1.5;text-align:left}.text-button{border:0;border-bottom:1px solid var(--muted);background:transparent;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.14em;cursor:pointer}.battle-hud{position:fixed;z-index:21;top:75px;left:max(18px,var(--safe-left));right:max(18px,var(--safe-right));display:grid;grid-template-columns:210px 1fr 210px;align-items:start;pointer-events:none}.hud-block{padding:9px 12px;display:grid;gap:3px;border-left:2px solid var(--brass);background:#0d110dbd;backdrop-filter:blur(5px)}.hud-block small{color:var(--muted);font-size:7px;font-weight:900;letter-spacing:.14em}.hud-block strong{font-family:Georgia,Times New Roman,serif;font-size:13px}.hud-block span{color:#c1c2b7;font-size:9px;font-weight:800;letter-spacing:.12em}.role-hud{justify-self:end;min-width:200px}.score-line{justify-self:center;min-width:min(42vw,440px);display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;color:#c8c9bd;font-size:11px;font-weight:900;letter-spacing:.13em;text-align:right}.score-line i{height:2px;margin:0 10px;background:linear-gradient(90deg,var(--allies),var(--rust),var(--axis))}.score-line .axis{text-align:left}.score-line b{margin:0 8px;color:var(--paper);font-family:Georgia,Times New Roman,serif;font-size:19px}.cloud-warning{grid-column:2;justify-self:center;margin-top:14px;padding:9px 14px;display:grid;grid-template-columns:auto auto;gap:1px 8px;border:1px solid rgba(227,229,220,.5);background:#5e6965c2;backdrop-filter:blur(8px)}.cloud-warning span{grid-row:1 / 3;align-self:center;font-size:25px}.cloud-warning strong{font-size:9px;letter-spacing:.13em}.cloud-warning small{color:#d4d7d1;font-size:7px;letter-spacing:.1em}body.inside-cloud:after{position:fixed;z-index:7;inset:0;content:"";pointer-events:none;background:radial-gradient(circle,#d7ddd814,#b9c2be52);backdrop-filter:blur(2px) saturate(.7)}.controls{position:fixed;z-index:30;left:calc(18px + var(--safe-left));right:calc(18px + var(--safe-right));bottom:calc(14px + var(--safe-bottom));display:flex;align-items:end;justify-content:space-between;pointer-events:none}.move-pad{width:156px;height:108px;display:grid;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(2,50px);gap:4px}.move-pad button:nth-child(1){grid-column:2}.move-pad button:nth-child(2){grid-column:1;grid-row:2}.move-pad button:nth-child(3){grid-column:2;grid-row:2}.move-pad button:nth-child(4){grid-column:3;grid-row:2}.controls button{border:1px solid rgba(225,225,209,.35);background:#151b14a8;color:#efeeddd1;backdrop-filter:blur(5px);pointer-events:auto;touch-action:none}.controls button.pressed{border-color:var(--brass);background:#70714be0;transform:translateY(2px)}.action-pad{display:flex;align-items:end;gap:9px}.action-pad button{width:70px;height:70px;display:grid;place-items:center;align-content:center;border-radius:50%}.action-pad .fire{width:88px;height:88px;border-color:#c370509e;background:#592d20b3}.action-pad span{font-size:23px}.action-pad small{margin-top:3px;font-size:7px;font-weight:900;letter-spacing:.12em}.result-screen{position:fixed;z-index:40;inset:0}.result-card .deploy-button{margin-top:22px}.rotate-notice{display:none}noscript{position:fixed;z-index:100;inset:0;padding:40px;display:grid;place-items:center;background:var(--ink)}@media(max-width:820px)and (orientation:landscape){.topbar{height:52px;padding-top:6px;padding-bottom:6px}.brand-mark{width:32px;height:32px}.brand strong{font-size:11px}.brand small{display:none}.screen{inset:52px 0 0}.theatre-copy{left:max(3vw,calc(14px + var(--safe-left)));width:37vw}.theatre-copy h1{font-size:clamp(28px,6.2vw,48px)}.lede{margin:12px 0;font-size:10px;line-height:1.4}.front-key{min-height:51px;padding:8px 10px}.globe-hint{display:none}.mission-panel{width:58vw;padding:18px calc(18px + var(--safe-right)) 18px 22px}.mission-panel h2{font-size:27px}.briefing{margin:8px 0 10px;font-size:10px}input,select{height:33px}.role-fieldset{margin:10px 0}.role-card{min-height:66px;padding:6px;grid-template-columns:31px 1fr;gap:6px}.role-silhouette{width:30px;height:30px;transform:scale(.72);transform-origin:top left}.role-copy em{display:none}.role-state{padding-top:3px}.deploy-button{min-height:40px}.battle-hud{top:58px;grid-template-columns:150px 1fr 150px}.hud-block{padding:6px 8px}.score-line{min-width:35vw}.controls{bottom:calc(7px + var(--safe-bottom))}.move-pad{width:126px;height:86px;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(2,40px);gap:3px}.action-pad button{width:56px;height:56px}.action-pad .fire{width:70px;height:70px}}@media(orientation:portrait)and (max-width:900px){.rotate-notice{position:fixed;z-index:100;inset:0;padding:36px;display:grid;place-content:center;gap:9px;background:#101511;text-align:center}.rotate-notice span{color:var(--brass);font-size:45px}.rotate-notice strong{font-family:Georgia,Times New Roman,serif;font-size:20px}.rotate-notice small{color:var(--muted)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}