/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&display=swap');

:root {
    --color-bg: #1b2838;
    --color-text: #c7d5e0;
    --color-header: #66c0f4;
    --color-container-bg: #2a475e;
    --color-button: #66c0f4;
    --color-button-hover: #a4d6f5;

    /* Rarity Colors (CS:GO inspired) */
    --rarity-common: #b0c3d9;
    --rarity-uncommon: #5e98d9;
    --rarity-rare: #4b69ff;
    --rarity-mythical: #8847ff;
    --rarity-legendary: #d32ce6;
    --rarity-ancient: #eb4b4b;
    --rarity-exceedingly-rare: #ffd700;
}

body {
    background: transparent !important;
    color: var(--color-text);
    font-family: 'Teko', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    perspective: 1000px;
}

/* OBS Overlay Container - Snappy & Intense Pop Entrance */
.overlay-container {
    text-align: center;
    padding: 1.5rem 2rem;
    opacity: 0;
    transform: translateY(-80px) scale(0.4) rotateX(25deg);
    filter: blur(12px);
    transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4), filter 0.4s ease;
    pointer-events: none;
}

body.overlay-active .overlay-container {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
    filter: blur(0);
    pointer-events: auto;
    animation: containerGlowPulse 2s infinite ease-in-out alternate;
}

/* Smooth Fade-Out of background Spinner Reel when Win Modal Pops Up! */
body.showing-win .overlay-container {
    opacity: 0 !important;
    transform: translateY(-50px) scale(0.85) rotateX(-10deg) !important;
    filter: blur(10px) !important;
    transition: opacity 0.55s ease-in-out, transform 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.55s ease !important;
    pointer-events: none !important;
}

@keyframes containerGlowPulse {
    0% { filter: drop-shadow(0 0 20px rgba(102, 192, 244, 0.4)); }
    100% { filter: drop-shadow(0 0 45px rgba(145, 70, 255, 0.7)); }
}

/* Redeemer Banner - Snappy Drop */
.redeemer-banner {
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #9146ff 0%, #772ce8 100%);
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    padding: 0.65rem 2rem;
    border-radius: 30px;
    margin-bottom: 1.2rem;
    box-shadow: 0 10px 30px rgba(145, 70, 255, 0.7), inset 0 1px 0 rgba(255,255,255,0.5);
    text-transform: none;
    letter-spacing: 0.5px;
    overflow: hidden;
    animation: bannerPopSnappy 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.35) both;
}

.redeemer-banner::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-25deg);
    animation: shineSweep 2.2s infinite;
}

@keyframes shineSweep {
    0% { left: -100%; }
    35%, 100% { left: 200%; }
}

@keyframes bannerPopSnappy {
    0% { transform: translateY(-40px) scale(0.4); opacity: 0; }
    70% { transform: translateY(8px) scale(1.12); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.win-winner-label {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #00f2fe;
    text-shadow: 0 0 20px rgba(0, 242, 254, 0.9), 0 3px 8px rgba(0,0,0,0.9);
    margin-bottom: 0.5rem;
    animation: winnerBounceSnappy 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.3) both;
}

@keyframes winnerBounceSnappy {
    0% { opacity: 0; transform: scale(0.2) translateY(-30px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Jackpot Pulse Aura (Keeps background stream fully visible!) */
body.jackpot-win::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.5) 0%, transparent 60%);
    animation: jackpot-pulse 1s infinite ease-in-out;
}

@keyframes jackpot-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 0.95; }
}

h1 {
    color: var(--color-header);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 2.7rem;
    margin: 0 0 1.5rem 0;
    text-shadow:
        0 0 4px rgba(0, 0, 0, 1),
        0 0 15px var(--color-header),
        0 0 35px rgba(102, 192, 244, 0.8),
        2px 2px 6px rgba(0, 0, 0, 0.9);
}

.spinner-container {
    position: relative;
    width: 80vw;
    max-width: 900px;
    height: 165px;
    background: rgba(8, 12, 18, 0.88);
    border: 2.5px solid rgba(102, 192, 244, 0.7);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
    box-shadow:
        0 12px 45px rgba(0, 0, 0, 0.85),
        0 0 70px rgba(102, 192, 244, 0.3),
        inset 0 0 50px rgba(0, 0, 0, 0.7);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* Ticker Indicator Line */
.ticker {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #00f2fe, #66c0f4, #00f2fe);
    z-index: 10;
    box-shadow: 0 0 16px #00f2fe, 0 0 30px rgba(0, 242, 254, 0.9);
    animation: tickerGlow 1.2s infinite ease-in-out alternate;
}

@keyframes tickerGlow {
    0% { box-shadow: 0 0 10px #00f2fe; }
    100% { box-shadow: 0 0 25px #00f2fe, 0 0 40px #66c0f4; }
}

.spinner-reel {
    display: flex;
    height: 100%;
}

.item {
    flex-shrink: 0;
    width: 180px;
    height: 125px;
    margin: 20px 5px;
    background-color: rgba(0, 0, 0, 0.55);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 8px solid var(--rarity-color, transparent);
    box-shadow:
        0 0 15px var(--rarity-color, transparent),
        inset 0 -45px 35px -20px var(--rarity-color, transparent);
    color: white;
    font-weight: bold;
    text-align: center;
    position: relative;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1), 0 0 6px rgba(0, 0, 0, 0.9);
}

.item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 65%);
    border-radius: 6px;
    z-index: 1;
}

