/* ============================================================
   PixelFill — what differs from the Pixel Flow screen
   ============================================================
   The page loads /pixelflow/assets/game.css first and then this.
   Everything the two games share — the bars, the results card,
   the level picker, the focus pull, the shake — is defined once,
   there. This file is only the differences, which are few: a
   different accent, a progress bar the other game has no use
   for, and a board that is not square.
   ============================================================ */

:root{ --accent:#1E88E5 }

/* The board is rectangular, so the canvas cannot be sized off one edge and
   must not be stretched. line-height:0 keeps the wrapper from adding a text
   baseline's worth of height under it. */
.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);
  touch-action:none;
}

/* ---------- coverage bar ---------- */
/* Sits directly above the board rather than in the header, because it is
   about the board and it is watched while the finger is moving. */
.fillbar{
  flex:none;width:min(320px,100%);margin:0 auto 12px;
  transition:filter .42s cubic-bezier(.2,.8,.3,1),opacity .42s ease;
}
.fillbar-track{
  display:block;height:5px;border-radius:999px;
  background:rgba(15,23,42,.07);overflow:hidden;
}
.fillbar-track i{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),#7c3aed);
  transition:width .12s linear;   /* keeps up with a finger without lagging */
}
/* It defocuses with the board when a level is solved. */
body.settling .fillbar{filter:blur(5px);opacity:.45}
@media (prefers-reduced-motion:reduce){
  body.settling .fillbar{filter:none;opacity:1}
}