Mudanças entre as edições de "Widget:Conquistas"

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
 
(2 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 13: Linha 13:
       Sem ele, os rewards aparecem como wikitext cru e sem tooltip.
       Sem ele, os rewards aparecem como wikitext cru e sem tooltip.
     -->
     -->
     <div class="gla-conquistas-root">
    <!--
      Atributos no root:
 
      data-hidden-style controla o MARCADOR visual das conquistas hidden=true.
      Valores aceitos: "badge" | "stripes" | "ribbon" | "stamp" | "subtle".
      Default escolhido: "ribbon" (fita diagonal cinza "SECRETA" no canto).
 
      data-reveal-mode controla a CENSURA do conteúdo das hidden=true. O
      conteúdo continua no HTML — só fica visualmente coberto até o jogador
      clicar pra revelar (anti-spoiler). Valores aceitos:
        "none"        — sem censura
        "blur"        — título e descrição borrados (default)
        "redacted"    — tarjas escuras estilo doc classificado
        "placeholder" — texto substituído por "???"
        "veil"        — card inteiro coberto por overlay com CTA "clique"
 
      Pra trocar qualquer um, edita o atributo abaixo.
    -->
     <div class="gla-conquistas-root" data-hidden-style="ribbon" data-reveal-mode="blur">
         <div class="gla-conquistas-headerbox">
         <div class="gla-conquistas-headerbox">
             <div class="gla-conquistas-header">
             <div class="gla-conquistas-header">
Linha 21: Linha 39:


             <div class="gla-conquistas-toolbar">
             <div class="gla-conquistas-toolbar">
                <!-- Wrapper com scroll horizontal — evita que as abas quebrem linha e fiquem flutuando -->
                 <div class="gla-conquistas-tabs-scroll">
                 <div class="gla-conquistas-tabs-scroll">
                     <div class="gla-conquistas-tabs">
                     <div class="gla-conquistas-tabs">
Linha 44: Linha 61:
                         <span class="gla-conquistas-filter is-active" data-filter="all">Todas</span>
                         <span class="gla-conquistas-filter is-active" data-filter="all">Todas</span>
                         <span class="gla-conquistas-filter" data-filter="normal">Normal</span>
                         <span class="gla-conquistas-filter" data-filter="normal">Normal</span>
                         <span class="gla-conquistas-filter" data-filter="hidden">Oculta</span>
                         <span class="gla-conquistas-filter" data-filter="hidden">Secreta</span>
                     </div>
                     </div>
                     <div class="gla-conquistas-filters" id="gla-filter-coliseu" style="display:none">
                     <div class="gla-conquistas-filters" id="gla-filter-coliseu" style="display:none">
Linha 104: Linha 121:


     <style>
     <style>
         /* ─── Variáveis — light mode ─────────────────────────────────────────── */
        /* Fonte para labels pequenos em maiúsculas — sem isso o navegador usa
         /* Paleta azul/branca consistente, independente do skin da wiki.
          a sans-serif do skin, que fica fininha demais a 11px com tracking. */
           Os valores são fechados no .gla-conquistas-root pra não vazar
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&display=swap');
           pra outros widgets da página. */
 
         /* ─── Variáveis ──────────────────────────────────────────────────────── */
         /* Tema branco fixo. Azul fica reservado para detalhes (tab/filtro ativo,
           foco da busca, label da recompensa, chevron, hover). Sem dark mode
           automático — o widget deve manter o mesmo visual independente do skin. */
         .gla-conquistas-root {
         .gla-conquistas-root {
            color-scheme: light;
             /* Texto */
             /* Texto */
             --gla-ink: #0f172a;
             --gla-ink: #0f172a;
             /* slate-900 — texto principal */
             /* slate-900 — título e texto principal */
             --gla-ink-2: #475569;
             --gla-ink-2: #475569;
             /* slate-600 — texto secundário */
             /* slate-600 — texto secundário */
             --gla-dim: #94a3b8;
             --gla-dim: #94a3b8;
             /* slate-400 — placeholder/desabilitado */
             /* slate-400 — placeholder */
             --gla-dim-2: #cbd5e1;
             --gla-dim-2: #cbd5e1;
             /* slate-300 — bordas sutis */
             /* slate-300 — bordas sutis */


             /* Superfícies */
             /* Superfícies (todas claras) */
             --gla-paper: #f8fafc;
             --gla-paper: #ffffff;
             /* slate-50 — fundo de tabs inativas */
            --gla-paper-2: #f8fafc;
             --gla-paper-2: #f1f5f9;
             /* slate-50 — hover sutil */
             /* slate-100 — hover */
             --gla-paper-3: #f1f5f9;
             /* slate-100 — chip recompensa */
             --gla-rule: #e2e8f0;
             --gla-rule: #e2e8f0;
             /* slate-200 — divisores */
             /* slate-200 — bordas/divisores */
            --gla-spoiler-bg: #f8fafc;


             /* Accent azul */
             /* Accent azul (só pra detalhes) */
             --gla-accent: #3b82f6;
             --gla-accent: #2563eb;
             /* blue-500 */
             /* blue-600 */
             --gla-accent-soft: #93c5fd;
             --gla-accent-soft: #60a5fa;
             /* blue-300 */
             /* blue-400 */
             --gla-accent-bg: #eff6ff;
             --gla-accent-bg: #eff6ff;
             /* blue-50 — fundo do bloco de reward */
             /* blue-50 — focus ring */


             /* Controles */
             /* Sombra discreta */
            --gla-ctrl-bg: #ffffff;
             --gla-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
            --gla-ctrl-border: #e2e8f0;
                 0 1px 3px rgba(15, 23, 42, 0.06);
            /* borda neutra clara */
             --gla-shadow: 0 1px 3px rgba(15, 23, 42, 0.06),
                 0 1px 2px rgba(15, 23, 42, 0.04);
         }
         }


         /* ─── Variáveis — dark mode ──────────────────────────────────────────── */
         /* Força tema claro mesmo se o skin/OS estiver em dark — o widget tem
        /* Adapta automaticamente quando o sistema/skin tá em dark.
           identidade visual própria e não deve trocar de cor com o ambiente. */
           Usar prefers-color-scheme cobre OS dark mode; muitos skins de wiki
         .gla-conquistas-root,
          (Vector 2022 night mode, Cosmos dark) também herdam isso. */
        .gla-conquistas-root * {
         @media (prefers-color-scheme: dark) {
            color-scheme: light;
            .gla-conquistas-root {
        }
                --gla-ink: #f1f5f9;
                /* slate-100 */
                --gla-ink-2: #cbd5e1;
                /* slate-300 */
                --gla-dim: #64748b;
                /* slate-500 */
                --gla-dim-2: #475569;
                /* slate-600 */


                --gla-paper: #1e293b;
        /* ─── Layout principal ───────────────────────────────────────────────── */
                /* slate-800 */
        .gla-conquistas-root {
                --gla-paper-2: #334155;
            color: var(--gla-ink);
                /* slate-700 — hover */
                --gla-rule: #334155;
                --gla-spoiler-bg: #0f172a;
                /* slate-900 */
 
                --gla-accent: #60a5fa;
                /* blue-400 */
                --gla-accent-soft: #3b82f6;
                /* blue-500 */
                --gla-accent-bg: #172554;
                /* blue-950 */
 
                --gla-ctrl-bg: #1e293b;
                --gla-ctrl-border: #334155;
                --gla-shadow: 0 1px 3px rgba(0, 0, 0, 0.35),
                    0 1px 2px rgba(0, 0, 0, 0.25);
            }
         }
         }


        /* ─── Layout principal ───────────────────────────────────────────────── */
         .gla-conquistas-headerbox {
         .gla-conquistas-headerbox {
             margin: 0 0 20px;
             margin: 0 0 16px;
             padding: 0;
             padding: 0;
             background: transparent;
             background: transparent;
Linha 193: Linha 187:
         }
         }


         /* ─── Toolbar unificado (tabs + controls) ────────────────────────────── */
         /* ─── Toolbar (tabs + busca) ─────────────────────────────────────────── */
         /* É o "card" branco que envolve tabs + busca + filtros. Tem o fundo,
         /* Sem chrome próprio — só agrupa tabs e controles. */
          a borda e a sombra — assim os filhos podem ser transparentes e o
          skin da wiki não passa por trás. */
         .gla-conquistas-toolbar {
         .gla-conquistas-toolbar {
             display: block;
             display: block;
             width: 100%;
             width: 100%;
             background: var(--gla-ctrl-bg);
             background: transparent;
             border: 1px solid var(--gla-ctrl-border);
             border: none;
             border-radius: 14px;
             border-radius: 0;
             box-shadow: var(--gla-shadow);
             box-shadow: none;
            padding: 0;
         }
         }


         /* ─── Wrapper de scroll das abas ─────────────────────────────────────── */
         /* ─── Wrapper das abas ───────────────────────────────────────────────── */
         /* overflow-x: auto ativa scroll horizontal em telas estreitas, evitando
         /* Sem scroll horizontal. As abas usam flex-wrap pra quebrar linha
          que as abas quebrem linha e fiquem "flutuando". A border-bottom faz
           naturalmente em telas estreitas. */
           o divisor entre as tabs e a área de busca/filtros. */
         .gla-conquistas-tabs-scroll {
         .gla-conquistas-tabs-scroll {
             position: relative;
             position: relative;
            z-index: 2;
             overflow: visible;
             overflow-x: auto;
             padding: 0;
             padding: 6px 10px 0;
             background: transparent;
             background: transparent;
             border: none;
             border: none;
            border-bottom: 1px solid var(--gla-ctrl-border);
             border-radius: 0;
             border-radius: 14px 14px 0 0;
            scrollbar-width: none;
            -ms-overflow-style: none;
            -webkit-overflow-scrolling: touch;
         }
         }


        .gla-conquistas-tabs-scroll::-webkit-scrollbar {
            display: none;
        }
        /* ─── Container das abas ─────────────────────────────────────────────── */
         .gla-conquistas-tabs {
         .gla-conquistas-tabs {
             display: flex;
             display: flex;
             flex-wrap: nowrap;
             flex-wrap: wrap;
             gap: 4px;
             gap: 6px;
             padding: 0;
             padding: 0;
            /* width:100% + min-width:max-content: em telas largas, as abas
              preenchem todo o container igualmente. Em telas estreitas, o
              container ultrapassa a viewport e o wrapper faz scroll
              horizontal — sem quebrar linha. */
             width: 100%;
             width: 100%;
             min-width: max-content;
             min-width: 0;
             box-sizing: border-box;
             box-sizing: border-box;
            margin: 0 0 12px;
         }
         }


         /* ─── Aba individual ─────────────────────────────────────────────────── */
         /* ─── Tab pill / botão ───────────────────────────────────────────────── */
         /* font-weight é o MESMO no ativo e no inativo. Antes a inativa era 600
         /* Botões redondos clean: branco com borda cinza, hover sutil,
          e a ativa 700, o que mudava a largura do texto e causava o "tick"
           ativo em azul sólido. Sem fichário, sem stripe. */
           (leve deslocamento) das abas vizinhas ao clicar.
          margin-bottom: -1px faz a tab sobrepor à border-bottom do scroll;
          só a tab ativa "apaga" essa borda com border-bottom-color branco. */
         .gla-conquistas-tab {
         .gla-conquistas-tab {
             flex: 1 1 0;
             flex: 0 0 auto;
            min-width: 80px;
             text-align: center;
             text-align: center;
             white-space: nowrap;
             white-space: nowrap;
             font-size: 13px;
             font-size: 13px;
             font-weight: 700;
             font-weight: 600;
             padding: 9px 14px 10px;
             padding: 7px 14px;
             border: 1px solid transparent;
             border: 1px solid var(--gla-rule);
            border-bottom: 1px solid transparent;
             border-radius: 999px;
             border-radius: 8px 8px 0 0;
             background: var(--gla-paper);
             background: var(--gla-paper-2);
             color: var(--gla-ink-2);
             color: var(--gla-ink-2);
            position: relative;
             cursor: pointer;
             cursor: pointer;
             box-sizing: border-box;
             box-sizing: border-box;
             margin-bottom: -1px;
             user-select: none;
             transition: background 0.15s, color 0.15s, border-color 0.15s;
             transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
         }
         }


         .gla-conquistas-tab:hover {
         .gla-conquistas-tab:hover {
             background: var(--gla-paper);
             background: var(--gla-paper-2);
             color: var(--gla-ink);
             color: var(--gla-ink);
            border-color: var(--gla-dim-2);
         }
         }


         .gla-conquistas-tab.is-active {
         .gla-conquistas-tab.is-active {
             background: var(--gla-ctrl-bg);
             background: var(--gla-accent);
             color: var(--gla-accent);
             color: #ffffff;
             z-index: 3;
            border-color: var(--gla-accent);
            border-color: var(--gla-ctrl-border);
             box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
            /* mesma cor do fundo do toolbar — "apaga" o divisor nesse ponto. */
        }
             border-bottom-color: var(--gla-ctrl-bg);
 
             /* linha azul no topo via inset shadow — não altera dimensões,
        .gla-conquistas-tab.is-active:hover {
              então clicar não causa deslocamento. */
             background: var(--gla-accent);
             box-shadow: inset 0 3px 0 var(--gla-accent);
             color: #ffffff;
             border-color: var(--gla-accent);
         }
         }


         /* ─── Box de controles (busca + filtros) ─────────────────────────────── */
         /* ─── Controles (busca + filtros) ────────────────────────────────────── */
        /* Sem fundo/borda próprios — herda do .gla-conquistas-toolbar. */
         .gla-conquistas-controls {
         .gla-conquistas-controls {
             display: flex;
             display: flex;
Linha 297: Linha 271:
             background: transparent;
             background: transparent;
             border: none;
             border: none;
             border-radius: 0 0 14px 14px;
             padding: 0;
             padding: 14px 18px;
             margin: 0;
            position: relative;
            z-index: 1;
         }
         }


         /* ─── Campo de busca ─────────────────────────────────────────────────── */
         /* Cresce no espaço livre até max-width; os filtros ficam encostados à
          direita dela em vez de no fim da linha. */
         .gla-conquistas-search {
         .gla-conquistas-search {
             flex: 1 1 auto;
             flex: 1 1 auto;
             min-width: 160px;
             min-width: 160px;
            max-width: 360px;
             padding: 8px 16px;
             padding: 8px 16px;
             border: 1px solid var(--gla-ctrl-border);
             border: 1px solid var(--gla-rule);
             border-radius: 999px;
             border-radius: 999px;
             font-size: 13px;
             font-size: 13px;
Linha 315: Linha 289:
             outline: none;
             outline: none;
             font-family: inherit;
             font-family: inherit;
             transition: box-shadow 0.15s, border-color 0.15s, background 0.15s;
             transition: box-shadow 0.15s, border-color 0.15s;
         }
         }


