/* The payoff lives inside the game card so it can never cover the athlete. */
.gma-pop-banner {
    position: relative;
    transform: translateY(-0.65rem) scale(0.72);
    width: max-content;
    max-width: 100%;
    min-height: 56px;
    padding: 0.85rem 1.4rem;
    background: var(--lwc-accent, var(--primary-color));
    color: var(--lwc-on-accent, #fff);
    font-size: clamp(1.25rem, 3.4vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
    text-shadow: 0 2px 4px rgba(0,0,0,.25);
    box-shadow: 0 1rem 2.5rem rgba(2, 8, 23, 0.34), 0 0 0 1px rgba(255,255,255,.2) inset;
}

.gma-pop-banner.show {
    animation: gma-pop-slide-in calc(var(--lwc-duration-normal, 220ms) * 3) var(--lwc-ease, ease) forwards;
}

.gma-pop-banner.hide {
    animation: gma-pop-slide-out calc(var(--lwc-duration-normal, 220ms) * 2) var(--lwc-ease, ease) forwards;
}

.gma-pop-banner.gma-pop-banner--golden {
    background: linear-gradient(135deg, #fff3a1 0%, #d6a315 48%, #fff1a0 72%, #9a6700 100%) !important;
    border-color: rgba(95, 69, 0, 0.34);
    color: #4f3900 !important;
    box-shadow: 0 1.25rem 3rem rgba(63, 44, 0, 0.42), 0 0 1.8rem rgba(255, 215, 0, 0.5);
}

@keyframes gma-pop-slide-in {
    0% {
        transform: translateY(-0.65rem) scale(0.72) rotate(-2deg);
        opacity: 0;
    }

    58% {
        transform: translateY(0.15rem) scale(1.1) rotate(1deg);
        opacity: 1;
    }

    76% {
        transform: translateY(0) scale(0.97) rotate(-0.6deg);
        opacity: 1;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes gma-pop-slide-out {
    from {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    to {
        transform: translateY(-0.6rem) scale(0.88);
        opacity: 0;
    }
}

@keyframes gma-game-enter {
    from { opacity: 0.72; transform: translateY(0.65rem) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gma-portrait-enter {
    from { opacity: 0.45; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes gma-prompt-enter {
    0% { opacity: 0; transform: translateY(0.55rem) scale(0.72); }
    68% { opacity: 1; transform: translateY(-0.08rem) scale(1.075); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gma-prompt-type {
    from { width: 0; }
    to { width: min(var(--gma-type-width, 17ch), 100%); }
}

@keyframes gma-control-enter {
    from { opacity: var(--gma-control-start-opacity, 0); transform: translateY(0.8rem) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gma-control-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
    .modal-content.guess-mode:not(.gma-fast) {
        --gma-entry-duration: calc(var(--lwc-duration-normal, 220ms) * 9);
        --gma-control-duration: calc(var(--lwc-duration-fast, 140ms) * 2.5);
        --gma-controls-delay: calc(var(--lwc-duration-fast, 140ms) * 6);
    }

    .modal-content.guess-mode:not(.gma-fast) #guessAgeContainer {
        animation: gma-game-enter calc(var(--lwc-duration-normal, 220ms) * 2) var(--lwc-ease, ease) backwards;
    }

    .modal-content.guess-mode:not(.gma-fast) #athlete-profile .portrait-wrapper {
        animation: gma-portrait-enter calc(var(--lwc-duration-normal, 220ms) * 3) var(--lwc-ease, ease) both;
    }

    .modal-content.guess-mode:not(.gma-fast) #guessAgeContainer .gma-heading,
    .modal-content.guess-mode:not(.gma-fast) #guessAgeContainer .chrono-age-heading.is-revealing {
        animation: gma-prompt-type var(--gma-entry-duration) var(--lwc-ease, ease) both;
        animation-timing-function: steps(15, end);
    }

    .modal-content.guess-mode:not(.gma-fast) #guessAgeContainer .gma-slider-wrap,
    .modal-content.guess-mode:not(.gma-fast) #guessAgeContainer .gma-actions {
        --gma-control-start-opacity: 0;
        animation: gma-control-fade var(--gma-control-duration) var(--lwc-ease, ease) var(--gma-controls-delay) both;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .modal-content.guess-mode.gma-fast {
        --gma-entry-duration: var(--lwc-duration-normal, 220ms);
        --gma-slider-delay: var(--lwc-duration-fast, 140ms);
        --gma-actions-delay: calc(var(--lwc-duration-fast, 140ms) * 2);
    }

    .modal-content.guess-mode.gma-fast #guessAgeContainer {
        animation: gma-game-enter var(--lwc-duration-fast, 140ms) var(--lwc-ease, ease) backwards;
    }

    .modal-content.guess-mode.gma-fast #athlete-profile .portrait-wrapper,
    .modal-content.guess-mode.gma-fast #guessAgeContainer .gma-heading {
        animation: gma-prompt-enter var(--gma-entry-duration) var(--lwc-ease, ease) both;
    }

    .modal-content.guess-mode.gma-fast #guessAgeContainer .chrono-age-heading.is-revealing {
        animation: gma-prompt-enter calc(var(--lwc-duration-fast, 140ms) * 2) var(--lwc-ease, ease) both;
    }

    .modal-content.guess-mode.gma-fast #guessAgeContainer .gma-slider-wrap,
    .modal-content.guess-mode.gma-fast #guessAgeContainer .gma-actions {
        animation: gma-control-enter var(--lwc-duration-normal, 220ms) var(--lwc-ease, ease) var(--gma-slider-delay) both;
    }

    .modal-content.guess-mode.gma-fast #guessAgeContainer .gma-actions {
        animation-delay: var(--gma-actions-delay);
    }
}

/* when guessing, hide all modal-content children except the athlete-profile */
.modal-content.guess-mode > :not(.athlete-profile) {
    display: none;
}

#detailsModal .modal-content.guess-mode:not(.gma-result-ready) > #closeAthleteDetailsModal,
#detailsModal .modal-content.guess-mode > .modal-sticky-header {
    display: none !important;
}

#detailsModal .modal-content.guess-mode.gma-result-ready > #closeAthleteDetailsModal {
    display: inline-flex !important;
}

/* during guess mode, hide everything under athlete-profile except pic, name & slider */
/* .portrait-wrapper contains #modalProfilePic; keep it visible so the picture shows */
.modal-content.guess-mode .athlete-profile > *:not(#modalProfilePic):not(#guessAgeContainer):not(.portrait-wrapper) {
    display: none;
}

#detailsModal .modal-content.guess-mode {
    overflow-x: hidden;
    overflow-y: auto;
}

#detailsModal .modal-content.guess-mode #athlete-profile {
    --gma-portrait-gap: clamp(2rem, 4vh, 3rem);
    --gma-portrait-size: clamp(220px, min(58vw, 40vh), 430px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding-block: clamp(3rem, 4.5vh, 4rem) clamp(0.75rem, 2vh, 1.5rem);
}

#detailsModal .modal-content.guess-mode #athlete-profile .portrait-wrapper {
    width: var(--gma-portrait-size);
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: none;
    max-height: none;
    flex: 0 0 auto;
    margin: 0 0 var(--gma-portrait-gap);
}

/* The game card is the active stage, with more depth than the profile below it. */
.gma-card {
    width: min(420px, 90%);
    margin-inline: auto;
    background: var(--card-bg);
    border-radius: 1.25rem;
    padding: 2rem 2.25rem 2.5rem;
    text-align: center;
}

.gma-avatar {
    margin: 0 0 1.25rem;
    display: inline-block;
    aspect-ratio: 1;
    width: 144px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: none;
}

    .gma-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* apply the same headline styles to both */
.gma-heading,
.chrono-age-heading {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1.08;
    font-size: 3rem;
    margin: 0;
    color: var(--dark-text-color);
    font-weight: 700;
}

.gma-heading {
    --gma-type-width: 15ch;
}

.chrono-age-heading {
    --gma-type-width: 17ch;
}

.chrono-age-heading.is-revealing {
    animation: gma-heading-reveal calc(var(--lwc-duration-normal, 220ms) * 3) var(--lwc-ease, ease) both;
}

@keyframes gma-heading-reveal {
    0% {
        opacity: 0;
        transform: translateY(0.55rem) scale(0.76);
    }
    68% {
        opacity: 1;
        transform: translateY(-0.08rem) scale(1.06);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* make the guess‐container fill the modal’s width */
#guessAgeContainer {
    width: 100%;
    box-sizing: border-box; /* include any padding in that 100% */
}

/* let the slider wrap fill all of that */
.gma-slider-wrap {
    position: relative;
    width: 90%;
    max-width: none; /* override any upstream caps */
    margin: 1.25rem auto 1.5rem;
    padding-top: 5.25rem; /* reserve a full row for the larger value bubble */
    align-self: stretch; /* <-- this forces it to span the full parent width */
    transition: padding-bottom var(--lwc-duration-normal, 220ms) var(--lwc-ease, ease), margin-bottom var(--lwc-duration-normal, 220ms) var(--lwc-ease, ease);
}

.gma-card.is-revealing .gma-slider-wrap {
    padding-bottom: 2.85rem;
    margin-bottom: 0.35rem;
}

/* slider track */
#gmaRange {
    --gma-thumb-size: 64px;
    width: 100%;
    height: 3rem;
    appearance: none;
    background: linear-gradient( 90deg, var(--primary-color) 0%, var(--primary-color) var(--percent, 50%), #d1d5db var(--percent, 50%), #d1d5db 100% );
    border-radius: 999px;
    outline: none;
}

    /* WebKit thumb */
    #gmaRange::-webkit-slider-thumb {
        appearance: none;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--primary-color);
        border: 4px solid #fff;
        box-shadow: 0 0 0 1px rgba(8, 118, 133, 0.18), var(--lwc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
        cursor: pointer;
        transition: transform var(--lwc-duration-fast, 140ms) var(--lwc-ease, ease), box-shadow var(--lwc-duration-fast, 140ms) var(--lwc-ease, ease);
    }

    #gmaRange:not(:disabled):active::-webkit-slider-thumb {
        transform: scale(1.08);
        box-shadow: 0 0 0 5px rgba(8, 118, 133, 0.14);
    }

    /* Firefox track and thumb */
    #gmaRange::-moz-range-track {
        background: linear-gradient( 90deg, var(--primary-color) 0%, var(--primary-color) var(--percent, 50%), #d1d5db var(--percent, 50%), #d1d5db 100% );
        height: .5rem;
        border-radius: 999px;
        border: none;
    }

    #gmaRange::-moz-range-thumb {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--primary-color);
        border: 4px solid #fff;
        box-shadow: 0 0 0 1px rgba(8, 118, 133, 0.18), var(--lwc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
        transition: transform var(--lwc-duration-fast, 140ms) var(--lwc-ease, ease), box-shadow var(--lwc-duration-fast, 140ms) var(--lwc-ease, ease);
    }

    #gmaRange:not(:disabled):active::-moz-range-thumb {
        transform: scale(1.08);
        box-shadow: 0 0 0 5px rgba(8, 118, 133, 0.14);
    }

