/* ═══════════════════════════════════════════════════════════════════════════
   2048 — the usual Spotify black and green, built around one square board.

   THE RULE THAT MUST NOT BE DELETED
   ---------------------------------
   [hidden] { display: none !important; }   (see below)

   The overlays are position:fixed elements covering the whole screen. Any rule
   that gives them a display value (a flex, a grid, an inline-grid) will beat the
   browser's default `[hidden] { display: none }`, and an invisible overlay that
   is still laid out swallows every click on the page. That has bitten this repo
   before, which is why this one is !important and lives at the top.

   THE BOARD
   ---------
   The board is a plain square. Behind the tiles sits a CSS grid of "holes" (one
   per cell) that never move; in front of them sits a layer of absolutely
   positioned tiles. A tile is positioned by left/top percentages, so moving it
   is a CSS transition on two numbers — the slide animates for free, and (just as
   importantly) the tile's row, column and value are readable from the DOM, which
   is what lets the browser tests assert where a tile is rather than guess.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #000000;
  --panel: #121212;
  --panel-2: #181818;
  --elevated: #1f1f1f;
  --border: #282828;
  --border-strong: #404040;
  --text: #ffffff;
  --muted: #a7a7a7;
  --green: #1db954;
  --green-bright: #1ed760;
  --on-green: #041005;
  --danger: #f15e6c;
  --warn: #f0c000;
  --radius: 12px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.55);

  /* The board itself. `--pad` is both the gap around a grid hole and the inset
     of a tile's face, so the two line up exactly at every board size. */
  --board-bg: #101410;
  --cell-bg: #1b1f1b;
  --pad: clamp(3px, 1.1vw, 6px);
  --tile-radius: 8px;
}

[data-theme="light"] {
  --bg: #f6f6f4;
  --panel: #ffffff;
  --panel-2: #f1f1ef;
  --elevated: #ffffff;
  --border: #dcdcd8;
  --border-strong: #bfbfba;
  --text: #0b0b0b;
  --muted: #5f5f5c;
  --green: #128c3f;
  --green-bright: #17a44a;
  --on-green: #ffffff;
  --danger: #bf2b3a;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  --board-bg: #e8e8e4;
  --cell-bg: #dcdcd6;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── The rule that keeps the overlays from swallowing the page ────────────── */
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

/* A live region with no visual presence, for the screen-reader board mirror. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px clamp(12px, 3vw, 28px);
}

.topbar-right { display: flex; align-items: center; gap: 10px; }

.home-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}
.home-btn:hover { color: var(--green); border-color: var(--green); }
.home-btn svg { width: 16px; height: 16px; }

.user-badge { font-size: 12px; font-weight: 800; color: var(--green); }

.settings-btn {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.settings-btn:hover { color: var(--green); border-color: var(--green); transform: rotate(25deg); }
.settings-btn svg { width: 18px; height: 18px; }

/* ── Page shell ──────────────────────────────────────────────────────────── */

.app {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 28px) 48px;
  display: grid;
  gap: 14px;
}

.header { text-align: center; padding: 4px 0 0; }

.title {
  font-size: clamp(38px, 11vw, 62px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}
.title .accent { color: var(--green); }

.subtitle { color: var(--muted); font-size: 13px; margin-top: 6px; }

/* ── HUD ─────────────────────────────────────────────────────────────────── */

.hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.hud-stat { display: grid; justify-items: center; gap: 2px; }
.hud-value { font-size: 20px; font-weight: 900; color: var(--green); }
.hud-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ── Progress toward the target ──────────────────────────────────────────── */

.progress-wrap { display: flex; align-items: center; gap: 10px; }

.progress-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--green);
  transition: width .25s ease;
}
.progress-text { font-size: 11px; font-weight: 800; color: var(--muted); white-space: nowrap; }

/* ── The board ───────────────────────────────────────────────────────────── */

.board-area { display: flex; justify-content: center; }

