Cards: Difference between revisions

From TimeRO Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
__NOTOC__
__NOTOC__
__NOEDITSECTION__
__NOEDITSECTION__
{{DISPLAYTITLE:Sistema de Cartas}}
<!-- TimeRO Wiki — Sistema de Cartas Balanceadas + Coleção -->
<!-- TimeRO Wiki — Sistema de Cartas Balanceadas + Coleção -->
<!-- Design: "Arcane Codex" — encyclopedia/database hybrid -->
<!-- Revised version: safe MediaWiki page, SQL-powered card database rendered by Common.js -->
<!-- Unique: live search, column sort, inline row detail, collection groups, changed-only filter -->


<div id="card-system-root" style="margin:-1em -1.5em;font-family:'Segoe UI',system-ui,sans-serif;background:#030408;min-height:100vh;color:#e8eef8;">
<div class="timero-wiki-root" id="card-system-root" style="
  margin:-1em -1.5em;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:
    radial-gradient(circle at 18% 0%, rgba(74,144,217,0.10), transparent 34%),
    radial-gradient(circle at 88% 24%, rgba(92,70,180,0.08), transparent 30%),
    linear-gradient(135deg, #050914 0%, #02050e 100%);
  min-height:100vh;
  color:#d8ecff;
">


<!-- ═══ HERO ═══════════════════════════════════════════════ -->
<!-- ═══════════════════════════════════════════════════════════
<div style="position:relative;background:linear-gradient(160deg,#020307 0%,#06040e 40%,#0b061a 65%,#040210 100%);padding:56px 64px 48px;overflow:hidden;border-bottom:1px solid rgba(124,106,255,0.18);">
    HERO
════════════════════════════════════════════════════════════ -->


  <!-- Arcane grid — violet tint -->
<div style="
  <div style="position:absolute;inset:0;background-image:linear-gradient(rgba(124,106,255,0.030) 1px,transparent 1px),linear-gradient(90deg,rgba(124,106,255,0.030) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,black 10%,transparent 80%);"></div>
  max-width:1280px;
  margin:0 auto;
  padding:54px 28px 28px;
">


  <!-- Rune circle decoration -->
<div style="
  <div style="position:absolute;top:-80px;right:6%;width:460px;height:460px;border-radius:50%;border:1px solid rgba(124,106,255,0.08);pointer-events:none;"></div>
  background:linear-gradient(135deg,rgba(5,10,22,0.97),rgba(2,5,14,0.99));
  <div style="position:absolute;top:-40px;right:9%;width:340px;height:340px;border-radius:50%;border:1px solid rgba(249,197,0,0.06);pointer-events:none;"></div>
   border:1px solid rgba(80,170,255,0.18);
   <div style="position:absolute;top:0;right:11.5%;width:220px;height:220px;border-radius:50%;border:1px solid rgba(124,106,255,0.05);display:flex;align-items:center;justify-content:center;font-size:4rem;opacity:0.06;pointer-events:none;">♦</div>
  border-radius:18px;
   <div style="position:absolute;bottom:-60px;left:5%;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(124,106,255,0.07),transparent 65%);pointer-events:none;"></div>
  padding:28px;
   box-shadow:0 0 30px rgba(0,0,0,0.35), inset 0 0 28px rgba(80,160,255,0.025);
  overflow:hidden;
  position:relative;
">


  <div style="position:relative;z-index:1;max-width:900px;">
<div style="
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 82% 10%, rgba(74,144,217,0.10), transparent 26%),
    radial-gradient(circle at 16% 90%, rgba(240,200,64,0.05), transparent 24%);
  pointer-events:none;
"></div>


    <!-- Breadcrumb -->
<div style="position:relative;z-index:1;">
    <div style="display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:0.78rem;color:rgba(122,144,176,0.60);">
      [[Main_Page|<span style="color:rgba(124,106,255,0.70);">TimeRO Wiki</span>]]
      <span style="opacity:0.4;">›</span>
      [[Systems|<span style="color:rgba(122,144,176,0.60);">Sistemas</span>]]
      <span style="opacity:0.4;">›</span>
      <span style="color:#e8eef8;">Sistema de Cartas</span>
    </div>


    <!-- Category pills -->
<div style="
    <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;">
  display:flex;
      <span style="display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:4px;background:rgba(124,106,255,0.16);border:1px solid rgba(124,106,255,0.38);font-size:0.66rem;letter-spacing:0.18em;text-transform:uppercase;color:#9d8fff;font-weight:900;">♦ Sistema Arcano</span>
  align-items:center;
      <span style="display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:4px;background:rgba(249,197,0,0.10);border:1px solid rgba(249,197,0,0.28);font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;color:#f9c500;font-weight:700;">✨ 47 Cartas Balanceadas</span>
  gap:8px;
      <span style="display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:4px;background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.22);font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;color:#00d4ff;font-weight:700;">📚 50 Cartas Documentadas</span>
  margin-bottom:18px;
      <span style="display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:4px;background:rgba(0,255,136,0.08);border:1px solid rgba(0,255,136,0.22);font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;color:#00ff88;font-weight:700;">🌟 10 Grupos de Coleção</span>
  font-size:0.78rem;
    </div>
  color:rgba(122,144,176,0.70);
">
  [[Main Page|<span style="color:#58d7ff;">TimeRO Wiki</span>]]
  <span style="opacity:0.45;">›</span>
  [[Systems|<span style="color:rgba(122,144,176,0.70);">Sistemas</span>]]
  <span style="opacity:0.45;">›</span>
  <span style="color:#d8ecff;">Sistema de Cartas</span>
</div>


    <!-- Title -->
<div style="
    <h1 style="font-size:clamp(2.2rem,5.5vw,4.2rem);font-weight:900;line-height:0.92;letter-spacing:-0.02em;color:#fff;margin:0 0 16px;">
  display:inline-flex;
      Sistema de<br>
  align-items:center;
      <span style="background:linear-gradient(90deg,#7c6aff,#b06cff,#f9c500);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 28px rgba(124,106,255,0.30));">Cartas Balanceadas</span>
  gap:8px;
    </h1>
  padding:4px 14px;
    <p style="font-size:1.05rem;color:rgba(176,192,224,0.75);line-height:1.75;max-width:680px;margin:0 0 28px;">Todas as cartas do TimeRO foram revisadas, rebalanceadas e integradas ao novo <strong style="color:#f9c500;">Sistema de Coleção</strong> — efeitos permanentes para toda a conta ao completar grupos temáticos.</p>
  border-radius:999px;
  background:rgba(74,144,217,0.10);
  border:1px solid rgba(74,144,217,0.25);
  margin-bottom:16px;
">
  <span style="font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;color:#58d7ff;font-weight:900;">◇ Sistema de Progressão</span>
</div>


    <!-- Quick stats -->
<div style="
    <div style="display:flex;gap:14px;flex-wrap:wrap;">
  font-size:clamp(2.2rem,5vw,4rem);
      <div style="padding:10px 18px;border-radius:10px;background:rgba(0,0,0,0.35);border:1px solid rgba(124,106,255,0.16);display:flex;align-items:center;gap:10px;">
  line-height:0.96;
        <span style="font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.55);font-weight:700;">Cartas alteradas:</span>
  font-weight:900;
        <span style="font-size:1rem;font-weight:900;color:#7c6aff;">47 / 50</span>
  color:#ffffff;
      </div>
  margin:0 0 18px 0;
      <div style="padding:10px 18px;border-radius:10px;background:rgba(0,0,0,0.35);border:1px solid rgba(249,197,0,0.14);display:flex;align-items:center;gap:10px;">
  letter-spacing:-0.035em;
        <span style="font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.55);font-weight:700;">Grupos de coleção:</span>
