/* ========== BASE STYLES ========== */
/* Reset, variables, typography, and utility classes */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

:root {
    --primary: #c41e3a;
    --primary-dark: #8b1528;
    --secondary: #1a472a;
    --secondary-light: #2d5a3d;
    --gold: #d4af37;
    --white: #ffffff;
    --gray: #f5f5f5;
    --dark: #333333;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
    min-height: 100vh;
    color: var(--dark);
}

/* ========== LAYOUT ========== */

.container {
    width: 100%;
    margin: 0 auto;
    padding: 12px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container.loading {
    visibility: hidden;
}

/* ========== TYPOGRAPHY ========== */

h1 {
    color: var(--white);
    text-align: center;
    font-size: 2rem;
    margin-top: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
    color: var(--gold);
    text-align: center;
    font-size: 1rem;
    margin-bottom: 16px;
}

/* ========== UTILITY CLASSES ========== */

.hidden {
    display: none !important;
}

.text-center { text-align: center; }
.text-muted { color: #666; }
.text-white { color: white; }
.text-small { font-size: 0.9rem; }
.text-gold { color: var(--gold); }

.mb-0 { margin-bottom: 0; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }
.mx-auto { margin-left: auto; margin-right: auto; display: block; }

.inline-block { display: inline-block; }
.w-full { width: 100%; }
.flex-1 { flex: 1; }

.flex-row {
    display: flex;
    gap: 10px;
}

.flex-row-8 {
    display: flex;
    gap: 8px;
}

.items-center { align-items: center; }

/* ========== SCREEN SECTIONS ========== */

.screen {
    display: none;
}

.screen.active {
    display: block;
}

/* ========== BACK BUTTON ========== */

.back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--white);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
}

/* ========== RESPONSIVE: BASE ========== */

@media (min-width: 768px) {
    .container {
        padding: 16px;
    }
}