/* ── 2048 surfaces ───────────────────────────────────────────
 * Everything here is prefixed .twenty48-. The board itself is the shell's
 * .gboard / .gcell; this file only sets the 4 column geometry and the tile
 * ramp, which are the parts that are genuinely game specific.
 * Link after css/style.css.
 */

.twenty48-board {
  --cols: 4;
  --cell: min(66px, 17vw);
  --gap: 6px;
}
.twenty48-board--sm {
  --cell: min(34px, 9vw);
  --gap: 3px;
}

.twenty48-tile {
  cursor: default;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: calc(var(--cell) * 0.34);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-muted);
  transition: background-color 0.1s var(--ease-out), color 0.1s var(--ease-out);
}

/* Digit count, so 1024 does not spill out of its cell. */
.twenty48-tile[data-val="2"],
.twenty48-tile[data-val="4"],
.twenty48-tile[data-val="8"] { font-size: calc(var(--cell) * 0.46); }
.twenty48-tile[data-val="16"],
.twenty48-tile[data-val="32"],
.twenty48-tile[data-val="64"] { font-size: calc(var(--cell) * 0.42); }
.twenty48-tile[data-val="128"],
.twenty48-tile[data-val="256"],
.twenty48-tile[data-val="512"] { font-size: calc(var(--cell) * 0.33); }
.twenty48-tile[data-val="1024"],
.twenty48-tile[data-val="2048"],
.twenty48-tile[data-val="4096"],
.twenty48-tile[data-val="8192"] { font-size: calc(var(--cell) * 0.25); }

/* The ramp: cold at the tail, warm at the head, so the chain reads as a
   gradient and a break shows up as a colour that jumps. */
.twenty48-tile[data-val="2"]     { background: #123c46; color: #a5f3fc; }
.twenty48-tile[data-val="4"]     { background: #14515c; color: #cffafe; }
.twenty48-tile[data-val="8"]     { background: #0e6f78; color: #ecfeff; }
.twenty48-tile[data-val="16"]    { background: #0b8f94; color: #f0fdfa; }
.twenty48-tile[data-val="32"]    { background: #14a89e; color: #04252a; }
.twenty48-tile[data-val="64"]    { background: #2bc0a0; color: #04252a; }
.twenty48-tile[data-val="128"]   { background: #63d295; color: #062616; }
.twenty48-tile[data-val="256"]   { background: #a5dd83; color: #10280d; }
.twenty48-tile[data-val="512"]   { background: #ded96a; color: #2a2405; }
.twenty48-tile[data-val="1024"]  { background: #f0a95c; color: #2a1605; }
.twenty48-tile[data-val="2048"]  { background: #f4705a; color: #2a0a05; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.twenty48-tile[data-val="4096"]  { background: #ef4f7b; color: #2c0713; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.twenty48-tile[data-val="8192"]  { background: #c04ce0; color: #fdf4ff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.twenty48-tile[data-val="16384"] { background: #7c5cf0; color: #f5f3ff; font-size: calc(var(--cell) * 0.21); }

/* The shell ring is cyan on cyan once a tile is lit, so 2048 marks the
   question cell with a light outline sitting outside the tile instead. */
.twenty48-tile.is-target {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.92);
  outline: 2px solid var(--game-accent);
  outline-offset: 2px;
}

/* Four short labels want four columns, not the generic three plus one. */
.choicegrid.twenty48-choices {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 480px;
}
@media (max-width: 560px) {
  .choicegrid.twenty48-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Motion ──────────────────────────────────────────────────
   The board is repainted whole, so these fire on the cells that changed. */
.twenty48-pop { animation: twenty48Pop 0.16s var(--ease-out) both; }
.twenty48-merge { animation: twenty48Merge 0.18s var(--ease-out) both; }
.twenty48-bump { animation: twenty48Bump 0.2s var(--ease-out); }

@keyframes twenty48Pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes twenty48Merge {
  0% { transform: scale(1); }
  55% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
@keyframes twenty48Bump {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  70% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .twenty48-pop, .twenty48-merge, .twenty48-bump { animation: none; }
}

/* ── Live read panel ─────────────────────────────────────── */
.twenty48-panel {
  padding: var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  row-gap: var(--space-2);
  align-items: baseline;
}
.twenty48-panel .kv__v { font-variant-numeric: tabular-nums; }
.twenty48-message { max-width: 70ch; }
.twenty48-warn { max-width: 70ch; }

/* ── Drill readout, appended under the choices after grading ─ */
.twenty48-readout {
  width: 100%;
  max-width: 560px;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.twenty48-readout__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--game-accent);
}
.twenty48-readout .kv__v { font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* ── Rules tab switches ──────────────────────────────────── */
.ruleswitch.twenty48-switchrow {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.twenty48-switch { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.twenty48-switch strong { font-size: var(--text-sm); font-weight: 650; }
.twenty48-switch small { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; }

/* ── Pattern card diagrams ───────────────────────────────── */
.twenty48-diagram .gboard { padding: var(--space-1); }