/* September 21 mockup: the battlefield, hands and dialogue each own a row. */
body[data-screen="battle"] #app { max-width:none; padding:0; }
body[data-screen="battle"] .topbar { height:42px; flex:none; padding:0 16px; gap:16px; border-bottom:1px solid #352920; background:#030303; }
body[data-screen="battle"] .wordmark { width:126px; height:40px; }
body[data-screen="battle"] .mode { font-size:14px; }
body[data-screen="battle"] .topbar nav { gap:6px; }
body[data-screen="battle"] .menu-button,body[data-screen="battle"] .icon-button { min-height:28px; height:28px; }
#battle-screen:not([hidden]) { --hand-height:clamp(130px,17dvh,185px); display:grid; grid-template-rows:minmax(280px,1fr) auto auto auto; height:calc(100dvh - 42px); min-height:660px; position:relative; gap:0; width:100%; background:#000; }
#battle-screen .game-layout { position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:62px minmax(0,1fr); padding:0; gap:0; min-height:0; min-width:0; overflow:hidden; }
#battle-screen .battle-hud { display:grid; grid-template-columns:minmax(120px,1fr) minmax(0,3fr) minmax(120px,1fr); align-items:center; gap:14px; width:min(100%,1440px); margin:auto; height:62px; padding:0 22px; }
#battle-screen .hero-panel { position:static; display:grid; grid-template-columns:1fr auto; padding:0; border:0; margin:0; gap:0 8px; width:min(100%,215px); background:none; }
#battle-screen .hero-label { display:block; align-self:center; font-size:16px; min-width:0; }
#battle-screen .hero-label span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#battle-screen .hero-label small { display:none; }
#battle-screen .hero-vitals { display:flex; gap:5px; align-items:center; margin:0; }
#battle-screen .hero-vitals strong { font:24px VT323; }
#battle-screen .health-caption { font:14px VT323; }
#battle-screen .health-track { height:7px; background:#4c2b20; border:1px solid #ab7650; box-shadow:0 1px #e6be87; grid-column:1/-1; margin:2px 0; }
#battle-screen .health-track i { background:#ffa222; }
#battle-screen .mini-mana { display:block; grid-column:1/-1; font:13px VT323; color:#d3b392; margin:1px 0; }
#battle-screen .round-info { justify-self:end; display:flex; flex-wrap:wrap; align-items:center; justify-content:end; gap:4px; font:15px VT323; letter-spacing:.5px; }
#battle-screen .round-info b { margin:0 0 0 3px; font-size:21px; }
#battle-screen #turn-marker { display:block; flex-basis:100%; text-align:right; font-size:16px; }
#battle-screen .opponent-hand { position:static; width:100%; height:58px; min-width:0; display:flex; justify-content:center; align-items:center; gap:5px; margin:0; transform:none; overflow:hidden; pointer-events:none; }
#battle-screen .opponent-hand i { flex:0 1 39px; width:39px; min-width:0; height:56px; margin:0!important; transform:none!important; aspect-ratio:auto; background-size:100% 100%; box-shadow:none; }
#battle-screen .stage-wrap { width:100%; height:100%; min-height:0; min-width:0; aspect-ratio:auto; flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#000; }
#battle-screen #arena { width:100%; height:auto; max-height:100%; aspect-ratio:1280/875; object-fit:contain; display:block; }
#battle-screen #board-targets { overflow:hidden; }
#battle-screen .player-dock { position:relative; width:100%; max-width:none; margin:0; min-height:0; padding:0 20px 5px; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:38px auto; gap:0; border:0; border-top:2px solid #281d15; overflow:hidden; pointer-events:auto; background:#22180f url('/assets/arena-artist-edition.png') center bottom/100% auto; box-shadow:inset 0 4px #0009; }
#battle-screen .player-hud { width:min(100%,1440px); margin:auto; display:flex; align-items:center; gap:24px; height:38px; background:#000b; padding:2px 10px; }
#battle-screen .player-profile { position:static; display:block; width:180px; height:auto; padding:0; margin:0; border:0; box-shadow:none; background:none; grid-area:auto; }
#battle-screen .player-profile>div { display:grid; grid-template-columns:1fr auto; column-gap:8px; align-items:center; }
#battle-screen .player-profile .eyebrow { margin:0; font:14px VT323; color:#e0c099; }
#battle-screen .player-health { padding:0; white-space:nowrap; }
#battle-screen .player-health strong { font:23px VT323; }
#battle-screen .player-health span { font:13px VT323; }
#battle-screen .player-profile .health-track { width:100%; margin:0; height:5px; }
#battle-screen .power-panel { position:static; flex:1; display:flex; height:auto; align-items:center; gap:12px; padding:0; margin:0; border:0; box-shadow:none; background:none; grid-area:auto; }
#battle-screen .energy-readout { display:flex; gap:6px; align-items:center; white-space:nowrap; }
#battle-screen .energy-readout b { font:25px VT323; color:#ffba51; }
#battle-screen .energy-readout span { font:14px VT323; color:#f2d19c; }
#battle-screen .crystals { display:flex; align-items:center; gap:3px; margin:0; }
#battle-screen .crystals i { width:9px; height:9px; transform:none; border:1px solid #cf9b60; background:#3e291c; }
#battle-screen .crystals i.filled { background:#ff971d; box-shadow:inset 1px 1px #ffe9a4; }
#battle-screen .hero-power { display:flex; align-items:center; gap:8px; padding:3px 8px; min-height:28px; height:28px; width:auto; margin:0 0 0 auto; background:#191713; border:1px solid #a67540; box-shadow:none; }
#battle-screen .hero-power>span { display:block; font:20px VT323; }
#battle-screen .hero-power div { font:14px VT323; }
#battle-screen .hero-power small { display:none; }
#battle-screen .hero-power>b { font:18px VT323; color:#ffbf52; }
#battle-screen .deck-indicator { display:flex; align-items:center; gap:6px; padding:0; margin:0; border:0; background:none; }
#battle-screen .deck-indicator .deck-icon { display:none; }
#battle-screen .deck-indicator>div { display:flex; align-items:center; gap:6px; }
#battle-screen .deck-indicator b { font:24px VT323; }
#battle-screen .deck-indicator span { font:13px VT323; }
#battle-screen .hand-workspace { display:grid; grid-template-columns:minmax(0,1fr) 245px; gap:14px; width:min(100%,1440px); margin:auto; align-items:stretch; min-height:0; }
#battle-screen .hand { position:relative; grid-area:auto; display:flex; align-items:center; justify-content:safe center; gap:9px; width:100%; height:calc(var(--hand-height) + 12px); min-height:0; padding:5px 4px 7px; margin:0; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#d79755 #20160f; perspective:none; }
#battle-screen .hand-card { flex:0 0 auto; width:calc(var(--hand-height) * 212 / 306); height:var(--hand-height); margin:0!important; transform:none!important; transform-origin:center; transition:filter .12s,outline-color .12s; box-shadow:2px 3px #0008; }
#battle-screen .hand-card:hover,#battle-screen .hand-card:focus-visible { transform:none!important; outline:2px solid #ffe66b; outline-offset:1px; z-index:2; filter:brightness(1.1); }
#battle-screen .hand-card.selected { transform:none!important; outline:3px solid #ff71bc; outline-offset:1px; z-index:3; filter:brightness(1.1); }
#battle-screen .card-intel-panel { display:grid; grid-template-rows:minmax(0,1fr) 29px; height:calc(var(--hand-height) + 12px); min-height:0; padding:6px 0; }
#battle-screen .inspector { position:static; display:block; min-height:0; padding:8px 10px; background:#080808ef; border:1px solid #9c713e; box-shadow:none; overflow:auto; }
#battle-screen .inspector>.eyebrow,#battle-screen .intel-art,#battle-screen .intel-type { display:none; }
#battle-screen .intel-name { font:21px/1 VT323; color:#ffe37c; margin:0 0 4px; letter-spacing:0; }
#battle-screen .intel-description { font:18px/1.05 VT323; margin:0 0 6px; color:#f3eddd; }
#battle-screen .intel-stats { display:flex; justify-content:flex-start; gap:16px; margin:0; padding:0; border:0; }
#battle-screen .intel-stats>div { display:flex; gap:4px; align-items:center; }
#battle-screen .intel-stats b { font:21px VT323; }
#battle-screen .intel-stats small { font:12px VT323; }
#battle-screen .intel-status { font:14px/1 VT323; margin:5px 0 0; }
#battle-screen .intel-empty { min-height:0; padding:0; text-align:left; }
#battle-screen .intel-empty p { margin:0 0 7px; color:#ffe37c; font:20px VT323; }
#battle-screen .intel-empty small { font:18px/1 VT323; color:#d0c3ae; }
#battle-screen .card-action-slot { min-height:29px; }
#battle-screen .mobile-detail:not([hidden]) { display:flex; position:static; align-items:center; justify-content:space-between; gap:8px; transform:none; max-width:none; width:100%; padding:2px 0 0; margin:0; background:none; border:0; box-shadow:none; }
#battle-screen .mobile-detail small { font:14px/1 VT323; color:white; }
#battle-screen .detail-close,#battle-screen .detail-play { position:static; width:auto; height:auto; margin:0; padding:3px 8px; border:1px solid #c09353; background:#1e1912; color:#ffe69a; font:16px VT323; }
#battle-screen .battle-controls { position:relative; top:auto; width:100%; max-width:none; margin:0; padding:0 20px 6px; background:#0a0705; z-index:auto; }
#battle-screen .orders-panel { position:static; display:flex; align-items:center; gap:12px; max-width:1440px; height:40px; min-height:0; margin:0 auto; padding:3px 0; border:0; background:none; overflow:hidden; }
#battle-screen .orders-heading { flex:0 0 150px; display:flex; gap:8px; align-items:center; justify-content:space-between; padding:0; margin:0; min-height:0; font:14px VT323; }
#battle-screen .orders-heading b { font:19px VT323; }
#battle-screen .orders-heading>span { max-width:100px; line-height:1; }
#battle-screen .orders-heading>button { padding:4px; font:12px VT323; }
#battle-screen .order-list { display:flex; flex-wrap:nowrap; flex:1; min-width:0; gap:6px; overflow-x:auto; height:36px; padding:0; margin:0; scrollbar-width:thin; }
#battle-screen .order-list>p { margin:0; align-self:center; font:16px VT323; color:#b29e85; }
#battle-screen .order-chip { flex:0 0 245px; height:32px; min-height:0; padding:2px 4px; gap:4px; border:1px solid var(--order-color); background:#181714; }
#battle-screen .order-chip>b { font:20px VT323; min-width:17px; }
#battle-screen .order-label { min-width:0; padding:0; }
#battle-screen .order-label span,#battle-screen .order-label small { font:13px/1 VT323; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#battle-screen .order-controls { gap:2px; }
#battle-screen .order-controls button { height:26px; width:26px; font:20px VT323; }
#battle-screen .action-row { position:static; top:auto; display:flex; align-items:stretch; gap:10px; width:min(100%,1440px); min-height:42px; height:42px; margin:0 auto; padding:0; border:0; background:#000; }
#battle-screen .status-message { display:grid; flex:1; min-width:0; align-items:center; padding:4px 12px; border:4px solid #000; background:#fff; box-shadow:inset 0 0 0 1px #9e9b8e; color:#080808; }
#battle-screen .status-message>* { grid-area:1/1; }
#battle-screen #hint { padding:0; margin:0; font:19px/1.05 VT323; color:#13100d; overflow:auto; max-width:none; max-height:30px; }
#battle-screen #hint .keycap { display:none; }
#battle-screen .turn-banner,#battle-screen .battle-toast { position:static; inset:auto; display:none; transform:none; animation:none; opacity:1; font:20px/1 VT323; letter-spacing:0; color:#17110a; background:none; border:0; box-shadow:none; padding:0; margin:0; white-space:normal; overflow:auto; max-height:30px; pointer-events:none; }
#battle-screen .turn-banner.show,#battle-screen .battle-toast.show { display:block; animation:none; transform:none; opacity:1; }
#battle-screen .status-message:has(.show) #hint,#battle-screen .status-message:has(.battle-toast.show) .turn-banner { visibility:hidden; }
#battle-screen .end-turn { font:16px VT323; letter-spacing:1px; min-width:140px; height:42px; padding:7px 13px; background:#ffae2c; color:#261506; border:2px solid #5d3516; box-shadow:inset 2px 2px #ffdc8a,inset -2px -2px #b9590e; }
#battle-screen .end-turn:disabled { background:#4a3b27; color:#b9a582; box-shadow:none; }
#battle-screen .battle-history { position:relative; display:flex; justify-content:space-between; gap:20px; align-items:start; grid-column:1/-1; background:#000; padding:9px 20px; font:14px VT323; color:#a68c70; }
#battle-screen .battle-status { display:block; margin:0; }
#battle-screen .battle-status summary { cursor:pointer; }
#battle-screen #log { max-height:130px; width:min(600px,70vw); padding:8px 0; overflow:auto; }
#battle-screen #log p { margin:2px 0; font:16px VT323; }
#battle-screen #restart { margin:0; font:14px VT323; color:#c7b69a; }
@media(min-width:1700px){#battle-screen:not([hidden]){--hand-height:clamp(165px,18dvh,210px)}#battle-screen .hand-workspace,#battle-screen .player-hud,#battle-screen .battle-hud,#battle-screen .orders-panel,#battle-screen .action-row{max-width:1700px}.hand-workspace .card-intel-panel{font-size:20px}}
@media(max-width:800px){
 body[data-screen="battle"] .topbar{padding:0 8px} body[data-screen="battle"] .mode{display:none}
 #battle-screen:not([hidden]){--hand-height:138px;min-height:650px;grid-template-rows:minmax(250px,1fr) auto auto auto}
 #battle-screen .battle-hud{padding:0 8px;gap:8px;grid-template-columns:120px minmax(0,1fr) 100px}
 #battle-screen .opponent-hand{gap:2px}#battle-screen .opponent-hand i{flex-basis:33px;height:48px}
 #battle-screen .hero-label span{font-size:14px}#battle-screen .hero-vitals strong{font-size:21px}
 #battle-screen .player-dock{padding:0 8px 4px}#battle-screen .player-hud{padding:2px 5px;gap:10px}
 #battle-screen .player-profile{width:145px}#battle-screen .player-profile .eyebrow{font-size:12px}
 #battle-screen .power-panel{gap:8px}#battle-screen .crystals{display:none}
 #battle-screen .hand-workspace{grid-template-columns:minmax(0,1fr) 205px;gap:8px}
 #battle-screen .hand{justify-content:flex-start;gap:7px}#battle-screen .intel-description{font-size:17px}#battle-screen .intel-name{font-size:19px}
 #battle-screen .battle-controls{padding:0 8px 5px}#battle-screen .orders-heading{flex-basis:105px;font-size:12px}#battle-screen .orders-heading>button{display:none}
 #battle-screen .order-list>p{font-size:14px}#battle-screen .status-message{padding:3px 7px}#battle-screen #hint{font-size:17px}#battle-screen .end-turn{min-width:115px}
}
@media(max-width:560px){
 #battle-screen:not([hidden]){--hand-height:143px;height:auto;min-height:calc(100dvh - 42px);grid-template-rows:auto auto auto auto}
 #battle-screen .game-layout{grid-template-rows:58px auto}#battle-screen .stage-wrap{height:auto;aspect-ratio:1280/690;min-height:0}
 #battle-screen .battle-hud{height:58px;grid-template-columns:108px minmax(0,1fr) 78px;gap:5px}
 #battle-screen .opponent-hand{height:52px;gap:1px}#battle-screen .opponent-hand i{height:44px;flex-basis:30px}
 #battle-screen .round-info{font-size:13px}#battle-screen #turn-marker{font-size:13px}
 #battle-screen .hero-vitals{gap:3px}#battle-screen .health-caption{font-size:12px}#battle-screen .hero-label span{font-size:13px}
 #battle-screen .hand-workspace{grid-template-columns:minmax(0,1fr);gap:0}
 #battle-screen .card-intel-panel{height:80px;grid-template-columns:minmax(0,1fr) 85px;grid-template-rows:1fr;gap:6px;padding:0 3px 4px}
 #battle-screen .inspector{padding:5px 7px}#battle-screen .intel-name{font-size:18px}#battle-screen .intel-description{font-size:17px;margin-bottom:0}#battle-screen .intel-stats,#battle-screen .intel-status{display:none}
 #battle-screen .card-action-slot{height:auto;align-self:center}#battle-screen .mobile-detail:not([hidden]){flex-direction:column;align-items:stretch;gap:5px}
 #battle-screen .player-profile{width:138px;flex-shrink:0}#battle-screen .power-panel{justify-content:flex-end;gap:6px}#battle-screen .deck-indicator{display:none}
 #battle-screen .energy-readout{gap:3px}#battle-screen .energy-readout span{font-size:12px}#battle-screen .energy-readout b{font-size:22px}#battle-screen .hero-power{padding:2px 5px;gap:4px}#battle-screen .hero-power>span{display:none}#battle-screen .hero-power div{font-size:12px}
 #battle-screen .action-row{height:48px;gap:5px}#battle-screen .end-turn{height:48px;min-width:100px;font-size:14px;padding:4px}
 #battle-screen .status-message>*{max-height:36px}#battle-screen #hint{max-height:36px;font-size:16px}#battle-screen .turn-banner,#battle-screen .battle-toast{font-size:17px;max-height:36px}
 #battle-screen .battle-history{padding:8px;gap:8px}#battle-screen #session-label{display:none}
}
@media(max-height:650px) and (min-width:561px){#battle-screen:not([hidden]){--hand-height:108px;min-height:575px}#battle-screen .battle-hud{height:48px}#battle-screen .game-layout{grid-template-rows:48px minmax(0,1fr)}#battle-screen .opponent-hand{height:45px}#battle-screen .opponent-hand i{height:42px;flex-basis:30px}#battle-screen .card-intel-panel{grid-template-rows:minmax(0,1fr) 25px}#battle-screen .intel-description{font-size:16px}#battle-screen .intel-stats{display:none}}