/* twenty48: rules used only by the twenty48 pages (loaded after base.css). */
/* 2048 board: a 4x4 float-grid (same technique as the chess/checkers/
   Connect Four boards - a JS-enforced square cell size, since CSS
   `aspect-ratio` is unreliable on E-Ink browsers). Tiles are told apart
   purely by their printed number and a couple of border/weight steps
   as the value grows, never by color, unlike the classic game's usual
   color-per-value palette - so this reads fine on a monochrome E-Ink
   display without needing sixteen shades any reader could tell apart
   on some displays but not others. */
#twenty48-board {
  display: block;
  width: 100%;
  max-width: 420px;
  border: 3px solid var(--border);
  background: var(--square-light);
  box-sizing: border-box;
  overflow: hidden;
  margin: 0 auto;
  touch-action: none;
}

.twenty48-cell {
  width: 25%;
  background: var(--square-light);
  border: 1px solid var(--border);
  box-sizing: border-box;
}

.twenty48-cell-filled {
  border-width: 2px;
}

.twenty48-cell-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  font-size: clamp(0.9rem, 5vw, 1.6rem);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.twenty48-cell-big .twenty48-cell-value {
  font-size: 1rem;
  font-size: clamp(0.7rem, 4vw, 1.3rem);
}

.twenty48-cell-huge {
  background: var(--square-dark);
}

.twenty48-cell-huge .twenty48-cell-value {
  font-size: 0.85rem;
  font-size: clamp(0.6rem, 3.2vw, 1.1rem);
}

.twenty48-controls-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
margin-top: 0.6rem;
}

/* Flexbox `gap` fallback: margin-based spacing instead, since some E-Ink browsers (Tolino confirmed) don't support `gap` on a flex container and render items with zero space between them. */
.twenty48-controls-pad > * {
  margin: 0 0.4rem 0.4rem 0;
}

.twenty48-controls-pad > *:last-child {
  margin-right: 0;
}

.twenty48-controls-row {
  display: flex;
}

/* Flexbox `gap` fallback: margin-based spacing instead, since some E-Ink browsers (Tolino confirmed) don't support `gap` on a flex container and render items with zero space between them. */
.twenty48-controls-row > * {
  margin: 0 0.4rem 0.4rem 0;
}

.twenty48-controls-row > *:last-child {
  margin-right: 0;
}

.twenty48-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 1.4em;
  border: 2px solid var(--border);
  box-sizing: border-box;
  font-size: 0.6rem;
  font-weight: 700;
}