emojesis

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <title>EMOJESIS — a tiny universe made of symbols</title>
  <meta name="description" content="EMOJESIS: a tiny universe made of symbols. Combine four primordial emojis into weather, life, civilization, and stranger things. No accounts, no tracking, no ads.">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <link rel="manifest" href="manifest.webmanifest">
  <meta name="theme-color" content="#a3501c">
  <link rel="alternate" type="application/atom+xml" title="EMOJESIS updates" href="feed.xml">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <a class="skip-link" href="#creation">Skip to the laboratory</a>

  <div id="live" class="sr-only" aria-live="polite"></div>

  <header class="site-header">
    <div class="brand">
      <button id="titleEmoji" class="title-emoji" aria-label="EMOJESIS logo" title="EMOJESIS">🌌</button>
      <div class="brand-text">
        <h1>EMOJESIS</h1>
        <p class="tagline">A tiny universe made of symbols.</p>
      </div>
    </div>
    <nav class="header-actions" aria-label="Game actions">
      <button id="btnDaily"  class="hbtn" aria-label="Daily challenge" title="Daily challenge">📅<span id="dailyDot" class="dot" hidden></span></button>
      <button id="btnHint"   class="hbtn" aria-label="Use a hint" title="Hint"><span aria-hidden="true">💡</span><span id="hintCount" class="badge">3</span></button>
      <button id="btnStats"  class="hbtn" aria-label="Statistics" title="Statistics">📊</button>
      <button id="btnAbout"  class="hbtn" aria-label="About and settings" title="About &amp; settings">ℹ️</button>
      <button id="btnSound"  class="hbtn" aria-label="Toggle sound" title="Sound">🔊</button>
      <button id="btnTheme"  class="hbtn" aria-label="Toggle theme" title="Theme">🌗</button>
    </nav>
  </header>

  <!-- World view: a quiet sky/land/sea strip that fills in as you discover -->
  <section id="world" class="world" aria-label="Your world">
    <button id="worldToggle" class="world-toggle" aria-expanded="true" aria-controls="worldStrip">🗺️ world</button>
    <div id="worldStrip" class="world-strip">
      <div class="w-band w-band-sky">
        <div class="w-slot w-sky"   data-el="sun"><span>☀️</span></div>
        <div class="w-slot w-sky"   data-el="moon"><span>🌙</span></div>
        <div class="w-slot w-sky anim-twinkle" data-el="star"><span>⭐</span></div>
        <div class="w-slot w-sky anim-drift"   data-el="cloud"><span>☁️</span></div>
        <div class="w-slot w-sky anim-fall"    data-el="rain"><span>🌧️</span></div>
        <div class="w-slot w-sky"   data-el="rainbow"><span>🌈</span></div>
        <div class="w-slot w-sky anim-drift"   data-el="satellite"><span>🛰️</span></div>
        <div class="w-slot w-sky anim-hover"   data-el="ufo"><span>🛸</span></div>
        <div class="w-slot w-air anim-flap"    data-el="bird"><span>🐦</span></div>
        <div class="w-slot w-air anim-flap"    data-el="owl"><span>🦉</span></div>
      </div>
      <div class="w-band w-band-land">
        <div class="w-slot w-land"  data-el="mountain"><span>⛰️</span></div>
        <div class="w-slot w-land anim-sway"   data-el="tree"><span>🌳</span></div>
        <div class="w-slot w-land anim-sway"   data-el="forest"><span>🌲</span></div>
        <div class="w-slot w-land anim-sway"   data-el="flower"><span>🌸</span></div>
        <div class="w-slot w-land"  data-el="house"><span>🏠</span></div>
        <div class="w-slot w-land"  data-el="city"><span>🏙️</span></div>
        <div class="w-slot w-land anim-hover"  data-el="robot"><span>🤖</span></div>
        <div class="w-slot w-land anim-rise"   data-el="rocket"><span>🚀</span></div>
        <div class="w-slot w-misc anim-hover"  data-el="ghost"><span>👻</span></div>
      </div>
      <div class="w-band w-band-sea">
        <div class="w-slot w-sea  anim-bob"    data-el="fish"><span>🐟</span></div>
        <div class="w-slot w-sea  anim-bob"    data-el="whale"><span>🐋</span></div>
        <div class="w-slot w-sea"   data-el="ocean"><span>🌊</span></div>
      </div>
    </div>
  </section>

  <main id="main">
    <!-- Creation area -->
    <section id="creation" class="creation" aria-label="Combination laboratory">
      <div class="slots">
        <button id="slotA" class="slot" aria-label="First ingredient slot. Empty." data-filled="false">
          <span class="slot-emoji" aria-hidden="true">·</span>
          <span class="slot-name">first</span>
        </button>
        <span class="plus" aria-hidden="true">+</span>
        <button id="slotB" class="slot" aria-label="Second ingredient slot. Empty." data-filled="false">
          <span class="slot-emoji" aria-hidden="true">·</span>
          <span class="slot-name">second</span>
        </button>
      </div>
      <div class="creation-actions">
        <button id="btnSwap"    class="abtn" aria-label="Swap the two ingredients" title="Swap" disabled>⇄</button>
        <button id="btnCombine" class="combine-btn" disabled>Combine ✨</button>
        <button id="btnRepeat"  class="abtn" aria-label="Repeat last successful combination" title="Repeat last combination" disabled>⟳</button>
        <button id="btnClear"   class="abtn" aria-label="Clear both slots" title="Clear slots" disabled>✕</button>
      </div>
      <div id="comboHistory" class="combo-history" aria-label="Recent combinations"></div>
      <div id="result" class="result" aria-hidden="true">
        <span id="resultEmoji" class="result-emoji"></span>
        <span id="resultName" class="result-name"></span>
      </div>
      <p id="message" class="message">Combine two symbols and see what happens.</p>
      <p id="dailyLine" class="daily-line" hidden></p>
    </section>

    <!-- Inventory -->
    <section id="inventory" class="inventory" aria-label="Your collection">
      <div class="inv-head">
        <button id="invToggle" class="inv-toggle" aria-expanded="true" aria-controls="invBody">
          🎒 Collection <span id="invCount" class="inv-count"></span>
        </button>
        <div id="invBody" class="inv-body">
          <div class="inv-tools">
            <input id="invSearch" type="search" placeholder="Search elements…" aria-label="Search elements by name">
            <select id="invSort" aria-label="Sort elements">
              <option value="order">Discovery order</option>
              <option value="alpha">Alphabetical</option>
            </select>
            <button id="invFav" class="chip" aria-pressed="false" title="Show favorites only">⭐</button>
          </div>
          <div id="invCats" class="inv-cats" role="group" aria-label="Filter by category"></div>
          <div id="invGrid" class="inv-grid"></div>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <span>EMOJESIS — a tiny universe made of symbols · Pablo Murad, 2026 ·
      <a href="https://github.com/pablomurad/emojesis" rel="me noopener">source</a> ·
      <button id="footAbout" class="linklike">about</button> ·
      <button id="footTerminal" class="linklike mono" aria-label="Open terminal">&gt;_</button>
    </span>
  </footer>

  <!-- Daily challenge modal -->
  <div id="modalDaily" class="modal" role="dialog" aria-modal="true" aria-labelledby="dailyTitle" hidden>
    <div class="modal-card">
      <h2 id="dailyTitle">📅 Daily challenge</h2>
      <p id="dailyGoal" class="daily-goal"></p>
      <p id="dailyProgress" class="muted"></p>
      <pre id="dailyShare" class="share-block" aria-label="Shareable result"></pre>
      <div class="modal-actions">
        <button id="btnCopyDaily" class="abtn">Copy result</button>
        <button class="abtn modal-close" data-close="modalDaily">Close</button>
      </div>
    </div>
  </div>

  <!-- Stats modal -->
  <div id="modalStats" class="modal" role="dialog" aria-modal="true" aria-labelledby="statsTitle" hidden>
    <div class="modal-card">
      <h2 id="statsTitle">📊 Notebook margins</h2>
      <dl id="statsList" class="stats-list"></dl>
      <div class="modal-actions">
        <button class="abtn modal-close" data-close="modalStats">Close</button>
      </div>
    </div>
  </div>

  <!-- Journal (element detail) modal -->
  <div id="modalJournal" class="modal" role="dialog" aria-modal="true" aria-labelledby="journalTitle" hidden>
    <div class="modal-card">
      <div id="journalBody"></div>
      <div class="modal-actions">
        <button id="journalUse" class="abtn">Send to slot</button>
        <button class="abtn modal-close" data-close="modalJournal">Close</button>
      </div>
    </div>
  </div>

  <!-- About / settings modal -->
  <div id="modalAbout" class="modal" role="dialog" aria-modal="true" aria-labelledby="aboutTitle" hidden>
    <div class="modal-card">
      <h2 id="aboutTitle">ℹ️ About EMOJESIS</h2>
      <p><strong>EMOJESIS</strong> — a tiny universe made of symbols. You begin with four primordial
      emojis and combine them into weather, life, civilization, and stranger things.</p>
      <p>Developed by <strong>Pablo Murad</strong> (2026). No accounts, no tracking, no ads, no currencies.
      Your universe lives in your browser and nowhere else.</p>
      <ul class="about-links">
        <li><a href="https://github.com/pablomurad/emojesis" rel="me noopener">Source code</a></li>
        <li><a href="CHANGELOG.md">Changelog</a></li>
        <li><a href="feed.xml">Update feed (Atom)</a></li>
        <li><a href="README.md">README</a></li>
      </ul>
      <h3>Settings</h3>
      <div class="settings-grid">
        <label>Theme
          <select id="setTheme">
            <option value="auto">Follow system</option>
            <option value="light">Light</option>
            <option value="dark">Dark</option>
          </select>
        </label>
        <label class="checkline"><input type="checkbox" id="setSound"> Sound effects</label>
      </div>
      <div class="modal-actions wrap">
        <button id="btnExport" class="abtn">Export save</button>
        <button id="btnImport" class="abtn">Import save</button>
        <input type="file" id="importFile" accept="application/json,.json" hidden>
        <button id="btnReset" class="abtn danger">Reset universe</button>
      </div>
      <div id="resetConfirm" class="reset-confirm" hidden>
        <p>Everything you discovered will be forgotten. Really?</p>
        <button id="btnResetYes" class="abtn danger">Yes, forget it all</button>
        <button id="btnResetNo" class="abtn">Keep my universe</button>
      </div>
      <div class="modal-actions">
        <button class="abtn modal-close" data-close="modalAbout">Close</button>
      </div>
    </div>
  </div>

  <!-- Terminal easter egg -->
  <div id="modalTerm" class="modal" role="dialog" aria-modal="true" aria-labelledby="termTitle" hidden>
    <div class="modal-card term-card">
      <h2 id="termTitle" class="mono">guest@emojesis:~</h2>
      <div id="termOut" class="term-out mono" aria-live="polite"></div>
      <form id="termForm" class="term-form mono">
        <span aria-hidden="true">&gt;&nbsp;</span>
        <input id="termInput" type="text" autocomplete="off" spellcheck="false" aria-label="Terminal input" placeholder="type 'help'">
      </form>
      <div class="modal-actions">
        <button class="abtn modal-close" data-close="modalTerm">Close</button>
      </div>
    </div>
  </div>

  <!-- Onboarding -->
  <div id="onboarding" class="onboarding" role="dialog" aria-modal="true" aria-labelledby="obTitle" hidden>
    <div class="ob-card">
      <h2 id="obTitle">EMOJESIS</h2>
      <p class="tagline">A tiny universe made of symbols.</p>
      <div class="ob-primordials" aria-label="The four primordial elements">
        <span class="ob-el" data-el="fire">🔥<small>Fire</small></span>
        <span class="ob-el" data-el="water">💧<small>Water</small></span>
        <span class="ob-el" data-el="earth">🪨<small>Earth</small></span>
        <span class="ob-el" data-el="air">💨<small>Air</small></span>
      </div>
      <p>Everything begins with four symbols. Combine them and see what happens.</p>
      <p class="ob-hint">Try <span class="mono">🔥 + 💧</span> — or don't. The universe is patient.</p>
      <button id="btnBegin" class="combine-btn">Begin</button>
    </div>
  </div>

  <div id="secretFlash" class="secret-flash" aria-hidden="true"></div>

  <div id="toasts" class="toasts" aria-hidden="false"></div>

  <script src="js/data.js"></script>
  <script src="js/app.js"></script>
</body>
</html>