/* ======================
   GLOBAL
====================== */
body {
    background: radial-gradient(circle at center, #0a0a0a, #000);
    background-size: 300% 300%;
    animation: bgMove 15s infinite alternate;
    font-family: 'Poppins', sans-serif;
    color: white;
    text-align: center;
    padding-top: 20px;
}

/* Background animasi lembut */
@keyframes bgMove {
    0% { background-position: 0% 30%; }
    50% { background-position: 50% 70%; }
    100% { background-position: 100% 30%; }
}

h1 {
    font-size: 40px;
    font-weight: bold;
    text-shadow: 0 0 20px #00eaff, 0 0 40px #0099ff;
}

button {
    padding: 12px 22px;
    margin: 8px;
    background: #111;
    color: white;
    border: 2px solid #00eaff;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.25s;
    font-weight: bold;
}
button:hover {
    box-shadow: 0 0 15px #00eaff;
    transform: scale(1.05);
}

#score {
    color: #00eaff;
    text-shadow: 0 0 10px #00eaff;
    font-weight: bold;
    font-size: 20px;
}

/* ======================
   BOARD
====================== */


/* ==========================
   BOARD — MIRIP BORDER LOGIN
========================== */

#board {
    width: 460px;
    height: 460px;
    margin: 35px auto;
    padding: 20px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 12px;

    background: rgba(30, 0, 50, 0.6); /* DALAM GELAP SAMA LOGIN */
    backdrop-filter: blur(10px);

    border: 2px solid rgba(0, 217, 255, 0.3); /* SAMA LOGIN */
    border-radius: 20px;

    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 217, 255, 0.3),
        inset 0 0 30px rgba(0, 217, 255, 0.1);

    animation: glowBorderBoard 3s ease-in-out infinite;
}

/* Border berubah warna seperti login */
@keyframes glowBorderBoard {
    0%, 100% {
        border-color: rgba(0, 217, 255, 0.4);
        box-shadow: 
            0 20px 60px rgba(0, 0, 0, 0.5),
            0 0 40px rgba(0, 217, 255, 0.3),
            inset 0 0 30px rgba(0, 217, 255, 0.1);
    }
    50% {
        border-color: rgba(255, 0, 255, 0.5);
        box-shadow: 
            0 20px 60px rgba(0, 0, 0, 0.5),
            0 0 50px rgba(255, 0, 255, 0.4),
            inset 0 0 40px rgba(255, 0, 255, 0.15);
    }
}



/* ======================
   TILE
====================== */
.tile {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 32px;
    font-weight: bold;

    color: white;
    background: rgba(255, 255, 255, 0.06);
    text-shadow: 0 0 10px white;

    transition: 0.1s;
}

