*{box-sizing:border-box}:root{color-scheme:dark;--text: #f5f8ff;--muted: #aab5c7;--panel: rgba(9, 13, 18, .76);--panel-strong: rgba(13, 18, 25, .92);--line: rgba(154, 184, 234, .28);--line-strong: rgba(154, 184, 234, .48);--blue: #53b8ff;--blue-deep: #173a79;--red: #ff5b5f;--amber: #ffba3b;--green: #51d38b;--shadow: 0 22px 68px rgba(0, 0, 0, .46)}body{margin:0;overflow:hidden;color:var(--text);background:#080a0d;font-family:system-ui,Segoe UI,Noto Sans,Arial,Tahoma,sans-serif}button,input,select{font:inherit}button{min-height:36px;border:1px solid rgba(141,178,245,.38);color:var(--text);background:linear-gradient(180deg,#3763b2db,#142b59eb),#193568;box-shadow:inset 0 0 0 1px #ffffff0f;cursor:pointer}button:hover:not(:disabled){border-color:#93ccffc2;filter:brightness(1.08)}button:disabled{cursor:wait;opacity:.55}input,select{width:100%;min-height:38px;padding:8px 10px;color:var(--text);background:#070b11e6;border:1px solid rgba(141,178,245,.28);outline:none}input:focus,select:focus{border-color:#53b8ffe6}.hidden{display:none!important}.screen{width:100vw;height:100vh}.auth-screen{display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,rgba(42,63,92,.3),transparent 44%),linear-gradient(180deg,#05080cfa,#020407)}.auth-screen.auth-overlay{position:absolute;inset:0;z-index:90;place-items:start start;padding:18px;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.54),transparent 42%)}.auth-screen.auth-overlay .auth-panel,.auth-screen.auth-overlay .auth-restore{pointer-events:auto}.auth-screen.auth-collapsed .auth-panel{display:none}.auth-panel{position:relative;width:min(460px,calc(100vw - 32px));padding:28px;background:#090d12e6;border:1px solid var(--line-strong);box-shadow:var(--shadow);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}.auth-screen.auth-overlay .auth-panel{width:min(380px,calc(100vw - 36px));padding:20px;background:#070a0fdb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.auth-panel-toggle{display:none;position:absolute;top:10px;right:12px;width:30px;min-height:30px;padding:0;border-radius:0;font-size:22px;line-height:1}.auth-screen.auth-overlay .auth-panel-toggle{display:block}.auth-restore{align-self:start;justify-self:start;min-width:94px;margin:0;padding:8px 14px;background:#0c1422d6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.auth-panel h1,.phase-banner h1{margin:0;font-size:30px;font-weight:800;letter-spacing:0}.auth-panel label{display:grid;gap:7px;color:var(--muted)}.auth-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:16px 0 12px}.auth-tabs button,.auth-panel>button{padding:9px 10px}.auth-tabs button.active,.primary-action,.phase-primary,.card-pick{border-color:#ffba3bb8;color:#fff7d8;background:linear-gradient(180deg,#d69a2df2,#684212f5),#9c631b}.auth-field{margin-top:10px}.auth-panel>button{width:100%;margin-top:14px}.eyebrow{margin:0 0 8px;color:#b7caff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0}.status{color:var(--muted);font-size:13px}.game-screen{position:relative;display:block;min-width:0;min-height:0;background:#05070a}.battle-wrap,#viewport,.hud,.battle-vignette{position:absolute;inset:0}#viewport{z-index:1}canvas{display:block}#viewport canvas{cursor:grab;touch-action:none}#viewport canvas.camera-panning,#viewport canvas.camera-rotating{cursor:grabbing}.renderer-fallback{width:100%;height:100%;background:#0d1118}.battle-vignette{z-index:2;pointer-events:none;background:radial-gradient(ellipse at center,#0000 42%,#0000007a),linear-gradient(180deg,rgba(0,0,0,.32),transparent 22%,transparent 72%,rgba(0,0,0,.34))}.hud{z-index:5;overflow:hidden;pointer-events:none}.top-hud{position:absolute;top:12px;left:12px;right:12px;display:grid;grid-template-columns:minmax(240px,430px) minmax(300px,560px) minmax(240px,430px);align-items:start;gap:16px;pointer-events:none}.commander-panel{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;min-height:98px;padding:10px 14px 12px 10px;background:linear-gradient(90deg,#0d285ed1,#080d14c7),var(--panel);border:1px solid rgba(96,148,255,.46);box-shadow:var(--shadow);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,92% 100%,0 100%)}.commander-panel-b{grid-template-columns:minmax(0,1fr) 86px;background:linear-gradient(270deg,#58141bd1,#080d14c7),var(--panel);border-color:#ff6c6e75;clip-path:polygon(22px 0,100% 0,100% 100%,8% 100%,0 22px)}.avatar-frame{width:76px;height:76px;padding:4px;background:linear-gradient(135deg,#ffffff38,#ffffff0a),#101620;border:1px solid rgba(217,228,255,.36);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}.avatar-art{width:100%;height:100%;background:#151b24 center / cover no-repeat;filter:saturate(1.08) contrast(1.04)}.avatar-art.ready{box-shadow:inset 0 0 0 3px #51d38bc7}.commander-main{min-width:0;display:grid;gap:7px}.commander-main small{color:#b8c8ed;font-size:11px;font-weight:800}.commander-main strong{min-width:0;overflow:hidden;font-size:18px;text-overflow:ellipsis;white-space:nowrap}.hp-track{height:12px;overflow:hidden;background:#ffffff14;border:1px solid rgba(159,190,255,.28)}.hp-track span{display:block;width:0%;height:100%;background:linear-gradient(90deg,var(--blue),#82ddff);transition:width .16s linear}.commander-panel-b .hp-track span{background:linear-gradient(90deg,#ff8184,var(--red))}.commander-stats{display:flex;flex-wrap:wrap;gap:6px;color:#d8e2f5;font-size:12px}.commander-stats span{padding:3px 6px;background:#02060c7a;border:1px solid rgba(255,255,255,.08)}.phase-banner{justify-self:center;width:min(560px,100%);min-height:112px;padding:10px 28px 18px;text-align:center;background:linear-gradient(180deg,#8d5b14c7,#27190ad1),var(--panel);border-top:1px solid rgba(255,210,99,.7);border-bottom:1px solid rgba(255,210,99,.5);box-shadow:0 18px 60px #00000070;clip-path:polygon(10% 0,90% 0,100% 40%,82% 100%,18% 100%,0 40%)}.phase-clock{display:flex;justify-content:center;gap:14px;margin-bottom:3px;color:#f6e6b6;font-size:15px;font-weight:900}.phase-banner strong{display:block;color:#fff3ba;font-size:13px;font-weight:900}.phase-banner p{max-width:440px;margin:5px auto 0;color:#f1e7d1;font-size:13px;line-height:1.28}.quick-actions,.unit-database,.phase-panel,.placement-panel{position:absolute;z-index:10;pointer-events:auto;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}.quick-actions{left:14px;bottom:16px;width:250px;display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:10px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}.quick-actions .status,.quick-actions .primary-action{grid-column:1 / -1}.quick-actions .status{margin:0;min-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.unit-database{left:14px;top:132px;width:270px;max-height:calc(100vh - 330px);padding:10px;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}.unit-database h2,.placement-panel h2,.phase-control-block>strong{margin:0 0 8px;font-size:14px;font-weight:900}#units{max-height:min(340px,calc(100vh - 420px));margin-top:8px;overflow:auto;scrollbar-width:thin}#units button{width:100%;min-height:34px;margin-bottom:5px;padding:7px 8px;text-align:left;background:#121b26e6;border-color:#8db2f538}.placement-panel{right:14px;bottom:128px;width:370px;padding:12px}.placement-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;margin-top:8px}.placement-grid label{display:grid;gap:4px;color:var(--muted);font-size:12px}.phase-panel{right:14px;bottom:16px;width:390px;max-height:190px;padding:10px 12px;overflow:auto}.phase-details{display:grid;gap:4px;color:#c4cede;font-size:12px;line-height:1.34}.phase-details strong{color:var(--text)}.phase-restore-note{color:#f2c766}.spectator-timeline{display:grid;gap:6px;margin-top:4px}.spectator-intents{display:grid;gap:5px}.spectator-intent{display:grid;gap:3px}.spectator-intent span{color:#9fd6ff}.spectator-intent i{display:block;width:var(--p, 0%);height:3px;border-radius:999px;background:linear-gradient(90deg,#55c7ff,#f3c35f);box-shadow:0 0 10px #55c7ff6b}.spectator-timeline ul{display:grid;gap:2px;margin:0;padding:0;color:#7f8da3;list-style:none}.overlay{position:absolute;z-index:3;left:298px;right:422px;bottom:16px;display:flex;justify-content:space-between;gap:12px;pointer-events:none}.overlay span{max-width:50%;overflow:hidden;padding:7px 10px;color:#d4def0;background:#04080db8;border:1px solid rgba(141,178,245,.24);text-overflow:ellipsis;white-space:nowrap}.phase-controls{pointer-events:auto}.phase-controls[data-phase=character_select],.phase-controls[data-phase=reinforcement],.phase-controls[data-phase=finished]{position:absolute;inset:0;z-index:30;display:grid;grid-template-rows:auto 1fr auto;gap:22px;padding:74px clamp(22px,4vw,76px) 44px;background:linear-gradient(180deg,#000000db,#000000b8),#07080adb;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.phase-controls[data-phase=finished] .choice-grid{width:min(620px,100%);grid-template-columns:1fr}.result-card{min-height:360px;grid-template-rows:auto auto auto 1fr auto;overflow:hidden}.result-card:after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#060a1047,#060a10f0),var(--card-art);background-position:center;background-size:cover;opacity:.42}.effect-list{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}.effect-chip{display:inline-flex;min-height:28px;align-items:center;padding:5px 9px;color:#d9e7ff;background:#375076bd;border:1px solid rgba(132,178,255,.34);font-size:13px;line-height:1.15}.phase-control-header{justify-self:center;width:min(920px,100%);text-align:center}.phase-control-header h2{margin:0;color:#dfe8ff;font-size:clamp(32px,4vw,56px);font-weight:900;line-height:1;letter-spacing:0;text-transform:uppercase}.phase-control-header p:last-child{margin:12px 0 0;color:#c8ced8;font-size:18px}.choice-grid{justify-self:center;width:min(1810px,100%);display:grid;grid-template-columns:repeat(4,minmax(230px,1fr));gap:clamp(16px,2vw,34px);align-items:stretch}.choice-card{position:relative;min-height:520px;display:grid;grid-template-rows:auto minmax(210px,1fr) auto auto auto;gap:12px;padding:18px 18px 20px;color:var(--text);text-align:left;background:linear-gradient(180deg,#1b283da8,#070a10eb),#111823;border:1px solid rgba(124,171,255,.42);box-shadow:var(--shadow),inset 0 0 36px #4997ff24;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%)}button.choice-card{min-height:520px}.choice-card:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 20%),repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 7px);opacity:.34;pointer-events:none}.card-kind-ability{border-color:#ff5b5f9e;box-shadow:var(--shadow),inset 0 0 44px #ff4b403d}.card-kind-module{border-color:#ffba3ba8;box-shadow:var(--shadow),inset 0 0 44px #ffba3b33}.card-kind-unit,.commander-card{border-color:#68a9ffad}.card-art-frame{position:relative;min-height:240px;overflow:hidden;background:linear-gradient(180deg,#ffffff14,#ffffff03),#0a1019db;border:1px solid rgba(184,207,255,.22)}.card-art{width:100%;height:100%;min-height:240px;background:var(--card-art) center / cover no-repeat;filter:saturate(1.05) contrast(1.05)}.card-cost{justify-self:start;padding:7px 13px;color:#ffd073;font-size:18px;font-weight:900;background:#03070bd1;border:1px solid rgba(255,186,59,.36);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}.badge-blue{color:#dbeaff;border-color:#76b5ff70}.card-emblem{position:absolute;top:60px;left:18px;display:grid;place-items:center;width:44px;height:44px;color:#eaf3ff;font-weight:900;background:#040c16c2;border:1px solid rgba(167,204,255,.34)}.card-title{font-size:22px;line-height:1.12}.card-description{color:#c9d0da;font-size:16px;line-height:1.32}.card-effects{display:flex;flex-wrap:wrap;gap:7px}.card-effects span{padding:5px 8px;color:#dbe8ff;font-size:12px;background:#253850ad;border:1px solid rgba(141,178,245,.22)}.choice-actions{display:grid;gap:8px}.card-pick,.card-pick-label{display:grid;place-items:center;min-height:40px;padding:9px 12px;font-size:14px;font-weight:900;text-align:center;text-transform:uppercase}.phase-secondary{border-color:#b6ccee5c;background:linear-gradient(180deg,#3c495ce6,#19202cf5),#273345}.skip-card{justify-self:center;min-width:min(360px,100%);min-height:46px;padding:10px 18px}.phase-controls[data-phase=deployment]{position:absolute;left:auto;right:14px;bottom:16px;z-index:18;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:min(430px,calc(100vw - 28px));max-height:min(72vh,720px);padding:10px;overflow:visible;background:linear-gradient(180deg,#121a28e6,#05080df0),#05090ee6;border:1px solid rgba(141,178,245,.46);border-radius:6px;box-shadow:var(--shadow),inset 0 0 34px #3e7bff14}.phase-controls[data-phase=deployment] .phase-control-header{display:none}.deployment-dock{display:grid;gap:8px}.phase-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;color:var(--text);font-size:13px}.phase-summary span,.roster-strip{color:#d2daea}.unit-shop-dock{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:8px;align-items:stretch}.phase-control-block{min-width:0;display:grid;align-content:start;gap:8px;padding:10px;background:#0d131bc7;border:1px solid rgba(141,178,245,.22)}.unit-shop-dock .phase-control-block>strong{display:none}.unit-buy-block,.unit-unlock-block{padding:0;background:transparent;border:0}.unit-poster-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:190px;overflow:auto;padding:1px;scrollbar-width:thin}.unit-poster-card{position:relative;min-height:82px;aspect-ratio:1 / 1;overflow:visible;display:block;padding:0;background:linear-gradient(180deg,#ffffff08,#0000004d),var(--poster-art) center / cover no-repeat,#101722;border-color:#9bb9f461;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}.unit-poster-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 7px);opacity:.55;pointer-events:none}.unit-poster-card:after{content:attr(data-tooltip);position:absolute;right:calc(100% + 10px);bottom:0;z-index:80;width:270px;max-width:min(270px,75vw);padding:10px 12px;color:#edf4ff;white-space:pre-line;text-align:left;line-height:1.35;background:#060a10f5;border:1px solid rgba(141,178,245,.48);box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:opacity .12s ease,transform .12s ease;pointer-events:none}.unit-poster-card:hover:after,.unit-poster-card:focus-visible:after{opacity:1;transform:translateY(0)}.unit-poster-card:disabled:after{display:none}.unit-poster-class,.unit-poster-price{position:absolute;z-index:2;font-weight:900;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.82)}.unit-poster-class{top:5px;left:5px;min-width:24px;padding:4px 5px;color:#dce8ff;background:#0b111bc2;border:1px solid rgba(164,197,255,.3);font-size:9px}.unit-poster-price{left:0;bottom:0;min-width:48px;padding:6px 8px;color:#ffd16f;background:linear-gradient(135deg,#7d2522eb,#451915f0);border-top:1px solid rgba(255,204,102,.28);border-right:1px solid rgba(255,204,102,.2);font-size:16px}.unit-poster-title{display:none}.unlock-entry-card{min-height:100%;display:grid;place-items:center;gap:4px;align-content:center;padding:10px 6px;text-align:center;background:linear-gradient(180deg,#3a4863e6,#191f2df5),#1c2535;border-color:#adc2e861;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px))}.unlock-entry-card.active{border-color:#ffba3bad;box-shadow:inset 0 0 24px #ffba3b1f}.unlock-entry-card strong{font-size:10px;line-height:1.05;text-transform:uppercase}.unlock-entry-card small{color:var(--muted);font-size:10px}.unlock-plus{display:grid;place-items:center;width:44px;height:44px;color:#f1f5ff;font-size:42px;font-weight:900;line-height:1;background:#070b1275;border:1px solid rgba(195,211,245,.3)}.unit-unlock-menu{position:fixed;right:14px;bottom:232px;z-index:70;width:min(760px,calc(100vw - 28px));max-height:min(64vh,560px);display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;padding:12px;overflow:hidden;background:linear-gradient(180deg,#111927f0,#05080ef7),#070a10f5;border:1px solid rgba(141,178,245,.5);box-shadow:var(--shadow)}.unlock-class-filters{min-width:0;display:grid;align-content:start;gap:6px;overflow:auto}.unlock-class-chip{min-height:34px;overflow:hidden;padding:7px 9px;color:#c8d7f2;text-align:left;text-overflow:ellipsis;white-space:nowrap;background:#20304ed1;border-color:#8db2f542}.unlock-class-chip.active{color:#fff3cf;border-color:#ffba3ba3;background:#674419cc}.unlock-poster-grid{max-height:calc(min(64vh,560px) - 24px);grid-template-columns:repeat(5,minmax(0,1fr))}.unit-action-card{min-height:64px;display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:1fr auto;gap:5px 8px;align-items:center;padding:6px;text-align:left;background:#101924f0;border-color:#8db2f538}.unit-action-art{grid-row:1 / span 2;width:58px;height:52px;background:#0d131c center / cover no-repeat;border:1px solid rgba(255,255,255,.12)}.unit-action-body{min-width:0;display:grid;gap:2px}.unit-action-body strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.unit-action-body small,.empty-mini,.phase-mini-list{color:#aeb8c9;font-size:11px;line-height:1.3}.unit-action-cta{justify-self:start;padding:3px 7px;color:#ffd073;font-size:11px;font-weight:900;border:1px solid rgba(255,186,59,.24)}.deployment-tools{display:grid;gap:8px}.deployment-tools .phase-control-block{padding:8px}.deployment-tools .phase-control-block>strong{font-size:12px}.phase-coordinate-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.phase-coordinate-grid label{display:grid;gap:4px;color:var(--muted);font-size:11px}.phase-coordinate-grid button{grid-column:1 / -1}.deploy-ready-button{width:100%;justify-self:stretch;min-width:0}#phaseActionStatus{margin:0}@media(max-width:1180px){.phase-controls[data-phase=character_select],.phase-controls[data-phase=reinforcement]{overflow:auto;padding:64px 24px 30px}.top-hud{grid-template-columns:1fr}.commander-panel{display:none}.phase-banner{width:min(640px,calc(100vw - 24px))}.unit-database{display:none}.phase-controls[data-phase=deployment]{left:auto;right:14px;width:min(430px,calc(100vw - 28px))}.overlay{left:14px;right:14px}.phase-panel{width:calc(100vw - 28px)}.choice-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}}@media(max-width:760px){.phase-banner h1{font-size:22px}.phase-controls[data-phase=character_select],.phase-controls[data-phase=reinforcement]{padding:58px 12px 24px;overflow:auto}.phase-control-header h2{font-size:30px}.phase-control-header p:last-child{font-size:14px}.choice-grid{grid-template-columns:1fr}.phase-controls[data-phase=deployment]{left:12px;right:12px;bottom:12px;width:auto}.unit-shop-dock{grid-template-columns:minmax(0,1fr) 88px}.unit-poster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.unit-unlock-menu{left:12px;right:12px;bottom:218px;width:auto;grid-template-columns:1fr}.unlock-class-filters{grid-auto-flow:column;grid-auto-columns:minmax(76px,max-content);overflow-x:auto}.choice-card,button.choice-card{min-height:440px}.quick-actions{width:calc(100vw - 28px)}.placement-panel,.phase-panel{right:14px;left:14px;width:auto}}