/* ==========================================
   SPIN WHEEL TOOL
========================================== */

textarea,
input,
select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background: #1b1b1b;
    color: #fff;
    border: 1px solid #333;
    box-sizing: border-box;
}

textarea {
    height: 320px;
    resize: vertical;
    font-family: inherit;
}


.btn-group{
    margin-top:20px;
}

.btn-group button{
    margin-bottom:8px;
}

/* ==========================================
   WHEEL
========================================== */

.wheel-container{

    position:relative;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:20px;

    margin-bottom:25px;

}

#wheel{

    width:100%;

    max-width:600px;

    aspect-ratio:1;

    border-radius:50%;

    background:#181818;

    border:8px solid #2b2b2b;

    box-shadow:

        0 0 25px rgba(79,70,229,.25),

        inset 0 0 25px rgba(255,255,255,.04);

}

/* ==========================================
   POINTER
========================================== */

#pointer{

    position:absolute;

    top:-12px;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:0;

    border-left:18px solid transparent;

    border-right:18px solid transparent;

    border-top:42px solid #ef4444;

    z-index:999;

    filter:drop-shadow(0 0 8px rgba(239,68,68,.5));

}

/* ==========================================
   WINNER
========================================== */

.winner-box{

    text-align:center;

    padding:18px;

    border-radius:12px;

    background:#181818;

    border:1px solid #303030;

    margin-bottom:25px;

}

.winner-box h3{

    margin-bottom:12px;

}

#winner{

    font-size:30px;

    font-weight:bold;

    color:#10b981;

    word-break:break-word;

}

/* ==========================================
   HISTORY
========================================== */

.history-list{

    list-style:none;

    padding:0;

    margin:20px 0 0;

    max-height:250px;

    overflow:auto;

}

.history-list li{

    background:#191919;

    border:1px solid #2d2d2d;

    border-radius:8px;

    padding:10px 12px;

    margin-bottom:10px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    transition:.2s;

}

.history-list li:hover{

    background:#232323;

}

/* ==========================================
   WHEEL STATS
========================================== */

.wheel-stats{

    margin-top:20px;

}

.stats-row{

    display:grid;

    grid-template-columns:1fr 140px;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #2d2d2d;

}

.stats-row span{

    color:#cfcfcf;

    font-weight:500;

    margin:0;

}

.stats-row strong{

    display:block;

    text-align:right;

    font-weight:700;

    color:#fff;

    margin:0;

    line-height:1.4;

}

/* ==========================================
   MODAL
========================================== */

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.7);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    backdrop-filter:blur(5px);

}

.modal.hidden{

    display:none;

}

.modal-box{

    width:340px;

    max-width:92%;

    background:#111;

    border-radius:16px;

    padding:25px;

    text-align:center;

    color:white;

    border:1px solid #2d2d2d;

    animation:popup .25s ease;

}

@keyframes popup{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ==========================================
   GLOW EFFECT
========================================== */

.glow{

    animation:glow 1s infinite alternate;

}

@keyframes glow{

    from{

        text-shadow:

        0 0 10px #10b981,

        0 0 25px #10b981;

    }

    to{

        text-shadow:

        0 0 25px #10b981,

        0 0 60px #10b981;

    }

}

/* ==========================================
   SPINNING EFFECT
========================================== */

.spinning{

    filter:

        drop-shadow(0 0 20px rgba(79,70,229,.35));

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:900px){

    #wheel{

        max-width:450px;

    }

}

@media(max-width:700px){

    #wheel{

        max-width:340px;

    }

    #winner{

        font-size:22px;

    }

}

@media(max-width:480px){

    textarea{

        height:240px;

    }

    #wheel{

        max-width:300px;

    }

    #pointer{

        border-left:14px solid transparent;

        border-right:14px solid transparent;

        border-top:32px solid #ef4444;

    }

}

/* ==========================================
   SETTINGS CHECKBOXES
========================================== */

input[type="checkbox"]{
    width:auto;
    height:18px;
    margin:0;
    padding:0;
    flex-shrink:0;
    accent-color:#4f46e5;
    cursor:pointer;
}

.settings-option{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:14px;

    cursor:pointer;

    user-select:none;

    color:#ddd;

    font-size:15px;

    font-weight:500;

}

.settings-option:hover{

    color:#fff;

}

.settings-group{

    margin-top:20px;
    margin-bottom:20px;

    padding:18px;

    border:1px solid #2d2d2d;

    border-radius:10px;

    background:#181818;

}

.settings-group h3{

    margin:0 0 15px;

    font-size:16px;

}

/* Force identical rendering for stats values */

#entryCount,
#winnerCount,
#status{
    display:inline-block !important;
    width:140px;
    text-align:right;
    margin:0 !important;
    padding:0 !important;
    font:700 16px/1 Arial, sans-serif !important;
    vertical-align:middle !important;
    transform:none !important;
}