/* === 06. WYNIKI RUNU ======================================================= */

/* --- 06.1 Ekran po walce i lup --- */
#post-fight-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 64px;
}

#post-fight-actions .game-button {
    padding: 8px 28px 0 28px;
    font-size: 16px;
    line-height: 1.05;
    white-space: normal;
}

#post-fight-overlay {
    position: absolute;
    z-index: 140;
    background: radial-gradient(circle at 50% 28%, rgba(61, 44, 23, .48), rgba(0,0,0,.86) 58%);
}

#post-fight-panel,
#post-fight-panel.victory-panel,
#post-fight-panel.defeat-panel {
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#post-fight-panel {
    width: 512px;
    height: 768px;
    padding: 72px 72px 48px 72px;

    background: transparent url("../image/ui/window_tall.png") center / 100% 100% no-repeat;

    text-align: center;
}

.loot-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.loot-chip {
    border: 1px solid rgba(197,160,89,.45);
    background: linear-gradient(135deg, rgba(197,160,89,.11), rgba(0,0,0,.42));
    padding: 10px 12px;
    font-size: 12px;
    color: #e7d4a6;
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    box-shadow: inset 0 0 16px rgba(0,0,0,.38);
}

.loot-chip .loot-name {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.loot-chip .loot-count {
    color: #050505;
    background: #c5a059;
    border-radius: 999px;
    min-width: 30px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

/* --- 06.2 Ceremonialny ekran nagrod po runie ---
   Szerokie okno zwycięstwa korzysta z grafiki image/ui/reward_victory_window.png.
   Cząsteczki są rysowane przez wspólny FX.createMergeController(), a nie przez osobny CSS-owy system. */
#post-fight-fx-canvas {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: normal;
    contain: strict;
    transition: opacity 180ms ease;
}

#post-fight-fx-canvas.visible {
    opacity: .82;
}

#post-fight-overlay.defeat #post-fight-fx-canvas.visible {
    opacity: .72;
    mix-blend-mode: normal;
}

#post-fight-overlay.victory {
    background:
        radial-gradient(circle at 50% 41%, rgba(190, 137, 58, .28), rgba(34, 22, 12, .34) 28%, rgba(0,0,0,.90) 74%),
        linear-gradient(180deg, rgba(0,0,0,.66), rgba(0,0,0,.92));
}

#post-fight-overlay.victory::before,
#post-fight-overlay.defeat::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

#post-fight-overlay.victory::before {
    background:
        radial-gradient(circle at 50% 44%, rgba(219, 170, 83, .18), transparent 36%),
        radial-gradient(circle at 50% 50%, transparent 0, rgba(0,0,0,.34) 66%, rgba(0,0,0,.82) 100%);
}

#post-fight-overlay.victory #post-fight-panel {
    animation-name: victoryPanelEnter;
}

#post-fight-panel.victory-panel {
    position: relative;
    z-index: 2;
    width: var(--victory-window-w);
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 0;
    padding: 0;
    background: transparent;
    text-align: center;
    overflow: visible;
}

#post-fight-panel.victory-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("../image/ui/reward_victory_window.png") center / 100% 100% no-repeat;
    opacity: .97;
    filter: none;
    animation: victoryWindowGlowPulse 4.4s ease-in-out infinite;
}

#post-fight-panel.victory-panel > * {
    position: relative;
    z-index: 2;
}

.victory-title {
    position: absolute;
    left: 50%;
    top: var(--victory-title-top);
    transform: translateX(-50%);
    width: var(--victory-title-w);
    margin: 0;
    color: #f7ddb0;
    font-family: var(--font-title);
    text-transform: uppercase;
    letter-spacing: .08em;
    text-shadow:
        0 2px 0 rgba(0,0,0,.88),
        0 0 16px rgba(226,174,83,.38);
}

.victory-title span {
    display: block;
    min-height: 22px;
    color: #b88743;
    font-size: var(--victory-title-label-size);
    line-height: var(--victory-title-label-line);
    letter-spacing: .20em;
}

