@import url('../shared/game-shell.css');

.game-board-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.grid-container {
  width: 340px;
  height: 340px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  position: relative;
  padding: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  touch-action: none;
}

.grid-cell {
  width: 68px;
  height: 68px;
  float: left;
  margin: 6px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
}

.tile {
  position: absolute;
  width: 68px;
  height: 68px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  transition: transform 150ms ease-in-out;
  will-change: transform;
  z-index: 10;
}

@keyframes pop {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.tile-merged { animation: pop 200ms ease-in-out; }

.t-2 { background: rgba(0, 240, 255, 0.2); color: #00f0ff; border: 1px solid #00f0ff; box-shadow: 0 0 10px rgba(0, 240, 255, 0.3); }
.t-4 { background: rgba(112, 0, 255, 0.3); color: #b366ff; border: 1px solid #7000ff; box-shadow: 0 0 12px rgba(112, 0, 255, 0.4); }
.t-8 { background: rgba(255, 0, 119, 0.4); color: #ff66b2; border: 1px solid #ff0077; box-shadow: 0 0 15px rgba(255, 0, 119, 0.5); }
.t-16 { background: rgba(255, 183, 0, 0.4); color: #ffcc00; border: 1px solid #ffb700; box-shadow: 0 0 15px rgba(255, 183, 0, 0.5); }
.t-32 { background: rgba(0, 255, 136, 0.4); color: #66ffb3; border: 1px solid #00ff88; box-shadow: 0 0 15px rgba(0, 255, 136, 0.5); }
.t-64 { background: rgba(0, 240, 255, 0.6); color: #ffffff; border: 1px solid #00f0ff; box-shadow: 0 0 20px #00f0ff; }
.t-128 { background: rgba(255, 0, 119, 0.7); color: #ffffff; border: 1px solid #ff0077; box-shadow: 0 0 25px #ff0077; }
.t-256 { background: rgba(255, 183, 0, 0.8); color: #ffffff; border: 1px solid #ffb700; box-shadow: 0 0 30px #ffb700; }
.t-512 { background: rgba(0, 255, 136, 0.85); color: #ffffff; border: 1px solid #00ff88; box-shadow: 0 0 35px #00ff88; }
.t-1024 { background: rgba(112, 0, 255, 0.9); color: #ffffff; border: 1px solid #7000ff; box-shadow: 0 0 40px #7000ff; }
.t-2048 { background: linear-gradient(135deg, #00f0ff, #ff0077); color: #ffffff; border: 1px solid #ffffff; box-shadow: 0 0 50px #00f0ff; }

.controls-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}