/* /squeegee — page-specific styles.
   Scoped under #sq, built from the site's own tokens rather than a games
   palette: the blues are the logo blues and the board is the same ink the
   rest of the dark sections use, so it reads as part of the site and not as
   an embedded toy. Loaded only by this page; hashed by bust.js. */

#sq{--s-line:var(--ink-700);--s-glow:0 0 0 1px rgba(127,212,255,.10),0 24px 60px rgba(0,0,0,.45)}

#sq .board{position:relative;max-width:820px;margin:0 auto}
/* A strip of board below the canvas that steers but shows nothing. On a phone
   the squeegee sits under the fingertip, so the hand covers the one thing
   being aimed; dragging down here keeps the finger off the picture entirely.
   Pointer handling lives on .board, so this area is live without being part
   of the playfield. Desktop has no such problem and gets no strip. */
#sq .board{--grip:0;padding-bottom:var(--grip);touch-action:none}
@media (hover:none){
  #sq .board{--grip:76px}
  #sq .board::after{
    content:"Drag here to move the squeegee";
    position:absolute;left:0;right:0;bottom:0;height:var(--grip);
    display:grid;place-items:center;
    font:600 12.5px var(--font-body);color:#dfe7ee;
    border:1px dashed var(--s-line);border-radius:12px;
    background:linear-gradient(180deg,rgba(0,159,227,.06),transparent);
  }
}
#sq canvas.play{display:block;width:100%;height:auto;border-radius:16px;
  border:1px solid var(--s-line);box-shadow:var(--s-glow);
  background:var(--ink-950);touch-action:none;cursor:none}
@media(hover:none){#sq canvas.play{cursor:auto}}

/* readouts sit above the board, tabular so they do not jitter as they count */
#sq .hud{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
#sq .stat{flex:1 1 0;min-width:96px;background:var(--ink-900);border:1px solid var(--s-line);
  border-radius:12px;padding:11px 14px}
#sq .stat .k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-inv-2)}
#sq .stat .v{font-family:var(--font-display);font-size:25px;font-weight:700;color:#fff;
  line-height:1.15;font-variant-numeric:tabular-nums}
#sq .stat.hi .v{color:var(--blue-200)}

/* bottom stops at the grip strip, not the padding box, so the panel stays the
   same shape as the board it is covering. overflow:auto so a panel that is
   taller than the board scrolls inside it instead of spilling over the grip
   strip and the hint below. */
#sq .overlay{position:absolute;left:0;right:0;top:0;bottom:var(--grip);
  display:grid;place-items:center;padding:24px;overflow:auto;
  background:rgba(8,11,14,.86);border-radius:16px;text-align:center;backdrop-filter:blur(2px)}
#sq .overlay[hidden]{display:none}
#sq .panel{max-width:430px}
#sq .panel h2{font-family:var(--font-display);font-size:34px;font-weight:700;color:#fff;
  margin:0 0 10px;letter-spacing:-.6px}
#sq .panel p{font-size:14px;line-height:1.65;color:var(--text-inv-2);margin:0 0 20px}
#sq .panel p b{color:#fff}
/* A 360px phone gives the board 250px of height, and no start panel fits in
   that. Below 520px the overlay leaves the board and sits in flow under the
   canvas — the picture stays uncovered, the panel is never clipped, and the
   grip strip (still the last thing in .board) never sits under a button. */
@media(max-width:520px){
  #sq .overlay{position:static;bottom:auto;padding:18px 16px;margin-top:10px;
    background:var(--ink-900);border:1px solid var(--s-line);backdrop-filter:none}
}
#sq .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#sq .btn-play{background:var(--blue-700);border:0;color:#fff;border-radius:999px;
  padding:13px 30px;font:700 14.5px var(--font-body);cursor:pointer}
#sq .btn-play:hover{background:var(--blue-500)}
#sq .btn-share{background:transparent;border:1px solid var(--s-line);color:#fff;border-radius:999px;
  padding:13px 24px;font:600 14.5px var(--font-body);cursor:pointer}
#sq .btn-share:hover{border-color:var(--blue-500)}
#sq .btn-share[hidden]{display:none}

/* One instruction block, under the board. The first sentence is written
   twice — once for touch, once for mouse and keys — and the device picks:
   arrow keys mean nothing on a phone, "drag the strip" nothing with a mouse.
   Left-aligned and capped: a centred 60-word paragraph is hard to scan. */
#sq .hint{margin:16px auto 0;max-width:640px;font-size:13px;line-height:1.65;color:var(--text-inv-2)}
#sq .hint b{color:#fff}
#sq .sq-touch{display:none}
@media(hover:none){
  #sq .sq-touch{display:inline}
  #sq .sq-keys{display:none}
}

@media(max-width:560px){
  #sq .stat{padding:9px 11px;min-width:0}
  #sq .stat .v{font-size:20px}
  #sq .stat .k{font-size:9.5px}
  #sq .panel h2{font-size:26px}
  #sq .panel p{font-size:13px}
}

/* Sound is synthesised in the page rather than loaded, so the only control
   worth exposing is on/off. It sits under the board with the hint — never in
   the overlay, which is dismissed before anyone would look for it. */
#sq .soundrow{display:flex;justify-content:center;margin:12px 0 0}
#sq .btn-mute{background:transparent;border:1px solid var(--s-line);color:var(--text-inv-2);
  border-radius:999px;padding:7px 16px;font:600 12px var(--font-body);cursor:pointer}
#sq .btn-mute[aria-pressed="true"]{color:#fff;border-color:var(--blue-700)}
#sq .btn-mute:hover{border-color:var(--blue-500)}