#gmaBubble {
    position: absolute;
    top: 0;
    bottom: auto;
    left: var(--percent, 50%);
    transform: translateX(-50%);
    background: #fff;
    color: var(--primary-color);
    font-size: 2.8rem;
    font-weight: 600;
    padding: 0.8rem 1.6rem;
    border: 2px solid var(--primary-color);
    border-radius: 2rem;
    box-shadow: 0 0.75rem 1.8rem rgba(2, 8, 23, 0.24), 0 0 0 1px rgba(255,255,255,.12) inset;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10002;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
}

#gmaRealBubble {
    position: absolute;
    top: 0;
    bottom: auto;
    left: var(--percent, 50%);
    transform: translateX(-50%);
    background: #fff;
    color: var(--primary-color);
    font-size: 2.8rem;
    font-weight: 600;
    padding: 0.8rem 1.6rem;
    border: 2px solid var(--primary-color);
    border-radius: 2rem;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10002;
    opacity: 0;
    transform: translateX(-50%) scale(0.62);
    will-change: left, transform;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.8rem 1.75rem rgba(2, 8, 23, 0.28), 0 0 0 1px rgba(255,255,255,.08) inset;
}

#gmaRealBubble.is-travelling {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

#gmaRealBubble.is-settled {
    opacity: 1;
    animation: gma-real-age-settle calc(var(--lwc-duration-normal, 220ms) * 4) var(--lwc-ease, ease) both;
}

@keyframes gma-real-age-settle {
    0% {
        transform: translateX(-50%) scale(0.86);
        box-shadow: 0 0.8rem 1.75rem rgba(2, 8, 23, 0.28), 0 0 0 rgba(25, 195, 209, 0);
    }
    48% {
        transform: translateX(-50%) scale(1.24);
        box-shadow: 0 1rem 2rem rgba(2, 8, 23, 0.3), 0 0 2.4rem var(--gma-settle-glow, rgba(25, 195, 209, 0.72));
    }
    74% {
        transform: translateX(-50%) scale(0.97);
        box-shadow: 0 0.8rem 1.75rem rgba(2, 8, 23, 0.28), 0 0 1rem var(--gma-settle-afterglow, rgba(25, 195, 209, 0.28));
    }
    100% {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 0.8rem 1.75rem rgba(2, 8, 23, 0.28), 0 0 0 rgba(25, 195, 209, 0);
    }
}

    #gmaRealBubble::after {
        content: '';
        position: absolute;
        bottom: -10px;
        width: 20px;
        height: 20px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        background: #fff;
        border-left: 4px solid var(--primary-color);
        border-bottom: 4px solid var(--primary-color);
    }

#gmaBubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    width: 20px;
    height: 20px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    background: #fff;
    border-left: 4px solid var(--primary-color);
    border-bottom: 4px solid var(--primary-color);
}

/* action buttons */
.gma-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    transition: opacity var(--lwc-duration-fast, 140ms) var(--lwc-ease, ease);
}

.gma-payoff-region {
    width: 100%;
    min-height: 0;
    display: grid;
    place-items: center;
    margin: 0;
    overflow: visible;
    transition: min-height var(--lwc-duration-normal, 220ms) var(--lwc-ease, ease), margin var(--lwc-duration-normal, 220ms) var(--lwc-ease, ease);
}

.gma-card.is-revealing .gma-payoff-region:not(:empty) {
    min-height: 68px;
    margin: 0.35rem 0 0.2rem;
}

