.match-menu-dialog p{color:var(--color-muted);font-size:14px}.match-menu-dialog button{background:var(--color-raised);min-height:44px;color:var(--color-text);border-radius:6px;font-size:14px}.match-menu-dialog button:hover{background:#42513d}.match-menu-actions{gap:8px;margin-top:20px;display:grid}.match-menu-actions button{justify-content:center;align-items:center;gap:10px;padding:10px 16px;display:flex}.match-menu-actions .match-menu-confirm{background:var(--color-fern);color:var(--color-ink)}.match-menu-actions .match-menu-confirm:hover{background:#e2f5b6}.match-menu-dialog .match-menu-error{color:#ffd9c3;margin-top:12px}.battle-connection-error{z-index:15;bottom:max(12px, env(safe-area-inset-bottom));color:#ffd9c3;text-align:center;background:#563a30;border-radius:8px;width:min(440px,100% - 24px);margin:0;padding:12px 16px;font-size:13px;position:absolute;left:50%;transform:translate(-50%)}
@layer components{.battle-surface{--hud-ivory:#eef1e7;--hud-accent:#d5ef91;--hud-pine:#2c392d;--hud-font:"Trebuchet MS", Arial, sans-serif;--hud-edge:max(10px, env(safe-area-inset-left))}.hud-frame{pointer-events:none;filter:drop-shadow(0 3px 2px #1b281d38);width:100%;height:100%;position:absolute;inset:0}.hud-menu,.hud-opponent,.hud-command,.hud-powers,.battle-surface .battle-progress{z-index:8;color:var(--hud-ivory);font-family:var(--hud-font);background:0 0;border:0;border-radius:0;padding:0;position:absolute;container-type:inline-size}.hud-menu{top:max(16px, env(safe-area-inset-top));left:max(20px, env(safe-area-inset-left));aspect-ratio:124/116;width:52px}.hud-menu>svg:last-child{color:#d5ef91;stroke-width:2.6px;filter:none;width:44%;height:44%;position:absolute;inset:28%}.hud-menu:hover,.hud-menu[aria-expanded=true]{filter:brightness(1.2)}.battle-surface .battle-progress{top:max(8px, env(safe-area-inset-top));aspect-ratio:587/94;pointer-events:none;width:clamp(300px,26.3vw,440px);left:49.37%;transform:translate(-50%)}.hud-score-side{justify-content:center;align-items:center;gap:11%;width:32%;height:56%;display:flex;position:absolute;top:9%}.hud-score-side strong{font-variant-numeric:tabular-nums;text-shadow:none;font-size:6.4cqw;font-weight:700;line-height:1;position:relative}.hud-score-friendly{left:3%}.hud-score-enemy{right:1.5%}.hud-faction-crest{width:26%;height:65%;color:var(--hud-friendly,#d5ef91);filter:none;position:relative}.hud-faction-crest.enemy{color:var(--hud-hostile,#f49a7c)}.hud-clock{place-items:center;width:32%;height:56%;display:grid;position:absolute;top:9%;left:34%}.hud-clock>span{font-variant-numeric:tabular-nums;text-shadow:none;font-size:4.8cqw;font-weight:700;line-height:1;position:relative}.battle-surface .battle-progress-track{background:var(--hud-hostile);border-radius:2px;width:88%;height:12%;min-height:6px;margin:0;padding:0;position:absolute;bottom:15%;left:6%;overflow:hidden}.battle-surface .battle-progress-fill{background:var(--hud-friendly);box-sizing:border-box;border:0;box-shadow:inset -1px 0 #263227}.hud-opponent{top:max(13px, env(safe-area-inset-top));right:max(15px, env(safe-area-inset-right));aspect-ratio:391/137;width:clamp(210px,17.55vw,294px)}.hud-opponent-name{text-overflow:ellipsis;white-space:nowrap;width:52%;text-shadow:none;font-size:8.2cqw;line-height:1.25;position:absolute;top:13%;left:10%;overflow:hidden}.hud-opponent-portrait{width:34%;height:100%;position:absolute;top:0;right:0}.hud-opponent-portrait .hud-frame{filter:none}.hud-opponent-portrait img,.hud-player-portrait img{object-fit:cover;clip-path:polygon(17% 0,83% 0,100% 17%,100% 83%,83% 100%,17% 100%,0 83%,0 17%);width:80%;height:80%;position:absolute;inset:10%}.hud-defeated{background:#220a05;padding:3px 8px;font-size:12px;position:absolute;inset:auto 8% 17% auto}.hud-insignia{width:32%;height:22%;display:flex;position:absolute;bottom:0;left:2%}.hud-insignia>span{flex:1;position:relative}.hud-insignia>span>svg:last-child{stroke-width:2.5px;color:#c8d0be;width:52%;height:52%;position:absolute;inset:24%}.hud-insignia>span:first-child>svg:last-child{color:#d5ef91;fill:#d5ef91}.hud-insignia.opponent{width:54%;height:36%;bottom:15%;left:8%}.hud-insignia.opponent .hud-frame{filter:none}.hud-insignia.opponent>span:first-child>svg:last-child{color:#c8d0be;fill:none}.hud-command{left:max(18px, env(safe-area-inset-left));bottom:max(24px, env(safe-area-inset-bottom));aspect-ratio:650/245;pointer-events:none;width:clamp(360px,29.16vw,488px)}.hud-orders{height:64%;position:absolute;bottom:3%;left:26%;right:0}.hud-send-label{text-shadow:none;font-size:4.4cqw;font-weight:700;line-height:1;position:absolute;top:13%;left:15%}.hud-player-portrait{width:31%;height:77%;position:absolute;bottom:3%;left:2%}.hud-fractions{pointer-events:auto;height:46%;display:flex;position:absolute;bottom:15%;left:11%;right:6%}.hud-fractions button{min-width:0;min-height:44px;color:var(--hud-ivory);background:0 0;border:0;flex:1;padding:0;position:relative}.hud-fractions button>span{height:100%;font:700 4.4cqw / 1 var(--hud-font);text-shadow:none;place-items:center;padding-bottom:10px;display:grid;position:relative}.hud-fractions kbd{color:#d6dfc9;width:14px;height:14px;font:10px / 1 var(--hud-font);pointer-events:none;background:#1f2a21;border:1px solid #647159;border-radius:3px;place-items:center;display:grid;position:absolute;bottom:4px;right:6px}.hud-fractions button[aria-pressed=true] kbd{color:#26351f;background:#aec687;border-color:#728a50}.hud-fractions button[aria-pressed=true]{color:#26351f}.hud-fractions button:hover:not(:disabled){filter:brightness(1.25)}.hud-fractions button:disabled{filter:saturate(.25);opacity:.7}.hud-powers{right:max(14px, env(safe-area-inset-right));bottom:max(29px, env(safe-area-inset-bottom));aspect-ratio:604/249;pointer-events:none;width:clamp(280px,27.1vw,453px)}.hud-power{pointer-events:auto;color:var(--hud-ivory);aspect-ratio:1;background:0 0;border:0;border-radius:50%;width:23%;padding:0;position:absolute}.hud-power-reveal{touch-action:none;cursor:grab;top:18%;left:6%}.hud-power-storm{touch-action:none;cursor:grab;width:26%;top:0;left:72%}.hud-power-reverse{touch-action:none;cursor:grab;top:3%;left:49.5%}.hud-power-shield{touch-action:none;cursor:grab;top:5%;left:27.5%}.hud-spell-ring{filter:drop-shadow(0 3px 2px #1b281d40);width:100%;height:100%;position:absolute;inset:0}.hud-spell-ring.muted{filter:drop-shadow(0 3px 2px #1b281d30)}.hud-spell-icon{stroke-width:2.4px;filter:none;width:46%;height:46%;position:absolute;inset:27%}.hud-spell-icon>svg{width:100%;height:100%}.hud-power-storm>.hud-spell-icon{fill:none;stroke:#eef1e7}.hud-power:disabled{opacity:1;cursor:not-allowed;color:#ced1bd}.hud-power-shield:hover:not(:disabled) .hud-spell-ring,.hud-power-reverse:hover:not(:disabled) .hud-spell-ring,.hud-power-reverse.armed .hud-spell-ring,.hud-power-shield.armed .hud-spell-ring,.hud-power-reveal:hover:not(:disabled) .hud-spell-ring,.hud-power-reveal.armed .hud-spell-ring,.hud-power-storm:hover:not(:disabled) .hud-spell-ring,.hud-power-storm.armed .hud-spell-ring{filter:brightness(1.15)drop-shadow(0 3px 2px #1b281d40)}.hud-spell-status{width:68%;height:31%;font:700 3.6cqw / 1 var(--hud-font);text-shadow:none;place-items:center;display:grid;position:absolute;bottom:-6%;left:16%}.hud-spell-status>span{place-items:center;display:grid;position:relative}.hud-spell-status>span>svg{stroke-width:2.5px;width:3.8cqw;height:3.8cqw}.hud-shield-lock{width:15%;height:15%;position:absolute;bottom:13%;left:43%}.hud-shield-lock svg{width:100%;height:100%}.hud-energy{width:41%;height:28%;text-shadow:none;justify-content:center;align-items:center;gap:6%;font-size:6.4cqw;font-weight:700;display:flex;position:absolute;bottom:0;left:36%}.hud-energy>span{position:relative}.hud-energy>svg:not(.hud-frame){color:#aecbba;fill:#aecbba;filter:drop-shadow(0 2px 1px #001626);width:12%;height:49%;position:relative}.hud-menu:focus-visible,.hud-fractions button:focus-visible,.hud-power:focus-visible{outline-offset:3px;outline:3px solid #d5ef91}.fullscreen-game .field-bottom{bottom:max(12px, env(safe-area-inset-bottom));max-width:min(480px,100% - 32px);color:var(--hud-ivory);pointer-events:none;background:#263227f2}.fullscreen-game .field-bottom[hidden],.fullscreen-game .field-bottom kbd{display:none}@media (max-width:1000px){.battle-surface .battle-progress{width:clamp(280px,36vw,360px);left:48%}.hud-opponent{width:clamp(190px,24vw,240px)}.hud-command{width:max(340px,40vw);bottom:max(22px, env(safe-area-inset-bottom))}.hud-powers{width:clamp(280px,36vw,360px);bottom:max(14px, env(safe-area-inset-bottom))}.fullscreen-game .field-bottom{bottom:195px}}@media (max-width:700px){.hud-menu{width:48px;left:max(6px, env(safe-area-inset-left));top:max(9px, env(safe-area-inset-top))}.battle-surface .battle-progress{width:calc(100% - 80px);max-width:350px;left:auto;right:max(8px, env(safe-area-inset-right));top:max(13px, env(safe-area-inset-top));transform:none}.hud-opponent{width:190px;top:max(78px, calc(env(safe-area-inset-top) + 65px));right:max(8px, env(safe-area-inset-right))}.hud-command{width:min(100% - 12px,450px);left:max(6px, env(safe-area-inset-left));bottom:max(12px, env(safe-area-inset-bottom))}.hud-fractions{height:55%;bottom:10%}.hud-send-label{top:6%}.hud-powers{width:280px;right:max(6px, env(safe-area-inset-right));bottom:max(164px, calc(env(safe-area-inset-bottom) + 152px))}.fullscreen-game .field-bottom{font-size:11px;bottom:307px}}@media (max-height:500px) and (min-width:701px){.hud-menu{width:52px;top:7px;left:8px}.battle-surface .battle-progress{width:clamp(260px,32vw,360px)}.hud-opponent{width:clamp(180px,22vw,240px)}.hud-command{width:clamp(340px,38vw,420px);bottom:max(7px, env(safe-area-inset-bottom))}.hud-powers{width:clamp(270px,34vw,350px);bottom:max(7px, env(safe-area-inset-bottom))}}.battle-surface[data-battle-layout] .hud-menu,.battle-surface[data-battle-layout] .hud-opponent,.battle-surface[data-battle-layout] .hud-command,.battle-surface[data-battle-layout] .hud-powers{transform:scale(var(--battle-ui-scale))}.battle-surface[data-battle-layout] .hud-menu{width:52px;left:max(env(safe-area-inset-left), calc(20px * var(--battle-ui-scale)));top:max(env(safe-area-inset-top), calc(16px * var(--battle-ui-scale)));transform-origin:0 0}.battle-surface[data-battle-layout] .battle-progress{width:420px;max-width:none;left:50%;right:auto;top:max(env(safe-area-inset-top), calc(8px * var(--battle-ui-scale)));transform:translateX(-50%) scale(var(--battle-ui-scale));transform-origin:top}.battle-surface[data-battle-layout] .hud-opponent{width:280px;top:max(env(safe-area-inset-top), calc(13px * var(--battle-ui-scale)));right:max(env(safe-area-inset-right), calc(15px * var(--battle-ui-scale)));transform-origin:100% 0}.battle-surface[data-battle-layout] .hud-command{width:466px;bottom:max(env(safe-area-inset-bottom), calc(24px * var(--battle-ui-scale)));left:max(env(safe-area-inset-left), calc(18px * var(--battle-ui-scale)));transform-origin:0 100%}.battle-surface[data-battle-layout] .hud-powers{width:434px;bottom:max(env(safe-area-inset-bottom), calc(29px * var(--battle-ui-scale)));right:max(env(safe-area-inset-right), calc(14px * var(--battle-ui-scale)));transform-origin:100% 100%}.battle-surface[data-battle-layout] .hud-fractions{height:46%;bottom:15%}.battle-surface[data-battle-layout] .hud-send-label{top:13%}.battle-surface[data-battle-layout=portrait] .hud-menu{width:48px;left:max(env(safe-area-inset-left), calc(6px * var(--battle-ui-scale)));top:max(env(safe-area-inset-top), calc(9px * var(--battle-ui-scale)))}.battle-surface[data-battle-layout=portrait] .battle-progress{width:310px;left:auto;right:max(env(safe-area-inset-right), calc(8px * var(--battle-ui-scale)));top:max(env(safe-area-inset-top), calc(13px * var(--battle-ui-scale)));transform:scale(var(--battle-ui-scale));transform-origin:100% 0}.battle-surface[data-battle-layout=portrait] .hud-opponent{width:190px;top:max(calc(env(safe-area-inset-top) + 65px * var(--battle-ui-scale)), calc(78px * var(--battle-ui-scale)));right:max(env(safe-area-inset-right), calc(8px * var(--battle-ui-scale)))}.battle-surface[data-battle-layout=portrait] .hud-command{width:378px;left:max(env(safe-area-inset-left), calc(6px * var(--battle-ui-scale)));bottom:max(env(safe-area-inset-bottom), calc(12px * var(--battle-ui-scale)))}.battle-surface[data-battle-layout=portrait] .hud-powers{width:280px;right:max(env(safe-area-inset-right), calc(6px * var(--battle-ui-scale)));bottom:max(calc(env(safe-area-inset-bottom) + 152px * var(--battle-ui-scale)), calc(164px * var(--battle-ui-scale)))}.battle-surface[data-battle-layout=portrait] .hud-fractions{height:55%;bottom:10%}.battle-surface[data-battle-layout=portrait] .hud-send-label{top:6%}.battle-surface .hut-label,.battle-surface .hut-label:not(:disabled):active{min-width:47px;min-height:31px;transform:translate(-50%, -50%) scale(var(--battle-label-scale,1));gap:6px;padding:5px 8px;font-size:14px}.battle-surface .starting-hut-hint{scale:var(--battle-label-scale,1);transform-origin:0 0;transform:translate(-50%,calc(-100% - 24px))}.battle-surface .starting-hut-arrow{transform-origin:50%;rotate:none}.battle-surface .march-arrow .arrow-shadow{stroke-width:calc(9px * var(--battle-label-scale,1))}.battle-surface .march-arrow .arrow-line{stroke-width:calc(4px * var(--battle-label-scale,1));stroke-dasharray:calc(9px * var(--battle-label-scale,1)) calc(7px * var(--battle-label-scale,1))}.battle-surface .march-arrow.has-target .arrow-line{stroke-dasharray:none}}.battle-map-name{white-space:nowrap;color:#edf1df;letter-spacing:.04em;pointer-events:none;background:#233322e6;border-radius:4px;padding:3px 10px;font-size:11px;line-height:1.4;position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%)}.battle-surface[data-battle-layout=portrait] .battle-map-name{white-space:normal;text-align:center;max-width:178px;left:-64px;transform:none}
.is-finished .topbar,.is-finished .hud-menu,.is-finished .hud-opponent,.is-finished .field-bottom,.is-finished .command-panel,.is-finished .battle-progress,.is-finished .hut-label,.is-finished .map-caption{display:none}.recap-overlay{z-index:20;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));background:#101b1426;display:flex;position:fixed;inset:0;overflow-y:auto}.match-report{--recap-plot-height:clamp(100px, calc(100dvh - 380px), 200px);width:min(100%,680px);min-width:0;color:var(--color-text);font-family:var(--font-sans);background:#232b25f5;border-radius:10px;flex-shrink:0;margin:auto;padding:26px 30px 24px;box-shadow:0 12px 40px #101b1440}.recap-header{justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:22px;display:flex}.recap-header h1{font:30px var(--font-display);color:var(--color-fern);letter-spacing:-.025em;margin:0}.recap-header h1:focus{outline:none}.recap-header>span{color:var(--color-muted);font-variant-numeric:tabular-nums;font-size:12px}.recap-tabs{background:var(--color-bg);border-radius:6px;gap:4px;padding:4px;display:flex}.recap-tabs button{min-height:44px;color:var(--color-muted);background:0 0;border-radius:4px;flex:1;padding:9px;font-size:12px}.recap-tabs button:hover{color:var(--color-text);background:var(--color-raised)}.recap-tabs button[aria-pressed=true]{color:var(--color-fern);background:var(--color-raised)}.recap-legend{gap:28px;margin:22px 0 18px;font-size:13px;display:flex}.recap-legend>div{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.recap-player-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.recap-legend strong{font-variant-numeric:tabular-nums;font-size:18px}.recap-line-key{border-top-width:2px;flex-shrink:0;width:20px}.recap-axis-heading{color:var(--color-muted);justify-content:space-between;margin-bottom:12px;font-size:11px;display:flex}.recap-axis-heading time{font-variant-numeric:tabular-nums}.recap-chart-area{grid-template-columns:30px minmax(0,1fr);grid-template-rows:var(--recap-plot-height) 24px;display:grid}.recap-y-axis{color:var(--color-muted);font-variant-numeric:tabular-nums;flex-direction:column;justify-content:space-between;font-size:11px;display:flex}.recap-plot{touch-action:pan-y;cursor:crosshair;min-width:0;min-height:0}.recap-plot:focus-visible{outline:2px solid var(--color-fern);outline-offset:5px}.recap-plot svg{width:100%;height:100%;display:block;overflow:visible}.recap-grid{stroke:var(--color-line);vector-effect:non-scaling-stroke}.recap-cursor{stroke:var(--color-text);stroke-opacity:.6;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}.recap-x-axis{color:var(--color-muted);font-variant-numeric:tabular-nums;grid-column:2;justify-content:space-between;padding-top:9px;font-size:11px;display:flex}.recap-actions{justify-content:center;align-items:center;gap:24px;margin-top:26px;display:flex}.recap-actions .primary{width:auto;min-height:44px;margin:0;padding:12px 18px;font-size:13px}.recap-actions .text-button{min-height:44px;font-size:12px}.recap-unavailable{color:var(--color-muted);padding:30px 0;font-size:13px}@media (max-width:700px){.recap-overlay{padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))}.match-report{--recap-plot-height:clamp(100px, calc(100dvh - 380px), 170px);padding:20px 18px}.recap-header{margin-bottom:18px}.recap-header h1{font-size:26px}.recap-header>span{font-size:11px}.recap-legend{gap:16px;font-size:12px}.recap-legend>div{flex:1;gap:6px}.recap-legend strong{font-size:16px}.recap-line-key{width:14px}.recap-chart-area{grid-template-columns:26px minmax(0,1fr)}.recap-actions{gap:16px}.recap-actions .primary{padding:12px;font-size:12px}}@media (max-height:500px) and (orientation:landscape){.recap-overlay{padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))}.match-report{--recap-plot-height:clamp(72px, calc(100dvh - 216px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 160px);grid-template-rows:auto 1fr auto;grid-template-columns:minmax(140px,1fr) minmax(0,2.4fr);column-gap:24px;width:min(100%,820px);padding:16px;display:grid}.recap-header{flex-direction:column;grid-area:1/1;align-items:flex-start;gap:4px;margin:0 0 16px}.recap-header h1{font-size:26px}.recap-timeline,.recap-unavailable{grid-area:1/2/4;min-width:0}.recap-tabs{padding:2px}.recap-tabs button{padding:8px 6px}.recap-legend{gap:12px;margin:8px 0;font-size:12px}.recap-legend strong{font-size:16px}.recap-line-key{width:14px}.recap-axis-heading{margin-bottom:6px}.recap-actions{flex-direction:column;grid-area:2/1;justify-content:flex-end;align-items:stretch;gap:4px;margin:0}.recap-actions .primary{min-height:44px;padding:10px 8px;font-size:12px}.match-report>.profile-note{grid-area:3/1;margin-top:8px}}