/* ============================================================
   Lights Out — what differs from the shared game screen
   ============================================================
   Loads after /pixelflow/assets/game.css. Only the differences
   live here, and there are few: this game has one move, no list
   and nothing to drag.
   ============================================================ */

:root{
  --accent:#D97706;
  /* The wash above the board. Lamplight, with a little of the night it is
     being turned out against. */
  --aura-1:rgba(217,119,6,.18);
  --aura-2:rgba(242,164,19,.15);
  --aura-3:rgba(30,58,138,.10);
}

.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:manipulation;   /* taps, not drags — let the browser have the rest */
}

/* How many lights are still on. Unlike Loop's loose ends this number goes UP
   as often as it goes down — most boards have to brighten before they go
   dark — so it is reported plainly and never dressed up as progress. */
.lit{
  flex:none;display:flex;align-items:baseline;justify-content:center;gap:7px;
  padding:0 0 11px;font-size:12.5px;font-weight:620;color:var(--dim);
  transition:filter .42s cubic-bezier(.2,.8,.3,1),opacity .42s ease;
}
.lit b{font-size:17px;font-weight:760;color:#D97706;font-variant-numeric:tabular-nums}
.lit.clear b{color:#16a34a}
body.settling .lit{filter:blur(5px);opacity:.45}
@media (prefers-reduced-motion:reduce){ body.settling .lit{filter:none;opacity:1} }

/* Taps against par, in the footer. Par is the proven minimum, so going past
   it is a real event and the number stops being quiet about it. */
#taps.over b{color:#D97706}

/* ---------- help ---------- */
.howto .dia .off{fill:#e9edf4}
.howto .dia .on{fill:#F2A413}
.howto .dia .done{fill:#16a34a;opacity:.85}
.howto .dia .mark{fill:none;stroke:#0b1220;stroke-opacity:.5;stroke-width:2.2;stroke-linecap:round}
.howto .dia .arrow{stroke:#6b7a92;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}