My previous 'no scrolling' commit didn't actually work — two real bugs:
1. Stale assets: nginx cached css/js for a week (max-age=604800), so after
a redeploy returning visitors kept the OLD stylesheet/script and never saw
the fit logic. Switched assets to Cache-Control:no-cache (tiny files, 304s)
and added ?v= query strings to bust the existing week-long cache.
2. Bad centering geometry: grid-centering pins an over-tall card to the top,
and .winner-card re-declared position:relative, overriding the fix. Now the
card is position:fixed at 50%/50% and fitActiveScreen() folds the fit scale
into one transform: translate(-50%,-50%) scale(fit). Removed the winner-card
position override and switched the screen fade to opacity-only (a transform
on .screen would capture the fixed card and break centering).
Verified in real Chromium against the container — setup, game, AND winner all
show fits:true / scrolls:false at 1366x640 (short laptop), 375x667, and
360x640 (small phone). No scrolling on any screen at any size.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Lock the viewport (100dvh, overflow:hidden, grid-centered) and scale the
active card to fit via a --fit custom property set by fitActiveScreen().
Every screen — setup, game, winner — now always fits the browser at any
window size; the card shrinks only when it would otherwise overflow.
Refit on screen change, stage switch, resize, orientation, and font load.
Verified no vertical/horizontal scroll on all three screens at short-laptop
(1366x640) and mobile-portrait (390x844).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Each player picks ANY avatar from a combined 16-emoji roster (8 sparkle +
8 shred); their color, move sound, and particle FX follow that avatar's CAMP,
so one nibling can rock unicorns/rainbows while the other brings skulls/metal.
A 3-way STAGE selector (Sparkle / Shred / Mixed) sets the global backdrop,
fonts, and winner vibe. Camps and stages are orthogonal, driven by CSS custom
properties (.camp-* and [data-stage]).
- Combined avatar grids for both players with a same-avatar guard
- Per-camp Web Audio SFX (sine chimes vs sawtooth power chords) + mute toggle
- Per-player glow on displays, scoreboard, and board pieces; winner screen
adopts the winner's camp; screen shake on shred moves; themed celebration
- Persist names/avatars/stage/scores/mute via localStorage; reset-scores button
- Fix nested-scroll / clipped-top bug (center with margin:auto, not flex +
max-height); no horizontal overflow 320px-desktop; SVG favicon
- Keyboard-navigable board, ARIA roles, live status, prefers-reduced-motion
- Containerize for OrbStack: Dockerfile (nginx:alpine), nginx.conf (gzip +
cache/security headers), docker-compose.yml — one command on :8080
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
