:root{
    --bone-primary:#2A2A72;
    --bone-secondary:#009FFD;
    --bone-success:#00C897;
    --bone-danger:#FF5151;
    --bone-bg:#f5f7fa;
}

.bone-game-container{
    max-width:1200px;
    margin:20px auto;
    background:linear-gradient(135deg,#f8f9fa,#e9ecef);
    border-radius:15px;
    box-shadow:0 0 20px rgba(0,0,0,.1);
    overflow:hidden;
    font-family:'Tajawal',sans-serif;
}

.bone-header{
    background:#fff;
    padding:15px;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
}

.bone-title{
    color:var(--bone-primary);
    font-size:1.8rem;
}

.bone-score-box{
    margin-top:5px;
    font-size:1.2rem;
}

.bone-question-box{
    margin:15px auto;
    padding:15px;
    background:#fff;
    border-radius:12px;
    border:2px solid var(--bone-primary);
    text-align:center;
    font-size:1.2rem;
}

.bone-game-wrapper{
    display:flex;
    justify-content:center;
    padding:10px;
}

.bone-image-container{
    position:relative;
    max-width:100%;
}

.bone-skeleton-img{
    max-width:100%;
    display:block;
}

.bone-point{
    position:absolute;
    width:20px;
    height:20px;
    background:#fff;
    border:2px solid var(--bone-primary);
    border-radius:50%;
    transform:translate(-50%,-50%);
    cursor:pointer;
    transition:.3s;
}

.bone-point:hover{
    transform:translate(-50%,-50%) scale(1.3);
}

.bone-point.correct{
    background:var(--bone-success);
    border-color:#009688;
}

.bone-point.wrong{
    background:var(--bone-danger);
}

.bone-timer{
    position:fixed;
    top:15px;
    left:15px;
    background:var(--bone-primary);
    color:#fff;
    padding:10px 20px;
    border-radius:30px;
    font-size:1.2rem;
}

.bone-timer.low{
    background:var(--bone-danger);
    animation:pulse 1s infinite;
}

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

/* ===== Leaderboard ===== */
.bone-leaderboard{
    margin:20px;
    background:#fff;
    border-radius:15px;
    padding:15px;
}

.bone-leaderboard table{
    width:100%;
    border-collapse:collapse;
}

.bone-leaderboard th{
    background:var(--bone-primary);
    color:#fff;
    padding:10px;
}

.bone-leaderboard td{
    padding:10px;
    text-align:center;
    border-bottom:1px solid #ddd;
}

.bone-leaderboard tr:nth-child(1){
    background:#FFD70033;
    font-weight:bold;
}

.bone-leaderboard tr:nth-child(2){
    background:#C0C0C033;
}

.bone-leaderboard tr:nth-child(3){
    background:#CD7F3233;
}
.bone-question-box{
    animation:fadeSlide .4s ease;
}

@keyframes fadeSlide{
    from{
        opacity:0;
        transform:translateY(-10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.bone-point{
    box-shadow:0 0 0 rgba(0,0,0,0);
}

.bone-point:hover{
    box-shadow:0 0 15px rgba(0,159,253,.6);
}
.bone-point.correct{
    animation:pop .3s ease;
}

.bone-point.wrong-animation{
    animation:shake .3s ease;
}

@keyframes pop{
    0%{transform:translate(-50%,-50%) scale(1)}
    50%{transform:translate(-50%,-50%) scale(1.4)}
    100%{transform:translate(-50%,-50%) scale(1)}
}

@keyframes shake{
    0%{transform:translate(-50%,-50%)}
    25%{transform:translate(-48%,-50%)}
    50%{transform:translate(-52%,-50%)}
    100%{transform:translate(-50%,-50%)}
}
.bone-start-screen{
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,#2A2A72,#009FFD);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
}

.bone-name-input{
    background:#fff;
    padding:30px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
}

.bone-name-input input{
    padding:10px;
    width:100%;
    margin-bottom:15px;
    border-radius:10px;
    border:1px solid #ccc;
}

.bone-name-input button{
    background:var(--bone-primary);
    color:#fff;
    padding:10px 25px;
    border:none;
    border-radius:25px;
    font-size:1rem;
    cursor:pointer;
}
/* ===== Layout ===== */
.bone-layout{
    display:grid;
    grid-template-columns: 2fr 1fr;
    gap:20px;
    padding:15px;
}

@media(max-width:992px){
    .bone-layout{
        grid-template-columns:1fr;
    }
}

/* اجعل الجدول Sticky */
.bone-leaderboard{
    position:sticky;
    top:20px;
    max-height:70vh;
    overflow:auto;
}

/* Responsive */
@media(max-width:768px){
    .bone-title{font-size:1.4rem}
    .bone-point{width:14px;height:14px}
}