/* ==========================================
   FORM CONTROLS
========================================== */

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

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

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


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

.settings-group{
    margin-bottom:20px;
    margin-top:20px;
    padding:18px;
    background:#181818;
    border:1px solid #2d2d2d;
    border-radius:10px;

}

.settings-group h3{

    margin:0 0 15px;

}

.settings-group label{

    display:block;
    margin-bottom:8px;
    color:#ddd;
    font-weight:600;

}

.settings-option{

    display:flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
    cursor:pointer;
    user-select:none;

}

.settings-option input{

    width:auto;
    accent-color:#4f46e5;

}


/* ==========================================
   COIN STAGE
========================================== */

.coin-stage{

    width:100%;
    height:340px;

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

    position:relative;

    perspective:1200px;

    overflow:hidden;

}


/* ==========================================
   SHADOW
========================================== */

.coin-shadow{

    position:absolute;

    width:180px;
    height:38px;

    border-radius:50%;

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

    filter:blur(18px);

    bottom:48px;

    transition:.3s;

}


/* ==========================================
   3D COIN
========================================== */

.coin{

    position:relative;

    width:220px;
    height:220px;

    transform-style:preserve-3d;

    transition:transform .5s;

}


/* ==========================================
   COIN FACES
========================================== */

.coin-face{

    position:absolute;

    inset:0;

    border-radius:50%;

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

    backface-visibility:hidden;

    border:10px solid #b67d00;

    box-sizing:border-box;

    box-shadow:

        inset 0 0 0 4px rgba(255,255,255,.25),

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

        inset 0 -18px 35px rgba(0,0,0,.35),

        0 15px 35px rgba(0,0,0,.45);

}


/* ==========================================
   HEADS
========================================== */

.heads{

    background:

    radial-gradient(circle at 35% 30%,

        #fff6b8 0%,

        #ffd966 18%,

        #f7b500 58%,

        #b67d00 100%);

    transform:translateZ(8px);

}


/* ==========================================
   TAILS
========================================== */

.tails{

    background:
    radial-gradient(circle at 65% 35%,
        #fff3aa,
        #ffd04d,
        #d99600,
        #946400);

    transform:
        translateZ(8px)
        rotateX(180deg);

}


/* ==========================================
   COIN INNER
========================================== */

.coin-inner{

    width:82%;
    height:82%;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    border:4px solid rgba(255,255,255,.35);

    background:

    radial-gradient(circle,

    rgba(255,255,255,.18),

    rgba(255,255,255,.03));

}


/* ==========================================
   SYMBOL
========================================== */

.coin-symbol{

    font-size:70px;

    font-weight:900;

    color:#7b5100;

    line-height:1;

    text-shadow:

        0 2px 2px rgba(255,255,255,.4),

        0 4px 10px rgba(0,0,0,.35);

}


/* ==========================================
   TEXT
========================================== */

.coin-text{

    margin-top:12px;

    font-size:22px;

    font-weight:800;

    letter-spacing:3px;

    color:#704900;

}


/* ==========================================
   RESULT BOX
========================================== */

.winner-box{

    margin-top:10px;

    margin-bottom:25px;

    padding:18px;

    text-align:center;

    border-radius:12px;

    background:#181818;

    border:1px solid #303030;

}

#result{

    margin-top:10px;

    font-size:34px;

    font-weight:bold;

    color:#10b981;

}


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

.history-list{

    list-style:none;

    margin:20px 0 0;

    padding:0;

    max-height:250px;

    overflow:auto;

}

.history-list li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 12px;

    margin-bottom:10px;

    background:#191919;

    border:1px solid #2d2d2d;

    border-radius:8px;

}


/* ==========================================
   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;

}

.stats-row strong{

    text-align:right;

}


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

.modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(5px);

    z-index:99999;

}

.modal.hidden{

    display:none;

}

.modal-box{

    width:340px;

    max-width:92%;

    padding:25px;

    border-radius:16px;

    background:#111;

    color:#fff;

    text-align:center;

    border:1px solid #2d2d2d;

}


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

@media(max-width:700px){

    .coin{

        width:180px;
        height:180px;

    }

    .coin-symbol{

        font-size:58px;

    }

    .coin-text{

        font-size:18px;

    }

    #result{

        font-size:28px;

    }

}

@media(max-width:480px){

    .coin{

        width:150px;
        height:150px;

    }

    .coin-stage{

        height:260px;

    }

    .coin-shadow{

        width:120px;

    }

}

#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;
}