* {
    user-select: none;
}
body {
    background: linear-gradient(135deg, #0a2e1c 0%, #1a4a2a 100%);
    min-height: 100vh;
    font-family: 'Amiri', 'Segoe UI', serif;
    transition: background 0.3s, color 0.3s;
}
body.dark-theme {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
}
body.dark-theme .roulette-card {
    background: rgba(30,30,40,0.95);
    color: #eee;
}
body.dark-theme .result-card {
    background: #2a2a35;
    color: #f0f0f0;
}
.roulette-card {
    background: rgba(255,255,255,0.95);
    border-radius: 60px 60px 40px 40px;
    box-shadow: 0 30px 50px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}
.number-wheel {
    background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
    border-radius: 50%;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 2px 5px rgba(255,255,255,0.1);
    border: 5px solid #d4af37;
    transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.number-wheel.spinning {
    transform: rotate(360deg) scale(1.05);
}
.big-number {
    font-size: 5rem;
    font-weight: bold;
    color: #ffd966;
    text-shadow: 3px 3px 10px rgba(0,0,0,0.7);
    font-family: monospace;
}
.result-card {
    background: #fef9e6;
    border-radius: 30px;
    border-right: 8px solid #d4af37;
    border-bottom: 5px solid #b8902a;
}
.spin-btn {
    background: linear-gradient(90deg, #d4af37, #f3e5ab);
    border: none;
    padding: 12px 30px;
    font-size: 1.3rem;
    font-weight: bold;
    border-radius: 60px;
    color: #2c2c2c;
    box-shadow: 0 5px 0 #8b691b;
    transition: 0.05s linear;
}
.spin-btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #8b691b;
}
.sura-badge {
    background: #1e5631;
    color: #ffecb3;
    border-radius: 40px;
    padding: 6px 18px;
    font-size: 1.2rem;
    font-weight: bold;
}
.gold-text { color: #c9a03d; }
.arabic-text { font-size: 1.8rem; line-height: 1.5; font-family: 'Amiri Quran', serif; }
@media (max-width: 576px) {
    .big-number { font-size: 3rem; }
    .number-wheel { width: 160px; height: 160px; }
    .arabic-text { font-size: 1.3rem; }
}