/* src/main/resources/static/css/tiles.css */

.tile, .active-tile, .falling-tile {
  position: absolute;
  width: var(--tile-size, 60px); height: var(--tile-size, 60px);
  border-radius: 50%;
  background: var(--hull);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: calc(var(--tile-size, 60px) * 0.42);
  letter-spacing: -0.04em;
  color: currentColor;
  transition: left 80ms ease-out;
}

.tile.born   { animation: born 260ms cubic-bezier(.34,1.56,.64,1) both; }
.tile.bounce { animation: bounce 220ms cubic-bezier(.34,1.56,.64,1) both; }

.t-2    { color: var(--t-2);    box-shadow: 0 0 0 1px rgba(104,144,255,0.3),   0 0 12px rgba(104,144,255,0.30); }
.t-4    { color: var(--t-4);    box-shadow: 0 0 0 1px rgba(138,120,255,0.3),   0 0 14px rgba(138,120,255,0.30); }
.t-8    { color: var(--t-8);    box-shadow: 0 0 0 1px rgba(76,214,192,0.3),    0 0 16px rgba(76,214,192,0.32); }
.t-16   { color: var(--t-16);   box-shadow: 0 0 0 1px rgba(95,255,176,0.3),    0 0 18px rgba(95,255,176,0.34); }
.t-32   { color: var(--t-32);   box-shadow: 0 0 0 1px rgba(176,255,96,0.3),    0 0 20px rgba(176,255,96,0.36); }
.t-64   { color: var(--t-64);   box-shadow: 0 0 0 1px rgba(240,224,64,0.3),    0 0 22px rgba(240,224,64,0.38); }
.t-128  { color: var(--t-128);  box-shadow: 0 0 0 1px rgba(255,184,64,0.3),    0 0 24px rgba(255,184,64,0.40); }
.t-256  { color: var(--t-256);  box-shadow: 0 0 0 1px rgba(255,136,56,0.3),    0 0 26px rgba(255,136,56,0.42); }
.t-512  { color: var(--t-512);  box-shadow: 0 0 0 1px rgba(255,88,64,0.3),     0 0 28px rgba(255,88,64,0.44); }
.t-1024 { color: var(--t-1024); box-shadow: 0 0 0 1px rgba(255,56,112,0.3),    0 0 30px rgba(255,56,112,0.46); }
.t-2048 {
  color: #0d1216; background: var(--t-2048);
  box-shadow: 0 0 0 1px rgba(255,216,96,0.4), 0 0 36px rgba(255,216,96,0.55);
}
.t-4096 {
  color: #0d1216; background: var(--t-4096);
  box-shadow: 0 0 0 1px rgba(255,240,160,0.5), 0 0 44px rgba(255,240,160,0.65);
}

.dead {
  color: var(--read-dim);
  background:
    repeating-linear-gradient(
      45deg,
      #08100c 0, #08100c 4px,
      transparent 4px, transparent 8px
    ),
    #08100c;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.5),
    0 0 0 1px rgba(192,208,200,0.08);
}