.victory-title strong {
    display: block;
    margin-top: var(--victory-title-main-gap);
    color: #f2c978;
    font-size: var(--victory-title-main-size);
    line-height: 1;
    font-weight: 900;
}

.victory-title time {
    display: block;
    margin-top: 6px;
    color: #c4aa76;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: none;
}

.victory-subtitle {
    position: absolute;
    left: 50%;
    top: var(--victory-subtitle-top);
    transform: translateX(-50%);
    width: var(--victory-subtitle-w);
    margin: 0;
    color: #d7c6a6;
    font-size: var(--victory-subtitle-size);
    line-height: 1.4;
    font-family: var(--font-body);
    text-shadow: 0 2px 0 rgba(0,0,0,.78);
}

.victory-subtitle strong {
    color: #f0cb84;
    font-weight: 900;
}

.victory-loot-grid {
    position: absolute;
    left: 50%;
    top: var(--victory-relics-top);
    width: var(--victory-relics-w);
    min-height: 196px;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--victory-relic-gap-y) var(--victory-relic-gap-x);
    transform: translateX(-50%);
}

.victory-loot-card {
    --reward-color: #c5a059;
    position: relative;
    flex: 0 1 var(--victory-relic-card-w);
    min-width: 0;
    width: var(--victory-relic-card-w);
    min-height: var(--victory-relic-card-h);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #ead7ad;
    overflow: visible;
    opacity: 0;
    transform: translateY(10px) scale(.985);
    animation: rewardItemReveal 440ms cubic-bezier(.17,.86,.23,1) forwards;
    animation-delay: var(--reward-delay, 180ms);
}

.victory-crystal-icon {
    position: relative;
    z-index: 1;
    display: block;
    width: min(var(--victory-relic-icon-w), 100%);
    height: auto;
    aspect-ratio: 1 / 2;
    margin: 0 auto 4px auto;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    filter:
        drop-shadow(0 7px 9px rgba(0,0,0,.70))
        drop-shadow(0 0 11px color-mix(in srgb, var(--reward-color) 46%, transparent));
}

.victory-loot-card .victory-loot-sigil {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto 4px auto;
    border-radius: 50%;
    background:
        radial-gradient(circle, #fff1b9 0 16%, var(--reward-color) 18% 46%, rgba(0,0,0,.32) 49% 100%);
    box-shadow: 0 0 12px color-mix(in srgb, var(--reward-color) 58%, transparent);
}

.victory-loot-card small {
    display: block;
    margin-top: 2px;
    color: #a79a84;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.victory-loot-card em {
    position: absolute;
    right: -8px;
    top: 138px;
    min-width: 28px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #c5a059;
    color: #050505;
    font-style: normal;
    font-weight: 900;
    box-shadow: 0 0 12px rgba(197,160,89,.26);
}

.victory-loot-card.empty {
    --reward-color: #9a7c43;
}

#post-fight-panel.victory-panel .victory-run-stats {
    position: absolute;
    left: var(--victory-stats-x);
    top: var(--victory-stats-y);
    width: var(--victory-stats-w);
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--victory-stats-gap);
    margin: 0;
    transform: translate(-50%, -50%);
}

#post-fight-panel.victory-panel .victory-stat {
    position: relative;
    min-width: 116px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    opacity: 1;
    transform: none;
    animation: none;
    text-shadow: 0 2px 0 rgba(0,0,0,.92), 0 0 10px rgba(0,0,0,.72);
}

#post-fight-panel.victory-panel .victory-stat span {
    display: block;
    color: #c4aa76;
    font-size: var(--victory-stat-label-size);
    text-transform: uppercase;
    letter-spacing: .16em;
}

#post-fight-panel.victory-panel .victory-stat strong {
    display: block;
    margin-top: 2px;
    color: #ffd98c;
    font-family: var(--font-title);
    font-size: var(--victory-stat-value-size);
    line-height: 1;
}

