:root {
    /* Default Theme (Mahjong) */
    --bg-color: #0b2615;
    --bg-gradient: radial-gradient(circle at 50% 30%, #235c36 0%, #0b2615 100%);
    
    --surface-color: #1a2621;
    --surface-border: #2f4538;
    
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    
    /* Bold Game Colors */
    --accent-color: #0ea5e9; /* Sky Blue */
    --accent-dark: #0284c7;
    --accent-light: #e0f2fe;
    
    --success-color: #22c55e;
    --warning-color: #f59e0b;
    --error-color: #ef4444;

    /* Metals */
    --bronze-light: #fed7aa;
    --bronze-mid: #d97706;
    --bronze-dark: #78350f;
    
    --silver-light: #f8fafc;
    --silver-mid: #94a3b8;
    --silver-dark: #475569;
    
    --gold-light: #fef08a;
    --gold-mid: #eab308;
    --gold-dark: #a16207;

    /* Tile / Skeuo Vars */
    --tile-bg: #f1f5f9;
    --tile-face: linear-gradient(to bottom, #ffffff, #e2e8f0);
    --tile-text: #0f172a;
    --tile-shadow: #cbd5e1;
    --tile-edge: #94a3b8;
    
    --slot-bg: rgba(5, 26, 16, 0.8);

    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --radius-md: 12px;
    --radius-lg: 20px;
}

[data-theme="night"] {
    --bg-color: #0f172a;
    /* Atmospheric glow from top (moon/streetlamp) */
    --bg-gradient: 
        radial-gradient(circle at 50% 0%, #312e81 0%, transparent 70%),
        radial-gradient(circle at 50% 100%, #1e1b4b 0%, #020617 100%);
    
    --surface-color: rgba(15, 23, 42, 0.6);
    --surface-border: rgba(99, 102, 241, 0.3); /* Faint indigo border */
    
    --text-primary: #e0e7ff;
    --text-secondary: #94a3b8;
    
    --accent-color: #818cf8;
    --accent-dark: #6366f1;
    --accent-light: #c7d2fe;
    
    /* Glassy Tiles */
    --tile-bg: rgba(30, 41, 59, 0.7);
    /* Frosted glass look with top highlight */
    --tile-face: 
        linear-gradient(145deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
    --tile-text: #f8fafc;
    --tile-shadow: #000000;
    --tile-edge: rgba(148, 163, 184, 0.2);

    /* Glowing slots */
    --slot-bg: rgba(0, 0, 0, 0.3);
}

[data-theme="wood"] {
    --bg-color: #3f2e22;
    /* Warm table spotlight */
    --bg-gradient: radial-gradient(circle at 50% 40%, #5d4037 0%, #271c19 100%);
    
    --surface-color: #4e342e;
    --surface-border: #3e2723;
    
    --text-primary: #efebe9;
    --text-secondary: #d7ccc8;
    
    --accent-color: #ffb74d;
    --accent-dark: #f57c00;
    --accent-light: #ffe0b2;
    
    /* Physical Wood Blocks */
    --tile-bg: #d7ccc8;
    /* Warm wood grain simulation */
    --tile-face: 
        linear-gradient(to bottom right, #eecfa1, #d7b483);
    --tile-text: #3e2723; /* Dark burnt wood text */
    --tile-shadow: #3e2723;
    --tile-edge: #8d6e63;

    /* Carved slots */
    --slot-bg: rgba(30, 20, 15, 0.6);
}

[data-theme="wood"] body {
    /* 1. The Base Color: A rich, organic mahogany using OKLCH */
    background-color: oklch(0.38 0.08 55);
    
    /* 2. The Layers */
    background-image: 
        /* Layer A: The "Knots" and "Rings" */
        repeating-radial-gradient(
            circle at 50% 50%, 
            transparent 0, 
            oklch(0.35 0.09 55 / 0.8) 1px, 
            transparent 2px, 
            transparent 15px
        ),
        /* Layer B: The "Grain" Texture */
        repeating-linear-gradient(
            90deg,
            oklch(0.25 0.05 50 / 0.1) 0px,
            oklch(0.25 0.05 50 / 0.1) 1px,
            transparent 1px,
            transparent 3px
        ),
        /* Layer C: Ambient Lighting/Vignette */
        linear-gradient(
            180deg, 
            oklch(0.2 0.05 50 / 0.3), 
            transparent 40%, 
            transparent 60%, 
            oklch(0.2 0.05 50 / 0.3)
        );

    /* 3. The Magic: Stretching the circle into wood grain */
    background-size: 
        150% 150%, /* Stretches the radial circles into long, wavy lines */
        100% 100%, 
        100% 100%;
        
    background-position: 
        center 20%, 
        0 0, 
        0 0;

    /* 4. Blending it all together */
    background-blend-mode: overlay, normal, normal;
    
    /* 5. Final Polish: Contrast bump to make the grain pop */
    filter: contrast(110%) saturate(110%);
}

[data-theme="mahjong"] body {
    background-color: #1a472a; /* Deep British Racing Green */
    background-image: 
        /* Layer 1: The fabric weave going one way */
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px),
        /* Layer 2: The fabric weave going the other */
        repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px),
        /* Layer 3: A center spotlight vignette */
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1), rgba(0,0,0,0.4));
    background-blend-mode: normal;
}

[data-theme="retro"] body {
    background-color: #050a05; /* Not pure black, deep CRT grey */
    background-image: 
        /* The Scanlines */
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
        /* The Pixel Mesh */
        linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  
    background-size: 100% 3px, 3px 100%; /* Tiny repetitive size */
  
    /* The glowing vignette */
    box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
    background-blend-mode: normal;
}

[data-theme="retro"] {
    --bg-color: #000000;
    /* CRT Black with subtle vignette */
    --bg-gradient: radial-gradient(circle, #0a1f0a 0%, #000000 90%);
    
    --surface-color: #000000;
    --surface-border: #33ff33; /* Phosphor Green */
    
    --text-primary: #33ff33;
    --text-secondary: #00cc00;
    
    --accent-color: #33ff33;
    --accent-dark: #006600;
    --accent-light: #ccffcc;
    
    --success-color: #33ff33;
    --warning-color: #ffff00;
    --error-color: #ff0000;

    /* Terminal Tiles */
    --tile-bg: #000000;
    --tile-face: #000000;
    --tile-text: #33ff33;
    --tile-shadow: #004400;
    --tile-edge: #33ff33;

    --slot-bg: rgba(0, 20, 0, 0.8);
    
    --font-main: 'Courier New', Courier, monospace;
}

/* CRT Static Noise Overlay */
[data-theme="retro"] body::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    /* Fine grain static noise */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.07'/%3E%3C/svg%3E");
    z-index: 9999;
    pointer-events: none;
    opacity: 0.5;
}

@font-face {
    font-family: 'Noto Emoji';
    src: url('../assets/fonts/NotoEmoji-Regular.ttf') format('truetype');
    font-display: swap;
}

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background-color: var(--bg-color);
    background-image: 
        var(--bg-gradient),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    background-blend-mode: overlay;
    color: var(--text-primary);
    height: 100vh;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}



.game-container {
    width: 100%;
    max-width: 600px;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    position: relative;
    z-index: 1;
}