Linha 325: Linha 299:
             box-shadow: 0 0 0 3px var(--gla-accent-bg);
             box-shadow: 0 0 0 3px var(--gla-accent-bg);
             border-color: var(--gla-accent);
             border-color: var(--gla-accent);
            background: var(--gla-ctrl-bg);
         }
         }


         /* ─── Filtros (pills) ────────────────────────────────────────────────── */
         /* ─── Filtros ────────────────────────────────────────────────────────── */
        /* Encostados na search via gap natural do .gla-conquistas-controls. */
         .gla-conquistas-filters {
         .gla-conquistas-filters {
             display: flex;
             display: flex;
Linha 337: Linha 311:
         .gla-conquistas-filter {
         .gla-conquistas-filter {
             padding: 6px 14px;
             padding: 6px 14px;
             border: 1px solid var(--gla-ctrl-border);
             border: 1px solid var(--gla-rule);
             border-radius: 999px;
             border-radius: 999px;
             background: var(--gla-paper);
             background: var(--gla-paper);
Linha 350: Linha 324:
             background: var(--gla-paper-2);
             background: var(--gla-paper-2);
             color: var(--gla-ink);
             color: var(--gla-ink);
            border-color: var(--gla-dim-2);
         }
         }


Linha 358: Linha 333:
         }
         }


         /* ─── Painéis de conteúdo ────────────────────────────────────────────── */
         /* ─── Painéis ────────────────────────────────────────────────────────── */
         .gla-conquistas-panel {
         .gla-conquistas-panel {
             margin: 14px 0 0;
             margin: 14px 0 0;
Linha 375: Linha 350:
             display: flex;
             display: flex;
             flex-direction: column;
             flex-direction: column;
             gap: 12px;
             gap: 10px;
         }
         }


         /* ─── Card de conquista ───────────────────────────────────────────────── */
         /* ─── Card ───────────────────────────────────────────────────────────── */
         /* Visual minimalista: borda fina, sombra suave, hover sutil sem
         /* Branco com borda cinza. Hover marca borda azul (detalhe). */
          translate (causava reflow). Esquema branco + azul-claro. */
         .gla-item {
         .gla-item {
             display: flex;
             display: flex;
             flex-direction: column;
             flex-direction: column;
             background: var(--gla-ctrl-bg);
             background: var(--gla-paper);
             border: 1px solid var(--gla-accent-soft);
             border: 1px solid var(--gla-rule);
             border-radius: 12px;
             border-radius: 12px;
             box-shadow: var(--gla-shadow);
             box-shadow: var(--gla-shadow);
Linha 392: Linha 366:


         .gla-item.has-spoiler:hover {
         .gla-item.has-spoiler:hover {
             border-color: var(--gla-accent);
             border-color: var(--gla-accent-soft);
             box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.2);
             box-shadow: 0 2px 8px -2px rgba(37, 99, 235, 0.18);
         }
         }


Linha 402: Linha 376:
             padding: 14px 18px;
             padding: 14px 18px;
             min-height: 76px;
             min-height: 76px;
            position: relative;
         }
         }
        /* Abinha do spoiler vive sobreposta ao bottom da linha de conteúdo,
          sem adicionar padding-bottom — assim cards com ou sem spoiler
          têm exatamente a mesma altura. */


         .gla-item-left {
         .gla-item-left {
Linha 410: Linha 389:
             flex: 1;
             flex: 1;
             min-width: 0;
             min-width: 0;
            /* sem divisor vertical — minimalista */
         }
         }


