/* ═══════════════════════════════════════
   Base Reset & Shared Styles
   ═══════════════════════════════════════ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
}

body.modal-open,
body.locked {
    overflow: hidden;
}

/* ── Ambient Glow ── */
.ambient-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(201, 169, 110, 0.15), transparent 28%),
        radial-gradient(circle at 85% 15%, rgba(212, 160, 160, 0.11), transparent 26%),
        radial-gradient(circle at 50% 80%, rgba(138, 158, 138, 0.10), transparent 30%);
}

/* ── Particles ── */
.particles-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.particle {
    position: absolute;
    pointer-events: none;
    animation: floatUp 6s linear infinite;
    opacity: 0;
}

@keyframes floatUp {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-10vh) scale(1.5);
        opacity: 0;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%,
    100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

@keyframes bounce {
    to {
        transform: translateY(-12px);
    }
}

@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-6px);
    }
    75% {
        transform: translateX(6px);
    }
}

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

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: 3px;
}

/* ── Container ── */
.container {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}