.gma-btn {
    padding: 1.2rem 2.4rem;
    font-size: 1.2rem;
    min-width: 140px;
    min-height: 48px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    transition: background var(--lwc-duration-normal, 220ms) var(--lwc-ease, ease), color var(--lwc-duration-normal, 220ms) var(--lwc-ease, ease), transform var(--lwc-duration-fast, 140ms) var(--lwc-ease, ease), box-shadow var(--lwc-duration-fast, 140ms) var(--lwc-ease, ease);
}

.gma-btn--primary {
    background: var(--primary-color);
    color: #fff;
}

    .gma-btn--primary:hover {
        background: var(--primary-color);
        filter: brightness(1.1);
        transform: translateY(-2px);
    }

.gma-btn--ghost {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 0.8rem 1.6rem;
    font-size: 1rem;
    min-width: 100px;
    min-height: 44px;
}

    .gma-btn--ghost:hover {
        background: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
        transform: translateY(-2px);
    }

/* small screens - keep it tight */
@media (max-width: 420px) {
    /* adjust buttons on small screens */
    .gma-actions {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .gma-btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    .gma-btn--ghost {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
    }

    .gma-btn--primary {
        font-size: 1.1rem;
        padding: 0.6rem 1.2rem;
    }

    .gma-card {
        padding: 1.5rem 1.25rem;
    }

    .gma-avatar {
        width: 116px;
    }

    /* reduce text size on small screens */
    .gma-heading {
        font-size: 2rem;
    }

    .chrono-age-heading {
        font-size: 2rem;
    }

    #gmaBubble,
    #gmaRealBubble {
        font-size: 1.65rem;
        padding: 0.4rem 0.8rem;
    }

    .gma-slider-wrap {
        margin: 0.25rem auto 0.75rem;
        padding-top: 3.75rem;
    }

    /* Keep result feedback readable without covering the task. */
    .gma-pop-banner {
        font-size: 1.2rem;
        padding: 0.5rem 1rem;
        gap: 0.25rem;
    }

}

@keyframes gma-card-exit {
    from {
        opacity: 1;
        max-height: var(--gma-exit-height, 60rem);
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        max-height: 0;
        padding-block: 0;
        margin-block: 0;
        border-width: 0;
        transform: translateY(0.35rem) scale(0.985);
    }
}

/* Exit is a measured max-height animation: auto -> 0 would only hard-cut. */
#detailsModal .modal-content #guessAgeContainer.gma-done {
    overflow: hidden;
    animation: gma-card-exit var(--lwc-duration-normal, 220ms) var(--lwc-ease, ease) both !important;
    pointer-events: none;
}

#detailsModal .modal-content.gma-fast #guessAgeContainer.gma-done {
    animation-duration: var(--lwc-duration-fast, 140ms) !important;
}

/* The original endpoint gag: a modal-covering trollface rises from below. */
#detailsModal .modal-content > .gma-trollface-container {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    bottom: -100%;
    background: transparent;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation-name: gmaTrollSlideUpOverlay;
    animation-duration: calc(var(--lwc-duration-normal, 220ms) * 9.0909090909);
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* Guess mode normally hides direct modal children; this takeover is intentional. */
#detailsModal .modal-content.guess-mode > .gma-trollface-container {
    display: flex !important;
}

@keyframes gmaTrollSlideUpOverlay {
    from { bottom: -100%; }
    to { bottom: 0; }
}

.gma-trollface-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gma-heading,
.chrono-age-heading {
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
    line-height: 1.08;
    text-align: center;
}

@keyframes fadeOutButtons {
    from {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        max-height: 8rem;
    }

    to {
        opacity: 0;
        visibility: hidden;
        transform: translateY(0.2rem);
        max-height: 0;
    }
}

.gma-actions.gma-actions-hide {
    animation: fadeOutButtons var(--lwc-duration-fast, 140ms) var(--lwc-ease, ease) both !important;
    pointer-events: none; /* ← prevent any mouse events */
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
}

/* Leave the submitted value where the player put it, then dim it behind the answer. */
#gmaBubble.gma-bubble-inactive {
    top: 0;
    bottom: auto;
    opacity: 0.4;
    transform: translateX(-50%) scale(0.92);
    z-index: 2;
}

/* Smooth transitions on track, thumb & bubbles */
#gmaRange,
#gmaBubble,
#gmaRealBubble {
    transition: background var(--lwc-duration-normal, 220ms) var(--lwc-ease, ease), border-color var(--lwc-duration-normal, 220ms) var(--lwc-ease, ease), color var(--lwc-duration-normal, 220ms) var(--lwc-ease, ease), opacity var(--lwc-duration-normal, 220ms) var(--lwc-ease, ease), transform var(--lwc-duration-normal, 220ms) var(--lwc-ease, ease);
}

#gmaBubble {
    transition-duration: var(--lwc-duration-normal, 220ms), var(--lwc-duration-normal, 220ms), var(--lwc-duration-normal, 220ms), var(--lwc-duration-normal, 220ms), calc(var(--lwc-duration-normal, 220ms) * 2);
    transition-timing-function: var(--lwc-ease, ease), var(--lwc-ease, ease), var(--lwc-ease, ease), var(--lwc-ease, ease), cubic-bezier(.45, 0, .55, 1);
}

.gma-reaction {
    position: fixed;
    left: var(--gma-reaction-x, 50%);
    top: var(--gma-reaction-y, 35%);
    z-index: 10003;
    pointer-events: none;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: clamp(7rem, 18vw, 12rem);
    line-height: 1;
    filter: drop-shadow(0 0.5rem 1rem rgba(15, 23, 42, 0.24));
    animation: gma-reaction-pop calc(var(--lwc-duration-normal, 220ms) * 5) var(--lwc-ease, ease) both;
}

/* The exact-guess eyes punctuate the feint, then clear before the Bullseye banner. */
.gma-reaction--exact {
    animation-duration: calc(var(--lwc-duration-normal, 220ms) * 4);
}

@keyframes gma-reaction-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -42%) scale(0.18) rotate(-18deg);
    }
    38% {
        opacity: 1;
        transform: translate(-50%, -58%) scale(1.16) rotate(5deg);
    }
    68% {
        opacity: 1;
        transform: translate(-50%, -55%) scale(0.98) rotate(-1deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -72%) scale(1.04) rotate(2deg);
    }
}

/* This override must follow the base reaction rule or the desktop clamp wins the cascade. */
@media (max-width: 420px) {
    .gma-reaction {
        font-size: clamp(3.25rem, 16vw, 4.25rem);
    }
}

/*
 * An exact hit is intentionally ridiculous. The historical version achieved this by
 * allocating thousands of DOM nodes and third-party confetti particles; this layer keeps
 * the same wall-to-wall jackpot energy with one canvas and a finite, reusable icon field.
 */
.gma-exact-jackpot {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow: hidden;
    pointer-events: auto;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 46%, rgba(255, 247, 166, 0.4), transparent 28%),
        radial-gradient(circle at 12% 18%, rgba(255, 66, 173, 0.2), transparent 24%),
        radial-gradient(circle at 88% 22%, rgba(25, 195, 209, 0.22), transparent 25%),
        linear-gradient(135deg, rgba(50, 28, 0, 0.34), rgba(5, 8, 14, 0.12));
    animation: gma-exact-jackpot-enter calc(var(--lwc-duration-normal, 220ms) * 4) var(--lwc-ease, ease) both;
}