">
        <span style="font-size:1rem;font-weight:900;color:#f9c500;">10</span>
  Sistema de<br>
      </div>
  <span style="
      <div style="padding:10px 18px;border-radius:10px;background:rgba(0,0,0,0.35);border:1px solid rgba(0,212,255,0.12);display:flex;align-items:center;gap:10px;">
    background:linear-gradient(90deg,#58d7ff,#7c8cff,#f0c840);
        <span style="font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.55);font-weight:700;">Atualização:</span>
    -webkit-background-clip:text;
        <span style="font-size:1rem;font-weight:900;color:#00d4ff;">Mar 2025</span>
    background-clip:text;
      </div>
    color:transparent;
    </div>
    filter:drop-shadow(0 0 22px rgba(88,215,255,0.20));
  </div>
  ">Cartas Balanceadas</span>
</div>
</div>
<!-- /HERO -->


<div style="
  max-width:820px;
  color:rgba(180,205,230,0.78);
  font-size:1rem;
  line-height:1.72;
  margin-bottom:22px;
">
  O TimeRO reformula o valor das cartas dentro do universo Pré-Renewal: efeitos revisados, novas possibilidades de build e um sistema de coleção permanente para a conta. Cada carta pode ser útil como equipamento, como progressão de coleção ou como parte de estratégias específicas de classe.
</div>


<!-- ═══ SYSTEM EXPLAINER — HOW COLLECTION WORKS ═══════════ -->
<div style="
<div style="background:#05060e;padding:52px 64px;border-bottom:1px solid rgba(255,255,255,0.05);">
  display:grid;
   <div style="max-width:1060px;margin:0 auto;">
  grid-template-columns:repeat(4,minmax(0,1fr));
   gap:12px;
  margin-top:20px;
">


    <div style="text-align:center;margin-bottom:36px;">
<div style="background:rgba(0,0,0,0.24);border:1px solid rgba(88,215,255,0.18);border-radius:12px;padding:14px;text-align:center;">
      <div style="display:inline-flex;align-items:center;gap:8px;padding:4px 14px;border-radius:999px;background:rgba(249,197,0,0.08);border:1px solid rgba(249,197,0,0.22);margin-bottom:12px;">
  <div style="font-size:1.35em;margin-bottom:5px;">🃏</div>
        <span style="font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:#f9c500;font-weight:700;">// Como funciona</span>
  <div style="color:#58d7ff;font-weight:900;font-size:0.80rem;letter-spacing:0.08em;text-transform:uppercase;">Cartas</div>
      </div>
  <div style="color:#d8ecff;font-weight:bold;font-size:0.92rem;">Rebalanceadas</div>
      <h2 style="font-size:clamp(1.4rem,2.5vw,2rem);font-weight:900;color:#fff;margin:0 0 8px;border:none;">Sistema de Coleção de Cartas</h2>
</div>
      <p style="color:rgba(122,144,176,0.70);font-size:0.92rem;margin:0;">Um sistema de progressão de conta — bônus permanentes para todos os personagens.</p>
    </div>


    <!-- Horizontal step timeline -->
<div style="background:rgba(0,0,0,0.24);border:1px solid rgba(240,200,64,0.18);border-radius:12px;padding:14px;text-align:center;">
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-bottom:36px;">
  <div style="font-size:1.35em;margin-bottom:5px;">📚</div>
      <!-- Connecting line -->
  <div style="color:#f0c840;font-weight:900;font-size:0.80rem;letter-spacing:0.08em;text-transform:uppercase;">Coleção</div>
      <div style="position:absolute;top:32px;left:12.5%;right:12.5%;height:2px;background:linear-gradient(90deg,#7c6aff,#f9c500,#00ff88,#f9c500);opacity:0.28;pointer-events:none;"></div>
  <div style="color:#fff2bf;font-weight:bold;font-size:0.92rem;">Conta Inteira</div>
</div>


      <!-- Step 1 -->
<div style="background:rgba(0,0,0,0.24);border:1px solid rgba(112,216,144,0.18);border-radius:12px;padding:14px;text-align:center;">
      <div style="text-align:center;padding:0 12px;position:relative;">
  <div style="font-size:1.35em;margin-bottom:5px;">✨</div>
        <div style="width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,rgba(124,106,255,0.28),rgba(124,106,255,0.08));border:2px solid rgba(124,106,255,0.45);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 14px;position:relative;z-index:1;box-shadow:0 0 24px rgba(124,106,255,0.18);">🗡️</div>
  <div style="color:#70d890;font-weight:900;font-size:0.80rem;letter-spacing:0.08em;text-transform:uppercase;">Bônus</div>
        <div style="font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(124,106,255,0.70);font-weight:800;margin-bottom:5px;">PASSO 1</div>
  <div style="color:#d8ffe5;font-weight:bold;font-size:0.92rem;">Permanentes</div>
        <div style="font-size:0.92rem;font-weight:800;color:#fff;margin-bottom:6px;">Obter a carta</div>
</div>
        <div style="font-size:0.80rem;color:rgba(122,144,176,0.70);line-height:1.60;">Derrote o monstro correspondente e colete a carta no loot. Drop rate customizado no TimeRO.</div>
      </div>


      <!-- Step 2 -->
<div style="background:rgba(0,0,0,0.24);border:1px solid rgba(255,107,122,0.18);border-radius:12px;padding:14px;text-align:center;">
      <div style="text-align:center;padding:0 12px;position:relative;">
  <div style="font-size:1.35em;margin-bottom:5px;">⚔️</div>
        <div style="width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,rgba(249,197,0,0.22),rgba(249,197,0,0.06));border:2px solid rgba(249,197,0,0.38);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 14px;position:relative;z-index:1;box-shadow:0 0 24px rgba(249,197,0,0.14);">🃏</div>
  <div style="color:#ff6b7a;font-weight:900;font-size:0.80rem;letter-spacing:0.08em;text-transform:uppercase;">Builds</div>
        <div style="font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(249,197,0,0.70);font-weight:800;margin-bottom:5px;">PASSO 2</div>
  <div style="color:#ffd8dd;font-weight:bold;font-size:0.92rem;">Mais Variadas</div>
        <div style="font-size:0.92rem;font-weight:800;color:#fff;margin-bottom:6px;">Equipar em item</div>
</div>
        <div style="font-size:0.80rem;color:rgba(122,144,176,0.70);line-height:1.60;">Encaixe a carta no slot correto de um equipamento para ativar o efeito balanceado.</div>
      </div>


      <!-- Step 3 -->
</div>
      <div style="text-align:center;padding:0 12px;position:relative;">
        <div style="width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,rgba(0,212,255,0.22),rgba(0,212,255,0.06));border:2px solid rgba(0,212,255,0.35);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 14px;position:relative;z-index:1;box-shadow:0 0 24px rgba(0,212,255,0.12);">📚</div>
        <div style="font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(0,212,255,0.70);font-weight:800;margin-bottom:5px;">PASSO 3</div>
        <div style="font-size:0.92rem;font-weight:800;color:#fff;margin-bottom:6px;">Adicionar à Coleção</div>
        <div style="font-size:0.80rem;color:rgba(122,144,176,0.70);line-height:1.60;">Use o NPC ou comando do servidor para registrar a carta na Coleção da sua conta.</div>
      </div>


      <!-- Step 4 -->
</div>
      <div style="text-align:center;padding:0 12px;position:relative;">
</div>
        <div style="width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,rgba(0,255,136,0.22),rgba(0,255,136,0.06));border:2px solid rgba(0,255,136,0.35);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 14px;position:relative;z-index:1;box-shadow:0 0 24px rgba(0,255,136,0.12);">✨</div>
        <div style="font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(0,255,136,0.70);font-weight:800;margin-bottom:5px;">PASSO 4</div>
        <div style="font-size:0.92rem;font-weight:800;color:#fff;margin-bottom:6px;">Bônus Permanente</div>
        <div style="font-size:0.80rem;color:rgba(122,144,176,0.70);line-height:1.60;">Complete um grupo e ganhe bônus permanente em <strong style="color:#00ff88;">todos os personagens da conta</strong> para sempre.</div>
      </div>
    </div>


    <!-- Key rules -->
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;">
      <div style="padding:16px 18px;border-radius:14px;background:rgba(124,106,255,0.07);border:1px solid rgba(124,106,255,0.16);display:flex;align-items:flex-start;gap:12px;">
        <span style="font-size:1.2rem;flex-shrink:0;">🔒</span>
        <div>
          <div style="font-size:0.88rem;font-weight:800;color:#fff;margin-bottom:4px;">Irreversível</div>
          <div style="font-size:0.80rem;color:rgba(122,144,176,0.72);line-height:1.60;">Uma vez adicionada à coleção, a carta não pode ser removida. O bônus é permanente.</div>
        </div>
      </div>
      <div style="padding:16px 18px;border-radius:14px;background:rgba(249,197,0,0.06);border:1px solid rgba(249,197,0,0.14);display:flex;align-items:flex-start;gap:12px;">
        <span style="font-size:1.2rem;flex-shrink:0;">👥</span>
        <div>
          <div style="font-size:0.88rem;font-weight:800;color:#fff;margin-bottom:4px;">Toda a conta</div>
          <div style="font-size:0.80rem;color:rgba(122,144,176,0.72);line-height:1.60;">Os bônus de coleção se aplicam a todos os personagens da mesma conta, presentes e futuros.</div>
        </div>
      </div>
      <div style="padding:16px 18px;border-radius:14px;background:rgba(0,255,136,0.06);border:1px solid rgba(0,255,136,0.14);display:flex;align-items:flex-start;gap:12px;">
        <span style="font-size:1.2rem;flex-shrink:0;">📊</span>
        <div>
          <div style="font-size:0.88rem;font-weight:800;color:#fff;margin-bottom:4px;">Grupos Temáticos</div>
          <div style="font-size:0.80rem;color:rgba(122,144,176,0.72);line-height:1.60;">Cartas são agrupadas por raça de monstro. Complete cada grupo para desbloquear seu bônus único.</div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<!-- /EXPLAINER -->


<!-- ═══════════════════════════════════════════════════════════
    SYSTEM OVERVIEW
════════════════════════════════════════════════════════════ -->


<!-- ═══ CARD DATABASE — SEARCH + FILTER + TABLE ════════════ -->
<div style="max-width:1280px;margin:0 auto;padding:0 28px 30px;">
<div id="card-db-section" style="background:#030408;padding:52px 64px;border-bottom:1px solid rgba(255,255,255,0.05);">
  <div style="max-width:1280px;margin:0 auto;">


    <div style="text-align:center;margin-bottom:28px;">
<div style="
      <div style="display:inline-flex;align-items:center;gap:8px;padding:4px 14px;border-radius:999px;background:rgba(124,106,255,0.08);border:1px solid rgba(124,106,255,0.22);margin-bottom:12px;">
  display:grid;
        <span style="font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:#9d8fff;font-weight:700;">// Banco de Dados</span>
  grid-template-columns:1fr 1fr 1fr;
      </div>
  gap:16px;
      <h2 style="font-size:clamp(1.4rem,2.5vw,2rem);font-weight:900;color:#fff;margin:0 0 8px;border:none;">Todas as Cartas Balanceadas</h2>
  margin:0 0 28px 0;
      <p style="color:rgba(122,144,176,0.70);font-size:0.92rem;margin:0;">Clique em qualquer carta para ver efeito antigo vs novo e bônus de coleção.</p>
">
    </div>


    <!-- Search + Filter toolbar -->
<div style="
    <div style="background:rgba(0,0,0,0.32);border:1px solid rgba(124,106,255,0.14);border-radius:18px;padding:18px 22px;margin-bottom:18px;">
  background:linear-gradient(135deg,rgba(8,14,26,0.94),rgba(4,8,18,0.99));
      <div style="display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:14px;">
  border:1px solid rgba(88,215,255,0.18);
  border-left:5px solid #58d7ff;
  border-radius:14px;
  padding:20px;
">
  <div style="font-size:1.5em;margin-bottom:10px;">🔄</div>
  <div style="color:#58d7ff;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;font-size:0.86rem;margin-bottom:10px;">Efeitos Melhorados</div>
  <div style="color:rgba(180,205,230,0.74);font-size:0.90rem;line-height:1.68;">
    Cartas clássicas recebem efeitos revisados para gerar mais escolhas reais de build, evitando que apenas poucas cartas dominem todos os equipamentos.
  </div>
</div>


        <!-- Search input -->
<div style="
        <div style="flex:1;min-width:240px;position:relative;">
  background:linear-gradient(135deg,rgba(8,14,26,0.94),rgba(4,8,18,0.99));
          <span style="position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:0.90rem;opacity:0.45;">🔍</span>
  border:1px solid rgba(240,200,64,0.18);
          <input id="card-search" type="text" oninput="searchCards()" placeholder="Buscar por nome, ID ou monstro..." style="width:100%;padding:10px 12px 10px 36px;border-radius:10px;background:rgba(0,0,0,0.40);border:1px solid rgba(255,255,255,0.09);color:#e8eef8;font-size:0.90rem;font-family:inherit;outline:none;transition:border-color 0.18s;">
  border-left:5px solid #f0c840;
        </div>
  border-radius:14px;
  padding:20px;
">
  <div style="font-size:1.5em;margin-bottom:10px;">📚</div>
  <div style="color:#f0c840;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;font-size:0.86rem;margin-bottom:10px;">Coleção de Conta</div>
  <div style="color:rgba(220,205,160,0.78);font-size:0.90rem;line-height:1.68;">
    Cartas registradas na coleção desbloqueiam progresso permanente vinculado à conta. Todos os personagens se beneficiam do avanço.
  </div>
</div>


        <!-- Changed-only toggle -->
<div style="
        <label style="display:inline-flex;align-items:center;gap:9px;cursor:pointer;padding:9px 16px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);font-size:0.82rem;font-weight:700;color:rgba(122,144,176,0.70);user-select:none;white-space:nowrap;" for="changed-toggle">
  background:linear-gradient(135deg,rgba(8,14,26,0.94),rgba(4,8,18,0.99));
          <input type="checkbox" id="changed-toggle" onchange="toggleChangedOnly()" style="accent-color:#7c6aff;width:16px;height:16px;">
  border:1px solid rgba(112,216,144,0.18);
          ⚡ Apenas alteradas
  border-left:5px solid #70d890;
        </label>
  border-radius:14px;
  padding:20px;
">
  <div style="font-size:1.5em;margin-bottom:10px;">🧬</div>
  <div style="color:#70d890;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;font-size:0.86rem;margin-bottom:10px;">Valor Permanente</div>
  <div style="color:rgba(190,230,200,0.76);font-size:0.90rem;line-height:1.68;">
    Mesmo cartas simples continuam relevantes, porque podem completar grupos, liberar bônus e fortalecer a conta a longo prazo.
  </div>
</div>


        <!-- Results counter -->
</div>
        <div id="card-count-badge" style="padding:9px 16px;border-radius:10px;background:rgba(124,106,255,0.09);border:1px solid rgba(124,106,255,0.20);font-size:0.80rem;font-weight:800;color:#9d8fff;white-space:nowrap;">50 cartas</div>
      </div>


      <!-- Category filter tabs -->
</div>
      <div style="display:flex;gap:0;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.07);width:fit-content;">
        <button id="cat-all"      onclick="filterCategory('all')"    style="padding:8px 16px;border:none;background:linear-gradient(135deg,rgba(124,106,255,0.22),rgba(124,106,255,0.10));color:#9d8fff;font-size:0.78rem;font-weight:900;cursor:pointer;font-family:inherit;border-right:1px solid rgba(255,255,255,0.07);letter-spacing:0.04em;">Todas</button>
        <button id="cat-weapon"  onclick="filterCategory('weapon')"  style="padding:8px 16px;border:none;background:transparent;color:rgba(255,61,90,0.65);font-size:0.78rem;font-weight:700;cursor:pointer;font-family:inherit;border-right:1px solid rgba(255,255,255,0.07);">⚔️ Armas</button>
        <button id="cat-armor"    onclick="filterCategory('armor')"  style="padding:8px 16px;border:none;background:transparent;color:rgba(0,212,255,0.65);font-size:0.78rem;font-weight:700;cursor:pointer;font-family:inherit;border-right:1px solid rgba(255,255,255,0.07);">🛡 Armaduras</button>
        <button id="cat-misc"    onclick="filterCategory('misc')"    style="padding:8px 16px;border:none;background:transparent;color:rgba(249,168,38,0.65);font-size:0.78rem;font-weight:700;cursor:pointer;font-family:inherit;border-right:1px solid rgba(255,255,255,0.07);">💎 Acessórios</button>
        <button id="cat-headgear" onclick="filterCategory('headgear')" style="padding:8px 16px;border:none;background:transparent;color:rgba(176,108,255,0.65);font-size:0.78rem;font-weight:700;cursor:pointer;font-family:inherit;">🎩 Headgear</button>
      </div>
    </div>


    <!-- Table shell -->
<!-- ═══════════════════════════════════════════════════════════
    <div style="border-radius:18px;overflow:hidden;border:1px solid rgba(124,106,255,0.14);background:rgba(3,4,10,0.96);">
    HOW COLLECTION WORKS
════════════════════════════════════════════════════════════ -->


      <!-- Table header -->
<div style="max-width:1280px;margin:0 auto;padding:0 28px 30px;">
      <div id="table-header" style="display:grid;grid-template-columns:70px 1fr 140px 100px 28px;gap:0;background:rgba(0,0,0,0.50);border-bottom:1px solid rgba(124,106,255,0.12);">
        <div class="th-cell sortable" data-col="id"      onclick="sortTable('id')"      style="padding:12px 14px;font-size:0.60rem;letter-spacing:0.14em;text-transform:uppercase;color:#9d8fff;font-weight:800;cursor:pointer;user-select:none;display:flex;align-items:center;gap:4px;border-right:1px solid rgba(255,255,255,0.05);">ID <span class="sort-ind" id="si-id">↕</span></div>
        <div class="th-cell sortable" data-col="name"    onclick="sortTable('name')"    style="padding:12px 14px;font-size:0.60rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(122,144,176,0.55);font-weight:700;cursor:pointer;user-select:none;display:flex;align-items:center;gap:4px;border-right:1px solid rgba(255,255,255,0.05);">Carta / Monstro <span class="sort-ind" id="si-name">↕</span></div>
        <div class="th-cell sortable" data-col="slot"    onclick="sortTable('slot')"    style="padding:12px 14px;font-size:0.60rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(122,144,176,0.55);font-weight:700;cursor:pointer;user-select:none;display:flex;align-items:center;gap:4px;border-right:1px solid rgba(255,255,255,0.05);">Slot <span class="sort-ind" id="si-slot">↕</span></div>
        <div class="th-cell"          style="padding:12px 14px;font-size:0.60rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(122,144,176,0.55);font-weight:700;border-right:1px solid rgba(255,255,255,0.05);">Status</div>
        <div class="th-cell"          style="padding:12px 14px;font-size:0.60rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(122,144,176,0.55);font-weight:700;"></div>
      </div>


      <!-- Table body — JS renders rows here -->
<div style="
      <div id="card-table-body"></div>
  background:linear-gradient(135deg,rgba(8,14,26,0.94),rgba(4,8,18,0.99));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  padding:24px;
  margin:0 0 30px 0;
">


      <!-- Empty state -->
<div style="
      <div id="table-empty" style="display:none;padding:48px;text-align:center;color:rgba(122,144,176,0.45);font-size:0.84rem;">
  background:linear-gradient(90deg,rgba(240,200,64,0.12),rgba(240,200,64,0.03),transparent);
        <div style="font-size:2rem;margin-bottom:10px;opacity:0.3;">🃏</div>
  border:1px solid rgba(240,200,64,0.16);
        Nenhuma carta encontrada.
  border-left:5px solid #f0c840;
      </div>
  border-radius:12px;
 
  padding:16px 18px;
     </div>
  margin:0 0 22px 0;
">
  <div style="color:#f0c840;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;font-size:0.86rem;margin-bottom:8px;">◇ Como funciona</div>
  <div style="color:#d8ecff;font-size:1.35rem;font-weight:900;margin-bottom:6px;">Sistema de Coleção de Cartas</div>
  <div style="color:rgba(180,205,230,0.74);font-size:0.92rem;line-height:1.65;">
     A coleção é uma progressão permanente de conta. Ao registrar cartas e completar grupos temáticos, o jogador libera bônus que continuam ativos independentemente do personagem usado.
   </div>
   </div>
</div>
</div>
<!-- /CARD DATABASE -->


<div style="
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
">


<!-- ═══ COLLECTION GROUPS ═════════════════════════════════ -->
<div style="background:rgba(0,0,0,0.24);border:1px solid rgba(88,215,255,0.18);border-radius:14px;padding:18px;text-align:center;">
<div id="collection-section" style="background:#05060e;padding:52px 64px;border-bottom:1px solid rgba(255,255,255,0.05);">
  <div style="width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:rgba(88,215,255,0.10);border:1px solid rgba(88,215,255,0.28);display:flex;align-items:center;justify-content:center;font-size:1.45em;">🗡️</div>
   <div style="max-width:1060px;margin:0 auto;">
   <div style="color:#58d7ff;font-size:0.70rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:900;margin-bottom:5px;">Passo 1</div>
  <div style="color:#ffffff;font-weight:900;margin-bottom:6px;">Obter a carta</div>
  <div style="color:rgba(180,205,230,0.70);font-size:0.82rem;line-height:1.58;">Derrote monstros e MVPs para obter cartas normais ou exclusivas do TimeRO.</div>
</div>


    <div style="text-align:center;margin-bottom:32px;">
<div style="background:rgba(0,0,0,0.24);border:1px solid rgba(240,200,64,0.18);border-radius:14px;padding:18px;text-align:center;">
      <div style="display:inline-flex;align-items:center;gap:8px;padding:4px 14px;border-radius:999px;background:rgba(249,197,0,0.08);border:1px solid rgba(249,197,0,0.22);margin-bottom:12px;">
  <div style="width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:rgba(240,200,64,0.10);border:1px solid rgba(240,200,64,0.28);display:flex;align-items:center;justify-content:center;font-size:1.45em;">🃏</div>
        <span style="font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:#f9c500;font-weight:700;">// Grupos de Coleção</span>
  <div style="color:#f0c840;font-size:0.70rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:900;margin-bottom:5px;">Passo 2</div>
      </div>
  <div style="color:#ffffff;font-weight:900;margin-bottom:6px;">Usar ou colecionar</div>
      <h2 style="font-size:clamp(1.4rem,2.5vw,2rem);font-weight:900;color:#fff;margin:0 0 8px;border:none;">Complete grupos para bônus permanentes</h2>
  <div style="color:rgba(220,205,160,0.74);font-size:0.82rem;line-height:1.58;">A carta pode ser equipada em um item ou enviada para a coleção da conta.</div>
      <p style="color:rgba(122,144,176,0.70);font-size:0.92rem;margin:0;">Clique em qualquer grupo para ver as cartas necessárias.</p>
</div>
    </div>


    <div style="display:flex;flex-direction:column;gap:10px;">
<div style="background:rgba(0,0,0,0.24);border:1px solid rgba(112,216,144,0.18);border-radius:14px;padding:18px;text-align:center;">
  <div style="width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:rgba(112,216,144,0.10);border:1px solid rgba(112,216,144,0.28);display:flex;align-items:center;justify-content:center;font-size:1.45em;">📚</div>
  <div style="color:#70d890;font-size:0.70rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:900;margin-bottom:5px;">Passo 3</div>
  <div style="color:#ffffff;font-weight:900;margin-bottom:6px;">Completar grupos</div>
  <div style="color:rgba(190,230,200,0.74);font-size:0.82rem;line-height:1.58;">Grupos temáticos de cartas liberam bônus quando os requisitos são atingidos.</div>
</div>


<div class="cg-card" data-group="novice" style="border-radius:16px;overflow:hidden;border:1px solid #00ff8826;background:rgba(0,0,0,0.28);">
<div style="background:rgba(0,0,0,0.24);border:1px solid rgba(255,107,122,0.18);border-radius:14px;padding:18px;text-align:center;">
  <div onclick="toggleGroup(this.closest('.cg-card'))" style="cursor:pointer;padding:16px 20px;display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;background:#00ff880d;">
  <div style="width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:rgba(255,107,122,0.10);border:1px solid rgba(255,107,122,0.28);display:flex;align-items:center;justify-content:center;font-size:1.45em;">✨</div>
    <div style="width:44px;height:44px;border-radius:12px;background:#00ff881a;border:1px solid #00ff8833;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;">🌿</div>
   <div style="color:#ff6b7a;font-size:0.70rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:900;margin-bottom:5px;">Passo 4</div>
    <div>
   <div style="color:#ffffff;font-weight:900;margin-bottom:6px;">Bônus permanente</div>
      <div style="font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:#00ff88;font-weight:800;margin-bottom:2px;">GRUPO · NOVICE</div>
  <div style="color:rgba(235,190,200,0.74);font-size:0.82rem;line-height:1.58;">O efeito de coleção passa a beneficiar a conta de forma permanente.</div>
      <div style="font-size:1rem;font-weight:900;color:#fff;">Iniciantes</div>
    </div>
    <div style="text-align:center;padding:6px 14px;border-radius:8px;background:rgba(0,0,0,0.30);border:1px solid rgba(255,255,255,0.07);">
      <div style="font-size:1.2rem;font-weight:900;color:#00ff88;">3</div>
      <div style="font-size:0.58rem;letter-spacing:0.10em;text-transform:uppercase;color:rgba(122,144,176,0.55);">Cartas</div>
    </div>
    <span class="cg-chevron" style="color:rgba(122,144,176,0.45);font-size:0.72rem;">▼</span>
  </div>
  <!-- Collection bonus strip -->
   <div style="padding:10px 20px;background:rgba(0,0,0,0.20);border-top:1px solid #00ff8818;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
    <span style="font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;">Bônus:</span>
    <span style="font-size:0.84rem;font-weight:700;color:#00ff88;">Lv.1 de todos os personagens da conta ganham +50 EXP base por kill.</span>
    <div style="margin-left:auto;font-size:0.68rem;color:rgba(122,144,176,0.50);">Min: 3 cartas</div>
  </div>
  <!-- Expandable card list -->
   <div class="cg-detail" style="display:none;padding:14px 20px 16px;border-top:1px solid rgba(255,255,255,0.05);">
    <div style="font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;margin-bottom:8px;">Cartas do grupo:</div>
    <div style="display:flex;flex-wrap:wrap;gap:6px;"><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Poring Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Lunatic Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Spore Card</span></div>
  </div>
</div>
</div>
<div class="cg-card" data-group="undead" style="border-radius:16px;overflow:hidden;border:1px solid #a0a0c026;background:rgba(0,0,0,0.28);">
 
  <div onclick="toggleGroup(this.closest('.cg-card'))" style="cursor:pointer;padding:16px 20px;display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;background:#a0a0c00d;">
    <div style="width:44px;height:44px;border-radius:12px;background:#a0a0c01a;border:1px solid #a0a0c033;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;">💀</div>
    <div>
      <div style="font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:#a0a0c0;font-weight:800;margin-bottom:2px;">GRUPO · UNDEAD</div>
      <div style="font-size:1rem;font-weight:900;color:#fff;">Mortos-Vivos</div>
    </div>
    <div style="text-align:center;padding:6px 14px;border-radius:8px;background:rgba(0,0,0,0.30);border:1px solid rgba(255,255,255,0.07);">
      <div style="font-size:1.2rem;font-weight:900;color:#a0a0c0;">9</div>
      <div style="font-size:0.58rem;letter-spacing:0.10em;text-transform:uppercase;color:rgba(122,144,176,0.55);">Cartas</div>
    </div>
    <span class="cg-chevron" style="color:rgba(122,144,176,0.45);font-size:0.72rem;">▼</span>
  </div>
  <!-- Collection bonus strip -->
  <div style="padding:10px 20px;background:rgba(0,0,0,0.20);border-top:1px solid #a0a0c018;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
    <span style="font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;">Bônus:</span>
    <span style="font-size:0.84rem;font-weight:700;color:#a0a0c0;">Resistência a Shadow +5% permanente em toda a conta.</span>
    <div style="margin-left:auto;font-size:0.68rem;color:rgba(122,144,176,0.50);">Min: 5 cartas</div>
  </div>
  <!-- Expandable card list -->
  <div class="cg-detail" style="display:none;padding:14px 20px 16px;border-top:1px solid rgba(255,255,255,0.05);">
    <div style="font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;margin-bottom:8px;">Cartas do grupo:</div>
    <div style="display:flex;flex-wrap:wrap;gap:6px;"><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Zombie Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Archer Skeleton Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Mummy Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Skeleton Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Skel-Worker Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Orc Zombie Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Orc Skeleton Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Verit Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Bathory Card</span></div>
  </div>
</div>
</div>
<div class="cg-card" data-group="aqua" style="border-radius:16px;overflow:hidden;border:1px solid #00d4ff26;background:rgba(0,0,0,0.28);">
 
  <div onclick="toggleGroup(this.closest('.cg-card'))" style="cursor:pointer;padding:16px 20px;display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;background:#00d4ff0d;">
    <div style="width:44px;height:44px;border-radius:12px;background:#00d4ff1a;border:1px solid #00d4ff33;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;">🌊</div>
    <div>
      <div style="font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:#00d4ff;font-weight:800;margin-bottom:2px;">GRUPO · AQUA</div>
      <div style="font-size:1rem;font-weight:900;color:#fff;">Aquáticos</div>
    </div>
    <div style="text-align:center;padding:6px 14px;border-radius:8px;background:rgba(0,0,0,0.30);border:1px solid rgba(255,255,255,0.07);">
      <div style="font-size:1.2rem;font-weight:900;color:#00d4ff;">5</div>
      <div style="font-size:0.58rem;letter-spacing:0.10em;text-transform:uppercase;color:rgba(122,144,176,0.55);">Cartas</div>
    </div>
    <span class="cg-chevron" style="color:rgba(122,144,176,0.45);font-size:0.72rem;">▼</span>
  </div>
  <!-- Collection bonus strip -->
  <div style="padding:10px 20px;background:rgba(0,0,0,0.20);border-top:1px solid #00d4ff18;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
    <span style="font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;">Bônus:</span>
    <span style="font-size:0.84rem;font-weight:700;color:#00d4ff;">+3% de drop rate de monstros aquáticos em toda a conta.</span>
    <div style="margin-left:auto;font-size:0.68rem;color:rgba(122,144,176,0.50);">Min: 4 cartas</div>
  </div>
  <!-- Expandable card list -->
  <div class="cg-detail" style="display:none;padding:14px 20px 16px;border-top:1px solid rgba(255,255,255,0.05);">
    <div style="font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;margin-bottom:8px;">Cartas do grupo:</div>
    <div style="display:flex;flex-wrap:wrap;gap:6px;"><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Thara Frog Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Hydra Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Marina Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Magnolia Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Marin Card</span></div>
  </div>
</div>
</div>
<div class="cg-card" data-group="brute" style="border-radius:16px;overflow:hidden;border:1px solid #f9a82626;background:rgba(0,0,0,0.28);">
 
  <div onclick="toggleGroup(this.closest('.cg-card'))" style="cursor:pointer;padding:16px 20px;display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;background:#f9a8260d;">
    <div style="width:44px;height:44px;border-radius:12px;background:#f9a8261a;border:1px solid #f9a82633;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;">🐾</div>
    <div>
      <div style="font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:#f9a826;font-weight:800;margin-bottom:2px;">GRUPO · BRUTE</div>
      <div style="font-size:1rem;font-weight:900;color:#fff;">Brutos</div>
    </div>
    <div style="text-align:center;padding:6px 14px;border-radius:8px;background:rgba(0,0,0,0.30);border:1px solid rgba(255,255,255,0.07);">
      <div style="font-size:1.2rem;font-weight:900;color:#f9a826;">12</div>
      <div style="font-size:0.58rem;letter-spacing:0.10em;text-transform:uppercase;color:rgba(122,144,176,0.55);">Cartas</div>
    </div>
    <span class="cg-chevron" style="color:rgba(122,144,176,0.45);font-size:0.72rem;">▼</span>
  </div>
  <!-- Collection bonus strip -->
  <div style="padding:10px 20px;background:rgba(0,0,0,0.20);border-top:1px solid #f9a82618;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
    <span style="font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;">Bônus:</span>
    <span style="font-size:0.84rem;font-weight:700;color:#f9a826;">AGI +2 permanente em toda a conta ao usar montaria.</span>
    <div style="margin-left:auto;font-size:0.68rem;color:rgba(122,144,176,0.50);">Min: 6 cartas</div>
  </div>
  <!-- Expandable card list -->
  <div class="cg-detail" style="display:none;padding:14px 20px 16px;border-top:1px solid rgba(255,255,255,0.05);">
    <div style="font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;margin-bottom:8px;">Cartas do grupo:</div>
    <div style="display:flex;flex-wrap:wrap;gap:6px;"><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Orc Warrior Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Caramel Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Hode Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Desert Wolf Babe Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Anacondaq Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Savage Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Wild Rose Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Peco Peco Egg Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Condor Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Smokie Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Familiar Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Coco Card</span></div>
  </div>
</div>
</div>
<div class="cg-card" data-group="insect" style="border-radius:16px;overflow:hidden;border:1px solid #a8d80026;background:rgba(0,0,0,0.28);">
 
  <div onclick="toggleGroup(this.closest('.cg-card'))" style="cursor:pointer;padding:16px 20px;display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;background:#a8d8000d;">
<!-- ═══════════════════════════════════════════════════════════
    <div style="width:44px;height:44px;border-radius:12px;background:#a8d8001a;border:1px solid #a8d80033;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;">🦟</div>
    IMPORTANT RULES
    <div>
════════════════════════════════════════════════════════════ -->
      <div style="font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:#a8d800;font-weight:800;margin-bottom:2px;">GRUPO · INSECT</div>
 
      <div style="font-size:1rem;font-weight:900;color:#fff;">Insetos</div>
<div style="max-width:1280px;margin:0 auto;padding:0 28px 30px;">
    </div>
 
    <div style="text-align:center;padding:6px 14px;border-radius:8px;background:rgba(0,0,0,0.30);border:1px solid rgba(255,255,255,0.07);">
<div style="
      <div style="font-size:1.2rem;font-weight:900;color:#a8d800;">9</div>
  display:grid;
      <div style="font-size:0.58rem;letter-spacing:0.10em;text-transform:uppercase;color:rgba(122,144,176,0.55);">Cartas</div>
  grid-template-columns:1fr 1fr 1fr;
    </div>
  gap:14px;
    <span class="cg-chevron" style="color:rgba(122,144,176,0.45);font-size:0.72rem;">▼</span>
">
   </div>
 
  <!-- Collection bonus strip -->
<div style="
  <div style="padding:10px 20px;background:rgba(0,0,0,0.20);border-top:1px solid #a8d80018;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
  background:linear-gradient(135deg,rgba(30,12,4,0.86),rgba(12,6,2,0.96));
    <span style="font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;">Bônus:</span>
  border:1px solid rgba(255,140,40,0.22);
    <span style="font-size:0.84rem;font-weight:700;color:#a8d800;">Dano a Insetos +5% permanente em toda a conta.</span>
   border-left:5px solid #f09030;
    <div style="margin-left:auto;font-size:0.68rem;color:rgba(122,144,176,0.50);">Min: 5 cartas</div>
  border-radius:14px;
   </div>
  padding:18px;
  <!-- Expandable card list -->
">
  <div class="cg-detail" style="display:none;padding:14px 20px 16px;border-top:1px solid rgba(255,255,255,0.05);">
   <div style="color:#f8b060;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;font-size:0.80rem;margin-bottom:8px;">⚠ Registro permanente</div>
    <div style="font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;margin-bottom:8px;">Cartas do grupo:</div>
  <div style="color:rgba(235,205,180,0.78);font-size:0.88rem;line-height:1.65;">
    <div style="display:flex;flex-wrap:wrap;gap:6px;"><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Andre Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Deniro Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Vitata Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Creamy Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Scorpion Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Hunter Fly Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Hornet Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Wormtail Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Rocker Card</span></div>
    Ao adicionar uma carta à coleção, ela será consumida pelo sistema. Confirme antes de registrar cartas indesejadas.
   </div>
   </div>
</div>
</div>
<div class="cg-card" data-group="plant" style="border-radius:16px;overflow:hidden;border:1px solid #ff8aad26;background:rgba(0,0,0,0.28);">
 
   <div onclick="toggleGroup(this.closest('.cg-card'))" style="cursor:pointer;padding:16px 20px;display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;background:#ff8aad0d;">
<div style="
    <div style="width:44px;height:44px;border-radius:12px;background:#ff8aad1a;border:1px solid #ff8aad33;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;">🌸</div>
   background:linear-gradient(135deg,rgba(8,14,26,0.94),rgba(4,8,18,0.99));
    <div>
  border:1px solid rgba(88,215,255,0.18);
      <div style="font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:#ff8aad;font-weight:800;margin-bottom:2px;">GRUPO · PLANT</div>
   border-left:5px solid #58d7ff;
      <div style="font-size:1rem;font-weight:900;color:#fff;">Plantas</div>
  border-radius:14px;
    </div>
  padding:18px;
    <div style="text-align:center;padding:6px 14px;border-radius:8px;background:rgba(0,0,0,0.30);border:1px solid rgba(255,255,255,0.07);">
">
      <div style="font-size:1.2rem;font-weight:900;color:#ff8aad;">6</div>
   <div style="color:#58d7ff;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;font-size:0.80rem;margin-bottom:8px;">👥 Toda a conta</div>
      <div style="font-size:0.58rem;letter-spacing:0.10em;text-transform:uppercase;color:rgba(122,144,176,0.55);">Cartas</div>
  <div style="color:rgba(180,205,230,0.74);font-size:0.88rem;line-height:1.65;">
    </div>
    Os bônus de coleção são pensados como progressão horizontal e podem beneficiar todos os personagens vinculados à conta.
    <span class="cg-chevron" style="color:rgba(122,144,176,0.45);font-size:0.72rem;">▼</span>
  </div>
   <!-- Collection bonus strip -->
  <div style="padding:10px 20px;background:rgba(0,0,0,0.20);border-top:1px solid #ff8aad18;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
    <span style="font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;">Bônus:</span>
    <span style="font-size:0.84rem;font-weight:700;color:#ff8aad;">Regen de HP natural +15% permanente em toda a conta.</span>
    <div style="margin-left:auto;font-size:0.68rem;color:rgba(122,144,176,0.50);">Min: 4 cartas</div>
  </div>
  <!-- Expandable card list -->
   <div class="cg-detail" style="display:none;padding:14px 20px 16px;border-top:1px solid rgba(255,255,255,0.05);">
    <div style="font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;margin-bottom:8px;">Cartas do grupo:</div>
    <div style="display:flex;flex-wrap:wrap;gap:6px;"><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Poporing Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Drops Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Elder Willow Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Flora Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Poison Spore Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Geographer Card</span></div>
   </div>
   </div>
</div>
</div>
<div class="cg-card" data-group="demon" style="border-radius:16px;overflow:hidden;border:1px solid #ff3d5a26;background:rgba(0,0,0,0.28);">
 
  <div onclick="toggleGroup(this.closest('.cg-card'))" style="cursor:pointer;padding:16px 20px;display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;background:#ff3d5a0d;">
<div style="
    <div style="width:44px;height:44px;border-radius:12px;background:#ff3d5a1a;border:1px solid #ff3d5a33;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;">😈</div>
  background:linear-gradient(135deg,rgba(8,24,14,0.88),rgba(3,12,8,0.98));
    <div>
  border:1px solid rgba(112,216,144,0.18);
      <div style="font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:#ff3d5a;font-weight:800;margin-bottom:2px;">GRUPO · DEMON</div>
  border-left:5px solid #70d890;
      <div style="font-size:1rem;font-weight:900;color:#fff;">Demônios</div>
  border-radius:14px;
    </div>
  padding:18px;
    <div style="text-align:center;padding:6px 14px;border-radius:8px;background:rgba(0,0,0,0.30);border:1px solid rgba(255,255,255,0.07);">
">
      <div style="font-size:1.2rem;font-weight:900;color:#ff3d5a;">1</div>
   <div style="color:#70d890;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;font-size:0.80rem;margin-bottom:8px;">🧩 Progressão por grupo</div>
      <div style="font-size:0.58rem;letter-spacing:0.10em;text-transform:uppercase;color:rgba(122,144,176,0.55);">Cartas</div>
   <div style="color:rgba(190,230,200,0.74);font-size:0.88rem;line-height:1.65;">
    </div>
     Cada grupo possui cartas necessárias, pontuação, efeito final e requisitos próprios definidos pelo banco de dados.
    <span class="cg-chevron" style="color:rgba(122,144,176,0.45);font-size:0.72rem;">▼</span>
  </div>
  <!-- Collection bonus strip -->
   <div style="padding:10px 20px;background:rgba(0,0,0,0.20);border-top:1px solid #ff3d5a18;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
    <span style="font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;">Bônus:</span>
    <span style="font-size:0.84rem;font-weight:700;color:#ff3d5a;">Max SP +5% permanente em toda a conta.</span>
    <div style="margin-left:auto;font-size:0.68rem;color:rgba(122,144,176,0.50);">Min: 1 cartas</div>
   </div>
  <!-- Expandable card list -->
  <div class="cg-detail" style="display:none;padding:14px 20px 16px;border-top:1px solid rgba(255,255,255,0.05);">
    <div style="font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;margin-bottom:8px;">Cartas do grupo:</div>
     <div style="display:flex;flex-wrap:wrap;gap:6px;"><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Succubus Card</span></div>
   </div>
   </div>
</div>
</div>
<div class="cg-card" data-group="formless" style="border-radius:16px;overflow:hidden;border:1px solid #b06cff26;background:rgba(0,0,0,0.28);">
 
  <div onclick="toggleGroup(this.closest('.cg-card'))" style="cursor:pointer;padding:16px 20px;display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;background:#b06cff0d;">
    <div style="width:44px;height:44px;border-radius:12px;background:#b06cff1a;border:1px solid #b06cff33;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;">⚗️</div>
    <div>
      <div style="font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:#b06cff;font-weight:800;margin-bottom:2px;">GRUPO · FORMLESS</div>
      <div style="font-size:1rem;font-weight:900;color:#fff;">Sem-Forma</div>
    </div>
    <div style="text-align:center;padding:6px 14px;border-radius:8px;background:rgba(0,0,0,0.30);border:1px solid rgba(255,255,255,0.07);">
      <div style="font-size:1.2rem;font-weight:900;color:#b06cff;">3</div>
      <div style="font-size:0.58rem;letter-spacing:0.10em;text-transform:uppercase;color:rgba(122,144,176,0.55);">Cartas</div>
    </div>
    <span class="cg-chevron" style="color:rgba(122,144,176,0.45);font-size:0.72rem;">▼</span>
  </div>
  <!-- Collection bonus strip -->
  <div style="padding:10px 20px;background:rgba(0,0,0,0.20);border-top:1px solid #b06cff18;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
    <span style="font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;">Bônus:</span>
    <span style="font-size:0.84rem;font-weight:700;color:#b06cff;">MDEF +5 permanente em toda a conta.</span>
    <div style="margin-left:auto;font-size:0.68rem;color:rgba(122,144,176,0.50);">Min: 3 cartas</div>
  </div>
  <!-- Expandable card list -->
  <div class="cg-detail" style="display:none;padding:14px 20px 16px;border-top:1px solid rgba(255,255,255,0.05);">
    <div style="font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;margin-bottom:8px;">Cartas do grupo:</div>
    <div style="display:flex;flex-wrap:wrap;gap:6px;"><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Myst Case Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Cookie Card</span><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Jakk Card</span></div>
  </div>
</div>
</div>
<div class="cg-card" data-group="fish" style="border-radius:16px;overflow:hidden;border:1px solid #5ee8ff26;background:rgba(0,0,0,0.28);">
  <div onclick="toggleGroup(this.closest('.cg-card'))" style="cursor:pointer;padding:16px 20px;display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;background:#5ee8ff0d;">
    <div style="width:44px;height:44px;border-radius:12px;background:#5ee8ff1a;border:1px solid #5ee8ff33;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;">🐟</div>
    <div>
      <div style="font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:#5ee8ff;font-weight:800;margin-bottom:2px;">GRUPO · FISH</div>
      <div style="font-size:1rem;font-weight:900;color:#fff;">Peixes</div>
    </div>
    <div style="text-align:center;padding:6px 14px;border-radius:8px;background:rgba(0,0,0,0.30);border:1px solid rgba(255,255,255,0.07);">
      <div style="font-size:1.2rem;font-weight:900;color:#5ee8ff;">1</div>
      <div style="font-size:0.58rem;letter-spacing:0.10em;text-transform:uppercase;color:rgba(122,144,176,0.55);">Cartas</div>
    </div>
    <span class="cg-chevron" style="color:rgba(122,144,176,0.45);font-size:0.72rem;">▼</span>
  </div>
  <!-- Collection bonus strip -->
  <div style="padding:10px 20px;background:rgba(0,0,0,0.20);border-top:1px solid #5ee8ff18;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
    <span style="font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;">Bônus:</span>
    <span style="font-size:0.84rem;font-weight:700;color:#5ee8ff;">Reflect melee +2% permanente em toda a conta.</span>
    <div style="margin-left:auto;font-size:0.68rem;color:rgba(122,144,176,0.50);">Min: 1 cartas</div>
  </div>
  <!-- Expandable card list -->
  <div class="cg-detail" style="display:none;padding:14px 20px 16px;border-top:1px solid rgba(255,255,255,0.05);">
    <div style="font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;margin-bottom:8px;">Cartas do grupo:</div>
    <div style="display:flex;flex-wrap:wrap;gap:6px;"><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Cornutus Card</span></div>
  </div>
</div>
<div class="cg-card" data-group="beast" style="border-radius:16px;overflow:hidden;border:1px solid #ffb34726;background:rgba(0,0,0,0.28);">
  <div onclick="toggleGroup(this.closest('.cg-card'))" style="cursor:pointer;padding:16px 20px;display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;background:#ffb3470d;">
    <div style="width:44px;height:44px;border-radius:12px;background:#ffb3471a;border:1px solid #ffb34733;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;">🐺</div>
    <div>
      <div style="font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:#ffb347;font-weight:800;margin-bottom:2px;">GRUPO · BEAST</div>
      <div style="font-size:1rem;font-weight:900;color:#fff;">Bestas</div>
    </div>
    <div style="text-align:center;padding:6px 14px;border-radius:8px;background:rgba(0,0,0,0.30);border:1px solid rgba(255,255,255,0.07);">
      <div style="font-size:1.2rem;font-weight:900;color:#ffb347;">1</div>
      <div style="font-size:0.58rem;letter-spacing:0.10em;text-transform:uppercase;color:rgba(122,144,176,0.55);">Cartas</div>
    </div>
    <span class="cg-chevron" style="color:rgba(122,144,176,0.45);font-size:0.72rem;">▼</span>
  </div>
  <!-- Collection bonus strip -->
  <div style="padding:10px 20px;background:rgba(0,0,0,0.20);border-top:1px solid #ffb34718;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
    <span style="font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;">Bônus:</span>
    <span style="font-size:0.84rem;font-weight:700;color:#ffb347;">Lifesteal +3% de todo ataque físico em toda a conta.</span>
    <div style="margin-left:auto;font-size:0.68rem;color:rgba(122,144,176,0.50);">Min: 1 cartas</div>
  </div>
  <!-- Expandable card list -->
  <div class="cg-detail" style="display:none;padding:14px 20px 16px;border-top:1px solid rgba(255,255,255,0.05);">
    <div style="font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(122,144,176,0.50);font-weight:700;margin-bottom:8px;">Cartas do grupo:</div>
    <div style="display:flex;flex-wrap:wrap;gap:6px;"><span style="padding:3px 9px;border-radius:5px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);font-size:0.72rem;color:rgba(232,238,248,0.70);">Drainliar Card</span></div>
  </div>
</div>
    </div>


  </div>
</div>
</div>
<!-- /COLLECTION GROUPS -->
<!-- ═══ FAQ ═══════════════════════════════════════════════ -->
<div style="background:#030408;padding:52px 64px;border-bottom:1px solid rgba(255,255,255,0.05);">
  <div style="max-width:860px;margin:0 auto;">
    <div style="text-align:center;margin-bottom:32px;">
      <div style="display:inline-flex;align-items:center;gap:8px;padding:4px 14px;border-radius:999px;background:rgba(124,106,255,0.08);border:1px solid rgba(124,106,255,0.20);margin-bottom:12px;">
        <span style="font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:#9d8fff;font-weight:700;">// Dúvidas</span>
      </div>
      <h2 style="font-size:clamp(1.4rem,2.5vw,2rem);font-weight:900;color:#fff;margin:0 0 8px;border:none;">Perguntas Frequentes</h2>
    </div>


    <div style="display:flex;flex-direction:column;gap:8px;" id="faq-list">
<!-- ═══════════════════════════════════════════════════════════
    SQL-POWERED CARD DATABASE
════════════════════════════════════════════════════════════ -->


      <div class="faq-entry" style="border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.07);">
<div style="max-width:1280px;margin:0 auto;padding:0 28px 34px;">
        <div onclick="toggleFaqEntry(this.closest('.faq-entry'))" style="padding:15px 18px;background:rgba(255,255,255,0.04);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;">
          <span style="font-size:0.95rem;font-weight:700;color:#e8eef8;">Posso adicionar a mesma carta à coleção mais de uma vez?</span>
          <span class="faq-chev" style="color:rgba(122,144,176,0.45);font-size:0.72rem;flex-shrink:0;">▼</span>
        </div>
        <div class="faq-body" style="display:none;padding:14px 18px 16px;background:rgba(0,0,0,0.20);font-size:0.88rem;color:rgba(176,192,224,0.78);line-height:1.70;border-top:1px solid rgba(255,255,255,0.05);">
          Não. Cada carta só pode ser registrada uma vez na coleção da conta. No entanto, você pode continuar usando a carta equipada normalmente — colecioná-la não a destrói.
        </div>
      </div>


      <div class="faq-entry" style="border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.07);">
<div style="
        <div onclick="toggleFaqEntry(this.closest('.faq-entry'))" style="padding:15px 18px;background:rgba(255,255,255,0.04);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;">
  background:linear-gradient(135deg,rgba(8,14,26,0.94),rgba(4,8,18,0.99));
          <span style="font-size:0.95rem;font-weight:700;color:#e8eef8;">O bônus de coleção se aplica ao personagem que coletou ou a toda a conta?</span>
  border:1px solid rgba(80,170,255,0.20);
          <span class="faq-chev" style="color:rgba(122,144,176,0.45);font-size:0.72rem;flex-shrink:0;">▼</span>
  border-radius:18px;
        </div>
  padding:24px;
        <div class="faq-body" style="display:none;padding:14px 18px 16px;background:rgba(0,0,0,0.20);font-size:0.88rem;color:rgba(176,192,224,0.78);line-height:1.70;border-top:1px solid rgba(255,255,255,0.05);">
  box-shadow:0 0 30px rgba(0,0,0,0.28), inset 0 0 28px rgba(80,160,255,0.025);
          O bônus é aplicado a <strong style="color:#00ff88;">toda a conta</strong>. Todos os personagens da conta, incluindo os criados no futuro, recebem o efeito permanente assim que o grupo for completado.
">
        </div>
      </div>


      <div class="faq-entry" style="border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.07);">
        <div onclick="toggleFaqEntry(this.closest('.faq-entry'))" style="padding:15px 18px;background:rgba(255,255,255,0.04);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;">
          <span style="font-size:0.95rem;font-weight:700;color:#e8eef8;">Os efeitos das cartas foram todos aumentados ou podem ter sido reduzidos?</span>
          <span class="faq-chev" style="color:rgba(122,144,176,0.45);font-size:0.72rem;flex-shrink:0;">▼</span>
        </div>
        <div class="faq-body" style="display:none;padding:14px 18px 16px;background:rgba(0,0,0,0.20);font-size:0.88rem;color:rgba(176,192,224,0.78);line-height:1.70;border-top:1px solid rgba(255,255,255,0.05);">
          O objetivo foi o rebalanceamento, não apenas o buff. A maioria das cartas recebeu melhorias, mas algumas cartas que eram excessivamente poderosas no PvP podem ter tido seus efeitos ajustados para garantir o equilíbrio geral do servidor.
        </div>
      </div>


      <div class="faq-entry" style="border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.07);">
<!--  
        <div onclick="toggleFaqEntry(this.closest('.faq-entry'))" style="padding:15px 18px;background:rgba(255,255,255,0.04);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;">
  This is intentionally only a safe mount point.
          <span style="font-size:0.95rem;font-weight:700;color:#e8eef8;">Como adicionar uma carta à coleção in-game?</span>
  The full search UI, filters, rows, detail panels and collection group cards are created by MediaWiki:Common.js.
          <span class="faq-chev" style="color:rgba(122,144,176,0.45);font-size:0.72rem;flex-shrink:0;">▼</span>
  Required API: /pt/api/wiki_cards.php
        </div>
-->
        <div class="faq-body" style="display:none;padding:14px 18px 16px;background:rgba(0,0,0,0.20);font-size:0.88rem;color:rgba(176,192,224,0.78);line-height:1.70;border-top:1px solid rgba(255,255,255,0.05);">
<div id="timero-card-db-app"
          Substitua com as instruções reais do servidor: acesse o NPC de Coleção em [cidade], selecione "Registrar Carta", escolha a carta do inventário e confirme. O processo é irreversível.
    data-api="https://timero.com.br/pt/api/wiki_cards.php"
        </div>
    style="margin:0;">
      </div>
  <div style="
 
    background:rgba(0,0,0,0.28);
      <div class="faq-entry" style="border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.07);">
    border:1px solid rgba(255,255,255,0.08);
        <div onclick="toggleFaqEntry(this.closest('.faq-entry'))" style="padding:15px 18px;background:rgba(255,255,255,0.04);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;">
    border-radius:14px;
          <span style="font-size:0.95rem;font-weight:700;color:#e8eef8;">Os bônus de diferentes grupos se acumulam?</span>
    padding:26px;
          <span class="faq-chev" style="color:rgba(122,144,176,0.45);font-size:0.72rem;flex-shrink:0;">▼</span>
    text-align:center;
        </div>
    color:#58d7ff;
        <div class="faq-body" style="display:none;padding:14px 18px 16px;background:rgba(0,0,0,0.20);font-size:0.88rem;color:rgba(176,192,224,0.78);line-height:1.70;border-top:1px solid rgba(255,255,255,0.05);">
    font-weight:900;
          Sim! Cada grupo completado adiciona seu bônus de forma independente e cumulativa. Um jogador que completar todos os grupos acumula todos os bônus permanentes simultaneamente.
    letter-spacing:0.04em;
        </div>
  ">
      </div>
    Carregando banco de cartas do TimeRO...
 
    </div>
   </div>
   </div>
</div>
</div>
<!-- /FAQ -->


</div>


<!-- ═══ RELATED LINKS ══════════════════════════════════════ -->
<div style="background:#05060e;padding:48px 64px;">
  <div style="max-width:860px;margin:0 auto;">
    <div style="text-align:center;margin-bottom:24px;">
      <h2 style="font-size:1.4rem;font-weight:900;color:#fff;margin:0;border:none;">Ver também</h2>
    </div>
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;">
      [[Arcane Item System|<div style="padding:18px 16px;border-radius:12px;background:rgba(0,0,0,0.28);border:1px solid rgba(124,106,255,0.16);cursor:pointer;">
        <div style="font-size:1.4rem;margin-bottom:7px;">✨</div>
        <div style="font-size:0.88rem;font-weight:800;color:#fff;margin-bottom:4px;">Sistema Arcano</div>
        <div style="font-size:0.78rem;color:rgba(122,144,176,0.65);line-height:1.55;">Outro sistema de progressão exclusivo do TimeRO.</div>
        <div style="margin-top:10px;font-size:0.70rem;font-weight:700;color:#9d8fff;letter-spacing:0.06em;text-transform:uppercase;">Explorar →</div>
      </div>]]
      [[MVP Hunting Guide|<div style="padding:18px 16px;border-radius:12px;background:rgba(0,0,0,0.28);border:1px solid rgba(255,61,90,0.14);cursor:pointer;">
        <div style="font-size:1.4rem;margin-bottom:7px;">💀</div>
        <div style="font-size:0.88rem;font-weight:800;color:#fff;margin-bottom:4px;">Cartas de MVP</div>
        <div style="font-size:0.78rem;color:rgba(122,144,176,0.65);line-height:1.55;">Como obter as cartas mais raras: guia completo de caça a MVPs.</div>
        <div style="margin-top:10px;font-size:0.70rem;font-weight:700;color:#ff3d5a;letter-spacing:0.06em;text-transform:uppercase;">Ver guia →</div>
      </div>]]
      [[Farming Guide|<div style="padding:18px 16px;border-radius:12px;background:rgba(0,0,0,0.28);border:1px solid rgba(249,197,0,0.12);cursor:pointer;">
        <div style="font-size:1.4rem;margin-bottom:7px;">💰</div>
        <div style="font-size:0.88rem;font-weight:800;color:#fff;margin-bottom:4px;">Farming para Cartas</div>
        <div style="font-size:0.78rem;color:rgba(122,144,176,0.65);line-height:1.55;">Melhores rotas para acumular Zeny e comprar cartas no mercado.</div>
        <div style="margin-top:10px;font-size:0.70rem;font-weight:700;color:#f9c500;letter-spacing:0.06em;text-transform:uppercase;">Ver guia →</div>
      </div>]]
    </div>
    <div style="text-align:center;font-size:0.80rem;color:rgba(122,144,176,0.40);">
      [[Card_System/talk|💬 Discussão]] &nbsp;·&nbsp; [[Special:RecentChanges|📝 Últimas edições]] &nbsp;·&nbsp; [https://timero.com.br 🌐 Site Oficial]
    </div>
  </div>
</div>
</div>
<!-- /RELATED -->


<!-- ═══════════════════════════════════════════════════════════
    DATABASE SOURCE GUIDE
════════════════════════════════════════════════════════════ -->


</div><!-- /card-system-root -->
<div style="max-width:1280px;margin:0 auto;padding:0 28px 34px;">


<div style="
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:16px;
">


<script>
<div style="
/* ════════════════════════════════════════════════════════════
  background:linear-gradient(135deg,rgba(8,14,26,0.94),rgba(4,8,18,0.99));
  CARD SYSTEM PAGE — All-new JavaScript
  border:1px solid rgba(255,255,255,0.08);
  Functions: searchCards, filterCategory, sortTable,
  border-radius:16px;
              openCardDetail, toggleChangedOnly,
  overflow:hidden;
              toggleGroup, toggleFaqEntry, renderTable
">
════════════════════════════════════════════════════════════ */
  <div style="
    background:linear-gradient(90deg,rgba(88,215,255,0.13),transparent);
    padding:13px 18px 11px;
    border-bottom:1px solid rgba(255,255,255,0.06);
    color:#58d7ff;
    font-weight:900;
    letter-spacing:0.09em;
    text-transform:uppercase;
    font-size:0.82rem;
  ">🔷 Fontes de dados usadas pela página</div>


/* ── Card data ──────────────────────────────────────────── */
{| style="width:100%;border-collapse:collapse;margin:0;"
var CARDS = [
|-
  {id:4001,name:'Poring Card',source:'Poring',slot:'Accessory',cat:'misc',old:'+5 LUK',nw:'+7 LUK, +3% Zeny from monsters',changed:true,group:'novice'},
! style="background:rgba(0,0,0,0.35);color:#6070a0;padding:10px 14px;text-align:left;font-size:0.80em;border-bottom:1px solid rgba(255,255,255,0.06);" | Tabela
  {id:4002,name:'Lunatic Card',source:'Lunatic',slot:'Accessory',cat:'misc',old:'+10 Critical',nw:'+12 Critical, +2% Critical damage',changed:true,group:'novice'},
! style="background:rgba(0,0,0,0.35);color:#6070a0;padding:10px 14px;text-align:left;font-size:0.80em;border-bottom:1px solid rgba(255,255,255,0.06);" | Função
  {id:4003,name:'Spore Card',source:'Spore',slot:'Armor',cat:'armor',old:'+1 VIT',nw:'+2 VIT, +50 MaxHP',changed:true,group:'novice'},
|-
  {id:4004,name:'Zombie Card',source:'Zombie',slot:'Armor',cat:'armor',old:'+10% Max HP',nw:'+12% Max HP, Undead resist +5%',changed:true,group:'undead'},
| style="padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.04);font-family:'Courier New',monospace;color:#80c8ff;font-size:0.86em;" | wiki_card_effects
  {id:4005,name:'Archer Skeleton Card',source:'Archer Skeleton',slot:'Weapon',cat:'weapon',old:'+10% ranged damage',nw:'+12% ranged damage, +1 DEX',changed:true,group:'undead'},
| style="padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.04);color:#b8c8d8;font-size:0.88em;line-height:1.55;" | Guarda ID da carta, nome, monstro, slot, categoria, efeito antigo, efeito novo e vínculo com grupo de coleção.
  {id:4006,name:'Mummy Card',source:'Mummy',slot:'Weapon',cat:'weapon',old:'+15 Attack Speed (Haste)',nw:'+15 Haste, +5% damage vs Medium enemies',changed:true,group:'undead'},
|-
  {id:4007,name:'Skeleton Card',source:'Skeleton',slot:'Weapon',cat:'weapon',old:'+20% damage vs Medium',nw:'+22% damage vs Medium, +1 STR',changed:true,group:'undead'},
| style="padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.04);font-family:'Courier New',monospace;color:#80c8ff;font-size:0.86em;" | wiki_card_groups
  {id:4008,name:'Skel-Worker Card',source:'Skel-Worker',slot:'Weapon',cat:'weapon',old:'+15% damage vs Medium/Large',nw:'+15% damage vs Medium/Large, +15 ATK',changed:true,group:'undead'},
| style="padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.04);color:#b8c8d8;font-size:0.88em;line-height:1.55;" | Define grupos de coleção, cor, ícone, quantidade mínima e efeito exibido ao jogador.
  {id:4009,name:'Drainliar Card',source:'Drainliar',slot:'Weapon',cat:'weapon',old:'+20% damage vs Small',nw:'+20% damage vs Small, +5% lifesteal',changed:true,group:'beast'},
|-
  {id:4010,name:'Thara Frog Card',source:'Thara Frog',slot:'Shield',cat:'armor',old:'-30% damage from Demi-Human',nw:'-30% dmg Demi-Human, +1% reflect',changed:false,group:'aqua'},
| style="padding:12px 14px;font-family:'Courier New',monospace;color:#80c8ff;font-size:0.86em;" | collection_card_meta
  {id:4011,name:'Hydra Card',source:'Hydra',slot:'Weapon',cat:'weapon',old:'+20% damage vs Demi-Human',nw:'+20% damage vs Demi-Human (unchanged)',changed:false,group:'aqua'},
| style="padding:12px 14px;color:#b8c8d8;font-size:0.88em;line-height:1.55;" | Integra a wiki ao sistema real de coleção, incluindo pontos da carta e script de bônus aplicado no servidor.
  {id:4012,name:'Orc Warrior Card',source:'Orc Warrior',slot:'Weapon',cat:'weapon',old:'+3 STR',nw:'+4 STR, +10 ATK',changed:true,group:'brute'},
|}
  {id:4013,name:'Orc Zombie Card',source:'Orc Zombie',slot:'Headgear',cat:'headgear',old:'INT +2, MDEF +5',nw:'INT +3, MDEF +7, SP Regen +5%',changed:true,group:'undead'},
</div>
  {id:4014,name:'Orc Skeleton Card',source:'Orc Skeleton',slot:'Weapon',cat:'weapon',old:'+3% Critical chance',nw:'+5% Critical chance, Ignore DEF 5%',changed:true,group:'undead'},
  {id:4015,name:'Andre Card',source:'Andre',slot:'Weapon',cat:'weapon',old:'+15 ATK',nw:'+18 ATK, +2% damage to Brute',changed:true,group:'insect'},
  {id:4016,name:'Deniro Card',source:'Deniro',slot:'Weapon',cat:'weapon',old:'+5% damage vs Insect',nw:'+8% damage vs Insect, +1 DEX',changed:true,group:'insect'},
  {id:4017,name:'Vitata Card',source:'Vitata',slot:'Accessory',cat:'misc',old:'Heal +15%',nw:'Heal +18%, SP cost -3%',changed:true,group:'insect'},
  {id:4018,name:'Creamy Card',source:'Creamy',slot:'Accessory',cat:'misc',old:'Teleport Lv1 usable',nw:'Teleport Lv2 usable, Flee +5',changed:true,group:'insect'},
  {id:4019,name:'Poporing Card',source:'Poporing',slot:'Armor',cat:'armor',old:'Poison resist +30%',nw:'Poison resist +40%, Neutral resist +2%',changed:true,group:'plant'},
  {id:4020,name:'Marina Card',source:'Marina',slot:'Weapon',cat:'weapon',old:'Freeze chance +5%',nw:'Freeze chance +7%, Water damage +3%',changed:true,group:'aqua'},
  {id:4021,name:'Magnolia Card',source:'Magnolia',slot:'Accessory',cat:'misc',old:'Curse resist +50%',nw:'Curse resist +70%, LUK +2',changed:true,group:'aqua'},
  {id:4022,name:'Cornutus Card',source:'Cornutus',slot:'Shield',cat:'armor',old:'Melee reflect 5%',nw:'Melee reflect 7%, DEF +3',changed:true,group:'fish'},
  {id:4023,name:'Marin Card',source:'Marin',slot:'Armor',cat:'armor',old:'Freeze resist +50%',nw:'Freeze resist +65%, Cold resist +10%',changed:true,group:'aqua'},
  {id:4024,name:'Drops Card',source:'Drops',slot:'Headgear',cat:'headgear',old:'DEX +2',nw:'DEX +3, Ranged ATK +2%',changed:true,group:'plant'},
  {id:4025,name:'Elder Willow Card',source:'Elder Willow',slot:'Weapon',cat:'weapon',old:'INT +2',nw:'INT +3, MATK +10',changed:true,group:'plant'},
  {id:4026,name:'Caramel Card',source:'Caramel',slot:'Footgear',cat:'armor',old:'AGI +1',nw:'AGI +2, Movement Speed +3%',changed:true,group:'brute'},
  {id:4027,name:'Flora Card',source:'Flora',slot:'Weapon',cat:'weapon',old:'+5% damage vs Insect/Fish',nw:'+7% damage vs Insect/Fish, +5 ATK',changed:true,group:'plant'},
  {id:4028,name:'Myst Case Card',source:'Myst Case',slot:'Headgear',cat:'headgear',old:'DEX +1, INT +1',nw:'DEX +2, INT +2, SP +30',changed:true,group:'formless'},
  {id:4029,name:'Cookie Card',source:'Cookie',slot:'Headgear',cat:'headgear',old:'MDEF +1',nw:'MDEF +2, INT +1',changed:true,group:'formless'},
  {id:4030,name:'Hode Card',source:'Hode',slot:'Armor',cat:'armor',old:'Earth resist +20%',nw:'Earth resist +25%, DEF vs Earth +5',changed:true,group:'brute'},
  {id:4031,name:'Desert Wolf Babe Card',source:'Desert Wolf Baby',slot:'Weapon',cat:'weapon',old:'+7% damage vs Small',nw:'+10% damage vs Small, +1 AGI',changed:true,group:'brute'},
  {id:4032,name:'Scorpion Card',source:'Scorpion',slot:'Weapon',cat:'weapon',old:'+3% damage vs Insect/Fish',nw:'+5% damage vs Insect/Fish, Poison+3%',changed:true,group:'insect'},
  {id:4033,name:'Verit Card',source:'Verit',slot:'Footgear',cat:'armor',old:'Max HP +8%, Max SP +8%',nw:'Max HP +10%, Max SP +10%',changed:true,group:'undead'},
  {id:4034,name:'Hunter Fly Card',source:'Hunter Fly',slot:'Weapon',cat:'weapon',old:'3% chance drain 5% HP on hit',nw:'5% chance drain 7% HP on hit',changed:true,group:'insect'},
  {id:4035,name:'Hornet Card',source:'Hornet',slot:'Weapon',cat:'weapon',old:'ATK +3',nw:'ATK +5, +2% damage vs non-boss',changed:true,group:'insect'},
  {id:4036,name:'Wormtail Card',source:'Wormtail',slot:'Accessory',cat:'misc',old:'Perfect Dodge +2',nw:'Perfect Dodge +3, Flee +5',changed:true,group:'insect'},
  {id:4037,name:'Anacondaq Card',source:'Anacondaq',slot:'Weapon',cat:'weapon',old:'Poison chance +3%',nw:'Poison chance +5%, Poison dmg +10%',changed:true,group:'brute'},
  {id:4038,name:'Savage Card',source:'Savage',slot:'Armor',cat:'armor',old:'VIT +3',nw:'VIT +4, MaxHP +80',changed:true,group:'brute'},
  {id:4039,name:'Wild Rose Card',source:'Wild Rose',slot:'Footgear',cat:'armor',old:'AGI +2, Perfect Dodge +1',nw:'AGI +3, Perfect Dodge +2',changed:true,group:'brute'},
  {id:4040,name:'Peco Peco Egg Card',source:'Peco Peco Egg',slot:'Armor',cat:'armor',old:'VIT +1',nw:'VIT +2, Knockback resist +5%',changed:true,group:'brute'},
  {id:4041,name:'Condor Card',source:'Condor',slot:'Headgear',cat:'headgear',old:'Flee +10',nw:'Flee +12, Perfect Dodge +1',changed:true,group:'brute'},
  {id:4042,name:'Rocker Card',source:'Rocker',slot:'Armor',cat:'armor',old:'DEF +1',nw:'DEF +2, Neutral resist +2%',changed:true,group:'insect'},
  {id:4043,name:'Smokie Card',source:'Smokie',slot:'Accessory',cat:'misc',old:'Cloaking Lv1 usable',nw:'Cloaking Lv2 usable, AGI +1',changed:true,group:'brute'},
  {id:4044,name:'Familiar Card',source:'Familiar',slot:'Weapon',cat:'weapon',old:'+2% damage at night',nw:'+5% damage at night, Dark resist +5%',changed:true,group:'brute'},
  {id:4045,name:'Poison Spore Card',source:'Poison Spore',slot:'Weapon',cat:'weapon',old:'Poison chance +5%',nw:'Poison chance +7%, INT +1',changed:true,group:'plant'},
  {id:4046,name:'Geographer Card',source:'Geographer',slot:'Armor',cat:'armor',old:'HP Regen +50%',nw:'HP Regen +65%, Natural heal +10%',changed:true,group:'plant'},
  {id:4047,name:'Coco Card',source:'Coco',slot:'Accessory',cat:'misc',old:'AGI +2',nw:'AGI +3, Flee +3',changed:true,group:'brute'},
  {id:4048,name:'Jakk Card',source:'Jakk',slot:'Weapon',cat:'weapon',old:'Fire property +20%',nw:'Fire property +22%, Fire MATK +5%',changed:true,group:'formless'},
  {id:4049,name:'Bathory Card',source:'Bathory',slot:'Armor',cat:'armor',old:'Shadow element armor',nw:'Shadow element, Dark resist +10%',changed:false,group:'undead'},
  {id:4050,name:'Succubus Card',source:'Succubus',slot:'Accessory',cat:'misc',old:'Max SP +12%',nw:'Max SP +15%, SP drain +2% on kill',changed:true,group:'demon'},
];


/* ── Group data ─────────────────────────────────────────── */
<div style="
var GROUPS = {
   background:linear-gradient(135deg,rgba(20,12,4,0.92),rgba(8,5,2,0.98));
   novice:{label:'Iniciantes',icon:'🌿',color:'#00ff88',count:3,min:3,effect:'Lv.1 de todos os personagens da conta ganham +50 EXP base por kill.'},
   border:1px solid rgba(240,200,64,0.18);
  undead:{label:'Mortos-Vivos',icon:'💀',color:'#a0a0c0',count:9,min:5,effect:'Resistência a Shadow +5% permanente em toda a conta.'},
   border-left:5px solid #f0c840;
   aqua:{label:'Aquáticos',icon:'🌊',color:'#00d4ff',count:5,min:4,effect:'+3% de drop rate de monstros aquáticos em toda a conta.'},
  border-radius:16px;
   brute:{label:'Brutos',icon:'🐾',color:'#f9a826',count:12,min:6,effect:'AGI +2 permanente em toda a conta ao usar montaria.'},
  padding:20px;
   insect:{label:'Insetos',icon:'🦟',color:'#a8d800',count:9,min:5,effect:'Dano a Insetos +5% permanente em toda a conta.'},
">
  plant:{label:'Plantas',icon:'🌸',color:'#ff8aad',count:6,min:4,effect:'Regen de HP natural +15% permanente em toda a conta.'},
  <div style="color:#f0c840;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;font-size:0.82rem;margin-bottom:10px;">⚙ Requisito técnico</div>
   demon:{label:'Demônios',icon:'😈',color:'#ff3d5a',count:1,min:1,effect:'Max SP +5% permanente em toda a conta.'},
   <div style="color:rgba(220,205,160,0.78);font-size:0.90rem;line-height:1.65;margin-bottom:12px;">
  formless:{label:'Sem-Forma',icon:'⚗️',color:'#b06cff',count:3,min:3,effect:'MDEF +5 permanente em toda a conta.'},
    Para esta página funcionar, o bloco JavaScript do sistema de cartas precisa estar no <strong style="color:#ffffff;">MediaWiki:Common.js</strong> e o endpoint abaixo precisa retornar JSON válido.
  fish:{label:'Peixes',icon:'🐟',color:'#5ee8ff',count:1,min:1,effect:'Reflect melee +2% permanente em toda a conta.'},
   </div>
  beast:{label:'Bestas',icon:'🐺',color:'#ffb347',count:1,min:1,effect:'Lifesteal +3% de todo ataque físico em toda a conta.'},
  <div style="
};
    background:rgba(0,0,0,0.35);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    padding:12px;
    color:#80c8ff;
    font-family:'Courier New',monospace;
    font-size:0.78rem;
    line-height:1.55;
    word-break:break-all;
  ">https://timero.com.br/pt/api/wiki_cards.php</div>
</div>


/* ── State ───────────────────────────────────────────────── */
</div>
var state = {
  query: '', category: 'all', changedOnly: false,
  sortCol: 'id', sortDir: 'asc', openDetailId: null
};


/* Slot → display label + color */
</div>
var slotMeta = {
  weapon:  {label:'Arma',      color:'#ff3d5a', bg:'rgba(255,61,90,0.09)'},
  armor:    {label:'Armadura',  color:'#00d4ff', bg:'rgba(0,212,255,0.08)'},
  misc:    {label:'Acessório', color:'#f9a826', bg:'rgba(249,168,38,0.09)'},
  headgear: {label:'Headgear',  color:'#b06cff', bg:'rgba(176,108,255,0.09)'},
};


/* ── Filter + render ────────────────────────────────────── */
<!-- ═══════════════════════════════════════════════════════════
function getFiltered() {
    COLLECTION NOTES
  var q = state.query.toLowerCase();
════════════════════════════════════════════════════════════ -->
  return CARDS.filter(function(c) {
    if (state.changedOnly && !c.changed) return false;
    if (state.category !== 'all' && c.cat !== state.category) return false;
    if (q && !(
      c.name.toLowerCase().includes(q) ||
      String(c.id).includes(q) ||
      c.source.toLowerCase().includes(q)
    )) return false;
    return true;
  }).sort(function(a, b) {
    var av, bv;
    if (state.sortCol === 'id')  { av = a.id;  bv = b.id; }
    else if (state.sortCol === 'name') { av = a.name; bv = b.name; }
    else if (state.sortCol === 'slot') { av = a.slot; bv = b.slot; }
    else { av = a.id; bv = b.id; }
    if (av < bv) return state.sortDir === 'asc' ? -1 : 1;
    if (av > bv) return state.sortDir === 'asc' ?  1 : -1;
    return 0;
  });
}


function renderTable() {
<div style="max-width:1280px;margin:0 auto;padding:0 28px 34px;">
  var filtered = getFiltered();
  var body = document.getElementById('card-table-body');
  var empty = document.getElementById('table-empty');
  var badge = document.getElementById('card-count-badge');


   if (badge) badge.textContent = filtered.length + ' carta' + (filtered.length !== 1 ? 's' : '');
<div style="
   background:linear-gradient(135deg,rgba(8,14,26,0.94),rgba(4,8,18,0.99));
  border:1px solid rgba(112,216,144,0.18);
  border-radius:18px;
  padding:24px;
">


   if (!body) return;
<div style="
   background:linear-gradient(90deg,rgba(112,216,144,0.12),rgba(112,216,144,0.03),transparent);
  border:1px solid rgba(112,216,144,0.16);
  border-left:5px solid #70d890;
  border-radius:12px;
  padding:16px 18px;
  margin:0 0 18px 0;
">
  <div style="color:#70d890;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;font-size:0.86rem;margin-bottom:8px;">◇ Coleção permanente</div>
  <div style="color:#ffffff;font-size:1.35rem;font-weight:900;margin-bottom:6px;">Colete uma vez. Progrida para sempre.</div>
  <div style="color:rgba(190,230,200,0.74);font-size:0.92rem;line-height:1.65;">
    A coleção transforma cartas em uma linha de progressão permanente. Isso aumenta o valor de cartas comuns, cria metas de caça e dá utilidade para drops que normalmente seriam ignorados.
  </div>
</div>


  if (filtered.length === 0) {
<div style="
    body.innerHTML = '';
  display:grid;
    if (empty) empty.style.display = 'block';
  grid-template-columns:repeat(3,minmax(0,1fr));
    return;
  gap:14px;
  }
">
  if (empty) empty.style.display = 'none';


  var html = '';
<div style="background:rgba(0,0,0,0.24);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:18px;">
  filtered.forEach(function(c, idx) {
  <div style="color:#58d7ff;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;font-size:0.78rem;margin-bottom:8px;">🎯 Metas de caça</div>
    var sm  = slotMeta[c.cat] || {label: c.slot, color:'#e8eef8', bg:'rgba(255,255,255,0.06)'};
  <div style="color:rgba(180,205,230,0.74);font-size:0.88rem;line-height:1.62;">
    var gInfo = GROUPS[c.group] || {};
    Jogadores podem buscar cartas específicas para completar grupos e desbloquear bônus planejados.
    var gColor = gInfo.color || '#7c6aff';
  </div>
    var changedBadge = c.changed
</div>
      ? '<span style="padding:2px 7px;border-radius:4px;background:rgba(124,106,255,0.14);border:1px solid rgba(124,106,255,0.30);font-size:0.60rem;font-weight:900;color:#9d8fff;letter-spacing:0.08em;text-transform:uppercase;">⚡ Alterada</span>'
      : '<span style="padding:2px 7px;border-radius:4px;background:rgba(122,144,176,0.07);border:1px solid rgba(122,144,176,0.16);font-size:0.60rem;font-weight:700;color:rgba(122,144,176,0.55);letter-spacing:0.08em;text-transform:uppercase;">Igual</span>';
    var isOpen = state.openDetailId === c.id;
    var rowBg  = isOpen ? 'rgba(124,106,255,0.06)' : (idx%2===0 ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.018)');


    html += '<div class="card-row" data-id="' + c.id + '" onclick="openCardDetail(' + c.id + ')" '
<div style="background:rgba(0,0,0,0.24);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:18px;">
          + 'style="display:grid;grid-template-columns:70px 1fr 140px 100px 28px;gap:0;'
  <div style="color:#f0c840;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;font-size:0.78rem;margin-bottom:8px;">💰 Economia</div>
          + 'background:' + rowBg + ';border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer;transition:background 0.14s;">'
  <div style="color:rgba(220,205,160,0.74);font-size:0.88rem;line-height:1.62;">
    Cartas antigas ganham novo valor no mercado porque podem servir tanto para builds quanto para coleção.
  </div>
</div>


          + '<div style="padding:13px 14px;display:flex;align-items:center;border-right:1px solid rgba(255,255,255,0.04);">'
<div style="background:rgba(0,0,0,0.24);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:18px;">
          + '<span style="font-family:monospace;font-size:0.78rem;font-weight:800;color:rgba(124,106,255,0.65);">#' + c.id + '</span></div>'
  <div style="color:#70d890;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;font-size:0.78rem;margin-bottom:8px;">🧠 Estratégia</div>
  <div style="color:rgba(190,230,200,0.74);font-size:0.88rem;line-height:1.62;">
    O jogador decide entre usar a carta em equipamento, vender, guardar ou sacrificar para progresso permanente.
  </div>
</div>


          + '<div style="padding:13px 14px;display:flex;align-items:center;gap:12px;border-right:1px solid rgba(255,255,255,0.04);">'
</div>
          + '<div style="width:32px;height:32px;border-radius:8px;background:' + gColor + '18;border:1px solid ' + gColor + '2a;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;">' + (gInfo.icon||'♦') + '</div>'
          + '<div>'
          + '<div style="font-size:0.88rem;font-weight:800;color:#fff;">' + c.name + '</div>'
          + '<div style="font-size:0.70rem;color:rgba(122,144,176,0.55);margin-top:1px;">🐉 ' + c.source + ' &nbsp;·&nbsp; ' + (gInfo.label||c.group) + '</div>'
          + '</div></div>'


          + '<div style="padding:13px 14px;display:flex;align-items:center;border-right:1px solid rgba(255,255,255,0.04);">'
</div>
          + '<span style="padding:3px 9px;border-radius:5px;background:' + sm.bg + ';border:1px solid ' + sm.color + '2a;font-size:0.70rem;font-weight:700;color:' + sm.color + ';">' + sm.label + ' · ' + c.slot + '</span></div>'


          + '<div style="padding:13px 14px;display:flex;align-items:center;border-right:1px solid rgba(255,255,255,0.04);">' + changedBadge + '</div>'
</div>


          + '<div style="padding:13px 10px;display:flex;align-items:center;justify-content:center;">'
<!-- ═══════════════════════════════════════════════════════════
          + '<span style="color:rgba(122,144,176,0.40);font-size:0.65rem;transform:' + (isOpen?'rotate(180deg)':'') + ';display:inline-block;transition:transform 0.2s;">' + (isOpen ? '▲' : '▼') + '</span></div>'
    RELATED SYSTEMS
          + '</div>';
════════════════════════════════════════════════════════════ -->


    /* Inline detail panel */
<div style="max-width:1280px;margin:0 auto;padding:0 28px 60px;">
    if (isOpen) {
      var gEff = gInfo.effect || '';
      html += '<div style="border-bottom:1px solid rgba(255,255,255,0.05);background:rgba(124,106,255,0.04);">'
            + '<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;">'


            /* Old effect */
<div style="
            + '<div style="padding:16px 18px;border-right:1px solid rgba(255,255,255,0.05);">'
  background:linear-gradient(135deg,rgba(8,14,26,0.94),rgba(4,8,18,0.99));
            + '<div style="font-size:0.60rem;letter-spacing:0.13em;text-transform:uppercase;color:rgba(255,61,90,0.55);font-weight:700;margin-bottom:7px;">❌ Efeito Antigo</div>'
  border:1px solid rgba(255,255,255,0.08);
            + '<div style="font-size:0.86rem;color:rgba(232,238,248,0.65);line-height:1.60;text-decoration:line-through;opacity:0.75;">' + c.old + '</div>'
  border-radius:18px;
            + '</div>'
  padding:24px;
">


            /* New effect */
<div style="
            + '<div style="padding:16px 18px;border-right:1px solid rgba(255,255,255,0.05);background:rgba(124,106,255,0.04);">'
  color:#6070a0;
            + '<div style="font-size:0.60rem;letter-spacing:0.13em;text-transform:uppercase;color:rgba(124,106,255,0.70);font-weight:700;margin-bottom:7px;">✅ Novo Efeito (TimeRO)</div>'
  font-weight:900;
            + '<div style="font-size:0.92rem;font-weight:700;color:#fff;line-height:1.60;">' + c.nw + '</div>'
  letter-spacing:0.09em;
            + '</div>'
  text-transform:uppercase;
  font-size:0.78rem;
  margin-bottom:14px;
">Sistemas relacionados</div>


            /* Collection bonus */
<div style="
            + '<div style="padding:16px 18px;">'
  display:grid;
            + '<div style="font-size:0.60rem;letter-spacing:0.13em;text-transform:uppercase;color:rgba(249,197,0,0.60);font-weight:700;margin-bottom:7px;">✨ Bônus de Coleção</div>'
  grid-template-columns:repeat(4,minmax(0,1fr));
            + '<div style="font-size:0.76rem;color:rgba(249,197,0,0.85);line-height:1.60;font-weight:600;">' + (gInfo.icon||'♦') + ' ' + (gInfo.label||c.group) + '</div>'
  gap:12px;
            + '<div style="font-size:0.80rem;color:rgba(176,192,224,0.75);line-height:1.60;margin-top:3px;">' + gEff + '</div>'
">
            + '</div>'


            + '</div></div>';
<div style="background:rgba(0,0,0,0.24);border:1px solid rgba(88,215,255,0.18);border-radius:12px;padding:16px;text-align:center;">
    }
  <div style="font-size:1.35em;margin-bottom:8px;">🧰</div>
   });
  <div style="font-weight:900;color:#58d7ff;margin-bottom:4px;">[[Random Options]]</div>
  body.innerHTML = html;
   <div style="font-size:0.78rem;color:rgba(180,205,230,0.62);line-height:1.45;">Opções aleatórias em equipamentos.</div>
}
</div>


/* ── Search + Filters ───────────────────────────────────── */
<div style="background:rgba(0,0,0,0.24);border:1px solid rgba(240,200,64,0.18);border-radius:12px;padding:16px;text-align:center;">
function searchCards() {
   <div style="font-size:1.35em;margin-bottom:8px;">🏰</div>
   state.query = (document.getElementById('card-search')||{}).value || '';
   <div style="font-weight:900;color:#f0c840;margin-bottom:4px;">[[Instances]]</div>
   state.openDetailId = null;
   <div style="font-size:0.78rem;color:rgba(220,205,160,0.62);line-height:1.45;">Instâncias e recompensas especiais.</div>
   renderTable();
</div>
}


function filterCategory(cat) {
<div style="background:rgba(0,0,0,0.24);border:1px solid rgba(112,216,144,0.18);border-radius:12px;padding:16px;text-align:center;">
   state.category = cat;
   <div style="font-size:1.35em;margin-bottom:8px;">🔥</div>
   state.openDetailId = null;
  <div style="font-weight:900;color:#70d890;margin-bottom:4px;">[[Fever System]]</div>
   <div style="font-size:0.78rem;color:rgba(190,230,200,0.62);line-height:1.45;">Mapas Fever e equipamentos com opções.</div>
</div>


  /* Update tab styles */
<div style="background:rgba(0,0,0,0.24);border:1px solid rgba(255,107,122,0.18);border-radius:12px;padding:16px;text-align:center;">
  ['all','weapon','armor','misc','headgear'].forEach(function(k) {
  <div style="font-size:1.35em;margin-bottom:8px;">⏱️</div>
    var btn = document.getElementById('cat-' + k);
  <div style="font-weight:900;color:#ff6b7a;margin-bottom:4px;">[[MVP Timer]]</div>
    if (!btn) return;
  <div style="font-size:0.78rem;color:rgba(235,190,200,0.62);line-height:1.45;">Controle de MVPs e chefes especiais.</div>
    if (k === cat) {
</div>
      btn.style.background = 'linear-gradient(135deg,rgba(124,106,255,0.22),rgba(124,106,255,0.10))';
      btn.style.color = '#9d8fff';
      btn.style.fontWeight = '900';
    } else {
      btn.style.background = 'transparent';
      btn.style.fontWeight = '700';
    }
  });
  renderTable();
}


function toggleChangedOnly() {
</div>
  var cb = document.getElementById('changed-toggle');
  state.changedOnly = cb ? cb.checked : false;
  state.openDetailId = null;
  renderTable();
}


/* ── Column sort ────────────────────────────────────────── */
</div>
function sortTable(col) {
  if (state.sortCol === col) {
    state.sortDir = state.sortDir === 'asc' ? 'desc' : 'asc';
  } else {
    state.sortCol = col;
    state.sortDir = 'asc';
  }


  /* Update sort indicators */
</div>
  ['id','name','slot'].forEach(function(k) {
    var el = document.getElementById('si-' + k);
    if (!el) return;
    if (k === col) {
      el.textContent = state.sortDir === 'asc' ? '↑' : '↓';
      el.style.color = '#9d8fff';
    } else {
      el.textContent = '↕';
      el.style.color = 'rgba(122,144,176,0.35)';
    }
  });


  /* Update header colors */
</div>
  document.querySelectorAll('.th-cell.sortable').forEach(function(th) {
    th.style.color = th.dataset.col === col ? '#9d8fff' : 'rgba(122,144,176,0.55)';
  });
 
  renderTable();
}
 
/* ── Inline row detail ──────────────────────────────────── */
function openCardDetail(id) {
  state.openDetailId = state.openDetailId === id ? null : id;
  renderTable();
  if (state.openDetailId) {
    setTimeout(function() {
      var rows = document.querySelectorAll('.card-row');
      rows.forEach(function(r) {
        if (parseInt(r.dataset.id) === id) {
          r.scrollIntoView({behavior:'smooth', block:'nearest'});
        }
      });
    }, 60);
  }
}
 
/* ── Collection group expand ────────────────────────────── */
function toggleGroup(card) {
  var detail  = card.querySelector('.cg-detail');
  var chevron = card.querySelector('.cg-chevron');
  if (!detail) return;
  var open = detail.style.display !== 'none';
  detail.style.display = open ? 'none' : 'block';
  if (chevron) chevron.style.transform = open ? '' : 'rotate(180deg)';
}
 
/* ── FAQ ────────────────────────────────────────────────── */
function toggleFaqEntry(entry) {
  var body    = entry.querySelector('.faq-body');
  var chevron = entry.querySelector('.faq-chev');
  if (!body) return;
  var open = body.style.display !== 'none';
  body.style.display = open ? 'none' : 'block';
  if (chevron) chevron.style.transform = open ? '' : 'rotate(180deg)';
}
 
/* ── Init ────────────────────────────────────────────────── */
document.addEventListener('DOMContentLoaded', function() {
  var sb = document.getElementById('settingsButton'), sm = document.getElementById('settingsMenu');
  if (sb && sm) sb.addEventListener('click', function() { sm.style.right = sm.style.right === '20px' ? '-300px' : '20px'; });
 
  /* Initial render */
  renderTable();
 
  /* Search focus style */
  var si = document.getElementById('card-search');
  if (si) {
    si.addEventListener('focus', function() { this.style.borderColor = 'rgba(124,106,255,0.40)'; this.style.boxShadow = '0 0 0 3px rgba(124,106,255,0.10)'; });
    si.addEventListener('blur',  function() { this.style.borderColor = 'rgba(255,255,255,0.09)'; this.style.boxShadow = ''; });
  }
 
  /* Mobile padding */
  if (window.innerWidth < 900) {
    document.querySelectorAll('[style*="padding:52px 64px"],[style*="padding:48px 64px"],[style*="padding:56px 64px"]').forEach(function(el) {
      el.style.paddingLeft  = '16px';
      el.style.paddingRight = '16px';
    });
  }
});
</script>


[[Category:General Information]]
[[Category:Systems]]
[[Category:Systems]]
[[Category:Cards]]
[[Category:Cards]]
[[Category:Collection]]
[[Category:TimeRO Systems]]
[[Category:Progression]]

Latest revision as of 02:52, 6 May 2026




 TimeRO Wiki
 ›
 Sistemas
 ›
 Sistema de Cartas

 ◇ Sistema de Progressão

 Sistema de

 Cartas Balanceadas

 O TimeRO reformula o valor das cartas dentro do universo Pré-Renewal: efeitos revisados, novas possibilidades de build e um sistema de coleção permanente para a conta. Cada carta pode ser útil como equipamento, como progressão de coleção ou como parte de estratégias específicas de classe.
🃏
Cartas
Rebalanceadas
📚
Coleção
Conta Inteira
✨
Bônus
Permanentes
⚔️
Builds
Mais Variadas


🔄
Efeitos Melhorados
   Cartas clássicas recebem efeitos revisados para gerar mais escolhas reais de build, evitando que apenas poucas cartas dominem todos os equipamentos.
📚
Coleção de Conta
   Cartas registradas na coleção desbloqueiam progresso permanente vinculado à conta. Todos os personagens se beneficiam do avanço.
🧬
Valor Permanente
   Mesmo cartas simples continuam relevantes, porque podem completar grupos, liberar bônus e fortalecer a conta a longo prazo.


◇ Como funciona
Sistema de Coleção de Cartas
   A coleção é uma progressão permanente de conta. Ao registrar cartas e completar grupos temáticos, o jogador libera bônus que continuam ativos independentemente do personagem usado.
🗡️
Passo 1
Obter a carta
Derrote monstros e MVPs para obter cartas normais ou exclusivas do TimeRO.
🃏
Passo 2
Usar ou colecionar
A carta pode ser equipada em um item ou enviada para a coleção da conta.
📚
Passo 3
Completar grupos
Grupos temáticos de cartas liberam bônus quando os requisitos são atingidos.
✨
Passo 4
Bônus permanente
O efeito de coleção passa a beneficiar a conta de forma permanente.


⚠ Registro permanente
   Ao adicionar uma carta à coleção, ela será consumida pelo sistema. Confirme antes de registrar cartas indesejadas.
👥 Toda a conta
   Os bônus de coleção são pensados como progressão horizontal e podem beneficiar todos os personagens vinculados à conta.
🧩 Progressão por grupo
   Cada grupo possui cartas necessárias, pontuação, efeito final e requisitos próprios definidos pelo banco de dados.




   Carregando banco de cartas do TimeRO...


🔷 Fontes de dados usadas pela página
Tabela Função
wiki_card_effects Guarda ID da carta, nome, monstro, slot, categoria, efeito antigo, efeito novo e vínculo com grupo de coleção.
wiki_card_groups Define grupos de coleção, cor, ícone, quantidade mínima e efeito exibido ao jogador.
collection_card_meta Integra a wiki ao sistema real de coleção, incluindo pontos da carta e script de bônus aplicado no servidor.
⚙ Requisito técnico
   Para esta página funcionar, o bloco JavaScript do sistema de cartas precisa estar no MediaWiki:Common.js e o endpoint abaixo precisa retornar JSON válido.


◇ Coleção permanente
Colete uma vez. Progrida para sempre.
   A coleção transforma cartas em uma linha de progressão permanente. Isso aumenta o valor de cartas comuns, cria metas de caça e dá utilidade para drops que normalmente seriam ignorados.
🎯 Metas de caça
   Jogadores podem buscar cartas específicas para completar grupos e desbloquear bônus planejados.
💰 Economia
   Cartas antigas ganham novo valor no mercado porque podem servir tanto para builds quanto para coleção.
🧠 Estratégia
   O jogador decide entre usar a carta em equipamento, vender, guardar ou sacrificar para progresso permanente.


Sistemas relacionados
🧰
Opções aleatórias em equipamentos.
🏰
Instâncias e recompensas especiais.
🔥
Mapas Fever e equipamentos com opções.
⏱️
Controle de MVPs e chefes especiais.
Retrieved from "https://wiki.timero.com.br/index.php?title=Cards&oldid=558845"