/* ═══════════════════════════════════════════════════════
   CSS DESIGN TOKENS & CUSTOM PROPERTIES
   Cozy Village Merge Game Theme
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Outfit:wght@300;400;500;600;700&family=Lilita+One&family=Fredoka:wght@400;500;600;700&display=swap');

:root {
    /* ─── Core Colors (Warm Village) ─── */
    --bg-primary: #2c1e10;
    --bg-secondary: #3a2a18;
    --bg-tertiary: #4a3828;
    --surface: rgba(245, 234, 208, 0.08);
    --surface-hover: rgba(245, 234, 208, 0.14);
    --border: rgba(200, 170, 100, 0.2);
    --border-strong: rgba(200, 170, 100, 0.45);

    /* ─── Village Ground Colors ─── */
    --grass-light: #7db856;
    --grass-mid: #5da340;
    --grass-dark: #4a8c32;
    --ground-light: #d4b87a;
    --ground-dark: #a08050;
    --wood-light: #c49a6c;
    --wood-dark: #8b6c42;

    /* ─── Gold Palette ─── */
    --gold-50: #fff9e6;
    --gold-100: #ffefb3;
    --gold-200: #ffe680;
    --gold-300: #ffdc4d;
    --gold-400: #ffd700;
    --gold-500: #e6c200;
    --gold-600: #b39600;
    --gold-700: #806b00;

    /* ─── Accent Colors ─── */
    --gem-blue: #5b9bd5;
    --gem-purple: #9b6fd0;
    --gem-pink: #d87a9e;
    --gem-green: #52b86a;
    --gem-orange: #e8923c;

    /* ─── Text ─── */
    --text-primary: #f5ead0;
    --text-secondary: rgba(245, 234, 208, 0.7);
    --text-muted: rgba(245, 234, 208, 0.4);
    --text-gold: var(--gold-400);
    --text-dark: #2c1e10;

    /* ─── Typography ─── */
    --font-display: 'Fredoka', 'Lilita One', 'Cinzel', serif;
    --font-heading: 'Fredoka', 'Cinzel', serif;
    --font-body: 'Outfit', sans-serif;

    /* ─── Grid ─── */
    --cell-size: 100px;
    --grid-border-width: 6px;

    /* ─── HUD ─── */
    --hud-bg: rgba(44, 30, 16, 0.92);
    --hud-height: 72px;
    --hud-blur: 20px;

    /* ─── Sidebar ─── */
    --sidebar-width: 290px;
    --sidebar-bg: rgba(44, 30, 16, 0.96);

    /* ─── Tier Glow Colors ─── */
    --glow-t1: #ff6a00;
    --glow-t2: #ffcc00;
    --glow-t3: #a0a0a0;
    --glow-t4: #8b6c42;
    --glow-t5: #6a6aff;
    --glow-t6: #ffd700;
    --glow-t7: #e8c49a;
    --glow-t8: #c49a6c;
    --glow-t9: #888888;
    --glow-t10: #00c8ff;
    --glow-t11: #a855f7;
    --glow-t12: #f0abfc;

    /* ─── Transitions ─── */
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-fast: 150ms var(--ease-out);
    --transition-normal: 300ms var(--ease-out);
    --transition-slow: 500ms var(--ease-out);

    /* ─── Z-Indices ─── */
    --z-bg: 0;
    --z-grid: 1;
    --z-tile: 10;
    --z-tile-dragging: 100;
    --z-hud: 200;
    --z-sidebar: 250;
    --z-effects: 300;
    --z-modal: 500;
    --z-overlay: 1000;

    /* ─── Spacing ─── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* ─── Border Radius ─── */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-round: 50%;
}

/* ─── Theme: Dark Mode ─── */
.theme-dark {
    --bg-primary: #1a0e04;
    --bg-secondary: #241408;
}

/* ─── Theme: Pixel ─── */
.theme-pixel {
    --font-body: 'Courier New', monospace;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 2px;
}

/* ═══════════════════════════════════════════════════════
   LIGHT MODE — Bright, clean village theme
   ═══════════════════════════════════════════════════════ */

.theme-light {
    --bg-primary: #e8f0d8;
    --bg-secondary: #d8e4c4;
    --bg-tertiary: #c8d8b0;
    --text-primary: #2c1e10;
    --text-secondary: #5a4030;
    --text-muted: #8a7a60;
    --surface: rgba(0, 0, 0, 0.04);
    --surface-hover: rgba(0, 0, 0, 0.08);
    --border: rgba(120, 90, 40, 0.15);
    --border-strong: rgba(120, 90, 40, 0.3);
}

