/* Mirrored playmat: protection left, battle center, resources behind, piles right. */
.battle-board{grid-template-rows:minmax(195px,1fr) 48px minmax(195px,1fr) 132px;padding:5px 14px 0;gap:2px}
.player-mat{min-height:0;display:grid;grid-template-columns:86px minmax(0,1fr) 60px;grid-template-rows:21px minmax(0,1fr) 64px;gap:4px 12px;border:1px solid #9ac8e21c;border-radius:9px;padding:5px 9px;background:linear-gradient(130deg,#1e3b511a,#10223644)}
.enemy-mat{grid-template-rows:21px 60px minmax(0,1fr);background:linear-gradient(130deg,#40252b1c,#10223644)}
.mat-heading{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font:10px monospace;letter-spacing:1px;color:#8ca8bf;border-bottom:1px solid #90b7cf16;padding-bottom:5px}.mat-heading b{color:#83d4f4}.mat-heading b span{font-weight:400;color:#a1b5c5;margin-left:7px}.enemy-mat .mat-heading b{color:#ffb9a2}.mat-heading i{font-style:normal;font-size:8px;margin-left:8px;opacity:.6}
.protection{grid-column:1;grid-row:2/4;display:flex;flex-direction:column;align-items:center;justify-content:space-between;position:relative;border-right:1px solid #729cb32a;padding-right:6px;gap:8px;min-height:0}.enemy-mat .protection{flex-direction:column-reverse}.base-zone{width:100%;flex-shrink:0}.base-zone .unit-wrap{width:42px;max-width:42px;margin:auto}.base-zone .empty-base{height:58px;border:1px dashed #6c8ca82e;font-size:9px;border-radius:4px}.zone-label{font:8px monospace;letter-spacing:1px;margin-bottom:4px;color:#9fb5c5}.zone-label b{color:#c9ecfd}.base-zone .stats{font-size:10px;bottom:-8px}.base-zone .stats b{padding:2px 5px}.shield-zone{width:100%;flex:1;min-height:75px;text-align:center;display:flex;flex-direction:column}.shield-stack{position:relative;flex:1;min-height:60px;width:49px;margin:0 auto}.shield{position:absolute;left:0;top:calc(var(--i)*8px);width:47px;height:61px;background:repeating-linear-gradient(125deg,#29455f 0 1px,#122b42 1px 7px);border:1px solid #799bb8;border-radius:4px;box-shadow:0 3px 6px #0007,inset 0 0 0 4px #102235;color:#b7d4e7;display:flex;justify-content:center;align-items:center;font:bold 10px monospace}.shield small{position:absolute;bottom:4px;right:5px;font-size:8px}.shield span{border:1px solid #6b8baa70;padding:7px 3px;font-size:8px}.no-shield{font-size:9px;color:#758fa5;margin-top:15px}.target-area{box-shadow:0 0 0 2px #ff9f7d;background:#bc68451a;animation:targetPulse 1s infinite;border-radius:5px}.attack-area-button{position:absolute;left:-5px;right:-5px;top:45%;z-index:25;padding:8px 2px;font-size:10px;background:#e4ac79;color:#201b17;border-color:#ffe2c0}
.combat-lane{grid-column:2;grid-row:2;min-height:0;display:flex;align-items:center}.enemy-mat .combat-lane{grid-row:3}.unit-slots{width:100%;height:100%;max-height:none;gap:9px;align-items:center}.slot{height:calc(100% - 15px);min-height:0;max-height:148px;border:1px dashed #a9cce322;position:relative}.slot.empty:after{content:''}.slot-number{font:10px monospace;color:#6b8fa342}.unit-wrap{width:min(82%,calc((100dvh - 391px)*.35));max-width:96px;aspect-ratio:5/7}.unit-wrap .card .ko-label{font-size:8px;min-height:22px}.unit-wrap .stats{font-size:12px;bottom:-9px}.unit-wrap .stats b{min-width:24px;padding:3px 5px}.unit-wrap .stats b:before{font-size:7px;opacity:.7;margin-right:3px}.unit-wrap .ap:before{content:'AP'}.unit-wrap .hp:before{content:'HP'}.base-zone .stats b:before{display:none}.unit-wrap .pilot{top:18px;left:4px;width:calc(100% - 8px);height:100%}.unit-wrap.rested .card{transform:rotate(90deg) scale(.78)}.unit-wrap.rested .pilot{transform:rotate(90deg) translateX(13px) scale(.77)}.status-tag{font-size:7px;right:-5px}.link-tag{font-size:8px;top:-12px;white-space:nowrap}.unit-wrap .hand-actions{padding-bottom:3px;z-index:30}.unit-wrap .hand-actions button{font-size:9px;padding:6px 8px}.pairing .hand-card.selected,.paying .hand-card.selected{transform:translateX(var(--x)) translateY(-8px) rotate(0deg)}.pair-host .card{cursor:crosshair}.link-candidate .card{animation:linkCandidate 1s ease-in-out infinite;outline:2px solid #98f5d8}.link-candidate .candidate{color:#b5ffe9;font-weight:900;top:-16px;background:#193d3e;padding:2px 0}.link-complete{filter:drop-shadow(0 0 12px #8fffe5)}.link-complete-label{position:absolute;left:-10%;right:-10%;top:40%;font:900 23px monospace;text-align:center;color:#132b36;background:#a7ffe6;padding:5px 0;z-index:8;animation:linkCandidate .35s infinite}
.resource-zone{grid-column:2;grid-row:3;min-width:0;position:relative;border-top:1px solid #adc9db22;padding:3px 7px;background:#0a1b2944;border-radius:5px}.enemy-mat .resource-zone{grid-row:2;border-top:0;border-bottom:1px solid #adc9db22}.resource-heading{display:flex;align-items:center;justify-content:space-between;min-height:22px;color:#8ca6bd;font-size:9px;gap:5px;white-space:nowrap}.resource-heading b{color:#c3e2ed;font-weight:600;font-size:9px;margin-right:4px}.resource-line{display:flex;gap:12px;align-items:center;min-height:30px}.resource-deck{position:relative;width:21px;height:27px;flex-shrink:0;border:1px solid #719d9a;border-radius:3px;display:grid;place-content:center;color:#80ada8;background:#142d35;font-size:9px}.resource-deck small{position:absolute;right:-5px;bottom:-3px;padding:0 2px;background:#27434e;border-radius:2px;font:8px monospace}.resources{display:flex;gap:8px;flex-wrap:nowrap;min-width:0}.resource{width:21px;height:29px;min-width:16px;font-size:9px}.resource.rested{transform:rotate(90deg) scale(.77);opacity:.4}.resource.pay{transform:translateY(-3px);box-shadow:0 0 0 2px #ffe18c,0 0 10px #ffe18c66}.choosing-payment{border:1px solid #ebd286!important;box-shadow:0 0 20px #e9c56722;background:#2a394b;z-index:120}.payment-controls{display:flex;align-items:center;gap:5px}.payment-controls span{color:#ffe9ab;font-size:10px}.payment-controls button{font-size:10px;padding:4px 9px;white-space:nowrap}.cancel-payment{border:1px solid #c4d7e5;background:#162a3d;color:#eef6ff}.payment-hint{font-size:9px;color:#e4d19b;margin-left:auto}.paying .hand-zone{pointer-events:none}
.deck-rail{grid-column:3;grid-row:2/4;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:19px;border-left:1px solid #729cb322;padding-left:5px}.main-deck{position:relative;width:44px;height:61px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #6c8daa;border-radius:4px;background:repeating-linear-gradient(125deg,#2d475e 0 1px,#172a3c 1px 6px);box-shadow:3px 3px #3a4b5d,5px 5px #1b2a3c}.main-deck span{font:8px monospace;color:#8facbf}.main-deck b{font:700 18px monospace;color:#d3e8f6;margin-top:4px}.main-deck small{position:absolute;top:calc(100% + 6px);font:8px monospace;color:#9bb1c3}.trash-pile{text-align:center}.trash-pile button{width:44px;height:51px;padding:0;background:#122434;border:1px dashed #667e91;font:15px monospace}.trash-pile small{display:block;margin-top:4px;font:8px monospace;color:#8da2b5}
.turn-counter{font:11px monospace;align-self:center;color:#acc4d5;margin-right:12px}.phase-controls{display:flex;gap:5px;flex-shrink:0}.command-bar{border-radius:4px;padding:4px 11px;z-index:35}.phase-readout small{font-size:10px}.hand-card{width:116px;height:162px;bottom:-37px}.hand-zone .hand-label{font-size:8px;bottom:8px}.resolving .command-bar button,.resolving .hand-actions{pointer-events:none;opacity:.45}.inspector .preview{max-height:32vh}.card .ko-label{pointer-events:none}
/* Events are presented before the next immutable game state reaches the board. */
#fx{pointer-events:none}.combat-route{position:fixed;inset:0;width:100%;height:100%;z-index:248;overflow:visible;pointer-events:none}.combat-route path{fill:none;stroke-linejoin:round}.combat-route .route-shadow{stroke-width:12;opacity:.17;filter:blur(3px)}.combat-route .route-core{stroke-width:3;stroke-dasharray:12 5;animation:beam .45s linear infinite;filter:drop-shadow(0 0 4px #88dfff)}.combat-route.persistent{z-index:140;opacity:.64}.combat-route.persistent .route-core{stroke-width:2;stroke-dasharray:7 6}.combat-route .reticle{animation:reticlePulse .6s infinite}.firing{filter:drop-shadow(0 0 10px #c4faff)}.taking-hit .card{animation:cardShake .35s}.damage-number{position:absolute;left:50%;top:15%;transform:translateX(-50%);font:900 30px monospace;color:#fff5d8;text-shadow:0 3px 0 #932e2b,0 0 14px #ff6045;z-index:150;pointer-events:none;animation:damageFloat 1s both}.stats b.zero{background:#de4437!important;color:#fff;box-shadow:0 0 14px #ff7960}.zero-label{position:absolute;top:40%;left:0;right:0;z-index:9;color:#fff;background:#d83d32eb;text-align:center;font:900 15px monospace;padding:4px}.destroying{animation:destroyCard .65s both}.explosion{position:absolute;inset:-30%;border-radius:50%;z-index:16;background:radial-gradient(circle,#fff9c7 0 6%,#ffeaa0aa 10%,#ff704b77 25%,transparent 65%);animation:explosion .65s both}.shield-reveal{position:fixed;inset:0;z-index:270;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#142c48e8,transparent 66%);gap:17px}.reveal-heading{text-align:center}.reveal-heading small{display:block;color:#bcd9ec;font-size:12px;margin-bottom:8px}.reveal-heading b{font:900 28px monospace;letter-spacing:5px;color:#d6f4ff;text-shadow:0 0 18px #77d9ff88}.flip-shell{width:190px;height:266px;perspective:1100px}.flip-card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.3,1)}.flipped .flip-card{transform:rotateY(180deg)}.flip-front,.flip-back{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;border-radius:10px;border:2px solid #aad5ed;box-shadow:0 10px 55px #0008}.flip-front{transform:rotateY(180deg);object-fit:cover}.flip-back{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:35px;background:repeating-linear-gradient(135deg,#244561 0 2px,#10293f 2px 9px);text-align:center;font:900 19px monospace;color:#b2d5e7;letter-spacing:3px;box-shadow:inset 0 0 0 10px #102439,0 0 40px #78d5ff55}.flip-back b{font:12px monospace}.reveal-caption{text-align:center;background:#0f2338e6;border:1px solid #8dbcd544;border-radius:6px;padding:11px 23px;min-width:260px}.reveal-caption b{display:block;font-size:17px}.reveal-caption span{display:block;font-size:12px;color:#a9e5ff;margin-top:5px}.burst-announcement{position:fixed;z-index:270;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:24px;background:#132c46f5;border:1px solid #a3eaff;padding:20px 30px;box-shadow:0 0 80px #59d7ff3d;min-width:470px}.burst-announcement img{width:100px;border-radius:5px}.burst-announcement div{display:flex;flex-direction:column;gap:10px}.burst-announcement small{color:#b5d6e5;font-size:12px}.burst-announcement b{font:900 22px monospace;color:#a8f5ff;white-space:nowrap}.burst-announcement span{font-size:16px}.effect-notice{position:fixed;left:50%;bottom:28%;transform:translateX(-50%);max-width:80vw;padding:14px 22px;border:1px solid #92d2ee77;background:#11283ef5;border-radius:6px;z-index:260;font-size:14px;box-shadow:0 8px 30px #0005}.flying-card{width:90px;height:126px;z-index:280}
@keyframes linkCandidate{50%{box-shadow:0 0 0 2px #b5ffe5,0 0 24px #70f9d780}}
@keyframes reticlePulse{50%{stroke-width:4;opacity:.7}}@keyframes cardShake{20%,60%{translate:-4px 1px}40%,80%{translate:4px -1px}}
@keyframes damageFloat{0%{opacity:0;translate:0 12px}20%,70%{opacity:1}100%{opacity:0;translate:0 -15px}}
@keyframes destroyCard{0%{filter:brightness(2)}35%{filter:brightness(4);opacity:1}100%{transform:scale(.5) rotate(7deg);opacity:0}}
@keyframes explosion{0%{scale:.2;opacity:0}20%{opacity:1}100%{scale:1.8;opacity:0}}
@media(min-height:850px){.battle-board{grid-template-rows:minmax(235px,1fr) 50px minmax(235px,1fr) 160px}.player-mat{grid-template-columns:98px minmax(0,1fr) 67px}.unit-wrap{max-width:112px;width:87%}.slot{max-height:175px}.base-zone .unit-wrap{width:51px;max-width:51px}.shield{top:calc(var(--i)*12px);width:53px;height:72px}.shield-stack{width:55px}.hand-card{width:135px;height:189px}.base-zone .empty-base{height:72px}}
@media(max-width:1100px){.battle-board{padding:4px 8px 0}.player-mat{grid-template-columns:65px minmax(0,1fr) 47px;gap:4px 8px;padding:4px 6px}.unit-slots{gap:6px}.resource{width:18px;height:27px}.resources{gap:6px}.payment-hint{display:none}.payment-controls button{padding:4px 7px;font-size:9px}.main-deck{width:36px;height:52px}.trash-pile button{width:36px;height:42px}.unit-wrap .stats{font-size:10px}.unit-wrap .stats b{min-width:20px;padding:3px}.unit-wrap .stats b:before{font-size:6px;margin-right:2px}}
@media(max-width:740px){.battle-board{height:calc(100dvh - 48px);grid-template-rows:minmax(190px,1fr) 46px minmax(190px,1fr) 105px;padding:3px 4px 0}.player-mat{grid-template-columns:47px minmax(0,1fr) 33px;grid-template-rows:18px minmax(0,1fr) 59px;gap:3px 5px;padding:3px 4px}.enemy-mat{grid-template-rows:18px 50px minmax(0,1fr)}.mat-heading{font-size:8px;letter-spacing:0}.mat-heading i{display:none}.unit-slots{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:1fr;gap:4px}.slot{height:100%;border:0}.unit-wrap{width:94%;max-width:64px}.base-zone .unit-wrap{width:31px;max-width:31px}.base-zone .empty-base{height:42px;font-size:7px}.zone-label{font-size:7px;letter-spacing:0}.shield{width:31px;height:43px;top:calc(var(--i)*7px)}.shield-stack{width:32px;min-height:65px}.shield span{font-size:6px;padding:3px}.shield small{font-size:6px;bottom:2px;right:3px}.protection{padding-right:2px;gap:5px}.main-deck{width:26px;height:38px}.main-deck span{font-size:6px}.main-deck b{font-size:12px}.main-deck small,.trash-pile small{font-size:6px}.trash-pile button{width:26px;height:33px;font-size:11px}.deck-rail{gap:18px;padding-left:2px}.unit-wrap .stats{font-size:9px;bottom:-8px}.unit-wrap .stats b{min-width:12px;padding:2px}.unit-wrap .stats b:before{display:none}.unit-wrap .card .ko-label{font-size:6px;min-height:13px;padding:2px}.unit-wrap .pilot{top:10px;left:2px;width:calc(100% - 4px)}.unit-wrap .hand-actions button{font-size:8px;padding:5px}.resource-heading{font-size:7px;min-height:19px;gap:2px}.resource-heading b{font-size:7px;margin-right:2px}.resource-zone{padding:2px 3px}.resource-line{gap:6px;min-height:28px}.resource-deck{width:16px;height:24px;font-size:7px}.resources{display:flex;gap:4px}.resource{min-width:9px;width:13px;height:22px;font-size:7px}.payment-controls{gap:3px}.payment-controls span{font-size:8px}.payment-controls button{font-size:8px;padding:4px}.choosing-payment .resource-heading{flex-wrap:wrap}.choosing-payment{margin-top:-17px;min-height:76px}.hand-card{width:92px;height:129px;bottom:-28px}.turn-counter{font-size:9px;margin-right:3px}.phase-readout{font-size:9px}.phase-readout small{font-size:8px;max-width:70vw}.command-bar{padding:3px 5px}.hand-label{display:none}.link-tag{font-size:6px}.link-candidate .candidate{font-size:6px;top:-13px}.attack-area-button{font-size:7px;padding:7px 0}.burst-announcement{min-width:0;width:90vw;padding:14px;gap:14px}.burst-announcement b{font-size:16px}.burst-announcement img{width:75px}.flip-shell{width:155px;height:217px}.reveal-heading b{font-size:22px}.effect-notice{font-size:11px;width:max-content;max-width:90vw}}
@media(max-height:650px) and (min-width:741px){.battle-board{grid-template-rows:minmax(165px,1fr) 42px minmax(165px,1fr) 105px}.player-mat{grid-template-rows:17px minmax(0,1fr) 52px}.enemy-mat{grid-template-rows:17px 52px minmax(0,1fr)}.shield{height:45px;width:34px;top:calc(var(--i)*5px)}.shield-stack{width:36px;min-height:57px}.base-zone .unit-wrap{width:33px;max-width:33px}.unit-wrap{max-width:64px;width:70%}.resource-heading{min-height:19px}.resource{height:24px}.hand-card{width:98px;height:137px}.base-zone .empty-base{height:43px}}
@media(prefers-reduced-motion:reduce){.combat-route .route-core,.link-candidate .card{animation:none}.flip-card{transition-duration:.001ms}}
.resolving .payment-controls{visibility:hidden}@media(min-width:741px) and (max-height:849px){.unit-wrap{max-width:88px}.base-zone .unit-wrap{max-width:42px}}
@media(max-width:740px){.payment-controls button{min-width:42px;min-height:30px;font-size:10px}.choosing-payment .resource-heading{min-height:32px}}
.player-mat{--shield-step:8px}.shield{top:calc(var(--i)*var(--shield-step))}.own-mat .shield{top:calc((var(--count) - 1 - var(--i))*var(--shield-step))}@media(min-height:850px){.player-mat{--shield-step:12px}}@media(max-width:740px){.player-mat{--shield-step:7px}}@media(max-height:650px) and (min-width:741px){.player-mat{--shield-step:5px}}
