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

:root{ --accent:#5B54C8 }

.board-wrap{position:relative;line-height:0}
canvas#board{
  display:block;
  /* The canvas is the grid PLUS its clue gutters, and the gutters are
     transparent — so Pixel Flow's shadow traced a lit rectangle around a
     large empty area above and to the left of the actual board, which made
     the whole screen look shoved into its bottom-right corner.

     It has to be turned off explicitly. An earlier version of this file
     merely left the declaration out and described the problem in a comment,
     which changes nothing: the rule from pixelflow/game.css has the same
     specificity and still wins. */
  box-shadow:none;
  touch-action:none;           /* the drag is the game — the browser cannot have it */
  -webkit-user-select:none;user-select:none;
}

/* ── the tool bar ────────────────────────────────────────────────────────
   Two tools and a tally of slips. Filling and crossing are a visible switch
   rather than a gesture, because every gesture a phone has left over is
   either slow, already taken, or missing on some device. */
.tools{
  flex:none;display:flex;align-items:center;justify-content:center;gap:9px;
  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} }

.tool{
  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(--dim);
  font-size:12.5px;font-weight:650;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.tool svg{width:15px;height:15px;flex:none}
.tool.on{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 2px 8px rgba(91,84,200,.28);
}
.tool:not(.on):hover{border-color:var(--edge-strong);color:var(--ink)}

/* How many cells you filled that were not in the picture. It starts at zero
   and the whole game is trying to leave it there, which is why it is shown
   even when it is zero. */
.slips{
  display:flex;align-items:baseline;gap:6px;margin-left:3px;
  font-size:12px;font-weight:620;color:var(--dim);
}
.slips b{font-size:15px;font-weight:760;color:#E5A03A;font-variant-numeric:tabular-nums}
.slips.clean b{color:#16a34a}

/* ── picture picker ──────────────────────────────────────────────────────
   Once a picture is found its name is no longer a spoiler, and "Penguin" is
   a far better handle for finding it again than "11" — so found pictures are
   listed by name and the cells stop being square to make room. */
.grid-levels{grid-template-columns:repeat(auto-fill,minmax(82px,1fr))}
.lvl{aspect-ratio:auto;min-height:52px;padding:7px 5px}
.lvl.named{font-size:11.5px;line-height:1.25;letter-spacing:-.1px;word-break:break-word}

/* ── help ──────────────────────────────────────────────────────────────── */
.howto .dia .cellbg{fill:#eceaf3}
.howto .dia .ink{fill:#3730A3;opacity:.9}
.howto .dia .xx{stroke:#a9a5be;stroke-width:2.6;stroke-linecap:round}
.howto .dia .num{font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace;fill:#4b5563}
.howto .dia .numoff{fill:#b8b5c6}