/* themes.css - Complete Minesweeper Theme System v8 */

/* ===== IMPORT CLASSIC FONT ===== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

/* ===== BASE THEME MAPPING (Variables already defined in index.html) ===== */
/* Modern theme uses default :root values from index.html */

/* ===== MODERN THEME (Default - Optional explicit definition) ===== */
.game-board-container[data-theme="modern"],
.game-board-container:not([data-theme]) {
    /* Uses default values from :root */
}

/* Modern theme specific icons */
.game-board-container[data-theme="modern"] .tile.flagged::before,
.game-board-container[data-theme="modern"] .tile.bomb::before {
    display: none; /* Use emoji for modern */
}

/* ===== CLASSIC THEME (Windows 95/98) ===== */
.game-board-container[data-theme="classic"] {
    /* Board overrides */
    --board-gap: 0;
    --board-padding: 0;
    --board-radius: 0;
    --board-border: 3px solid;
    --board-border-color: #808080 #ffffff #ffffff #808080;
    --board-shadow: none;
    --board-bg: #c0c0c0;
    
    /* Tile overrides */
    --tile-radius: 0;
    --tile-border-width: 2px;
    --tile-border-style: solid;
    --tile-unrevealed: #c0c0c0;
    --tile-revealed: #c0c0c0;
    --tile-hover: #c0c0c0;
    --tile-flag: #c0c0c0;
    --tile-bomb: #c0c0c0;
    --tile-bomb-exploded: #ff0000;
    --tile-shadow-unrevealed: none;
    --tile-shadow-revealed: none;
    --tile-shadow-active: none;
    --tile-shadow-flag: none;
    --tile-transition: none;
    --tile-hover-transform: none;
    
    /* Number colors */
    --num-1: #0000ff;
    --num-2: #008000;
    --num-3: #ff0000;
    --num-4: #000080;
    --num-5: #800000;
    --num-6: #008080;
    --num-7: #000000;
    --num-8: #808080;
}

/* Classic container styling */
.game-board-container[data-theme="classic"] {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-radius: 0;
    padding: 3px;
    box-shadow: none;
    backdrop-filter: none;
}

/* Classic status bar */
.game-board-container[data-theme="classic"] .game-status {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    border-radius: 0;
    margin-bottom: 5px;
}

/* Classic time/flags display */
.game-board-container[data-theme="classic"] .time-flags-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.game-board-container[data-theme="classic"] .flags-item { order: 1; }
.game-board-container[data-theme="classic"] .game-state { order: 2; }
.game-board-container[data-theme="classic"] .time-item  { order: 3; }

/* Classic LED display */
.game-board-container[data-theme="classic"] .time-item .value,
.game-board-container[data-theme="classic"] .flags-item .value {
    color: #ff0000;
    font-family: 'Orbitron', 'Courier New', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    text-shadow: 0 0 3px rgba(255, 0, 0, 0.7);
    line-height: 1;
    /* ✅ THÊM CÁC DÒNG NÀY ĐỂ FIX CỨNG */
    font-variant-numeric: tabular-nums; /* Tất cả số cùng width */
    letter-spacing: 0; 
    width: 100%; 
    display: inline-block;
    text-align: center;
     overflow: hidden;
}

.game-board-container[data-theme="classic"] .time-item,
.game-board-container[data-theme="classic"] .flags-item {
    background: #000000;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    border-radius: 0;
    padding: 2px 4px;
    min-width: 52px; /* ← TĂNG LÊN để chứa đủ */
    width: 80px; /* ✅ THÊM width cố định */
    box-shadow: none;
    text-align: center;
    /* ✅ THÊM để prevent shrinking */
    flex-shrink: 0;
}