Linha 420: Linha 398:
         }
         }


         /* Ícone respeita o tamanho do arquivo da wiki (recomendado: 52×52).
         /* Ícone respeita o tamanho do arquivo na wiki (recomendado: 52×52).
           Sem dimensões fixas no CSS. */
           Sem dimensões fixas. */
         .gla-item-icon img {
         .gla-item-icon img {
             object-fit: contain;
             object-fit: contain;
Linha 431: Linha 409:
         }
         }


        /* Título preto (sem azul). Azul fica só nos detalhes. */
         .gla-item-title {
         .gla-item-title {
             font-size: 15px;
             font-size: 15px;
             font-weight: 700;
             font-weight: 700;
             color: var(--gla-accent-soft);
             color: var(--gla-ink);
             line-height: 1.2;
             line-height: 1.25;
         }
         }


         .gla-conquistas-root .gla-item-title {
         .gla-conquistas-root .gla-item-title {
             color: #1d4ed8;
             color: var(--gla-ink);
            /* blue-700 — título da conquista forte */
        }
 
        @media (prefers-color-scheme: dark) {
            .gla-conquistas-root .gla-item-title {
                color: #60a5fa;
                /* blue-400 no dark */
            }
         }
         }


Linha 457: Linha 428:
         }
         }


         /* ─── Box de recompensa ──────────────────────────────────────────────── */
         /* ─── Recompensa ─────────────────────────────────────────────────────── */
         /* Coluna fixa centralizada. margin-top negativo + align-self start
         /* Bloco externo: NÃO tem chrome próprio — só agrupa o label (acima)
          sobe o conjunto pra compensar o badge .qty (do Widget:Item) que sai
           e o chip de itens (.reward-wrapper). Label fora da box pra não ser
           ~3px pra baixo do ícone — sem isso, o bloco parece "puxado pra baixo"
           comprimido quando o chip encolhe com poucos itens. */
           mesmo estando tecnicamente centralizado. */
         .gla-item-reward {
         .gla-item-reward {
             flex-shrink: 0;
             flex-shrink: 0;
Linha 467: Linha 437:
             flex-direction: column;
             flex-direction: column;
             align-items: center;
             align-items: center;
             gap: 4px;
             gap: 6px;
            padding: 8px 14px 10px;
             background: transparent;
             background: var(--gla-accent-bg);
             border: none;
             border: 1px solid var(--gla-accent-soft);
             padding: 0;
             border-radius: 10px;
            min-width: 180px;
            max-width: 260px;
             align-self: center;
             align-self: center;
             margin-top: -4px;
             margin-top: -4px;
            position: relative;
            /* ancora pro popover "+M" */
         }
         }


         .gla-item-reward-label {
         .gla-item-reward-label {
            font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
             font-size: 11px;
             font-size: 11px;
             font-weight: 700;
             font-weight: 700;
             letter-spacing: 0.14em;
             letter-spacing: 0.16em;
             text-transform: uppercase;
             text-transform: uppercase;
             color: var(--gla-accent);
             color: var(--gla-accent);
Linha 487: Linha 457:
         }
         }


         /* ─── Botão spoiler ──────────────────────────────────────────────────── */
        /* Chip de itens — agora é o .reward-wrapper (emitido pelo Lua/Widget:Item).
          Encolhe com a quantidade (min-width pra 1 item, max-width pra caber
          5 + chip "+M" sem wrap). */
        .gla-item-reward .reward-wrapper {
            display: block;
            background: var(--gla-paper-3);
            border: 1px solid var(--gla-rule);
            border-radius: 10px;
            padding: 7px 12px 9px;
            min-width: 72px;
            /* 285 = espaço pra 4 ícones (4×48 + 3×4) + chip "+M" (48) + gaps + padding. */
            max-width: 285px;
            width: fit-content;
            box-sizing: border-box;
        }
 
         /* ─── Botão spoiler (abinha no bottom-center) ────────────────────────── */
        /* Posicionado absolutamente no bottom-center do .gla-item-main.
          Pequeno e horizontalmente centralizado — fica no "corredor" central
          livre entre o título/desc à esquerda e a recompensa à direita,
          sem aumentar a altura do card. */
         .gla-item-spoiler-toggle {
         .gla-item-spoiler-toggle {
            position: absolute;
            /* main padding-left (18) + icon (52) + gap (14) = 84 → alinhado com o começo do título.
              A versão anterior usava left:50% (centrado), mas o chip da recompensa
              encavalava em telas mais apertadas. Ancorar à esquerda elimina a colisão. */
            left: 84px;
            bottom: 6px;
             display: inline-flex;
             display: inline-flex;
             align-items: center;
             align-items: center;
             gap: 6px;
             gap: 6px;
             margin-left: auto;
             margin: 0;
            align-self: center;
             border: 1px solid var(--gla-rule);
             border: 1px solid var(--gla-accent-soft);
             background: var(--gla-paper);
             background: var(--gla-accent-bg);
             border-radius: 999px;
             border-radius: 999px;
             padding: 6px 12px;
             padding: 2px 12px 3px;
             font: inherit;
             font: inherit;
             color: var(--gla-accent);
             color: var(--gla-ink-2);
             cursor: pointer;
             cursor: pointer;
             transition: background 0.15s, border-color 0.15s;
            z-index: 1;
             transition: background 0.15s, border-color 0.15s, color 0.15s;
         }
         }


         .gla-item-spoiler-toggle:hover {
         .gla-item-spoiler-toggle:hover {
             background: var(--gla-accent);
             background: var(--gla-accent-bg);
             border-color: var(--gla-accent);
             border-color: var(--gla-accent-soft);
             color: #ffffff;
             color: var(--gla-accent);
         }
         }


         .gla-item-spoiler-toggle:hover .gla-item-chevron {
         .gla-item-spoiler-toggle:hover .gla-item-chevron {
             color: #ffffff;
             color: var(--gla-accent);
         }
         }


         .gla-item-spoiler-text {
         .gla-item-spoiler-text {
            font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
             font-size: 11px;
             font-size: 11px;
             font-weight: 700;
             font-weight: 700;
             letter-spacing: 0.08em;
             letter-spacing: 0.1em;
             text-transform: uppercase;
             text-transform: uppercase;
         }
         }


        /* ─── Chevron (desenhado via border-corner) ─────────────────────────── */
        /* O caractere `›` que o Lua emite não é centralizado dentro do seu
          glifo — girar como texto fica torto. Em vez disso esconde o texto
          (font-size 0) e desenha o chevron via pseudo-elemento com
          border-right + border-top a 45°. Esse shape é perfeitamente simé-
          trico, então rotacionar o span pai em volta do centro funciona. */
         .gla-item-chevron {
         .gla-item-chevron {
             font-size: 18px;
            position: relative;
            display: inline-block;
            width: 12px;
            height: 12px;
             font-size: 0;
            line-height: 0;
             color: var(--gla-accent);
             color: var(--gla-accent);
            line-height: 1;
             flex-shrink: 0;
             flex-shrink: 0;
             transition: transform 0.2s ease, color 0.15s;
            transform-origin: 50% 50%;
            /* Curva elástica leve — chega no destino com um micro-overshoot
              em vez de parar seco no 90°. */
             transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.15s ease;
             user-select: none;
             user-select: none;
        }
        .gla-item-chevron::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 6px;
            height: 6px;
            border-top: 2px solid currentColor;
            border-right: 2px solid currentColor;
            transform: translate(-65%, -50%) rotate(45deg);
         }
         }


