@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Cinzel+Decorative:wght@400;700;900&family=Almendra:ital,wght@0,400;0,700;1,400;1,700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
    --parchment: #f4e4c1;
    --parchment-dark: #d4c4a1;
    --parchment-light: #faf3e3;
    --ink: #1a0f00;
    --ink-light: #3d2b1f;
    --gold: #c9a84c;
    --gold-bright: #ffd700;
    --gold-dark: #8b6914;
    --crimson: #8b1a1a;
    --crimson-light: #a52a2a;
    --royal-blue: #1a3a5c;
    --royal-blue-light: #2a5a8c;
    --forest: #2d4a2d;
    --forest-light: #3d6a3d;
    --bronze: #cd7f32;
    --silver: #c0c0c0;
    --wood: #5c3a1e;
    --wood-dark: #3a200e;
    --stone: #6b6b6b;
    --stone-light: #8b8b8b;
    --shadow: rgba(10, 5, 0, 0.6);
    --glow-gold: rgba(201, 168, 76, 0.4);
    --glow-crimson: rgba(139, 26, 26, 0.3);

    /* Theme tokens (dark defaults) */
    --theme-bg:             #0d0a06;
    --theme-surface:        rgba(244, 228, 193, 0.04);
    --theme-surface-hd:     rgba(244, 228, 193, 0.06);
    --theme-section-head:   rgba(201, 168, 76, 0.06);
    --theme-border:         rgba(201, 168, 76, 0.15);
    --theme-border-hd:      rgba(201, 168, 76, 0.20);
    --theme-input-bg:       rgba(10, 5, 0, 0.5);
    --theme-text:           #f4e4c1;
    --theme-text-muted:     #d4c4a1;
    --theme-save-bar:       linear-gradient(0deg, rgba(13,10,6,.97) 0%, rgba(20,14,6,.95) 100%);
    --theme-save-border:    rgba(201, 168, 76, 0.2);
    --theme-toggle-off:     rgba(60, 60, 60, 0.5);
    --theme-toggle-knob:    #8b8b8b;
    --theme-slider-track:   rgba(60, 60, 60, 0.5);
    --theme-pill-text:      #d4c4a1;
    --theme-pill-border:    rgba(201, 168, 76, 0.2);
    --theme-scrollbar-track: #3a200e;
}

/* ---- LIGHT THEME ---- */
[data-theme="light"] {
    --parchment:        #1a0f00;
    --parchment-dark:   #4a2e18;
    --parchment-light:  #0d0800;
    --ink:              #f0ddc0;
    --ink-light:        #d4b896;
    --stone:            #7a6a58;
    --stone-light:      #5a4a38;
    --shadow:           rgba(80, 50, 20, 0.25);
    --glow-gold:        rgba(160, 110, 20, 0.35);
    --gold:             #9a7018;
    --gold-bright:      #c09030;
    --gold-dark:        #6b5010;
    --wood:             #8b5e34;
    --wood-dark:        #6b4020;

    /* Theme tokens overrides for light */
    --theme-bg:             #f0e2c8;
    --theme-surface:        rgba(255, 246, 220, 0.80);
    --theme-surface-hd:     rgba(255, 246, 220, 0.90);
    --theme-section-head:   rgba(160, 110, 20, 0.09);
    --theme-border:         rgba(139, 90, 20, 0.22);
    --theme-border-hd:      rgba(139, 90, 20, 0.30);
    --theme-input-bg:       rgba(255, 250, 235, 0.92);
    --theme-text:           #1a0f00;
    --theme-text-muted:     #4a2e18;
    --theme-save-bar:       linear-gradient(0deg, rgba(235,218,185,.97) 0%, rgba(245,230,198,.95) 100%);
    --theme-save-border:    rgba(139, 90, 20, 0.25);
    --theme-toggle-off:     rgba(180, 150, 100, 0.40);
    --theme-toggle-knob:    #9a7050;
    --theme-slider-track:   rgba(180, 150, 100, 0.45);
    --theme-pill-text:      #4a2e18;
    --theme-pill-border:    rgba(139, 90, 20, 0.22);
    --theme-scrollbar-track: #d4b896;
}