.game-board-container[data-theme="classic"] .time-item .label,
.game-board-container[data-theme="classic"] .flags-item .label {
    display: none;
}
/* Classic inner frame */
.game-board-container[data-theme="classic"]::before {
    content: '';
    position: absolute;
    inset: 2px;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    pointer-events: none;
    border-radius: 0;
}
/* Classic smile button */
.game-board-container[data-theme="classic"] .game-state {
    width: 32px;
    height: 32px;
    margin: 0 auto; /* Center */
    padding: 0;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-radius: 0;
    font-size: 0;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.game-board-container[data-theme="classic"] .game-state:active {
    border-color: #808080 #ffffff #ffffff #808080;
}
.game-board-container[data-theme="classic"] .game-state::after {
    content: '🙂';
    font-size: 22px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.game-board-container[data-theme="classic"] .tile.revealed:hover {
    background: #c0c0c0; /* Giữ nguyên màu */
    transform: none;
    cursor: default;
}
.game-board-container[data-theme="classic"] .game-state.won::after { content: '😎'; }
.game-board-container[data-theme="classic"] .game-state.lost::after { content: '😵'; }
.game-board-container[data-theme="classic"] .game-state.playing::after { content: '😮'; }

/* Classic board */
.game-board-container[data-theme="classic"] .game-board {
    border: 3px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 0;
    gap: 0;
    background: #c0c0c0;
    border-radius: 0;
    box-shadow: 
        inset 1px 1px 0 #000000,
        inset -1px -1px 0 #dfdfdf;
}

/* Classic tiles */
.game-board-container[data-theme="classic"] .tile {
    font-family: "MS Sans Serif", "Tahoma", sans-serif;
    font-weight: bold;
    border: none;
    background: #c0c0c0;
}

.game-board-container[data-theme="classic"] .tile.unrevealed {
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
}

.game-board-container[data-theme="classic"] .tile.unrevealed:active {
    border: 1px solid #808080;
}

.game-board-container[data-theme="classic"] .tile.revealed {
    border: 1px solid #c0c0c0;
    border-left-color: #808080;
    border-top-color: #808080;
}

/* Classic flag icon */
.game-board-container[data-theme="classic"] .tile.flagged {
    font-size: 0;
}

.game-board-container[data-theme="classic"] .tile.flagged::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect x="4" y="2" width="2" height="11" fill="%23000000"/><path d="M6 2 L12 4 L12 7.5 L6 5.5 Z" fill="%23ff0000" stroke="%23800000" stroke-width="0.5"/><rect x="2" y="12" width="6" height="2" fill="%23000000"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%; /* Giảm size để flag to hơn */
}
/* Classic bomb icon */
.game-board-container[data-theme="classic"] .tile.bomb {
    font-size: 0;
}

.game-board-container[data-theme="classic"] .tile.bomb::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="3.5" fill="%23000000"/><rect x="7" y="2" width="2" height="12" fill="%23000000"/><rect x="2" y="7" width="12" height="2" fill="%23000000"/><rect x="4.5" y="4.5" width="7" height="7" fill="%23000000" transform="rotate(45 8 8)"/><circle cx="6.5" cy="6.5" r="0.75" fill="%23ffffff"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.game-board-container[data-theme="classic"] .tile.bomb-exploded {
    background-color: #ff0000;
}

/* ===== NEON THEME ===== */
.game-board-container[data-theme="neon"] {
      /* Tile overrides - ĐỔI MÀU REVEALED */
    --tile-radius: 2px;
    --tile-border-width: 1px;
    --tile-border-style: solid;
    --tile-unrevealed: #1a1a2e; 
    --tile-revealed: #e0f7ff; 
    --tile-hover: #252545;
    --tile-flag: #2a1a3e;
    --tile-flag-color: #ff006e;
    --tile-bomb: #ffe0f0; /* Bomb cũng nền sáng */
    --tile-bomb-exploded: #ff006e;
    --tile-shadow-unrevealed: 0 0 3px rgba(0, 255, 255, 0.5);
    --tile-shadow-revealed: inset 0 0 5px rgba(0, 255, 255, 0.3); /* Shadow xanh nhẹ */
    --tile-shadow-flag: 0 0 8px rgba(255, 0, 110, 0.6);
    --tile-transition: all 0.2s ease;
    --tile-hover-transform: scale(1.05);
    
    /* Neon number colors */
        --num-1: #0066cc; /* Xanh dương đậm */
    --num-2: #008800; /* Xanh lá đậm */
    --num-3: #cc0044; /* Đỏ đậm */
    --num-4: #6600cc; /* Tím đậm */
    --num-5: #cc6600; /* Cam đậm */
    --num-6: #990033; /* Đỏ thẫm */
    --num-7: #330066; /* Tím than */
    --num-8: #000000; /* Đen */
}

/* Neon container */
.game-board-container[data-theme="neon"] {
    background: #000000;
    border: 2px solid #00ffff;
    border-radius: 0;
    padding: 12px;
    box-shadow: 
        0 0 20px #00ffff,
        inset 0 0 20px rgba(0, 255, 255, 0.2),
        0 0 40px rgba(255, 0, 255, 0.3);
    position: relative;
    overflow: hidden;
}
/* Neon glow animation */
.game-board-container[data-theme="neon"]::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #00ffff, #ff00ff, #00ffff);
    border-radius: inherit;
    opacity: 0.7;
    z-index: -1;
    animation: neon-glow 3s linear infinite;
}