Linha 534: Linha 557:
         }
         }


         /* ─── Conteúdo spoiler ────────────────────────────────────────────────── */
         /* ─── Spoiler aberto ─────────────────────────────────────────────────── */
         .gla-item-spoiler {
         .gla-item-spoiler {
             display: none;
             display: none;
             border-top: 1px solid var(--gla-accent-soft);
             border-top: 1px solid var(--gla-rule);
             background: var(--gla-spoiler-bg);
             background: var(--gla-paper-2);
             padding: 14px 18px;
             padding: 14px 18px;
             gap: 18px;
             gap: 18px;
Linha 548: Linha 571:
         .gla-item.is-open .gla-item-spoiler {
         .gla-item.is-open .gla-item-spoiler {
             display: flex;
             display: flex;
             animation: gla-spoiler-in 0.25s ease-out;
             animation: gla-spoiler-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
         }
         }


Linha 554: Linha 577:
             from {
             from {
                 opacity: 0;
                 opacity: 0;
                 transform: translateY(-8px);
                 transform: translateY(-6px);
             }
             }


Linha 569: Linha 592:
             line-height: 1.55;
             line-height: 1.55;
             min-width: 0;
             min-width: 0;
        }
        .gla-item-spoiler-info a {
            color: var(--gla-accent);
         }
         }


         .gla-item-spoiler-media {
         .gla-item-spoiler-media {
             flex: 0 0 280px;
             flex: 0 0 360px;
             max-width: 400px;
             max-width: 480px;
         }
         }


