/* ---------- 2048 ---------- */

.stage { justify-content: center; gap: 14px; }

/* ---------- score bar ---------- */

.scorebar {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 360px;
}
.scorebox {
  flex: 1 1 0;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 6px 4px;
  text-align: center;
}
.scorebox span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.scorebox b {
  display: block;
  font-size: 21px;
  font-weight: 750;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.gain {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 800;
  color: var(--ok);
  pointer-events: none;
  animation: gain-up .7s var(--ease) forwards;
}
.scorebox { position: relative; overflow: visible; }
@keyframes gain-up {
  to { transform: translate(-50%, -26px); opacity: 0; }
}

/* ---------- board ---------- */

/* Must fill the stage on its own: the board inside is sized from this box's
   measured dimensions, so it can't be the thing that gives this box height. */
.board-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board {
  position: relative;
  padding: var(--gap, 9px);
  border-radius: var(--r);
  background: var(--surface);
  touch-action: none;      /* swipes belong to the game, not the page */
}

.cell {
  position: absolute;
  width: var(--cell, 72px);
  height: var(--cell, 72px);
  border-radius: 6px;
  background: var(--bg-2);
}

.tile {
  position: absolute;
  width: var(--cell, 72px);
  height: var(--cell, 72px);
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: var(--surface-3);
  color: var(--text);
  transition: transform .11s ease-in-out;
  will-change: transform;
}

/* Digit count drives the size so 1024 fits the same box as 2. */
.tile.d1 { font-size: calc(var(--cell, 72px) * .46); }
.tile.d2 { font-size: calc(var(--cell, 72px) * .42); }
.tile.d3 { font-size: calc(var(--cell, 72px) * .34); }
.tile.d4 { font-size: calc(var(--cell, 72px) * .26); }
.tile.d5 { font-size: calc(var(--cell, 72px) * .21); }

.v2    { background: #2f3542; color: #c8d0dd; }
.v4    { background: #3c4453; color: #dfe5ee; }
.v8    { background: #d9a92f; color: #2a1f00; }
.v16   { background: #dd8a2c; color: #2a1600; }
.v32   { background: #dd6a3c; color: #2d1004; }
.v64   { background: #d94f43; color: #2d0b07; }
.v128  { background: #57ac6a; color: #06210e; }
.v256  { background: #3fae94; color: #04211b; }
.v512  { background: #4d90e6; color: #041426; }
.v1024 { background: #7a6be0; color: #0b0630; }
.v2048 { background: #d9c04a; color: #2a2200; box-shadow: 0 0 22px rgb(217 192 74 / .5); }
.vbig  { background: #24282f; color: #f0d878; box-shadow: inset 0 0 0 2px #d9c04a; }

.tile.is-new   { animation: t-appear .16s var(--ease); }
.tile.is-merge { animation: t-merge .2s var(--ease); }
.tile.is-dying { z-index: 0; }
.tile { z-index: 1; }
.tile.is-merge { z-index: 2; }

@keyframes t-appear { from { transform: var(--pos) scale(.3); opacity: 0; } }
@keyframes t-merge {
  0%   { transform: var(--pos) scale(1); }
  45%  { transform: var(--pos) scale(1.18); }
  100% { transform: var(--pos) scale(1); }
}

/* ---------- overlay ---------- */

.overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgb(14 16 20 / .84);
  z-index: 5;
  animation: fade-in .25s var(--ease);
}
.overlay[hidden] { display: none; }
.overlay b { font-size: 26px; font-weight: 800; }
.overlay p { margin: 0; color: var(--text-2); font-size: 14px; }

/* ---------- controls ---------- */

.pad {
  display: flex;
  gap: 8px;
  justify-content: center;
  width: 100%;
  max-width: 360px;
}
.pad .btn { flex: 1 1 0; }
.hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}