/* Coliseum mascot widget (shown on every page). Formerly a <style> block in ColiseumMascotWidget.razor.
   Illustration colours describe the mascot artwork; confetti bursts use the brand fills. */

/* ColiseumMascotWidget.razor */
    .coliseum-mascot {
        position: fixed;
        left: var(--mascot-x);
        top: var(--mascot-y);
        z-index: 1150;
        width: 156px;
        min-height: 154px;
        pointer-events: none;
        user-select: none;
        touch-action: none;
    }

    .coliseum-mascot.is-minimized {
        width: 88px;
        min-height: 88px;
    }

    .mascot-stage {
        position: relative;
        width: 86px;
        height: 86px;
        border: 0;
        background: transparent;
        padding: 0;
        cursor: pointer;
        pointer-events: auto;
        filter: drop-shadow(0 14px 24px rgba(17, 24, 39, 0.18));
    }

    /* Illustration colors describe the mascot artwork, not application surfaces. */
    .mascot-lottie-shell {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: radial-gradient(circle at 34% 25%, #ffffff 0 12%, var(--skin-bg) 13% 100%);
        border: 1px solid rgba(17, 24, 39, 0.12);
        display: grid;
        place-items: center;
        animation: mascot-float 2.8s ease-in-out infinite;
        overflow: hidden;
    }

    .mascot-burst {
        position: absolute;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--halo-fill-yellow);
        opacity: 0;
    }

    .mascot-burst.one { left: 16px; top: 15px; }
    .mascot-burst.two { right: 14px; top: 20px; background: var(--halo-fill-green); }
    .mascot-burst.three { left: 20px; bottom: 16px; background: var(--halo-fill-blue); }
    .mascot-burst.four { right: 18px; bottom: 14px; background: var(--halo-fill-red); }

    .mascot-orbit {
        position: absolute;
        width: 72px;
        height: 24px;
        border: 3px solid color-mix(in srgb, var(--primary) 72%, #ffffff);
        border-radius: 50%;
        transform: rotate(-18deg);
        opacity: 0.42;
        animation: mascot-spin 5s linear infinite;
    }

    .mascot-body {
        position: relative;
        width: 46px;
        height: 50px;
        border-radius: 22px 22px 18px 18px;
        background: linear-gradient(160deg, var(--primary), var(--accent));
        box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.12);
    }

    .mascot-eye {
        position: absolute;
        top: 17px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ffffff;
    }

    .mascot-eye.left {
        left: 12px;
    }

    .mascot-eye.right {
        right: 12px;
    }

    .mascot-smile {
        position: absolute;
        left: 17px;
        top: 29px;
        width: 12px;
        height: 6px;
        border-bottom: 2px solid rgba(255, 255, 255, 0.86);
        border-radius: 0 0 999px 999px;
    }

    .mascot-feet {
        position: absolute;
        bottom: 13px;
        width: 44px;
        height: 9px;
        border-radius: 50%;
        background: rgba(17, 24, 39, 0.16);
    }

    .car-shell {
        background:
            radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.95) 0 10%, transparent 11%),
            linear-gradient(150deg, color-mix(in srgb, var(--skin-bg) 72%, #ffffff), #ffffff 58%, color-mix(in srgb, var(--primary) 16%, #ffffff));
    }

    .car-road {
        position: absolute;
        left: 13px;
        right: 13px;
        bottom: 20px;
        height: 3px;
        border-radius: var(--halo-radius-pill);
        background: linear-gradient(90deg, transparent, rgba(17, 24, 39, 0.28), transparent);
        animation: car-road-drift 0.7s linear infinite;
    }

    .car-boost {
        position: absolute;
        left: 12px;
        top: 43px;
        width: 18px;
        height: 9px;
        border-radius: var(--halo-radius-pill);
        background: linear-gradient(90deg, transparent, var(--halo-fill-yellow), var(--halo-fill-red));
        opacity: 0.72;
        filter: blur(0.5px);
        animation: car-boost-pulse 0.9s ease-in-out infinite;
    }

    .mascot-car {
        position: relative;
        width: 58px;
        height: 28px;
        border-radius: 16px 20px 10px 10px;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        box-shadow:
            inset 0 -5px 0 rgba(17, 24, 39, 0.16),
            0 10px 16px rgba(17, 24, 39, 0.2);
        transform-origin: center bottom;
        animation: car-idle 1.2s ease-in-out infinite;
    }

    .mascot-car::before {
        content: "";
        position: absolute;
        left: 6px;
        right: 8px;
        bottom: 7px;
        height: 5px;
        border-radius: var(--halo-radius-pill);
        background: rgba(255, 255, 255, 0.18);
    }

    .car-cabin {
        position: absolute;
        left: 21px;
        top: -10px;
        width: 25px;
        height: 18px;
        border-radius: 12px 13px 4px 4px;
        background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 84%, #ffffff), var(--primary));
        box-shadow: inset 0 -3px 0 rgba(17, 24, 39, 0.12);
    }

    .car-window {
        position: absolute;
        left: 27px;
        top: -6px;
        width: 16px;
        height: 10px;
        border-radius: 8px 8px 3px 3px;
        background: linear-gradient(135deg, #ECFEFF, #93C5FD);
        border: 1px solid rgba(255, 255, 255, 0.62);
    }

    .car-wheel {
        position: absolute;
        bottom: -5px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background:
            radial-gradient(circle, #F9FAFB 0 18%, #111827 20% 55%, #374151 56% 100%);
        animation: car-wheel-spin 0.62s linear infinite;
    }

    .car-wheel.front {
        right: 8px;
    }

    .car-wheel.rear {
        left: 8px;
    }

    .car-light {
        position: absolute;
        top: 11px;
        width: 6px;
        height: 5px;
        border-radius: var(--halo-radius-pill);
    }

    .car-light.front {
        right: -1px;
        background: #FEF3C7;
        box-shadow: 5px 0 10px rgba(251, 191, 36, 0.78);
    }

    .car-light.rear {
        left: -1px;
        background: #FB7185;
    }

    .car-stripe {
        position: absolute;
        left: 13px;
        top: 6px;
        width: 28px;
        height: 3px;
        border-radius: var(--halo-radius-pill);
        background: rgba(255, 255, 255, 0.72);
    }

    .car-wing {
        display: none;
        position: absolute;
        left: 0;
        top: -9px;
        width: 19px;
        height: 6px;
        border-radius: 5px 1px 1px 5px;
        background: #111827;
        transform: rotate(-8deg);
    }

    .car-tier-street,
    .car-tier-gt,
    .car-tier-hyper {
        width: 62px;
    }

    .car-tier-gt .car-wing,
    .car-tier-hyper .car-wing {
        display: block;
    }

    .car-tier-hyper {
        background:
            linear-gradient(135deg, var(--primary), #111827 48%, var(--accent));
        box-shadow:
            inset 0 -5px 0 rgba(255, 255, 255, 0.12),
            0 0 18px color-mix(in srgb, var(--accent) 62%, transparent),
            0 12px 18px rgba(17, 24, 39, 0.22);
    }

    .mascot-accessory {
        position: absolute;
        right: 8px;
        top: 8px;
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--halo-surface);
        color: var(--accessory-color);
        border: 1px solid rgba(17, 24, 39, 0.12);
    }

    .mascot-level {
        position: absolute;
        right: -4px;
        bottom: 0;
        padding: 3px 7px;
        border-radius: var(--halo-radius-pill);
        background: var(--halo-surface-inverse);
        color: var(--halo-text-inverse);
        font-size: 0.72rem;
        font-weight: 800;
    }

    .mascot-controls {
        position: absolute;
        left: 0;
        top: 88px;
        display: inline-flex;
        gap: 4px;
        padding: 3px;
        border-radius: var(--halo-radius-pill);
        background: var(--halo-surface);
        border: 1px solid var(--halo-hairline);
        box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08);
        pointer-events: auto;
    }

    .mascot-toast {
        position: absolute;
        left: 0;
        top: 124px;
        max-width: 210px;
        padding: 8px 10px;
        border-radius: var(--halo-radius-sm);
        background: var(--halo-surface-inverse);
        color: var(--halo-text-inverse);
        font-size: 0.78rem;
        font-weight: 800;
        box-shadow: 0 16px 36px rgba(17, 24, 39, 0.2);
        animation: mascot-toast-in 2.4s ease both;
        pointer-events: auto;
    }

    .is-minimized .mascot-controls {
        top: 58px;
    }

    .is-minimized .mascot-stage {
        width: 64px;
        height: 64px;
    }

    .is-minimized .mascot-level {
        display: none;
    }

    .mascot-panel {
        position: absolute;
        left: 92px;
        top: 0;
        width: min(320px, calc(100vw - 120px));
        max-height: min(560px, calc(100vh - 32px));
        overflow: auto;
        padding: 14px;
        border-radius: var(--halo-radius-sm);
        background: var(--halo-surface);
        border: 1px solid var(--halo-hairline);
        box-shadow: 0 24px 60px rgba(17, 24, 39, 0.18);
        pointer-events: auto;
    }

    .mascot-panel-head,
    .mascot-progress-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .mascot-panel-head span,
    .mascot-unlocks > span,
    .mascot-progress-row span,
    .mascot-next {
        color: var(--halo-text-secondary);
        font-size: 0.78rem;
        font-weight: 700;
    }

    .mascot-panel-head strong,
    .mascot-progress-row strong {
        display: block;
        color: var(--halo-text);
        font-size: 1rem;
    }

    .mascot-progress-bar {
        height: 8px;
        border-radius: var(--halo-radius-pill);
        background: var(--halo-surface-sunken);
        overflow: hidden;
        margin: 12px 0 6px;
    }

    .mascot-progress-bar span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--primary), var(--accent));
    }

    .mascot-goal-card {
        margin-top: 12px;
        padding: 10px;
        border-radius: var(--halo-radius-sm);
        border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--halo-hairline));
        background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--halo-surface)), var(--halo-surface));
    }

    .mascot-goal-card > div:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .mascot-goal-card span,
    .mascot-goal-card small {
        color: var(--halo-text-secondary);
        font-size: 0.76rem;
        font-weight: 800;
    }

    .mascot-goal-card strong {
        color: var(--halo-text);
        font-size: 0.96rem;
    }

    .mascot-goal-bar {
        height: 7px;
        margin: 8px 0 6px;
        overflow: hidden;
        border-radius: var(--halo-radius-pill);
        background: var(--halo-surface-sunken);
    }

    .mascot-goal-bar span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--halo-text), var(--primary), var(--accent));
    }

    .mascot-unlocks {
        margin-top: 14px;
    }

    .mascot-chip-row,
    .mascot-stickers {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
    }

    .mascot-chip,
    .mascot-sticker {
        min-height: 28px;
        border-radius: var(--halo-radius-pill);
        border: 1px solid var(--halo-hairline);
        background: var(--halo-surface);
        color: var(--halo-text-secondary);
        padding: 0 10px;
        font-size: 0.76rem;
        font-weight: 700;
    }

    .mascot-chip {
        cursor: pointer;
    }

    .mascot-chip.selected,
    .mascot-sticker.unlocked {
        border-color: color-mix(in srgb, var(--primary) 40%, var(--halo-hairline));
        background: color-mix(in srgb, var(--primary) 10%, var(--halo-surface));
    }

    .mascot-chip.locked,
    .mascot-sticker.locked {
        opacity: 0.45;
    }

    .celebrate-receipt .mascot-lottie-shell {
        animation: mascot-receipt-jump 1.15s cubic-bezier(.2, .85, .25, 1) both;
    }

    .celebrate-receipt .mascot-burst {
        animation: mascot-burst-pop 1s ease-out both;
    }

    .celebrate-won .mascot-lottie-shell {
        animation: mascot-won-flip 1.2s cubic-bezier(.2, .88, .26, 1.08) both;
    }

    .celebrate-won .mascot-orbit {
        animation: mascot-spin 0.55s linear infinite;
    }

    .celebrate-won .mascot-burst {
        animation: mascot-confetti-pop 1.1s ease-out both;
    }

    @keyframes mascot-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-7px); }
    }

    @keyframes mascot-spin {
        to { transform: rotate(342deg); }
    }

    @keyframes car-idle {
        0%, 100% { transform: translateY(0) rotate(-1deg); }
        50% { transform: translateY(-4px) rotate(1deg); }
    }

    @keyframes car-wheel-spin {
        to { transform: rotate(360deg); }
    }

    @keyframes car-boost-pulse {
        0%, 100% { transform: scaleX(0.76); opacity: 0.38; }
        50% { transform: scaleX(1.1); opacity: 0.82; }
    }

    @keyframes car-road-drift {
        from { transform: translateX(9px); }
        to { transform: translateX(-9px); }
    }

    @keyframes mascot-receipt-jump {
        0% { transform: translateY(0) scale(1); }
        22% { transform: translateY(-26px) scale(1.07) rotate(-8deg); }
        46% { transform: translateY(4px) scale(0.96) rotate(5deg); }
        70% { transform: translateY(-12px) scale(1.04) rotate(-3deg); }
        100% { transform: translateY(0) scale(1); }
    }

    @keyframes mascot-won-flip {
        0% { transform: translateY(0) rotate(0deg) scale(1); }
        35% { transform: translateY(-22px) rotate(160deg) scale(1.05); }
        72% { transform: translateY(-6px) rotate(340deg) scale(1.1); }
        100% { transform: translateY(0) rotate(360deg) scale(1); }
    }

    @keyframes mascot-burst-pop {
        0% { transform: translate(0, 0) scale(0.3); opacity: 0; }
        20% { opacity: 1; }
        100% { transform: translate(var(--burst-x, 24px), var(--burst-y, -24px)) scale(1.2); opacity: 0; }
    }

    @keyframes mascot-confetti-pop {
        0% { transform: translate(0, 0) rotate(0deg) scale(0.4); opacity: 0; }
        16% { opacity: 1; }
        100% { transform: translate(var(--burst-x, 30px), var(--burst-y, -34px)) rotate(220deg) scale(1); opacity: 0; }
    }

    @keyframes mascot-toast-in {
        0% { opacity: 0; transform: translateY(8px); }
        12%, 82% { opacity: 1; transform: translateY(0); }
        100% { opacity: 0; transform: translateY(-6px); }
    }

    .mascot-burst.one { --burst-x: -28px; --burst-y: -28px; }
    .mascot-burst.two { --burst-x: 30px; --burst-y: -26px; }
    .mascot-burst.three { --burst-x: -24px; --burst-y: 28px; }
    .mascot-burst.four { --burst-x: 26px; --burst-y: 25px; }

    @media (max-width: 700px) {
        .coliseum-mascot,
        .coliseum-mascot.is-minimized {
            left: auto !important;
            right: 12px !important;
            top: auto !important;
            bottom: 12px !important;
            width: 56px;
            min-height: 56px;
        }

        .mascot-stage {
            width: 52px;
            height: 52px;
        }

        .mascot-level {
            display: none;
        }

        .mascot-controls {
            display: none;
        }

        .mascot-panel {
            left: auto;
            right: 0;
            top: auto;
            bottom: 64px;
            width: min(320px, calc(100vw - 24px));
        }
    }

@media (prefers-reduced-motion: reduce) {
    .coliseum-mascot, .coliseum-mascot * { animation: none !important; transition: none !important; }
}