#post-fight-actions.victory-actions {
    position: absolute;
    left: 50%;
    bottom: var(--victory-button-bottom);
    z-index: 4;
    width: min(704px, 82%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 0;
    transform: translateX(-50%);
}

#post-fight-actions.victory-actions .game-button {
    font-size: var(--victory-button-font-size);
}

@keyframes victoryPanelEnter {
    0% { opacity: 0; transform: translate3d(0, 20px, 0) scale(.982); filter: brightness(.76); }
    62% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.006); filter: brightness(1.08); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); }
}

@keyframes victoryWindowGlowPulse {
    0%, 100% { opacity: .94; }
    50% { opacity: 1; }
}

@keyframes rewardItemReveal {
    0% { opacity: 0; transform: translateY(12px) scale(.98); }
    64% { opacity: 1; transform: translateY(-2px) scale(1.012); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- 06.3 Ekran porazki po runie --- */
#post-fight-overlay.defeat {
    background:
        radial-gradient(circle at 50% 44%, rgba(154, 124, 67, .18), rgba(0,0,0,.84) 36%, rgba(0,0,0,.97) 100%),
        radial-gradient(circle at 50% 58%, rgba(92, 22, 14, .14), transparent 38%),
        #020202;
}

#post-fight-overlay.defeat::before {
    background:
        radial-gradient(circle at 50% 48%, rgba(197,160,89,.10), transparent 32%),
        linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.84));
    opacity: .92;
}

#post-fight-panel.defeat-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    padding: 0;
    background: transparent;
    text-align: center;
    pointer-events: none;
}

.defeat-title {
    display: block;
    margin: 0 auto;
    color: #c5a059;
    font-family: var(--font-title);
    font-size: 112px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    text-shadow:
        0 3px 0 rgba(0,0,0,.92),
        0 0 18px rgba(197,160,89,.38),
        0 0 38px rgba(92,22,14,.30),
        0 0 48px rgba(0,0,0,.92);
    opacity: 0;
    transform: translateY(8px) scale(1.018);
    animation: defeatTitleReveal 860ms cubic-bezier(.12,.84,.22,1) forwards;
}

.defeat-title::after {
    content: '';
    display: block;
    width: 420px;
    height: 1px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, transparent, rgba(197,160,89,.78), rgba(102,28,18,.42), transparent);
    box-shadow: 0 1px 0 rgba(0,0,0,.82), 0 0 16px rgba(197,160,89,.22);
}

.defeat-subtitle {
    display: block;
    margin-top: 22px;
    color: rgba(218, 194, 144, .68);
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: 0;
    animation: defeatHintReveal 820ms ease forwards 620ms;
}

#post-fight-overlay.defeat-departing .defeat-title {
    animation: defeatTitleDepart 560ms cubic-bezier(.26,.78,.18,1) forwards;
}

#post-fight-overlay.defeat-departing .defeat-subtitle {
    opacity: 0;
    transition: opacity 140ms ease;
}

.defeat-hidden {
    display: none !important;
}

@keyframes defeatTitleReveal {
    0% { opacity: 0; transform: translateY(10px) scale(1.04); filter: blur(3px) brightness(.62) saturate(.8); }
    58% { opacity: .92; transform: translateY(0) scale(1); filter: blur(.5px) brightness(1.10) saturate(1); }
    100% { opacity: .86; transform: translateY(0) scale(1); filter: blur(0) brightness(.96) saturate(.96); }
}

@keyframes defeatHintReveal {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: .72; transform: translateY(0); }
}

@keyframes defeatTitleDepart {
    0% { opacity: .86; transform: scale(1); filter: blur(0) brightness(.96); }
    48% { opacity: .94; transform: scale(1.025); filter: blur(.7px) brightness(1.18); }
    100% { opacity: 0; transform: scale(.94); filter: blur(6px) brightness(.34); }
}