@keyframes neon-glow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}
/* Neon tiles additional effects */
.game-board-container[data-theme="neon"] .tile {
    border-color: rgba(0, 255, 255, 0.2);
}

.game-board-container[data-theme="neon"] .tile:hover {
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
    border-color: rgba(0, 255, 255, 0.8);
}

.game-board-container[data-theme="neon"] .tile.revealed {
    border-color: rgba(0, 255, 255, 0.3);
    background: var(--tile-revealed);
    box-shadow: 
        inset 0 0 8px rgba(0, 0, 0, 0.5),
        inset 0 0 3px rgba(0, 255, 255, 0.2);
}
/* NEON UNREVEALED TILES - 3D EFFECT */
.game-board-container[data-theme="neon"] .tile.unrevealed {
    background: linear-gradient(135deg, #2a2a4e 0%, #1a1a2e 100%);
    border: 1px solid rgba(138, 43, 226, 0.6);
    position: relative;
    transform-style: preserve-3d;
    box-shadow: 
        /* Top light */
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        /* Bottom shadow */
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        /* Outer glow */
        0 0 8px rgba(138, 43, 226, 0.4),
        /* 3D depth */
        0 3px 6px rgba(0, 0, 0, 0.5),
        0 5px 12px rgba(138, 43, 226, 0.3);
}

/* 3D Border effect */
.game-board-container[data-theme="neon"] .tile.unrevealed::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(45deg, 
        rgba(255, 255, 255, 0.3) 0%, 
        transparent 30%, 
        transparent 70%, 
        rgba(0, 0, 0, 0.3) 100%);
    border-radius: inherit;
    pointer-events: none;
}

/* Hover 3D lift effect */
.game-board-container[data-theme="neon"] .tile.unrevealed:hover {
    background: linear-gradient(135deg, #3a3a6e 0%, #252545 100%);
    transform: translateZ(3px) scale(1.05);
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: 
        /* Enhanced top light */
        inset 0 3px 6px rgba(255, 255, 255, 0.3),
        inset 0 -3px 6px rgba(0, 0, 0, 0.5),
        /* Stronger glow */
        0 0 15px rgba(0, 255, 255, 0.8),
        /* Deeper 3D shadow */
        0 6px 12px rgba(0, 0, 0, 0.6),
        0 10px 20px rgba(0, 255, 255, 0.4);
}

/* Active/pressed 3D effect */
.game-board-container[data-theme="neon"] .tile.unrevealed:active {
    transform: translateZ(-1px) scale(0.98);
    box-shadow: 
        inset 0 -1px 2px rgba(255, 255, 255, 0.2),
        inset 0 2px 4px rgba(0, 0, 0, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 0 5px rgba(138, 43, 226, 0.4);
}
.game-board-container[data-theme="neon"] .tile[data-number] {
    font-weight: 900;
    font-size: 16px; /* Tăng size nếu cần */
    text-shadow: 
        /* Dark outline để dễ đọc */
        1px 1px 0 rgba(0, 0, 0, 0.5),
        -1px -1px 0 rgba(0, 0, 0, 0.5),
        1px -1px 0 rgba(0, 0, 0, 0.5),
        -1px 1px 0 rgba(0, 0, 0, 0.5),
        /* Glow nhẹ */
        0 0 4px currentColor;
}

/* Neon flag - Futuristic design */
.game-board-container[data-theme="neon"] .tile.flagged {
    font-size: 0;
}
/* Neon board - cyber grid */
.game-board-container[data-theme="neon"] .game-board {
    border: 1px solid #00ffff;
    padding: 2px;
    gap: 2px;
    background: #000000;
    border-radius: 0;
    box-shadow: 
        0 0 10px #00ffff,
        inset 0 0 10px rgba(0, 255, 255, 0.3);
    position: relative;
}

/* Neon grid lines effect */
.game-board-container[data-theme="neon"] .game-board::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(0deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
    mix-blend-mode: screen;
}
/* Neon status - cyberpunk style */
.game-board-container[data-theme="neon"] .game-status {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #00ffff;
    border-radius: 0;
    margin-bottom: 10px;
    box-shadow: 
        0 0 10px rgba(0, 255, 255, 0.5),
        inset 0 0 20px rgba(0, 255, 255, 0.1);
}

.game-board-container[data-theme="neon"] .tile.flagged::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 2 L5 14 L11 14 L10 22 L19 9 L13 9 Z" fill="%2300ffff" stroke="%23ff00ff" stroke-width="1.5" stroke-linejoin="round"/><path d="M13 2 L5 14 L11 14 L10 22 L19 9 L13 9 Z" fill="%2300ffff" opacity="0.5" filter="blur(2px)"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    filter: drop-shadow(0 0 5px #00ffff);
}
/* Neon bomb - Glowing orb */
.game-board-container[data-theme="neon"] .tile.bomb {
    font-size: 0;
}

.game-board-container[data-theme="neon"] .tile.bomb::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="%23ff006e" opacity="0.3"/><circle cx="12" cy="12" r="6" fill="%23ff006e" opacity="0.5"/><circle cx="12" cy="12" r="4" fill="%23ff006e"/><circle cx="10" cy="10" r="1.5" fill="%23ffffff" opacity="0.8"/><path d="M12 2 L12 7 M12 17 L12 22 M2 12 L7 12 M17 12 L22 12 M5 5 L8 8 M16 16 L19 19 M19 5 L16 8 M8 16 L5 19" stroke="%23ff00aa" stroke-width="1" stroke-linecap="round" opacity="0.6"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    filter: drop-shadow(0 0 6px rgba(255, 0, 110, 1));
}

