* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
    background-color: #faf8ef;
    color: #776e65;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

h1 { font-weight: bold; margin: 0; }

.score-container {
    background: #bbada0;
    padding: 5px 15px;
    border-radius: 3px;
    color: white;
    text-align: center;
    min-width: 70px;
}

.score-label { font-size: 11px; color: #eee4da; text-transform: uppercase; letter-spacing: 0.5px; }
#score { font-size: 20px; font-weight: bold; line-height: 1.2; }

.game-container {
    position: relative;
    background-color: #bbada0;
    border-radius: 6px;
}

.grid-background {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    padding: 2%;
    gap: 2%;
}

.grid-cell {
    background-color: rgba(238, 228, 218, 0.35);
    border-radius: 3px;
    width: 100%; height: 100%;
}

.tile-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
}

.tile {
    position: absolute;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    transition: transform 0.12s ease-in-out;
    z-index: 10;
    will-change: transform;
}

.tile-2 { background: #eee4da; color: #776e65; }
.tile-4 { background: #ede0c8; color: #776e65; }
.tile-8 { background: #f2b179; color: #f9f6f2; }
.tile-16 { background: #f59563; color: #f9f6f2; }
.tile-32 { background: #f67c5f; color: #f9f6f2; }
.tile-64 { background: #f65e3b; color: #f9f6f2; }
.tile-128 { background: #edcf72; color: #f9f6f2; }
.tile-256 { background: #edcc61; color: #f9f6f2; }
.tile-512 { background: #edc850; color: #f9f6f2; }
.tile-1024 { background: #edc53f; color: #f9f6f2; }
.tile-2048 { background: #edc22e; color: #f9f6f2; }
.tile-4096 { background: #3c3a32; color: #f9f6f2; box-shadow: 0 0 10px gold; }

.controls { margin-top: 15px; }

button {
    background: #8f7a66; color: white; border: none;
    padding: 10px 24px; font-size: 16px; border-radius: 3px;
    cursor: pointer; font-weight: bold; outline: none;
}
button:active { opacity: 0.8; }

.game-message {
    display: none; position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(238, 228, 218, 0.73);
    z-index: 100; flex-direction: column;
    align-items: center; justify-content: center;
    border-radius: 6px; text-align: center;
}
.game-message p { font-weight: bold; color: #776e65; margin-bottom: 15px; }
.show-message { display: flex; }

.footer { margin-top: 20px; font-size: 13px; color: #a0968c; font-weight: bold; letter-spacing: 1px; }