:root {
    --bg-color: #050505;
    --grid-bg: #111;
    --cell-bg: #0a0a0a;

    --neon-blue: #0ff;
    --neon-pink: #f0f;
    --neon-green: #0f0;
    --neon-yellow: #ff0;

    --text-color: var(--neon-blue);
    --text-glow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);

    --tile-2: #0ff;
    --tile-4: #00ccff;
    --tile-8: #0099ff;
    --tile-16: #f0f;
    --tile-32: #cc00cc;
    --tile-64: #990099;
    --tile-128: #0f0;
    --tile-256: #00cc00;
    --tile-512: #ff0;
    --tile-1024: #ffcc00;
    --tile-2048: #f00;

    --transition-speed: 100ms;

    --grid-gap: 15px;
    --grid-padding: 15px;
}

@media screen and (max-width: 520px) {
    :root {
        --grid-gap: 10px;
        --grid-padding: 10px;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Share Tech Mono', monospace;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    overflow: hidden;
    /* Prevent scanline scroll */
}

/* CRT Effects */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 2px);
    pointer-events: none;
    z-index: 999;
}

.vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0.8) 100%);
    pointer-events: none;
    z-index: 998;
}

.container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

header {
    margin-bottom: 30px;
    border-bottom: 2px solid var(--neon-blue);
    padding-bottom: 20px;
    box-shadow: 0 0 15px var(--neon-blue);
}

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

h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 60px;
    font-weight: 900;
    line-height: 1;
    color: var(--neon-blue);
    text-shadow: var(--text-glow);
    letter-spacing: 2px;
}

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

.score-box {
    background: #000;
    border: 1px solid var(--neon-blue);
    padding: 10px 15px;
    border-radius: 0;
    /* Sharp edges */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    box-shadow: 0 0 5px var(--neon-blue);
}

.score-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--neon-blue);
    opacity: 0.8;
}

#score,
#best-score {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 5px #fff;
}

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

.header-bottom p {
    font-size: 14px;
    color: #ccc;
    text-shadow: 0 0 2px #ccc;
}

button#new-game-btn {
    background: transparent;
    color: var(--neon-pink);
    border: 1px solid var(--neon-pink);
    padding: 10px 20px;
    border-radius: 0;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 5px var(--neon-pink);
    text-shadow: 0 0 5px var(--neon-pink);
}

button#new-game-btn:hover {
    background: var(--neon-pink);
    color: #000;
    box-shadow: 0 0 20px var(--neon-pink);
}

.game-container {
    position: relative;
    padding: var(--grid-padding);
    background: var(--grid-bg);
    border: 1px solid #333;
    border-radius: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    touch-action: none;
    box-shadow: inset 0 0 20px #000;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: var(--grid-gap);
    width: 100%;
    height: 100%;
}

.grid-cell {
    background: var(--cell-bg);
    border: 1px solid #222;
    border-radius: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    box-shadow: inset 0 0 5px #000;
}

/* Tile Container and Positioning */
.tile-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* padding removed to align with grid container directly */
    pointer-events: none;
    box-sizing: border-box;
}

.tile {
    /* Define dynamic cell size based on container width (100%) */
    --available-width: calc(100% - (2 * var(--grid-padding)) - (3 * var(--grid-gap)));
    --cell-size: calc(var(--available-width) / 4);

    position: absolute;
    width: var(--cell-size);
    height: var(--cell-size);

    border-radius: 0;
    /* Cyberpunk = sharp */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 40px;
    transition: transform 100ms ease-in-out, left 100ms ease-in-out, top 100ms ease-in-out;
    z-index: 10;
}

/* Positioning Logic using Data Attributes */
.tile[data-c="0"] {
    left: var(--grid-padding);
}

.tile[data-c="1"] {
    left: calc(var(--grid-padding) + var(--cell-size) + var(--grid-gap));
}

.tile[data-c="2"] {
    left: calc(var(--grid-padding) + 2 * (var(--cell-size) + var(--grid-gap)));
}

.tile[data-c="3"] {
    left: calc(var(--grid-padding) + 3 * (var(--cell-size) + var(--grid-gap)));
}

.tile[data-r="0"] {
    top: var(--grid-padding);
}

.tile[data-r="1"] {
    top: calc(var(--grid-padding) + var(--cell-size) + var(--grid-gap));
}

.tile[data-r="2"] {
    top: calc(var(--grid-padding) + 2 * (var(--cell-size) + var(--grid-gap)));
}

.tile[data-r="3"] {
    top: calc(var(--grid-padding) + 3 * (var(--cell-size) + var(--grid-gap)));
}

@media screen and (max-width: 520px) {
    h1 {
        font-size: 40px;
    }

    .tile {
        font-size: 28px;
    }
}

.tile-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: pop 200ms ease;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid;
    /* color set by modifier */
    box-shadow: 0 0 10px inset;
}

