/* --- 2048 Neon Tiles --- */

#board {
  background: transparent;
}

.tile {
  border-radius: 8px;
  font-weight: 700;
  color: #e5e7eb;
  text-shadow: 0 0 6px rgba(0,0,0,.4);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}

/* base “off” tile */
.tile-0 {
  background: rgba(15,23,42,.9);
  border: 1px solid rgba(15,23,42,.8);
  box-shadow: none;
}

/* value tiers */
.tile-2   { background: rgba(56,189,248,.12); border:1px solid rgba(56,189,248,.7); box-shadow:0 0 10px rgba(56,189,248,.4); }
.tile-4   { background: rgba(56,189,248,.2);  border:1px solid rgba(56,189,248,.9); box-shadow:0 0 12px rgba(56,189,248,.6); }
.tile-8   { background: rgba(34,197,94,.2);  border:1px solid rgba(34,197,94,.9); box-shadow:0 0 12px rgba(34,197,94,.7); }
.tile-16  { background: rgba(250,204,21,.18); border:1px solid rgba(250,204,21,.9); box-shadow:0 0 14px rgba(250,204,21,.7); }
.tile-32  { background: rgba(250,204,21,.24); border:1px solid rgba(250,204,21,1); box-shadow:0 0 16px rgba(250,204,21,.8); }
.tile-64  { background: rgba(248,113,113,.22); border:1px solid rgba(239,68,68,1); box-shadow:0 0 16px rgba(239,68,68,.8); }
.tile-128 { background: rgba(168,85,247,.24); border:1px solid rgba(168,85,247,1); box-shadow:0 0 18px rgba(168,85,247,.85); }
.tile-256,
.tile-512,
.tile-1024,
.tile-2048 {
  background: linear-gradient(135deg, #38bdf8, #a855f7);
  border: 1px solid rgba(248,250,252,.9);
  box-shadow: 0 0 22px rgba(168,85,247,.9);
}

/* spawn / merge animations already wired by your JS */
.tile-new {
  animation: tile-pop .14s ease-out;
}

.tile-merge {
  animation: tile-merge .18s ease-out;
}

@keyframes tile-pop {
  0%   { transform: scale(.7);   }
  100% { transform: scale(1);    }
}
@keyframes tile-merge {
  0%   { transform: scale(1.1); }
  100% { transform: scale(1);   }
}