.battle-scene{width:min(1240px,calc(100vw - 32px));max-width:none;max-height:96dvh;padding:0;border:1px solid #ad9362;border-radius:9px;color:#f1ead8;background:#142222;box-shadow:0 30px 120px #000c;overflow:auto}
.battle-scene::backdrop{background:#081113e8;backdrop-filter:blur(5px)}
.battle-scene[open]{display:flex;flex-direction:column}
.scene-header{display:flex;align-items:center;gap:22px;padding:16px 24px;border-bottom:1px solid #ad936244;background:linear-gradient(100deg,#233b36,#172827 65%,#382d28)}
.scene-header h2{margin:2px 0 0;font:600 24px/1.3 var(--serif);letter-spacing:.19em}
#sceneLocation{color:#c0c9b6;font-size:12px;letter-spacing:.1em}
.scene-controls{display:flex;gap:8px;margin-left:auto;flex-shrink:0}
.scene-controls button{border:1px solid #b79c6877;background:#1b2b28;border-radius:4px;padding:8px 15px;color:#e7d9b8;min-height:40px}
#sceneSkip{background:#d5b77c;color:#202c25;font-weight:700}
.scene-duel{display:grid;grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);padding:14px 25px;gap:12px;background:#132321}
.scene-army{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;border-left:3px solid #8dc5b4;padding:3px 0 12px 14px;min-width:0}
.scene-army .portrait{width:72px;height:72px;border:1px solid #b59c6977;box-shadow:0 4px 12px #0004;border-radius:5px}
.scene-officer{min-width:0}.scene-officer small{color:#9bbbae;font-size:11px;letter-spacing:.1em}.scene-officer h3{margin:1px 0 5px;font:600 21px/1.5 var(--serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scene-officer .troop-chip{font-size:11px}.scene-role{color:#bcc4b3;font-size:11px;margin-left:8px}
.scene-strength{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:4px;min-width:80px;max-width:120px;padding-right:6px}
.scene-count{font:600 32px/1.2 var(--serif);font-variant-numeric:tabular-nums;color:#dfecdf}.scene-strength>small{font-size:11px;color:#b5c3b1}.scene-casualty{width:100%;text-align:right;color:#f2b68c;min-height:18px;font-size:12px;font-variant-numeric:tabular-nums}
.scene-meter{position:absolute;bottom:0;left:14px;right:0;height:4px;background:#384038}.scene-meter i{height:100%;display:block;background:#88c4ac;transition:width .1s linear}
.scene-enemy{border-left-color:#d99179}.scene-enemy .scene-officer small{color:#c7a194}.scene-enemy .scene-meter i{background:#cd8d76}
.scene-versus{align-self:center;text-align:center;font:500 17px/1.8 var(--serif);letter-spacing:.2em;color:#b89f6e;border-right:1px solid #b89f6e33;border-left:1px solid #b89f6e33}
.scene-view{position:relative;isolation:isolate;background:#27372d;aspect-ratio:12/5;flex-shrink:0;border-top:1px solid #ab95675c;border-bottom:1px solid #ab95675c;overflow:hidden}
#battleSceneCanvas{width:100%;height:100%;cursor:default;touch-action:auto}
.scene-frame{position:absolute;inset:7px;border:1px solid #e4d1a033;pointer-events:none;box-shadow:0 0 50px 15px #121e2055 inset}
.scene-phase{position:absolute;left:50%;top:18px;transform:translateX(-50%);font:600 20px/1.5 var(--serif);letter-spacing:.24em;white-space:nowrap;color:#f4e1b5;background:#172a2be0;border-top:1px solid #e0c48b88;border-bottom:1px solid #e0c48b88;padding:6px 27px;text-shadow:0 2px 4px #000}
.scene-footer{padding:12px 24px 13px;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:79px;background:linear-gradient(#1d302b,#142421)}
#sceneMatch{color:#dfc48c;font-size:13px;letter-spacing:.04em}#sceneOutcome{margin:6px 0;color:#eee9d7;font-size:14px;font-weight:600}.scene-footer>small{font-size:10px;color:#a8b5a6;margin-top:4px}
.scene-progress{height:3px;background:#273c34}.scene-progress i{height:100%;display:block;background:#d7bb7c;width:0}
@media(max-width:700px){
 .battle-scene{width:calc(100vw - 16px);max-height:97dvh;border-radius:6px}
 .scene-header{padding:11px 12px;gap:8px;flex-wrap:wrap}.scene-header h2{font-size:19px}.scene-header .eyebrow{font-size:8px}#sceneLocation{font-size:10px}.scene-controls{gap:5px}.scene-controls button{padding:6px 10px;font-size:11px;min-height:38px}
 .scene-duel{padding:12px 10px;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:7px}
 .scene-army{grid-template-columns:42px minmax(0,1fr);padding-left:7px;gap:7px;padding-bottom:9px}.scene-army .portrait{width:42px;height:48px}.scene-officer small{font-size:9px;letter-spacing:0}.scene-officer h3{font-size:16px;margin:0 0 3px}.scene-officer .troop-chip{font-size:10px;padding:1px 4px}.scene-officer .troop-chip svg{width:14px;height:14px}.scene-role{display:none}
 .scene-strength{grid-column:1/-1;justify-content:flex-start;max-width:none;padding:0;min-width:0;gap:4px}.scene-count{font-size:26px}.scene-casualty{width:auto;margin-left:auto;text-align:right;font-size:11px;min-height:0}.scene-meter{left:7px}.scene-versus{font-size:12px;letter-spacing:0}
 .scene-phase{font-size:13px;top:9px;padding:4px 14px}.scene-frame{inset:4px}.scene-footer{padding:11px 12px;min-height:72px}#sceneMatch{font-size:11px}#sceneOutcome{font-size:12px}.scene-footer>small{font-size:9px}
}
@media(min-width:1000px) and (max-height:880px){
 .battle-scene{height:96dvh;overflow:hidden}.scene-header,.scene-duel,.scene-footer,.scene-progress{flex-shrink:0}.scene-view{aspect-ratio:auto;flex:1;min-height:0}
}
@media(max-height:540px) and (min-width:701px){
 .battle-scene{width:min(800px,calc(100vw - 16px));height:96dvh;overflow:hidden}.scene-header{padding:7px 15px;height:54px;flex-shrink:0}.scene-header h2{font-size:18px}.scene-header .eyebrow{font-size:8px}.scene-controls button{padding:4px 11px;min-height:32px;font-size:11px}.scene-duel{padding:8px 15px;gap:9px;height:82px;flex-shrink:0}.scene-army{grid-template-columns:43px minmax(0,1fr) auto;padding-bottom:6px;gap:8px}.scene-army .portrait{width:43px;height:47px}.scene-officer h3{font-size:16px;margin:0}.scene-officer small{font-size:9px}.scene-count{font-size:24px}.scene-casualty{font-size:10px;min-height:12px}.scene-view{aspect-ratio:auto;flex:1;min-height:0}.scene-phase{top:8px;font-size:15px;padding:3px 20px}.scene-footer{padding:7px 12px;min-height:55px;flex-shrink:0}#sceneOutcome{font-size:12px;margin:2px 0}.scene-footer>small{font-size:9px}.scene-progress{flex-shrink:0}
}
@media(prefers-reduced-motion:reduce){.battle-scene *{transition:none!important}}

.combat-impact-layer,.map-impact-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;touch-action:none;cursor:default}.combat-impact-layer{z-index:2}.map-impact-layer{z-index:3}.scene-phase,.scene-frame{z-index:3}.scene-army.scene-impact{background:linear-gradient(90deg,#f1b86a36,transparent);box-shadow:inset 3px 0 #ffe4aa}.scene-army.scene-impact.scene-guard-impact{background:linear-gradient(90deg,#a9e2cf35,transparent);box-shadow:inset 3px 0 #c6f4df}.scene-army.scene-impact .scene-casualty{color:#fff0c2;font-weight:800}.scene-army.scene-impact .scene-count{color:#ffdfac}