/* Dynamic Tile Styles */
.tile-2 .tile-inner {
    border-color: var(--tile-2);
    color: var(--tile-2);
    box-shadow: inset 0 0 10px var(--tile-2), 0 0 5px var(--tile-2);
    text-shadow: 0 0 5px var(--tile-2);
}

.tile-4 .tile-inner {
    border-color: var(--tile-4);
    color: var(--tile-4);
    box-shadow: inset 0 0 10px var(--tile-4), 0 0 5px var(--tile-4);
    text-shadow: 0 0 5px var(--tile-4);
}

.tile-8 .tile-inner {
    border-color: var(--tile-8);
    color: var(--tile-8);
    box-shadow: inset 0 0 10px var(--tile-8), 0 0 5px var(--tile-8);
    text-shadow: 0 0 5px var(--tile-8);
}

.tile-16 .tile-inner {
    border-color: var(--tile-16);
    color: var(--tile-16);
    box-shadow: inset 0 0 10px var(--tile-16), 0 0 5px var(--tile-16);
    text-shadow: 0 0 5px var(--tile-16);
}

.tile-32 .tile-inner {
    border-color: var(--tile-32);
    color: var(--tile-32);
    box-shadow: inset 0 0 10px var(--tile-32), 0 0 5px var(--tile-32);
    text-shadow: 0 0 5px var(--tile-32);
}

.tile-64 .tile-inner {
    border-color: var(--tile-64);
    color: var(--tile-64);
    box-shadow: inset 0 0 10px var(--tile-64), 0 0 5px var(--tile-64);
    text-shadow: 0 0 5px var(--tile-64);
}

.tile-128 .tile-inner {
    border-color: var(--tile-128);
    color: var(--tile-128);
    box-shadow: inset 0 0 10px var(--tile-128), 0 0 15px var(--tile-128);
    text-shadow: 0 0 10px var(--tile-128);
}

.tile-256 .tile-inner {
    border-color: var(--tile-256);
    color: var(--tile-256);
    box-shadow: inset 0 0 10px var(--tile-256), 0 0 15px var(--tile-256);
    text-shadow: 0 0 10px var(--tile-256);
}

.tile-512 .tile-inner {
    border-color: var(--tile-512);
    color: var(--tile-512);
    box-shadow: inset 0 0 10px var(--tile-512), 0 0 20px var(--tile-512);
    text-shadow: 0 0 10px var(--tile-512);
}

.tile-1024 .tile-inner {
    border-color: var(--tile-1024);
    color: var(--tile-1024);
    box-shadow: inset 0 0 10px var(--tile-1024), 0 0 25px var(--tile-1024);
    text-shadow: 0 0 10px var(--tile-1024);
}

.tile-2048 .tile-inner {
    border-color: var(--tile-2048);
    color: var(--tile-2048);
    box-shadow: inset 0 0 10px var(--tile-2048), 0 0 30px var(--tile-2048);
    text-shadow: 0 0 10px var(--tile-2048);
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 10px var(--tile-2048);
    }

    100% {
        box-shadow: 0 0 30px var(--tile-2048), 0 0 10px #fff;
    }
}

.tile-merged .tile-inner {
    z-index: 20;
    animation: glitch 200ms ease;
}

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

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

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

@keyframes glitch {
    0% {
        transform: translate(0) scale(1);
        filter: hue-rotate(0deg);
    }

    20% {
        transform: translate(-2px, 2px) scale(0.9);
        filter: hue-rotate(90deg);
    }

    40% {
        transform: translate(2px, -2px) scale(1.1);
        filter: hue-rotate(-90deg);
    }

    60% {
        transform: translate(-2px, -2px) scale(0.95);
        filter: hue-rotate(180deg);
    }

    100% {
        transform: translate(0) scale(1);
        filter: hue-rotate(0deg);
    }
}

.game-message {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid var(--neon-blue);
    box-shadow: 0 0 50px var(--neon-blue);
}

.game-message p {
    font-family: 'Orbitron', sans-serif;
    font-size: 50px;
    color: var(--neon-blue);
    text-shadow: 0 0 10px var(--neon-blue);
    margin-bottom: 30px;
}

.game-message.game-won p {
    color: var(--neon-green);
    text-shadow: 0 0 10px var(--neon-green);
}

.game-message.game-over p {
    color: var(--neon-pink);
    text-shadow: 0 0 10px var(--neon-pink);
}

.lower {
    display: flex;
    gap: 20px;
}

.keep-playing-button,
.retry-button {
    background: transparent;
    color: var(--neon-blue);
    border: 1px solid var(--neon-blue);
    padding: 10px 20px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 0 5px var(--neon-blue);
}

.keep-playing-button:hover,
.retry-button:hover {
    background: var(--neon-blue);
    color: #000;
    box-shadow: 0 0 20px var(--neon-blue);
}