/* Keep battle information available on phones and tablets, after the field and hand. */
.environment-preview{width:min(100%,340px);aspect-ratio:1;margin:16px auto;border:1px solid #ffffff40;background:#000;overflow:hidden}
.environment-preview .atlas-art{display:block;width:100%;height:100%}
@media(max-width:980px){
 .battle-screen{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
 .battle-topline{order:0;min-width:0}
 .compact-environment{order:1;gap:12px;align-items:center;margin:0;text-align:left;line-height:1.5}
 .compact-environment span{max-width:55%;text-align:right}
 .battle-layout{display:contents}
 .battlefield{order:2;width:100%;min-width:0;padding:0}
 .hand-zone{order:3;min-width:0;margin:0;padding:12px 0 16px}
 .battle-sidebar.right-sidebar{order:4;display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.85fr);grid-template-areas:"status actions" "phase phase" "selection selection" "hero hero" "resources resources";gap:14px;padding:16px;border:1px solid #ffffff40;background:#000}
 .right-sidebar>*{min-width:0}
 .right-sidebar .turn-status{grid-area:status;padding:10px 0 0}
 .right-sidebar .turn-status h2{font-size:23px;margin:10px 0;letter-spacing:0}
 .right-sidebar .turn-status p{font-size:11px;line-height:1.7}
 .right-sidebar .turn-status .eyebrow{display:block;font-size:8px;letter-spacing:1px}
 .right-sidebar .phase-track{grid-area:phase;display:flex;flex-wrap:wrap;font-size:11px;gap:10px;padding:12px 0}
 .right-sidebar .selection-panel,.right-sidebar .selection-panel:has(.selection-symbol){grid-area:selection;display:block;min-height:0;max-height:none;overflow:visible;padding:0 0 14px;border-left:0}
 .right-sidebar .selection-panel>.eyebrow{display:block;margin-bottom:10px}
 .right-sidebar .selection-symbol{font-size:28px;margin:0 0 8px}
 .right-sidebar .selection-panel h3{font-size:18px;line-height:1.5}
 .right-sidebar .selection-panel>p{font-size:12px;line-height:1.8}
 .right-sidebar .hero-skill{grid-area:hero;padding:0}
 .right-sidebar .hero-skill>span,.right-sidebar .hero-skill>p{font-size:11px;line-height:1.8}
 .right-sidebar .skill-button{width:100%;min-height:44px;font-size:14px}
 .right-sidebar .resource-actions{grid-area:resources;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0}
 .right-sidebar .resource-actions button{min-height:40px;font-size:12px}
 .right-sidebar .turn-actions{grid-area:actions;align-self:center}
 .right-sidebar .turn-actions .primary{min-height:46px;padding:12px 10px;font-size:12px}
 .right-sidebar .turn-actions .text-button{min-height:40px;font-size:11px;padding:8px 0}
 .right-sidebar .unit-actions{display:flex;flex-wrap:wrap;gap:8px}
 .right-sidebar .unit-actions button{min-height:40px;font-size:11px}
 .battle-sidebar.left-sidebar{order:5;display:block;min-width:0;padding:16px;border:1px solid #ffffff40;margin-bottom:16px}
 .left-sidebar .environment-art{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:8px 14px;height:auto;min-height:0;padding:12px;text-align:left}
 .left-sidebar .environment-illustration{position:relative;inset:auto;z-index:0;opacity:1;grid-column:1;grid-row:1/5;align-self:center;width:100%;aspect-ratio:1}
 .left-sidebar .environment-illustration .atlas-art{display:block;width:100%;height:100%}
 .left-sidebar .env-ring{grid-column:2;grid-row:1;height:26px;font-size:24px}
 .left-sidebar .environment-art>span{grid-column:2;grid-row:2;font-size:7px;letter-spacing:1px}
 .left-sidebar .environment-art h3{grid-column:2;grid-row:3;font-size:18px;line-height:1.4;letter-spacing:0;margin:0;overflow-wrap:anywhere}
 .left-sidebar .env-counter{grid-column:2;grid-row:4;flex-wrap:wrap;justify-content:flex-start;gap:5px}
 .left-sidebar .env-counter small{font-size:9px}
 .left-sidebar .env-description,.left-sidebar .forecast strong{font-size:12px;line-height:1.8}
 .left-sidebar .forecast .text-button{min-height:40px;font-size:12px}
 .left-sidebar .battle-log{height:auto;max-height:240px;overflow:auto}
 .left-sidebar .log-entry{font-size:11px;line-height:1.7}
}
@media(max-width:380px){
 .battle-sidebar.right-sidebar{grid-template-columns:minmax(0,1fr) minmax(112px,.85fr);padding:12px;gap:12px}
 .right-sidebar .turn-status h2{font-size:21px}
 .right-sidebar .turn-actions .primary{font-size:11px}
 .battle-sidebar.left-sidebar{padding:12px}
 .left-sidebar .environment-art{gap:8px;padding:10px}
 .left-sidebar .environment-art h3{font-size:16px}
}
@media(max-width:359px){
 body:has(.battle-screen){min-width:0}
 .battle-screen{padding-inline:8px}
 .right-sidebar .turn-status h2{font-size:19px}
 .right-sidebar .turn-status p{font-size:10px}
 .right-sidebar .turn-actions .primary{padding-inline:7px}
}