/* Battle screen: diagonal health cards and a framed two-column command deck. */
body[data-view="battle"] main.game{position:relative;display:flex;flex-direction:column;background:#d8e8c1}
body[data-view="battle"] .arena{flex:1;min-height:180px;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#f2efd9 10%,#d8e8c1 78%)}
body[data-view="battle"] .arena-top{display:flex;align-items:center;justify-content:space-between;padding:8px 18px;min-height:36px;background:#dceac7;color:#6f8c56;font:bold 12px monospace}
body[data-view="battle"] .turn{padding:5px 8px;border:1px solid #adbf94;background:#e5edcf;border-radius:4px;color:#6b8654}
body[data-view="battle"] .scene-wrap{flex:1!important;min-height:0!important;isolation:isolate;background:transparent}
body[data-view="battle"] .scene-wrap .health-row{position:absolute;inset:0;z-index:3;display:block;margin:0;padding:0;pointer-events:none}
body[data-view="battle"] .health-card{position:absolute;width:45%;max-width:480px;padding:12px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 12px;border:4px solid #203b4a;border-radius:15px;background:#fff8df;box-shadow:inset 0 0 0 2px #dce0bd,4px 5px 0 #82957a66;color:#173448}
body[data-view="battle"] .health-card.enemy{top:12px;right:22px;left:auto}
body[data-view="battle"] .health-card.player{bottom:12px;left:22px;right:auto}
body[data-view="battle"] .health-card .fighter{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;gap:12px;min-width:0}
body[data-view="battle"] .fighter h2{font:bold clamp(16px,2vw,24px)/1.15 monospace;white-space:normal}
body[data-view="battle"] .type{flex:none;padding:4px 8px;border-radius:3px;background:#cddbbf;color:#425b50;font:bold 11px monospace}
body[data-view="battle"] .type.electric{background:#ffec99;color:#745b28}
body[data-view="battle"] .health-meta{display:contents;font:bold 14px monospace}
body[data-view="battle"] .health-meta>span{display:none}
body[data-view="battle"] .health-meta strong{grid-column:2;grid-row:2;align-self:center;font:bold 15px monospace;white-space:nowrap}
body[data-view="battle"] .health-card .meter{grid-column:1;grid-row:2;align-self:center;margin:0;height:15px;border:2px solid #233d4b;border-radius:1px;background:#d2d8bd}
body[data-view="battle"] .health-card .meter>div{background:#38b46f}
body[data-view="battle"] .health-card .meter.low>div{background:#d3554e}
body[data-view="battle"] .scene-wrap .portrait-layer{left:10px;right:10px;bottom:90px;height:clamp(120px,23dvh,210px);max-height:40%;z-index:2}
body[data-view="battle"] .portrait-figure{width:22%;max-width:220px;opacity:1;filter:drop-shadow(0 3px 3px #51624744)}
body[data-view="battle"] .portrait-figure figcaption{font-size:12px;background:#fff8df}
body[data-view="battle"] .battle-console{flex:none;display:grid;grid-template-columns:1.12fr 1fr;gap:12px;padding:12px;border:4px solid #203b4a;border-radius:10px;background:#fff8df;box-shadow:inset 0 0 0 3px #bdc7a6;max-height:43%;min-height:210px;overflow:auto}
.battle-narrative{min-width:0;display:flex;flex-direction:column;gap:6px}
.battle-narrative>.battle-message{flex:1;display:flex;align-items:center;min-height:90px;margin:0;padding:15px 20px;border:5px double #52685b;border-radius:12px;box-shadow:inset 0 0 0 3px #d8dcb9;background:#fff9e3;color:#173448;overflow-wrap:anywhere}
.battle-narrative .message-dot{display:none}
.battle-narrative #message{margin:0;font:18px/1.5 var(--dialogue-font)}
.battle-narrative .dialogue-speaker{font:700 13px/1.4 var(--dialogue-font);margin-bottom:5px}
.battle-utilities{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.battle-utilities .battle-party-tools{display:flex;gap:5px;align-items:center}
.battle-utilities #battle-partner-note{display:none}
.battle-utilities #battle-party,.battle-tactics>summary{min-height:36px;padding:8px 10px;border:1px solid #9da98b;border-radius:6px;background:#eef0d9;color:#354e4c;font:bold 10px/1.4 monospace;cursor:pointer;list-style:none}
.battle-tactics>summary::after{content:' ▾'}
.battle-tactics[open]{position:absolute;bottom:12px;left:12px;z-index:6;width:min(420px,calc(100% - 24px));max-height:65%;overflow:auto;padding:12px;background:#fff8df;border:3px solid #203b4a;border-radius:9px;box-shadow:0 6px 25px #142e3a55}
.battle-tactics[open]>summary::after{content:' · Tutup ×'}
.battle-tactics .intent{display:flex;margin:10px 0 6px;font-size:12px}
.battle-tactics .enemy-hint{margin:8px 0;font-size:12px;line-height:1.5}
.battle-tactics .history{display:block;margin:12px 0 0;font-size:12px}
body[data-view="battle"] .command-panel{display:flex;flex-direction:column;gap:6px;width:auto;height:auto;min-width:0;max-height:none;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
body[data-view="battle"] .command-heading{display:flex;justify-content:flex-end;min-height:30px;padding:3px 10px;border:2px solid #b5c19d;border-radius:6px;background:#fffbed}
body[data-view="battle"] .command-heading>div:first-child{display:none}
body[data-view="battle"] .energy{display:flex;align-items:center;gap:14px}
body[data-view="battle"] .energy>span{font:bold 12px monospace}
body[data-view="battle"] .energy i{width:12px;height:20px}
body[data-view="battle"] .moves{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;flex:1}
body[data-view="battle"] .move{display:flex;flex-direction:column;justify-content:center;gap:7px;min-height:64px;padding:10px 14px;text-align:left;border:3px solid #294353;border-radius:10px;box-shadow:inset 0 0 0 2px #fff9e2,2px 3px 0 #85997c;background:#f6d77e;color:#16364a}
body[data-view="battle"] .move.iron{background:#b9dfed}
body[data-view="battle"] .move.guard{background:#c4dfbe}
body[data-view="battle"] .move.heal{background:#f6d5c5}
body[data-view="battle"] .move:disabled{opacity:.48;cursor:not-allowed}
body[data-view="battle"] .move:not(:disabled):hover{filter:brightness(1.05);transform:translateY(-1px)}
body[data-view="battle"] .move strong{font:bold 17px/1.15 monospace}
body[data-view="battle"] .move-top,body[data-view="battle"] .move-en{display:none}
body[data-view="battle"] .move-info{display:flex;justify-content:space-between;gap:5px;margin:0;font:11px/1.3 monospace}
body[data-view="battle"] .move-info b{font:inherit}
body[data-view="battle"] .move-info>span{color:#44594e}
body[data-view="battle"] .boost{margin:0;padding:5px 8px;font-size:11px}
body[data-view="battle"] .result{margin:0;padding:12px;overflow:auto;max-height:32dvh;flex:1}
body[data-view="battle"] .result h2{font:bold 20px/1.3 monospace}
body[data-view="battle"] .result .upgrade-choices{display:grid;grid-template-columns:1fr}
body[data-view="battle"] .result button{min-height:44px}
@media(max-width:650px){
 body[data-view="battle"] .arena{min-height:180px}
 body[data-view="battle"] .arena-top{min-height:30px;padding:5px 10px;font-size:10px}
 body[data-view="battle"] .health-card{width:64%;padding:7px 9px;border-width:3px;border-radius:10px;gap:5px 8px}
 body[data-view="battle"] .health-card.enemy{top:8px;right:8px;left:auto}
 body[data-view="battle"] .health-card.player{bottom:7px;left:8px;right:auto}
 body[data-view="battle"] .health-card .fighter{gap:6px}
 body[data-view="battle"] .fighter h2{font-size:14px}
 body[data-view="battle"] .type{font-size:8px;padding:3px 5px}
 body[data-view="battle"] .health-meta strong{font-size:11px}
 body[data-view="battle"] .health-card .meter{height:10px}
 body[data-view="battle"] .scene-wrap .portrait-layer{bottom:69px;left:4px;right:4px;height:125px;max-height:31%}
 body[data-view="battle"] .portrait-figure{width:29%;max-width:130px}
 body[data-view="battle"] .portrait-figure figcaption{font-size:9px;padding:2px 6px}
 body[data-view="battle"] .battle-console{grid-template-columns:1fr;gap:7px;min-height:0;max-height:48%;padding:8px;border-width:3px}
 .battle-narrative{gap:4px}.battle-narrative>.battle-message{min-height:58px;padding:8px 12px;border-width:4px}
 .battle-narrative #message{font-size:16px;line-height:1.4}.battle-narrative .dialogue-speaker{font-size:12px;margin-bottom:2px}
 .battle-utilities{justify-content:space-between;gap:5px}
 .battle-utilities #battle-party,.battle-tactics>summary{min-height:44px;padding:8px;font-size:10px;display:flex;align-items:center}
 body[data-view="battle"] .command-heading{min-height:25px;padding:2px 8px}
 body[data-view="battle"] .energy>span{font-size:10px}
 body[data-view="battle"] .energy i{height:16px;width:10px}
 body[data-view="battle"] .moves{gap:6px}
 body[data-view="battle"] .move{min-height:56px;padding:8px 10px;gap:5px;border-width:2px;border-radius:8px}
 body[data-view="battle"] .move strong{font-size:14px}
 body[data-view="battle"] .move-info{font-size:10px}
 body[data-view="battle"] .result{max-height:30dvh}
}

/* Victory keeps the battlefield visible above a full-width reward panel. */
body[data-view="battle"] main.game[data-result="win"]{overflow:auto}
body[data-view="battle"] .game[data-result="win"] .arena{flex:1 0 260px;min-height:260px}
body[data-view="battle"] .game[data-result="win"] .health-card{width:calc(50% - 30px);max-width:none;top:8px;bottom:auto;gap:5px 10px}
body[data-view="battle"] .game[data-result="win"] .health-card.player{left:18px;right:auto}
body[data-view="battle"] .game[data-result="win"] .health-card.enemy{right:18px;left:auto}
body[data-view="battle"] .game[data-result="win"] .health-meta>span{display:block;grid-column:1;grid-row:2;font:bold 10px monospace;color:#5e7162}
body[data-view="battle"] .game[data-result="win"] .health-card .meter{grid-column:1/-1;grid-row:3}
body[data-view="battle"] .game[data-result="win"] .scene-wrap canvas#pixel-scene{top:95px;height:calc(100% - 95px)}
body[data-view="battle"] .game[data-result="win"] .scene-wrap .portrait-layer{bottom:4px;height:175px;max-height:45%}
body[data-view="battle"] .game[data-result="win"] .battle-console{display:flex;flex-direction:column;flex:none;gap:8px;max-height:none;min-height:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
.game[data-result="win"] .battle-narrative>.battle-message{min-height:70px;margin:0 8px;padding:10px 18px;border:4px solid #203b4a;border-radius:9px}
body[data-view="battle"] .game[data-result="win"] .command-panel{padding:0 8px 8px}
.game[data-result="win"] .command-heading{display:none!important}
body[data-view="battle"] .game[data-result="win"] .result{display:grid;grid-template-columns:210px minmax(0,1fr);gap:20px;flex:none;max-height:none;padding:16px 18px;text-align:left;border:4px solid #203b4a;border-radius:9px;box-shadow:inset 0 0 0 3px #c5ccaa;background:#fff9e3;overflow:visible}
.game[data-result="win"] #badge{display:none}
.game[data-result="win"] .result-sidebar{padding-right:18px;border-right:2px solid #bdc7a6;display:flex;flex-direction:column;justify-content:center;gap:10px}
.game[data-result="win"] #result-tag{font:bold 14px/1.4 monospace;color:#203e50;letter-spacing:0}
.game[data-result="win"] .battle-utilities{gap:6px}
.game[data-result="win"] .battle-party-tools{flex-direction:column-reverse;align-items:stretch;gap:8px;width:100%}
.game[data-result="win"] #battle-partner-note{display:block;font:12px/1.4 monospace;color:#36586b}
.game[data-result="win"] #battle-party{font-size:12px;background:#c8e2c5;border:2px solid #345549;min-height:44px}
.game[data-result="win"] .result-main{display:flex;align-items:flex-start;gap:14px;min-width:0}
.game[data-result="win"] #result-portrait{width:76px;height:76px;flex:none;object-fit:contain;border-radius:50%;background:#e2e9b9}
.game[data-result="win"] .result-copy{flex:1;min-width:0}
body[data-view="battle"] .game[data-result="win"] .result h2{font:bold 22px/1.3 monospace;margin:0 0 6px}
.game[data-result="win"] .result #result-detail{font:14px/1.45 var(--dialogue-font);margin:0 0 10px;color:#46616a}
.game[data-result="win"] .result-actions{display:flex;gap:12px;flex-wrap:wrap}
.game[data-result="win"] .result-actions .primary{flex:1;width:auto;min-width:155px;margin:0;padding:10px 14px;font:bold 14px/1.3 monospace;border:2px solid #203b4a;border-radius:7px;color:#16364a;background:#c8e2c5}
.game[data-result="win"] #catch-opponent{background:#f8cd61}
.game[data-result="win"] #return-map{margin:0}
.game[data-result="win"] #catch-status{font:11px/1.4 monospace;margin:6px 0 0;color:#46616a}
.game[data-result="win"] #catch-status:empty{display:none}
body[data-view="battle"] .game[data-result="win"] .upgrade-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 12px}
.game[data-result="win"] .camp-note{grid-column:1/-1}
.game[data-result="win"] .upgrade-choices button{padding:8px;min-height:80px}
.game[data-result="win"] .upgrade-choices strong{font-size:13px}
.game[data-result="win"] .upgrade-choices small{font-size:11px}
.game:not([data-result="win"]) #result-portrait{display:none}
@media(max-width:650px){
 body[data-view="battle"] .game[data-result="win"] .arena{flex-basis:290px;min-height:290px}
 body[data-view="battle"] .game[data-result="win"] .health-card{width:calc(50% - 12px);padding:7px;gap:5px;border-width:2px}
 body[data-view="battle"] .game[data-result="win"] .health-card.player{left:7px}
 body[data-view="battle"] .game[data-result="win"] .health-card.enemy{right:7px}
 .game[data-result="win"] .health-card .fighter{flex-wrap:wrap!important;gap:4px!important}
 body[data-view="battle"] .game[data-result="win"] .fighter h2{font-size:12px;width:100%}
 body[data-view="battle"] .game[data-result="win"] .health-meta>span{font-size:8px}
 body[data-view="battle"] .game[data-result="win"] .health-meta strong{font-size:10px}
 body[data-view="battle"] .game[data-result="win"] .scene-wrap canvas#pixel-scene{top:95px;height:calc(100% - 95px)}
 body[data-view="battle"] .game[data-result="win"] .scene-wrap .portrait-layer{height:100px;max-height:35%;bottom:3px}
 .game[data-result="win"] .battle-narrative>.battle-message{margin:0 5px;padding:8px 12px;min-height:0;border-width:3px}
 body[data-view="battle"] .game[data-result="win"] .command-panel{padding:0 5px 5px}
 body[data-view="battle"] .game[data-result="win"] .result{grid-template-columns:1fr;gap:10px;padding:10px;border-width:3px}
 .game[data-result="win"] .result-sidebar{border-right:0;border-bottom:1px solid #bdc7a6;padding:0 0 8px;gap:5px}
 .game[data-result="win"] #result-tag{font-size:12px}
 .game[data-result="win"] .battle-utilities{align-items:center;justify-content:space-between}
 .game[data-result="win"] .battle-party-tools{width:auto;flex:1;flex-direction:row;align-items:center;gap:8px}
 .game[data-result="win"] #battle-partner-note{font-size:10px}
 .game[data-result="win"] #battle-party{font-size:10px;padding:7px}
 .game[data-result="win"] .battle-tactics>summary{font-size:9px;min-height:44px;padding:7px}
 .game[data-result="win"] .result-main{gap:8px;position:relative;display:block}
 .game[data-result="win"] #result-portrait{float:left;width:48px;height:48px;margin:0 10px 6px 0}
 body[data-view="battle"] .game[data-result="win"] .result h2{font-size:16px;min-height:21px}
 .game[data-result="win"] .result #result-detail{font-size:13px;margin-bottom:8px}
 .game[data-result="win"] .result-actions{clear:both;gap:6px}
 .game[data-result="win"] .result-actions .primary{min-width:120px;font-size:11px;padding:8px;min-height:44px}
 .game[data-result="win"] #catch-status{font-size:10px}
 body[data-view="battle"] .game[data-result="win"] .upgrade-choices{clear:both;grid-template-columns:1fr}
 .game[data-result="win"] .upgrade-choices button{min-height:62px}
}
@media(max-height:520px) and (min-width:651px){
 body[data-view="battle"] .game[data-result="win"] .arena{min-height:250px;flex-basis:250px}
 body[data-view="battle"] .game[data-result="win"] .scene-wrap canvas#pixel-scene{top:70px;height:calc(100% - 70px)}
 body[data-view="battle"] .game[data-result="win"] .scene-wrap .portrait-layer{height:100px;left:8px;right:8px;bottom:4px}
}
@media(max-height:520px) and (min-width:651px){
 body[data-view="battle"] .arena{min-height:100px}
 body[data-view="battle"] .arena-top{min-height:24px;padding:3px 10px;font-size:9px}
 body[data-view="battle"] .health-card{width:32%;padding:5px 8px;border-width:2px;gap:4px 7px}
 body[data-view="battle"] .health-card.enemy{right:10px;left:auto;top:5px}
 body[data-view="battle"] .health-card.player{left:10px;right:auto;top:5px;bottom:auto}
 body[data-view="battle"] .fighter h2{font-size:12px}
 body[data-view="battle"] .type{font-size:7px;padding:2px 4px}
 body[data-view="battle"] .health-meta strong{font-size:10px}
 body[data-view="battle"] .health-card .meter{height:9px}
 body[data-view="battle"] .scene-wrap .portrait-layer{bottom:3px;height:45px;max-height:40%;left:5px;right:5px}
 body[data-view="battle"] .portrait-figure{width:85px}
 body[data-view="battle"] .portrait-figure figcaption{font-size:8px;padding:1px 5px}
 body[data-view="battle"] .battle-console{min-height:155px;max-height:55%;padding:6px 8px;gap:8px}
 .battle-narrative>.battle-message{min-height:46px;padding:6px 10px}
 .battle-narrative #message{font-size:16px;line-height:1.3}
 .battle-narrative .dialogue-speaker{font-size:11px;margin-bottom:2px}
 .battle-utilities #battle-party,.battle-tactics>summary{min-height:32px;padding:5px 8px}
 body[data-view="battle"] .command-heading{min-height:24px;padding:1px 8px}
 body[data-view="battle"] .energy i{height:14px}
 body[data-view="battle"] .move{min-height:44px;padding:5px 8px;gap:3px;border-width:2px}
 body[data-view="battle"] .move strong{font-size:12px}
 body[data-view="battle"] .move-info{font-size:9px}
 body[data-view="battle"] .moves{gap:5px}
}

/* Keep both victory sidebar controls the same size, including touch layouts. */
.game[data-result="win"] .result-sidebar .battle-utilities{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:8px;width:100%}
.game[data-result="win"] .result-sidebar .battle-party-tools{display:flex;flex-direction:column-reverse;align-items:stretch;width:100%;gap:8px}
.game[data-result="win"] .result-sidebar #battle-party,
.game[data-result="win"] .result-sidebar .battle-tactics>summary{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin:0;padding:8px 10px;font:bold 12px/1.4 monospace;border:2px solid #345549;border-radius:6px}
.game[data-result="win"] .result-sidebar .battle-tactics:not([open]){width:100%}