/* animasi tile baru */
.tile.new {
    animation: pop 0.25s ease-out;
}
@keyframes pop {
    0% { transform: scale(0.2); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Neon warna berdasarkan angka */
.tile-2 { background: #00eaff55; box-shadow: 0 0 10px #00eaff; }
.tile-4 { background: #00ff9955; box-shadow: 0 0 10px #00ff99; }
.tile-8 { background: #ff00ff55; box-shadow: 0 0 10px #ff00ff; }
.tile-16 { background: #ff006655; box-shadow: 0 0 10px #ff0066; }
.tile-32 { background: #ffaa0055; box-shadow: 0 0 10px #ffaa00; }
.tile-64 { background: #ff000055; box-shadow: 0 0 10px #ff0000; }
.tile-128 { background: #5f00ff55; box-shadow: 0 0 10px #5f00ff; }
.tile-256 { background: #00ffea55; box-shadow: 0 0 10px #00ffea; }
.tile-512 { background: #ff00aa55; box-shadow: 0 0 10px #ff00aa; }
.tile-1024 { background: #00ffaa55; box-shadow: 0 0 10px #00ffaa; }
.tile-2048 { background: #ffd70066; box-shadow: 0 0 15px #ffd700; }

/* ======= ENHANCEMENTS: Animations, Particles, Glows ======= */

/* ensure board stacking context for absolute animations */
#board { position: relative; z-index: 2; }

.particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background:
      radial-gradient(circle at 20% 30%, rgba(0,234,255,0.18), transparent 45%),
      radial-gradient(circle at 80% 70%, rgba(255,0,90,0.18), transparent 45%),
      radial-gradient(circle at 50% 50%, rgba(140,0,255,0.14), transparent 55%),
      radial-gradient(circle at 10% 85%, rgba(0,255,200,0.12), transparent 55%),
      radial-gradient(circle at 90% 15%, rgba(255,0,255,0.15), transparent 45%);

    filter: blur(55px) brightness(120%) saturate(130%);
    animation: particlesFloat 18s ease-in-out infinite alternate;
}

@keyframes particlesFloat {
    0%   { transform: translateY(0px) translateX(0px); }
    50%  { transform: translateY(-25px) translateX(10px); }
    100% { transform: translateY(-40px) translateX(-15px); }
}


.cursor-light {
    position: absolute;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(0,255,255,0.25), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    filter: blur(40px);
    mix-blend-mode: screen;
    opacity: 0.6;
}


/* gentle vertical float */
@keyframes floatBg { 0% { transform: translateY(0);} 100% { transform: translateY(-14px);} }

/* Tile move / slide illusion: tiles appear from direction */
.tile {
    transition: transform 0.14s cubic-bezier(.2,.8,.2,1), opacity 0.12s linear, box-shadow 0.12s;
    will-change: transform, opacity, box-shadow;
}

/* 'new' pop kept but slightly tuned */
.tile.new {
    animation: pop 0.22s cubic-bezier(.2,.9,.2,1);
}

/* merge pop */
.tile.merge {
    animation: mergePop 0.24s ease-out;
    z-index: 3;
}
@keyframes mergePop {
    0% { transform: scale(1); box-shadow: 0 0 6px rgba(255,255,255,0.1); }
    50% { transform: scale(1.18); box-shadow: 0 0 30px rgba(255,255,255,0.35); }
    100% { transform: scale(1); box-shadow: 0 0 6px rgba(255,255,255,0.1); }
}

/* board shake when invalid move */
#board.shake {
    animation: shakeBoard 0.36s;
}
@keyframes shakeBoard {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

/* ambient glow under board (keeps aesthetics) */
#board::after {
    content: "";
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    height: 84px;
    background: radial-gradient(ellipse at center, rgba(0,234,255,0.12), transparent 60%);
    filter: blur(30px);
    z-index: 0;
}

/* special 2048 tile sparkle (adds shimmer) */
.tile-2048 {
    animation: goldShimmer 2.4s infinite;
}
@keyframes goldShimmer {
    0% { box-shadow: 0 0 10px #ffd70066; transform: translateZ(0); }
    50% { box-shadow: 0 0 26px #ffd700aa; transform: translateY(-2px); }
    100% { box-shadow: 0 0 10px #ffd70066; transform: translateZ(0); }
}

/* small particle bits that appear for merge */
.merge-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.95;
    will-change: transform, opacity;
    filter: blur(1px) drop-shadow(0 0 6px rgba(255,255,255,0.08));
}

/* ensure base tile readability on animation */
.tile { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* mobile touch hint (optional) */
.touch-hint {
    position: fixed;
    right: 18px;
    bottom: 18px;
    background: rgba(0,0,0,0.45);
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
    z-index: 4;
    color: #cfefff;
}

.starfield {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.starfield span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(0,255,255,0.8);
    border-radius: 50%;
    filter: blur(2px);
    animation: starMove linear infinite;
}

/* bintang bergerak random */
@keyframes starMove {
    0% { transform: translateY(0); opacity: 0.8; }
    100% { transform: translateY(-700px); opacity: 0; }
}