/* =========================================================
   FIGHTDLE — VICTORY / RESULT PANELS
   One treatment for every mode's end-of-game card.

   Each mode had drifted to its own look: Classic was forest green
   (34,139,34), Picture and Infinite a brighter green (59,188,11),
   Higher/Lower a dark panel — and none matched the dark panels used
   everywhere else on the site.

   These now read as the same component: the site's dark panel, with
   green standing in for gold to mark the finished state.

   Load this AFTER the mode's own stylesheet so it wins on equal
   specificity.
   ========================================================= */

.victory-card,
.hl-summary {
    background: rgba(30, 30, 30, .92);
    border: 2px solid var(--correct);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
    color: var(--ink);
    text-align: center;
    /* leave a gutter so it doesn't run edge-to-edge on a phone */
    width: min(420px, calc(100% - 30px));
    margin: 30px auto;
    padding: 20px 18px 22px;
    /* the old cards leaned on a heavy black outline to survive a bright
       green background; on a dark panel it just muddies the text */
    text-shadow: none;
}

/* === HEADINGS === */
.victory-card h1,
.victory-card h2,
.victory-heading,
.hl-summary .hl-category {
    font-family: var(--font-display);
    font-size: clamp(26px, 7vw, 34px);
    letter-spacing: .04em;
    color: var(--correct);
    margin: 0 0 6px;
    text-shadow: none;
}

.victory-subtitle {
    margin: 0 0 10px;
    font-size: 15px;
    color: var(--ink-soft);
    opacity: 1;
}

/* === FIGHTER PORTRAIT === */
.victory-card-img,
.victory-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    object-fit: cover;
    object-position: top center;
    background: #000;
    box-shadow: none;
}

.victory-name,
#victoryFighterName {
    font-family: var(--font-display);
    font-size: clamp(19px, 5vw, 24px);
    letter-spacing: .02em;
    color: var(--ink);
    margin: 6px 0 0;
    text-shadow: none;
}

/* === INNER PANELS (fighter row, stats) === */
.victory-fighter,
.victory-stats {
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-sm);
    padding: 11px;
}

.victory-stats p,
.victory-tries {
    margin: 4px 0;
    color: var(--ink-soft);
    font-style: normal;
}

#victoryAttempts,
.victory-quotes {
    font-family: var(--font-display);
    color: var(--gold);
    text-shadow: none;
}

#victoryAttempts { font-size: 24px; font-weight: 400; }

/* === BUTTONS === */
.victory-btn,
.victory-play-again,
.hl-summary .hl-btn {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: .05em;
    color: var(--ink);
    background: var(--panel-3);
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: var(--radius-sm);
    padding: 12px 20px;
    cursor: pointer;
    text-shadow: none;
    transition: background-color .25s var(--ease),
                border-color .25s var(--ease),
                transform .25s var(--ease);
}

/* the mode stylesheets give every button a black outline; on these it just
   smears the label */
.victory-card button,
.hl-summary button { text-shadow: none; }

@media (hover: hover) {
    .victory-btn:hover,
    .victory-play-again:hover {
        background: var(--panel-3);
        border-color: var(--correct);
        transform: translateY(-2px);
    }
}

.victory-btn.primary,
.hl-summary .hl-btn--next {
    background: var(--correct);
    border-color: var(--correct);
    color: #10250f;
}

.victory-toast {
    min-height: 18px;
    margin-top: 10px;
    font-size: 14px;
    color: var(--ink-soft);
}

/* === NEXT MODE CARD === */
.victory-next-button .game-image {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--radius-sm);
    /* the old glow was a hard white drop-shadow at full opacity */
    filter: none;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

@media (hover: hover) {
    .victory-next-button .game-image:hover {
        filter: none;
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(0, 0, 0, .5);
    }
}