helg
/
wordle


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560
							<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wordle Clone Brainstorm</title>
<style>
  /* ===== RESET & BASE ===== */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #0b0f14;
    color: #e2e8f0;
    line-height: 1.6;
    overflow-x: hidden;
  }

  /* ===== CUSTOM PROPERTIES ===== */
  :root {
    --green:  #6aaa64;
    --yellow: #c9b458;
    --gray:   #787c7e;
    --darkest:#0b0f14;
    --card:   #161b22;
    --card-hover: #1c2330;
    --text:   #e2e8f0;
    --muted:  #8b949e;
    --amber:  #d2991d;
    --accent: #58a6ff;
    --tile-size: 52px;
    --gap: 6px;
  }

  /* ===== TILE UTILITY ===== */
  .tile {
    width: var(--tile-size); height: var(--tile-size);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.5rem; text-transform: uppercase;
    border-radius: 4px; transition: transform 0.3s, background 0.3s;
  }
  .tile.green  { background: var(--green);  color: #fff; }
  .tile.yellow { background: var(--yellow); color: #fff; }
  .tile.gray   { background: var(--gray);   color: #fff; }
  .tile.empty  { background: transparent; border: 2px solid #30363d; color: var(--muted); }

  /* ===== HERO ===== */
  .hero {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 2rem; text-align: center;
    position: relative;
  }
  .hero-grid { display: flex; gap: var(--gap); margin-bottom: 2rem; flex-wrap: wrap; justify-content: center; }
  .hero h1 { font-size: clamp(2rem, 6vw, 4rem); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
  .hero .subtitle { color: var(--muted); font-size: 1.15rem; max-width: 520px; }
  .hero .meta { margin-top: 2rem; color: #484f58; font-size: 0.85rem; }
  .scroll-hint {
    position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
    animation: bob 2s ease-in-out infinite; color: var(--muted); font-size: 0.8rem;
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  @keyframes bob { 0%,100%{opacity:0.3;transform:translateX(-50%) translateY(0)} 50%{opacity:1;transform:translateX(-50%) translateY(8px)} }

  /* ===== SECTION COMMON ===== */
  section { padding: 5rem 2rem; max-width: 1100px; margin: 0 auto; }
  .section-label {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em;
    color: var(--muted); margin-bottom: 0.75rem;
  }
  .section-title { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; margin-bottom: 2.5rem; }
  .section-desc { color: var(--muted); max-width: 640px; margin-bottom: 2.5rem; font-size: 1.05rem; }

  /* ===== SCAMPER SECTION ===== */
  #scamper { }
  .scamper-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
  }
  .scamper-card {
    background: var(--card); border-radius: 12px; padding: 1.5rem 1rem;
    text-align: center; cursor: pointer; transition: all 0.3s;
    border: 1px solid transparent; position: relative; overflow: hidden;
  }
  .scamper-card:hover { background: var(--card-hover); border-color: #30363d; transform: translateY(-4px); }
  .scamper-card .letter {
    font-size: 3rem; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, var(--green), var(--accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .scamper-card .label { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; }
  .scamper-card .ideas { margin-top: 0.8rem; font-size: 0.82rem; color: #c9d1d9; line-height: 1.5; display: none; }
  .scamper-card.expanded .ideas { display: block; }
  .scamper-card.expanded { border-color: #30363d; box-shadow: 0 0 30px rgba(106,170,100,0.10); }
  .scamper-card .divider { width: 30px; height: 2px; background: #30363d; margin: 0.7rem auto; border-radius: 1px; }

  /* ===== WHAT IF SECTION ===== */
  #whatif { position: relative; }
  .branch-tree { position: relative; padding-left: 2rem; }
  .branch-tree::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; background: linear-gradient(to bottom, var(--green), #30363d 60%, #30363d);
    border-radius: 1px;
  }
  .branch-node { position: relative; margin-bottom: 2.5rem; padding-left: 2rem; }
  .branch-node::before {
    content: ''; position: absolute; left: -2rem; top: 1.2rem;
    width: 2rem; height: 2px; background: #30363d;
  }
  .branch-node .q {
    font-weight: 700; font-size: 1.1rem; color: var(--accent);
    margin-bottom: 0.4rem;
  }
  .branch-node .a {
    color: var(--muted); font-size: 0.95rem;
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  }
  .branch-node .a .verdict {
    display: inline-block; padding: 0.15rem 0.6rem; border-radius: 20px;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .verdict.accept { background: rgba(106,170,100,0.18); color: var(--green); }
  .verdict.reject { background: rgba(120,124,126,0.18); color: var(--gray); }
  .verdict.later  { background: rgba(201,180,88,0.18);  color: var(--yellow); }

  /* ===== WORST POSSIBLE IDEA SECTION ===== */
  #worstidea {
    background: #f0f0f0; color: #1a1a2e; border-radius: 20px;
    position: relative; overflow: hidden;
  }
  #worstidea .section-label { color: #6b7280; }
  #worstidea .section-title { color: #1a1a2e; }
  #worstidea .section-desc { color: #4b5563; }
  .glitch-container { position: relative; }
  .worst-idea-card {
    background: #fff; border-radius: 12px; padding: 2rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    position: relative;
  }
  .worst-idea-card .bad-idea {
    font-size: 1.4rem; font-weight: 800; color: #dc2626;
    text-decoration: line-through; text-decoration-color: #fca5a5;
    margin-bottom: 0.5rem;
  }
  .worst-idea-card .realization {
    font-size: 1.05rem; color: #059669; font-weight: 600; margin-top: 1.5rem;
    padding-top: 1.5rem; border-top: 1px solid #e5e7eb;
  }
  .worst-idea-card .realization::before { content: '→  '; color: var(--green); }
  .glitch-ghost {
    position: absolute; top: 0; left: 0; right: 0; pointer-events: none;
    color: rgba(220,38,38,0.06); font-size: 6rem; font-weight: 900;
    text-align: center; line-height: 1; user-select: none;
    transform: translateY(-20%);
  }

  /* ===== KILL THE CROWN JEWEL SECTION ===== */
  #crownjewel { text-align: center; }
  .crown-tiles { display: flex; gap: var(--gap); justify-content: center; margin: 2rem 0; flex-wrap: wrap; }
  .cj-tile {
    width: 64px; height: 64px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 1.6rem; color: #fff;
    transition: all 0.6s cubic-bezier(0.34,1.56,0.64,1);
  }
  .cj-tile.g  { background: var(--green);  }
  .cj-tile.y  { background: var(--yellow); }
  .cj-tile.w  { background: var(--gray);   }
  .cj-tile.shatter { filter: blur(8px); opacity: 0.2; transform: scale(0.8) rotate(15deg); }
  .realization-text {
    font-size: 1.2rem; color: var(--green); font-weight: 700;
    max-width: 600px; margin: 0 auto; opacity: 0; transition: opacity 0.8s 0.4s;
  }
  .realization-text.visible { opacity: 1; }

  /* ===== SYNTHESIS (CLIMAX) ===== */
  #synthesis { position: relative; }
  .synthesis-diagram {
    display: flex; justify-content: center; margin: 3rem 0;
    position: relative;
  }
  .synth-svg { width: 100%; max-width: 800px; height: auto; }
  .synth-node { fill: var(--card); stroke: #30363d; stroke-width: 1.5; }
  .synth-node.core { fill: #1a3320; stroke: var(--green); stroke-width: 2; }
  .synth-label { fill: var(--text); font-size: 11px; font-family: 'Segoe UI', system-ui, sans-serif; text-anchor: middle; }
  .synth-label.core { fill: var(--green); font-weight: 700; font-size: 13px; }
  .synth-line { stroke: #30363d; stroke-width: 1.5; fill: none; }
  .synth-line.hot { stroke: var(--green); stroke-width: 2; opacity: 0.6; }
  .synth-line.warm { stroke: var(--yellow); stroke-width: 1.5; opacity: 0.5; }

  /* ===== INSIGHTS ===== */
  #insights { }
  .insight-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
  .insight-card {
    background: var(--card); border-radius: 12px; padding: 2rem;
    border-left: 4px solid var(--green);
    transition: transform 0.3s;
  }
  .insight-card:hover { transform: translateY(-3px); }
  .insight-card .num {
    font-size: 2.5rem; font-weight: 900; color: rgba(106,170,100,0.15);
    line-height: 1; margin-bottom: 0.5rem;
  }
  .insight-card .title { font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; color: var(--text); }
  .insight-card .detail { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }

  /* ===== ANIMATIONS ===== */
  @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
  .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
  .reveal.visible { opacity: 1; transform: translateY(0); }

  /* ===== TILE WAVE (HERO) ===== */
  @keyframes tilePop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
  .tile-pop { animation: tilePop 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 640px) {
    section { padding: 3rem 1rem; }
    .scamper-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    .hero h1 { font-size: 1.8rem; }
    .tile { width: 40px; height: 40px; font-size: 1.1rem; }
    .cj-tile { width: 48px; height: 48px; font-size: 1.2rem; }
    #worstidea { border-radius: 12px; padding: 2rem 1rem; }
  }
</style>
</head>
<body>

<!-- ===== HERO ===== -->
<section class="hero">
  <div class="hero-grid" id="heroTiles"></div>
  <h1>BUILDING A BETTER WORDLE</h1>
  <p class="subtitle">A brainstorm session exploring what a Wordle clone becomes when you question every assumption — then rebuild from first principles.</p>
  <p class="meta">July 7, 2026 &nbsp;·&nbsp; SCAMPER &nbsp;·&nbsp; What If &nbsp;·&nbsp; Worst Possible Idea &nbsp;·&nbsp; Kill the Crown Jewel</p>
  <div class="scroll-hint">Scroll to explore</div>
</section>

<!-- ============================================================ -->
<!-- SCAMPER METHOD -->
<!-- ============================================================ -->
<section id="scamper" class="reveal">
  <div class="section-label">Technique One</div>
  <h2 class="section-title">The SCAMPER Method</h2>
  <p class="section-desc">
    Seven lenses applied to the core Wordle formula. Each letter opens a door to a different kind of reinvention — substitute the familiar, combine the unexpected, adapt to the player, modify what matters, put the mechanic to new use, eliminate the unnecessary, reverse the perspective.
  </p>
  <div class="scamper-grid">
    <div class="scamper-card" onclick="this.classList.toggle('expanded')">
      <div class="letter">S</div><div class="label">Substitute</div><div class="divider"></div>
      <div class="ideas">Variable word-length mode (3–7 letters) for fresh challenge dimensions. The 5-letter anchor stays for daily play, but substitution opens the game to broader word discovery.</div>
    </div>
    <div class="scamper-card" onclick="this.classList.toggle('expanded')">
      <div class="letter">C</div><div class="label">Combine</div><div class="divider"></div>
      <div class="ideas">Post-solve learning layer: definition, etymology, example sentence, and illustration. The game becomes a vocabulary builder — each solve is a micro-lesson you actually remember.</div>
    </div>
    <div class="scamper-card" onclick="this.classList.toggle('expanded')">
      <div class="letter">A</div><div class="label">Adapt</div><div class="divider"></div>
      <div class="ideas">Adaptive difficulty driven by global averages. Words self-sort into tiers — no pre-labeling. A hidden MMR/skill rating drifts with each performance, surfaced only as earned badges.</div>
    </div>
    <div class="scamper-card" onclick="this.classList.toggle('expanded')">
      <div class="letter">M</div><div class="label">Modify</div><div class="divider"></div>
      <div class="ideas">Percentile ranking instead of absolute position. "Top 15%" means something — "#14,327" means nothing. Streaks weighted by word difficulty: five hard-word wins beats ten easy ones.</div>
    </div>
    <div class="scamper-card" onclick="this.classList.toggle('expanded')">
      <div class="letter">P</div><div class="label">Put to Use</div><div class="divider"></div>
      <div class="ideas">Computer-guess subgame: you pick the word, the solver plays it back. Teaches strategy through observation. Optimal solver replays become a teaching moment post-solve.</div>
    </div>
    <div class="scamper-card" onclick="this.classList.toggle('expanded')">
      <div class="letter">E</div><div class="label">Eliminate</div><div class="divider"></div>
      <div class="ideas">No penalty for fast guessing — speed doesn't prove skill. No user-submitted words — curation matters. No obscure/archaic words — only vocabulary with recent internet-frequency usage.</div>
    </div>
    <div class="scamper-card" onclick="this.classList.toggle('expanded')">
      <div class="letter">R</div><div class="label">Reverse</div><div class="divider"></div>
      <div class="ideas">Reverse the roles. A computer-guess subgame where the player sets the target and watches the machine deduce. It measures true word complexity and teaches optimal strategy by demonstration.</div>
    </div>
  </div>
</section>

<!-- ============================================================ -->
<!-- WHAT IF SCENARIOS -->
<!-- ============================================================ -->
<section id="whatif" class="reveal">
  <div class="section-label">Technique Two</div>
  <h2 class="section-title">What If Scenarios</h2>
  <p class="section-desc">
    Diverge without restraint. Each "what if" opens a branch — some lead to features, some to dead ends, and some reshape the entire product architecture. The branches that survive are the ones worth building.
  </p>
  <div class="branch-tree">
    <div class="branch-node">
      <div class="q">What if the daily word was just the beginning?</div>
      <div class="a"><span class="verdict accept">accepted</span> Daily word first, then prompt to continue — infinite play after the daily event. Two modes, one session.</div>
    </div>
    <div class="branch-node">
      <div class="q">What if we couldn't trust community-submitted words?</div>
      <div class="a"><span class="verdict reject">rejected</span> No user submissions. Word bank curated from recent internet-frequency usage only — nothing obscure, nothing archaic, everything solvable.</div>
    </div>
    <div class="branch-node">
      <div class="q">What if word length was variable?</div>
      <div class="a"><span class="verdict later">post-v1</span> 3-to-7-letter mode unlocks entirely new strategy spaces. Daily word stays at 5 — the variable mode is an optional skill expander.</div>
    </div>
    <div class="branch-node">
      <div class="q">What if position didn't matter?</div>
      <div class="a"><span class="verdict later">post-v1</span> Position-blind mode: yellow and gray only, no greens. A hard-mode variant that forces pure letter-set reasoning without positional crutches.</div>
    </div>
    <div class="branch-node">
      <div class="q">What if the target word changed each guess?</div>
      <div class="a"><span class="verdict later">post-v1</span> Rotating target — chaotic, disorienting, possibly brilliant. A variant for players who've mastered the standard constraints and crave chaos.</div>
    </div>
    <div class="branch-node">
      <div class="q">What if two players raced on the same word?</div>
      <div class="a"><span class="verdict later">post-v1</span> Real-time 2-player mode. Same word, simultaneous guesses. Social Wordle without the toxicity of direct competition — you share the word, not the scoreboard.</div>
    </div>
  </div>
</section>

<!-- ============================================================ -->
<!-- WORST POSSIBLE IDEA -->
<!-- ============================================================ -->
<section id="worstidea" class="reveal">
  <div class="section-label">Technique Three</div>
  <h2 class="section-title">Worst Possible Idea</h2>
  <p class="section-desc" style="color:#4b5563;">
    Sometimes you find the boundary by crossing it. The worst ideas are mirrors — they show you, by inversion, what you actually value. Here, the worst idea revealed the irreducible core of the game.
  </p>
  <div class="glitch-container">
    <div class="glitch-ghost" aria-hidden="true">WORST IDEA</div>
    <div class="worst-idea-card">
      <div class="bad-idea">Replace green / yellow / gray position feedback with a single numeric distance score.</div>
      <p style="color:#4b5563; margin-top:0.8rem;">
        A single number — say, a Levenshtein distance or similarity percentage — replaces the colored tiles. No positional hints. No letter-level feedback. Just one opaque score per guess.
      </p>
      <div class="realization">
        Position feedback isn't decoration — it's the compression algorithm that makes 5-letter words solvable in 6 attempts. Without it, you'd need 12+ guesses. The green/yellow/gray system is a brilliantly efficient information channel. It stays.
      </div>
    </div>
  </div>
</section>

<!-- ============================================================ -->
<!-- KILL THE CROWN JEWEL -->
<!-- ============================================================ -->
<section id="crownjewel" class="reveal">
  <div class="section-label">Technique Four</div>
  <h2 class="section-title">Kill the Crown Jewel</h2>
  <p class="section-desc">
    The crown jewel of Wordle is its tri-color position feedback. What if we killed it? Below, the tiles shatter — and what emerges from the wreckage is the realization of why they're indispensable.
  </p>
  <div class="crown-tiles" id="crownTiles">
    <div class="cj-tile g">G</div>
    <div class="cj-tile y">Y</div>
    <div class="cj-tile w">W</div>
    <div class="cj-tile g">G</div>
    <div class="cj-tile y">Y</div>
  </div>
  <button id="killBtn" style="
    background: transparent; border: 2px solid #30363d; color: var(--muted);
    padding: 0.6rem 1.8rem; border-radius: 24px; cursor: pointer;
    font-size: 0.9rem; letter-spacing: 0.05em; transition: all 0.3s;
    margin-bottom: 1.5rem;
  " onmouseover="this.style.borderColor='#f85149';this.style.color='#f85149'"
     onmouseout="this.style.borderColor='#30363d';this.style.color='var(--muted)'">
    KILL THE CROWN JEWEL
  </button>
  <div class="realization-text" id="cjRealization">
    Green / yellow / gray feedback is the irreducible minimum. It's the game's entire information architecture compressed into three colors. Remove it and you don't have a harder Wordle — you don't have Wordle at all. The constraint of 5 letters and 6 attempts only works <em>because</em> each guess delivers 5 data points of positional truth. Kill the crown jewel and the whole system collapses. So we keep it — and build everything else around it.
  </div>
</section>

<!-- ============================================================ -->
<!-- SYNTHESIS — THE CLIMAX -->
<!-- ============================================================ -->
<section id="synthesis" class="reveal">
  <div class="section-label">Synthesis</div>
  <h2 class="section-title">The Unified System</h2>
  <p class="section-desc">
    Every surviving idea from every technique converges into a single coherent architecture. The solver engine is the gravitational center — it drives difficulty tiering, validates word solvability, generates baseline percentiles, and powers the teaching layer. Everything connects.
  </p>

  <div class="synthesis-diagram">
    <svg class="synth-svg" viewBox="0 0 800 620" xmlns="http://www.w3.org/2000/svg">

      <!-- Connection lines -->
      <!-- Core to Tiering -->
      <line class="synth-line hot" x1="400" y1="200" x2="160" y2="340"/>
      <!-- Core to Percentile -->
      <line class="synth-line hot" x1="400" y1="200" x2="400" y2="370"/>
      <!-- Core to Adaptive/MMR -->
      <line class="synth-line hot" x1="400" y1="200" x2="640" y2="340"/>
      <!-- Core to Word Curation -->
      <line class="synth-line warm" x1="400" y1="200" x2="120" y2="510"/>
      <!-- Core to Learning -->
      <line class="synth-line warm" x1="400" y1="200" x2="400" y2="520"/>
      <!-- Core to Hints -->
      <line class="synth-line warm" x1="400" y1="200" x2="680" y2="510"/>
      <!-- Tiering to Adaptive -->
      <line class="synth-line warm" x1="160" y1="340" x2="640" y2="340"/>
      <!-- Tiering to Percentile -->
      <line class="synth-line warm" x1="160" y1="340" x2="400" y2="370"/>
      <!-- Percentile to Adaptive -->
      <line class="synth-line warm" x1="400" y1="370" x2="640" y2="340"/>
      <!-- Percentile to Streaks -->
      <line class="synth-line warm" x1="400" y1="370" x2="400" y2="460"/>
      <!-- Learning to Subgame -->
      <line class="synth-line warm" x1="400" y1="520" x2="260" y2="570"/>
      <!-- Hints to Retention -->
      <line class="synth-line warm" x1="680" y1="510" x2="540" y2="570"/>

      <!-- NODES -->

      <!-- Core Engine -->
      <rect class="synth-node core" x="310" y="145" width="180" height="55" rx="28"/>
      <text class="synth-label core" x="400" y="178">SOLVER ENGINE</text>

      <!-- Word Difficulty Tiering -->
      <rect class="synth-node" x="55" y="315" width="210" height="50" rx="10"/>
      <text class="synth-label" x="160" y="336">Word Difficulty Tiers</text>
      <text class="synth-label" x="160" y="352" style="fill:var(--muted);font-size:9px;">self-sorting by global averages</text>

      <!-- Percentile Ranking -->
      <rect class="synth-node" x="295" y="345" width="210" height="50" rx="10"/>
      <text class="synth-label" x="400" y="366">Percentile Ranking</text>
      <text class="synth-label" x="400" y="382" style="fill:var(--muted);font-size:9px;">computer baseline as reference</text>

      <!-- Adaptive Difficulty / MMR -->
      <rect class="synth-node" x="535" y="315" width="210" height="50" rx="10"/>
      <text class="synth-label" x="640" y="336">Adaptive Difficulty &amp; MMR</text>
      <text class="synth-label" x="640" y="352" style="fill:var(--muted);font-size:9px;">hidden skill rating, surfaceable badges</text>

      <!-- Quality-Weighted Streaks -->
      <rect class="synth-node" x="310" y="435" width="180" height="50" rx="10"/>
      <text class="synth-label" x="400" y="456">Quality Streaks</text>
      <text class="synth-label" x="400" y="472" style="fill:var(--muted);font-size:9px;">hard-word streak &gt; easy-word streak</text>

      <!-- Word Curation -->
      <rect class="synth-node" x="15" y="485" width="210" height="50" rx="10"/>
      <text class="synth-label" x="120" y="506">Word Curation</text>
      <text class="synth-label" x="120" y="522" style="fill:var(--muted);font-size:9px;">frequency-filtered, solvability-validated</text>

      <!-- Post-Solve Learning -->
      <rect class="synth-node" x="295" y="495" width="210" height="50" rx="10"/>
      <text class="synth-label" x="400" y="516">Post-Solve Learning Layer</text>
      <text class="synth-label" x="400" y="532" style="fill:var(--muted);font-size:9px;">definition · etymology · example · image</text>

      <!-- Standardized Hints -->
      <rect class="synth-node" x="575" y="485" width="210" height="50" rx="10"/>
      <text class="synth-label" x="680" y="506">Standardized Hints</text>
      <text class="synth-label" x="680" y="522" style="fill:var(--muted);font-size:9px;">6th-attempt safety net, fair to all</text>

      <!-- Computer Subgame -->
      <rect class="synth-node" x="155" y="555" width="210" height="50" rx="10"/>
      <text class="synth-label" x="260" y="576">Computer Subgame</text>
      <text class="synth-label" x="260" y="592" style="fill:var(--muted);font-size:9px;">teach strategy through solver replays</text>

      <!-- Retention -->
      <rect class="synth-node" x="435" y="555" width="210" height="50" rx="10"/>
      <text class="synth-label" x="540" y="576">Retention</text>
      <text class="synth-label" x="540" y="592" style="fill:var(--muted);font-size:9px;">daily → infinite flow, catch failing players</text>

      <!-- Flow annotations -->
      <text style="fill:var(--green);font-size:9px;opacity:0.7;" x="498" y="265">difficulty data</text>
      <text style="fill:var(--green);font-size:9px;opacity:0.7;" x="498" y="280">flows to all subsystems</text>

    </svg>
  </div>
</section>

<!-- ============================================================ -->
<!-- INSIGHTS -->
<!-- ============================================================ -->
<section id="insights" class="reveal">
  <div class="section-label">Takeaways</div>
  <h2 class="section-title">Four Insights That Define the Architecture</h2>
  <div class="insight-cards">
    <div class="insight-card">
      <div class="num">01</div>
      <div class="title">One Engine, Many Purposes</div>
      <div class="detail">The computer solver baseline isn't a feature — it's infrastructure. The same engine drives word difficulty tiering, percentile ranking baselines, solvability validation for curation, and the teaching replays. Build it once; it feeds everything.</div>
    </div>
    <div class="insight-card">
      <div class="num">02</div>
      <div class="title">Leaderboard Without Toxicity</div>
      <div class="detail">Percentile ranking and quality-weighted streaks together create competitive motivation without the zero-sum anxiety of absolute ranks. You're not #14,327 — you're in the top 12% on a hard-word streak. That feels earned, not compared.</div>
    </div>
    <div class="insight-card">
      <div class="num">03</div>
      <div class="title">The Solve Is Where Learning Begins</div>
      <div class="detail">Post-solve is the moment of maximum curiosity. Show the definition, etymology, and example sentence right then — plus an optimal solver replay. The player just invested mental effort in the word; now they'll actually remember what it means.</div>
    </div>
    <div class="insight-card">
      <div class="num">04</div>
      <div class="title">Standardized Hints Are a Retention Mechanic</div>
      <div class="detail">A weak hint on the 5th attempt and a stronger one on the 6th — identical for every player — catches struggling players before they bounce. Good players solve in 4 or fewer, so the hint doesn't distort stats. It just keeps people in the game.</div>
    </div>
  </div>
</section>

<!-- ============================================================ -->
<!-- FOOTER -->
<!-- ============================================================ -->
<footer style="text-align:center; padding:4rem 2rem; color:#30363d; font-size:0.8rem;">
  Wordle Clone Brainstorm &nbsp;·&nbsp; July 7, 2026 &nbsp;·&nbsp; 5-letter words &nbsp;·&nbsp; 6 attempts &nbsp;·&nbsp; infinite possibilities
</footer>

<!-- ============================================================ -->
<!-- SCRIPTS -->
<!-- ============================================================ -->
<script>
(function(){
  /* --- HERO TILE ANIMATION --- */
  const word = 'BRAINSTORM';
  const colors = ['green','gray','green','yellow','gray','green','green','yellow','gray','green'];
  const heroGrid = document.getElementById('heroTiles');
  word.split('').forEach((ch,i) => {
    const span = document.createElement('span');
    span.className = 'tile ' + colors[i] + ' tile-pop';
    span.style.animationDelay = (i * 0.08) + 's';
    span.textContent = ch;
    heroGrid.appendChild(span);
  });

  /* --- KILL THE CROWN JEWEL --- */
  const killBtn = document.getElementById('killBtn');
  const cjReal = document.getElementById('cjRealization');
  const tiles = document.querySelectorAll('.cj-tile');
  let killed = false;

  killBtn.addEventListener('click', () => {
    if (killed) {
      tiles.forEach(t => t.classList.remove('shatter'));
      cjReal.classList.remove('visible');
      killBtn.textContent = 'KILL THE CROWN JEWEL';
      killed = false;
    } else {
      tiles.forEach((t,i) => {
        setTimeout(() => t.classList.add('shatter'), i * 120);
      });
      setTimeout(() => cjReal.classList.add('visible'), 800);
      killBtn.textContent = 'RESTORE THE CROWN JEWEL';
      killed = true;
    }
  });

  /* --- SCROLL REVEAL --- */
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  }, { threshold: 0.15 });

  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

})();
</script>
</body>
</html>