/* ============================================================
   Loop — what differs from the shared game screen
   ============================================================
   Loads after /pixelflow/assets/game.css. Only the differences
   live here, and there are almost none: this game has one move
   and no list, so it needs less chrome than any of the others.
   ============================================================ */

:root{ --accent:#1E88E5 }

.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 ends are still loose. It is the only number that matters and it
   only ever goes down, which is most of why the game feels good. */
.loose{
  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;
}
.loose b{font-size:17px;font-weight:760;color:#E5A03A;font-variant-numeric:tabular-nums}
.loose.clear b{color:#16a34a}
body.settling .loose{filter:blur(5px);opacity:.45}
@media (prefers-reduced-motion:reduce){ body.settling .loose{filter:none;opacity:1} }