/* A tabletop formation: base alongside the lead unit, shield and resources behind them. */
.battle-board{grid-template-rows:minmax(0,1fr) 37px minmax(0,1fr) clamp(85px,13vh,151px);gap:3px;padding:3px 7px 0}
.player-mat,.own-mat:has(.three-resource-rows){
 --reserve-row:clamp(83px,14vh,144px);--formation-w:clamp(86px,47cqh,162px);
 grid-template-columns:clamp(83px,11%,157px) minmax(0,1fr) clamp(63px,8%,117px);
 grid-template-rows:15px minmax(0,1fr) var(--reserve-row);padding:2px 3px;gap:2px 3px
}
.enemy-mat,.enemy-mat:has(.three-resource-rows){grid-template-rows:15px var(--reserve-row) minmax(0,1fr)}
.mat-heading{line-height:14px}.protection,.enemy-mat .protection{--side-card-w:clamp(62px,34cqh,114px);display:grid;grid-template-rows:minmax(0,1fr) var(--reserve-row);justify-items:center;align-items:center;gap:2px;padding:0 2px;position:relative}
.enemy-mat .protection{grid-template-rows:var(--reserve-row) minmax(0,1fr)}
.enemy-mat .base-zone{grid-row:2;grid-column:1}.enemy-mat .shield-zone{grid-row:1;grid-column:1}
.protection .base-zone,.protection .shield-zone{position:relative;min-height:0;height:100%;justify-content:center;align-items:center;display:flex;flex-direction:column;margin:0}
.protection .base-zone .zone-label,.protection .shield-zone .zone-label{position:absolute;top:0;left:2px;z-index:3;border-radius:2px;color:#e5f4ff;background:#102337e6;padding:1px 4px;line-height:11px;margin:0}
.protection .base-zone .unit-wrap,.base-zone .empty-base{width:min(96%,var(--formation-w),49cqh);max-width:none!important;aspect-ratio:.90;height:auto;max-height:100%}
.protection .shield-stack{width:min(90%,var(--side-card-w),calc((var(--reserve-row) - 13px)*.86));height:calc(var(--reserve-row) - 9px);--shield-step:1.55px}
.shield-stack .shield{height:calc(100% - 8px);aspect-ratio:auto;width:100%}
.combat-lane{padding:1px 2px 5px;overflow:visible}
.combat-lane .unit-slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:minmax(0,1fr);width:min(100%,calc(var(--formation-w)*6 + 25px));max-width:none;margin:0;gap:5px;justify-content:start;align-items:center}
.combat-lane .unit-wrap{width:min(100%,51cqh);max-width:none!important;aspect-ratio:.90;max-height:100%}
.combat-lane .slot{width:100%;justify-items:start}.combat-lane .slot.empty{border-color:#839bad14}
.unit-wrap .card,.base-zone .card{height:100%;aspect-ratio:auto}.unit-wrap .card img{object-fit:cover;object-position:50% 44%}
.unit-wrap .card .ko-label{font-size:clamp(9px,1.12vh,13px);padding:3px 2px 5px;min-height:18px}
.unit-wrap .stats{bottom:-4px}.unit-wrap .stats b{min-width:25px;padding:2px 4px}.unit-wrap .stats .ap:before{content:'공'}.unit-wrap .stats .hp:before{content:'체'}
.resource-zone,.enemy-mat .resource-zone{--res-h:calc(var(--reserve-row) - 25px);--res-w:calc(var(--res-h)*.93);--res-step:clamp(23px,calc(var(--res-w)*.43),45px);grid-template-columns:calc(var(--res-w) + 9px) minmax(0,1fr);gap:3px}
.resource-stock{gap:1px}.resource-play{padding:0 3px}.resource-heading{min-height:18px}.resources{gap:10px;padding:1px 1px}.resource-face img{object-fit:fill}
.deck-rail{padding:1px}.main-deck,.trash-pile button{width:min(87%,29cqh);height:calc(var(--reserve-row) - 16px);aspect-ratio:auto;margin:0}
.trash-pile{width:100%}.trash-pile button{height:calc(var(--reserve-row) - 19px)}
@media(max-width:740px){
 .battle-board{grid-template-rows:minmax(0,1fr) 39px minmax(0,1fr) clamp(75px,10dvh,98px);padding:2px 3px 0}
 .player-mat{grid-template-columns:clamp(46px,15vw,83px) minmax(0,1fr) clamp(35px,10vw,57px);--reserve-row:clamp(75px,11dvh,98px);gap:2px}
 .resource-zone,.enemy-mat .resource-zone{--res-w:calc(var(--res-h)*.78);grid-template-columns:calc(var(--res-w) + 4px) minmax(0,1fr)}
 .player-mat:has(.double-resource-line){--reserve-row:clamp(104px,15dvh,137px)}
 .resource-zone.double-resource-line{--res-h:clamp(34px,5.6vh,53px)}
 .resource-stack{min-width:min(100%,calc(var(--res-w) + (var(--n) - 1)*15px))}
 .combat-lane .unit-slots{width:100%;gap:3px}
 .unit-wrap .card .ko-label{font-size:9px}.unit-wrap .stats b{min-width:16px;padding:2px}
 .deck-rail .main-deck,.deck-rail .trash-pile button{width:90%;height:min(72px,var(--reserve-row));max-height:75%}
 .resource-heading{gap:2px}.fixed-resource-controls{gap:1px}
}
@media(max-width:580px){
 .combat-lane .unit-slots{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:4px}
 .combat-lane .unit-slots:not(:has(.slot:nth-child(4) .unit-wrap)){grid-template-rows:minmax(0,1fr)}
 .combat-lane .unit-slots:not(:has(.slot:nth-child(4) .unit-wrap)) .slot:nth-child(n+4){display:none}
 .combat-lane .unit-wrap{width:min(100%,30cqh);height:auto;max-height:100%}
 .combat-lane .slot.empty{border-color:transparent}
}
.card-inspection{color:#e8f4ff;width:min(665px,92vw);max-height:83dvh;margin:auto;padding:20px;z-index:190;border-color:#89aac8;box-shadow:0 14px 70px #0009}
.card-inspection::backdrop{background:#0613208f}.card-inspection .modal-head{margin-bottom:10px}
.detail-layout{display:grid;grid-template-columns:minmax(120px,36%) minmax(0,1fr);gap:18px;align-items:start}.detail-layout>img{width:100%;border-radius:6px}.detail-layout p{white-space:pre-line}.detail-layout .detail-facts{color:#bed6e9}
.routing-cards{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.routing-cards article{width:clamp(116px,22vw,148px);background:#102336;border:1px solid #45637a;border-radius:7px;padding:7px}.routing-cards article>img{display:block;width:100%;border-radius:4px;aspect-ratio:5/7}.routing-cards article>span{display:block;font-weight:bold;font-size:12px;margin:5px 0}
.route-picks{display:flex;flex-wrap:wrap;gap:3px}.route-picks button,.route-order button{padding:5px;font-size:11px;flex:1 0 auto}.route-picks button[aria-pressed=true],.difficulty-options input:checked+span{background:#b4f4e3;color:#0c2530;border-color:#b4f4e3}.route-order{display:flex;align-items:center;justify-content:center;gap:4px;min-height:25px;margin-top:4px;color:#acccde}.route-order button{flex:0 0 auto;padding:2px 4px}.route-order output{font-size:10px}
.difficulty-picker{border:0;padding:0;margin:0}.difficulty-picker legend{font-size:11px;color:#b2c5d5;margin-bottom:4px}.difficulty-options{display:flex;gap:3px}.difficulty-options label{position:relative;display:inline-flex;cursor:pointer}.difficulty-options input{position:absolute;opacity:0;width:1px;height:1px}.difficulty-options span{padding:5px 10px;border:1px solid #49667c;border-radius:4px;font-weight:600;color:#dceaf4}.difficulty-options input:focus-visible+span{outline:2px solid #e2fffb;outline-offset:2px}.launch-bar{flex-wrap:wrap;row-gap:8px}
@media(max-width:480px){.detail-layout{grid-template-columns:minmax(88px,33%) minmax(0,1fr);gap:10px}.card-inspection{padding:12px}.detail-layout h2{font-size:18px}.detail-layout p{font-size:12px}.launch-bar .difficulty-picker{width:auto}.routing-cards{gap:6px}}

.protection,.enemy-mat .protection{grid-template-columns:minmax(0,1fr)}.own-mat .base-zone{grid-row:1;grid-column:1}.own-mat .shield-zone{grid-row:2;grid-column:1}.unit-wrap .stats,.base-zone .unit-wrap .stats{position:absolute;inset:2px 2px auto auto;transform:none;gap:1px;pointer-events:none}.unit-wrap .card .ko-label{bottom:0;min-height:20px;display:block;line-height:1.25;padding:3px}.unit-wrap .stats b{margin:0}.protection .base-zone .zone-label{top:auto;bottom:0;left:2px}.protection .base-zone:has(.unit-wrap) .zone-label{position:absolute;top:1px;bottom:auto}.base-zone .unit-wrap .card .ko-label{display:block}.base-zone .empty-base{max-height:85%}

@media(max-width:580px){.combat-lane .slot{container-type:size;grid-template-rows:minmax(0,1fr)}.combat-lane .unit-wrap{width:min(100%,86cqh);max-height:none}.combat-lane .slot{justify-items:center}}