*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    height:100vh;
    overflow:hidden;
    background:
        radial-gradient(circle at top,#2a0050,#090014 70%);
    font-family:Arial, Helvetica, sans-serif;
    color:white;

    display:flex;
    justify-content:center;
    align-items:center;
}

.background-glow{
    position:absolute;
    width:1200px;
    height:1200px;
    background:
        radial-gradient(circle, rgba(255,0,255,0.2), transparent 70%);
    animation: pulse 4s infinite;
}

@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.2);}
    100%{transform:scale(1);}
}

.slot-machine{
    position:relative;
    z-index:2;

    width:700px;

    background:rgba(0,0,0,0.55);

    border:4px solid #ff00ff;

    border-radius:30px;

    padding:40px;

    box-shadow:
        0 0 20px #ff00ff,
        0 0 60px #00ffff;
}

.title{
    text-align:center;
    font-size:56px;
    margin-bottom:40px;

    text-shadow:
        0 0 10px #fff,
        0 0 30px #ff00ff;
}

.reels-container{
    display:flex;
    justify-content:center;
    gap:20px;

    margin-bottom:40px;
}

.reel{
    width:160px;
    height:160px;

    background:#111;

    border:4px solid #00ffff;

    border-radius:20px;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:90px;

    box-shadow:
        inset 0 0 20px rgba(0,255,255,0.5),
        0 0 20px rgba(0,255,255,0.7);

    transition:
        transform 0.2s,
        background 0.2s;
}

.spinning{
    animation: spinAnim 0.08s infinite;
}

@keyframes spinAnim{
    0%{
        transform:translateY(-8px);
    }

    50%{
        transform:translateY(8px);
    }

    100%{
        transform:translateY(-8px);
    }
}

#spinBtn{
    width:100%;
    padding:20px;

    font-size:32px;
    font-weight:bold;

    border:none;
    border-radius:20px;

    background:
        linear-gradient(45deg,#ff00ff,#00ffff);

    color:white;

    cursor:pointer;

    transition:0.2s;

    box-shadow:
        0 0 20px #ff00ff;
}

#spinBtn:hover{
    transform:scale(1.03);
}

.result-area{
    margin-top:35px;
    text-align:center;
}

#resultTitle{
    font-size:42px;
    margin-bottom:10px;
}

#resultMessage{
    font-size:22px;
    opacity:0.9;
}

#reward{
    margin-top:15px;
    font-size:36px;
    font-weight:bold;
    color:gold;
}

.win-mode{
    animation: rainbow 0.5s infinite;
}

@keyframes rainbow{
    0%{filter:hue-rotate(0deg);}
    100%{filter:hue-rotate(360deg);}
}

#flash{
    position:fixed;
    inset:0;
    pointer-events:none;
}

.flash-active{
    animation: flashbang 0.5s;
}

@keyframes flashbang{
    0%{
        background:rgba(255,255,255,0.9);
    }

    100%{
        background:transparent;
    }
}