:root{--bg:#1b1d22;--panel:#23262d;--panel-2:#2d3139;--text:#e8e8e8;--muted:#9aa0a8;--accent:#6fd36f;--enemy:#ff7a5c;color:var(--text);font:13px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif}html,body{background:var(--bg);-webkit-user-select:none;user-select:none;height:100%;margin:0;overflow:hidden}body{flex-direction:column;display:flex}#app{flex:1;min-height:0;display:flex}#topbar{background:linear-gradient(#2a2e36,#1f2228);border-bottom:1px solid #000;flex:none;justify-content:space-between;align-items:center;gap:12px;height:38px;padding:0 10px;display:flex;box-shadow:0 1px #3b404a}#resources{align-items:center;gap:8px;display:flex}.res{background:#00000059;border-radius:13px;align-items:center;gap:7px;height:26px;padding:0 10px;display:flex;box-shadow:inset 0 0 0 1px #3b404a}.res i{border-radius:2px;width:10px;height:10px;transform:rotate(45deg)}.res .label{color:var(--muted);font-size:11px}.res .value{font:600 15px ui-monospace,Menlo,monospace}.res.credits i{background:#ffd75e}.res.credits .value{color:#ffd75e}.res.power i{background:#7fd4ff;border-radius:50%}.res.power .value{color:#7fd4ff;font-size:13px}.res.power .power-bar{background:#1b1d22;border-radius:2px;width:60px;height:4px;overflow:hidden}.res.power .power-fill{background:#7fd4ff;width:0;height:100%}.res.power.low{box-shadow:inset 0 0 0 1px var(--enemy)}.res.power.low .value{color:var(--enemy)}.res.power.low .power-fill{background:var(--enemy)}.tabs{background:var(--panel);z-index:1;border-bottom:1px solid #000;gap:2px;margin:-12px -12px 0;padding:8px 8px 0;display:flex;position:sticky;top:-12px}.tab{white-space:nowrap;background:var(--panel-2);color:var(--muted);cursor:pointer;border:1px solid #3b404a;border-bottom:none;border-radius:5px 5px 0 0;flex:auto;padding:7px 3px 6px;font:600 10.5px ui-sans-serif,system-ui,sans-serif;position:relative}.tab:hover{color:var(--text)}.tab.active{color:var(--text);background:#1f2228;box-shadow:inset 0 2px #ffd75e}.tab .badge{color:#1b1d22;background:var(--accent);border-radius:7px;padding:0 4px;font:700 10px ui-monospace,monospace;position:absolute;top:-6px;right:-3px}.tab .badge:empty{display:none}.pane{flex-direction:column;gap:10px;display:flex}#view{flex:1;min-width:0;position:relative}#game{touch-action:none;outline:none;width:100%;height:100%;display:block}#hud{pointer-events:none;white-space:pre;background:#00000073;border-radius:4px;padding:6px 10px;font:12px/1.4 ui-monospace,Menlo,monospace;position:absolute;top:8px;left:8px}#box{pointer-events:none;background:#7dff8a1f;border:1px solid #7dff8a;display:none;position:fixed}#sidebar{background:var(--panel);box-sizing:border-box;border-left:1px solid #000;flex-direction:column;flex:none;gap:8px;width:280px;padding:12px;display:flex;overflow-y:auto}.section-title{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:6px;font-size:11px}.producers{flex-direction:column;gap:10px;display:flex}.producer{background:#1f2228;border:1px solid #353a44;border-radius:6px;padding:8px}.producer.barracks{border-left:3px solid #8fae5b}.producer.factory{border-left:3px solid #d0a64a}.producer.build{border-left:3px solid #e2a72e}.producer.supplyCenter{border-left:3px solid #6f8fb8}.producer.airfield{border-left:3px solid #7fb6d8}.producer.strategyCenter,.producer.powerPlant{border-left:3px solid #b48ad8}.unit-btn.active{border-color:#ffd75e;box-shadow:inset 0 0 0 1px #ffd75e}.producer.lost{opacity:.45}.producer-head{justify-content:space-between;align-items:baseline;margin-bottom:6px;display:flex}.producer-name{text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:700}.producer-status{color:var(--muted);font-family:ui-monospace,Menlo,monospace;font-size:11px}.train{grid-template-columns:1fr 1fr;gap:6px;display:grid}.unit-btn{text-align:left;background:var(--panel-2);min-height:52px;color:var(--text);font:inherit;cursor:pointer;border:1px solid #3b404a;border-radius:4px;flex-direction:column;justify-content:space-between;gap:4px;padding:6px 8px;font-size:12px;display:flex;position:relative;overflow:hidden}.unit-btn .meta{justify-content:space-between;display:flex}.unit-btn:hover{border-color:#5b6270}.unit-btn.disabled{opacity:.5}.unit-btn.locked{opacity:.32}.unit-btn.locked .name:before{content:"🔒 ";font-size:10px}.unit-btn.done{opacity:.7;border-color:#4fe04f}.unit-btn.done .count{color:#4fe04f}.unit-btn .name{padding-right:12px;font-weight:600;line-height:1.2}.unit-btn .cost{color:#ffd75e;font-family:ui-monospace,Menlo,monospace}.unit-btn .key{color:var(--muted);font-size:11px}.unit-btn .count{color:var(--accent);font-weight:700;position:absolute;top:4px;right:6px}.unit-btn .bar{background:var(--accent);width:0;height:3px;position:absolute;bottom:0;left:0}.muted{color:var(--muted)}.enemy{color:var(--enemy)}.help-modal{z-index:20;background:#0000008c;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.help-modal.show{display:flex}.help-modal .box{background:var(--panel);border:1px solid #3b404a;border-radius:8px;max-width:min(520px,92vw);max-height:88vh;padding:20px 24px;overflow-y:auto}.help-modal h2{margin:0 0 12px;font-size:18px}.help-modal table{border-collapse:collapse;font-size:13px}.help-modal td{vertical-align:top;color:var(--muted);padding:4px 10px 4px 0}.help-modal td:first-child{color:var(--text);white-space:nowrap;font-weight:600}.help-modal button{font:inherit;color:#1b1d22;cursor:pointer;background:#ffd75e;border:0;border-radius:4px;margin-top:14px;padding:6px 16px;font-weight:600}.settings-modal .box{width:min(440px,92vw)}.settings-modal h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:16px 0 8px;font-size:13px}.settings-modal h2+h3{margin-top:4px}.settings-modal .presets{align-items:center;gap:6px;margin-bottom:8px;display:flex}.settings-modal button.preset{color:var(--text);background:#2a2e36;border:1px solid #3b404a;margin:0;padding:5px 12px}.settings-modal button.preset.on{color:#ffd75e;background:#6b5a1e;border-color:#ffd75e}.settings-modal .custom{color:var(--muted);font-size:12px}.settings-modal .row{justify-content:space-between;align-items:center;gap:12px;padding:5px 0;font-size:13px;display:flex}.settings-modal select{font:inherit;color:var(--text);background:#2a2e36;border:1px solid #3b404a;border-radius:4px;padding:3px 6px;font-size:12px}.settings-modal input[type=checkbox]{accent-color:#ffd75e;width:16px;height:16px}.settings-modal .hint,.settings-modal .about{color:var(--muted);margin:8px 0 0;font-size:12px;line-height:1.5}.settings-modal .contact{background:#2d2716;border:1px solid #ffd75e;border-radius:6px;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;display:flex}.settings-modal .contact strong{color:#ffd75e;font-size:14px;display:block}.settings-modal .contact span{color:var(--text);margin-top:2px;font-size:12px;display:block}.settings-modal .contact-btn{color:#1b1d22;white-space:nowrap;background:#ffd75e;border-radius:4px;flex:none;padding:8px 14px;font-size:13px;font-weight:700;text-decoration:none}.settings-modal .contact-btn:hover{background:#ffe58f}.gameover{background:#0000008c;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.gameover.show{display:flex}.gameover .box{background:var(--panel);text-align:center;border-radius:8px;padding:28px 48px}.gameover h1{margin:0 0 4px;font-size:40px}.gameover.won h1{color:var(--accent)}.gameover.lost h1{color:var(--enemy)}.gameover button{font:inherit;color:#1b1d22;cursor:pointer;background:#ffd75e;border:0;border-radius:4px;margin-top:12px;padding:8px 18px;font-weight:600}#toasts{pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:10px;left:50%;transform:translate(-50%)}.toast{background:#0009;border-radius:4px;padding:6px 14px;font-weight:600;transition:opacity .6s;animation:.2s ease-out toast-in}.toast.warn{color:#ffb19e;border:1px solid var(--enemy)}.toast.hide{opacity:0}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}}#buttons{gap:6px;display:flex}#buttons button{font:inherit;cursor:pointer;color:var(--text);background:#23262dd9;border:1px solid #3b404a;border-radius:4px;padding:5px 10px;font-size:12px}#buttons button:hover{border-color:#5b6270}#buttons button.dev.on{color:#ffd75e;background:#6b5a1e;border-color:#ffd75e}#buttons button.off{color:var(--muted);text-decoration:line-through}.minimap{cursor:crosshair;image-rendering:pixelated;border:2px solid #000;border-radius:3px;position:absolute;bottom:8px;left:8px;box-shadow:0 0 0 1px #3b404a}.gameover .stats{border-collapse:collapse;color:var(--muted);margin:10px auto 0}.gameover .stats td{text-align:left;padding:2px 10px}.gameover .stats td+td{color:var(--text);text-align:right;font-family:ui-monospace,Menlo,monospace;font-weight:600}.bottom-panel{pointer-events:auto;grid-template-columns:minmax(0,1fr) 210px;gap:8px;height:140px;display:grid;position:absolute;bottom:8px;right:8px}.bottom-panel>div{box-sizing:border-box;background:#1c1e24eb;border:1px solid #000;border-radius:6px;padding:8px;overflow:hidden;box-shadow:inset 0 0 0 1px #3b404a}.sel-info .muted{color:var(--muted)}.sel-info .enemy{color:var(--enemy)}.sel-info .grid{grid-template-columns:repeat(auto-fill,44px);gap:4px;display:grid}.sel-info .more{width:44px;height:52px;color:var(--muted);place-items:center;display:grid}.icon{cursor:pointer;box-sizing:border-box;background:linear-gradient(160deg, var(--team), var(--team-dark));border:1px solid #000;border-radius:4px;flex-direction:column;justify-content:space-between;width:44px;height:52px;display:flex;position:relative;box-shadow:inset 0 0 0 1px #ffffff2e}.icon:hover{box-shadow:inset 0 0 0 2px #ffd75e}.icon .label{text-align:center;text-shadow:0 1px 2px #000;padding-top:12px;font:700 12px/1 ui-sans-serif,system-ui,sans-serif}.icon.big{cursor:default;flex:none;width:92px;height:112px}.icon.big .label{padding-top:40px;font-size:22px}.icon.portrait{border-bottom:3px solid var(--team);background-position:top,50%;background-size:cover,cover}.icon.portrait.big{border-bottom-width:4px}.hpbar{background:#111;border-radius:2px;height:5px;margin:3px;overflow:hidden}.hpbar .fill{width:100%;height:100%}.fill.ok{background:#4fe04f}.fill.mid{background:#ffd23a}.fill.low{background:#ff4a35}.detail{gap:10px;height:100%;display:flex}.detail .stats{flex-direction:column;gap:3px;min-width:0;display:flex}.detail .title{font-size:14px;font-weight:700}.detail .hp{align-items:center;gap:8px;display:flex}.detail .hp .hpbar{width:140px;height:7px;margin:0}.detail .hptext{color:var(--muted);font:12px ui-monospace,Menlo,monospace}.detail .lines{color:#cfd3d9;font-size:12px;line-height:1.3}.detail .live{font-size:12px;line-height:1.3}.detail .passengers{grid-template-columns:repeat(4,34px);grid-auto-rows:34px;align-content:start;gap:3px;margin-left:auto;display:grid}.detail .passengers .icon{width:34px;height:34px}.cmd-card{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.cmd .cd{color:#ff9a6e;font:700 11px ui-monospace,monospace;position:absolute;bottom:2px;left:4px}.guard-on{color:#ffd75e}.cmd-card.empty .cmd{visibility:hidden}.cmd{background:var(--panel-2);color:var(--text);cursor:pointer;text-align:center;border:1px solid #000;border-radius:4px;padding:4px;font:600 11px/1.15 ui-sans-serif,system-ui,sans-serif;position:relative}.cmd:hover:not(:disabled){background:#3a404b}.cmd:disabled{opacity:.3;cursor:default}.cmd.active{background:#6b5a1e;box-shadow:inset 0 0 0 1px #ffd75e}.cmd kbd{color:#ffd75e;font:10px ui-monospace,monospace;position:absolute;bottom:2px;right:3px}.debug-modal{z-index:50;background:#0000008c;place-items:center;display:none;position:fixed;inset:0}.debug-modal.show{display:grid}.debug-box{background:var(--panel);border:1px solid #000;border-radius:8px;flex-direction:column;width:min(900px,92vw);height:min(620px,88vh);display:flex;overflow:hidden;box-shadow:0 10px 40px #0009}.debug-head{border-bottom:1px solid #000;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.debug-head .close{color:var(--muted);cursor:pointer;background:0 0;border:none;font-size:16px}.debug-body{flex:1;min-height:0;display:flex}.debug-list{border-right:1px solid #000;flex-direction:column;flex:none;gap:3px;width:170px;padding:8px;display:flex;overflow-y:auto}.debug-stage{flex:1;min-width:0;position:relative}.debug-stage canvas{touch-action:none;outline:none;width:100%;height:100%;display:block}.debug-hint{color:#0000008c;pointer-events:none;font-size:11px;position:absolute;bottom:6px;left:8px}.debug-foot{border-top:1px solid #000;gap:6px;padding:8px 12px;display:flex}.debug-foot .gap{flex:1}.debug-box button[data-unit],.debug-box button[data-anim],.debug-box button[data-team]{text-align:left;background:var(--panel-2);color:var(--text);font:inherit;cursor:pointer;border:1px solid #3b404a;border-radius:4px;padding:6px 10px}.debug-box button.on{color:#ffd75e;border-color:#ffd75e;box-shadow:inset 0 0 0 1px #ffd75e}