/* Shared results: fixed heading/actions, independently scrolling content slots. */
.post-game-modal {
    box-sizing: border-box; width: min(40rem, calc(100vw - 2rem)); max-height: min(90dvh, 50rem);
    margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--color-border-subtle);
    border-top: 2px solid var(--result-accent, var(--color-kippo-pink)); border-radius: var(--radius-cards);
    background: var(--color-surface-raised, #0b0e13); color: var(--color-ghost-white); text-align: center;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .32);
}
.post-game-dismiss { position: absolute; top: .35rem; right: .35rem; margin: 0; }
.post-game-dismiss .icon-button { width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--radius-buttons); color: var(--muted); font-size: 1.25rem; }
.post-game-dismiss .icon-button:hover { color: var(--color-ghost-white); background: var(--color-surface-emphasis); }
.post-game-heading .eyebrow { padding-inline: 1.25rem; }
.post-game-modal[data-outcome="win"] { --result-accent: #82e6a0; }
.post-game-modal[data-outcome="loss"] { --result-accent: #ff7485; }
.post-game-modal[data-outcome="win"] .post-game-heading h2,
.post-game-modal[data-outcome="loss"] .post-game-heading h2 { color: var(--result-accent); }
.post-game-modal[open] { display: flex; flex-direction: column; }
.post-game-modal::backdrop { background: #000b; }
.post-game-heading { flex: none; padding: clamp(1.35rem, 4vw, 2rem) clamp(1rem, 5vw, 2.25rem) 1.35rem; }
.post-game-heading .eyebrow { margin: 0 0 .65rem; font-size: .65rem; }
.post-game-heading h2 { margin: 0; font-size: clamp(1.6rem, 5vw, 2.4rem); overflow-wrap: anywhere; }
.post-game-description { margin: .75rem 0 0; color: var(--muted, #929aa8); font-size: .8rem; line-height: 1.5; }
.post-game-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 clamp(1rem, 5vw, 2.25rem) 1.5rem; display: grid; gap: 1.25rem; }
.post-game-body:empty { display: none; }
.post-game-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-block: 1px solid var(--color-ash); }
.post-game-player { min-width: 0; display: grid; grid-template-rows: auto 1.15rem auto auto 1.15rem 1.15rem auto; justify-items: center; align-content: start; gap: .3rem; min-height: 10rem; padding: 1.1rem 1rem; }
.post-game-player + .post-game-player { border-left: 1px solid var(--color-ash); }
.post-game-player:only-child { grid-column: 1 / -1; }
.post-game-player.is-winner { box-shadow: inset 0 2px var(--result-accent, #82e6a0); }
.post-game-player-name { max-width: 100%; min-height: 1.5rem; font-size: .75rem; overflow-wrap: anywhere; }
.post-game-player-name > span { max-width: 100%; }
.post-game-player-title-slot, .post-game-player-detail-slot, .post-game-player-winner-slot { display: flex; min-width: 0; align-items: center; justify-content: center; }
.post-game-player-value { font-size: clamp(1.2rem, 4vw, 1.8rem); font-variant-numeric: tabular-nums; }
.post-game-player-label, .post-game-player small { color: var(--muted, #929aa8); font-size: .7rem; line-height: 1.5; }
.post-game-player .post-game-player-winner { color: #82e6a0; }
.post-game-player-extra { display: flex; min-width: 0; align-items: center; justify-content: center; }
.post-game-highlights, .post-game-details { display: grid; gap: 1rem; min-width: 0; }
.post-game-highlights:empty, .post-game-details:empty { display: none; }
.post-game-details > p { margin: 0; color: var(--muted); font-size: .75rem; }
.post-game-footer { flex: none; padding: 1.1rem clamp(1rem, 5vw, 2.25rem) .75rem; border-top: 1px solid var(--color-ash); }
.post-game-actions { display: grid; justify-items: center; gap: .65rem; width: 100%; }
.post-game-actions :is(.result-actions, .typing-race-result-actions, .rocket-riot-actions, .pong-actions, .gauntlet-result-actions) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: .7rem; width: min(100%, 30rem); margin: 0 auto; }
.post-game-actions :is(.result-actions, .typing-race-result-actions, .rocket-riot-actions, .pong-actions, .gauntlet-result-actions) > .game-action-button { width: 100%; min-width: 0; }
.post-game-actions :is(.result-actions, .typing-race-result-actions, .rocket-riot-actions, .pong-actions, .gauntlet-result-actions) > :only-child { grid-column: 1 / -1; width: min(14.65rem, 100%); justify-self: center; }
.post-game-actions :is(.result-actions, .typing-race-result-actions, .rocket-riot-actions, .pong-actions, .gauntlet-result-actions) > :last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; width: calc(50% - .35rem); justify-self: center; }
.post-game-actions > :is(p, .form-error, .match-chat-error) { width: 100%; font-size: .75rem; }
.button.game-action-button.post-game-home { width: min(14.65rem, 100%); margin: .85rem auto .25rem; }
.post-game-reopen { display: block; margin: 1rem auto; }
.post-game-modal[open] + .post-game-reopen { visibility: hidden; }
.post-game-modal details { border-top: 1px solid var(--color-ash); padding-top: .75rem; min-width: 0; }
.post-game-modal summary { cursor: pointer; color: var(--muted); font-size: .75rem; padding: .5rem; }
.post-game-chat-summary { position: relative; width: fit-content; margin-inline: auto; }
.post-game-chat-unread { display: inline-block; width: .45rem; height: .45rem; margin-left: .35rem; border-radius: 50%; background: var(--color-kippo-pink); vertical-align: .05rem; }
.post-game-modal details[open] > summary { margin-bottom: .75rem; }
.post-game-modal .rating-result { justify-content: center; flex-wrap: wrap; margin: 0; gap: .6rem; }
.post-game-modal .rating-result strong { font-size: 1.25rem; }
.post-game-modal .result-rivalry { width: min(100%, 21rem); margin: 0 auto; justify-items: stretch; }
.post-game-modal .result-rivalry > span { text-align: center; }
.post-game-modal .result-rivalry > div { grid-template-columns: minmax(0, 1fr) 4rem minmax(0, 1fr); width: 100%; gap: .6rem; }
.post-game-modal .result-rivalry > div > span { text-align: right; }
.post-game-modal .result-rivalry small { text-align: left; }
.post-game-modal .result-achievement-progress { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: center; width: 100%; box-sizing: border-box; gap: .75rem; text-align: center; }
.post-game-modal .match-chat { margin: 0; width: 100%; text-align: left; }
.post-game-modal .gauntlet-rounds { margin: 0; }
.post-game-standings { width: 100%; border-collapse: collapse; font-size: .75rem; }
.post-game-standings :is(th, td) { padding: .7rem .4rem; border-bottom: 1px solid var(--color-ash); }
.post-game-standings th { color: var(--muted); font-size: .65rem; font-weight: 400; }
.post-game-standings td:nth-child(2) { overflow-wrap: anywhere; }
.post-game-standings .is-you { color: var(--color-kippo-pink); }
@media (max-width: 480px) {
    .post-game-heading { padding: 1.25rem 1rem 1rem; }
    .post-game-body { padding: 0 1rem 1rem; gap: 1rem; }
    .post-game-footer { padding: .75rem 1rem .25rem; }
    .post-game-player { padding-inline: .55rem; }
    .post-game-modal .result-achievement-progress { grid-template-columns: 1fr; gap: .25rem; }
    .post-game-actions :is(.result-actions, .typing-race-result-actions, .rocket-riot-actions, .pong-actions, .gauntlet-result-actions) { grid-template-columns: 1fr; }
    .post-game-actions :is(.result-actions, .typing-race-result-actions, .rocket-riot-actions, .pong-actions, .gauntlet-result-actions) > :is(:only-child, :last-child:nth-child(odd):not(:only-child)) { grid-column: 1; width: 100%; }
}

/* Mode and action hierarchy stay compact as result content grows. */
.post-game-heading .eyebrow { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .5rem; }
.post-game-mode { display: inline-block; padding: .25rem .5rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-buttons); color: var(--color-ghost-white); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
.post-game-actions > .post-game-next-mode { margin: 0 0 .15rem; color: var(--muted); font-size: .65rem; }
.post-game-modal .post-game-more { border: 0; padding: 0; margin: .5rem 0 0; }
.post-game-more > summary { display: list-item; width: fit-content; min-height: 36px; box-sizing: border-box; margin: 0 auto; padding: .6rem .75rem; font-size: .65rem; }
.post-game-modal .post-game-more[open] > summary { margin-bottom: .35rem; }
.post-game-more-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; width: min(100%, 30rem); margin-inline: auto; }
.post-game-more-actions > .game-action-button { width: 100%; min-width: 0; }
.post-game-more-actions > :only-child { grid-column: 1 / -1; width: min(14.65rem, 100%); justify-self: center; }
@media (any-pointer: coarse) { .post-game-more > summary { min-height: 44px; } }

/* Keep both content and navigation reachable on short landscape screens. */
@media (max-height: 540px) {
    .post-game-modal { max-height: calc(100dvh - 1rem); overflow-y: auto; overscroll-behavior: contain; }
    .post-game-body { flex: none; overflow: visible; }
    .post-game-heading { padding-block: 1rem; }
}

/* Full-screen results reuse Reaction's minimal result hierarchy across games. */
.post-game-screen[data-outcome="draw"] .reaction-result-accent,
.post-game-screen[data-outcome="neutral"] .reaction-result-accent {
    background: var(--color-action-hover);
}

.reaction-practice-summary[hidden] {
    display: none;
}

.post-game-screen-primary .post-game-player {
    min-height: 13rem;
    justify-items: start;
    padding: clamp(1.75rem, 3vw, 2.75rem);
    text-align: left;
}

.post-game-screen .reaction-result-primary.post-game-screen-primary .post-game-player + .post-game-player {
    border-left: 0;
}

.post-game-screen-primary .post-game-player:last-child:not(:only-child) {
    justify-items: end;
    text-align: right;
}

.post-game-screen-primary .post-game-player:only-child {
    justify-items: center;
    text-align: center;
}

.post-game-screen-primary .post-game-player.is-winner {
    box-shadow: none;
}

.post-game-screen-primary .post-game-player-value {
    color: var(--color-action-hover);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

.post-game-screen-primary > :not(.post-game-player) {
    grid-column: 1 / -1;
    width: min(100%, 56rem);
    justify-self: center;
}

.post-game-screen-primary > .post-game-standings {
    margin-block: clamp(1.25rem, 3vw, 2rem);
}

.reaction-practice-result-primary {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-block: clamp(1.25rem, 3vw, 2rem);
}

.reaction-practice-result-primary > :is(.reaction-practice-results, .reaction-practice-average) {
    width: min(100%, 34rem);
}

.reaction-practice-result-primary .reaction-practice-results li,
.reaction-practice-result-primary .reaction-practice-average {
    border-bottom: 0;
}

.reaction-practice-result-primary .reaction-practice-results li strong,
.reaction-practice-result-primary .reaction-practice-average strong {
    color: var(--color-action-hover);
}

.post-game-screen-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    align-items: stretch;
    gap: 0.75rem;
    width: min(100%, 46rem);
}

.post-game-screen-actions > .game-action-button {
    width: 100%;
    min-width: 0;
}

.post-game-screen-actions > :is(div, p) {
    grid-column: 1 / -1;
}

.post-game-screen-footer .post-game-home {
    margin-block: 0;
}

.post-game-screen-footer .post-game-more {
    margin: 0;
    border: 0;
    padding: 0;
}

/* Reaction post-game controls keep their existing geometry while only their copy moves. */
.reaction-result-footer .button.game-action-button {
    border-color: var(--color-border-strong);
    background: transparent;
    color: var(--color-ghost-white);
    transform: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.reaction-result-footer .button.game-action-button.game-action-primary {
    border-color: var(--color-kippo-pink);
    background: transparent;
}

.reaction-result-footer .button.game-action-button:is(:hover, :focus-visible, :active):not(:disabled) {
    border-color: var(--color-kippo-pink);
    background: transparent;
    color: var(--color-ghost-white);
    transform: none;
}

.reaction-result-footer .post-game-action-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    transform: translateY(0) scale(1);
    transition: color 160ms ease,
                text-shadow 160ms ease,
                transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reaction-result-footer .post-game-action-copy > span[aria-hidden="true"] {
    color: var(--color-kippo-pink);
    font-size: .9rem;
}

.reaction-result-footer .post-game-ranked-action .post-game-action-copy > span[aria-hidden="true"] {
    color: var(--color-text-secondary);
    transition: color 160ms ease;
}

.reaction-result-footer .post-game-ranked-action:is(:hover, :focus-visible) .post-game-action-copy > span[aria-hidden="true"] {
    color: var(--color-kippo-pink);
}

.reaction-result-footer .button.game-action-button:is(:hover, :focus-visible):not(:disabled) .post-game-action-copy {
    animation: interactive-text-pulse 1.25s 290ms ease-in-out infinite alternate;
    transform: translateY(-2px) scale(1.025);
}

@media (prefers-reduced-motion: reduce) {
    .reaction-result-footer .button.game-action-button:is(:hover, :focus-visible):not(:disabled) .post-game-action-copy {
        animation: none;
        transform: none;
    }
}

@media (max-width: 860px) {
    .post-game-screen-primary .post-game-player {
        min-height: 0;
        justify-items: center;
        padding: 1rem 0.75rem;
        text-align: center;
    }

    .post-game-screen-primary .post-game-player:last-child:not(:only-child) {
        justify-items: center;
        text-align: center;
    }

    .post-game-screen-primary .post-game-player-value {
        font-size: 1.7rem;
    }
}

@media (max-width: 560px) {
    .post-game-screen-actions {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}