Linha 581: Linha 608:
             height: auto;
             height: auto;
             border-radius: 8px;
             border-radius: 8px;
             border: 1.5px solid var(--gla-ctrl-border) !important;
             border: 1px solid var(--gla-rule) !important;
             display: block;
             display: block;
         }
         }


         /* ─── Conquista oculta ────────────────────────────────────────────────── */
         /* ─── Card "secreta no jogo" ────────────────────────────────────────────
         /* Cinza simples (sem padrão listrado) pra ficar visualmente leve.
          O estado "oculta" não esconde nada — só marca visualmente que ESSA
           Diferencia da normal só pela cor da borda + texto esmaecido. */
          conquista aparece como ??? no jogo. O marcador precisa ser legível
          pra que o jogador pareando game ↔ wiki entenda de imediato "ah,
          por isso que essa não aparece pra mim no client".
 
          Cinco variantes selecionáveis via data-hidden-style no root:
            - badge  : pill "Oculta no jogo" inline ao lado do título
            - stripes : padrão diagonal sutil + tag flutuante no topo
            - ribbon  : fita diagonal cinza "SECRETA" no canto top-left  ← default
            - stamp  : carimbo translúcido "OCULTA" sobreposto à direita
            - subtle  : só italic + cinza (controle: o que existia antes)
 
          Acento dos marcadores: slate (cinza neutro). Mantém o tema
          branco+azul "limpo" — o cinza só sinaliza estado "secreta" sem
          competir com o azul institucional. */
 
         .gla-conquistas-root {
            --gla-secret: #475569;
            /* slate-600 — ink/fill escuro */
            --gla-secret-bg: #f1f5f9;
            /* slate-100 — fill claro */
            --gla-secret-line: #cbd5e1;
            /* slate-300 — borda */
            --gla-secret-soft: #f8fafc;
            /* slate-50  — bg do card */
        }
 
        /* Baseline: card oculto recebe leve tint slate quase imperceptível.
           Não diminui contraste do conteúdo (título preto, desc slate-600
          normal); só serve de "tinta de fundo" pra o card parecer um pouco
          diferente mesmo antes do marcador específico da variante. */
         .gla-item.is-hidden,
         .gla-item.is-hidden,
         .gla-item[data-hidden="true"] {
         .gla-item[data-hidden="true"] {
             background: var(--gla-paper);
             background: var(--gla-secret-soft);
             border-color: var(--gla-dim-2);
             border-color: var(--gla-secret-line);
             box-shadow: var(--gla-shadow);
             position: relative;
         }
         }


         .gla-item.is-hidden:hover,
         .gla-item.is-hidden:hover,
         .gla-item[data-hidden="true"]:hover {
         .gla-item[data-hidden="true"]:hover {
             border-color: var(--gla-dim);
             border-color: var(--gla-secret);
             box-shadow: var(--gla-shadow);
             box-shadow: 0 2px 8px -2px rgba(71, 85, 105, 0.18);
        }
 
        .gla-item.is-hidden .gla-item-reward .reward-wrapper,
        .gla-item[data-hidden="true"] .gla-item-reward .reward-wrapper {
            background: #ffffff;
            border-color: var(--gla-secret-line);
        }
 
        .gla-item.is-hidden .gla-item-reward-label,
        .gla-item[data-hidden="true"] .gla-item-reward-label {
            color: var(--gla-secret);
         }
         }


         .gla-conquistas-root .gla-item.is-hidden .gla-item-title,
        /* ─── Reveal modes ──────────────────────────────────────────────────────
         .gla-conquistas-root .gla-item[data-hidden="true"] .gla-item-title {
          Independente do marcador (badge/ribbon/etc), o conteúdo do card
            color: var(--gla-ink-2);
          pode vir "censurado" e ser revelado ao clique — útil pra quem
             font-style: italic;
          entra na wiki querendo evitar spoiler. Click em qualquer parte do
          card (menos chip de recompensa, links, botão de spoiler) adiciona
          .is-revealed via JS.
 
            "none"        — sem censura
            "blur"        — título+desc borrados (default)
            "redacted"    — tarjas slate (estilo doc classificado)
            "placeholder" — texto vira "???"
            "veil"        — overlay total com CTA "clique para revelar"
 
          O marcador (badge/ribbon/etc) continua visível em blur/redacted/
          placeholder — o jogador SABE que é secreta, só não vê o conteúdo.
          No veil até o marcador é coberto. */
 
         .gla-conquistas-root[data-reveal-mode="blur"] .gla-item[data-hidden="true"]:not(.is-revealed),
        .gla-conquistas-root[data-reveal-mode="redacted"] .gla-item[data-hidden="true"]:not(.is-revealed),
         .gla-conquistas-root[data-reveal-mode="placeholder"] .gla-item[data-hidden="true"]:not(.is-revealed),
        .gla-conquistas-root[data-reveal-mode="veil"] .gla-item[data-hidden="true"]:not(.is-revealed) {
             cursor: pointer;
         }
         }


         .gla-item.is-hidden .gla-item-desc,
         .gla-item[data-hidden="true"] .gla-item-main,
        .gla-item[data-hidden="true"] .gla-item-title,
         .gla-item[data-hidden="true"] .gla-item-desc {
         .gla-item[data-hidden="true"] .gla-item-desc {
            transition: filter 0.25s ease, background-color 0.25s ease, color 0.25s ease;
        }
        /* — BLUR
          Aplicado no .gla-item-main (pai que envolve icon + title + desc +
          reward + spoiler-toggle) — borra TUDO de uma vez. Antes só borrava
          título e descrição, mas o ícone da conquista também entregava a
          secreta. O ribbon "SECRETA" tá no ::before do .gla-item (fora do
          main), então continua nítido. */
        .gla-conquistas-root[data-reveal-mode="blur"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-main {
            filter: blur(5px);
            user-select: none;
        }
        /* — REDACTED (tarjas estilo doc classificado) */
        .gla-conquistas-root[data-reveal-mode="redacted"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-title,
        .gla-conquistas-root[data-reveal-mode="redacted"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-desc {
            background: #334155;
            color: transparent;
            border-radius: 3px;
            user-select: none;
            width: max-content;
            max-width: 100%;
        }
        .gla-conquistas-root[data-reveal-mode="redacted"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-title::after {
            display: none;
        }
        /* — PLACEHOLDER ("???") */
        .gla-conquistas-root[data-reveal-mode="placeholder"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-title {
            color: transparent;
            font-size: 0 !important;
            line-height: 1.25;
            position: relative;
        }
        .gla-conquistas-root[data-reveal-mode="placeholder"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-title::before {
            content: "???";
            font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0.2em;
             color: var(--gla-dim);
             color: var(--gla-dim);
         }
         }


         .gla-item.is-hidden .gla-item-reward,
        .gla-conquistas-root[data-reveal-mode="placeholder"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-title::after {
         .gla-item[data-hidden="true"] .gla-item-reward {
            display: none;
        }
 
        .gla-conquistas-root[data-reveal-mode="placeholder"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-desc {
            color: transparent;
            font-size: 0 !important;
            line-height: 1.4;
            position: relative;
        }
 
        .gla-conquistas-root[data-reveal-mode="placeholder"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-desc::before {
            content: "??? ??? ??? ???";
            font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
            font-size: 13px;
            letter-spacing: 0.15em;
            color: var(--gla-dim);
        }
 
        /* — VEIL (overlay total cobrindo o card) */
        .gla-conquistas-root[data-reveal-mode="veil"] .gla-item[data-hidden="true"]:not(.is-revealed) {
            overflow: hidden;
        }
 
        .gla-conquistas-root[data-reveal-mode="veil"] .gla-item[data-hidden="true"]:not(.is-revealed)::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(248, 250, 252, 0.92);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            z-index: 4;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }
 
        .gla-conquistas-root[data-reveal-mode="veil"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-main::before {
            content: "Conquista secreta — clique para revelar";
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--gla-secret);
            z-index: 5;
            padding-left: 36px;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='11' x='3' y='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
            background-repeat: no-repeat;
            background-position: calc(50% - 105px) 50%;
            background-size: 16px 16px;
            pointer-events: none;
        }
 
        /* Quando revelado: fade-in suave do conteúdo */
        .gla-item[data-hidden="true"].is-revealed .gla-item-title,
         .gla-item[data-hidden="true"].is-revealed .gla-item-desc {
            animation: gla-reveal 0.4s ease;
        }
 
        @keyframes gla-reveal {
            from {
                opacity: 0;
            }
 
            to {
                opacity: 1;
            }
        }
 
        /* ─── Variante A — BADGE (default fallback) ─────────────────────────── */
        /* Pill cinza inline ao lado do título com ícone eye-off. Direto e
          legível, não rouba real estate do card. */
        .gla-conquistas-root[data-hidden-style="badge"] .gla-item[data-hidden="true"] .gla-item-left>div:not(.gla-item-icon) {
            flex: 1;
            min-width: 0;
        }
 
        .gla-conquistas-root[data-hidden-style="badge"] .gla-item[data-hidden="true"] .gla-item-title {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 4px 8px;
        }
 
        .gla-conquistas-root[data-hidden-style="badge"] .gla-item[data-hidden="true"] .gla-item-title::after {
            content: "Oculta no jogo";
            display: inline-flex;
            align-items: center;
            padding: 2px 9px 2px 22px;
            background: var(--gla-secret-bg);
            color: var(--gla-secret);
            border: 1px solid var(--gla-secret-line);
            font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            line-height: 1;
            border-radius: 999px;
            white-space: nowrap;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/><path d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/><path d='M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/><line x1='2' x2='22' y1='2' y2='22'/></svg>");
            background-repeat: no-repeat;
            background-position: 6px 50%;
            background-size: 12px 12px;
            background-color: var(--gla-secret-bg);
        }
 
        /* ─── Variante B — STRIPES ─────────────────────────────────────────── */
        .gla-conquistas-root[data-hidden-style="stripes"] .gla-item[data-hidden="true"] {
            background-image:
                repeating-linear-gradient(-45deg,
                    transparent 0 14px,
                    rgba(71, 85, 105, 0.06) 14px 16px);
            background-color: var(--gla-secret-soft);
        }
 
        .gla-conquistas-root[data-hidden-style="stripes"] .gla-item[data-hidden="true"] .gla-item-main::before {
            content: "Oculta no jogo";
            position: absolute;
            top: -1px;
            left: 18px;
            transform: translateY(-50%);
            background: var(--gla-secret);
            color: #fff;
            font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            line-height: 1;
            padding: 4px 10px 5px 24px;
            border-radius: 999px;
            white-space: nowrap;
            z-index: 2;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/><path d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/><path d='M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/><line x1='2' x2='22' y1='2' y2='22'/></svg>");
            background-repeat: no-repeat;
            background-position: 7px 50%;
            background-size: 12px 12px;
        }
 
        .gla-conquistas-root[data-hidden-style="stripes"] .gla-item[data-hidden="true"] .gla-item-main {
            padding-top: 20px;
        }
 
        /* ─── Variante C — RIBBON (default) ─────────────────────────────────── */
        /* Fita diagonal cinza "SECRETA" no canto top-left. */
        .gla-conquistas-root[data-hidden-style="ribbon"] .gla-item[data-hidden="true"] {
            overflow: hidden;
        }
 
        .gla-conquistas-root[data-hidden-style="ribbon"] .gla-item[data-hidden="true"]::before {
            content: "SECRETA";
            position: absolute;
            top: 14px;
            left: -38px;
            width: 140px;
            transform: rotate(-45deg);
            background: var(--gla-secret);
            color: #fff;
            font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-align: center;
            line-height: 1;
            padding: 4px 0 5px;
            box-shadow: 0 1px 2px rgba(71, 85, 105, 0.25);
            z-index: 2;
            pointer-events: none;
         }
 
        .gla-conquistas-root[data-hidden-style="ribbon"] .gla-item[data-hidden="true"] .gla-item-main {
            padding-left: 38px;
        }
 
        @media (max-width: 720px) {
            .gla-conquistas-root[data-hidden-style="ribbon"] .gla-item[data-hidden="true"] .gla-item-main {
                padding-left: 38px;
            }
        }
 
        /* ─── Variante D — STAMP ─────────────────────────────────────────────── */
        .gla-conquistas-root[data-hidden-style="stamp"] .gla-item[data-hidden="true"]::before {
            content: "OCULTA";
            position: absolute;
            top: 50%;
            right: 240px;
            transform: translateY(-50%) rotate(-12deg);
            font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
            font-size: 28px;
            font-weight: 700;
            letter-spacing: 0.25em;
            color: var(--gla-secret);
            opacity: 0.18;
            border: 3px solid var(--gla-secret);
            border-radius: 6px;
            padding: 4px 12px;
            pointer-events: none;
            white-space: nowrap;
            z-index: 1;
        }
 
        @media (max-width: 720px) {
            .gla-conquistas-root[data-hidden-style="stamp"] .gla-item[data-hidden="true"]::before {
                top: 14px;
                right: 14px;
                transform: rotate(-12deg);
                font-size: 22px;
            }
        }
 
        /* ─── Variante E — SUBTLE ────────────────────────────────────────────── */
        .gla-conquistas-root[data-hidden-style="subtle"] .gla-item[data-hidden="true"] {
             background: var(--gla-paper-2);
             background: var(--gla-paper-2);
             border-color: var(--gla-dim-2);
             border-color: var(--gla-dim-2);
         }
         }


         .gla-item.is-hidden .gla-item-reward-label,
         .gla-conquistas-root[data-hidden-style="subtle"] .gla-item[data-hidden="true"] .gla-item-title {
         .gla-item[data-hidden="true"] .gla-item-reward-label {
            color: var(--gla-ink-2);
            font-style: italic;
         }
 
        .gla-conquistas-root[data-hidden-style="subtle"] .gla-item[data-hidden="true"] .gla-item-desc {
             color: var(--gla-dim);
             color: var(--gla-dim);
         }
         }


         .gla-item.is-hidden .gla-item-chevron,
         .gla-conquistas-root[data-hidden-style="subtle"] .gla-item[data-hidden="true"] .gla-item-reward .reward-wrapper {
         .gla-item[data-hidden="true"] .gla-item-chevron {
            background: var(--gla-paper-3);
            border-color: var(--gla-dim-2);
        }
 
         .gla-conquistas-root[data-hidden-style="subtle"] .gla-item[data-hidden="true"] .gla-item-reward-label {
             color: var(--gla-dim);
             color: var(--gla-dim);
         }
         }


         /* ─── Reward items (Widget:Item) ─────────────────────────────────────── */
         .gla-conquistas-root[data-hidden-style="subtle"] .gla-item[data-hidden="true"]:hover {
         .gla-item-reward .reward-wrapper {
            border-color: var(--gla-dim);
            width: 100%;
            box-shadow: var(--gla-shadow);
             display: block;
         }
 
        .gla-conquistas-root[data-hidden-style="subtle"] .gla-item[data-hidden="true"] .gla-item-title::after,
        .gla-conquistas-root[data-hidden-style="subtle"] .gla-item[data-hidden="true"]::before {
             content: none;
         }
         }


        /* ─── Reward items (Widget:Item) ─────────────────────────────────────── */
         .gla-item-reward .item-wrapper-special {
         .gla-item-reward .item-wrapper-special {
             filter: none !important;
             filter: none !important;
Linha 640: Linha 998:
         .gla-item-reward .reward-items {
         .gla-item-reward .reward-items {
             display: flex !important;
             display: flex !important;
             flex-wrap: wrap !important;
            /* nowrap = trava a altura. O JS abaixo move itens excedentes pra
              dentro do chip "+M" depois do 5º. */
             flex-wrap: nowrap !important;
             justify-content: center;
             justify-content: center;
             gap: 4px;
             gap: 4px;
Linha 646: Linha 1 006:
         }
         }


         /* ─── Responsivo mobile ──────────────────────────────────────────────── */
        /* ─── Chip "+M" (overflow) ─────────────────────────────────────────── */
        /* Mesmo tamanho/forma do .item-wrapper pra alinhar visualmente com os
          ícones, mas com texto "+N" no centro. Click abre o popover com os
          itens escondidos. */
        .gla-item-reward .reward-more-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            padding: 0;
            border: 1px solid var(--gla-rule);
            border-radius: 8px;
            background: var(--gla-paper);
            color: var(--gla-accent);
            font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
            font-size: 18px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: -0.02em;
            cursor: pointer;
            flex-shrink: 0;
            transition: background 0.15s, border-color 0.15s, color 0.15s;
        }
 
        .gla-item-reward .reward-more-chip:hover,
        .gla-item-reward .reward-more-chip[aria-expanded="true"] {
            background: var(--gla-accent-bg);
            border-color: var(--gla-accent-soft);
        }
 
        /* Popover ancorado no chip — drop-down dos itens escondidos. */
        .gla-item-reward .reward-overflow-popover {
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 4px;
            padding: 8px;
            background: var(--gla-paper);
            border: 1px solid var(--gla-rule);
            border-radius: 10px;
            box-shadow: 0 6px 18px -4px rgba(15, 23, 42, 0.15),
                0 2px 6px -2px rgba(15, 23, 42, 0.08);
            z-index: 10;
            max-width: 268px;
            animation: gla-popover-in 0.18s ease;
        }
 
        .gla-item-reward .reward-overflow-popover[hidden] {
            display: none;
        }
 
        @keyframes gla-popover-in {
            from {
                opacity: 0;
                transform: translateY(-4px);
            }
 
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
 
         /* ─── Responsivo ─────────────────────────────────────────────────────── */
         @media (max-width: 720px) {
         @media (max-width: 720px) {
             .gla-conquistas-tab {
             .gla-conquistas-tab {
                 font-size: 12px;
                 font-size: 12px;
                 padding: 8px 12px 9px;
                 padding: 6px 11px;
                min-width: 68px;
             }
             }


             .gla-item-main {
             .gla-item-main {
                 flex-wrap: wrap;
                 flex-wrap: wrap;
                padding: 12px 14px;
             }
             }


Linha 672: Linha 1 099:
             }
             }


            /* No mobile o stack vertical empurra o "bottom" do .gla-item-main
              pra cima da recompensa — o spoiler absoluto colidiria com o chip.
              Saindo do absoluto e deixando ele fluir como 3º item do flex-wrap. */
             .gla-item-spoiler-toggle {
             .gla-item-spoiler-toggle {
                 margin-left: 0;
                position: static;
                transform: none;
                align-self: flex-start;
                 margin: 4px 0 0;
                padding: 2px 11px 3px;
             }
             }


Linha 743: Linha 1 177:
             }
             }


            // Mostra a barra de filtros só quando faz sentido: na aba Coliseu mostra
            // o subset (One Man Army / Corrida). Nas outras, só mostra o filtro
            // normal/hidden se a aba tiver pelo menos uma conquista oculta —
            // se não tiver, esconde pra não poluir.
             function syncFilterBarForTab(tabName) {
             function syncFilterBarForTab(tabName) {
                 var hiddenCount = countHiddenInTab(tabName);
                 var hiddenCount = countHiddenInTab(tabName);
Linha 836: Linha 1 274:
                     card.classList.add("is-open");
                     card.classList.add("is-open");
                     toggle.setAttribute("aria-expanded", "true");
                     toggle.setAttribute("aria-expanded", "true");
                }
            });
            // ─── Reveal + persistência ────────────────────────────────────────
            // Click no card hidden remove a censura (anti-spoiler) e o estado
            // é salvo no localStorage. Próxima visita à página, conquistas que
            // o jogador já revelou voltam reveladas — não precisa clicar de novo.
            //
            // Chave: "glaConquistasRevealed" → JSON com array de data-id.
            // Robusto a localStorage indisponível (modo privado, cookies
            // bloqueados) — só falha silenciosamente.
            var REVEAL_STORAGE_KEY = "glaConquistasRevealed";
            function loadRevealed() {
                try {
                    var raw = window.localStorage.getItem(REVEAL_STORAGE_KEY);
                    if (!raw) return {};
                    var arr = JSON.parse(raw);
                    if (!Array.isArray(arr)) return {};
                    var set = {};
                    for (var i = 0; i < arr.length; i++) {
                        if (arr[i] != null) set[String(arr[i])] = true;
                    }
                    return set;
                } catch (e) {
                    return {};
                }
            }
            function saveRevealed(set) {
                try {
                    var arr = Object.keys(set);
                    window.localStorage.setItem(REVEAL_STORAGE_KEY, JSON.stringify(arr));
                } catch (e) { /* localStorage indisponível — ok */ }
            }
            var revealedSet = loadRevealed();
            // Re-aplica .is-revealed nos cards que já tavam revelados em
            // sessões anteriores. Roda agora (depois do JS já ter movido os
            // cards do source pros painéis).
            root.querySelectorAll('.gla-item[data-hidden="true"][data-id]').forEach(function (card) {
                if (revealedSet[card.getAttribute("data-id")]) {
                    card.classList.add("is-revealed");
                }
            });
            // Click — revela e persiste. Só ativa se data-reveal-mode no root
            // estiver definido como blur/redacted/placeholder/veil. Ignora
            // clicks em interativos dentro do card (botão de spoiler, ícones
            // de reward com tooltip, links na descrição, chip "+N" de overflow).
            root.addEventListener("click", function (e) {
                var mode = root.getAttribute("data-reveal-mode") || "none";
                if (mode === "none") return;
                var card = e.target.closest('.gla-item[data-hidden="true"]');
                if (!card) return;
                if (card.classList.contains("is-revealed")) return;
                if (e.target.closest(".gla-item-spoiler-toggle, .item-wrapper, a, .reward-more-chip, .reward-overflow-popover")) return;
                card.classList.add("is-revealed");
                var id = card.getAttribute("data-id");
                if (id) {
                    revealedSet[id] = true;
                    saveRevealed(revealedSet);
                 }
                 }
             });
             });
Linha 870: Linha 1 372:
             abrirAba("geral");
             abrirAba("geral");
         });
         });
    </script>
    <!-- ─── Overflow das recompensas: "+M" chip + popover ─────────────────────
        Para cada .reward-items com mais de MAX itens, esconde do (MAX+1)º em
        diante, joga os escondidos num popover, e planta um chip "+M" no fim
        da linha. Clique no chip abre o popover ancorado abaixo do chip.
        Click fora fecha. Esc fecha.
        É responsabilidade do widget — o Lua não precisa mudar, já que
        .reward-items vem do Widget:Item igual à Predefinição:Reward.
    ─────────────────────────────────────────────────────────────────────── -->
    <script>
        (function () {
            var MAX_VISIBLE = 4;
            function processOne(reward) {
                if (reward.dataset.glaOverflow === "done") return;
                var line = reward.querySelector(".reward-items");
                if (!line) return;
                var items = [];
                for (var i = 0; i < line.children.length; i++) {
                    var c = line.children[i];
                    if (c.classList && c.classList.contains("item-wrapper")) items.push(c);
                }
                if (items.length <= MAX_VISIBLE) {
                    reward.dataset.glaOverflow = "done";
                    return;
                }
                var hidden = items.slice(MAX_VISIBLE);
                var popover = document.createElement("div");
                popover.className = "reward-overflow-popover";
                popover.hidden = true;
                hidden.forEach(function (el) { popover.appendChild(el); });
                var chip = document.createElement("button");
                chip.type = "button";
                chip.className = "reward-more-chip";
                chip.setAttribute("aria-expanded", "false");
                chip.setAttribute("aria-label", "Ver mais " + hidden.length + " recompensa(s)");
                chip.textContent = "+" + hidden.length;
                line.appendChild(chip);
                reward.appendChild(popover);
                chip.addEventListener("click", function (e) {
                    e.stopPropagation();
                    var open = chip.getAttribute("aria-expanded") === "true";
                    closeAll();
                    if (!open) {
                        popover.hidden = false;
                        chip.setAttribute("aria-expanded", "true");
                    }
                });
                reward.dataset.glaOverflow = "done";
            }
            function closeAll() {
                document.querySelectorAll(".reward-overflow-popover").forEach(function (p) {
                    p.hidden = true;
                });
                document.querySelectorAll(".reward-more-chip").forEach(function (c) {
                    c.setAttribute("aria-expanded", "false");
                });
            }
            function processAll() {
                document.querySelectorAll(".gla-item-reward").forEach(processOne);
            }
            if (document.readyState === "loading") {
                document.addEventListener("DOMContentLoaded", processAll);
            } else {
                processAll();
            }
            document.addEventListener("click", function (e) {
                if (e.target.closest(".reward-overflow-popover, .reward-more-chip")) return;
                closeAll();
            });
            document.addEventListener("keydown", function (e) {
                if (e.key === "Escape") closeAll();
            });
        })();
     </script>
     </script>
</includeonly>
</includeonly>

Edição atual tal como às 21h42min de 20 de maio de 2026

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Conquistas&oldid=47062”