: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}body[data-order-mode=notice] #game{cursor:crosshair}body[data-order-mode=laser] #game{cursor:cell}body[data-order-mode=gaza_rockets] #game,body[data-order-mode=northern_barrage] #game,body[data-order-mode=iran_irbm] #game{cursor:crosshair}.hud{pointer-events:none;position:absolute;inset:0;font-size:calc(14px * var(--hud-scale))}.hud button,.hud select,.hud input,.hud .order-btn,.hud .panel-block,.hud .topbar,.hud .bottom-bar,.hud .selection-ribbon,.hud .mobile-more-drawer,.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}.ability-grid button{border-color:#fbbf24;background:linear-gradient(180deg,#2b2515,#161b2b);font-size:.78em}.ability-grid button[data-ability=laser]{border-color:#60a5fa}.ability-grid button.active{outline:2px solid #fff;box-shadow:0 0 0 3px #60a5fa59}.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}.selection-ribbon{display:none;position:absolute;left:50%;bottom:calc(80px + var(--safe-bottom));transform:translate(-50%);width:min(760px,calc(100% - 24px));min-height:58px;align-items:stretch;gap:8px;padding:6px;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 28px #00000061;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:5}.selection-ribbon__summary{display:flex;flex:0 0 auto;min-width:68px;min-height:48px;padding:5px 9px;align-items:center;justify-content:center;flex-direction:column;border-right:1px solid var(--line);font-variant-numeric:tabular-nums}.selection-ribbon__label{color:var(--muted);font-size:.68em;letter-spacing:.05em;text-transform:uppercase}#selection-count{color:var(--accent);font-size:1.15em}.selection-chips{display:flex;flex:1 1 auto;min-width:0;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;touch-action:pan-x}.selection-chips::-webkit-scrollbar{display:none}.selection-chip{flex:0 0 auto;min-width:102px;min-height:48px;padding:7px 11px;border:1px solid #334155;border-radius:10px;background:#111827f0;color:var(--text);font:inherit;font-weight:650;cursor:pointer;scroll-snap-align:start;-webkit-tap-highlight-color:transparent}.selection-chip.active,.selection-chip[aria-pressed=true]{border-color:var(--accent);background:#134e4aeb;box-shadow:inset 0 -3px 0 var(--accent)}.selection-chip__count{display:inline-grid;min-width:22px;height:22px;margin-left:4px;padding-inline:5px;place-items:center;border-radius:999px;background:#94a3b82e;color:var(--accent);font-size:.82em;font-variant-numeric:tabular-nums}.mobile-more-drawer{position:absolute;left:0;bottom:calc(100% + 8px);width:min(420px,calc(100vw - 24px));max-height:min(42vh,320px);overflow-y:auto;padding:8px;background:#0f172af5;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 38px #00000085;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:7}.mobile-more-drawer[hidden]{display:none!important}.mobile-more-drawer__header{display:flex;min-height:48px;align-items:center;justify-content:space-between;padding:0 4px 6px 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.drawer-close{width:48px;height:48px;padding:0;border:1px solid var(--line);border-radius:10px;background:#111827;color:var(--text);font:inherit;font-size:1.5em;cursor:pointer}.mobile-more-drawer__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mobile-more-drawer__actions .order-btn{min-width:0;width:100%;white-space:normal}.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}.field input{min-height:44px;border-radius:10px;border:1px solid var(--line);background:#111827;color:var(--text);font:inherit;padding:8px 12px;width:100%}.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.setup-grid .field{margin-block:12px}.challenge-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.challenge-share,.challenge-result,.challenge-banner{margin-top:12px;padding:12px;border:1px solid rgba(94,234,212,.45);border-radius:10px;background:#0f172ab8;color:var(--text)}.challenge-result{text-align:left;line-height:1.45}.challenge-share.hidden,.challenge-result.hidden,.challenge-banner.hidden{display:none}.fine{margin:12px 0 0;color:var(--muted);font-size:.8em}body.ff-phone .side-panel{display:none}body.ff-phone .bottom-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:calc(100% - 16px - var(--safe-left) - var(--safe-right));max-width:680px;gap:6px;padding:6px;bottom:calc(6px + var(--safe-bottom));overflow:visible;z-index:6}body.ff-phone .bottom-bar>.order-btn{width:100%;min-width:0;min-height:50px;padding:7px 5px;font-weight:700}body.ff-phone .selection-ribbon{display:flex;bottom:calc(68px + var(--safe-bottom));width:calc(100% - 16px - var(--safe-left) - var(--safe-right));max-width:680px}body.ff-phone .minimap-wrap{bottom:calc(136px + var(--safe-bottom))}body.ff-phone{--hud-scale: .92}body.ff-phone .topbar{top:calc(4px + var(--safe-top));left:calc(4px + var(--safe-left));right:calc(4px + var(--safe-right));gap:6px;padding:6px 8px;align-items:flex-start}body.ff-phone .brand{min-width:92px;max-width:92px;font-size:11px}body.ff-phone .brand .tag{font-size:7px;line-height:1.15}body.ff-phone .jslc-badge,body.ff-phone .status{display:none!important}body.ff-phone .resources{min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;font-size:9px;line-height:1.15;text-align:center}body.ff-phone .resources span{min-width:0;overflow:hidden;text-overflow:ellipsis}body.ff-tablet{--hud-scale: 1.08}body.ff-tablet .bottom-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));left:auto;right:calc(8px + var(--safe-right));transform:none;bottom:calc(8px + var(--safe-bottom));width:min(520px,calc(100% - 308px - var(--safe-left) - var(--safe-right)));overflow:visible;z-index:6}body.ff-tablet .bottom-bar>.order-btn{min-width:0;width:100%}body.ff-tablet .selection-ribbon{display:flex;left:calc(8px + var(--safe-left));right:calc(300px + var(--safe-right));bottom:calc(78px + var(--safe-bottom));width:auto;transform:none}body.ff-tablet .mobile-more-drawer{left:auto;right:0}body.ff-tablet .side-panel{max-height:calc(100% - 200px - var(--safe-top))}body.ff-tablet .tutorial-strip{display:none}@media(max-width:720px){body.ff-desktop .side-panel .help{display:none}.setup-grid{grid-template-columns:1fr;gap:0}}.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}body.ff-phone .objective-bar{top:calc(54px + var(--safe-top));left:calc(8px + var(--safe-left));right:calc(8px + var(--safe-right));transform:none;justify-content:center;gap:5px;padding-inline:8px;font-size:10px;overflow:hidden}body.ff-phone .objective-bar .desc{max-width:42vw;overflow:hidden;text-overflow:ellipsis}body.ff-phone .tutorial-strip{display:none}.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}@media(orientation:portrait){body.ff-phone .selection-ribbon{bottom:calc(70px + var(--safe-bottom));gap:4px;padding:5px}body.ff-phone .selection-ribbon__summary{min-width:48px;padding-inline:4px}body.ff-phone .selection-ribbon__label{display:none}body.ff-phone .selection-chip{min-width:94px;padding-inline:8px;font-size:.9em}body.ff-phone .mobile-more-drawer{width:100%;max-height:min(46vh,360px)}body.ff-phone .minimap-wrap{bottom:calc(142px + var(--safe-bottom))!important}}@media(orientation:landscape)and (max-height:520px){body.ff-phone .topbar{max-height:48px}body.ff-phone .objective-bar{top:calc(50px + var(--safe-top));min-height:34px}body.ff-phone .selection-ribbon{min-height:54px}body.ff-phone .selection-ribbon__summary,body.ff-phone .selection-chip{min-height:48px}body.ff-phone .mobile-more-drawer{max-height:min(52vh,250px)}body.ff-phone .minimap-wrap{width:120px;bottom:calc(136px + var(--safe-bottom))!important}body.ff-phone #minimap{width:120px;height:90px}}