/* 2048 owns movement geometry; site theme, type and controls remain shared. */
#board {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-soft);
}
#board > .number-tile,
.number-motion-tile {
  font-weight: 700;
  box-shadow: inset 0 -2px 0 rgb(24 43 73 / 7%);
}
#board > .number-tile[data-level="empty"] {
  box-shadow: inset 0 1px 3px rgb(24 43 73 / 4%);
}
#board > .number-tile[data-value="4"],
#board .number-motion-tile[data-value="4"] {
  color: var(--accent-teal);
  background: var(--teal-soft);
}
#board > .number-tile[data-value="8"],
#board .number-motion-tile[data-value="8"] {
  color: var(--accent-warm);
  background: var(--warm-soft);
}
#board > .number-tile[data-value="16"],
#board .number-motion-tile[data-value="16"] {
  color: var(--accent-violet);
  background: var(--violet-soft);
}
#board > .number-tile[data-value="32"],
#board .number-motion-tile[data-value="32"] {
  color: var(--primary);
  background: var(--primary-soft);
}
#board > .number-tile[data-value="64"],
#board .number-motion-tile[data-value="64"] {
  color: var(--accent-teal);
  background: var(--teal-soft);
}
#board > .number-tile[data-level="top"],
.number-motion-tile[data-level="top"] {
  box-shadow: inset 0 0 0 2px var(--accent-violet);
}
#board[data-sliding] > .number-tile {
  color: transparent;
  background: var(--line);
  box-shadow: none;
}
.number-motion-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.number-motion-tile {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-field);
  font-size: clamp(19px, 5vw, 31px);
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  background: var(--primary-soft);
  will-change: transform;
}
.number-motion-tile[data-level="mid"] {
  color: var(--accent-teal);
  background: var(--teal-soft);
}
.number-motion-tile[data-level="high"] {
  color: var(--accent-warm);
  background: var(--warm-soft);
}
.number-motion-tile[data-level="top"] {
  color: var(--accent-violet);
  background: var(--violet-soft);
  font-size: clamp(15px, 4vw, 25px);
}
.number-score {
  position: relative;
  width: max-content;
  min-width: 70px;
}
.number-score-gain {
  position: absolute;
  left: 0;
  top: 100%;
  opacity: 0;
  pointer-events: none;
  color: var(--accent-teal);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
@media (forced-colors: active) {
  .number-motion-tile {
    border: 1px solid CanvasText;
  }
  #board[data-sliding] > .number-tile {
    color: transparent;
  }
}