/* ===== ZEN THEME ===== */
.game-board-container[data-theme="zen"] {
    /* Board overrides */
    --board-gap: 2px;
    --board-padding: 6px;
    --board-radius: 16px;
    --board-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    --board-bg: #f5f5dc;
    
    /* Tile overrides */
    --tile-radius: 8px;
    --tile-border-width: 1px;
    --tile-border-style: solid;
    --tile-unrevealed: #deb887;
    --tile-revealed: #faf0e6;
    --tile-hover: #d2b48c;
    --tile-flag: #f4a460; /* Sandy color, different from flag */
    --tile-flag-color: #8b4513; /* Dark brown */
    --tile-bomb: #8b4513;
    --tile-bomb-exploded: #a0522d;
    --tile-shadow-unrevealed: 0 2px 4px rgba(0, 0, 0, 0.1);
    --tile-shadow-revealed: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    --tile-transition: all 0.3s ease;
    --tile-hover-transform: translateY(-2px);
    
    /* Zen number colors */
    --num-1: #228b22;
    --num-2: #006400;
    --num-3: #8b4513;
    --num-4: #4682b4;
    --num-5: #d2691e;
    --num-6: #b22222;
    --num-7: #2f4f4f;
    --num-8: #696969;
}

/* Zen container */
.game-board-container[data-theme="zen"] {
    background: linear-gradient(135deg, #f5f5dc 0%, #deb887 100%);
    border: none;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 
        0 10px 30px rgba(139, 69, 19, 0.2),
        inset 0 2px 10px rgba(255, 255, 255, 0.5);
    position: relative;
}
/* Zen wooden frame effect */
.game-board-container[data-theme="zen"]::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 3px solid;
    border-image: linear-gradient(45deg, #8b4513, #d2691e, #8b4513) 1;
    border-radius: 12px;
    pointer-events: none;
}
.game-board-container[data-theme="zen"] .game-board {
    border: 2px solid #8b4513;
    padding: 4px;
    gap: 2px;
    background: linear-gradient(90deg, #deb887 0%, #f5deb3 50%, #deb887 100%);
    border-radius: 8px;
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Zen tiles */
.game-board-container[data-theme="zen"] .tile {
    border-color: rgba(0, 0, 0, 0.1);
}

.game-board-container[data-theme="zen"] .tile:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.game-board-container[data-theme="zen"] .tile.revealed {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Zen flag - Bamboo style */
.game-board-container[data-theme="zen"] .tile.flagged {
    font-size: 0;
}
/* Zen status - minimal natural */
.game-board-container[data-theme="zen"] .game-status {
    background: rgba(255, 248, 220, 0.8);
    border: none;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.1);
}
.game-board-container[data-theme="zen"] .tile.flagged::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 20 Q8 16, 8 10 Q8 4, 12 2 Q16 4, 16 10 Q16 16, 12 20 Z" fill="%2322b14c" stroke="%23006400" stroke-width="1"/><path d="M12 6 L12 18" stroke="%23006400" stroke-width="1.5"/><path d="M9 10 Q12 12, 15 10" stroke="%23006400" stroke-width="1" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 85%;
    filter: drop-shadow(0 2px 2px rgba(0, 100, 0, 0.3));
}

/* Zen bomb - Stone/pebble style */
.game-board-container[data-theme="zen"] .tile.bomb {
    font-size: 0;
}

.game-board-container[data-theme="zen"] .tile.bomb::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><ellipse cx="12" cy="13" rx="7" ry="6" fill="%23696969"/><ellipse cx="12" cy="12" rx="7" ry="6" fill="%23808080"/><ellipse cx="10" cy="10" rx="2" ry="1.5" fill="%23a9a9a9" opacity="0.6"/><path d="M6 12 Q12 8, 18 12" stroke="%23696969" stroke-width="0.5" fill="none" opacity="0.4"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
}

/* ===== THEME SELECTOR UI ===== */
.theme-selector {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.theme-selector h3 {
    color: #2d3748;
    margin-bottom: 8px;
    font-size: 0.95rem;
    font-weight: 600;
}

.theme-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.theme-btn {
    padding: 8px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 500;
}

.theme-btn:hover {
    border-color: #667eea;
    background: #edf2f7;
    transform: translateY(-1px);
}

.theme-btn.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* Theme preview tiles */
.theme-preview {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

/* Modern preview */
.theme-preview.modern {
    background: #a0aec0;
}
.theme-preview.modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    background: #e2e8f0;
    border-radius: 1px;
}
.theme-preview.modern::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 50%;
    background: #ffffff;
    border-radius: 1px;
}

/* Classic preview */
.theme-preview.classic {
    background: #c0c0c0;
    border: 1px solid #808080;
    border-radius: 0;
}
.theme-preview.classic::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 8px;
    height: 8px;
    background: #c0c0c0;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
}
.theme-preview.classic::after {
    content: '';
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 8px;
    height: 8px;
    background: #c0c0c0;
    border: 1px solid #808080;
}