/* The generic guess-mode child rule hides everything except the profile. This exact-only
   stage is deliberately full-screen, but remains below the existing z-index 60 close X. */
#detailsModal .modal-content.guess-mode > .gma-exact-jackpot {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 40 !important;
}

/* The homepage modal otherwise uses its legacy fallback layer (3), below sticky chrome. */
#detailsModal.gma-exact-takeover-active {
    z-index: var(--athlete-dialog-layer, 10020);
}

.gma-exact-jackpot::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: -8vmin;
    transform-origin: 50% 50%;
    background: repeating-conic-gradient(
        from -4deg,
        rgba(255, 236, 126, 0.28) 0deg 5deg,
        rgba(255, 255, 255, 0.03) 5deg 11deg,
        rgba(25, 195, 209, 0.12) 11deg 15deg,
        transparent 15deg 22deg);
    animation: gma-exact-rays calc(var(--lwc-duration-normal, 220ms) * 68) var(--lwc-ease, ease) both;
}

.gma-exact-jackpot::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(255, 247, 188, 0.52);
    opacity: 0;
    /* The first flashes are broad and slow. Later phases restart this pulse with more urgency. */
    animation: gma-exact-screen-flash calc(var(--lwc-duration-normal, 220ms) * 8) var(--lwc-ease, ease) 2 both;
}

@keyframes gma-exact-jackpot-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gma-exact-rays {
    0% { transform: rotate(0deg) scale(0.86); opacity: 0; }
    8% { opacity: 1; }
    88% { opacity: 0.72; }
    100% { transform: rotate(112deg) scale(1.05); opacity: 0; }
}

@keyframes gma-exact-screen-flash {
    0%, 100% { opacity: 0; }
    16% { opacity: 0.72; }
    44% { opacity: 0.08; }
}

.gma-exact-jackpot[data-phase="escalation"]::after {
    animation: gma-exact-screen-flash-escalation calc(var(--lwc-duration-normal, 220ms) * 7) var(--lwc-ease, ease) 3 both;
}

.gma-exact-jackpot[data-phase="frenzy"]::after {
    animation: gma-exact-screen-flash-frenzy calc(var(--lwc-duration-normal, 220ms) * 6) var(--lwc-ease, ease) 4 both;
}

.gma-exact-jackpot[data-phase="finale"]::after {
    animation: gma-exact-screen-flash-finale calc(var(--lwc-duration-normal, 220ms) * 5) var(--lwc-ease, ease) 4 both;
}

@keyframes gma-exact-screen-flash-escalation {
    0%, 100% { opacity: 0; }
    16% { opacity: 0.72; }
    44% { opacity: 0.08; }
}

@keyframes gma-exact-screen-flash-frenzy {
    0%, 100% { opacity: 0; }
    16% { opacity: 0.72; }
    44% { opacity: 0.08; }
}

@keyframes gma-exact-screen-flash-finale {
    0%, 100% { opacity: 0; }
    16% { opacity: 0.72; }
    44% { opacity: 0.08; }
}

.gma-exact-confetti-canvas {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
}

.gma-exact-jackpot-copy {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: clamp(25%, 34vh, 38%);
    width: min(94vw, 78rem);
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
    gap: clamp(0.25rem, 1vw, 0.75rem);
    text-align: center;
    color: #fff7b5;
    filter: drop-shadow(0 0.8rem 1rem rgba(0, 0, 0, 0.62));
}

.gma-exact-jackpot-kicker,
.gma-exact-jackpot-subtitle {
    display: block;
    padding: 0.35rem 0.9rem;
    background: rgba(6, 9, 15, 0.82);
    border: 2px solid rgba(255, 231, 102, 0.82);
    border-radius: 999px;
    color: #fff5ac;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    box-shadow: 0 0 1.5rem rgba(255, 213, 0, 0.55);
}

.gma-exact-jackpot-kicker {
    font-size: clamp(0.78rem, 2.1vw, 1.45rem);
    animation: gma-exact-cheese-drop calc(var(--lwc-duration-normal, 220ms) * 6) var(--lwc-ease, ease) both;
}