body.theme-light,
.theme-light body {
    background: #f0e8d0 !important;
    color: #2c1e10;
}

body.theme-light::before {
    background: url('../assets/bg.png') center center / cover no-repeat !important;
    opacity: 0.8 !important;
}


/* ─── HUD Light ─── */
body.theme-light #hud {
    background: linear-gradient(180deg, rgba(232, 220, 190, 0.97), rgba(220, 208, 178, 0.95));
    border-bottom-color: rgba(120, 90, 40, 0.15);
    color: #2c1e10;
    box-shadow: 0 3px 15px rgba(80, 50, 20, 0.15);
}

body.theme-light .game-logo {
    background: linear-gradient(135deg, #b88830, #986820, #a87830);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ─── Resource Capsules Light ─── */
body.theme-light .resource-capsule {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(120, 90, 40, 0.15);
    color: #2c1e10;
    box-shadow: 0 2px 8px rgba(80, 50, 20, 0.1);
}

body.theme-light .resource-capsule .res-main {
    color: #2c1e10;
}

body.theme-light .resource-capsule .res-sub {
    color: #8a7a60;
}

/* ─── HUD Buttons Light ─── */
body.theme-light .hud-btn {
    background: rgba(255, 248, 230, 0.9);
    color: #5a4030;
    border-color: rgba(120, 90, 40, 0.15);
    box-shadow: 0 2px 6px rgba(80, 50, 20, 0.1);
}

body.theme-light .hud-btn:hover {
    background: rgba(255, 248, 230, 1);
    color: #b88830;
    border-color: rgba(180, 130, 50, 0.3);
}

body.theme-light .hud-btn.active {
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(180, 130, 50, 0.3);
    color: #b88830;
}

/* ─── Grid Light ─── */
body.theme-light #grid-wrapper::before {
    background: linear-gradient(145deg, #b8a888, #a09078, #b8a888);
    box-shadow: 0 4px 20px rgba(80, 50, 20, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    animation: none;
}

body.theme-light #grid {
    background: linear-gradient(145deg, #4a5a6e, #3a4a5e);
    box-shadow: inset 0 3px 15px rgba(0, 0, 0, 0.3);
}

body.theme-light .grid-cell {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ─── Sidebars Light ─── */
body.theme-light #civ-log,
body.theme-light #shop-panel {
    background: linear-gradient(180deg, rgba(240, 232, 210, 0.98), rgba(228, 220, 198, 0.99));
    border-color: rgba(120, 90, 40, 0.12);
    color: #2c1e10;
}

body.theme-light .civ-log-title,
body.theme-light .shop-title {
    color: #2c1e10;
}

body.theme-light .civ-log-item {
    background: rgba(255, 248, 230, 0.5);
    border-color: rgba(120, 90, 40, 0.08);
}

body.theme-light .civ-log-item .tier-name {
    color: #2c1e10;
}

body.theme-light .civ-log-item .tier-gps {
    color: #8a7a60;
}

body.theme-light .civ-log-item .tier-count {
    background: rgba(180, 130, 50, 0.1);
    color: #b88830;
}

/* ─── Modals Light ─── */
body.theme-light .modal-overlay {
    background: rgba(180, 170, 140, 0.7);
}

body.theme-light .modal-box {
    background: linear-gradient(180deg, #fff8e8, #f5ead0);
    color: #2c1e10;
    border: 3px solid rgba(200, 170, 100, 0.3);
    box-shadow: 0 20px 60px rgba(80, 50, 20, 0.25);
}

body.theme-light .modal-box h2 {
    background: linear-gradient(135deg, #b88830, #986820);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.theme-light .modal-desc {
    color: #7a6a50;
}

body.theme-light .setting-row {
    background: rgba(120, 90, 40, 0.05);
    border-color: rgba(120, 90, 40, 0.1);
    color: #2c1e10;
}

body.theme-light .modal-btn-secondary {
    background: rgba(120, 90, 40, 0.08);
    color: #5a4030;
    border-color: rgba(120, 90, 40, 0.2);
}

body.theme-light .modal-btn-danger {
    background: rgba(220, 80, 60, 0.08);
    color: #c04030;
    border-color: rgba(220, 80, 60, 0.2);
}

/* ─── Shop Light ─── */
body.theme-light .shop-section-heading {
    color: #8a7a60;
    border-bottom-color: rgba(120, 90, 40, 0.1);
}

body.theme-light .shop-item {
    background: rgba(255, 248, 230, 0.5);
    border-color: rgba(120, 90, 40, 0.08);
}

body.theme-light .shop-item .item-name {
    color: #2c1e10;
}

body.theme-light .shop-item .item-desc {
    color: #8a7a60;
}

body.theme-light .shop-item .item-cost {
    color: #b88830;
}

body.theme-light .shop-action-btn {
    background: rgba(255, 248, 230, 0.5);
    border-color: rgba(120, 90, 40, 0.08);
    color: #2c1e10;
}

body.theme-light .shop-action-cost {
    color: #b88830;
    background: rgba(180, 130, 50, 0.08);
}

/* ─── Action Bar Light ─── */
@media (max-width: 600px) {
    body.theme-light #action-bar {
        background: linear-gradient(180deg, rgba(232, 220, 190, 0.95), rgba(220, 208, 178, 0.98));
        border-top-color: rgba(120, 90, 40, 0.12);
    }
}

/* ─── Mobile Tab Bar Light ─── */
body.theme-light #mobile-tab-bar {
    background: linear-gradient(180deg, rgba(232, 220, 190, 0.97), rgba(220, 208, 178, 0.99));
    border-top-color: rgba(120, 90, 40, 0.12);
}

body.theme-light .tab-btn {
    color: #8a7a60;
}

body.theme-light .tab-btn.active {
    color: #b88830;
}

/* ─── Misc Light ─── */
body.theme-light .sidebar-backdrop {
    background: rgba(160, 140, 100, 0.5);
}

body.theme-light .auto-merge-indicator {
    background: rgba(52, 184, 106, 0.1);
    border-color: rgba(52, 184, 106, 0.2);
    color: #2a9548;
}

body.theme-light .toggle-switch {
    background: rgba(120, 90, 40, 0.15);
}

body.theme-light .toggle-switch.active {
    background: #b88830;
}

body.theme-light .toggle-switch::before {
    background: #fff;
}

body.theme-light .high-score-display {
    background: rgba(120, 90, 40, 0.06);
    color: #5a4030;
    border-color: rgba(120, 90, 40, 0.1);
}

body.theme-light .sidebar-close-btn {
    background: rgba(220, 80, 60, 0.08);
    border-color: rgba(220, 80, 60, 0.2);
    color: #c04030;
}

body.theme-light .xp-bar-outer {
    background: rgba(120, 90, 40, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
}

body.theme-light .level-badge {
    border-color: #e8f0d8;
}

body.theme-light .powerup-timer {
    background: rgba(232, 146, 60, 0.1);
    border-color: rgba(232, 146, 60, 0.2);
    color: #c87a20;
}

body.theme-light .floating-text {
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.5), 0 0 15px currentColor;
}

body.theme-light .how-step {
    background: rgba(120, 90, 40, 0.05);
    border-color: rgba(120, 90, 40, 0.08);
}

body.theme-light .how-step .step-text {
    color: #5a4030;
}

body.theme-light .intro-subtitle {
    color: #7a6a50;
}

body.theme-light .intro-title {
    background: linear-gradient(135deg, #b88830, #986820, #a87830);
    -webkit-background-clip: text;
    background-clip: text;
}

body.theme-light .intro-logo-icon::before,
body.theme-light .intro-logo-icon::after {
    background: linear-gradient(180deg, #b88830, #7a5820);
    box-shadow: 0 0 8px rgba(180, 130, 50, 0.3);
}

body.theme-light .theme-btn {
    background: rgba(120, 90, 40, 0.06);
    color: #5a4030;
    border-color: rgba(120, 90, 40, 0.15);
}

body.theme-light .theme-btn.active-theme {
    background: rgba(180, 130, 50, 0.12);
    border-color: #b88830;
    color: #b88830;
}

body.theme-light .resume-stat,
body.theme-light .win-stat {
    background: rgba(120, 90, 40, 0.05);
    border-color: rgba(120, 90, 40, 0.08);
}

body.theme-light .resume-stat .label,
body.theme-light .win-stat .stat-label {
    color: #8a7a60;
}

body.theme-light .resume-stat .value,
body.theme-light .win-stat .stat-value {
    color: #b88830;
}

/* ─── Theme: Neon Glow ─── */
.theme-neon {
    --bg-primary: #050010;
    --bg-secondary: #0a0018;
}

/* ─── Theme: Royal Gold ─── */
.theme-royal {
    --bg-primary: #1a1000;
    --bg-secondary: #2a1a00;
    --gold-400: #ffd700;
}

/* ─── Theme: Cosmic Dream ─── */
.theme-cosmic {
    --bg-primary: #050012;
    --bg-secondary: #0a0024;
}