/* ============================================================
   2048 — what differs from the shared game screen
   ============================================================
   Loads after /pixelflow/assets/game.css. Only the differences
   live here — and there are more than usual, because this is the
   one game with no levels, so the level furniture is replaced
   rather than reused.
   ============================================================ */

:root{ --accent:#8544be }

.board-wrap{position:relative;line-height:0}
canvas#board{
  display:block;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px rgba(15,23,42,.08);
  /* The swipe IS the move, so the browser cannot have the gesture. */
  touch-action:none;
  -webkit-user-select:none;user-select:none;
}

/* ── the bar above the board ─────────────────────────────────────────────
   Score, best, and undo. The score is the game, so it gets the largest
   numbers on the screen after the tiles themselves. */
.tools{
  flex:none;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:0 0 11px;
  transition:filter .42s cubic-bezier(.2,.8,.3,1),opacity .42s ease;
}
body.settling .tools{filter:blur(5px);opacity:.45}
@media (prefers-reduced-motion:reduce){ body.settling .tools{filter:none;opacity:1} }

.score-box{
  position:relative;display:flex;flex-direction:column;align-items:center;
  min-width:74px;padding:5px 12px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--edge);
}
.score-box b{
  font-size:18px;font-weight:780;color:var(--ink);line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.score-box span{
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-top:2px;
}

/* The +12 that drifts up off the score. It is the only thing that says how
   much a move was worth — the score itself just becomes a different number. */
.gain{
  position:absolute;left:0;right:0;top:0;
  font-size:15px;font-weight:780;color:#16a34a;
  opacity:0;pointer-events:none;
}
.gain.run{animation:gainUp .72s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes gainUp{
  0%{opacity:0;transform:translateY(4px)}
  22%{opacity:1}
  100%{opacity:0;transform:translateY(-24px)}
}
@media (prefers-reduced-motion:reduce){ .gain.run{animation-duration:.01s} }

.tool-undo{
  display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 13px;border-radius:999px;
  border:1px solid var(--edge);background:var(--surface);color:var(--txt-2);
  font-size:12.5px;font-weight:650;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .16s ease,border-color .16s ease,opacity .16s ease;
}
.tool-undo svg{width:15px;height:15px;flex:none}
.tool-undo:hover:not([disabled]){border-color:var(--edge-strong);background:var(--surface-2)}
.tool-undo[disabled]{opacity:.38;cursor:default}

/* ── the panel above the board ───────────────────────────────────────────
   Milestones instead of a pack map: the six tiles worth reaching, lit as
   they are reached. It is the closest this game has to levels, and unlike
   levels it can never be taken away. */
.milestones{
  display:flex;flex-wrap:wrap;gap:5px;justify-content:center;
  margin:9px 0 7px;
}
.milestones i{
  font-style:normal;font-size:10.5px;font-weight:720;
  font-variant-numeric:tabular-nums;
  padding:3px 8px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--edge);color:var(--faint);
}
.milestones i.got{
  background:#8544be;border-color:#8544be;color:#fff;
  box-shadow:0 1px 4px rgba(133,68,190,.3);
}

/* ── the cards ───────────────────────────────────────────────────────────
   These have real buttons, unlike every other game's results card, because
   there is a decision to make rather than a next level to go to. */
.done-card .onward{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.done-card.milestone .glow{opacity:.85}

.done-card .onward-note{
  font-size:11.5px;color:var(--faint);margin-top:9px;text-align:center;
}

/* ── help ──────────────────────────────────────────────────────────────── */
.howto .dia .cellbg{fill:#efeef4}
.howto .dia .slab{fill:#e7e5ee}
.howto .dia .t2{fill:#e2e0ec}
.howto .dia .t4{fill:#cdd6ee}
.howto .dia .t8{fill:#9cb8e8}
.howto .dia .t16{fill:#6d94dd}
.howto .dia .num{font:750 11px system-ui,-apple-system,sans-serif;fill:#4b5563;text-anchor:middle}
.howto .dia .numw{fill:#fff}
.howto .dia .arrow{stroke:#4b5563;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}