:root{color-scheme:dark;--bg: #0b1220;--panel: rgba(15, 23, 42, .92);--line: #1e293b;--text: #e2e8f0;--muted: #94a3b8;--accent: #5eead4;--warn: #fbbf24;--danger: #f87171;--jslc: #0038B8;--aoi: #ef4444;--penguins: #e2e8f0;--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);--hud-scale: 1;font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);touch-action:none;user-select:none;-webkit-user-select:none}#app{position:relative;width:100%;height:100%}#game{display:block;width:100%;height:100%;cursor:crosshair;background:#0f172a}.hud{pointer-events:none;position:absolute;inset:0;font-size:calc(14px * var(--hud-scale))}.hud button,.hud select,.hud .order-btn,.hud .panel-block,.hud .topbar,.hud .bottom-bar,.hud .minimap-wrap,.hud .modal{pointer-events:auto}.topbar{position:absolute;top:calc(8px + var(--safe-top));left:calc(8px + var(--safe-left));right:calc(8px + var(--safe-right));display:flex;gap:12px;align-items:center;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(8px)}.brand{display:flex;flex-direction:column;gap:2px;min-width:140px;position:relative}.jslc-badge{position:absolute;right:-36px;top:0;width:28px;height:28px;border-radius:50%;border:1px solid #0038B8;background:#0038b8}.jslc-badge.hidden{display:none}.brand .tag{color:var(--warn);font-size:.75em;letter-spacing:.04em;text-transform:uppercase}.resources{display:flex;gap:16px;flex:1;font-variant-numeric:tabular-nums}.resources span b{color:var(--accent);font-weight:700}.status{color:var(--muted);white-space:nowrap}.side-panel{position:absolute;top:calc(72px + var(--safe-top));right:calc(8px + var(--safe-right));width:min(280px,34vw);max-height:calc(100% - 160px - var(--safe-top) - var(--safe-bottom));overflow:auto;display:flex;flex-direction:column;gap:8px}.panel-block{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}.panel-block h2{margin:0 0 8px;font-size:.85em;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.panel-block p,.panel-block li{margin:0;color:var(--text);line-height:1.4}.panel-block.help ul{margin:0;padding-left:1.1em;color:var(--muted);font-size:.92em}.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.btn-grid button,.order-btn{min-height:48px;border-radius:12px;border:1px solid var(--line);background:#111827;color:var(--text);font:inherit;font-weight:500;cursor:pointer;padding:8px 16px;transition:transform .1s cubic-bezier(.4,0,.2,1),background-color .2s,border-color .2s,box-shadow .2s;box-shadow:0 2px 4px #0003;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.btn-grid button:active:not(:disabled),.order-btn:active:not(:disabled){transform:scale(.94);background:#1e293b;box-shadow:0 1px 2px #0003}.btn-grid button:hover,.order-btn:hover{border-color:var(--accent)}.btn-grid button:disabled,.order-btn:disabled{opacity:.45;cursor:not-allowed}.order-btn.primary{background:linear-gradient(180deg,#134e4a,#0f766e);border-color:#2dd4bf}.order-btn.wide{width:100%}.order-btn.active{outline:2px solid var(--accent)}.bottom-bar{position:absolute;left:50%;transform:translate(-50%);bottom:calc(12px + var(--safe-bottom));display:none;gap:10px;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:16px;max-width:calc(100% - 24px);overflow-x:auto;box-shadow:0 8px 32px #0006;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);scrollbar-width:none}.bottom-bar::-webkit-scrollbar{display:none}.minimap-wrap{position:absolute;left:calc(8px + var(--safe-left));bottom:calc(8px + var(--safe-bottom));border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#020617;box-shadow:0 8px 24px #00000059}#minimap{display:block;width:160px;height:120px}.toast{position:absolute;top:calc(80px + var(--safe-top));left:50%;transform:translate(-50%);background:#0f172af2;border:1px solid var(--accent);color:var(--text);padding:10px 16px;border-radius:999px;z-index:5}.toast.hidden,.modal.hidden{display:none!important}.modal{position:absolute;inset:0;display:grid;place-items:center;background:#020617b8;z-index:10;padding:16px}.modal-card{width:min(420px,100%);background:#0f172a;border:1px solid var(--line);border-radius:16px;padding:24px;text-align:center;box-shadow:0 20px 60px #00000073}.modal-card.start{text-align:left}.modal-card h1{margin:0 0 8px}.lede{color:var(--muted);line-height:1.45}.field{display:flex;flex-direction:column;gap:6px;margin:16px 0;color:var(--muted);font-size:.9em}.field select{min-height:44px;border-radius:10px;border:1px solid var(--line);background:#111827;color:var(--text);font:inherit;padding:8px 12px}.fine{margin:12px 0 0;color:var(--muted);font-size:.8em}body.ff-phone .side-panel{display:none}body.ff-phone .bottom-bar{display:flex}body.ff-phone .minimap-wrap{bottom:calc(72px + var(--safe-bottom))}body.ff-phone{--hud-scale: 1.15}body.ff-tablet{--hud-scale: 1.08}body.ff-tablet .bottom-bar{display:flex;left:auto;right:calc(8px + var(--safe-right));transform:none;bottom:calc(8px + var(--safe-bottom))}body.ff-tablet .side-panel{max-height:calc(100% - 200px - var(--safe-top))}@media(max-width:720px){body.ff-desktop .side-panel .help{display:none}}.objective-bar{position:absolute;top:calc(72px + var(--safe-top));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--panel);border:1px solid var(--line);border-radius:99px;box-shadow:0 4px 20px #0006,0 0 8px #5eead426;font-size:calc(13px * var(--hud-scale));z-index:4;backdrop-filter:blur(8px);white-space:nowrap}.objective-bar .desc{color:var(--danger);text-shadow:0 0 6px rgba(248,113,113,.3);font-weight:700}.objective-bar .sep{color:var(--line);margin:0 4px}.objective-bar .army-val{color:var(--accent);font-weight:700}.tutorial-strip{position:absolute;bottom:calc(76px + var(--safe-bottom));left:50%;transform:translate(-50%);padding:8px 20px;background:#0f172af2;border:1px solid rgba(94,234,212,.4);border-radius:8px;color:var(--text);font-size:calc(12.5px * var(--hud-scale));z-index:4;backdrop-filter:blur(8px);box-shadow:0 4px 15px #00000080;pointer-events:auto;animation:pulse-border 2.5s infinite ease-in-out;text-align:center;white-space:nowrap;max-width:90vw}@keyframes pulse-border{0%,to{border-color:#5eead44d}50%{border-color:#5eead4bf;box-shadow:0 4px 20px #5eead433}}body.ff-phone .minimap-wrap{bottom:calc(140px + var(--safe-bottom))!important;border-radius:14px;box-shadow:0 6px 20px #0006}