.board {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: var(--board-bg);
  border: 1px solid var(--border);
  touch-action: none;   /* the swipe handler owns this area, not the page scroll */
}

.grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--n, 4), 1fr);
  grid-template-rows: repeat(var(--n, 4), 1fr);
}

.cell {
  margin: var(--pad);
  border-radius: var(--tile-radius);
  background: var(--cell-bg);
  transition: background .2s ease;
}

/* Grid lines off: the holes go quiet but the board keeps its shape. */
.no-grid .cell { background: transparent; }

.tiles { position: absolute; inset: 0; }

.tile {
  position: absolute;
  /* The whole reason tiles are DOM elements: a move is two numbers transitioning. */
  transition: left .12s ease, top .12s ease;
  will-change: left, top;
}

.tile__face {
  position: absolute;
  inset: var(--pad);
  border-radius: var(--tile-radius);
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: #24391f;
  color: #eafbe7;
  user-select: none;
}

/* A spawned tile pops in. */
.tile--new .tile__face { animation: tile-pop .15s ease; }
/* A merged tile lands a little harder. */
.tile--merged .tile__face { animation: tile-merge .18s ease; }

@keyframes tile-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes tile-merge {
  0%   { transform: scale(0.8); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ── Tile colours: a green ramp that gets hotter as the tile grows ────────── */

.tile[data-value="2"]    .tile__face { background: #1e2a1e; color: #cfe8cf; }
.tile[data-value="4"]    .tile__face { background: #25401f; color: #d7f2d2; }
.tile[data-value="8"]    .tile__face { background: #2b5a2b; color: #e6ffe4; }
.tile[data-value="16"]   .tile__face { background: #267840; color: #eafff0; }
.tile[data-value="32"]   .tile__face { background: #1db954; color: #041005; }
.tile[data-value="64"]   .tile__face { background: #1ed760; color: #041005; }
.tile[data-value="128"]  .tile__face { background: #7ee787; color: #08130a; }
.tile[data-value="256"]  .tile__face { background: #a5f3a5; color: #08130a; }
.tile[data-value="512"]  .tile__face { background: #d6ffd6; color: #08130a; }
.tile[data-value="1024"] .tile__face { background: #ffe066; color: #241c00; }
.tile[data-value="2048"] .tile__face { background: #ffd43b; color: #241c00; box-shadow: 0 0 22px rgba(255, 212, 59, 0.5); }
.tile[data-value="4096"] .tile__face { background: #ff922b; color: #241200; box-shadow: 0 0 22px rgba(255, 146, 43, 0.55); }
.tile[data-value="8192"] .tile__face { background: #ff5c5c; color: #2a0000; box-shadow: 0 0 24px rgba(255, 92, 92, 0.55); }
/* Above 8192 there is no name for it; one bright, obvious colour does. */
.tile[data-value="16384"] .tile__face,
.tile[data-value="32768"] .tile__face { background: #f0f0f0; color: #111111; }

/* Font sizes follow the board size, so a 5x5 board stays readable. */
.board[data-size="3"] .tile__face { font-size: clamp(20px, 8vw, 40px); }
.board[data-size="4"] .tile__face { font-size: clamp(16px, 6vw, 32px); }
.board[data-size="5"] .tile__face { font-size: clamp(12px, 5vw, 26px); }

/* A direction that cannot do anything gets a small shake, so a dead key is
   feedback rather than silence. */
.board.nudge-left  { animation: nudge-left .16s ease; }
.board.nudge-right { animation: nudge-right .16s ease; }
.board.nudge-up    { animation: nudge-up .16s ease; }
.board.nudge-down  { animation: nudge-down .16s ease; }
@keyframes nudge-left  { 50% { transform: translateX(-4px); } }
@keyframes nudge-right { 50% { transform: translateX(4px); } }
@keyframes nudge-up    { 50% { transform: translateY(-4px); } }
@keyframes nudge-down  { 50% { transform: translateY(4px); } }

/* ── Controls ────────────────────────────────────────────────────────────── */

.controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.ctrl-btn {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}
.ctrl-btn:hover:not(:disabled) { border-color: var(--green); color: var(--green); transform: translateY(-1px); }
.ctrl-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ctrl-btn.primary { background: var(--green); border-color: var(--green); color: var(--on-green); }
.ctrl-btn.primary:hover { background: var(--green-bright); color: var(--on-green); }
.ctrl-btn.active { background: var(--green); border-color: var(--green); color: var(--on-green); }

/* ── The hint line ───────────────────────────────────────────────────────── */

.hint-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 20px;
  padding: 0 4px;
  font-size: 12px;
  color: var(--muted);
}
.hint-state { font-weight: 800; color: var(--green); white-space: nowrap; }
.hint-state.busy { color: var(--warn); }

/* ── Board size selector ─────────────────────────────────────────────────── */

.size-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.size-label, .size-note { font-size: 11px; font-weight: 800; color: var(--muted); }

/* Three options in the shared segmented control (which defaults to two). */
.segmented-control.size-group { grid-template-columns: repeat(3, 1fr); }

.size-btn {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.size-btn:hover { color: var(--text); }
.size-btn.active { background: var(--green); color: var(--on-green); }

/* ── On-screen arrows ────────────────────────────────────────────────────── */

.dpad {
  display: grid;
  grid-template-columns: repeat(3, 54px);
  grid-template-rows: repeat(3, 54px);
  gap: 6px;
  justify-content: center;
}

.dpad-btn {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .12s ease;
}
.dpad-btn:hover { border-color: var(--green); color: var(--green); }
.dpad-btn:active { transform: scale(0.94); }
/* The solver's suggestion is shown on the arrow itself, not in a corner note. */
.dpad-btn.hinted {
  border-color: var(--green);
  color: var(--on-green);
  background: var(--green);
  box-shadow: 0 0 18px rgba(29, 185, 84, 0.4);
}

.dpad-btn.up    { grid-area: 1 / 2; }
.dpad-btn.left  { grid-area: 2 / 1; }
.dpad-btn.down  { grid-area: 3 / 2; }
.dpad-btn.right { grid-area: 2 / 3; }

.key-hint { text-align: center; font-size: 11px; color: var(--muted); }

/* ── Overlays ────────────────────────────────────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(6px);
  z-index: 40;
}

.overlay-card {
  width: min(400px, 100%);
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  padding: 24px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.overlay-icon { font-size: 40px; line-height: 1; }
.overlay-card h2 { font-size: 24px; font-weight: 900; }
.overlay-card p { font-size: 13px; color: var(--muted); }

.over-stats { display: flex; gap: 24px; }
.over-stat { display: grid; justify-items: center; gap: 2px; }
.over-value { font-size: 24px; font-weight: 900; color: var(--green); }
.over-label { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--muted); }

.overlay-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ── Buttons shared by the overlay and the settings dialog ───────────────── */

.primary-button,
.secondary-button {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.primary-button { border: 0; background: var(--green); color: var(--on-green); }
.primary-button:hover { background: var(--green-bright); transform: translateY(-1px); }
.secondary-button { border: 1px solid var(--border-strong); background: transparent; color: var(--text); }
.secondary-button:hover { border-color: var(--green); color: var(--green); }

/* ── Settings extras ─────────────────────────────────────────────────────── */

.field-note {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── Toast ───────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 20px);
  max-width: min(90vw, 420px);
  padding: 11px 18px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 70;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: var(--danger); }

/* ── Class toggles driven by Settings ────────────────────────────────────── */

/* Animations off: no transitions and no keyframes anywhere. */
.no-anim *,
.no-anim *::before,
.no-anim *::after {
  transition: none !important;
  animation: none !important;
}

/* On-screen arrows off. */
.no-touch .dpad { display: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 420px) {
  .hud { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .controls { grid-template-columns: repeat(2, 1fr); }
  .dpad { grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); }
  .hint-line { font-size: 11px; }
}

/* Respect a user who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}