:root {
    --bg-color: #faf8ef;
    --text-color: #776e65;
    --grid-color: #bbada0;
    --empty-cell-color: #cdc1b4;
    --primary-font: 'Nunito', sans-serif;

    /* Tile Colors */
    --tile-2: #eee4da;
    --tile-4: #ede0c8;
    --tile-8: #f2b179;
    --tile-16: #f59563;
    --tile-32: #f67c5f;
    --tile-64: #f65e3b;
    --tile-128: #edcf72;
    --tile-256: #edcc61;
    --tile-512: #9c0;
    --tile-1024: #33b5e5;
    --tile-2048: #09c;
    --tile-super: #3c3a32;

    --bg-gradient: linear-gradient(135deg, #E6E6FA 0%, #E0F7FA 100%);
    --header-color: #8B5CF6;
    --panel-bg: rgba(238, 228, 218, 0.35);
}

[data-theme="dark"] {
    --bg-color: #1a1a2e;
    --text-color: #e0e0e0;
    --grid-color: #2d3436;
    /* Darker grid */
    --empty-cell-color: #444;

    --bg-gradient: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%);
    --header-color: #a78bfa;
    /* Lighter purple */

    /* Adjust tile colors for dark mode context if needed, 
       but standard 2048 colors usually pop well on dark too.
       Maybe slightly mute the text color on tiles? 
       Actually, tiles have their own colors. */

    --panel-bg: rgba(255, 255, 255, 0.1);
}

* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--primary-font);
    background: var(--bg-gradient);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    /* Prevent scrolling on mobile */
    transition: background 0.3s, color 0.3s;
}

.container {
    width: 500px;
    margin: 0 auto;
    padding: 10px;
}

/* Header */
.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.top-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin-bottom: 15px;
}

.title {
    font-size: 60px;
    font-weight: 800;
    margin: 0;
    color: var(--header-color);
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}

.scores-container {
    display: flex;
    gap: 5px;
}

.score-box {
    background: var(--grid-color);
    padding: 5px 15px;
    border-radius: 6px;
    color: white;
    text-align: center;
    min-width: 80px;
    position: relative;
    transition: background 0.3s;
}

.score-box .label {
    text-transform: uppercase;
    font-size: 11px;
    color: #eee4da;
    display: block;
}

.score-box .value {
    font-size: 20px;
    font-weight: bold;
    display: block;
}

.score-animation {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    color: var(--text-color);
    animation: floatUp 0.6s ease-out forwards;
    opacity: 0;
    font-weight: bold;
    color: rgba(76, 70, 60, 0.9);
}

[data-theme="dark"] .score-animation {
    color: rgba(255, 255, 255, 0.9);
}

/* Sub Header / Controls */
.sub-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin-bottom: 15px;
}

.stage-indicator {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.5);
    padding: 5px 15px;
    border-radius: 20px;
    transition: background 0.3s, color 0.3s;
}

[data-theme="dark"] .stage-indicator {
    background: rgba(0, 0, 0, 0.3);
}

.controls {
    display: flex;
    gap: 10px;
}

.btn {
    background: #8f7a66;
    border-radius: 3px;
    color: white;
    padding: 0 15px;
    text-decoration: none;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: var(--primary-font);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, background 0.2s;
}

.btn:hover {
    background: #9f8b77;
}

.btn:active {
    transform: scale(0.95);
}

.btn-new {
    background: #8B5CF6;
}

.btn-new:hover {
    background: #7C3AED;
}

.btn-undo {
    background: #EF4444;
}

.btn-undo:hover {
    background: #DC2626;
}

.btn-undo:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.btn-icon {
    min-width: 40px;
    padding: 0;
}

.btn-sound {
    background: #10B981;
}

.btn-sound:hover {
    background: #059669;
}

.btn-theme {
    background: #F59E0B;
}

.btn-theme:hover {
    background: #D97706;
}

[data-theme="dark"] .btn-theme {
    background: #3B82F6;
}

/* Blue moon */
[data-theme="dark"] .btn-theme:hover {
    background: #2563EB;
}

/* Game Board */
.game-container {
    position: relative;
    padding: 10px;
    cursor: default;
    background: var(--grid-color);
    border-radius: 6px;
    width: 400px;
    height: 400px;
    touch-action: none;
    transition: background 0.3s;
}

.grid-container {
    position: absolute;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    width: 380px;
    height: 380px;
}

.grid-cell {
    width: 100%;
    height: 100%;
    background: var(--panel-bg);
    border-radius: 3px;
    transition: background 0.3s;
}

/* Light mode overrides for grid cell specifically if needed, logic is in var */
[data-theme="dark"] .grid-cell {
    background: rgba(255, 255, 255, 0.05);
    /* Slightly lighter than grid */
}


.tile-container {
    position: absolute;
    z-index: 2;
    width: 380px;
    height: 380px;
}

.tile {
    position: absolute;
    width: 87.5px;
    height: 87.5px;
    border-radius: 3px;
    background: var(--tile-2);
    color: #776e65;
    font-weight: bold;
    font-size: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 150ms ease-in-out;
    animation: appear 200ms ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    /* Movement logic handled by JS inline transform, but we need the calc for responsive */
    transform: translate(calc(var(--x) * (100% + 10px)), calc(var(--y) * (100% + 10px)));
}

.tile-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tile Colors */
.tile-2 {
    background: var(--tile-2);
}

.tile-4 {
    background: var(--tile-4);
}

.tile-8 {
    background: var(--tile-8);
    color: #f9f6f2;
}

.tile-16 {
    background: var(--tile-16);
    color: #f9f6f2;
}

