/* General */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s, color 0.3s;
}

hr {
    width: 80%;
}

/* AI Controls */
.ai-controls {
    margin: 20px auto;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

.hint-btn, .auto-play-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s;
}

.hint-btn {
    background-color: #4CAF50;
    color: white;
}

.hint-btn:hover {
    background-color: #45a049;
    transform: scale(1.05);
}

.auto-play-btn {
    background-color: #2196F3;
    color: white;
}

.auto-play-btn:hover {
    background-color: #0b7dda;
    transform: scale(1.05);
}

.auto-play-btn.playing {
    background-color: #f44336;
}

.hint-display {
    font-size: 18px;
    font-weight: bold;
    color: #4CAF50;
    margin: 10px;
    min-height: 30px;
}

.hint-arrow {
    display: inline-block;
    font-size: 30px;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Board */
#board {
    width: 400px;
    height: 400px;
    border: 6px solid;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    position: relative;
}

/* Tiles */
.tile {
    width: 90px;
    height: 90px;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s, color 0.3s, transform 0.15s;
}

/* Animations */
@keyframes spawn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes merge {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.spawn { animation: spawn 0.15s ease; }
.merge { animation: merge 0.15s ease; }

/* Theme Buttons */
.theme-buttons {
    margin: 15px;
}
.theme-btn {
    padding: 8px 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin: 0 5px;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s, transform 0.15s;
}
.theme-btn:hover {
    transform: scale(1.05);
}
.theme-btn.active {
    outline: 2px solid currentColor;
    transform: scale(1.08);
}

/* ========== WOODEN THEME ========== */
body.wooden {
    background-color: #faf8ef;
    color: #776e65;
}
body.wooden #board {
    background-color: #bbada0;
    border-color: #8f7a66;
}
body.wooden .theme-btn {
    background-color: #dcbf9e;
    color: #5c4033;
}
body.wooden .theme-btn.active {
    background-color: #c2a889;
}
body.wooden .x2 { background-color: #eee4da; color: #727371; }
body.wooden .x4 { background-color: #ece0ca; color: #727371; }
body.wooden .x8 { background-color: #f4b17a; color: white; }
body.wooden .x16 { background-color: #f59575; color: white; }
body.wooden .x32 { background-color: #f57c5f; color: white; }
body.wooden .x64 { background-color: #f65d3b; color: white; }
body.wooden .x128 { background-color: #edce71; color: white; }
body.wooden .x256 { background-color: #edcc63; color: white; }
body.wooden .x512 { background-color: #edc651; color: white; }
body.wooden .x1024 { background-color: #eec744; color: white; }
body.wooden .x2048 { background-color: #ecc230; color: white; }

/* ========== DARK THEME ========== */
body.dark {
    background-color: #1e1e1e;
    color: #f5f5f5;
}
body.dark #board {
    background-color: #333;
    border-color: #555;
}
body.dark .theme-btn {
    background-color: #444;
    color: #f5f5f5;
}
body.dark .theme-btn.active {
    background-color: #666;
}
body.dark .x2 { background-color: #444; color: #a0e7e5; }
body.dark .x4 { background-color: #555; color: #b4f8c8; }
body.dark .x8 { background-color: #666; color: #fbe7c6; }
body.dark .x16 { background-color: #0077b6; color: white; }
body.dark .x32 { background-color: #0096c7; color: white; }
body.dark .x64 { background-color: #00b4d8; color: white; }
body.dark .x128 { background-color: #90e0ef; color: #333; }
body.dark .x256 { background-color: #caf0f8; color: #333; }
body.dark .x512 { background-color: #ff4d6d; color: white; }
body.dark .x1024 { background-color: #d00000; color: white; }
body.dark .x2048 { background-color: #9d0208; color: white; }

/* ========== JUNGLE THEME ========== */
body.jungle {
    background-color: #e6ffe6;
    color: #2d572c;
}
body.jungle #board {
    background-color: #99cc99;
    border-color: #5a7d5a;
}
body.jungle .theme-btn {
    background-color: #7fb77e;
    color: #f0fff0;
}
body.jungle .theme-btn.active {
    background-color: #6da06c;
}
body.jungle .x2 { background-color: #d0e8d0; color: #2d572c; }
body.jungle .x4 { background-color: #b0d6b0; color: #2d572c; }
body.jungle .x8 { background-color: #90c290; color: white; }
body.jungle .x16 { background-color: #6fa96f; color: white; }
body.jungle .x32 { background-color: #4f8f4f; color: white; }
body.jungle .x64 { background-color: #3e7a3e; color: white; }
body.jungle .x128 { background-color: #c9d175; color: #2d572c; }
body.jungle .x256 { background-color: #b5c35a; color: #2d572c; }
body.jungle .x512 { background-color: #a0b33f; color: #2d572c; }
body.jungle .x1024 { background-color: #8ba326; color: white; }
body.jungle .x2048 { background-color: #769410; color: white; }