.gma-exact-jackpot-title {
    display: block;
    max-width: 100%;
    font-family: Orbitron, Roboto, sans-serif;
    font-size: clamp(4rem, 14vw, 11rem);
    font-weight: 900;
    line-height: 0.86;
    letter-spacing: -0.06em;
    color: #fff4a3;
    background: linear-gradient(180deg, #fffbd6 4%, #ffd83d 42%, #ff8a00 72%, #fff1a0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px rgba(94, 43, 0, 0.72);
    text-shadow: 0 0 2.5rem rgba(255, 203, 0, 0.86);
    animation: gma-exact-title-slam calc(var(--lwc-duration-normal, 220ms) * 8) var(--lwc-ease, ease) both;
}

.gma-exact-jackpot-subtitle {
    font-size: clamp(0.72rem, 1.8vw, 1.2rem);
    animation: gma-exact-cheese-rise calc(var(--lwc-duration-normal, 220ms) * 8) var(--lwc-ease, ease) calc(var(--lwc-duration-fast, 140ms) * 3) both;
}

@keyframes gma-exact-title-slam {
    0% { opacity: 0; transform: scale(4.5) rotate(-8deg); filter: blur(0.4rem); }
    42% { opacity: 1; transform: scale(0.82) rotate(3deg); filter: blur(0); }
    62% { transform: scale(1.14) rotate(-1deg); }
    78% { transform: scale(0.96) rotate(0.5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}

.gma-exact-jackpot[data-phase="escalation"] .gma-exact-jackpot-title {
    animation: gma-exact-title-escalation calc(var(--lwc-duration-normal, 220ms) * 22) var(--lwc-ease, ease) both;
}

.gma-exact-jackpot[data-phase="frenzy"] .gma-exact-jackpot-title {
    animation: gma-exact-title-frenzy calc(var(--lwc-duration-normal, 220ms) * 24) var(--lwc-ease, ease) both;
}

.gma-exact-jackpot[data-phase="finale"] .gma-exact-jackpot-title {
    animation: gma-exact-title-finale calc(var(--lwc-duration-normal, 220ms) * 12) var(--lwc-ease, ease) both;
}

@keyframes gma-exact-title-escalation {
    0%, 100% { transform: scale(1) rotate(0); }
    18% { transform: scale(1.08) rotate(-1deg); }
    42% { transform: scale(0.98) rotate(0.7deg); }
    67% { transform: scale(1.1) rotate(-0.6deg); }
}

@keyframes gma-exact-title-frenzy {
    0%, 100% { transform: scale(1) rotate(0); }
    12% { transform: scale(1.1) rotate(-1.2deg); }
    25% { transform: scale(0.97) rotate(0.8deg); }
    39% { transform: scale(1.13) rotate(-0.8deg); }
    54% { transform: scale(0.98) rotate(0.5deg); }
    70% { transform: scale(1.14) rotate(-0.5deg); }
    86% { transform: scale(1.02) rotate(0.25deg); }
}

@keyframes gma-exact-title-finale {
    0%, 100% { transform: scale(1) rotate(0); filter: brightness(1); }
    16% { transform: scale(1.18) rotate(-1.4deg); filter: brightness(1.28); }
    34% { transform: scale(0.96) rotate(1deg); }
    52% { transform: scale(1.22) rotate(-0.8deg); filter: brightness(1.38); }
    72% { transform: scale(0.98) rotate(0.4deg); }
    88% { transform: scale(1.12) rotate(-0.2deg); }
}

@keyframes gma-exact-cheese-drop {
    0% { opacity: 0; transform: translateY(-4rem) rotate(-8deg); }
    64% { opacity: 1; transform: translateY(0.35rem) rotate(2deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes gma-exact-cheese-rise {
    0% { opacity: 0; transform: translateY(3rem) scale(0.76); }
    68% { opacity: 1; transform: translateY(-0.2rem) scale(1.06); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.gma-exact-jackpot-marquee {
    position: absolute;
    z-index: 5;
    left: -24%;
    width: 148%;
    padding: 0.5rem 0;
    overflow: hidden;
    white-space: nowrap;
    background: linear-gradient(90deg, #ffda32, #ff4e91, #19c3d1, #ffda32);
    border-block: 3px solid rgba(255, 255, 255, 0.82);
    color: #101418;
    font-family: Orbitron, Roboto, sans-serif;
    font-size: clamp(0.75rem, 2vw, 1.35rem);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 0 2rem rgba(255, 209, 0, 0.62);
}

.gma-exact-jackpot-marquee--top {
    top: 7%;
    transform: rotate(-4deg);
    animation: gma-exact-marquee-top calc(var(--lwc-duration-normal, 220ms) * 68) var(--lwc-ease, ease) both;
}

.gma-exact-jackpot-marquee--bottom {
    bottom: 7%;
    transform: rotate(4deg);
    animation: gma-exact-marquee-bottom calc(var(--lwc-duration-normal, 220ms) * 68) var(--lwc-ease, ease) both;
}

@keyframes gma-exact-marquee-top {
    from { translate: -10% 0; }
    to { translate: 10% 0; }
}

@keyframes gma-exact-marquee-bottom {
    from { translate: 10% 0; }
    to { translate: -10% 0; }
}

.gma-exact-time-icon {
    --gma-time-duration: calc(var(--lwc-duration-normal, 220ms) * 18);
    --gma-time-delay: 0ms;
    position: absolute;
    z-index: 4;
    left: var(--gma-time-x, 50%);
    top: -14vh;
    color: var(--gma-time-color, #ffd83d);
    font-size: var(--gma-time-size, 2rem);
    line-height: 1;
    opacity: 0;
    text-shadow: 0 0.35rem 0.45rem rgba(0, 0, 0, 0.65);
    animation: gma-exact-clock-rain var(--gma-time-duration, calc(var(--lwc-duration-normal, 220ms) * 18)) var(--lwc-ease, ease) var(--gma-time-delay, 0ms) both;
}

@keyframes gma-exact-clock-rain {
    0% { opacity: 0; transform: translate3d(0, -8vh, 0) scale(0.45) rotate(0deg); }
    8% { opacity: 1; }
    72% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--gma-time-drift, 0), 124vh, 0) scale(1.15) rotate(var(--gma-time-rotation, 520deg)); }
}

.gma-exact-target {
    --gma-target-delay: 0ms;
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 48%;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: var(--gma-target-size, 3rem);
    line-height: 1;
    opacity: 0;
    text-shadow: 0 0.4rem 0.55rem rgba(0, 0, 0, 0.5);
    animation: gma-exact-target-burst calc(var(--lwc-duration-normal, 220ms) * 22) var(--lwc-ease, ease) var(--gma-target-delay, 0ms) both;
}

@keyframes gma-exact-target-burst {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(-30deg); }
    14% { opacity: 1; }
    45% { opacity: 1; transform: translate(calc(-50% + var(--gma-target-dx, 0px)), calc(-50% + var(--gma-target-dy, 0px))) scale(1.3) rotate(18deg); }
    78% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--gma-target-dx, 0px)), calc(-50% + var(--gma-target-dy, 0px) + 6rem)) scale(0.8) rotate(390deg); }
}

@media (max-width: 540px) {
    .gma-exact-jackpot-copy {
        top: 36%;
    }

    .gma-exact-jackpot-title {
        /* Leave room for the 1.22x finale slam without clipping the unbroken word. */
        font-size: clamp(2.75rem, 11vw, 5.2rem);
        -webkit-text-stroke-width: 1px;
    }

    .gma-exact-jackpot-subtitle {
        max-width: 92vw;
        white-space: normal;
    }
}

.gma-celebration-spark {
    position: fixed;
    left: var(--gma-spark-x, 50%);
    top: var(--gma-spark-y, 50%);
    z-index: 10001;
    width: var(--gma-spark-size, 1.75rem);
    height: var(--gma-spark-size, 1.75rem);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--lwc-surface, #fff) 90%, transparent);
    color: var(--gma-spark-color, var(--lwc-accent, #087685));
    box-shadow: 0 0.45rem 1rem rgba(2, 8, 23, 0.2), 0 0 0 1px rgba(255,255,255,.42) inset;
    pointer-events: none;
    opacity: 0;
    animation: gma-spark-flight calc(var(--lwc-duration-normal, 220ms) * 10) var(--lwc-ease, ease) both;
}

@keyframes gma-spark-flight {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.35) rotate(0);
    }
    14% {
        opacity: 1;
    }
    62% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--gma-spark-dx, 0px)), calc(-50% + var(--gma-spark-dy, -8rem))) scale(0.9) rotate(var(--gma-spark-rotation, 120deg));
    }
}

@keyframes gma-card-celebrate {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(25, 195, 209, 0);
    }
    38% {
        transform: scale(var(--gma-card-celebrate-scale, 1.026));
        box-shadow: 0 0 0 5px rgba(25, 195, 209, 0.2), 0 1.5rem 3.5rem rgba(0,0,0,.3);
    }
    68% {
        transform: scale(0.995);
        box-shadow: 0 0 0 2px rgba(25, 195, 209, 0.1), 0 1rem 2rem rgba(0,0,0,.22);
    }
}

.modal-content.guess-mode #guessAgeContainer.celebrate-better {
    animation: gma-card-celebrate calc(var(--lwc-duration-normal, 220ms) * 6) var(--lwc-ease, ease) both;
}

.modal-content.guess-mode #guessAgeContainer.celebrate-exact {
    animation: gma-exact-card-jackpot calc(var(--lwc-duration-normal, 220ms) * 68) var(--lwc-ease, ease) both;
}

