@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;900&display=swap');

body {
    font-family: 'Inter', sans-serif;
    /* Prevent pull-to-refresh on mobile */
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

/* Glassmorphism Utilities */
.glass-panel {
    background-color: rgba(253, 251, 247, 0.9); /* cream */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.8); /* slate-200 */
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    border-radius: 1.5rem; /* rounded-3xl */
}
.dark .glass-panel {
    background-color: rgba(15, 23, 42, 0.8); /* slate-900/80 */
    border: 1px solid rgba(30, 41, 59, 0.8); /* slate-800/80 */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.glass-button {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(226, 232, 240, 0.8); /* slate-200 */
    transition: all 0.2s ease-in-out;
}
.dark .glass-button {
    background-color: rgba(30, 41, 59, 0.6); /* slate-800/60 */
    border: 1px solid rgba(51, 65, 85, 0.5); /* slate-700/50 */
}
.glass-button:hover:not(:disabled) {
    background-color: rgba(241, 245, 249, 0.9); /* slate-100 */
    transform: translateY(-2px);
}
.dark .glass-button:hover:not(:disabled) {
    background-color: rgba(51, 65, 85, 0.8); /* slate-700/80 */
}
.glass-button:active:not(:disabled) {
    transform: translateY(1px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(71, 85, 105, 0.5);
    /* slate-600 */
    border-radius: 10px;
}

/* Timer SVG Styling */
.timer-svg {
    transform: rotate(-90deg);
}

.timer-circle-bg {
    fill: none;
    stroke: rgba(51, 65, 85, 0.5);
    /* slate-700/50 */
    stroke-width: 4;
}

.timer-circle-progress {
    fill: none;
    stroke-width: 4;
    stroke-dasharray: 113;
    /* 2 * pi * r (r=18) */
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.1s linear, stroke 0.3s ease;
}

.timer-color-safe {
    stroke: #10b981;
}

/* emerald-500 */
.timer-color-warn {
    stroke: #f59e0b;
}

/* amber-500 */
.timer-color-danger {
    stroke: #e11d48;
}

/* rose-600 */

/* Badges */
.tick-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: bold;
    color: white;
    font-size: 14px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    animation: pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.tick-correct {
    background-color: #10b981;
}

.tick-wrong {
    background-color: #e11d48;
}

/* Option Feedback States */
.option-correct {
    background-color: rgba(16, 185, 129, 0.3) !important;
    border-color: #10b981 !important;
}

.option-correct .letter-bubble {
    background-color: #10b981 !important;
    color: #020617 !important;
}

.option-wrong {
    background-color: rgba(225, 29, 72, 0.3) !important;
    border-color: #e11d48 !important;
    animation: shake 0.4s ease-in-out;
}

.option-wrong .letter-bubble {
    background-color: #e11d48 !important;
    color: white !important;
}

/* Animations */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.4s ease-out forwards;
}

@keyframes toast-slide {
    0% {
        transform: translate(-50%, 100%);
        opacity: 0;
    }

    10% {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    90% {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 100%);
        opacity: 0;
    }
}

.animate-toast {
    animation: toast-slide 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes pop-in {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-5px);
    }

    40%,
    80% {
        transform: translateX(5px);
    }
}

.animate-shake {
    animation: shake 0.4s ease-in-out;
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.15);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.15);
    }
}

.animate-heartbeat {
    animation: heartbeat 0.8s infinite;
}

@keyframes glow-pulse {

    0%,
    100% {
        box-shadow: 0 0 15px currentColor;
    }

    50% {
        box-shadow: 0 0 5px currentColor;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* Background Picker */
.bg-option {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
    background-size: cover;
    background-position: center;
}

.bg-option:hover {
    transform: scale(1.1);
}

.bg-option.selected {
    border-color: #10b981;
    /* emerald-500 */
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.bg-default-1 {
    background: linear-gradient(135deg, #1e1b4b, #4c1d95);
}

.bg-default-2 {
    background: linear-gradient(135deg, #064e3b, #0f766e);
}

.bg-default-3 {
    background: radial-gradient(circle, #334155 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: #0f172a;
}

.bg-default-4 {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
}

.bg-default-5 {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
}

.bg-default-6 {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.bg-default-7 {
    background: linear-gradient(135deg, #166534, #15803d);
}

.bg-default-8 {
    background: linear-gradient(135deg, #db2777, #9333ea);
}

.bg-default-9 {
    background: linear-gradient(135deg, #ef4444, #991b1b);
}

.bg-default-10 {
    background: linear-gradient(135deg, #27272a, #09090b);
}

.bg-default-11 {
    background: repeating-linear-gradient(45deg, #1e293b, #1e293b 10px, #0f172a 10px, #0f172a 20px);
}

.bg-default-12 {
    background: radial-gradient(circle, #f472b6 2px, transparent 2px);
    background-size: 20px 20px;
    background-color: #4c0519;
}

.bg-default-13 {
    background: linear-gradient(135deg, #5eead4, #0f766e);
}

.bg-default-14 {
    background: linear-gradient(135deg, #fde047, #b45309);
}