# GURUKA

> Free guided meditations, custom affirmations with calming visuals, and brain training games. No account required. No personal data collected. Works offline.

Canonical site: https://guruka.com
Summary file: https://guruka.com/llms.txt

## Pages

### Calm & Clarity Affirmation for Visual Meditation
URL: https://guruka.com/affirmation-calm-and-clarity/
Description: Free calm and clarity affirmation for visual meditation. Display positive affirmations over calming visuals, privately in your browser.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Calm & Clarity Affirmation</h1>
<p class="aff-intro">When thoughts race and the mind feels scattered, these words can guide you back to stillness. Use this affirmation during visual meditation to cultivate inner peace and mental clarity.</p>
<div class="aff-lines">
My mind is calm and clear<br>I release what I cannot control<br>I am present in this moment
</div>
<a href="/visuals/breathing-orb/?edit=calm-and-clarity" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Focus & Energy Affirmation for Visual Meditation
URL: https://guruka.com/affirmation-focus-and-energy/
Description: Free focus and energy affirmation for visual meditation. Sharpen concentration and channel your energy with calming visuals.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Focus & Energy Affirmation</h1>
<p class="aff-intro">A focused mind moves with purpose. This affirmation helps you channel your energy and move forward with intention during visual meditation.</p>
<div class="aff-lines">
My focus is sharp and steady<br>I channel my energy with purpose<br>I move forward with intention
</div>
<a href="/visuals/breathing-orb/?edit=focus-and-energy" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Letting Go Affirmation for Visual Meditation
URL: https://guruka.com/affirmation-letting-go/
Description: Free letting go affirmation for visual meditation. Release what no longer serves you with calming visuals and positive text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Letting Go Affirmation</h1>
<p class="aff-intro">Holding on to what no longer serves you creates tension. This affirmation helps you release, forgive, and create space for peace during visual meditation.</p>
<div class="aff-lines">
I let go of what no longer serves me<br>I forgive myself and others<br>I make space for peace
</div>
<a href="/visuals/breathing-orb/?edit=letting-go" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Gratitude Affirmation for Visual Meditation
URL: https://guruka.com/affirmation-gratitude/
Description: Free gratitude affirmation for visual meditation. Cultivate thankfulness with calming visuals and positive affirmation text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Gratitude Affirmation</h1>
<p class="aff-intro">Gratitude shifts your focus from what is missing to what is present. Use this affirmation with a visual meditation to deepen your sense of appreciation and abundance.</p>
<div class="aff-lines">
I am grateful for this moment<br>Abundance flows into my life<br>I appreciate the simple things
</div>
<a href="/visuals/breathing-orb/?edit=gratitude" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Quit Smoking Affirmation for Visual Meditation
URL: https://guruka.com/affirmation-quit-smoking/
Description: Free quit smoking affirmation for visual meditation. Strengthen your resolve to quit with calming visuals and positive affirmations, privately in your browser.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Quit Smoking Affirmation</h1>
<p class="aff-intro">Every breath without smoke is a step toward freedom. This affirmation reinforces your choice to live smoke-free, pairing positive words with calming visual meditation to help you stay strong through cravings.</p>
<div class="aff-lines">
My lungs are cleaner every day<br>I am stronger than any craving<br>Every breath is a victory
</div>
<a href="/visuals/breathing-orb/?edit=quit-smoking" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Self-Confidence Affirmation for Visual Meditation
URL: https://guruka.com/affirmation-self-confidence/
Description: Free self-confidence affirmation for visual meditation. Build belief in yourself with calming visuals and positive affirmations.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Self-Confidence Affirmation</h1>
<p class="aff-intro">Confidence grows when you remind yourself of your worth. Pair this affirmation with a calming visual to reinforce self-belief and inner strength.</p>
<div class="aff-lines">
I believe in myself and my abilities<br>I am worthy of good things<br>I grow stronger every day
</div>
<a href="/visuals/breathing-orb/?edit=self-confidence" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Sleep & Rest Affirmation for Visual Meditation
URL: https://guruka.com/affirmation-sleep-and-rest/
Description: Free sleep and rest affirmation for visual meditation. Prepare for restful sleep with calming visuals and gentle affirmation text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Sleep & Rest Affirmation</h1>
<p class="aff-intro">Rest is not a luxury, it is essential. This affirmation prepares your mind and body for deep, peaceful sleep during a calming visual meditation.</p>
<div class="aff-lines">
I give myself permission to rest<br>My body relaxes with each breath<br>I drift into peaceful sleep
</div>
<a href="/visuals/breathing-orb/?edit=sleep-and-rest" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Privacy Policy
URL: https://guruka.com/privacy/
Description: Privacy Policy for GURUKA

# Privacy Policy

*Last updated: March 11, 2026*

**No sign-up is required to use GURUKA. All user data, including game scores, meditation stats, activity tracking, and preferences, is stored locally on your device only. We do not collect, store, or share your personal data. No data is transmitted to our servers or any third party.**

## 1. Information We Do NOT Collect

GURUKA is designed with a local-first approach. We do not collect personal information such as names, email addresses, or account credentials, because GURUKA requires no sign-up or login.

All user-generated data stays on your device:

- **Game scores and progress** - stored in your browser's localStorage
- **Meditation history and stats** - stored in your browser's localStorage
- **Activity tracking data** - stored in your browser's localStorage
- **Preferences and settings** - stored in your browser's localStorage

None of this data is transmitted to any server. It exists only on your device and can be cleared at any time through your browser settings.

## 2. How We Use Information

Since we do not collect personal data, our use of information is limited to:

- Improving and optimizing the website
- Analyzing general usage patterns and trends
- Maintaining the security of our service

## 3. Cookies and Tracking

GURUKA does not use tracking cookies, third-party trackers, or advertising pixels. The only browser storage used is localStorage to save your game and activity data locally on your device. You can clear this data at any time through your browser settings.

## 4. Third-Party Services

GURUKA does not use third-party analytics services or embed third-party tracking scripts. Your browsing activity on GURUKA is not shared with any external service.

## 5. Hosting and Bot Protection

GURUKA is hosted on Cloudflare, which provides DNS, content delivery, and security services. As part of its security features, Cloudflare may occasionally display a brief verification screen ("Verify you are human") to protect the website from automated bots and malicious traffic. This check is lightweight, privacy-preserving, and does not use traditional CAPTCHA puzzles. It runs automatically and typically completes in seconds without requiring any action from you. Cloudflare processes this verification as a data processor on our behalf. For details on how Cloudflare handles this data, see [Cloudflare's Privacy Policy](https://www.cloudflare.com/privacypolicy/).

## 6. Data Security

Because your data is stored locally on your device and not transmitted to our servers, you maintain full control over it. We implement appropriate technical measures to ensure the website itself is served securely.

## 7. Your Rights

Since GURUKA stores no personal data on any server, there is no personal data for us to access, correct, or delete on your behalf. All user data is stored locally in your browser's localStorage and is fully under your control. You can view or clear this data at any time through your browser settings. Clearing your browser cache or site data will permanently delete all stored data including game scores, meditation history, and preferences. For a detailed explanation of how your data is stored and managed, see [How Your Data Works](/your-data/).

## 8. Children's Privacy

GURUKA is suitable for users of all ages. We do not collect personal information from anyone, including children.

## 9. Changes to Privacy Policy

We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new policy on this page and updating the "Last updated" date.

## 10. Contact

If you have questions about this Privacy Policy, please contact us through our website at [https://guruka.com](https://guruka.com).

### Games
URL: https://guruka.com/games/
Description: Free brain games. Local scores. No account.

<style>
#games-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#games-hub .gh-header {
text-align: center;
margin-bottom: 1.5rem;
}
#games-hub .gh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #games-hub .gh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#games-hub .gh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #games-hub .gh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.gh-game-card {
display: grid;
grid-template-columns: 4rem 1fr;
column-gap: 1rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 2rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .gh-game-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.gh-game-card:hover {
transform: none;
}
.gh-game-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.gh-game-card.speed-match::before { background: #0f9072; }
.gh-game-card.memory-matrix::before { background: #f59e0b; }
.gh-game-card.sequence-recall::before { background: #10b981; }
.gh-game-card.number-crunch::before { background: #6366f1; }
.gh-game-card.color-clash::before { background: #ec4899; }
.gh-game-card.quick-sort::before { background: #f97316; }
.gh-game-card.pattern-path::before { background: #14b8a6; }
.gh-game-icon {
width: 4rem;
height: 4rem;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.gh-game-card h2 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.gh-game-card .gh-skill,
.gh-game-card .gh-desc,
.gh-game-card .gh-play-btn,
.gh-game-card .gh-best {
grid-column: 1 / -1;
}
[data-theme="dark"] .gh-game-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gh-game-card .gh-skill {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
margin-bottom: 0.5rem;
}
.speed-match .gh-skill { background: rgba(15,144,114,0.1); color: #0f9072; }
.memory-matrix .gh-skill { background: rgba(245,158,11,0.1); color: #f59e0b; }
.sequence-recall .gh-skill { background: rgba(16,185,129,0.1); color: #10b981; }
.number-crunch .gh-skill { background: rgba(99,102,241,0.1); color: #6366f1; }
.color-clash .gh-skill { background: rgba(236,72,153,0.1); color: #ec4899; }
.quick-sort .gh-skill { background: rgba(249,115,22,0.1); color: #f97316; }
.pattern-path .gh-skill { background: rgba(20,184,166,0.1); color: #14b8a6; }
.gh-game-card .gh-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 0.75rem;
}
[data-theme="dark"] .gh-game-card .gh-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-play-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
min-height: 44px;
}
.gh-play-btn::after {
content: '\2192';
transition: transform 0.2s;
}
.gh-best:empty {
display: none;
}
.gh-best {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-border, #dfe4ea);
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .gh-best {
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-best strong {
color: var(--color-primary, #0f9072);
}
.gh-info {
text-align: center;
padding: 2rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 1rem;
}
[data-theme="dark"] .gh-info {
background: var(--color-dark-bg-secondary, #1e293b);
}
.gh-info h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .gh-info h3 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gh-info p {
color: var(--color-text-secondary, #4b5b6d);
max-width: 32rem;
margin: 0 auto;
font-size: 0.9375rem;
}
[data-theme="dark"] .gh-info p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="games-hub">
<div class="gh-header">
<h1>&#129504; Games</h1>
<p>Free. Local scores. No account.</p>
</div>

<div class="gh-grid">
<a href="/games/speed-match/" class="gh-game-card speed-match">
<div class="gh-game-icon" style="background: rgba(15,144,114,0.1); color: #0f9072;">&#9889;</div>
<h2>Speed Match</h2>
<span class="gh-skill">Processing Speed</span>
<p class="gh-desc">Compare symbols fast. Same or different?</p>
<span class="gh-play-btn">Play</span>
<div class="gh-best" id="best-speed-match"></div>
</a>

<a href="/games/memory-matrix/" class="gh-game-card memory-matrix">
<div class="gh-game-icon" style="background: rgba(245,158,11,0.1); color: #f59e0b;">&#9638;</div>
<h2>Memory Matrix</h2>
<span class="gh-skill">Spatial Memory</span>
<p class="gh-desc">Watch cells, then recreate the pattern.</p>
<span class="gh-play-btn">Play</span>
<div class="gh-best" id="best-memory-matrix"></div>
</a>

<a href="/games/sequence-recall/" class="gh-game-card sequence-recall">
<div class="gh-game-icon" style="background: rgba(16,185,129,0.1); color: #10b981;">&#9776;</div>
<h2>Sequence Recall</h2>
<span class="gh-skill">Working Memory</span>
<p class="gh-desc">Memorize colors, then repeat them.</p>
<span class="gh-play-btn">Play</span>
<div class="gh-best" id="best-sequence-recall"></div>
</a>

<a href="/games/number-crunch/" class="gh-game-card number-crunch">
<div class="gh-game-icon" style="background: rgba(99,102,241,0.1); color: #6366f1;">&#129518;</div>
<h2>Number Crunch</h2>
<span class="gh-skill">Mental Arithmetic</span>
<p class="gh-desc">Solve timed arithmetic.</p>
<span class="gh-play-btn">Play</span>
<div class="gh-best" id="best-number-crunch"></div>
</a>

<a href="/games/color-clash/" class="gh-game-card color-clash">
<div class="gh-game-icon" style="background: rgba(236,72,153,0.1); color: #ec4899;">&#127912;</div>
<h2>Color Clash</h2>
<span class="gh-skill">Inhibitory Control</span>
<p class="gh-desc">Pick the color by the current rule.</p>
<span class="gh-play-btn">Play</span>
<div class="gh-best" id="best-color-clash"></div>
</a>

<a href="/games/quick-sort/" class="gh-game-card quick-sort">
<div class="gh-game-icon" style="background: rgba(249,115,22,0.1); color: #f97316;">&#128451;</div>
<h2>Quick Sort</h2>
<span class="gh-skill">Task Switching</span>
<p class="gh-desc">Sort items as the rule changes.</p>
<span class="gh-play-btn">Play</span>
<div class="gh-best" id="best-quick-sort"></div>
</a>

<a href="/games/pattern-path/" class="gh-game-card pattern-path">
<div class="gh-game-icon" style="background: rgba(20,184,166,0.1); color: #14b8a6;">&#129513;</div>
<h2>Pattern Path</h2>
<span class="gh-skill">Pattern Recognition</span>
<p class="gh-desc">Find the missing pattern piece.</p>
<span class="gh-play-btn">Play</span>
<div class="gh-best" id="best-pattern-path"></div>
</a>
</div>

<div class="gh-info">
<h3>How It Works</h3>
<p>Games get harder as you improve. Best scores stay in your browser.</p>
</div>
</div>

<script>
(function() {
var games = ['speed-match', 'memory-matrix', 'sequence-recall', 'number-crunch', 'color-clash', 'quick-sort', 'pattern-path'];
games.forEach(function(game) {
var best = localStorage.getItem('guruka_' + game + '_best');
var el = document.getElementById('best-' + game);
if (el && best) {
el.innerHTML = 'Best: <strong>' + Number(best).toLocaleString() + '</strong> points';
}
});
})();
</script>

<style>
/* ── Mobile-first responsive ── */
.gh-game-card {
padding: 1.5rem;
grid-template-columns: 3.25rem 1fr;
}
.gh-game-icon {
width: 3.25rem;
height: 3.25rem;
}
.gh-game-card .gh-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 768px) {
.gh-game-card {
padding: 2rem;
grid-template-columns: 4rem 1fr;
}
.gh-game-icon {
width: 4rem;
height: 4rem;
}
.gh-game-card .gh-desc {
-webkit-line-clamp: unset;
overflow: visible;
}
}
@media (hover: hover) and (pointer: fine) {
.gh-game-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}
.gh-game-card:hover .gh-play-btn::after {
transform: translateX(4px);
}
}
@media (prefers-reduced-motion: reduce) {
.gh-game-card {
transition: none;
}
}
</style>

### Guided Meditations
URL: https://guruka.com/meditate/
Description: Free guided meditations for calm, focus, sleep, energy, and well-being. Tap to start, no account needed.

<style>
#meditate-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#meditate-hub .mh-header {
text-align: center;
margin-bottom: 3rem;
}
#meditate-hub .mh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #meditate-hub .mh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#meditate-hub .mh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #meditate-hub .mh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.mh-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.mh-card {
display: grid;
grid-template-columns: 2.5rem 1fr;
column-gap: 0.875rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 1.25rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .mh-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.mh-card:hover {
transform: none;
}
.mh-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.mh-dot {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.mh-card h2 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.375rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.mh-card .mh-sub,
.mh-card .mh-play {
grid-column: 1 / -1;
}
[data-theme="dark"] .mh-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.mh-card .mh-sub {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.5;
margin-bottom: 0.375rem;
}
[data-theme="dark"] .mh-card .mh-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.mh-card .mh-dur {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-muted, #6b7788);
margin-left: auto;
}
[data-theme="dark"] .mh-card .mh-dur {
color: var(--color-dark-text-muted, #94a3b8);
}
.mh-play {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
margin-top: 0.25rem;
min-height: 44px;
}
/* ── 480px+ ── */
@media (min-width: 480px) {
.mh-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.mh-card {
padding: 1.5rem;
}
}
/* ── 768px+ ── */
@media (min-width: 768px) {
.mh-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.mh-card {
padding: 1.75rem;
grid-template-columns: 3rem 1fr;
}
.mh-dot {
width: 3rem;
height: 3rem;
}
}
/* ── Hover (pointer devices only) ── */
@media (hover: hover) and (pointer: fine) {
.mh-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.mh-card:hover .mh-play {
color: var(--color-primary-hover, #0d7d63);
}
}
@media (prefers-reduced-motion: reduce) {
.mh-card {
transition: none;
}
}
</style>

<div id="meditate-hub">
<div class="mh-header">
<h1>Guided Meditations</h1>
<p>Free with no intrusive ads. Tap to begin, no account needed.</p>
</div>

<div class="mh-grid">
<a href="/meditate/calm-and-stress-relief/" class="mh-card" style="--accent:#818cf8">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#818cf8,#a78bfa)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#818cf8,#a78bfa)"></div>
<h2>Calm & Stress Relief</h2>
<p class="mh-sub">Release tension and return to the breath</p>
<div class="mh-play"><span>Begin &rarr;</span><span class="mh-dur">5 min</span></div>
</a>

<a href="/meditate/focus-and-clarity/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#3b82f6,#1e40af)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#3b82f6,#1e40af)"></div>
<h2>Focus & Clarity</h2>
<p class="mh-sub">Sharpen your attention and clear mental fog</p>
<div class="mh-play"><span>Begin &rarr;</span><span class="mh-dur">5 min</span></div>
</a>

<a href="/meditate/sleep-and-wind-down/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#4338ca)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#6366f1,#4338ca)"></div>
<h2>Sleep & Wind Down</h2>
<p class="mh-sub">Calm your mind and prepare for restful sleep</p>
<div class="mh-play"><span>Begin &rarr;</span><span class="mh-dur">7 min</span></div>
</a>

<a href="/meditate/morning-energy/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f59e0b,#d97706)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#f59e0b,#d97706)"></div>
<h2>Morning Energy</h2>
<p class="mh-sub">Start your day with vitality and intention</p>
<div class="mh-play"><span>Begin &rarr;</span><span class="mh-dur">5 min</span></div>
</a>

<a href="/meditate/loving-kindness/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f472b6,#ec4899)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#f472b6,#ec4899)"></div>
<h2>Loving Kindness</h2>
<p class="mh-sub">Cultivate compassion for yourself and others</p>
<div class="mh-play"><span>Begin &rarr;</span><span class="mh-dur">6 min</span></div>
</a>

<a href="/meditate/gratitude/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#fbbf24,#f59e0b)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#fbbf24,#f59e0b)"></div>
<h2>Gratitude</h2>
<p class="mh-sub">Appreciate what you have and find joy in the present</p>
<div class="mh-play"><span>Begin &rarr;</span><span class="mh-dur">5 min</span></div>
</a>

<a href="/meditate/body-scan-and-tension-release/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#2dd4bf,#14b8a6)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#2dd4bf,#14b8a6)"></div>
<h2>Body Scan</h2>
<p class="mh-sub">Scan your body for tension and release it</p>
<div class="mh-play"><span>Begin &rarr;</span><span class="mh-dur">8 min</span></div>
</a>
</div>
</div>

### GURUKA, Free Guided Meditations, Visualizations & Brain Games
URL: https://guruka.com/
Description: Free guided meditations, calming visualizations, and brain training games. No account required. No personal data collected. Works offline.

<style>
.gk-home {
max-width: 40rem;
margin: 2rem auto;
padding: 0 1rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.gk-hero-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1.5rem;
border-radius: 1rem;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
text-decoration: none;
color: inherit;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
}
[data-theme="dark"].gk-hero-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
}
.gk-hero-icon {
font-size: 2.25rem;
line-height: 1;
flex-shrink: 0;
}
.gk-hero-body h2 {
font-size: 1.35rem;
font-weight: 700;
margin: 0 0 0.35rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gk-hero-body h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gk-hero-body p {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].gk-hero-body p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gk-brand {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-primary, #0f9072);
margin-bottom: 0.25rem;
}
@media (hover: hover) and (pointer: fine) {
.gk-hero-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
border-color: rgba(15,144,114,0.3);
}
[data-theme="dark"].gk-hero-card:hover {
box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.12);
border-color: rgba(15,144,114,0.4);
}
}
@media (min-width: 480px) {
.gk-home { padding: 0 1.5rem; gap: 1.5rem; margin: 2.5rem auto; }
.gk-hero-card { padding: 1.75rem; }
.gk-hero-icon { font-size: 2.5rem; }
.gk-hero-body h2 { font-size: 1.5rem; }
}
.gk-headline {
text-align: center;
margin-bottom: 0.5rem;
}
.gk-headline h1 {
font-size: 1.6rem;
font-weight: 800;
line-height: 1.2;
margin: 0 0 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gk-headline h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gk-headline p {
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--color-text-secondary, #4b5b6d);
margin: 0;
}
[data-theme="dark"].gk-headline p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
@media (min-width: 480px) {
.gk-headline h1 { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
.gk-hero-card { transition: none; }
}
</style>

<div class="gk-home">
<div class="gk-headline">
<div class="gk-brand">GURUKA</div>
<h1>Free Guided Meditations, Visualizations & Brain Games</h1>
<p>No account required · No personal data collected · Works offline</p>
</div>
<a href="/meditate/" class="gk-hero-card">
<div class="gk-hero-icon">🧘</div>
<div class="gk-hero-body">
<h2>Meditate</h2>
<p>Guided meditations for calm, focus, and well-being</p>
</div>
</a>
<a href="/visuals/" class="gk-hero-card">
<div class="gk-hero-icon">✨</div>
<div class="gk-hero-body">
<h2>Affirmations</h2>
<p>Calming visuals with optional affirmation text</p>
</div>
</a>
<a href="/games/" class="gk-hero-card">
<div class="gk-hero-icon">🧠</div>
<div class="gk-hero-body">
<h2>Brain Games</h2>
<p>Train your brain with games targeting different cognitive skills</p>
</div>
</a>
</div>

### Affirmations & Meditative Visuals
URL: https://guruka.com/visuals/
Description: Calming full-screen visuals with custom affirmation text. Create your own affirmations, displayed privately in your browser.

<style>
#visuals-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#visuals-hub .vh-header {
text-align: center;
margin-bottom: 3rem;
}
#visuals-hub .vh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #visuals-hub .vh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#visuals-hub .vh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #visuals-hub .vh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vh-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.vh-card {
display: grid;
grid-template-columns: 2.5rem 1fr;
column-gap: 0.875rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 1.25rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .vh-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.vh-card:hover { transform: none; }
.vh-dot {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.vh-card h2 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.375rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.vh-card .vh-sub,
.vh-card .vh-launch {
grid-column: 1 / -1;
}
[data-theme="dark"] .vh-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.vh-card .vh-sub {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.5;
margin-bottom: 0.375rem;
}
[data-theme="dark"] .vh-card .vh-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vh-launch {
display: flex;
align-items: center;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
margin-top: 0.25rem;
min-height: 44px;
}
@media (min-width: 480px) {
.vh-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.vh-card { padding: 1.5rem; }
}
@media (min-width: 768px) {
.vh-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.vh-card {
padding: 1.75rem;
grid-template-columns: 3rem 1fr;
}
.vh-dot { width: 3rem; height: 3rem; }
}
@media (hover: hover) and (pointer: fine) {
.vh-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.vh-card:hover .vh-launch {
color: var(--color-primary-hover, #0d7d63);
}
}
@media (prefers-reduced-motion: reduce) {
.vh-card { transition: none; }
}
</style>

<div id="visuals-hub">
<div class="vh-header">
<h1>Meditative Visuals</h1>
<p>Calming full-screen animations for relaxation and focus. Enter your affirmation text to show.<br>No account needed.</p>
</div>

<div class="vh-grid">
<a href="/visuals/breathing-orb/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#a78bfa)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#6366f1,#a78bfa)"></div>
<h2>Breathing Orb</h2>
<p class="vh-sub">Pulsing orb guiding your breath</p>
<div class="vh-launch"><span>Launch &rarr;</span></div>
</a>

<a href="/visuals/aurora/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#22d3ee,#06b6d4)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#22d3ee,#06b6d4)"></div>
<h2>Aurora</h2>
<p class="vh-sub">Flowing northern lights</p>
<div class="vh-launch"><span>Launch &rarr;</span></div>
</a>

<a href="/visuals/starfield/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#1e293b,#475569)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#1e293b,#475569)"></div>
<h2>Starfield</h2>
<p class="vh-sub">Twinkling stars in deep space</p>
<div class="vh-launch"><span>Launch &rarr;</span></div>
</a>

<a href="/visuals/lava-flow/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f97316,#ef4444)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#f97316,#ef4444)"></div>
<h2>Lava Flow</h2>
<p class="vh-sub">Blobs merging and separating</p>
<div class="vh-launch"><span>Launch &rarr;</span></div>
</a>

<a href="/visuals/mandala/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#eab308,#a855f7)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#eab308,#a855f7)"></div>
<h2>Mandala</h2>
<p class="vh-sub">Rotating sacred geometry</p>
<div class="vh-launch"><span>Launch &rarr;</span></div>
</a>

<a href="/visuals/dividing-cells/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#10b981,#22d3ee)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#10b981,#22d3ee)"></div>
<h2>Dividing Cells</h2>
<p class="vh-sub">Cells dividing endlessly</p>
<div class="vh-launch"><span>Launch &rarr;</span></div>
</a>
</div>
</div>

### Eugene
URL: https://guruka.com/author/eugene/
Description: Eugene, author profile

# Eugene

Eugene is a contributor to this publication.

### Terms of Service
URL: https://guruka.com/terms/
Description: Terms of Service for GURUKA

# Terms of Service

*Last updated: March 6, 2026*

## 1. Acceptance of Terms

By accessing and using GURUKA (https://guruka.com), you accept and agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use our website.

## 2. Use of Service

GURUKA provides free brain training games and guided meditations. You agree to use GURUKA only for lawful purposes and in accordance with these Terms. You agree not to use the service in any way that violates any applicable laws or regulations.

## 3. Intellectual Property

The content, features, and functionality of GURUKA are owned by us and are protected by international copyright, trademark, and other intellectual property laws.

## 4. Disclaimer

Content and activities on GURUKA are for entertainment and general wellness purposes only. They are not intended as medical advice or treatment. The brain training games and meditations are designed for personal enjoyment and should not be considered a substitute for professional medical or psychological guidance.

## 5. User Conduct

You agree not to:

- Use the service for any unlawful purpose
- Attempt to gain unauthorized access to any portion of the service
- Interfere with or disrupt the service or servers
- Collect or harvest any information from the service

## 6. Disclaimer of Warranties

The service is provided "as is" and "as available" without warranties of any kind, either express or implied. We do not warrant that the service will be uninterrupted, secure, or error-free.

## 7. Limitation of Liability

To the fullest extent permitted by law, GURUKA shall not be liable for any indirect, incidental, special, consequential, or punitive damages arising out of your use of the service.

## 8. Changes to Terms

We reserve the right to modify these terms at any time. We will notify users of any material changes by updating the "Last updated" date. Your continued use of the service after changes constitutes acceptance of the modified terms.

## 9. Contact

If you have questions about these Terms of Service, please contact us through our website at [https://guruka.com](https://guruka.com).

### Calm & Clarity Affirmation for Visual Meditation
URL: https://guruka.com/de/affirmation-calm-and-clarity/
Description: Free calm and clarity affirmation for visual meditation. Display positive affirmations over calming visuals, privately in your browser.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Calm & Clarity Affirmation</h1>
<p class="aff-intro">When thoughts race and the mind feels scattered, these words can guide you back to stillness. Use this affirmation during visual meditation to cultivate inner peace and mental clarity.</p>
<div class="aff-lines">
My mind is calm and clear<br>I release what I cannot control<br>I am present in this moment
</div>
<a href="/visuals/breathing-orb/?edit=calm-and-clarity" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Focus & Energy Affirmation for Visual Meditation
URL: https://guruka.com/de/affirmation-focus-and-energy/
Description: Free focus and energy affirmation for visual meditation. Sharpen concentration and channel your energy with calming visuals.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Focus & Energy Affirmation</h1>
<p class="aff-intro">A focused mind moves with purpose. This affirmation helps you channel your energy and move forward with intention during visual meditation.</p>
<div class="aff-lines">
My focus is sharp and steady<br>I channel my energy with purpose<br>I move forward with intention
</div>
<a href="/visuals/breathing-orb/?edit=focus-and-energy" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### How Your Data Works
URL: https://guruka.com/your-data/
Description: Learn how GURUKA stores your data locally on your device, what happens when you switch devices or clear your browser, and how to view your stored data.

# How Your Data Works on GURUKA

GURUKA does not require an account, and we do not store any of your data on our servers. Everything you do on GURUKA stays on your own device, inside your web browser. This page explains what that means in plain terms.

## Your data lives on your device

When you use GURUKA, your progress is saved directly inside the browser you are using. This includes:

- Game scores and high scores
- Meditation session history
- Activity tracking data
- Your preferences and settings

This data is not sent anywhere. It is not uploaded to a server. It is not shared with anyone. It exists only on the device and browser where you created it.

## What happens on a different device or browser

Because your data is stored on your device, it is not available anywhere else. If you open GURUKA on a different phone, computer, or tablet, you will start fresh. The same applies if you use a different browser on the same device. For example, if you use Chrome on your laptop and then open GURUKA in Safari, your Chrome data will not appear in Safari.

This is the trade-off for not requiring an account: your data is completely private, but it does not follow you between devices.

## What happens when you clear your browser data

If you clear your browser's cache, cookies, or site data, your GURUKA data will be deleted. This is the same as what happens with any website that stores data locally. Most browsers let you clear data for specific sites without affecting others, but if you do a full cache clear, your GURUKA progress will be removed.

**To keep your data safe:** avoid clearing site data for guruka.com specifically, or be aware that a full browser cache clear will reset your GURUKA progress.

## No account means no data recovery

Since GURUKA does not have accounts or cloud storage, there is no way to recover your data once it is deleted. There is no "forgot password" or "restore from backup" option because no backup exists. Your data is fully in your hands.

## Why we chose this approach

Most apps and websites ask you to create an account so they can store your data on their servers. That is convenient for syncing across devices, but it also means the company has access to your personal information, usage patterns, and habits.

We chose a different path. GURUKA stores everything locally so that:

- **Your data is truly private** - we cannot see it, sell it, or lose it in a data breach
- **No sign-up is needed** - you can start meditating or playing games immediately
- **No tracking** - we do not use advertising pixels or third-party analytics
- **You are in full control** - you can delete your data at any time by clearing your browser storage

## For technical users: how to view your data

GURUKA stores data using your browser's **localStorage**. You can inspect it directly:

1. Open GURUKA in your browser (e.g. [guruka.com/games/](https://guruka.com/games/))
2. Open Developer Tools (press **F12** or **Ctrl+Shift+I** on Windows/Linux, **Cmd+Option+I** on Mac)
3. Go to the **Application** tab (Chrome/Edge) or **Storage** tab (Firefox)
4. In the left sidebar, expand **Local Storage** and click on **https://guruka.com**
5. You will see all stored keys and values: game scores, meditation history, preferences, and activity data

All keys are prefixed with `guruka_` so they are easy to identify. You can edit or delete individual entries, or right-click and choose "Clear" to remove everything.

## Questions?

If you have questions about how your data is handled, see our [Privacy Policy](/privacy/) or [contact us](https://docs.google.com/forms/d/e/1FAIpQLSe1ECOGIxdixwDDVyQqCgPRctD83_jqwEp-6bhysm8gu8uZKA/viewform).

### Gratitude Affirmation for Visual Meditation
URL: https://guruka.com/de/affirmation-gratitude/
Description: Free gratitude affirmation for visual meditation. Cultivate thankfulness with calming visuals and positive affirmation text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Gratitude Affirmation</h1>
<p class="aff-intro">Gratitude shifts your focus from what is missing to what is present. Use this affirmation with a visual meditation to deepen your sense of appreciation and abundance.</p>
<div class="aff-lines">
I am grateful for this moment<br>Abundance flows into my life<br>I appreciate the simple things
</div>
<a href="/visuals/breathing-orb/?edit=gratitude" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Letting Go Affirmation for Visual Meditation
URL: https://guruka.com/de/affirmation-letting-go/
Description: Free letting go affirmation for visual meditation. Release what no longer serves you with calming visuals and positive text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Letting Go Affirmation</h1>
<p class="aff-intro">Holding on to what no longer serves you creates tension. This affirmation helps you release, forgive, and create space for peace during visual meditation.</p>
<div class="aff-lines">
I let go of what no longer serves me<br>I forgive myself and others<br>I make space for peace
</div>
<a href="/visuals/breathing-orb/?edit=letting-go" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Quit Smoking Affirmation for Visual Meditation
URL: https://guruka.com/de/affirmation-quit-smoking/
Description: Free quit smoking affirmation for visual meditation. Strengthen your resolve to quit with calming visuals and positive affirmations, privately in your browser.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Quit Smoking Affirmation</h1>
<p class="aff-intro">Every breath without smoke is a step toward freedom. This affirmation reinforces your choice to live smoke-free, pairing positive words with calming visual meditation to help you stay strong through cravings.</p>
<div class="aff-lines">
My lungs are cleaner every day<br>I am stronger than any craving<br>Every breath is a victory
</div>
<a href="/visuals/breathing-orb/?edit=quit-smoking" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Self-Confidence Affirmation for Visual Meditation
URL: https://guruka.com/de/affirmation-self-confidence/
Description: Free self-confidence affirmation for visual meditation. Build belief in yourself with calming visuals and positive affirmations.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Self-Confidence Affirmation</h1>
<p class="aff-intro">Confidence grows when you remind yourself of your worth. Pair this affirmation with a calming visual to reinforce self-belief and inner strength.</p>
<div class="aff-lines">
I believe in myself and my abilities<br>I am worthy of good things<br>I grow stronger every day
</div>
<a href="/visuals/breathing-orb/?edit=self-confidence" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Sleep & Rest Affirmation for Visual Meditation
URL: https://guruka.com/de/affirmation-sleep-and-rest/
Description: Free sleep and rest affirmation for visual meditation. Prepare for restful sleep with calming visuals and gentle affirmation text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Sleep & Rest Affirmation</h1>
<p class="aff-intro">Rest is not a luxury, it is essential. This affirmation prepares your mind and body for deep, peaceful sleep during a calming visual meditation.</p>
<div class="aff-lines">
I give myself permission to rest<br>My body relaxes with each breath<br>I drift into peaceful sleep
</div>
<a href="/visuals/breathing-orb/?edit=sleep-and-rest" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Gehirntraining-Spiele
URL: https://guruka.com/de/games/
Description: Kostenlose Gehirnspiele. Kein Konto.

<style>
#games-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#games-hub.gh-header {
text-align: center;
margin-bottom: 3rem;
}
#games-hub.gh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #games-hub.gh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#games-hub.gh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #games-hub.gh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.gh-game-card {
display: grid;
grid-template-columns: 4rem 1fr;
column-gap: 1rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 2rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"].gh-game-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.gh-game-card:hover {
transform: none;
}
.gh-game-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.gh-game-card.speed-match::before { background: #0f9072; }
.gh-game-card.memory-matrix::before { background: #f59e0b; }
.gh-game-card.sequence-recall::before { background: #10b981; }
.gh-game-card.number-crunch::before { background: #6366f1; }
.gh-game-card.color-clash::before { background: #ec4899; }
.gh-game-card.quick-sort::before { background: #f97316; }
.gh-game-card.pattern-path::before { background: #14b8a6; }
.gh-game-icon {
width: 4rem;
height: 4rem;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.gh-game-card h2 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.gh-game-card.gh-skill,
.gh-game-card.gh-desc,
.gh-game-card.gh-play-btn,
.gh-game-card.gh-best {
grid-column: 1 / -1;
}
[data-theme="dark"].gh-game-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gh-game-card.gh-skill {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
margin-bottom: 0.5rem;
}
.speed-match.gh-skill { background: rgba(15,144,114,0.1); color: #0f9072; }
.memory-matrix.gh-skill { background: rgba(245,158,11,0.1); color: #f59e0b; }
.sequence-recall.gh-skill { background: rgba(16,185,129,0.1); color: #10b981; }
.number-crunch.gh-skill { background: rgba(99,102,241,0.1); color: #6366f1; }
.color-clash.gh-skill { background: rgba(236,72,153,0.1); color: #ec4899; }
.quick-sort.gh-skill { background: rgba(249,115,22,0.1); color: #f97316; }
.pattern-path.gh-skill { background: rgba(20,184,166,0.1); color: #14b8a6; }
.gh-game-card.gh-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 0.75rem;
}
[data-theme="dark"].gh-game-card.gh-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-play-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
min-height: 44px;
}
.gh-play-btn::after {
content: '\2192';
transition: transform 0.2s;
}
.gh-best:empty {
display: none;
}
.gh-best {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-border, #dfe4ea);
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].gh-best {
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-best strong {
color: var(--color-primary, #0f9072);
}
.gh-info {
text-align: center;
padding: 2rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 1rem;
}
[data-theme="dark"].gh-info {
background: var(--color-dark-bg-secondary, #1e293b);
}
.gh-info h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gh-info h3 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gh-info p {
color: var(--color-text-secondary, #4b5b6d);
max-width: 32rem;
margin: 0 auto;
font-size: 0.9375rem;
}
[data-theme="dark"].gh-info p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="games-hub">
<div class="gh-header">
<h1>&#129504; Gehirntraining-Spiele</h1>
<p>Kostenlos und ohne nervige Werbung. Deine Ergebnisse werden lokal gespeichert - kein Konto nötig.</p>
</div>

<div class="gh-grid">
<a href="/de/games/speed-match/" class="gh-game-card speed-match">
<div class="gh-game-icon" style="background: rgba(15,144,114,0.1); color: #0f9072;">&#9889;</div>
<h2>Speed Match</h2>
<span class="gh-skill">Verarbeitungsgeschwindigkeit</span>
<p class="gh-desc">Teste deine Verarbeitungsgeschwindigkeit durch Vergleichen von Symbolen. Ist das aktuelle Symbol dasselbe wie das vorherige? Reagiere schnell, bevor die Zeit abläuft!</p>
<span class="gh-play-btn">Jetzt spielen</span>
<div class="gh-best" id="best-speed-match"></div>
</a>

<a href="/de/games/memory-matrix/" class="gh-game-card memory-matrix">
<div class="gh-game-icon" style="background: rgba(245,158,11,0.1); color: #f59e0b;">&#9638;</div>
<h2>Memory Matrix</h2>
<span class="gh-skill">Räumliches Gedächtnis</span>
<p class="gh-desc">Beobachte ein Muster von hervorgehobenen Zellen in einem Raster und erstelle es dann aus dem Gedächtnis nach. Das Raster wird größer und die Muster komplexer, je höher du aufsteigst.</p>
<span class="gh-play-btn">Jetzt spielen</span>
<div class="gh-best" id="best-memory-matrix"></div>
</a>

<a href="/de/games/sequence-recall/" class="gh-game-card sequence-recall">
<div class="gh-game-icon" style="background: rgba(16,185,129,0.1); color: #10b981;">&#9776;</div>
<h2>Sequence Recall</h2>
<span class="gh-skill">Arbeitsgedächtnis</span>
<p class="gh-desc">Merke dir eine Sequenz von Farben, die einzeln angezeigt werden, und rufe sie dann in der richtigen Reihenfolge ab. Höhere Level fügen mathematische Ablenkungen und Zwei-Spuren-Herausforderungen hinzu.</p>
<span class="gh-play-btn">Jetzt spielen</span>
<div class="gh-best" id="best-sequence-recall"></div>
</a>

<a href="/de/games/number-crunch/" class="gh-game-card number-crunch">
<div class="gh-game-icon" style="background: rgba(99,102,241,0.1); color: #6366f1;">&#129518;</div>
<h2>Number Crunch</h2>
<span class="gh-skill">Kopfrechnen</span>
<p class="gh-desc">Löse Gleichungen mit fehlenden Elementen unter Zeitdruck. Höhere Level fügen Regelmodifikatoren hinzu, die eine mentale Umwandlung deiner Antworten erfordern.</p>
<span class="gh-play-btn">Jetzt spielen</span>
<div class="gh-best" id="best-number-crunch"></div>
</a>

<a href="/de/games/color-clash/" class="gh-game-card color-clash">
<div class="gh-game-icon" style="background: rgba(236,72,153,0.1); color: #ec4899;">&#127912;</div>
<h2>Color Clash</h2>
<span class="gh-skill">Inhibitorische Kontrolle</span>
<p class="gh-desc">Ein Farbwort erscheint in einer anderen Tintenfarbe. Tippe die richtige Antwort basierend auf der aktuellen Regel, Tintenfarbe oder Wortbedeutung. Die Regeln wechseln!</p>
<span class="gh-play-btn">Jetzt spielen</span>
<div class="gh-best" id="best-color-clash"></div>
</a>

<a href="/de/games/quick-sort/" class="gh-game-card quick-sort">
<div class="gh-game-icon" style="background: rgba(249,115,22,0.1); color: #f97316;">&#128451;</div>
<h2>Quick Sort</h2>
<span class="gh-skill">Aufgabenwechsel</span>
<p class="gh-desc">Sortiere Elemente in Kategorien durch Wischen nach links oder rechts. Die Sortierregel ändert sich alle paar Runden und fordert deine mentale Flexibilität heraus.</p>
<span class="gh-play-btn">Jetzt spielen</span>
<div class="gh-best" id="best-quick-sort"></div>
</a>

<a href="/de/games/pattern-path/" class="gh-game-card pattern-path">
<div class="gh-game-icon" style="background: rgba(20,184,166,0.1); color: #14b8a6;">&#129513;</div>
<h2>Pattern Path</h2>
<span class="gh-skill">Mustererkennung</span>
<p class="gh-desc">Finde das fehlende Teil in einer Sequenz visueller Muster. Formen ändern sich in Farbe, Größe und Drehung, erkenne die Regel und wähle die richtige Ergänzung.</p>
<span class="gh-play-btn">Jetzt spielen</span>
<div class="gh-best" id="best-pattern-path"></div>
</a>
</div>

<div class="gh-info">
<h3>So funktioniert's</h3>
<p>Jedes Spiel passt sich mit 20 Schwierigkeitsstufen an dein Können an. Trainiere täglich 15-20 Minuten über alle sieben Spiele hinweg für die besten Ergebnisse. Deine persönlichen Bestleistungen werden in deinem Browser gespeichert.</p>
</div>
</div>

<script>
(function() {
var games = ['speed-match', 'memory-matrix', 'sequence-recall', 'number-crunch', 'color-clash', 'quick-sort', 'pattern-path'];
games.forEach(function(game) {
var best = localStorage.getItem('guruka_' + game + '_best');
var el = document.getElementById('best-' + game);
if (el && best) {
el.innerHTML = 'Persönlicher Rekord: <strong>' + Number(best).toLocaleString() + '</strong> points';
}
});
})();
</script>

<style>
/* ── Mobile-first responsive ── */
.gh-game-card {
padding: 1.5rem;
grid-template-columns: 3.25rem 1fr;
}
.gh-game-icon {
width: 3.25rem;
height: 3.25rem;
}
.gh-game-card.gh-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 768px) {
.gh-game-card {
padding: 2rem;
grid-template-columns: 4rem 1fr;
}
.gh-game-icon {
width: 4rem;
height: 4rem;
}
.gh-game-card.gh-desc {
-webkit-line-clamp: unset;
overflow: visible;
}
}
@media (hover: hover) and (pointer: fine) {
.gh-game-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}
.gh-game-card:hover.gh-play-btn::after {
transform: translateX(4px);
}
}
@media (prefers-reduced-motion: reduce) {
.gh-game-card {
transition: none;
}
}
</style>

### Privacy Policy
URL: https://guruka.com/de/privacy/
Description: Privacy Policy for GURUKA

# Privacy Policy

*Last updated: March 11, 2026*

**No sign-up is required to use GURUKA. All user data, including game scores, meditation stats, activity tracking, and preferences, is stored locally on your device only. We do not collect, store, or share your personal data. No data is transmitted to our servers or any third party.**

## 1. Information We Do NOT Collect

GURUKA is designed with a local-first approach. We do not collect personal information such as names, email addresses, or account credentials, because GURUKA requires no sign-up or login.

All user-generated data stays on your device:

- **Game scores and progress** - stored in your browser's localStorage
- **Meditation history and stats** - stored in your browser's localStorage
- **Activity tracking data** - stored in your browser's localStorage
- **Preferences and settings** - stored in your browser's localStorage

None of this data is transmitted to any server. It exists only on your device and can be cleared at any time through your browser settings.

## 2. How We Use Information

Since we do not collect personal data, our use of information is limited to:

- Improving and optimizing the website
- Analyzing general usage patterns and trends
- Maintaining the security of our service

## 3. Cookies and Tracking

GURUKA does not use tracking cookies, third-party trackers, or advertising pixels. The only browser storage used is localStorage to save your game and activity data locally on your device. You can clear this data at any time through your browser settings.

## 4. Third-Party Services

GURUKA does not use third-party analytics services or embed third-party tracking scripts. Your browsing activity on GURUKA is not shared with any external service.

## 5. Hosting and Bot Protection

GURUKA is hosted on Cloudflare, which provides DNS, content delivery, and security services. As part of its security features, Cloudflare may occasionally display a brief verification screen ("Verify you are human") to protect the website from automated bots and malicious traffic. This check is lightweight, privacy-preserving, and does not use traditional CAPTCHA puzzles. It runs automatically and typically completes in seconds without requiring any action from you. Cloudflare processes this verification as a data processor on our behalf. For details on how Cloudflare handles this data, see [Cloudflare's Privacy Policy](https://www.cloudflare.com/privacypolicy/).

## 6. Data Security

Because your data is stored locally on your device and not transmitted to our servers, you maintain full control over it. We implement appropriate technical measures to ensure the website itself is served securely.

## 7. Your Rights

Since GURUKA stores no personal data on any server, there is no personal data for us to access, correct, or delete on your behalf. All user data is stored locally in your browser's localStorage and is fully under your control. You can view or clear this data at any time through your browser settings. Clearing your browser cache or site data will permanently delete all stored data including game scores, meditation history, and preferences. For a detailed explanation of how your data is stored and managed, see [How Your Data Works](/your-data/).

## 8. Children's Privacy

GURUKA is suitable for users of all ages. We do not collect personal information from anyone, including children.

## 9. Changes to Privacy Policy

We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new policy on this page and updating the "Last updated" date.

## 10. Contact

If you have questions about this Privacy Policy, please contact us through our website at [https://guruka.com](https://guruka.com).

### GURUKA, Kostenlose geführte Meditationen, Visualisierungen & Gehirnspiele
URL: https://guruka.com/de/root/
Description: Kostenlose geführte Meditationen, beruhigende Visualisierungen und Gehirntraining-Spiele. Kein Konto nötig. Keine persönlichen Daten. Unterstützt Offline-Modus.

<style>
.gk-home {
max-width: 40rem;
margin: 2rem auto;
padding: 0 1rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.gk-hero-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1.5rem;
border-radius: 1rem;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
text-decoration: none;
color: inherit;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
}
[data-theme="dark"].gk-hero-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
}
.gk-hero-icon {
font-size: 2.25rem;
line-height: 1;
flex-shrink: 0;
}
.gk-hero-body h2 {
font-size: 1.35rem;
font-weight: 700;
margin: 0 0 0.35rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gk-hero-body h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gk-hero-body p {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].gk-hero-body p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gk-hero-meta {
margin-top: 0.5rem;
font-size: 0.8rem;
color: var(--color-primary, #0f9072);
font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
.gk-hero-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
border-color: rgba(15,144,114,0.3);
}
[data-theme="dark"].gk-hero-card:hover {
box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.12);
border-color: rgba(15,144,114,0.4);
}
}
@media (min-width: 480px) {
.gk-home { padding: 0 1.5rem; gap: 1.5rem; margin: 2.5rem auto; }
.gk-hero-card { padding: 1.75rem; }
.gk-hero-icon { font-size: 2.5rem; }
.gk-hero-body h2 { font-size: 1.5rem; }
}
.gk-headline {
text-align: center;
margin-bottom: 0.5rem;
}
.gk-headline h1 {
font-size: 1.6rem;
font-weight: 800;
line-height: 1.2;
margin: 0 0 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gk-headline h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gk-headline p {
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--color-text-secondary, #4b5b6d);
margin: 0;
}
[data-theme="dark"].gk-headline p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
@media (min-width: 480px) {
.gk-headline h1 { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
.gk-hero-card { transition: none; }
}
</style>

<div class="gk-home">
<div class="gk-headline">
<h1>Kostenlose geführte Meditationen, Visualisierungen & Gehirnspiele</h1>
<p>Kostenlos · Kein Konto nötig · Keine persönlichen Daten · Unterstützt Offline-Modus</p>
</div>
<a href="/de/meditate/" class="gk-hero-card">
<div class="gk-hero-icon">🧘</div>
<div class="gk-hero-body">
<h2>Meditieren</h2>
<p>Geführte Meditationen für Ruhe, Fokus und Wohlbefinden</p>
<div class="gk-hero-meta">Kostenlos, kein Konto nötig</div>
</div>
</a>
<a href="/de/visuals/" class="gk-hero-card">
<div class="gk-hero-icon">✨</div>
<div class="gk-hero-body">
<h2>Affirmationen</h2>
<p>Beruhigende Visuals mit optionalem Affirmationstext</p>
<div class="gk-hero-meta">Kostenlos, kein Konto nötig</div>
</div>
</a>
<a href="/de/games/" class="gk-hero-card">
<div class="gk-hero-icon">🧠</div>
<div class="gk-hero-body">
<h2>Gehirnspiele</h2>
<p>Trainiere dein Gehirn mit Spielen für verschiedene kognitive Fähigkeiten</p>
<div class="gk-hero-meta">Kostenlos, kein Konto nötig</div>
</div>
</a>
</div>

### Terms of Service
URL: https://guruka.com/de/terms/
Description: Terms of Service for GURUKA

# Terms of Service

*Last updated: March 6, 2026*

## 1. Acceptance of Terms

By accessing and using GURUKA (https://guruka.com), you accept and agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use our website.

## 2. Use of Service

GURUKA provides free brain training games and guided meditations. You agree to use GURUKA only for lawful purposes and in accordance with these Terms. You agree not to use the service in any way that violates any applicable laws or regulations.

## 3. Intellectual Property

The content, features, and functionality of GURUKA are owned by us and are protected by international copyright, trademark, and other intellectual property laws.

## 4. Disclaimer

Content and activities on GURUKA are for entertainment and general wellness purposes only. They are not intended as medical advice or treatment. The brain training games and meditations are designed for personal enjoyment and should not be considered a substitute for professional medical or psychological guidance.

## 5. User Conduct

You agree not to:

- Use the service for any unlawful purpose
- Attempt to gain unauthorized access to any portion of the service
- Interfere with or disrupt the service or servers
- Collect or harvest any information from the service

## 6. Disclaimer of Warranties

The service is provided "as is" and "as available" without warranties of any kind, either express or implied. We do not warrant that the service will be uninterrupted, secure, or error-free.

## 7. Limitation of Liability

To the fullest extent permitted by law, GURUKA shall not be liable for any indirect, incidental, special, consequential, or punitive damages arising out of your use of the service.

## 8. Changes to Terms

We reserve the right to modify these terms at any time. We will notify users of any material changes by updating the "Last updated" date. Your continued use of the service after changes constitutes acceptance of the modified terms.

## 9. Contact

If you have questions about these Terms of Service, please contact us through our website at [https://guruka.com](https://guruka.com).

### Affirmationen & Meditative Visualisierungen
URL: https://guruka.com/de/visuals/
Description: Beruhigende Vollbild-Visualisierungen mit eigenem Affirmationstext. Erstellen Sie Ihre eigenen Affirmationen, privat in Ihrem Browser gespeichert.

<style>
#visuals-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#visuals-hub .vh-header {
text-align: center;
margin-bottom: 3rem;
}
#visuals-hub .vh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #visuals-hub .vh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#visuals-hub .vh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #visuals-hub .vh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vh-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.vh-card {
display: grid;
grid-template-columns: 2.5rem 1fr;
column-gap: 0.875rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 1.25rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .vh-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.vh-card:hover { transform: none; }
.vh-dot {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.vh-card h2 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.375rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.vh-card .vh-sub,
.vh-card .vh-launch {
grid-column: 1 / -1;
}
[data-theme="dark"] .vh-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.vh-card .vh-sub {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.5;
margin-bottom: 0.375rem;
}
[data-theme="dark"] .vh-card .vh-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vh-launch {
display: flex;
align-items: center;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
margin-top: 0.25rem;
min-height: 44px;
}
@media (min-width: 480px) {
.vh-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.vh-card { padding: 1.5rem; }
}
@media (min-width: 768px) {
.vh-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.vh-card {
padding: 1.75rem;
grid-template-columns: 3rem 1fr;
}
.vh-dot { width: 3rem; height: 3rem; }
}
@media (hover: hover) and (pointer: fine) {
.vh-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.vh-card:hover .vh-launch {
color: var(--color-primary-hover, #0d7d63);
}
}
@media (prefers-reduced-motion: reduce) {
.vh-card { transition: none; }
}
</style>

<div id="visuals-hub">
<div class="vh-header">
<h1>Meditative Visualisierungen</h1>
<p>Beruhigende Vollbild-Animationen für Entspannung und Fokus. Geben Sie Ihren Affirmationstext ein.<br>Kein Konto erforderlich.</p>
</div>

<div class="vh-grid">
<a href="/de/visuals/breathing-orb/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#a78bfa)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#6366f1,#a78bfa)"></div>
<h2>Atemkugel</h2>
<p class="vh-sub">Pulsierende Kugel, die deinen Atem führt</p>
<div class="vh-launch"><span>Starten &rarr;</span></div>
</a>

<a href="/de/visuals/aurora/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#22d3ee,#06b6d4)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#22d3ee,#06b6d4)"></div>
<h2>Aurora</h2>
<p class="vh-sub">Fließende Nordlichter</p>
<div class="vh-launch"><span>Starten &rarr;</span></div>
</a>

<a href="/de/visuals/starfield/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#1e293b,#475569)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#1e293b,#475569)"></div>
<h2>Sternenfeld</h2>
<p class="vh-sub">Funkelnde Sterne im tiefen Weltraum</p>
<div class="vh-launch"><span>Starten &rarr;</span></div>
</a>

<a href="/de/visuals/lava-flow/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f97316,#ef4444)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#f97316,#ef4444)"></div>
<h2>Lavafluss</h2>
<p class="vh-sub">Tropfen, die verschmelzen und sich trennen</p>
<div class="vh-launch"><span>Starten &rarr;</span></div>
</a>

<a href="/de/visuals/mandala/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#eab308,#a855f7)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#eab308,#a855f7)"></div>
<h2>Mandala</h2>
<p class="vh-sub">Rotierende heilige Geometrie</p>
<div class="vh-launch"><span>Starten &rarr;</span></div>
</a>

<a href="/de/visuals/dividing-cells/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#10b981,#22d3ee)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#10b981,#22d3ee)"></div>
<h2>Zellteilung</h2>
<p class="vh-sub">Zellen, die sich endlos teilen</p>
<div class="vh-launch"><span>Starten &rarr;</span></div>
</a>
</div>
</div>

### Geführte Meditationen
URL: https://guruka.com/de/meditate/
Description: Kostenlose geführte Meditationen für Ruhe, Fokus, Schlaf, Energie und Wohlbefinden. Tippen zum Starten, kein Konto erforderlich.

<style>
#meditate-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#meditate-hub .mh-header {
text-align: center;
margin-bottom: 3rem;
}
#meditate-hub .mh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #meditate-hub .mh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#meditate-hub .mh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #meditate-hub .mh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.mh-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.mh-card {
display: grid;
grid-template-columns: 2.5rem 1fr;
column-gap: 0.875rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 1.25rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .mh-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.mh-card:hover {
transform: none;
}
.mh-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.mh-dot {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.mh-card h2 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.375rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.mh-card .mh-sub,
.mh-card .mh-play {
grid-column: 1 / -1;
}
[data-theme="dark"] .mh-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.mh-card .mh-sub {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.5;
margin-bottom: 0.375rem;
}
[data-theme="dark"] .mh-card .mh-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.mh-card .mh-dur {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-muted, #6b7788);
margin-left: auto;
}
[data-theme="dark"] .mh-card .mh-dur {
color: var(--color-dark-text-muted, #94a3b8);
}
.mh-play {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
margin-top: 0.25rem;
min-height: 44px;
}
/* ── 480px+ ── */
@media (min-width: 480px) {
.mh-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.mh-card {
padding: 1.5rem;
}
}
/* ── 768px+ ── */
@media (min-width: 768px) {
.mh-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.mh-card {
padding: 1.75rem;
grid-template-columns: 3rem 1fr;
}
.mh-dot {
width: 3rem;
height: 3rem;
}
}
/* ── Hover (pointer devices only) ── */
@media (hover: hover) and (pointer: fine) {
.mh-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.mh-card:hover .mh-play {
color: var(--color-primary-hover, #0d7d63);
}
}
@media (prefers-reduced-motion: reduce) {
.mh-card {
transition: none;
}
}
</style>

<div id="meditate-hub">
<div class="mh-header">
<h1>Geführte Meditationen</h1>
<p>Kostenlos und ohne nervige Werbung. Tippe zum Starten, kein Konto nötig.</p>
</div>

<div class="mh-grid">
<a href="/de/meditate/calm-and-stress-relief/" class="mh-card" style="--accent:#818cf8">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#818cf8,#a78bfa)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#818cf8,#a78bfa)"></div>
<h2>Ruhe & Stressabbau</h2>
<p class="mh-sub">Löse Spannungen und kehre zum Atem zurück</p>
<div class="mh-play"><span>Beginnen &rarr;</span><span class="mh-dur">5 Min.</span></div>
</a>

<a href="/de/meditate/focus-and-clarity/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#3b82f6,#1e40af)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#3b82f6,#1e40af)"></div>
<h2>Fokus & Klarheit</h2>
<p class="mh-sub">Schärfe deine Aufmerksamkeit und kläre geistigen Nebel</p>
<div class="mh-play"><span>Beginnen &rarr;</span><span class="mh-dur">5 Min.</span></div>
</a>

<a href="/de/meditate/sleep-and-wind-down/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#4338ca)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#6366f1,#4338ca)"></div>
<h2>Schlaf & Entspannung</h2>
<p class="mh-sub">Beruhige deinen Geist und bereite dich auf erholsamen Schlaf vor</p>
<div class="mh-play"><span>Beginnen &rarr;</span><span class="mh-dur">7 Min.</span></div>
</a>

<a href="/de/meditate/morning-energy/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f59e0b,#d97706)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#f59e0b,#d97706)"></div>
<h2>Morgenenergie</h2>
<p class="mh-sub">Starte deinen Tag mit Vitalität und Intention</p>
<div class="mh-play"><span>Beginnen &rarr;</span><span class="mh-dur">5 Min.</span></div>
</a>

<a href="/de/meditate/loving-kindness/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f472b6,#ec4899)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#f472b6,#ec4899)"></div>
<h2>Liebende Güte</h2>
<p class="mh-sub">Kultiviere Mitgefühl für dich selbst und andere</p>
<div class="mh-play"><span>Beginnen &rarr;</span><span class="mh-dur">6 Min.</span></div>
</a>

<a href="/de/meditate/gratitude/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#fbbf24,#f59e0b)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#fbbf24,#f59e0b)"></div>
<h2>Dankbarkeit</h2>
<p class="mh-sub">Schätze, was du hast und finde Freude im Hier und Jetzt</p>
<div class="mh-play"><span>Beginnen &rarr;</span><span class="mh-dur">5 Min.</span></div>
</a>

<a href="/de/meditate/body-scan-and-tension-release/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#2dd4bf,#14b8a6)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#2dd4bf,#14b8a6)"></div>
<h2>Körper-Scan</h2>
<p class="mh-sub">Scanne deinen Körper nach Spannungen und löse sie</p>
<div class="mh-play"><span>Beginnen &rarr;</span><span class="mh-dur">8 Min.</span></div>
</a>
</div>
</div>

### How Your Data Works
URL: https://guruka.com/de/your-data/
Description: Learn how GURUKA stores your data locally on your device, what happens when you switch devices or clear your browser, and how to view your stored data.

# How Your Data Works on GURUKA

GURUKA does not require an account, and we do not store any of your data on our servers. Everything you do on GURUKA stays on your own device, inside your web browser. This page explains what that means in plain terms.

## Your data lives on your device

When you use GURUKA, your progress is saved directly inside the browser you are using. This includes:

- Game scores and high scores
- Meditation session history
- Activity tracking data
- Your preferences and settings

This data is not sent anywhere. It is not uploaded to a server. It is not shared with anyone. It exists only on the device and browser where you created it.

## What happens on a different device or browser

Because your data is stored on your device, it is not available anywhere else. If you open GURUKA on a different phone, computer, or tablet, you will start fresh. The same applies if you use a different browser on the same device. For example, if you use Chrome on your laptop and then open GURUKA in Safari, your Chrome data will not appear in Safari.

This is the trade-off for not requiring an account: your data is completely private, but it does not follow you between devices.

## What happens when you clear your browser data

If you clear your browser's cache, cookies, or site data, your GURUKA data will be deleted. This is the same as what happens with any website that stores data locally. Most browsers let you clear data for specific sites without affecting others, but if you do a full cache clear, your GURUKA progress will be removed.

**To keep your data safe:** avoid clearing site data for guruka.com specifically, or be aware that a full browser cache clear will reset your GURUKA progress.

## No account means no data recovery

Since GURUKA does not have accounts or cloud storage, there is no way to recover your data once it is deleted. There is no "forgot password" or "restore from backup" option because no backup exists. Your data is fully in your hands.

## Why we chose this approach

Most apps and websites ask you to create an account so they can store your data on their servers. That is convenient for syncing across devices, but it also means the company has access to your personal information, usage patterns, and habits.

We chose a different path. GURUKA stores everything locally so that:

- **Your data is truly private** - we cannot see it, sell it, or lose it in a data breach
- **No sign-up is needed** - you can start meditating or playing games immediately
- **No tracking** - we do not use advertising pixels or third-party analytics
- **You are in full control** - you can delete your data at any time by clearing your browser storage

## For technical users: how to view your data

GURUKA stores data using your browser's **localStorage**. You can inspect it directly:

1. Open GURUKA in your browser (e.g. [guruka.com/games/](https://guruka.com/games/))
2. Open Developer Tools (press **F12** or **Ctrl+Shift+I** on Windows/Linux, **Cmd+Option+I** on Mac)
3. Go to the **Application** tab (Chrome/Edge) or **Storage** tab (Firefox)
4. In the left sidebar, expand **Local Storage** and click on **https://guruka.com**
5. You will see all stored keys and values: game scores, meditation history, preferences, and activity data

All keys are prefixed with `guruka_` so they are easy to identify. You can edit or delete individual entries, or right-click and choose "Clear" to remove everything.

## Questions?

If you have questions about how your data is handled, see our [Privacy Policy](/privacy/) or [contact us](https://docs.google.com/forms/d/e/1FAIpQLSe1ECOGIxdixwDDVyQqCgPRctD83_jqwEp-6bhysm8gu8uZKA/viewform).

### Calm & Clarity Affirmation for Visual Meditation
URL: https://guruka.com/es/affirmation-calm-and-clarity/
Description: Free calm and clarity affirmation for visual meditation. Display positive affirmations over calming visuals, privately in your browser.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Calm & Clarity Affirmation</h1>
<p class="aff-intro">When thoughts race and the mind feels scattered, these words can guide you back to stillness. Use this affirmation during visual meditation to cultivate inner peace and mental clarity.</p>
<div class="aff-lines">
My mind is calm and clear<br>I release what I cannot control<br>I am present in this moment
</div>
<a href="/visuals/breathing-orb/?edit=calm-and-clarity" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Focus & Energy Affirmation for Visual Meditation
URL: https://guruka.com/es/affirmation-focus-and-energy/
Description: Free focus and energy affirmation for visual meditation. Sharpen concentration and channel your energy with calming visuals.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Focus & Energy Affirmation</h1>
<p class="aff-intro">A focused mind moves with purpose. This affirmation helps you channel your energy and move forward with intention during visual meditation.</p>
<div class="aff-lines">
My focus is sharp and steady<br>I channel my energy with purpose<br>I move forward with intention
</div>
<a href="/visuals/breathing-orb/?edit=focus-and-energy" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Gratitude Affirmation for Visual Meditation
URL: https://guruka.com/es/affirmation-gratitude/
Description: Free gratitude affirmation for visual meditation. Cultivate thankfulness with calming visuals and positive affirmation text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Gratitude Affirmation</h1>
<p class="aff-intro">Gratitude shifts your focus from what is missing to what is present. Use this affirmation with a visual meditation to deepen your sense of appreciation and abundance.</p>
<div class="aff-lines">
I am grateful for this moment<br>Abundance flows into my life<br>I appreciate the simple things
</div>
<a href="/visuals/breathing-orb/?edit=gratitude" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Letting Go Affirmation for Visual Meditation
URL: https://guruka.com/es/affirmation-letting-go/
Description: Free letting go affirmation for visual meditation. Release what no longer serves you with calming visuals and positive text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Letting Go Affirmation</h1>
<p class="aff-intro">Holding on to what no longer serves you creates tension. This affirmation helps you release, forgive, and create space for peace during visual meditation.</p>
<div class="aff-lines">
I let go of what no longer serves me<br>I forgive myself and others<br>I make space for peace
</div>
<a href="/visuals/breathing-orb/?edit=letting-go" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Self-Confidence Affirmation for Visual Meditation
URL: https://guruka.com/es/affirmation-self-confidence/
Description: Free self-confidence affirmation for visual meditation. Build belief in yourself with calming visuals and positive affirmations.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Self-Confidence Affirmation</h1>
<p class="aff-intro">Confidence grows when you remind yourself of your worth. Pair this affirmation with a calming visual to reinforce self-belief and inner strength.</p>
<div class="aff-lines">
I believe in myself and my abilities<br>I am worthy of good things<br>I grow stronger every day
</div>
<a href="/visuals/breathing-orb/?edit=self-confidence" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Quit Smoking Affirmation for Visual Meditation
URL: https://guruka.com/es/affirmation-quit-smoking/
Description: Free quit smoking affirmation for visual meditation. Strengthen your resolve to quit with calming visuals and positive affirmations, privately in your browser.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Quit Smoking Affirmation</h1>
<p class="aff-intro">Every breath without smoke is a step toward freedom. This affirmation reinforces your choice to live smoke-free, pairing positive words with calming visual meditation to help you stay strong through cravings.</p>
<div class="aff-lines">
My lungs are cleaner every day<br>I am stronger than any craving<br>Every breath is a victory
</div>
<a href="/visuals/breathing-orb/?edit=quit-smoking" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Sleep & Rest Affirmation for Visual Meditation
URL: https://guruka.com/es/affirmation-sleep-and-rest/
Description: Free sleep and rest affirmation for visual meditation. Prepare for restful sleep with calming visuals and gentle affirmation text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Sleep & Rest Affirmation</h1>
<p class="aff-intro">Rest is not a luxury, it is essential. This affirmation prepares your mind and body for deep, peaceful sleep during a calming visual meditation.</p>
<div class="aff-lines">
I give myself permission to rest<br>My body relaxes with each breath<br>I drift into peaceful sleep
</div>
<a href="/visuals/breathing-orb/?edit=sleep-and-rest" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Privacy Policy
URL: https://guruka.com/es/privacy/
Description: Privacy Policy for GURUKA

# Privacy Policy

*Last updated: March 11, 2026*

**No sign-up is required to use GURUKA. All user data, including game scores, meditation stats, activity tracking, and preferences, is stored locally on your device only. We do not collect, store, or share your personal data. No data is transmitted to our servers or any third party.**

## 1. Information We Do NOT Collect

GURUKA is designed with a local-first approach. We do not collect personal information such as names, email addresses, or account credentials, because GURUKA requires no sign-up or login.

All user-generated data stays on your device:

- **Game scores and progress** - stored in your browser's localStorage
- **Meditation history and stats** - stored in your browser's localStorage
- **Activity tracking data** - stored in your browser's localStorage
- **Preferences and settings** - stored in your browser's localStorage

None of this data is transmitted to any server. It exists only on your device and can be cleared at any time through your browser settings.

## 2. How We Use Information

Since we do not collect personal data, our use of information is limited to:

- Improving and optimizing the website
- Analyzing general usage patterns and trends
- Maintaining the security of our service

## 3. Cookies and Tracking

GURUKA does not use tracking cookies, third-party trackers, or advertising pixels. The only browser storage used is localStorage to save your game and activity data locally on your device. You can clear this data at any time through your browser settings.

## 4. Third-Party Services

GURUKA does not use third-party analytics services or embed third-party tracking scripts. Your browsing activity on GURUKA is not shared with any external service.

## 5. Hosting and Bot Protection

GURUKA is hosted on Cloudflare, which provides DNS, content delivery, and security services. As part of its security features, Cloudflare may occasionally display a brief verification screen ("Verify you are human") to protect the website from automated bots and malicious traffic. This check is lightweight, privacy-preserving, and does not use traditional CAPTCHA puzzles. It runs automatically and typically completes in seconds without requiring any action from you. Cloudflare processes this verification as a data processor on our behalf. For details on how Cloudflare handles this data, see [Cloudflare's Privacy Policy](https://www.cloudflare.com/privacypolicy/).

## 6. Data Security

Because your data is stored locally on your device and not transmitted to our servers, you maintain full control over it. We implement appropriate technical measures to ensure the website itself is served securely.

## 7. Your Rights

Since GURUKA stores no personal data on any server, there is no personal data for us to access, correct, or delete on your behalf. All user data is stored locally in your browser's localStorage and is fully under your control. You can view or clear this data at any time through your browser settings. Clearing your browser cache or site data will permanently delete all stored data including game scores, meditation history, and preferences. For a detailed explanation of how your data is stored and managed, see [How Your Data Works](/your-data/).

## 8. Children's Privacy

GURUKA is suitable for users of all ages. We do not collect personal information from anyone, including children.

## 9. Changes to Privacy Policy

We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new policy on this page and updating the "Last updated" date.

## 10. Contact

If you have questions about this Privacy Policy, please contact us through our website at [https://guruka.com](https://guruka.com).

### Meditaciones Guiadas
URL: https://guruka.com/es/meditate/
Description: Meditaciones guiadas gratuitas para calma, enfoque, sueño, energía y bienestar. Toca para comenzar, no necesitas cuenta.

<style>
#meditate-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#meditate-hub .mh-header {
text-align: center;
margin-bottom: 3rem;
}
#meditate-hub .mh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #meditate-hub .mh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#meditate-hub .mh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #meditate-hub .mh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.mh-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.mh-card {
display: grid;
grid-template-columns: 2.5rem 1fr;
column-gap: 0.875rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 1.25rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .mh-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.mh-card:hover {
transform: none;
}
.mh-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.mh-dot {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.mh-card h2 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.375rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.mh-card .mh-sub,
.mh-card .mh-play {
grid-column: 1 / -1;
}
[data-theme="dark"] .mh-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.mh-card .mh-sub {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.5;
margin-bottom: 0.375rem;
}
[data-theme="dark"] .mh-card .mh-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.mh-card .mh-dur {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-muted, #6b7788);
margin-left: auto;
}
[data-theme="dark"] .mh-card .mh-dur {
color: var(--color-dark-text-muted, #94a3b8);
}
.mh-play {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
margin-top: 0.25rem;
min-height: 44px;
}
/* ── 480px+ ── */
@media (min-width: 480px) {
.mh-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.mh-card {
padding: 1.5rem;
}
}
/* ── 768px+ ── */
@media (min-width: 768px) {
.mh-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.mh-card {
padding: 1.75rem;
grid-template-columns: 3rem 1fr;
}
.mh-dot {
width: 3rem;
height: 3rem;
}
}
/* ── Hover (pointer devices only) ── */
@media (hover: hover) and (pointer: fine) {
.mh-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.mh-card:hover .mh-play {
color: var(--color-primary-hover, #0d7d63);
}
}
@media (prefers-reduced-motion: reduce) {
.mh-card {
transition: none;
}
}
</style>

<div id="meditate-hub">
<div class="mh-header">
<h1>Meditaciones Guiadas</h1>
<p>Gratis y sin anuncios molestos. Toca para comenzar, sin necesidad de cuenta.</p>
</div>

<div class="mh-grid">
<a href="/es/meditate/calm-and-stress-relief/" class="mh-card" style="--accent:#818cf8">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#818cf8,#a78bfa)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#818cf8,#a78bfa)"></div>
<h2>Calma y Alivio del Estrés</h2>
<p class="mh-sub">Libera la tensión y vuelve a la respiración</p>
<div class="mh-play"><span>Comenzar &rarr;</span><span class="mh-dur">5 min</span></div>
</a>

<a href="/es/meditate/focus-and-clarity/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#3b82f6,#1e40af)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#3b82f6,#1e40af)"></div>
<h2>Enfoque y Claridad</h2>
<p class="mh-sub">Agudiza tu atención y despeja la neblina mental</p>
<div class="mh-play"><span>Comenzar &rarr;</span><span class="mh-dur">5 min</span></div>
</a>

<a href="/es/meditate/sleep-and-wind-down/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#4338ca)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#6366f1,#4338ca)"></div>
<h2>Sueño y Relajación</h2>
<p class="mh-sub">Calma tu mente y prepárate para un sueño reparador</p>
<div class="mh-play"><span>Comenzar &rarr;</span><span class="mh-dur">7 min</span></div>
</a>

<a href="/es/meditate/morning-energy/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f59e0b,#d97706)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#f59e0b,#d97706)"></div>
<h2>Energía Matutina</h2>
<p class="mh-sub">Comienza tu día con vitalidad e intención</p>
<div class="mh-play"><span>Comenzar &rarr;</span><span class="mh-dur">5 min</span></div>
</a>

<a href="/es/meditate/loving-kindness/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f472b6,#ec4899)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#f472b6,#ec4899)"></div>
<h2>Bondad Amorosa</h2>
<p class="mh-sub">Cultiva la compasión por ti mismo y por los demás</p>
<div class="mh-play"><span>Comenzar &rarr;</span><span class="mh-dur">6 min</span></div>
</a>

<a href="/es/meditate/gratitude/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#fbbf24,#f59e0b)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#fbbf24,#f59e0b)"></div>
<h2>Gratitud</h2>
<p class="mh-sub">Aprecia lo que tienes y encuentra alegría en el presente</p>
<div class="mh-play"><span>Comenzar &rarr;</span><span class="mh-dur">5 min</span></div>
</a>

<a href="/es/meditate/body-scan-and-tension-release/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#2dd4bf,#14b8a6)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#2dd4bf,#14b8a6)"></div>
<h2>Escaneo Corporal</h2>
<p class="mh-sub">Escanea tu cuerpo en busca de tensión y libérala</p>
<div class="mh-play"><span>Comenzar &rarr;</span><span class="mh-dur">8 min</span></div>
</a>
</div>
</div>

### Juegos de Entrenamiento Mental
URL: https://guruka.com/es/games/
Description: Juegos mentales gratis. Sin cuenta.

<style>
#games-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#games-hub .gh-header {
text-align: center;
margin-bottom: 3rem;
}
#games-hub .gh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #games-hub .gh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#games-hub .gh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #games-hub .gh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.gh-game-card {
display: grid;
grid-template-columns: 4rem 1fr;
column-gap: 1rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 2rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .gh-game-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.gh-game-card:hover {
transform: none;
}
.gh-game-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.gh-game-card.speed-match::before { background: #0f9072; }
.gh-game-card.memory-matrix::before { background: #f59e0b; }
.gh-game-card.sequence-recall::before { background: #10b981; }
.gh-game-card.number-crunch::before { background: #6366f1; }
.gh-game-card.color-clash::before { background: #ec4899; }
.gh-game-card.quick-sort::before { background: #f97316; }
.gh-game-card.pattern-path::before { background: #14b8a6; }
.gh-game-icon {
width: 4rem;
height: 4rem;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.gh-game-card h2 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.gh-game-card .gh-skill,
.gh-game-card .gh-desc,
.gh-game-card .gh-play-btn,
.gh-game-card .gh-best {
grid-column: 1 / -1;
}
[data-theme="dark"] .gh-game-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gh-game-card .gh-skill {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
margin-bottom: 0.5rem;
}
.speed-match .gh-skill { background: rgba(15,144,114,0.1); color: #0f9072; }
.memory-matrix .gh-skill { background: rgba(245,158,11,0.1); color: #f59e0b; }
.sequence-recall .gh-skill { background: rgba(16,185,129,0.1); color: #10b981; }
.number-crunch .gh-skill { background: rgba(99,102,241,0.1); color: #6366f1; }
.color-clash .gh-skill { background: rgba(236,72,153,0.1); color: #ec4899; }
.quick-sort .gh-skill { background: rgba(249,115,22,0.1); color: #f97316; }
.pattern-path .gh-skill { background: rgba(20,184,166,0.1); color: #14b8a6; }
.gh-game-card .gh-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 0.75rem;
}
[data-theme="dark"] .gh-game-card .gh-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-play-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
min-height: 44px;
}
.gh-play-btn::after {
content: '\2192';
transition: transform 0.2s;
}
.gh-best:empty {
display: none;
}
.gh-best {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-border, #dfe4ea);
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .gh-best {
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-best strong {
color: var(--color-primary, #0f9072);
}
.gh-info {
text-align: center;
padding: 2rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 1rem;
}
[data-theme="dark"] .gh-info {
background: var(--color-dark-bg-secondary, #1e293b);
}
.gh-info h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .gh-info h3 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gh-info p {
color: var(--color-text-secondary, #4b5b6d);
max-width: 32rem;
margin: 0 auto;
font-size: 0.9375rem;
}
[data-theme="dark"] .gh-info p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="games-hub">
<div class="gh-header">
<h1>&#129504; Juegos de Entrenamiento Mental</h1>
<p>Gratis y sin anuncios molestos. Tus puntuaciones se guardan localmente, sin necesidad de cuenta.</p>
</div>

<div class="gh-grid">
<a href="/es/games/speed-match/" class="gh-game-card speed-match">
<div class="gh-game-icon" style="background: rgba(15,144,114,0.1); color: #0f9072;">&#9889;</div>
<h2>Speed Match</h2>
<span class="gh-skill">Velocidad de Procesamiento</span>
<p class="gh-desc">Pon a prueba tu velocidad de procesamiento comparando símbolos. ¿El símbolo actual es igual al anterior? ¡Reacciona rápidamente antes de que se acabe el tiempo!</p>
<span class="gh-play-btn">Jugar ahora</span>
<div class="gh-best" id="best-speed-match"></div>
</a>

<a href="/es/games/memory-matrix/" class="gh-game-card memory-matrix">
<div class="gh-game-icon" style="background: rgba(245,158,11,0.1); color: #f59e0b;">&#9638;</div>
<h2>Memory Matrix</h2>
<span class="gh-skill">Memoria Espacial</span>
<p class="gh-desc">Observa un patrón de celdas destacadas en una cuadrícula, luego recréalo de memoria. La cuadrícula se vuelve más grande y los patrones más complejos a medida que subes de nivel.</p>
<span class="gh-play-btn">Jugar ahora</span>
<div class="gh-best" id="best-memory-matrix"></div>
</a>

<a href="/es/games/sequence-recall/" class="gh-game-card sequence-recall">
<div class="gh-game-icon" style="background: rgba(16,185,129,0.1); color: #10b981;">&#9776;</div>
<h2>Sequence Recall</h2>
<span class="gh-skill">Memoria de Trabajo</span>
<p class="gh-desc">Memoriza una secuencia de colores mostrados uno a la vez, luego recuérdalos en orden. Los niveles más altos añaden distracciones matemáticas y desafíos de doble pista.</p>
<span class="gh-play-btn">Jugar ahora</span>
<div class="gh-best" id="best-sequence-recall"></div>
</a>

<a href="/es/games/number-crunch/" class="gh-game-card number-crunch">
<div class="gh-game-icon" style="background: rgba(99,102,241,0.1); color: #6366f1;">&#129518;</div>
<h2>Number Crunch</h2>
<span class="gh-skill">Aritmética Mental</span>
<p class="gh-desc">Resuelve ecuaciones con elementos faltantes bajo presión de tiempo. Los niveles más altos añaden modificadores de reglas que requieren transformación mental de tus respuestas.</p>
<span class="gh-play-btn">Jugar ahora</span>
<div class="gh-best" id="best-number-crunch"></div>
</a>

<a href="/es/games/color-clash/" class="gh-game-card color-clash">
<div class="gh-game-icon" style="background: rgba(236,72,153,0.1); color: #ec4899;">&#127912;</div>
<h2>Color Clash</h2>
<span class="gh-skill">Control Inhibitorio</span>
<p class="gh-desc">Una palabra de color aparece en un color de tinta diferente. Toca la respuesta correcta según la regla actual: color de tinta o significado de la palabra. ¡Las reglas cambian!</p>
<span class="gh-play-btn">Jugar ahora</span>
<div class="gh-best" id="best-color-clash"></div>
</a>

<a href="/es/games/quick-sort/" class="gh-game-card quick-sort">
<div class="gh-game-icon" style="background: rgba(249,115,22,0.1); color: #f97316;">&#128451;</div>
<h2>Quick Sort</h2>
<span class="gh-skill">Cambio de Tarea</span>
<p class="gh-desc">Clasifica elementos en categorías deslizando a izquierda o derecha. La regla de clasificación cambia cada pocas rondas, desafiando tu flexibilidad mental y velocidad de reacción.</p>
<span class="gh-play-btn">Jugar ahora</span>
<div class="gh-best" id="best-quick-sort"></div>
</a>

<a href="/es/games/pattern-path/" class="gh-game-card pattern-path">
<div class="gh-game-icon" style="background: rgba(20,184,166,0.1); color: #14b8a6;">&#129513;</div>
<h2>Pattern Path</h2>
<span class="gh-skill">Reconocimiento de Patrones</span>
<p class="gh-desc">Encuentra la pieza faltante en una secuencia de patrones visuales. Las formas cambian en color, tamaño y rotación: descubre la regla y elige la completación correcta.</p>
<span class="gh-play-btn">Jugar ahora</span>
<div class="gh-best" id="best-pattern-path"></div>
</a>
</div>

<div class="gh-info">
<h3>Cómo Funciona</h3>
<p>Cada juego se adapta a tu nivel de habilidad con 20 niveles de dificultad creciente. Entrena durante 15-20 minutos diarios en los siete juegos para obtener los mejores resultados. Tus mejores puntuaciones se guardan en tu navegador.</p>
</div>
</div>

<script>
(function() {
var games = ['speed-match', 'memory-matrix', 'sequence-recall', 'number-crunch', 'color-clash', 'quick-sort', 'pattern-path'];
games.forEach(function(game) {
var best = localStorage.getItem('guruka_' + game + '_best');
var el = document.getElementById('best-' + game);
if (el && best) {
el.innerHTML = 'Mejor Puntuación: <strong>' + Number(best).toLocaleString() + '</strong> points';
}
});
})();
</script>

<style>
/* ── Mobile-first responsive ── */
.gh-game-card {
padding: 1.5rem;
grid-template-columns: 3.25rem 1fr;
}
.gh-game-icon {
width: 3.25rem;
height: 3.25rem;
}
.gh-game-card .gh-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 768px) {
.gh-game-card {
padding: 2rem;
grid-template-columns: 4rem 1fr;
}
.gh-game-icon {
width: 4rem;
height: 4rem;
}
.gh-game-card .gh-desc {
-webkit-line-clamp: unset;
overflow: visible;
}
}
@media (hover: hover) and (pointer: fine) {
.gh-game-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}
.gh-game-card:hover .gh-play-btn::after {
transform: translateX(4px);
}
}
@media (prefers-reduced-motion: reduce) {
.gh-game-card {
transition: none;
}
}
</style>

### GURUKA, Meditaciones Guiadas, Visualizaciones y Juegos Mentales Gratis
URL: https://guruka.com/es/root/
Description: Meditaciones guiadas, visualizaciones relajantes y juegos de entrenamiento cerebral gratuitos. Sin cuenta. Sin datos personales. Compatible con modo sin conexión.

<style>
.gk-home {
max-width: 40rem;
margin: 2rem auto;
padding: 0 1rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.gk-hero-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1.5rem;
border-radius: 1rem;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
text-decoration: none;
color: inherit;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
}
[data-theme="dark"].gk-hero-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
}
.gk-hero-icon {
font-size: 2.25rem;
line-height: 1;
flex-shrink: 0;
}
.gk-hero-body h2 {
font-size: 1.35rem;
font-weight: 700;
margin: 0 0 0.35rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gk-hero-body h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gk-hero-body p {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].gk-hero-body p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gk-hero-meta {
margin-top: 0.5rem;
font-size: 0.8rem;
color: var(--color-primary, #0f9072);
font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
.gk-hero-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
border-color: rgba(15,144,114,0.3);
}
[data-theme="dark"].gk-hero-card:hover {
box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.12);
border-color: rgba(15,144,114,0.4);
}
}
@media (min-width: 480px) {
.gk-home { padding: 0 1.5rem; gap: 1.5rem; margin: 2.5rem auto; }
.gk-hero-card { padding: 1.75rem; }
.gk-hero-icon { font-size: 2.5rem; }
.gk-hero-body h2 { font-size: 1.5rem; }
}
.gk-headline {
text-align: center;
margin-bottom: 0.5rem;
}
.gk-headline h1 {
font-size: 1.6rem;
font-weight: 800;
line-height: 1.2;
margin: 0 0 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gk-headline h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gk-headline p {
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--color-text-secondary, #4b5b6d);
margin: 0;
}
[data-theme="dark"].gk-headline p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
@media (min-width: 480px) {
.gk-headline h1 { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
.gk-hero-card { transition: none; }
}
</style>

<div class="gk-home">
<div class="gk-headline">
<h1>Meditaciones Guiadas, Visualizaciones y Juegos Mentales Gratis</h1>
<p>Gratis · Sin cuenta · Sin datos personales · Compatible con modo sin conexión</p>
</div>
<a href="/es/meditate/" class="gk-hero-card">
<div class="gk-hero-icon">🧘</div>
<div class="gk-hero-body">
<h2>Meditar</h2>
<p>Meditaciones guiadas para la calma, el enfoque y el bienestar</p>
<div class="gk-hero-meta">Gratis, sin cuenta necesaria</div>
</div>
</a>
<a href="/es/visuals/" class="gk-hero-card">
<div class="gk-hero-icon">✨</div>
<div class="gk-hero-body">
<h2>Afirmaciones</h2>
<p>Visuales relajantes con texto de afirmación opcional</p>
<div class="gk-hero-meta">Gratis, sin cuenta necesaria</div>
</div>
</a>
<a href="/es/games/" class="gk-hero-card">
<div class="gk-hero-icon">🧠</div>
<div class="gk-hero-body">
<h2>Juegos Mentales</h2>
<p>Entrena tu cerebro con juegos para diferentes habilidades cognitivas</p>
<div class="gk-hero-meta">Gratis, sin cuenta necesaria</div>
</div>
</a>
</div>

### Terms of Service
URL: https://guruka.com/es/terms/
Description: Terms of Service for GURUKA

# Terms of Service

*Last updated: March 6, 2026*

## 1. Acceptance of Terms

By accessing and using GURUKA (https://guruka.com), you accept and agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use our website.

## 2. Use of Service

GURUKA provides free brain training games and guided meditations. You agree to use GURUKA only for lawful purposes and in accordance with these Terms. You agree not to use the service in any way that violates any applicable laws or regulations.

## 3. Intellectual Property

The content, features, and functionality of GURUKA are owned by us and are protected by international copyright, trademark, and other intellectual property laws.

## 4. Disclaimer

Content and activities on GURUKA are for entertainment and general wellness purposes only. They are not intended as medical advice or treatment. The brain training games and meditations are designed for personal enjoyment and should not be considered a substitute for professional medical or psychological guidance.

## 5. User Conduct

You agree not to:

- Use the service for any unlawful purpose
- Attempt to gain unauthorized access to any portion of the service
- Interfere with or disrupt the service or servers
- Collect or harvest any information from the service

## 6. Disclaimer of Warranties

The service is provided "as is" and "as available" without warranties of any kind, either express or implied. We do not warrant that the service will be uninterrupted, secure, or error-free.

## 7. Limitation of Liability

To the fullest extent permitted by law, GURUKA shall not be liable for any indirect, incidental, special, consequential, or punitive damages arising out of your use of the service.

## 8. Changes to Terms

We reserve the right to modify these terms at any time. We will notify users of any material changes by updating the "Last updated" date. Your continued use of the service after changes constitutes acceptance of the modified terms.

## 9. Contact

If you have questions about these Terms of Service, please contact us through our website at [https://guruka.com](https://guruka.com).

### Afirmaciones y Visuales Meditativas
URL: https://guruka.com/es/visuals/
Description: Visuales relajantes a pantalla completa con texto de afirmación personalizado. Crea tus propias afirmaciones, almacenadas de forma privada en tu navegador.

<style>
#visuals-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#visuals-hub .vh-header {
text-align: center;
margin-bottom: 3rem;
}
#visuals-hub .vh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #visuals-hub .vh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#visuals-hub .vh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #visuals-hub .vh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vh-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.vh-card {
display: grid;
grid-template-columns: 2.5rem 1fr;
column-gap: 0.875rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 1.25rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .vh-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.vh-card:hover { transform: none; }
.vh-dot {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.vh-card h2 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.375rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.vh-card .vh-sub,
.vh-card .vh-launch {
grid-column: 1 / -1;
}
[data-theme="dark"] .vh-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.vh-card .vh-sub {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.5;
margin-bottom: 0.375rem;
}
[data-theme="dark"] .vh-card .vh-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vh-launch {
display: flex;
align-items: center;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
margin-top: 0.25rem;
min-height: 44px;
}
@media (min-width: 480px) {
.vh-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.vh-card { padding: 1.5rem; }
}
@media (min-width: 768px) {
.vh-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.vh-card {
padding: 1.75rem;
grid-template-columns: 3rem 1fr;
}
.vh-dot { width: 3rem; height: 3rem; }
}
@media (hover: hover) and (pointer: fine) {
.vh-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.vh-card:hover .vh-launch {
color: var(--color-primary-hover, #0d7d63);
}
}
@media (prefers-reduced-motion: reduce) {
.vh-card { transition: none; }
}
</style>

<div id="visuals-hub">
<div class="vh-header">
<h1>Visuales Meditativas</h1>
<p>Animaciones relajantes a pantalla completa para la relajación y la concentración. Introduce tu texto de afirmación para mostrar.<br>Sin necesidad de cuenta.</p>
</div>

<div class="vh-grid">
<a href="/es/visuals/breathing-orb/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#a78bfa)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#6366f1,#a78bfa)"></div>
<h2>Orbe de Respiración</h2>
<p class="vh-sub">Orbe pulsante que guía tu respiración</p>
<div class="vh-launch"><span>Iniciar &rarr;</span></div>
</a>

<a href="/es/visuals/aurora/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#22d3ee,#06b6d4)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#22d3ee,#06b6d4)"></div>
<h2>Aurora</h2>
<p class="vh-sub">Luces del norte fluyendo</p>
<div class="vh-launch"><span>Iniciar &rarr;</span></div>
</a>

<a href="/es/visuals/starfield/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#1e293b,#475569)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#1e293b,#475569)"></div>
<h2>Campo de Estrellas</h2>
<p class="vh-sub">Estrellas titilando en el espacio profundo</p>
<div class="vh-launch"><span>Iniciar &rarr;</span></div>
</a>

<a href="/es/visuals/lava-flow/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f97316,#ef4444)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#f97316,#ef4444)"></div>
<h2>Flujo de Lava</h2>
<p class="vh-sub">Gotas fusionándose y separándose</p>
<div class="vh-launch"><span>Iniciar &rarr;</span></div>
</a>

<a href="/es/visuals/mandala/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#eab308,#a855f7)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#eab308,#a855f7)"></div>
<h2>Mandala</h2>
<p class="vh-sub">Geometría sagrada rotando</p>
<div class="vh-launch"><span>Iniciar &rarr;</span></div>
</a>

<a href="/es/visuals/dividing-cells/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#10b981,#22d3ee)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#10b981,#22d3ee)"></div>
<h2>Células Dividiéndose</h2>
<p class="vh-sub">Células dividiéndose sin cesar</p>
<div class="vh-launch"><span>Iniciar &rarr;</span></div>
</a>
</div>
</div>

### Calm & Clarity Affirmation for Visual Meditation
URL: https://guruka.com/fr/affirmation-calm-and-clarity/
Description: Free calm and clarity affirmation for visual meditation. Display positive affirmations over calming visuals, privately in your browser.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Calm & Clarity Affirmation</h1>
<p class="aff-intro">When thoughts race and the mind feels scattered, these words can guide you back to stillness. Use this affirmation during visual meditation to cultivate inner peace and mental clarity.</p>
<div class="aff-lines">
My mind is calm and clear<br>I release what I cannot control<br>I am present in this moment
</div>
<a href="/visuals/breathing-orb/?edit=calm-and-clarity" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### How Your Data Works
URL: https://guruka.com/es/your-data/
Description: Learn how GURUKA stores your data locally on your device, what happens when you switch devices or clear your browser, and how to view your stored data.

# How Your Data Works on GURUKA

GURUKA does not require an account, and we do not store any of your data on our servers. Everything you do on GURUKA stays on your own device, inside your web browser. This page explains what that means in plain terms.

## Your data lives on your device

When you use GURUKA, your progress is saved directly inside the browser you are using. This includes:

- Game scores and high scores
- Meditation session history
- Activity tracking data
- Your preferences and settings

This data is not sent anywhere. It is not uploaded to a server. It is not shared with anyone. It exists only on the device and browser where you created it.

## What happens on a different device or browser

Because your data is stored on your device, it is not available anywhere else. If you open GURUKA on a different phone, computer, or tablet, you will start fresh. The same applies if you use a different browser on the same device. For example, if you use Chrome on your laptop and then open GURUKA in Safari, your Chrome data will not appear in Safari.

This is the trade-off for not requiring an account: your data is completely private, but it does not follow you between devices.

## What happens when you clear your browser data

If you clear your browser's cache, cookies, or site data, your GURUKA data will be deleted. This is the same as what happens with any website that stores data locally. Most browsers let you clear data for specific sites without affecting others, but if you do a full cache clear, your GURUKA progress will be removed.

**To keep your data safe:** avoid clearing site data for guruka.com specifically, or be aware that a full browser cache clear will reset your GURUKA progress.

## No account means no data recovery

Since GURUKA does not have accounts or cloud storage, there is no way to recover your data once it is deleted. There is no "forgot password" or "restore from backup" option because no backup exists. Your data is fully in your hands.

## Why we chose this approach

Most apps and websites ask you to create an account so they can store your data on their servers. That is convenient for syncing across devices, but it also means the company has access to your personal information, usage patterns, and habits.

We chose a different path. GURUKA stores everything locally so that:

- **Your data is truly private** - we cannot see it, sell it, or lose it in a data breach
- **No sign-up is needed** - you can start meditating or playing games immediately
- **No tracking** - we do not use advertising pixels or third-party analytics
- **You are in full control** - you can delete your data at any time by clearing your browser storage

## For technical users: how to view your data

GURUKA stores data using your browser's **localStorage**. You can inspect it directly:

1. Open GURUKA in your browser (e.g. [guruka.com/games/](https://guruka.com/games/))
2. Open Developer Tools (press **F12** or **Ctrl+Shift+I** on Windows/Linux, **Cmd+Option+I** on Mac)
3. Go to the **Application** tab (Chrome/Edge) or **Storage** tab (Firefox)
4. In the left sidebar, expand **Local Storage** and click on **https://guruka.com**
5. You will see all stored keys and values: game scores, meditation history, preferences, and activity data

All keys are prefixed with `guruka_` so they are easy to identify. You can edit or delete individual entries, or right-click and choose "Clear" to remove everything.

## Questions?

If you have questions about how your data is handled, see our [Privacy Policy](/privacy/) or [contact us](https://docs.google.com/forms/d/e/1FAIpQLSe1ECOGIxdixwDDVyQqCgPRctD83_jqwEp-6bhysm8gu8uZKA/viewform).

### Focus & Energy Affirmation for Visual Meditation
URL: https://guruka.com/fr/affirmation-focus-and-energy/
Description: Free focus and energy affirmation for visual meditation. Sharpen concentration and channel your energy with calming visuals.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Focus & Energy Affirmation</h1>
<p class="aff-intro">A focused mind moves with purpose. This affirmation helps you channel your energy and move forward with intention during visual meditation.</p>
<div class="aff-lines">
My focus is sharp and steady<br>I channel my energy with purpose<br>I move forward with intention
</div>
<a href="/visuals/breathing-orb/?edit=focus-and-energy" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Gratitude Affirmation for Visual Meditation
URL: https://guruka.com/fr/affirmation-gratitude/
Description: Free gratitude affirmation for visual meditation. Cultivate thankfulness with calming visuals and positive affirmation text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Gratitude Affirmation</h1>
<p class="aff-intro">Gratitude shifts your focus from what is missing to what is present. Use this affirmation with a visual meditation to deepen your sense of appreciation and abundance.</p>
<div class="aff-lines">
I am grateful for this moment<br>Abundance flows into my life<br>I appreciate the simple things
</div>
<a href="/visuals/breathing-orb/?edit=gratitude" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Self-Confidence Affirmation for Visual Meditation
URL: https://guruka.com/fr/affirmation-self-confidence/
Description: Free self-confidence affirmation for visual meditation. Build belief in yourself with calming visuals and positive affirmations.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Self-Confidence Affirmation</h1>
<p class="aff-intro">Confidence grows when you remind yourself of your worth. Pair this affirmation with a calming visual to reinforce self-belief and inner strength.</p>
<div class="aff-lines">
I believe in myself and my abilities<br>I am worthy of good things<br>I grow stronger every day
</div>
<a href="/visuals/breathing-orb/?edit=self-confidence" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Quit Smoking Affirmation for Visual Meditation
URL: https://guruka.com/fr/affirmation-quit-smoking/
Description: Free quit smoking affirmation for visual meditation. Strengthen your resolve to quit with calming visuals and positive affirmations, privately in your browser.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Quit Smoking Affirmation</h1>
<p class="aff-intro">Every breath without smoke is a step toward freedom. This affirmation reinforces your choice to live smoke-free, pairing positive words with calming visual meditation to help you stay strong through cravings.</p>
<div class="aff-lines">
My lungs are cleaner every day<br>I am stronger than any craving<br>Every breath is a victory
</div>
<a href="/visuals/breathing-orb/?edit=quit-smoking" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Sleep & Rest Affirmation for Visual Meditation
URL: https://guruka.com/fr/affirmation-sleep-and-rest/
Description: Free sleep and rest affirmation for visual meditation. Prepare for restful sleep with calming visuals and gentle affirmation text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Sleep & Rest Affirmation</h1>
<p class="aff-intro">Rest is not a luxury, it is essential. This affirmation prepares your mind and body for deep, peaceful sleep during a calming visual meditation.</p>
<div class="aff-lines">
I give myself permission to rest<br>My body relaxes with each breath<br>I drift into peaceful sleep
</div>
<a href="/visuals/breathing-orb/?edit=sleep-and-rest" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Letting Go Affirmation for Visual Meditation
URL: https://guruka.com/fr/affirmation-letting-go/
Description: Free letting go affirmation for visual meditation. Release what no longer serves you with calming visuals and positive text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Letting Go Affirmation</h1>
<p class="aff-intro">Holding on to what no longer serves you creates tension. This affirmation helps you release, forgive, and create space for peace during visual meditation.</p>
<div class="aff-lines">
I let go of what no longer serves me<br>I forgive myself and others<br>I make space for peace
</div>
<a href="/visuals/breathing-orb/?edit=letting-go" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Jeux d'Entraînement Cérébral
URL: https://guruka.com/fr/games/
Description: Jeux cerebraux gratuits. Sans compte.

<style>
#games-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#games-hub.gh-header {
text-align: center;
margin-bottom: 3rem;
}
#games-hub.gh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #games-hub.gh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#games-hub.gh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #games-hub.gh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.gh-game-card {
display: grid;
grid-template-columns: 4rem 1fr;
column-gap: 1rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 2rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"].gh-game-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.gh-game-card:hover {
transform: none;
}
.gh-game-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.gh-game-card.speed-match::before { background: #0f9072; }
.gh-game-card.memory-matrix::before { background: #f59e0b; }
.gh-game-card.sequence-recall::before { background: #10b981; }
.gh-game-card.number-crunch::before { background: #6366f1; }
.gh-game-card.color-clash::before { background: #ec4899; }
.gh-game-card.quick-sort::before { background: #f97316; }
.gh-game-card.pattern-path::before { background: #14b8a6; }
.gh-game-icon {
width: 4rem;
height: 4rem;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.gh-game-card h2 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.gh-game-card.gh-skill,
.gh-game-card.gh-desc,
.gh-game-card.gh-play-btn,
.gh-game-card.gh-best {
grid-column: 1 / -1;
}
[data-theme="dark"].gh-game-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gh-game-card.gh-skill {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
margin-bottom: 0.5rem;
}
.speed-match.gh-skill { background: rgba(15,144,114,0.1); color: #0f9072; }
.memory-matrix.gh-skill { background: rgba(245,158,11,0.1); color: #f59e0b; }
.sequence-recall.gh-skill { background: rgba(16,185,129,0.1); color: #10b981; }
.number-crunch.gh-skill { background: rgba(99,102,241,0.1); color: #6366f1; }
.color-clash.gh-skill { background: rgba(236,72,153,0.1); color: #ec4899; }
.quick-sort.gh-skill { background: rgba(249,115,22,0.1); color: #f97316; }
.pattern-path.gh-skill { background: rgba(20,184,166,0.1); color: #14b8a6; }
.gh-game-card.gh-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 0.75rem;
}
[data-theme="dark"].gh-game-card.gh-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-play-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
min-height: 44px;
}
.gh-play-btn::after {
content: '\2192';
transition: transform 0.2s;
}
.gh-best:empty {
display: none;
}
.gh-best {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-border, #dfe4ea);
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].gh-best {
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-best strong {
color: var(--color-primary, #0f9072);
}
.gh-info {
text-align: center;
padding: 2rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 1rem;
}
[data-theme="dark"].gh-info {
background: var(--color-dark-bg-secondary, #1e293b);
}
.gh-info h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gh-info h3 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gh-info p {
color: var(--color-text-secondary, #4b5b6d);
max-width: 32rem;
margin: 0 auto;
font-size: 0.9375rem;
}
[data-theme="dark"].gh-info p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="games-hub">
<div class="gh-header">
<h1>&#129504; Jeux d'Entraînement Cérébral</h1>
<p>Gratuit et sans publicités gênantes. Vos scores sont sauvegardés localement - aucun compte nécessaire.</p>
</div>

<div class="gh-grid">
<a href="/fr/games/speed-match/" class="gh-game-card speed-match">
<div class="gh-game-icon" style="background: rgba(15,144,114,0.1); color: #0f9072;">&#9889;</div>
<h2>Speed Match</h2>
<span class="gh-skill">Vitesse de Traitement</span>
<p class="gh-desc">Testez votre vitesse de traitement en comparant des symboles. Le symbole actuel est-il identique au précédent ? Réagissez rapidement avant la fin du temps !</p>
<span class="gh-play-btn">Jouer maintenant</span>
<div class="gh-best" id="best-speed-match"></div>
</a>

<a href="/fr/games/memory-matrix/" class="gh-game-card memory-matrix">
<div class="gh-game-icon" style="background: rgba(245,158,11,0.1); color: #f59e0b;">&#9638;</div>
<h2>Memory Matrix</h2>
<span class="gh-skill">Mémoire Spatiale</span>
<p class="gh-desc">Observez un motif de cellules éclairées sur une grille, puis recréez-le de mémoire. La grille s'agrandit et les motifs deviennent plus complexes à mesure que vous progressez.</p>
<span class="gh-play-btn">Jouer maintenant</span>
<div class="gh-best" id="best-memory-matrix"></div>
</a>

<a href="/fr/games/sequence-recall/" class="gh-game-card sequence-recall">
<div class="gh-game-icon" style="background: rgba(16,185,129,0.1); color: #10b981;">&#9776;</div>
<h2>Sequence Recall</h2>
<span class="gh-skill">Mémoire de Travail</span>
<p class="gh-desc">Mémorisez une séquence de couleurs affichées une à la fois, puis rappelez-les dans l'ordre. Les niveaux supérieurs ajoutent des distractions mathématiques et des défis à double piste.</p>
<span class="gh-play-btn">Jouer maintenant</span>
<div class="gh-best" id="best-sequence-recall"></div>
</a>

<a href="/fr/games/number-crunch/" class="gh-game-card number-crunch">
<div class="gh-game-icon" style="background: rgba(99,102,241,0.1); color: #6366f1;">&#129518;</div>
<h2>Number Crunch</h2>
<span class="gh-skill">Calcul Mental</span>
<p class="gh-desc">Résolvez des équations avec des éléments manquants sous pression temporelle. Les niveaux supérieurs ajoutent des modificateurs de règles nécessitant une transformation mentale de vos réponses.</p>
<span class="gh-play-btn">Jouer maintenant</span>
<div class="gh-best" id="best-number-crunch"></div>
</a>

<a href="/fr/games/color-clash/" class="gh-game-card color-clash">
<div class="gh-game-icon" style="background: rgba(236,72,153,0.1); color: #ec4899;">&#127912;</div>
<h2>Color Clash</h2>
<span class="gh-skill">Contrôle Inhibiteur</span>
<p class="gh-desc">Un mot de couleur apparaît dans une encre de couleur différente. Touchez la bonne réponse selon la règle actuelle, couleur de l'encre ou signification du mot. Les règles changent !</p>
<span class="gh-play-btn">Jouer maintenant</span>
<div class="gh-best" id="best-color-clash"></div>
</a>

<a href="/fr/games/quick-sort/" class="gh-game-card quick-sort">
<div class="gh-game-icon" style="background: rgba(249,115,22,0.1); color: #f97316;">&#128451;</div>
<h2>Quick Sort</h2>
<span class="gh-skill">Changement de Tâche</span>
<p class="gh-desc">Triez des éléments en catégories en glissant à gauche ou à droite. La règle de tri change toutes les quelques manches, défiant votre flexibilité mentale et vitesse de réaction.</p>
<span class="gh-play-btn">Jouer maintenant</span>
<div class="gh-best" id="best-quick-sort"></div>
</a>

<a href="/fr/games/pattern-path/" class="gh-game-card pattern-path">
<div class="gh-game-icon" style="background: rgba(20,184,166,0.1); color: #14b8a6;">&#129513;</div>
<h2>Pattern Path</h2>
<span class="gh-skill">Reconnaissance de Motifs</span>
<p class="gh-desc">Trouvez la pièce manquante dans une séquence de motifs visuels. Les formes changent de couleur, taille et rotation, identifiez la règle et choisissez le bon complément.</p>
<span class="gh-play-btn">Jouer maintenant</span>
<div class="gh-best" id="best-pattern-path"></div>
</a>
</div>

<div class="gh-info">
<h3>Comment ça marche</h3>
<p>Chaque jeu s'adapte à votre niveau de compétence avec 20 niveaux de difficulté croissante. Entraînez-vous 15 à 20 minutes par jour sur les sept jeux pour obtenir les meilleurs résultats. Vos meilleurs scores personnels sont enregistrés dans votre navigateur.</p>
</div>
</div>

<script>
(function() {
var games = ['speed-match', 'memory-matrix', 'sequence-recall', 'number-crunch', 'color-clash', 'quick-sort', 'pattern-path'];
games.forEach(function(game) {
var best = localStorage.getItem('guruka_' + game + '_best');
var el = document.getElementById('best-' + game);
if (el && best) {
el.innerHTML = 'Meilleur Score : <strong>' + Number(best).toLocaleString() + '</strong> points';
}
});
})();
</script>

<style>
/* ── Mobile-first responsive ── */
.gh-game-card {
padding: 1.5rem;
grid-template-columns: 3.25rem 1fr;
}
.gh-game-icon {
width: 3.25rem;
height: 3.25rem;
}
.gh-game-card.gh-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 768px) {
.gh-game-card {
padding: 2rem;
grid-template-columns: 4rem 1fr;
}
.gh-game-icon {
width: 4rem;
height: 4rem;
}
.gh-game-card.gh-desc {
-webkit-line-clamp: unset;
overflow: visible;
}
}
@media (hover: hover) and (pointer: fine) {
.gh-game-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}
.gh-game-card:hover.gh-play-btn::after {
transform: translateX(4px);
}
}
@media (prefers-reduced-motion: reduce) {
.gh-game-card {
transition: none;
}
}
</style>

### Privacy Policy
URL: https://guruka.com/fr/privacy/
Description: Privacy Policy for GURUKA

# Privacy Policy

*Last updated: March 11, 2026*

**No sign-up is required to use GURUKA. All user data, including game scores, meditation stats, activity tracking, and preferences, is stored locally on your device only. We do not collect, store, or share your personal data. No data is transmitted to our servers or any third party.**

## 1. Information We Do NOT Collect

GURUKA is designed with a local-first approach. We do not collect personal information such as names, email addresses, or account credentials, because GURUKA requires no sign-up or login.

All user-generated data stays on your device:

- **Game scores and progress** - stored in your browser's localStorage
- **Meditation history and stats** - stored in your browser's localStorage
- **Activity tracking data** - stored in your browser's localStorage
- **Preferences and settings** - stored in your browser's localStorage

None of this data is transmitted to any server. It exists only on your device and can be cleared at any time through your browser settings.

## 2. How We Use Information

Since we do not collect personal data, our use of information is limited to:

- Improving and optimizing the website
- Analyzing general usage patterns and trends
- Maintaining the security of our service

## 3. Cookies and Tracking

GURUKA does not use tracking cookies, third-party trackers, or advertising pixels. The only browser storage used is localStorage to save your game and activity data locally on your device. You can clear this data at any time through your browser settings.

## 4. Third-Party Services

GURUKA does not use third-party analytics services or embed third-party tracking scripts. Your browsing activity on GURUKA is not shared with any external service.

## 5. Hosting and Bot Protection

GURUKA is hosted on Cloudflare, which provides DNS, content delivery, and security services. As part of its security features, Cloudflare may occasionally display a brief verification screen ("Verify you are human") to protect the website from automated bots and malicious traffic. This check is lightweight, privacy-preserving, and does not use traditional CAPTCHA puzzles. It runs automatically and typically completes in seconds without requiring any action from you. Cloudflare processes this verification as a data processor on our behalf. For details on how Cloudflare handles this data, see [Cloudflare's Privacy Policy](https://www.cloudflare.com/privacypolicy/).

## 6. Data Security

Because your data is stored locally on your device and not transmitted to our servers, you maintain full control over it. We implement appropriate technical measures to ensure the website itself is served securely.

## 7. Your Rights

Since GURUKA stores no personal data on any server, there is no personal data for us to access, correct, or delete on your behalf. All user data is stored locally in your browser's localStorage and is fully under your control. You can view or clear this data at any time through your browser settings. Clearing your browser cache or site data will permanently delete all stored data including game scores, meditation history, and preferences. For a detailed explanation of how your data is stored and managed, see [How Your Data Works](/your-data/).

## 8. Children's Privacy

GURUKA is suitable for users of all ages. We do not collect personal information from anyone, including children.

## 9. Changes to Privacy Policy

We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new policy on this page and updating the "Last updated" date.

## 10. Contact

If you have questions about this Privacy Policy, please contact us through our website at [https://guruka.com](https://guruka.com).

### GURUKA, Méditations Guidées, Visualisations & Jeux Cérébraux Gratuits
URL: https://guruka.com/fr/root/
Description: Méditations guidées, visualisations apaisantes et jeux d'entraînement cérébral gratuits. Sans compte. Aucune donnée personnelle collectée. Compatible hors ligne.

<style>
.gk-home {
max-width: 40rem;
margin: 2rem auto;
padding: 0 1rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.gk-hero-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1.5rem;
border-radius: 1rem;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
text-decoration: none;
color: inherit;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
}
[data-theme="dark"].gk-hero-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
}
.gk-hero-icon {
font-size: 2.25rem;
line-height: 1;
flex-shrink: 0;
}
.gk-hero-body h2 {
font-size: 1.35rem;
font-weight: 700;
margin: 0 0 0.35rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gk-hero-body h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gk-hero-body p {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].gk-hero-body p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gk-hero-meta {
margin-top: 0.5rem;
font-size: 0.8rem;
color: var(--color-primary, #0f9072);
font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
.gk-hero-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
border-color: rgba(15,144,114,0.3);
}
[data-theme="dark"].gk-hero-card:hover {
box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.12);
border-color: rgba(15,144,114,0.4);
}
}
@media (min-width: 480px) {
.gk-home { padding: 0 1.5rem; gap: 1.5rem; margin: 2.5rem auto; }
.gk-hero-card { padding: 1.75rem; }
.gk-hero-icon { font-size: 2.5rem; }
.gk-hero-body h2 { font-size: 1.5rem; }
}
.gk-headline {
text-align: center;
margin-bottom: 0.5rem;
}
.gk-headline h1 {
font-size: 1.6rem;
font-weight: 800;
line-height: 1.2;
margin: 0 0 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gk-headline h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gk-headline p {
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--color-text-secondary, #4b5b6d);
margin: 0;
}
[data-theme="dark"].gk-headline p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
@media (min-width: 480px) {
.gk-headline h1 { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
.gk-hero-card { transition: none; }
}
</style>

<div class="gk-home">
<div class="gk-headline">
<h1>Méditations Guidées, Visualisations & Jeux Cérébraux Gratuits</h1>
<p>Gratuit · Sans compte · Aucune donnée personnelle · Compatible hors ligne</p>
</div>
<a href="/fr/meditate/" class="gk-hero-card">
<div class="gk-hero-icon">🧘</div>
<div class="gk-hero-body">
<h2>Méditer</h2>
<p>Méditations guidées pour le calme, la concentration et le bien-être</p>
<div class="gk-hero-meta">Gratuit, sans compte</div>
</div>
</a>
<a href="/fr/visuals/" class="gk-hero-card">
<div class="gk-hero-icon">✨</div>
<div class="gk-hero-body">
<h2>Affirmations</h2>
<p>Visuels apaisants avec texte d'affirmation optionnel</p>
<div class="gk-hero-meta">Gratuit, sans compte</div>
</div>
</a>
<a href="/fr/games/" class="gk-hero-card">
<div class="gk-hero-icon">🧠</div>
<div class="gk-hero-body">
<h2>Jeux Cérébraux</h2>
<p>Entraînez votre cerveau avec des jeux ciblant différentes compétences cognitives</p>
<div class="gk-hero-meta">Gratuit, sans compte</div>
</div>
</a>
</div>

### Méditations Guidées
URL: https://guruka.com/fr/meditate/
Description: Méditations guidées gratuites pour le calme, la concentration, le sommeil, l'énergie et le bien-être. Appuyez pour commencer, aucun compte nécessaire.

<style>
#meditate-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#meditate-hub .mh-header {
text-align: center;
margin-bottom: 3rem;
}
#meditate-hub .mh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #meditate-hub .mh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#meditate-hub .mh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #meditate-hub .mh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.mh-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.mh-card {
display: grid;
grid-template-columns: 2.5rem 1fr;
column-gap: 0.875rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 1.25rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .mh-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.mh-card:hover {
transform: none;
}
.mh-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.mh-dot {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.mh-card h2 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.375rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.mh-card .mh-sub,
.mh-card .mh-play {
grid-column: 1 / -1;
}
[data-theme="dark"] .mh-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.mh-card .mh-sub {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.5;
margin-bottom: 0.375rem;
}
[data-theme="dark"] .mh-card .mh-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.mh-card .mh-dur {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-muted, #6b7788);
margin-left: auto;
}
[data-theme="dark"] .mh-card .mh-dur {
color: var(--color-dark-text-muted, #94a3b8);
}
.mh-play {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
margin-top: 0.25rem;
min-height: 44px;
}
/* ── 480px+ ── */
@media (min-width: 480px) {
.mh-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.mh-card {
padding: 1.5rem;
}
}
/* ── 768px+ ── */
@media (min-width: 768px) {
.mh-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.mh-card {
padding: 1.75rem;
grid-template-columns: 3rem 1fr;
}
.mh-dot {
width: 3rem;
height: 3rem;
}
}
/* ── Hover (pointer devices only) ── */
@media (hover: hover) and (pointer: fine) {
.mh-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.mh-card:hover .mh-play {
color: var(--color-primary-hover, #0d7d63);
}
}
@media (prefers-reduced-motion: reduce) {
.mh-card {
transition: none;
}
}
</style>

<div id="meditate-hub">
<div class="mh-header">
<h1>Méditations Guidées</h1>
<p>Gratuit et sans publicités gênantes. Appuyez pour commencer, aucun compte nécessaire.</p>
</div>

<div class="mh-grid">
<a href="/fr/meditate/calm-and-stress-relief/" class="mh-card" style="--accent:#818cf8">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#818cf8,#a78bfa)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#818cf8,#a78bfa)"></div>
<h2>Calme et Soulagement du Stress</h2>
<p class="mh-sub">Relâchez les tensions et revenez au souffle</p>
<div class="mh-play"><span>Commencer &rarr;</span><span class="mh-dur">5 min</span></div>
</a>

<a href="/fr/meditate/focus-and-clarity/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#3b82f6,#1e40af)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#3b82f6,#1e40af)"></div>
<h2>Concentration et Clarté</h2>
<p class="mh-sub">Aiguisez votre attention et dissipez le brouillard mental</p>
<div class="mh-play"><span>Commencer &rarr;</span><span class="mh-dur">5 min</span></div>
</a>

<a href="/fr/meditate/sleep-and-wind-down/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#4338ca)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#6366f1,#4338ca)"></div>
<h2>Sommeil et Détente</h2>
<p class="mh-sub">Calmez votre esprit et préparez-vous pour un sommeil réparateur</p>
<div class="mh-play"><span>Commencer &rarr;</span><span class="mh-dur">7 min</span></div>
</a>

<a href="/fr/meditate/morning-energy/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f59e0b,#d97706)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#f59e0b,#d97706)"></div>
<h2>Énergie Matinale</h2>
<p class="mh-sub">Commencez votre journée avec vitalité et intention</p>
<div class="mh-play"><span>Commencer &rarr;</span><span class="mh-dur">5 min</span></div>
</a>

<a href="/fr/meditate/loving-kindness/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f472b6,#ec4899)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#f472b6,#ec4899)"></div>
<h2>Bienveillance</h2>
<p class="mh-sub">Cultivez la compassion envers vous-même et les autres</p>
<div class="mh-play"><span>Commencer &rarr;</span><span class="mh-dur">6 min</span></div>
</a>

<a href="/fr/meditate/gratitude/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#fbbf24,#f59e0b)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#fbbf24,#f59e0b)"></div>
<h2>Gratitude</h2>
<p class="mh-sub">Appréciez ce que vous avez et trouvez la joie dans le présent</p>
<div class="mh-play"><span>Commencer &rarr;</span><span class="mh-dur">5 min</span></div>
</a>

<a href="/fr/meditate/body-scan-and-tension-release/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#2dd4bf,#14b8a6)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#2dd4bf,#14b8a6)"></div>
<h2>Scan Corporel</h2>
<p class="mh-sub">Parcourez votre corps pour détecter les tensions et les relâcher</p>
<div class="mh-play"><span>Commencer &rarr;</span><span class="mh-dur">8 min</span></div>
</a>
</div>
</div>

### Terms of Service
URL: https://guruka.com/fr/terms/
Description: Terms of Service for GURUKA

# Terms of Service

*Last updated: March 6, 2026*

## 1. Acceptance of Terms

By accessing and using GURUKA (https://guruka.com), you accept and agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use our website.

## 2. Use of Service

GURUKA provides free brain training games and guided meditations. You agree to use GURUKA only for lawful purposes and in accordance with these Terms. You agree not to use the service in any way that violates any applicable laws or regulations.

## 3. Intellectual Property

The content, features, and functionality of GURUKA are owned by us and are protected by international copyright, trademark, and other intellectual property laws.

## 4. Disclaimer

Content and activities on GURUKA are for entertainment and general wellness purposes only. They are not intended as medical advice or treatment. The brain training games and meditations are designed for personal enjoyment and should not be considered a substitute for professional medical or psychological guidance.

## 5. User Conduct

You agree not to:

- Use the service for any unlawful purpose
- Attempt to gain unauthorized access to any portion of the service
- Interfere with or disrupt the service or servers
- Collect or harvest any information from the service

## 6. Disclaimer of Warranties

The service is provided "as is" and "as available" without warranties of any kind, either express or implied. We do not warrant that the service will be uninterrupted, secure, or error-free.

## 7. Limitation of Liability

To the fullest extent permitted by law, GURUKA shall not be liable for any indirect, incidental, special, consequential, or punitive damages arising out of your use of the service.

## 8. Changes to Terms

We reserve the right to modify these terms at any time. We will notify users of any material changes by updating the "Last updated" date. Your continued use of the service after changes constitutes acceptance of the modified terms.

## 9. Contact

If you have questions about these Terms of Service, please contact us through our website at [https://guruka.com](https://guruka.com).

### Affirmations & Visuels Méditatifs
URL: https://guruka.com/fr/visuals/
Description: Visuels relaxants en plein écran avec texte d'affirmation personnalisé. Créez vos propres affirmations, stockées en privé dans votre navigateur.

<style>
#visuals-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#visuals-hub .vh-header {
text-align: center;
margin-bottom: 3rem;
}
#visuals-hub .vh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #visuals-hub .vh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#visuals-hub .vh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #visuals-hub .vh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vh-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.vh-card {
display: grid;
grid-template-columns: 2.5rem 1fr;
column-gap: 0.875rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 1.25rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .vh-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.vh-card:hover { transform: none; }
.vh-dot {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.vh-card h2 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.375rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.vh-card .vh-sub,
.vh-card .vh-launch {
grid-column: 1 / -1;
}
[data-theme="dark"] .vh-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.vh-card .vh-sub {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.5;
margin-bottom: 0.375rem;
}
[data-theme="dark"] .vh-card .vh-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vh-launch {
display: flex;
align-items: center;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
margin-top: 0.25rem;
min-height: 44px;
}
@media (min-width: 480px) {
.vh-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.vh-card { padding: 1.5rem; }
}
@media (min-width: 768px) {
.vh-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.vh-card {
padding: 1.75rem;
grid-template-columns: 3rem 1fr;
}
.vh-dot { width: 3rem; height: 3rem; }
}
@media (hover: hover) and (pointer: fine) {
.vh-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.vh-card:hover .vh-launch {
color: var(--color-primary-hover, #0d7d63);
}
}
@media (prefers-reduced-motion: reduce) {
.vh-card { transition: none; }
}
</style>

<div id="visuals-hub">
<div class="vh-header">
<h1>Visuels Méditatifs</h1>
<p>Animations plein écran apaisantes pour la relaxation et la concentration. Entrez votre texte d'affirmation à afficher.<br>Aucun compte nécessaire.</p>
</div>

<div class="vh-grid">
<a href="/fr/visuals/breathing-orb/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#a78bfa)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#6366f1,#a78bfa)"></div>
<h2>Orbe de Respiration</h2>
<p class="vh-sub">Orbe pulsant guidant votre respiration</p>
<div class="vh-launch"><span>Lancer &rarr;</span></div>
</a>

<a href="/fr/visuals/aurora/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#22d3ee,#06b6d4)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#22d3ee,#06b6d4)"></div>
<h2>Aurore</h2>
<p class="vh-sub">Lumières du nord fluides</p>
<div class="vh-launch"><span>Lancer &rarr;</span></div>
</a>

<a href="/fr/visuals/starfield/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#1e293b,#475569)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#1e293b,#475569)"></div>
<h2>Champ d'Étoiles</h2>
<p class="vh-sub">Étoiles scintillantes dans l'espace profond</p>
<div class="vh-launch"><span>Lancer &rarr;</span></div>
</a>

<a href="/fr/visuals/lava-flow/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f97316,#ef4444)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#f97316,#ef4444)"></div>
<h2>Flux de Lave</h2>
<p class="vh-sub">Gouttes fusionnant et se séparant</p>
<div class="vh-launch"><span>Lancer &rarr;</span></div>
</a>

<a href="/fr/visuals/mandala/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#eab308,#a855f7)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#eab308,#a855f7)"></div>
<h2>Mandala</h2>
<p class="vh-sub">Géométrie sacrée en rotation</p>
<div class="vh-launch"><span>Lancer &rarr;</span></div>
</a>

<a href="/fr/visuals/dividing-cells/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#10b981,#22d3ee)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#10b981,#22d3ee)"></div>
<h2>Cellules en Division</h2>
<p class="vh-sub">Cellules se divisant sans fin</p>
<div class="vh-launch"><span>Lancer &rarr;</span></div>
</a>
</div>
</div>

### Color Clash - Brain Training Game
URL: https://guruka.com/games/color-clash/
Description: Pick colors under changing rules.

<style>
#color-clash-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #color-clash-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#cc-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.cc-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#cc-instructions.cc-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#cc-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#cc-instructions.cc-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #cc-instructions.cc-subtitle {
color: var(--color-dark-text-secondary);
}

#cc-instructions.cc-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #cc-instructions.cc-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#cc-instructions.cc-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#cc-instructions.cc-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#cc-instructions.cc-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.cc-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].cc-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.cc-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.cc-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.cc-btn-primary:hover {
background: var(--color-primary-hover);
}

.cc-btn-primary:active {
transform: scale(0.97);
}

.cc-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.cc-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"].cc-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#cc-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#cc-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: cc-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #cc-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes cc-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.cc-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.cc-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.cc-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].cc-wizard-desc {
color: var(--color-dark-text-secondary);
}
.cc-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.cc-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.cc-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].cc-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"].cc-wizard-dot.active {
background: var(--color-primary);
}
.cc-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.cc-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#cc-wizard-card {
padding: 1.5rem 1rem;
}
.cc-wizard-icon {
font-size: 2rem;
}
.cc-wizard-title {
font-size: 1.1rem;
}
.cc-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#cc-playing {
display: none;
flex: 1;
flex-direction: column;
}

.cc-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].cc-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.cc-stat {
text-align: center;
}

.cc-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"].cc-stat-label {
color: var(--color-dark-text-secondary);
}

.cc-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.cc-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.cc-level-text {
font-weight: 600;
}

.cc-modifier-badge {
background: #ec4899;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.cc-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].cc-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.cc-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.cc-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"].cc-timer-bar {
background: var(--color-dark-bg-secondary);
}

.cc-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.cc-timer-fill.cc-timer-warning {
background: #ef4444;
}

/* ── Rule Indicator ── */
.cc-rule-indicator {
text-align: center;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 1rem;
transition: background 0.3s, color 0.3s;
}

.cc-rule-ink {
background: rgba(236,72,153,0.15);
color: #ec4899;
border: 1px solid rgba(236,72,153,0.3);
}

[data-theme="dark"].cc-rule-ink {
background: rgba(236,72,153,0.25);
color: #f472b6;
}

.cc-rule-word {
background: rgba(59,130,246,0.15);
color: #3b82f6;
border: 1px solid rgba(59,130,246,0.3);
}

[data-theme="dark"].cc-rule-word {
background: rgba(59,130,246,0.25);
color: #60a5fa;
}

.cc-rule-bg {
background: rgba(168,85,247,0.15);
color: #a855f7;
border: 1px solid rgba(168,85,247,0.3);
}

[data-theme="dark"].cc-rule-bg {
background: rgba(168,85,247,0.25);
color: #c084fc;
}

/* ── Stimulus Display ── */
.cc-stimulus-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
position: relative;
}

.cc-stimulus-word {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.2;
animation: cc-stimulus-enter 0.2s ease-out;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.cc-stimulus-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
animation: cc-stimulus-enter 0.2s ease-out;
}

.cc-bg-square {
width: 50px;
height: 50px;
border-radius: 0.5rem;
border: 2px solid rgba(0,0,0,0.1);
flex-shrink: 0;
}

[data-theme="dark"].cc-bg-square {
border-color: rgba(255,255,255,0.15);
}

@keyframes cc-stimulus-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.cc-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.cc-feedback-flash.cc-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.cc-feedback-flash.cc-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.cc-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.cc-feedback-icon.cc-show-check {
animation: cc-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.cc-feedback-icon.cc-show-x {
animation: cc-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes cc-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Color Answer Buttons ── */
.cc-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.cc-answer-btn {
padding: 0.75rem;
border: 2px solid transparent;
border-radius: 0.75rem;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, opacity 0.15s;
color: #fff;
min-height: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}

.cc-color-circle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.4);
background: currentColor;
}

.cc-answer-btn:active {
transform: scale(0.95);
}

.cc-answer-btn:hover {
opacity: 0.9;
border-color: rgba(255,255,255,0.5);
}

.cc-answer-btn.cc-correct-flash {
border-color: #22c55e;
box-shadow: 0 0 15px rgba(34,197,94,0.4);
}

.cc-answer-btn.cc-wrong-flash {
border-color: #ef4444;
box-shadow: 0 0 15px rgba(239,68,68,0.4);
}

.cc-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].cc-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#cc-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#cc-pause-overlay.cc-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#cc-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.cc-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: cc-modal-enter 0.3s ease-out;
}

[data-theme="dark"].cc-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes cc-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.cc-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.cc-complete-card.cc-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.cc-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.cc-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: cc-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes cc-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.cc-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.cc-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"].cc-complete-stat {
background: var(--color-dark-bg-secondary);
}

.cc-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"].cc-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.cc-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.cc-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.cc-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"].cc-back-link {
color: var(--color-dark-text-secondary);
}

.cc-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.cc-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.cc-level-up-toast.cc-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#color-clash-game {
padding: 0.5rem;
}
.cc-stimulus-word {
font-size: 2.5rem;
}
.cc-answer-btn {
padding: 0.5rem;
min-height: 60px;
font-size: 0.7rem;
}
.cc-color-circle {
width: 40px;
height: 40px;
}
.cc-header {
padding: 0.5rem;
gap: 0.25rem;
}
.cc-stat-value {
font-size: 1rem;
}
#cc-instructions { padding: 0.75rem 0.5rem; }
#cc-instructions.cc-icon { font-size: 2rem; margin-bottom: 0; }
#cc-instructions h2 { font-size: 1.3rem; }
#cc-instructions.cc-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#cc-instructions.cc-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#cc-instructions.cc-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.cc-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
.cc-bg-square { width: 40px; height: 40px; }
}
@media (max-width: 640px) {
#color-clash-game {
padding: 0.75rem;
}
.cc-stimulus-word {
font-size: 3rem;
}
.cc-answer-btn {
padding: 0.625rem;
}
}
@media (max-width: 360px) {
.cc-stimulus-word {
font-size: 2rem;
}
.cc-answer-btn {
padding: 0.5rem;
font-size: 0.65rem;
min-height: 54px;
}
.cc-color-circle {
width: 34px;
height: 34px;
}
.cc-complete-stats {
grid-template-columns: 1fr 1fr;
}
.cc-final-score {
font-size: 2rem;
}
.cc-header {
padding: 0.375rem;
}
.cc-stat-value {
font-size: 0.9rem;
}
.cc-rule-indicator {
font-size: 0.8rem;
padding: 0.4rem 0.75rem;
}
}
@keyframes cc-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.cc-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.cc-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: cc-confetti-fall 2.5s ease-in forwards;
}
.cc-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(236,72,153,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: cc-glow-fade 1s ease-out forwards;
}
@keyframes cc-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.cc-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: cc-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(236,72,153,0.4);
}
@keyframes cc-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#color-clash-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#color-clash-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #color-clash-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#color-clash-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#color-clash-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="color-clash-game">

<div id="cc-instructions">
<div class="cc-title-row"><span class="cc-icon">&#127912;</span><h2>Color Clash</h2></div>
<p class="cc-subtitle">Color focus</p>
<div class="cc-how-to">
<h3>How to Play</h3>
<ol>
<li>A color word appears.</li>
<li>Follow the rule.</li>
<li>Rules switch as you level.</li>


</ol>
</div>
<div id="cc-best-display" class="cc-personal-best" style="display:none;">
Best: <strong id="cc-best-score">0</strong> points
</div>
<button class="cc-btn-primary" id="cc-start-btn">Start</button>
<div id="cc-challenge-banner-wrap"></div>
</div>

<div id="cc-wizard">
<div id="cc-wizard-card"></div>
</div>

<div id="cc-playing">
<div class="cc-header">
<div class="cc-stat">
<div class="cc-stat-label">Score</div>
<div class="cc-stat-value" id="cc-score">0</div>
</div>
<div class="cc-stat">
<div class="cc-stat-label">Streak</div>
<div class="cc-stat-value" id="cc-streak">0</div>
</div>
<div class="cc-stat">
<div class="cc-stat-label">Level</div>
<div class="cc-stat-value" id="cc-level">1</div>
</div>
</div>
<div class="cc-level-info">
<span class="cc-level-text">Level <span id="cc-level-text">1</span></span>
<span class="cc-modifier-badge" id="cc-modifier-badge" style="display:none;">Rule Switching</span>
</div>
<div class="cc-progress-bar">
<div class="cc-progress-fill" id="cc-progress-fill" style="width:0%"></div>
</div>
<div class="cc-timer-bar">
<div class="cc-timer-fill" id="cc-timer-fill" style="width:100%"></div>
</div>
<div class="cc-rule-indicator cc-rule-ink" id="cc-rule-indicator">Tap the INK COLOR</div>
<div class="cc-stimulus-area">
<div class="cc-feedback-flash" id="cc-feedback-flash"></div>
<div class="cc-feedback-icon" id="cc-feedback-icon"></div>
<div id="cc-stimulus-wrap" class="cc-stimulus-wrap">
<span class="cc-stimulus-word" id="cc-stimulus-word"></span>
<div class="cc-bg-square" id="cc-bg-square" style="display:none;"></div>
</div>
</div>
<div class="cc-answers" id="cc-answers">
<button class="cc-answer-btn" id="cc-ans-0"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-1"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-2"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-3"><div class="cc-color-circle"></div><span></span></button>
</div>
<div class="cc-playing-hint"><strong>1-4</strong> answer &middot; Pause anytime</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="cc-pause-btn" type="button">Pause</button>
<button class="gk-finish-btn" id="cc-finish-btn" type="button">Finish</button>
</div>
</div>

<div id="cc-pause-overlay">
<div class="cc-pause-text">Paused</div>
<button class="cc-btn-primary" id="cc-resume-btn">Resume</button>
</div>

<div id="cc-complete-overlay">
<div class="cc-complete-card">
<button class="gk-complete-close" id="cc-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="cc-trophy">&#127942;</div>
<h2>Done!</h2>
<div class="cc-final-score" id="cc-final-score">0</div>
<div id="cc-new-best" class="cc-new-best" style="display:none;">&#11088; New Best!</div>
<div class="gk-challenge-result" id="cc-challenge-result" style="display:none;"></div>
<div class="cc-complete-stats">
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Level</div>
<div class="cc-complete-stat-value" id="cc-final-level">1</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Accuracy</div>
<div class="cc-complete-stat-value" id="cc-final-accuracy">0%</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Streak</div>
<div class="cc-complete-stat-value" id="cc-final-streak">0</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Best</div>
<div class="cc-complete-stat-value" id="cc-final-best">0</div>
</div>
</div>
<div class="cc-complete-actions">
<button class="cc-btn-primary" id="cc-play-again-btn">Again</button>
<button class="gk-runtime-history-toggle" id="cc-history-toggle" type="button">Show History</button>
<a href="/games/" class="cc-back-link">&larr; Games</a>
</div>
<div class="gk-runtime-history-panel" id="cc-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="cc-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="cc-share-btn">&#128279; Share</button>
<div class="gk-share-copied" id="cc-share-copied" style="display:none;">Copied!</div>
</div>
</div>
</div>

<div class="cc-level-up-toast" id="cc-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_color-clash_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('cc-history-toggle', 'cc-history-panel', 'cc-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

/* ── Color pool ── */
var COLORS = [
{ name: 'Red', hex: '#ef4444' },
{ name: 'Blue', hex: '#3b82f6' },
{ name: 'Green', hex: '#22c55e' },
{ name: 'Yellow', hex: '#eab308' },
{ name: 'Purple', hex: '#a855f7' },
{ name: 'Orange', hex: '#f97316' },
{ name: 'Pink', hex: '#ec4899' },
{ name: 'Cyan', hex: '#06b6d4' }
];

var RULES = { INK: 'ink', WORD: 'word', BG: 'bg' };

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctColorName: '',
currentRule: RULES.INK,
currentStimulus: null,
currentChoices: [],
roundsSinceRuleSwitch: 0,
nextRuleSwitchAt: 0
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('cc-instructions');
var elWizard = document.getElementById('cc-wizard');
var elWizardCard = document.getElementById('cc-wizard-card');
var elPlaying = document.getElementById('cc-playing');
var elPauseOverlay = document.getElementById('cc-pause-overlay');
var elCompleteOverlay = document.getElementById('cc-complete-overlay');
var elScore = document.getElementById('cc-score');
var elStreak = document.getElementById('cc-streak');
var elLevel = document.getElementById('cc-level');
var elLevelText = document.getElementById('cc-level-text');
var elModifierBadge = document.getElementById('cc-modifier-badge');
var elProgressFill = document.getElementById('cc-progress-fill');
var elTimerFill = document.getElementById('cc-timer-fill');
var elRuleIndicator = document.getElementById('cc-rule-indicator');
var elStimulusWord = document.getElementById('cc-stimulus-word');
var elStimulusWrap = document.getElementById('cc-stimulus-wrap');
var elBgSquare = document.getElementById('cc-bg-square');
var elFeedbackFlash = document.getElementById('cc-feedback-flash');
var elFeedbackIcon = document.getElementById('cc-feedback-icon');
var elFinalScore = document.getElementById('cc-final-score');
var elNewBest = document.getElementById('cc-new-best');
var elFinalLevel = document.getElementById('cc-final-level');
var elFinalAccuracy = document.getElementById('cc-final-accuracy');
var elFinalStreak = document.getElementById('cc-final-streak');
var elFinalBest = document.getElementById('cc-final-best');
var elBestDisplay = document.getElementById('cc-best-display');
var elBestScore = document.getElementById('cc-best-score');
var elLevelToast = document.getElementById('cc-level-toast');
var btnStart = document.getElementById('cc-start-btn');
var btnResume = document.getElementById('cc-resume-btn');
var btnPlayAgain = document.getElementById('cc-play-again-btn');
var answerBtns = [
document.getElementById('cc-ans-0'),
document.getElementById('cc-ans-1'),
document.getElementById('cc-ans-2'),
document.getElementById('cc-ans-3')
];

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getColorPool(lvl) {
if (lvl <= 9) return COLORS.slice(0, 4);
return COLORS;
}

/* ── Rule logic ── */
function getRuleForLevel(lvl) {
if (lvl <= 6) return RULES.INK;
return RULES.INK;
}

function shouldSwitchRules(lvl) {
return lvl >= 7;
}

function isTripleStroop(lvl) {
return lvl >= 17;
}

function isCongruent(lvl) {
return lvl <= 3;
}

function doesRuleSwitchMidLevel(lvl) {
return lvl >= 13 && lvl <= 16;
}

function updateRuleIndicator() {
elRuleIndicator.className = 'cc-rule-indicator';
if (state.currentRule === RULES.INK) {
elRuleIndicator.textContent = 'Tap the INK COLOR';
elRuleIndicator.classList.add('cc-rule-ink');
} else if (state.currentRule === RULES.WORD) {
elRuleIndicator.textContent = 'Tap the WORD MEANING';
elRuleIndicator.classList.add('cc-rule-word');
} else if (state.currentRule === RULES.BG) {
elRuleIndicator.textContent = 'Tap the BACKGROUND COLOR';
elRuleIndicator.classList.add('cc-rule-bg');
}
}

/* ── Random helpers ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}

function pickRandom(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function pickDifferent(arr, exclude) {
var filtered = arr.filter(function(c) { return c.name !== exclude.name; });
return pickRandom(filtered);
}

/* ── Generate stimulus ── */
function generateStimulus(lvl) {
var pool = getColorPool(lvl);
var wordColor, inkColor, bgColor, correctColor;

if (isCongruent(lvl)) {
/* L1-3: congruent, word matches ink */
wordColor = pickRandom(pool);
inkColor = wordColor;
bgColor = null;
state.currentRule = RULES.INK;
correctColor = wordColor;
} else if (lvl <= 6) {
/* L4-6: incongruent, identify ink */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
state.currentRule = RULES.INK;
correctColor = inkColor;
} else if (lvl <= 9) {
/* L7-9: rule alternates each round between ink and word */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else if (lvl <= 12) {
/* L10-12: 8 colors, rule alternates */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else if (lvl <= 16) {
/* L13-16: rule switches mid-level */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else {
/* L17-20: triple stroop */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = pickDifferent(pool, inkColor);
while (bgColor.name === wordColor.name) {
bgColor = pickDifferent(pool, inkColor);
}
if (state.currentRule === RULES.INK) {
correctColor = inkColor;
} else if (state.currentRule === RULES.WORD) {
correctColor = wordColor;
} else {
correctColor = bgColor;
}
}

return {
wordText: wordColor.name,
inkHex: inkColor.hex,
bgColor: bgColor,
correctColor: correctColor,
pool: pool
};
}

function generateColorChoices(correctColor, pool) {
var choices = [correctColor];
var attempts = 0;
while (choices.length < 4 && attempts < 50) {
var candidate = pickRandom(pool);
var isDuplicate = false;
for (var i = 0; i < choices.length; i++) {
if (choices[i].name === candidate.name) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
choices.push(candidate);
}
attempts++;
}
/* Fill remaining if pool is too small */
var allColors = COLORS.slice();
while (choices.length < 4) {
var c = pickRandom(allColors);
var dup = false;
for (var k = 0; k < choices.length; k++) {
if (choices[k].name === c.name) { dup = true; break; }
}
if (!dup) choices.push(c);
}
return shuffle(choices);
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
if (shouldSwitchRules(state.level)) {
elModifierBadge.style.display = '';
if (isTripleStroop(state.level)) {
elModifierBadge.textContent = 'Triple Stroop';
} else if (doesRuleSwitchMidLevel(state.level)) {
elModifierBadge.textContent = 'Mid-Level Switching';
} else {
elModifierBadge.textContent = 'Rule Switching';
}
} else {
elModifierBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('cc-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('cc-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('cc-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'cc-feedback-flash';
elFeedbackIcon.className = 'cc-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('cc-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('cc-show-check');
} else {
elFeedbackFlash.classList.add('cc-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('cc-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'cc-feedback-flash';
elFeedbackIcon.className = 'cc-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('cc-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('cc-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'cc-correct-flash' : 'cc-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('cc-correct-flash', 'cc-wrong-flash');
}, 400);
}

/* ── Determine rule for the next round ── */
function determineRule() {
var lvl = state.level;
if (lvl <= 3) {
state.currentRule = RULES.INK;
} else if (lvl <= 6) {
state.currentRule = RULES.INK;
} else if (lvl <= 12) {
/* Alternate each round */
state.currentRule = (state.round % 2 === 0) ? RULES.INK : RULES.WORD;
} else if (lvl <= 16) {
/* Mid-level switching every 3-5 rounds */
state.roundsSinceRuleSwitch++;
if (state.roundsSinceRuleSwitch >= state.nextRuleSwitchAt) {
state.currentRule = (state.currentRule === RULES.INK) ? RULES.WORD : RULES.INK;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
}
} else {
/* L17-20: triple stroop, cycle through ink/word/bg */
var rules = [RULES.INK, RULES.WORD, RULES.BG];
state.roundsSinceRuleSwitch++;
if (state.roundsSinceRuleSwitch >= state.nextRuleSwitchAt) {
var currentIdx = rules.indexOf(state.currentRule);
var nextIdx = (currentIdx + 1) % rules.length;
state.currentRule = rules[nextIdx];
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(2, 4);
}
}
}

/* ── Set color button appearance ── */
function setColorButton(btn, color) {
btn.style.background = color.hex;
btn.style.borderColor = 'transparent';
var circle = btn.querySelector('.cc-color-circle');
var label = btn.querySelector('span');
circle.style.background = '#fff';
circle.style.borderColor = 'rgba(255,255,255,0.6)';
circle.style.background = color.hex;
circle.style.filter = 'brightness(1.2)';
label.textContent = color.name;
btn.dataset.colorName = color.name;
}

function findColorByName(name) {
for (var i = 0; i < COLORS.length; i++) {
if (COLORS[i].name === name) return COLORS[i];
}
return null;
}

function colorHistoryChip(color) {
if (!color) return 'No answer';
return '<span class="gk-history-swatch" style="background:' + runHistory.escape(color.hex) + '"></span>' + runHistory.escape(color.name);
}

function recordColorHistory(selectedName, correct) {
var selected = findColorByName(selectedName);
var correctColor = state.currentStimulus ? state.currentStimulus.correctColor : findColorByName(state.correctColorName);
var ruleText = elRuleIndicator ? elRuleIndicator.textContent : 'Color rule';
var stimulus = state.currentStimulus;
var html = '<strong>' + runHistory.escape(ruleText) + '</strong>';
if (stimulus) {
html += '<div class="gk-runtime-history-sub">Word: ' + runHistory.escape(stimulus.wordText) + ' | Ink: <span class="gk-history-swatch" style="background:' + runHistory.escape(stimulus.inkHex) + '"></span></div>';
}
html += '<div class="gk-runtime-history-sub">Your: ' + colorHistoryChip(selected) + ' | Correct: ' + colorHistoryChip(correctColor) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var chosenName = answerBtns[chosenIdx].dataset.colorName;
var correct = (chosenName === state.correctColorName);

state.totalAnswered++;
recordColorHistory(chosenName, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordColorHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

/* Determine rule for this round */
determineRule();
updateRuleIndicator();

var stimulus = generateStimulus(state.level);
state.correctColorName = stimulus.correctColor.name;
state.currentStimulus = stimulus;

/* Display the stimulus word */
elStimulusWord.textContent = stimulus.wordText;
elStimulusWord.style.color = stimulus.inkHex;
elStimulusWrap.style.animation = 'none';
void elStimulusWrap.offsetWidth;
elStimulusWrap.style.animation = '';

/* Handle background square for triple stroop */
if (stimulus.bgColor && isTripleStroop(state.level)) {
elBgSquare.style.display = 'block';
elBgSquare.style.background = stimulus.bgColor.hex;
} else {
elBgSquare.style.display = 'none';
}

/* Generate and display color choices */
var choices = generateColorChoices(stimulus.correctColor, stimulus.pool);
state.currentChoices = choices.slice();
for (var i = 0; i < 4; i++) {
setColorButton(answerBtns[i], choices[i]);
}

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'cc-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'cc-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'cc-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.cc-trophy');
var title = document.querySelector('#cc-complete-overlay .cc-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'AMAZING!';
elNewBest.className = 'cc-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F AMAZING! New Best!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Good Job!';
elNewBest.className = 'cc-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('cc-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var CC_WIZARD_STEPS = [
{icon: '\uD83C\uDFA8', title: 'Read the color, not the word', desc: 'Follow the rule and pick the color.'},
{icon: '\uD83D\uDD04', title: 'Rules switch as you level up', desc: 'Rules switch at higher levels.'},
{icon: '\u26A1', title: 'Fast counts', desc: 'Answer before time runs out.', final: true}
];
var ccWizardStep = 0;

function renderWizardStep() {
var s = CC_WIZARD_STEPS[ccWizardStep];
var dotsHtml = '';
for (var i = 0; i < CC_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="cc-wizard-dot' + (i === ccWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Start' : 'Next';
elWizardCard.innerHTML =
'<div class="cc-wizard-icon">' + s.icon + '</div>' +
'<div class="cc-wizard-title">' + s.title + '</div>' +
'<div class="cc-wizard-desc">' + s.desc + '</div>' +
'<div class="cc-wizard-dots">' + dotsHtml + '</div>' +
'<button class="cc-wizard-btn" id="cc-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'cc-wizard-enter 0.3s ease-out';
document.getElementById('cc-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ccWizardStep < CC_WIZARD_STEPS.length - 1) {
ccWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ccWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctColorName = '';
state.currentRule = RULES.INK;
state.currentStimulus = null;
state.currentChoices = [];
runHistory.clear();
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('cc-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('cc-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('cc-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('cc-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('cc-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('cc-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Color Clash', '/games/color-clash/', 'cc-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key >= '1' && e.key <= '4') {
e.preventDefault();
processAnswer(parseInt(e.key, 10) - 1);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('cc-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### How Your Data Works
URL: https://guruka.com/fr/your-data/
Description: Learn how GURUKA stores your data locally on your device, what happens when you switch devices or clear your browser, and how to view your stored data.

# How Your Data Works on GURUKA

GURUKA does not require an account, and we do not store any of your data on our servers. Everything you do on GURUKA stays on your own device, inside your web browser. This page explains what that means in plain terms.

## Your data lives on your device

When you use GURUKA, your progress is saved directly inside the browser you are using. This includes:

- Game scores and high scores
- Meditation session history
- Activity tracking data
- Your preferences and settings

This data is not sent anywhere. It is not uploaded to a server. It is not shared with anyone. It exists only on the device and browser where you created it.

## What happens on a different device or browser

Because your data is stored on your device, it is not available anywhere else. If you open GURUKA on a different phone, computer, or tablet, you will start fresh. The same applies if you use a different browser on the same device. For example, if you use Chrome on your laptop and then open GURUKA in Safari, your Chrome data will not appear in Safari.

This is the trade-off for not requiring an account: your data is completely private, but it does not follow you between devices.

## What happens when you clear your browser data

If you clear your browser's cache, cookies, or site data, your GURUKA data will be deleted. This is the same as what happens with any website that stores data locally. Most browsers let you clear data for specific sites without affecting others, but if you do a full cache clear, your GURUKA progress will be removed.

**To keep your data safe:** avoid clearing site data for guruka.com specifically, or be aware that a full browser cache clear will reset your GURUKA progress.

## No account means no data recovery

Since GURUKA does not have accounts or cloud storage, there is no way to recover your data once it is deleted. There is no "forgot password" or "restore from backup" option because no backup exists. Your data is fully in your hands.

## Why we chose this approach

Most apps and websites ask you to create an account so they can store your data on their servers. That is convenient for syncing across devices, but it also means the company has access to your personal information, usage patterns, and habits.

We chose a different path. GURUKA stores everything locally so that:

- **Your data is truly private** - we cannot see it, sell it, or lose it in a data breach
- **No sign-up is needed** - you can start meditating or playing games immediately
- **No tracking** - we do not use advertising pixels or third-party analytics
- **You are in full control** - you can delete your data at any time by clearing your browser storage

## For technical users: how to view your data

GURUKA stores data using your browser's **localStorage**. You can inspect it directly:

1. Open GURUKA in your browser (e.g. [guruka.com/games/](https://guruka.com/games/))
2. Open Developer Tools (press **F12** or **Ctrl+Shift+I** on Windows/Linux, **Cmd+Option+I** on Mac)
3. Go to the **Application** tab (Chrome/Edge) or **Storage** tab (Firefox)
4. In the left sidebar, expand **Local Storage** and click on **https://guruka.com**
5. You will see all stored keys and values: game scores, meditation history, preferences, and activity data

All keys are prefixed with `guruka_` so they are easy to identify. You can edit or delete individual entries, or right-click and choose "Clear" to remove everything.

## Questions?

If you have questions about how your data is handled, see our [Privacy Policy](/privacy/) or [contact us](https://docs.google.com/forms/d/e/1FAIpQLSe1ECOGIxdixwDDVyQqCgPRctD83_jqwEp-6bhysm8gu8uZKA/viewform).

### Memory Matrix - Brain Training Game
URL: https://guruka.com/games/memory-matrix/
Description: Recall grid patterns.

<style>
#memory-matrix-game {
max-width: 540px;
margin: 0 auto;
padding: 1.5rem 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
-webkit-tap-highlight-color: transparent;
}

#memory-matrix-game * {
box-sizing: border-box;
}

#memory-matrix-game .mm-screen {
display: none;
animation: mmFadeIn 0.4s ease-out;
}

#memory-matrix-game .mm-screen.active {
display: block;
}

@keyframes mmFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes mmPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}

@keyframes mmCellGlow {
0% { box-shadow: 0 0 0 0 rgba(15, 144, 114, 0.4); }
70% { box-shadow: 0 0 0 8px rgba(15, 144, 114, 0); }
100% { box-shadow: 0 0 0 0 rgba(15, 144, 114, 0); }
}

@keyframes mmShine {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}

@keyframes mmBounceIn {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}

@keyframes mmSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* ---- Instructions Screen ---- */
#memory-matrix-game .mm-instructions {
text-align: center;
}

#memory-matrix-game .mm-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#memory-matrix-game .mm-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 0.75rem;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
margin-bottom: 0;
}

#memory-matrix-game .mm-icon-wrap svg {
width: 36px;
height: 36px;
stroke: var(--color-primary);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

#memory-matrix-game .mm-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 0.25rem;
}

#memory-matrix-game .mm-subtitle {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
}

#memory-matrix-game .mm-how-to {
text-align: left;
margin-bottom: 1.5rem;
}

#memory-matrix-game .mm-how-to h3 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 0.75rem;
}

#memory-matrix-game .mm-how-to ol {
list-style: none;
padding: 0;
margin: 0;
}

#memory-matrix-game .mm-how-to li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.625rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

#memory-matrix-game .mm-step-num {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
font-size: 0.8rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}

#memory-matrix-game .mm-best-banner {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 0.75rem 1rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

#memory-matrix-game .mm-best-banner strong {
color: var(--color-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-best-banner {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

/* ---- Buttons ---- */
#memory-matrix-game .mm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: none;
border-radius: 0.625rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
padding: 0.75rem 1.5rem;
transition: all 0.2s ease;
}

#memory-matrix-game .mm-btn:active {
transform: scale(0.97);
}

#memory-matrix-game .mm-btn-primary {
background: var(--color-primary);
color: #fff;
width: 100%;
}

#memory-matrix-game .mm-btn-primary:hover {
background: var(--color-primary-hover);
box-shadow: 0 4px 12px rgba(15, 144, 114, 0.3);
}

#memory-matrix-game .mm-btn-outline {
background: transparent;
color: var(--color-text-primary);
border: 2px solid var(--color-border);
}

#memory-matrix-game .mm-btn-outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-btn-outline {
color: var(--color-dark-text-primary);
border-color: var(--color-dark-border);
}

[data-theme="dark"] #memory-matrix-game .mm-btn-outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}

#memory-matrix-game .mm-btn-submit {
background: var(--color-primary);
color: #fff;
}

#memory-matrix-game .mm-btn-submit:hover:not(:disabled) {
background: var(--color-primary-hover);
}

#memory-matrix-game .mm-btn-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* ---- Wizard Overlay ---- */
#mm-wizard {
display: none;
animation: mmFadeIn 0.4s ease-out;
}
#mm-wizard.active {
display: block;
}
.mm-wizard-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
.mm-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: mmWizardEnter 0.3s ease-out;
}
[data-theme="dark"].mm-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes mmWizardEnter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.mm-wizard-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.mm-wizard-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
.mm-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].mm-wizard-desc { color: var(--color-dark-text-secondary); }
.mm-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.mm-wizard-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-border);
transition: all 0.3s;
}
.mm-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].mm-wizard-dot { background: var(--color-dark-border, #3a4553); }
[data-theme="dark"].mm-wizard-dot.active { background: var(--color-primary); }
.mm-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.mm-wizard-btn:hover { background: var(--color-primary-hover, #0d7a62); }
@media (max-width: 400px) {
.mm-wizard-card { padding: 1.5rem 1rem; }
.mm-wizard-icon { font-size: 2rem; }
.mm-wizard-title { font-size: 1.1rem; }
.mm-wizard-desc { font-size: 0.85rem; }
}

/* ---- Game Header ---- */
#memory-matrix-game .mm-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
margin-bottom: 1rem;
}

[data-theme="dark"] #memory-matrix-game .mm-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-header-item {
text-align: center;
}

#memory-matrix-game .mm-header-label {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.125rem;
}

[data-theme="dark"] #memory-matrix-game .mm-header-label {
color: var(--color-dark-text-secondary);
}

#memory-matrix-game .mm-header-value {
font-size: 1.15rem;
font-weight: 700;
color: var(--color-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-header-value {
color: var(--color-dark-text-primary);
}

#memory-matrix-game .mm-streak-value {
color: #f59e0b;
}

/* ---- Phase Indicator ---- */
#memory-matrix-game .mm-phase {
text-align: center;
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 1rem;
min-height: 1.5rem;
}

#memory-matrix-game .mm-phase-memorize {
color: var(--color-primary);
animation: mmPulse 1.5s ease-in-out infinite;
}

#memory-matrix-game .mm-phase-recall {
color: #f59e0b;
}

#memory-matrix-game .mm-phase-correct {
color: #22c55e;
}

#memory-matrix-game .mm-phase-wrong {
color: #ef4444;
}

/* ---- Grid ---- */
#memory-matrix-game .mm-grid-wrap {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}

#memory-matrix-game .mm-grid {
display: grid;
gap: 6px;
}

#memory-matrix-game .mm-cell {
aspect-ratio: 1;
border-radius: 8px;
border: 2px solid var(--color-border);
background: var(--color-bg-secondary);
cursor: default;
transition: all 0.25s ease;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
color: transparent;
-webkit-user-select: none;
user-select: none;
}

[data-theme="dark"] #memory-matrix-game .mm-cell {
border-color: var(--color-dark-border);
background: var(--color-dark-bg-secondary);
}

#memory-matrix-game .mm-cell.recall-mode {
cursor: pointer;
}

#memory-matrix-game .mm-cell.recall-mode:hover {
border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-secondary));
}

[data-theme="dark"] #memory-matrix-game .mm-cell.recall-mode:hover {
background: color-mix(in srgb, var(--color-primary) 10%, var(--color-dark-bg-secondary));
}

#memory-matrix-game .mm-cell.showing {
background: var(--color-primary);
border-color: var(--color-primary);
animation: mmCellGlow 0.6s ease-out;
}

#memory-matrix-game .mm-cell.selected {
background: color-mix(in srgb, var(--color-primary) 80%, transparent);
border-color: var(--color-primary);
color: #fff;
}

#memory-matrix-game .mm-cell.fb-correct {
background: #22c55e;
border-color: #16a34a;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-missed {
background: rgba(239, 68, 68, 0.45);
border-color: #ef4444;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-wrong {
background: #ef4444;
border-color: #dc2626;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-neutral {
opacity: 0.5;
transition: all 0.3s ease;
}

/* ---- Progress Bar ---- */
#memory-matrix-game .mm-progress-wrap {
margin-bottom: 1rem;
text-align: center;
}

#memory-matrix-game .mm-progress-bar {
height: 6px;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 3px;
overflow: hidden;
max-width: 240px;
margin: 0 auto 0.375rem;
}

[data-theme="dark"] #memory-matrix-game .mm-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

#memory-matrix-game .mm-progress-text {
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-progress-text {
color: var(--color-dark-text-secondary);
}

/* ---- Action Buttons ---- */
#memory-matrix-game .mm-actions {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}

/* ---- Game Complete Screen ---- */
#memory-matrix-game .mm-complete {
position: relative;
text-align: center;
}

#memory-matrix-game .mm-score-display {
font-size: 3rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
background: linear-gradient(90deg, var(--color-primary), #10b981, var(--color-primary));
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: mmShine 3s linear infinite;
}

#memory-matrix-game .mm-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin: 1.25rem 0;
}

#memory-matrix-game .mm-stat-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 0.75rem 0.5rem;
}

[data-theme="dark"] #memory-matrix-game .mm-stat-card {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-stat-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-stat-value {
color: var(--color-dark-text-primary);
}

#memory-matrix-game .mm-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-secondary);
margin-top: 0.125rem;
}

[data-theme="dark"] #memory-matrix-game .mm-stat-label {
color: var(--color-dark-text-secondary);
}

#memory-matrix-game .mm-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #000;
font-size: 0.8rem;
font-weight: 700;
padding: 0.375rem 1rem;
border-radius: 2rem;
margin-bottom: 1rem;
animation: mmBounceIn 0.5s ease-out;
}

#memory-matrix-game .mm-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}

#memory-matrix-game .mm-back-link {
display: inline-block;
margin-top: 0.75rem;
color: var(--color-primary);
text-decoration: none;
font-size: 0.9rem;
}

#memory-matrix-game .mm-back-link:hover {
text-decoration: underline;
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

/* ---- Dark Mode ---- */
[data-theme="dark"] #memory-matrix-game {
color: var(--color-dark-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-title {
color: var(--color-dark-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-subtitle {
color: var(--color-dark-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-how-to li {
color: var(--color-dark-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-cell.recall-mode:hover {
border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

/* ---- Responsive ---- */
@media (max-width: 400px) {
#memory-matrix-game {
padding: 1rem 0.5rem;
}
#memory-matrix-game .mm-grid {
gap: 4px;
}
#memory-matrix-game .mm-header {
padding: 0.5rem;
}
#memory-matrix-game .mm-header-value {
font-size: 1rem;
}
#memory-matrix-game .mm-btn {
padding: 0.625rem 1rem;
font-size: 0.9rem;
}
#memory-matrix-game .mm-icon-wrap { width: 40px; height: 40px; margin-bottom: 0; }
#memory-matrix-game .mm-icon-wrap svg { width: 20px; height: 20px; }
#memory-matrix-game .mm-instructions h2 { font-size: 1.3rem; }
#memory-matrix-game .mm-instructions.mm-subtitle { font-size: 0.85rem; margin-bottom: 0.75rem; }
}
@media (max-width: 640px) {
#memory-matrix-game .mm-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
#memory-matrix-game .mm-stat-value {
font-size: 1.1rem;
}
}
@media (max-width: 360px) {
#memory-matrix-game .mm-grid {
gap: 3px;
}
#memory-matrix-game .mm-stats-grid {
grid-template-columns: 1fr 1fr;
}
#memory-matrix-game .mm-btn {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}
#memory-matrix-game .mm-title {
font-size: 1.25rem;
}
#memory-matrix-game .mm-grid-wrap {
max-width: 100%;
overflow: hidden;
}
}
@keyframes mm-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.mm-confetti-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.mm-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: mm-confetti-fall 2.5s ease-in forwards;
}
.mm-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: mm-glow-fade 1s ease-out forwards;
}
@keyframes mm-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.mm-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
font-size: 0.85rem;
font-weight: 700;
padding: 0.375rem 1rem;
border-radius: 2rem;
margin-bottom: 1rem;
animation: mmBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}

#memory-matrix-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#memory-matrix-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #memory-matrix-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="memory-matrix-game">

<div id="mm-instructions" class="mm-screen active">
<div class="mm-instructions">
<div class="mm-title-row"><div class="mm-icon-wrap"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div><h1 class="mm-title">Memory Matrix</h1></div>
<p class="mm-subtitle">Spatial memory</p>
<div class="mm-how-to">
<h3>How to Play:</h3>
<ol>
<li><span class="mm-step-num">1</span><span>Watch the cells</span></li>
<li><span class="mm-step-num">2</span><span>Remember them</span></li>
<li><span class="mm-step-num">3</span><span>Tap them back</span></li>
<li><span class="mm-step-num">4</span><span>Level 8+: order matters</span></li>
</ol>
</div>
<div id="mm-instr-best" class="mm-best-banner" style="display:none;"></div>
<button class="mm-btn mm-btn-primary" onclick="mmShowWizard()">Start</button>
<div id="mm-challenge-banner-wrap"></div>
</div>
</div>

<div id="mm-wizard" class="mm-screen">
<div class="mm-wizard-overlay">
<div class="mm-wizard-card" id="mm-wizard-card"></div>
</div>
</div>

<div id="mm-playing" class="mm-screen">
<div class="mm-header">
<div class="mm-header-item">
<div class="mm-header-label">Score</div>
<div class="mm-header-value" id="mm-score">0</div>
</div>
<div class="mm-header-item">
<div class="mm-header-label">Level</div>
<div class="mm-header-value" id="mm-level">1</div>
</div>
<div class="mm-header-item">
<div class="mm-header-label">Streak</div>
<div class="mm-header-value mm-streak-value" id="mm-streak">0</div>
</div>
</div>
<div class="mm-phase" id="mm-phase"></div>
<div class="mm-grid-wrap">
<div class="mm-grid" id="mm-grid"></div>
</div>
<div class="mm-progress-wrap">
<div class="mm-progress-bar">
<div class="mm-progress-fill" id="mm-progress-fill" style="width:0%"></div>
</div>
<div class="mm-progress-text" id="mm-progress-text">Round 1 of 3</div>
</div>
<div class="mm-actions" id="mm-actions"></div>
<button class="gk-finish-btn" id="mm-finish-btn">Finish</button>
</div>

<div id="mm-complete" class="mm-screen">
<div class="mm-complete">
<button class="gk-complete-close" id="mm-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="mm-icon-wrap">
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
</div>
<h1 class="mm-title">Done!</h1>
<div class="mm-score-display" id="mm-final-score">0</div>
<div id="mm-new-best-badge" class="mm-new-best" style="display:none;">New Best!</div>
<div class="gk-challenge-result" id="mm-challenge-result" style="display:none;"></div>
<div class="mm-stats-grid">
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-level">1</div>
<div class="mm-stat-label">Level</div>
</div>
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-accuracy">0%</div>
<div class="mm-stat-label">Accuracy</div>
</div>
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-streak">0</div>
<div class="mm-stat-label">Streak</div>
</div>
</div>
<div class="mm-complete-actions">
<button class="mm-btn mm-btn-primary" onclick="mmPlayAgain()">Again</button>
<button class="gk-runtime-history-toggle" id="mm-history-toggle" type="button">Show History</button>
<a href="/games/" class="mm-back-link">Back to All Games</a>
</div>
<div class="gk-runtime-history-panel" id="mm-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="mm-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="mm-share-btn">&#128279; Share</button>
<div class="gk-share-copied" id="mm-share-copied" style="display:none;">Copied!</div>
</div>
</div>
</div>

</div>

<script>
(function() {
var STORAGE_BEST = 'guruka_memory-matrix_best';
var POINTS_PER_CORRECT = 100;
var SPEED_BONUS_THRESHOLD = 1000;
var STREAK_MULTIPLIER = 0.1;
var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('mm-history-toggle', 'mm-history-panel', 'mm-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
 screen: 'instructions',
 score: 0,
 level: 1,
 streak: 0,
 bestStreak: 0,
 correctAnswers: 0,
 wrongAnswers: 0,
 roundsInLevel: 0,
 pattern: [],
 selectedCells: [],
 showingIndex: 0,
 phase: 'showing',
 answerTime: 0,
 countdownValue: 3,
 countdownTimer: null,
 showTimer: null,
 feedbackTimer: null
};

function getLevelConfig(level) {
 var gridSize = level <= 5 ? 3 : level <= 10 ? 4 : level <= 15 ? 5 : 6;
 var patternSize = Math.min(3 + Math.floor(level / 2), gridSize * gridSize - 2);
 var displayTime = Math.max(2000 - (level - 1) * 80, 800);
 var orderMatters = level >= 8;
 return {
 gridSize: gridSize,
 patternSize: patternSize,
 displayTime: displayTime,
 orderMatters: orderMatters,
 roundsPerLevel: 3,
 maxLevel: 20
 };
}

function getPersonalBest() {
 try {
 var val = localStorage.getItem(STORAGE_BEST);
 return val ? parseInt(val, 10) : 0;
 } catch (e) { return 0; }
}

function saveResult(score, level, accuracy) {
 try {
 void level;
 void accuracy;
 var best = getPersonalBest();
 if (score > best) {
 localStorage.setItem(STORAGE_BEST, String(score));
 return true;
 }
 return false;
 } catch (e) { return false; }
}

function showScreen(name) {
 var screens = document.querySelectorAll('#memory-matrix-game .mm-screen');
 for (var i = 0; i < screens.length; i++) {
 screens[i].classList.remove('active');
 }
 var el = document.getElementById('mm-' + name);
 if (el) {
 el.classList.add('active');
 }
 state.screen = name;
}

function updateInstructionsBest() {
 var best = getPersonalBest();
 var banner = document.getElementById('mm-instr-best');
 if (best > 0 && banner) {
 banner.style.display = 'block';
 banner.innerHTML = 'Best: <strong>' + best.toLocaleString() + '</strong>';
 }
}

/* ---- Wizard ---- */
var MM_WIZARD_STEPS = [
{icon: '\uD83D\uDCA1', title: 'Watch the cells light up', desc: 'Watch the cells.'},
{icon: '\uD83D\uDC46', title: 'Tap them from memory', desc: 'Tap them back.'},
{icon: '\uD83D\uDE80', title: 'Ready? Let\u2019s go!', desc: 'Patterns grow harder as you level up!', final: true}
];
var mmWizardStep = 0;

function mmRenderWizardStep() {
var s = MM_WIZARD_STEPS[mmWizardStep];
var dotsHtml = '';
for (var i = 0; i < MM_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="mm-wizard-dot' + (i === mmWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Start' : 'Next';
var card = document.getElementById('mm-wizard-card');
card.innerHTML =
'<div class="mm-wizard-icon">' + s.icon + '</div>' +
'<div class="mm-wizard-title">' + s.title + '</div>' +
'<div class="mm-wizard-desc">' + s.desc + '</div>' +
'<div class="mm-wizard-dots">' + dotsHtml + '</div>' +
'<button class="mm-wizard-btn" id="mm-wizard-next">' + btnLabel + '</button>';
card.style.animation = 'none';
void card.offsetWidth;
card.style.animation = 'mmWizardEnter 0.3s ease-out';
document.getElementById('mm-wizard-next').addEventListener('click', mmAdvanceWizard);
}

function mmAdvanceWizard() {
if (mmWizardStep < MM_WIZARD_STEPS.length - 1) {
mmWizardStep++;
mmRenderWizardStep();
} else {
mmStartGame();
}
}

window.mmShowWizard = function() {
mmWizardStep = 0;
showScreen('wizard');
mmRenderWizardStep();
};

/* ---- Start ---- */
function mmStartGame() {
 window.scrollTo({ top: 0, behavior: 'instant' });
 enterMobileGameMode();
 state.score = 0;
 state.level = 1;
 state.streak = 0;
 state.bestStreak = 0;
 state.correctAnswers = 0;
 state.wrongAnswers = 0;
 state.roundsInLevel = 0;
 state.pattern = [];
 state.selectedCells = [];
 runHistory.clear();

 showScreen('playing');
 GK.renderChallengeBar('mm-playing', challenge);
 updateHeader();
 generatePattern();
}

/* ---- Update Header ---- */
function updateHeader() {
 document.getElementById('mm-score').textContent = state.score.toLocaleString();
 document.getElementById('mm-level').textContent = state.level;
 document.getElementById('mm-streak').textContent = state.streak;
 if (challenge.active) GK.updateChallengeBar('mm-playing', state.score, challenge.score);
}

/* ---- Generate Pattern ---- */
function generatePattern() {
 var config = getLevelConfig(state.level);
 var totalCells = config.gridSize * config.gridSize;
 var newPattern = [];

 while (newPattern.length < config.patternSize) {
 var cell = Math.floor(Math.random() * totalCells);
 if (newPattern.indexOf(cell) === -1) {
 newPattern.push(cell);
 }
 }

 state.pattern = newPattern;
 state.selectedCells = [];
 state.showingIndex = 0;
 state.phase = 'showing';

 buildGrid(config);
 updateProgressBar(config);
 updatePhase(config);
 updateActions(config);
 startShowingPattern(config);
}

/* ---- Build Grid ---- */
function buildGrid(config) {
 var grid = document.getElementById('mm-grid');
 var cellSize = config.gridSize <= 3 ? 72 : config.gridSize <= 4 ? 62 : config.gridSize <= 5 ? 52 : 44;
 var gapSize = config.gridSize <= 4 ? 6 : 5;
 var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
 if (viewportWidth < 360) {
 var maxCellSize = Math.floor((viewportWidth - 40 - (config.gridSize - 1) * gapSize) / config.gridSize);
 if (maxCellSize < cellSize) cellSize = maxCellSize;
 }
 var totalSize = config.gridSize * cellSize + (config.gridSize - 1) * gapSize;

 grid.style.gridTemplateColumns = 'repeat(' + config.gridSize + ', ' + cellSize + 'px)';
 grid.style.gridTemplateRows = 'repeat(' + config.gridSize + ', ' + cellSize + 'px)';
 grid.style.gap = gapSize + 'px';
 grid.style.width = totalSize + 'px';
 grid.innerHTML = '';

 var totalCells = config.gridSize * config.gridSize;
 for (var i = 0; i < totalCells; i++) {
 var cell = document.createElement('button');
 cell.className = 'mm-cell';
 cell.setAttribute('data-index', i);
 cell.setAttribute('type', 'button');
 (function(idx) {
 cell.addEventListener('click', function() { handleCellClick(idx); });
 })(i);
 grid.appendChild(cell);
 }
}

/* ---- Show Pattern Sequentially ---- */
function startShowingPattern(config) {
 var delay = config.displayTime / state.pattern.length;
 state.showingIndex = 0;

 function showNext() {
 if (state.screen !== 'playing') return;
 if (state.showingIndex < state.pattern.length) {
 // Clear previous highlights
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var j = 0; j < cells.length; j++) {
 cells[j].classList.remove('showing');
 }
 // Highlight current cell
 var idx = state.pattern[state.showingIndex];
 var targetCell = document.querySelector('#mm-grid .mm-cell[data-index="' + idx + '"]');
 if (targetCell) {
 targetCell.classList.add('showing');
 }
 state.showingIndex++;
 state.showTimer = setTimeout(showNext, delay);
 } else {
 // All shown, brief pause then switch to recall
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var j = 0; j < cells.length; j++) {
 cells[j].classList.remove('showing');
 }
 state.showTimer = setTimeout(function() {
 state.phase = 'recall';
 state.answerTime = Date.now();
 enableRecallMode(config);
 updatePhase(config);
 updateActions(config);
 }, 400);
 }
 }

 showNext();
}

/* ---- Enable Recall Mode ---- */
function enableRecallMode(config) {
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var i = 0; i < cells.length; i++) {
 cells[i].classList.add('recall-mode');
 }
}

/* ---- Handle Cell Click ---- */
function handleCellClick(cellIndex) {
 if (state.phase !== 'recall') return;

 var existingIdx = state.selectedCells.indexOf(cellIndex);
 if (existingIdx !== -1) {
 // Deselect
 state.selectedCells.splice(existingIdx, 1);
 } else if (state.selectedCells.length < state.pattern.length) {
 state.selectedCells.push(cellIndex);
 }

 var config = getLevelConfig(state.level);
 updateCellVisuals();
 updatePhase(config);
 updateActions(config);
}

/* ---- Update Cell Visuals ---- */
function updateCellVisuals() {
 var config = getLevelConfig(state.level);
 var cells = document.querySelectorAll('#mm-grid .mm-cell');

 for (var i = 0; i < cells.length; i++) {
 var idx = parseInt(cells[i].getAttribute('data-index'), 10);
 cells[i].classList.remove('selected');
 cells[i].textContent = '';

 if (state.selectedCells.indexOf(idx) !== -1) {
 cells[i].classList.add('selected');
 if (config.orderMatters) {
 cells[i].textContent = String(state.selectedCells.indexOf(idx) + 1);
 cells[i].style.color = '#fff';
 }
 } else {
 cells[i].style.color = 'transparent';
 }
 }
}

/* ---- Update Phase Indicator ---- */
function updatePhase(config) {
 var phaseEl = document.getElementById('mm-phase');
 if (state.phase === 'showing') {
 phaseEl.innerHTML = '<span class="mm-phase-memorize">Memorize the pattern...</span>';
 } else if (state.phase === 'recall') {
 var orderNote = config.orderMatters ? ' (order matters!)' : '';
 phaseEl.innerHTML = '<span class="mm-phase-recall">Tap the cells!' + orderNote + ', ' + state.selectedCells.length + '/' + state.pattern.length + ' selected</span>';
 }
}

/* ---- Update Actions ---- */
function updateActions(config) {
 var actionsEl = document.getElementById('mm-actions');
 if (state.phase !== 'recall') {
 actionsEl.innerHTML = '';
 return;
 }

 var clearDisabled = state.selectedCells.length === 0 ? ' disabled' : '';
 var submitDisabled = state.selectedCells.length !== state.pattern.length ? ' disabled' : '';

 actionsEl.innerHTML =
 '<button class="mm-btn mm-btn-outline" onclick="mmClearSelection()"' + clearDisabled + '>Clear</button>' +
 '<button class="mm-btn mm-btn-submit" onclick="mmSubmitAnswer()"' + submitDisabled + '>Submit (' + state.selectedCells.length + '/' + state.pattern.length + ')</button>';
}

/* ---- Update Progress Bar ---- */
function updateProgressBar(config) {
 var pct = (state.roundsInLevel / config.roundsPerLevel) * 100;
 document.getElementById('mm-progress-fill').style.width = pct + '%';
 document.getElementById('mm-progress-text').textContent =
 'Round ' + (state.roundsInLevel + 1) + ' of ' + config.roundsPerLevel;
}

/* ---- Clear Selection ---- */
window.mmClearSelection = function() {
 state.selectedCells = [];
 updateCellVisuals();
 updateActions(getLevelConfig(state.level));
 updatePhase(getLevelConfig(state.level));
};

function formatCellList(cells) {
if (!cells || !cells.length) return 'none';
var out = [];
for (var i = 0; i < cells.length; i++) out.push(String(cells[i] + 1));
return out.join(', ');
}

function recordMemoryHistory(correct, config) {
var html = '<strong>' + runHistory.escape(config.orderMatters ? 'Order matters' : 'Any order') + '</strong>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(formatCellList(state.selectedCells)) + '</div>';
html += '<div class="gk-runtime-history-sub">Correct: ' + runHistory.escape(formatCellList(state.pattern)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ---- Submit Answer ---- */
window.mmSubmitAnswer = function() {
 if (state.phase !== 'recall') return;
 var config = getLevelConfig(state.level);
 var responseTime = Date.now() - state.answerTime;

 var correct;
 if (config.orderMatters) {
 correct = true;
 for (var i = 0; i < state.pattern.length; i++) {
 if (state.selectedCells[i] !== state.pattern[i]) {
 correct = false;
 break;
 }
 }
 } else {
 correct = state.selectedCells.length === state.pattern.length;
 if (correct) {
 for (var i = 0; i < state.pattern.length; i++) {
 if (state.selectedCells.indexOf(state.pattern[i]) === -1) {
 correct = false;
 break;
 }
 }
 }
 }

 recordMemoryHistory(correct, config);

 // Calculate points
 var pointsEarned = 0;
 if (correct) {
 pointsEarned = POINTS_PER_CORRECT;
 if (responseTime < SPEED_BONUS_THRESHOLD) {
 pointsEarned += Math.floor((SPEED_BONUS_THRESHOLD - responseTime) / 10);
 }
 pointsEarned += Math.floor(state.streak * STREAK_MULTIPLIER * POINTS_PER_CORRECT);
 state.score += pointsEarned;
 state.streak++;
 state.correctAnswers++;
 if (state.streak > state.bestStreak) {
 state.bestStreak = state.streak;
 }
 } else {
 state.streak = 0;
 state.wrongAnswers++;
 }

 updateHeader();
 showFeedback(correct, config);
};

/* ---- Show Feedback ---- */
function showFeedback(correct, config) {
 state.phase = 'feedback';

 var phaseEl = document.getElementById('mm-phase');
 if (correct) {
 phaseEl.innerHTML = '<span class="mm-phase-correct">Correct!</span>';
 } else {
 phaseEl.innerHTML = '<span class="mm-phase-wrong">Not quite...</span>';
 }

 // Update cell visuals to show correct/wrong
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var i = 0; i < cells.length; i++) {
 var idx = parseInt(cells[i].getAttribute('data-index'), 10);
 cells[i].classList.remove('showing', 'selected', 'recall-mode');
 cells[i].style.color = 'transparent';
 cells[i].textContent = '';

 var inPattern = state.pattern.indexOf(idx) !== -1;
 var wasSelected = state.selectedCells.indexOf(idx) !== -1;

 if (inPattern && wasSelected) {
 cells[i].classList.add('fb-correct');
 } else if (inPattern && !wasSelected) {
 cells[i].classList.add('fb-missed');
 } else if (!inPattern && wasSelected) {
 cells[i].classList.add('fb-wrong');
 } else {
 cells[i].classList.add('fb-neutral');
 }
 }

 // Hide action buttons during feedback
 document.getElementById('mm-actions').innerHTML = '';

 state.feedbackTimer = setTimeout(function() {
 advanceRound(config);
 }, 1200);
}

/* ---- Advance Round ---- */
function advanceRound(config) {
 state.roundsInLevel++;

 if (state.roundsInLevel >= config.roundsPerLevel) {
 if (state.level >= config.maxLevel) {
 endGame();
 return;
 }
 state.level++;
 state.roundsInLevel = 0;
 updateHeader();
 }

 generatePattern();
}

/* ---- Celebration effects ---- */
function mmShowConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'mm-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'mm-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'mm-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function mmAnimateScoreCountUp(el, target) {
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(target * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

/* ---- End Game ---- */
function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

function endGame() {
exitMobileGameMode();
 var totalAnswers = state.correctAnswers + state.wrongAnswers;
 var accuracy = totalAnswers > 0 ? Math.round((state.correctAnswers / totalAnswers) * 100) : 0;
 var isNewBest = saveResult(state.score, state.level, accuracy);

 var titleEl = document.querySelector('#mm-complete .mm-title');
 var iconWrap = document.querySelector('#mm-complete .mm-icon-wrap');
 var bestBadge = document.getElementById('mm-new-best-badge');

 if (isNewBest) {
 mmShowConfetti();
 titleEl.textContent = 'AMAZING!';
 iconWrap.innerHTML = '<span style="font-size:2.25rem">\uD83C\uDF89</span>';
 bestBadge.className = 'mm-new-best-enhanced';
 bestBadge.innerHTML = '\uD83C\uDF1F AMAZING! New Best!';
 bestBadge.style.display = 'inline-block';
 } else {
 titleEl.textContent = 'Good Job!';
 iconWrap.innerHTML = '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>';
 bestBadge.className = 'mm-new-best';
 bestBadge.style.display = 'none';
 }

 GK.renderChallengeResult('mm-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

 showScreen('complete');

 var scoreEl = document.getElementById('mm-final-score');
 document.getElementById('mm-final-level').textContent = state.level;
 document.getElementById('mm-final-accuracy').textContent = accuracy + '%';
 document.getElementById('mm-final-streak').textContent = state.bestStreak;

 mmAnimateScoreCountUp(scoreEl, state.score);
}

/* ---- Again ---- */
window.mmPlayAgain = function() {
 clearTimeout(state.showTimer);
 clearTimeout(state.feedbackTimer);
 clearInterval(state.countdownTimer);
 updateInstructionsBest();
 showScreen('instructions');
};

/* ---- Init ---- */
updateInstructionsBest();
GK.renderChallengeBanner('mm-challenge-banner-wrap', challenge);


document.getElementById('mm-close-btn').addEventListener('click', function() {
updateInstructionsBest();
showScreen('instructions');
});

document.getElementById('mm-finish-btn').addEventListener('click', function() {
 endGame();
});

document.getElementById('mm-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('mm-share-btn').addEventListener('click', function() {
 GK.shareResult(state.score, 'Memory Matrix', '/games/memory-matrix/', 'mm-share-copied');
});
})();
</script>

### Number Crunch - Brain Training Game
URL: https://guruka.com/games/number-crunch/
Description: Solve timed arithmetic.

<style>
#number-crunch-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #number-crunch-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#nc-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.nc-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#nc-instructions.nc-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#nc-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#nc-instructions.nc-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #nc-instructions.nc-subtitle {
color: var(--color-dark-text-secondary);
}

#nc-instructions.nc-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #nc-instructions.nc-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#nc-instructions.nc-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#nc-instructions.nc-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#nc-instructions.nc-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.nc-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.nc-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.nc-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.nc-btn-primary:hover {
background: var(--color-primary-hover);
}

.nc-btn-primary:active {
transform: scale(0.97);
}

.nc-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.nc-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"].nc-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#nc-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#nc-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: nc-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #nc-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes nc-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.nc-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.nc-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.nc-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].nc-wizard-desc {
color: var(--color-dark-text-secondary);
}
.nc-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.nc-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.nc-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].nc-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"].nc-wizard-dot.active {
background: var(--color-primary);
}
.nc-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.nc-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#nc-wizard-card {
padding: 1.5rem 1rem;
}
.nc-wizard-icon {
font-size: 2rem;
}
.nc-wizard-title {
font-size: 1.1rem;
}
.nc-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#nc-playing {
display: none;
flex: 1;
flex-direction: column;
}

.nc-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].nc-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-stat {
text-align: center;
}

.nc-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"].nc-stat-label {
color: var(--color-dark-text-secondary);
}

.nc-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.nc-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.nc-level-text {
font-weight: 600;
}

.nc-modifier-badge {
background: #6366f1;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.nc-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].nc-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.nc-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"].nc-timer-bar {
background: var(--color-dark-bg-secondary);
}

.nc-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.nc-timer-fill.nc-timer-warning {
background: #ef4444;
}

/* ── Equation Display ── */
.nc-equation-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
position: relative;
}

.nc-rule-modifier {
background: rgba(99,102,241,0.1);
color: #6366f1;
padding: 0.4rem 1rem;
border-radius: 2rem;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1rem;
display: none;
}

[data-theme="dark"].nc-rule-modifier {
background: rgba(99,102,241,0.2);
color: #818cf8;
}

.nc-equation {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
animation: nc-eq-enter 0.2s ease-out;
text-align: center;
}

@keyframes nc-eq-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.nc-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.nc-feedback-flash.nc-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.nc-feedback-flash.nc-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.nc-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.nc-feedback-icon.nc-show-check {
animation: nc-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.nc-feedback-icon.nc-show-x {
animation: nc-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes nc-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Answer Buttons ── */
.nc-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.nc-answer-btn {
padding: 1rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.25rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
}

[data-theme="dark"].nc-answer-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.nc-answer-btn:active {
transform: scale(0.95);
}

.nc-answer-btn:hover {
border-color: var(--color-primary);
background: rgba(99,102,241,0.05);
}

[data-theme="dark"].nc-answer-btn:hover {
background: rgba(99,102,241,0.15);
}

.nc-answer-btn.nc-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.nc-answer-btn.nc-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.nc-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-playing-hint {
color: var(--color-dark-text-secondary);
}

#number-crunch-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary);
border-radius: 0.5rem;
background: var(--color-bg-primary);
color: var(--color-primary);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#number-crunch-game .gk-finish-btn:hover {
background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] #number-crunch-game .gk-finish-btn {
background: var(--color-dark-bg-secondary);
color: #fbbf24;
border-color: #fbbf24;
}

/* ── Pause Overlay ── */
#nc-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#nc-pause-overlay.nc-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#nc-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.nc-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: nc-modal-enter 0.3s ease-out;
}

[data-theme="dark"].nc-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes nc-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.nc-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.nc-complete-card.nc-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.nc-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.nc-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: nc-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes nc-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.nc-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.nc-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"].nc-complete-stat {
background: var(--color-dark-bg-secondary);
}

.nc-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.nc-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.nc-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.nc-history-toggle {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.nc-history-toggle:hover {
background: rgba(245, 158, 11, 0.1);
}

.nc-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 240px;
overflow: auto;
border: 1px solid var(--color-border);
border-radius: 0.5rem;
background: var(--color-bg-secondary);
}

[data-theme="dark"] .nc-history-panel {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-history-list {
display: flex;
flex-direction: column;
}

.nc-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border);
font-size: 0.82rem;
}

.nc-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .nc-history-row {
border-color: var(--color-dark-border);
}

.nc-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: baseline;
}

.nc-history-status {
font-weight: 800;
white-space: nowrap;
}

.nc-history-correct .nc-history-status {
color: #16a34a;
}

.nc-history-wrong .nc-history-status {
color: #dc2626;
}

.nc-history-eq {
font-weight: 700;
text-align: right;
}

.nc-history-answer {
margin-top: 0.25rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .nc-history-answer {
color: var(--color-dark-text-secondary);
}

.nc-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary);
text-align: center;
}

.nc-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"].nc-back-link {
color: var(--color-dark-text-secondary);
}

.nc-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.nc-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.nc-level-up-toast.nc-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#number-crunch-game {
padding: 0.5rem;
}
.nc-equation {
font-size: 2rem;
}
.nc-answer-btn {
padding: 0.75rem;
font-size: 1.1rem;
min-height: 48px;
}
.nc-header {
padding: 0.5rem;
gap: 0.25rem;
}
.nc-stat-value {
font-size: 1rem;
}
#nc-instructions { padding: 0.75rem 0.5rem; }
#nc-instructions.nc-icon { font-size: 2rem; margin-bottom: 0; }
#nc-instructions h2 { font-size: 1.3rem; }
#nc-instructions.nc-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#nc-instructions.nc-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#nc-instructions.nc-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.nc-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#number-crunch-game {
padding: 0.75rem;
}
.nc-equation {
font-size: 2.25rem;
}
.nc-answer-btn {
padding: 0.875rem;
}
}
@media (max-width: 360px) {
.nc-equation {
font-size: 1.75rem;
}
.nc-answer-btn {
padding: 0.625rem;
font-size: 1rem;
}
.nc-complete-stats {
grid-template-columns: 1fr 1fr;
}
.nc-final-score {
font-size: 2rem;
}
.nc-header {
padding: 0.375rem;
}
.nc-stat-value {
font-size: 0.9rem;
}
}
@keyframes nc-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.nc-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.nc-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: nc-confetti-fall 2.5s ease-in forwards;
}
.nc-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: nc-glow-fade 1s ease-out forwards;
}
@keyframes nc-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.nc-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: nc-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes nc-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#number-crunch-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#number-crunch-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="number-crunch-game">

<div id="nc-instructions">
<div class="nc-title-row"><span class="nc-icon">&#129518;</span><h2>Number Crunch</h2></div>
<p class="nc-subtitle">Mental arithmetic</p>
<div class="nc-how-to">
<h3>How to Play</h3>
<ol>
<li>Solve the equation.</li>
<li>Pick the answer.</li>
<li>Level 6+: extra steps appear in the equation.</li>


</ol>
</div>
<div id="nc-best-display" class="nc-personal-best" style="display:none;">
Best: <strong id="nc-best-score">0</strong> points
</div>
<button class="nc-btn-primary" id="nc-start-btn">Start</button>
<div id="nc-challenge-banner-wrap"></div>
</div>

<div id="nc-wizard">
<div id="nc-wizard-card"></div>
</div>

<div id="nc-playing">
<div class="nc-header">
<div class="nc-stat">
<div class="nc-stat-label">Score</div>
<div class="nc-stat-value" id="nc-score">0</div>
</div>
<div class="nc-stat">
<div class="nc-stat-label">Streak</div>
<div class="nc-stat-value" id="nc-streak">0</div>
</div>
<div class="nc-stat">
<div class="nc-stat-label">Level</div>
<div class="nc-stat-value" id="nc-level">1</div>
</div>
</div>
<div class="nc-level-info">
<span class="nc-level-text">Level <span id="nc-level-text">1</span></span>
<span class="nc-modifier-badge" id="nc-modifier-badge" style="display:none;">Extra</span>
</div>
<div class="nc-progress-bar">
<div class="nc-progress-fill" id="nc-progress-fill" style="width:0%"></div>
</div>
<div class="nc-timer-bar">
<div class="nc-timer-fill" id="nc-timer-fill" style="width:100%"></div>
</div>
<div class="nc-equation-area">
<div class="nc-feedback-flash" id="nc-feedback-flash"></div>
<div class="nc-feedback-icon" id="nc-feedback-icon"></div>
<div class="nc-rule-modifier" id="nc-rule-modifier"></div>
<div class="nc-equation" id="nc-equation"></div>
</div>
<div class="nc-answers" id="nc-answers">
<button class="nc-answer-btn" id="nc-ans-0"></button>
<button class="nc-answer-btn" id="nc-ans-1"></button>
<button class="nc-answer-btn" id="nc-ans-2"></button>
<button class="nc-answer-btn" id="nc-ans-3"></button>
</div>
<div class="nc-playing-hint"><strong>1-4</strong> answer &middot; Pause anytime</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="nc-pause-btn" type="button">Pause</button>
<button class="gk-finish-btn" id="nc-finish-btn" type="button">Finish</button>
</div>
</div>

<div id="nc-pause-overlay">
<div class="nc-pause-text">Paused</div>
<button class="nc-btn-primary" id="nc-resume-btn">Resume</button>
</div>

<div id="nc-complete-overlay">
<div class="nc-complete-card">
<button class="gk-complete-close" id="nc-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="nc-trophy">&#127942;</div>
<h2>Done!</h2>
<div class="nc-final-score" id="nc-final-score">0</div>
<div id="nc-new-best" class="nc-new-best" style="display:none;">&#11088; New Best!</div>
<div class="gk-challenge-result" id="nc-challenge-result" style="display:none;"></div>
<div class="nc-complete-stats">
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Level</div>
<div class="nc-complete-stat-value" id="nc-final-level">1</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Accuracy</div>
<div class="nc-complete-stat-value" id="nc-final-accuracy">0%</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Streak</div>
<div class="nc-complete-stat-value" id="nc-final-streak">0</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Best</div>
<div class="nc-complete-stat-value" id="nc-final-best">0</div>
</div>
</div>
<div class="nc-complete-actions">
<button class="nc-btn-primary" id="nc-play-again-btn">Again</button>
<button class="gk-runtime-history-toggle" id="nc-history-toggle">Show History</button>
<a href="/games/" class="nc-back-link">&larr; Games</a>
</div>
<div class="gk-runtime-history-panel" id="nc-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="nc-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="nc-share-btn">&#128279; Share</button>
<div class="gk-share-copied" id="nc-share-copied" style="display:none;">Copied!</div>
</div>
</div>
</div>

<div class="nc-level-up-toast" id="nc-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_number-crunch_best';

var challenge = GK.parseChallenge();

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctAnswer: 0,
currentModifier: null,
currentEquation: '',
currentChoices: []
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('nc-instructions');
var elWizard = document.getElementById('nc-wizard');
var elWizardCard = document.getElementById('nc-wizard-card');
var elPlaying = document.getElementById('nc-playing');
var elPauseOverlay = document.getElementById('nc-pause-overlay');
var elCompleteOverlay = document.getElementById('nc-complete-overlay');
var elScore = document.getElementById('nc-score');
var elStreak = document.getElementById('nc-streak');
var elLevel = document.getElementById('nc-level');
var elLevelText = document.getElementById('nc-level-text');
var elModifierBadge = document.getElementById('nc-modifier-badge');
var elProgressFill = document.getElementById('nc-progress-fill');
var elTimerFill = document.getElementById('nc-timer-fill');
var elEquation = document.getElementById('nc-equation');
var elRuleModifier = document.getElementById('nc-rule-modifier');
var elFeedbackFlash = document.getElementById('nc-feedback-flash');
var elFeedbackIcon = document.getElementById('nc-feedback-icon');
var elFinalScore = document.getElementById('nc-final-score');
var elNewBest = document.getElementById('nc-new-best');
var elFinalLevel = document.getElementById('nc-final-level');
var elFinalAccuracy = document.getElementById('nc-final-accuracy');
var elFinalStreak = document.getElementById('nc-final-streak');
var elFinalBest = document.getElementById('nc-final-best');
var elBestDisplay = document.getElementById('nc-best-display');
var elBestScore = document.getElementById('nc-best-score');
var elLevelToast = document.getElementById('nc-level-toast');
var btnStart = document.getElementById('nc-start-btn');
var btnResume = document.getElementById('nc-resume-btn');
var btnPlayAgain = document.getElementById('nc-play-again-btn');
var answerBtns = [
document.getElementById('nc-ans-0'),
document.getElementById('nc-ans-1'),
document.getElementById('nc-ans-2'),
document.getElementById('nc-ans-3')
];

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

/* ── Modifiers ── */
var MODIFIERS = [
{ name: 'Double it', apply: function(n) { return n * 2; } },
{ name: 'Add 10', apply: function(n) { return n + 10; } },
{ name: 'Subtract 5', apply: function(n) { return n - 5; } },
{ name: 'Half it', apply: function(n) { return Math.round(n / 2); } }
];

function shouldHaveModifier(lvl) {
return lvl >= 6;
}

function getModifier(lvl) {
if (lvl >= 17) {
/* Dual modifier: pick two */
var a = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
var b = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
while (b === a) b = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
return {
name: a.name + ', then ' + b.name.toLowerCase(),
apply: function(n) { return b.apply(a.apply(n)); }
};
}
if (lvl >= 13) {
/* Pick from all modifiers */
return MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
}
/* L6-12: simpler modifiers only */
var simple = MODIFIERS.slice(0, 2);
return simple[Math.floor(Math.random() * simple.length)];
}

/* ── Generate equation ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pickOperation(lvl) {
var ops;
if (lvl <= 3) ops = ['+', '-'];
else if (lvl <= 5) ops = ['+', '-', '*'];
else ops = ['+', '-', '*', '/'];
return ops[randInt(0, ops.length - 1)];
}

function operandLimit(lvl) {
if (lvl <= 3) return 50;
if (lvl <= 5) return 80;
if (lvl <= 8) return 120;
if (lvl <= 12) return 220;
if (lvl <= 16) return 360;
return 520;
}

function generateEquation(lvl) {
var op = pickOperation(lvl);
var max = operandLimit(lvl);
var a;
var b;
var answer;
var symbol = op;

if (op === '/') {
b = randInt(2, Math.min(12 + lvl, 24));
answer = randInt(2, Math.min(18 + lvl * 2, 80));
a = answer * b;
symbol = '\u00F7';
} else if (op === '*') {
a = randInt(3, Math.min(12 + Math.floor(lvl / 2), 24));
b = randInt(3, Math.min(12 + Math.floor(lvl / 2), 24));
symbol = '\u00D7';
answer = a * b;
} else {
a = randInt(10, max);
b = randInt(5, Math.max(8, Math.floor(max * 0.65)));
if (op === '-' && b > a) {
var swap = a;
a = b;
b = swap;
}
switch (op) {
case '+':
answer = a + b;
break;
case '-':
answer = a - b;
break;
default:
answer = a + b;
}
}

var display = a + ' ' + symbol + ' ' + b + ' = ?';
var modifier = null;
if (shouldHaveModifier(lvl) && Math.random() < 0.7) {
modifier = getModifier(lvl);
answer = modifier.apply(answer);
}

return { display: display, answer: answer, modifier: modifier };
}

function generateChoices(correct) {
var choices = [correct];
var attempts = 0;
while (choices.length < 4 && attempts < 100) {
var offset = randInt(-10, 10);
attempts++;
if (offset === 0) continue;
var wrong = Math.round(correct + offset);
if (wrong < 0) wrong = Math.abs(wrong);
if (wrong !== correct && choices.indexOf(wrong) === -1) {
choices.push(wrong);
}
}
while (choices.length < 4) {
var fallback = Math.round(correct + choices.length + attempts + 1);
if (fallback < 0) fallback = Math.abs(fallback);
if (fallback !== correct && choices.indexOf(fallback) === -1) choices.push(fallback);
else attempts++;
}
for (var i = choices.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = choices[i];
choices[i] = choices[j];
choices[j] = temp;
}
return choices;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}


var runHistory = createRuntimeHistory('nc-history-toggle', 'nc-history-panel', 'nc-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
list.innerHTML = entries.map(function(entry) {
return '<div class="gk-runtime-history-row ' + (entry.correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong') + '">' +
'<div class="gk-runtime-history-main"><div class="gk-runtime-history-detail">' + entry.html + '</div>' +
'<div class="gk-runtime-history-status">' + (entry.correct ? 'Correct' : 'Wrong') + '</div></div></div>';
}).join('');
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel || !toggle) return;
render();
var open = panel.style.display !== 'none';
panel.style.display = open ? 'none' : '';
toggle.textContent = open ? 'Show History' : 'Hide History';
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

function recordAnswerHistory(selectedValue, correct) {
var selected = selectedValue === null || selectedValue === undefined ? 'No answer' : selectedValue;
var html = '<strong>' + runHistory.escape(state.currentEquation) + '</strong>';
if (state.currentModifier) {
html += '<div class="gk-runtime-history-sub">Rule: ' + runHistory.escape(state.currentModifier.name) + '</div>';
}
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(selected) + ' | Correct: ' + runHistory.escape(state.correctAnswer) + '</div>';
runHistory.pushHtml(correct, html);
}

function renderAnswerHistory() {
runHistory.render();
}

function resetHistoryPanel() {
runHistory.resetPanel();
}
/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
if (shouldHaveModifier(state.level)) {
elModifierBadge.style.display = '';
elModifierBadge.textContent = 'Extra';
} else {
elModifierBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('nc-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('nc-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('nc-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'nc-feedback-flash';
elFeedbackIcon.className = 'nc-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('nc-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('nc-show-check');
} else {
elFeedbackFlash.classList.add('nc-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('nc-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'nc-feedback-flash';
elFeedbackIcon.className = 'nc-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('nc-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('nc-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'nc-correct-flash' : 'nc-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('nc-correct-flash', 'nc-wrong-flash');
}, 400);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var chosenValue = parseInt(answerBtns[chosenIdx].textContent, 10);
var correct = (chosenValue === state.correctAnswer);

state.totalAnswered++;
recordAnswerHistory(chosenValue, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordAnswerHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

var eq = generateEquation(state.level);
state.correctAnswer = eq.answer;
state.currentModifier = eq.modifier;
state.currentEquation = eq.display;

elEquation.textContent = eq.display;
elEquation.style.animation = 'none';
void elEquation.offsetWidth;
elEquation.style.animation = '';

if (eq.modifier) {
elRuleModifier.textContent = eq.modifier.name;
elRuleModifier.style.display = '';
} else {
elRuleModifier.style.display = 'none';
}

var choices = generateChoices(eq.answer);
state.currentChoices = choices.slice();
for (var i = 0; i < 4; i++) {
answerBtns[i].textContent = choices[i];
}

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'nc-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'nc-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'nc-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.nc-trophy');
var title = document.querySelector('#nc-complete-overlay .nc-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'AMAZING!';
elNewBest.className = 'nc-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F AMAZING! New Best!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Good Job!';
elNewBest.className = 'nc-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('nc-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();
renderAnswerHistory();
resetHistoryPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var NC_WIZARD_STEPS = [
{icon: '\uD83E\uDDEE', title: 'Solve', desc: 'Pick the answer.'},
{icon: '\u2728', title: 'Extra steps', desc: 'Level 6+ shows them in the equation.'},
{icon: '\u26A1', title: 'Fast counts', desc: 'Answer before time runs out.', final: true}
];
var ncWizardStep = 0;

function renderWizardStep() {
var s = NC_WIZARD_STEPS[ncWizardStep];
var dotsHtml = '';
for (var i = 0; i < NC_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="nc-wizard-dot' + (i === ncWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Start' : 'Next';
elWizardCard.innerHTML =
'<div class="nc-wizard-icon">' + s.icon + '</div>' +
'<div class="nc-wizard-title">' + s.title + '</div>' +
'<div class="nc-wizard-desc">' + s.desc + '</div>' +
'<div class="nc-wizard-dots">' + dotsHtml + '</div>' +
'<button class="nc-wizard-btn" id="nc-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'nc-wizard-enter 0.3s ease-out';
document.getElementById('nc-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ncWizardStep < NC_WIZARD_STEPS.length - 1) {
ncWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ncWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctAnswer = 0;
state.currentModifier = null;
state.currentEquation = '';
state.currentChoices = [];
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('nc-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('nc-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});


for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('nc-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('nc-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('nc-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('nc-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Number Crunch', '/games/number-crunch/', 'nc-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
var answerIndex = -1;
if (e.key >= '1' && e.key <= '4') {
answerIndex = parseInt(e.key, 10) - 1;
} else if (e.code) {
var keyMatch = e.code.match(/^(?:Digit|Numpad)([1-4])$/);
if (keyMatch) answerIndex = parseInt(keyMatch[1], 10) - 1;
}
if (answerIndex >= 0) {
e.preventDefault();
processAnswer(answerIndex);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('nc-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Pattern Path - Brain Training Game
URL: https://guruka.com/games/pattern-path/
Description: Complete visual patterns.

<style>
#pattern-path-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #pattern-path-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#pp-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.pp-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#pp-instructions .pp-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#pp-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: #14b8a6;
}

#pp-instructions .pp-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #pp-instructions .pp-subtitle {
color: var(--color-dark-text-secondary);
}

#pp-instructions .pp-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #pp-instructions .pp-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#pp-instructions .pp-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: #14b8a6;
}

#pp-instructions .pp-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#pp-instructions .pp-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.pp-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.pp-personal-best strong {
color: #14b8a6;
}

/* ── Buttons ── */
.pp-btn-primary {
background: #14b8a6;
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.pp-btn-primary:hover {
background: #0d9488;
}

.pp-btn-primary:active {
transform: scale(0.97);
}

.pp-btn-secondary {
background: transparent;
color: #14b8a6;
border: 1px solid #14b8a6;
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.pp-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .pp-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#pp-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#pp-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: pp-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #pp-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes pp-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pp-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.pp-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.pp-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .pp-wizard-desc {
color: var(--color-dark-text-secondary);
}
.pp-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.pp-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.pp-wizard-dot.active {
background: #14b8a6;
transform: scale(1.3);
}
[data-theme="dark"] .pp-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .pp-wizard-dot.active {
background: #14b8a6;
}
.pp-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: #14b8a6;
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.pp-wizard-btn:hover {
background: #0d9488;
}
@media (max-width: 400px) {
#pp-wizard-card {
padding: 1.5rem 1rem;
}
.pp-wizard-icon {
font-size: 2rem;
}
.pp-wizard-title {
font-size: 1.1rem;
}
.pp-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#pp-playing {
display: none;
flex: 1;
flex-direction: column;
}

.pp-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .pp-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-stat {
text-align: center;
}

.pp-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .pp-stat-label {
color: var(--color-dark-text-secondary);
}

.pp-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.pp-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.pp-level-text {
font-weight: 600;
}

.pp-difficulty-badge {
background: #14b8a6;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.pp-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .pp-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-progress-fill {
height: 100%;
background: #14b8a6;
border-radius: 3px;
transition: width 0.3s ease;
}

.pp-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .pp-timer-bar {
background: var(--color-dark-bg-secondary);
}

.pp-timer-fill {
height: 100%;
background: #14b8a6;
border-radius: 2px;
transition: width 0.05s linear;
}

.pp-timer-fill.pp-timer-warning {
background: #ef4444;
}

/* ── Pattern Display Area ── */
.pp-pattern-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
}

.pp-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.pp-feedback-flash.pp-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.pp-feedback-flash.pp-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.pp-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.pp-feedback-icon.pp-show-check {
animation: pp-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.pp-feedback-icon.pp-show-x {
animation: pp-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes pp-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.pp-sequence-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
animation: pp-seq-enter 0.3s ease-out;
}

@keyframes pp-seq-enter {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.pp-seq-element {
width: 70px;
height: 70px;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-primary, #fff);
}

[data-theme="dark"] .pp-seq-element {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-seq-element svg {
display: block;
}

.pp-seq-missing {
border: 2px dashed #14b8a6;
background: rgba(20, 184, 166, 0.05);
font-size: 1.75rem;
font-weight: 700;
color: #14b8a6;
}

[data-theme="dark"] .pp-seq-missing {
background: rgba(20, 184, 166, 0.1);
}

.pp-seq-arrow {
font-size: 1.25rem;
color: var(--color-text-secondary);
flex-shrink: 0;
}

[data-theme="dark"] .pp-seq-arrow {
color: var(--color-dark-text-secondary);
}

/* ── Answer Choice Buttons ── */
.pp-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.pp-answer-btn {
padding: 0.75rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
}

[data-theme="dark"] .pp-answer-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.pp-answer-btn:active {
transform: scale(0.95);
}

.pp-answer-btn:hover {
border-color: #14b8a6;
background: rgba(20, 184, 166, 0.05);
}

[data-theme="dark"] .pp-answer-btn:hover {
background: rgba(20, 184, 166, 0.15);
}

.pp-answer-btn svg {
display: block;
}

.pp-answer-btn.pp-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.pp-answer-btn.pp-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.pp-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#pp-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#pp-pause-overlay .pp-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#pp-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.pp-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: pp-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .pp-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes pp-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.pp-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.pp-complete-card .pp-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.pp-final-score {
font-size: 2.5rem;
font-weight: 800;
color: #14b8a6;
margin: 0.5rem 0;
}

.pp-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: pp-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes pp-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.pp-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.pp-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .pp-complete-stat {
background: var(--color-dark-bg-secondary);
}

.pp-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.pp-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.pp-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.pp-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .pp-back-link {
color: var(--color-dark-text-secondary);
}

.pp-back-link:hover {
color: #14b8a6;
text-decoration: underline;
}

/* ── Level Up Toast ── */
.pp-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #14b8a6;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.pp-level-up-toast.pp-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#pattern-path-game {
padding: 0.5rem;
}
.pp-seq-element {
width: 56px;
height: 56px;
}
.pp-seq-arrow {
font-size: 1rem;
}
.pp-answer-btn {
padding: 0.5rem;
min-height: 64px;
}
.pp-header {
padding: 0.5rem;
gap: 0.25rem;
}
.pp-stat-value {
font-size: 1rem;
}
#pp-instructions { padding: 0.75rem 0.5rem; }
#pp-instructions .pp-icon { font-size: 2rem; margin-bottom: 0; }
#pp-instructions h2 { font-size: 1.3rem; }
#pp-instructions .pp-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#pp-instructions .pp-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#pp-instructions .pp-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.pp-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#pattern-path-game {
padding: 0.75rem;
}
.pp-seq-element {
width: 62px;
height: 62px;
}
.pp-answer-btn {
padding: 0.625rem;
min-height: 72px;
}
}
@media (max-width: 360px) {
.pp-seq-element {
width: 48px;
height: 48px;
}
.pp-seq-arrow {
font-size: 0.85rem;
}
.pp-sequence-row {
gap: 0.3rem;
}
.pp-answer-btn {
padding: 0.4rem;
min-height: 56px;
}
.pp-complete-stats {
grid-template-columns: 1fr 1fr;
}
.pp-final-score {
font-size: 2rem;
}
.pp-header {
padding: 0.375rem;
}
.pp-stat-value {
font-size: 0.9rem;
}
}
@keyframes pp-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.pp-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.pp-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: pp-confetti-fall 2.5s ease-in forwards;
}
.pp-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(20,184,166,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: pp-glow-fade 1s ease-out forwards;
}
@keyframes pp-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.pp-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: pp-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(20,184,166,0.4);
}
@keyframes pp-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#pattern-path-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#pattern-path-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #pattern-path-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#pattern-path-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#pattern-path-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="pattern-path-game">

<div id="pp-instructions">
<div class="pp-title-row"><span class="pp-icon">&#129513;</span><h2>Pattern Path</h2></div>
<p class="pp-subtitle">Pattern recognition</p>
<div class="pp-how-to">
<h3>How to Play</h3>
<ol>
<li>Find the missing shape.</li>
<li>Spot the rule.</li>
<li>Pick the match.</li>


</ol>
</div>
<div id="pp-best-display" class="pp-personal-best" style="display:none;">
Best: <strong id="pp-best-score">0</strong> points
</div>
<button class="pp-btn-primary" id="pp-start-btn">Start</button>
<div id="pp-challenge-banner-wrap"></div>
</div>

<div id="pp-wizard">
<div id="pp-wizard-card"></div>
</div>

<div id="pp-playing">
<div class="pp-header">
<div class="pp-stat">
<div class="pp-stat-label">Score</div>
<div class="pp-stat-value" id="pp-score">0</div>
</div>
<div class="pp-stat">
<div class="pp-stat-label">Streak</div>
<div class="pp-stat-value" id="pp-streak">0</div>
</div>
<div class="pp-stat">
<div class="pp-stat-label">Level</div>
<div class="pp-stat-value" id="pp-level">1</div>
</div>
</div>
<div class="pp-level-info">
<span class="pp-level-text">Level <span id="pp-level-text">1</span></span>
<span class="pp-difficulty-badge" id="pp-difficulty-badge">Colors</span>
</div>
<div class="pp-progress-bar">
<div class="pp-progress-fill" id="pp-progress-fill" style="width:0%"></div>
</div>
<div class="pp-timer-bar">
<div class="pp-timer-fill" id="pp-timer-fill" style="width:100%"></div>
</div>
<div class="pp-pattern-area">
<div class="pp-feedback-flash" id="pp-feedback-flash"></div>
<div class="pp-feedback-icon" id="pp-feedback-icon"></div>
<div class="pp-sequence-row" id="pp-sequence-row"></div>
</div>
<div class="pp-answers" id="pp-answers">
<button class="pp-answer-btn" id="pp-ans-0"></button>
<button class="pp-answer-btn" id="pp-ans-1"></button>
<button class="pp-answer-btn" id="pp-ans-2"></button>
<button class="pp-answer-btn" id="pp-ans-3"></button>
</div>
<div class="pp-playing-hint"><strong>1-4</strong> answer &middot; Pause anytime</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="pp-pause-btn" type="button">Pause</button>
<button class="gk-finish-btn" id="pp-finish-btn" type="button">Finish</button>
</div>
</div>

<div id="pp-pause-overlay">
<div class="pp-pause-text">Paused</div>
<button class="pp-btn-primary" id="pp-resume-btn">Resume</button>
</div>

<div id="pp-complete-overlay">
<div class="pp-complete-card">
<button class="gk-complete-close" id="pp-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="pp-trophy">&#127942;</div>
<h2>Done!</h2>
<div class="pp-final-score" id="pp-final-score">0</div>
<div id="pp-new-best" class="pp-new-best" style="display:none;">&#11088; New Best!</div>
<div class="gk-challenge-result" id="pp-challenge-result" style="display:none;"></div>
<div class="pp-complete-stats">
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Level</div>
<div class="pp-complete-stat-value" id="pp-final-level">1</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Accuracy</div>
<div class="pp-complete-stat-value" id="pp-final-accuracy">0%</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Streak</div>
<div class="pp-complete-stat-value" id="pp-final-streak">0</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Best</div>
<div class="pp-complete-stat-value" id="pp-final-best">0</div>
</div>
</div>
<div class="pp-complete-actions">
<button class="pp-btn-primary" id="pp-play-again-btn">Again</button>
<button class="gk-runtime-history-toggle" id="pp-history-toggle" type="button">Show History</button>
<a href="/games/" class="pp-back-link">&larr; Games</a>
</div>
<div class="gk-runtime-history-panel" id="pp-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="pp-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="pp-share-btn">&#128279; Share</button>
<div class="gk-share-copied" id="pp-share-copied" style="display:none;">Copied!</div>
</div>
</div>
</div>

<div class="pp-level-up-toast" id="pp-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_pattern-path_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('pp-history-toggle', 'pp-history-panel', 'pp-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctChoiceIdx: -1,
correctChoice: null,
currentChoices: []
};

/* ── Shape / Color / Size definitions ── */
var SHAPES = ['circle', 'square', 'triangle'];
var COLORS = ['#ef4444', '#3b82f6', '#22c55e', '#eab308', '#a855f7', '#f97316'];
var COLOR_NAMES = { '#ef4444': 'red', '#3b82f6': 'blue', '#22c55e': 'green', '#eab308': 'yellow', '#a855f7': 'purple', '#f97316': 'orange' };
var SIZES = [30, 45, 60];
var SIZE_NAMES = ['small', 'medium', 'large'];
var ROTATIONS = [0, 90, 180, 270];

/* ── DOM refs ── */
var elInstructions = document.getElementById('pp-instructions');
var elWizard = document.getElementById('pp-wizard');
var elWizardCard = document.getElementById('pp-wizard-card');
var elPlaying = document.getElementById('pp-playing');
var elPauseOverlay = document.getElementById('pp-pause-overlay');
var elCompleteOverlay = document.getElementById('pp-complete-overlay');
var elScore = document.getElementById('pp-score');
var elStreak = document.getElementById('pp-streak');
var elLevel = document.getElementById('pp-level');
var elLevelText = document.getElementById('pp-level-text');
var elDifficultyBadge = document.getElementById('pp-difficulty-badge');
var elProgressFill = document.getElementById('pp-progress-fill');
var elTimerFill = document.getElementById('pp-timer-fill');
var elSequenceRow = document.getElementById('pp-sequence-row');
var elFeedbackFlash = document.getElementById('pp-feedback-flash');
var elFeedbackIcon = document.getElementById('pp-feedback-icon');
var elFinalScore = document.getElementById('pp-final-score');
var elNewBest = document.getElementById('pp-new-best');
var elFinalLevel = document.getElementById('pp-final-level');
var elFinalAccuracy = document.getElementById('pp-final-accuracy');
var elFinalStreak = document.getElementById('pp-final-streak');
var elFinalBest = document.getElementById('pp-final-best');
var elBestDisplay = document.getElementById('pp-best-display');
var elBestScore = document.getElementById('pp-best-score');
var elLevelToast = document.getElementById('pp-level-toast');
var btnStart = document.getElementById('pp-start-btn');
var btnResume = document.getElementById('pp-resume-btn');
var btnPlayAgain = document.getElementById('pp-play-again-btn');
var answerBtns = [
document.getElementById('pp-ans-0'),
document.getElementById('pp-ans-1'),
document.getElementById('pp-ans-2'),
document.getElementById('pp-ans-3')
];

/* ── SVG Shape Rendering ── */
function renderShape(shape, color, size, rotation) {
var vb = '0 0 60 60';
var inner = '';
if (shape === 'circle') {
var r = Math.round(size * 25 / 60);
inner = '<circle cx="30" cy="30" r="' + r + '" fill="' + color + '"/>';
} else if (shape === 'square') {
var half = Math.round(size * 50 / 60);
var off = Math.round((60 - half) / 2);
inner = '<rect x="' + off + '" y="' + off + '" width="' + half + '" height="' + half + '" fill="' + color + '" transform="rotate(' + rotation + ' 30 30)"/>';
} else if (shape === 'triangle') {
var h = Math.round(size * 50 / 60);
var topY = 30 - Math.round(h / 2);
var botY = 30 + Math.round(h / 2);
var leftX = 30 - Math.round(h / 2);
var rightX = 30 + Math.round(h / 2);
inner = '<polygon points="30,' + topY + ' ' + rightX + ',' + botY + ' ' + leftX + ',' + botY + '" fill="' + color + '" transform="rotate(' + rotation + ' 30 30)"/>';
}
return '<svg viewBox="' + vb + '" width="' + size + '" height="' + size + '">' + inner + '</svg>';
}

/* ── Level parameters ── */
function getDisplayTime(lvl) {
if (lvl <= 3) return 10000;
if (lvl <= 6) return 8000;
if (lvl <= 9) return 7000;
if (lvl <= 12) return 6000;
if (lvl <= 16) return 5000;
return 4000;
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getSeqLength(lvl) {
if (lvl <= 6) return 3;
if (lvl <= 12) return 4;
return 5;
}

function getDifficultyLabel(lvl) {
if (lvl <= 3) return 'Colors';
if (lvl <= 6) return 'Shapes';
if (lvl <= 9) return 'Color + Shape';
if (lvl <= 12) return 'Rotation';
if (lvl <= 16) return 'Size + Count';
return 'Multi-Attribute';
}

/* ── Utility ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pick(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
return arr;
}

function cloneEl(el) {
return { shape: el.shape, color: el.color, size: el.size, rotation: el.rotation };
}

function elEquals(a, b) {
return a.shape === b.shape && a.color === b.color && a.size === b.size && a.rotation === b.rotation;
}

function indexOfValue(arr, value) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === value) return i;
}
return -1;
}

function getVisualRotation(shape, rotation) {
return shape === 'triangle' ? rotation : 0;
}

function getVisualIndexes(el) {
if (!el) return null;
var rotation = getVisualRotation(el.shape, el.rotation);
var idx = [
indexOfValue(SHAPES, el.shape),
indexOfValue(COLORS, el.color),
indexOfValue(SIZES, el.size),
indexOfValue(ROTATIONS, rotation)
];
for (var i = 0; i < idx.length; i++) {
if (idx[i] < 0) return null;
}
return idx;
}

function visuallyEquals(a, b) {
var ai = getVisualIndexes(a);
var bi = getVisualIndexes(b);
return !!ai && !!bi &&
ai[0] === bi[0] &&
ai[1] === bi[1] &&
ai[2] === bi[2] &&
ai[3] === bi[3];
}

function createChoiceSeenMatrix() {
var seen = [];
for (var s = 0; s < SHAPES.length; s++) {
seen[s] = [];
for (var c = 0; c < COLORS.length; c++) {
seen[s][c] = [];
for (var z = 0; z < SIZES.length; z++) {
seen[s][c][z] = [];
for (var r = 0; r < ROTATIONS.length; r++) {
seen[s][c][z][r] = false;
}
}
}
}
return seen;
}

function markChoiceSeen(seen, el) {
var idx = getVisualIndexes(el);
if (!idx) return false;
if (seen[idx[0]][idx[1]][idx[2]][idx[3]]) return false;
seen[idx[0]][idx[1]][idx[2]][idx[3]] = true;
return true;
}

/* ── Pattern Generation ── */
function generatePattern(lvl) {
var seqLen = getSeqLength(lvl);
var sequence = [];
var correct;

if (lvl <= 3) {
/* Single attribute: color changes in sequence */
var colorSeq = shuffle(COLORS.slice()).slice(0, seqLen + 1);
var baseShape = pick(SHAPES);
var baseSize = 45;
for (var i = 0; i <= seqLen; i++) {
sequence.push({ shape: baseShape, color: colorSeq[i % colorSeq.length], size: baseSize, rotation: 0 });
}
correct = sequence.pop();

} else if (lvl <= 6) {
/* Shape patterns: circle -> square -> triangle -> ... */
var baseColor = pick(COLORS);
var baseSize2 = 45;
for (var i = 0; i <= seqLen; i++) {
sequence.push({ shape: SHAPES[i % SHAPES.length], color: baseColor, size: baseSize2, rotation: 0 });
}
correct = sequence.pop();

} else if (lvl <= 9) {
/* 2-attribute: color + shape both change */
var colorPool = shuffle(COLORS.slice());
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorPool[i % colorPool.length],
size: 45,
rotation: 0
});
}
correct = sequence.pop();

} else if (lvl <= 12) {
/* Rotation patterns: shapes rotate 0 -> 90 -> 180 -> 270 */
var baseShape3 = 'triangle';
var baseColor3 = pick(COLORS);
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: baseShape3,
color: baseColor3,
size: 45,
rotation: ROTATIONS[i % ROTATIONS.length]
});
}
correct = sequence.pop();

} else if (lvl <= 16) {
/* Size + shape changes */
var colorBase = pick(COLORS);
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorBase,
size: SIZES[i % SIZES.length],
rotation: 0
});
}
correct = sequence.pop();

} else {
/* L17-20: 3 attributes changing (shape + color + size) */
var colorPool2 = shuffle(COLORS.slice());
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorPool2[i % colorPool2.length],
size: SIZES[i % SIZES.length],
rotation: ROTATIONS[i % ROTATIONS.length]
});
}
correct = sequence.pop();
}

return { sequence: sequence, correct: correct };
}

function buildChoiceCandidates(correct, lvl) {
var shapes = [correct.shape];
var colors = [correct.color];
var sizes = [correct.size];
var rotations = [correct.rotation];

if (lvl <= 3) {
colors = COLORS.slice();
} else if (lvl <= 6) {
shapes = SHAPES.slice();
colors = COLORS.slice();
} else if (lvl <= 9) {
shapes = SHAPES.slice();
colors = COLORS.slice();
} else if (lvl <= 12) {
rotations = ROTATIONS.slice();
} else if (lvl <= 16) {
shapes = SHAPES.slice();
sizes = SIZES.slice();
} else {
shapes = SHAPES.slice();
colors = COLORS.slice();
sizes = SIZES.slice();
rotations = ROTATIONS.slice();
}

var candidates = [];
for (var s = 0; s < shapes.length; s++) {
for (var c = 0; c < colors.length; c++) {
for (var z = 0; z < sizes.length; z++) {
for (var r = 0; r < rotations.length; r++) {
candidates.push({
shape: shapes[s],
color: colors[c],
size: sizes[z],
rotation: rotations[r]
});
}
}
}
}
return candidates;
}

function addUniqueChoice(choices, seen, candidate) {
if (!markChoiceSeen(seen, candidate)) return false;
choices.push(cloneEl(candidate));
return true;
}

function generateChoices(correct, lvl) {
var choices = [];
var seen = createChoiceSeenMatrix();
addUniqueChoice(choices, seen, correct);
var candidates = shuffle(buildChoiceCandidates(correct, lvl));

for (var i = 0; i < candidates.length && choices.length < 4; i++) {
addUniqueChoice(choices, seen, candidates[i]);
}

if (choices.length < 4) {
var fallback = shuffle(buildChoiceCandidates(correct, MAX_LEVEL));
for (var j = 0; j < fallback.length && choices.length < 4; j++) {
addUniqueChoice(choices, seen, fallback[j]);
}
}

return shuffle(choices);
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
elDifficultyBadge.textContent = getDifficultyLabel(state.level);
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('pp-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('pp-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('pp-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'pp-feedback-flash';
elFeedbackIcon.className = 'pp-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('pp-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('pp-show-check');
} else {
elFeedbackFlash.classList.add('pp-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('pp-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'pp-feedback-flash';
elFeedbackIcon.className = 'pp-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('pp-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('pp-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'pp-correct-flash' : 'pp-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('pp-correct-flash', 'pp-wrong-flash');
}, 400);
}

/* ── Render sequence display ── */
function renderSequence(sequence) {
var html = '';
for (var i = 0; i < sequence.length; i++) {
var el = sequence[i];
html += '<div class="pp-seq-element">';
html += renderShape(el.shape, el.color, el.size, el.rotation);
html += '</div>';
if (i < sequence.length) {
html += '<div class="pp-seq-arrow">\u2192</div>';
}
}
/* Missing element placeholder */
html += '<div class="pp-seq-element pp-seq-missing">?</div>';
elSequenceRow.innerHTML = html;
}

/* ── Render choice buttons ── */
function renderChoices(choices) {
for (var i = 0; i < 4; i++) {
var el = choices[i];
answerBtns[i].innerHTML = renderShape(el.shape, el.color, el.size, el.rotation);
}
}

function recordPatternHistory(selectedChoice, correct) {
var html = '<strong>Missing shape</strong>';
html += '<div class="gk-runtime-history-sub">Your: ' + (selectedChoice ? renderShape(selectedChoice.shape, selectedChoice.color, selectedChoice.size, selectedChoice.rotation) : 'No answer') + ' | Correct: ' + renderShape(state.correctChoice.shape, state.correctChoice.color, state.correctChoice.size, state.correctChoice.rotation) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var selectedChoice = state.currentChoices[chosenIdx];
var correct = selectedChoice ? visuallyEquals(selectedChoice, state.correctChoice) : false;

state.totalAnswered++;
recordPatternHistory(selectedChoice, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 2000) {
points += Math.floor((2000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordPatternHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

var pattern = generatePattern(state.level);
var choices = generateChoices(pattern.correct, state.level);

/* Find correct choice index */
state.correctChoice = cloneEl(pattern.correct);
state.currentChoices = choices.map(cloneEl);
state.correctChoiceIdx = -1;
for (var i = 0; i < choices.length; i++) {
if (visuallyEquals(choices[i], state.correctChoice)) {
state.correctChoiceIdx = i;
break;
}
}

renderSequence(pattern.sequence);
renderChoices(choices);

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#14b8a6','#ef4444','#22c55e','#3b82f6','#a855f7','#f97316'];
var container = document.createElement('div');
container.className = 'pp-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'pp-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'pp-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.pp-trophy');
var title = document.querySelector('#pp-complete-overlay .pp-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'AMAZING!';
elNewBest.className = 'pp-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F AMAZING! New Best!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Good Job!';
elNewBest.className = 'pp-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('pp-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var PP_WIZARD_STEPS = [
{icon: '\uD83E\uDDE9', title: 'Spot the pattern', desc: 'Find the missing shape.'},
{icon: '\uD83C\uDFA8', title: 'Attributes change', desc: 'Rules can use color, shape, size, or rotation.'},
{icon: '\u26A1', title: 'Fast counts', desc: 'Pick before time runs out.', final: true}
];
var ppWizardStep = 0;

function renderWizardStep() {
var s = PP_WIZARD_STEPS[ppWizardStep];
var dotsHtml = '';
for (var i = 0; i < PP_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="pp-wizard-dot' + (i === ppWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Start' : 'Next';
elWizardCard.innerHTML =
'<div class="pp-wizard-icon">' + s.icon + '</div>' +
'<div class="pp-wizard-title">' + s.title + '</div>' +
'<div class="pp-wizard-desc">' + s.desc + '</div>' +
'<div class="pp-wizard-dots">' + dotsHtml + '</div>' +
'<button class="pp-wizard-btn" id="pp-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'pp-wizard-enter 0.3s ease-out';
document.getElementById('pp-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ppWizardStep < PP_WIZARD_STEPS.length - 1) {
ppWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ppWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctChoiceIdx = -1;
state.correctChoice = null;
state.currentChoices = [];
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('pp-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('pp-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('pp-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('pp-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('pp-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('pp-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Pattern Path', '/games/pattern-path/', 'pp-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key >= '1' && e.key <= '4') {
e.preventDefault();
processAnswer(parseInt(e.key, 10) - 1);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('pp-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Quick Sort - Brain Training Game
URL: https://guruka.com/games/quick-sort/
Description: Sort items as rules change.

<style>
#quick-sort-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #quick-sort-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#qs-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.qs-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#qs-instructions .qs-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#qs-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: #f97316;
}

#qs-instructions .qs-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #qs-instructions .qs-subtitle {
color: var(--color-dark-text-secondary);
}

#qs-instructions .qs-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #qs-instructions .qs-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#qs-instructions .qs-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: #f97316;
}

#qs-instructions .qs-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#qs-instructions .qs-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.qs-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.qs-personal-best strong {
color: #f97316;
}

/* ── Buttons ── */
.qs-btn-primary {
background: #f97316;
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.qs-btn-primary:hover {
background: #ea580c;
}

.qs-btn-primary:active {
transform: scale(0.97);
}

.qs-btn-secondary {
background: transparent;
color: #f97316;
border: 1px solid #f97316;
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.qs-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .qs-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#qs-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#qs-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: qs-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #qs-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes qs-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.qs-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.qs-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.qs-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .qs-wizard-desc {
color: var(--color-dark-text-secondary);
}
.qs-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.qs-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.qs-wizard-dot.active {
background: #f97316;
transform: scale(1.3);
}
[data-theme="dark"] .qs-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .qs-wizard-dot.active {
background: #f97316;
}
.qs-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: #f97316;
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.qs-wizard-btn:hover {
background: #ea580c;
}
@media (max-width: 400px) {
#qs-wizard-card {
padding: 1.5rem 1rem;
}
.qs-wizard-icon {
font-size: 2rem;
}
.qs-wizard-title {
font-size: 1.1rem;
}
.qs-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#qs-playing {
display: none;
flex: 1;
flex-direction: column;
}

.qs-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .qs-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.qs-stat {
text-align: center;
}

.qs-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .qs-stat-label {
color: var(--color-dark-text-secondary);
}

.qs-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.qs-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.qs-level-text {
font-weight: 600;
}

.qs-rule-change-badge {
background: #f97316;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.qs-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .qs-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.qs-progress-fill {
height: 100%;
background: #f97316;
border-radius: 3px;
transition: width 0.3s ease;
}

.qs-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .qs-timer-bar {
background: var(--color-dark-bg-secondary);
}

.qs-timer-fill {
height: 100%;
background: #f97316;
border-radius: 2px;
transition: width 0.05s linear;
}

.qs-timer-fill.qs-timer-warning {
background: #ef4444;
}

/* ── Rule Indicator ── */
.qs-rule-indicator {
background: #f97316;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
text-align: center;
margin-bottom: 1rem;
letter-spacing: 0.02em;
}

/* ── Stimulus Area ── */
.qs-stimulus-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 160px;
position: relative;
}

.qs-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.qs-feedback-flash.qs-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.qs-feedback-flash.qs-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.qs-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.qs-feedback-icon.qs-show-check {
animation: qs-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.qs-feedback-icon.qs-show-x {
animation: qs-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes qs-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.qs-stimulus {
font-size: 3rem;
font-weight: 700;
line-height: 1.2;
animation: qs-stim-enter 0.2s ease-out;
text-align: center;
}

@keyframes qs-stim-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

/* ── Sort Buttons (Left / Right) ── */
.qs-sort-buttons {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.qs-sort-btn {
flex: 1;
padding: 1.1rem 0.75rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}

[data-theme="dark"] .qs-sort-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.qs-sort-btn:active {
transform: scale(0.95);
}

.qs-btn-left {
border-left: 4px solid #f97316;
}

.qs-btn-left:hover {
border-color: #f97316;
background: rgba(249,115,22,0.05);
}

[data-theme="dark"] .qs-btn-left:hover {
background: rgba(249,115,22,0.15);
}

.qs-btn-right {
border-right: 4px solid #f97316;
}

.qs-btn-right:hover {
border-color: #f97316;
background: rgba(249,115,22,0.05);
}

[data-theme="dark"] .qs-btn-right:hover {
background: rgba(249,115,22,0.15);
}

.qs-sort-btn .qs-arrow {
font-size: 1.3rem;
opacity: 0.6;
}

.qs-sort-btn .qs-label {
font-size: 1rem;
}

.qs-sort-btn.qs-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.qs-sort-btn.qs-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.qs-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#qs-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#qs-pause-overlay .qs-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#qs-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.qs-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: qs-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .qs-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes qs-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.qs-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.qs-complete-card .qs-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.qs-final-score {
font-size: 2.5rem;
font-weight: 800;
color: #f97316;
margin: 0.5rem 0;
}

.qs-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: qs-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes qs-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.qs-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.qs-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .qs-complete-stat {
background: var(--color-dark-bg-secondary);
}

.qs-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.qs-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.qs-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.qs-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .qs-back-link {
color: var(--color-dark-text-secondary);
}

.qs-back-link:hover {
color: #f97316;
text-decoration: underline;
}

/* ── Level Up Toast ── */
.qs-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #f97316;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.qs-level-up-toast.qs-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Rule Change Toast ── */
.qs-rule-toast {
position: fixed;
top: 4.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #7c3aed;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 0.95rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.qs-rule-toast.qs-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#quick-sort-game {
padding: 0.5rem;
}
.qs-stimulus {
font-size: 2.5rem;
}
.qs-sort-btn {
padding: 0.85rem 0.5rem;
font-size: 1rem;
min-height: 52px;
}
.qs-sort-btn .qs-label {
font-size: 0.9rem;
}
.qs-header {
padding: 0.5rem;
gap: 0.25rem;
}
.qs-stat-value {
font-size: 1rem;
}
.qs-rule-indicator {
font-size: 0.85rem;
padding: 0.4rem 0.75rem;
}
#qs-instructions { padding: 0.75rem 0.5rem; }
#qs-instructions .qs-icon { font-size: 2rem; margin-bottom: 0; }
#qs-instructions h2 { font-size: 1.3rem; }
#qs-instructions .qs-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#qs-instructions .qs-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#qs-instructions .qs-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.qs-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#quick-sort-game {
padding: 0.75rem;
}
.qs-stimulus {
font-size: 2.75rem;
}
.qs-sort-btn {
padding: 1rem 0.5rem;
}
}
@media (max-width: 360px) {
.qs-stimulus {
font-size: 2rem;
}
.qs-sort-btn {
padding: 0.7rem 0.4rem;
font-size: 0.9rem;
min-height: 48px;
}
.qs-sort-btn .qs-label {
font-size: 0.8rem;
}
.qs-sort-btn .qs-arrow {
font-size: 1.1rem;
}
.qs-complete-stats {
grid-template-columns: 1fr 1fr;
}
.qs-final-score {
font-size: 2rem;
}
.qs-header {
padding: 0.375rem;
}
.qs-stat-value {
font-size: 0.9rem;
}
}
@keyframes qs-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.qs-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.qs-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: qs-confetti-fall 2.5s ease-in forwards;
}
.qs-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(249,115,22,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: qs-glow-fade 1s ease-out forwards;
}
@keyframes qs-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.qs-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: qs-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(249,115,22,0.4);
}
@keyframes qs-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#quick-sort-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#quick-sort-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #quick-sort-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#quick-sort-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#quick-sort-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="quick-sort-game">

<div id="qs-instructions">
<div class="qs-title-row"><span class="qs-icon">&#128450;</span><h2>Quick Sort</h2></div>
<p class="qs-subtitle">Fast sorting</p>
<div class="qs-how-to">
<h3>How to Play</h3>
<ol>
<li>An item appears.</li>
<li>Choose left or right.</li>
<li>Sort it.</li>
<li>Rules change.</li>

</ol>
</div>
<div id="qs-best-display" class="qs-personal-best" style="display:none;">
Best: <strong id="qs-best-score">0</strong> points
</div>
<button class="qs-btn-primary" id="qs-start-btn">Start</button>
<div id="qs-challenge-banner-wrap"></div>
</div>

<div id="qs-wizard">
<div id="qs-wizard-card"></div>
</div>

<div id="qs-playing">
<div class="qs-header">
<div class="qs-stat">
<div class="qs-stat-label">Score</div>
<div class="qs-stat-value" id="qs-score">0</div>
</div>
<div class="qs-stat">
<div class="qs-stat-label">Streak</div>
<div class="qs-stat-value" id="qs-streak">0</div>
</div>
<div class="qs-stat">
<div class="qs-stat-label">Level</div>
<div class="qs-stat-value" id="qs-level">1</div>
</div>
</div>
<div class="qs-level-info">
<span class="qs-level-text">Level <span id="qs-level-text">1</span></span>
<span class="qs-rule-change-badge" id="qs-rule-badge" style="display:none;">Rule Change</span>
</div>
<div class="qs-progress-bar">
<div class="qs-progress-fill" id="qs-progress-fill" style="width:0%"></div>
</div>
<div class="qs-timer-bar">
<div class="qs-timer-fill" id="qs-timer-fill" style="width:100%"></div>
</div>
<div class="qs-rule-indicator" id="qs-rule-indicator">Sort: Even / Odd</div>
<div class="qs-stimulus-area">
<div class="qs-feedback-flash" id="qs-feedback-flash"></div>
<div class="qs-feedback-icon" id="qs-feedback-icon"></div>
<div class="qs-stimulus" id="qs-stimulus"></div>
</div>
<div class="qs-sort-buttons">
<button class="qs-sort-btn qs-btn-left" id="qs-btn-left">
<span class="qs-arrow">1</span>
<span class="qs-label" id="qs-label-left">Even</span>
</button>
<button class="qs-sort-btn qs-btn-right" id="qs-btn-right">
<span class="qs-label" id="qs-label-right">Odd</span>
<span class="qs-arrow">2</span>
</button>
</div>
<div class="qs-playing-hint"><strong>1</strong> left &middot; <strong>2</strong> right &middot; Pause anytime</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="qs-pause-btn" type="button">Pause</button>
<button class="gk-finish-btn" id="qs-finish-btn" type="button">Finish</button>
</div>
</div>

<div id="qs-pause-overlay">
<div class="qs-pause-text">Paused</div>
<button class="qs-btn-primary" id="qs-resume-btn">Resume</button>
</div>

<div id="qs-complete-overlay">
<div class="qs-complete-card">
<button class="gk-complete-close" id="qs-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="qs-trophy">&#127942;</div>
<h2>Done!</h2>
<div class="qs-final-score" id="qs-final-score">0</div>
<div id="qs-new-best" class="qs-new-best" style="display:none;">&#11088; New Best!</div>
<div class="gk-challenge-result" id="qs-challenge-result" style="display:none;"></div>
<div class="qs-complete-stats">
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Level</div>
<div class="qs-complete-stat-value" id="qs-final-level">1</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Accuracy</div>
<div class="qs-complete-stat-value" id="qs-final-accuracy">0%</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Streak</div>
<div class="qs-complete-stat-value" id="qs-final-streak">0</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Best</div>
<div class="qs-complete-stat-value" id="qs-final-best">0</div>
</div>
</div>
<div class="qs-complete-actions">
<button class="qs-btn-primary" id="qs-play-again-btn">Again</button>
<button class="gk-runtime-history-toggle" id="qs-history-toggle" type="button">Show History</button>
<a href="/games/" class="qs-back-link">&larr; Games</a>
</div>
<div class="gk-runtime-history-panel" id="qs-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="qs-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="qs-share-btn">&#128279; Share</button>
<div class="gk-share-copied" id="qs-share-copied" style="display:none;">Copied!</div>
</div>
</div>
</div>

<div class="qs-level-up-toast" id="qs-level-toast">Level Up!</div>
<div class="qs-rule-toast" id="qs-rule-toast">New Rule!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_quick-sort_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('qs-history-toggle', 'qs-history-panel', 'qs-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
roundInRule: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctSide: null,
currentRule: null,
currentStimulus: null,
ruleIndex: 0
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('qs-instructions');
var elWizard = document.getElementById('qs-wizard');
var elWizardCard = document.getElementById('qs-wizard-card');
var elPlaying = document.getElementById('qs-playing');
var elPauseOverlay = document.getElementById('qs-pause-overlay');
var elCompleteOverlay = document.getElementById('qs-complete-overlay');
var elScore = document.getElementById('qs-score');
var elStreak = document.getElementById('qs-streak');
var elLevel = document.getElementById('qs-level');
var elLevelText = document.getElementById('qs-level-text');
var elRuleBadge = document.getElementById('qs-rule-badge');
var elProgressFill = document.getElementById('qs-progress-fill');
var elTimerFill = document.getElementById('qs-timer-fill');
var elRuleIndicator = document.getElementById('qs-rule-indicator');
var elStimulus = document.getElementById('qs-stimulus');
var elFeedbackFlash = document.getElementById('qs-feedback-flash');
var elFeedbackIcon = document.getElementById('qs-feedback-icon');
var elLabelLeft = document.getElementById('qs-label-left');
var elLabelRight = document.getElementById('qs-label-right');
var elBtnLeft = document.getElementById('qs-btn-left');
var elBtnRight = document.getElementById('qs-btn-right');
var elFinalScore = document.getElementById('qs-final-score');
var elNewBest = document.getElementById('qs-new-best');
var elFinalLevel = document.getElementById('qs-final-level');
var elFinalAccuracy = document.getElementById('qs-final-accuracy');
var elFinalStreak = document.getElementById('qs-final-streak');
var elFinalBest = document.getElementById('qs-final-best');
var elBestDisplay = document.getElementById('qs-best-display');
var elBestScore = document.getElementById('qs-best-score');
var elLevelToast = document.getElementById('qs-level-toast');
var elRuleToast = document.getElementById('qs-rule-toast');
var btnStart = document.getElementById('qs-start-btn');
var btnResume = document.getElementById('qs-resume-btn');
var btnPlayAgain = document.getElementById('qs-play-again-btn');

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getRuleChangeInterval(lvl) {
if (lvl <= 6) return 999;
if (lvl <= 9) return 4;
if (lvl <= 12) return 3;
if (lvl <= 16) return 3;
return 2;
}

/* ── Helpers ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pick(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
return arr;
}

/* ── Rule definitions ── */
var SHAPES = ['Circle', 'Square', 'Triangle'];
var FRUITS = ['Apple', 'Banana', 'Cherry'];
var NOT_FRUITS = ['Car', 'Book', 'Desk'];
var ALL_WORDS = FRUITS.concat(NOT_FRUITS);

function ruleEvenOdd() {
return {
name: 'Even / Odd',
leftLabel: 'Even',
rightLabel: 'Odd',
generate: function() {
var n = randInt(1, 50);
return {
display: String(n),
correctSide: (n % 2 === 0) ? 'left' : 'right'
};
}
};
}

function ruleBigSmall() {
return {
name: 'Big / Small',
leftLabel: 'Big (\u226550)',
rightLabel: 'Small (<50)',
generate: function() {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n >= 50) ? 'left' : 'right'
};
}
};
}

function ruleShapeOrNot() {
return {
name: 'Shape / Not Shape',
leftLabel: 'Shape',
rightLabel: 'Not Shape',
generate: function() {
var isShape = Math.random() < 0.5;
var item;
if (isShape) {
item = pick(SHAPES);
} else {
item = String(randInt(1, 100));
}
return {
display: item,
correctSide: isShape ? 'left' : 'right'
};
}
};
}

function ruleFruitOrNot() {
return {
name: 'Fruit / Not Fruit',
leftLabel: 'Fruit',
rightLabel: 'Not Fruit',
generate: function() {
var item = pick(ALL_WORDS);
var isFruit = FRUITS.indexOf(item) !== -1;
return {
display: item,
correctSide: isFruit ? 'left' : 'right'
};
}
};
}

function ruleCompoundEvenBig() {
return {
name: 'Even AND Big / Other',
leftLabel: 'Even+Big',
rightLabel: 'Other',
generate: function() {
var n = randInt(1, 100);
var isEvenAndBig = (n % 2 === 0) && (n >= 50);
return {
display: String(n),
correctSide: isEvenAndBig ? 'left' : 'right'
};
}
};
}

function ruleCompoundOddSmall() {
return {
name: 'Odd AND Small / Other',
leftLabel: 'Odd+Small',
rightLabel: 'Other',
generate: function() {
var n = randInt(1, 100);
var isOddAndSmall = (n % 2 !== 0) && (n < 50);
return {
display: String(n),
correctSide: isOddAndSmall ? 'left' : 'right'
};
}
};
}

function ruleCompoundFruitBig() {
return {
name: 'Fruit OR Big / Other',
leftLabel: 'Fruit/Big',
rightLabel: 'Other',
generate: function() {
var useWord = Math.random() < 0.4;
if (useWord) {
var item = pick(ALL_WORDS);
var isFruit = FRUITS.indexOf(item) !== -1;
return {
display: item,
correctSide: isFruit ? 'left' : 'right'
};
} else {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n >= 50) ? 'left' : 'right'
};
}
}
};
}

function ruleCompoundShapeEven() {
return {
name: 'Shape OR Even / Other',
leftLabel: 'Shape/Even',
rightLabel: 'Other',
generate: function() {
var useShape = Math.random() < 0.35;
if (useShape) {
var isShape = Math.random() < 0.5;
var item = isShape ? pick(SHAPES) : String(randInt(1, 50) * 2 - 1);
return {
display: item,
correctSide: isShape ? 'left' : 'right'
};
} else {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n % 2 === 0) ? 'left' : 'right'
};
}
}
};
}

/* ── Get available rules for level ── */
function getRulesForLevel(lvl) {
if (lvl <= 3) {
return [ruleEvenOdd];
} else if (lvl <= 6) {
return [ruleBigSmall];
} else if (lvl <= 9) {
return [ruleEvenOdd, ruleBigSmall];
} else if (lvl <= 12) {
return [ruleShapeOrNot, ruleEvenOdd];
} else if (lvl <= 16) {
return [ruleFruitOrNot, ruleEvenOdd, ruleBigSmall];
} else {
return [ruleCompoundEvenBig, ruleCompoundOddSmall, ruleCompoundFruitBig, ruleCompoundShapeEven];
}
}

function pickNewRule(lvl, prevRuleName) {
var factories = getRulesForLevel(lvl);
if (factories.length === 1) {
return factories[0]();
}
var attempts = 0;
var rule;
do {
rule = pick(factories)();
attempts++;
} while (rule.name === prevRuleName && attempts < 10);
return rule;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
var rulesForLevel = getRulesForLevel(state.level);
if (rulesForLevel.length > 1) {
elRuleBadge.style.display = '';
elRuleBadge.textContent = 'Rules Alternate';
} else {
elRuleBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('qs-playing', state.score, challenge.score);
}

/* ── Update rule display ── */
function updateRuleDisplay() {
if (!state.currentRule) return;
elRuleIndicator.textContent = 'Sort: ' + state.currentRule.name;
elLabelLeft.textContent = state.currentRule.leftLabel;
elLabelRight.textContent = state.currentRule.rightLabel;
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('qs-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('qs-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'qs-feedback-flash';
elFeedbackIcon.className = 'qs-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('qs-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('qs-show-check');
} else {
elFeedbackFlash.classList.add('qs-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('qs-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'qs-feedback-flash';
elFeedbackIcon.className = 'qs-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('qs-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('qs-toast-show');
}, 1500);
}

/* ── Show rule-change toast ── */
function showRuleToast(ruleName) {
elRuleToast.textContent = 'New Rule: ' + ruleName;
elRuleToast.classList.add('qs-toast-show');
setTimeout(function() {
elRuleToast.classList.remove('qs-toast-show');
}, 1800);
}

/* ── Flash sort button ── */
function flashSortBtn(side, correct) {
var btn = side === 'left' ? elBtnLeft : elBtnRight;
btn.classList.add(correct ? 'qs-correct-flash' : 'qs-wrong-flash');
setTimeout(function() {
btn.classList.remove('qs-correct-flash', 'qs-wrong-flash');
}, 400);
}

function sortSideLabel(side) {
if (!state.currentRule) return side || 'No answer';
if (side === 'left') return state.currentRule.leftLabel;
if (side === 'right') return state.currentRule.rightLabel;
return 'No answer';
}

function recordSortHistory(chosenSide, correct) {
var html = '<strong>' + runHistory.escape(state.currentRule ? state.currentRule.name : 'Sort rule') + '</strong>';
html += '<div class="gk-runtime-history-sub">Item: ' + runHistory.escape(state.currentStimulus) + '</div>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(sortSideLabel(chosenSide)) + ' | Correct: ' + runHistory.escape(sortSideLabel(state.correctSide)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenSide) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var correct = (chosenSide === state.correctSide);

state.totalAnswered++;
recordSortHistory(chosenSide, correct);
flashSortBtn(chosenSide, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundInRule = 0;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordSortHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundInRule = 0;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.roundInRule++;
state.answered = false;

/* Check if rule should change mid-level */
var ruleInterval = getRuleChangeInterval(state.level);
if (state.roundInRule > ruleInterval && getRulesForLevel(state.level).length > 1) {
state.roundInRule = 1;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showRuleToast(state.currentRule.name);
}

/* Generate stimulus */
var item = state.currentRule.generate();
state.correctSide = item.correctSide;
state.currentStimulus = item.display;

elStimulus.textContent = item.display;
elStimulus.style.animation = 'none';
void elStimulus.offsetWidth;
elStimulus.style.animation = '';

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'qs-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'qs-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'qs-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.qs-trophy');
var title = document.querySelector('#qs-complete-overlay .qs-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'AMAZING!';
elNewBest.className = 'qs-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F AMAZING! New Best!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Good Job!';
elNewBest.className = 'qs-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('qs-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var QS_WIZARD_STEPS = [
{icon: '\uD83D\uDCC2', title: 'Sort items fast', desc: 'Choose left or right.'},
{icon: '\uD83D\uDD00', title: 'Rules change!', desc: 'Rules switch every few rounds.'},
{icon: '\u26A1', title: 'Fast counts', desc: 'Answer before time runs out.', final: true}
];
var qsWizardStep = 0;

function renderWizardStep() {
var s = QS_WIZARD_STEPS[qsWizardStep];
var dotsHtml = '';
for (var i = 0; i < QS_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="qs-wizard-dot' + (i === qsWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Start' : 'Next';
elWizardCard.innerHTML =
'<div class="qs-wizard-icon">' + s.icon + '</div>' +
'<div class="qs-wizard-title">' + s.title + '</div>' +
'<div class="qs-wizard-desc">' + s.desc + '</div>' +
'<div class="qs-wizard-dots">' + dotsHtml + '</div>' +
'<button class="qs-wizard-btn" id="qs-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'qs-wizard-enter 0.3s ease-out';
document.getElementById('qs-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (qsWizardStep < QS_WIZARD_STEPS.length - 1) {
qsWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
qsWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.roundInRule = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctSide = null;
state.currentRule = null;
state.currentStimulus = null;
state.ruleIndex = 0;
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
state.currentRule = pickNewRule(state.level, null);
state.roundInRule = 0;
updateRuleDisplay();
showScreen('playing');
GK.renderChallengeBar('qs-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('qs-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

elBtnLeft.addEventListener('click', function() {
processAnswer('left');
});

elBtnRight.addEventListener('click', function() {
processAnswer('right');
});

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('qs-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('qs-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('qs-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('qs-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Quick Sort', '/games/quick-sort/', 'qs-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key === '1') {
e.preventDefault();
processAnswer('left');
} else if (e.key === '2') {
e.preventDefault();
processAnswer('right');
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('qs-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Sequence Recall - Brain Training Game
URL: https://guruka.com/games/sequence-recall/
Description: Repeat color sequences.

<style>
#sequence-recall-game {
max-width: 600px;
margin: 0 auto;
padding: 1.5rem 1rem 3rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary, #1a2332);
-webkit-tap-highlight-color: transparent;
}

#sequence-recall-game * {
box-sizing: border-box;
}

#sequence-recall-game .sr-card {
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

[data-theme="dark"] #sequence-recall-game .sr-card {
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

#sequence-recall-game .sr-title {
font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 1.75rem;
font-weight: 700;
text-align: center;
margin: 0 0 0.25rem;
letter-spacing: -0.025em;
}

#sequence-recall-game .sr-subtitle {
text-align: center;
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.95rem;
margin: 0 0 1.5rem;
}

#sequence-recall-game .sr-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#sequence-recall-game .sr-icon {
display: flex;
justify-content: center;
margin-bottom: 0;
font-size: 2rem;
}

#sequence-recall-game .sr-instructions-list {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
}

#sequence-recall-game .sr-instructions-list li {
padding: 0.5rem 0;
padding-left: 1.75rem;
position: relative;
font-size: 0.95rem;
color: var(--color-text-primary, #1a2332);
line-height: 1.5;
}

#sequence-recall-game .sr-instructions-list li::before {
content: attr(data-num);
position: absolute;
left: 0;
top: 0.5rem;
width: 1.25rem;
height: 1.25rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 50%;
font-size: 0.7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}

#sequence-recall-game .sr-best-score {
text-align: center;
padding: 0.75rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
margin-bottom: 1.25rem;
font-size: 0.9rem;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-best-score strong {
color: var(--color-text-primary, #1a2332);
font-weight: 700;
}

#sequence-recall-game .sr-btn-primary {
display: block;
width: 100%;
padding: 0.875rem 1.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.5rem;
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
text-align: center;
text-decoration: none;
}

#sequence-recall-game .sr-btn-primary:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#sequence-recall-game .sr-btn-primary:active {
transform: translateY(0);
}

#sequence-recall-game .sr-btn-secondary {
display: inline-block;
margin-top: 0.75rem;
padding: 0.5rem 1rem;
background: transparent;
color: var(--color-primary, #0f9072);
border: 1px solid var(--color-primary, #0f9072);
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
text-align: center;
}

#sequence-recall-game .sr-btn-secondary:hover {
background: color-mix(in srgb, var(--color-primary, #0f9072) 10%, transparent);
}

/* Wizard overlay */
#sequence-recall-game .sr-wizard-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#sequence-recall-game .sr-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sr-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-card {
background: var(--color-dark-bg-primary, #1e293b);
color: var(--color-dark-text-primary, #e2e8f0);
}
@keyframes sr-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
#sequence-recall-game .sr-wizard-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
#sequence-recall-game .sr-wizard-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
#sequence-recall-game .sr-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary, #4b5b6d);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-desc {
color: var(--color-dark-text-secondary, #94a3b8);
}
#sequence-recall-game .sr-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
#sequence-recall-game .sr-wizard-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
#sequence-recall-game .sr-wizard-dot.active {
background: var(--color-primary, #0f9072);
transform: scale(1.3);
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-dot.active {
background: var(--color-primary, #0f9072);
}
#sequence-recall-game .sr-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary, #0f9072);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
#sequence-recall-game .sr-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#sequence-recall-game .sr-wizard-card { padding: 1.5rem 1rem; }
#sequence-recall-game .sr-wizard-icon { font-size: 2rem; }
#sequence-recall-game .sr-wizard-title { font-size: 1.1rem; }
#sequence-recall-game .sr-wizard-desc { font-size: 0.85rem; }
#sequence-recall-game .sr-icon { font-size: 1.5rem; margin-bottom: 0; }
#sequence-recall-game .sr-title { font-size: 1.3rem; }
#sequence-recall-game .sr-subtitle { font-size: 0.85rem; margin-bottom: 1rem; }
#sequence-recall-game .sr-instructions-list li { font-size: 0.85rem; padding: 0.3rem 0; }
}

/* Header bar */
#sequence-recall-game .sr-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 0.85rem;
font-weight: 600;
}

#sequence-recall-game .sr-header-item {
text-align: center;
line-height: 1.3;
}

#sequence-recall-game .sr-header-label {
display: block;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary, #4b5b6d);
font-weight: 500;
}

#sequence-recall-game .sr-header-value {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text-primary, #1a2332);
}

#sequence-recall-game .sr-header-value.sr-streak {
color: #f59e0b;
}

/* Phase indicator */
#sequence-recall-game .sr-phase-label {
text-align: center;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-primary, #0f9072);
margin-bottom: 0.75rem;
}

/* Progress bar */
#sequence-recall-game .sr-progress {
margin-top: 1rem;
}

#sequence-recall-game .sr-progress-label {
text-align: center;
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.35rem;
}

#sequence-recall-game .sr-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 3px;
overflow: hidden;
}

#sequence-recall-game .sr-progress-fill {
height: 100%;
background: var(--color-primary, #0f9072);
border-radius: 3px;
transition: width 0.3s ease;
}

/* Color display area */
#sequence-recall-game .sr-color-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 220px;
padding: 1rem;
}

#sequence-recall-game .sr-color-box {
width: 160px;
height: 160px;
border-radius: 1rem;
animation: sr-color-appear 0.3s ease-out;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

@keyframes sr-color-appear {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .sr-color-counter {
margin-top: 1rem;
font-size: 1rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}

/* Recall area */
#sequence-recall-game .sr-recall-area {
padding: 0.5rem 0;
}

#sequence-recall-game .sr-selected-sequence {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 44px;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
flex-wrap: wrap;
}

#sequence-recall-game .sr-selected-dot {
width: 28px;
height: 28px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
animation: sr-dot-appear 0.2s ease-out;
flex-shrink: 0;
}

@keyframes sr-dot-appear {
0% { transform: scale(0); }
100% { transform: scale(1); }
}

#sequence-recall-game .sr-selected-placeholder {
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-color-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
margin-bottom: 0.75rem;
}

#sequence-recall-game .sr-color-btn {
aspect-ratio: 1;
border: 3px solid transparent;
border-radius: 0.75rem;
cursor: pointer;
transition: all 0.15s ease;
min-height: 70px;
position: relative;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

#sequence-recall-game .sr-color-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#sequence-recall-game .sr-color-btn:active {
transform: scale(0.95);
}

#sequence-recall-game .sr-color-btn .sr-btn-label {
position: absolute;
bottom: 6px;
left: 0;
right: 0;
text-align: center;
font-size: 0.65rem;
font-weight: 600;
color: rgba(255,255,255,0.9);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#sequence-recall-game .sr-undo-row {
display: flex;
gap: 0.5rem;
}

#sequence-recall-game .sr-undo-btn {
flex: 1;
padding: 0.6rem;
border: 1px solid var(--color-border, #dfe4ea);
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
border-radius: 0.5rem;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-undo-btn:hover {
background: var(--color-bg-secondary, #f0f4f8);
}

#sequence-recall-game .sr-submit-btn {
flex: 2;
padding: 0.6rem;
border: none;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-submit-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}

#sequence-recall-game .sr-submit-btn:not(:disabled):hover {
opacity: 0.9;
}

/* Distraction (math) */
#sequence-recall-game .sr-math-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
padding: 1rem;
}

#sequence-recall-game .sr-math-problem {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
font-family: "Space Grotesk", system-ui, sans-serif;
color: var(--color-text-primary, #1a2332);
}

#sequence-recall-game .sr-math-input-row {
display: flex;
gap: 0.5rem;
align-items: center;
}

#sequence-recall-game .sr-math-input {
width: 100px;
padding: 0.6rem 0.75rem;
border: 2px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
font-size: 1.25rem;
text-align: center;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
outline: none;
}

#sequence-recall-game .sr-math-input:focus {
border-color: var(--color-primary, #0f9072);
}

#sequence-recall-game .sr-math-submit {
padding: 0.6rem 1.25rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-math-submit:hover {
opacity: 0.9;
}

#sequence-recall-game .sr-math-hint {
margin-top: 0.75rem;
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
}

/* Positions grid */
#sequence-recall-game .sr-position-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 260px;
padding: 1rem;
}

#sequence-recall-game .sr-position-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
width: 210px;
}

#sequence-recall-game .sr-position-cell {
width: 64px;
height: 64px;
background: var(--color-bg-secondary, #f0f4f8);
border: 2px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
color: transparent;
}

#sequence-recall-game .sr-position-cell:hover {
border-color: var(--color-primary, #0f9072);
}

#sequence-recall-game .sr-position-cell.sr-pos-active {
background: var(--color-primary, #0f9072);
border-color: var(--color-primary, #0f9072);
color: #fff;
}

#sequence-recall-game .sr-position-cell.sr-pos-highlight {
background: var(--color-primary, #0f9072);
border-color: var(--color-primary, #0f9072);
animation: sr-pos-flash 0.4s ease-out;
}

@keyframes sr-pos-flash {
0% { transform: scale(0.8); opacity: 0.5; }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .sr-position-counter {
margin-top: 0.75rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}

/* Feedback overlay */
#sequence-recall-game .sr-feedback {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
animation: sr-feedback-appear 0.3s ease-out;
}

#sequence-recall-game .sr-feedback-correct {
font-size: 1.5rem;
font-weight: 700;
color: #22c55e;
}

#sequence-recall-game .sr-feedback-wrong {
font-size: 1.5rem;
font-weight: 700;
color: #ef4444;
}

#sequence-recall-game .sr-feedback-points {
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text-secondary, #4b5b6d);
margin-top: 0.25rem;
}

@keyframes sr-feedback-appear {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

/* Game complete */
#sequence-recall-game .sr-complete {
position: relative;
text-align: center;
}

#sequence-recall-game .sr-complete-icon {
font-size: 3rem;
margin-bottom: 0.5rem;
}

#sequence-recall-game .sr-complete-title {
font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 1.25rem;
}

#sequence-recall-game .sr-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-bottom: 1.25rem;
}

#sequence-recall-game .sr-stat-box {
padding: 0.75rem 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
text-align: center;
}

#sequence-recall-game .sr-stat-value {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-text-primary, #1a2332);
display: block;
}

#sequence-recall-game .sr-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-new-best {
display: inline-block;
padding: 0.35rem 0.75rem;
background: #f59e0b;
color: #1a2332;
border-radius: 1rem;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 1rem;
animation: sr-badge-pulse 1s ease-in-out infinite alternate;
}

@keyframes sr-badge-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

#sequence-recall-game .sr-complete-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
margin-top: 0.5rem;
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

/* Hide all screens by default */
#sequence-recall-game .sr-screen {
display: none;
}

#sequence-recall-game .sr-screen.sr-active {
display: block;
}

/* Responsive */
@media (max-width: 400px) {
#sequence-recall-game .sr-color-btn {
min-height: 60px;
}
#sequence-recall-game .sr-color-box {
width: 130px;
height: 130px;
}
#sequence-recall-game .sr-position-grid {
width: 180px;
}
#sequence-recall-game .sr-position-cell {
width: 54px;
height: 54px;
}
}
@media (max-width: 640px) {
#sequence-recall-game .sr-color-grid {
gap: 0.5rem;
}
#sequence-recall-game .sr-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 360px) {
#sequence-recall-game .sr-color-btn {
min-height: 50px;
}
#sequence-recall-game .sr-color-box {
width: 110px;
height: 110px;
}
#sequence-recall-game .sr-position-grid {
width: 160px;
}
#sequence-recall-game .sr-position-cell {
width: 48px;
height: 48px;
}
#sequence-recall-game .sr-stats-grid {
grid-template-columns: 1fr 1fr;
}
#sequence-recall-game .sr-selected-dot {
width: 22px;
height: 22px;
}
}
@keyframes sr-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.sr-confetti-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.sr-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: sr-confetti-fall 2.5s ease-in forwards;
}
.sr-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: sr-glow-fade 1s ease-out forwards;
}
@keyframes sr-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.sr-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 1rem;
animation: sr-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes sr-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#sequence-recall-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #sequence-recall-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="sequence-recall-game">

<div id="sr-instructions" class="sr-screen sr-active">
<div class="sr-card">
<div class="sr-title-row"><span class="sr-icon">&#x1F9E0;</span><h1 class="sr-title">Sequence Recall</h1></div>
<p class="sr-subtitle">Working memory</p>
<ul class="sr-instructions-list">
<li data-num="1">Watch the colors</li>
<li data-num="2">Remember the order</li>
<li data-num="3">Repeat the order</li>
<li data-num="4">Progress through 20 levels of increasing difficulty</li>
</ul>
<div class="sr-best-score" id="sr-best-display">
Best: <strong id="sr-best-value">0</strong> points
</div>
<button class="sr-btn-primary" id="sr-start-btn">Start</button>
<div id="sr-challenge-banner-wrap"></div>
</div>
</div>

<div id="sr-wizard" class="sr-screen">
<div class="sr-wizard-overlay">
<div class="sr-wizard-card" id="sr-wizard-card"></div>
</div>
</div>

<div id="sr-playing" class="sr-screen">
<div class="sr-header">
<div class="sr-header-item">
<span class="sr-header-label">Score</span>
<span class="sr-header-value" id="sr-score">0</span>
</div>
<div class="sr-header-item">
<span class="sr-header-label">Level</span>
<span class="sr-header-value" id="sr-level">1</span>
</div>
<div class="sr-header-item">
<span class="sr-header-label">Streak</span>
<span class="sr-header-value sr-streak" id="sr-streak">0</span>
</div>
</div>
<div class="sr-phase-label" id="sr-phase-label">Memorize</div>
<div id="sr-play-area"></div>
<div class="sr-progress">
<div class="sr-progress-label" id="sr-progress-label">Round 1 of 3</div>
<div class="sr-progress-bar">
<div class="sr-progress-fill" id="sr-progress-fill" style="width:0%"></div>
</div>
</div>
<button class="gk-finish-btn" id="sr-finish-btn">Finish</button>
</div>

<div id="sr-complete" class="sr-screen">
<div class="sr-card sr-complete">
<button class="gk-complete-close" id="sr-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="sr-complete-icon">&#x1F3C6;</div>
<h2 class="sr-complete-title">Done!</h2>
<div id="sr-new-best-badge" class="sr-new-best" style="display:none;">New Best!</div>
<div class="gk-challenge-result" id="sr-challenge-result" style="display:none;"></div>
<div class="sr-stats-grid">
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-score">0</span>
<span class="sr-stat-label">Score</span>
</div>
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-level">1</span>
<span class="sr-stat-label">Level</span>
</div>
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-accuracy">0%</span>
<span class="sr-stat-label">Accuracy</span>
</div>
</div>
<div class="sr-complete-links">
<button class="sr-btn-primary" id="sr-play-again-btn">Again</button>
<button class="gk-runtime-history-toggle" id="sr-history-toggle" type="button">Show History</button>
<a href="/games/" class="sr-btn-secondary">All Games</a>
</div>
<div class="gk-runtime-history-panel" id="sr-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="sr-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="sr-share-btn">&#128279; Share</button>
<div class="gk-share-copied" id="sr-share-copied" style="display:none;">Copied!</div>
</div>
</div>
</div>

</div>

<script>
(function() {
var STORAGE_BEST = 'guruka_sequence-recall_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('sr-history-toggle', 'sr-history-panel', 'sr-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var COLORS = [
{ name: 'Red', hsl: 'hsl(0,84%,60%)' },
{ name: 'Blue', hsl: 'hsl(217,91%,60%)' },
{ name: 'Green', hsl: 'hsl(142,76%,36%)' },
{ name: 'Yellow', hsl: 'hsl(48,96%,53%)' },
{ name: 'Purple', hsl: 'hsl(280,68%,55%)' },
{ name: 'Orange', hsl: 'hsl(25,95%,53%)' }
];

var MAX_LEVEL = 20;
var ROUNDS_PER_LEVEL = 3;

var state = {
screen: 'instructions',
level: 1,
round: 0,
score: 0,
streak: 0,
totalCorrect: 0,
totalAttempts: 0,
colorSequence: [],
positionSequence: [],
selectedColors: [],
selectedPositions: [],
currentShowIndex: 0,
phaseStartTime: 0,
showTimer: null,
feedbackTimer: null
};

function getSequenceLength(level) {
return Math.min(3 + Math.floor(level / 3), 8);
}

function hasDistraction(level) {
return level >= 6;
}

function isDualTrack(level) {
return level >= 11;
}

function getDisplayTime(level) {
return Math.max(1200 - (level - 1) * 40, 600);
}

function getBestScore() {
try {
var val = localStorage.getItem(STORAGE_BEST);
return val ? parseInt(val, 10) : 0;
} catch(e) { return 0; }
}

function setBestScore(s) {
try { localStorage.setItem(STORAGE_BEST, String(s)); } catch(e) {}
}

function getHistory() {
return [];
}

function addHistory(entry) {
void entry;
}

function $(id) { return document.getElementById(id); }

function showScreen(name) {
var screens = document.querySelectorAll('#sequence-recall-game .sr-screen');
for (var i = 0; i < screens.length; i++) {
screens[i].classList.remove('sr-active');
}
var el = $('sr-' + name);
if (el) el.classList.add('sr-active');
state.screen = name;
}

function generateColorSequence(len) {
var seq = [];
for (var i = 0; i < len; i++) {
seq.push(Math.floor(Math.random() * COLORS.length));
}
return seq;
}

function generatePositionSequence(len) {
var positions = [];
var used = {};
var count = Math.min(len, 9);
while (positions.length < count) {
var p = Math.floor(Math.random() * 9);
if (!used[p]) {
used[p] = true;
positions.push(p);
}
}
return positions;
}

function generateMathProblem() {
var ops = ['+', '-', '*'];
var op = ops[Math.floor(Math.random() * ops.length)];
var a, b, answer;
if (op === '+') {
a = Math.floor(Math.random() * 50) + 1;
b = Math.floor(Math.random() * 50) + 1;
answer = a + b;
} else if (op === '-') {
a = Math.floor(Math.random() * 50) + 10;
b = Math.floor(Math.random() * a);
answer = a - b;
} else {
a = Math.floor(Math.random() * 12) + 2;
b = Math.floor(Math.random() * 12) + 2;
answer = a * b;
}
var display = op === '*' ? (a + ' \u00D7 ' + b) : (a + ' ' + op + ' ' + b);
return { display: display, answer: answer };
}

function updateHeader() {
$('sr-score').textContent = state.score;
$('sr-level').textContent = state.level;
$('sr-streak').textContent = state.streak;
if (challenge.active) GK.updateChallengeBar('sr-playing', state.score, challenge.score);
}

function updateProgress() {
$('sr-progress-label').textContent = 'Round ' + (state.round + 1) + ' of ' + ROUNDS_PER_LEVEL;
var pct = (state.round / ROUNDS_PER_LEVEL) * 100;
$('sr-progress-fill').style.width = pct + '%';
}

var SR_WIZARD_STEPS = [
{icon: '\uD83C\uDFA8', title: 'Watch the color sequence', desc: 'Watch the colors.'},
{icon: '\uD83E\uDDE0', title: 'Recall them in order', desc: 'Repeat the order.'},
{icon: '\uD83D\uDE80', title: 'Ready? Let\u2019s go!', desc: 'Sequences get longer.', final: true}
];
var srWizardStep = 0;
var srWizardCallback = null;

function srRenderWizardStep() {
var s = SR_WIZARD_STEPS[srWizardStep];
var dotsHtml = '';
for (var i = 0; i < SR_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="sr-wizard-dot' + (i === srWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Start' : 'Next';
var card = $('sr-wizard-card');
card.innerHTML =
'<div class="sr-wizard-icon">' + s.icon + '</div>' +
'<div class="sr-wizard-title">' + s.title + '</div>' +
'<div class="sr-wizard-desc">' + s.desc + '</div>' +
'<div class="sr-wizard-dots">' + dotsHtml + '</div>' +
'<button class="sr-wizard-btn" id="sr-wizard-next">' + btnLabel + '</button>';
card.style.animation = 'none';
void card.offsetWidth;
card.style.animation = 'sr-wizard-enter 0.3s ease-out';
$('sr-wizard-next').addEventListener('click', srAdvanceWizard);
}

function srAdvanceWizard() {
if (srWizardStep < SR_WIZARD_STEPS.length - 1) {
srWizardStep++;
srRenderWizardStep();
} else {
if (srWizardCallback) srWizardCallback();
}
}

function showWizard(callback) {
srWizardStep = 0;
srWizardCallback = callback;
showScreen('wizard');
srRenderWizardStep();
}

function startRound() {
var seqLen = getSequenceLength(state.level);
state.colorSequence = generateColorSequence(seqLen);
state.positionSequence = isDualTrack(state.level) ? generatePositionSequence(Math.min(seqLen, 9)) : [];
state.selectedColors = [];
state.selectedPositions = [];
state.currentShowIndex = 0;

updateHeader();
updateProgress();
showColorSequence();
}

function showColorSequence() {
$('sr-phase-label').textContent = 'Memorize the colors';
state.currentShowIndex = 0;
showNextColor();
}

function showNextColor() {
var area = $('sr-play-area');
if (state.currentShowIndex >= state.colorSequence.length) {
if (isDualTrack(state.level)) {
showPositionSequence();
} else if (hasDistraction(state.level)) {
showDistraction();
} else {
startRecallColors();
}
return;
}

var colorIdx = state.colorSequence[state.currentShowIndex];
var color = COLORS[colorIdx];
var total = state.colorSequence.length;
var current = state.currentShowIndex + 1;

area.innerHTML = '<div class="sr-color-stage">' +
'<div class="sr-color-box" style="background:' + color.hsl + '"></div>' +
'<div class="sr-color-counter">' + current + ' / ' + total + '</div>' +
'</div>';

state.currentShowIndex++;
var dt = getDisplayTime(state.level);
state.showTimer = setTimeout(function() {
showNextColor();
}, dt);
}

function showPositionSequence() {
$('sr-phase-label').textContent = 'Memorize the positions';
state.currentShowIndex = 0;
showNextPosition();
}

function showNextPosition() {
if (state.currentShowIndex >= state.positionSequence.length) {
if (hasDistraction(state.level)) {
showDistraction();
} else {
startRecallColors();
}
return;
}

var pos = state.positionSequence[state.currentShowIndex];
var total = state.positionSequence.length;
var current = state.currentShowIndex + 1;

var html = '<div class="sr-position-stage">';
html += '<div class="sr-position-grid">';
for (var i = 0; i < 9; i++) {
var cls = 'sr-position-cell';
if (i === pos) cls += ' sr-pos-highlight';
html += '<div class="' + cls + '"></div>';
}
html += '</div>';
html += '<div class="sr-position-counter">' + current + ' / ' + total + '</div>';
html += '</div>';

$('sr-play-area').innerHTML = html;

state.currentShowIndex++;
var dt = getDisplayTime(state.level);
state.showTimer = setTimeout(function() {
showNextPosition();
}, dt);
}

function showDistraction() {
$('sr-phase-label').textContent = 'Quick math!';
var problem = generateMathProblem();

var html = '<div class="sr-math-area">';
html += '<div class="sr-math-problem">' + problem.display + ' = ?</div>';
html += '<div class="sr-math-input-row">';
html += '<input type="number" class="sr-math-input" id="sr-math-input" inputmode="numeric" autocomplete="off">';
html += '<button class="sr-math-submit" id="sr-math-btn">Go</button>';
html += '</div>';
html += '<div class="sr-math-hint">Solve to continue</div>';
html += '</div>';

$('sr-play-area').innerHTML = html;

var input = $('sr-math-input');
var btn = $('sr-math-btn');

function submitMath() {
var val = parseInt(input.value, 10);
if (isNaN(val)) return;
startRecallColors();
}

btn.addEventListener('click', submitMath);
input.addEventListener('keydown', function(e) {
if (e.key === 'Enter') submitMath();
});

setTimeout(function() { input.focus(); }, 100);
}

function startRecallColors() {
$('sr-phase-label').textContent = 'Recall the color sequence';
state.selectedColors = [];
state.phaseStartTime = Date.now();
renderRecallColors();
}

function renderRecallColors() {
var needed = state.colorSequence.length;
var html = '<div class="sr-recall-area">';

html += '<div class="sr-selected-sequence" id="sr-selected-seq">';
if (state.selectedColors.length === 0) {
html += '<span class="sr-selected-placeholder">Tap colors in order (' + needed + ' needed)</span>';
} else {
for (var i = 0; i < state.selectedColors.length; i++) {
var c = COLORS[state.selectedColors[i]];
html += '<div class="sr-selected-dot" style="background:' + c.hsl + '"></div>';
}
}
html += '</div>';

html += '<div class="sr-color-grid">';
for (var j = 0; j < COLORS.length; j++) {
html += '<button class="sr-color-btn" data-color="' + j + '" style="background:' + COLORS[j].hsl + '">';
html += '<span class="sr-btn-label">' + COLORS[j].name + '</span>';
html += '</button>';
}
html += '</div>';

html += '<div class="sr-undo-row">';
html += '<button class="sr-undo-btn" id="sr-undo-btn">Undo</button>';
html += '<button class="sr-submit-btn" id="sr-submit-colors-btn"' + (state.selectedColors.length < needed ? ' disabled' : '') + '>Submit</button>';
html += '</div>';

html += '</div>';

$('sr-play-area').innerHTML = html;

var buttons = document.querySelectorAll('#sequence-recall-game .sr-color-btn');
for (var k = 0; k < buttons.length; k++) {
buttons[k].addEventListener('click', function() {
var ci = parseInt(this.getAttribute('data-color'), 10);
if (state.selectedColors.length < needed) {
state.selectedColors.push(ci);
renderRecallColors();
if (state.selectedColors.length === needed) {
setTimeout(function() {
var sb = $('sr-submit-colors-btn');
if (sb) sb.focus();
}, 50);
}
}
});
}

$('sr-undo-btn').addEventListener('click', function() {
if (state.selectedColors.length > 0) {
state.selectedColors.pop();
renderRecallColors();
}
});

var submitBtn = $('sr-submit-colors-btn');
submitBtn.addEventListener('click', function() {
if (state.selectedColors.length === needed) {
submitColorRecall();
}
});
}

function submitColorRecall() {
var responseTime = Date.now() - state.phaseStartTime;
var correct = true;
for (var i = 0; i < state.colorSequence.length; i++) {
if (state.colorSequence[i] !== state.selectedColors[i]) {
correct = false;
break;
}
}

if (isDualTrack(state.level)) {
state._colorCorrect = correct;
state._colorResponseTime = responseTime;
startRecallPositions();
} else {
resolveRound(correct, responseTime);
}
}

function startRecallPositions() {
$('sr-phase-label').textContent = 'Recall the positions in order';
state.selectedPositions = [];
state.phaseStartTime = Date.now();
renderRecallPositions();
}

function renderRecallPositions() {
var needed = state.positionSequence.length;
var html = '<div class="sr-position-stage">';

html += '<div class="sr-selected-sequence">';
if (state.selectedPositions.length === 0) {
html += '<span class="sr-selected-placeholder">Tap grid positions in order (' + needed + ' needed)</span>';
} else {
for (var i = 0; i < state.selectedPositions.length; i++) {
html += '<div class="sr-selected-dot" style="background:var(--color-primary, #0f9072)"></div>';
}
}
html += '</div>';

html += '<div class="sr-position-grid">';
for (var j = 0; j < 9; j++) {
var isSelected = false;
var order = -1;
for (var k = 0; k < state.selectedPositions.length; k++) {
if (state.selectedPositions[k] === j) {
isSelected = true;
order = k + 1;
break;
}
}
var cls = 'sr-position-cell';
if (isSelected) cls += ' sr-pos-active';
html += '<div class="' + cls + '" data-pos="' + j + '">' + (isSelected ? order : '') + '</div>';
}
html += '</div>';

html += '<div class="sr-undo-row" style="margin-top:0.75rem;max-width:210px;width:100%;">';
html += '<button class="sr-undo-btn" id="sr-undo-pos-btn">Undo</button>';
html += '<button class="sr-submit-btn" id="sr-submit-pos-btn"' + (state.selectedPositions.length < needed ? ' disabled' : '') + '>Submit</button>';
html += '</div>';

html += '</div>';

$('sr-play-area').innerHTML = html;

var cells = document.querySelectorAll('#sequence-recall-game .sr-position-cell');
for (var m = 0; m < cells.length; m++) {
cells[m].addEventListener('click', function() {
var p = parseInt(this.getAttribute('data-pos'), 10);
var alreadySelected = false;
for (var n = 0; n < state.selectedPositions.length; n++) {
if (state.selectedPositions[n] === p) {
alreadySelected = true;
break;
}
}
if (!alreadySelected && state.selectedPositions.length < needed) {
state.selectedPositions.push(p);
renderRecallPositions();
}
});
}

$('sr-undo-pos-btn').addEventListener('click', function() {
if (state.selectedPositions.length > 0) {
state.selectedPositions.pop();
renderRecallPositions();
}
});

$('sr-submit-pos-btn').addEventListener('click', function() {
if (state.selectedPositions.length === needed) {
submitPositionRecall();
}
});
}

function submitPositionRecall() {
var responseTime = Date.now() - state.phaseStartTime;
var posCorrect = true;
for (var i = 0; i < state.positionSequence.length; i++) {
if (state.positionSequence[i] !== state.selectedPositions[i]) {
posCorrect = false;
break;
}
}

var bothCorrect = state._colorCorrect && posCorrect;
var combinedTime = state._colorResponseTime + responseTime;
resolveRound(bothCorrect, combinedTime);
}

function formatColorHistory(seq) {
if (!seq || !seq.length) return 'none';
var out = [];
for (var i = 0; i < seq.length; i++) {
var color = COLORS[seq[i]];
out.push('<span class="gk-history-swatch" style="background:' + runHistory.escape(color.hsl) + '"></span>' + runHistory.escape(color.name));
}
return out.join(', ');
}

function formatPositionHistory(seq) {
if (!seq || !seq.length) return 'none';
var out = [];
for (var i = 0; i < seq.length; i++) out.push(String(seq[i] + 1));
return out.join(', ');
}

function recordSequenceHistory(correct) {
var html = '<strong>Sequence recall</strong>';
html += '<div class="gk-runtime-history-sub">Colors - Your: ' + formatColorHistory(state.selectedColors) + '</div>';
html += '<div class="gk-runtime-history-sub">Colors - Correct: ' + formatColorHistory(state.colorSequence) + '</div>';
if (isDualTrack(state.level)) {
html += '<div class="gk-runtime-history-sub">Positions - Your: ' + runHistory.escape(formatPositionHistory(state.selectedPositions)) + '</div>';
html += '<div class="gk-runtime-history-sub">Positions - Correct: ' + runHistory.escape(formatPositionHistory(state.positionSequence)) + '</div>';
}
runHistory.pushHtml(correct, html);
}

function resolveRound(correct, responseTime) {
state.totalAttempts++;
recordSequenceHistory(correct);
var points = 0;

if (correct) {
state.totalCorrect++;
state.streak++;
points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
} else {
state.streak = 0;
}

updateHeader();
showFeedback(correct, points);
}

function showFeedback(correct, points) {
$('sr-phase-label').textContent = '';
var html = '<div class="sr-feedback"><div>';
if (correct) {
html += '<div class="sr-feedback-correct">Correct!</div>';
html += '<div class="sr-feedback-points">+' + points + ' points</div>';
} else {
html += '<div class="sr-feedback-wrong">Incorrect</div>';
html += '<div class="sr-feedback-points">Streak reset</div>';
}
html += '</div></div>';

$('sr-play-area').innerHTML = html;

state.feedbackTimer = setTimeout(function() {
advanceRound(correct);
}, 1200);
}

function advanceRound(wasCorrect) {
state.round++;

if (state.round >= ROUNDS_PER_LEVEL) {
if (wasCorrect) {
state.level++;
}
state.round = 0;

if (state.level > MAX_LEVEL) {
endGame();
return;
}
}

updateProgress();
startRound();
}

/* ── Celebration effects ── */
function srShowConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'sr-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'sr-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'sr-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function srAnimateScoreCountUp(el, target) {
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(target * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

function endGame() {
exitMobileGameMode();
var accuracy = state.totalAttempts > 0 ? Math.round((state.totalCorrect / state.totalAttempts) * 100) : 0;
var best = getBestScore();
var isNewBest = state.score > best;

if (isNewBest) {
setBestScore(state.score);
}

addHistory({
score: state.score,
level: state.level > MAX_LEVEL ? MAX_LEVEL : state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var iconEl = document.querySelector('#sr-complete .sr-complete-icon');
var titleEl = document.querySelector('#sr-complete .sr-complete-title');
var badge = $('sr-new-best-badge');

if (isNewBest) {
srShowConfetti();
iconEl.textContent = '\uD83C\uDF89';
titleEl.textContent = 'AMAZING!';
badge.className = 'sr-new-best-enhanced';
badge.innerHTML = '\uD83C\uDF1F AMAZING! New Best!';
badge.style.display = 'inline-block';
} else {
iconEl.textContent = '\uD83C\uDFC6';
titleEl.textContent = 'Good Job!';
badge.className = 'sr-new-best';
badge.style.display = 'none';
}

GK.renderChallengeResult('sr-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

$('sr-final-level').textContent = state.level > MAX_LEVEL ? MAX_LEVEL : state.level;
$('sr-final-accuracy').textContent = accuracy + '%';

showScreen('complete');
srAnimateScoreCountUp($('sr-final-score'), state.score);
}

function resetGame() {
clearTimeout(state.showTimer);
clearTimeout(state.feedbackTimer);
state.level = 1;
state.round = 0;
state.score = 0;
state.streak = 0;
state.totalCorrect = 0;
state.totalAttempts = 0;
state.selectedColors = [];
state.selectedPositions = [];
state.colorSequence = [];
state.positionSequence = [];
runHistory.clear();
}

function initInstructions() {
var best = getBestScore();
$('sr-best-value').textContent = best;
GK.renderChallengeBanner('sr-challenge-banner-wrap', challenge);
showScreen('instructions');
}


$('sr-close-btn').addEventListener('click', function() {
$('sr-best-value').textContent = getBestScore();
showScreen('instructions');
});

$('sr-finish-btn').addEventListener('click', function() {
endGame();
});

$('sr-start-btn').addEventListener('click', function() {
resetGame();
showWizard(function() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sr-playing', challenge);
startRound();
});
});

$('sr-play-again-btn').addEventListener('click', function() {
resetGame();
showWizard(function() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sr-playing', challenge);
startRound();
});
});

$('sr-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

$('sr-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Sequence Recall', '/games/sequence-recall/', 'sr-share-copied');
});

initInstructions();
})();
</script>

### Speed Match - Brain Training Game
URL: https://guruka.com/games/speed-match/
Description: Compare symbols quickly.

<style>
#speed-match-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #speed-match-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#sm-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.sm-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#sm-instructions .sm-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#sm-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#sm-instructions .sm-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #sm-instructions .sm-subtitle {
color: var(--color-dark-text-secondary);
}

#sm-instructions .sm-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #sm-instructions .sm-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#sm-instructions .sm-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#sm-instructions .sm-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#sm-instructions .sm-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.sm-kbd-hints {
display: flex;
gap: 1.5rem;
justify-content: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}

.sm-kbd-hint {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-kbd-hint {
color: var(--color-dark-text-secondary);
}

.sm-kbd {
display: inline-block;
padding: 0.15rem 0.5rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.25rem;
font-family: monospace;
font-size: 0.8rem;
font-weight: 600;
}

[data-theme="dark"] .sm-kbd {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.sm-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.sm-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.sm-btn-primary:hover {
background: var(--color-primary-hover);
}

.sm-btn-primary:active {
transform: scale(0.97);
}

.sm-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.sm-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .sm-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#sm-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#sm-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sm-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #sm-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes sm-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.sm-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.sm-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.sm-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .sm-wizard-desc {
color: var(--color-dark-text-secondary);
}
.sm-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.sm-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.sm-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"] .sm-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .sm-wizard-dot.active {
background: var(--color-primary);
}
.sm-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.sm-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#sm-wizard-card {
padding: 1.5rem 1rem;
}
.sm-wizard-icon {
font-size: 2rem;
}
.sm-wizard-title {
font-size: 1.1rem;
}
.sm-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#sm-playing {
display: none;
flex: 1;
flex-direction: column;
}

.sm-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .sm-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-stat {
text-align: center;
}

.sm-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .sm-stat-label {
color: var(--color-dark-text-secondary);
}

.sm-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.sm-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.sm-level-text {
font-weight: 600;
}

.sm-nback-badge {
background: var(--color-primary);
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.sm-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .sm-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.sm-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .sm-timer-bar {
background: var(--color-dark-bg-secondary);
}

.sm-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.sm-timer-fill.sm-timer-warning {
background: #ef4444;
}

/* ── Symbol Display ── */
.sm-symbol-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
}

.sm-symbol {
font-size: 7rem;
line-height: 1;
transition: transform 0.15s ease;
animation: sm-symbol-enter 0.2s ease-out;
}

@keyframes sm-symbol-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.sm-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.sm-feedback-flash.sm-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.sm-feedback-flash.sm-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.sm-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.sm-feedback-icon.sm-show-check {
animation: sm-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.sm-feedback-icon.sm-show-x {
animation: sm-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes sm-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Action Buttons ── */
.sm-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.sm-action-btn {
flex: 1;
padding: 1rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
background: var(--color-bg-primary);
color: var(--color-text-primary);
}

[data-theme="dark"] .sm-action-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.sm-action-btn:active {
transform: scale(0.95);
}

.sm-action-btn:disabled {
opacity: 0.45;
cursor: default;
transform: none;
}

.sm-action-btn .sm-btn-icon {
font-size: 1.5rem;
}

.sm-action-btn .sm-btn-kbd {
font-size: 0.65rem;
color: var(--color-text-secondary);
font-weight: 400;
}

[data-theme="dark"] .sm-action-btn .sm-btn-kbd {
color: var(--color-dark-text-secondary);
}

.sm-btn-different {
border-color: #ef4444;
}

.sm-btn-different:hover {
background: rgba(239, 68, 68, 0.08);
}

[data-theme="dark"] .sm-btn-different:hover {
background: rgba(239, 68, 68, 0.15);
}

.sm-btn-same {
border-color: #22c55e;
}

.sm-btn-same:hover {
background: rgba(34, 197, 94, 0.08);
}

[data-theme="dark"] .sm-btn-same:hover {
background: rgba(34, 197, 94, 0.15);
}

.sm-playing-kbd-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-playing-kbd-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#sm-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#sm-pause-overlay .sm-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#sm-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.sm-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sm-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .sm-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes sm-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.sm-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.sm-complete-card .sm-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.sm-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.sm-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: sm-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes sm-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.sm-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.sm-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .sm-complete-stat {
background: var(--color-dark-bg-secondary);
}

.sm-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.sm-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.sm-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.sm-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .sm-back-link {
color: var(--color-dark-text-secondary);
}

.sm-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.sm-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.sm-level-up-toast.sm-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#speed-match-game {
padding: 0.5rem;
}
.sm-symbol {
font-size: 5rem;
}
.sm-action-btn {
padding: 0.75rem;
font-size: 1rem;
}
.sm-header {
padding: 0.5rem;
gap: 0.25rem;
}
.sm-stat-value {
font-size: 1rem;
}
#sm-instructions { padding: 0.75rem 0.5rem; }
#sm-instructions .sm-icon { font-size: 2rem; margin-bottom: 0; }
#sm-instructions h2 { font-size: 1.3rem; }
#sm-instructions .sm-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#sm-instructions .sm-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#sm-instructions .sm-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.sm-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#speed-match-game {
padding: 0.75rem;
}
.sm-symbol {
font-size: 6rem;
}
.sm-action-btn {
padding: 0.875rem;
}
}
@media (max-width: 360px) {
.sm-symbol {
font-size: 4rem;
}
.sm-action-btn {
padding: 0.625rem;
font-size: 0.9rem;
}
.sm-complete-stats {
grid-template-columns: 1fr 1fr;
}
.sm-final-score {
font-size: 2rem;
}
.sm-header {
padding: 0.375rem;
}
.sm-stat-value {
font-size: 0.9rem;
}
}
@keyframes sm-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.sm-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.sm-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: sm-confetti-fall 2.5s ease-in forwards;
}
.sm-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: sm-glow-fade 1s ease-out forwards;
}
@keyframes sm-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.sm-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: sm-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes sm-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#speed-match-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#speed-match-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #speed-match-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#speed-match-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#speed-match-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="speed-match-game">

<div id="sm-instructions">
<div class="sm-title-row"><span class="sm-icon">&#9889;</span><h2>Speed Match</h2></div>
<p class="sm-subtitle">Speed and memory</p>
<div class="sm-how-to">
<h3>How to Play</h3>
<ol>
<li>A symbol appears.</li>
<li>Compare with the previous symbol.</li>
<li>Choose Same or Different.</li>


</ol>
</div>
<div class="sm-kbd-hints">
<span class="sm-kbd-hint"><span class="sm-kbd">1</span> Different</span>
<span class="sm-kbd-hint"><span class="sm-kbd">2</span> Same</span>
<span class="sm-kbd-hint"><span class="sm-kbd">Esc</span> Pause</span>
</div>
<div id="sm-best-display" class="sm-personal-best" style="display:none;">
Best: <strong id="sm-best-score">0</strong> points
</div>
<button class="sm-btn-primary" id="sm-start-btn">Start</button>
<div id="sm-challenge-banner-wrap"></div>
</div>

<div id="sm-wizard">
<div id="sm-wizard-card"></div>
</div>

<div id="sm-playing">
<div class="sm-header">
<div class="sm-stat">
<div class="sm-stat-label">Score</div>
<div class="sm-stat-value" id="sm-score">0</div>
</div>
<div class="sm-stat">
<div class="sm-stat-label">Streak</div>
<div class="sm-stat-value" id="sm-streak">0</div>
</div>
<div class="sm-stat">
<div class="sm-stat-label">Level</div>
<div class="sm-stat-value" id="sm-level">1</div>
</div>
</div>
<div class="sm-level-info">
<span class="sm-level-text">Level <span id="sm-level-text">1</span></span>
<span class="sm-nback-badge" id="sm-nback-badge">1-Back</span>
</div>
<div class="sm-progress-bar">
<div class="sm-progress-fill" id="sm-progress-fill" style="width:0%"></div>
</div>
<div class="sm-timer-bar">
<div class="sm-timer-fill" id="sm-timer-fill" style="width:100%"></div>
</div>
<div class="sm-symbol-area">
<div class="sm-feedback-flash" id="sm-feedback-flash"></div>
<div class="sm-feedback-icon" id="sm-feedback-icon"></div>
<div class="sm-symbol" id="sm-symbol"></div>
</div>
<div class="sm-actions">
<button class="sm-action-btn sm-btn-different" id="sm-btn-different">
<span class="sm-btn-icon">&#10007;</span>
<span>Different</span>
<span class="sm-btn-kbd">1</span>
</button>
<button class="sm-action-btn sm-btn-same" id="sm-btn-same">
<span class="sm-btn-icon">&#10003;</span>
<span>Same</span>
<span class="sm-btn-kbd">2</span>
</button>
</div>
<div class="sm-playing-kbd-hint">Pause anytime</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="sm-pause-btn" type="button">Pause</button>
<button class="gk-finish-btn" id="sm-finish-btn" type="button">Finish</button>
</div>
</div>

<div id="sm-pause-overlay">
<div class="sm-pause-text">Paused</div>
<button class="sm-btn-primary" id="sm-resume-btn">Resume</button>
</div>

<div id="sm-complete-overlay">
<div class="sm-complete-card">
<button class="gk-complete-close" id="sm-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="sm-trophy">&#127942;</div>
<h2>Done!</h2>
<div class="sm-final-score" id="sm-final-score">0</div>
<div id="sm-new-best" class="sm-new-best" style="display:none;">&#11088; New Best!</div>
<div class="gk-challenge-result" id="sm-challenge-result" style="display:none;"></div>
<div class="sm-complete-stats">
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Level</div>
<div class="sm-complete-stat-value" id="sm-final-level">1</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Accuracy</div>
<div class="sm-complete-stat-value" id="sm-final-accuracy">0%</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Streak</div>
<div class="sm-complete-stat-value" id="sm-final-streak">0</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Best</div>
<div class="sm-complete-stat-value" id="sm-final-best">0</div>
</div>
</div>
<div class="sm-complete-actions">
<button class="sm-btn-primary" id="sm-play-again-btn">Again</button>
<button class="gk-runtime-history-toggle" id="sm-history-toggle" type="button">Show History</button>
<a href="/games/" class="sm-back-link">&larr; Games</a>
</div>
<div class="gk-runtime-history-panel" id="sm-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="sm-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="sm-share-btn">&#128279; Share</button>
<div class="gk-share-copied" id="sm-share-copied" style="display:none;">Copied!</div>
</div>
</div>
</div>

<div class="sm-level-up-toast" id="sm-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var SYMBOLS = ['\u25C6', '\u25CF', '\u25A0', '\u25B2', '\u2605', '\u2666', '\u2660', '\u2663', '\u2665', '\u2B1F', '\u2B21', '\u25EF'];
var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_speed-match_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('sm-history-toggle', 'sm-history-panel', 'sm-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
symbolHistory: [],
currentSymbol: '',
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('sm-instructions');
var elWizard = document.getElementById('sm-wizard');
var elWizardCard = document.getElementById('sm-wizard-card');
var elPlaying = document.getElementById('sm-playing');
var elPauseOverlay = document.getElementById('sm-pause-overlay');
var elCompleteOverlay = document.getElementById('sm-complete-overlay');
var elScore = document.getElementById('sm-score');
var elStreak = document.getElementById('sm-streak');
var elLevel = document.getElementById('sm-level');
var elLevelText = document.getElementById('sm-level-text');
var elNbackBadge = document.getElementById('sm-nback-badge');
var elProgressFill = document.getElementById('sm-progress-fill');
var elTimerFill = document.getElementById('sm-timer-fill');
var elSymbol = document.getElementById('sm-symbol');
var elFeedbackFlash = document.getElementById('sm-feedback-flash');
var elFeedbackIcon = document.getElementById('sm-feedback-icon');
var elFinalScore = document.getElementById('sm-final-score');
var elNewBest = document.getElementById('sm-new-best');
var elFinalLevel = document.getElementById('sm-final-level');
var elFinalAccuracy = document.getElementById('sm-final-accuracy');
var elFinalStreak = document.getElementById('sm-final-streak');
var elFinalBest = document.getElementById('sm-final-best');
var elBestDisplay = document.getElementById('sm-best-display');
var elBestScore = document.getElementById('sm-best-score');
var elLevelToast = document.getElementById('sm-level-toast');
var btnStart = document.getElementById('sm-start-btn');
var btnDifferent = document.getElementById('sm-btn-different');
var btnSame = document.getElementById('sm-btn-same');
var btnResume = document.getElementById('sm-resume-btn');
var btnPlayAgain = document.getElementById('sm-play-again-btn');

/* ── Level parameters ── */
function getNBack(lvl) {
return lvl <= 10 ? 1 : 2;
}

function getDisplayTime(lvl) {
return Math.max(2500 - lvl * 100, 800);
}

function getSymbolCount(lvl) {
return Math.min(6 + Math.floor(lvl / 3), 12);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Pick a random symbol ── */
function pickSymbol() {
var count = getSymbolCount(state.level);
var pool = SYMBOLS.slice(0, count);
return pool[Math.floor(Math.random() * pool.length)];
}

/* ── Determine if current symbol matches nBack ── */
function isMatch() {
var nBack = getNBack(state.level);
var idx = state.symbolHistory.length - 1 - nBack;
if (idx < 0) return false;
return state.symbolHistory[idx] === state.currentSymbol;
}

function hasComparisonTarget() {
return state.symbolHistory.length > getNBack(state.level);
}

function setAnswerButtonsEnabled(enabled) {
btnDifferent.disabled = !enabled;
btnSame.disabled = !enabled;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
var nBack = getNBack(state.level);
elNbackBadge.textContent = nBack + '-Back';
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('sm-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('sm-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('sm-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'sm-feedback-flash';
elFeedbackIcon.className = 'sm-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('sm-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('sm-show-check');
} else {
elFeedbackFlash.classList.add('sm-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('sm-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'sm-feedback-flash';
elFeedbackIcon.className = 'sm-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('sm-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('sm-toast-show');
}, 1500);
}

function expectedSameForCurrentRound() {
if (!hasComparisonTarget()) return false;
return isMatch();
}

function sameLabel(value) {
if (value === null || value === undefined) return 'No answer';
return value ? 'Same' : 'Different';
}

function recordSpeedHistory(userSaidSame, correct) {
var expected = expectedSameForCurrentRound();
var html = '<strong>' + runHistory.escape(getNBack(state.level) + '-Back') + '</strong>';
html += '<div class="gk-runtime-history-sub">Symbol: ' + runHistory.escape(state.currentSymbol) + '</div>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(sameLabel(userSaidSame)) + ' | Correct: ' + runHistory.escape(sameLabel(expected)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(userSaidSame) {
if (state.answered || state.gameOver || !hasComparisonTarget()) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var matchResult = isMatch();
var correct = (userSaidSame === matchResult);

state.totalAnswered++;
recordSpeedHistory(userSaidSame, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.symbolHistory = [];
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;

if (!hasComparisonTarget()) {
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 150);
return;
}
state.totalAnswered++;
state.streak = 0;
recordSpeedHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.symbolHistory = [];
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;
state.currentSymbol = pickSymbol();
state.symbolHistory.push(state.currentSymbol);

elSymbol.textContent = state.currentSymbol;
elSymbol.style.animation = 'none';
void elSymbol.offsetWidth;
elSymbol.style.animation = '';

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();
setAnswerButtonsEnabled(hasComparisonTarget());

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'sm-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'sm-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'sm-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.sm-trophy');
var title = document.querySelector('#sm-complete-overlay .sm-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'AMAZING!';
elNewBest.className = 'sm-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F AMAZING! New Best!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Good Job!';
elNewBest.className = 'sm-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('sm-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
/* Restart the current round's timer with full time */
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var SM_WIZARD_STEPS = [
{icon: '\u2728', title: 'A symbol appears on screen', desc: 'Watch the symbol.'},
{icon: '\u2194\uFE0F', title: 'Same or Different?', desc: 'Same as previous?'},
{icon: '\u26A1', title: 'Fast counts', desc: 'React before time runs out.', final: true}
];
var smWizardStep = 0;

function renderWizardStep() {
var s = SM_WIZARD_STEPS[smWizardStep];
var dotsHtml = '';
for (var i = 0; i < SM_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="sm-wizard-dot' + (i === smWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Start' : 'Next';
elWizardCard.innerHTML =
'<div class="sm-wizard-icon">' + s.icon + '</div>' +
'<div class="sm-wizard-title">' + s.title + '</div>' +
'<div class="sm-wizard-desc">' + s.desc + '</div>' +
'<div class="sm-wizard-dots">' + dotsHtml + '</div>' +
'<button class="sm-wizard-btn" id="sm-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'sm-wizard-enter 0.3s ease-out';
document.getElementById('sm-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (smWizardStep < SM_WIZARD_STEPS.length - 1) {
smWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
smWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.symbolHistory = [];
state.currentSymbol = '';
runHistory.clear();
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sm-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('sm-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

btnDifferent.addEventListener('click', function() {
processAnswer(false);
});

btnSame.addEventListener('click', function() {
processAnswer(true);
});

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('sm-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('sm-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('sm-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('sm-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Speed Match', '/games/speed-match/', 'sm-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key === '1') {
e.preventDefault();
processAnswer(false);
} else if (e.key === '2') {
e.preventDefault();
processAnswer(true);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('sm-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Calm & Clarity Affirmation for Visual Meditation
URL: https://guruka.com/ja/affirmation-calm-and-clarity/
Description: Free calm and clarity affirmation for visual meditation. Display positive affirmations over calming visuals, privately in your browser.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Calm & Clarity Affirmation</h1>
<p class="aff-intro">When thoughts race and the mind feels scattered, these words can guide you back to stillness. Use this affirmation during visual meditation to cultivate inner peace and mental clarity.</p>
<div class="aff-lines">
My mind is calm and clear<br>I release what I cannot control<br>I am present in this moment
</div>
<a href="/visuals/breathing-orb/?edit=calm-and-clarity" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Gratitude Affirmation for Visual Meditation
URL: https://guruka.com/ja/affirmation-gratitude/
Description: Free gratitude affirmation for visual meditation. Cultivate thankfulness with calming visuals and positive affirmation text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Gratitude Affirmation</h1>
<p class="aff-intro">Gratitude shifts your focus from what is missing to what is present. Use this affirmation with a visual meditation to deepen your sense of appreciation and abundance.</p>
<div class="aff-lines">
I am grateful for this moment<br>Abundance flows into my life<br>I appreciate the simple things
</div>
<a href="/visuals/breathing-orb/?edit=gratitude" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Focus & Energy Affirmation for Visual Meditation
URL: https://guruka.com/ja/affirmation-focus-and-energy/
Description: Free focus and energy affirmation for visual meditation. Sharpen concentration and channel your energy with calming visuals.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Focus & Energy Affirmation</h1>
<p class="aff-intro">A focused mind moves with purpose. This affirmation helps you channel your energy and move forward with intention during visual meditation.</p>
<div class="aff-lines">
My focus is sharp and steady<br>I channel my energy with purpose<br>I move forward with intention
</div>
<a href="/visuals/breathing-orb/?edit=focus-and-energy" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Letting Go Affirmation for Visual Meditation
URL: https://guruka.com/ja/affirmation-letting-go/
Description: Free letting go affirmation for visual meditation. Release what no longer serves you with calming visuals and positive text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Letting Go Affirmation</h1>
<p class="aff-intro">Holding on to what no longer serves you creates tension. This affirmation helps you release, forgive, and create space for peace during visual meditation.</p>
<div class="aff-lines">
I let go of what no longer serves me<br>I forgive myself and others<br>I make space for peace
</div>
<a href="/visuals/breathing-orb/?edit=letting-go" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Quit Smoking Affirmation for Visual Meditation
URL: https://guruka.com/ja/affirmation-quit-smoking/
Description: Free quit smoking affirmation for visual meditation. Strengthen your resolve to quit with calming visuals and positive affirmations, privately in your browser.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Quit Smoking Affirmation</h1>
<p class="aff-intro">Every breath without smoke is a step toward freedom. This affirmation reinforces your choice to live smoke-free, pairing positive words with calming visual meditation to help you stay strong through cravings.</p>
<div class="aff-lines">
My lungs are cleaner every day<br>I am stronger than any craving<br>Every breath is a victory
</div>
<a href="/visuals/breathing-orb/?edit=quit-smoking" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Self-Confidence Affirmation for Visual Meditation
URL: https://guruka.com/ja/affirmation-self-confidence/
Description: Free self-confidence affirmation for visual meditation. Build belief in yourself with calming visuals and positive affirmations.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Self-Confidence Affirmation</h1>
<p class="aff-intro">Confidence grows when you remind yourself of your worth. Pair this affirmation with a calming visual to reinforce self-belief and inner strength.</p>
<div class="aff-lines">
I believe in myself and my abilities<br>I am worthy of good things<br>I grow stronger every day
</div>
<a href="/visuals/breathing-orb/?edit=self-confidence" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Sleep & Rest Affirmation for Visual Meditation
URL: https://guruka.com/ja/affirmation-sleep-and-rest/
Description: Free sleep and rest affirmation for visual meditation. Prepare for restful sleep with calming visuals and gentle affirmation text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Sleep & Rest Affirmation</h1>
<p class="aff-intro">Rest is not a luxury, it is essential. This affirmation prepares your mind and body for deep, peaceful sleep during a calming visual meditation.</p>
<div class="aff-lines">
I give myself permission to rest<br>My body relaxes with each breath<br>I drift into peaceful sleep
</div>
<a href="/visuals/breathing-orb/?edit=sleep-and-rest" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### 脳トレゲーム
URL: https://guruka.com/ja/games/
Description: 無料の脳トレ。アカウント不要。

<style>
#games-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#games-hub .gh-header {
text-align: center;
margin-bottom: 3rem;
}
#games-hub .gh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #games-hub .gh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#games-hub .gh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #games-hub .gh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.gh-game-card {
display: grid;
grid-template-columns: 4rem 1fr;
column-gap: 1rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 2rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .gh-game-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.gh-game-card:hover {
transform: none;
}
.gh-game-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.gh-game-card.speed-match::before { background: #0f9072; }
.gh-game-card.memory-matrix::before { background: #f59e0b; }
.gh-game-card.sequence-recall::before { background: #10b981; }
.gh-game-card.number-crunch::before { background: #6366f1; }
.gh-game-card.color-clash::before { background: #ec4899; }
.gh-game-card.quick-sort::before { background: #f97316; }
.gh-game-card.pattern-path::before { background: #14b8a6; }
.gh-game-icon {
width: 4rem;
height: 4rem;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.gh-game-card h2 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.gh-game-card .gh-skill,
.gh-game-card .gh-desc,
.gh-game-card .gh-play-btn,
.gh-game-card .gh-best {
grid-column: 1 / -1;
}
[data-theme="dark"] .gh-game-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gh-game-card .gh-skill {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
margin-bottom: 0.5rem;
}
.speed-match .gh-skill { background: rgba(15,144,114,0.1); color: #0f9072; }
.memory-matrix .gh-skill { background: rgba(245,158,11,0.1); color: #f59e0b; }
.sequence-recall .gh-skill { background: rgba(16,185,129,0.1); color: #10b981; }
.number-crunch .gh-skill { background: rgba(99,102,241,0.1); color: #6366f1; }
.color-clash .gh-skill { background: rgba(236,72,153,0.1); color: #ec4899; }
.quick-sort .gh-skill { background: rgba(249,115,22,0.1); color: #f97316; }
.pattern-path .gh-skill { background: rgba(20,184,166,0.1); color: #14b8a6; }
.gh-game-card .gh-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 0.75rem;
}
[data-theme="dark"] .gh-game-card .gh-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-play-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
min-height: 44px;
}
.gh-play-btn::after {
content: '\2192';
transition: transform 0.2s;
}
.gh-best:empty {
display: none;
}
.gh-best {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-border, #dfe4ea);
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .gh-best {
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-best strong {
color: var(--color-primary, #0f9072);
}
.gh-info {
text-align: center;
padding: 2rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 1rem;
}
[data-theme="dark"] .gh-info {
background: var(--color-dark-bg-secondary, #1e293b);
}
.gh-info h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .gh-info h3 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gh-info p {
color: var(--color-text-secondary, #4b5b6d);
max-width: 32rem;
margin: 0 auto;
font-size: 0.9375rem;
}
[data-theme="dark"] .gh-info p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="games-hub">
<div class="gh-header">
<h1>&#129504; 脳トレゲーム</h1>
<p>無料で広告なし。スコアはローカルに保存されます - アカウント不要。</p>
</div>

<div class="gh-grid">
<a href="/ja/games/speed-match/" class="gh-game-card speed-match">
<div class="gh-game-icon" style="background: rgba(15,144,114,0.1); color: #0f9072;">&#9889;</div>
<h2>Speed Match</h2>
<span class="gh-skill">処理速度</span>
<p class="gh-desc">シンボルを比較して処理速度をテストしましょう。今のシンボルは前と同じですか？時間切れになる前にすばやく反応してください！</p>
<span class="gh-play-btn">プレイする</span>
<div class="gh-best" id="best-speed-match"></div>
</a>

<a href="/ja/games/memory-matrix/" class="gh-game-card memory-matrix">
<div class="gh-game-icon" style="background: rgba(245,158,11,0.1); color: #f59e0b;">&#9638;</div>
<h2>Memory Matrix</h2>
<span class="gh-skill">空間記憶</span>
<p class="gh-desc">グリッド上でハイライトされたセルのパターンを観察し、記憶から再現してください。レベルが上がるとグリッドが大きくなり、パターンも複雑になります。</p>
<span class="gh-play-btn">プレイする</span>
<div class="gh-best" id="best-memory-matrix"></div>
</a>

<a href="/ja/games/sequence-recall/" class="gh-game-card sequence-recall">
<div class="gh-game-icon" style="background: rgba(16,185,129,0.1); color: #10b981;">&#9776;</div>
<h2>Sequence Recall</h2>
<span class="gh-skill">ワーキングメモリ</span>
<p class="gh-desc">1つずつ表示される色の順番を覚えて、正しい順序で再現してください。上位レベルでは計算による妨害やデュアルトラックの課題が加わります。</p>
<span class="gh-play-btn">プレイする</span>
<div class="gh-best" id="best-sequence-recall"></div>
</a>

<a href="/ja/games/number-crunch/" class="gh-game-card number-crunch">
<div class="gh-game-icon" style="background: rgba(99,102,241,0.1); color: #6366f1;">&#129518;</div>
<h2>Number Crunch</h2>
<span class="gh-skill">暗算</span>
<p class="gh-desc">制限時間内に欠けている要素がある方程式を解いてください。上位レベルでは、答えの暗算変換が必要なルールモディファイアが追加されます。</p>
<span class="gh-play-btn">プレイする</span>
<div class="gh-best" id="best-number-crunch"></div>
</a>

<a href="/ja/games/color-clash/" class="gh-game-card color-clash">
<div class="gh-game-icon" style="background: rgba(236,72,153,0.1); color: #ec4899;">&#127912;</div>
<h2>Color Clash</h2>
<span class="gh-skill">抑制制御</span>
<p class="gh-desc">色の名前が別のインクの色で表示されます。現在のルールに基づいて正しい答えをタップしてください。インクの色か、単語の意味か。ルールは切り替わります！</p>
<span class="gh-play-btn">プレイする</span>
<div class="gh-best" id="best-color-clash"></div>
</a>

<a href="/ja/games/quick-sort/" class="gh-game-card quick-sort">
<div class="gh-game-icon" style="background: rgba(249,115,22,0.1); color: #f97316;">&#128451;</div>
<h2>Quick Sort</h2>
<span class="gh-skill">タスク切り替え</span>
<p class="gh-desc">左右にスワイプしてアイテムをカテゴリに分類してください。数ラウンドごとに分類ルールが変わり、メンタルの柔軟性が試されます。</p>
<span class="gh-play-btn">プレイする</span>
<div class="gh-best" id="best-quick-sort"></div>
</a>

<a href="/ja/games/pattern-path/" class="gh-game-card pattern-path">
<div class="gh-game-icon" style="background: rgba(20,184,166,0.1); color: #14b8a6;">&#129513;</div>
<h2>Pattern Path</h2>
<span class="gh-skill">パターン認識</span>
<p class="gh-desc">視覚パターンの並びから欠けているピースを見つけてください。色、サイズ、回転が変化する形の中から、ルールを見つけて正しい答えを選びましょう。</p>
<span class="gh-play-btn">プレイする</span>
<div class="gh-best" id="best-pattern-path"></div>
</a>
</div>

<div class="gh-info">
<h3>遊び方</h3>
<p>各ゲームは20段階の難易度であなたのスキルに適応します。最良の結果を得るには、毎日15〜20分、7つのゲームすべてでトレーニングしてください。ベストはブラウザに保存されます。</p>
</div>
</div>

<script>
(function() {
var games = ['speed-match', 'memory-matrix', 'sequence-recall', 'number-crunch', 'color-clash', 'quick-sort', 'pattern-path'];
games.forEach(function(game) {
var best = localStorage.getItem('guruka_' + game + '_best');
var el = document.getElementById('best-' + game);
if (el && best) {
el.innerHTML = 'ベスト: <strong>' + Number(best).toLocaleString() + '</strong> ポイント';
}
});
})();
</script>

<style>
/* ── Mobile-first responsive ── */
.gh-game-card {
padding: 1.5rem;
grid-template-columns: 3.25rem 1fr;
}
.gh-game-icon {
width: 3.25rem;
height: 3.25rem;
}
.gh-game-card .gh-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 768px) {
.gh-game-card {
padding: 2rem;
grid-template-columns: 4rem 1fr;
}
.gh-game-icon {
width: 4rem;
height: 4rem;
}
.gh-game-card .gh-desc {
-webkit-line-clamp: unset;
overflow: visible;
}
}
@media (hover: hover) and (pointer: fine) {
.gh-game-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}
.gh-game-card:hover .gh-play-btn::after {
transform: translateX(4px);
}
}
@media (prefers-reduced-motion: reduce) {
.gh-game-card {
transition: none;
}
}
</style>

### Privacy Policy
URL: https://guruka.com/ja/privacy/
Description: Privacy Policy for GURUKA

# Privacy Policy

*Last updated: March 11, 2026*

**No sign-up is required to use GURUKA. All user data, including game scores, meditation stats, activity tracking, and preferences, is stored locally on your device only. We do not collect, store, or share your personal data. No data is transmitted to our servers or any third party.**

## 1. Information We Do NOT Collect

GURUKA is designed with a local-first approach. We do not collect personal information such as names, email addresses, or account credentials, because GURUKA requires no sign-up or login.

All user-generated data stays on your device:

- **Game scores and progress** - stored in your browser's localStorage
- **Meditation history and stats** - stored in your browser's localStorage
- **Activity tracking data** - stored in your browser's localStorage
- **Preferences and settings** - stored in your browser's localStorage

None of this data is transmitted to any server. It exists only on your device and can be cleared at any time through your browser settings.

## 2. How We Use Information

Since we do not collect personal data, our use of information is limited to:

- Improving and optimizing the website
- Analyzing general usage patterns and trends
- Maintaining the security of our service

## 3. Cookies and Tracking

GURUKA does not use tracking cookies, third-party trackers, or advertising pixels. The only browser storage used is localStorage to save your game and activity data locally on your device. You can clear this data at any time through your browser settings.

## 4. Third-Party Services

GURUKA does not use third-party analytics services or embed third-party tracking scripts. Your browsing activity on GURUKA is not shared with any external service.

## 5. Hosting and Bot Protection

GURUKA is hosted on Cloudflare, which provides DNS, content delivery, and security services. As part of its security features, Cloudflare may occasionally display a brief verification screen ("Verify you are human") to protect the website from automated bots and malicious traffic. This check is lightweight, privacy-preserving, and does not use traditional CAPTCHA puzzles. It runs automatically and typically completes in seconds without requiring any action from you. Cloudflare processes this verification as a data processor on our behalf. For details on how Cloudflare handles this data, see [Cloudflare's Privacy Policy](https://www.cloudflare.com/privacypolicy/).

## 6. Data Security

Because your data is stored locally on your device and not transmitted to our servers, you maintain full control over it. We implement appropriate technical measures to ensure the website itself is served securely.

## 7. Your Rights

Since GURUKA stores no personal data on any server, there is no personal data for us to access, correct, or delete on your behalf. All user data is stored locally in your browser's localStorage and is fully under your control. You can view or clear this data at any time through your browser settings. Clearing your browser cache or site data will permanently delete all stored data including game scores, meditation history, and preferences. For a detailed explanation of how your data is stored and managed, see [How Your Data Works](/your-data/).

## 8. Children's Privacy

GURUKA is suitable for users of all ages. We do not collect personal information from anyone, including children.

## 9. Changes to Privacy Policy

We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new policy on this page and updating the "Last updated" date.

## 10. Contact

If you have questions about this Privacy Policy, please contact us through our website at [https://guruka.com](https://guruka.com).

### ガイド付き瞑想
URL: https://guruka.com/ja/meditate/
Description: 心の静けさ、集中力、睡眠、エネルギー、ウェルビーイングのための無料ガイド付き瞑想。タップして開始、アカウント不要です。

<style>
#meditate-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#meditate-hub .mh-header {
text-align: center;
margin-bottom: 3rem;
}
#meditate-hub .mh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #meditate-hub .mh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#meditate-hub .mh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #meditate-hub .mh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.mh-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.mh-card {
display: grid;
grid-template-columns: 2.5rem 1fr;
column-gap: 0.875rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 1.25rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .mh-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.mh-card:hover {
transform: none;
}
.mh-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.mh-dot {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.mh-card h2 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.375rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.mh-card .mh-sub,
.mh-card .mh-play {
grid-column: 1 / -1;
}
[data-theme="dark"] .mh-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.mh-card .mh-sub {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.5;
margin-bottom: 0.375rem;
}
[data-theme="dark"] .mh-card .mh-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.mh-card .mh-dur {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-muted, #6b7788);
margin-left: auto;
}
[data-theme="dark"] .mh-card .mh-dur {
color: var(--color-dark-text-muted, #94a3b8);
}
.mh-play {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
margin-top: 0.25rem;
min-height: 44px;
}
/* ── 480px+ ── */
@media (min-width: 480px) {
.mh-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.mh-card {
padding: 1.5rem;
}
}
/* ── 768px+ ── */
@media (min-width: 768px) {
.mh-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.mh-card {
padding: 1.75rem;
grid-template-columns: 3rem 1fr;
}
.mh-dot {
width: 3rem;
height: 3rem;
}
}
/* ── Hover (pointer devices only) ── */
@media (hover: hover) and (pointer: fine) {
.mh-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.mh-card:hover .mh-play {
color: var(--color-primary-hover, #0d7d63);
}
}
@media (prefers-reduced-motion: reduce) {
.mh-card {
transition: none;
}
}
</style>

<div id="meditate-hub">
<div class="mh-header">
<h1>ガイド付き瞑想</h1>
<p>無料で広告なし。タップして開始、アカウント不要。</p>
</div>

<div class="mh-grid">
<a href="/ja/meditate/calm-and-stress-relief/" class="mh-card" style="--accent:#818cf8">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#818cf8,#a78bfa)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#818cf8,#a78bfa)"></div>
<h2>リラックス＆ストレス解消</h2>
<p class="mh-sub">緊張をほぐし、呼吸に意識を戻しましょう</p>
<div class="mh-play"><span>始める &rarr;</span><span class="mh-dur">5分</span></div>
</a>

<a href="/ja/meditate/focus-and-clarity/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#3b82f6,#1e40af)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#3b82f6,#1e40af)"></div>
<h2>集中力＆クリアな思考</h2>
<p class="mh-sub">注意力を研ぎ澄まし、頭のモヤモヤを晴らしましょう</p>
<div class="mh-play"><span>始める &rarr;</span><span class="mh-dur">5分</span></div>
</a>

<a href="/ja/meditate/sleep-and-wind-down/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#4338ca)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#6366f1,#4338ca)"></div>
<h2>睡眠＆リラクゼーション</h2>
<p class="mh-sub">心を落ち着かせ、安らかな眠りの準備をしましょう</p>
<div class="mh-play"><span>始める &rarr;</span><span class="mh-dur">7分</span></div>
</a>

<a href="/ja/meditate/morning-energy/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f59e0b,#d97706)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#f59e0b,#d97706)"></div>
<h2>朝のエネルギー</h2>
<p class="mh-sub">活力と意図を持って一日を始めましょう</p>
<div class="mh-play"><span>始める &rarr;</span><span class="mh-dur">5分</span></div>
</a>

<a href="/ja/meditate/loving-kindness/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f472b6,#ec4899)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#f472b6,#ec4899)"></div>
<h2>慈悲の瞑想</h2>
<p class="mh-sub">自分自身と他者への思いやりを育みましょう</p>
<div class="mh-play"><span>始める &rarr;</span><span class="mh-dur">6分</span></div>
</a>

<a href="/ja/meditate/gratitude/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#fbbf24,#f59e0b)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#fbbf24,#f59e0b)"></div>
<h2>感謝</h2>
<p class="mh-sub">今あるものに感謝し、今この瞬間に喜びを見つけましょう</p>
<div class="mh-play"><span>始める &rarr;</span><span class="mh-dur">5分</span></div>
</a>

<a href="/ja/meditate/body-scan-and-tension-release/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#2dd4bf,#14b8a6)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#2dd4bf,#14b8a6)"></div>
<h2>ボディスキャン</h2>
<p class="mh-sub">体の緊張を感じ取り、解放していきましょう</p>
<div class="mh-play"><span>始める &rarr;</span><span class="mh-dur">8分</span></div>
</a>
</div>
</div>

### GURUKA, 無料のガイド付き瞑想・ビジュアライゼーション・脳トレゲーム
URL: https://guruka.com/ja/root/
Description: 無料のガイド付き瞑想、癒しのビジュアライゼーション、脳トレゲーム。アカウント不要。個人データ収集なし。オフラインモード対応。

<style>
.gk-home {
max-width: 40rem;
margin: 2rem auto;
padding: 0 1rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.gk-hero-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1.5rem;
border-radius: 1rem;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
text-decoration: none;
color: inherit;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
}
[data-theme="dark"].gk-hero-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
}
.gk-hero-icon {
font-size: 2.25rem;
line-height: 1;
flex-shrink: 0;
}
.gk-hero-body h2 {
font-size: 1.35rem;
font-weight: 700;
margin: 0 0 0.35rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gk-hero-body h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gk-hero-body p {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].gk-hero-body p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gk-hero-meta {
margin-top: 0.5rem;
font-size: 0.8rem;
color: var(--color-primary, #0f9072);
font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
.gk-hero-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
border-color: rgba(15,144,114,0.3);
}
[data-theme="dark"].gk-hero-card:hover {
box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.12);
border-color: rgba(15,144,114,0.4);
}
}
@media (min-width: 480px) {
.gk-home { padding: 0 1.5rem; gap: 1.5rem; margin: 2.5rem auto; }
.gk-hero-card { padding: 1.75rem; }
.gk-hero-icon { font-size: 2.5rem; }
.gk-hero-body h2 { font-size: 1.5rem; }
}
.gk-headline {
text-align: center;
margin-bottom: 0.5rem;
}
.gk-headline h1 {
font-size: 1.6rem;
font-weight: 800;
line-height: 1.2;
margin: 0 0 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gk-headline h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gk-headline p {
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--color-text-secondary, #4b5b6d);
margin: 0;
}
[data-theme="dark"].gk-headline p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
@media (min-width: 480px) {
.gk-headline h1 { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
.gk-hero-card { transition: none; }
}
</style>

<div class="gk-home">
<div class="gk-headline">
<h1>無料のガイド付き瞑想・ビジュアライゼーション・脳トレゲーム</h1>
<p>無料 · アカウント不要 · 個人データ収集なし · オフラインモード対応</p>
</div>
<a href="/ja/meditate/" class="gk-hero-card">
<div class="gk-hero-icon">🧘</div>
<div class="gk-hero-body">
<h2>瞑想</h2>
<p>落ち着き、集中力、ウェルビーイングのためのガイド付き瞑想</p>
<div class="gk-hero-meta">無料・アカウント不要</div>
</div>
</a>
<a href="/ja/visuals/" class="gk-hero-card">
<div class="gk-hero-icon">✨</div>
<div class="gk-hero-body">
<h2>アファメーション</h2>
<p>リラックスできるビジュアルとオプションのアファメーションテキスト</p>
<div class="gk-hero-meta">無料・アカウント不要</div>
</div>
</a>
<a href="/ja/games/" class="gk-hero-card">
<div class="gk-hero-icon">🧠</div>
<div class="gk-hero-body">
<h2>脳トレゲーム</h2>
<p>さまざまな認知スキルを鍛えるゲーム</p>
<div class="gk-hero-meta">無料・アカウント不要</div>
</div>
</a>
</div>

### アファメーション＆瞑想ビジュアル
URL: https://guruka.com/ja/visuals/
Description: カスタムアファメーションテキスト付きの全画面リラクゼーションビジュアル。自分だけのアファメーションを作成、ブラウザにプライベートに保存。

<style>
#visuals-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#visuals-hub .vh-header {
text-align: center;
margin-bottom: 3rem;
}
#visuals-hub .vh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #visuals-hub .vh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#visuals-hub .vh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #visuals-hub .vh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vh-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.vh-card {
display: grid;
grid-template-columns: 2.5rem 1fr;
column-gap: 0.875rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 1.25rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .vh-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.vh-card:hover { transform: none; }
.vh-dot {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.vh-card h2 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.375rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.vh-card .vh-sub,
.vh-card .vh-launch {
grid-column: 1 / -1;
}
[data-theme="dark"] .vh-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.vh-card .vh-sub {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.5;
margin-bottom: 0.375rem;
}
[data-theme="dark"] .vh-card .vh-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vh-launch {
display: flex;
align-items: center;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
margin-top: 0.25rem;
min-height: 44px;
}
@media (min-width: 480px) {
.vh-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.vh-card { padding: 1.5rem; }
}
@media (min-width: 768px) {
.vh-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.vh-card {
padding: 1.75rem;
grid-template-columns: 3rem 1fr;
}
.vh-dot { width: 3rem; height: 3rem; }
}
@media (hover: hover) and (pointer: fine) {
.vh-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.vh-card:hover .vh-launch {
color: var(--color-primary-hover, #0d7d63);
}
}
@media (prefers-reduced-motion: reduce) {
.vh-card { transition: none; }
}
</style>

<div id="visuals-hub">
<div class="vh-header">
<h1>瞑想ビジュアル</h1>
<p>リラクゼーションと集中のための落ち着いたフルスクリーンアニメーション。アファメーションテキストを入力して表示。<br>アカウント不要。</p>
</div>

<div class="vh-grid">
<a href="/ja/visuals/breathing-orb/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#a78bfa)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#6366f1,#a78bfa)"></div>
<h2>呼吸オーブ</h2>
<p class="vh-sub">呼吸をガイドする脈動するオーブ</p>
<div class="vh-launch"><span>開始 &rarr;</span></div>
</a>

<a href="/ja/visuals/aurora/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#22d3ee,#06b6d4)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#22d3ee,#06b6d4)"></div>
<h2>オーロラ</h2>
<p class="vh-sub">流れる北極光</p>
<div class="vh-launch"><span>開始 &rarr;</span></div>
</a>

<a href="/ja/visuals/starfield/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#1e293b,#475569)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#1e293b,#475569)"></div>
<h2>星空</h2>
<p class="vh-sub">深宇宙で瞬く星々</p>
<div class="vh-launch"><span>開始 &rarr;</span></div>
</a>

<a href="/ja/visuals/lava-flow/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f97316,#ef4444)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#f97316,#ef4444)"></div>
<h2>溶岩流</h2>
<p class="vh-sub">融合と分離を繰り返すしずく</p>
<div class="vh-launch"><span>開始 &rarr;</span></div>
</a>

<a href="/ja/visuals/mandala/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#eab308,#a855f7)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#eab308,#a855f7)"></div>
<h2>マンダラ</h2>
<p class="vh-sub">回転する神聖幾何学</p>
<div class="vh-launch"><span>開始 &rarr;</span></div>
</a>

<a href="/ja/visuals/dividing-cells/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#10b981,#22d3ee)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#10b981,#22d3ee)"></div>
<h2>細胞分裂</h2>
<p class="vh-sub">絶え間なく分裂する細胞</p>
<div class="vh-launch"><span>開始 &rarr;</span></div>
</a>
</div>
</div>

### Terms of Service
URL: https://guruka.com/ja/terms/
Description: Terms of Service for GURUKA

# Terms of Service

*Last updated: March 6, 2026*

## 1. Acceptance of Terms

By accessing and using GURUKA (https://guruka.com), you accept and agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use our website.

## 2. Use of Service

GURUKA provides free brain training games and guided meditations. You agree to use GURUKA only for lawful purposes and in accordance with these Terms. You agree not to use the service in any way that violates any applicable laws or regulations.

## 3. Intellectual Property

The content, features, and functionality of GURUKA are owned by us and are protected by international copyright, trademark, and other intellectual property laws.

## 4. Disclaimer

Content and activities on GURUKA are for entertainment and general wellness purposes only. They are not intended as medical advice or treatment. The brain training games and meditations are designed for personal enjoyment and should not be considered a substitute for professional medical or psychological guidance.

## 5. User Conduct

You agree not to:

- Use the service for any unlawful purpose
- Attempt to gain unauthorized access to any portion of the service
- Interfere with or disrupt the service or servers
- Collect or harvest any information from the service

## 6. Disclaimer of Warranties

The service is provided "as is" and "as available" without warranties of any kind, either express or implied. We do not warrant that the service will be uninterrupted, secure, or error-free.

## 7. Limitation of Liability

To the fullest extent permitted by law, GURUKA shall not be liable for any indirect, incidental, special, consequential, or punitive damages arising out of your use of the service.

## 8. Changes to Terms

We reserve the right to modify these terms at any time. We will notify users of any material changes by updating the "Last updated" date. Your continued use of the service after changes constitutes acceptance of the modified terms.

## 9. Contact

If you have questions about these Terms of Service, please contact us through our website at [https://guruka.com](https://guruka.com).

### Calm & Stress Relief Meditation
URL: https://guruka.com/meditate/calm-and-stress-relief/
Description: A guided meditation to release tension and return to calm.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/meditate/calm-and-stress-relief/');
</script>

### Body Scan & Tension Release Meditation
URL: https://guruka.com/meditate/body-scan-and-tension-release/
Description: A guided body scan meditation to find and release tension throughout your body.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/meditate/body-scan-and-tension-release/');
</script>

### How Your Data Works
URL: https://guruka.com/ja/your-data/
Description: Learn how GURUKA stores your data locally on your device, what happens when you switch devices or clear your browser, and how to view your stored data.

# How Your Data Works on GURUKA

GURUKA does not require an account, and we do not store any of your data on our servers. Everything you do on GURUKA stays on your own device, inside your web browser. This page explains what that means in plain terms.

## Your data lives on your device

When you use GURUKA, your progress is saved directly inside the browser you are using. This includes:

- Game scores and high scores
- Meditation session history
- Activity tracking data
- Your preferences and settings

This data is not sent anywhere. It is not uploaded to a server. It is not shared with anyone. It exists only on the device and browser where you created it.

## What happens on a different device or browser

Because your data is stored on your device, it is not available anywhere else. If you open GURUKA on a different phone, computer, or tablet, you will start fresh. The same applies if you use a different browser on the same device. For example, if you use Chrome on your laptop and then open GURUKA in Safari, your Chrome data will not appear in Safari.

This is the trade-off for not requiring an account: your data is completely private, but it does not follow you between devices.

## What happens when you clear your browser data

If you clear your browser's cache, cookies, or site data, your GURUKA data will be deleted. This is the same as what happens with any website that stores data locally. Most browsers let you clear data for specific sites without affecting others, but if you do a full cache clear, your GURUKA progress will be removed.

**To keep your data safe:** avoid clearing site data for guruka.com specifically, or be aware that a full browser cache clear will reset your GURUKA progress.

## No account means no data recovery

Since GURUKA does not have accounts or cloud storage, there is no way to recover your data once it is deleted. There is no "forgot password" or "restore from backup" option because no backup exists. Your data is fully in your hands.

## Why we chose this approach

Most apps and websites ask you to create an account so they can store your data on their servers. That is convenient for syncing across devices, but it also means the company has access to your personal information, usage patterns, and habits.

We chose a different path. GURUKA stores everything locally so that:

- **Your data is truly private** - we cannot see it, sell it, or lose it in a data breach
- **No sign-up is needed** - you can start meditating or playing games immediately
- **No tracking** - we do not use advertising pixels or third-party analytics
- **You are in full control** - you can delete your data at any time by clearing your browser storage

## For technical users: how to view your data

GURUKA stores data using your browser's **localStorage**. You can inspect it directly:

1. Open GURUKA in your browser (e.g. [guruka.com/games/](https://guruka.com/games/))
2. Open Developer Tools (press **F12** or **Ctrl+Shift+I** on Windows/Linux, **Cmd+Option+I** on Mac)
3. Go to the **Application** tab (Chrome/Edge) or **Storage** tab (Firefox)
4. In the left sidebar, expand **Local Storage** and click on **https://guruka.com**
5. You will see all stored keys and values: game scores, meditation history, preferences, and activity data

All keys are prefixed with `guruka_` so they are easy to identify. You can edit or delete individual entries, or right-click and choose "Clear" to remove everything.

## Questions?

If you have questions about how your data is handled, see our [Privacy Policy](/privacy/) or [contact us](https://docs.google.com/forms/d/e/1FAIpQLSe1ECOGIxdixwDDVyQqCgPRctD83_jqwEp-6bhysm8gu8uZKA/viewform).

### Focus & Clarity Meditation
URL: https://guruka.com/meditate/focus-and-clarity/
Description: A guided meditation to sharpen your attention and clear mental fog.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/meditate/focus-and-clarity/');
</script>

### Gratitude Meditation
URL: https://guruka.com/meditate/gratitude/
Description: A guided meditation to appreciate what you have and find joy in the present moment.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/meditate/gratitude/');
</script>

### Morning Energy Meditation
URL: https://guruka.com/meditate/morning-energy/
Description: A guided meditation to start your day with vitality and intention.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/meditate/morning-energy/');
</script>

### Sleep & Wind Down Meditation
URL: https://guruka.com/meditate/sleep-and-wind-down/
Description: A guided meditation to calm your mind and prepare for restful sleep.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/meditate/sleep-and-wind-down/');
</script>

### Calm & Clarity Affirmation for Visual Meditation
URL: https://guruka.com/ko/affirmation-calm-and-clarity/
Description: Free calm and clarity affirmation for visual meditation. Display positive affirmations over calming visuals, privately in your browser.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Calm & Clarity Affirmation</h1>
<p class="aff-intro">When thoughts race and the mind feels scattered, these words can guide you back to stillness. Use this affirmation during visual meditation to cultivate inner peace and mental clarity.</p>
<div class="aff-lines">
My mind is calm and clear<br>I release what I cannot control<br>I am present in this moment
</div>
<a href="/visuals/breathing-orb/?edit=calm-and-clarity" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Loving Kindness Meditation
URL: https://guruka.com/meditate/loving-kindness/
Description: A guided meditation to cultivate compassion for yourself and others.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/meditate/loving-kindness/');
</script>

### Focus & Energy Affirmation for Visual Meditation
URL: https://guruka.com/ko/affirmation-focus-and-energy/
Description: Free focus and energy affirmation for visual meditation. Sharpen concentration and channel your energy with calming visuals.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Focus & Energy Affirmation</h1>
<p class="aff-intro">A focused mind moves with purpose. This affirmation helps you channel your energy and move forward with intention during visual meditation.</p>
<div class="aff-lines">
My focus is sharp and steady<br>I channel my energy with purpose<br>I move forward with intention
</div>
<a href="/visuals/breathing-orb/?edit=focus-and-energy" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Gratitude Affirmation for Visual Meditation
URL: https://guruka.com/ko/affirmation-gratitude/
Description: Free gratitude affirmation for visual meditation. Cultivate thankfulness with calming visuals and positive affirmation text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Gratitude Affirmation</h1>
<p class="aff-intro">Gratitude shifts your focus from what is missing to what is present. Use this affirmation with a visual meditation to deepen your sense of appreciation and abundance.</p>
<div class="aff-lines">
I am grateful for this moment<br>Abundance flows into my life<br>I appreciate the simple things
</div>
<a href="/visuals/breathing-orb/?edit=gratitude" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Letting Go Affirmation for Visual Meditation
URL: https://guruka.com/ko/affirmation-letting-go/
Description: Free letting go affirmation for visual meditation. Release what no longer serves you with calming visuals and positive text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Letting Go Affirmation</h1>
<p class="aff-intro">Holding on to what no longer serves you creates tension. This affirmation helps you release, forgive, and create space for peace during visual meditation.</p>
<div class="aff-lines">
I let go of what no longer serves me<br>I forgive myself and others<br>I make space for peace
</div>
<a href="/visuals/breathing-orb/?edit=letting-go" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Quit Smoking Affirmation for Visual Meditation
URL: https://guruka.com/ko/affirmation-quit-smoking/
Description: Free quit smoking affirmation for visual meditation. Strengthen your resolve to quit with calming visuals and positive affirmations, privately in your browser.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Quit Smoking Affirmation</h1>
<p class="aff-intro">Every breath without smoke is a step toward freedom. This affirmation reinforces your choice to live smoke-free, pairing positive words with calming visual meditation to help you stay strong through cravings.</p>
<div class="aff-lines">
My lungs are cleaner every day<br>I am stronger than any craving<br>Every breath is a victory
</div>
<a href="/visuals/breathing-orb/?edit=quit-smoking" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Self-Confidence Affirmation for Visual Meditation
URL: https://guruka.com/ko/affirmation-self-confidence/
Description: Free self-confidence affirmation for visual meditation. Build belief in yourself with calming visuals and positive affirmations.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Self-Confidence Affirmation</h1>
<p class="aff-intro">Confidence grows when you remind yourself of your worth. Pair this affirmation with a calming visual to reinforce self-belief and inner strength.</p>
<div class="aff-lines">
I believe in myself and my abilities<br>I am worthy of good things<br>I grow stronger every day
</div>
<a href="/visuals/breathing-orb/?edit=self-confidence" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Sleep & Rest Affirmation for Visual Meditation
URL: https://guruka.com/ko/affirmation-sleep-and-rest/
Description: Free sleep and rest affirmation for visual meditation. Prepare for restful sleep with calming visuals and gentle affirmation text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Sleep & Rest Affirmation</h1>
<p class="aff-intro">Rest is not a luxury, it is essential. This affirmation prepares your mind and body for deep, peaceful sleep during a calming visual meditation.</p>
<div class="aff-lines">
I give myself permission to rest<br>My body relaxes with each breath<br>I drift into peaceful sleep
</div>
<a href="/visuals/breathing-orb/?edit=sleep-and-rest" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### 두뇌 훈련 게임
URL: https://guruka.com/ko/games/
Description: 무료 두뇌 게임. 계정 없음.

<style>
#games-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#games-hub .gh-header {
text-align: center;
margin-bottom: 3rem;
}
#games-hub .gh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #games-hub .gh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#games-hub .gh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #games-hub .gh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.gh-game-card {
display: grid;
grid-template-columns: 4rem 1fr;
column-gap: 1rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 2rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .gh-game-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.gh-game-card:hover {
transform: none;
}
.gh-game-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.gh-game-card.speed-match::before { background: #0f9072; }
.gh-game-card.memory-matrix::before { background: #f59e0b; }
.gh-game-card.sequence-recall::before { background: #10b981; }
.gh-game-card.number-crunch::before { background: #6366f1; }
.gh-game-card.color-clash::before { background: #ec4899; }
.gh-game-card.quick-sort::before { background: #f97316; }
.gh-game-card.pattern-path::before { background: #14b8a6; }
.gh-game-icon {
width: 4rem;
height: 4rem;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.gh-game-card h2 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.gh-game-card .gh-skill,
.gh-game-card .gh-desc,
.gh-game-card .gh-play-btn,
.gh-game-card .gh-best {
grid-column: 1 / -1;
}
[data-theme="dark"] .gh-game-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gh-game-card .gh-skill {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
margin-bottom: 0.5rem;
}
.speed-match .gh-skill { background: rgba(15,144,114,0.1); color: #0f9072; }
.memory-matrix .gh-skill { background: rgba(245,158,11,0.1); color: #f59e0b; }
.sequence-recall .gh-skill { background: rgba(16,185,129,0.1); color: #10b981; }
.number-crunch .gh-skill { background: rgba(99,102,241,0.1); color: #6366f1; }
.color-clash .gh-skill { background: rgba(236,72,153,0.1); color: #ec4899; }
.quick-sort .gh-skill { background: rgba(249,115,22,0.1); color: #f97316; }
.pattern-path .gh-skill { background: rgba(20,184,166,0.1); color: #14b8a6; }
.gh-game-card .gh-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 0.75rem;
}
[data-theme="dark"] .gh-game-card .gh-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-play-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
min-height: 44px;
}
.gh-play-btn::after {
content: '\2192';
transition: transform 0.2s;
}
.gh-best:empty {
display: none;
}
.gh-best {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-border, #dfe4ea);
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .gh-best {
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-best strong {
color: var(--color-primary, #0f9072);
}
.gh-info {
text-align: center;
padding: 2rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 1rem;
}
[data-theme="dark"] .gh-info {
background: var(--color-dark-bg-secondary, #1e293b);
}
.gh-info h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .gh-info h3 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gh-info p {
color: var(--color-text-secondary, #4b5b6d);
max-width: 32rem;
margin: 0 auto;
font-size: 0.9375rem;
}
[data-theme="dark"] .gh-info p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="games-hub">
<div class="gh-header">
<h1>&#129504; 두뇌 훈련 게임</h1>
<p>무료, 광고 없음. 점수는 로컬에 저장됩니다 - 계정 불필요.</p>
</div>

<div class="gh-grid">
<a href="/ko/games/speed-match/" class="gh-game-card speed-match">
<div class="gh-game-icon" style="background: rgba(15,144,114,0.1); color: #0f9072;">&#9889;</div>
<h2>Speed Match</h2>
<span class="gh-skill">처리 속도</span>
<p class="gh-desc">심볼을 비교하여 처리 속도를 테스트하세요. 현재 심볼이 이전 것과 같은가요? 시간이 다 되기 전에 빠르게 반응하세요!</p>
<span class="gh-play-btn">플레이하기</span>
<div class="gh-best" id="best-speed-match"></div>
</a>

<a href="/ko/games/memory-matrix/" class="gh-game-card memory-matrix">
<div class="gh-game-icon" style="background: rgba(245,158,11,0.1); color: #f59e0b;">&#9638;</div>
<h2>Memory Matrix</h2>
<span class="gh-skill">공간 기억력</span>
<p class="gh-desc">그리드에서 하이라이트된 셀의 패턴을 관찰하고 기억으로 재현하세요. 레벨이 올라가면 그리드가 커지고 패턴이 복잡해집니다.</p>
<span class="gh-play-btn">플레이하기</span>
<div class="gh-best" id="best-memory-matrix"></div>
</a>

<a href="/ko/games/sequence-recall/" class="gh-game-card sequence-recall">
<div class="gh-game-icon" style="background: rgba(16,185,129,0.1); color: #10b981;">&#9776;</div>
<h2>Sequence Recall</h2>
<span class="gh-skill">작업 기억력</span>
<p class="gh-desc">하나씩 표시되는 색의 순서를 기억하고 올바른 순서로 재현하세요. 상위 레벨에서는 계산 방해와 듀얼 트랙 과제가 추가됩니다.</p>
<span class="gh-play-btn">플레이하기</span>
<div class="gh-best" id="best-sequence-recall"></div>
</a>

<a href="/ko/games/number-crunch/" class="gh-game-card number-crunch">
<div class="gh-game-icon" style="background: rgba(99,102,241,0.1); color: #6366f1;">&#129518;</div>
<h2>Number Crunch</h2>
<span class="gh-skill">암산</span>
<p class="gh-desc">시간 제한 내에 빠진 요소가 있는 방정식을 풀어보세요. 상위 레벨에서는 답의 변환이 필요한 규칙 수정자가 추가됩니다.</p>
<span class="gh-play-btn">플레이하기</span>
<div class="gh-best" id="best-number-crunch"></div>
</a>

<a href="/ko/games/color-clash/" class="gh-game-card color-clash">
<div class="gh-game-icon" style="background: rgba(236,72,153,0.1); color: #ec4899;">&#127912;</div>
<h2>Color Clash</h2>
<span class="gh-skill">억제 조절</span>
<p class="gh-desc">색 이름이 다른 잉크 색으로 표시됩니다. 현재 규칙에 따라 올바른 답을 탭하세요. 잉크 색인지, 단어의 의미인지. 규칙이 바뀝니다!</p>
<span class="gh-play-btn">플레이하기</span>
<div class="gh-best" id="best-color-clash"></div>
</a>

<a href="/ko/games/quick-sort/" class="gh-game-card quick-sort">
<div class="gh-game-icon" style="background: rgba(249,115,22,0.1); color: #f97316;">&#128451;</div>
<h2>Quick Sort</h2>
<span class="gh-skill">과업 전환</span>
<p class="gh-desc">좌우로 스와이프하여 아이템을 카테고리로 분류하세요. 몇 라운드마다 분류 규칙이 바뀌어 정신적 유연성이 시험됩니다.</p>
<span class="gh-play-btn">플레이하기</span>
<div class="gh-best" id="best-quick-sort"></div>
</a>

<a href="/ko/games/pattern-path/" class="gh-game-card pattern-path">
<div class="gh-game-icon" style="background: rgba(20,184,166,0.1); color: #14b8a6;">&#129513;</div>
<h2>Pattern Path</h2>
<span class="gh-skill">패턴 인식</span>
<p class="gh-desc">시각 패턴의 나열에서 빠진 조각을 찾으세요. 색, 크기, 회전이 변하는 형태 속에서 규칙을 찾아 올바른 답을 선택하세요.</p>
<span class="gh-play-btn">플레이하기</span>
<div class="gh-best" id="best-pattern-path"></div>
</a>
</div>

<div class="gh-info">
<h3>플레이 방법</h3>
<p>각 게임은 20단계의 난이도로 당신의 실력에 맞춰집니다. 최고의 결과를 위해 매일 15~20분, 7가지 게임 모두를 훈련하세요. 최고 기록은 브라우저에 저장됩니다.</p>
</div>
</div>

<script>
(function() {
var games = ['speed-match', 'memory-matrix', 'sequence-recall', 'number-crunch', 'color-clash', 'quick-sort', 'pattern-path'];
games.forEach(function(game) {
var best = localStorage.getItem('guruka_' + game + '_best');
var el = document.getElementById('best-' + game);
if (el && best) {
el.innerHTML = '최고: <strong>' + Number(best).toLocaleString() + '</strong> 포인트';
}
});
})();
</script>

<style>
/* ── Mobile-first responsive ── */
.gh-game-card {
padding: 1.5rem;
grid-template-columns: 3.25rem 1fr;
}
.gh-game-icon {
width: 3.25rem;
height: 3.25rem;
}
.gh-game-card .gh-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 768px) {
.gh-game-card {
padding: 2rem;
grid-template-columns: 4rem 1fr;
}
.gh-game-icon {
width: 4rem;
height: 4rem;
}
.gh-game-card .gh-desc {
-webkit-line-clamp: unset;
overflow: visible;
}
}
@media (hover: hover) and (pointer: fine) {
.gh-game-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}
.gh-game-card:hover .gh-play-btn::after {
transform: translateX(4px);
}
}
@media (prefers-reduced-motion: reduce) {
.gh-game-card {
transition: none;
}
}
</style>

### 가이드 명상
URL: https://guruka.com/ko/meditate/
Description: 평온, 집중, 수면, 에너지, 웰빙을 위한 무료 가이드 명상. 탭하여 시작, 계정 불필요.

<style>
#meditate-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#meditate-hub .mh-header {
text-align: center;
margin-bottom: 3rem;
}
#meditate-hub .mh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #meditate-hub .mh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#meditate-hub .mh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #meditate-hub .mh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.mh-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.mh-card {
display: grid;
grid-template-columns: 2.5rem 1fr;
column-gap: 0.875rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 1.25rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .mh-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.mh-card:hover {
transform: none;
}
.mh-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.mh-dot {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.mh-card h2 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.375rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.mh-card .mh-sub,
.mh-card .mh-play {
grid-column: 1 / -1;
}
[data-theme="dark"] .mh-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.mh-card .mh-sub {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.5;
margin-bottom: 0.375rem;
}
[data-theme="dark"] .mh-card .mh-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.mh-card .mh-dur {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-muted, #6b7788);
margin-left: auto;
}
[data-theme="dark"] .mh-card .mh-dur {
color: var(--color-dark-text-muted, #94a3b8);
}
.mh-play {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
margin-top: 0.25rem;
min-height: 44px;
}
/* ── 480px+ ── */
@media (min-width: 480px) {
.mh-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.mh-card {
padding: 1.5rem;
}
}
/* ── 768px+ ── */
@media (min-width: 768px) {
.mh-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.mh-card {
padding: 1.75rem;
grid-template-columns: 3rem 1fr;
}
.mh-dot {
width: 3rem;
height: 3rem;
}
}
/* ── Hover (pointer devices only) ── */
@media (hover: hover) and (pointer: fine) {
.mh-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.mh-card:hover .mh-play {
color: var(--color-primary-hover, #0d7d63);
}
}
@media (prefers-reduced-motion: reduce) {
.mh-card {
transition: none;
}
}
</style>

<div id="meditate-hub">
<div class="mh-header">
<h1>가이드 명상</h1>
<p>무료, 광고 없음. 탭하여 시작, 계정 불필요.</p>
</div>

<div class="mh-grid">
<a href="/ko/meditate/calm-and-stress-relief/" class="mh-card" style="--accent:#818cf8">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#818cf8,#a78bfa)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#818cf8,#a78bfa)"></div>
<h2>마음 안정 & 스트레스 해소</h2>
<p class="mh-sub">긴장을 풀고 호흡에 집중하세요</p>
<div class="mh-play"><span>시작하기 &rarr;</span><span class="mh-dur">5분</span></div>
</a>

<a href="/ko/meditate/focus-and-clarity/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#3b82f6,#1e40af)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#3b82f6,#1e40af)"></div>
<h2>집중력 & 맑은 사고</h2>
<p class="mh-sub">주의력을 날카롭게 하고 머릿속 안개를 걷어내세요</p>
<div class="mh-play"><span>시작하기 &rarr;</span><span class="mh-dur">5분</span></div>
</a>

<a href="/ko/meditate/sleep-and-wind-down/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#4338ca)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#6366f1,#4338ca)"></div>
<h2>수면 & 릴랙세이션</h2>
<p class="mh-sub">마음을 가라앉히고 편안한 잠을 준비하세요</p>
<div class="mh-play"><span>시작하기 &rarr;</span><span class="mh-dur">7분</span></div>
</a>

<a href="/ko/meditate/morning-energy/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f59e0b,#d97706)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#f59e0b,#d97706)"></div>
<h2>아침 에너지</h2>
<p class="mh-sub">활력과 의지를 가지고 하루를 시작하세요</p>
<div class="mh-play"><span>시작하기 &rarr;</span><span class="mh-dur">5분</span></div>
</a>

<a href="/ko/meditate/loving-kindness/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f472b6,#ec4899)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#f472b6,#ec4899)"></div>
<h2>자비 명상</h2>
<p class="mh-sub">자신과 타인에 대한 연민을 키우세요</p>
<div class="mh-play"><span>시작하기 &rarr;</span><span class="mh-dur">6분</span></div>
</a>

<a href="/ko/meditate/gratitude/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#fbbf24,#f59e0b)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#fbbf24,#f59e0b)"></div>
<h2>감사</h2>
<p class="mh-sub">가진 것에 감사하고 현재 이 순간에 기쁨을 찾으세요</p>
<div class="mh-play"><span>시작하기 &rarr;</span><span class="mh-dur">5분</span></div>
</a>

<a href="/ko/meditate/body-scan-and-tension-release/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#2dd4bf,#14b8a6)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#2dd4bf,#14b8a6)"></div>
<h2>바디스캔</h2>
<p class="mh-sub">몸의 긴장을 느끼고 해방시키세요</p>
<div class="mh-play"><span>시작하기 &rarr;</span><span class="mh-dur">8분</span></div>
</a>
</div>
</div>

### Privacy Policy
URL: https://guruka.com/ko/privacy/
Description: Privacy Policy for GURUKA

# Privacy Policy

*Last updated: March 11, 2026*

**No sign-up is required to use GURUKA. All user data, including game scores, meditation stats, activity tracking, and preferences, is stored locally on your device only. We do not collect, store, or share your personal data. No data is transmitted to our servers or any third party.**

## 1. Information We Do NOT Collect

GURUKA is designed with a local-first approach. We do not collect personal information such as names, email addresses, or account credentials, because GURUKA requires no sign-up or login.

All user-generated data stays on your device:

- **Game scores and progress** - stored in your browser's localStorage
- **Meditation history and stats** - stored in your browser's localStorage
- **Activity tracking data** - stored in your browser's localStorage
- **Preferences and settings** - stored in your browser's localStorage

None of this data is transmitted to any server. It exists only on your device and can be cleared at any time through your browser settings.

## 2. How We Use Information

Since we do not collect personal data, our use of information is limited to:

- Improving and optimizing the website
- Analyzing general usage patterns and trends
- Maintaining the security of our service

## 3. Cookies and Tracking

GURUKA does not use tracking cookies, third-party trackers, or advertising pixels. The only browser storage used is localStorage to save your game and activity data locally on your device. You can clear this data at any time through your browser settings.

## 4. Third-Party Services

GURUKA does not use third-party analytics services or embed third-party tracking scripts. Your browsing activity on GURUKA is not shared with any external service.

## 5. Hosting and Bot Protection

GURUKA is hosted on Cloudflare, which provides DNS, content delivery, and security services. As part of its security features, Cloudflare may occasionally display a brief verification screen ("Verify you are human") to protect the website from automated bots and malicious traffic. This check is lightweight, privacy-preserving, and does not use traditional CAPTCHA puzzles. It runs automatically and typically completes in seconds without requiring any action from you. Cloudflare processes this verification as a data processor on our behalf. For details on how Cloudflare handles this data, see [Cloudflare's Privacy Policy](https://www.cloudflare.com/privacypolicy/).

## 6. Data Security

Because your data is stored locally on your device and not transmitted to our servers, you maintain full control over it. We implement appropriate technical measures to ensure the website itself is served securely.

## 7. Your Rights

Since GURUKA stores no personal data on any server, there is no personal data for us to access, correct, or delete on your behalf. All user data is stored locally in your browser's localStorage and is fully under your control. You can view or clear this data at any time through your browser settings. Clearing your browser cache or site data will permanently delete all stored data including game scores, meditation history, and preferences. For a detailed explanation of how your data is stored and managed, see [How Your Data Works](/your-data/).

## 8. Children's Privacy

GURUKA is suitable for users of all ages. We do not collect personal information from anyone, including children.

## 9. Changes to Privacy Policy

We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new policy on this page and updating the "Last updated" date.

## 10. Contact

If you have questions about this Privacy Policy, please contact us through our website at [https://guruka.com](https://guruka.com).

### GURUKA, 무료 가이드 명상, 시각화 & 두뇌 게임
URL: https://guruka.com/ko/root/
Description: 무료 가이드 명상, 편안한 시각화, 두뇌 훈련 게임. 계정 불필요. 개인정보 수집 없음. 오프라인 모드 지원.

<style>
.gk-home {
max-width: 40rem;
margin: 2rem auto;
padding: 0 1rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.gk-hero-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1.5rem;
border-radius: 1rem;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
text-decoration: none;
color: inherit;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
}
[data-theme="dark"].gk-hero-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
}
.gk-hero-icon {
font-size: 2.25rem;
line-height: 1;
flex-shrink: 0;
}
.gk-hero-body h2 {
font-size: 1.35rem;
font-weight: 700;
margin: 0 0 0.35rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gk-hero-body h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gk-hero-body p {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].gk-hero-body p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gk-hero-meta {
margin-top: 0.5rem;
font-size: 0.8rem;
color: var(--color-primary, #0f9072);
font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
.gk-hero-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
border-color: rgba(15,144,114,0.3);
}
[data-theme="dark"].gk-hero-card:hover {
box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.12);
border-color: rgba(15,144,114,0.4);
}
}
@media (min-width: 480px) {
.gk-home { padding: 0 1.5rem; gap: 1.5rem; margin: 2.5rem auto; }
.gk-hero-card { padding: 1.75rem; }
.gk-hero-icon { font-size: 2.5rem; }
.gk-hero-body h2 { font-size: 1.5rem; }
}
.gk-headline {
text-align: center;
margin-bottom: 0.5rem;
}
.gk-headline h1 {
font-size: 1.6rem;
font-weight: 800;
line-height: 1.2;
margin: 0 0 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gk-headline h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gk-headline p {
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--color-text-secondary, #4b5b6d);
margin: 0;
}
[data-theme="dark"].gk-headline p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
@media (min-width: 480px) {
.gk-headline h1 { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
.gk-hero-card { transition: none; }
}
</style>

<div class="gk-home">
<div class="gk-headline">
<h1>무료 가이드 명상, 시각화 & 두뇌 게임</h1>
<p>무료 · 계정 불필요 · 개인정보 수집 없음 · 오프라인 모드 지원</p>
</div>
<a href="/ko/meditate/" class="gk-hero-card">
<div class="gk-hero-icon">🧘</div>
<div class="gk-hero-body">
<h2>명상</h2>
<p>평온, 집중, 웰빙을 위한 가이드 명상</p>
<div class="gk-hero-meta">무료, 계정 불필요</div>
</div>
</a>
<a href="/ko/visuals/" class="gk-hero-card">
<div class="gk-hero-icon">✨</div>
<div class="gk-hero-body">
<h2>확언</h2>
<p>선택적 확언 텍스트가 포함된 편안한 비주얼</p>
<div class="gk-hero-meta">무료, 계정 불필요</div>
</div>
</a>
<a href="/ko/games/" class="gk-hero-card">
<div class="gk-hero-icon">🧠</div>
<div class="gk-hero-body">
<h2>두뇌 게임</h2>
<p>다양한 인지 능력을 훈련하는 게임</p>
<div class="gk-hero-meta">무료, 계정 불필요</div>
</div>
</a>
</div>

### Terms of Service
URL: https://guruka.com/ko/terms/
Description: Terms of Service for GURUKA

# Terms of Service

*Last updated: March 6, 2026*

## 1. Acceptance of Terms

By accessing and using GURUKA (https://guruka.com), you accept and agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use our website.

## 2. Use of Service

GURUKA provides free brain training games and guided meditations. You agree to use GURUKA only for lawful purposes and in accordance with these Terms. You agree not to use the service in any way that violates any applicable laws or regulations.

## 3. Intellectual Property

The content, features, and functionality of GURUKA are owned by us and are protected by international copyright, trademark, and other intellectual property laws.

## 4. Disclaimer

Content and activities on GURUKA are for entertainment and general wellness purposes only. They are not intended as medical advice or treatment. The brain training games and meditations are designed for personal enjoyment and should not be considered a substitute for professional medical or psychological guidance.

## 5. User Conduct

You agree not to:

- Use the service for any unlawful purpose
- Attempt to gain unauthorized access to any portion of the service
- Interfere with or disrupt the service or servers
- Collect or harvest any information from the service

## 6. Disclaimer of Warranties

The service is provided "as is" and "as available" without warranties of any kind, either express or implied. We do not warrant that the service will be uninterrupted, secure, or error-free.

## 7. Limitation of Liability

To the fullest extent permitted by law, GURUKA shall not be liable for any indirect, incidental, special, consequential, or punitive damages arising out of your use of the service.

## 8. Changes to Terms

We reserve the right to modify these terms at any time. We will notify users of any material changes by updating the "Last updated" date. Your continued use of the service after changes constitutes acceptance of the modified terms.

## 9. Contact

If you have questions about these Terms of Service, please contact us through our website at [https://guruka.com](https://guruka.com).

### 확언 및 명상 비주얼
URL: https://guruka.com/ko/visuals/
Description: 맞춤 확언 텍스트가 포함된 전체 화면 편안한 비주얼. 나만의 확언을 만들고 브라우저에 비공개로 저장하세요.

<style>
#visuals-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#visuals-hub .vh-header {
text-align: center;
margin-bottom: 3rem;
}
#visuals-hub .vh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #visuals-hub .vh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#visuals-hub .vh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #visuals-hub .vh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vh-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.vh-card {
display: grid;
grid-template-columns: 2.5rem 1fr;
column-gap: 0.875rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 1.25rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .vh-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.vh-card:hover { transform: none; }
.vh-dot {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.vh-card h2 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.375rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.vh-card .vh-sub,
.vh-card .vh-launch {
grid-column: 1 / -1;
}
[data-theme="dark"] .vh-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.vh-card .vh-sub {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.5;
margin-bottom: 0.375rem;
}
[data-theme="dark"] .vh-card .vh-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vh-launch {
display: flex;
align-items: center;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
margin-top: 0.25rem;
min-height: 44px;
}
@media (min-width: 480px) {
.vh-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.vh-card { padding: 1.5rem; }
}
@media (min-width: 768px) {
.vh-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.vh-card {
padding: 1.75rem;
grid-template-columns: 3rem 1fr;
}
.vh-dot { width: 3rem; height: 3rem; }
}
@media (hover: hover) and (pointer: fine) {
.vh-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.vh-card:hover .vh-launch {
color: var(--color-primary-hover, #0d7d63);
}
}
@media (prefers-reduced-motion: reduce) {
.vh-card { transition: none; }
}
</style>

<div id="visuals-hub">
<div class="vh-header">
<h1>명상 비주얼</h1>
<p>휴식과 집중을 위한 차분한 전체 화면 애니메이션. 확언 텍스트를 입력하여 표시하세요.<br>계정이 필요하지 않습니다.</p>
</div>

<div class="vh-grid">
<a href="/ko/visuals/breathing-orb/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#a78bfa)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#6366f1,#a78bfa)"></div>
<h2>호흡 오브</h2>
<p class="vh-sub">호흡을 안내하는 맥동하는 오브</p>
<div class="vh-launch"><span>시작 &rarr;</span></div>
</a>

<a href="/ko/visuals/aurora/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#22d3ee,#06b6d4)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#22d3ee,#06b6d4)"></div>
<h2>오로라</h2>
<p class="vh-sub">흐르는 북극광</p>
<div class="vh-launch"><span>시작 &rarr;</span></div>
</a>

<a href="/ko/visuals/starfield/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#1e293b,#475569)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#1e293b,#475569)"></div>
<h2>별빛 필드</h2>
<p class="vh-sub">깊은 우주에서 반짝이는 별들</p>
<div class="vh-launch"><span>시작 &rarr;</span></div>
</a>

<a href="/ko/visuals/lava-flow/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f97316,#ef4444)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#f97316,#ef4444)"></div>
<h2>용암 흐름</h2>
<p class="vh-sub">합쳐지고 분리되는 방울</p>
<div class="vh-launch"><span>시작 &rarr;</span></div>
</a>

<a href="/ko/visuals/mandala/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#eab308,#a855f7)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#eab308,#a855f7)"></div>
<h2>만다라</h2>
<p class="vh-sub">회전하는 신성한 기하학</p>
<div class="vh-launch"><span>시작 &rarr;</span></div>
</a>

<a href="/ko/visuals/dividing-cells/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#10b981,#22d3ee)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#10b981,#22d3ee)"></div>
<h2>세포 분열</h2>
<p class="vh-sub">끊임없이 분열하는 세포</p>
<div class="vh-launch"><span>시작 &rarr;</span></div>
</a>
</div>
</div>

### How Your Data Works
URL: https://guruka.com/ko/your-data/
Description: Learn how GURUKA stores your data locally on your device, what happens when you switch devices or clear your browser, and how to view your stored data.

# How Your Data Works on GURUKA

GURUKA does not require an account, and we do not store any of your data on our servers. Everything you do on GURUKA stays on your own device, inside your web browser. This page explains what that means in plain terms.

## Your data lives on your device

When you use GURUKA, your progress is saved directly inside the browser you are using. This includes:

- Game scores and high scores
- Meditation session history
- Activity tracking data
- Your preferences and settings

This data is not sent anywhere. It is not uploaded to a server. It is not shared with anyone. It exists only on the device and browser where you created it.

## What happens on a different device or browser

Because your data is stored on your device, it is not available anywhere else. If you open GURUKA on a different phone, computer, or tablet, you will start fresh. The same applies if you use a different browser on the same device. For example, if you use Chrome on your laptop and then open GURUKA in Safari, your Chrome data will not appear in Safari.

This is the trade-off for not requiring an account: your data is completely private, but it does not follow you between devices.

## What happens when you clear your browser data

If you clear your browser's cache, cookies, or site data, your GURUKA data will be deleted. This is the same as what happens with any website that stores data locally. Most browsers let you clear data for specific sites without affecting others, but if you do a full cache clear, your GURUKA progress will be removed.

**To keep your data safe:** avoid clearing site data for guruka.com specifically, or be aware that a full browser cache clear will reset your GURUKA progress.

## No account means no data recovery

Since GURUKA does not have accounts or cloud storage, there is no way to recover your data once it is deleted. There is no "forgot password" or "restore from backup" option because no backup exists. Your data is fully in your hands.

## Why we chose this approach

Most apps and websites ask you to create an account so they can store your data on their servers. That is convenient for syncing across devices, but it also means the company has access to your personal information, usage patterns, and habits.

We chose a different path. GURUKA stores everything locally so that:

- **Your data is truly private** - we cannot see it, sell it, or lose it in a data breach
- **No sign-up is needed** - you can start meditating or playing games immediately
- **No tracking** - we do not use advertising pixels or third-party analytics
- **You are in full control** - you can delete your data at any time by clearing your browser storage

## For technical users: how to view your data

GURUKA stores data using your browser's **localStorage**. You can inspect it directly:

1. Open GURUKA in your browser (e.g. [guruka.com/games/](https://guruka.com/games/))
2. Open Developer Tools (press **F12** or **Ctrl+Shift+I** on Windows/Linux, **Cmd+Option+I** on Mac)
3. Go to the **Application** tab (Chrome/Edge) or **Storage** tab (Firefox)
4. In the left sidebar, expand **Local Storage** and click on **https://guruka.com**
5. You will see all stored keys and values: game scores, meditation history, preferences, and activity data

All keys are prefixed with `guruka_` so they are easy to identify. You can edit or delete individual entries, or right-click and choose "Clear" to remove everything.

## Questions?

If you have questions about how your data is handled, see our [Privacy Policy](/privacy/) or [contact us](https://docs.google.com/forms/d/e/1FAIpQLSe1ECOGIxdixwDDVyQqCgPRctD83_jqwEp-6bhysm8gu8uZKA/viewform).

### Aurora - Affirmation Visual
URL: https://guruka.com/visuals/aurora/
Description: Flowing northern lights with optional affirmation text overlay. Create your own private affirmations.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #020810;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/visuals/" class="vp-back">&larr; All Visuals</a>
<h1 class="vp-title">Aurora</h1>
<p class="vp-desc">Flowing northern lights.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#22d3ee,#10b981)"></div>
<span>Arctic</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#a855f7,#ec4899)"></div>
<span>Cosmic</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f472b6,#eab308)"></div>
<span>Dawn</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Affirmation text (optional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">presets <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optional. Enter affirmations here. Text will display one line after another."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Pace <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Start</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Tap anywhere to exit</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'aurora';
var currentAffId = null;
var paceLabels = ["Very slow","Slow","Normal","Fast","Very fast"];
var currentPace = 2;
var schemes = [
{ name:'Arctic', bg:'#020810',
bands:[
{colors:['#22d3ee','#06b6d4'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#10b981','#059669'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#22d3ee','#14b8a6'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#34d399','#06b6d4'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#67e8f9','#a7f3d0'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]},
{ name:'Cosmic', bg:'#0a0510',
bands:[
{colors:['#a855f7','#7c3aed'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#ec4899','#be185d'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#c084fc','#e879f9'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#8b5cf6','#d946ef'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#f0abfc','#c4b5fd'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]},
{ name:'Dawn', bg:'#100805',
bands:[
{colors:['#f472b6','#fb923c'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#eab308','#f59e0b'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#fb7185','#fbbf24'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#f9a8d4','#fcd34d'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#fda4af','#fde68a'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]}
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var offCanvas, offCtx, halfW, halfH;

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'None',text:''},
{title:'Calm & clarity',text:'My mind is calm and clear\nI release what I cannot control\nI am present in this moment'},
{title:'Self-confidence',text:'I believe in myself and my abilities\nI am worthy of good things\nI grow stronger every day'},
{title:'Letting go',text:'I let go of what no longer serves me\nI forgive myself and others\nI make space for peace'},
{title:'Gratitude',text:'I am grateful for this moment\nAbundance flows into my life\nI appreciate the simple things'},
{title:'Focus & energy',text:'My focus is sharp and steady\nI channel my energy with purpose\nI move forward with intention'},
{title:'Sleep & rest',text:'I give myself permission to rest\nMy body relaxes with each breath\nI drift into peaceful sleep'},
{title:'Quit smoking',text:'My lungs are cleaner every day\nI am stronger than any craving\nEvery breath is a victory'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Clear text') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var time = t / 1000;

// Parse background color for smoothstep
var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);

if (reducedMotion) {
ctx.globalAlpha = 1;
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);
for (var b = 0; b < s.bands.length; b++) {
var band = s.bands[b];
var y = H * band.baseY;
var grad = ctx.createLinearGradient(0, y - H * 0.1, 0, y + H * 0.15);
grad.addColorStop(0, band.colors[0] + '00');
grad.addColorStop(0.3, band.colors[0] + hexAlpha(band.alpha));
grad.addColorStop(0.7, band.colors[1] + hexAlpha(band.alpha * 0.7));
grad.addColorStop(1, band.colors[1] + '00');
ctx.shadowColor = band.colors[0];
ctx.shadowBlur = 15;
ctx.fillStyle = grad;
ctx.fillRect(0, y - H * 0.1, W, H * 0.25);
}
ctx.shadowBlur = 0;
return;
}

var scaleX = halfW / W, scaleY = halfH / H;

// 1. Clear offscreen with background
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// 2. Draw bands on offscreen with 'screen' compositing
offCtx.save();
offCtx.globalCompositeOperation = 'screen';

for (var b = 0; b < s.bands.length; b++) {
var band = s.bands[b];
var pulse = 0.75 + 0.25 * Math.sin(time * 0.08 + b * 0.7);
var vertOsc = Math.sin(time * 0.04 + b * 1.1) * 0.04;
offCtx.beginPath();

var baseY = halfH * (band.baseY + vertOsc);
var amp = halfH * band.amp;
for (var x = 0; x <= halfW; x += 3) {
var realX = x / scaleX;
var noise1 = Math.sin(realX * band.freq + time * band.speed);
var noise2 = Math.sin(realX * band.freq * 1.7 + time * band.speed * 0.6 + 2.1);
var noise3 = Math.sin(realX * band.freq * 0.5 + time * band.speed * 1.3 + 4.3);
var y = baseY + amp * (noise1 * 0.5 + noise2 * 0.3 + noise3 * 0.2);
if (x === 0) offCtx.moveTo(x, y);
else offCtx.lineTo(x, y);
}

offCtx.lineTo(halfW, halfH * (band.baseY + vertOsc + 0.25));
offCtx.lineTo(0, halfH * (band.baseY + vertOsc + 0.25));
offCtx.closePath();

var grad = offCtx.createLinearGradient(0, baseY - amp, 0, baseY + halfH * 0.25);
grad.addColorStop(0, band.colors[0] + hexAlpha(band.alpha * 0.3 * pulse));
grad.addColorStop(0.3, band.colors[0] + hexAlpha(band.alpha * pulse));
grad.addColorStop(0.7, band.colors[1] + hexAlpha(band.alpha * 0.6 * pulse));
grad.addColorStop(1, band.colors[1] + '00');
offCtx.fillStyle = grad;
offCtx.fill();
}

offCtx.restore();

// 3. Smoothstep threshold on offscreen pixel data
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// 4. Upscale to main canvas with smoothing
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

// 5. Draw stars on main canvas at full resolution (stays crisp)
for (var i = 0; i < 60; i++) {
var sx = (Math.sin(i * 127.1 + 311.7) * 0.5 + 0.5) * W;
var sy = (Math.sin(i * 269.5 + 183.3) * 0.5 + 0.5) * H * 0.6;
var sa = 0.2 + 0.3 * Math.abs(Math.sin(time * 0.5 + i));
ctx.beginPath();
ctx.arc(sx, sy, 0.8, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,255,255,' + sa + ')';
ctx.fill();
}

animId = requestAnimationFrame(draw);
}

function hexAlpha(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Reduced motion enabled · Showing static view<br>Tap anywhere to exit';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Pre-fill default affirmation text
var affInput = document.getElementById('vp-aff-input');
if (!affInput.value) {
affInput.value = 'My mind is calm and clear\nI release what I cannot control\nI am present in this moment';
}
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Dividing Cells - Affirmation Visual
URL: https://guruka.com/visuals/dividing-cells/
Description: Cells growing and dividing in a meditative loop. Add personal affirmation text, stored privately in your browser.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"].vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"].vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #050a12;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme,.vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"].vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"].vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"].vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"].vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"].vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header.vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"].vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"].vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"].vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"].vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/visuals/" class="vp-back">&larr; All Visuals</a>
<h1 class="vp-title">Dividing Cells</h1>
<p class="vp-desc">Cells dividing endlessly.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#22d3ee,#14b8a6)"></div>
<span>Bioluminescent</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#fb923c,#f97316)"></div>
<span>Organic</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#94a3b8,#e2e8f0)"></div>
<span>Microscope</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Affirmation text (optional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">presets <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optional. Enter affirmations here. Text will display one line after another."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Pace <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Start</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Tap anywhere to exit</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'dividing-cells';
var currentAffId = null;
var paceLabels = ["Very slow","Slow","Normal","Fast","Very fast"];
var currentPace = 2;
var schemes = [
{ name:'Bioluminescent', bg:'#050a12',
colors:['#22d3ee','#14b8a6','#06b6d4','#2dd4bf','#67e8f9','#5eead4'] },
{ name:'Organic', bg:'#0a0808',
colors:['#fb923c','#f97316','#fbbf24','#f59e0b','#fdba74','#fcd34d'] },
{ name:'Microscope', bg:'#020508',
colors:['#94a3b8','#cbd5e1','#64748b','#e2e8f0','#475569','#f1f5f9'] }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var maxVisible = 8;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var offCanvas, offCtx, halfW, halfH;

// State
var centerCell = null; // the cell currently growing/dividing at center
var daughters = []; // drifting daughter cells
var cycleState = 'GROWING_AT_CENTER'; // GROWING_AT_CENTER, DIVIDING, STAGING_PAUSE
var pauseTimer = 0;
var nextId = 0;

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'None',text:''},
{title:'Calm & clarity',text:'My mind is calm and clear\nI release what I cannot control\nI am present in this moment'},
{title:'Self-confidence',text:'I believe in myself and my abilities\nI am worthy of good things\nI grow stronger every day'},
{title:'Letting go',text:'I let go of what no longer serves me\nI forgive myself and others\nI make space for peace'},
{title:'Gratitude',text:'I am grateful for this moment\nAbundance flows into my life\nI appreciate the simple things'},
{title:'Focus & energy',text:'My focus is sharp and steady\nI channel my energy with purpose\nI move forward with intention'},
{title:'Sleep & rest',text:'I give myself permission to rest\nMy body relaxes with each breath\nI drift into peaceful sleep'},
{title:'Quit smoking',text:'My lungs are cleaner every day\nI am stronger than any craving\nEvery breath is a victory'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Clear text') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
}

function makeOrganelles() {
var orgs = [];
var count = 2 + Math.floor(Math.random() * 2);
for (var i = 0; i < count; i++) {
orgs.push({
dist: 0.3 + Math.random() * 0.35,
angle: Math.random() * Math.PI * 2,
speed: (0.0003 + Math.random() * 0.0004) * (Math.random() < 0.5 ? 1 : -1),
size: 0.06 + Math.random() * 0.04
});
}
return orgs;
}

function spawnCenterCell() {
var W = canvas.width, H = canvas.height;
var minDim = Math.min(W, H);
var targetR = minDim * (0.06 + Math.random() * 0.02);
centerCell = {
id: nextId++,
x: W / 2,
y: H / 2,
r: targetR * 0.15,
targetR: targetR,
divAngle: Math.random() * Math.PI * 2,
colorIdx: 0,
divProgress: 0,
organelles: makeOrganelles(),
opacity: 0.7,
growTimer: 0
};
cycleState = 'GROWING_AT_CENTER';
}

function spawnDaughter(x, y, r, angle, colorIdx, organelles) {
daughters.push({
id: nextId++,
x: x,
y: y,
r: r,
vx: Math.cos(angle) * 0.25,
vy: Math.sin(angle) * 0.25,
phase: Math.random() * Math.PI * 2,
colorIdx: colorIdx,
organelles: organelles,
opacity: 1,
age: 0,
fading: false,
fadeAge: 0
});
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var scaleX = halfW / W, scaleY = halfH / H, scaleR = Math.min(scaleX, scaleY);

var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);

if (reducedMotion) {
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);
offCtx.globalCompositeOperation = 'lighter';
var breathe = 0.85 + 0.15 * Math.sin(t * 0.0008);
// Draw a center cell mid-division and a couple daughters
var midR = Math.min(W, H) * 0.07;
var ci = 0;
// Two sub-blobs for figure-8
var sep = midR * 0.6;
var a = Math.PI * 0.25;
for (var bi = 0; bi < 2; bi++) {
var bx = (W / 2 + Math.cos(a) * sep * (bi === 0 ? 1 : -1)) * scaleX;
var by = (H / 2 + Math.sin(a) * sep * (bi === 0 ? 1 : -1)) * scaleY;
var br = midR * 0.7 * breathe * scaleR;
var grad = offCtx.createRadialGradient(bx, by, 0, bx, by, br * 1.8);
grad.addColorStop(0, s.colors[ci] + '73');
grad.addColorStop(0.5, s.colors[ci] + '59');
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(bx, by, br * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
// Two static daughters
var dPositions = [[W * 0.25, H * 0.35], [W * 0.72, H * 0.65]];
for (var di = 0; di < 2; di++) {
var dx = dPositions[di][0] * scaleX, dy = dPositions[di][1] * scaleY;
var dr = midR * 0.5 * breathe * scaleR;
var grad = offCtx.createRadialGradient(dx, dy, 0, dx, dy, dr * 1.8);
grad.addColorStop(0, s.colors[2] + '73');
grad.addColorStop(0.5, s.colors[2] + '59');
grad.addColorStop(1, s.colors[2] + '00');
offCtx.beginPath();
offCtx.arc(dx, dy, dr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
offCtx.globalCompositeOperation = 'source-over';
// Smoothstep
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) { d[j + 3] = 255; }
else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else { d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255; }
}
offCtx.putImageData(imgData, 0, 0);
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);
// Draw nuclei on the two figure-8 blobs
for (var bi = 0; bi < 2; bi++) {
var nx = W / 2 + Math.cos(a) * sep * (bi === 0 ? 1 : -1);
var ny = H / 2 + Math.sin(a) * sep * (bi === 0 ? 1 : -1);
drawNucleus(nx, ny, midR * 0.7, s, ci, t, true);
}
for (var di = 0; di < 2; di++) {
drawNucleus(dPositions[di][0], dPositions[di][1], midR * 0.5, s, 2, t, true);
}
animId = requestAnimationFrame(draw);
return;
}

// --- UPDATE LOGIC ---

// Force-fade oldest daughters if over max
while (daughters.length > maxVisible) {
var oldest = daughters[0];
oldest.fading = true;
oldest.opacity -= 0.05;
if (oldest.opacity <= 0) daughters.shift();
else break;
}

// Update daughters
for (var i = daughters.length - 1; i >= 0; i--) {
var dc = daughters[i];
dc.age++;

// Sinusoidal wobble drift
dc.x += dc.vx + Math.sin(t * 0.0002 + dc.phase) * 0.06;
dc.y += dc.vy + Math.cos(t * 0.00015 + dc.phase + 1) * 0.06;
dc.vx *= 0.999;
dc.vy *= 0.999;

// Edge-based fading: fade as cells approach screen edges
var edgeMargin = Math.max(W, H) * 0.15;
var edgeFade = 1;
if (dc.x < edgeMargin) edgeFade = Math.min(edgeFade, dc.x / edgeMargin);
if (dc.x > W - edgeMargin) edgeFade = Math.min(edgeFade, (W - dc.x) / edgeMargin);
if (dc.y < edgeMargin) edgeFade = Math.min(edgeFade, dc.y / edgeMargin);
if (dc.y > H - edgeMargin) edgeFade = Math.min(edgeFade, (H - dc.y) / edgeMargin);
edgeFade = Math.max(0, edgeFade);
dc.opacity = Math.min(dc.opacity, edgeFade);

// Also fade over time after ~30 seconds (1800 frames)
if (dc.age > 1800 && !dc.fading) dc.fading = true;
if (dc.fading) {
dc.opacity -= 0.002;
}
if (dc.opacity <= 0) { daughters.splice(i, 1); continue; }
}

// Daughter-daughter repulsion
for (var i = 0; i < daughters.length; i++) {
for (var j = i + 1; j < daughters.length; j++) {
var a = daughters[i], b = daughters[j];
var dx = b.x - a.x, dy = b.y - a.y;
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
var minDist = a.r + b.r + 6;
if (dist < minDist) {
var force = (minDist - dist) * 0.015;
var nx = dx / dist, ny = dy / dist;
a.vx -= nx * force; a.vy -= ny * force;
b.vx += nx * force; b.vy += ny * force;
}
}
}

// Center cell lifecycle
if (cycleState === 'GROWING_AT_CENTER') {
if (!centerCell) spawnCenterCell();
var cc = centerCell;
// Grow from tiny to targetR over ~3s (180 frames)
cc.growTimer++;
var growProgress = Math.min(1, cc.growTimer / 180);
// Ease out
growProgress = 1 - (1 - growProgress) * (1 - growProgress);
cc.r = cc.targetR * (0.15 + 0.85 * growProgress);
// Subtle breathing wobble at center
cc.x = W / 2 + Math.sin(t * 0.001) * 1.5;
cc.y = H / 2 + Math.cos(t * 0.0008) * 1.5;

if (cc.growTimer >= 180) {
cycleState = 'DIVIDING';
cc.divProgress = 0;
}
} else if (cycleState === 'DIVIDING') {
var cc = centerCell;
// divProgress 0→1 over ~8s: 0.002/frame * 60fps ≈ 0.12/s → ~8s
cc.divProgress += 0.002;
// Keep at center with wobble
cc.x = W / 2 + Math.sin(t * 0.001) * 1.5;
cc.y = H / 2 + Math.cos(t * 0.0008) * 1.5;

if (cc.divProgress >= 1) {
// Spawn two daughters
var angle = cc.divAngle;
var sepDist = cc.r * 0.9;
var newR = cc.r * 0.55;
spawnDaughter(cc.x + Math.cos(angle) * sepDist, cc.y + Math.sin(angle) * sepDist, newR, angle, cc.colorIdx, makeOrganelles());
spawnDaughter(cc.x - Math.cos(angle) * sepDist, cc.y - Math.sin(angle) * sepDist, newR, angle + Math.PI, cc.colorIdx, makeOrganelles());
centerCell = null;
cycleState = 'STAGING_PAUSE';
pauseTimer = 0;
}
} else if (cycleState === 'STAGING_PAUSE') {
pauseTimer++;
// ~1.5s pause (90 frames)
if (pauseTimer >= 60) {
spawnCenterCell();
}
}

// --- RENDER ---

// 1. Clear offscreen
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// 2. Draw additive radial gradients
offCtx.globalCompositeOperation = 'lighter';

// Draw daughters
for (var i = 0; i < daughters.length; i++) {
var dc = daughters[i];
if (dc.opacity <= 0) continue;
var ci = dc.colorIdx % s.colors.length;
var hx = dc.x * scaleX, hy = dc.y * scaleY, hr = dc.r * scaleR;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(dc.opacity * 0.45));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(dc.opacity * 0.35));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}

// Draw center cell
if (centerCell) {
var cc = centerCell;
var ci = cc.colorIdx % s.colors.length;

if (cycleState === 'DIVIDING') {
// Two sub-blobs with separation based on divProgress
var dp = cc.divProgress;
var sepFactor;
if (dp < 0.3) {
// Elongation phase: 0 → 0.4 * r
sepFactor = (dp / 0.3) * 0.4;
} else if (dp < 0.7) {
// Figure-8 phase: 0.4 → 1.0 * r
sepFactor = 0.4 + ((dp - 0.3) / 0.4) * 0.6;
} else {
// Pinch & split: 1.0 → 1.8 * r (accelerating)
var splitP = (dp - 0.7) / 0.3;
splitP = splitP * splitP; // accelerate
sepFactor = 1.0 + splitP * 0.8;
}

var sep = cc.r * sepFactor;
var a = cc.divAngle;
var x1 = cc.x + Math.cos(a) * sep * 0.5;
var y1 = cc.y + Math.sin(a) * sep * 0.5;
var x2 = cc.x - Math.cos(a) * sep * 0.5;
var y2 = cc.y - Math.sin(a) * sep * 0.5;

// Sub-blob radius: slightly smaller as they separate
var subR = cc.r * (0.75 - dp * 0.15);

var overlapScale = 1;
for (var bi = 0; bi < 2; bi++) {
var bx = (bi === 0 ? x1 : x2) * scaleX;
var by = (bi === 0 ? y1 : y2) * scaleY;
var br = subR * scaleR;
var grad = offCtx.createRadialGradient(bx, by, 0, bx, by, br * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(cc.opacity * 0.45));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(cc.opacity * 0.35));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(bx, by, br * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
} else {
// Single blob
var hx = cc.x * scaleX, hy = cc.y * scaleY, hr = cc.r * scaleR;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(cc.opacity * 0.45));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(cc.opacity * 0.35));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
}

offCtx.globalCompositeOperation = 'source-over';

// 3. Smoothstep threshold
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// 4. Upscale
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

// 5. Draw nuclei and organelles on top at full resolution

// Daughters
for (var i = 0; i < daughters.length; i++) {
var dc = daughters[i];
if (dc.opacity <= 0) continue;
ctx.globalAlpha = dc.opacity;
drawNucleus(dc.x, dc.y, dc.r, s, dc.colorIdx % s.colors.length, t, false);
drawOrganelles(dc.x, dc.y, dc.r, s, dc.colorIdx % s.colors.length, dc.organelles, t, false);
ctx.globalAlpha = 1;
}

// Center cell
if (centerCell) {
var cc = centerCell;
var ci = cc.colorIdx % s.colors.length;
ctx.globalAlpha = cc.opacity;

if (cycleState === 'DIVIDING') {
var dp = cc.divProgress;
var sepFactor;
if (dp < 0.3) sepFactor = (dp / 0.3) * 0.4;
else if (dp < 0.7) sepFactor = 0.4 + ((dp - 0.3) / 0.4) * 0.6;
else { var sp = (dp - 0.7) / 0.3; sp = sp * sp; sepFactor = 1.0 + sp * 0.8; }
var sep = cc.r * sepFactor;
var a = cc.divAngle;
var x1 = cc.x + Math.cos(a) * sep * 0.5;
var y1 = cc.y + Math.sin(a) * sep * 0.5;
var x2 = cc.x - Math.cos(a) * sep * 0.5;
var y2 = cc.y - Math.sin(a) * sep * 0.5;
var subR = cc.r * (0.75 - dp * 0.15);

// Nucleus animation during division
if (dp < 0.25) {
// Elongating single ellipse, draw as stretched nucleus
var nucR = subR * 0.18;
var stretch = 1 + dp * 4;
ctx.save();
ctx.translate(cc.x, cc.y);
ctx.rotate(a);
ctx.scale(stretch, 1 / Math.sqrt(stretch));
drawNucleus(0, 0, subR, s, ci, t, false);
ctx.restore();
} else if (dp < 0.35) {
// Cross-fade from ellipse to two dots
var fadeT = (dp - 0.25) / 0.1;
// Fading single
ctx.globalAlpha = cc.opacity * (1 - fadeT);
drawNucleus(cc.x, cc.y, subR, s, ci, t, false);
// Appearing pair
ctx.globalAlpha = cc.opacity * fadeT;
drawNucleus(x1, y1, subR, s, ci, t, false);
drawNucleus(x2, y2, subR, s, ci, t, false);
ctx.globalAlpha = cc.opacity;
} else {
// Two separate nuclei
drawNucleus(x1, y1, subR, s, ci, t, false);
drawNucleus(x2, y2, subR, s, ci, t, false);
}

// Organelles split between the two halves
var halfOrg = Math.floor(cc.organelles.length / 2);
drawOrganelles(x1, y1, subR, s, ci, cc.organelles.slice(0, halfOrg), t, false);
drawOrganelles(x2, y2, subR, s, ci, cc.organelles.slice(halfOrg), t, false);
} else {
drawNucleus(cc.x, cc.y, cc.r, s, ci, t, false);
drawOrganelles(cc.x, cc.y, cc.r, s, ci, cc.organelles, t, false);
}
ctx.globalAlpha = 1;
}

animId = requestAnimationFrame(draw);
}

function alphaHex(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hexToRgba(hex, a) {
var r = parseInt(hex.slice(1,3), 16);
var g = parseInt(hex.slice(3,5), 16);
var b = parseInt(hex.slice(5,7), 16);
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
}

function drawNucleus(x, y, r, s, ci, t, isStatic) {
var nucR = r * 0.18;
var nucColor = s.colors[(ci + 1) % s.colors.length];
var ng = ctx.createRadialGradient(x, y, 0, x, y, nucR);
ng.addColorStop(0, hexToRgba(nucColor, 0.8));
ng.addColorStop(0.6, hexToRgba(nucColor, 0.35));
ng.addColorStop(1, hexToRgba(nucColor, 0));
ctx.beginPath();
ctx.arc(x, y, nucR, 0, Math.PI * 2);
ctx.fillStyle = ng;
ctx.fill();
}

function drawOrganelles(x, y, r, s, ci, organelles, t, isStatic) {
if (!organelles) return;
for (var k = 0; k < organelles.length; k++) {
var org = organelles[k];
var oAngle = org.angle + (isStatic ? 0 : (t || 0) * org.speed);
var ox = x + Math.cos(oAngle) * r * org.dist;
var oy = y + Math.sin(oAngle) * r * org.dist;
var oSize = r * org.size;
ctx.beginPath();
ctx.arc(ox, oy, oSize, 0, Math.PI * 2);
var orgColor = s.colors[(ci + 2) % s.colors.length];
ctx.fillStyle = hexToRgba(orgColor, 0.4);
ctx.fill();
}
}

function hideNavFooter() {
var header = document.querySelector('header, nav,.site-header, [class*="header"]');
var footer = document.querySelector('footer,.site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav,.site-header, [class*="header"]');
var footer = document.querySelector('footer,.site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
daughters = [];
centerCell = null;
nextId = 0;
spawnCenterCell();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Reduced motion enabled · Showing static view<br>Tap anywhere to exit';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Pre-fill default affirmation text
var affInput = document.getElementById('vp-aff-input');
if (!affInput.value) {
affInput.value = 'My mind is calm and clear\nI release what I cannot control\nI am present in this moment';
}
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Lava Flow - Affirmation Visual
URL: https://guruka.com/visuals/lava-flow/
Description: Mesmerizing blobs merging and separating. Add your own affirmation text for a personal visual meditation.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0d0505;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/visuals/" class="vp-back">&larr; All Visuals</a>
<h1 class="vp-title">Lava Flow</h1>
<p class="vp-desc">Blobs merging and separating.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f97316,#ef4444)"></div>
<span>Magma</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#06b6d4,#d946ef)"></div>
<span>Neon</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#059669,#84cc16)"></div>
<span>Emerald</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Affirmation text (optional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">presets <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optional. Enter affirmations here. Text will display one line after another."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Pace <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Start</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Tap anywhere to exit</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'lava-flow';
var currentAffId = null;
var paceLabels = ["Very slow","Slow","Normal","Fast","Very fast"];
var currentPace = 2;
var schemes = [
{ name:'Magma', bg:'#0d0505', colors:['#ff4500','#ff6b35','#ffaa00','#ff2200','#ff8c00','#cc3300','#ff5500'] },
{ name:'Neon', bg:'#050510', colors:['#00e5ff','#e040fb','#2979ff','#00bcd4','#d500f9','#448aff','#18ffff'] },
{ name:'Emerald', bg:'#050d08', colors:['#00c853','#1de9b6','#76ff03','#00e676','#64ffda','#69f0ae','#b2ff59'] }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'None',text:''},
{title:'Calm & clarity',text:'My mind is calm and clear\nI release what I cannot control\nI am present in this moment'},
{title:'Self-confidence',text:'I believe in myself and my abilities\nI am worthy of good things\nI grow stronger every day'},
{title:'Letting go',text:'I let go of what no longer serves me\nI forgive myself and others\nI make space for peace'},
{title:'Gratitude',text:'I am grateful for this moment\nAbundance flows into my life\nI appreciate the simple things'},
{title:'Focus & energy',text:'My focus is sharp and steady\nI channel my energy with purpose\nI move forward with intention'},
{title:'Sleep & rest',text:'I give myself permission to rest\nMy body relaxes with each breath\nI drift into peaceful sleep'},
{title:'Quit smoking',text:'My lungs are cleaner every day\nI am stronger than any craving\nEvery breath is a victory'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Clear text') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

var blobs = [];
var offCanvas, offCtx, halfW, halfH;

function initBlobs() {
blobs = [];
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
var minDim = Math.min(W, H);
var blobCount = Math.max(9, Math.min(Math.floor(minDim / 100), 15));
for (var i = 0; i < blobCount; i++) {
blobs.push({
x: 0.15 * W + Math.random() * 0.7 * W,
y: Math.random() * H,
vx: (Math.random() - 0.5) * 0.1,
vy: -(0.075 + Math.random() * 0.075),
baseR: minDim * (0.04 + Math.random() * 0.04),
phase: Math.random() * Math.PI * 2
});
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running) initBlobs();
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;

// Clear offscreen
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// Update and draw blobs on offscreen canvas at half res
for (var i = 0; i < blobs.length; i++) {
var b = blobs[i];
var r = b.baseR + Math.sin(t * 0.0004 + b.phase) * 12;

if (!reducedMotion) {
b.x += b.vx + Math.sin(t * 0.000075 + b.phase) * 0.15;
b.y += b.vy + Math.cos(t * 0.0001 + b.phase) * 0.15;

// Wrap vertically: when blob fully exits top, respawn at bottom
if (b.y + r * 2 < 0) {
b.y = H + r * 2;
b.x = 0.15 * W + Math.random() * 0.7 * W;
}
// Soft horizontal wrap
if (b.x < -r) b.x = W + r;
if (b.x > W + r) b.x = -r;
}

// Draw radial gradient blob on offscreen at 3/4 resolution
var scaleX = halfW / W, scaleY = halfH / H;
var hx = b.x * scaleX, hy = b.y * scaleY, hr = r * Math.min(scaleX, scaleY);
var ci = i % s.colors.length;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + 'ff');
grad.addColorStop(0.5, s.colors[ci] + 'cc');
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.globalCompositeOperation = 'lighter';
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
offCtx.globalCompositeOperation = 'source-over';

// Apply smoothstep threshold for metaball effect (smooth edges)
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
// Smoothstep interpolation between background and blob color
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt); // smoothstep
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// Scale up to main canvas
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initBlobs();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Reduced motion enabled · Showing static view<br>Tap anywhere to exit';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Pre-fill default affirmation text
var affInput = document.getElementById('vp-aff-input');
if (!affInput.value) {
affInput.value = 'My mind is calm and clear\nI release what I cannot control\nI am present in this moment';
}
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Breathing Orb - Affirmation Visual
URL: https://guruka.com/visuals/breathing-orb/
Description: A pulsing orb that guides your breathing rhythm. Add custom affirmation text for a personal meditation experience.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0a0a1a;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/visuals/" class="vp-back">&larr; All Visuals</a>
<h1 class="vp-title">Breathing Orb</h1>
<p class="vp-desc">Pulsing orb guiding your breath.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#4338ca,#7c3aed)"></div>
<span>Twilight</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f97316,#eab308)"></div>
<span>Sunrise</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#059669,#14b8a6)"></div>
<span>Forest</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Affirmation text (optional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">presets <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optional. Enter affirmations here. Text will display one line after another."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Pace <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Start</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Tap anywhere to exit</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'breathing-orb';
var currentAffId = null;
var paceLabels = ["Very slow","Slow","Normal","Fast","Very fast"];
var currentPace = 2;
var schemes = [
{ name:'Twilight', bg:'#0a0a1a', orb:['#6366f1','#a78bfa','#4338ca'], particle:'#c4b5fd' },
{ name:'Sunrise', bg:'#1a0a05', orb:['#f97316','#eab308','#dc2626'], particle:'#fcd34d' },
{ name:'Forest', bg:'#051a0a', orb:['#059669','#14b8a6','#065f46'], particle:'#6ee7b7' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

// Scheme buttons
var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'None',text:''},
{title:'Calm & clarity',text:'My mind is calm and clear\nI release what I cannot control\nI am present in this moment'},
{title:'Self-confidence',text:'I believe in myself and my abilities\nI am worthy of good things\nI grow stronger every day'},
{title:'Letting go',text:'I let go of what no longer serves me\nI forgive myself and others\nI make space for peace'},
{title:'Gratitude',text:'I am grateful for this moment\nAbundance flows into my life\nI appreciate the simple things'},
{title:'Focus & energy',text:'My focus is sharp and steady\nI channel my energy with purpose\nI move forward with intention'},
{title:'Sleep & rest',text:'I give myself permission to rest\nMy body relaxes with each breath\nI drift into peaceful sleep'},
{title:'Quit smoking',text:'My lungs are cleaner every day\nI am stronger than any craving\nEvery breath is a victory'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Clear text') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

// Particles
var particles = [];
function initParticles() {
particles = [];
for (var i = 0; i < 100; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
r: 1 + Math.random() * 2.5,
vx: (Math.random() - 0.5) * 0.2,
vy: (Math.random() - 0.5) * 0.2,
phase: Math.random() * Math.PI * 2
});
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running && particles.length === 0) initParticles();
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var cx = W / 2, cy = H / 2;

// Background
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);

// Breathing cycle: 6 seconds
var breathT = t / 1000;
var breathPhase = Math.sin(breathT * Math.PI / 6); // -1 to 1, 12s cycle
var scale = 0.85 + 0.15 * breathPhase;

var baseR = Math.min(W, H) * 0.12;
var orbR = baseR * scale;

// Orb glow layers
for (var g = 3; g >= 0; g--) {
var glowR = orbR * (1 + g * 0.6);
var grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, glowR);
var alpha = (0.08 - g * 0.015);
if (alpha < 0) alpha = 0;
grad.addColorStop(0, s.orb[0] + hexAlpha(alpha + 0.05));
grad.addColorStop(0.5, s.orb[1] + hexAlpha(alpha));
grad.addColorStop(1, s.orb[2] + '00');
ctx.beginPath();
ctx.arc(cx, cy, glowR, 0, Math.PI * 2);
ctx.fillStyle = grad;
ctx.fill();
}

// Core orb
var coreGrad = ctx.createRadialGradient(cx - orbR * 0.2, cy - orbR * 0.2, orbR * 0.1, cx, cy, orbR);
coreGrad.addColorStop(0, s.orb[1]);
coreGrad.addColorStop(0.7, s.orb[0]);
coreGrad.addColorStop(1, s.orb[2]);
ctx.beginPath();
ctx.arc(cx, cy, orbR, 0, Math.PI * 2);
ctx.fillStyle = coreGrad;
ctx.globalAlpha = 0.9;
ctx.fill();
ctx.globalAlpha = 1;

// Particles
if (!reducedMotion) {
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
// Drift toward/away from orb matching breath
var dx = p.x - cx, dy = p.y - cy;
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
var breathPull = breathPhase * 0.15;
p.x += p.vx + (dx / dist) * breathPull;
p.y += p.vy + (dy / dist) * breathPull;

// Wrap around
if (p.x < 0) p.x = W;
if (p.x > W) p.x = 0;
if (p.y < 0) p.y = H;
if (p.y > H) p.y = 0;

// Twinkle
var twinkle = 0.3 + 0.7 * Math.abs(Math.sin(breathT * 0.4 + p.phase));
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fillStyle = s.particle;
ctx.globalAlpha = twinkle * 0.6;
ctx.fill();
}
ctx.globalAlpha = 1;
} else {
// Reduced motion: static orb only, no particles
}

animId = requestAnimationFrame(draw);
}

function hexAlpha(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initParticles();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Reduced motion enabled · Showing static view<br>Tap anywhere to exit';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Pre-fill default affirmation text
var affInput = document.getElementById('vp-aff-input');
if (!affInput.value) {
affInput.value = 'My mind is calm and clear\nI release what I cannot control\nI am present in this moment';
}
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Mandala - Affirmation Visual
URL: https://guruka.com/visuals/mandala/
Description: Slowly rotating sacred geometry with optional custom affirmation text. Create your own private affirmations.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0a0808;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/visuals/" class="vp-back">&larr; All Visuals</a>
<h1 class="vp-title">Mandala</h1>
<p class="vp-desc">Rotating sacred geometry.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#eab308,#f59e0b)"></div>
<span>Golden</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#6366f1,#a855f7)"></div>
<span>Celestial</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#14b8a6,#10b981)"></div>
<span>Jade</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Affirmation text (optional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">presets <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optional. Enter affirmations here. Text will display one line after another."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Pace <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Start</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Tap anywhere to exit</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'mandala';
var currentAffId = null;
var paceLabels = ["Very slow","Slow","Normal","Fast","Very fast"];
var currentPace = 2;
var schemes = [
{ name:'Golden', bg:'#0a0808', stroke:'#d4a017', strokeAlt:'#f5c842', dot:'#fff8dc', bgFill:'rgba(10,8,8,' },
{ name:'Celestial', bg:'#05050f', stroke:'#818cf8', strokeAlt:'#c084fc', dot:'#e0e7ff', bgFill:'rgba(5,5,15,' },
{ name:'Jade', bg:'#050a08', stroke:'#2dd4bf', strokeAlt:'#34d399', dot:'#d1fae5', bgFill:'rgba(5,10,8,' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'None',text:''},
{title:'Calm & clarity',text:'My mind is calm and clear\nI release what I cannot control\nI am present in this moment'},
{title:'Self-confidence',text:'I believe in myself and my abilities\nI am worthy of good things\nI grow stronger every day'},
{title:'Letting go',text:'I let go of what no longer serves me\nI forgive myself and others\nI make space for peace'},
{title:'Gratitude',text:'I am grateful for this moment\nAbundance flows into my life\nI appreciate the simple things'},
{title:'Focus & energy',text:'My focus is sharp and steady\nI channel my energy with purpose\nI move forward with intention'},
{title:'Sleep & rest',text:'I give myself permission to rest\nMy body relaxes with each breath\nI drift into peaceful sleep'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Clear text') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

var rings = [
{ radius: 0.08, folds: 12, speed: 0.00008, dir: 1, type: 'dots' },
{ radius: 0.18, folds: 8, speed: 0.00006, dir: -1, type: 'petals' },
{ radius: 0.30, folds: 12, speed: 0.00004, dir: 1, type: 'lines' },
{ radius: 0.42, folds: 8, speed: 0.00007, dir: -1, type: 'petals' },
{ radius: 0.55, folds: 16, speed: 0.00003, dir: 1, type: 'dots' },
{ radius: 0.68, folds: 12, speed: 0.00005, dir: -1, type: 'lines' },
{title:'Quit smoking',text:'My lungs are cleaner every day\nI am stronger than any craving\nEvery breath is a victory'}
];

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var cx = W / 2, cy = H / 2;
var maxR = Math.min(W, H) * 0.65;

// Trail effect
ctx.fillStyle = s.bgFill + '0.04)';
ctx.fillRect(0, 0, W, H);

var baseAngle = reducedMotion ? 0 : t * 0.00005;

for (var ri = 0; ri < rings.length; ri++) {
var ring = rings[ri];
var ringR = maxR * ring.radius;
var folds = ring.folds;
var angle = reducedMotion ? 0 : baseAngle * ring.dir + t * ring.speed * ring.dir;
var breathe = reducedMotion ? 1 : (1 + 0.15 * Math.sin(t * 0.0005 + ri * 1.2));
var alphaFade = 1 - ri * 0.10;

ctx.save();
ctx.translate(cx, cy);
ctx.rotate(angle);

for (var f = 0; f < folds; f++) {
var fAngle = (f / folds) * Math.PI * 2;
ctx.save();
ctx.rotate(fAngle);

if (ring.type === 'dots') {
var dotR = (3 + Math.sin(t * 0.0008 + ri + f) * 2) * breathe;
ctx.shadowColor = s.stroke;
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.arc(ringR * breathe, 0, dotR, 0, Math.PI * 2);
ctx.fillStyle = s.dot;
ctx.globalAlpha = alphaFade * 0.7;
ctx.fill();
ctx.shadowBlur = 0;
} else if (ring.type === 'petals') {
var petalLen = (20 + Math.sin(t * 0.0006 + ri * 2) * 10) * breathe;
var petalW = (8 + Math.sin(t * 0.0004 + f) * 3) * breathe;
ctx.shadowColor = s.stroke;
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.moveTo(ringR * breathe - petalLen * 0.3, 0);
ctx.quadraticCurveTo(ringR * breathe, -petalW, ringR * breathe + petalLen * 0.7, 0);
ctx.quadraticCurveTo(ringR * breathe, petalW, ringR * breathe - petalLen * 0.3, 0);
ctx.strokeStyle = s.stroke;
ctx.lineWidth = 1.2;
ctx.globalAlpha = alphaFade * 0.6;
ctx.stroke();
ctx.shadowBlur = 0;
} else if (ring.type === 'lines') {
var lineLen = (15 + Math.sin(t * 0.0007 + f * 0.5) * 8) * breathe;
ctx.shadowColor = s.strokeAlt;
ctx.shadowBlur = 3;
ctx.beginPath();
ctx.moveTo(ringR * breathe - lineLen, 0);
ctx.lineTo(ringR * breathe + lineLen, 0);
ctx.strokeStyle = s.strokeAlt;
ctx.lineWidth = 1;
ctx.globalAlpha = alphaFade * 0.4;
ctx.stroke();
// End dots
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.arc(ringR * breathe - lineLen, 0, 1.5, 0, Math.PI * 2);
ctx.arc(ringR * breathe + lineLen, 0, 1.5, 0, Math.PI * 2);
ctx.fillStyle = s.strokeAlt;
ctx.globalAlpha = alphaFade * 0.5;
ctx.fill();
ctx.shadowBlur = 0;
}

ctx.restore();
}

ctx.restore();
}

// Center dot
ctx.beginPath();
ctx.arc(cx, cy, 4, 0, Math.PI * 2);
ctx.fillStyle = s.dot;
ctx.globalAlpha = 0.8;
ctx.fill();
ctx.globalAlpha = 1;

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
// Clear canvas fully before starting
ctx.fillStyle = schemes[currentScheme].bg;
ctx.fillRect(0, 0, canvas.width, canvas.height);
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Reduced motion enabled · Showing static view<br>Tap anywhere to exit';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Pre-fill default affirmation text
var affInput = document.getElementById('vp-aff-input');
if (!affInput.value) {
affInput.value = 'My mind is calm and clear\nI release what I cannot control\nI am present in this moment';
}
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Starfield - Affirmation Visual
URL: https://guruka.com/visuals/starfield/
Description: Twinkling stars in deep space with optional custom affirmation text. Private, stored in your browser only.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #020510;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/visuals/" class="vp-back">&larr; All Visuals</a>
<h1 class="vp-title">Starfield</h1>
<p class="vp-desc">Twinkling stars in deep space.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#1e293b,#475569)"></div>
<span>Deep Space</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#4c1d95,#a855f7)"></div>
<span>Nebula</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#78350f,#f59e0b)"></div>
<span>Warm Cosmos</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Affirmation text (optional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">presets <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optional. Enter affirmations here. Text will display one line after another."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Pace <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Start</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Tap anywhere to exit</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'starfield';
var currentAffId = null;
var paceLabels = ["Very slow","Slow","Normal","Fast","Very fast"];
var currentPace = 2;
var schemes = [
{ name:'Deep Space', bg:'#020510', starColor:'rgba(200,220,255,', glowColor:'rgba(80,100,180,0.015)', shootColor:'rgba(200,220,255,' },
{ name:'Nebula', bg:'#0a0515', starColor:'rgba(220,200,255,', glowColor:'rgba(160,80,200,0.03)', shootColor:'rgba(200,160,255,' },
{ name:'Warm Cosmos', bg:'#0a0805', starColor:'rgba(255,220,160,', glowColor:'rgba(180,120,60,0.015)', shootColor:'rgba(255,200,100,' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'None',text:''},
{title:'Calm & clarity',text:'My mind is calm and clear\nI release what I cannot control\nI am present in this moment'},
{title:'Self-confidence',text:'I believe in myself and my abilities\nI am worthy of good things\nI grow stronger every day'},
{title:'Letting go',text:'I let go of what no longer serves me\nI forgive myself and others\nI make space for peace'},
{title:'Gratitude',text:'I am grateful for this moment\nAbundance flows into my life\nI appreciate the simple things'},
{title:'Focus & energy',text:'My focus is sharp and steady\nI channel my energy with purpose\nI move forward with intention'},
{title:'Sleep & rest',text:'I give myself permission to rest\nMy body relaxes with each breath\nI drift into peaceful sleep'},
{title:'Quit smoking',text:'My lungs are cleaner every day\nI am stronger than any craving\nEvery breath is a victory'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Clear text') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

var starsBack = [], starsMid = [], starsFront = [];
var shootingStars = [];
var lastShootTime = 0;

function initStars() {
starsBack = []; starsMid = []; starsFront = [];
shootingStars = [];
var W = canvas.width, H = canvas.height;
for (var i = 0; i < 200; i++) {
starsBack.push({ x: Math.random() * W, y: Math.random() * H, size: 0.5 + Math.random() * 1, baseAlpha: 0.3 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
for (var i = 0; i < 100; i++) {
starsMid.push({ x: Math.random() * W, y: Math.random() * H, size: 1 + Math.random() * 1.5, baseAlpha: 0.4 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
for (var i = 0; i < 50; i++) {
starsFront.push({ x: Math.random() * W, y: Math.random() * H, size: 1.5 + Math.random() * 2, baseAlpha: 0.6 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running) initStars();
}

function drawStarLayer(stars, speed, t, s, W, H) {
for (var i = 0; i < stars.length; i++) {
var st = stars[i];
var twinkle = st.baseAlpha * (0.5 + 0.5 * Math.sin(t * 0.001 + st.phase));
// Glow for larger stars
if (st.size > 2) {
ctx.beginPath();
ctx.arc(st.x, st.y, st.size * 3, 0, Math.PI * 2);
ctx.fillStyle = s.starColor + (twinkle * 0.15).toFixed(3) + ')';
ctx.fill();
}
ctx.beginPath();
ctx.arc(st.x, st.y, st.size, 0, Math.PI * 2);
ctx.fillStyle = s.starColor + twinkle.toFixed(3) + ')';
ctx.fill();
}
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;

ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);

// Subtle center glow
var glow = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.max(W, H) * 0.5);
glow.addColorStop(0, s.glowColor);
glow.addColorStop(1, 'transparent');
ctx.fillStyle = glow;
ctx.fillRect(0, 0, W, H);

// Draw star layers with parallax speeds
drawStarLayer(starsBack, 0.025, t, s, W, H);
drawStarLayer(starsMid, 0.06, t, s, W, H);
drawStarLayer(starsFront, 0.12, t, s, W, H);

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initStars();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Reduced motion enabled · Showing static view<br>Tap anywhere to exit';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Pre-fill default affirmation text
var affInput = document.getElementById('vp-aff-input');
if (!affInput.value) {
affInput.value = 'My mind is calm and clear\nI release what I cannot control\nI am present in this moment';
}
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Focus & Energy Affirmation for Visual Meditation
URL: https://guruka.com/pt/affirmation-focus-and-energy/
Description: Free focus and energy affirmation for visual meditation. Sharpen concentration and channel your energy with calming visuals.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Focus & Energy Affirmation</h1>
<p class="aff-intro">A focused mind moves with purpose. This affirmation helps you channel your energy and move forward with intention during visual meditation.</p>
<div class="aff-lines">
My focus is sharp and steady<br>I channel my energy with purpose<br>I move forward with intention
</div>
<a href="/visuals/breathing-orb/?edit=focus-and-energy" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Calm & Clarity Affirmation for Visual Meditation
URL: https://guruka.com/pt/affirmation-calm-and-clarity/
Description: Free calm and clarity affirmation for visual meditation. Display positive affirmations over calming visuals, privately in your browser.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Calm & Clarity Affirmation</h1>
<p class="aff-intro">When thoughts race and the mind feels scattered, these words can guide you back to stillness. Use this affirmation during visual meditation to cultivate inner peace and mental clarity.</p>
<div class="aff-lines">
My mind is calm and clear<br>I release what I cannot control<br>I am present in this moment
</div>
<a href="/visuals/breathing-orb/?edit=calm-and-clarity" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Letting Go Affirmation for Visual Meditation
URL: https://guruka.com/pt/affirmation-letting-go/
Description: Free letting go affirmation for visual meditation. Release what no longer serves you with calming visuals and positive text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Letting Go Affirmation</h1>
<p class="aff-intro">Holding on to what no longer serves you creates tension. This affirmation helps you release, forgive, and create space for peace during visual meditation.</p>
<div class="aff-lines">
I let go of what no longer serves me<br>I forgive myself and others<br>I make space for peace
</div>
<a href="/visuals/breathing-orb/?edit=letting-go" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Gratitude Affirmation for Visual Meditation
URL: https://guruka.com/pt/affirmation-gratitude/
Description: Free gratitude affirmation for visual meditation. Cultivate thankfulness with calming visuals and positive affirmation text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Gratitude Affirmation</h1>
<p class="aff-intro">Gratitude shifts your focus from what is missing to what is present. Use this affirmation with a visual meditation to deepen your sense of appreciation and abundance.</p>
<div class="aff-lines">
I am grateful for this moment<br>Abundance flows into my life<br>I appreciate the simple things
</div>
<a href="/visuals/breathing-orb/?edit=gratitude" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Quit Smoking Affirmation for Visual Meditation
URL: https://guruka.com/pt/affirmation-quit-smoking/
Description: Free quit smoking affirmation for visual meditation. Strengthen your resolve to quit with calming visuals and positive affirmations, privately in your browser.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Quit Smoking Affirmation</h1>
<p class="aff-intro">Every breath without smoke is a step toward freedom. This affirmation reinforces your choice to live smoke-free, pairing positive words with calming visual meditation to help you stay strong through cravings.</p>
<div class="aff-lines">
My lungs are cleaner every day<br>I am stronger than any craving<br>Every breath is a victory
</div>
<a href="/visuals/breathing-orb/?edit=quit-smoking" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Self-Confidence Affirmation for Visual Meditation
URL: https://guruka.com/pt/affirmation-self-confidence/
Description: Free self-confidence affirmation for visual meditation. Build belief in yourself with calming visuals and positive affirmations.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Self-Confidence Affirmation</h1>
<p class="aff-intro">Confidence grows when you remind yourself of your worth. Pair this affirmation with a calming visual to reinforce self-belief and inner strength.</p>
<div class="aff-lines">
I believe in myself and my abilities<br>I am worthy of good things<br>I grow stronger every day
</div>
<a href="/visuals/breathing-orb/?edit=self-confidence" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Sleep & Rest Affirmation for Visual Meditation
URL: https://guruka.com/pt/affirmation-sleep-and-rest/
Description: Free sleep and rest affirmation for visual meditation. Prepare for restful sleep with calming visuals and gentle affirmation text.

<style>
.aff-page {
max-width: 40rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
text-align: center;
}
.aff-page .aff-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .aff-page .aff-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-page .aff-back:hover { color: var(--color-primary, #0f9072); }
.aff-page h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .aff-page h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.aff-page .aff-intro {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.0625rem;
max-width: 32rem;
margin: 0 auto 2.5rem;
line-height: 1.7;
}
[data-theme="dark"] .aff-page .aff-intro {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.aff-lines {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
line-height: 2.4;
font-style: italic;
color: var(--color-text-primary, #1a2332);
margin-bottom: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--color-border, #dfe4ea);
border-bottom: 1px solid var(--color-border, #dfe4ea);
}
[data-theme="dark"] .aff-lines {
color: var(--color-dark-text-primary, #f9fafb);
border-color: var(--color-dark-border, #334155);
}
.aff-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.75rem;
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
min-height: 56px;
}
.aff-cta:hover { background: #0d7d63; }
.aff-note {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .aff-note {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div class="aff-page">
<a href="/visuals/" class="aff-back">&larr; All Affirmations & Visuals</a>
<h1>Sleep & Rest Affirmation</h1>
<p class="aff-intro">Rest is not a luxury, it is essential. This affirmation prepares your mind and body for deep, peaceful sleep during a calming visual meditation.</p>
<div class="aff-lines">
I give myself permission to rest<br>My body relaxes with each breath<br>I drift into peaceful sleep
</div>
<a href="/visuals/breathing-orb/?edit=sleep-and-rest" class="aff-cta">Try with visual meditation &rarr;</a>
<p class="aff-note">This affirmation is available as a preset in all visual meditations. You can customize affirmations. Your text is stored privately in your browser only.</p>
</div>

### Jogos de Treinamento Cerebral
URL: https://guruka.com/pt/games/
Description: Jogos cerebrais gratis. Sem conta.

<style>
#games-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#games-hub.gh-header {
text-align: center;
margin-bottom: 3rem;
}
#games-hub.gh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #games-hub.gh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#games-hub.gh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #games-hub.gh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.gh-game-card {
display: grid;
grid-template-columns: 4rem 1fr;
column-gap: 1rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 2rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"].gh-game-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.gh-game-card:hover {
transform: none;
}
.gh-game-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.gh-game-card.speed-match::before { background: #0f9072; }
.gh-game-card.memory-matrix::before { background: #f59e0b; }
.gh-game-card.sequence-recall::before { background: #10b981; }
.gh-game-card.number-crunch::before { background: #6366f1; }
.gh-game-card.color-clash::before { background: #ec4899; }
.gh-game-card.quick-sort::before { background: #f97316; }
.gh-game-card.pattern-path::before { background: #14b8a6; }
.gh-game-icon {
width: 4rem;
height: 4rem;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.gh-game-card h2 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.gh-game-card.gh-skill,
.gh-game-card.gh-desc,
.gh-game-card.gh-play-btn,
.gh-game-card.gh-best {
grid-column: 1 / -1;
}
[data-theme="dark"].gh-game-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gh-game-card.gh-skill {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
margin-bottom: 0.5rem;
}
.speed-match.gh-skill { background: rgba(15,144,114,0.1); color: #0f9072; }
.memory-matrix.gh-skill { background: rgba(245,158,11,0.1); color: #f59e0b; }
.sequence-recall.gh-skill { background: rgba(16,185,129,0.1); color: #10b981; }
.number-crunch.gh-skill { background: rgba(99,102,241,0.1); color: #6366f1; }
.color-clash.gh-skill { background: rgba(236,72,153,0.1); color: #ec4899; }
.quick-sort.gh-skill { background: rgba(249,115,22,0.1); color: #f97316; }
.pattern-path.gh-skill { background: rgba(20,184,166,0.1); color: #14b8a6; }
.gh-game-card.gh-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 0.75rem;
}
[data-theme="dark"].gh-game-card.gh-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-play-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
min-height: 44px;
}
.gh-play-btn::after {
content: '\2192';
transition: transform 0.2s;
}
.gh-best:empty {
display: none;
}
.gh-best {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-border, #dfe4ea);
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].gh-best {
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gh-best strong {
color: var(--color-primary, #0f9072);
}
.gh-info {
text-align: center;
padding: 2rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 1rem;
}
[data-theme="dark"].gh-info {
background: var(--color-dark-bg-secondary, #1e293b);
}
.gh-info h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gh-info h3 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gh-info p {
color: var(--color-text-secondary, #4b5b6d);
max-width: 32rem;
margin: 0 auto;
font-size: 0.9375rem;
}
[data-theme="dark"].gh-info p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="games-hub">
<div class="gh-header">
<h1>&#129504; Jogos de Treinamento Cerebral</h1>
<p>Grátis e sem anúncios irritantes. Suas pontuações são salvas localmente - sem necessidade de conta.</p>
</div>

<div class="gh-grid">
<a href="/pt/games/speed-match/" class="gh-game-card speed-match">
<div class="gh-game-icon" style="background: rgba(15,144,114,0.1); color: #0f9072;">&#9889;</div>
<h2>Speed Match</h2>
<span class="gh-skill">Velocidade de Processamento</span>
<p class="gh-desc">Teste sua velocidade de processamento comparando simbolos. O simbolo atual e igual ao anterior? Responda rapido antes que o tempo acabe!</p>
<span class="gh-play-btn">Jogar Agora</span>
<div class="gh-best" id="best-speed-match"></div>
</a>

<a href="/pt/games/memory-matrix/" class="gh-game-card memory-matrix">
<div class="gh-game-icon" style="background: rgba(245,158,11,0.1); color: #f59e0b;">&#9638;</div>
<h2>Memory Matrix</h2>
<span class="gh-skill">Memoria Espacial</span>
<p class="gh-desc">Observe um padrao de celulas destacadas em uma grade e recrie-o de memoria. A grade fica maior e os padroes mais complexos conforme voce sobe de nivel.</p>
<span class="gh-play-btn">Jogar Agora</span>
<div class="gh-best" id="best-memory-matrix"></div>
</a>

<a href="/pt/games/sequence-recall/" class="gh-game-card sequence-recall">
<div class="gh-game-icon" style="background: rgba(16,185,129,0.1); color: #10b981;">&#9776;</div>
<h2>Sequence Recall</h2>
<span class="gh-skill">Memoria de Trabalho</span>
<p class="gh-desc">Memorize uma sequencia de cores mostradas uma a uma e depois lembre-as na ordem correta. Niveis mais altos adicionam distracoes matematicas e desafios de dupla trilha.</p>
<span class="gh-play-btn">Jogar Agora</span>
<div class="gh-best" id="best-sequence-recall"></div>
</a>

<a href="/pt/games/number-crunch/" class="gh-game-card number-crunch">
<div class="gh-game-icon" style="background: rgba(99,102,241,0.1); color: #6366f1;">&#129518;</div>
<h2>Number Crunch</h2>
<span class="gh-skill">Calculo Mental</span>
<p class="gh-desc">Resolva equacoes com elementos faltantes sob pressao de tempo. Niveis mais altos adicionam modificadores de regras que exigem transformacao mental das respostas.</p>
<span class="gh-play-btn">Jogar Agora</span>
<div class="gh-best" id="best-number-crunch"></div>
</a>

<a href="/pt/games/color-clash/" class="gh-game-card color-clash">
<div class="gh-game-icon" style="background: rgba(236,72,153,0.1); color: #ec4899;">&#127912;</div>
<h2>Color Clash</h2>
<span class="gh-skill">Controle Inibitorio</span>
<p class="gh-desc">Uma palavra de cor aparece em uma cor de tinta diferente. Toque na resposta correta com base na regra atual, cor da tinta ou significado da palavra. As regras mudam!</p>
<span class="gh-play-btn">Jogar Agora</span>
<div class="gh-best" id="best-color-clash"></div>
</a>

<a href="/pt/games/quick-sort/" class="gh-game-card quick-sort">
<div class="gh-game-icon" style="background: rgba(249,115,22,0.1); color: #f97316;">&#128451;</div>
<h2>Quick Sort</h2>
<span class="gh-skill">Alternancia de Tarefas</span>
<p class="gh-desc">Classifique elementos em categorias deslizando para esquerda ou direita. A regra de classificacao muda a cada poucas rodadas, desafiando sua flexibilidade mental.</p>
<span class="gh-play-btn">Jogar Agora</span>
<div class="gh-best" id="best-quick-sort"></div>
</a>

<a href="/pt/games/pattern-path/" class="gh-game-card pattern-path">
<div class="gh-game-icon" style="background: rgba(20,184,166,0.1); color: #14b8a6;">&#129513;</div>
<h2>Pattern Path</h2>
<span class="gh-skill">Reconhecimento de Padroes</span>
<p class="gh-desc">Encontre a peca que falta em uma sequencia de padroes visuais. Formas mudam em cor, tamanho e rotacao, identifique a regra e escolha o complemento correto.</p>
<span class="gh-play-btn">Jogar Agora</span>
<div class="gh-best" id="best-pattern-path"></div>
</a>
</div>

<div class="gh-info">
<h3>Como Funciona</h3>
<p>Cada jogo se adapta ao seu nivel com 20 niveis de dificuldade. Treine 15-20 minutos diarios nos sete jogos para melhores resultados. Seus recordes pessoais sao salvos no seu navegador.</p>
</div>
</div>

<script>
(function() {
var games = ['speed-match', 'memory-matrix', 'sequence-recall', 'number-crunch', 'color-clash', 'quick-sort', 'pattern-path'];
games.forEach(function(game) {
var best = localStorage.getItem('guruka_' + game + '_best');
var el = document.getElementById('best-' + game);
if (el && best) {
el.innerHTML = 'Recorde: <strong>' + Number(best).toLocaleString() + '</strong> pontos';
}
});
})();
</script>

<style>
/* ── Mobile-first responsive ── */
.gh-game-card {
padding: 1.5rem;
grid-template-columns: 3.25rem 1fr;
}
.gh-game-icon {
width: 3.25rem;
height: 3.25rem;
}
.gh-game-card.gh-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (min-width: 768px) {
.gh-game-card {
padding: 2rem;
grid-template-columns: 4rem 1fr;
}
.gh-game-icon {
width: 4rem;
height: 4rem;
}
.gh-game-card.gh-desc {
-webkit-line-clamp: unset;
overflow: visible;
}
}
@media (hover: hover) and (pointer: fine) {
.gh-game-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}
.gh-game-card:hover.gh-play-btn::after {
transform: translateX(4px);
}
}
@media (prefers-reduced-motion: reduce) {
.gh-game-card {
transition: none;
}
}
</style>

### Meditacoes Guiadas
URL: https://guruka.com/pt/meditate/
Description: Meditacoes guiadas gratuitas para calma, foco, sono, energia e bem-estar. Toque para comecar, nao e necessario criar conta.

<style>
#meditate-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#meditate-hub .mh-header {
text-align: center;
margin-bottom: 3rem;
}
#meditate-hub .mh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #meditate-hub .mh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#meditate-hub .mh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #meditate-hub .mh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.mh-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.mh-card {
display: grid;
grid-template-columns: 2.5rem 1fr;
column-gap: 0.875rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 1.25rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .mh-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.mh-card:hover {
transform: none;
}
.mh-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.mh-dot {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
margin-bottom: 0;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.mh-card h2 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.375rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.mh-card .mh-sub,
.mh-card .mh-play {
grid-column: 1 / -1;
}
[data-theme="dark"] .mh-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.mh-card .mh-sub {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.5;
margin-bottom: 0.375rem;
}
[data-theme="dark"] .mh-card .mh-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.mh-card .mh-dur {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-muted, #6b7788);
margin-left: auto;
}
[data-theme="dark"] .mh-card .mh-dur {
color: var(--color-dark-text-muted, #94a3b8);
}
.mh-play {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
margin-top: 0.25rem;
min-height: 44px;
}
/* ── 480px+ ── */
@media (min-width: 480px) {
.mh-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.mh-card {
padding: 1.5rem;
}
}
/* ── 768px+ ── */
@media (min-width: 768px) {
.mh-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.mh-card {
padding: 1.75rem;
grid-template-columns: 3rem 1fr;
}
.mh-dot {
width: 3rem;
height: 3rem;
}
}
/* ── Hover (pointer devices only) ── */
@media (hover: hover) and (pointer: fine) {
.mh-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.mh-card:hover .mh-play {
color: var(--color-primary-hover, #0d7d63);
}
}
@media (prefers-reduced-motion: reduce) {
.mh-card {
transition: none;
}
}
</style>

<div id="meditate-hub">
<div class="mh-header">
<h1>Meditacoes Guiadas</h1>
<p>Grátis e sem anúncios irritantes. Toque para começar, sem necessidade de conta.</p>
</div>

<div class="mh-grid">
<a href="/pt/meditate/calm-and-stress-relief/" class="mh-card" style="--accent:#818cf8">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#818cf8,#a78bfa)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#818cf8,#a78bfa)"></div>
<h2>Calma e Alivio do Estresse</h2>
<p class="mh-sub">Libere a tensao e retorne a respiracao</p>
<div class="mh-play"><span>Comecar &rarr;</span><span class="mh-dur">5 min</span></div>
</a>

<a href="/pt/meditate/focus-and-clarity/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#3b82f6,#1e40af)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#3b82f6,#1e40af)"></div>
<h2>Foco e Clareza</h2>
<p class="mh-sub">Aguce sua atencao e limpe a nevoa mental</p>
<div class="mh-play"><span>Comecar &rarr;</span><span class="mh-dur">5 min</span></div>
</a>

<a href="/pt/meditate/sleep-and-wind-down/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#4338ca)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#6366f1,#4338ca)"></div>
<h2>Sono e Relaxamento</h2>
<p class="mh-sub">Acalme sua mente e prepare-se para um sono reparador</p>
<div class="mh-play"><span>Comecar &rarr;</span><span class="mh-dur">7 min</span></div>
</a>

<a href="/pt/meditate/morning-energy/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f59e0b,#d97706)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#f59e0b,#d97706)"></div>
<h2>Energia Matinal</h2>
<p class="mh-sub">Comece seu dia com vitalidade e intencao</p>
<div class="mh-play"><span>Comecar &rarr;</span><span class="mh-dur">5 min</span></div>
</a>

<a href="/pt/meditate/loving-kindness/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f472b6,#ec4899)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#f472b6,#ec4899)"></div>
<h2>Bondade Amorosa</h2>
<p class="mh-sub">Cultive compaixao por si mesmo e pelos outros</p>
<div class="mh-play"><span>Comecar &rarr;</span><span class="mh-dur">6 min</span></div>
</a>

<a href="/pt/meditate/gratitude/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#fbbf24,#f59e0b)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#fbbf24,#f59e0b)"></div>
<h2>Gratidao</h2>
<p class="mh-sub">Aprecie o que voce tem e encontre alegria no presente</p>
<div class="mh-play"><span>Comecar &rarr;</span><span class="mh-dur">5 min</span></div>
</a>

<a href="/pt/meditate/body-scan-and-tension-release/" class="mh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#2dd4bf,#14b8a6)"></div>
<div class="mh-dot" style="background:linear-gradient(135deg,#2dd4bf,#14b8a6)"></div>
<h2>Escaneamento Corporal</h2>
<p class="mh-sub">Escaneie seu corpo em busca de tensoes e libere-as</p>
<div class="mh-play"><span>Comecar &rarr;</span><span class="mh-dur">8 min</span></div>
</a>
</div>
</div>

### Privacy Policy
URL: https://guruka.com/pt/privacy/
Description: Privacy Policy for GURUKA

# Privacy Policy

*Last updated: March 11, 2026*

**No sign-up is required to use GURUKA. All user data, including game scores, meditation stats, activity tracking, and preferences, is stored locally on your device only. We do not collect, store, or share your personal data. No data is transmitted to our servers or any third party.**

## 1. Information We Do NOT Collect

GURUKA is designed with a local-first approach. We do not collect personal information such as names, email addresses, or account credentials, because GURUKA requires no sign-up or login.

All user-generated data stays on your device:

- **Game scores and progress** - stored in your browser's localStorage
- **Meditation history and stats** - stored in your browser's localStorage
- **Activity tracking data** - stored in your browser's localStorage
- **Preferences and settings** - stored in your browser's localStorage

None of this data is transmitted to any server. It exists only on your device and can be cleared at any time through your browser settings.

## 2. How We Use Information

Since we do not collect personal data, our use of information is limited to:

- Improving and optimizing the website
- Analyzing general usage patterns and trends
- Maintaining the security of our service

## 3. Cookies and Tracking

GURUKA does not use tracking cookies, third-party trackers, or advertising pixels. The only browser storage used is localStorage to save your game and activity data locally on your device. You can clear this data at any time through your browser settings.

## 4. Third-Party Services

GURUKA does not use third-party analytics services or embed third-party tracking scripts. Your browsing activity on GURUKA is not shared with any external service.

## 5. Hosting and Bot Protection

GURUKA is hosted on Cloudflare, which provides DNS, content delivery, and security services. As part of its security features, Cloudflare may occasionally display a brief verification screen ("Verify you are human") to protect the website from automated bots and malicious traffic. This check is lightweight, privacy-preserving, and does not use traditional CAPTCHA puzzles. It runs automatically and typically completes in seconds without requiring any action from you. Cloudflare processes this verification as a data processor on our behalf. For details on how Cloudflare handles this data, see [Cloudflare's Privacy Policy](https://www.cloudflare.com/privacypolicy/).

## 6. Data Security

Because your data is stored locally on your device and not transmitted to our servers, you maintain full control over it. We implement appropriate technical measures to ensure the website itself is served securely.

## 7. Your Rights

Since GURUKA stores no personal data on any server, there is no personal data for us to access, correct, or delete on your behalf. All user data is stored locally in your browser's localStorage and is fully under your control. You can view or clear this data at any time through your browser settings. Clearing your browser cache or site data will permanently delete all stored data including game scores, meditation history, and preferences. For a detailed explanation of how your data is stored and managed, see [How Your Data Works](/your-data/).

## 8. Children's Privacy

GURUKA is suitable for users of all ages. We do not collect personal information from anyone, including children.

## 9. Changes to Privacy Policy

We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new policy on this page and updating the "Last updated" date.

## 10. Contact

If you have questions about this Privacy Policy, please contact us through our website at [https://guruka.com](https://guruka.com).

### GURUKA, Meditações Guiadas, Visualizações e Jogos Mentais Grátis
URL: https://guruka.com/pt/root/
Description: Meditações guiadas, visualizações relaxantes e jogos de treinamento cerebral gratuitos. Sem conta. Sem dados pessoais. Compatível com modo offline.

<style>
.gk-home {
max-width: 40rem;
margin: 2rem auto;
padding: 0 1rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.gk-hero-card {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1.5rem;
border-radius: 1rem;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
text-decoration: none;
color: inherit;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
}
[data-theme="dark"].gk-hero-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
}
.gk-hero-icon {
font-size: 2.25rem;
line-height: 1;
flex-shrink: 0;
}
.gk-hero-body h2 {
font-size: 1.35rem;
font-weight: 700;
margin: 0 0 0.35rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gk-hero-body h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gk-hero-body p {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].gk-hero-body p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.gk-hero-meta {
margin-top: 0.5rem;
font-size: 0.8rem;
color: var(--color-primary, #0f9072);
font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
.gk-hero-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
border-color: rgba(15,144,114,0.3);
}
[data-theme="dark"].gk-hero-card:hover {
box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.12);
border-color: rgba(15,144,114,0.4);
}
}
@media (min-width: 480px) {
.gk-home { padding: 0 1.5rem; gap: 1.5rem; margin: 2.5rem auto; }
.gk-hero-card { padding: 1.75rem; }
.gk-hero-icon { font-size: 2.5rem; }
.gk-hero-body h2 { font-size: 1.5rem; }
}
.gk-headline {
text-align: center;
margin-bottom: 0.5rem;
}
.gk-headline h1 {
font-size: 1.6rem;
font-weight: 800;
line-height: 1.2;
margin: 0 0 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].gk-headline h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
.gk-headline p {
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.03em;
color: var(--color-text-secondary, #4b5b6d);
margin: 0;
}
[data-theme="dark"].gk-headline p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
@media (min-width: 480px) {
.gk-headline h1 { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
.gk-hero-card { transition: none; }
}
</style>

<div class="gk-home">
<div class="gk-headline">
<h1>Meditações Guiadas, Visualizações e Jogos Mentais Grátis</h1>
<p>Grátis · Sem conta · Sem dados pessoais · Compatível com modo offline</p>
</div>
<a href="/pt/meditate/" class="gk-hero-card">
<div class="gk-hero-icon">🧘</div>
<div class="gk-hero-body">
<h2>Meditar</h2>
<p>Meditações guiadas para calma, foco e bem-estar</p>
<div class="gk-hero-meta">Grátis, sem conta necessária</div>
</div>
</a>
<a href="/pt/visuals/" class="gk-hero-card">
<div class="gk-hero-icon">✨</div>
<div class="gk-hero-body">
<h2>Afirmações</h2>
<p>Visuais relaxantes com texto de afirmação opcional</p>
<div class="gk-hero-meta">Grátis, sem conta necessária</div>
</div>
</a>
<a href="/pt/games/" class="gk-hero-card">
<div class="gk-hero-icon">🧠</div>
<div class="gk-hero-body">
<h2>Jogos Mentais</h2>
<p>Treine seu cérebro com jogos para diferentes habilidades cognitivas</p>
<div class="gk-hero-meta">Grátis, sem conta necessária</div>
</div>
</a>
</div>

### Terms of Service
URL: https://guruka.com/pt/terms/
Description: Terms of Service for GURUKA

# Terms of Service

*Last updated: March 6, 2026*

## 1. Acceptance of Terms

By accessing and using GURUKA (https://guruka.com), you accept and agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use our website.

## 2. Use of Service

GURUKA provides free brain training games and guided meditations. You agree to use GURUKA only for lawful purposes and in accordance with these Terms. You agree not to use the service in any way that violates any applicable laws or regulations.

## 3. Intellectual Property

The content, features, and functionality of GURUKA are owned by us and are protected by international copyright, trademark, and other intellectual property laws.

## 4. Disclaimer

Content and activities on GURUKA are for entertainment and general wellness purposes only. They are not intended as medical advice or treatment. The brain training games and meditations are designed for personal enjoyment and should not be considered a substitute for professional medical or psychological guidance.

## 5. User Conduct

You agree not to:

- Use the service for any unlawful purpose
- Attempt to gain unauthorized access to any portion of the service
- Interfere with or disrupt the service or servers
- Collect or harvest any information from the service

## 6. Disclaimer of Warranties

The service is provided "as is" and "as available" without warranties of any kind, either express or implied. We do not warrant that the service will be uninterrupted, secure, or error-free.

## 7. Limitation of Liability

To the fullest extent permitted by law, GURUKA shall not be liable for any indirect, incidental, special, consequential, or punitive damages arising out of your use of the service.

## 8. Changes to Terms

We reserve the right to modify these terms at any time. We will notify users of any material changes by updating the "Last updated" date. Your continued use of the service after changes constitutes acceptance of the modified terms.

## 9. Contact

If you have questions about these Terms of Service, please contact us through our website at [https://guruka.com](https://guruka.com).

### Afirmações e Visuais Meditativos
URL: https://guruka.com/pt/visuals/
Description: Visuais relaxantes em tela cheia com texto de afirmação personalizado. Crie suas próprias afirmações, armazenadas com privacidade no seu navegador.

<style>
#visuals-hub {
max-width: 64rem;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
#visuals-hub .vh-header {
text-align: center;
margin-bottom: 3rem;
}
#visuals-hub .vh-header h1 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] #visuals-hub .vh-header h1 {
color: var(--color-dark-text-primary, #f9fafb);
}
#visuals-hub .vh-header p {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
}
[data-theme="dark"] #visuals-hub .vh-header p {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vh-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.vh-card {
display: grid;
grid-template-columns: 2.5rem 1fr;
column-gap: 0.875rem;
text-decoration: none;
color: inherit;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 1rem;
padding: 1.25rem;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
[data-theme="dark"] .vh-card {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
}
.vh-card:hover { transform: none; }
.vh-dot {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
grid-column: 1;
grid-row: 1;
align-self: center;
}
.vh-card h2 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 0.375rem;
color: var(--color-text-primary, #1a2332);
grid-column: 2;
grid-row: 1;
align-self: center;
}
.vh-card .vh-sub,
.vh-card .vh-launch {
grid-column: 1 / -1;
}
[data-theme="dark"] .vh-card h2 {
color: var(--color-dark-text-primary, #f9fafb);
}
.vh-card .vh-sub {
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.9375rem;
line-height: 1.5;
margin-bottom: 0.375rem;
}
[data-theme="dark"] .vh-card .vh-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vh-launch {
display: flex;
align-items: center;
font-weight: 600;
font-size: 0.9375rem;
color: var(--color-primary, #0f9072);
margin-top: 0.25rem;
min-height: 44px;
}
@media (min-width: 480px) {
.vh-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.vh-card { padding: 1.5rem; }
}
@media (min-width: 768px) {
.vh-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.vh-card {
padding: 1.75rem;
grid-template-columns: 3rem 1fr;
}
.vh-dot { width: 3rem; height: 3rem; }
}
@media (hover: hover) and (pointer: fine) {
.vh-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.vh-card:hover .vh-launch {
color: var(--color-primary-hover, #0d7d63);
}
}
@media (prefers-reduced-motion: reduce) {
.vh-card { transition: none; }
}
</style>

<div id="visuals-hub">
<div class="vh-header">
<h1>Visuais Meditativos</h1>
<p>Animações relaxantes em tela cheia para relaxamento e foco. Insira seu texto de afirmação para exibir.<br>Sem necessidade de conta.</p>
</div>

<div class="vh-grid">
<a href="/pt/visuals/breathing-orb/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#6366f1,#a78bfa)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#6366f1,#a78bfa)"></div>
<h2>Orbe de Respiração</h2>
<p class="vh-sub">Orbe pulsante guiando sua respiração</p>
<div class="vh-launch"><span>Iniciar &rarr;</span></div>
</a>

<a href="/pt/visuals/aurora/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#22d3ee,#06b6d4)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#22d3ee,#06b6d4)"></div>
<h2>Aurora</h2>
<p class="vh-sub">Luzes do norte fluindo</p>
<div class="vh-launch"><span>Iniciar &rarr;</span></div>
</a>

<a href="/pt/visuals/starfield/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#1e293b,#475569)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#1e293b,#475569)"></div>
<h2>Campo Estelar</h2>
<p class="vh-sub">Estrelas cintilando no espaço profundo</p>
<div class="vh-launch"><span>Iniciar &rarr;</span></div>
</a>

<a href="/pt/visuals/lava-flow/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f97316,#ef4444)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#f97316,#ef4444)"></div>
<h2>Fluxo de Lava</h2>
<p class="vh-sub">Gotas fundindo e separando</p>
<div class="vh-launch"><span>Iniciar &rarr;</span></div>
</a>

<a href="/pt/visuals/mandala/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#eab308,#a855f7)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#eab308,#a855f7)"></div>
<h2>Mandala</h2>
<p class="vh-sub">Geometria sagrada em rotação</p>
<div class="vh-launch"><span>Iniciar &rarr;</span></div>
</a>

<a href="/pt/visuals/dividing-cells/" class="vh-card">
<div style="position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#10b981,#22d3ee)"></div>
<div class="vh-dot" style="background:linear-gradient(135deg,#10b981,#22d3ee)"></div>
<h2>Células em Divisão</h2>
<p class="vh-sub">Células dividindo-se sem parar</p>
<div class="vh-launch"><span>Iniciar &rarr;</span></div>
</a>
</div>
</div>

### How Your Data Works
URL: https://guruka.com/pt/your-data/
Description: Learn how GURUKA stores your data locally on your device, what happens when you switch devices or clear your browser, and how to view your stored data.

# How Your Data Works on GURUKA

GURUKA does not require an account, and we do not store any of your data on our servers. Everything you do on GURUKA stays on your own device, inside your web browser. This page explains what that means in plain terms.

## Your data lives on your device

When you use GURUKA, your progress is saved directly inside the browser you are using. This includes:

- Game scores and high scores
- Meditation session history
- Activity tracking data
- Your preferences and settings

This data is not sent anywhere. It is not uploaded to a server. It is not shared with anyone. It exists only on the device and browser where you created it.

## What happens on a different device or browser

Because your data is stored on your device, it is not available anywhere else. If you open GURUKA on a different phone, computer, or tablet, you will start fresh. The same applies if you use a different browser on the same device. For example, if you use Chrome on your laptop and then open GURUKA in Safari, your Chrome data will not appear in Safari.

This is the trade-off for not requiring an account: your data is completely private, but it does not follow you between devices.

## What happens when you clear your browser data

If you clear your browser's cache, cookies, or site data, your GURUKA data will be deleted. This is the same as what happens with any website that stores data locally. Most browsers let you clear data for specific sites without affecting others, but if you do a full cache clear, your GURUKA progress will be removed.

**To keep your data safe:** avoid clearing site data for guruka.com specifically, or be aware that a full browser cache clear will reset your GURUKA progress.

## No account means no data recovery

Since GURUKA does not have accounts or cloud storage, there is no way to recover your data once it is deleted. There is no "forgot password" or "restore from backup" option because no backup exists. Your data is fully in your hands.

## Why we chose this approach

Most apps and websites ask you to create an account so they can store your data on their servers. That is convenient for syncing across devices, but it also means the company has access to your personal information, usage patterns, and habits.

We chose a different path. GURUKA stores everything locally so that:

- **Your data is truly private** - we cannot see it, sell it, or lose it in a data breach
- **No sign-up is needed** - you can start meditating or playing games immediately
- **No tracking** - we do not use advertising pixels or third-party analytics
- **You are in full control** - you can delete your data at any time by clearing your browser storage

## For technical users: how to view your data

GURUKA stores data using your browser's **localStorage**. You can inspect it directly:

1. Open GURUKA in your browser (e.g. [guruka.com/games/](https://guruka.com/games/))
2. Open Developer Tools (press **F12** or **Ctrl+Shift+I** on Windows/Linux, **Cmd+Option+I** on Mac)
3. Go to the **Application** tab (Chrome/Edge) or **Storage** tab (Firefox)
4. In the left sidebar, expand **Local Storage** and click on **https://guruka.com**
5. You will see all stored keys and values: game scores, meditation history, preferences, and activity data

All keys are prefixed with `guruka_` so they are easy to identify. You can edit or delete individual entries, or right-click and choose "Clear" to remove everything.

## Questions?

If you have questions about how your data is handled, see our [Privacy Policy](/privacy/) or [contact us](https://docs.google.com/forms/d/e/1FAIpQLSe1ECOGIxdixwDDVyQqCgPRctD83_jqwEp-6bhysm8gu8uZKA/viewform).

### Color Clash - Gehirntraining Spiel
URL: https://guruka.com/de/games/color-clash/
Description: Wahle Farben nach wechselnden Regeln.

<style>
#color-clash-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #color-clash-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#cc-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.cc-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#cc-instructions.cc-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#cc-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#cc-instructions.cc-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #cc-instructions.cc-subtitle {
color: var(--color-dark-text-secondary);
}

#cc-instructions.cc-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #cc-instructions.cc-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#cc-instructions.cc-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#cc-instructions.cc-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#cc-instructions.cc-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.cc-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].cc-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.cc-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.cc-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.cc-btn-primary:hover {
background: var(--color-primary-hover);
}

.cc-btn-primary:active {
transform: scale(0.97);
}

.cc-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.cc-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"].cc-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#cc-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#cc-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: cc-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #cc-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes cc-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.cc-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.cc-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.cc-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].cc-wizard-desc {
color: var(--color-dark-text-secondary);
}
.cc-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.cc-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.cc-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].cc-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"].cc-wizard-dot.active {
background: var(--color-primary);
}
.cc-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.cc-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#cc-wizard-card {
padding: 1.5rem 1rem;
}
.cc-wizard-icon {
font-size: 2rem;
}
.cc-wizard-title {
font-size: 1.1rem;
}
.cc-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#cc-playing {
display: none;
flex: 1;
flex-direction: column;
}

.cc-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].cc-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.cc-stat {
text-align: center;
}

.cc-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"].cc-stat-label {
color: var(--color-dark-text-secondary);
}

.cc-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.cc-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.cc-level-text {
font-weight: 600;
}

.cc-modifier-badge {
background: #ec4899;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.cc-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].cc-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.cc-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.cc-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"].cc-timer-bar {
background: var(--color-dark-bg-secondary);
}

.cc-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.cc-timer-fill.cc-timer-warning {
background: #ef4444;
}

/* ── Rule Indicator ── */
.cc-rule-indicator {
text-align: center;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 1rem;
transition: background 0.3s, color 0.3s;
}

.cc-rule-ink {
background: rgba(236,72,153,0.15);
color: #ec4899;
border: 1px solid rgba(236,72,153,0.3);
}

[data-theme="dark"].cc-rule-ink {
background: rgba(236,72,153,0.25);
color: #f472b6;
}

.cc-rule-word {
background: rgba(59,130,246,0.15);
color: #3b82f6;
border: 1px solid rgba(59,130,246,0.3);
}

[data-theme="dark"].cc-rule-word {
background: rgba(59,130,246,0.25);
color: #60a5fa;
}

.cc-rule-bg {
background: rgba(168,85,247,0.15);
color: #a855f7;
border: 1px solid rgba(168,85,247,0.3);
}

[data-theme="dark"].cc-rule-bg {
background: rgba(168,85,247,0.25);
color: #c084fc;
}

/* ── Stimulus Display ── */
.cc-stimulus-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
position: relative;
}

.cc-stimulus-word {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.2;
animation: cc-stimulus-enter 0.2s ease-out;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.cc-stimulus-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
animation: cc-stimulus-enter 0.2s ease-out;
}

.cc-bg-square {
width: 50px;
height: 50px;
border-radius: 0.5rem;
border: 2px solid rgba(0,0,0,0.1);
flex-shrink: 0;
}

[data-theme="dark"].cc-bg-square {
border-color: rgba(255,255,255,0.15);
}

@keyframes cc-stimulus-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.cc-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.cc-feedback-flash.cc-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.cc-feedback-flash.cc-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.cc-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.cc-feedback-icon.cc-show-check {
animation: cc-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.cc-feedback-icon.cc-show-x {
animation: cc-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes cc-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Color Answer Buttons ── */
.cc-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.cc-answer-btn {
padding: 0.75rem;
border: 2px solid transparent;
border-radius: 0.75rem;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, opacity 0.15s;
color: #fff;
min-height: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}

.cc-color-circle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.4);
background: currentColor;
}

.cc-answer-btn:active {
transform: scale(0.95);
}

.cc-answer-btn:hover {
opacity: 0.9;
border-color: rgba(255,255,255,0.5);
}

.cc-answer-btn.cc-correct-flash {
border-color: #22c55e;
box-shadow: 0 0 15px rgba(34,197,94,0.4);
}

.cc-answer-btn.cc-wrong-flash {
border-color: #ef4444;
box-shadow: 0 0 15px rgba(239,68,68,0.4);
}

.cc-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].cc-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#cc-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#cc-pause-overlay.cc-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#cc-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.cc-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: cc-modal-enter 0.3s ease-out;
}

[data-theme="dark"].cc-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes cc-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.cc-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.cc-complete-card.cc-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.cc-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.cc-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: cc-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes cc-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.cc-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.cc-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"].cc-complete-stat {
background: var(--color-dark-bg-secondary);
}

.cc-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"].cc-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.cc-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.cc-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.cc-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"].cc-back-link {
color: var(--color-dark-text-secondary);
}

.cc-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.cc-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.cc-level-up-toast.cc-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#color-clash-game {
padding: 0.5rem;
}
.cc-stimulus-word {
font-size: 2.5rem;
}
.cc-answer-btn {
padding: 0.5rem;
min-height: 60px;
font-size: 0.7rem;
}
.cc-color-circle {
width: 40px;
height: 40px;
}
.cc-header {
padding: 0.5rem;
gap: 0.25rem;
}
.cc-stat-value {
font-size: 1rem;
}
#cc-instructions { padding: 0.75rem 0.5rem; }
#cc-instructions.cc-icon { font-size: 2rem; margin-bottom: 0; }
#cc-instructions h2 { font-size: 1.3rem; }
#cc-instructions.cc-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#cc-instructions.cc-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#cc-instructions.cc-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.cc-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
.cc-bg-square { width: 40px; height: 40px; }
}
@media (max-width: 640px) {
#color-clash-game {
padding: 0.75rem;
}
.cc-stimulus-word {
font-size: 3rem;
}
.cc-answer-btn {
padding: 0.625rem;
}
}
@media (max-width: 360px) {
.cc-stimulus-word {
font-size: 2rem;
}
.cc-answer-btn {
padding: 0.5rem;
font-size: 0.65rem;
min-height: 54px;
}
.cc-color-circle {
width: 34px;
height: 34px;
}
.cc-complete-stats {
grid-template-columns: 1fr 1fr;
}
.cc-final-score {
font-size: 2rem;
}
.cc-header {
padding: 0.375rem;
}
.cc-stat-value {
font-size: 0.9rem;
}
.cc-rule-indicator {
font-size: 0.8rem;
padding: 0.4rem 0.75rem;
}
}
@keyframes cc-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.cc-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.cc-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: cc-confetti-fall 2.5s ease-in forwards;
}
.cc-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(236,72,153,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: cc-glow-fade 1s ease-out forwards;
}
@keyframes cc-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.cc-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: cc-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(236,72,153,0.4);
}
@keyframes cc-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#color-clash-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#color-clash-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #color-clash-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#color-clash-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#color-clash-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="color-clash-game">

<div id="cc-instructions">
<div class="cc-title-row"><span class="cc-icon">&#127912;</span><h2>Color Clash</h2></div>
<p class="cc-subtitle">Stroop-basierte Hemmungskontrolle &amp; selektive Aufmerksamkeit</p>
<div class="cc-how-to">
<h3>Wie man spielt</h3>
<ol>
<li>Ein Farbwort erscheint in einer <strong>anderen Tintenfarbe</strong>.</li>
<li>Folge dem <strong>Regelindikator</strong>, tippe auf die richtige Farbe gem&auml;&szlig; der aktuellen Regel.</li>
<li>Die Regeln wechseln zwischen <strong>&bdquo;Tintenfarbe&ldquo;</strong> und <strong>&bdquo;Wortbedeutung&ldquo;</strong> wenn du aufsteigst.</li>


</ol>
</div>
<div id="cc-best-display" class="cc-personal-best" style="display:none;">
Pers&ouml;nlicher Rekord: <strong id="cc-best-score">0</strong> Punkte
</div>
<button class="cc-btn-primary" id="cc-start-btn">Spiel starten</button>
<div id="cc-challenge-banner-wrap"></div>
</div>

<div id="cc-wizard">
<div id="cc-wizard-card"></div>
</div>

<div id="cc-playing">
<div class="cc-header">
<div class="cc-stat">
<div class="cc-stat-label">Punkte</div>
<div class="cc-stat-value" id="cc-score">0</div>
</div>
<div class="cc-stat">
<div class="cc-stat-label">Serie</div>
<div class="cc-stat-value" id="cc-streak">0</div>
</div>
<div class="cc-stat">
<div class="cc-stat-label">Level</div>
<div class="cc-stat-value" id="cc-level">1</div>
</div>
</div>
<div class="cc-level-info">
<span class="cc-level-text">Level <span id="cc-level-text">1</span></span>
<span class="cc-modifier-badge" id="cc-modifier-badge" style="display:none;">Regelwechsel</span>
</div>
<div class="cc-progress-bar">
<div class="cc-progress-fill" id="cc-progress-fill" style="width:0%"></div>
</div>
<div class="cc-timer-bar">
<div class="cc-timer-fill" id="cc-timer-fill" style="width:100%"></div>
</div>
<div class="cc-rule-indicator cc-rule-ink" id="cc-rule-indicator">Tippe auf die TINTENFARBE</div>
<div class="cc-stimulus-area">
<div class="cc-feedback-flash" id="cc-feedback-flash"></div>
<div class="cc-feedback-icon" id="cc-feedback-icon"></div>
<div id="cc-stimulus-wrap" class="cc-stimulus-wrap">
<span class="cc-stimulus-word" id="cc-stimulus-word"></span>
<div class="cc-bg-square" id="cc-bg-square" style="display:none;"></div>
</div>
</div>
<div class="cc-answers" id="cc-answers">
<button class="cc-answer-btn" id="cc-ans-0"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-1"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-2"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-3"><div class="cc-color-circle"></div><span></span></button>
</div>
<div class="cc-playing-hint">Dr&uuml;cke <strong>1-4</strong> zum Antworten &middot; <strong>Esc</strong> zum Pausieren</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="cc-pause-btn" type="button">Pause</button>
<button class="gk-finish-btn" id="cc-finish-btn" type="button">Spiel beenden</button>
</div>
</div>

<div id="cc-pause-overlay">
<div class="cc-pause-text">Pausiert</div>
<button class="cc-btn-primary" id="cc-resume-btn">Fortsetzen</button>
</div>

<div id="cc-complete-overlay">
<div class="cc-complete-card">
<button class="gk-complete-close" id="cc-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="cc-trophy">&#127942;</div>
<h2>Spiel beendet!</h2>
<div class="cc-final-score" id="cc-final-score">0</div>
<div id="cc-new-best" class="cc-new-best" style="display:none;">&#11088; Neuer Rekord!</div>
<div class="gk-challenge-result" id="cc-challenge-result" style="display:none;"></div>
<div class="cc-complete-stats">
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Level erreicht</div>
<div class="cc-complete-stat-value" id="cc-final-level">1</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Genauigkeit</div>
<div class="cc-complete-stat-value" id="cc-final-accuracy">0%</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Serie</div>
<div class="cc-complete-stat-value" id="cc-final-streak">0</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Pers&ouml;nlicher Rekord</div>
<div class="cc-complete-stat-value" id="cc-final-best">0</div>
</div>
</div>
<div class="cc-complete-actions">
<button class="cc-btn-primary" id="cc-play-again-btn">Nochmal spielen</button>
<button class="gk-runtime-history-toggle" id="cc-history-toggle" type="button">Show History</button>
<a href="/de/games/" class="cc-back-link">&larr; Alle Spiele</a>
</div>
<div class="gk-runtime-history-panel" id="cc-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="cc-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="cc-share-btn">&#128279; Teile dein Ergebnis</button>
<div class="gk-share-copied" id="cc-share-copied" style="display:none;">Kopiert!</div>
</div>
</div>
</div>

<div class="cc-level-up-toast" id="cc-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_color-clash_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('cc-history-toggle', 'cc-history-panel', 'cc-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

/* ── Color pool ── */
var COLORS = [
{ name: 'Rot', hex: '#ef4444' },
{ name: 'Blau', hex: '#3b82f6' },
{ name: 'Gr\u00fcn', hex: '#22c55e' },
{ name: 'Gelb', hex: '#eab308' },
{ name: 'Lila', hex: '#a855f7' },
{ name: 'Orange', hex: '#f97316' },
{ name: 'Rosa', hex: '#ec4899' },
{ name: 'T\u00fcrkis', hex: '#06b6d4' }
];

var RULES = { INK: 'ink', WORD: 'word', BG: 'bg' };

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctColorName: '',
currentRule: RULES.INK,
currentStimulus: null,
currentChoices: [],
roundsSinceRuleSwitch: 0,
nextRuleSwitchAt: 0
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('cc-instructions');
var elWizard = document.getElementById('cc-wizard');
var elWizardCard = document.getElementById('cc-wizard-card');
var elPlaying = document.getElementById('cc-playing');
var elPauseOverlay = document.getElementById('cc-pause-overlay');
var elCompleteOverlay = document.getElementById('cc-complete-overlay');
var elScore = document.getElementById('cc-score');
var elStreak = document.getElementById('cc-streak');
var elLevel = document.getElementById('cc-level');
var elLevelText = document.getElementById('cc-level-text');
var elModifierBadge = document.getElementById('cc-modifier-badge');
var elProgressFill = document.getElementById('cc-progress-fill');
var elTimerFill = document.getElementById('cc-timer-fill');
var elRuleIndicator = document.getElementById('cc-rule-indicator');
var elStimulusWord = document.getElementById('cc-stimulus-word');
var elStimulusWrap = document.getElementById('cc-stimulus-wrap');
var elBgSquare = document.getElementById('cc-bg-square');
var elFeedbackFlash = document.getElementById('cc-feedback-flash');
var elFeedbackIcon = document.getElementById('cc-feedback-icon');
var elFinalScore = document.getElementById('cc-final-score');
var elNewBest = document.getElementById('cc-new-best');
var elFinalLevel = document.getElementById('cc-final-level');
var elFinalAccuracy = document.getElementById('cc-final-accuracy');
var elFinalStreak = document.getElementById('cc-final-streak');
var elFinalBest = document.getElementById('cc-final-best');
var elBestDisplay = document.getElementById('cc-best-display');
var elBestScore = document.getElementById('cc-best-score');
var elLevelToast = document.getElementById('cc-level-toast');
var btnStart = document.getElementById('cc-start-btn');
var btnResume = document.getElementById('cc-resume-btn');
var btnPlayAgain = document.getElementById('cc-play-again-btn');
var answerBtns = [
document.getElementById('cc-ans-0'),
document.getElementById('cc-ans-1'),
document.getElementById('cc-ans-2'),
document.getElementById('cc-ans-3')
];

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getColorPool(lvl) {
if (lvl <= 9) return COLORS.slice(0, 4);
return COLORS;
}

/* ── Rule logic ── */
function getRuleForLevel(lvl) {
if (lvl <= 6) return RULES.INK;
return RULES.INK;
}

function shouldSwitchRules(lvl) {
return lvl >= 7;
}

function isTripleStroop(lvl) {
return lvl >= 17;
}

function isCongruent(lvl) {
return lvl <= 3;
}

function doesRuleSwitchMidLevel(lvl) {
return lvl >= 13 && lvl <= 16;
}

function updateRuleIndicator() {
elRuleIndicator.className = 'cc-rule-indicator';
if (state.currentRule === RULES.INK) {
elRuleIndicator.textContent = 'Tippe auf die TINTENFARBE';
elRuleIndicator.classList.add('cc-rule-ink');
} else if (state.currentRule === RULES.WORD) {
elRuleIndicator.textContent = 'Tippe auf die WORTBEDEUTUNG';
elRuleIndicator.classList.add('cc-rule-word');
} else if (state.currentRule === RULES.BG) {
elRuleIndicator.textContent = 'Tippe auf die HINTERGRUNDFARBE';
elRuleIndicator.classList.add('cc-rule-bg');
}
}

/* ── Random helpers ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}

function pickRandom(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function pickDifferent(arr, exclude) {
var filtered = arr.filter(function(c) { return c.name !== exclude.name; });
return pickRandom(filtered);
}

/* ── Generate stimulus ── */
function generateStimulus(lvl) {
var pool = getColorPool(lvl);
var wordColor, inkColor, bgColor, correctColor;

if (isCongruent(lvl)) {
/* L1-3: congruent, word matches ink */
wordColor = pickRandom(pool);
inkColor = wordColor;
bgColor = null;
state.currentRule = RULES.INK;
correctColor = wordColor;
} else if (lvl <= 6) {
/* L4-6: incongruent, identify ink */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
state.currentRule = RULES.INK;
correctColor = inkColor;
} else if (lvl <= 9) {
/* L7-9: rule alternates each round between ink and word */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else if (lvl <= 12) {
/* L10-12: 8 colors, rule alternates */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else if (lvl <= 16) {
/* L13-16: rule switches mid-level */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else {
/* L17-20: triple stroop */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = pickDifferent(pool, inkColor);
while (bgColor.name === wordColor.name) {
bgColor = pickDifferent(pool, inkColor);
}
if (state.currentRule === RULES.INK) {
correctColor = inkColor;
} else if (state.currentRule === RULES.WORD) {
correctColor = wordColor;
} else {
correctColor = bgColor;
}
}

return {
wordText: wordColor.name,
inkHex: inkColor.hex,
bgColor: bgColor,
correctColor: correctColor,
pool: pool
};
}

function generateColorChoices(correctColor, pool) {
var choices = [correctColor];
var attempts = 0;
while (choices.length < 4 && attempts < 50) {
var candidate = pickRandom(pool);
var isDuplicate = false;
for (var i = 0; i < choices.length; i++) {
if (choices[i].name === candidate.name) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
choices.push(candidate);
}
attempts++;
}
/* Fill remaining if pool is too small */
var allColors = COLORS.slice();
while (choices.length < 4) {
var c = pickRandom(allColors);
var dup = false;
for (var k = 0; k < choices.length; k++) {
if (choices[k].name === c.name) { dup = true; break; }
}
if (!dup) choices.push(c);
}
return shuffle(choices);
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
if (shouldSwitchRules(state.level)) {
elModifierBadge.style.display = '';
if (isTripleStroop(state.level)) {
elModifierBadge.textContent = 'Dreifach-Stroop';
} else if (doesRuleSwitchMidLevel(state.level)) {
elModifierBadge.textContent = 'Wechsel im Level';
} else {
elModifierBadge.textContent = 'Regelwechsel';
}
} else {
elModifierBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('cc-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('cc-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('cc-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'cc-feedback-flash';
elFeedbackIcon.className = 'cc-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('cc-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('cc-show-check');
} else {
elFeedbackFlash.classList.add('cc-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('cc-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'cc-feedback-flash';
elFeedbackIcon.className = 'cc-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('cc-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('cc-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'cc-correct-flash' : 'cc-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('cc-correct-flash', 'cc-wrong-flash');
}, 400);
}

/* ── Determine rule for the next round ── */
function determineRule() {
var lvl = state.level;
if (lvl <= 3) {
state.currentRule = RULES.INK;
} else if (lvl <= 6) {
state.currentRule = RULES.INK;
} else if (lvl <= 12) {
/* Alternate each round */
state.currentRule = (state.round % 2 === 0) ? RULES.INK : RULES.WORD;
} else if (lvl <= 16) {
/* Mid-level switching every 3-5 rounds */
state.roundsSinceRuleSwitch++;
if (state.roundsSinceRuleSwitch >= state.nextRuleSwitchAt) {
state.currentRule = (state.currentRule === RULES.INK) ? RULES.WORD : RULES.INK;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
}
} else {
/* L17-20: triple stroop, cycle through ink/word/bg */
var rules = [RULES.INK, RULES.WORD, RULES.BG];
state.roundsSinceRuleSwitch++;
if (state.roundsSinceRuleSwitch >= state.nextRuleSwitchAt) {
var currentIdx = rules.indexOf(state.currentRule);
var nextIdx = (currentIdx + 1) % rules.length;
state.currentRule = rules[nextIdx];
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(2, 4);
}
}
}

/* ── Set color button appearance ── */
function setColorButton(btn, color) {
btn.style.background = color.hex;
btn.style.borderColor = 'transparent';
var circle = btn.querySelector('.cc-color-circle');
var label = btn.querySelector('span');
circle.style.background = '#fff';
circle.style.borderColor = 'rgba(255,255,255,0.6)';
circle.style.background = color.hex;
circle.style.filter = 'brightness(1.2)';
label.textContent = color.name;
btn.dataset.colorName = color.name;
}

function findColorByName(name) {
for (var i = 0; i < COLORS.length; i++) {
if (COLORS[i].name === name) return COLORS[i];
}
return null;
}

function colorHistoryChip(color) {
if (!color) return 'No answer';
return '<span class="gk-history-swatch" style="background:' + runHistory.escape(color.hex) + '"></span>' + runHistory.escape(color.name);
}

function recordColorHistory(selectedName, correct) {
var selected = findColorByName(selectedName);
var correctColor = state.currentStimulus ? state.currentStimulus.correctColor : findColorByName(state.correctColorName);
var ruleText = elRuleIndicator ? elRuleIndicator.textContent : 'Color rule';
var stimulus = state.currentStimulus;
var html = '<strong>' + runHistory.escape(ruleText) + '</strong>';
if (stimulus) {
html += '<div class="gk-runtime-history-sub">Word: ' + runHistory.escape(stimulus.wordText) + ' | Ink: <span class="gk-history-swatch" style="background:' + runHistory.escape(stimulus.inkHex) + '"></span></div>';
}
html += '<div class="gk-runtime-history-sub">Your: ' + colorHistoryChip(selected) + ' | Correct: ' + colorHistoryChip(correctColor) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var chosenName = answerBtns[chosenIdx].dataset.colorName;
var correct = (chosenName === state.correctColorName);

state.totalAnswered++;
recordColorHistory(chosenName, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordColorHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

/* Determine rule for this round */
determineRule();
updateRuleIndicator();

var stimulus = generateStimulus(state.level);
state.correctColorName = stimulus.correctColor.name;
state.currentStimulus = stimulus;

/* Display the stimulus word */
elStimulusWord.textContent = stimulus.wordText;
elStimulusWord.style.color = stimulus.inkHex;
elStimulusWrap.style.animation = 'none';
void elStimulusWrap.offsetWidth;
elStimulusWrap.style.animation = '';

/* Handle background square for triple stroop */
if (stimulus.bgColor && isTripleStroop(state.level)) {
elBgSquare.style.display = 'block';
elBgSquare.style.background = stimulus.bgColor.hex;
} else {
elBgSquare.style.display = 'none';
}

/* Generate and display color choices */
var choices = generateColorChoices(stimulus.correctColor, stimulus.pool);
state.currentChoices = choices.slice();
for (var i = 0; i < 4; i++) {
setColorButton(answerBtns[i], choices[i]);
}

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'cc-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'cc-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'cc-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.cc-trophy');
var title = document.querySelector('#cc-complete-overlay .cc-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'FANTASTISCH!';
elNewBest.className = 'cc-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F FANTASTISCH! Neuer Rekord!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Gut gemacht!';
elNewBest.className = 'cc-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('cc-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var CC_WIZARD_STEPS = [
{icon: '\uD83C\uDFA8', title: 'Lies die Farbe, nicht das Wort', desc: 'Ein Farbwort erscheint in einer anderen Tintenfarbe. Folge dem Regelindikator, um die richtige Antwort zu w\u00e4hlen!'},
{icon: '\uD83D\uDD04', title: 'Regeln wechseln beim Aufstieg', desc: 'Auf h\u00f6heren Leveln wechselt die Regel zwischen \u201eTintenfarbe\u201c und \u201eWortbedeutung\u201c. Bleib aufmerksam!'},
{icon: '\u26A1', title: 'Schnell', desc: 'Antworte bevor die Zeit abl\u00e4uft. Geschwindigkeit und Serien bringen Bonuspunkte!', final: true}
];
var ccWizardStep = 0;

function renderWizardStep() {
var s = CC_WIZARD_STEPS[ccWizardStep];
var dotsHtml = '';
for (var i = 0; i < CC_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="cc-wizard-dot' + (i === ccWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Spiel starten' : 'Weiter';
elWizardCard.innerHTML =
'<div class="cc-wizard-icon">' + s.icon + '</div>' +
'<div class="cc-wizard-title">' + s.title + '</div>' +
'<div class="cc-wizard-desc">' + s.desc + '</div>' +
'<div class="cc-wizard-dots">' + dotsHtml + '</div>' +
'<button class="cc-wizard-btn" id="cc-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'cc-wizard-enter 0.3s ease-out';
document.getElementById('cc-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ccWizardStep < CC_WIZARD_STEPS.length - 1) {
ccWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ccWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctColorName = '';
state.currentRule = RULES.INK;
state.currentStimulus = null;
state.currentChoices = [];
runHistory.clear();
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('cc-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('cc-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('cc-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('cc-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('cc-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('cc-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Color Clash', '/de/games/color-clash/', 'cc-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key >= '1' && e.key <= '4') {
e.preventDefault();
processAnswer(parseInt(e.key, 10) - 1);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('cc-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Memory Matrix - Gehirntraining-Spiel
URL: https://guruka.com/de/games/memory-matrix/
Description: Merke dir Rastermuster.

<style>
#memory-matrix-game {
max-width: 540px;
margin: 0 auto;
padding: 1.5rem 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
-webkit-tap-highlight-color: transparent;
}

#memory-matrix-game * {
box-sizing: border-box;
}

#memory-matrix-game .mm-screen {
display: none;
animation: mmFadeIn 0.4s ease-out;
}

#memory-matrix-game .mm-screen.active {
display: block;
}

@keyframes mmFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes mmPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}

@keyframes mmCellGlow {
0% { box-shadow: 0 0 0 0 rgba(15, 144, 114, 0.4); }
70% { box-shadow: 0 0 0 8px rgba(15, 144, 114, 0); }
100% { box-shadow: 0 0 0 0 rgba(15, 144, 114, 0); }
}

@keyframes mmShine {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}

@keyframes mmBounceIn {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}

@keyframes mmSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* ---- Instructions Screen ---- */
#memory-matrix-game .mm-instructions {
text-align: center;
}

#memory-matrix-game .mm-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#memory-matrix-game .mm-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 0.75rem;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
margin-bottom: 0;
}

#memory-matrix-game .mm-icon-wrap svg {
width: 36px;
height: 36px;
stroke: var(--color-primary);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

#memory-matrix-game .mm-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 0.25rem;
}

#memory-matrix-game .mm-subtitle {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
}

#memory-matrix-game .mm-how-to {
text-align: left;
margin-bottom: 1.5rem;
}

#memory-matrix-game .mm-how-to h3 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 0.75rem;
}

#memory-matrix-game .mm-how-to ol {
list-style: none;
padding: 0;
margin: 0;
}

#memory-matrix-game .mm-how-to li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.625rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

#memory-matrix-game .mm-step-num {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
font-size: 0.8rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}

#memory-matrix-game .mm-best-banner {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 0.75rem 1rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

#memory-matrix-game .mm-best-banner strong {
color: var(--color-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-best-banner {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

/* ---- Buttons ---- */
#memory-matrix-game .mm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: none;
border-radius: 0.625rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
padding: 0.75rem 1.5rem;
transition: all 0.2s ease;
}

#memory-matrix-game .mm-btn:active {
transform: scale(0.97);
}

#memory-matrix-game .mm-btn-primary {
background: var(--color-primary);
color: #fff;
width: 100%;
}

#memory-matrix-game .mm-btn-primary:hover {
background: var(--color-primary-hover);
box-shadow: 0 4px 12px rgba(15, 144, 114, 0.3);
}

#memory-matrix-game .mm-btn-outline {
background: transparent;
color: var(--color-text-primary);
border: 2px solid var(--color-border);
}

#memory-matrix-game .mm-btn-outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-btn-outline {
color: var(--color-dark-text-primary);
border-color: var(--color-dark-border);
}

[data-theme="dark"] #memory-matrix-game .mm-btn-outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}

#memory-matrix-game .mm-btn-submit {
background: var(--color-primary);
color: #fff;
}

#memory-matrix-game .mm-btn-submit:hover:not(:disabled) {
background: var(--color-primary-hover);
}

#memory-matrix-game .mm-btn-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* ---- Wizard Overlay ---- */
#mm-wizard {
display: none;
animation: mmFadeIn 0.4s ease-out;
}
#mm-wizard.active {
display: block;
}
.mm-wizard-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
.mm-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: mmWizardEnter 0.3s ease-out;
}
[data-theme="dark"].mm-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes mmWizardEnter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.mm-wizard-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.mm-wizard-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
.mm-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].mm-wizard-desc { color: var(--color-dark-text-secondary); }
.mm-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.mm-wizard-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-border);
transition: all 0.3s;
}
.mm-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].mm-wizard-dot { background: var(--color-dark-border, #3a4553); }
[data-theme="dark"].mm-wizard-dot.active { background: var(--color-primary); }
.mm-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.mm-wizard-btn:hover { background: var(--color-primary-hover, #0d7a62); }
@media (max-width: 400px) {
.mm-wizard-card { padding: 1.5rem 1rem; }
.mm-wizard-icon { font-size: 2rem; }
.mm-wizard-title { font-size: 1.1rem; }
.mm-wizard-desc { font-size: 0.85rem; }
}

/* ---- Game Header ---- */
#memory-matrix-game .mm-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
margin-bottom: 1rem;
}

[data-theme="dark"] #memory-matrix-game .mm-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-header-item {
text-align: center;
}

#memory-matrix-game .mm-header-label {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.125rem;
}

[data-theme="dark"] #memory-matrix-game .mm-header-label {
color: var(--color-dark-text-secondary);
}

#memory-matrix-game .mm-header-value {
font-size: 1.15rem;
font-weight: 700;
color: var(--color-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-header-value {
color: var(--color-dark-text-primary);
}

#memory-matrix-game .mm-streak-value {
color: #f59e0b;
}

/* ---- Phase Indicator ---- */
#memory-matrix-game .mm-phase {
text-align: center;
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 1rem;
min-height: 1.5rem;
}

#memory-matrix-game .mm-phase-memorize {
color: var(--color-primary);
animation: mmPulse 1.5s ease-in-out infinite;
}

#memory-matrix-game .mm-phase-recall {
color: #f59e0b;
}

#memory-matrix-game .mm-phase-correct {
color: #22c55e;
}

#memory-matrix-game .mm-phase-wrong {
color: #ef4444;
}

/* ---- Grid ---- */
#memory-matrix-game .mm-grid-wrap {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}

#memory-matrix-game .mm-grid {
display: grid;
gap: 6px;
}

#memory-matrix-game .mm-cell {
aspect-ratio: 1;
border-radius: 8px;
border: 2px solid var(--color-border);
background: var(--color-bg-secondary);
cursor: default;
transition: all 0.25s ease;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
color: transparent;
-webkit-user-select: none;
user-select: none;
}

[data-theme="dark"] #memory-matrix-game .mm-cell {
border-color: var(--color-dark-border);
background: var(--color-dark-bg-secondary);
}

#memory-matrix-game .mm-cell.recall-mode {
cursor: pointer;
}

#memory-matrix-game .mm-cell.recall-mode:hover {
border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-secondary));
}

[data-theme="dark"] #memory-matrix-game .mm-cell.recall-mode:hover {
background: color-mix(in srgb, var(--color-primary) 10%, var(--color-dark-bg-secondary));
}

#memory-matrix-game .mm-cell.showing {
background: var(--color-primary);
border-color: var(--color-primary);
animation: mmCellGlow 0.6s ease-out;
}

#memory-matrix-game .mm-cell.selected {
background: color-mix(in srgb, var(--color-primary) 80%, transparent);
border-color: var(--color-primary);
color: #fff;
}

#memory-matrix-game .mm-cell.fb-correct {
background: #22c55e;
border-color: #16a34a;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-missed {
background: rgba(239, 68, 68, 0.45);
border-color: #ef4444;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-wrong {
background: #ef4444;
border-color: #dc2626;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-neutral {
opacity: 0.5;
transition: all 0.3s ease;
}

/* ---- Progress Bar ---- */
#memory-matrix-game .mm-progress-wrap {
margin-bottom: 1rem;
text-align: center;
}

#memory-matrix-game .mm-progress-bar {
height: 6px;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 3px;
overflow: hidden;
max-width: 240px;
margin: 0 auto 0.375rem;
}

[data-theme="dark"] #memory-matrix-game .mm-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

#memory-matrix-game .mm-progress-text {
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-progress-text {
color: var(--color-dark-text-secondary);
}

/* ---- Action Buttons ---- */
#memory-matrix-game .mm-actions {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}

/* ---- Game Complete Screen ---- */
#memory-matrix-game .mm-complete {
position: relative;
text-align: center;
}

#memory-matrix-game .mm-score-display {
font-size: 3rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
background: linear-gradient(90deg, var(--color-primary), #10b981, var(--color-primary));
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: mmShine 3s linear infinite;
}

#memory-matrix-game .mm-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin: 1.25rem 0;
}

#memory-matrix-game .mm-stat-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 0.75rem 0.5rem;
}

[data-theme="dark"] #memory-matrix-game .mm-stat-card {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-stat-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-stat-value {
color: var(--color-dark-text-primary);
}

#memory-matrix-game .mm-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-secondary);
margin-top: 0.125rem;
}

[data-theme="dark"] #memory-matrix-game .mm-stat-label {
color: var(--color-dark-text-secondary);
}

#memory-matrix-game .mm-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #000;
font-size: 0.8rem;
font-weight: 700;
padding: 0.375rem 1rem;
border-radius: 2rem;
margin-bottom: 1rem;
animation: mmBounceIn 0.5s ease-out;
}

#memory-matrix-game .mm-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}

#memory-matrix-game .mm-back-link {
display: inline-block;
margin-top: 0.75rem;
color: var(--color-primary);
text-decoration: none;
font-size: 0.9rem;
}

#memory-matrix-game .mm-back-link:hover {
text-decoration: underline;
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

/* ---- Dark Mode ---- */
[data-theme="dark"] #memory-matrix-game {
color: var(--color-dark-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-title {
color: var(--color-dark-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-subtitle {
color: var(--color-dark-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-how-to li {
color: var(--color-dark-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-cell.recall-mode:hover {
border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

/* ---- Responsive ---- */
@media (max-width: 400px) {
#memory-matrix-game {
padding: 1rem 0.5rem;
}
#memory-matrix-game .mm-grid {
gap: 4px;
}
#memory-matrix-game .mm-header {
padding: 0.5rem;
}
#memory-matrix-game .mm-header-value {
font-size: 1rem;
}
#memory-matrix-game .mm-btn {
padding: 0.625rem 1rem;
font-size: 0.9rem;
}
#memory-matrix-game .mm-icon-wrap { width: 40px; height: 40px; margin-bottom: 0; }
#memory-matrix-game .mm-icon-wrap svg { width: 20px; height: 20px; }
#memory-matrix-game .mm-instructions h2 { font-size: 1.3rem; }
#memory-matrix-game .mm-instructions.mm-subtitle { font-size: 0.85rem; margin-bottom: 0.75rem; }
}
@media (max-width: 640px) {
#memory-matrix-game .mm-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
#memory-matrix-game .mm-stat-value {
font-size: 1.1rem;
}
}
@media (max-width: 360px) {
#memory-matrix-game .mm-grid {
gap: 3px;
}
#memory-matrix-game .mm-stats-grid {
grid-template-columns: 1fr 1fr;
}
#memory-matrix-game .mm-btn {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}
#memory-matrix-game .mm-title {
font-size: 1.25rem;
}
#memory-matrix-game .mm-grid-wrap {
max-width: 100%;
overflow: hidden;
}
}
@keyframes mm-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.mm-confetti-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.mm-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: mm-confetti-fall 2.5s ease-in forwards;
}
.mm-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: mm-glow-fade 1s ease-out forwards;
}
@keyframes mm-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.mm-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
font-size: 0.85rem;
font-weight: 700;
padding: 0.375rem 1rem;
border-radius: 2rem;
margin-bottom: 1rem;
animation: mmBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}

#memory-matrix-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#memory-matrix-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #memory-matrix-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="memory-matrix-game">

<div id="mm-instructions" class="mm-screen active">
<div class="mm-instructions">
<div class="mm-title-row"><div class="mm-icon-wrap"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div><h1 class="mm-title">Memory Matrix</h1></div>
<p class="mm-subtitle">Teste dein räumliches Gedächtnis</p>
<div class="mm-how-to">
<h3>So spielst du:</h3>
<ol>
<li><span class="mm-step-num">1</span><span>Beobachte das Muster -- Zellen leuchten nacheinander auf</span></li>
<li><span class="mm-step-num">2</span><span>Merke dir, welche Zellen aufleuchten</span></li>
<li><span class="mm-step-num">3</span><span>Tippe die gleichen Zellen aus dem Gedächtnis an</span></li>
<li><span class="mm-step-num">4</span><span>Ab Level 8 ist die Reihenfolge wichtig! Tippe in der richtigen Reihenfolge</span></li>
</ol>
</div>
<div id="mm-instr-best" class="mm-best-banner" style="display:none;"></div>
<button class="mm-btn mm-btn-primary" onclick="mmShowWizard()">Spiel starten</button>
<div id="mm-challenge-banner-wrap"></div>
</div>
</div>

<div id="mm-wizard" class="mm-screen">
<div class="mm-wizard-overlay">
<div class="mm-wizard-card" id="mm-wizard-card"></div>
</div>
</div>

<div id="mm-playing" class="mm-screen">
<div class="mm-header">
<div class="mm-header-item">
<div class="mm-header-label">Punkte</div>
<div class="mm-header-value" id="mm-score">0</div>
</div>
<div class="mm-header-item">
<div class="mm-header-label">Level</div>
<div class="mm-header-value" id="mm-level">1</div>
</div>
<div class="mm-header-item">
<div class="mm-header-label">Serie</div>
<div class="mm-header-value mm-streak-value" id="mm-streak">0</div>
</div>
</div>
<div class="mm-phase" id="mm-phase"></div>
<div class="mm-grid-wrap">
<div class="mm-grid" id="mm-grid"></div>
</div>
<div class="mm-progress-wrap">
<div class="mm-progress-bar">
<div class="mm-progress-fill" id="mm-progress-fill" style="width:0%"></div>
</div>
<div class="mm-progress-text" id="mm-progress-text">Runde 1 von 3</div>
</div>
<div class="mm-actions" id="mm-actions"></div>
<button class="gk-finish-btn" id="mm-finish-btn">Spiel beenden</button>
</div>

<div id="mm-complete" class="mm-screen">
<div class="mm-complete">
<button class="gk-complete-close" id="mm-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="mm-icon-wrap">
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
</div>
<h1 class="mm-title">Spiel beendet!</h1>
<div class="mm-score-display" id="mm-final-score">0</div>
<div id="mm-new-best-badge" class="mm-new-best" style="display:none;">Neuer persönlicher Rekord!</div>
<div class="gk-challenge-result" id="mm-challenge-result" style="display:none;"></div>
<div class="mm-stats-grid">
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-level">1</div>
<div class="mm-stat-label">Level</div>
</div>
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-accuracy">0%</div>
<div class="mm-stat-label">Genauigkeit</div>
</div>
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-streak">0</div>
<div class="mm-stat-label">Serie</div>
</div>
</div>
<div class="mm-complete-actions">
<button class="mm-btn mm-btn-primary" onclick="mmPlayAgain()">Nochmal spielen</button>
<button class="gk-runtime-history-toggle" id="mm-history-toggle" type="button">Show History</button>
<a href="/de/games/" class="mm-back-link">Zurück zu allen Spielen</a>
</div>
<div class="gk-runtime-history-panel" id="mm-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="mm-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="mm-share-btn">&#128279; Teile dein Ergebnis</button>
<div class="gk-share-copied" id="mm-share-copied" style="display:none;">Kopiert!</div>
</div>
</div>
</div>

</div>

<script>
(function() {
var STORAGE_BEST = 'guruka_memory-matrix_best';
var POINTS_PER_CORRECT = 100;
var SPEED_BONUS_THRESHOLD = 1000;
var STREAK_MULTIPLIER = 0.1;
var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('mm-history-toggle', 'mm-history-panel', 'mm-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
 screen: 'instructions',
 score: 0,
 level: 1,
 streak: 0,
 bestStreak: 0,
 correctAnswers: 0,
 wrongAnswers: 0,
 roundsInLevel: 0,
 pattern: [],
 selectedCells: [],
 showingIndex: 0,
 phase: 'showing',
 answerTime: 0,
 countdownValue: 3,
 countdownTimer: null,
 showTimer: null,
 feedbackTimer: null
};

function getLevelConfig(level) {
 var gridSize = level <= 5 ? 3 : level <= 10 ? 4 : level <= 15 ? 5 : 6;
 var patternSize = Math.min(3 + Math.floor(level / 2), gridSize * gridSize - 2);
 var displayTime = Math.max(2000 - (level - 1) * 80, 800);
 var orderMatters = level >= 8;
 return {
 gridSize: gridSize,
 patternSize: patternSize,
 displayTime: displayTime,
 orderMatters: orderMatters,
 roundsPerLevel: 3,
 maxLevel: 20
 };
}

function getPersonalBest() {
 try {
 var val = localStorage.getItem(STORAGE_BEST);
 return val ? parseInt(val, 10) : 0;
 } catch (e) { return 0; }
}

function saveResult(score, level, accuracy) {
 try {
 void level;
 void accuracy;
 var best = getPersonalBest();
 if (score > best) {
 localStorage.setItem(STORAGE_BEST, String(score));
 return true;
 }
 return false;
 } catch (e) { return false; }
}

function showScreen(name) {
 var screens = document.querySelectorAll('#memory-matrix-game .mm-screen');
 for (var i = 0; i < screens.length; i++) {
 screens[i].classList.remove('active');
 }
 var el = document.getElementById('mm-' + name);
 if (el) {
 el.classList.add('active');
 }
 state.screen = name;
}

function updateInstructionsBest() {
 var best = getPersonalBest();
 var banner = document.getElementById('mm-instr-best');
 if (best > 0 && banner) {
 banner.style.display = 'block';
 banner.innerHTML = 'Persönlicher Rekord: <strong>' + best.toLocaleString() + '</strong> Punkte';
 }
}

/* ---- Wizard ---- */
var MM_WIZARD_STEPS = [
{icon: '\uD83D\uDCA1', title: 'Beobachte die aufleuchtenden Zellen', desc: 'Die Zellen leuchten nacheinander auf. Pass gut auf!'},
{icon: '\uD83D\uDC46', title: 'Tippe sie aus dem Gedächtnis an', desc: 'Erstelle das Muster nach, nachdem es verschwunden ist.'},
{icon: '\uD83D\uDE80', title: 'Bereit? Los geht\u2019s!', desc: 'Die Muster werden schwieriger, je höher dein Level!', final: true}
];
var mmWizardStep = 0;

function mmRenderWizardStep() {
var s = MM_WIZARD_STEPS[mmWizardStep];
var dotsHtml = '';
for (var i = 0; i < MM_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="mm-wizard-dot' + (i === mmWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Jetzt spielen' : 'Weiter';
var card = document.getElementById('mm-wizard-card');
card.innerHTML =
'<div class="mm-wizard-icon">' + s.icon + '</div>' +
'<div class="mm-wizard-title">' + s.title + '</div>' +
'<div class="mm-wizard-desc">' + s.desc + '</div>' +
'<div class="mm-wizard-dots">' + dotsHtml + '</div>' +
'<button class="mm-wizard-btn" id="mm-wizard-next">' + btnLabel + '</button>';
card.style.animation = 'none';
void card.offsetWidth;
card.style.animation = 'mmWizardEnter 0.3s ease-out';
document.getElementById('mm-wizard-next').addEventListener('click', mmAdvanceWizard);
}

function mmAdvanceWizard() {
if (mmWizardStep < MM_WIZARD_STEPS.length - 1) {
mmWizardStep++;
mmRenderWizardStep();
} else {
mmStartGame();
}
}

window.mmShowWizard = function() {
mmWizardStep = 0;
showScreen('wizard');
mmRenderWizardStep();
};

/* ---- Start ---- */
function mmStartGame() {
 window.scrollTo({ top: 0, behavior: 'instant' });
 enterMobileGameMode();
 state.score = 0;
 state.level = 1;
 state.streak = 0;
 state.bestStreak = 0;
 state.correctAnswers = 0;
 state.wrongAnswers = 0;
 state.roundsInLevel = 0;
 state.pattern = [];
 state.selectedCells = [];
 runHistory.clear();

 showScreen('playing');
 GK.renderChallengeBar('mm-playing', challenge);
 updateHeader();
 generatePattern();
}

/* ---- Update Header ---- */
function updateHeader() {
 document.getElementById('mm-score').textContent = state.score.toLocaleString();
 document.getElementById('mm-level').textContent = state.level;
 document.getElementById('mm-streak').textContent = state.streak;
 if (challenge.active) GK.updateChallengeBar('mm-playing', state.score, challenge.score);
}

/* ---- Generate Pattern ---- */
function generatePattern() {
 var config = getLevelConfig(state.level);
 var totalCells = config.gridSize * config.gridSize;
 var newPattern = [];

 while (newPattern.length < config.patternSize) {
 var cell = Math.floor(Math.random() * totalCells);
 if (newPattern.indexOf(cell) === -1) {
 newPattern.push(cell);
 }
 }

 state.pattern = newPattern;
 state.selectedCells = [];
 state.showingIndex = 0;
 state.phase = 'showing';

 buildGrid(config);
 updateProgressBar(config);
 updatePhase(config);
 updateActions(config);
 startShowingPattern(config);
}

/* ---- Build Grid ---- */
function buildGrid(config) {
 var grid = document.getElementById('mm-grid');
 var cellSize = config.gridSize <= 3 ? 72 : config.gridSize <= 4 ? 62 : config.gridSize <= 5 ? 52 : 44;
 var gapSize = config.gridSize <= 4 ? 6 : 5;
 var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
 if (viewportWidth < 360) {
 var maxCellSize = Math.floor((viewportWidth - 40 - (config.gridSize - 1) * gapSize) / config.gridSize);
 if (maxCellSize < cellSize) cellSize = maxCellSize;
 }
 var totalSize = config.gridSize * cellSize + (config.gridSize - 1) * gapSize;

 grid.style.gridTemplateColumns = 'repeat(' + config.gridSize + ', ' + cellSize + 'px)';
 grid.style.gridTemplateRows = 'repeat(' + config.gridSize + ', ' + cellSize + 'px)';
 grid.style.gap = gapSize + 'px';
 grid.style.width = totalSize + 'px';
 grid.innerHTML = '';

 var totalCells = config.gridSize * config.gridSize;
 for (var i = 0; i < totalCells; i++) {
 var cell = document.createElement('button');
 cell.className = 'mm-cell';
 cell.setAttribute('data-index', i);
 cell.setAttribute('type', 'button');
 (function(idx) {
 cell.addEventListener('click', function() { handleCellClick(idx); });
 })(i);
 grid.appendChild(cell);
 }
}

/* ---- Show Pattern Sequentially ---- */
function startShowingPattern(config) {
 var delay = config.displayTime / state.pattern.length;
 state.showingIndex = 0;

 function showNext() {
 if (state.screen !== 'playing') return;
 if (state.showingIndex < state.pattern.length) {
 // Clear previous highlights
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var j = 0; j < cells.length; j++) {
 cells[j].classList.remove('showing');
 }
 // Highlight current cell
 var idx = state.pattern[state.showingIndex];
 var targetCell = document.querySelector('#mm-grid .mm-cell[data-index="' + idx + '"]');
 if (targetCell) {
 targetCell.classList.add('showing');
 }
 state.showingIndex++;
 state.showTimer = setTimeout(showNext, delay);
 } else {
 // All shown, brief pause then switch to recall
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var j = 0; j < cells.length; j++) {
 cells[j].classList.remove('showing');
 }
 state.showTimer = setTimeout(function() {
 state.phase = 'recall';
 state.answerTime = Date.now();
 enableRecallMode(config);
 updatePhase(config);
 updateActions(config);
 }, 400);
 }
 }

 showNext();
}

/* ---- Enable Recall Mode ---- */
function enableRecallMode(config) {
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var i = 0; i < cells.length; i++) {
 cells[i].classList.add('recall-mode');
 }
}

/* ---- Handle Cell Click ---- */
function handleCellClick(cellIndex) {
 if (state.phase !== 'recall') return;

 var existingIdx = state.selectedCells.indexOf(cellIndex);
 if (existingIdx !== -1) {
 // Deselect
 state.selectedCells.splice(existingIdx, 1);
 } else if (state.selectedCells.length < state.pattern.length) {
 state.selectedCells.push(cellIndex);
 }

 var config = getLevelConfig(state.level);
 updateCellVisuals();
 updatePhase(config);
 updateActions(config);
}

/* ---- Update Cell Visuals ---- */
function updateCellVisuals() {
 var config = getLevelConfig(state.level);
 var cells = document.querySelectorAll('#mm-grid .mm-cell');

 for (var i = 0; i < cells.length; i++) {
 var idx = parseInt(cells[i].getAttribute('data-index'), 10);
 cells[i].classList.remove('selected');
 cells[i].textContent = '';

 if (state.selectedCells.indexOf(idx) !== -1) {
 cells[i].classList.add('selected');
 if (config.orderMatters) {
 cells[i].textContent = String(state.selectedCells.indexOf(idx) + 1);
 cells[i].style.color = '#fff';
 }
 } else {
 cells[i].style.color = 'transparent';
 }
 }
}

/* ---- Update Phase Indicator ---- */
function updatePhase(config) {
 var phaseEl = document.getElementById('mm-phase');
 if (state.phase === 'showing') {
 phaseEl.innerHTML = '<span class="mm-phase-memorize">Merk dir das Muster...</span>';
 } else if (state.phase === 'recall') {
 var orderNote = config.orderMatters ? ' (Reihenfolge wichtig!)' : '';
 phaseEl.innerHTML = '<span class="mm-phase-recall">Du bist dran!' + orderNote + ', ' + state.selectedCells.length + '/' + state.pattern.length + ' ausgewählt</span>';
 }
}

/* ---- Update Actions ---- */
function updateActions(config) {
 var actionsEl = document.getElementById('mm-actions');
 if (state.phase !== 'recall') {
 actionsEl.innerHTML = '';
 return;
 }

 var clearDisabled = state.selectedCells.length === 0 ? ' disabled' : '';
 var submitDisabled = state.selectedCells.length !== state.pattern.length ? ' disabled' : '';

 actionsEl.innerHTML =
 '<button class="mm-btn mm-btn-outline" onclick="mmClearSelection()"' + clearDisabled + '>Löschen</button>' +
 '<button class="mm-btn mm-btn-submit" onclick="mmSubmitAnswer()"' + submitDisabled + '>Abschicken (' + state.selectedCells.length + '/' + state.pattern.length + ')</button>';
}

/* ---- Update Progress Bar ---- */
function updateProgressBar(config) {
 var pct = (state.roundsInLevel / config.roundsPerLevel) * 100;
 document.getElementById('mm-progress-fill').style.width = pct + '%';
 document.getElementById('mm-progress-text').textContent =
 'Runde ' + (state.roundsInLevel + 1) + ' von ' + config.roundsPerLevel;
}

/* ---- Clear Selection ---- */
window.mmClearSelection = function() {
 state.selectedCells = [];
 updateCellVisuals();
 updateActions(getLevelConfig(state.level));
 updatePhase(getLevelConfig(state.level));
};

function formatCellList(cells) {
if (!cells || !cells.length) return 'none';
var out = [];
for (var i = 0; i < cells.length; i++) out.push(String(cells[i] + 1));
return out.join(', ');
}

function recordMemoryHistory(correct, config) {
var html = '<strong>' + runHistory.escape(config.orderMatters ? 'Order matters' : 'Any order') + '</strong>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(formatCellList(state.selectedCells)) + '</div>';
html += '<div class="gk-runtime-history-sub">Correct: ' + runHistory.escape(formatCellList(state.pattern)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ---- Submit Answer ---- */
window.mmSubmitAnswer = function() {
 if (state.phase !== 'recall') return;
 var config = getLevelConfig(state.level);
 var responseTime = Date.now() - state.answerTime;

 var correct;
 if (config.orderMatters) {
 correct = true;
 for (var i = 0; i < state.pattern.length; i++) {
 if (state.selectedCells[i] !== state.pattern[i]) {
 correct = false;
 break;
 }
 }
 } else {
 correct = state.selectedCells.length === state.pattern.length;
 if (correct) {
 for (var i = 0; i < state.pattern.length; i++) {
 if (state.selectedCells.indexOf(state.pattern[i]) === -1) {
 correct = false;
 break;
 }
 }
 }
 }

 recordMemoryHistory(correct, config);

 // Calculate points
 var pointsEarned = 0;
 if (correct) {
 pointsEarned = POINTS_PER_CORRECT;
 if (responseTime < SPEED_BONUS_THRESHOLD) {
 pointsEarned += Math.floor((SPEED_BONUS_THRESHOLD - responseTime) / 10);
 }
 pointsEarned += Math.floor(state.streak * STREAK_MULTIPLIER * POINTS_PER_CORRECT);
 state.score += pointsEarned;
 state.streak++;
 state.correctAnswers++;
 if (state.streak > state.bestStreak) {
 state.bestStreak = state.streak;
 }
 } else {
 state.streak = 0;
 state.wrongAnswers++;
 }

 updateHeader();
 showFeedback(correct, config);
};

/* ---- Show Feedback ---- */
function showFeedback(correct, config) {
 state.phase = 'feedback';

 var phaseEl = document.getElementById('mm-phase');
 if (correct) {
 phaseEl.innerHTML = '<span class="mm-phase-correct">Richtig!</span>';
 } else {
 phaseEl.innerHTML = '<span class="mm-phase-wrong">Leider falsch...</span>';
 }

 // Update cell visuals to show correct/wrong
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var i = 0; i < cells.length; i++) {
 var idx = parseInt(cells[i].getAttribute('data-index'), 10);
 cells[i].classList.remove('showing', 'selected', 'recall-mode');
 cells[i].style.color = 'transparent';
 cells[i].textContent = '';

 var inPattern = state.pattern.indexOf(idx) !== -1;
 var wasSelected = state.selectedCells.indexOf(idx) !== -1;

 if (inPattern && wasSelected) {
 cells[i].classList.add('fb-correct');
 } else if (inPattern && !wasSelected) {
 cells[i].classList.add('fb-missed');
 } else if (!inPattern && wasSelected) {
 cells[i].classList.add('fb-wrong');
 } else {
 cells[i].classList.add('fb-neutral');
 }
 }

 // Hide action buttons during feedback
 document.getElementById('mm-actions').innerHTML = '';

 state.feedbackTimer = setTimeout(function() {
 advanceRound(config);
 }, 1200);
}

/* ---- Advance Round ---- */
function advanceRound(config) {
 state.roundsInLevel++;

 if (state.roundsInLevel >= config.roundsPerLevel) {
 if (state.level >= config.maxLevel) {
 endGame();
 return;
 }
 state.level++;
 state.roundsInLevel = 0;
 updateHeader();
 }

 generatePattern();
}

/* ---- Celebration effects ---- */
function mmShowConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'mm-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'mm-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'mm-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function mmAnimateScoreCountUp(el, target) {
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(target * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

/* ---- End Game ---- */
function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

function endGame() {
exitMobileGameMode();
 var totalAnswers = state.correctAnswers + state.wrongAnswers;
 var accuracy = totalAnswers > 0 ? Math.round((state.correctAnswers / totalAnswers) * 100) : 0;
 var isNewBest = saveResult(state.score, state.level, accuracy);

 var titleEl = document.querySelector('#mm-complete .mm-title');
 var iconWrap = document.querySelector('#mm-complete .mm-icon-wrap');
 var bestBadge = document.getElementById('mm-new-best-badge');

 if (isNewBest) {
 mmShowConfetti();
 titleEl.textContent = 'FANTASTISCH!';
 iconWrap.innerHTML = '<span style="font-size:2.25rem">\uD83C\uDF89</span>';
 bestBadge.className = 'mm-new-best-enhanced';
 bestBadge.innerHTML = '\uD83C\uDF1F FANTASTISCH! Neuer Rekord!';
 bestBadge.style.display = 'inline-block';
 } else {
 titleEl.textContent = 'Gut gemacht!';
 iconWrap.innerHTML = '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>';
 bestBadge.className = 'mm-new-best';
 bestBadge.style.display = 'none';
 }

 GK.renderChallengeResult('mm-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

 showScreen('complete');

 var scoreEl = document.getElementById('mm-final-score');
 document.getElementById('mm-final-level').textContent = state.level;
 document.getElementById('mm-final-accuracy').textContent = accuracy + '%';
 document.getElementById('mm-final-streak').textContent = state.bestStreak;

 mmAnimateScoreCountUp(scoreEl, state.score);
}

/* ---- Again ---- */
window.mmPlayAgain = function() {
 clearTimeout(state.showTimer);
 clearTimeout(state.feedbackTimer);
 clearInterval(state.countdownTimer);
 updateInstructionsBest();
 showScreen('instructions');
};

/* ---- Init ---- */
updateInstructionsBest();
GK.renderChallengeBanner('mm-challenge-banner-wrap', challenge);


document.getElementById('mm-close-btn').addEventListener('click', function() {
updateInstructionsBest();
showScreen('instructions');
});

document.getElementById('mm-finish-btn').addEventListener('click', function() {
 endGame();
});

document.getElementById('mm-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('mm-share-btn').addEventListener('click', function() {
 GK.shareResult(state.score, 'Memory Matrix', '/de/games/memory-matrix/', 'mm-share-copied');
});
})();
</script>

### Pattern Path - Gehirntraining Spiel
URL: https://guruka.com/de/games/pattern-path/
Description: Erganze visuelle Muster.

<style>
#pattern-path-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #pattern-path-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#pp-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.pp-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#pp-instructions .pp-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#pp-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: #14b8a6;
}

#pp-instructions .pp-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #pp-instructions .pp-subtitle {
color: var(--color-dark-text-secondary);
}

#pp-instructions .pp-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #pp-instructions .pp-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#pp-instructions .pp-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: #14b8a6;
}

#pp-instructions .pp-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#pp-instructions .pp-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.pp-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.pp-personal-best strong {
color: #14b8a6;
}

/* ── Buttons ── */
.pp-btn-primary {
background: #14b8a6;
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.pp-btn-primary:hover {
background: #0d9488;
}

.pp-btn-primary:active {
transform: scale(0.97);
}

.pp-btn-secondary {
background: transparent;
color: #14b8a6;
border: 1px solid #14b8a6;
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.pp-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .pp-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#pp-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#pp-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: pp-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #pp-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes pp-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pp-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.pp-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.pp-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .pp-wizard-desc {
color: var(--color-dark-text-secondary);
}
.pp-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.pp-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.pp-wizard-dot.active {
background: #14b8a6;
transform: scale(1.3);
}
[data-theme="dark"] .pp-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .pp-wizard-dot.active {
background: #14b8a6;
}
.pp-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: #14b8a6;
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.pp-wizard-btn:hover {
background: #0d9488;
}
@media (max-width: 400px) {
#pp-wizard-card {
padding: 1.5rem 1rem;
}
.pp-wizard-icon {
font-size: 2rem;
}
.pp-wizard-title {
font-size: 1.1rem;
}
.pp-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#pp-playing {
display: none;
flex: 1;
flex-direction: column;
}

.pp-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .pp-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-stat {
text-align: center;
}

.pp-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .pp-stat-label {
color: var(--color-dark-text-secondary);
}

.pp-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.pp-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.pp-level-text {
font-weight: 600;
}

.pp-difficulty-badge {
background: #14b8a6;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.pp-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .pp-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-progress-fill {
height: 100%;
background: #14b8a6;
border-radius: 3px;
transition: width 0.3s ease;
}

.pp-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .pp-timer-bar {
background: var(--color-dark-bg-secondary);
}

.pp-timer-fill {
height: 100%;
background: #14b8a6;
border-radius: 2px;
transition: width 0.05s linear;
}

.pp-timer-fill.pp-timer-warning {
background: #ef4444;
}

/* ── Pattern Display Area ── */
.pp-pattern-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
}

.pp-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.pp-feedback-flash.pp-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.pp-feedback-flash.pp-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.pp-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.pp-feedback-icon.pp-show-check {
animation: pp-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.pp-feedback-icon.pp-show-x {
animation: pp-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes pp-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.pp-sequence-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
animation: pp-seq-enter 0.3s ease-out;
}

@keyframes pp-seq-enter {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.pp-seq-element {
width: 70px;
height: 70px;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-primary, #fff);
}

[data-theme="dark"] .pp-seq-element {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-seq-element svg {
display: block;
}

.pp-seq-missing {
border: 2px dashed #14b8a6;
background: rgba(20, 184, 166, 0.05);
font-size: 1.75rem;
font-weight: 700;
color: #14b8a6;
}

[data-theme="dark"] .pp-seq-missing {
background: rgba(20, 184, 166, 0.1);
}

.pp-seq-arrow {
font-size: 1.25rem;
color: var(--color-text-secondary);
flex-shrink: 0;
}

[data-theme="dark"] .pp-seq-arrow {
color: var(--color-dark-text-secondary);
}

/* ── Answer Choice Buttons ── */
.pp-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.pp-answer-btn {
padding: 0.75rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
}

[data-theme="dark"] .pp-answer-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.pp-answer-btn:active {
transform: scale(0.95);
}

.pp-answer-btn:hover {
border-color: #14b8a6;
background: rgba(20, 184, 166, 0.05);
}

[data-theme="dark"] .pp-answer-btn:hover {
background: rgba(20, 184, 166, 0.15);
}

.pp-answer-btn svg {
display: block;
}

.pp-answer-btn.pp-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.pp-answer-btn.pp-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.pp-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#pp-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#pp-pause-overlay .pp-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#pp-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.pp-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: pp-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .pp-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes pp-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.pp-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.pp-complete-card .pp-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.pp-final-score {
font-size: 2.5rem;
font-weight: 800;
color: #14b8a6;
margin: 0.5rem 0;
}

.pp-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: pp-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes pp-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.pp-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.pp-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .pp-complete-stat {
background: var(--color-dark-bg-secondary);
}

.pp-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.pp-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.pp-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.pp-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .pp-back-link {
color: var(--color-dark-text-secondary);
}

.pp-back-link:hover {
color: #14b8a6;
text-decoration: underline;
}

/* ── Level Up Toast ── */
.pp-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #14b8a6;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.pp-level-up-toast.pp-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#pattern-path-game {
padding: 0.5rem;
}
.pp-seq-element {
width: 56px;
height: 56px;
}
.pp-seq-arrow {
font-size: 1rem;
}
.pp-answer-btn {
padding: 0.5rem;
min-height: 64px;
}
.pp-header {
padding: 0.5rem;
gap: 0.25rem;
}
.pp-stat-value {
font-size: 1rem;
}
#pp-instructions { padding: 0.75rem 0.5rem; }
#pp-instructions .pp-icon { font-size: 2rem; margin-bottom: 0; }
#pp-instructions h2 { font-size: 1.3rem; }
#pp-instructions .pp-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#pp-instructions .pp-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#pp-instructions .pp-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.pp-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#pattern-path-game {
padding: 0.75rem;
}
.pp-seq-element {
width: 62px;
height: 62px;
}
.pp-answer-btn {
padding: 0.625rem;
min-height: 72px;
}
}
@media (max-width: 360px) {
.pp-seq-element {
width: 48px;
height: 48px;
}
.pp-seq-arrow {
font-size: 0.85rem;
}
.pp-sequence-row {
gap: 0.3rem;
}
.pp-answer-btn {
padding: 0.4rem;
min-height: 56px;
}
.pp-complete-stats {
grid-template-columns: 1fr 1fr;
}
.pp-final-score {
font-size: 2rem;
}
.pp-header {
padding: 0.375rem;
}
.pp-stat-value {
font-size: 0.9rem;
}
}
@keyframes pp-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.pp-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.pp-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: pp-confetti-fall 2.5s ease-in forwards;
}
.pp-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(20,184,166,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: pp-glow-fade 1s ease-out forwards;
}
@keyframes pp-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.pp-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: pp-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(20,184,166,0.4);
}
@keyframes pp-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#pattern-path-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#pattern-path-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #pattern-path-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#pattern-path-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#pattern-path-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="pattern-path-game">

<div id="pp-instructions">
<div class="pp-title-row"><span class="pp-icon">&#129513;</span><h2>Pattern Path</h2></div>
<p class="pp-subtitle">Visuelle Mustererkennung &amp; fluide Intelligenz</p>
<div class="pp-how-to">
<h3>Wie man spielt</h3>
<ol>
<li>Eine Sequenz von Formen mit einem <strong>fehlenden Element</strong> (?) erscheint.</li>
<li>Erkenne das Muster (Farb-, Form-, Gr&ouml;&szlig;en- oder Rotations&auml;nderungen).</li>
<li>W&auml;hle die <strong>richtige Erg&auml;nzung</strong> aus 4 M&ouml;glichkeiten.</li>


</ol>
</div>
<div id="pp-best-display" class="pp-personal-best" style="display:none;">
Pers&ouml;nlicher Rekord: <strong id="pp-best-score">0</strong> Punkte
</div>
<button class="pp-btn-primary" id="pp-start-btn">Spiel starten</button>
<div id="pp-challenge-banner-wrap"></div>
</div>

<div id="pp-wizard">
<div id="pp-wizard-card"></div>
</div>

<div id="pp-playing">
<div class="pp-header">
<div class="pp-stat">
<div class="pp-stat-label">Punkte</div>
<div class="pp-stat-value" id="pp-score">0</div>
</div>
<div class="pp-stat">
<div class="pp-stat-label">Serie</div>
<div class="pp-stat-value" id="pp-streak">0</div>
</div>
<div class="pp-stat">
<div class="pp-stat-label">Level</div>
<div class="pp-stat-value" id="pp-level">1</div>
</div>
</div>
<div class="pp-level-info">
<span class="pp-level-text">Level <span id="pp-level-text">1</span></span>
<span class="pp-difficulty-badge" id="pp-difficulty-badge">Farben</span>
</div>
<div class="pp-progress-bar">
<div class="pp-progress-fill" id="pp-progress-fill" style="width:0%"></div>
</div>
<div class="pp-timer-bar">
<div class="pp-timer-fill" id="pp-timer-fill" style="width:100%"></div>
</div>
<div class="pp-pattern-area">
<div class="pp-feedback-flash" id="pp-feedback-flash"></div>
<div class="pp-feedback-icon" id="pp-feedback-icon"></div>
<div class="pp-sequence-row" id="pp-sequence-row"></div>
</div>
<div class="pp-answers" id="pp-answers">
<button class="pp-answer-btn" id="pp-ans-0"></button>
<button class="pp-answer-btn" id="pp-ans-1"></button>
<button class="pp-answer-btn" id="pp-ans-2"></button>
<button class="pp-answer-btn" id="pp-ans-3"></button>
</div>
<div class="pp-playing-hint">Dr&uuml;cke <strong>1-4</strong> zum Antworten &middot; <strong>Esc</strong> zum Pausieren</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="pp-pause-btn" type="button">Pause</button>
<button class="gk-finish-btn" id="pp-finish-btn" type="button">Spiel beenden</button>
</div>
</div>

<div id="pp-pause-overlay">
<div class="pp-pause-text">Pausiert</div>
<button class="pp-btn-primary" id="pp-resume-btn">Fortsetzen</button>
</div>

<div id="pp-complete-overlay">
<div class="pp-complete-card">
<button class="gk-complete-close" id="pp-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="pp-trophy">&#127942;</div>
<h2>Spiel beendet!</h2>
<div class="pp-final-score" id="pp-final-score">0</div>
<div id="pp-new-best" class="pp-new-best" style="display:none;">&#11088; Neuer Rekord!</div>
<div class="gk-challenge-result" id="pp-challenge-result" style="display:none;"></div>
<div class="pp-complete-stats">
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Level erreicht</div>
<div class="pp-complete-stat-value" id="pp-final-level">1</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Genauigkeit</div>
<div class="pp-complete-stat-value" id="pp-final-accuracy">0%</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Serie</div>
<div class="pp-complete-stat-value" id="pp-final-streak">0</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Pers&ouml;nlicher Rekord</div>
<div class="pp-complete-stat-value" id="pp-final-best">0</div>
</div>
</div>
<div class="pp-complete-actions">
<button class="pp-btn-primary" id="pp-play-again-btn">Nochmal spielen</button>
<button class="gk-runtime-history-toggle" id="pp-history-toggle" type="button">Show History</button>
<a href="/de/games/" class="pp-back-link">&larr; Alle Spiele</a>
</div>
<div class="gk-runtime-history-panel" id="pp-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="pp-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="pp-share-btn">&#128279; Teile dein Ergebnis</button>
<div class="gk-share-copied" id="pp-share-copied" style="display:none;">Kopiert!</div>
</div>
</div>
</div>

<div class="pp-level-up-toast" id="pp-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_pattern-path_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('pp-history-toggle', 'pp-history-panel', 'pp-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctChoiceIdx: -1,
correctChoice: null,
currentChoices: []
};

/* ── Shape / Color / Size definitions ── */
var SHAPES = ['circle', 'square', 'triangle'];
var COLORS = ['#ef4444', '#3b82f6', '#22c55e', '#eab308', '#a855f7', '#f97316'];
var COLOR_NAMES = { '#ef4444': 'red', '#3b82f6': 'blue', '#22c55e': 'green', '#eab308': 'yellow', '#a855f7': 'purple', '#f97316': 'orange' };
var SIZES = [30, 45, 60];
var SIZE_NAMES = ['small', 'medium', 'large'];
var ROTATIONS = [0, 90, 180, 270];

/* ── DOM refs ── */
var elInstructions = document.getElementById('pp-instructions');
var elWizard = document.getElementById('pp-wizard');
var elWizardCard = document.getElementById('pp-wizard-card');
var elPlaying = document.getElementById('pp-playing');
var elPauseOverlay = document.getElementById('pp-pause-overlay');
var elCompleteOverlay = document.getElementById('pp-complete-overlay');
var elScore = document.getElementById('pp-score');
var elStreak = document.getElementById('pp-streak');
var elLevel = document.getElementById('pp-level');
var elLevelText = document.getElementById('pp-level-text');
var elDifficultyBadge = document.getElementById('pp-difficulty-badge');
var elProgressFill = document.getElementById('pp-progress-fill');
var elTimerFill = document.getElementById('pp-timer-fill');
var elSequenceRow = document.getElementById('pp-sequence-row');
var elFeedbackFlash = document.getElementById('pp-feedback-flash');
var elFeedbackIcon = document.getElementById('pp-feedback-icon');
var elFinalScore = document.getElementById('pp-final-score');
var elNewBest = document.getElementById('pp-new-best');
var elFinalLevel = document.getElementById('pp-final-level');
var elFinalAccuracy = document.getElementById('pp-final-accuracy');
var elFinalStreak = document.getElementById('pp-final-streak');
var elFinalBest = document.getElementById('pp-final-best');
var elBestDisplay = document.getElementById('pp-best-display');
var elBestScore = document.getElementById('pp-best-score');
var elLevelToast = document.getElementById('pp-level-toast');
var btnStart = document.getElementById('pp-start-btn');
var btnResume = document.getElementById('pp-resume-btn');
var btnPlayAgain = document.getElementById('pp-play-again-btn');
var answerBtns = [
document.getElementById('pp-ans-0'),
document.getElementById('pp-ans-1'),
document.getElementById('pp-ans-2'),
document.getElementById('pp-ans-3')
];

/* ── SVG Shape Rendering ── */
function renderShape(shape, color, size, rotation) {
var vb = '0 0 60 60';
var inner = '';
if (shape === 'circle') {
var r = Math.round(size * 25 / 60);
inner = '<circle cx="30" cy="30" r="' + r + '" fill="' + color + '"/>';
} else if (shape === 'square') {
var half = Math.round(size * 50 / 60);
var off = Math.round((60 - half) / 2);
inner = '<rect x="' + off + '" y="' + off + '" width="' + half + '" height="' + half + '" fill="' + color + '" transform="rotate(' + rotation + ' 30 30)"/>';
} else if (shape === 'triangle') {
var h = Math.round(size * 50 / 60);
var topY = 30 - Math.round(h / 2);
var botY = 30 + Math.round(h / 2);
var leftX = 30 - Math.round(h / 2);
var rightX = 30 + Math.round(h / 2);
inner = '<polygon points="30,' + topY + ' ' + rightX + ',' + botY + ' ' + leftX + ',' + botY + '" fill="' + color + '" transform="rotate(' + rotation + ' 30 30)"/>';
}
return '<svg viewBox="' + vb + '" width="' + size + '" height="' + size + '">' + inner + '</svg>';
}

/* ── Level parameters ── */
function getDisplayTime(lvl) {
if (lvl <= 3) return 10000;
if (lvl <= 6) return 8000;
if (lvl <= 9) return 7000;
if (lvl <= 12) return 6000;
if (lvl <= 16) return 5000;
return 4000;
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getSeqLength(lvl) {
if (lvl <= 6) return 3;
if (lvl <= 12) return 4;
return 5;
}

function getDifficultyLabel(lvl) {
if (lvl <= 3) return 'Farben';
if (lvl <= 6) return 'Formen';
if (lvl <= 9) return 'Farbe + Form';
if (lvl <= 12) return 'Rotation';
if (lvl <= 16) return 'Gr\u00f6\u00dfe + Anzahl';
return 'Multi-Attribut';
}

/* ── Utility ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pick(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
return arr;
}

function cloneEl(el) {
return { shape: el.shape, color: el.color, size: el.size, rotation: el.rotation };
}

function elEquals(a, b) {
return a.shape === b.shape && a.color === b.color && a.size === b.size && a.rotation === b.rotation;
}

function indexOfValue(arr, value) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === value) return i;
}
return -1;
}

function getVisualRotation(shape, rotation) {
return shape === 'triangle' ? rotation : 0;
}

function getVisualIndexes(el) {
if (!el) return null;
var rotation = getVisualRotation(el.shape, el.rotation);
var idx = [
indexOfValue(SHAPES, el.shape),
indexOfValue(COLORS, el.color),
indexOfValue(SIZES, el.size),
indexOfValue(ROTATIONS, rotation)
];
for (var i = 0; i < idx.length; i++) {
if (idx[i] < 0) return null;
}
return idx;
}

function visuallyEquals(a, b) {
var ai = getVisualIndexes(a);
var bi = getVisualIndexes(b);
return !!ai && !!bi &&
ai[0] === bi[0] &&
ai[1] === bi[1] &&
ai[2] === bi[2] &&
ai[3] === bi[3];
}

function createChoiceSeenMatrix() {
var seen = [];
for (var s = 0; s < SHAPES.length; s++) {
seen[s] = [];
for (var c = 0; c < COLORS.length; c++) {
seen[s][c] = [];
for (var z = 0; z < SIZES.length; z++) {
seen[s][c][z] = [];
for (var r = 0; r < ROTATIONS.length; r++) {
seen[s][c][z][r] = false;
}
}
}
}
return seen;
}

function markChoiceSeen(seen, el) {
var idx = getVisualIndexes(el);
if (!idx) return false;
if (seen[idx[0]][idx[1]][idx[2]][idx[3]]) return false;
seen[idx[0]][idx[1]][idx[2]][idx[3]] = true;
return true;
}

/* ── Pattern Generation ── */
function generatePattern(lvl) {
var seqLen = getSeqLength(lvl);
var sequence = [];
var correct;

if (lvl <= 3) {
/* Single attribute: color changes in sequence */
var colorSeq = shuffle(COLORS.slice()).slice(0, seqLen + 1);
var baseShape = pick(SHAPES);
var baseSize = 45;
for (var i = 0; i <= seqLen; i++) {
sequence.push({ shape: baseShape, color: colorSeq[i % colorSeq.length], size: baseSize, rotation: 0 });
}
correct = sequence.pop();

} else if (lvl <= 6) {
/* Shape patterns: circle -> square -> triangle -> ... */
var baseColor = pick(COLORS);
var baseSize2 = 45;
for (var i = 0; i <= seqLen; i++) {
sequence.push({ shape: SHAPES[i % SHAPES.length], color: baseColor, size: baseSize2, rotation: 0 });
}
correct = sequence.pop();

} else if (lvl <= 9) {
/* 2-attribute: color + shape both change */
var colorPool = shuffle(COLORS.slice());
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorPool[i % colorPool.length],
size: 45,
rotation: 0
});
}
correct = sequence.pop();

} else if (lvl <= 12) {
/* Rotation patterns: shapes rotate 0 -> 90 -> 180 -> 270 */
var baseShape3 = 'triangle';
var baseColor3 = pick(COLORS);
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: baseShape3,
color: baseColor3,
size: 45,
rotation: ROTATIONS[i % ROTATIONS.length]
});
}
correct = sequence.pop();

} else if (lvl <= 16) {
/* Size + shape changes */
var colorBase = pick(COLORS);
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorBase,
size: SIZES[i % SIZES.length],
rotation: 0
});
}
correct = sequence.pop();

} else {
/* L17-20: 3 attributes changing (shape + color + size) */
var colorPool2 = shuffle(COLORS.slice());
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorPool2[i % colorPool2.length],
size: SIZES[i % SIZES.length],
rotation: ROTATIONS[i % ROTATIONS.length]
});
}
correct = sequence.pop();
}

return { sequence: sequence, correct: correct };
}

function buildChoiceCandidates(correct, lvl) {
var shapes = [correct.shape];
var colors = [correct.color];
var sizes = [correct.size];
var rotations = [correct.rotation];

if (lvl <= 3) {
colors = COLORS.slice();
} else if (lvl <= 6) {
shapes = SHAPES.slice();
colors = COLORS.slice();
} else if (lvl <= 9) {
shapes = SHAPES.slice();
colors = COLORS.slice();
} else if (lvl <= 12) {
rotations = ROTATIONS.slice();
} else if (lvl <= 16) {
shapes = SHAPES.slice();
sizes = SIZES.slice();
} else {
shapes = SHAPES.slice();
colors = COLORS.slice();
sizes = SIZES.slice();
rotations = ROTATIONS.slice();
}

var candidates = [];
for (var s = 0; s < shapes.length; s++) {
for (var c = 0; c < colors.length; c++) {
for (var z = 0; z < sizes.length; z++) {
for (var r = 0; r < rotations.length; r++) {
candidates.push({
shape: shapes[s],
color: colors[c],
size: sizes[z],
rotation: rotations[r]
});
}
}
}
}
return candidates;
}

function addUniqueChoice(choices, seen, candidate) {
if (!markChoiceSeen(seen, candidate)) return false;
choices.push(cloneEl(candidate));
return true;
}

function generateChoices(correct, lvl) {
var choices = [];
var seen = createChoiceSeenMatrix();
addUniqueChoice(choices, seen, correct);
var candidates = shuffle(buildChoiceCandidates(correct, lvl));

for (var i = 0; i < candidates.length && choices.length < 4; i++) {
addUniqueChoice(choices, seen, candidates[i]);
}

if (choices.length < 4) {
var fallback = shuffle(buildChoiceCandidates(correct, MAX_LEVEL));
for (var j = 0; j < fallback.length && choices.length < 4; j++) {
addUniqueChoice(choices, seen, fallback[j]);
}
}

return shuffle(choices);
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
elDifficultyBadge.textContent = getDifficultyLabel(state.level);
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('pp-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('pp-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('pp-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'pp-feedback-flash';
elFeedbackIcon.className = 'pp-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('pp-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('pp-show-check');
} else {
elFeedbackFlash.classList.add('pp-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('pp-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'pp-feedback-flash';
elFeedbackIcon.className = 'pp-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('pp-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('pp-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'pp-correct-flash' : 'pp-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('pp-correct-flash', 'pp-wrong-flash');
}, 400);
}

/* ── Render sequence display ── */
function renderSequence(sequence) {
var html = '';
for (var i = 0; i < sequence.length; i++) {
var el = sequence[i];
html += '<div class="pp-seq-element">';
html += renderShape(el.shape, el.color, el.size, el.rotation);
html += '</div>';
if (i < sequence.length) {
html += '<div class="pp-seq-arrow">\u2192</div>';
}
}
/* Missing element placeholder */
html += '<div class="pp-seq-element pp-seq-missing">?</div>';
elSequenceRow.innerHTML = html;
}

/* ── Render choice buttons ── */
function renderChoices(choices) {
for (var i = 0; i < 4; i++) {
var el = choices[i];
answerBtns[i].innerHTML = renderShape(el.shape, el.color, el.size, el.rotation);
}
}

function recordPatternHistory(selectedChoice, correct) {
var html = '<strong>Missing shape</strong>';
html += '<div class="gk-runtime-history-sub">Your: ' + (selectedChoice ? renderShape(selectedChoice.shape, selectedChoice.color, selectedChoice.size, selectedChoice.rotation) : 'No answer') + ' | Correct: ' + renderShape(state.correctChoice.shape, state.correctChoice.color, state.correctChoice.size, state.correctChoice.rotation) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var selectedChoice = state.currentChoices[chosenIdx];
var correct = selectedChoice ? visuallyEquals(selectedChoice, state.correctChoice) : false;

state.totalAnswered++;
recordPatternHistory(selectedChoice, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 2000) {
points += Math.floor((2000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordPatternHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

var pattern = generatePattern(state.level);
var choices = generateChoices(pattern.correct, state.level);

/* Find correct choice index */
state.correctChoice = cloneEl(pattern.correct);
state.currentChoices = choices.map(cloneEl);
state.correctChoiceIdx = -1;
for (var i = 0; i < choices.length; i++) {
if (visuallyEquals(choices[i], state.correctChoice)) {
state.correctChoiceIdx = i;
break;
}
}

renderSequence(pattern.sequence);
renderChoices(choices);

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#14b8a6','#ef4444','#22c55e','#3b82f6','#a855f7','#f97316'];
var container = document.createElement('div');
container.className = 'pp-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'pp-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'pp-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.pp-trophy');
var title = document.querySelector('#pp-complete-overlay .pp-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'FANTASTISCH!';
elNewBest.className = 'pp-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F FANTASTISCH! Neuer Rekord!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Gut gemacht!';
elNewBest.className = 'pp-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('pp-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var PP_WIZARD_STEPS = [
{icon: '\uD83E\uDDE9', title: 'Finde das fehlende Muster', desc: 'Eine Sequenz von Formen erscheint mit einem fehlenden Element. Erkenne das Muster!'},
{icon: '\uD83C\uDFA8', title: 'Attribute \u00e4ndern sich', desc: 'Muster umfassen Farbe, Form, Gr\u00f6\u00dfe und Rotation. H\u00f6here Level kombinieren mehrere Attribute.'},
{icon: '\u26A1', title: 'Schnell', desc: 'W\u00e4hle die richtige Form bevor die Zeit abl\u00e4uft. Geschwindigkeit und Serien bringen Bonuspunkte!', final: true}
];
var ppWizardStep = 0;

function renderWizardStep() {
var s = PP_WIZARD_STEPS[ppWizardStep];
var dotsHtml = '';
for (var i = 0; i < PP_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="pp-wizard-dot' + (i === ppWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Spiel starten' : 'Weiter';
elWizardCard.innerHTML =
'<div class="pp-wizard-icon">' + s.icon + '</div>' +
'<div class="pp-wizard-title">' + s.title + '</div>' +
'<div class="pp-wizard-desc">' + s.desc + '</div>' +
'<div class="pp-wizard-dots">' + dotsHtml + '</div>' +
'<button class="pp-wizard-btn" id="pp-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'pp-wizard-enter 0.3s ease-out';
document.getElementById('pp-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ppWizardStep < PP_WIZARD_STEPS.length - 1) {
ppWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ppWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctChoiceIdx = -1;
state.correctChoice = null;
state.currentChoices = [];
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('pp-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('pp-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('pp-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('pp-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('pp-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('pp-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Pattern Path', '/de/games/pattern-path/', 'pp-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key >= '1' && e.key <= '4') {
e.preventDefault();
processAnswer(parseInt(e.key, 10) - 1);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('pp-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Number Crunch - Gehirntraining Spiel
URL: https://guruka.com/de/games/number-crunch/
Description: Lose Rechenaufgaben auf Zeit.

<style>
#number-crunch-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #number-crunch-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#nc-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.nc-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#nc-instructions.nc-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#nc-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#nc-instructions.nc-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #nc-instructions.nc-subtitle {
color: var(--color-dark-text-secondary);
}

#nc-instructions.nc-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #nc-instructions.nc-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#nc-instructions.nc-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#nc-instructions.nc-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#nc-instructions.nc-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.nc-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.nc-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.nc-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.nc-btn-primary:hover {
background: var(--color-primary-hover);
}

.nc-btn-primary:active {
transform: scale(0.97);
}

.nc-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.nc-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"].nc-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#nc-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#nc-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: nc-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #nc-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes nc-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.nc-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.nc-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.nc-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].nc-wizard-desc {
color: var(--color-dark-text-secondary);
}
.nc-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.nc-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.nc-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].nc-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"].nc-wizard-dot.active {
background: var(--color-primary);
}
.nc-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.nc-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#nc-wizard-card {
padding: 1.5rem 1rem;
}
.nc-wizard-icon {
font-size: 2rem;
}
.nc-wizard-title {
font-size: 1.1rem;
}
.nc-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#nc-playing {
display: none;
flex: 1;
flex-direction: column;
}

.nc-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].nc-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-stat {
text-align: center;
}

.nc-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"].nc-stat-label {
color: var(--color-dark-text-secondary);
}

.nc-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.nc-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.nc-level-text {
font-weight: 600;
}

.nc-modifier-badge {
background: #6366f1;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.nc-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].nc-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.nc-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"].nc-timer-bar {
background: var(--color-dark-bg-secondary);
}

.nc-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.nc-timer-fill.nc-timer-warning {
background: #ef4444;
}

/* ── Equation Display ── */
.nc-equation-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
position: relative;
}

.nc-rule-modifier {
background: rgba(99,102,241,0.1);
color: #6366f1;
padding: 0.4rem 1rem;
border-radius: 2rem;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1rem;
display: none;
}

[data-theme="dark"].nc-rule-modifier {
background: rgba(99,102,241,0.2);
color: #818cf8;
}

.nc-equation {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
animation: nc-eq-enter 0.2s ease-out;
text-align: center;
}

@keyframes nc-eq-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.nc-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.nc-feedback-flash.nc-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.nc-feedback-flash.nc-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.nc-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.nc-feedback-icon.nc-show-check {
animation: nc-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.nc-feedback-icon.nc-show-x {
animation: nc-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes nc-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Answer Buttons ── */
.nc-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.nc-answer-btn {
padding: 1rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.25rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
}

[data-theme="dark"].nc-answer-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.nc-answer-btn:active {
transform: scale(0.95);
}

.nc-answer-btn:hover {
border-color: var(--color-primary);
background: rgba(99,102,241,0.05);
}

[data-theme="dark"].nc-answer-btn:hover {
background: rgba(99,102,241,0.15);
}

.nc-answer-btn.nc-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.nc-answer-btn.nc-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.nc-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-playing-hint {
color: var(--color-dark-text-secondary);
}

#number-crunch-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary);
border-radius: 0.5rem;
background: var(--color-bg-primary);
color: var(--color-primary);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#number-crunch-game .gk-finish-btn:hover {
background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] #number-crunch-game .gk-finish-btn {
background: var(--color-dark-bg-secondary);
color: #fbbf24;
border-color: #fbbf24;
}

/* ── Pause Overlay ── */
#nc-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#nc-pause-overlay.nc-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#nc-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.nc-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: nc-modal-enter 0.3s ease-out;
}

[data-theme="dark"].nc-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes nc-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.nc-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.nc-complete-card.nc-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.nc-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.nc-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: nc-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes nc-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.nc-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.nc-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"].nc-complete-stat {
background: var(--color-dark-bg-secondary);
}

.nc-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.nc-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.nc-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.nc-history-toggle {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.nc-history-toggle:hover {
background: rgba(245, 158, 11, 0.1);
}

.nc-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 240px;
overflow: auto;
border: 1px solid var(--color-border);
border-radius: 0.5rem;
background: var(--color-bg-secondary);
}

[data-theme="dark"] .nc-history-panel {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-history-list {
display: flex;
flex-direction: column;
}

.nc-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border);
font-size: 0.82rem;
}

.nc-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .nc-history-row {
border-color: var(--color-dark-border);
}

.nc-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: baseline;
}

.nc-history-status {
font-weight: 800;
white-space: nowrap;
}

.nc-history-correct .nc-history-status {
color: #16a34a;
}

.nc-history-wrong .nc-history-status {
color: #dc2626;
}

.nc-history-eq {
font-weight: 700;
text-align: right;
}

.nc-history-answer {
margin-top: 0.25rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .nc-history-answer {
color: var(--color-dark-text-secondary);
}

.nc-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary);
text-align: center;
}

.nc-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"].nc-back-link {
color: var(--color-dark-text-secondary);
}

.nc-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.nc-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.nc-level-up-toast.nc-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#number-crunch-game {
padding: 0.5rem;
}
.nc-equation {
font-size: 2rem;
}
.nc-answer-btn {
padding: 0.75rem;
font-size: 1.1rem;
min-height: 48px;
}
.nc-header {
padding: 0.5rem;
gap: 0.25rem;
}
.nc-stat-value {
font-size: 1rem;
}
#nc-instructions { padding: 0.75rem 0.5rem; }
#nc-instructions.nc-icon { font-size: 2rem; margin-bottom: 0; }
#nc-instructions h2 { font-size: 1.3rem; }
#nc-instructions.nc-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#nc-instructions.nc-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#nc-instructions.nc-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.nc-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#number-crunch-game {
padding: 0.75rem;
}
.nc-equation {
font-size: 2.25rem;
}
.nc-answer-btn {
padding: 0.875rem;
}
}
@media (max-width: 360px) {
.nc-equation {
font-size: 1.75rem;
}
.nc-answer-btn {
padding: 0.625rem;
font-size: 1rem;
}
.nc-complete-stats {
grid-template-columns: 1fr 1fr;
}
.nc-final-score {
font-size: 2rem;
}
.nc-header {
padding: 0.375rem;
}
.nc-stat-value {
font-size: 0.9rem;
}
}
@keyframes nc-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.nc-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.nc-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: nc-confetti-fall 2.5s ease-in forwards;
}
.nc-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: nc-glow-fade 1s ease-out forwards;
}
@keyframes nc-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.nc-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: nc-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes nc-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#number-crunch-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#number-crunch-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="number-crunch-game">

<div id="nc-instructions">
<div class="nc-title-row"><span class="nc-icon">&#129518;</span><h2>Number Crunch</h2></div>
<p class="nc-subtitle">Kopfrechnen</p>
<div class="nc-how-to">
<h3>Wie man spielt</h3>
<ol>
<li>L&ouml;se die Gleichung.</li>
<li>W&auml;hle die <strong>richtige Antwort</strong> aus 4 M&ouml;glichkeiten.</li>
<li>Ab Level 6: Zusatzschritte in der Gleichung.</li>


</ol>
</div>
<div id="nc-best-display" class="nc-personal-best" style="display:none;">
Pers&ouml;nlicher Rekord: <strong id="nc-best-score">0</strong> Punkte
</div>
<button class="nc-btn-primary" id="nc-start-btn">Spiel starten</button>
<div id="nc-challenge-banner-wrap"></div>
</div>

<div id="nc-wizard">
<div id="nc-wizard-card"></div>
</div>

<div id="nc-playing">
<div class="nc-header">
<div class="nc-stat">
<div class="nc-stat-label">Punkte</div>
<div class="nc-stat-value" id="nc-score">0</div>
</div>
<div class="nc-stat">
<div class="nc-stat-label">Serie</div>
<div class="nc-stat-value" id="nc-streak">0</div>
</div>
<div class="nc-stat">
<div class="nc-stat-label">Level</div>
<div class="nc-stat-value" id="nc-level">1</div>
</div>
</div>
<div class="nc-level-info">
<span class="nc-level-text">Level <span id="nc-level-text">1</span></span>
<span class="nc-modifier-badge" id="nc-modifier-badge" style="display:none;">Extra</span>
</div>
<div class="nc-progress-bar">
<div class="nc-progress-fill" id="nc-progress-fill" style="width:0%"></div>
</div>
<div class="nc-timer-bar">
<div class="nc-timer-fill" id="nc-timer-fill" style="width:100%"></div>
</div>
<div class="nc-equation-area">
<div class="nc-feedback-flash" id="nc-feedback-flash"></div>
<div class="nc-feedback-icon" id="nc-feedback-icon"></div>
<div class="nc-rule-modifier" id="nc-rule-modifier"></div>
<div class="nc-equation" id="nc-equation"></div>
</div>
<div class="nc-answers" id="nc-answers">
<button class="nc-answer-btn" id="nc-ans-0"></button>
<button class="nc-answer-btn" id="nc-ans-1"></button>
<button class="nc-answer-btn" id="nc-ans-2"></button>
<button class="nc-answer-btn" id="nc-ans-3"></button>
</div>
<div class="nc-playing-hint">Dr&uuml;cke <strong>1-4</strong> zum Antworten &middot; <strong>Esc</strong> zum Pausieren</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="nc-pause-btn" type="button">Pause</button>
<button class="gk-finish-btn" id="nc-finish-btn" type="button">Spiel beenden</button>
</div>
</div>

<div id="nc-pause-overlay">
<div class="nc-pause-text">Pausiert</div>
<button class="nc-btn-primary" id="nc-resume-btn">Fortsetzen</button>
</div>

<div id="nc-complete-overlay">
<div class="nc-complete-card">
<button class="gk-complete-close" id="nc-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="nc-trophy">&#127942;</div>
<h2>Spiel beendet!</h2>
<div class="nc-final-score" id="nc-final-score">0</div>
<div id="nc-new-best" class="nc-new-best" style="display:none;">&#11088; Neuer Rekord!</div>
<div class="gk-challenge-result" id="nc-challenge-result" style="display:none;"></div>
<div class="nc-complete-stats">
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Level erreicht</div>
<div class="nc-complete-stat-value" id="nc-final-level">1</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Genauigkeit</div>
<div class="nc-complete-stat-value" id="nc-final-accuracy">0%</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Serie</div>
<div class="nc-complete-stat-value" id="nc-final-streak">0</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Pers&ouml;nlicher Rekord</div>
<div class="nc-complete-stat-value" id="nc-final-best">0</div>
</div>
</div>
<div class="nc-complete-actions">
<button class="nc-btn-primary" id="nc-play-again-btn">Nochmal spielen</button>
<button class="gk-runtime-history-toggle" id="nc-history-toggle">Show History</button>
<a href="/de/games/" class="nc-back-link">&larr; Alle Spiele</a>
</div>
<div class="gk-runtime-history-panel" id="nc-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="nc-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="nc-share-btn">&#128279; Teile dein Ergebnis</button>
<div class="gk-share-copied" id="nc-share-copied" style="display:none;">Kopiert!</div>
</div>
</div>
</div>

<div class="nc-level-up-toast" id="nc-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_number-crunch_best';

var challenge = GK.parseChallenge();

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctAnswer: 0,
currentModifier: null,
currentEquation: '',
currentChoices: []
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('nc-instructions');
var elWizard = document.getElementById('nc-wizard');
var elWizardCard = document.getElementById('nc-wizard-card');
var elPlaying = document.getElementById('nc-playing');
var elPauseOverlay = document.getElementById('nc-pause-overlay');
var elCompleteOverlay = document.getElementById('nc-complete-overlay');
var elScore = document.getElementById('nc-score');
var elStreak = document.getElementById('nc-streak');
var elLevel = document.getElementById('nc-level');
var elLevelText = document.getElementById('nc-level-text');
var elModifierBadge = document.getElementById('nc-modifier-badge');
var elProgressFill = document.getElementById('nc-progress-fill');
var elTimerFill = document.getElementById('nc-timer-fill');
var elEquation = document.getElementById('nc-equation');
var elRuleModifier = document.getElementById('nc-rule-modifier');
var elFeedbackFlash = document.getElementById('nc-feedback-flash');
var elFeedbackIcon = document.getElementById('nc-feedback-icon');
var elFinalScore = document.getElementById('nc-final-score');
var elNewBest = document.getElementById('nc-new-best');
var elFinalLevel = document.getElementById('nc-final-level');
var elFinalAccuracy = document.getElementById('nc-final-accuracy');
var elFinalStreak = document.getElementById('nc-final-streak');
var elFinalBest = document.getElementById('nc-final-best');
var elBestDisplay = document.getElementById('nc-best-display');
var elBestScore = document.getElementById('nc-best-score');
var elLevelToast = document.getElementById('nc-level-toast');
var btnStart = document.getElementById('nc-start-btn');
var btnResume = document.getElementById('nc-resume-btn');
var btnPlayAgain = document.getElementById('nc-play-again-btn');
var answerBtns = [
document.getElementById('nc-ans-0'),
document.getElementById('nc-ans-1'),
document.getElementById('nc-ans-2'),
document.getElementById('nc-ans-3')
];

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

/* ── Modifiers ── */
var MODIFIERS = [
{ name: 'Verdopple es', apply: function(n) { return n * 2; } },
{ name: 'Addiere 10', apply: function(n) { return n + 10; } },
{ name: 'Subtrahiere 5', apply: function(n) { return n - 5; } },
{ name: 'Halbiere es', apply: function(n) { return Math.round(n / 2); } }
];

function shouldHaveModifier(lvl) {
return lvl >= 6;
}

function getModifier(lvl) {
if (lvl >= 17) {
/* Dual modifier: pick two */
var a = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
var b = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
while (b === a) b = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
return {
name: a.name + ', dann ' + b.name.toLowerCase(),
apply: function(n) { return b.apply(a.apply(n)); }
};
}
if (lvl >= 13) {
/* Pick from all modifiers */
return MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
}
/* L6-12: simpler modifiers only */
var simple = MODIFIERS.slice(0, 2);
return simple[Math.floor(Math.random() * simple.length)];
}

/* ── Generate equation ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pickOperation(lvl) {
var ops;
if (lvl <= 3) ops = ['+', '-'];
else if (lvl <= 5) ops = ['+', '-', '*'];
else ops = ['+', '-', '*', '/'];
return ops[randInt(0, ops.length - 1)];
}

function operandLimit(lvl) {
if (lvl <= 3) return 50;
if (lvl <= 5) return 80;
if (lvl <= 8) return 120;
if (lvl <= 12) return 220;
if (lvl <= 16) return 360;
return 520;
}

function generateEquation(lvl) {
var op = pickOperation(lvl);
var max = operandLimit(lvl);
var a;
var b;
var answer;
var symbol = op;

if (op === '/') {
b = randInt(2, Math.min(12 + lvl, 24));
answer = randInt(2, Math.min(18 + lvl * 2, 80));
a = answer * b;
symbol = '\u00F7';
} else if (op === '*') {
a = randInt(3, Math.min(12 + Math.floor(lvl / 2), 24));
b = randInt(3, Math.min(12 + Math.floor(lvl / 2), 24));
symbol = '\u00D7';
answer = a * b;
} else {
a = randInt(10, max);
b = randInt(5, Math.max(8, Math.floor(max * 0.65)));
if (op === '-' && b > a) {
var swap = a;
a = b;
b = swap;
}
switch (op) {
case '+':
answer = a + b;
break;
case '-':
answer = a - b;
break;
default:
answer = a + b;
}
}

var display = a + ' ' + symbol + ' ' + b + ' = ?';
var modifier = null;
if (shouldHaveModifier(lvl) && Math.random() < 0.7) {
modifier = getModifier(lvl);
answer = modifier.apply(answer);
}

return { display: display, answer: answer, modifier: modifier };
}

function generateChoices(correct) {
var choices = [correct];
var attempts = 0;
while (choices.length < 4 && attempts < 100) {
var offset = randInt(-10, 10);
attempts++;
if (offset === 0) continue;
var wrong = Math.round(correct + offset);
if (wrong < 0) wrong = Math.abs(wrong);
if (wrong !== correct && choices.indexOf(wrong) === -1) {
choices.push(wrong);
}
}
while (choices.length < 4) {
var fallback = Math.round(correct + choices.length + attempts + 1);
if (fallback < 0) fallback = Math.abs(fallback);
if (fallback !== correct && choices.indexOf(fallback) === -1) choices.push(fallback);
else attempts++;
}
for (var i = choices.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = choices[i];
choices[i] = choices[j];
choices[j] = temp;
}
return choices;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}


var runHistory = createRuntimeHistory('nc-history-toggle', 'nc-history-panel', 'nc-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
list.innerHTML = entries.map(function(entry) {
return '<div class="gk-runtime-history-row ' + (entry.correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong') + '">' +
'<div class="gk-runtime-history-main"><div class="gk-runtime-history-detail">' + entry.html + '</div>' +
'<div class="gk-runtime-history-status">' + (entry.correct ? 'Correct' : 'Wrong') + '</div></div></div>';
}).join('');
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel || !toggle) return;
render();
var open = panel.style.display !== 'none';
panel.style.display = open ? 'none' : '';
toggle.textContent = open ? 'Show History' : 'Hide History';
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

function recordAnswerHistory(selectedValue, correct) {
var selected = selectedValue === null || selectedValue === undefined ? 'No answer' : selectedValue;
var html = '<strong>' + runHistory.escape(state.currentEquation) + '</strong>';
if (state.currentModifier) {
html += '<div class="gk-runtime-history-sub">Rule: ' + runHistory.escape(state.currentModifier.name) + '</div>';
}
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(selected) + ' | Correct: ' + runHistory.escape(state.correctAnswer) + '</div>';
runHistory.pushHtml(correct, html);
}

function renderAnswerHistory() {
runHistory.render();
}

function resetHistoryPanel() {
runHistory.resetPanel();
}
/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
if (shouldHaveModifier(state.level)) {
elModifierBadge.style.display = '';
elModifierBadge.textContent = 'Extra';
} else {
elModifierBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('nc-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('nc-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('nc-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'nc-feedback-flash';
elFeedbackIcon.className = 'nc-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('nc-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('nc-show-check');
} else {
elFeedbackFlash.classList.add('nc-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('nc-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'nc-feedback-flash';
elFeedbackIcon.className = 'nc-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('nc-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('nc-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'nc-correct-flash' : 'nc-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('nc-correct-flash', 'nc-wrong-flash');
}, 400);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var chosenValue = parseInt(answerBtns[chosenIdx].textContent, 10);
var correct = (chosenValue === state.correctAnswer);

state.totalAnswered++;
recordAnswerHistory(chosenValue, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordAnswerHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

var eq = generateEquation(state.level);
state.correctAnswer = eq.answer;
state.currentModifier = eq.modifier;
state.currentEquation = eq.display;

elEquation.textContent = eq.display;
elEquation.style.animation = 'none';
void elEquation.offsetWidth;
elEquation.style.animation = '';

if (eq.modifier) {
elRuleModifier.textContent = eq.modifier.name;
elRuleModifier.style.display = '';
} else {
elRuleModifier.style.display = 'none';
}

var choices = generateChoices(eq.answer);
state.currentChoices = choices.slice();
for (var i = 0; i < 4; i++) {
answerBtns[i].textContent = choices[i];
}

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'nc-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'nc-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'nc-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.nc-trophy');
var title = document.querySelector('#nc-complete-overlay .nc-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'FANTASTISCH!';
elNewBest.className = 'nc-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F FANTASTISCH! Neuer Rekord!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Gut gemacht!';
elNewBest.className = 'nc-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('nc-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();
renderAnswerHistory();
resetHistoryPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var NC_WIZARD_STEPS = [
{icon: '\uD83E\uDDEE', title: 'L\u00f6se die Gleichung', desc: 'Eine Gleichung mit einer fehlenden Antwort erscheint. W\u00e4hle die richtige!'},
{icon: '\u2728', title: 'Achte auf Modifikatoren', desc: 'Ab Level 6 ver\u00e4ndern Regelmodifikatoren die Antwort (z.B. \u201eVerdopple es\u201c).'},
{icon: '\u26A1', title: 'Schnell', desc: 'Antworte bevor die Zeit abl\u00e4uft. Geschwindigkeit = Bonuspunkte!', final: true}
];
var ncWizardStep = 0;

function renderWizardStep() {
var s = NC_WIZARD_STEPS[ncWizardStep];
var dotsHtml = '';
for (var i = 0; i < NC_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="nc-wizard-dot' + (i === ncWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Spiel starten' : 'Weiter';
elWizardCard.innerHTML =
'<div class="nc-wizard-icon">' + s.icon + '</div>' +
'<div class="nc-wizard-title">' + s.title + '</div>' +
'<div class="nc-wizard-desc">' + s.desc + '</div>' +
'<div class="nc-wizard-dots">' + dotsHtml + '</div>' +
'<button class="nc-wizard-btn" id="nc-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'nc-wizard-enter 0.3s ease-out';
document.getElementById('nc-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ncWizardStep < NC_WIZARD_STEPS.length - 1) {
ncWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ncWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctAnswer = 0;
state.currentModifier = null;
state.currentEquation = '';
state.currentChoices = [];
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('nc-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('nc-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});


for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('nc-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('nc-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('nc-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('nc-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Number Crunch', '/de/games/number-crunch/', 'nc-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
var answerIndex = -1;
if (e.key >= '1' && e.key <= '4') {
answerIndex = parseInt(e.key, 10) - 1;
} else if (e.code) {
var keyMatch = e.code.match(/^(?:Digit|Numpad)([1-4])$/);
if (keyMatch) answerIndex = parseInt(keyMatch[1], 10) - 1;
}
if (answerIndex >= 0) {
e.preventDefault();
processAnswer(answerIndex);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('nc-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Quick Sort - Gehirntraining Spiel
URL: https://guruka.com/de/games/quick-sort/
Description: Sortiere mit wechselnden Regeln.

<style>
#quick-sort-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #quick-sort-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#qs-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.qs-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#qs-instructions .qs-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#qs-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: #f97316;
}

#qs-instructions .qs-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #qs-instructions .qs-subtitle {
color: var(--color-dark-text-secondary);
}

#qs-instructions .qs-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #qs-instructions .qs-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#qs-instructions .qs-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: #f97316;
}

#qs-instructions .qs-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#qs-instructions .qs-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.qs-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.qs-personal-best strong {
color: #f97316;
}

/* ── Buttons ── */
.qs-btn-primary {
background: #f97316;
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.qs-btn-primary:hover {
background: #ea580c;
}

.qs-btn-primary:active {
transform: scale(0.97);
}

.qs-btn-secondary {
background: transparent;
color: #f97316;
border: 1px solid #f97316;
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.qs-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .qs-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#qs-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#qs-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: qs-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #qs-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes qs-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.qs-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.qs-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.qs-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .qs-wizard-desc {
color: var(--color-dark-text-secondary);
}
.qs-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.qs-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.qs-wizard-dot.active {
background: #f97316;
transform: scale(1.3);
}
[data-theme="dark"] .qs-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .qs-wizard-dot.active {
background: #f97316;
}
.qs-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: #f97316;
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.qs-wizard-btn:hover {
background: #ea580c;
}
@media (max-width: 400px) {
#qs-wizard-card {
padding: 1.5rem 1rem;
}
.qs-wizard-icon {
font-size: 2rem;
}
.qs-wizard-title {
font-size: 1.1rem;
}
.qs-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#qs-playing {
display: none;
flex: 1;
flex-direction: column;
}

.qs-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .qs-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.qs-stat {
text-align: center;
}

.qs-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .qs-stat-label {
color: var(--color-dark-text-secondary);
}

.qs-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.qs-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.qs-level-text {
font-weight: 600;
}

.qs-rule-change-badge {
background: #f97316;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.qs-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .qs-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.qs-progress-fill {
height: 100%;
background: #f97316;
border-radius: 3px;
transition: width 0.3s ease;
}

.qs-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .qs-timer-bar {
background: var(--color-dark-bg-secondary);
}

.qs-timer-fill {
height: 100%;
background: #f97316;
border-radius: 2px;
transition: width 0.05s linear;
}

.qs-timer-fill.qs-timer-warning {
background: #ef4444;
}

/* ── Rule Indicator ── */
.qs-rule-indicator {
background: #f97316;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
text-align: center;
margin-bottom: 1rem;
letter-spacing: 0.02em;
}

/* ── Stimulus Area ── */
.qs-stimulus-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 160px;
position: relative;
}

.qs-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.qs-feedback-flash.qs-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.qs-feedback-flash.qs-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.qs-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.qs-feedback-icon.qs-show-check {
animation: qs-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.qs-feedback-icon.qs-show-x {
animation: qs-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes qs-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.qs-stimulus {
font-size: 3rem;
font-weight: 700;
line-height: 1.2;
animation: qs-stim-enter 0.2s ease-out;
text-align: center;
}

@keyframes qs-stim-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

/* ── Sort Buttons (Left / Right) ── */
.qs-sort-buttons {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.qs-sort-btn {
flex: 1;
padding: 1.1rem 0.75rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}

[data-theme="dark"] .qs-sort-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.qs-sort-btn:active {
transform: scale(0.95);
}

.qs-btn-left {
border-left: 4px solid #f97316;
}

.qs-btn-left:hover {
border-color: #f97316;
background: rgba(249,115,22,0.05);
}

[data-theme="dark"] .qs-btn-left:hover {
background: rgba(249,115,22,0.15);
}

.qs-btn-right {
border-right: 4px solid #f97316;
}

.qs-btn-right:hover {
border-color: #f97316;
background: rgba(249,115,22,0.05);
}

[data-theme="dark"] .qs-btn-right:hover {
background: rgba(249,115,22,0.15);
}

.qs-sort-btn .qs-arrow {
font-size: 1.3rem;
opacity: 0.6;
}

.qs-sort-btn .qs-label {
font-size: 1rem;
}

.qs-sort-btn.qs-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.qs-sort-btn.qs-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.qs-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#qs-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#qs-pause-overlay .qs-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#qs-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.qs-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: qs-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .qs-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes qs-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.qs-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.qs-complete-card .qs-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.qs-final-score {
font-size: 2.5rem;
font-weight: 800;
color: #f97316;
margin: 0.5rem 0;
}

.qs-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: qs-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes qs-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.qs-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.qs-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .qs-complete-stat {
background: var(--color-dark-bg-secondary);
}

.qs-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.qs-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.qs-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.qs-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .qs-back-link {
color: var(--color-dark-text-secondary);
}

.qs-back-link:hover {
color: #f97316;
text-decoration: underline;
}

/* ── Level Up Toast ── */
.qs-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #f97316;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.qs-level-up-toast.qs-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Rule Change Toast ── */
.qs-rule-toast {
position: fixed;
top: 4.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #7c3aed;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 0.95rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.qs-rule-toast.qs-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#quick-sort-game {
padding: 0.5rem;
}
.qs-stimulus {
font-size: 2.5rem;
}
.qs-sort-btn {
padding: 0.85rem 0.5rem;
font-size: 1rem;
min-height: 52px;
}
.qs-sort-btn .qs-label {
font-size: 0.9rem;
}
.qs-header {
padding: 0.5rem;
gap: 0.25rem;
}
.qs-stat-value {
font-size: 1rem;
}
.qs-rule-indicator {
font-size: 0.85rem;
padding: 0.4rem 0.75rem;
}
#qs-instructions { padding: 0.75rem 0.5rem; }
#qs-instructions .qs-icon { font-size: 2rem; margin-bottom: 0; }
#qs-instructions h2 { font-size: 1.3rem; }
#qs-instructions .qs-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#qs-instructions .qs-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#qs-instructions .qs-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.qs-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#quick-sort-game {
padding: 0.75rem;
}
.qs-stimulus {
font-size: 2.75rem;
}
.qs-sort-btn {
padding: 1rem 0.5rem;
}
}
@media (max-width: 360px) {
.qs-stimulus {
font-size: 2rem;
}
.qs-sort-btn {
padding: 0.7rem 0.4rem;
font-size: 0.9rem;
min-height: 48px;
}
.qs-sort-btn .qs-label {
font-size: 0.8rem;
}
.qs-sort-btn .qs-arrow {
font-size: 1.1rem;
}
.qs-complete-stats {
grid-template-columns: 1fr 1fr;
}
.qs-final-score {
font-size: 2rem;
}
.qs-header {
padding: 0.375rem;
}
.qs-stat-value {
font-size: 0.9rem;
}
}
@keyframes qs-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.qs-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.qs-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: qs-confetti-fall 2.5s ease-in forwards;
}
.qs-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(249,115,22,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: qs-glow-fade 1s ease-out forwards;
}
@keyframes qs-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.qs-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: qs-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(249,115,22,0.4);
}
@keyframes qs-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#quick-sort-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#quick-sort-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #quick-sort-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#quick-sort-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#quick-sort-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="quick-sort-game">

<div id="qs-instructions">
<div class="qs-title-row"><span class="qs-icon">&#128450;</span><h2>Quick Sort</h2></div>
<p class="qs-subtitle">Kategorisierungsgeschwindigkeit und Aufgabenwechsel</p>
<div class="qs-how-to">
<h3>Wie man spielt</h3>
<ol>
<li>Ein Element (Zahl, Form oder Wort) erscheint auf dem Bildschirm.</li>
<li>Zwei Kategorien werden <strong>links und rechts</strong> angezeigt.</li>
<li>Tippe auf die richtige Seite, um das Element zu sortieren.</li>
<li>Die Sortierregel <strong>wechselt</strong> alle paar Runden!</li>

</ol>
</div>
<div id="qs-best-display" class="qs-personal-best" style="display:none;">
Persönlicher Rekord: <strong id="qs-best-score">0</strong> Punkte
</div>
<button class="qs-btn-primary" id="qs-start-btn">Spiel starten</button>
<div id="qs-challenge-banner-wrap"></div>
</div>

<div id="qs-wizard">
<div id="qs-wizard-card"></div>
</div>

<div id="qs-playing">
<div class="qs-header">
<div class="qs-stat">
<div class="qs-stat-label">Punkte</div>
<div class="qs-stat-value" id="qs-score">0</div>
</div>
<div class="qs-stat">
<div class="qs-stat-label">Serie</div>
<div class="qs-stat-value" id="qs-streak">0</div>
</div>
<div class="qs-stat">
<div class="qs-stat-label">Level</div>
<div class="qs-stat-value" id="qs-level">1</div>
</div>
</div>
<div class="qs-level-info">
<span class="qs-level-text">Level <span id="qs-level-text">1</span></span>
<span class="qs-rule-change-badge" id="qs-rule-badge" style="display:none;">Regelwechsel</span>
</div>
<div class="qs-progress-bar">
<div class="qs-progress-fill" id="qs-progress-fill" style="width:0%"></div>
</div>
<div class="qs-timer-bar">
<div class="qs-timer-fill" id="qs-timer-fill" style="width:100%"></div>
</div>
<div class="qs-rule-indicator" id="qs-rule-indicator">Sortiere: Gerade / Ungerade</div>
<div class="qs-stimulus-area">
<div class="qs-feedback-flash" id="qs-feedback-flash"></div>
<div class="qs-feedback-icon" id="qs-feedback-icon"></div>
<div class="qs-stimulus" id="qs-stimulus"></div>
</div>
<div class="qs-sort-buttons">
<button class="qs-sort-btn qs-btn-left" id="qs-btn-left">
<span class="qs-arrow">1</span>
<span class="qs-label" id="qs-label-left">Gerade</span>
</button>
<button class="qs-sort-btn qs-btn-right" id="qs-btn-right">
<span class="qs-label" id="qs-label-right">Ungerade</span>
<span class="qs-arrow">2</span>
</button>
</div>
<div class="qs-playing-hint"><strong>1</strong> links &middot; <strong>2</strong> rechts &middot; <strong>Esc</strong> Pause</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="qs-pause-btn" type="button">Pause</button>
<button class="gk-finish-btn" id="qs-finish-btn" type="button">Spiel beenden</button>
</div>
</div>

<div id="qs-pause-overlay">
<div class="qs-pause-text">Pausiert</div>
<button class="qs-btn-primary" id="qs-resume-btn">Fortsetzen</button>
</div>

<div id="qs-complete-overlay">
<div class="qs-complete-card">
<button class="gk-complete-close" id="qs-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="qs-trophy">&#127942;</div>
<h2>Spiel beendet!</h2>
<div class="qs-final-score" id="qs-final-score">0</div>
<div id="qs-new-best" class="qs-new-best" style="display:none;">&#11088; Neuer Rekord!</div>
<div class="gk-challenge-result" id="qs-challenge-result" style="display:none;"></div>
<div class="qs-complete-stats">
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Level erreicht</div>
<div class="qs-complete-stat-value" id="qs-final-level">1</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Genauigkeit</div>
<div class="qs-complete-stat-value" id="qs-final-accuracy">0%</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Serie</div>
<div class="qs-complete-stat-value" id="qs-final-streak">0</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Persönlicher Rekord</div>
<div class="qs-complete-stat-value" id="qs-final-best">0</div>
</div>
</div>
<div class="qs-complete-actions">
<button class="qs-btn-primary" id="qs-play-again-btn">Nochmal spielen</button>
<button class="gk-runtime-history-toggle" id="qs-history-toggle" type="button">Show History</button>
<a href="/de/games/" class="qs-back-link">&larr; Alle Spiele</a>
</div>
<div class="gk-runtime-history-panel" id="qs-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="qs-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="qs-share-btn">&#128279; Teile dein Ergebnis</button>
<div class="gk-share-copied" id="qs-share-copied" style="display:none;">Kopiert!</div>
</div>
</div>
</div>

<div class="qs-level-up-toast" id="qs-level-toast">Level Up!</div>
<div class="qs-rule-toast" id="qs-rule-toast">Neue Regel!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_quick-sort_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('qs-history-toggle', 'qs-history-panel', 'qs-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
roundInRule: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctSide: null,
currentRule: null,
currentStimulus: null,
ruleIndex: 0
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('qs-instructions');
var elWizard = document.getElementById('qs-wizard');
var elWizardCard = document.getElementById('qs-wizard-card');
var elPlaying = document.getElementById('qs-playing');
var elPauseOverlay = document.getElementById('qs-pause-overlay');
var elCompleteOverlay = document.getElementById('qs-complete-overlay');
var elScore = document.getElementById('qs-score');
var elStreak = document.getElementById('qs-streak');
var elLevel = document.getElementById('qs-level');
var elLevelText = document.getElementById('qs-level-text');
var elRuleBadge = document.getElementById('qs-rule-badge');
var elProgressFill = document.getElementById('qs-progress-fill');
var elTimerFill = document.getElementById('qs-timer-fill');
var elRuleIndicator = document.getElementById('qs-rule-indicator');
var elStimulus = document.getElementById('qs-stimulus');
var elFeedbackFlash = document.getElementById('qs-feedback-flash');
var elFeedbackIcon = document.getElementById('qs-feedback-icon');
var elLabelLeft = document.getElementById('qs-label-left');
var elLabelRight = document.getElementById('qs-label-right');
var elBtnLeft = document.getElementById('qs-btn-left');
var elBtnRight = document.getElementById('qs-btn-right');
var elFinalScore = document.getElementById('qs-final-score');
var elNewBest = document.getElementById('qs-new-best');
var elFinalLevel = document.getElementById('qs-final-level');
var elFinalAccuracy = document.getElementById('qs-final-accuracy');
var elFinalStreak = document.getElementById('qs-final-streak');
var elFinalBest = document.getElementById('qs-final-best');
var elBestDisplay = document.getElementById('qs-best-display');
var elBestScore = document.getElementById('qs-best-score');
var elLevelToast = document.getElementById('qs-level-toast');
var elRuleToast = document.getElementById('qs-rule-toast');
var btnStart = document.getElementById('qs-start-btn');
var btnResume = document.getElementById('qs-resume-btn');
var btnPlayAgain = document.getElementById('qs-play-again-btn');

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getRuleChangeInterval(lvl) {
if (lvl <= 6) return 999;
if (lvl <= 9) return 4;
if (lvl <= 12) return 3;
if (lvl <= 16) return 3;
return 2;
}

/* ── Helpers ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pick(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
return arr;
}

/* ── Rule definitions ── */
var SHAPES = ['Kreis', 'Quadrat', 'Dreieck'];
var FRUITS = ['Apfel', 'Banane', 'Kirsche'];
var NOT_FRUITS = ['Auto', 'Buch', 'Schreibtisch'];
var ALL_WORDS = FRUITS.concat(NOT_FRUITS);

function ruleEvenOdd() {
return {
name: 'Gerade / Ungerade',
leftLabel: 'Gerade',
rightLabel: 'Ungerade',
generate: function() {
var n = randInt(1, 50);
return {
display: String(n),
correctSide: (n % 2 === 0) ? 'left' : 'right'
};
}
};
}

function ruleBigSmall() {
return {
name: 'Gro\u00df / Klein',
leftLabel: 'Gro\u00df (\u226550)',
rightLabel: 'Klein (<50)',
generate: function() {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n >= 50) ? 'left' : 'right'
};
}
};
}

function ruleShapeOrNot() {
return {
name: 'Form / Keine Form',
leftLabel: 'Form',
rightLabel: 'Keine Form',
generate: function() {
var isShape = Math.random() < 0.5;
var item;
if (isShape) {
item = pick(SHAPES);
} else {
item = String(randInt(1, 100));
}
return {
display: item,
correctSide: isShape ? 'left' : 'right'
};
}
};
}

function ruleFruitOrNot() {
return {
name: 'Obst / Kein Obst',
leftLabel: 'Obst',
rightLabel: 'Kein Obst',
generate: function() {
var item = pick(ALL_WORDS);
var isFruit = FRUITS.indexOf(item) !== -1;
return {
display: item,
correctSide: isFruit ? 'left' : 'right'
};
}
};
}

function ruleCompoundEvenBig() {
return {
name: 'Gerade UND Gro\u00df / Andere',
leftLabel: 'Gerade+Gro\u00df',
rightLabel: 'Andere',
generate: function() {
var n = randInt(1, 100);
var isEvenAndBig = (n % 2 === 0) && (n >= 50);
return {
display: String(n),
correctSide: isEvenAndBig ? 'left' : 'right'
};
}
};
}

function ruleCompoundOddSmall() {
return {
name: 'Ungerade UND Klein / Andere',
leftLabel: 'Ungerade+Klein',
rightLabel: 'Andere',
generate: function() {
var n = randInt(1, 100);
var isOddAndSmall = (n % 2 !== 0) && (n < 50);
return {
display: String(n),
correctSide: isOddAndSmall ? 'left' : 'right'
};
}
};
}

function ruleCompoundFruitBig() {
return {
name: 'Obst ODER Gro\u00df / Andere',
leftLabel: 'Obst/Gro\u00df',
rightLabel: 'Andere',
generate: function() {
var useWord = Math.random() < 0.4;
if (useWord) {
var item = pick(ALL_WORDS);
var isFruit = FRUITS.indexOf(item) !== -1;
return {
display: item,
correctSide: isFruit ? 'left' : 'right'
};
} else {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n >= 50) ? 'left' : 'right'
};
}
}
};
}

function ruleCompoundShapeEven() {
return {
name: 'Form ODER Gerade / Andere',
leftLabel: 'Form/Gerade',
rightLabel: 'Andere',
generate: function() {
var useShape = Math.random() < 0.35;
if (useShape) {
var isShape = Math.random() < 0.5;
var item = isShape ? pick(SHAPES) : String(randInt(1, 50) * 2 - 1);
return {
display: item,
correctSide: isShape ? 'left' : 'right'
};
} else {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n % 2 === 0) ? 'left' : 'right'
};
}
}
};
}

/* ── Get available rules for level ── */
function getRulesForLevel(lvl) {
if (lvl <= 3) {
return [ruleEvenOdd];
} else if (lvl <= 6) {
return [ruleBigSmall];
} else if (lvl <= 9) {
return [ruleEvenOdd, ruleBigSmall];
} else if (lvl <= 12) {
return [ruleShapeOrNot, ruleEvenOdd];
} else if (lvl <= 16) {
return [ruleFruitOrNot, ruleEvenOdd, ruleBigSmall];
} else {
return [ruleCompoundEvenBig, ruleCompoundOddSmall, ruleCompoundFruitBig, ruleCompoundShapeEven];
}
}

function pickNewRule(lvl, prevRuleName) {
var factories = getRulesForLevel(lvl);
if (factories.length === 1) {
return factories[0]();
}
var attempts = 0;
var rule;
do {
rule = pick(factories)();
attempts++;
} while (rule.name === prevRuleName && attempts < 10);
return rule;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
var rulesForLevel = getRulesForLevel(state.level);
if (rulesForLevel.length > 1) {
elRuleBadge.style.display = '';
elRuleBadge.textContent = 'Regeln wechseln';
} else {
elRuleBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('qs-playing', state.score, challenge.score);
}

/* ── Update rule display ── */
function updateRuleDisplay() {
if (!state.currentRule) return;
elRuleIndicator.textContent = 'Sortiere: ' + state.currentRule.name;
elLabelLeft.textContent = state.currentRule.leftLabel;
elLabelRight.textContent = state.currentRule.rightLabel;
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('qs-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('qs-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'qs-feedback-flash';
elFeedbackIcon.className = 'qs-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('qs-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('qs-show-check');
} else {
elFeedbackFlash.classList.add('qs-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('qs-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'qs-feedback-flash';
elFeedbackIcon.className = 'qs-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('qs-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('qs-toast-show');
}, 1500);
}

/* ── Show rule-change toast ── */
function showRuleToast(ruleName) {
elRuleToast.textContent = 'Neue Regel: ' + ruleName;
elRuleToast.classList.add('qs-toast-show');
setTimeout(function() {
elRuleToast.classList.remove('qs-toast-show');
}, 1800);
}

/* ── Flash sort button ── */
function flashSortBtn(side, correct) {
var btn = side === 'left' ? elBtnLeft : elBtnRight;
btn.classList.add(correct ? 'qs-correct-flash' : 'qs-wrong-flash');
setTimeout(function() {
btn.classList.remove('qs-correct-flash', 'qs-wrong-flash');
}, 400);
}

function sortSideLabel(side) {
if (!state.currentRule) return side || 'No answer';
if (side === 'left') return state.currentRule.leftLabel;
if (side === 'right') return state.currentRule.rightLabel;
return 'No answer';
}

function recordSortHistory(chosenSide, correct) {
var html = '<strong>' + runHistory.escape(state.currentRule ? state.currentRule.name : 'Sort rule') + '</strong>';
html += '<div class="gk-runtime-history-sub">Item: ' + runHistory.escape(state.currentStimulus) + '</div>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(sortSideLabel(chosenSide)) + ' | Correct: ' + runHistory.escape(sortSideLabel(state.correctSide)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenSide) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var correct = (chosenSide === state.correctSide);

state.totalAnswered++;
recordSortHistory(chosenSide, correct);
flashSortBtn(chosenSide, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundInRule = 0;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordSortHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundInRule = 0;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.roundInRule++;
state.answered = false;

/* Check if rule should change mid-level */
var ruleInterval = getRuleChangeInterval(state.level);
if (state.roundInRule > ruleInterval && getRulesForLevel(state.level).length > 1) {
state.roundInRule = 1;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showRuleToast(state.currentRule.name);
}

/* Generate stimulus */
var item = state.currentRule.generate();
state.correctSide = item.correctSide;
state.currentStimulus = item.display;

elStimulus.textContent = item.display;
elStimulus.style.animation = 'none';
void elStimulus.offsetWidth;
elStimulus.style.animation = '';

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'qs-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'qs-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'qs-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.qs-trophy');
var title = document.querySelector('#qs-complete-overlay .qs-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'FANTASTISCH!';
elNewBest.className = 'qs-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F FANTASTISCH! Neuer Rekord!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Gut gemacht!';
elNewBest.className = 'qs-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('qs-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var QS_WIZARD_STEPS = [
{icon: '\uD83D\uDCC2', title: 'Sortiere Elemente schnell', desc: 'Ein Element erscheint auf dem Bildschirm. Tippe auf die richtige Kategorie (links oder rechts), um es zu sortieren!'},
{icon: '\uD83D\uDD00', title: 'Regeln ändern sich!', desc: 'Die Regel wechselt oft.'},
{icon: '\u26A1', title: 'Schnell', desc: 'Antworte bevor die Zeit abläuft.', final: true}
];
var qsWizardStep = 0;

function renderWizardStep() {
var s = QS_WIZARD_STEPS[qsWizardStep];
var dotsHtml = '';
for (var i = 0; i < QS_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="qs-wizard-dot' + (i === qsWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Spiel starten' : 'Weiter';
elWizardCard.innerHTML =
'<div class="qs-wizard-icon">' + s.icon + '</div>' +
'<div class="qs-wizard-title">' + s.title + '</div>' +
'<div class="qs-wizard-desc">' + s.desc + '</div>' +
'<div class="qs-wizard-dots">' + dotsHtml + '</div>' +
'<button class="qs-wizard-btn" id="qs-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'qs-wizard-enter 0.3s ease-out';
document.getElementById('qs-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (qsWizardStep < QS_WIZARD_STEPS.length - 1) {
qsWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
qsWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.roundInRule = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctSide = null;
state.currentRule = null;
state.currentStimulus = null;
state.ruleIndex = 0;
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
state.currentRule = pickNewRule(state.level, null);
state.roundInRule = 0;
updateRuleDisplay();
showScreen('playing');
GK.renderChallengeBar('qs-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('qs-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

elBtnLeft.addEventListener('click', function() {
processAnswer('left');
});

elBtnRight.addEventListener('click', function() {
processAnswer('right');
});

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('qs-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('qs-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('qs-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('qs-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Quick Sort', '/de/games/quick-sort/', 'qs-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key === '1') {
e.preventDefault();
processAnswer('left');
} else if (e.key === '2') {
e.preventDefault();
processAnswer('right');
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('qs-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Eugene
URL: https://guruka.com/de/author/eugene/
Description: Eugene, author profile

# Eugene

Eugene is a contributor to this publication.

### Körperreise & Anspannung lösen
URL: https://guruka.com/de/meditate/body-scan-and-tension-release/
Description: Spüre hinein. Lass los. Komm in deinem Körper an.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/de/meditate/body-scan-and-tension-release/');
</script>

### Ruhe & Stressabbau
URL: https://guruka.com/de/meditate/calm-and-stress-relief/
Description: Lass die Anspannung los. Komm zu dir zurück.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/de/meditate/calm-and-stress-relief/');
</script>

### Sequence Recall - Gehirntraining Spiel
URL: https://guruka.com/de/games/sequence-recall/
Description: Wiederhole Farbfolgen.

<style>
#sequence-recall-game {
max-width: 600px;
margin: 0 auto;
padding: 1.5rem 1rem 3rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary, #1a2332);
-webkit-tap-highlight-color: transparent;
}

#sequence-recall-game * {
box-sizing: border-box;
}

#sequence-recall-game .sr-card {
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

[data-theme="dark"] #sequence-recall-game .sr-card {
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

#sequence-recall-game .sr-title {
font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 1.75rem;
font-weight: 700;
text-align: center;
margin: 0 0 0.25rem;
letter-spacing: -0.025em;
}

#sequence-recall-game .sr-subtitle {
text-align: center;
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.95rem;
margin: 0 0 1.5rem;
}

#sequence-recall-game .sr-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#sequence-recall-game .sr-icon {
display: flex;
justify-content: center;
margin-bottom: 0;
font-size: 2rem;
}

#sequence-recall-game .sr-instructions-list {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
}

#sequence-recall-game .sr-instructions-list li {
padding: 0.5rem 0;
padding-left: 1.75rem;
position: relative;
font-size: 0.95rem;
color: var(--color-text-primary, #1a2332);
line-height: 1.5;
}

#sequence-recall-game .sr-instructions-list li::before {
content: attr(data-num);
position: absolute;
left: 0;
top: 0.5rem;
width: 1.25rem;
height: 1.25rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 50%;
font-size: 0.7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}

#sequence-recall-game .sr-best-score {
text-align: center;
padding: 0.75rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
margin-bottom: 1.25rem;
font-size: 0.9rem;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-best-score strong {
color: var(--color-text-primary, #1a2332);
font-weight: 700;
}

#sequence-recall-game .sr-btn-primary {
display: block;
width: 100%;
padding: 0.875rem 1.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.5rem;
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
text-align: center;
text-decoration: none;
}

#sequence-recall-game .sr-btn-primary:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#sequence-recall-game .sr-btn-primary:active {
transform: translateY(0);
}

#sequence-recall-game .sr-btn-secondary {
display: inline-block;
margin-top: 0.75rem;
padding: 0.5rem 1rem;
background: transparent;
color: var(--color-primary, #0f9072);
border: 1px solid var(--color-primary, #0f9072);
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
text-align: center;
}

#sequence-recall-game .sr-btn-secondary:hover {
background: color-mix(in srgb, var(--color-primary, #0f9072) 10%, transparent);
}

/* Wizard overlay */
#sequence-recall-game .sr-wizard-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#sequence-recall-game .sr-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sr-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-card {
background: var(--color-dark-bg-primary, #1e293b);
color: var(--color-dark-text-primary, #e2e8f0);
}
@keyframes sr-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
#sequence-recall-game .sr-wizard-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
#sequence-recall-game .sr-wizard-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
#sequence-recall-game .sr-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary, #4b5b6d);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-desc {
color: var(--color-dark-text-secondary, #94a3b8);
}
#sequence-recall-game .sr-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
#sequence-recall-game .sr-wizard-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
#sequence-recall-game .sr-wizard-dot.active {
background: var(--color-primary, #0f9072);
transform: scale(1.3);
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-dot.active {
background: var(--color-primary, #0f9072);
}
#sequence-recall-game .sr-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary, #0f9072);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
#sequence-recall-game .sr-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#sequence-recall-game .sr-wizard-card { padding: 1.5rem 1rem; }
#sequence-recall-game .sr-wizard-icon { font-size: 2rem; }
#sequence-recall-game .sr-wizard-title { font-size: 1.1rem; }
#sequence-recall-game .sr-wizard-desc { font-size: 0.85rem; }
#sequence-recall-game .sr-icon { font-size: 1.5rem; margin-bottom: 0; }
#sequence-recall-game .sr-title { font-size: 1.3rem; }
#sequence-recall-game .sr-subtitle { font-size: 0.85rem; margin-bottom: 1rem; }
#sequence-recall-game .sr-instructions-list li { font-size: 0.85rem; padding: 0.3rem 0; }
}

/* Header bar */
#sequence-recall-game .sr-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 0.85rem;
font-weight: 600;
}

#sequence-recall-game .sr-header-item {
text-align: center;
line-height: 1.3;
}

#sequence-recall-game .sr-header-label {
display: block;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary, #4b5b6d);
font-weight: 500;
}

#sequence-recall-game .sr-header-value {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text-primary, #1a2332);
}

#sequence-recall-game .sr-header-value.sr-streak {
color: #f59e0b;
}

/* Phase indicator */
#sequence-recall-game .sr-phase-label {
text-align: center;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-primary, #0f9072);
margin-bottom: 0.75rem;
}

/* Progress bar */
#sequence-recall-game .sr-progress {
margin-top: 1rem;
}

#sequence-recall-game .sr-progress-label {
text-align: center;
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.35rem;
}

#sequence-recall-game .sr-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 3px;
overflow: hidden;
}

#sequence-recall-game .sr-progress-fill {
height: 100%;
background: var(--color-primary, #0f9072);
border-radius: 3px;
transition: width 0.3s ease;
}

/* Color display area */
#sequence-recall-game .sr-color-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 220px;
padding: 1rem;
}

#sequence-recall-game .sr-color-box {
width: 160px;
height: 160px;
border-radius: 1rem;
animation: sr-color-appear 0.3s ease-out;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

@keyframes sr-color-appear {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .sr-color-counter {
margin-top: 1rem;
font-size: 1rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}

/* Recall area */
#sequence-recall-game .sr-recall-area {
padding: 0.5rem 0;
}

#sequence-recall-game .sr-selected-sequence {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 44px;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
flex-wrap: wrap;
}

#sequence-recall-game .sr-selected-dot {
width: 28px;
height: 28px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
animation: sr-dot-appear 0.2s ease-out;
flex-shrink: 0;
}

@keyframes sr-dot-appear {
0% { transform: scale(0); }
100% { transform: scale(1); }
}

#sequence-recall-game .sr-selected-placeholder {
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-color-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
margin-bottom: 0.75rem;
}

#sequence-recall-game .sr-color-btn {
aspect-ratio: 1;
border: 3px solid transparent;
border-radius: 0.75rem;
cursor: pointer;
transition: all 0.15s ease;
min-height: 70px;
position: relative;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

#sequence-recall-game .sr-color-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#sequence-recall-game .sr-color-btn:active {
transform: scale(0.95);
}

#sequence-recall-game .sr-color-btn .sr-btn-label {
position: absolute;
bottom: 6px;
left: 0;
right: 0;
text-align: center;
font-size: 0.65rem;
font-weight: 600;
color: rgba(255,255,255,0.9);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#sequence-recall-game .sr-undo-row {
display: flex;
gap: 0.5rem;
}

#sequence-recall-game .sr-undo-btn {
flex: 1;
padding: 0.6rem;
border: 1px solid var(--color-border, #dfe4ea);
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
border-radius: 0.5rem;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-undo-btn:hover {
background: var(--color-bg-secondary, #f0f4f8);
}

#sequence-recall-game .sr-submit-btn {
flex: 2;
padding: 0.6rem;
border: none;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-submit-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}

#sequence-recall-game .sr-submit-btn:not(:disabled):hover {
opacity: 0.9;
}

/* Distraction (math) */
#sequence-recall-game .sr-math-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
padding: 1rem;
}

#sequence-recall-game .sr-math-problem {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
font-family: "Space Grotesk", system-ui, sans-serif;
color: var(--color-text-primary, #1a2332);
}

#sequence-recall-game .sr-math-input-row {
display: flex;
gap: 0.5rem;
align-items: center;
}

#sequence-recall-game .sr-math-input {
width: 100px;
padding: 0.6rem 0.75rem;
border: 2px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
font-size: 1.25rem;
text-align: center;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
outline: none;
}

#sequence-recall-game .sr-math-input:focus {
border-color: var(--color-primary, #0f9072);
}

#sequence-recall-game .sr-math-submit {
padding: 0.6rem 1.25rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-math-submit:hover {
opacity: 0.9;
}

#sequence-recall-game .sr-math-hint {
margin-top: 0.75rem;
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
}

/* Positions grid */
#sequence-recall-game .sr-position-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 260px;
padding: 1rem;
}

#sequence-recall-game .sr-position-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
width: 210px;
}

#sequence-recall-game .sr-position-cell {
width: 64px;
height: 64px;
background: var(--color-bg-secondary, #f0f4f8);
border: 2px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
color: transparent;
}

#sequence-recall-game .sr-position-cell:hover {
border-color: var(--color-primary, #0f9072);
}

#sequence-recall-game .sr-position-cell.sr-pos-active {
background: var(--color-primary, #0f9072);
border-color: var(--color-primary, #0f9072);
color: #fff;
}

#sequence-recall-game .sr-position-cell.sr-pos-highlight {
background: var(--color-primary, #0f9072);
border-color: var(--color-primary, #0f9072);
animation: sr-pos-flash 0.4s ease-out;
}

@keyframes sr-pos-flash {
0% { transform: scale(0.8); opacity: 0.5; }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .sr-position-counter {
margin-top: 0.75rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}

/* Feedback overlay */
#sequence-recall-game .sr-feedback {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
animation: sr-feedback-appear 0.3s ease-out;
}

#sequence-recall-game .sr-feedback-correct {
font-size: 1.5rem;
font-weight: 700;
color: #22c55e;
}

#sequence-recall-game .sr-feedback-wrong {
font-size: 1.5rem;
font-weight: 700;
color: #ef4444;
}

#sequence-recall-game .sr-feedback-points {
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text-secondary, #4b5b6d);
margin-top: 0.25rem;
}

@keyframes sr-feedback-appear {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

/* Game complete */
#sequence-recall-game .sr-complete {
position: relative;
text-align: center;
}

#sequence-recall-game .sr-complete-icon {
font-size: 3rem;
margin-bottom: 0.5rem;
}

#sequence-recall-game .sr-complete-title {
font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 1.25rem;
}

#sequence-recall-game .sr-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-bottom: 1.25rem;
}

#sequence-recall-game .sr-stat-box {
padding: 0.75rem 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
text-align: center;
}

#sequence-recall-game .sr-stat-value {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-text-primary, #1a2332);
display: block;
}

#sequence-recall-game .sr-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-new-best {
display: inline-block;
padding: 0.35rem 0.75rem;
background: #f59e0b;
color: #1a2332;
border-radius: 1rem;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 1rem;
animation: sr-badge-pulse 1s ease-in-out infinite alternate;
}

@keyframes sr-badge-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

#sequence-recall-game .sr-complete-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
margin-top: 0.5rem;
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

/* Hide all screens by default */
#sequence-recall-game .sr-screen {
display: none;
}

#sequence-recall-game .sr-screen.sr-active {
display: block;
}

/* Responsive */
@media (max-width: 400px) {
#sequence-recall-game .sr-color-btn {
min-height: 60px;
}
#sequence-recall-game .sr-color-box {
width: 130px;
height: 130px;
}
#sequence-recall-game .sr-position-grid {
width: 180px;
}
#sequence-recall-game .sr-position-cell {
width: 54px;
height: 54px;
}
}
@media (max-width: 640px) {
#sequence-recall-game .sr-color-grid {
gap: 0.5rem;
}
#sequence-recall-game .sr-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 360px) {
#sequence-recall-game .sr-color-btn {
min-height: 50px;
}
#sequence-recall-game .sr-color-box {
width: 110px;
height: 110px;
}
#sequence-recall-game .sr-position-grid {
width: 160px;
}
#sequence-recall-game .sr-position-cell {
width: 48px;
height: 48px;
}
#sequence-recall-game .sr-stats-grid {
grid-template-columns: 1fr 1fr;
}
#sequence-recall-game .sr-selected-dot {
width: 22px;
height: 22px;
}
}
@keyframes sr-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.sr-confetti-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.sr-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: sr-confetti-fall 2.5s ease-in forwards;
}
.sr-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: sr-glow-fade 1s ease-out forwards;
}
@keyframes sr-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.sr-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 1rem;
animation: sr-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes sr-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#sequence-recall-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #sequence-recall-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="sequence-recall-game">

<div id="sr-instructions" class="sr-screen sr-active">
<div class="sr-card">
<div class="sr-title-row"><span class="sr-icon">&#x1F9E0;</span><h1 class="sr-title">Sequence Recall</h1></div>
<p class="sr-subtitle">Trainiere dein Arbeitsgedächtnis</p>
<ul class="sr-instructions-list">
<li data-num="1">Beobachte die Farbfolge, die nacheinander gezeigt wird</li>
<li data-num="2">Merke dir die Reihenfolge sorgfältig</li>
<li data-num="3">Erinnere die Farben in exakt derselben Reihenfolge</li>
<li data-num="4">Durchlaufe 20 Level mit steigender Schwierigkeit</li>
</ul>
<div class="sr-best-score" id="sr-best-display">
Persönlicher Rekord: <strong id="sr-best-value">0</strong> Punkte
</div>
<button class="sr-btn-primary" id="sr-start-btn">Spiel starten</button>
<div id="sr-challenge-banner-wrap"></div>
</div>
</div>

<div id="sr-wizard" class="sr-screen">
<div class="sr-wizard-overlay">
<div class="sr-wizard-card" id="sr-wizard-card"></div>
</div>
</div>

<div id="sr-playing" class="sr-screen">
<div class="sr-header">
<div class="sr-header-item">
<span class="sr-header-label">Punkte</span>
<span class="sr-header-value" id="sr-score">0</span>
</div>
<div class="sr-header-item">
<span class="sr-header-label">Level</span>
<span class="sr-header-value" id="sr-level">1</span>
</div>
<div class="sr-header-item">
<span class="sr-header-label">Serie</span>
<span class="sr-header-value sr-streak" id="sr-streak">0</span>
</div>
</div>
<div class="sr-phase-label" id="sr-phase-label">Memorize</div>
<div id="sr-play-area"></div>
<div class="sr-progress">
<div class="sr-progress-label" id="sr-progress-label">Runde 1 von 3</div>
<div class="sr-progress-bar">
<div class="sr-progress-fill" id="sr-progress-fill" style="width:0%"></div>
</div>
</div>
<button class="gk-finish-btn" id="sr-finish-btn">Spiel beenden</button>
</div>

<div id="sr-complete" class="sr-screen">
<div class="sr-card sr-complete">
<button class="gk-complete-close" id="sr-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="sr-complete-icon">&#x1F3C6;</div>
<h2 class="sr-complete-title">Spiel beendet!</h2>
<div id="sr-new-best-badge" class="sr-new-best" style="display:none;">Neuer persönlicher Rekord!</div>
<div class="gk-challenge-result" id="sr-challenge-result" style="display:none;"></div>
<div class="sr-stats-grid">
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-score">0</span>
<span class="sr-stat-label">Punkte</span>
</div>
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-level">1</span>
<span class="sr-stat-label">Level</span>
</div>
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-accuracy">0%</span>
<span class="sr-stat-label">Genauigkeit</span>
</div>
</div>
<div class="sr-complete-links">
<button class="sr-btn-primary" id="sr-play-again-btn">Nochmal spielen</button>
<button class="gk-runtime-history-toggle" id="sr-history-toggle" type="button">Show History</button>
<a href="/de/games/" class="sr-btn-secondary">Alle Spiele</a>
</div>
<div class="gk-runtime-history-panel" id="sr-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="sr-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="sr-share-btn">&#128279; Teile dein Ergebnis</button>
<div class="gk-share-copied" id="sr-share-copied" style="display:none;">Kopiert!</div>
</div>
</div>
</div>

</div>

<script>
(function() {
var STORAGE_BEST = 'guruka_sequence-recall_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('sr-history-toggle', 'sr-history-panel', 'sr-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var COLORS = [
{ name: 'Rot', hsl: 'hsl(0,84%,60%)' },
{ name: 'Blau', hsl: 'hsl(217,91%,60%)' },
{ name: 'Grün', hsl: 'hsl(142,76%,36%)' },
{ name: 'Gelb', hsl: 'hsl(48,96%,53%)' },
{ name: 'Lila', hsl: 'hsl(280,68%,55%)' },
{ name: 'Orange', hsl: 'hsl(25,95%,53%)' }
];

var MAX_LEVEL = 20;
var ROUNDS_PER_LEVEL = 3;

var state = {
screen: 'instructions',
level: 1,
round: 0,
score: 0,
streak: 0,
totalCorrect: 0,
totalAttempts: 0,
colorSequence: [],
positionSequence: [],
selectedColors: [],
selectedPositions: [],
currentShowIndex: 0,
phaseStartTime: 0,
showTimer: null,
feedbackTimer: null
};

function getSequenceLength(level) {
return Math.min(3 + Math.floor(level / 3), 8);
}

function hasDistraction(level) {
return level >= 6;
}

function isDualTrack(level) {
return level >= 11;
}

function getDisplayTime(level) {
return Math.max(1200 - (level - 1) * 40, 600);
}

function getBestScore() {
try {
var val = localStorage.getItem(STORAGE_BEST);
return val ? parseInt(val, 10) : 0;
} catch(e) { return 0; }
}

function setBestScore(s) {
try { localStorage.setItem(STORAGE_BEST, String(s)); } catch(e) {}
}

function getHistory() {
return [];
}

function addHistory(entry) {
void entry;
}

function $(id) { return document.getElementById(id); }

function showScreen(name) {
var screens = document.querySelectorAll('#sequence-recall-game .sr-screen');
for (var i = 0; i < screens.length; i++) {
screens[i].classList.remove('sr-active');
}
var el = $('sr-' + name);
if (el) el.classList.add('sr-active');
state.screen = name;
}

function generateColorSequence(len) {
var seq = [];
for (var i = 0; i < len; i++) {
seq.push(Math.floor(Math.random() * COLORS.length));
}
return seq;
}

function generatePositionSequence(len) {
var positions = [];
var used = {};
var count = Math.min(len, 9);
while (positions.length < count) {
var p = Math.floor(Math.random() * 9);
if (!used[p]) {
used[p] = true;
positions.push(p);
}
}
return positions;
}

function generateMathProblem() {
var ops = ['+', '-', '*'];
var op = ops[Math.floor(Math.random() * ops.length)];
var a, b, answer;
if (op === '+') {
a = Math.floor(Math.random() * 50) + 1;
b = Math.floor(Math.random() * 50) + 1;
answer = a + b;
} else if (op === '-') {
a = Math.floor(Math.random() * 50) + 10;
b = Math.floor(Math.random() * a);
answer = a - b;
} else {
a = Math.floor(Math.random() * 12) + 2;
b = Math.floor(Math.random() * 12) + 2;
answer = a * b;
}
var display = op === '*' ? (a + ' \u00D7 ' + b) : (a + ' ' + op + ' ' + b);
return { display: display, answer: answer };
}

function updateHeader() {
$('sr-score').textContent = state.score;
$('sr-level').textContent = state.level;
$('sr-streak').textContent = state.streak;
if (challenge.active) GK.updateChallengeBar('sr-playing', state.score, challenge.score);
}

function updateProgress() {
$('sr-progress-label').textContent = 'Runde ' + (state.round + 1) + ' von ' + ROUNDS_PER_LEVEL;
var pct = (state.round / ROUNDS_PER_LEVEL) * 100;
$('sr-progress-fill').style.width = pct + '%';
}

var SR_WIZARD_STEPS = [
{icon: '\uD83C\uDFA8', title: 'Beobachte die Farbfolge', desc: 'Farben erscheinen nacheinander. Merke dir die Reihenfolge!'},
{icon: '\uD83E\uDDE0', title: 'Erinnere sie in Reihenfolge', desc: 'Tippe die Farben in exakt der Reihenfolge, die du gesehen hast.'},
{icon: '\uD83D\uDE80', title: 'Bereit? Los geht\'s!', desc: 'Die Folgen werden länger. Bleib fokussiert!', final: true}
];
var srWizardStep = 0;
var srWizardCallback = null;

function srRenderWizardStep() {
var s = SR_WIZARD_STEPS[srWizardStep];
var dotsHtml = '';
for (var i = 0; i < SR_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="sr-wizard-dot' + (i === srWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Spielen beginnen' : 'Weiter';
var card = $('sr-wizard-card');
card.innerHTML =
'<div class="sr-wizard-icon">' + s.icon + '</div>' +
'<div class="sr-wizard-title">' + s.title + '</div>' +
'<div class="sr-wizard-desc">' + s.desc + '</div>' +
'<div class="sr-wizard-dots">' + dotsHtml + '</div>' +
'<button class="sr-wizard-btn" id="sr-wizard-next">' + btnLabel + '</button>';
card.style.animation = 'none';
void card.offsetWidth;
card.style.animation = 'sr-wizard-enter 0.3s ease-out';
$('sr-wizard-next').addEventListener('click', srAdvanceWizard);
}

function srAdvanceWizard() {
if (srWizardStep < SR_WIZARD_STEPS.length - 1) {
srWizardStep++;
srRenderWizardStep();
} else {
if (srWizardCallback) srWizardCallback();
}
}

function showWizard(callback) {
srWizardStep = 0;
srWizardCallback = callback;
showScreen('wizard');
srRenderWizardStep();
}

function startRound() {
var seqLen = getSequenceLength(state.level);
state.colorSequence = generateColorSequence(seqLen);
state.positionSequence = isDualTrack(state.level) ? generatePositionSequence(Math.min(seqLen, 9)) : [];
state.selectedColors = [];
state.selectedPositions = [];
state.currentShowIndex = 0;

updateHeader();
updateProgress();
showColorSequence();
}

function showColorSequence() {
$('sr-phase-label').textContent = 'Merke dir die Farben';
state.currentShowIndex = 0;
showNextColor();
}

function showNextColor() {
var area = $('sr-play-area');
if (state.currentShowIndex >= state.colorSequence.length) {
if (isDualTrack(state.level)) {
showPositionSequence();
} else if (hasDistraction(state.level)) {
showDistraction();
} else {
startRecallColors();
}
return;
}

var colorIdx = state.colorSequence[state.currentShowIndex];
var color = COLORS[colorIdx];
var total = state.colorSequence.length;
var current = state.currentShowIndex + 1;

area.innerHTML = '<div class="sr-color-stage">' +
'<div class="sr-color-box" style="background:' + color.hsl + '"></div>' +
'<div class="sr-color-counter">' + current + ' / ' + total + '</div>' +
'</div>';

state.currentShowIndex++;
var dt = getDisplayTime(state.level);
state.showTimer = setTimeout(function() {
showNextColor();
}, dt);
}

function showPositionSequence() {
$('sr-phase-label').textContent = 'Merke dir die Positionen';
state.currentShowIndex = 0;
showNextPosition();
}

function showNextPosition() {
if (state.currentShowIndex >= state.positionSequence.length) {
if (hasDistraction(state.level)) {
showDistraction();
} else {
startRecallColors();
}
return;
}

var pos = state.positionSequence[state.currentShowIndex];
var total = state.positionSequence.length;
var current = state.currentShowIndex + 1;

var html = '<div class="sr-position-stage">';
html += '<div class="sr-position-grid">';
for (var i = 0; i < 9; i++) {
var cls = 'sr-position-cell';
if (i === pos) cls += ' sr-pos-highlight';
html += '<div class="' + cls + '"></div>';
}
html += '</div>';
html += '<div class="sr-position-counter">' + current + ' / ' + total + '</div>';
html += '</div>';

$('sr-play-area').innerHTML = html;

state.currentShowIndex++;
var dt = getDisplayTime(state.level);
state.showTimer = setTimeout(function() {
showNextPosition();
}, dt);
}

function showDistraction() {
$('sr-phase-label').textContent = 'Schnelles Rechnen!';
var problem = generateMathProblem();

var html = '<div class="sr-math-area">';
html += '<div class="sr-math-problem">' + problem.display + ' = ?</div>';
html += '<div class="sr-math-input-row">';
html += '<input type="number" class="sr-math-input" id="sr-math-input" inputmode="numeric" autocomplete="off">';
html += '<button class="sr-math-submit" id="sr-math-btn">Los</button>';
html += '</div>';
html += '<div class="sr-math-hint">Löse zum Fortfahren</div>';
html += '</div>';

$('sr-play-area').innerHTML = html;

var input = $('sr-math-input');
var btn = $('sr-math-btn');

function submitMath() {
var val = parseInt(input.value, 10);
if (isNaN(val)) return;
startRecallColors();
}

btn.addEventListener('click', submitMath);
input.addEventListener('keydown', function(e) {
if (e.key === 'Enter') submitMath();
});

setTimeout(function() { input.focus(); }, 100);
}

function startRecallColors() {
$('sr-phase-label').textContent = 'Erinnere die Farbfolge';
state.selectedColors = [];
state.phaseStartTime = Date.now();
renderRecallColors();
}

function renderRecallColors() {
var needed = state.colorSequence.length;
var html = '<div class="sr-recall-area">';

html += '<div class="sr-selected-sequence" id="sr-selected-seq">';
if (state.selectedColors.length === 0) {
html += '<span class="sr-selected-placeholder">Tippe Farben in Reihenfolge (' + needed + ' nötig)</span>';
} else {
for (var i = 0; i < state.selectedColors.length; i++) {
var c = COLORS[state.selectedColors[i]];
html += '<div class="sr-selected-dot" style="background:' + c.hsl + '"></div>';
}
}
html += '</div>';

html += '<div class="sr-color-grid">';
for (var j = 0; j < COLORS.length; j++) {
html += '<button class="sr-color-btn" data-color="' + j + '" style="background:' + COLORS[j].hsl + '">';
html += '<span class="sr-btn-label">' + COLORS[j].name + '</span>';
html += '</button>';
}
html += '</div>';

html += '<div class="sr-undo-row">';
html += '<button class="sr-undo-btn" id="sr-undo-btn">Rückgängig</button>';
html += '<button class="sr-submit-btn" id="sr-submit-colors-btn"' + (state.selectedColors.length < needed ? ' disabled' : '') + '>Bestätigen</button>';
html += '</div>';

html += '</div>';

$('sr-play-area').innerHTML = html;

var buttons = document.querySelectorAll('#sequence-recall-game .sr-color-btn');
for (var k = 0; k < buttons.length; k++) {
buttons[k].addEventListener('click', function() {
var ci = parseInt(this.getAttribute('data-color'), 10);
if (state.selectedColors.length < needed) {
state.selectedColors.push(ci);
renderRecallColors();
if (state.selectedColors.length === needed) {
setTimeout(function() {
var sb = $('sr-submit-colors-btn');
if (sb) sb.focus();
}, 50);
}
}
});
}

$('sr-undo-btn').addEventListener('click', function() {
if (state.selectedColors.length > 0) {
state.selectedColors.pop();
renderRecallColors();
}
});

var submitBtn = $('sr-submit-colors-btn');
submitBtn.addEventListener('click', function() {
if (state.selectedColors.length === needed) {
submitColorRecall();
}
});
}

function submitColorRecall() {
var responseTime = Date.now() - state.phaseStartTime;
var correct = true;
for (var i = 0; i < state.colorSequence.length; i++) {
if (state.colorSequence[i] !== state.selectedColors[i]) {
correct = false;
break;
}
}

if (isDualTrack(state.level)) {
state._colorCorrect = correct;
state._colorResponseTime = responseTime;
startRecallPositions();
} else {
resolveRound(correct, responseTime);
}
}

function startRecallPositions() {
$('sr-phase-label').textContent = 'Erinnere die Positionen in der Reihenfolge';
state.selectedPositions = [];
state.phaseStartTime = Date.now();
renderRecallPositions();
}

function renderRecallPositions() {
var needed = state.positionSequence.length;
var html = '<div class="sr-position-stage">';

html += '<div class="sr-selected-sequence">';
if (state.selectedPositions.length === 0) {
html += '<span class="sr-selected-placeholder">Tippe Gitterpositionen in Reihenfolge (' + needed + ' nötig)</span>';
} else {
for (var i = 0; i < state.selectedPositions.length; i++) {
html += '<div class="sr-selected-dot" style="background:var(--color-primary, #0f9072)"></div>';
}
}
html += '</div>';

html += '<div class="sr-position-grid">';
for (var j = 0; j < 9; j++) {
var isSelected = false;
var order = -1;
for (var k = 0; k < state.selectedPositions.length; k++) {
if (state.selectedPositions[k] === j) {
isSelected = true;
order = k + 1;
break;
}
}
var cls = 'sr-position-cell';
if (isSelected) cls += ' sr-pos-active';
html += '<div class="' + cls + '" data-pos="' + j + '">' + (isSelected ? order : '') + '</div>';
}
html += '</div>';

html += '<div class="sr-undo-row" style="margin-top:0.75rem;max-width:210px;width:100%;">';
html += '<button class="sr-undo-btn" id="sr-undo-pos-btn">Rückgängig</button>';
html += '<button class="sr-submit-btn" id="sr-submit-pos-btn"' + (state.selectedPositions.length < needed ? ' disabled' : '') + '>Bestätigen</button>';
html += '</div>';

html += '</div>';

$('sr-play-area').innerHTML = html;

var cells = document.querySelectorAll('#sequence-recall-game .sr-position-cell');
for (var m = 0; m < cells.length; m++) {
cells[m].addEventListener('click', function() {
var p = parseInt(this.getAttribute('data-pos'), 10);
var alreadySelected = false;
for (var n = 0; n < state.selectedPositions.length; n++) {
if (state.selectedPositions[n] === p) {
alreadySelected = true;
break;
}
}
if (!alreadySelected && state.selectedPositions.length < needed) {
state.selectedPositions.push(p);
renderRecallPositions();
}
});
}

$('sr-undo-pos-btn').addEventListener('click', function() {
if (state.selectedPositions.length > 0) {
state.selectedPositions.pop();
renderRecallPositions();
}
});

$('sr-submit-pos-btn').addEventListener('click', function() {
if (state.selectedPositions.length === needed) {
submitPositionRecall();
}
});
}

function submitPositionRecall() {
var responseTime = Date.now() - state.phaseStartTime;
var posCorrect = true;
for (var i = 0; i < state.positionSequence.length; i++) {
if (state.positionSequence[i] !== state.selectedPositions[i]) {
posCorrect = false;
break;
}
}

var bothCorrect = state._colorCorrect && posCorrect;
var combinedTime = state._colorResponseTime + responseTime;
resolveRound(bothCorrect, combinedTime);
}

function formatColorHistory(seq) {
if (!seq || !seq.length) return 'none';
var out = [];
for (var i = 0; i < seq.length; i++) {
var color = COLORS[seq[i]];
out.push('<span class="gk-history-swatch" style="background:' + runHistory.escape(color.hsl) + '"></span>' + runHistory.escape(color.name));
}
return out.join(', ');
}

function formatPositionHistory(seq) {
if (!seq || !seq.length) return 'none';
var out = [];
for (var i = 0; i < seq.length; i++) out.push(String(seq[i] + 1));
return out.join(', ');
}

function recordSequenceHistory(correct) {
var html = '<strong>Sequence recall</strong>';
html += '<div class="gk-runtime-history-sub">Colors - Your: ' + formatColorHistory(state.selectedColors) + '</div>';
html += '<div class="gk-runtime-history-sub">Colors - Correct: ' + formatColorHistory(state.colorSequence) + '</div>';
if (isDualTrack(state.level)) {
html += '<div class="gk-runtime-history-sub">Positions - Your: ' + runHistory.escape(formatPositionHistory(state.selectedPositions)) + '</div>';
html += '<div class="gk-runtime-history-sub">Positions - Correct: ' + runHistory.escape(formatPositionHistory(state.positionSequence)) + '</div>';
}
runHistory.pushHtml(correct, html);
}

function resolveRound(correct, responseTime) {
state.totalAttempts++;
recordSequenceHistory(correct);
var points = 0;

if (correct) {
state.totalCorrect++;
state.streak++;
points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
} else {
state.streak = 0;
}

updateHeader();
showFeedback(correct, points);
}

function showFeedback(correct, points) {
$('sr-phase-label').textContent = '';
var html = '<div class="sr-feedback"><div>';
if (correct) {
html += '<div class="sr-feedback-correct">Richtig!</div>';
html += '<div class="sr-feedback-points">+' + points + ' Punkte</div>';
} else {
html += '<div class="sr-feedback-wrong">Falsch</div>';
html += '<div class="sr-feedback-points">Serie zurückgesetzt</div>';
}
html += '</div></div>';

$('sr-play-area').innerHTML = html;

state.feedbackTimer = setTimeout(function() {
advanceRound(correct);
}, 1200);
}

function advanceRound(wasCorrect) {
state.round++;

if (state.round >= ROUNDS_PER_LEVEL) {
if (wasCorrect) {
state.level++;
}
state.round = 0;

if (state.level > MAX_LEVEL) {
endGame();
return;
}
}

updateProgress();
startRound();
}

/* ── Celebration effects ── */
function srShowConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'sr-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'sr-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'sr-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function srAnimateScoreCountUp(el, target) {
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(target * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

function endGame() {
exitMobileGameMode();
var accuracy = state.totalAttempts > 0 ? Math.round((state.totalCorrect / state.totalAttempts) * 100) : 0;
var best = getBestScore();
var isNewBest = state.score > best;

if (isNewBest) {
setBestScore(state.score);
}

addHistory({
score: state.score,
level: state.level > MAX_LEVEL ? MAX_LEVEL : state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var iconEl = document.querySelector('#sr-complete .sr-complete-icon');
var titleEl = document.querySelector('#sr-complete .sr-complete-title');
var badge = $('sr-new-best-badge');

if (isNewBest) {
srShowConfetti();
iconEl.textContent = '\uD83C\uDF89';
titleEl.textContent = 'FANTASTISCH!';
badge.className = 'sr-new-best-enhanced';
badge.innerHTML = '\uD83C\uDF1F FANTASTISCH! Neuer Rekord!';
badge.style.display = 'inline-block';
} else {
iconEl.textContent = '\uD83C\uDFC6';
titleEl.textContent = 'Gut gemacht!';
badge.className = 'sr-new-best';
badge.style.display = 'none';
}

GK.renderChallengeResult('sr-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

$('sr-final-level').textContent = state.level > MAX_LEVEL ? MAX_LEVEL : state.level;
$('sr-final-accuracy').textContent = accuracy + '%';

showScreen('complete');
srAnimateScoreCountUp($('sr-final-score'), state.score);
}

function resetGame() {
clearTimeout(state.showTimer);
clearTimeout(state.feedbackTimer);
state.level = 1;
state.round = 0;
state.score = 0;
state.streak = 0;
state.totalCorrect = 0;
state.totalAttempts = 0;
state.selectedColors = [];
state.selectedPositions = [];
state.colorSequence = [];
state.positionSequence = [];
runHistory.clear();
}

function initInstructions() {
var best = getBestScore();
$('sr-best-value').textContent = best;
GK.renderChallengeBanner('sr-challenge-banner-wrap', challenge);
showScreen('instructions');
}


$('sr-close-btn').addEventListener('click', function() {
$('sr-best-value').textContent = getBestScore();
showScreen('instructions');
});

$('sr-finish-btn').addEventListener('click', function() {
endGame();
});

$('sr-start-btn').addEventListener('click', function() {
resetGame();
showWizard(function() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sr-playing', challenge);
startRound();
});
});

$('sr-play-again-btn').addEventListener('click', function() {
resetGame();
showWizard(function() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sr-playing', challenge);
startRound();
});
});

$('sr-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

$('sr-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Sequence Recall', '/de/games/sequence-recall/', 'sr-share-copied');
});

initInstructions();
})();
</script>

### Speed Match - Gehirntraining Spiel
URL: https://guruka.com/de/games/speed-match/
Description: Vergleiche Symbole schnell.

<style>
#speed-match-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #speed-match-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#sm-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.sm-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#sm-instructions .sm-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#sm-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#sm-instructions .sm-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #sm-instructions .sm-subtitle {
color: var(--color-dark-text-secondary);
}

#sm-instructions .sm-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #sm-instructions .sm-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#sm-instructions .sm-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#sm-instructions .sm-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#sm-instructions .sm-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.sm-kbd-hints {
display: flex;
gap: 1.5rem;
justify-content: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}

.sm-kbd-hint {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-kbd-hint {
color: var(--color-dark-text-secondary);
}

.sm-kbd {
display: inline-block;
padding: 0.15rem 0.5rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.25rem;
font-family: monospace;
font-size: 0.8rem;
font-weight: 600;
}

[data-theme="dark"] .sm-kbd {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.sm-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.sm-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.sm-btn-primary:hover {
background: var(--color-primary-hover);
}

.sm-btn-primary:active {
transform: scale(0.97);
}

.sm-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.sm-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .sm-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#sm-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#sm-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sm-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #sm-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes sm-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.sm-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.sm-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.sm-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .sm-wizard-desc {
color: var(--color-dark-text-secondary);
}
.sm-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.sm-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.sm-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"] .sm-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .sm-wizard-dot.active {
background: var(--color-primary);
}
.sm-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.sm-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#sm-wizard-card {
padding: 1.5rem 1rem;
}
.sm-wizard-icon {
font-size: 2rem;
}
.sm-wizard-title {
font-size: 1.1rem;
}
.sm-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#sm-playing {
display: none;
flex: 1;
flex-direction: column;
}

.sm-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .sm-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-stat {
text-align: center;
}

.sm-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .sm-stat-label {
color: var(--color-dark-text-secondary);
}

.sm-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.sm-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.sm-level-text {
font-weight: 600;
}

.sm-nback-badge {
background: var(--color-primary);
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.sm-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .sm-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.sm-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .sm-timer-bar {
background: var(--color-dark-bg-secondary);
}

.sm-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.sm-timer-fill.sm-timer-warning {
background: #ef4444;
}

/* ── Symbol Display ── */
.sm-symbol-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
}

.sm-symbol {
font-size: 7rem;
line-height: 1;
transition: transform 0.15s ease;
animation: sm-symbol-enter 0.2s ease-out;
}

@keyframes sm-symbol-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.sm-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.sm-feedback-flash.sm-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.sm-feedback-flash.sm-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.sm-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.sm-feedback-icon.sm-show-check {
animation: sm-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.sm-feedback-icon.sm-show-x {
animation: sm-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes sm-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Action Buttons ── */
.sm-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.sm-action-btn {
flex: 1;
padding: 1rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
background: var(--color-bg-primary);
color: var(--color-text-primary);
}

[data-theme="dark"] .sm-action-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.sm-action-btn:active {
transform: scale(0.95);
}

.sm-action-btn:disabled {
opacity: 0.45;
cursor: default;
transform: none;
}

.sm-action-btn .sm-btn-icon {
font-size: 1.5rem;
}

.sm-action-btn .sm-btn-kbd {
font-size: 0.65rem;
color: var(--color-text-secondary);
font-weight: 400;
}

[data-theme="dark"] .sm-action-btn .sm-btn-kbd {
color: var(--color-dark-text-secondary);
}

.sm-btn-different {
border-color: #ef4444;
}

.sm-btn-different:hover {
background: rgba(239, 68, 68, 0.08);
}

[data-theme="dark"] .sm-btn-different:hover {
background: rgba(239, 68, 68, 0.15);
}

.sm-btn-same {
border-color: #22c55e;
}

.sm-btn-same:hover {
background: rgba(34, 197, 94, 0.08);
}

[data-theme="dark"] .sm-btn-same:hover {
background: rgba(34, 197, 94, 0.15);
}

.sm-playing-kbd-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-playing-kbd-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#sm-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#sm-pause-overlay .sm-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#sm-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.sm-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sm-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .sm-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes sm-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.sm-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.sm-complete-card .sm-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.sm-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.sm-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: sm-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes sm-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.sm-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.sm-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .sm-complete-stat {
background: var(--color-dark-bg-secondary);
}

.sm-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.sm-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.sm-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.sm-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .sm-back-link {
color: var(--color-dark-text-secondary);
}

.sm-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.sm-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.sm-level-up-toast.sm-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#speed-match-game {
padding: 0.5rem;
}
.sm-symbol {
font-size: 5rem;
}
.sm-action-btn {
padding: 0.75rem;
font-size: 1rem;
}
.sm-header {
padding: 0.5rem;
gap: 0.25rem;
}
.sm-stat-value {
font-size: 1rem;
}
#sm-instructions { padding: 0.75rem 0.5rem; }
#sm-instructions .sm-icon { font-size: 2rem; margin-bottom: 0; }
#sm-instructions h2 { font-size: 1.3rem; }
#sm-instructions .sm-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#sm-instructions .sm-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#sm-instructions .sm-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.sm-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#speed-match-game {
padding: 0.75rem;
}
.sm-symbol {
font-size: 6rem;
}
.sm-action-btn {
padding: 0.875rem;
}
}
@media (max-width: 360px) {
.sm-symbol {
font-size: 4rem;
}
.sm-action-btn {
padding: 0.625rem;
font-size: 0.9rem;
}
.sm-complete-stats {
grid-template-columns: 1fr 1fr;
}
.sm-final-score {
font-size: 2rem;
}
.sm-header {
padding: 0.375rem;
}
.sm-stat-value {
font-size: 0.9rem;
}
}
@keyframes sm-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.sm-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.sm-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: sm-confetti-fall 2.5s ease-in forwards;
}
.sm-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: sm-glow-fade 1s ease-out forwards;
}
@keyframes sm-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.sm-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: sm-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes sm-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#speed-match-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#speed-match-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #speed-match-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#speed-match-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#speed-match-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="speed-match-game">

<div id="sm-instructions">
<div class="sm-title-row"><span class="sm-icon">&#9889;</span><h2>Speed Match</h2></div>
<p class="sm-subtitle">Wie schnell kannst du verarbeiten?</p>
<div class="sm-how-to">
<h3>Wie man spielt</h3>
<ol>
<li>Jede Runde erscheint ein Symbol auf dem Bildschirm.</li>
<li>Entscheide, ob es mit dem Symbol der vorherigen Runde <strong>übereinstimmt</strong>.</li>
<li>Klicke auf <strong>Gleich</strong>, wenn es übereinstimmt, <strong>Anders</strong>, wenn nicht.</li>
<li>Antworte bevor die Zeit abläuft, sonst zählt es als falsch!</li>
<li>Wenn du aufsteigst, wird das Spiel schneller und schwieriger.</li>
</ol>
</div>
<div class="sm-kbd-hints">
<span class="sm-kbd-hint"><span class="sm-kbd">1</span> Anders</span>
<span class="sm-kbd-hint"><span class="sm-kbd">2</span> Gleich</span>
<span class="sm-kbd-hint"><span class="sm-kbd">Esc</span> Pause</span>
</div>
<div id="sm-best-display" class="sm-personal-best" style="display:none;">
Persönlicher Rekord: <strong id="sm-best-score">0</strong> Punkte
</div>
<button class="sm-btn-primary" id="sm-start-btn">Spiel starten</button>
<div id="sm-challenge-banner-wrap"></div>
</div>

<div id="sm-wizard">
<div id="sm-wizard-card"></div>
</div>

<div id="sm-playing">
<div class="sm-header">
<div class="sm-stat">
<div class="sm-stat-label">Punkte</div>
<div class="sm-stat-value" id="sm-score">0</div>
</div>
<div class="sm-stat">
<div class="sm-stat-label">Serie</div>
<div class="sm-stat-value" id="sm-streak">0</div>
</div>
<div class="sm-stat">
<div class="sm-stat-label">Level</div>
<div class="sm-stat-value" id="sm-level">1</div>
</div>
</div>
<div class="sm-level-info">
<span class="sm-level-text">Level <span id="sm-level-text">1</span></span>
<span class="sm-nback-badge" id="sm-nback-badge">1-Back</span>
</div>
<div class="sm-progress-bar">
<div class="sm-progress-fill" id="sm-progress-fill" style="width:0%"></div>
</div>
<div class="sm-timer-bar">
<div class="sm-timer-fill" id="sm-timer-fill" style="width:100%"></div>
</div>
<div class="sm-symbol-area">
<div class="sm-feedback-flash" id="sm-feedback-flash"></div>
<div class="sm-feedback-icon" id="sm-feedback-icon"></div>
<div class="sm-symbol" id="sm-symbol"></div>
</div>
<div class="sm-actions">
<button class="sm-action-btn sm-btn-different" id="sm-btn-different">
<span class="sm-btn-icon">&#10007;</span>
<span>Anders</span>
<span class="sm-btn-kbd">1</span>
</button>
<button class="sm-action-btn sm-btn-same" id="sm-btn-same">
<span class="sm-btn-icon">&#10003;</span>
<span>Gleich</span>
<span class="sm-btn-kbd">2</span>
</button>
</div>
<div class="sm-playing-kbd-hint"><strong>Esc</strong> Pause</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="sm-pause-btn" type="button">Pause</button>
<button class="gk-finish-btn" id="sm-finish-btn" type="button">Spiel beenden</button>
</div>
</div>

<div id="sm-pause-overlay">
<div class="sm-pause-text">Pausiert</div>
<button class="sm-btn-primary" id="sm-resume-btn">Fortsetzen</button>
</div>

<div id="sm-complete-overlay">
<div class="sm-complete-card">
<button class="gk-complete-close" id="sm-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="sm-trophy">&#127942;</div>
<h2>Spiel beendet!</h2>
<div class="sm-final-score" id="sm-final-score">0</div>
<div id="sm-new-best" class="sm-new-best" style="display:none;">&#11088; Neuer Rekord!</div>
<div class="gk-challenge-result" id="sm-challenge-result" style="display:none;"></div>
<div class="sm-complete-stats">
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Level erreicht</div>
<div class="sm-complete-stat-value" id="sm-final-level">1</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Genauigkeit</div>
<div class="sm-complete-stat-value" id="sm-final-accuracy">0%</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Serie</div>
<div class="sm-complete-stat-value" id="sm-final-streak">0</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Persönlicher Rekord</div>
<div class="sm-complete-stat-value" id="sm-final-best">0</div>
</div>
</div>
<div class="sm-complete-actions">
<button class="sm-btn-primary" id="sm-play-again-btn">Nochmal spielen</button>
<button class="gk-runtime-history-toggle" id="sm-history-toggle" type="button">Show History</button>
<a href="/de/games/" class="sm-back-link">&larr; Alle Spiele</a>
</div>
<div class="gk-runtime-history-panel" id="sm-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="sm-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="sm-share-btn">&#128279; Teile dein Ergebnis</button>
<div class="gk-share-copied" id="sm-share-copied" style="display:none;">Kopiert!</div>
</div>
</div>
</div>

<div class="sm-level-up-toast" id="sm-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var SYMBOLS = ['\u25C6', '\u25CF', '\u25A0', '\u25B2', '\u2605', '\u2666', '\u2660', '\u2663', '\u2665', '\u2B1F', '\u2B21', '\u25EF'];
var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_speed-match_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('sm-history-toggle', 'sm-history-panel', 'sm-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
symbolHistory: [],
currentSymbol: '',
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('sm-instructions');
var elWizard = document.getElementById('sm-wizard');
var elWizardCard = document.getElementById('sm-wizard-card');
var elPlaying = document.getElementById('sm-playing');
var elPauseOverlay = document.getElementById('sm-pause-overlay');
var elCompleteOverlay = document.getElementById('sm-complete-overlay');
var elScore = document.getElementById('sm-score');
var elStreak = document.getElementById('sm-streak');
var elLevel = document.getElementById('sm-level');
var elLevelText = document.getElementById('sm-level-text');
var elNbackBadge = document.getElementById('sm-nback-badge');
var elProgressFill = document.getElementById('sm-progress-fill');
var elTimerFill = document.getElementById('sm-timer-fill');
var elSymbol = document.getElementById('sm-symbol');
var elFeedbackFlash = document.getElementById('sm-feedback-flash');
var elFeedbackIcon = document.getElementById('sm-feedback-icon');
var elFinalScore = document.getElementById('sm-final-score');
var elNewBest = document.getElementById('sm-new-best');
var elFinalLevel = document.getElementById('sm-final-level');
var elFinalAccuracy = document.getElementById('sm-final-accuracy');
var elFinalStreak = document.getElementById('sm-final-streak');
var elFinalBest = document.getElementById('sm-final-best');
var elBestDisplay = document.getElementById('sm-best-display');
var elBestScore = document.getElementById('sm-best-score');
var elLevelToast = document.getElementById('sm-level-toast');
var btnStart = document.getElementById('sm-start-btn');
var btnDifferent = document.getElementById('sm-btn-different');
var btnSame = document.getElementById('sm-btn-same');
var btnResume = document.getElementById('sm-resume-btn');
var btnPlayAgain = document.getElementById('sm-play-again-btn');

/* ── Level parameters ── */
function getNBack(lvl) {
return lvl <= 10 ? 1 : 2;
}

function getDisplayTime(lvl) {
return Math.max(2500 - lvl * 100, 800);
}

function getSymbolCount(lvl) {
return Math.min(6 + Math.floor(lvl / 3), 12);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Pick a random symbol ── */
function pickSymbol() {
var count = getSymbolCount(state.level);
var pool = SYMBOLS.slice(0, count);
return pool[Math.floor(Math.random() * pool.length)];
}

/* ── Determine if current symbol matches nBack ── */
function isMatch() {
var nBack = getNBack(state.level);
var idx = state.symbolHistory.length - 1 - nBack;
if (idx < 0) return false;
return state.symbolHistory[idx] === state.currentSymbol;
}

function hasComparisonTarget() {
return state.symbolHistory.length > getNBack(state.level);
}

function setAnswerButtonsEnabled(enabled) {
btnDifferent.disabled = !enabled;
btnSame.disabled = !enabled;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
var nBack = getNBack(state.level);
elNbackBadge.textContent = nBack + '-Back';
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('sm-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('sm-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('sm-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'sm-feedback-flash';
elFeedbackIcon.className = 'sm-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('sm-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('sm-show-check');
} else {
elFeedbackFlash.classList.add('sm-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('sm-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'sm-feedback-flash';
elFeedbackIcon.className = 'sm-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('sm-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('sm-toast-show');
}, 1500);
}

function expectedSameForCurrentRound() {
if (!hasComparisonTarget()) return false;
return isMatch();
}

function sameLabel(value) {
if (value === null || value === undefined) return 'No answer';
return value ? 'Same' : 'Different';
}

function recordSpeedHistory(userSaidSame, correct) {
var expected = expectedSameForCurrentRound();
var html = '<strong>' + runHistory.escape(getNBack(state.level) + '-Back') + '</strong>';
html += '<div class="gk-runtime-history-sub">Symbol: ' + runHistory.escape(state.currentSymbol) + '</div>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(sameLabel(userSaidSame)) + ' | Correct: ' + runHistory.escape(sameLabel(expected)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(userSaidSame) {
if (state.answered || state.gameOver || !hasComparisonTarget()) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var matchResult = isMatch();
var correct = (userSaidSame === matchResult);

state.totalAnswered++;
recordSpeedHistory(userSaidSame, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.symbolHistory = [];
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;

if (!hasComparisonTarget()) {
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 150);
return;
}
state.totalAnswered++;
state.streak = 0;
recordSpeedHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.symbolHistory = [];
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;
state.currentSymbol = pickSymbol();
state.symbolHistory.push(state.currentSymbol);

elSymbol.textContent = state.currentSymbol;
elSymbol.style.animation = 'none';
void elSymbol.offsetWidth;
elSymbol.style.animation = '';

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();
setAnswerButtonsEnabled(hasComparisonTarget());

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'sm-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'sm-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'sm-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.sm-trophy');
var title = document.querySelector('#sm-complete-overlay .sm-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'FANTASTISCH!';
elNewBest.className = 'sm-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F FANTASTISCH! Neuer Rekord!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Gut gemacht!';
elNewBest.className = 'sm-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('sm-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
/* Restart the current round's timer with full time */
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var SM_WIZARD_STEPS = [
{icon: '\u2728', title: 'Ein Symbol erscheint auf dem Bildschirm', desc: 'Jede Runde zeigt ein Symbol. Beobachte es!'},
{icon: '\u2194\uFE0F', title: 'Gleich oder Anders?', desc: 'Stimmt es mit dem vorherigen überein? Tippe zum Antworten.'},
{icon: '\u26A1', title: 'Schnell', desc: 'Reagiere bevor die Zeit abläuft.', final: true}
];
var smWizardStep = 0;

function renderWizardStep() {
var s = SM_WIZARD_STEPS[smWizardStep];
var dotsHtml = '';
for (var i = 0; i < SM_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="sm-wizard-dot' + (i === smWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Spiel starten' : 'Weiter';
elWizardCard.innerHTML =
'<div class="sm-wizard-icon">' + s.icon + '</div>' +
'<div class="sm-wizard-title">' + s.title + '</div>' +
'<div class="sm-wizard-desc">' + s.desc + '</div>' +
'<div class="sm-wizard-dots">' + dotsHtml + '</div>' +
'<button class="sm-wizard-btn" id="sm-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'sm-wizard-enter 0.3s ease-out';
document.getElementById('sm-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (smWizardStep < SM_WIZARD_STEPS.length - 1) {
smWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
smWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.symbolHistory = [];
state.currentSymbol = '';
runHistory.clear();
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sm-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('sm-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

btnDifferent.addEventListener('click', function() {
processAnswer(false);
});

btnSame.addEventListener('click', function() {
processAnswer(true);
});

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('sm-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('sm-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('sm-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('sm-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Speed Match', '/de/games/speed-match/', 'sm-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key === '1') {
e.preventDefault();
processAnswer(false);
} else if (e.key === '2') {
e.preventDefault();
processAnswer(true);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('sm-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Fokus & Klarheit
URL: https://guruka.com/de/meditate/focus-and-clarity/
Description: Lass den Lärm hinter dir. Schärfe deinen Geist.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/de/meditate/focus-and-clarity/');
</script>

### Dankbarkeit
URL: https://guruka.com/de/meditate/gratitude/
Description: Finde, was schon gut ist.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/de/meditate/gratitude/');
</script>

### Liebende Güte
URL: https://guruka.com/de/meditate/loving-kindness/
Description: Schenke Wärme, zuerst dir selbst.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/de/meditate/loving-kindness/');
</script>

### Aurora - Visualisierung mit Affirmationen
URL: https://guruka.com/de/visuals/aurora/
Description: Fließende Nordlicht-Farbbänder über den Bildschirm. Eigenen Affirmationstext hinzufügen, privat im Browser gespeichert.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #020810;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/de/visuals/" class="vp-back">&larr; Alle Visualisierungen</a>
<h1 class="vp-title">Aurora</h1>
<p class="vp-desc">Fließende Nordlichter.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#22d3ee,#10b981)"></div>
<span>Arktis</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#a855f7,#ec4899)"></div>
<span>Kosmisch</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f472b6,#eab308)"></div>
<span>Morgenröte</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Affirmationstext (optional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">Vorlagen <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optional. Affirmationen hier eingeben. Text wird Zeile für Zeile angezeigt."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Tempo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Starten</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Tippe irgendwo, um zu beenden</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'aurora';
var currentAffId = null;
var paceLabels = ["Sehr langsam","Langsam","Normal","Schnell","Sehr schnell"];
var currentPace = 2;
var schemes = [
{ name:'Arctic', bg:'#020810',
bands:[
{colors:['#22d3ee','#06b6d4'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#10b981','#059669'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#22d3ee','#14b8a6'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#34d399','#06b6d4'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#67e8f9','#a7f3d0'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]},
{ name:'Cosmic', bg:'#0a0510',
bands:[
{colors:['#a855f7','#7c3aed'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#ec4899','#be185d'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#c084fc','#e879f9'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#8b5cf6','#d946ef'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#f0abfc','#c4b5fd'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]},
{ name:'Dawn', bg:'#100805',
bands:[
{colors:['#f472b6','#fb923c'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#eab308','#f59e0b'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#fb7185','#fbbf24'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#f9a8d4','#fcd34d'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#fda4af','#fde68a'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]}
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var offCanvas, offCtx, halfW, halfH;

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Keine',text:''},
{title:'Ruhe & Klarheit',text:'Mein Geist ist ruhig und klar\nIch lasse los, was ich nicht kontrollieren kann\nIch bin in diesem Moment präsent'},
{title:'Selbstvertrauen',text:'Ich glaube an mich und meine Fähigkeiten\nIch bin guter Dinge würdig\nIch werde jeden Tag stärker'},
{title:'Loslassen',text:'Ich lasse los, was mir nicht mehr dient\nIch vergebe mir selbst und anderen\nIch schaffe Raum für Frieden'},
{title:'Dankbarkeit',text:'Ich bin dankbar für diesen Moment\nFülle fließt in mein Leben\nIch schätze die einfachen Dinge'},
{title:'Fokus & Energie',text:'Mein Fokus ist scharf und beständig\nIch lenke meine Energie mit Absicht\nIch gehe mit Vorsatz voran'},
{title:'Schlaf & Ruhe',text:'Ich erlaube mir zu ruhen\nMein Körper entspannt sich mit jedem Atemzug\nIch gleite in friedlichen Schlaf'},
{title:'Rauchen aufhören',text:'Meine Lungen werden jeden Tag reiner\nIch bin stärker als jedes Verlangen\nJeder Atemzug ist ein Sieg'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Text löschen') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var time = t / 1000;

// Parse background color for smoothstep
var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);

if (reducedMotion) {
ctx.globalAlpha = 1;
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);
for (var b = 0; b < s.bands.length; b++) {
var band = s.bands[b];
var y = H * band.baseY;
var grad = ctx.createLinearGradient(0, y - H * 0.1, 0, y + H * 0.15);
grad.addColorStop(0, band.colors[0] + '00');
grad.addColorStop(0.3, band.colors[0] + hexAlpha(band.alpha));
grad.addColorStop(0.7, band.colors[1] + hexAlpha(band.alpha * 0.7));
grad.addColorStop(1, band.colors[1] + '00');
ctx.shadowColor = band.colors[0];
ctx.shadowBlur = 15;
ctx.fillStyle = grad;
ctx.fillRect(0, y - H * 0.1, W, H * 0.25);
}
ctx.shadowBlur = 0;
return;
}

var scaleX = halfW / W, scaleY = halfH / H;

// 1. Clear offscreen with background
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// 2. Draw bands on offscreen with 'screen' compositing
offCtx.save();
offCtx.globalCompositeOperation = 'screen';

for (var b = 0; b < s.bands.length; b++) {
var band = s.bands[b];
var pulse = 0.75 + 0.25 * Math.sin(time * 0.08 + b * 0.7);
var vertOsc = Math.sin(time * 0.04 + b * 1.1) * 0.04;
offCtx.beginPath();

var baseY = halfH * (band.baseY + vertOsc);
var amp = halfH * band.amp;
for (var x = 0; x <= halfW; x += 3) {
var realX = x / scaleX;
var noise1 = Math.sin(realX * band.freq + time * band.speed);
var noise2 = Math.sin(realX * band.freq * 1.7 + time * band.speed * 0.6 + 2.1);
var noise3 = Math.sin(realX * band.freq * 0.5 + time * band.speed * 1.3 + 4.3);
var y = baseY + amp * (noise1 * 0.5 + noise2 * 0.3 + noise3 * 0.2);
if (x === 0) offCtx.moveTo(x, y);
else offCtx.lineTo(x, y);
}

offCtx.lineTo(halfW, halfH * (band.baseY + vertOsc + 0.25));
offCtx.lineTo(0, halfH * (band.baseY + vertOsc + 0.25));
offCtx.closePath();

var grad = offCtx.createLinearGradient(0, baseY - amp, 0, baseY + halfH * 0.25);
grad.addColorStop(0, band.colors[0] + hexAlpha(band.alpha * 0.3 * pulse));
grad.addColorStop(0.3, band.colors[0] + hexAlpha(band.alpha * pulse));
grad.addColorStop(0.7, band.colors[1] + hexAlpha(band.alpha * 0.6 * pulse));
grad.addColorStop(1, band.colors[1] + '00');
offCtx.fillStyle = grad;
offCtx.fill();
}

offCtx.restore();

// 3. Smoothstep threshold on offscreen pixel data
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// 4. Upscale to main canvas with smoothing
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

// 5. Draw stars on main canvas at full resolution (stays crisp)
for (var i = 0; i < 60; i++) {
var sx = (Math.sin(i * 127.1 + 311.7) * 0.5 + 0.5) * W;
var sy = (Math.sin(i * 269.5 + 183.3) * 0.5 + 0.5) * H * 0.6;
var sa = 0.2 + 0.3 * Math.abs(Math.sin(time * 0.5 + i));
ctx.beginPath();
ctx.arc(sx, sy, 0.8, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,255,255,' + sa + ')';
ctx.fill();
}

animId = requestAnimationFrame(draw);
}

function hexAlpha(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Reduzierte Bewegung aktiviert · Statische Ansicht<br>Tippe irgendwo, um zu beenden';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Zellteilung - Visualisierung mit Affirmationen
URL: https://guruka.com/de/visuals/dividing-cells/
Description: Zellen, die in einer meditativen Schleife wachsen und sich teilen. Eigenen Affirmationstext hinzufügen, privat im Browser gespeichert.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"].vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"].vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #050a12;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme,.vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"].vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"].vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"].vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"].vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"].vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header.vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"].vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"].vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"].vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"].vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/de/visuals/" class="vp-back">&larr; Alle Visualisierungen</a>
<h1 class="vp-title">Zellteilung</h1>
<p class="vp-desc">Zellen, die sich endlos teilen.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#22d3ee,#14b8a6)"></div>
<span>Biolumineszenz</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#fb923c,#f97316)"></div>
<span>Organisch</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#94a3b8,#e2e8f0)"></div>
<span>Mikroskop</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Affirmationstext (optional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">Vorlagen <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optional. Affirmationen hier eingeben. Text wird Zeile für Zeile angezeigt."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Tempo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Starten</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Tippe irgendwo, um zu beenden</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'dividing-cells';
var currentAffId = null;
var paceLabels = ["Sehr langsam","Langsam","Normal","Schnell","Sehr schnell"];
var currentPace = 2;
var schemes = [
{ name:'Bioluminescent', bg:'#050a12',
colors:['#22d3ee','#14b8a6','#06b6d4','#2dd4bf','#67e8f9','#5eead4'] },
{ name:'Organic', bg:'#0a0808',
colors:['#fb923c','#f97316','#fbbf24','#f59e0b','#fdba74','#fcd34d'] },
{ name:'Microscope', bg:'#020508',
colors:['#94a3b8','#cbd5e1','#64748b','#e2e8f0','#475569','#f1f5f9'] }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var maxVisible = 8;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var offCanvas, offCtx, halfW, halfH;

// State
var centerCell = null; // the cell currently growing/dividing at center
var daughters = []; // drifting daughter cells
var cycleState = 'GROWING_AT_CENTER'; // GROWING_AT_CENTER, DIVIDING, STAGING_PAUSE
var pauseTimer = 0;
var nextId = 0;

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Keine',text:''},
{title:'Ruhe & Klarheit',text:'Mein Geist ist ruhig und klar\nIch lasse los, was ich nicht kontrollieren kann\nIch bin in diesem Moment präsent'},
{title:'Selbstvertrauen',text:'Ich glaube an mich und meine Fähigkeiten\nIch bin guter Dinge würdig\nIch werde jeden Tag stärker'},
{title:'Loslassen',text:'Ich lasse los, was mir nicht mehr dient\nIch vergebe mir selbst und anderen\nIch schaffe Raum für Frieden'},
{title:'Dankbarkeit',text:'Ich bin dankbar für diesen Moment\nFülle fließt in mein Leben\nIch schätze die einfachen Dinge'},
{title:'Fokus & Energie',text:'Mein Fokus ist scharf und beständig\nIch lenke meine Energie mit Absicht\nIch gehe mit Vorsatz voran'},
{title:'Schlaf & Ruhe',text:'Ich erlaube mir zu ruhen\nMein Körper entspannt sich mit jedem Atemzug\nIch gleite in friedlichen Schlaf'},
{title:'Rauchen aufhören',text:'Meine Lungen werden jeden Tag reiner\nIch bin stärker als jedes Verlangen\nJeder Atemzug ist ein Sieg'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Text löschen') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
}

function makeOrganelles() {
var orgs = [];
var count = 2 + Math.floor(Math.random() * 2);
for (var i = 0; i < count; i++) {
orgs.push({
dist: 0.3 + Math.random() * 0.35,
angle: Math.random() * Math.PI * 2,
speed: (0.0003 + Math.random() * 0.0004) * (Math.random() < 0.5 ? 1 : -1),
size: 0.06 + Math.random() * 0.04
});
}
return orgs;
}

function spawnCenterCell() {
var W = canvas.width, H = canvas.height;
var minDim = Math.min(W, H);
var targetR = minDim * (0.06 + Math.random() * 0.02);
centerCell = {
id: nextId++,
x: W / 2,
y: H / 2,
r: targetR * 0.15,
targetR: targetR,
divAngle: Math.random() * Math.PI * 2,
colorIdx: Math.floor(Math.random() * 6),
divProgress: 0,
organelles: makeOrganelles(),
opacity: 0.7,
growTimer: 0
};
cycleState = 'GROWING_AT_CENTER';
}

function spawnDaughter(x, y, r, angle, colorIdx, organelles) {
daughters.push({
id: nextId++,
x: x,
y: y,
r: r,
vx: Math.cos(angle) * 0.15,
vy: Math.sin(angle) * 0.15,
phase: Math.random() * Math.PI * 2,
colorIdx: colorIdx,
organelles: organelles,
opacity: 1,
age: 0,
fading: false,
fadeAge: 0
});
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var scaleX = halfW / W, scaleY = halfH / H, scaleR = Math.min(scaleX, scaleY);

var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);

if (reducedMotion) {
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);
offCtx.globalCompositeOperation = 'lighter';
// Draw a center cell mid-division and a couple daughters
var midR = Math.min(W, H) * 0.07;
var ci = 0;
// Two sub-blobs for figure-8
var sep = midR * 0.6;
var a = Math.PI * 0.25;
for (var bi = 0; bi < 2; bi++) {
var bx = (W / 2 + Math.cos(a) * sep * (bi === 0 ? 1 : -1)) * scaleX;
var by = (H / 2 + Math.sin(a) * sep * (bi === 0 ? 1 : -1)) * scaleY;
var br = midR * 0.7 * scaleR;
var grad = offCtx.createRadialGradient(bx, by, 0, bx, by, br * 1.8);
grad.addColorStop(0, s.colors[ci] + 'ff');
grad.addColorStop(0.5, s.colors[ci] + 'cc');
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(bx, by, br * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
// Two static daughters
var dPositions = [[W * 0.25, H * 0.35], [W * 0.72, H * 0.65]];
for (var di = 0; di < 2; di++) {
var dx = dPositions[di][0] * scaleX, dy = dPositions[di][1] * scaleY;
var dr = midR * 0.5 * scaleR;
var grad = offCtx.createRadialGradient(dx, dy, 0, dx, dy, dr * 1.8);
grad.addColorStop(0, s.colors[2] + 'cc');
grad.addColorStop(0.5, s.colors[2] + '99');
grad.addColorStop(1, s.colors[2] + '00');
offCtx.beginPath();
offCtx.arc(dx, dy, dr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
offCtx.globalCompositeOperation = 'source-over';
// Smoothstep
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) { d[j + 3] = 255; }
else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else { d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255; }
}
offCtx.putImageData(imgData, 0, 0);
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);
// Draw nuclei on the two figure-8 blobs
for (var bi = 0; bi < 2; bi++) {
var nx = W / 2 + Math.cos(a) * sep * (bi === 0 ? 1 : -1);
var ny = H / 2 + Math.sin(a) * sep * (bi === 0 ? 1 : -1);
drawNucleus(nx, ny, midR * 0.7, s, ci, t, true);
}
for (var di = 0; di < 2; di++) {
drawNucleus(dPositions[di][0], dPositions[di][1], midR * 0.5, s, 2, t, true);
}
return;
}

// --- UPDATE LOGIC ---

// Force-fade oldest daughters if over max
while (daughters.length > maxVisible) {
var oldest = daughters[0];
oldest.fading = true;
oldest.opacity -= 0.05;
if (oldest.opacity <= 0) daughters.shift();
else break;
}

// Update daughters
for (var i = daughters.length - 1; i >= 0; i--) {
var dc = daughters[i];
dc.age++;

// Sinusoidal wobble drift
dc.x += dc.vx + Math.sin(t * 0.0002 + dc.phase) * 0.06;
dc.y += dc.vy + Math.cos(t * 0.00015 + dc.phase + 1) * 0.06;
dc.vx *= 0.997;
dc.vy *= 0.997;

// Soft boundary bounce
if (dc.x - dc.r < 0) { dc.x = dc.r; dc.vx = Math.abs(dc.vx) * 0.5; }
if (dc.x + dc.r > W) { dc.x = W - dc.r; dc.vx = -Math.abs(dc.vx) * 0.5; }
if (dc.y - dc.r < 0) { dc.y = dc.r; dc.vy = Math.abs(dc.vy) * 0.5; }
if (dc.y + dc.r > H) { dc.y = H - dc.r; dc.vy = -Math.abs(dc.vy) * 0.5; }

// Start fading after ~18 seconds (1080 frames at 60fps)
if (dc.age > 1080 && !dc.fading) dc.fading = true;
if (dc.fading) {
dc.opacity -= 0.003;
if (dc.opacity <= 0) { daughters.splice(i, 1); continue; }
}
}

// Daughter-daughter repulsion
for (var i = 0; i < daughters.length; i++) {
for (var j = i + 1; j < daughters.length; j++) {
var a = daughters[i], b = daughters[j];
var dx = b.x - a.x, dy = b.y - a.y;
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
var minDist = a.r + b.r + 6;
if (dist < minDist) {
var force = (minDist - dist) * 0.015;
var nx = dx / dist, ny = dy / dist;
a.vx -= nx * force; a.vy -= ny * force;
b.vx += nx * force; b.vy += ny * force;
}
}
}

// Center cell lifecycle
if (cycleState === 'GROWING_AT_CENTER') {
if (!centerCell) spawnCenterCell();
var cc = centerCell;
// Grow from tiny to targetR over ~3s (180 frames)
cc.growTimer++;
var growProgress = Math.min(1, cc.growTimer / 180);
// Ease out
growProgress = 1 - (1 - growProgress) * (1 - growProgress);
cc.r = cc.targetR * (0.15 + 0.85 * growProgress);
// Subtle breathing wobble at center
cc.x = W / 2 + Math.sin(t * 0.001) * 1.5;
cc.y = H / 2 + Math.cos(t * 0.0008) * 1.5;

if (cc.growTimer >= 180) {
cycleState = 'DIVIDING';
cc.divProgress = 0;
}
} else if (cycleState === 'DIVIDING') {
var cc = centerCell;
// divProgress 0→1 over ~12s: 0.0014/frame * 60fps ≈ 0.084/s → ~12s
cc.divProgress += 0.0014;
// Keep at center with wobble
cc.x = W / 2 + Math.sin(t * 0.001) * 1.5;
cc.y = H / 2 + Math.cos(t * 0.0008) * 1.5;

if (cc.divProgress >= 1) {
// Spawn two daughters
var angle = cc.divAngle;
var sepDist = cc.r * 0.9;
var newR = cc.r * 0.55;
spawnDaughter(cc.x + Math.cos(angle) * sepDist, cc.y + Math.sin(angle) * sepDist, newR, angle, cc.colorIdx, makeOrganelles());
spawnDaughter(cc.x - Math.cos(angle) * sepDist, cc.y - Math.sin(angle) * sepDist, newR, angle + Math.PI, cc.colorIdx, makeOrganelles());
centerCell = null;
cycleState = 'STAGING_PAUSE';
pauseTimer = 0;
}
} else if (cycleState === 'STAGING_PAUSE') {
pauseTimer++;
// ~1.5s pause (90 frames)
if (pauseTimer >= 90) {
spawnCenterCell();
}
}

// --- RENDER ---

// 1. Clear offscreen
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// 2. Draw additive radial gradients
offCtx.globalCompositeOperation = 'lighter';

// Draw daughters
for (var i = 0; i < daughters.length; i++) {
var dc = daughters[i];
if (dc.opacity <= 0) continue;
var ci = dc.colorIdx % s.colors.length;
var hx = dc.x * scaleX, hy = dc.y * scaleY, hr = dc.r * scaleR;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(dc.opacity));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(dc.opacity * 0.8));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}

// Draw center cell
if (centerCell) {
var cc = centerCell;
var ci = cc.colorIdx % s.colors.length;

if (cycleState === 'DIVIDING') {
// Two sub-blobs with separation based on divProgress
var dp = cc.divProgress;
var sepFactor;
if (dp < 0.3) {
// Elongation phase: 0 → 0.4 * r
sepFactor = (dp / 0.3) * 0.4;
} else if (dp < 0.7) {
// Figure-8 phase: 0.4 → 1.0 * r
sepFactor = 0.4 + ((dp - 0.3) / 0.4) * 0.6;
} else {
// Pinch & split: 1.0 → 1.8 * r (accelerating)
var splitP = (dp - 0.7) / 0.3;
splitP = splitP * splitP; // accelerate
sepFactor = 1.0 + splitP * 0.8;
}

var sep = cc.r * sepFactor;
var a = cc.divAngle;
var x1 = cc.x + Math.cos(a) * sep * 0.5;
var y1 = cc.y + Math.sin(a) * sep * 0.5;
var x2 = cc.x - Math.cos(a) * sep * 0.5;
var y2 = cc.y - Math.sin(a) * sep * 0.5;

// Sub-blob radius: slightly smaller as they separate
var subR = cc.r * (0.75 - dp * 0.15);

var overlapScale = 0.5 + 0.5 * Math.min(1, sepFactor / 1.2);
for (var bi = 0; bi < 2; bi++) {
var bx = (bi === 0 ? x1 : x2) * scaleX;
var by = (bi === 0 ? y1 : y2) * scaleY;
var br = subR * scaleR;
var grad = offCtx.createRadialGradient(bx, by, 0, bx, by, br * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(cc.opacity * overlapScale));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(cc.opacity * 0.8 * overlapScale));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(bx, by, br * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
} else {
// Single blob
var hx = cc.x * scaleX, hy = cc.y * scaleY, hr = cc.r * scaleR;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(cc.opacity));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(cc.opacity * 0.8));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
}

offCtx.globalCompositeOperation = 'source-over';

// 3. Smoothstep threshold
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// 4. Upscale
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

// 5. Draw nuclei and organelles on top at full resolution

// Daughters
for (var i = 0; i < daughters.length; i++) {
var dc = daughters[i];
if (dc.opacity <= 0) continue;
ctx.globalAlpha = dc.opacity;
drawNucleus(dc.x, dc.y, dc.r, s, dc.colorIdx % s.colors.length, t, false);
drawOrganelles(dc.x, dc.y, dc.r, s, dc.colorIdx % s.colors.length, dc.organelles, t, false);
ctx.globalAlpha = 1;
}

// Center cell
if (centerCell) {
var cc = centerCell;
var ci = cc.colorIdx % s.colors.length;
ctx.globalAlpha = cc.opacity;

if (cycleState === 'DIVIDING') {
var dp = cc.divProgress;
var sepFactor;
if (dp < 0.3) sepFactor = (dp / 0.3) * 0.4;
else if (dp < 0.7) sepFactor = 0.4 + ((dp - 0.3) / 0.4) * 0.6;
else { var sp = (dp - 0.7) / 0.3; sp = sp * sp; sepFactor = 1.0 + sp * 0.8; }
var sep = cc.r * sepFactor;
var a = cc.divAngle;
var x1 = cc.x + Math.cos(a) * sep * 0.5;
var y1 = cc.y + Math.sin(a) * sep * 0.5;
var x2 = cc.x - Math.cos(a) * sep * 0.5;
var y2 = cc.y - Math.sin(a) * sep * 0.5;
var subR = cc.r * (0.75 - dp * 0.15);

// Nucleus animation during division
if (dp < 0.25) {
// Elongating single ellipse, draw as stretched nucleus
var nucR = subR * 0.18;
var stretch = 1 + dp * 4;
ctx.save();
ctx.translate(cc.x, cc.y);
ctx.rotate(a);
ctx.scale(stretch, 1 / Math.sqrt(stretch));
drawNucleus(0, 0, subR, s, ci, t, false);
ctx.restore();
} else if (dp < 0.35) {
// Cross-fade from ellipse to two dots
var fadeT = (dp - 0.25) / 0.1;
// Fading single
ctx.globalAlpha = cc.opacity * (1 - fadeT);
drawNucleus(cc.x, cc.y, subR, s, ci, t, false);
// Appearing pair
ctx.globalAlpha = cc.opacity * fadeT;
drawNucleus(x1, y1, subR, s, ci, t, false);
drawNucleus(x2, y2, subR, s, ci, t, false);
ctx.globalAlpha = cc.opacity;
} else {
// Two separate nuclei
drawNucleus(x1, y1, subR, s, ci, t, false);
drawNucleus(x2, y2, subR, s, ci, t, false);
}

// Organelles split between the two halves
var halfOrg = Math.floor(cc.organelles.length / 2);
drawOrganelles(x1, y1, subR, s, ci, cc.organelles.slice(0, halfOrg), t, false);
drawOrganelles(x2, y2, subR, s, ci, cc.organelles.slice(halfOrg), t, false);
} else {
drawNucleus(cc.x, cc.y, cc.r, s, ci, t, false);
drawOrganelles(cc.x, cc.y, cc.r, s, ci, cc.organelles, t, false);
}
ctx.globalAlpha = 1;
}

animId = requestAnimationFrame(draw);
}

function alphaHex(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hexToRgba(hex, a) {
var r = parseInt(hex.slice(1,3), 16);
var g = parseInt(hex.slice(3,5), 16);
var b = parseInt(hex.slice(5,7), 16);
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
}

function drawNucleus(x, y, r, s, ci, t, isStatic) {
var nucR = r * 0.18;
var nucColor = s.colors[(ci + 1) % s.colors.length];
var ng = ctx.createRadialGradient(x, y, 0, x, y, nucR);
ng.addColorStop(0, hexToRgba(nucColor, 0.8));
ng.addColorStop(0.6, hexToRgba(nucColor, 0.35));
ng.addColorStop(1, hexToRgba(nucColor, 0));
ctx.beginPath();
ctx.arc(x, y, nucR, 0, Math.PI * 2);
ctx.fillStyle = ng;
ctx.fill();
}

function drawOrganelles(x, y, r, s, ci, organelles, t, isStatic) {
if (!organelles) return;
for (var k = 0; k < organelles.length; k++) {
var org = organelles[k];
var oAngle = org.angle + (isStatic ? 0 : (t || 0) * org.speed);
var ox = x + Math.cos(oAngle) * r * org.dist;
var oy = y + Math.sin(oAngle) * r * org.dist;
var oSize = r * org.size;
ctx.beginPath();
ctx.arc(ox, oy, oSize, 0, Math.PI * 2);
var orgColor = s.colors[(ci + 2) % s.colors.length];
ctx.fillStyle = hexToRgba(orgColor, 0.4);
ctx.fill();
}
}

function hideNavFooter() {
var header = document.querySelector('header, nav,.site-header, [class*="header"]');
var footer = document.querySelector('footer,.site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav,.site-header, [class*="header"]');
var footer = document.querySelector('footer,.site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
daughters = [];
centerCell = null;
nextId = 0;
spawnCenterCell();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Reduzierte Bewegung aktiviert · Statische Ansicht<br>Tippe irgendwo, um zu beenden';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Atemkugel - Visualisierung mit Affirmationen
URL: https://guruka.com/de/visuals/breathing-orb/
Description: Eine pulsierende Kugel, die deinen Atemrhythmus führt. Eigenen Affirmationstext hinzufügen, privat im Browser gespeichert.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0a0a1a;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/de/visuals/" class="vp-back">&larr; Alle Visualisierungen</a>
<h1 class="vp-title">Atemkugel</h1>
<p class="vp-desc">Pulsierende Kugel, die deinen Atem führt.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#4338ca,#7c3aed)"></div>
<span>Dämmerung</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f97316,#eab308)"></div>
<span>Sonnenaufgang</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#059669,#14b8a6)"></div>
<span>Wald</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Affirmationstext (optional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">Vorlagen <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optional. Affirmationen hier eingeben. Text wird Zeile für Zeile angezeigt."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Tempo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Starten</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Tippe irgendwo, um zu beenden</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'breathing-orb';
var currentAffId = null;
var paceLabels = ["Sehr langsam","Langsam","Normal","Schnell","Sehr schnell"];
var currentPace = 2;
var schemes = [
{ name:'Twilight', bg:'#0a0a1a', orb:['#6366f1','#a78bfa','#4338ca'], particle:'#c4b5fd' },
{ name:'Sunrise', bg:'#1a0a05', orb:['#f97316','#eab308','#dc2626'], particle:'#fcd34d' },
{ name:'Forest', bg:'#051a0a', orb:['#059669','#14b8a6','#065f46'], particle:'#6ee7b7' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

// Scheme buttons
var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Keine',text:''},
{title:'Ruhe & Klarheit',text:'Mein Geist ist ruhig und klar\nIch lasse los, was ich nicht kontrollieren kann\nIch bin in diesem Moment präsent'},
{title:'Selbstvertrauen',text:'Ich glaube an mich und meine Fähigkeiten\nIch bin guter Dinge würdig\nIch werde jeden Tag stärker'},
{title:'Loslassen',text:'Ich lasse los, was mir nicht mehr dient\nIch vergebe mir selbst und anderen\nIch schaffe Raum für Frieden'},
{title:'Dankbarkeit',text:'Ich bin dankbar für diesen Moment\nFülle fließt in mein Leben\nIch schätze die einfachen Dinge'},
{title:'Fokus & Energie',text:'Mein Fokus ist scharf und beständig\nIch lenke meine Energie mit Absicht\nIch gehe mit Vorsatz voran'},
{title:'Schlaf & Ruhe',text:'Ich erlaube mir zu ruhen\nMein Körper entspannt sich mit jedem Atemzug\nIch gleite in friedlichen Schlaf'},
{title:'Rauchen aufhören',text:'Meine Lungen werden jeden Tag reiner\nIch bin stärker als jedes Verlangen\nJeder Atemzug ist ein Sieg'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Text löschen') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

// Particles
var particles = [];
function initParticles() {
particles = [];
for (var i = 0; i < 100; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
r: 1 + Math.random() * 2.5,
vx: (Math.random() - 0.5) * 0.2,
vy: (Math.random() - 0.5) * 0.2,
phase: Math.random() * Math.PI * 2
});
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running && particles.length === 0) initParticles();
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var cx = W / 2, cy = H / 2;

// Background
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);

// Breathing cycle: 6 seconds
var breathT = t / 1000;
var breathPhase = Math.sin(breathT * Math.PI / 6); // -1 to 1, 12s cycle
var scale = 0.85 + 0.15 * breathPhase;

var baseR = Math.min(W, H) * 0.12;
var orbR = baseR * scale;

// Orb glow layers
for (var g = 3; g >= 0; g--) {
var glowR = orbR * (1 + g * 0.6);
var grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, glowR);
var alpha = (0.08 - g * 0.015);
if (alpha < 0) alpha = 0;
grad.addColorStop(0, s.orb[0] + hexAlpha(alpha + 0.05));
grad.addColorStop(0.5, s.orb[1] + hexAlpha(alpha));
grad.addColorStop(1, s.orb[2] + '00');
ctx.beginPath();
ctx.arc(cx, cy, glowR, 0, Math.PI * 2);
ctx.fillStyle = grad;
ctx.fill();
}

// Core orb
var coreGrad = ctx.createRadialGradient(cx - orbR * 0.2, cy - orbR * 0.2, orbR * 0.1, cx, cy, orbR);
coreGrad.addColorStop(0, s.orb[1]);
coreGrad.addColorStop(0.7, s.orb[0]);
coreGrad.addColorStop(1, s.orb[2]);
ctx.beginPath();
ctx.arc(cx, cy, orbR, 0, Math.PI * 2);
ctx.fillStyle = coreGrad;
ctx.globalAlpha = 0.9;
ctx.fill();
ctx.globalAlpha = 1;

// Particles
if (!reducedMotion) {
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
// Drift toward/away from orb matching breath
var dx = p.x - cx, dy = p.y - cy;
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
var breathPull = breathPhase * 0.15;
p.x += p.vx + (dx / dist) * breathPull;
p.y += p.vy + (dy / dist) * breathPull;

// Wrap around
if (p.x < 0) p.x = W;
if (p.x > W) p.x = 0;
if (p.y < 0) p.y = H;
if (p.y > H) p.y = 0;

// Twinkle
var twinkle = 0.3 + 0.7 * Math.abs(Math.sin(breathT * 0.4 + p.phase));
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fillStyle = s.particle;
ctx.globalAlpha = twinkle * 0.6;
ctx.fill();
}
ctx.globalAlpha = 1;
} else {
// Reduced motion: static orb only, no particles
}

animId = requestAnimationFrame(draw);
}

function hexAlpha(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initParticles();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Reduzierte Bewegung aktiviert · Statische Ansicht<br>Tippe irgendwo, um zu beenden';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Schlaf & Abendruhe
URL: https://guruka.com/de/meditate/sleep-and-wind-down/
Description: Lass den Tag los. Ruhe ist genug.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/de/meditate/sleep-and-wind-down/');
</script>

### Lavafluss - Visualisierung mit Affirmationen
URL: https://guruka.com/de/visuals/lava-flow/
Description: Lavatropfen schweben, verschmelzen und trennen sich. Eigenen Affirmationstext hinzufügen, privat im Browser gespeichert.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0d0505;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/de/visuals/" class="vp-back">&larr; Alle Visualisierungen</a>
<h1 class="vp-title">Lavafluss</h1>
<p class="vp-desc">Tropfen, die verschmelzen und sich trennen.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f97316,#ef4444)"></div>
<span>Magma</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#06b6d4,#d946ef)"></div>
<span>Neon</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#059669,#84cc16)"></div>
<span>Smaragd</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Affirmationstext (optional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">Vorlagen <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optional. Affirmationen hier eingeben. Text wird Zeile für Zeile angezeigt."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Tempo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Starten</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Tippe irgendwo, um zu beenden</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'lava-flow';
var currentAffId = null;
var paceLabels = ["Sehr langsam","Langsam","Normal","Schnell","Sehr schnell"];
var currentPace = 2;
var schemes = [
{ name:'Magma', bg:'#0d0505', colors:['#ff4500','#ff6b35','#ffaa00','#ff2200','#ff8c00','#cc3300','#ff5500'] },
{ name:'Neon', bg:'#050510', colors:['#00e5ff','#e040fb','#2979ff','#00bcd4','#d500f9','#448aff','#18ffff'] },
{ name:'Emerald', bg:'#050d08', colors:['#00c853','#1de9b6','#76ff03','#00e676','#64ffda','#69f0ae','#b2ff59'] }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Keine',text:''},
{title:'Ruhe & Klarheit',text:'Mein Geist ist ruhig und klar\nIch lasse los, was ich nicht kontrollieren kann\nIch bin in diesem Moment präsent'},
{title:'Selbstvertrauen',text:'Ich glaube an mich und meine Fähigkeiten\nIch bin guter Dinge würdig\nIch werde jeden Tag stärker'},
{title:'Loslassen',text:'Ich lasse los, was mir nicht mehr dient\nIch vergebe mir selbst und anderen\nIch schaffe Raum für Frieden'},
{title:'Dankbarkeit',text:'Ich bin dankbar für diesen Moment\nFülle fließt in mein Leben\nIch schätze die einfachen Dinge'},
{title:'Fokus & Energie',text:'Mein Fokus ist scharf und beständig\nIch lenke meine Energie mit Absicht\nIch gehe mit Vorsatz voran'},
{title:'Schlaf & Ruhe',text:'Ich erlaube mir zu ruhen\nMein Körper entspannt sich mit jedem Atemzug\nIch gleite in friedlichen Schlaf'},
{title:'Rauchen aufhören',text:'Meine Lungen werden jeden Tag reiner\nIch bin stärker als jedes Verlangen\nJeder Atemzug ist ein Sieg'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Text löschen') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

var blobs = [];
var offCanvas, offCtx, halfW, halfH;

function initBlobs() {
blobs = [];
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
var minDim = Math.min(W, H);
var blobCount = Math.max(9, Math.min(Math.floor(minDim / 100), 15));
for (var i = 0; i < blobCount; i++) {
blobs.push({
x: 0.15 * W + Math.random() * 0.7 * W,
y: Math.random() * H,
vx: (Math.random() - 0.5) * 0.1,
vy: -(0.075 + Math.random() * 0.075),
baseR: minDim * (0.04 + Math.random() * 0.04),
phase: Math.random() * Math.PI * 2
});
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running) initBlobs();
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;

// Clear offscreen
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// Update and draw blobs on offscreen canvas at half res
for (var i = 0; i < blobs.length; i++) {
var b = blobs[i];
var r = b.baseR + Math.sin(t * 0.0004 + b.phase) * 12;

if (!reducedMotion) {
b.x += b.vx + Math.sin(t * 0.000075 + b.phase) * 0.15;
b.y += b.vy + Math.cos(t * 0.0001 + b.phase) * 0.15;

// Wrap vertically: when blob fully exits top, respawn at bottom
if (b.y + r * 2 < 0) {
b.y = H + r * 2;
b.x = 0.15 * W + Math.random() * 0.7 * W;
}
// Soft horizontal wrap
if (b.x < -r) b.x = W + r;
if (b.x > W + r) b.x = -r;
}

// Draw radial gradient blob on offscreen at 3/4 resolution
var scaleX = halfW / W, scaleY = halfH / H;
var hx = b.x * scaleX, hy = b.y * scaleY, hr = r * Math.min(scaleX, scaleY);
var ci = i % s.colors.length;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + 'ff');
grad.addColorStop(0.5, s.colors[ci] + 'cc');
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.globalCompositeOperation = 'lighter';
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
offCtx.globalCompositeOperation = 'source-over';

// Apply smoothstep threshold for metaball effect (smooth edges)
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
// Smoothstep interpolation between background and blob color
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt); // smoothstep
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// Scale up to main canvas
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initBlobs();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Reduzierte Bewegung aktiviert · Statische Ansicht<br>Tippe irgendwo, um zu beenden';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Mandala - Visualisierung mit Affirmationen
URL: https://guruka.com/de/visuals/mandala/
Description: Langsam rotierende heilige Geometrie mit sich entwickelnder Symmetrie. Eigenen Affirmationstext hinzufügen, privat im Browser gespeichert.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0a0808;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/de/visuals/" class="vp-back">&larr; Alle Visualisierungen</a>
<h1 class="vp-title">Mandala</h1>
<p class="vp-desc">Rotierende heilige Geometrie.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#eab308,#f59e0b)"></div>
<span>Golden</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#6366f1,#a855f7)"></div>
<span>Himmlisch</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#14b8a6,#10b981)"></div>
<span>Jade</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Affirmationstext (optional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">Vorlagen <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optional. Affirmationen hier eingeben. Text wird Zeile für Zeile angezeigt."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Tempo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Starten</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Tippe irgendwo, um zu beenden</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'mandala';
var currentAffId = null;
var paceLabels = ["Sehr langsam","Langsam","Normal","Schnell","Sehr schnell"];
var currentPace = 2;
var schemes = [
{ name:'Golden', bg:'#0a0808', stroke:'#d4a017', strokeAlt:'#f5c842', dot:'#fff8dc', bgFill:'rgba(10,8,8,' },
{ name:'Celestial', bg:'#05050f', stroke:'#818cf8', strokeAlt:'#c084fc', dot:'#e0e7ff', bgFill:'rgba(5,5,15,' },
{ name:'Jade', bg:'#050a08', stroke:'#2dd4bf', strokeAlt:'#34d399', dot:'#d1fae5', bgFill:'rgba(5,10,8,' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Keine',text:''},
{title:'Ruhe & Klarheit',text:'Mein Geist ist ruhig und klar\nIch lasse los, was ich nicht kontrollieren kann\nIch bin in diesem Moment präsent'},
{title:'Selbstvertrauen',text:'Ich glaube an mich und meine Fähigkeiten\nIch bin guter Dinge würdig\nIch werde jeden Tag stärker'},
{title:'Loslassen',text:'Ich lasse los, was mir nicht mehr dient\nIch vergebe mir selbst und anderen\nIch schaffe Raum für Frieden'},
{title:'Dankbarkeit',text:'Ich bin dankbar für diesen Moment\nFülle fließt in mein Leben\nIch schätze die einfachen Dinge'},
{title:'Fokus & Energie',text:'Mein Fokus ist scharf und beständig\nIch lenke meine Energie mit Absicht\nIch gehe mit Vorsatz voran'},
{title:'Schlaf & Ruhe',text:'Ich erlaube mir zu ruhen\nMein Körper entspannt sich mit jedem Atemzug\nIch gleite in friedlichen Schlaf'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Text löschen') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

var rings = [
{ radius: 0.08, folds: 12, speed: 0.00008, dir: 1, type: 'dots' },
{ radius: 0.18, folds: 8, speed: 0.00006, dir: -1, type: 'petals' },
{ radius: 0.30, folds: 12, speed: 0.00004, dir: 1, type: 'lines' },
{ radius: 0.42, folds: 8, speed: 0.00007, dir: -1, type: 'petals' },
{ radius: 0.55, folds: 16, speed: 0.00003, dir: 1, type: 'dots' },
{ radius: 0.68, folds: 12, speed: 0.00005, dir: -1, type: 'lines' },
{title:'Rauchen aufhören',text:'Meine Lungen werden jeden Tag reiner\nIch bin stärker als jedes Verlangen\nJeder Atemzug ist ein Sieg'}
];

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var cx = W / 2, cy = H / 2;
var maxR = Math.min(W, H) * 0.65;

// Trail effect
ctx.fillStyle = s.bgFill + '0.04)';
ctx.fillRect(0, 0, W, H);

var baseAngle = reducedMotion ? 0 : t * 0.00005;

for (var ri = 0; ri < rings.length; ri++) {
var ring = rings[ri];
var ringR = maxR * ring.radius;
var folds = ring.folds;
var angle = reducedMotion ? 0 : baseAngle * ring.dir + t * ring.speed * ring.dir;
var breathe = reducedMotion ? 1 : (1 + 0.15 * Math.sin(t * 0.0005 + ri * 1.2));
var alphaFade = 1 - ri * 0.10;

ctx.save();
ctx.translate(cx, cy);
ctx.rotate(angle);

for (var f = 0; f < folds; f++) {
var fAngle = (f / folds) * Math.PI * 2;
ctx.save();
ctx.rotate(fAngle);

if (ring.type === 'dots') {
var dotR = (3 + Math.sin(t * 0.0008 + ri + f) * 2) * breathe;
ctx.shadowColor = s.stroke;
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.arc(ringR * breathe, 0, dotR, 0, Math.PI * 2);
ctx.fillStyle = s.dot;
ctx.globalAlpha = alphaFade * 0.7;
ctx.fill();
ctx.shadowBlur = 0;
} else if (ring.type === 'petals') {
var petalLen = (20 + Math.sin(t * 0.0006 + ri * 2) * 10) * breathe;
var petalW = (8 + Math.sin(t * 0.0004 + f) * 3) * breathe;
ctx.shadowColor = s.stroke;
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.moveTo(ringR * breathe - petalLen * 0.3, 0);
ctx.quadraticCurveTo(ringR * breathe, -petalW, ringR * breathe + petalLen * 0.7, 0);
ctx.quadraticCurveTo(ringR * breathe, petalW, ringR * breathe - petalLen * 0.3, 0);
ctx.strokeStyle = s.stroke;
ctx.lineWidth = 1.2;
ctx.globalAlpha = alphaFade * 0.6;
ctx.stroke();
ctx.shadowBlur = 0;
} else if (ring.type === 'lines') {
var lineLen = (15 + Math.sin(t * 0.0007 + f * 0.5) * 8) * breathe;
ctx.shadowColor = s.strokeAlt;
ctx.shadowBlur = 3;
ctx.beginPath();
ctx.moveTo(ringR * breathe - lineLen, 0);
ctx.lineTo(ringR * breathe + lineLen, 0);
ctx.strokeStyle = s.strokeAlt;
ctx.lineWidth = 1;
ctx.globalAlpha = alphaFade * 0.4;
ctx.stroke();
// End dots
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.arc(ringR * breathe - lineLen, 0, 1.5, 0, Math.PI * 2);
ctx.arc(ringR * breathe + lineLen, 0, 1.5, 0, Math.PI * 2);
ctx.fillStyle = s.strokeAlt;
ctx.globalAlpha = alphaFade * 0.5;
ctx.fill();
ctx.shadowBlur = 0;
}

ctx.restore();
}

ctx.restore();
}

// Center dot
ctx.beginPath();
ctx.arc(cx, cy, 4, 0, Math.PI * 2);
ctx.fillStyle = s.dot;
ctx.globalAlpha = 0.8;
ctx.fill();
ctx.globalAlpha = 1;

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
// Clear canvas fully before starting
ctx.fillStyle = schemes[currentScheme].bg;
ctx.fillRect(0, 0, canvas.width, canvas.height);
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Reduzierte Bewegung aktiviert · Statische Ansicht<br>Tippe irgendwo, um zu beenden';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Sternenfeld - Visualisierung mit Affirmationen
URL: https://guruka.com/de/visuals/starfield/
Description: Funkelnde Sterne, die durch den tiefen Weltraum treiben. Eigenen Affirmationstext hinzufügen, privat im Browser gespeichert.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #020510;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/de/visuals/" class="vp-back">&larr; Alle Visualisierungen</a>
<h1 class="vp-title">Sternenfeld</h1>
<p class="vp-desc">Funkelnde Sterne im tiefen Weltraum.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#1e293b,#475569)"></div>
<span>Tiefer Weltraum</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#4c1d95,#a855f7)"></div>
<span>Nebel</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#78350f,#f59e0b)"></div>
<span>Warmer Kosmos</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Affirmationstext (optional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">Vorlagen <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optional. Affirmationen hier eingeben. Text wird Zeile für Zeile angezeigt."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Tempo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Starten</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Tippe irgendwo, um zu beenden</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'starfield';
var currentAffId = null;
var paceLabels = ["Sehr langsam","Langsam","Normal","Schnell","Sehr schnell"];
var currentPace = 2;
var schemes = [
{ name:'Deep Space', bg:'#020510', starColor:'rgba(200,220,255,', glowColor:'rgba(80,100,180,0.015)', shootColor:'rgba(200,220,255,' },
{ name:'Nebula', bg:'#0a0515', starColor:'rgba(220,200,255,', glowColor:'rgba(160,80,200,0.03)', shootColor:'rgba(200,160,255,' },
{ name:'Warm Cosmos', bg:'#0a0805', starColor:'rgba(255,220,160,', glowColor:'rgba(180,120,60,0.015)', shootColor:'rgba(255,200,100,' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Keine',text:''},
{title:'Ruhe & Klarheit',text:'Mein Geist ist ruhig und klar\nIch lasse los, was ich nicht kontrollieren kann\nIch bin in diesem Moment präsent'},
{title:'Selbstvertrauen',text:'Ich glaube an mich und meine Fähigkeiten\nIch bin guter Dinge würdig\nIch werde jeden Tag stärker'},
{title:'Loslassen',text:'Ich lasse los, was mir nicht mehr dient\nIch vergebe mir selbst und anderen\nIch schaffe Raum für Frieden'},
{title:'Dankbarkeit',text:'Ich bin dankbar für diesen Moment\nFülle fließt in mein Leben\nIch schätze die einfachen Dinge'},
{title:'Fokus & Energie',text:'Mein Fokus ist scharf und beständig\nIch lenke meine Energie mit Absicht\nIch gehe mit Vorsatz voran'},
{title:'Schlaf & Ruhe',text:'Ich erlaube mir zu ruhen\nMein Körper entspannt sich mit jedem Atemzug\nIch gleite in friedlichen Schlaf'},
{title:'Rauchen aufhören',text:'Meine Lungen werden jeden Tag reiner\nIch bin stärker als jedes Verlangen\nJeder Atemzug ist ein Sieg'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Text löschen') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

var starsBack = [], starsMid = [], starsFront = [];
var shootingStars = [];
var lastShootTime = 0;

function initStars() {
starsBack = []; starsMid = []; starsFront = [];
shootingStars = [];
var W = canvas.width, H = canvas.height;
for (var i = 0; i < 200; i++) {
starsBack.push({ x: Math.random() * W, y: Math.random() * H, size: 0.5 + Math.random() * 1, baseAlpha: 0.3 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
for (var i = 0; i < 100; i++) {
starsMid.push({ x: Math.random() * W, y: Math.random() * H, size: 1 + Math.random() * 1.5, baseAlpha: 0.4 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
for (var i = 0; i < 50; i++) {
starsFront.push({ x: Math.random() * W, y: Math.random() * H, size: 1.5 + Math.random() * 2, baseAlpha: 0.6 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running) initStars();
}

function drawStarLayer(stars, speed, t, s, W, H) {
for (var i = 0; i < stars.length; i++) {
var st = stars[i];
var twinkle = st.baseAlpha * (0.5 + 0.5 * Math.sin(t * 0.001 + st.phase));
// Glow for larger stars
if (st.size > 2) {
ctx.beginPath();
ctx.arc(st.x, st.y, st.size * 3, 0, Math.PI * 2);
ctx.fillStyle = s.starColor + (twinkle * 0.15).toFixed(3) + ')';
ctx.fill();
}
ctx.beginPath();
ctx.arc(st.x, st.y, st.size, 0, Math.PI * 2);
ctx.fillStyle = s.starColor + twinkle.toFixed(3) + ')';
ctx.fill();
}
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;

ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);

// Subtle center glow
var glow = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.max(W, H) * 0.5);
glow.addColorStop(0, s.glowColor);
glow.addColorStop(1, 'transparent');
ctx.fillStyle = glow;
ctx.fillRect(0, 0, W, H);

// Draw star layers with parallax speeds
drawStarLayer(starsBack, 0.025, t, s, W, H);
drawStarLayer(starsMid, 0.06, t, s, W, H);
drawStarLayer(starsFront, 0.12, t, s, W, H);

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initStars();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Reduzierte Bewegung aktiviert · Statische Ansicht<br>Tippe irgendwo, um zu beenden';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Morgenenergie
URL: https://guruka.com/de/meditate/morning-energy/
Description: Wach sanft auf. Begrüße den Tag.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/de/meditate/morning-energy/');
</script>

### Eugene
URL: https://guruka.com/es/author/eugene/
Description: Eugene, author profile

# Eugene

Eugene is a contributor to this publication.

### Escaneo Corporal y Liberación de Tensión
URL: https://guruka.com/es/meditate/body-scan-and-tension-release/
Description: Observa. Suelta. Vuelve a casa en tu cuerpo.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/es/meditate/body-scan-and-tension-release/');
</script>

### Calma y Alivio del Estrés
URL: https://guruka.com/es/meditate/calm-and-stress-relief/
Description: Libera la tensión. Vuelve a ti.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/es/meditate/calm-and-stress-relief/');
</script>

### Enfoque y Claridad
URL: https://guruka.com/es/meditate/focus-and-clarity/
Description: Despeja el ruido. Afila tu mente.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/es/meditate/focus-and-clarity/');
</script>

### Bondad Amorosa
URL: https://guruka.com/es/meditate/loving-kindness/
Description: Ofrece calidez, primero a ti mismo.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/es/meditate/loving-kindness/');
</script>

### Gratitud
URL: https://guruka.com/es/meditate/gratitude/
Description: Encuentra lo que ya es bueno.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/es/meditate/gratitude/');
</script>

### Sueño y Descanso
URL: https://guruka.com/es/meditate/sleep-and-wind-down/
Description: Deja ir el día. Descansar es suficiente.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/es/meditate/sleep-and-wind-down/');
</script>

### Energía Matutina
URL: https://guruka.com/es/meditate/morning-energy/
Description: Despierta con suavidad. Saluda al día.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/es/meditate/morning-energy/');
</script>

### Aurora - Visual Meditativa
URL: https://guruka.com/es/visuals/aurora/
Description: Bandas de colores de auroras boreales fluyendo por la pantalla. Añade tu propio texto de afirmación, almacenado de forma privada en tu navegador.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #020810;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/es/visuals/" class="vp-back">&larr; Todas las Visuales</a>
<h1 class="vp-title">Aurora</h1>
<p class="vp-desc">Luces del norte fluyendo.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#22d3ee,#10b981)"></div>
<span>Ártico</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#a855f7,#ec4899)"></div>
<span>Cósmico</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f472b6,#eab308)"></div>
<span>Alba</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texto de afirmación (opcional)</label><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">preajustes <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="opcional. Introduce afirmaciones aquí. El texto se mostrará línea por línea."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Ritmo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Iniciar</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Toca en cualquier lugar para salir</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'aurora';
var currentAffId = null;
var paceLabels = ["Muy lento","Lento","Normal","Rápido","Muy rápido"];
var currentPace = 2;
var schemes = [
{ name:'Arctic', bg:'#020810',
bands:[
{colors:['#22d3ee','#06b6d4'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#10b981','#059669'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#22d3ee','#14b8a6'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#34d399','#06b6d4'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#67e8f9','#a7f3d0'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]},
{ name:'Cosmic', bg:'#0a0510',
bands:[
{colors:['#a855f7','#7c3aed'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#ec4899','#be185d'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#c084fc','#e879f9'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#8b5cf6','#d946ef'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#f0abfc','#c4b5fd'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]},
{ name:'Dawn', bg:'#100805',
bands:[
{colors:['#f472b6','#fb923c'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#eab308','#f59e0b'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#fb7185','#fbbf24'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#f9a8d4','#fcd34d'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#fda4af','#fde68a'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]}
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var offCanvas, offCtx, halfW, halfH;

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Ninguno',text:''},
{title:'Calma y claridad',text:'Mi mente está en calma y clara\nSuelto lo que no puedo controlar\nEstoy presente en este momento'},
{title:'Autoconfianza',text:'Creo en mí mismo y en mis capacidades\nMerezco cosas buenas\nMe hago más fuerte cada día'},
{title:'Soltar',text:'Suelto lo que ya no me sirve\nMe perdono a mí mismo y a los demás\nHago espacio para la paz'},
{title:'Gratitud',text:'Estoy agradecido por este momento\nLa abundancia fluye en mi vida\nAprecio las cosas simples'},
{title:'Enfoque y energía',text:'Mi enfoque es firme y constante\nCanalizo mi energía con propósito\nAvanzo con intención'},
{title:'Sueño y descanso',text:'Me doy permiso para descansar\nMi cuerpo se relaja con cada respiración\nMe dejo llevar hacia un sueño tranquilo'},
{title:'Dejar de fumar',text:'Mis pulmones están más limpios cada día\nSoy más fuerte que cualquier antojo\nCada respiración es una victoria'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Borrar texto') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var time = t / 1000;

// Parse background color for smoothstep
var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);

if (reducedMotion) {
ctx.globalAlpha = 1;
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);
for (var b = 0; b < s.bands.length; b++) {
var band = s.bands[b];
var y = H * band.baseY;
var grad = ctx.createLinearGradient(0, y - H * 0.1, 0, y + H * 0.15);
grad.addColorStop(0, band.colors[0] + '00');
grad.addColorStop(0.3, band.colors[0] + hexAlpha(band.alpha));
grad.addColorStop(0.7, band.colors[1] + hexAlpha(band.alpha * 0.7));
grad.addColorStop(1, band.colors[1] + '00');
ctx.shadowColor = band.colors[0];
ctx.shadowBlur = 15;
ctx.fillStyle = grad;
ctx.fillRect(0, y - H * 0.1, W, H * 0.25);
}
ctx.shadowBlur = 0;
return;
}

var scaleX = halfW / W, scaleY = halfH / H;

// 1. Clear offscreen with background
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// 2. Draw bands on offscreen with 'screen' compositing
offCtx.save();
offCtx.globalCompositeOperation = 'screen';

for (var b = 0; b < s.bands.length; b++) {
var band = s.bands[b];
var pulse = 0.75 + 0.25 * Math.sin(time * 0.08 + b * 0.7);
var vertOsc = Math.sin(time * 0.04 + b * 1.1) * 0.04;
offCtx.beginPath();

var baseY = halfH * (band.baseY + vertOsc);
var amp = halfH * band.amp;
for (var x = 0; x <= halfW; x += 3) {
var realX = x / scaleX;
var noise1 = Math.sin(realX * band.freq + time * band.speed);
var noise2 = Math.sin(realX * band.freq * 1.7 + time * band.speed * 0.6 + 2.1);
var noise3 = Math.sin(realX * band.freq * 0.5 + time * band.speed * 1.3 + 4.3);
var y = baseY + amp * (noise1 * 0.5 + noise2 * 0.3 + noise3 * 0.2);
if (x === 0) offCtx.moveTo(x, y);
else offCtx.lineTo(x, y);
}

offCtx.lineTo(halfW, halfH * (band.baseY + vertOsc + 0.25));
offCtx.lineTo(0, halfH * (band.baseY + vertOsc + 0.25));
offCtx.closePath();

var grad = offCtx.createLinearGradient(0, baseY - amp, 0, baseY + halfH * 0.25);
grad.addColorStop(0, band.colors[0] + hexAlpha(band.alpha * 0.3 * pulse));
grad.addColorStop(0.3, band.colors[0] + hexAlpha(band.alpha * pulse));
grad.addColorStop(0.7, band.colors[1] + hexAlpha(band.alpha * 0.6 * pulse));
grad.addColorStop(1, band.colors[1] + '00');
offCtx.fillStyle = grad;
offCtx.fill();
}

offCtx.restore();

// 3. Smoothstep threshold on offscreen pixel data
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// 4. Upscale to main canvas with smoothing
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

// 5. Draw stars on main canvas at full resolution (stays crisp)
for (var i = 0; i < 60; i++) {
var sx = (Math.sin(i * 127.1 + 311.7) * 0.5 + 0.5) * W;
var sy = (Math.sin(i * 269.5 + 183.3) * 0.5 + 0.5) * H * 0.6;
var sa = 0.2 + 0.3 * Math.abs(Math.sin(time * 0.5 + i));
ctx.beginPath();
ctx.arc(sx, sy, 0.8, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,255,255,' + sa + ')';
ctx.fill();
}

animId = requestAnimationFrame(draw);
}

function hexAlpha(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Movimiento reducido activado · Mostrando vista estática<br>Toca en cualquier lugar para salir';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Orbe de Respiración - Visual Meditativa
URL: https://guruka.com/es/visuals/breathing-orb/
Description: Un orbe pulsante que guía tu ritmo de respiración. Añade tu propio texto de afirmación, almacenado de forma privada en tu navegador.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0a0a1a;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/es/visuals/" class="vp-back">&larr; Todas las Visuales</a>
<h1 class="vp-title">Orbe de Respiración</h1>
<p class="vp-desc">Orbe pulsante que guía tu respiración.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#4338ca,#7c3aed)"></div>
<span>Crepúsculo</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f97316,#eab308)"></div>
<span>Amanecer</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#059669,#14b8a6)"></div>
<span>Bosque</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texto de afirmación (opcional)</label><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">preajustes <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="opcional. Introduce afirmaciones aquí. El texto se mostrará línea por línea."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Ritmo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Iniciar</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Toca en cualquier lugar para salir</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'breathing-orb';
var currentAffId = null;
var paceLabels = ["Muy lento","Lento","Normal","Rápido","Muy rápido"];
var currentPace = 2;
var schemes = [
{ name:'Twilight', bg:'#0a0a1a', orb:['#6366f1','#a78bfa','#4338ca'], particle:'#c4b5fd' },
{ name:'Sunrise', bg:'#1a0a05', orb:['#f97316','#eab308','#dc2626'], particle:'#fcd34d' },
{ name:'Forest', bg:'#051a0a', orb:['#059669','#14b8a6','#065f46'], particle:'#6ee7b7' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

// Scheme buttons
var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Ninguno',text:''},
{title:'Calma y claridad',text:'Mi mente está en calma y clara\nSuelto lo que no puedo controlar\nEstoy presente en este momento'},
{title:'Autoconfianza',text:'Creo en mí mismo y en mis capacidades\nMerezco cosas buenas\nMe hago más fuerte cada día'},
{title:'Soltar',text:'Suelto lo que ya no me sirve\nMe perdono a mí mismo y a los demás\nHago espacio para la paz'},
{title:'Gratitud',text:'Estoy agradecido por este momento\nLa abundancia fluye en mi vida\nAprecio las cosas simples'},
{title:'Enfoque y energía',text:'Mi enfoque es firme y constante\nCanalizo mi energía con propósito\nAvanzo con intención'},
{title:'Sueño y descanso',text:'Me doy permiso para descansar\nMi cuerpo se relaja con cada respiración\nMe dejo llevar hacia un sueño tranquilo'},
{title:'Dejar de fumar',text:'Mis pulmones están más limpios cada día\nSoy más fuerte que cualquier antojo\nCada respiración es una victoria'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Borrar texto') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

// Particles
var particles = [];
function initParticles() {
particles = [];
for (var i = 0; i < 100; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
r: 1 + Math.random() * 2.5,
vx: (Math.random() - 0.5) * 0.2,
vy: (Math.random() - 0.5) * 0.2,
phase: Math.random() * Math.PI * 2
});
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running && particles.length === 0) initParticles();
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var cx = W / 2, cy = H / 2;

// Background
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);

// Breathing cycle: 6 seconds
var breathT = t / 1000;
var breathPhase = Math.sin(breathT * Math.PI / 6); // -1 to 1, 12s cycle
var scale = 0.85 + 0.15 * breathPhase;

var baseR = Math.min(W, H) * 0.12;
var orbR = baseR * scale;

// Orb glow layers
for (var g = 3; g >= 0; g--) {
var glowR = orbR * (1 + g * 0.6);
var grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, glowR);
var alpha = (0.08 - g * 0.015);
if (alpha < 0) alpha = 0;
grad.addColorStop(0, s.orb[0] + hexAlpha(alpha + 0.05));
grad.addColorStop(0.5, s.orb[1] + hexAlpha(alpha));
grad.addColorStop(1, s.orb[2] + '00');
ctx.beginPath();
ctx.arc(cx, cy, glowR, 0, Math.PI * 2);
ctx.fillStyle = grad;
ctx.fill();
}

// Core orb
var coreGrad = ctx.createRadialGradient(cx - orbR * 0.2, cy - orbR * 0.2, orbR * 0.1, cx, cy, orbR);
coreGrad.addColorStop(0, s.orb[1]);
coreGrad.addColorStop(0.7, s.orb[0]);
coreGrad.addColorStop(1, s.orb[2]);
ctx.beginPath();
ctx.arc(cx, cy, orbR, 0, Math.PI * 2);
ctx.fillStyle = coreGrad;
ctx.globalAlpha = 0.9;
ctx.fill();
ctx.globalAlpha = 1;

// Particles
if (!reducedMotion) {
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
// Drift toward/away from orb matching breath
var dx = p.x - cx, dy = p.y - cy;
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
var breathPull = breathPhase * 0.15;
p.x += p.vx + (dx / dist) * breathPull;
p.y += p.vy + (dy / dist) * breathPull;

// Wrap around
if (p.x < 0) p.x = W;
if (p.x > W) p.x = 0;
if (p.y < 0) p.y = H;
if (p.y > H) p.y = 0;

// Twinkle
var twinkle = 0.3 + 0.7 * Math.abs(Math.sin(breathT * 0.4 + p.phase));
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fillStyle = s.particle;
ctx.globalAlpha = twinkle * 0.6;
ctx.fill();
}
ctx.globalAlpha = 1;
} else {
// Reduced motion: static orb only, no particles
}

animId = requestAnimationFrame(draw);
}

function hexAlpha(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initParticles();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Movimiento reducido activado · Mostrando vista estática<br>Toca en cualquier lugar para salir';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Células Dividiéndose - Visual Meditativa
URL: https://guruka.com/es/visuals/dividing-cells/
Description: Células creciendo y dividiéndose en un bucle meditativo. Añade tu propio texto de afirmación, almacenado de forma privada en tu navegador.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"].vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"].vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #050a12;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme,.vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0;
}
[data-theme="dark"].vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"].vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"].vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"].vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"].vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header.vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"].vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"].vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"].vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"].vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/es/visuals/" class="vp-back">&larr; Todas las Visuales</a>
<h1 class="vp-title">Células Dividiéndose</h1>
<p class="vp-desc">Células dividiéndose sin cesar.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#22d3ee,#14b8a6)"></div>
<span>Bioluminiscente</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#fb923c,#f97316)"></div>
<span>Orgánico</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#94a3b8,#e2e8f0)"></div>
<span>Microscopio</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texto de afirmación (opcional)</label><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">preajustes <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="opcional. Introduce afirmaciones aquí. El texto se mostrará línea por línea."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Ritmo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Iniciar</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Toca en cualquier lugar para salir</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'dividing-cells';
var currentAffId = null;
var paceLabels = ["Muy lento","Lento","Normal","Rápido","Muy rápido"];
var currentPace = 2;
var schemes = [
{ name:'Bioluminescent', bg:'#050a12',
colors:['#22d3ee','#14b8a6','#06b6d4','#2dd4bf','#67e8f9','#5eead4'] },
{ name:'Organic', bg:'#0a0808',
colors:['#fb923c','#f97316','#fbbf24','#f59e0b','#fdba74','#fcd34d'] },
{ name:'Microscope', bg:'#020508',
colors:['#94a3b8','#cbd5e1','#64748b','#e2e8f0','#475569','#f1f5f9'] }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var maxVisible = 8;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var offCanvas, offCtx, halfW, halfH;

// State
var centerCell = null; // the cell currently growing/dividing at center
var daughters = []; // drifting daughter cells
var cycleState = 'GROWING_AT_CENTER'; // GROWING_AT_CENTER, DIVIDING, STAGING_PAUSE
var pauseTimer = 0;
var nextId = 0;

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Ninguno',text:''},
{title:'Calma y claridad',text:'Mi mente está en calma y clara\nSuelto lo que no puedo controlar\nEstoy presente en este momento'},
{title:'Autoconfianza',text:'Creo en mí mismo y en mis capacidades\nMerezco cosas buenas\nMe hago más fuerte cada día'},
{title:'Soltar',text:'Suelto lo que ya no me sirve\nMe perdono a mí mismo y a los demás\nHago espacio para la paz'},
{title:'Gratitud',text:'Estoy agradecido por este momento\nLa abundancia fluye en mi vida\nAprecio las cosas simples'},
{title:'Enfoque y energía',text:'Mi enfoque es firme y constante\nCanalizo mi energía con propósito\nAvanzo con intención'},
{title:'Sueño y descanso',text:'Me doy permiso para descansar\nMi cuerpo se relaja con cada respiración\nMe dejo llevar hacia un sueño tranquilo'},
{title:'Dejar de fumar',text:'Mis pulmones están más limpios cada día\nSoy más fuerte que cualquier antojo\nCada respiración es una victoria'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Borrar texto') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
}

function makeOrganelles() {
var orgs = [];
var count = 2 + Math.floor(Math.random() * 2);
for (var i = 0; i < count; i++) {
orgs.push({
dist: 0.3 + Math.random() * 0.35,
angle: Math.random() * Math.PI * 2,
speed: (0.0003 + Math.random() * 0.0004) * (Math.random() < 0.5 ? 1 : -1),
size: 0.06 + Math.random() * 0.04
});
}
return orgs;
}

function spawnCenterCell() {
var W = canvas.width, H = canvas.height;
var minDim = Math.min(W, H);
var targetR = minDim * (0.06 + Math.random() * 0.02);
centerCell = {
id: nextId++,
x: W / 2,
y: H / 2,
r: targetR * 0.15,
targetR: targetR,
divAngle: Math.random() * Math.PI * 2,
colorIdx: Math.floor(Math.random() * 6),
divProgress: 0,
organelles: makeOrganelles(),
opacity: 0.7,
growTimer: 0
};
cycleState = 'GROWING_AT_CENTER';
}

function spawnDaughter(x, y, r, angle, colorIdx, organelles) {
daughters.push({
id: nextId++,
x: x,
y: y,
r: r,
vx: Math.cos(angle) * 0.15,
vy: Math.sin(angle) * 0.15,
phase: Math.random() * Math.PI * 2,
colorIdx: colorIdx,
organelles: organelles,
opacity: 1,
age: 0,
fading: false,
fadeAge: 0
});
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var scaleX = halfW / W, scaleY = halfH / H, scaleR = Math.min(scaleX, scaleY);

var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);

if (reducedMotion) {
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);
offCtx.globalCompositeOperation = 'lighter';
// Draw a center cell mid-division and a couple daughters
var midR = Math.min(W, H) * 0.07;
var ci = 0;
// Two sub-blobs for figure-8
var sep = midR * 0.6;
var a = Math.PI * 0.25;
for (var bi = 0; bi < 2; bi++) {
var bx = (W / 2 + Math.cos(a) * sep * (bi === 0 ? 1 : -1)) * scaleX;
var by = (H / 2 + Math.sin(a) * sep * (bi === 0 ? 1 : -1)) * scaleY;
var br = midR * 0.7 * scaleR;
var grad = offCtx.createRadialGradient(bx, by, 0, bx, by, br * 1.8);
grad.addColorStop(0, s.colors[ci] + 'ff');
grad.addColorStop(0.5, s.colors[ci] + 'cc');
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(bx, by, br * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
// Two static daughters
var dPositions = [[W * 0.25, H * 0.35], [W * 0.72, H * 0.65]];
for (var di = 0; di < 2; di++) {
var dx = dPositions[di][0] * scaleX, dy = dPositions[di][1] * scaleY;
var dr = midR * 0.5 * scaleR;
var grad = offCtx.createRadialGradient(dx, dy, 0, dx, dy, dr * 1.8);
grad.addColorStop(0, s.colors[2] + 'cc');
grad.addColorStop(0.5, s.colors[2] + '99');
grad.addColorStop(1, s.colors[2] + '00');
offCtx.beginPath();
offCtx.arc(dx, dy, dr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
offCtx.globalCompositeOperation = 'source-over';
// Smoothstep
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) { d[j + 3] = 255; }
else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else { d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255; }
}
offCtx.putImageData(imgData, 0, 0);
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);
// Draw nuclei on the two figure-8 blobs
for (var bi = 0; bi < 2; bi++) {
var nx = W / 2 + Math.cos(a) * sep * (bi === 0 ? 1 : -1);
var ny = H / 2 + Math.sin(a) * sep * (bi === 0 ? 1 : -1);
drawNucleus(nx, ny, midR * 0.7, s, ci, t, true);
}
for (var di = 0; di < 2; di++) {
drawNucleus(dPositions[di][0], dPositions[di][1], midR * 0.5, s, 2, t, true);
}
return;
}

// --- UPDATE LOGIC ---

// Force-fade oldest daughters if over max
while (daughters.length > maxVisible) {
var oldest = daughters[0];
oldest.fading = true;
oldest.opacity -= 0.05;
if (oldest.opacity <= 0) daughters.shift();
else break;
}

// Update daughters
for (var i = daughters.length - 1; i >= 0; i--) {
var dc = daughters[i];
dc.age++;

// Sinusoidal wobble drift
dc.x += dc.vx + Math.sin(t * 0.0002 + dc.phase) * 0.06;
dc.y += dc.vy + Math.cos(t * 0.00015 + dc.phase + 1) * 0.06;
dc.vx *= 0.997;
dc.vy *= 0.997;

// Soft boundary bounce
if (dc.x - dc.r < 0) { dc.x = dc.r; dc.vx = Math.abs(dc.vx) * 0.5; }
if (dc.x + dc.r > W) { dc.x = W - dc.r; dc.vx = -Math.abs(dc.vx) * 0.5; }
if (dc.y - dc.r < 0) { dc.y = dc.r; dc.vy = Math.abs(dc.vy) * 0.5; }
if (dc.y + dc.r > H) { dc.y = H - dc.r; dc.vy = -Math.abs(dc.vy) * 0.5; }

// Start fading after ~18 seconds (1080 frames at 60fps)
if (dc.age > 1080 && !dc.fading) dc.fading = true;
if (dc.fading) {
dc.opacity -= 0.003;
if (dc.opacity <= 0) { daughters.splice(i, 1); continue; }
}
}

// Daughter-daughter repulsion
for (var i = 0; i < daughters.length; i++) {
for (var j = i + 1; j < daughters.length; j++) {
var a = daughters[i], b = daughters[j];
var dx = b.x - a.x, dy = b.y - a.y;
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
var minDist = a.r + b.r + 6;
if (dist < minDist) {
var force = (minDist - dist) * 0.015;
var nx = dx / dist, ny = dy / dist;
a.vx -= nx * force; a.vy -= ny * force;
b.vx += nx * force; b.vy += ny * force;
}
}
}

// Center cell lifecycle
if (cycleState === 'GROWING_AT_CENTER') {
if (!centerCell) spawnCenterCell();
var cc = centerCell;
// Grow from tiny to targetR over ~3s (180 frames)
cc.growTimer++;
var growProgress = Math.min(1, cc.growTimer / 180);
// Ease out
growProgress = 1 - (1 - growProgress) * (1 - growProgress);
cc.r = cc.targetR * (0.15 + 0.85 * growProgress);
// Subtle breathing wobble at center
cc.x = W / 2 + Math.sin(t * 0.001) * 1.5;
cc.y = H / 2 + Math.cos(t * 0.0008) * 1.5;

if (cc.growTimer >= 180) {
cycleState = 'DIVIDING';
cc.divProgress = 0;
}
} else if (cycleState === 'DIVIDING') {
var cc = centerCell;
// divProgress 0→1 over ~12s: 0.0014/frame * 60fps ≈ 0.084/s → ~12s
cc.divProgress += 0.0014;
// Keep at center with wobble
cc.x = W / 2 + Math.sin(t * 0.001) * 1.5;
cc.y = H / 2 + Math.cos(t * 0.0008) * 1.5;

if (cc.divProgress >= 1) {
// Spawn two daughters
var angle = cc.divAngle;
var sepDist = cc.r * 0.9;
var newR = cc.r * 0.55;
spawnDaughter(cc.x + Math.cos(angle) * sepDist, cc.y + Math.sin(angle) * sepDist, newR, angle, cc.colorIdx, makeOrganelles());
spawnDaughter(cc.x - Math.cos(angle) * sepDist, cc.y - Math.sin(angle) * sepDist, newR, angle + Math.PI, cc.colorIdx, makeOrganelles());
centerCell = null;
cycleState = 'STAGING_PAUSE';
pauseTimer = 0;
}
} else if (cycleState === 'STAGING_PAUSE') {
pauseTimer++;
// ~1.5s pause (90 frames)
if (pauseTimer >= 90) {
spawnCenterCell();
}
}

// --- RENDER ---

// 1. Clear offscreen
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// 2. Draw additive radial gradients
offCtx.globalCompositeOperation = 'lighter';

// Draw daughters
for (var i = 0; i < daughters.length; i++) {
var dc = daughters[i];
if (dc.opacity <= 0) continue;
var ci = dc.colorIdx % s.colors.length;
var hx = dc.x * scaleX, hy = dc.y * scaleY, hr = dc.r * scaleR;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(dc.opacity));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(dc.opacity * 0.8));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}

// Draw center cell
if (centerCell) {
var cc = centerCell;
var ci = cc.colorIdx % s.colors.length;

if (cycleState === 'DIVIDING') {
// Two sub-blobs with separation based on divProgress
var dp = cc.divProgress;
var sepFactor;
if (dp < 0.3) {
// Elongation phase: 0 → 0.4 * r
sepFactor = (dp / 0.3) * 0.4;
} else if (dp < 0.7) {
// Figure-8 phase: 0.4 → 1.0 * r
sepFactor = 0.4 + ((dp - 0.3) / 0.4) * 0.6;
} else {
// Pinch & split: 1.0 → 1.8 * r (accelerating)
var splitP = (dp - 0.7) / 0.3;
splitP = splitP * splitP; // accelerate
sepFactor = 1.0 + splitP * 0.8;
}

var sep = cc.r * sepFactor;
var a = cc.divAngle;
var x1 = cc.x + Math.cos(a) * sep * 0.5;
var y1 = cc.y + Math.sin(a) * sep * 0.5;
var x2 = cc.x - Math.cos(a) * sep * 0.5;
var y2 = cc.y - Math.sin(a) * sep * 0.5;

// Sub-blob radius: slightly smaller as they separate
var subR = cc.r * (0.75 - dp * 0.15);

var overlapScale = 0.5 + 0.5 * Math.min(1, sepFactor / 1.2);
for (var bi = 0; bi < 2; bi++) {
var bx = (bi === 0 ? x1 : x2) * scaleX;
var by = (bi === 0 ? y1 : y2) * scaleY;
var br = subR * scaleR;
var grad = offCtx.createRadialGradient(bx, by, 0, bx, by, br * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(cc.opacity * overlapScale));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(cc.opacity * 0.8 * overlapScale));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(bx, by, br * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
} else {
// Single blob
var hx = cc.x * scaleX, hy = cc.y * scaleY, hr = cc.r * scaleR;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(cc.opacity));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(cc.opacity * 0.8));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
}

offCtx.globalCompositeOperation = 'source-over';

// 3. Smoothstep threshold
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// 4. Upscale
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

// 5. Draw nuclei and organelles on top at full resolution

// Daughters
for (var i = 0; i < daughters.length; i++) {
var dc = daughters[i];
if (dc.opacity <= 0) continue;
ctx.globalAlpha = dc.opacity;
drawNucleus(dc.x, dc.y, dc.r, s, dc.colorIdx % s.colors.length, t, false);
drawOrganelles(dc.x, dc.y, dc.r, s, dc.colorIdx % s.colors.length, dc.organelles, t, false);
ctx.globalAlpha = 1;
}

// Center cell
if (centerCell) {
var cc = centerCell;
var ci = cc.colorIdx % s.colors.length;
ctx.globalAlpha = cc.opacity;

if (cycleState === 'DIVIDING') {
var dp = cc.divProgress;
var sepFactor;
if (dp < 0.3) sepFactor = (dp / 0.3) * 0.4;
else if (dp < 0.7) sepFactor = 0.4 + ((dp - 0.3) / 0.4) * 0.6;
else { var sp = (dp - 0.7) / 0.3; sp = sp * sp; sepFactor = 1.0 + sp * 0.8; }
var sep = cc.r * sepFactor;
var a = cc.divAngle;
var x1 = cc.x + Math.cos(a) * sep * 0.5;
var y1 = cc.y + Math.sin(a) * sep * 0.5;
var x2 = cc.x - Math.cos(a) * sep * 0.5;
var y2 = cc.y - Math.sin(a) * sep * 0.5;
var subR = cc.r * (0.75 - dp * 0.15);

// Nucleus animation during division
if (dp < 0.25) {
// Elongating single ellipse, draw as stretched nucleus
var nucR = subR * 0.18;
var stretch = 1 + dp * 4;
ctx.save();
ctx.translate(cc.x, cc.y);
ctx.rotate(a);
ctx.scale(stretch, 1 / Math.sqrt(stretch));
drawNucleus(0, 0, subR, s, ci, t, false);
ctx.restore();
} else if (dp < 0.35) {
// Cross-fade from ellipse to two dots
var fadeT = (dp - 0.25) / 0.1;
// Fading single
ctx.globalAlpha = cc.opacity * (1 - fadeT);
drawNucleus(cc.x, cc.y, subR, s, ci, t, false);
// Appearing pair
ctx.globalAlpha = cc.opacity * fadeT;
drawNucleus(x1, y1, subR, s, ci, t, false);
drawNucleus(x2, y2, subR, s, ci, t, false);
ctx.globalAlpha = cc.opacity;
} else {
// Two separate nuclei
drawNucleus(x1, y1, subR, s, ci, t, false);
drawNucleus(x2, y2, subR, s, ci, t, false);
}

// Organelles split between the two halves
var halfOrg = Math.floor(cc.organelles.length / 2);
drawOrganelles(x1, y1, subR, s, ci, cc.organelles.slice(0, halfOrg), t, false);
drawOrganelles(x2, y2, subR, s, ci, cc.organelles.slice(halfOrg), t, false);
} else {
drawNucleus(cc.x, cc.y, cc.r, s, ci, t, false);
drawOrganelles(cc.x, cc.y, cc.r, s, ci, cc.organelles, t, false);
}
ctx.globalAlpha = 1;
}

animId = requestAnimationFrame(draw);
}

function alphaHex(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hexToRgba(hex, a) {
var r = parseInt(hex.slice(1,3), 16);
var g = parseInt(hex.slice(3,5), 16);
var b = parseInt(hex.slice(5,7), 16);
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
}

function drawNucleus(x, y, r, s, ci, t, isStatic) {
var nucR = r * 0.18;
var nucColor = s.colors[(ci + 1) % s.colors.length];
var ng = ctx.createRadialGradient(x, y, 0, x, y, nucR);
ng.addColorStop(0, hexToRgba(nucColor, 0.8));
ng.addColorStop(0.6, hexToRgba(nucColor, 0.35));
ng.addColorStop(1, hexToRgba(nucColor, 0));
ctx.beginPath();
ctx.arc(x, y, nucR, 0, Math.PI * 2);
ctx.fillStyle = ng;
ctx.fill();
}

function drawOrganelles(x, y, r, s, ci, organelles, t, isStatic) {
if (!organelles) return;
for (var k = 0; k < organelles.length; k++) {
var org = organelles[k];
var oAngle = org.angle + (isStatic ? 0 : (t || 0) * org.speed);
var ox = x + Math.cos(oAngle) * r * org.dist;
var oy = y + Math.sin(oAngle) * r * org.dist;
var oSize = r * org.size;
ctx.beginPath();
ctx.arc(ox, oy, oSize, 0, Math.PI * 2);
var orgColor = s.colors[(ci + 2) % s.colors.length];
ctx.fillStyle = hexToRgba(orgColor, 0.4);
ctx.fill();
}
}

function hideNavFooter() {
var header = document.querySelector('header, nav,.site-header, [class*="header"]');
var footer = document.querySelector('footer,.site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav,.site-header, [class*="header"]');
var footer = document.querySelector('footer,.site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
daughters = [];
centerCell = null;
nextId = 0;
spawnCenterCell();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Movimiento reducido activado · Mostrando vista estática<br>Toca en cualquier lugar para salir';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Flujo de Lava - Visual Meditativa
URL: https://guruka.com/es/visuals/lava-flow/
Description: Gotas de lava flotando, fusionándose y separándose. Añade tu propio texto de afirmación, almacenado de forma privada en tu navegador.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0d0505;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/es/visuals/" class="vp-back">&larr; Todas las Visuales</a>
<h1 class="vp-title">Flujo de Lava</h1>
<p class="vp-desc">Gotas fusionándose y separándose.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f97316,#ef4444)"></div>
<span>Magma</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#06b6d4,#d946ef)"></div>
<span>Neón</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#059669,#84cc16)"></div>
<span>Esmeralda</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texto de afirmación (opcional)</label><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">preajustes <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="opcional. Introduce afirmaciones aquí. El texto se mostrará línea por línea."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Ritmo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Iniciar</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Toca en cualquier lugar para salir</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'lava-flow';
var currentAffId = null;
var paceLabels = ["Muy lento","Lento","Normal","Rápido","Muy rápido"];
var currentPace = 2;
var schemes = [
{ name:'Magma', bg:'#0d0505', colors:['#ff4500','#ff6b35','#ffaa00','#ff2200','#ff8c00','#cc3300','#ff5500'] },
{ name:'Neon', bg:'#050510', colors:['#00e5ff','#e040fb','#2979ff','#00bcd4','#d500f9','#448aff','#18ffff'] },
{ name:'Emerald', bg:'#050d08', colors:['#00c853','#1de9b6','#76ff03','#00e676','#64ffda','#69f0ae','#b2ff59'] }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Ninguno',text:''},
{title:'Calma y claridad',text:'Mi mente está en calma y clara\nSuelto lo que no puedo controlar\nEstoy presente en este momento'},
{title:'Autoconfianza',text:'Creo en mí mismo y en mis capacidades\nMerezco cosas buenas\nMe hago más fuerte cada día'},
{title:'Soltar',text:'Suelto lo que ya no me sirve\nMe perdono a mí mismo y a los demás\nHago espacio para la paz'},
{title:'Gratitud',text:'Estoy agradecido por este momento\nLa abundancia fluye en mi vida\nAprecio las cosas simples'},
{title:'Enfoque y energía',text:'Mi enfoque es firme y constante\nCanalizo mi energía con propósito\nAvanzo con intención'},
{title:'Sueño y descanso',text:'Me doy permiso para descansar\nMi cuerpo se relaja con cada respiración\nMe dejo llevar hacia un sueño tranquilo'},
{title:'Dejar de fumar',text:'Mis pulmones están más limpios cada día\nSoy más fuerte que cualquier antojo\nCada respiración es una victoria'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Borrar texto') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

var blobs = [];
var offCanvas, offCtx, halfW, halfH;

function initBlobs() {
blobs = [];
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
var minDim = Math.min(W, H);
var blobCount = Math.max(9, Math.min(Math.floor(minDim / 100), 15));
for (var i = 0; i < blobCount; i++) {
blobs.push({
x: 0.15 * W + Math.random() * 0.7 * W,
y: Math.random() * H,
vx: (Math.random() - 0.5) * 0.1,
vy: -(0.075 + Math.random() * 0.075),
baseR: minDim * (0.04 + Math.random() * 0.04),
phase: Math.random() * Math.PI * 2
});
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running) initBlobs();
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;

// Clear offscreen
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// Update and draw blobs on offscreen canvas at half res
for (var i = 0; i < blobs.length; i++) {
var b = blobs[i];
var r = b.baseR + Math.sin(t * 0.0004 + b.phase) * 12;

if (!reducedMotion) {
b.x += b.vx + Math.sin(t * 0.000075 + b.phase) * 0.15;
b.y += b.vy + Math.cos(t * 0.0001 + b.phase) * 0.15;

// Wrap vertically: when blob fully exits top, respawn at bottom
if (b.y + r * 2 < 0) {
b.y = H + r * 2;
b.x = 0.15 * W + Math.random() * 0.7 * W;
}
// Soft horizontal wrap
if (b.x < -r) b.x = W + r;
if (b.x > W + r) b.x = -r;
}

// Draw radial gradient blob on offscreen at 3/4 resolution
var scaleX = halfW / W, scaleY = halfH / H;
var hx = b.x * scaleX, hy = b.y * scaleY, hr = r * Math.min(scaleX, scaleY);
var ci = i % s.colors.length;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + 'ff');
grad.addColorStop(0.5, s.colors[ci] + 'cc');
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.globalCompositeOperation = 'lighter';
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
offCtx.globalCompositeOperation = 'source-over';

// Apply smoothstep threshold for metaball effect (smooth edges)
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
// Smoothstep interpolation between background and blob color
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt); // smoothstep
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// Scale up to main canvas
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initBlobs();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Movimiento reducido activado · Mostrando vista estática<br>Toca en cualquier lugar para salir';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Mandala - Visual Meditativa
URL: https://guruka.com/es/visuals/mandala/
Description: Geometría sagrada rotando lentamente con simetría evolutiva. Añade tu propio texto de afirmación, almacenado de forma privada en tu navegador.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0a0808;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/es/visuals/" class="vp-back">&larr; Todas las Visuales</a>
<h1 class="vp-title">Mandala</h1>
<p class="vp-desc">Geometría sagrada rotando.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#eab308,#f59e0b)"></div>
<span>Dorado</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#6366f1,#a855f7)"></div>
<span>Celestial</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#14b8a6,#10b981)"></div>
<span>Jade</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texto de afirmación (opcional)</label><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">preajustes <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="opcional. Introduce afirmaciones aquí. El texto se mostrará línea por línea."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Ritmo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Iniciar</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Toca en cualquier lugar para salir</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'mandala';
var currentAffId = null;
var paceLabels = ["Muy lento","Lento","Normal","Rápido","Muy rápido"];
var currentPace = 2;
var schemes = [
{ name:'Golden', bg:'#0a0808', stroke:'#d4a017', strokeAlt:'#f5c842', dot:'#fff8dc', bgFill:'rgba(10,8,8,' },
{ name:'Celestial', bg:'#05050f', stroke:'#818cf8', strokeAlt:'#c084fc', dot:'#e0e7ff', bgFill:'rgba(5,5,15,' },
{ name:'Jade', bg:'#050a08', stroke:'#2dd4bf', strokeAlt:'#34d399', dot:'#d1fae5', bgFill:'rgba(5,10,8,' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Ninguno',text:''},
{title:'Calma y claridad',text:'Mi mente está en calma y clara\nSuelto lo que no puedo controlar\nEstoy presente en este momento'},
{title:'Autoconfianza',text:'Creo en mí mismo y en mis capacidades\nMerezco cosas buenas\nMe hago más fuerte cada día'},
{title:'Soltar',text:'Suelto lo que ya no me sirve\nMe perdono a mí mismo y a los demás\nHago espacio para la paz'},
{title:'Gratitud',text:'Estoy agradecido por este momento\nLa abundancia fluye en mi vida\nAprecio las cosas simples'},
{title:'Enfoque y energía',text:'Mi enfoque es firme y constante\nCanalizo mi energía con propósito\nAvanzo con intención'},
{title:'Sueño y descanso',text:'Me doy permiso para descansar\nMi cuerpo se relaja con cada respiración\nMe dejo llevar hacia un sueño tranquilo'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Borrar texto') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

var rings = [
{ radius: 0.08, folds: 12, speed: 0.00008, dir: 1, type: 'dots' },
{ radius: 0.18, folds: 8, speed: 0.00006, dir: -1, type: 'petals' },
{ radius: 0.30, folds: 12, speed: 0.00004, dir: 1, type: 'lines' },
{ radius: 0.42, folds: 8, speed: 0.00007, dir: -1, type: 'petals' },
{ radius: 0.55, folds: 16, speed: 0.00003, dir: 1, type: 'dots' },
{ radius: 0.68, folds: 12, speed: 0.00005, dir: -1, type: 'lines' },
{title:'Dejar de fumar',text:'Mis pulmones están más limpios cada día\nSoy más fuerte que cualquier antojo\nCada respiración es una victoria'}
];

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var cx = W / 2, cy = H / 2;
var maxR = Math.min(W, H) * 0.65;

// Trail effect
ctx.fillStyle = s.bgFill + '0.04)';
ctx.fillRect(0, 0, W, H);

var baseAngle = reducedMotion ? 0 : t * 0.00005;

for (var ri = 0; ri < rings.length; ri++) {
var ring = rings[ri];
var ringR = maxR * ring.radius;
var folds = ring.folds;
var angle = reducedMotion ? 0 : baseAngle * ring.dir + t * ring.speed * ring.dir;
var breathe = reducedMotion ? 1 : (1 + 0.15 * Math.sin(t * 0.0005 + ri * 1.2));
var alphaFade = 1 - ri * 0.10;

ctx.save();
ctx.translate(cx, cy);
ctx.rotate(angle);

for (var f = 0; f < folds; f++) {
var fAngle = (f / folds) * Math.PI * 2;
ctx.save();
ctx.rotate(fAngle);

if (ring.type === 'dots') {
var dotR = (3 + Math.sin(t * 0.0008 + ri + f) * 2) * breathe;
ctx.shadowColor = s.stroke;
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.arc(ringR * breathe, 0, dotR, 0, Math.PI * 2);
ctx.fillStyle = s.dot;
ctx.globalAlpha = alphaFade * 0.7;
ctx.fill();
ctx.shadowBlur = 0;
} else if (ring.type === 'petals') {
var petalLen = (20 + Math.sin(t * 0.0006 + ri * 2) * 10) * breathe;
var petalW = (8 + Math.sin(t * 0.0004 + f) * 3) * breathe;
ctx.shadowColor = s.stroke;
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.moveTo(ringR * breathe - petalLen * 0.3, 0);
ctx.quadraticCurveTo(ringR * breathe, -petalW, ringR * breathe + petalLen * 0.7, 0);
ctx.quadraticCurveTo(ringR * breathe, petalW, ringR * breathe - petalLen * 0.3, 0);
ctx.strokeStyle = s.stroke;
ctx.lineWidth = 1.2;
ctx.globalAlpha = alphaFade * 0.6;
ctx.stroke();
ctx.shadowBlur = 0;
} else if (ring.type === 'lines') {
var lineLen = (15 + Math.sin(t * 0.0007 + f * 0.5) * 8) * breathe;
ctx.shadowColor = s.strokeAlt;
ctx.shadowBlur = 3;
ctx.beginPath();
ctx.moveTo(ringR * breathe - lineLen, 0);
ctx.lineTo(ringR * breathe + lineLen, 0);
ctx.strokeStyle = s.strokeAlt;
ctx.lineWidth = 1;
ctx.globalAlpha = alphaFade * 0.4;
ctx.stroke();
// End dots
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.arc(ringR * breathe - lineLen, 0, 1.5, 0, Math.PI * 2);
ctx.arc(ringR * breathe + lineLen, 0, 1.5, 0, Math.PI * 2);
ctx.fillStyle = s.strokeAlt;
ctx.globalAlpha = alphaFade * 0.5;
ctx.fill();
ctx.shadowBlur = 0;
}

ctx.restore();
}

ctx.restore();
}

// Center dot
ctx.beginPath();
ctx.arc(cx, cy, 4, 0, Math.PI * 2);
ctx.fillStyle = s.dot;
ctx.globalAlpha = 0.8;
ctx.fill();
ctx.globalAlpha = 1;

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
// Clear canvas fully before starting
ctx.fillStyle = schemes[currentScheme].bg;
ctx.fillRect(0, 0, canvas.width, canvas.height);
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Movimiento reducido activado · Mostrando vista estática<br>Toca en cualquier lugar para salir';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Campo de Estrellas - Visual Meditativa
URL: https://guruka.com/es/visuals/starfield/
Description: Estrellas titilando en el espacio profundo. Añade tu propio texto de afirmación, almacenado de forma privada en tu navegador.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #020510;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/es/visuals/" class="vp-back">&larr; Todas las Visuales</a>
<h1 class="vp-title">Campo de Estrellas</h1>
<p class="vp-desc">Estrellas titilando en el espacio profundo.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#1e293b,#475569)"></div>
<span>Espacio Profundo</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#4c1d95,#a855f7)"></div>
<span>Nebulosa</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#78350f,#f59e0b)"></div>
<span>Cosmos Cálido</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texto de afirmación (opcional)</label><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">preajustes <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="opcional. Introduce afirmaciones aquí. El texto se mostrará línea por línea."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Ritmo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Iniciar</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Toca en cualquier lugar para salir</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'starfield';
var currentAffId = null;
var paceLabels = ["Muy lento","Lento","Normal","Rápido","Muy rápido"];
var currentPace = 2;
var schemes = [
{ name:'Deep Space', bg:'#020510', starColor:'rgba(200,220,255,', glowColor:'rgba(80,100,180,0.015)', shootColor:'rgba(200,220,255,' },
{ name:'Nebula', bg:'#0a0515', starColor:'rgba(220,200,255,', glowColor:'rgba(160,80,200,0.03)', shootColor:'rgba(200,160,255,' },
{ name:'Warm Cosmos', bg:'#0a0805', starColor:'rgba(255,220,160,', glowColor:'rgba(180,120,60,0.015)', shootColor:'rgba(255,200,100,' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Ninguno',text:''},
{title:'Calma y claridad',text:'Mi mente está en calma y clara\nSuelto lo que no puedo controlar\nEstoy presente en este momento'},
{title:'Autoconfianza',text:'Creo en mí mismo y en mis capacidades\nMerezco cosas buenas\nMe hago más fuerte cada día'},
{title:'Soltar',text:'Suelto lo que ya no me sirve\nMe perdono a mí mismo y a los demás\nHago espacio para la paz'},
{title:'Gratitud',text:'Estoy agradecido por este momento\nLa abundancia fluye en mi vida\nAprecio las cosas simples'},
{title:'Enfoque y energía',text:'Mi enfoque es firme y constante\nCanalizo mi energía con propósito\nAvanzo con intención'},
{title:'Sueño y descanso',text:'Me doy permiso para descansar\nMi cuerpo se relaja con cada respiración\nMe dejo llevar hacia un sueño tranquilo'},
{title:'Dejar de fumar',text:'Mis pulmones están más limpios cada día\nSoy más fuerte que cualquier antojo\nCada respiración es una victoria'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Borrar texto') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

var starsBack = [], starsMid = [], starsFront = [];
var shootingStars = [];
var lastShootTime = 0;

function initStars() {
starsBack = []; starsMid = []; starsFront = [];
shootingStars = [];
var W = canvas.width, H = canvas.height;
for (var i = 0; i < 200; i++) {
starsBack.push({ x: Math.random() * W, y: Math.random() * H, size: 0.5 + Math.random() * 1, baseAlpha: 0.3 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
for (var i = 0; i < 100; i++) {
starsMid.push({ x: Math.random() * W, y: Math.random() * H, size: 1 + Math.random() * 1.5, baseAlpha: 0.4 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
for (var i = 0; i < 50; i++) {
starsFront.push({ x: Math.random() * W, y: Math.random() * H, size: 1.5 + Math.random() * 2, baseAlpha: 0.6 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running) initStars();
}

function drawStarLayer(stars, speed, t, s, W, H) {
for (var i = 0; i < stars.length; i++) {
var st = stars[i];
var twinkle = st.baseAlpha * (0.5 + 0.5 * Math.sin(t * 0.001 + st.phase));
// Glow for larger stars
if (st.size > 2) {
ctx.beginPath();
ctx.arc(st.x, st.y, st.size * 3, 0, Math.PI * 2);
ctx.fillStyle = s.starColor + (twinkle * 0.15).toFixed(3) + ')';
ctx.fill();
}
ctx.beginPath();
ctx.arc(st.x, st.y, st.size, 0, Math.PI * 2);
ctx.fillStyle = s.starColor + twinkle.toFixed(3) + ')';
ctx.fill();
}
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;

ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);

// Subtle center glow
var glow = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.max(W, H) * 0.5);
glow.addColorStop(0, s.glowColor);
glow.addColorStop(1, 'transparent');
ctx.fillStyle = glow;
ctx.fillRect(0, 0, W, H);

// Draw star layers with parallax speeds
drawStarLayer(starsBack, 0.025, t, s, W, H);
drawStarLayer(starsMid, 0.06, t, s, W, H);
drawStarLayer(starsFront, 0.12, t, s, W, H);

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initStars();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Movimiento reducido activado · Mostrando vista estática<br>Toca en cualquier lugar para salir';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Memory Matrix - Juego de Entrenamiento Cerebral
URL: https://guruka.com/es/games/memory-matrix/
Description: Recuerda patrones en cuadricula.

<style>
#memory-matrix-game {
max-width: 540px;
margin: 0 auto;
padding: 1.5rem 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
-webkit-tap-highlight-color: transparent;
}

#memory-matrix-game * {
box-sizing: border-box;
}

#memory-matrix-game .mm-screen {
display: none;
animation: mmFadeIn 0.4s ease-out;
}

#memory-matrix-game .mm-screen.active {
display: block;
}

@keyframes mmFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes mmPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}

@keyframes mmCellGlow {
0% { box-shadow: 0 0 0 0 rgba(15, 144, 114, 0.4); }
70% { box-shadow: 0 0 0 8px rgba(15, 144, 114, 0); }
100% { box-shadow: 0 0 0 0 rgba(15, 144, 114, 0); }
}

@keyframes mmShine {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}

@keyframes mmBounceIn {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}

@keyframes mmSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* ---- Instructions Screen ---- */
#memory-matrix-game .mm-instructions {
text-align: center;
}

#memory-matrix-game .mm-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#memory-matrix-game .mm-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 0.75rem;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
margin-bottom: 0;
}

#memory-matrix-game .mm-icon-wrap svg {
width: 36px;
height: 36px;
stroke: var(--color-primary);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

#memory-matrix-game .mm-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 0.25rem;
}

#memory-matrix-game .mm-subtitle {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
}

#memory-matrix-game .mm-how-to {
text-align: left;
margin-bottom: 1.5rem;
}

#memory-matrix-game .mm-how-to h3 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 0.75rem;
}

#memory-matrix-game .mm-how-to ol {
list-style: none;
padding: 0;
margin: 0;
}

#memory-matrix-game .mm-how-to li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.625rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

#memory-matrix-game .mm-step-num {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
font-size: 0.8rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}

#memory-matrix-game .mm-best-banner {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 0.75rem 1rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

#memory-matrix-game .mm-best-banner strong {
color: var(--color-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-best-banner {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

/* ---- Buttons ---- */
#memory-matrix-game .mm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: none;
border-radius: 0.625rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
padding: 0.75rem 1.5rem;
transition: all 0.2s ease;
}

#memory-matrix-game .mm-btn:active {
transform: scale(0.97);
}

#memory-matrix-game .mm-btn-primary {
background: var(--color-primary);
color: #fff;
width: 100%;
}

#memory-matrix-game .mm-btn-primary:hover {
background: var(--color-primary-hover);
box-shadow: 0 4px 12px rgba(15, 144, 114, 0.3);
}

#memory-matrix-game .mm-btn-outline {
background: transparent;
color: var(--color-text-primary);
border: 2px solid var(--color-border);
}

#memory-matrix-game .mm-btn-outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-btn-outline {
color: var(--color-dark-text-primary);
border-color: var(--color-dark-border);
}

[data-theme="dark"] #memory-matrix-game .mm-btn-outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}

#memory-matrix-game .mm-btn-submit {
background: var(--color-primary);
color: #fff;
}

#memory-matrix-game .mm-btn-submit:hover:not(:disabled) {
background: var(--color-primary-hover);
}

#memory-matrix-game .mm-btn-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* ---- Wizard Overlay ---- */
#mm-wizard {
display: none;
animation: mmFadeIn 0.4s ease-out;
}
#mm-wizard.active {
display: block;
}
.mm-wizard-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
.mm-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: mmWizardEnter 0.3s ease-out;
}
[data-theme="dark"].mm-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes mmWizardEnter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.mm-wizard-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.mm-wizard-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
.mm-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].mm-wizard-desc { color: var(--color-dark-text-secondary); }
.mm-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.mm-wizard-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-border);
transition: all 0.3s;
}
.mm-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].mm-wizard-dot { background: var(--color-dark-border, #3a4553); }
[data-theme="dark"].mm-wizard-dot.active { background: var(--color-primary); }
.mm-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.mm-wizard-btn:hover { background: var(--color-primary-hover, #0d7a62); }
@media (max-width: 400px) {
.mm-wizard-card { padding: 1.5rem 1rem; }
.mm-wizard-icon { font-size: 2rem; }
.mm-wizard-title { font-size: 1.1rem; }
.mm-wizard-desc { font-size: 0.85rem; }
}

/* ---- Game Header ---- */
#memory-matrix-game .mm-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
margin-bottom: 1rem;
}

[data-theme="dark"] #memory-matrix-game .mm-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-header-item {
text-align: center;
}

#memory-matrix-game .mm-header-label {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.125rem;
}

[data-theme="dark"] #memory-matrix-game .mm-header-label {
color: var(--color-dark-text-secondary);
}

#memory-matrix-game .mm-header-value {
font-size: 1.15rem;
font-weight: 700;
color: var(--color-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-header-value {
color: var(--color-dark-text-primary);
}

#memory-matrix-game .mm-streak-value {
color: #f59e0b;
}

/* ---- Phase Indicator ---- */
#memory-matrix-game .mm-phase {
text-align: center;
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 1rem;
min-height: 1.5rem;
}

#memory-matrix-game .mm-phase-memorize {
color: var(--color-primary);
animation: mmPulse 1.5s ease-in-out infinite;
}

#memory-matrix-game .mm-phase-recall {
color: #f59e0b;
}

#memory-matrix-game .mm-phase-correct {
color: #22c55e;
}

#memory-matrix-game .mm-phase-wrong {
color: #ef4444;
}

/* ---- Grid ---- */
#memory-matrix-game .mm-grid-wrap {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}

#memory-matrix-game .mm-grid {
display: grid;
gap: 6px;
}

#memory-matrix-game .mm-cell {
aspect-ratio: 1;
border-radius: 8px;
border: 2px solid var(--color-border);
background: var(--color-bg-secondary);
cursor: default;
transition: all 0.25s ease;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
color: transparent;
-webkit-user-select: none;
user-select: none;
}

[data-theme="dark"] #memory-matrix-game .mm-cell {
border-color: var(--color-dark-border);
background: var(--color-dark-bg-secondary);
}

#memory-matrix-game .mm-cell.recall-mode {
cursor: pointer;
}

#memory-matrix-game .mm-cell.recall-mode:hover {
border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-secondary));
}

[data-theme="dark"] #memory-matrix-game .mm-cell.recall-mode:hover {
background: color-mix(in srgb, var(--color-primary) 10%, var(--color-dark-bg-secondary));
}

#memory-matrix-game .mm-cell.showing {
background: var(--color-primary);
border-color: var(--color-primary);
animation: mmCellGlow 0.6s ease-out;
}

#memory-matrix-game .mm-cell.selected {
background: color-mix(in srgb, var(--color-primary) 80%, transparent);
border-color: var(--color-primary);
color: #fff;
}

#memory-matrix-game .mm-cell.fb-correct {
background: #22c55e;
border-color: #16a34a;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-missed {
background: rgba(239, 68, 68, 0.45);
border-color: #ef4444;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-wrong {
background: #ef4444;
border-color: #dc2626;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-neutral {
opacity: 0.5;
transition: all 0.3s ease;
}

/* ---- Progress Bar ---- */
#memory-matrix-game .mm-progress-wrap {
margin-bottom: 1rem;
text-align: center;
}

#memory-matrix-game .mm-progress-bar {
height: 6px;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 3px;
overflow: hidden;
max-width: 240px;
margin: 0 auto 0.375rem;
}

[data-theme="dark"] #memory-matrix-game .mm-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

#memory-matrix-game .mm-progress-text {
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-progress-text {
color: var(--color-dark-text-secondary);
}

/* ---- Action Buttons ---- */
#memory-matrix-game .mm-actions {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}

/* ---- Game Complete Screen ---- */
#memory-matrix-game .mm-complete {
position: relative;
text-align: center;
}

#memory-matrix-game .mm-score-display {
font-size: 3rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
background: linear-gradient(90deg, var(--color-primary), #10b981, var(--color-primary));
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: mmShine 3s linear infinite;
}

#memory-matrix-game .mm-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin: 1.25rem 0;
}

#memory-matrix-game .mm-stat-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 0.75rem 0.5rem;
}

[data-theme="dark"] #memory-matrix-game .mm-stat-card {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-stat-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-stat-value {
color: var(--color-dark-text-primary);
}

#memory-matrix-game .mm-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-secondary);
margin-top: 0.125rem;
}

[data-theme="dark"] #memory-matrix-game .mm-stat-label {
color: var(--color-dark-text-secondary);
}

#memory-matrix-game .mm-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #000;
font-size: 0.8rem;
font-weight: 700;
padding: 0.375rem 1rem;
border-radius: 2rem;
margin-bottom: 1rem;
animation: mmBounceIn 0.5s ease-out;
}

#memory-matrix-game .mm-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}

#memory-matrix-game .mm-back-link {
display: inline-block;
margin-top: 0.75rem;
color: var(--color-primary);
text-decoration: none;
font-size: 0.9rem;
}

#memory-matrix-game .mm-back-link:hover {
text-decoration: underline;
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

/* ---- Dark Mode ---- */
[data-theme="dark"] #memory-matrix-game {
color: var(--color-dark-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-title {
color: var(--color-dark-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-subtitle {
color: var(--color-dark-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-how-to li {
color: var(--color-dark-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-cell.recall-mode:hover {
border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

/* ---- Responsive ---- */
@media (max-width: 400px) {
#memory-matrix-game {
padding: 1rem 0.5rem;
}
#memory-matrix-game .mm-grid {
gap: 4px;
}
#memory-matrix-game .mm-header {
padding: 0.5rem;
}
#memory-matrix-game .mm-header-value {
font-size: 1rem;
}
#memory-matrix-game .mm-btn {
padding: 0.625rem 1rem;
font-size: 0.9rem;
}
#memory-matrix-game .mm-icon-wrap { width: 40px; height: 40px; margin-bottom: 0; }
#memory-matrix-game .mm-icon-wrap svg { width: 20px; height: 20px; }
#memory-matrix-game .mm-instructions h2 { font-size: 1.3rem; }
#memory-matrix-game .mm-instructions.mm-subtitle { font-size: 0.85rem; margin-bottom: 0.75rem; }
}
@media (max-width: 640px) {
#memory-matrix-game .mm-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
#memory-matrix-game .mm-stat-value {
font-size: 1.1rem;
}
}
@media (max-width: 360px) {
#memory-matrix-game .mm-grid {
gap: 3px;
}
#memory-matrix-game .mm-stats-grid {
grid-template-columns: 1fr 1fr;
}
#memory-matrix-game .mm-btn {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}
#memory-matrix-game .mm-title {
font-size: 1.25rem;
}
#memory-matrix-game .mm-grid-wrap {
max-width: 100%;
overflow: hidden;
}
}
@keyframes mm-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.mm-confetti-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.mm-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: mm-confetti-fall 2.5s ease-in forwards;
}
.mm-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: mm-glow-fade 1s ease-out forwards;
}
@keyframes mm-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.mm-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
font-size: 0.85rem;
font-weight: 700;
padding: 0.375rem 1rem;
border-radius: 2rem;
margin-bottom: 1rem;
animation: mmBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}

#memory-matrix-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#memory-matrix-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #memory-matrix-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="memory-matrix-game">

<div id="mm-instructions" class="mm-screen active">
<div class="mm-instructions">
<div class="mm-title-row"><div class="mm-icon-wrap"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div><h1 class="mm-title">Memory Matrix</h1></div>
<p class="mm-subtitle">Entrenamiento de Memoria Espacial</p>
<div class="mm-how-to">
<h3>Cómo Jugar:</h3>
<ol>
<li><span class="mm-step-num">1</span><span>Observa el patrón -- las celdas se iluminarán una por una</span></li>
<li><span class="mm-step-num">2</span><span>Memoriza qué celdas se iluminan</span></li>
<li><span class="mm-step-num">3</span><span>Toca las mismas celdas de memoria</span></li>
<li><span class="mm-step-num">4</span><span>Desde el nivel 8, ¡el orden importa! Toca en la secuencia correcta</span></li>
</ol>
</div>
<div id="mm-instr-best" class="mm-best-banner" style="display:none;"></div>
<button class="mm-btn mm-btn-primary" onclick="mmShowWizard()">Iniciar</button>
<div id="mm-challenge-banner-wrap"></div>
</div>
</div>

<div id="mm-wizard" class="mm-screen">
<div class="mm-wizard-overlay">
<div class="mm-wizard-card" id="mm-wizard-card"></div>
</div>
</div>

<div id="mm-playing" class="mm-screen">
<div class="mm-header">
<div class="mm-header-item">
<div class="mm-header-label">Puntuación</div>
<div class="mm-header-value" id="mm-score">0</div>
</div>
<div class="mm-header-item">
<div class="mm-header-label">Nivel</div>
<div class="mm-header-value" id="mm-level">1</div>
</div>
<div class="mm-header-item">
<div class="mm-header-label">Racha</div>
<div class="mm-header-value mm-streak-value" id="mm-streak">0</div>
</div>
</div>
<div class="mm-phase" id="mm-phase"></div>
<div class="mm-grid-wrap">
<div class="mm-grid" id="mm-grid"></div>
</div>
<div class="mm-progress-wrap">
<div class="mm-progress-bar">
<div class="mm-progress-fill" id="mm-progress-fill" style="width:0%"></div>
</div>
<div class="mm-progress-text" id="mm-progress-text">Ronda 1 de 3</div>
</div>
<div class="mm-actions" id="mm-actions"></div>
<button class="gk-finish-btn" id="mm-finish-btn">Terminar</button>
</div>

<div id="mm-complete" class="mm-screen">
<div class="mm-complete">
<button class="gk-complete-close" id="mm-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="mm-icon-wrap">
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
</div>
<h1 class="mm-title">¡Juego Completado!</h1>
<div class="mm-score-display" id="mm-final-score">0</div>
<div id="mm-new-best-badge" class="mm-new-best" style="display:none;">¡Nuevo Récord Personal!</div>
<div class="gk-challenge-result" id="mm-challenge-result" style="display:none;"></div>
<div class="mm-stats-grid">
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-level">1</div>
<div class="mm-stat-label">Nivel</div>
</div>
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-accuracy">0%</div>
<div class="mm-stat-label">Precisión</div>
</div>
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-streak">0</div>
<div class="mm-stat-label">Racha</div>
</div>
</div>
<div class="mm-complete-actions">
<button class="mm-btn mm-btn-primary" onclick="mmPlayAgain()">Repetir</button>
<button class="gk-runtime-history-toggle" id="mm-history-toggle" type="button">Show History</button>
<a href="/es/games/" class="mm-back-link">Volver a Todos los Juegos</a>
</div>
<div class="gk-runtime-history-panel" id="mm-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="mm-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="mm-share-btn">&#128279; Comparte tu Puntuación</button>
<div class="gk-share-copied" id="mm-share-copied" style="display:none;">¡Enlace copiado!</div>
</div>
</div>
</div>

</div>

<script>
(function() {
var STORAGE_BEST = 'guruka_memory-matrix_best';
var POINTS_PER_CORRECT = 100;
var SPEED_BONUS_THRESHOLD = 1000;
var STREAK_MULTIPLIER = 0.1;
var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('mm-history-toggle', 'mm-history-panel', 'mm-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
 screen: 'instructions',
 score: 0,
 level: 1,
 streak: 0,
 bestStreak: 0,
 correctAnswers: 0,
 wrongAnswers: 0,
 roundsInLevel: 0,
 pattern: [],
 selectedCells: [],
 showingIndex: 0,
 phase: 'showing',
 answerTime: 0,
 countdownValue: 3,
 countdownTimer: null,
 showTimer: null,
 feedbackTimer: null
};

function getLevelConfig(level) {
 var gridSize = level <= 5 ? 3 : level <= 10 ? 4 : level <= 15 ? 5 : 6;
 var patternSize = Math.min(3 + Math.floor(level / 2), gridSize * gridSize - 2);
 var displayTime = Math.max(2000 - (level - 1) * 80, 800);
 var orderMatters = level >= 8;
 return {
 gridSize: gridSize,
 patternSize: patternSize,
 displayTime: displayTime,
 orderMatters: orderMatters,
 roundsPerLevel: 3,
 maxLevel: 20
 };
}

function getPersonalBest() {
 try {
 var val = localStorage.getItem(STORAGE_BEST);
 return val ? parseInt(val, 10) : 0;
 } catch (e) { return 0; }
}

function saveResult(score, level, accuracy) {
 try {
 void level;
 void accuracy;
 var best = getPersonalBest();
 if (score > best) {
 localStorage.setItem(STORAGE_BEST, String(score));
 return true;
 }
 return false;
 } catch (e) { return false; }
}

function showScreen(name) {
 var screens = document.querySelectorAll('#memory-matrix-game .mm-screen');
 for (var i = 0; i < screens.length; i++) {
 screens[i].classList.remove('active');
 }
 var el = document.getElementById('mm-' + name);
 if (el) {
 el.classList.add('active');
 }
 state.screen = name;
}

function updateInstructionsBest() {
 var best = getPersonalBest();
 var banner = document.getElementById('mm-instr-best');
 if (best > 0 && banner) {
 banner.style.display = 'block';
 banner.innerHTML = 'Mejor Puntuación: <strong>' + best.toLocaleString() + ' puntos</strong>';
 }
}

/* ---- Wizard ---- */
var MM_WIZARD_STEPS = [
{icon: '\uD83D\uDCA1', title: 'Observa las celdas iluminarse', desc: 'Mira las celdas.'},
{icon: '\uD83D\uDC46', title: 'Tócalas de memoria', desc: 'Repítelo.'},
{icon: '\uD83D\uDE80', title: '¿Listo? ¡Vamos!', desc: 'Se vuelve más difícil.', final: true}
];
var mmWizardStep = 0;

function mmRenderWizardStep() {
var s = MM_WIZARD_STEPS[mmWizardStep];
var dotsHtml = '';
for (var i = 0; i < MM_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="mm-wizard-dot' + (i === mmWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Comenzar a Jugar' : 'Siguiente';
var card = document.getElementById('mm-wizard-card');
card.innerHTML =
'<div class="mm-wizard-icon">' + s.icon + '</div>' +
'<div class="mm-wizard-title">' + s.title + '</div>' +
'<div class="mm-wizard-desc">' + s.desc + '</div>' +
'<div class="mm-wizard-dots">' + dotsHtml + '</div>' +
'<button class="mm-wizard-btn" id="mm-wizard-next">' + btnLabel + '</button>';
card.style.animation = 'none';
void card.offsetWidth;
card.style.animation = 'mmWizardEnter 0.3s ease-out';
document.getElementById('mm-wizard-next').addEventListener('click', mmAdvanceWizard);
}

function mmAdvanceWizard() {
if (mmWizardStep < MM_WIZARD_STEPS.length - 1) {
mmWizardStep++;
mmRenderWizardStep();
} else {
mmStartGame();
}
}

window.mmShowWizard = function() {
mmWizardStep = 0;
showScreen('wizard');
mmRenderWizardStep();
};

/* ---- Start ---- */
function mmStartGame() {
 window.scrollTo({ top: 0, behavior: 'instant' });
 enterMobileGameMode();
 state.score = 0;
 state.level = 1;
 state.streak = 0;
 state.bestStreak = 0;
 state.correctAnswers = 0;
 state.wrongAnswers = 0;
 state.roundsInLevel = 0;
 state.pattern = [];
 state.selectedCells = [];
 runHistory.clear();

 showScreen('playing');
 GK.renderChallengeBar('mm-playing', challenge);
 updateHeader();
 generatePattern();
}

/* ---- Update Header ---- */
function updateHeader() {
 document.getElementById('mm-score').textContent = state.score.toLocaleString();
 document.getElementById('mm-level').textContent = state.level;
 document.getElementById('mm-streak').textContent = state.streak;
 if (challenge.active) GK.updateChallengeBar('mm-playing', state.score, challenge.score);
}

/* ---- Generate Pattern ---- */
function generatePattern() {
 var config = getLevelConfig(state.level);
 var totalCells = config.gridSize * config.gridSize;
 var newPattern = [];

 while (newPattern.length < config.patternSize) {
 var cell = Math.floor(Math.random() * totalCells);
 if (newPattern.indexOf(cell) === -1) {
 newPattern.push(cell);
 }
 }

 state.pattern = newPattern;
 state.selectedCells = [];
 state.showingIndex = 0;
 state.phase = 'showing';

 buildGrid(config);
 updateProgressBar(config);
 updatePhase(config);
 updateActions(config);
 startShowingPattern(config);
}

/* ---- Build Grid ---- */
function buildGrid(config) {
 var grid = document.getElementById('mm-grid');
 var cellSize = config.gridSize <= 3 ? 72 : config.gridSize <= 4 ? 62 : config.gridSize <= 5 ? 52 : 44;
 var gapSize = config.gridSize <= 4 ? 6 : 5;
 var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
 if (viewportWidth < 360) {
 var maxCellSize = Math.floor((viewportWidth - 40 - (config.gridSize - 1) * gapSize) / config.gridSize);
 if (maxCellSize < cellSize) cellSize = maxCellSize;
 }
 var totalSize = config.gridSize * cellSize + (config.gridSize - 1) * gapSize;

 grid.style.gridTemplateColumns = 'repeat(' + config.gridSize + ', ' + cellSize + 'px)';
 grid.style.gridTemplateRows = 'repeat(' + config.gridSize + ', ' + cellSize + 'px)';
 grid.style.gap = gapSize + 'px';
 grid.style.width = totalSize + 'px';
 grid.innerHTML = '';

 var totalCells = config.gridSize * config.gridSize;
 for (var i = 0; i < totalCells; i++) {
 var cell = document.createElement('button');
 cell.className = 'mm-cell';
 cell.setAttribute('data-index', i);
 cell.setAttribute('type', 'button');
 (function(idx) {
 cell.addEventListener('click', function() { handleCellClick(idx); });
 })(i);
 grid.appendChild(cell);
 }
}

/* ---- Show Pattern Sequentially ---- */
function startShowingPattern(config) {
 var delay = config.displayTime / state.pattern.length;
 state.showingIndex = 0;

 function showNext() {
 if (state.screen !== 'playing') return;
 if (state.showingIndex < state.pattern.length) {
 // Clear previous highlights
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var j = 0; j < cells.length; j++) {
 cells[j].classList.remove('showing');
 }
 // Highlight current cell
 var idx = state.pattern[state.showingIndex];
 var targetCell = document.querySelector('#mm-grid .mm-cell[data-index="' + idx + '"]');
 if (targetCell) {
 targetCell.classList.add('showing');
 }
 state.showingIndex++;
 state.showTimer = setTimeout(showNext, delay);
 } else {
 // All shown, brief pause then switch to recall
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var j = 0; j < cells.length; j++) {
 cells[j].classList.remove('showing');
 }
 state.showTimer = setTimeout(function() {
 state.phase = 'recall';
 state.answerTime = Date.now();
 enableRecallMode(config);
 updatePhase(config);
 updateActions(config);
 }, 400);
 }
 }

 showNext();
}

/* ---- Enable Recall Mode ---- */
function enableRecallMode(config) {
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var i = 0; i < cells.length; i++) {
 cells[i].classList.add('recall-mode');
 }
}

/* ---- Handle Cell Click ---- */
function handleCellClick(cellIndex) {
 if (state.phase !== 'recall') return;

 var existingIdx = state.selectedCells.indexOf(cellIndex);
 if (existingIdx !== -1) {
 // Deselect
 state.selectedCells.splice(existingIdx, 1);
 } else if (state.selectedCells.length < state.pattern.length) {
 state.selectedCells.push(cellIndex);
 }

 var config = getLevelConfig(state.level);
 updateCellVisuals();
 updatePhase(config);
 updateActions(config);
}

/* ---- Update Cell Visuals ---- */
function updateCellVisuals() {
 var config = getLevelConfig(state.level);
 var cells = document.querySelectorAll('#mm-grid .mm-cell');

 for (var i = 0; i < cells.length; i++) {
 var idx = parseInt(cells[i].getAttribute('data-index'), 10);
 cells[i].classList.remove('selected');
 cells[i].textContent = '';

 if (state.selectedCells.indexOf(idx) !== -1) {
 cells[i].classList.add('selected');
 if (config.orderMatters) {
 cells[i].textContent = String(state.selectedCells.indexOf(idx) + 1);
 cells[i].style.color = '#fff';
 }
 } else {
 cells[i].style.color = 'transparent';
 }
 }
}

/* ---- Update Phase Indicator ---- */
function updatePhase(config) {
 var phaseEl = document.getElementById('mm-phase');
 if (state.phase === 'showing') {
 phaseEl.innerHTML = '<span class="mm-phase-memorize">Memoriza el patrón...</span>';
 } else if (state.phase === 'recall') {
 var orderNote = config.orderMatters ? ' (¡el orden importa!)' : '';
 phaseEl.innerHTML = '<span class="mm-phase-recall">¡Toca las celdas!' + orderNote + ', ' + state.selectedCells.length + '/' + state.pattern.length + ' seleccionadas</span>';
 }
}

/* ---- Update Actions ---- */
function updateActions(config) {
 var actionsEl = document.getElementById('mm-actions');
 if (state.phase !== 'recall') {
 actionsEl.innerHTML = '';
 return;
 }

 var clearDisabled = state.selectedCells.length === 0 ? ' disabled' : '';
 var submitDisabled = state.selectedCells.length !== state.pattern.length ? ' disabled' : '';

 actionsEl.innerHTML =
 '<button class="mm-btn mm-btn-outline" onclick="mmClearSelection()"' + clearDisabled + '>Limpiar</button>' +
 '<button class="mm-btn mm-btn-submit" onclick="mmSubmitAnswer()"' + submitDisabled + '>Enviar (' + state.selectedCells.length + '/' + state.pattern.length + ')</button>';
}

/* ---- Update Progress Bar ---- */
function updateProgressBar(config) {
 var pct = (state.roundsInLevel / config.roundsPerLevel) * 100;
 document.getElementById('mm-progress-fill').style.width = pct + '%';
 document.getElementById('mm-progress-text').textContent =
 'Ronda ' + (state.roundsInLevel + 1) + ' de ' + config.roundsPerLevel;
}

/* ---- Clear Selection ---- */
window.mmClearSelection = function() {
 state.selectedCells = [];
 updateCellVisuals();
 updateActions(getLevelConfig(state.level));
 updatePhase(getLevelConfig(state.level));
};

function formatCellList(cells) {
if (!cells || !cells.length) return 'none';
var out = [];
for (var i = 0; i < cells.length; i++) out.push(String(cells[i] + 1));
return out.join(', ');
}

function recordMemoryHistory(correct, config) {
var html = '<strong>' + runHistory.escape(config.orderMatters ? 'Order matters' : 'Any order') + '</strong>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(formatCellList(state.selectedCells)) + '</div>';
html += '<div class="gk-runtime-history-sub">Correct: ' + runHistory.escape(formatCellList(state.pattern)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ---- Submit Answer ---- */
window.mmSubmitAnswer = function() {
 if (state.phase !== 'recall') return;
 var config = getLevelConfig(state.level);
 var responseTime = Date.now() - state.answerTime;

 var correct;
 if (config.orderMatters) {
 correct = true;
 for (var i = 0; i < state.pattern.length; i++) {
 if (state.selectedCells[i] !== state.pattern[i]) {
 correct = false;
 break;
 }
 }
 } else {
 correct = state.selectedCells.length === state.pattern.length;
 if (correct) {
 for (var i = 0; i < state.pattern.length; i++) {
 if (state.selectedCells.indexOf(state.pattern[i]) === -1) {
 correct = false;
 break;
 }
 }
 }
 }

 recordMemoryHistory(correct, config);

 // Calculate points
 var pointsEarned = 0;
 if (correct) {
 pointsEarned = POINTS_PER_CORRECT;
 if (responseTime < SPEED_BONUS_THRESHOLD) {
 pointsEarned += Math.floor((SPEED_BONUS_THRESHOLD - responseTime) / 10);
 }
 pointsEarned += Math.floor(state.streak * STREAK_MULTIPLIER * POINTS_PER_CORRECT);
 state.score += pointsEarned;
 state.streak++;
 state.correctAnswers++;
 if (state.streak > state.bestStreak) {
 state.bestStreak = state.streak;
 }
 } else {
 state.streak = 0;
 state.wrongAnswers++;
 }

 updateHeader();
 showFeedback(correct, config);
};

/* ---- Show Feedback ---- */
function showFeedback(correct, config) {
 state.phase = 'feedback';

 var phaseEl = document.getElementById('mm-phase');
 if (correct) {
 phaseEl.innerHTML = '<span class="mm-phase-correct">¡Correcto!</span>';
 } else {
 phaseEl.innerHTML = '<span class="mm-phase-wrong">Incorrecto...</span>';
 }

 // Update cell visuals to show correct/wrong
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var i = 0; i < cells.length; i++) {
 var idx = parseInt(cells[i].getAttribute('data-index'), 10);
 cells[i].classList.remove('showing', 'selected', 'recall-mode');
 cells[i].style.color = 'transparent';
 cells[i].textContent = '';

 var inPattern = state.pattern.indexOf(idx) !== -1;
 var wasSelected = state.selectedCells.indexOf(idx) !== -1;

 if (inPattern && wasSelected) {
 cells[i].classList.add('fb-correct');
 } else if (inPattern && !wasSelected) {
 cells[i].classList.add('fb-missed');
 } else if (!inPattern && wasSelected) {
 cells[i].classList.add('fb-wrong');
 } else {
 cells[i].classList.add('fb-neutral');
 }
 }

 // Hide action buttons during feedback
 document.getElementById('mm-actions').innerHTML = '';

 state.feedbackTimer = setTimeout(function() {
 advanceRound(config);
 }, 1200);
}

/* ---- Advance Round ---- */
function advanceRound(config) {
 state.roundsInLevel++;

 if (state.roundsInLevel >= config.roundsPerLevel) {
 if (state.level >= config.maxLevel) {
 endGame();
 return;
 }
 state.level++;
 state.roundsInLevel = 0;
 updateHeader();
 }

 generatePattern();
}

/* ---- Celebration effects ---- */
function mmShowConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'mm-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'mm-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'mm-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function mmAnimateScoreCountUp(el, target) {
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(target * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

/* ---- End Game ---- */
function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

function endGame() {
exitMobileGameMode();
 var totalAnswers = state.correctAnswers + state.wrongAnswers;
 var accuracy = totalAnswers > 0 ? Math.round((state.correctAnswers / totalAnswers) * 100) : 0;
 var isNewBest = saveResult(state.score, state.level, accuracy);

 var titleEl = document.querySelector('#mm-complete .mm-title');
 var iconWrap = document.querySelector('#mm-complete .mm-icon-wrap');
 var bestBadge = document.getElementById('mm-new-best-badge');

 if (isNewBest) {
 mmShowConfetti();
 titleEl.textContent = '¡INCREÍBLE!';
 iconWrap.innerHTML = '<span style="font-size:2.25rem">\uD83C\uDF89</span>';
 bestBadge.className = 'mm-new-best-enhanced';
 bestBadge.innerHTML = '\uD83C\uDF1F ¡INCREÍBLE! ¡Nuevo Récord!';
 bestBadge.style.display = 'inline-block';
 } else {
 titleEl.textContent = '¡Buen Trabajo!';
 iconWrap.innerHTML = '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>';
 bestBadge.className = 'mm-new-best';
 bestBadge.style.display = 'none';
 }

 GK.renderChallengeResult('mm-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

 showScreen('complete');

 var scoreEl = document.getElementById('mm-final-score');
 document.getElementById('mm-final-level').textContent = state.level;
 document.getElementById('mm-final-accuracy').textContent = accuracy + '%';
 document.getElementById('mm-final-streak').textContent = state.bestStreak;

 mmAnimateScoreCountUp(scoreEl, state.score);
}

/* ---- Again ---- */
window.mmPlayAgain = function() {
 clearTimeout(state.showTimer);
 clearTimeout(state.feedbackTimer);
 clearInterval(state.countdownTimer);
 updateInstructionsBest();
 showScreen('instructions');
};

/* ---- Init ---- */
updateInstructionsBest();
GK.renderChallengeBanner('mm-challenge-banner-wrap', challenge);


document.getElementById('mm-close-btn').addEventListener('click', function() {
updateInstructionsBest();
showScreen('instructions');
});

document.getElementById('mm-finish-btn').addEventListener('click', function() {
 endGame();
});

document.getElementById('mm-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('mm-share-btn').addEventListener('click', function() {
 GK.shareResult(state.score, 'Memory Matrix', '/es/games/memory-matrix/', 'mm-share-copied');
});
})();
</script>

### Color Clash - Juego de Entrenamiento Mental
URL: https://guruka.com/es/games/color-clash/
Description: Elige colores con reglas cambiantes.

<style>
#color-clash-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #color-clash-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#cc-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.cc-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#cc-instructions.cc-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#cc-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#cc-instructions.cc-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #cc-instructions.cc-subtitle {
color: var(--color-dark-text-secondary);
}

#cc-instructions.cc-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #cc-instructions.cc-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#cc-instructions.cc-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#cc-instructions.cc-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#cc-instructions.cc-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.cc-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].cc-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.cc-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.cc-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.cc-btn-primary:hover {
background: var(--color-primary-hover);
}

.cc-btn-primary:active {
transform: scale(0.97);
}

.cc-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.cc-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"].cc-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#cc-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#cc-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: cc-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #cc-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes cc-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.cc-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.cc-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.cc-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].cc-wizard-desc {
color: var(--color-dark-text-secondary);
}
.cc-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.cc-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.cc-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].cc-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"].cc-wizard-dot.active {
background: var(--color-primary);
}
.cc-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.cc-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#cc-wizard-card {
padding: 1.5rem 1rem;
}
.cc-wizard-icon {
font-size: 2rem;
}
.cc-wizard-title {
font-size: 1.1rem;
}
.cc-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#cc-playing {
display: none;
flex: 1;
flex-direction: column;
}

.cc-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].cc-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.cc-stat {
text-align: center;
}

.cc-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"].cc-stat-label {
color: var(--color-dark-text-secondary);
}

.cc-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.cc-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.cc-level-text {
font-weight: 600;
}

.cc-modifier-badge {
background: #ec4899;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.cc-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].cc-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.cc-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.cc-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"].cc-timer-bar {
background: var(--color-dark-bg-secondary);
}

.cc-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.cc-timer-fill.cc-timer-warning {
background: #ef4444;
}

/* ── Rule Indicator ── */
.cc-rule-indicator {
text-align: center;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 1rem;
transition: background 0.3s, color 0.3s;
}

.cc-rule-ink {
background: rgba(236,72,153,0.15);
color: #ec4899;
border: 1px solid rgba(236,72,153,0.3);
}

[data-theme="dark"].cc-rule-ink {
background: rgba(236,72,153,0.25);
color: #f472b6;
}

.cc-rule-word {
background: rgba(59,130,246,0.15);
color: #3b82f6;
border: 1px solid rgba(59,130,246,0.3);
}

[data-theme="dark"].cc-rule-word {
background: rgba(59,130,246,0.25);
color: #60a5fa;
}

.cc-rule-bg {
background: rgba(168,85,247,0.15);
color: #a855f7;
border: 1px solid rgba(168,85,247,0.3);
}

[data-theme="dark"].cc-rule-bg {
background: rgba(168,85,247,0.25);
color: #c084fc;
}

/* ── Stimulus Display ── */
.cc-stimulus-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
position: relative;
}

.cc-stimulus-word {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.2;
animation: cc-stimulus-enter 0.2s ease-out;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.cc-stimulus-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
animation: cc-stimulus-enter 0.2s ease-out;
}

.cc-bg-square {
width: 50px;
height: 50px;
border-radius: 0.5rem;
border: 2px solid rgba(0,0,0,0.1);
flex-shrink: 0;
}

[data-theme="dark"].cc-bg-square {
border-color: rgba(255,255,255,0.15);
}

@keyframes cc-stimulus-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.cc-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.cc-feedback-flash.cc-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.cc-feedback-flash.cc-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.cc-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.cc-feedback-icon.cc-show-check {
animation: cc-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.cc-feedback-icon.cc-show-x {
animation: cc-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes cc-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Color Answer Buttons ── */
.cc-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.cc-answer-btn {
padding: 0.75rem;
border: 2px solid transparent;
border-radius: 0.75rem;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, opacity 0.15s;
color: #fff;
min-height: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}

.cc-color-circle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.4);
background: currentColor;
}

.cc-answer-btn:active {
transform: scale(0.95);
}

.cc-answer-btn:hover {
opacity: 0.9;
border-color: rgba(255,255,255,0.5);
}

.cc-answer-btn.cc-correct-flash {
border-color: #22c55e;
box-shadow: 0 0 15px rgba(34,197,94,0.4);
}

.cc-answer-btn.cc-wrong-flash {
border-color: #ef4444;
box-shadow: 0 0 15px rgba(239,68,68,0.4);
}

.cc-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].cc-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#cc-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#cc-pause-overlay.cc-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#cc-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.cc-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: cc-modal-enter 0.3s ease-out;
}

[data-theme="dark"].cc-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes cc-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.cc-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.cc-complete-card.cc-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.cc-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.cc-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: cc-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes cc-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.cc-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.cc-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"].cc-complete-stat {
background: var(--color-dark-bg-secondary);
}

.cc-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"].cc-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.cc-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.cc-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.cc-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"].cc-back-link {
color: var(--color-dark-text-secondary);
}

.cc-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.cc-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.cc-level-up-toast.cc-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#color-clash-game {
padding: 0.5rem;
}
.cc-stimulus-word {
font-size: 2.5rem;
}
.cc-answer-btn {
padding: 0.5rem;
min-height: 60px;
font-size: 0.7rem;
}
.cc-color-circle {
width: 40px;
height: 40px;
}
.cc-header {
padding: 0.5rem;
gap: 0.25rem;
}
.cc-stat-value {
font-size: 1rem;
}
#cc-instructions { padding: 0.75rem 0.5rem; }
#cc-instructions.cc-icon { font-size: 2rem; margin-bottom: 0; }
#cc-instructions h2 { font-size: 1.3rem; }
#cc-instructions.cc-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#cc-instructions.cc-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#cc-instructions.cc-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.cc-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
.cc-bg-square { width: 40px; height: 40px; }
}
@media (max-width: 640px) {
#color-clash-game {
padding: 0.75rem;
}
.cc-stimulus-word {
font-size: 3rem;
}
.cc-answer-btn {
padding: 0.625rem;
}
}
@media (max-width: 360px) {
.cc-stimulus-word {
font-size: 2rem;
}
.cc-answer-btn {
padding: 0.5rem;
font-size: 0.65rem;
min-height: 54px;
}
.cc-color-circle {
width: 34px;
height: 34px;
}
.cc-complete-stats {
grid-template-columns: 1fr 1fr;
}
.cc-final-score {
font-size: 2rem;
}
.cc-header {
padding: 0.375rem;
}
.cc-stat-value {
font-size: 0.9rem;
}
.cc-rule-indicator {
font-size: 0.8rem;
padding: 0.4rem 0.75rem;
}
}
@keyframes cc-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.cc-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.cc-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: cc-confetti-fall 2.5s ease-in forwards;
}
.cc-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(236,72,153,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: cc-glow-fade 1s ease-out forwards;
}
@keyframes cc-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.cc-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: cc-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(236,72,153,0.4);
}
@keyframes cc-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#color-clash-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#color-clash-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #color-clash-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#color-clash-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#color-clash-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="color-clash-game">

<div id="cc-instructions">
<div class="cc-title-row"><span class="cc-icon">&#127912;</span><h2>Color Clash</h2></div>
<p class="cc-subtitle">Control inhibitorio basado en Stroop &amp; atenci&oacute;n selectiva</p>
<div class="cc-how-to">
<h3>C&oacute;mo jugar</h3>
<ol>
<li>Aparece una palabra de color escrita en un <strong>color de tinta diferente</strong>.</li>
<li>Sigue el <strong>indicador de regla</strong>, toca el color correcto seg&uacute;n la regla actual.</li>
<li>Las reglas cambian entre <strong>&laquo;Color de tinta&raquo;</strong> y <strong>&laquo;Significado de la palabra&raquo;</strong> a medida que subes de nivel.</li>


</ol>
</div>
<div id="cc-best-display" class="cc-personal-best" style="display:none;">
R&eacute;cord personal: <strong id="cc-best-score">0</strong> puntos
</div>
<button class="cc-btn-primary" id="cc-start-btn">Iniciar juego</button>
<div id="cc-challenge-banner-wrap"></div>
</div>

<div id="cc-wizard">
<div id="cc-wizard-card"></div>
</div>

<div id="cc-playing">
<div class="cc-header">
<div class="cc-stat">
<div class="cc-stat-label">Puntos</div>
<div class="cc-stat-value" id="cc-score">0</div>
</div>
<div class="cc-stat">
<div class="cc-stat-label">Racha</div>
<div class="cc-stat-value" id="cc-streak">0</div>
</div>
<div class="cc-stat">
<div class="cc-stat-label">Nivel</div>
<div class="cc-stat-value" id="cc-level">1</div>
</div>
</div>
<div class="cc-level-info">
<span class="cc-level-text">Nivel <span id="cc-level-text">1</span></span>
<span class="cc-modifier-badge" id="cc-modifier-badge" style="display:none;">Cambio de regla</span>
</div>
<div class="cc-progress-bar">
<div class="cc-progress-fill" id="cc-progress-fill" style="width:0%"></div>
</div>
<div class="cc-timer-bar">
<div class="cc-timer-fill" id="cc-timer-fill" style="width:100%"></div>
</div>
<div class="cc-rule-indicator cc-rule-ink" id="cc-rule-indicator">Toca el COLOR DE TINTA</div>
<div class="cc-stimulus-area">
<div class="cc-feedback-flash" id="cc-feedback-flash"></div>
<div class="cc-feedback-icon" id="cc-feedback-icon"></div>
<div id="cc-stimulus-wrap" class="cc-stimulus-wrap">
<span class="cc-stimulus-word" id="cc-stimulus-word"></span>
<div class="cc-bg-square" id="cc-bg-square" style="display:none;"></div>
</div>
</div>
<div class="cc-answers" id="cc-answers">
<button class="cc-answer-btn" id="cc-ans-0"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-1"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-2"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-3"><div class="cc-color-circle"></div><span></span></button>
</div>
<div class="cc-playing-hint"><strong>1-4</strong> responder &middot; <strong>Esc</strong> pausar</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="cc-pause-btn" type="button">Pausar</button>
<button class="gk-finish-btn" id="cc-finish-btn" type="button">Terminar juego</button>
</div>
</div>

<div id="cc-pause-overlay">
<div class="cc-pause-text">Pausado</div>
<button class="cc-btn-primary" id="cc-resume-btn">Reanudar</button>
</div>

<div id="cc-complete-overlay">
<div class="cc-complete-card">
<button class="gk-complete-close" id="cc-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="cc-trophy">&#127942;</div>
<h2>&iexcl;Juego completado!</h2>
<div class="cc-final-score" id="cc-final-score">0</div>
<div id="cc-new-best" class="cc-new-best" style="display:none;">&#11088; &iexcl;Nuevo r&eacute;cord!</div>
<div class="gk-challenge-result" id="cc-challenge-result" style="display:none;"></div>
<div class="cc-complete-stats">
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Nivel alcanzado</div>
<div class="cc-complete-stat-value" id="cc-final-level">1</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Precisi&oacute;n</div>
<div class="cc-complete-stat-value" id="cc-final-accuracy">0%</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Mejor racha</div>
<div class="cc-complete-stat-value" id="cc-final-streak">0</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">R&eacute;cord personal</div>
<div class="cc-complete-stat-value" id="cc-final-best">0</div>
</div>
</div>
<div class="cc-complete-actions">
<button class="cc-btn-primary" id="cc-play-again-btn">Jugar de nuevo</button>
<button class="gk-runtime-history-toggle" id="cc-history-toggle" type="button">Show History</button>
<a href="/es/games/" class="cc-back-link">&larr; Todos los juegos</a>
</div>
<div class="gk-runtime-history-panel" id="cc-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="cc-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="cc-share-btn">&#128279; Compartir</button>
<div class="gk-share-copied" id="cc-share-copied" style="display:none;">Copiado</div>
</div>
</div>
</div>

<div class="cc-level-up-toast" id="cc-level-toast">&iexcl;Nivel arriba!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_color-clash_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('cc-history-toggle', 'cc-history-panel', 'cc-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

/* ── Color pool ── */
var COLORS = [
{ name: 'Rojo', hex: '#ef4444' },
{ name: 'Azul', hex: '#3b82f6' },
{ name: 'Verde', hex: '#22c55e' },
{ name: 'Amarillo', hex: '#eab308' },
{ name: 'P\u00farpura', hex: '#a855f7' },
{ name: 'Naranja', hex: '#f97316' },
{ name: 'Rosa', hex: '#ec4899' },
{ name: 'Cian', hex: '#06b6d4' }
];

var RULES = { INK: 'ink', WORD: 'word', BG: 'bg' };

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctColorName: '',
currentRule: RULES.INK,
currentStimulus: null,
currentChoices: [],
roundsSinceRuleSwitch: 0,
nextRuleSwitchAt: 0
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('cc-instructions');
var elWizard = document.getElementById('cc-wizard');
var elWizardCard = document.getElementById('cc-wizard-card');
var elPlaying = document.getElementById('cc-playing');
var elPauseOverlay = document.getElementById('cc-pause-overlay');
var elCompleteOverlay = document.getElementById('cc-complete-overlay');
var elScore = document.getElementById('cc-score');
var elStreak = document.getElementById('cc-streak');
var elLevel = document.getElementById('cc-level');
var elLevelText = document.getElementById('cc-level-text');
var elModifierBadge = document.getElementById('cc-modifier-badge');
var elProgressFill = document.getElementById('cc-progress-fill');
var elTimerFill = document.getElementById('cc-timer-fill');
var elRuleIndicator = document.getElementById('cc-rule-indicator');
var elStimulusWord = document.getElementById('cc-stimulus-word');
var elStimulusWrap = document.getElementById('cc-stimulus-wrap');
var elBgSquare = document.getElementById('cc-bg-square');
var elFeedbackFlash = document.getElementById('cc-feedback-flash');
var elFeedbackIcon = document.getElementById('cc-feedback-icon');
var elFinalScore = document.getElementById('cc-final-score');
var elNewBest = document.getElementById('cc-new-best');
var elFinalLevel = document.getElementById('cc-final-level');
var elFinalAccuracy = document.getElementById('cc-final-accuracy');
var elFinalStreak = document.getElementById('cc-final-streak');
var elFinalBest = document.getElementById('cc-final-best');
var elBestDisplay = document.getElementById('cc-best-display');
var elBestScore = document.getElementById('cc-best-score');
var elLevelToast = document.getElementById('cc-level-toast');
var btnStart = document.getElementById('cc-start-btn');
var btnResume = document.getElementById('cc-resume-btn');
var btnPlayAgain = document.getElementById('cc-play-again-btn');
var answerBtns = [
document.getElementById('cc-ans-0'),
document.getElementById('cc-ans-1'),
document.getElementById('cc-ans-2'),
document.getElementById('cc-ans-3')
];

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getColorPool(lvl) {
if (lvl <= 9) return COLORS.slice(0, 4);
return COLORS;
}

/* ── Rule logic ── */
function getRuleForLevel(lvl) {
if (lvl <= 6) return RULES.INK;
return RULES.INK;
}

function shouldSwitchRules(lvl) {
return lvl >= 7;
}

function isTripleStroop(lvl) {
return lvl >= 17;
}

function isCongruent(lvl) {
return lvl <= 3;
}

function doesRuleSwitchMidLevel(lvl) {
return lvl >= 13 && lvl <= 16;
}

function updateRuleIndicator() {
elRuleIndicator.className = 'cc-rule-indicator';
if (state.currentRule === RULES.INK) {
elRuleIndicator.textContent = 'Toca el COLOR DE TINTA';
elRuleIndicator.classList.add('cc-rule-ink');
} else if (state.currentRule === RULES.WORD) {
elRuleIndicator.textContent = 'Toca el SIGNIFICADO DE LA PALABRA';
elRuleIndicator.classList.add('cc-rule-word');
} else if (state.currentRule === RULES.BG) {
elRuleIndicator.textContent = 'Toca el COLOR DE FONDO';
elRuleIndicator.classList.add('cc-rule-bg');
}
}

/* ── Random helpers ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}

function pickRandom(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function pickDifferent(arr, exclude) {
var filtered = arr.filter(function(c) { return c.name !== exclude.name; });
return pickRandom(filtered);
}

/* ── Generate stimulus ── */
function generateStimulus(lvl) {
var pool = getColorPool(lvl);
var wordColor, inkColor, bgColor, correctColor;

if (isCongruent(lvl)) {
/* L1-3: congruent, word matches ink */
wordColor = pickRandom(pool);
inkColor = wordColor;
bgColor = null;
state.currentRule = RULES.INK;
correctColor = wordColor;
} else if (lvl <= 6) {
/* L4-6: incongruent, identify ink */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
state.currentRule = RULES.INK;
correctColor = inkColor;
} else if (lvl <= 9) {
/* L7-9: rule alternates each round between ink and word */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else if (lvl <= 12) {
/* L10-12: 8 colors, rule alternates */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else if (lvl <= 16) {
/* L13-16: rule switches mid-level */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else {
/* L17-20: triple stroop */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = pickDifferent(pool, inkColor);
while (bgColor.name === wordColor.name) {
bgColor = pickDifferent(pool, inkColor);
}
if (state.currentRule === RULES.INK) {
correctColor = inkColor;
} else if (state.currentRule === RULES.WORD) {
correctColor = wordColor;
} else {
correctColor = bgColor;
}
}

return {
wordText: wordColor.name,
inkHex: inkColor.hex,
bgColor: bgColor,
correctColor: correctColor,
pool: pool
};
}

function generateColorChoices(correctColor, pool) {
var choices = [correctColor];
var attempts = 0;
while (choices.length < 4 && attempts < 50) {
var candidate = pickRandom(pool);
var isDuplicate = false;
for (var i = 0; i < choices.length; i++) {
if (choices[i].name === candidate.name) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
choices.push(candidate);
}
attempts++;
}
/* Fill remaining if pool is too small */
var allColors = COLORS.slice();
while (choices.length < 4) {
var c = pickRandom(allColors);
var dup = false;
for (var k = 0; k < choices.length; k++) {
if (choices[k].name === c.name) { dup = true; break; }
}
if (!dup) choices.push(c);
}
return shuffle(choices);
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
if (shouldSwitchRules(state.level)) {
elModifierBadge.style.display = '';
if (isTripleStroop(state.level)) {
elModifierBadge.textContent = 'Triple Stroop';
} else if (doesRuleSwitchMidLevel(state.level)) {
elModifierBadge.textContent = 'Cambio en nivel';
} else {
elModifierBadge.textContent = 'Cambio de regla';
}
} else {
elModifierBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('cc-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('cc-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('cc-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'cc-feedback-flash';
elFeedbackIcon.className = 'cc-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('cc-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('cc-show-check');
} else {
elFeedbackFlash.classList.add('cc-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('cc-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'cc-feedback-flash';
elFeedbackIcon.className = 'cc-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = '\u00a1Nivel ' + level + '!';
elLevelToast.classList.add('cc-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('cc-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'cc-correct-flash' : 'cc-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('cc-correct-flash', 'cc-wrong-flash');
}, 400);
}

/* ── Determine rule for the next round ── */
function determineRule() {
var lvl = state.level;
if (lvl <= 3) {
state.currentRule = RULES.INK;
} else if (lvl <= 6) {
state.currentRule = RULES.INK;
} else if (lvl <= 12) {
/* Alternate each round */
state.currentRule = (state.round % 2 === 0) ? RULES.INK : RULES.WORD;
} else if (lvl <= 16) {
/* Mid-level switching every 3-5 rounds */
state.roundsSinceRuleSwitch++;
if (state.roundsSinceRuleSwitch >= state.nextRuleSwitchAt) {
state.currentRule = (state.currentRule === RULES.INK) ? RULES.WORD : RULES.INK;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
}
} else {
/* L17-20: triple stroop, cycle through ink/word/bg */
var rules = [RULES.INK, RULES.WORD, RULES.BG];
state.roundsSinceRuleSwitch++;
if (state.roundsSinceRuleSwitch >= state.nextRuleSwitchAt) {
var currentIdx = rules.indexOf(state.currentRule);
var nextIdx = (currentIdx + 1) % rules.length;
state.currentRule = rules[nextIdx];
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(2, 4);
}
}
}

/* ── Set color button appearance ── */
function setColorButton(btn, color) {
btn.style.background = color.hex;
btn.style.borderColor = 'transparent';
var circle = btn.querySelector('.cc-color-circle');
var label = btn.querySelector('span');
circle.style.background = '#fff';
circle.style.borderColor = 'rgba(255,255,255,0.6)';
circle.style.background = color.hex;
circle.style.filter = 'brightness(1.2)';
label.textContent = color.name;
btn.dataset.colorName = color.name;
}

function findColorByName(name) {
for (var i = 0; i < COLORS.length; i++) {
if (COLORS[i].name === name) return COLORS[i];
}
return null;
}

function colorHistoryChip(color) {
if (!color) return 'No answer';
return '<span class="gk-history-swatch" style="background:' + runHistory.escape(color.hex) + '"></span>' + runHistory.escape(color.name);
}

function recordColorHistory(selectedName, correct) {
var selected = findColorByName(selectedName);
var correctColor = state.currentStimulus ? state.currentStimulus.correctColor : findColorByName(state.correctColorName);
var ruleText = elRuleIndicator ? elRuleIndicator.textContent : 'Color rule';
var stimulus = state.currentStimulus;
var html = '<strong>' + runHistory.escape(ruleText) + '</strong>';
if (stimulus) {
html += '<div class="gk-runtime-history-sub">Word: ' + runHistory.escape(stimulus.wordText) + ' | Ink: <span class="gk-history-swatch" style="background:' + runHistory.escape(stimulus.inkHex) + '"></span></div>';
}
html += '<div class="gk-runtime-history-sub">Your: ' + colorHistoryChip(selected) + ' | Correct: ' + colorHistoryChip(correctColor) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var chosenName = answerBtns[chosenIdx].dataset.colorName;
var correct = (chosenName === state.correctColorName);

state.totalAnswered++;
recordColorHistory(chosenName, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordColorHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

/* Determine rule for this round */
determineRule();
updateRuleIndicator();

var stimulus = generateStimulus(state.level);
state.correctColorName = stimulus.correctColor.name;
state.currentStimulus = stimulus;

/* Display the stimulus word */
elStimulusWord.textContent = stimulus.wordText;
elStimulusWord.style.color = stimulus.inkHex;
elStimulusWrap.style.animation = 'none';
void elStimulusWrap.offsetWidth;
elStimulusWrap.style.animation = '';

/* Handle background square for triple stroop */
if (stimulus.bgColor && isTripleStroop(state.level)) {
elBgSquare.style.display = 'block';
elBgSquare.style.background = stimulus.bgColor.hex;
} else {
elBgSquare.style.display = 'none';
}

/* Generate and display color choices */
var choices = generateColorChoices(stimulus.correctColor, stimulus.pool);
state.currentChoices = choices.slice();
for (var i = 0; i < 4; i++) {
setColorButton(answerBtns[i], choices[i]);
}

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'cc-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'cc-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'cc-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.cc-trophy');
var title = document.querySelector('#cc-complete-overlay .cc-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = '\u00a1INCRE\u00cdBLE!';
elNewBest.className = 'cc-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F \u00a1INCRE\u00cdBLE! \u00a1Nuevo r\u00e9cord!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = '\u00a1Buen trabajo!';
elNewBest.className = 'cc-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('cc-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var CC_WIZARD_STEPS = [
{icon: '\uD83C\uDFA8', title: 'Lee el color, no la palabra', desc: 'Aparece una palabra de color en un color de tinta diferente. \u00a1Sigue el indicador de regla para elegir la respuesta correcta!'},
{icon: '\uD83D\uDD04', title: 'Las reglas cambian al subir de nivel', desc: 'En niveles m\u00e1s altos, la regla alterna entre \u00abColor de tinta\u00bb y \u00abSignificado de la palabra\u00bb. \u00a1Mant\u00e9n la atenci\u00f3n!'},
{icon: '\u26A1', title: '\u00a1S\u00e9 r\u00e1pido!', desc: '\u00a1Responde antes de que se acabe el tiempo. La velocidad y las rachas dan puntos extra!', final: true}
];
var ccWizardStep = 0;

function renderWizardStep() {
var s = CC_WIZARD_STEPS[ccWizardStep];
var dotsHtml = '';
for (var i = 0; i < CC_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="cc-wizard-dot' + (i === ccWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Comenzar a jugar' : 'Siguiente';
elWizardCard.innerHTML =
'<div class="cc-wizard-icon">' + s.icon + '</div>' +
'<div class="cc-wizard-title">' + s.title + '</div>' +
'<div class="cc-wizard-desc">' + s.desc + '</div>' +
'<div class="cc-wizard-dots">' + dotsHtml + '</div>' +
'<button class="cc-wizard-btn" id="cc-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'cc-wizard-enter 0.3s ease-out';
document.getElementById('cc-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ccWizardStep < CC_WIZARD_STEPS.length - 1) {
ccWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ccWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctColorName = '';
state.currentRule = RULES.INK;
state.currentStimulus = null;
state.currentChoices = [];
runHistory.clear();
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('cc-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('cc-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('cc-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('cc-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('cc-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('cc-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Color Clash', '/es/games/color-clash/', 'cc-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key >= '1' && e.key <= '4') {
e.preventDefault();
processAnswer(parseInt(e.key, 10) - 1);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('cc-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Number Crunch - Juego de Entrenamiento Mental
URL: https://guruka.com/es/games/number-crunch/
Description: Resuelve aritmetica con tiempo.

<style>
#number-crunch-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #number-crunch-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#nc-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.nc-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#nc-instructions.nc-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#nc-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#nc-instructions.nc-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #nc-instructions.nc-subtitle {
color: var(--color-dark-text-secondary);
}

#nc-instructions.nc-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #nc-instructions.nc-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#nc-instructions.nc-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#nc-instructions.nc-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#nc-instructions.nc-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.nc-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.nc-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.nc-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.nc-btn-primary:hover {
background: var(--color-primary-hover);
}

.nc-btn-primary:active {
transform: scale(0.97);
}

.nc-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.nc-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"].nc-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#nc-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#nc-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: nc-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #nc-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes nc-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.nc-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.nc-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.nc-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].nc-wizard-desc {
color: var(--color-dark-text-secondary);
}
.nc-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.nc-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.nc-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].nc-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"].nc-wizard-dot.active {
background: var(--color-primary);
}
.nc-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.nc-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#nc-wizard-card {
padding: 1.5rem 1rem;
}
.nc-wizard-icon {
font-size: 2rem;
}
.nc-wizard-title {
font-size: 1.1rem;
}
.nc-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#nc-playing {
display: none;
flex: 1;
flex-direction: column;
}

.nc-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].nc-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-stat {
text-align: center;
}

.nc-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"].nc-stat-label {
color: var(--color-dark-text-secondary);
}

.nc-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.nc-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.nc-level-text {
font-weight: 600;
}

.nc-modifier-badge {
background: #6366f1;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.nc-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].nc-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.nc-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"].nc-timer-bar {
background: var(--color-dark-bg-secondary);
}

.nc-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.nc-timer-fill.nc-timer-warning {
background: #ef4444;
}

/* ── Equation Display ── */
.nc-equation-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
position: relative;
}

.nc-rule-modifier {
background: rgba(99,102,241,0.1);
color: #6366f1;
padding: 0.4rem 1rem;
border-radius: 2rem;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1rem;
display: none;
}

[data-theme="dark"].nc-rule-modifier {
background: rgba(99,102,241,0.2);
color: #818cf8;
}

.nc-equation {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
animation: nc-eq-enter 0.2s ease-out;
text-align: center;
}

@keyframes nc-eq-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.nc-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.nc-feedback-flash.nc-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.nc-feedback-flash.nc-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.nc-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.nc-feedback-icon.nc-show-check {
animation: nc-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.nc-feedback-icon.nc-show-x {
animation: nc-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes nc-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Answer Buttons ── */
.nc-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.nc-answer-btn {
padding: 1rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.25rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
}

[data-theme="dark"].nc-answer-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.nc-answer-btn:active {
transform: scale(0.95);
}

.nc-answer-btn:hover {
border-color: var(--color-primary);
background: rgba(99,102,241,0.05);
}

[data-theme="dark"].nc-answer-btn:hover {
background: rgba(99,102,241,0.15);
}

.nc-answer-btn.nc-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.nc-answer-btn.nc-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.nc-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-playing-hint {
color: var(--color-dark-text-secondary);
}

#number-crunch-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary);
border-radius: 0.5rem;
background: var(--color-bg-primary);
color: var(--color-primary);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#number-crunch-game .gk-finish-btn:hover {
background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] #number-crunch-game .gk-finish-btn {
background: var(--color-dark-bg-secondary);
color: #fbbf24;
border-color: #fbbf24;
}

/* ── Pause Overlay ── */
#nc-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#nc-pause-overlay.nc-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#nc-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.nc-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: nc-modal-enter 0.3s ease-out;
}

[data-theme="dark"].nc-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes nc-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.nc-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.nc-complete-card.nc-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.nc-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.nc-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: nc-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes nc-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.nc-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.nc-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"].nc-complete-stat {
background: var(--color-dark-bg-secondary);
}

.nc-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.nc-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.nc-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.nc-history-toggle {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.nc-history-toggle:hover {
background: rgba(245, 158, 11, 0.1);
}

.nc-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 240px;
overflow: auto;
border: 1px solid var(--color-border);
border-radius: 0.5rem;
background: var(--color-bg-secondary);
}

[data-theme="dark"] .nc-history-panel {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-history-list {
display: flex;
flex-direction: column;
}

.nc-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border);
font-size: 0.82rem;
}

.nc-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .nc-history-row {
border-color: var(--color-dark-border);
}

.nc-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: baseline;
}

.nc-history-status {
font-weight: 800;
white-space: nowrap;
}

.nc-history-correct .nc-history-status {
color: #16a34a;
}

.nc-history-wrong .nc-history-status {
color: #dc2626;
}

.nc-history-eq {
font-weight: 700;
text-align: right;
}

.nc-history-answer {
margin-top: 0.25rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .nc-history-answer {
color: var(--color-dark-text-secondary);
}

.nc-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary);
text-align: center;
}

.nc-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"].nc-back-link {
color: var(--color-dark-text-secondary);
}

.nc-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.nc-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.nc-level-up-toast.nc-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#number-crunch-game {
padding: 0.5rem;
}
.nc-equation {
font-size: 2rem;
}
.nc-answer-btn {
padding: 0.75rem;
font-size: 1.1rem;
min-height: 48px;
}
.nc-header {
padding: 0.5rem;
gap: 0.25rem;
}
.nc-stat-value {
font-size: 1rem;
}
#nc-instructions { padding: 0.75rem 0.5rem; }
#nc-instructions.nc-icon { font-size: 2rem; margin-bottom: 0; }
#nc-instructions h2 { font-size: 1.3rem; }
#nc-instructions.nc-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#nc-instructions.nc-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#nc-instructions.nc-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.nc-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#number-crunch-game {
padding: 0.75rem;
}
.nc-equation {
font-size: 2.25rem;
}
.nc-answer-btn {
padding: 0.875rem;
}
}
@media (max-width: 360px) {
.nc-equation {
font-size: 1.75rem;
}
.nc-answer-btn {
padding: 0.625rem;
font-size: 1rem;
}
.nc-complete-stats {
grid-template-columns: 1fr 1fr;
}
.nc-final-score {
font-size: 2rem;
}
.nc-header {
padding: 0.375rem;
}
.nc-stat-value {
font-size: 0.9rem;
}
}
@keyframes nc-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.nc-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.nc-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: nc-confetti-fall 2.5s ease-in forwards;
}
.nc-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: nc-glow-fade 1s ease-out forwards;
}
@keyframes nc-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.nc-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: nc-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes nc-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#number-crunch-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#number-crunch-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="number-crunch-game">

<div id="nc-instructions">
<div class="nc-title-row"><span class="nc-icon">&#129518;</span><h2>Number Crunch</h2></div>
<p class="nc-subtitle">Aritm&eacute;tica mental</p>
<div class="nc-how-to">
<h3>C&oacute;mo Jugar</h3>
<ol>
<li>Resuelve la ecuaci&oacute;n.</li>
<li>Elige la respuesta.</li>
<li>Nivel 6+: pasos extra en la ecuaci&oacute;n.</li>


</ol>
</div>
<div id="nc-best-display" class="nc-personal-best" style="display:none;">
R&eacute;cord: <strong id="nc-best-score">0</strong> puntos
</div>
<button class="nc-btn-primary" id="nc-start-btn">Iniciar</button>
<div id="nc-challenge-banner-wrap"></div>
</div>

<div id="nc-wizard">
<div id="nc-wizard-card"></div>
</div>

<div id="nc-playing">
<div class="nc-header">
<div class="nc-stat">
<div class="nc-stat-label">Puntos</div>
<div class="nc-stat-value" id="nc-score">0</div>
</div>
<div class="nc-stat">
<div class="nc-stat-label">Racha</div>
<div class="nc-stat-value" id="nc-streak">0</div>
</div>
<div class="nc-stat">
<div class="nc-stat-label">Level</div>
<div class="nc-stat-value" id="nc-level">1</div>
</div>
</div>
<div class="nc-level-info">
<span class="nc-level-text">Level <span id="nc-level-text">1</span></span>
<span class="nc-modifier-badge" id="nc-modifier-badge" style="display:none;">Extra</span>
</div>
<div class="nc-progress-bar">
<div class="nc-progress-fill" id="nc-progress-fill" style="width:0%"></div>
</div>
<div class="nc-timer-bar">
<div class="nc-timer-fill" id="nc-timer-fill" style="width:100%"></div>
</div>
<div class="nc-equation-area">
<div class="nc-feedback-flash" id="nc-feedback-flash"></div>
<div class="nc-feedback-icon" id="nc-feedback-icon"></div>
<div class="nc-rule-modifier" id="nc-rule-modifier"></div>
<div class="nc-equation" id="nc-equation"></div>
</div>
<div class="nc-answers" id="nc-answers">
<button class="nc-answer-btn" id="nc-ans-0"></button>
<button class="nc-answer-btn" id="nc-ans-1"></button>
<button class="nc-answer-btn" id="nc-ans-2"></button>
<button class="nc-answer-btn" id="nc-ans-3"></button>
</div>
<div class="nc-playing-hint"><strong>1-4</strong> responder &middot; <strong>Esc</strong> pausar</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="nc-pause-btn" type="button">Pausar</button>
<button class="gk-finish-btn" id="nc-finish-btn" type="button">Terminar</button>
</div>
</div>

<div id="nc-pause-overlay">
<div class="nc-pause-text">Pausado</div>
<button class="nc-btn-primary" id="nc-resume-btn">Reanudar</button>
</div>

<div id="nc-complete-overlay">
<div class="nc-complete-card">
<button class="gk-complete-close" id="nc-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="nc-trophy">&#127942;</div>
<h2>Fin</h2>
<div class="nc-final-score" id="nc-final-score">0</div>
<div id="nc-new-best" class="nc-new-best" style="display:none;">&#11088; &iexcl;Nuevo r&eacute;cord!</div>
<div class="gk-challenge-result" id="nc-challenge-result" style="display:none;"></div>
<div class="nc-complete-stats">
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Nivel alcanzado</div>
<div class="nc-complete-stat-value" id="nc-final-level">1</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Precisi&oacute;n</div>
<div class="nc-complete-stat-value" id="nc-final-accuracy">0%</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Mejor racha</div>
<div class="nc-complete-stat-value" id="nc-final-streak">0</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">R&eacute;cord personal</div>
<div class="nc-complete-stat-value" id="nc-final-best">0</div>
</div>
</div>
<div class="nc-complete-actions">
<button class="nc-btn-primary" id="nc-play-again-btn">Jugar de nuevo</button>
<button class="gk-runtime-history-toggle" id="nc-history-toggle">Show History</button>
<a href="/es/games/" class="nc-back-link">&larr; Todos los juegos</a>
</div>
<div class="gk-runtime-history-panel" id="nc-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="nc-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="nc-share-btn">&#128279; Compartir</button>
<div class="gk-share-copied" id="nc-share-copied" style="display:none;">Copiado</div>
</div>
</div>
</div>

<div class="nc-level-up-toast" id="nc-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_number-crunch_best';

var challenge = GK.parseChallenge();

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctAnswer: 0,
currentModifier: null,
currentEquation: '',
currentChoices: []
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('nc-instructions');
var elWizard = document.getElementById('nc-wizard');
var elWizardCard = document.getElementById('nc-wizard-card');
var elPlaying = document.getElementById('nc-playing');
var elPauseOverlay = document.getElementById('nc-pause-overlay');
var elCompleteOverlay = document.getElementById('nc-complete-overlay');
var elScore = document.getElementById('nc-score');
var elStreak = document.getElementById('nc-streak');
var elLevel = document.getElementById('nc-level');
var elLevelText = document.getElementById('nc-level-text');
var elModifierBadge = document.getElementById('nc-modifier-badge');
var elProgressFill = document.getElementById('nc-progress-fill');
var elTimerFill = document.getElementById('nc-timer-fill');
var elEquation = document.getElementById('nc-equation');
var elRuleModifier = document.getElementById('nc-rule-modifier');
var elFeedbackFlash = document.getElementById('nc-feedback-flash');
var elFeedbackIcon = document.getElementById('nc-feedback-icon');
var elFinalScore = document.getElementById('nc-final-score');
var elNewBest = document.getElementById('nc-new-best');
var elFinalLevel = document.getElementById('nc-final-level');
var elFinalAccuracy = document.getElementById('nc-final-accuracy');
var elFinalStreak = document.getElementById('nc-final-streak');
var elFinalBest = document.getElementById('nc-final-best');
var elBestDisplay = document.getElementById('nc-best-display');
var elBestScore = document.getElementById('nc-best-score');
var elLevelToast = document.getElementById('nc-level-toast');
var btnStart = document.getElementById('nc-start-btn');
var btnResume = document.getElementById('nc-resume-btn');
var btnPlayAgain = document.getElementById('nc-play-again-btn');
var answerBtns = [
document.getElementById('nc-ans-0'),
document.getElementById('nc-ans-1'),
document.getElementById('nc-ans-2'),
document.getElementById('nc-ans-3')
];

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

/* ── Modifiers ── */
var MODIFIERS = [
{ name: 'Dupl\u00edcalo', apply: function(n) { return n * 2; } },
{ name: 'Suma 10', apply: function(n) { return n + 10; } },
{ name: 'Resta 5', apply: function(n) { return n - 5; } },
{ name: 'Div\u00eddelo a la mitad', apply: function(n) { return Math.round(n / 2); } }
];

function shouldHaveModifier(lvl) {
return lvl >= 6;
}

function getModifier(lvl) {
if (lvl >= 17) {
/* Dual modifier: pick two */
var a = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
var b = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
while (b === a) b = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
return {
name: a.name + ', luego ' + b.name.toLowerCase(),
apply: function(n) { return b.apply(a.apply(n)); }
};
}
if (lvl >= 13) {
/* Pick from all modifiers */
return MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
}
/* L6-12: simpler modifiers only */
var simple = MODIFIERS.slice(0, 2);
return simple[Math.floor(Math.random() * simple.length)];
}

/* ── Generate equation ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pickOperation(lvl) {
var ops;
if (lvl <= 3) ops = ['+', '-'];
else if (lvl <= 5) ops = ['+', '-', '*'];
else ops = ['+', '-', '*', '/'];
return ops[randInt(0, ops.length - 1)];
}

function operandLimit(lvl) {
if (lvl <= 3) return 50;
if (lvl <= 5) return 80;
if (lvl <= 8) return 120;
if (lvl <= 12) return 220;
if (lvl <= 16) return 360;
return 520;
}

function generateEquation(lvl) {
var op = pickOperation(lvl);
var max = operandLimit(lvl);
var a;
var b;
var answer;
var symbol = op;

if (op === '/') {
b = randInt(2, Math.min(12 + lvl, 24));
answer = randInt(2, Math.min(18 + lvl * 2, 80));
a = answer * b;
symbol = '\u00F7';
} else if (op === '*') {
a = randInt(3, Math.min(12 + Math.floor(lvl / 2), 24));
b = randInt(3, Math.min(12 + Math.floor(lvl / 2), 24));
symbol = '\u00D7';
answer = a * b;
} else {
a = randInt(10, max);
b = randInt(5, Math.max(8, Math.floor(max * 0.65)));
if (op === '-' && b > a) {
var swap = a;
a = b;
b = swap;
}
switch (op) {
case '+':
answer = a + b;
break;
case '-':
answer = a - b;
break;
default:
answer = a + b;
}
}

var display = a + ' ' + symbol + ' ' + b + ' = ?';
var modifier = null;
if (shouldHaveModifier(lvl) && Math.random() < 0.7) {
modifier = getModifier(lvl);
answer = modifier.apply(answer);
}

return { display: display, answer: answer, modifier: modifier };
}

function generateChoices(correct) {
var choices = [correct];
var attempts = 0;
while (choices.length < 4 && attempts < 100) {
var offset = randInt(-10, 10);
attempts++;
if (offset === 0) continue;
var wrong = Math.round(correct + offset);
if (wrong < 0) wrong = Math.abs(wrong);
if (wrong !== correct && choices.indexOf(wrong) === -1) {
choices.push(wrong);
}
}
while (choices.length < 4) {
var fallback = Math.round(correct + choices.length + attempts + 1);
if (fallback < 0) fallback = Math.abs(fallback);
if (fallback !== correct && choices.indexOf(fallback) === -1) choices.push(fallback);
else attempts++;
}
for (var i = choices.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = choices[i];
choices[i] = choices[j];
choices[j] = temp;
}
return choices;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}


var runHistory = createRuntimeHistory('nc-history-toggle', 'nc-history-panel', 'nc-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
list.innerHTML = entries.map(function(entry) {
return '<div class="gk-runtime-history-row ' + (entry.correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong') + '">' +
'<div class="gk-runtime-history-main"><div class="gk-runtime-history-detail">' + entry.html + '</div>' +
'<div class="gk-runtime-history-status">' + (entry.correct ? 'Correct' : 'Wrong') + '</div></div></div>';
}).join('');
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel || !toggle) return;
render();
var open = panel.style.display !== 'none';
panel.style.display = open ? 'none' : '';
toggle.textContent = open ? 'Show History' : 'Hide History';
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

function recordAnswerHistory(selectedValue, correct) {
var selected = selectedValue === null || selectedValue === undefined ? 'No answer' : selectedValue;
var html = '<strong>' + runHistory.escape(state.currentEquation) + '</strong>';
if (state.currentModifier) {
html += '<div class="gk-runtime-history-sub">Rule: ' + runHistory.escape(state.currentModifier.name) + '</div>';
}
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(selected) + ' | Correct: ' + runHistory.escape(state.correctAnswer) + '</div>';
runHistory.pushHtml(correct, html);
}

function renderAnswerHistory() {
runHistory.render();
}

function resetHistoryPanel() {
runHistory.resetPanel();
}
/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
if (shouldHaveModifier(state.level)) {
elModifierBadge.style.display = '';
elModifierBadge.textContent = 'Extra';
} else {
elModifierBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('nc-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('nc-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('nc-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'nc-feedback-flash';
elFeedbackIcon.className = 'nc-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('nc-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('nc-show-check');
} else {
elFeedbackFlash.classList.add('nc-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('nc-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'nc-feedback-flash';
elFeedbackIcon.className = 'nc-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = '\u00a1Level ' + level + '!';
elLevelToast.classList.add('nc-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('nc-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'nc-correct-flash' : 'nc-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('nc-correct-flash', 'nc-wrong-flash');
}, 400);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var chosenValue = parseInt(answerBtns[chosenIdx].textContent, 10);
var correct = (chosenValue === state.correctAnswer);

state.totalAnswered++;
recordAnswerHistory(chosenValue, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordAnswerHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

var eq = generateEquation(state.level);
state.correctAnswer = eq.answer;
state.currentModifier = eq.modifier;
state.currentEquation = eq.display;

elEquation.textContent = eq.display;
elEquation.style.animation = 'none';
void elEquation.offsetWidth;
elEquation.style.animation = '';

if (eq.modifier) {
elRuleModifier.textContent = eq.modifier.name;
elRuleModifier.style.display = '';
} else {
elRuleModifier.style.display = 'none';
}

var choices = generateChoices(eq.answer);
state.currentChoices = choices.slice();
for (var i = 0; i < 4; i++) {
answerBtns[i].textContent = choices[i];
}

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'nc-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'nc-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'nc-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.nc-trophy');
var title = document.querySelector('#nc-complete-overlay .nc-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = '\u00a1INCRE\u00cdBLE!';
elNewBest.className = 'nc-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F \u00a1INCRE\u00cdBLE! \u00a1Nuevo r\u00e9cord!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = '\u00a1Buen trabajo!';
elNewBest.className = 'nc-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('nc-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();
renderAnswerHistory();
resetHistoryPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var NC_WIZARD_STEPS = [
{icon: '\uD83E\uDDEE', title: 'Resuelve', desc: 'Elige la respuesta.'},
{icon: '\u2728', title: 'Pasos extra', desc: 'Nivel 6+: aparecen en la ecuaci\u00f3n.'},
{icon: '\u26A1', title: 'R\u00e1pido', desc: 'Responde antes de que acabe el tiempo.', final: true}
];
var ncWizardStep = 0;

function renderWizardStep() {
var s = NC_WIZARD_STEPS[ncWizardStep];
var dotsHtml = '';
for (var i = 0; i < NC_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="nc-wizard-dot' + (i === ncWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Comenzar' : 'Siguiente';
elWizardCard.innerHTML =
'<div class="nc-wizard-icon">' + s.icon + '</div>' +
'<div class="nc-wizard-title">' + s.title + '</div>' +
'<div class="nc-wizard-desc">' + s.desc + '</div>' +
'<div class="nc-wizard-dots">' + dotsHtml + '</div>' +
'<button class="nc-wizard-btn" id="nc-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'nc-wizard-enter 0.3s ease-out';
document.getElementById('nc-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ncWizardStep < NC_WIZARD_STEPS.length - 1) {
ncWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ncWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctAnswer = 0;
state.currentModifier = null;
state.currentEquation = '';
state.currentChoices = [];
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('nc-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('nc-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});


for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('nc-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('nc-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('nc-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('nc-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Number Crunch', '/es/games/number-crunch/', 'nc-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
var answerIndex = -1;
if (e.key >= '1' && e.key <= '4') {
answerIndex = parseInt(e.key, 10) - 1;
} else if (e.code) {
var keyMatch = e.code.match(/^(?:Digit|Numpad)([1-4])$/);
if (keyMatch) answerIndex = parseInt(keyMatch[1], 10) - 1;
}
if (answerIndex >= 0) {
e.preventDefault();
processAnswer(answerIndex);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('nc-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Pattern Path - Juego de Entrenamiento Mental
URL: https://guruka.com/es/games/pattern-path/
Description: Completa patrones visuales.

<style>
#pattern-path-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #pattern-path-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#pp-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.pp-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#pp-instructions .pp-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#pp-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: #14b8a6;
}

#pp-instructions .pp-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #pp-instructions .pp-subtitle {
color: var(--color-dark-text-secondary);
}

#pp-instructions .pp-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #pp-instructions .pp-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#pp-instructions .pp-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: #14b8a6;
}

#pp-instructions .pp-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#pp-instructions .pp-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.pp-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.pp-personal-best strong {
color: #14b8a6;
}

/* ── Buttons ── */
.pp-btn-primary {
background: #14b8a6;
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.pp-btn-primary:hover {
background: #0d9488;
}

.pp-btn-primary:active {
transform: scale(0.97);
}

.pp-btn-secondary {
background: transparent;
color: #14b8a6;
border: 1px solid #14b8a6;
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.pp-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .pp-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#pp-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#pp-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: pp-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #pp-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes pp-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pp-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.pp-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.pp-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .pp-wizard-desc {
color: var(--color-dark-text-secondary);
}
.pp-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.pp-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.pp-wizard-dot.active {
background: #14b8a6;
transform: scale(1.3);
}
[data-theme="dark"] .pp-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .pp-wizard-dot.active {
background: #14b8a6;
}
.pp-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: #14b8a6;
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.pp-wizard-btn:hover {
background: #0d9488;
}
@media (max-width: 400px) {
#pp-wizard-card {
padding: 1.5rem 1rem;
}
.pp-wizard-icon {
font-size: 2rem;
}
.pp-wizard-title {
font-size: 1.1rem;
}
.pp-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#pp-playing {
display: none;
flex: 1;
flex-direction: column;
}

.pp-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .pp-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-stat {
text-align: center;
}

.pp-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .pp-stat-label {
color: var(--color-dark-text-secondary);
}

.pp-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.pp-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.pp-level-text {
font-weight: 600;
}

.pp-difficulty-badge {
background: #14b8a6;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.pp-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .pp-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-progress-fill {
height: 100%;
background: #14b8a6;
border-radius: 3px;
transition: width 0.3s ease;
}

.pp-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .pp-timer-bar {
background: var(--color-dark-bg-secondary);
}

.pp-timer-fill {
height: 100%;
background: #14b8a6;
border-radius: 2px;
transition: width 0.05s linear;
}

.pp-timer-fill.pp-timer-warning {
background: #ef4444;
}

/* ── Pattern Display Area ── */
.pp-pattern-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
}

.pp-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.pp-feedback-flash.pp-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.pp-feedback-flash.pp-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.pp-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.pp-feedback-icon.pp-show-check {
animation: pp-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.pp-feedback-icon.pp-show-x {
animation: pp-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes pp-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.pp-sequence-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
animation: pp-seq-enter 0.3s ease-out;
}

@keyframes pp-seq-enter {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.pp-seq-element {
width: 70px;
height: 70px;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-primary, #fff);
}

[data-theme="dark"] .pp-seq-element {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-seq-element svg {
display: block;
}

.pp-seq-missing {
border: 2px dashed #14b8a6;
background: rgba(20, 184, 166, 0.05);
font-size: 1.75rem;
font-weight: 700;
color: #14b8a6;
}

[data-theme="dark"] .pp-seq-missing {
background: rgba(20, 184, 166, 0.1);
}

.pp-seq-arrow {
font-size: 1.25rem;
color: var(--color-text-secondary);
flex-shrink: 0;
}

[data-theme="dark"] .pp-seq-arrow {
color: var(--color-dark-text-secondary);
}

/* ── Answer Choice Buttons ── */
.pp-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.pp-answer-btn {
padding: 0.75rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
}

[data-theme="dark"] .pp-answer-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.pp-answer-btn:active {
transform: scale(0.95);
}

.pp-answer-btn:hover {
border-color: #14b8a6;
background: rgba(20, 184, 166, 0.05);
}

[data-theme="dark"] .pp-answer-btn:hover {
background: rgba(20, 184, 166, 0.15);
}

.pp-answer-btn svg {
display: block;
}

.pp-answer-btn.pp-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.pp-answer-btn.pp-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.pp-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#pp-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#pp-pause-overlay .pp-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#pp-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.pp-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: pp-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .pp-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes pp-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.pp-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.pp-complete-card .pp-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.pp-final-score {
font-size: 2.5rem;
font-weight: 800;
color: #14b8a6;
margin: 0.5rem 0;
}

.pp-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: pp-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes pp-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.pp-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.pp-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .pp-complete-stat {
background: var(--color-dark-bg-secondary);
}

.pp-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.pp-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.pp-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.pp-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .pp-back-link {
color: var(--color-dark-text-secondary);
}

.pp-back-link:hover {
color: #14b8a6;
text-decoration: underline;
}

/* ── Level Up Toast ── */
.pp-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #14b8a6;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.pp-level-up-toast.pp-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#pattern-path-game {
padding: 0.5rem;
}
.pp-seq-element {
width: 56px;
height: 56px;
}
.pp-seq-arrow {
font-size: 1rem;
}
.pp-answer-btn {
padding: 0.5rem;
min-height: 64px;
}
.pp-header {
padding: 0.5rem;
gap: 0.25rem;
}
.pp-stat-value {
font-size: 1rem;
}
#pp-instructions { padding: 0.75rem 0.5rem; }
#pp-instructions .pp-icon { font-size: 2rem; margin-bottom: 0; }
#pp-instructions h2 { font-size: 1.3rem; }
#pp-instructions .pp-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#pp-instructions .pp-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#pp-instructions .pp-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.pp-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#pattern-path-game {
padding: 0.75rem;
}
.pp-seq-element {
width: 62px;
height: 62px;
}
.pp-answer-btn {
padding: 0.625rem;
min-height: 72px;
}
}
@media (max-width: 360px) {
.pp-seq-element {
width: 48px;
height: 48px;
}
.pp-seq-arrow {
font-size: 0.85rem;
}
.pp-sequence-row {
gap: 0.3rem;
}
.pp-answer-btn {
padding: 0.4rem;
min-height: 56px;
}
.pp-complete-stats {
grid-template-columns: 1fr 1fr;
}
.pp-final-score {
font-size: 2rem;
}
.pp-header {
padding: 0.375rem;
}
.pp-stat-value {
font-size: 0.9rem;
}
}
@keyframes pp-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.pp-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.pp-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: pp-confetti-fall 2.5s ease-in forwards;
}
.pp-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(20,184,166,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: pp-glow-fade 1s ease-out forwards;
}
@keyframes pp-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.pp-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: pp-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(20,184,166,0.4);
}
@keyframes pp-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#pattern-path-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#pattern-path-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #pattern-path-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#pattern-path-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#pattern-path-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="pattern-path-game">

<div id="pp-instructions">
<div class="pp-title-row"><span class="pp-icon">&#129513;</span><h2>Pattern Path</h2></div>
<p class="pp-subtitle">Reconocimiento visual de patrones e inteligencia fluida</p>
<div class="pp-how-to">
<h3>C&oacute;mo Jugar</h3>
<ol>
<li>Aparece una secuencia de formas con un <strong>elemento faltante</strong> (?).</li>
<li>Identifica el patr&oacute;n (cambios de color, forma, tama&ntilde;o o rotaci&oacute;n).</li>
<li>Elige la <strong>opci&oacute;n correcta</strong> entre 4 opciones.</li>


</ol>
</div>
<div id="pp-best-display" class="pp-personal-best" style="display:none;">
R&eacute;cord: <strong id="pp-best-score">0</strong> puntos
</div>
<button class="pp-btn-primary" id="pp-start-btn">Iniciar</button>
<div id="pp-challenge-banner-wrap"></div>
</div>

<div id="pp-wizard">
<div id="pp-wizard-card"></div>
</div>

<div id="pp-playing">
<div class="pp-header">
<div class="pp-stat">
<div class="pp-stat-label">Puntos</div>
<div class="pp-stat-value" id="pp-score">0</div>
</div>
<div class="pp-stat">
<div class="pp-stat-label">Racha</div>
<div class="pp-stat-value" id="pp-streak">0</div>
</div>
<div class="pp-stat">
<div class="pp-stat-label">Level</div>
<div class="pp-stat-value" id="pp-level">1</div>
</div>
</div>
<div class="pp-level-info">
<span class="pp-level-text">Level <span id="pp-level-text">1</span></span>
<span class="pp-difficulty-badge" id="pp-difficulty-badge">Colores</span>
</div>
<div class="pp-progress-bar">
<div class="pp-progress-fill" id="pp-progress-fill" style="width:0%"></div>
</div>
<div class="pp-timer-bar">
<div class="pp-timer-fill" id="pp-timer-fill" style="width:100%"></div>
</div>
<div class="pp-pattern-area">
<div class="pp-feedback-flash" id="pp-feedback-flash"></div>
<div class="pp-feedback-icon" id="pp-feedback-icon"></div>
<div class="pp-sequence-row" id="pp-sequence-row"></div>
</div>
<div class="pp-answers" id="pp-answers">
<button class="pp-answer-btn" id="pp-ans-0"></button>
<button class="pp-answer-btn" id="pp-ans-1"></button>
<button class="pp-answer-btn" id="pp-ans-2"></button>
<button class="pp-answer-btn" id="pp-ans-3"></button>
</div>
<div class="pp-playing-hint"><strong>1-4</strong> responder &middot; <strong>Esc</strong> pausar</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="pp-pause-btn" type="button">Pausar</button>
<button class="gk-finish-btn" id="pp-finish-btn" type="button">Terminar</button>
</div>
</div>

<div id="pp-pause-overlay">
<div class="pp-pause-text">Pausado</div>
<button class="pp-btn-primary" id="pp-resume-btn">Reanudar</button>
</div>

<div id="pp-complete-overlay">
<div class="pp-complete-card">
<button class="gk-complete-close" id="pp-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="pp-trophy">&#127942;</div>
<h2>Fin</h2>
<div class="pp-final-score" id="pp-final-score">0</div>
<div id="pp-new-best" class="pp-new-best" style="display:none;">&#11088; &iexcl;Nuevo r&eacute;cord!</div>
<div class="gk-challenge-result" id="pp-challenge-result" style="display:none;"></div>
<div class="pp-complete-stats">
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Nivel alcanzado</div>
<div class="pp-complete-stat-value" id="pp-final-level">1</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Precisi&oacute;n</div>
<div class="pp-complete-stat-value" id="pp-final-accuracy">0%</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Mejor racha</div>
<div class="pp-complete-stat-value" id="pp-final-streak">0</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">R&eacute;cord personal</div>
<div class="pp-complete-stat-value" id="pp-final-best">0</div>
</div>
</div>
<div class="pp-complete-actions">
<button class="pp-btn-primary" id="pp-play-again-btn">Jugar de nuevo</button>
<button class="gk-runtime-history-toggle" id="pp-history-toggle" type="button">Show History</button>
<a href="/es/games/" class="pp-back-link">&larr; Todos los juegos</a>
</div>
<div class="gk-runtime-history-panel" id="pp-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="pp-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="pp-share-btn">&#128279; Compartir</button>
<div class="gk-share-copied" id="pp-share-copied" style="display:none;">Copiado</div>
</div>
</div>
</div>

<div class="pp-level-up-toast" id="pp-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_pattern-path_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('pp-history-toggle', 'pp-history-panel', 'pp-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctChoiceIdx: -1,
correctChoice: null,
currentChoices: []
};

/* ── Shape / Color / Size definitions ── */
var SHAPES = ['circle', 'square', 'triangle'];
var COLORS = ['#ef4444', '#3b82f6', '#22c55e', '#eab308', '#a855f7', '#f97316'];
var COLOR_NAMES = { '#ef4444': 'red', '#3b82f6': 'blue', '#22c55e': 'green', '#eab308': 'yellow', '#a855f7': 'purple', '#f97316': 'orange' };
var SIZES = [30, 45, 60];
var SIZE_NAMES = ['small', 'medium', 'large'];
var ROTATIONS = [0, 90, 180, 270];

/* ── DOM refs ── */
var elInstructions = document.getElementById('pp-instructions');
var elWizard = document.getElementById('pp-wizard');
var elWizardCard = document.getElementById('pp-wizard-card');
var elPlaying = document.getElementById('pp-playing');
var elPauseOverlay = document.getElementById('pp-pause-overlay');
var elCompleteOverlay = document.getElementById('pp-complete-overlay');
var elScore = document.getElementById('pp-score');
var elStreak = document.getElementById('pp-streak');
var elLevel = document.getElementById('pp-level');
var elLevelText = document.getElementById('pp-level-text');
var elDifficultyBadge = document.getElementById('pp-difficulty-badge');
var elProgressFill = document.getElementById('pp-progress-fill');
var elTimerFill = document.getElementById('pp-timer-fill');
var elSequenceRow = document.getElementById('pp-sequence-row');
var elFeedbackFlash = document.getElementById('pp-feedback-flash');
var elFeedbackIcon = document.getElementById('pp-feedback-icon');
var elFinalScore = document.getElementById('pp-final-score');
var elNewBest = document.getElementById('pp-new-best');
var elFinalLevel = document.getElementById('pp-final-level');
var elFinalAccuracy = document.getElementById('pp-final-accuracy');
var elFinalStreak = document.getElementById('pp-final-streak');
var elFinalBest = document.getElementById('pp-final-best');
var elBestDisplay = document.getElementById('pp-best-display');
var elBestScore = document.getElementById('pp-best-score');
var elLevelToast = document.getElementById('pp-level-toast');
var btnStart = document.getElementById('pp-start-btn');
var btnResume = document.getElementById('pp-resume-btn');
var btnPlayAgain = document.getElementById('pp-play-again-btn');
var answerBtns = [
document.getElementById('pp-ans-0'),
document.getElementById('pp-ans-1'),
document.getElementById('pp-ans-2'),
document.getElementById('pp-ans-3')
];

/* ── SVG Shape Rendering ── */
function renderShape(shape, color, size, rotation) {
var vb = '0 0 60 60';
var inner = '';
if (shape === 'circle') {
var r = Math.round(size * 25 / 60);
inner = '<circle cx="30" cy="30" r="' + r + '" fill="' + color + '"/>';
} else if (shape === 'square') {
var half = Math.round(size * 50 / 60);
var off = Math.round((60 - half) / 2);
inner = '<rect x="' + off + '" y="' + off + '" width="' + half + '" height="' + half + '" fill="' + color + '" transform="rotate(' + rotation + ' 30 30)"/>';
} else if (shape === 'triangle') {
var h = Math.round(size * 50 / 60);
var topY = 30 - Math.round(h / 2);
var botY = 30 + Math.round(h / 2);
var leftX = 30 - Math.round(h / 2);
var rightX = 30 + Math.round(h / 2);
inner = '<polygon points="30,' + topY + ' ' + rightX + ',' + botY + ' ' + leftX + ',' + botY + '" fill="' + color + '" transform="rotate(' + rotation + ' 30 30)"/>';
}
return '<svg viewBox="' + vb + '" width="' + size + '" height="' + size + '">' + inner + '</svg>';
}

/* ── Level parameters ── */
function getDisplayTime(lvl) {
if (lvl <= 3) return 10000;
if (lvl <= 6) return 8000;
if (lvl <= 9) return 7000;
if (lvl <= 12) return 6000;
if (lvl <= 16) return 5000;
return 4000;
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getSeqLength(lvl) {
if (lvl <= 6) return 3;
if (lvl <= 12) return 4;
return 5;
}

function getDifficultyLabel(lvl) {
if (lvl <= 3) return 'Colores';
if (lvl <= 6) return 'Formas';
if (lvl <= 9) return 'Color + Forma';
if (lvl <= 12) return 'Rotaci\u00f3n';
if (lvl <= 16) return 'Tama\u00f1o + Cantidad';
return 'Multi-Atributo';
}

/* ── Utility ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pick(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
return arr;
}

function cloneEl(el) {
return { shape: el.shape, color: el.color, size: el.size, rotation: el.rotation };
}

function elEquals(a, b) {
return a.shape === b.shape && a.color === b.color && a.size === b.size && a.rotation === b.rotation;
}

function indexOfValue(arr, value) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === value) return i;
}
return -1;
}

function getVisualRotation(shape, rotation) {
return shape === 'triangle' ? rotation : 0;
}

function getVisualIndexes(el) {
if (!el) return null;
var rotation = getVisualRotation(el.shape, el.rotation);
var idx = [
indexOfValue(SHAPES, el.shape),
indexOfValue(COLORS, el.color),
indexOfValue(SIZES, el.size),
indexOfValue(ROTATIONS, rotation)
];
for (var i = 0; i < idx.length; i++) {
if (idx[i] < 0) return null;
}
return idx;
}

function visuallyEquals(a, b) {
var ai = getVisualIndexes(a);
var bi = getVisualIndexes(b);
return !!ai && !!bi &&
ai[0] === bi[0] &&
ai[1] === bi[1] &&
ai[2] === bi[2] &&
ai[3] === bi[3];
}

function createChoiceSeenMatrix() {
var seen = [];
for (var s = 0; s < SHAPES.length; s++) {
seen[s] = [];
for (var c = 0; c < COLORS.length; c++) {
seen[s][c] = [];
for (var z = 0; z < SIZES.length; z++) {
seen[s][c][z] = [];
for (var r = 0; r < ROTATIONS.length; r++) {
seen[s][c][z][r] = false;
}
}
}
}
return seen;
}

function markChoiceSeen(seen, el) {
var idx = getVisualIndexes(el);
if (!idx) return false;
if (seen[idx[0]][idx[1]][idx[2]][idx[3]]) return false;
seen[idx[0]][idx[1]][idx[2]][idx[3]] = true;
return true;
}

/* ── Pattern Generation ── */
function generatePattern(lvl) {
var seqLen = getSeqLength(lvl);
var sequence = [];
var correct;

if (lvl <= 3) {
/* Single attribute: color changes in sequence */
var colorSeq = shuffle(COLORS.slice()).slice(0, seqLen + 1);
var baseShape = pick(SHAPES);
var baseSize = 45;
for (var i = 0; i <= seqLen; i++) {
sequence.push({ shape: baseShape, color: colorSeq[i % colorSeq.length], size: baseSize, rotation: 0 });
}
correct = sequence.pop();

} else if (lvl <= 6) {
/* Shape patterns: circle -> square -> triangle -> ... */
var baseColor = pick(COLORS);
var baseSize2 = 45;
for (var i = 0; i <= seqLen; i++) {
sequence.push({ shape: SHAPES[i % SHAPES.length], color: baseColor, size: baseSize2, rotation: 0 });
}
correct = sequence.pop();

} else if (lvl <= 9) {
/* 2-attribute: color + shape both change */
var colorPool = shuffle(COLORS.slice());
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorPool[i % colorPool.length],
size: 45,
rotation: 0
});
}
correct = sequence.pop();

} else if (lvl <= 12) {
/* Rotation patterns: shapes rotate 0 -> 90 -> 180 -> 270 */
var baseShape3 = 'triangle';
var baseColor3 = pick(COLORS);
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: baseShape3,
color: baseColor3,
size: 45,
rotation: ROTATIONS[i % ROTATIONS.length]
});
}
correct = sequence.pop();

} else if (lvl <= 16) {
/* Size + shape changes */
var colorBase = pick(COLORS);
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorBase,
size: SIZES[i % SIZES.length],
rotation: 0
});
}
correct = sequence.pop();

} else {
/* L17-20: 3 attributes changing (shape + color + size) */
var colorPool2 = shuffle(COLORS.slice());
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorPool2[i % colorPool2.length],
size: SIZES[i % SIZES.length],
rotation: ROTATIONS[i % ROTATIONS.length]
});
}
correct = sequence.pop();
}

return { sequence: sequence, correct: correct };
}

function buildChoiceCandidates(correct, lvl) {
var shapes = [correct.shape];
var colors = [correct.color];
var sizes = [correct.size];
var rotations = [correct.rotation];

if (lvl <= 3) {
colors = COLORS.slice();
} else if (lvl <= 6) {
shapes = SHAPES.slice();
colors = COLORS.slice();
} else if (lvl <= 9) {
shapes = SHAPES.slice();
colors = COLORS.slice();
} else if (lvl <= 12) {
rotations = ROTATIONS.slice();
} else if (lvl <= 16) {
shapes = SHAPES.slice();
sizes = SIZES.slice();
} else {
shapes = SHAPES.slice();
colors = COLORS.slice();
sizes = SIZES.slice();
rotations = ROTATIONS.slice();
}

var candidates = [];
for (var s = 0; s < shapes.length; s++) {
for (var c = 0; c < colors.length; c++) {
for (var z = 0; z < sizes.length; z++) {
for (var r = 0; r < rotations.length; r++) {
candidates.push({
shape: shapes[s],
color: colors[c],
size: sizes[z],
rotation: rotations[r]
});
}
}
}
}
return candidates;
}

function addUniqueChoice(choices, seen, candidate) {
if (!markChoiceSeen(seen, candidate)) return false;
choices.push(cloneEl(candidate));
return true;
}

function generateChoices(correct, lvl) {
var choices = [];
var seen = createChoiceSeenMatrix();
addUniqueChoice(choices, seen, correct);
var candidates = shuffle(buildChoiceCandidates(correct, lvl));

for (var i = 0; i < candidates.length && choices.length < 4; i++) {
addUniqueChoice(choices, seen, candidates[i]);
}

if (choices.length < 4) {
var fallback = shuffle(buildChoiceCandidates(correct, MAX_LEVEL));
for (var j = 0; j < fallback.length && choices.length < 4; j++) {
addUniqueChoice(choices, seen, fallback[j]);
}
}

return shuffle(choices);
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
elDifficultyBadge.textContent = getDifficultyLabel(state.level);
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('pp-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('pp-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('pp-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'pp-feedback-flash';
elFeedbackIcon.className = 'pp-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('pp-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('pp-show-check');
} else {
elFeedbackFlash.classList.add('pp-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('pp-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'pp-feedback-flash';
elFeedbackIcon.className = 'pp-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('pp-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('pp-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'pp-correct-flash' : 'pp-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('pp-correct-flash', 'pp-wrong-flash');
}, 400);
}

/* ── Render sequence display ── */
function renderSequence(sequence) {
var html = '';
for (var i = 0; i < sequence.length; i++) {
var el = sequence[i];
html += '<div class="pp-seq-element">';
html += renderShape(el.shape, el.color, el.size, el.rotation);
html += '</div>';
if (i < sequence.length) {
html += '<div class="pp-seq-arrow">\u2192</div>';
}
}
/* Missing element placeholder */
html += '<div class="pp-seq-element pp-seq-missing">?</div>';
elSequenceRow.innerHTML = html;
}

/* ── Render choice buttons ── */
function renderChoices(choices) {
for (var i = 0; i < 4; i++) {
var el = choices[i];
answerBtns[i].innerHTML = renderShape(el.shape, el.color, el.size, el.rotation);
}
}

function recordPatternHistory(selectedChoice, correct) {
var html = '<strong>Missing shape</strong>';
html += '<div class="gk-runtime-history-sub">Your: ' + (selectedChoice ? renderShape(selectedChoice.shape, selectedChoice.color, selectedChoice.size, selectedChoice.rotation) : 'No answer') + ' | Correct: ' + renderShape(state.correctChoice.shape, state.correctChoice.color, state.correctChoice.size, state.correctChoice.rotation) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var selectedChoice = state.currentChoices[chosenIdx];
var correct = selectedChoice ? visuallyEquals(selectedChoice, state.correctChoice) : false;

state.totalAnswered++;
recordPatternHistory(selectedChoice, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 2000) {
points += Math.floor((2000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordPatternHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

var pattern = generatePattern(state.level);
var choices = generateChoices(pattern.correct, state.level);

/* Find correct choice index */
state.correctChoice = cloneEl(pattern.correct);
state.currentChoices = choices.map(cloneEl);
state.correctChoiceIdx = -1;
for (var i = 0; i < choices.length; i++) {
if (visuallyEquals(choices[i], state.correctChoice)) {
state.correctChoiceIdx = i;
break;
}
}

renderSequence(pattern.sequence);
renderChoices(choices);

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#14b8a6','#ef4444','#22c55e','#3b82f6','#a855f7','#f97316'];
var container = document.createElement('div');
container.className = 'pp-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'pp-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'pp-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.pp-trophy');
var title = document.querySelector('#pp-complete-overlay .pp-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = '\u00a1INCRE\u00cdBLE!';
elNewBest.className = 'pp-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F \u00a1INCRE\u00cdBLE! \u00a1Nuevo r\u00e9cord!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = '\u00a1Buen trabajo!';
elNewBest.className = 'pp-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('pp-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var PP_WIZARD_STEPS = [
{icon: '\uD83E\uDDE9', title: 'Encuentra el patr\u00f3n faltante', desc: 'Aparece una secuencia de formas con un elemento faltante. \u00a1Identifica el patr\u00f3n!'},
{icon: '\uD83C\uDFA8', title: 'Los atributos cambian', desc: 'Los patrones involucran color, forma, tama\u00f1o y rotaci\u00f3n. Los niveles superiores combinan m\u00faltiples atributos.'},
{icon: '\u26A1', title: '\u00a1S\u00e9 r\u00e1pido!', desc: '\u00a1Elige la forma correcta antes de que se acabe el tiempo. La velocidad y las rachas otorgan puntos extra!', final: true}
];
var ppWizardStep = 0;

function renderWizardStep() {
var s = PP_WIZARD_STEPS[ppWizardStep];
var dotsHtml = '';
for (var i = 0; i < PP_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="pp-wizard-dot' + (i === ppWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Comenzar' : 'Siguiente';
elWizardCard.innerHTML =
'<div class="pp-wizard-icon">' + s.icon + '</div>' +
'<div class="pp-wizard-title">' + s.title + '</div>' +
'<div class="pp-wizard-desc">' + s.desc + '</div>' +
'<div class="pp-wizard-dots">' + dotsHtml + '</div>' +
'<button class="pp-wizard-btn" id="pp-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'pp-wizard-enter 0.3s ease-out';
document.getElementById('pp-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ppWizardStep < PP_WIZARD_STEPS.length - 1) {
ppWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ppWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctChoiceIdx = -1;
state.correctChoice = null;
state.currentChoices = [];
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('pp-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('pp-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('pp-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('pp-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('pp-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('pp-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Pattern Path', '/es/games/pattern-path/', 'pp-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key >= '1' && e.key <= '4') {
e.preventDefault();
processAnswer(parseInt(e.key, 10) - 1);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('pp-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Sequence Recall - Juego de Entrenamiento Cerebral
URL: https://guruka.com/es/games/sequence-recall/
Description: Repite secuencias de color.

<style>
#sequence-recall-game {
max-width: 600px;
margin: 0 auto;
padding: 1.5rem 1rem 3rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary, #1a2332);
-webkit-tap-highlight-color: transparent;
}

#sequence-recall-game * {
box-sizing: border-box;
}

#sequence-recall-game .sr-card {
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

[data-theme="dark"] #sequence-recall-game .sr-card {
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

#sequence-recall-game .sr-title {
font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 1.75rem;
font-weight: 700;
text-align: center;
margin: 0 0 0.25rem;
letter-spacing: -0.025em;
}

#sequence-recall-game .sr-subtitle {
text-align: center;
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.95rem;
margin: 0 0 1.5rem;
}

#sequence-recall-game .sr-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#sequence-recall-game .sr-icon {
display: flex;
justify-content: center;
margin-bottom: 0;
font-size: 2rem;
}

#sequence-recall-game .sr-instructions-list {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
}

#sequence-recall-game .sr-instructions-list li {
padding: 0.5rem 0;
padding-left: 1.75rem;
position: relative;
font-size: 0.95rem;
color: var(--color-text-primary, #1a2332);
line-height: 1.5;
}

#sequence-recall-game .sr-instructions-list li::before {
content: attr(data-num);
position: absolute;
left: 0;
top: 0.5rem;
width: 1.25rem;
height: 1.25rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 50%;
font-size: 0.7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}

#sequence-recall-game .sr-best-score {
text-align: center;
padding: 0.75rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
margin-bottom: 1.25rem;
font-size: 0.9rem;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-best-score strong {
color: var(--color-text-primary, #1a2332);
font-weight: 700;
}

#sequence-recall-game .sr-btn-primary {
display: block;
width: 100%;
padding: 0.875rem 1.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.5rem;
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
text-align: center;
text-decoration: none;
}

#sequence-recall-game .sr-btn-primary:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#sequence-recall-game .sr-btn-primary:active {
transform: translateY(0);
}

#sequence-recall-game .sr-btn-secondary {
display: inline-block;
margin-top: 0.75rem;
padding: 0.5rem 1rem;
background: transparent;
color: var(--color-primary, #0f9072);
border: 1px solid var(--color-primary, #0f9072);
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
text-align: center;
}

#sequence-recall-game .sr-btn-secondary:hover {
background: color-mix(in srgb, var(--color-primary, #0f9072) 10%, transparent);
}

/* Wizard overlay */
#sequence-recall-game .sr-wizard-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#sequence-recall-game .sr-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sr-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-card {
background: var(--color-dark-bg-primary, #1e293b);
color: var(--color-dark-text-primary, #e2e8f0);
}
@keyframes sr-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
#sequence-recall-game .sr-wizard-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
#sequence-recall-game .sr-wizard-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
#sequence-recall-game .sr-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary, #4b5b6d);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-desc {
color: var(--color-dark-text-secondary, #94a3b8);
}
#sequence-recall-game .sr-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
#sequence-recall-game .sr-wizard-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
#sequence-recall-game .sr-wizard-dot.active {
background: var(--color-primary, #0f9072);
transform: scale(1.3);
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-dot.active {
background: var(--color-primary, #0f9072);
}
#sequence-recall-game .sr-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary, #0f9072);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
#sequence-recall-game .sr-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#sequence-recall-game .sr-wizard-card { padding: 1.5rem 1rem; }
#sequence-recall-game .sr-wizard-icon { font-size: 2rem; }
#sequence-recall-game .sr-wizard-title { font-size: 1.1rem; }
#sequence-recall-game .sr-wizard-desc { font-size: 0.85rem; }
#sequence-recall-game .sr-icon { font-size: 1.5rem; margin-bottom: 0; }
#sequence-recall-game .sr-title { font-size: 1.3rem; }
#sequence-recall-game .sr-subtitle { font-size: 0.85rem; margin-bottom: 1rem; }
#sequence-recall-game .sr-instructions-list li { font-size: 0.85rem; padding: 0.3rem 0; }
}

/* Header bar */
#sequence-recall-game .sr-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 0.85rem;
font-weight: 600;
}

#sequence-recall-game .sr-header-item {
text-align: center;
line-height: 1.3;
}

#sequence-recall-game .sr-header-label {
display: block;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary, #4b5b6d);
font-weight: 500;
}

#sequence-recall-game .sr-header-value {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text-primary, #1a2332);
}

#sequence-recall-game .sr-header-value.sr-streak {
color: #f59e0b;
}

/* Phase indicator */
#sequence-recall-game .sr-phase-label {
text-align: center;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-primary, #0f9072);
margin-bottom: 0.75rem;
}

/* Progress bar */
#sequence-recall-game .sr-progress {
margin-top: 1rem;
}

#sequence-recall-game .sr-progress-label {
text-align: center;
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.35rem;
}

#sequence-recall-game .sr-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 3px;
overflow: hidden;
}

#sequence-recall-game .sr-progress-fill {
height: 100%;
background: var(--color-primary, #0f9072);
border-radius: 3px;
transition: width 0.3s ease;
}

/* Color display area */
#sequence-recall-game .sr-color-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 220px;
padding: 1rem;
}

#sequence-recall-game .sr-color-box {
width: 160px;
height: 160px;
border-radius: 1rem;
animation: sr-color-appear 0.3s ease-out;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

@keyframes sr-color-appear {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .sr-color-counter {
margin-top: 1rem;
font-size: 1rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}

/* Recall area */
#sequence-recall-game .sr-recall-area {
padding: 0.5rem 0;
}

#sequence-recall-game .sr-selected-sequence {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 44px;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
flex-wrap: wrap;
}

#sequence-recall-game .sr-selected-dot {
width: 28px;
height: 28px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
animation: sr-dot-appear 0.2s ease-out;
flex-shrink: 0;
}

@keyframes sr-dot-appear {
0% { transform: scale(0); }
100% { transform: scale(1); }
}

#sequence-recall-game .sr-selected-placeholder {
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-color-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
margin-bottom: 0.75rem;
}

#sequence-recall-game .sr-color-btn {
aspect-ratio: 1;
border: 3px solid transparent;
border-radius: 0.75rem;
cursor: pointer;
transition: all 0.15s ease;
min-height: 70px;
position: relative;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

#sequence-recall-game .sr-color-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#sequence-recall-game .sr-color-btn:active {
transform: scale(0.95);
}

#sequence-recall-game .sr-color-btn .sr-btn-label {
position: absolute;
bottom: 6px;
left: 0;
right: 0;
text-align: center;
font-size: 0.65rem;
font-weight: 600;
color: rgba(255,255,255,0.9);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#sequence-recall-game .sr-undo-row {
display: flex;
gap: 0.5rem;
}

#sequence-recall-game .sr-undo-btn {
flex: 1;
padding: 0.6rem;
border: 1px solid var(--color-border, #dfe4ea);
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
border-radius: 0.5rem;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-undo-btn:hover {
background: var(--color-bg-secondary, #f0f4f8);
}

#sequence-recall-game .sr-submit-btn {
flex: 2;
padding: 0.6rem;
border: none;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-submit-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}

#sequence-recall-game .sr-submit-btn:not(:disabled):hover {
opacity: 0.9;
}

/* Distraction (math) */
#sequence-recall-game .sr-math-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
padding: 1rem;
}

#sequence-recall-game .sr-math-problem {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
font-family: "Space Grotesk", system-ui, sans-serif;
color: var(--color-text-primary, #1a2332);
}

#sequence-recall-game .sr-math-input-row {
display: flex;
gap: 0.5rem;
align-items: center;
}

#sequence-recall-game .sr-math-input {
width: 100px;
padding: 0.6rem 0.75rem;
border: 2px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
font-size: 1.25rem;
text-align: center;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
outline: none;
}

#sequence-recall-game .sr-math-input:focus {
border-color: var(--color-primary, #0f9072);
}

#sequence-recall-game .sr-math-submit {
padding: 0.6rem 1.25rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-math-submit:hover {
opacity: 0.9;
}

#sequence-recall-game .sr-math-hint {
margin-top: 0.75rem;
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
}

/* Positions grid */
#sequence-recall-game .sr-position-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 260px;
padding: 1rem;
}

#sequence-recall-game .sr-position-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
width: 210px;
}

#sequence-recall-game .sr-position-cell {
width: 64px;
height: 64px;
background: var(--color-bg-secondary, #f0f4f8);
border: 2px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
color: transparent;
}

#sequence-recall-game .sr-position-cell:hover {
border-color: var(--color-primary, #0f9072);
}

#sequence-recall-game .sr-position-cell.sr-pos-active {
background: var(--color-primary, #0f9072);
border-color: var(--color-primary, #0f9072);
color: #fff;
}

#sequence-recall-game .sr-position-cell.sr-pos-highlight {
background: var(--color-primary, #0f9072);
border-color: var(--color-primary, #0f9072);
animation: sr-pos-flash 0.4s ease-out;
}

@keyframes sr-pos-flash {
0% { transform: scale(0.8); opacity: 0.5; }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .sr-position-counter {
margin-top: 0.75rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}

/* Feedback overlay */
#sequence-recall-game .sr-feedback {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
animation: sr-feedback-appear 0.3s ease-out;
}

#sequence-recall-game .sr-feedback-correct {
font-size: 1.5rem;
font-weight: 700;
color: #22c55e;
}

#sequence-recall-game .sr-feedback-wrong {
font-size: 1.5rem;
font-weight: 700;
color: #ef4444;
}

#sequence-recall-game .sr-feedback-points {
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text-secondary, #4b5b6d);
margin-top: 0.25rem;
}

@keyframes sr-feedback-appear {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

/* Game complete */
#sequence-recall-game .sr-complete {
position: relative;
text-align: center;
}

#sequence-recall-game .sr-complete-icon {
font-size: 3rem;
margin-bottom: 0.5rem;
}

#sequence-recall-game .sr-complete-title {
font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 1.25rem;
}

#sequence-recall-game .sr-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-bottom: 1.25rem;
}

#sequence-recall-game .sr-stat-box {
padding: 0.75rem 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
text-align: center;
}

#sequence-recall-game .sr-stat-value {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-text-primary, #1a2332);
display: block;
}

#sequence-recall-game .sr-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-new-best {
display: inline-block;
padding: 0.35rem 0.75rem;
background: #f59e0b;
color: #1a2332;
border-radius: 1rem;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 1rem;
animation: sr-badge-pulse 1s ease-in-out infinite alternate;
}

@keyframes sr-badge-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

#sequence-recall-game .sr-complete-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
margin-top: 0.5rem;
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

/* Hide all screens by default */
#sequence-recall-game .sr-screen {
display: none;
}

#sequence-recall-game .sr-screen.sr-active {
display: block;
}

/* Responsive */
@media (max-width: 400px) {
#sequence-recall-game .sr-color-btn {
min-height: 60px;
}
#sequence-recall-game .sr-color-box {
width: 130px;
height: 130px;
}
#sequence-recall-game .sr-position-grid {
width: 180px;
}
#sequence-recall-game .sr-position-cell {
width: 54px;
height: 54px;
}
}
@media (max-width: 640px) {
#sequence-recall-game .sr-color-grid {
gap: 0.5rem;
}
#sequence-recall-game .sr-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 360px) {
#sequence-recall-game .sr-color-btn {
min-height: 50px;
}
#sequence-recall-game .sr-color-box {
width: 110px;
height: 110px;
}
#sequence-recall-game .sr-position-grid {
width: 160px;
}
#sequence-recall-game .sr-position-cell {
width: 48px;
height: 48px;
}
#sequence-recall-game .sr-stats-grid {
grid-template-columns: 1fr 1fr;
}
#sequence-recall-game .sr-selected-dot {
width: 22px;
height: 22px;
}
}
@keyframes sr-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.sr-confetti-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.sr-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: sr-confetti-fall 2.5s ease-in forwards;
}
.sr-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: sr-glow-fade 1s ease-out forwards;
}
@keyframes sr-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.sr-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 1rem;
animation: sr-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes sr-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#sequence-recall-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #sequence-recall-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="sequence-recall-game">

<div id="sr-instructions" class="sr-screen sr-active">
<div class="sr-card">
<div class="sr-title-row"><span class="sr-icon">&#x1F9E0;</span><h1 class="sr-title">Sequence Recall</h1></div>
<p class="sr-subtitle">Entrena tu memoria de trabajo</p>
<ul class="sr-instructions-list">
<li data-num="1">Observa la secuencia de colores mostrada uno a la vez</li>
<li data-num="2">Memoriza el orden cuidadosamente</li>
<li data-num="3">Recuerda los colores en el mismo orden exacto</li>
<li data-num="4">Avanza a través de 20 niveles de dificultad creciente</li>
</ul>
<div class="sr-best-score" id="sr-best-display">
Mejor Puntuación: <strong id="sr-best-value">0</strong> puntos
</div>
<button class="sr-btn-primary" id="sr-start-btn">Iniciar</button>
<div id="sr-challenge-banner-wrap"></div>
</div>
</div>

<div id="sr-wizard" class="sr-screen">
<div class="sr-wizard-overlay">
<div class="sr-wizard-card" id="sr-wizard-card"></div>
</div>
</div>

<div id="sr-playing" class="sr-screen">
<div class="sr-header">
<div class="sr-header-item">
<span class="sr-header-label">Puntuación</span>
<span class="sr-header-value" id="sr-score">0</span>
</div>
<div class="sr-header-item">
<span class="sr-header-label">Nivel</span>
<span class="sr-header-value" id="sr-level">1</span>
</div>
<div class="sr-header-item">
<span class="sr-header-label">Racha</span>
<span class="sr-header-value sr-streak" id="sr-streak">0</span>
</div>
</div>
<div class="sr-phase-label" id="sr-phase-label">Memoriza</div>
<div id="sr-play-area"></div>
<div class="sr-progress">
<div class="sr-progress-label" id="sr-progress-label">Ronda 1 de 3</div>
<div class="sr-progress-bar">
<div class="sr-progress-fill" id="sr-progress-fill" style="width:0%"></div>
</div>
</div>
<button class="gk-finish-btn" id="sr-finish-btn">Terminar</button>
</div>

<div id="sr-complete" class="sr-screen">
<div class="sr-card sr-complete">
<button class="gk-complete-close" id="sr-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="sr-complete-icon">&#x1F3C6;</div>
<h2 class="sr-complete-title">¡Juego Completado!</h2>
<div id="sr-new-best-badge" class="sr-new-best" style="display:none;">¡Nueva Mejor Puntuación!</div>
<div class="gk-challenge-result" id="sr-challenge-result" style="display:none;"></div>
<div class="sr-stats-grid">
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-score">0</span>
<span class="sr-stat-label">Puntuación</span>
</div>
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-level">1</span>
<span class="sr-stat-label">Nivel</span>
</div>
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-accuracy">0%</span>
<span class="sr-stat-label">Precisión</span>
</div>
</div>
<div class="sr-complete-links">
<button class="sr-btn-primary" id="sr-play-again-btn">Repetir</button>
<button class="gk-runtime-history-toggle" id="sr-history-toggle" type="button">Show History</button>
<a href="/es/games/" class="sr-btn-secondary">Todos los Juegos</a>
</div>
<div class="gk-runtime-history-panel" id="sr-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="sr-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="sr-share-btn">&#128279; Comparte tu Puntuación</button>
<div class="gk-share-copied" id="sr-share-copied" style="display:none;">¡Enlace copiado!</div>
</div>
</div>
</div>

</div>

<script>
(function() {
var STORAGE_BEST = 'guruka_sequence-recall_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('sr-history-toggle', 'sr-history-panel', 'sr-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var COLORS = [
{ name: 'Rojo', hsl: 'hsl(0,84%,60%)' },
{ name: 'Azul', hsl: 'hsl(217,91%,60%)' },
{ name: 'Verde', hsl: 'hsl(142,76%,36%)' },
{ name: 'Amarillo', hsl: 'hsl(48,96%,53%)' },
{ name: 'Morado', hsl: 'hsl(280,68%,55%)' },
{ name: 'Naranja', hsl: 'hsl(25,95%,53%)' }
];

var MAX_LEVEL = 20;
var ROUNDS_PER_LEVEL = 3;

var state = {
screen: 'instructions',
level: 1,
round: 0,
score: 0,
streak: 0,
totalCorrect: 0,
totalAttempts: 0,
colorSequence: [],
positionSequence: [],
selectedColors: [],
selectedPositions: [],
currentShowIndex: 0,
phaseStartTime: 0,
showTimer: null,
feedbackTimer: null
};

function getSequenceLength(level) {
return Math.min(3 + Math.floor(level / 3), 8);
}

function hasDistraction(level) {
return level >= 6;
}

function isDualTrack(level) {
return level >= 11;
}

function getDisplayTime(level) {
return Math.max(1200 - (level - 1) * 40, 600);
}

function getBestScore() {
try {
var val = localStorage.getItem(STORAGE_BEST);
return val ? parseInt(val, 10) : 0;
} catch(e) { return 0; }
}

function setBestScore(s) {
try { localStorage.setItem(STORAGE_BEST, String(s)); } catch(e) {}
}

function getHistory() {
return [];
}

function addHistory(entry) {
void entry;
}

function $(id) { return document.getElementById(id); }

function showScreen(name) {
var screens = document.querySelectorAll('#sequence-recall-game .sr-screen');
for (var i = 0; i < screens.length; i++) {
screens[i].classList.remove('sr-active');
}
var el = $('sr-' + name);
if (el) el.classList.add('sr-active');
state.screen = name;
}

function generateColorSequence(len) {
var seq = [];
for (var i = 0; i < len; i++) {
seq.push(Math.floor(Math.random() * COLORS.length));
}
return seq;
}

function generatePositionSequence(len) {
var positions = [];
var used = {};
var count = Math.min(len, 9);
while (positions.length < count) {
var p = Math.floor(Math.random() * 9);
if (!used[p]) {
used[p] = true;
positions.push(p);
}
}
return positions;
}

function generateMathProblem() {
var ops = ['+', '-', '*'];
var op = ops[Math.floor(Math.random() * ops.length)];
var a, b, answer;
if (op === '+') {
a = Math.floor(Math.random() * 50) + 1;
b = Math.floor(Math.random() * 50) + 1;
answer = a + b;
} else if (op === '-') {
a = Math.floor(Math.random() * 50) + 10;
b = Math.floor(Math.random() * a);
answer = a - b;
} else {
a = Math.floor(Math.random() * 12) + 2;
b = Math.floor(Math.random() * 12) + 2;
answer = a * b;
}
var display = op === '*' ? (a + ' \u00D7 ' + b) : (a + ' ' + op + ' ' + b);
return { display: display, answer: answer };
}

function updateHeader() {
$('sr-score').textContent = state.score;
$('sr-level').textContent = state.level;
$('sr-streak').textContent = state.streak;
if (challenge.active) GK.updateChallengeBar('sr-playing', state.score, challenge.score);
}

function updateProgress() {
$('sr-progress-label').textContent = 'Ronda ' + (state.round + 1) + ' de ' + ROUNDS_PER_LEVEL;
var pct = (state.round / ROUNDS_PER_LEVEL) * 100;
$('sr-progress-fill').style.width = pct + '%';
}

var SR_WIZARD_STEPS = [
{icon: '\uD83C\uDFA8', title: 'Observa la secuencia de colores', desc: 'Los colores aparecen uno a la vez. ¡Memoriza el orden!'},
{icon: '\uD83E\uDDE0', title: 'Recuérdalos en orden', desc: 'Toca los colores en la secuencia exacta que viste.'},
{icon: '\uD83D\uDE80', title: '¿Listo? ¡Vamos!', desc: '¡Las secuencias se hacen más largas. Mantén la concentración!', final: true}
];
var srWizardStep = 0;
var srWizardCallback = null;

function srRenderWizardStep() {
var s = SR_WIZARD_STEPS[srWizardStep];
var dotsHtml = '';
for (var i = 0; i < SR_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="sr-wizard-dot' + (i === srWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Comenzar a Jugar' : 'Siguiente';
var card = $('sr-wizard-card');
card.innerHTML =
'<div class="sr-wizard-icon">' + s.icon + '</div>' +
'<div class="sr-wizard-title">' + s.title + '</div>' +
'<div class="sr-wizard-desc">' + s.desc + '</div>' +
'<div class="sr-wizard-dots">' + dotsHtml + '</div>' +
'<button class="sr-wizard-btn" id="sr-wizard-next">' + btnLabel + '</button>';
card.style.animation = 'none';
void card.offsetWidth;
card.style.animation = 'sr-wizard-enter 0.3s ease-out';
$('sr-wizard-next').addEventListener('click', srAdvanceWizard);
}

function srAdvanceWizard() {
if (srWizardStep < SR_WIZARD_STEPS.length - 1) {
srWizardStep++;
srRenderWizardStep();
} else {
if (srWizardCallback) srWizardCallback();
}
}

function showWizard(callback) {
srWizardStep = 0;
srWizardCallback = callback;
showScreen('wizard');
srRenderWizardStep();
}

function startRound() {
var seqLen = getSequenceLength(state.level);
state.colorSequence = generateColorSequence(seqLen);
state.positionSequence = isDualTrack(state.level) ? generatePositionSequence(Math.min(seqLen, 9)) : [];
state.selectedColors = [];
state.selectedPositions = [];
state.currentShowIndex = 0;

updateHeader();
updateProgress();
showColorSequence();
}

function showColorSequence() {
$('sr-phase-label').textContent = 'Memoriza los colores';
state.currentShowIndex = 0;
showNextColor();
}

function showNextColor() {
var area = $('sr-play-area');
if (state.currentShowIndex >= state.colorSequence.length) {
if (isDualTrack(state.level)) {
showPositionSequence();
} else if (hasDistraction(state.level)) {
showDistraction();
} else {
startRecallColors();
}
return;
}

var colorIdx = state.colorSequence[state.currentShowIndex];
var color = COLORS[colorIdx];
var total = state.colorSequence.length;
var current = state.currentShowIndex + 1;

area.innerHTML = '<div class="sr-color-stage">' +
'<div class="sr-color-box" style="background:' + color.hsl + '"></div>' +
'<div class="sr-color-counter">' + current + ' / ' + total + '</div>' +
'</div>';

state.currentShowIndex++;
var dt = getDisplayTime(state.level);
state.showTimer = setTimeout(function() {
showNextColor();
}, dt);
}

function showPositionSequence() {
$('sr-phase-label').textContent = 'Memoriza las posiciones';
state.currentShowIndex = 0;
showNextPosition();
}

function showNextPosition() {
if (state.currentShowIndex >= state.positionSequence.length) {
if (hasDistraction(state.level)) {
showDistraction();
} else {
startRecallColors();
}
return;
}

var pos = state.positionSequence[state.currentShowIndex];
var total = state.positionSequence.length;
var current = state.currentShowIndex + 1;

var html = '<div class="sr-position-stage">';
html += '<div class="sr-position-grid">';
for (var i = 0; i < 9; i++) {
var cls = 'sr-position-cell';
if (i === pos) cls += ' sr-pos-highlight';
html += '<div class="' + cls + '"></div>';
}
html += '</div>';
html += '<div class="sr-position-counter">' + current + ' / ' + total + '</div>';
html += '</div>';

$('sr-play-area').innerHTML = html;

state.currentShowIndex++;
var dt = getDisplayTime(state.level);
state.showTimer = setTimeout(function() {
showNextPosition();
}, dt);
}

function showDistraction() {
$('sr-phase-label').textContent = '¡Matemáticas rápidas!';
var problem = generateMathProblem();

var html = '<div class="sr-math-area">';
html += '<div class="sr-math-problem">' + problem.display + ' = ?</div>';
html += '<div class="sr-math-input-row">';
html += '<input type="number" class="sr-math-input" id="sr-math-input" inputmode="numeric" autocomplete="off">';
html += '<button class="sr-math-submit" id="sr-math-btn">Ir</button>';
html += '</div>';
html += '<div class="sr-math-hint">Resuelve para continuar</div>';
html += '</div>';

$('sr-play-area').innerHTML = html;

var input = $('sr-math-input');
var btn = $('sr-math-btn');

function submitMath() {
var val = parseInt(input.value, 10);
if (isNaN(val)) return;
startRecallColors();
}

btn.addEventListener('click', submitMath);
input.addEventListener('keydown', function(e) {
if (e.key === 'Enter') submitMath();
});

setTimeout(function() { input.focus(); }, 100);
}

function startRecallColors() {
$('sr-phase-label').textContent = 'Recuerda la secuencia de colores';
state.selectedColors = [];
state.phaseStartTime = Date.now();
renderRecallColors();
}

function renderRecallColors() {
var needed = state.colorSequence.length;
var html = '<div class="sr-recall-area">';

html += '<div class="sr-selected-sequence" id="sr-selected-seq">';
if (state.selectedColors.length === 0) {
html += '<span class="sr-selected-placeholder">Toca los colores en orden (' + needed + ' necesarios)</span>';
} else {
for (var i = 0; i < state.selectedColors.length; i++) {
var c = COLORS[state.selectedColors[i]];
html += '<div class="sr-selected-dot" style="background:' + c.hsl + '"></div>';
}
}
html += '</div>';

html += '<div class="sr-color-grid">';
for (var j = 0; j < COLORS.length; j++) {
html += '<button class="sr-color-btn" data-color="' + j + '" style="background:' + COLORS[j].hsl + '">';
html += '<span class="sr-btn-label">' + COLORS[j].name + '</span>';
html += '</button>';
}
html += '</div>';

html += '<div class="sr-undo-row">';
html += '<button class="sr-undo-btn" id="sr-undo-btn">Deshacer</button>';
html += '<button class="sr-submit-btn" id="sr-submit-colors-btn"' + (state.selectedColors.length < needed ? ' disabled' : '') + '>Enviar</button>';
html += '</div>';

html += '</div>';

$('sr-play-area').innerHTML = html;

var buttons = document.querySelectorAll('#sequence-recall-game .sr-color-btn');
for (var k = 0; k < buttons.length; k++) {
buttons[k].addEventListener('click', function() {
var ci = parseInt(this.getAttribute('data-color'), 10);
if (state.selectedColors.length < needed) {
state.selectedColors.push(ci);
renderRecallColors();
if (state.selectedColors.length === needed) {
setTimeout(function() {
var sb = $('sr-submit-colors-btn');
if (sb) sb.focus();
}, 50);
}
}
});
}

$('sr-undo-btn').addEventListener('click', function() {
if (state.selectedColors.length > 0) {
state.selectedColors.pop();
renderRecallColors();
}
});

var submitBtn = $('sr-submit-colors-btn');
submitBtn.addEventListener('click', function() {
if (state.selectedColors.length === needed) {
submitColorRecall();
}
});
}

function submitColorRecall() {
var responseTime = Date.now() - state.phaseStartTime;
var correct = true;
for (var i = 0; i < state.colorSequence.length; i++) {
if (state.colorSequence[i] !== state.selectedColors[i]) {
correct = false;
break;
}
}

if (isDualTrack(state.level)) {
state._colorCorrect = correct;
state._colorResponseTime = responseTime;
startRecallPositions();
} else {
resolveRound(correct, responseTime);
}
}

function startRecallPositions() {
$('sr-phase-label').textContent = 'Recuerda las posiciones en orden';
state.selectedPositions = [];
state.phaseStartTime = Date.now();
renderRecallPositions();
}

function renderRecallPositions() {
var needed = state.positionSequence.length;
var html = '<div class="sr-position-stage">';

html += '<div class="sr-selected-sequence">';
if (state.selectedPositions.length === 0) {
html += '<span class="sr-selected-placeholder">Toca las posiciones en orden (' + needed + ' necesarias)</span>';
} else {
for (var i = 0; i < state.selectedPositions.length; i++) {
html += '<div class="sr-selected-dot" style="background:var(--color-primary, #0f9072)"></div>';
}
}
html += '</div>';

html += '<div class="sr-position-grid">';
for (var j = 0; j < 9; j++) {
var isSelected = false;
var order = -1;
for (var k = 0; k < state.selectedPositions.length; k++) {
if (state.selectedPositions[k] === j) {
isSelected = true;
order = k + 1;
break;
}
}
var cls = 'sr-position-cell';
if (isSelected) cls += ' sr-pos-active';
html += '<div class="' + cls + '" data-pos="' + j + '">' + (isSelected ? order : '') + '</div>';
}
html += '</div>';

html += '<div class="sr-undo-row" style="margin-top:0.75rem;max-width:210px;width:100%;">';
html += '<button class="sr-undo-btn" id="sr-undo-pos-btn">Deshacer</button>';
html += '<button class="sr-submit-btn" id="sr-submit-pos-btn"' + (state.selectedPositions.length < needed ? ' disabled' : '') + '>Enviar</button>';
html += '</div>';

html += '</div>';

$('sr-play-area').innerHTML = html;

var cells = document.querySelectorAll('#sequence-recall-game .sr-position-cell');
for (var m = 0; m < cells.length; m++) {
cells[m].addEventListener('click', function() {
var p = parseInt(this.getAttribute('data-pos'), 10);
var alreadySelected = false;
for (var n = 0; n < state.selectedPositions.length; n++) {
if (state.selectedPositions[n] === p) {
alreadySelected = true;
break;
}
}
if (!alreadySelected && state.selectedPositions.length < needed) {
state.selectedPositions.push(p);
renderRecallPositions();
}
});
}

$('sr-undo-pos-btn').addEventListener('click', function() {
if (state.selectedPositions.length > 0) {
state.selectedPositions.pop();
renderRecallPositions();
}
});

$('sr-submit-pos-btn').addEventListener('click', function() {
if (state.selectedPositions.length === needed) {
submitPositionRecall();
}
});
}

function submitPositionRecall() {
var responseTime = Date.now() - state.phaseStartTime;
var posCorrect = true;
for (var i = 0; i < state.positionSequence.length; i++) {
if (state.positionSequence[i] !== state.selectedPositions[i]) {
posCorrect = false;
break;
}
}

var bothCorrect = state._colorCorrect && posCorrect;
var combinedTime = state._colorResponseTime + responseTime;
resolveRound(bothCorrect, combinedTime);
}

function formatColorHistory(seq) {
if (!seq || !seq.length) return 'none';
var out = [];
for (var i = 0; i < seq.length; i++) {
var color = COLORS[seq[i]];
out.push('<span class="gk-history-swatch" style="background:' + runHistory.escape(color.hsl) + '"></span>' + runHistory.escape(color.name));
}
return out.join(', ');
}

function formatPositionHistory(seq) {
if (!seq || !seq.length) return 'none';
var out = [];
for (var i = 0; i < seq.length; i++) out.push(String(seq[i] + 1));
return out.join(', ');
}

function recordSequenceHistory(correct) {
var html = '<strong>Sequence recall</strong>';
html += '<div class="gk-runtime-history-sub">Colors - Your: ' + formatColorHistory(state.selectedColors) + '</div>';
html += '<div class="gk-runtime-history-sub">Colors - Correct: ' + formatColorHistory(state.colorSequence) + '</div>';
if (isDualTrack(state.level)) {
html += '<div class="gk-runtime-history-sub">Positions - Your: ' + runHistory.escape(formatPositionHistory(state.selectedPositions)) + '</div>';
html += '<div class="gk-runtime-history-sub">Positions - Correct: ' + runHistory.escape(formatPositionHistory(state.positionSequence)) + '</div>';
}
runHistory.pushHtml(correct, html);
}

function resolveRound(correct, responseTime) {
state.totalAttempts++;
recordSequenceHistory(correct);
var points = 0;

if (correct) {
state.totalCorrect++;
state.streak++;
points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
} else {
state.streak = 0;
}

updateHeader();
showFeedback(correct, points);
}

function showFeedback(correct, points) {
$('sr-phase-label').textContent = '';
var html = '<div class="sr-feedback"><div>';
if (correct) {
html += '<div class="sr-feedback-correct">¡Correcto!</div>';
html += '<div class="sr-feedback-points">+' + points + ' puntos</div>';
} else {
html += '<div class="sr-feedback-wrong">Incorrecto</div>';
html += '<div class="sr-feedback-points">Racha reiniciada</div>';
}
html += '</div></div>';

$('sr-play-area').innerHTML = html;

state.feedbackTimer = setTimeout(function() {
advanceRound(correct);
}, 1200);
}

function advanceRound(wasCorrect) {
state.round++;

if (state.round >= ROUNDS_PER_LEVEL) {
if (wasCorrect) {
state.level++;
}
state.round = 0;

if (state.level > MAX_LEVEL) {
endGame();
return;
}
}

updateProgress();
startRound();
}

/* ── Celebration effects ── */
function srShowConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'sr-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'sr-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'sr-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function srAnimateScoreCountUp(el, target) {
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(target * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

function endGame() {
exitMobileGameMode();
var accuracy = state.totalAttempts > 0 ? Math.round((state.totalCorrect / state.totalAttempts) * 100) : 0;
var best = getBestScore();
var isNewBest = state.score > best;

if (isNewBest) {
setBestScore(state.score);
}

addHistory({
score: state.score,
level: state.level > MAX_LEVEL ? MAX_LEVEL : state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var iconEl = document.querySelector('#sr-complete .sr-complete-icon');
var titleEl = document.querySelector('#sr-complete .sr-complete-title');
var badge = $('sr-new-best-badge');

if (isNewBest) {
srShowConfetti();
iconEl.textContent = '\uD83C\uDF89';
titleEl.textContent = '¡INCREÍBLE!';
badge.className = 'sr-new-best-enhanced';
badge.innerHTML = '\uD83C\uDF1F ¡INCREÍBLE! ¡Nuevo Récord!';
badge.style.display = 'inline-block';
} else {
iconEl.textContent = '\uD83C\uDFC6';
titleEl.textContent = '¡Buen Trabajo!';
badge.className = 'sr-new-best';
badge.style.display = 'none';
}

GK.renderChallengeResult('sr-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

$('sr-final-level').textContent = state.level > MAX_LEVEL ? MAX_LEVEL : state.level;
$('sr-final-accuracy').textContent = accuracy + '%';

showScreen('complete');
srAnimateScoreCountUp($('sr-final-score'), state.score);
}

function resetGame() {
clearTimeout(state.showTimer);
clearTimeout(state.feedbackTimer);
state.level = 1;
state.round = 0;
state.score = 0;
state.streak = 0;
state.totalCorrect = 0;
state.totalAttempts = 0;
state.selectedColors = [];
state.selectedPositions = [];
state.colorSequence = [];
state.positionSequence = [];
runHistory.clear();
}

function initInstructions() {
var best = getBestScore();
$('sr-best-value').textContent = best;
GK.renderChallengeBanner('sr-challenge-banner-wrap', challenge);
showScreen('instructions');
}


$('sr-close-btn').addEventListener('click', function() {
$('sr-best-value').textContent = getBestScore();
showScreen('instructions');
});

$('sr-finish-btn').addEventListener('click', function() {
endGame();
});

$('sr-start-btn').addEventListener('click', function() {
resetGame();
showWizard(function() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sr-playing', challenge);
startRound();
});
});

$('sr-play-again-btn').addEventListener('click', function() {
resetGame();
showWizard(function() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sr-playing', challenge);
startRound();
});
});

$('sr-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

$('sr-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Sequence Recall', '/es/games/sequence-recall/', 'sr-share-copied');
});

initInstructions();
})();
</script>

### Quick Sort - Juego de Entrenamiento Mental
URL: https://guruka.com/es/games/quick-sort/
Description: Clasifica elementos con reglas cambiantes.

<style>
#quick-sort-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #quick-sort-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#qs-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.qs-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#qs-instructions .qs-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#qs-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: #f97316;
}

#qs-instructions .qs-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #qs-instructions .qs-subtitle {
color: var(--color-dark-text-secondary);
}

#qs-instructions .qs-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #qs-instructions .qs-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#qs-instructions .qs-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: #f97316;
}

#qs-instructions .qs-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#qs-instructions .qs-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.qs-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.qs-personal-best strong {
color: #f97316;
}

/* ── Buttons ── */
.qs-btn-primary {
background: #f97316;
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.qs-btn-primary:hover {
background: #ea580c;
}

.qs-btn-primary:active {
transform: scale(0.97);
}

.qs-btn-secondary {
background: transparent;
color: #f97316;
border: 1px solid #f97316;
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.qs-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .qs-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#qs-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#qs-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: qs-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #qs-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes qs-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.qs-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.qs-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.qs-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .qs-wizard-desc {
color: var(--color-dark-text-secondary);
}
.qs-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.qs-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.qs-wizard-dot.active {
background: #f97316;
transform: scale(1.3);
}
[data-theme="dark"] .qs-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .qs-wizard-dot.active {
background: #f97316;
}
.qs-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: #f97316;
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.qs-wizard-btn:hover {
background: #ea580c;
}
@media (max-width: 400px) {
#qs-wizard-card {
padding: 1.5rem 1rem;
}
.qs-wizard-icon {
font-size: 2rem;
}
.qs-wizard-title {
font-size: 1.1rem;
}
.qs-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#qs-playing {
display: none;
flex: 1;
flex-direction: column;
}

.qs-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .qs-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.qs-stat {
text-align: center;
}

.qs-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .qs-stat-label {
color: var(--color-dark-text-secondary);
}

.qs-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.qs-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.qs-level-text {
font-weight: 600;
}

.qs-rule-change-badge {
background: #f97316;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.qs-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .qs-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.qs-progress-fill {
height: 100%;
background: #f97316;
border-radius: 3px;
transition: width 0.3s ease;
}

.qs-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .qs-timer-bar {
background: var(--color-dark-bg-secondary);
}

.qs-timer-fill {
height: 100%;
background: #f97316;
border-radius: 2px;
transition: width 0.05s linear;
}

.qs-timer-fill.qs-timer-warning {
background: #ef4444;
}

/* ── Rule Indicator ── */
.qs-rule-indicator {
background: #f97316;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
text-align: center;
margin-bottom: 1rem;
letter-spacing: 0.02em;
}

/* ── Stimulus Area ── */
.qs-stimulus-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 160px;
position: relative;
}

.qs-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.qs-feedback-flash.qs-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.qs-feedback-flash.qs-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.qs-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.qs-feedback-icon.qs-show-check {
animation: qs-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.qs-feedback-icon.qs-show-x {
animation: qs-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes qs-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.qs-stimulus {
font-size: 3rem;
font-weight: 700;
line-height: 1.2;
animation: qs-stim-enter 0.2s ease-out;
text-align: center;
}

@keyframes qs-stim-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

/* ── Sort Buttons (Left / Right) ── */
.qs-sort-buttons {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.qs-sort-btn {
flex: 1;
padding: 1.1rem 0.75rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}

[data-theme="dark"] .qs-sort-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.qs-sort-btn:active {
transform: scale(0.95);
}

.qs-btn-left {
border-left: 4px solid #f97316;
}

.qs-btn-left:hover {
border-color: #f97316;
background: rgba(249,115,22,0.05);
}

[data-theme="dark"] .qs-btn-left:hover {
background: rgba(249,115,22,0.15);
}

.qs-btn-right {
border-right: 4px solid #f97316;
}

.qs-btn-right:hover {
border-color: #f97316;
background: rgba(249,115,22,0.05);
}

[data-theme="dark"] .qs-btn-right:hover {
background: rgba(249,115,22,0.15);
}

.qs-sort-btn .qs-arrow {
font-size: 1.3rem;
opacity: 0.6;
}

.qs-sort-btn .qs-label {
font-size: 1rem;
}

.qs-sort-btn.qs-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.qs-sort-btn.qs-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.qs-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#qs-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#qs-pause-overlay .qs-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#qs-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.qs-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: qs-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .qs-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes qs-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.qs-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.qs-complete-card .qs-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.qs-final-score {
font-size: 2.5rem;
font-weight: 800;
color: #f97316;
margin: 0.5rem 0;
}

.qs-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: qs-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes qs-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.qs-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.qs-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .qs-complete-stat {
background: var(--color-dark-bg-secondary);
}

.qs-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.qs-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.qs-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.qs-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .qs-back-link {
color: var(--color-dark-text-secondary);
}

.qs-back-link:hover {
color: #f97316;
text-decoration: underline;
}

/* ── Level Up Toast ── */
.qs-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #f97316;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.qs-level-up-toast.qs-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Rule Change Toast ── */
.qs-rule-toast {
position: fixed;
top: 4.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #7c3aed;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 0.95rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.qs-rule-toast.qs-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#quick-sort-game {
padding: 0.5rem;
}
.qs-stimulus {
font-size: 2.5rem;
}
.qs-sort-btn {
padding: 0.85rem 0.5rem;
font-size: 1rem;
min-height: 52px;
}
.qs-sort-btn .qs-label {
font-size: 0.9rem;
}
.qs-header {
padding: 0.5rem;
gap: 0.25rem;
}
.qs-stat-value {
font-size: 1rem;
}
.qs-rule-indicator {
font-size: 0.85rem;
padding: 0.4rem 0.75rem;
}
#qs-instructions { padding: 0.75rem 0.5rem; }
#qs-instructions .qs-icon { font-size: 2rem; margin-bottom: 0; }
#qs-instructions h2 { font-size: 1.3rem; }
#qs-instructions .qs-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#qs-instructions .qs-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#qs-instructions .qs-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.qs-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#quick-sort-game {
padding: 0.75rem;
}
.qs-stimulus {
font-size: 2.75rem;
}
.qs-sort-btn {
padding: 1rem 0.5rem;
}
}
@media (max-width: 360px) {
.qs-stimulus {
font-size: 2rem;
}
.qs-sort-btn {
padding: 0.7rem 0.4rem;
font-size: 0.9rem;
min-height: 48px;
}
.qs-sort-btn .qs-label {
font-size: 0.8rem;
}
.qs-sort-btn .qs-arrow {
font-size: 1.1rem;
}
.qs-complete-stats {
grid-template-columns: 1fr 1fr;
}
.qs-final-score {
font-size: 2rem;
}
.qs-header {
padding: 0.375rem;
}
.qs-stat-value {
font-size: 0.9rem;
}
}
@keyframes qs-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.qs-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.qs-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: qs-confetti-fall 2.5s ease-in forwards;
}
.qs-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(249,115,22,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: qs-glow-fade 1s ease-out forwards;
}
@keyframes qs-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.qs-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: qs-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(249,115,22,0.4);
}
@keyframes qs-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#quick-sort-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#quick-sort-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #quick-sort-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#quick-sort-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#quick-sort-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="quick-sort-game">

<div id="qs-instructions">
<div class="qs-title-row"><span class="qs-icon">&#128450;</span><h2>Quick Sort</h2></div>
<p class="qs-subtitle">Velocidad de categorizaci&oacute;n y cambio de tarea</p>
<div class="qs-how-to">
<h3>C&oacute;mo Jugar</h3>
<ol>
<li>Un elemento (n&uacute;mero, forma o palabra) aparece en pantalla.</li>
<li>Se muestran dos categor&iacute;as a la <strong>izquierda y derecha</strong>.</li>
<li>Toca el lado correcto para ordenar el elemento.</li>
<li>La regla de ordenaci&oacute;n <strong>cambia</strong> cada pocas rondas.</li>
<li>La velocidad y las rachas dan puntos extra.</li>
</ol>
</div>
<div id="qs-best-display" class="qs-personal-best" style="display:none;">
Mejor Puntuaci&oacute;n: <strong id="qs-best-score">0</strong> puntos
</div>
<button class="qs-btn-primary" id="qs-start-btn">Iniciar</button>
<div id="qs-challenge-banner-wrap"></div>
</div>

<div id="qs-wizard">
<div id="qs-wizard-card"></div>
</div>

<div id="qs-playing">
<div class="qs-header">
<div class="qs-stat">
<div class="qs-stat-label">Puntuaci&oacute;n</div>
<div class="qs-stat-value" id="qs-score">0</div>
</div>
<div class="qs-stat">
<div class="qs-stat-label">Racha</div>
<div class="qs-stat-value" id="qs-streak">0</div>
</div>
<div class="qs-stat">
<div class="qs-stat-label">Nivel</div>
<div class="qs-stat-value" id="qs-level">1</div>
</div>
</div>
<div class="qs-level-info">
<span class="qs-level-text">Nivel <span id="qs-level-text">1</span></span>
<span class="qs-rule-change-badge" id="qs-rule-badge" style="display:none;">Cambio de Regla</span>
</div>
<div class="qs-progress-bar">
<div class="qs-progress-fill" id="qs-progress-fill" style="width:0%"></div>
</div>
<div class="qs-timer-bar">
<div class="qs-timer-fill" id="qs-timer-fill" style="width:100%"></div>
</div>
<div class="qs-rule-indicator" id="qs-rule-indicator">Ordenar: Par / Impar</div>
<div class="qs-stimulus-area">
<div class="qs-feedback-flash" id="qs-feedback-flash"></div>
<div class="qs-feedback-icon" id="qs-feedback-icon"></div>
<div class="qs-stimulus" id="qs-stimulus"></div>
</div>
<div class="qs-sort-buttons">
<button class="qs-sort-btn qs-btn-left" id="qs-btn-left">
<span class="qs-arrow">1</span>
<span class="qs-label" id="qs-label-left">Par</span>
</button>
<button class="qs-sort-btn qs-btn-right" id="qs-btn-right">
<span class="qs-label" id="qs-label-right">Impar</span>
<span class="qs-arrow">2</span>
</button>
</div>
<div class="qs-playing-hint">Presiona <strong>1</strong> para izquierda &middot; <strong>2</strong> para derecha &middot; <strong>Esc</strong> para pausar</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="qs-pause-btn" type="button">Pausar</button>
<button class="gk-finish-btn" id="qs-finish-btn" type="button">Terminar</button>
</div>
</div>

<div id="qs-pause-overlay">
<div class="qs-pause-text">Pausado</div>
<button class="qs-btn-primary" id="qs-resume-btn">Continuar</button>
</div>

<div id="qs-complete-overlay">
<div class="qs-complete-card">
<button class="gk-complete-close" id="qs-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="qs-trophy">&#127942;</div>
<h2>Fin</h2>
<div class="qs-final-score" id="qs-final-score">0</div>
<div id="qs-new-best" class="qs-new-best" style="display:none;">&#11088; &iexcl;Nuevo R&eacute;cord!</div>
<div class="gk-challenge-result" id="qs-challenge-result" style="display:none;"></div>
<div class="qs-complete-stats">
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Nivel</div>
<div class="qs-complete-stat-value" id="qs-final-level">1</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Precisi&oacute;n</div>
<div class="qs-complete-stat-value" id="qs-final-accuracy">0%</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Racha</div>
<div class="qs-complete-stat-value" id="qs-final-streak">0</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Mejor Puntuaci&oacute;n</div>
<div class="qs-complete-stat-value" id="qs-final-best">0</div>
</div>
</div>
<div class="qs-complete-actions">
<button class="qs-btn-primary" id="qs-play-again-btn">Repetir</button>
<button class="gk-runtime-history-toggle" id="qs-history-toggle" type="button">Show History</button>
<a href="/es/games/" class="qs-back-link">&larr; Juegos</a>
</div>
<div class="gk-runtime-history-panel" id="qs-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="qs-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="qs-share-btn">&#128279; Comparte tu Puntuaci&oacute;n</button>
<div class="gk-share-copied" id="qs-share-copied" style="display:none;">Copiado</div>
</div>
</div>
</div>

<div class="qs-level-up-toast" id="qs-level-toast">&iexcl;Subiste de Nivel!</div>
<div class="qs-rule-toast" id="qs-rule-toast">&iexcl;Nueva Regla!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_quick-sort_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('qs-history-toggle', 'qs-history-panel', 'qs-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
roundInRule: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctSide: null,
currentRule: null,
currentStimulus: null,
ruleIndex: 0
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('qs-instructions');
var elWizard = document.getElementById('qs-wizard');
var elWizardCard = document.getElementById('qs-wizard-card');
var elPlaying = document.getElementById('qs-playing');
var elPauseOverlay = document.getElementById('qs-pause-overlay');
var elCompleteOverlay = document.getElementById('qs-complete-overlay');
var elScore = document.getElementById('qs-score');
var elStreak = document.getElementById('qs-streak');
var elLevel = document.getElementById('qs-level');
var elLevelText = document.getElementById('qs-level-text');
var elRuleBadge = document.getElementById('qs-rule-badge');
var elProgressFill = document.getElementById('qs-progress-fill');
var elTimerFill = document.getElementById('qs-timer-fill');
var elRuleIndicator = document.getElementById('qs-rule-indicator');
var elStimulus = document.getElementById('qs-stimulus');
var elFeedbackFlash = document.getElementById('qs-feedback-flash');
var elFeedbackIcon = document.getElementById('qs-feedback-icon');
var elLabelLeft = document.getElementById('qs-label-left');
var elLabelRight = document.getElementById('qs-label-right');
var elBtnLeft = document.getElementById('qs-btn-left');
var elBtnRight = document.getElementById('qs-btn-right');
var elFinalScore = document.getElementById('qs-final-score');
var elNewBest = document.getElementById('qs-new-best');
var elFinalLevel = document.getElementById('qs-final-level');
var elFinalAccuracy = document.getElementById('qs-final-accuracy');
var elFinalStreak = document.getElementById('qs-final-streak');
var elFinalBest = document.getElementById('qs-final-best');
var elBestDisplay = document.getElementById('qs-best-display');
var elBestScore = document.getElementById('qs-best-score');
var elLevelToast = document.getElementById('qs-level-toast');
var elRuleToast = document.getElementById('qs-rule-toast');
var btnStart = document.getElementById('qs-start-btn');
var btnResume = document.getElementById('qs-resume-btn');
var btnPlayAgain = document.getElementById('qs-play-again-btn');

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getRuleChangeInterval(lvl) {
if (lvl <= 6) return 999;
if (lvl <= 9) return 4;
if (lvl <= 12) return 3;
if (lvl <= 16) return 3;
return 2;
}

/* ── Helpers ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pick(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
return arr;
}

/* ── Rule definitions ── */
var SHAPES = ['C\u00edrculo', 'Cuadrado', 'Tri\u00e1ngulo'];
var FRUITS = ['Manzana', 'Pl\u00e1tano', 'Cereza'];
var NOT_FRUITS = ['Coche', 'Libro', 'Escritorio'];
var ALL_WORDS = FRUITS.concat(NOT_FRUITS);

function ruleEvenOdd() {
return {
name: 'Par / Impar',
leftLabel: 'Par',
rightLabel: 'Impar',
generate: function() {
var n = randInt(1, 50);
return {
display: String(n),
correctSide: (n % 2 === 0) ? 'left' : 'right'
};
}
};
}

function ruleBigSmall() {
return {
name: 'Grande / Peque\u00f1o',
leftLabel: 'Grande (\u226550)',
rightLabel: 'Peque\u00f1o (<50)',
generate: function() {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n >= 50) ? 'left' : 'right'
};
}
};
}

function ruleShapeOrNot() {
return {
name: 'Forma / No Forma',
leftLabel: 'Forma',
rightLabel: 'No Forma',
generate: function() {
var isShape = Math.random() < 0.5;
var item;
if (isShape) {
item = pick(SHAPES);
} else {
item = String(randInt(1, 100));
}
return {
display: item,
correctSide: isShape ? 'left' : 'right'
};
}
};
}

function ruleFruitOrNot() {
return {
name: 'Fruta / No Fruta',
leftLabel: 'Fruta',
rightLabel: 'No Fruta',
generate: function() {
var item = pick(ALL_WORDS);
var isFruit = FRUITS.indexOf(item) !== -1;
return {
display: item,
correctSide: isFruit ? 'left' : 'right'
};
}
};
}

function ruleCompoundEvenBig() {
return {
name: 'Par Y Grande / Otro',
leftLabel: 'Par+Grande',
rightLabel: 'Otro',
generate: function() {
var n = randInt(1, 100);
var isEvenAndBig = (n % 2 === 0) && (n >= 50);
return {
display: String(n),
correctSide: isEvenAndBig ? 'left' : 'right'
};
}
};
}

function ruleCompoundOddSmall() {
return {
name: 'Impar Y Peque\u00f1o / Otro',
leftLabel: 'Impar+Peque\u00f1o',
rightLabel: 'Otro',
generate: function() {
var n = randInt(1, 100);
var isOddAndSmall = (n % 2 !== 0) && (n < 50);
return {
display: String(n),
correctSide: isOddAndSmall ? 'left' : 'right'
};
}
};
}

function ruleCompoundFruitBig() {
return {
name: 'Fruta O Grande / Otro',
leftLabel: 'Fruta/Grande',
rightLabel: 'Otro',
generate: function() {
var useWord = Math.random() < 0.4;
if (useWord) {
var item = pick(ALL_WORDS);
var isFruit = FRUITS.indexOf(item) !== -1;
return {
display: item,
correctSide: isFruit ? 'left' : 'right'
};
} else {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n >= 50) ? 'left' : 'right'
};
}
}
};
}

function ruleCompoundShapeEven() {
return {
name: 'Forma O Par / Otro',
leftLabel: 'Forma/Par',
rightLabel: 'Otro',
generate: function() {
var useShape = Math.random() < 0.35;
if (useShape) {
var isShape = Math.random() < 0.5;
var item = isShape ? pick(SHAPES) : String(randInt(1, 50) * 2 - 1);
return {
display: item,
correctSide: isShape ? 'left' : 'right'
};
} else {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n % 2 === 0) ? 'left' : 'right'
};
}
}
};
}

/* ── Get available rules for level ── */
function getRulesForLevel(lvl) {
if (lvl <= 3) {
return [ruleEvenOdd];
} else if (lvl <= 6) {
return [ruleBigSmall];
} else if (lvl <= 9) {
return [ruleEvenOdd, ruleBigSmall];
} else if (lvl <= 12) {
return [ruleShapeOrNot, ruleEvenOdd];
} else if (lvl <= 16) {
return [ruleFruitOrNot, ruleEvenOdd, ruleBigSmall];
} else {
return [ruleCompoundEvenBig, ruleCompoundOddSmall, ruleCompoundFruitBig, ruleCompoundShapeEven];
}
}

function pickNewRule(lvl, prevRuleName) {
var factories = getRulesForLevel(lvl);
if (factories.length === 1) {
return factories[0]();
}
var attempts = 0;
var rule;
do {
rule = pick(factories)();
attempts++;
} while (rule.name === prevRuleName && attempts < 10);
return rule;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
var rulesForLevel = getRulesForLevel(state.level);
if (rulesForLevel.length > 1) {
elRuleBadge.style.display = '';
elRuleBadge.textContent = 'Reglas Alternan';
} else {
elRuleBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('qs-playing', state.score, challenge.score);
}

/* ── Update rule display ── */
function updateRuleDisplay() {
if (!state.currentRule) return;
elRuleIndicator.textContent = 'Ordenar: ' + state.currentRule.name;
elLabelLeft.textContent = state.currentRule.leftLabel;
elLabelRight.textContent = state.currentRule.rightLabel;
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('qs-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('qs-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'qs-feedback-flash';
elFeedbackIcon.className = 'qs-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('qs-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('qs-show-check');
} else {
elFeedbackFlash.classList.add('qs-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('qs-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'qs-feedback-flash';
elFeedbackIcon.className = 'qs-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Nivel ' + level + '!';
elLevelToast.classList.add('qs-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('qs-toast-show');
}, 1500);
}

/* ── Show rule-change toast ── */
function showRuleToast(ruleName) {
elRuleToast.textContent = 'Nueva Regla: ' + ruleName;
elRuleToast.classList.add('qs-toast-show');
setTimeout(function() {
elRuleToast.classList.remove('qs-toast-show');
}, 1800);
}

/* ── Flash sort button ── */
function flashSortBtn(side, correct) {
var btn = side === 'left' ? elBtnLeft : elBtnRight;
btn.classList.add(correct ? 'qs-correct-flash' : 'qs-wrong-flash');
setTimeout(function() {
btn.classList.remove('qs-correct-flash', 'qs-wrong-flash');
}, 400);
}

function sortSideLabel(side) {
if (!state.currentRule) return side || 'No answer';
if (side === 'left') return state.currentRule.leftLabel;
if (side === 'right') return state.currentRule.rightLabel;
return 'No answer';
}

function recordSortHistory(chosenSide, correct) {
var html = '<strong>' + runHistory.escape(state.currentRule ? state.currentRule.name : 'Sort rule') + '</strong>';
html += '<div class="gk-runtime-history-sub">Item: ' + runHistory.escape(state.currentStimulus) + '</div>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(sortSideLabel(chosenSide)) + ' | Correct: ' + runHistory.escape(sortSideLabel(state.correctSide)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenSide) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var correct = (chosenSide === state.correctSide);

state.totalAnswered++;
recordSortHistory(chosenSide, correct);
flashSortBtn(chosenSide, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundInRule = 0;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordSortHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundInRule = 0;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.roundInRule++;
state.answered = false;

/* Check if rule should change mid-level */
var ruleInterval = getRuleChangeInterval(state.level);
if (state.roundInRule > ruleInterval && getRulesForLevel(state.level).length > 1) {
state.roundInRule = 1;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showRuleToast(state.currentRule.name);
}

/* Generate stimulus */
var item = state.currentRule.generate();
state.correctSide = item.correctSide;
state.currentStimulus = item.display;

elStimulus.textContent = item.display;
elStimulus.style.animation = 'none';
void elStimulus.offsetWidth;
elStimulus.style.animation = '';

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'qs-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'qs-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'qs-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.qs-trophy');
var title = document.querySelector('#qs-complete-overlay .qs-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = '\u00a1INCRE\u00cdBLE!';
elNewBest.className = 'qs-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F \u00a1INCRE\u00cdBLE! \u00a1Nuevo R\u00e9cord!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = '\u00a1Buen Trabajo!';
elNewBest.className = 'qs-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('qs-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var QS_WIZARD_STEPS = [
{icon: '\uD83D\uDCC2', title: 'Ordena elementos r\u00e1pido', desc: 'Un elemento aparece en pantalla. \u00a1Toca la categor\u00eda correcta (izquierda o derecha) para ordenarlo!'},
{icon: '\uD83D\uDD00', title: '\u00a1Las reglas cambian!', desc: '\u00a1Cada pocas rondas la regla de ordenaci\u00f3n cambia. Mantente atento y ad\u00e1ptate r\u00e1pido!'},
{icon: '\u26A1', title: '\u00a1S\u00e9 r\u00e1pido!', desc: '\u00a1Responde antes de que se acabe el tiempo. Velocidad y rachas dan puntos extra!', final: true}
];
var qsWizardStep = 0;

function renderWizardStep() {
var s = QS_WIZARD_STEPS[qsWizardStep];
var dotsHtml = '';
for (var i = 0; i < QS_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="qs-wizard-dot' + (i === qsWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Comenzar a Jugar' : 'Siguiente';
elWizardCard.innerHTML =
'<div class="qs-wizard-icon">' + s.icon + '</div>' +
'<div class="qs-wizard-title">' + s.title + '</div>' +
'<div class="qs-wizard-desc">' + s.desc + '</div>' +
'<div class="qs-wizard-dots">' + dotsHtml + '</div>' +
'<button class="qs-wizard-btn" id="qs-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'qs-wizard-enter 0.3s ease-out';
document.getElementById('qs-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (qsWizardStep < QS_WIZARD_STEPS.length - 1) {
qsWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
qsWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.roundInRule = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctSide = null;
state.currentRule = null;
state.currentStimulus = null;
state.ruleIndex = 0;
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
state.currentRule = pickNewRule(state.level, null);
state.roundInRule = 0;
updateRuleDisplay();
showScreen('playing');
GK.renderChallengeBar('qs-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('qs-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

elBtnLeft.addEventListener('click', function() {
processAnswer('left');
});

elBtnRight.addEventListener('click', function() {
processAnswer('right');
});

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('qs-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('qs-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('qs-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('qs-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Quick Sort', '/es/games/quick-sort/', 'qs-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key === '1') {
e.preventDefault();
processAnswer('left');
} else if (e.key === '2') {
e.preventDefault();
processAnswer('right');
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('qs-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Speed Match - Juego de Entrenamiento Cerebral
URL: https://guruka.com/es/games/speed-match/
Description: Compara simbolos rapido.

<style>
#speed-match-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #speed-match-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#sm-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.sm-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#sm-instructions .sm-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#sm-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#sm-instructions .sm-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #sm-instructions .sm-subtitle {
color: var(--color-dark-text-secondary);
}

#sm-instructions .sm-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #sm-instructions .sm-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#sm-instructions .sm-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#sm-instructions .sm-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#sm-instructions .sm-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.sm-kbd-hints {
display: flex;
gap: 1.5rem;
justify-content: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}

.sm-kbd-hint {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-kbd-hint {
color: var(--color-dark-text-secondary);
}

.sm-kbd {
display: inline-block;
padding: 0.15rem 0.5rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.25rem;
font-family: monospace;
font-size: 0.8rem;
font-weight: 600;
}

[data-theme="dark"] .sm-kbd {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.sm-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.sm-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.sm-btn-primary:hover {
background: var(--color-primary-hover);
}

.sm-btn-primary:active {
transform: scale(0.97);
}

.sm-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.sm-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .sm-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#sm-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#sm-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sm-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #sm-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes sm-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.sm-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.sm-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.sm-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .sm-wizard-desc {
color: var(--color-dark-text-secondary);
}
.sm-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.sm-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.sm-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"] .sm-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .sm-wizard-dot.active {
background: var(--color-primary);
}
.sm-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.sm-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#sm-wizard-card {
padding: 1.5rem 1rem;
}
.sm-wizard-icon {
font-size: 2rem;
}
.sm-wizard-title {
font-size: 1.1rem;
}
.sm-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#sm-playing {
display: none;
flex: 1;
flex-direction: column;
}

.sm-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .sm-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-stat {
text-align: center;
}

.sm-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .sm-stat-label {
color: var(--color-dark-text-secondary);
}

.sm-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.sm-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.sm-level-text {
font-weight: 600;
}

.sm-nback-badge {
background: var(--color-primary);
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.sm-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .sm-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.sm-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .sm-timer-bar {
background: var(--color-dark-bg-secondary);
}

.sm-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.sm-timer-fill.sm-timer-warning {
background: #ef4444;
}

/* ── Symbol Display ── */
.sm-symbol-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
}

.sm-symbol {
font-size: 7rem;
line-height: 1;
transition: transform 0.15s ease;
animation: sm-symbol-enter 0.2s ease-out;
}

@keyframes sm-symbol-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.sm-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.sm-feedback-flash.sm-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.sm-feedback-flash.sm-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.sm-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.sm-feedback-icon.sm-show-check {
animation: sm-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.sm-feedback-icon.sm-show-x {
animation: sm-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes sm-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Action Buttons ── */
.sm-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.sm-action-btn {
flex: 1;
padding: 1rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
background: var(--color-bg-primary);
color: var(--color-text-primary);
}

[data-theme="dark"] .sm-action-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.sm-action-btn:active {
transform: scale(0.95);
}

.sm-action-btn:disabled {
opacity: 0.45;
cursor: default;
transform: none;
}

.sm-action-btn .sm-btn-icon {
font-size: 1.5rem;
}

.sm-action-btn .sm-btn-kbd {
font-size: 0.65rem;
color: var(--color-text-secondary);
font-weight: 400;
}

[data-theme="dark"] .sm-action-btn .sm-btn-kbd {
color: var(--color-dark-text-secondary);
}

.sm-btn-different {
border-color: #ef4444;
}

.sm-btn-different:hover {
background: rgba(239, 68, 68, 0.08);
}

[data-theme="dark"] .sm-btn-different:hover {
background: rgba(239, 68, 68, 0.15);
}

.sm-btn-same {
border-color: #22c55e;
}

.sm-btn-same:hover {
background: rgba(34, 197, 94, 0.08);
}

[data-theme="dark"] .sm-btn-same:hover {
background: rgba(34, 197, 94, 0.15);
}

.sm-playing-kbd-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-playing-kbd-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#sm-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#sm-pause-overlay .sm-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#sm-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.sm-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sm-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .sm-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes sm-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.sm-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.sm-complete-card .sm-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.sm-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.sm-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: sm-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes sm-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.sm-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.sm-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .sm-complete-stat {
background: var(--color-dark-bg-secondary);
}

.sm-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.sm-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.sm-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.sm-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .sm-back-link {
color: var(--color-dark-text-secondary);
}

.sm-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.sm-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.sm-level-up-toast.sm-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#speed-match-game {
padding: 0.5rem;
}
.sm-symbol {
font-size: 5rem;
}
.sm-action-btn {
padding: 0.75rem;
font-size: 1rem;
}
.sm-header {
padding: 0.5rem;
gap: 0.25rem;
}
.sm-stat-value {
font-size: 1rem;
}
#sm-instructions { padding: 0.75rem 0.5rem; }
#sm-instructions .sm-icon { font-size: 2rem; margin-bottom: 0; }
#sm-instructions h2 { font-size: 1.3rem; }
#sm-instructions .sm-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#sm-instructions .sm-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#sm-instructions .sm-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.sm-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#speed-match-game {
padding: 0.75rem;
}
.sm-symbol {
font-size: 6rem;
}
.sm-action-btn {
padding: 0.875rem;
}
}
@media (max-width: 360px) {
.sm-symbol {
font-size: 4rem;
}
.sm-action-btn {
padding: 0.625rem;
font-size: 0.9rem;
}
.sm-complete-stats {
grid-template-columns: 1fr 1fr;
}
.sm-final-score {
font-size: 2rem;
}
.sm-header {
padding: 0.375rem;
}
.sm-stat-value {
font-size: 0.9rem;
}
}
@keyframes sm-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.sm-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.sm-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: sm-confetti-fall 2.5s ease-in forwards;
}
.sm-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: sm-glow-fade 1s ease-out forwards;
}
@keyframes sm-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.sm-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: sm-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes sm-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#speed-match-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#speed-match-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #speed-match-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#speed-match-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#speed-match-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="speed-match-game">

<div id="sm-instructions">
<div class="sm-title-row"><span class="sm-icon">&#9889;</span><h2>Speed Match</h2></div>
<p class="sm-subtitle">¿Qué tan rápido puedes procesar?</p>
<div class="sm-how-to">
<h3>Cómo Jugar</h3>
<ol>
<li>Un símbolo aparece en pantalla cada ronda.</li>
<li>Decide si <strong>coincide</strong> con el símbolo de la ronda anterior.</li>
<li>Haz clic en <strong>Igual</strong> si coincide, <strong>Diferente</strong> si no.</li>
<li>¡Responde antes de que se acabe el tiempo o contará como error!</li>
<li>A medida que subes de nivel, el juego se vuelve más rápido y difícil.</li>
</ol>
</div>
<div class="sm-kbd-hints">
<span class="sm-kbd-hint"><span class="sm-kbd">1</span> Diferente</span>
<span class="sm-kbd-hint"><span class="sm-kbd">2</span> Igual</span>
<span class="sm-kbd-hint"><span class="sm-kbd">Esc</span> Pausa</span>
</div>
<div id="sm-best-display" class="sm-personal-best" style="display:none;">
Mejor Puntuación: <strong id="sm-best-score">0</strong> puntos
</div>
<button class="sm-btn-primary" id="sm-start-btn">Iniciar</button>
<div id="sm-challenge-banner-wrap"></div>
</div>

<div id="sm-wizard">
<div id="sm-wizard-card"></div>
</div>

<div id="sm-playing">
<div class="sm-header">
<div class="sm-stat">
<div class="sm-stat-label">Puntuación</div>
<div class="sm-stat-value" id="sm-score">0</div>
</div>
<div class="sm-stat">
<div class="sm-stat-label">Racha</div>
<div class="sm-stat-value" id="sm-streak">0</div>
</div>
<div class="sm-stat">
<div class="sm-stat-label">Nivel</div>
<div class="sm-stat-value" id="sm-level">1</div>
</div>
</div>
<div class="sm-level-info">
<span class="sm-level-text">Nivel <span id="sm-level-text">1</span></span>
<span class="sm-nback-badge" id="sm-nback-badge">1-Back</span>
</div>
<div class="sm-progress-bar">
<div class="sm-progress-fill" id="sm-progress-fill" style="width:0%"></div>
</div>
<div class="sm-timer-bar">
<div class="sm-timer-fill" id="sm-timer-fill" style="width:100%"></div>
</div>
<div class="sm-symbol-area">
<div class="sm-feedback-flash" id="sm-feedback-flash"></div>
<div class="sm-feedback-icon" id="sm-feedback-icon"></div>
<div class="sm-symbol" id="sm-symbol"></div>
</div>
<div class="sm-actions">
<button class="sm-action-btn sm-btn-different" id="sm-btn-different">
<span class="sm-btn-icon">&#10007;</span>
<span>Diferente</span>
<span class="sm-btn-kbd">1</span>
</button>
<button class="sm-action-btn sm-btn-same" id="sm-btn-same">
<span class="sm-btn-icon">&#10003;</span>
<span>Igual</span>
<span class="sm-btn-kbd">2</span>
</button>
</div>
<div class="sm-playing-kbd-hint">Presiona <strong>Esc</strong> para pausar</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="sm-pause-btn" type="button">Pausar</button>
<button class="gk-finish-btn" id="sm-finish-btn" type="button">Terminar</button>
</div>
</div>

<div id="sm-pause-overlay">
<div class="sm-pause-text">Pausado</div>
<button class="sm-btn-primary" id="sm-resume-btn">Continuar</button>
</div>

<div id="sm-complete-overlay">
<div class="sm-complete-card">
<button class="gk-complete-close" id="sm-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="sm-trophy">&#127942;</div>
<h2>¡Juego Completado!</h2>
<div class="sm-final-score" id="sm-final-score">0</div>
<div id="sm-new-best" class="sm-new-best" style="display:none;">&#11088; ¡Nuevo Récord!</div>
<div class="gk-challenge-result" id="sm-challenge-result" style="display:none;"></div>
<div class="sm-complete-stats">
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Nivel</div>
<div class="sm-complete-stat-value" id="sm-final-level">1</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Precisión</div>
<div class="sm-complete-stat-value" id="sm-final-accuracy">0%</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Racha</div>
<div class="sm-complete-stat-value" id="sm-final-streak">0</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Mejor Puntuación</div>
<div class="sm-complete-stat-value" id="sm-final-best">0</div>
</div>
</div>
<div class="sm-complete-actions">
<button class="sm-btn-primary" id="sm-play-again-btn">Repetir</button>
<button class="gk-runtime-history-toggle" id="sm-history-toggle" type="button">Show History</button>
<a href="/es/games/" class="sm-back-link">&larr; Juegos</a>
</div>
<div class="gk-runtime-history-panel" id="sm-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="sm-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="sm-share-btn">&#128279; Comparte tu Puntuación</button>
<div class="gk-share-copied" id="sm-share-copied" style="display:none;">¡Enlace copiado!</div>
</div>
</div>
</div>

<div class="sm-level-up-toast" id="sm-level-toast">¡Subiste de Nivel!</div>

</div>

<script>
(function() {
"use strict";

var SYMBOLS = ['\u25C6', '\u25CF', '\u25A0', '\u25B2', '\u2605', '\u2666', '\u2660', '\u2663', '\u2665', '\u2B1F', '\u2B21', '\u25EF'];
var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_speed-match_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('sm-history-toggle', 'sm-history-panel', 'sm-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
symbolHistory: [],
currentSymbol: '',
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('sm-instructions');
var elWizard = document.getElementById('sm-wizard');
var elWizardCard = document.getElementById('sm-wizard-card');
var elPlaying = document.getElementById('sm-playing');
var elPauseOverlay = document.getElementById('sm-pause-overlay');
var elCompleteOverlay = document.getElementById('sm-complete-overlay');
var elScore = document.getElementById('sm-score');
var elStreak = document.getElementById('sm-streak');
var elLevel = document.getElementById('sm-level');
var elLevelText = document.getElementById('sm-level-text');
var elNbackBadge = document.getElementById('sm-nback-badge');
var elProgressFill = document.getElementById('sm-progress-fill');
var elTimerFill = document.getElementById('sm-timer-fill');
var elSymbol = document.getElementById('sm-symbol');
var elFeedbackFlash = document.getElementById('sm-feedback-flash');
var elFeedbackIcon = document.getElementById('sm-feedback-icon');
var elFinalScore = document.getElementById('sm-final-score');
var elNewBest = document.getElementById('sm-new-best');
var elFinalLevel = document.getElementById('sm-final-level');
var elFinalAccuracy = document.getElementById('sm-final-accuracy');
var elFinalStreak = document.getElementById('sm-final-streak');
var elFinalBest = document.getElementById('sm-final-best');
var elBestDisplay = document.getElementById('sm-best-display');
var elBestScore = document.getElementById('sm-best-score');
var elLevelToast = document.getElementById('sm-level-toast');
var btnStart = document.getElementById('sm-start-btn');
var btnDifferent = document.getElementById('sm-btn-different');
var btnSame = document.getElementById('sm-btn-same');
var btnResume = document.getElementById('sm-resume-btn');
var btnPlayAgain = document.getElementById('sm-play-again-btn');

/* ── Level parameters ── */
function getNBack(lvl) {
return lvl <= 10 ? 1 : 2;
}

function getDisplayTime(lvl) {
return Math.max(2500 - lvl * 100, 800);
}

function getSymbolCount(lvl) {
return Math.min(6 + Math.floor(lvl / 3), 12);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Pick a random symbol ── */
function pickSymbol() {
var count = getSymbolCount(state.level);
var pool = SYMBOLS.slice(0, count);
return pool[Math.floor(Math.random() * pool.length)];
}

/* ── Determine if current symbol matches nBack ── */
function isMatch() {
var nBack = getNBack(state.level);
var idx = state.symbolHistory.length - 1 - nBack;
if (idx < 0) return false;
return state.symbolHistory[idx] === state.currentSymbol;
}

function hasComparisonTarget() {
return state.symbolHistory.length > getNBack(state.level);
}

function setAnswerButtonsEnabled(enabled) {
btnDifferent.disabled = !enabled;
btnSame.disabled = !enabled;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
var nBack = getNBack(state.level);
elNbackBadge.textContent = nBack + '-Back';
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('sm-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('sm-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('sm-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'sm-feedback-flash';
elFeedbackIcon.className = 'sm-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('sm-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('sm-show-check');
} else {
elFeedbackFlash.classList.add('sm-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('sm-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'sm-feedback-flash';
elFeedbackIcon.className = 'sm-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Nivel ' + level + '!';
elLevelToast.classList.add('sm-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('sm-toast-show');
}, 1500);
}

function expectedSameForCurrentRound() {
if (!hasComparisonTarget()) return false;
return isMatch();
}

function sameLabel(value) {
if (value === null || value === undefined) return 'No answer';
return value ? 'Same' : 'Different';
}

function recordSpeedHistory(userSaidSame, correct) {
var expected = expectedSameForCurrentRound();
var html = '<strong>' + runHistory.escape(getNBack(state.level) + '-Back') + '</strong>';
html += '<div class="gk-runtime-history-sub">Symbol: ' + runHistory.escape(state.currentSymbol) + '</div>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(sameLabel(userSaidSame)) + ' | Correct: ' + runHistory.escape(sameLabel(expected)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(userSaidSame) {
if (state.answered || state.gameOver || !hasComparisonTarget()) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var matchResult = isMatch();
var correct = (userSaidSame === matchResult);

state.totalAnswered++;
recordSpeedHistory(userSaidSame, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.symbolHistory = [];
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;

if (!hasComparisonTarget()) {
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 150);
return;
}
state.totalAnswered++;
state.streak = 0;
recordSpeedHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.symbolHistory = [];
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;
state.currentSymbol = pickSymbol();
state.symbolHistory.push(state.currentSymbol);

elSymbol.textContent = state.currentSymbol;
elSymbol.style.animation = 'none';
void elSymbol.offsetWidth;
elSymbol.style.animation = '';

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();
setAnswerButtonsEnabled(hasComparisonTarget());

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'sm-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'sm-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'sm-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.sm-trophy');
var title = document.querySelector('#sm-complete-overlay .sm-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = '¡INCREÍBLE!';
elNewBest.className = 'sm-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F ¡INCREÍBLE! ¡Nuevo Récord!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = '¡Buen Trabajo!';
elNewBest.className = 'sm-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('sm-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
/* Restart the current round's timer with full time */
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var SM_WIZARD_STEPS = [
{icon: '\u2728', title: 'Un símbolo aparece en pantalla', desc: 'Mira el símbolo.'},
{icon: '\u2194\uFE0F', title: '¿Igual o Diferente?', desc: '¿Igual al anterior?'},
{icon: '\u26A1', title: 'Rápido', desc: 'Reacciona antes de que acabe el tiempo.', final: true}
];
var smWizardStep = 0;

function renderWizardStep() {
var s = SM_WIZARD_STEPS[smWizardStep];
var dotsHtml = '';
for (var i = 0; i < SM_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="sm-wizard-dot' + (i === smWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Comenzar a Jugar' : 'Siguiente';
elWizardCard.innerHTML =
'<div class="sm-wizard-icon">' + s.icon + '</div>' +
'<div class="sm-wizard-title">' + s.title + '</div>' +
'<div class="sm-wizard-desc">' + s.desc + '</div>' +
'<div class="sm-wizard-dots">' + dotsHtml + '</div>' +
'<button class="sm-wizard-btn" id="sm-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'sm-wizard-enter 0.3s ease-out';
document.getElementById('sm-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (smWizardStep < SM_WIZARD_STEPS.length - 1) {
smWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
smWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.symbolHistory = [];
state.currentSymbol = '';
runHistory.clear();
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sm-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('sm-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

btnDifferent.addEventListener('click', function() {
processAnswer(false);
});

btnSame.addEventListener('click', function() {
processAnswer(true);
});

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('sm-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('sm-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('sm-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('sm-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Speed Match', '/es/games/speed-match/', 'sm-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key === '1') {
e.preventDefault();
processAnswer(false);
} else if (e.key === '2') {
e.preventDefault();
processAnswer(true);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('sm-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Scan Corporel & Libération des Tensions
URL: https://guruka.com/fr/meditate/body-scan-and-tension-release/
Description: Fais le point. Relâche. Reviens dans ton corps.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/fr/meditate/body-scan-and-tension-release/');
</script>

### Calme & Apaisement
URL: https://guruka.com/fr/meditate/calm-and-stress-relief/
Description: Relâche les tensions. Reviens à toi.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/fr/meditate/calm-and-stress-relief/');
</script>

### Eugene
URL: https://guruka.com/fr/author/eugene/
Description: Eugene, author profile

# Eugene

Eugene is a contributor to this publication.

### Concentration & Clarté
URL: https://guruka.com/fr/meditate/focus-and-clarity/
Description: Apaise le bruit. Aiguise ton esprit.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/fr/meditate/focus-and-clarity/');
</script>

### Gratitude
URL: https://guruka.com/fr/meditate/gratitude/
Description: Trouve ce qui est déjà bon.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/fr/meditate/gratitude/');
</script>

### Bienveillance Aimante
URL: https://guruka.com/fr/meditate/loving-kindness/
Description: Offre de la chaleur, à toi d'abord.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/fr/meditate/loving-kindness/');
</script>

### Énergie du Matin
URL: https://guruka.com/fr/meditate/morning-energy/
Description: Éveille-toi en douceur. Accueille la journée.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/fr/meditate/morning-energy/');
</script>

### Sommeil & Détente
URL: https://guruka.com/fr/meditate/sleep-and-wind-down/
Description: Laisse la journée partir. Le repos suffit.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/fr/meditate/sleep-and-wind-down/');
</script>

### Color Clash - Jeu d'Entra&icirc;nement C&eacute;r&eacute;bral
URL: https://guruka.com/fr/games/color-clash/
Description: Choisissez les couleurs selon la regle.

<style>
#color-clash-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #color-clash-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#cc-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.cc-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#cc-instructions.cc-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#cc-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#cc-instructions.cc-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #cc-instructions.cc-subtitle {
color: var(--color-dark-text-secondary);
}

#cc-instructions.cc-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #cc-instructions.cc-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#cc-instructions.cc-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#cc-instructions.cc-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#cc-instructions.cc-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.cc-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].cc-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.cc-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.cc-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.cc-btn-primary:hover {
background: var(--color-primary-hover);
}

.cc-btn-primary:active {
transform: scale(0.97);
}

.cc-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.cc-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"].cc-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#cc-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#cc-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: cc-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #cc-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes cc-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.cc-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.cc-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.cc-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].cc-wizard-desc {
color: var(--color-dark-text-secondary);
}
.cc-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.cc-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.cc-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].cc-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"].cc-wizard-dot.active {
background: var(--color-primary);
}
.cc-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.cc-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#cc-wizard-card {
padding: 1.5rem 1rem;
}
.cc-wizard-icon {
font-size: 2rem;
}
.cc-wizard-title {
font-size: 1.1rem;
}
.cc-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#cc-playing {
display: none;
flex: 1;
flex-direction: column;
}

.cc-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].cc-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.cc-stat {
text-align: center;
}

.cc-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"].cc-stat-label {
color: var(--color-dark-text-secondary);
}

.cc-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.cc-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.cc-level-text {
font-weight: 600;
}

.cc-modifier-badge {
background: #ec4899;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.cc-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].cc-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.cc-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.cc-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"].cc-timer-bar {
background: var(--color-dark-bg-secondary);
}

.cc-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.cc-timer-fill.cc-timer-warning {
background: #ef4444;
}

/* ── Rule Indicator ── */
.cc-rule-indicator {
text-align: center;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 1rem;
transition: background 0.3s, color 0.3s;
}

.cc-rule-ink {
background: rgba(236,72,153,0.15);
color: #ec4899;
border: 1px solid rgba(236,72,153,0.3);
}

[data-theme="dark"].cc-rule-ink {
background: rgba(236,72,153,0.25);
color: #f472b6;
}

.cc-rule-word {
background: rgba(59,130,246,0.15);
color: #3b82f6;
border: 1px solid rgba(59,130,246,0.3);
}

[data-theme="dark"].cc-rule-word {
background: rgba(59,130,246,0.25);
color: #60a5fa;
}

.cc-rule-bg {
background: rgba(168,85,247,0.15);
color: #a855f7;
border: 1px solid rgba(168,85,247,0.3);
}

[data-theme="dark"].cc-rule-bg {
background: rgba(168,85,247,0.25);
color: #c084fc;
}

/* ── Stimulus Display ── */
.cc-stimulus-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
position: relative;
}

.cc-stimulus-word {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.2;
animation: cc-stimulus-enter 0.2s ease-out;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.cc-stimulus-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
animation: cc-stimulus-enter 0.2s ease-out;
}

.cc-bg-square {
width: 50px;
height: 50px;
border-radius: 0.5rem;
border: 2px solid rgba(0,0,0,0.1);
flex-shrink: 0;
}

[data-theme="dark"].cc-bg-square {
border-color: rgba(255,255,255,0.15);
}

@keyframes cc-stimulus-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.cc-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.cc-feedback-flash.cc-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.cc-feedback-flash.cc-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.cc-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.cc-feedback-icon.cc-show-check {
animation: cc-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.cc-feedback-icon.cc-show-x {
animation: cc-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes cc-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Color Answer Buttons ── */
.cc-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.cc-answer-btn {
padding: 0.75rem;
border: 2px solid transparent;
border-radius: 0.75rem;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, opacity 0.15s;
color: #fff;
min-height: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}

.cc-color-circle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.4);
background: currentColor;
}

.cc-answer-btn:active {
transform: scale(0.95);
}

.cc-answer-btn:hover {
opacity: 0.9;
border-color: rgba(255,255,255,0.5);
}

.cc-answer-btn.cc-correct-flash {
border-color: #22c55e;
box-shadow: 0 0 15px rgba(34,197,94,0.4);
}

.cc-answer-btn.cc-wrong-flash {
border-color: #ef4444;
box-shadow: 0 0 15px rgba(239,68,68,0.4);
}

.cc-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].cc-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#cc-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#cc-pause-overlay.cc-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#cc-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.cc-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: cc-modal-enter 0.3s ease-out;
}

[data-theme="dark"].cc-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes cc-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.cc-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.cc-complete-card.cc-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.cc-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.cc-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: cc-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes cc-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.cc-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.cc-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"].cc-complete-stat {
background: var(--color-dark-bg-secondary);
}

.cc-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"].cc-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.cc-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.cc-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.cc-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"].cc-back-link {
color: var(--color-dark-text-secondary);
}

.cc-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.cc-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.cc-level-up-toast.cc-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#color-clash-game {
padding: 0.5rem;
}
.cc-stimulus-word {
font-size: 2.5rem;
}
.cc-answer-btn {
padding: 0.5rem;
min-height: 60px;
font-size: 0.7rem;
}
.cc-color-circle {
width: 40px;
height: 40px;
}
.cc-header {
padding: 0.5rem;
gap: 0.25rem;
}
.cc-stat-value {
font-size: 1rem;
}
#cc-instructions { padding: 0.75rem 0.5rem; }
#cc-instructions.cc-icon { font-size: 2rem; margin-bottom: 0; }
#cc-instructions h2 { font-size: 1.3rem; }
#cc-instructions.cc-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#cc-instructions.cc-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#cc-instructions.cc-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.cc-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
.cc-bg-square { width: 40px; height: 40px; }
}
@media (max-width: 640px) {
#color-clash-game {
padding: 0.75rem;
}
.cc-stimulus-word {
font-size: 3rem;
}
.cc-answer-btn {
padding: 0.625rem;
}
}
@media (max-width: 360px) {
.cc-stimulus-word {
font-size: 2rem;
}
.cc-answer-btn {
padding: 0.5rem;
font-size: 0.65rem;
min-height: 54px;
}
.cc-color-circle {
width: 34px;
height: 34px;
}
.cc-complete-stats {
grid-template-columns: 1fr 1fr;
}
.cc-final-score {
font-size: 2rem;
}
.cc-header {
padding: 0.375rem;
}
.cc-stat-value {
font-size: 0.9rem;
}
.cc-rule-indicator {
font-size: 0.8rem;
padding: 0.4rem 0.75rem;
}
}
@keyframes cc-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.cc-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.cc-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: cc-confetti-fall 2.5s ease-in forwards;
}
.cc-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(236,72,153,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: cc-glow-fade 1s ease-out forwards;
}
@keyframes cc-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.cc-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: cc-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(236,72,153,0.4);
}
@keyframes cc-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#color-clash-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#color-clash-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #color-clash-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#color-clash-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#color-clash-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="color-clash-game">

<div id="cc-instructions">
<div class="cc-title-row"><span class="cc-icon">&#127912;</span><h2>Color Clash</h2></div>
<p class="cc-subtitle">Contr&ocirc;le inhibiteur bas&eacute; sur Stroop &amp; attention s&eacute;lective</p>
<div class="cc-how-to">
<h3>Comment Jouer</h3>
<ol>
<li>Un mot de couleur appara&icirc;t &eacute;crit dans une <strong>couleur d'encre diff&eacute;rente</strong>.</li>
<li>Suivez l'<strong>indicateur de r&egrave;gle</strong>, appuyez sur la bonne couleur selon la r&egrave;gle en cours.</li>
<li>Les r&egrave;gles alternent entre <strong>&laquo; Couleur de l'Encre &raquo;</strong> et <strong>&laquo; Sens du Mot &raquo;</strong> au fil des niveaux.</li>


</ol>
</div>
<div id="cc-best-display" class="cc-personal-best" style="display:none;">
Record : <strong id="cc-best-score">0</strong> points
</div>
<button class="cc-btn-primary" id="cc-start-btn">Commencer</button>
<div id="cc-challenge-banner-wrap"></div>
</div>

<div id="cc-wizard">
<div id="cc-wizard-card"></div>
</div>

<div id="cc-playing">
<div class="cc-header">
<div class="cc-stat">
<div class="cc-stat-label">Score</div>
<div class="cc-stat-value" id="cc-score">0</div>
</div>
<div class="cc-stat">
<div class="cc-stat-label">S&eacute;rie</div>
<div class="cc-stat-value" id="cc-streak">0</div>
</div>
<div class="cc-stat">
<div class="cc-stat-label">Level</div>
<div class="cc-stat-value" id="cc-level">1</div>
</div>
</div>
<div class="cc-level-info">
<span class="cc-level-text">Level <span id="cc-level-text">1</span></span>
<span class="cc-modifier-badge" id="cc-modifier-badge" style="display:none;">Changement de r&egrave;gle</span>
</div>
<div class="cc-progress-bar">
<div class="cc-progress-fill" id="cc-progress-fill" style="width:0%"></div>
</div>
<div class="cc-timer-bar">
<div class="cc-timer-fill" id="cc-timer-fill" style="width:100%"></div>
</div>
<div class="cc-rule-indicator cc-rule-ink" id="cc-rule-indicator">Appuyez sur la COULEUR DE L'ENCRE</div>
<div class="cc-stimulus-area">
<div class="cc-feedback-flash" id="cc-feedback-flash"></div>
<div class="cc-feedback-icon" id="cc-feedback-icon"></div>
<div id="cc-stimulus-wrap" class="cc-stimulus-wrap">
<span class="cc-stimulus-word" id="cc-stimulus-word"></span>
<div class="cc-bg-square" id="cc-bg-square" style="display:none;"></div>
</div>
</div>
<div class="cc-answers" id="cc-answers">
<button class="cc-answer-btn" id="cc-ans-0"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-1"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-2"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-3"><div class="cc-color-circle"></div><span></span></button>
</div>
<div class="cc-playing-hint">Appuyez sur <strong>1-4</strong> pour r&eacute;pondre &middot; <strong>&Eacute;chap</strong> pour pause</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="cc-pause-btn" type="button">Pause</button>
<button class="gk-finish-btn" id="cc-finish-btn" type="button">Terminer</button>
</div>
</div>

<div id="cc-pause-overlay">
<div class="cc-pause-text">Pause</div>
<button class="cc-btn-primary" id="cc-resume-btn">Reprendre</button>
</div>

<div id="cc-complete-overlay">
<div class="cc-complete-card">
<button class="gk-complete-close" id="cc-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="cc-trophy">&#127942;</div>
<h2>Partie Termin&eacute;e !</h2>
<div class="cc-final-score" id="cc-final-score">0</div>
<div id="cc-new-best" class="cc-new-best" style="display:none;">&#11088; Nouveau record !</div>
<div class="gk-challenge-result" id="cc-challenge-result" style="display:none;"></div>
<div class="cc-complete-stats">
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Niveau atteint</div>
<div class="cc-complete-stat-value" id="cc-final-level">1</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Pr&eacute;cision</div>
<div class="cc-complete-stat-value" id="cc-final-accuracy">0%</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Meilleure s&eacute;rie</div>
<div class="cc-complete-stat-value" id="cc-final-streak">0</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Record personnel</div>
<div class="cc-complete-stat-value" id="cc-final-best">0</div>
</div>
</div>
<div class="cc-complete-actions">
<button class="cc-btn-primary" id="cc-play-again-btn">Encore</button>
<button class="gk-runtime-history-toggle" id="cc-history-toggle" type="button">Show History</button>
<a href="/fr/games/" class="cc-back-link">&larr; Tous les jeux</a>
</div>
<div class="gk-runtime-history-panel" id="cc-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="cc-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="cc-share-btn">&#128279; Partage ton score</button>
<div class="gk-share-copied" id="cc-share-copied" style="display:none;">Copi&eacute; !</div>
</div>
</div>
</div>

<div class="cc-level-up-toast" id="cc-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_color-clash_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('cc-history-toggle', 'cc-history-panel', 'cc-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

/* ── Color pool ── */
var COLORS = [
{ name: 'Rouge', hex: '#ef4444' },
{ name: 'Bleu', hex: '#3b82f6' },
{ name: 'Vert', hex: '#22c55e' },
{ name: 'Jaune', hex: '#eab308' },
{ name: 'Violet', hex: '#a855f7' },
{ name: 'Orange', hex: '#f97316' },
{ name: 'Rose', hex: '#ec4899' },
{ name: 'Cyan', hex: '#06b6d4' }
];

var RULES = { INK: 'ink', WORD: 'word', BG: 'bg' };

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctColorName: '',
currentRule: RULES.INK,
currentStimulus: null,
currentChoices: [],
roundsSinceRuleSwitch: 0,
nextRuleSwitchAt: 0
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('cc-instructions');
var elWizard = document.getElementById('cc-wizard');
var elWizardCard = document.getElementById('cc-wizard-card');
var elPlaying = document.getElementById('cc-playing');
var elPauseOverlay = document.getElementById('cc-pause-overlay');
var elCompleteOverlay = document.getElementById('cc-complete-overlay');
var elScore = document.getElementById('cc-score');
var elStreak = document.getElementById('cc-streak');
var elLevel = document.getElementById('cc-level');
var elLevelText = document.getElementById('cc-level-text');
var elModifierBadge = document.getElementById('cc-modifier-badge');
var elProgressFill = document.getElementById('cc-progress-fill');
var elTimerFill = document.getElementById('cc-timer-fill');
var elRuleIndicator = document.getElementById('cc-rule-indicator');
var elStimulusWord = document.getElementById('cc-stimulus-word');
var elStimulusWrap = document.getElementById('cc-stimulus-wrap');
var elBgSquare = document.getElementById('cc-bg-square');
var elFeedbackFlash = document.getElementById('cc-feedback-flash');
var elFeedbackIcon = document.getElementById('cc-feedback-icon');
var elFinalScore = document.getElementById('cc-final-score');
var elNewBest = document.getElementById('cc-new-best');
var elFinalLevel = document.getElementById('cc-final-level');
var elFinalAccuracy = document.getElementById('cc-final-accuracy');
var elFinalStreak = document.getElementById('cc-final-streak');
var elFinalBest = document.getElementById('cc-final-best');
var elBestDisplay = document.getElementById('cc-best-display');
var elBestScore = document.getElementById('cc-best-score');
var elLevelToast = document.getElementById('cc-level-toast');
var btnStart = document.getElementById('cc-start-btn');
var btnResume = document.getElementById('cc-resume-btn');
var btnPlayAgain = document.getElementById('cc-play-again-btn');
var answerBtns = [
document.getElementById('cc-ans-0'),
document.getElementById('cc-ans-1'),
document.getElementById('cc-ans-2'),
document.getElementById('cc-ans-3')
];

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getColorPool(lvl) {
if (lvl <= 9) return COLORS.slice(0, 4);
return COLORS;
}

/* ── Rule logic ── */
function getRuleForLevel(lvl) {
if (lvl <= 6) return RULES.INK;
return RULES.INK;
}

function shouldSwitchRules(lvl) {
return lvl >= 7;
}

function isTripleStroop(lvl) {
return lvl >= 17;
}

function isCongruent(lvl) {
return lvl <= 3;
}

function doesRuleSwitchMidLevel(lvl) {
return lvl >= 13 && lvl <= 16;
}

function updateRuleIndicator() {
elRuleIndicator.className = 'cc-rule-indicator';
if (state.currentRule === RULES.INK) {
elRuleIndicator.textContent = 'Appuyez sur la COULEUR DE L\u2019ENCRE';
elRuleIndicator.classList.add('cc-rule-ink');
} else if (state.currentRule === RULES.WORD) {
elRuleIndicator.textContent = 'Appuyez sur le SENS DU MOT';
elRuleIndicator.classList.add('cc-rule-word');
} else if (state.currentRule === RULES.BG) {
elRuleIndicator.textContent = 'Appuyez sur la COULEUR DE FOND';
elRuleIndicator.classList.add('cc-rule-bg');
}
}

/* ── Random helpers ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}

function pickRandom(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function pickDifferent(arr, exclude) {
var filtered = arr.filter(function(c) { return c.name !== exclude.name; });
return pickRandom(filtered);
}

/* ── Generate stimulus ── */
function generateStimulus(lvl) {
var pool = getColorPool(lvl);
var wordColor, inkColor, bgColor, correctColor;

if (isCongruent(lvl)) {
/* L1-3: congruent, word matches ink */
wordColor = pickRandom(pool);
inkColor = wordColor;
bgColor = null;
state.currentRule = RULES.INK;
correctColor = wordColor;
} else if (lvl <= 6) {
/* L4-6: incongruent, identify ink */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
state.currentRule = RULES.INK;
correctColor = inkColor;
} else if (lvl <= 9) {
/* L7-9: rule alternates each round between ink and word */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else if (lvl <= 12) {
/* L10-12: 8 colors, rule alternates */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else if (lvl <= 16) {
/* L13-16: rule switches mid-level */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else {
/* L17-20: triple stroop */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = pickDifferent(pool, inkColor);
while (bgColor.name === wordColor.name) {
bgColor = pickDifferent(pool, inkColor);
}
if (state.currentRule === RULES.INK) {
correctColor = inkColor;
} else if (state.currentRule === RULES.WORD) {
correctColor = wordColor;
} else {
correctColor = bgColor;
}
}

return {
wordText: wordColor.name,
inkHex: inkColor.hex,
bgColor: bgColor,
correctColor: correctColor,
pool: pool
};
}

function generateColorChoices(correctColor, pool) {
var choices = [correctColor];
var attempts = 0;
while (choices.length < 4 && attempts < 50) {
var candidate = pickRandom(pool);
var isDuplicate = false;
for (var i = 0; i < choices.length; i++) {
if (choices[i].name === candidate.name) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
choices.push(candidate);
}
attempts++;
}
/* Fill remaining if pool is too small */
var allColors = COLORS.slice();
while (choices.length < 4) {
var c = pickRandom(allColors);
var dup = false;
for (var k = 0; k < choices.length; k++) {
if (choices[k].name === c.name) { dup = true; break; }
}
if (!dup) choices.push(c);
}
return shuffle(choices);
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
if (shouldSwitchRules(state.level)) {
elModifierBadge.style.display = '';
if (isTripleStroop(state.level)) {
elModifierBadge.textContent = 'Triple Stroop';
} else if (doesRuleSwitchMidLevel(state.level)) {
elModifierBadge.textContent = 'Changement en niveau';
} else {
elModifierBadge.textContent = 'Changement de r\u00e8gle';
}
} else {
elModifierBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('cc-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('cc-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('cc-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'cc-feedback-flash';
elFeedbackIcon.className = 'cc-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('cc-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('cc-show-check');
} else {
elFeedbackFlash.classList.add('cc-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('cc-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'cc-feedback-flash';
elFeedbackIcon.className = 'cc-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + ' !';
elLevelToast.classList.add('cc-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('cc-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'cc-correct-flash' : 'cc-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('cc-correct-flash', 'cc-wrong-flash');
}, 400);
}

/* ── Determine rule for the next round ── */
function determineRule() {
var lvl = state.level;
if (lvl <= 3) {
state.currentRule = RULES.INK;
} else if (lvl <= 6) {
state.currentRule = RULES.INK;
} else if (lvl <= 12) {
/* Alternate each round */
state.currentRule = (state.round % 2 === 0) ? RULES.INK : RULES.WORD;
} else if (lvl <= 16) {
/* Mid-level switching every 3-5 rounds */
state.roundsSinceRuleSwitch++;
if (state.roundsSinceRuleSwitch >= state.nextRuleSwitchAt) {
state.currentRule = (state.currentRule === RULES.INK) ? RULES.WORD : RULES.INK;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
}
} else {
/* L17-20: triple stroop, cycle through ink/word/bg */
var rules = [RULES.INK, RULES.WORD, RULES.BG];
state.roundsSinceRuleSwitch++;
if (state.roundsSinceRuleSwitch >= state.nextRuleSwitchAt) {
var currentIdx = rules.indexOf(state.currentRule);
var nextIdx = (currentIdx + 1) % rules.length;
state.currentRule = rules[nextIdx];
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(2, 4);
}
}
}

/* ── Set color button appearance ── */
function setColorButton(btn, color) {
btn.style.background = color.hex;
btn.style.borderColor = 'transparent';
var circle = btn.querySelector('.cc-color-circle');
var label = btn.querySelector('span');
circle.style.background = '#fff';
circle.style.borderColor = 'rgba(255,255,255,0.6)';
circle.style.background = color.hex;
circle.style.filter = 'brightness(1.2)';
label.textContent = color.name;
btn.dataset.colorName = color.name;
}

function findColorByName(name) {
for (var i = 0; i < COLORS.length; i++) {
if (COLORS[i].name === name) return COLORS[i];
}
return null;
}

function colorHistoryChip(color) {
if (!color) return 'No answer';
return '<span class="gk-history-swatch" style="background:' + runHistory.escape(color.hex) + '"></span>' + runHistory.escape(color.name);
}

function recordColorHistory(selectedName, correct) {
var selected = findColorByName(selectedName);
var correctColor = state.currentStimulus ? state.currentStimulus.correctColor : findColorByName(state.correctColorName);
var ruleText = elRuleIndicator ? elRuleIndicator.textContent : 'Color rule';
var stimulus = state.currentStimulus;
var html = '<strong>' + runHistory.escape(ruleText) + '</strong>';
if (stimulus) {
html += '<div class="gk-runtime-history-sub">Word: ' + runHistory.escape(stimulus.wordText) + ' | Ink: <span class="gk-history-swatch" style="background:' + runHistory.escape(stimulus.inkHex) + '"></span></div>';
}
html += '<div class="gk-runtime-history-sub">Your: ' + colorHistoryChip(selected) + ' | Correct: ' + colorHistoryChip(correctColor) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var chosenName = answerBtns[chosenIdx].dataset.colorName;
var correct = (chosenName === state.correctColorName);

state.totalAnswered++;
recordColorHistory(chosenName, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordColorHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

/* Determine rule for this round */
determineRule();
updateRuleIndicator();

var stimulus = generateStimulus(state.level);
state.correctColorName = stimulus.correctColor.name;
state.currentStimulus = stimulus;

/* Display the stimulus word */
elStimulusWord.textContent = stimulus.wordText;
elStimulusWord.style.color = stimulus.inkHex;
elStimulusWrap.style.animation = 'none';
void elStimulusWrap.offsetWidth;
elStimulusWrap.style.animation = '';

/* Handle background square for triple stroop */
if (stimulus.bgColor && isTripleStroop(state.level)) {
elBgSquare.style.display = 'block';
elBgSquare.style.background = stimulus.bgColor.hex;
} else {
elBgSquare.style.display = 'none';
}

/* Generate and display color choices */
var choices = generateColorChoices(stimulus.correctColor, stimulus.pool);
state.currentChoices = choices.slice();
for (var i = 0; i < 4; i++) {
setColorButton(answerBtns[i], choices[i]);
}

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'cc-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'cc-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'cc-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.cc-trophy');
var title = document.querySelector('#cc-complete-overlay .cc-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'INCROYABLE !';
elNewBest.className = 'cc-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F INCROYABLE ! Nouveau record !';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Bien jou\u00e9 !';
elNewBest.className = 'cc-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('cc-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var CC_WIZARD_STEPS = [
{icon: '\uD83C\uDFA8', title: 'Lisez la couleur, pas le mot', desc: 'Un mot de couleur appara\u00eet dans une couleur d\u2019encre diff\u00e9rente. Suivez l\u2019indicateur de r\u00e8gle pour choisir la bonne r\u00e9ponse !'},
{icon: '\uD83D\uDD04', title: 'Les r\u00e8gles changent avec les niveaux', desc: 'Aux niveaux sup\u00e9rieurs, la r\u00e8gle alterne entre \u00ab Couleur de l\u2019Encre \u00bb et \u00ab Sens du Mot \u00bb. Restez concentr\u00e9 !'},
{icon: '\u26A1', title: 'Vite', desc: 'R\u00e9pondez avant la fin du temps. Vitesse et s\u00e9ries = points bonus !', final: true}
];
var ccWizardStep = 0;

function renderWizardStep() {
var s = CC_WIZARD_STEPS[ccWizardStep];
var dotsHtml = '';
for (var i = 0; i < CC_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="cc-wizard-dot' + (i === ccWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Commencer' : 'Suivant';
elWizardCard.innerHTML =
'<div class="cc-wizard-icon">' + s.icon + '</div>' +
'<div class="cc-wizard-title">' + s.title + '</div>' +
'<div class="cc-wizard-desc">' + s.desc + '</div>' +
'<div class="cc-wizard-dots">' + dotsHtml + '</div>' +
'<button class="cc-wizard-btn" id="cc-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'cc-wizard-enter 0.3s ease-out';
document.getElementById('cc-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ccWizardStep < CC_WIZARD_STEPS.length - 1) {
ccWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ccWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctColorName = '';
state.currentRule = RULES.INK;
state.currentStimulus = null;
state.currentChoices = [];
runHistory.clear();
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('cc-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('cc-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('cc-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('cc-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('cc-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('cc-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Color Clash', '/fr/games/color-clash/', 'cc-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key >= '1' && e.key <= '4') {
e.preventDefault();
processAnswer(parseInt(e.key, 10) - 1);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('cc-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Memory Matrix - Jeu d'Entraînement Cérébral
URL: https://guruka.com/fr/games/memory-matrix/
Description: Retenez les motifs de grille.

<style>
#memory-matrix-game {
max-width: 540px;
margin: 0 auto;
padding: 1.5rem 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
-webkit-tap-highlight-color: transparent;
}

#memory-matrix-game * {
box-sizing: border-box;
}

#memory-matrix-game .mm-screen {
display: none;
animation: mmFadeIn 0.4s ease-out;
}

#memory-matrix-game .mm-screen.active {
display: block;
}

@keyframes mmFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes mmPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}

@keyframes mmCellGlow {
0% { box-shadow: 0 0 0 0 rgba(15, 144, 114, 0.4); }
70% { box-shadow: 0 0 0 8px rgba(15, 144, 114, 0); }
100% { box-shadow: 0 0 0 0 rgba(15, 144, 114, 0); }
}

@keyframes mmShine {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}

@keyframes mmBounceIn {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}

@keyframes mmSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* ---- Instructions Screen ---- */
#memory-matrix-game .mm-instructions {
text-align: center;
}

#memory-matrix-game .mm-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#memory-matrix-game .mm-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 0.75rem;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
margin-bottom: 0;
}

#memory-matrix-game .mm-icon-wrap svg {
width: 36px;
height: 36px;
stroke: var(--color-primary);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

#memory-matrix-game .mm-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 0.25rem;
}

#memory-matrix-game .mm-subtitle {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
}

#memory-matrix-game .mm-how-to {
text-align: left;
margin-bottom: 1.5rem;
}

#memory-matrix-game .mm-how-to h3 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 0.75rem;
}

#memory-matrix-game .mm-how-to ol {
list-style: none;
padding: 0;
margin: 0;
}

#memory-matrix-game .mm-how-to li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.625rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

#memory-matrix-game .mm-step-num {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
font-size: 0.8rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}

#memory-matrix-game .mm-best-banner {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 0.75rem 1rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

#memory-matrix-game .mm-best-banner strong {
color: var(--color-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-best-banner {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

/* ---- Buttons ---- */
#memory-matrix-game .mm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: none;
border-radius: 0.625rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
padding: 0.75rem 1.5rem;
transition: all 0.2s ease;
}

#memory-matrix-game .mm-btn:active {
transform: scale(0.97);
}

#memory-matrix-game .mm-btn-primary {
background: var(--color-primary);
color: #fff;
width: 100%;
}

#memory-matrix-game .mm-btn-primary:hover {
background: var(--color-primary-hover);
box-shadow: 0 4px 12px rgba(15, 144, 114, 0.3);
}

#memory-matrix-game .mm-btn-outline {
background: transparent;
color: var(--color-text-primary);
border: 2px solid var(--color-border);
}

#memory-matrix-game .mm-btn-outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-btn-outline {
color: var(--color-dark-text-primary);
border-color: var(--color-dark-border);
}

[data-theme="dark"] #memory-matrix-game .mm-btn-outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}

#memory-matrix-game .mm-btn-submit {
background: var(--color-primary);
color: #fff;
}

#memory-matrix-game .mm-btn-submit:hover:not(:disabled) {
background: var(--color-primary-hover);
}

#memory-matrix-game .mm-btn-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* ---- Wizard Overlay ---- */
#mm-wizard {
display: none;
animation: mmFadeIn 0.4s ease-out;
}
#mm-wizard.active {
display: block;
}
.mm-wizard-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
.mm-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: mmWizardEnter 0.3s ease-out;
}
[data-theme="dark"].mm-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes mmWizardEnter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.mm-wizard-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.mm-wizard-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
.mm-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].mm-wizard-desc { color: var(--color-dark-text-secondary); }
.mm-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.mm-wizard-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-border);
transition: all 0.3s;
}
.mm-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].mm-wizard-dot { background: var(--color-dark-border, #3a4553); }
[data-theme="dark"].mm-wizard-dot.active { background: var(--color-primary); }
.mm-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.mm-wizard-btn:hover { background: var(--color-primary-hover, #0d7a62); }
@media (max-width: 400px) {
.mm-wizard-card { padding: 1.5rem 1rem; }
.mm-wizard-icon { font-size: 2rem; }
.mm-wizard-title { font-size: 1.1rem; }
.mm-wizard-desc { font-size: 0.85rem; }
}

/* ---- Game Header ---- */
#memory-matrix-game .mm-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
margin-bottom: 1rem;
}

[data-theme="dark"] #memory-matrix-game .mm-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-header-item {
text-align: center;
}

#memory-matrix-game .mm-header-label {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.125rem;
}

[data-theme="dark"] #memory-matrix-game .mm-header-label {
color: var(--color-dark-text-secondary);
}

#memory-matrix-game .mm-header-value {
font-size: 1.15rem;
font-weight: 700;
color: var(--color-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-header-value {
color: var(--color-dark-text-primary);
}

#memory-matrix-game .mm-streak-value {
color: #f59e0b;
}

/* ---- Phase Indicator ---- */
#memory-matrix-game .mm-phase {
text-align: center;
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 1rem;
min-height: 1.5rem;
}

#memory-matrix-game .mm-phase-memorize {
color: var(--color-primary);
animation: mmPulse 1.5s ease-in-out infinite;
}

#memory-matrix-game .mm-phase-recall {
color: #f59e0b;
}

#memory-matrix-game .mm-phase-correct {
color: #22c55e;
}

#memory-matrix-game .mm-phase-wrong {
color: #ef4444;
}

/* ---- Grid ---- */
#memory-matrix-game .mm-grid-wrap {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}

#memory-matrix-game .mm-grid {
display: grid;
gap: 6px;
}

#memory-matrix-game .mm-cell {
aspect-ratio: 1;
border-radius: 8px;
border: 2px solid var(--color-border);
background: var(--color-bg-secondary);
cursor: default;
transition: all 0.25s ease;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
color: transparent;
-webkit-user-select: none;
user-select: none;
}

[data-theme="dark"] #memory-matrix-game .mm-cell {
border-color: var(--color-dark-border);
background: var(--color-dark-bg-secondary);
}

#memory-matrix-game .mm-cell.recall-mode {
cursor: pointer;
}

#memory-matrix-game .mm-cell.recall-mode:hover {
border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-secondary));
}

[data-theme="dark"] #memory-matrix-game .mm-cell.recall-mode:hover {
background: color-mix(in srgb, var(--color-primary) 10%, var(--color-dark-bg-secondary));
}

#memory-matrix-game .mm-cell.showing {
background: var(--color-primary);
border-color: var(--color-primary);
animation: mmCellGlow 0.6s ease-out;
}

#memory-matrix-game .mm-cell.selected {
background: color-mix(in srgb, var(--color-primary) 80%, transparent);
border-color: var(--color-primary);
color: #fff;
}

#memory-matrix-game .mm-cell.fb-correct {
background: #22c55e;
border-color: #16a34a;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-missed {
background: rgba(239, 68, 68, 0.45);
border-color: #ef4444;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-wrong {
background: #ef4444;
border-color: #dc2626;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-neutral {
opacity: 0.5;
transition: all 0.3s ease;
}

/* ---- Progress Bar ---- */
#memory-matrix-game .mm-progress-wrap {
margin-bottom: 1rem;
text-align: center;
}

#memory-matrix-game .mm-progress-bar {
height: 6px;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 3px;
overflow: hidden;
max-width: 240px;
margin: 0 auto 0.375rem;
}

[data-theme="dark"] #memory-matrix-game .mm-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

#memory-matrix-game .mm-progress-text {
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-progress-text {
color: var(--color-dark-text-secondary);
}

/* ---- Action Buttons ---- */
#memory-matrix-game .mm-actions {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}

/* ---- Game Complete Screen ---- */
#memory-matrix-game .mm-complete {
position: relative;
text-align: center;
}

#memory-matrix-game .mm-score-display {
font-size: 3rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
background: linear-gradient(90deg, var(--color-primary), #10b981, var(--color-primary));
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: mmShine 3s linear infinite;
}

#memory-matrix-game .mm-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin: 1.25rem 0;
}

#memory-matrix-game .mm-stat-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 0.75rem 0.5rem;
}

[data-theme="dark"] #memory-matrix-game .mm-stat-card {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-stat-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-stat-value {
color: var(--color-dark-text-primary);
}

#memory-matrix-game .mm-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-secondary);
margin-top: 0.125rem;
}

[data-theme="dark"] #memory-matrix-game .mm-stat-label {
color: var(--color-dark-text-secondary);
}

#memory-matrix-game .mm-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #000;
font-size: 0.8rem;
font-weight: 700;
padding: 0.375rem 1rem;
border-radius: 2rem;
margin-bottom: 1rem;
animation: mmBounceIn 0.5s ease-out;
}

#memory-matrix-game .mm-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}

#memory-matrix-game .mm-back-link {
display: inline-block;
margin-top: 0.75rem;
color: var(--color-primary);
text-decoration: none;
font-size: 0.9rem;
}

#memory-matrix-game .mm-back-link:hover {
text-decoration: underline;
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

/* ---- Dark Mode ---- */
[data-theme="dark"] #memory-matrix-game {
color: var(--color-dark-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-title {
color: var(--color-dark-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-subtitle {
color: var(--color-dark-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-how-to li {
color: var(--color-dark-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-cell.recall-mode:hover {
border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

/* ---- Responsive ---- */
@media (max-width: 400px) {
#memory-matrix-game {
padding: 1rem 0.5rem;
}
#memory-matrix-game .mm-grid {
gap: 4px;
}
#memory-matrix-game .mm-header {
padding: 0.5rem;
}
#memory-matrix-game .mm-header-value {
font-size: 1rem;
}
#memory-matrix-game .mm-btn {
padding: 0.625rem 1rem;
font-size: 0.9rem;
}
#memory-matrix-game .mm-icon-wrap { width: 40px; height: 40px; margin-bottom: 0; }
#memory-matrix-game .mm-icon-wrap svg { width: 20px; height: 20px; }
#memory-matrix-game .mm-instructions h2 { font-size: 1.3rem; }
#memory-matrix-game .mm-instructions.mm-subtitle { font-size: 0.85rem; margin-bottom: 0.75rem; }
}
@media (max-width: 640px) {
#memory-matrix-game .mm-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
#memory-matrix-game .mm-stat-value {
font-size: 1.1rem;
}
}
@media (max-width: 360px) {
#memory-matrix-game .mm-grid {
gap: 3px;
}
#memory-matrix-game .mm-stats-grid {
grid-template-columns: 1fr 1fr;
}
#memory-matrix-game .mm-btn {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}
#memory-matrix-game .mm-title {
font-size: 1.25rem;
}
#memory-matrix-game .mm-grid-wrap {
max-width: 100%;
overflow: hidden;
}
}
@keyframes mm-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.mm-confetti-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.mm-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: mm-confetti-fall 2.5s ease-in forwards;
}
.mm-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: mm-glow-fade 1s ease-out forwards;
}
@keyframes mm-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.mm-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
font-size: 0.85rem;
font-weight: 700;
padding: 0.375rem 1rem;
border-radius: 2rem;
margin-bottom: 1rem;
animation: mmBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}

#memory-matrix-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#memory-matrix-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #memory-matrix-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="memory-matrix-game">

<div id="mm-instructions" class="mm-screen active">
<div class="mm-instructions">
<div class="mm-title-row"><div class="mm-icon-wrap"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div><h1 class="mm-title">Memory Matrix</h1></div>
<p class="mm-subtitle">Testez votre mémoire spatiale</p>
<div class="mm-how-to">
<h3>Comment Jouer :</h3>
<ol>
<li><span class="mm-step-num">1</span><span>Regardez le motif -- les cellules se mettent en surbrillance une par une</span></li>
<li><span class="mm-step-num">2</span><span>Mémorisez les cellules qui s'allument</span></li>
<li><span class="mm-step-num">3</span><span>Tapez les mêmes cellules de mémoire</span></li>
<li><span class="mm-step-num">4</span><span>À partir du niveau 8, l'ordre compte ! Tapez dans la bonne séquence</span></li>
</ol>
</div>
<div id="mm-instr-best" class="mm-best-banner" style="display:none;"></div>
<button class="mm-btn mm-btn-primary" onclick="mmShowWizard()">Commencer</button>
<div id="mm-challenge-banner-wrap"></div>
</div>
</div>

<div id="mm-wizard" class="mm-screen">
<div class="mm-wizard-overlay">
<div class="mm-wizard-card" id="mm-wizard-card"></div>
</div>
</div>

<div id="mm-playing" class="mm-screen">
<div class="mm-header">
<div class="mm-header-item">
<div class="mm-header-label">Score</div>
<div class="mm-header-value" id="mm-score">0</div>
</div>
<div class="mm-header-item">
<div class="mm-header-label">Niveau</div>
<div class="mm-header-value" id="mm-level">1</div>
</div>
<div class="mm-header-item">
<div class="mm-header-label">Série</div>
<div class="mm-header-value mm-streak-value" id="mm-streak">0</div>
</div>
</div>
<div class="mm-phase" id="mm-phase"></div>
<div class="mm-grid-wrap">
<div class="mm-grid" id="mm-grid"></div>
</div>
<div class="mm-progress-wrap">
<div class="mm-progress-bar">
<div class="mm-progress-fill" id="mm-progress-fill" style="width:0%"></div>
</div>
<div class="mm-progress-text" id="mm-progress-text">Manche 1 sur 3</div>
</div>
<div class="mm-actions" id="mm-actions"></div>
<button class="gk-finish-btn" id="mm-finish-btn">Terminer</button>
</div>

<div id="mm-complete" class="mm-screen">
<div class="mm-complete">
<button class="gk-complete-close" id="mm-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="mm-icon-wrap">
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
</div>
<h1 class="mm-title">Partie Terminée !</h1>
<div class="mm-score-display" id="mm-final-score">0</div>
<div id="mm-new-best-badge" class="mm-new-best" style="display:none;">Nouveau Record !</div>
<div class="gk-challenge-result" id="mm-challenge-result" style="display:none;"></div>
<div class="mm-stats-grid">
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-level">1</div>
<div class="mm-stat-label">Niveau</div>
</div>
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-accuracy">0%</div>
<div class="mm-stat-label">Précision</div>
</div>
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-streak">0</div>
<div class="mm-stat-label">Meilleure Série</div>
</div>
</div>
<div class="mm-complete-actions">
<button class="mm-btn mm-btn-primary" onclick="mmPlayAgain()">Encore</button>
<button class="gk-runtime-history-toggle" id="mm-history-toggle" type="button">Show History</button>
<a href="/fr/games/" class="mm-back-link">Tous les Jeux</a>
</div>
<div class="gk-runtime-history-panel" id="mm-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="mm-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="mm-share-btn">&#128279; Partager votre Score</button>
<div class="gk-share-copied" id="mm-share-copied" style="display:none;">Lien copié !</div>
</div>
</div>
</div>

</div>

<script>
(function() {
var STORAGE_BEST = 'guruka_memory-matrix_best';
var POINTS_PER_CORRECT = 100;
var SPEED_BONUS_THRESHOLD = 1000;
var STREAK_MULTIPLIER = 0.1;
var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('mm-history-toggle', 'mm-history-panel', 'mm-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
 screen: 'instructions',
 score: 0,
 level: 1,
 streak: 0,
 bestStreak: 0,
 correctAnswers: 0,
 wrongAnswers: 0,
 roundsInLevel: 0,
 pattern: [],
 selectedCells: [],
 showingIndex: 0,
 phase: 'showing',
 answerTime: 0,
 countdownValue: 3,
 countdownTimer: null,
 showTimer: null,
 feedbackTimer: null
};

function getLevelConfig(level) {
 var gridSize = level <= 5 ? 3 : level <= 10 ? 4 : level <= 15 ? 5 : 6;
 var patternSize = Math.min(3 + Math.floor(level / 2), gridSize * gridSize - 2);
 var displayTime = Math.max(2000 - (level - 1) * 80, 800);
 var orderMatters = level >= 8;
 return {
 gridSize: gridSize,
 patternSize: patternSize,
 displayTime: displayTime,
 orderMatters: orderMatters,
 roundsPerLevel: 3,
 maxLevel: 20
 };
}

function getPersonalBest() {
 try {
 var val = localStorage.getItem(STORAGE_BEST);
 return val ? parseInt(val, 10) : 0;
 } catch (e) { return 0; }
}

function saveResult(score, level, accuracy) {
 try {
 void level;
 void accuracy;
 var best = getPersonalBest();
 if (score > best) {
 localStorage.setItem(STORAGE_BEST, String(score));
 return true;
 }
 return false;
 } catch (e) { return false; }
}

function showScreen(name) {
 var screens = document.querySelectorAll('#memory-matrix-game .mm-screen');
 for (var i = 0; i < screens.length; i++) {
 screens[i].classList.remove('active');
 }
 var el = document.getElementById('mm-' + name);
 if (el) {
 el.classList.add('active');
 }
 state.screen = name;
}

function updateInstructionsBest() {
 var best = getPersonalBest();
 var banner = document.getElementById('mm-instr-best');
 if (best > 0 && banner) {
 banner.style.display = 'block';
 banner.innerHTML = 'Meilleur Score : <strong>' + best.toLocaleString() + '</strong>';
 }
}

/* ---- Wizard ---- */
var MM_WIZARD_STEPS = [
{icon: '\uD83D\uDCA1', title: 'Regardez les cellules s\'allumer', desc: 'Les cellules se mettent en surbrillance une par une. Attention !'},
{icon: '\uD83D\uDC46', title: 'Tapez-les de mémoire', desc: 'Recréez le motif après sa disparition.'},
{icon: '\uD83D\uDE80', title: 'Prêt ? C\'est parti !', desc: 'Les motifs deviennent plus difficiles à mesure que vous progressez !', final: true}
];
var mmWizardStep = 0;

function mmRenderWizardStep() {
var s = MM_WIZARD_STEPS[mmWizardStep];
var dotsHtml = '';
for (var i = 0; i < MM_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="mm-wizard-dot' + (i === mmWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Commencer à Jouer' : 'Suivant';
var card = document.getElementById('mm-wizard-card');
card.innerHTML =
'<div class="mm-wizard-icon">' + s.icon + '</div>' +
'<div class="mm-wizard-title">' + s.title + '</div>' +
'<div class="mm-wizard-desc">' + s.desc + '</div>' +
'<div class="mm-wizard-dots">' + dotsHtml + '</div>' +
'<button class="mm-wizard-btn" id="mm-wizard-next">' + btnLabel + '</button>';
card.style.animation = 'none';
void card.offsetWidth;
card.style.animation = 'mmWizardEnter 0.3s ease-out';
document.getElementById('mm-wizard-next').addEventListener('click', mmAdvanceWizard);
}

function mmAdvanceWizard() {
if (mmWizardStep < MM_WIZARD_STEPS.length - 1) {
mmWizardStep++;
mmRenderWizardStep();
} else {
mmStartGame();
}
}

window.mmShowWizard = function() {
mmWizardStep = 0;
showScreen('wizard');
mmRenderWizardStep();
};

/* ---- Start ---- */
function mmStartGame() {
 window.scrollTo({ top: 0, behavior: 'instant' });
 enterMobileGameMode();
 state.score = 0;
 state.level = 1;
 state.streak = 0;
 state.bestStreak = 0;
 state.correctAnswers = 0;
 state.wrongAnswers = 0;
 state.roundsInLevel = 0;
 state.pattern = [];
 state.selectedCells = [];
 runHistory.clear();

 showScreen('playing');
 GK.renderChallengeBar('mm-playing', challenge);
 updateHeader();
 generatePattern();
}

/* ---- Update Header ---- */
function updateHeader() {
 document.getElementById('mm-score').textContent = state.score.toLocaleString();
 document.getElementById('mm-level').textContent = state.level;
 document.getElementById('mm-streak').textContent = state.streak;
 if (challenge.active) GK.updateChallengeBar('mm-playing', state.score, challenge.score);
}

/* ---- Generate Pattern ---- */
function generatePattern() {
 var config = getLevelConfig(state.level);
 var totalCells = config.gridSize * config.gridSize;
 var newPattern = [];

 while (newPattern.length < config.patternSize) {
 var cell = Math.floor(Math.random() * totalCells);
 if (newPattern.indexOf(cell) === -1) {
 newPattern.push(cell);
 }
 }

 state.pattern = newPattern;
 state.selectedCells = [];
 state.showingIndex = 0;
 state.phase = 'showing';

 buildGrid(config);
 updateProgressBar(config);
 updatePhase(config);
 updateActions(config);
 startShowingPattern(config);
}

/* ---- Build Grid ---- */
function buildGrid(config) {
 var grid = document.getElementById('mm-grid');
 var cellSize = config.gridSize <= 3 ? 72 : config.gridSize <= 4 ? 62 : config.gridSize <= 5 ? 52 : 44;
 var gapSize = config.gridSize <= 4 ? 6 : 5;
 var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
 if (viewportWidth < 360) {
 var maxCellSize = Math.floor((viewportWidth - 40 - (config.gridSize - 1) * gapSize) / config.gridSize);
 if (maxCellSize < cellSize) cellSize = maxCellSize;
 }
 var totalSize = config.gridSize * cellSize + (config.gridSize - 1) * gapSize;

 grid.style.gridTemplateColumns = 'repeat(' + config.gridSize + ', ' + cellSize + 'px)';
 grid.style.gridTemplateRows = 'repeat(' + config.gridSize + ', ' + cellSize + 'px)';
 grid.style.gap = gapSize + 'px';
 grid.style.width = totalSize + 'px';
 grid.innerHTML = '';

 var totalCells = config.gridSize * config.gridSize;
 for (var i = 0; i < totalCells; i++) {
 var cell = document.createElement('button');
 cell.className = 'mm-cell';
 cell.setAttribute('data-index', i);
 cell.setAttribute('type', 'button');
 (function(idx) {
 cell.addEventListener('click', function() { handleCellClick(idx); });
 })(i);
 grid.appendChild(cell);
 }
}

/* ---- Show Pattern Sequentially ---- */
function startShowingPattern(config) {
 var delay = config.displayTime / state.pattern.length;
 state.showingIndex = 0;

 function showNext() {
 if (state.screen !== 'playing') return;
 if (state.showingIndex < state.pattern.length) {
 // Clear previous highlights
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var j = 0; j < cells.length; j++) {
 cells[j].classList.remove('showing');
 }
 // Highlight current cell
 var idx = state.pattern[state.showingIndex];
 var targetCell = document.querySelector('#mm-grid .mm-cell[data-index="' + idx + '"]');
 if (targetCell) {
 targetCell.classList.add('showing');
 }
 state.showingIndex++;
 state.showTimer = setTimeout(showNext, delay);
 } else {
 // All shown, brief pause then switch to recall
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var j = 0; j < cells.length; j++) {
 cells[j].classList.remove('showing');
 }
 state.showTimer = setTimeout(function() {
 state.phase = 'recall';
 state.answerTime = Date.now();
 enableRecallMode(config);
 updatePhase(config);
 updateActions(config);
 }, 400);
 }
 }

 showNext();
}

/* ---- Enable Recall Mode ---- */
function enableRecallMode(config) {
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var i = 0; i < cells.length; i++) {
 cells[i].classList.add('recall-mode');
 }
}

/* ---- Handle Cell Click ---- */
function handleCellClick(cellIndex) {
 if (state.phase !== 'recall') return;

 var existingIdx = state.selectedCells.indexOf(cellIndex);
 if (existingIdx !== -1) {
 // Deselect
 state.selectedCells.splice(existingIdx, 1);
 } else if (state.selectedCells.length < state.pattern.length) {
 state.selectedCells.push(cellIndex);
 }

 var config = getLevelConfig(state.level);
 updateCellVisuals();
 updatePhase(config);
 updateActions(config);
}

/* ---- Update Cell Visuals ---- */
function updateCellVisuals() {
 var config = getLevelConfig(state.level);
 var cells = document.querySelectorAll('#mm-grid .mm-cell');

 for (var i = 0; i < cells.length; i++) {
 var idx = parseInt(cells[i].getAttribute('data-index'), 10);
 cells[i].classList.remove('selected');
 cells[i].textContent = '';

 if (state.selectedCells.indexOf(idx) !== -1) {
 cells[i].classList.add('selected');
 if (config.orderMatters) {
 cells[i].textContent = String(state.selectedCells.indexOf(idx) + 1);
 cells[i].style.color = '#fff';
 }
 } else {
 cells[i].style.color = 'transparent';
 }
 }
}

/* ---- Update Phase Indicator ---- */
function updatePhase(config) {
 var phaseEl = document.getElementById('mm-phase');
 if (state.phase === 'showing') {
 phaseEl.innerHTML = '<span class="mm-phase-memorize">Mémorisez le motif...</span>';
 } else if (state.phase === 'recall') {
 var orderNote = config.orderMatters ? ' (l\'ordre compte !)' : '';
 phaseEl.innerHTML = '<span class="mm-phase-recall">Tapez les cellules !' + orderNote + ', ' + state.selectedCells.length + '/' + state.pattern.length + ' sélectionnées</span>';
 }
}

/* ---- Update Actions ---- */
function updateActions(config) {
 var actionsEl = document.getElementById('mm-actions');
 if (state.phase !== 'recall') {
 actionsEl.innerHTML = '';
 return;
 }

 var clearDisabled = state.selectedCells.length === 0 ? ' disabled' : '';
 var submitDisabled = state.selectedCells.length !== state.pattern.length ? ' disabled' : '';

 actionsEl.innerHTML =
 '<button class="mm-btn mm-btn-outline" onclick="mmClearSelection()"' + clearDisabled + '>Effacer</button>' +
 '<button class="mm-btn mm-btn-submit" onclick="mmSubmitAnswer()"' + submitDisabled + '>Valider (' + state.selectedCells.length + '/' + state.pattern.length + ')</button>';
}

/* ---- Update Progress Bar ---- */
function updateProgressBar(config) {
 var pct = (state.roundsInLevel / config.roundsPerLevel) * 100;
 document.getElementById('mm-progress-fill').style.width = pct + '%';
 document.getElementById('mm-progress-text').textContent =
 'Manche ' + (state.roundsInLevel + 1) + ' sur ' + config.roundsPerLevel;
}

/* ---- Clear Selection ---- */
window.mmClearSelection = function() {
 state.selectedCells = [];
 updateCellVisuals();
 updateActions(getLevelConfig(state.level));
 updatePhase(getLevelConfig(state.level));
};

function formatCellList(cells) {
if (!cells || !cells.length) return 'none';
var out = [];
for (var i = 0; i < cells.length; i++) out.push(String(cells[i] + 1));
return out.join(', ');
}

function recordMemoryHistory(correct, config) {
var html = '<strong>' + runHistory.escape(config.orderMatters ? 'Order matters' : 'Any order') + '</strong>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(formatCellList(state.selectedCells)) + '</div>';
html += '<div class="gk-runtime-history-sub">Correct: ' + runHistory.escape(formatCellList(state.pattern)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ---- Submit Answer ---- */
window.mmSubmitAnswer = function() {
 if (state.phase !== 'recall') return;
 var config = getLevelConfig(state.level);
 var responseTime = Date.now() - state.answerTime;

 var correct;
 if (config.orderMatters) {
 correct = true;
 for (var i = 0; i < state.pattern.length; i++) {
 if (state.selectedCells[i] !== state.pattern[i]) {
 correct = false;
 break;
 }
 }
 } else {
 correct = state.selectedCells.length === state.pattern.length;
 if (correct) {
 for (var i = 0; i < state.pattern.length; i++) {
 if (state.selectedCells.indexOf(state.pattern[i]) === -1) {
 correct = false;
 break;
 }
 }
 }
 }

 recordMemoryHistory(correct, config);

 // Calculate points
 var pointsEarned = 0;
 if (correct) {
 pointsEarned = POINTS_PER_CORRECT;
 if (responseTime < SPEED_BONUS_THRESHOLD) {
 pointsEarned += Math.floor((SPEED_BONUS_THRESHOLD - responseTime) / 10);
 }
 pointsEarned += Math.floor(state.streak * STREAK_MULTIPLIER * POINTS_PER_CORRECT);
 state.score += pointsEarned;
 state.streak++;
 state.correctAnswers++;
 if (state.streak > state.bestStreak) {
 state.bestStreak = state.streak;
 }
 } else {
 state.streak = 0;
 state.wrongAnswers++;
 }

 updateHeader();
 showFeedback(correct, config);
};

/* ---- Show Feedback ---- */
function showFeedback(correct, config) {
 state.phase = 'feedback';

 var phaseEl = document.getElementById('mm-phase');
 if (correct) {
 phaseEl.innerHTML = '<span class="mm-phase-correct">Correct !</span>';
 } else {
 phaseEl.innerHTML = '<span class="mm-phase-wrong">Incorrect</span>';
 }

 // Update cell visuals to show correct/wrong
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var i = 0; i < cells.length; i++) {
 var idx = parseInt(cells[i].getAttribute('data-index'), 10);
 cells[i].classList.remove('showing', 'selected', 'recall-mode');
 cells[i].style.color = 'transparent';
 cells[i].textContent = '';

 var inPattern = state.pattern.indexOf(idx) !== -1;
 var wasSelected = state.selectedCells.indexOf(idx) !== -1;

 if (inPattern && wasSelected) {
 cells[i].classList.add('fb-correct');
 } else if (inPattern && !wasSelected) {
 cells[i].classList.add('fb-missed');
 } else if (!inPattern && wasSelected) {
 cells[i].classList.add('fb-wrong');
 } else {
 cells[i].classList.add('fb-neutral');
 }
 }

 // Hide action buttons during feedback
 document.getElementById('mm-actions').innerHTML = '';

 state.feedbackTimer = setTimeout(function() {
 advanceRound(config);
 }, 1200);
}

/* ---- Advance Round ---- */
function advanceRound(config) {
 state.roundsInLevel++;

 if (state.roundsInLevel >= config.roundsPerLevel) {
 if (state.level >= config.maxLevel) {
 endGame();
 return;
 }
 state.level++;
 state.roundsInLevel = 0;
 updateHeader();
 }

 generatePattern();
}

/* ---- Celebration effects ---- */
function mmShowConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'mm-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'mm-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'mm-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function mmAnimateScoreCountUp(el, target) {
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(target * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

/* ---- End Game ---- */
function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

function endGame() {
exitMobileGameMode();
 var totalAnswers = state.correctAnswers + state.wrongAnswers;
 var accuracy = totalAnswers > 0 ? Math.round((state.correctAnswers / totalAnswers) * 100) : 0;
 var isNewBest = saveResult(state.score, state.level, accuracy);

 var titleEl = document.querySelector('#mm-complete .mm-title');
 var iconWrap = document.querySelector('#mm-complete .mm-icon-wrap');
 var bestBadge = document.getElementById('mm-new-best-badge');

 if (isNewBest) {
 mmShowConfetti();
 titleEl.textContent = 'INCROYABLE !';
 iconWrap.innerHTML = '<span style="font-size:2.25rem">\uD83C\uDF89</span>';
 bestBadge.className = 'mm-new-best-enhanced';
 bestBadge.innerHTML = '\uD83C\uDF1F INCROYABLE ! Nouveau Record !';
 bestBadge.style.display = 'inline-block';
 } else {
 titleEl.textContent = 'Bien Joué !';
 iconWrap.innerHTML = '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>';
 bestBadge.className = 'mm-new-best';
 bestBadge.style.display = 'none';
 }

 GK.renderChallengeResult('mm-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

 showScreen('complete');

 var scoreEl = document.getElementById('mm-final-score');
 document.getElementById('mm-final-level').textContent = state.level;
 document.getElementById('mm-final-accuracy').textContent = accuracy + '%';
 document.getElementById('mm-final-streak').textContent = state.bestStreak;

 mmAnimateScoreCountUp(scoreEl, state.score);
}

/* ---- Again ---- */
window.mmPlayAgain = function() {
 clearTimeout(state.showTimer);
 clearTimeout(state.feedbackTimer);
 clearInterval(state.countdownTimer);
 updateInstructionsBest();
 showScreen('instructions');
};

/* ---- Init ---- */
updateInstructionsBest();
GK.renderChallengeBanner('mm-challenge-banner-wrap', challenge);


document.getElementById('mm-close-btn').addEventListener('click', function() {
updateInstructionsBest();
showScreen('instructions');
});

document.getElementById('mm-finish-btn').addEventListener('click', function() {
 endGame();
});

document.getElementById('mm-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('mm-share-btn').addEventListener('click', function() {
 GK.shareResult(state.score, 'Memory Matrix', '/fr/games/memory-matrix/', 'mm-share-copied');
});
})();
</script>

### Number Crunch - Jeu d'Entraînement Cérébral
URL: https://guruka.com/fr/games/number-crunch/
Description: Calculez sous chrono.

<style>
#number-crunch-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #number-crunch-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#nc-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.nc-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#nc-instructions.nc-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#nc-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#nc-instructions.nc-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #nc-instructions.nc-subtitle {
color: var(--color-dark-text-secondary);
}

#nc-instructions.nc-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #nc-instructions.nc-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#nc-instructions.nc-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#nc-instructions.nc-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#nc-instructions.nc-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.nc-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.nc-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.nc-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.nc-btn-primary:hover {
background: var(--color-primary-hover);
}

.nc-btn-primary:active {
transform: scale(0.97);
}

.nc-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.nc-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"].nc-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#nc-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#nc-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: nc-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #nc-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes nc-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.nc-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.nc-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.nc-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].nc-wizard-desc {
color: var(--color-dark-text-secondary);
}
.nc-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.nc-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.nc-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].nc-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"].nc-wizard-dot.active {
background: var(--color-primary);
}
.nc-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.nc-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#nc-wizard-card {
padding: 1.5rem 1rem;
}
.nc-wizard-icon {
font-size: 2rem;
}
.nc-wizard-title {
font-size: 1.1rem;
}
.nc-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#nc-playing {
display: none;
flex: 1;
flex-direction: column;
}

.nc-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].nc-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-stat {
text-align: center;
}

.nc-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"].nc-stat-label {
color: var(--color-dark-text-secondary);
}

.nc-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.nc-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.nc-level-text {
font-weight: 600;
}

.nc-modifier-badge {
background: #6366f1;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.nc-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].nc-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.nc-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"].nc-timer-bar {
background: var(--color-dark-bg-secondary);
}

.nc-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.nc-timer-fill.nc-timer-warning {
background: #ef4444;
}

/* ── Equation Display ── */
.nc-equation-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
position: relative;
}

.nc-rule-modifier {
background: rgba(99,102,241,0.1);
color: #6366f1;
padding: 0.4rem 1rem;
border-radius: 2rem;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1rem;
display: none;
}

[data-theme="dark"].nc-rule-modifier {
background: rgba(99,102,241,0.2);
color: #818cf8;
}

.nc-equation {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
animation: nc-eq-enter 0.2s ease-out;
text-align: center;
}

@keyframes nc-eq-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.nc-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.nc-feedback-flash.nc-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.nc-feedback-flash.nc-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.nc-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.nc-feedback-icon.nc-show-check {
animation: nc-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.nc-feedback-icon.nc-show-x {
animation: nc-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes nc-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Answer Buttons ── */
.nc-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.nc-answer-btn {
padding: 1rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.25rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
}

[data-theme="dark"].nc-answer-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.nc-answer-btn:active {
transform: scale(0.95);
}

.nc-answer-btn:hover {
border-color: var(--color-primary);
background: rgba(99,102,241,0.05);
}

[data-theme="dark"].nc-answer-btn:hover {
background: rgba(99,102,241,0.15);
}

.nc-answer-btn.nc-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.nc-answer-btn.nc-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.nc-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-playing-hint {
color: var(--color-dark-text-secondary);
}

#number-crunch-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary);
border-radius: 0.5rem;
background: var(--color-bg-primary);
color: var(--color-primary);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#number-crunch-game .gk-finish-btn:hover {
background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] #number-crunch-game .gk-finish-btn {
background: var(--color-dark-bg-secondary);
color: #fbbf24;
border-color: #fbbf24;
}

/* ── Pause Overlay ── */
#nc-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#nc-pause-overlay.nc-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#nc-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.nc-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: nc-modal-enter 0.3s ease-out;
}

[data-theme="dark"].nc-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes nc-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.nc-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.nc-complete-card.nc-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.nc-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.nc-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: nc-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes nc-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.nc-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.nc-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"].nc-complete-stat {
background: var(--color-dark-bg-secondary);
}

.nc-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.nc-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.nc-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.nc-history-toggle {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.nc-history-toggle:hover {
background: rgba(245, 158, 11, 0.1);
}

.nc-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 240px;
overflow: auto;
border: 1px solid var(--color-border);
border-radius: 0.5rem;
background: var(--color-bg-secondary);
}

[data-theme="dark"] .nc-history-panel {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-history-list {
display: flex;
flex-direction: column;
}

.nc-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border);
font-size: 0.82rem;
}

.nc-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .nc-history-row {
border-color: var(--color-dark-border);
}

.nc-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: baseline;
}

.nc-history-status {
font-weight: 800;
white-space: nowrap;
}

.nc-history-correct .nc-history-status {
color: #16a34a;
}

.nc-history-wrong .nc-history-status {
color: #dc2626;
}

.nc-history-eq {
font-weight: 700;
text-align: right;
}

.nc-history-answer {
margin-top: 0.25rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .nc-history-answer {
color: var(--color-dark-text-secondary);
}

.nc-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary);
text-align: center;
}

.nc-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"].nc-back-link {
color: var(--color-dark-text-secondary);
}

.nc-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.nc-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.nc-level-up-toast.nc-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#number-crunch-game {
padding: 0.5rem;
}
.nc-equation {
font-size: 2rem;
}
.nc-answer-btn {
padding: 0.75rem;
font-size: 1.1rem;
min-height: 48px;
}
.nc-header {
padding: 0.5rem;
gap: 0.25rem;
}
.nc-stat-value {
font-size: 1rem;
}
#nc-instructions { padding: 0.75rem 0.5rem; }
#nc-instructions.nc-icon { font-size: 2rem; margin-bottom: 0; }
#nc-instructions h2 { font-size: 1.3rem; }
#nc-instructions.nc-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#nc-instructions.nc-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#nc-instructions.nc-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.nc-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#number-crunch-game {
padding: 0.75rem;
}
.nc-equation {
font-size: 2.25rem;
}
.nc-answer-btn {
padding: 0.875rem;
}
}
@media (max-width: 360px) {
.nc-equation {
font-size: 1.75rem;
}
.nc-answer-btn {
padding: 0.625rem;
font-size: 1rem;
}
.nc-complete-stats {
grid-template-columns: 1fr 1fr;
}
.nc-final-score {
font-size: 2rem;
}
.nc-header {
padding: 0.375rem;
}
.nc-stat-value {
font-size: 0.9rem;
}
}
@keyframes nc-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.nc-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.nc-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: nc-confetti-fall 2.5s ease-in forwards;
}
.nc-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: nc-glow-fade 1s ease-out forwards;
}
@keyframes nc-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.nc-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: nc-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes nc-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#number-crunch-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#number-crunch-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="number-crunch-game">

<div id="nc-instructions">
<div class="nc-title-row"><span class="nc-icon">&#129518;</span><h2>Number Crunch</h2></div>
<p class="nc-subtitle">Calcul mental</p>
<div class="nc-how-to">
<h3>Comment Jouer</h3>
<ol>
<li>R&eacute;solvez l'&eacute;quation.</li>
<li>Choisissez la <strong>bonne r&eacute;ponse</strong> parmi 4 choix.</li>
<li>&Agrave; partir du Niveau 6, des <strong>modificateurs de r&egrave;gles</strong> apparaissent (ex. &laquo; Doublez-le &raquo;).</li>


</ol>
</div>
<div id="nc-best-display" class="nc-personal-best" style="display:none;">
Record : <strong id="nc-best-score">0</strong> points
</div>
<button class="nc-btn-primary" id="nc-start-btn">Commencer</button>
<div id="nc-challenge-banner-wrap"></div>
</div>

<div id="nc-wizard">
<div id="nc-wizard-card"></div>
</div>

<div id="nc-playing">
<div class="nc-header">
<div class="nc-stat">
<div class="nc-stat-label">Score</div>
<div class="nc-stat-value" id="nc-score">0</div>
</div>
<div class="nc-stat">
<div class="nc-stat-label">S&eacute;rie</div>
<div class="nc-stat-value" id="nc-streak">0</div>
</div>
<div class="nc-stat">
<div class="nc-stat-label">Level</div>
<div class="nc-stat-value" id="nc-level">1</div>
</div>
</div>
<div class="nc-level-info">
<span class="nc-level-text">Level <span id="nc-level-text">1</span></span>
<span class="nc-modifier-badge" id="nc-modifier-badge" style="display:none;">Extra</span>
</div>
<div class="nc-progress-bar">
<div class="nc-progress-fill" id="nc-progress-fill" style="width:0%"></div>
</div>
<div class="nc-timer-bar">
<div class="nc-timer-fill" id="nc-timer-fill" style="width:100%"></div>
</div>
<div class="nc-equation-area">
<div class="nc-feedback-flash" id="nc-feedback-flash"></div>
<div class="nc-feedback-icon" id="nc-feedback-icon"></div>
<div class="nc-rule-modifier" id="nc-rule-modifier"></div>
<div class="nc-equation" id="nc-equation"></div>
</div>
<div class="nc-answers" id="nc-answers">
<button class="nc-answer-btn" id="nc-ans-0"></button>
<button class="nc-answer-btn" id="nc-ans-1"></button>
<button class="nc-answer-btn" id="nc-ans-2"></button>
<button class="nc-answer-btn" id="nc-ans-3"></button>
</div>
<div class="nc-playing-hint">Appuyez sur <strong>1-4</strong> pour r&eacute;pondre &middot; <strong>&Eacute;chap</strong> pour pause</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="nc-pause-btn" type="button">Pause</button>
<button class="gk-finish-btn" id="nc-finish-btn" type="button">Terminer</button>
</div>
</div>

<div id="nc-pause-overlay">
<div class="nc-pause-text">Pause</div>
<button class="nc-btn-primary" id="nc-resume-btn">Reprendre</button>
</div>

<div id="nc-complete-overlay">
<div class="nc-complete-card">
<button class="gk-complete-close" id="nc-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="nc-trophy">&#127942;</div>
<h2>Partie Termin&eacute;e !</h2>
<div class="nc-final-score" id="nc-final-score">0</div>
<div id="nc-new-best" class="nc-new-best" style="display:none;">&#11088; Nouveau record !</div>
<div class="gk-challenge-result" id="nc-challenge-result" style="display:none;"></div>
<div class="nc-complete-stats">
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Niveau atteint</div>
<div class="nc-complete-stat-value" id="nc-final-level">1</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Pr&eacute;cision</div>
<div class="nc-complete-stat-value" id="nc-final-accuracy">0%</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Meilleure s&eacute;rie</div>
<div class="nc-complete-stat-value" id="nc-final-streak">0</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Record personnel</div>
<div class="nc-complete-stat-value" id="nc-final-best">0</div>
</div>
</div>
<div class="nc-complete-actions">
<button class="nc-btn-primary" id="nc-play-again-btn">Encore</button>
<button class="gk-runtime-history-toggle" id="nc-history-toggle">Show History</button>
<a href="/fr/games/" class="nc-back-link">&larr; Tous les jeux</a>
</div>
<div class="gk-runtime-history-panel" id="nc-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="nc-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="nc-share-btn">&#128279; Partage ton score</button>
<div class="gk-share-copied" id="nc-share-copied" style="display:none;">Copi&eacute; !</div>
</div>
</div>
</div>

<div class="nc-level-up-toast" id="nc-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_number-crunch_best';

var challenge = GK.parseChallenge();

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctAnswer: 0,
currentModifier: null,
currentEquation: '',
currentChoices: []
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('nc-instructions');
var elWizard = document.getElementById('nc-wizard');
var elWizardCard = document.getElementById('nc-wizard-card');
var elPlaying = document.getElementById('nc-playing');
var elPauseOverlay = document.getElementById('nc-pause-overlay');
var elCompleteOverlay = document.getElementById('nc-complete-overlay');
var elScore = document.getElementById('nc-score');
var elStreak = document.getElementById('nc-streak');
var elLevel = document.getElementById('nc-level');
var elLevelText = document.getElementById('nc-level-text');
var elModifierBadge = document.getElementById('nc-modifier-badge');
var elProgressFill = document.getElementById('nc-progress-fill');
var elTimerFill = document.getElementById('nc-timer-fill');
var elEquation = document.getElementById('nc-equation');
var elRuleModifier = document.getElementById('nc-rule-modifier');
var elFeedbackFlash = document.getElementById('nc-feedback-flash');
var elFeedbackIcon = document.getElementById('nc-feedback-icon');
var elFinalScore = document.getElementById('nc-final-score');
var elNewBest = document.getElementById('nc-new-best');
var elFinalLevel = document.getElementById('nc-final-level');
var elFinalAccuracy = document.getElementById('nc-final-accuracy');
var elFinalStreak = document.getElementById('nc-final-streak');
var elFinalBest = document.getElementById('nc-final-best');
var elBestDisplay = document.getElementById('nc-best-display');
var elBestScore = document.getElementById('nc-best-score');
var elLevelToast = document.getElementById('nc-level-toast');
var btnStart = document.getElementById('nc-start-btn');
var btnResume = document.getElementById('nc-resume-btn');
var btnPlayAgain = document.getElementById('nc-play-again-btn');
var answerBtns = [
document.getElementById('nc-ans-0'),
document.getElementById('nc-ans-1'),
document.getElementById('nc-ans-2'),
document.getElementById('nc-ans-3')
];

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

/* ── Modifiers ── */
var MODIFIERS = [
{ name: 'Doublez-le', apply: function(n) { return n * 2; } },
{ name: 'Ajoutez 10', apply: function(n) { return n + 10; } },
{ name: 'Soustrayez 5', apply: function(n) { return n - 5; } },
{ name: 'Divisez par 2', apply: function(n) { return Math.round(n / 2); } }
];

function shouldHaveModifier(lvl) {
return lvl >= 6;
}

function getModifier(lvl) {
if (lvl >= 17) {
/* Dual modifier: pick two */
var a = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
var b = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
while (b === a) b = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
return {
name: a.name + ', puis ' + b.name.toLowerCase(),
apply: function(n) { return b.apply(a.apply(n)); }
};
}
if (lvl >= 13) {
/* Pick from all modifiers */
return MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
}
/* L6-12: simpler modifiers only */
var simple = MODIFIERS.slice(0, 2);
return simple[Math.floor(Math.random() * simple.length)];
}

/* ── Generate equation ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pickOperation(lvl) {
var ops;
if (lvl <= 3) ops = ['+', '-'];
else if (lvl <= 5) ops = ['+', '-', '*'];
else ops = ['+', '-', '*', '/'];
return ops[randInt(0, ops.length - 1)];
}

function operandLimit(lvl) {
if (lvl <= 3) return 50;
if (lvl <= 5) return 80;
if (lvl <= 8) return 120;
if (lvl <= 12) return 220;
if (lvl <= 16) return 360;
return 520;
}

function generateEquation(lvl) {
var op = pickOperation(lvl);
var max = operandLimit(lvl);
var a;
var b;
var answer;
var symbol = op;

if (op === '/') {
b = randInt(2, Math.min(12 + lvl, 24));
answer = randInt(2, Math.min(18 + lvl * 2, 80));
a = answer * b;
symbol = '\u00F7';
} else if (op === '*') {
a = randInt(3, Math.min(12 + Math.floor(lvl / 2), 24));
b = randInt(3, Math.min(12 + Math.floor(lvl / 2), 24));
symbol = '\u00D7';
answer = a * b;
} else {
a = randInt(10, max);
b = randInt(5, Math.max(8, Math.floor(max * 0.65)));
if (op === '-' && b > a) {
var swap = a;
a = b;
b = swap;
}
switch (op) {
case '+':
answer = a + b;
break;
case '-':
answer = a - b;
break;
default:
answer = a + b;
}
}

var display = a + ' ' + symbol + ' ' + b + ' = ?';
var modifier = null;
if (shouldHaveModifier(lvl) && Math.random() < 0.7) {
modifier = getModifier(lvl);
answer = modifier.apply(answer);
}

return { display: display, answer: answer, modifier: modifier };
}

function generateChoices(correct) {
var choices = [correct];
var attempts = 0;
while (choices.length < 4 && attempts < 100) {
var offset = randInt(-10, 10);
attempts++;
if (offset === 0) continue;
var wrong = Math.round(correct + offset);
if (wrong < 0) wrong = Math.abs(wrong);
if (wrong !== correct && choices.indexOf(wrong) === -1) {
choices.push(wrong);
}
}
while (choices.length < 4) {
var fallback = Math.round(correct + choices.length + attempts + 1);
if (fallback < 0) fallback = Math.abs(fallback);
if (fallback !== correct && choices.indexOf(fallback) === -1) choices.push(fallback);
else attempts++;
}
for (var i = choices.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = choices[i];
choices[i] = choices[j];
choices[j] = temp;
}
return choices;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}


var runHistory = createRuntimeHistory('nc-history-toggle', 'nc-history-panel', 'nc-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
list.innerHTML = entries.map(function(entry) {
return '<div class="gk-runtime-history-row ' + (entry.correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong') + '">' +
'<div class="gk-runtime-history-main"><div class="gk-runtime-history-detail">' + entry.html + '</div>' +
'<div class="gk-runtime-history-status">' + (entry.correct ? 'Correct' : 'Wrong') + '</div></div></div>';
}).join('');
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel || !toggle) return;
render();
var open = panel.style.display !== 'none';
panel.style.display = open ? 'none' : '';
toggle.textContent = open ? 'Show History' : 'Hide History';
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

function recordAnswerHistory(selectedValue, correct) {
var selected = selectedValue === null || selectedValue === undefined ? 'No answer' : selectedValue;
var html = '<strong>' + runHistory.escape(state.currentEquation) + '</strong>';
if (state.currentModifier) {
html += '<div class="gk-runtime-history-sub">Rule: ' + runHistory.escape(state.currentModifier.name) + '</div>';
}
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(selected) + ' | Correct: ' + runHistory.escape(state.correctAnswer) + '</div>';
runHistory.pushHtml(correct, html);
}

function renderAnswerHistory() {
runHistory.render();
}

function resetHistoryPanel() {
runHistory.resetPanel();
}
/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
if (shouldHaveModifier(state.level)) {
elModifierBadge.style.display = '';
elModifierBadge.textContent = 'Extra';
} else {
elModifierBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('nc-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('nc-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('nc-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'nc-feedback-flash';
elFeedbackIcon.className = 'nc-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('nc-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('nc-show-check');
} else {
elFeedbackFlash.classList.add('nc-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('nc-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'nc-feedback-flash';
elFeedbackIcon.className = 'nc-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + ' !';
elLevelToast.classList.add('nc-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('nc-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'nc-correct-flash' : 'nc-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('nc-correct-flash', 'nc-wrong-flash');
}, 400);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var chosenValue = parseInt(answerBtns[chosenIdx].textContent, 10);
var correct = (chosenValue === state.correctAnswer);

state.totalAnswered++;
recordAnswerHistory(chosenValue, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordAnswerHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

var eq = generateEquation(state.level);
state.correctAnswer = eq.answer;
state.currentModifier = eq.modifier;
state.currentEquation = eq.display;

elEquation.textContent = eq.display;
elEquation.style.animation = 'none';
void elEquation.offsetWidth;
elEquation.style.animation = '';

if (eq.modifier) {
elRuleModifier.textContent = eq.modifier.name;
elRuleModifier.style.display = '';
} else {
elRuleModifier.style.display = 'none';
}

var choices = generateChoices(eq.answer);
state.currentChoices = choices.slice();
for (var i = 0; i < 4; i++) {
answerBtns[i].textContent = choices[i];
}

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'nc-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'nc-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'nc-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.nc-trophy');
var title = document.querySelector('#nc-complete-overlay .nc-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'INCROYABLE !';
elNewBest.className = 'nc-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F INCROYABLE ! Nouveau record !';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Bien jou\u00e9 !';
elNewBest.className = 'nc-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('nc-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();
renderAnswerHistory();
resetHistoryPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var NC_WIZARD_STEPS = [
{icon: '\uD83E\uDDEE', title: 'R\u00e9solvez l\u2019\u00e9quation', desc: 'Une \u00e9quation avec une r\u00e9ponse manquante appara\u00eet. Choisissez la bonne !'},
{icon: '\u2728', title: 'Attention aux modificateurs', desc: '\u00c0 partir du Niveau 6, les modificateurs de r\u00e8gles changent la r\u00e9ponse (ex. \u00ab Doublez-le \u00bb).'},
{icon: '\u26A1', title: 'Vite', desc: 'R\u00e9pondez avant la fin du temps. Vitesse = points bonus !', final: true}
];
var ncWizardStep = 0;

function renderWizardStep() {
var s = NC_WIZARD_STEPS[ncWizardStep];
var dotsHtml = '';
for (var i = 0; i < NC_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="nc-wizard-dot' + (i === ncWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Commencer' : 'Suivant';
elWizardCard.innerHTML =
'<div class="nc-wizard-icon">' + s.icon + '</div>' +
'<div class="nc-wizard-title">' + s.title + '</div>' +
'<div class="nc-wizard-desc">' + s.desc + '</div>' +
'<div class="nc-wizard-dots">' + dotsHtml + '</div>' +
'<button class="nc-wizard-btn" id="nc-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'nc-wizard-enter 0.3s ease-out';
document.getElementById('nc-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ncWizardStep < NC_WIZARD_STEPS.length - 1) {
ncWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ncWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctAnswer = 0;
state.currentModifier = null;
state.currentEquation = '';
state.currentChoices = [];
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('nc-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('nc-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});


for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('nc-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('nc-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('nc-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('nc-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Number Crunch', '/fr/games/number-crunch/', 'nc-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
var answerIndex = -1;
if (e.key >= '1' && e.key <= '4') {
answerIndex = parseInt(e.key, 10) - 1;
} else if (e.code) {
var keyMatch = e.code.match(/^(?:Digit|Numpad)([1-4])$/);
if (keyMatch) answerIndex = parseInt(keyMatch[1], 10) - 1;
}
if (answerIndex >= 0) {
e.preventDefault();
processAnswer(answerIndex);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('nc-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Pattern Path - Jeu d'Entraînement Cérébral
URL: https://guruka.com/fr/games/pattern-path/
Description: Completez les motifs visuels.

<style>
#pattern-path-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #pattern-path-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#pp-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.pp-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#pp-instructions .pp-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#pp-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: #14b8a6;
}

#pp-instructions .pp-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #pp-instructions .pp-subtitle {
color: var(--color-dark-text-secondary);
}

#pp-instructions .pp-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #pp-instructions .pp-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#pp-instructions .pp-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: #14b8a6;
}

#pp-instructions .pp-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#pp-instructions .pp-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.pp-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.pp-personal-best strong {
color: #14b8a6;
}

/* ── Buttons ── */
.pp-btn-primary {
background: #14b8a6;
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.pp-btn-primary:hover {
background: #0d9488;
}

.pp-btn-primary:active {
transform: scale(0.97);
}

.pp-btn-secondary {
background: transparent;
color: #14b8a6;
border: 1px solid #14b8a6;
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.pp-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .pp-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#pp-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#pp-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: pp-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #pp-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes pp-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pp-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.pp-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.pp-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .pp-wizard-desc {
color: var(--color-dark-text-secondary);
}
.pp-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.pp-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.pp-wizard-dot.active {
background: #14b8a6;
transform: scale(1.3);
}
[data-theme="dark"] .pp-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .pp-wizard-dot.active {
background: #14b8a6;
}
.pp-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: #14b8a6;
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.pp-wizard-btn:hover {
background: #0d9488;
}
@media (max-width: 400px) {
#pp-wizard-card {
padding: 1.5rem 1rem;
}
.pp-wizard-icon {
font-size: 2rem;
}
.pp-wizard-title {
font-size: 1.1rem;
}
.pp-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#pp-playing {
display: none;
flex: 1;
flex-direction: column;
}

.pp-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .pp-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-stat {
text-align: center;
}

.pp-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .pp-stat-label {
color: var(--color-dark-text-secondary);
}

.pp-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.pp-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.pp-level-text {
font-weight: 600;
}

.pp-difficulty-badge {
background: #14b8a6;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.pp-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .pp-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-progress-fill {
height: 100%;
background: #14b8a6;
border-radius: 3px;
transition: width 0.3s ease;
}

.pp-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .pp-timer-bar {
background: var(--color-dark-bg-secondary);
}

.pp-timer-fill {
height: 100%;
background: #14b8a6;
border-radius: 2px;
transition: width 0.05s linear;
}

.pp-timer-fill.pp-timer-warning {
background: #ef4444;
}

/* ── Pattern Display Area ── */
.pp-pattern-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
}

.pp-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.pp-feedback-flash.pp-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.pp-feedback-flash.pp-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.pp-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.pp-feedback-icon.pp-show-check {
animation: pp-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.pp-feedback-icon.pp-show-x {
animation: pp-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes pp-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.pp-sequence-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
animation: pp-seq-enter 0.3s ease-out;
}

@keyframes pp-seq-enter {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.pp-seq-element {
width: 70px;
height: 70px;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-primary, #fff);
}

[data-theme="dark"] .pp-seq-element {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-seq-element svg {
display: block;
}

.pp-seq-missing {
border: 2px dashed #14b8a6;
background: rgba(20, 184, 166, 0.05);
font-size: 1.75rem;
font-weight: 700;
color: #14b8a6;
}

[data-theme="dark"] .pp-seq-missing {
background: rgba(20, 184, 166, 0.1);
}

.pp-seq-arrow {
font-size: 1.25rem;
color: var(--color-text-secondary);
flex-shrink: 0;
}

[data-theme="dark"] .pp-seq-arrow {
color: var(--color-dark-text-secondary);
}

/* ── Answer Choice Buttons ── */
.pp-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.pp-answer-btn {
padding: 0.75rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
}

[data-theme="dark"] .pp-answer-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.pp-answer-btn:active {
transform: scale(0.95);
}

.pp-answer-btn:hover {
border-color: #14b8a6;
background: rgba(20, 184, 166, 0.05);
}

[data-theme="dark"] .pp-answer-btn:hover {
background: rgba(20, 184, 166, 0.15);
}

.pp-answer-btn svg {
display: block;
}

.pp-answer-btn.pp-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.pp-answer-btn.pp-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.pp-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#pp-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#pp-pause-overlay .pp-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#pp-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.pp-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: pp-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .pp-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes pp-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.pp-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.pp-complete-card .pp-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.pp-final-score {
font-size: 2.5rem;
font-weight: 800;
color: #14b8a6;
margin: 0.5rem 0;
}

.pp-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: pp-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes pp-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.pp-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.pp-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .pp-complete-stat {
background: var(--color-dark-bg-secondary);
}

.pp-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.pp-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.pp-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.pp-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .pp-back-link {
color: var(--color-dark-text-secondary);
}

.pp-back-link:hover {
color: #14b8a6;
text-decoration: underline;
}

/* ── Level Up Toast ── */
.pp-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #14b8a6;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.pp-level-up-toast.pp-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#pattern-path-game {
padding: 0.5rem;
}
.pp-seq-element {
width: 56px;
height: 56px;
}
.pp-seq-arrow {
font-size: 1rem;
}
.pp-answer-btn {
padding: 0.5rem;
min-height: 64px;
}
.pp-header {
padding: 0.5rem;
gap: 0.25rem;
}
.pp-stat-value {
font-size: 1rem;
}
#pp-instructions { padding: 0.75rem 0.5rem; }
#pp-instructions .pp-icon { font-size: 2rem; margin-bottom: 0; }
#pp-instructions h2 { font-size: 1.3rem; }
#pp-instructions .pp-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#pp-instructions .pp-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#pp-instructions .pp-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.pp-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#pattern-path-game {
padding: 0.75rem;
}
.pp-seq-element {
width: 62px;
height: 62px;
}
.pp-answer-btn {
padding: 0.625rem;
min-height: 72px;
}
}
@media (max-width: 360px) {
.pp-seq-element {
width: 48px;
height: 48px;
}
.pp-seq-arrow {
font-size: 0.85rem;
}
.pp-sequence-row {
gap: 0.3rem;
}
.pp-answer-btn {
padding: 0.4rem;
min-height: 56px;
}
.pp-complete-stats {
grid-template-columns: 1fr 1fr;
}
.pp-final-score {
font-size: 2rem;
}
.pp-header {
padding: 0.375rem;
}
.pp-stat-value {
font-size: 0.9rem;
}
}
@keyframes pp-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.pp-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.pp-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: pp-confetti-fall 2.5s ease-in forwards;
}
.pp-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(20,184,166,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: pp-glow-fade 1s ease-out forwards;
}
@keyframes pp-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.pp-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: pp-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(20,184,166,0.4);
}
@keyframes pp-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#pattern-path-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#pattern-path-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #pattern-path-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#pattern-path-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#pattern-path-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="pattern-path-game">

<div id="pp-instructions">
<div class="pp-title-row"><span class="pp-icon">&#129513;</span><h2>Pattern Path</h2></div>
<p class="pp-subtitle">Reconnaissance visuelle de motifs et intelligence fluide</p>
<div class="pp-how-to">
<h3>Comment Jouer</h3>
<ol>
<li>Une s&eacute;quence de formes avec un <strong>&eacute;l&eacute;ment manquant</strong> (?) appara&icirc;t.</li>
<li>Identifiez le motif (changements de couleur, forme, taille ou rotation).</li>
<li>Choisissez la <strong>bonne r&eacute;ponse</strong> parmi 4 choix.</li>


</ol>
</div>
<div id="pp-best-display" class="pp-personal-best" style="display:none;">
Record : <strong id="pp-best-score">0</strong> points
</div>
<button class="pp-btn-primary" id="pp-start-btn">Commencer</button>
<div id="pp-challenge-banner-wrap"></div>
</div>

<div id="pp-wizard">
<div id="pp-wizard-card"></div>
</div>

<div id="pp-playing">
<div class="pp-header">
<div class="pp-stat">
<div class="pp-stat-label">Score</div>
<div class="pp-stat-value" id="pp-score">0</div>
</div>
<div class="pp-stat">
<div class="pp-stat-label">S&eacute;rie</div>
<div class="pp-stat-value" id="pp-streak">0</div>
</div>
<div class="pp-stat">
<div class="pp-stat-label">Level</div>
<div class="pp-stat-value" id="pp-level">1</div>
</div>
</div>
<div class="pp-level-info">
<span class="pp-level-text">Level <span id="pp-level-text">1</span></span>
<span class="pp-difficulty-badge" id="pp-difficulty-badge">Couleurs</span>
</div>
<div class="pp-progress-bar">
<div class="pp-progress-fill" id="pp-progress-fill" style="width:0%"></div>
</div>
<div class="pp-timer-bar">
<div class="pp-timer-fill" id="pp-timer-fill" style="width:100%"></div>
</div>
<div class="pp-pattern-area">
<div class="pp-feedback-flash" id="pp-feedback-flash"></div>
<div class="pp-feedback-icon" id="pp-feedback-icon"></div>
<div class="pp-sequence-row" id="pp-sequence-row"></div>
</div>
<div class="pp-answers" id="pp-answers">
<button class="pp-answer-btn" id="pp-ans-0"></button>
<button class="pp-answer-btn" id="pp-ans-1"></button>
<button class="pp-answer-btn" id="pp-ans-2"></button>
<button class="pp-answer-btn" id="pp-ans-3"></button>
</div>
<div class="pp-playing-hint">Appuyez sur <strong>1-4</strong> pour r&eacute;pondre &middot; <strong>&Eacute;chap</strong> pour pause</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="pp-pause-btn" type="button">Pause</button>
<button class="gk-finish-btn" id="pp-finish-btn" type="button">Terminer</button>
</div>
</div>

<div id="pp-pause-overlay">
<div class="pp-pause-text">Pause</div>
<button class="pp-btn-primary" id="pp-resume-btn">Reprendre</button>
</div>

<div id="pp-complete-overlay">
<div class="pp-complete-card">
<button class="gk-complete-close" id="pp-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="pp-trophy">&#127942;</div>
<h2>Partie Termin&eacute;e !</h2>
<div class="pp-final-score" id="pp-final-score">0</div>
<div id="pp-new-best" class="pp-new-best" style="display:none;">&#11088; Nouveau record !</div>
<div class="gk-challenge-result" id="pp-challenge-result" style="display:none;"></div>
<div class="pp-complete-stats">
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Niveau atteint</div>
<div class="pp-complete-stat-value" id="pp-final-level">1</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Pr&eacute;cision</div>
<div class="pp-complete-stat-value" id="pp-final-accuracy">0%</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Meilleure s&eacute;rie</div>
<div class="pp-complete-stat-value" id="pp-final-streak">0</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Record personnel</div>
<div class="pp-complete-stat-value" id="pp-final-best">0</div>
</div>
</div>
<div class="pp-complete-actions">
<button class="pp-btn-primary" id="pp-play-again-btn">Encore</button>
<button class="gk-runtime-history-toggle" id="pp-history-toggle" type="button">Show History</button>
<a href="/fr/games/" class="pp-back-link">&larr; Tous les jeux</a>
</div>
<div class="gk-runtime-history-panel" id="pp-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="pp-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="pp-share-btn">&#128279; Partage ton score</button>
<div class="gk-share-copied" id="pp-share-copied" style="display:none;">Copi&eacute; !</div>
</div>
</div>
</div>

<div class="pp-level-up-toast" id="pp-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_pattern-path_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('pp-history-toggle', 'pp-history-panel', 'pp-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctChoiceIdx: -1,
correctChoice: null,
currentChoices: []
};

/* ── Shape / Color / Size definitions ── */
var SHAPES = ['circle', 'square', 'triangle'];
var COLORS = ['#ef4444', '#3b82f6', '#22c55e', '#eab308', '#a855f7', '#f97316'];
var COLOR_NAMES = { '#ef4444': 'red', '#3b82f6': 'blue', '#22c55e': 'green', '#eab308': 'yellow', '#a855f7': 'purple', '#f97316': 'orange' };
var SIZES = [30, 45, 60];
var SIZE_NAMES = ['small', 'medium', 'large'];
var ROTATIONS = [0, 90, 180, 270];

/* ── DOM refs ── */
var elInstructions = document.getElementById('pp-instructions');
var elWizard = document.getElementById('pp-wizard');
var elWizardCard = document.getElementById('pp-wizard-card');
var elPlaying = document.getElementById('pp-playing');
var elPauseOverlay = document.getElementById('pp-pause-overlay');
var elCompleteOverlay = document.getElementById('pp-complete-overlay');
var elScore = document.getElementById('pp-score');
var elStreak = document.getElementById('pp-streak');
var elLevel = document.getElementById('pp-level');
var elLevelText = document.getElementById('pp-level-text');
var elDifficultyBadge = document.getElementById('pp-difficulty-badge');
var elProgressFill = document.getElementById('pp-progress-fill');
var elTimerFill = document.getElementById('pp-timer-fill');
var elSequenceRow = document.getElementById('pp-sequence-row');
var elFeedbackFlash = document.getElementById('pp-feedback-flash');
var elFeedbackIcon = document.getElementById('pp-feedback-icon');
var elFinalScore = document.getElementById('pp-final-score');
var elNewBest = document.getElementById('pp-new-best');
var elFinalLevel = document.getElementById('pp-final-level');
var elFinalAccuracy = document.getElementById('pp-final-accuracy');
var elFinalStreak = document.getElementById('pp-final-streak');
var elFinalBest = document.getElementById('pp-final-best');
var elBestDisplay = document.getElementById('pp-best-display');
var elBestScore = document.getElementById('pp-best-score');
var elLevelToast = document.getElementById('pp-level-toast');
var btnStart = document.getElementById('pp-start-btn');
var btnResume = document.getElementById('pp-resume-btn');
var btnPlayAgain = document.getElementById('pp-play-again-btn');
var answerBtns = [
document.getElementById('pp-ans-0'),
document.getElementById('pp-ans-1'),
document.getElementById('pp-ans-2'),
document.getElementById('pp-ans-3')
];

/* ── SVG Shape Rendering ── */
function renderShape(shape, color, size, rotation) {
var vb = '0 0 60 60';
var inner = '';
if (shape === 'circle') {
var r = Math.round(size * 25 / 60);
inner = '<circle cx="30" cy="30" r="' + r + '" fill="' + color + '"/>';
} else if (shape === 'square') {
var half = Math.round(size * 50 / 60);
var off = Math.round((60 - half) / 2);
inner = '<rect x="' + off + '" y="' + off + '" width="' + half + '" height="' + half + '" fill="' + color + '" transform="rotate(' + rotation + ' 30 30)"/>';
} else if (shape === 'triangle') {
var h = Math.round(size * 50 / 60);
var topY = 30 - Math.round(h / 2);
var botY = 30 + Math.round(h / 2);
var leftX = 30 - Math.round(h / 2);
var rightX = 30 + Math.round(h / 2);
inner = '<polygon points="30,' + topY + ' ' + rightX + ',' + botY + ' ' + leftX + ',' + botY + '" fill="' + color + '" transform="rotate(' + rotation + ' 30 30)"/>';
}
return '<svg viewBox="' + vb + '" width="' + size + '" height="' + size + '">' + inner + '</svg>';
}

/* ── Level parameters ── */
function getDisplayTime(lvl) {
if (lvl <= 3) return 10000;
if (lvl <= 6) return 8000;
if (lvl <= 9) return 7000;
if (lvl <= 12) return 6000;
if (lvl <= 16) return 5000;
return 4000;
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getSeqLength(lvl) {
if (lvl <= 6) return 3;
if (lvl <= 12) return 4;
return 5;
}

function getDifficultyLabel(lvl) {
if (lvl <= 3) return 'Couleurs';
if (lvl <= 6) return 'Formes';
if (lvl <= 9) return 'Couleur + Forme';
if (lvl <= 12) return 'Rotation';
if (lvl <= 16) return 'Taille + Quantit\u00e9';
return 'Multi-Attribut';
}

/* ── Utility ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pick(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
return arr;
}

function cloneEl(el) {
return { shape: el.shape, color: el.color, size: el.size, rotation: el.rotation };
}

function elEquals(a, b) {
return a.shape === b.shape && a.color === b.color && a.size === b.size && a.rotation === b.rotation;
}

function indexOfValue(arr, value) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === value) return i;
}
return -1;
}

function getVisualRotation(shape, rotation) {
return shape === 'triangle' ? rotation : 0;
}

function getVisualIndexes(el) {
if (!el) return null;
var rotation = getVisualRotation(el.shape, el.rotation);
var idx = [
indexOfValue(SHAPES, el.shape),
indexOfValue(COLORS, el.color),
indexOfValue(SIZES, el.size),
indexOfValue(ROTATIONS, rotation)
];
for (var i = 0; i < idx.length; i++) {
if (idx[i] < 0) return null;
}
return idx;
}

function visuallyEquals(a, b) {
var ai = getVisualIndexes(a);
var bi = getVisualIndexes(b);
return !!ai && !!bi &&
ai[0] === bi[0] &&
ai[1] === bi[1] &&
ai[2] === bi[2] &&
ai[3] === bi[3];
}

function createChoiceSeenMatrix() {
var seen = [];
for (var s = 0; s < SHAPES.length; s++) {
seen[s] = [];
for (var c = 0; c < COLORS.length; c++) {
seen[s][c] = [];
for (var z = 0; z < SIZES.length; z++) {
seen[s][c][z] = [];
for (var r = 0; r < ROTATIONS.length; r++) {
seen[s][c][z][r] = false;
}
}
}
}
return seen;
}

function markChoiceSeen(seen, el) {
var idx = getVisualIndexes(el);
if (!idx) return false;
if (seen[idx[0]][idx[1]][idx[2]][idx[3]]) return false;
seen[idx[0]][idx[1]][idx[2]][idx[3]] = true;
return true;
}

/* ── Pattern Generation ── */
function generatePattern(lvl) {
var seqLen = getSeqLength(lvl);
var sequence = [];
var correct;

if (lvl <= 3) {
/* Single attribute: color changes in sequence */
var colorSeq = shuffle(COLORS.slice()).slice(0, seqLen + 1);
var baseShape = pick(SHAPES);
var baseSize = 45;
for (var i = 0; i <= seqLen; i++) {
sequence.push({ shape: baseShape, color: colorSeq[i % colorSeq.length], size: baseSize, rotation: 0 });
}
correct = sequence.pop();

} else if (lvl <= 6) {
/* Shape patterns: circle -> square -> triangle -> ... */
var baseColor = pick(COLORS);
var baseSize2 = 45;
for (var i = 0; i <= seqLen; i++) {
sequence.push({ shape: SHAPES[i % SHAPES.length], color: baseColor, size: baseSize2, rotation: 0 });
}
correct = sequence.pop();

} else if (lvl <= 9) {
/* 2-attribute: color + shape both change */
var colorPool = shuffle(COLORS.slice());
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorPool[i % colorPool.length],
size: 45,
rotation: 0
});
}
correct = sequence.pop();

} else if (lvl <= 12) {
/* Rotation patterns: shapes rotate 0 -> 90 -> 180 -> 270 */
var baseShape3 = 'triangle';
var baseColor3 = pick(COLORS);
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: baseShape3,
color: baseColor3,
size: 45,
rotation: ROTATIONS[i % ROTATIONS.length]
});
}
correct = sequence.pop();

} else if (lvl <= 16) {
/* Size + shape changes */
var colorBase = pick(COLORS);
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorBase,
size: SIZES[i % SIZES.length],
rotation: 0
});
}
correct = sequence.pop();

} else {
/* L17-20: 3 attributes changing (shape + color + size) */
var colorPool2 = shuffle(COLORS.slice());
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorPool2[i % colorPool2.length],
size: SIZES[i % SIZES.length],
rotation: ROTATIONS[i % ROTATIONS.length]
});
}
correct = sequence.pop();
}

return { sequence: sequence, correct: correct };
}

function buildChoiceCandidates(correct, lvl) {
var shapes = [correct.shape];
var colors = [correct.color];
var sizes = [correct.size];
var rotations = [correct.rotation];

if (lvl <= 3) {
colors = COLORS.slice();
} else if (lvl <= 6) {
shapes = SHAPES.slice();
colors = COLORS.slice();
} else if (lvl <= 9) {
shapes = SHAPES.slice();
colors = COLORS.slice();
} else if (lvl <= 12) {
rotations = ROTATIONS.slice();
} else if (lvl <= 16) {
shapes = SHAPES.slice();
sizes = SIZES.slice();
} else {
shapes = SHAPES.slice();
colors = COLORS.slice();
sizes = SIZES.slice();
rotations = ROTATIONS.slice();
}

var candidates = [];
for (var s = 0; s < shapes.length; s++) {
for (var c = 0; c < colors.length; c++) {
for (var z = 0; z < sizes.length; z++) {
for (var r = 0; r < rotations.length; r++) {
candidates.push({
shape: shapes[s],
color: colors[c],
size: sizes[z],
rotation: rotations[r]
});
}
}
}
}
return candidates;
}

function addUniqueChoice(choices, seen, candidate) {
if (!markChoiceSeen(seen, candidate)) return false;
choices.push(cloneEl(candidate));
return true;
}

function generateChoices(correct, lvl) {
var choices = [];
var seen = createChoiceSeenMatrix();
addUniqueChoice(choices, seen, correct);
var candidates = shuffle(buildChoiceCandidates(correct, lvl));

for (var i = 0; i < candidates.length && choices.length < 4; i++) {
addUniqueChoice(choices, seen, candidates[i]);
}

if (choices.length < 4) {
var fallback = shuffle(buildChoiceCandidates(correct, MAX_LEVEL));
for (var j = 0; j < fallback.length && choices.length < 4; j++) {
addUniqueChoice(choices, seen, fallback[j]);
}
}

return shuffle(choices);
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
elDifficultyBadge.textContent = getDifficultyLabel(state.level);
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('pp-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('pp-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('pp-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'pp-feedback-flash';
elFeedbackIcon.className = 'pp-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('pp-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('pp-show-check');
} else {
elFeedbackFlash.classList.add('pp-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('pp-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'pp-feedback-flash';
elFeedbackIcon.className = 'pp-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + ' !';
elLevelToast.classList.add('pp-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('pp-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'pp-correct-flash' : 'pp-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('pp-correct-flash', 'pp-wrong-flash');
}, 400);
}

/* ── Render sequence display ── */
function renderSequence(sequence) {
var html = '';
for (var i = 0; i < sequence.length; i++) {
var el = sequence[i];
html += '<div class="pp-seq-element">';
html += renderShape(el.shape, el.color, el.size, el.rotation);
html += '</div>';
if (i < sequence.length) {
html += '<div class="pp-seq-arrow">\u2192</div>';
}
}
/* Missing element placeholder */
html += '<div class="pp-seq-element pp-seq-missing">?</div>';
elSequenceRow.innerHTML = html;
}

/* ── Render choice buttons ── */
function renderChoices(choices) {
for (var i = 0; i < 4; i++) {
var el = choices[i];
answerBtns[i].innerHTML = renderShape(el.shape, el.color, el.size, el.rotation);
}
}

function recordPatternHistory(selectedChoice, correct) {
var html = '<strong>Missing shape</strong>';
html += '<div class="gk-runtime-history-sub">Your: ' + (selectedChoice ? renderShape(selectedChoice.shape, selectedChoice.color, selectedChoice.size, selectedChoice.rotation) : 'No answer') + ' | Correct: ' + renderShape(state.correctChoice.shape, state.correctChoice.color, state.correctChoice.size, state.correctChoice.rotation) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var selectedChoice = state.currentChoices[chosenIdx];
var correct = selectedChoice ? visuallyEquals(selectedChoice, state.correctChoice) : false;

state.totalAnswered++;
recordPatternHistory(selectedChoice, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 2000) {
points += Math.floor((2000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordPatternHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

var pattern = generatePattern(state.level);
var choices = generateChoices(pattern.correct, state.level);

/* Find correct choice index */
state.correctChoice = cloneEl(pattern.correct);
state.currentChoices = choices.map(cloneEl);
state.correctChoiceIdx = -1;
for (var i = 0; i < choices.length; i++) {
if (visuallyEquals(choices[i], state.correctChoice)) {
state.correctChoiceIdx = i;
break;
}
}

renderSequence(pattern.sequence);
renderChoices(choices);

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#14b8a6','#ef4444','#22c55e','#3b82f6','#a855f7','#f97316'];
var container = document.createElement('div');
container.className = 'pp-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'pp-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'pp-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.pp-trophy');
var title = document.querySelector('#pp-complete-overlay .pp-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'INCROYABLE !';
elNewBest.className = 'pp-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F INCROYABLE ! Nouveau record !';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Bien jou\u00e9 !';
elNewBest.className = 'pp-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('pp-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var PP_WIZARD_STEPS = [
{icon: '\uD83E\uDDE9', title: 'Trouvez le motif manquant', desc: 'Une s\u00e9quence de formes appara\u00eet avec un \u00e9l\u00e9ment manquant. Identifiez le motif !'},
{icon: '\uD83C\uDFA8', title: 'Les attributs changent', desc: 'Les motifs impliquent couleur, forme, taille et rotation. Les niveaux sup\u00e9rieurs combinent plusieurs attributs.'},
{icon: '\u26A1', title: 'Vite', desc: 'Choisissez la bonne forme avant la fin du temps. La vitesse et les s\u00e9ries rapportent des points bonus !', final: true}
];
var ppWizardStep = 0;

function renderWizardStep() {
var s = PP_WIZARD_STEPS[ppWizardStep];
var dotsHtml = '';
for (var i = 0; i < PP_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="pp-wizard-dot' + (i === ppWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Commencer' : 'Suivant';
elWizardCard.innerHTML =
'<div class="pp-wizard-icon">' + s.icon + '</div>' +
'<div class="pp-wizard-title">' + s.title + '</div>' +
'<div class="pp-wizard-desc">' + s.desc + '</div>' +
'<div class="pp-wizard-dots">' + dotsHtml + '</div>' +
'<button class="pp-wizard-btn" id="pp-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'pp-wizard-enter 0.3s ease-out';
document.getElementById('pp-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ppWizardStep < PP_WIZARD_STEPS.length - 1) {
ppWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ppWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctChoiceIdx = -1;
state.correctChoice = null;
state.currentChoices = [];
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('pp-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('pp-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('pp-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('pp-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('pp-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('pp-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Pattern Path', '/fr/games/pattern-path/', 'pp-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key >= '1' && e.key <= '4') {
e.preventDefault();
processAnswer(parseInt(e.key, 10) - 1);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('pp-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Quick Sort - Jeu d'Entra&icirc;nement C&eacute;r&eacute;bral
URL: https://guruka.com/fr/games/quick-sort/
Description: Triez avec des regles changeantes.

<style>
#quick-sort-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #quick-sort-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#qs-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.qs-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#qs-instructions .qs-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#qs-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: #f97316;
}

#qs-instructions .qs-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #qs-instructions .qs-subtitle {
color: var(--color-dark-text-secondary);
}

#qs-instructions .qs-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #qs-instructions .qs-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#qs-instructions .qs-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: #f97316;
}

#qs-instructions .qs-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#qs-instructions .qs-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.qs-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.qs-personal-best strong {
color: #f97316;
}

/* ── Buttons ── */
.qs-btn-primary {
background: #f97316;
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.qs-btn-primary:hover {
background: #ea580c;
}

.qs-btn-primary:active {
transform: scale(0.97);
}

.qs-btn-secondary {
background: transparent;
color: #f97316;
border: 1px solid #f97316;
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.qs-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .qs-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#qs-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#qs-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: qs-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #qs-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes qs-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.qs-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.qs-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.qs-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .qs-wizard-desc {
color: var(--color-dark-text-secondary);
}
.qs-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.qs-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.qs-wizard-dot.active {
background: #f97316;
transform: scale(1.3);
}
[data-theme="dark"] .qs-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .qs-wizard-dot.active {
background: #f97316;
}
.qs-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: #f97316;
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.qs-wizard-btn:hover {
background: #ea580c;
}
@media (max-width: 400px) {
#qs-wizard-card {
padding: 1.5rem 1rem;
}
.qs-wizard-icon {
font-size: 2rem;
}
.qs-wizard-title {
font-size: 1.1rem;
}
.qs-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#qs-playing {
display: none;
flex: 1;
flex-direction: column;
}

.qs-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .qs-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.qs-stat {
text-align: center;
}

.qs-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .qs-stat-label {
color: var(--color-dark-text-secondary);
}

.qs-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.qs-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.qs-level-text {
font-weight: 600;
}

.qs-rule-change-badge {
background: #f97316;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.qs-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .qs-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.qs-progress-fill {
height: 100%;
background: #f97316;
border-radius: 3px;
transition: width 0.3s ease;
}

.qs-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .qs-timer-bar {
background: var(--color-dark-bg-secondary);
}

.qs-timer-fill {
height: 100%;
background: #f97316;
border-radius: 2px;
transition: width 0.05s linear;
}

.qs-timer-fill.qs-timer-warning {
background: #ef4444;
}

/* ── Rule Indicator ── */
.qs-rule-indicator {
background: #f97316;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
text-align: center;
margin-bottom: 1rem;
letter-spacing: 0.02em;
}

/* ── Stimulus Area ── */
.qs-stimulus-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 160px;
position: relative;
}

.qs-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.qs-feedback-flash.qs-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.qs-feedback-flash.qs-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.qs-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.qs-feedback-icon.qs-show-check {
animation: qs-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.qs-feedback-icon.qs-show-x {
animation: qs-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes qs-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.qs-stimulus {
font-size: 3rem;
font-weight: 700;
line-height: 1.2;
animation: qs-stim-enter 0.2s ease-out;
text-align: center;
}

@keyframes qs-stim-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

/* ── Sort Buttons (Left / Right) ── */
.qs-sort-buttons {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.qs-sort-btn {
flex: 1;
padding: 1.1rem 0.75rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}

[data-theme="dark"] .qs-sort-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.qs-sort-btn:active {
transform: scale(0.95);
}

.qs-btn-left {
border-left: 4px solid #f97316;
}

.qs-btn-left:hover {
border-color: #f97316;
background: rgba(249,115,22,0.05);
}

[data-theme="dark"] .qs-btn-left:hover {
background: rgba(249,115,22,0.15);
}

.qs-btn-right {
border-right: 4px solid #f97316;
}

.qs-btn-right:hover {
border-color: #f97316;
background: rgba(249,115,22,0.05);
}

[data-theme="dark"] .qs-btn-right:hover {
background: rgba(249,115,22,0.15);
}

.qs-sort-btn .qs-arrow {
font-size: 1.3rem;
opacity: 0.6;
}

.qs-sort-btn .qs-label {
font-size: 1rem;
}

.qs-sort-btn.qs-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.qs-sort-btn.qs-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.qs-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#qs-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#qs-pause-overlay .qs-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#qs-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.qs-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: qs-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .qs-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes qs-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.qs-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.qs-complete-card .qs-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.qs-final-score {
font-size: 2.5rem;
font-weight: 800;
color: #f97316;
margin: 0.5rem 0;
}

.qs-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: qs-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes qs-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.qs-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.qs-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .qs-complete-stat {
background: var(--color-dark-bg-secondary);
}

.qs-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.qs-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.qs-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.qs-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .qs-back-link {
color: var(--color-dark-text-secondary);
}

.qs-back-link:hover {
color: #f97316;
text-decoration: underline;
}

/* ── Level Up Toast ── */
.qs-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #f97316;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.qs-level-up-toast.qs-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Rule Change Toast ── */
.qs-rule-toast {
position: fixed;
top: 4.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #7c3aed;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 0.95rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.qs-rule-toast.qs-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#quick-sort-game {
padding: 0.5rem;
}
.qs-stimulus {
font-size: 2.5rem;
}
.qs-sort-btn {
padding: 0.85rem 0.5rem;
font-size: 1rem;
min-height: 52px;
}
.qs-sort-btn .qs-label {
font-size: 0.9rem;
}
.qs-header {
padding: 0.5rem;
gap: 0.25rem;
}
.qs-stat-value {
font-size: 1rem;
}
.qs-rule-indicator {
font-size: 0.85rem;
padding: 0.4rem 0.75rem;
}
#qs-instructions { padding: 0.75rem 0.5rem; }
#qs-instructions .qs-icon { font-size: 2rem; margin-bottom: 0; }
#qs-instructions h2 { font-size: 1.3rem; }
#qs-instructions .qs-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#qs-instructions .qs-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#qs-instructions .qs-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.qs-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#quick-sort-game {
padding: 0.75rem;
}
.qs-stimulus {
font-size: 2.75rem;
}
.qs-sort-btn {
padding: 1rem 0.5rem;
}
}
@media (max-width: 360px) {
.qs-stimulus {
font-size: 2rem;
}
.qs-sort-btn {
padding: 0.7rem 0.4rem;
font-size: 0.9rem;
min-height: 48px;
}
.qs-sort-btn .qs-label {
font-size: 0.8rem;
}
.qs-sort-btn .qs-arrow {
font-size: 1.1rem;
}
.qs-complete-stats {
grid-template-columns: 1fr 1fr;
}
.qs-final-score {
font-size: 2rem;
}
.qs-header {
padding: 0.375rem;
}
.qs-stat-value {
font-size: 0.9rem;
}
}
@keyframes qs-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.qs-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.qs-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: qs-confetti-fall 2.5s ease-in forwards;
}
.qs-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(249,115,22,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: qs-glow-fade 1s ease-out forwards;
}
@keyframes qs-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.qs-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: qs-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(249,115,22,0.4);
}
@keyframes qs-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#quick-sort-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#quick-sort-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #quick-sort-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#quick-sort-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#quick-sort-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="quick-sort-game">

<div id="qs-instructions">
<div class="qs-title-row"><span class="qs-icon">&#128450;</span><h2>Quick Sort</h2></div>
<p class="qs-subtitle">Vitesse de cat&eacute;gorisation et changement de t&acirc;che</p>
<div class="qs-how-to">
<h3>Comment Jouer</h3>
<ol>
<li>Un &eacute;l&eacute;ment (nombre, forme ou mot) appara&icirc;t &agrave; l'&eacute;cran.</li>
<li>Deux cat&eacute;gories sont affich&eacute;es &agrave; <strong>gauche et &agrave; droite</strong>.</li>
<li>Appuyez sur le bon c&ocirc;t&eacute; pour trier l'&eacute;l&eacute;ment.</li>
<li>La r&egrave;gle de tri <strong>change</strong> toutes les quelques manches !</li>

</ol>
</div>
<div id="qs-best-display" class="qs-personal-best" style="display:none;">
Record : <strong id="qs-best-score">0</strong> points
</div>
<button class="qs-btn-primary" id="qs-start-btn">Commencer</button>
<div id="qs-challenge-banner-wrap"></div>
</div>

<div id="qs-wizard">
<div id="qs-wizard-card"></div>
</div>

<div id="qs-playing">
<div class="qs-header">
<div class="qs-stat">
<div class="qs-stat-label">Score</div>
<div class="qs-stat-value" id="qs-score">0</div>
</div>
<div class="qs-stat">
<div class="qs-stat-label">S&eacute;rie</div>
<div class="qs-stat-value" id="qs-streak">0</div>
</div>
<div class="qs-stat">
<div class="qs-stat-label">Niveau</div>
<div class="qs-stat-value" id="qs-level">1</div>
</div>
</div>
<div class="qs-level-info">
<span class="qs-level-text">Niveau <span id="qs-level-text">1</span></span>
<span class="qs-rule-change-badge" id="qs-rule-badge" style="display:none;">Changement de r&egrave;gle</span>
</div>
<div class="qs-progress-bar">
<div class="qs-progress-fill" id="qs-progress-fill" style="width:0%"></div>
</div>
<div class="qs-timer-bar">
<div class="qs-timer-fill" id="qs-timer-fill" style="width:100%"></div>
</div>
<div class="qs-rule-indicator" id="qs-rule-indicator">Trier : Pair / Impair</div>
<div class="qs-stimulus-area">
<div class="qs-feedback-flash" id="qs-feedback-flash"></div>
<div class="qs-feedback-icon" id="qs-feedback-icon"></div>
<div class="qs-stimulus" id="qs-stimulus"></div>
</div>
<div class="qs-sort-buttons">
<button class="qs-sort-btn qs-btn-left" id="qs-btn-left">
<span class="qs-arrow">1</span>
<span class="qs-label" id="qs-label-left">Pair</span>
</button>
<button class="qs-sort-btn qs-btn-right" id="qs-btn-right">
<span class="qs-label" id="qs-label-right">Impair</span>
<span class="qs-arrow">2</span>
</button>
</div>
<div class="qs-playing-hint">Appuyez sur <strong>1</strong> pour gauche &middot; <strong>2</strong> pour droite &middot; <strong>&Eacute;chap</strong> pour pause</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="qs-pause-btn" type="button">Pause</button>
<button class="gk-finish-btn" id="qs-finish-btn" type="button">Terminer</button>
</div>
</div>

<div id="qs-pause-overlay">
<div class="qs-pause-text">Pause</div>
<button class="qs-btn-primary" id="qs-resume-btn">Reprendre</button>
</div>

<div id="qs-complete-overlay">
<div class="qs-complete-card">
<button class="gk-complete-close" id="qs-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="qs-trophy">&#127942;</div>
<h2>Partie Termin&eacute;e !</h2>
<div class="qs-final-score" id="qs-final-score">0</div>
<div id="qs-new-best" class="qs-new-best" style="display:none;">&#11088; Nouveau record !</div>
<div class="gk-challenge-result" id="qs-challenge-result" style="display:none;"></div>
<div class="qs-complete-stats">
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Niveau atteint</div>
<div class="qs-complete-stat-value" id="qs-final-level">1</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Pr&eacute;cision</div>
<div class="qs-complete-stat-value" id="qs-final-accuracy">0%</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Meilleure s&eacute;rie</div>
<div class="qs-complete-stat-value" id="qs-final-streak">0</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Record personnel</div>
<div class="qs-complete-stat-value" id="qs-final-best">0</div>
</div>
</div>
<div class="qs-complete-actions">
<button class="qs-btn-primary" id="qs-play-again-btn">Encore</button>
<button class="gk-runtime-history-toggle" id="qs-history-toggle" type="button">Show History</button>
<a href="/fr/games/" class="qs-back-link">&larr; Tous les jeux</a>
</div>
<div class="gk-runtime-history-panel" id="qs-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="qs-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="qs-share-btn">&#128279; Partage ton score</button>
<div class="gk-share-copied" id="qs-share-copied" style="display:none;">Copi&eacute; !</div>
</div>
</div>
</div>

<div class="qs-level-up-toast" id="qs-level-toast">Niveau sup&eacute;rieur !</div>
<div class="qs-rule-toast" id="qs-rule-toast">Nouvelle r&egrave;gle !</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_quick-sort_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('qs-history-toggle', 'qs-history-panel', 'qs-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
roundInRule: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctSide: null,
currentRule: null,
currentStimulus: null,
ruleIndex: 0
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('qs-instructions');
var elWizard = document.getElementById('qs-wizard');
var elWizardCard = document.getElementById('qs-wizard-card');
var elPlaying = document.getElementById('qs-playing');
var elPauseOverlay = document.getElementById('qs-pause-overlay');
var elCompleteOverlay = document.getElementById('qs-complete-overlay');
var elScore = document.getElementById('qs-score');
var elStreak = document.getElementById('qs-streak');
var elLevel = document.getElementById('qs-level');
var elLevelText = document.getElementById('qs-level-text');
var elRuleBadge = document.getElementById('qs-rule-badge');
var elProgressFill = document.getElementById('qs-progress-fill');
var elTimerFill = document.getElementById('qs-timer-fill');
var elRuleIndicator = document.getElementById('qs-rule-indicator');
var elStimulus = document.getElementById('qs-stimulus');
var elFeedbackFlash = document.getElementById('qs-feedback-flash');
var elFeedbackIcon = document.getElementById('qs-feedback-icon');
var elLabelLeft = document.getElementById('qs-label-left');
var elLabelRight = document.getElementById('qs-label-right');
var elBtnLeft = document.getElementById('qs-btn-left');
var elBtnRight = document.getElementById('qs-btn-right');
var elFinalScore = document.getElementById('qs-final-score');
var elNewBest = document.getElementById('qs-new-best');
var elFinalLevel = document.getElementById('qs-final-level');
var elFinalAccuracy = document.getElementById('qs-final-accuracy');
var elFinalStreak = document.getElementById('qs-final-streak');
var elFinalBest = document.getElementById('qs-final-best');
var elBestDisplay = document.getElementById('qs-best-display');
var elBestScore = document.getElementById('qs-best-score');
var elLevelToast = document.getElementById('qs-level-toast');
var elRuleToast = document.getElementById('qs-rule-toast');
var btnStart = document.getElementById('qs-start-btn');
var btnResume = document.getElementById('qs-resume-btn');
var btnPlayAgain = document.getElementById('qs-play-again-btn');

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getRuleChangeInterval(lvl) {
if (lvl <= 6) return 999;
if (lvl <= 9) return 4;
if (lvl <= 12) return 3;
if (lvl <= 16) return 3;
return 2;
}

/* ── Helpers ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pick(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
return arr;
}

/* ── Rule definitions ── */
var SHAPES = ['Cercle', 'Carr\u00e9', 'Triangle'];
var FRUITS = ['Pomme', 'Banane', 'Cerise'];
var NOT_FRUITS = ['Voiture', 'Livre', 'Bureau'];
var ALL_WORDS = FRUITS.concat(NOT_FRUITS);

function ruleEvenOdd() {
return {
name: 'Pair / Impair',
leftLabel: 'Pair',
rightLabel: 'Impair',
generate: function() {
var n = randInt(1, 50);
return {
display: String(n),
correctSide: (n % 2 === 0) ? 'left' : 'right'
};
}
};
}

function ruleBigSmall() {
return {
name: 'Grand / Petit',
leftLabel: 'Grand (\u226550)',
rightLabel: 'Petit (<50)',
generate: function() {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n >= 50) ? 'left' : 'right'
};
}
};
}

function ruleShapeOrNot() {
return {
name: 'Forme / Pas Forme',
leftLabel: 'Forme',
rightLabel: 'Pas Forme',
generate: function() {
var isShape = Math.random() < 0.5;
var item;
if (isShape) {
item = pick(SHAPES);
} else {
item = String(randInt(1, 100));
}
return {
display: item,
correctSide: isShape ? 'left' : 'right'
};
}
};
}

function ruleFruitOrNot() {
return {
name: 'Fruit / Pas Fruit',
leftLabel: 'Fruit',
rightLabel: 'Pas Fruit',
generate: function() {
var item = pick(ALL_WORDS);
var isFruit = FRUITS.indexOf(item) !== -1;
return {
display: item,
correctSide: isFruit ? 'left' : 'right'
};
}
};
}

function ruleCompoundEvenBig() {
return {
name: 'Pair ET Grand / Autre',
leftLabel: 'Pair+Grand',
rightLabel: 'Autre',
generate: function() {
var n = randInt(1, 100);
var isEvenAndBig = (n % 2 === 0) && (n >= 50);
return {
display: String(n),
correctSide: isEvenAndBig ? 'left' : 'right'
};
}
};
}

function ruleCompoundOddSmall() {
return {
name: 'Impair ET Petit / Autre',
leftLabel: 'Impair+Petit',
rightLabel: 'Autre',
generate: function() {
var n = randInt(1, 100);
var isOddAndSmall = (n % 2 !== 0) && (n < 50);
return {
display: String(n),
correctSide: isOddAndSmall ? 'left' : 'right'
};
}
};
}

function ruleCompoundFruitBig() {
return {
name: 'Fruit OU Grand / Autre',
leftLabel: 'Fruit/Grand',
rightLabel: 'Autre',
generate: function() {
var useWord = Math.random() < 0.4;
if (useWord) {
var item = pick(ALL_WORDS);
var isFruit = FRUITS.indexOf(item) !== -1;
return {
display: item,
correctSide: isFruit ? 'left' : 'right'
};
} else {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n >= 50) ? 'left' : 'right'
};
}
}
};
}

function ruleCompoundShapeEven() {
return {
name: 'Forme OU Pair / Autre',
leftLabel: 'Forme/Pair',
rightLabel: 'Autre',
generate: function() {
var useShape = Math.random() < 0.35;
if (useShape) {
var isShape = Math.random() < 0.5;
var item = isShape ? pick(SHAPES) : String(randInt(1, 50) * 2 - 1);
return {
display: item,
correctSide: isShape ? 'left' : 'right'
};
} else {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n % 2 === 0) ? 'left' : 'right'
};
}
}
};
}

/* ── Get available rules for level ── */
function getRulesForLevel(lvl) {
if (lvl <= 3) {
return [ruleEvenOdd];
} else if (lvl <= 6) {
return [ruleBigSmall];
} else if (lvl <= 9) {
return [ruleEvenOdd, ruleBigSmall];
} else if (lvl <= 12) {
return [ruleShapeOrNot, ruleEvenOdd];
} else if (lvl <= 16) {
return [ruleFruitOrNot, ruleEvenOdd, ruleBigSmall];
} else {
return [ruleCompoundEvenBig, ruleCompoundOddSmall, ruleCompoundFruitBig, ruleCompoundShapeEven];
}
}

function pickNewRule(lvl, prevRuleName) {
var factories = getRulesForLevel(lvl);
if (factories.length === 1) {
return factories[0]();
}
var attempts = 0;
var rule;
do {
rule = pick(factories)();
attempts++;
} while (rule.name === prevRuleName && attempts < 10);
return rule;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
var rulesForLevel = getRulesForLevel(state.level);
if (rulesForLevel.length > 1) {
elRuleBadge.style.display = '';
elRuleBadge.textContent = 'R\u00e8gles alternent';
} else {
elRuleBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('qs-playing', state.score, challenge.score);
}

/* ── Update rule display ── */
function updateRuleDisplay() {
if (!state.currentRule) return;
elRuleIndicator.textContent = 'Trier : ' + state.currentRule.name;
elLabelLeft.textContent = state.currentRule.leftLabel;
elLabelRight.textContent = state.currentRule.rightLabel;
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('qs-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('qs-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'qs-feedback-flash';
elFeedbackIcon.className = 'qs-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('qs-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('qs-show-check');
} else {
elFeedbackFlash.classList.add('qs-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('qs-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'qs-feedback-flash';
elFeedbackIcon.className = 'qs-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Niveau ' + level + ' !';
elLevelToast.classList.add('qs-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('qs-toast-show');
}, 1500);
}

/* ── Show rule-change toast ── */
function showRuleToast(ruleName) {
elRuleToast.textContent = 'Nouvelle r\u00e8gle : ' + ruleName;
elRuleToast.classList.add('qs-toast-show');
setTimeout(function() {
elRuleToast.classList.remove('qs-toast-show');
}, 1800);
}

/* ── Flash sort button ── */
function flashSortBtn(side, correct) {
var btn = side === 'left' ? elBtnLeft : elBtnRight;
btn.classList.add(correct ? 'qs-correct-flash' : 'qs-wrong-flash');
setTimeout(function() {
btn.classList.remove('qs-correct-flash', 'qs-wrong-flash');
}, 400);
}

function sortSideLabel(side) {
if (!state.currentRule) return side || 'No answer';
if (side === 'left') return state.currentRule.leftLabel;
if (side === 'right') return state.currentRule.rightLabel;
return 'No answer';
}

function recordSortHistory(chosenSide, correct) {
var html = '<strong>' + runHistory.escape(state.currentRule ? state.currentRule.name : 'Sort rule') + '</strong>';
html += '<div class="gk-runtime-history-sub">Item: ' + runHistory.escape(state.currentStimulus) + '</div>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(sortSideLabel(chosenSide)) + ' | Correct: ' + runHistory.escape(sortSideLabel(state.correctSide)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenSide) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var correct = (chosenSide === state.correctSide);

state.totalAnswered++;
recordSortHistory(chosenSide, correct);
flashSortBtn(chosenSide, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundInRule = 0;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordSortHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundInRule = 0;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.roundInRule++;
state.answered = false;

/* Check if rule should change mid-level */
var ruleInterval = getRuleChangeInterval(state.level);
if (state.roundInRule > ruleInterval && getRulesForLevel(state.level).length > 1) {
state.roundInRule = 1;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showRuleToast(state.currentRule.name);
}

/* Generate stimulus */
var item = state.currentRule.generate();
state.correctSide = item.correctSide;
state.currentStimulus = item.display;

elStimulus.textContent = item.display;
elStimulus.style.animation = 'none';
void elStimulus.offsetWidth;
elStimulus.style.animation = '';

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'qs-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'qs-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'qs-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.qs-trophy');
var title = document.querySelector('#qs-complete-overlay .qs-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'INCROYABLE !';
elNewBest.className = 'qs-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F INCROYABLE ! Nouveau record !';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Bien jou\u00e9 !';
elNewBest.className = 'qs-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('qs-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var QS_WIZARD_STEPS = [
{icon: '\uD83D\uDCC2', title: 'Triez les \u00e9l\u00e9ments vite', desc: 'Un \u00e9l\u00e9ment appara\u00eet \u00e0 l\u2019\u00e9cran. Appuyez sur la bonne cat\u00e9gorie (gauche ou droite) pour le trier !'},
{icon: '\uD83D\uDD00', title: 'Les r\u00e8gles changent !', desc: 'Toutes les quelques manches, la r\u00e8gle de tri change. Restez attentif et adaptez-vous vite !'},
{icon: '\u26A1', title: 'Vite', desc: 'R\u00e9pondez avant la fin du temps. Vitesse et s\u00e9ries = points bonus !', final: true}
];
var qsWizardStep = 0;

function renderWizardStep() {
var s = QS_WIZARD_STEPS[qsWizardStep];
var dotsHtml = '';
for (var i = 0; i < QS_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="qs-wizard-dot' + (i === qsWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Commencer' : 'Suivant';
elWizardCard.innerHTML =
'<div class="qs-wizard-icon">' + s.icon + '</div>' +
'<div class="qs-wizard-title">' + s.title + '</div>' +
'<div class="qs-wizard-desc">' + s.desc + '</div>' +
'<div class="qs-wizard-dots">' + dotsHtml + '</div>' +
'<button class="qs-wizard-btn" id="qs-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'qs-wizard-enter 0.3s ease-out';
document.getElementById('qs-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (qsWizardStep < QS_WIZARD_STEPS.length - 1) {
qsWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
qsWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.roundInRule = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctSide = null;
state.currentRule = null;
state.currentStimulus = null;
state.ruleIndex = 0;
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
state.currentRule = pickNewRule(state.level, null);
state.roundInRule = 0;
updateRuleDisplay();
showScreen('playing');
GK.renderChallengeBar('qs-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('qs-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

elBtnLeft.addEventListener('click', function() {
processAnswer('left');
});

elBtnRight.addEventListener('click', function() {
processAnswer('right');
});

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('qs-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('qs-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('qs-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('qs-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Quick Sort', '/fr/games/quick-sort/', 'qs-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key === '1') {
e.preventDefault();
processAnswer('left');
} else if (e.key === '2') {
e.preventDefault();
processAnswer('right');
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('qs-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Sequence Recall - Jeu d'Entraînement Cérébral
URL: https://guruka.com/fr/games/sequence-recall/
Description: Repetez les sequences de couleurs.

<style>
#sequence-recall-game {
max-width: 600px;
margin: 0 auto;
padding: 1.5rem 1rem 3rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary, #1a2332);
-webkit-tap-highlight-color: transparent;
}

#sequence-recall-game * {
box-sizing: border-box;
}

#sequence-recall-game .sr-card {
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

[data-theme="dark"] #sequence-recall-game .sr-card {
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

#sequence-recall-game .sr-title {
font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 1.75rem;
font-weight: 700;
text-align: center;
margin: 0 0 0.25rem;
letter-spacing: -0.025em;
}

#sequence-recall-game .sr-subtitle {
text-align: center;
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.95rem;
margin: 0 0 1.5rem;
}

#sequence-recall-game .sr-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#sequence-recall-game .sr-icon {
display: flex;
justify-content: center;
margin-bottom: 0;
font-size: 2rem;
}

#sequence-recall-game .sr-instructions-list {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
}

#sequence-recall-game .sr-instructions-list li {
padding: 0.5rem 0;
padding-left: 1.75rem;
position: relative;
font-size: 0.95rem;
color: var(--color-text-primary, #1a2332);
line-height: 1.5;
}

#sequence-recall-game .sr-instructions-list li::before {
content: attr(data-num);
position: absolute;
left: 0;
top: 0.5rem;
width: 1.25rem;
height: 1.25rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 50%;
font-size: 0.7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}

#sequence-recall-game .sr-best-score {
text-align: center;
padding: 0.75rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
margin-bottom: 1.25rem;
font-size: 0.9rem;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-best-score strong {
color: var(--color-text-primary, #1a2332);
font-weight: 700;
}

#sequence-recall-game .sr-btn-primary {
display: block;
width: 100%;
padding: 0.875rem 1.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.5rem;
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
text-align: center;
text-decoration: none;
}

#sequence-recall-game .sr-btn-primary:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#sequence-recall-game .sr-btn-primary:active {
transform: translateY(0);
}

#sequence-recall-game .sr-btn-secondary {
display: inline-block;
margin-top: 0.75rem;
padding: 0.5rem 1rem;
background: transparent;
color: var(--color-primary, #0f9072);
border: 1px solid var(--color-primary, #0f9072);
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
text-align: center;
}

#sequence-recall-game .sr-btn-secondary:hover {
background: color-mix(in srgb, var(--color-primary, #0f9072) 10%, transparent);
}

/* Wizard overlay */
#sequence-recall-game .sr-wizard-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#sequence-recall-game .sr-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sr-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-card {
background: var(--color-dark-bg-primary, #1e293b);
color: var(--color-dark-text-primary, #e2e8f0);
}
@keyframes sr-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
#sequence-recall-game .sr-wizard-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
#sequence-recall-game .sr-wizard-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
#sequence-recall-game .sr-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary, #4b5b6d);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-desc {
color: var(--color-dark-text-secondary, #94a3b8);
}
#sequence-recall-game .sr-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
#sequence-recall-game .sr-wizard-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
#sequence-recall-game .sr-wizard-dot.active {
background: var(--color-primary, #0f9072);
transform: scale(1.3);
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-dot.active {
background: var(--color-primary, #0f9072);
}
#sequence-recall-game .sr-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary, #0f9072);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
#sequence-recall-game .sr-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#sequence-recall-game .sr-wizard-card { padding: 1.5rem 1rem; }
#sequence-recall-game .sr-wizard-icon { font-size: 2rem; }
#sequence-recall-game .sr-wizard-title { font-size: 1.1rem; }
#sequence-recall-game .sr-wizard-desc { font-size: 0.85rem; }
#sequence-recall-game .sr-icon { font-size: 1.5rem; margin-bottom: 0; }
#sequence-recall-game .sr-title { font-size: 1.3rem; }
#sequence-recall-game .sr-subtitle { font-size: 0.85rem; margin-bottom: 1rem; }
#sequence-recall-game .sr-instructions-list li { font-size: 0.85rem; padding: 0.3rem 0; }
}

/* Header bar */
#sequence-recall-game .sr-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 0.85rem;
font-weight: 600;
}

#sequence-recall-game .sr-header-item {
text-align: center;
line-height: 1.3;
}

#sequence-recall-game .sr-header-label {
display: block;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary, #4b5b6d);
font-weight: 500;
}

#sequence-recall-game .sr-header-value {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text-primary, #1a2332);
}

#sequence-recall-game .sr-header-value.sr-streak {
color: #f59e0b;
}

/* Phase indicator */
#sequence-recall-game .sr-phase-label {
text-align: center;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-primary, #0f9072);
margin-bottom: 0.75rem;
}

/* Progress bar */
#sequence-recall-game .sr-progress {
margin-top: 1rem;
}

#sequence-recall-game .sr-progress-label {
text-align: center;
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.35rem;
}

#sequence-recall-game .sr-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 3px;
overflow: hidden;
}

#sequence-recall-game .sr-progress-fill {
height: 100%;
background: var(--color-primary, #0f9072);
border-radius: 3px;
transition: width 0.3s ease;
}

/* Color display area */
#sequence-recall-game .sr-color-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 220px;
padding: 1rem;
}

#sequence-recall-game .sr-color-box {
width: 160px;
height: 160px;
border-radius: 1rem;
animation: sr-color-appear 0.3s ease-out;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

@keyframes sr-color-appear {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .sr-color-counter {
margin-top: 1rem;
font-size: 1rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}

/* Recall area */
#sequence-recall-game .sr-recall-area {
padding: 0.5rem 0;
}

#sequence-recall-game .sr-selected-sequence {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 44px;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
flex-wrap: wrap;
}

#sequence-recall-game .sr-selected-dot {
width: 28px;
height: 28px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
animation: sr-dot-appear 0.2s ease-out;
flex-shrink: 0;
}

@keyframes sr-dot-appear {
0% { transform: scale(0); }
100% { transform: scale(1); }
}

#sequence-recall-game .sr-selected-placeholder {
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-color-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
margin-bottom: 0.75rem;
}

#sequence-recall-game .sr-color-btn {
aspect-ratio: 1;
border: 3px solid transparent;
border-radius: 0.75rem;
cursor: pointer;
transition: all 0.15s ease;
min-height: 70px;
position: relative;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

#sequence-recall-game .sr-color-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#sequence-recall-game .sr-color-btn:active {
transform: scale(0.95);
}

#sequence-recall-game .sr-color-btn .sr-btn-label {
position: absolute;
bottom: 6px;
left: 0;
right: 0;
text-align: center;
font-size: 0.65rem;
font-weight: 600;
color: rgba(255,255,255,0.9);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#sequence-recall-game .sr-undo-row {
display: flex;
gap: 0.5rem;
}

#sequence-recall-game .sr-undo-btn {
flex: 1;
padding: 0.6rem;
border: 1px solid var(--color-border, #dfe4ea);
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
border-radius: 0.5rem;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-undo-btn:hover {
background: var(--color-bg-secondary, #f0f4f8);
}

#sequence-recall-game .sr-submit-btn {
flex: 2;
padding: 0.6rem;
border: none;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-submit-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}

#sequence-recall-game .sr-submit-btn:not(:disabled):hover {
opacity: 0.9;
}

/* Distraction (math) */
#sequence-recall-game .sr-math-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
padding: 1rem;
}

#sequence-recall-game .sr-math-problem {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
font-family: "Space Grotesk", system-ui, sans-serif;
color: var(--color-text-primary, #1a2332);
}

#sequence-recall-game .sr-math-input-row {
display: flex;
gap: 0.5rem;
align-items: center;
}

#sequence-recall-game .sr-math-input {
width: 100px;
padding: 0.6rem 0.75rem;
border: 2px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
font-size: 1.25rem;
text-align: center;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
outline: none;
}

#sequence-recall-game .sr-math-input:focus {
border-color: var(--color-primary, #0f9072);
}

#sequence-recall-game .sr-math-submit {
padding: 0.6rem 1.25rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-math-submit:hover {
opacity: 0.9;
}

#sequence-recall-game .sr-math-hint {
margin-top: 0.75rem;
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
}

/* Positions grid */
#sequence-recall-game .sr-position-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 260px;
padding: 1rem;
}

#sequence-recall-game .sr-position-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
width: 210px;
}

#sequence-recall-game .sr-position-cell {
width: 64px;
height: 64px;
background: var(--color-bg-secondary, #f0f4f8);
border: 2px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
color: transparent;
}

#sequence-recall-game .sr-position-cell:hover {
border-color: var(--color-primary, #0f9072);
}

#sequence-recall-game .sr-position-cell.sr-pos-active {
background: var(--color-primary, #0f9072);
border-color: var(--color-primary, #0f9072);
color: #fff;
}

#sequence-recall-game .sr-position-cell.sr-pos-highlight {
background: var(--color-primary, #0f9072);
border-color: var(--color-primary, #0f9072);
animation: sr-pos-flash 0.4s ease-out;
}

@keyframes sr-pos-flash {
0% { transform: scale(0.8); opacity: 0.5; }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .sr-position-counter {
margin-top: 0.75rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}

/* Feedback overlay */
#sequence-recall-game .sr-feedback {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
animation: sr-feedback-appear 0.3s ease-out;
}

#sequence-recall-game .sr-feedback-correct {
font-size: 1.5rem;
font-weight: 700;
color: #22c55e;
}

#sequence-recall-game .sr-feedback-wrong {
font-size: 1.5rem;
font-weight: 700;
color: #ef4444;
}

#sequence-recall-game .sr-feedback-points {
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text-secondary, #4b5b6d);
margin-top: 0.25rem;
}

@keyframes sr-feedback-appear {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

/* Game complete */
#sequence-recall-game .sr-complete {
position: relative;
text-align: center;
}

#sequence-recall-game .sr-complete-icon {
font-size: 3rem;
margin-bottom: 0.5rem;
}

#sequence-recall-game .sr-complete-title {
font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 1.25rem;
}

#sequence-recall-game .sr-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-bottom: 1.25rem;
}

#sequence-recall-game .sr-stat-box {
padding: 0.75rem 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
text-align: center;
}

#sequence-recall-game .sr-stat-value {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-text-primary, #1a2332);
display: block;
}

#sequence-recall-game .sr-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-new-best {
display: inline-block;
padding: 0.35rem 0.75rem;
background: #f59e0b;
color: #1a2332;
border-radius: 1rem;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 1rem;
animation: sr-badge-pulse 1s ease-in-out infinite alternate;
}

@keyframes sr-badge-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

#sequence-recall-game .sr-complete-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
margin-top: 0.5rem;
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

/* Hide all screens by default */
#sequence-recall-game .sr-screen {
display: none;
}

#sequence-recall-game .sr-screen.sr-active {
display: block;
}

/* Responsive */
@media (max-width: 400px) {
#sequence-recall-game .sr-color-btn {
min-height: 60px;
}
#sequence-recall-game .sr-color-box {
width: 130px;
height: 130px;
}
#sequence-recall-game .sr-position-grid {
width: 180px;
}
#sequence-recall-game .sr-position-cell {
width: 54px;
height: 54px;
}
}
@media (max-width: 640px) {
#sequence-recall-game .sr-color-grid {
gap: 0.5rem;
}
#sequence-recall-game .sr-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 360px) {
#sequence-recall-game .sr-color-btn {
min-height: 50px;
}
#sequence-recall-game .sr-color-box {
width: 110px;
height: 110px;
}
#sequence-recall-game .sr-position-grid {
width: 160px;
}
#sequence-recall-game .sr-position-cell {
width: 48px;
height: 48px;
}
#sequence-recall-game .sr-stats-grid {
grid-template-columns: 1fr 1fr;
}
#sequence-recall-game .sr-selected-dot {
width: 22px;
height: 22px;
}
}
@keyframes sr-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.sr-confetti-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.sr-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: sr-confetti-fall 2.5s ease-in forwards;
}
.sr-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: sr-glow-fade 1s ease-out forwards;
}
@keyframes sr-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.sr-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 1rem;
animation: sr-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes sr-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#sequence-recall-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #sequence-recall-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="sequence-recall-game">

<div id="sr-instructions" class="sr-screen sr-active">
<div class="sr-card">
<div class="sr-title-row"><span class="sr-icon">&#x1F9E0;</span><h1 class="sr-title">Sequence Recall</h1></div>
<p class="sr-subtitle">Entraînez votre mémoire de travail</p>
<ul class="sr-instructions-list">
<li data-num="1">Regardez la séquence de couleurs affichées une par une</li>
<li data-num="2">Mémorisez l'ordre avec attention</li>
<li data-num="3">Rappelez les couleurs dans le même ordre exact</li>
<li data-num="4">Progressez à travers 20 niveaux de difficulté croissante</li>
</ul>
<div class="sr-best-score" id="sr-best-display">
Meilleur Score : <strong id="sr-best-value">0</strong> points
</div>
<button class="sr-btn-primary" id="sr-start-btn">Commencer</button>
<div id="sr-challenge-banner-wrap"></div>
</div>
</div>

<div id="sr-wizard" class="sr-screen">
<div class="sr-wizard-overlay">
<div class="sr-wizard-card" id="sr-wizard-card"></div>
</div>
</div>

<div id="sr-playing" class="sr-screen">
<div class="sr-header">
<div class="sr-header-item">
<span class="sr-header-label">Score</span>
<span class="sr-header-value" id="sr-score">0</span>
</div>
<div class="sr-header-item">
<span class="sr-header-label">Niveau</span>
<span class="sr-header-value" id="sr-level">1</span>
</div>
<div class="sr-header-item">
<span class="sr-header-label">Série</span>
<span class="sr-header-value sr-streak" id="sr-streak">0</span>
</div>
</div>
<div class="sr-phase-label" id="sr-phase-label">Mémoriser</div>
<div id="sr-play-area"></div>
<div class="sr-progress">
<div class="sr-progress-label" id="sr-progress-label">Manche 1 sur 3</div>
<div class="sr-progress-bar">
<div class="sr-progress-fill" id="sr-progress-fill" style="width:0%"></div>
</div>
</div>
<button class="gk-finish-btn" id="sr-finish-btn">Terminer</button>
</div>

<div id="sr-complete" class="sr-screen">
<div class="sr-card sr-complete">
<button class="gk-complete-close" id="sr-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="sr-complete-icon">&#x1F3C6;</div>
<h2 class="sr-complete-title">Partie Terminée !</h2>
<div id="sr-new-best-badge" class="sr-new-best" style="display:none;">Nouveau Record !</div>
<div class="gk-challenge-result" id="sr-challenge-result" style="display:none;"></div>
<div class="sr-stats-grid">
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-score">0</span>
<span class="sr-stat-label">Score</span>
</div>
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-level">1</span>
<span class="sr-stat-label">Niveau</span>
</div>
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-accuracy">0%</span>
<span class="sr-stat-label">Précision</span>
</div>
</div>
<div class="sr-complete-links">
<button class="sr-btn-primary" id="sr-play-again-btn">Encore</button>
<button class="gk-runtime-history-toggle" id="sr-history-toggle" type="button">Show History</button>
<a href="/fr/games/" class="sr-btn-secondary">Tous les Jeux</a>
</div>
<div class="gk-runtime-history-panel" id="sr-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="sr-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="sr-share-btn">&#128279; Partager votre Score</button>
<div class="gk-share-copied" id="sr-share-copied" style="display:none;">Lien copié !</div>
</div>
</div>
</div>

</div>

<script>
(function() {
var STORAGE_BEST = 'guruka_sequence-recall_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('sr-history-toggle', 'sr-history-panel', 'sr-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var COLORS = [
{ name: 'Rouge', hsl: 'hsl(0,84%,60%)' },
{ name: 'Bleu', hsl: 'hsl(217,91%,60%)' },
{ name: 'Vert', hsl: 'hsl(142,76%,36%)' },
{ name: 'Jaune', hsl: 'hsl(48,96%,53%)' },
{ name: 'Violet', hsl: 'hsl(280,68%,55%)' },
{ name: 'Orange', hsl: 'hsl(25,95%,53%)' }
];

var MAX_LEVEL = 20;
var ROUNDS_PER_LEVEL = 3;

var state = {
screen: 'instructions',
level: 1,
round: 0,
score: 0,
streak: 0,
totalCorrect: 0,
totalAttempts: 0,
colorSequence: [],
positionSequence: [],
selectedColors: [],
selectedPositions: [],
currentShowIndex: 0,
phaseStartTime: 0,
showTimer: null,
feedbackTimer: null
};

function getSequenceLength(level) {
return Math.min(3 + Math.floor(level / 3), 8);
}

function hasDistraction(level) {
return level >= 6;
}

function isDualTrack(level) {
return level >= 11;
}

function getDisplayTime(level) {
return Math.max(1200 - (level - 1) * 40, 600);
}

function getBestScore() {
try {
var val = localStorage.getItem(STORAGE_BEST);
return val ? parseInt(val, 10) : 0;
} catch(e) { return 0; }
}

function setBestScore(s) {
try { localStorage.setItem(STORAGE_BEST, String(s)); } catch(e) {}
}

function getHistory() {
return [];
}

function addHistory(entry) {
void entry;
}

function $(id) { return document.getElementById(id); }

function showScreen(name) {
var screens = document.querySelectorAll('#sequence-recall-game .sr-screen');
for (var i = 0; i < screens.length; i++) {
screens[i].classList.remove('sr-active');
}
var el = $('sr-' + name);
if (el) el.classList.add('sr-active');
state.screen = name;
}

function generateColorSequence(len) {
var seq = [];
for (var i = 0; i < len; i++) {
seq.push(Math.floor(Math.random() * COLORS.length));
}
return seq;
}

function generatePositionSequence(len) {
var positions = [];
var used = {};
var count = Math.min(len, 9);
while (positions.length < count) {
var p = Math.floor(Math.random() * 9);
if (!used[p]) {
used[p] = true;
positions.push(p);
}
}
return positions;
}

function generateMathProblem() {
var ops = ['+', '-', '*'];
var op = ops[Math.floor(Math.random() * ops.length)];
var a, b, answer;
if (op === '+') {
a = Math.floor(Math.random() * 50) + 1;
b = Math.floor(Math.random() * 50) + 1;
answer = a + b;
} else if (op === '-') {
a = Math.floor(Math.random() * 50) + 10;
b = Math.floor(Math.random() * a);
answer = a - b;
} else {
a = Math.floor(Math.random() * 12) + 2;
b = Math.floor(Math.random() * 12) + 2;
answer = a * b;
}
var display = op === '*' ? (a + ' \u00D7 ' + b) : (a + ' ' + op + ' ' + b);
return { display: display, answer: answer };
}

function updateHeader() {
$('sr-score').textContent = state.score;
$('sr-level').textContent = state.level;
$('sr-streak').textContent = state.streak;
if (challenge.active) GK.updateChallengeBar('sr-playing', state.score, challenge.score);
}

function updateProgress() {
$('sr-progress-label').textContent = 'Manche ' + (state.round + 1) + ' sur ' + ROUNDS_PER_LEVEL;
var pct = (state.round / ROUNDS_PER_LEVEL) * 100;
$('sr-progress-fill').style.width = pct + '%';
}

var SR_WIZARD_STEPS = [
{icon: '\uD83C\uDFA8', title: 'Regardez la séquence de couleurs', desc: 'Les couleurs apparaissent une par une. Mémorisez l\'ordre !'},
{icon: '\uD83E\uDDE0', title: 'Rappelez-les dans l\'ordre', desc: 'Touchez les couleurs dans la séquence exacte que vous avez vue.'},
{icon: '\uD83D\uDE80', title: 'Prêt ? C\'est parti !', desc: 'Les séquences deviennent plus longues. Restez concentré !', final: true}
];
var srWizardStep = 0;
var srWizardCallback = null;

function srRenderWizardStep() {
var s = SR_WIZARD_STEPS[srWizardStep];
var dotsHtml = '';
for (var i = 0; i < SR_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="sr-wizard-dot' + (i === srWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Commencer à Jouer' : 'Suivant';
var card = $('sr-wizard-card');
card.innerHTML =
'<div class="sr-wizard-icon">' + s.icon + '</div>' +
'<div class="sr-wizard-title">' + s.title + '</div>' +
'<div class="sr-wizard-desc">' + s.desc + '</div>' +
'<div class="sr-wizard-dots">' + dotsHtml + '</div>' +
'<button class="sr-wizard-btn" id="sr-wizard-next">' + btnLabel + '</button>';
card.style.animation = 'none';
void card.offsetWidth;
card.style.animation = 'sr-wizard-enter 0.3s ease-out';
$('sr-wizard-next').addEventListener('click', srAdvanceWizard);
}

function srAdvanceWizard() {
if (srWizardStep < SR_WIZARD_STEPS.length - 1) {
srWizardStep++;
srRenderWizardStep();
} else {
if (srWizardCallback) srWizardCallback();
}
}

function showWizard(callback) {
srWizardStep = 0;
srWizardCallback = callback;
showScreen('wizard');
srRenderWizardStep();
}

function startRound() {
var seqLen = getSequenceLength(state.level);
state.colorSequence = generateColorSequence(seqLen);
state.positionSequence = isDualTrack(state.level) ? generatePositionSequence(Math.min(seqLen, 9)) : [];
state.selectedColors = [];
state.selectedPositions = [];
state.currentShowIndex = 0;

updateHeader();
updateProgress();
showColorSequence();
}

function showColorSequence() {
$('sr-phase-label').textContent = 'Mémorisez les couleurs';
state.currentShowIndex = 0;
showNextColor();
}

function showNextColor() {
var area = $('sr-play-area');
if (state.currentShowIndex >= state.colorSequence.length) {
if (isDualTrack(state.level)) {
showPositionSequence();
} else if (hasDistraction(state.level)) {
showDistraction();
} else {
startRecallColors();
}
return;
}

var colorIdx = state.colorSequence[state.currentShowIndex];
var color = COLORS[colorIdx];
var total = state.colorSequence.length;
var current = state.currentShowIndex + 1;

area.innerHTML = '<div class="sr-color-stage">' +
'<div class="sr-color-box" style="background:' + color.hsl + '"></div>' +
'<div class="sr-color-counter">' + current + ' / ' + total + '</div>' +
'</div>';

state.currentShowIndex++;
var dt = getDisplayTime(state.level);
state.showTimer = setTimeout(function() {
showNextColor();
}, dt);
}

function showPositionSequence() {
$('sr-phase-label').textContent = 'Mémorisez les positions';
state.currentShowIndex = 0;
showNextPosition();
}

function showNextPosition() {
if (state.currentShowIndex >= state.positionSequence.length) {
if (hasDistraction(state.level)) {
showDistraction();
} else {
startRecallColors();
}
return;
}

var pos = state.positionSequence[state.currentShowIndex];
var total = state.positionSequence.length;
var current = state.currentShowIndex + 1;

var html = '<div class="sr-position-stage">';
html += '<div class="sr-position-grid">';
for (var i = 0; i < 9; i++) {
var cls = 'sr-position-cell';
if (i === pos) cls += ' sr-pos-highlight';
html += '<div class="' + cls + '"></div>';
}
html += '</div>';
html += '<div class="sr-position-counter">' + current + ' / ' + total + '</div>';
html += '</div>';

$('sr-play-area').innerHTML = html;

state.currentShowIndex++;
var dt = getDisplayTime(state.level);
state.showTimer = setTimeout(function() {
showNextPosition();
}, dt);
}

function showDistraction() {
$('sr-phase-label').textContent = 'Calcul rapide !';
var problem = generateMathProblem();

var html = '<div class="sr-math-area">';
html += '<div class="sr-math-problem">' + problem.display + ' = ?</div>';
html += '<div class="sr-math-input-row">';
html += '<input type="number" class="sr-math-input" id="sr-math-input" inputmode="numeric" autocomplete="off">';
html += '<button class="sr-math-submit" id="sr-math-btn">Go</button>';
html += '</div>';
html += '<div class="sr-math-hint">Résolvez pour continuer</div>';
html += '</div>';

$('sr-play-area').innerHTML = html;

var input = $('sr-math-input');
var btn = $('sr-math-btn');

function submitMath() {
var val = parseInt(input.value, 10);
if (isNaN(val)) return;
startRecallColors();
}

btn.addEventListener('click', submitMath);
input.addEventListener('keydown', function(e) {
if (e.key === 'Enter') submitMath();
});

setTimeout(function() { input.focus(); }, 100);
}

function startRecallColors() {
$('sr-phase-label').textContent = 'Rappelez la séquence de couleurs';
state.selectedColors = [];
state.phaseStartTime = Date.now();
renderRecallColors();
}

function renderRecallColors() {
var needed = state.colorSequence.length;
var html = '<div class="sr-recall-area">';

html += '<div class="sr-selected-sequence" id="sr-selected-seq">';
if (state.selectedColors.length === 0) {
html += '<span class="sr-selected-placeholder">Touchez les couleurs dans l\'ordre (' + needed + ' nécessaires)</span>';
} else {
for (var i = 0; i < state.selectedColors.length; i++) {
var c = COLORS[state.selectedColors[i]];
html += '<div class="sr-selected-dot" style="background:' + c.hsl + '"></div>';
}
}
html += '</div>';

html += '<div class="sr-color-grid">';
for (var j = 0; j < COLORS.length; j++) {
html += '<button class="sr-color-btn" data-color="' + j + '" style="background:' + COLORS[j].hsl + '">';
html += '<span class="sr-btn-label">' + COLORS[j].name + '</span>';
html += '</button>';
}
html += '</div>';

html += '<div class="sr-undo-row">';
html += '<button class="sr-undo-btn" id="sr-undo-btn">Annuler</button>';
html += '<button class="sr-submit-btn" id="sr-submit-colors-btn"' + (state.selectedColors.length < needed ? ' disabled' : '') + '>Valider</button>';
html += '</div>';

html += '</div>';

$('sr-play-area').innerHTML = html;

var buttons = document.querySelectorAll('#sequence-recall-game .sr-color-btn');
for (var k = 0; k < buttons.length; k++) {
buttons[k].addEventListener('click', function() {
var ci = parseInt(this.getAttribute('data-color'), 10);
if (state.selectedColors.length < needed) {
state.selectedColors.push(ci);
renderRecallColors();
if (state.selectedColors.length === needed) {
setTimeout(function() {
var sb = $('sr-submit-colors-btn');
if (sb) sb.focus();
}, 50);
}
}
});
}

$('sr-undo-btn').addEventListener('click', function() {
if (state.selectedColors.length > 0) {
state.selectedColors.pop();
renderRecallColors();
}
});

var submitBtn = $('sr-submit-colors-btn');
submitBtn.addEventListener('click', function() {
if (state.selectedColors.length === needed) {
submitColorRecall();
}
});
}

function submitColorRecall() {
var responseTime = Date.now() - state.phaseStartTime;
var correct = true;
for (var i = 0; i < state.colorSequence.length; i++) {
if (state.colorSequence[i] !== state.selectedColors[i]) {
correct = false;
break;
}
}

if (isDualTrack(state.level)) {
state._colorCorrect = correct;
state._colorResponseTime = responseTime;
startRecallPositions();
} else {
resolveRound(correct, responseTime);
}
}

function startRecallPositions() {
$('sr-phase-label').textContent = 'Rappelez les positions dans l\'ordre';
state.selectedPositions = [];
state.phaseStartTime = Date.now();
renderRecallPositions();
}

function renderRecallPositions() {
var needed = state.positionSequence.length;
var html = '<div class="sr-position-stage">';

html += '<div class="sr-selected-sequence">';
if (state.selectedPositions.length === 0) {
html += '<span class="sr-selected-placeholder">Touchez les positions dans l\'ordre (' + needed + ' nécessaires)</span>';
} else {
for (var i = 0; i < state.selectedPositions.length; i++) {
html += '<div class="sr-selected-dot" style="background:var(--color-primary, #0f9072)"></div>';
}
}
html += '</div>';

html += '<div class="sr-position-grid">';
for (var j = 0; j < 9; j++) {
var isSelected = false;
var order = -1;
for (var k = 0; k < state.selectedPositions.length; k++) {
if (state.selectedPositions[k] === j) {
isSelected = true;
order = k + 1;
break;
}
}
var cls = 'sr-position-cell';
if (isSelected) cls += ' sr-pos-active';
html += '<div class="' + cls + '" data-pos="' + j + '">' + (isSelected ? order : '') + '</div>';
}
html += '</div>';

html += '<div class="sr-undo-row" style="margin-top:0.75rem;max-width:210px;width:100%;">';
html += '<button class="sr-undo-btn" id="sr-undo-pos-btn">Annuler</button>';
html += '<button class="sr-submit-btn" id="sr-submit-pos-btn"' + (state.selectedPositions.length < needed ? ' disabled' : '') + '>Valider</button>';
html += '</div>';

html += '</div>';

$('sr-play-area').innerHTML = html;

var cells = document.querySelectorAll('#sequence-recall-game .sr-position-cell');
for (var m = 0; m < cells.length; m++) {
cells[m].addEventListener('click', function() {
var p = parseInt(this.getAttribute('data-pos'), 10);
var alreadySelected = false;
for (var n = 0; n < state.selectedPositions.length; n++) {
if (state.selectedPositions[n] === p) {
alreadySelected = true;
break;
}
}
if (!alreadySelected && state.selectedPositions.length < needed) {
state.selectedPositions.push(p);
renderRecallPositions();
}
});
}

$('sr-undo-pos-btn').addEventListener('click', function() {
if (state.selectedPositions.length > 0) {
state.selectedPositions.pop();
renderRecallPositions();
}
});

$('sr-submit-pos-btn').addEventListener('click', function() {
if (state.selectedPositions.length === needed) {
submitPositionRecall();
}
});
}

function submitPositionRecall() {
var responseTime = Date.now() - state.phaseStartTime;
var posCorrect = true;
for (var i = 0; i < state.positionSequence.length; i++) {
if (state.positionSequence[i] !== state.selectedPositions[i]) {
posCorrect = false;
break;
}
}

var bothCorrect = state._colorCorrect && posCorrect;
var combinedTime = state._colorResponseTime + responseTime;
resolveRound(bothCorrect, combinedTime);
}

function formatColorHistory(seq) {
if (!seq || !seq.length) return 'none';
var out = [];
for (var i = 0; i < seq.length; i++) {
var color = COLORS[seq[i]];
out.push('<span class="gk-history-swatch" style="background:' + runHistory.escape(color.hsl) + '"></span>' + runHistory.escape(color.name));
}
return out.join(', ');
}

function formatPositionHistory(seq) {
if (!seq || !seq.length) return 'none';
var out = [];
for (var i = 0; i < seq.length; i++) out.push(String(seq[i] + 1));
return out.join(', ');
}

function recordSequenceHistory(correct) {
var html = '<strong>Sequence recall</strong>';
html += '<div class="gk-runtime-history-sub">Colors - Your: ' + formatColorHistory(state.selectedColors) + '</div>';
html += '<div class="gk-runtime-history-sub">Colors - Correct: ' + formatColorHistory(state.colorSequence) + '</div>';
if (isDualTrack(state.level)) {
html += '<div class="gk-runtime-history-sub">Positions - Your: ' + runHistory.escape(formatPositionHistory(state.selectedPositions)) + '</div>';
html += '<div class="gk-runtime-history-sub">Positions - Correct: ' + runHistory.escape(formatPositionHistory(state.positionSequence)) + '</div>';
}
runHistory.pushHtml(correct, html);
}

function resolveRound(correct, responseTime) {
state.totalAttempts++;
recordSequenceHistory(correct);
var points = 0;

if (correct) {
state.totalCorrect++;
state.streak++;
points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
} else {
state.streak = 0;
}

updateHeader();
showFeedback(correct, points);
}

function showFeedback(correct, points) {
$('sr-phase-label').textContent = '';
var html = '<div class="sr-feedback"><div>';
if (correct) {
html += '<div class="sr-feedback-correct">Correct !</div>';
html += '<div class="sr-feedback-points">+' + points + ' points</div>';
} else {
html += '<div class="sr-feedback-wrong">Incorrect</div>';
html += '<div class="sr-feedback-points">Série réinitialisée</div>';
}
html += '</div></div>';

$('sr-play-area').innerHTML = html;

state.feedbackTimer = setTimeout(function() {
advanceRound(correct);
}, 1200);
}

function advanceRound(wasCorrect) {
state.round++;

if (state.round >= ROUNDS_PER_LEVEL) {
if (wasCorrect) {
state.level++;
}
state.round = 0;

if (state.level > MAX_LEVEL) {
endGame();
return;
}
}

updateProgress();
startRound();
}

/* ── Celebration effects ── */
function srShowConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'sr-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'sr-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'sr-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function srAnimateScoreCountUp(el, target) {
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(target * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

function endGame() {
exitMobileGameMode();
var accuracy = state.totalAttempts > 0 ? Math.round((state.totalCorrect / state.totalAttempts) * 100) : 0;
var best = getBestScore();
var isNewBest = state.score > best;

if (isNewBest) {
setBestScore(state.score);
}

addHistory({
score: state.score,
level: state.level > MAX_LEVEL ? MAX_LEVEL : state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var iconEl = document.querySelector('#sr-complete .sr-complete-icon');
var titleEl = document.querySelector('#sr-complete .sr-complete-title');
var badge = $('sr-new-best-badge');

if (isNewBest) {
srShowConfetti();
iconEl.textContent = '\uD83C\uDF89';
titleEl.textContent = 'INCROYABLE !';
badge.className = 'sr-new-best-enhanced';
badge.innerHTML = '\uD83C\uDF1F INCROYABLE ! Nouveau Record !';
badge.style.display = 'inline-block';
} else {
iconEl.textContent = '\uD83C\uDFC6';
titleEl.textContent = 'Bien Joué !';
badge.className = 'sr-new-best';
badge.style.display = 'none';
}

GK.renderChallengeResult('sr-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

$('sr-final-level').textContent = state.level > MAX_LEVEL ? MAX_LEVEL : state.level;
$('sr-final-accuracy').textContent = accuracy + '%';

showScreen('complete');
srAnimateScoreCountUp($('sr-final-score'), state.score);
}

function resetGame() {
clearTimeout(state.showTimer);
clearTimeout(state.feedbackTimer);
state.level = 1;
state.round = 0;
state.score = 0;
state.streak = 0;
state.totalCorrect = 0;
state.totalAttempts = 0;
state.selectedColors = [];
state.selectedPositions = [];
state.colorSequence = [];
state.positionSequence = [];
runHistory.clear();
}

function initInstructions() {
var best = getBestScore();
$('sr-best-value').textContent = best;
GK.renderChallengeBanner('sr-challenge-banner-wrap', challenge);
showScreen('instructions');
}


$('sr-close-btn').addEventListener('click', function() {
$('sr-best-value').textContent = getBestScore();
showScreen('instructions');
});

$('sr-finish-btn').addEventListener('click', function() {
endGame();
});

$('sr-start-btn').addEventListener('click', function() {
resetGame();
showWizard(function() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sr-playing', challenge);
startRound();
});
});

$('sr-play-again-btn').addEventListener('click', function() {
resetGame();
showWizard(function() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sr-playing', challenge);
startRound();
});
});

$('sr-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

$('sr-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Sequence Recall', '/fr/games/sequence-recall/', 'sr-share-copied');
});

initInstructions();
})();
</script>

### Speed Match - Jeu d'Entraînement Cérébral
URL: https://guruka.com/fr/games/speed-match/
Description: Comparez vite les symboles.

<style>
#speed-match-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #speed-match-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#sm-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.sm-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#sm-instructions .sm-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#sm-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#sm-instructions .sm-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #sm-instructions .sm-subtitle {
color: var(--color-dark-text-secondary);
}

#sm-instructions .sm-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #sm-instructions .sm-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#sm-instructions .sm-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#sm-instructions .sm-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#sm-instructions .sm-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.sm-kbd-hints {
display: flex;
gap: 1.5rem;
justify-content: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}

.sm-kbd-hint {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-kbd-hint {
color: var(--color-dark-text-secondary);
}

.sm-kbd {
display: inline-block;
padding: 0.15rem 0.5rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.25rem;
font-family: monospace;
font-size: 0.8rem;
font-weight: 600;
}

[data-theme="dark"] .sm-kbd {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.sm-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.sm-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.sm-btn-primary:hover {
background: var(--color-primary-hover);
}

.sm-btn-primary:active {
transform: scale(0.97);
}

.sm-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.sm-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .sm-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#sm-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#sm-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sm-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #sm-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes sm-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.sm-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.sm-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.sm-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .sm-wizard-desc {
color: var(--color-dark-text-secondary);
}
.sm-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.sm-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.sm-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"] .sm-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .sm-wizard-dot.active {
background: var(--color-primary);
}
.sm-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.sm-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#sm-wizard-card {
padding: 1.5rem 1rem;
}
.sm-wizard-icon {
font-size: 2rem;
}
.sm-wizard-title {
font-size: 1.1rem;
}
.sm-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#sm-playing {
display: none;
flex: 1;
flex-direction: column;
}

.sm-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .sm-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-stat {
text-align: center;
}

.sm-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .sm-stat-label {
color: var(--color-dark-text-secondary);
}

.sm-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.sm-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.sm-level-text {
font-weight: 600;
}

.sm-nback-badge {
background: var(--color-primary);
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.sm-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .sm-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.sm-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .sm-timer-bar {
background: var(--color-dark-bg-secondary);
}

.sm-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.sm-timer-fill.sm-timer-warning {
background: #ef4444;
}

/* ── Symbol Display ── */
.sm-symbol-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
}

.sm-symbol {
font-size: 7rem;
line-height: 1;
transition: transform 0.15s ease;
animation: sm-symbol-enter 0.2s ease-out;
}

@keyframes sm-symbol-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.sm-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.sm-feedback-flash.sm-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.sm-feedback-flash.sm-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.sm-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.sm-feedback-icon.sm-show-check {
animation: sm-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.sm-feedback-icon.sm-show-x {
animation: sm-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes sm-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Action Buttons ── */
.sm-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.sm-action-btn {
flex: 1;
padding: 1rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
background: var(--color-bg-primary);
color: var(--color-text-primary);
}

[data-theme="dark"] .sm-action-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.sm-action-btn:active {
transform: scale(0.95);
}

.sm-action-btn:disabled {
opacity: 0.45;
cursor: default;
transform: none;
}

.sm-action-btn .sm-btn-icon {
font-size: 1.5rem;
}

.sm-action-btn .sm-btn-kbd {
font-size: 0.65rem;
color: var(--color-text-secondary);
font-weight: 400;
}

[data-theme="dark"] .sm-action-btn .sm-btn-kbd {
color: var(--color-dark-text-secondary);
}

.sm-btn-different {
border-color: #ef4444;
}

.sm-btn-different:hover {
background: rgba(239, 68, 68, 0.08);
}

[data-theme="dark"] .sm-btn-different:hover {
background: rgba(239, 68, 68, 0.15);
}

.sm-btn-same {
border-color: #22c55e;
}

.sm-btn-same:hover {
background: rgba(34, 197, 94, 0.08);
}

[data-theme="dark"] .sm-btn-same:hover {
background: rgba(34, 197, 94, 0.15);
}

.sm-playing-kbd-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-playing-kbd-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#sm-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#sm-pause-overlay .sm-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#sm-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.sm-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sm-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .sm-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes sm-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.sm-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.sm-complete-card .sm-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.sm-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.sm-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: sm-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes sm-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.sm-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.sm-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .sm-complete-stat {
background: var(--color-dark-bg-secondary);
}

.sm-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.sm-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.sm-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.sm-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .sm-back-link {
color: var(--color-dark-text-secondary);
}

.sm-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.sm-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.sm-level-up-toast.sm-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#speed-match-game {
padding: 0.5rem;
}
.sm-symbol {
font-size: 5rem;
}
.sm-action-btn {
padding: 0.75rem;
font-size: 1rem;
}
.sm-header {
padding: 0.5rem;
gap: 0.25rem;
}
.sm-stat-value {
font-size: 1rem;
}
#sm-instructions { padding: 0.75rem 0.5rem; }
#sm-instructions .sm-icon { font-size: 2rem; margin-bottom: 0; }
#sm-instructions h2 { font-size: 1.3rem; }
#sm-instructions .sm-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#sm-instructions .sm-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#sm-instructions .sm-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.sm-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#speed-match-game {
padding: 0.75rem;
}
.sm-symbol {
font-size: 6rem;
}
.sm-action-btn {
padding: 0.875rem;
}
}
@media (max-width: 360px) {
.sm-symbol {
font-size: 4rem;
}
.sm-action-btn {
padding: 0.625rem;
font-size: 0.9rem;
}
.sm-complete-stats {
grid-template-columns: 1fr 1fr;
}
.sm-final-score {
font-size: 2rem;
}
.sm-header {
padding: 0.375rem;
}
.sm-stat-value {
font-size: 0.9rem;
}
}
@keyframes sm-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.sm-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.sm-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: sm-confetti-fall 2.5s ease-in forwards;
}
.sm-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: sm-glow-fade 1s ease-out forwards;
}
@keyframes sm-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.sm-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: sm-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes sm-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#speed-match-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#speed-match-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #speed-match-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#speed-match-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#speed-match-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="speed-match-game">

<div id="sm-instructions">
<div class="sm-title-row"><span class="sm-icon">&#9889;</span><h2>Speed Match</h2></div>
<p class="sm-subtitle">À quelle vitesse pouvez-vous traiter ?</p>
<div class="sm-how-to">
<h3>Comment Jouer</h3>
<ol>
<li>Un symbole apparaît à l'écran à chaque manche.</li>
<li>Décidez s'il <strong>correspond</strong> au symbole de la manche précédente.</li>
<li>Cliquez sur <strong>Identique</strong> s'il correspond, <strong>Différent</strong> sinon.</li>
<li>Répondez avant la fin du temps imparti ou cela compte comme faux !</li>
<li>En montant de niveau, le jeu devient plus rapide et plus difficile.</li>
</ol>
</div>
<div class="sm-kbd-hints">
<span class="sm-kbd-hint"><span class="sm-kbd">1</span> Différent</span>
<span class="sm-kbd-hint"><span class="sm-kbd">2</span> Identique</span>
<span class="sm-kbd-hint"><span class="sm-kbd">Esc</span> Pause</span>
</div>
<div id="sm-best-display" class="sm-personal-best" style="display:none;">
Meilleur Score : <strong id="sm-best-score">0</strong> points
</div>
<button class="sm-btn-primary" id="sm-start-btn">Commencer</button>
<div id="sm-challenge-banner-wrap"></div>
</div>

<div id="sm-wizard">
<div id="sm-wizard-card"></div>
</div>

<div id="sm-playing">
<div class="sm-header">
<div class="sm-stat">
<div class="sm-stat-label">Score</div>
<div class="sm-stat-value" id="sm-score">0</div>
</div>
<div class="sm-stat">
<div class="sm-stat-label">Série</div>
<div class="sm-stat-value" id="sm-streak">0</div>
</div>
<div class="sm-stat">
<div class="sm-stat-label">Niveau</div>
<div class="sm-stat-value" id="sm-level">1</div>
</div>
</div>
<div class="sm-level-info">
<span class="sm-level-text">Niveau <span id="sm-level-text">1</span></span>
<span class="sm-nback-badge" id="sm-nback-badge">1-Back</span>
</div>
<div class="sm-progress-bar">
<div class="sm-progress-fill" id="sm-progress-fill" style="width:0%"></div>
</div>
<div class="sm-timer-bar">
<div class="sm-timer-fill" id="sm-timer-fill" style="width:100%"></div>
</div>
<div class="sm-symbol-area">
<div class="sm-feedback-flash" id="sm-feedback-flash"></div>
<div class="sm-feedback-icon" id="sm-feedback-icon"></div>
<div class="sm-symbol" id="sm-symbol"></div>
</div>
<div class="sm-actions">
<button class="sm-action-btn sm-btn-different" id="sm-btn-different">
<span class="sm-btn-icon">&#10007;</span>
<span>Différent</span>
<span class="sm-btn-kbd">1</span>
</button>
<button class="sm-action-btn sm-btn-same" id="sm-btn-same">
<span class="sm-btn-icon">&#10003;</span>
<span>Identique</span>
<span class="sm-btn-kbd">2</span>
</button>
</div>
<div class="sm-playing-kbd-hint">Appuyez sur <strong>Esc</strong> pour mettre en pause</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="sm-pause-btn" type="button">Pause</button>
<button class="gk-finish-btn" id="sm-finish-btn" type="button">Terminer</button>
</div>
</div>

<div id="sm-pause-overlay">
<div class="sm-pause-text">En Pause</div>
<button class="sm-btn-primary" id="sm-resume-btn">Reprendre</button>
</div>

<div id="sm-complete-overlay">
<div class="sm-complete-card">
<button class="gk-complete-close" id="sm-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="sm-trophy">&#127942;</div>
<h2>Partie Terminée !</h2>
<div class="sm-final-score" id="sm-final-score">0</div>
<div id="sm-new-best" class="sm-new-best" style="display:none;">&#11088; Nouveau Record !</div>
<div class="gk-challenge-result" id="sm-challenge-result" style="display:none;"></div>
<div class="sm-complete-stats">
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Niveau</div>
<div class="sm-complete-stat-value" id="sm-final-level">1</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Précision</div>
<div class="sm-complete-stat-value" id="sm-final-accuracy">0%</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Meilleure Série</div>
<div class="sm-complete-stat-value" id="sm-final-streak">0</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Meilleur Score</div>
<div class="sm-complete-stat-value" id="sm-final-best">0</div>
</div>
</div>
<div class="sm-complete-actions">
<button class="sm-btn-primary" id="sm-play-again-btn">Encore</button>
<button class="gk-runtime-history-toggle" id="sm-history-toggle" type="button">Show History</button>
<a href="/fr/games/" class="sm-back-link">&larr; Tous les Jeux</a>
</div>
<div class="gk-runtime-history-panel" id="sm-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="sm-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="sm-share-btn">&#128279; Partager votre Score</button>
<div class="gk-share-copied" id="sm-share-copied" style="display:none;">Lien copié !</div>
</div>
</div>
</div>

<div class="sm-level-up-toast" id="sm-level-toast">Niveau Supérieur !</div>

</div>

<script>
(function() {
"use strict";

var SYMBOLS = ['\u25C6', '\u25CF', '\u25A0', '\u25B2', '\u2605', '\u2666', '\u2660', '\u2663', '\u2665', '\u2B1F', '\u2B21', '\u25EF'];
var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_speed-match_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('sm-history-toggle', 'sm-history-panel', 'sm-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
symbolHistory: [],
currentSymbol: '',
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('sm-instructions');
var elWizard = document.getElementById('sm-wizard');
var elWizardCard = document.getElementById('sm-wizard-card');
var elPlaying = document.getElementById('sm-playing');
var elPauseOverlay = document.getElementById('sm-pause-overlay');
var elCompleteOverlay = document.getElementById('sm-complete-overlay');
var elScore = document.getElementById('sm-score');
var elStreak = document.getElementById('sm-streak');
var elLevel = document.getElementById('sm-level');
var elLevelText = document.getElementById('sm-level-text');
var elNbackBadge = document.getElementById('sm-nback-badge');
var elProgressFill = document.getElementById('sm-progress-fill');
var elTimerFill = document.getElementById('sm-timer-fill');
var elSymbol = document.getElementById('sm-symbol');
var elFeedbackFlash = document.getElementById('sm-feedback-flash');
var elFeedbackIcon = document.getElementById('sm-feedback-icon');
var elFinalScore = document.getElementById('sm-final-score');
var elNewBest = document.getElementById('sm-new-best');
var elFinalLevel = document.getElementById('sm-final-level');
var elFinalAccuracy = document.getElementById('sm-final-accuracy');
var elFinalStreak = document.getElementById('sm-final-streak');
var elFinalBest = document.getElementById('sm-final-best');
var elBestDisplay = document.getElementById('sm-best-display');
var elBestScore = document.getElementById('sm-best-score');
var elLevelToast = document.getElementById('sm-level-toast');
var btnStart = document.getElementById('sm-start-btn');
var btnDifferent = document.getElementById('sm-btn-different');
var btnSame = document.getElementById('sm-btn-same');
var btnResume = document.getElementById('sm-resume-btn');
var btnPlayAgain = document.getElementById('sm-play-again-btn');

/* ── Level parameters ── */
function getNBack(lvl) {
return lvl <= 10 ? 1 : 2;
}

function getDisplayTime(lvl) {
return Math.max(2500 - lvl * 100, 800);
}

function getSymbolCount(lvl) {
return Math.min(6 + Math.floor(lvl / 3), 12);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Pick a random symbol ── */
function pickSymbol() {
var count = getSymbolCount(state.level);
var pool = SYMBOLS.slice(0, count);
return pool[Math.floor(Math.random() * pool.length)];
}

/* ── Determine if current symbol matches nBack ── */
function isMatch() {
var nBack = getNBack(state.level);
var idx = state.symbolHistory.length - 1 - nBack;
if (idx < 0) return false;
return state.symbolHistory[idx] === state.currentSymbol;
}

function hasComparisonTarget() {
return state.symbolHistory.length > getNBack(state.level);
}

function setAnswerButtonsEnabled(enabled) {
btnDifferent.disabled = !enabled;
btnSame.disabled = !enabled;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
var nBack = getNBack(state.level);
elNbackBadge.textContent = nBack + '-Back';
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('sm-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('sm-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('sm-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'sm-feedback-flash';
elFeedbackIcon.className = 'sm-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('sm-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('sm-show-check');
} else {
elFeedbackFlash.classList.add('sm-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('sm-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'sm-feedback-flash';
elFeedbackIcon.className = 'sm-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Niveau ' + level + ' !';
elLevelToast.classList.add('sm-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('sm-toast-show');
}, 1500);
}

function expectedSameForCurrentRound() {
if (!hasComparisonTarget()) return false;
return isMatch();
}

function sameLabel(value) {
if (value === null || value === undefined) return 'No answer';
return value ? 'Same' : 'Different';
}

function recordSpeedHistory(userSaidSame, correct) {
var expected = expectedSameForCurrentRound();
var html = '<strong>' + runHistory.escape(getNBack(state.level) + '-Back') + '</strong>';
html += '<div class="gk-runtime-history-sub">Symbol: ' + runHistory.escape(state.currentSymbol) + '</div>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(sameLabel(userSaidSame)) + ' | Correct: ' + runHistory.escape(sameLabel(expected)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(userSaidSame) {
if (state.answered || state.gameOver || !hasComparisonTarget()) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var matchResult = isMatch();
var correct = (userSaidSame === matchResult);

state.totalAnswered++;
recordSpeedHistory(userSaidSame, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.symbolHistory = [];
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;

if (!hasComparisonTarget()) {
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 150);
return;
}
state.totalAnswered++;
state.streak = 0;
recordSpeedHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.symbolHistory = [];
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;
state.currentSymbol = pickSymbol();
state.symbolHistory.push(state.currentSymbol);

elSymbol.textContent = state.currentSymbol;
elSymbol.style.animation = 'none';
void elSymbol.offsetWidth;
elSymbol.style.animation = '';

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();
setAnswerButtonsEnabled(hasComparisonTarget());

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'sm-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'sm-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'sm-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.sm-trophy');
var title = document.querySelector('#sm-complete-overlay .sm-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'INCROYABLE !';
elNewBest.className = 'sm-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F INCROYABLE ! Nouveau Record !';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Bien Joué !';
elNewBest.className = 'sm-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('sm-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
/* Restart the current round's timer with full time */
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var SM_WIZARD_STEPS = [
{icon: '\u2728', title: 'Un symbole apparaît à l\'écran', desc: 'Chaque manche affiche un symbole. Observez-le !'},
{icon: '\u2194\uFE0F', title: 'Identique ou Différent ?', desc: 'Correspond-il au précédent ? Appuyez pour répondre.'},
{icon: '\u26A1', title: 'Vite', desc: 'Réagissez avant la fin du temps.', final: true}
];
var smWizardStep = 0;

function renderWizardStep() {
var s = SM_WIZARD_STEPS[smWizardStep];
var dotsHtml = '';
for (var i = 0; i < SM_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="sm-wizard-dot' + (i === smWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Commencer à Jouer' : 'Suivant';
elWizardCard.innerHTML =
'<div class="sm-wizard-icon">' + s.icon + '</div>' +
'<div class="sm-wizard-title">' + s.title + '</div>' +
'<div class="sm-wizard-desc">' + s.desc + '</div>' +
'<div class="sm-wizard-dots">' + dotsHtml + '</div>' +
'<button class="sm-wizard-btn" id="sm-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'sm-wizard-enter 0.3s ease-out';
document.getElementById('sm-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (smWizardStep < SM_WIZARD_STEPS.length - 1) {
smWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
smWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.symbolHistory = [];
state.currentSymbol = '';
runHistory.clear();
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sm-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('sm-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

btnDifferent.addEventListener('click', function() {
processAnswer(false);
});

btnSame.addEventListener('click', function() {
processAnswer(true);
});

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('sm-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('sm-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('sm-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('sm-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Speed Match', '/fr/games/speed-match/', 'sm-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key === '1') {
e.preventDefault();
processAnswer(false);
} else if (e.key === '2') {
e.preventDefault();
processAnswer(true);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('sm-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Aurore - Visuel avec Affirmations
URL: https://guruka.com/fr/visuals/aurora/
Description: Bandes de couleurs d'aurores boréales traversant l'écran. Ajoutez votre propre texte d'affirmation, stocké en privé dans votre navigateur.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #020810;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/fr/visuals/" class="vp-back">&larr; Tous les Visuels</a>
<h1 class="vp-title">Aurore</h1>
<p class="vp-desc">Lumières du nord fluides.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#22d3ee,#10b981)"></div>
<span>Arctique</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#a855f7,#ec4899)"></div>
<span>Cosmique</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f472b6,#eab308)"></div>
<span>Aube</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texte d'affirmation (optionnel)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">préréglages <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optionnel. Entrez vos affirmations ici. Le texte s'affichera ligne par ligne."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Rythme <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Démarrer</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Appuyez n'importe où pour quitter</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'aurora';
var currentAffId = null;
var paceLabels = ["Très lent","Lent","Normal","Rapide","Très rapide"];
var currentPace = 2;
var schemes = [
{ name:'Arctic', bg:'#020810',
bands:[
{colors:['#22d3ee','#06b6d4'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#10b981','#059669'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#22d3ee','#14b8a6'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#34d399','#06b6d4'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#67e8f9','#a7f3d0'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]},
{ name:'Cosmic', bg:'#0a0510',
bands:[
{colors:['#a855f7','#7c3aed'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#ec4899','#be185d'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#c084fc','#e879f9'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#8b5cf6','#d946ef'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#f0abfc','#c4b5fd'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]},
{ name:'Dawn', bg:'#100805',
bands:[
{colors:['#f472b6','#fb923c'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#eab308','#f59e0b'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#fb7185','#fbbf24'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#f9a8d4','#fcd34d'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#fda4af','#fde68a'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]}
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var offCanvas, offCtx, halfW, halfH;

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Aucun',text:''},
{title:'Calme et clarté',text:'Mon esprit est calme et clair\nJe libère ce que je ne peux pas contrôler\nJe suis présent dans ce moment'},
{title:'Confiance en soi',text:'Je crois en moi et en mes capacités\nJe mérite de bonnes choses\nJe deviens plus fort chaque jour'},
{title:'Lâcher prise',text:'Je libère ce qui ne me sert plus\nJe me pardonne et pardonne aux autres\nJe fais de la place pour la paix'},
{title:'Gratitude',text:'Je suis reconnaissant pour ce moment\nL\'abondance coule dans ma vie\nJ\'apprécie les choses simples'},
{title:'Focus et énergie',text:'Ma concentration est vive et stable\nJe canalise mon énergie avec intention\nJ\'avance avec détermination'},
{title:'Sommeil et repos',text:'Je me donne la permission de me reposer\nMon corps se détend à chaque respiration\nJe glisse vers un sommeil paisible'},
{title:'Arrêter de fumer',text:'Mes poumons sont plus propres chaque jour\nJe suis plus fort que toute envie\nChaque respiration est une victoire'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Effacer le texte') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var time = t / 1000;

// Parse background color for smoothstep
var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);

if (reducedMotion) {
ctx.globalAlpha = 1;
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);
for (var b = 0; b < s.bands.length; b++) {
var band = s.bands[b];
var y = H * band.baseY;
var grad = ctx.createLinearGradient(0, y - H * 0.1, 0, y + H * 0.15);
grad.addColorStop(0, band.colors[0] + '00');
grad.addColorStop(0.3, band.colors[0] + hexAlpha(band.alpha));
grad.addColorStop(0.7, band.colors[1] + hexAlpha(band.alpha * 0.7));
grad.addColorStop(1, band.colors[1] + '00');
ctx.shadowColor = band.colors[0];
ctx.shadowBlur = 15;
ctx.fillStyle = grad;
ctx.fillRect(0, y - H * 0.1, W, H * 0.25);
}
ctx.shadowBlur = 0;
return;
}

var scaleX = halfW / W, scaleY = halfH / H;

// 1. Clear offscreen with background
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// 2. Draw bands on offscreen with 'screen' compositing
offCtx.save();
offCtx.globalCompositeOperation = 'screen';

for (var b = 0; b < s.bands.length; b++) {
var band = s.bands[b];
var pulse = 0.75 + 0.25 * Math.sin(time * 0.08 + b * 0.7);
var vertOsc = Math.sin(time * 0.04 + b * 1.1) * 0.04;
offCtx.beginPath();

var baseY = halfH * (band.baseY + vertOsc);
var amp = halfH * band.amp;
for (var x = 0; x <= halfW; x += 3) {
var realX = x / scaleX;
var noise1 = Math.sin(realX * band.freq + time * band.speed);
var noise2 = Math.sin(realX * band.freq * 1.7 + time * band.speed * 0.6 + 2.1);
var noise3 = Math.sin(realX * band.freq * 0.5 + time * band.speed * 1.3 + 4.3);
var y = baseY + amp * (noise1 * 0.5 + noise2 * 0.3 + noise3 * 0.2);
if (x === 0) offCtx.moveTo(x, y);
else offCtx.lineTo(x, y);
}

offCtx.lineTo(halfW, halfH * (band.baseY + vertOsc + 0.25));
offCtx.lineTo(0, halfH * (band.baseY + vertOsc + 0.25));
offCtx.closePath();

var grad = offCtx.createLinearGradient(0, baseY - amp, 0, baseY + halfH * 0.25);
grad.addColorStop(0, band.colors[0] + hexAlpha(band.alpha * 0.3 * pulse));
grad.addColorStop(0.3, band.colors[0] + hexAlpha(band.alpha * pulse));
grad.addColorStop(0.7, band.colors[1] + hexAlpha(band.alpha * 0.6 * pulse));
grad.addColorStop(1, band.colors[1] + '00');
offCtx.fillStyle = grad;
offCtx.fill();
}

offCtx.restore();

// 3. Smoothstep threshold on offscreen pixel data
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// 4. Upscale to main canvas with smoothing
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

// 5. Draw stars on main canvas at full resolution (stays crisp)
for (var i = 0; i < 60; i++) {
var sx = (Math.sin(i * 127.1 + 311.7) * 0.5 + 0.5) * W;
var sy = (Math.sin(i * 269.5 + 183.3) * 0.5 + 0.5) * H * 0.6;
var sa = 0.2 + 0.3 * Math.abs(Math.sin(time * 0.5 + i));
ctx.beginPath();
ctx.arc(sx, sy, 0.8, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,255,255,' + sa + ')';
ctx.fill();
}

animId = requestAnimationFrame(draw);
}

function hexAlpha(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Mouvement réduit activé · Affichage statique<br>Appuyez n'importe où pour quitter';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Orbe de Respiration - Visuel avec Affirmations
URL: https://guruka.com/fr/visuals/breathing-orb/
Description: Un orbe pulsant qui guide votre rythme respiratoire. Ajoutez votre propre texte d'affirmation, stocké en privé dans votre navigateur.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0a0a1a;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/fr/visuals/" class="vp-back">&larr; Tous les Visuels</a>
<h1 class="vp-title">Orbe de Respiration</h1>
<p class="vp-desc">Orbe pulsant guidant votre respiration.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#4338ca,#7c3aed)"></div>
<span>Crépuscule</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f97316,#eab308)"></div>
<span>Lever de Soleil</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#059669,#14b8a6)"></div>
<span>Forêt</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texte d'affirmation (optionnel)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">préréglages <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optionnel. Entrez vos affirmations ici. Le texte s'affichera ligne par ligne."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Rythme <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Démarrer</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Appuyez n'importe où pour quitter</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'breathing-orb';
var currentAffId = null;
var paceLabels = ["Très lent","Lent","Normal","Rapide","Très rapide"];
var currentPace = 2;
var schemes = [
{ name:'Twilight', bg:'#0a0a1a', orb:['#6366f1','#a78bfa','#4338ca'], particle:'#c4b5fd' },
{ name:'Sunrise', bg:'#1a0a05', orb:['#f97316','#eab308','#dc2626'], particle:'#fcd34d' },
{ name:'Forest', bg:'#051a0a', orb:['#059669','#14b8a6','#065f46'], particle:'#6ee7b7' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

// Scheme buttons
var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Aucun',text:''},
{title:'Calme et clarté',text:'Mon esprit est calme et clair\nJe libère ce que je ne peux pas contrôler\nJe suis présent dans ce moment'},
{title:'Confiance en soi',text:'Je crois en moi et en mes capacités\nJe mérite de bonnes choses\nJe deviens plus fort chaque jour'},
{title:'Lâcher prise',text:'Je libère ce qui ne me sert plus\nJe me pardonne et pardonne aux autres\nJe fais de la place pour la paix'},
{title:'Gratitude',text:'Je suis reconnaissant pour ce moment\nL\'abondance coule dans ma vie\nJ\'apprécie les choses simples'},
{title:'Focus et énergie',text:'Ma concentration est vive et stable\nJe canalise mon énergie avec intention\nJ\'avance avec détermination'},
{title:'Sommeil et repos',text:'Je me donne la permission de me reposer\nMon corps se détend à chaque respiration\nJe glisse vers un sommeil paisible'},
{title:'Arrêter de fumer',text:'Mes poumons sont plus propres chaque jour\nJe suis plus fort que toute envie\nChaque respiration est une victoire'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Effacer le texte') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

// Particles
var particles = [];
function initParticles() {
particles = [];
for (var i = 0; i < 100; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
r: 1 + Math.random() * 2.5,
vx: (Math.random() - 0.5) * 0.2,
vy: (Math.random() - 0.5) * 0.2,
phase: Math.random() * Math.PI * 2
});
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running && particles.length === 0) initParticles();
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var cx = W / 2, cy = H / 2;

// Background
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);

// Breathing cycle: 6 seconds
var breathT = t / 1000;
var breathPhase = Math.sin(breathT * Math.PI / 6); // -1 to 1, 12s cycle
var scale = 0.85 + 0.15 * breathPhase;

var baseR = Math.min(W, H) * 0.12;
var orbR = baseR * scale;

// Orb glow layers
for (var g = 3; g >= 0; g--) {
var glowR = orbR * (1 + g * 0.6);
var grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, glowR);
var alpha = (0.08 - g * 0.015);
if (alpha < 0) alpha = 0;
grad.addColorStop(0, s.orb[0] + hexAlpha(alpha + 0.05));
grad.addColorStop(0.5, s.orb[1] + hexAlpha(alpha));
grad.addColorStop(1, s.orb[2] + '00');
ctx.beginPath();
ctx.arc(cx, cy, glowR, 0, Math.PI * 2);
ctx.fillStyle = grad;
ctx.fill();
}

// Core orb
var coreGrad = ctx.createRadialGradient(cx - orbR * 0.2, cy - orbR * 0.2, orbR * 0.1, cx, cy, orbR);
coreGrad.addColorStop(0, s.orb[1]);
coreGrad.addColorStop(0.7, s.orb[0]);
coreGrad.addColorStop(1, s.orb[2]);
ctx.beginPath();
ctx.arc(cx, cy, orbR, 0, Math.PI * 2);
ctx.fillStyle = coreGrad;
ctx.globalAlpha = 0.9;
ctx.fill();
ctx.globalAlpha = 1;

// Particles
if (!reducedMotion) {
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
// Drift toward/away from orb matching breath
var dx = p.x - cx, dy = p.y - cy;
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
var breathPull = breathPhase * 0.15;
p.x += p.vx + (dx / dist) * breathPull;
p.y += p.vy + (dy / dist) * breathPull;

// Wrap around
if (p.x < 0) p.x = W;
if (p.x > W) p.x = 0;
if (p.y < 0) p.y = H;
if (p.y > H) p.y = 0;

// Twinkle
var twinkle = 0.3 + 0.7 * Math.abs(Math.sin(breathT * 0.4 + p.phase));
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fillStyle = s.particle;
ctx.globalAlpha = twinkle * 0.6;
ctx.fill();
}
ctx.globalAlpha = 1;
} else {
// Reduced motion: static orb only, no particles
}

animId = requestAnimationFrame(draw);
}

function hexAlpha(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initParticles();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Mouvement réduit activé · Affichage statique<br>Appuyez n'importe où pour quitter';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Cellules en Division - Visuel avec Affirmations
URL: https://guruka.com/fr/visuals/dividing-cells/
Description: Cellules grandissant et se divisant dans une boucle méditative. Ajoutez votre propre texte d'affirmation, stocké en privé dans votre navigateur.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"].vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"].vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #050a12;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme,.vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"].vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"].vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"].vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"].vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"].vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header.vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"].vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"].vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"].vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"].vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/fr/visuals/" class="vp-back">&larr; Tous les Visuels</a>
<h1 class="vp-title">Cellules en Division</h1>
<p class="vp-desc">Cellules se divisant sans fin.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#22d3ee,#14b8a6)"></div>
<span>Bioluminescent</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#fb923c,#f97316)"></div>
<span>Organique</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#94a3b8,#e2e8f0)"></div>
<span>Microscope</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texte d'affirmation (optionnel)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">préréglages <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optionnel. Entrez vos affirmations ici. Le texte s'affichera ligne par ligne."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Rythme <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Démarrer</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Appuyez n'importe où pour quitter</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'dividing-cells';
var currentAffId = null;
var paceLabels = ["Très lent","Lent","Normal","Rapide","Très rapide"];
var currentPace = 2;
var schemes = [
{ name:'Bioluminescent', bg:'#050a12',
colors:['#22d3ee','#14b8a6','#06b6d4','#2dd4bf','#67e8f9','#5eead4'] },
{ name:'Organic', bg:'#0a0808',
colors:['#fb923c','#f97316','#fbbf24','#f59e0b','#fdba74','#fcd34d'] },
{ name:'Microscope', bg:'#020508',
colors:['#94a3b8','#cbd5e1','#64748b','#e2e8f0','#475569','#f1f5f9'] }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var maxVisible = 8;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var offCanvas, offCtx, halfW, halfH;

// State
var centerCell = null; // the cell currently growing/dividing at center
var daughters = []; // drifting daughter cells
var cycleState = 'GROWING_AT_CENTER'; // GROWING_AT_CENTER, DIVIDING, STAGING_PAUSE
var pauseTimer = 0;
var nextId = 0;

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Aucun',text:''},
{title:'Calme et clarté',text:'Mon esprit est calme et clair\nJe libère ce que je ne peux pas contrôler\nJe suis présent dans ce moment'},
{title:'Confiance en soi',text:'Je crois en moi et en mes capacités\nJe mérite de bonnes choses\nJe deviens plus fort chaque jour'},
{title:'Lâcher prise',text:'Je libère ce qui ne me sert plus\nJe me pardonne et pardonne aux autres\nJe fais de la place pour la paix'},
{title:'Gratitude',text:'Je suis reconnaissant pour ce moment\nL\'abondance coule dans ma vie\nJ\'apprécie les choses simples'},
{title:'Focus et énergie',text:'Ma concentration est vive et stable\nJe canalise mon énergie avec intention\nJ\'avance avec détermination'},
{title:'Sommeil et repos',text:'Je me donne la permission de me reposer\nMon corps se détend à chaque respiration\nJe glisse vers un sommeil paisible'},
{title:'Arrêter de fumer',text:'Mes poumons sont plus propres chaque jour\nJe suis plus fort que toute envie\nChaque respiration est une victoire'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Effacer le texte') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
}

function makeOrganelles() {
var orgs = [];
var count = 2 + Math.floor(Math.random() * 2);
for (var i = 0; i < count; i++) {
orgs.push({
dist: 0.3 + Math.random() * 0.35,
angle: Math.random() * Math.PI * 2,
speed: (0.0003 + Math.random() * 0.0004) * (Math.random() < 0.5 ? 1 : -1),
size: 0.06 + Math.random() * 0.04
});
}
return orgs;
}

function spawnCenterCell() {
var W = canvas.width, H = canvas.height;
var minDim = Math.min(W, H);
var targetR = minDim * (0.06 + Math.random() * 0.02);
centerCell = {
id: nextId++,
x: W / 2,
y: H / 2,
r: targetR * 0.15,
targetR: targetR,
divAngle: Math.random() * Math.PI * 2,
colorIdx: Math.floor(Math.random() * 6),
divProgress: 0,
organelles: makeOrganelles(),
opacity: 0.7,
growTimer: 0
};
cycleState = 'GROWING_AT_CENTER';
}

function spawnDaughter(x, y, r, angle, colorIdx, organelles) {
daughters.push({
id: nextId++,
x: x,
y: y,
r: r,
vx: Math.cos(angle) * 0.15,
vy: Math.sin(angle) * 0.15,
phase: Math.random() * Math.PI * 2,
colorIdx: colorIdx,
organelles: organelles,
opacity: 1,
age: 0,
fading: false,
fadeAge: 0
});
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var scaleX = halfW / W, scaleY = halfH / H, scaleR = Math.min(scaleX, scaleY);

var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);

if (reducedMotion) {
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);
offCtx.globalCompositeOperation = 'lighter';
// Draw a center cell mid-division and a couple daughters
var midR = Math.min(W, H) * 0.07;
var ci = 0;
// Two sub-blobs for figure-8
var sep = midR * 0.6;
var a = Math.PI * 0.25;
for (var bi = 0; bi < 2; bi++) {
var bx = (W / 2 + Math.cos(a) * sep * (bi === 0 ? 1 : -1)) * scaleX;
var by = (H / 2 + Math.sin(a) * sep * (bi === 0 ? 1 : -1)) * scaleY;
var br = midR * 0.7 * scaleR;
var grad = offCtx.createRadialGradient(bx, by, 0, bx, by, br * 1.8);
grad.addColorStop(0, s.colors[ci] + 'ff');
grad.addColorStop(0.5, s.colors[ci] + 'cc');
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(bx, by, br * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
// Two static daughters
var dPositions = [[W * 0.25, H * 0.35], [W * 0.72, H * 0.65]];
for (var di = 0; di < 2; di++) {
var dx = dPositions[di][0] * scaleX, dy = dPositions[di][1] * scaleY;
var dr = midR * 0.5 * scaleR;
var grad = offCtx.createRadialGradient(dx, dy, 0, dx, dy, dr * 1.8);
grad.addColorStop(0, s.colors[2] + 'cc');
grad.addColorStop(0.5, s.colors[2] + '99');
grad.addColorStop(1, s.colors[2] + '00');
offCtx.beginPath();
offCtx.arc(dx, dy, dr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
offCtx.globalCompositeOperation = 'source-over';
// Smoothstep
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) { d[j + 3] = 255; }
else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else { d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255; }
}
offCtx.putImageData(imgData, 0, 0);
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);
// Draw nuclei on the two figure-8 blobs
for (var bi = 0; bi < 2; bi++) {
var nx = W / 2 + Math.cos(a) * sep * (bi === 0 ? 1 : -1);
var ny = H / 2 + Math.sin(a) * sep * (bi === 0 ? 1 : -1);
drawNucleus(nx, ny, midR * 0.7, s, ci, t, true);
}
for (var di = 0; di < 2; di++) {
drawNucleus(dPositions[di][0], dPositions[di][1], midR * 0.5, s, 2, t, true);
}
return;
}

// --- UPDATE LOGIC ---

// Force-fade oldest daughters if over max
while (daughters.length > maxVisible) {
var oldest = daughters[0];
oldest.fading = true;
oldest.opacity -= 0.05;
if (oldest.opacity <= 0) daughters.shift();
else break;
}

// Update daughters
for (var i = daughters.length - 1; i >= 0; i--) {
var dc = daughters[i];
dc.age++;

// Sinusoidal wobble drift
dc.x += dc.vx + Math.sin(t * 0.0002 + dc.phase) * 0.06;
dc.y += dc.vy + Math.cos(t * 0.00015 + dc.phase + 1) * 0.06;
dc.vx *= 0.997;
dc.vy *= 0.997;

// Soft boundary bounce
if (dc.x - dc.r < 0) { dc.x = dc.r; dc.vx = Math.abs(dc.vx) * 0.5; }
if (dc.x + dc.r > W) { dc.x = W - dc.r; dc.vx = -Math.abs(dc.vx) * 0.5; }
if (dc.y - dc.r < 0) { dc.y = dc.r; dc.vy = Math.abs(dc.vy) * 0.5; }
if (dc.y + dc.r > H) { dc.y = H - dc.r; dc.vy = -Math.abs(dc.vy) * 0.5; }

// Start fading after ~18 seconds (1080 frames at 60fps)
if (dc.age > 1080 && !dc.fading) dc.fading = true;
if (dc.fading) {
dc.opacity -= 0.003;
if (dc.opacity <= 0) { daughters.splice(i, 1); continue; }
}
}

// Daughter-daughter repulsion
for (var i = 0; i < daughters.length; i++) {
for (var j = i + 1; j < daughters.length; j++) {
var a = daughters[i], b = daughters[j];
var dx = b.x - a.x, dy = b.y - a.y;
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
var minDist = a.r + b.r + 6;
if (dist < minDist) {
var force = (minDist - dist) * 0.015;
var nx = dx / dist, ny = dy / dist;
a.vx -= nx * force; a.vy -= ny * force;
b.vx += nx * force; b.vy += ny * force;
}
}
}

// Center cell lifecycle
if (cycleState === 'GROWING_AT_CENTER') {
if (!centerCell) spawnCenterCell();
var cc = centerCell;
// Grow from tiny to targetR over ~3s (180 frames)
cc.growTimer++;
var growProgress = Math.min(1, cc.growTimer / 180);
// Ease out
growProgress = 1 - (1 - growProgress) * (1 - growProgress);
cc.r = cc.targetR * (0.15 + 0.85 * growProgress);
// Subtle breathing wobble at center
cc.x = W / 2 + Math.sin(t * 0.001) * 1.5;
cc.y = H / 2 + Math.cos(t * 0.0008) * 1.5;

if (cc.growTimer >= 180) {
cycleState = 'DIVIDING';
cc.divProgress = 0;
}
} else if (cycleState === 'DIVIDING') {
var cc = centerCell;
// divProgress 0→1 over ~12s: 0.0014/frame * 60fps ≈ 0.084/s → ~12s
cc.divProgress += 0.0014;
// Keep at center with wobble
cc.x = W / 2 + Math.sin(t * 0.001) * 1.5;
cc.y = H / 2 + Math.cos(t * 0.0008) * 1.5;

if (cc.divProgress >= 1) {
// Spawn two daughters
var angle = cc.divAngle;
var sepDist = cc.r * 0.9;
var newR = cc.r * 0.55;
spawnDaughter(cc.x + Math.cos(angle) * sepDist, cc.y + Math.sin(angle) * sepDist, newR, angle, cc.colorIdx, makeOrganelles());
spawnDaughter(cc.x - Math.cos(angle) * sepDist, cc.y - Math.sin(angle) * sepDist, newR, angle + Math.PI, cc.colorIdx, makeOrganelles());
centerCell = null;
cycleState = 'STAGING_PAUSE';
pauseTimer = 0;
}
} else if (cycleState === 'STAGING_PAUSE') {
pauseTimer++;
// ~1.5s pause (90 frames)
if (pauseTimer >= 90) {
spawnCenterCell();
}
}

// --- RENDER ---

// 1. Clear offscreen
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// 2. Draw additive radial gradients
offCtx.globalCompositeOperation = 'lighter';

// Draw daughters
for (var i = 0; i < daughters.length; i++) {
var dc = daughters[i];
if (dc.opacity <= 0) continue;
var ci = dc.colorIdx % s.colors.length;
var hx = dc.x * scaleX, hy = dc.y * scaleY, hr = dc.r * scaleR;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(dc.opacity));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(dc.opacity * 0.8));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}

// Draw center cell
if (centerCell) {
var cc = centerCell;
var ci = cc.colorIdx % s.colors.length;

if (cycleState === 'DIVIDING') {
// Two sub-blobs with separation based on divProgress
var dp = cc.divProgress;
var sepFactor;
if (dp < 0.3) {
// Elongation phase: 0 → 0.4 * r
sepFactor = (dp / 0.3) * 0.4;
} else if (dp < 0.7) {
// Figure-8 phase: 0.4 → 1.0 * r
sepFactor = 0.4 + ((dp - 0.3) / 0.4) * 0.6;
} else {
// Pinch & split: 1.0 → 1.8 * r (accelerating)
var splitP = (dp - 0.7) / 0.3;
splitP = splitP * splitP; // accelerate
sepFactor = 1.0 + splitP * 0.8;
}

var sep = cc.r * sepFactor;
var a = cc.divAngle;
var x1 = cc.x + Math.cos(a) * sep * 0.5;
var y1 = cc.y + Math.sin(a) * sep * 0.5;
var x2 = cc.x - Math.cos(a) * sep * 0.5;
var y2 = cc.y - Math.sin(a) * sep * 0.5;

// Sub-blob radius: slightly smaller as they separate
var subR = cc.r * (0.75 - dp * 0.15);

var overlapScale = 0.5 + 0.5 * Math.min(1, sepFactor / 1.2);
for (var bi = 0; bi < 2; bi++) {
var bx = (bi === 0 ? x1 : x2) * scaleX;
var by = (bi === 0 ? y1 : y2) * scaleY;
var br = subR * scaleR;
var grad = offCtx.createRadialGradient(bx, by, 0, bx, by, br * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(cc.opacity * overlapScale));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(cc.opacity * 0.8 * overlapScale));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(bx, by, br * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
} else {
// Single blob
var hx = cc.x * scaleX, hy = cc.y * scaleY, hr = cc.r * scaleR;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(cc.opacity));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(cc.opacity * 0.8));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
}

offCtx.globalCompositeOperation = 'source-over';

// 3. Smoothstep threshold
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// 4. Upscale
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

// 5. Draw nuclei and organelles on top at full resolution

// Daughters
for (var i = 0; i < daughters.length; i++) {
var dc = daughters[i];
if (dc.opacity <= 0) continue;
ctx.globalAlpha = dc.opacity;
drawNucleus(dc.x, dc.y, dc.r, s, dc.colorIdx % s.colors.length, t, false);
drawOrganelles(dc.x, dc.y, dc.r, s, dc.colorIdx % s.colors.length, dc.organelles, t, false);
ctx.globalAlpha = 1;
}

// Center cell
if (centerCell) {
var cc = centerCell;
var ci = cc.colorIdx % s.colors.length;
ctx.globalAlpha = cc.opacity;

if (cycleState === 'DIVIDING') {
var dp = cc.divProgress;
var sepFactor;
if (dp < 0.3) sepFactor = (dp / 0.3) * 0.4;
else if (dp < 0.7) sepFactor = 0.4 + ((dp - 0.3) / 0.4) * 0.6;
else { var sp = (dp - 0.7) / 0.3; sp = sp * sp; sepFactor = 1.0 + sp * 0.8; }
var sep = cc.r * sepFactor;
var a = cc.divAngle;
var x1 = cc.x + Math.cos(a) * sep * 0.5;
var y1 = cc.y + Math.sin(a) * sep * 0.5;
var x2 = cc.x - Math.cos(a) * sep * 0.5;
var y2 = cc.y - Math.sin(a) * sep * 0.5;
var subR = cc.r * (0.75 - dp * 0.15);

// Nucleus animation during division
if (dp < 0.25) {
// Elongating single ellipse, draw as stretched nucleus
var nucR = subR * 0.18;
var stretch = 1 + dp * 4;
ctx.save();
ctx.translate(cc.x, cc.y);
ctx.rotate(a);
ctx.scale(stretch, 1 / Math.sqrt(stretch));
drawNucleus(0, 0, subR, s, ci, t, false);
ctx.restore();
} else if (dp < 0.35) {
// Cross-fade from ellipse to two dots
var fadeT = (dp - 0.25) / 0.1;
// Fading single
ctx.globalAlpha = cc.opacity * (1 - fadeT);
drawNucleus(cc.x, cc.y, subR, s, ci, t, false);
// Appearing pair
ctx.globalAlpha = cc.opacity * fadeT;
drawNucleus(x1, y1, subR, s, ci, t, false);
drawNucleus(x2, y2, subR, s, ci, t, false);
ctx.globalAlpha = cc.opacity;
} else {
// Two separate nuclei
drawNucleus(x1, y1, subR, s, ci, t, false);
drawNucleus(x2, y2, subR, s, ci, t, false);
}

// Organelles split between the two halves
var halfOrg = Math.floor(cc.organelles.length / 2);
drawOrganelles(x1, y1, subR, s, ci, cc.organelles.slice(0, halfOrg), t, false);
drawOrganelles(x2, y2, subR, s, ci, cc.organelles.slice(halfOrg), t, false);
} else {
drawNucleus(cc.x, cc.y, cc.r, s, ci, t, false);
drawOrganelles(cc.x, cc.y, cc.r, s, ci, cc.organelles, t, false);
}
ctx.globalAlpha = 1;
}

animId = requestAnimationFrame(draw);
}

function alphaHex(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hexToRgba(hex, a) {
var r = parseInt(hex.slice(1,3), 16);
var g = parseInt(hex.slice(3,5), 16);
var b = parseInt(hex.slice(5,7), 16);
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
}

function drawNucleus(x, y, r, s, ci, t, isStatic) {
var nucR = r * 0.18;
var nucColor = s.colors[(ci + 1) % s.colors.length];
var ng = ctx.createRadialGradient(x, y, 0, x, y, nucR);
ng.addColorStop(0, hexToRgba(nucColor, 0.8));
ng.addColorStop(0.6, hexToRgba(nucColor, 0.35));
ng.addColorStop(1, hexToRgba(nucColor, 0));
ctx.beginPath();
ctx.arc(x, y, nucR, 0, Math.PI * 2);
ctx.fillStyle = ng;
ctx.fill();
}

function drawOrganelles(x, y, r, s, ci, organelles, t, isStatic) {
if (!organelles) return;
for (var k = 0; k < organelles.length; k++) {
var org = organelles[k];
var oAngle = org.angle + (isStatic ? 0 : (t || 0) * org.speed);
var ox = x + Math.cos(oAngle) * r * org.dist;
var oy = y + Math.sin(oAngle) * r * org.dist;
var oSize = r * org.size;
ctx.beginPath();
ctx.arc(ox, oy, oSize, 0, Math.PI * 2);
var orgColor = s.colors[(ci + 2) % s.colors.length];
ctx.fillStyle = hexToRgba(orgColor, 0.4);
ctx.fill();
}
}

function hideNavFooter() {
var header = document.querySelector('header, nav,.site-header, [class*="header"]');
var footer = document.querySelector('footer,.site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav,.site-header, [class*="header"]');
var footer = document.querySelector('footer,.site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
daughters = [];
centerCell = null;
nextId = 0;
spawnCenterCell();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Mouvement réduit activé · Affichage statique<br>Appuyez n'importe où pour quitter';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Flux de Lave - Visuel avec Affirmations
URL: https://guruka.com/fr/visuals/lava-flow/
Description: Gouttes de lave flottant, fusionnant et se séparant. Ajoutez votre propre texte d'affirmation, stocké en privé dans votre navigateur.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0d0505;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/fr/visuals/" class="vp-back">&larr; Tous les Visuels</a>
<h1 class="vp-title">Flux de Lave</h1>
<p class="vp-desc">Gouttes fusionnant et se séparant.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f97316,#ef4444)"></div>
<span>Magma</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#06b6d4,#d946ef)"></div>
<span>Néon</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#059669,#84cc16)"></div>
<span>Émeraude</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texte d'affirmation (optionnel)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">préréglages <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optionnel. Entrez vos affirmations ici. Le texte s'affichera ligne par ligne."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Rythme <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Démarrer</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Appuyez n'importe où pour quitter</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'lava-flow';
var currentAffId = null;
var paceLabels = ["Très lent","Lent","Normal","Rapide","Très rapide"];
var currentPace = 2;
var schemes = [
{ name:'Magma', bg:'#0d0505', colors:['#ff4500','#ff6b35','#ffaa00','#ff2200','#ff8c00','#cc3300','#ff5500'] },
{ name:'Neon', bg:'#050510', colors:['#00e5ff','#e040fb','#2979ff','#00bcd4','#d500f9','#448aff','#18ffff'] },
{ name:'Emerald', bg:'#050d08', colors:['#00c853','#1de9b6','#76ff03','#00e676','#64ffda','#69f0ae','#b2ff59'] }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Aucun',text:''},
{title:'Calme et clarté',text:'Mon esprit est calme et clair\nJe libère ce que je ne peux pas contrôler\nJe suis présent dans ce moment'},
{title:'Confiance en soi',text:'Je crois en moi et en mes capacités\nJe mérite de bonnes choses\nJe deviens plus fort chaque jour'},
{title:'Lâcher prise',text:'Je libère ce qui ne me sert plus\nJe me pardonne et pardonne aux autres\nJe fais de la place pour la paix'},
{title:'Gratitude',text:'Je suis reconnaissant pour ce moment\nL\'abondance coule dans ma vie\nJ\'apprécie les choses simples'},
{title:'Focus et énergie',text:'Ma concentration est vive et stable\nJe canalise mon énergie avec intention\nJ\'avance avec détermination'},
{title:'Sommeil et repos',text:'Je me donne la permission de me reposer\nMon corps se détend à chaque respiration\nJe glisse vers un sommeil paisible'},
{title:'Arrêter de fumer',text:'Mes poumons sont plus propres chaque jour\nJe suis plus fort que toute envie\nChaque respiration est une victoire'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Effacer le texte') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

var blobs = [];
var offCanvas, offCtx, halfW, halfH;

function initBlobs() {
blobs = [];
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
var minDim = Math.min(W, H);
var blobCount = Math.max(9, Math.min(Math.floor(minDim / 100), 15));
for (var i = 0; i < blobCount; i++) {
blobs.push({
x: 0.15 * W + Math.random() * 0.7 * W,
y: Math.random() * H,
vx: (Math.random() - 0.5) * 0.1,
vy: -(0.075 + Math.random() * 0.075),
baseR: minDim * (0.04 + Math.random() * 0.04),
phase: Math.random() * Math.PI * 2
});
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running) initBlobs();
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;

// Clear offscreen
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// Update and draw blobs on offscreen canvas at half res
for (var i = 0; i < blobs.length; i++) {
var b = blobs[i];
var r = b.baseR + Math.sin(t * 0.0004 + b.phase) * 12;

if (!reducedMotion) {
b.x += b.vx + Math.sin(t * 0.000075 + b.phase) * 0.15;
b.y += b.vy + Math.cos(t * 0.0001 + b.phase) * 0.15;

// Wrap vertically: when blob fully exits top, respawn at bottom
if (b.y + r * 2 < 0) {
b.y = H + r * 2;
b.x = 0.15 * W + Math.random() * 0.7 * W;
}
// Soft horizontal wrap
if (b.x < -r) b.x = W + r;
if (b.x > W + r) b.x = -r;
}

// Draw radial gradient blob on offscreen at 3/4 resolution
var scaleX = halfW / W, scaleY = halfH / H;
var hx = b.x * scaleX, hy = b.y * scaleY, hr = r * Math.min(scaleX, scaleY);
var ci = i % s.colors.length;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + 'ff');
grad.addColorStop(0.5, s.colors[ci] + 'cc');
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.globalCompositeOperation = 'lighter';
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
offCtx.globalCompositeOperation = 'source-over';

// Apply smoothstep threshold for metaball effect (smooth edges)
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
// Smoothstep interpolation between background and blob color
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt); // smoothstep
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// Scale up to main canvas
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initBlobs();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Mouvement réduit activé · Affichage statique<br>Appuyez n'importe où pour quitter';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Eugene
URL: https://guruka.com/ja/author/eugene/
Description: Eugene, author profile

# Eugene

Eugene is a contributor to this publication.

### Memory Matrix - 脳トレゲーム
URL: https://guruka.com/ja/games/memory-matrix/
Description: グリッドの配置を記憶。

<style>
#memory-matrix-game {
max-width: 540px;
margin: 0 auto;
padding: 1.5rem 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
-webkit-tap-highlight-color: transparent;
}

#memory-matrix-game * {
box-sizing: border-box;
}

#memory-matrix-game .mm-screen {
display: none;
animation: mmFadeIn 0.4s ease-out;
}

#memory-matrix-game .mm-screen.active {
display: block;
}

@keyframes mmFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes mmPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}

@keyframes mmCellGlow {
0% { box-shadow: 0 0 0 0 rgba(15, 144, 114, 0.4); }
70% { box-shadow: 0 0 0 8px rgba(15, 144, 114, 0); }
100% { box-shadow: 0 0 0 0 rgba(15, 144, 114, 0); }
}

@keyframes mmShine {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}

@keyframes mmBounceIn {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}

@keyframes mmSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* ---- Instructions Screen ---- */
#memory-matrix-game .mm-instructions {
text-align: center;
}

#memory-matrix-game .mm-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#memory-matrix-game .mm-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 0.75rem;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
margin-bottom: 0;
}

#memory-matrix-game .mm-icon-wrap svg {
width: 36px;
height: 36px;
stroke: var(--color-primary);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

#memory-matrix-game .mm-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 0.25rem;
}

#memory-matrix-game .mm-subtitle {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
}

#memory-matrix-game .mm-how-to {
text-align: left;
margin-bottom: 1.5rem;
}

#memory-matrix-game .mm-how-to h3 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 0.75rem;
}

#memory-matrix-game .mm-how-to ol {
list-style: none;
padding: 0;
margin: 0;
}

#memory-matrix-game .mm-how-to li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.625rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

#memory-matrix-game .mm-step-num {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
font-size: 0.8rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}

#memory-matrix-game .mm-best-banner {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 0.75rem 1rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

#memory-matrix-game .mm-best-banner strong {
color: var(--color-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-best-banner {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

/* ---- Buttons ---- */
#memory-matrix-game .mm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: none;
border-radius: 0.625rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
padding: 0.75rem 1.5rem;
transition: all 0.2s ease;
}

#memory-matrix-game .mm-btn:active {
transform: scale(0.97);
}

#memory-matrix-game .mm-btn-primary {
background: var(--color-primary);
color: #fff;
width: 100%;
}

#memory-matrix-game .mm-btn-primary:hover {
background: var(--color-primary-hover);
box-shadow: 0 4px 12px rgba(15, 144, 114, 0.3);
}

#memory-matrix-game .mm-btn-outline {
background: transparent;
color: var(--color-text-primary);
border: 2px solid var(--color-border);
}

#memory-matrix-game .mm-btn-outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-btn-outline {
color: var(--color-dark-text-primary);
border-color: var(--color-dark-border);
}

[data-theme="dark"] #memory-matrix-game .mm-btn-outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}

#memory-matrix-game .mm-btn-submit {
background: var(--color-primary);
color: #fff;
}

#memory-matrix-game .mm-btn-submit:hover:not(:disabled) {
background: var(--color-primary-hover);
}

#memory-matrix-game .mm-btn-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* ---- Wizard Overlay ---- */
#mm-wizard {
display: none;
animation: mmFadeIn 0.4s ease-out;
}
#mm-wizard.active {
display: block;
}
.mm-wizard-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
.mm-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: mmWizardEnter 0.3s ease-out;
}
[data-theme="dark"].mm-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes mmWizardEnter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.mm-wizard-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.mm-wizard-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
.mm-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].mm-wizard-desc { color: var(--color-dark-text-secondary); }
.mm-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.mm-wizard-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-border);
transition: all 0.3s;
}
.mm-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].mm-wizard-dot { background: var(--color-dark-border, #3a4553); }
[data-theme="dark"].mm-wizard-dot.active { background: var(--color-primary); }
.mm-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.mm-wizard-btn:hover { background: var(--color-primary-hover, #0d7a62); }
@media (max-width: 400px) {
.mm-wizard-card { padding: 1.5rem 1rem; }
.mm-wizard-icon { font-size: 2rem; }
.mm-wizard-title { font-size: 1.1rem; }
.mm-wizard-desc { font-size: 0.85rem; }
}

/* ---- Game Header ---- */
#memory-matrix-game .mm-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
margin-bottom: 1rem;
}

[data-theme="dark"] #memory-matrix-game .mm-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-header-item {
text-align: center;
}

#memory-matrix-game .mm-header-label {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.125rem;
}

[data-theme="dark"] #memory-matrix-game .mm-header-label {
color: var(--color-dark-text-secondary);
}

#memory-matrix-game .mm-header-value {
font-size: 1.15rem;
font-weight: 700;
color: var(--color-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-header-value {
color: var(--color-dark-text-primary);
}

#memory-matrix-game .mm-streak-value {
color: #f59e0b;
}

/* ---- Phase Indicator ---- */
#memory-matrix-game .mm-phase {
text-align: center;
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 1rem;
min-height: 1.5rem;
}

#memory-matrix-game .mm-phase-memorize {
color: var(--color-primary);
animation: mmPulse 1.5s ease-in-out infinite;
}

#memory-matrix-game .mm-phase-recall {
color: #f59e0b;
}

#memory-matrix-game .mm-phase-correct {
color: #22c55e;
}

#memory-matrix-game .mm-phase-wrong {
color: #ef4444;
}

/* ---- Grid ---- */
#memory-matrix-game .mm-grid-wrap {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}

#memory-matrix-game .mm-grid {
display: grid;
gap: 6px;
}

#memory-matrix-game .mm-cell {
aspect-ratio: 1;
border-radius: 8px;
border: 2px solid var(--color-border);
background: var(--color-bg-secondary);
cursor: default;
transition: all 0.25s ease;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
color: transparent;
-webkit-user-select: none;
user-select: none;
}

[data-theme="dark"] #memory-matrix-game .mm-cell {
border-color: var(--color-dark-border);
background: var(--color-dark-bg-secondary);
}

#memory-matrix-game .mm-cell.recall-mode {
cursor: pointer;
}

#memory-matrix-game .mm-cell.recall-mode:hover {
border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-secondary));
}

[data-theme="dark"] #memory-matrix-game .mm-cell.recall-mode:hover {
background: color-mix(in srgb, var(--color-primary) 10%, var(--color-dark-bg-secondary));
}

#memory-matrix-game .mm-cell.showing {
background: var(--color-primary);
border-color: var(--color-primary);
animation: mmCellGlow 0.6s ease-out;
}

#memory-matrix-game .mm-cell.selected {
background: color-mix(in srgb, var(--color-primary) 80%, transparent);
border-color: var(--color-primary);
color: #fff;
}

#memory-matrix-game .mm-cell.fb-correct {
background: #22c55e;
border-color: #16a34a;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-missed {
background: rgba(239, 68, 68, 0.45);
border-color: #ef4444;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-wrong {
background: #ef4444;
border-color: #dc2626;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-neutral {
opacity: 0.5;
transition: all 0.3s ease;
}

/* ---- Progress Bar ---- */
#memory-matrix-game .mm-progress-wrap {
margin-bottom: 1rem;
text-align: center;
}

#memory-matrix-game .mm-progress-bar {
height: 6px;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 3px;
overflow: hidden;
max-width: 240px;
margin: 0 auto 0.375rem;
}

[data-theme="dark"] #memory-matrix-game .mm-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

#memory-matrix-game .mm-progress-text {
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-progress-text {
color: var(--color-dark-text-secondary);
}

/* ---- Action Buttons ---- */
#memory-matrix-game .mm-actions {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}

/* ---- Game Complete Screen ---- */
#memory-matrix-game .mm-complete {
position: relative;
text-align: center;
}

#memory-matrix-game .mm-score-display {
font-size: 3rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
background: linear-gradient(90deg, var(--color-primary), #10b981, var(--color-primary));
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: mmShine 3s linear infinite;
}

#memory-matrix-game .mm-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin: 1.25rem 0;
}

#memory-matrix-game .mm-stat-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 0.75rem 0.5rem;
}

[data-theme="dark"] #memory-matrix-game .mm-stat-card {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-stat-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-stat-value {
color: var(--color-dark-text-primary);
}

#memory-matrix-game .mm-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-secondary);
margin-top: 0.125rem;
}

[data-theme="dark"] #memory-matrix-game .mm-stat-label {
color: var(--color-dark-text-secondary);
}

#memory-matrix-game .mm-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #000;
font-size: 0.8rem;
font-weight: 700;
padding: 0.375rem 1rem;
border-radius: 2rem;
margin-bottom: 1rem;
animation: mmBounceIn 0.5s ease-out;
}

#memory-matrix-game .mm-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}

#memory-matrix-game .mm-back-link {
display: inline-block;
margin-top: 0.75rem;
color: var(--color-primary);
text-decoration: none;
font-size: 0.9rem;
}

#memory-matrix-game .mm-back-link:hover {
text-decoration: underline;
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

/* ---- Dark Mode ---- */
[data-theme="dark"] #memory-matrix-game {
color: var(--color-dark-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-title {
color: var(--color-dark-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-subtitle {
color: var(--color-dark-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-how-to li {
color: var(--color-dark-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-cell.recall-mode:hover {
border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

/* ---- Responsive ---- */
@media (max-width: 400px) {
#memory-matrix-game {
padding: 1rem 0.5rem;
}
#memory-matrix-game .mm-grid {
gap: 4px;
}
#memory-matrix-game .mm-header {
padding: 0.5rem;
}
#memory-matrix-game .mm-header-value {
font-size: 1rem;
}
#memory-matrix-game .mm-btn {
padding: 0.625rem 1rem;
font-size: 0.9rem;
}
#memory-matrix-game .mm-icon-wrap { width: 40px; height: 40px; margin-bottom: 0; }
#memory-matrix-game .mm-icon-wrap svg { width: 20px; height: 20px; }
#memory-matrix-game .mm-instructions h2 { font-size: 1.3rem; }
#memory-matrix-game .mm-instructions.mm-subtitle { font-size: 0.85rem; margin-bottom: 0.75rem; }
}
@media (max-width: 640px) {
#memory-matrix-game .mm-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
#memory-matrix-game .mm-stat-value {
font-size: 1.1rem;
}
}
@media (max-width: 360px) {
#memory-matrix-game .mm-grid {
gap: 3px;
}
#memory-matrix-game .mm-stats-grid {
grid-template-columns: 1fr 1fr;
}
#memory-matrix-game .mm-btn {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}
#memory-matrix-game .mm-title {
font-size: 1.25rem;
}
#memory-matrix-game .mm-grid-wrap {
max-width: 100%;
overflow: hidden;
}
}
@keyframes mm-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.mm-confetti-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.mm-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: mm-confetti-fall 2.5s ease-in forwards;
}
.mm-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: mm-glow-fade 1s ease-out forwards;
}
@keyframes mm-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.mm-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
font-size: 0.85rem;
font-weight: 700;
padding: 0.375rem 1rem;
border-radius: 2rem;
margin-bottom: 1rem;
animation: mmBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}

#memory-matrix-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#memory-matrix-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #memory-matrix-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="memory-matrix-game">

<div id="mm-instructions" class="mm-screen active">
<div class="mm-instructions">
<div class="mm-title-row"><div class="mm-icon-wrap"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div><h1 class="mm-title">Memory Matrix</h1></div>
<p class="mm-subtitle">空間記憶力をテストしよう</p>
<div class="mm-how-to">
<h3>遊び方:</h3>
<ol>
<li><span class="mm-step-num">1</span><span>パターンを観察 -- セルが順番に光ります</span></li>
<li><span class="mm-step-num">2</span><span>どのセルが光ったか覚えてください</span></li>
<li><span class="mm-step-num">3</span><span>記憶から同じセルをタップしてください</span></li>
<li><span class="mm-step-num">4</span><span>レベル8からは順番が重要です！正しい順番でタップしてください</span></li>
</ol>
</div>
<div id="mm-instr-best" class="mm-best-banner" style="display:none;"></div>
<button class="mm-btn mm-btn-primary" onclick="mmShowWizard()">ゲームスタート</button>
<div id="mm-challenge-banner-wrap"></div>
</div>
</div>

<div id="mm-wizard" class="mm-screen">
<div class="mm-wizard-overlay">
<div class="mm-wizard-card" id="mm-wizard-card"></div>
</div>
</div>

<div id="mm-playing" class="mm-screen">
<div class="mm-header">
<div class="mm-header-item">
<div class="mm-header-label">スコア</div>
<div class="mm-header-value" id="mm-score">0</div>
</div>
<div class="mm-header-item">
<div class="mm-header-label">Level</div>
<div class="mm-header-value" id="mm-level">1</div>
</div>
<div class="mm-header-item">
<div class="mm-header-label">連続</div>
<div class="mm-header-value mm-streak-value" id="mm-streak">0</div>
</div>
</div>
<div class="mm-phase" id="mm-phase"></div>
<div class="mm-grid-wrap">
<div class="mm-grid" id="mm-grid"></div>
</div>
<div class="mm-progress-wrap">
<div class="mm-progress-bar">
<div class="mm-progress-fill" id="mm-progress-fill" style="width:0%"></div>
</div>
<div class="mm-progress-text" id="mm-progress-text">ラウンド 1 / 3</div>
</div>
<div class="mm-actions" id="mm-actions"></div>
<button class="gk-finish-btn" id="mm-finish-btn">終了</button>
</div>

<div id="mm-complete" class="mm-screen">
<div class="mm-complete">
<button class="gk-complete-close" id="mm-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="mm-icon-wrap">
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
</div>
<h1 class="mm-title">終了！</h1>
<div class="mm-score-display" id="mm-final-score">0</div>
<div id="mm-new-best-badge" class="mm-new-best" style="display:none;">新しいベスト！</div>
<div class="gk-challenge-result" id="mm-challenge-result" style="display:none;"></div>
<div class="mm-stats-grid">
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-level">1</div>
<div class="mm-stat-label">Level</div>
</div>
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-accuracy">0%</div>
<div class="mm-stat-label">正確性</div>
</div>
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-streak">0</div>
<div class="mm-stat-label">最高連続</div>
</div>
</div>
<div class="mm-complete-actions">
<button class="mm-btn mm-btn-primary" onclick="mmPlayAgain()">もう一度</button>
<button class="gk-runtime-history-toggle" id="mm-history-toggle" type="button">Show History</button>
<a href="/ja/games/" class="mm-back-link">すべてのゲーム</a>
</div>
<div class="gk-runtime-history-panel" id="mm-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="mm-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="mm-share-btn">&#128279; 結果をシェア</button>
<div class="gk-share-copied" id="mm-share-copied" style="display:none;">リンクをコピーしました！</div>
</div>
</div>
</div>

</div>

<script>
(function() {
var STORAGE_BEST = 'guruka_memory-matrix_best';
var POINTS_PER_CORRECT = 100;
var SPEED_BONUS_THRESHOLD = 1000;
var STREAK_MULTIPLIER = 0.1;
var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('mm-history-toggle', 'mm-history-panel', 'mm-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
 screen: 'instructions',
 score: 0,
 level: 1,
 streak: 0,
 bestStreak: 0,
 correctAnswers: 0,
 wrongAnswers: 0,
 roundsInLevel: 0,
 pattern: [],
 selectedCells: [],
 showingIndex: 0,
 phase: 'showing',
 answerTime: 0,
 countdownValue: 3,
 countdownTimer: null,
 showTimer: null,
 feedbackTimer: null
};

function getLevelConfig(level) {
 var gridSize = level <= 5 ? 3 : level <= 10 ? 4 : level <= 15 ? 5 : 6;
 var patternSize = Math.min(3 + Math.floor(level / 2), gridSize * gridSize - 2);
 var displayTime = Math.max(2000 - (level - 1) * 80, 800);
 var orderMatters = level >= 8;
 return {
 gridSize: gridSize,
 patternSize: patternSize,
 displayTime: displayTime,
 orderMatters: orderMatters,
 roundsPerLevel: 3,
 maxLevel: 20
 };
}

function getPersonalBest() {
 try {
 var val = localStorage.getItem(STORAGE_BEST);
 return val ? parseInt(val, 10) : 0;
 } catch (e) { return 0; }
}

function saveResult(score, level, accuracy) {
 try {
 void level;
 void accuracy;
 var best = getPersonalBest();
 if (score > best) {
 localStorage.setItem(STORAGE_BEST, String(score));
 return true;
 }
 return false;
 } catch (e) { return false; }
}

function showScreen(name) {
 var screens = document.querySelectorAll('#memory-matrix-game .mm-screen');
 for (var i = 0; i < screens.length; i++) {
 screens[i].classList.remove('active');
 }
 var el = document.getElementById('mm-' + name);
 if (el) {
 el.classList.add('active');
 }
 state.screen = name;
}

function updateInstructionsBest() {
 var best = getPersonalBest();
 var banner = document.getElementById('mm-instr-best');
 if (best > 0 && banner) {
 banner.style.display = 'block';
 banner.innerHTML = 'ベスト: <strong>' + best.toLocaleString() + '</strong> ポイント';
 }
}

/* ---- Wizard ---- */
var MM_WIZARD_STEPS = [
{icon: '\uD83D\uDCA1', title: '光るセルを観察しよう', desc: 'セルが順番に光ります。よく見てください！'},
{icon: '\uD83D\uDC46', title: '記憶からタップしよう', desc: 'パターンが消えた後、記憶から再現してください。'},
{icon: '\uD83D\uDE80', title: '準備はいい？スタート！', desc: 'レベルが上がるとパターンが難しくなります！', final: true}
];
var mmWizardStep = 0;

function mmRenderWizardStep() {
var s = MM_WIZARD_STEPS[mmWizardStep];
var dotsHtml = '';
for (var i = 0; i < MM_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="mm-wizard-dot' + (i === mmWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'プレイ開始' : '次へ';
var card = document.getElementById('mm-wizard-card');
card.innerHTML =
'<div class="mm-wizard-icon">' + s.icon + '</div>' +
'<div class="mm-wizard-title">' + s.title + '</div>' +
'<div class="mm-wizard-desc">' + s.desc + '</div>' +
'<div class="mm-wizard-dots">' + dotsHtml + '</div>' +
'<button class="mm-wizard-btn" id="mm-wizard-next">' + btnLabel + '</button>';
card.style.animation = 'none';
void card.offsetWidth;
card.style.animation = 'mmWizardEnter 0.3s ease-out';
document.getElementById('mm-wizard-next').addEventListener('click', mmAdvanceWizard);
}

function mmAdvanceWizard() {
if (mmWizardStep < MM_WIZARD_STEPS.length - 1) {
mmWizardStep++;
mmRenderWizardStep();
} else {
mmStartGame();
}
}

window.mmShowWizard = function() {
mmWizardStep = 0;
showScreen('wizard');
mmRenderWizardStep();
};

/* ---- Start ---- */
function mmStartGame() {
 window.scrollTo({ top: 0, behavior: 'instant' });
 enterMobileGameMode();
 state.score = 0;
 state.level = 1;
 state.streak = 0;
 state.bestStreak = 0;
 state.correctAnswers = 0;
 state.wrongAnswers = 0;
 state.roundsInLevel = 0;
 state.pattern = [];
 state.selectedCells = [];
 runHistory.clear();

 showScreen('playing');
 GK.renderChallengeBar('mm-playing', challenge);
 updateHeader();
 generatePattern();
}

/* ---- Update Header ---- */
function updateHeader() {
 document.getElementById('mm-score').textContent = state.score.toLocaleString();
 document.getElementById('mm-level').textContent = state.level;
 document.getElementById('mm-streak').textContent = state.streak;
 if (challenge.active) GK.updateChallengeBar('mm-playing', state.score, challenge.score);
}

/* ---- Generate Pattern ---- */
function generatePattern() {
 var config = getLevelConfig(state.level);
 var totalCells = config.gridSize * config.gridSize;
 var newPattern = [];

 while (newPattern.length < config.patternSize) {
 var cell = Math.floor(Math.random() * totalCells);
 if (newPattern.indexOf(cell) === -1) {
 newPattern.push(cell);
 }
 }

 state.pattern = newPattern;
 state.selectedCells = [];
 state.showingIndex = 0;
 state.phase = 'showing';

 buildGrid(config);
 updateProgressBar(config);
 updatePhase(config);
 updateActions(config);
 startShowingPattern(config);
}

/* ---- Build Grid ---- */
function buildGrid(config) {
 var grid = document.getElementById('mm-grid');
 var cellSize = config.gridSize <= 3 ? 72 : config.gridSize <= 4 ? 62 : config.gridSize <= 5 ? 52 : 44;
 var gapSize = config.gridSize <= 4 ? 6 : 5;
 var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
 if (viewportWidth < 360) {
 var maxCellSize = Math.floor((viewportWidth - 40 - (config.gridSize - 1) * gapSize) / config.gridSize);
 if (maxCellSize < cellSize) cellSize = maxCellSize;
 }
 var totalSize = config.gridSize * cellSize + (config.gridSize - 1) * gapSize;

 grid.style.gridTemplateColumns = 'repeat(' + config.gridSize + ', ' + cellSize + 'px)';
 grid.style.gridTemplateRows = 'repeat(' + config.gridSize + ', ' + cellSize + 'px)';
 grid.style.gap = gapSize + 'px';
 grid.style.width = totalSize + 'px';
 grid.innerHTML = '';

 var totalCells = config.gridSize * config.gridSize;
 for (var i = 0; i < totalCells; i++) {
 var cell = document.createElement('button');
 cell.className = 'mm-cell';
 cell.setAttribute('data-index', i);
 cell.setAttribute('type', 'button');
 (function(idx) {
 cell.addEventListener('click', function() { handleCellClick(idx); });
 })(i);
 grid.appendChild(cell);
 }
}

/* ---- Show Pattern Sequentially ---- */
function startShowingPattern(config) {
 var delay = config.displayTime / state.pattern.length;
 state.showingIndex = 0;

 function showNext() {
 if (state.screen !== 'playing') return;
 if (state.showingIndex < state.pattern.length) {
 // Clear previous highlights
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var j = 0; j < cells.length; j++) {
 cells[j].classList.remove('showing');
 }
 // Highlight current cell
 var idx = state.pattern[state.showingIndex];
 var targetCell = document.querySelector('#mm-grid .mm-cell[data-index="' + idx + '"]');
 if (targetCell) {
 targetCell.classList.add('showing');
 }
 state.showingIndex++;
 state.showTimer = setTimeout(showNext, delay);
 } else {
 // All shown, brief pause then switch to recall
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var j = 0; j < cells.length; j++) {
 cells[j].classList.remove('showing');
 }
 state.showTimer = setTimeout(function() {
 state.phase = 'recall';
 state.answerTime = Date.now();
 enableRecallMode(config);
 updatePhase(config);
 updateActions(config);
 }, 400);
 }
 }

 showNext();
}

/* ---- Enable Recall Mode ---- */
function enableRecallMode(config) {
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var i = 0; i < cells.length; i++) {
 cells[i].classList.add('recall-mode');
 }
}

/* ---- Handle Cell Click ---- */
function handleCellClick(cellIndex) {
 if (state.phase !== 'recall') return;

 var existingIdx = state.selectedCells.indexOf(cellIndex);
 if (existingIdx !== -1) {
 // Deselect
 state.selectedCells.splice(existingIdx, 1);
 } else if (state.selectedCells.length < state.pattern.length) {
 state.selectedCells.push(cellIndex);
 }

 var config = getLevelConfig(state.level);
 updateCellVisuals();
 updatePhase(config);
 updateActions(config);
}

/* ---- Update Cell Visuals ---- */
function updateCellVisuals() {
 var config = getLevelConfig(state.level);
 var cells = document.querySelectorAll('#mm-grid .mm-cell');

 for (var i = 0; i < cells.length; i++) {
 var idx = parseInt(cells[i].getAttribute('data-index'), 10);
 cells[i].classList.remove('selected');
 cells[i].textContent = '';

 if (state.selectedCells.indexOf(idx) !== -1) {
 cells[i].classList.add('selected');
 if (config.orderMatters) {
 cells[i].textContent = String(state.selectedCells.indexOf(idx) + 1);
 cells[i].style.color = '#fff';
 }
 } else {
 cells[i].style.color = 'transparent';
 }
 }
}

/* ---- Update Phase Indicator ---- */
function updatePhase(config) {
 var phaseEl = document.getElementById('mm-phase');
 if (state.phase === 'showing') {
 phaseEl.innerHTML = '<span class="mm-phase-memorize">パターンを覚えて...</span>';
 } else if (state.phase === 'recall') {
 var orderNote = config.orderMatters ? ' (順番が重要！)' : '';
 phaseEl.innerHTML = '<span class="mm-phase-recall">あなたの番！' + orderNote + ', ' + state.selectedCells.length + '/' + state.pattern.length + ' 選択済み</span>';
 }
}

/* ---- Update Actions ---- */
function updateActions(config) {
 var actionsEl = document.getElementById('mm-actions');
 if (state.phase !== 'recall') {
 actionsEl.innerHTML = '';
 return;
 }

 var clearDisabled = state.selectedCells.length === 0 ? ' disabled' : '';
 var submitDisabled = state.selectedCells.length !== state.pattern.length ? ' disabled' : '';

 actionsEl.innerHTML =
 '<button class="mm-btn mm-btn-outline" onclick="mmClearSelection()"' + clearDisabled + '>クリア</button>' +
 '<button class="mm-btn mm-btn-submit" onclick="mmSubmitAnswer()"' + submitDisabled + '>送信 (' + state.selectedCells.length + '/' + state.pattern.length + ')</button>';
}

/* ---- Update Progress Bar ---- */
function updateProgressBar(config) {
 var pct = (state.roundsInLevel / config.roundsPerLevel) * 100;
 document.getElementById('mm-progress-fill').style.width = pct + '%';
 document.getElementById('mm-progress-text').textContent =
 'ラウンド ' + (state.roundsInLevel + 1) + ' / ' + config.roundsPerLevel;
}

/* ---- Clear Selection ---- */
window.mmClearSelection = function() {
 state.selectedCells = [];
 updateCellVisuals();
 updateActions(getLevelConfig(state.level));
 updatePhase(getLevelConfig(state.level));
};

function formatCellList(cells) {
if (!cells || !cells.length) return 'none';
var out = [];
for (var i = 0; i < cells.length; i++) out.push(String(cells[i] + 1));
return out.join(', ');
}

function recordMemoryHistory(correct, config) {
var html = '<strong>' + runHistory.escape(config.orderMatters ? 'Order matters' : 'Any order') + '</strong>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(formatCellList(state.selectedCells)) + '</div>';
html += '<div class="gk-runtime-history-sub">Correct: ' + runHistory.escape(formatCellList(state.pattern)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ---- Submit Answer ---- */
window.mmSubmitAnswer = function() {
 if (state.phase !== 'recall') return;
 var config = getLevelConfig(state.level);
 var responseTime = Date.now() - state.answerTime;

 var correct;
 if (config.orderMatters) {
 correct = true;
 for (var i = 0; i < state.pattern.length; i++) {
 if (state.selectedCells[i] !== state.pattern[i]) {
 correct = false;
 break;
 }
 }
 } else {
 correct = state.selectedCells.length === state.pattern.length;
 if (correct) {
 for (var i = 0; i < state.pattern.length; i++) {
 if (state.selectedCells.indexOf(state.pattern[i]) === -1) {
 correct = false;
 break;
 }
 }
 }
 }

 recordMemoryHistory(correct, config);

 // Calculate points
 var pointsEarned = 0;
 if (correct) {
 pointsEarned = POINTS_PER_CORRECT;
 if (responseTime < SPEED_BONUS_THRESHOLD) {
 pointsEarned += Math.floor((SPEED_BONUS_THRESHOLD - responseTime) / 10);
 }
 pointsEarned += Math.floor(state.streak * STREAK_MULTIPLIER * POINTS_PER_CORRECT);
 state.score += pointsEarned;
 state.streak++;
 state.correctAnswers++;
 if (state.streak > state.bestStreak) {
 state.bestStreak = state.streak;
 }
 } else {
 state.streak = 0;
 state.wrongAnswers++;
 }

 updateHeader();
 showFeedback(correct, config);
};

/* ---- Show Feedback ---- */
function showFeedback(correct, config) {
 state.phase = 'feedback';

 var phaseEl = document.getElementById('mm-phase');
 if (correct) {
 phaseEl.innerHTML = '<span class="mm-phase-correct">正解！</span>';
 } else {
 phaseEl.innerHTML = '<span class="mm-phase-wrong">残念...</span>';
 }

 // Update cell visuals to show correct/wrong
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var i = 0; i < cells.length; i++) {
 var idx = parseInt(cells[i].getAttribute('data-index'), 10);
 cells[i].classList.remove('showing', 'selected', 'recall-mode');
 cells[i].style.color = 'transparent';
 cells[i].textContent = '';

 var inPattern = state.pattern.indexOf(idx) !== -1;
 var wasSelected = state.selectedCells.indexOf(idx) !== -1;

 if (inPattern && wasSelected) {
 cells[i].classList.add('fb-correct');
 } else if (inPattern && !wasSelected) {
 cells[i].classList.add('fb-missed');
 } else if (!inPattern && wasSelected) {
 cells[i].classList.add('fb-wrong');
 } else {
 cells[i].classList.add('fb-neutral');
 }
 }

 // Hide action buttons during feedback
 document.getElementById('mm-actions').innerHTML = '';

 state.feedbackTimer = setTimeout(function() {
 advanceRound(config);
 }, 1200);
}

/* ---- Advance Round ---- */
function advanceRound(config) {
 state.roundsInLevel++;

 if (state.roundsInLevel >= config.roundsPerLevel) {
 if (state.level >= config.maxLevel) {
 endGame();
 return;
 }
 state.level++;
 state.roundsInLevel = 0;
 updateHeader();
 }

 generatePattern();
}

/* ---- Celebration effects ---- */
function mmShowConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'mm-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'mm-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'mm-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function mmAnimateScoreCountUp(el, target) {
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(target * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

/* ---- End Game ---- */
function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

function endGame() {
exitMobileGameMode();
 var totalAnswers = state.correctAnswers + state.wrongAnswers;
 var accuracy = totalAnswers > 0 ? Math.round((state.correctAnswers / totalAnswers) * 100) : 0;
 var isNewBest = saveResult(state.score, state.level, accuracy);

 var titleEl = document.querySelector('#mm-complete .mm-title');
 var iconWrap = document.querySelector('#mm-complete .mm-icon-wrap');
 var bestBadge = document.getElementById('mm-new-best-badge');

 if (isNewBest) {
 mmShowConfetti();
 titleEl.textContent = 'すばらしい！';
 iconWrap.innerHTML = '<span style="font-size:2.25rem">\uD83C\uDF89</span>';
 bestBadge.className = 'mm-new-best-enhanced';
 bestBadge.innerHTML = 'uD83CuDF1F すばらしい！新記録！';
 bestBadge.style.display = 'inline-block';
 } else {
 titleEl.textContent = 'お疲れさまでした！';
 iconWrap.innerHTML = '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>';
 bestBadge.className = 'mm-new-best';
 bestBadge.style.display = 'none';
 }

 GK.renderChallengeResult('mm-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

 showScreen('complete');

 var scoreEl = document.getElementById('mm-final-score');
 document.getElementById('mm-final-level').textContent = state.level;
 document.getElementById('mm-final-accuracy').textContent = accuracy + '%';
 document.getElementById('mm-final-streak').textContent = state.bestStreak;

 mmAnimateScoreCountUp(scoreEl, state.score);
}

/* ---- Again ---- */
window.mmPlayAgain = function() {
 clearTimeout(state.showTimer);
 clearTimeout(state.feedbackTimer);
 clearInterval(state.countdownTimer);
 updateInstructionsBest();
 showScreen('instructions');
};

/* ---- Init ---- */
updateInstructionsBest();
GK.renderChallengeBanner('mm-challenge-banner-wrap', challenge);


document.getElementById('mm-close-btn').addEventListener('click', function() {
updateInstructionsBest();
showScreen('instructions');
});

document.getElementById('mm-finish-btn').addEventListener('click', function() {
 endGame();
});

document.getElementById('mm-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('mm-share-btn').addEventListener('click', function() {
 GK.shareResult(state.score, 'Memory Matrix', '/ja/games/memory-matrix/', 'mm-share-copied');
});
})();
</script>

### Mandala - Visuel avec Affirmations
URL: https://guruka.com/fr/visuals/mandala/
Description: Géométrie sacrée en rotation lente avec une symétrie évolutive. Ajoutez votre propre texte d'affirmation, stocké en privé dans votre navigateur.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0a0808;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/fr/visuals/" class="vp-back">&larr; Tous les Visuels</a>
<h1 class="vp-title">Mandala</h1>
<p class="vp-desc">Géométrie sacrée en rotation.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#eab308,#f59e0b)"></div>
<span>Doré</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#6366f1,#a855f7)"></div>
<span>Céleste</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#14b8a6,#10b981)"></div>
<span>Jade</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texte d'affirmation (optionnel)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">préréglages <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optionnel. Entrez vos affirmations ici. Le texte s'affichera ligne par ligne."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Rythme <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Démarrer</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Appuyez n'importe où pour quitter</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'mandala';
var currentAffId = null;
var paceLabels = ["Très lent","Lent","Normal","Rapide","Très rapide"];
var currentPace = 2;
var schemes = [
{ name:'Golden', bg:'#0a0808', stroke:'#d4a017', strokeAlt:'#f5c842', dot:'#fff8dc', bgFill:'rgba(10,8,8,' },
{ name:'Celestial', bg:'#05050f', stroke:'#818cf8', strokeAlt:'#c084fc', dot:'#e0e7ff', bgFill:'rgba(5,5,15,' },
{ name:'Jade', bg:'#050a08', stroke:'#2dd4bf', strokeAlt:'#34d399', dot:'#d1fae5', bgFill:'rgba(5,10,8,' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Aucun',text:''},
{title:'Calme et clarté',text:'Mon esprit est calme et clair\nJe libère ce que je ne peux pas contrôler\nJe suis présent dans ce moment'},
{title:'Confiance en soi',text:'Je crois en moi et en mes capacités\nJe mérite de bonnes choses\nJe deviens plus fort chaque jour'},
{title:'Lâcher prise',text:'Je libère ce qui ne me sert plus\nJe me pardonne et pardonne aux autres\nJe fais de la place pour la paix'},
{title:'Gratitude',text:'Je suis reconnaissant pour ce moment\nL\'abondance coule dans ma vie\nJ\'apprécie les choses simples'},
{title:'Focus et énergie',text:'Ma concentration est vive et stable\nJe canalise mon énergie avec intention\nJ\'avance avec détermination'},
{title:'Sommeil et repos',text:'Je me donne la permission de me reposer\nMon corps se détend à chaque respiration\nJe glisse vers un sommeil paisible'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Effacer le texte') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

var rings = [
{ radius: 0.08, folds: 12, speed: 0.00008, dir: 1, type: 'dots' },
{ radius: 0.18, folds: 8, speed: 0.00006, dir: -1, type: 'petals' },
{ radius: 0.30, folds: 12, speed: 0.00004, dir: 1, type: 'lines' },
{ radius: 0.42, folds: 8, speed: 0.00007, dir: -1, type: 'petals' },
{ radius: 0.55, folds: 16, speed: 0.00003, dir: 1, type: 'dots' },
{ radius: 0.68, folds: 12, speed: 0.00005, dir: -1, type: 'lines' },
{title:'Arrêter de fumer',text:'Mes poumons sont plus propres chaque jour\nJe suis plus fort que toute envie\nChaque respiration est une victoire'}
];

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var cx = W / 2, cy = H / 2;
var maxR = Math.min(W, H) * 0.65;

// Trail effect
ctx.fillStyle = s.bgFill + '0.04)';
ctx.fillRect(0, 0, W, H);

var baseAngle = reducedMotion ? 0 : t * 0.00005;

for (var ri = 0; ri < rings.length; ri++) {
var ring = rings[ri];
var ringR = maxR * ring.radius;
var folds = ring.folds;
var angle = reducedMotion ? 0 : baseAngle * ring.dir + t * ring.speed * ring.dir;
var breathe = reducedMotion ? 1 : (1 + 0.15 * Math.sin(t * 0.0005 + ri * 1.2));
var alphaFade = 1 - ri * 0.10;

ctx.save();
ctx.translate(cx, cy);
ctx.rotate(angle);

for (var f = 0; f < folds; f++) {
var fAngle = (f / folds) * Math.PI * 2;
ctx.save();
ctx.rotate(fAngle);

if (ring.type === 'dots') {
var dotR = (3 + Math.sin(t * 0.0008 + ri + f) * 2) * breathe;
ctx.shadowColor = s.stroke;
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.arc(ringR * breathe, 0, dotR, 0, Math.PI * 2);
ctx.fillStyle = s.dot;
ctx.globalAlpha = alphaFade * 0.7;
ctx.fill();
ctx.shadowBlur = 0;
} else if (ring.type === 'petals') {
var petalLen = (20 + Math.sin(t * 0.0006 + ri * 2) * 10) * breathe;
var petalW = (8 + Math.sin(t * 0.0004 + f) * 3) * breathe;
ctx.shadowColor = s.stroke;
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.moveTo(ringR * breathe - petalLen * 0.3, 0);
ctx.quadraticCurveTo(ringR * breathe, -petalW, ringR * breathe + petalLen * 0.7, 0);
ctx.quadraticCurveTo(ringR * breathe, petalW, ringR * breathe - petalLen * 0.3, 0);
ctx.strokeStyle = s.stroke;
ctx.lineWidth = 1.2;
ctx.globalAlpha = alphaFade * 0.6;
ctx.stroke();
ctx.shadowBlur = 0;
} else if (ring.type === 'lines') {
var lineLen = (15 + Math.sin(t * 0.0007 + f * 0.5) * 8) * breathe;
ctx.shadowColor = s.strokeAlt;
ctx.shadowBlur = 3;
ctx.beginPath();
ctx.moveTo(ringR * breathe - lineLen, 0);
ctx.lineTo(ringR * breathe + lineLen, 0);
ctx.strokeStyle = s.strokeAlt;
ctx.lineWidth = 1;
ctx.globalAlpha = alphaFade * 0.4;
ctx.stroke();
// End dots
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.arc(ringR * breathe - lineLen, 0, 1.5, 0, Math.PI * 2);
ctx.arc(ringR * breathe + lineLen, 0, 1.5, 0, Math.PI * 2);
ctx.fillStyle = s.strokeAlt;
ctx.globalAlpha = alphaFade * 0.5;
ctx.fill();
ctx.shadowBlur = 0;
}

ctx.restore();
}

ctx.restore();
}

// Center dot
ctx.beginPath();
ctx.arc(cx, cy, 4, 0, Math.PI * 2);
ctx.fillStyle = s.dot;
ctx.globalAlpha = 0.8;
ctx.fill();
ctx.globalAlpha = 1;

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
// Clear canvas fully before starting
ctx.fillStyle = schemes[currentScheme].bg;
ctx.fillRect(0, 0, canvas.width, canvas.height);
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Mouvement réduit activé · Affichage statique<br>Appuyez n'importe où pour quitter';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Champ d'Étoiles - Visuel avec Affirmations
URL: https://guruka.com/fr/visuals/starfield/
Description: Étoiles scintillantes dérivant dans l'espace profond. Ajoutez votre propre texte d'affirmation, stocké en privé dans votre navigateur.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #020510;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/fr/visuals/" class="vp-back">&larr; Tous les Visuels</a>
<h1 class="vp-title">Champ d'Étoiles</h1>
<p class="vp-desc">Étoiles scintillantes dans l'espace profond.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#1e293b,#475569)"></div>
<span>Espace Profond</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#4c1d95,#a855f7)"></div>
<span>Nébuleuse</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#78350f,#f59e0b)"></div>
<span>Cosmos Chaud</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texte d'affirmation (optionnel)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">préréglages <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="optionnel. Entrez vos affirmations ici. Le texte s'affichera ligne par ligne."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Rythme <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Démarrer</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Appuyez n'importe où pour quitter</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'starfield';
var currentAffId = null;
var paceLabels = ["Très lent","Lent","Normal","Rapide","Très rapide"];
var currentPace = 2;
var schemes = [
{ name:'Deep Space', bg:'#020510', starColor:'rgba(200,220,255,', glowColor:'rgba(80,100,180,0.015)', shootColor:'rgba(200,220,255,' },
{ name:'Nebula', bg:'#0a0515', starColor:'rgba(220,200,255,', glowColor:'rgba(160,80,200,0.03)', shootColor:'rgba(200,160,255,' },
{ name:'Warm Cosmos', bg:'#0a0805', starColor:'rgba(255,220,160,', glowColor:'rgba(180,120,60,0.015)', shootColor:'rgba(255,200,100,' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Aucun',text:''},
{title:'Calme et clarté',text:'Mon esprit est calme et clair\nJe libère ce que je ne peux pas contrôler\nJe suis présent dans ce moment'},
{title:'Confiance en soi',text:'Je crois en moi et en mes capacités\nJe mérite de bonnes choses\nJe deviens plus fort chaque jour'},
{title:'Lâcher prise',text:'Je libère ce qui ne me sert plus\nJe me pardonne et pardonne aux autres\nJe fais de la place pour la paix'},
{title:'Gratitude',text:'Je suis reconnaissant pour ce moment\nL\'abondance coule dans ma vie\nJ\'apprécie les choses simples'},
{title:'Focus et énergie',text:'Ma concentration est vive et stable\nJe canalise mon énergie avec intention\nJ\'avance avec détermination'},
{title:'Sommeil et repos',text:'Je me donne la permission de me reposer\nMon corps se détend à chaque respiration\nJe glisse vers un sommeil paisible'},
{title:'Arrêter de fumer',text:'Mes poumons sont plus propres chaque jour\nJe suis plus fort que toute envie\nChaque respiration est une victoire'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Effacer le texte') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

var starsBack = [], starsMid = [], starsFront = [];
var shootingStars = [];
var lastShootTime = 0;

function initStars() {
starsBack = []; starsMid = []; starsFront = [];
shootingStars = [];
var W = canvas.width, H = canvas.height;
for (var i = 0; i < 200; i++) {
starsBack.push({ x: Math.random() * W, y: Math.random() * H, size: 0.5 + Math.random() * 1, baseAlpha: 0.3 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
for (var i = 0; i < 100; i++) {
starsMid.push({ x: Math.random() * W, y: Math.random() * H, size: 1 + Math.random() * 1.5, baseAlpha: 0.4 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
for (var i = 0; i < 50; i++) {
starsFront.push({ x: Math.random() * W, y: Math.random() * H, size: 1.5 + Math.random() * 2, baseAlpha: 0.6 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running) initStars();
}

function drawStarLayer(stars, speed, t, s, W, H) {
for (var i = 0; i < stars.length; i++) {
var st = stars[i];
var twinkle = st.baseAlpha * (0.5 + 0.5 * Math.sin(t * 0.001 + st.phase));
// Glow for larger stars
if (st.size > 2) {
ctx.beginPath();
ctx.arc(st.x, st.y, st.size * 3, 0, Math.PI * 2);
ctx.fillStyle = s.starColor + (twinkle * 0.15).toFixed(3) + ')';
ctx.fill();
}
ctx.beginPath();
ctx.arc(st.x, st.y, st.size, 0, Math.PI * 2);
ctx.fillStyle = s.starColor + twinkle.toFixed(3) + ')';
ctx.fill();
}
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;

ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);

// Subtle center glow
var glow = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.max(W, H) * 0.5);
glow.addColorStop(0, s.glowColor);
glow.addColorStop(1, 'transparent');
ctx.fillStyle = glow;
ctx.fillRect(0, 0, W, H);

// Draw star layers with parallax speeds
drawStarLayer(starsBack, 0.025, t, s, W, H);
drawStarLayer(starsMid, 0.06, t, s, W, H);
drawStarLayer(starsFront, 0.12, t, s, W, H);

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initStars();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Mouvement réduit activé · Affichage statique<br>Appuyez n'importe où pour quitter';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Color Clash - 脳トレゲーム
URL: https://guruka.com/ja/games/color-clash/
Description: ルールに従って色を選択。

<style>
#color-clash-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #color-clash-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#cc-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.cc-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#cc-instructions .cc-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#cc-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#cc-instructions .cc-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #cc-instructions .cc-subtitle {
color: var(--color-dark-text-secondary);
}

#cc-instructions .cc-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #cc-instructions .cc-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#cc-instructions .cc-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#cc-instructions .cc-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#cc-instructions .cc-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.cc-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .cc-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.cc-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.cc-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.cc-btn-primary:hover {
background: var(--color-primary-hover);
}

.cc-btn-primary:active {
transform: scale(0.97);
}

.cc-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.cc-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .cc-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#cc-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#cc-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: cc-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #cc-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes cc-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.cc-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.cc-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.cc-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .cc-wizard-desc {
color: var(--color-dark-text-secondary);
}
.cc-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.cc-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.cc-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"] .cc-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .cc-wizard-dot.active {
background: var(--color-primary);
}
.cc-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.cc-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#cc-wizard-card {
padding: 1.5rem 1rem;
}
.cc-wizard-icon {
font-size: 2rem;
}
.cc-wizard-title {
font-size: 1.1rem;
}
.cc-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#cc-playing {
display: none;
flex: 1;
flex-direction: column;
}

.cc-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .cc-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.cc-stat {
text-align: center;
}

.cc-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .cc-stat-label {
color: var(--color-dark-text-secondary);
}

.cc-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.cc-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.cc-level-text {
font-weight: 600;
}

.cc-modifier-badge {
background: #ec4899;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.cc-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .cc-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.cc-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.cc-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .cc-timer-bar {
background: var(--color-dark-bg-secondary);
}

.cc-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.cc-timer-fill.cc-timer-warning {
background: #ef4444;
}

/* ── Rule Indicator ── */
.cc-rule-indicator {
text-align: center;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 1rem;
transition: background 0.3s, color 0.3s;
}

.cc-rule-ink {
background: rgba(236,72,153,0.15);
color: #ec4899;
border: 1px solid rgba(236,72,153,0.3);
}

[data-theme="dark"] .cc-rule-ink {
background: rgba(236,72,153,0.25);
color: #f472b6;
}

.cc-rule-word {
background: rgba(59,130,246,0.15);
color: #3b82f6;
border: 1px solid rgba(59,130,246,0.3);
}

[data-theme="dark"] .cc-rule-word {
background: rgba(59,130,246,0.25);
color: #60a5fa;
}

.cc-rule-bg {
background: rgba(168,85,247,0.15);
color: #a855f7;
border: 1px solid rgba(168,85,247,0.3);
}

[data-theme="dark"] .cc-rule-bg {
background: rgba(168,85,247,0.25);
color: #c084fc;
}

/* ── Stimulus Display ── */
.cc-stimulus-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
position: relative;
}

.cc-stimulus-word {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.2;
animation: cc-stimulus-enter 0.2s ease-out;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.cc-stimulus-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
animation: cc-stimulus-enter 0.2s ease-out;
}

.cc-bg-square {
width: 50px;
height: 50px;
border-radius: 0.5rem;
border: 2px solid rgba(0,0,0,0.1);
flex-shrink: 0;
}

[data-theme="dark"] .cc-bg-square {
border-color: rgba(255,255,255,0.15);
}

@keyframes cc-stimulus-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.cc-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.cc-feedback-flash.cc-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.cc-feedback-flash.cc-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.cc-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.cc-feedback-icon.cc-show-check {
animation: cc-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.cc-feedback-icon.cc-show-x {
animation: cc-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes cc-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Color Answer Buttons ── */
.cc-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.cc-answer-btn {
padding: 0.75rem;
border: 2px solid transparent;
border-radius: 0.75rem;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, opacity 0.15s;
color: #fff;
min-height: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}

.cc-color-circle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.4);
background: currentColor;
}

.cc-answer-btn:active {
transform: scale(0.95);
}

.cc-answer-btn:hover {
opacity: 0.9;
border-color: rgba(255,255,255,0.5);
}

.cc-answer-btn.cc-correct-flash {
border-color: #22c55e;
box-shadow: 0 0 15px rgba(34,197,94,0.4);
}

.cc-answer-btn.cc-wrong-flash {
border-color: #ef4444;
box-shadow: 0 0 15px rgba(239,68,68,0.4);
}

.cc-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .cc-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#cc-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#cc-pause-overlay .cc-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#cc-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.cc-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: cc-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .cc-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes cc-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.cc-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.cc-complete-card .cc-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.cc-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.cc-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: cc-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes cc-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.cc-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.cc-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .cc-complete-stat {
background: var(--color-dark-bg-secondary);
}

.cc-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .cc-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.cc-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.cc-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.cc-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .cc-back-link {
color: var(--color-dark-text-secondary);
}

.cc-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.cc-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.cc-level-up-toast.cc-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#color-clash-game {
padding: 0.5rem;
}
.cc-stimulus-word {
font-size: 2.5rem;
}
.cc-answer-btn {
padding: 0.5rem;
min-height: 60px;
font-size: 0.7rem;
}
.cc-color-circle {
width: 40px;
height: 40px;
}
.cc-header {
padding: 0.5rem;
gap: 0.25rem;
}
.cc-stat-value {
font-size: 1rem;
}
#cc-instructions { padding: 0.75rem 0.5rem; }
#cc-instructions .cc-icon { font-size: 2rem; margin-bottom: 0; }
#cc-instructions h2 { font-size: 1.3rem; }
#cc-instructions .cc-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#cc-instructions .cc-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#cc-instructions .cc-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.cc-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
.cc-bg-square { width: 40px; height: 40px; }
}
@media (max-width: 640px) {
#color-clash-game {
padding: 0.75rem;
}
.cc-stimulus-word {
font-size: 3rem;
}
.cc-answer-btn {
padding: 0.625rem;
}
}
@media (max-width: 360px) {
.cc-stimulus-word {
font-size: 2rem;
}
.cc-answer-btn {
padding: 0.5rem;
font-size: 0.65rem;
min-height: 54px;
}
.cc-color-circle {
width: 34px;
height: 34px;
}
.cc-complete-stats {
grid-template-columns: 1fr 1fr;
}
.cc-final-score {
font-size: 2rem;
}
.cc-header {
padding: 0.375rem;
}
.cc-stat-value {
font-size: 0.9rem;
}
.cc-rule-indicator {
font-size: 0.8rem;
padding: 0.4rem 0.75rem;
}
}
@keyframes cc-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.cc-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.cc-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: cc-confetti-fall 2.5s ease-in forwards;
}
.cc-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(236,72,153,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: cc-glow-fade 1s ease-out forwards;
}
@keyframes cc-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.cc-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: cc-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(236,72,153,0.4);
}
@keyframes cc-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#color-clash-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#color-clash-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #color-clash-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#color-clash-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#color-clash-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="color-clash-game">

<div id="cc-instructions">
<div class="cc-title-row"><span class="cc-icon">&#127912;</span><h2>Color Clash</h2></div>
<p class="cc-subtitle">Stroopベースの抑制制御と選択的注意</p>
<div class="cc-how-to">
<h3>遊び方</h3>
<ol>
<li>色の名前が<strong>別のインクの色</strong>で表示されます。</li>
<li><strong>ルールインジケーター</strong>に従って、現在のルールに合った正しい色をタップしてください。</li>
<li>レベルが上がると、ルールが<strong>「インクの色」</strong>と<strong>「単語の意味」</strong>の間で切り替わります。</li>


</ol>
</div>
<div id="cc-best-display" class="cc-personal-best" style="display:none;">
ベスト: <strong id="cc-best-score">0</strong> ポイント
</div>
<button class="cc-btn-primary" id="cc-start-btn">ゲームスタート</button>
<div id="cc-challenge-banner-wrap"></div>
</div>

<div id="cc-wizard">
<div id="cc-wizard-card"></div>
</div>

<div id="cc-playing">
<div class="cc-header">
<div class="cc-stat">
<div class="cc-stat-label">スコア</div>
<div class="cc-stat-value" id="cc-score">0</div>
</div>
<div class="cc-stat">
<div class="cc-stat-label">連続</div>
<div class="cc-stat-value" id="cc-streak">0</div>
</div>
<div class="cc-stat">
<div class="cc-stat-label">Level</div>
<div class="cc-stat-value" id="cc-level">1</div>
</div>
</div>
<div class="cc-level-info">
<span class="cc-level-text">Level <span id="cc-level-text">1</span></span>
<span class="cc-modifier-badge" id="cc-modifier-badge" style="display:none;">ルール切替</span>
</div>
<div class="cc-progress-bar">
<div class="cc-progress-fill" id="cc-progress-fill" style="width:0%"></div>
</div>
<div class="cc-timer-bar">
<div class="cc-timer-fill" id="cc-timer-fill" style="width:100%"></div>
</div>
<div class="cc-rule-indicator cc-rule-ink" id="cc-rule-indicator">インクの色をタップ</div>
<div class="cc-stimulus-area">
<div class="cc-feedback-flash" id="cc-feedback-flash"></div>
<div class="cc-feedback-icon" id="cc-feedback-icon"></div>
<div id="cc-stimulus-wrap" class="cc-stimulus-wrap">
<span class="cc-stimulus-word" id="cc-stimulus-word"></span>
<div class="cc-bg-square" id="cc-bg-square" style="display:none;"></div>
</div>
</div>
<div class="cc-answers" id="cc-answers">
<button class="cc-answer-btn" id="cc-ans-0"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-1"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-2"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-3"><div class="cc-color-circle"></div><span></span></button>
</div>
<div class="cc-playing-hint"><strong>1-4</strong>キーで回答 · <strong>Esc</strong>キーで一時停止</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="cc-pause-btn" type="button">一時停止</button>
<button class="gk-finish-btn" id="cc-finish-btn" type="button">終了</button>
</div>
</div>

<div id="cc-pause-overlay">
<div class="cc-pause-text">一時停止中</div>
<button class="cc-btn-primary" id="cc-resume-btn">再開</button>
</div>

<div id="cc-complete-overlay">
<div class="cc-complete-card">
<button class="gk-complete-close" id="cc-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="cc-trophy">&#127942;</div>
<h2>終了！</h2>
<div class="cc-final-score" id="cc-final-score">0</div>
<div id="cc-new-best" class="cc-new-best" style="display:none;">&#11088; 新記録！</div>
<div class="gk-challenge-result" id="cc-challenge-result" style="display:none;"></div>
<div class="cc-complete-stats">
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">レベル</div>
<div class="cc-complete-stat-value" id="cc-final-level">1</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">正確性</div>
<div class="cc-complete-stat-value" id="cc-final-accuracy">0%</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">最高連続</div>
<div class="cc-complete-stat-value" id="cc-final-streak">0</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">ベスト</div>
<div class="cc-complete-stat-value" id="cc-final-best">0</div>
</div>
</div>
<div class="cc-complete-actions">
<button class="cc-btn-primary" id="cc-play-again-btn">もう一度</button>
<button class="gk-runtime-history-toggle" id="cc-history-toggle" type="button">Show History</button>
<a href="/ja/games/" class="cc-back-link">&larr; すべてのゲーム</a>
</div>
<div class="gk-runtime-history-panel" id="cc-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="cc-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="cc-share-btn">&#128279; 結果をシェア</button>
<div class="gk-share-copied" id="cc-share-copied" style="display:none;">リンクをコピーしました！</div>
</div>
</div>
</div>

<div class="cc-level-up-toast" id="cc-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_color-clash_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('cc-history-toggle', 'cc-history-panel', 'cc-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

/* ── Color pool ── */
var COLORS = [
{ name: '赤', hex: '#ef4444' },
{ name: '青', hex: '#3b82f6' },
{ name: '緑', hex: '#22c55e' },
{ name: '黄', hex: '#eab308' },
{ name: '紫', hex: '#a855f7' },
{ name: 'Orange', hex: '#f97316' },
{ name: 'ピンク', hex: '#ec4899' },
{ name: 'ターコイズ', hex: '#06b6d4' }
];

var RULES = { INK: 'ink', WORD: 'word', BG: 'bg' };

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctColorName: '',
currentRule: RULES.INK,
currentStimulus: null,
currentChoices: [],
roundsSinceRuleSwitch: 0,
nextRuleSwitchAt: 0
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('cc-instructions');
var elWizard = document.getElementById('cc-wizard');
var elWizardCard = document.getElementById('cc-wizard-card');
var elPlaying = document.getElementById('cc-playing');
var elPauseOverlay = document.getElementById('cc-pause-overlay');
var elCompleteOverlay = document.getElementById('cc-complete-overlay');
var elScore = document.getElementById('cc-score');
var elStreak = document.getElementById('cc-streak');
var elLevel = document.getElementById('cc-level');
var elLevelText = document.getElementById('cc-level-text');
var elModifierBadge = document.getElementById('cc-modifier-badge');
var elProgressFill = document.getElementById('cc-progress-fill');
var elTimerFill = document.getElementById('cc-timer-fill');
var elRuleIndicator = document.getElementById('cc-rule-indicator');
var elStimulusWord = document.getElementById('cc-stimulus-word');
var elStimulusWrap = document.getElementById('cc-stimulus-wrap');
var elBgSquare = document.getElementById('cc-bg-square');
var elFeedbackFlash = document.getElementById('cc-feedback-flash');
var elFeedbackIcon = document.getElementById('cc-feedback-icon');
var elFinalScore = document.getElementById('cc-final-score');
var elNewBest = document.getElementById('cc-new-best');
var elFinalLevel = document.getElementById('cc-final-level');
var elFinalAccuracy = document.getElementById('cc-final-accuracy');
var elFinalStreak = document.getElementById('cc-final-streak');
var elFinalBest = document.getElementById('cc-final-best');
var elBestDisplay = document.getElementById('cc-best-display');
var elBestScore = document.getElementById('cc-best-score');
var elLevelToast = document.getElementById('cc-level-toast');
var btnStart = document.getElementById('cc-start-btn');
var btnResume = document.getElementById('cc-resume-btn');
var btnPlayAgain = document.getElementById('cc-play-again-btn');
var answerBtns = [
document.getElementById('cc-ans-0'),
document.getElementById('cc-ans-1'),
document.getElementById('cc-ans-2'),
document.getElementById('cc-ans-3')
];

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getColorPool(lvl) {
if (lvl <= 9) return COLORS.slice(0, 4);
return COLORS;
}

/* ── Rule logic ── */
function getRuleForLevel(lvl) {
if (lvl <= 6) return RULES.INK;
return RULES.INK;
}

function shouldSwitchRules(lvl) {
return lvl >= 7;
}

function isTripleStroop(lvl) {
return lvl >= 17;
}

function isCongruent(lvl) {
return lvl <= 3;
}

function doesRuleSwitchMidLevel(lvl) {
return lvl >= 13 && lvl <= 16;
}

function updateRuleIndicator() {
elRuleIndicator.className = 'cc-rule-indicator';
if (state.currentRule === RULES.INK) {
elRuleIndicator.textContent = 'インクの色をタップ';
elRuleIndicator.classList.add('cc-rule-ink');
} else if (state.currentRule === RULES.WORD) {
elRuleIndicator.textContent = '単語の意味をタップ';
elRuleIndicator.classList.add('cc-rule-word');
} else if (state.currentRule === RULES.BG) {
elRuleIndicator.textContent = '背景色をタップ';
elRuleIndicator.classList.add('cc-rule-bg');
}
}

/* ── Random helpers ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}

function pickRandom(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function pickDifferent(arr, exclude) {
var filtered = arr.filter(function(c) { return c.name !== exclude.name; });
return pickRandom(filtered);
}

/* ── Generate stimulus ── */
function generateStimulus(lvl) {
var pool = getColorPool(lvl);
var wordColor, inkColor, bgColor, correctColor;

if (isCongruent(lvl)) {
/* L1-3: congruent, word matches ink */
wordColor = pickRandom(pool);
inkColor = wordColor;
bgColor = null;
state.currentRule = RULES.INK;
correctColor = wordColor;
} else if (lvl <= 6) {
/* L4-6: incongruent, identify ink */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
state.currentRule = RULES.INK;
correctColor = inkColor;
} else if (lvl <= 9) {
/* L7-9: rule alternates each round between ink and word */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else if (lvl <= 12) {
/* L10-12: 8 colors, rule alternates */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else if (lvl <= 16) {
/* L13-16: rule switches mid-level */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else {
/* L17-20: triple stroop */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = pickDifferent(pool, inkColor);
while (bgColor.name === wordColor.name) {
bgColor = pickDifferent(pool, inkColor);
}
if (state.currentRule === RULES.INK) {
correctColor = inkColor;
} else if (state.currentRule === RULES.WORD) {
correctColor = wordColor;
} else {
correctColor = bgColor;
}
}

return {
wordText: wordColor.name,
inkHex: inkColor.hex,
bgColor: bgColor,
correctColor: correctColor,
pool: pool
};
}

function generateColorChoices(correctColor, pool) {
var choices = [correctColor];
var attempts = 0;
while (choices.length < 4 && attempts < 50) {
var candidate = pickRandom(pool);
var isDuplicate = false;
for (var i = 0; i < choices.length; i++) {
if (choices[i].name === candidate.name) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
choices.push(candidate);
}
attempts++;
}
/* Fill remaining if pool is too small */
var allColors = COLORS.slice();
while (choices.length < 4) {
var c = pickRandom(allColors);
var dup = false;
for (var k = 0; k < choices.length; k++) {
if (choices[k].name === c.name) { dup = true; break; }
}
if (!dup) choices.push(c);
}
return shuffle(choices);
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
if (shouldSwitchRules(state.level)) {
elModifierBadge.style.display = '';
if (isTripleStroop(state.level)) {
elModifierBadge.textContent = 'トリプルStroop';
} else if (doesRuleSwitchMidLevel(state.level)) {
elModifierBadge.textContent = 'レベル内切替';
} else {
elModifierBadge.textContent = 'ルール切替';
}
} else {
elModifierBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('cc-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('cc-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('cc-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'cc-feedback-flash';
elFeedbackIcon.className = 'cc-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('cc-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('cc-show-check');
} else {
elFeedbackFlash.classList.add('cc-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('cc-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'cc-feedback-flash';
elFeedbackIcon.className = 'cc-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('cc-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('cc-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'cc-correct-flash' : 'cc-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('cc-correct-flash', 'cc-wrong-flash');
}, 400);
}

/* ── Determine rule for the next round ── */
function determineRule() {
var lvl = state.level;
if (lvl <= 3) {
state.currentRule = RULES.INK;
} else if (lvl <= 6) {
state.currentRule = RULES.INK;
} else if (lvl <= 12) {
/* Alternate each round */
state.currentRule = (state.round % 2 === 0) ? RULES.INK : RULES.WORD;
} else if (lvl <= 16) {
/* Mid-level switching every 3-5 rounds */
state.roundsSinceRuleSwitch++;
if (state.roundsSinceRuleSwitch >= state.nextRuleSwitchAt) {
state.currentRule = (state.currentRule === RULES.INK) ? RULES.WORD : RULES.INK;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
}
} else {
/* L17-20: triple stroop, cycle through ink/word/bg */
var rules = [RULES.INK, RULES.WORD, RULES.BG];
state.roundsSinceRuleSwitch++;
if (state.roundsSinceRuleSwitch >= state.nextRuleSwitchAt) {
var currentIdx = rules.indexOf(state.currentRule);
var nextIdx = (currentIdx + 1) % rules.length;
state.currentRule = rules[nextIdx];
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(2, 4);
}
}
}

/* ── Set color button appearance ── */
function setColorButton(btn, color) {
btn.style.background = color.hex;
btn.style.borderColor = 'transparent';
var circle = btn.querySelector('.cc-color-circle');
var label = btn.querySelector('span');
circle.style.background = '#fff';
circle.style.borderColor = 'rgba(255,255,255,0.6)';
circle.style.background = color.hex;
circle.style.filter = 'brightness(1.2)';
label.textContent = color.name;
btn.dataset.colorName = color.name;
}

function findColorByName(name) {
for (var i = 0; i < COLORS.length; i++) {
if (COLORS[i].name === name) return COLORS[i];
}
return null;
}

function colorHistoryChip(color) {
if (!color) return 'No answer';
return '<span class="gk-history-swatch" style="background:' + runHistory.escape(color.hex) + '"></span>' + runHistory.escape(color.name);
}

function recordColorHistory(selectedName, correct) {
var selected = findColorByName(selectedName);
var correctColor = state.currentStimulus ? state.currentStimulus.correctColor : findColorByName(state.correctColorName);
var ruleText = elRuleIndicator ? elRuleIndicator.textContent : 'Color rule';
var stimulus = state.currentStimulus;
var html = '<strong>' + runHistory.escape(ruleText) + '</strong>';
if (stimulus) {
html += '<div class="gk-runtime-history-sub">Word: ' + runHistory.escape(stimulus.wordText) + ' | Ink: <span class="gk-history-swatch" style="background:' + runHistory.escape(stimulus.inkHex) + '"></span></div>';
}
html += '<div class="gk-runtime-history-sub">Your: ' + colorHistoryChip(selected) + ' | Correct: ' + colorHistoryChip(correctColor) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var chosenName = answerBtns[chosenIdx].dataset.colorName;
var correct = (chosenName === state.correctColorName);

state.totalAnswered++;
recordColorHistory(chosenName, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordColorHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

/* Determine rule for this round */
determineRule();
updateRuleIndicator();

var stimulus = generateStimulus(state.level);
state.correctColorName = stimulus.correctColor.name;
state.currentStimulus = stimulus;

/* Display the stimulus word */
elStimulusWord.textContent = stimulus.wordText;
elStimulusWord.style.color = stimulus.inkHex;
elStimulusWrap.style.animation = 'none';
void elStimulusWrap.offsetWidth;
elStimulusWrap.style.animation = '';

/* Handle background square for triple stroop */
if (stimulus.bgColor && isTripleStroop(state.level)) {
elBgSquare.style.display = 'block';
elBgSquare.style.background = stimulus.bgColor.hex;
} else {
elBgSquare.style.display = 'none';
}

/* Generate and display color choices */
var choices = generateColorChoices(stimulus.correctColor, stimulus.pool);
state.currentChoices = choices.slice();
for (var i = 0; i < 4; i++) {
setColorButton(answerBtns[i], choices[i]);
}

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'cc-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'cc-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'cc-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.cc-trophy');
var title = document.querySelector('#cc-complete-overlay .cc-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'すばらしい！';
elNewBest.className = 'cc-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F すばらしい！新記録！';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'お疲れさまでした！';
elNewBest.className = 'cc-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('cc-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var CC_WIZARD_STEPS = [
{icon: '\uD83C\uDFA8', title: '色を読んで、単語を読まない', desc: 'ルールに従って色を選びます。'},
{icon: '\uD83D\uDD04', title: 'レベルアップでルールが変わる', desc: '高レベルでルールが変わります。'},
{icon: '\u26A1', title: 'すばやく', desc: '時間内に答えましょう。', final: true}
];
var ccWizardStep = 0;

function renderWizardStep() {
var s = CC_WIZARD_STEPS[ccWizardStep];
var dotsHtml = '';
for (var i = 0; i < CC_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="cc-wizard-dot' + (i === ccWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'ゲームスタート' : '次へ';
elWizardCard.innerHTML =
'<div class="cc-wizard-icon">' + s.icon + '</div>' +
'<div class="cc-wizard-title">' + s.title + '</div>' +
'<div class="cc-wizard-desc">' + s.desc + '</div>' +
'<div class="cc-wizard-dots">' + dotsHtml + '</div>' +
'<button class="cc-wizard-btn" id="cc-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'cc-wizard-enter 0.3s ease-out';
document.getElementById('cc-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ccWizardStep < CC_WIZARD_STEPS.length - 1) {
ccWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ccWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctColorName = '';
state.currentRule = RULES.INK;
state.currentStimulus = null;
state.currentChoices = [];
runHistory.clear();
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('cc-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('cc-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('cc-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('cc-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('cc-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('cc-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Color Clash', '/ja/games/color-clash/', 'cc-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key >= '1' && e.key <= '4') {
e.preventDefault();
processAnswer(parseInt(e.key, 10) - 1);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('cc-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Number Crunch - 脳トレゲーム
URL: https://guruka.com/ja/games/number-crunch/
Description: 制限時間内に暗算。

<style>
#number-crunch-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #number-crunch-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#nc-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.nc-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#nc-instructions.nc-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#nc-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#nc-instructions.nc-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #nc-instructions.nc-subtitle {
color: var(--color-dark-text-secondary);
}

#nc-instructions.nc-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #nc-instructions.nc-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#nc-instructions.nc-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#nc-instructions.nc-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#nc-instructions.nc-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.nc-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.nc-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.nc-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.nc-btn-primary:hover {
background: var(--color-primary-hover);
}

.nc-btn-primary:active {
transform: scale(0.97);
}

.nc-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.nc-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"].nc-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#nc-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#nc-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: nc-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #nc-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes nc-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.nc-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.nc-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.nc-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].nc-wizard-desc {
color: var(--color-dark-text-secondary);
}
.nc-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.nc-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.nc-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].nc-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"].nc-wizard-dot.active {
background: var(--color-primary);
}
.nc-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.nc-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#nc-wizard-card {
padding: 1.5rem 1rem;
}
.nc-wizard-icon {
font-size: 2rem;
}
.nc-wizard-title {
font-size: 1.1rem;
}
.nc-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#nc-playing {
display: none;
flex: 1;
flex-direction: column;
}

.nc-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].nc-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-stat {
text-align: center;
}

.nc-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"].nc-stat-label {
color: var(--color-dark-text-secondary);
}

.nc-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.nc-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.nc-level-text {
font-weight: 600;
}

.nc-modifier-badge {
background: #6366f1;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.nc-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].nc-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.nc-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"].nc-timer-bar {
background: var(--color-dark-bg-secondary);
}

.nc-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.nc-timer-fill.nc-timer-warning {
background: #ef4444;
}

/* ── Equation Display ── */
.nc-equation-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
position: relative;
}

.nc-rule-modifier {
background: rgba(99,102,241,0.1);
color: #6366f1;
padding: 0.4rem 1rem;
border-radius: 2rem;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1rem;
display: none;
}

[data-theme="dark"].nc-rule-modifier {
background: rgba(99,102,241,0.2);
color: #818cf8;
}

.nc-equation {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
animation: nc-eq-enter 0.2s ease-out;
text-align: center;
}

@keyframes nc-eq-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.nc-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.nc-feedback-flash.nc-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.nc-feedback-flash.nc-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.nc-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.nc-feedback-icon.nc-show-check {
animation: nc-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.nc-feedback-icon.nc-show-x {
animation: nc-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes nc-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Answer Buttons ── */
.nc-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.nc-answer-btn {
padding: 1rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.25rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
}

[data-theme="dark"].nc-answer-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.nc-answer-btn:active {
transform: scale(0.95);
}

.nc-answer-btn:hover {
border-color: var(--color-primary);
background: rgba(99,102,241,0.05);
}

[data-theme="dark"].nc-answer-btn:hover {
background: rgba(99,102,241,0.15);
}

.nc-answer-btn.nc-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.nc-answer-btn.nc-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.nc-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-playing-hint {
color: var(--color-dark-text-secondary);
}

#number-crunch-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary);
border-radius: 0.5rem;
background: var(--color-bg-primary);
color: var(--color-primary);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#number-crunch-game .gk-finish-btn:hover {
background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] #number-crunch-game .gk-finish-btn {
background: var(--color-dark-bg-secondary);
color: #fbbf24;
border-color: #fbbf24;
}

/* ── Pause Overlay ── */
#nc-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#nc-pause-overlay.nc-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#nc-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.nc-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: nc-modal-enter 0.3s ease-out;
}

[data-theme="dark"].nc-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes nc-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.nc-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.nc-complete-card.nc-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.nc-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.nc-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: nc-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes nc-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.nc-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.nc-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"].nc-complete-stat {
background: var(--color-dark-bg-secondary);
}

.nc-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.nc-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.nc-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.nc-history-toggle {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.nc-history-toggle:hover {
background: rgba(245, 158, 11, 0.1);
}

.nc-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 240px;
overflow: auto;
border: 1px solid var(--color-border);
border-radius: 0.5rem;
background: var(--color-bg-secondary);
}

[data-theme="dark"] .nc-history-panel {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-history-list {
display: flex;
flex-direction: column;
}

.nc-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border);
font-size: 0.82rem;
}

.nc-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .nc-history-row {
border-color: var(--color-dark-border);
}

.nc-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: baseline;
}

.nc-history-status {
font-weight: 800;
white-space: nowrap;
}

.nc-history-correct .nc-history-status {
color: #16a34a;
}

.nc-history-wrong .nc-history-status {
color: #dc2626;
}

.nc-history-eq {
font-weight: 700;
text-align: right;
}

.nc-history-answer {
margin-top: 0.25rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .nc-history-answer {
color: var(--color-dark-text-secondary);
}

.nc-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary);
text-align: center;
}

.nc-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"].nc-back-link {
color: var(--color-dark-text-secondary);
}

.nc-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.nc-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.nc-level-up-toast.nc-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#number-crunch-game {
padding: 0.5rem;
}
.nc-equation {
font-size: 2rem;
}
.nc-answer-btn {
padding: 0.75rem;
font-size: 1.1rem;
min-height: 48px;
}
.nc-header {
padding: 0.5rem;
gap: 0.25rem;
}
.nc-stat-value {
font-size: 1rem;
}
#nc-instructions { padding: 0.75rem 0.5rem; }
#nc-instructions.nc-icon { font-size: 2rem; margin-bottom: 0; }
#nc-instructions h2 { font-size: 1.3rem; }
#nc-instructions.nc-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#nc-instructions.nc-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#nc-instructions.nc-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.nc-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#number-crunch-game {
padding: 0.75rem;
}
.nc-equation {
font-size: 2.25rem;
}
.nc-answer-btn {
padding: 0.875rem;
}
}
@media (max-width: 360px) {
.nc-equation {
font-size: 1.75rem;
}
.nc-answer-btn {
padding: 0.625rem;
font-size: 1rem;
}
.nc-complete-stats {
grid-template-columns: 1fr 1fr;
}
.nc-final-score {
font-size: 2rem;
}
.nc-header {
padding: 0.375rem;
}
.nc-stat-value {
font-size: 0.9rem;
}
}
@keyframes nc-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.nc-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.nc-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: nc-confetti-fall 2.5s ease-in forwards;
}
.nc-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: nc-glow-fade 1s ease-out forwards;
}
@keyframes nc-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.nc-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: nc-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes nc-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#number-crunch-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#number-crunch-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="number-crunch-game">

<div id="nc-instructions">
<div class="nc-title-row"><span class="nc-icon">&#129518;</span><h2>Number Crunch</h2></div>
<p class="nc-subtitle">暗算</p>
<div class="nc-how-to">
<h3>遊び方</h3>
<ol>
<li>式を解きます。</li>
<li>4つの選択肢から<strong>正しい答え</strong>を選んでください。</li>
<li>レベル6以降は式に追加ステップが出ます。</li>


</ol>
</div>
<div id="nc-best-display" class="nc-personal-best" style="display:none;">
ベスト: <strong id="nc-best-score">0</strong> ポイント
</div>
<button class="nc-btn-primary" id="nc-start-btn">ゲームスタート</button>
<div id="nc-challenge-banner-wrap"></div>
</div>

<div id="nc-wizard">
<div id="nc-wizard-card"></div>
</div>

<div id="nc-playing">
<div class="nc-header">
<div class="nc-stat">
<div class="nc-stat-label">スコア</div>
<div class="nc-stat-value" id="nc-score">0</div>
</div>
<div class="nc-stat">
<div class="nc-stat-label">連続</div>
<div class="nc-stat-value" id="nc-streak">0</div>
</div>
<div class="nc-stat">
<div class="nc-stat-label">Level</div>
<div class="nc-stat-value" id="nc-level">1</div>
</div>
</div>
<div class="nc-level-info">
<span class="nc-level-text">Level <span id="nc-level-text">1</span></span>
<span class="nc-modifier-badge" id="nc-modifier-badge" style="display:none;">Extra</span>
</div>
<div class="nc-progress-bar">
<div class="nc-progress-fill" id="nc-progress-fill" style="width:0%"></div>
</div>
<div class="nc-timer-bar">
<div class="nc-timer-fill" id="nc-timer-fill" style="width:100%"></div>
</div>
<div class="nc-equation-area">
<div class="nc-feedback-flash" id="nc-feedback-flash"></div>
<div class="nc-feedback-icon" id="nc-feedback-icon"></div>
<div class="nc-rule-modifier" id="nc-rule-modifier"></div>
<div class="nc-equation" id="nc-equation"></div>
</div>
<div class="nc-answers" id="nc-answers">
<button class="nc-answer-btn" id="nc-ans-0"></button>
<button class="nc-answer-btn" id="nc-ans-1"></button>
<button class="nc-answer-btn" id="nc-ans-2"></button>
<button class="nc-answer-btn" id="nc-ans-3"></button>
</div>
<div class="nc-playing-hint"><strong>1-4</strong>キーで回答 · <strong>Esc</strong>キーで一時停止</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="nc-pause-btn" type="button">一時停止</button>
<button class="gk-finish-btn" id="nc-finish-btn" type="button">終了</button>
</div>
</div>

<div id="nc-pause-overlay">
<div class="nc-pause-text">一時停止中</div>
<button class="nc-btn-primary" id="nc-resume-btn">再開</button>
</div>

<div id="nc-complete-overlay">
<div class="nc-complete-card">
<button class="gk-complete-close" id="nc-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="nc-trophy">&#127942;</div>
<h2>終了！</h2>
<div class="nc-final-score" id="nc-final-score">0</div>
<div id="nc-new-best" class="nc-new-best" style="display:none;">&#11088; 新記録！</div>
<div class="gk-challenge-result" id="nc-challenge-result" style="display:none;"></div>
<div class="nc-complete-stats">
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">レベル</div>
<div class="nc-complete-stat-value" id="nc-final-level">1</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">正確性</div>
<div class="nc-complete-stat-value" id="nc-final-accuracy">0%</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">最高連続</div>
<div class="nc-complete-stat-value" id="nc-final-streak">0</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">ベスト</div>
<div class="nc-complete-stat-value" id="nc-final-best">0</div>
</div>
</div>
<div class="nc-complete-actions">
<button class="nc-btn-primary" id="nc-play-again-btn">もう一度</button>
<button class="gk-runtime-history-toggle" id="nc-history-toggle">Show History</button>
<a href="/ja/games/" class="nc-back-link">&larr; すべてのゲーム</a>
</div>
<div class="gk-runtime-history-panel" id="nc-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="nc-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="nc-share-btn">&#128279; 結果をシェア</button>
<div class="gk-share-copied" id="nc-share-copied" style="display:none;">リンクをコピーしました！</div>
</div>
</div>
</div>

<div class="nc-level-up-toast" id="nc-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_number-crunch_best';

var challenge = GK.parseChallenge();

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctAnswer: 0,
currentModifier: null,
currentEquation: '',
currentChoices: []
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('nc-instructions');
var elWizard = document.getElementById('nc-wizard');
var elWizardCard = document.getElementById('nc-wizard-card');
var elPlaying = document.getElementById('nc-playing');
var elPauseOverlay = document.getElementById('nc-pause-overlay');
var elCompleteOverlay = document.getElementById('nc-complete-overlay');
var elScore = document.getElementById('nc-score');
var elStreak = document.getElementById('nc-streak');
var elLevel = document.getElementById('nc-level');
var elLevelText = document.getElementById('nc-level-text');
var elModifierBadge = document.getElementById('nc-modifier-badge');
var elProgressFill = document.getElementById('nc-progress-fill');
var elTimerFill = document.getElementById('nc-timer-fill');
var elEquation = document.getElementById('nc-equation');
var elRuleModifier = document.getElementById('nc-rule-modifier');
var elFeedbackFlash = document.getElementById('nc-feedback-flash');
var elFeedbackIcon = document.getElementById('nc-feedback-icon');
var elFinalScore = document.getElementById('nc-final-score');
var elNewBest = document.getElementById('nc-new-best');
var elFinalLevel = document.getElementById('nc-final-level');
var elFinalAccuracy = document.getElementById('nc-final-accuracy');
var elFinalStreak = document.getElementById('nc-final-streak');
var elFinalBest = document.getElementById('nc-final-best');
var elBestDisplay = document.getElementById('nc-best-display');
var elBestScore = document.getElementById('nc-best-score');
var elLevelToast = document.getElementById('nc-level-toast');
var btnStart = document.getElementById('nc-start-btn');
var btnResume = document.getElementById('nc-resume-btn');
var btnPlayAgain = document.getElementById('nc-play-again-btn');
var answerBtns = [
document.getElementById('nc-ans-0'),
document.getElementById('nc-ans-1'),
document.getElementById('nc-ans-2'),
document.getElementById('nc-ans-3')
];

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

/* ── Modifiers ── */
var MODIFIERS = [
{ name: '2倍にする', apply: function(n) { return n * 2; } },
{ name: '10を足す', apply: function(n) { return n + 10; } },
{ name: '5を引く', apply: function(n) { return n - 5; } },
{ name: '半分にする', apply: function(n) { return Math.round(n / 2); } }
];

function shouldHaveModifier(lvl) {
return lvl >= 6;
}

function getModifier(lvl) {
if (lvl >= 17) {
/* Dual modifier: pick two */
var a = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
var b = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
while (b === a) b = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
return {
name: a.name + '、次に' + b.name.toLowerCase(),
apply: function(n) { return b.apply(a.apply(n)); }
};
}
if (lvl >= 13) {
/* Pick from all modifiers */
return MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
}
/* L6-12: simpler modifiers only */
var simple = MODIFIERS.slice(0, 2);
return simple[Math.floor(Math.random() * simple.length)];
}

/* ── Generate equation ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pickOperation(lvl) {
var ops;
if (lvl <= 3) ops = ['+', '-'];
else if (lvl <= 5) ops = ['+', '-', '*'];
else ops = ['+', '-', '*', '/'];
return ops[randInt(0, ops.length - 1)];
}

function operandLimit(lvl) {
if (lvl <= 3) return 50;
if (lvl <= 5) return 80;
if (lvl <= 8) return 120;
if (lvl <= 12) return 220;
if (lvl <= 16) return 360;
return 520;
}

function generateEquation(lvl) {
var op = pickOperation(lvl);
var max = operandLimit(lvl);
var a;
var b;
var answer;
var symbol = op;

if (op === '/') {
b = randInt(2, Math.min(12 + lvl, 24));
answer = randInt(2, Math.min(18 + lvl * 2, 80));
a = answer * b;
symbol = '\u00F7';
} else if (op === '*') {
a = randInt(3, Math.min(12 + Math.floor(lvl / 2), 24));
b = randInt(3, Math.min(12 + Math.floor(lvl / 2), 24));
symbol = '\u00D7';
answer = a * b;
} else {
a = randInt(10, max);
b = randInt(5, Math.max(8, Math.floor(max * 0.65)));
if (op === '-' && b > a) {
var swap = a;
a = b;
b = swap;
}
switch (op) {
case '+':
answer = a + b;
break;
case '-':
answer = a - b;
break;
default:
answer = a + b;
}
}

var display = a + ' ' + symbol + ' ' + b + ' = ?';
var modifier = null;
if (shouldHaveModifier(lvl) && Math.random() < 0.7) {
modifier = getModifier(lvl);
answer = modifier.apply(answer);
}

return { display: display, answer: answer, modifier: modifier };
}

function generateChoices(correct) {
var choices = [correct];
var attempts = 0;
while (choices.length < 4 && attempts < 100) {
var offset = randInt(-10, 10);
attempts++;
if (offset === 0) continue;
var wrong = Math.round(correct + offset);
if (wrong < 0) wrong = Math.abs(wrong);
if (wrong !== correct && choices.indexOf(wrong) === -1) {
choices.push(wrong);
}
}
while (choices.length < 4) {
var fallback = Math.round(correct + choices.length + attempts + 1);
if (fallback < 0) fallback = Math.abs(fallback);
if (fallback !== correct && choices.indexOf(fallback) === -1) choices.push(fallback);
else attempts++;
}
for (var i = choices.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = choices[i];
choices[i] = choices[j];
choices[j] = temp;
}
return choices;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}


var runHistory = createRuntimeHistory('nc-history-toggle', 'nc-history-panel', 'nc-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
list.innerHTML = entries.map(function(entry) {
return '<div class="gk-runtime-history-row ' + (entry.correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong') + '">' +
'<div class="gk-runtime-history-main"><div class="gk-runtime-history-detail">' + entry.html + '</div>' +
'<div class="gk-runtime-history-status">' + (entry.correct ? 'Correct' : 'Wrong') + '</div></div></div>';
}).join('');
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel || !toggle) return;
render();
var open = panel.style.display !== 'none';
panel.style.display = open ? 'none' : '';
toggle.textContent = open ? 'Show History' : 'Hide History';
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

function recordAnswerHistory(selectedValue, correct) {
var selected = selectedValue === null || selectedValue === undefined ? 'No answer' : selectedValue;
var html = '<strong>' + runHistory.escape(state.currentEquation) + '</strong>';
if (state.currentModifier) {
html += '<div class="gk-runtime-history-sub">Rule: ' + runHistory.escape(state.currentModifier.name) + '</div>';
}
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(selected) + ' | Correct: ' + runHistory.escape(state.correctAnswer) + '</div>';
runHistory.pushHtml(correct, html);
}

function renderAnswerHistory() {
runHistory.render();
}

function resetHistoryPanel() {
runHistory.resetPanel();
}
/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
if (shouldHaveModifier(state.level)) {
elModifierBadge.style.display = '';
elModifierBadge.textContent = 'Extra';
} else {
elModifierBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('nc-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('nc-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('nc-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'nc-feedback-flash';
elFeedbackIcon.className = 'nc-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('nc-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('nc-show-check');
} else {
elFeedbackFlash.classList.add('nc-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('nc-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'nc-feedback-flash';
elFeedbackIcon.className = 'nc-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('nc-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('nc-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'nc-correct-flash' : 'nc-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('nc-correct-flash', 'nc-wrong-flash');
}, 400);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var chosenValue = parseInt(answerBtns[chosenIdx].textContent, 10);
var correct = (chosenValue === state.correctAnswer);

state.totalAnswered++;
recordAnswerHistory(chosenValue, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordAnswerHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

var eq = generateEquation(state.level);
state.correctAnswer = eq.answer;
state.currentModifier = eq.modifier;
state.currentEquation = eq.display;

elEquation.textContent = eq.display;
elEquation.style.animation = 'none';
void elEquation.offsetWidth;
elEquation.style.animation = '';

if (eq.modifier) {
elRuleModifier.textContent = eq.modifier.name;
elRuleModifier.style.display = '';
} else {
elRuleModifier.style.display = 'none';
}

var choices = generateChoices(eq.answer);
state.currentChoices = choices.slice();
for (var i = 0; i < 4; i++) {
answerBtns[i].textContent = choices[i];
}

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'nc-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'nc-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'nc-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.nc-trophy');
var title = document.querySelector('#nc-complete-overlay .nc-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'すばらしい！';
elNewBest.className = 'nc-new-best-enhanced';
elNewBest.innerHTML = 'uD83CuDF1F すばらしい！新記録！';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'お疲れさまでした！';
elNewBest.className = 'nc-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('nc-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();
renderAnswerHistory();
resetHistoryPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var NC_WIZARD_STEPS = [
{icon: '\uD83E\uDDEE', title: '方程式を解こう', desc: '答えが欠けた方程式が表示されます。正しい答えを選んでください！'},
{icon: '\u2728', title: 'モディファイアに注意', desc: 'レベル6からルールモディファイアが答えを変えます（例：「2倍にする」）。'},
{icon: '\u26A1', title: 'すばやく！', desc: '時間切れになる前に答えてください。速さ＝ボーナスポイント！', final: true}
];
var ncWizardStep = 0;

function renderWizardStep() {
var s = NC_WIZARD_STEPS[ncWizardStep];
var dotsHtml = '';
for (var i = 0; i < NC_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="nc-wizard-dot' + (i === ncWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'ゲームスタート' : '次へ';
elWizardCard.innerHTML =
'<div class="nc-wizard-icon">' + s.icon + '</div>' +
'<div class="nc-wizard-title">' + s.title + '</div>' +
'<div class="nc-wizard-desc">' + s.desc + '</div>' +
'<div class="nc-wizard-dots">' + dotsHtml + '</div>' +
'<button class="nc-wizard-btn" id="nc-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'nc-wizard-enter 0.3s ease-out';
document.getElementById('nc-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ncWizardStep < NC_WIZARD_STEPS.length - 1) {
ncWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ncWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctAnswer = 0;
state.currentModifier = null;
state.currentEquation = '';
state.currentChoices = [];
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('nc-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('nc-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});


for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('nc-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('nc-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('nc-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('nc-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Number Crunch', '/ja/games/number-crunch/', 'nc-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
var answerIndex = -1;
if (e.key >= '1' && e.key <= '4') {
answerIndex = parseInt(e.key, 10) - 1;
} else if (e.code) {
var keyMatch = e.code.match(/^(?:Digit|Numpad)([1-4])$/);
if (keyMatch) answerIndex = parseInt(keyMatch[1], 10) - 1;
}
if (answerIndex >= 0) {
e.preventDefault();
processAnswer(answerIndex);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('nc-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Pattern Path - 脳トレゲーム
URL: https://guruka.com/ja/games/pattern-path/
Description: 視覚パターンを完成。

<style>
#pattern-path-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #pattern-path-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#pp-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.pp-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#pp-instructions .pp-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#pp-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: #14b8a6;
}

#pp-instructions .pp-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #pp-instructions .pp-subtitle {
color: var(--color-dark-text-secondary);
}

#pp-instructions .pp-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #pp-instructions .pp-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#pp-instructions .pp-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: #14b8a6;
}

#pp-instructions .pp-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#pp-instructions .pp-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.pp-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.pp-personal-best strong {
color: #14b8a6;
}

/* ── Buttons ── */
.pp-btn-primary {
background: #14b8a6;
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.pp-btn-primary:hover {
background: #0d9488;
}

.pp-btn-primary:active {
transform: scale(0.97);
}

.pp-btn-secondary {
background: transparent;
color: #14b8a6;
border: 1px solid #14b8a6;
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.pp-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .pp-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#pp-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#pp-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: pp-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #pp-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes pp-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pp-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.pp-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.pp-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .pp-wizard-desc {
color: var(--color-dark-text-secondary);
}
.pp-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.pp-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.pp-wizard-dot.active {
background: #14b8a6;
transform: scale(1.3);
}
[data-theme="dark"] .pp-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .pp-wizard-dot.active {
background: #14b8a6;
}
.pp-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: #14b8a6;
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.pp-wizard-btn:hover {
background: #0d9488;
}
@media (max-width: 400px) {
#pp-wizard-card {
padding: 1.5rem 1rem;
}
.pp-wizard-icon {
font-size: 2rem;
}
.pp-wizard-title {
font-size: 1.1rem;
}
.pp-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#pp-playing {
display: none;
flex: 1;
flex-direction: column;
}

.pp-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .pp-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-stat {
text-align: center;
}

.pp-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .pp-stat-label {
color: var(--color-dark-text-secondary);
}

.pp-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.pp-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.pp-level-text {
font-weight: 600;
}

.pp-difficulty-badge {
background: #14b8a6;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.pp-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .pp-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-progress-fill {
height: 100%;
background: #14b8a6;
border-radius: 3px;
transition: width 0.3s ease;
}

.pp-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .pp-timer-bar {
background: var(--color-dark-bg-secondary);
}

.pp-timer-fill {
height: 100%;
background: #14b8a6;
border-radius: 2px;
transition: width 0.05s linear;
}

.pp-timer-fill.pp-timer-warning {
background: #ef4444;
}

/* ── Pattern Display Area ── */
.pp-pattern-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
}

.pp-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.pp-feedback-flash.pp-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.pp-feedback-flash.pp-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.pp-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.pp-feedback-icon.pp-show-check {
animation: pp-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.pp-feedback-icon.pp-show-x {
animation: pp-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes pp-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.pp-sequence-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
animation: pp-seq-enter 0.3s ease-out;
}

@keyframes pp-seq-enter {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.pp-seq-element {
width: 70px;
height: 70px;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-primary, #fff);
}

[data-theme="dark"] .pp-seq-element {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-seq-element svg {
display: block;
}

.pp-seq-missing {
border: 2px dashed #14b8a6;
background: rgba(20, 184, 166, 0.05);
font-size: 1.75rem;
font-weight: 700;
color: #14b8a6;
}

[data-theme="dark"] .pp-seq-missing {
background: rgba(20, 184, 166, 0.1);
}

.pp-seq-arrow {
font-size: 1.25rem;
color: var(--color-text-secondary);
flex-shrink: 0;
}

[data-theme="dark"] .pp-seq-arrow {
color: var(--color-dark-text-secondary);
}

/* ── Answer Choice Buttons ── */
.pp-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.pp-answer-btn {
padding: 0.75rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
}

[data-theme="dark"] .pp-answer-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.pp-answer-btn:active {
transform: scale(0.95);
}

.pp-answer-btn:hover {
border-color: #14b8a6;
background: rgba(20, 184, 166, 0.05);
}

[data-theme="dark"] .pp-answer-btn:hover {
background: rgba(20, 184, 166, 0.15);
}

.pp-answer-btn svg {
display: block;
}

.pp-answer-btn.pp-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.pp-answer-btn.pp-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.pp-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#pp-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#pp-pause-overlay .pp-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#pp-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.pp-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: pp-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .pp-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes pp-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.pp-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.pp-complete-card .pp-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.pp-final-score {
font-size: 2.5rem;
font-weight: 800;
color: #14b8a6;
margin: 0.5rem 0;
}

.pp-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: pp-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes pp-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.pp-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.pp-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .pp-complete-stat {
background: var(--color-dark-bg-secondary);
}

.pp-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.pp-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.pp-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.pp-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .pp-back-link {
color: var(--color-dark-text-secondary);
}

.pp-back-link:hover {
color: #14b8a6;
text-decoration: underline;
}

/* ── Level Up Toast ── */
.pp-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #14b8a6;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.pp-level-up-toast.pp-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#pattern-path-game {
padding: 0.5rem;
}
.pp-seq-element {
width: 56px;
height: 56px;
}
.pp-seq-arrow {
font-size: 1rem;
}
.pp-answer-btn {
padding: 0.5rem;
min-height: 64px;
}
.pp-header {
padding: 0.5rem;
gap: 0.25rem;
}
.pp-stat-value {
font-size: 1rem;
}
#pp-instructions { padding: 0.75rem 0.5rem; }
#pp-instructions .pp-icon { font-size: 2rem; margin-bottom: 0; }
#pp-instructions h2 { font-size: 1.3rem; }
#pp-instructions .pp-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#pp-instructions .pp-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#pp-instructions .pp-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.pp-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#pattern-path-game {
padding: 0.75rem;
}
.pp-seq-element {
width: 62px;
height: 62px;
}
.pp-answer-btn {
padding: 0.625rem;
min-height: 72px;
}
}
@media (max-width: 360px) {
.pp-seq-element {
width: 48px;
height: 48px;
}
.pp-seq-arrow {
font-size: 0.85rem;
}
.pp-sequence-row {
gap: 0.3rem;
}
.pp-answer-btn {
padding: 0.4rem;
min-height: 56px;
}
.pp-complete-stats {
grid-template-columns: 1fr 1fr;
}
.pp-final-score {
font-size: 2rem;
}
.pp-header {
padding: 0.375rem;
}
.pp-stat-value {
font-size: 0.9rem;
}
}
@keyframes pp-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.pp-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.pp-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: pp-confetti-fall 2.5s ease-in forwards;
}
.pp-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(20,184,166,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: pp-glow-fade 1s ease-out forwards;
}
@keyframes pp-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.pp-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: pp-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(20,184,166,0.4);
}
@keyframes pp-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#pattern-path-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#pattern-path-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #pattern-path-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#pattern-path-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#pattern-path-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="pattern-path-game">

<div id="pp-instructions">
<div class="pp-title-row"><span class="pp-icon">&#129513;</span><h2>Pattern Path</h2></div>
<p class="pp-subtitle">視覚的パターン認識と流動性知能</p>
<div class="pp-how-to">
<h3>遊び方</h3>
<ol>
<li>形のシーケンスに<strong>欠けている要素</strong>（？）が表示されます。</li>
<li>パターンを見つけましょう（色、形、サイズ、回転の変化）。</li>
<li>4つの選択肢から<strong>正しい補完</strong>を選びましょう。</li>


</ol>
</div>
<div id="pp-best-display" class="pp-personal-best" style="display:none;">
ベスト: <strong id="pp-best-score">0</strong> ポイント
</div>
<button class="pp-btn-primary" id="pp-start-btn">ゲームスタート</button>
<div id="pp-challenge-banner-wrap"></div>
</div>

<div id="pp-wizard">
<div id="pp-wizard-card"></div>
</div>

<div id="pp-playing">
<div class="pp-header">
<div class="pp-stat">
<div class="pp-stat-label">スコア</div>
<div class="pp-stat-value" id="pp-score">0</div>
</div>
<div class="pp-stat">
<div class="pp-stat-label">連続</div>
<div class="pp-stat-value" id="pp-streak">0</div>
</div>
<div class="pp-stat">
<div class="pp-stat-label">Level</div>
<div class="pp-stat-value" id="pp-level">1</div>
</div>
</div>
<div class="pp-level-info">
<span class="pp-level-text">Level <span id="pp-level-text">1</span></span>
<span class="pp-difficulty-badge" id="pp-difficulty-badge">色</span>
</div>
<div class="pp-progress-bar">
<div class="pp-progress-fill" id="pp-progress-fill" style="width:0%"></div>
</div>
<div class="pp-timer-bar">
<div class="pp-timer-fill" id="pp-timer-fill" style="width:100%"></div>
</div>
<div class="pp-pattern-area">
<div class="pp-feedback-flash" id="pp-feedback-flash"></div>
<div class="pp-feedback-icon" id="pp-feedback-icon"></div>
<div class="pp-sequence-row" id="pp-sequence-row"></div>
</div>
<div class="pp-answers" id="pp-answers">
<button class="pp-answer-btn" id="pp-ans-0"></button>
<button class="pp-answer-btn" id="pp-ans-1"></button>
<button class="pp-answer-btn" id="pp-ans-2"></button>
<button class="pp-answer-btn" id="pp-ans-3"></button>
</div>
<div class="pp-playing-hint"><strong>1-4</strong>キーで回答 &middot; <strong>Esc</strong>キーで一時停止</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="pp-pause-btn" type="button">一時停止</button>
<button class="gk-finish-btn" id="pp-finish-btn" type="button">終了</button>
</div>
</div>

<div id="pp-pause-overlay">
<div class="pp-pause-text">一時停止中/div>
<button class="pp-btn-primary" id="pp-resume-btn">再開</button>
</div>

<div id="pp-complete-overlay">
<div class="pp-complete-card">
<button class="gk-complete-close" id="pp-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="pp-trophy">&#127942;</div>
<h2>終了！/h2>
<div class="pp-final-score" id="pp-final-score">0</div>
<div id="pp-new-best" class="pp-new-best" style="display:none;">&#11088; 新記録！</div>
<div class="gk-challenge-result" id="pp-challenge-result" style="display:none;"></div>
<div class="pp-complete-stats">
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">レベル/div>
<div class="pp-complete-stat-value" id="pp-final-level">1</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">正確性/div>
<div class="pp-complete-stat-value" id="pp-final-accuracy">0%</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">最高連続/div>
<div class="pp-complete-stat-value" id="pp-final-streak">0</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">ベスト/div>
<div class="pp-complete-stat-value" id="pp-final-best">0</div>
</div>
</div>
<div class="pp-complete-actions">
<button class="pp-btn-primary" id="pp-play-again-btn">もう一度</button>
<button class="gk-runtime-history-toggle" id="pp-history-toggle" type="button">Show History</button>
<a href="/ja/games/" class="pp-back-link">&larr; すべてのゲーム</a>
</div>
<div class="gk-runtime-history-panel" id="pp-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="pp-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="pp-share-btn">&#128279; 結果をシェア</button>
<div class="gk-share-copied" id="pp-share-copied" style="display:none;">リンクをコピーしました！</div>
</div>
</div>
</div>

<div class="pp-level-up-toast" id="pp-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_pattern-path_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('pp-history-toggle', 'pp-history-panel', 'pp-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctChoiceIdx: -1,
correctChoice: null,
currentChoices: []
};

/* ── Shape / Color / Size definitions ── */
var SHAPES = ['circle', 'square', 'triangle'];
var COLORS = ['#ef4444', '#3b82f6', '#22c55e', '#eab308', '#a855f7', '#f97316'];
var COLOR_NAMES = { '#ef4444': 'red', '#3b82f6': 'blue', '#22c55e': 'green', '#eab308': 'yellow', '#a855f7': 'purple', '#f97316': 'orange' };
var SIZES = [30, 45, 60];
var SIZE_NAMES = ['small', 'medium', 'large'];
var ROTATIONS = [0, 90, 180, 270];

/* ── DOM refs ── */
var elInstructions = document.getElementById('pp-instructions');
var elWizard = document.getElementById('pp-wizard');
var elWizardCard = document.getElementById('pp-wizard-card');
var elPlaying = document.getElementById('pp-playing');
var elPauseOverlay = document.getElementById('pp-pause-overlay');
var elCompleteOverlay = document.getElementById('pp-complete-overlay');
var elScore = document.getElementById('pp-score');
var elStreak = document.getElementById('pp-streak');
var elLevel = document.getElementById('pp-level');
var elLevelText = document.getElementById('pp-level-text');
var elDifficultyBadge = document.getElementById('pp-difficulty-badge');
var elProgressFill = document.getElementById('pp-progress-fill');
var elTimerFill = document.getElementById('pp-timer-fill');
var elSequenceRow = document.getElementById('pp-sequence-row');
var elFeedbackFlash = document.getElementById('pp-feedback-flash');
var elFeedbackIcon = document.getElementById('pp-feedback-icon');
var elFinalScore = document.getElementById('pp-final-score');
var elNewBest = document.getElementById('pp-new-best');
var elFinalLevel = document.getElementById('pp-final-level');
var elFinalAccuracy = document.getElementById('pp-final-accuracy');
var elFinalStreak = document.getElementById('pp-final-streak');
var elFinalBest = document.getElementById('pp-final-best');
var elBestDisplay = document.getElementById('pp-best-display');
var elBestScore = document.getElementById('pp-best-score');
var elLevelToast = document.getElementById('pp-level-toast');
var btnStart = document.getElementById('pp-start-btn');
var btnResume = document.getElementById('pp-resume-btn');
var btnPlayAgain = document.getElementById('pp-play-again-btn');
var answerBtns = [
document.getElementById('pp-ans-0'),
document.getElementById('pp-ans-1'),
document.getElementById('pp-ans-2'),
document.getElementById('pp-ans-3')
];

/* ── SVG Shape Rendering ── */
function renderShape(shape, color, size, rotation) {
var vb = '0 0 60 60';
var inner = '';
if (shape === 'circle') {
var r = Math.round(size * 25 / 60);
inner = '<circle cx="30" cy="30" r="' + r + '" fill="' + color + '"/>';
} else if (shape === 'square') {
var half = Math.round(size * 50 / 60);
var off = Math.round((60 - half) / 2);
inner = '<rect x="' + off + '" y="' + off + '" width="' + half + '" height="' + half + '" fill="' + color + '" transform="rotate(' + rotation + ' 30 30)"/>';
} else if (shape === 'triangle') {
var h = Math.round(size * 50 / 60);
var topY = 30 - Math.round(h / 2);
var botY = 30 + Math.round(h / 2);
var leftX = 30 - Math.round(h / 2);
var rightX = 30 + Math.round(h / 2);
inner = '<polygon points="30,' + topY + ' ' + rightX + ',' + botY + ' ' + leftX + ',' + botY + '" fill="' + color + '" transform="rotate(' + rotation + ' 30 30)"/>';
}
return '<svg viewBox="' + vb + '" width="' + size + '" height="' + size + '">' + inner + '</svg>';
}

/* ── Level parameters ── */
function getDisplayTime(lvl) {
if (lvl <= 3) return 10000;
if (lvl <= 6) return 8000;
if (lvl <= 9) return 7000;
if (lvl <= 12) return 6000;
if (lvl <= 16) return 5000;
return 4000;
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getSeqLength(lvl) {
if (lvl <= 6) return 3;
if (lvl <= 12) return 4;
return 5;
}

function getDifficultyLabel(lvl) {
if (lvl <= 3) return '色';
if (lvl <= 6) return '形';
if (lvl <= 9) return '色 + 形';
if (lvl <= 12) return '回転';
if (lvl <= 16) return 'サイズ + 数';
return 'マルチ属性';
}

/* ── Utility ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pick(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
return arr;
}

function cloneEl(el) {
return { shape: el.shape, color: el.color, size: el.size, rotation: el.rotation };
}

function elEquals(a, b) {
return a.shape === b.shape && a.color === b.color && a.size === b.size && a.rotation === b.rotation;
}

function indexOfValue(arr, value) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === value) return i;
}
return -1;
}

function getVisualRotation(shape, rotation) {
return shape === 'triangle' ? rotation : 0;
}

function getVisualIndexes(el) {
if (!el) return null;
var rotation = getVisualRotation(el.shape, el.rotation);
var idx = [
indexOfValue(SHAPES, el.shape),
indexOfValue(COLORS, el.color),
indexOfValue(SIZES, el.size),
indexOfValue(ROTATIONS, rotation)
];
for (var i = 0; i < idx.length; i++) {
if (idx[i] < 0) return null;
}
return idx;
}

function visuallyEquals(a, b) {
var ai = getVisualIndexes(a);
var bi = getVisualIndexes(b);
return !!ai && !!bi &&
ai[0] === bi[0] &&
ai[1] === bi[1] &&
ai[2] === bi[2] &&
ai[3] === bi[3];
}

function createChoiceSeenMatrix() {
var seen = [];
for (var s = 0; s < SHAPES.length; s++) {
seen[s] = [];
for (var c = 0; c < COLORS.length; c++) {
seen[s][c] = [];
for (var z = 0; z < SIZES.length; z++) {
seen[s][c][z] = [];
for (var r = 0; r < ROTATIONS.length; r++) {
seen[s][c][z][r] = false;
}
}
}
}
return seen;
}

function markChoiceSeen(seen, el) {
var idx = getVisualIndexes(el);
if (!idx) return false;
if (seen[idx[0]][idx[1]][idx[2]][idx[3]]) return false;
seen[idx[0]][idx[1]][idx[2]][idx[3]] = true;
return true;
}

/* ── Pattern Generation ── */
function generatePattern(lvl) {
var seqLen = getSeqLength(lvl);
var sequence = [];
var correct;

if (lvl <= 3) {
/* Single attribute: color changes in sequence */
var colorSeq = shuffle(COLORS.slice()).slice(0, seqLen + 1);
var baseShape = pick(SHAPES);
var baseSize = 45;
for (var i = 0; i <= seqLen; i++) {
sequence.push({ shape: baseShape, color: colorSeq[i % colorSeq.length], size: baseSize, rotation: 0 });
}
correct = sequence.pop();

} else if (lvl <= 6) {
/* Shape patterns: circle -> square -> triangle -> ... */
var baseColor = pick(COLORS);
var baseSize2 = 45;
for (var i = 0; i <= seqLen; i++) {
sequence.push({ shape: SHAPES[i % SHAPES.length], color: baseColor, size: baseSize2, rotation: 0 });
}
correct = sequence.pop();

} else if (lvl <= 9) {
/* 2-attribute: color + shape both change */
var colorPool = shuffle(COLORS.slice());
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorPool[i % colorPool.length],
size: 45,
rotation: 0
});
}
correct = sequence.pop();

} else if (lvl <= 12) {
/* Rotation patterns: shapes rotate 0 -> 90 -> 180 -> 270 */
var baseShape3 = 'triangle';
var baseColor3 = pick(COLORS);
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: baseShape3,
color: baseColor3,
size: 45,
rotation: ROTATIONS[i % ROTATIONS.length]
});
}
correct = sequence.pop();

} else if (lvl <= 16) {
/* Size + shape changes */
var colorBase = pick(COLORS);
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorBase,
size: SIZES[i % SIZES.length],
rotation: 0
});
}
correct = sequence.pop();

} else {
/* L17-20: 3 attributes changing (shape + color + size) */
var colorPool2 = shuffle(COLORS.slice());
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorPool2[i % colorPool2.length],
size: SIZES[i % SIZES.length],
rotation: ROTATIONS[i % ROTATIONS.length]
});
}
correct = sequence.pop();
}

return { sequence: sequence, correct: correct };
}

function buildChoiceCandidates(correct, lvl) {
var shapes = [correct.shape];
var colors = [correct.color];
var sizes = [correct.size];
var rotations = [correct.rotation];

if (lvl <= 3) {
colors = COLORS.slice();
} else if (lvl <= 6) {
shapes = SHAPES.slice();
colors = COLORS.slice();
} else if (lvl <= 9) {
shapes = SHAPES.slice();
colors = COLORS.slice();
} else if (lvl <= 12) {
rotations = ROTATIONS.slice();
} else if (lvl <= 16) {
shapes = SHAPES.slice();
sizes = SIZES.slice();
} else {
shapes = SHAPES.slice();
colors = COLORS.slice();
sizes = SIZES.slice();
rotations = ROTATIONS.slice();
}

var candidates = [];
for (var s = 0; s < shapes.length; s++) {
for (var c = 0; c < colors.length; c++) {
for (var z = 0; z < sizes.length; z++) {
for (var r = 0; r < rotations.length; r++) {
candidates.push({
shape: shapes[s],
color: colors[c],
size: sizes[z],
rotation: rotations[r]
});
}
}
}
}
return candidates;
}

function addUniqueChoice(choices, seen, candidate) {
if (!markChoiceSeen(seen, candidate)) return false;
choices.push(cloneEl(candidate));
return true;
}

function generateChoices(correct, lvl) {
var choices = [];
var seen = createChoiceSeenMatrix();
addUniqueChoice(choices, seen, correct);
var candidates = shuffle(buildChoiceCandidates(correct, lvl));

for (var i = 0; i < candidates.length && choices.length < 4; i++) {
addUniqueChoice(choices, seen, candidates[i]);
}

if (choices.length < 4) {
var fallback = shuffle(buildChoiceCandidates(correct, MAX_LEVEL));
for (var j = 0; j < fallback.length && choices.length < 4; j++) {
addUniqueChoice(choices, seen, fallback[j]);
}
}

return shuffle(choices);
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
elDifficultyBadge.textContent = getDifficultyLabel(state.level);
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('pp-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('pp-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('pp-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'pp-feedback-flash';
elFeedbackIcon.className = 'pp-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('pp-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('pp-show-check');
} else {
elFeedbackFlash.classList.add('pp-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('pp-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'pp-feedback-flash';
elFeedbackIcon.className = 'pp-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('pp-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('pp-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'pp-correct-flash' : 'pp-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('pp-correct-flash', 'pp-wrong-flash');
}, 400);
}

/* ── Render sequence display ── */
function renderSequence(sequence) {
var html = '';
for (var i = 0; i < sequence.length; i++) {
var el = sequence[i];
html += '<div class="pp-seq-element">';
html += renderShape(el.shape, el.color, el.size, el.rotation);
html += '</div>';
if (i < sequence.length) {
html += '<div class="pp-seq-arrow">\u2192</div>';
}
}
/* Missing element placeholder */
html += '<div class="pp-seq-element pp-seq-missing">?</div>';
elSequenceRow.innerHTML = html;
}

/* ── Render choice buttons ── */
function renderChoices(choices) {
for (var i = 0; i < 4; i++) {
var el = choices[i];
answerBtns[i].innerHTML = renderShape(el.shape, el.color, el.size, el.rotation);
}
}

function recordPatternHistory(selectedChoice, correct) {
var html = '<strong>Missing shape</strong>';
html += '<div class="gk-runtime-history-sub">Your: ' + (selectedChoice ? renderShape(selectedChoice.shape, selectedChoice.color, selectedChoice.size, selectedChoice.rotation) : 'No answer') + ' | Correct: ' + renderShape(state.correctChoice.shape, state.correctChoice.color, state.correctChoice.size, state.correctChoice.rotation) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var selectedChoice = state.currentChoices[chosenIdx];
var correct = selectedChoice ? visuallyEquals(selectedChoice, state.correctChoice) : false;

state.totalAnswered++;
recordPatternHistory(selectedChoice, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 2000) {
points += Math.floor((2000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordPatternHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

var pattern = generatePattern(state.level);
var choices = generateChoices(pattern.correct, state.level);

/* Find correct choice index */
state.correctChoice = cloneEl(pattern.correct);
state.currentChoices = choices.map(cloneEl);
state.correctChoiceIdx = -1;
for (var i = 0; i < choices.length; i++) {
if (visuallyEquals(choices[i], state.correctChoice)) {
state.correctChoiceIdx = i;
break;
}
}

renderSequence(pattern.sequence);
renderChoices(choices);

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#14b8a6','#ef4444','#22c55e','#3b82f6','#a855f7','#f97316'];
var container = document.createElement('div');
container.className = 'pp-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'pp-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'pp-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.pp-trophy');
var title = document.querySelector('#pp-complete-overlay .pp-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'すばらしい！';
elNewBest.className = 'pp-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F すばらしい！新記録！';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'お疲れさまでした！';
elNewBest.className = 'pp-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('pp-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var PP_WIZARD_STEPS = [
{icon: '\uD83E\uDDE9', title: '欠けているパターンを見つけよう', desc: '形のシーケンスに欠けている要素が表示されます。パターンを見つけましょう！'},
{icon: '\uD83C\uDFA8', title: '属性が変化する', desc: 'パターンには色、形、サイズ、回転が含まれます。高いレベルでは複数の属性が組み合わされます。'},
{icon: '\u26A1', title: 'すばやく', desc: '時間切れになる前に正しい形を選びましょう。スピードと連続正解でボーナスポイントが獲得できます！', final: true}
];
var ppWizardStep = 0;

function renderWizardStep() {
var s = PP_WIZARD_STEPS[ppWizardStep];
var dotsHtml = '';
for (var i = 0; i < PP_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="pp-wizard-dot' + (i === ppWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'ゲームスタート' : '次へ';
elWizardCard.innerHTML =
'<div class="pp-wizard-icon">' + s.icon + '</div>' +
'<div class="pp-wizard-title">' + s.title + '</div>' +
'<div class="pp-wizard-desc">' + s.desc + '</div>' +
'<div class="pp-wizard-dots">' + dotsHtml + '</div>' +
'<button class="pp-wizard-btn" id="pp-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'pp-wizard-enter 0.3s ease-out';
document.getElementById('pp-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ppWizardStep < PP_WIZARD_STEPS.length - 1) {
ppWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ppWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctChoiceIdx = -1;
state.correctChoice = null;
state.currentChoices = [];
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('pp-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('pp-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('pp-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('pp-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('pp-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('pp-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Pattern Path', '/ja/games/pattern-path/', 'pp-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key >= '1' && e.key <= '4') {
e.preventDefault();
processAnswer(parseInt(e.key, 10) - 1);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('pp-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Quick Sort - 脳トレゲーム
URL: https://guruka.com/ja/games/quick-sort/
Description: 変わるルールで分類。

<style>
#quick-sort-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #quick-sort-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#qs-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.qs-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#qs-instructions .qs-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#qs-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: #f97316;
}

#qs-instructions .qs-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #qs-instructions .qs-subtitle {
color: var(--color-dark-text-secondary);
}

#qs-instructions .qs-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #qs-instructions .qs-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#qs-instructions .qs-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: #f97316;
}

#qs-instructions .qs-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#qs-instructions .qs-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.qs-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.qs-personal-best strong {
color: #f97316;
}

/* ── Buttons ── */
.qs-btn-primary {
background: #f97316;
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.qs-btn-primary:hover {
background: #ea580c;
}

.qs-btn-primary:active {
transform: scale(0.97);
}

.qs-btn-secondary {
background: transparent;
color: #f97316;
border: 1px solid #f97316;
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.qs-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .qs-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#qs-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#qs-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: qs-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #qs-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes qs-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.qs-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.qs-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.qs-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .qs-wizard-desc {
color: var(--color-dark-text-secondary);
}
.qs-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.qs-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.qs-wizard-dot.active {
background: #f97316;
transform: scale(1.3);
}
[data-theme="dark"] .qs-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .qs-wizard-dot.active {
background: #f97316;
}
.qs-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: #f97316;
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.qs-wizard-btn:hover {
background: #ea580c;
}
@media (max-width: 400px) {
#qs-wizard-card {
padding: 1.5rem 1rem;
}
.qs-wizard-icon {
font-size: 2rem;
}
.qs-wizard-title {
font-size: 1.1rem;
}
.qs-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#qs-playing {
display: none;
flex: 1;
flex-direction: column;
}

.qs-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .qs-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.qs-stat {
text-align: center;
}

.qs-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .qs-stat-label {
color: var(--color-dark-text-secondary);
}

.qs-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.qs-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.qs-level-text {
font-weight: 600;
}

.qs-rule-change-badge {
background: #f97316;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.qs-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .qs-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.qs-progress-fill {
height: 100%;
background: #f97316;
border-radius: 3px;
transition: width 0.3s ease;
}

.qs-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .qs-timer-bar {
background: var(--color-dark-bg-secondary);
}

.qs-timer-fill {
height: 100%;
background: #f97316;
border-radius: 2px;
transition: width 0.05s linear;
}

.qs-timer-fill.qs-timer-warning {
background: #ef4444;
}

/* ── Rule Indicator ── */
.qs-rule-indicator {
background: #f97316;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
text-align: center;
margin-bottom: 1rem;
letter-spacing: 0.02em;
}

/* ── Stimulus Area ── */
.qs-stimulus-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 160px;
position: relative;
}

.qs-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.qs-feedback-flash.qs-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.qs-feedback-flash.qs-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.qs-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.qs-feedback-icon.qs-show-check {
animation: qs-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.qs-feedback-icon.qs-show-x {
animation: qs-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes qs-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.qs-stimulus {
font-size: 3rem;
font-weight: 700;
line-height: 1.2;
animation: qs-stim-enter 0.2s ease-out;
text-align: center;
}

@keyframes qs-stim-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

/* ── Sort Buttons (Left / Right) ── */
.qs-sort-buttons {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.qs-sort-btn {
flex: 1;
padding: 1.1rem 0.75rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}

[data-theme="dark"] .qs-sort-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.qs-sort-btn:active {
transform: scale(0.95);
}

.qs-btn-left {
border-left: 4px solid #f97316;
}

.qs-btn-left:hover {
border-color: #f97316;
background: rgba(249,115,22,0.05);
}

[data-theme="dark"] .qs-btn-left:hover {
background: rgba(249,115,22,0.15);
}

.qs-btn-right {
border-right: 4px solid #f97316;
}

.qs-btn-right:hover {
border-color: #f97316;
background: rgba(249,115,22,0.05);
}

[data-theme="dark"] .qs-btn-right:hover {
background: rgba(249,115,22,0.15);
}

.qs-sort-btn .qs-arrow {
font-size: 1.3rem;
opacity: 0.6;
}

.qs-sort-btn .qs-label {
font-size: 1rem;
}

.qs-sort-btn.qs-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.qs-sort-btn.qs-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.qs-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#qs-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#qs-pause-overlay .qs-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#qs-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.qs-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: qs-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .qs-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes qs-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.qs-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.qs-complete-card .qs-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.qs-final-score {
font-size: 2.5rem;
font-weight: 800;
color: #f97316;
margin: 0.5rem 0;
}

.qs-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: qs-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes qs-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.qs-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.qs-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .qs-complete-stat {
background: var(--color-dark-bg-secondary);
}

.qs-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.qs-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.qs-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.qs-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .qs-back-link {
color: var(--color-dark-text-secondary);
}

.qs-back-link:hover {
color: #f97316;
text-decoration: underline;
}

/* ── Level Up Toast ── */
.qs-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #f97316;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.qs-level-up-toast.qs-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Rule Change Toast ── */
.qs-rule-toast {
position: fixed;
top: 4.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #7c3aed;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 0.95rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.qs-rule-toast.qs-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#quick-sort-game {
padding: 0.5rem;
}
.qs-stimulus {
font-size: 2.5rem;
}
.qs-sort-btn {
padding: 0.85rem 0.5rem;
font-size: 1rem;
min-height: 52px;
}
.qs-sort-btn .qs-label {
font-size: 0.9rem;
}
.qs-header {
padding: 0.5rem;
gap: 0.25rem;
}
.qs-stat-value {
font-size: 1rem;
}
.qs-rule-indicator {
font-size: 0.85rem;
padding: 0.4rem 0.75rem;
}
#qs-instructions { padding: 0.75rem 0.5rem; }
#qs-instructions .qs-icon { font-size: 2rem; margin-bottom: 0; }
#qs-instructions h2 { font-size: 1.3rem; }
#qs-instructions .qs-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#qs-instructions .qs-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#qs-instructions .qs-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.qs-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#quick-sort-game {
padding: 0.75rem;
}
.qs-stimulus {
font-size: 2.75rem;
}
.qs-sort-btn {
padding: 1rem 0.5rem;
}
}
@media (max-width: 360px) {
.qs-stimulus {
font-size: 2rem;
}
.qs-sort-btn {
padding: 0.7rem 0.4rem;
font-size: 0.9rem;
min-height: 48px;
}
.qs-sort-btn .qs-label {
font-size: 0.8rem;
}
.qs-sort-btn .qs-arrow {
font-size: 1.1rem;
}
.qs-complete-stats {
grid-template-columns: 1fr 1fr;
}
.qs-final-score {
font-size: 2rem;
}
.qs-header {
padding: 0.375rem;
}
.qs-stat-value {
font-size: 0.9rem;
}
}
@keyframes qs-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.qs-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.qs-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: qs-confetti-fall 2.5s ease-in forwards;
}
.qs-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(249,115,22,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: qs-glow-fade 1s ease-out forwards;
}
@keyframes qs-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.qs-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: qs-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(249,115,22,0.4);
}
@keyframes qs-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#quick-sort-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#quick-sort-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #quick-sort-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#quick-sort-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#quick-sort-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="quick-sort-game">

<div id="qs-instructions">
<div class="qs-title-row"><span class="qs-icon">&#128450;</span><h2>Quick Sort</h2></div>
<p class="qs-subtitle">カテゴリー分けスピードとタスク切り替え</p>
<div class="qs-how-to">
<h3>遊び方</h3>
<ol>
<li>アイテム（数字、形、または単語）が画面に表示されます。</li>
<li>2つのカテゴリーが<strong>左右</strong>に表示されます。</li>
<li>正しい側をタップしてアイテムを仕分けしましょう。</li>
<li>仕分けルールが数ラウンドごとに<strong>切り替わります</strong>！</li>

</ol>
</div>
<div id="qs-best-display" class="qs-personal-best" style="display:none;">
ベスト: <strong id="qs-best-score">0</strong> ポイント
</div>
<button class="qs-btn-primary" id="qs-start-btn">ゲームスタート</button>
<div id="qs-challenge-banner-wrap"></div>
</div>

<div id="qs-wizard">
<div id="qs-wizard-card"></div>
</div>

<div id="qs-playing">
<div class="qs-header">
<div class="qs-stat">
<div class="qs-stat-label">スコア</div>
<div class="qs-stat-value" id="qs-score">0</div>
</div>
<div class="qs-stat">
<div class="qs-stat-label">連続</div>
<div class="qs-stat-value" id="qs-streak">0</div>
</div>
<div class="qs-stat">
<div class="qs-stat-label">Level</div>
<div class="qs-stat-value" id="qs-level">1</div>
</div>
</div>
<div class="qs-level-info">
<span class="qs-level-text">Level <span id="qs-level-text">1</span></span>
<span class="qs-rule-change-badge" id="qs-rule-badge" style="display:none;">ルール切替</span>
</div>
<div class="qs-progress-bar">
<div class="qs-progress-fill" id="qs-progress-fill" style="width:0%"></div>
</div>
<div class="qs-timer-bar">
<div class="qs-timer-fill" id="qs-timer-fill" style="width:100%"></div>
</div>
<div class="qs-rule-indicator" id="qs-rule-indicator">仕分け: 偶数 / 奇数</div>
<div class="qs-stimulus-area">
<div class="qs-feedback-flash" id="qs-feedback-flash"></div>
<div class="qs-feedback-icon" id="qs-feedback-icon"></div>
<div class="qs-stimulus" id="qs-stimulus"></div>
</div>
<div class="qs-sort-buttons">
<button class="qs-sort-btn qs-btn-left" id="qs-btn-left">
<span class="qs-arrow">1</span>
<span class="qs-label" id="qs-label-left">偶数</span>
</button>
<button class="qs-sort-btn qs-btn-right" id="qs-btn-right">
<span class="qs-label" id="qs-label-right">奇数</span>
<span class="qs-arrow">2</span>
</button>
</div>
<div class="qs-playing-hint"><strong>1</strong>キーで左 &middot; <strong>2</strong>キーで右 &middot; <strong>Esc</strong>キーで一時停止</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="qs-pause-btn" type="button">一時停止</button>
<button class="gk-finish-btn" id="qs-finish-btn" type="button">終了</button>
</div>
</div>

<div id="qs-pause-overlay">
<div class="qs-pause-text">一時停止中/div>
<button class="qs-btn-primary" id="qs-resume-btn">再開</button>
</div>

<div id="qs-complete-overlay">
<div class="qs-complete-card">
<button class="gk-complete-close" id="qs-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="qs-trophy">&#127942;</div>
<h2>終了！/h2>
<div class="qs-final-score" id="qs-final-score">0</div>
<div id="qs-new-best" class="qs-new-best" style="display:none;">&#11088; 新記録！</div>
<div class="gk-challenge-result" id="qs-challenge-result" style="display:none;"></div>
<div class="qs-complete-stats">
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">レベル/div>
<div class="qs-complete-stat-value" id="qs-final-level">1</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">正確性/div>
<div class="qs-complete-stat-value" id="qs-final-accuracy">0%</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">最高連続/div>
<div class="qs-complete-stat-value" id="qs-final-streak">0</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">ベスト/div>
<div class="qs-complete-stat-value" id="qs-final-best">0</div>
</div>
</div>
<div class="qs-complete-actions">
<button class="qs-btn-primary" id="qs-play-again-btn">もう一度</button>
<button class="gk-runtime-history-toggle" id="qs-history-toggle" type="button">Show History</button>
<a href="/ja/games/" class="qs-back-link">&larr; すべてのゲーム</a>
</div>
<div class="gk-runtime-history-panel" id="qs-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="qs-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="qs-share-btn">&#128279; 結果をシェア</button>
<div class="gk-share-copied" id="qs-share-copied" style="display:none;">リンクをコピーしました！</div>
</div>
</div>
</div>

<div class="qs-level-up-toast" id="qs-level-toast">Level Up!</div>
<div class="qs-rule-toast" id="qs-rule-toast">新しいルール！</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_quick-sort_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('qs-history-toggle', 'qs-history-panel', 'qs-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
roundInRule: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctSide: null,
currentRule: null,
currentStimulus: null,
ruleIndex: 0
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('qs-instructions');
var elWizard = document.getElementById('qs-wizard');
var elWizardCard = document.getElementById('qs-wizard-card');
var elPlaying = document.getElementById('qs-playing');
var elPauseOverlay = document.getElementById('qs-pause-overlay');
var elCompleteOverlay = document.getElementById('qs-complete-overlay');
var elScore = document.getElementById('qs-score');
var elStreak = document.getElementById('qs-streak');
var elLevel = document.getElementById('qs-level');
var elLevelText = document.getElementById('qs-level-text');
var elRuleBadge = document.getElementById('qs-rule-badge');
var elProgressFill = document.getElementById('qs-progress-fill');
var elTimerFill = document.getElementById('qs-timer-fill');
var elRuleIndicator = document.getElementById('qs-rule-indicator');
var elStimulus = document.getElementById('qs-stimulus');
var elFeedbackFlash = document.getElementById('qs-feedback-flash');
var elFeedbackIcon = document.getElementById('qs-feedback-icon');
var elLabelLeft = document.getElementById('qs-label-left');
var elLabelRight = document.getElementById('qs-label-right');
var elBtnLeft = document.getElementById('qs-btn-left');
var elBtnRight = document.getElementById('qs-btn-right');
var elFinalScore = document.getElementById('qs-final-score');
var elNewBest = document.getElementById('qs-new-best');
var elFinalLevel = document.getElementById('qs-final-level');
var elFinalAccuracy = document.getElementById('qs-final-accuracy');
var elFinalStreak = document.getElementById('qs-final-streak');
var elFinalBest = document.getElementById('qs-final-best');
var elBestDisplay = document.getElementById('qs-best-display');
var elBestScore = document.getElementById('qs-best-score');
var elLevelToast = document.getElementById('qs-level-toast');
var elRuleToast = document.getElementById('qs-rule-toast');
var btnStart = document.getElementById('qs-start-btn');
var btnResume = document.getElementById('qs-resume-btn');
var btnPlayAgain = document.getElementById('qs-play-again-btn');

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getRuleChangeInterval(lvl) {
if (lvl <= 6) return 999;
if (lvl <= 9) return 4;
if (lvl <= 12) return 3;
if (lvl <= 16) return 3;
return 2;
}

/* ── Helpers ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pick(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
return arr;
}

/* ── Rule definitions ── */
var SHAPES = ['丸', '四角', '三角'];
var FRUITS = ['リンゴ', 'バナナ', 'サクランボ'];
var NOT_FRUITS = ['車', '本', '机'];
var ALL_WORDS = FRUITS.concat(NOT_FRUITS);

function ruleEvenOdd() {
return {
name: '偶数 / 奇数',
leftLabel: '偶数',
rightLabel: '奇数',
generate: function() {
var n = randInt(1, 50);
return {
display: String(n),
correctSide: (n % 2 === 0) ? 'left' : 'right'
};
}
};
}

function ruleBigSmall() {
return {
name: '大きい / 小さい',
leftLabel: '大きい (\u226550)',
rightLabel: '小さい (<50)',
generate: function() {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n >= 50) ? 'left' : 'right'
};
}
};
}

function ruleShapeOrNot() {
return {
name: '形 / 形でない',
leftLabel: '形',
rightLabel: '形でない',
generate: function() {
var isShape = Math.random() < 0.5;
var item;
if (isShape) {
item = pick(SHAPES);
} else {
item = String(randInt(1, 100));
}
return {
display: item,
correctSide: isShape ? 'left' : 'right'
};
}
};
}

function ruleFruitOrNot() {
return {
name: '果物 / 果物でない',
leftLabel: '果物',
rightLabel: '果物でない',
generate: function() {
var item = pick(ALL_WORDS);
var isFruit = FRUITS.indexOf(item) !== -1;
return {
display: item,
correctSide: isFruit ? 'left' : 'right'
};
}
};
}

function ruleCompoundEvenBig() {
return {
name: '偶数かつ大きい / その他',
leftLabel: '偶数+大きい',
rightLabel: 'その他',
generate: function() {
var n = randInt(1, 100);
var isEvenAndBig = (n % 2 === 0) && (n >= 50);
return {
display: String(n),
correctSide: isEvenAndBig ? 'left' : 'right'
};
}
};
}

function ruleCompoundOddSmall() {
return {
name: '奇数かつ小さい / その他',
leftLabel: '奇数+小さい',
rightLabel: 'その他',
generate: function() {
var n = randInt(1, 100);
var isOddAndSmall = (n % 2 !== 0) && (n < 50);
return {
display: String(n),
correctSide: isOddAndSmall ? 'left' : 'right'
};
}
};
}

function ruleCompoundFruitBig() {
return {
name: '果物または大きい / その他',
leftLabel: '果物/大きい',
rightLabel: 'その他',
generate: function() {
var useWord = Math.random() < 0.4;
if (useWord) {
var item = pick(ALL_WORDS);
var isFruit = FRUITS.indexOf(item) !== -1;
return {
display: item,
correctSide: isFruit ? 'left' : 'right'
};
} else {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n >= 50) ? 'left' : 'right'
};
}
}
};
}

function ruleCompoundShapeEven() {
return {
name: '形または偶数 / その他',
leftLabel: '形/偶数',
rightLabel: 'その他',
generate: function() {
var useShape = Math.random() < 0.35;
if (useShape) {
var isShape = Math.random() < 0.5;
var item = isShape ? pick(SHAPES) : String(randInt(1, 50) * 2 - 1);
return {
display: item,
correctSide: isShape ? 'left' : 'right'
};
} else {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n % 2 === 0) ? 'left' : 'right'
};
}
}
};
}

/* ── Get available rules for level ── */
function getRulesForLevel(lvl) {
if (lvl <= 3) {
return [ruleEvenOdd];
} else if (lvl <= 6) {
return [ruleBigSmall];
} else if (lvl <= 9) {
return [ruleEvenOdd, ruleBigSmall];
} else if (lvl <= 12) {
return [ruleShapeOrNot, ruleEvenOdd];
} else if (lvl <= 16) {
return [ruleFruitOrNot, ruleEvenOdd, ruleBigSmall];
} else {
return [ruleCompoundEvenBig, ruleCompoundOddSmall, ruleCompoundFruitBig, ruleCompoundShapeEven];
}
}

function pickNewRule(lvl, prevRuleName) {
var factories = getRulesForLevel(lvl);
if (factories.length === 1) {
return factories[0]();
}
var attempts = 0;
var rule;
do {
rule = pick(factories)();
attempts++;
} while (rule.name === prevRuleName && attempts < 10);
return rule;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
var rulesForLevel = getRulesForLevel(state.level);
if (rulesForLevel.length > 1) {
elRuleBadge.style.display = '';
elRuleBadge.textContent = 'ルール切替';
} else {
elRuleBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('qs-playing', state.score, challenge.score);
}

/* ── Update rule display ── */
function updateRuleDisplay() {
if (!state.currentRule) return;
elRuleIndicator.textContent = '仕分け: ' + state.currentRule.name;
elLabelLeft.textContent = state.currentRule.leftLabel;
elLabelRight.textContent = state.currentRule.rightLabel;
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('qs-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('qs-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'qs-feedback-flash';
elFeedbackIcon.className = 'qs-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('qs-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('qs-show-check');
} else {
elFeedbackFlash.classList.add('qs-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('qs-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'qs-feedback-flash';
elFeedbackIcon.className = 'qs-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('qs-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('qs-toast-show');
}, 1500);
}

/* ── Show rule-change toast ── */
function showRuleToast(ruleName) {
elRuleToast.textContent = '新しいルール: ' + ruleName;
elRuleToast.classList.add('qs-toast-show');
setTimeout(function() {
elRuleToast.classList.remove('qs-toast-show');
}, 1800);
}

/* ── Flash sort button ── */
function flashSortBtn(side, correct) {
var btn = side === 'left' ? elBtnLeft : elBtnRight;
btn.classList.add(correct ? 'qs-correct-flash' : 'qs-wrong-flash');
setTimeout(function() {
btn.classList.remove('qs-correct-flash', 'qs-wrong-flash');
}, 400);
}

function sortSideLabel(side) {
if (!state.currentRule) return side || 'No answer';
if (side === 'left') return state.currentRule.leftLabel;
if (side === 'right') return state.currentRule.rightLabel;
return 'No answer';
}

function recordSortHistory(chosenSide, correct) {
var html = '<strong>' + runHistory.escape(state.currentRule ? state.currentRule.name : 'Sort rule') + '</strong>';
html += '<div class="gk-runtime-history-sub">Item: ' + runHistory.escape(state.currentStimulus) + '</div>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(sortSideLabel(chosenSide)) + ' | Correct: ' + runHistory.escape(sortSideLabel(state.correctSide)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenSide) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var correct = (chosenSide === state.correctSide);

state.totalAnswered++;
recordSortHistory(chosenSide, correct);
flashSortBtn(chosenSide, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundInRule = 0;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordSortHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundInRule = 0;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.roundInRule++;
state.answered = false;

/* Check if rule should change mid-level */
var ruleInterval = getRuleChangeInterval(state.level);
if (state.roundInRule > ruleInterval && getRulesForLevel(state.level).length > 1) {
state.roundInRule = 1;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showRuleToast(state.currentRule.name);
}

/* Generate stimulus */
var item = state.currentRule.generate();
state.correctSide = item.correctSide;
state.currentStimulus = item.display;

elStimulus.textContent = item.display;
elStimulus.style.animation = 'none';
void elStimulus.offsetWidth;
elStimulus.style.animation = '';

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'qs-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'qs-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'qs-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.qs-trophy');
var title = document.querySelector('#qs-complete-overlay .qs-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'すばらしい！';
elNewBest.className = 'qs-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F すばらしい！新記録！';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'お疲れさまでした！';
elNewBest.className = 'qs-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('qs-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var QS_WIZARD_STEPS = [
{icon: '\uD83D\uDCC2', title: 'アイテムを素早く仕分け', desc: 'アイテムが画面に表示されます。正しいカテゴリー（左または右）をタップして仕分けしましょう！'},
{icon: '\uD83D\uDD00', title: 'ルールが変わる！', desc: '数ラウンドごとに仕分けルールが切り替わります。注意を怠らず、素早く対応しましょう！'},
{icon: '\u26A1', title: 'すばやく', desc: '時間切れになる前に答えましょう。スピードと連続正解でボーナスポイントが獲得できます！', final: true}
];
var qsWizardStep = 0;

function renderWizardStep() {
var s = QS_WIZARD_STEPS[qsWizardStep];
var dotsHtml = '';
for (var i = 0; i < QS_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="qs-wizard-dot' + (i === qsWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'ゲームスタート' : '次へ';
elWizardCard.innerHTML =
'<div class="qs-wizard-icon">' + s.icon + '</div>' +
'<div class="qs-wizard-title">' + s.title + '</div>' +
'<div class="qs-wizard-desc">' + s.desc + '</div>' +
'<div class="qs-wizard-dots">' + dotsHtml + '</div>' +
'<button class="qs-wizard-btn" id="qs-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'qs-wizard-enter 0.3s ease-out';
document.getElementById('qs-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (qsWizardStep < QS_WIZARD_STEPS.length - 1) {
qsWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
qsWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.roundInRule = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctSide = null;
state.currentRule = null;
state.currentStimulus = null;
state.ruleIndex = 0;
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
state.currentRule = pickNewRule(state.level, null);
state.roundInRule = 0;
updateRuleDisplay();
showScreen('playing');
GK.renderChallengeBar('qs-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('qs-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

elBtnLeft.addEventListener('click', function() {
processAnswer('left');
});

elBtnRight.addEventListener('click', function() {
processAnswer('right');
});

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('qs-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('qs-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('qs-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('qs-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Quick Sort', '/ja/games/quick-sort/', 'qs-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key === '1') {
e.preventDefault();
processAnswer('left');
} else if (e.key === '2') {
e.preventDefault();
processAnswer('right');
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('qs-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Sequence Recall - 脳トレゲーム
URL: https://guruka.com/ja/games/sequence-recall/
Description: 色の順番を再現。

<style>
#sequence-recall-game {
max-width: 600px;
margin: 0 auto;
padding: 1.5rem 1rem 3rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary, #1a2332);
-webkit-tap-highlight-color: transparent;
}

#sequence-recall-game * {
box-sizing: border-box;
}

#sequence-recall-game .sr-card {
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

[data-theme="dark"] #sequence-recall-game .sr-card {
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

#sequence-recall-game .sr-title {
font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 1.75rem;
font-weight: 700;
text-align: center;
margin: 0 0 0.25rem;
letter-spacing: -0.025em;
}

#sequence-recall-game .sr-subtitle {
text-align: center;
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.95rem;
margin: 0 0 1.5rem;
}

#sequence-recall-game .sr-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#sequence-recall-game .sr-icon {
display: flex;
justify-content: center;
margin-bottom: 0;
font-size: 2rem;
}

#sequence-recall-game .sr-instructions-list {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
}

#sequence-recall-game .sr-instructions-list li {
padding: 0.5rem 0;
padding-left: 1.75rem;
position: relative;
font-size: 0.95rem;
color: var(--color-text-primary, #1a2332);
line-height: 1.5;
}

#sequence-recall-game .sr-instructions-list li::before {
content: attr(data-num);
position: absolute;
left: 0;
top: 0.5rem;
width: 1.25rem;
height: 1.25rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 50%;
font-size: 0.7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}

#sequence-recall-game .sr-best-score {
text-align: center;
padding: 0.75rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
margin-bottom: 1.25rem;
font-size: 0.9rem;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-best-score strong {
color: var(--color-text-primary, #1a2332);
font-weight: 700;
}

#sequence-recall-game .sr-btn-primary {
display: block;
width: 100%;
padding: 0.875rem 1.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.5rem;
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
text-align: center;
text-decoration: none;
}

#sequence-recall-game .sr-btn-primary:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#sequence-recall-game .sr-btn-primary:active {
transform: translateY(0);
}

#sequence-recall-game .sr-btn-secondary {
display: inline-block;
margin-top: 0.75rem;
padding: 0.5rem 1rem;
background: transparent;
color: var(--color-primary, #0f9072);
border: 1px solid var(--color-primary, #0f9072);
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
text-align: center;
}

#sequence-recall-game .sr-btn-secondary:hover {
background: color-mix(in srgb, var(--color-primary, #0f9072) 10%, transparent);
}

/* Wizard overlay */
#sequence-recall-game .sr-wizard-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#sequence-recall-game .sr-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sr-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-card {
background: var(--color-dark-bg-primary, #1e293b);
color: var(--color-dark-text-primary, #e2e8f0);
}
@keyframes sr-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
#sequence-recall-game .sr-wizard-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
#sequence-recall-game .sr-wizard-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
#sequence-recall-game .sr-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary, #4b5b6d);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-desc {
color: var(--color-dark-text-secondary, #94a3b8);
}
#sequence-recall-game .sr-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
#sequence-recall-game .sr-wizard-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
#sequence-recall-game .sr-wizard-dot.active {
background: var(--color-primary, #0f9072);
transform: scale(1.3);
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-dot.active {
background: var(--color-primary, #0f9072);
}
#sequence-recall-game .sr-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary, #0f9072);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
#sequence-recall-game .sr-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#sequence-recall-game .sr-wizard-card { padding: 1.5rem 1rem; }
#sequence-recall-game .sr-wizard-icon { font-size: 2rem; }
#sequence-recall-game .sr-wizard-title { font-size: 1.1rem; }
#sequence-recall-game .sr-wizard-desc { font-size: 0.85rem; }
#sequence-recall-game .sr-icon { font-size: 1.5rem; margin-bottom: 0; }
#sequence-recall-game .sr-title { font-size: 1.3rem; }
#sequence-recall-game .sr-subtitle { font-size: 0.85rem; margin-bottom: 1rem; }
#sequence-recall-game .sr-instructions-list li { font-size: 0.85rem; padding: 0.3rem 0; }
}

/* Header bar */
#sequence-recall-game .sr-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 0.85rem;
font-weight: 600;
}

#sequence-recall-game .sr-header-item {
text-align: center;
line-height: 1.3;
}

#sequence-recall-game .sr-header-label {
display: block;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary, #4b5b6d);
font-weight: 500;
}

#sequence-recall-game .sr-header-value {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text-primary, #1a2332);
}

#sequence-recall-game .sr-header-value.sr-streak {
color: #f59e0b;
}

/* Phase indicator */
#sequence-recall-game .sr-phase-label {
text-align: center;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-primary, #0f9072);
margin-bottom: 0.75rem;
}

/* Progress bar */
#sequence-recall-game .sr-progress {
margin-top: 1rem;
}

#sequence-recall-game .sr-progress-label {
text-align: center;
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.35rem;
}

#sequence-recall-game .sr-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 3px;
overflow: hidden;
}

#sequence-recall-game .sr-progress-fill {
height: 100%;
background: var(--color-primary, #0f9072);
border-radius: 3px;
transition: width 0.3s ease;
}

/* Color display area */
#sequence-recall-game .sr-color-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 220px;
padding: 1rem;
}

#sequence-recall-game .sr-color-box {
width: 160px;
height: 160px;
border-radius: 1rem;
animation: sr-color-appear 0.3s ease-out;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

@keyframes sr-color-appear {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .sr-color-counter {
margin-top: 1rem;
font-size: 1rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}

/* Recall area */
#sequence-recall-game .sr-recall-area {
padding: 0.5rem 0;
}

#sequence-recall-game .sr-selected-sequence {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 44px;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
flex-wrap: wrap;
}

#sequence-recall-game .sr-selected-dot {
width: 28px;
height: 28px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
animation: sr-dot-appear 0.2s ease-out;
flex-shrink: 0;
}

@keyframes sr-dot-appear {
0% { transform: scale(0); }
100% { transform: scale(1); }
}

#sequence-recall-game .sr-selected-placeholder {
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-color-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
margin-bottom: 0.75rem;
}

#sequence-recall-game .sr-color-btn {
aspect-ratio: 1;
border: 3px solid transparent;
border-radius: 0.75rem;
cursor: pointer;
transition: all 0.15s ease;
min-height: 70px;
position: relative;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

#sequence-recall-game .sr-color-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#sequence-recall-game .sr-color-btn:active {
transform: scale(0.95);
}

#sequence-recall-game .sr-color-btn .sr-btn-label {
position: absolute;
bottom: 6px;
left: 0;
right: 0;
text-align: center;
font-size: 0.65rem;
font-weight: 600;
color: rgba(255,255,255,0.9);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#sequence-recall-game .sr-undo-row {
display: flex;
gap: 0.5rem;
}

#sequence-recall-game .sr-undo-btn {
flex: 1;
padding: 0.6rem;
border: 1px solid var(--color-border, #dfe4ea);
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
border-radius: 0.5rem;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-undo-btn:hover {
background: var(--color-bg-secondary, #f0f4f8);
}

#sequence-recall-game .sr-submit-btn {
flex: 2;
padding: 0.6rem;
border: none;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-submit-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}

#sequence-recall-game .sr-submit-btn:not(:disabled):hover {
opacity: 0.9;
}

/* Distraction (math) */
#sequence-recall-game .sr-math-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
padding: 1rem;
}

#sequence-recall-game .sr-math-problem {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
font-family: "Space Grotesk", system-ui, sans-serif;
color: var(--color-text-primary, #1a2332);
}

#sequence-recall-game .sr-math-input-row {
display: flex;
gap: 0.5rem;
align-items: center;
}

#sequence-recall-game .sr-math-input {
width: 100px;
padding: 0.6rem 0.75rem;
border: 2px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
font-size: 1.25rem;
text-align: center;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
outline: none;
}

#sequence-recall-game .sr-math-input:focus {
border-color: var(--color-primary, #0f9072);
}

#sequence-recall-game .sr-math-submit {
padding: 0.6rem 1.25rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-math-submit:hover {
opacity: 0.9;
}

#sequence-recall-game .sr-math-hint {
margin-top: 0.75rem;
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
}

/* Positions grid */
#sequence-recall-game .sr-position-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 260px;
padding: 1rem;
}

#sequence-recall-game .sr-position-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
width: 210px;
}

#sequence-recall-game .sr-position-cell {
width: 64px;
height: 64px;
background: var(--color-bg-secondary, #f0f4f8);
border: 2px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
color: transparent;
}

#sequence-recall-game .sr-position-cell:hover {
border-color: var(--color-primary, #0f9072);
}

#sequence-recall-game .sr-position-cell.sr-pos-active {
background: var(--color-primary, #0f9072);
border-color: var(--color-primary, #0f9072);
color: #fff;
}

#sequence-recall-game .sr-position-cell.sr-pos-highlight {
background: var(--color-primary, #0f9072);
border-color: var(--color-primary, #0f9072);
animation: sr-pos-flash 0.4s ease-out;
}

@keyframes sr-pos-flash {
0% { transform: scale(0.8); opacity: 0.5; }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .sr-position-counter {
margin-top: 0.75rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}

/* Feedback overlay */
#sequence-recall-game .sr-feedback {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
animation: sr-feedback-appear 0.3s ease-out;
}

#sequence-recall-game .sr-feedback-correct {
font-size: 1.5rem;
font-weight: 700;
color: #22c55e;
}

#sequence-recall-game .sr-feedback-wrong {
font-size: 1.5rem;
font-weight: 700;
color: #ef4444;
}

#sequence-recall-game .sr-feedback-points {
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text-secondary, #4b5b6d);
margin-top: 0.25rem;
}

@keyframes sr-feedback-appear {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

/* Game complete */
#sequence-recall-game .sr-complete {
position: relative;
text-align: center;
}

#sequence-recall-game .sr-complete-icon {
font-size: 3rem;
margin-bottom: 0.5rem;
}

#sequence-recall-game .sr-complete-title {
font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 1.25rem;
}

#sequence-recall-game .sr-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-bottom: 1.25rem;
}

#sequence-recall-game .sr-stat-box {
padding: 0.75rem 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
text-align: center;
}

#sequence-recall-game .sr-stat-value {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-text-primary, #1a2332);
display: block;
}

#sequence-recall-game .sr-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-new-best {
display: inline-block;
padding: 0.35rem 0.75rem;
background: #f59e0b;
color: #1a2332;
border-radius: 1rem;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 1rem;
animation: sr-badge-pulse 1s ease-in-out infinite alternate;
}

@keyframes sr-badge-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

#sequence-recall-game .sr-complete-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
margin-top: 0.5rem;
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

/* Hide all screens by default */
#sequence-recall-game .sr-screen {
display: none;
}

#sequence-recall-game .sr-screen.sr-active {
display: block;
}

/* Responsive */
@media (max-width: 400px) {
#sequence-recall-game .sr-color-btn {
min-height: 60px;
}
#sequence-recall-game .sr-color-box {
width: 130px;
height: 130px;
}
#sequence-recall-game .sr-position-grid {
width: 180px;
}
#sequence-recall-game .sr-position-cell {
width: 54px;
height: 54px;
}
}
@media (max-width: 640px) {
#sequence-recall-game .sr-color-grid {
gap: 0.5rem;
}
#sequence-recall-game .sr-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 360px) {
#sequence-recall-game .sr-color-btn {
min-height: 50px;
}
#sequence-recall-game .sr-color-box {
width: 110px;
height: 110px;
}
#sequence-recall-game .sr-position-grid {
width: 160px;
}
#sequence-recall-game .sr-position-cell {
width: 48px;
height: 48px;
}
#sequence-recall-game .sr-stats-grid {
grid-template-columns: 1fr 1fr;
}
#sequence-recall-game .sr-selected-dot {
width: 22px;
height: 22px;
}
}
@keyframes sr-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.sr-confetti-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.sr-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: sr-confetti-fall 2.5s ease-in forwards;
}
.sr-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: sr-glow-fade 1s ease-out forwards;
}
@keyframes sr-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.sr-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 1rem;
animation: sr-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes sr-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#sequence-recall-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #sequence-recall-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="sequence-recall-game">

<div id="sr-instructions" class="sr-screen sr-active">
<div class="sr-card">
<div class="sr-title-row"><span class="sr-icon">&#x1F9E0;</span><h1 class="sr-title">Sequence Recall</h1></div>
<p class="sr-subtitle">ワーキングメモリを鍛えよう</p>
<ul class="sr-instructions-list">
<li data-num="1">順番に表示される色の並びを観察してください</li>
<li data-num="2">順番を注意深く覚えてください</li>
<li data-num="3">まったく同じ順番で色を思い出してください</li>
<li data-num="4">難易度が上がる20レベルをクリアしましょう</li>
</ul>
<div class="sr-best-score" id="sr-best-display">
ベスト: <strong id="sr-best-value">0</strong> ポイント
</div>
<button class="sr-btn-primary" id="sr-start-btn">ゲームスタート</button>
<div id="sr-challenge-banner-wrap"></div>
</div>
</div>

<div id="sr-wizard" class="sr-screen">
<div class="sr-wizard-overlay">
<div class="sr-wizard-card" id="sr-wizard-card"></div>
</div>
</div>

<div id="sr-playing" class="sr-screen">
<div class="sr-header">
<div class="sr-header-item">
<span class="sr-header-label">スコア</span>
<span class="sr-header-value" id="sr-score">0</span>
</div>
<div class="sr-header-item">
<span class="sr-header-label">Level</span>
<span class="sr-header-value" id="sr-level">1</span>
</div>
<div class="sr-header-item">
<span class="sr-header-label">連続</span>
<span class="sr-header-value sr-streak" id="sr-streak">0</span>
</div>
</div>
<div class="sr-phase-label" id="sr-phase-label">Memorize</div>
<div id="sr-play-area"></div>
<div class="sr-progress">
<div class="sr-progress-label" id="sr-progress-label">ラウンド 1 / 3</div>
<div class="sr-progress-bar">
<div class="sr-progress-fill" id="sr-progress-fill" style="width:0%"></div>
</div>
</div>
<button class="gk-finish-btn" id="sr-finish-btn">終了</button>
</div>

<div id="sr-complete" class="sr-screen">
<div class="sr-card sr-complete">
<button class="gk-complete-close" id="sr-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="sr-complete-icon">&#x1F3C6;</div>
<h2 class="sr-complete-title">終了！</h2>
<div id="sr-new-best-badge" class="sr-new-best" style="display:none;">新しいベスト！</div>
<div class="gk-challenge-result" id="sr-challenge-result" style="display:none;"></div>
<div class="sr-stats-grid">
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-score">0</span>
<span class="sr-stat-label">スコア</span>
</div>
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-level">1</span>
<span class="sr-stat-label">Level</span>
</div>
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-accuracy">0%</span>
<span class="sr-stat-label">正確性</span>
</div>
</div>
<div class="sr-complete-links">
<button class="sr-btn-primary" id="sr-play-again-btn">もう一度</button>
<button class="gk-runtime-history-toggle" id="sr-history-toggle" type="button">Show History</button>
<a href="/ja/games/" class="sr-btn-secondary">すべてのゲーム</a>
</div>
<div class="gk-runtime-history-panel" id="sr-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="sr-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="sr-share-btn">&#128279; 結果をシェア</button>
<div class="gk-share-copied" id="sr-share-copied" style="display:none;">リンクをコピーしました！</div>
</div>
</div>
</div>

</div>

<script>
(function() {
var STORAGE_BEST = 'guruka_sequence-recall_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('sr-history-toggle', 'sr-history-panel', 'sr-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var COLORS = [
{ name: '赤', hsl: 'hsl(0,84%,60%)' },
{ name: '青', hsl: 'hsl(217,91%,60%)' },
{ name: '緑', hsl: 'hsl(142,76%,36%)' },
{ name: '黄', hsl: 'hsl(48,96%,53%)' },
{ name: '紫', hsl: 'hsl(280,68%,55%)' },
{ name: 'オレンジ', hsl: 'hsl(25,95%,53%)' }
];

var MAX_LEVEL = 20;
var ROUNDS_PER_LEVEL = 3;

var state = {
screen: 'instructions',
level: 1,
round: 0,
score: 0,
streak: 0,
totalCorrect: 0,
totalAttempts: 0,
colorSequence: [],
positionSequence: [],
selectedColors: [],
selectedPositions: [],
currentShowIndex: 0,
phaseStartTime: 0,
showTimer: null,
feedbackTimer: null
};

function getSequenceLength(level) {
return Math.min(3 + Math.floor(level / 3), 8);
}

function hasDistraction(level) {
return level >= 6;
}

function isDualTrack(level) {
return level >= 11;
}

function getDisplayTime(level) {
return Math.max(1200 - (level - 1) * 40, 600);
}

function getBestScore() {
try {
var val = localStorage.getItem(STORAGE_BEST);
return val ? parseInt(val, 10) : 0;
} catch(e) { return 0; }
}

function setBestScore(s) {
try { localStorage.setItem(STORAGE_BEST, String(s)); } catch(e) {}
}

function getHistory() {
return [];
}

function addHistory(entry) {
void entry;
}

function $(id) { return document.getElementById(id); }

function showScreen(name) {
var screens = document.querySelectorAll('#sequence-recall-game .sr-screen');
for (var i = 0; i < screens.length; i++) {
screens[i].classList.remove('sr-active');
}
var el = $('sr-' + name);
if (el) el.classList.add('sr-active');
state.screen = name;
}

function generateColorSequence(len) {
var seq = [];
for (var i = 0; i < len; i++) {
seq.push(Math.floor(Math.random() * COLORS.length));
}
return seq;
}

function generatePositionSequence(len) {
var positions = [];
var used = {};
var count = Math.min(len, 9);
while (positions.length < count) {
var p = Math.floor(Math.random() * 9);
if (!used[p]) {
used[p] = true;
positions.push(p);
}
}
return positions;
}

function generateMathProblem() {
var ops = ['+', '-', '*'];
var op = ops[Math.floor(Math.random() * ops.length)];
var a, b, answer;
if (op === '+') {
a = Math.floor(Math.random() * 50) + 1;
b = Math.floor(Math.random() * 50) + 1;
answer = a + b;
} else if (op === '-') {
a = Math.floor(Math.random() * 50) + 10;
b = Math.floor(Math.random() * a);
answer = a - b;
} else {
a = Math.floor(Math.random() * 12) + 2;
b = Math.floor(Math.random() * 12) + 2;
answer = a * b;
}
var display = op === '*' ? (a + ' \u00D7 ' + b) : (a + ' ' + op + ' ' + b);
return { display: display, answer: answer };
}

function updateHeader() {
$('sr-score').textContent = state.score;
$('sr-level').textContent = state.level;
$('sr-streak').textContent = state.streak;
if (challenge.active) GK.updateChallengeBar('sr-playing', state.score, challenge.score);
}

function updateProgress() {
$('sr-progress-label').textContent = 'ラウンド ' + (state.round + 1) + ' / ' + ROUNDS_PER_LEVEL;
var pct = (state.round / ROUNDS_PER_LEVEL) * 100;
$('sr-progress-fill').style.width = pct + '%';
}

var SR_WIZARD_STEPS = [
{icon: '\uD83C\uDFA8', title: '色の並びを観察しよう', desc: '色が順番に表示されます。順番を覚えてください！'},
{icon: '\uD83E\uDDE0', title: '順番通りに思い出そう', desc: '見た順番通りに色をタップしてください。'},
{icon: '\uD83D\uDE80', title: '準備はいい？スタート\'s!', desc: '並びは長くなります。集中してください！', final: true}
];
var srWizardStep = 0;
var srWizardCallback = null;

function srRenderWizardStep() {
var s = SR_WIZARD_STEPS[srWizardStep];
var dotsHtml = '';
for (var i = 0; i < SR_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="sr-wizard-dot' + (i === srWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'プレイ開始' : '次へ';
var card = $('sr-wizard-card');
card.innerHTML =
'<div class="sr-wizard-icon">' + s.icon + '</div>' +
'<div class="sr-wizard-title">' + s.title + '</div>' +
'<div class="sr-wizard-desc">' + s.desc + '</div>' +
'<div class="sr-wizard-dots">' + dotsHtml + '</div>' +
'<button class="sr-wizard-btn" id="sr-wizard-next">' + btnLabel + '</button>';
card.style.animation = 'none';
void card.offsetWidth;
card.style.animation = 'sr-wizard-enter 0.3s ease-out';
$('sr-wizard-next').addEventListener('click', srAdvanceWizard);
}

function srAdvanceWizard() {
if (srWizardStep < SR_WIZARD_STEPS.length - 1) {
srWizardStep++;
srRenderWizardStep();
} else {
if (srWizardCallback) srWizardCallback();
}
}

function showWizard(callback) {
srWizardStep = 0;
srWizardCallback = callback;
showScreen('wizard');
srRenderWizardStep();
}

function startRound() {
var seqLen = getSequenceLength(state.level);
state.colorSequence = generateColorSequence(seqLen);
state.positionSequence = isDualTrack(state.level) ? generatePositionSequence(Math.min(seqLen, 9)) : [];
state.selectedColors = [];
state.selectedPositions = [];
state.currentShowIndex = 0;

updateHeader();
updateProgress();
showColorSequence();
}

function showColorSequence() {
$('sr-phase-label').textContent = '色を覚えてください';
state.currentShowIndex = 0;
showNextColor();
}

function showNextColor() {
var area = $('sr-play-area');
if (state.currentShowIndex >= state.colorSequence.length) {
if (isDualTrack(state.level)) {
showPositionSequence();
} else if (hasDistraction(state.level)) {
showDistraction();
} else {
startRecallColors();
}
return;
}

var colorIdx = state.colorSequence[state.currentShowIndex];
var color = COLORS[colorIdx];
var total = state.colorSequence.length;
var current = state.currentShowIndex + 1;

area.innerHTML = '<div class="sr-color-stage">' +
'<div class="sr-color-box" style="background:' + color.hsl + '"></div>' +
'<div class="sr-color-counter">' + current + ' / ' + total + '</div>' +
'</div>';

state.currentShowIndex++;
var dt = getDisplayTime(state.level);
state.showTimer = setTimeout(function() {
showNextColor();
}, dt);
}

function showPositionSequence() {
$('sr-phase-label').textContent = '位置を覚えてください';
state.currentShowIndex = 0;
showNextPosition();
}

function showNextPosition() {
if (state.currentShowIndex >= state.positionSequence.length) {
if (hasDistraction(state.level)) {
showDistraction();
} else {
startRecallColors();
}
return;
}

var pos = state.positionSequence[state.currentShowIndex];
var total = state.positionSequence.length;
var current = state.currentShowIndex + 1;

var html = '<div class="sr-position-stage">';
html += '<div class="sr-position-grid">';
for (var i = 0; i < 9; i++) {
var cls = 'sr-position-cell';
if (i === pos) cls += ' sr-pos-highlight';
html += '<div class="' + cls + '"></div>';
}
html += '</div>';
html += '<div class="sr-position-counter">' + current + ' / ' + total + '</div>';
html += '</div>';

$('sr-play-area').innerHTML = html;

state.currentShowIndex++;
var dt = getDisplayTime(state.level);
state.showTimer = setTimeout(function() {
showNextPosition();
}, dt);
}

function showDistraction() {
$('sr-phase-label').textContent = '計算チャレンジ！';
var problem = generateMathProblem();

var html = '<div class="sr-math-area">';
html += '<div class="sr-math-problem">' + problem.display + ' = ?</div>';
html += '<div class="sr-math-input-row">';
html += '<input type="number" class="sr-math-input" id="sr-math-input" inputmode="numeric" autocomplete="off">';
html += '<button class="sr-math-submit" id="sr-math-btn">OK</button>';
html += '</div>';
html += '<div class="sr-math-hint">解いて進む</div>';
html += '</div>';

$('sr-play-area').innerHTML = html;

var input = $('sr-math-input');
var btn = $('sr-math-btn');

function submitMath() {
var val = parseInt(input.value, 10);
if (isNaN(val)) return;
startRecallColors();
}

btn.addEventListener('click', submitMath);
input.addEventListener('keydown', function(e) {
if (e.key === 'Enter') submitMath();
});

setTimeout(function() { input.focus(); }, 100);
}

function startRecallColors() {
$('sr-phase-label').textContent = '色の並びを思い出してください';
state.selectedColors = [];
state.phaseStartTime = Date.now();
renderRecallColors();
}

function renderRecallColors() {
var needed = state.colorSequence.length;
var html = '<div class="sr-recall-area">';

html += '<div class="sr-selected-sequence" id="sr-selected-seq">';
if (state.selectedColors.length === 0) {
html += '<span class="sr-selected-placeholder">色を順番にタップ（' + needed + ' 個必要）</span>';
} else {
for (var i = 0; i < state.selectedColors.length; i++) {
var c = COLORS[state.selectedColors[i]];
html += '<div class="sr-selected-dot" style="background:' + c.hsl + '"></div>';
}
}
html += '</div>';

html += '<div class="sr-color-grid">';
for (var j = 0; j < COLORS.length; j++) {
html += '<button class="sr-color-btn" data-color="' + j + '" style="background:' + COLORS[j].hsl + '">';
html += '<span class="sr-btn-label">' + COLORS[j].name + '</span>';
html += '</button>';
}
html += '</div>';

html += '<div class="sr-undo-row">';
html += '<button class="sr-undo-btn" id="sr-undo-btn">元に戻す</button>';
html += '<button class="sr-submit-btn" id="sr-submit-colors-btn"' + (state.selectedColors.length < needed ? ' disabled' : '') + '>確定</button>';
html += '</div>';

html += '</div>';

$('sr-play-area').innerHTML = html;

var buttons = document.querySelectorAll('#sequence-recall-game .sr-color-btn');
for (var k = 0; k < buttons.length; k++) {
buttons[k].addEventListener('click', function() {
var ci = parseInt(this.getAttribute('data-color'), 10);
if (state.selectedColors.length < needed) {
state.selectedColors.push(ci);
renderRecallColors();
if (state.selectedColors.length === needed) {
setTimeout(function() {
var sb = $('sr-submit-colors-btn');
if (sb) sb.focus();
}, 50);
}
}
});
}

$('sr-undo-btn').addEventListener('click', function() {
if (state.selectedColors.length > 0) {
state.selectedColors.pop();
renderRecallColors();
}
});

var submitBtn = $('sr-submit-colors-btn');
submitBtn.addEventListener('click', function() {
if (state.selectedColors.length === needed) {
submitColorRecall();
}
});
}

function submitColorRecall() {
var responseTime = Date.now() - state.phaseStartTime;
var correct = true;
for (var i = 0; i < state.colorSequence.length; i++) {
if (state.colorSequence[i] !== state.selectedColors[i]) {
correct = false;
break;
}
}

if (isDualTrack(state.level)) {
state._colorCorrect = correct;
state._colorResponseTime = responseTime;
startRecallPositions();
} else {
resolveRound(correct, responseTime);
}
}

function startRecallPositions() {
$('sr-phase-label').textContent = '順番通りに位置を思い出してください';
state.selectedPositions = [];
state.phaseStartTime = Date.now();
renderRecallPositions();
}

function renderRecallPositions() {
var needed = state.positionSequence.length;
var html = '<div class="sr-position-stage">';

html += '<div class="sr-selected-sequence">';
if (state.selectedPositions.length === 0) {
html += '<span class="sr-selected-placeholder">グリッド位置を順番にタップ（' + needed + ' 個必要）</span>';
} else {
for (var i = 0; i < state.selectedPositions.length; i++) {
html += '<div class="sr-selected-dot" style="background:var(--color-primary, #0f9072)"></div>';
}
}
html += '</div>';

html += '<div class="sr-position-grid">';
for (var j = 0; j < 9; j++) {
var isSelected = false;
var order = -1;
for (var k = 0; k < state.selectedPositions.length; k++) {
if (state.selectedPositions[k] === j) {
isSelected = true;
order = k + 1;
break;
}
}
var cls = 'sr-position-cell';
if (isSelected) cls += ' sr-pos-active';
html += '<div class="' + cls + '" data-pos="' + j + '">' + (isSelected ? order : '') + '</div>';
}
html += '</div>';

html += '<div class="sr-undo-row" style="margin-top:0.75rem;max-width:210px;width:100%;">';
html += '<button class="sr-undo-btn" id="sr-undo-pos-btn">元に戻す</button>';
html += '<button class="sr-submit-btn" id="sr-submit-pos-btn"' + (state.selectedPositions.length < needed ? ' disabled' : '') + '>確定</button>';
html += '</div>';

html += '</div>';

$('sr-play-area').innerHTML = html;

var cells = document.querySelectorAll('#sequence-recall-game .sr-position-cell');
for (var m = 0; m < cells.length; m++) {
cells[m].addEventListener('click', function() {
var p = parseInt(this.getAttribute('data-pos'), 10);
var alreadySelected = false;
for (var n = 0; n < state.selectedPositions.length; n++) {
if (state.selectedPositions[n] === p) {
alreadySelected = true;
break;
}
}
if (!alreadySelected && state.selectedPositions.length < needed) {
state.selectedPositions.push(p);
renderRecallPositions();
}
});
}

$('sr-undo-pos-btn').addEventListener('click', function() {
if (state.selectedPositions.length > 0) {
state.selectedPositions.pop();
renderRecallPositions();
}
});

$('sr-submit-pos-btn').addEventListener('click', function() {
if (state.selectedPositions.length === needed) {
submitPositionRecall();
}
});
}

function submitPositionRecall() {
var responseTime = Date.now() - state.phaseStartTime;
var posCorrect = true;
for (var i = 0; i < state.positionSequence.length; i++) {
if (state.positionSequence[i] !== state.selectedPositions[i]) {
posCorrect = false;
break;
}
}

var bothCorrect = state._colorCorrect && posCorrect;
var combinedTime = state._colorResponseTime + responseTime;
resolveRound(bothCorrect, combinedTime);
}

function formatColorHistory(seq) {
if (!seq || !seq.length) return 'none';
var out = [];
for (var i = 0; i < seq.length; i++) {
var color = COLORS[seq[i]];
out.push('<span class="gk-history-swatch" style="background:' + runHistory.escape(color.hsl) + '"></span>' + runHistory.escape(color.name));
}
return out.join(', ');
}

function formatPositionHistory(seq) {
if (!seq || !seq.length) return 'none';
var out = [];
for (var i = 0; i < seq.length; i++) out.push(String(seq[i] + 1));
return out.join(', ');
}

function recordSequenceHistory(correct) {
var html = '<strong>Sequence recall</strong>';
html += '<div class="gk-runtime-history-sub">Colors - Your: ' + formatColorHistory(state.selectedColors) + '</div>';
html += '<div class="gk-runtime-history-sub">Colors - Correct: ' + formatColorHistory(state.colorSequence) + '</div>';
if (isDualTrack(state.level)) {
html += '<div class="gk-runtime-history-sub">Positions - Your: ' + runHistory.escape(formatPositionHistory(state.selectedPositions)) + '</div>';
html += '<div class="gk-runtime-history-sub">Positions - Correct: ' + runHistory.escape(formatPositionHistory(state.positionSequence)) + '</div>';
}
runHistory.pushHtml(correct, html);
}

function resolveRound(correct, responseTime) {
state.totalAttempts++;
recordSequenceHistory(correct);
var points = 0;

if (correct) {
state.totalCorrect++;
state.streak++;
points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
} else {
state.streak = 0;
}

updateHeader();
showFeedback(correct, points);
}

function showFeedback(correct, points) {
$('sr-phase-label').textContent = '';
var html = '<div class="sr-feedback"><div>';
if (correct) {
html += '<div class="sr-feedback-correct">正解！</div>';
html += '<div class="sr-feedback-points">+' + points + ' ポイント</div>';
} else {
html += '<div class="sr-feedback-wrong">不正解</div>';
html += '<div class="sr-feedback-points">Serie zurückgesetzt</div>';
}
html += '</div></div>';

$('sr-play-area').innerHTML = html;

state.feedbackTimer = setTimeout(function() {
advanceRound(correct);
}, 1200);
}

function advanceRound(wasCorrect) {
state.round++;

if (state.round >= ROUNDS_PER_LEVEL) {
if (wasCorrect) {
state.level++;
}
state.round = 0;

if (state.level > MAX_LEVEL) {
endGame();
return;
}
}

updateProgress();
startRound();
}

/* ── Celebration effects ── */
function srShowConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'sr-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'sr-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'sr-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function srAnimateScoreCountUp(el, target) {
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(target * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

function endGame() {
exitMobileGameMode();
var accuracy = state.totalAttempts > 0 ? Math.round((state.totalCorrect / state.totalAttempts) * 100) : 0;
var best = getBestScore();
var isNewBest = state.score > best;

if (isNewBest) {
setBestScore(state.score);
}

addHistory({
score: state.score,
level: state.level > MAX_LEVEL ? MAX_LEVEL : state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var iconEl = document.querySelector('#sr-complete .sr-complete-icon');
var titleEl = document.querySelector('#sr-complete .sr-complete-title');
var badge = $('sr-new-best-badge');

if (isNewBest) {
srShowConfetti();
iconEl.textContent = '\uD83C\uDF89';
titleEl.textContent = 'すばらしい！';
badge.className = 'sr-new-best-enhanced';
badge.innerHTML = 'uD83CuDF1F すばらしい！新記録！';
badge.style.display = 'inline-block';
} else {
iconEl.textContent = '\uD83C\uDFC6';
titleEl.textContent = 'お疲れさまでした！';
badge.className = 'sr-new-best';
badge.style.display = 'none';
}

GK.renderChallengeResult('sr-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

$('sr-final-level').textContent = state.level > MAX_LEVEL ? MAX_LEVEL : state.level;
$('sr-final-accuracy').textContent = accuracy + '%';

showScreen('complete');
srAnimateScoreCountUp($('sr-final-score'), state.score);
}

function resetGame() {
clearTimeout(state.showTimer);
clearTimeout(state.feedbackTimer);
state.level = 1;
state.round = 0;
state.score = 0;
state.streak = 0;
state.totalCorrect = 0;
state.totalAttempts = 0;
state.selectedColors = [];
state.selectedPositions = [];
state.colorSequence = [];
state.positionSequence = [];
runHistory.clear();
}

function initInstructions() {
var best = getBestScore();
$('sr-best-value').textContent = best;
GK.renderChallengeBanner('sr-challenge-banner-wrap', challenge);
showScreen('instructions');
}


$('sr-close-btn').addEventListener('click', function() {
$('sr-best-value').textContent = getBestScore();
showScreen('instructions');
});

$('sr-finish-btn').addEventListener('click', function() {
endGame();
});

$('sr-start-btn').addEventListener('click', function() {
resetGame();
showWizard(function() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sr-playing', challenge);
startRound();
});
});

$('sr-play-again-btn').addEventListener('click', function() {
resetGame();
showWizard(function() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sr-playing', challenge);
startRound();
});
});

$('sr-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

$('sr-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Sequence Recall', '/ja/games/sequence-recall/', 'sr-share-copied');
});

initInstructions();
})();
</script>

### Speed Match - 脳トレゲーム
URL: https://guruka.com/ja/games/speed-match/
Description: 記号をすばやく比較。

<style>
#speed-match-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #speed-match-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#sm-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.sm-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#sm-instructions .sm-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#sm-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#sm-instructions .sm-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #sm-instructions .sm-subtitle {
color: var(--color-dark-text-secondary);
}

#sm-instructions .sm-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #sm-instructions .sm-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#sm-instructions .sm-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#sm-instructions .sm-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#sm-instructions .sm-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.sm-kbd-hints {
display: flex;
gap: 1.5rem;
justify-content: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}

.sm-kbd-hint {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-kbd-hint {
color: var(--color-dark-text-secondary);
}

.sm-kbd {
display: inline-block;
padding: 0.15rem 0.5rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.25rem;
font-family: monospace;
font-size: 0.8rem;
font-weight: 600;
}

[data-theme="dark"] .sm-kbd {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.sm-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.sm-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.sm-btn-primary:hover {
background: var(--color-primary-hover);
}

.sm-btn-primary:active {
transform: scale(0.97);
}

.sm-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.sm-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .sm-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#sm-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#sm-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sm-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #sm-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes sm-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.sm-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.sm-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.sm-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .sm-wizard-desc {
color: var(--color-dark-text-secondary);
}
.sm-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.sm-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.sm-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"] .sm-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .sm-wizard-dot.active {
background: var(--color-primary);
}
.sm-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.sm-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#sm-wizard-card {
padding: 1.5rem 1rem;
}
.sm-wizard-icon {
font-size: 2rem;
}
.sm-wizard-title {
font-size: 1.1rem;
}
.sm-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#sm-playing {
display: none;
flex: 1;
flex-direction: column;
}

.sm-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .sm-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-stat {
text-align: center;
}

.sm-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .sm-stat-label {
color: var(--color-dark-text-secondary);
}

.sm-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.sm-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.sm-level-text {
font-weight: 600;
}

.sm-nback-badge {
background: var(--color-primary);
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.sm-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .sm-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.sm-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .sm-timer-bar {
background: var(--color-dark-bg-secondary);
}

.sm-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.sm-timer-fill.sm-timer-warning {
background: #ef4444;
}

/* ── Symbol Display ── */
.sm-symbol-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
}

.sm-symbol {
font-size: 7rem;
line-height: 1;
transition: transform 0.15s ease;
animation: sm-symbol-enter 0.2s ease-out;
}

@keyframes sm-symbol-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.sm-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.sm-feedback-flash.sm-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.sm-feedback-flash.sm-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.sm-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.sm-feedback-icon.sm-show-check {
animation: sm-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.sm-feedback-icon.sm-show-x {
animation: sm-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes sm-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Action Buttons ── */
.sm-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.sm-action-btn {
flex: 1;
padding: 1rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
background: var(--color-bg-primary);
color: var(--color-text-primary);
}

[data-theme="dark"] .sm-action-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.sm-action-btn:active {
transform: scale(0.95);
}

.sm-action-btn:disabled {
opacity: 0.45;
cursor: default;
transform: none;
}

.sm-action-btn .sm-btn-icon {
font-size: 1.5rem;
}

.sm-action-btn .sm-btn-kbd {
font-size: 0.65rem;
color: var(--color-text-secondary);
font-weight: 400;
}

[data-theme="dark"] .sm-action-btn .sm-btn-kbd {
color: var(--color-dark-text-secondary);
}

.sm-btn-different {
border-color: #ef4444;
}

.sm-btn-different:hover {
background: rgba(239, 68, 68, 0.08);
}

[data-theme="dark"] .sm-btn-different:hover {
background: rgba(239, 68, 68, 0.15);
}

.sm-btn-same {
border-color: #22c55e;
}

.sm-btn-same:hover {
background: rgba(34, 197, 94, 0.08);
}

[data-theme="dark"] .sm-btn-same:hover {
background: rgba(34, 197, 94, 0.15);
}

.sm-playing-kbd-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-playing-kbd-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#sm-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#sm-pause-overlay .sm-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#sm-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.sm-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sm-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .sm-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes sm-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.sm-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.sm-complete-card .sm-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.sm-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.sm-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: sm-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes sm-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.sm-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.sm-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .sm-complete-stat {
background: var(--color-dark-bg-secondary);
}

.sm-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.sm-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.sm-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.sm-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .sm-back-link {
color: var(--color-dark-text-secondary);
}

.sm-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.sm-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.sm-level-up-toast.sm-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#speed-match-game {
padding: 0.5rem;
}
.sm-symbol {
font-size: 5rem;
}
.sm-action-btn {
padding: 0.75rem;
font-size: 1rem;
}
.sm-header {
padding: 0.5rem;
gap: 0.25rem;
}
.sm-stat-value {
font-size: 1rem;
}
#sm-instructions { padding: 0.75rem 0.5rem; }
#sm-instructions .sm-icon { font-size: 2rem; margin-bottom: 0; }
#sm-instructions h2 { font-size: 1.3rem; }
#sm-instructions .sm-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#sm-instructions .sm-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#sm-instructions .sm-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.sm-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#speed-match-game {
padding: 0.75rem;
}
.sm-symbol {
font-size: 6rem;
}
.sm-action-btn {
padding: 0.875rem;
}
}
@media (max-width: 360px) {
.sm-symbol {
font-size: 4rem;
}
.sm-action-btn {
padding: 0.625rem;
font-size: 0.9rem;
}
.sm-complete-stats {
grid-template-columns: 1fr 1fr;
}
.sm-final-score {
font-size: 2rem;
}
.sm-header {
padding: 0.375rem;
}
.sm-stat-value {
font-size: 0.9rem;
}
}
@keyframes sm-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.sm-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.sm-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: sm-confetti-fall 2.5s ease-in forwards;
}
.sm-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: sm-glow-fade 1s ease-out forwards;
}
@keyframes sm-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.sm-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: sm-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes sm-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#speed-match-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#speed-match-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #speed-match-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#speed-match-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#speed-match-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="speed-match-game">

<div id="sm-instructions">
<div class="sm-title-row"><span class="sm-icon">&#9889;</span><h2>Speed Match</h2></div>
<p class="sm-subtitle">あなたの処理速度はどれくらい？</p>
<div class="sm-how-to">
<h3>遊び方</h3>
<ol>
<li>毎ラウンド、画面にシンボルが表示されます。</li>
<li>前のラウンドのシンボルと<strong>同じかどうか</strong>を判断してください。</li>
<li>同じなら<strong>同じ</strong>、違うなら<strong>違う</strong>をクリックしてください。</li>
<li>時間切れになる前に答えてください。さもないと不正解になります！</li>
<li>レベルが上がると、ゲームはより速く難しくなります。</li>
</ol>
</div>
<div class="sm-kbd-hints">
<span class="sm-kbd-hint"><span class="sm-kbd">1</span> 違う</span>
<span class="sm-kbd-hint"><span class="sm-kbd">2</span> 同じ</span>
<span class="sm-kbd-hint"><span class="sm-kbd">Esc</span> 一時停止</span>
</div>
<div id="sm-best-display" class="sm-personal-best" style="display:none;">
ベスト: <strong id="sm-best-score">0</strong> ポイント
</div>
<button class="sm-btn-primary" id="sm-start-btn">ゲームスタート</button>
<div id="sm-challenge-banner-wrap"></div>
</div>

<div id="sm-wizard">
<div id="sm-wizard-card"></div>
</div>

<div id="sm-playing">
<div class="sm-header">
<div class="sm-stat">
<div class="sm-stat-label">スコア</div>
<div class="sm-stat-value" id="sm-score">0</div>
</div>
<div class="sm-stat">
<div class="sm-stat-label">連続</div>
<div class="sm-stat-value" id="sm-streak">0</div>
</div>
<div class="sm-stat">
<div class="sm-stat-label">Level</div>
<div class="sm-stat-value" id="sm-level">1</div>
</div>
</div>
<div class="sm-level-info">
<span class="sm-level-text">Level <span id="sm-level-text">1</span></span>
<span class="sm-nback-badge" id="sm-nback-badge">1-Back</span>
</div>
<div class="sm-progress-bar">
<div class="sm-progress-fill" id="sm-progress-fill" style="width:0%"></div>
</div>
<div class="sm-timer-bar">
<div class="sm-timer-fill" id="sm-timer-fill" style="width:100%"></div>
</div>
<div class="sm-symbol-area">
<div class="sm-feedback-flash" id="sm-feedback-flash"></div>
<div class="sm-feedback-icon" id="sm-feedback-icon"></div>
<div class="sm-symbol" id="sm-symbol"></div>
</div>
<div class="sm-actions">
<button class="sm-action-btn sm-btn-different" id="sm-btn-different">
<span class="sm-btn-icon">&#10007;</span>
<span>違う</span>
<span class="sm-btn-kbd">1</span>
</button>
<button class="sm-action-btn sm-btn-same" id="sm-btn-same">
<span class="sm-btn-icon">&#10003;</span>
<span>同じ</span>
<span class="sm-btn-kbd">2</span>
</button>
</div>
<div class="sm-playing-kbd-hint"><strong>Esc</strong>キーで一時停止</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="sm-pause-btn" type="button">一時停止</button>
<button class="gk-finish-btn" id="sm-finish-btn" type="button">終了</button>
</div>
</div>

<div id="sm-pause-overlay">
<div class="sm-pause-text">一時停止中</div>
<button class="sm-btn-primary" id="sm-resume-btn">再開</button>
</div>

<div id="sm-complete-overlay">
<div class="sm-complete-card">
<button class="gk-complete-close" id="sm-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="sm-trophy">&#127942;</div>
<h2>終了！</h2>
<div class="sm-final-score" id="sm-final-score">0</div>
<div id="sm-new-best" class="sm-new-best" style="display:none;">&#11088; 新記録！</div>
<div class="gk-challenge-result" id="sm-challenge-result" style="display:none;"></div>
<div class="sm-complete-stats">
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">レベル</div>
<div class="sm-complete-stat-value" id="sm-final-level">1</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">正確性</div>
<div class="sm-complete-stat-value" id="sm-final-accuracy">0%</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">最高連続</div>
<div class="sm-complete-stat-value" id="sm-final-streak">0</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">ベスト</div>
<div class="sm-complete-stat-value" id="sm-final-best">0</div>
</div>
</div>
<div class="sm-complete-actions">
<button class="sm-btn-primary" id="sm-play-again-btn">もう一度</button>
<button class="gk-runtime-history-toggle" id="sm-history-toggle" type="button">Show History</button>
<a href="/ja/games/" class="sm-back-link">&larr; すべてのゲーム</a>
</div>
<div class="gk-runtime-history-panel" id="sm-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="sm-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="sm-share-btn">&#128279; 結果をシェア</button>
<div class="gk-share-copied" id="sm-share-copied" style="display:none;">リンクをコピーしました！</div>
</div>
</div>
</div>

<div class="sm-level-up-toast" id="sm-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var SYMBOLS = ['\u25C6', '\u25CF', '\u25A0', '\u25B2', '\u2605', '\u2666', '\u2660', '\u2663', '\u2665', '\u2B1F', '\u2B21', '\u25EF'];
var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_speed-match_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('sm-history-toggle', 'sm-history-panel', 'sm-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
symbolHistory: [],
currentSymbol: '',
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('sm-instructions');
var elWizard = document.getElementById('sm-wizard');
var elWizardCard = document.getElementById('sm-wizard-card');
var elPlaying = document.getElementById('sm-playing');
var elPauseOverlay = document.getElementById('sm-pause-overlay');
var elCompleteOverlay = document.getElementById('sm-complete-overlay');
var elScore = document.getElementById('sm-score');
var elStreak = document.getElementById('sm-streak');
var elLevel = document.getElementById('sm-level');
var elLevelText = document.getElementById('sm-level-text');
var elNbackBadge = document.getElementById('sm-nback-badge');
var elProgressFill = document.getElementById('sm-progress-fill');
var elTimerFill = document.getElementById('sm-timer-fill');
var elSymbol = document.getElementById('sm-symbol');
var elFeedbackFlash = document.getElementById('sm-feedback-flash');
var elFeedbackIcon = document.getElementById('sm-feedback-icon');
var elFinalScore = document.getElementById('sm-final-score');
var elNewBest = document.getElementById('sm-new-best');
var elFinalLevel = document.getElementById('sm-final-level');
var elFinalAccuracy = document.getElementById('sm-final-accuracy');
var elFinalStreak = document.getElementById('sm-final-streak');
var elFinalBest = document.getElementById('sm-final-best');
var elBestDisplay = document.getElementById('sm-best-display');
var elBestScore = document.getElementById('sm-best-score');
var elLevelToast = document.getElementById('sm-level-toast');
var btnStart = document.getElementById('sm-start-btn');
var btnDifferent = document.getElementById('sm-btn-different');
var btnSame = document.getElementById('sm-btn-same');
var btnResume = document.getElementById('sm-resume-btn');
var btnPlayAgain = document.getElementById('sm-play-again-btn');

/* ── Level parameters ── */
function getNBack(lvl) {
return lvl <= 10 ? 1 : 2;
}

function getDisplayTime(lvl) {
return Math.max(2500 - lvl * 100, 800);
}

function getSymbolCount(lvl) {
return Math.min(6 + Math.floor(lvl / 3), 12);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Pick a random symbol ── */
function pickSymbol() {
var count = getSymbolCount(state.level);
var pool = SYMBOLS.slice(0, count);
return pool[Math.floor(Math.random() * pool.length)];
}

/* ── Determine if current symbol matches nBack ── */
function isMatch() {
var nBack = getNBack(state.level);
var idx = state.symbolHistory.length - 1 - nBack;
if (idx < 0) return false;
return state.symbolHistory[idx] === state.currentSymbol;
}

function hasComparisonTarget() {
return state.symbolHistory.length > getNBack(state.level);
}

function setAnswerButtonsEnabled(enabled) {
btnDifferent.disabled = !enabled;
btnSame.disabled = !enabled;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
var nBack = getNBack(state.level);
elNbackBadge.textContent = nBack + '-Back';
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('sm-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('sm-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('sm-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'sm-feedback-flash';
elFeedbackIcon.className = 'sm-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('sm-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('sm-show-check');
} else {
elFeedbackFlash.classList.add('sm-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('sm-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'sm-feedback-flash';
elFeedbackIcon.className = 'sm-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('sm-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('sm-toast-show');
}, 1500);
}

function expectedSameForCurrentRound() {
if (!hasComparisonTarget()) return false;
return isMatch();
}

function sameLabel(value) {
if (value === null || value === undefined) return 'No answer';
return value ? 'Same' : 'Different';
}

function recordSpeedHistory(userSaidSame, correct) {
var expected = expectedSameForCurrentRound();
var html = '<strong>' + runHistory.escape(getNBack(state.level) + '-Back') + '</strong>';
html += '<div class="gk-runtime-history-sub">Symbol: ' + runHistory.escape(state.currentSymbol) + '</div>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(sameLabel(userSaidSame)) + ' | Correct: ' + runHistory.escape(sameLabel(expected)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(userSaidSame) {
if (state.answered || state.gameOver || !hasComparisonTarget()) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var matchResult = isMatch();
var correct = (userSaidSame === matchResult);

state.totalAnswered++;
recordSpeedHistory(userSaidSame, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.symbolHistory = [];
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;

if (!hasComparisonTarget()) {
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 150);
return;
}
state.totalAnswered++;
state.streak = 0;
recordSpeedHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.symbolHistory = [];
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;
state.currentSymbol = pickSymbol();
state.symbolHistory.push(state.currentSymbol);

elSymbol.textContent = state.currentSymbol;
elSymbol.style.animation = 'none';
void elSymbol.offsetWidth;
elSymbol.style.animation = '';

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();
setAnswerButtonsEnabled(hasComparisonTarget());

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'sm-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'sm-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'sm-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.sm-trophy');
var title = document.querySelector('#sm-complete-overlay .sm-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'すばらしい！';
elNewBest.className = 'sm-new-best-enhanced';
elNewBest.innerHTML = 'uD83CuDF1F すばらしい！新記録！';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'お疲れさまでした！';
elNewBest.className = 'sm-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('sm-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
/* Restart the current round's timer with full time */
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var SM_WIZARD_STEPS = [
{icon: '\u2728', title: 'シンボルが画面に表示されます', desc: '毎ラウンド、シンボルが表示されます。よく見てください！'},
{icon: '\u2194\uFE0F', title: '同じ？違う？', desc: '前のシンボルと同じですか？タップして答えてください。'},
{icon: '\u26A1', title: 'すばやく！', desc: '時間内に反応しましょう。', final: true}
];
var smWizardStep = 0;

function renderWizardStep() {
var s = SM_WIZARD_STEPS[smWizardStep];
var dotsHtml = '';
for (var i = 0; i < SM_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="sm-wizard-dot' + (i === smWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'ゲームスタート' : '次へ';
elWizardCard.innerHTML =
'<div class="sm-wizard-icon">' + s.icon + '</div>' +
'<div class="sm-wizard-title">' + s.title + '</div>' +
'<div class="sm-wizard-desc">' + s.desc + '</div>' +
'<div class="sm-wizard-dots">' + dotsHtml + '</div>' +
'<button class="sm-wizard-btn" id="sm-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'sm-wizard-enter 0.3s ease-out';
document.getElementById('sm-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (smWizardStep < SM_WIZARD_STEPS.length - 1) {
smWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
smWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.symbolHistory = [];
state.currentSymbol = '';
runHistory.clear();
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sm-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('sm-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

btnDifferent.addEventListener('click', function() {
processAnswer(false);
});

btnSame.addEventListener('click', function() {
processAnswer(true);
});

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('sm-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('sm-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('sm-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('sm-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Speed Match', '/ja/games/speed-match/', 'sm-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key === '1') {
e.preventDefault();
processAnswer(false);
} else if (e.key === '2') {
e.preventDefault();
processAnswer(true);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('sm-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### オーロラ - アファメーションビジュアル
URL: https://guruka.com/ja/visuals/aurora/
Description: 画面を横切る流れるオーロラの色帯。. カスタムアファメーションテキストを追加。ブラウザにプライベートに保存。

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #020810;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/ja/visuals/" class="vp-back">&larr; すべてのビジュアル</a>
<h1 class="vp-title">オーロラ</h1>
<p class="vp-desc">流れる北極光。カラースキームを選択してください。</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#22d3ee,#10b981)"></div>
<span>アークティック</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#a855f7,#ec4899)"></div>
<span>コズミック</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f472b6,#eab308)"></div>
<span>ドーン</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">アファメーションテキスト（任意）</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">プリセット <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="任意。アファメーションを入力してください。テキストは一行ずつ表示されます。"></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">ペース <span id="vp-pace-val">普通</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">開始</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">どこでもタップして終了</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'aurora';
var currentAffId = null;
var paceLabels = ["とても遅い","遅い","普通","速い","とても速い"];
var currentPace = 2;
var schemes = [
{ name:'Arctic', bg:'#020810',
bands:[
{colors:['#22d3ee','#06b6d4'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#10b981','#059669'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#22d3ee','#14b8a6'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#34d399','#06b6d4'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#67e8f9','#a7f3d0'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]},
{ name:'Cosmic', bg:'#0a0510',
bands:[
{colors:['#a855f7','#7c3aed'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#ec4899','#be185d'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#c084fc','#e879f9'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#8b5cf6','#d946ef'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#f0abfc','#c4b5fd'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]},
{ name:'Dawn', bg:'#100805',
bands:[
{colors:['#f472b6','#fb923c'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#eab308','#f59e0b'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#fb7185','#fbbf24'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#f9a8d4','#fcd34d'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#fda4af','#fde68a'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]}
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var offCanvas, offCtx, halfW, halfH;

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'なし',text:''},
{title:'心の平穏',text:'私の心は穏やかで澄んでいる\n私はコントロールできないことを手放す\n私は今この瞬間にいる'},
{title:'自信',text:'私は自分自身と自分の能力を信じている\n私は良いものに値する\n私は日々強くなっている'},
{title:'手放す',text:'もう必要のないものを手放す\n自分自身と他者を許す\n平和のための空間を作る'},
{title:'感謝',text:'この瞬間に感謝している\n豊かさが人生に流れ込む\nシンプルなことに感謝する'},
{title:'集中とエネルギー',text:'私の集中力は鋭く安定している\n目的を持ってエネルギーを注ぐ\n意図を持って前に進む'},
{title:'睡眠と休息',text:'休むことを自分に許す\n呼吸のたびに体がリラックスする\n穏やかな眠りへと導かれる'},
{title:'禁煙',text:'肺は日々きれいになっている\n私はどんな衝動よりも強い\n一息一息が勝利である'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'テキストをクリア') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var time = t / 1000;

// Parse background color for smoothstep
var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);

if (reducedMotion) {
ctx.globalAlpha = 1;
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);
for (var b = 0; b < s.bands.length; b++) {
var band = s.bands[b];
var y = H * band.baseY;
var grad = ctx.createLinearGradient(0, y - H * 0.1, 0, y + H * 0.15);
grad.addColorStop(0, band.colors[0] + '00');
grad.addColorStop(0.3, band.colors[0] + hexAlpha(band.alpha));
grad.addColorStop(0.7, band.colors[1] + hexAlpha(band.alpha * 0.7));
grad.addColorStop(1, band.colors[1] + '00');
ctx.shadowColor = band.colors[0];
ctx.shadowBlur = 15;
ctx.fillStyle = grad;
ctx.fillRect(0, y - H * 0.1, W, H * 0.25);
}
ctx.shadowBlur = 0;
return;
}

var scaleX = halfW / W, scaleY = halfH / H;

// 1. Clear offscreen with background
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// 2. Draw bands on offscreen with 'screen' compositing
offCtx.save();
offCtx.globalCompositeOperation = 'screen';

for (var b = 0; b < s.bands.length; b++) {
var band = s.bands[b];
var pulse = 0.75 + 0.25 * Math.sin(time * 0.08 + b * 0.7);
var vertOsc = Math.sin(time * 0.04 + b * 1.1) * 0.04;
offCtx.beginPath();

var baseY = halfH * (band.baseY + vertOsc);
var amp = halfH * band.amp;
for (var x = 0; x <= halfW; x += 3) {
var realX = x / scaleX;
var noise1 = Math.sin(realX * band.freq + time * band.speed);
var noise2 = Math.sin(realX * band.freq * 1.7 + time * band.speed * 0.6 + 2.1);
var noise3 = Math.sin(realX * band.freq * 0.5 + time * band.speed * 1.3 + 4.3);
var y = baseY + amp * (noise1 * 0.5 + noise2 * 0.3 + noise3 * 0.2);
if (x === 0) offCtx.moveTo(x, y);
else offCtx.lineTo(x, y);
}

offCtx.lineTo(halfW, halfH * (band.baseY + vertOsc + 0.25));
offCtx.lineTo(0, halfH * (band.baseY + vertOsc + 0.25));
offCtx.closePath();

var grad = offCtx.createLinearGradient(0, baseY - amp, 0, baseY + halfH * 0.25);
grad.addColorStop(0, band.colors[0] + hexAlpha(band.alpha * 0.3 * pulse));
grad.addColorStop(0.3, band.colors[0] + hexAlpha(band.alpha * pulse));
grad.addColorStop(0.7, band.colors[1] + hexAlpha(band.alpha * 0.6 * pulse));
grad.addColorStop(1, band.colors[1] + '00');
offCtx.fillStyle = grad;
offCtx.fill();
}

offCtx.restore();

// 3. Smoothstep threshold on offscreen pixel data
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// 4. Upscale to main canvas with smoothing
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

// 5. Draw stars on main canvas at full resolution (stays crisp)
for (var i = 0; i < 60; i++) {
var sx = (Math.sin(i * 127.1 + 311.7) * 0.5 + 0.5) * W;
var sy = (Math.sin(i * 269.5 + 183.3) * 0.5 + 0.5) * H * 0.6;
var sa = 0.2 + 0.3 * Math.abs(Math.sin(time * 0.5 + i));
ctx.beginPath();
ctx.arc(sx, sy, 0.8, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,255,255,' + sa + ')';
ctx.fill();
}

animId = requestAnimationFrame(draw);
}

function hexAlpha(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'モーション軽減が有効 · 静的ビューを表示中<br>どこでもタップして終了';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### 溶岩流 - アファメーションビジュアル
URL: https://guruka.com/ja/visuals/lava-flow/
Description: 浮遊し、融合し、分離する溶岩のしずく。. カスタムアファメーションテキストを追加。ブラウザにプライベートに保存。

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0d0505;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/ja/visuals/" class="vp-back">&larr; すべてのビジュアル</a>
<h1 class="vp-title">溶岩流</h1>
<p class="vp-desc">融合と分離を繰り返すしずく。カラースキームを選択してください。</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f97316,#ef4444)"></div>
<span>マグマ</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#06b6d4,#d946ef)"></div>
<span>ネオン</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#059669,#84cc16)"></div>
<span>エメラルド</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">アファメーションテキスト（任意）</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">プリセット <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="任意。アファメーションを入力してください。テキストは一行ずつ表示されます。"></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">ペース <span id="vp-pace-val">普通</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">開始</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">どこでもタップして終了</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'lava-flow';
var currentAffId = null;
var paceLabels = ["とても遅い","遅い","普通","速い","とても速い"];
var currentPace = 2;
var schemes = [
{ name:'Magma', bg:'#0d0505', colors:['#ff4500','#ff6b35','#ffaa00','#ff2200','#ff8c00','#cc3300','#ff5500'] },
{ name:'Neon', bg:'#050510', colors:['#00e5ff','#e040fb','#2979ff','#00bcd4','#d500f9','#448aff','#18ffff'] },
{ name:'Emerald', bg:'#050d08', colors:['#00c853','#1de9b6','#76ff03','#00e676','#64ffda','#69f0ae','#b2ff59'] }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'なし',text:''},
{title:'心の平穏',text:'私の心は穏やかで澄んでいる\n私はコントロールできないことを手放す\n私は今この瞬間にいる'},
{title:'自信',text:'私は自分自身と自分の能力を信じている\n私は良いものに値する\n私は日々強くなっている'},
{title:'手放す',text:'もう必要のないものを手放す\n自分自身と他者を許す\n平和のための空間を作る'},
{title:'感謝',text:'この瞬間に感謝している\n豊かさが人生に流れ込む\nシンプルなことに感謝する'},
{title:'集中とエネルギー',text:'私の集中力は鋭く安定している\n目的を持ってエネルギーを注ぐ\n意図を持って前に進む'},
{title:'睡眠と休息',text:'休むことを自分に許す\n呼吸のたびに体がリラックスする\n穏やかな眠りへと導かれる'},
{title:'禁煙',text:'肺は日々きれいになっている\n私はどんな衝動よりも強い\n一息一息が勝利である'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'テキストをクリア') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

var blobs = [];
var offCanvas, offCtx, halfW, halfH;

function initBlobs() {
blobs = [];
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
var minDim = Math.min(W, H);
var blobCount = Math.max(9, Math.min(Math.floor(minDim / 100), 15));
for (var i = 0; i < blobCount; i++) {
blobs.push({
x: 0.15 * W + Math.random() * 0.7 * W,
y: Math.random() * H,
vx: (Math.random() - 0.5) * 0.1,
vy: -(0.075 + Math.random() * 0.075),
baseR: minDim * (0.04 + Math.random() * 0.04),
phase: Math.random() * Math.PI * 2
});
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running) initBlobs();
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;

// Clear offscreen
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// Update and draw blobs on offscreen canvas at half res
for (var i = 0; i < blobs.length; i++) {
var b = blobs[i];
var r = b.baseR + Math.sin(t * 0.0004 + b.phase) * 12;

if (!reducedMotion) {
b.x += b.vx + Math.sin(t * 0.000075 + b.phase) * 0.15;
b.y += b.vy + Math.cos(t * 0.0001 + b.phase) * 0.15;

// Wrap vertically: when blob fully exits top, respawn at bottom
if (b.y + r * 2 < 0) {
b.y = H + r * 2;
b.x = 0.15 * W + Math.random() * 0.7 * W;
}
// Soft horizontal wrap
if (b.x < -r) b.x = W + r;
if (b.x > W + r) b.x = -r;
}

// Draw radial gradient blob on offscreen at 3/4 resolution
var scaleX = halfW / W, scaleY = halfH / H;
var hx = b.x * scaleX, hy = b.y * scaleY, hr = r * Math.min(scaleX, scaleY);
var ci = i % s.colors.length;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + 'ff');
grad.addColorStop(0.5, s.colors[ci] + 'cc');
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.globalCompositeOperation = 'lighter';
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
offCtx.globalCompositeOperation = 'source-over';

// Apply smoothstep threshold for metaball effect (smooth edges)
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
// Smoothstep interpolation between background and blob color
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt); // smoothstep
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// Scale up to main canvas
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initBlobs();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'モーション軽減が有効 · 静的ビューを表示中<br>どこでもタップして終了';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### 呼吸オーブ - アファメーションビジュアル
URL: https://guruka.com/ja/visuals/breathing-orb/
Description: 呼吸のリズムをガイドする脈動するオーブ。. カスタムアファメーションテキストを追加。ブラウザにプライベートに保存。

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0a0a1a;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/ja/visuals/" class="vp-back">&larr; すべてのビジュアル</a>
<h1 class="vp-title">呼吸オーブ</h1>
<p class="vp-desc">呼吸をガイドする脈動するオーブ。カラースキームを選択してください。</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#4338ca,#7c3aed)"></div>
<span>トワイライト</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f97316,#eab308)"></div>
<span>サンライズ</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#059669,#14b8a6)"></div>
<span>フォレスト</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">アファメーションテキスト（任意）</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">プリセット <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="任意。アファメーションを入力してください。テキストは一行ずつ表示されます。"></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">ペース <span id="vp-pace-val">普通</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">開始</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">どこでもタップして終了</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'breathing-orb';
var currentAffId = null;
var paceLabels = ["とても遅い","遅い","普通","速い","とても速い"];
var currentPace = 2;
var schemes = [
{ name:'Twilight', bg:'#0a0a1a', orb:['#6366f1','#a78bfa','#4338ca'], particle:'#c4b5fd' },
{ name:'Sunrise', bg:'#1a0a05', orb:['#f97316','#eab308','#dc2626'], particle:'#fcd34d' },
{ name:'Forest', bg:'#051a0a', orb:['#059669','#14b8a6','#065f46'], particle:'#6ee7b7' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

// Scheme buttons
var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'なし',text:''},
{title:'心の平穏',text:'私の心は穏やかで澄んでいる\n私はコントロールできないことを手放す\n私は今この瞬間にいる'},
{title:'自信',text:'私は自分自身と自分の能力を信じている\n私は良いものに値する\n私は日々強くなっている'},
{title:'手放す',text:'もう必要のないものを手放す\n自分自身と他者を許す\n平和のための空間を作る'},
{title:'感謝',text:'この瞬間に感謝している\n豊かさが人生に流れ込む\nシンプルなことに感謝する'},
{title:'集中とエネルギー',text:'私の集中力は鋭く安定している\n目的を持ってエネルギーを注ぐ\n意図を持って前に進む'},
{title:'睡眠と休息',text:'休むことを自分に許す\n呼吸のたびに体がリラックスする\n穏やかな眠りへと導かれる'},
{title:'禁煙',text:'肺は日々きれいになっている\n私はどんな衝動よりも強い\n一息一息が勝利である'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'テキストをクリア') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

// Particles
var particles = [];
function initParticles() {
particles = [];
for (var i = 0; i < 100; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
r: 1 + Math.random() * 2.5,
vx: (Math.random() - 0.5) * 0.2,
vy: (Math.random() - 0.5) * 0.2,
phase: Math.random() * Math.PI * 2
});
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running && particles.length === 0) initParticles();
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var cx = W / 2, cy = H / 2;

// Background
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);

// Breathing cycle: 6 seconds
var breathT = t / 1000;
var breathPhase = Math.sin(breathT * Math.PI / 6); // -1 to 1, 12s cycle
var scale = 0.85 + 0.15 * breathPhase;

var baseR = Math.min(W, H) * 0.12;
var orbR = baseR * scale;

// Orb glow layers
for (var g = 3; g >= 0; g--) {
var glowR = orbR * (1 + g * 0.6);
var grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, glowR);
var alpha = (0.08 - g * 0.015);
if (alpha < 0) alpha = 0;
grad.addColorStop(0, s.orb[0] + hexAlpha(alpha + 0.05));
grad.addColorStop(0.5, s.orb[1] + hexAlpha(alpha));
grad.addColorStop(1, s.orb[2] + '00');
ctx.beginPath();
ctx.arc(cx, cy, glowR, 0, Math.PI * 2);
ctx.fillStyle = grad;
ctx.fill();
}

// Core orb
var coreGrad = ctx.createRadialGradient(cx - orbR * 0.2, cy - orbR * 0.2, orbR * 0.1, cx, cy, orbR);
coreGrad.addColorStop(0, s.orb[1]);
coreGrad.addColorStop(0.7, s.orb[0]);
coreGrad.addColorStop(1, s.orb[2]);
ctx.beginPath();
ctx.arc(cx, cy, orbR, 0, Math.PI * 2);
ctx.fillStyle = coreGrad;
ctx.globalAlpha = 0.9;
ctx.fill();
ctx.globalAlpha = 1;

// Particles
if (!reducedMotion) {
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
// Drift toward/away from orb matching breath
var dx = p.x - cx, dy = p.y - cy;
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
var breathPull = breathPhase * 0.15;
p.x += p.vx + (dx / dist) * breathPull;
p.y += p.vy + (dy / dist) * breathPull;

// Wrap around
if (p.x < 0) p.x = W;
if (p.x > W) p.x = 0;
if (p.y < 0) p.y = H;
if (p.y > H) p.y = 0;

// Twinkle
var twinkle = 0.3 + 0.7 * Math.abs(Math.sin(breathT * 0.4 + p.phase));
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fillStyle = s.particle;
ctx.globalAlpha = twinkle * 0.6;
ctx.fill();
}
ctx.globalAlpha = 1;
} else {
// Reduced motion: static orb only, no particles
}

animId = requestAnimationFrame(draw);
}

function hexAlpha(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initParticles();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'モーション軽減が有効 · 静的ビューを表示中<br>どこでもタップして終了';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### 細胞分裂 - アファメーションビジュアル
URL: https://guruka.com/ja/visuals/dividing-cells/
Description: 瞑想的なループで成長し分裂する細胞。. カスタムアファメーションテキストを追加。ブラウザにプライベートに保存。

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"].vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"].vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #050a12;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme,.vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"].vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"].vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"].vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"].vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"].vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header.vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"].vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"].vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"].vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"].vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/ja/visuals/" class="vp-back">&larr; すべてのビジュアル</a>
<h1 class="vp-title">細胞分裂</h1>
<p class="vp-desc">絶え間なく分裂する細胞。カラースキームを選択してください。</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#22d3ee,#14b8a6)"></div>
<span>バイオルミネセンス</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#fb923c,#f97316)"></div>
<span>オーガニック</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#94a3b8,#e2e8f0)"></div>
<span>マイクロスコープ</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">アファメーションテキスト（任意）</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">プリセット <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="任意。アファメーションを入力してください。テキストは一行ずつ表示されます。"></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">ペース <span id="vp-pace-val">普通</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">開始</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">どこでもタップして終了</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'dividing-cells';
var currentAffId = null;
var paceLabels = ["とても遅い","遅い","普通","速い","とても速い"];
var currentPace = 2;
var schemes = [
{ name:'Bioluminescent', bg:'#050a12',
colors:['#22d3ee','#14b8a6','#06b6d4','#2dd4bf','#67e8f9','#5eead4'] },
{ name:'Organic', bg:'#0a0808',
colors:['#fb923c','#f97316','#fbbf24','#f59e0b','#fdba74','#fcd34d'] },
{ name:'Microscope', bg:'#020508',
colors:['#94a3b8','#cbd5e1','#64748b','#e2e8f0','#475569','#f1f5f9'] }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var maxVisible = 8;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var offCanvas, offCtx, halfW, halfH;

// State
var centerCell = null; // the cell currently growing/dividing at center
var daughters = []; // drifting daughter cells
var cycleState = 'GROWING_AT_CENTER'; // GROWING_AT_CENTER, DIVIDING, STAGING_PAUSE
var pauseTimer = 0;
var nextId = 0;

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'なし',text:''},
{title:'心の平穏',text:'私の心は穏やかで澄んでいる\n私はコントロールできないことを手放す\n私は今この瞬間にいる'},
{title:'自信',text:'私は自分自身と自分の能力を信じている\n私は良いものに値する\n私は日々強くなっている'},
{title:'手放す',text:'もう必要のないものを手放す\n自分自身と他者を許す\n平和のための空間を作る'},
{title:'感謝',text:'この瞬間に感謝している\n豊かさが人生に流れ込む\nシンプルなことに感謝する'},
{title:'集中とエネルギー',text:'私の集中力は鋭く安定している\n目的を持ってエネルギーを注ぐ\n意図を持って前に進む'},
{title:'睡眠と休息',text:'休むことを自分に許す\n呼吸のたびに体がリラックスする\n穏やかな眠りへと導かれる'},
{title:'禁煙',text:'肺は日々きれいになっている\n私はどんな衝動よりも強い\n一息一息が勝利である'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'テキストをクリア') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
}

function makeOrganelles() {
var orgs = [];
var count = 2 + Math.floor(Math.random() * 2);
for (var i = 0; i < count; i++) {
orgs.push({
dist: 0.3 + Math.random() * 0.35,
angle: Math.random() * Math.PI * 2,
speed: (0.0003 + Math.random() * 0.0004) * (Math.random() < 0.5 ? 1 : -1),
size: 0.06 + Math.random() * 0.04
});
}
return orgs;
}

function spawnCenterCell() {
var W = canvas.width, H = canvas.height;
var minDim = Math.min(W, H);
var targetR = minDim * (0.06 + Math.random() * 0.02);
centerCell = {
id: nextId++,
x: W / 2,
y: H / 2,
r: targetR * 0.15,
targetR: targetR,
divAngle: Math.random() * Math.PI * 2,
colorIdx: Math.floor(Math.random() * 6),
divProgress: 0,
organelles: makeOrganelles(),
opacity: 0.7,
growTimer: 0
};
cycleState = 'GROWING_AT_CENTER';
}

function spawnDaughter(x, y, r, angle, colorIdx, organelles) {
daughters.push({
id: nextId++,
x: x,
y: y,
r: r,
vx: Math.cos(angle) * 0.15,
vy: Math.sin(angle) * 0.15,
phase: Math.random() * Math.PI * 2,
colorIdx: colorIdx,
organelles: organelles,
opacity: 1,
age: 0,
fading: false,
fadeAge: 0
});
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var scaleX = halfW / W, scaleY = halfH / H, scaleR = Math.min(scaleX, scaleY);

var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);

if (reducedMotion) {
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);
offCtx.globalCompositeOperation = 'lighter';
// Draw a center cell mid-division and a couple daughters
var midR = Math.min(W, H) * 0.07;
var ci = 0;
// Two sub-blobs for figure-8
var sep = midR * 0.6;
var a = Math.PI * 0.25;
for (var bi = 0; bi < 2; bi++) {
var bx = (W / 2 + Math.cos(a) * sep * (bi === 0 ? 1 : -1)) * scaleX;
var by = (H / 2 + Math.sin(a) * sep * (bi === 0 ? 1 : -1)) * scaleY;
var br = midR * 0.7 * scaleR;
var grad = offCtx.createRadialGradient(bx, by, 0, bx, by, br * 1.8);
grad.addColorStop(0, s.colors[ci] + 'ff');
grad.addColorStop(0.5, s.colors[ci] + 'cc');
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(bx, by, br * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
// Two static daughters
var dPositions = [[W * 0.25, H * 0.35], [W * 0.72, H * 0.65]];
for (var di = 0; di < 2; di++) {
var dx = dPositions[di][0] * scaleX, dy = dPositions[di][1] * scaleY;
var dr = midR * 0.5 * scaleR;
var grad = offCtx.createRadialGradient(dx, dy, 0, dx, dy, dr * 1.8);
grad.addColorStop(0, s.colors[2] + 'cc');
grad.addColorStop(0.5, s.colors[2] + '99');
grad.addColorStop(1, s.colors[2] + '00');
offCtx.beginPath();
offCtx.arc(dx, dy, dr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
offCtx.globalCompositeOperation = 'source-over';
// Smoothstep
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) { d[j + 3] = 255; }
else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else { d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255; }
}
offCtx.putImageData(imgData, 0, 0);
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);
// Draw nuclei on the two figure-8 blobs
for (var bi = 0; bi < 2; bi++) {
var nx = W / 2 + Math.cos(a) * sep * (bi === 0 ? 1 : -1);
var ny = H / 2 + Math.sin(a) * sep * (bi === 0 ? 1 : -1);
drawNucleus(nx, ny, midR * 0.7, s, ci, t, true);
}
for (var di = 0; di < 2; di++) {
drawNucleus(dPositions[di][0], dPositions[di][1], midR * 0.5, s, 2, t, true);
}
return;
}

// --- UPDATE LOGIC ---

// Force-fade oldest daughters if over max
while (daughters.length > maxVisible) {
var oldest = daughters[0];
oldest.fading = true;
oldest.opacity -= 0.05;
if (oldest.opacity <= 0) daughters.shift();
else break;
}

// Update daughters
for (var i = daughters.length - 1; i >= 0; i--) {
var dc = daughters[i];
dc.age++;

// Sinusoidal wobble drift
dc.x += dc.vx + Math.sin(t * 0.0002 + dc.phase) * 0.06;
dc.y += dc.vy + Math.cos(t * 0.00015 + dc.phase + 1) * 0.06;
dc.vx *= 0.997;
dc.vy *= 0.997;

// Soft boundary bounce
if (dc.x - dc.r < 0) { dc.x = dc.r; dc.vx = Math.abs(dc.vx) * 0.5; }
if (dc.x + dc.r > W) { dc.x = W - dc.r; dc.vx = -Math.abs(dc.vx) * 0.5; }
if (dc.y - dc.r < 0) { dc.y = dc.r; dc.vy = Math.abs(dc.vy) * 0.5; }
if (dc.y + dc.r > H) { dc.y = H - dc.r; dc.vy = -Math.abs(dc.vy) * 0.5; }

// Start fading after ~18 seconds (1080 frames at 60fps)
if (dc.age > 1080 && !dc.fading) dc.fading = true;
if (dc.fading) {
dc.opacity -= 0.003;
if (dc.opacity <= 0) { daughters.splice(i, 1); continue; }
}
}

// Daughter-daughter repulsion
for (var i = 0; i < daughters.length; i++) {
for (var j = i + 1; j < daughters.length; j++) {
var a = daughters[i], b = daughters[j];
var dx = b.x - a.x, dy = b.y - a.y;
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
var minDist = a.r + b.r + 6;
if (dist < minDist) {
var force = (minDist - dist) * 0.015;
var nx = dx / dist, ny = dy / dist;
a.vx -= nx * force; a.vy -= ny * force;
b.vx += nx * force; b.vy += ny * force;
}
}
}

// Center cell lifecycle
if (cycleState === 'GROWING_AT_CENTER') {
if (!centerCell) spawnCenterCell();
var cc = centerCell;
// Grow from tiny to targetR over ~3s (180 frames)
cc.growTimer++;
var growProgress = Math.min(1, cc.growTimer / 180);
// Ease out
growProgress = 1 - (1 - growProgress) * (1 - growProgress);
cc.r = cc.targetR * (0.15 + 0.85 * growProgress);
// Subtle breathing wobble at center
cc.x = W / 2 + Math.sin(t * 0.001) * 1.5;
cc.y = H / 2 + Math.cos(t * 0.0008) * 1.5;

if (cc.growTimer >= 180) {
cycleState = 'DIVIDING';
cc.divProgress = 0;
}
} else if (cycleState === 'DIVIDING') {
var cc = centerCell;
// divProgress 0→1 over ~12s: 0.0014/frame * 60fps ≈ 0.084/s → ~12s
cc.divProgress += 0.0014;
// Keep at center with wobble
cc.x = W / 2 + Math.sin(t * 0.001) * 1.5;
cc.y = H / 2 + Math.cos(t * 0.0008) * 1.5;

if (cc.divProgress >= 1) {
// Spawn two daughters
var angle = cc.divAngle;
var sepDist = cc.r * 0.9;
var newR = cc.r * 0.55;
spawnDaughter(cc.x + Math.cos(angle) * sepDist, cc.y + Math.sin(angle) * sepDist, newR, angle, cc.colorIdx, makeOrganelles());
spawnDaughter(cc.x - Math.cos(angle) * sepDist, cc.y - Math.sin(angle) * sepDist, newR, angle + Math.PI, cc.colorIdx, makeOrganelles());
centerCell = null;
cycleState = 'STAGING_PAUSE';
pauseTimer = 0;
}
} else if (cycleState === 'STAGING_PAUSE') {
pauseTimer++;
// ~1.5s pause (90 frames)
if (pauseTimer >= 90) {
spawnCenterCell();
}
}

// --- RENDER ---

// 1. Clear offscreen
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// 2. Draw additive radial gradients
offCtx.globalCompositeOperation = 'lighter';

// Draw daughters
for (var i = 0; i < daughters.length; i++) {
var dc = daughters[i];
if (dc.opacity <= 0) continue;
var ci = dc.colorIdx % s.colors.length;
var hx = dc.x * scaleX, hy = dc.y * scaleY, hr = dc.r * scaleR;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(dc.opacity));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(dc.opacity * 0.8));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}

// Draw center cell
if (centerCell) {
var cc = centerCell;
var ci = cc.colorIdx % s.colors.length;

if (cycleState === 'DIVIDING') {
// Two sub-blobs with separation based on divProgress
var dp = cc.divProgress;
var sepFactor;
if (dp < 0.3) {
// Elongation phase: 0 → 0.4 * r
sepFactor = (dp / 0.3) * 0.4;
} else if (dp < 0.7) {
// Figure-8 phase: 0.4 → 1.0 * r
sepFactor = 0.4 + ((dp - 0.3) / 0.4) * 0.6;
} else {
// Pinch & split: 1.0 → 1.8 * r (accelerating)
var splitP = (dp - 0.7) / 0.3;
splitP = splitP * splitP; // accelerate
sepFactor = 1.0 + splitP * 0.8;
}

var sep = cc.r * sepFactor;
var a = cc.divAngle;
var x1 = cc.x + Math.cos(a) * sep * 0.5;
var y1 = cc.y + Math.sin(a) * sep * 0.5;
var x2 = cc.x - Math.cos(a) * sep * 0.5;
var y2 = cc.y - Math.sin(a) * sep * 0.5;

// Sub-blob radius: slightly smaller as they separate
var subR = cc.r * (0.75 - dp * 0.15);

var overlapScale = 0.5 + 0.5 * Math.min(1, sepFactor / 1.2);
for (var bi = 0; bi < 2; bi++) {
var bx = (bi === 0 ? x1 : x2) * scaleX;
var by = (bi === 0 ? y1 : y2) * scaleY;
var br = subR * scaleR;
var grad = offCtx.createRadialGradient(bx, by, 0, bx, by, br * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(cc.opacity * overlapScale));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(cc.opacity * 0.8 * overlapScale));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(bx, by, br * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
} else {
// Single blob
var hx = cc.x * scaleX, hy = cc.y * scaleY, hr = cc.r * scaleR;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(cc.opacity));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(cc.opacity * 0.8));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
}

offCtx.globalCompositeOperation = 'source-over';

// 3. Smoothstep threshold
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// 4. Upscale
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

// 5. Draw nuclei and organelles on top at full resolution

// Daughters
for (var i = 0; i < daughters.length; i++) {
var dc = daughters[i];
if (dc.opacity <= 0) continue;
ctx.globalAlpha = dc.opacity;
drawNucleus(dc.x, dc.y, dc.r, s, dc.colorIdx % s.colors.length, t, false);
drawOrganelles(dc.x, dc.y, dc.r, s, dc.colorIdx % s.colors.length, dc.organelles, t, false);
ctx.globalAlpha = 1;
}

// Center cell
if (centerCell) {
var cc = centerCell;
var ci = cc.colorIdx % s.colors.length;
ctx.globalAlpha = cc.opacity;

if (cycleState === 'DIVIDING') {
var dp = cc.divProgress;
var sepFactor;
if (dp < 0.3) sepFactor = (dp / 0.3) * 0.4;
else if (dp < 0.7) sepFactor = 0.4 + ((dp - 0.3) / 0.4) * 0.6;
else { var sp = (dp - 0.7) / 0.3; sp = sp * sp; sepFactor = 1.0 + sp * 0.8; }
var sep = cc.r * sepFactor;
var a = cc.divAngle;
var x1 = cc.x + Math.cos(a) * sep * 0.5;
var y1 = cc.y + Math.sin(a) * sep * 0.5;
var x2 = cc.x - Math.cos(a) * sep * 0.5;
var y2 = cc.y - Math.sin(a) * sep * 0.5;
var subR = cc.r * (0.75 - dp * 0.15);

// Nucleus animation during division
if (dp < 0.25) {
// Elongating single ellipse, draw as stretched nucleus
var nucR = subR * 0.18;
var stretch = 1 + dp * 4;
ctx.save();
ctx.translate(cc.x, cc.y);
ctx.rotate(a);
ctx.scale(stretch, 1 / Math.sqrt(stretch));
drawNucleus(0, 0, subR, s, ci, t, false);
ctx.restore();
} else if (dp < 0.35) {
// Cross-fade from ellipse to two dots
var fadeT = (dp - 0.25) / 0.1;
// Fading single
ctx.globalAlpha = cc.opacity * (1 - fadeT);
drawNucleus(cc.x, cc.y, subR, s, ci, t, false);
// Appearing pair
ctx.globalAlpha = cc.opacity * fadeT;
drawNucleus(x1, y1, subR, s, ci, t, false);
drawNucleus(x2, y2, subR, s, ci, t, false);
ctx.globalAlpha = cc.opacity;
} else {
// Two separate nuclei
drawNucleus(x1, y1, subR, s, ci, t, false);
drawNucleus(x2, y2, subR, s, ci, t, false);
}

// Organelles split between the two halves
var halfOrg = Math.floor(cc.organelles.length / 2);
drawOrganelles(x1, y1, subR, s, ci, cc.organelles.slice(0, halfOrg), t, false);
drawOrganelles(x2, y2, subR, s, ci, cc.organelles.slice(halfOrg), t, false);
} else {
drawNucleus(cc.x, cc.y, cc.r, s, ci, t, false);
drawOrganelles(cc.x, cc.y, cc.r, s, ci, cc.organelles, t, false);
}
ctx.globalAlpha = 1;
}

animId = requestAnimationFrame(draw);
}

function alphaHex(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hexToRgba(hex, a) {
var r = parseInt(hex.slice(1,3), 16);
var g = parseInt(hex.slice(3,5), 16);
var b = parseInt(hex.slice(5,7), 16);
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
}

function drawNucleus(x, y, r, s, ci, t, isStatic) {
var nucR = r * 0.18;
var nucColor = s.colors[(ci + 1) % s.colors.length];
var ng = ctx.createRadialGradient(x, y, 0, x, y, nucR);
ng.addColorStop(0, hexToRgba(nucColor, 0.8));
ng.addColorStop(0.6, hexToRgba(nucColor, 0.35));
ng.addColorStop(1, hexToRgba(nucColor, 0));
ctx.beginPath();
ctx.arc(x, y, nucR, 0, Math.PI * 2);
ctx.fillStyle = ng;
ctx.fill();
}

function drawOrganelles(x, y, r, s, ci, organelles, t, isStatic) {
if (!organelles) return;
for (var k = 0; k < organelles.length; k++) {
var org = organelles[k];
var oAngle = org.angle + (isStatic ? 0 : (t || 0) * org.speed);
var ox = x + Math.cos(oAngle) * r * org.dist;
var oy = y + Math.sin(oAngle) * r * org.dist;
var oSize = r * org.size;
ctx.beginPath();
ctx.arc(ox, oy, oSize, 0, Math.PI * 2);
var orgColor = s.colors[(ci + 2) % s.colors.length];
ctx.fillStyle = hexToRgba(orgColor, 0.4);
ctx.fill();
}
}

function hideNavFooter() {
var header = document.querySelector('header, nav,.site-header, [class*="header"]');
var footer = document.querySelector('footer,.site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav,.site-header, [class*="header"]');
var footer = document.querySelector('footer,.site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
daughters = [];
centerCell = null;
nextId = 0;
spawnCenterCell();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'モーション軽減が有効 · 静的ビューを表示中<br>どこでもタップして終了';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### マンダラ - アファメーションビジュアル
URL: https://guruka.com/ja/visuals/mandala/
Description: 進化する対称性を持つゆっくりと回転する神聖幾何学。. カスタムアファメーションテキストを追加。ブラウザにプライベートに保存。

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0a0808;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/ja/visuals/" class="vp-back">&larr; すべてのビジュアル</a>
<h1 class="vp-title">マンダラ</h1>
<p class="vp-desc">回転する神聖幾何学。カラースキームを選択してください。</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#eab308,#f59e0b)"></div>
<span>ゴールデン</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#6366f1,#a855f7)"></div>
<span>セレスティアル</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#14b8a6,#10b981)"></div>
<span>ジェイド</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">アファメーションテキスト（任意）</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">プリセット <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="任意。アファメーションを入力してください。テキストは一行ずつ表示されます。"></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">ペース <span id="vp-pace-val">普通</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">開始</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">どこでもタップして終了</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'mandala';
var currentAffId = null;
var paceLabels = ["とても遅い","遅い","普通","速い","とても速い"];
var currentPace = 2;
var schemes = [
{ name:'Golden', bg:'#0a0808', stroke:'#d4a017', strokeAlt:'#f5c842', dot:'#fff8dc', bgFill:'rgba(10,8,8,' },
{ name:'Celestial', bg:'#05050f', stroke:'#818cf8', strokeAlt:'#c084fc', dot:'#e0e7ff', bgFill:'rgba(5,5,15,' },
{ name:'Jade', bg:'#050a08', stroke:'#2dd4bf', strokeAlt:'#34d399', dot:'#d1fae5', bgFill:'rgba(5,10,8,' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'なし',text:''},
{title:'心の平穏',text:'私の心は穏やかで澄んでいる\n私はコントロールできないことを手放す\n私は今この瞬間にいる'},
{title:'自信',text:'私は自分自身と自分の能力を信じている\n私は良いものに値する\n私は日々強くなっている'},
{title:'手放す',text:'もう必要のないものを手放す\n自分自身と他者を許す\n平和のための空間を作る'},
{title:'感謝',text:'この瞬間に感謝している\n豊かさが人生に流れ込む\nシンプルなことに感謝する'},
{title:'集中とエネルギー',text:'私の集中力は鋭く安定している\n目的を持ってエネルギーを注ぐ\n意図を持って前に進む'},
{title:'睡眠と休息',text:'休むことを自分に許す\n呼吸のたびに体がリラックスする\n穏やかな眠りへと導かれる'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'テキストをクリア') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

var rings = [
{ radius: 0.08, folds: 12, speed: 0.00008, dir: 1, type: 'dots' },
{ radius: 0.18, folds: 8, speed: 0.00006, dir: -1, type: 'petals' },
{ radius: 0.30, folds: 12, speed: 0.00004, dir: 1, type: 'lines' },
{ radius: 0.42, folds: 8, speed: 0.00007, dir: -1, type: 'petals' },
{ radius: 0.55, folds: 16, speed: 0.00003, dir: 1, type: 'dots' },
{ radius: 0.68, folds: 12, speed: 0.00005, dir: -1, type: 'lines' },
{title:'禁煙',text:'肺は日々きれいになっている\n私はどんな衝動よりも強い\n一息一息が勝利である'}
];

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var cx = W / 2, cy = H / 2;
var maxR = Math.min(W, H) * 0.65;

// Trail effect
ctx.fillStyle = s.bgFill + '0.04)';
ctx.fillRect(0, 0, W, H);

var baseAngle = reducedMotion ? 0 : t * 0.00005;

for (var ri = 0; ri < rings.length; ri++) {
var ring = rings[ri];
var ringR = maxR * ring.radius;
var folds = ring.folds;
var angle = reducedMotion ? 0 : baseAngle * ring.dir + t * ring.speed * ring.dir;
var breathe = reducedMotion ? 1 : (1 + 0.15 * Math.sin(t * 0.0005 + ri * 1.2));
var alphaFade = 1 - ri * 0.10;

ctx.save();
ctx.translate(cx, cy);
ctx.rotate(angle);

for (var f = 0; f < folds; f++) {
var fAngle = (f / folds) * Math.PI * 2;
ctx.save();
ctx.rotate(fAngle);

if (ring.type === 'dots') {
var dotR = (3 + Math.sin(t * 0.0008 + ri + f) * 2) * breathe;
ctx.shadowColor = s.stroke;
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.arc(ringR * breathe, 0, dotR, 0, Math.PI * 2);
ctx.fillStyle = s.dot;
ctx.globalAlpha = alphaFade * 0.7;
ctx.fill();
ctx.shadowBlur = 0;
} else if (ring.type === 'petals') {
var petalLen = (20 + Math.sin(t * 0.0006 + ri * 2) * 10) * breathe;
var petalW = (8 + Math.sin(t * 0.0004 + f) * 3) * breathe;
ctx.shadowColor = s.stroke;
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.moveTo(ringR * breathe - petalLen * 0.3, 0);
ctx.quadraticCurveTo(ringR * breathe, -petalW, ringR * breathe + petalLen * 0.7, 0);
ctx.quadraticCurveTo(ringR * breathe, petalW, ringR * breathe - petalLen * 0.3, 0);
ctx.strokeStyle = s.stroke;
ctx.lineWidth = 1.2;
ctx.globalAlpha = alphaFade * 0.6;
ctx.stroke();
ctx.shadowBlur = 0;
} else if (ring.type === 'lines') {
var lineLen = (15 + Math.sin(t * 0.0007 + f * 0.5) * 8) * breathe;
ctx.shadowColor = s.strokeAlt;
ctx.shadowBlur = 3;
ctx.beginPath();
ctx.moveTo(ringR * breathe - lineLen, 0);
ctx.lineTo(ringR * breathe + lineLen, 0);
ctx.strokeStyle = s.strokeAlt;
ctx.lineWidth = 1;
ctx.globalAlpha = alphaFade * 0.4;
ctx.stroke();
// End dots
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.arc(ringR * breathe - lineLen, 0, 1.5, 0, Math.PI * 2);
ctx.arc(ringR * breathe + lineLen, 0, 1.5, 0, Math.PI * 2);
ctx.fillStyle = s.strokeAlt;
ctx.globalAlpha = alphaFade * 0.5;
ctx.fill();
ctx.shadowBlur = 0;
}

ctx.restore();
}

ctx.restore();
}

// Center dot
ctx.beginPath();
ctx.arc(cx, cy, 4, 0, Math.PI * 2);
ctx.fillStyle = s.dot;
ctx.globalAlpha = 0.8;
ctx.fill();
ctx.globalAlpha = 1;

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
// Clear canvas fully before starting
ctx.fillStyle = schemes[currentScheme].bg;
ctx.fillRect(0, 0, canvas.width, canvas.height);
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'モーション軽減が有効 · 静的ビューを表示中<br>どこでもタップして終了';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### 星空 - アファメーションビジュアル
URL: https://guruka.com/ja/visuals/starfield/
Description: 深宇宙を漂う瞬く星々。. カスタムアファメーションテキストを追加。ブラウザにプライベートに保存。

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #020510;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/ja/visuals/" class="vp-back">&larr; すべてのビジュアル</a>
<h1 class="vp-title">星空</h1>
<p class="vp-desc">深宇宙で瞬く星々。カラースキームを選択してください。</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#1e293b,#475569)"></div>
<span>ディープスペース</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#4c1d95,#a855f7)"></div>
<span>ネビュラ</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#78350f,#f59e0b)"></div>
<span>ウォームコスモス</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">アファメーションテキスト（任意）</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">プリセット <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="任意。アファメーションを入力してください。テキストは一行ずつ表示されます。"></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">ペース <span id="vp-pace-val">普通</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">開始</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">どこでもタップして終了</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'starfield';
var currentAffId = null;
var paceLabels = ["とても遅い","遅い","普通","速い","とても速い"];
var currentPace = 2;
var schemes = [
{ name:'Deep Space', bg:'#020510', starColor:'rgba(200,220,255,', glowColor:'rgba(80,100,180,0.015)', shootColor:'rgba(200,220,255,' },
{ name:'Nebula', bg:'#0a0515', starColor:'rgba(220,200,255,', glowColor:'rgba(160,80,200,0.03)', shootColor:'rgba(200,160,255,' },
{ name:'Warm Cosmos', bg:'#0a0805', starColor:'rgba(255,220,160,', glowColor:'rgba(180,120,60,0.015)', shootColor:'rgba(255,200,100,' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'なし',text:''},
{title:'心の平穏',text:'私の心は穏やかで澄んでいる\n私はコントロールできないことを手放す\n私は今この瞬間にいる'},
{title:'自信',text:'私は自分自身と自分の能力を信じている\n私は良いものに値する\n私は日々強くなっている'},
{title:'手放す',text:'もう必要のないものを手放す\n自分自身と他者を許す\n平和のための空間を作る'},
{title:'感謝',text:'この瞬間に感謝している\n豊かさが人生に流れ込む\nシンプルなことに感謝する'},
{title:'集中とエネルギー',text:'私の集中力は鋭く安定している\n目的を持ってエネルギーを注ぐ\n意図を持って前に進む'},
{title:'睡眠と休息',text:'休むことを自分に許す\n呼吸のたびに体がリラックスする\n穏やかな眠りへと導かれる'},
{title:'禁煙',text:'肺は日々きれいになっている\n私はどんな衝動よりも強い\n一息一息が勝利である'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'テキストをクリア') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

var starsBack = [], starsMid = [], starsFront = [];
var shootingStars = [];
var lastShootTime = 0;

function initStars() {
starsBack = []; starsMid = []; starsFront = [];
shootingStars = [];
var W = canvas.width, H = canvas.height;
for (var i = 0; i < 200; i++) {
starsBack.push({ x: Math.random() * W, y: Math.random() * H, size: 0.5 + Math.random() * 1, baseAlpha: 0.3 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
for (var i = 0; i < 100; i++) {
starsMid.push({ x: Math.random() * W, y: Math.random() * H, size: 1 + Math.random() * 1.5, baseAlpha: 0.4 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
for (var i = 0; i < 50; i++) {
starsFront.push({ x: Math.random() * W, y: Math.random() * H, size: 1.5 + Math.random() * 2, baseAlpha: 0.6 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running) initStars();
}

function drawStarLayer(stars, speed, t, s, W, H) {
for (var i = 0; i < stars.length; i++) {
var st = stars[i];
var twinkle = st.baseAlpha * (0.5 + 0.5 * Math.sin(t * 0.001 + st.phase));
// Glow for larger stars
if (st.size > 2) {
ctx.beginPath();
ctx.arc(st.x, st.y, st.size * 3, 0, Math.PI * 2);
ctx.fillStyle = s.starColor + (twinkle * 0.15).toFixed(3) + ')';
ctx.fill();
}
ctx.beginPath();
ctx.arc(st.x, st.y, st.size, 0, Math.PI * 2);
ctx.fillStyle = s.starColor + twinkle.toFixed(3) + ')';
ctx.fill();
}
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;

ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);

// Subtle center glow
var glow = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.max(W, H) * 0.5);
glow.addColorStop(0, s.glowColor);
glow.addColorStop(1, 'transparent');
ctx.fillStyle = glow;
ctx.fillRect(0, 0, W, H);

// Draw star layers with parallax speeds
drawStarLayer(starsBack, 0.025, t, s, W, H);
drawStarLayer(starsMid, 0.06, t, s, W, H);
drawStarLayer(starsFront, 0.12, t, s, W, H);

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initStars();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'モーション軽減が有効 · 静的ビューを表示中<br>どこでもタップして終了';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### ボディスキャンと緊張の解放
URL: https://guruka.com/ja/meditate/body-scan-and-tension-release/
Description: 体に聴く。手放す。体に帰る。

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/ja/meditate/body-scan-and-tension-release/');
</script>

### 心を静める・ストレス解放
URL: https://guruka.com/ja/meditate/calm-and-stress-relief/
Description: 力を抜いて。自分自身に戻りましょう。

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/ja/meditate/calm-and-stress-relief/');
</script>

### 感謝の瞑想
URL: https://guruka.com/ja/meditate/gratitude/
Description: すでにある「良いもの」を見つける。

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/ja/meditate/gratitude/');
</script>

### 集中力と明晰さ
URL: https://guruka.com/ja/meditate/focus-and-clarity/
Description: 雑音を払う。心を研ぎ澄ます。

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/ja/meditate/focus-and-clarity/');
</script>

### 慈悲の瞑想
URL: https://guruka.com/ja/meditate/loving-kindness/
Description: 温かさを届ける。まずは自分自身に。

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/ja/meditate/loving-kindness/');
</script>

### 朝のエネルギー
URL: https://guruka.com/ja/meditate/morning-energy/
Description: やさしく目覚めて。一日を迎えましょう。

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/ja/meditate/morning-energy/');
</script>

### おやすみ前のひととき
URL: https://guruka.com/ja/meditate/sleep-and-wind-down/
Description: 一日を手放して。休むことで、十分です。

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/ja/meditate/sleep-and-wind-down/');
</script>

### Eugene
URL: https://guruka.com/ko/author/eugene/
Description: Eugene, author profile

# Eugene

Eugene is a contributor to this publication.

### Color Clash - 두뇌 훈련 게임
URL: https://guruka.com/ko/games/color-clash/
Description: 규칙에 맞는 색을 고르세요.

<style>
#color-clash-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #color-clash-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#cc-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.cc-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#cc-instructions .cc-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#cc-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#cc-instructions .cc-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #cc-instructions .cc-subtitle {
color: var(--color-dark-text-secondary);
}

#cc-instructions .cc-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #cc-instructions .cc-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#cc-instructions .cc-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#cc-instructions .cc-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#cc-instructions .cc-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.cc-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .cc-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.cc-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.cc-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.cc-btn-primary:hover {
background: var(--color-primary-hover);
}

.cc-btn-primary:active {
transform: scale(0.97);
}

.cc-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.cc-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .cc-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#cc-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#cc-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: cc-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #cc-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes cc-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.cc-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.cc-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.cc-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .cc-wizard-desc {
color: var(--color-dark-text-secondary);
}
.cc-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.cc-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.cc-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"] .cc-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .cc-wizard-dot.active {
background: var(--color-primary);
}
.cc-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.cc-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#cc-wizard-card {
padding: 1.5rem 1rem;
}
.cc-wizard-icon {
font-size: 2rem;
}
.cc-wizard-title {
font-size: 1.1rem;
}
.cc-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#cc-playing {
display: none;
flex: 1;
flex-direction: column;
}

.cc-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .cc-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.cc-stat {
text-align: center;
}

.cc-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .cc-stat-label {
color: var(--color-dark-text-secondary);
}

.cc-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.cc-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.cc-level-text {
font-weight: 600;
}

.cc-modifier-badge {
background: #ec4899;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.cc-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .cc-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.cc-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.cc-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .cc-timer-bar {
background: var(--color-dark-bg-secondary);
}

.cc-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.cc-timer-fill.cc-timer-warning {
background: #ef4444;
}

/* ── Rule Indicator ── */
.cc-rule-indicator {
text-align: center;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 1rem;
transition: background 0.3s, color 0.3s;
}

.cc-rule-ink {
background: rgba(236,72,153,0.15);
color: #ec4899;
border: 1px solid rgba(236,72,153,0.3);
}

[data-theme="dark"] .cc-rule-ink {
background: rgba(236,72,153,0.25);
color: #f472b6;
}

.cc-rule-word {
background: rgba(59,130,246,0.15);
color: #3b82f6;
border: 1px solid rgba(59,130,246,0.3);
}

[data-theme="dark"] .cc-rule-word {
background: rgba(59,130,246,0.25);
color: #60a5fa;
}

.cc-rule-bg {
background: rgba(168,85,247,0.15);
color: #a855f7;
border: 1px solid rgba(168,85,247,0.3);
}

[data-theme="dark"] .cc-rule-bg {
background: rgba(168,85,247,0.25);
color: #c084fc;
}

/* ── Stimulus Display ── */
.cc-stimulus-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
position: relative;
}

.cc-stimulus-word {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.2;
animation: cc-stimulus-enter 0.2s ease-out;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.cc-stimulus-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
animation: cc-stimulus-enter 0.2s ease-out;
}

.cc-bg-square {
width: 50px;
height: 50px;
border-radius: 0.5rem;
border: 2px solid rgba(0,0,0,0.1);
flex-shrink: 0;
}

[data-theme="dark"] .cc-bg-square {
border-color: rgba(255,255,255,0.15);
}

@keyframes cc-stimulus-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.cc-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.cc-feedback-flash.cc-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.cc-feedback-flash.cc-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.cc-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.cc-feedback-icon.cc-show-check {
animation: cc-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.cc-feedback-icon.cc-show-x {
animation: cc-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes cc-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Color Answer Buttons ── */
.cc-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.cc-answer-btn {
padding: 0.75rem;
border: 2px solid transparent;
border-radius: 0.75rem;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, opacity 0.15s;
color: #fff;
min-height: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}

.cc-color-circle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.4);
background: currentColor;
}

.cc-answer-btn:active {
transform: scale(0.95);
}

.cc-answer-btn:hover {
opacity: 0.9;
border-color: rgba(255,255,255,0.5);
}

.cc-answer-btn.cc-correct-flash {
border-color: #22c55e;
box-shadow: 0 0 15px rgba(34,197,94,0.4);
}

.cc-answer-btn.cc-wrong-flash {
border-color: #ef4444;
box-shadow: 0 0 15px rgba(239,68,68,0.4);
}

.cc-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .cc-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#cc-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#cc-pause-overlay .cc-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#cc-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.cc-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: cc-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .cc-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes cc-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.cc-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.cc-complete-card .cc-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.cc-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.cc-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: cc-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes cc-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.cc-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.cc-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .cc-complete-stat {
background: var(--color-dark-bg-secondary);
}

.cc-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .cc-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.cc-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.cc-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.cc-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .cc-back-link {
color: var(--color-dark-text-secondary);
}

.cc-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.cc-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.cc-level-up-toast.cc-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#color-clash-game {
padding: 0.5rem;
}
.cc-stimulus-word {
font-size: 2.5rem;
}
.cc-answer-btn {
padding: 0.5rem;
min-height: 60px;
font-size: 0.7rem;
}
.cc-color-circle {
width: 40px;
height: 40px;
}
.cc-header {
padding: 0.5rem;
gap: 0.25rem;
}
.cc-stat-value {
font-size: 1rem;
}
#cc-instructions { padding: 0.75rem 0.5rem; }
#cc-instructions .cc-icon { font-size: 2rem; margin-bottom: 0; }
#cc-instructions h2 { font-size: 1.3rem; }
#cc-instructions .cc-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#cc-instructions .cc-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#cc-instructions .cc-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.cc-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
.cc-bg-square { width: 40px; height: 40px; }
}
@media (max-width: 640px) {
#color-clash-game {
padding: 0.75rem;
}
.cc-stimulus-word {
font-size: 3rem;
}
.cc-answer-btn {
padding: 0.625rem;
}
}
@media (max-width: 360px) {
.cc-stimulus-word {
font-size: 2rem;
}
.cc-answer-btn {
padding: 0.5rem;
font-size: 0.65rem;
min-height: 54px;
}
.cc-color-circle {
width: 34px;
height: 34px;
}
.cc-complete-stats {
grid-template-columns: 1fr 1fr;
}
.cc-final-score {
font-size: 2rem;
}
.cc-header {
padding: 0.375rem;
}
.cc-stat-value {
font-size: 0.9rem;
}
.cc-rule-indicator {
font-size: 0.8rem;
padding: 0.4rem 0.75rem;
}
}
@keyframes cc-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.cc-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.cc-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: cc-confetti-fall 2.5s ease-in forwards;
}
.cc-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(236,72,153,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: cc-glow-fade 1s ease-out forwards;
}
@keyframes cc-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.cc-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: cc-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(236,72,153,0.4);
}
@keyframes cc-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#color-clash-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#color-clash-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #color-clash-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#color-clash-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#color-clash-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="color-clash-game">

<div id="cc-instructions">
<div class="cc-title-row"><span class="cc-icon">&#127912;</span><h2>Color Clash</h2></div>
<p class="cc-subtitle">Stroop 기반 억제 통제와 선택적 주의력</p>
<div class="cc-how-to">
<h3>플레이 방법</h3>
<ol>
<li>색 이름이 <strong>다른 잉크 색</strong>으로 표시됩니다.</li>
<li><strong>규칙 표시기</strong>에 따라 현재 규칙에 맞는 올바른 색을 탭하세요.</li>
<li>레벨이 올라가면 규칙이 <strong>"잉크 색"</strong>과 <strong>"단어 의미"</strong> 사이에서 전환됩니다.</li>


</ol>
</div>
<div id="cc-best-display" class="cc-personal-best" style="display:none;">
최고: <strong id="cc-best-score">0</strong> 포인트
</div>
<button class="cc-btn-primary" id="cc-start-btn">시작</button>
<div id="cc-challenge-banner-wrap"></div>
</div>

<div id="cc-wizard">
<div id="cc-wizard-card"></div>
</div>

<div id="cc-playing">
<div class="cc-header">
<div class="cc-stat">
<div class="cc-stat-label">점수</div>
<div class="cc-stat-value" id="cc-score">0</div>
</div>
<div class="cc-stat">
<div class="cc-stat-label">연속</div>
<div class="cc-stat-value" id="cc-streak">0</div>
</div>
<div class="cc-stat">
<div class="cc-stat-label">Level</div>
<div class="cc-stat-value" id="cc-level">1</div>
</div>
</div>
<div class="cc-level-info">
<span class="cc-level-text">Level <span id="cc-level-text">1</span></span>
<span class="cc-modifier-badge" id="cc-modifier-badge" style="display:none;">규칙 전환</span>
</div>
<div class="cc-progress-bar">
<div class="cc-progress-fill" id="cc-progress-fill" style="width:0%"></div>
</div>
<div class="cc-timer-bar">
<div class="cc-timer-fill" id="cc-timer-fill" style="width:100%"></div>
</div>
<div class="cc-rule-indicator cc-rule-ink" id="cc-rule-indicator">잉크 색을 탭하세요</div>
<div class="cc-stimulus-area">
<div class="cc-feedback-flash" id="cc-feedback-flash"></div>
<div class="cc-feedback-icon" id="cc-feedback-icon"></div>
<div id="cc-stimulus-wrap" class="cc-stimulus-wrap">
<span class="cc-stimulus-word" id="cc-stimulus-word"></span>
<div class="cc-bg-square" id="cc-bg-square" style="display:none;"></div>
</div>
</div>
<div class="cc-answers" id="cc-answers">
<button class="cc-answer-btn" id="cc-ans-0"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-1"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-2"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-3"><div class="cc-color-circle"></div><span></span></button>
</div>
<div class="cc-playing-hint"><strong>1-4</strong>키로 답변 · <strong>Esc</strong>키로 일시정지</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="cc-pause-btn" type="button">일시정지</button>
<button class="gk-finish-btn" id="cc-finish-btn" type="button">종료</button>
</div>
</div>

<div id="cc-pause-overlay">
<div class="cc-pause-text">일시정지</div>
<button class="cc-btn-primary" id="cc-resume-btn">계속하기</button>
</div>

<div id="cc-complete-overlay">
<div class="cc-complete-card">
<button class="gk-complete-close" id="cc-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="cc-trophy">&#127942;</div>
<h2>종료!</h2>
<div class="cc-final-score" id="cc-final-score">0</div>
<div id="cc-new-best" class="cc-new-best" style="display:none;">&#11088; 신기록!</div>
<div class="gk-challenge-result" id="cc-challenge-result" style="display:none;"></div>
<div class="cc-complete-stats">
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">레벨</div>
<div class="cc-complete-stat-value" id="cc-final-level">1</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">정확도</div>
<div class="cc-complete-stat-value" id="cc-final-accuracy">0%</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">연속</div>
<div class="cc-complete-stat-value" id="cc-final-streak">0</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">최고</div>
<div class="cc-complete-stat-value" id="cc-final-best">0</div>
</div>
</div>
<div class="cc-complete-actions">
<button class="cc-btn-primary" id="cc-play-again-btn">다시하기</button>
<button class="gk-runtime-history-toggle" id="cc-history-toggle" type="button">Show History</button>
<a href="/ko/games/" class="cc-back-link">&larr; 모든 게임</a>
</div>
<div class="gk-runtime-history-panel" id="cc-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="cc-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="cc-share-btn">&#128279; 결과 공유</button>
<div class="gk-share-copied" id="cc-share-copied" style="display:none;">링크가 복사되었습니다!</div>
</div>
</div>
</div>

<div class="cc-level-up-toast" id="cc-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_color-clash_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('cc-history-toggle', 'cc-history-panel', 'cc-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

/* ── Color pool ── */
var COLORS = [
{ name: '빨강', hex: '#ef4444' },
{ name: '파랑', hex: '#3b82f6' },
{ name: '초록', hex: '#22c55e' },
{ name: '노랑', hex: '#eab308' },
{ name: '보라', hex: '#a855f7' },
{ name: '주황', hex: '#f97316' },
{ name: '분홍', hex: '#ec4899' },
{ name: '청록', hex: '#06b6d4' }
];

var RULES = { INK: 'ink', WORD: 'word', BG: 'bg' };

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctColorName: '',
currentRule: RULES.INK,
currentStimulus: null,
currentChoices: [],
roundsSinceRuleSwitch: 0,
nextRuleSwitchAt: 0
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('cc-instructions');
var elWizard = document.getElementById('cc-wizard');
var elWizardCard = document.getElementById('cc-wizard-card');
var elPlaying = document.getElementById('cc-playing');
var elPauseOverlay = document.getElementById('cc-pause-overlay');
var elCompleteOverlay = document.getElementById('cc-complete-overlay');
var elScore = document.getElementById('cc-score');
var elStreak = document.getElementById('cc-streak');
var elLevel = document.getElementById('cc-level');
var elLevelText = document.getElementById('cc-level-text');
var elModifierBadge = document.getElementById('cc-modifier-badge');
var elProgressFill = document.getElementById('cc-progress-fill');
var elTimerFill = document.getElementById('cc-timer-fill');
var elRuleIndicator = document.getElementById('cc-rule-indicator');
var elStimulusWord = document.getElementById('cc-stimulus-word');
var elStimulusWrap = document.getElementById('cc-stimulus-wrap');
var elBgSquare = document.getElementById('cc-bg-square');
var elFeedbackFlash = document.getElementById('cc-feedback-flash');
var elFeedbackIcon = document.getElementById('cc-feedback-icon');
var elFinalScore = document.getElementById('cc-final-score');
var elNewBest = document.getElementById('cc-new-best');
var elFinalLevel = document.getElementById('cc-final-level');
var elFinalAccuracy = document.getElementById('cc-final-accuracy');
var elFinalStreak = document.getElementById('cc-final-streak');
var elFinalBest = document.getElementById('cc-final-best');
var elBestDisplay = document.getElementById('cc-best-display');
var elBestScore = document.getElementById('cc-best-score');
var elLevelToast = document.getElementById('cc-level-toast');
var btnStart = document.getElementById('cc-start-btn');
var btnResume = document.getElementById('cc-resume-btn');
var btnPlayAgain = document.getElementById('cc-play-again-btn');
var answerBtns = [
document.getElementById('cc-ans-0'),
document.getElementById('cc-ans-1'),
document.getElementById('cc-ans-2'),
document.getElementById('cc-ans-3')
];

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getColorPool(lvl) {
if (lvl <= 9) return COLORS.slice(0, 4);
return COLORS;
}

/* ── Rule logic ── */
function getRuleForLevel(lvl) {
if (lvl <= 6) return RULES.INK;
return RULES.INK;
}

function shouldSwitchRules(lvl) {
return lvl >= 7;
}

function isTripleStroop(lvl) {
return lvl >= 17;
}

function isCongruent(lvl) {
return lvl <= 3;
}

function doesRuleSwitchMidLevel(lvl) {
return lvl >= 13 && lvl <= 16;
}

function updateRuleIndicator() {
elRuleIndicator.className = 'cc-rule-indicator';
if (state.currentRule === RULES.INK) {
elRuleIndicator.textContent = '잉크 색을 탭하세요';
elRuleIndicator.classList.add('cc-rule-ink');
} else if (state.currentRule === RULES.WORD) {
elRuleIndicator.textContent = '단어 의미를 탭하세요';
elRuleIndicator.classList.add('cc-rule-word');
} else if (state.currentRule === RULES.BG) {
elRuleIndicator.textContent = '배경색을 탭하세요';
elRuleIndicator.classList.add('cc-rule-bg');
}
}

/* ── Random helpers ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}

function pickRandom(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function pickDifferent(arr, exclude) {
var filtered = arr.filter(function(c) { return c.name !== exclude.name; });
return pickRandom(filtered);
}

/* ── Generate stimulus ── */
function generateStimulus(lvl) {
var pool = getColorPool(lvl);
var wordColor, inkColor, bgColor, correctColor;

if (isCongruent(lvl)) {
/* L1-3: congruent, word matches ink */
wordColor = pickRandom(pool);
inkColor = wordColor;
bgColor = null;
state.currentRule = RULES.INK;
correctColor = wordColor;
} else if (lvl <= 6) {
/* L4-6: incongruent, identify ink */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
state.currentRule = RULES.INK;
correctColor = inkColor;
} else if (lvl <= 9) {
/* L7-9: rule alternates each round between ink and word */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else if (lvl <= 12) {
/* L10-12: 8 colors, rule alternates */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else if (lvl <= 16) {
/* L13-16: rule switches mid-level */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else {
/* L17-20: triple stroop */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = pickDifferent(pool, inkColor);
while (bgColor.name === wordColor.name) {
bgColor = pickDifferent(pool, inkColor);
}
if (state.currentRule === RULES.INK) {
correctColor = inkColor;
} else if (state.currentRule === RULES.WORD) {
correctColor = wordColor;
} else {
correctColor = bgColor;
}
}

return {
wordText: wordColor.name,
inkHex: inkColor.hex,
bgColor: bgColor,
correctColor: correctColor,
pool: pool
};
}

function generateColorChoices(correctColor, pool) {
var choices = [correctColor];
var attempts = 0;
while (choices.length < 4 && attempts < 50) {
var candidate = pickRandom(pool);
var isDuplicate = false;
for (var i = 0; i < choices.length; i++) {
if (choices[i].name === candidate.name) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
choices.push(candidate);
}
attempts++;
}
/* Fill remaining if pool is too small */
var allColors = COLORS.slice();
while (choices.length < 4) {
var c = pickRandom(allColors);
var dup = false;
for (var k = 0; k < choices.length; k++) {
if (choices[k].name === c.name) { dup = true; break; }
}
if (!dup) choices.push(c);
}
return shuffle(choices);
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
if (shouldSwitchRules(state.level)) {
elModifierBadge.style.display = '';
if (isTripleStroop(state.level)) {
elModifierBadge.textContent = '트리플 Stroop';
} else if (doesRuleSwitchMidLevel(state.level)) {
elModifierBadge.textContent = '레벨 내 전환';
} else {
elModifierBadge.textContent = '규칙 전환';
}
} else {
elModifierBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('cc-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('cc-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('cc-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'cc-feedback-flash';
elFeedbackIcon.className = 'cc-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('cc-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('cc-show-check');
} else {
elFeedbackFlash.classList.add('cc-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('cc-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'cc-feedback-flash';
elFeedbackIcon.className = 'cc-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('cc-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('cc-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'cc-correct-flash' : 'cc-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('cc-correct-flash', 'cc-wrong-flash');
}, 400);
}

/* ── Determine rule for the next round ── */
function determineRule() {
var lvl = state.level;
if (lvl <= 3) {
state.currentRule = RULES.INK;
} else if (lvl <= 6) {
state.currentRule = RULES.INK;
} else if (lvl <= 12) {
/* Alternate each round */
state.currentRule = (state.round % 2 === 0) ? RULES.INK : RULES.WORD;
} else if (lvl <= 16) {
/* Mid-level switching every 3-5 rounds */
state.roundsSinceRuleSwitch++;
if (state.roundsSinceRuleSwitch >= state.nextRuleSwitchAt) {
state.currentRule = (state.currentRule === RULES.INK) ? RULES.WORD : RULES.INK;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
}
} else {
/* L17-20: triple stroop, cycle through ink/word/bg */
var rules = [RULES.INK, RULES.WORD, RULES.BG];
state.roundsSinceRuleSwitch++;
if (state.roundsSinceRuleSwitch >= state.nextRuleSwitchAt) {
var currentIdx = rules.indexOf(state.currentRule);
var nextIdx = (currentIdx + 1) % rules.length;
state.currentRule = rules[nextIdx];
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(2, 4);
}
}
}

/* ── Set color button appearance ── */
function setColorButton(btn, color) {
btn.style.background = color.hex;
btn.style.borderColor = 'transparent';
var circle = btn.querySelector('.cc-color-circle');
var label = btn.querySelector('span');
circle.style.background = '#fff';
circle.style.borderColor = 'rgba(255,255,255,0.6)';
circle.style.background = color.hex;
circle.style.filter = 'brightness(1.2)';
label.textContent = color.name;
btn.dataset.colorName = color.name;
}

function findColorByName(name) {
for (var i = 0; i < COLORS.length; i++) {
if (COLORS[i].name === name) return COLORS[i];
}
return null;
}

function colorHistoryChip(color) {
if (!color) return 'No answer';
return '<span class="gk-history-swatch" style="background:' + runHistory.escape(color.hex) + '"></span>' + runHistory.escape(color.name);
}

function recordColorHistory(selectedName, correct) {
var selected = findColorByName(selectedName);
var correctColor = state.currentStimulus ? state.currentStimulus.correctColor : findColorByName(state.correctColorName);
var ruleText = elRuleIndicator ? elRuleIndicator.textContent : 'Color rule';
var stimulus = state.currentStimulus;
var html = '<strong>' + runHistory.escape(ruleText) + '</strong>';
if (stimulus) {
html += '<div class="gk-runtime-history-sub">Word: ' + runHistory.escape(stimulus.wordText) + ' | Ink: <span class="gk-history-swatch" style="background:' + runHistory.escape(stimulus.inkHex) + '"></span></div>';
}
html += '<div class="gk-runtime-history-sub">Your: ' + colorHistoryChip(selected) + ' | Correct: ' + colorHistoryChip(correctColor) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var chosenName = answerBtns[chosenIdx].dataset.colorName;
var correct = (chosenName === state.correctColorName);

state.totalAnswered++;
recordColorHistory(chosenName, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordColorHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

/* Determine rule for this round */
determineRule();
updateRuleIndicator();

var stimulus = generateStimulus(state.level);
state.correctColorName = stimulus.correctColor.name;
state.currentStimulus = stimulus;

/* Display the stimulus word */
elStimulusWord.textContent = stimulus.wordText;
elStimulusWord.style.color = stimulus.inkHex;
elStimulusWrap.style.animation = 'none';
void elStimulusWrap.offsetWidth;
elStimulusWrap.style.animation = '';

/* Handle background square for triple stroop */
if (stimulus.bgColor && isTripleStroop(state.level)) {
elBgSquare.style.display = 'block';
elBgSquare.style.background = stimulus.bgColor.hex;
} else {
elBgSquare.style.display = 'none';
}

/* Generate and display color choices */
var choices = generateColorChoices(stimulus.correctColor, stimulus.pool);
state.currentChoices = choices.slice();
for (var i = 0; i < 4; i++) {
setColorButton(answerBtns[i], choices[i]);
}

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'cc-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'cc-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'cc-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.cc-trophy');
var title = document.querySelector('#cc-complete-overlay .cc-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = '대단해요!';
elNewBest.className = 'cc-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F 대단해요!신기록!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = '수고하셨습니다!';
elNewBest.className = 'cc-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('cc-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var CC_WIZARD_STEPS = [
{icon: '\uD83C\uDFA8', title: '색을 읽고, 단어를 읽지 마세요', desc: '규칙에 맞는 색을 고르세요.'},
{icon: '\uD83D\uDD04', title: '레벨업으로 규칙이 바뀝니다', desc: '높은 레벨에서 규칙이 바뀝니다.'},
{icon: '\u26A1', title: '빠르게', desc: '시간 안에 답하세요.', final: true}
];
var ccWizardStep = 0;

function renderWizardStep() {
var s = CC_WIZARD_STEPS[ccWizardStep];
var dotsHtml = '';
for (var i = 0; i < CC_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="cc-wizard-dot' + (i === ccWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? '시작' : '다음';
elWizardCard.innerHTML =
'<div class="cc-wizard-icon">' + s.icon + '</div>' +
'<div class="cc-wizard-title">' + s.title + '</div>' +
'<div class="cc-wizard-desc">' + s.desc + '</div>' +
'<div class="cc-wizard-dots">' + dotsHtml + '</div>' +
'<button class="cc-wizard-btn" id="cc-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'cc-wizard-enter 0.3s ease-out';
document.getElementById('cc-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ccWizardStep < CC_WIZARD_STEPS.length - 1) {
ccWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ccWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctColorName = '';
state.currentRule = RULES.INK;
state.currentStimulus = null;
state.currentChoices = [];
runHistory.clear();
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('cc-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('cc-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('cc-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('cc-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('cc-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('cc-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Color Clash', '/ko/games/color-clash/', 'cc-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key >= '1' && e.key <= '4') {
e.preventDefault();
processAnswer(parseInt(e.key, 10) - 1);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('cc-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Memory Matrix - 두뇌 훈련 게임
URL: https://guruka.com/ko/games/memory-matrix/
Description: 격자 패턴을 기억하세요.

<style>
#memory-matrix-game {
max-width: 540px;
margin: 0 auto;
padding: 1.5rem 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
-webkit-tap-highlight-color: transparent;
}

#memory-matrix-game * {
box-sizing: border-box;
}

#memory-matrix-game .mm-screen {
display: none;
animation: mmFadeIn 0.4s ease-out;
}

#memory-matrix-game .mm-screen.active {
display: block;
}

@keyframes mmFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes mmPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}

@keyframes mmCellGlow {
0% { box-shadow: 0 0 0 0 rgba(15, 144, 114, 0.4); }
70% { box-shadow: 0 0 0 8px rgba(15, 144, 114, 0); }
100% { box-shadow: 0 0 0 0 rgba(15, 144, 114, 0); }
}

@keyframes mmShine {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}

@keyframes mmBounceIn {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}

@keyframes mmSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* ---- Instructions Screen ---- */
#memory-matrix-game .mm-instructions {
text-align: center;
}

#memory-matrix-game .mm-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#memory-matrix-game .mm-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 0.75rem;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
margin-bottom: 0;
}

#memory-matrix-game .mm-icon-wrap svg {
width: 36px;
height: 36px;
stroke: var(--color-primary);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

#memory-matrix-game .mm-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 0.25rem;
}

#memory-matrix-game .mm-subtitle {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
}

#memory-matrix-game .mm-how-to {
text-align: left;
margin-bottom: 1.5rem;
}

#memory-matrix-game .mm-how-to h3 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 0.75rem;
}

#memory-matrix-game .mm-how-to ol {
list-style: none;
padding: 0;
margin: 0;
}

#memory-matrix-game .mm-how-to li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.625rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

#memory-matrix-game .mm-step-num {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
font-size: 0.8rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}

#memory-matrix-game .mm-best-banner {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 0.75rem 1rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

#memory-matrix-game .mm-best-banner strong {
color: var(--color-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-best-banner {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

/* ---- Buttons ---- */
#memory-matrix-game .mm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: none;
border-radius: 0.625rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
padding: 0.75rem 1.5rem;
transition: all 0.2s ease;
}

#memory-matrix-game .mm-btn:active {
transform: scale(0.97);
}

#memory-matrix-game .mm-btn-primary {
background: var(--color-primary);
color: #fff;
width: 100%;
}

#memory-matrix-game .mm-btn-primary:hover {
background: var(--color-primary-hover);
box-shadow: 0 4px 12px rgba(15, 144, 114, 0.3);
}

#memory-matrix-game .mm-btn-outline {
background: transparent;
color: var(--color-text-primary);
border: 2px solid var(--color-border);
}

#memory-matrix-game .mm-btn-outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-btn-outline {
color: var(--color-dark-text-primary);
border-color: var(--color-dark-border);
}

[data-theme="dark"] #memory-matrix-game .mm-btn-outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}

#memory-matrix-game .mm-btn-submit {
background: var(--color-primary);
color: #fff;
}

#memory-matrix-game .mm-btn-submit:hover:not(:disabled) {
background: var(--color-primary-hover);
}

#memory-matrix-game .mm-btn-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* ---- Wizard Overlay ---- */
#mm-wizard {
display: none;
animation: mmFadeIn 0.4s ease-out;
}
#mm-wizard.active {
display: block;
}
.mm-wizard-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
.mm-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: mmWizardEnter 0.3s ease-out;
}
[data-theme="dark"].mm-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes mmWizardEnter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.mm-wizard-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.mm-wizard-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
.mm-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].mm-wizard-desc { color: var(--color-dark-text-secondary); }
.mm-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.mm-wizard-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-border);
transition: all 0.3s;
}
.mm-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].mm-wizard-dot { background: var(--color-dark-border, #3a4553); }
[data-theme="dark"].mm-wizard-dot.active { background: var(--color-primary); }
.mm-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.mm-wizard-btn:hover { background: var(--color-primary-hover, #0d7a62); }
@media (max-width: 400px) {
.mm-wizard-card { padding: 1.5rem 1rem; }
.mm-wizard-icon { font-size: 2rem; }
.mm-wizard-title { font-size: 1.1rem; }
.mm-wizard-desc { font-size: 0.85rem; }
}

/* ---- Game Header ---- */
#memory-matrix-game .mm-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
margin-bottom: 1rem;
}

[data-theme="dark"] #memory-matrix-game .mm-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-header-item {
text-align: center;
}

#memory-matrix-game .mm-header-label {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.125rem;
}

[data-theme="dark"] #memory-matrix-game .mm-header-label {
color: var(--color-dark-text-secondary);
}

#memory-matrix-game .mm-header-value {
font-size: 1.15rem;
font-weight: 700;
color: var(--color-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-header-value {
color: var(--color-dark-text-primary);
}

#memory-matrix-game .mm-streak-value {
color: #f59e0b;
}

/* ---- Phase Indicator ---- */
#memory-matrix-game .mm-phase {
text-align: center;
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 1rem;
min-height: 1.5rem;
}

#memory-matrix-game .mm-phase-memorize {
color: var(--color-primary);
animation: mmPulse 1.5s ease-in-out infinite;
}

#memory-matrix-game .mm-phase-recall {
color: #f59e0b;
}

#memory-matrix-game .mm-phase-correct {
color: #22c55e;
}

#memory-matrix-game .mm-phase-wrong {
color: #ef4444;
}

/* ---- Grid ---- */
#memory-matrix-game .mm-grid-wrap {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}

#memory-matrix-game .mm-grid {
display: grid;
gap: 6px;
}

#memory-matrix-game .mm-cell {
aspect-ratio: 1;
border-radius: 8px;
border: 2px solid var(--color-border);
background: var(--color-bg-secondary);
cursor: default;
transition: all 0.25s ease;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
color: transparent;
-webkit-user-select: none;
user-select: none;
}

[data-theme="dark"] #memory-matrix-game .mm-cell {
border-color: var(--color-dark-border);
background: var(--color-dark-bg-secondary);
}

#memory-matrix-game .mm-cell.recall-mode {
cursor: pointer;
}

#memory-matrix-game .mm-cell.recall-mode:hover {
border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-secondary));
}

[data-theme="dark"] #memory-matrix-game .mm-cell.recall-mode:hover {
background: color-mix(in srgb, var(--color-primary) 10%, var(--color-dark-bg-secondary));
}

#memory-matrix-game .mm-cell.showing {
background: var(--color-primary);
border-color: var(--color-primary);
animation: mmCellGlow 0.6s ease-out;
}

#memory-matrix-game .mm-cell.selected {
background: color-mix(in srgb, var(--color-primary) 80%, transparent);
border-color: var(--color-primary);
color: #fff;
}

#memory-matrix-game .mm-cell.fb-correct {
background: #22c55e;
border-color: #16a34a;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-missed {
background: rgba(239, 68, 68, 0.45);
border-color: #ef4444;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-wrong {
background: #ef4444;
border-color: #dc2626;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-neutral {
opacity: 0.5;
transition: all 0.3s ease;
}

/* ---- Progress Bar ---- */
#memory-matrix-game .mm-progress-wrap {
margin-bottom: 1rem;
text-align: center;
}

#memory-matrix-game .mm-progress-bar {
height: 6px;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 3px;
overflow: hidden;
max-width: 240px;
margin: 0 auto 0.375rem;
}

[data-theme="dark"] #memory-matrix-game .mm-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

#memory-matrix-game .mm-progress-text {
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-progress-text {
color: var(--color-dark-text-secondary);
}

/* ---- Action Buttons ---- */
#memory-matrix-game .mm-actions {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}

/* ---- Game Complete Screen ---- */
#memory-matrix-game .mm-complete {
position: relative;
text-align: center;
}

#memory-matrix-game .mm-score-display {
font-size: 3rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
background: linear-gradient(90deg, var(--color-primary), #10b981, var(--color-primary));
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: mmShine 3s linear infinite;
}

#memory-matrix-game .mm-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin: 1.25rem 0;
}

#memory-matrix-game .mm-stat-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 0.75rem 0.5rem;
}

[data-theme="dark"] #memory-matrix-game .mm-stat-card {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-stat-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-stat-value {
color: var(--color-dark-text-primary);
}

#memory-matrix-game .mm-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-secondary);
margin-top: 0.125rem;
}

[data-theme="dark"] #memory-matrix-game .mm-stat-label {
color: var(--color-dark-text-secondary);
}

#memory-matrix-game .mm-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #000;
font-size: 0.8rem;
font-weight: 700;
padding: 0.375rem 1rem;
border-radius: 2rem;
margin-bottom: 1rem;
animation: mmBounceIn 0.5s ease-out;
}

#memory-matrix-game .mm-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}

#memory-matrix-game .mm-back-link {
display: inline-block;
margin-top: 0.75rem;
color: var(--color-primary);
text-decoration: none;
font-size: 0.9rem;
}

#memory-matrix-game .mm-back-link:hover {
text-decoration: underline;
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

/* ---- Dark Mode ---- */
[data-theme="dark"] #memory-matrix-game {
color: var(--color-dark-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-title {
color: var(--color-dark-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-subtitle {
color: var(--color-dark-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-how-to li {
color: var(--color-dark-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-cell.recall-mode:hover {
border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

/* ---- Responsive ---- */
@media (max-width: 400px) {
#memory-matrix-game {
padding: 1rem 0.5rem;
}
#memory-matrix-game .mm-grid {
gap: 4px;
}
#memory-matrix-game .mm-header {
padding: 0.5rem;
}
#memory-matrix-game .mm-header-value {
font-size: 1rem;
}
#memory-matrix-game .mm-btn {
padding: 0.625rem 1rem;
font-size: 0.9rem;
}
#memory-matrix-game .mm-icon-wrap { width: 40px; height: 40px; margin-bottom: 0; }
#memory-matrix-game .mm-icon-wrap svg { width: 20px; height: 20px; }
#memory-matrix-game .mm-instructions h2 { font-size: 1.3rem; }
#memory-matrix-game .mm-instructions.mm-subtitle { font-size: 0.85rem; margin-bottom: 0.75rem; }
}
@media (max-width: 640px) {
#memory-matrix-game .mm-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
#memory-matrix-game .mm-stat-value {
font-size: 1.1rem;
}
}
@media (max-width: 360px) {
#memory-matrix-game .mm-grid {
gap: 3px;
}
#memory-matrix-game .mm-stats-grid {
grid-template-columns: 1fr 1fr;
}
#memory-matrix-game .mm-btn {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}
#memory-matrix-game .mm-title {
font-size: 1.25rem;
}
#memory-matrix-game .mm-grid-wrap {
max-width: 100%;
overflow: hidden;
}
}
@keyframes mm-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.mm-confetti-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.mm-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: mm-confetti-fall 2.5s ease-in forwards;
}
.mm-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: mm-glow-fade 1s ease-out forwards;
}
@keyframes mm-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.mm-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
font-size: 0.85rem;
font-weight: 700;
padding: 0.375rem 1rem;
border-radius: 2rem;
margin-bottom: 1rem;
animation: mmBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}

#memory-matrix-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#memory-matrix-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #memory-matrix-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="memory-matrix-game">

<div id="mm-instructions" class="mm-screen active">
<div class="mm-instructions">
<div class="mm-title-row"><div class="mm-icon-wrap"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div><h1 class="mm-title">Memory Matrix</h1></div>
<p class="mm-subtitle">공간 기억력을 테스트하세요</p>
<div class="mm-how-to">
<h3>플레이 방법:</h3>
<ol>
<li><span class="mm-step-num">1</span><span>패턴 관찰 -- 셀이 순서대로 빛납니다</span></li>
<li><span class="mm-step-num">2</span><span>어떤 셀이 빛났는지 기억하세요</span></li>
<li><span class="mm-step-num">3</span><span>기억에서 같은 셀을 탭하세요</span></li>
<li><span class="mm-step-num">4</span><span>레벨 8부터는 순서가 중요합니다! 올바른 순서로 탭하세요</span></li>
</ol>
</div>
<div id="mm-instr-best" class="mm-best-banner" style="display:none;"></div>
<button class="mm-btn mm-btn-primary" onclick="mmShowWizard()">시작</button>
<div id="mm-challenge-banner-wrap"></div>
</div>
</div>

<div id="mm-wizard" class="mm-screen">
<div class="mm-wizard-overlay">
<div class="mm-wizard-card" id="mm-wizard-card"></div>
</div>
</div>

<div id="mm-playing" class="mm-screen">
<div class="mm-header">
<div class="mm-header-item">
<div class="mm-header-label">점수</div>
<div class="mm-header-value" id="mm-score">0</div>
</div>
<div class="mm-header-item">
<div class="mm-header-label">Level</div>
<div class="mm-header-value" id="mm-level">1</div>
</div>
<div class="mm-header-item">
<div class="mm-header-label">연속</div>
<div class="mm-header-value mm-streak-value" id="mm-streak">0</div>
</div>
</div>
<div class="mm-phase" id="mm-phase"></div>
<div class="mm-grid-wrap">
<div class="mm-grid" id="mm-grid"></div>
</div>
<div class="mm-progress-wrap">
<div class="mm-progress-bar">
<div class="mm-progress-fill" id="mm-progress-fill" style="width:0%"></div>
</div>
<div class="mm-progress-text" id="mm-progress-text">라운드 1 / 3</div>
</div>
<div class="mm-actions" id="mm-actions"></div>
<button class="gk-finish-btn" id="mm-finish-btn">종료</button>
</div>

<div id="mm-complete" class="mm-screen">
<div class="mm-complete">
<button class="gk-complete-close" id="mm-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="mm-icon-wrap">
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
</div>
<h1 class="mm-title">종료!</h1>
<div class="mm-score-display" id="mm-final-score">0</div>
<div id="mm-new-best-badge" class="mm-new-best" style="display:none;">새로운 최고!</div>
<div class="gk-challenge-result" id="mm-challenge-result" style="display:none;"></div>
<div class="mm-stats-grid">
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-level">1</div>
<div class="mm-stat-label">Level</div>
</div>
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-accuracy">0%</div>
<div class="mm-stat-label">정확도</div>
</div>
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-streak">0</div>
<div class="mm-stat-label">연속</div>
</div>
</div>
<div class="mm-complete-actions">
<button class="mm-btn mm-btn-primary" onclick="mmPlayAgain()">다시하기</button>
<button class="gk-runtime-history-toggle" id="mm-history-toggle" type="button">Show History</button>
<a href="/ko/games/" class="mm-back-link">모든 게임</a>
</div>
<div class="gk-runtime-history-panel" id="mm-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="mm-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="mm-share-btn">&#128279; 결과 공유</button>
<div class="gk-share-copied" id="mm-share-copied" style="display:none;">링크가 복사되었습니다!</div>
</div>
</div>
</div>

</div>

<script>
(function() {
var STORAGE_BEST = 'guruka_memory-matrix_best';
var POINTS_PER_CORRECT = 100;
var SPEED_BONUS_THRESHOLD = 1000;
var STREAK_MULTIPLIER = 0.1;
var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('mm-history-toggle', 'mm-history-panel', 'mm-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
 screen: 'instructions',
 score: 0,
 level: 1,
 streak: 0,
 bestStreak: 0,
 correctAnswers: 0,
 wrongAnswers: 0,
 roundsInLevel: 0,
 pattern: [],
 selectedCells: [],
 showingIndex: 0,
 phase: 'showing',
 answerTime: 0,
 countdownValue: 3,
 countdownTimer: null,
 showTimer: null,
 feedbackTimer: null
};

function getLevelConfig(level) {
 var gridSize = level <= 5 ? 3 : level <= 10 ? 4 : level <= 15 ? 5 : 6;
 var patternSize = Math.min(3 + Math.floor(level / 2), gridSize * gridSize - 2);
 var displayTime = Math.max(2000 - (level - 1) * 80, 800);
 var orderMatters = level >= 8;
 return {
 gridSize: gridSize,
 patternSize: patternSize,
 displayTime: displayTime,
 orderMatters: orderMatters,
 roundsPerLevel: 3,
 maxLevel: 20
 };
}

function getPersonalBest() {
 try {
 var val = localStorage.getItem(STORAGE_BEST);
 return val ? parseInt(val, 10) : 0;
 } catch (e) { return 0; }
}

function saveResult(score, level, accuracy) {
 try {
 void level;
 void accuracy;
 var best = getPersonalBest();
 if (score > best) {
 localStorage.setItem(STORAGE_BEST, String(score));
 return true;
 }
 return false;
 } catch (e) { return false; }
}

function showScreen(name) {
 var screens = document.querySelectorAll('#memory-matrix-game .mm-screen');
 for (var i = 0; i < screens.length; i++) {
 screens[i].classList.remove('active');
 }
 var el = document.getElementById('mm-' + name);
 if (el) {
 el.classList.add('active');
 }
 state.screen = name;
}

function updateInstructionsBest() {
 var best = getPersonalBest();
 var banner = document.getElementById('mm-instr-best');
 if (best > 0 && banner) {
 banner.style.display = 'block';
 banner.innerHTML = '최고: <strong>' + best.toLocaleString() + '</strong> 포인트';
 }
}

/* ---- Wizard ---- */
var MM_WIZARD_STEPS = [
{icon: '\uD83D\uDCA1', title: '빛나는 셀을 관찰하세요', desc: '셀이 순서대로 빛납니다. 잘 보세요!'},
{icon: '\uD83D\uDC46', title: '기억에서 탭하세요', desc: '패턴이 사라진 후 기억에서 재현하세요.'},
{icon: '\uD83D\uDE80', title: '준비됐나요? 시작!', desc: '레벨이 올라가면 패턴이 어려워집니다!', final: true}
];
var mmWizardStep = 0;

function mmRenderWizardStep() {
var s = MM_WIZARD_STEPS[mmWizardStep];
var dotsHtml = '';
for (var i = 0; i < MM_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="mm-wizard-dot' + (i === mmWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? '플레이 시작' : '다음';
var card = document.getElementById('mm-wizard-card');
card.innerHTML =
'<div class="mm-wizard-icon">' + s.icon + '</div>' +
'<div class="mm-wizard-title">' + s.title + '</div>' +
'<div class="mm-wizard-desc">' + s.desc + '</div>' +
'<div class="mm-wizard-dots">' + dotsHtml + '</div>' +
'<button class="mm-wizard-btn" id="mm-wizard-next">' + btnLabel + '</button>';
card.style.animation = 'none';
void card.offsetWidth;
card.style.animation = 'mmWizardEnter 0.3s ease-out';
document.getElementById('mm-wizard-next').addEventListener('click', mmAdvanceWizard);
}

function mmAdvanceWizard() {
if (mmWizardStep < MM_WIZARD_STEPS.length - 1) {
mmWizardStep++;
mmRenderWizardStep();
} else {
mmStartGame();
}
}

window.mmShowWizard = function() {
mmWizardStep = 0;
showScreen('wizard');
mmRenderWizardStep();
};

/* ---- Start ---- */
function mmStartGame() {
 window.scrollTo({ top: 0, behavior: 'instant' });
 enterMobileGameMode();
 state.score = 0;
 state.level = 1;
 state.streak = 0;
 state.bestStreak = 0;
 state.correctAnswers = 0;
 state.wrongAnswers = 0;
 state.roundsInLevel = 0;
 state.pattern = [];
 state.selectedCells = [];
 runHistory.clear();

 showScreen('playing');
 GK.renderChallengeBar('mm-playing', challenge);
 updateHeader();
 generatePattern();
}

/* ---- Update Header ---- */
function updateHeader() {
 document.getElementById('mm-score').textContent = state.score.toLocaleString();
 document.getElementById('mm-level').textContent = state.level;
 document.getElementById('mm-streak').textContent = state.streak;
 if (challenge.active) GK.updateChallengeBar('mm-playing', state.score, challenge.score);
}

/* ---- Generate Pattern ---- */
function generatePattern() {
 var config = getLevelConfig(state.level);
 var totalCells = config.gridSize * config.gridSize;
 var newPattern = [];

 while (newPattern.length < config.patternSize) {
 var cell = Math.floor(Math.random() * totalCells);
 if (newPattern.indexOf(cell) === -1) {
 newPattern.push(cell);
 }
 }

 state.pattern = newPattern;
 state.selectedCells = [];
 state.showingIndex = 0;
 state.phase = 'showing';

 buildGrid(config);
 updateProgressBar(config);
 updatePhase(config);
 updateActions(config);
 startShowingPattern(config);
}

/* ---- Build Grid ---- */
function buildGrid(config) {
 var grid = document.getElementById('mm-grid');
 var cellSize = config.gridSize <= 3 ? 72 : config.gridSize <= 4 ? 62 : config.gridSize <= 5 ? 52 : 44;
 var gapSize = config.gridSize <= 4 ? 6 : 5;
 var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
 if (viewportWidth < 360) {
 var maxCellSize = Math.floor((viewportWidth - 40 - (config.gridSize - 1) * gapSize) / config.gridSize);
 if (maxCellSize < cellSize) cellSize = maxCellSize;
 }
 var totalSize = config.gridSize * cellSize + (config.gridSize - 1) * gapSize;

 grid.style.gridTemplateColumns = 'repeat(' + config.gridSize + ', ' + cellSize + 'px)';
 grid.style.gridTemplateRows = 'repeat(' + config.gridSize + ', ' + cellSize + 'px)';
 grid.style.gap = gapSize + 'px';
 grid.style.width = totalSize + 'px';
 grid.innerHTML = '';

 var totalCells = config.gridSize * config.gridSize;
 for (var i = 0; i < totalCells; i++) {
 var cell = document.createElement('button');
 cell.className = 'mm-cell';
 cell.setAttribute('data-index', i);
 cell.setAttribute('type', 'button');
 (function(idx) {
 cell.addEventListener('click', function() { handleCellClick(idx); });
 })(i);
 grid.appendChild(cell);
 }
}

/* ---- Show Pattern Sequentially ---- */
function startShowingPattern(config) {
 var delay = config.displayTime / state.pattern.length;
 state.showingIndex = 0;

 function showNext() {
 if (state.screen !== 'playing') return;
 if (state.showingIndex < state.pattern.length) {
 // Clear previous highlights
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var j = 0; j < cells.length; j++) {
 cells[j].classList.remove('showing');
 }
 // Highlight current cell
 var idx = state.pattern[state.showingIndex];
 var targetCell = document.querySelector('#mm-grid .mm-cell[data-index="' + idx + '"]');
 if (targetCell) {
 targetCell.classList.add('showing');
 }
 state.showingIndex++;
 state.showTimer = setTimeout(showNext, delay);
 } else {
 // All shown, brief pause then switch to recall
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var j = 0; j < cells.length; j++) {
 cells[j].classList.remove('showing');
 }
 state.showTimer = setTimeout(function() {
 state.phase = 'recall';
 state.answerTime = Date.now();
 enableRecallMode(config);
 updatePhase(config);
 updateActions(config);
 }, 400);
 }
 }

 showNext();
}

/* ---- Enable Recall Mode ---- */
function enableRecallMode(config) {
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var i = 0; i < cells.length; i++) {
 cells[i].classList.add('recall-mode');
 }
}

/* ---- Handle Cell Click ---- */
function handleCellClick(cellIndex) {
 if (state.phase !== 'recall') return;

 var existingIdx = state.selectedCells.indexOf(cellIndex);
 if (existingIdx !== -1) {
 // Deselect
 state.selectedCells.splice(existingIdx, 1);
 } else if (state.selectedCells.length < state.pattern.length) {
 state.selectedCells.push(cellIndex);
 }

 var config = getLevelConfig(state.level);
 updateCellVisuals();
 updatePhase(config);
 updateActions(config);
}

/* ---- Update Cell Visuals ---- */
function updateCellVisuals() {
 var config = getLevelConfig(state.level);
 var cells = document.querySelectorAll('#mm-grid .mm-cell');

 for (var i = 0; i < cells.length; i++) {
 var idx = parseInt(cells[i].getAttribute('data-index'), 10);
 cells[i].classList.remove('selected');
 cells[i].textContent = '';

 if (state.selectedCells.indexOf(idx) !== -1) {
 cells[i].classList.add('selected');
 if (config.orderMatters) {
 cells[i].textContent = String(state.selectedCells.indexOf(idx) + 1);
 cells[i].style.color = '#fff';
 }
 } else {
 cells[i].style.color = 'transparent';
 }
 }
}

/* ---- Update Phase Indicator ---- */
function updatePhase(config) {
 var phaseEl = document.getElementById('mm-phase');
 if (state.phase === 'showing') {
 phaseEl.innerHTML = '<span class="mm-phase-memorize">기억하세요...</span>';
 } else if (state.phase === 'recall') {
 var orderNote = config.orderMatters ? ' (순서 중요!)' : '';
 phaseEl.innerHTML = '<span class="mm-phase-recall">재현하세요!' + orderNote + ', ' + state.selectedCells.length + '/' + state.pattern.length + ' 선택됨</span>';
 }
}

/* ---- Update Actions ---- */
function updateActions(config) {
 var actionsEl = document.getElementById('mm-actions');
 if (state.phase !== 'recall') {
 actionsEl.innerHTML = '';
 return;
 }

 var clearDisabled = state.selectedCells.length === 0 ? ' disabled' : '';
 var submitDisabled = state.selectedCells.length !== state.pattern.length ? ' disabled' : '';

 actionsEl.innerHTML =
 '<button class="mm-btn mm-btn-outline" onclick="mmClearSelection()"' + clearDisabled + '>초기화</button>' +
 '<button class="mm-btn mm-btn-submit" onclick="mmSubmitAnswer()"' + submitDisabled + '>제출 (' + state.selectedCells.length + '/' + state.pattern.length + ')</button>';
}

/* ---- Update Progress Bar ---- */
function updateProgressBar(config) {
 var pct = (state.roundsInLevel / config.roundsPerLevel) * 100;
 document.getElementById('mm-progress-fill').style.width = pct + '%';
 document.getElementById('mm-progress-text').textContent =
 '라운드 ' + (state.roundsInLevel + 1) + ' / ' + config.roundsPerLevel;
}

/* ---- Clear Selection ---- */
window.mmClearSelection = function() {
 state.selectedCells = [];
 updateCellVisuals();
 updateActions(getLevelConfig(state.level));
 updatePhase(getLevelConfig(state.level));
};

function formatCellList(cells) {
if (!cells || !cells.length) return 'none';
var out = [];
for (var i = 0; i < cells.length; i++) out.push(String(cells[i] + 1));
return out.join(', ');
}

function recordMemoryHistory(correct, config) {
var html = '<strong>' + runHistory.escape(config.orderMatters ? 'Order matters' : 'Any order') + '</strong>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(formatCellList(state.selectedCells)) + '</div>';
html += '<div class="gk-runtime-history-sub">Correct: ' + runHistory.escape(formatCellList(state.pattern)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ---- Submit Answer ---- */
window.mmSubmitAnswer = function() {
 if (state.phase !== 'recall') return;
 var config = getLevelConfig(state.level);
 var responseTime = Date.now() - state.answerTime;

 var correct;
 if (config.orderMatters) {
 correct = true;
 for (var i = 0; i < state.pattern.length; i++) {
 if (state.selectedCells[i] !== state.pattern[i]) {
 correct = false;
 break;
 }
 }
 } else {
 correct = state.selectedCells.length === state.pattern.length;
 if (correct) {
 for (var i = 0; i < state.pattern.length; i++) {
 if (state.selectedCells.indexOf(state.pattern[i]) === -1) {
 correct = false;
 break;
 }
 }
 }
 }

 recordMemoryHistory(correct, config);

 // Calculate points
 var pointsEarned = 0;
 if (correct) {
 pointsEarned = POINTS_PER_CORRECT;
 if (responseTime < SPEED_BONUS_THRESHOLD) {
 pointsEarned += Math.floor((SPEED_BONUS_THRESHOLD - responseTime) / 10);
 }
 pointsEarned += Math.floor(state.streak * STREAK_MULTIPLIER * POINTS_PER_CORRECT);
 state.score += pointsEarned;
 state.streak++;
 state.correctAnswers++;
 if (state.streak > state.bestStreak) {
 state.bestStreak = state.streak;
 }
 } else {
 state.streak = 0;
 state.wrongAnswers++;
 }

 updateHeader();
 showFeedback(correct, config);
};

/* ---- Show Feedback ---- */
function showFeedback(correct, config) {
 state.phase = 'feedback';

 var phaseEl = document.getElementById('mm-phase');
 if (correct) {
 phaseEl.innerHTML = '<span class="mm-phase-correct">정답!</span>';
 } else {
 phaseEl.innerHTML = '<span class="mm-phase-wrong">아쉽네요...</span>';
 }

 // Update cell visuals to show correct/wrong
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var i = 0; i < cells.length; i++) {
 var idx = parseInt(cells[i].getAttribute('data-index'), 10);
 cells[i].classList.remove('showing', 'selected', 'recall-mode');
 cells[i].style.color = 'transparent';
 cells[i].textContent = '';

 var inPattern = state.pattern.indexOf(idx) !== -1;
 var wasSelected = state.selectedCells.indexOf(idx) !== -1;

 if (inPattern && wasSelected) {
 cells[i].classList.add('fb-correct');
 } else if (inPattern && !wasSelected) {
 cells[i].classList.add('fb-missed');
 } else if (!inPattern && wasSelected) {
 cells[i].classList.add('fb-wrong');
 } else {
 cells[i].classList.add('fb-neutral');
 }
 }

 // Hide action buttons during feedback
 document.getElementById('mm-actions').innerHTML = '';

 state.feedbackTimer = setTimeout(function() {
 advanceRound(config);
 }, 1200);
}

/* ---- Advance Round ---- */
function advanceRound(config) {
 state.roundsInLevel++;

 if (state.roundsInLevel >= config.roundsPerLevel) {
 if (state.level >= config.maxLevel) {
 endGame();
 return;
 }
 state.level++;
 state.roundsInLevel = 0;
 updateHeader();
 }

 generatePattern();
}

/* ---- Celebration effects ---- */
function mmShowConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'mm-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'mm-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'mm-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function mmAnimateScoreCountUp(el, target) {
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(target * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

/* ---- End Game ---- */
function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

function endGame() {
exitMobileGameMode();
 var totalAnswers = state.correctAnswers + state.wrongAnswers;
 var accuracy = totalAnswers > 0 ? Math.round((state.correctAnswers / totalAnswers) * 100) : 0;
 var isNewBest = saveResult(state.score, state.level, accuracy);

 var titleEl = document.querySelector('#mm-complete .mm-title');
 var iconWrap = document.querySelector('#mm-complete .mm-icon-wrap');
 var bestBadge = document.getElementById('mm-new-best-badge');

 if (isNewBest) {
 mmShowConfetti();
 titleEl.textContent = '대단해요!';
 iconWrap.innerHTML = '<span style="font-size:2.25rem">\uD83C\uDF89</span>';
 bestBadge.className = 'mm-new-best-enhanced';
 bestBadge.innerHTML = 'uD83CuDF1F 대단해요!신기록!';
 bestBadge.style.display = 'inline-block';
 } else {
 titleEl.textContent = '수고하셨습니다!';
 iconWrap.innerHTML = '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>';
 bestBadge.className = 'mm-new-best';
 bestBadge.style.display = 'none';
 }

 GK.renderChallengeResult('mm-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

 showScreen('complete');

 var scoreEl = document.getElementById('mm-final-score');
 document.getElementById('mm-final-level').textContent = state.level;
 document.getElementById('mm-final-accuracy').textContent = accuracy + '%';
 document.getElementById('mm-final-streak').textContent = state.bestStreak;

 mmAnimateScoreCountUp(scoreEl, state.score);
}

/* ---- Again ---- */
window.mmPlayAgain = function() {
 clearTimeout(state.showTimer);
 clearTimeout(state.feedbackTimer);
 clearInterval(state.countdownTimer);
 updateInstructionsBest();
 showScreen('instructions');
};

/* ---- Init ---- */
updateInstructionsBest();
GK.renderChallengeBanner('mm-challenge-banner-wrap', challenge);


document.getElementById('mm-close-btn').addEventListener('click', function() {
updateInstructionsBest();
showScreen('instructions');
});

document.getElementById('mm-finish-btn').addEventListener('click', function() {
 endGame();
});

document.getElementById('mm-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('mm-share-btn').addEventListener('click', function() {
 GK.shareResult(state.score, 'Memory Matrix', '/ko/games/memory-matrix/', 'mm-share-copied');
});
})();
</script>

### Number Crunch - 두뇌 훈련 게임
URL: https://guruka.com/ko/games/number-crunch/
Description: 시간 안에 암산하세요.

<style>
#number-crunch-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #number-crunch-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#nc-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.nc-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#nc-instructions.nc-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#nc-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#nc-instructions.nc-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #nc-instructions.nc-subtitle {
color: var(--color-dark-text-secondary);
}

#nc-instructions.nc-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #nc-instructions.nc-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#nc-instructions.nc-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#nc-instructions.nc-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#nc-instructions.nc-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.nc-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.nc-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.nc-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.nc-btn-primary:hover {
background: var(--color-primary-hover);
}

.nc-btn-primary:active {
transform: scale(0.97);
}

.nc-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.nc-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"].nc-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#nc-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#nc-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: nc-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #nc-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes nc-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.nc-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.nc-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.nc-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].nc-wizard-desc {
color: var(--color-dark-text-secondary);
}
.nc-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.nc-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.nc-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].nc-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"].nc-wizard-dot.active {
background: var(--color-primary);
}
.nc-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.nc-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#nc-wizard-card {
padding: 1.5rem 1rem;
}
.nc-wizard-icon {
font-size: 2rem;
}
.nc-wizard-title {
font-size: 1.1rem;
}
.nc-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#nc-playing {
display: none;
flex: 1;
flex-direction: column;
}

.nc-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].nc-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-stat {
text-align: center;
}

.nc-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"].nc-stat-label {
color: var(--color-dark-text-secondary);
}

.nc-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.nc-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.nc-level-text {
font-weight: 600;
}

.nc-modifier-badge {
background: #6366f1;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.nc-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].nc-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.nc-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"].nc-timer-bar {
background: var(--color-dark-bg-secondary);
}

.nc-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.nc-timer-fill.nc-timer-warning {
background: #ef4444;
}

/* ── Equation Display ── */
.nc-equation-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
position: relative;
}

.nc-rule-modifier {
background: rgba(99,102,241,0.1);
color: #6366f1;
padding: 0.4rem 1rem;
border-radius: 2rem;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1rem;
display: none;
}

[data-theme="dark"].nc-rule-modifier {
background: rgba(99,102,241,0.2);
color: #818cf8;
}

.nc-equation {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
animation: nc-eq-enter 0.2s ease-out;
text-align: center;
}

@keyframes nc-eq-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.nc-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.nc-feedback-flash.nc-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.nc-feedback-flash.nc-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.nc-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.nc-feedback-icon.nc-show-check {
animation: nc-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.nc-feedback-icon.nc-show-x {
animation: nc-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes nc-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Answer Buttons ── */
.nc-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.nc-answer-btn {
padding: 1rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.25rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
}

[data-theme="dark"].nc-answer-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.nc-answer-btn:active {
transform: scale(0.95);
}

.nc-answer-btn:hover {
border-color: var(--color-primary);
background: rgba(99,102,241,0.05);
}

[data-theme="dark"].nc-answer-btn:hover {
background: rgba(99,102,241,0.15);
}

.nc-answer-btn.nc-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.nc-answer-btn.nc-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.nc-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-playing-hint {
color: var(--color-dark-text-secondary);
}

#number-crunch-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary);
border-radius: 0.5rem;
background: var(--color-bg-primary);
color: var(--color-primary);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#number-crunch-game .gk-finish-btn:hover {
background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] #number-crunch-game .gk-finish-btn {
background: var(--color-dark-bg-secondary);
color: #fbbf24;
border-color: #fbbf24;
}

/* ── Pause Overlay ── */
#nc-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#nc-pause-overlay.nc-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#nc-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.nc-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: nc-modal-enter 0.3s ease-out;
}

[data-theme="dark"].nc-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes nc-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.nc-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.nc-complete-card.nc-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.nc-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.nc-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: nc-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes nc-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.nc-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.nc-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"].nc-complete-stat {
background: var(--color-dark-bg-secondary);
}

.nc-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.nc-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.nc-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.nc-history-toggle {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.nc-history-toggle:hover {
background: rgba(245, 158, 11, 0.1);
}

.nc-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 240px;
overflow: auto;
border: 1px solid var(--color-border);
border-radius: 0.5rem;
background: var(--color-bg-secondary);
}

[data-theme="dark"] .nc-history-panel {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-history-list {
display: flex;
flex-direction: column;
}

.nc-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border);
font-size: 0.82rem;
}

.nc-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .nc-history-row {
border-color: var(--color-dark-border);
}

.nc-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: baseline;
}

.nc-history-status {
font-weight: 800;
white-space: nowrap;
}

.nc-history-correct .nc-history-status {
color: #16a34a;
}

.nc-history-wrong .nc-history-status {
color: #dc2626;
}

.nc-history-eq {
font-weight: 700;
text-align: right;
}

.nc-history-answer {
margin-top: 0.25rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .nc-history-answer {
color: var(--color-dark-text-secondary);
}

.nc-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary);
text-align: center;
}

.nc-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"].nc-back-link {
color: var(--color-dark-text-secondary);
}

.nc-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.nc-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.nc-level-up-toast.nc-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#number-crunch-game {
padding: 0.5rem;
}
.nc-equation {
font-size: 2rem;
}
.nc-answer-btn {
padding: 0.75rem;
font-size: 1.1rem;
min-height: 48px;
}
.nc-header {
padding: 0.5rem;
gap: 0.25rem;
}
.nc-stat-value {
font-size: 1rem;
}
#nc-instructions { padding: 0.75rem 0.5rem; }
#nc-instructions.nc-icon { font-size: 2rem; margin-bottom: 0; }
#nc-instructions h2 { font-size: 1.3rem; }
#nc-instructions.nc-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#nc-instructions.nc-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#nc-instructions.nc-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.nc-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#number-crunch-game {
padding: 0.75rem;
}
.nc-equation {
font-size: 2.25rem;
}
.nc-answer-btn {
padding: 0.875rem;
}
}
@media (max-width: 360px) {
.nc-equation {
font-size: 1.75rem;
}
.nc-answer-btn {
padding: 0.625rem;
font-size: 1rem;
}
.nc-complete-stats {
grid-template-columns: 1fr 1fr;
}
.nc-final-score {
font-size: 2rem;
}
.nc-header {
padding: 0.375rem;
}
.nc-stat-value {
font-size: 0.9rem;
}
}
@keyframes nc-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.nc-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.nc-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: nc-confetti-fall 2.5s ease-in forwards;
}
.nc-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: nc-glow-fade 1s ease-out forwards;
}
@keyframes nc-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.nc-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: nc-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes nc-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#number-crunch-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#number-crunch-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="number-crunch-game">

<div id="nc-instructions">
<div class="nc-title-row"><span class="nc-icon">&#129518;</span><h2>Number Crunch</h2></div>
<p class="nc-subtitle">암산</p>
<div class="nc-how-to">
<h3>플레이 방법</h3>
<ol>
<li>식을 풉니다.</li>
<li>4개의 선택지에서 <strong>정답</strong>을 선택하세요.</li>
<li>레벨 6+: 식에 추가 단계가 나옵니다.</li>


</ol>
</div>
<div id="nc-best-display" class="nc-personal-best" style="display:none;">
최고: <strong id="nc-best-score">0</strong> 포인트
</div>
<button class="nc-btn-primary" id="nc-start-btn">시작</button>
<div id="nc-challenge-banner-wrap"></div>
</div>

<div id="nc-wizard">
<div id="nc-wizard-card"></div>
</div>

<div id="nc-playing">
<div class="nc-header">
<div class="nc-stat">
<div class="nc-stat-label">점수</div>
<div class="nc-stat-value" id="nc-score">0</div>
</div>
<div class="nc-stat">
<div class="nc-stat-label">연속</div>
<div class="nc-stat-value" id="nc-streak">0</div>
</div>
<div class="nc-stat">
<div class="nc-stat-label">Level</div>
<div class="nc-stat-value" id="nc-level">1</div>
</div>
</div>
<div class="nc-level-info">
<span class="nc-level-text">Level <span id="nc-level-text">1</span></span>
<span class="nc-modifier-badge" id="nc-modifier-badge" style="display:none;">Extra</span>
</div>
<div class="nc-progress-bar">
<div class="nc-progress-fill" id="nc-progress-fill" style="width:0%"></div>
</div>
<div class="nc-timer-bar">
<div class="nc-timer-fill" id="nc-timer-fill" style="width:100%"></div>
</div>
<div class="nc-equation-area">
<div class="nc-feedback-flash" id="nc-feedback-flash"></div>
<div class="nc-feedback-icon" id="nc-feedback-icon"></div>
<div class="nc-rule-modifier" id="nc-rule-modifier"></div>
<div class="nc-equation" id="nc-equation"></div>
</div>
<div class="nc-answers" id="nc-answers">
<button class="nc-answer-btn" id="nc-ans-0"></button>
<button class="nc-answer-btn" id="nc-ans-1"></button>
<button class="nc-answer-btn" id="nc-ans-2"></button>
<button class="nc-answer-btn" id="nc-ans-3"></button>
</div>
<div class="nc-playing-hint"><strong>1-4</strong>키로 답변 · <strong>Esc</strong>키로 일시정지</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="nc-pause-btn" type="button">일시정지</button>
<button class="gk-finish-btn" id="nc-finish-btn" type="button">종료</button>
</div>
</div>

<div id="nc-pause-overlay">
<div class="nc-pause-text">일시정지</div>
<button class="nc-btn-primary" id="nc-resume-btn">계속하기</button>
</div>

<div id="nc-complete-overlay">
<div class="nc-complete-card">
<button class="gk-complete-close" id="nc-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="nc-trophy">&#127942;</div>
<h2>종료!</h2>
<div class="nc-final-score" id="nc-final-score">0</div>
<div id="nc-new-best" class="nc-new-best" style="display:none;">&#11088; 신기록!</div>
<div class="gk-challenge-result" id="nc-challenge-result" style="display:none;"></div>
<div class="nc-complete-stats">
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">레벨</div>
<div class="nc-complete-stat-value" id="nc-final-level">1</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">정확도</div>
<div class="nc-complete-stat-value" id="nc-final-accuracy">0%</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">연속</div>
<div class="nc-complete-stat-value" id="nc-final-streak">0</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">최고</div>
<div class="nc-complete-stat-value" id="nc-final-best">0</div>
</div>
</div>
<div class="nc-complete-actions">
<button class="nc-btn-primary" id="nc-play-again-btn">다시하기</button>
<button class="gk-runtime-history-toggle" id="nc-history-toggle">Show History</button>
<a href="/ko/games/" class="nc-back-link">&larr; 모든 게임</a>
</div>
<div class="gk-runtime-history-panel" id="nc-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="nc-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="nc-share-btn">&#128279; 결과 공유</button>
<div class="gk-share-copied" id="nc-share-copied" style="display:none;">링크가 복사되었습니다!</div>
</div>
</div>
</div>

<div class="nc-level-up-toast" id="nc-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_number-crunch_best';

var challenge = GK.parseChallenge();

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctAnswer: 0,
currentModifier: null,
currentEquation: '',
currentChoices: []
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('nc-instructions');
var elWizard = document.getElementById('nc-wizard');
var elWizardCard = document.getElementById('nc-wizard-card');
var elPlaying = document.getElementById('nc-playing');
var elPauseOverlay = document.getElementById('nc-pause-overlay');
var elCompleteOverlay = document.getElementById('nc-complete-overlay');
var elScore = document.getElementById('nc-score');
var elStreak = document.getElementById('nc-streak');
var elLevel = document.getElementById('nc-level');
var elLevelText = document.getElementById('nc-level-text');
var elModifierBadge = document.getElementById('nc-modifier-badge');
var elProgressFill = document.getElementById('nc-progress-fill');
var elTimerFill = document.getElementById('nc-timer-fill');
var elEquation = document.getElementById('nc-equation');
var elRuleModifier = document.getElementById('nc-rule-modifier');
var elFeedbackFlash = document.getElementById('nc-feedback-flash');
var elFeedbackIcon = document.getElementById('nc-feedback-icon');
var elFinalScore = document.getElementById('nc-final-score');
var elNewBest = document.getElementById('nc-new-best');
var elFinalLevel = document.getElementById('nc-final-level');
var elFinalAccuracy = document.getElementById('nc-final-accuracy');
var elFinalStreak = document.getElementById('nc-final-streak');
var elFinalBest = document.getElementById('nc-final-best');
var elBestDisplay = document.getElementById('nc-best-display');
var elBestScore = document.getElementById('nc-best-score');
var elLevelToast = document.getElementById('nc-level-toast');
var btnStart = document.getElementById('nc-start-btn');
var btnResume = document.getElementById('nc-resume-btn');
var btnPlayAgain = document.getElementById('nc-play-again-btn');
var answerBtns = [
document.getElementById('nc-ans-0'),
document.getElementById('nc-ans-1'),
document.getElementById('nc-ans-2'),
document.getElementById('nc-ans-3')
];

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

/* ── Modifiers ── */
var MODIFIERS = [
{ name: '×2', apply: function(n) { return n * 2; } },
{ name: '+10', apply: function(n) { return n + 10; } },
{ name: '-5', apply: function(n) { return n - 5; } },
{ name: '÷2', apply: function(n) { return Math.round(n / 2); } }
];

function shouldHaveModifier(lvl) {
return lvl >= 6;
}

function getModifier(lvl) {
if (lvl >= 17) {
/* Dual modifier: pick two */
var a = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
var b = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
while (b === a) b = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
return {
name: a.name + ', 그다음 ' + b.name.toLowerCase(),
apply: function(n) { return b.apply(a.apply(n)); }
};
}
if (lvl >= 13) {
/* Pick from all modifiers */
return MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
}
/* L6-12: simpler modifiers only */
var simple = MODIFIERS.slice(0, 2);
return simple[Math.floor(Math.random() * simple.length)];
}

/* ── Generate equation ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pickOperation(lvl) {
var ops;
if (lvl <= 3) ops = ['+', '-'];
else if (lvl <= 5) ops = ['+', '-', '*'];
else ops = ['+', '-', '*', '/'];
return ops[randInt(0, ops.length - 1)];
}

function operandLimit(lvl) {
if (lvl <= 3) return 50;
if (lvl <= 5) return 80;
if (lvl <= 8) return 120;
if (lvl <= 12) return 220;
if (lvl <= 16) return 360;
return 520;
}

function generateEquation(lvl) {
var op = pickOperation(lvl);
var max = operandLimit(lvl);
var a;
var b;
var answer;
var symbol = op;

if (op === '/') {
b = randInt(2, Math.min(12 + lvl, 24));
answer = randInt(2, Math.min(18 + lvl * 2, 80));
a = answer * b;
symbol = '\u00F7';
} else if (op === '*') {
a = randInt(3, Math.min(12 + Math.floor(lvl / 2), 24));
b = randInt(3, Math.min(12 + Math.floor(lvl / 2), 24));
symbol = '\u00D7';
answer = a * b;
} else {
a = randInt(10, max);
b = randInt(5, Math.max(8, Math.floor(max * 0.65)));
if (op === '-' && b > a) {
var swap = a;
a = b;
b = swap;
}
switch (op) {
case '+':
answer = a + b;
break;
case '-':
answer = a - b;
break;
default:
answer = a + b;
}
}

var display = a + ' ' + symbol + ' ' + b + ' = ?';
var modifier = null;
if (shouldHaveModifier(lvl) && Math.random() < 0.7) {
modifier = getModifier(lvl);
answer = modifier.apply(answer);
}

return { display: display, answer: answer, modifier: modifier };
}

function generateChoices(correct) {
var choices = [correct];
var attempts = 0;
while (choices.length < 4 && attempts < 100) {
var offset = randInt(-10, 10);
attempts++;
if (offset === 0) continue;
var wrong = Math.round(correct + offset);
if (wrong < 0) wrong = Math.abs(wrong);
if (wrong !== correct && choices.indexOf(wrong) === -1) {
choices.push(wrong);
}
}
while (choices.length < 4) {
var fallback = Math.round(correct + choices.length + attempts + 1);
if (fallback < 0) fallback = Math.abs(fallback);
if (fallback !== correct && choices.indexOf(fallback) === -1) choices.push(fallback);
else attempts++;
}
for (var i = choices.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = choices[i];
choices[i] = choices[j];
choices[j] = temp;
}
return choices;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}


var runHistory = createRuntimeHistory('nc-history-toggle', 'nc-history-panel', 'nc-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
list.innerHTML = entries.map(function(entry) {
return '<div class="gk-runtime-history-row ' + (entry.correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong') + '">' +
'<div class="gk-runtime-history-main"><div class="gk-runtime-history-detail">' + entry.html + '</div>' +
'<div class="gk-runtime-history-status">' + (entry.correct ? 'Correct' : 'Wrong') + '</div></div></div>';
}).join('');
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel || !toggle) return;
render();
var open = panel.style.display !== 'none';
panel.style.display = open ? 'none' : '';
toggle.textContent = open ? 'Show History' : 'Hide History';
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

function recordAnswerHistory(selectedValue, correct) {
var selected = selectedValue === null || selectedValue === undefined ? 'No answer' : selectedValue;
var html = '<strong>' + runHistory.escape(state.currentEquation) + '</strong>';
if (state.currentModifier) {
html += '<div class="gk-runtime-history-sub">Rule: ' + runHistory.escape(state.currentModifier.name) + '</div>';
}
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(selected) + ' | Correct: ' + runHistory.escape(state.correctAnswer) + '</div>';
runHistory.pushHtml(correct, html);
}

function renderAnswerHistory() {
runHistory.render();
}

function resetHistoryPanel() {
runHistory.resetPanel();
}
/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
if (shouldHaveModifier(state.level)) {
elModifierBadge.style.display = '';
elModifierBadge.textContent = 'Extra';
} else {
elModifierBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('nc-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('nc-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('nc-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'nc-feedback-flash';
elFeedbackIcon.className = 'nc-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('nc-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('nc-show-check');
} else {
elFeedbackFlash.classList.add('nc-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('nc-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'nc-feedback-flash';
elFeedbackIcon.className = 'nc-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('nc-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('nc-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'nc-correct-flash' : 'nc-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('nc-correct-flash', 'nc-wrong-flash');
}, 400);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var chosenValue = parseInt(answerBtns[chosenIdx].textContent, 10);
var correct = (chosenValue === state.correctAnswer);

state.totalAnswered++;
recordAnswerHistory(chosenValue, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordAnswerHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

var eq = generateEquation(state.level);
state.correctAnswer = eq.answer;
state.currentModifier = eq.modifier;
state.currentEquation = eq.display;

elEquation.textContent = eq.display;
elEquation.style.animation = 'none';
void elEquation.offsetWidth;
elEquation.style.animation = '';

if (eq.modifier) {
elRuleModifier.textContent = eq.modifier.name;
elRuleModifier.style.display = '';
} else {
elRuleModifier.style.display = 'none';
}

var choices = generateChoices(eq.answer);
state.currentChoices = choices.slice();
for (var i = 0; i < 4; i++) {
answerBtns[i].textContent = choices[i];
}

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'nc-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'nc-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'nc-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.nc-trophy');
var title = document.querySelector('#nc-complete-overlay .nc-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = '대단해요!';
elNewBest.className = 'nc-new-best-enhanced';
elNewBest.innerHTML = 'uD83CuDF1F 대단해요!신기록!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = '수고하셨습니다!';
elNewBest.className = 'nc-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('nc-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();
renderAnswerHistory();
resetHistoryPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var NC_WIZARD_STEPS = [
{icon: '\uD83E\uDDEE', title: '방정식을 풀어보세요', desc: '답이 빠진 방정식이 표시됩니다. 정답을 선택하세요!'},
{icon: '\u2728', title: '수정자에 주의', desc: '레벨 6부터 규칙 수정자가 답을 바꿉니다 (예: "×2").'},
{icon: '\u26A1', title: '빠르게!', desc: '시간이 다 되기 전에 답하세요. 빠르면 보너스 포인트!', final: true}
];
var ncWizardStep = 0;

function renderWizardStep() {
var s = NC_WIZARD_STEPS[ncWizardStep];
var dotsHtml = '';
for (var i = 0; i < NC_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="nc-wizard-dot' + (i === ncWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? '시작' : '다음';
elWizardCard.innerHTML =
'<div class="nc-wizard-icon">' + s.icon + '</div>' +
'<div class="nc-wizard-title">' + s.title + '</div>' +
'<div class="nc-wizard-desc">' + s.desc + '</div>' +
'<div class="nc-wizard-dots">' + dotsHtml + '</div>' +
'<button class="nc-wizard-btn" id="nc-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'nc-wizard-enter 0.3s ease-out';
document.getElementById('nc-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ncWizardStep < NC_WIZARD_STEPS.length - 1) {
ncWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ncWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctAnswer = 0;
state.currentModifier = null;
state.currentEquation = '';
state.currentChoices = [];
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('nc-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('nc-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});


for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('nc-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('nc-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('nc-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('nc-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Number Crunch', '/ko/games/number-crunch/', 'nc-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
var answerIndex = -1;
if (e.key >= '1' && e.key <= '4') {
answerIndex = parseInt(e.key, 10) - 1;
} else if (e.code) {
var keyMatch = e.code.match(/^(?:Digit|Numpad)([1-4])$/);
if (keyMatch) answerIndex = parseInt(keyMatch[1], 10) - 1;
}
if (answerIndex >= 0) {
e.preventDefault();
processAnswer(answerIndex);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('nc-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Pattern Path - 두뇌 훈련 게임
URL: https://guruka.com/ko/games/pattern-path/
Description: 시각 패턴을 완성하세요.

<style>
#pattern-path-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #pattern-path-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#pp-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.pp-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#pp-instructions .pp-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#pp-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: #14b8a6;
}

#pp-instructions .pp-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #pp-instructions .pp-subtitle {
color: var(--color-dark-text-secondary);
}

#pp-instructions .pp-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #pp-instructions .pp-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#pp-instructions .pp-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: #14b8a6;
}

#pp-instructions .pp-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#pp-instructions .pp-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.pp-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.pp-personal-best strong {
color: #14b8a6;
}

/* ── Buttons ── */
.pp-btn-primary {
background: #14b8a6;
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.pp-btn-primary:hover {
background: #0d9488;
}

.pp-btn-primary:active {
transform: scale(0.97);
}

.pp-btn-secondary {
background: transparent;
color: #14b8a6;
border: 1px solid #14b8a6;
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.pp-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .pp-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#pp-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#pp-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: pp-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #pp-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes pp-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pp-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.pp-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.pp-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .pp-wizard-desc {
color: var(--color-dark-text-secondary);
}
.pp-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.pp-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.pp-wizard-dot.active {
background: #14b8a6;
transform: scale(1.3);
}
[data-theme="dark"] .pp-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .pp-wizard-dot.active {
background: #14b8a6;
}
.pp-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: #14b8a6;
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.pp-wizard-btn:hover {
background: #0d9488;
}
@media (max-width: 400px) {
#pp-wizard-card {
padding: 1.5rem 1rem;
}
.pp-wizard-icon {
font-size: 2rem;
}
.pp-wizard-title {
font-size: 1.1rem;
}
.pp-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#pp-playing {
display: none;
flex: 1;
flex-direction: column;
}

.pp-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .pp-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-stat {
text-align: center;
}

.pp-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .pp-stat-label {
color: var(--color-dark-text-secondary);
}

.pp-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.pp-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.pp-level-text {
font-weight: 600;
}

.pp-difficulty-badge {
background: #14b8a6;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.pp-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .pp-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-progress-fill {
height: 100%;
background: #14b8a6;
border-radius: 3px;
transition: width 0.3s ease;
}

.pp-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .pp-timer-bar {
background: var(--color-dark-bg-secondary);
}

.pp-timer-fill {
height: 100%;
background: #14b8a6;
border-radius: 2px;
transition: width 0.05s linear;
}

.pp-timer-fill.pp-timer-warning {
background: #ef4444;
}

/* ── Pattern Display Area ── */
.pp-pattern-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
}

.pp-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.pp-feedback-flash.pp-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.pp-feedback-flash.pp-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.pp-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.pp-feedback-icon.pp-show-check {
animation: pp-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.pp-feedback-icon.pp-show-x {
animation: pp-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes pp-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.pp-sequence-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
animation: pp-seq-enter 0.3s ease-out;
}

@keyframes pp-seq-enter {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.pp-seq-element {
width: 70px;
height: 70px;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-primary, #fff);
}

[data-theme="dark"] .pp-seq-element {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-seq-element svg {
display: block;
}

.pp-seq-missing {
border: 2px dashed #14b8a6;
background: rgba(20, 184, 166, 0.05);
font-size: 1.75rem;
font-weight: 700;
color: #14b8a6;
}

[data-theme="dark"] .pp-seq-missing {
background: rgba(20, 184, 166, 0.1);
}

.pp-seq-arrow {
font-size: 1.25rem;
color: var(--color-text-secondary);
flex-shrink: 0;
}

[data-theme="dark"] .pp-seq-arrow {
color: var(--color-dark-text-secondary);
}

/* ── Answer Choice Buttons ── */
.pp-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.pp-answer-btn {
padding: 0.75rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
}

[data-theme="dark"] .pp-answer-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.pp-answer-btn:active {
transform: scale(0.95);
}

.pp-answer-btn:hover {
border-color: #14b8a6;
background: rgba(20, 184, 166, 0.05);
}

[data-theme="dark"] .pp-answer-btn:hover {
background: rgba(20, 184, 166, 0.15);
}

.pp-answer-btn svg {
display: block;
}

.pp-answer-btn.pp-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.pp-answer-btn.pp-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.pp-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#pp-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#pp-pause-overlay .pp-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#pp-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.pp-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: pp-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .pp-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes pp-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.pp-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.pp-complete-card .pp-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.pp-final-score {
font-size: 2.5rem;
font-weight: 800;
color: #14b8a6;
margin: 0.5rem 0;
}

.pp-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: pp-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes pp-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.pp-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.pp-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .pp-complete-stat {
background: var(--color-dark-bg-secondary);
}

.pp-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.pp-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.pp-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.pp-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .pp-back-link {
color: var(--color-dark-text-secondary);
}

.pp-back-link:hover {
color: #14b8a6;
text-decoration: underline;
}

/* ── Level Up Toast ── */
.pp-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #14b8a6;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.pp-level-up-toast.pp-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#pattern-path-game {
padding: 0.5rem;
}
.pp-seq-element {
width: 56px;
height: 56px;
}
.pp-seq-arrow {
font-size: 1rem;
}
.pp-answer-btn {
padding: 0.5rem;
min-height: 64px;
}
.pp-header {
padding: 0.5rem;
gap: 0.25rem;
}
.pp-stat-value {
font-size: 1rem;
}
#pp-instructions { padding: 0.75rem 0.5rem; }
#pp-instructions .pp-icon { font-size: 2rem; margin-bottom: 0; }
#pp-instructions h2 { font-size: 1.3rem; }
#pp-instructions .pp-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#pp-instructions .pp-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#pp-instructions .pp-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.pp-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#pattern-path-game {
padding: 0.75rem;
}
.pp-seq-element {
width: 62px;
height: 62px;
}
.pp-answer-btn {
padding: 0.625rem;
min-height: 72px;
}
}
@media (max-width: 360px) {
.pp-seq-element {
width: 48px;
height: 48px;
}
.pp-seq-arrow {
font-size: 0.85rem;
}
.pp-sequence-row {
gap: 0.3rem;
}
.pp-answer-btn {
padding: 0.4rem;
min-height: 56px;
}
.pp-complete-stats {
grid-template-columns: 1fr 1fr;
}
.pp-final-score {
font-size: 2rem;
}
.pp-header {
padding: 0.375rem;
}
.pp-stat-value {
font-size: 0.9rem;
}
}
@keyframes pp-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.pp-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.pp-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: pp-confetti-fall 2.5s ease-in forwards;
}
.pp-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(20,184,166,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: pp-glow-fade 1s ease-out forwards;
}
@keyframes pp-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.pp-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: pp-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(20,184,166,0.4);
}
@keyframes pp-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#pattern-path-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#pattern-path-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #pattern-path-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#pattern-path-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#pattern-path-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="pattern-path-game">

<div id="pp-instructions">
<div class="pp-title-row"><span class="pp-icon">&#129513;</span><h2>Pattern Path</h2></div>
<p class="pp-subtitle">시각적 패턴 인식과 유동 지능</p>
<div class="pp-how-to">
<h3>플레이 방법</h3>
<ol>
<li>도형 시퀀스에 <strong>빠진 요소</strong>(?)가 표시됩니다.</li>
<li>패턴을 찾아보세요 (색상, 도형, 크기, 회전의 변화).</li>
<li>4개의 선택지에서 <strong>올바른 보완</strong>을 선택하세요.</li>


</ol>
</div>
<div id="pp-best-display" class="pp-personal-best" style="display:none;">
최고: <strong id="pp-best-score">0</strong> 포인트
</div>
<button class="pp-btn-primary" id="pp-start-btn">시작</button>
<div id="pp-challenge-banner-wrap"></div>
</div>

<div id="pp-wizard">
<div id="pp-wizard-card"></div>
</div>

<div id="pp-playing">
<div class="pp-header">
<div class="pp-stat">
<div class="pp-stat-label">점수</div>
<div class="pp-stat-value" id="pp-score">0</div>
</div>
<div class="pp-stat">
<div class="pp-stat-label">연속</div>
<div class="pp-stat-value" id="pp-streak">0</div>
</div>
<div class="pp-stat">
<div class="pp-stat-label">Level</div>
<div class="pp-stat-value" id="pp-level">1</div>
</div>
</div>
<div class="pp-level-info">
<span class="pp-level-text">Level <span id="pp-level-text">1</span></span>
<span class="pp-difficulty-badge" id="pp-difficulty-badge">색상</span>
</div>
<div class="pp-progress-bar">
<div class="pp-progress-fill" id="pp-progress-fill" style="width:0%"></div>
</div>
<div class="pp-timer-bar">
<div class="pp-timer-fill" id="pp-timer-fill" style="width:100%"></div>
</div>
<div class="pp-pattern-area">
<div class="pp-feedback-flash" id="pp-feedback-flash"></div>
<div class="pp-feedback-icon" id="pp-feedback-icon"></div>
<div class="pp-sequence-row" id="pp-sequence-row"></div>
</div>
<div class="pp-answers" id="pp-answers">
<button class="pp-answer-btn" id="pp-ans-0"></button>
<button class="pp-answer-btn" id="pp-ans-1"></button>
<button class="pp-answer-btn" id="pp-ans-2"></button>
<button class="pp-answer-btn" id="pp-ans-3"></button>
</div>
<div class="pp-playing-hint"><strong>1-4</strong>키로 답변 &middot; <strong>Esc</strong>키로 일시정지</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="pp-pause-btn" type="button">일시정지</button>
<button class="gk-finish-btn" id="pp-finish-btn" type="button">종료</button>
</div>
</div>

<div id="pp-pause-overlay">
<div class="pp-pause-text">일시정지/div>
<button class="pp-btn-primary" id="pp-resume-btn">계속하기</button>
</div>

<div id="pp-complete-overlay">
<div class="pp-complete-card">
<button class="gk-complete-close" id="pp-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="pp-trophy">&#127942;</div>
<h2>종료!/h2>
<div class="pp-final-score" id="pp-final-score">0</div>
<div id="pp-new-best" class="pp-new-best" style="display:none;">&#11088; 신기록!</div>
<div class="gk-challenge-result" id="pp-challenge-result" style="display:none;"></div>
<div class="pp-complete-stats">
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">레벨/div>
<div class="pp-complete-stat-value" id="pp-final-level">1</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">정확도/div>
<div class="pp-complete-stat-value" id="pp-final-accuracy">0%</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">연속/div>
<div class="pp-complete-stat-value" id="pp-final-streak">0</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">최고/div>
<div class="pp-complete-stat-value" id="pp-final-best">0</div>
</div>
</div>
<div class="pp-complete-actions">
<button class="pp-btn-primary" id="pp-play-again-btn">다시하기</button>
<button class="gk-runtime-history-toggle" id="pp-history-toggle" type="button">Show History</button>
<a href="/ko/games/" class="pp-back-link">&larr; 모든 게임</a>
</div>
<div class="gk-runtime-history-panel" id="pp-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="pp-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="pp-share-btn">&#128279; 결과 공유</button>
<div class="gk-share-copied" id="pp-share-copied" style="display:none;">링크가 복사되었습니다!</div>
</div>
</div>
</div>

<div class="pp-level-up-toast" id="pp-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_pattern-path_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('pp-history-toggle', 'pp-history-panel', 'pp-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctChoiceIdx: -1,
correctChoice: null,
currentChoices: []
};

/* ── Shape / Color / Size definitions ── */
var SHAPES = ['circle', 'square', 'triangle'];
var COLORS = ['#ef4444', '#3b82f6', '#22c55e', '#eab308', '#a855f7', '#f97316'];
var COLOR_NAMES = { '#ef4444': 'red', '#3b82f6': 'blue', '#22c55e': 'green', '#eab308': 'yellow', '#a855f7': 'purple', '#f97316': 'orange' };
var SIZES = [30, 45, 60];
var SIZE_NAMES = ['small', 'medium', 'large'];
var ROTATIONS = [0, 90, 180, 270];

/* ── DOM refs ── */
var elInstructions = document.getElementById('pp-instructions');
var elWizard = document.getElementById('pp-wizard');
var elWizardCard = document.getElementById('pp-wizard-card');
var elPlaying = document.getElementById('pp-playing');
var elPauseOverlay = document.getElementById('pp-pause-overlay');
var elCompleteOverlay = document.getElementById('pp-complete-overlay');
var elScore = document.getElementById('pp-score');
var elStreak = document.getElementById('pp-streak');
var elLevel = document.getElementById('pp-level');
var elLevelText = document.getElementById('pp-level-text');
var elDifficultyBadge = document.getElementById('pp-difficulty-badge');
var elProgressFill = document.getElementById('pp-progress-fill');
var elTimerFill = document.getElementById('pp-timer-fill');
var elSequenceRow = document.getElementById('pp-sequence-row');
var elFeedbackFlash = document.getElementById('pp-feedback-flash');
var elFeedbackIcon = document.getElementById('pp-feedback-icon');
var elFinalScore = document.getElementById('pp-final-score');
var elNewBest = document.getElementById('pp-new-best');
var elFinalLevel = document.getElementById('pp-final-level');
var elFinalAccuracy = document.getElementById('pp-final-accuracy');
var elFinalStreak = document.getElementById('pp-final-streak');
var elFinalBest = document.getElementById('pp-final-best');
var elBestDisplay = document.getElementById('pp-best-display');
var elBestScore = document.getElementById('pp-best-score');
var elLevelToast = document.getElementById('pp-level-toast');
var btnStart = document.getElementById('pp-start-btn');
var btnResume = document.getElementById('pp-resume-btn');
var btnPlayAgain = document.getElementById('pp-play-again-btn');
var answerBtns = [
document.getElementById('pp-ans-0'),
document.getElementById('pp-ans-1'),
document.getElementById('pp-ans-2'),
document.getElementById('pp-ans-3')
];

/* ── SVG Shape Rendering ── */
function renderShape(shape, color, size, rotation) {
var vb = '0 0 60 60';
var inner = '';
if (shape === 'circle') {
var r = Math.round(size * 25 / 60);
inner = '<circle cx="30" cy="30" r="' + r + '" fill="' + color + '"/>';
} else if (shape === 'square') {
var half = Math.round(size * 50 / 60);
var off = Math.round((60 - half) / 2);
inner = '<rect x="' + off + '" y="' + off + '" width="' + half + '" height="' + half + '" fill="' + color + '" transform="rotate(' + rotation + ' 30 30)"/>';
} else if (shape === 'triangle') {
var h = Math.round(size * 50 / 60);
var topY = 30 - Math.round(h / 2);
var botY = 30 + Math.round(h / 2);
var leftX = 30 - Math.round(h / 2);
var rightX = 30 + Math.round(h / 2);
inner = '<polygon points="30,' + topY + ' ' + rightX + ',' + botY + ' ' + leftX + ',' + botY + '" fill="' + color + '" transform="rotate(' + rotation + ' 30 30)"/>';
}
return '<svg viewBox="' + vb + '" width="' + size + '" height="' + size + '">' + inner + '</svg>';
}

/* ── Level parameters ── */
function getDisplayTime(lvl) {
if (lvl <= 3) return 10000;
if (lvl <= 6) return 8000;
if (lvl <= 9) return 7000;
if (lvl <= 12) return 6000;
if (lvl <= 16) return 5000;
return 4000;
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getSeqLength(lvl) {
if (lvl <= 6) return 3;
if (lvl <= 12) return 4;
return 5;
}

function getDifficultyLabel(lvl) {
if (lvl <= 3) return '색상';
if (lvl <= 6) return '도형';
if (lvl <= 9) return '색상 + 도형';
if (lvl <= 12) return '회전';
if (lvl <= 16) return '크기 + 수';
return '다중 속성';
}

/* ── Utility ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pick(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
return arr;
}

function cloneEl(el) {
return { shape: el.shape, color: el.color, size: el.size, rotation: el.rotation };
}

function elEquals(a, b) {
return a.shape === b.shape && a.color === b.color && a.size === b.size && a.rotation === b.rotation;
}

function indexOfValue(arr, value) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === value) return i;
}
return -1;
}

function getVisualRotation(shape, rotation) {
return shape === 'triangle' ? rotation : 0;
}

function getVisualIndexes(el) {
if (!el) return null;
var rotation = getVisualRotation(el.shape, el.rotation);
var idx = [
indexOfValue(SHAPES, el.shape),
indexOfValue(COLORS, el.color),
indexOfValue(SIZES, el.size),
indexOfValue(ROTATIONS, rotation)
];
for (var i = 0; i < idx.length; i++) {
if (idx[i] < 0) return null;
}
return idx;
}

function visuallyEquals(a, b) {
var ai = getVisualIndexes(a);
var bi = getVisualIndexes(b);
return !!ai && !!bi &&
ai[0] === bi[0] &&
ai[1] === bi[1] &&
ai[2] === bi[2] &&
ai[3] === bi[3];
}

function createChoiceSeenMatrix() {
var seen = [];
for (var s = 0; s < SHAPES.length; s++) {
seen[s] = [];
for (var c = 0; c < COLORS.length; c++) {
seen[s][c] = [];
for (var z = 0; z < SIZES.length; z++) {
seen[s][c][z] = [];
for (var r = 0; r < ROTATIONS.length; r++) {
seen[s][c][z][r] = false;
}
}
}
}
return seen;
}

function markChoiceSeen(seen, el) {
var idx = getVisualIndexes(el);
if (!idx) return false;
if (seen[idx[0]][idx[1]][idx[2]][idx[3]]) return false;
seen[idx[0]][idx[1]][idx[2]][idx[3]] = true;
return true;
}

/* ── Pattern Generation ── */
function generatePattern(lvl) {
var seqLen = getSeqLength(lvl);
var sequence = [];
var correct;

if (lvl <= 3) {
/* Single attribute: color changes in sequence */
var colorSeq = shuffle(COLORS.slice()).slice(0, seqLen + 1);
var baseShape = pick(SHAPES);
var baseSize = 45;
for (var i = 0; i <= seqLen; i++) {
sequence.push({ shape: baseShape, color: colorSeq[i % colorSeq.length], size: baseSize, rotation: 0 });
}
correct = sequence.pop();

} else if (lvl <= 6) {
/* Shape patterns: circle -> square -> triangle -> ... */
var baseColor = pick(COLORS);
var baseSize2 = 45;
for (var i = 0; i <= seqLen; i++) {
sequence.push({ shape: SHAPES[i % SHAPES.length], color: baseColor, size: baseSize2, rotation: 0 });
}
correct = sequence.pop();

} else if (lvl <= 9) {
/* 2-attribute: color + shape both change */
var colorPool = shuffle(COLORS.slice());
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorPool[i % colorPool.length],
size: 45,
rotation: 0
});
}
correct = sequence.pop();

} else if (lvl <= 12) {
/* Rotation patterns: shapes rotate 0 -> 90 -> 180 -> 270 */
var baseShape3 = 'triangle';
var baseColor3 = pick(COLORS);
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: baseShape3,
color: baseColor3,
size: 45,
rotation: ROTATIONS[i % ROTATIONS.length]
});
}
correct = sequence.pop();

} else if (lvl <= 16) {
/* Size + shape changes */
var colorBase = pick(COLORS);
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorBase,
size: SIZES[i % SIZES.length],
rotation: 0
});
}
correct = sequence.pop();

} else {
/* L17-20: 3 attributes changing (shape + color + size) */
var colorPool2 = shuffle(COLORS.slice());
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorPool2[i % colorPool2.length],
size: SIZES[i % SIZES.length],
rotation: ROTATIONS[i % ROTATIONS.length]
});
}
correct = sequence.pop();
}

return { sequence: sequence, correct: correct };
}

function buildChoiceCandidates(correct, lvl) {
var shapes = [correct.shape];
var colors = [correct.color];
var sizes = [correct.size];
var rotations = [correct.rotation];

if (lvl <= 3) {
colors = COLORS.slice();
} else if (lvl <= 6) {
shapes = SHAPES.slice();
colors = COLORS.slice();
} else if (lvl <= 9) {
shapes = SHAPES.slice();
colors = COLORS.slice();
} else if (lvl <= 12) {
rotations = ROTATIONS.slice();
} else if (lvl <= 16) {
shapes = SHAPES.slice();
sizes = SIZES.slice();
} else {
shapes = SHAPES.slice();
colors = COLORS.slice();
sizes = SIZES.slice();
rotations = ROTATIONS.slice();
}

var candidates = [];
for (var s = 0; s < shapes.length; s++) {
for (var c = 0; c < colors.length; c++) {
for (var z = 0; z < sizes.length; z++) {
for (var r = 0; r < rotations.length; r++) {
candidates.push({
shape: shapes[s],
color: colors[c],
size: sizes[z],
rotation: rotations[r]
});
}
}
}
}
return candidates;
}

function addUniqueChoice(choices, seen, candidate) {
if (!markChoiceSeen(seen, candidate)) return false;
choices.push(cloneEl(candidate));
return true;
}

function generateChoices(correct, lvl) {
var choices = [];
var seen = createChoiceSeenMatrix();
addUniqueChoice(choices, seen, correct);
var candidates = shuffle(buildChoiceCandidates(correct, lvl));

for (var i = 0; i < candidates.length && choices.length < 4; i++) {
addUniqueChoice(choices, seen, candidates[i]);
}

if (choices.length < 4) {
var fallback = shuffle(buildChoiceCandidates(correct, MAX_LEVEL));
for (var j = 0; j < fallback.length && choices.length < 4; j++) {
addUniqueChoice(choices, seen, fallback[j]);
}
}

return shuffle(choices);
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
elDifficultyBadge.textContent = getDifficultyLabel(state.level);
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('pp-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('pp-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('pp-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'pp-feedback-flash';
elFeedbackIcon.className = 'pp-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('pp-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('pp-show-check');
} else {
elFeedbackFlash.classList.add('pp-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('pp-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'pp-feedback-flash';
elFeedbackIcon.className = 'pp-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('pp-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('pp-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'pp-correct-flash' : 'pp-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('pp-correct-flash', 'pp-wrong-flash');
}, 400);
}

/* ── Render sequence display ── */
function renderSequence(sequence) {
var html = '';
for (var i = 0; i < sequence.length; i++) {
var el = sequence[i];
html += '<div class="pp-seq-element">';
html += renderShape(el.shape, el.color, el.size, el.rotation);
html += '</div>';
if (i < sequence.length) {
html += '<div class="pp-seq-arrow">\u2192</div>';
}
}
/* Missing element placeholder */
html += '<div class="pp-seq-element pp-seq-missing">?</div>';
elSequenceRow.innerHTML = html;
}

/* ── Render choice buttons ── */
function renderChoices(choices) {
for (var i = 0; i < 4; i++) {
var el = choices[i];
answerBtns[i].innerHTML = renderShape(el.shape, el.color, el.size, el.rotation);
}
}

function recordPatternHistory(selectedChoice, correct) {
var html = '<strong>Missing shape</strong>';
html += '<div class="gk-runtime-history-sub">Your: ' + (selectedChoice ? renderShape(selectedChoice.shape, selectedChoice.color, selectedChoice.size, selectedChoice.rotation) : 'No answer') + ' | Correct: ' + renderShape(state.correctChoice.shape, state.correctChoice.color, state.correctChoice.size, state.correctChoice.rotation) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var selectedChoice = state.currentChoices[chosenIdx];
var correct = selectedChoice ? visuallyEquals(selectedChoice, state.correctChoice) : false;

state.totalAnswered++;
recordPatternHistory(selectedChoice, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 2000) {
points += Math.floor((2000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordPatternHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

var pattern = generatePattern(state.level);
var choices = generateChoices(pattern.correct, state.level);

/* Find correct choice index */
state.correctChoice = cloneEl(pattern.correct);
state.currentChoices = choices.map(cloneEl);
state.correctChoiceIdx = -1;
for (var i = 0; i < choices.length; i++) {
if (visuallyEquals(choices[i], state.correctChoice)) {
state.correctChoiceIdx = i;
break;
}
}

renderSequence(pattern.sequence);
renderChoices(choices);

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#14b8a6','#ef4444','#22c55e','#3b82f6','#a855f7','#f97316'];
var container = document.createElement('div');
container.className = 'pp-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'pp-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'pp-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.pp-trophy');
var title = document.querySelector('#pp-complete-overlay .pp-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = '대단해요!';
elNewBest.className = 'pp-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F 대단해요!신기록!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = '수고하셨습니다!';
elNewBest.className = 'pp-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('pp-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var PP_WIZARD_STEPS = [
{icon: '\uD83E\uDDE9', title: '빠진 패턴을 찾아보세요', desc: '도형 시퀀스에 빠진 요소가 표시됩니다. 패턴을 찾아보세요!'},
{icon: '\uD83C\uDFA8', title: '속성이 변합니다', desc: '패턴에는 색상, 도형, 크기, 회전이 포함됩니다. 높은 레벨에서는 여러 속성이 조합됩니다.'},
{icon: '\u26A1', title: '빠르게', desc: '시간이 다 되기 전에 올바른 도형을 선택하세요. 빠른 답변과 연속 정답으로 보너스 포인트를 획득할 수 있습니다!', final: true}
];
var ppWizardStep = 0;

function renderWizardStep() {
var s = PP_WIZARD_STEPS[ppWizardStep];
var dotsHtml = '';
for (var i = 0; i < PP_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="pp-wizard-dot' + (i === ppWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? '시작' : '다음';
elWizardCard.innerHTML =
'<div class="pp-wizard-icon">' + s.icon + '</div>' +
'<div class="pp-wizard-title">' + s.title + '</div>' +
'<div class="pp-wizard-desc">' + s.desc + '</div>' +
'<div class="pp-wizard-dots">' + dotsHtml + '</div>' +
'<button class="pp-wizard-btn" id="pp-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'pp-wizard-enter 0.3s ease-out';
document.getElementById('pp-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ppWizardStep < PP_WIZARD_STEPS.length - 1) {
ppWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ppWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctChoiceIdx = -1;
state.correctChoice = null;
state.currentChoices = [];
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('pp-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('pp-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('pp-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('pp-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('pp-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('pp-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Pattern Path', '/ko/games/pattern-path/', 'pp-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key >= '1' && e.key <= '4') {
e.preventDefault();
processAnswer(parseInt(e.key, 10) - 1);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('pp-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Quick Sort - 두뇌 훈련 게임
URL: https://guruka.com/ko/games/quick-sort/
Description: 바뀌는 규칙으로 분류하세요.

<style>
#quick-sort-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #quick-sort-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#qs-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.qs-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#qs-instructions .qs-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#qs-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: #f97316;
}

#qs-instructions .qs-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #qs-instructions .qs-subtitle {
color: var(--color-dark-text-secondary);
}

#qs-instructions .qs-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #qs-instructions .qs-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#qs-instructions .qs-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: #f97316;
}

#qs-instructions .qs-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#qs-instructions .qs-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.qs-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.qs-personal-best strong {
color: #f97316;
}

/* ── Buttons ── */
.qs-btn-primary {
background: #f97316;
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.qs-btn-primary:hover {
background: #ea580c;
}

.qs-btn-primary:active {
transform: scale(0.97);
}

.qs-btn-secondary {
background: transparent;
color: #f97316;
border: 1px solid #f97316;
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.qs-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .qs-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#qs-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#qs-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: qs-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #qs-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes qs-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.qs-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.qs-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.qs-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .qs-wizard-desc {
color: var(--color-dark-text-secondary);
}
.qs-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.qs-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.qs-wizard-dot.active {
background: #f97316;
transform: scale(1.3);
}
[data-theme="dark"] .qs-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .qs-wizard-dot.active {
background: #f97316;
}
.qs-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: #f97316;
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.qs-wizard-btn:hover {
background: #ea580c;
}
@media (max-width: 400px) {
#qs-wizard-card {
padding: 1.5rem 1rem;
}
.qs-wizard-icon {
font-size: 2rem;
}
.qs-wizard-title {
font-size: 1.1rem;
}
.qs-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#qs-playing {
display: none;
flex: 1;
flex-direction: column;
}

.qs-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .qs-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.qs-stat {
text-align: center;
}

.qs-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .qs-stat-label {
color: var(--color-dark-text-secondary);
}

.qs-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.qs-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.qs-level-text {
font-weight: 600;
}

.qs-rule-change-badge {
background: #f97316;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.qs-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .qs-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.qs-progress-fill {
height: 100%;
background: #f97316;
border-radius: 3px;
transition: width 0.3s ease;
}

.qs-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .qs-timer-bar {
background: var(--color-dark-bg-secondary);
}

.qs-timer-fill {
height: 100%;
background: #f97316;
border-radius: 2px;
transition: width 0.05s linear;
}

.qs-timer-fill.qs-timer-warning {
background: #ef4444;
}

/* ── Rule Indicator ── */
.qs-rule-indicator {
background: #f97316;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
text-align: center;
margin-bottom: 1rem;
letter-spacing: 0.02em;
}

/* ── Stimulus Area ── */
.qs-stimulus-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 160px;
position: relative;
}

.qs-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.qs-feedback-flash.qs-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.qs-feedback-flash.qs-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.qs-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.qs-feedback-icon.qs-show-check {
animation: qs-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.qs-feedback-icon.qs-show-x {
animation: qs-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes qs-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.qs-stimulus {
font-size: 3rem;
font-weight: 700;
line-height: 1.2;
animation: qs-stim-enter 0.2s ease-out;
text-align: center;
}

@keyframes qs-stim-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

/* ── Sort Buttons (Left / Right) ── */
.qs-sort-buttons {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.qs-sort-btn {
flex: 1;
padding: 1.1rem 0.75rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}

[data-theme="dark"] .qs-sort-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.qs-sort-btn:active {
transform: scale(0.95);
}

.qs-btn-left {
border-left: 4px solid #f97316;
}

.qs-btn-left:hover {
border-color: #f97316;
background: rgba(249,115,22,0.05);
}

[data-theme="dark"] .qs-btn-left:hover {
background: rgba(249,115,22,0.15);
}

.qs-btn-right {
border-right: 4px solid #f97316;
}

.qs-btn-right:hover {
border-color: #f97316;
background: rgba(249,115,22,0.05);
}

[data-theme="dark"] .qs-btn-right:hover {
background: rgba(249,115,22,0.15);
}

.qs-sort-btn .qs-arrow {
font-size: 1.3rem;
opacity: 0.6;
}

.qs-sort-btn .qs-label {
font-size: 1rem;
}

.qs-sort-btn.qs-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.qs-sort-btn.qs-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.qs-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#qs-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#qs-pause-overlay .qs-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#qs-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.qs-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: qs-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .qs-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes qs-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.qs-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.qs-complete-card .qs-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.qs-final-score {
font-size: 2.5rem;
font-weight: 800;
color: #f97316;
margin: 0.5rem 0;
}

.qs-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: qs-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes qs-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.qs-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.qs-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .qs-complete-stat {
background: var(--color-dark-bg-secondary);
}

.qs-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.qs-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.qs-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.qs-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .qs-back-link {
color: var(--color-dark-text-secondary);
}

.qs-back-link:hover {
color: #f97316;
text-decoration: underline;
}

/* ── Level Up Toast ── */
.qs-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #f97316;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.qs-level-up-toast.qs-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Rule Change Toast ── */
.qs-rule-toast {
position: fixed;
top: 4.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #7c3aed;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 0.95rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.qs-rule-toast.qs-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#quick-sort-game {
padding: 0.5rem;
}
.qs-stimulus {
font-size: 2.5rem;
}
.qs-sort-btn {
padding: 0.85rem 0.5rem;
font-size: 1rem;
min-height: 52px;
}
.qs-sort-btn .qs-label {
font-size: 0.9rem;
}
.qs-header {
padding: 0.5rem;
gap: 0.25rem;
}
.qs-stat-value {
font-size: 1rem;
}
.qs-rule-indicator {
font-size: 0.85rem;
padding: 0.4rem 0.75rem;
}
#qs-instructions { padding: 0.75rem 0.5rem; }
#qs-instructions .qs-icon { font-size: 2rem; margin-bottom: 0; }
#qs-instructions h2 { font-size: 1.3rem; }
#qs-instructions .qs-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#qs-instructions .qs-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#qs-instructions .qs-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.qs-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#quick-sort-game {
padding: 0.75rem;
}
.qs-stimulus {
font-size: 2.75rem;
}
.qs-sort-btn {
padding: 1rem 0.5rem;
}
}
@media (max-width: 360px) {
.qs-stimulus {
font-size: 2rem;
}
.qs-sort-btn {
padding: 0.7rem 0.4rem;
font-size: 0.9rem;
min-height: 48px;
}
.qs-sort-btn .qs-label {
font-size: 0.8rem;
}
.qs-sort-btn .qs-arrow {
font-size: 1.1rem;
}
.qs-complete-stats {
grid-template-columns: 1fr 1fr;
}
.qs-final-score {
font-size: 2rem;
}
.qs-header {
padding: 0.375rem;
}
.qs-stat-value {
font-size: 0.9rem;
}
}
@keyframes qs-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.qs-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.qs-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: qs-confetti-fall 2.5s ease-in forwards;
}
.qs-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(249,115,22,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: qs-glow-fade 1s ease-out forwards;
}
@keyframes qs-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.qs-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: qs-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(249,115,22,0.4);
}
@keyframes qs-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#quick-sort-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#quick-sort-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #quick-sort-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#quick-sort-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#quick-sort-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="quick-sort-game">

<div id="qs-instructions">
<div class="qs-title-row"><span class="qs-icon">&#128450;</span><h2>Quick Sort</h2></div>
<p class="qs-subtitle">카테고리 분류 속도와 작업 전환</p>
<div class="qs-how-to">
<h3>플레이 방법</h3>
<ol>
<li>아이템(숫자, 도형, 또는 단어)이 화면에 표시됩니다.</li>
<li>2개의 카테고리가 <strong>좌우</strong>에 표시됩니다.</li>
<li>올바른 쪽을 탭하여 아이템을 분류하세요.</li>
<li>분류 규칙이 몇 라운드마다 <strong>전환됩니다</strong>!</li>

</ol>
</div>
<div id="qs-best-display" class="qs-personal-best" style="display:none;">
최고: <strong id="qs-best-score">0</strong> 포인트
</div>
<button class="qs-btn-primary" id="qs-start-btn">시작</button>
<div id="qs-challenge-banner-wrap"></div>
</div>

<div id="qs-wizard">
<div id="qs-wizard-card"></div>
</div>

<div id="qs-playing">
<div class="qs-header">
<div class="qs-stat">
<div class="qs-stat-label">점수</div>
<div class="qs-stat-value" id="qs-score">0</div>
</div>
<div class="qs-stat">
<div class="qs-stat-label">연속</div>
<div class="qs-stat-value" id="qs-streak">0</div>
</div>
<div class="qs-stat">
<div class="qs-stat-label">Level</div>
<div class="qs-stat-value" id="qs-level">1</div>
</div>
</div>
<div class="qs-level-info">
<span class="qs-level-text">Level <span id="qs-level-text">1</span></span>
<span class="qs-rule-change-badge" id="qs-rule-badge" style="display:none;">규칙 전환</span>
</div>
<div class="qs-progress-bar">
<div class="qs-progress-fill" id="qs-progress-fill" style="width:0%"></div>
</div>
<div class="qs-timer-bar">
<div class="qs-timer-fill" id="qs-timer-fill" style="width:100%"></div>
</div>
<div class="qs-rule-indicator" id="qs-rule-indicator">분류: 짝수 / 홀수</div>
<div class="qs-stimulus-area">
<div class="qs-feedback-flash" id="qs-feedback-flash"></div>
<div class="qs-feedback-icon" id="qs-feedback-icon"></div>
<div class="qs-stimulus" id="qs-stimulus"></div>
</div>
<div class="qs-sort-buttons">
<button class="qs-sort-btn qs-btn-left" id="qs-btn-left">
<span class="qs-arrow">1</span>
<span class="qs-label" id="qs-label-left">짝수</span>
</button>
<button class="qs-sort-btn qs-btn-right" id="qs-btn-right">
<span class="qs-label" id="qs-label-right">홀수</span>
<span class="qs-arrow">2</span>
</button>
</div>
<div class="qs-playing-hint"><strong>1</strong>키로 왼쪽 &middot; <strong>2</strong>키로 오른쪽 &middot; <strong>Esc</strong>키로 일시정지</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="qs-pause-btn" type="button">일시정지</button>
<button class="gk-finish-btn" id="qs-finish-btn" type="button">종료</button>
</div>
</div>

<div id="qs-pause-overlay">
<div class="qs-pause-text">일시정지/div>
<button class="qs-btn-primary" id="qs-resume-btn">계속하기</button>
</div>

<div id="qs-complete-overlay">
<div class="qs-complete-card">
<button class="gk-complete-close" id="qs-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="qs-trophy">&#127942;</div>
<h2>종료!/h2>
<div class="qs-final-score" id="qs-final-score">0</div>
<div id="qs-new-best" class="qs-new-best" style="display:none;">&#11088; 신기록!</div>
<div class="gk-challenge-result" id="qs-challenge-result" style="display:none;"></div>
<div class="qs-complete-stats">
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">레벨/div>
<div class="qs-complete-stat-value" id="qs-final-level">1</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">정확도/div>
<div class="qs-complete-stat-value" id="qs-final-accuracy">0%</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">연속/div>
<div class="qs-complete-stat-value" id="qs-final-streak">0</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">최고/div>
<div class="qs-complete-stat-value" id="qs-final-best">0</div>
</div>
</div>
<div class="qs-complete-actions">
<button class="qs-btn-primary" id="qs-play-again-btn">다시하기</button>
<button class="gk-runtime-history-toggle" id="qs-history-toggle" type="button">Show History</button>
<a href="/ko/games/" class="qs-back-link">&larr; 모든 게임</a>
</div>
<div class="gk-runtime-history-panel" id="qs-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="qs-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="qs-share-btn">&#128279; 결과 공유</button>
<div class="gk-share-copied" id="qs-share-copied" style="display:none;">링크가 복사되었습니다!</div>
</div>
</div>
</div>

<div class="qs-level-up-toast" id="qs-level-toast">Level Up!</div>
<div class="qs-rule-toast" id="qs-rule-toast">새 규칙!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_quick-sort_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('qs-history-toggle', 'qs-history-panel', 'qs-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
roundInRule: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctSide: null,
currentRule: null,
currentStimulus: null,
ruleIndex: 0
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('qs-instructions');
var elWizard = document.getElementById('qs-wizard');
var elWizardCard = document.getElementById('qs-wizard-card');
var elPlaying = document.getElementById('qs-playing');
var elPauseOverlay = document.getElementById('qs-pause-overlay');
var elCompleteOverlay = document.getElementById('qs-complete-overlay');
var elScore = document.getElementById('qs-score');
var elStreak = document.getElementById('qs-streak');
var elLevel = document.getElementById('qs-level');
var elLevelText = document.getElementById('qs-level-text');
var elRuleBadge = document.getElementById('qs-rule-badge');
var elProgressFill = document.getElementById('qs-progress-fill');
var elTimerFill = document.getElementById('qs-timer-fill');
var elRuleIndicator = document.getElementById('qs-rule-indicator');
var elStimulus = document.getElementById('qs-stimulus');
var elFeedbackFlash = document.getElementById('qs-feedback-flash');
var elFeedbackIcon = document.getElementById('qs-feedback-icon');
var elLabelLeft = document.getElementById('qs-label-left');
var elLabelRight = document.getElementById('qs-label-right');
var elBtnLeft = document.getElementById('qs-btn-left');
var elBtnRight = document.getElementById('qs-btn-right');
var elFinalScore = document.getElementById('qs-final-score');
var elNewBest = document.getElementById('qs-new-best');
var elFinalLevel = document.getElementById('qs-final-level');
var elFinalAccuracy = document.getElementById('qs-final-accuracy');
var elFinalStreak = document.getElementById('qs-final-streak');
var elFinalBest = document.getElementById('qs-final-best');
var elBestDisplay = document.getElementById('qs-best-display');
var elBestScore = document.getElementById('qs-best-score');
var elLevelToast = document.getElementById('qs-level-toast');
var elRuleToast = document.getElementById('qs-rule-toast');
var btnStart = document.getElementById('qs-start-btn');
var btnResume = document.getElementById('qs-resume-btn');
var btnPlayAgain = document.getElementById('qs-play-again-btn');

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getRuleChangeInterval(lvl) {
if (lvl <= 6) return 999;
if (lvl <= 9) return 4;
if (lvl <= 12) return 3;
if (lvl <= 16) return 3;
return 2;
}

/* ── Helpers ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pick(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
return arr;
}

/* ── Rule definitions ── */
var SHAPES = ['원', '사각', '삼각'];
var FRUITS = ['사과', '바나나', '체리'];
var NOT_FRUITS = ['자동차', '책', '책상'];
var ALL_WORDS = FRUITS.concat(NOT_FRUITS);

function ruleEvenOdd() {
return {
name: '짝수 / 홀수',
leftLabel: '짝수',
rightLabel: '홀수',
generate: function() {
var n = randInt(1, 50);
return {
display: String(n),
correctSide: (n % 2 === 0) ? 'left' : 'right'
};
}
};
}

function ruleBigSmall() {
return {
name: '큰 / 작은',
leftLabel: '큰 (\u226550)',
rightLabel: '작은 (<50)',
generate: function() {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n >= 50) ? 'left' : 'right'
};
}
};
}

function ruleShapeOrNot() {
return {
name: '도형 / 도형 아님',
leftLabel: '도형',
rightLabel: '도형 아님',
generate: function() {
var isShape = Math.random() < 0.5;
var item;
if (isShape) {
item = pick(SHAPES);
} else {
item = String(randInt(1, 100));
}
return {
display: item,
correctSide: isShape ? 'left' : 'right'
};
}
};
}

function ruleFruitOrNot() {
return {
name: '과일 / 과일 아님',
leftLabel: '과일',
rightLabel: '과일 아님',
generate: function() {
var item = pick(ALL_WORDS);
var isFruit = FRUITS.indexOf(item) !== -1;
return {
display: item,
correctSide: isFruit ? 'left' : 'right'
};
}
};
}

function ruleCompoundEvenBig() {
return {
name: '짝수이고 큰 / 기타',
leftLabel: '짝수+큰',
rightLabel: '기타',
generate: function() {
var n = randInt(1, 100);
var isEvenAndBig = (n % 2 === 0) && (n >= 50);
return {
display: String(n),
correctSide: isEvenAndBig ? 'left' : 'right'
};
}
};
}

function ruleCompoundOddSmall() {
return {
name: '홀수이고 작은 / 기타',
leftLabel: '홀수+작은',
rightLabel: '기타',
generate: function() {
var n = randInt(1, 100);
var isOddAndSmall = (n % 2 !== 0) && (n < 50);
return {
display: String(n),
correctSide: isOddAndSmall ? 'left' : 'right'
};
}
};
}

function ruleCompoundFruitBig() {
return {
name: '과일 또는 큰 / 기타',
leftLabel: '과일/큰',
rightLabel: '기타',
generate: function() {
var useWord = Math.random() < 0.4;
if (useWord) {
var item = pick(ALL_WORDS);
var isFruit = FRUITS.indexOf(item) !== -1;
return {
display: item,
correctSide: isFruit ? 'left' : 'right'
};
} else {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n >= 50) ? 'left' : 'right'
};
}
}
};
}

function ruleCompoundShapeEven() {
return {
name: '도형 또는 짝수 / 기타',
leftLabel: '도형/짝수',
rightLabel: '기타',
generate: function() {
var useShape = Math.random() < 0.35;
if (useShape) {
var isShape = Math.random() < 0.5;
var item = isShape ? pick(SHAPES) : String(randInt(1, 50) * 2 - 1);
return {
display: item,
correctSide: isShape ? 'left' : 'right'
};
} else {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n % 2 === 0) ? 'left' : 'right'
};
}
}
};
}

/* ── Get available rules for level ── */
function getRulesForLevel(lvl) {
if (lvl <= 3) {
return [ruleEvenOdd];
} else if (lvl <= 6) {
return [ruleBigSmall];
} else if (lvl <= 9) {
return [ruleEvenOdd, ruleBigSmall];
} else if (lvl <= 12) {
return [ruleShapeOrNot, ruleEvenOdd];
} else if (lvl <= 16) {
return [ruleFruitOrNot, ruleEvenOdd, ruleBigSmall];
} else {
return [ruleCompoundEvenBig, ruleCompoundOddSmall, ruleCompoundFruitBig, ruleCompoundShapeEven];
}
}

function pickNewRule(lvl, prevRuleName) {
var factories = getRulesForLevel(lvl);
if (factories.length === 1) {
return factories[0]();
}
var attempts = 0;
var rule;
do {
rule = pick(factories)();
attempts++;
} while (rule.name === prevRuleName && attempts < 10);
return rule;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
var rulesForLevel = getRulesForLevel(state.level);
if (rulesForLevel.length > 1) {
elRuleBadge.style.display = '';
elRuleBadge.textContent = '규칙 전환';
} else {
elRuleBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('qs-playing', state.score, challenge.score);
}

/* ── Update rule display ── */
function updateRuleDisplay() {
if (!state.currentRule) return;
elRuleIndicator.textContent = '분류: ' + state.currentRule.name;
elLabelLeft.textContent = state.currentRule.leftLabel;
elLabelRight.textContent = state.currentRule.rightLabel;
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('qs-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('qs-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'qs-feedback-flash';
elFeedbackIcon.className = 'qs-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('qs-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('qs-show-check');
} else {
elFeedbackFlash.classList.add('qs-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('qs-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'qs-feedback-flash';
elFeedbackIcon.className = 'qs-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('qs-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('qs-toast-show');
}, 1500);
}

/* ── Show rule-change toast ── */
function showRuleToast(ruleName) {
elRuleToast.textContent = '새 규칙: ' + ruleName;
elRuleToast.classList.add('qs-toast-show');
setTimeout(function() {
elRuleToast.classList.remove('qs-toast-show');
}, 1800);
}

/* ── Flash sort button ── */
function flashSortBtn(side, correct) {
var btn = side === 'left' ? elBtnLeft : elBtnRight;
btn.classList.add(correct ? 'qs-correct-flash' : 'qs-wrong-flash');
setTimeout(function() {
btn.classList.remove('qs-correct-flash', 'qs-wrong-flash');
}, 400);
}

function sortSideLabel(side) {
if (!state.currentRule) return side || 'No answer';
if (side === 'left') return state.currentRule.leftLabel;
if (side === 'right') return state.currentRule.rightLabel;
return 'No answer';
}

function recordSortHistory(chosenSide, correct) {
var html = '<strong>' + runHistory.escape(state.currentRule ? state.currentRule.name : 'Sort rule') + '</strong>';
html += '<div class="gk-runtime-history-sub">Item: ' + runHistory.escape(state.currentStimulus) + '</div>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(sortSideLabel(chosenSide)) + ' | Correct: ' + runHistory.escape(sortSideLabel(state.correctSide)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenSide) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var correct = (chosenSide === state.correctSide);

state.totalAnswered++;
recordSortHistory(chosenSide, correct);
flashSortBtn(chosenSide, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundInRule = 0;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordSortHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundInRule = 0;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.roundInRule++;
state.answered = false;

/* Check if rule should change mid-level */
var ruleInterval = getRuleChangeInterval(state.level);
if (state.roundInRule > ruleInterval && getRulesForLevel(state.level).length > 1) {
state.roundInRule = 1;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showRuleToast(state.currentRule.name);
}

/* Generate stimulus */
var item = state.currentRule.generate();
state.correctSide = item.correctSide;
state.currentStimulus = item.display;

elStimulus.textContent = item.display;
elStimulus.style.animation = 'none';
void elStimulus.offsetWidth;
elStimulus.style.animation = '';

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'qs-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'qs-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'qs-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.qs-trophy');
var title = document.querySelector('#qs-complete-overlay .qs-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = '대단해요!';
elNewBest.className = 'qs-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F 대단해요!신기록!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = '수고하셨습니다!';
elNewBest.className = 'qs-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('qs-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var QS_WIZARD_STEPS = [
{icon: '\uD83D\uDCC2', title: '아이템을 빠르게 분류', desc: '아이템이 화면에 표시됩니다. 올바른 카테고리(왼쪽 또는 오른쪽)를 탭하여 분류하세요!'},
{icon: '\uD83D\uDD00', title: '규칙이 바뀝니다!', desc: '몇 라운드마다 분류 규칙이 전환됩니다. 방심하지 말고 빠르게 대응하세요!'},
{icon: '\u26A1', title: '빠르게', desc: '시간이 다 되기 전에 답하세요. 빠른 답변과 연속 정답으로 보너스 포인트를 획득할 수 있습니다!', final: true}
];
var qsWizardStep = 0;

function renderWizardStep() {
var s = QS_WIZARD_STEPS[qsWizardStep];
var dotsHtml = '';
for (var i = 0; i < QS_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="qs-wizard-dot' + (i === qsWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? '시작' : '다음';
elWizardCard.innerHTML =
'<div class="qs-wizard-icon">' + s.icon + '</div>' +
'<div class="qs-wizard-title">' + s.title + '</div>' +
'<div class="qs-wizard-desc">' + s.desc + '</div>' +
'<div class="qs-wizard-dots">' + dotsHtml + '</div>' +
'<button class="qs-wizard-btn" id="qs-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'qs-wizard-enter 0.3s ease-out';
document.getElementById('qs-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (qsWizardStep < QS_WIZARD_STEPS.length - 1) {
qsWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
qsWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.roundInRule = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctSide = null;
state.currentRule = null;
state.currentStimulus = null;
state.ruleIndex = 0;
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
state.currentRule = pickNewRule(state.level, null);
state.roundInRule = 0;
updateRuleDisplay();
showScreen('playing');
GK.renderChallengeBar('qs-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('qs-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

elBtnLeft.addEventListener('click', function() {
processAnswer('left');
});

elBtnRight.addEventListener('click', function() {
processAnswer('right');
});

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('qs-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('qs-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('qs-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('qs-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Quick Sort', '/ko/games/quick-sort/', 'qs-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key === '1') {
e.preventDefault();
processAnswer('left');
} else if (e.key === '2') {
e.preventDefault();
processAnswer('right');
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('qs-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Sequence Recall - 두뇌 훈련 게임
URL: https://guruka.com/ko/games/sequence-recall/
Description: 색 순서를 반복하세요.

<style>
#sequence-recall-game {
max-width: 600px;
margin: 0 auto;
padding: 1.5rem 1rem 3rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary, #1a2332);
-webkit-tap-highlight-color: transparent;
}

#sequence-recall-game * {
box-sizing: border-box;
}

#sequence-recall-game .sr-card {
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

[data-theme="dark"] #sequence-recall-game .sr-card {
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

#sequence-recall-game .sr-title {
font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 1.75rem;
font-weight: 700;
text-align: center;
margin: 0 0 0.25rem;
letter-spacing: -0.025em;
}

#sequence-recall-game .sr-subtitle {
text-align: center;
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.95rem;
margin: 0 0 1.5rem;
}

#sequence-recall-game .sr-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#sequence-recall-game .sr-icon {
display: flex;
justify-content: center;
margin-bottom: 0;
font-size: 2rem;
}

#sequence-recall-game .sr-instructions-list {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
}

#sequence-recall-game .sr-instructions-list li {
padding: 0.5rem 0;
padding-left: 1.75rem;
position: relative;
font-size: 0.95rem;
color: var(--color-text-primary, #1a2332);
line-height: 1.5;
}

#sequence-recall-game .sr-instructions-list li::before {
content: attr(data-num);
position: absolute;
left: 0;
top: 0.5rem;
width: 1.25rem;
height: 1.25rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 50%;
font-size: 0.7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}

#sequence-recall-game .sr-best-score {
text-align: center;
padding: 0.75rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
margin-bottom: 1.25rem;
font-size: 0.9rem;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-best-score strong {
color: var(--color-text-primary, #1a2332);
font-weight: 700;
}

#sequence-recall-game .sr-btn-primary {
display: block;
width: 100%;
padding: 0.875rem 1.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.5rem;
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
text-align: center;
text-decoration: none;
}

#sequence-recall-game .sr-btn-primary:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#sequence-recall-game .sr-btn-primary:active {
transform: translateY(0);
}

#sequence-recall-game .sr-btn-secondary {
display: inline-block;
margin-top: 0.75rem;
padding: 0.5rem 1rem;
background: transparent;
color: var(--color-primary, #0f9072);
border: 1px solid var(--color-primary, #0f9072);
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
text-align: center;
}

#sequence-recall-game .sr-btn-secondary:hover {
background: color-mix(in srgb, var(--color-primary, #0f9072) 10%, transparent);
}

/* Wizard overlay */
#sequence-recall-game .sr-wizard-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#sequence-recall-game .sr-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sr-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-card {
background: var(--color-dark-bg-primary, #1e293b);
color: var(--color-dark-text-primary, #e2e8f0);
}
@keyframes sr-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
#sequence-recall-game .sr-wizard-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
#sequence-recall-game .sr-wizard-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
#sequence-recall-game .sr-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary, #4b5b6d);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-desc {
color: var(--color-dark-text-secondary, #94a3b8);
}
#sequence-recall-game .sr-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
#sequence-recall-game .sr-wizard-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
#sequence-recall-game .sr-wizard-dot.active {
background: var(--color-primary, #0f9072);
transform: scale(1.3);
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-dot.active {
background: var(--color-primary, #0f9072);
}
#sequence-recall-game .sr-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary, #0f9072);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
#sequence-recall-game .sr-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#sequence-recall-game .sr-wizard-card { padding: 1.5rem 1rem; }
#sequence-recall-game .sr-wizard-icon { font-size: 2rem; }
#sequence-recall-game .sr-wizard-title { font-size: 1.1rem; }
#sequence-recall-game .sr-wizard-desc { font-size: 0.85rem; }
#sequence-recall-game .sr-icon { font-size: 1.5rem; margin-bottom: 0; }
#sequence-recall-game .sr-title { font-size: 1.3rem; }
#sequence-recall-game .sr-subtitle { font-size: 0.85rem; margin-bottom: 1rem; }
#sequence-recall-game .sr-instructions-list li { font-size: 0.85rem; padding: 0.3rem 0; }
}

/* Header bar */
#sequence-recall-game .sr-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 0.85rem;
font-weight: 600;
}

#sequence-recall-game .sr-header-item {
text-align: center;
line-height: 1.3;
}

#sequence-recall-game .sr-header-label {
display: block;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary, #4b5b6d);
font-weight: 500;
}

#sequence-recall-game .sr-header-value {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text-primary, #1a2332);
}

#sequence-recall-game .sr-header-value.sr-streak {
color: #f59e0b;
}

/* Phase indicator */
#sequence-recall-game .sr-phase-label {
text-align: center;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-primary, #0f9072);
margin-bottom: 0.75rem;
}

/* Progress bar */
#sequence-recall-game .sr-progress {
margin-top: 1rem;
}

#sequence-recall-game .sr-progress-label {
text-align: center;
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.35rem;
}

#sequence-recall-game .sr-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 3px;
overflow: hidden;
}

#sequence-recall-game .sr-progress-fill {
height: 100%;
background: var(--color-primary, #0f9072);
border-radius: 3px;
transition: width 0.3s ease;
}

/* Color display area */
#sequence-recall-game .sr-color-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 220px;
padding: 1rem;
}

#sequence-recall-game .sr-color-box {
width: 160px;
height: 160px;
border-radius: 1rem;
animation: sr-color-appear 0.3s ease-out;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

@keyframes sr-color-appear {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .sr-color-counter {
margin-top: 1rem;
font-size: 1rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}

/* Recall area */
#sequence-recall-game .sr-recall-area {
padding: 0.5rem 0;
}

#sequence-recall-game .sr-selected-sequence {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 44px;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
flex-wrap: wrap;
}

#sequence-recall-game .sr-selected-dot {
width: 28px;
height: 28px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
animation: sr-dot-appear 0.2s ease-out;
flex-shrink: 0;
}

@keyframes sr-dot-appear {
0% { transform: scale(0); }
100% { transform: scale(1); }
}

#sequence-recall-game .sr-selected-placeholder {
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-color-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
margin-bottom: 0.75rem;
}

#sequence-recall-game .sr-color-btn {
aspect-ratio: 1;
border: 3px solid transparent;
border-radius: 0.75rem;
cursor: pointer;
transition: all 0.15s ease;
min-height: 70px;
position: relative;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

#sequence-recall-game .sr-color-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#sequence-recall-game .sr-color-btn:active {
transform: scale(0.95);
}

#sequence-recall-game .sr-color-btn .sr-btn-label {
position: absolute;
bottom: 6px;
left: 0;
right: 0;
text-align: center;
font-size: 0.65rem;
font-weight: 600;
color: rgba(255,255,255,0.9);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#sequence-recall-game .sr-undo-row {
display: flex;
gap: 0.5rem;
}

#sequence-recall-game .sr-undo-btn {
flex: 1;
padding: 0.6rem;
border: 1px solid var(--color-border, #dfe4ea);
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
border-radius: 0.5rem;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-undo-btn:hover {
background: var(--color-bg-secondary, #f0f4f8);
}

#sequence-recall-game .sr-submit-btn {
flex: 2;
padding: 0.6rem;
border: none;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-submit-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}

#sequence-recall-game .sr-submit-btn:not(:disabled):hover {
opacity: 0.9;
}

/* Distraction (math) */
#sequence-recall-game .sr-math-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
padding: 1rem;
}

#sequence-recall-game .sr-math-problem {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
font-family: "Space Grotesk", system-ui, sans-serif;
color: var(--color-text-primary, #1a2332);
}

#sequence-recall-game .sr-math-input-row {
display: flex;
gap: 0.5rem;
align-items: center;
}

#sequence-recall-game .sr-math-input {
width: 100px;
padding: 0.6rem 0.75rem;
border: 2px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
font-size: 1.25rem;
text-align: center;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
outline: none;
}

#sequence-recall-game .sr-math-input:focus {
border-color: var(--color-primary, #0f9072);
}

#sequence-recall-game .sr-math-submit {
padding: 0.6rem 1.25rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-math-submit:hover {
opacity: 0.9;
}

#sequence-recall-game .sr-math-hint {
margin-top: 0.75rem;
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
}

/* Positions grid */
#sequence-recall-game .sr-position-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 260px;
padding: 1rem;
}

#sequence-recall-game .sr-position-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
width: 210px;
}

#sequence-recall-game .sr-position-cell {
width: 64px;
height: 64px;
background: var(--color-bg-secondary, #f0f4f8);
border: 2px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
color: transparent;
}

#sequence-recall-game .sr-position-cell:hover {
border-color: var(--color-primary, #0f9072);
}

#sequence-recall-game .sr-position-cell.sr-pos-active {
background: var(--color-primary, #0f9072);
border-color: var(--color-primary, #0f9072);
color: #fff;
}

#sequence-recall-game .sr-position-cell.sr-pos-highlight {
background: var(--color-primary, #0f9072);
border-color: var(--color-primary, #0f9072);
animation: sr-pos-flash 0.4s ease-out;
}

@keyframes sr-pos-flash {
0% { transform: scale(0.8); opacity: 0.5; }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .sr-position-counter {
margin-top: 0.75rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}

/* Feedback overlay */
#sequence-recall-game .sr-feedback {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
animation: sr-feedback-appear 0.3s ease-out;
}

#sequence-recall-game .sr-feedback-correct {
font-size: 1.5rem;
font-weight: 700;
color: #22c55e;
}

#sequence-recall-game .sr-feedback-wrong {
font-size: 1.5rem;
font-weight: 700;
color: #ef4444;
}

#sequence-recall-game .sr-feedback-points {
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text-secondary, #4b5b6d);
margin-top: 0.25rem;
}

@keyframes sr-feedback-appear {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

/* Game complete */
#sequence-recall-game .sr-complete {
position: relative;
text-align: center;
}

#sequence-recall-game .sr-complete-icon {
font-size: 3rem;
margin-bottom: 0.5rem;
}

#sequence-recall-game .sr-complete-title {
font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 1.25rem;
}

#sequence-recall-game .sr-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-bottom: 1.25rem;
}

#sequence-recall-game .sr-stat-box {
padding: 0.75rem 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
text-align: center;
}

#sequence-recall-game .sr-stat-value {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-text-primary, #1a2332);
display: block;
}

#sequence-recall-game .sr-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-new-best {
display: inline-block;
padding: 0.35rem 0.75rem;
background: #f59e0b;
color: #1a2332;
border-radius: 1rem;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 1rem;
animation: sr-badge-pulse 1s ease-in-out infinite alternate;
}

@keyframes sr-badge-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

#sequence-recall-game .sr-complete-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
margin-top: 0.5rem;
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

/* Hide all screens by default */
#sequence-recall-game .sr-screen {
display: none;
}

#sequence-recall-game .sr-screen.sr-active {
display: block;
}

/* Responsive */
@media (max-width: 400px) {
#sequence-recall-game .sr-color-btn {
min-height: 60px;
}
#sequence-recall-game .sr-color-box {
width: 130px;
height: 130px;
}
#sequence-recall-game .sr-position-grid {
width: 180px;
}
#sequence-recall-game .sr-position-cell {
width: 54px;
height: 54px;
}
}
@media (max-width: 640px) {
#sequence-recall-game .sr-color-grid {
gap: 0.5rem;
}
#sequence-recall-game .sr-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 360px) {
#sequence-recall-game .sr-color-btn {
min-height: 50px;
}
#sequence-recall-game .sr-color-box {
width: 110px;
height: 110px;
}
#sequence-recall-game .sr-position-grid {
width: 160px;
}
#sequence-recall-game .sr-position-cell {
width: 48px;
height: 48px;
}
#sequence-recall-game .sr-stats-grid {
grid-template-columns: 1fr 1fr;
}
#sequence-recall-game .sr-selected-dot {
width: 22px;
height: 22px;
}
}
@keyframes sr-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.sr-confetti-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.sr-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: sr-confetti-fall 2.5s ease-in forwards;
}
.sr-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: sr-glow-fade 1s ease-out forwards;
}
@keyframes sr-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.sr-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 1rem;
animation: sr-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes sr-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#sequence-recall-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #sequence-recall-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="sequence-recall-game">

<div id="sr-instructions" class="sr-screen sr-active">
<div class="sr-card">
<div class="sr-title-row"><span class="sr-icon">&#x1F9E0;</span><h1 class="sr-title">Sequence Recall</h1></div>
<p class="sr-subtitle">작업 기억력을 단련하세요</p>
<ul class="sr-instructions-list">
<li data-num="1">순서대로 표시되는 색의 배열을 관찰하세요</li>
<li data-num="2">순서를 주의 깊게 기억하세요</li>
<li data-num="3">완전히 같은 순서로 색을 떠올리세요</li>
<li data-num="4">난이도가 올라가는 20레벨을 클리어하세요</li>
</ul>
<div class="sr-best-score" id="sr-best-display">
최고: <strong id="sr-best-value">0</strong> 포인트
</div>
<button class="sr-btn-primary" id="sr-start-btn">시작</button>
<div id="sr-challenge-banner-wrap"></div>
</div>
</div>

<div id="sr-wizard" class="sr-screen">
<div class="sr-wizard-overlay">
<div class="sr-wizard-card" id="sr-wizard-card"></div>
</div>
</div>

<div id="sr-playing" class="sr-screen">
<div class="sr-header">
<div class="sr-header-item">
<span class="sr-header-label">점수</span>
<span class="sr-header-value" id="sr-score">0</span>
</div>
<div class="sr-header-item">
<span class="sr-header-label">Level</span>
<span class="sr-header-value" id="sr-level">1</span>
</div>
<div class="sr-header-item">
<span class="sr-header-label">연속</span>
<span class="sr-header-value sr-streak" id="sr-streak">0</span>
</div>
</div>
<div class="sr-phase-label" id="sr-phase-label">Memorize</div>
<div id="sr-play-area"></div>
<div class="sr-progress">
<div class="sr-progress-label" id="sr-progress-label">라운드 1 / 3</div>
<div class="sr-progress-bar">
<div class="sr-progress-fill" id="sr-progress-fill" style="width:0%"></div>
</div>
</div>
<button class="gk-finish-btn" id="sr-finish-btn">종료</button>
</div>

<div id="sr-complete" class="sr-screen">
<div class="sr-card sr-complete">
<button class="gk-complete-close" id="sr-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="sr-complete-icon">&#x1F3C6;</div>
<h2 class="sr-complete-title">종료!</h2>
<div id="sr-new-best-badge" class="sr-new-best" style="display:none;">새로운 최고!</div>
<div class="gk-challenge-result" id="sr-challenge-result" style="display:none;"></div>
<div class="sr-stats-grid">
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-score">0</span>
<span class="sr-stat-label">점수</span>
</div>
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-level">1</span>
<span class="sr-stat-label">Level</span>
</div>
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-accuracy">0%</span>
<span class="sr-stat-label">정확도</span>
</div>
</div>
<div class="sr-complete-links">
<button class="sr-btn-primary" id="sr-play-again-btn">다시하기</button>
<button class="gk-runtime-history-toggle" id="sr-history-toggle" type="button">Show History</button>
<a href="/ko/games/" class="sr-btn-secondary">모든 게임</a>
</div>
<div class="gk-runtime-history-panel" id="sr-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="sr-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="sr-share-btn">&#128279; 결과 공유</button>
<div class="gk-share-copied" id="sr-share-copied" style="display:none;">링크가 복사되었습니다!</div>
</div>
</div>
</div>

</div>

<script>
(function() {
var STORAGE_BEST = 'guruka_sequence-recall_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('sr-history-toggle', 'sr-history-panel', 'sr-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var COLORS = [
{ name: '빨강', hsl: 'hsl(0,84%,60%)' },
{ name: '파랑', hsl: 'hsl(217,91%,60%)' },
{ name: '초록', hsl: 'hsl(142,76%,36%)' },
{ name: '노랑', hsl: 'hsl(48,96%,53%)' },
{ name: '보라', hsl: 'hsl(280,68%,55%)' },
{ name: '주황', hsl: 'hsl(25,95%,53%)' }
];

var MAX_LEVEL = 20;
var ROUNDS_PER_LEVEL = 3;

var state = {
screen: 'instructions',
level: 1,
round: 0,
score: 0,
streak: 0,
totalCorrect: 0,
totalAttempts: 0,
colorSequence: [],
positionSequence: [],
selectedColors: [],
selectedPositions: [],
currentShowIndex: 0,
phaseStartTime: 0,
showTimer: null,
feedbackTimer: null
};

function getSequenceLength(level) {
return Math.min(3 + Math.floor(level / 3), 8);
}

function hasDistraction(level) {
return level >= 6;
}

function isDualTrack(level) {
return level >= 11;
}

function getDisplayTime(level) {
return Math.max(1200 - (level - 1) * 40, 600);
}

function getBestScore() {
try {
var val = localStorage.getItem(STORAGE_BEST);
return val ? parseInt(val, 10) : 0;
} catch(e) { return 0; }
}

function setBestScore(s) {
try { localStorage.setItem(STORAGE_BEST, String(s)); } catch(e) {}
}

function getHistory() {
return [];
}

function addHistory(entry) {
void entry;
}

function $(id) { return document.getElementById(id); }

function showScreen(name) {
var screens = document.querySelectorAll('#sequence-recall-game .sr-screen');
for (var i = 0; i < screens.length; i++) {
screens[i].classList.remove('sr-active');
}
var el = $('sr-' + name);
if (el) el.classList.add('sr-active');
state.screen = name;
}

function generateColorSequence(len) {
var seq = [];
for (var i = 0; i < len; i++) {
seq.push(Math.floor(Math.random() * COLORS.length));
}
return seq;
}

function generatePositionSequence(len) {
var positions = [];
var used = {};
var count = Math.min(len, 9);
while (positions.length < count) {
var p = Math.floor(Math.random() * 9);
if (!used[p]) {
used[p] = true;
positions.push(p);
}
}
return positions;
}

function generateMathProblem() {
var ops = ['+', '-', '*'];
var op = ops[Math.floor(Math.random() * ops.length)];
var a, b, answer;
if (op === '+') {
a = Math.floor(Math.random() * 50) + 1;
b = Math.floor(Math.random() * 50) + 1;
answer = a + b;
} else if (op === '-') {
a = Math.floor(Math.random() * 50) + 10;
b = Math.floor(Math.random() * a);
answer = a - b;
} else {
a = Math.floor(Math.random() * 12) + 2;
b = Math.floor(Math.random() * 12) + 2;
answer = a * b;
}
var display = op === '*' ? (a + ' \u00D7 ' + b) : (a + ' ' + op + ' ' + b);
return { display: display, answer: answer };
}

function updateHeader() {
$('sr-score').textContent = state.score;
$('sr-level').textContent = state.level;
$('sr-streak').textContent = state.streak;
if (challenge.active) GK.updateChallengeBar('sr-playing', state.score, challenge.score);
}

function updateProgress() {
$('sr-progress-label').textContent = '라운드 ' + (state.round + 1) + ' / ' + ROUNDS_PER_LEVEL;
var pct = (state.round / ROUNDS_PER_LEVEL) * 100;
$('sr-progress-fill').style.width = pct + '%';
}

var SR_WIZARD_STEPS = [
{icon: '\uD83C\uDFA8', title: '색의 배열을 관찰하세요', desc: '색이 순서대로 표시됩니다. 순서를 기억하세요!'},
{icon: '\uD83E\uDDE0', title: '순서대로 떠올리세요', desc: '본 순서대로 색을 탭하세요.'},
{icon: '\uD83D\uDE80', title: '준비됐나요? 시작!', desc: '배열이 길어집니다. 집중하세요!', final: true}
];
var srWizardStep = 0;
var srWizardCallback = null;

function srRenderWizardStep() {
var s = SR_WIZARD_STEPS[srWizardStep];
var dotsHtml = '';
for (var i = 0; i < SR_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="sr-wizard-dot' + (i === srWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? '플레이 시작' : '다음';
var card = $('sr-wizard-card');
card.innerHTML =
'<div class="sr-wizard-icon">' + s.icon + '</div>' +
'<div class="sr-wizard-title">' + s.title + '</div>' +
'<div class="sr-wizard-desc">' + s.desc + '</div>' +
'<div class="sr-wizard-dots">' + dotsHtml + '</div>' +
'<button class="sr-wizard-btn" id="sr-wizard-next">' + btnLabel + '</button>';
card.style.animation = 'none';
void card.offsetWidth;
card.style.animation = 'sr-wizard-enter 0.3s ease-out';
$('sr-wizard-next').addEventListener('click', srAdvanceWizard);
}

function srAdvanceWizard() {
if (srWizardStep < SR_WIZARD_STEPS.length - 1) {
srWizardStep++;
srRenderWizardStep();
} else {
if (srWizardCallback) srWizardCallback();
}
}

function showWizard(callback) {
srWizardStep = 0;
srWizardCallback = callback;
showScreen('wizard');
srRenderWizardStep();
}

function startRound() {
var seqLen = getSequenceLength(state.level);
state.colorSequence = generateColorSequence(seqLen);
state.positionSequence = isDualTrack(state.level) ? generatePositionSequence(Math.min(seqLen, 9)) : [];
state.selectedColors = [];
state.selectedPositions = [];
state.currentShowIndex = 0;

updateHeader();
updateProgress();
showColorSequence();
}

function showColorSequence() {
$('sr-phase-label').textContent = '색을 기억하세요';
state.currentShowIndex = 0;
showNextColor();
}

function showNextColor() {
var area = $('sr-play-area');
if (state.currentShowIndex >= state.colorSequence.length) {
if (isDualTrack(state.level)) {
showPositionSequence();
} else if (hasDistraction(state.level)) {
showDistraction();
} else {
startRecallColors();
}
return;
}

var colorIdx = state.colorSequence[state.currentShowIndex];
var color = COLORS[colorIdx];
var total = state.colorSequence.length;
var current = state.currentShowIndex + 1;

area.innerHTML = '<div class="sr-color-stage">' +
'<div class="sr-color-box" style="background:' + color.hsl + '"></div>' +
'<div class="sr-color-counter">' + current + ' / ' + total + '</div>' +
'</div>';

state.currentShowIndex++;
var dt = getDisplayTime(state.level);
state.showTimer = setTimeout(function() {
showNextColor();
}, dt);
}

function showPositionSequence() {
$('sr-phase-label').textContent = '위치를 기억하세요';
state.currentShowIndex = 0;
showNextPosition();
}

function showNextPosition() {
if (state.currentShowIndex >= state.positionSequence.length) {
if (hasDistraction(state.level)) {
showDistraction();
} else {
startRecallColors();
}
return;
}

var pos = state.positionSequence[state.currentShowIndex];
var total = state.positionSequence.length;
var current = state.currentShowIndex + 1;

var html = '<div class="sr-position-stage">';
html += '<div class="sr-position-grid">';
for (var i = 0; i < 9; i++) {
var cls = 'sr-position-cell';
if (i === pos) cls += ' sr-pos-highlight';
html += '<div class="' + cls + '"></div>';
}
html += '</div>';
html += '<div class="sr-position-counter">' + current + ' / ' + total + '</div>';
html += '</div>';

$('sr-play-area').innerHTML = html;

state.currentShowIndex++;
var dt = getDisplayTime(state.level);
state.showTimer = setTimeout(function() {
showNextPosition();
}, dt);
}

function showDistraction() {
$('sr-phase-label').textContent = '계산 챌린지!';
var problem = generateMathProblem();

var html = '<div class="sr-math-area">';
html += '<div class="sr-math-problem">' + problem.display + ' = ?</div>';
html += '<div class="sr-math-input-row">';
html += '<input type="number" class="sr-math-input" id="sr-math-input" inputmode="numeric" autocomplete="off">';
html += '<button class="sr-math-submit" id="sr-math-btn">OK</button>';
html += '</div>';
html += '<div class="sr-math-hint">풀고 진행</div>';
html += '</div>';

$('sr-play-area').innerHTML = html;

var input = $('sr-math-input');
var btn = $('sr-math-btn');

function submitMath() {
var val = parseInt(input.value, 10);
if (isNaN(val)) return;
startRecallColors();
}

btn.addEventListener('click', submitMath);
input.addEventListener('keydown', function(e) {
if (e.key === 'Enter') submitMath();
});

setTimeout(function() { input.focus(); }, 100);
}

function startRecallColors() {
$('sr-phase-label').textContent = '색의 배열을 떠올리세요';
state.selectedColors = [];
state.phaseStartTime = Date.now();
renderRecallColors();
}

function renderRecallColors() {
var needed = state.colorSequence.length;
var html = '<div class="sr-recall-area">';

html += '<div class="sr-selected-sequence" id="sr-selected-seq">';
if (state.selectedColors.length === 0) {
html += '<span class="sr-selected-placeholder">색을 순서대로 탭 (' + needed + ' 개 필요)</span>';
} else {
for (var i = 0; i < state.selectedColors.length; i++) {
var c = COLORS[state.selectedColors[i]];
html += '<div class="sr-selected-dot" style="background:' + c.hsl + '"></div>';
}
}
html += '</div>';

html += '<div class="sr-color-grid">';
for (var j = 0; j < COLORS.length; j++) {
html += '<button class="sr-color-btn" data-color="' + j + '" style="background:' + COLORS[j].hsl + '">';
html += '<span class="sr-btn-label">' + COLORS[j].name + '</span>';
html += '</button>';
}
html += '</div>';

html += '<div class="sr-undo-row">';
html += '<button class="sr-undo-btn" id="sr-undo-btn">되돌리기</button>';
html += '<button class="sr-submit-btn" id="sr-submit-colors-btn"' + (state.selectedColors.length < needed ? ' disabled' : '') + '>확인</button>';
html += '</div>';

html += '</div>';

$('sr-play-area').innerHTML = html;

var buttons = document.querySelectorAll('#sequence-recall-game .sr-color-btn');
for (var k = 0; k < buttons.length; k++) {
buttons[k].addEventListener('click', function() {
var ci = parseInt(this.getAttribute('data-color'), 10);
if (state.selectedColors.length < needed) {
state.selectedColors.push(ci);
renderRecallColors();
if (state.selectedColors.length === needed) {
setTimeout(function() {
var sb = $('sr-submit-colors-btn');
if (sb) sb.focus();
}, 50);
}
}
});
}

$('sr-undo-btn').addEventListener('click', function() {
if (state.selectedColors.length > 0) {
state.selectedColors.pop();
renderRecallColors();
}
});

var submitBtn = $('sr-submit-colors-btn');
submitBtn.addEventListener('click', function() {
if (state.selectedColors.length === needed) {
submitColorRecall();
}
});
}

function submitColorRecall() {
var responseTime = Date.now() - state.phaseStartTime;
var correct = true;
for (var i = 0; i < state.colorSequence.length; i++) {
if (state.colorSequence[i] !== state.selectedColors[i]) {
correct = false;
break;
}
}

if (isDualTrack(state.level)) {
state._colorCorrect = correct;
state._colorResponseTime = responseTime;
startRecallPositions();
} else {
resolveRound(correct, responseTime);
}
}

function startRecallPositions() {
$('sr-phase-label').textContent = '순서대로 위치를 떠올리세요';
state.selectedPositions = [];
state.phaseStartTime = Date.now();
renderRecallPositions();
}

function renderRecallPositions() {
var needed = state.positionSequence.length;
var html = '<div class="sr-position-stage">';

html += '<div class="sr-selected-sequence">';
if (state.selectedPositions.length === 0) {
html += '<span class="sr-selected-placeholder">그리드 위치를 순서대로 탭 (' + needed + ' 개 필요)</span>';
} else {
for (var i = 0; i < state.selectedPositions.length; i++) {
html += '<div class="sr-selected-dot" style="background:var(--color-primary, #0f9072)"></div>';
}
}
html += '</div>';

html += '<div class="sr-position-grid">';
for (var j = 0; j < 9; j++) {
var isSelected = false;
var order = -1;
for (var k = 0; k < state.selectedPositions.length; k++) {
if (state.selectedPositions[k] === j) {
isSelected = true;
order = k + 1;
break;
}
}
var cls = 'sr-position-cell';
if (isSelected) cls += ' sr-pos-active';
html += '<div class="' + cls + '" data-pos="' + j + '">' + (isSelected ? order : '') + '</div>';
}
html += '</div>';

html += '<div class="sr-undo-row" style="margin-top:0.75rem;max-width:210px;width:100%;">';
html += '<button class="sr-undo-btn" id="sr-undo-pos-btn">되돌리기</button>';
html += '<button class="sr-submit-btn" id="sr-submit-pos-btn"' + (state.selectedPositions.length < needed ? ' disabled' : '') + '>확인</button>';
html += '</div>';

html += '</div>';

$('sr-play-area').innerHTML = html;

var cells = document.querySelectorAll('#sequence-recall-game .sr-position-cell');
for (var m = 0; m < cells.length; m++) {
cells[m].addEventListener('click', function() {
var p = parseInt(this.getAttribute('data-pos'), 10);
var alreadySelected = false;
for (var n = 0; n < state.selectedPositions.length; n++) {
if (state.selectedPositions[n] === p) {
alreadySelected = true;
break;
}
}
if (!alreadySelected && state.selectedPositions.length < needed) {
state.selectedPositions.push(p);
renderRecallPositions();
}
});
}

$('sr-undo-pos-btn').addEventListener('click', function() {
if (state.selectedPositions.length > 0) {
state.selectedPositions.pop();
renderRecallPositions();
}
});

$('sr-submit-pos-btn').addEventListener('click', function() {
if (state.selectedPositions.length === needed) {
submitPositionRecall();
}
});
}

function submitPositionRecall() {
var responseTime = Date.now() - state.phaseStartTime;
var posCorrect = true;
for (var i = 0; i < state.positionSequence.length; i++) {
if (state.positionSequence[i] !== state.selectedPositions[i]) {
posCorrect = false;
break;
}
}

var bothCorrect = state._colorCorrect && posCorrect;
var combinedTime = state._colorResponseTime + responseTime;
resolveRound(bothCorrect, combinedTime);
}

function formatColorHistory(seq) {
if (!seq || !seq.length) return 'none';
var out = [];
for (var i = 0; i < seq.length; i++) {
var color = COLORS[seq[i]];
out.push('<span class="gk-history-swatch" style="background:' + runHistory.escape(color.hsl) + '"></span>' + runHistory.escape(color.name));
}
return out.join(', ');
}

function formatPositionHistory(seq) {
if (!seq || !seq.length) return 'none';
var out = [];
for (var i = 0; i < seq.length; i++) out.push(String(seq[i] + 1));
return out.join(', ');
}

function recordSequenceHistory(correct) {
var html = '<strong>Sequence recall</strong>';
html += '<div class="gk-runtime-history-sub">Colors - Your: ' + formatColorHistory(state.selectedColors) + '</div>';
html += '<div class="gk-runtime-history-sub">Colors - Correct: ' + formatColorHistory(state.colorSequence) + '</div>';
if (isDualTrack(state.level)) {
html += '<div class="gk-runtime-history-sub">Positions - Your: ' + runHistory.escape(formatPositionHistory(state.selectedPositions)) + '</div>';
html += '<div class="gk-runtime-history-sub">Positions - Correct: ' + runHistory.escape(formatPositionHistory(state.positionSequence)) + '</div>';
}
runHistory.pushHtml(correct, html);
}

function resolveRound(correct, responseTime) {
state.totalAttempts++;
recordSequenceHistory(correct);
var points = 0;

if (correct) {
state.totalCorrect++;
state.streak++;
points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
} else {
state.streak = 0;
}

updateHeader();
showFeedback(correct, points);
}

function showFeedback(correct, points) {
$('sr-phase-label').textContent = '';
var html = '<div class="sr-feedback"><div>';
if (correct) {
html += '<div class="sr-feedback-correct">정답!</div>';
html += '<div class="sr-feedback-points">+' + points + ' 포인트</div>';
} else {
html += '<div class="sr-feedback-wrong">오답</div>';
html += '<div class="sr-feedback-points">연속 초기화</div>';
}
html += '</div></div>';

$('sr-play-area').innerHTML = html;

state.feedbackTimer = setTimeout(function() {
advanceRound(correct);
}, 1200);
}

function advanceRound(wasCorrect) {
state.round++;

if (state.round >= ROUNDS_PER_LEVEL) {
if (wasCorrect) {
state.level++;
}
state.round = 0;

if (state.level > MAX_LEVEL) {
endGame();
return;
}
}

updateProgress();
startRound();
}

/* ── Celebration effects ── */
function srShowConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'sr-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'sr-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'sr-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function srAnimateScoreCountUp(el, target) {
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(target * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

function endGame() {
exitMobileGameMode();
var accuracy = state.totalAttempts > 0 ? Math.round((state.totalCorrect / state.totalAttempts) * 100) : 0;
var best = getBestScore();
var isNewBest = state.score > best;

if (isNewBest) {
setBestScore(state.score);
}

addHistory({
score: state.score,
level: state.level > MAX_LEVEL ? MAX_LEVEL : state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var iconEl = document.querySelector('#sr-complete .sr-complete-icon');
var titleEl = document.querySelector('#sr-complete .sr-complete-title');
var badge = $('sr-new-best-badge');

if (isNewBest) {
srShowConfetti();
iconEl.textContent = '\uD83C\uDF89';
titleEl.textContent = '대단해요!';
badge.className = 'sr-new-best-enhanced';
badge.innerHTML = 'uD83CuDF1F 대단해요!신기록!';
badge.style.display = 'inline-block';
} else {
iconEl.textContent = '\uD83C\uDFC6';
titleEl.textContent = '수고하셨습니다!';
badge.className = 'sr-new-best';
badge.style.display = 'none';
}

GK.renderChallengeResult('sr-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

$('sr-final-level').textContent = state.level > MAX_LEVEL ? MAX_LEVEL : state.level;
$('sr-final-accuracy').textContent = accuracy + '%';

showScreen('complete');
srAnimateScoreCountUp($('sr-final-score'), state.score);
}

function resetGame() {
clearTimeout(state.showTimer);
clearTimeout(state.feedbackTimer);
state.level = 1;
state.round = 0;
state.score = 0;
state.streak = 0;
state.totalCorrect = 0;
state.totalAttempts = 0;
state.selectedColors = [];
state.selectedPositions = [];
state.colorSequence = [];
state.positionSequence = [];
runHistory.clear();
}

function initInstructions() {
var best = getBestScore();
$('sr-best-value').textContent = best;
GK.renderChallengeBanner('sr-challenge-banner-wrap', challenge);
showScreen('instructions');
}


$('sr-close-btn').addEventListener('click', function() {
$('sr-best-value').textContent = getBestScore();
showScreen('instructions');
});

$('sr-finish-btn').addEventListener('click', function() {
endGame();
});

$('sr-start-btn').addEventListener('click', function() {
resetGame();
showWizard(function() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sr-playing', challenge);
startRound();
});
});

$('sr-play-again-btn').addEventListener('click', function() {
resetGame();
showWizard(function() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sr-playing', challenge);
startRound();
});
});

$('sr-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

$('sr-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Sequence Recall', '/ko/games/sequence-recall/', 'sr-share-copied');
});

initInstructions();
})();
</script>

### Speed Match - 두뇌 훈련 게임
URL: https://guruka.com/ko/games/speed-match/
Description: 심볼을 빠르게 비교하세요.

<style>
#speed-match-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #speed-match-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#sm-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.sm-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#sm-instructions .sm-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#sm-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#sm-instructions .sm-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #sm-instructions .sm-subtitle {
color: var(--color-dark-text-secondary);
}

#sm-instructions .sm-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #sm-instructions .sm-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#sm-instructions .sm-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#sm-instructions .sm-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#sm-instructions .sm-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.sm-kbd-hints {
display: flex;
gap: 1.5rem;
justify-content: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}

.sm-kbd-hint {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-kbd-hint {
color: var(--color-dark-text-secondary);
}

.sm-kbd {
display: inline-block;
padding: 0.15rem 0.5rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.25rem;
font-family: monospace;
font-size: 0.8rem;
font-weight: 600;
}

[data-theme="dark"] .sm-kbd {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.sm-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.sm-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.sm-btn-primary:hover {
background: var(--color-primary-hover);
}

.sm-btn-primary:active {
transform: scale(0.97);
}

.sm-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.sm-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .sm-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#sm-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#sm-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sm-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #sm-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes sm-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.sm-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.sm-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.sm-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .sm-wizard-desc {
color: var(--color-dark-text-secondary);
}
.sm-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.sm-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.sm-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"] .sm-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .sm-wizard-dot.active {
background: var(--color-primary);
}
.sm-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.sm-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#sm-wizard-card {
padding: 1.5rem 1rem;
}
.sm-wizard-icon {
font-size: 2rem;
}
.sm-wizard-title {
font-size: 1.1rem;
}
.sm-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#sm-playing {
display: none;
flex: 1;
flex-direction: column;
}

.sm-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .sm-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-stat {
text-align: center;
}

.sm-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .sm-stat-label {
color: var(--color-dark-text-secondary);
}

.sm-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.sm-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.sm-level-text {
font-weight: 600;
}

.sm-nback-badge {
background: var(--color-primary);
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.sm-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .sm-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.sm-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .sm-timer-bar {
background: var(--color-dark-bg-secondary);
}

.sm-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.sm-timer-fill.sm-timer-warning {
background: #ef4444;
}

/* ── Symbol Display ── */
.sm-symbol-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
}

.sm-symbol {
font-size: 7rem;
line-height: 1;
transition: transform 0.15s ease;
animation: sm-symbol-enter 0.2s ease-out;
}

@keyframes sm-symbol-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.sm-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.sm-feedback-flash.sm-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.sm-feedback-flash.sm-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.sm-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.sm-feedback-icon.sm-show-check {
animation: sm-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.sm-feedback-icon.sm-show-x {
animation: sm-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes sm-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Action Buttons ── */
.sm-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.sm-action-btn {
flex: 1;
padding: 1rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
background: var(--color-bg-primary);
color: var(--color-text-primary);
}

[data-theme="dark"] .sm-action-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.sm-action-btn:active {
transform: scale(0.95);
}

.sm-action-btn:disabled {
opacity: 0.45;
cursor: default;
transform: none;
}

.sm-action-btn .sm-btn-icon {
font-size: 1.5rem;
}

.sm-action-btn .sm-btn-kbd {
font-size: 0.65rem;
color: var(--color-text-secondary);
font-weight: 400;
}

[data-theme="dark"] .sm-action-btn .sm-btn-kbd {
color: var(--color-dark-text-secondary);
}

.sm-btn-different {
border-color: #ef4444;
}

.sm-btn-different:hover {
background: rgba(239, 68, 68, 0.08);
}

[data-theme="dark"] .sm-btn-different:hover {
background: rgba(239, 68, 68, 0.15);
}

.sm-btn-same {
border-color: #22c55e;
}

.sm-btn-same:hover {
background: rgba(34, 197, 94, 0.08);
}

[data-theme="dark"] .sm-btn-same:hover {
background: rgba(34, 197, 94, 0.15);
}

.sm-playing-kbd-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-playing-kbd-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#sm-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#sm-pause-overlay .sm-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#sm-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.sm-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sm-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .sm-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes sm-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.sm-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.sm-complete-card .sm-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.sm-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.sm-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: sm-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes sm-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.sm-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.sm-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .sm-complete-stat {
background: var(--color-dark-bg-secondary);
}

.sm-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.sm-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.sm-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.sm-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .sm-back-link {
color: var(--color-dark-text-secondary);
}

.sm-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.sm-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.sm-level-up-toast.sm-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#speed-match-game {
padding: 0.5rem;
}
.sm-symbol {
font-size: 5rem;
}
.sm-action-btn {
padding: 0.75rem;
font-size: 1rem;
}
.sm-header {
padding: 0.5rem;
gap: 0.25rem;
}
.sm-stat-value {
font-size: 1rem;
}
#sm-instructions { padding: 0.75rem 0.5rem; }
#sm-instructions .sm-icon { font-size: 2rem; margin-bottom: 0; }
#sm-instructions h2 { font-size: 1.3rem; }
#sm-instructions .sm-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#sm-instructions .sm-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#sm-instructions .sm-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.sm-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#speed-match-game {
padding: 0.75rem;
}
.sm-symbol {
font-size: 6rem;
}
.sm-action-btn {
padding: 0.875rem;
}
}
@media (max-width: 360px) {
.sm-symbol {
font-size: 4rem;
}
.sm-action-btn {
padding: 0.625rem;
font-size: 0.9rem;
}
.sm-complete-stats {
grid-template-columns: 1fr 1fr;
}
.sm-final-score {
font-size: 2rem;
}
.sm-header {
padding: 0.375rem;
}
.sm-stat-value {
font-size: 0.9rem;
}
}
@keyframes sm-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.sm-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.sm-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: sm-confetti-fall 2.5s ease-in forwards;
}
.sm-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: sm-glow-fade 1s ease-out forwards;
}
@keyframes sm-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.sm-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: sm-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes sm-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#speed-match-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#speed-match-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #speed-match-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#speed-match-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#speed-match-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="speed-match-game">

<div id="sm-instructions">
<div class="sm-title-row"><span class="sm-icon">&#9889;</span><h2>Speed Match</h2></div>
<p class="sm-subtitle">당신의 처리 속도는 얼마나 빠를까요?</p>
<div class="sm-how-to">
<h3>플레이 방법</h3>
<ol>
<li>매 라운드마다 화면에 심볼이 표시됩니다.</li>
<li>이전 라운드의 심볼과 <strong>같은지 다른지</strong> 판단하세요.</li>
<li>같으면 <strong>같음</strong>, 다르면 <strong>다름</strong>을 클릭하세요.</li>
<li>시간이 다 되기 전에 답하세요. 그렇지 않으면 오답 처리됩니다!</li>
<li>레벨이 올라가면 게임이 더 빠르고 어려워집니다.</li>
</ol>
</div>
<div class="sm-kbd-hints">
<span class="sm-kbd-hint"><span class="sm-kbd">1</span> 다름</span>
<span class="sm-kbd-hint"><span class="sm-kbd">2</span> 같음</span>
<span class="sm-kbd-hint"><span class="sm-kbd">Esc</span> 일시정지</span>
</div>
<div id="sm-best-display" class="sm-personal-best" style="display:none;">
최고: <strong id="sm-best-score">0</strong> 포인트
</div>
<button class="sm-btn-primary" id="sm-start-btn">시작</button>
<div id="sm-challenge-banner-wrap"></div>
</div>

<div id="sm-wizard">
<div id="sm-wizard-card"></div>
</div>

<div id="sm-playing">
<div class="sm-header">
<div class="sm-stat">
<div class="sm-stat-label">점수</div>
<div class="sm-stat-value" id="sm-score">0</div>
</div>
<div class="sm-stat">
<div class="sm-stat-label">연속</div>
<div class="sm-stat-value" id="sm-streak">0</div>
</div>
<div class="sm-stat">
<div class="sm-stat-label">Level</div>
<div class="sm-stat-value" id="sm-level">1</div>
</div>
</div>
<div class="sm-level-info">
<span class="sm-level-text">Level <span id="sm-level-text">1</span></span>
<span class="sm-nback-badge" id="sm-nback-badge">1-Back</span>
</div>
<div class="sm-progress-bar">
<div class="sm-progress-fill" id="sm-progress-fill" style="width:0%"></div>
</div>
<div class="sm-timer-bar">
<div class="sm-timer-fill" id="sm-timer-fill" style="width:100%"></div>
</div>
<div class="sm-symbol-area">
<div class="sm-feedback-flash" id="sm-feedback-flash"></div>
<div class="sm-feedback-icon" id="sm-feedback-icon"></div>
<div class="sm-symbol" id="sm-symbol"></div>
</div>
<div class="sm-actions">
<button class="sm-action-btn sm-btn-different" id="sm-btn-different">
<span class="sm-btn-icon">&#10007;</span>
<span>다름</span>
<span class="sm-btn-kbd">1</span>
</button>
<button class="sm-action-btn sm-btn-same" id="sm-btn-same">
<span class="sm-btn-icon">&#10003;</span>
<span>같음</span>
<span class="sm-btn-kbd">2</span>
</button>
</div>
<div class="sm-playing-kbd-hint"><strong>Esc</strong>키로 일시정지</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="sm-pause-btn" type="button">일시정지</button>
<button class="gk-finish-btn" id="sm-finish-btn" type="button">종료</button>
</div>
</div>

<div id="sm-pause-overlay">
<div class="sm-pause-text">일시정지</div>
<button class="sm-btn-primary" id="sm-resume-btn">계속하기</button>
</div>

<div id="sm-complete-overlay">
<div class="sm-complete-card">
<button class="gk-complete-close" id="sm-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="sm-trophy">&#127942;</div>
<h2>종료!</h2>
<div class="sm-final-score" id="sm-final-score">0</div>
<div id="sm-new-best" class="sm-new-best" style="display:none;">&#11088; 신기록!</div>
<div class="gk-challenge-result" id="sm-challenge-result" style="display:none;"></div>
<div class="sm-complete-stats">
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">레벨</div>
<div class="sm-complete-stat-value" id="sm-final-level">1</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">정확도</div>
<div class="sm-complete-stat-value" id="sm-final-accuracy">0%</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">연속</div>
<div class="sm-complete-stat-value" id="sm-final-streak">0</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">최고</div>
<div class="sm-complete-stat-value" id="sm-final-best">0</div>
</div>
</div>
<div class="sm-complete-actions">
<button class="sm-btn-primary" id="sm-play-again-btn">다시하기</button>
<button class="gk-runtime-history-toggle" id="sm-history-toggle" type="button">Show History</button>
<a href="/ko/games/" class="sm-back-link">&larr; 모든 게임</a>
</div>
<div class="gk-runtime-history-panel" id="sm-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="sm-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="sm-share-btn">&#128279; 결과 공유</button>
<div class="gk-share-copied" id="sm-share-copied" style="display:none;">링크가 복사되었습니다!</div>
</div>
</div>
</div>

<div class="sm-level-up-toast" id="sm-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var SYMBOLS = ['\u25C6', '\u25CF', '\u25A0', '\u25B2', '\u2605', '\u2666', '\u2660', '\u2663', '\u2665', '\u2B1F', '\u2B21', '\u25EF'];
var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_speed-match_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('sm-history-toggle', 'sm-history-panel', 'sm-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
symbolHistory: [],
currentSymbol: '',
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('sm-instructions');
var elWizard = document.getElementById('sm-wizard');
var elWizardCard = document.getElementById('sm-wizard-card');
var elPlaying = document.getElementById('sm-playing');
var elPauseOverlay = document.getElementById('sm-pause-overlay');
var elCompleteOverlay = document.getElementById('sm-complete-overlay');
var elScore = document.getElementById('sm-score');
var elStreak = document.getElementById('sm-streak');
var elLevel = document.getElementById('sm-level');
var elLevelText = document.getElementById('sm-level-text');
var elNbackBadge = document.getElementById('sm-nback-badge');
var elProgressFill = document.getElementById('sm-progress-fill');
var elTimerFill = document.getElementById('sm-timer-fill');
var elSymbol = document.getElementById('sm-symbol');
var elFeedbackFlash = document.getElementById('sm-feedback-flash');
var elFeedbackIcon = document.getElementById('sm-feedback-icon');
var elFinalScore = document.getElementById('sm-final-score');
var elNewBest = document.getElementById('sm-new-best');
var elFinalLevel = document.getElementById('sm-final-level');
var elFinalAccuracy = document.getElementById('sm-final-accuracy');
var elFinalStreak = document.getElementById('sm-final-streak');
var elFinalBest = document.getElementById('sm-final-best');
var elBestDisplay = document.getElementById('sm-best-display');
var elBestScore = document.getElementById('sm-best-score');
var elLevelToast = document.getElementById('sm-level-toast');
var btnStart = document.getElementById('sm-start-btn');
var btnDifferent = document.getElementById('sm-btn-different');
var btnSame = document.getElementById('sm-btn-same');
var btnResume = document.getElementById('sm-resume-btn');
var btnPlayAgain = document.getElementById('sm-play-again-btn');

/* ── Level parameters ── */
function getNBack(lvl) {
return lvl <= 10 ? 1 : 2;
}

function getDisplayTime(lvl) {
return Math.max(2500 - lvl * 100, 800);
}

function getSymbolCount(lvl) {
return Math.min(6 + Math.floor(lvl / 3), 12);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Pick a random symbol ── */
function pickSymbol() {
var count = getSymbolCount(state.level);
var pool = SYMBOLS.slice(0, count);
return pool[Math.floor(Math.random() * pool.length)];
}

/* ── Determine if current symbol matches nBack ── */
function isMatch() {
var nBack = getNBack(state.level);
var idx = state.symbolHistory.length - 1 - nBack;
if (idx < 0) return false;
return state.symbolHistory[idx] === state.currentSymbol;
}

function hasComparisonTarget() {
return state.symbolHistory.length > getNBack(state.level);
}

function setAnswerButtonsEnabled(enabled) {
btnDifferent.disabled = !enabled;
btnSame.disabled = !enabled;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
var nBack = getNBack(state.level);
elNbackBadge.textContent = nBack + '-Back';
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('sm-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('sm-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('sm-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'sm-feedback-flash';
elFeedbackIcon.className = 'sm-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('sm-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('sm-show-check');
} else {
elFeedbackFlash.classList.add('sm-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('sm-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'sm-feedback-flash';
elFeedbackIcon.className = 'sm-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('sm-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('sm-toast-show');
}, 1500);
}

function expectedSameForCurrentRound() {
if (!hasComparisonTarget()) return false;
return isMatch();
}

function sameLabel(value) {
if (value === null || value === undefined) return 'No answer';
return value ? 'Same' : 'Different';
}

function recordSpeedHistory(userSaidSame, correct) {
var expected = expectedSameForCurrentRound();
var html = '<strong>' + runHistory.escape(getNBack(state.level) + '-Back') + '</strong>';
html += '<div class="gk-runtime-history-sub">Symbol: ' + runHistory.escape(state.currentSymbol) + '</div>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(sameLabel(userSaidSame)) + ' | Correct: ' + runHistory.escape(sameLabel(expected)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(userSaidSame) {
if (state.answered || state.gameOver || !hasComparisonTarget()) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var matchResult = isMatch();
var correct = (userSaidSame === matchResult);

state.totalAnswered++;
recordSpeedHistory(userSaidSame, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.symbolHistory = [];
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;

if (!hasComparisonTarget()) {
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 150);
return;
}
state.totalAnswered++;
state.streak = 0;
recordSpeedHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.symbolHistory = [];
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;
state.currentSymbol = pickSymbol();
state.symbolHistory.push(state.currentSymbol);

elSymbol.textContent = state.currentSymbol;
elSymbol.style.animation = 'none';
void elSymbol.offsetWidth;
elSymbol.style.animation = '';

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();
setAnswerButtonsEnabled(hasComparisonTarget());

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'sm-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'sm-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'sm-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.sm-trophy');
var title = document.querySelector('#sm-complete-overlay .sm-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = '대단해요!';
elNewBest.className = 'sm-new-best-enhanced';
elNewBest.innerHTML = 'uD83CuDF1F 대단해요!신기록!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = '수고하셨습니다!';
elNewBest.className = 'sm-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('sm-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
/* Restart the current round's timer with full time */
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var SM_WIZARD_STEPS = [
{icon: '\u2728', title: '심볼이 화면에 나타납니다', desc: '매 라운드마다 심볼이 표시됩니다. 잘 보세요!'},
{icon: '\u2194\uFE0F', title: '같음? 다름?', desc: '이전 심볼과 같나요? 탭해서 답하세요.'},
{icon: '\u26A1', title: '빠르게!', desc: '시간 안에 반응하세요.', final: true}
];
var smWizardStep = 0;

function renderWizardStep() {
var s = SM_WIZARD_STEPS[smWizardStep];
var dotsHtml = '';
for (var i = 0; i < SM_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="sm-wizard-dot' + (i === smWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? '시작' : '다음';
elWizardCard.innerHTML =
'<div class="sm-wizard-icon">' + s.icon + '</div>' +
'<div class="sm-wizard-title">' + s.title + '</div>' +
'<div class="sm-wizard-desc">' + s.desc + '</div>' +
'<div class="sm-wizard-dots">' + dotsHtml + '</div>' +
'<button class="sm-wizard-btn" id="sm-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'sm-wizard-enter 0.3s ease-out';
document.getElementById('sm-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (smWizardStep < SM_WIZARD_STEPS.length - 1) {
smWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
smWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.symbolHistory = [];
state.currentSymbol = '';
runHistory.clear();
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sm-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('sm-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

btnDifferent.addEventListener('click', function() {
processAnswer(false);
});

btnSame.addEventListener('click', function() {
processAnswer(true);
});

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('sm-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('sm-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('sm-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('sm-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Speed Match', '/ko/games/speed-match/', 'sm-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key === '1') {
e.preventDefault();
processAnswer(false);
} else if (e.key === '2') {
e.preventDefault();
processAnswer(true);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('sm-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### 바디스캔 & 긴장 해소
URL: https://guruka.com/ko/meditate/body-scan-and-tension-release/
Description: 몸에 귀 기울이세요. 내려놓으세요. 몸으로 돌아오세요.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/ko/meditate/body-scan-and-tension-release/');
</script>

### 마음 안정 & 스트레스 해소
URL: https://guruka.com/ko/meditate/calm-and-stress-relief/
Description: 긴장을 풀고, 자신에게 돌아오세요.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/ko/meditate/calm-and-stress-relief/');
</script>

### 집중력과 명료함
URL: https://guruka.com/ko/meditate/focus-and-clarity/
Description: 잡음을 걷어내고. 마음을 날카롭게.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/ko/meditate/focus-and-clarity/');
</script>

### 자비 명상
URL: https://guruka.com/ko/meditate/loving-kindness/
Description: 따뜻함을 전하세요. 먼저 자신에게.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/ko/meditate/loving-kindness/');
</script>

### 아침 에너지
URL: https://guruka.com/ko/meditate/morning-energy/
Description: 부드럽게 깨어나세요. 하루를 맞이하세요.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/ko/meditate/morning-energy/');
</script>

### 감사 명상
URL: https://guruka.com/ko/meditate/gratitude/
Description: 이미 있는 '좋은 것'을 찾아보세요.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/ko/meditate/gratitude/');
</script>

### 수면 & 릴랙세이션
URL: https://guruka.com/ko/meditate/sleep-and-wind-down/
Description: 하루를 내려놓으세요. 쉬는 것으로 충분합니다.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/ko/meditate/sleep-and-wind-down/');
</script>

### 오로라 - 확언 비주얼
URL: https://guruka.com/ko/visuals/aurora/
Description: 화면을 가로지르는 흐르는 오로라 색상 띠. 맞춤 확언 텍스트를 추가하세요. 브라우저에 비공개로 저장됩니다.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #020810;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/ko/visuals/" class="vp-back">&larr; 모든 비주얼</a>
<h1 class="vp-title">오로라</h1>
<p class="vp-desc">흐르는 북극광.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#22d3ee,#10b981)"></div>
<span>아크틱</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#a855f7,#ec4899)"></div>
<span>코즈믹</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f472b6,#eab308)"></div>
<span>새벽</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">확언 텍스트 (선택 사항)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">프리셋 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="선택 사항. 확언을 입력하세요. 텍스트가 한 줄씩 표시됩니다."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">속도 <span id="vp-pace-val">보통</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">시작</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">아무 곳이나 탭하여 종료</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'aurora';
var currentAffId = null;
var paceLabels = ["매우 느림","느림","보통","빠름","매우 빠름"];
var currentPace = 2;
var schemes = [
{ name:'Arctic', bg:'#020810',
bands:[
{colors:['#22d3ee','#06b6d4'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#10b981','#059669'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#22d3ee','#14b8a6'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#34d399','#06b6d4'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#67e8f9','#a7f3d0'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]},
{ name:'Cosmic', bg:'#0a0510',
bands:[
{colors:['#a855f7','#7c3aed'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#ec4899','#be185d'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#c084fc','#e879f9'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#8b5cf6','#d946ef'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#f0abfc','#c4b5fd'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]},
{ name:'Dawn', bg:'#100805',
bands:[
{colors:['#f472b6','#fb923c'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#eab308','#f59e0b'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#fb7185','#fbbf24'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#f9a8d4','#fcd34d'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#fda4af','#fde68a'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]}
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var offCanvas, offCtx, halfW, halfH;

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'없음',text:''},
{title:'평온과 명확함',text:'내 마음은 평온하고 맑다\n통제할 수 없는 것을 내려놓는다\n나는 이 순간에 존재한다'},
{title:'자신감',text:'나는 나 자신과 내 능력을 뿰는다\n나는 좋은 것을 받을 자격이 있다\n나는 매일 더 강해진다'},
{title:'내려놓기',text:'더 이상 도움이 되지 않는 것을 내려놓는다\n나 자신과 다른 사람을 용서한다\n평화를 위한 공간을 만든다'},
{title:'감사',text:'이 순간에 감사한다\n풍요로움이 내 삶에 흐른다\n소박한 것들에 감사한다'},
{title:'집중과 에너지',text:'내 집중력은 날카록고 안정적이다\n목적을 가지고 에너지를 쓴다\n의지를 가지고 앞으로 나아간다'},
{title:'수면과 휴식',text:'쉬어도 된다고 나에게 허락한다\n숨을 쉴 때마다 몸이 이완된다\n평화로운 잠 속으로 빠져든다'},
{title:'금연',text:'내 폐는 매일 깨끗해지고 있다\n나는 어떤 갈망보다 강하다\n모든 호흡이 승리이다'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : '텍스트 지우기') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var time = t / 1000;

// Parse background color for smoothstep
var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);

if (reducedMotion) {
ctx.globalAlpha = 1;
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);
for (var b = 0; b < s.bands.length; b++) {
var band = s.bands[b];
var y = H * band.baseY;
var grad = ctx.createLinearGradient(0, y - H * 0.1, 0, y + H * 0.15);
grad.addColorStop(0, band.colors[0] + '00');
grad.addColorStop(0.3, band.colors[0] + hexAlpha(band.alpha));
grad.addColorStop(0.7, band.colors[1] + hexAlpha(band.alpha * 0.7));
grad.addColorStop(1, band.colors[1] + '00');
ctx.shadowColor = band.colors[0];
ctx.shadowBlur = 15;
ctx.fillStyle = grad;
ctx.fillRect(0, y - H * 0.1, W, H * 0.25);
}
ctx.shadowBlur = 0;
return;
}

var scaleX = halfW / W, scaleY = halfH / H;

// 1. Clear offscreen with background
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// 2. Draw bands on offscreen with 'screen' compositing
offCtx.save();
offCtx.globalCompositeOperation = 'screen';

for (var b = 0; b < s.bands.length; b++) {
var band = s.bands[b];
var pulse = 0.75 + 0.25 * Math.sin(time * 0.08 + b * 0.7);
var vertOsc = Math.sin(time * 0.04 + b * 1.1) * 0.04;
offCtx.beginPath();

var baseY = halfH * (band.baseY + vertOsc);
var amp = halfH * band.amp;
for (var x = 0; x <= halfW; x += 3) {
var realX = x / scaleX;
var noise1 = Math.sin(realX * band.freq + time * band.speed);
var noise2 = Math.sin(realX * band.freq * 1.7 + time * band.speed * 0.6 + 2.1);
var noise3 = Math.sin(realX * band.freq * 0.5 + time * band.speed * 1.3 + 4.3);
var y = baseY + amp * (noise1 * 0.5 + noise2 * 0.3 + noise3 * 0.2);
if (x === 0) offCtx.moveTo(x, y);
else offCtx.lineTo(x, y);
}

offCtx.lineTo(halfW, halfH * (band.baseY + vertOsc + 0.25));
offCtx.lineTo(0, halfH * (band.baseY + vertOsc + 0.25));
offCtx.closePath();

var grad = offCtx.createLinearGradient(0, baseY - amp, 0, baseY + halfH * 0.25);
grad.addColorStop(0, band.colors[0] + hexAlpha(band.alpha * 0.3 * pulse));
grad.addColorStop(0.3, band.colors[0] + hexAlpha(band.alpha * pulse));
grad.addColorStop(0.7, band.colors[1] + hexAlpha(band.alpha * 0.6 * pulse));
grad.addColorStop(1, band.colors[1] + '00');
offCtx.fillStyle = grad;
offCtx.fill();
}

offCtx.restore();

// 3. Smoothstep threshold on offscreen pixel data
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// 4. Upscale to main canvas with smoothing
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

// 5. Draw stars on main canvas at full resolution (stays crisp)
for (var i = 0; i < 60; i++) {
var sx = (Math.sin(i * 127.1 + 311.7) * 0.5 + 0.5) * W;
var sy = (Math.sin(i * 269.5 + 183.3) * 0.5 + 0.5) * H * 0.6;
var sa = 0.2 + 0.3 * Math.abs(Math.sin(time * 0.5 + i));
ctx.beginPath();
ctx.arc(sx, sy, 0.8, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,255,255,' + sa + ')';
ctx.fill();
}

animId = requestAnimationFrame(draw);
}

function hexAlpha(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = '모션 감소 활성화 · 정적 뷰 표시 중<br>아무 곳이나 탭하여 종료';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### 호흡 오브 - 확언 비주얼
URL: https://guruka.com/ko/visuals/breathing-orb/
Description: 호흡 리듬을 안내하는 맥동하는 오브. 맞춤 확언 텍스트를 추가하세요. 브라우저에 비공개로 저장됩니다.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0a0a1a;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/ko/visuals/" class="vp-back">&larr; 모든 비주얼</a>
<h1 class="vp-title">호흡 오브</h1>
<p class="vp-desc">호흡을 안내하는 맥동하는 오브.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#4338ca,#7c3aed)"></div>
<span>트와일라잇</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f97316,#eab308)"></div>
<span>선라이즈</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#059669,#14b8a6)"></div>
<span>포레스트</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">확언 텍스트 (선택 사항)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">프리셋 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="선택 사항. 확언을 입력하세요. 텍스트가 한 줄씩 표시됩니다."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">속도 <span id="vp-pace-val">보통</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">시작</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">아무 곳이나 탭하여 종료</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'breathing-orb';
var currentAffId = null;
var paceLabels = ["매우 느림","느림","보통","빠름","매우 빠름"];
var currentPace = 2;
var schemes = [
{ name:'Twilight', bg:'#0a0a1a', orb:['#6366f1','#a78bfa','#4338ca'], particle:'#c4b5fd' },
{ name:'Sunrise', bg:'#1a0a05', orb:['#f97316','#eab308','#dc2626'], particle:'#fcd34d' },
{ name:'Forest', bg:'#051a0a', orb:['#059669','#14b8a6','#065f46'], particle:'#6ee7b7' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

// Scheme buttons
var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'없음',text:''},
{title:'평온과 명확함',text:'내 마음은 평온하고 맑다\n통제할 수 없는 것을 내려놓는다\n나는 이 순간에 존재한다'},
{title:'자신감',text:'나는 나 자신과 내 능력을 뿰는다\n나는 좋은 것을 받을 자격이 있다\n나는 매일 더 강해진다'},
{title:'내려놓기',text:'더 이상 도움이 되지 않는 것을 내려놓는다\n나 자신과 다른 사람을 용서한다\n평화를 위한 공간을 만든다'},
{title:'감사',text:'이 순간에 감사한다\n풍요로움이 내 삶에 흐른다\n소박한 것들에 감사한다'},
{title:'집중과 에너지',text:'내 집중력은 날카록고 안정적이다\n목적을 가지고 에너지를 쓴다\n의지를 가지고 앞으로 나아간다'},
{title:'수면과 휴식',text:'쉬어도 된다고 나에게 허락한다\n숨을 쉴 때마다 몸이 이완된다\n평화로운 잠 속으로 빠져든다'},
{title:'금연',text:'내 폐는 매일 깨끗해지고 있다\n나는 어떤 갈망보다 강하다\n모든 호흡이 승리이다'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : '텍스트 지우기') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

// Particles
var particles = [];
function initParticles() {
particles = [];
for (var i = 0; i < 100; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
r: 1 + Math.random() * 2.5,
vx: (Math.random() - 0.5) * 0.2,
vy: (Math.random() - 0.5) * 0.2,
phase: Math.random() * Math.PI * 2
});
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running && particles.length === 0) initParticles();
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var cx = W / 2, cy = H / 2;

// Background
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);

// Breathing cycle: 6 seconds
var breathT = t / 1000;
var breathPhase = Math.sin(breathT * Math.PI / 6); // -1 to 1, 12s cycle
var scale = 0.85 + 0.15 * breathPhase;

var baseR = Math.min(W, H) * 0.12;
var orbR = baseR * scale;

// Orb glow layers
for (var g = 3; g >= 0; g--) {
var glowR = orbR * (1 + g * 0.6);
var grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, glowR);
var alpha = (0.08 - g * 0.015);
if (alpha < 0) alpha = 0;
grad.addColorStop(0, s.orb[0] + hexAlpha(alpha + 0.05));
grad.addColorStop(0.5, s.orb[1] + hexAlpha(alpha));
grad.addColorStop(1, s.orb[2] + '00');
ctx.beginPath();
ctx.arc(cx, cy, glowR, 0, Math.PI * 2);
ctx.fillStyle = grad;
ctx.fill();
}

// Core orb
var coreGrad = ctx.createRadialGradient(cx - orbR * 0.2, cy - orbR * 0.2, orbR * 0.1, cx, cy, orbR);
coreGrad.addColorStop(0, s.orb[1]);
coreGrad.addColorStop(0.7, s.orb[0]);
coreGrad.addColorStop(1, s.orb[2]);
ctx.beginPath();
ctx.arc(cx, cy, orbR, 0, Math.PI * 2);
ctx.fillStyle = coreGrad;
ctx.globalAlpha = 0.9;
ctx.fill();
ctx.globalAlpha = 1;

// Particles
if (!reducedMotion) {
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
// Drift toward/away from orb matching breath
var dx = p.x - cx, dy = p.y - cy;
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
var breathPull = breathPhase * 0.15;
p.x += p.vx + (dx / dist) * breathPull;
p.y += p.vy + (dy / dist) * breathPull;

// Wrap around
if (p.x < 0) p.x = W;
if (p.x > W) p.x = 0;
if (p.y < 0) p.y = H;
if (p.y > H) p.y = 0;

// Twinkle
var twinkle = 0.3 + 0.7 * Math.abs(Math.sin(breathT * 0.4 + p.phase));
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fillStyle = s.particle;
ctx.globalAlpha = twinkle * 0.6;
ctx.fill();
}
ctx.globalAlpha = 1;
} else {
// Reduced motion: static orb only, no particles
}

animId = requestAnimationFrame(draw);
}

function hexAlpha(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initParticles();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = '모션 감소 활성화 · 정적 뷰 표시 중<br>아무 곳이나 탭하여 종료';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### 세포 분열 - 확언 비주얼
URL: https://guruka.com/ko/visuals/dividing-cells/
Description: 명상적 루프에서 성장하고 분열하는 세포. 맞춤 확언 텍스트를 추가하세요. 브라우저에 비공개로 저장됩니다.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"].vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"].vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #050a12;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme,.vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"].vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"].vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"].vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"].vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"].vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header.vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"].vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"].vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"].vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"].vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/ko/visuals/" class="vp-back">&larr; 모든 비주얼</a>
<h1 class="vp-title">세포 분열</h1>
<p class="vp-desc">끊임없이 분열하는 세포.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#22d3ee,#14b8a6)"></div>
<span>바이오루미네센스</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#fb923c,#f97316)"></div>
<span>오가닉</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#94a3b8,#e2e8f0)"></div>
<span>마이크로스코프</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">확언 텍스트 (선택 사항)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">프리셋 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="선택 사항. 확언을 입력하세요. 텍스트가 한 줄씩 표시됩니다."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">속도 <span id="vp-pace-val">보통</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">시작</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">아무 곳이나 탭하여 종료</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'dividing-cells';
var currentAffId = null;
var paceLabels = ["매우 느림","느림","보통","빠름","매우 빠름"];
var currentPace = 2;
var schemes = [
{ name:'Bioluminescent', bg:'#050a12',
colors:['#22d3ee','#14b8a6','#06b6d4','#2dd4bf','#67e8f9','#5eead4'] },
{ name:'Organic', bg:'#0a0808',
colors:['#fb923c','#f97316','#fbbf24','#f59e0b','#fdba74','#fcd34d'] },
{ name:'Microscope', bg:'#020508',
colors:['#94a3b8','#cbd5e1','#64748b','#e2e8f0','#475569','#f1f5f9'] }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var maxVisible = 8;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var offCanvas, offCtx, halfW, halfH;

// State
var centerCell = null; // the cell currently growing/dividing at center
var daughters = []; // drifting daughter cells
var cycleState = 'GROWING_AT_CENTER'; // GROWING_AT_CENTER, DIVIDING, STAGING_PAUSE
var pauseTimer = 0;
var nextId = 0;

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'없음',text:''},
{title:'평온과 명확함',text:'내 마음은 평온하고 맑다\n통제할 수 없는 것을 내려놓는다\n나는 이 순간에 존재한다'},
{title:'자신감',text:'나는 나 자신과 내 능력을 뿰는다\n나는 좋은 것을 받을 자격이 있다\n나는 매일 더 강해진다'},
{title:'내려놓기',text:'더 이상 도움이 되지 않는 것을 내려놓는다\n나 자신과 다른 사람을 용서한다\n평화를 위한 공간을 만든다'},
{title:'감사',text:'이 순간에 감사한다\n풍요로움이 내 삶에 흐른다\n소박한 것들에 감사한다'},
{title:'집중과 에너지',text:'내 집중력은 날카록고 안정적이다\n목적을 가지고 에너지를 쓴다\n의지를 가지고 앞으로 나아간다'},
{title:'수면과 휴식',text:'쉬어도 된다고 나에게 허락한다\n숨을 쉴 때마다 몸이 이완된다\n평화로운 잠 속으로 빠져든다'},
{title:'금연',text:'내 폐는 매일 깨끗해지고 있다\n나는 어떤 갈망보다 강하다\n모든 호흡이 승리이다'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : '텍스트 지우기') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
}

function makeOrganelles() {
var orgs = [];
var count = 2 + Math.floor(Math.random() * 2);
for (var i = 0; i < count; i++) {
orgs.push({
dist: 0.3 + Math.random() * 0.35,
angle: Math.random() * Math.PI * 2,
speed: (0.0003 + Math.random() * 0.0004) * (Math.random() < 0.5 ? 1 : -1),
size: 0.06 + Math.random() * 0.04
});
}
return orgs;
}

function spawnCenterCell() {
var W = canvas.width, H = canvas.height;
var minDim = Math.min(W, H);
var targetR = minDim * (0.06 + Math.random() * 0.02);
centerCell = {
id: nextId++,
x: W / 2,
y: H / 2,
r: targetR * 0.15,
targetR: targetR,
divAngle: Math.random() * Math.PI * 2,
colorIdx: Math.floor(Math.random() * 6),
divProgress: 0,
organelles: makeOrganelles(),
opacity: 0.7,
growTimer: 0
};
cycleState = 'GROWING_AT_CENTER';
}

function spawnDaughter(x, y, r, angle, colorIdx, organelles) {
daughters.push({
id: nextId++,
x: x,
y: y,
r: r,
vx: Math.cos(angle) * 0.15,
vy: Math.sin(angle) * 0.15,
phase: Math.random() * Math.PI * 2,
colorIdx: colorIdx,
organelles: organelles,
opacity: 1,
age: 0,
fading: false,
fadeAge: 0
});
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var scaleX = halfW / W, scaleY = halfH / H, scaleR = Math.min(scaleX, scaleY);

var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);

if (reducedMotion) {
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);
offCtx.globalCompositeOperation = 'lighter';
// Draw a center cell mid-division and a couple daughters
var midR = Math.min(W, H) * 0.07;
var ci = 0;
// Two sub-blobs for figure-8
var sep = midR * 0.6;
var a = Math.PI * 0.25;
for (var bi = 0; bi < 2; bi++) {
var bx = (W / 2 + Math.cos(a) * sep * (bi === 0 ? 1 : -1)) * scaleX;
var by = (H / 2 + Math.sin(a) * sep * (bi === 0 ? 1 : -1)) * scaleY;
var br = midR * 0.7 * scaleR;
var grad = offCtx.createRadialGradient(bx, by, 0, bx, by, br * 1.8);
grad.addColorStop(0, s.colors[ci] + 'ff');
grad.addColorStop(0.5, s.colors[ci] + 'cc');
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(bx, by, br * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
// Two static daughters
var dPositions = [[W * 0.25, H * 0.35], [W * 0.72, H * 0.65]];
for (var di = 0; di < 2; di++) {
var dx = dPositions[di][0] * scaleX, dy = dPositions[di][1] * scaleY;
var dr = midR * 0.5 * scaleR;
var grad = offCtx.createRadialGradient(dx, dy, 0, dx, dy, dr * 1.8);
grad.addColorStop(0, s.colors[2] + 'cc');
grad.addColorStop(0.5, s.colors[2] + '99');
grad.addColorStop(1, s.colors[2] + '00');
offCtx.beginPath();
offCtx.arc(dx, dy, dr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
offCtx.globalCompositeOperation = 'source-over';
// Smoothstep
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) { d[j + 3] = 255; }
else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else { d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255; }
}
offCtx.putImageData(imgData, 0, 0);
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);
// Draw nuclei on the two figure-8 blobs
for (var bi = 0; bi < 2; bi++) {
var nx = W / 2 + Math.cos(a) * sep * (bi === 0 ? 1 : -1);
var ny = H / 2 + Math.sin(a) * sep * (bi === 0 ? 1 : -1);
drawNucleus(nx, ny, midR * 0.7, s, ci, t, true);
}
for (var di = 0; di < 2; di++) {
drawNucleus(dPositions[di][0], dPositions[di][1], midR * 0.5, s, 2, t, true);
}
return;
}

// --- UPDATE LOGIC ---

// Force-fade oldest daughters if over max
while (daughters.length > maxVisible) {
var oldest = daughters[0];
oldest.fading = true;
oldest.opacity -= 0.05;
if (oldest.opacity <= 0) daughters.shift();
else break;
}

// Update daughters
for (var i = daughters.length - 1; i >= 0; i--) {
var dc = daughters[i];
dc.age++;

// Sinusoidal wobble drift
dc.x += dc.vx + Math.sin(t * 0.0002 + dc.phase) * 0.06;
dc.y += dc.vy + Math.cos(t * 0.00015 + dc.phase + 1) * 0.06;
dc.vx *= 0.997;
dc.vy *= 0.997;

// Soft boundary bounce
if (dc.x - dc.r < 0) { dc.x = dc.r; dc.vx = Math.abs(dc.vx) * 0.5; }
if (dc.x + dc.r > W) { dc.x = W - dc.r; dc.vx = -Math.abs(dc.vx) * 0.5; }
if (dc.y - dc.r < 0) { dc.y = dc.r; dc.vy = Math.abs(dc.vy) * 0.5; }
if (dc.y + dc.r > H) { dc.y = H - dc.r; dc.vy = -Math.abs(dc.vy) * 0.5; }

// Start fading after ~18 seconds (1080 frames at 60fps)
if (dc.age > 1080 && !dc.fading) dc.fading = true;
if (dc.fading) {
dc.opacity -= 0.003;
if (dc.opacity <= 0) { daughters.splice(i, 1); continue; }
}
}

// Daughter-daughter repulsion
for (var i = 0; i < daughters.length; i++) {
for (var j = i + 1; j < daughters.length; j++) {
var a = daughters[i], b = daughters[j];
var dx = b.x - a.x, dy = b.y - a.y;
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
var minDist = a.r + b.r + 6;
if (dist < minDist) {
var force = (minDist - dist) * 0.015;
var nx = dx / dist, ny = dy / dist;
a.vx -= nx * force; a.vy -= ny * force;
b.vx += nx * force; b.vy += ny * force;
}
}
}

// Center cell lifecycle
if (cycleState === 'GROWING_AT_CENTER') {
if (!centerCell) spawnCenterCell();
var cc = centerCell;
// Grow from tiny to targetR over ~3s (180 frames)
cc.growTimer++;
var growProgress = Math.min(1, cc.growTimer / 180);
// Ease out
growProgress = 1 - (1 - growProgress) * (1 - growProgress);
cc.r = cc.targetR * (0.15 + 0.85 * growProgress);
// Subtle breathing wobble at center
cc.x = W / 2 + Math.sin(t * 0.001) * 1.5;
cc.y = H / 2 + Math.cos(t * 0.0008) * 1.5;

if (cc.growTimer >= 180) {
cycleState = 'DIVIDING';
cc.divProgress = 0;
}
} else if (cycleState === 'DIVIDING') {
var cc = centerCell;
// divProgress 0→1 over ~12s: 0.0014/frame * 60fps ≈ 0.084/s → ~12s
cc.divProgress += 0.0014;
// Keep at center with wobble
cc.x = W / 2 + Math.sin(t * 0.001) * 1.5;
cc.y = H / 2 + Math.cos(t * 0.0008) * 1.5;

if (cc.divProgress >= 1) {
// Spawn two daughters
var angle = cc.divAngle;
var sepDist = cc.r * 0.9;
var newR = cc.r * 0.55;
spawnDaughter(cc.x + Math.cos(angle) * sepDist, cc.y + Math.sin(angle) * sepDist, newR, angle, cc.colorIdx, makeOrganelles());
spawnDaughter(cc.x - Math.cos(angle) * sepDist, cc.y - Math.sin(angle) * sepDist, newR, angle + Math.PI, cc.colorIdx, makeOrganelles());
centerCell = null;
cycleState = 'STAGING_PAUSE';
pauseTimer = 0;
}
} else if (cycleState === 'STAGING_PAUSE') {
pauseTimer++;
// ~1.5s pause (90 frames)
if (pauseTimer >= 90) {
spawnCenterCell();
}
}

// --- RENDER ---

// 1. Clear offscreen
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// 2. Draw additive radial gradients
offCtx.globalCompositeOperation = 'lighter';

// Draw daughters
for (var i = 0; i < daughters.length; i++) {
var dc = daughters[i];
if (dc.opacity <= 0) continue;
var ci = dc.colorIdx % s.colors.length;
var hx = dc.x * scaleX, hy = dc.y * scaleY, hr = dc.r * scaleR;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(dc.opacity));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(dc.opacity * 0.8));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}

// Draw center cell
if (centerCell) {
var cc = centerCell;
var ci = cc.colorIdx % s.colors.length;

if (cycleState === 'DIVIDING') {
// Two sub-blobs with separation based on divProgress
var dp = cc.divProgress;
var sepFactor;
if (dp < 0.3) {
// Elongation phase: 0 → 0.4 * r
sepFactor = (dp / 0.3) * 0.4;
} else if (dp < 0.7) {
// Figure-8 phase: 0.4 → 1.0 * r
sepFactor = 0.4 + ((dp - 0.3) / 0.4) * 0.6;
} else {
// Pinch & split: 1.0 → 1.8 * r (accelerating)
var splitP = (dp - 0.7) / 0.3;
splitP = splitP * splitP; // accelerate
sepFactor = 1.0 + splitP * 0.8;
}

var sep = cc.r * sepFactor;
var a = cc.divAngle;
var x1 = cc.x + Math.cos(a) * sep * 0.5;
var y1 = cc.y + Math.sin(a) * sep * 0.5;
var x2 = cc.x - Math.cos(a) * sep * 0.5;
var y2 = cc.y - Math.sin(a) * sep * 0.5;

// Sub-blob radius: slightly smaller as they separate
var subR = cc.r * (0.75 - dp * 0.15);

var overlapScale = 0.5 + 0.5 * Math.min(1, sepFactor / 1.2);
for (var bi = 0; bi < 2; bi++) {
var bx = (bi === 0 ? x1 : x2) * scaleX;
var by = (bi === 0 ? y1 : y2) * scaleY;
var br = subR * scaleR;
var grad = offCtx.createRadialGradient(bx, by, 0, bx, by, br * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(cc.opacity * overlapScale));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(cc.opacity * 0.8 * overlapScale));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(bx, by, br * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
} else {
// Single blob
var hx = cc.x * scaleX, hy = cc.y * scaleY, hr = cc.r * scaleR;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(cc.opacity));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(cc.opacity * 0.8));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
}

offCtx.globalCompositeOperation = 'source-over';

// 3. Smoothstep threshold
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// 4. Upscale
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

// 5. Draw nuclei and organelles on top at full resolution

// Daughters
for (var i = 0; i < daughters.length; i++) {
var dc = daughters[i];
if (dc.opacity <= 0) continue;
ctx.globalAlpha = dc.opacity;
drawNucleus(dc.x, dc.y, dc.r, s, dc.colorIdx % s.colors.length, t, false);
drawOrganelles(dc.x, dc.y, dc.r, s, dc.colorIdx % s.colors.length, dc.organelles, t, false);
ctx.globalAlpha = 1;
}

// Center cell
if (centerCell) {
var cc = centerCell;
var ci = cc.colorIdx % s.colors.length;
ctx.globalAlpha = cc.opacity;

if (cycleState === 'DIVIDING') {
var dp = cc.divProgress;
var sepFactor;
if (dp < 0.3) sepFactor = (dp / 0.3) * 0.4;
else if (dp < 0.7) sepFactor = 0.4 + ((dp - 0.3) / 0.4) * 0.6;
else { var sp = (dp - 0.7) / 0.3; sp = sp * sp; sepFactor = 1.0 + sp * 0.8; }
var sep = cc.r * sepFactor;
var a = cc.divAngle;
var x1 = cc.x + Math.cos(a) * sep * 0.5;
var y1 = cc.y + Math.sin(a) * sep * 0.5;
var x2 = cc.x - Math.cos(a) * sep * 0.5;
var y2 = cc.y - Math.sin(a) * sep * 0.5;
var subR = cc.r * (0.75 - dp * 0.15);

// Nucleus animation during division
if (dp < 0.25) {
// Elongating single ellipse, draw as stretched nucleus
var nucR = subR * 0.18;
var stretch = 1 + dp * 4;
ctx.save();
ctx.translate(cc.x, cc.y);
ctx.rotate(a);
ctx.scale(stretch, 1 / Math.sqrt(stretch));
drawNucleus(0, 0, subR, s, ci, t, false);
ctx.restore();
} else if (dp < 0.35) {
// Cross-fade from ellipse to two dots
var fadeT = (dp - 0.25) / 0.1;
// Fading single
ctx.globalAlpha = cc.opacity * (1 - fadeT);
drawNucleus(cc.x, cc.y, subR, s, ci, t, false);
// Appearing pair
ctx.globalAlpha = cc.opacity * fadeT;
drawNucleus(x1, y1, subR, s, ci, t, false);
drawNucleus(x2, y2, subR, s, ci, t, false);
ctx.globalAlpha = cc.opacity;
} else {
// Two separate nuclei
drawNucleus(x1, y1, subR, s, ci, t, false);
drawNucleus(x2, y2, subR, s, ci, t, false);
}

// Organelles split between the two halves
var halfOrg = Math.floor(cc.organelles.length / 2);
drawOrganelles(x1, y1, subR, s, ci, cc.organelles.slice(0, halfOrg), t, false);
drawOrganelles(x2, y2, subR, s, ci, cc.organelles.slice(halfOrg), t, false);
} else {
drawNucleus(cc.x, cc.y, cc.r, s, ci, t, false);
drawOrganelles(cc.x, cc.y, cc.r, s, ci, cc.organelles, t, false);
}
ctx.globalAlpha = 1;
}

animId = requestAnimationFrame(draw);
}

function alphaHex(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hexToRgba(hex, a) {
var r = parseInt(hex.slice(1,3), 16);
var g = parseInt(hex.slice(3,5), 16);
var b = parseInt(hex.slice(5,7), 16);
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
}

function drawNucleus(x, y, r, s, ci, t, isStatic) {
var nucR = r * 0.18;
var nucColor = s.colors[(ci + 1) % s.colors.length];
var ng = ctx.createRadialGradient(x, y, 0, x, y, nucR);
ng.addColorStop(0, hexToRgba(nucColor, 0.8));
ng.addColorStop(0.6, hexToRgba(nucColor, 0.35));
ng.addColorStop(1, hexToRgba(nucColor, 0));
ctx.beginPath();
ctx.arc(x, y, nucR, 0, Math.PI * 2);
ctx.fillStyle = ng;
ctx.fill();
}

function drawOrganelles(x, y, r, s, ci, organelles, t, isStatic) {
if (!organelles) return;
for (var k = 0; k < organelles.length; k++) {
var org = organelles[k];
var oAngle = org.angle + (isStatic ? 0 : (t || 0) * org.speed);
var ox = x + Math.cos(oAngle) * r * org.dist;
var oy = y + Math.sin(oAngle) * r * org.dist;
var oSize = r * org.size;
ctx.beginPath();
ctx.arc(ox, oy, oSize, 0, Math.PI * 2);
var orgColor = s.colors[(ci + 2) % s.colors.length];
ctx.fillStyle = hexToRgba(orgColor, 0.4);
ctx.fill();
}
}

function hideNavFooter() {
var header = document.querySelector('header, nav,.site-header, [class*="header"]');
var footer = document.querySelector('footer,.site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav,.site-header, [class*="header"]');
var footer = document.querySelector('footer,.site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
daughters = [];
centerCell = null;
nextId = 0;
spawnCenterCell();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = '모션 감소 활성화 · 정적 뷰 표시 중<br>아무 곳이나 탭하여 종료';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### 용암 흐름 - 확언 비주얼
URL: https://guruka.com/ko/visuals/lava-flow/
Description: 떠다니며 합쳐지고 분리되는 용암 방울. 맞춤 확언 텍스트를 추가하세요. 브라우저에 비공개로 저장됩니다.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0d0505;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/ko/visuals/" class="vp-back">&larr; 모든 비주얼</a>
<h1 class="vp-title">용암 흐름</h1>
<p class="vp-desc">합쳐지고 분리되는 방울.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f97316,#ef4444)"></div>
<span>마그마</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#06b6d4,#d946ef)"></div>
<span>네온</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#059669,#84cc16)"></div>
<span>에메랄드</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">확언 텍스트 (선택 사항)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">프리셋 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="선택 사항. 확언을 입력하세요. 텍스트가 한 줄씩 표시됩니다."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">속도 <span id="vp-pace-val">보통</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">시작</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">아무 곳이나 탭하여 종료</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'lava-flow';
var currentAffId = null;
var paceLabels = ["매우 느림","느림","보통","빠름","매우 빠름"];
var currentPace = 2;
var schemes = [
{ name:'Magma', bg:'#0d0505', colors:['#ff4500','#ff6b35','#ffaa00','#ff2200','#ff8c00','#cc3300','#ff5500'] },
{ name:'Neon', bg:'#050510', colors:['#00e5ff','#e040fb','#2979ff','#00bcd4','#d500f9','#448aff','#18ffff'] },
{ name:'Emerald', bg:'#050d08', colors:['#00c853','#1de9b6','#76ff03','#00e676','#64ffda','#69f0ae','#b2ff59'] }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'없음',text:''},
{title:'평온과 명확함',text:'내 마음은 평온하고 맑다\n통제할 수 없는 것을 내려놓는다\n나는 이 순간에 존재한다'},
{title:'자신감',text:'나는 나 자신과 내 능력을 뿰는다\n나는 좋은 것을 받을 자격이 있다\n나는 매일 더 강해진다'},
{title:'내려놓기',text:'더 이상 도움이 되지 않는 것을 내려놓는다\n나 자신과 다른 사람을 용서한다\n평화를 위한 공간을 만든다'},
{title:'감사',text:'이 순간에 감사한다\n풍요로움이 내 삶에 흐른다\n소박한 것들에 감사한다'},
{title:'집중과 에너지',text:'내 집중력은 날카록고 안정적이다\n목적을 가지고 에너지를 쓴다\n의지를 가지고 앞으로 나아간다'},
{title:'수면과 휴식',text:'쉬어도 된다고 나에게 허락한다\n숨을 쉴 때마다 몸이 이완된다\n평화로운 잠 속으로 빠져든다'},
{title:'금연',text:'내 폐는 매일 깨끗해지고 있다\n나는 어떤 갈망보다 강하다\n모든 호흡이 승리이다'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : '텍스트 지우기') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

var blobs = [];
var offCanvas, offCtx, halfW, halfH;

function initBlobs() {
blobs = [];
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
var minDim = Math.min(W, H);
var blobCount = Math.max(9, Math.min(Math.floor(minDim / 100), 15));
for (var i = 0; i < blobCount; i++) {
blobs.push({
x: 0.15 * W + Math.random() * 0.7 * W,
y: Math.random() * H,
vx: (Math.random() - 0.5) * 0.1,
vy: -(0.075 + Math.random() * 0.075),
baseR: minDim * (0.04 + Math.random() * 0.04),
phase: Math.random() * Math.PI * 2
});
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running) initBlobs();
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;

// Clear offscreen
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// Update and draw blobs on offscreen canvas at half res
for (var i = 0; i < blobs.length; i++) {
var b = blobs[i];
var r = b.baseR + Math.sin(t * 0.0004 + b.phase) * 12;

if (!reducedMotion) {
b.x += b.vx + Math.sin(t * 0.000075 + b.phase) * 0.15;
b.y += b.vy + Math.cos(t * 0.0001 + b.phase) * 0.15;

// Wrap vertically: when blob fully exits top, respawn at bottom
if (b.y + r * 2 < 0) {
b.y = H + r * 2;
b.x = 0.15 * W + Math.random() * 0.7 * W;
}
// Soft horizontal wrap
if (b.x < -r) b.x = W + r;
if (b.x > W + r) b.x = -r;
}

// Draw radial gradient blob on offscreen at 3/4 resolution
var scaleX = halfW / W, scaleY = halfH / H;
var hx = b.x * scaleX, hy = b.y * scaleY, hr = r * Math.min(scaleX, scaleY);
var ci = i % s.colors.length;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + 'ff');
grad.addColorStop(0.5, s.colors[ci] + 'cc');
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.globalCompositeOperation = 'lighter';
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
offCtx.globalCompositeOperation = 'source-over';

// Apply smoothstep threshold for metaball effect (smooth edges)
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
// Smoothstep interpolation between background and blob color
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt); // smoothstep
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// Scale up to main canvas
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initBlobs();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = '모션 감소 활성화 · 정적 뷰 표시 중<br>아무 곳이나 탭하여 종료';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### 만다라 - 확언 비주얼
URL: https://guruka.com/ko/visuals/mandala/
Description: 진화하는 대칭성을 가진 천천히 회전하는 신성한 기하학. 맞춤 확언 텍스트를 추가하세요. 브라우저에 비공개로 저장됩니다.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0a0808;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/ko/visuals/" class="vp-back">&larr; 모든 비주얼</a>
<h1 class="vp-title">만다라</h1>
<p class="vp-desc">회전하는 신성한 기하학.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#eab308,#f59e0b)"></div>
<span>골든</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#6366f1,#a855f7)"></div>
<span>셀레스티얼</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#14b8a6,#10b981)"></div>
<span>제이드</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">확언 텍스트 (선택 사항)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">프리셋 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="선택 사항. 확언을 입력하세요. 텍스트가 한 줄씩 표시됩니다."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">속도 <span id="vp-pace-val">보통</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">시작</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">아무 곳이나 탭하여 종료</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'mandala';
var currentAffId = null;
var paceLabels = ["매우 느림","느림","보통","빠름","매우 빠름"];
var currentPace = 2;
var schemes = [
{ name:'Golden', bg:'#0a0808', stroke:'#d4a017', strokeAlt:'#f5c842', dot:'#fff8dc', bgFill:'rgba(10,8,8,' },
{ name:'Celestial', bg:'#05050f', stroke:'#818cf8', strokeAlt:'#c084fc', dot:'#e0e7ff', bgFill:'rgba(5,5,15,' },
{ name:'Jade', bg:'#050a08', stroke:'#2dd4bf', strokeAlt:'#34d399', dot:'#d1fae5', bgFill:'rgba(5,10,8,' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'없음',text:''},
{title:'평온과 명확함',text:'내 마음은 평온하고 맑다\n통제할 수 없는 것을 내려놓는다\n나는 이 순간에 존재한다'},
{title:'자신감',text:'나는 나 자신과 내 능력을 뿰는다\n나는 좋은 것을 받을 자격이 있다\n나는 매일 더 강해진다'},
{title:'내려놓기',text:'더 이상 도움이 되지 않는 것을 내려놓는다\n나 자신과 다른 사람을 용서한다\n평화를 위한 공간을 만든다'},
{title:'감사',text:'이 순간에 감사한다\n풍요로움이 내 삶에 흐른다\n소박한 것들에 감사한다'},
{title:'집중과 에너지',text:'내 집중력은 날카록고 안정적이다\n목적을 가지고 에너지를 쓴다\n의지를 가지고 앞으로 나아간다'},
{title:'수면과 휴식',text:'쉬어도 된다고 나에게 허락한다\n숨을 쉴 때마다 몸이 이완된다\n평화로운 잠 속으로 빠져든다'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : '텍스트 지우기') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

var rings = [
{ radius: 0.08, folds: 12, speed: 0.00008, dir: 1, type: 'dots' },
{ radius: 0.18, folds: 8, speed: 0.00006, dir: -1, type: 'petals' },
{ radius: 0.30, folds: 12, speed: 0.00004, dir: 1, type: 'lines' },
{ radius: 0.42, folds: 8, speed: 0.00007, dir: -1, type: 'petals' },
{ radius: 0.55, folds: 16, speed: 0.00003, dir: 1, type: 'dots' },
{ radius: 0.68, folds: 12, speed: 0.00005, dir: -1, type: 'lines' },
{title:'금연',text:'내 폐는 매일 깨끗해지고 있다\n나는 어떤 갈망보다 강하다\n모든 호흡이 승리이다'}
];

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var cx = W / 2, cy = H / 2;
var maxR = Math.min(W, H) * 0.65;

// Trail effect
ctx.fillStyle = s.bgFill + '0.04)';
ctx.fillRect(0, 0, W, H);

var baseAngle = reducedMotion ? 0 : t * 0.00005;

for (var ri = 0; ri < rings.length; ri++) {
var ring = rings[ri];
var ringR = maxR * ring.radius;
var folds = ring.folds;
var angle = reducedMotion ? 0 : baseAngle * ring.dir + t * ring.speed * ring.dir;
var breathe = reducedMotion ? 1 : (1 + 0.15 * Math.sin(t * 0.0005 + ri * 1.2));
var alphaFade = 1 - ri * 0.10;

ctx.save();
ctx.translate(cx, cy);
ctx.rotate(angle);

for (var f = 0; f < folds; f++) {
var fAngle = (f / folds) * Math.PI * 2;
ctx.save();
ctx.rotate(fAngle);

if (ring.type === 'dots') {
var dotR = (3 + Math.sin(t * 0.0008 + ri + f) * 2) * breathe;
ctx.shadowColor = s.stroke;
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.arc(ringR * breathe, 0, dotR, 0, Math.PI * 2);
ctx.fillStyle = s.dot;
ctx.globalAlpha = alphaFade * 0.7;
ctx.fill();
ctx.shadowBlur = 0;
} else if (ring.type === 'petals') {
var petalLen = (20 + Math.sin(t * 0.0006 + ri * 2) * 10) * breathe;
var petalW = (8 + Math.sin(t * 0.0004 + f) * 3) * breathe;
ctx.shadowColor = s.stroke;
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.moveTo(ringR * breathe - petalLen * 0.3, 0);
ctx.quadraticCurveTo(ringR * breathe, -petalW, ringR * breathe + petalLen * 0.7, 0);
ctx.quadraticCurveTo(ringR * breathe, petalW, ringR * breathe - petalLen * 0.3, 0);
ctx.strokeStyle = s.stroke;
ctx.lineWidth = 1.2;
ctx.globalAlpha = alphaFade * 0.6;
ctx.stroke();
ctx.shadowBlur = 0;
} else if (ring.type === 'lines') {
var lineLen = (15 + Math.sin(t * 0.0007 + f * 0.5) * 8) * breathe;
ctx.shadowColor = s.strokeAlt;
ctx.shadowBlur = 3;
ctx.beginPath();
ctx.moveTo(ringR * breathe - lineLen, 0);
ctx.lineTo(ringR * breathe + lineLen, 0);
ctx.strokeStyle = s.strokeAlt;
ctx.lineWidth = 1;
ctx.globalAlpha = alphaFade * 0.4;
ctx.stroke();
// End dots
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.arc(ringR * breathe - lineLen, 0, 1.5, 0, Math.PI * 2);
ctx.arc(ringR * breathe + lineLen, 0, 1.5, 0, Math.PI * 2);
ctx.fillStyle = s.strokeAlt;
ctx.globalAlpha = alphaFade * 0.5;
ctx.fill();
ctx.shadowBlur = 0;
}

ctx.restore();
}

ctx.restore();
}

// Center dot
ctx.beginPath();
ctx.arc(cx, cy, 4, 0, Math.PI * 2);
ctx.fillStyle = s.dot;
ctx.globalAlpha = 0.8;
ctx.fill();
ctx.globalAlpha = 1;

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
// Clear canvas fully before starting
ctx.fillStyle = schemes[currentScheme].bg;
ctx.fillRect(0, 0, canvas.width, canvas.height);
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = '모션 감소 활성화 · 정적 뷰 표시 중<br>아무 곳이나 탭하여 종료';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### 별빛 필드 - 확언 비주얼
URL: https://guruka.com/ko/visuals/starfield/
Description: 깊은 우주를 떠도는 반짝이는 별들. 맞춤 확언 텍스트를 추가하세요. 브라우저에 비공개로 저장됩니다.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #020510;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/ko/visuals/" class="vp-back">&larr; 모든 비주얼</a>
<h1 class="vp-title">별빛 필드</h1>
<p class="vp-desc">깊은 우주에서 반짝이는 별들.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#1e293b,#475569)"></div>
<span>딥 스페이스</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#4c1d95,#a855f7)"></div>
<span>네뷸라</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#78350f,#f59e0b)"></div>
<span>따뜻한 코스모스</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">확언 텍스트 (선택 사항)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">프리셋 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="선택 사항. 확언을 입력하세요. 텍스트가 한 줄씩 표시됩니다."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">속도 <span id="vp-pace-val">보통</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">시작</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">아무 곳이나 탭하여 종료</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'starfield';
var currentAffId = null;
var paceLabels = ["매우 느림","느림","보통","빠름","매우 빠름"];
var currentPace = 2;
var schemes = [
{ name:'Deep Space', bg:'#020510', starColor:'rgba(200,220,255,', glowColor:'rgba(80,100,180,0.015)', shootColor:'rgba(200,220,255,' },
{ name:'Nebula', bg:'#0a0515', starColor:'rgba(220,200,255,', glowColor:'rgba(160,80,200,0.03)', shootColor:'rgba(200,160,255,' },
{ name:'Warm Cosmos', bg:'#0a0805', starColor:'rgba(255,220,160,', glowColor:'rgba(180,120,60,0.015)', shootColor:'rgba(255,200,100,' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'없음',text:''},
{title:'평온과 명확함',text:'내 마음은 평온하고 맑다\n통제할 수 없는 것을 내려놓는다\n나는 이 순간에 존재한다'},
{title:'자신감',text:'나는 나 자신과 내 능력을 뿰는다\n나는 좋은 것을 받을 자격이 있다\n나는 매일 더 강해진다'},
{title:'내려놓기',text:'더 이상 도움이 되지 않는 것을 내려놓는다\n나 자신과 다른 사람을 용서한다\n평화를 위한 공간을 만든다'},
{title:'감사',text:'이 순간에 감사한다\n풍요로움이 내 삶에 흐른다\n소박한 것들에 감사한다'},
{title:'집중과 에너지',text:'내 집중력은 날카록고 안정적이다\n목적을 가지고 에너지를 쓴다\n의지를 가지고 앞으로 나아간다'},
{title:'수면과 휴식',text:'쉬어도 된다고 나에게 허락한다\n숨을 쉴 때마다 몸이 이완된다\n평화로운 잠 속으로 빠져든다'},
{title:'금연',text:'내 폐는 매일 깨끗해지고 있다\n나는 어떤 갈망보다 강하다\n모든 호흡이 승리이다'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : '텍스트 지우기') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});

var starsBack = [], starsMid = [], starsFront = [];
var shootingStars = [];
var lastShootTime = 0;

function initStars() {
starsBack = []; starsMid = []; starsFront = [];
shootingStars = [];
var W = canvas.width, H = canvas.height;
for (var i = 0; i < 200; i++) {
starsBack.push({ x: Math.random() * W, y: Math.random() * H, size: 0.5 + Math.random() * 1, baseAlpha: 0.3 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
for (var i = 0; i < 100; i++) {
starsMid.push({ x: Math.random() * W, y: Math.random() * H, size: 1 + Math.random() * 1.5, baseAlpha: 0.4 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
for (var i = 0; i < 50; i++) {
starsFront.push({ x: Math.random() * W, y: Math.random() * H, size: 1.5 + Math.random() * 2, baseAlpha: 0.6 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running) initStars();
}

function drawStarLayer(stars, speed, t, s, W, H) {
for (var i = 0; i < stars.length; i++) {
var st = stars[i];
var twinkle = st.baseAlpha * (0.5 + 0.5 * Math.sin(t * 0.001 + st.phase));
// Glow for larger stars
if (st.size > 2) {
ctx.beginPath();
ctx.arc(st.x, st.y, st.size * 3, 0, Math.PI * 2);
ctx.fillStyle = s.starColor + (twinkle * 0.15).toFixed(3) + ')';
ctx.fill();
}
ctx.beginPath();
ctx.arc(st.x, st.y, st.size, 0, Math.PI * 2);
ctx.fillStyle = s.starColor + twinkle.toFixed(3) + ')';
ctx.fill();
}
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;

ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);

// Subtle center glow
var glow = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.max(W, H) * 0.5);
glow.addColorStop(0, s.glowColor);
glow.addColorStop(1, 'transparent');
ctx.fillStyle = glow;
ctx.fillRect(0, 0, W, H);

// Draw star layers with parallax speeds
drawStarLayer(starsBack, 0.025, t, s, W, H);
drawStarLayer(starsMid, 0.06, t, s, W, H);
drawStarLayer(starsFront, 0.12, t, s, W, H);

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initStars();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = '모션 감소 활성화 · 정적 뷰 표시 중<br>아무 곳이나 탭하여 종료';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 2500 : 1500);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Color Clash - Jogo de Treinamento Cerebral
URL: https://guruka.com/pt/games/color-clash/
Description: Escolha cores por regras.

<style>
#color-clash-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #color-clash-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#cc-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.cc-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#cc-instructions.cc-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#cc-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#cc-instructions.cc-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #cc-instructions.cc-subtitle {
color: var(--color-dark-text-secondary);
}

#cc-instructions.cc-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #cc-instructions.cc-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#cc-instructions.cc-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#cc-instructions.cc-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#cc-instructions.cc-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.cc-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].cc-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.cc-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.cc-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.cc-btn-primary:hover {
background: var(--color-primary-hover);
}

.cc-btn-primary:active {
transform: scale(0.97);
}

.cc-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.cc-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"].cc-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#cc-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#cc-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: cc-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #cc-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes cc-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.cc-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.cc-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.cc-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].cc-wizard-desc {
color: var(--color-dark-text-secondary);
}
.cc-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.cc-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.cc-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].cc-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"].cc-wizard-dot.active {
background: var(--color-primary);
}
.cc-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.cc-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#cc-wizard-card {
padding: 1.5rem 1rem;
}
.cc-wizard-icon {
font-size: 2rem;
}
.cc-wizard-title {
font-size: 1.1rem;
}
.cc-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#cc-playing {
display: none;
flex: 1;
flex-direction: column;
}

.cc-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].cc-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.cc-stat {
text-align: center;
}

.cc-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"].cc-stat-label {
color: var(--color-dark-text-secondary);
}

.cc-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.cc-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.cc-level-text {
font-weight: 600;
}

.cc-modifier-badge {
background: #ec4899;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.cc-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].cc-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.cc-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.cc-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"].cc-timer-bar {
background: var(--color-dark-bg-secondary);
}

.cc-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.cc-timer-fill.cc-timer-warning {
background: #ef4444;
}

/* ── Rule Indicator ── */
.cc-rule-indicator {
text-align: center;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 1rem;
transition: background 0.3s, color 0.3s;
}

.cc-rule-ink {
background: rgba(236,72,153,0.15);
color: #ec4899;
border: 1px solid rgba(236,72,153,0.3);
}

[data-theme="dark"].cc-rule-ink {
background: rgba(236,72,153,0.25);
color: #f472b6;
}

.cc-rule-word {
background: rgba(59,130,246,0.15);
color: #3b82f6;
border: 1px solid rgba(59,130,246,0.3);
}

[data-theme="dark"].cc-rule-word {
background: rgba(59,130,246,0.25);
color: #60a5fa;
}

.cc-rule-bg {
background: rgba(168,85,247,0.15);
color: #a855f7;
border: 1px solid rgba(168,85,247,0.3);
}

[data-theme="dark"].cc-rule-bg {
background: rgba(168,85,247,0.25);
color: #c084fc;
}

/* ── Stimulus Display ── */
.cc-stimulus-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
position: relative;
}

.cc-stimulus-word {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.2;
animation: cc-stimulus-enter 0.2s ease-out;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.cc-stimulus-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
animation: cc-stimulus-enter 0.2s ease-out;
}

.cc-bg-square {
width: 50px;
height: 50px;
border-radius: 0.5rem;
border: 2px solid rgba(0,0,0,0.1);
flex-shrink: 0;
}

[data-theme="dark"].cc-bg-square {
border-color: rgba(255,255,255,0.15);
}

@keyframes cc-stimulus-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.cc-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.cc-feedback-flash.cc-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.cc-feedback-flash.cc-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.cc-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.cc-feedback-icon.cc-show-check {
animation: cc-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.cc-feedback-icon.cc-show-x {
animation: cc-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes cc-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Color Answer Buttons ── */
.cc-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.cc-answer-btn {
padding: 0.75rem;
border: 2px solid transparent;
border-radius: 0.75rem;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, opacity 0.15s;
color: #fff;
min-height: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}

.cc-color-circle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.4);
background: currentColor;
}

.cc-answer-btn:active {
transform: scale(0.95);
}

.cc-answer-btn:hover {
opacity: 0.9;
border-color: rgba(255,255,255,0.5);
}

.cc-answer-btn.cc-correct-flash {
border-color: #22c55e;
box-shadow: 0 0 15px rgba(34,197,94,0.4);
}

.cc-answer-btn.cc-wrong-flash {
border-color: #ef4444;
box-shadow: 0 0 15px rgba(239,68,68,0.4);
}

.cc-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].cc-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#cc-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#cc-pause-overlay.cc-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#cc-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.cc-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: cc-modal-enter 0.3s ease-out;
}

[data-theme="dark"].cc-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes cc-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.cc-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.cc-complete-card.cc-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.cc-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.cc-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: cc-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes cc-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.cc-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.cc-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"].cc-complete-stat {
background: var(--color-dark-bg-secondary);
}

.cc-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"].cc-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.cc-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.cc-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.cc-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"].cc-back-link {
color: var(--color-dark-text-secondary);
}

.cc-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.cc-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.cc-level-up-toast.cc-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#color-clash-game {
padding: 0.5rem;
}
.cc-stimulus-word {
font-size: 2.5rem;
}
.cc-answer-btn {
padding: 0.5rem;
min-height: 60px;
font-size: 0.7rem;
}
.cc-color-circle {
width: 40px;
height: 40px;
}
.cc-header {
padding: 0.5rem;
gap: 0.25rem;
}
.cc-stat-value {
font-size: 1rem;
}
#cc-instructions { padding: 0.75rem 0.5rem; }
#cc-instructions.cc-icon { font-size: 2rem; margin-bottom: 0; }
#cc-instructions h2 { font-size: 1.3rem; }
#cc-instructions.cc-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#cc-instructions.cc-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#cc-instructions.cc-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.cc-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
.cc-bg-square { width: 40px; height: 40px; }
}
@media (max-width: 640px) {
#color-clash-game {
padding: 0.75rem;
}
.cc-stimulus-word {
font-size: 3rem;
}
.cc-answer-btn {
padding: 0.625rem;
}
}
@media (max-width: 360px) {
.cc-stimulus-word {
font-size: 2rem;
}
.cc-answer-btn {
padding: 0.5rem;
font-size: 0.65rem;
min-height: 54px;
}
.cc-color-circle {
width: 34px;
height: 34px;
}
.cc-complete-stats {
grid-template-columns: 1fr 1fr;
}
.cc-final-score {
font-size: 2rem;
}
.cc-header {
padding: 0.375rem;
}
.cc-stat-value {
font-size: 0.9rem;
}
.cc-rule-indicator {
font-size: 0.8rem;
padding: 0.4rem 0.75rem;
}
}
@keyframes cc-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.cc-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.cc-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: cc-confetti-fall 2.5s ease-in forwards;
}
.cc-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(236,72,153,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: cc-glow-fade 1s ease-out forwards;
}
@keyframes cc-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.cc-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: cc-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(236,72,153,0.4);
}
@keyframes cc-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#color-clash-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#color-clash-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #color-clash-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#color-clash-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#color-clash-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="color-clash-game">

<div id="cc-instructions">
<div class="cc-title-row"><span class="cc-icon">&#127912;</span><h2>Color Clash</h2></div>
<p class="cc-subtitle">Controle inibitorio baseado em Stroop e atencao seletiva</p>
<div class="cc-how-to">
<h3>Como Jogar</h3>
<ol>
<li>Uma palavra de cor aparece em uma <strong>cor de tinta diferente</strong>.</li>
<li>Siga o <strong>indicador de regra</strong>, toque na cor correta de acordo com a regra atual.</li>
<li>As regras alternam entre <strong>"cor da tinta"</strong> e <strong>"significado da palavra"</strong> conforme voce sobe de nivel.</li>


</ol>
</div>
<div id="cc-best-display" class="cc-personal-best" style="display:none;">
Recorde: <strong id="cc-best-score">0</strong> Pontos
</div>
<button class="cc-btn-primary" id="cc-start-btn">Iniciar</button>
<div id="cc-challenge-banner-wrap"></div>
</div>

<div id="cc-wizard">
<div id="cc-wizard-card"></div>
</div>

<div id="cc-playing">
<div class="cc-header">
<div class="cc-stat">
<div class="cc-stat-label">Pontos</div>
<div class="cc-stat-value" id="cc-score">0</div>
</div>
<div class="cc-stat">
<div class="cc-stat-label">Sequencia</div>
<div class="cc-stat-value" id="cc-streak">0</div>
</div>
<div class="cc-stat">
<div class="cc-stat-label">Nivel</div>
<div class="cc-stat-value" id="cc-level">1</div>
</div>
</div>
<div class="cc-level-info">
<span class="cc-level-text">Level <span id="cc-level-text">1</span></span>
<span class="cc-modifier-badge" id="cc-modifier-badge" style="display:none;">Troca de Regra</span>
</div>
<div class="cc-progress-bar">
<div class="cc-progress-fill" id="cc-progress-fill" style="width:0%"></div>
</div>
<div class="cc-timer-bar">
<div class="cc-timer-fill" id="cc-timer-fill" style="width:100%"></div>
</div>
<div class="cc-rule-indicator cc-rule-ink" id="cc-rule-indicator">Tippe auf die TINTENFARBE</div>
<div class="cc-stimulus-area">
<div class="cc-feedback-flash" id="cc-feedback-flash"></div>
<div class="cc-feedback-icon" id="cc-feedback-icon"></div>
<div id="cc-stimulus-wrap" class="cc-stimulus-wrap">
<span class="cc-stimulus-word" id="cc-stimulus-word"></span>
<div class="cc-bg-square" id="cc-bg-square" style="display:none;"></div>
</div>
</div>
<div class="cc-answers" id="cc-answers">
<button class="cc-answer-btn" id="cc-ans-0"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-1"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-2"><div class="cc-color-circle"></div><span></span></button>
<button class="cc-answer-btn" id="cc-ans-3"><div class="cc-color-circle"></div><span></span></button>
</div>
<div class="cc-playing-hint">Dr&uuml;cke <strong>1-4</strong> zum Antworten &middot; <strong>Esc</strong> zum Pausieren</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="cc-pause-btn" type="button">Pausar</button>
<button class="gk-finish-btn" id="cc-finish-btn" type="button">Encerrar Jogo</button>
</div>
</div>

<div id="cc-pause-overlay">
<div class="cc-pause-text">Pausado</div>
<button class="cc-btn-primary" id="cc-resume-btn">Continuar</button>
</div>

<div id="cc-complete-overlay">
<div class="cc-complete-card">
<button class="gk-complete-close" id="cc-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="cc-trophy">&#127942;</div>
<h2>Jogo Concluido!</h2>
<div class="cc-final-score" id="cc-final-score">0</div>
<div id="cc-new-best" class="cc-new-best" style="display:none;">&#11088; Novo Recorde!</div>
<div class="gk-challenge-result" id="cc-challenge-result" style="display:none;"></div>
<div class="cc-complete-stats">
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Nivel</div>
<div class="cc-complete-stat-value" id="cc-final-level">1</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Precisao</div>
<div class="cc-complete-stat-value" id="cc-final-accuracy">0%</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Sequencia</div>
<div class="cc-complete-stat-value" id="cc-final-streak">0</div>
</div>
<div class="cc-complete-stat">
<div class="cc-complete-stat-label">Recorde</div>
<div class="cc-complete-stat-value" id="cc-final-best">0</div>
</div>
</div>
<div class="cc-complete-actions">
<button class="cc-btn-primary" id="cc-play-again-btn">Repetir</button>
<button class="gk-runtime-history-toggle" id="cc-history-toggle" type="button">Show History</button>
<a href="/pt/games/" class="cc-back-link">&larr; Todos os Jogos</a>
</div>
<div class="gk-runtime-history-panel" id="cc-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="cc-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="cc-share-btn">&#128279; Compartilhar resultado</button>
<div class="gk-share-copied" id="cc-share-copied" style="display:none;">Copiado!</div>
</div>
</div>
</div>

<div class="cc-level-up-toast" id="cc-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_color-clash_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('cc-history-toggle', 'cc-history-panel', 'cc-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

/* ── Color pool ── */
var COLORS = [
{ name: 'Vermelho', hex: '#ef4444' },
{ name: 'Azul', hex: '#3b82f6' },
{ name: 'Verde', hex: '#22c55e' },
{ name: 'Amarelo', hex: '#eab308' },
{ name: 'Roxo', hex: '#a855f7' },
{ name: 'Laranja', hex: '#f97316' },
{ name: 'Rosa', hex: '#ec4899' },
{ name: 'Turquesa', hex: '#06b6d4' }
];

var RULES = { INK: 'ink', WORD: 'word', BG: 'bg' };

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctColorName: '',
currentRule: RULES.INK,
currentStimulus: null,
currentChoices: [],
roundsSinceRuleSwitch: 0,
nextRuleSwitchAt: 0
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('cc-instructions');
var elWizard = document.getElementById('cc-wizard');
var elWizardCard = document.getElementById('cc-wizard-card');
var elPlaying = document.getElementById('cc-playing');
var elPauseOverlay = document.getElementById('cc-pause-overlay');
var elCompleteOverlay = document.getElementById('cc-complete-overlay');
var elScore = document.getElementById('cc-score');
var elStreak = document.getElementById('cc-streak');
var elLevel = document.getElementById('cc-level');
var elLevelText = document.getElementById('cc-level-text');
var elModifierBadge = document.getElementById('cc-modifier-badge');
var elProgressFill = document.getElementById('cc-progress-fill');
var elTimerFill = document.getElementById('cc-timer-fill');
var elRuleIndicator = document.getElementById('cc-rule-indicator');
var elStimulusWord = document.getElementById('cc-stimulus-word');
var elStimulusWrap = document.getElementById('cc-stimulus-wrap');
var elBgSquare = document.getElementById('cc-bg-square');
var elFeedbackFlash = document.getElementById('cc-feedback-flash');
var elFeedbackIcon = document.getElementById('cc-feedback-icon');
var elFinalScore = document.getElementById('cc-final-score');
var elNewBest = document.getElementById('cc-new-best');
var elFinalLevel = document.getElementById('cc-final-level');
var elFinalAccuracy = document.getElementById('cc-final-accuracy');
var elFinalStreak = document.getElementById('cc-final-streak');
var elFinalBest = document.getElementById('cc-final-best');
var elBestDisplay = document.getElementById('cc-best-display');
var elBestScore = document.getElementById('cc-best-score');
var elLevelToast = document.getElementById('cc-level-toast');
var btnStart = document.getElementById('cc-start-btn');
var btnResume = document.getElementById('cc-resume-btn');
var btnPlayAgain = document.getElementById('cc-play-again-btn');
var answerBtns = [
document.getElementById('cc-ans-0'),
document.getElementById('cc-ans-1'),
document.getElementById('cc-ans-2'),
document.getElementById('cc-ans-3')
];

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getColorPool(lvl) {
if (lvl <= 9) return COLORS.slice(0, 4);
return COLORS;
}

/* ── Rule logic ── */
function getRuleForLevel(lvl) {
if (lvl <= 6) return RULES.INK;
return RULES.INK;
}

function shouldSwitchRules(lvl) {
return lvl >= 7;
}

function isTripleStroop(lvl) {
return lvl >= 17;
}

function isCongruent(lvl) {
return lvl <= 3;
}

function doesRuleSwitchMidLevel(lvl) {
return lvl >= 13 && lvl <= 16;
}

function updateRuleIndicator() {
elRuleIndicator.className = 'cc-rule-indicator';
if (state.currentRule === RULES.INK) {
elRuleIndicator.textContent = 'Toque na COR DA TINTA';
elRuleIndicator.classList.add('cc-rule-ink');
} else if (state.currentRule === RULES.WORD) {
elRuleIndicator.textContent = 'Toque no SIGNIFICADO DA PALAVRA';
elRuleIndicator.classList.add('cc-rule-word');
} else if (state.currentRule === RULES.BG) {
elRuleIndicator.textContent = 'Toque na COR DE FUNDO';
elRuleIndicator.classList.add('cc-rule-bg');
}
}

/* ── Random helpers ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}

function pickRandom(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function pickDifferent(arr, exclude) {
var filtered = arr.filter(function(c) { return c.name !== exclude.name; });
return pickRandom(filtered);
}

/* ── Generate stimulus ── */
function generateStimulus(lvl) {
var pool = getColorPool(lvl);
var wordColor, inkColor, bgColor, correctColor;

if (isCongruent(lvl)) {
/* L1-3: congruent, word matches ink */
wordColor = pickRandom(pool);
inkColor = wordColor;
bgColor = null;
state.currentRule = RULES.INK;
correctColor = wordColor;
} else if (lvl <= 6) {
/* L4-6: incongruent, identify ink */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
state.currentRule = RULES.INK;
correctColor = inkColor;
} else if (lvl <= 9) {
/* L7-9: rule alternates each round between ink and word */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else if (lvl <= 12) {
/* L10-12: 8 colors, rule alternates */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else if (lvl <= 16) {
/* L13-16: rule switches mid-level */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = null;
correctColor = (state.currentRule === RULES.INK) ? inkColor : wordColor;
} else {
/* L17-20: triple stroop */
wordColor = pickRandom(pool);
inkColor = pickDifferent(pool, wordColor);
bgColor = pickDifferent(pool, inkColor);
while (bgColor.name === wordColor.name) {
bgColor = pickDifferent(pool, inkColor);
}
if (state.currentRule === RULES.INK) {
correctColor = inkColor;
} else if (state.currentRule === RULES.WORD) {
correctColor = wordColor;
} else {
correctColor = bgColor;
}
}

return {
wordText: wordColor.name,
inkHex: inkColor.hex,
bgColor: bgColor,
correctColor: correctColor,
pool: pool
};
}

function generateColorChoices(correctColor, pool) {
var choices = [correctColor];
var attempts = 0;
while (choices.length < 4 && attempts < 50) {
var candidate = pickRandom(pool);
var isDuplicate = false;
for (var i = 0; i < choices.length; i++) {
if (choices[i].name === candidate.name) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
choices.push(candidate);
}
attempts++;
}
/* Fill remaining if pool is too small */
var allColors = COLORS.slice();
while (choices.length < 4) {
var c = pickRandom(allColors);
var dup = false;
for (var k = 0; k < choices.length; k++) {
if (choices[k].name === c.name) { dup = true; break; }
}
if (!dup) choices.push(c);
}
return shuffle(choices);
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
if (shouldSwitchRules(state.level)) {
elModifierBadge.style.display = '';
if (isTripleStroop(state.level)) {
elModifierBadge.textContent = 'Stroop Triplo';
} else if (doesRuleSwitchMidLevel(state.level)) {
elModifierBadge.textContent = 'Troca no nivel';
} else {
elModifierBadge.textContent = 'Troca de Regra';
}
} else {
elModifierBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('cc-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('cc-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('cc-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'cc-feedback-flash';
elFeedbackIcon.className = 'cc-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('cc-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('cc-show-check');
} else {
elFeedbackFlash.classList.add('cc-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('cc-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'cc-feedback-flash';
elFeedbackIcon.className = 'cc-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('cc-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('cc-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'cc-correct-flash' : 'cc-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('cc-correct-flash', 'cc-wrong-flash');
}, 400);
}

/* ── Determine rule for the next round ── */
function determineRule() {
var lvl = state.level;
if (lvl <= 3) {
state.currentRule = RULES.INK;
} else if (lvl <= 6) {
state.currentRule = RULES.INK;
} else if (lvl <= 12) {
/* Alternate each round */
state.currentRule = (state.round % 2 === 0) ? RULES.INK : RULES.WORD;
} else if (lvl <= 16) {
/* Mid-level switching every 3-5 rounds */
state.roundsSinceRuleSwitch++;
if (state.roundsSinceRuleSwitch >= state.nextRuleSwitchAt) {
state.currentRule = (state.currentRule === RULES.INK) ? RULES.WORD : RULES.INK;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
}
} else {
/* L17-20: triple stroop, cycle through ink/word/bg */
var rules = [RULES.INK, RULES.WORD, RULES.BG];
state.roundsSinceRuleSwitch++;
if (state.roundsSinceRuleSwitch >= state.nextRuleSwitchAt) {
var currentIdx = rules.indexOf(state.currentRule);
var nextIdx = (currentIdx + 1) % rules.length;
state.currentRule = rules[nextIdx];
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(2, 4);
}
}
}

/* ── Set color button appearance ── */
function setColorButton(btn, color) {
btn.style.background = color.hex;
btn.style.borderColor = 'transparent';
var circle = btn.querySelector('.cc-color-circle');
var label = btn.querySelector('span');
circle.style.background = '#fff';
circle.style.borderColor = 'rgba(255,255,255,0.6)';
circle.style.background = color.hex;
circle.style.filter = 'brightness(1.2)';
label.textContent = color.name;
btn.dataset.colorName = color.name;
}

function findColorByName(name) {
for (var i = 0; i < COLORS.length; i++) {
if (COLORS[i].name === name) return COLORS[i];
}
return null;
}

function colorHistoryChip(color) {
if (!color) return 'No answer';
return '<span class="gk-history-swatch" style="background:' + runHistory.escape(color.hex) + '"></span>' + runHistory.escape(color.name);
}

function recordColorHistory(selectedName, correct) {
var selected = findColorByName(selectedName);
var correctColor = state.currentStimulus ? state.currentStimulus.correctColor : findColorByName(state.correctColorName);
var ruleText = elRuleIndicator ? elRuleIndicator.textContent : 'Color rule';
var stimulus = state.currentStimulus;
var html = '<strong>' + runHistory.escape(ruleText) + '</strong>';
if (stimulus) {
html += '<div class="gk-runtime-history-sub">Word: ' + runHistory.escape(stimulus.wordText) + ' | Ink: <span class="gk-history-swatch" style="background:' + runHistory.escape(stimulus.inkHex) + '"></span></div>';
}
html += '<div class="gk-runtime-history-sub">Your: ' + colorHistoryChip(selected) + ' | Correct: ' + colorHistoryChip(correctColor) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var chosenName = answerBtns[chosenIdx].dataset.colorName;
var correct = (chosenName === state.correctColorName);

state.totalAnswered++;
recordColorHistory(chosenName, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordColorHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

/* Determine rule for this round */
determineRule();
updateRuleIndicator();

var stimulus = generateStimulus(state.level);
state.correctColorName = stimulus.correctColor.name;
state.currentStimulus = stimulus;

/* Display the stimulus word */
elStimulusWord.textContent = stimulus.wordText;
elStimulusWord.style.color = stimulus.inkHex;
elStimulusWrap.style.animation = 'none';
void elStimulusWrap.offsetWidth;
elStimulusWrap.style.animation = '';

/* Handle background square for triple stroop */
if (stimulus.bgColor && isTripleStroop(state.level)) {
elBgSquare.style.display = 'block';
elBgSquare.style.background = stimulus.bgColor.hex;
} else {
elBgSquare.style.display = 'none';
}

/* Generate and display color choices */
var choices = generateColorChoices(stimulus.correctColor, stimulus.pool);
state.currentChoices = choices.slice();
for (var i = 0; i < 4; i++) {
setColorButton(answerBtns[i], choices[i]);
}

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'cc-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'cc-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'cc-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.cc-trophy');
var title = document.querySelector('#cc-complete-overlay .cc-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'FANTASTICO!';
elNewBest.className = 'cc-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F FANTASTICO! Novo Recorde!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Bom trabalho!';
elNewBest.className = 'cc-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('cc-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var CC_WIZARD_STEPS = [
{icon: '\uD83C\uDFA8', title: 'Leia a cor, nao a palavra', desc: 'Siga a regra e escolha a cor.'},
{icon: '\uD83D\uDD04', title: 'Regras mudam ao subir de nivel', desc: 'As regras mudam depois.'},
{icon: '\u26A1', title: 'Rapido', desc: 'Responda antes que o tempo acabe.', final: true}
];
var ccWizardStep = 0;

function renderWizardStep() {
var s = CC_WIZARD_STEPS[ccWizardStep];
var dotsHtml = '';
for (var i = 0; i < CC_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="cc-wizard-dot' + (i === ccWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Iniciar' : 'Continuar';
elWizardCard.innerHTML =
'<div class="cc-wizard-icon">' + s.icon + '</div>' +
'<div class="cc-wizard-title">' + s.title + '</div>' +
'<div class="cc-wizard-desc">' + s.desc + '</div>' +
'<div class="cc-wizard-dots">' + dotsHtml + '</div>' +
'<button class="cc-wizard-btn" id="cc-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'cc-wizard-enter 0.3s ease-out';
document.getElementById('cc-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ccWizardStep < CC_WIZARD_STEPS.length - 1) {
ccWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ccWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctColorName = '';
state.currentRule = RULES.INK;
state.currentStimulus = null;
state.currentChoices = [];
runHistory.clear();
state.roundsSinceRuleSwitch = 0;
state.nextRuleSwitchAt = randInt(3, 5);
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('cc-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('cc-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('cc-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('cc-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('cc-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('cc-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Color Clash', '/pt/games/color-clash/', 'cc-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key >= '1' && e.key <= '4') {
e.preventDefault();
processAnswer(parseInt(e.key, 10) - 1);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('cc-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Eugene
URL: https://guruka.com/pt/author/eugene/
Description: Eugene, author profile

# Eugene

Eugene is a contributor to this publication.

### Memory Matrix - Jogo de Treinamento Cerebral
URL: https://guruka.com/pt/games/memory-matrix/
Description: Memorize padroes em grade.

<style>
#memory-matrix-game {
max-width: 540px;
margin: 0 auto;
padding: 1.5rem 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
-webkit-tap-highlight-color: transparent;
}

#memory-matrix-game * {
box-sizing: border-box;
}

#memory-matrix-game .mm-screen {
display: none;
animation: mmFadeIn 0.4s ease-out;
}

#memory-matrix-game .mm-screen.active {
display: block;
}

@keyframes mmFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes mmPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}

@keyframes mmCellGlow {
0% { box-shadow: 0 0 0 0 rgba(15, 144, 114, 0.4); }
70% { box-shadow: 0 0 0 8px rgba(15, 144, 114, 0); }
100% { box-shadow: 0 0 0 0 rgba(15, 144, 114, 0); }
}

@keyframes mmShine {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}

@keyframes mmBounceIn {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}

@keyframes mmSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

/* ---- Instructions Screen ---- */
#memory-matrix-game .mm-instructions {
text-align: center;
}

#memory-matrix-game .mm-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#memory-matrix-game .mm-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 0.75rem;
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
margin-bottom: 0;
}

#memory-matrix-game .mm-icon-wrap svg {
width: 36px;
height: 36px;
stroke: var(--color-primary);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

#memory-matrix-game .mm-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 0.25rem;
}

#memory-matrix-game .mm-subtitle {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
}

#memory-matrix-game .mm-how-to {
text-align: left;
margin-bottom: 1.5rem;
}

#memory-matrix-game .mm-how-to h3 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 0.75rem;
}

#memory-matrix-game .mm-how-to ol {
list-style: none;
padding: 0;
margin: 0;
}

#memory-matrix-game .mm-how-to li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.625rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

#memory-matrix-game .mm-step-num {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
font-size: 0.8rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}

#memory-matrix-game .mm-best-banner {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 0.75rem 1rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

#memory-matrix-game .mm-best-banner strong {
color: var(--color-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-best-banner {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

/* ---- Buttons ---- */
#memory-matrix-game .mm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: none;
border-radius: 0.625rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
padding: 0.75rem 1.5rem;
transition: all 0.2s ease;
}

#memory-matrix-game .mm-btn:active {
transform: scale(0.97);
}

#memory-matrix-game .mm-btn-primary {
background: var(--color-primary);
color: #fff;
width: 100%;
}

#memory-matrix-game .mm-btn-primary:hover {
background: var(--color-primary-hover);
box-shadow: 0 4px 12px rgba(15, 144, 114, 0.3);
}

#memory-matrix-game .mm-btn-outline {
background: transparent;
color: var(--color-text-primary);
border: 2px solid var(--color-border);
}

#memory-matrix-game .mm-btn-outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-btn-outline {
color: var(--color-dark-text-primary);
border-color: var(--color-dark-border);
}

[data-theme="dark"] #memory-matrix-game .mm-btn-outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}

#memory-matrix-game .mm-btn-submit {
background: var(--color-primary);
color: #fff;
}

#memory-matrix-game .mm-btn-submit:hover:not(:disabled) {
background: var(--color-primary-hover);
}

#memory-matrix-game .mm-btn-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* ---- Wizard Overlay ---- */
#mm-wizard {
display: none;
animation: mmFadeIn 0.4s ease-out;
}
#mm-wizard.active {
display: block;
}
.mm-wizard-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
.mm-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: mmWizardEnter 0.3s ease-out;
}
[data-theme="dark"].mm-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes mmWizardEnter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.mm-wizard-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.mm-wizard-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
.mm-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].mm-wizard-desc { color: var(--color-dark-text-secondary); }
.mm-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.mm-wizard-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-border);
transition: all 0.3s;
}
.mm-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].mm-wizard-dot { background: var(--color-dark-border, #3a4553); }
[data-theme="dark"].mm-wizard-dot.active { background: var(--color-primary); }
.mm-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.mm-wizard-btn:hover { background: var(--color-primary-hover, #0d7a62); }
@media (max-width: 400px) {
.mm-wizard-card { padding: 1.5rem 1rem; }
.mm-wizard-icon { font-size: 2rem; }
.mm-wizard-title { font-size: 1.1rem; }
.mm-wizard-desc { font-size: 0.85rem; }
}

/* ---- Game Header ---- */
#memory-matrix-game .mm-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
margin-bottom: 1rem;
}

[data-theme="dark"] #memory-matrix-game .mm-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-header-item {
text-align: center;
}

#memory-matrix-game .mm-header-label {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.125rem;
}

[data-theme="dark"] #memory-matrix-game .mm-header-label {
color: var(--color-dark-text-secondary);
}

#memory-matrix-game .mm-header-value {
font-size: 1.15rem;
font-weight: 700;
color: var(--color-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-header-value {
color: var(--color-dark-text-primary);
}

#memory-matrix-game .mm-streak-value {
color: #f59e0b;
}

/* ---- Phase Indicator ---- */
#memory-matrix-game .mm-phase {
text-align: center;
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 1rem;
min-height: 1.5rem;
}

#memory-matrix-game .mm-phase-memorize {
color: var(--color-primary);
animation: mmPulse 1.5s ease-in-out infinite;
}

#memory-matrix-game .mm-phase-recall {
color: #f59e0b;
}

#memory-matrix-game .mm-phase-correct {
color: #22c55e;
}

#memory-matrix-game .mm-phase-wrong {
color: #ef4444;
}

/* ---- Grid ---- */
#memory-matrix-game .mm-grid-wrap {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}

#memory-matrix-game .mm-grid {
display: grid;
gap: 6px;
}

#memory-matrix-game .mm-cell {
aspect-ratio: 1;
border-radius: 8px;
border: 2px solid var(--color-border);
background: var(--color-bg-secondary);
cursor: default;
transition: all 0.25s ease;
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
color: transparent;
-webkit-user-select: none;
user-select: none;
}

[data-theme="dark"] #memory-matrix-game .mm-cell {
border-color: var(--color-dark-border);
background: var(--color-dark-bg-secondary);
}

#memory-matrix-game .mm-cell.recall-mode {
cursor: pointer;
}

#memory-matrix-game .mm-cell.recall-mode:hover {
border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg-secondary));
}

[data-theme="dark"] #memory-matrix-game .mm-cell.recall-mode:hover {
background: color-mix(in srgb, var(--color-primary) 10%, var(--color-dark-bg-secondary));
}

#memory-matrix-game .mm-cell.showing {
background: var(--color-primary);
border-color: var(--color-primary);
animation: mmCellGlow 0.6s ease-out;
}

#memory-matrix-game .mm-cell.selected {
background: color-mix(in srgb, var(--color-primary) 80%, transparent);
border-color: var(--color-primary);
color: #fff;
}

#memory-matrix-game .mm-cell.fb-correct {
background: #22c55e;
border-color: #16a34a;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-missed {
background: rgba(239, 68, 68, 0.45);
border-color: #ef4444;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-wrong {
background: #ef4444;
border-color: #dc2626;
transition: all 0.3s ease;
}

#memory-matrix-game .mm-cell.fb-neutral {
opacity: 0.5;
transition: all 0.3s ease;
}

/* ---- Progress Bar ---- */
#memory-matrix-game .mm-progress-wrap {
margin-bottom: 1rem;
text-align: center;
}

#memory-matrix-game .mm-progress-bar {
height: 6px;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 3px;
overflow: hidden;
max-width: 240px;
margin: 0 auto 0.375rem;
}

[data-theme="dark"] #memory-matrix-game .mm-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

#memory-matrix-game .mm-progress-text {
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-progress-text {
color: var(--color-dark-text-secondary);
}

/* ---- Action Buttons ---- */
#memory-matrix-game .mm-actions {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}

/* ---- Game Complete Screen ---- */
#memory-matrix-game .mm-complete {
position: relative;
text-align: center;
}

#memory-matrix-game .mm-score-display {
font-size: 3rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
background: linear-gradient(90deg, var(--color-primary), #10b981, var(--color-primary));
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: mmShine 3s linear infinite;
}

#memory-matrix-game .mm-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin: 1.25rem 0;
}

#memory-matrix-game .mm-stat-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 0.75rem 0.5rem;
}

[data-theme="dark"] #memory-matrix-game .mm-stat-card {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#memory-matrix-game .mm-stat-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-stat-value {
color: var(--color-dark-text-primary);
}

#memory-matrix-game .mm-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-secondary);
margin-top: 0.125rem;
}

[data-theme="dark"] #memory-matrix-game .mm-stat-label {
color: var(--color-dark-text-secondary);
}

#memory-matrix-game .mm-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #000;
font-size: 0.8rem;
font-weight: 700;
padding: 0.375rem 1rem;
border-radius: 2rem;
margin-bottom: 1rem;
animation: mmBounceIn 0.5s ease-out;
}

#memory-matrix-game .mm-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}

#memory-matrix-game .mm-back-link {
display: inline-block;
margin-top: 0.75rem;
color: var(--color-primary);
text-decoration: none;
font-size: 0.9rem;
}

#memory-matrix-game .mm-back-link:hover {
text-decoration: underline;
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

/* ---- Dark Mode ---- */
[data-theme="dark"] #memory-matrix-game {
color: var(--color-dark-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-title {
color: var(--color-dark-text-primary);
}

[data-theme="dark"] #memory-matrix-game .mm-subtitle {
color: var(--color-dark-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-how-to li {
color: var(--color-dark-text-secondary);
}

[data-theme="dark"] #memory-matrix-game .mm-cell.recall-mode:hover {
border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

/* ---- Responsive ---- */
@media (max-width: 400px) {
#memory-matrix-game {
padding: 1rem 0.5rem;
}
#memory-matrix-game .mm-grid {
gap: 4px;
}
#memory-matrix-game .mm-header {
padding: 0.5rem;
}
#memory-matrix-game .mm-header-value {
font-size: 1rem;
}
#memory-matrix-game .mm-btn {
padding: 0.625rem 1rem;
font-size: 0.9rem;
}
#memory-matrix-game .mm-icon-wrap { width: 40px; height: 40px; margin-bottom: 0; }
#memory-matrix-game .mm-icon-wrap svg { width: 20px; height: 20px; }
#memory-matrix-game .mm-instructions h2 { font-size: 1.3rem; }
#memory-matrix-game .mm-instructions.mm-subtitle { font-size: 0.85rem; margin-bottom: 0.75rem; }
}
@media (max-width: 640px) {
#memory-matrix-game .mm-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
#memory-matrix-game .mm-stat-value {
font-size: 1.1rem;
}
}
@media (max-width: 360px) {
#memory-matrix-game .mm-grid {
gap: 3px;
}
#memory-matrix-game .mm-stats-grid {
grid-template-columns: 1fr 1fr;
}
#memory-matrix-game .mm-btn {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}
#memory-matrix-game .mm-title {
font-size: 1.25rem;
}
#memory-matrix-game .mm-grid-wrap {
max-width: 100%;
overflow: hidden;
}
}
@keyframes mm-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.mm-confetti-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.mm-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: mm-confetti-fall 2.5s ease-in forwards;
}
.mm-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: mm-glow-fade 1s ease-out forwards;
}
@keyframes mm-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.mm-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
font-size: 0.85rem;
font-weight: 700;
padding: 0.375rem 1rem;
border-radius: 2rem;
margin-bottom: 1rem;
animation: mmBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}

#memory-matrix-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#memory-matrix-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #memory-matrix-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="memory-matrix-game">

<div id="mm-instructions" class="mm-screen active">
<div class="mm-instructions">
<div class="mm-title-row"><div class="mm-icon-wrap"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></div><h1 class="mm-title">Memory Matrix</h1></div>
<p class="mm-subtitle">Teste sua memoria espacial</p>
<div class="mm-how-to">
<h3>Como Jogar:</h3>
<ol>
<li><span class="mm-step-num">1</span><span>Observe o padrao -- celulas acendem uma a uma</span></li>
<li><span class="mm-step-num">2</span><span>Memorize quais celulas acendem</span></li>
<li><span class="mm-step-num">3</span><span>Toque nas mesmas celulas de memoria</span></li>
<li><span class="mm-step-num">4</span><span>A partir do nivel 8, a ordem importa! Toque na ordem correta</span></li>
</ol>
</div>
<div id="mm-instr-best" class="mm-best-banner" style="display:none;"></div>
<button class="mm-btn mm-btn-primary" onclick="mmShowWizard()">Iniciar</button>
<div id="mm-challenge-banner-wrap"></div>
</div>
</div>

<div id="mm-wizard" class="mm-screen">
<div class="mm-wizard-overlay">
<div class="mm-wizard-card" id="mm-wizard-card"></div>
</div>
</div>

<div id="mm-playing" class="mm-screen">
<div class="mm-header">
<div class="mm-header-item">
<div class="mm-header-label">Pontos</div>
<div class="mm-header-value" id="mm-score">0</div>
</div>
<div class="mm-header-item">
<div class="mm-header-label">Nivel</div>
<div class="mm-header-value" id="mm-level">1</div>
</div>
<div class="mm-header-item">
<div class="mm-header-label">Sequencia</div>
<div class="mm-header-value mm-streak-value" id="mm-streak">0</div>
</div>
</div>
<div class="mm-phase" id="mm-phase"></div>
<div class="mm-grid-wrap">
<div class="mm-grid" id="mm-grid"></div>
</div>
<div class="mm-progress-wrap">
<div class="mm-progress-bar">
<div class="mm-progress-fill" id="mm-progress-fill" style="width:0%"></div>
</div>
<div class="mm-progress-text" id="mm-progress-text">Runde 1 von 3</div>
</div>
<div class="mm-actions" id="mm-actions"></div>
<button class="gk-finish-btn" id="mm-finish-btn">Encerrar Jogo</button>
</div>

<div id="mm-complete" class="mm-screen">
<div class="mm-complete">
<button class="gk-complete-close" id="mm-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="mm-icon-wrap">
<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
</div>
<h1 class="mm-title">Jogo Concluido!</h1>
<div class="mm-score-display" id="mm-final-score">0</div>
<div id="mm-new-best-badge" class="mm-new-best" style="display:none;">Novo Recorde!</div>
<div class="gk-challenge-result" id="mm-challenge-result" style="display:none;"></div>
<div class="mm-stats-grid">
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-level">1</div>
<div class="mm-stat-label">Nivel</div>
</div>
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-accuracy">0%</div>
<div class="mm-stat-label">Precisao</div>
</div>
<div class="mm-stat-card">
<div class="mm-stat-value" id="mm-final-streak">0</div>
<div class="mm-stat-label">Sequencia</div>
</div>
</div>
<div class="mm-complete-actions">
<button class="mm-btn mm-btn-primary" onclick="mmPlayAgain()">Repetir</button>
<button class="gk-runtime-history-toggle" id="mm-history-toggle" type="button">Show History</button>
<a href="/pt/games/" class="mm-back-link">Voltar para todos os jogos</a>
</div>
<div class="gk-runtime-history-panel" id="mm-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="mm-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="mm-share-btn">&#128279; Compartilhar resultado</button>
<div class="gk-share-copied" id="mm-share-copied" style="display:none;">Copiado!</div>
</div>
</div>
</div>

</div>

<script>
(function() {
var STORAGE_BEST = 'guruka_memory-matrix_best';
var POINTS_PER_CORRECT = 100;
var SPEED_BONUS_THRESHOLD = 1000;
var STREAK_MULTIPLIER = 0.1;
var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('mm-history-toggle', 'mm-history-panel', 'mm-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
 screen: 'instructions',
 score: 0,
 level: 1,
 streak: 0,
 bestStreak: 0,
 correctAnswers: 0,
 wrongAnswers: 0,
 roundsInLevel: 0,
 pattern: [],
 selectedCells: [],
 showingIndex: 0,
 phase: 'showing',
 answerTime: 0,
 countdownValue: 3,
 countdownTimer: null,
 showTimer: null,
 feedbackTimer: null
};

function getLevelConfig(level) {
 var gridSize = level <= 5 ? 3 : level <= 10 ? 4 : level <= 15 ? 5 : 6;
 var patternSize = Math.min(3 + Math.floor(level / 2), gridSize * gridSize - 2);
 var displayTime = Math.max(2000 - (level - 1) * 80, 800);
 var orderMatters = level >= 8;
 return {
 gridSize: gridSize,
 patternSize: patternSize,
 displayTime: displayTime,
 orderMatters: orderMatters,
 roundsPerLevel: 3,
 maxLevel: 20
 };
}

function getPersonalBest() {
 try {
 var val = localStorage.getItem(STORAGE_BEST);
 return val ? parseInt(val, 10) : 0;
 } catch (e) { return 0; }
}

function saveResult(score, level, accuracy) {
 try {
 void level;
 void accuracy;
 var best = getPersonalBest();
 if (score > best) {
 localStorage.setItem(STORAGE_BEST, String(score));
 return true;
 }
 return false;
 } catch (e) { return false; }
}

function showScreen(name) {
 var screens = document.querySelectorAll('#memory-matrix-game .mm-screen');
 for (var i = 0; i < screens.length; i++) {
 screens[i].classList.remove('active');
 }
 var el = document.getElementById('mm-' + name);
 if (el) {
 el.classList.add('active');
 }
 state.screen = name;
}

function updateInstructionsBest() {
 var best = getPersonalBest();
 var banner = document.getElementById('mm-instr-best');
 if (best > 0 && banner) {
 banner.style.display = 'block';
 banner.innerHTML = 'Recorde: <strong>' + best.toLocaleString() + '</strong> Pontos';
 }
}

/* ---- Wizard ---- */
var MM_WIZARD_STEPS = [
{icon: '\uD83D\uDCA1', title: 'Observe as celulas que acendem', desc: 'As celulas acendem uma a uma. Preste atencao!'},
{icon: '\uD83D\uDC46', title: 'Toque nelas de memoria', desc: 'Recrie o padrao depois que ele desaparecer.'},
{icon: '\uD83D\uDE80', title: 'Pronto? Vamos la!', desc: 'Os padroes ficam mais dificeis conforme seu nivel sobe!', final: true}
];
var mmWizardStep = 0;

function mmRenderWizardStep() {
var s = MM_WIZARD_STEPS[mmWizardStep];
var dotsHtml = '';
for (var i = 0; i < MM_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="mm-wizard-dot' + (i === mmWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Jogar Agora' : 'Continuar';
var card = document.getElementById('mm-wizard-card');
card.innerHTML =
'<div class="mm-wizard-icon">' + s.icon + '</div>' +
'<div class="mm-wizard-title">' + s.title + '</div>' +
'<div class="mm-wizard-desc">' + s.desc + '</div>' +
'<div class="mm-wizard-dots">' + dotsHtml + '</div>' +
'<button class="mm-wizard-btn" id="mm-wizard-next">' + btnLabel + '</button>';
card.style.animation = 'none';
void card.offsetWidth;
card.style.animation = 'mmWizardEnter 0.3s ease-out';
document.getElementById('mm-wizard-next').addEventListener('click', mmAdvanceWizard);
}

function mmAdvanceWizard() {
if (mmWizardStep < MM_WIZARD_STEPS.length - 1) {
mmWizardStep++;
mmRenderWizardStep();
} else {
mmStartGame();
}
}

window.mmShowWizard = function() {
mmWizardStep = 0;
showScreen('wizard');
mmRenderWizardStep();
};

/* ---- Start ---- */
function mmStartGame() {
 window.scrollTo({ top: 0, behavior: 'instant' });
 enterMobileGameMode();
 state.score = 0;
 state.level = 1;
 state.streak = 0;
 state.bestStreak = 0;
 state.correctAnswers = 0;
 state.wrongAnswers = 0;
 state.roundsInLevel = 0;
 state.pattern = [];
 state.selectedCells = [];
 runHistory.clear();

 showScreen('playing');
 GK.renderChallengeBar('mm-playing', challenge);
 updateHeader();
 generatePattern();
}

/* ---- Update Header ---- */
function updateHeader() {
 document.getElementById('mm-score').textContent = state.score.toLocaleString();
 document.getElementById('mm-level').textContent = state.level;
 document.getElementById('mm-streak').textContent = state.streak;
 if (challenge.active) GK.updateChallengeBar('mm-playing', state.score, challenge.score);
}

/* ---- Generate Pattern ---- */
function generatePattern() {
 var config = getLevelConfig(state.level);
 var totalCells = config.gridSize * config.gridSize;
 var newPattern = [];

 while (newPattern.length < config.patternSize) {
 var cell = Math.floor(Math.random() * totalCells);
 if (newPattern.indexOf(cell) === -1) {
 newPattern.push(cell);
 }
 }

 state.pattern = newPattern;
 state.selectedCells = [];
 state.showingIndex = 0;
 state.phase = 'showing';

 buildGrid(config);
 updateProgressBar(config);
 updatePhase(config);
 updateActions(config);
 startShowingPattern(config);
}

/* ---- Build Grid ---- */
function buildGrid(config) {
 var grid = document.getElementById('mm-grid');
 var cellSize = config.gridSize <= 3 ? 72 : config.gridSize <= 4 ? 62 : config.gridSize <= 5 ? 52 : 44;
 var gapSize = config.gridSize <= 4 ? 6 : 5;
 var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
 if (viewportWidth < 360) {
 var maxCellSize = Math.floor((viewportWidth - 40 - (config.gridSize - 1) * gapSize) / config.gridSize);
 if (maxCellSize < cellSize) cellSize = maxCellSize;
 }
 var totalSize = config.gridSize * cellSize + (config.gridSize - 1) * gapSize;

 grid.style.gridTemplateColumns = 'repeat(' + config.gridSize + ', ' + cellSize + 'px)';
 grid.style.gridTemplateRows = 'repeat(' + config.gridSize + ', ' + cellSize + 'px)';
 grid.style.gap = gapSize + 'px';
 grid.style.width = totalSize + 'px';
 grid.innerHTML = '';

 var totalCells = config.gridSize * config.gridSize;
 for (var i = 0; i < totalCells; i++) {
 var cell = document.createElement('button');
 cell.className = 'mm-cell';
 cell.setAttribute('data-index', i);
 cell.setAttribute('type', 'button');
 (function(idx) {
 cell.addEventListener('click', function() { handleCellClick(idx); });
 })(i);
 grid.appendChild(cell);
 }
}

/* ---- Show Pattern Sequentially ---- */
function startShowingPattern(config) {
 var delay = config.displayTime / state.pattern.length;
 state.showingIndex = 0;

 function showNext() {
 if (state.screen !== 'playing') return;
 if (state.showingIndex < state.pattern.length) {
 // Clear previous highlights
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var j = 0; j < cells.length; j++) {
 cells[j].classList.remove('showing');
 }
 // Highlight current cell
 var idx = state.pattern[state.showingIndex];
 var targetCell = document.querySelector('#mm-grid .mm-cell[data-index="' + idx + '"]');
 if (targetCell) {
 targetCell.classList.add('showing');
 }
 state.showingIndex++;
 state.showTimer = setTimeout(showNext, delay);
 } else {
 // All shown, brief pause then switch to recall
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var j = 0; j < cells.length; j++) {
 cells[j].classList.remove('showing');
 }
 state.showTimer = setTimeout(function() {
 state.phase = 'recall';
 state.answerTime = Date.now();
 enableRecallMode(config);
 updatePhase(config);
 updateActions(config);
 }, 400);
 }
 }

 showNext();
}

/* ---- Enable Recall Mode ---- */
function enableRecallMode(config) {
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var i = 0; i < cells.length; i++) {
 cells[i].classList.add('recall-mode');
 }
}

/* ---- Handle Cell Click ---- */
function handleCellClick(cellIndex) {
 if (state.phase !== 'recall') return;

 var existingIdx = state.selectedCells.indexOf(cellIndex);
 if (existingIdx !== -1) {
 // Deselect
 state.selectedCells.splice(existingIdx, 1);
 } else if (state.selectedCells.length < state.pattern.length) {
 state.selectedCells.push(cellIndex);
 }

 var config = getLevelConfig(state.level);
 updateCellVisuals();
 updatePhase(config);
 updateActions(config);
}

/* ---- Update Cell Visuals ---- */
function updateCellVisuals() {
 var config = getLevelConfig(state.level);
 var cells = document.querySelectorAll('#mm-grid .mm-cell');

 for (var i = 0; i < cells.length; i++) {
 var idx = parseInt(cells[i].getAttribute('data-index'), 10);
 cells[i].classList.remove('selected');
 cells[i].textContent = '';

 if (state.selectedCells.indexOf(idx) !== -1) {
 cells[i].classList.add('selected');
 if (config.orderMatters) {
 cells[i].textContent = String(state.selectedCells.indexOf(idx) + 1);
 cells[i].style.color = '#fff';
 }
 } else {
 cells[i].style.color = 'transparent';
 }
 }
}

/* ---- Update Phase Indicator ---- */
function updatePhase(config) {
 var phaseEl = document.getElementById('mm-phase');
 if (state.phase === 'showing') {
 phaseEl.innerHTML = '<span class="mm-phase-memorize">Merk dir das Muster...</span>';
 } else if (state.phase === 'recall') {
 var orderNote = config.orderMatters ? ' (Ordem importa!)' : '';
 phaseEl.innerHTML = '<span class="mm-phase-recall">Du bist dran!' + orderNote + ', ' + state.selectedCells.length + '/' + state.pattern.length + ' selecionadas</span>';
 }
}

/* ---- Update Actions ---- */
function updateActions(config) {
 var actionsEl = document.getElementById('mm-actions');
 if (state.phase !== 'recall') {
 actionsEl.innerHTML = '';
 return;
 }

 var clearDisabled = state.selectedCells.length === 0 ? ' disabled' : '';
 var submitDisabled = state.selectedCells.length !== state.pattern.length ? ' disabled' : '';

 actionsEl.innerHTML =
 '<button class="mm-btn mm-btn-outline" onclick="mmClearSelection()"' + clearDisabled + '>Limpar</button>' +
 '<button class="mm-btn mm-btn-submit" onclick="mmSubmitAnswer()"' + submitDisabled + '>Enviar (' + state.selectedCells.length + '/' + state.pattern.length + ')</button>';
}

/* ---- Update Progress Bar ---- */
function updateProgressBar(config) {
 var pct = (state.roundsInLevel / config.roundsPerLevel) * 100;
 document.getElementById('mm-progress-fill').style.width = pct + '%';
 document.getElementById('mm-progress-text').textContent =
 'Rodada ' + (state.roundsInLevel + 1) + ' de ' + config.roundsPerLevel;
}

/* ---- Clear Selection ---- */
window.mmClearSelection = function() {
 state.selectedCells = [];
 updateCellVisuals();
 updateActions(getLevelConfig(state.level));
 updatePhase(getLevelConfig(state.level));
};

function formatCellList(cells) {
if (!cells || !cells.length) return 'none';
var out = [];
for (var i = 0; i < cells.length; i++) out.push(String(cells[i] + 1));
return out.join(', ');
}

function recordMemoryHistory(correct, config) {
var html = '<strong>' + runHistory.escape(config.orderMatters ? 'Order matters' : 'Any order') + '</strong>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(formatCellList(state.selectedCells)) + '</div>';
html += '<div class="gk-runtime-history-sub">Correct: ' + runHistory.escape(formatCellList(state.pattern)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ---- Submit Answer ---- */
window.mmSubmitAnswer = function() {
 if (state.phase !== 'recall') return;
 var config = getLevelConfig(state.level);
 var responseTime = Date.now() - state.answerTime;

 var correct;
 if (config.orderMatters) {
 correct = true;
 for (var i = 0; i < state.pattern.length; i++) {
 if (state.selectedCells[i] !== state.pattern[i]) {
 correct = false;
 break;
 }
 }
 } else {
 correct = state.selectedCells.length === state.pattern.length;
 if (correct) {
 for (var i = 0; i < state.pattern.length; i++) {
 if (state.selectedCells.indexOf(state.pattern[i]) === -1) {
 correct = false;
 break;
 }
 }
 }
 }

 recordMemoryHistory(correct, config);

 // Calculate points
 var pointsEarned = 0;
 if (correct) {
 pointsEarned = POINTS_PER_CORRECT;
 if (responseTime < SPEED_BONUS_THRESHOLD) {
 pointsEarned += Math.floor((SPEED_BONUS_THRESHOLD - responseTime) / 10);
 }
 pointsEarned += Math.floor(state.streak * STREAK_MULTIPLIER * POINTS_PER_CORRECT);
 state.score += pointsEarned;
 state.streak++;
 state.correctAnswers++;
 if (state.streak > state.bestStreak) {
 state.bestStreak = state.streak;
 }
 } else {
 state.streak = 0;
 state.wrongAnswers++;
 }

 updateHeader();
 showFeedback(correct, config);
};

/* ---- Show Feedback ---- */
function showFeedback(correct, config) {
 state.phase = 'feedback';

 var phaseEl = document.getElementById('mm-phase');
 if (correct) {
 phaseEl.innerHTML = '<span class="mm-phase-correct">Richtig!</span>';
 } else {
 phaseEl.innerHTML = '<span class="mm-phase-wrong">Leider falsch...</span>';
 }

 // Update cell visuals to show correct/wrong
 var cells = document.querySelectorAll('#mm-grid .mm-cell');
 for (var i = 0; i < cells.length; i++) {
 var idx = parseInt(cells[i].getAttribute('data-index'), 10);
 cells[i].classList.remove('showing', 'selected', 'recall-mode');
 cells[i].style.color = 'transparent';
 cells[i].textContent = '';

 var inPattern = state.pattern.indexOf(idx) !== -1;
 var wasSelected = state.selectedCells.indexOf(idx) !== -1;

 if (inPattern && wasSelected) {
 cells[i].classList.add('fb-correct');
 } else if (inPattern && !wasSelected) {
 cells[i].classList.add('fb-missed');
 } else if (!inPattern && wasSelected) {
 cells[i].classList.add('fb-wrong');
 } else {
 cells[i].classList.add('fb-neutral');
 }
 }

 // Hide action buttons during feedback
 document.getElementById('mm-actions').innerHTML = '';

 state.feedbackTimer = setTimeout(function() {
 advanceRound(config);
 }, 1200);
}

/* ---- Advance Round ---- */
function advanceRound(config) {
 state.roundsInLevel++;

 if (state.roundsInLevel >= config.roundsPerLevel) {
 if (state.level >= config.maxLevel) {
 endGame();
 return;
 }
 state.level++;
 state.roundsInLevel = 0;
 updateHeader();
 }

 generatePattern();
}

/* ---- Celebration effects ---- */
function mmShowConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'mm-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'mm-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'mm-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function mmAnimateScoreCountUp(el, target) {
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(target * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

/* ---- End Game ---- */
function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

function endGame() {
exitMobileGameMode();
 var totalAnswers = state.correctAnswers + state.wrongAnswers;
 var accuracy = totalAnswers > 0 ? Math.round((state.correctAnswers / totalAnswers) * 100) : 0;
 var isNewBest = saveResult(state.score, state.level, accuracy);

 var titleEl = document.querySelector('#mm-complete .mm-title');
 var iconWrap = document.querySelector('#mm-complete .mm-icon-wrap');
 var bestBadge = document.getElementById('mm-new-best-badge');

 if (isNewBest) {
 mmShowConfetti();
 titleEl.textContent = 'FANTASTICO!';
 iconWrap.innerHTML = '<span style="font-size:2.25rem">\uD83C\uDF89</span>';
 bestBadge.className = 'mm-new-best-enhanced';
 bestBadge.innerHTML = '\uD83C\uDF1F FANTASTICO! Novo Recorde!';
 bestBadge.style.display = 'inline-block';
 } else {
 titleEl.textContent = 'Bom trabalho!';
 iconWrap.innerHTML = '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>';
 bestBadge.className = 'mm-new-best';
 bestBadge.style.display = 'none';
 }

 GK.renderChallengeResult('mm-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

 showScreen('complete');

 var scoreEl = document.getElementById('mm-final-score');
 document.getElementById('mm-final-level').textContent = state.level;
 document.getElementById('mm-final-accuracy').textContent = accuracy + '%';
 document.getElementById('mm-final-streak').textContent = state.bestStreak;

 mmAnimateScoreCountUp(scoreEl, state.score);
}

/* ---- Again ---- */
window.mmPlayAgain = function() {
 clearTimeout(state.showTimer);
 clearTimeout(state.feedbackTimer);
 clearInterval(state.countdownTimer);
 updateInstructionsBest();
 showScreen('instructions');
};

/* ---- Init ---- */
updateInstructionsBest();
GK.renderChallengeBanner('mm-challenge-banner-wrap', challenge);


document.getElementById('mm-close-btn').addEventListener('click', function() {
updateInstructionsBest();
showScreen('instructions');
});

document.getElementById('mm-finish-btn').addEventListener('click', function() {
 endGame();
});

document.getElementById('mm-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('mm-share-btn').addEventListener('click', function() {
 GK.shareResult(state.score, 'Memory Matrix', '/pt/games/memory-matrix/', 'mm-share-copied');
});
})();
</script>

### Number Crunch - Jogo de Treinamento Cerebral
URL: https://guruka.com/pt/games/number-crunch/
Description: Resolva aritmetica com tempo.

<style>
#number-crunch-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #number-crunch-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#nc-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.nc-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#nc-instructions.nc-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#nc-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#nc-instructions.nc-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #nc-instructions.nc-subtitle {
color: var(--color-dark-text-secondary);
}

#nc-instructions.nc-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #nc-instructions.nc-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#nc-instructions.nc-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#nc-instructions.nc-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#nc-instructions.nc-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.nc-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.nc-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.nc-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.nc-btn-primary:hover {
background: var(--color-primary-hover);
}

.nc-btn-primary:active {
transform: scale(0.97);
}

.nc-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.nc-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"].nc-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#nc-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#nc-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: nc-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #nc-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes nc-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.nc-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.nc-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.nc-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"].nc-wizard-desc {
color: var(--color-dark-text-secondary);
}
.nc-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.nc-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.nc-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"].nc-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"].nc-wizard-dot.active {
background: var(--color-primary);
}
.nc-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.nc-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#nc-wizard-card {
padding: 1.5rem 1rem;
}
.nc-wizard-icon {
font-size: 2rem;
}
.nc-wizard-title {
font-size: 1.1rem;
}
.nc-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#nc-playing {
display: none;
flex: 1;
flex-direction: column;
}

.nc-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].nc-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-stat {
text-align: center;
}

.nc-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"].nc-stat-label {
color: var(--color-dark-text-secondary);
}

.nc-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.nc-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.nc-level-text {
font-weight: 600;
}

.nc-modifier-badge {
background: #6366f1;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.nc-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"].nc-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.nc-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"].nc-timer-bar {
background: var(--color-dark-bg-secondary);
}

.nc-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.nc-timer-fill.nc-timer-warning {
background: #ef4444;
}

/* ── Equation Display ── */
.nc-equation-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
position: relative;
}

.nc-rule-modifier {
background: rgba(99,102,241,0.1);
color: #6366f1;
padding: 0.4rem 1rem;
border-radius: 2rem;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1rem;
display: none;
}

[data-theme="dark"].nc-rule-modifier {
background: rgba(99,102,241,0.2);
color: #818cf8;
}

.nc-equation {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
animation: nc-eq-enter 0.2s ease-out;
text-align: center;
}

@keyframes nc-eq-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.nc-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.nc-feedback-flash.nc-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.nc-feedback-flash.nc-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.nc-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.nc-feedback-icon.nc-show-check {
animation: nc-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.nc-feedback-icon.nc-show-x {
animation: nc-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes nc-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Answer Buttons ── */
.nc-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.nc-answer-btn {
padding: 1rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.25rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
}

[data-theme="dark"].nc-answer-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.nc-answer-btn:active {
transform: scale(0.95);
}

.nc-answer-btn:hover {
border-color: var(--color-primary);
background: rgba(99,102,241,0.05);
}

[data-theme="dark"].nc-answer-btn:hover {
background: rgba(99,102,241,0.15);
}

.nc-answer-btn.nc-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.nc-answer-btn.nc-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.nc-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-playing-hint {
color: var(--color-dark-text-secondary);
}

#number-crunch-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary);
border-radius: 0.5rem;
background: var(--color-bg-primary);
color: var(--color-primary);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#number-crunch-game .gk-finish-btn:hover {
background: rgba(245, 158, 11, 0.1);
}

[data-theme="dark"] #number-crunch-game .gk-finish-btn {
background: var(--color-dark-bg-secondary);
color: #fbbf24;
border-color: #fbbf24;
}

/* ── Pause Overlay ── */
#nc-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#nc-pause-overlay.nc-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#nc-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.nc-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: nc-modal-enter 0.3s ease-out;
}

[data-theme="dark"].nc-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes nc-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.nc-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.nc-complete-card.nc-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.nc-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.nc-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: nc-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes nc-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.nc-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.nc-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"].nc-complete-stat {
background: var(--color-dark-bg-secondary);
}

.nc-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"].nc-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.nc-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.nc-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.nc-history-toggle {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.nc-history-toggle:hover {
background: rgba(245, 158, 11, 0.1);
}

.nc-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 240px;
overflow: auto;
border: 1px solid var(--color-border);
border-radius: 0.5rem;
background: var(--color-bg-secondary);
}

[data-theme="dark"] .nc-history-panel {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.nc-history-list {
display: flex;
flex-direction: column;
}

.nc-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border);
font-size: 0.82rem;
}

.nc-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .nc-history-row {
border-color: var(--color-dark-border);
}

.nc-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: baseline;
}

.nc-history-status {
font-weight: 800;
white-space: nowrap;
}

.nc-history-correct .nc-history-status {
color: #16a34a;
}

.nc-history-wrong .nc-history-status {
color: #dc2626;
}

.nc-history-eq {
font-weight: 700;
text-align: right;
}

.nc-history-answer {
margin-top: 0.25rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .nc-history-answer {
color: var(--color-dark-text-secondary);
}

.nc-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary);
text-align: center;
}

.nc-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"].nc-back-link {
color: var(--color-dark-text-secondary);
}

.nc-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.nc-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.nc-level-up-toast.nc-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#number-crunch-game {
padding: 0.5rem;
}
.nc-equation {
font-size: 2rem;
}
.nc-answer-btn {
padding: 0.75rem;
font-size: 1.1rem;
min-height: 48px;
}
.nc-header {
padding: 0.5rem;
gap: 0.25rem;
}
.nc-stat-value {
font-size: 1rem;
}
#nc-instructions { padding: 0.75rem 0.5rem; }
#nc-instructions.nc-icon { font-size: 2rem; margin-bottom: 0; }
#nc-instructions h2 { font-size: 1.3rem; }
#nc-instructions.nc-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#nc-instructions.nc-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#nc-instructions.nc-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.nc-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#number-crunch-game {
padding: 0.75rem;
}
.nc-equation {
font-size: 2.25rem;
}
.nc-answer-btn {
padding: 0.875rem;
}
}
@media (max-width: 360px) {
.nc-equation {
font-size: 1.75rem;
}
.nc-answer-btn {
padding: 0.625rem;
font-size: 1rem;
}
.nc-complete-stats {
grid-template-columns: 1fr 1fr;
}
.nc-final-score {
font-size: 2rem;
}
.nc-header {
padding: 0.375rem;
}
.nc-stat-value {
font-size: 0.9rem;
}
}
@keyframes nc-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.nc-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.nc-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: nc-confetti-fall 2.5s ease-in forwards;
}
.nc-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: nc-glow-fade 1s ease-out forwards;
}
@keyframes nc-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.nc-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: nc-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes nc-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#number-crunch-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#number-crunch-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="number-crunch-game">

<div id="nc-instructions">
<div class="nc-title-row"><span class="nc-icon">&#129518;</span><h2>Number Crunch</h2></div>
<p class="nc-subtitle">Calculo mental</p>
<div class="nc-how-to">
<h3>Como Jogar</h3>
<ol>
<li>Resolva a equacao.</li>
<li>Escolha a <strong>resposta correta</strong> entre 4 opcoes.</li>
<li>Nivel 6+: passos extras na equacao.</li>


</ol>
</div>
<div id="nc-best-display" class="nc-personal-best" style="display:none;">
Recorde: <strong id="nc-best-score">0</strong> Pontos
</div>
<button class="nc-btn-primary" id="nc-start-btn">Iniciar</button>
<div id="nc-challenge-banner-wrap"></div>
</div>

<div id="nc-wizard">
<div id="nc-wizard-card"></div>
</div>

<div id="nc-playing">
<div class="nc-header">
<div class="nc-stat">
<div class="nc-stat-label">Pontos</div>
<div class="nc-stat-value" id="nc-score">0</div>
</div>
<div class="nc-stat">
<div class="nc-stat-label">Sequencia</div>
<div class="nc-stat-value" id="nc-streak">0</div>
</div>
<div class="nc-stat">
<div class="nc-stat-label">Nivel</div>
<div class="nc-stat-value" id="nc-level">1</div>
</div>
</div>
<div class="nc-level-info">
<span class="nc-level-text">Level <span id="nc-level-text">1</span></span>
<span class="nc-modifier-badge" id="nc-modifier-badge" style="display:none;">Modificadores ativos</span>
</div>
<div class="nc-progress-bar">
<div class="nc-progress-fill" id="nc-progress-fill" style="width:0%"></div>
</div>
<div class="nc-timer-bar">
<div class="nc-timer-fill" id="nc-timer-fill" style="width:100%"></div>
</div>
<div class="nc-equation-area">
<div class="nc-feedback-flash" id="nc-feedback-flash"></div>
<div class="nc-feedback-icon" id="nc-feedback-icon"></div>
<div class="nc-rule-modifier" id="nc-rule-modifier"></div>
<div class="nc-equation" id="nc-equation"></div>
</div>
<div class="nc-answers" id="nc-answers">
<button class="nc-answer-btn" id="nc-ans-0"></button>
<button class="nc-answer-btn" id="nc-ans-1"></button>
<button class="nc-answer-btn" id="nc-ans-2"></button>
<button class="nc-answer-btn" id="nc-ans-3"></button>
</div>
<div class="nc-playing-hint">Dr&uuml;cke <strong>1-4</strong> zum Antworten &middot; <strong>Esc</strong> zum Pausieren</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="nc-pause-btn" type="button">Pausar</button>
<button class="gk-finish-btn" id="nc-finish-btn" type="button">Encerrar Jogo</button>
</div>
</div>

<div id="nc-pause-overlay">
<div class="nc-pause-text">Pausado</div>
<button class="nc-btn-primary" id="nc-resume-btn">Continuar</button>
</div>

<div id="nc-complete-overlay">
<div class="nc-complete-card">
<button class="gk-complete-close" id="nc-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="nc-trophy">&#127942;</div>
<h2>Jogo Concluido!</h2>
<div class="nc-final-score" id="nc-final-score">0</div>
<div id="nc-new-best" class="nc-new-best" style="display:none;">&#11088; Novo Recorde!</div>
<div class="gk-challenge-result" id="nc-challenge-result" style="display:none;"></div>
<div class="nc-complete-stats">
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Nivel</div>
<div class="nc-complete-stat-value" id="nc-final-level">1</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Precisao</div>
<div class="nc-complete-stat-value" id="nc-final-accuracy">0%</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Sequencia</div>
<div class="nc-complete-stat-value" id="nc-final-streak">0</div>
</div>
<div class="nc-complete-stat">
<div class="nc-complete-stat-label">Recorde</div>
<div class="nc-complete-stat-value" id="nc-final-best">0</div>
</div>
</div>
<div class="nc-complete-actions">
<button class="nc-btn-primary" id="nc-play-again-btn">Repetir</button>
<button class="gk-runtime-history-toggle" id="nc-history-toggle">Show History</button>
<a href="/pt/games/" class="nc-back-link">&larr; Todos os Jogos</a>
</div>
<div class="gk-runtime-history-panel" id="nc-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="nc-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="nc-share-btn">&#128279; Compartilhar resultado</button>
<div class="gk-share-copied" id="nc-share-copied" style="display:none;">Copiado!</div>
</div>
</div>
</div>

<div class="nc-level-up-toast" id="nc-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_number-crunch_best';

var challenge = GK.parseChallenge();

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctAnswer: 0,
currentModifier: null,
currentEquation: '',
currentChoices: []
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('nc-instructions');
var elWizard = document.getElementById('nc-wizard');
var elWizardCard = document.getElementById('nc-wizard-card');
var elPlaying = document.getElementById('nc-playing');
var elPauseOverlay = document.getElementById('nc-pause-overlay');
var elCompleteOverlay = document.getElementById('nc-complete-overlay');
var elScore = document.getElementById('nc-score');
var elStreak = document.getElementById('nc-streak');
var elLevel = document.getElementById('nc-level');
var elLevelText = document.getElementById('nc-level-text');
var elModifierBadge = document.getElementById('nc-modifier-badge');
var elProgressFill = document.getElementById('nc-progress-fill');
var elTimerFill = document.getElementById('nc-timer-fill');
var elEquation = document.getElementById('nc-equation');
var elRuleModifier = document.getElementById('nc-rule-modifier');
var elFeedbackFlash = document.getElementById('nc-feedback-flash');
var elFeedbackIcon = document.getElementById('nc-feedback-icon');
var elFinalScore = document.getElementById('nc-final-score');
var elNewBest = document.getElementById('nc-new-best');
var elFinalLevel = document.getElementById('nc-final-level');
var elFinalAccuracy = document.getElementById('nc-final-accuracy');
var elFinalStreak = document.getElementById('nc-final-streak');
var elFinalBest = document.getElementById('nc-final-best');
var elBestDisplay = document.getElementById('nc-best-display');
var elBestScore = document.getElementById('nc-best-score');
var elLevelToast = document.getElementById('nc-level-toast');
var btnStart = document.getElementById('nc-start-btn');
var btnResume = document.getElementById('nc-resume-btn');
var btnPlayAgain = document.getElementById('nc-play-again-btn');
var answerBtns = [
document.getElementById('nc-ans-0'),
document.getElementById('nc-ans-1'),
document.getElementById('nc-ans-2'),
document.getElementById('nc-ans-3')
];

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

/* ── Modifiers ── */
var MODIFIERS = [
{ name: 'Dobre', apply: function(n) { return n * 2; } },
{ name: 'Some 10', apply: function(n) { return n + 10; } },
{ name: 'Subtraia 5', apply: function(n) { return n - 5; } },
{ name: 'Divida pela metade', apply: function(n) { return Math.round(n / 2); } }
];

function shouldHaveModifier(lvl) {
return lvl >= 6;
}

function getModifier(lvl) {
if (lvl >= 17) {
/* Dual modifier: pick two */
var a = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
var b = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
while (b === a) b = MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
return {
name: a.name + ', depois ' + b.name.toLowerCase(),
apply: function(n) { return b.apply(a.apply(n)); }
};
}
if (lvl >= 13) {
/* Pick from all modifiers */
return MODIFIERS[Math.floor(Math.random() * MODIFIERS.length)];
}
/* L6-12: simpler modifiers only */
var simple = MODIFIERS.slice(0, 2);
return simple[Math.floor(Math.random() * simple.length)];
}

/* ── Generate equation ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pickOperation(lvl) {
var ops;
if (lvl <= 3) ops = ['+', '-'];
else if (lvl <= 5) ops = ['+', '-', '*'];
else ops = ['+', '-', '*', '/'];
return ops[randInt(0, ops.length - 1)];
}

function operandLimit(lvl) {
if (lvl <= 3) return 50;
if (lvl <= 5) return 80;
if (lvl <= 8) return 120;
if (lvl <= 12) return 220;
if (lvl <= 16) return 360;
return 520;
}

function generateEquation(lvl) {
var op = pickOperation(lvl);
var max = operandLimit(lvl);
var a;
var b;
var answer;
var symbol = op;

if (op === '/') {
b = randInt(2, Math.min(12 + lvl, 24));
answer = randInt(2, Math.min(18 + lvl * 2, 80));
a = answer * b;
symbol = '\u00F7';
} else if (op === '*') {
a = randInt(3, Math.min(12 + Math.floor(lvl / 2), 24));
b = randInt(3, Math.min(12 + Math.floor(lvl / 2), 24));
symbol = '\u00D7';
answer = a * b;
} else {
a = randInt(10, max);
b = randInt(5, Math.max(8, Math.floor(max * 0.65)));
if (op === '-' && b > a) {
var swap = a;
a = b;
b = swap;
}
switch (op) {
case '+':
answer = a + b;
break;
case '-':
answer = a - b;
break;
default:
answer = a + b;
}
}

var display = a + ' ' + symbol + ' ' + b + ' = ?';
var modifier = null;
if (shouldHaveModifier(lvl) && Math.random() < 0.7) {
modifier = getModifier(lvl);
answer = modifier.apply(answer);
}

return { display: display, answer: answer, modifier: modifier };
}

function generateChoices(correct) {
var choices = [correct];
var attempts = 0;
while (choices.length < 4 && attempts < 100) {
var offset = randInt(-10, 10);
attempts++;
if (offset === 0) continue;
var wrong = Math.round(correct + offset);
if (wrong < 0) wrong = Math.abs(wrong);
if (wrong !== correct && choices.indexOf(wrong) === -1) {
choices.push(wrong);
}
}
while (choices.length < 4) {
var fallback = Math.round(correct + choices.length + attempts + 1);
if (fallback < 0) fallback = Math.abs(fallback);
if (fallback !== correct && choices.indexOf(fallback) === -1) choices.push(fallback);
else attempts++;
}
for (var i = choices.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = choices[i];
choices[i] = choices[j];
choices[j] = temp;
}
return choices;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}


var runHistory = createRuntimeHistory('nc-history-toggle', 'nc-history-panel', 'nc-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
list.innerHTML = entries.map(function(entry) {
return '<div class="gk-runtime-history-row ' + (entry.correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong') + '">' +
'<div class="gk-runtime-history-main"><div class="gk-runtime-history-detail">' + entry.html + '</div>' +
'<div class="gk-runtime-history-status">' + (entry.correct ? 'Correct' : 'Wrong') + '</div></div></div>';
}).join('');
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel || !toggle) return;
render();
var open = panel.style.display !== 'none';
panel.style.display = open ? 'none' : '';
toggle.textContent = open ? 'Show History' : 'Hide History';
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

function recordAnswerHistory(selectedValue, correct) {
var selected = selectedValue === null || selectedValue === undefined ? 'No answer' : selectedValue;
var html = '<strong>' + runHistory.escape(state.currentEquation) + '</strong>';
if (state.currentModifier) {
html += '<div class="gk-runtime-history-sub">Rule: ' + runHistory.escape(state.currentModifier.name) + '</div>';
}
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(selected) + ' | Correct: ' + runHistory.escape(state.correctAnswer) + '</div>';
runHistory.pushHtml(correct, html);
}

function renderAnswerHistory() {
runHistory.render();
}

function resetHistoryPanel() {
runHistory.resetPanel();
}
/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
if (shouldHaveModifier(state.level)) {
elModifierBadge.style.display = '';
elModifierBadge.textContent = 'Extra';
} else {
elModifierBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('nc-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('nc-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('nc-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'nc-feedback-flash';
elFeedbackIcon.className = 'nc-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('nc-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('nc-show-check');
} else {
elFeedbackFlash.classList.add('nc-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('nc-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'nc-feedback-flash';
elFeedbackIcon.className = 'nc-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('nc-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('nc-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'nc-correct-flash' : 'nc-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('nc-correct-flash', 'nc-wrong-flash');
}, 400);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var chosenValue = parseInt(answerBtns[chosenIdx].textContent, 10);
var correct = (chosenValue === state.correctAnswer);

state.totalAnswered++;
recordAnswerHistory(chosenValue, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordAnswerHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

var eq = generateEquation(state.level);
state.correctAnswer = eq.answer;
state.currentModifier = eq.modifier;
state.currentEquation = eq.display;

elEquation.textContent = eq.display;
elEquation.style.animation = 'none';
void elEquation.offsetWidth;
elEquation.style.animation = '';

if (eq.modifier) {
elRuleModifier.textContent = eq.modifier.name;
elRuleModifier.style.display = '';
} else {
elRuleModifier.style.display = 'none';
}

var choices = generateChoices(eq.answer);
state.currentChoices = choices.slice();
for (var i = 0; i < 4; i++) {
answerBtns[i].textContent = choices[i];
}

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'nc-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'nc-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'nc-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.nc-trophy');
var title = document.querySelector('#nc-complete-overlay .nc-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'FANTASTICO!';
elNewBest.className = 'nc-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F FANTASTICO! Novo Recorde!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Bom trabalho!';
elNewBest.className = 'nc-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('nc-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();
renderAnswerHistory();
resetHistoryPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var NC_WIZARD_STEPS = [
{icon: '\uD83E\uDDEE', title: 'Resolva a equacao', desc: 'Uma equacao com resposta faltante aparece. Escolha a correta!'},
{icon: '\u2728', title: 'Atencao aos modificadores', desc: 'A partir do nivel 6, modificadores de regras alteram a resposta (ex.: "Dobre").'},
{icon: '\u26A1', title: 'Rapido', desc: 'Responda antes que o tempo acabe.', final: true}
];
var ncWizardStep = 0;

function renderWizardStep() {
var s = NC_WIZARD_STEPS[ncWizardStep];
var dotsHtml = '';
for (var i = 0; i < NC_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="nc-wizard-dot' + (i === ncWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Iniciar' : 'Continuar';
elWizardCard.innerHTML =
'<div class="nc-wizard-icon">' + s.icon + '</div>' +
'<div class="nc-wizard-title">' + s.title + '</div>' +
'<div class="nc-wizard-desc">' + s.desc + '</div>' +
'<div class="nc-wizard-dots">' + dotsHtml + '</div>' +
'<button class="nc-wizard-btn" id="nc-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'nc-wizard-enter 0.3s ease-out';
document.getElementById('nc-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ncWizardStep < NC_WIZARD_STEPS.length - 1) {
ncWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ncWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctAnswer = 0;
state.currentModifier = null;
state.currentEquation = '';
state.currentChoices = [];
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('nc-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('nc-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});


for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('nc-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('nc-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('nc-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('nc-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Number Crunch', '/pt/games/number-crunch/', 'nc-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
var answerIndex = -1;
if (e.key >= '1' && e.key <= '4') {
answerIndex = parseInt(e.key, 10) - 1;
} else if (e.code) {
var keyMatch = e.code.match(/^(?:Digit|Numpad)([1-4])$/);
if (keyMatch) answerIndex = parseInt(keyMatch[1], 10) - 1;
}
if (answerIndex >= 0) {
e.preventDefault();
processAnswer(answerIndex);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('nc-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Pattern Path - Jogo de Treinamento Cerebral
URL: https://guruka.com/pt/games/pattern-path/
Description: Complete padroes visuais.

<style>
#pattern-path-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #pattern-path-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#pp-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.pp-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#pp-instructions .pp-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#pp-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: #14b8a6;
}

#pp-instructions .pp-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #pp-instructions .pp-subtitle {
color: var(--color-dark-text-secondary);
}

#pp-instructions .pp-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #pp-instructions .pp-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#pp-instructions .pp-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: #14b8a6;
}

#pp-instructions .pp-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#pp-instructions .pp-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.pp-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.pp-personal-best strong {
color: #14b8a6;
}

/* ── Buttons ── */
.pp-btn-primary {
background: #14b8a6;
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.pp-btn-primary:hover {
background: #0d9488;
}

.pp-btn-primary:active {
transform: scale(0.97);
}

.pp-btn-secondary {
background: transparent;
color: #14b8a6;
border: 1px solid #14b8a6;
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.pp-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .pp-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#pp-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#pp-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: pp-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #pp-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes pp-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.pp-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.pp-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.pp-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .pp-wizard-desc {
color: var(--color-dark-text-secondary);
}
.pp-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.pp-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.pp-wizard-dot.active {
background: #14b8a6;
transform: scale(1.3);
}
[data-theme="dark"] .pp-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .pp-wizard-dot.active {
background: #14b8a6;
}
.pp-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: #14b8a6;
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.pp-wizard-btn:hover {
background: #0d9488;
}
@media (max-width: 400px) {
#pp-wizard-card {
padding: 1.5rem 1rem;
}
.pp-wizard-icon {
font-size: 2rem;
}
.pp-wizard-title {
font-size: 1.1rem;
}
.pp-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#pp-playing {
display: none;
flex: 1;
flex-direction: column;
}

.pp-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .pp-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-stat {
text-align: center;
}

.pp-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .pp-stat-label {
color: var(--color-dark-text-secondary);
}

.pp-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.pp-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.pp-level-text {
font-weight: 600;
}

.pp-difficulty-badge {
background: #14b8a6;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.pp-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .pp-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-progress-fill {
height: 100%;
background: #14b8a6;
border-radius: 3px;
transition: width 0.3s ease;
}

.pp-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .pp-timer-bar {
background: var(--color-dark-bg-secondary);
}

.pp-timer-fill {
height: 100%;
background: #14b8a6;
border-radius: 2px;
transition: width 0.05s linear;
}

.pp-timer-fill.pp-timer-warning {
background: #ef4444;
}

/* ── Pattern Display Area ── */
.pp-pattern-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
}

.pp-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.pp-feedback-flash.pp-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.pp-feedback-flash.pp-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.pp-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.pp-feedback-icon.pp-show-check {
animation: pp-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.pp-feedback-icon.pp-show-x {
animation: pp-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes pp-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.pp-sequence-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
animation: pp-seq-enter 0.3s ease-out;
}

@keyframes pp-seq-enter {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.pp-seq-element {
width: 70px;
height: 70px;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-primary, #fff);
}

[data-theme="dark"] .pp-seq-element {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.pp-seq-element svg {
display: block;
}

.pp-seq-missing {
border: 2px dashed #14b8a6;
background: rgba(20, 184, 166, 0.05);
font-size: 1.75rem;
font-weight: 700;
color: #14b8a6;
}

[data-theme="dark"] .pp-seq-missing {
background: rgba(20, 184, 166, 0.1);
}

.pp-seq-arrow {
font-size: 1.25rem;
color: var(--color-text-secondary);
flex-shrink: 0;
}

[data-theme="dark"] .pp-seq-arrow {
color: var(--color-dark-text-secondary);
}

/* ── Answer Choice Buttons ── */
.pp-answers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.pp-answer-btn {
padding: 0.75rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
}

[data-theme="dark"] .pp-answer-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.pp-answer-btn:active {
transform: scale(0.95);
}

.pp-answer-btn:hover {
border-color: #14b8a6;
background: rgba(20, 184, 166, 0.05);
}

[data-theme="dark"] .pp-answer-btn:hover {
background: rgba(20, 184, 166, 0.15);
}

.pp-answer-btn svg {
display: block;
}

.pp-answer-btn.pp-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.pp-answer-btn.pp-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.pp-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#pp-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#pp-pause-overlay .pp-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#pp-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.pp-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: pp-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .pp-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes pp-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.pp-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.pp-complete-card .pp-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.pp-final-score {
font-size: 2.5rem;
font-weight: 800;
color: #14b8a6;
margin: 0.5rem 0;
}

.pp-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: pp-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes pp-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.pp-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.pp-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .pp-complete-stat {
background: var(--color-dark-bg-secondary);
}

.pp-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .pp-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.pp-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.pp-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.pp-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .pp-back-link {
color: var(--color-dark-text-secondary);
}

.pp-back-link:hover {
color: #14b8a6;
text-decoration: underline;
}

/* ── Level Up Toast ── */
.pp-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #14b8a6;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.pp-level-up-toast.pp-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#pattern-path-game {
padding: 0.5rem;
}
.pp-seq-element {
width: 56px;
height: 56px;
}
.pp-seq-arrow {
font-size: 1rem;
}
.pp-answer-btn {
padding: 0.5rem;
min-height: 64px;
}
.pp-header {
padding: 0.5rem;
gap: 0.25rem;
}
.pp-stat-value {
font-size: 1rem;
}
#pp-instructions { padding: 0.75rem 0.5rem; }
#pp-instructions .pp-icon { font-size: 2rem; margin-bottom: 0; }
#pp-instructions h2 { font-size: 1.3rem; }
#pp-instructions .pp-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#pp-instructions .pp-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#pp-instructions .pp-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.pp-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#pattern-path-game {
padding: 0.75rem;
}
.pp-seq-element {
width: 62px;
height: 62px;
}
.pp-answer-btn {
padding: 0.625rem;
min-height: 72px;
}
}
@media (max-width: 360px) {
.pp-seq-element {
width: 48px;
height: 48px;
}
.pp-seq-arrow {
font-size: 0.85rem;
}
.pp-sequence-row {
gap: 0.3rem;
}
.pp-answer-btn {
padding: 0.4rem;
min-height: 56px;
}
.pp-complete-stats {
grid-template-columns: 1fr 1fr;
}
.pp-final-score {
font-size: 2rem;
}
.pp-header {
padding: 0.375rem;
}
.pp-stat-value {
font-size: 0.9rem;
}
}
@keyframes pp-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.pp-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.pp-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: pp-confetti-fall 2.5s ease-in forwards;
}
.pp-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(20,184,166,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: pp-glow-fade 1s ease-out forwards;
}
@keyframes pp-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.pp-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: pp-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(20,184,166,0.4);
}
@keyframes pp-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#pattern-path-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#pattern-path-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #pattern-path-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#pattern-path-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#pattern-path-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="pattern-path-game">

<div id="pp-instructions">
<div class="pp-title-row"><span class="pp-icon">&#129513;</span><h2>Pattern Path</h2></div>
<p class="pp-subtitle">Reconhecimento visual de padroes e inteligencia fluida</p>
<div class="pp-how-to">
<h3>Como Jogar</h3>
<ol>
<li>Uma sequencia de formas com um <strong>elemento faltante</strong> (?) aparece.</li>
<li>Identifique o padrao (mudancas de cor, forma, tamanho ou rotacao).</li>
<li>Escolha o <strong>complemento correto</strong> entre 4 opcoes.</li>


</ol>
</div>
<div id="pp-best-display" class="pp-personal-best" style="display:none;">
Recorde: <strong id="pp-best-score">0</strong> Pontos
</div>
<button class="pp-btn-primary" id="pp-start-btn">Iniciar</button>
<div id="pp-challenge-banner-wrap"></div>
</div>

<div id="pp-wizard">
<div id="pp-wizard-card"></div>
</div>

<div id="pp-playing">
<div class="pp-header">
<div class="pp-stat">
<div class="pp-stat-label">Pontos</div>
<div class="pp-stat-value" id="pp-score">0</div>
</div>
<div class="pp-stat">
<div class="pp-stat-label">Sequencia</div>
<div class="pp-stat-value" id="pp-streak">0</div>
</div>
<div class="pp-stat">
<div class="pp-stat-label">Nivel</div>
<div class="pp-stat-value" id="pp-level">1</div>
</div>
</div>
<div class="pp-level-info">
<span class="pp-level-text">Level <span id="pp-level-text">1</span></span>
<span class="pp-difficulty-badge" id="pp-difficulty-badge">Cores</span>
</div>
<div class="pp-progress-bar">
<div class="pp-progress-fill" id="pp-progress-fill" style="width:0%"></div>
</div>
<div class="pp-timer-bar">
<div class="pp-timer-fill" id="pp-timer-fill" style="width:100%"></div>
</div>
<div class="pp-pattern-area">
<div class="pp-feedback-flash" id="pp-feedback-flash"></div>
<div class="pp-feedback-icon" id="pp-feedback-icon"></div>
<div class="pp-sequence-row" id="pp-sequence-row"></div>
</div>
<div class="pp-answers" id="pp-answers">
<button class="pp-answer-btn" id="pp-ans-0"></button>
<button class="pp-answer-btn" id="pp-ans-1"></button>
<button class="pp-answer-btn" id="pp-ans-2"></button>
<button class="pp-answer-btn" id="pp-ans-3"></button>
</div>
<div class="pp-playing-hint">Dr&uuml;cke <strong>1-4</strong> zum Antworten &middot; <strong>Esc</strong> zum Pausieren</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="pp-pause-btn" type="button">Pausar</button>
<button class="gk-finish-btn" id="pp-finish-btn" type="button">Encerrar Jogo</button>
</div>
</div>

<div id="pp-pause-overlay">
<div class="pp-pause-text">Pausado</div>
<button class="pp-btn-primary" id="pp-resume-btn">Continuar</button>
</div>

<div id="pp-complete-overlay">
<div class="pp-complete-card">
<button class="gk-complete-close" id="pp-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="pp-trophy">&#127942;</div>
<h2>Jogo Concluido!</h2>
<div class="pp-final-score" id="pp-final-score">0</div>
<div id="pp-new-best" class="pp-new-best" style="display:none;">&#11088; Novo Recorde!</div>
<div class="gk-challenge-result" id="pp-challenge-result" style="display:none;"></div>
<div class="pp-complete-stats">
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Nivel</div>
<div class="pp-complete-stat-value" id="pp-final-level">1</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Precisao</div>
<div class="pp-complete-stat-value" id="pp-final-accuracy">0%</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Sequencia</div>
<div class="pp-complete-stat-value" id="pp-final-streak">0</div>
</div>
<div class="pp-complete-stat">
<div class="pp-complete-stat-label">Recorde</div>
<div class="pp-complete-stat-value" id="pp-final-best">0</div>
</div>
</div>
<div class="pp-complete-actions">
<button class="pp-btn-primary" id="pp-play-again-btn">Repetir</button>
<button class="gk-runtime-history-toggle" id="pp-history-toggle" type="button">Show History</button>
<a href="/pt/games/" class="pp-back-link">&larr; Todos os Jogos</a>
</div>
<div class="gk-runtime-history-panel" id="pp-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="pp-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="pp-share-btn">&#128279; Compartilhar resultado</button>
<div class="gk-share-copied" id="pp-share-copied" style="display:none;">Copiado!</div>
</div>
</div>
</div>

<div class="pp-level-up-toast" id="pp-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_pattern-path_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('pp-history-toggle', 'pp-history-panel', 'pp-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctChoiceIdx: -1,
correctChoice: null,
currentChoices: []
};

/* ── Shape / Color / Size definitions ── */
var SHAPES = ['circle', 'square', 'triangle'];
var COLORS = ['#ef4444', '#3b82f6', '#22c55e', '#eab308', '#a855f7', '#f97316'];
var COLOR_NAMES = { '#ef4444': 'red', '#3b82f6': 'blue', '#22c55e': 'green', '#eab308': 'yellow', '#a855f7': 'purple', '#f97316': 'orange' };
var SIZES = [30, 45, 60];
var SIZE_NAMES = ['small', 'medium', 'large'];
var ROTATIONS = [0, 90, 180, 270];

/* ── DOM refs ── */
var elInstructions = document.getElementById('pp-instructions');
var elWizard = document.getElementById('pp-wizard');
var elWizardCard = document.getElementById('pp-wizard-card');
var elPlaying = document.getElementById('pp-playing');
var elPauseOverlay = document.getElementById('pp-pause-overlay');
var elCompleteOverlay = document.getElementById('pp-complete-overlay');
var elScore = document.getElementById('pp-score');
var elStreak = document.getElementById('pp-streak');
var elLevel = document.getElementById('pp-level');
var elLevelText = document.getElementById('pp-level-text');
var elDifficultyBadge = document.getElementById('pp-difficulty-badge');
var elProgressFill = document.getElementById('pp-progress-fill');
var elTimerFill = document.getElementById('pp-timer-fill');
var elSequenceRow = document.getElementById('pp-sequence-row');
var elFeedbackFlash = document.getElementById('pp-feedback-flash');
var elFeedbackIcon = document.getElementById('pp-feedback-icon');
var elFinalScore = document.getElementById('pp-final-score');
var elNewBest = document.getElementById('pp-new-best');
var elFinalLevel = document.getElementById('pp-final-level');
var elFinalAccuracy = document.getElementById('pp-final-accuracy');
var elFinalStreak = document.getElementById('pp-final-streak');
var elFinalBest = document.getElementById('pp-final-best');
var elBestDisplay = document.getElementById('pp-best-display');
var elBestScore = document.getElementById('pp-best-score');
var elLevelToast = document.getElementById('pp-level-toast');
var btnStart = document.getElementById('pp-start-btn');
var btnResume = document.getElementById('pp-resume-btn');
var btnPlayAgain = document.getElementById('pp-play-again-btn');
var answerBtns = [
document.getElementById('pp-ans-0'),
document.getElementById('pp-ans-1'),
document.getElementById('pp-ans-2'),
document.getElementById('pp-ans-3')
];

/* ── SVG Shape Rendering ── */
function renderShape(shape, color, size, rotation) {
var vb = '0 0 60 60';
var inner = '';
if (shape === 'circle') {
var r = Math.round(size * 25 / 60);
inner = '<circle cx="30" cy="30" r="' + r + '" fill="' + color + '"/>';
} else if (shape === 'square') {
var half = Math.round(size * 50 / 60);
var off = Math.round((60 - half) / 2);
inner = '<rect x="' + off + '" y="' + off + '" width="' + half + '" height="' + half + '" fill="' + color + '" transform="rotate(' + rotation + ' 30 30)"/>';
} else if (shape === 'triangle') {
var h = Math.round(size * 50 / 60);
var topY = 30 - Math.round(h / 2);
var botY = 30 + Math.round(h / 2);
var leftX = 30 - Math.round(h / 2);
var rightX = 30 + Math.round(h / 2);
inner = '<polygon points="30,' + topY + ' ' + rightX + ',' + botY + ' ' + leftX + ',' + botY + '" fill="' + color + '" transform="rotate(' + rotation + ' 30 30)"/>';
}
return '<svg viewBox="' + vb + '" width="' + size + '" height="' + size + '">' + inner + '</svg>';
}

/* ── Level parameters ── */
function getDisplayTime(lvl) {
if (lvl <= 3) return 10000;
if (lvl <= 6) return 8000;
if (lvl <= 9) return 7000;
if (lvl <= 12) return 6000;
if (lvl <= 16) return 5000;
return 4000;
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getSeqLength(lvl) {
if (lvl <= 6) return 3;
if (lvl <= 12) return 4;
return 5;
}

function getDifficultyLabel(lvl) {
if (lvl <= 3) return 'Cores';
if (lvl <= 6) return 'Formas';
if (lvl <= 9) return 'Cor + Forma';
if (lvl <= 12) return 'Rotacao';
if (lvl <= 16) return 'Tamanho + Quantidade';
return 'Multi-Atributo';
}

/* ── Utility ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pick(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
return arr;
}

function cloneEl(el) {
return { shape: el.shape, color: el.color, size: el.size, rotation: el.rotation };
}

function elEquals(a, b) {
return a.shape === b.shape && a.color === b.color && a.size === b.size && a.rotation === b.rotation;
}

function indexOfValue(arr, value) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === value) return i;
}
return -1;
}

function getVisualRotation(shape, rotation) {
return shape === 'triangle' ? rotation : 0;
}

function getVisualIndexes(el) {
if (!el) return null;
var rotation = getVisualRotation(el.shape, el.rotation);
var idx = [
indexOfValue(SHAPES, el.shape),
indexOfValue(COLORS, el.color),
indexOfValue(SIZES, el.size),
indexOfValue(ROTATIONS, rotation)
];
for (var i = 0; i < idx.length; i++) {
if (idx[i] < 0) return null;
}
return idx;
}

function visuallyEquals(a, b) {
var ai = getVisualIndexes(a);
var bi = getVisualIndexes(b);
return !!ai && !!bi &&
ai[0] === bi[0] &&
ai[1] === bi[1] &&
ai[2] === bi[2] &&
ai[3] === bi[3];
}

function createChoiceSeenMatrix() {
var seen = [];
for (var s = 0; s < SHAPES.length; s++) {
seen[s] = [];
for (var c = 0; c < COLORS.length; c++) {
seen[s][c] = [];
for (var z = 0; z < SIZES.length; z++) {
seen[s][c][z] = [];
for (var r = 0; r < ROTATIONS.length; r++) {
seen[s][c][z][r] = false;
}
}
}
}
return seen;
}

function markChoiceSeen(seen, el) {
var idx = getVisualIndexes(el);
if (!idx) return false;
if (seen[idx[0]][idx[1]][idx[2]][idx[3]]) return false;
seen[idx[0]][idx[1]][idx[2]][idx[3]] = true;
return true;
}

/* ── Pattern Generation ── */
function generatePattern(lvl) {
var seqLen = getSeqLength(lvl);
var sequence = [];
var correct;

if (lvl <= 3) {
/* Single attribute: color changes in sequence */
var colorSeq = shuffle(COLORS.slice()).slice(0, seqLen + 1);
var baseShape = pick(SHAPES);
var baseSize = 45;
for (var i = 0; i <= seqLen; i++) {
sequence.push({ shape: baseShape, color: colorSeq[i % colorSeq.length], size: baseSize, rotation: 0 });
}
correct = sequence.pop();

} else if (lvl <= 6) {
/* Shape patterns: circle -> square -> triangle -> ... */
var baseColor = pick(COLORS);
var baseSize2 = 45;
for (var i = 0; i <= seqLen; i++) {
sequence.push({ shape: SHAPES[i % SHAPES.length], color: baseColor, size: baseSize2, rotation: 0 });
}
correct = sequence.pop();

} else if (lvl <= 9) {
/* 2-attribute: color + shape both change */
var colorPool = shuffle(COLORS.slice());
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorPool[i % colorPool.length],
size: 45,
rotation: 0
});
}
correct = sequence.pop();

} else if (lvl <= 12) {
/* Rotation patterns: shapes rotate 0 -> 90 -> 180 -> 270 */
var baseShape3 = 'triangle';
var baseColor3 = pick(COLORS);
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: baseShape3,
color: baseColor3,
size: 45,
rotation: ROTATIONS[i % ROTATIONS.length]
});
}
correct = sequence.pop();

} else if (lvl <= 16) {
/* Size + shape changes */
var colorBase = pick(COLORS);
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorBase,
size: SIZES[i % SIZES.length],
rotation: 0
});
}
correct = sequence.pop();

} else {
/* L17-20: 3 attributes changing (shape + color + size) */
var colorPool2 = shuffle(COLORS.slice());
for (var i = 0; i <= seqLen; i++) {
sequence.push({
shape: SHAPES[i % SHAPES.length],
color: colorPool2[i % colorPool2.length],
size: SIZES[i % SIZES.length],
rotation: ROTATIONS[i % ROTATIONS.length]
});
}
correct = sequence.pop();
}

return { sequence: sequence, correct: correct };
}

function buildChoiceCandidates(correct, lvl) {
var shapes = [correct.shape];
var colors = [correct.color];
var sizes = [correct.size];
var rotations = [correct.rotation];

if (lvl <= 3) {
colors = COLORS.slice();
} else if (lvl <= 6) {
shapes = SHAPES.slice();
colors = COLORS.slice();
} else if (lvl <= 9) {
shapes = SHAPES.slice();
colors = COLORS.slice();
} else if (lvl <= 12) {
rotations = ROTATIONS.slice();
} else if (lvl <= 16) {
shapes = SHAPES.slice();
sizes = SIZES.slice();
} else {
shapes = SHAPES.slice();
colors = COLORS.slice();
sizes = SIZES.slice();
rotations = ROTATIONS.slice();
}

var candidates = [];
for (var s = 0; s < shapes.length; s++) {
for (var c = 0; c < colors.length; c++) {
for (var z = 0; z < sizes.length; z++) {
for (var r = 0; r < rotations.length; r++) {
candidates.push({
shape: shapes[s],
color: colors[c],
size: sizes[z],
rotation: rotations[r]
});
}
}
}
}
return candidates;
}

function addUniqueChoice(choices, seen, candidate) {
if (!markChoiceSeen(seen, candidate)) return false;
choices.push(cloneEl(candidate));
return true;
}

function generateChoices(correct, lvl) {
var choices = [];
var seen = createChoiceSeenMatrix();
addUniqueChoice(choices, seen, correct);
var candidates = shuffle(buildChoiceCandidates(correct, lvl));

for (var i = 0; i < candidates.length && choices.length < 4; i++) {
addUniqueChoice(choices, seen, candidates[i]);
}

if (choices.length < 4) {
var fallback = shuffle(buildChoiceCandidates(correct, MAX_LEVEL));
for (var j = 0; j < fallback.length && choices.length < 4; j++) {
addUniqueChoice(choices, seen, fallback[j]);
}
}

return shuffle(choices);
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
elDifficultyBadge.textContent = getDifficultyLabel(state.level);
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('pp-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('pp-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('pp-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'pp-feedback-flash';
elFeedbackIcon.className = 'pp-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('pp-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('pp-show-check');
} else {
elFeedbackFlash.classList.add('pp-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('pp-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'pp-feedback-flash';
elFeedbackIcon.className = 'pp-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('pp-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('pp-toast-show');
}, 1500);
}

/* ── Flash answer button ── */
function flashAnswerBtn(idx, correct) {
answerBtns[idx].classList.add(correct ? 'pp-correct-flash' : 'pp-wrong-flash');
setTimeout(function() {
answerBtns[idx].classList.remove('pp-correct-flash', 'pp-wrong-flash');
}, 400);
}

/* ── Render sequence display ── */
function renderSequence(sequence) {
var html = '';
for (var i = 0; i < sequence.length; i++) {
var el = sequence[i];
html += '<div class="pp-seq-element">';
html += renderShape(el.shape, el.color, el.size, el.rotation);
html += '</div>';
if (i < sequence.length) {
html += '<div class="pp-seq-arrow">\u2192</div>';
}
}
/* Missing element placeholder */
html += '<div class="pp-seq-element pp-seq-missing">?</div>';
elSequenceRow.innerHTML = html;
}

/* ── Render choice buttons ── */
function renderChoices(choices) {
for (var i = 0; i < 4; i++) {
var el = choices[i];
answerBtns[i].innerHTML = renderShape(el.shape, el.color, el.size, el.rotation);
}
}

function recordPatternHistory(selectedChoice, correct) {
var html = '<strong>Missing shape</strong>';
html += '<div class="gk-runtime-history-sub">Your: ' + (selectedChoice ? renderShape(selectedChoice.shape, selectedChoice.color, selectedChoice.size, selectedChoice.rotation) : 'No answer') + ' | Correct: ' + renderShape(state.correctChoice.shape, state.correctChoice.color, state.correctChoice.size, state.correctChoice.rotation) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenIdx) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var selectedChoice = state.currentChoices[chosenIdx];
var correct = selectedChoice ? visuallyEquals(selectedChoice, state.correctChoice) : false;

state.totalAnswered++;
recordPatternHistory(selectedChoice, correct);
flashAnswerBtn(chosenIdx, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 2000) {
points += Math.floor((2000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordPatternHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;

var pattern = generatePattern(state.level);
var choices = generateChoices(pattern.correct, state.level);

/* Find correct choice index */
state.correctChoice = cloneEl(pattern.correct);
state.currentChoices = choices.map(cloneEl);
state.correctChoiceIdx = -1;
for (var i = 0; i < choices.length; i++) {
if (visuallyEquals(choices[i], state.correctChoice)) {
state.correctChoiceIdx = i;
break;
}
}

renderSequence(pattern.sequence);
renderChoices(choices);

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#14b8a6','#ef4444','#22c55e','#3b82f6','#a855f7','#f97316'];
var container = document.createElement('div');
container.className = 'pp-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'pp-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'pp-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.pp-trophy');
var title = document.querySelector('#pp-complete-overlay .pp-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'FANTASTICO!';
elNewBest.className = 'pp-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F FANTASTICO! Novo Recorde!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Bom trabalho!';
elNewBest.className = 'pp-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('pp-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var PP_WIZARD_STEPS = [
{icon: '\uD83E\uDDE9', title: 'Encontre o padrao que falta', desc: 'Uma sequencia de formas aparece com um elemento faltante. Identifique o padrao!'},
{icon: '\uD83C\uDFA8', title: 'Os atributos mudam', desc: 'Padroes incluem cor, forma, tamanho e rotacao. Niveis mais altos combinam multiplos atributos.'},
{icon: '\u26A1', title: 'Rapido', desc: 'Escolha a forma correta antes que o tempo acabe. Velocidade e sequencias dao pontos bonus!', final: true}
];
var ppWizardStep = 0;

function renderWizardStep() {
var s = PP_WIZARD_STEPS[ppWizardStep];
var dotsHtml = '';
for (var i = 0; i < PP_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="pp-wizard-dot' + (i === ppWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Iniciar' : 'Continuar';
elWizardCard.innerHTML =
'<div class="pp-wizard-icon">' + s.icon + '</div>' +
'<div class="pp-wizard-title">' + s.title + '</div>' +
'<div class="pp-wizard-desc">' + s.desc + '</div>' +
'<div class="pp-wizard-dots">' + dotsHtml + '</div>' +
'<button class="pp-wizard-btn" id="pp-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'pp-wizard-enter 0.3s ease-out';
document.getElementById('pp-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (ppWizardStep < PP_WIZARD_STEPS.length - 1) {
ppWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
ppWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctChoiceIdx = -1;
state.correctChoice = null;
state.currentChoices = [];
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('pp-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('pp-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

for (var i = 0; i < 4; i++) {
(function(idx) {
answerBtns[idx].addEventListener('click', function() {
processAnswer(idx);
});
})(i);
}

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('pp-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('pp-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('pp-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('pp-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Pattern Path', '/pt/games/pattern-path/', 'pp-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key >= '1' && e.key <= '4') {
e.preventDefault();
processAnswer(parseInt(e.key, 10) - 1);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('pp-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Quick Sort - Jogo de Treinamento Cerebral
URL: https://guruka.com/pt/games/quick-sort/
Description: Classifique com regras mutaveis.

<style>
#quick-sort-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #quick-sort-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#qs-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.qs-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#qs-instructions .qs-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#qs-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: #f97316;
}

#qs-instructions .qs-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #qs-instructions .qs-subtitle {
color: var(--color-dark-text-secondary);
}

#qs-instructions .qs-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #qs-instructions .qs-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#qs-instructions .qs-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: #f97316;
}

#qs-instructions .qs-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#qs-instructions .qs-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.qs-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.qs-personal-best strong {
color: #f97316;
}

/* ── Buttons ── */
.qs-btn-primary {
background: #f97316;
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.qs-btn-primary:hover {
background: #ea580c;
}

.qs-btn-primary:active {
transform: scale(0.97);
}

.qs-btn-secondary {
background: transparent;
color: #f97316;
border: 1px solid #f97316;
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.qs-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .qs-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#qs-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#qs-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: qs-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #qs-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes qs-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.qs-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.qs-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.qs-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .qs-wizard-desc {
color: var(--color-dark-text-secondary);
}
.qs-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.qs-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.qs-wizard-dot.active {
background: #f97316;
transform: scale(1.3);
}
[data-theme="dark"] .qs-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .qs-wizard-dot.active {
background: #f97316;
}
.qs-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: #f97316;
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.qs-wizard-btn:hover {
background: #ea580c;
}
@media (max-width: 400px) {
#qs-wizard-card {
padding: 1.5rem 1rem;
}
.qs-wizard-icon {
font-size: 2rem;
}
.qs-wizard-title {
font-size: 1.1rem;
}
.qs-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#qs-playing {
display: none;
flex: 1;
flex-direction: column;
}

.qs-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .qs-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.qs-stat {
text-align: center;
}

.qs-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .qs-stat-label {
color: var(--color-dark-text-secondary);
}

.qs-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.qs-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.qs-level-text {
font-weight: 600;
}

.qs-rule-change-badge {
background: #f97316;
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.qs-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .qs-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.qs-progress-fill {
height: 100%;
background: #f97316;
border-radius: 3px;
transition: width 0.3s ease;
}

.qs-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .qs-timer-bar {
background: var(--color-dark-bg-secondary);
}

.qs-timer-fill {
height: 100%;
background: #f97316;
border-radius: 2px;
transition: width 0.05s linear;
}

.qs-timer-fill.qs-timer-warning {
background: #ef4444;
}

/* ── Rule Indicator ── */
.qs-rule-indicator {
background: #f97316;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 700;
text-align: center;
margin-bottom: 1rem;
letter-spacing: 0.02em;
}

/* ── Stimulus Area ── */
.qs-stimulus-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 160px;
position: relative;
}

.qs-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.qs-feedback-flash.qs-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.qs-feedback-flash.qs-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.qs-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.qs-feedback-icon.qs-show-check {
animation: qs-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.qs-feedback-icon.qs-show-x {
animation: qs-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes qs-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.qs-stimulus {
font-size: 3rem;
font-weight: 700;
line-height: 1.2;
animation: qs-stim-enter 0.2s ease-out;
text-align: center;
}

@keyframes qs-stim-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

/* ── Sort Buttons (Left / Right) ── */
.qs-sort-buttons {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.qs-sort-btn {
flex: 1;
padding: 1.1rem 0.75rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
background: var(--color-bg-primary);
color: var(--color-text-primary);
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}

[data-theme="dark"] .qs-sort-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.qs-sort-btn:active {
transform: scale(0.95);
}

.qs-btn-left {
border-left: 4px solid #f97316;
}

.qs-btn-left:hover {
border-color: #f97316;
background: rgba(249,115,22,0.05);
}

[data-theme="dark"] .qs-btn-left:hover {
background: rgba(249,115,22,0.15);
}

.qs-btn-right {
border-right: 4px solid #f97316;
}

.qs-btn-right:hover {
border-color: #f97316;
background: rgba(249,115,22,0.05);
}

[data-theme="dark"] .qs-btn-right:hover {
background: rgba(249,115,22,0.15);
}

.qs-sort-btn .qs-arrow {
font-size: 1.3rem;
opacity: 0.6;
}

.qs-sort-btn .qs-label {
font-size: 1rem;
}

.qs-sort-btn.qs-correct-flash {
border-color: #22c55e;
background: rgba(34,197,94,0.1);
}

.qs-sort-btn.qs-wrong-flash {
border-color: #ef4444;
background: rgba(239,68,68,0.1);
}

.qs-playing-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-playing-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#qs-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#qs-pause-overlay .qs-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#qs-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.qs-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: qs-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .qs-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes qs-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.qs-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.qs-complete-card .qs-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.qs-final-score {
font-size: 2.5rem;
font-weight: 800;
color: #f97316;
margin: 0.5rem 0;
}

.qs-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: qs-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes qs-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.qs-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.qs-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .qs-complete-stat {
background: var(--color-dark-bg-secondary);
}

.qs-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .qs-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.qs-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.qs-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.qs-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .qs-back-link {
color: var(--color-dark-text-secondary);
}

.qs-back-link:hover {
color: #f97316;
text-decoration: underline;
}

/* ── Level Up Toast ── */
.qs-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #f97316;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.qs-level-up-toast.qs-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Rule Change Toast ── */
.qs-rule-toast {
position: fixed;
top: 4.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: #7c3aed;
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 0.95rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.qs-rule-toast.qs-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#quick-sort-game {
padding: 0.5rem;
}
.qs-stimulus {
font-size: 2.5rem;
}
.qs-sort-btn {
padding: 0.85rem 0.5rem;
font-size: 1rem;
min-height: 52px;
}
.qs-sort-btn .qs-label {
font-size: 0.9rem;
}
.qs-header {
padding: 0.5rem;
gap: 0.25rem;
}
.qs-stat-value {
font-size: 1rem;
}
.qs-rule-indicator {
font-size: 0.85rem;
padding: 0.4rem 0.75rem;
}
#qs-instructions { padding: 0.75rem 0.5rem; }
#qs-instructions .qs-icon { font-size: 2rem; margin-bottom: 0; }
#qs-instructions h2 { font-size: 1.3rem; }
#qs-instructions .qs-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#qs-instructions .qs-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#qs-instructions .qs-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.qs-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#quick-sort-game {
padding: 0.75rem;
}
.qs-stimulus {
font-size: 2.75rem;
}
.qs-sort-btn {
padding: 1rem 0.5rem;
}
}
@media (max-width: 360px) {
.qs-stimulus {
font-size: 2rem;
}
.qs-sort-btn {
padding: 0.7rem 0.4rem;
font-size: 0.9rem;
min-height: 48px;
}
.qs-sort-btn .qs-label {
font-size: 0.8rem;
}
.qs-sort-btn .qs-arrow {
font-size: 1.1rem;
}
.qs-complete-stats {
grid-template-columns: 1fr 1fr;
}
.qs-final-score {
font-size: 2rem;
}
.qs-header {
padding: 0.375rem;
}
.qs-stat-value {
font-size: 0.9rem;
}
}
@keyframes qs-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.qs-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.qs-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: qs-confetti-fall 2.5s ease-in forwards;
}
.qs-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(249,115,22,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: qs-glow-fade 1s ease-out forwards;
}
@keyframes qs-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.qs-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: qs-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(249,115,22,0.4);
}
@keyframes qs-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#quick-sort-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#quick-sort-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #quick-sort-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#quick-sort-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#quick-sort-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="quick-sort-game">

<div id="qs-instructions">
<div class="qs-title-row"><span class="qs-icon">&#128450;</span><h2>Quick Sort</h2></div>
<p class="qs-subtitle">Velocidade de categorizacao e alternancia de tarefas</p>
<div class="qs-how-to">
<h3>Como Jogar</h3>
<ol>
<li>Um elemento (numero, forma ou palavra) aparece na tela.</li>
<li>Duas categorias sao mostradas <strong>a esquerda e a direita</strong>.</li>
<li>Toque no lado correto para classificar o elemento.</li>
<li>A regra de classificacao <strong>muda</strong> a cada poucas rodadas!</li>

</ol>
</div>
<div id="qs-best-display" class="qs-personal-best" style="display:none;">
Recorde: <strong id="qs-best-score">0</strong> Pontos
</div>
<button class="qs-btn-primary" id="qs-start-btn">Iniciar</button>
<div id="qs-challenge-banner-wrap"></div>
</div>

<div id="qs-wizard">
<div id="qs-wizard-card"></div>
</div>

<div id="qs-playing">
<div class="qs-header">
<div class="qs-stat">
<div class="qs-stat-label">Pontos</div>
<div class="qs-stat-value" id="qs-score">0</div>
</div>
<div class="qs-stat">
<div class="qs-stat-label">Sequencia</div>
<div class="qs-stat-value" id="qs-streak">0</div>
</div>
<div class="qs-stat">
<div class="qs-stat-label">Nivel</div>
<div class="qs-stat-value" id="qs-level">1</div>
</div>
</div>
<div class="qs-level-info">
<span class="qs-level-text">Level <span id="qs-level-text">1</span></span>
<span class="qs-rule-change-badge" id="qs-rule-badge" style="display:none;">Troca de Regra</span>
</div>
<div class="qs-progress-bar">
<div class="qs-progress-fill" id="qs-progress-fill" style="width:0%"></div>
</div>
<div class="qs-timer-bar">
<div class="qs-timer-fill" id="qs-timer-fill" style="width:100%"></div>
</div>
<div class="qs-rule-indicator" id="qs-rule-indicator">Classifique: Par / Impar</div>
<div class="qs-stimulus-area">
<div class="qs-feedback-flash" id="qs-feedback-flash"></div>
<div class="qs-feedback-icon" id="qs-feedback-icon"></div>
<div class="qs-stimulus" id="qs-stimulus"></div>
</div>
<div class="qs-sort-buttons">
<button class="qs-sort-btn qs-btn-left" id="qs-btn-left">
<span class="qs-arrow">1</span>
<span class="qs-label" id="qs-label-left">Par</span>
</button>
<button class="qs-sort-btn qs-btn-right" id="qs-btn-right">
<span class="qs-label" id="qs-label-right">Impar</span>
<span class="qs-arrow">2</span>
</button>
</div>
<div class="qs-playing-hint">Pressione <strong>1</strong> para esquerda &middot; <strong>2</strong> para direita &middot; <strong>Esc</strong> para pausar</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="qs-pause-btn" type="button">Pausar</button>
<button class="gk-finish-btn" id="qs-finish-btn" type="button">Encerrar Jogo</button>
</div>
</div>

<div id="qs-pause-overlay">
<div class="qs-pause-text">Pausado</div>
<button class="qs-btn-primary" id="qs-resume-btn">Continuar</button>
</div>

<div id="qs-complete-overlay">
<div class="qs-complete-card">
<button class="gk-complete-close" id="qs-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="qs-trophy">&#127942;</div>
<h2>Jogo Concluido!</h2>
<div class="qs-final-score" id="qs-final-score">0</div>
<div id="qs-new-best" class="qs-new-best" style="display:none;">&#11088; Novo Recorde!</div>
<div class="gk-challenge-result" id="qs-challenge-result" style="display:none;"></div>
<div class="qs-complete-stats">
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Nivel</div>
<div class="qs-complete-stat-value" id="qs-final-level">1</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Precisao</div>
<div class="qs-complete-stat-value" id="qs-final-accuracy">0%</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Sequencia</div>
<div class="qs-complete-stat-value" id="qs-final-streak">0</div>
</div>
<div class="qs-complete-stat">
<div class="qs-complete-stat-label">Recorde</div>
<div class="qs-complete-stat-value" id="qs-final-best">0</div>
</div>
</div>
<div class="qs-complete-actions">
<button class="qs-btn-primary" id="qs-play-again-btn">Repetir</button>
<button class="gk-runtime-history-toggle" id="qs-history-toggle" type="button">Show History</button>
<a href="/pt/games/" class="qs-back-link">&larr; Todos os Jogos</a>
</div>
<div class="gk-runtime-history-panel" id="qs-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="qs-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="qs-share-btn">&#128279; Compartilhar resultado</button>
<div class="gk-share-copied" id="qs-share-copied" style="display:none;">Copiado!</div>
</div>
</div>
</div>

<div class="qs-level-up-toast" id="qs-level-toast">Level Up!</div>
<div class="qs-rule-toast" id="qs-rule-toast">Neue Regel!</div>

</div>

<script>
(function() {
"use strict";

var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_quick-sort_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('qs-history-toggle', 'qs-history-panel', 'qs-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
roundInRule: 0,
totalCorrect: 0,
totalAnswered: 0,
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false,
correctSide: null,
currentRule: null,
currentStimulus: null,
ruleIndex: 0
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('qs-instructions');
var elWizard = document.getElementById('qs-wizard');
var elWizardCard = document.getElementById('qs-wizard-card');
var elPlaying = document.getElementById('qs-playing');
var elPauseOverlay = document.getElementById('qs-pause-overlay');
var elCompleteOverlay = document.getElementById('qs-complete-overlay');
var elScore = document.getElementById('qs-score');
var elStreak = document.getElementById('qs-streak');
var elLevel = document.getElementById('qs-level');
var elLevelText = document.getElementById('qs-level-text');
var elRuleBadge = document.getElementById('qs-rule-badge');
var elProgressFill = document.getElementById('qs-progress-fill');
var elTimerFill = document.getElementById('qs-timer-fill');
var elRuleIndicator = document.getElementById('qs-rule-indicator');
var elStimulus = document.getElementById('qs-stimulus');
var elFeedbackFlash = document.getElementById('qs-feedback-flash');
var elFeedbackIcon = document.getElementById('qs-feedback-icon');
var elLabelLeft = document.getElementById('qs-label-left');
var elLabelRight = document.getElementById('qs-label-right');
var elBtnLeft = document.getElementById('qs-btn-left');
var elBtnRight = document.getElementById('qs-btn-right');
var elFinalScore = document.getElementById('qs-final-score');
var elNewBest = document.getElementById('qs-new-best');
var elFinalLevel = document.getElementById('qs-final-level');
var elFinalAccuracy = document.getElementById('qs-final-accuracy');
var elFinalStreak = document.getElementById('qs-final-streak');
var elFinalBest = document.getElementById('qs-final-best');
var elBestDisplay = document.getElementById('qs-best-display');
var elBestScore = document.getElementById('qs-best-score');
var elLevelToast = document.getElementById('qs-level-toast');
var elRuleToast = document.getElementById('qs-rule-toast');
var btnStart = document.getElementById('qs-start-btn');
var btnResume = document.getElementById('qs-resume-btn');
var btnPlayAgain = document.getElementById('qs-play-again-btn');

/* ── Level parameters ── */
function getDisplayTime(lvl) {
return Math.max(4000 - lvl * 130, 1500);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

function getRuleChangeInterval(lvl) {
if (lvl <= 6) return 999;
if (lvl <= 9) return 4;
if (lvl <= 12) return 3;
if (lvl <= 16) return 3;
return 2;
}

/* ── Helpers ── */
function randInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function pick(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}

function shuffle(arr) {
for (var i = arr.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
return arr;
}

/* ── Rule definitions ── */
var SHAPES = ['Circulo', 'Quadrado', 'Triangulo'];
var FRUITS = ['Maca', 'Banana', 'Cereja'];
var NOT_FRUITS = ['Carro', 'Livro', 'Mesa'];
var ALL_WORDS = FRUITS.concat(NOT_FRUITS);

function ruleEvenOdd() {
return {
name: 'Par / Impar',
leftLabel: 'Par',
rightLabel: 'Impar',
generate: function() {
var n = randInt(1, 50);
return {
display: String(n),
correctSide: (n % 2 === 0) ? 'left' : 'right'
};
}
};
}

function ruleBigSmall() {
return {
name: 'Grande / Pequeno',
leftLabel: 'Grande (\u226550)',
rightLabel: 'Pequeno (<50)',
generate: function() {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n >= 50) ? 'left' : 'right'
};
}
};
}

function ruleShapeOrNot() {
return {
name: 'Forma / Nao Forma',
leftLabel: 'Forma',
rightLabel: 'Nao Forma',
generate: function() {
var isShape = Math.random() < 0.5;
var item;
if (isShape) {
item = pick(SHAPES);
} else {
item = String(randInt(1, 100));
}
return {
display: item,
correctSide: isShape ? 'left' : 'right'
};
}
};
}

function ruleFruitOrNot() {
return {
name: 'Fruta / Nao Fruta',
leftLabel: 'Fruta',
rightLabel: 'Nao Fruta',
generate: function() {
var item = pick(ALL_WORDS);
var isFruit = FRUITS.indexOf(item) !== -1;
return {
display: item,
correctSide: isFruit ? 'left' : 'right'
};
}
};
}

function ruleCompoundEvenBig() {
return {
name: 'Par E Grande / Outros',
leftLabel: 'Par+Grande',
rightLabel: 'Outros',
generate: function() {
var n = randInt(1, 100);
var isEvenAndBig = (n % 2 === 0) && (n >= 50);
return {
display: String(n),
correctSide: isEvenAndBig ? 'left' : 'right'
};
}
};
}

function ruleCompoundOddSmall() {
return {
name: 'Impar E Pequeno / Outros',
leftLabel: 'Impar+Pequeno',
rightLabel: 'Outros',
generate: function() {
var n = randInt(1, 100);
var isOddAndSmall = (n % 2 !== 0) && (n < 50);
return {
display: String(n),
correctSide: isOddAndSmall ? 'left' : 'right'
};
}
};
}

function ruleCompoundFruitBig() {
return {
name: 'Fruta OU Grande / Outros',
leftLabel: 'Fruta/Grande',
rightLabel: 'Outros',
generate: function() {
var useWord = Math.random() < 0.4;
if (useWord) {
var item = pick(ALL_WORDS);
var isFruit = FRUITS.indexOf(item) !== -1;
return {
display: item,
correctSide: isFruit ? 'left' : 'right'
};
} else {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n >= 50) ? 'left' : 'right'
};
}
}
};
}

function ruleCompoundShapeEven() {
return {
name: 'Forma OU Par / Outros',
leftLabel: 'Forma/Par',
rightLabel: 'Outros',
generate: function() {
var useShape = Math.random() < 0.35;
if (useShape) {
var isShape = Math.random() < 0.5;
var item = isShape ? pick(SHAPES) : String(randInt(1, 50) * 2 - 1);
return {
display: item,
correctSide: isShape ? 'left' : 'right'
};
} else {
var n = randInt(1, 100);
return {
display: String(n),
correctSide: (n % 2 === 0) ? 'left' : 'right'
};
}
}
};
}

/* ── Get available rules for level ── */
function getRulesForLevel(lvl) {
if (lvl <= 3) {
return [ruleEvenOdd];
} else if (lvl <= 6) {
return [ruleBigSmall];
} else if (lvl <= 9) {
return [ruleEvenOdd, ruleBigSmall];
} else if (lvl <= 12) {
return [ruleShapeOrNot, ruleEvenOdd];
} else if (lvl <= 16) {
return [ruleFruitOrNot, ruleEvenOdd, ruleBigSmall];
} else {
return [ruleCompoundEvenBig, ruleCompoundOddSmall, ruleCompoundFruitBig, ruleCompoundShapeEven];
}
}

function pickNewRule(lvl, prevRuleName) {
var factories = getRulesForLevel(lvl);
if (factories.length === 1) {
return factories[0]();
}
var attempts = 0;
var rule;
do {
rule = pick(factories)();
attempts++;
} while (rule.name === prevRuleName && attempts < 10);
return rule;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
var rulesForLevel = getRulesForLevel(state.level);
if (rulesForLevel.length > 1) {
elRuleBadge.style.display = '';
elRuleBadge.textContent = 'Regras mudam';
} else {
elRuleBadge.style.display = 'none';
}
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('qs-playing', state.score, challenge.score);
}

/* ── Update rule display ── */
function updateRuleDisplay() {
if (!state.currentRule) return;
elRuleIndicator.textContent = 'Classifique: ' + state.currentRule.name;
elLabelLeft.textContent = state.currentRule.leftLabel;
elLabelRight.textContent = state.currentRule.rightLabel;
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('qs-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('qs-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'qs-feedback-flash';
elFeedbackIcon.className = 'qs-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('qs-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('qs-show-check');
} else {
elFeedbackFlash.classList.add('qs-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('qs-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'qs-feedback-flash';
elFeedbackIcon.className = 'qs-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('qs-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('qs-toast-show');
}, 1500);
}

/* ── Show rule-change toast ── */
function showRuleToast(ruleName) {
elRuleToast.textContent = 'Nova regra: ' + ruleName;
elRuleToast.classList.add('qs-toast-show');
setTimeout(function() {
elRuleToast.classList.remove('qs-toast-show');
}, 1800);
}

/* ── Flash sort button ── */
function flashSortBtn(side, correct) {
var btn = side === 'left' ? elBtnLeft : elBtnRight;
btn.classList.add(correct ? 'qs-correct-flash' : 'qs-wrong-flash');
setTimeout(function() {
btn.classList.remove('qs-correct-flash', 'qs-wrong-flash');
}, 400);
}

function sortSideLabel(side) {
if (!state.currentRule) return side || 'No answer';
if (side === 'left') return state.currentRule.leftLabel;
if (side === 'right') return state.currentRule.rightLabel;
return 'No answer';
}

function recordSortHistory(chosenSide, correct) {
var html = '<strong>' + runHistory.escape(state.currentRule ? state.currentRule.name : 'Sort rule') + '</strong>';
html += '<div class="gk-runtime-history-sub">Item: ' + runHistory.escape(state.currentStimulus) + '</div>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(sortSideLabel(chosenSide)) + ' | Correct: ' + runHistory.escape(sortSideLabel(state.correctSide)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(chosenSide) {
if (state.answered || state.gameOver) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var correct = (chosenSide === state.correctSide);

state.totalAnswered++;
recordSortHistory(chosenSide, correct);
flashSortBtn(chosenSide, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundInRule = 0;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;
state.totalAnswered++;
state.streak = 0;
recordSortHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.roundInRule = 0;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.roundInRule++;
state.answered = false;

/* Check if rule should change mid-level */
var ruleInterval = getRuleChangeInterval(state.level);
if (state.roundInRule > ruleInterval && getRulesForLevel(state.level).length > 1) {
state.roundInRule = 1;
var prevName = state.currentRule ? state.currentRule.name : null;
state.currentRule = pickNewRule(state.level, prevName);
updateRuleDisplay();
showRuleToast(state.currentRule.name);
}

/* Generate stimulus */
var item = state.currentRule.generate();
state.correctSide = item.correctSide;
state.currentStimulus = item.display;

elStimulus.textContent = item.display;
elStimulus.style.animation = 'none';
void elStimulus.offsetWidth;
elStimulus.style.animation = '';

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'qs-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'qs-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'qs-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.qs-trophy');
var title = document.querySelector('#qs-complete-overlay .qs-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'FANTASTICO!';
elNewBest.className = 'qs-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F FANTASTICO! Novo Recorde!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Bom trabalho!';
elNewBest.className = 'qs-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('qs-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var QS_WIZARD_STEPS = [
{icon: '\uD83D\uDCC2', title: 'Classifique elementos rapidamente', desc: 'Um elemento aparece na tela. Toque na categoria correta (esquerda ou direita) para classifica-lo!'},
{icon: '\uD83D\uDD00', title: 'As regras mudam!', desc: 'A cada poucas rodadas a regra de classificacao muda. Fique atento e adapte-se rapidamente!'},
{icon: '\u26A1', title: 'Rapido', desc: 'Responda antes que o tempo acabe.', final: true}
];
var qsWizardStep = 0;

function renderWizardStep() {
var s = QS_WIZARD_STEPS[qsWizardStep];
var dotsHtml = '';
for (var i = 0; i < QS_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="qs-wizard-dot' + (i === qsWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Iniciar' : 'Continuar';
elWizardCard.innerHTML =
'<div class="qs-wizard-icon">' + s.icon + '</div>' +
'<div class="qs-wizard-title">' + s.title + '</div>' +
'<div class="qs-wizard-desc">' + s.desc + '</div>' +
'<div class="qs-wizard-dots">' + dotsHtml + '</div>' +
'<button class="qs-wizard-btn" id="qs-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'qs-wizard-enter 0.3s ease-out';
document.getElementById('qs-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (qsWizardStep < QS_WIZARD_STEPS.length - 1) {
qsWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
qsWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.roundInRule = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
state.correctSide = null;
state.currentRule = null;
state.currentStimulus = null;
state.ruleIndex = 0;
runHistory.clear();
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
state.currentRule = pickNewRule(state.level, null);
state.roundInRule = 0;
updateRuleDisplay();
showScreen('playing');
GK.renderChallengeBar('qs-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('qs-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

elBtnLeft.addEventListener('click', function() {
processAnswer('left');
});

elBtnRight.addEventListener('click', function() {
processAnswer('right');
});

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('qs-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('qs-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('qs-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('qs-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Quick Sort', '/pt/games/quick-sort/', 'qs-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key === '1') {
e.preventDefault();
processAnswer('left');
} else if (e.key === '2') {
e.preventDefault();
processAnswer('right');
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('qs-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Escaneamento Corporal e Alívio de Tensão
URL: https://guruka.com/pt/meditate/body-scan-and-tension-release/
Description: Observe. Solte. Volte para o seu corpo.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/pt/meditate/body-scan-and-tension-release/');
</script>

### Sequence Recall - Jogo de Treinamento Cerebral
URL: https://guruka.com/pt/games/sequence-recall/
Description: Repita sequencias de cores.

<style>
#sequence-recall-game {
max-width: 600px;
margin: 0 auto;
padding: 1.5rem 1rem 3rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary, #1a2332);
-webkit-tap-highlight-color: transparent;
}

#sequence-recall-game * {
box-sizing: border-box;
}

#sequence-recall-game .sr-card {
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

[data-theme="dark"] #sequence-recall-game .sr-card {
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

#sequence-recall-game .sr-title {
font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 1.75rem;
font-weight: 700;
text-align: center;
margin: 0 0 0.25rem;
letter-spacing: -0.025em;
}

#sequence-recall-game .sr-subtitle {
text-align: center;
color: var(--color-text-secondary, #4b5b6d);
font-size: 0.95rem;
margin: 0 0 1.5rem;
}

#sequence-recall-game .sr-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#sequence-recall-game .sr-icon {
display: flex;
justify-content: center;
margin-bottom: 0;
font-size: 2rem;
}

#sequence-recall-game .sr-instructions-list {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
}

#sequence-recall-game .sr-instructions-list li {
padding: 0.5rem 0;
padding-left: 1.75rem;
position: relative;
font-size: 0.95rem;
color: var(--color-text-primary, #1a2332);
line-height: 1.5;
}

#sequence-recall-game .sr-instructions-list li::before {
content: attr(data-num);
position: absolute;
left: 0;
top: 0.5rem;
width: 1.25rem;
height: 1.25rem;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 50%;
font-size: 0.7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}

#sequence-recall-game .sr-best-score {
text-align: center;
padding: 0.75rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
margin-bottom: 1.25rem;
font-size: 0.9rem;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-best-score strong {
color: var(--color-text-primary, #1a2332);
font-weight: 700;
}

#sequence-recall-game .sr-btn-primary {
display: block;
width: 100%;
padding: 0.875rem 1.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.5rem;
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
text-align: center;
text-decoration: none;
}

#sequence-recall-game .sr-btn-primary:hover {
opacity: 0.9;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#sequence-recall-game .sr-btn-primary:active {
transform: translateY(0);
}

#sequence-recall-game .sr-btn-secondary {
display: inline-block;
margin-top: 0.75rem;
padding: 0.5rem 1rem;
background: transparent;
color: var(--color-primary, #0f9072);
border: 1px solid var(--color-primary, #0f9072);
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
text-align: center;
}

#sequence-recall-game .sr-btn-secondary:hover {
background: color-mix(in srgb, var(--color-primary, #0f9072) 10%, transparent);
}

/* Wizard overlay */
#sequence-recall-game .sr-wizard-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#sequence-recall-game .sr-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sr-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-card {
background: var(--color-dark-bg-primary, #1e293b);
color: var(--color-dark-text-primary, #e2e8f0);
}
@keyframes sr-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
#sequence-recall-game .sr-wizard-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
#sequence-recall-game .sr-wizard-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
#sequence-recall-game .sr-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary, #4b5b6d);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-desc {
color: var(--color-dark-text-secondary, #94a3b8);
}
#sequence-recall-game .sr-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
#sequence-recall-game .sr-wizard-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
#sequence-recall-game .sr-wizard-dot.active {
background: var(--color-primary, #0f9072);
transform: scale(1.3);
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] #sequence-recall-game .sr-wizard-dot.active {
background: var(--color-primary, #0f9072);
}
#sequence-recall-game .sr-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary, #0f9072);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
#sequence-recall-game .sr-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#sequence-recall-game .sr-wizard-card { padding: 1.5rem 1rem; }
#sequence-recall-game .sr-wizard-icon { font-size: 2rem; }
#sequence-recall-game .sr-wizard-title { font-size: 1.1rem; }
#sequence-recall-game .sr-wizard-desc { font-size: 0.85rem; }
#sequence-recall-game .sr-icon { font-size: 1.5rem; margin-bottom: 0; }
#sequence-recall-game .sr-title { font-size: 1.3rem; }
#sequence-recall-game .sr-subtitle { font-size: 0.85rem; margin-bottom: 1rem; }
#sequence-recall-game .sr-instructions-list li { font-size: 0.85rem; padding: 0.3rem 0; }
}

/* Header bar */
#sequence-recall-game .sr-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 0.85rem;
font-weight: 600;
}

#sequence-recall-game .sr-header-item {
text-align: center;
line-height: 1.3;
}

#sequence-recall-game .sr-header-label {
display: block;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary, #4b5b6d);
font-weight: 500;
}

#sequence-recall-game .sr-header-value {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text-primary, #1a2332);
}

#sequence-recall-game .sr-header-value.sr-streak {
color: #f59e0b;
}

/* Phase indicator */
#sequence-recall-game .sr-phase-label {
text-align: center;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-primary, #0f9072);
margin-bottom: 0.75rem;
}

/* Progress bar */
#sequence-recall-game .sr-progress {
margin-top: 1rem;
}

#sequence-recall-game .sr-progress-label {
text-align: center;
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.35rem;
}

#sequence-recall-game .sr-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 3px;
overflow: hidden;
}

#sequence-recall-game .sr-progress-fill {
height: 100%;
background: var(--color-primary, #0f9072);
border-radius: 3px;
transition: width 0.3s ease;
}

/* Color display area */
#sequence-recall-game .sr-color-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 220px;
padding: 1rem;
}

#sequence-recall-game .sr-color-box {
width: 160px;
height: 160px;
border-radius: 1rem;
animation: sr-color-appear 0.3s ease-out;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

@keyframes sr-color-appear {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .sr-color-counter {
margin-top: 1rem;
font-size: 1rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}

/* Recall area */
#sequence-recall-game .sr-recall-area {
padding: 0.5rem 0;
}

#sequence-recall-game .sr-selected-sequence {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 44px;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
flex-wrap: wrap;
}

#sequence-recall-game .sr-selected-dot {
width: 28px;
height: 28px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
animation: sr-dot-appear 0.2s ease-out;
flex-shrink: 0;
}

@keyframes sr-dot-appear {
0% { transform: scale(0); }
100% { transform: scale(1); }
}

#sequence-recall-game .sr-selected-placeholder {
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-color-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
margin-bottom: 0.75rem;
}

#sequence-recall-game .sr-color-btn {
aspect-ratio: 1;
border: 3px solid transparent;
border-radius: 0.75rem;
cursor: pointer;
transition: all 0.15s ease;
min-height: 70px;
position: relative;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

#sequence-recall-game .sr-color-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#sequence-recall-game .sr-color-btn:active {
transform: scale(0.95);
}

#sequence-recall-game .sr-color-btn .sr-btn-label {
position: absolute;
bottom: 6px;
left: 0;
right: 0;
text-align: center;
font-size: 0.65rem;
font-weight: 600;
color: rgba(255,255,255,0.9);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#sequence-recall-game .sr-undo-row {
display: flex;
gap: 0.5rem;
}

#sequence-recall-game .sr-undo-btn {
flex: 1;
padding: 0.6rem;
border: 1px solid var(--color-border, #dfe4ea);
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
border-radius: 0.5rem;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-undo-btn:hover {
background: var(--color-bg-secondary, #f0f4f8);
}

#sequence-recall-game .sr-submit-btn {
flex: 2;
padding: 0.6rem;
border: none;
background: var(--color-primary, #0f9072);
color: #fff;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-submit-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}

#sequence-recall-game .sr-submit-btn:not(:disabled):hover {
opacity: 0.9;
}

/* Distraction (math) */
#sequence-recall-game .sr-math-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
padding: 1rem;
}

#sequence-recall-game .sr-math-problem {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
font-family: "Space Grotesk", system-ui, sans-serif;
color: var(--color-text-primary, #1a2332);
}

#sequence-recall-game .sr-math-input-row {
display: flex;
gap: 0.5rem;
align-items: center;
}

#sequence-recall-game .sr-math-input {
width: 100px;
padding: 0.6rem 0.75rem;
border: 2px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
font-size: 1.25rem;
text-align: center;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
outline: none;
}

#sequence-recall-game .sr-math-input:focus {
border-color: var(--color-primary, #0f9072);
}

#sequence-recall-game .sr-math-submit {
padding: 0.6rem 1.25rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.15s;
}

#sequence-recall-game .sr-math-submit:hover {
opacity: 0.9;
}

#sequence-recall-game .sr-math-hint {
margin-top: 0.75rem;
font-size: 0.8rem;
color: var(--color-text-secondary, #4b5b6d);
}

/* Positions grid */
#sequence-recall-game .sr-position-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 260px;
padding: 1rem;
}

#sequence-recall-game .sr-position-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
width: 210px;
}

#sequence-recall-game .sr-position-cell {
width: 64px;
height: 64px;
background: var(--color-bg-secondary, #f0f4f8);
border: 2px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
color: transparent;
}

#sequence-recall-game .sr-position-cell:hover {
border-color: var(--color-primary, #0f9072);
}

#sequence-recall-game .sr-position-cell.sr-pos-active {
background: var(--color-primary, #0f9072);
border-color: var(--color-primary, #0f9072);
color: #fff;
}

#sequence-recall-game .sr-position-cell.sr-pos-highlight {
background: var(--color-primary, #0f9072);
border-color: var(--color-primary, #0f9072);
animation: sr-pos-flash 0.4s ease-out;
}

@keyframes sr-pos-flash {
0% { transform: scale(0.8); opacity: 0.5; }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .sr-position-counter {
margin-top: 0.75rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}

/* Feedback overlay */
#sequence-recall-game .sr-feedback {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
animation: sr-feedback-appear 0.3s ease-out;
}

#sequence-recall-game .sr-feedback-correct {
font-size: 1.5rem;
font-weight: 700;
color: #22c55e;
}

#sequence-recall-game .sr-feedback-wrong {
font-size: 1.5rem;
font-weight: 700;
color: #ef4444;
}

#sequence-recall-game .sr-feedback-points {
font-size: 0.9rem;
font-weight: 500;
color: var(--color-text-secondary, #4b5b6d);
margin-top: 0.25rem;
}

@keyframes sr-feedback-appear {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

/* Game complete */
#sequence-recall-game .sr-complete {
position: relative;
text-align: center;
}

#sequence-recall-game .sr-complete-icon {
font-size: 3rem;
margin-bottom: 0.5rem;
}

#sequence-recall-game .sr-complete-title {
font-family: "Space Grotesk", system-ui, sans-serif;
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 1.25rem;
}

#sequence-recall-game .sr-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
margin-bottom: 1.25rem;
}

#sequence-recall-game .sr-stat-box {
padding: 0.75rem 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
border-radius: 0.5rem;
text-align: center;
}

#sequence-recall-game .sr-stat-value {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-text-primary, #1a2332);
display: block;
}

#sequence-recall-game .sr-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary, #4b5b6d);
}

#sequence-recall-game .sr-new-best {
display: inline-block;
padding: 0.35rem 0.75rem;
background: #f59e0b;
color: #1a2332;
border-radius: 1rem;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 1rem;
animation: sr-badge-pulse 1s ease-in-out infinite alternate;
}

@keyframes sr-badge-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

#sequence-recall-game .sr-complete-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
margin-top: 0.5rem;
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

/* Hide all screens by default */
#sequence-recall-game .sr-screen {
display: none;
}

#sequence-recall-game .sr-screen.sr-active {
display: block;
}

/* Responsive */
@media (max-width: 400px) {
#sequence-recall-game .sr-color-btn {
min-height: 60px;
}
#sequence-recall-game .sr-color-box {
width: 130px;
height: 130px;
}
#sequence-recall-game .sr-position-grid {
width: 180px;
}
#sequence-recall-game .sr-position-cell {
width: 54px;
height: 54px;
}
}
@media (max-width: 640px) {
#sequence-recall-game .sr-color-grid {
gap: 0.5rem;
}
#sequence-recall-game .sr-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 360px) {
#sequence-recall-game .sr-color-btn {
min-height: 50px;
}
#sequence-recall-game .sr-color-box {
width: 110px;
height: 110px;
}
#sequence-recall-game .sr-position-grid {
width: 160px;
}
#sequence-recall-game .sr-position-cell {
width: 48px;
height: 48px;
}
#sequence-recall-game .sr-stats-grid {
grid-template-columns: 1fr 1fr;
}
#sequence-recall-game .sr-selected-dot {
width: 22px;
height: 22px;
}
}
@keyframes sr-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.sr-confetti-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.sr-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: sr-confetti-fall 2.5s ease-in forwards;
}
.sr-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: sr-glow-fade 1s ease-out forwards;
}
@keyframes sr-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.sr-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 1rem;
animation: sr-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes sr-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#sequence-recall-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#sequence-recall-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #sequence-recall-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="sequence-recall-game">

<div id="sr-instructions" class="sr-screen sr-active">
<div class="sr-card">
<div class="sr-title-row"><span class="sr-icon">&#x1F9E0;</span><h1 class="sr-title">Sequence Recall</h1></div>
<p class="sr-subtitle">Treine sua memoria de trabalho</p>
<ul class="sr-instructions-list">
<li data-num="1">Observe a sequencia de cores mostrada uma a uma</li>
<li data-num="2">Memorize a ordem cuidadosamente</li>
<li data-num="3">Lembre as cores na mesma ordem exata</li>
<li data-num="4">Passe por 20 niveis com dificuldade crescente</li>
</ul>
<div class="sr-best-score" id="sr-best-display">
Recorde: <strong id="sr-best-value">0</strong> Pontos
</div>
<button class="sr-btn-primary" id="sr-start-btn">Iniciar</button>
<div id="sr-challenge-banner-wrap"></div>
</div>
</div>

<div id="sr-wizard" class="sr-screen">
<div class="sr-wizard-overlay">
<div class="sr-wizard-card" id="sr-wizard-card"></div>
</div>
</div>

<div id="sr-playing" class="sr-screen">
<div class="sr-header">
<div class="sr-header-item">
<span class="sr-header-label">Pontos</span>
<span class="sr-header-value" id="sr-score">0</span>
</div>
<div class="sr-header-item">
<span class="sr-header-label">Nivel</span>
<span class="sr-header-value" id="sr-level">1</span>
</div>
<div class="sr-header-item">
<span class="sr-header-label">Sequencia</span>
<span class="sr-header-value sr-streak" id="sr-streak">0</span>
</div>
</div>
<div class="sr-phase-label" id="sr-phase-label">Memorize</div>
<div id="sr-play-area"></div>
<div class="sr-progress">
<div class="sr-progress-label" id="sr-progress-label">Runde 1 von 3</div>
<div class="sr-progress-bar">
<div class="sr-progress-fill" id="sr-progress-fill" style="width:0%"></div>
</div>
</div>
<button class="gk-finish-btn" id="sr-finish-btn">Encerrar Jogo</button>
</div>

<div id="sr-complete" class="sr-screen">
<div class="sr-card sr-complete">
<button class="gk-complete-close" id="sr-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="sr-complete-icon">&#x1F3C6;</div>
<h2 class="sr-complete-title">Jogo Concluido!</h2>
<div id="sr-new-best-badge" class="sr-new-best" style="display:none;">Novo Recorde!</div>
<div class="gk-challenge-result" id="sr-challenge-result" style="display:none;"></div>
<div class="sr-stats-grid">
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-score">0</span>
<span class="sr-stat-label">Pontos</span>
</div>
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-level">1</span>
<span class="sr-stat-label">Nivel</span>
</div>
<div class="sr-stat-box">
<span class="sr-stat-value" id="sr-final-accuracy">0%</span>
<span class="sr-stat-label">Precisao</span>
</div>
</div>
<div class="sr-complete-links">
<button class="sr-btn-primary" id="sr-play-again-btn">Repetir</button>
<button class="gk-runtime-history-toggle" id="sr-history-toggle" type="button">Show History</button>
<a href="/pt/games/" class="sr-btn-secondary">Todos os Jogos</a>
</div>
<div class="gk-runtime-history-panel" id="sr-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="sr-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="sr-share-btn">&#128279; Compartilhar resultado</button>
<div class="gk-share-copied" id="sr-share-copied" style="display:none;">Copiado!</div>
</div>
</div>
</div>

</div>

<script>
(function() {
var STORAGE_BEST = 'guruka_sequence-recall_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('sr-history-toggle', 'sr-history-panel', 'sr-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var COLORS = [
{ name: 'Vermelho', hsl: 'hsl(0,84%,60%)' },
{ name: 'Azul', hsl: 'hsl(217,91%,60%)' },
{ name: 'Grün', hsl: 'hsl(142,76%,36%)' },
{ name: 'Amarelo', hsl: 'hsl(48,96%,53%)' },
{ name: 'Roxo', hsl: 'hsl(280,68%,55%)' },
{ name: 'Laranja', hsl: 'hsl(25,95%,53%)' }
];

var MAX_LEVEL = 20;
var ROUNDS_PER_LEVEL = 3;

var state = {
screen: 'instructions',
level: 1,
round: 0,
score: 0,
streak: 0,
totalCorrect: 0,
totalAttempts: 0,
colorSequence: [],
positionSequence: [],
selectedColors: [],
selectedPositions: [],
currentShowIndex: 0,
phaseStartTime: 0,
showTimer: null,
feedbackTimer: null
};

function getSequenceLength(level) {
return Math.min(3 + Math.floor(level / 3), 8);
}

function hasDistraction(level) {
return level >= 6;
}

function isDualTrack(level) {
return level >= 11;
}

function getDisplayTime(level) {
return Math.max(1200 - (level - 1) * 40, 600);
}

function getBestScore() {
try {
var val = localStorage.getItem(STORAGE_BEST);
return val ? parseInt(val, 10) : 0;
} catch(e) { return 0; }
}

function setBestScore(s) {
try { localStorage.setItem(STORAGE_BEST, String(s)); } catch(e) {}
}

function getHistory() {
return [];
}

function addHistory(entry) {
void entry;
}

function $(id) { return document.getElementById(id); }

function showScreen(name) {
var screens = document.querySelectorAll('#sequence-recall-game .sr-screen');
for (var i = 0; i < screens.length; i++) {
screens[i].classList.remove('sr-active');
}
var el = $('sr-' + name);
if (el) el.classList.add('sr-active');
state.screen = name;
}

function generateColorSequence(len) {
var seq = [];
for (var i = 0; i < len; i++) {
seq.push(Math.floor(Math.random() * COLORS.length));
}
return seq;
}

function generatePositionSequence(len) {
var positions = [];
var used = {};
var count = Math.min(len, 9);
while (positions.length < count) {
var p = Math.floor(Math.random() * 9);
if (!used[p]) {
used[p] = true;
positions.push(p);
}
}
return positions;
}

function generateMathProblem() {
var ops = ['+', '-', '*'];
var op = ops[Math.floor(Math.random() * ops.length)];
var a, b, answer;
if (op === '+') {
a = Math.floor(Math.random() * 50) + 1;
b = Math.floor(Math.random() * 50) + 1;
answer = a + b;
} else if (op === '-') {
a = Math.floor(Math.random() * 50) + 10;
b = Math.floor(Math.random() * a);
answer = a - b;
} else {
a = Math.floor(Math.random() * 12) + 2;
b = Math.floor(Math.random() * 12) + 2;
answer = a * b;
}
var display = op === '*' ? (a + ' \u00D7 ' + b) : (a + ' ' + op + ' ' + b);
return { display: display, answer: answer };
}

function updateHeader() {
$('sr-score').textContent = state.score;
$('sr-level').textContent = state.level;
$('sr-streak').textContent = state.streak;
if (challenge.active) GK.updateChallengeBar('sr-playing', state.score, challenge.score);
}

function updateProgress() {
$('sr-progress-label').textContent = 'Rodada ' + (state.round + 1) + ' de ' + ROUNDS_PER_LEVEL;
var pct = (state.round / ROUNDS_PER_LEVEL) * 100;
$('sr-progress-fill').style.width = pct + '%';
}

var SR_WIZARD_STEPS = [
{icon: '\uD83C\uDFA8', title: 'Observe a sequencia de cores', desc: 'As cores aparecem uma a uma. Memorize a ordem!'},
{icon: '\uD83E\uDDE0', title: 'Lembre-as em ordem', desc: 'Toque nas cores na ordem exata em que voce as viu.'},
{icon: '\uD83D\uDE80', title: 'Pronto? Vamos la!', desc: 'As sequencias ficam mais longas. Mantenha o foco!', final: true}
];
var srWizardStep = 0;
var srWizardCallback = null;

function srRenderWizardStep() {
var s = SR_WIZARD_STEPS[srWizardStep];
var dotsHtml = '';
for (var i = 0; i < SR_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="sr-wizard-dot' + (i === srWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Comecar a Jogar' : 'Continuar';
var card = $('sr-wizard-card');
card.innerHTML =
'<div class="sr-wizard-icon">' + s.icon + '</div>' +
'<div class="sr-wizard-title">' + s.title + '</div>' +
'<div class="sr-wizard-desc">' + s.desc + '</div>' +
'<div class="sr-wizard-dots">' + dotsHtml + '</div>' +
'<button class="sr-wizard-btn" id="sr-wizard-next">' + btnLabel + '</button>';
card.style.animation = 'none';
void card.offsetWidth;
card.style.animation = 'sr-wizard-enter 0.3s ease-out';
$('sr-wizard-next').addEventListener('click', srAdvanceWizard);
}

function srAdvanceWizard() {
if (srWizardStep < SR_WIZARD_STEPS.length - 1) {
srWizardStep++;
srRenderWizardStep();
} else {
if (srWizardCallback) srWizardCallback();
}
}

function showWizard(callback) {
srWizardStep = 0;
srWizardCallback = callback;
showScreen('wizard');
srRenderWizardStep();
}

function startRound() {
var seqLen = getSequenceLength(state.level);
state.colorSequence = generateColorSequence(seqLen);
state.positionSequence = isDualTrack(state.level) ? generatePositionSequence(Math.min(seqLen, 9)) : [];
state.selectedColors = [];
state.selectedPositions = [];
state.currentShowIndex = 0;

updateHeader();
updateProgress();
showColorSequence();
}

function showColorSequence() {
$('sr-phase-label').textContent = 'Memorize as cores';
state.currentShowIndex = 0;
showNextColor();
}

function showNextColor() {
var area = $('sr-play-area');
if (state.currentShowIndex >= state.colorSequence.length) {
if (isDualTrack(state.level)) {
showPositionSequence();
} else if (hasDistraction(state.level)) {
showDistraction();
} else {
startRecallColors();
}
return;
}

var colorIdx = state.colorSequence[state.currentShowIndex];
var color = COLORS[colorIdx];
var total = state.colorSequence.length;
var current = state.currentShowIndex + 1;

area.innerHTML = '<div class="sr-color-stage">' +
'<div class="sr-color-box" style="background:' + color.hsl + '"></div>' +
'<div class="sr-color-counter">' + current + ' / ' + total + '</div>' +
'</div>';

state.currentShowIndex++;
var dt = getDisplayTime(state.level);
state.showTimer = setTimeout(function() {
showNextColor();
}, dt);
}

function showPositionSequence() {
$('sr-phase-label').textContent = 'Memorize as posicoes';
state.currentShowIndex = 0;
showNextPosition();
}

function showNextPosition() {
if (state.currentShowIndex >= state.positionSequence.length) {
if (hasDistraction(state.level)) {
showDistraction();
} else {
startRecallColors();
}
return;
}

var pos = state.positionSequence[state.currentShowIndex];
var total = state.positionSequence.length;
var current = state.currentShowIndex + 1;

var html = '<div class="sr-position-stage">';
html += '<div class="sr-position-grid">';
for (var i = 0; i < 9; i++) {
var cls = 'sr-position-cell';
if (i === pos) cls += ' sr-pos-highlight';
html += '<div class="' + cls + '"></div>';
}
html += '</div>';
html += '<div class="sr-position-counter">' + current + ' / ' + total + '</div>';
html += '</div>';

$('sr-play-area').innerHTML = html;

state.currentShowIndex++;
var dt = getDisplayTime(state.level);
state.showTimer = setTimeout(function() {
showNextPosition();
}, dt);
}

function showDistraction() {
$('sr-phase-label').textContent = 'Calculo rapido!';
var problem = generateMathProblem();

var html = '<div class="sr-math-area">';
html += '<div class="sr-math-problem">' + problem.display + ' = ?</div>';
html += '<div class="sr-math-input-row">';
html += '<input type="number" class="sr-math-input" id="sr-math-input" inputmode="numeric" autocomplete="off">';
html += '<button class="sr-math-submit" id="sr-math-btn">Los</button>';
html += '</div>';
html += '<div class="sr-math-hint">Löse zum Fortfahren</div>';
html += '</div>';

$('sr-play-area').innerHTML = html;

var input = $('sr-math-input');
var btn = $('sr-math-btn');

function submitMath() {
var val = parseInt(input.value, 10);
if (isNaN(val)) return;
startRecallColors();
}

btn.addEventListener('click', submitMath);
input.addEventListener('keydown', function(e) {
if (e.key === 'Enter') submitMath();
});

setTimeout(function() { input.focus(); }, 100);
}

function startRecallColors() {
$('sr-phase-label').textContent = 'Lembre a sequencia de cores';
state.selectedColors = [];
state.phaseStartTime = Date.now();
renderRecallColors();
}

function renderRecallColors() {
var needed = state.colorSequence.length;
var html = '<div class="sr-recall-area">';

html += '<div class="sr-selected-sequence" id="sr-selected-seq">';
if (state.selectedColors.length === 0) {
html += '<span class="sr-selected-placeholder">Tippe Farben in Reihenfolge (' + needed + ' nötig)</span>';
} else {
for (var i = 0; i < state.selectedColors.length; i++) {
var c = COLORS[state.selectedColors[i]];
html += '<div class="sr-selected-dot" style="background:' + c.hsl + '"></div>';
}
}
html += '</div>';

html += '<div class="sr-color-grid">';
for (var j = 0; j < COLORS.length; j++) {
html += '<button class="sr-color-btn" data-color="' + j + '" style="background:' + COLORS[j].hsl + '">';
html += '<span class="sr-btn-label">' + COLORS[j].name + '</span>';
html += '</button>';
}
html += '</div>';

html += '<div class="sr-undo-row">';
html += '<button class="sr-undo-btn" id="sr-undo-btn">Desfazer</button>';
html += '<button class="sr-submit-btn" id="sr-submit-colors-btn"' + (state.selectedColors.length < needed ? ' disabled' : '') + '>Confirmar</button>';
html += '</div>';

html += '</div>';

$('sr-play-area').innerHTML = html;

var buttons = document.querySelectorAll('#sequence-recall-game .sr-color-btn');
for (var k = 0; k < buttons.length; k++) {
buttons[k].addEventListener('click', function() {
var ci = parseInt(this.getAttribute('data-color'), 10);
if (state.selectedColors.length < needed) {
state.selectedColors.push(ci);
renderRecallColors();
if (state.selectedColors.length === needed) {
setTimeout(function() {
var sb = $('sr-submit-colors-btn');
if (sb) sb.focus();
}, 50);
}
}
});
}

$('sr-undo-btn').addEventListener('click', function() {
if (state.selectedColors.length > 0) {
state.selectedColors.pop();
renderRecallColors();
}
});

var submitBtn = $('sr-submit-colors-btn');
submitBtn.addEventListener('click', function() {
if (state.selectedColors.length === needed) {
submitColorRecall();
}
});
}

function submitColorRecall() {
var responseTime = Date.now() - state.phaseStartTime;
var correct = true;
for (var i = 0; i < state.colorSequence.length; i++) {
if (state.colorSequence[i] !== state.selectedColors[i]) {
correct = false;
break;
}
}

if (isDualTrack(state.level)) {
state._colorCorrect = correct;
state._colorResponseTime = responseTime;
startRecallPositions();
} else {
resolveRound(correct, responseTime);
}
}

function startRecallPositions() {
$('sr-phase-label').textContent = 'Lembre as posicoes na ordem';
state.selectedPositions = [];
state.phaseStartTime = Date.now();
renderRecallPositions();
}

function renderRecallPositions() {
var needed = state.positionSequence.length;
var html = '<div class="sr-position-stage">';

html += '<div class="sr-selected-sequence">';
if (state.selectedPositions.length === 0) {
html += '<span class="sr-selected-placeholder">Tippe Gitterpositionen in Reihenfolge (' + needed + ' nötig)</span>';
} else {
for (var i = 0; i < state.selectedPositions.length; i++) {
html += '<div class="sr-selected-dot" style="background:var(--color-primary, #0f9072)"></div>';
}
}
html += '</div>';

html += '<div class="sr-position-grid">';
for (var j = 0; j < 9; j++) {
var isSelected = false;
var order = -1;
for (var k = 0; k < state.selectedPositions.length; k++) {
if (state.selectedPositions[k] === j) {
isSelected = true;
order = k + 1;
break;
}
}
var cls = 'sr-position-cell';
if (isSelected) cls += ' sr-pos-active';
html += '<div class="' + cls + '" data-pos="' + j + '">' + (isSelected ? order : '') + '</div>';
}
html += '</div>';

html += '<div class="sr-undo-row" style="margin-top:0.75rem;max-width:210px;width:100%;">';
html += '<button class="sr-undo-btn" id="sr-undo-pos-btn">Desfazer</button>';
html += '<button class="sr-submit-btn" id="sr-submit-pos-btn"' + (state.selectedPositions.length < needed ? ' disabled' : '') + '>Confirmar</button>';
html += '</div>';

html += '</div>';

$('sr-play-area').innerHTML = html;

var cells = document.querySelectorAll('#sequence-recall-game .sr-position-cell');
for (var m = 0; m < cells.length; m++) {
cells[m].addEventListener('click', function() {
var p = parseInt(this.getAttribute('data-pos'), 10);
var alreadySelected = false;
for (var n = 0; n < state.selectedPositions.length; n++) {
if (state.selectedPositions[n] === p) {
alreadySelected = true;
break;
}
}
if (!alreadySelected && state.selectedPositions.length < needed) {
state.selectedPositions.push(p);
renderRecallPositions();
}
});
}

$('sr-undo-pos-btn').addEventListener('click', function() {
if (state.selectedPositions.length > 0) {
state.selectedPositions.pop();
renderRecallPositions();
}
});

$('sr-submit-pos-btn').addEventListener('click', function() {
if (state.selectedPositions.length === needed) {
submitPositionRecall();
}
});
}

function submitPositionRecall() {
var responseTime = Date.now() - state.phaseStartTime;
var posCorrect = true;
for (var i = 0; i < state.positionSequence.length; i++) {
if (state.positionSequence[i] !== state.selectedPositions[i]) {
posCorrect = false;
break;
}
}

var bothCorrect = state._colorCorrect && posCorrect;
var combinedTime = state._colorResponseTime + responseTime;
resolveRound(bothCorrect, combinedTime);
}

function formatColorHistory(seq) {
if (!seq || !seq.length) return 'none';
var out = [];
for (var i = 0; i < seq.length; i++) {
var color = COLORS[seq[i]];
out.push('<span class="gk-history-swatch" style="background:' + runHistory.escape(color.hsl) + '"></span>' + runHistory.escape(color.name));
}
return out.join(', ');
}

function formatPositionHistory(seq) {
if (!seq || !seq.length) return 'none';
var out = [];
for (var i = 0; i < seq.length; i++) out.push(String(seq[i] + 1));
return out.join(', ');
}

function recordSequenceHistory(correct) {
var html = '<strong>Sequence recall</strong>';
html += '<div class="gk-runtime-history-sub">Colors - Your: ' + formatColorHistory(state.selectedColors) + '</div>';
html += '<div class="gk-runtime-history-sub">Colors - Correct: ' + formatColorHistory(state.colorSequence) + '</div>';
if (isDualTrack(state.level)) {
html += '<div class="gk-runtime-history-sub">Positions - Your: ' + runHistory.escape(formatPositionHistory(state.selectedPositions)) + '</div>';
html += '<div class="gk-runtime-history-sub">Positions - Correct: ' + runHistory.escape(formatPositionHistory(state.positionSequence)) + '</div>';
}
runHistory.pushHtml(correct, html);
}

function resolveRound(correct, responseTime) {
state.totalAttempts++;
recordSequenceHistory(correct);
var points = 0;

if (correct) {
state.totalCorrect++;
state.streak++;
points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
} else {
state.streak = 0;
}

updateHeader();
showFeedback(correct, points);
}

function showFeedback(correct, points) {
$('sr-phase-label').textContent = '';
var html = '<div class="sr-feedback"><div>';
if (correct) {
html += '<div class="sr-feedback-correct">Richtig!</div>';
html += '<div class="sr-feedback-points">+' + points + ' Pontos</div>';
} else {
html += '<div class="sr-feedback-wrong">Falsch</div>';
html += '<div class="sr-feedback-points">Serie zurückgesetzt</div>';
}
html += '</div></div>';

$('sr-play-area').innerHTML = html;

state.feedbackTimer = setTimeout(function() {
advanceRound(correct);
}, 1200);
}

function advanceRound(wasCorrect) {
state.round++;

if (state.round >= ROUNDS_PER_LEVEL) {
if (wasCorrect) {
state.level++;
}
state.round = 0;

if (state.level > MAX_LEVEL) {
endGame();
return;
}
}

updateProgress();
startRound();
}

/* ── Celebration effects ── */
function srShowConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'sr-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'sr-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'sr-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function srAnimateScoreCountUp(el, target) {
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(target * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

function endGame() {
exitMobileGameMode();
var accuracy = state.totalAttempts > 0 ? Math.round((state.totalCorrect / state.totalAttempts) * 100) : 0;
var best = getBestScore();
var isNewBest = state.score > best;

if (isNewBest) {
setBestScore(state.score);
}

addHistory({
score: state.score,
level: state.level > MAX_LEVEL ? MAX_LEVEL : state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var iconEl = document.querySelector('#sr-complete .sr-complete-icon');
var titleEl = document.querySelector('#sr-complete .sr-complete-title');
var badge = $('sr-new-best-badge');

if (isNewBest) {
srShowConfetti();
iconEl.textContent = '\uD83C\uDF89';
titleEl.textContent = 'FANTASTICO!';
badge.className = 'sr-new-best-enhanced';
badge.innerHTML = '\uD83C\uDF1F FANTASTICO! Novo Recorde!';
badge.style.display = 'inline-block';
} else {
iconEl.textContent = '\uD83C\uDFC6';
titleEl.textContent = 'Bom trabalho!';
badge.className = 'sr-new-best';
badge.style.display = 'none';
}

GK.renderChallengeResult('sr-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

$('sr-final-level').textContent = state.level > MAX_LEVEL ? MAX_LEVEL : state.level;
$('sr-final-accuracy').textContent = accuracy + '%';

showScreen('complete');
srAnimateScoreCountUp($('sr-final-score'), state.score);
}

function resetGame() {
clearTimeout(state.showTimer);
clearTimeout(state.feedbackTimer);
state.level = 1;
state.round = 0;
state.score = 0;
state.streak = 0;
state.totalCorrect = 0;
state.totalAttempts = 0;
state.selectedColors = [];
state.selectedPositions = [];
state.colorSequence = [];
state.positionSequence = [];
runHistory.clear();
}

function initInstructions() {
var best = getBestScore();
$('sr-best-value').textContent = best;
GK.renderChallengeBanner('sr-challenge-banner-wrap', challenge);
showScreen('instructions');
}


$('sr-close-btn').addEventListener('click', function() {
$('sr-best-value').textContent = getBestScore();
showScreen('instructions');
});

$('sr-finish-btn').addEventListener('click', function() {
endGame();
});

$('sr-start-btn').addEventListener('click', function() {
resetGame();
showWizard(function() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sr-playing', challenge);
startRound();
});
});

$('sr-play-again-btn').addEventListener('click', function() {
resetGame();
showWizard(function() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sr-playing', challenge);
startRound();
});
});

$('sr-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

$('sr-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Sequence Recall', '/pt/games/sequence-recall/', 'sr-share-copied');
});

initInstructions();
})();
</script>

### Speed Match - Jogo de Treinamento Cerebral
URL: https://guruka.com/pt/games/speed-match/
Description: Compare simbolos rapidamente.

<style>
#speed-match-game {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--color-text-primary);
min-height: 80vh;
display: flex;
flex-direction: column;
user-select: none;
-webkit-user-select: none;
}

[data-theme="dark"] #speed-match-game {
color: var(--color-dark-text-primary);
}

/* ── Instructions Screen ── */
#sm-instructions {
text-align: center;
padding: 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.sm-title-row { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-bottom: 0.25rem; }
#sm-instructions .sm-icon {
font-size: 2.5rem;
margin-bottom: 0;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

#sm-instructions h2 {
font-size: 1.75rem;
margin: 0 0 0.25rem 0;
color: var(--color-primary);
}

#sm-instructions .sm-subtitle {
color: var(--color-text-secondary);
margin: 0 0 1.5rem 0;
font-size: 0.95rem;
}

[data-theme="dark"] #sm-instructions .sm-subtitle {
color: var(--color-dark-text-secondary);
}

#sm-instructions .sm-how-to {
text-align: left;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
width: 100%;
max-width: 420px;
border: 1px solid var(--color-border);
}

[data-theme="dark"] #sm-instructions .sm-how-to {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

#sm-instructions .sm-how-to h3 {
margin: 0 0 0.75rem 0;
font-size: 1rem;
color: var(--color-primary);
}

#sm-instructions .sm-how-to ol {
margin: 0;
padding-left: 1.25rem;
}

#sm-instructions .sm-how-to li {
margin-bottom: 0.5rem;
font-size: 0.9rem;
line-height: 1.4;
}

.sm-kbd-hints {
display: flex;
gap: 1.5rem;
justify-content: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}

.sm-kbd-hint {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-kbd-hint {
color: var(--color-dark-text-secondary);
}

.sm-kbd {
display: inline-block;
padding: 0.15rem 0.5rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.25rem;
font-family: monospace;
font-size: 0.8rem;
font-weight: 600;
}

[data-theme="dark"] .sm-kbd {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-personal-best {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 0.6rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-personal-best {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}

.sm-personal-best strong {
color: var(--color-primary);
}

/* ── Buttons ── */
.sm-btn-primary {
background: var(--color-primary);
color: #fff;
border: none;
padding: 0.8rem 2.5rem;
border-radius: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}

.sm-btn-primary:hover {
background: var(--color-primary-hover);
}

.sm-btn-primary:active {
transform: scale(0.97);
}

.sm-btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
text-decoration: none;
display: inline-block;
}

.sm-btn-secondary:hover {
background: var(--color-bg-secondary);
}

[data-theme="dark"] .sm-btn-secondary:hover {
background: var(--color-dark-bg-secondary);
}

/* ── Wizard Overlay ── */
#sm-wizard {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}
#sm-wizard-card {
background: var(--color-bg-primary, #fff);
border-radius: 1rem;
padding: 2rem 1.5rem;
max-width: 380px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sm-wizard-enter 0.3s ease-out;
}
[data-theme="dark"] #sm-wizard-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}
@keyframes sm-wizard-enter {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.sm-wizard-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.sm-wizard-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem;
}
.sm-wizard-desc {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
line-height: 1.5;
}
[data-theme="dark"] .sm-wizard-desc {
color: var(--color-dark-text-secondary);
}
.sm-wizard-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
}
.sm-wizard-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-border, #dfe4ea);
transition: all 0.3s;
}
.sm-wizard-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
[data-theme="dark"] .sm-wizard-dot {
background: var(--color-dark-border, #3a4553);
}
[data-theme="dark"] .sm-wizard-dot.active {
background: var(--color-primary);
}
.sm-wizard-btn {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 0.75rem;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background 0.2s;
min-height: 44px;
}
.sm-wizard-btn:hover {
background: var(--color-primary-hover, #0d7a62);
}
@media (max-width: 400px) {
#sm-wizard-card {
padding: 1.5rem 1rem;
}
.sm-wizard-icon {
font-size: 2rem;
}
.sm-wizard-title {
font-size: 1.1rem;
}
.sm-wizard-desc {
font-size: 0.85rem;
}
}

/* ── Playing Screen ── */
#sm-playing {
display: none;
flex: 1;
flex-direction: column;
}

.sm-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.75rem;
background: var(--color-bg-secondary);
border-radius: 0.75rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .sm-header {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-stat {
text-align: center;
}

.sm-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 0.15rem;
}

[data-theme="dark"] .sm-stat-label {
color: var(--color-dark-text-secondary);
}

.sm-stat-value {
font-size: 1.15rem;
font-weight: 700;
}

.sm-level-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}

.sm-level-text {
font-weight: 600;
}

.sm-nback-badge {
background: var(--color-primary);
color: #fff;
padding: 0.15rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
font-weight: 600;
}

.sm-progress-bar {
width: 100%;
height: 6px;
background: var(--color-bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid var(--color-border);
}

[data-theme="dark"] .sm-progress-bar {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}

.sm-progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.3s ease;
}

.sm-timer-bar {
width: 100%;
height: 4px;
background: var(--color-bg-secondary);
border-radius: 2px;
overflow: hidden;
margin-bottom: 1rem;
}

[data-theme="dark"] .sm-timer-bar {
background: var(--color-dark-bg-secondary);
}

.sm-timer-fill {
height: 100%;
background: var(--color-primary);
border-radius: 2px;
transition: width 0.05s linear;
}

.sm-timer-fill.sm-timer-warning {
background: #ef4444;
}

/* ── Symbol Display ── */
.sm-symbol-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
}

.sm-symbol {
font-size: 7rem;
line-height: 1;
transition: transform 0.15s ease;
animation: sm-symbol-enter 0.2s ease-out;
}

@keyframes sm-symbol-enter {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}

.sm-feedback-flash {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}

.sm-feedback-flash.sm-flash-correct {
background: rgba(34, 197, 94, 0.15);
opacity: 1;
}

.sm-feedback-flash.sm-flash-wrong {
background: rgba(239, 68, 68, 0.15);
opacity: 1;
}

.sm-feedback-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 3rem;
pointer-events: none;
z-index: 2;
}

.sm-feedback-icon.sm-show-check {
animation: sm-feedback-pop 0.4s ease-out forwards;
color: #22c55e;
}

.sm-feedback-icon.sm-show-x {
animation: sm-feedback-pop 0.4s ease-out forwards;
color: #ef4444;
}

@keyframes sm-feedback-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── Action Buttons ── */
.sm-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}

.sm-action-btn {
flex: 1;
padding: 1rem;
border: 2px solid var(--color-border);
border-radius: 0.75rem;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.1s, border-color 0.15s, background 0.15s;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
background: var(--color-bg-primary);
color: var(--color-text-primary);
}

[data-theme="dark"] .sm-action-btn {
background: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
color: var(--color-dark-text-primary);
}

.sm-action-btn:active {
transform: scale(0.95);
}

.sm-action-btn:disabled {
opacity: 0.45;
cursor: default;
transform: none;
}

.sm-action-btn .sm-btn-icon {
font-size: 1.5rem;
}

.sm-action-btn .sm-btn-kbd {
font-size: 0.65rem;
color: var(--color-text-secondary);
font-weight: 400;
}

[data-theme="dark"] .sm-action-btn .sm-btn-kbd {
color: var(--color-dark-text-secondary);
}

.sm-btn-different {
border-color: #ef4444;
}

.sm-btn-different:hover {
background: rgba(239, 68, 68, 0.08);
}

[data-theme="dark"] .sm-btn-different:hover {
background: rgba(239, 68, 68, 0.15);
}

.sm-btn-same {
border-color: #22c55e;
}

.sm-btn-same:hover {
background: rgba(34, 197, 94, 0.08);
}

[data-theme="dark"] .sm-btn-same:hover {
background: rgba(34, 197, 94, 0.15);
}

.sm-playing-kbd-hint {
text-align: center;
font-size: 0.75rem;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-playing-kbd-hint {
color: var(--color-dark-text-secondary);
}

/* ── Pause Overlay ── */
#sm-pause-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
flex-direction: column;
gap: 1.5rem;
}

#sm-pause-overlay .sm-pause-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ── Game Complete Modal ── */
#sm-complete-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1rem;
}

.sm-complete-card {
position: relative;
background: var(--color-bg-primary);
border-radius: 1rem;
padding: 2rem;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: sm-modal-enter 0.3s ease-out;
}

[data-theme="dark"] .sm-complete-card {
background: var(--color-dark-bg-primary);
color: var(--color-dark-text-primary);
}

@keyframes sm-modal-enter {
0% { transform: scale(0.8) translateY(20px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}


.gk-complete-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 999px;
background: var(--color-bg-primary, #fff);
color: var(--color-text-secondary, #4b5b6d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 1;
}

.gk-complete-close:hover {
border-color: var(--color-primary, #0f8f73);
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-complete-close {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
color: var(--color-dark-text-primary, #f8fafc);
}

.sm-complete-card h2 {
margin: 0 0 0.25rem 0;
font-size: 1.5rem;
}

.sm-complete-card .sm-trophy {
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

.sm-final-score {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
margin: 0.5rem 0;
}

.sm-new-best {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: sm-best-pulse 1s ease-in-out infinite alternate;
}

@keyframes sm-best-pulse {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}

.sm-complete-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1rem 0 1.5rem;
}

.sm-complete-stat {
background: var(--color-bg-secondary);
border-radius: 0.5rem;
padding: 0.6rem;
}

[data-theme="dark"] .sm-complete-stat {
background: var(--color-dark-bg-secondary);
}

.sm-complete-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
}

[data-theme="dark"] .sm-complete-stat-label {
color: var(--color-dark-text-secondary);
}

.sm-complete-stat-value {
font-size: 1.2rem;
font-weight: 700;
}

.sm-complete-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}

.sm-back-link {
color: var(--color-text-secondary);
font-size: 0.9rem;
text-decoration: none;
}

[data-theme="dark"] .sm-back-link {
color: var(--color-dark-text-secondary);
}

.sm-back-link:hover {
color: var(--color-primary);
text-decoration: underline;
}

/* ── Level Up Toast ── */
.sm-level-up-toast {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--color-primary);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 700;
font-size: 1rem;
z-index: 999;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
white-space: nowrap;
}

.sm-level-up-toast.sm-toast-show {
transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 480px) {
#speed-match-game {
padding: 0.5rem;
}
.sm-symbol {
font-size: 5rem;
}
.sm-action-btn {
padding: 0.75rem;
font-size: 1rem;
}
.sm-header {
padding: 0.5rem;
gap: 0.25rem;
}
.sm-stat-value {
font-size: 1rem;
}
#sm-instructions { padding: 0.75rem 0.5rem; }
#sm-instructions .sm-icon { font-size: 2rem; margin-bottom: 0; }
#sm-instructions h2 { font-size: 1.3rem; }
#sm-instructions .sm-subtitle { margin-bottom: 1rem; font-size: 0.85rem; }
#sm-instructions .sm-how-to { padding: 0.75rem 1rem; margin-bottom: 1rem; }
#sm-instructions .sm-how-to li { margin-bottom: 0.25rem; font-size: 0.82rem; }
.sm-personal-best { padding: 0.4rem 0.75rem; margin-bottom: 1rem; font-size: 0.82rem; }
}
@media (max-width: 640px) {
#speed-match-game {
padding: 0.75rem;
}
.sm-symbol {
font-size: 6rem;
}
.sm-action-btn {
padding: 0.875rem;
}
}
@media (max-width: 360px) {
.sm-symbol {
font-size: 4rem;
}
.sm-action-btn {
padding: 0.625rem;
font-size: 0.9rem;
}
.sm-complete-stats {
grid-template-columns: 1fr 1fr;
}
.sm-final-score {
font-size: 2rem;
}
.sm-header {
padding: 0.375rem;
}
.sm-stat-value {
font-size: 0.9rem;
}
}
@keyframes sm-confetti-fall {
0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.sm-confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1001;
overflow: hidden;
}
.sm-confetti-piece {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
animation: sm-confetti-fall 2.5s ease-in forwards;
}
.sm-glow-flash {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(245,158,11,0.3) 0%, transparent 70%);
z-index: 999;
pointer-events: none;
animation: sm-glow-fade 1s ease-out forwards;
}
@keyframes sm-glow-fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
.sm-new-best-enhanced {
display: inline-block;
background: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
color: #fff;
padding: 0.35rem 1rem;
border-radius: 1rem;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.75rem;
animation: sm-badge-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 0 20px rgba(245,158,11,0.4);
}
@keyframes sm-badge-bounce {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}

#speed-match-game .gk-finish-btn {
align-self: center;
margin: 0.35rem auto 0;
padding: 0.7rem 1.4rem;
border: 1px solid var(--color-primary, #0f8f73);
border-radius: 0.5rem;
background: var(--color-bg-primary, #fff);
color: var(--color-primary, #0f8f73);
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
opacity: 1;
}

#speed-match-game .gk-finish-btn:hover {
background: rgba(15, 143, 115, 0.1);
}

[data-theme="dark"] #speed-match-game .gk-finish-btn {
background: var(--color-dark-bg-secondary, #1f2937);
color: var(--color-primary, #34d399);
border-color: var(--color-primary, #34d399);
}


#speed-match-game .gk-play-controls {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin: 0.35rem auto 0;
}

#speed-match-game .gk-play-controls .gk-finish-btn {
margin: 0;
min-width: 6rem;
}

.gk-runtime-history-toggle {
background: transparent;
color: var(--color-primary, #0f8f73);
border: 1px solid var(--color-primary, #0f8f73);
padding: 0.55rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
}

.gk-runtime-history-toggle:hover {
background: rgba(15, 143, 115, 0.1);
}

.gk-runtime-history-panel {
margin: 0.75rem 0 1rem;
text-align: left;
max-height: 260px;
overflow: auto;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.5rem;
background: var(--color-bg-secondary, #f0f4f8);
}

[data-theme="dark"] .gk-runtime-history-panel {
background: var(--color-dark-bg-secondary, #1f2937);
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-list {
display: flex;
flex-direction: column;
}

.gk-runtime-history-row {
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border, #dfe4ea);
font-size: 0.82rem;
line-height: 1.35;
}

.gk-runtime-history-row:last-child {
border-bottom: none;
}

[data-theme="dark"] .gk-runtime-history-row {
border-color: var(--color-dark-border, #3a4553);
}

.gk-runtime-history-main {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: flex-start;
}

.gk-runtime-history-status {
font-weight: 800;
white-space: nowrap;
}

.gk-runtime-history-correct .gk-runtime-history-status {
color: #16a34a;
}

.gk-runtime-history-wrong .gk-runtime-history-status {
color: #dc2626;
}

.gk-runtime-history-detail {
flex: 1;
text-align: right;
color: var(--color-text-primary, #1a2332);
}

[data-theme="dark"] .gk-runtime-history-detail {
color: var(--color-dark-text-primary, #f8fafc);
}

.gk-runtime-history-sub {
margin-top: 0.25rem;
color: var(--color-text-secondary, #4b5b6d);
}

[data-theme="dark"] .gk-runtime-history-sub {
color: var(--color-dark-text-secondary, #cbd5e1);
}

.gk-runtime-history-empty {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-secondary, #4b5b6d);
text-align: center;
}

.gk-history-swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
vertical-align: -0.12rem;
margin-right: 0.3rem;
border: 1px solid rgba(0,0,0,0.16);
}

.gk-runtime-history-detail svg {
width: 30px;
height: 30px;
vertical-align: middle;
}

</style>

<div id="speed-match-game">

<div id="sm-instructions">
<div class="sm-title-row"><span class="sm-icon">&#9889;</span><h2>Speed Match</h2></div>
<p class="sm-subtitle">Quao rapido voce consegue processar?</p>
<div class="sm-how-to">
<h3>Como Jogar</h3>
<ol>
<li>A cada rodada, um simbolo aparece na tela.</li>
<li>Decida se ele <strong>corresponde</strong> ao simbolo da rodada anterior.</li>
<li>Clique em <strong>Igual</strong> se corresponder, <strong>Diferente</strong> se nao.</li>
<li>Responda antes que o tempo acabe, ou conta como erro!</li>
<li>Conforme voce sobe de nivel, o jogo fica mais rapido e dificil.</li>
</ol>
</div>
<div class="sm-kbd-hints">
<span class="sm-kbd-hint"><span class="sm-kbd">1</span> Diferente</span>
<span class="sm-kbd-hint"><span class="sm-kbd">2</span> Igual</span>
<span class="sm-kbd-hint"><span class="sm-kbd">Esc</span> Pause</span>
</div>
<div id="sm-best-display" class="sm-personal-best" style="display:none;">
Recorde: <strong id="sm-best-score">0</strong> Pontos
</div>
<button class="sm-btn-primary" id="sm-start-btn">Iniciar</button>
<div id="sm-challenge-banner-wrap"></div>
</div>

<div id="sm-wizard">
<div id="sm-wizard-card"></div>
</div>

<div id="sm-playing">
<div class="sm-header">
<div class="sm-stat">
<div class="sm-stat-label">Pontos</div>
<div class="sm-stat-value" id="sm-score">0</div>
</div>
<div class="sm-stat">
<div class="sm-stat-label">Sequencia</div>
<div class="sm-stat-value" id="sm-streak">0</div>
</div>
<div class="sm-stat">
<div class="sm-stat-label">Nivel</div>
<div class="sm-stat-value" id="sm-level">1</div>
</div>
</div>
<div class="sm-level-info">
<span class="sm-level-text">Level <span id="sm-level-text">1</span></span>
<span class="sm-nback-badge" id="sm-nback-badge">1-Back</span>
</div>
<div class="sm-progress-bar">
<div class="sm-progress-fill" id="sm-progress-fill" style="width:0%"></div>
</div>
<div class="sm-timer-bar">
<div class="sm-timer-fill" id="sm-timer-fill" style="width:100%"></div>
</div>
<div class="sm-symbol-area">
<div class="sm-feedback-flash" id="sm-feedback-flash"></div>
<div class="sm-feedback-icon" id="sm-feedback-icon"></div>
<div class="sm-symbol" id="sm-symbol"></div>
</div>
<div class="sm-actions">
<button class="sm-action-btn sm-btn-different" id="sm-btn-different">
<span class="sm-btn-icon">&#10007;</span>
<span>Diferente</span>
<span class="sm-btn-kbd">1</span>
</button>
<button class="sm-action-btn sm-btn-same" id="sm-btn-same">
<span class="sm-btn-icon">&#10003;</span>
<span>Igual</span>
<span class="sm-btn-kbd">2</span>
</button>
</div>
<div class="sm-playing-kbd-hint">Pressione <strong>Esc</strong> para pausar</div>
<div class="gk-play-controls">
<button class="gk-finish-btn" id="sm-pause-btn" type="button">Pausar</button>
<button class="gk-finish-btn" id="sm-finish-btn" type="button">Encerrar Jogo</button>
</div>
</div>

<div id="sm-pause-overlay">
<div class="sm-pause-text">Pausado</div>
<button class="sm-btn-primary" id="sm-resume-btn">Continuar</button>
</div>

<div id="sm-complete-overlay">
<div class="sm-complete-card">
<button class="gk-complete-close" id="sm-close-btn" type="button" aria-label="Close" title="Close">&times;</button>
<div class="sm-trophy">&#127942;</div>
<h2>Jogo Concluido!</h2>
<div class="sm-final-score" id="sm-final-score">0</div>
<div id="sm-new-best" class="sm-new-best" style="display:none;">&#11088; Novo Recorde!</div>
<div class="gk-challenge-result" id="sm-challenge-result" style="display:none;"></div>
<div class="sm-complete-stats">
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Nivel</div>
<div class="sm-complete-stat-value" id="sm-final-level">1</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Precisao</div>
<div class="sm-complete-stat-value" id="sm-final-accuracy">0%</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Sequencia</div>
<div class="sm-complete-stat-value" id="sm-final-streak">0</div>
</div>
<div class="sm-complete-stat">
<div class="sm-complete-stat-label">Recorde</div>
<div class="sm-complete-stat-value" id="sm-final-best">0</div>
</div>
</div>
<div class="sm-complete-actions">
<button class="sm-btn-primary" id="sm-play-again-btn">Repetir</button>
<button class="gk-runtime-history-toggle" id="sm-history-toggle" type="button">Show History</button>
<a href="/pt/games/" class="sm-back-link">&larr; Todos os Jogos</a>
</div>
<div class="gk-runtime-history-panel" id="sm-history-panel" style="display:none;">
<div class="gk-runtime-history-list" id="sm-history-list"></div>
</div>
<div class="gk-share-section">

<button class="gk-share-btn" id="sm-share-btn">&#128279; Compartilhar resultado</button>
<div class="gk-share-copied" id="sm-share-copied" style="display:none;">Copiado!</div>
</div>
</div>
</div>

<div class="sm-level-up-toast" id="sm-level-toast">Level Up!</div>

</div>

<script>
(function() {
"use strict";

var SYMBOLS = ['\u25C6', '\u25CF', '\u25A0', '\u25B2', '\u2605', '\u2666', '\u2660', '\u2663', '\u2665', '\u2B1F', '\u2B21', '\u25EF'];
var MAX_LEVEL = 20;
var STORAGE_BEST = 'guruka_speed-match_best';

var challenge = GK.parseChallenge();

var runHistory = createRuntimeHistory('sm-history-toggle', 'sm-history-panel', 'sm-history-list');

function createRuntimeHistory(toggleId, panelId, listId) {
var entries = [];
var toggle = document.getElementById(toggleId);
var panel = document.getElementById(panelId);
var list = document.getElementById(listId);

function escapeHtml(value) {
return String(value)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}

function render() {
if (!list) return;
if (!entries.length) {
list.innerHTML = '<div class="gk-runtime-history-empty">No answers yet.</div>';
return;
}
var html = '';
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var correct = entry.correct === true;
var cls = correct ? 'gk-runtime-history-correct' : 'gk-runtime-history-wrong';
var label = correct ? 'Correct' : 'Incorrect';
html += '<div class="gk-runtime-history-row ' + cls + '">';
html += '<div class="gk-runtime-history-main">';
html += '<span class="gk-runtime-history-status">' + label + '</span>';
html += '<div class="gk-runtime-history-detail">' + entry.html + '</div>';
html += '</div></div>';
}
list.innerHTML = html;
}

function resetPanel() {
if (panel) panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
}

function togglePanel() {
if (!panel) return;
var visible = panel.style.display !== 'none';
if (visible) {
panel.style.display = 'none';
if (toggle) toggle.textContent = 'Show History';
} else {
render();
panel.style.display = 'block';
if (toggle) toggle.textContent = 'Hide History';
}
}

return {
pushHtml: function(correct, html) {
entries.push({ correct: correct === true, html: String(html) });
if (entries.length > 200) entries = entries.slice(-200);
},
pushText: function(correct, text) {
this.pushHtml(correct, escapeHtml(text));
},
clear: function() {
entries = [];
render();
resetPanel();
},
render: render,
resetPanel: resetPanel,
toggle: togglePanel,
escape: escapeHtml
};
}

var state = {
screen: 'instructions',
level: 1,
score: 0,
streak: 0,
bestStreak: 0,
round: 0,
totalCorrect: 0,
totalAnswered: 0,
symbolHistory: [],
currentSymbol: '',
answered: false,
paused: false,
roundStartTime: 0,
timerInterval: null,
autoAdvanceTimeout: null,
gameOver: false
};

/* ── DOM refs ── */
var elInstructions = document.getElementById('sm-instructions');
var elWizard = document.getElementById('sm-wizard');
var elWizardCard = document.getElementById('sm-wizard-card');
var elPlaying = document.getElementById('sm-playing');
var elPauseOverlay = document.getElementById('sm-pause-overlay');
var elCompleteOverlay = document.getElementById('sm-complete-overlay');
var elScore = document.getElementById('sm-score');
var elStreak = document.getElementById('sm-streak');
var elLevel = document.getElementById('sm-level');
var elLevelText = document.getElementById('sm-level-text');
var elNbackBadge = document.getElementById('sm-nback-badge');
var elProgressFill = document.getElementById('sm-progress-fill');
var elTimerFill = document.getElementById('sm-timer-fill');
var elSymbol = document.getElementById('sm-symbol');
var elFeedbackFlash = document.getElementById('sm-feedback-flash');
var elFeedbackIcon = document.getElementById('sm-feedback-icon');
var elFinalScore = document.getElementById('sm-final-score');
var elNewBest = document.getElementById('sm-new-best');
var elFinalLevel = document.getElementById('sm-final-level');
var elFinalAccuracy = document.getElementById('sm-final-accuracy');
var elFinalStreak = document.getElementById('sm-final-streak');
var elFinalBest = document.getElementById('sm-final-best');
var elBestDisplay = document.getElementById('sm-best-display');
var elBestScore = document.getElementById('sm-best-score');
var elLevelToast = document.getElementById('sm-level-toast');
var btnStart = document.getElementById('sm-start-btn');
var btnDifferent = document.getElementById('sm-btn-different');
var btnSame = document.getElementById('sm-btn-same');
var btnResume = document.getElementById('sm-resume-btn');
var btnPlayAgain = document.getElementById('sm-play-again-btn');

/* ── Level parameters ── */
function getNBack(lvl) {
return lvl <= 10 ? 1 : 2;
}

function getDisplayTime(lvl) {
return Math.max(2500 - lvl * 100, 800);
}

function getSymbolCount(lvl) {
return Math.min(6 + Math.floor(lvl / 3), 12);
}

function getRoundsPerLevel(lvl) {
return 10 + lvl;
}

/* ── localStorage helpers ── */
function loadBest() {
try {
var b = localStorage.getItem(STORAGE_BEST);
return b ? parseInt(b, 10) : 0;
} catch(e) { return 0; }
}

function saveBest(score) {
try { localStorage.setItem(STORAGE_BEST, String(score)); } catch(e) {}
}

function saveHistory(entry) {
void entry;
}

/* ── Show personal best on instructions ── */
function showPersonalBest() {
var best = loadBest();
if (best > 0) {
elBestScore.textContent = best.toLocaleString();
elBestDisplay.style.display = 'block';
} else {
elBestDisplay.style.display = 'none';
}
}

/* ── Screen management ── */
function showScreen(name) {
elInstructions.style.display = name === 'instructions' ? 'flex' : 'none';
elPlaying.style.display = name === 'playing' ? 'flex' : 'none';
elWizard.style.display = name === 'wizard' ? 'flex' : 'none';
elPauseOverlay.style.display = name === 'paused' ? 'flex' : 'none';
elCompleteOverlay.style.display = name === 'complete' ? 'flex' : 'none';
state.screen = name;
}

/* ── Pick a random symbol ── */
function pickSymbol() {
var count = getSymbolCount(state.level);
var pool = SYMBOLS.slice(0, count);
return pool[Math.floor(Math.random() * pool.length)];
}

/* ── Determine if current symbol matches nBack ── */
function isMatch() {
var nBack = getNBack(state.level);
var idx = state.symbolHistory.length - 1 - nBack;
if (idx < 0) return false;
return state.symbolHistory[idx] === state.currentSymbol;
}

function hasComparisonTarget() {
return state.symbolHistory.length > getNBack(state.level);
}

function setAnswerButtonsEnabled(enabled) {
btnDifferent.disabled = !enabled;
btnSame.disabled = !enabled;
}

/* ── Update the HUD ── */
function updateHUD() {
elScore.textContent = state.score.toLocaleString();
elStreak.textContent = state.streak;
elLevel.textContent = state.level;
elLevelText.textContent = state.level;
var nBack = getNBack(state.level);
elNbackBadge.textContent = nBack + '-Back';
var roundsNeeded = getRoundsPerLevel(state.level);
var pct = Math.min((state.round / roundsNeeded) * 100, 100);
elProgressFill.style.width = pct + '%';
if (challenge.active) GK.updateChallengeBar('sm-playing', state.score, challenge.score);
}

/* ── Timer bar countdown ── */
function startTimerBar() {
var displayTime = getDisplayTime(state.level);
var startTime = Date.now();
elTimerFill.style.width = '100%';
elTimerFill.classList.remove('sm-timer-warning');

if (state.timerInterval) clearInterval(state.timerInterval);
state.timerInterval = setInterval(function() {
if (state.paused) return;
var elapsed = Date.now() - startTime;
var remaining = Math.max(0, 1 - elapsed / displayTime);
elTimerFill.style.width = (remaining * 100) + '%';
if (remaining < 0.3) {
elTimerFill.classList.add('sm-timer-warning');
}
if (remaining <= 0) {
clearInterval(state.timerInterval);
}
}, 50);
}

/* ── Show feedback flash ── */
function showFeedback(correct) {
elFeedbackFlash.className = 'sm-feedback-flash';
elFeedbackIcon.className = 'sm-feedback-icon';
void elFeedbackFlash.offsetWidth;
void elFeedbackIcon.offsetWidth;

if (correct) {
elFeedbackFlash.classList.add('sm-flash-correct');
elFeedbackIcon.textContent = '\u2713';
elFeedbackIcon.classList.add('sm-show-check');
} else {
elFeedbackFlash.classList.add('sm-flash-wrong');
elFeedbackIcon.textContent = '\u2717';
elFeedbackIcon.classList.add('sm-show-x');
}

setTimeout(function() {
elFeedbackFlash.className = 'sm-feedback-flash';
elFeedbackIcon.className = 'sm-feedback-icon';
}, 400);
}

/* ── Show level-up toast ── */
function showLevelToast(level) {
elLevelToast.textContent = 'Level ' + level + '!';
elLevelToast.classList.add('sm-toast-show');
setTimeout(function() {
elLevelToast.classList.remove('sm-toast-show');
}, 1500);
}

function expectedSameForCurrentRound() {
if (!hasComparisonTarget()) return false;
return isMatch();
}

function sameLabel(value) {
if (value === null || value === undefined) return 'No answer';
return value ? 'Same' : 'Different';
}

function recordSpeedHistory(userSaidSame, correct) {
var expected = expectedSameForCurrentRound();
var html = '<strong>' + runHistory.escape(getNBack(state.level) + '-Back') + '</strong>';
html += '<div class="gk-runtime-history-sub">Symbol: ' + runHistory.escape(state.currentSymbol) + '</div>';
html += '<div class="gk-runtime-history-sub">Your: ' + runHistory.escape(sameLabel(userSaidSame)) + ' | Correct: ' + runHistory.escape(sameLabel(expected)) + '</div>';
runHistory.pushHtml(correct, html);
}

/* ── Process answer ── */
function processAnswer(userSaidSame) {
if (state.answered || state.gameOver || !hasComparisonTarget()) return;
state.answered = true;

if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

var matchResult = isMatch();
var correct = (userSaidSame === matchResult);

state.totalAnswered++;
recordSpeedHistory(userSaidSame, correct);

if (correct) {
state.totalCorrect++;
var responseTime = Date.now() - state.roundStartTime;
var points = 100;
if (responseTime < 1000) {
points += Math.floor((1000 - responseTime) / 10);
}
points += Math.floor(state.streak * 0.1 * 100);
state.score += points;
state.streak++;
if (state.streak > state.bestStreak) state.bestStreak = state.streak;
showFeedback(true);
} else {
state.streak = 0;
showFeedback(false);
}

updateHUD();

/* Check level progression */
var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.symbolHistory = [];
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Handle timeout (no answer) ── */
function handleTimeout() {
if (state.answered || state.gameOver) return;
state.answered = true;

if (!hasComparisonTarget()) {
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 150);
return;
}
state.totalAnswered++;
state.streak = 0;
recordSpeedHistory(null, false);

if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}

showFeedback(false);
updateHUD();

var roundsNeeded = getRoundsPerLevel(state.level);
if (state.round >= roundsNeeded) {
if (state.level >= MAX_LEVEL) {
endGame();
return;
}
state.level++;
state.round = 0;
state.symbolHistory = [];
showLevelToast(state.level);
}

setTimeout(function() {
if (!state.gameOver && !state.paused) {
nextRound();
}
}, 350);
}

/* ── Next round ── */
function nextRound() {
state.round++;
state.answered = false;
state.currentSymbol = pickSymbol();
state.symbolHistory.push(state.currentSymbol);

elSymbol.textContent = state.currentSymbol;
elSymbol.style.animation = 'none';
void elSymbol.offsetWidth;
elSymbol.style.animation = '';

state.roundStartTime = Date.now();
updateHUD();
startTimerBar();
setAnswerButtonsEnabled(hasComparisonTarget());

var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Celebration effects ── */
function showConfetti() {
var colors = ['#f59e0b','#ef4444','#22c55e','#3b82f6','#a855f7','#ec4899'];
var container = document.createElement('div');
container.className = 'sm-confetti-container';
for (var i = 0; i < 20; i++) {
var piece = document.createElement('div');
piece.className = 'sm-confetti-piece';
piece.style.left = Math.random() * 100 + '%';
piece.style.background = colors[Math.floor(Math.random() * colors.length)];
piece.style.animationDelay = (Math.random() * 0.8) + 's';
piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
piece.style.width = (6 + Math.random() * 8) + 'px';
piece.style.height = piece.style.width;
container.appendChild(piece);
}
var glow = document.createElement('div');
glow.className = 'sm-glow-flash';
document.body.appendChild(container);
document.body.appendChild(glow);
setTimeout(function() {
if (container.parentNode) container.parentNode.removeChild(container);
if (glow.parentNode) glow.parentNode.removeChild(glow);
}, 3000);
}

function animateScoreCountUp(el, target) {
var start = 0;
var duration = 1200;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = current.toLocaleString();
if (progress < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}

function enterMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
var footer = document.querySelector('footer');
if (window.innerWidth <= 768 && !document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.setAttribute('data-guruka-game-padding-top', document.body.style.paddingTop || '');
}
if (stickyNav && window.innerWidth <= 768) {
stickyNav.style.display = 'none';
document.body.style.paddingTop = '0';
}
if (footer && window.innerWidth <= 768) footer.style.display = 'none';
}

function exitMobileGameMode() {
var stickyNav = document.querySelector('.sticky.top-0');
if (stickyNav) stickyNav.style.display = '';
var footer = document.querySelector('footer');
if (footer) footer.style.display = '';
if (document.body.hasAttribute('data-guruka-game-padding-top')) {
document.body.style.paddingTop = document.body.getAttribute('data-guruka-game-padding-top') || '';
document.body.removeAttribute('data-guruka-game-padding-top');
}
}

/* ── End game ── */
function endGame() {
exitMobileGameMode();
state.gameOver = true;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);

var accuracy = state.totalAnswered > 0
? Math.round((state.totalCorrect / state.totalAnswered) * 100)
: 0;

var best = loadBest();
var isNewBest = state.score > best;
if (isNewBest) {
saveBest(state.score);
best = state.score;
}

saveHistory({
score: state.score,
level: state.level,
accuracy: accuracy,
date: new Date().toISOString()
});

var trophy = document.querySelector('.sm-trophy');
var title = document.querySelector('#sm-complete-overlay .sm-complete-card h2');

if (isNewBest) {
showConfetti();
trophy.textContent = '\uD83C\uDF89';
title.textContent = 'FANTASTICO!';
elNewBest.className = 'sm-new-best-enhanced';
elNewBest.innerHTML = '\uD83C\uDF1F FANTASTICO! Novo Recorde!';
elNewBest.style.display = 'inline-block';
} else {
trophy.textContent = '\uD83C\uDFC6';
title.textContent = 'Bom trabalho!';
elNewBest.className = 'sm-new-best';
elNewBest.style.display = 'none';
}

elFinalLevel.textContent = state.level;
elFinalAccuracy.textContent = accuracy + '%';
elFinalStreak.textContent = state.bestStreak;
elFinalBest.textContent = best.toLocaleString();

GK.renderChallengeResult('sm-challenge-result', state.score, challenge);
runHistory.render();
runHistory.resetPanel();

showScreen('complete');
animateScoreCountUp(elFinalScore, state.score);
}

/* ── Pause / Resume ── */
function pauseGame() {
if (state.paused || state.gameOver) return;
state.paused = true;
if (state.autoAdvanceTimeout) {
clearTimeout(state.autoAdvanceTimeout);
state.autoAdvanceTimeout = null;
}
if (state.timerInterval) {
clearInterval(state.timerInterval);
state.timerInterval = null;
}
showScreen('paused');
}

function resumeGame() {
if (!state.paused) return;
state.paused = false;
showScreen('playing');
/* Restart the current round's timer with full time */
state.roundStartTime = Date.now();
startTimerBar();
var displayTime = getDisplayTime(state.level);
state.autoAdvanceTimeout = setTimeout(function() {
handleTimeout();
}, displayTime);
}

/* ── Start game flow ── */
var SM_WIZARD_STEPS = [
{icon: '\u2728', title: 'Um simbolo aparece na tela', desc: 'Cada rodada mostra um simbolo. Observe!'},
{icon: '\u2194\uFE0F', title: 'Igual ou Diferente?', desc: 'Corresponde ao anterior? Toque para responder.'},
{icon: '\u26A1', title: 'Rapido', desc: 'Responda antes que o tempo acabe.', final: true}
];
var smWizardStep = 0;

function renderWizardStep() {
var s = SM_WIZARD_STEPS[smWizardStep];
var dotsHtml = '';
for (var i = 0; i < SM_WIZARD_STEPS.length; i++) {
dotsHtml += '<div class="sm-wizard-dot' + (i === smWizardStep ? ' active' : '') + '"></div>';
}
var btnLabel = s.final ? 'Iniciar' : 'Continuar';
elWizardCard.innerHTML =
'<div class="sm-wizard-icon">' + s.icon + '</div>' +
'<div class="sm-wizard-title">' + s.title + '</div>' +
'<div class="sm-wizard-desc">' + s.desc + '</div>' +
'<div class="sm-wizard-dots">' + dotsHtml + '</div>' +
'<button class="sm-wizard-btn" id="sm-wizard-next">' + btnLabel + '</button>';
elWizardCard.style.animation = 'none';
void elWizardCard.offsetWidth;
elWizardCard.style.animation = 'sm-wizard-enter 0.3s ease-out';
document.getElementById('sm-wizard-next').addEventListener('click', advanceWizard);
}

function advanceWizard() {
if (smWizardStep < SM_WIZARD_STEPS.length - 1) {
smWizardStep++;
renderWizardStep();
} else {
startPlaying();
}
}

function showWizard() {
smWizardStep = 0;
showScreen('wizard');
renderWizardStep();
}

function resetState() {
state.level = 1;
state.score = 0;
state.streak = 0;
state.bestStreak = 0;
state.round = 0;
state.totalCorrect = 0;
state.totalAnswered = 0;
state.symbolHistory = [];
state.currentSymbol = '';
runHistory.clear();
state.answered = false;
state.paused = false;
state.gameOver = false;
state.roundStartTime = 0;
if (state.timerInterval) clearInterval(state.timerInterval);
if (state.autoAdvanceTimeout) clearTimeout(state.autoAdvanceTimeout);
state.timerInterval = null;
state.autoAdvanceTimeout = null;
}

function startPlaying() {
window.scrollTo({ top: 0, behavior: 'instant' });
enterMobileGameMode();
showScreen('playing');
GK.renderChallengeBar('sm-playing', challenge);
updateHUD();
nextRound();
}

/* ── Event listeners ── */
btnStart.addEventListener('click', function() {
resetState();
showWizard();
});

btnPlayAgain.addEventListener('click', function() {
resetState();
showPersonalBest();
showWizard();
});

document.getElementById('sm-close-btn').addEventListener('click', function() {
showPersonalBest();
showScreen('instructions');
});

btnDifferent.addEventListener('click', function() {
processAnswer(false);
});

btnSame.addEventListener('click', function() {
processAnswer(true);
});

btnResume.addEventListener('click', function() {
resumeGame();
});

document.getElementById('sm-pause-btn').addEventListener('click', function() {
pauseGame();
});

document.getElementById('sm-finish-btn').addEventListener('click', function() {
endGame();
});

document.getElementById('sm-history-toggle').addEventListener('click', function() {
runHistory.toggle();
});

document.getElementById('sm-share-btn').addEventListener('click', function() {
GK.shareResult(state.score, 'Speed Match', '/pt/games/speed-match/', 'sm-share-copied');
});

document.addEventListener('keydown', function(e) {
if (state.screen === 'playing' && !state.paused && !state.gameOver) {
if (e.key === '1') {
e.preventDefault();
processAnswer(false);
} else if (e.key === '2') {
e.preventDefault();
processAnswer(true);
} else if (e.key === 'Escape') {
e.preventDefault();
pauseGame();
}
} else if (state.screen === 'paused') {
if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resumeGame();
}
} else if (state.screen === 'wizard') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
advanceWizard();
}
} else if (state.screen === 'instructions') {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
resetState();
showWizard();
}
} else if (state.screen === 'complete') {
if (e.key === 'Escape') {
e.preventDefault();
showPersonalBest();
showScreen('instructions');
} else if (e.key === 'Enter' || e.key === ' ') {
var tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
if (tag === 'button' || tag === 'a') return;
e.preventDefault();
resetState();
showPersonalBest();
showWizard();
}
}
});

/* ── Init ── */
showPersonalBest();
GK.renderChallengeBanner('sm-challenge-banner-wrap', challenge);
showScreen('instructions');

})();
</script>

### Calma e Alívio do Estresse
URL: https://guruka.com/pt/meditate/calm-and-stress-relief/
Description: Solte a tensão. Volte para si.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/pt/meditate/calm-and-stress-relief/');
</script>

### Gratidão
URL: https://guruka.com/pt/meditate/gratitude/
Description: Encontre o que já é bom.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/pt/meditate/gratitude/');
</script>

### Foco e Clareza
URL: https://guruka.com/pt/meditate/focus-and-clarity/
Description: Silencie o ruído. Afine sua mente.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/pt/meditate/focus-and-clarity/');
</script>

### Bondade Amorosa
URL: https://guruka.com/pt/meditate/loving-kindness/
Description: Ofereça calor, a si mesmo primeiro.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/pt/meditate/loving-kindness/');
</script>

### Energia Matinal
URL: https://guruka.com/pt/meditate/morning-energy/
Description: Desperte com suavidade. Cumprimente o dia.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/pt/meditate/morning-energy/');
</script>

### Sono e Relaxamento
URL: https://guruka.com/pt/meditate/sleep-and-wind-down/
Description: Deixe o dia ir. Descansar é suficiente.

<div id="meditation-app"></div>

<script>
GK.Meditation.init('/assets/pt/meditate/sleep-and-wind-down/');
</script>

### Aurora - Visual com Afirmações
URL: https://guruka.com/pt/visuals/aurora/
Description: Faixas de cores de auroras boreais fluindo pela tela. Adicione seu próprio texto de afirmação, armazenado com privacidade no navegador.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #020810;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/pt/visuals/" class="vp-back">&larr; Todos os Visuais</a>
<h1 class="vp-title">Aurora</h1>
<p class="vp-desc">Luzes do norte fluindo.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#22d3ee,#10b981)"></div>
<span>Ártico</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#a855f7,#ec4899)"></div>
<span>Cósmico</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f472b6,#eab308)"></div>
<span>Alvorecer</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texto de afirmação (opcional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">predefinições <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="opcional. Insira afirmações aqui. O texto será exibido linha por linha."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Ritmo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Iniciar</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Toque em qualquer lugar para sair</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'aurora';
var currentAffId = null;
var paceLabels = ["Muito lento","Lento","Normal","Rápido","Muito rápido"];
var currentPace = 2;
var schemes = [
{ name:'Arctic', bg:'#020810',
bands:[
{colors:['#22d3ee','#06b6d4'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#10b981','#059669'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#22d3ee','#14b8a6'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#34d399','#06b6d4'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#67e8f9','#a7f3d0'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]},
{ name:'Cosmic', bg:'#0a0510',
bands:[
{colors:['#a855f7','#7c3aed'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#ec4899','#be185d'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#c084fc','#e879f9'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#8b5cf6','#d946ef'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#f0abfc','#c4b5fd'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]},
{ name:'Dawn', bg:'#100805',
bands:[
{colors:['#f472b6','#fb923c'], alpha:0.15, baseY:0.25, amp:0.08, freq:0.003, speed:0.12},
{colors:['#eab308','#f59e0b'], alpha:0.12, baseY:0.30, amp:0.06, freq:0.004, speed:0.09},
{colors:['#fb7185','#fbbf24'], alpha:0.09, baseY:0.35, amp:0.10, freq:0.002, speed:0.15},
{colors:['#f9a8d4','#fcd34d'], alpha:0.11, baseY:0.28, amp:0.07, freq:0.0035, speed:0.10},
{colors:['#fda4af','#fde68a'], alpha:0.06, baseY:0.22, amp:0.05, freq:0.005, speed:0.06}
]}
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var offCanvas, offCtx, halfW, halfH;

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Nenhum',text:''},
{title:'Calma e clareza',text:'Minha mente está calma e clara\nEu solto o que não posso controlar\nEstou presente neste momento'},
{title:'Autoconfiança',text:'Acredito em mim e nas minhas capacidades\nSou digno de coisas boas\nFico mais forte a cada dia'},
{title:'Deixar ir',text:'Eu solto o que não me serve mais\nEu me perdoo e perdoo os outros\nAbro espaço para a paz'},
{title:'Gratidão',text:'Sou grato por este momento\nAbundância flui para minha vida\nApreço as coisas simples'},
{title:'Foco e energia',text:'Meu foco é firme e constante\nCanalizo minha energia com propósito\nAvanço com intenção'},
{title:'Sono e descanso',text:'Me dou permissão para descansar\nMeu corpo relaxa a cada respiração\nDeslizo para um sono tranquilo'},
{title:'Parar de fumar',text:'Meus pulmões estão mais limpos a cada dia\nSou mais forte que qualquer desejo\nCada respiração é uma vitória'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Limpar texto') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});


function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var time = t / 1000;

// Parse background color for smoothstep
var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);

if (reducedMotion) {
ctx.globalAlpha = 1;
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);
for (var b = 0; b < s.bands.length; b++) {
var band = s.bands[b];
var y = H * band.baseY;
var grad = ctx.createLinearGradient(0, y - H * 0.1, 0, y + H * 0.15);
grad.addColorStop(0, band.colors[0] + '00');
grad.addColorStop(0.3, band.colors[0] + hexAlpha(band.alpha));
grad.addColorStop(0.7, band.colors[1] + hexAlpha(band.alpha * 0.7));
grad.addColorStop(1, band.colors[1] + '00');
ctx.shadowColor = band.colors[0];
ctx.shadowBlur = 15;
ctx.fillStyle = grad;
ctx.fillRect(0, y - H * 0.1, W, H * 0.25);
}
ctx.shadowBlur = 0;
return;
}

var scaleX = halfW / W, scaleY = halfH / H;

// 1. Clear offscreen with background
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// 2. Draw bands on offscreen with 'screen' compositing
offCtx.save();
offCtx.globalCompositeOperation = 'screen';

for (var b = 0; b < s.bands.length; b++) {
var band = s.bands[b];
var pulse = 0.75 + 0.25 * Math.sin(time * 0.08 + b * 0.7);
var vertOsc = Math.sin(time * 0.04 + b * 1.1) * 0.04;
offCtx.beginPath();

var baseY = halfH * (band.baseY + vertOsc);
var amp = halfH * band.amp;
for (var x = 0; x <= halfW; x += 3) {
var realX = x / scaleX;
var noise1 = Math.sin(realX * band.freq + time * band.speed);
var noise2 = Math.sin(realX * band.freq * 1.7 + time * band.speed * 0.6 + 2.1);
var noise3 = Math.sin(realX * band.freq * 0.5 + time * band.speed * 1.3 + 4.3);
var y = baseY + amp * (noise1 * 0.5 + noise2 * 0.3 + noise3 * 0.2);
if (x === 0) offCtx.moveTo(x, y);
else offCtx.lineTo(x, y);
}

offCtx.lineTo(halfW, halfH * (band.baseY + vertOsc + 0.25));
offCtx.lineTo(0, halfH * (band.baseY + vertOsc + 0.25));
offCtx.closePath();

var grad = offCtx.createLinearGradient(0, baseY - amp, 0, baseY + halfH * 0.25);
grad.addColorStop(0, band.colors[0] + hexAlpha(band.alpha * 0.3 * pulse));
grad.addColorStop(0.3, band.colors[0] + hexAlpha(band.alpha * pulse));
grad.addColorStop(0.7, band.colors[1] + hexAlpha(band.alpha * 0.6 * pulse));
grad.addColorStop(1, band.colors[1] + '00');
offCtx.fillStyle = grad;
offCtx.fill();
}

offCtx.restore();

// 3. Smoothstep threshold on offscreen pixel data
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// 4. Upscale to main canvas with smoothing
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

// 5. Draw stars on main canvas at full resolution (stays crisp)
for (var i = 0; i < 60; i++) {
var sx = (Math.sin(i * 127.1 + 311.7) * 0.5 + 0.5) * W;
var sy = (Math.sin(i * 269.5 + 183.3) * 0.5 + 0.5) * H * 0.6;
var sa = 0.2 + 0.3 * Math.abs(Math.sin(time * 0.5 + i));
ctx.beginPath();
ctx.arc(sx, sy, 0.8, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,255,255,' + sa + ')';
ctx.fill();
}

animId = requestAnimationFrame(draw);
}

function hexAlpha(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Movimento reduzido ativado · Exibindo vista estática<br>Toque em qualquer lugar para sair';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 5000 : 3000);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Orbe de Respiração - Visual com Afirmações
URL: https://guruka.com/pt/visuals/breathing-orb/
Description: Um orbe pulsante que guia seu ritmo de respiração. Adicione seu próprio texto de afirmação, armazenado com privacidade no navegador.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0a0a1a;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/pt/visuals/" class="vp-back">&larr; Todos os Visuais</a>
<h1 class="vp-title">Orbe de Respiração</h1>
<p class="vp-desc">Orbe pulsante guiando sua respiração.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#4338ca,#7c3aed)"></div>
<span>Crepúsculo</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f97316,#eab308)"></div>
<span>Nascer do Sol</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#059669,#14b8a6)"></div>
<span>Floresta</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texto de afirmação (opcional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">predefinições <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="opcional. Insira afirmações aqui. O texto será exibido linha por linha."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Ritmo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Iniciar</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Toque em qualquer lugar para sair</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'breathing-orb';
var currentAffId = null;
var paceLabels = ["Muito lento","Lento","Normal","Rápido","Muito rápido"];
var currentPace = 2;
var schemes = [
{ name:'Twilight', bg:'#0a0a1a', orb:['#6366f1','#a78bfa','#4338ca'], particle:'#c4b5fd' },
{ name:'Sunrise', bg:'#1a0a05', orb:['#f97316','#eab308','#dc2626'], particle:'#fcd34d' },
{ name:'Forest', bg:'#051a0a', orb:['#059669','#14b8a6','#065f46'], particle:'#6ee7b7' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

// Scheme buttons
var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Nenhum',text:''},
{title:'Calma e clareza',text:'Minha mente está calma e clara\nEu solto o que não posso controlar\nEstou presente neste momento'},
{title:'Autoconfiança',text:'Acredito em mim e nas minhas capacidades\nSou digno de coisas boas\nFico mais forte a cada dia'},
{title:'Deixar ir',text:'Eu solto o que não me serve mais\nEu me perdoo e perdoo os outros\nAbro espaço para a paz'},
{title:'Gratidão',text:'Sou grato por este momento\nAbundância flui para minha vida\nApreço as coisas simples'},
{title:'Foco e energia',text:'Meu foco é firme e constante\nCanalizo minha energia com propósito\nAvanço com intenção'},
{title:'Sono e descanso',text:'Me dou permissão para descansar\nMeu corpo relaxa a cada respiração\nDeslizo para um sono tranquilo'},
{title:'Parar de fumar',text:'Meus pulmões estão mais limpos a cada dia\nSou mais forte que qualquer desejo\nCada respiração é uma vitória'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Limpar texto') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});


// Particles
var particles = [];
function initParticles() {
particles = [];
for (var i = 0; i < 100; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
r: 1 + Math.random() * 2.5,
vx: (Math.random() - 0.5) * 0.2,
vy: (Math.random() - 0.5) * 0.2,
phase: Math.random() * Math.PI * 2
});
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running && particles.length === 0) initParticles();
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var cx = W / 2, cy = H / 2;

// Background
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);

// Breathing cycle: 6 seconds
var breathT = t / 1000;
var breathPhase = Math.sin(breathT * Math.PI / 6); // -1 to 1, 12s cycle
var scale = 0.85 + 0.15 * breathPhase;

var baseR = Math.min(W, H) * 0.12;
var orbR = baseR * scale;

// Orb glow layers
for (var g = 3; g >= 0; g--) {
var glowR = orbR * (1 + g * 0.6);
var grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, glowR);
var alpha = (0.08 - g * 0.015);
if (alpha < 0) alpha = 0;
grad.addColorStop(0, s.orb[0] + hexAlpha(alpha + 0.05));
grad.addColorStop(0.5, s.orb[1] + hexAlpha(alpha));
grad.addColorStop(1, s.orb[2] + '00');
ctx.beginPath();
ctx.arc(cx, cy, glowR, 0, Math.PI * 2);
ctx.fillStyle = grad;
ctx.fill();
}

// Core orb
var coreGrad = ctx.createRadialGradient(cx - orbR * 0.2, cy - orbR * 0.2, orbR * 0.1, cx, cy, orbR);
coreGrad.addColorStop(0, s.orb[1]);
coreGrad.addColorStop(0.7, s.orb[0]);
coreGrad.addColorStop(1, s.orb[2]);
ctx.beginPath();
ctx.arc(cx, cy, orbR, 0, Math.PI * 2);
ctx.fillStyle = coreGrad;
ctx.globalAlpha = 0.9;
ctx.fill();
ctx.globalAlpha = 1;

// Particles
if (!reducedMotion) {
for (var i = 0; i < particles.length; i++) {
var p = particles[i];
// Drift toward/away from orb matching breath
var dx = p.x - cx, dy = p.y - cy;
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
var breathPull = breathPhase * 0.15;
p.x += p.vx + (dx / dist) * breathPull;
p.y += p.vy + (dy / dist) * breathPull;

// Wrap around
if (p.x < 0) p.x = W;
if (p.x > W) p.x = 0;
if (p.y < 0) p.y = H;
if (p.y > H) p.y = 0;

// Twinkle
var twinkle = 0.3 + 0.7 * Math.abs(Math.sin(breathT * 0.4 + p.phase));
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fillStyle = s.particle;
ctx.globalAlpha = twinkle * 0.6;
ctx.fill();
}
ctx.globalAlpha = 1;
} else {
// Reduced motion: static orb only, no particles
}

animId = requestAnimationFrame(draw);
}

function hexAlpha(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initParticles();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Movimento reduzido ativado · Exibindo vista estática<br>Toque em qualquer lugar para sair';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 5000 : 3000);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Células em Divisão - Visual com Afirmações
URL: https://guruka.com/pt/visuals/dividing-cells/
Description: Células crescendo e dividindo-se em um ciclo meditativo. Adicione seu próprio texto de afirmação, armazenado com privacidade no navegador.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"].vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"].vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"].vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"].vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #050a12;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme,.vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"].vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"].vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"].vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"].vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"].vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header.vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"].vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"].vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"].vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"].vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/pt/visuals/" class="vp-back">&larr; Todos os Visuais</a>
<h1 class="vp-title">Células em Divisão</h1>
<p class="vp-desc">Células dividindo-se sem parar.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#22d3ee,#14b8a6)"></div>
<span>Bioluminescente</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#fb923c,#f97316)"></div>
<span>Orgânico</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#94a3b8,#e2e8f0)"></div>
<span>Microscópio</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texto de afirmação (opcional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">predefinições <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="opcional. Insira afirmações aqui. O texto será exibido linha por linha."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Ritmo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Iniciar</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Toque em qualquer lugar para sair</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'dividing-cells';
var currentAffId = null;
var paceLabels = ["Muito lento","Lento","Normal","Rápido","Muito rápido"];
var currentPace = 2;
var schemes = [
{ name:'Bioluminescent', bg:'#050a12',
colors:['#22d3ee','#14b8a6','#06b6d4','#2dd4bf','#67e8f9','#5eead4'] },
{ name:'Organic', bg:'#0a0808',
colors:['#fb923c','#f97316','#fbbf24','#f59e0b','#fdba74','#fcd34d'] },
{ name:'Microscope', bg:'#020508',
colors:['#94a3b8','#cbd5e1','#64748b','#e2e8f0','#475569','#f1f5f9'] }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var maxVisible = 8;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var offCanvas, offCtx, halfW, halfH;

// State
var centerCell = null; // the cell currently growing/dividing at center
var daughters = []; // drifting daughter cells
var cycleState = 'GROWING_AT_CENTER'; // GROWING_AT_CENTER, DIVIDING, STAGING_PAUSE
var pauseTimer = 0;
var nextId = 0;

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Nenhum',text:''},
{title:'Calma e clareza',text:'Minha mente está calma e clara\nEu solto o que não posso controlar\nEstou presente neste momento'},
{title:'Autoconfiança',text:'Acredito em mim e nas minhas capacidades\nSou digno de coisas boas\nFico mais forte a cada dia'},
{title:'Deixar ir',text:'Eu solto o que não me serve mais\nEu me perdoo e perdoo os outros\nAbro espaço para a paz'},
{title:'Gratidão',text:'Sou grato por este momento\nAbundância flui para minha vida\nApreço as coisas simples'},
{title:'Foco e energia',text:'Meu foco é firme e constante\nCanalizo minha energia com propósito\nAvanço com intenção'},
{title:'Sono e descanso',text:'Me dou permissão para descansar\nMeu corpo relaxa a cada respiração\nDeslizo para um sono tranquilo'},
{title:'Parar de fumar',text:'Meus pulmões estão mais limpos a cada dia\nSou mais forte que qualquer desejo\nCada respiração é uma vitória'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Limpar texto') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});


function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
}

function makeOrganelles() {
var orgs = [];
var count = 2 + Math.floor(Math.random() * 2);
for (var i = 0; i < count; i++) {
orgs.push({
dist: 0.3 + Math.random() * 0.35,
angle: Math.random() * Math.PI * 2,
speed: (0.0003 + Math.random() * 0.0004) * (Math.random() < 0.5 ? 1 : -1),
size: 0.06 + Math.random() * 0.04
});
}
return orgs;
}

function spawnCenterCell() {
var W = canvas.width, H = canvas.height;
var minDim = Math.min(W, H);
var targetR = minDim * (0.06 + Math.random() * 0.02);
centerCell = {
id: nextId++,
x: W / 2,
y: H / 2,
r: targetR * 0.15,
targetR: targetR,
divAngle: Math.random() * Math.PI * 2,
colorIdx: Math.floor(Math.random() * 6),
divProgress: 0,
organelles: makeOrganelles(),
opacity: 0.7,
growTimer: 0
};
cycleState = 'GROWING_AT_CENTER';
}

function spawnDaughter(x, y, r, angle, colorIdx, organelles) {
daughters.push({
id: nextId++,
x: x,
y: y,
r: r,
vx: Math.cos(angle) * 0.15,
vy: Math.sin(angle) * 0.15,
phase: Math.random() * Math.PI * 2,
colorIdx: colorIdx,
organelles: organelles,
opacity: 1,
age: 0,
fading: false,
fadeAge: 0
});
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var scaleX = halfW / W, scaleY = halfH / H, scaleR = Math.min(scaleX, scaleY);

var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);

if (reducedMotion) {
ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);
offCtx.globalCompositeOperation = 'lighter';
// Draw a center cell mid-division and a couple daughters
var midR = Math.min(W, H) * 0.07;
var ci = 0;
// Two sub-blobs for figure-8
var sep = midR * 0.6;
var a = Math.PI * 0.25;
for (var bi = 0; bi < 2; bi++) {
var bx = (W / 2 + Math.cos(a) * sep * (bi === 0 ? 1 : -1)) * scaleX;
var by = (H / 2 + Math.sin(a) * sep * (bi === 0 ? 1 : -1)) * scaleY;
var br = midR * 0.7 * scaleR;
var grad = offCtx.createRadialGradient(bx, by, 0, bx, by, br * 1.8);
grad.addColorStop(0, s.colors[ci] + 'ff');
grad.addColorStop(0.5, s.colors[ci] + 'cc');
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(bx, by, br * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
// Two static daughters
var dPositions = [[W * 0.25, H * 0.35], [W * 0.72, H * 0.65]];
for (var di = 0; di < 2; di++) {
var dx = dPositions[di][0] * scaleX, dy = dPositions[di][1] * scaleY;
var dr = midR * 0.5 * scaleR;
var grad = offCtx.createRadialGradient(dx, dy, 0, dx, dy, dr * 1.8);
grad.addColorStop(0, s.colors[2] + 'cc');
grad.addColorStop(0.5, s.colors[2] + '99');
grad.addColorStop(1, s.colors[2] + '00');
offCtx.beginPath();
offCtx.arc(dx, dy, dr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
offCtx.globalCompositeOperation = 'source-over';
// Smoothstep
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) { d[j + 3] = 255; }
else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else { d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255; }
}
offCtx.putImageData(imgData, 0, 0);
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);
// Draw nuclei on the two figure-8 blobs
for (var bi = 0; bi < 2; bi++) {
var nx = W / 2 + Math.cos(a) * sep * (bi === 0 ? 1 : -1);
var ny = H / 2 + Math.sin(a) * sep * (bi === 0 ? 1 : -1);
drawNucleus(nx, ny, midR * 0.7, s, ci, t, true);
}
for (var di = 0; di < 2; di++) {
drawNucleus(dPositions[di][0], dPositions[di][1], midR * 0.5, s, 2, t, true);
}
return;
}

// --- UPDATE LOGIC ---

// Force-fade oldest daughters if over max
while (daughters.length > maxVisible) {
var oldest = daughters[0];
oldest.fading = true;
oldest.opacity -= 0.05;
if (oldest.opacity <= 0) daughters.shift();
else break;
}

// Update daughters
for (var i = daughters.length - 1; i >= 0; i--) {
var dc = daughters[i];
dc.age++;

// Sinusoidal wobble drift
dc.x += dc.vx + Math.sin(t * 0.0002 + dc.phase) * 0.06;
dc.y += dc.vy + Math.cos(t * 0.00015 + dc.phase + 1) * 0.06;
dc.vx *= 0.997;
dc.vy *= 0.997;

// Soft boundary bounce
if (dc.x - dc.r < 0) { dc.x = dc.r; dc.vx = Math.abs(dc.vx) * 0.5; }
if (dc.x + dc.r > W) { dc.x = W - dc.r; dc.vx = -Math.abs(dc.vx) * 0.5; }
if (dc.y - dc.r < 0) { dc.y = dc.r; dc.vy = Math.abs(dc.vy) * 0.5; }
if (dc.y + dc.r > H) { dc.y = H - dc.r; dc.vy = -Math.abs(dc.vy) * 0.5; }

// Start fading after ~18 seconds (1080 frames at 60fps)
if (dc.age > 1080 && !dc.fading) dc.fading = true;
if (dc.fading) {
dc.opacity -= 0.003;
if (dc.opacity <= 0) { daughters.splice(i, 1); continue; }
}
}

// Daughter-daughter repulsion
for (var i = 0; i < daughters.length; i++) {
for (var j = i + 1; j < daughters.length; j++) {
var a = daughters[i], b = daughters[j];
var dx = b.x - a.x, dy = b.y - a.y;
var dist = Math.sqrt(dx * dx + dy * dy) || 1;
var minDist = a.r + b.r + 6;
if (dist < minDist) {
var force = (minDist - dist) * 0.015;
var nx = dx / dist, ny = dy / dist;
a.vx -= nx * force; a.vy -= ny * force;
b.vx += nx * force; b.vy += ny * force;
}
}
}

// Center cell lifecycle
if (cycleState === 'GROWING_AT_CENTER') {
if (!centerCell) spawnCenterCell();
var cc = centerCell;
// Grow from tiny to targetR over ~3s (180 frames)
cc.growTimer++;
var growProgress = Math.min(1, cc.growTimer / 180);
// Ease out
growProgress = 1 - (1 - growProgress) * (1 - growProgress);
cc.r = cc.targetR * (0.15 + 0.85 * growProgress);
// Subtle breathing wobble at center
cc.x = W / 2 + Math.sin(t * 0.001) * 1.5;
cc.y = H / 2 + Math.cos(t * 0.0008) * 1.5;

if (cc.growTimer >= 180) {
cycleState = 'DIVIDING';
cc.divProgress = 0;
}
} else if (cycleState === 'DIVIDING') {
var cc = centerCell;
// divProgress 0→1 over ~12s: 0.0014/frame * 60fps ≈ 0.084/s → ~12s
cc.divProgress += 0.0014;
// Keep at center with wobble
cc.x = W / 2 + Math.sin(t * 0.001) * 1.5;
cc.y = H / 2 + Math.cos(t * 0.0008) * 1.5;

if (cc.divProgress >= 1) {
// Spawn two daughters
var angle = cc.divAngle;
var sepDist = cc.r * 0.9;
var newR = cc.r * 0.55;
spawnDaughter(cc.x + Math.cos(angle) * sepDist, cc.y + Math.sin(angle) * sepDist, newR, angle, cc.colorIdx, makeOrganelles());
spawnDaughter(cc.x - Math.cos(angle) * sepDist, cc.y - Math.sin(angle) * sepDist, newR, angle + Math.PI, cc.colorIdx, makeOrganelles());
centerCell = null;
cycleState = 'STAGING_PAUSE';
pauseTimer = 0;
}
} else if (cycleState === 'STAGING_PAUSE') {
pauseTimer++;
// ~1.5s pause (90 frames)
if (pauseTimer >= 90) {
spawnCenterCell();
}
}

// --- RENDER ---

// 1. Clear offscreen
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// 2. Draw additive radial gradients
offCtx.globalCompositeOperation = 'lighter';

// Draw daughters
for (var i = 0; i < daughters.length; i++) {
var dc = daughters[i];
if (dc.opacity <= 0) continue;
var ci = dc.colorIdx % s.colors.length;
var hx = dc.x * scaleX, hy = dc.y * scaleY, hr = dc.r * scaleR;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(dc.opacity));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(dc.opacity * 0.8));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}

// Draw center cell
if (centerCell) {
var cc = centerCell;
var ci = cc.colorIdx % s.colors.length;

if (cycleState === 'DIVIDING') {
// Two sub-blobs with separation based on divProgress
var dp = cc.divProgress;
var sepFactor;
if (dp < 0.3) {
// Elongation phase: 0 → 0.4 * r
sepFactor = (dp / 0.3) * 0.4;
} else if (dp < 0.7) {
// Figure-8 phase: 0.4 → 1.0 * r
sepFactor = 0.4 + ((dp - 0.3) / 0.4) * 0.6;
} else {
// Pinch & split: 1.0 → 1.8 * r (accelerating)
var splitP = (dp - 0.7) / 0.3;
splitP = splitP * splitP; // accelerate
sepFactor = 1.0 + splitP * 0.8;
}

var sep = cc.r * sepFactor;
var a = cc.divAngle;
var x1 = cc.x + Math.cos(a) * sep * 0.5;
var y1 = cc.y + Math.sin(a) * sep * 0.5;
var x2 = cc.x - Math.cos(a) * sep * 0.5;
var y2 = cc.y - Math.sin(a) * sep * 0.5;

// Sub-blob radius: slightly smaller as they separate
var subR = cc.r * (0.75 - dp * 0.15);

var overlapScale = 0.5 + 0.5 * Math.min(1, sepFactor / 1.2);
for (var bi = 0; bi < 2; bi++) {
var bx = (bi === 0 ? x1 : x2) * scaleX;
var by = (bi === 0 ? y1 : y2) * scaleY;
var br = subR * scaleR;
var grad = offCtx.createRadialGradient(bx, by, 0, bx, by, br * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(cc.opacity * overlapScale));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(cc.opacity * 0.8 * overlapScale));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(bx, by, br * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
} else {
// Single blob
var hx = cc.x * scaleX, hy = cc.y * scaleY, hr = cc.r * scaleR;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + alphaHex(cc.opacity));
grad.addColorStop(0.5, s.colors[ci] + alphaHex(cc.opacity * 0.8));
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
}

offCtx.globalCompositeOperation = 'source-over';

// 3. Smoothstep threshold
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt);
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// 4. Upscale
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

// 5. Draw nuclei and organelles on top at full resolution

// Daughters
for (var i = 0; i < daughters.length; i++) {
var dc = daughters[i];
if (dc.opacity <= 0) continue;
ctx.globalAlpha = dc.opacity;
drawNucleus(dc.x, dc.y, dc.r, s, dc.colorIdx % s.colors.length, t, false);
drawOrganelles(dc.x, dc.y, dc.r, s, dc.colorIdx % s.colors.length, dc.organelles, t, false);
ctx.globalAlpha = 1;
}

// Center cell
if (centerCell) {
var cc = centerCell;
var ci = cc.colorIdx % s.colors.length;
ctx.globalAlpha = cc.opacity;

if (cycleState === 'DIVIDING') {
var dp = cc.divProgress;
var sepFactor;
if (dp < 0.3) sepFactor = (dp / 0.3) * 0.4;
else if (dp < 0.7) sepFactor = 0.4 + ((dp - 0.3) / 0.4) * 0.6;
else { var sp = (dp - 0.7) / 0.3; sp = sp * sp; sepFactor = 1.0 + sp * 0.8; }
var sep = cc.r * sepFactor;
var a = cc.divAngle;
var x1 = cc.x + Math.cos(a) * sep * 0.5;
var y1 = cc.y + Math.sin(a) * sep * 0.5;
var x2 = cc.x - Math.cos(a) * sep * 0.5;
var y2 = cc.y - Math.sin(a) * sep * 0.5;
var subR = cc.r * (0.75 - dp * 0.15);

// Nucleus animation during division
if (dp < 0.25) {
// Elongating single ellipse, draw as stretched nucleus
var nucR = subR * 0.18;
var stretch = 1 + dp * 4;
ctx.save();
ctx.translate(cc.x, cc.y);
ctx.rotate(a);
ctx.scale(stretch, 1 / Math.sqrt(stretch));
drawNucleus(0, 0, subR, s, ci, t, false);
ctx.restore();
} else if (dp < 0.35) {
// Cross-fade from ellipse to two dots
var fadeT = (dp - 0.25) / 0.1;
// Fading single
ctx.globalAlpha = cc.opacity * (1 - fadeT);
drawNucleus(cc.x, cc.y, subR, s, ci, t, false);
// Appearing pair
ctx.globalAlpha = cc.opacity * fadeT;
drawNucleus(x1, y1, subR, s, ci, t, false);
drawNucleus(x2, y2, subR, s, ci, t, false);
ctx.globalAlpha = cc.opacity;
} else {
// Two separate nuclei
drawNucleus(x1, y1, subR, s, ci, t, false);
drawNucleus(x2, y2, subR, s, ci, t, false);
}

// Organelles split between the two halves
var halfOrg = Math.floor(cc.organelles.length / 2);
drawOrganelles(x1, y1, subR, s, ci, cc.organelles.slice(0, halfOrg), t, false);
drawOrganelles(x2, y2, subR, s, ci, cc.organelles.slice(halfOrg), t, false);
} else {
drawNucleus(cc.x, cc.y, cc.r, s, ci, t, false);
drawOrganelles(cc.x, cc.y, cc.r, s, ci, cc.organelles, t, false);
}
ctx.globalAlpha = 1;
}

animId = requestAnimationFrame(draw);
}

function alphaHex(a) {
var v = Math.round(Math.min(1, Math.max(0, a)) * 255);
return (v < 16 ? '0' : '') + v.toString(16);
}

function hexToRgba(hex, a) {
var r = parseInt(hex.slice(1,3), 16);
var g = parseInt(hex.slice(3,5), 16);
var b = parseInt(hex.slice(5,7), 16);
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
}

function drawNucleus(x, y, r, s, ci, t, isStatic) {
var nucR = r * 0.18;
var nucColor = s.colors[(ci + 1) % s.colors.length];
var ng = ctx.createRadialGradient(x, y, 0, x, y, nucR);
ng.addColorStop(0, hexToRgba(nucColor, 0.8));
ng.addColorStop(0.6, hexToRgba(nucColor, 0.35));
ng.addColorStop(1, hexToRgba(nucColor, 0));
ctx.beginPath();
ctx.arc(x, y, nucR, 0, Math.PI * 2);
ctx.fillStyle = ng;
ctx.fill();
}

function drawOrganelles(x, y, r, s, ci, organelles, t, isStatic) {
if (!organelles) return;
for (var k = 0; k < organelles.length; k++) {
var org = organelles[k];
var oAngle = org.angle + (isStatic ? 0 : (t || 0) * org.speed);
var ox = x + Math.cos(oAngle) * r * org.dist;
var oy = y + Math.sin(oAngle) * r * org.dist;
var oSize = r * org.size;
ctx.beginPath();
ctx.arc(ox, oy, oSize, 0, Math.PI * 2);
var orgColor = s.colors[(ci + 2) % s.colors.length];
ctx.fillStyle = hexToRgba(orgColor, 0.4);
ctx.fill();
}
}

function hideNavFooter() {
var header = document.querySelector('header, nav,.site-header, [class*="header"]');
var footer = document.querySelector('footer,.site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav,.site-header, [class*="header"]');
var footer = document.querySelector('footer,.site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
daughters = [];
centerCell = null;
nextId = 0;
spawnCenterCell();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Movimento reduzido ativado · Exibindo vista estática<br>Toque em qualquer lugar para sair';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 5000 : 3000);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Fluxo de Lava - Visual com Afirmações
URL: https://guruka.com/pt/visuals/lava-flow/
Description: Gotas de lava flutuando, fundindo e separando. Adicione seu próprio texto de afirmação, armazenado com privacidade no navegador.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0d0505;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/pt/visuals/" class="vp-back">&larr; Todos os Visuais</a>
<h1 class="vp-title">Fluxo de Lava</h1>
<p class="vp-desc">Gotas fundindo e separando.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#f97316,#ef4444)"></div>
<span>Magma</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#06b6d4,#d946ef)"></div>
<span>Neon</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#059669,#84cc16)"></div>
<span>Esmeralda</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texto de afirmação (opcional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">predefinições <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="opcional. Insira afirmações aqui. O texto será exibido linha por linha."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Ritmo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Iniciar</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Toque em qualquer lugar para sair</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'lava-flow';
var currentAffId = null;
var paceLabels = ["Muito lento","Lento","Normal","Rápido","Muito rápido"];
var currentPace = 2;
var schemes = [
{ name:'Magma', bg:'#0d0505', colors:['#ff4500','#ff6b35','#ffaa00','#ff2200','#ff8c00','#cc3300','#ff5500'] },
{ name:'Neon', bg:'#050510', colors:['#00e5ff','#e040fb','#2979ff','#00bcd4','#d500f9','#448aff','#18ffff'] },
{ name:'Emerald', bg:'#050d08', colors:['#00c853','#1de9b6','#76ff03','#00e676','#64ffda','#69f0ae','#b2ff59'] }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Nenhum',text:''},
{title:'Calma e clareza',text:'Minha mente está calma e clara\nEu solto o que não posso controlar\nEstou presente neste momento'},
{title:'Autoconfiança',text:'Acredito em mim e nas minhas capacidades\nSou digno de coisas boas\nFico mais forte a cada dia'},
{title:'Deixar ir',text:'Eu solto o que não me serve mais\nEu me perdoo e perdoo os outros\nAbro espaço para a paz'},
{title:'Gratidão',text:'Sou grato por este momento\nAbundância flui para minha vida\nApreço as coisas simples'},
{title:'Foco e energia',text:'Meu foco é firme e constante\nCanalizo minha energia com propósito\nAvanço com intenção'},
{title:'Sono e descanso',text:'Me dou permissão para descansar\nMeu corpo relaxa a cada respiração\nDeslizo para um sono tranquilo'},
{title:'Parar de fumar',text:'Meus pulmões estão mais limpos a cada dia\nSou mais forte que qualquer desejo\nCada respiração é uma vitória'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Limpar texto') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});


var blobs = [];
var offCanvas, offCtx, halfW, halfH;

function initBlobs() {
blobs = [];
var W = canvas.width, H = canvas.height;
halfW = Math.floor(W * 0.75);
halfH = Math.floor(H * 0.75);
offCanvas = document.createElement('canvas');
offCanvas.width = halfW;
offCanvas.height = halfH;
offCtx = offCanvas.getContext('2d');
var minDim = Math.min(W, H);
var blobCount = Math.max(9, Math.min(Math.floor(minDim / 100), 15));
for (var i = 0; i < blobCount; i++) {
blobs.push({
x: 0.15 * W + Math.random() * 0.7 * W,
y: Math.random() * H,
vx: (Math.random() - 0.5) * 0.1,
vy: -(0.075 + Math.random() * 0.075),
baseR: minDim * (0.04 + Math.random() * 0.04),
phase: Math.random() * Math.PI * 2
});
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running) initBlobs();
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;

// Clear offscreen
offCtx.fillStyle = s.bg;
offCtx.fillRect(0, 0, halfW, halfH);

// Update and draw blobs on offscreen canvas at half res
for (var i = 0; i < blobs.length; i++) {
var b = blobs[i];
var r = b.baseR + Math.sin(t * 0.0004 + b.phase) * 12;

if (!reducedMotion) {
b.x += b.vx + Math.sin(t * 0.000075 + b.phase) * 0.15;
b.y += b.vy + Math.cos(t * 0.0001 + b.phase) * 0.15;

// Wrap vertically: when blob fully exits top, respawn at bottom
if (b.y + r * 2 < 0) {
b.y = H + r * 2;
b.x = 0.15 * W + Math.random() * 0.7 * W;
}
// Soft horizontal wrap
if (b.x < -r) b.x = W + r;
if (b.x > W + r) b.x = -r;
}

// Draw radial gradient blob on offscreen at 3/4 resolution
var scaleX = halfW / W, scaleY = halfH / H;
var hx = b.x * scaleX, hy = b.y * scaleY, hr = r * Math.min(scaleX, scaleY);
var ci = i % s.colors.length;
var grad = offCtx.createRadialGradient(hx, hy, 0, hx, hy, hr * 1.8);
grad.addColorStop(0, s.colors[ci] + 'ff');
grad.addColorStop(0.5, s.colors[ci] + 'cc');
grad.addColorStop(1, s.colors[ci] + '00');
offCtx.globalCompositeOperation = 'lighter';
offCtx.beginPath();
offCtx.arc(hx, hy, hr * 1.8, 0, Math.PI * 2);
offCtx.fillStyle = grad;
offCtx.fill();
}
offCtx.globalCompositeOperation = 'source-over';

// Apply smoothstep threshold for metaball effect (smooth edges)
var imgData = offCtx.getImageData(0, 0, halfW, halfH);
var d = imgData.data;
var bgR = parseInt(s.bg.slice(1, 3), 16);
var bgG = parseInt(s.bg.slice(3, 5), 16);
var bgB = parseInt(s.bg.slice(5, 7), 16);
for (var j = 0; j < d.length; j += 4) {
var brightness = d[j] + d[j + 1] + d[j + 2];
if (brightness > 220) {
d[j + 3] = 255;
} else if (brightness > 120) {
// Smoothstep interpolation between background and blob color
var tt = (brightness - 120) / 100;
tt = tt * tt * (3 - 2 * tt); // smoothstep
d[j] = Math.round(bgR + (d[j] - bgR) * tt);
d[j + 1] = Math.round(bgG + (d[j + 1] - bgG) * tt);
d[j + 2] = Math.round(bgB + (d[j + 2] - bgB) * tt);
d[j + 3] = 255;
} else {
d[j] = bgR; d[j + 1] = bgG; d[j + 2] = bgB; d[j + 3] = 255;
}
}
offCtx.putImageData(imgData, 0, 0);

// Scale up to main canvas
ctx.imageSmoothingEnabled = true;
ctx.drawImage(offCanvas, 0, 0, halfW, halfH, 0, 0, W, H);

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initBlobs();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Movimento reduzido ativado · Exibindo vista estática<br>Toque em qualquer lugar para sair';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 5000 : 3000);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Campo Estelar - Visual com Afirmações
URL: https://guruka.com/pt/visuals/starfield/
Description: Estrelas cintilando no espaço profundo. Adicione seu próprio texto de afirmação, armazenado com privacidade no navegador.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #020510;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/pt/visuals/" class="vp-back">&larr; Todos os Visuais</a>
<h1 class="vp-title">Campo Estelar</h1>
<p class="vp-desc">Estrelas cintilando no espaço profundo.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#1e293b,#475569)"></div>
<span>Espaço Profundo</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#4c1d95,#a855f7)"></div>
<span>Nebulosa</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#78350f,#f59e0b)"></div>
<span>Cosmos Quente</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texto de afirmação (opcional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">predefinições <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="opcional. Insira afirmações aqui. O texto será exibido linha por linha."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Ritmo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Iniciar</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Toque em qualquer lugar para sair</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'starfield';
var currentAffId = null;
var paceLabels = ["Muito lento","Lento","Normal","Rápido","Muito rápido"];
var currentPace = 2;
var schemes = [
{ name:'Deep Space', bg:'#020510', starColor:'rgba(200,220,255,', glowColor:'rgba(80,100,180,0.015)', shootColor:'rgba(200,220,255,' },
{ name:'Nebula', bg:'#0a0515', starColor:'rgba(220,200,255,', glowColor:'rgba(160,80,200,0.03)', shootColor:'rgba(200,160,255,' },
{ name:'Warm Cosmos', bg:'#0a0805', starColor:'rgba(255,220,160,', glowColor:'rgba(180,120,60,0.015)', shootColor:'rgba(255,200,100,' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Nenhum',text:''},
{title:'Calma e clareza',text:'Minha mente está calma e clara\nEu solto o que não posso controlar\nEstou presente neste momento'},
{title:'Autoconfiança',text:'Acredito em mim e nas minhas capacidades\nSou digno de coisas boas\nFico mais forte a cada dia'},
{title:'Deixar ir',text:'Eu solto o que não me serve mais\nEu me perdoo e perdoo os outros\nAbro espaço para a paz'},
{title:'Gratidão',text:'Sou grato por este momento\nAbundância flui para minha vida\nApreço as coisas simples'},
{title:'Foco e energia',text:'Meu foco é firme e constante\nCanalizo minha energia com propósito\nAvanço com intenção'},
{title:'Sono e descanso',text:'Me dou permissão para descansar\nMeu corpo relaxa a cada respiração\nDeslizo para um sono tranquilo'},
{title:'Parar de fumar',text:'Meus pulmões estão mais limpos a cada dia\nSou mais forte que qualquer desejo\nCada respiração é uma vitória'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Limpar texto') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});


var starsBack = [], starsMid = [], starsFront = [];
var shootingStars = [];
var lastShootTime = 0;

function initStars() {
starsBack = []; starsMid = []; starsFront = [];
shootingStars = [];
var W = canvas.width, H = canvas.height;
for (var i = 0; i < 200; i++) {
starsBack.push({ x: Math.random() * W, y: Math.random() * H, size: 0.5 + Math.random() * 1, baseAlpha: 0.3 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
for (var i = 0; i < 100; i++) {
starsMid.push({ x: Math.random() * W, y: Math.random() * H, size: 1 + Math.random() * 1.5, baseAlpha: 0.4 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
for (var i = 0; i < 50; i++) {
starsFront.push({ x: Math.random() * W, y: Math.random() * H, size: 1.5 + Math.random() * 2, baseAlpha: 0.6 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2 });
}
}

function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (running) initStars();
}

function drawStarLayer(stars, speed, t, s, W, H) {
for (var i = 0; i < stars.length; i++) {
var st = stars[i];
var twinkle = st.baseAlpha * (0.5 + 0.5 * Math.sin(t * 0.001 + st.phase));
// Glow for larger stars
if (st.size > 2) {
ctx.beginPath();
ctx.arc(st.x, st.y, st.size * 3, 0, Math.PI * 2);
ctx.fillStyle = s.starColor + (twinkle * 0.15).toFixed(3) + ')';
ctx.fill();
}
ctx.beginPath();
ctx.arc(st.x, st.y, st.size, 0, Math.PI * 2);
ctx.fillStyle = s.starColor + twinkle.toFixed(3) + ')';
ctx.fill();
}
}

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;

ctx.fillStyle = s.bg;
ctx.fillRect(0, 0, W, H);

// Subtle center glow
var glow = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.max(W, H) * 0.5);
glow.addColorStop(0, s.glowColor);
glow.addColorStop(1, 'transparent');
ctx.fillStyle = glow;
ctx.fillRect(0, 0, W, H);

// Draw star layers with parallax speeds
drawStarLayer(starsBack, 0.025, t, s, W, H);
drawStarLayer(starsMid, 0.06, t, s, W, H);
drawStarLayer(starsFront, 0.12, t, s, W, H);

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
initStars();
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Movimento reduzido ativado · Exibindo vista estática<br>Toque em qualquer lugar para sair';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 5000 : 3000);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

### Mandala - Visual com Afirmações
URL: https://guruka.com/pt/visuals/mandala/
Description: Geometria sagrada em rotação lenta com simetria evolutiva. Adicione seu próprio texto de afirmação, armazenado com privacidade no navegador.

<style>
#visual-page {
max-width: 40rem;
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
text-align: center;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.9375rem;
color: var(--color-text-secondary, #4b5b6d);
text-decoration: none;
margin-bottom: 1.5rem;
}
[data-theme="dark"] .vp-back {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-back:hover { color: var(--color-primary, #0f9072); }
.vp-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #1a2332);
}
[data-theme="dark"] .vp-title {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-desc {
color: var(--color-text-secondary, #4b5b6d);
font-size: 1rem;
max-width: 28rem;
margin: 0 auto 0.25rem;
line-height: 1.6;
}
[data-theme="dark"] .vp-desc {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-schemes {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.vp-scheme {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
cursor: pointer;
background: none;
border: 3px solid transparent;
border-radius: 1rem;
padding: 0.5rem 0.75rem;
transition: border-color 0.2s;
}
.vp-scheme[aria-pressed="true"] {
border-color: var(--color-primary, #0f9072);
}
.vp-scheme-dot {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.vp-scheme span {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
}
[data-theme="dark"] .vp-scheme span {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--color-primary, #0f9072);
color: #fff;
border: none;
border-radius: 0.75rem;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
min-height: 56px;
}
.vp-start:hover { background: #0d7d63; }
#vp-fullscreen {
position: fixed;
inset: 0;
z-index: 9999;
background: #0a0808;
}
#vp-canvas {
display: block;
width: 100%;
height: 100%;
}
#vp-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 0.875rem;
pointer-events: none;
transition: opacity 1s;
}
@media (prefers-reduced-motion: reduce) {
.vp-scheme, .vp-start { transition: none; }
}
.vp-affirmation {
margin-bottom: 1.25rem;
text-align: left;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-aff-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-aff-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-aff-textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
font-size: 1rem;
font-family: inherit;
resize: vertical;
background: var(--color-bg-primary, #fff);
color: var(--color-text-primary, #1a2332);
box-sizing: border-box;
}
[data-theme="dark"] .vp-aff-textarea {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-pace {
margin-bottom: 1.25rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.vp-pace-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.5rem;
}
[data-theme="dark"] .vp-pace-label {
color: var(--color-dark-text-secondary, #cbd5e1);
}
.vp-pace-label span {
font-weight: 400;
font-size: 0.8125rem;
}
.vp-pace-slider {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--color-border, #dfe4ea);
border-radius: 3px;
outline: none;
cursor: pointer;
}
[data-theme="dark"] .vp-pace-slider {
background: var(--color-dark-border, #334155);
}
.vp-pace-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.vp-pace-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-primary, #0f9072);
cursor: pointer;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .vp-aff-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
}
.vp-aff-header .vp-aff-label {
margin-bottom: 0;
}
.vp-aff-presets {
position: relative;
display: inline-block;
}
.vp-aff-presets-btn {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-primary, #0f9072);
cursor: pointer;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.vp-aff-presets-btn:hover {
color: var(--color-primary-hover, #0d7d63);
}
.vp-aff-presets-btn svg {
width: 12px;
height: 12px;
transition: transform 0.2s;
}
.vp-aff-presets-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.vp-aff-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + 0.375rem);
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border, #dfe4ea);
border-radius: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
min-width: 15rem;
z-index: 100;
padding: 0.375rem;
max-height: 20rem;
overflow-y: auto;
}
[data-theme="dark"] .vp-aff-menu {
background: var(--color-dark-bg-primary, #0f1729);
border-color: var(--color-dark-border, #334155);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vp-aff-menu.vp-aff-menu-open {
display: block;
}
.vp-aff-menu-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
color: var(--color-text-primary, #1a2332);
font-size: 0.875rem;
line-height: 1.4;
}
[data-theme="dark"] .vp-aff-menu-item {
color: var(--color-dark-text-primary, #f9fafb);
}
.vp-aff-menu-item:hover {
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .vp-aff-menu-item:hover {
background: rgba(255,255,255,0.06);
}
.vp-aff-menu-item-title {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-secondary, #4b5b6d);
margin-bottom: 0.125rem;
}
[data-theme="dark"] .vp-aff-menu-item-title {
color: var(--color-dark-text-secondary, #cbd5e1);
}
</style>

<div id="visual-page">
<div id="vp-intro">
<a href="/pt/visuals/" class="vp-back">&larr; Todos os Visuais</a>
<h1 class="vp-title">Mandala</h1>
<p class="vp-desc">Geometria sagrada em rotação.</p>
<div class="vp-schemes">
<button class="vp-scheme" data-scheme="0" aria-pressed="true">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#eab308,#f59e0b)"></div>
<span>Dourado</span>
</button>
<button class="vp-scheme" data-scheme="1" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#6366f1,#a855f7)"></div>
<span>Celestial</span>
</button>
<button class="vp-scheme" data-scheme="2" aria-pressed="false">
<div class="vp-scheme-dot" style="background:linear-gradient(135deg,#14b8a6,#10b981)"></div>
<span>Jade</span>
</button>
</div>
<div class="vp-affirmation">
<div class="vp-aff-header"><label for="vp-aff-input" class="vp-aff-label">Texto de afirmação (opcional)</label><div class="vp-aff-presets"><button type="button" class="vp-aff-presets-btn" id="vp-aff-presets-btn" aria-expanded="false">predefinições <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button><div class="vp-aff-menu" id="vp-aff-menu"></div></div></div>
<textarea id="vp-aff-input" class="vp-aff-textarea" rows="2" maxlength="300" placeholder="opcional. Insira afirmações aqui. O texto será exibido linha por linha."></textarea>
</div>
<div class="vp-pace">
<div class="vp-pace-label">Ritmo <span id="vp-pace-val">Normal</span></div>
<input type="range" id="vp-pace-input" class="vp-pace-slider" min="0" max="4" step="1" value="2">
</div>
<button class="vp-start" id="vp-start-btn">Iniciar</button>
</div>
<div id="vp-fullscreen" style="display:none">
<canvas id="vp-canvas"></canvas>
<div id="vp-hint">Toque em qualquer lugar para sair</div>
</div>
</div>

<script>
(function() {
var VISUAL_SLUG = 'mandala';
var currentAffId = null;
var paceLabels = ["Muito lento","Lento","Normal","Rápido","Muito rápido"];
var currentPace = 2;
var schemes = [
{ name:'Golden', bg:'#0a0808', stroke:'#d4a017', strokeAlt:'#f5c842', dot:'#fff8dc', bgFill:'rgba(10,8,8,' },
{ name:'Celestial', bg:'#05050f', stroke:'#818cf8', strokeAlt:'#c084fc', dot:'#e0e7ff', bgFill:'rgba(5,5,15,' },
{ name:'Jade', bg:'#050a08', stroke:'#2dd4bf', strokeAlt:'#34d399', dot:'#d1fae5', bgFill:'rgba(5,10,8,' }
];
var currentScheme = 0;
var running = false;
var animId = null;
var wakeLock = null;
var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

var intro = document.getElementById('vp-intro');
var fs = document.getElementById('vp-fullscreen');
var canvas = document.getElementById('vp-canvas');
var ctx = canvas.getContext('2d');
var hint = document.getElementById('vp-hint');
var startBtn = document.getElementById('vp-start-btn');

var btns = document.querySelectorAll('.vp-scheme');
btns.forEach(function(b) {
b.addEventListener('click', function() {
btns.forEach(function(x) { x.setAttribute('aria-pressed', 'false'); });
b.setAttribute('aria-pressed', 'true');
currentScheme = parseInt(b.getAttribute('data-scheme'));
});
});

// Pace slider
var paceInput = document.getElementById('vp-pace-input');
var paceVal = document.getElementById('vp-pace-val');
paceInput.addEventListener('input', function() {
currentPace = parseInt(paceInput.value);
paceVal.textContent = paceLabels[currentPace];
});

// Preset examples dropdown
var affPresets = [
{title:'Nenhum',text:''},
{title:'Calma e clareza',text:'Minha mente está calma e clara\nEu solto o que não posso controlar\nEstou presente neste momento'},
{title:'Autoconfiança',text:'Acredito em mim e nas minhas capacidades\nSou digno de coisas boas\nFico mais forte a cada dia'},
{title:'Deixar ir',text:'Eu solto o que não me serve mais\nEu me perdoo e perdoo os outros\nAbro espaço para a paz'},
{title:'Gratidão',text:'Sou grato por este momento\nAbundância flui para minha vida\nApreço as coisas simples'},
{title:'Foco e energia',text:'Meu foco é firme e constante\nCanalizo minha energia com propósito\nAvanço com intenção'},
{title:'Sono e descanso',text:'Me dou permissão para descansar\nMeu corpo relaxa a cada respiração\nDeslizo para um sono tranquilo'}
];
var presetsBtn = document.getElementById('vp-aff-presets-btn');
var presetsMenu = document.getElementById('vp-aff-menu');
var menuHtml = '';
for (var pi = 0; pi < affPresets.length; pi++) {
menuHtml += '<button class="vp-aff-menu-item" data-preset="' + pi + '"><div class="vp-aff-menu-item-title">' + affPresets[pi].title + '</div>' + (affPresets[pi].text ? affPresets[pi].text.split('\n')[0] + '…' : 'Limpar texto') + '</button>';
}
presetsMenu.innerHTML = menuHtml;
presetsBtn.addEventListener('click', function(e) {
e.stopPropagation();
var open = presetsMenu.classList.toggle('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
});
presetsMenu.addEventListener('click', function(e) {
var item = e.target.closest('[data-preset]');
if (!item) return;
var idx = parseInt(item.getAttribute('data-preset'));
document.getElementById('vp-aff-input').value = affPresets[idx].text;
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});
document.addEventListener('click', function() {
presetsMenu.classList.remove('vp-aff-menu-open');
presetsBtn.setAttribute('aria-expanded', 'false');
});


function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

var rings = [
{ radius: 0.08, folds: 12, speed: 0.00008, dir: 1, type: 'dots' },
{ radius: 0.18, folds: 8, speed: 0.00006, dir: -1, type: 'petals' },
{ radius: 0.30, folds: 12, speed: 0.00004, dir: 1, type: 'lines' },
{ radius: 0.42, folds: 8, speed: 0.00007, dir: -1, type: 'petals' },
{ radius: 0.55, folds: 16, speed: 0.00003, dir: 1, type: 'dots' },
{ radius: 0.68, folds: 12, speed: 0.00005, dir: -1, type: 'lines' },
{title:'Parar de fumar',text:'Meus pulmões estão mais limpos a cada dia\nSou mais forte que qualquer desejo\nCada respiração é uma vitória'}
];

function draw(t) {
if (!running) return;
var s = schemes[currentScheme];
var W = canvas.width, H = canvas.height;
var cx = W / 2, cy = H / 2;
var maxR = Math.min(W, H) * 0.65;

// Trail effect
ctx.fillStyle = s.bgFill + '0.04)';
ctx.fillRect(0, 0, W, H);

var baseAngle = reducedMotion ? 0 : t * 0.00005;

for (var ri = 0; ri < rings.length; ri++) {
var ring = rings[ri];
var ringR = maxR * ring.radius;
var folds = ring.folds;
var angle = reducedMotion ? 0 : baseAngle * ring.dir + t * ring.speed * ring.dir;
var breathe = reducedMotion ? 1 : (1 + 0.15 * Math.sin(t * 0.0005 + ri * 1.2));
var alphaFade = 1 - ri * 0.10;

ctx.save();
ctx.translate(cx, cy);
ctx.rotate(angle);

for (var f = 0; f < folds; f++) {
var fAngle = (f / folds) * Math.PI * 2;
ctx.save();
ctx.rotate(fAngle);

if (ring.type === 'dots') {
var dotR = (3 + Math.sin(t * 0.0008 + ri + f) * 2) * breathe;
ctx.shadowColor = s.stroke;
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.arc(ringR * breathe, 0, dotR, 0, Math.PI * 2);
ctx.fillStyle = s.dot;
ctx.globalAlpha = alphaFade * 0.7;
ctx.fill();
ctx.shadowBlur = 0;
} else if (ring.type === 'petals') {
var petalLen = (20 + Math.sin(t * 0.0006 + ri * 2) * 10) * breathe;
var petalW = (8 + Math.sin(t * 0.0004 + f) * 3) * breathe;
ctx.shadowColor = s.stroke;
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.moveTo(ringR * breathe - petalLen * 0.3, 0);
ctx.quadraticCurveTo(ringR * breathe, -petalW, ringR * breathe + petalLen * 0.7, 0);
ctx.quadraticCurveTo(ringR * breathe, petalW, ringR * breathe - petalLen * 0.3, 0);
ctx.strokeStyle = s.stroke;
ctx.lineWidth = 1.2;
ctx.globalAlpha = alphaFade * 0.6;
ctx.stroke();
ctx.shadowBlur = 0;
} else if (ring.type === 'lines') {
var lineLen = (15 + Math.sin(t * 0.0007 + f * 0.5) * 8) * breathe;
ctx.shadowColor = s.strokeAlt;
ctx.shadowBlur = 3;
ctx.beginPath();
ctx.moveTo(ringR * breathe - lineLen, 0);
ctx.lineTo(ringR * breathe + lineLen, 0);
ctx.strokeStyle = s.strokeAlt;
ctx.lineWidth = 1;
ctx.globalAlpha = alphaFade * 0.4;
ctx.stroke();
// End dots
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.arc(ringR * breathe - lineLen, 0, 1.5, 0, Math.PI * 2);
ctx.arc(ringR * breathe + lineLen, 0, 1.5, 0, Math.PI * 2);
ctx.fillStyle = s.strokeAlt;
ctx.globalAlpha = alphaFade * 0.5;
ctx.fill();
ctx.shadowBlur = 0;
}

ctx.restore();
}

ctx.restore();
}

// Center dot
ctx.beginPath();
ctx.arc(cx, cy, 4, 0, Math.PI * 2);
ctx.fillStyle = s.dot;
ctx.globalAlpha = 0.8;
ctx.fill();
ctx.globalAlpha = 1;

animId = requestAnimationFrame(draw);
}

function hideNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = 'none';
if (footer) footer.style.display = 'none';
document.body.style.overflow = 'hidden';
}

function showNavFooter() {
var header = document.querySelector('header, nav, .site-header, [class*="header"]');
var footer = document.querySelector('footer, .site-footer, [class*="footer"]');
if (header) header.style.display = '';
if (footer) footer.style.display = '';
document.body.style.overflow = '';
}

async function acquireWakeLock() {
try {
if ('wakeLock' in navigator) {
wakeLock = await navigator.wakeLock.request('screen');
}
} catch(e) {}
}

function releaseWakeLock() {
if (wakeLock) {
wakeLock.release().catch(function(){});
wakeLock = null;
}
}

function start() {
running = true;
intro.style.display = 'none';
fs.style.display = 'block';
resize();
// Clear canvas fully before starting
ctx.fillStyle = schemes[currentScheme].bg;
ctx.fillRect(0, 0, canvas.width, canvas.height);
hideNavFooter();
acquireWakeLock();
var affText = document.getElementById('vp-aff-input').value.trim();
if (affText && window.GK && GK.Affirmations) {
var meta = GK.Affirmations.VISUAL_META[VISUAL_SLUG];
GK.Affirmations.createOverlay(fs, affText, meta.pulseDuration, currentPace);
GK.Affirmations.save({
id: currentAffId || GK.Affirmations.generateId(),
text: affText, visual: VISUAL_SLUG, scheme: currentScheme, pace: currentPace,
createdAt: Date.now()
});
}
if (reducedMotion) {
hint.innerHTML = 'Movimento reduzido ativado · Exibindo vista estática<br>Toque em qualquer lugar para sair';
}
hint.style.opacity = '1';
setTimeout(function() { hint.style.opacity = '0'; }, reducedMotion ? 5000 : 3000);
animId = requestAnimationFrame(draw);
}

function stop() {
running = false;
if (animId) { cancelAnimationFrame(animId); animId = null; }
if (window.GK && GK.Affirmations) GK.Affirmations.destroyOverlay();
fs.style.display = 'none';
intro.style.display = '';
showNavFooter();
releaseWakeLock();
}

startBtn.addEventListener('click', start);
fs.addEventListener('click', stop);
window.addEventListener('resize', function() { if (running) resize(); });
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && running) stop();
});
// Query param handling for affirmation play/edit
if (window.GK && GK.Affirmations) {
GK.Affirmations._loadFont();
var params = new URLSearchParams(window.location.search);
var affParam = params.get('aff');
var editParam = params.get('edit');
var affId = affParam || editParam;
if (affId) {
var found = GK.Affirmations.getById(affId);
if (found) {
currentAffId = found.id;
document.getElementById('vp-aff-input').value = found.text;
currentScheme = found.scheme || 0;
currentPace = found.pace != null ? found.pace : 2;
paceInput.value = currentPace;
paceVal.textContent = paceLabels[currentPace];
btns.forEach(function(b) {
b.setAttribute('aria-pressed', b.getAttribute('data-scheme') == String(currentScheme) ? 'true' : 'false');
});
if (affParam) start();
}
}
}
})();
</script>

## Articles

### Games Update: Number Crunch Fixes and Answer History
URL: https://guruka.com/en/blog/games-fixes-answer-history/
Description: Short changelog for the current GURUKA version: Number Crunch fixes, finish screen dialog fixes, answer history in the finish dialog, and minor fixes.
Published: 2026-05-11
Updated: 2026-05-11
Keywords: GURUKA changelog, GURUKA games, Number Crunch, answer history, brain games

<p>We've shipped a small games update focused on fixes and clearer end-of-game feedback.</p>

<h2>What's changed</h2>
<ul>
<li><strong>Games:</strong> Fixed reported issues in <a href="/games/number-crunch/">Number Crunch</a>. Thanks for the bug report.</li>
<li><strong>Games:</strong> Fixed an issue with the finish screen dialog.</li>
<li><strong>Games:</strong> The finish dialog now shows the history of answers from the game. This history is stored only in browser memory and is cleared when the page reloads.</li>
<li><strong>General:</strong> Minor fixes.</li>
</ul>

<p>No account is required, and the answer history is not saved permanently by this change.</p>

### Use your own affirmations with visual meditations
URL: https://guruka.com/en/blog/use-your-own-affirmations-with-visual-meditations/
Description: We've added affirmations support into visuals section. Now you can use your custom affirmations with visuals (use from presets and edit to customize). Your custom affirmations are private by design and stored only on your device, never shared with others.
Published: 2026-03-28
Updated: 2026-03-28
Keywords: GURUKA affirmations, visual meditation, custom affirmations, private affirmations, meditation visuals

We've added affirmations support into visuals section. Now you can use your custom affirmations with visuals (use from presets and edit to customize). Your custom affirmations are private by design and stored only on your device, never shared with others.

### Guruka vs Balance: Free Meditation Without the Expiring Trial
URL: https://guruka.com/en/compare/guruka-vs-balance/
Description: Compare Guruka and Balance side by side. Balance offers a free first year then charges $70/year. Guruka is free forever with no account needed.
Published: 2026-03-17
Updated: 2026-03-17
Keywords: guruka vs balance, balance vs guruka, free meditation app, balance app alternative, personalized meditation free, meditation without subscription

## Guruka vs Balance

Balance is a meditation app that uses AI-driven personalization to tailor sessions to your experience level and goals. Each day it asks check-in questions and adapts its guided meditations based on your answers. The app covers focus, sleep, stress reduction, and other categories, and it's genuinely well-designed. Balance gained popularity by offering a free first year, but once that year ends, the subscription kicks in at $69.99/year. Many users discover they've built a meditation habit that now costs money to maintain. [Guruka](/) offers guided meditation that's free forever, with no account required and no expiration date.

## Feature Comparison

| Feature | Balance | Guruka |
|---|---|---|
| **Price** | Free first year, then $69.99/year | Free |
| **Free content** | Full access for 1 year only | Full access, always |
| **Account required** | Yes | No |
| **Credit card needed** | No (for first year) | No |
| **Ads** | No | No intrusive ads |
| **Platforms** | iOS, Android app | Any web browser |
| **Offline access** | Yes | Yes |
| **Time to start** | Download → signup → onboarding quiz | Open page → meditate |
| **Privacy** | Collects account, usage, and personalization data | No personal data collected |
| **Brain games** | No | Yes |
| **Affirmations** | No | Yes, [editable, 100% private](/visuals/) (stored in your browser only) |
| **AI personalization** | Yes (adapts daily) | No (choose by category) |
| **Daily check-ins** | Yes (drives session selection) | No |
| **Lock-in after trial** | Yes (habit built on paid platform) | No (free forever) |

## What Balance Does Well

Balance's personalization is not a gimmick. The app genuinely adapts to how you're feeling each day. The check-in questions are quick, and the resulting sessions feel more relevant than picking randomly from a library. Over time, the app learns your preferences and adjusts difficulty, duration, and focus areas. For beginners especially, this removes the overwhelming "what should I do today?" problem.

The app design itself is excellent. Balance is one of the most polished meditation apps on the market, clean interface, smooth animations, and thoughtful touches throughout. The audio quality is high, and the session pacing feels natural rather than rushed or artificially slow.

The free first year is genuinely generous compared to most competitors that offer 7-day trials. A full year gives you enough time to build a real meditation practice and explore everything the app offers. The problem isn't the free year, it's what happens after.

## What Balance Charges For

After the free first year, Balance costs $69.99/year. There's no permanently free tier, once the trial ends, you either pay or lose access to everything, including the personalized sessions you've grown accustomed to. This creates a lock-in effect: you've spent a year building a meditation habit inside Balance, and now leaving means starting over somewhere else. Some users feel this was the strategy all along, get people dependent on the personalization, then charge them to keep it.

## Why Guruka Is the Better Choice for Most People

- **No account required (start instantly**) no email, no signup, no credit card, no onboarding. Open the page and you're meditating
- **Completely free**, no subscription, no premium tier, no hidden costs
- **No intrusive ads**, your meditation session won't be interrupted
- **Works on any device**, phone, tablet, or computer, no app download needed
- **Works offline**, meditate anywhere, even without internet
- **Your data stays private**, no account means no personal data collected
- **Brain training games**, [focus and memory games](/games/) to complement your meditation practice
- **Multiple meditation categories**, [calm & stress relief](/meditate/calm-and-stress-relief/), [sleep](/meditate/sleep-and-wind-down/), [focus](/meditate/focus-and-clarity/), and more

## The Bottom Line

Balance is a well-made app with real personalization, no argument there. But building a meditation habit on a platform that charges $70/year after the trial means your practice has an expiration date unless you keep paying. Guruka doesn't work that way. No signup, no app, no credit card, just open [Guruka's meditation page](/meditate/) and meditate. It's free today, free next year, and free the year after that. Your meditation practice shouldn't come with a renewal notice.

### Guruka vs Calm: Free Meditation Without the Paywall
URL: https://guruka.com/en/compare/guruka-vs-calm/
Description: Compare Guruka and Calm side by side. See how a free, no-account meditation tool stacks up against Calm's $70/year subscription.
Published: 2026-03-17
Updated: 2026-03-17
Keywords: guruka vs calm, calm vs guruka, free meditation app, calm alternative, free calm alternative, meditation without subscription

## Guruka vs Calm

Calm is one of the most popular meditation and sleep apps, known for its Sleep Stories narrated by celebrities like Matthew McConaughey and Harry Styles. It costs $69.99/year and locks the vast majority of its content behind that subscription. Guruka is a free, browser-based meditation tool, no account, no download, no payment. You open the page and start meditating.

## Feature Comparison

| Feature | Calm | Guruka |
|---|---|---|
| **Price** | $69.99/year | Free |
| **Free content** | 1 Daily Calm session + few nature sounds | Full access to everything |
| **Account required** | Yes | No |
| **Credit card needed** | Yes (for free trial) | No |
| **Ads** | Upgrade prompts on free tier | No intrusive ads |
| **Platforms** | iOS, Android app | Any web browser, phone, tablet, computer |
| **Offline access** | Premium only | Yes |
| **Time to start** | Download → signup → onboarding | Open page → meditate |
| **Privacy** | Account with email, usage tracking | No account, no personal data collected |
| **Brain games** | No | Yes, [focus and memory games](/games/) |
| **Affirmations** | No | Yes, [editable, 100% private](/visuals/) (stored in your browser only) |
| **Sleep Stories** | Yes, celebrity narrated (premium) | No |
| **Sleep meditation** | Premium only | Yes, [sleep & wind down](/meditate/sleep-and-wind-down/) |
| **Nature sounds** | Limited free, full library premium | Background sounds included |

## What Calm Does Well

Calm's Sleep Stories are genuinely unique. Having well-known voices narrate bedtime stories designed to help you fall asleep is a creative idea, and it works. The production quality is high, and there's nothing quite like it on any other platform.

The Daily Calm feature (a fresh 10-minute guided meditation each day) gives users a reason to come back. It's a smart engagement mechanism that also serves as a solid daily practice anchor. The app's visual design is polished, with nature scenes and ambient sounds that create a relaxing atmosphere from the moment you open it.

Calm has also expanded into workplace wellness and mental health content beyond meditation, including masterclasses on topics like gratitude and mindful eating. If you're looking for a broad wellness platform rather than just meditation, Calm covers more ground.

## What Calm Charges For

Calm's free tier is one of the most restrictive among meditation apps. You get one Daily Calm session per day and a handful of nature sounds. That's essentially the entire free offering, Sleep Stories, the full meditation library, focus music, masterclasses, and everything else requires the $69.99/year subscription.

The free trial requires a credit card and auto-renews. Calm has a Trustpilot score of approximately 1.6 out of 5, with the majority of negative reviews citing unexpected charges after the trial period and difficulty canceling subscriptions.

## Why Guruka Is the Better Choice for Most People

- **No account required (start instantly**) no email, no signup, no credit card, no onboarding. Open the page and you're meditating
- **Completely free**, no subscription, no premium tier, no hidden costs
- **No intrusive ads**, your meditation session won't be interrupted
- **Works on any device**, phone, tablet, or computer, no app download needed
- **Works offline**, meditate anywhere, even without internet
- **Your data stays private**, no account means no personal data collected
- **Brain training games**, [focus and memory games](/games/) to complement your meditation practice
- **Multiple meditation categories**, [calm & stress relief](/meditate/calm-and-stress-relief/), [sleep](/meditate/sleep-and-wind-down/), [focus](/meditate/focus-and-clarity/), and more

## The Bottom Line

Calm is a premium product with premium production values, and its Sleep Stories are one of a kind. But if what you actually need is meditation (guided sessions to help you relax, sleep, or focus) you don't need to pay $70/year for that. [Guruka offers it for free](/meditate/). No signup, no app, no credit card. Just open the page and start.

### Guruka vs Headspace: Free Meditation Without the Subscription
URL: https://guruka.com/en/compare/guruka-vs-headspace/
Description: Compare Guruka and Headspace side by side. See why a free, no-signup meditation tool might be all you need.
Published: 2026-03-17
Updated: 2026-03-17
Keywords: guruka vs headspace, headspace vs guruka, free meditation app, headspace alternative, free headspace alternative, meditation without subscription

## Guruka vs Headspace

Headspace is one of the most recognized names in meditation. Founded by Andy Puddicombe, a former Buddhist monk, it offers structured courses, animations, and a polished onboarding experience. It costs $69.99/year after a free trial that requires a credit card. Guruka is a free, browser-based meditation tool that requires no account, no download, and no payment, you open the page and start meditating.

## Feature Comparison

| Feature | Headspace | Guruka |
|---|---|---|
| **Price** | $69.99/year | Free |
| **Free content** | ~10 introductory sessions | Full access to everything |
| **Account required** | Yes | No |
| **Credit card needed** | Yes (for free trial) | No |
| **Ads** | Upgrade prompts on free tier | No intrusive ads |
| **Platforms** | iOS, Android app | Any web browser, phone, tablet, computer |
| **Offline access** | Premium only | Yes |
| **Time to start** | Download → signup → onboarding | Open page → meditate |
| **Privacy** | Account with email, usage tracking | No account, no personal data collected |
| **Brain games** | No | Yes, [focus and memory games](/games/) |
| **Affirmations** | No | Yes, [editable, 100% private](/visuals/) (stored in your browser only) |
| **Structured courses** | Yes (Basics, Pro, etc.) | No, category-based sessions |
| **Animations & videos** | Yes | No |
| **Sleep content** | Premium only | Yes, [sleep & wind down](/meditate/sleep-and-wind-down/) |

## What Headspace Does Well

Headspace's greatest strength is its structured approach to teaching meditation. The Basics course walks beginners through 30 days of foundational practice, building skills progressively. Andy Puddicombe's voice and teaching style are genuinely calming, and the short animated videos that explain meditation concepts are some of the best educational content in the space.

The app's design is clean and friendly. It doesn't feel clinical or overly spiritual, it feels approachable. For people who have never meditated before, Headspace does an excellent job of making the practice feel accessible and non-intimidating.

Headspace also offers themed packs for specific goals like stress, focus, and sleep, each structured as multi-session courses. If you're someone who thrives on structured programs and progressive learning, Headspace delivers that well.

## What Headspace Charges For

Headspace locks roughly 95% of its content behind its $69.99/year subscription. The free tier includes about 10 introductory sessions and a few rotating daily meditations. Sleep content, focus music, full courses, and move exercises are all premium-only.

The free trial requires a credit card upfront and auto-renews if you don't cancel. This is a common source of frustration, Headspace has a Trustpilot score of approximately 1.8 out of 5, with many complaints about unexpected charges and difficult cancellation.

## Why Guruka Is the Better Choice for Most People

- **No account required (start instantly**) no email, no signup, no credit card, no onboarding. Open the page and you're meditating
- **Completely free**, no subscription, no premium tier, no hidden costs
- **No intrusive ads**, your meditation session won't be interrupted
- **Works on any device**, phone, tablet, or computer, no app download needed
- **Works offline**, meditate anywhere, even without internet
- **Your data stays private**, no account means no personal data collected
- **Brain training games**, [focus and memory games](/games/) to complement your meditation practice
- **Multiple meditation categories**, [calm & stress relief](/meditate/calm-and-stress-relief/), [sleep](/meditate/sleep-and-wind-down/), [focus](/meditate/focus-and-clarity/), and more

## The Bottom Line

Headspace is a well-made product, and its teaching approach is genuinely good. But meditation itself doesn't require a $70 annual subscription. If you want to meditate (not watch animations, not follow a 30-day syllabus, just sit and practice) [Guruka gives you that for free](/meditate/). No signup, no app, no credit card. Open the page and begin.

### Guruka vs Insight Timer: Simple Meditation vs Endless Choice
URL: https://guruka.com/en/compare/guruka-vs-insight-timer/
Description: Compare Guruka and Insight Timer. Both are free, but Guruka offers a simpler, no-signup experience vs Insight Timer's 200,000+ sessions.
Published: 2026-03-17
Updated: 2026-03-17
Keywords: guruka vs insight timer, insight timer vs guruka, free meditation app, insight timer alternative, simple meditation app, meditation without account

## Guruka vs Insight Timer

Insight Timer is the largest free meditation library in the world, with over 200,000 sessions from thousands of teachers. It's free to use with an optional premium tier at $59.99/year. The sheer volume of content is impressive, but it can also be overwhelming. Guruka takes the opposite approach: a curated, browser-based meditation tool with no account required, no app to download, and no decisions to make before you start meditating.

## Feature Comparison

| Feature | Insight Timer | Guruka |
|---|---|---|
| **Price** | Free (premium $59.99/year) | Free |
| **Free content** | 200,000+ sessions | Full access to everything |
| **Account required** | Yes | No |
| **Credit card needed** | No (for free tier) | No |
| **Ads** | Yes, in free tier | No intrusive ads |
| **Platforms** | iOS, Android app | Any web browser, phone, tablet, computer |
| **Offline access** | Premium only | Yes |
| **Time to start** | Download → signup → browse → choose | Open page → meditate |
| **Privacy** | Account with email, social features | No account, no personal data collected |
| **Brain games** | No | Yes, [focus and memory games](/games/) |
| **Affirmations** | No | Yes, [editable, 100% private](/visuals/) (stored in your browser only) |
| **Number of teachers** | Thousands | Curated content |
| **Community features** | Groups, live events, messaging | No, focused on practice |
| **Quality consistency** | Varies widely | Consistent |

## What Insight Timer Does Well

Insight Timer's library is genuinely massive, and the fact that most of it is free is remarkable. If you're looking for a specific style of meditation (Vipassana, loving-kindness, body scan, yoga nidra, or something more niche) there's a good chance someone on Insight Timer teaches it. The variety is unmatched.

The community features are another strength. Live group meditations, discussion groups, and the ability to see how many people are meditating around the world create a sense of shared practice. For meditators who value community and connection, this social layer is meaningful.

The timer feature itself (the app's namesake) is excellent, a simple, customizable meditation timer with interval bells and ambient sounds. It's one of the best standalone timers available and has been a core feature since the app launched.

## What Insight Timer Charges For

Insight Timer's free tier is more generous than Headspace or Calm, but it comes with trade-offs. The free version includes ads, and offline access requires the premium subscription at $59.99/year. Premium also unlocks curated courses, a simpler interface with fewer distractions, and advanced timer features.

The bigger cost of the free tier isn't financial, it's cognitive. With 200,000+ sessions of wildly varying quality, finding a good meditation can take longer than the meditation itself. Sessions range from professionally recorded guided meditations to amateur recordings with background noise. There's no consistent quality control, and the sheer number of choices can become a barrier to actually practicing.

## Why Guruka Is the Better Choice for Most People

- **No account required (start instantly**) no email, no signup, no credit card, no onboarding. Open the page and you're meditating
- **Completely free**, no subscription, no premium tier, no hidden costs
- **No intrusive ads**, your meditation session won't be interrupted
- **Works on any device**, phone, tablet, or computer, no app download needed
- **Works offline**, meditate anywhere, even without internet
- **Your data stays private**, no account means no personal data collected
- **Brain training games**, [focus and memory games](/games/) to complement your meditation practice
- **Multiple meditation categories**, [calm & stress relief](/meditate/calm-and-stress-relief/), [sleep](/meditate/sleep-and-wind-down/), [focus](/meditate/focus-and-clarity/), and more

## The Bottom Line

Insight Timer is an incredible resource if you know what you're looking for and don't mind spending time browsing. But if you just want to meditate (without creating an account, without scrolling through thousands of options, without ads) [Guruka gets you there in seconds](/meditate/). No signup, no app, no credit card. Open the page and begin.

### Guruka vs Simple Habit: Free Quick Meditation Without the Subscription
URL: https://guruka.com/en/compare/guruka-vs-simple-habit/
Description: Compare Guruka and Simple Habit side by side. Both focus on quick, accessible meditation, one costs $96/year, the other is completely free.
Published: 2026-03-17
Updated: 2026-03-17
Keywords: guruka vs simple habit, simple habit vs guruka, free meditation app, simple habit alternative, 5 minute meditation free, meditation without subscription

## Guruka vs Simple Habit

Simple Habit is a meditation app designed for busy people. Its signature feature is 5-minute guided sessions that fit into commutes, work breaks, and other small windows of free time. The app also offers sessions tailored to specific situations, difficult conversations, pre-meeting nerves, trouble sleeping. It's a thoughtful approach. But full access costs $95.99/year, and the free tier is limited. [Guruka](/) takes the same idea (quick, accessible meditation) and makes it completely free, with no account required.

## Feature Comparison

| Feature | Simple Habit | Guruka |
|---|---|---|
| **Price** | $95.99/year | Free |
| **Free content** | Limited selection | Full access |
| **Account required** | Yes | No |
| **Credit card needed** | Yes (for free trial) | No |
| **Ads** | No | No intrusive ads |
| **Platforms** | iOS, Android app | Any web browser |
| **Offline access** | Premium only | Yes |
| **Time to start** | Download → signup → onboarding | Open page → meditate |
| **Privacy** | Collects account and usage data | No personal data collected |
| **Brain games** | No | Yes |
| **Affirmations** | No | Yes, [editable, 100% private](/visuals/) (stored in your browser only) |
| **5-minute sessions** | Yes (core feature) | Yes (multiple durations) |
| **Situation-specific sessions** | Yes (commuting, work, conversations) | Yes (by category) |
| **On-the-go sessions** | Yes (designed for mobile) | Yes (works in any browser) |

## What Simple Habit Does Well

Simple Habit understood something most meditation apps missed early on: people don't always have 20 minutes to sit quietly. The app was built around the idea that meditation should fit your schedule, not the other way around. Five-minute sessions became its trademark, and for people who struggle to commit to longer practices, that format works.

The situation-based sessions are another genuine strength. Rather than browsing a generic library, you can find a session designed specifically for what you're going through, a stressful commute, a tough conversation at work, a moment of anxiety before a presentation. This contextual approach makes meditation feel more practical and less abstract.

Simple Habit also brings in a range of teachers and meditation styles, so you're not locked into one voice or one method. The variety keeps things fresh for users who might get bored with a single instructor.

## What Simple Habit Charges For

Simple Habit's free tier includes a handful of introductory sessions, but the full library (including most situation-specific meditations and the complete range of teachers) requires a premium subscription at $95.99/year. The app uses a free trial model that requires a credit card upfront, and if you forget to cancel, you're charged automatically. Some users report finding the cancellation process frustrating.

## Why Guruka Is the Better Choice for Most People

- **No account required (start instantly**) no email, no signup, no credit card, no onboarding. Open the page and you're meditating
- **Completely free**, no subscription, no premium tier, no hidden costs
- **No intrusive ads**, your meditation session won't be interrupted
- **Works on any device**, phone, tablet, or computer, no app download needed
- **Works offline**, meditate anywhere, even without internet
- **Your data stays private**, no account means no personal data collected
- **Brain training games**, [focus and memory games](/games/) to complement your meditation practice
- **Multiple meditation categories**, [calm & stress relief](/meditate/calm-and-stress-relief/), [sleep](/meditate/sleep-and-wind-down/), [focus](/meditate/focus-and-clarity/), and more

## The Bottom Line

Simple Habit proved that meditation doesn't need to take 20 minutes to be effective. Guruka takes that same principle and removes every barrier that Simple Habit still has. No signup, no app, no credit card, just open [Guruka's meditation page](/meditate/) and start a guided session in seconds. It's completely free, works offline, and runs on any device with a browser. If quick, accessible meditation is what you're after, Guruka delivers it without asking for anything in return.

### Guruka vs Ten Percent Happier: Free Meditation Without the $100 Price Tag
URL: https://guruka.com/en/compare/guruka-vs-ten-percent-happier/
Description: Compare Guruka and Ten Percent Happier. Both take a no-nonsense approach to meditation, one costs $100/year, the other is free.
Published: 2026-03-17
Updated: 2026-03-17
Keywords: guruka vs ten percent happier, ten percent happier vs guruka, free meditation app, ten percent happier alternative, dan harris meditation free, meditation without subscription

## Guruka vs Ten Percent Happier

Ten Percent Happier started with a compelling story. Dan Harris, an ABC News anchor, had a panic attack on live television, discovered meditation, and wrote a book about it. The app grew out of that book and brands itself as meditation for skeptics, no incense, no mysticism, just practical techniques backed by evidence. It features courses taught by respected teachers like Joseph Goldstein, Sharon Salzberg, and Jeff Warren. But full access costs $99.99/year, and the free tier is extremely limited. [Guruka](/) offers a similarly straightforward approach to meditation, completely free, with no account required.

## Feature Comparison

| Feature | Ten Percent Happier | Guruka |
|---|---|---|
| **Price** | $99.99/year | Free |
| **Free content** | Very limited | Full access |
| **Account required** | Yes | No |
| **Credit card needed** | Yes (for free trial) | No |
| **Ads** | No | No intrusive ads |
| **Platforms** | iOS, Android app | Any web browser |
| **Offline access** | Premium only | Yes |
| **Time to start** | Download → signup → onboarding | Open page → meditate |
| **Privacy** | Collects account and usage data | No personal data collected |
| **Brain games** | No | Yes |
| **Affirmations** | No | Yes, [editable, 100% private](/visuals/) (stored in your browser only) |
| **Coaching feature** | Yes (paid) | No |
| **Structured courses** | Yes (premium) | Organized by category |
| **Skeptic-friendly tone** | Yes (core brand identity) | Yes (no-nonsense design) |

## What Ten Percent Happier Does Well

The app's greatest strength is credibility. Dan Harris didn't come to meditation through a spiritual awakening, he came to it because nothing else worked for his anxiety. That origin story resonates with people who find most meditation apps too soft or too mystical. The app's tone is direct, sometimes funny, and never preachy.

The teacher lineup is genuinely impressive. Joseph Goldstein is one of the most respected meditation teachers in the Western Buddhist tradition. Sharon Salzberg literally wrote the book on loving-kindness meditation. Jeff Warren brings an accessible, everyman energy to his sessions. These aren't random wellness influencers, they're people who have dedicated decades to the practice.

Ten Percent Happier also offers a coaching feature where users can text with real meditation coaches for guidance. For people who feel lost or need accountability, this is a meaningful addition that most apps don't provide.

## What Ten Percent Happier Charges For

The free tier of Ten Percent Happier is one of the most restrictive in the industry. You get a small handful of introductory sessions and little else. The full course library, the complete teacher catalog, and the coaching feature all require the premium subscription at $99.99/year. Like most apps, it uses a free trial that requires a credit card, and auto-renews if you don't cancel. The coaching feature sometimes costs extra on top of the base subscription.

## Why Guruka Is the Better Choice for Most People

- **No account required (start instantly**) no email, no signup, no credit card, no onboarding. Open the page and you're meditating
- **Completely free**, no subscription, no premium tier, no hidden costs
- **No intrusive ads**, your meditation session won't be interrupted
- **Works on any device**, phone, tablet, or computer, no app download needed
- **Works offline**, meditate anywhere, even without internet
- **Your data stays private**, no account means no personal data collected
- **Brain training games**, [focus and memory games](/games/) to complement your meditation practice
- **Multiple meditation categories**, [calm & stress relief](/meditate/calm-and-stress-relief/), [sleep](/meditate/sleep-and-wind-down/), [focus](/meditate/focus-and-clarity/), and more

## The Bottom Line

Ten Percent Happier brought meditation to people who never thought they'd try it. That matters. But the techniques it teaches (breath awareness, body scans, noting) are not proprietary. You don't need to pay $100/year to practice them. No signup, no app, no credit card, just open [Guruka's meditation page](/meditate/) and start a guided session right now. It's free, works offline, and runs on any device. The best meditation practice is the one you actually do, and Guruka removes every obstacle between you and doing it.

### Guruka vs Waking Up: Free Meditation Without Sam Harris's Price Tag
URL: https://guruka.com/en/compare/guruka-vs-waking-up/
Description: Compare Guruka and Waking Up side by side. Both take a secular approach to meditation, one costs $100/year, the other is free.
Published: 2026-03-17
Updated: 2026-03-17
Keywords: guruka vs waking up, waking up vs guruka, free meditation app, waking up alternative, sam harris meditation free, meditation without subscription

## Guruka vs Waking Up

Waking Up is Sam Harris's meditation app, built around a secular, philosophical approach to mindfulness and non-dual awareness. It costs $99.99/year, though a free subscription is available if you email the team and request one. The app offers a 28-day introductory course, theory lessons, and conversations with meditation teachers. Guruka is a free, browser-based meditation tool, no account, no download, no payment, no need to request access.

## Feature Comparison

| Feature | Waking Up | Guruka |
|---|---|---|
| **Price** | $99.99/year (free if requested) | Free |
| **Free content** | Limited without subscription or request | Full access to everything |
| **Account required** | Yes | No |
| **Credit card needed** | Yes (unless you request free access) | No |
| **Ads** | No | No intrusive ads |
| **Platforms** | iOS, Android app | Any web browser, phone, tablet, computer |
| **Offline access** | Yes | Yes |
| **Time to start** | Download → signup → onboarding | Open page → meditate |
| **Privacy** | Account with email, usage tracking | No account, no personal data collected |
| **Brain games** | No | Yes, [focus and memory games](/games/) |
| **Affirmations** | No | Yes, [editable, 100% private](/visuals/) (stored in your browser only) |
| **Theory & philosophy** | Yes (lessons, conversations, podcasts | No) focused on practice |
| **Teaching style** | Non-dual awareness, intellectual | Guided meditation, accessible |
| **Intro course** | 28-day structured program | Category-based, start anytime |

## What Waking Up Does Well

Waking Up is arguably the most intellectually serious meditation app available. Sam Harris brings a neuroscience background and a philosophical rigor that appeals to people who want to understand why they're meditating, not just how. The Theory section includes lessons on consciousness, free will, and the nature of the self, topics you won't find on any other meditation app.

The 28-day introductory course is excellent. It builds progressively, introducing concepts like focused attention, open awareness, and eventually non-dual awareness in a way that feels like genuine teaching rather than a scripted relaxation exercise. Harris is a skilled communicator, and his daily meditations are concise and substantive.

The app also features conversations with other teachers and thinkers (Joseph Goldstein, Loch Kelly, Diana Winston, and others) giving users exposure to different contemplative traditions. For meditators who want depth and variety in their teachers, this is a real strength.

## What Waking Up Charges For

Waking Up costs $99.99/year, making it one of the more expensive meditation apps. To their credit, the team offers free subscriptions to anyone who emails and says they can't afford it, no questions asked. This is a genuinely generous policy, but it still requires you to ask, create an account, and download the app.

The free trial gives you access to the first few sessions of the introductory course. Everything else (the full course, daily meditations, theory lessons, conversations, and the meditation timer) requires a subscription or an approved free access request.

## Why Guruka Is the Better Choice for Most People

- **No account required (start instantly**) no email, no signup, no credit card, no onboarding. Open the page and you're meditating
- **Completely free**, no subscription, no premium tier, no hidden costs
- **No intrusive ads**, your meditation session won't be interrupted
- **Works on any device**, phone, tablet, or computer, no app download needed
- **Works offline**, meditate anywhere, even without internet
- **Your data stays private**, no account means no personal data collected
- **Brain training games**, [focus and memory games](/games/) to complement your meditation practice
- **Multiple meditation categories**, [calm & stress relief](/meditate/calm-and-stress-relief/), [sleep](/meditate/sleep-and-wind-down/), [focus](/meditate/focus-and-clarity/), and more

## The Bottom Line

Waking Up is a thoughtful, well-crafted app for people who want a philosophical framework around their meditation practice. If you're drawn to Sam Harris's teaching style and want to explore non-dual awareness, it's worth considering. But if you want to meditate (without creating an account, without paying $100/year or emailing to request free access) [Guruka is ready right now](/meditate/). No signup, no app, no credit card. Open the page and start.

### Free Alternatives to the Balance App: Meditation Without the Subscription
URL: https://guruka.com/en/compare/free-alternative-to-balance-app/
Description: Looking for a free alternative to the Balance meditation app? Compare features and find meditation tools that don't require a yearly subscription.
Published: 2026-03-13
Updated: 2026-03-17
Keywords: balance app alternative, free meditation app, balance meditation free alternative, personalized meditation free, guruka meditation, meditation without subscription

## Free Alternatives to the Balance App

Balance is a meditation app known for its personalized meditation plans that adapt to your experience level. It gained popularity by offering a free first year, but once that trial ends, it costs $69.99/year. If you're looking for meditation without ongoing subscription fees, several free alternatives are available.

## What Balance Offers

Balance creates personalized daily meditation sessions based on your answers to check-in questions. It covers focus, sleep, stress reduction, and other categories. The app is well-designed and the personalization is a genuine differentiator. However, after the free year expires, the full subscription kicks in, and many users discover they need to keep paying to access their meditation habit.

## Comparison: Balance vs Free Alternatives

| Feature | Balance | Guruka | Insight Timer | Smiling Mind |
|---|---|---|---|---|
| **Price** | Free first year, then $69.99/year | Free | Free (premium optional) | Free |
| **Free content** | Full access for 1 year | Full access, always | 200,000+ sessions | 300+ sessions |
| **Signup required** | Yes | No | Yes | Yes |
| **Credit card needed** | No (for first year) | No | No | No |
| **Ads** | No | No | Occasional | No intrusive ads |
| **Personalization** | AI-driven personalized plans | Choose by category | Search/filter library | Curated programs |
| **Platforms** | iOS, Android app | Any web browser | iOS, Android app | iOS, Android app |
| **Offline access** | Yes | Yes (works offline) | Premium only | Yes |
| **Brain games** | No | Yes | No | No |
| **Affirmations** | No | Yes (editable, private | No | No |
| **Time to start** | Download → signup → answer questions → wait | Open page → meditate | Download → signup → browse | Download → signup → choose program |

## Why Guruka Works as a Balance Replacement

Balance's strength is personalization, but the core meditation techniques it uses) breath awareness, body scans, visualization, are the same ones available for free elsewhere. [Guruka](/) gives you:

- **No account required (start instantly**) no email, no signup, no credit card, no onboarding. Open the page and you're meditating
- **Completely free** (no subscription, no trial period that expires
- **No intrusive ads**) uninterrupted meditation sessions
- **Works on any device** (browser-based, works on phone, tablet, or computer
- **Works offline**) meditate anywhere, even without internet
- **Your data stays private** (nothing to sign up for means nothing to track
- **Multiple categories**) choose from [calm & stress relief](/meditate/calm-and-stress-relief/), [focus & clarity](/meditate/focus-and-clarity/), [sleep](/meditate/sleep-and-wind-down/), [morning energy](/meditate/morning-energy/), and more
- **Brain training**, [focus and memory games](/games/) to complement your meditation practice

Balance is a well-made app, especially during its free first year. But if that year is up or you'd rather not depend on a subscription, [Guruka's meditation page](/meditate/) has you covered, completely free, no expiration date, no signup, no app, no credit card.

### Free Alternatives to Calm: Sleep & Meditation Without the Cost
URL: https://guruka.com/en/compare/free-alternative-to-calm/
Description: Looking for a free alternative to Calm? Compare features and find meditation and sleep apps that don't require a subscription.
Published: 2026-03-13
Updated: 2026-03-17
Keywords: calm alternative, free meditation app, calm app free alternative, sleep meditation free, guruka meditation, meditation without subscription

## Free Alternatives to Calm

Calm is popular for its Sleep Stories and relaxation content, but the $69.99/year subscription puts most of it behind a paywall. The free tier gives you one Daily Calm session per day and a few nature sounds, that's about it. If you want meditation and sleep content without ongoing costs, free alternatives deliver.

## What Calm Charges For

Calm's subscription unlocks Sleep Stories (celebrity-narrated bedtime stories), its full meditation library, masterclasses, and focus music. The free version is essentially a sample. The app requires account creation, and the free trial needs a credit card. Calm has a Trustpilot score of about 1.6/5, largely due to cancellation and billing frustrations.

## Comparison: Calm vs Free Alternatives

| Feature | Calm | Guruka | Insight Timer | Smiling Mind |
|---|---|---|---|---|
| **Price** | $69.99/year | Free | Free (premium optional) | Free |
| **Free content** | 1 daily session + few sounds | Full access | 200,000+ sessions | 300+ sessions |
| **Signup required** | Yes | No | Yes | Yes |
| **Credit card needed** | For trial, yes | No | No | No |
| **Ads** | Upgrade prompts | No | Occasional | No intrusive ads |
| **Sleep content** | Yes (premium) | Sleep meditation included | Varies by teacher | Limited |
| **Platforms** | iOS, Android app | Any web browser | iOS, Android app | iOS, Android app |
| **Offline access** | Premium only | Yes (works offline) | Premium only | Yes |
| **Brain games** | No | Yes | No | No |
| **Affirmations** | No | Yes, editable, private | No | No |
| **Time to start** | Download → signup → free trial | Open page → meditate | Download → signup → browse | Download → signup → choose program |

## Why Guruka Works as a Calm Replacement

Calm's biggest draw is its sleep and relaxation content. [Guruka](/) covers that ground with a different approach:

- **No account required (start instantly**) no email, no signup, no credit card, no onboarding. Open the page and you're meditating
- **Completely free** (no subscription fees, ever
- **No intrusive ads**) clean, distraction-free meditation
- **Works on any device** (phone, tablet, or laptop, no app download needed
- **Works offline**) meditate anywhere, even without internet
- **Your data stays private** (no account, no personal data collected
- **Sleep meditation**) dedicated [sleep & wind down sessions](/meditate/sleep-and-wind-down/) to help you fall asleep
- **Calm & stress relief** ([guided relaxation sessions](/meditate/calm-and-stress-relief/) for daily unwinding
- **Brain training**) [focus and memory games](/games/) for mental exercise

Calm has excellent production quality, and its celebrity Sleep Stories are unique. But if you need meditation and sleep support without paying $70/year, [Guruka's meditation page](/meditate/) gives you that for free (no signup, no app, no credit card) just meditation.

### Free Alternatives to Headspace: Meditate Without the Subscription
URL: https://guruka.com/en/compare/free-alternative-to-headspace/
Description: Looking for a free alternative to Headspace? Compare features and find meditation apps that don't charge $70/year.
Published: 2026-03-13
Updated: 2026-03-17
Keywords: headspace alternative, free meditation app, headspace free alternative, meditation without subscription, guruka meditation, free guided meditation

## Free Alternatives to Headspace

Headspace is one of the most well-known meditation apps, but at $69.99/year, it's not accessible to everyone. The free tier only includes a handful of introductory sessions, you'll exhaust the available content within a week. If you want guided meditation without the paywall, there are strong free alternatives available.

## What Headspace Charges For

Headspace locks about 95% of its content behind its annual subscription. The free tier gives you roughly 10 basic sessions and a few rotating meditations. No sleep content, no focus music, no full course access. The app also requires account creation and, for free trials, a credit card upfront.

## Comparison: Headspace vs Free Alternatives

| Feature | Headspace | Guruka | Insight Timer | Smiling Mind |
|---|---|---|---|---|
| **Price** | $69.99/year | Free | Free (premium optional) | Free |
| **Free content** | ~10 sessions | Full access | 200,000+ sessions | 300+ sessions |
| **Signup required** | Yes | No | Yes | Yes |
| **Credit card needed** | For trial, yes | No | No | No |
| **Ads** | Upgrade prompts | No | Occasional | No intrusive ads |
| **Platforms** | iOS, Android app | Any web browser | iOS, Android app | iOS, Android app |
| **Offline access** | Premium only | Yes (works offline) | Premium only | Yes |
| **Beginner friendly** | Excellent (paid) | Very good | Moderate (overwhelming) | Very good |
| **Brain games** | No | Yes | No | No |
| **Affirmations** | No | Yes (editable, private | No | No |
| **Time to start** | Download → signup → free trial | Open page → meditate | Download → signup → browse | Download → signup → choose program |

## Why Guruka Works as a Headspace Replacement

If you like Headspace's simplicity but not its price tag, [Guruka](/) is the closest free alternative:

- **No account required) start instantly**, no email, no signup, no credit card, no onboarding. Open the page and you're meditating
- **Completely free** (no subscription, no premium tier, no "free trial" that auto-charges
- **No intrusive ads**) nothing interrupts your meditation session
- **Works on any device** (just open your browser on phone, tablet, or computer
- **Works offline**) meditate anywhere, even without internet
- **Your data stays private** (no account means nothing to track
- **Guided sessions**) structured [meditation categories](/meditate/) covering calm, focus, sleep, gratitude, and more
- **Brain training**, [focus and memory games](/games/) for cognitive exercise between meditation sessions

Headspace is a polished product, and its structured courses are genuinely well-designed. But meditation itself doesn't require a $70 annual fee. If you just want to sit, breathe, and follow a guided session, [start meditating on Guruka](/meditate/) (no signup, no app, no credit card) it takes about 5 seconds.

### Free Alternatives to Insight Timer: Simple Meditation Without the Overwhelm
URL: https://guruka.com/en/compare/free-alternative-to-insight-timer/
Description: Insight Timer has 200,000+ meditations, but that can be overwhelming. Compare simpler free alternatives for daily meditation.
Published: 2026-03-13
Updated: 2026-03-17
Keywords: insight timer alternative, free meditation app, insight timer too many choices, simple meditation app, guruka meditation, meditation for beginners

## Free Alternatives to Insight Timer

Insight Timer is the largest free meditation library in the world, with over 200,000 guided sessions from thousands of teachers. It's an incredible resource, but that sheer volume can be paralyzing, especially for beginners. If you've ever opened Insight Timer and spent more time browsing than meditating, you're not alone.

## The Insight Timer Paradox

Insight Timer's biggest strength is also its biggest weakness: choice overload. With hundreds of thousands of sessions, finding the right one means scrolling through varying quality levels, different teaching styles, and inconsistent audio production. The app also requires account creation and shows ads in its free tier. Its optional premium subscription costs $59.99/year.

## Comparison: Insight Timer vs Simpler Alternatives

| Feature | Insight Timer | Guruka | Smiling Mind | Headspace (free tier) |
|---|---|---|---|---|
| **Price** | Free (premium $59.99/year) | Free | Free | $69.99/year (limited free) |
| **Content volume** | 200,000+ sessions | Curated library | 300+ sessions | ~10 free sessions |
| **Signup required** | Yes | No | Yes | Yes |
| **Ads** | Yes (free tier) | No | No intrusive ads | Upgrade prompts |
| **Content quality** | Varies widely | Consistently curated | Professionally produced | Professionally produced |
| **Platforms** | iOS, Android app | Any web browser | iOS, Android app | iOS, Android app |
| **Offline access** | Premium only | Yes (works offline) | Yes | Premium only |
| **Ease of choosing** | Difficult (too many options) | Easy (curated categories) | Easy (structured programs) | Easy (limited content) |
| **Brain games** | No | Yes | No | No |
| **Affirmations** | No | Yes (editable, private | No | No |
| **Time to start** | Download → signup → browse 200k sessions | Open page → meditate | Download → signup → choose program | Download → signup → hit paywall |

## Why Guruka Works as an Insight Timer Alternative

If you want the benefits of guided meditation without the decision fatigue, [Guruka](/) takes a curated approach:

- **No account required) start instantly**, no email, no signup, no credit card, no onboarding. Open the page and you're meditating
- **Completely free** (no subscription, no premium tier
- **No intrusive ads**) clean experience with no interruptions
- **Works on any device** (browser-based, no app download needed
- **Works offline**) meditate anywhere, even without internet
- **Your data stays private** (no account means no data collection
- **Curated, not overwhelming**) sessions organized into clear categories like [calm & stress relief](/meditate/calm-and-stress-relief/), [focus & clarity](/meditate/focus-and-clarity/), and [sleep](/meditate/sleep-and-wind-down/)
- **Brain training**, [focus and memory games](/games/) for cognitive exercise

Insight Timer is a valuable resource if you know what you're looking for. But if you just want to sit down and meditate without spending ten minutes choosing a session, [Guruka's meditation page](/meditate/) gets you started in seconds, no signup, no app, no credit card.

### Free Alternatives to Smiling Mind: Meditation Beyond the Classroom
URL: https://guruka.com/en/compare/free-alternative-to-smiling-mind/
Description: Smiling Mind is great for schools, but limited for adults. Compare free alternatives with more adult-focused meditation content.
Published: 2026-03-13
Updated: 2026-03-17
Keywords: smiling mind alternative, free meditation app, smiling mind for adults, adult meditation app, guruka meditation, meditation without signup

## Free Alternatives to Smiling Mind

Smiling Mind is a free, nonprofit meditation app developed in Australia with backing from the Australian government. It's well-made and genuinely free, no subscriptions, no ads. But it was originally designed for schools and young people, and adult users often find the content limited. If you want a free meditation tool with more depth for adults, alternatives exist.

## Where Smiling Mind Falls Short for Adults

Smiling Mind offers about 300 sessions organized into programs for different age groups and life stages. The quality is good and the app is completely free. However, the content skews toward younger audiences, the library is relatively small compared to other options, and the app requires account creation. Some adult users report outgrowing the available content within a few months.

## Comparison: Smiling Mind vs Free Alternatives

| Feature | Smiling Mind | Guruka | Insight Timer | Calm (free tier) |
|---|---|---|---|---|
| **Price** | Free | Free | Free (premium optional) | $69.99/year (limited free) |
| **Content focus** | Schools & young people | Adults & general | All ages | Adults |
| **Free content** | 300+ sessions | Full access | 200,000+ sessions | 1 daily session |
| **Signup required** | Yes | No | Yes | Yes |
| **Ads** | No | No | Occasional | Upgrade prompts |
| **Platforms** | iOS, Android app | Any web browser | iOS, Android app | iOS, Android app |
| **Offline access** | Yes | Yes (works offline) | Premium only | Premium only |
| **Adult-focused content** | Limited | Yes | Extensive | Yes (premium) |
| **Brain games** | No | Yes | No | No |
| **Affirmations** | No | Yes (editable, private | No | No |
| **Time to start** | Download → signup → choose age group | Open page → meditate | Download → signup → browse | Download → signup → hit paywall |

## Why Guruka Works as a Smiling Mind Alternative

If you've enjoyed Smiling Mind's free model but want more adult-focused content, [Guruka](/) offers a similar philosophy with different strengths:

- **No account required) start instantly**, no email, no signup, no credit card, no onboarding. Open the page and you're meditating
- **Completely free** (no subscription, same as Smiling Mind
- **No intrusive ads**) clean meditation experience
- **Works on any device** (browser-based, no app download required
- **Works offline**) meditate anywhere, even without internet
- **Your data stays private** (no account, no data collection
- **Adult-focused categories**) [calm & stress relief](/meditate/calm-and-stress-relief/), [focus & clarity](/meditate/focus-and-clarity/), [sleep & wind down](/meditate/sleep-and-wind-down/), [loving kindness](/meditate/loving-kindness/), and more
- **Brain training**, [focus and memory games](/games/) for cognitive exercise

Smiling Mind is a wonderful free resource, especially for families and younger users. For adults who want more variety and zero-friction access, [Guruka's meditation page](/meditate/) delivers (no signup, no app, no credit card) just meditation.

### Free Alternatives to Simple Habit: Quick Meditation Without the Subscription
URL: https://guruka.com/en/compare/free-alternative-to-simple-habit/
Description: Looking for a free alternative to Simple Habit? Compare features and find quick meditation tools without the $96/year price tag.
Published: 2026-03-13
Updated: 2026-03-17
Keywords: simple habit alternative, free meditation app, simple habit free alternative, 5 minute meditation free, guruka meditation, meditation without subscription

## Free Alternatives to Simple Habit

Simple Habit built its reputation on short, 5-minute meditation sessions designed for busy schedules. It's a practical concept, meditation that fits into a lunch break or commute. But at $95.99/year for full access, the subscription cost is higher than most competitors. If you want quick guided meditations without the price tag, free alternatives exist.

## What Simple Habit Charges For

Simple Habit's free tier gives you a limited selection of sessions. The full library (including meditations for specific situations like commuting, work breaks, and difficult conversations) requires the premium subscription. The app needs account creation and uses a free trial model to convert users to paid plans.

## Comparison: Simple Habit vs Free Alternatives

| Feature | Simple Habit | Guruka | Insight Timer | Smiling Mind |
|---|---|---|---|---|
| **Price** | $95.99/year | Free | Free (premium optional) | Free |
| **Free content** | Limited selection | Full access | 200,000+ sessions | 300+ sessions |
| **Signup required** | Yes | No | Yes | Yes |
| **Credit card needed** | For trial, yes | No | No | No |
| **Ads** | No | No | Occasional | No intrusive ads |
| **Short sessions** | Yes (5-minute focus) | Yes (multiple durations) | Varies | Yes |
| **Platforms** | iOS, Android app | Any web browser | iOS, Android app | iOS, Android app |
| **Offline access** | Premium only | Yes (works offline) | Premium only | Yes |
| **Brain games** | No | Yes | No | No |
| **Affirmations** | No | Yes, editable, private | No | No |
| **Time to start** | Download → signup → free trial | Open page → meditate | Download → signup → browse | Download → signup → choose program |

## Why Guruka Works as a Simple Habit Replacement

Simple Habit's appeal is quick, accessible meditation. [Guruka](/) delivers the same thing at zero cost:

- **No account required (start instantly**) no email, no signup, no credit card, no onboarding. Open the page and you're meditating
- **Completely free** (no subscription, no trial, no hidden charges
- **No intrusive ads**) distraction-free meditation from start to finish
- **Works on any device** (open your browser on phone, tablet, or computer
- **Works offline**) meditate anywhere, even without internet
- **Your data stays private** (no account means no personal information collected
- **Quick sessions available**) guided meditations in multiple categories including [calm & stress relief](/meditate/calm-and-stress-relief/), [focus & clarity](/meditate/focus-and-clarity/), and [morning energy](/meditate/morning-energy/)
- **Brain training** ([focus and memory games](/games/) that take just minutes to play

Simple Habit had the right idea) meditation should be quick and easy. But it shouldn't cost $96/year. Visit [Guruka's meditation page](/meditate/) and start a guided session in seconds, completely free, no signup, no app, no credit card.

### Free Alternatives to Ten Percent Happier: Meditation Without $99/Year
URL: https://guruka.com/en/compare/free-alternative-to-ten-percent-happier/
Description: Looking for a free alternative to Ten Percent Happier? Compare features and find meditation tools that don't cost $99/year.
Published: 2026-03-13
Updated: 2026-03-17
Keywords: ten percent happier alternative, free meditation app, ten percent happier free alternative, dan harris meditation, guruka meditation, meditation without subscription

## Free Alternatives to Ten Percent Happier

Ten Percent Happier was founded by ABC News anchor Dan Harris after a panic attack on live television led him to meditation. The app takes a skeptic-friendly, science-based approach that appeals to people who find typical meditation apps too spiritual. But at $99.99/year, it's one of the most expensive meditation apps available. Free alternatives offer the same core meditation techniques at no cost.

## What Ten Percent Happier Charges For

The app's subscription unlocks courses taught by well-known meditation teachers like Joseph Goldstein, Sharon Salzberg, and Jeff Warren. It also includes a "coaching" feature where you can message meditation coaches for guidance. The free tier is very limited, a small handful of introductory sessions. The focus on expert teachers and coaching is what justifies the higher price, but the actual meditation techniques taught are the same ones available for free elsewhere.

## Comparison: Ten Percent Happier vs Free Alternatives

| Feature | Ten Percent Happier | Guruka | Insight Timer | Smiling Mind |
|---|---|---|---|---|
| **Price** | $99.99/year | Free | Free (premium optional) | Free |
| **Free content** | Very limited | Full access | 200,000+ sessions | 300+ sessions |
| **Signup required** | Yes | No | Yes | Yes |
| **Credit card needed** | For trial, yes | No | No | No |
| **Ads** | No | No | Occasional | No intrusive ads |
| **Teaching approach** | Skeptic-friendly, science-based | Guided sessions | Varies by teacher | Evidence-based |
| **Platforms** | iOS, Android app | Any web browser | iOS, Android app | iOS, Android app |
| **Offline access** | Premium only | Yes (works offline) | Premium only | Yes |
| **Brain games** | No | Yes | No | No |
| **Affirmations** | No | Yes, editable, private | No | No |
| **Personal coaching** | Yes (premium) | No | No | No |
| **Time to start** | Download → signup → free trial | Open page → meditate | Download → signup → browse | Download → signup → choose program |

## Why Guruka Works as a Ten Percent Happier Alternative

Ten Percent Happier's no-nonsense approach resonates with meditation skeptics. [Guruka](/) takes a similarly straightforward approach (minus the $100 price tag:

- **No account required) start instantly**, no email, no signup, no credit card, no onboarding. Open the page and you're meditating
- **Completely free** (no subscription, no premium tier, no trial that expires
- **No intrusive ads**) nothing between you and your meditation
- **Works on any device** (browser-based, works on phone, tablet, or computer
- **Works offline**) meditate anywhere, even without internet
- **Your data stays private** (no account means no personal data to collect
- **Practical categories**) [focus & clarity](/meditate/focus-and-clarity/), [calm & stress relief](/meditate/calm-and-stress-relief/), [body scan](/meditate/body-scan-and-tension-release/), and more
- **Brain training**, [focus and memory games](/games/) grounded in cognitive exercise

Ten Percent Happier is excellent for its teacher quality and coaching feature. But if you want the meditation without the $100/year price, [Guruka's meditation page](/meditate/) gives you guided sessions right now, free, no signup, no app, no credit card.

### Free Alternatives to the Waking Up App: Meditation Without Sam Harris's Price Tag
URL: https://guruka.com/en/compare/free-alternative-to-waking-up-app/
Description: Looking for a free alternative to the Waking Up app? Compare features and find meditation tools that don't require a subscription.
Published: 2026-03-13
Updated: 2026-03-17
Keywords: waking up app alternative, free meditation app, waking up free alternative, sam harris meditation free, guruka meditation, meditation without subscription

## Free Alternatives to the Waking Up App

Waking Up, created by neuroscientist and author Sam Harris, is a meditation app that goes beyond relaxation into the nature of consciousness itself. It takes a philosophical, non-religious approach that appeals to intellectually curious meditators. The app costs $99.99/year, though Harris offers free subscriptions to anyone who can't afford it. If you want guided meditation without a subscription, free alternatives are available.

## What Makes Waking Up Different

Waking Up focuses on what Harris calls "non-dual awareness", the idea that the sense of being a separate self is an illusion that meditation can dissolve. The app includes a 28-day introductory course, daily meditations, "Theory" lessons on philosophy and consciousness, and conversations with other teachers. It's more intellectually rigorous than most meditation apps, which is its appeal, and its limitation for people who just want to relax.

## Comparison: Waking Up vs Free Alternatives

| Feature | Waking Up | Guruka | Insight Timer | Smiling Mind |
|---|---|---|---|---|
| **Price** | $99.99/year (free if you ask) | Free | Free (premium optional) | Free |
| **Free content** | Limited (or full if you request) | Full access | 200,000+ sessions | 300+ sessions |
| **Signup required** | Yes | No | Yes | Yes |
| **Credit card needed** | For standard purchase, yes | No | No | No |
| **Ads** | No | No | Occasional | No intrusive ads |
| **Teaching style** | Philosophical, non-dual | Guided practical sessions | Varies by teacher | Evidence-based |
| **Platforms** | iOS, Android app | Any web browser | iOS, Android app | iOS, Android app |
| **Offline access** | Yes | Yes (works offline) | Premium only | Yes |
| **Brain games** | No | Yes | No | No |
| **Affirmations** | No | Yes, editable, private | No | No |
| **Philosophy content** | Extensive | No | Some | No |
| **Time to start** | Download → signup → purchase or request free | Open page → meditate | Download → signup → browse | Download → signup → choose program |

## Why Guruka Works as a Waking Up Alternative

Waking Up appeals to people who want meditation grounded in reason rather than religion. [Guruka](/) shares that secular, practical approach:

- **No account required (start instantly**) no email, no signup, no credit card, no onboarding. Open the page and you're meditating
- **Completely free** (no subscription, no need to request free access
- **No intrusive ads**) uninterrupted meditation sessions
- **Works on any device** (browser-based, works on phone, tablet, or computer
- **Works offline**) meditate anywhere, even without internet
- **Your data stays private** (no account means no data collected
- **Practical meditation categories**) [calm & stress relief](/meditate/calm-and-stress-relief/), [focus & clarity](/meditate/focus-and-clarity/), [body scan](/meditate/body-scan-and-tension-release/), [gratitude](/meditate/gratitude/), and more
- **Brain training**, [focus and memory games](/games/) for cognitive sharpening

Waking Up is unique for its philosophical depth and Sam Harris's teaching style. If that intellectual dimension matters to you, it's hard to replace. But if you want guided meditation that works (practical, secular, and free) [Guruka's meditation page](/meditate/) is ready when you are. No signup, no app, no credit card, no subscription.

### Headspace vs Calm vs Guruka: Meditation App Comparison
URL: https://guruka.com/en/compare/headspace-vs-calm/
Description: Compare Headspace, Calm, and Guruka side by side. See pricing, features, and which meditation app is right for you.
Published: 2026-03-13
Updated: 2026-03-17
Keywords: headspace vs calm, meditation app comparison, free meditation app, headspace alternative, calm alternative, guruka meditation

## Headspace vs Calm vs Guruka

Headspace and Calm are the two most popular meditation apps, each charging around $70 per year. Both offer guided meditations, sleep content, and mindfulness exercises. But do you actually need to pay for meditation? Guruka offers a completely free alternative with no subscription, no intrusive ads, and no account required.

Here's how they compare.

## Feature Comparison

| Feature | Headspace | Calm | Guruka |
|---|---|---|---|
| **Price** | $69.99/year | $69.99/year | Free |
| **Free tier** | Very limited | Limited (Daily Calm only) | Full access |
| **Signup required** | Yes | Yes | No |
| **Ads** | No (but constant upgrade prompts) | No (but constant upgrade prompts) | No intrusive ads |
| **Platforms** | iOS, Android | iOS, Android | Any web browser |
| **Works on mobile** | Yes (app required) | Yes (app required) | Yes (no app needed) |
| **Offline access** | Premium only | Premium only | Yes (works offline) |
| **Privacy** | Account + data collection | Account + data collection | No account, no tracking |
| **Sleep content** | Yes (premium) | Yes (premium) | Sleep meditation included |
| **Beginner program** | Structured courses | Less structured | Guided sessions |
| **Brain games** | No | No | Yes (focus & memory games) |
| **Affirmations** | No | No | Yes, [editable, 100% private](/visuals/) (stored in your browser only) |
| **Time to start** | Download app → create account → choose plan | Download app → create account → choose plan | Open page → meditate |

## Headspace Strengths

Headspace excels at structured learning. Its Basics course walks beginners through meditation fundamentals over 30 days, starting with 3-minute sessions. The content is professionally produced, and co-founder Andy Puddicombe's teaching style is clear and approachable. If you want a curriculum-based approach and don't mind the subscription, Headspace delivers.

## Calm Strengths

Calm is best known for its Sleep Stories, narrated bedtime stories by celebrities like Matthew McConaughey and Harry Styles. It also offers a broader range of ambient music and nature soundscapes. If sleep content is your primary reason for using a meditation app, Calm has the largest library.

## The Paywall Problem

Both Headspace and Calm lock most of their content behind a $69.99/year subscription. Their free tiers are essentially demos. Headspace gives you about 10 introductory sessions. Calm gives you one Daily Calm per day and a few nature sounds. After a week or two, you'll hit a wall.

Both apps also use free trial models that require a credit card upfront, and cancellation can be frustrating. Headspace has a Trustpilot score of ~1.8/5, and Calm sits at ~1.6/5, largely due to billing complaints.

## Why Guruka Is Different

[Guruka](/) takes a different approach to meditation:

- **No account required (start instantly**) no email, no signup, no credit card, no onboarding. Open the page and you're meditating
- **Completely free**, no subscription, no premium tier, no hidden costs
- **No intrusive ads**, your meditation session won't be interrupted
- **Works on any device**, phone, tablet, or computer, no app download needed
- **Works offline**, meditate anywhere, even without internet
- **Your data stays private**, no account means no personal data collected
- **Brain training games**, [focus and memory games](/games/) to complement your meditation practice
- **Multiple meditation categories**, [calm & stress relief](/meditate/calm-and-stress-relief/), [sleep](/meditate/sleep-and-wind-down/), [focus](/meditate/focus-and-clarity/), and more

## Which Should You Choose?

**Choose Headspace** if you want a structured multi-week meditation course and are willing to pay $70/year.

**Choose Calm** if sleep stories with celebrity narration are important to you and you're willing to pay $70/year.

**Choose Guruka** if you want to meditate without paying, without signing up, and without downloading an app. No account, no credit card, no onboarding, visit [guruka.com/meditate/](/meditate/) and start a guided session right now.

### The Science Behind GURUKA: Brain Training Research
URL: https://guruka.com/en/blog/science/
Description: Learn about the neuroscience research behind GURUKA's cognitive training games and how they can help improve memory, speed, and mental agility.
Published: 2024-01-20
Updated: 2026-03-04
Keywords: brain training research, cognitive training science, neuroscience, n-back paradigm, spatial working memory, executive function

<p>Our games are based on decades of cognitive psychology research. Here's what the science says about brain training.</p>

<h2>Evidence-Based Approach</h2>
<p>GURUKA's games are designed based on well-established cognitive training paradigms from neuroscience research. Each game targets specific cognitive functions that researchers have explored under controlled conditions.</p>
<p>While the field of cognitive training continues to evolve, we've selected tasks with encouraging evidence suggesting potential improvements in trained abilities.</p>

<h2>Research Behind Each Game</h2>

<h3>Speed Match: Processing Speed Training</h3>
<p>Based on the n-back paradigm, one of the most researched cognitive training tasks.</p>
<p><strong>Jaeggi et al. (2008)</strong> reported that n-back training may improve fluid intelligence, with benefits transferring to novel tasks. <a href="https://doi.org/10.1073/pnas.0801268105">DOI: 10.1073/pnas.0801268105</a></p>
<p><strong>Au et al. (2015)</strong> meta-analysis reported improvements in working memory from n-back training. <a href="https://doi.org/10.1037/xge0000009">DOI: 10.1037/xge0000009</a></p>

<h3>Memory Matrix: Spatial Working Memory</h3>
<p>Targets the visuospatial sketchpad component of working memory.</p>
<p><strong>Klingberg et al. (2002)</strong> demonstrated that spatial working memory training may lead to improvements in non-trained tasks. <a href="https://doi.org/10.1016/S0022-0965(02)00093-7">DOI: 10.1016/S0022-0965(02)00093-7</a></p>
<p><strong>Holmes et al. (2009)</strong> reported lasting improvements in working memory following adaptive spatial training. <a href="https://doi.org/10.1111/j.1469-7610.2009.02093.x">DOI: 10.1111/j.1469-7610.2009.02093.x</a></p>

<h3>Sequence Recall: Dual-Task Training</h3>
<p>Combines multiple cognitive demands to train executive function.</p>
<p><strong>Dahlin et al. (2008)</strong> updating training showed transfer effects to working memory tasks. <a href="https://doi.org/10.1111/j.1467-9280.2008.02204.x">DOI: 10.1111/j.1467-9280.2008.02204.x</a></p>
<p><strong>Karbach &amp; Kray (2009)</strong> task-switching training reported broad cognitive benefits across age groups. <a href="https://doi.org/10.1037/a0015012">DOI: 10.1037/a0015012</a></p>

<h2>Important Caveats</h2>
<p>We believe in being transparent about what brain training can and cannot do:</p>
<ul>
<li>Individual results vary significantly based on baseline abilities and engagement.</li>
<li>Transfer to real-world tasks is still debated in the scientific community.</li>
<li>Consistency and effort matter more than total time spent.</li>
<li>Brain training should complement, not replace, physical exercise, sleep, and social engagement.</li>
<li>Claims of preventing dementia or significantly increasing IQ are not well-supported.</li>
</ul>

<h2>Training Recommendations</h2>
<p>Based on the research, here are our recommendations for effective brain training:</p>
<ol>
<li><strong>Train regularly</strong> - 15-20 minutes daily is more effective than occasional long sessions.</li>
<li><strong>Vary your games</strong> - Rotate between all three <a href="/games/">games</a> to train different cognitive skills.</li>
<li><strong>Challenge yourself</strong> - Push to higher levels where you make mistakes - that's where learning happens.</li>
<li><strong>Stay consistent</strong> - Build a streak and make training a habit for best results.</li>
<li><strong>Get enough sleep</strong> - Sleep is crucial for memory consolidation and cognitive function.</li>
</ol>

<h2>Ready to Start Training?</h2>
<p>Start training with evidence-based cognitive exercises. <a href="/games/">Play GURUKA's games</a> and experience evidence-based brain training for yourself.</p>

### The Science Behind Brain Training: What Research Really Says
URL: https://guruka.com/en/blog/science-behind-brain-training/
Description: Discover the evidence-based research behind cognitive training games and what science tells us about improving memory, processing speed, and mental agility.
Published: 2024-01-15
Updated: 2026-03-04
Keywords: brain training, cognitive science, neuroscience, memory improvement, processing speed, working memory

<p>Our <a href="/games/">games</a> at GURUKA are based on decades of cognitive psychology research. Here's what the science actually says about brain training and how to get the most out of your practice.</p>

<h2>Evidence-Based Approach</h2>
<p>GURUKA's games are designed based on well-established cognitive training paradigms from neuroscience research. Each game targets specific cognitive functions that researchers have explored under controlled conditions.</p>
<p>While the field of cognitive training continues to evolve, we've selected tasks with encouraging evidence suggesting potential improvements in trained abilities.</p>

<h2>Research Behind Each Game</h2>

<h3>Speed Match: Processing Speed Training</h3>
<p>Based on the n-back paradigm, one of the most researched cognitive training tasks.</p>
<p><strong>Key Research:</strong></p>
<ul>
<li><strong>Jaeggi et al. (2008)</strong> reported that n-back training may improve fluid intelligence, with benefits transferring to novel tasks. <a href="https://doi.org/10.1073/pnas.0801268105">DOI: 10.1073/pnas.0801268105</a></li>
<li><strong>Au et al. (2015)</strong> meta-analysis reported improvements in working memory from n-back training. <a href="https://doi.org/10.1037/xge0000009">DOI: 10.1037/xge0000009</a></li>
</ul>

<h3>Memory Matrix: Spatial Working Memory</h3>
<p>Targets the visuospatial sketchpad component of working memory.</p>
<p><strong>Key Research:</strong></p>
<ul>
<li><strong>Klingberg et al. (2002)</strong> demonstrated that spatial working memory training may lead to improvements in non-trained tasks. <a href="https://doi.org/10.1016/S0022-0965(02)00093-7">DOI: 10.1016/S0022-0965(02)00093-7</a></li>
<li><strong>Holmes et al. (2009)</strong> reported lasting improvements in working memory following adaptive spatial training. <a href="https://doi.org/10.1111/j.1469-7610.2009.02093.x">DOI: 10.1111/j.1469-7610.2009.02093.x</a></li>
</ul>

<h3>Sequence Recall: Dual-Task Training</h3>
<p>Combines multiple cognitive demands to train executive function.</p>
<p><strong>Key Research:</strong></p>
<ul>
<li><strong>Dahlin et al. (2008)</strong> updating training showed transfer effects to working memory tasks. <a href="https://doi.org/10.1111/j.1467-9280.2008.02204.x">DOI: 10.1111/j.1467-9280.2008.02204.x</a></li>
<li><strong>Karbach &amp; Kray (2009)</strong> task-switching training reported broad cognitive benefits across age groups. <a href="https://doi.org/10.1037/a0015012">DOI: 10.1037/a0015012</a></li>
</ul>

<h2>Important Caveats</h2>
<p>We believe in being transparent about what brain training can and cannot do:</p>
<ul>
<li>Individual results vary significantly based on baseline abilities and engagement</li>
<li>Transfer to real-world tasks is still debated in the scientific community</li>
<li>Consistency and effort matter more than total time spent</li>
<li>Brain training should complement, not replace, physical exercise, sleep, and social engagement</li>
<li>Claims of preventing dementia or significantly increasing IQ are not well-supported</li>
</ul>

<h2>Training Recommendations</h2>
<p>Based on the research, here are our recommendations for effective brain training:</p>
<ol>
<li><strong>Train regularly</strong> - 15-20 minutes daily is more effective than occasional long sessions</li>
<li><strong>Vary your games</strong> - Rotate between all three <a href="/games/">games</a> to train different cognitive skills</li>
<li><strong>Challenge yourself</strong> - Push to higher levels where you make mistakes - that's where learning happens</li>
<li><strong>Stay consistent</strong> - Build a streak and make training a habit for best results</li>
<li><strong>Get enough sleep</strong> - Sleep is crucial for memory consolidation and cognitive function</li>
</ol>

<h2>Start Your Training Journey</h2>
<p>Ready to put science into practice? Try <a href="/games/">GURUKA's games</a> and experience evidence-based brain training for yourself. Remember: the best results come from consistent practice and genuine engagement with the challenges.</p>

### 5 Benefits of Daily Brain Training (And How to Build the Habit)
URL: https://guruka.com/en/blog/daily-brain-training-benefits/
Description: Learn why consistent daily brain training is more effective than occasional long sessions, and discover practical tips for building a sustainable practice.
Published: 2024-01-10
Updated: 2026-03-04
Keywords: daily brain training, cognitive habits, memory exercises, mental fitness, brain health

<p>Just like physical exercise, your brain benefits most from regular, consistent practice. Here's why daily brain training matters and how to make it a lasting habit.</p>

<h2>Why Daily Practice Matters</h2>
<p>Many practitioners find that short, frequent training sessions work better than longer, sporadic ones. Here's what happens when you train your brain daily:</p>

<h3>1. Neuroplasticity in Action</h3>
<p>Your brain is constantly rewiring itself based on what you do. When you practice cognitive tasks daily, you strengthen the neural pathways involved in those skills. This is neuroplasticity at work - your brain may adapt and form new connections in response to repeated practice.</p>

<h3>2. Better Memory Consolidation</h3>
<p>Sleep plays a crucial role in consolidating what you learn. When you train daily, each night's sleep helps cement the improvements from that day's session. Skip days, and you miss these consolidation opportunities.</p>

<h3>3. Cumulative Skill Building</h3>
<p>Cognitive skills build on each other. Today's practice session builds on yesterday's improvements. This cumulative effect may be why consistent trainers sometimes experience breakthrough moments after weeks of steady practice.</p>

<h3>4. Supporting Cognitive Health</h3>
<p>Studies suggest that mentally engaging activities may help maintain cognitive function as we age. The "use it or lose it" principle applies to your brain - regular mental challenges help keep your cognitive abilities sharp.</p>

<h3>5. Improved Focus and Attention</h3>
<p>Daily training may help you get better at focusing. The games themselves require attention, and this translates to improved concentration in other areas of your life.</p>

<h2>Building Your Daily Brain Training Habit</h2>
<p>Knowing the benefits is one thing - actually building the habit is another. Here are proven strategies:</p>

<h3>Start Small</h3>
<p>Don't commit to 30 minutes right away. Start with just 5-10 minutes. It's easier to expand a small habit than to maintain an ambitious one.</p>

<h3>Stack It With Existing Habits</h3>
<p>Attach your training to something you already do daily. After your morning coffee. During your lunch break. Right before bed. This "habit stacking" makes it easier to remember.</p>

<h3>Track Your Streaks</h3>
<p>GURUKA tracks your daily streaks for a reason - seeing that number grow is motivating. Don't break the chain! Each day adds to your momentum.</p>

<h3>Train at the Same Time</h3>
<p>Pick a consistent time and protect it. Your brain loves routine, and training at the same time each day helps cement the habit.</p>

<h3>Remove Friction</h3>
<p>Keep the <a href="/games/">games</a> easily accessible. Set a daily reminder. Make it as easy as possible to start your training session.</p>

<h2>What Happens When You Miss a Day</h2>
<p>Life happens. You'll miss days occasionally. Here's the good news: one missed day doesn't erase your progress. Your brain retains the improvements you've built.</p>
<p>The key is getting back on track quickly. Don't let one missed day turn into two, then a week, then giving up entirely. Just start again tomorrow.</p>

<h2>The Optimal Training Schedule</h2>
<p>Based on research and user feedback, here's what we recommend:</p>
<ul>
<li><strong>Duration</strong>: 15-20 minutes per session</li>
<li><strong>Frequency</strong>: Daily, or at least 5 days per week</li>
<li><strong>Variety</strong>: Rotate between different <a href="/games/">games</a> to train various skills</li>
<li><strong>Intensity</strong>: Challenge yourself - growth happens at the edge of your abilities</li>
</ul>

<h2>Start Your Streak Today</h2>
<p>The best time to start a daily practice was yesterday. The second best time is today. Open <a href="/games/">GURUKA</a> and complete your first session. Tomorrow, do it again. Before you know it, you'll have built a habit that may benefit your brain over time.</p>
<p>Remember: consistency beats intensity. Five minutes every day is better than an hour once a week. Start where you are, and let the habit build naturally.</p>

### Memory Improvement: Techniques That Actually Work
URL: https://guruka.com/en/blog/memory-improvement-techniques/
Description: Explore popular memory enhancement techniques from cognitive science, including strategies you can apply during brain training and in everyday life.
Published: 2024-01-05
Updated: 2026-03-04
Keywords: memory improvement, memory techniques, cognitive enhancement, working memory, spatial memory

<p>Whether you're forgetting where you put your keys or struggling to remember names, there are well-known techniques that may help improve your memory. Here's what researchers have explored about memory enhancement.</p>

<h2>Understanding How Memory Works</h2>
<p>Before diving into techniques, it helps to understand the basics of memory:</p>
<p><strong>Working Memory</strong> is your brain's "workspace" - the active, temporary storage where you manipulate information. It's limited (about 4-7 items) and fleeting.</p>
<p><strong>Long-term Memory</strong> is your brain's permanent storage. Information must pass through working memory and be consolidated to reach long-term storage.</p>
<p><strong>Spatial Memory</strong> specifically handles locations and spatial relationships. This is what helps you navigate and remember where things are.</p>

<h2>Techniques That Work</h2>

<h3>1. Chunking</h3>
<p>Your working memory can hold about 7 items - but those "items" can be groups. Instead of remembering the number 1-9-4-5-1-7-7-6, chunk it as 1945-1776 (two historical dates). Suddenly, 8 digits become 2 items.</p>
<p><strong>Apply it</strong>: When playing <a href="/games/memory-matrix/">Memory Matrix</a>, look for patterns in the highlighted squares. Group them into shapes or familiar patterns.</p>

<h3>2. Spaced Repetition</h3>
<p>Information sticks better when you review it at increasing intervals. Rather than cramming, space out your practice over time.</p>
<p><strong>Apply it</strong>: This is why daily training works better than weekly marathon sessions. Each session reinforces previous learning.</p>

<h3>3. Active Recall</h3>
<p>Passively reading something is less effective than actively trying to recall it. Testing yourself strengthens memories more than re-reading.</p>
<p><strong>Apply it</strong>: Don't just look at game patterns - actively try to recall them. The struggle of retrieval strengthens the memory.</p>

<h3>4. Method of Loci (Memory Palace)</h3>
<p>Associate items you want to remember with locations in a familiar place. Mentally "walk through" the space to recall the items.</p>
<p><strong>How it works</strong>: Imagine placing items you need to remember in different rooms of your house. To recall them, mentally walk through each room.</p>

<h3>5. Dual Coding</h3>
<p>Encode information both verbally and visually. Pictures + words are more memorable than either alone.</p>
<p><strong>Apply it</strong>: In <a href="/games/sequence-recall/">Sequence Recall</a>, don't just see the numbers - verbalize them in your head too. Engaging multiple senses strengthens encoding.</p>

<h3>6. Elaborative Encoding</h3>
<p>Connect new information to what you already know. The more connections, the stronger the memory.</p>
<p><strong>Example</strong>: Remember a person's name by connecting it to someone else you know with that name, or to the name's meaning.</p>

<h2>Brain Training and Memory</h2>
<p>Games like GURUKA's target specific memory systems:</p>
<p><strong><a href="/games/speed-match/">Speed Match</a></strong> trains working memory updating - the ability to hold and manipulate information quickly.</p>
<p><strong><a href="/games/memory-matrix/">Memory Matrix</a></strong> targets spatial working memory - your ability to remember locations and patterns.</p>
<p><strong><a href="/games/sequence-recall/">Sequence Recall</a></strong> challenges both systems simultaneously, plus attention and executive function.</p>

<h2>Lifestyle Factors That Matter</h2>
<p>Memory techniques work better when your brain is in good shape:</p>

<h3>Sleep</h3>
<p>During sleep, your brain consolidates memories. Skimp on sleep, and you'll struggle to form new memories. Aim for 7-9 hours.</p>

<h3>Exercise</h3>
<p>Physical exercise increases blood flow to the brain and promotes neurogenesis (new brain cells). Even a daily walk helps.</p>

<h3>Stress Management</h3>
<p>Chronic stress impairs memory formation and recall. Find healthy ways to manage stress.</p>

<h3>Social Engagement</h3>
<p>Social interaction is cognitively demanding in good ways. Regular social activity helps maintain cognitive function.</p>

<h3>Diet</h3>
<p>A Mediterranean-style diet rich in fruits, vegetables, fish, and healthy fats supports brain health.</p>

<h2>Putting It All Together</h2>
<p>Memory improvement isn't about one magic technique - it's about:</p>
<ol>
<li><strong>Understanding</strong> how memory works</li>
<li><strong>Training</strong> specific memory systems through targeted practice</li>
<li><strong>Using</strong> memory techniques in daily life</li>
<li><strong>Supporting</strong> your brain with healthy lifestyle choices</li>
</ol>
<p>Start with the basics: get enough sleep, exercise regularly, and practice consistently. Add memory techniques as you go. Over time, you'll notice real improvements in your ability to remember.</p>

<h2>Your Memory Training Plan</h2>
<p>Ready to improve your memory? Here's a simple plan:</p>
<ol>
<li><strong>Train daily</strong> with <a href="/games/">GURUKA games</a> for 15-20 minutes</li>
<li><strong>Rotate between games</strong> to work different memory systems</li>
<li><strong>Apply chunking</strong> when patterns seem overwhelming</li>
<li><strong>Use active recall</strong> - really try to remember before giving up</li>
<li><strong>Support your practice</strong> with good sleep and exercise</li>
</ol>
<p>Memory is a skill. Like any skill, it can benefit from deliberate practice. Start today.</p>