/* One real pair of cards and dice per duel. Animation timing is provisional. */
#battleLocation{position:absolute;z-index:3;left:50%;top:calc(clamp(130px,24dvh,270px) + 130px);transform:translateX(-50%);width:118px;padding:5px;text-align:center;border:1px solid #fca4a7;background:#061924f0;border-radius:7px;pointer-events:none}
#battleLocation svg{width:95px;height:58px;display:block;margin:auto}#battleLocation small{font-size:6px;color:#ffc5b6;display:block}#battleLocation b{font-size:9px;display:block;margin:2px 0}#battleLocation span{font-size:7px;color:#c1d7df;display:block}
@media(max-width:549px){#battleLocation{width:83px;top:calc(clamp(110px,19dvh,170px) + 125px);padding:3px}#battleLocation svg{width:65px;height:40px}#battleLocation b{font-size:7px}#battleLocation span{display:none}}
@media(max-height:500px) and (min-width:600px){#battleLocation{left:34%;top:160px;width:90px}#battleLocation svg{width:65px;height:42px}#battleLocation span{display:none}}
@media(min-width:1000px) and (min-height:600px){#battleLocation{left:81%;top:210px;width:128px}#battleLocation svg{width:108px;height:70px}}
#battleReportDialog{width:min(760px,calc(100% - 24px));max-height:90dvh;overflow:auto}
.battle-story ol{list-style:none;margin:0;padding:0}
.battle-story li{border-left:2px solid #78dcc2;padding:5px 8px;margin:4px 0;background:#041620b8;border-radius:0 5px 5px 0}
.battle-story p{margin:3px 0;line-height:1.35}
.story-photo .story-heading{display:flex;justify-content:space-between;gap:8px;align-items:center}
#battleOverlay .story-photo b{font-size:11px;letter-spacing:0;margin:0;color:#fff}
#battleOverlay .story-photo span{font-size:10px;line-height:1.3;letter-spacing:0;color:#dfedef}
.story-photo p{display:none;font-size:10px;color:#d6ebe9}
.story-photo .report-outcome p{display:block}
.story-photo button{min-height:26px;padding:4px 9px;font-size:10px;background:#154333;border-color:#7edcbc;margin-top:4px;color:#dcffec}
.story-full li{padding:12px;margin:12px 0}
.story-full li>b,.story-full li>span{display:block}
.story-full li>b{font-size:14px;color:#b8ffe2;margin-bottom:4px}
.story-full li>span{font-size:13px}.story-full li>p,.report-note{font-size:12px;color:#bfd3db}
.story-full .story-heading{display:none}
@media(max-width:999px),(max-height:599px){
.story-photo li{display:none;margin:3px 0;padding:3px 6px}
.story-photo li.report-current{display:block}
.story-photo .story-heading>span{display:none}
#battleOverlay .story-photo b{font-size:9px}#battleOverlay .story-photo span{font-size:9px}
.story-photo button{min-height:23px;padding:3px 7px;font-size:9px}
.story-photo .report-outcome p{display:none}
}
@media(max-height:500px) and (min-width:600px){.duel-recap .recap-dice{display:none}}
#battleOverlay{width:min(1200px,calc(100% - 16px));max-width:none;max-height:calc(100dvh - 16px);padding:12px;overflow:auto;position:relative}
#battleOverlay .eyebrow{font-size:9px}
#battleOverlay h2{font-size:23px;margin:4px 0;line-height:1.15}
#battleOverlay #battleRoute{font-size:11px;margin:3px 0 7px}
#battleOverlay>.speed-buttons{position:absolute;right:12px;top:29px;gap:4px;margin:0}
#battleOverlay>.speed-buttons button{min-height:30px;padding:4px 9px;font-size:10px}
#battleCinema{margin:0 0 7px}
.battle-hero{height:clamp(130px,24dvh,270px);position:relative;border-radius:10px;overflow:hidden;border:1px solid #718d91;background:#051720}
.battle-art{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;transform-origin:center}
.battle-art.mirrored{transform:scaleX(-1)}
.battle-spectacle[data-phase=roll] .battle-art{animation:battlePulse calc(1s / var(--fx-rate,1)) ease-in-out infinite}
.hero-caption{position:absolute;inset:auto 0 0;padding:26px 13px 10px;background:linear-gradient(transparent,#020b13eb)}
.hero-caption span{display:block;color:#ffdf9b;font-size:9px;letter-spacing:1px}
.hero-caption b{display:block;font-size:16px;margin-top:3px;color:#fff}
.hero-impact{position:absolute;inset:0;background:radial-gradient(ellipse at center,#d9eaff8c,transparent 35%);opacity:0;pointer-events:none}
[data-phase=roll] .hero-impact{animation:impactFlash calc(.85s / var(--fx-rate,1)) infinite}
.duel-drone-card{position:absolute;right:9px;top:9px;margin:0;text-align:center;width:56px}
.duel-drone-card img{display:block;width:56px;height:63px;object-fit:contain;background:#071821;border:1px solid #9ddde9;border-radius:6px}
.duel-drone-card figcaption{font-size:8px;color:#ffe08a;background:#071821d9;padding:3px}
.individual-duel{height:clamp(210px,36dvh,280px);position:relative;border-bottom:1px solid #526e6940;padding-top:8px}
.duel-combatant{position:absolute;top:8px;width:32%;text-align:center}
.duel-combatant.attack{left:3%}.duel-combatant.defend{right:3%}
.duel-combatant>b{display:block;font-size:10px;color:#e2eef0;margin-bottom:5px}
.duel-combatant.defend>b{color:#ffc4c4}
#battleOverlay .fx-fighter{width:100%;max-width:128px;margin:auto;min-width:0}
#battleOverlay .fx-fighter img{display:block;width:100%;height:clamp(95px,17dvh,154px);object-fit:contain;object-position:center;background:#071821;border:2px solid #b6c7c9;border-radius:7px}
#battleOverlay .fx-fighter[data-team=ai] img{border-color:#df6a63}
#battleOverlay .fx-fighter.pair-win img{border-color:#ffe28f;box-shadow:0 0 12px #ffe47788}
.fighter-name{display:block;font-size:10px;color:#fff;margin-top:3px;text-align:center}
.duel-combatant>small{display:block;font-size:9px;margin-top:4px;color:#b5ccd1}
.duel-versus{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);font-size:20px;color:#ffe194}
.duel-dice{position:absolute;top:calc(100% - 64px);width:74px;display:flex;align-items:center;flex-direction:column;gap:5px;transform:translateX(-50%)}
.duel-dice.attack{left:19%}.duel-dice.defend{left:81%}
#battleOverlay .duel-dice .die{width:48px;height:51px;font-size:29px;display:grid;place-items:center}
#battleOverlay .die.clockwise::before{animation:d20Tumble calc(.7s / var(--fx-rate,1)) linear infinite}
#battleOverlay .die.clockwise .die-value{opacity:.65}
.duel-total{font-size:20px;color:#fff;line-height:1.1;text-align:center}
.duel-total small{font-size:6px;display:block;color:#bfd2ce;letter-spacing:1px}
.duel-dice:not(.resolved) .duel-total{display:none}
.duel-total{position:absolute;left:calc(100% - 3px);top:9px;width:40px}
.duel-dice.defend .duel-total{left:auto;right:calc(100% - 3px)}
[data-phase=roll] .duel-combatant.attack .fx-fighter{animation:attackerClash calc(.7s / var(--fx-rate,1)) ease-in-out infinite}
[data-phase=roll] .duel-combatant.defend .fx-fighter{animation:defenderClash calc(.7s / var(--fx-rate,1)) ease-in-out infinite}
#battleOverlay .die.won{transform:scale(1.23);filter:drop-shadow(0 0 7px #ffe194);z-index:2}
#battleRows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.duel-recap{padding:6px;min-width:0;border:1px solid #3e6067;background:#08232b;min-height:48px}
.duel-recap:disabled{opacity:1;color:#b6cad0}
.duel-recap.current{outline:2px solid #e4f8ed;outline-offset:-3px}
#battleRows .duel-recap.player-win{background:#10372b;border-color:#53dc99}
#battleRows .duel-recap.player-loss{background:#401e24;border-color:#f57c87}
.duel-recap .result-win{color:#85ffc1}.duel-recap .result-loss{color:#ff979f}
.duel-recap.player-win .result-label{color:#85ffc1}.duel-recap.player-loss .result-label{color:#ff979f}
.duel-recap span,.duel-recap small{display:block;font-size:8px;font-weight:400}
.duel-recap b{display:block;font-size:14px;margin:3px 0}
.duel-recap b span{display:inline;font-size:inherit;font-weight:inherit}
#battleOverlay #battleSummary{font-size:11px;line-height:1.35;min-height:0;margin:7px 0}
.battle-tools{display:flex;gap:7px;align-items:stretch}
#battleOverlay .battle-tools button{font-size:10px;min-height:34px}
#battleOverlay #closeBattle{flex:1;width:auto}
#battleOverlay>small{display:block;text-align:center;font-size:8px;color:#a6bec6;margin:5px 0 0}
#battleOverlay .ai-advance{font-size:10px;margin:4px 0;padding:0}
.drone-assault{height:calc(clamp(130px,24dvh,270px) + clamp(210px,36dvh,280px));position:relative;overflow:hidden;border:1px solid #9bbccd;border-radius:11px;background:#08202b}
.drone-action-art{width:100%;height:100%;object-fit:cover;animation:droneAttackZoom calc(3s / var(--fx-rate,1)) ease-out infinite}
.drone-identity{position:absolute;top:12px;left:12px;margin:0;width:90px}
.drone-identity img{width:90px;height:110px;object-fit:contain;background:#051b28;border:1px solid #d8f4ff;border-radius:7px}
.drone-identity figcaption{font-size:9px;color:#fff;text-align:center;background:#051b28df;padding:5px}
.drone-caption{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,#030f1bf0);padding:40px 18px 16px}
.drone-caption span{font-size:10px;color:#ffe49e;letter-spacing:2px}
.drone-caption b{display:block;font-size:23px;margin:5px 0}
.drone-caption p{font-size:12px;margin:4px 0}
.drone-laser{position:absolute;left:38%;top:47%;width:40%;height:4px;background:linear-gradient(90deg,transparent,#aaf7ff,#fff);transform:rotate(24deg);transform-origin:left;box-shadow:0 0 18px #74ecff;animation:droneLaser calc(.9s / var(--fx-rate,1)) infinite}
.drone-blast{position:absolute;left:64%;top:61%;width:25%;aspect-ratio:1;border-radius:50%;background:radial-gradient(#fff6,transparent 65%);animation:impactFlash calc(.9s / var(--fx-rate,1)) infinite}
.combat-paused #battleCinema *{animation-play-state:paused!important}
@keyframes battlePulse{50%{filter:brightness(1.12)}}
@keyframes impactFlash{0%,35%,100%{opacity:0}50%{opacity:.65}}
@keyframes attackerClash{50%{transform:translateX(7px) rotate(2deg)}}
@keyframes defenderClash{50%{transform:translateX(-6px) rotate(-2deg)}}
@keyframes droneAttackZoom{from{transform:scale(1)}to{transform:scale(1.065)}}
@keyframes droneLaser{0%,15%,90%,100%{opacity:0;scale:.2 1}40%,65%{opacity:1;scale:1 1}}
@media(max-width:549px){
#battleOverlay:has(#battleLocation:not([hidden])) .battle-hero{height:calc(clamp(110px,19dvh,170px) - 28px)}
#battleOverlay:has(#battleLocation:not([hidden])) .hero-caption{padding-top:8px}
#battleOverlay #battleLocation{top:calc(clamp(110px,19dvh,170px) + 105px)}
#battleOverlay{padding:9px}
#battleOverlay>.eyebrow{display:none}
#battleOverlay h2{font-size:17px}
#battleOverlay #battleRoute{line-height:1.2;margin:3px 0 4px}
#battleOverlay>.speed-buttons{position:static;margin:4px 0 7px;justify-content:flex-end}
#battleOverlay>.speed-buttons button{font-size:9px;min-height:28px;padding:4px 7px}
.battle-hero{height:calc(clamp(110px,19dvh,170px) - 8px)}
.individual-duel{height:calc(clamp(185px,33dvh,245px) + 8px)}
.drone-assault{height:calc(clamp(110px,19dvh,170px) + clamp(185px,33dvh,245px))}
#battleOverlay .fx-fighter{max-width:78px}
#battleOverlay .fx-fighter img{height:clamp(88px,14dvh,125px)}
.duel-combatant{width:36%}.duel-combatant.attack{left:0}.duel-combatant.defend{right:0}
.duel-combatant>b{font-size:7.5px}.duel-combatant>small{font-size:7px}.fighter-name{font-size:9px}
.duel-dice{width:45px;top:calc(100% - 42px)}
#battleOverlay .duel-dice .die{width:34px;height:38px;font-size:23px}.duel-total{font-size:17px}
.duel-versus{top:51%;font-size:16px}.hero-caption{padding:25px 8px 8px}.hero-caption b{font-size:12px}.hero-caption span{font-size:8px}
.duel-recap{padding:5px 2px;min-height:47px}.duel-recap b{font-size:12px}.duel-recap span,.duel-recap small{font-size:7px}
#battleOverlay #battleSummary{font-size:9px;margin:5px 0}.battle-tools{gap:4px}#battleOverlay .battle-tools button{font-size:9px;padding:4px 6px;min-height:32px}
#battleOverlay .ai-advance{font-size:8px;margin:1px 0;gap:4px}
.drone-caption{padding:30px 12px 12px}.drone-caption b{font-size:18px}.drone-caption p{font-size:10px}.drone-identity{width:65px}.drone-identity img{width:65px;height:83px}.drone-identity figcaption{font-size:7px}
}
@media(max-height:500px) and (min-width:600px){
#battleOverlay{padding:8px}
#battleOverlay #battleCinema{float:left;width:68%;margin:0 10px 0 0}
.battle-hero{height:22dvh;min-height:85px}.individual-duel{height:49dvh;min-height:180px}
.drone-assault{height:74dvh}
#battleOverlay #battleRows{display:flex;flex-direction:column;gap:5px}
#battleOverlay h2{font-size:17px}#battleOverlay>.speed-buttons{top:7px}
#battleOverlay .fx-fighter img{height:22dvh;min-height:78px}
.duel-combatant>b{font-size:8px}.duel-combatant>small{font-size:7px}
#battleOverlay .duel-dice .die{width:33px;height:37px;font-size:22px}.duel-total{font-size:17px}
.battle-tools{flex-direction:row;flex-wrap:wrap;gap:4px}#battleOverlay .battle-tools #closeBattle{flex-basis:100%;min-height:28px}#battleOverlay .battle-tools button{flex:1;min-height:26px;padding:3px 5px;font-size:9px}
.duel-recap{min-height:0;padding:3px 4px;line-height:1.1}.duel-recap span,.duel-recap small{font-size:7px;line-height:1.1}.duel-recap b{font-size:12px;line-height:1.1;margin:2px 0}
#battleOverlay #battleSummary{font-size:9px;clear:none;display:flow-root;margin:5px 0}
#battleOverlay .ai-advance{font-size:8px;margin:2px 0;gap:4px}
#battleOverlay>small{display:flow-root}
.duel-dice{top:calc(100% - 55px)}
#battleOverlay>small{font-size:7px}
}
@media(prefers-reduced-motion:reduce){#battleCinema *{animation:none!important}}
@media(min-width:1000px) and (min-height:600px){
#battleOverlay:has(#battleLocation:not([hidden])) .battle-hero,#battleOverlay:has(#battleLocation:not([hidden])) .individual-duel{height:calc(clamp(130px,24dvh,270px) + clamp(210px,36dvh,280px) - 20px)}
.story-photo .report-current p,.story-photo .report-drone p{display:block;font-size:9px}
#battleOverlay .battle-spectacle{display:grid;grid-template-columns:62% minmax(0,1fr);gap:12px}
#battleOverlay .battle-hero,#battleOverlay .individual-duel{height:calc(clamp(130px,24dvh,270px) + clamp(210px,36dvh,280px))}
#battleOverlay .fx-fighter img{height:clamp(155px,27dvh,230px)}
#battleOverlay .duel-dice{top:calc(clamp(155px,27dvh,230px) + 76px)}
#battleOverlay .duel-versus{top:59%}
}