/* Neon preview */
.theme-preview.neon {
    background: #0a0a0a;
    box-shadow: 0 0 4px rgba(0, 255, 255, 0.5);
}
.theme-preview.neon::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 6px;
    height: 6px;
    background: #1a1a2e;
    border: 1px solid rgba(0, 255, 255, 0.3);
}
.theme-preview.neon::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: #0f0f1f;
    box-shadow: 0 0 2px #00fff0;
}

/* Zen preview */
.theme-preview.zen {
    background: #f5f5dc;
    border-radius: 50%;
}
.theme-preview.zen::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 6px;
    background: #deb887;
    border-radius: 50%;
}
.theme-preview.zen::after {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    background: #faf0e6;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .theme-buttons {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .theme-btn {
        padding: 10px;
        font-size: 0.85rem;
    }
    
    .theme-preview {
        width: 24px;
        height: 24px;
    }
}

@media (min-width: 1024px) {
    .theme-selector {
        padding: 10px;
        margin-bottom: 0;
    }
    
    .theme-selector h3 {
        font-size: 0.85rem;
        margin-bottom: 6px;
    }
    
    .theme-btn {
        padding: 6px;
        font-size: 0.75rem;
        gap: 6px;
    }
    
    .theme-preview {
        width: 18px;
        height: 18px;
    }
}

/* ===== SMOOTH THEME TRANSITIONS ===== */
.game-board-container[data-theme-transitioning="true"] {
    pointer-events: none;
}

.game-board-container[data-theme-transitioning="true"] .tile {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.tile {
    will-change: background-color, border-color, box-shadow;
}

.theme-btn {
    will-change: transform, background-color, border-color;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .game-board-container,
    .tile,
    .theme-btn {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}