body {
    background: radial-gradient(circle at top, #0a0e27, #050812);
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    font-family:Segoe UI,sans-serif;
    color:white;
    overscroll-behavior: contain;
    touch-action: none;
}

.game-container {
    text-align:center;
    background:rgba(0,217,255,0.05);
    padding:25px;
    border-radius:18px;
    border:1px solid rgba(0,217,255,0.3);
    box-shadow:0 0 30px rgba(0,217,255,0.4);
    width:min(90vw,350px);
}

#grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:20px 0;
}

.cell {
    aspect-ratio:1;
    background:#0a1338;
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
    font-weight:700;
    box-shadow:inset 0 0 10px rgba(0,217,255,0.3);
    transition: all 0.2s ease;
}

/* Tile Colors */
.t2    { background:#1e3a8a; color:#93c5fd; }
.t4    { background:#065f46; color:#6ee7b7; }
.t8    { background:#7c2d12; color:#fdba74; }
.t16   { background:#4c1d95; color:#c4b5fd; }
.t32   { background:#7f1d1d; color:#fca5a5; }
.t64   { background:#92400e; color:#fde68a; }
.t128  { background:#1e40af; color:#bfdbfe; }
.t256  { background:#166534; color:#86efac; }
.t512  { background:#831843; color:#f9a8d4; }
.t1024 { background:#0f172a; color:#38bdf8; }
.t2048 { background:#facc15; color:#000000; }

.tile {
    color:#00ff9c;
    text-shadow:0 0 10px #00ff9c;
}

button {
    margin-top:10px;
    padding:10px 24px;
    border-radius:40px;
    border:none;
    background:linear-gradient(135deg,#00d9ff,#7c3aed);
    color:#050812;
    font-weight:700;
    box-shadow:0 0 20px rgba(0,217,255,0.7);
    cursor:pointer;
}