@keyframes gma-exact-card-jackpot {
    0%, 100% { transform: scale(1) rotate(0); }
    5% { transform: scale(var(--gma-exact-card-peak-scale, 1.055)) rotate(calc(-1.1deg * var(--gma-exact-card-tilt, 1))); box-shadow: 0 0 0 7px rgba(255, 220, 53, 0.46), 0 0 4rem rgba(255, 187, 0, 0.72); }
    10% { transform: scale(var(--gma-exact-card-trough-scale, 0.985)) rotate(calc(0.8deg * var(--gma-exact-card-tilt, 1))); }
    16% { transform: scale(var(--gma-exact-card-second-scale, 1.04)) rotate(calc(-0.55deg * var(--gma-exact-card-tilt, 1))); box-shadow: 0 0 0 4px rgba(255, 78, 145, 0.38), 0 0 3.5rem rgba(255, 216, 61, 0.66); }
    24% { transform: scale(1) rotate(0); }
    38% { transform: scale(var(--gma-exact-card-third-scale, 1.025)) rotate(calc(0.4deg * var(--gma-exact-card-tilt, 1))); box-shadow: 0 0 0 6px rgba(25, 195, 209, 0.38), 0 0 4.5rem rgba(255, 205, 24, 0.68); }
    54% { transform: scale(var(--gma-exact-card-late-trough-scale, 0.995)) rotate(calc(-0.3deg * var(--gma-exact-card-tilt, 1))); }
    68% { transform: scale(var(--gma-exact-card-fourth-scale, 1.018)) rotate(calc(0.2deg * var(--gma-exact-card-tilt, 1))); box-shadow: 0 0 0 3px rgba(255, 220, 75, 0.28), 0 0 3rem rgba(255, 190, 0, 0.48); }
    80% { transform: scale(var(--gma-exact-card-third-scale, 1.025)) rotate(calc(-0.45deg * var(--gma-exact-card-tilt, 1))); box-shadow: 0 0 0 7px rgba(255, 78, 145, 0.38), 0 0 5rem rgba(255, 205, 24, 0.76); }
    89% { transform: scale(var(--gma-exact-card-late-trough-scale, 0.995)) rotate(calc(0.35deg * var(--gma-exact-card-tilt, 1))); }
    95% { transform: scale(var(--gma-exact-card-peak-scale, 1.055)) rotate(calc(-0.7deg * var(--gma-exact-card-tilt, 1))); box-shadow: 0 0 0 8px rgba(255, 220, 53, 0.52), 0 0 5.5rem rgba(255, 187, 0, 0.82); }
}

.gma-card.celebrate-better {
    border-color: var(--lwc-accent-bright, #19c3d1) !important;
}

/* Exact guesses get a bounded metallic takeover—loud for one payoff, never infinite. */
.gma-card.celebrate-exact #gmaRange {
    background: linear-gradient(90deg, #8a5c00 0%, #d5a928 23%, #fff0a6 48%, #c18b11 70%, #fff1aa 88%, #d1d5db 100%) !important;
    background-size: 220% 100% !important;
    box-shadow: inset 0 0 0.45rem rgba(72, 48, 0, 0.35), 0 0 1.3rem rgba(255, 215, 0, 0.52);
    animation: gma-exact-track-flash calc(var(--lwc-duration-normal, 220ms) * 68) var(--lwc-ease, ease) both;
}

@keyframes gma-exact-track-flash {
    0%, 100% { filter: saturate(1); background-position: 0 0; }
    18% { filter: saturate(1.5) brightness(1.24); }
    48% { filter: saturate(1.15) brightness(1.05); background-position: 100% 0; }
    72% { filter: saturate(1.6) brightness(1.2); }
    84% { filter: saturate(1.2) brightness(1.08); background-position: 25% 0; }
    92% { filter: saturate(1.8) brightness(1.32); background-position: 100% 0; }
}

    /* GOLDEN THUMB for WebKit */
    .gma-card.celebrate-exact #gmaRange::-webkit-slider-thumb {
        background: linear-gradient(145deg, #fff2a8, #c58c12 56%, #7c5000) !important;
        box-shadow: 0 0 0 3px rgba(255,255,255,.92), 0 0 1.2rem rgba(255,215,0,.8);
    }

    /* GOLDEN THUMB for Firefox */
    .gma-card.celebrate-exact #gmaRange::-moz-range-thumb {
        background: linear-gradient(145deg, #fff2a8, #c58c12 56%, #7c5000) !important;
        box-shadow: 0 0 0 3px rgba(255,255,255,.92), 0 0 1.2rem rgba(255,215,0,.8);
    }

/* GOLDEN BUBBLES */
.gma-card.celebrate-exact #gmaBubble,
.gma-card.celebrate-exact #gmaRealBubble {
    background: linear-gradient(135deg, #fff8cf 0%, #f4d260 48%, #fff3b2 72%, #bc8208 100%) !important;
    border-color: #8a5c00 !important;
    color: #473200 !important;
    box-shadow: 0 0.7rem 1.5rem rgba(64, 43, 0, 0.28), 0 0 1.4rem rgba(255, 215, 0, 0.56);
    animation: gma-exact-bubble-rave calc(var(--lwc-duration-normal, 220ms) * 68) var(--lwc-ease, ease) both;
}

.gma-card.celebrate-exact #gmaRealBubble {
    transform: translateX(-50%) scale(1);
}

@keyframes gma-exact-bubble-rave {
    0%, 100% { filter: brightness(1); }
    8% { filter: brightness(1.35) saturate(1.4); box-shadow: 0 0.9rem 2rem rgba(64, 43, 0, 0.3), 0 0 3rem rgba(255, 217, 0, 0.92); }
    18% { filter: brightness(1.03); }
    32% { filter: brightness(1.3) saturate(1.55); box-shadow: 0 0.9rem 2rem rgba(64, 43, 0, 0.3), 0 0 3.4rem rgba(255, 83, 169, 0.7); }
    48% { filter: brightness(1.04); }
    64% { filter: brightness(1.32) saturate(1.5); box-shadow: 0 0.9rem 2rem rgba(64, 43, 0, 0.3), 0 0 3.4rem rgba(25, 195, 209, 0.78); }
    80% { filter: brightness(1.06); }
    88% { filter: brightness(1.12); }
    94% { filter: brightness(1.42) saturate(1.7); box-shadow: 0 0.9rem 2rem rgba(64, 43, 0, 0.3), 0 0 4rem rgba(255, 217, 0, 0.96); }
}

.gma-card.celebrate-exact #gmaBubble::after,
.gma-card.celebrate-exact #gmaRealBubble::after {
    background: #f4d260 !important;
    border-color: #8a5c00 !important;
}

