/* Кнопки доклада занимают отдельную строку, а не перекрываются прокруткой. */
dialog-main:has(.BattleReport)[style*="display: block"] {
    display: flex !important;
}
dialog-main:has(.BattleReport) > dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    margin: 30px 10px 0 !important;
}
dialog-main:has(.BattleReport) > dialog-buttons {
    position: static;
    flex: 0 0 auto;
    align-self: stretch;
    justify-content: flex-end;
    margin: 0 !important;
    padding: 10px;
}

.BattleReport {
    --battle-attacker: var(--color-info-text, #64b5f6);
    --battle-defender: var(--color-danger-text, #ef7070);
    --battle-muted: var(--color-text-secondary, #9aa0a6);
    --battle-side: var(--battle-attacker);
    width: 100%; min-width: 0; font-size: 12px; line-height: 1.45; text-align: left; text-shadow: none;
}
/* Общий * { margin:auto; font-size:11px; text-align:center } не управляет докладом. */
.BattleReport *, .BattleReport *::before, .BattleReport *::after {
    box-sizing: border-box; margin: 0; font-size: inherit; text-align: inherit; text-shadow: inherit;
}
.BattleReport strong, .BattleReport h2, .BattleReport h3 { font-weight: 600; }
.BattleReport button, .BattleReport input, .BattleReport summary { font-family: inherit; }
.BattleReport button:focus-visible, .BattleReport summary:focus-visible, .BattleReport input:focus-visible {
    outline: 2px solid var(--battle-attacker); outline-offset: 3px;
}
.BattleReportHeader {
    display: flex; align-items: center; gap: 14px; padding: 18px;
    border: 1px solid var(--color-border); border-radius: 10px;
    background: linear-gradient(115deg, var(--color-info-bg), transparent 75%);
}
.BattleReportHeroIcon { font-size: 32px; color: var(--battle-attacker); flex: 0 0 auto; }
.BattleReportHeroText { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.BattleReportEyebrow { display: block; color: var(--battle-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.BattleReportHeader h2 { font-size: 22px; margin: 2px 0 4px; line-height: 1.2; }
.BattleReportHeroText p { color: var(--battle-muted); }
.BattleReportHeroMeta { flex: 0 1 210px; display: grid; gap: 3px; text-align: right; }
.BattleReportHeroMeta small { color: var(--battle-muted); font-size: 11px; }
.BattleReportOutcome-defender .BattleReportHeroIcon { color: var(--battle-defender); }
.BattleReportOutcome-draw .BattleReportHeroIcon { color: var(--color-warning-text); }
.BattleReportActions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 12px 0 16px; }
.BattleReportActions button { padding: 6px 11px; min-height: 30px; text-align: center; }
.BattleReportSides, .BattleReportRewards, .BattleReportRoundBody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.BattleReportSide { --battle-side: var(--battle-attacker); min-width: 0; border: 1px solid var(--color-border); border-radius: 9px; padding: 13px; }
.BattleReportSide-defender { --battle-side: var(--battle-defender); }
.BattleReportSideHeader { display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--color-border); padding-bottom: 10px; }
.BattleReportSideHeader > i { color: var(--battle-side); font-size: 20px; }
.BattleReportSideHeader h3 { color: var(--battle-side); font-size: 15px; }
.BattleReportSideBadge { margin-left: auto; color: var(--battle-muted); font-size: 10px; border: 1px solid var(--color-border); border-radius: 20px; padding: 2px 7px; }
.BattleReportSideNumbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 9px; }
.BattleReportMetric { min-width: 0; }
.BattleReportMetric dt { color: var(--battle-muted); font-size: 10px; overflow-wrap: anywhere; }
.BattleReportMetric dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.BattleReportSideNumbers dd { font-size: 20px; font-weight: 600; line-height: 1.2; margin-top: 3px; }
.BattleReportSurvival { display: flex; height: 5px; overflow: hidden; border-radius: 4px; background: var(--color-border); }
.BattleReportSurvival-survived { background: var(--battle-side); }
.BattleReportSurvival-restored { background: var(--color-success-text); }
.BattleReportSurvival-lost { background: var(--color-danger-bg); }
.BattleReportSideCost { display: flex; justify-content: space-between; gap: 8px; margin: 9px 0 15px; font-size: 11px; }
.BattleReportSideCost span { color: var(--battle-muted); }
.BattleReportParticipant + .BattleReportParticipant { margin-top: 15px; }
.BattleReportParticipantHeader { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; margin-bottom: 7px; overflow-wrap: anywhere; }
.BattleReportParticipantHeader > strong { flex-basis: 100%; }
.BattleReportParticipantHeader > span, .BattleReportParticipantHeader > small { color: var(--battle-muted); font-size: 11px; }
.BattleReportUnits { display: grid; gap: 7px; }
.BattleReportUnit { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 9px 10px; min-width: 0; padding: 10px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-input-bg-ng); }
.BattleReportUnitVisual { position: relative; width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-bg-ng); }
.BattleReportUnitVisual > i { font-size: 30px; color: var(--battle-side); }
.BattleReportUnitVisual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.BattleReportUnitDestroyed .BattleReportUnitVisual img { filter: grayscale(1); opacity: .55; }
.BattleReportUnitBody { min-width: 0; }
.BattleReportUnitHead { display: flex; align-items: center; gap: 7px; }
.BattleReportUnitHead > i { color: var(--battle-side); font-size: 18px; }
.BattleReportUnitHead > strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.BattleReportUnitKind { color: var(--battle-muted); font-size: 10px; }
.BattleReportUnitCount { display: flex; align-items: center; gap: 14px; margin: 9px 0 7px; }
.BattleReportUnitBefore, .BattleReportUnitAfter { display: grid; min-width: 0; }
.BattleReportUnitCount small { font-size: 10px; color: var(--battle-muted); }
.BattleReportUnitCount strong { font-size: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.BattleReportUnitAfter strong { color: var(--battle-side); }
.BattleReportCountArrow { color: var(--battle-muted); font-size: 20px; }
.BattleReportUnitChanges { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; }
.BattleReportLoss { color: var(--color-danger-text); }
.BattleReportNoLoss { color: var(--battle-muted); }
.BattleReportRepair { color: var(--color-success-text); }
.BattleReportExperience { color: var(--color-warning-text); }
.BattleReportUnitStats { border-top: 1px solid var(--color-border); padding-top: 7px; margin-top: 8px; font-size: 11px; }
.BattleReportUnit > .BattleReportUnitStats { grid-column: 1 / -1; margin-top: 0; }
.BattleReportCombatStats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding-top: 7px; border-top: 1px solid var(--color-border); }
.BattleReportUnitStats > summary, .BattleReportTechnical > summary, .BattleReportAbout > summary { cursor: pointer; color: var(--battle-muted); }
.BattleReportStatGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.BattleReportReinforcement { color: var(--color-warning-text) !important; font-size: 11px; }
.BattleReportEmpty { color: var(--battle-muted); padding: 7px 0; font-size: 11px; }
.BattleReportRewards { margin-top: 13px; }
.BattleReportReward { padding: 12px; border: 1px solid var(--color-border); border-radius: 8px; min-width: 0; }
.BattleReportReward h3 { font-size: 13px; margin-bottom: 10px; }
.BattleReportMoon { display: flex; align-items: center; gap: 12px; margin-top: 13px; padding: 12px; border: 1px solid var(--color-border); border-radius: 8px; }
.BattleReportMoon > .mdi { color: var(--battle-muted); font-size: 30px; }
.BattleReportMoon.Created > .mdi, .BattleReportMoon.Created h3 { color: var(--color-success-text); }
.BattleReportMoon h3 { margin-bottom: 4px; font-size: 13px; }
.BattleReportMoon p { color: var(--battle-muted); font-size: 11px; }
.BattleReportResources { display: grid; gap: 8px; }
.BattleReportResource { display: flex; align-items: center; gap: 6px; min-width: 0; }
.BattleReportResource .ResBox { min-width: 20px; width: 20px; height: 20px; padding: 0; }
.BattleReportResourceName { color: var(--battle-muted); font-size: 11px; }
.BattleReportResource > strong { margin-left: auto; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.BattleReportTimeline { margin-top: 20px; }
.BattleReportTimelineHeading { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.BattleReportTimelineHeading h3 { font-size: 15px; }
.BattleReportExpandRounds { padding: 4px 8px; color: var(--battle-attacker); font-size: 11px; }
.BattleReportNotice { color: var(--battle-muted); margin: 7px 0; font-size: 11px; }
.BattleReportRound { border: 1px solid var(--color-border); border-radius: 7px; margin: 7px 0; }
.BattleReportRound > summary { cursor: pointer; padding: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; }
.BattleReportRound > summary::-webkit-details-marker { display: none; }
.BattleReportRound > summary::after { content: "+"; font-size: 18px; color: var(--battle-muted); margin-left: auto; }
.BattleReportRound[open] > summary::after { content: "−"; }
.BattleReportRoundNumber { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--battle-attacker); background: var(--color-info-bg); font-variant-numeric: tabular-nums; }
.BattleReportRoundPreview { display: flex; gap: 6px 15px; flex-wrap: wrap; font-size: 11px; margin-left: auto; }
.BattleReportRoundPreview-attacker { color: var(--battle-attacker); }
.BattleReportRoundPreview-defender { color: var(--battle-defender); }
.BattleReportRoundBody { padding: 0 10px 10px; }
.BattleReportRoundSide { min-width: 0; padding: 10px; border-radius: 5px; background: var(--color-input-bg-ng); }
.BattleReportRoundSide h4 { color: var(--battle-side); font-size: 12px; font-weight: 600; }
.BattleReportRoundSide .BattleReportSideNumbers dd { font-size: 16px; }
.BattleReportRoundUnit { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--color-border); font-size: 11px; }
.BattleReportRoundUnit .BattleReportUnitVisual { width: 40px; height: 40px; }
.BattleReportRoundUnit .BattleReportUnitVisual > i { font-size: 21px; }
.BattleReportRoundCount { text-align: right; }
.BattleReportRoundCount > span { display: block; font-size: 10px; }
.BattleReportRoundUnit > div { min-width: 0; overflow-wrap: anywhere; }
.BattleReportRoundUnit small { display: block; color: var(--battle-muted); font-size: 10px; }
.BattleReportTechnical { border-top: 1px solid var(--color-border); padding-top: 7px; margin-top: 4px; font-size: 11px; }
.BattleReportTechnicalUnit { margin-top: 10px; min-width: 0; overflow-wrap: anywhere; }
.BattleReportTechnicalUnit > strong { font-size: 10px; }
.BattleReportDestroyed { margin-top: 8px; padding: 6px 8px; border-left: 2px solid var(--color-danger-text); color: var(--color-danger-text); background: var(--color-danger-bg); border-radius: 3px; font-size: 11px; }
.BattleReportAbout { margin-top: 17px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.BattleReportShare { display: flex; margin-top: 9px; }
.BattleReportLink { min-width: 0; width: 100%; padding: 7px; font-size: 11px; }
.BattleReportSavedRow { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 10px; margin-bottom: 7px; text-align: left; }
.BattleReportSavedRow time { color: var(--battle-muted); font-size: 11px; }
.MessageBattleReport { display: inline-block; margin: 10px 0 0; padding: 6px 12px; }
@media (max-width: 650px) {
    .BattleReportSides, .BattleReportRewards, .BattleReportRoundBody { grid-template-columns: minmax(0, 1fr); }
    .BattleReportHeader { flex-wrap: wrap; padding: 13px; gap: 10px; }
    .BattleReportHeader h2 { font-size: 20px; }
    .BattleReportHeroIcon { font-size: 26px; }
    .BattleReportHeroMeta { flex-basis: 100%; text-align: left; grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 11px; }
    .BattleReportHeroMeta small { grid-column: 1 / -1; }
    .BattleReportSide { padding: 10px; }
    .BattleReportRoundPreview { flex-basis: calc(100% - 38px); margin-left: 32px; gap: 3px 12px; }
    .BattleReportRound > summary { position: relative; padding-right: 28px; }
    .BattleReportRound > summary::after { position: absolute; right: 12px; top: 9px; }
    .BattleReportSavedRow { flex-direction: column; gap: 4px; }
}