* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05060a;
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: #eef1ff;
}

#wrap {
  width: 420px;
}

#hud {
  margin-bottom: 16px;
}

#hud h1 {
  margin: 0 0 10px;
  font-size: 28px;
  letter-spacing: 1px;
  color: #ffd23f;
  text-shadow: 0 0 14px rgba(255, 210, 63, 0.5);
}

#scoreRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scoreBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #14171f;
  border: 1px solid #2a2f42;
  border-radius: 6px;
  padding: 6px 16px;
  min-width: 64px;
}

.scoreLabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8890ab;
}

.scoreBox span:last-child {
  font-size: 20px;
  font-weight: 700;
}

#newGameBtn {
  margin-left: auto;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #05060a;
  background: #ffd23f;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}

#newGameBtn:hover {
  background: #ffe07a;
}

#newGameBtn:active {
  transform: scale(0.96);
}

#boardWrap {
  position: relative;
}

#board {
  position: relative;
  width: 420px;
  height: 420px;
  background: #10121c;
  border: 2px solid #3a2f14;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(255, 210, 63, 0.12);
}

#cellsLayer,
#tilesLayer {
  position: absolute;
  inset: 0;
}

.cell {
  position: absolute;
  width: 90px;
  height: 90px;
  background: #1a1d2b;
  border-radius: 6px;
}

.tile {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: left 0.1s ease, top 0.1s ease;
}

.tile-2 { background: #3a3f52; color: #eef1ff; }
.tile-4 { background: #4a4f68; color: #eef1ff; }
.tile-8 { background: #d98a3d; color: #1a1000; }
.tile-16 { background: #e07a2e; color: #1a1000; }
.tile-32 { background: #e8632a; color: #fff; }
.tile-64 { background: #ef4a26; color: #fff; }
.tile-128 { background: #f0d24a; color: #1a1000; box-shadow: 0 0 12px rgba(240, 210, 74, 0.5); }
.tile-256 { background: #f3c53a; color: #1a1000; box-shadow: 0 0 14px rgba(243, 197, 58, 0.55); }
.tile-512 { background: #f5b82a; color: #1a1000; box-shadow: 0 0 16px rgba(245, 184, 42, 0.6); }
.tile-1024 { background: #f7ab1a; color: #1a1000; box-shadow: 0 0 18px rgba(247, 171, 26, 0.65); }
.tile-2048 { background: #ffd23f; color: #1a1000; box-shadow: 0 0 24px rgba(255, 210, 63, 0.85); }
.tile-super { background: #1a1a2e; color: #ffd23f; border: 2px solid #ffd23f; box-shadow: 0 0 22px rgba(255, 210, 63, 0.6); }

.tile-spawn {
  animation: pop 0.18s ease;
}

.tile-merge {
  animation: mergePop 0.18s ease;
}

@keyframes pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes mergePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(6, 5, 2, 0.88);
  border-radius: 10px;
  text-align: center;
  padding: 20px;
}

#overlay.hidden {
  display: none;
}

#overlayTitle {
  margin: 0;
  font-size: 26px;
  letter-spacing: 1px;
  color: #ffd23f;
  text-shadow: 0 0 14px rgba(255, 210, 63, 0.7);
}

#overlayMsg {
  margin: 0;
  color: #d8ddf5;
  font-size: 14px;
}

#overlayButtons {
  display: flex;
  gap: 10px;
}

#overlayButtons button {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  color: #05060a;
  background: #ffd23f;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}

#overlayButtons button:hover {
  background: #ffe07a;
}

#overlayButtons button:active {
  transform: scale(0.96);
}

#overlayButtons button.hidden {
  display: none;
}

#hint {
  margin: 14px 4px 0;
  font-size: 12px;
  color: #7c84a3;
  text-align: center;
}