#detailsModal .gma-card {
    width: min(680px, calc(100% - 2rem));
    margin-top: 0;
    margin-bottom: 0;
    box-sizing: border-box;
    background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.055));
    color: var(--athlete-modal-text, rgba(255,255,255,.94));
    border: 1px solid var(--athlete-modal-cream-border, rgba(246,244,237,.52));
    box-shadow: 0 1.15rem 2.65rem rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.08) inset;
    padding: 1.65rem 2rem 2rem;
}
#detailsModal .gma-avatar {
    background: rgba(255,255,255,.08);
    box-shadow: none;
}
#detailsModal .gma-heading,
#detailsModal .chrono-age-heading {
    color: var(--athlete-modal-text, rgba(255,255,255,.94));
    font-size: clamp(2rem, 4vw, 2.5rem);
    margin-bottom: clamp(1.25rem, 2.5vh, 2rem);
    text-shadow: 0 0.25rem 0.8rem rgba(0,0,0,.3);
}
#detailsModal #gmaStatus {
    color: var(--athlete-modal-cream, rgba(246,244,237,.92));
    line-height: 1.35;
    margin: 0.25rem auto 1rem;
    max-width: 34rem;
}
#detailsModal #gmaStatus.gma-status--semantic {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
#detailsModal #gmaRange {
    background: linear-gradient(90deg, rgba(246,244,237,.88) 0%, rgba(246,244,237,.88) var(--percent, 50%), rgba(255,255,255,.24) var(--percent, 50%), rgba(255,255,255,.24) 100%);
}
#detailsModal #gmaRange:focus-visible {
    outline: 3px solid var(--lwc-accent-bright, #19c3d1);
    outline-offset: 5px;
}
#detailsModal #gmaRange::-moz-range-track {
    background: linear-gradient(90deg, rgba(246,244,237,.88) 0%, rgba(246,244,237,.88) var(--percent, 50%), rgba(255,255,255,.24) var(--percent, 50%), rgba(255,255,255,.24) 100%);
}
#detailsModal #gmaRange::-webkit-slider-thumb {
    background: linear-gradient(145deg, #fffef9, #d9d5c9);
    border-color: rgba(255,255,255,.95);
    box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,.35), 0 0 0 1px rgba(10,12,12,.16);
}
#detailsModal #gmaRange::-moz-range-thumb {
    background: linear-gradient(145deg, #fffef9, #d9d5c9);
    border-color: rgba(255,255,255,.95);
    box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,.35), 0 0 0 1px rgba(10,12,12,.16);
}
#detailsModal #gmaRange:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(10,12,12,.96), 0 0 0 7px var(--lwc-accent-bright, #19c3d1);
}
#detailsModal #gmaRange:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(10,12,12,.96), 0 0 0 7px var(--lwc-accent-bright, #19c3d1);
}
#detailsModal #gmaBubble,
#detailsModal #gmaRealBubble {
    background: rgba(10,12,12,.96);
    color: var(--athlete-modal-cream, rgba(246,244,237,.92));
    border-color: var(--athlete-modal-cream-border, rgba(246,244,237,.52));
    box-shadow: 0 0.75rem 1.75rem rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.08) inset;
}
#detailsModal #gmaBubble::after,
#detailsModal #gmaRealBubble::after {
    background: rgba(10,12,12,.96);
    border-left-color: var(--athlete-modal-cream-border, rgba(246,244,237,.52));
    border-bottom-color: var(--athlete-modal-cream-border, rgba(246,244,237,.52));
}
#detailsModal .gma-btn {
    box-shadow: 0 0.55rem 1.35rem rgba(0,0,0,.26);
}
#detailsModal .gma-btn:focus-visible {
    outline: 3px solid var(--lwc-accent-bright);
    box-shadow: none;
    outline-offset: 3px;
}
#detailsModal .gma-btn--ghost {
    background: rgba(246,244,237,.06);
    color: var(--athlete-modal-cream, rgba(246,244,237,.92));
    border-color: var(--athlete-modal-cream-border, rgba(246,244,237,.52));
}
#detailsModal .gma-btn--ghost:hover,
#detailsModal .gma-btn--ghost:focus-visible {
    color: rgba(12,16,16,.94);
    background: var(--athlete-modal-cream, rgba(246,244,237,.92));
}
#detailsModal .gma-btn--primary {
    background: var(--athlete-modal-cream, rgba(246,244,237,.92));
    color: rgba(12,16,16,.94);
    box-shadow: 0 0.65rem 1.55rem rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.68) inset;
}
#detailsModal .gma-btn--primary:hover,
#detailsModal .gma-btn--primary:focus-visible {
    filter: brightness(1.04);
}
#detailsModal .gma-card.celebrate-exact {
    --gma-settle-glow: rgba(255, 215, 0, 0.82);
    --gma-settle-afterglow: rgba(255, 215, 0, 0.38);
    border-color: rgba(255,215,0,.52);
}
#detailsModal .gma-card.celebrate-exact #gmaRange {
    background: linear-gradient(90deg, #8a5c00 0%, #d5a928 23%, #fff0a6 48%, #c18b11 70%, #fff1aa 88%, #d1d5db 100%) !important;
    box-shadow: inset 0 0 0.45rem rgba(72, 48, 0, 0.35), 0 0 1.3rem rgba(255, 215, 0, 0.52);
}
#detailsModal .gma-card.celebrate-exact #gmaRange::-webkit-slider-thumb {
    background: linear-gradient(145deg, #fff2a8, #c58c12 56%, #7c5000) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.92), 0 0 1.2rem rgba(255,215,0,.8);
}
#detailsModal .gma-card.celebrate-exact #gmaRange::-moz-range-thumb {
    background: linear-gradient(145deg, #fff2a8, #c58c12 56%, #7c5000) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.92), 0 0 1.2rem rgba(255,215,0,.8);
}
#detailsModal .gma-card.celebrate-exact #gmaBubble,
#detailsModal .gma-card.celebrate-exact #gmaRealBubble {
    background: linear-gradient(135deg, #fff8cf 0%, #f4d260 48%, #fff3b2 72%, #bc8208 100%) !important;
    border-color: #8a5c00 !important;
    color: #473200 !important;
}
#detailsModal .gma-card.celebrate-exact #gmaBubble::after,
#detailsModal .gma-card.celebrate-exact #gmaRealBubble::after {
    background: #f4d260 !important;
    border-color: #8a5c00 !important;
}
#detailsModal .gma-card.gma-done {
    margin: 0;
    border: 0;
    box-shadow: none;
}
@media (max-width: 768px) {
    #detailsModal .modal-content.guess-mode #guessAgeContainer {
        --gma-card-celebrate-scale: 1;
        --gma-exact-card-peak-scale: 1;
        --gma-exact-card-trough-scale: 1;
        --gma-exact-card-second-scale: 1;
        --gma-exact-card-third-scale: 1;
        --gma-exact-card-late-trough-scale: 1;
        --gma-exact-card-fourth-scale: 1;
        --gma-exact-card-tilt: 0;
    }

    #detailsModal .modal-content.guess-mode #athlete-profile {
        --gma-portrait-gap: clamp(1.5rem, 3.5vh, 2.5rem);
        --gma-portrait-size: clamp(180px, min(70vw, 36vh), 320px);
        padding-block: clamp(3.5rem, 5.5vh, 4.5rem) clamp(0.5rem, 2vh, 1.25rem);
    }
    #detailsModal .modal-content.guess-mode #athlete-profile .portrait-wrapper {
        width: var(--gma-portrait-size);
        height: auto;
    }
    #detailsModal .gma-card {
        width: 100%;
        padding: 1.75rem 1.25rem 2rem;
    }
    #detailsModal .modal-content.guess-mode .gma-heading,
    #detailsModal .modal-content.guess-mode .chrono-age-heading {
        display: block;
        width: 100%;
        min-width: 100%;
        overflow: visible;
        white-space: normal;
    }

    #detailsModal .modal-content.guess-mode .chrono-age-heading.is-revealing {
        animation: none;
    }
    #detailsModal .gma-slider-wrap {
        width: 86%;
    }
}

