/* ============================================================
   Sokoban — what differs from the shared game screen
   ============================================================
   Loads after /pixelflow/assets/game.css. Only the differences
   live here.
   ============================================================ */

:root{ --accent:#C2410C }

.board-wrap{position:relative;line-height:0}
canvas#board{
  display:block;
  /* Only the wall touching the room is painted, so the canvas has transparent
     corners and a shadow would outline empty air around them. Declared, not
     merely omitted — pixelflow/game.css sets one and leaving it out here does
     not take it away. */
  box-shadow:none;
  /* The swipe IS a move, so the browser cannot have the gesture — without
     this a swipe up scrolls the page instead of pushing a box. */
  touch-action:none;
  -webkit-user-select:none;user-select:none;
}

/* ── the bar above the board ─────────────────────────────────────────────
   Pushes against par, how many boxes are home, and undo. Undo earns its
   place at this size because it is not a rescue button — it is how the game
   is played, and burying it in a menu would make thinking expensive. */
.tools{
  flex:none;display:flex;align-items:center;justify-content:center;gap:10px;
  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} }

.count{
  display:inline-flex;align-items:baseline;gap:5px;
  font-size:12px;font-weight:620;color:var(--dim);
}
.count b{font-size:16px;font-weight:760;color:var(--ink);font-variant-numeric:tabular-nums}
.count .sep{color:var(--faint);font-weight:600}
/* Past par the number is no longer good news, and says so rather than
   quietly carrying on looking the same. */
.count.over b{color:#C2410C}

.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}

/* ── help ──────────────────────────────────────────────────────────────── */
.howto .dia .floor{fill:#ecebeb}
.howto .dia .wall{fill:#b7bece}
.howto .dia .box{fill:#D97706;opacity:.9}
.howto .dia .boxdone{fill:#16a34a;opacity:.9}
.howto .dia .guy{fill:#334155;opacity:.92}
.howto .dia .goal{fill:none;stroke:#C2410C;stroke-opacity:.5;stroke-width:2.4}
.howto .dia .stuck{fill:none;stroke:#dc2626;stroke-width:2.4}
.howto .dia .arrow{stroke:#334155;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}