/* Single source of truth for the home / loading sky gradient. Referenced by #loading-screen below, the background (index.html), the home overlay (washer.home/component), and the first-play fade-scrim tint (washer.hud/fade-scrim) — all via var(--scruble-sky) so they never drift. */ :root { --scruble-sky: linear-gradient(180deg, #8fd3f0 0%, #cfeffb 52%, #ffffff 100%); } #loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 200; /* Same sky gradient as the home overlay so the boot loading screen flows seamlessly into the home screen rather than flashing black. */ background: var(--scruble-sky); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; } .loading-text { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700; font-size: 24px; /* Brand orange — readable on the light gradient (the old #c0c0c0 was tuned for the black background). */ color: #ff731a; letter-spacing: 0.1em; } /* Matches the in-HUD transition bar (.scruble-loading-bar / --determinate below) so the boot loading bar and the Downloading/Processing bar read as the same component. The boot bar is always determinate — gk writes #loading-bar-fill's width directly. */ .loading-bar-container { position: relative; width: 240px; height: 10px; background: rgba(0, 0, 0, 0.45); border: 3px solid #fff; border-radius: 999px; overflow: hidden; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); } .loading-bar-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #ffb066 0%, #ff731a 50%, #ffb066 100%); border-radius: 999px; transition: width 120ms ease-out; } /* ============================================================================= Crosshair (spray reticle) ============================================================================= */ .crosshair { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .crosshair-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8); background: transparent; top: -5px; left: -5px; } /* ============================================================================= Progress-bar bubbles — emitted at the leading edge as score advances. Bubble base position is `left: %; top: 50%` with a `translate(-50%, ...)` so X/Y are centred on the spawn point. The keyframes drift the bubble up and fade it out. ============================================================================= */ @keyframes scruble-bubble { 0% { transform: translate(-50%, 0) scale(0.3); opacity: 0; } 15% { transform: translate(-50%, -4px) scale(1); opacity: 1; } 100% { transform: translate(-50%, -42px) scale(0.45); opacity: 0; } } /* ============================================================================= Coin-collect flight — sprites burst from screen-center, scatter outward, then fly into the top-right balance pill. CSS variables (set inline by washer.coins/coin-sprite) carry the per-sprite scatter and target deltas. ============================================================================= */ /* ============================================================================= Stickerbook — today's day cell pulses a soft brand-orange ring so the player spots where they are in the album grid at a glance. ============================================================================= */ .scruble-day-today { animation: scruble-day-today-pulse 1.6s ease-in-out infinite; } @keyframes scruble-day-today-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 115, 26, 0.55), 0 0 8px 2px rgba(255, 115, 26, 0.35); transform: scale(1); } 50% { box-shadow: 0 0 0 10px rgba(255, 115, 26, 0), 0 0 16px 5px rgba(255, 115, 26, 0.75); transform: scale(1.06); } } /* ============================================================================= "