[data-theme="light"] body {
    background: var(--theme-bg);
    color: #1a0f00;
}

[data-theme="light"] .bg-layer--base {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(26, 58, 92, 0.09) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, rgba(139, 26, 26, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(45, 74, 45, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, #f0e2c8 0%, #e4d0b0 40%, #f0e2c8 100%);
}

[data-theme="light"] .bg-layer--vignette {
    background: radial-gradient(ellipse at center, transparent 40%, rgba(100, 65, 20, 0.12) 100%);
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--theme-scrollbar-track);
}

/* Cards & surfaces */
[data-theme="light"] .auth-card {
    background: rgba(255, 246, 220, 0.88);
    border-color: rgba(139, 90, 20, 0.28);
    box-shadow: 0 20px 60px rgba(100, 60, 20, 0.22), inset 0 1px 0 rgba(201, 168, 76, 0.18);
}

[data-theme="light"] .top-bar {
    background: rgba(255, 246, 220, 0.82);
    border-color: rgba(139, 90, 20, 0.22);
}

[data-theme="light"] .mode-card {
    background: rgba(255, 246, 220, 0.72);
    border-color: rgba(139, 90, 20, 0.18);
}
[data-theme="light"] .mode-card:hover {
    border-color: var(--gold);
    box-shadow: 0 12px 40px rgba(100, 60, 20, 0.20), 0 0 18px rgba(160, 110, 20, 0.22);
}

[data-theme="light"] .stat-box {
    background: rgba(255, 246, 220, 0.70);
    border-color: rgba(139, 90, 20, 0.15);
}

/* Settings page */
[data-theme="light"] .settings-section {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="light"] .section-header {
    background: var(--theme-section-head) !important;
    border-bottom-color: var(--theme-border) !important;
}

[data-theme="light"] .setting-row {
    border-bottom-color: var(--theme-border) !important;
}

[data-theme="light"] .preview-box {
    background: rgba(255, 246, 220, 0.70) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="light"] .save-bar {
    background: var(--theme-save-bar) !important;
    border-top-color: var(--theme-save-border) !important;
}

[data-theme="light"] .saved-toast {
    background: rgba(45, 100, 45, 0.88);
    border-color: rgba(100, 200, 100, 0.4);
}

/* Inputs & controls */
[data-theme="light"] .form-group input,
[data-theme="light"] .num-input {
    background: var(--theme-input-bg);
    border-color: var(--theme-border-hd);
    color: #1a0f00;
}
[data-theme="light"] .form-group input::placeholder { color: rgba(74, 46, 24, 0.35); }

[data-theme="light"] .setting-select {
    background: var(--theme-input-bg);
    border-color: var(--theme-border-hd);
    color: #1a0f00;
}
[data-theme="light"] .setting-select option {
    background: #f0e2c8;
    color: #1a0f00;
}

[data-theme="light"] .toggle {
    background: var(--theme-toggle-off);
    border-color: rgba(139, 90, 20, 0.25);
}
[data-theme="light"] .toggle::after { background: var(--theme-toggle-knob); }
[data-theme="light"] .toggle:checked { background: rgba(45, 100, 45, 0.55); border-color: rgba(80, 160, 80, 0.4); }

[data-theme="light"] .range-slider { background: var(--theme-slider-track); }

[data-theme="light"] .pill {
    color: var(--theme-pill-text);
    border-color: var(--theme-pill-border);
}
[data-theme="light"] .pill:hover { border-color: var(--gold); color: var(--gold); }
[data-theme="light"] .pill.active {
    background: rgba(139, 90, 20, 0.15);
    border-color: var(--gold);
    color: var(--gold-dark);
}

/* Level / XP */
[data-theme="light"] .xp-track { background: rgba(100, 60, 20, 0.18); border-color: rgba(139, 90, 20, 0.18); }

/* Auth tabs */
[data-theme="light"] .auth-tabs { border-bottom-color: rgba(139, 90, 20, 0.22); }
[data-theme="light"] .auth-tab { color: #7a5a38; }
[data-theme="light"] .auth-tab:hover { color: #1a0f00; }
[data-theme="light"] .auth-tab.active { color: var(--gold); }

/* Page footer */
[data-theme="light"] .page-footer { color: #9a7050; }

/* ---- ACCESSIBILITY: COLORBLIND MODE ---- */
/* Replace red/green with blue/orange so deuteranopes and protanopes can distinguish them */
[data-colorblind="1"] .ans-btn.correct {
    border-color: #5599ff !important;
    background: rgba(20, 60, 180, .28) !important;
    color: #aaccff !important;
}
[data-colorblind="1"] .ans-btn.correct::after { content: ' ✓'; }
[data-colorblind="1"] .ans-btn.wrong {
    border-color: #ffaa33 !important;
    background: rgba(160, 90, 0, .28) !important;
    color: #ffd59a !important;
}
[data-colorblind="1"] .ans-btn.wrong::after { content: ' ✗'; }
/* tribe_battle reveal */
[data-colorblind="1"] .ans-btn.reveal {
    border-color: #5599ff !important;
    background: rgba(20, 60, 180, .18) !important;
}
/* status text */
[data-colorblind="1"] .q-status.good { color: #5599ff !important; }
[data-colorblind="1"] .q-status.bad  { color: #ffaa33 !important; }

/* ---- ACCESSIBILITY: LARGE TEXT ---- */
[data-large-text="1"] .ans-btn { font-size: 1.05rem !important; line-height: 1.45 !important; }
[data-large-text="1"] .q-text  { font-size: 1.1rem  !important; line-height: 1.6  !important; }
/* vs_bot question card */
[data-large-text="1"] .question-wrap { font-size: 1.1rem !important; }
[data-large-text="1"] .question-wrap p,
[data-large-text="1"] .question-wrap span { font-size: 1.1rem !important; }
/* settings preview */
[data-large-text="1"] .preview-box { font-size: 1.25rem !important; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'EB Garamond', 'Georgia', serif;
    color: var(--ink);
    min-height: 100vh;
    overflow-x: hidden;
    background: #0d0a06;
}

/* ---- BACKGROUND ---- */
.bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bg-layer--base {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(26, 58, 92, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, rgba(139, 26, 26, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(45, 74, 45, 0.2) 0%, transparent 50%),
        linear-gradient(180deg, #0d0a06 0%, #1a1008 40%, #0d0a06 100%);
}
.bg-layer--texture {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a84c' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.bg-layer--vignette { background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.7) 100%); }

/* ---- PARTICLES ---- */
.particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.particle {
    position: absolute; width: 3px; height: 3px;
    background: var(--gold); border-radius: 50%; opacity: 0;
    animation: floatUp 8s ease-in-out infinite;
}
@keyframes floatUp {
    0% { opacity: 0; transform: translateY(100vh) scale(0); }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { opacity: 0; transform: translateY(-10vh) scale(1); }
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--wood-dark); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gold-dark), var(--gold), var(--gold-dark));
    border-radius: 4px;
}

/* ---- PAGE WRAPPER ---- */
.page-wrapper {
    position: relative; z-index: 1; min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem;
}

/* ---- ORNAMENTAL BORDERS ---- */
.ornament-top, .ornament-bottom {
    position: fixed; left: 0; right: 0; height: 6px; z-index: 100;
    background: linear-gradient(90deg,
        transparent 0%, var(--gold-dark) 10%, var(--gold-bright) 30%,
        var(--gold) 50%, var(--gold-bright) 70%, var(--gold-dark) 90%, transparent 100%);
}
.ornament-top { top: 0; }
.ornament-bottom { bottom: 0; }
.ornament-top::after, .ornament-bottom::after {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    width: 40px; height: 40px; background: var(--gold);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.ornament-top::after { top: 3px; }
.ornament-bottom::after { bottom: 3px; }

/* ---- TITLE ---- */
.game-title { text-align: center; margin-bottom: 2rem; }
.game-title h1 {
    font-family: 'Cinzel Decorative', 'Cinzel', serif; font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.5rem); color: var(--gold);
    text-shadow: 0 0 20px var(--glow-gold), 0 2px 4px rgba(0,0,0,0.8), 0 0 60px rgba(201, 168, 76, 0.2);
    letter-spacing: 0.08em; line-height: 1.2;
}
.game-title .subtitle {
    font-family: 'Almendra', serif; font-style: italic;
    font-size: clamp(0.9rem, 2vw, 1.2rem); color: var(--parchment-dark);
    margin-top: 0.5rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.8;
}

/* ---- CROSS DIVIDER ---- */
.cross-divider {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    margin: 1.5rem 0; color: var(--gold-dark); font-size: 0.8rem; opacity: 0.6;
}
.cross-divider::before, .cross-divider::after {
    content: ''; height: 1px; width: 80px;
    background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
}

/* ---- AUTH ---- */
.auth-container { width: 100%; max-width: 460px; animation: fadeInUp 0.8s ease-out; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.auth-card {
    background: linear-gradient(135deg, rgba(244, 228, 193, 0.06) 0%, rgba(201, 168, 76, 0.04) 100%);
    border: 1px solid rgba(201, 168, 76, 0.2); border-radius: 4px;
    padding: 2.5rem 2rem; position: relative; backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(201, 168, 76, 0.15);
}
.auth-card::before, .auth-card::after {
    content: ''; position: absolute; width: 30px; height: 30px;
    border-color: var(--gold-dark); border-style: solid; opacity: 0.5;
}
.auth-card::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.auth-card::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }

.auth-tabs { display: flex; gap: 0; margin-bottom: 2rem; border-bottom: 1px solid rgba(201, 168, 76, 0.2); }
.auth-tab {
    flex: 1; padding: 0.8rem 1rem; background: none; border: none;
    font-family: 'Cinzel', serif; font-weight: 600; font-size: 0.95rem;
    color: var(--stone-light); cursor: pointer; transition: all 0.3s;
    position: relative; letter-spacing: 0.05em;
}
.auth-tab::after {
    content: ''; position: absolute; bottom: -1px; left: 10%; right: 10%;
    height: 2px; background: var(--gold); transform: scaleX(0); transition: transform 0.3s;
}
.auth-tab:hover { color: var(--parchment); }
.auth-tab.active { color: var(--gold); }
.auth-tab.active::after { transform: scaleX(1); }

/* ---- FORM ---- */
.form-group { margin-bottom: 1.2rem; }
.form-group label {
    display: block; font-family: 'Cinzel', serif; font-weight: 500;
    font-size: 0.8rem; color: var(--parchment-dark); margin-bottom: 0.4rem;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.form-group input {
    width: 100%; padding: 0.75rem 1rem;
    background: rgba(10, 5, 0, 0.5); border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 3px; color: var(--parchment);
    font-family: 'EB Garamond', serif; font-size: 1.05rem;
    transition: all 0.3s; outline: none;
}
.form-group input::placeholder { color: rgba(212, 196, 161, 0.3); font-style: italic; }
.form-group input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 12px var(--glow-gold), inset 0 0 6px rgba(201, 168, 76, 0.05);
}

/* ---- BUTTONS ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.85rem 2rem; border: none; border-radius: 3px;
    font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.9rem;
    letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
    transition: all 0.3s; position: relative; overflow: hidden; text-decoration: none;
}
.btn::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    pointer-events: none;
}
.btn-primary {
    width: 100%;
    background: linear-gradient(180deg, var(--crimson-light) 0%, var(--crimson) 100%);
    color: var(--parchment-light); border: 1px solid rgba(201, 168, 76, 0.3);
    box-shadow: 0 4px 15px rgba(139, 26, 26, 0.4);
}
.btn-primary:hover {
    background: linear-gradient(180deg, #b83030 0%, var(--crimson-light) 100%);
    box-shadow: 0 4px 25px rgba(139, 26, 26, 0.6), 0 0 15px var(--glow-gold);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(139, 26, 26, 0.4); }
.btn-gold {
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: var(--ink); border: 1px solid rgba(255, 215, 0, 0.4);
    box-shadow: 0 4px 15px rgba(201, 168, 76, 0.3);
}
.btn-gold:hover { box-shadow: 0 4px 25px rgba(201, 168, 76, 0.5), 0 0 20px var(--glow-gold); transform: translateY(-1px); }
.btn-royal {
    background: linear-gradient(180deg, var(--royal-blue-light) 0%, var(--royal-blue) 100%);
    color: var(--parchment-light); border: 1px solid rgba(201, 168, 76, 0.2);
    box-shadow: 0 4px 15px rgba(26, 58, 92, 0.4);
}
.btn-royal:hover { box-shadow: 0 4px 25px rgba(26, 58, 92, 0.6), 0 0 15px var(--glow-gold); transform: translateY(-1px); }
.btn-forest {
    background: linear-gradient(180deg, var(--forest-light) 0%, var(--forest) 100%);
    color: var(--parchment-light); border: 1px solid rgba(201, 168, 76, 0.2);
    box-shadow: 0 4px 15px rgba(45, 74, 45, 0.4);
}
.btn-forest:hover { box-shadow: 0 4px 25px rgba(45, 74, 45, 0.6), 0 0 15px var(--glow-gold); transform: translateY(-1px); }
.btn-wood {
    background: linear-gradient(180deg, var(--wood) 0%, var(--wood-dark) 100%);
    color: var(--parchment); border: 1px solid rgba(201, 168, 76, 0.2);
    box-shadow: 0 4px 15px rgba(92, 58, 30, 0.4);
}
.btn-wood:hover { box-shadow: 0 4px 25px rgba(92, 58, 30, 0.6), 0 0 15px var(--glow-gold); transform: translateY(-1px); }

/* ---- MESSAGES ---- */
.msg {
    padding: 0.75rem 1rem; border-radius: 3px; font-size: 0.9rem;
    margin-bottom: 1.2rem; text-align: center; font-family: 'EB Garamond', serif;
}
.msg-error { background: rgba(139, 26, 26, 0.2); border: 1px solid rgba(139, 26, 26, 0.4); color: #e88; }
.msg-success { background: rgba(45, 74, 45, 0.2); border: 1px solid rgba(45, 74, 45, 0.4); color: #8e8; }

/* ---- DASHBOARD ---- */
.dashboard-wrapper { width: 100%; max-width: 1100px; padding: 1rem; }

.top-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(244, 228, 193, 0.04); border: 1px solid rgba(201, 168, 76, 0.15);
    border-radius: 4px; margin-bottom: 2rem; backdrop-filter: blur(8px);
}
.top-bar-left { display: flex; align-items: center; gap: 1.5rem; }
.user-info { display: flex; align-items: center; gap: 0.8rem; }
.user-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    border: 2px solid var(--gold-dark);
    background: linear-gradient(135deg, var(--crimson) 0%, var(--wood-dark) 100%);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cinzel Decorative', serif; font-weight: 700;
    font-size: 1.2rem; color: var(--gold); box-shadow: 0 0 10px var(--glow-gold);
}
.user-details .user-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1rem; color: var(--parchment); }
.user-details .user-title { font-family: 'Almendra', serif; font-style: italic; font-size: 0.8rem; color: var(--gold-dark); }
.user-currency { display: flex; gap: 1rem; }
.currency-item {
    display: flex; align-items: center; gap: 0.35rem;
    font-family: 'Cinzel', serif; font-weight: 600; font-size: 0.85rem;
}
.currency-item .coin-icon { filter: grayscale(0.85) brightness(1.5); }
.currency-item .siclu-icon { color: #c9a84c; }
.currency-item .gem-icon { color: #7b68ee; }
.currency-item span:last-child { color: var(--parchment); }
.top-bar-right { display: flex; align-items: center; gap: 0.8rem; }
.top-bar-right .btn { padding: 0.5rem 1.2rem; font-size: 0.75rem; }
.top-nav-btn { flex: 1; width: auto !important; font-size: 0.7rem !important; padding: 0.5rem 0.5rem !important; text-align: center; white-space: nowrap; }

/* ---- LEVEL BAR ---- */
.level-bar { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 2.5rem; padding: 0 0.5rem; }
.level-badge {
    font-family: 'Cinzel Decorative', serif; font-weight: 700; font-size: 1rem;
    color: var(--gold); white-space: nowrap; text-shadow: 0 0 8px var(--glow-gold);
}
.xp-track {
    flex: 1; height: 8px; background: rgba(10, 5, 0, 0.6);
    border: 1px solid rgba(201, 168, 76, 0.15); border-radius: 4px; overflow: hidden;
}
.xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright), var(--gold));
    border-radius: 4px; transition: width 0.6s ease; position: relative;
}
.xp-fill::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 60%);
}
.xp-text { font-family: 'Cinzel', serif; font-size: 0.75rem; color: var(--parchment-dark); white-space: nowrap; }

/* ---- GAME MODE CARDS ---- */
.game-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2.5rem; }
.mode-card {
    position: relative;
    background: rgba(244, 228, 193, 0.04); border: 1px solid rgba(201, 168, 76, 0.15);
    border-radius: 4px; padding: 2rem 1.5rem; text-align: center;
    cursor: pointer; transition: all 0.4s; overflow: hidden; text-decoration: none; display: block;
}
.mode-card::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s; }
.mode-card:nth-child(1)::before { background: radial-gradient(ellipse at center, rgba(139, 26, 26, 0.15) 0%, transparent 70%); }
.mode-card:nth-child(2)::before { background: radial-gradient(ellipse at center, rgba(26, 58, 92, 0.15) 0%, transparent 70%); }
.mode-card:nth-child(3)::before { background: radial-gradient(ellipse at center, rgba(45, 74, 45, 0.15) 0%, transparent 70%); }
.mode-card:hover::before { opacity: 1; }
.mode-card:hover {
    border-color: var(--gold); transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 20px var(--glow-gold);
}
.mode-icon { font-size: 3rem; margin-bottom: 1rem; display: block; filter: drop-shadow(0 0 10px var(--glow-gold)); }
.mode-card h3 {
    font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.15rem;
    color: var(--parchment); margin-bottom: 0.5rem; letter-spacing: 0.05em;
}
.mode-card p { font-family: 'EB Garamond', serif; font-size: 0.9rem; color: var(--parchment-dark); opacity: 0.7; line-height: 1.4; }
.mode-badge {
    display: inline-block; margin-top: 1rem; padding: 0.3rem 0.8rem; border-radius: 2px;
    font-family: 'Cinzel', serif; font-weight: 600; font-size: 0.65rem;
    letter-spacing: 0.1em; text-transform: uppercase;
}
.badge-crimson { background: rgba(139, 26, 26, 0.3); color: #e88; border: 1px solid rgba(139, 26, 26, 0.4); }
.badge-royal { background: rgba(26, 58, 92, 0.3); color: #8ae; border: 1px solid rgba(26, 58, 92, 0.4); }
.badge-forest { background: rgba(45, 74, 45, 0.3); color: #8e8; border: 1px solid rgba(45, 74, 45, 0.4); }

/* ---- STATS ---- */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
.stat-box {
    background: rgba(244, 228, 193, 0.03); border: 1px solid rgba(201, 168, 76, 0.1);
    border-radius: 3px; padding: 1rem; text-align: center;
}
.stat-box .stat-value {
    font-family: 'Cinzel Decorative', serif; font-weight: 700; font-size: 1.5rem;
    color: var(--gold); text-shadow: 0 0 6px var(--glow-gold);
}
.stat-box .stat-label {
    font-family: 'Cinzel', serif; font-size: 0.65rem; color: var(--parchment-dark);
    text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.3rem; opacity: 0.6;
}

.bottom-nav { display: flex; gap: 1rem; justify-content: center; }
.bottom-nav .btn { min-width: 160px; }

/* ---- ADUNAREA CETĂȚII CARD ---- */
.assembly-card {
    position: relative;
    background: rgba(201, 168, 76, 0.06);
    border: 1px solid rgba(201, 168, 76, 0.28);
    overflow: hidden;
}
.assembly-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(201,168,76,0.10) 0%, transparent 70%);
    pointer-events: none;
}
.assembly-card:hover {
    border-color: rgba(201,168,76,0.7);
    box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 28px rgba(201,168,76,0.25);
}
.assembly-torches {
    position: absolute; top: 0.7rem; left: 0; right: 0;
    display: flex; justify-content: space-between; padding: 0 1rem;
    pointer-events: none;
}
.assembly-torch {
    font-size: 1.3rem;
    animation: torchFlicker 1.8s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 6px rgba(255,160,30,0.8));
}
.assembly-torch.right { animation-delay: 0.6s; }
@keyframes torchFlicker {
    0%   { transform: scaleX(1)   scaleY(1)   rotate(-2deg); opacity: 0.9; }
    40%  { transform: scaleX(0.9) scaleY(1.1) rotate(1deg);  opacity: 1;   }
    70%  { transform: scaleX(1.1) scaleY(0.95) rotate(-1deg); opacity: 0.85; }
    100% { transform: scaleX(1)   scaleY(1.05) rotate(2deg); opacity: 0.95; }
}
.assembly-silhouettes {
    display: flex; justify-content: center; align-items: flex-end;
    gap: 0.1rem; margin: 1.6rem 0 0;
    filter: drop-shadow(0 0 8px rgba(201,168,76,0.3));
}
.sil {
    font-size: 1.5rem; opacity: 0.55;
    animation: silBreathe 3s ease-in-out infinite;
    display: inline-block;
}
.sil-1 { animation-delay: 0s;    font-size: 1.3rem; }
.sil-2 { animation-delay: 0.4s;  font-size: 1.55rem; }
.sil-3 { animation-delay: 0.8s;  font-size: 1.7rem; opacity: 0.75; }
.sil-4 { animation-delay: 1.2s;  font-size: 1.55rem; }
.sil-5 { animation-delay: 1.6s;  font-size: 1.3rem; }
@keyframes silBreathe {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-3px); }
}
.assembly-stats {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.4rem 0.9rem; margin: 0.4rem 0 0.3rem;
    font-family: 'EB Garamond', serif; font-size: 0.82rem;
    color: var(--parchment-dark); opacity: 0.85;
}
.asm-stat { display: flex; align-items: center; gap: 0.3rem; }
.asm-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #555; display: inline-block;
}
.asm-dot.online {
    background: #5ec45e;
    box-shadow: 0 0 5px #5ec45e;
    animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.4); opacity: 0.6; }
}
.asm-alert { color: #e8c060; font-weight: 600; }
.assembly-top3 {
    width: 100%; margin-top: 0.6rem;
    border-top: 1px solid rgba(201,168,76,0.18);
    padding-top: 0.5rem;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.top3-row {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: 'EB Garamond', serif; font-size: 0.8rem;
    color: var(--parchment-dark);
}
.top3-rank {
    font-family: 'Cinzel', serif; font-size: 0.65rem; font-weight: 700;
    color: var(--gold); min-width: 1.4rem; text-align: center;
    opacity: 0.9;
}
.top3-name { flex: 1; text-align: left; opacity: 0.8; }
.top3-level { font-size: 0.7rem; opacity: 0.5; white-space: nowrap; }

.page-footer {
    margin-top: 2rem; text-align: center;
    font-family: 'Almendra', serif; font-style: italic;
    font-size: 0.8rem; color: var(--stone); opacity: 0.4;
}

/* ---- BACK LINK ---- */
.back-link {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: 'Cinzel', serif; font-size: 0.8rem; color: var(--gold-dark);
    text-decoration: none; margin-bottom: 1.5rem; transition: color 0.3s;
}
.back-link:hover { color: var(--gold); }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .game-modes { grid-template-columns: 1fr; gap: 1rem; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .top-bar { flex-direction: column; gap: 1rem; }
    .top-bar-left, .top-bar-right { flex-wrap: wrap; justify-content: center; }
    .top-bar-right { flex-direction: column; align-items: stretch; width: 100%; }
    .top-nav-btn { flex: none !important; width: 100% !important; white-space: nowrap; box-sizing: border-box; }
    .bottom-nav { flex-direction: column; align-items: center; }
    .level-bar { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 480px) {
    .auth-card { padding: 1.5rem 1.2rem; }
    .page-wrapper { padding: 1rem; }
}

/* ---- ANIMATIONS ---- */
.fade-in { animation: fadeInUp 0.6s ease-out both; }
.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-2 { animation-delay: 0.2s; }
.fade-in-delay-3 { animation-delay: 0.3s; }
.fade-in-delay-4 { animation-delay: 0.4s; }
.fade-in-delay-5 { animation-delay: 0.5s; }

.auth-form { display: none; }
.auth-form.active { display: block; }