/* /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}
#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)}

#sq .overlay{position:absolute;inset:0;display:grid;place-items:center;padding:24px;
  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}
#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}

#sq .hint{margin:14px 0 0;font-size:12.5px;color:var(--text-inv-2);text-align:center}

@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}
}