distractor sparkle and progressive peek limit

app.py

@@ -7791,6 +7791,8 @@ class MatchWiseApp {
         this.peekGlowTimer = null;
         this.livesGlowTimer = null;
         this.wrongMatchTimer = null;
+        this.distractorSparkleTimer = null;
+        this.distractorSparkleClearTimer = null;
         this.challengeStarted = false;
         this.challengeSelectionLocked = false;
         this.challengeResultIndex = null;
@@ -7818,6 +7820,7 @@ class MatchWiseApp {
         this.installViewportHandlers();
         this.hideResetConfirm();
         this.hideGameOverModal();
+        this.stopDistractorSparkles();
         this.hideHowToPlayModal();
         if (this.pageMode === 'start') {
             if (this.startNote) {
@@ -7925,6 +7928,32 @@ class MatchWiseApp {
             -webkit-text-fill-color: transparent;
         }
 
+        .memory-card.distractor-sparkle .memory-front::after {
+            content: '✦';
+            position: absolute;
+            right: 9%;
+            top: 8%;
+            width: 28%;
+            height: 28%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 999px;
+            color: rgba(255, 255, 255, 0.95);
+            background: radial-gradient(circle, rgba(255,255,255,0.78), rgba(255,255,255,0.12) 58%, transparent 72%);
+            filter: drop-shadow(0 0 10px rgba(255,255,255,0.85));
+            font-size: clamp(14px, calc(var(--card-fit-size, var(--card-size, 150px)) * 0.18), 28px);
+            pointer-events: none;
+            animation: distractorSparkleRuntime 680ms ease-out forwards;
+            z-index: 4;
+        }
+
+        @keyframes distractorSparkleRuntime {
+            0% { transform: scale(0.35) rotate(-18deg); opacity: 0; }
+            28% { transform: scale(1.18) rotate(10deg); opacity: 1; }
+            100% { transform: scale(0.65) rotate(24deg); opacity: 0; }
+        }
+
         @keyframes popBounceRuntime {
             0% {
                 transform: translate(-50%, -50%) scale(0) rotate(-15deg);
@@ -8720,9 +8749,100 @@ class MatchWiseApp {
         }, 850);
     }
 
+    getEffectiveMaxHints() {
+        const baseMax = Math.max(1, Number(this.maxHints || this.state.max_hints || 5));
+        const level = Math.max(1, Number(this.levelNumber || this.state.level || 1));
+
+        // Hint cap gently tightens as levels progress.
+        // L1-5: normal cap, L6-10: -1, L11-16: -2, L17+: -3.
+        const reduction = level <= 5 ? 0 : level <= 10 ? 1 : level <= 16 ? 2 : 3;
+        return Math.max(1, baseMax - reduction);
+    }
+
+    syncProgressiveHintLimit(announce = false) {
+        const effectiveMaxHints = this.getEffectiveMaxHints();
+        const previousHints = Number(this.hints || 0);
+        this.hints = Math.max(0, Math.min(effectiveMaxHints, previousHints));
+        this.state.hints = this.hints;
+
+        if (announce && previousHints > this.hints) {
+            this.setStatus(
+                'Harder level: peeks are rarer now.',
+                'show',
+                `Peek limit for this level: ${this.hints} / ${effectiveMaxHints}`
+            );
+        }
+
+        return effectiveMaxHints;
+    }
+
+    getDistractorSparkleIntervalMs() {
+        const level = Math.max(1, Number(this.levelNumber || this.state.level || 1));
+
+        // Very light distraction: slower early, slightly quicker later.
+        return Math.max(1700, 3900 - Math.min(1700, (level - 1) * 95));
+    }
+
+    triggerDistractorSparkleOnce() {
+        if (!this.grid || this.state.status !== 'playing' || this.locked || this.state.game_over || this.state.level_complete) {
+            return;
+        }
+
+        const candidates = Array.from(this.grid.querySelectorAll('.memory-card:not(.matched):not(.flipped):not(.preview-locked)'));
+        if (!candidates.length) return;
+
+        const card = candidates[Math.floor(Math.random() * candidates.length)];
+        if (!card) return;
+
+        card.classList.remove('distractor-sparkle');
+        void card.offsetWidth;
+        card.classList.add('distractor-sparkle');
+
+        if (this.distractorSparkleClearTimer) {
+            clearTimeout(this.distractorSparkleClearTimer);
+            this.distractorSparkleClearTimer = null;
+        }
+        this.distractorSparkleClearTimer = setTimeout(() => {
+            card.classList.remove('distractor-sparkle');
+            this.distractorSparkleClearTimer = null;
+        }, 740);
+    }
+
+    startDistractorSparkles() {
+        if (this.distractorSparkleTimer || !this.grid || this.state.status !== 'playing') {
+            return;
+        }
+
+        const interval = this.getDistractorSparkleIntervalMs();
+        this.distractorSparkleTimer = setInterval(() => {
+            if (window.__activeMemoryLevelId !== this.levelId || this.state.status !== 'playing') {
+                this.stopDistractorSparkles();
+                return;
+            }
+            this.triggerDistractorSparkleOnce();
+        }, interval);
+    }
+
+    stopDistractorSparkles() {
+        if (this.distractorSparkleTimer) {
+            clearInterval(this.distractorSparkleTimer);
+            this.distractorSparkleTimer = null;
+        }
+        if (this.distractorSparkleClearTimer) {
+            clearTimeout(this.distractorSparkleClearTimer);
+            this.distractorSparkleClearTimer = null;
+        }
+        if (this.grid) {
+            this.grid.querySelectorAll('.memory-card.distractor-sparkle').forEach((card) => {
+                card.classList.remove('distractor-sparkle');
+            });
+        }
+    }
+
     updateHintsDisplay() {
+        const effectiveMaxHints = this.syncProgressiveHintLimit(false);
         if (this.hintCountEl) {
-            this.hintCountEl.textContent = `${this.hints} / ${this.maxHints}`;
+            this.hintCountEl.textContent = `${this.hints} / ${effectiveMaxHints}`;
         }
 
         const currentHints = Number(this.hints || 0);
@@ -9264,6 +9384,7 @@ class MatchWiseApp {
             this.challengeCorrectIndex = null;
         }
 
+        this.stopDistractorSparkles();
         this.renderCards();
         this.updateHud();
         this.updateCardSize();
@@ -9512,6 +9633,11 @@ class MatchWiseApp {
         if (this.nextBtn) {
             this.nextBtn.disabled = status !== 'complete';
         }
+        if (status === 'playing') {
+            this.startDistractorSparkles();
+        } else {
+            this.stopDistractorSparkles();
+        }
         this.updateHintsDisplay();
         this.syncControlsVisibility();
     }
@@ -9534,6 +9660,7 @@ class MatchWiseApp {
         this.state.status = 'preview';
         this.state.level_complete = false;
         this.state.game_over = false;
+        this.syncProgressiveHintLimit(true);
         this.applyStateStyle();
         this.setStatus(
             'Memorize the cards before they flip!',
@@ -9594,6 +9721,7 @@ class MatchWiseApp {
         this.state.status = 'preview';
         this.state.level_complete = false;
         this.state.game_over = false;
+        this.syncProgressiveHintLimit(true);
 
         if (this.overlay) {
             this.overlay.style.display = 'flex';
@@ -9871,7 +9999,8 @@ class MatchWiseApp {
                 this.state.performance_meter = 0;
                 this.state.challenge_due = false;
             }
-            const shouldAwardPeek = this.hints < this.maxHints;
+            const effectiveMaxHints = this.getEffectiveMaxHints();
+            const shouldAwardPeek = this.hints < effectiveMaxHints;
             this.showFeedbackOverlay(
                 'LEVEL COMPLETE',
                 isChallengeBoard ? 'Level Complete!\n+1 Life!' : (shouldAwardPeek ? 'Level Complete!\n+1 Peek earned!' : 'Level Complete!'),
@@ -9896,7 +10025,7 @@ class MatchWiseApp {
                 pairFact || featuredFact || this.state.theme || `Bonus ready for level ${this.state.level}.`
             );
             if (!isChallengeBoard) {
-                this.hints = Math.min(this.maxHints, this.hints + 1);
+                this.hints = Math.min(effectiveMaxHints, this.hints + 1);
                 this.state.hints = this.hints;
             }
             this.updateHud();
@@ -9913,7 +10042,7 @@ class MatchWiseApp {
             }
             const hintMessage = shouldAwardPeek
                 ? '+1 peek earned!'
-                : `Max peeks earned: ${this.hints} / ${this.maxHints}`;
+                : `Max peeks earned for this level: ${this.hints} / ${effectiveMaxHints}`;
             const completionDetails = [featuredFact, hintMessage].filter(Boolean).join('\n');
             this.setStatus(
                 this.state.victory_message || 'Level cleared. Click NEXT LEVEL to continue.',
@@ -9990,6 +10119,7 @@ class MatchWiseApp {
 
     async useHint() {
         if (this.state.status !== 'playing') return;
+        this.syncProgressiveHintLimit(false);
         if (this.hinting) return;
         if (this.hints <= 0) {
             this.setStatus('No peeks left!', 'error', '');
@@ -10072,6 +10202,7 @@ class MatchWiseApp {
             : Number(this.state.previous_level_time_seconds || 0);
         this.state.win_streak = 0;
         this.resetComboFeedback();
+        this.stopDistractorSparkles();
         this.locked = true;
         this.applyStateStyle();
         this.setStatus(
@@ -10242,6 +10373,7 @@ class MatchWiseApp {
         await this.refreshLeaderboardData();
         this.hideResetConfirm();
         this.hideGameOverModal();
+        this.stopDistractorSparkles();
         this.showTransitionOverlay('🤖 Starting New Game', 'Resetting the board and preparing a fresh run...');
         if (this.nextBtn) this.nextBtn.disabled = true;