<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Comparing Hero Archetypes</title>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .diagram-root {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Top Shared Archetype Banner */
    .archetype-banner {
      background: #ffffff;
      border: 2px solid #3b82f6;
      border-radius: 12px;
      padding: 10px 14px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
      position: relative;
    }

    .archetype-tag {
      display: inline-block;
      background: #3b82f6;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      padding: 2px 8px;
      border-radius: 12px;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .archetype-title {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.3;
    }

    .archetype-desc {
      font-size: 12px;
      color: #475569;
      margin-top: 2px;
    }

    /* Comparison Grid */
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      position: relative;
    }

    /* Character Column */
    .hero-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      border: 1px solid #e2e8f0;
      transition: box-shadow 0.2s ease;
    }

    .hero-card.fire {
      border-top: 4px solid #f97316;
    }

    .hero-card.water {
      border-top: 4px solid #06b6d4;
    }

    .hero-header {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .hero-avatar {
      font-size: 24px;
      line-height: 1;
      background: #f1f5f9;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-meta h3 {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
    }

    .hero-meta .story {
      font-size: 11px;
      color: #64748b;
      font-style: italic;
    }

    /* Trait / Parallel Rows */
    .attribute-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 4px;
    }

    .attribute-item {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .attribute-item.highlight {
      background: #eff6ff;
      border-color: #93c5fd;
      font-weight: 600;
    }

    .attr-icon {
      font-size: 14px;
      flex-shrink: 0;
    }

    .attr-label {
      color: #334155;
      line-height: 1.2;
    }

    /* Interactive Filter Controls */
    .controls {
      display: flex;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .btn-filter {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .btn-filter:hover {
      background: #f1f5f9;
      color: #0f172a;
    }

    .btn-filter.active {
      background: #3b82f6;
      border-color: #3b82f6;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
    }

    @media (max-width: 420px) {
      .hero-card {
        padding: 8px;
      }
      .attribute-item {
        font-size: 11px;
        padding: 5px 6px;
      }
      .archetype-title {
        font-size: 13px;
      }
      .archetype-desc {
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-root">
    
    <div class="archetype-banner" id="archetypeBanner">
      <span class="archetype-tag">Shared Archetype</span>
      <div class="archetype-title" id="archetypeTitle">THE HERO</div>
      <div class="archetype-desc" id="archetypeDesc">Leaves home on a dangerous mission to save their community.</div>
    </div>

    
    <div class="comparison-grid">
      
      <div class="hero-card fire">
        <div class="hero-header">
          <div class="hero-avatar">🌋</div>
          <div class="hero-meta">
            <h3>Leo</h3>
            <div class="story">The Fire Mountain</div>
          </div>
        </div>
        <div class="attribute-list">
          <div class="attribute-item" data-category="trait">
            <span class="attr-icon">🔨</span>
            <span class="attr-label">Brave Blacksmith</span>
          </div>
          <div class="attribute-item" data-category="quest">
            <span class="attr-icon">🔥</span>
            <span class="attr-label">Magical Embers</span>
          </div>
          <div class="attribute-item" data-category="goal">
            <span class="attr-icon">❄️</span>
            <span class="attr-label">Save Freezing Village</span>
          </div>
        </div>
      </div>

      
      <div class="hero-card water">
        <div class="hero-header">
          <div class="hero-avatar">🏝️</div>
          <div class="hero-meta">
            <h3>Anya</h3>
            <div class="story">Island of Whispers</div>
          </div>
        </div>
        <div class="attribute-list">
          <div class="attribute-item" data-category="trait">
            <span class="attr-icon">🤿</span>
            <span class="attr-label">Daring Diver</span>
          </div>
          <div class="attribute-item" data-category="quest">
            <span class="attr-icon">✨</span>
            <span class="attr-label">Luminous Pearl</span>
          </div>
          <div class="attribute-item" data-category="goal">
            <span class="attr-icon">🪸</span>
            <span class="attr-label">Save Dying Reef</span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn-filter active" data-filter="all">✦ All Parallels</button>
      <button class="btn-filter" data-filter="trait">👤 Character Traits</button>
      <button class="btn-filter" data-filter="quest">🗝️ Quest Items</button>
      <button class="btn-filter" data-filter="goal">🎯 Community Goals</button>
    </div>
  </div>

  <script>
    const filterData = {
      all: {
        title: "THE HERO",
        desc: "Leaves home on a dangerous mission to save their community."
      },
      trait: {
        title: "COURAGEOUS PROTAGONISTS",
        desc: "Both possess unique skills and courage needed for the journey."
      },
      quest: {
        title: "SACRED OBJECTS",
        desc: "Both must seek a rare magical item from a perilous place."
      },
      goal: {
        title: "SAVING THE COMMUNITY",
        desc: "Their motivation is selfless service to protect their home."
      }
    };

    const buttons = $$('.btn-filter');
    const items = $$('.attribute-item');
    const titleEl = $('#archetypeTitle');
    const descEl = $('#archetypeDesc');

    buttons.forEach(btn => {
      onTap(btn, () => {
        const filter = btn.dataset.filter;

        // Update active button
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        // Update archetype header info
        titleEl.textContent = filterData[filter].title;
        descEl.textContent = filterData[filter].desc;

        // Highlight matching attributes
        items.forEach(item => {
          if (filter === 'all' || item.dataset.category === filter) {
            item.classList.add('highlight');
          } else {
            item.classList.remove('highlight');
          }
        });
      });
    });

    // Initialize with all highlighted
    items.forEach(item => item.classList.add('highlight'));
  </script>
</body>
</html>

Comparing Character Types Across Stories

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
    }

    .diagram-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 520px;
    }

    .mentor-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: box-shadow 0.25s ease, border-color 0.25s ease;
      cursor: pointer;
    }

    .mentor-card.active {
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.18);
      border-color: #22b7ff;
    }

    .barnaby { border-top: 4px solid #f97316; }
    .tala { border-top: 4px solid #0ea5e9; }

    .mentor-header {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .avatar {
      font-size: 24px;
      line-height: 1;
    }

    .title {
      font-weight: 700;
      font-size: 14px;
      color: #0f172a;
      line-height: 1.2;
    }

    .role-tag {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }

    .item-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .tag-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #94a3b8;
    }

    .connector-row {
      display: flex;
      justify-content: space-around;
      width: 100%;
      max-width: 520px;
      color: #94a3b8;
      font-size: 18px;
      line-height: 1;
      padding: 4px 0;
    }

    .shared-badge {
      width: 100%;
      max-width: 520px;
      background: #f0fdf4;
      border: 1.5px solid #86efac;
      border-radius: 12px;
      padding: 10px 14px;
      text-align: center;
      transition: background 0.25s ease, border-color 0.25s ease;
    }

    .badge-title {
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #166534;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .badge-desc {
      font-size: 13px;
      font-weight: 600;
      color: #14532d;
      line-height: 1.3;
    }

    .formula {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
      font-size: 12px;
      font-weight: 700;
      color: #15803d;
    }

    .pill {
      background: #ffffff;
      padding: 2px 8px;
      border-radius: 6px;
      border: 1px solid #bbf7d0;
    }

    @media (max-width: 420px) {
      .diagram-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .connector-row {
        display: none;
      }
      .title { font-size: 13px; }
      .badge-desc { font-size: 12px; }
    }
  </style>
</head>
<body>

  <div class="diagram-grid">
    
    <div class="mentor-card barnaby" id="cardBarnaby">
      <div class="mentor-header">
        <span class="avatar">🔨</span>
        <div>
          <div class="title">Master Barnaby</div>
          <div class="role-tag">Elderly Blacksmith</div>
        </div>
      </div>
      <div class="item-box">
        <span>🧥</span>
        <div>
          <div class="tag-label">Survival Tool</div>
          <strong>Heat-Proof Cloak</strong>
        </div>
      </div>
      <div class="item-box">
        <span>💨</span>
        <div>
          <div class="tag-label">Ancient Wisdom</div>
          <strong>Mountain Winds</strong>
        </div>
      </div>
    </div>

    
    <div class="mentor-card tala" id="cardTala">
      <div class="mentor-header">
        <span class="avatar">⛵</span>
        <div>
          <div class="title">Grandmother Tala</div>
          <div class="role-tag">Elderly Navigator</div>
        </div>
      </div>
      <div class="item-box">
        <span>🧭</span>
        <div>
          <div class="tag-label">Survival Tool</div>
          <strong>Sea Compass</strong>
        </div>
      </div>
      <div class="item-box">
        <span>🌊</span>
        <div>
          <div class="tag-label">Ancient Wisdom</div>
          <strong>Ocean Currents</strong>
        </div>
      </div>
    </div>
  </div>

  
  <div class="connector-row" aria-hidden="true">
    <span>↘</span>
    <span>↙</span>
  </div>

  
  <div class="shared-badge">
    <div class="badge-title">✦ Shared Mentor Archetype ✦</div>
    <div class="formula">
      <span class="pill">Ancient Wisdom</span>
      <span>+</span>
      <span class="pill">Survival Tool</span>
    </div>
  </div>

  <script>
    const b = document.getElementById('cardBarnaby');
    const t = document.getElementById('cardTala');

    b.addEventListener('click', () => {
      b.classList.toggle('active');
      t.classList.remove('active');
    });

    t.addEventListener('click', () => {
      t.classList.toggle('active');
      b.classList.remove('active');
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
    }

    /* Filter Bar */
    .filter-bar {
      display: flex;
      gap: 6px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .filter-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .filter-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    }

    /* Table Grid */
    .comparison-table {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .table-header {
      display: grid;
      grid-template-columns: 1fr 1fr 1.2fr;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      padding: 0 4px;
    }
    .th-story1 { color: #c2410c; }
    .th-story2 { color: #0369a1; }
    .th-role { color: #6d28d9; }

    /* Comparison Rows */
    .comp-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1.2fr;
      gap: 8px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px;
      cursor: pointer;
      transition: opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
      align-items: stretch;
    }
    .comp-row.dimmed {
      opacity: 0.35;
    }
    .comp-row.focused {
      border-color: #8b5cf6;
      box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2), 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    /* Column Cells */
    .char-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 6px 4px;
      border-radius: 8px;
      gap: 2px;
    }
    .char-icon { font-size: 20px; line-height: 1.1; }
    .char-name { font-size: 13px; font-weight: 700; }
    .char-trait { font-size: 11px; opacity: 0.85; line-height: 1.2; }

    /* Story Theme Tints */
    .fire-theme {
      background: #fff7ed;
      border: 1px solid #fed7aa;
      color: #9a3412;
    }
    .ocean-theme {
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      color: #0369a1;
    }

    /* Role Archetype Card */
    .role-card {
      background: #faf5ff;
      border: 1px solid #ddd6fe;
      color: #5b21b6;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 6px;
      gap: 2px;
      position: relative;
    }
    .role-badge {
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .role-desc {
      font-size: 11px;
      font-weight: 500;
      color: #6d28d9;
      line-height: 1.2;
    }

    /* Bottom prompt */
    .prompt-text {
      text-align: center;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-top: 2px;
    }
  </style>
</head>
<body>

  
  <div class="filter-bar">
    <button class="filter-btn active" data-filter="all">All Roles</button>
    <button class="filter-btn" data-filter="hero">🛡️ Heroes</button>
    <button class="filter-btn" data-filter="mentor">📜 Mentors</button>
    <button class="filter-btn" data-filter="trickster">🎭 Tricksters</button>
  </div>

  
  <div class="table-header">
    <div class="th-story1">🌋 Fire Mountain</div>
    <div class="th-story2">🌊 Island Whispers</div>
    <div class="th-role">✦ Shared Archetype</div>
  </div>

  
  <div class="comparison-table">
    
    <div class="comp-row" data-type="hero">
      <div class="char-card fire-theme">
        <span class="char-icon">🔥</span>
        <span class="char-name">Leo</span>
        <span class="char-trait">Fire quest</span>
      </div>
      <div class="char-card ocean-theme">
        <span class="char-icon">🌊</span>
        <span class="char-name">Anya</span>
        <span class="char-trait">Ocean quest</span>
      </div>
      <div class="role-card">
        <div class="role-badge">🛡️ Hero</div>
        <div class="role-desc">Courageous savior</div>
      </div>
    </div>

    
    <div class="comp-row" data-type="mentor">
      <div class="char-card fire-theme">
        <span class="char-icon">🌪️</span>
        <span class="char-name">Barnaby</span>
        <span class="char-trait">Cloak & winds</span>
      </div>
      <div class="char-card ocean-theme">
        <span class="char-icon">🧭</span>
        <span class="char-name">Tala</span>
        <span class="char-trait">Compass & tides</span>
      </div>
      <div class="role-card">
        <div class="role-badge">📜 Mentor</div>
        <div class="role-desc">Wise teacher</div>
      </div>
    </div>

    
    <div class="comp-row" data-type="trickster">
      <div class="char-card fire-theme">
        <span class="char-icon">🐒</span>
        <span class="char-name">Pip</span>
        <span class="char-trait">Keys & shadows</span>
      </div>
      <div class="char-card ocean-theme">
        <span class="char-icon">🐬</span>
        <span class="char-name">Jax</span>
        <span class="char-trait">Bubbles & mimicry</span>
      </div>
      <div class="role-card">
        <div class="role-badge">🎭 Trickster</div>
        <div class="role-desc">Clever prankster</div>
      </div>
    </div>
  </div>

  <div class="prompt-text">Tap a row to compare character patterns</div>

  <script>
    const filterBtns = document.querySelectorAll('.filter-btn');
    const rows = document.querySelectorAll('.comp-row');

    function setFilter(type) {
      filterBtns.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.filter === type);
      });

      rows.forEach(row => {
        const matches = (type === 'all' || row.dataset.type === type);
        row.classList.toggle('dimmed', !matches);
        row.classList.toggle('focused', type !== 'all' && matches);
      });
    }

    filterBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        setFilter(btn.dataset.filter);
      });
    });

    rows.forEach(row => {
      row.addEventListener('click', () => {
        const currentType = row.dataset.type;
        const activeBtn = document.querySelector('.filter-btn.active');
        if (activeBtn && activeBtn.dataset.filter === currentType) {
          setFilter('all');
        } else {
          setFilter(currentType);
        }
      });
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 640px;
    }

    @media (max-width: 480px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .archetype-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
      position: relative;
    }

    .archetype-card:focus-visible {
      outline: 2px solid #22b7ff;
      outline-offset: 2px;
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #ffffff;
      padding: 4px 10px;
      border-radius: 20px;
      margin-bottom: 12px;
    }

    .card-hero .badge { background: #22b7ff; }
    .card-mentor .badge { background: #10b981; }
    .card-trickster .badge { background: #f59e0b; }

    .icon-box {
      font-size: 38px;
      line-height: 1;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
    }

    .title {
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 6px;
    }

    .desc {
      font-size: 13px;
      line-height: 1.35;
      color: #475569;
      margin-bottom: 10px;
    }

    .trait-tag {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #64748b;
      margin-top: auto;
      transition: background 0.25s ease, color 0.25s ease;
    }

    /* Selected / Active States */
    .card-hero.active {
      border-color: #22b7ff;
      box-shadow: 0 6px 18px rgba(34, 183, 255, 0.18);
      background: #f0f9ff;
    }
    .card-hero.active .trait-tag {
      background: #bae6fd;
      color: #0369a1;
    }

    .card-mentor.active {
      border-color: #10b981;
      box-shadow: 0 6px 18px rgba(16, 185, 129, 0.18);
      background: #f0fdf4;
    }
    .card-mentor.active .trait-tag {
      background: #bbf7d0;
      color: #15803d;
    }

    .card-trickster.active {
      border-color: #f59e0b;
      box-shadow: 0 6px 18px rgba(245, 158, 11, 0.18);
      background: #fffbeb;
    }
    .card-trickster.active .trait-tag {
      background: #fde68a;
      color: #b45309;
    }

    .hint {
      margin-top: 14px;
      font-size: 12px;
      color: #94a3b8;
      font-weight: 500;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="grid" role="tablist" aria-label="Character Archetypes">
    
    
    <div class="archetype-card card-hero active" onclick="selectCard(this)" tabindex="0" role="tab" aria-selected="true">
      <span class="badge">Archetype</span>
      <div class="icon-box">🛡️⚔️</div>
      <div class="title">The Hero</div>
      <div class="desc">Answers the call to adventure and faces danger.</div>
      <span class="trait-tag">Bravery &amp; Action</span>
    </div>

    
    <div class="archetype-card card-mentor" onclick="selectCard(this)" tabindex="0" role="tab" aria-selected="false">
      <span class="badge">Archetype</span>
      <div class="icon-box">📜🏮</div>
      <div class="title">The Mentor</div>
      <div class="desc">The wise guide who gives tools and advice.</div>
      <span class="trait-tag">Wisdom &amp; Guidance</span>
    </div>

    
    <div class="archetype-card card-trickster" onclick="selectCard(this)" tabindex="0" role="tab" aria-selected="false">
      <span class="badge">Archetype</span>
      <div class="icon-box">🎭🤹</div>
      <div class="title">The Trickster</div>
      <div class="desc">The clever rule-breaker who uses wit and pranks.</div>
      <span class="trait-tag">Wit &amp; Chaos</span>
    </div>

  </div>

  <div class="hint">Tap a card to highlight the archetype</div>

  <script>
    function selectCard(element) {
      document.querySelectorAll('.archetype-card').forEach(card => {
        card.classList.remove('active');
        card.setAttribute('aria-selected', 'false');
      });
      element.classList.add('active');
      element.setAttribute('aria-selected', 'true');
    }

    // Keyboard support for accessibility
    document.querySelectorAll('.archetype-card').forEach(card => {
      card.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          selectCard(card);
        }
      });
    });
  </script>
</body>
</html>

OGE.4.RL.8

Aligned learning resources

Related diagrams