@media (max-height: 680px) {
    #detailsModal .modal-content.guess-mode #athlete-profile {
        --gma-portrait-gap: 1.35rem;
        --gma-portrait-size: clamp(140px, min(64vw, 32vh), 260px);
        padding-block: 3rem 0.5rem;
    }
    #detailsModal .modal-content.guess-mode #athlete-profile .portrait-wrapper {
        width: var(--gma-portrait-size);
        height: auto;
    }
    #detailsModal .modal-content.guess-mode .gma-card {
        margin-bottom: 0;
        padding: 1rem 1rem 1.15rem;
    }
    #detailsModal .modal-content.guess-mode .gma-heading,
    #detailsModal .modal-content.guess-mode .chrono-age-heading {
        margin-bottom: 1.25rem;
    }
    #detailsModal .modal-content.guess-mode .gma-slider-wrap {
        --gma-you-anchor-y: 6.65rem;
        margin: 0.25rem auto 0.75rem;
        padding-top: 3.75rem;
    }
    #detailsModal .modal-content.guess-mode #gmaRange {
        --gma-thumb-size: 52px;
        height: 2.5rem;
    }
    #detailsModal .modal-content.guess-mode #gmaRange::-webkit-slider-thumb {
        width: 52px;
        height: 52px;
    }
    #detailsModal .modal-content.guess-mode #gmaRange::-moz-range-thumb {
        width: 52px;
        height: 52px;
    }
    #detailsModal .modal-content.guess-mode #gmaBubble,
    #detailsModal .modal-content.guess-mode #gmaRealBubble {
        font-size: 2rem;
        padding: 0.55rem 1.1rem;
    }
}

@media (min-width: 769px) and (max-height: 760px) {
    #detailsModal .modal-content.guess-mode {
        box-sizing: border-box;
        height: 96vh;
        max-height: 96vh;
        margin: 1vh auto;
    }
    #detailsModal .modal-content.guess-mode #athlete-profile {
        --gma-portrait-gap: .8rem;
        --gma-portrait-size: clamp(150px, min(34vw, 28vh), 230px);
        padding-block: 2.25rem .5rem;
    }
    #detailsModal .modal-content.guess-mode .gma-card {
        width: min(620px, calc(100% - 2rem));
        padding: .95rem 1.25rem 1.15rem;
    }
    #detailsModal .modal-content.guess-mode .gma-heading,
    #detailsModal .modal-content.guess-mode .chrono-age-heading {
        font-size: 2rem;
        margin-bottom: .9rem;
    }
    #detailsModal .modal-content.guess-mode .gma-slider-wrap {
        --gma-you-anchor-y: 6.25rem;
        width: 84%;
        margin: .25rem auto .75rem;
        padding-top: 3.5rem;
    }
    #detailsModal .modal-content.guess-mode #gmaRange {
        --gma-thumb-size: 50px;
        height: 2.35rem;
    }
    #detailsModal .modal-content.guess-mode #gmaRange::-webkit-slider-thumb {
        width: 50px;
        height: 50px;
    }
    #detailsModal .modal-content.guess-mode #gmaRange::-moz-range-thumb {
        width: 50px;
        height: 50px;
    }
    #detailsModal .modal-content.guess-mode #gmaBubble,
    #detailsModal .modal-content.guess-mode #gmaRealBubble {
        font-size: 1.9rem;
        padding: .48rem .95rem;
    }
    #detailsModal .modal-content.guess-mode .gma-actions {
        gap: .75rem;
    }
    #detailsModal .modal-content.guess-mode .gma-btn {
        min-height: 44px;
        padding: .75rem 1.45rem;
    }
}

@media (min-width: 640px) and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
    #detailsModal .modal-content.guess-mode {
        width: calc(100vw - .75rem);
        height: calc(100dvh - .75rem);
        max-height: calc(100dvh - .75rem);
        margin: .375rem auto;
        padding: .75rem;
    }

    #detailsModal .modal-content.guess-mode #athlete-profile {
        --gma-portrait-gap: 0;
        --gma-portrait-size: clamp(86px, 25vh, 116px);
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: clamp(.65rem, 2vw, 1rem);
        min-height: 100%;
        padding: 0 0.65rem 0 3.25rem;
    }

    #detailsModal .modal-content.guess-mode #athlete-profile .portrait-wrapper {
        width: var(--gma-portrait-size);
        margin: 0;
    }

    #detailsModal .modal-content.guess-mode .gma-card {
        width: min(100%, 540px);
        padding: .7rem .9rem .8rem;
    }

    #detailsModal .modal-content.guess-mode .gma-heading,
    #detailsModal .modal-content.guess-mode .chrono-age-heading {
        font-size: clamp(1.35rem, 6vh, 1.75rem);
        margin-bottom: .45rem;
    }

    #detailsModal .modal-content.guess-mode .gma-heading {
        display: block;
        width: 100%;
        min-width: 100%;
        overflow: visible;
        white-space: normal;
    }

    #detailsModal .modal-content.guess-mode .gma-slider-wrap {
        --gma-you-anchor-y: 5.4rem;
        width: 82%;
        margin: .35rem auto .55rem;
        padding-top: 3rem;
    }

    #detailsModal .modal-content.guess-mode #gmaRange {
        --gma-thumb-size: 44px;
        height: 2rem;
    }

    #detailsModal .modal-content.guess-mode #gmaRange::-webkit-slider-thumb {
        width: 44px;
        height: 44px;
    }

    #detailsModal .modal-content.guess-mode #gmaRange::-moz-range-thumb {
        width: 44px;
        height: 44px;
    }

    #detailsModal .modal-content.guess-mode #gmaBubble,
    #detailsModal .modal-content.guess-mode #gmaRealBubble {
        font-size: 1.45rem;
        padding: .35rem .75rem;
    }

    #detailsModal .modal-content.guess-mode .gma-actions {
        gap: .5rem;
    }

    #detailsModal .modal-content.guess-mode .gma-btn {
        min-height: 44px;
        padding: .55rem .9rem;
        font-size: .9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gma-pop-banner.show,
    .gma-pop-banner.hide,
    .gma-card,
    #detailsModal .modal-content #guessAgeContainer.gma-done,
    .gma-heading,
    .gma-actions,
    .gma-actions.gma-actions-hide,
    .gma-payoff-region,
    .gma-slider-wrap,
    #detailsModal .modal-content.guess-mode #athlete-profile .portrait-wrapper,
    .chrono-age-heading,
    .gma-reaction,
    .gma-trollface-container,
    .gma-celebration-spark,
    .gma-exact-jackpot,
    .gma-exact-time-icon,
    .gma-exact-target,
    #gmaRange,
    #gmaBubble,
    #gmaRealBubble {
        animation: none !important;
        transition: none !important;
    }

    .gma-pop-banner {
        transform: translateY(0) scale(1);
    }

    #gmaRealBubble.is-settled {
        transform: translateX(-50%) scale(1);
    }

    .gma-reaction,
    .gma-celebration-spark,
    #detailsModal .modal-content.guess-mode > .gma-exact-jackpot,
    .gma-exact-jackpot {
        display: none !important;
    }

    #detailsModal .modal-content #guessAgeContainer.gma-done {
        opacity: 0;
        max-height: 0;
        padding-block: 0;
        margin-block: 0;
        border-width: 0;
        overflow: hidden;
    }

    #detailsModal .modal-content.guess-mode > .gma-trollface-container {
        bottom: 0;
    }
}
#detailsModal .gma-actions {
    gap: var(--lwc-space-2);
}

#detailsModal #gmaBubble,
#detailsModal #gmaRealBubble {
    font-variant-numeric: tabular-nums;
}

#detailsModal #gmaStatus {
    font-size: var(--lwc-type-sm);
    line-height: 1.5;
}

@media (max-width: 420px) {
    #detailsModal .gma-btn--ghost {
        font-size: var(--lwc-type-sm);
        line-height: 1.5;
    }
}