/* Combat : terrain et dégâts en direct, côte à côte. */
#screen-battle { max-width: 720px; }
#screen-battle > .battle-header { flex: 0 0 auto; min-height: 58px; gap: 8px; }
#screen-battle #battle-vs { min-width: 0; text-align: center; font-size: 12px; line-height: 1.4; }
.battle-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: 10px; padding-bottom: 8px; }
#screen-battle .battlefield { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; justify-content: space-evenly; padding: 8px 3px; }
#screen-battle .unit.card-unit .unit-sprite.unit-card { width: min(100%, max(42px, calc((100dvh - 260px) / 4 * 0.667))); }
#screen-battle .grid-enemy.solo-boss { height: auto; min-height: 0; }
#screen-battle .grid-enemy.solo-boss .unit.boss-unit { width: min(100%, max(90px, calc((42dvh - 60px) * 0.667))); }
.battle-damage { align-self: stretch; min-height: 0; overflow-y: auto; padding: 12px 5px 8px; border: 1px solid #b4a17a55; border-radius: 12px; background: linear-gradient(#101722eb, #0a111bea); box-shadow: 0 5px 18px #0005; scrollbar-width: thin; }
.battle-damage h3 { color: #e9d2a7; font: 600 14px Georgia, serif; text-align: center; }
.damage-side { display: block; color: #b9bbc8; text-align: center; font-size: 10px; margin: 3px 0 12px; }
.damage-ranking { display: flex; flex-direction: column; gap: 12px; }
.damage-entry { min-width: 0; text-align: center; }
.damage-face { display: block; width: 44px; margin: 0 auto; }
.report-portrait { display: block; position: relative; aspect-ratio: 1; overflow: hidden; border: 2px solid var(--report-rarity, #bfab82); border-radius: 9px; background: #14202e; box-shadow: inset 0 0 0 2px #070a11, 0 3px 10px #0006; }
.report-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 23%; }
.report-portrait img[hidden] { display: none; }
.report-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; }
.is-fallen .report-portrait { filter: grayscale(1) brightness(.65); border-color: #87909e; }
.damage-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 3px 0 1px; font-size: 10px; color: #d8d8e1; }
.damage-value { font-size: 13px; font-variant-numeric: tabular-nums; color: #f3cd96; }
.damage-meter { display: block; margin: 4px 2px 0; height: 3px; background: #ffffff15; border-radius: 4px; overflow: hidden; }
.damage-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ac663f, #f5cb80); transition: width .15s; }
.damage-total { margin-top: 12px; padding-top: 9px; border-top: 1px solid #b4a17a44; text-align: center; }
.damage-total small, .damage-total b { display: block; }
.damage-total small { color: #bbb7c5; font-size: 11px; }
.damage-total b { margin-top: 3px; color: #f3d391; font-size: 14px; }

/* Fenêtres de fin : récompenses conservées, bilan de tous les héros engagés. */
.combat-result {
  --report-accent: #ffe1a1;
  --report-light: #edb35b26;
  --report-shade: linear-gradient(180deg, #11152335, #08111d66 48%, #040912b8);
  padding: 12px;
  background-color: #0b1422;
  background-image: var(--report-shade), url('../assets/art/reports/hall-of-remembrance-v1.jpg');
  background-size: cover;
  background-position: center 36%;
  background-repeat: no-repeat;
}
.combat-result[data-outcome='lose'] { --report-accent: #d2d5ff; --report-light: #858dd72b; --report-shade: linear-gradient(180deg, #1319378c, #10172b91 48%, #070b1bd9); }
.combat-result[data-outcome='raid'] { --report-accent: #b7ebf5; --report-light: #6fb8cf24; --report-shade: linear-gradient(180deg, #10273461, #0a202b80 48%, #050e19cc); }
.combat-result .result-card {
  width: min(94vw, 920px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--report-accent) 65%, #1b2133);
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0, var(--report-light), transparent 360px), linear-gradient(180deg, #08101b1f, #08111bab 210px, #08111bd9 100%);
  box-shadow: 0 20px 80px #000b, inset 0 0 0 5px #ffffff04, inset 0 1px 0 #ffe8b52b;
  scrollbar-width: thin;
}
.combat-result h2, .combat-result #result-title { margin: 0 0 12px; padding: 30px 8px 16px; color: var(--report-accent); font: 700 clamp(28px, 5vw, 42px) / 1.2 Georgia, serif; letter-spacing: .025em; text-wrap: balance; text-shadow: 0 2px 4px #000, 0 4px 20px #02050c, 0 0 38px var(--report-light); }
.combat-result #result-title.lose, .combat-result #result-title.win { color: var(--report-accent); }
.combat-result .result-reward { margin-bottom: 18px; font-size: 14px; line-height: 1.5; color: #f0e8db; text-shadow: 0 2px 5px #000, 0 0 16px #000; }
.combat-result .result-actions { position: sticky; bottom: -24px; flex-wrap: wrap; gap: 8px; padding: 14px 0 4px; margin-top: 6px; background: linear-gradient(#08111b00, #08111bf5 25%); z-index: 1; }
.combat-result .result-actions .btn { flex: 1 1 160px; padding: 12px 14px; font-size: 14px; }
.battle-report { margin: 18px 0 4px; width: 100%; }
.report-toolbar { display: flex; justify-content: center; margin-bottom: 12px; }
.report-sides { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #ac9c7940; border-radius: 10px; background: #070d16; }
.report-sides button { padding: 8px 16px; border: 1px solid transparent; border-radius: 7px; background: none; color: #bdb9ca; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.report-sides button[aria-pressed='true'] { background: #263041; color: #fff0ce; border-color: #c0ab7e66; }
.report-sides button[data-report-side='B'][aria-pressed='true'] { background: #422833; color: #ffd9d5; border-color: #cd7b7c66; }
.report-sides button:focus-visible { outline: 2px solid var(--report-accent); outline-offset: 2px; }
.report-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; font-size: 13px; text-shadow: 0 2px 5px #000; }
.report-legend i { font-style: normal; }
.metric-damage { --metric-color: #f18c80; color: var(--metric-color); }
.metric-taken { --metric-color: #85caf1; color: var(--metric-color); }
.metric-healing { --metric-color: #9cdd9b; color: var(--metric-color); }
.report-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.report-hero { min-width: 0; padding: 8px 5px 10px; border: 1px solid #d0bb9140; border-radius: 12px; background: linear-gradient(#09121cd9, #09121ce8); box-shadow: 0 4px 14px #0003, inset 0 1px 0 #fff1; }
.report-hero .report-portrait { width: min(100%, 94px); margin: 0 auto; }
.report-hero h4 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 7px 0 2px; height: 2.5em; font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; color: #eee9df; }
.report-survival { display: block; margin-bottom: 9px; font-size: 11px; color: #abd5be; }
.is-fallen .report-survival { color: #a3a5b6; }
.report-metric { margin-top: 8px; }
.report-metric dd { margin: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.report-metric dd > span { font-size: 11px; }
.report-metric dd > i { display: block; height: 3px; margin-top: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--metric-color) var(--metric-fill), #ffffff15 var(--metric-fill)); }
.report-total { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 5px 10px; margin: 20px 0 10px; color: var(--report-accent); text-shadow: 0 2px 8px #000; }
.report-total small { font-size: 14px; }
.report-total strong { font: 700 26px Georgia, serif; }
.report-total span { flex-basis: 100%; color: #b8b6c7; font-size: 12px; }
.report-wave { margin: 18px 0 10px; text-align: left; color: #d9c8a7; font-size: 14px; }
.report-note { margin: 10px 0 16px; font-size: 13px; color: #c2becd; line-height: 1.5; }
@media (max-width: 600px) {
  .combat-result { padding: 8px; }
  .combat-result .result-card { width: 100%; padding: 18px 12px; max-height: calc(100dvh - 16px); }
  .combat-result h2, .combat-result #result-title { padding: 20px 4px 14px; }
  .combat-result .result-actions { bottom: -18px; }
  .report-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 380px) {
  .battle-layout { grid-template-columns: minmax(0, 1fr) 62px; gap: 5px; }
  .battle-damage { padding-inline: 3px; }
  .damage-face { width: 38px; }
}
@media (max-height: 650px) {
  .battle-damage { padding-top: 7px; }
  .damage-ranking { gap: 7px; }
  .damage-face { width: 32px; }
  .damage-side { margin-bottom: 7px; }
  .damage-name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .damage-meter i { transition: none; }
  .combat-result, .combat-result .result-card { animation: none; }
}