:root {
    /* Kurva Bezier Standar Broadcast TV (ESPN / Astro Arena Style) */
    --ease-broadcast-in: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-broadcast-out: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-sport-snap: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Dynamic Theme Colors — diperbarui via JS dari state Firebase */
    --theme-primary: #2563eb;
    --theme-secondary: #0f172a;
    --theme-accent: #f59e0b;
}

body {
    font-family: 'Inter', sans-serif;
}

.score-font {
    font-family: 'Chakra Petch', sans-serif;
}

body.overlay-mode {
    background: transparent !important;
    overflow: hidden;
    user-select: none;
}

body.overlay-preview-bg {
    background-color: #0f172a !important;
    background-image: radial-gradient(#334155 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}

.broadcast-hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

/* 1. ANIMASI LOWER THIRD */
.lt-enter-left {
    animation: ltEnterLeft 0.65s var(--ease-broadcast-in) forwards;
    transform-origin: left center;
}

.lt-exit-left {
    animation: ltExitLeft 0.45s var(--ease-broadcast-out) forwards;
    transform-origin: left center;
}

@keyframes ltEnterLeft {
    0% {
        transform: translateX(-110%) skewX(-12deg);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        transform: translateX(0) skewX(0deg);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

@keyframes ltExitLeft {
    0% {
        transform: translateX(0) skewX(0deg);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
    100% {
        transform: translateX(-60%) skewX(10deg);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        opacity: 0;
    }
}

.lt-enter-right {
    animation: ltEnterRight 0.65s var(--ease-broadcast-in) forwards;
    transform-origin: right center;
}

.lt-exit-right {
    animation: ltExitRight 0.45s var(--ease-broadcast-out) forwards;
    transform-origin: right center;
}

@keyframes ltEnterRight {
    0% {
        transform: translateX(110%) skewX(12deg);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        transform: translateX(0) skewX(0deg);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

@keyframes ltExitRight {
    0% {
        transform: translateX(0) skewX(0deg);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
    100% {
        transform: translateX(60%) skewX(-10deg);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        opacity: 0;
    }
}

.broadcast-sheen {
    position: relative;
    overflow: hidden;
}

.broadcast-sheen::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-25deg);
    animation: sheenSweep 0.95s var(--ease-broadcast-in) 0.2s forwards;
    pointer-events: none;
}

@keyframes sheenSweep {
    0% { left: -150%; }
    100% { left: 220%; }
}

/* 2. ANIMASI SCOREBOARD */
.sb-enter-top {
    animation: sbEnterTop 0.6s var(--ease-sport-snap) forwards;
    transform-origin: top center;
}

.sb-exit-top {
    animation: sbExitTop 0.42s var(--ease-broadcast-out) forwards;
    transform-origin: top center;
}

@keyframes sbEnterTop {
    0% {
        transform: translateY(-140%) scale(0.9) perspective(500px) rotateX(-35deg);
        opacity: 0;
        filter: blur(4px);
    }
    70% {
        filter: blur(0px);
    }
    100% {
        transform: translateY(0) scale(1) perspective(500px) rotateX(0deg);
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes sbExitTop {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-130%) scale(0.92);
        opacity: 0;
        filter: blur(2px);
    }
}

.sb-enter-bottom {
    animation: sbEnterBottom 0.6s var(--ease-sport-snap) forwards;
    transform-origin: bottom center;
}

.sb-exit-bottom {
    animation: sbExitBottom 0.42s var(--ease-broadcast-out) forwards;
    transform-origin: bottom center;
}

@keyframes sbEnterBottom {
    0% {
        transform: translateY(140%) scale(0.9) perspective(500px) rotateX(35deg);
        opacity: 0;
        filter: blur(4px);
    }
    70% {
        filter: blur(0px);
    }
    100% {
        transform: translateY(0) scale(1) perspective(500px) rotateX(0deg);
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes sbExitBottom {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(130%) scale(0.92);
        opacity: 0;
        filter: blur(2px);
    }
}

.score-pop {
    animation: scorePop 0.55s var(--ease-sport-snap);
}

@keyframes scorePop {
    0% { transform: scale(1); }
    40% { transform: scale(1.45); color: #fde047; text-shadow: 0 0 18px rgba(253, 224, 71, 0.9); }
    100% { transform: scale(1); }
}

/* 3. ANIMASI LINE-UP */
.lu-enter {
    animation: luEnter 0.55s var(--ease-broadcast-in) forwards;
}

.lu-exit {
    animation: luExit 0.42s var(--ease-broadcast-out) forwards;
}

@keyframes luEnter {
    0% {
        transform: scale(0.92) translateY(30px);
        opacity: 0;
        filter: blur(6px);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes luExit {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(0.94) translateY(25px);
        opacity: 0;
        filter: blur(4px);
    }
}

.player-card-enter {
    opacity: 0;
    animation: playerCardUp 0.55s var(--ease-broadcast-in) forwards;
}
.player-card-enter:nth-child(1) { animation-delay: 0.10s; }
.player-card-enter:nth-child(2) { animation-delay: 0.18s; }
.player-card-enter:nth-child(3) { animation-delay: 0.26s; }
.player-card-enter:nth-child(4) { animation-delay: 0.34s; }
.player-card-enter:nth-child(5) { animation-delay: 0.42s; }

@keyframes playerCardUp {
    0% {
        transform: translateY(45px) scale(0.9);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* 4. ANIMASI MATCH EVENT POP-UP */
@keyframes matchAlertIn {
    0% {
        transform: translateY(45px) scale(0.82);
        opacity: 0;
        filter: blur(6px);
    }
    65% {
        transform: translateY(-4px) scale(1.03);
        opacity: 1;
        filter: blur(0px);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes matchAlertOut {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(30px) scale(0.88);
        opacity: 0;
        filter: blur(4px);
    }
}

@keyframes cardFlipIn {
    0% {
        transform: perspective(400px) rotateY(-90deg) scale(0.7);
        opacity: 0;
    }
    100% {
        transform: perspective(400px) rotateY(0deg) scale(1);
        opacity: 1;
    }
}

.card-badge-flip {
    animation: cardFlipIn 0.55s var(--ease-sport-snap) 0.15s backwards;
}