.item-name {
    position: relative;
    z-index: 2;
    font-size: 0.95rem;
    line-height: 1.2;
    padding-bottom: 5px;
}

.rarity-common { --rarity-color: var(--rarity-common); }
.rarity-uncommon { --rarity-color: var(--rarity-uncommon); }
.rarity-rare { --rarity-color: var(--rarity-rare); }
.rarity-mythical { --rarity-color: var(--rarity-mythical); }
.rarity-legendary { --rarity-color: var(--rarity-legendary); }
.rarity-ancient { --rarity-color: var(--rarity-ancient); }
.rarity-exceedingly-rare { --rarity-color: var(--rarity-exceedingly-rare); }

.category-normal,
.category-better {
    background-image: url('https://i.imgur.com/JAb0uIK.png');
}
.category-main {
    background-image: url('https://i.ibb.co/ccKp9z4H/sgold.png');
}

/* Modal Popup - 100% TRANSPARENT BACKGROUND (No grey screen over stream!) */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: transparent !important;
    backdrop-filter: none !important;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.modal-content {
    background-color: transparent;
    padding: 0;
    border-radius: 12px;
    text-align: center;
    position: relative;
    isolation: isolate;
    transform-style: preserve-3d;
}

/* Radial Light Burst around card only */
.modal-content::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 650px; height: 650px;
    margin-top: -325px; margin-left: -325px;
    background: radial-gradient(circle, var(--burst-color, transparent) 0%, transparent 65%);
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    animation: burstPulseSnappy 2s ease-in-out infinite alternate;
}

.modal-content.rarity-uncommon { --burst-color: rgba(94, 152, 217, 0.7); }
.modal-content.rarity-mythical { --burst-color: rgba(136, 71, 255, 0.75); }
.modal-content.rarity-ancient { --burst-color: rgba(235, 75, 75, 0.8); }
.modal-content.rarity-exceedingly-rare { --burst-color: rgba(255, 215, 0, 0.9); }

@keyframes burstPulseSnappy {
    0% { transform: scale(0.85); opacity: 0.7; }
    100% { transform: scale(1.25); opacity: 1; }
}

.modal-content h2 {
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 3.3rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    padding: 0 1rem;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 1), -1px -1px 4px rgba(0, 0, 0, 0.95), 0 0 15px rgba(0, 0, 0, 0.95);
    animation: titleEnterSnappy 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.35) both;
}

@keyframes titleEnterSnappy {
    0% { opacity: 0; transform: translateY(-40px) scale(0.4); letter-spacing: 10px; }
    100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 2px; }
}

.modal-content.rarity-uncommon h2 { text-shadow: 2px 2px 5px #000, 0 0 25px var(--rarity-uncommon); }
.modal-content.rarity-mythical h2 { text-shadow: 2px 2px 5px #000, 0 0 30px var(--rarity-mythical); }
.modal-content.rarity-ancient h2 { text-shadow: 2px 2px 5px #000, 0 0 35px var(--rarity-ancient); }
.modal-content.rarity-exceedingly-rare h2 { text-shadow: 2px 2px 5px #000, 0 0 40px var(--rarity-exceedingly-rare), 0 0 70px var(--rarity-exceedingly-rare); }

@keyframes revealItemSnappy3D {
    0% {
        transform: scale(0.1) rotateX(45deg) translateY(60px);
        opacity: 0;
    }
    65% {
        transform: scale(1.18) rotateX(-5deg) translateY(-8px);
        opacity: 1;
    }
    85% {
        transform: scale(0.96) rotateX(2deg) translateY(0);
    }
    100% {
        transform: scale(1) rotateX(0deg) translateY(0);
        opacity: 1;
    }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 45px 12px var(--rarity-color), inset 0 -50px 50px -20px var(--rarity-color); }
    50% { box-shadow: 0 0 85px 28px var(--rarity-color), inset 0 -60px 60px -10px var(--rarity-color); }
}

@keyframes goldPulse {
    0%, 100% { box-shadow: 0 0 65px 22px #ffd700, 0 0 110px 35px rgba(255, 215, 0, 0.7), inset 0 -50px 60px -20px #ffd700; }
    50% { box-shadow: 0 0 120px 40px #ffd700, 0 0 180px 70px rgba(255, 215, 0, 0.95), inset 0 -60px 70px -10px #ffd700; }
}

#won-item-display .item {
    margin: 1.2rem auto;
    transform-origin: center;
    width: 295px;
    height: 195px;
    animation: revealItemSnappy3D 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.35) both, glowPulse 2.2s ease-in-out 0.6s infinite;
}

#won-item-display .item.rarity-exceedingly-rare {
    animation: revealItemSnappy3D 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.35) both, goldPulse 1.4s ease-in-out 0.6s infinite;
}