/* The battle rows meet at the center. The resource deck sits beside its own resource area. */
.player-mat,.own-mat:has(.three-resource-rows) {
 --reserve-row:clamp(73px,9.7vh,100px);
 container-type:size;grid-template-columns:clamp(66px,8%,102px) minmax(0,1fr) clamp(56px,7.1%,87px);
 grid-template-rows:16px minmax(0,1fr) var(--reserve-row);
 padding:3px 6px;gap:3px 6px;
}
.enemy-mat,.enemy-mat:has(.three-resource-rows){grid-template-rows:16px var(--reserve-row) minmax(0,1fr)}
.mat-heading{padding:0 1px 2px}.protection,.enemy-mat .protection {
 display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:2px;padding:1px 3px;
 border:1px solid #59718a4d;border-radius:5px;background:#0c203055;
 --side-card-w:clamp(35px,24cqh,68px);--shield-step:clamp(2px,1cqh,4px);
}
.enemy-mat .protection{flex-direction:column-reverse}
.protection .base-zone,.protection .shield-zone{height:auto;min-height:0;flex:none;width:100%;align-items:center}
.base-zone .unit-wrap,.base-zone .empty-base{width:var(--side-card-w);max-width:100%!important}
.base-zone .unit-wrap .stats{bottom:-2px}.base-zone .empty-base{height:auto;aspect-ratio:5/7}
.zone-label{font:600 10px sans-serif;letter-spacing:.04em;line-height:12px;margin-bottom:2px;color:#afc2d4}
.shield-stack{flex:none;width:var(--side-card-w);min-height:0;height:calc(var(--side-card-w)*1.4 + max(0,var(--count) - 1)*var(--shield-step))}
.shield,.main-deck,.hidden-flying-card,.shield-back {background:#102838 url('cards/back-main.webp') center/100% 100% no-repeat}
.shield{width:100%;height:auto;aspect-ratio:5/7;border:1px solid #91a8be8a;box-shadow:0 1px 3px #0009;border-radius:3px}
.combat-lane{min-width:0;border:1px solid #67869945;border-radius:5px;padding:3px 5px 7px;background:linear-gradient(110deg,#17314755,#233d4f18)}
.unit-slots{max-width:100%;gap:4px;grid-template-columns:repeat(6,minmax(0,1fr))}
.combat-lane .slot{max-height:none;height:100%;border:0;background:none}
.combat-lane .slot.empty{border:1px dashed #93b9d51a;border-radius:4px}
.combat-lane .unit-wrap{width:min(90%,clamp(50px,39cqh,115px));max-width:none}
.deck-rail{align-self:stretch;display:grid;grid-template-rows:minmax(0,1fr) var(--reserve-row);justify-content:stretch;justify-items:center;gap:3px;border:1px solid #59718a4d;background:#0d203055;border-radius:5px;padding:0}
.enemy-mat .deck-rail{grid-template-rows:var(--reserve-row) minmax(0,1fr)}
.enemy-mat .deck-rail .main-deck{grid-row:2}.enemy-mat .deck-rail .trash-pile{grid-row:1}
.main-deck,.trash-pile button{width:clamp(32px,22cqh,63px);height:auto;aspect-ratio:5/7;border-radius:4px}
.main-deck{margin:0 2px 9px 0;place-self:center;box-shadow:2px 2px #3d5366,4px 4px #122335}
.main-deck b,.resource-deck small{font:bold 11px monospace;position:absolute;bottom:2px;right:2px;color:white;background:#0b192ce6;border:1px solid #c8d6e366;padding:1px 3px;border-radius:3px}
.main-deck small{top:100%;margin-top:3px;line-height:1}.trash-pile{line-height:1;align-self:center}
.trash-pile button{height:min(24cqh,66px);width:auto;max-width:100%;color:#afc7da;border:1px dashed #94b1c866}
.trash-pile small,.main-deck small{font:600 9px sans-serif;letter-spacing:0}
.resource-zone,.enemy-mat .resource-zone{--res-h:clamp(41px,22cqh,67px);--res-w:calc(var(--res-h)*.7143);--res-step:calc(var(--res-w)*.68);display:grid;grid-template-columns:clamp(47px,11%,83px) minmax(0,1fr);gap:4px;background:none;border:0;padding:0}
.resource-stock,.resource-play{min-width:0;border:1px solid #59718a4d;border-radius:5px;background:#122b3c7d}
.resource-stock{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px}
.resource-deck{background:#17252f url('cards/back-resource.webp') center/100% 100% no-repeat;width:var(--res-w);height:var(--res-h);border:1px solid #869caa;box-shadow:2px 2px #314453;position:relative}
.resource-play{padding:2px 5px;display:flex;flex-direction:column;justify-content:center}
.choosing-payment .resource-play{border-color:#ccaf68;background:#253a47}
.resource-heading,.choosing-payment .resource-heading{position:relative;display:flex;justify-content:flex-start;align-items:center;min-height:20px;height:auto;padding:0;gap:7px;line-height:1}
.resource-heading span,.resource-heading b{font-size:10px;letter-spacing:0}
.resource-heading .fixed-resource-controls{position:static;margin-left:auto;display:flex;gap:4px;transform:none}
.fixed-resource-controls button,.fixed-resource-controls .primary{padding:2px 6px;min-height:21px;font-size:10px}
.resource-line{display:block;min-height:0;height:auto;margin:0}
.resources{width:100%;max-width:100%;display:flex;gap:clamp(6px,1.2vw,16px);align-items:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:3px 2px;min-height:var(--res-h)}
.resource-stack{display:flex;isolation:isolate;min-width:calc(var(--res-w) + (var(--n) - 1)*12px);width:calc(var(--res-w) + (var(--n) - 1)*var(--res-step));flex:0 1 auto}
.resource-stack .resource,.resource-stack .resource.rested,.resource-stack .resource.pay{
 position:relative;flex:1 1 0;min-width:0;width:auto;height:var(--res-h);padding:0;border:0;margin:0;display:block;
 background:none;transform:none;opacity:1;border-radius:3px;box-shadow:none;
}
.resource-stack .resource:last-child{flex:0 0 var(--res-w)}
.resource-face{display:block;pointer-events:none;position:absolute;left:0;top:0;width:var(--res-w);height:var(--res-h);border:1px solid #8298aa;border-radius:3px;overflow:hidden;background:#16283b;box-shadow:-2px 1px 3px #06121a88;color:white}
.resource-face img{width:100%;height:100%;object-fit:cover;display:block}
.resource-face small{position:absolute;left:1px;top:1px;min-width:12px;background:#082037d9;border-radius:2px;padding:1px;color:#eef9ff;font:700 9px monospace;text-align:center;opacity:1}
.ex-stack .resource-face{border-color:#ebcb84}.ex-stack .resource-face small{color:#ffdf93}
.resource.rested .resource-face{filter:saturate(.35) brightness(.69)}.resource.rested .resource-face img{transform:rotate(90deg) scale(1.43)}
.resource.pay .resource-face{border:2px solid #ffdd72;box-shadow:inset 0 0 0 1px #ffdf91}.resource.pay .resource-face small{color:#17202b;background:#ffe697}
.resource.available:hover,.resource.available:focus-visible{z-index:2}.resource.available:hover .resource-face,.resource:focus-visible .resource-face{outline:2px solid #9bf8ed;outline-offset:-2px}
@media(max-width:740px){
 .player-mat{grid-template-columns:clamp(46px,13vw,72px) minmax(0,1fr) clamp(37px,10vw,56px);--reserve-row:clamp(74px,10vh,92px);gap:2px;padding:2px}
 .protection,.enemy-mat .protection{--side-card-w:min(10.8vw,24cqh);padding:0 1px}
 .deck-rail .main-deck,.deck-rail .trash-pile button{width:min(8vw,21cqh);height:auto}
 .resource-zone,.enemy-mat .resource-zone{grid-template-columns:clamp(34px,10%,45px) minmax(0,1fr);--res-h:clamp(37px,19cqh,50px);gap:2px}
 .resource-play{padding:1px 2px}.resources{gap:6px}.resource-stack{min-width:calc(var(--res-w) + (var(--n) - 1)*15px)}
 .combat-lane{padding:1px 2px 5px}.unit-slots{gap:2px}.combat-lane .unit-wrap{width:95%}
 .zone-label{font-size:8px}.resource-heading span,.resource-heading b,.payment-progress{font-size:9px}.fixed-resource-controls button,.fixed-resource-controls .primary{min-height:22px;padding:2px 4px;font-size:9px}
}
.card-in-flight,.shield-in-flight{pointer-events:none;position:fixed;z-index:271;margin:0}
.card-in-flight img,.played-face img{display:block;width:100%;border-radius:5px;aspect-ratio:5/7}
.shield-in-flight{perspective:900px}
.shield-turner{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.shield-back,.shield-front{position:absolute;inset:0;width:100%;height:100%;border-radius:4px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.shield-front{transform:rotateY(180deg);object-fit:fill}
.shield-in-flight figcaption{visibility:hidden;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);max-width:min(80vw,340px);width:max-content;text-align:center;color:#e7f7ff;background:#102638f5;padding:5px 9px;border-radius:4px;font-size:13px}
.shield-in-flight.reading figcaption{visibility:visible}
.target-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px;margin:8px 0}
.effect-tile{position:relative;min-width:0;display:flex;flex-direction:column;gap:4px;cursor:pointer;text-align:left;line-height:1.24;padding:4px;background:#102233;border:1px solid #4c687d;border-radius:7px}
.effect-tile input{position:absolute;inset:auto;width:1px;height:1px;opacity:0}
.effect-tile .tile-face{position:relative;display:block;width:min(100%,132px);margin:auto}
.tile-face img{display:block;width:100%;height:auto;aspect-ratio:5/7;object-fit:contain;border-radius:4px}
.tile-face i{visibility:hidden;position:absolute;right:2px;top:2px;border-radius:50%;padding:3px 5px;color:#092635;background:#94f2dd;font:bold 14px system-ui}
.effect-tile b{font-size:12px;color:#e3eff8;overflow-wrap:anywhere}.effect-tile small{font-size:10px;color:#a8c3d3}
.effect-tile:hover,.effect-tile:focus-within{border-color:#9ee5ff}
.effect-tile:has(input:checked){border-color:#8bf1d2;background:#193a40;box-shadow:0 0 0 2px #87f1d58a}.effect-tile:has(input:checked) i{visibility:visible}
#play-target-form fieldset{border:0;padding:0}.looked-cards .effect-tile{width:100%}.looked-cards>div{width:110px}
@media(max-width:460px){.target-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.effect-tile{padding:3px}.effect-tile b{font-size:11px}}

/* Keep resource piles inside their row even at a short desktop height. */
.player-mat,.own-mat:has(.three-resource-rows){--reserve-row:clamp(82px,11vh,106px)}
.resource-zone,.enemy-mat .resource-zone{min-height:0}
.resource-play,.resource-stock{min-height:0}
.resources{flex-wrap:nowrap}
.ex-stack .resource:last-child .resource-face::after{content:'EX';position:absolute;right:1px;bottom:1px;background:#312713e6;border-radius:2px;color:#ffe097;font:700 8px monospace;padding:1px 2px}
.trash-pile button{position:relative;overflow:hidden}
.trash-pile .trash-art{width:100%;height:100%;display:block;object-fit:cover}
.trash-pile .pile-count{position:absolute;bottom:2px;right:2px;padding:1px 3px;color:#fff;background:#152333df;border-radius:2px;font:bold 10px monospace}
@media(max-width:740px){
 .player-mat:has(.double-resource-line){--reserve-row:clamp(109px,16vh,140px)}
 .double-resource-line .resources{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
 .double-resource-line .resource-stack{max-width:100%;min-width:0;flex:none}
 .double-resource-line .resource-face,.double-resource-line .resource-stack .resource{height:var(--res-h)}
 .resource-zone.double-resource-line{--res-h:clamp(31px,5.4vh,48px)}
}