.tile-32 {
    background: var(--tile-32);
    color: #f9f6f2;
}

.tile-64 {
    background: var(--tile-64);
    color: #f9f6f2;
}

.tile-128 {
    background: var(--tile-128);
    color: #f9f6f2;
    font-size: 38px;
    box-shadow: 0 0 10px 2px rgba(237, 207, 114, 0.3);
}

.tile-256 {
    background: var(--tile-256);
    color: #f9f6f2;
    font-size: 38px;
    box-shadow: 0 0 10px 3px rgba(237, 204, 97, 0.4);
}

.tile-512 {
    background: var(--tile-512);
    color: #f9f6f2;
    font-size: 38px;
    box-shadow: 0 0 15px 4px rgba(153, 204, 0, 0.5);
}

.tile-1024 {
    background: var(--tile-1024);
    color: #f9f6f2;
    font-size: 30px;
}

.tile-2048 {
    background: var(--tile-2048);
    color: #f9f6f2;
    font-size: 30px;
    box-shadow: 0 0 20px 5px rgba(0, 153, 204, 0.6);
}

.tile-super {
    background: var(--tile-super);
    color: #f9f6f2;
    font-size: 24px;
}

/* Animations */
@keyframes appear {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes floatUp {
    0% {
        top: 20px;
        opacity: 1;
    }

    100% {
        top: -20px;
        opacity: 0;
    }
}

.tile-merged .tile-inner {
    animation: pop 200ms ease;
}

/* Overlays */
.game-message {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(238, 228, 218, 0.85);
    z-index: 100;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 6px;
    animation: fade-in 800ms ease 1200ms;
    animation-fill-mode: both;
}

[data-theme="dark"] .game-message {
    background: rgba(26, 26, 46, 0.9);
    color: #fff;
}

.game-message.game-won {
    background: rgba(237, 194, 46, 0.7);
    color: #f9f6f2;
}

.game-message.game-over {
    background: rgba(238, 228, 218, 0.73);
}

[data-theme="dark"] .game-message.game-over {
    background: rgba(45, 52, 54, 0.8);
}

.game-message p {
    font-size: 60px;
    font-weight: bold;
    height: 60px;
    line-height: 60px;
    margin-bottom: 20px;
}

.game-message .lower {
    display: block;
    margin-top: 20px;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Help Button */
.help-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    border-radius: 50%;
    color: white;
    font-size: 24px;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 200;
    animation: pulse 2s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal {
    background: white;
    padding: 25px;
    border-radius: 15px;
    max-width: 500px;
    width: 90%;
    position: relative;
    animation: slideUp 0.3s ease-out;
    max-height: 90vh;
    overflow-y: auto;
    color: #776e65;
}

[data-theme="dark"] .modal {
    background: #1e1e2f;
    color: #eee;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal h2 {
    margin-top: 0;
    color: #8B5CF6;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
}

.instruction-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 16px;
}

.icon {
    font-size: 24px;
    margin-right: 10px;
    width: 30px;
    text-align: center;
}

/* Media Queries */
@media screen and (max-width: 520px) {
    .container {
        width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Center everything */
    }

    /* Stack header elements nicely */
    .header {
        width: 100%;
        max-width: 380px;
        /* Match game board width */
    }

    .sub-header {
        flex-direction: column-reverse;
        /* Put controls (buttons) ABOVE stage indicator */
        gap: 15px;
    }

    /* Controls Row Clean up */
    .controls {
        width: 100%;
        justify-content: center;
        /* Center buttons */
        margin-bottom: 5px;
    }

    /* Increase Game Board Size (approx 90vw max 380px) */
    .grid-container,
    .tile-container,
    .game-container {
        width: 380px;
        height: 380px;
    }

    .grid-container {
        gap: 10px;
        width: 360px;
        /* 380 - 20 padding */
        height: 360px;
    }

    /* Re-calc tile size: (360 - 3*10) / 4 = 330/4 = 82.5px */
    .tile {
        width: 82.5px;
        height: 82.5px;
        font-size: 40px;
        /* Gap is 10px still */
        transform: translate(calc(var(--x) * (100% + 12px)), calc(var(--y) * (100% + 12px)));
        /* 10px gap relative to 82.5px is ~12.1% .. actually let's stick to pixel calc consistency or simple 10px gap assumption */
        /* If GAP is 10px. Translate X * (Tile + Gap) */
        /* We used CSS Calc based on % of tile before. let's hardcode the gap logic for new size */
        transform: translate(calc(var(--x) * (100% + 12px)), calc(var(--y) * (100% + 12px)));
    }

    .game-message p {
        font-size: 40px;
    }
}

/* Smaller Mobile logic */
@media screen and (max-width: 400px) {

    .grid-container,
    .tile-container,
    .game-container {
        width: 340px;
        height: 340px;
    }

    .grid-container {
        width: 320px;
        height: 320px;
    }

    /* Tile: (320 - 30) / 4 = 72.5px */
    .tile {
        width: 72.5px;
        height: 72.5px;
        font-size: 32px;
        transform: translate(calc(var(--x) * (100% + 13.8px)), calc(var(--y) * (100% + 13.8px)));
        /* Actually simpler: just use calc(var(--x) * (72.5px + 10px)) ? No, transform is % based usually on self width */
        /* 10px is ~13.79% of 72.5px */
    }
}

@media screen and (max-width: 350px) {

    .grid-container,
    .tile-container,
    .game-container {
        width: 280px;
        height: 280px;
    }

    .grid-container {
        width: 264px;
        height: 264px;
    }

    .tile {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
}