diff --git a/index.html b/index.html index 5512d40..79bf06e 100644 --- a/index.html +++ b/index.html @@ -373,15 +373,17 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat align-items: center; gap: 4px; } /* ...and an earned shield SMOULDERS: two-pixel embers drifting off it, each on its own delay and lane (main.embers). Pure CSS — the menu parks the game loop and this has no business waking it. */ - #cdBadges .badge em { position: absolute; bottom: 22px; width: 3px; height: 3px; background: #f2cf6a; - box-shadow: 0 0 4px 1px rgba(232,178,58,0.55); + /* they lift off the shield's TOP EDGE into the dark above it — at the old bottom:22px the whole + flight happened ACROSS the artwork, where a 3px gold speck is invisible (Oliver saw nothing) */ + #cdBadges .badge em { position: absolute; bottom: 52px; width: 3px; height: 3px; background: #fff2c9; + box-shadow: 0 0 6px 2px rgba(232,178,58,0.75); opacity: 0; pointer-events: none; animation-name: ember; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes ember { - 0% { transform: translate(0, 0) scale(1); opacity: 0; } - 18% { opacity: 0.85; } - 60% { transform: translate(2px, -16px) scale(0.8); opacity: 0.5; } - 100% { transform: translate(-1px, -30px) scale(0.4); opacity: 0; } } + 0% { transform: translate(0, 6px) scale(0.6); opacity: 0; } + 20% { opacity: 1; } + 60% { transform: translate(3px, -10px) scale(1); opacity: 0.75; } + 100% { transform: translate(-2px, -32px) scale(0.35); opacity: 0; } } @media (prefers-reduced-motion: reduce) { #cdBadges .badge em { display: none; } } #cdBadges img { height: 46px; image-rendering: pixelated; } #cdBadges .badge u { font: 700 7px Silkscreen, monospace; color: var(--acid); letter-spacing: 0.5px; diff --git a/src/main.js b/src/main.js index c757128..8579c8c 100644 --- a/src/main.js +++ b/src/main.js @@ -602,10 +602,12 @@ const countUp = (write, target, dur = 700) => { // leichtes feuer"). CSS keyframes, not a loop: the menu deliberately parks the game loop, and six // two-pixel sparks per badge have no business waking it. The randomness is baked into each spark's // own delay, duration and lane at build time, so no two shields burn in step. -const embers = won => !won ? '' : Array.from({ length: 5 }, () => - ``).join(''); +const embers = won => !won ? '' : Array.from({ length: 7 }, () => + ``).join(''); function buildCard() { for (const t of cardTimers) clearTimeout(t);