/* ===== Bloco style #1 ===== */
:root{
    /* reforca o <meta name="color-scheme" content="dark"> em index.html
       (mesmo motivo: desliga o "Force Dark"/"Auto Dark Theme" do Chrome
       no Android, que reestilizava sozinho qualquer <a> -- ex.: linhas
       de Politica de Privacidade/Termos de Uso em Config -- com azul e
       sublinhado, ignorando a cor definida abaixo em --text). */
    color-scheme: dark;
    --bg:#1A1526;
    --panel:#1A1526;
    --panel-2:#251E38;
    --line:#3B3057;
    --text:#F5F0E9;
    --muted:#B9AED2;
    --dim:#8779A8;
    --accent:#F2A65A;
    --accent-dim:#5A3D20;
    --gold:#F2C94C;
    --blood:#E5698A;
    --verde:#63C99A;
    --perigo:#F45781;
    --perigo2:#E03131;
    --panel-3:#2A2240;
    --mobname:#F0A0BE;
    --arena-1:#3A2F57;
    --arena-2:#2C2444;
    --arena-3:#221B36;
    --sel-bg:#342A50;
    --poco:#1F1930;
    --xp2:#F2C94C;
    /* curvas de animacao (pedido do usuario -- animacoes "premium" tipo
       v0/Framer Motion). --expo: desacelera rapido, sem overshoot -- pra
       coisas de tela cheia onde "passar do ponto" mostraria fundo (slides,
       largura de barra). --spring-curve: overshoot leve tipo mola, pra
       elementos pequenos/contidos (cards entrando, popups, pills). Nao
       varia por tema, entao fica so aqui no :root base. */
    --expo: cubic-bezier(.16,1,.3,1);
    --spring-curve: cubic-bezier(.34,1.56,.64,1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* html precisa do mesmo background:var(--bg) que o body -- bug real
     encontrado (pedido do usuario: "tela pisca ao trocar de tema", ja
     achava que tinha sido corrigido): escolherTema() faz um cross-fade
     de opacity no <html> inteiro (documentElement) pra suavizar a troca
     de --accent/--bg/etc, mas sem background proprio o <html> fica
     transparente -- durante o mergulho de opacity (chega a ~0.4) o
     conteudo e composto sobre o canvas padrao do navegador (branco),
     nao sobre --bg, e isso e o flash/piscar visto. Confirmado
     instrumentando getComputedStyle(documentElement).backgroundColor
     durante a transicao real: ficava rgba(0,0,0,0) o tempo todo antes
     deste fix. Com --bg tambem no html, a opacity anima contra a
     propria cor de fundo do tema, sem revelar nada por baixo. */
  html{background:var(--bg)}
  body{background:var(--bg);color:var(--text);font-family:'Outfit',system-ui,sans-serif;display:flex;justify-content:center;min-height:100vh;min-height:100dvh;padding:16px}
  .app{width:100%;max-width:400px;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden}
  .tasks{flex:1}
  .nav{margin-top:auto}

  .topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
  .lvl{font-family:'Silkscreen',monospace;font-size:9px;color:var(--accent);background:var(--accent-dim);padding:5px 9px;border-radius:4px}
  .coins{display:flex;align-items:center;gap:6px;font-family:'Silkscreen',monospace;font-size:10px;color:var(--gold)}
  .coins svg{width:30px;height:30px}

  .arena{padding:22px 18px 18px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
  .fight{display:flex;align-items:flex-end;justify-content:center;gap:28px;margin-bottom:16px}
  .fighter{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
  .fighter svg{image-rendering:pixelated}
  .hero-sprite svg{width:74px;height:74px;transition:transform .18s}
  .mob-sprite svg{width:78px;height:78px;transition:transform .18s,opacity .35s}
  .mob-sprite.dead svg{opacity:0;transform:translateY(14px) scale(.6) rotate(12deg)}
  .mob-sprite.fugiu svg{animation:fuga .55s ease-in forwards}
  .mob-sprite.espreita svg{opacity:.4;filter:grayscale(.5)}
  /* v4.142 (pedido do usuario): .hit/.shake ja eram adicionadas pelo JS
     (animarGolpe()) mas so o mob tinha efeito visual (flash de cor via
     .mobimg, ver acima); nenhum dos dois tinha movimento de verdade.
     Aditivo, nao mexe no filter existente nem no timing do JS (a classe
     dura 200-320ms la, a animacao aqui cabe dentro disso). */
  @keyframes spriteShake{
    0%,100%{transform:translateX(0) rotate(0)}
    25%{transform:translateX(-5px) rotate(-3deg)}
    55%{transform:translateX(4px) rotate(2deg)}
  }
  /* v4.142-fix2 (pedido do usuario, print real): .hit no heroi e a
     animacao de ATAQUE (heroi golpeando o monstro), nao de dano -- a
     reacao real de dano do heroi ja existe e usa .ferido (flash branco
     em .heroimg, ver acima). Shake tava na classe errada, fazendo
     parecer que o heroi apanhava toda vez que ele que golpeava. Corrigido:
     .hit vira um avanco curto (lunge), .shake continua so no monstro,
     .ferido ganha o shake que faltava (acompanhando o flash existente). */
  @keyframes heroLunge{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(6px)}
  }
  .hero-sprite.hit{animation:heroLunge .22s var(--expo)}
  .hero-sprite.ferido{animation:spriteShake .2s var(--expo)}
  @keyframes mobShakeForte{
    0%,100%{transform:translateX(0) rotate(0)}
    22%{transform:translateX(-9px) rotate(-6deg)}
    50%{transform:translateX(7px) rotate(5deg)}
    78%{transform:translateX(-3px) rotate(-2deg)}
  }
  .mob-sprite.shake{animation:mobShakeForte .2s var(--expo)}
  @keyframes fuga{
    0%{opacity:1;transform:none}
    25%{transform:translateX(6px) translateY(-4px)}
    100%{opacity:0;transform:translateX(46px) translateY(-10px) scale(.65)}
  }
  .coin-drop{position:absolute;width:15px;height:15px;pointer-events:none;animation:coinFall .85s ease-in forwards;left:0;top:0}
  .coin-drop svg{width:100%;height:100%;image-rendering:pixelated}
  @keyframes coinFall{
    0%{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:1}
    100%{transform:translate(calc(-50% + var(--dx)),64px) scale(.65) rotate(180deg);opacity:0}
  }
  /* item 40 do roadmap: "damage number" positivo, mesma tecnica de
     origem/posicionamento de .coin-drop (left/top absolutos calculados
     em JS a partir do centro do #mobSprite) -- so troca queda por subida */
  /* FIX v2 (pedido do usuario): a v1 dessa correcao tinha subida + pilula
     de fundo -- usuario NAO queria a pilula (parecia borda) e o problema
     real era a subida rapida sumindo da tela, nao legibilidade do texto.
     Agora o texto nasce PARADO em cima do sprite (sem transform de
     posicao) e so faz fade in/out no lugar -- sem pilula, sem box-shadow,
     so o text-shadow (mesmo que ja existia antes de qualquer fix) pra
     descolar do fundo sem parecer uma caixa. */
  .dmg-float{position:absolute;left:0;top:0;pointer-events:none;
    animation:dmgFloat 1.1s ease-out forwards;
    display:flex;align-items:center;gap:3px;white-space:nowrap;
    font-family:'Silkscreen',monospace;font-size:13px;font-weight:700;
    text-shadow:0 1px 2px rgba(0,0,0,.6)}
  /* variante pra fora da Arena (Inventario, e qualquer outra tela sem
     .arena como container relativo) -- mesma animacao, so troca pra
     position:fixed com coordenadas de viewport, empilhada acima de
     overlays/fichas (z-index 200) pois a ficha fecha logo em seguida */
  .dmg-float.fixo{position:fixed;z-index:200}
  /* pedido do usuario (27/08): mensagens tipo "Voce comprou X"/"Voce
     melhorou Fortuna" podem ser longas -- sem isso, nowrap fazia o texto
     estourar pra fora da tela quando o botao de origem ficava perto da
     borda (bug reportado: "ficou cortado, saiu pra fora") */
  .dmg-float.msg{display:block;white-space:normal;text-align:center;max-width:190px;
    line-height:1.4;font-size:10.5px;font-weight:600;letter-spacing:.02em}
  .dmg-float svg{width:13px;height:13px;image-rendering:pixelated;flex-shrink:0}
  .dmg-float .dmg-moeda svg{width:16px;height:16px}
  /* variante empilhada (pedido do usuario, golpe final): em vez de
     "+moedas · +XP" numa linha só horizontal, empilha +moedas em cima e
     +XP embaixo -- cada linha e seu proprio flex row (icone+numero).
     Usada so em numeroFlutuanteHeroi() por enquanto. */
  .dmg-float.pilha{flex-direction:column;align-items:flex-end;gap:2px}
  /* espelho do .pilha acima -- usado quando o texto fica do lado DIREITO
     do sprite (numeroFlutuante/mob) em vez do esquerdo (numeroFlutuanteHeroi):
     alinha pela esquerda pra colar no sprite em vez de flutuar pra longe */
  .dmg-float.pilha.direita{align-items:flex-start}
  .dmg-float.pilha .dmg-moeda,.dmg-float.pilha .dmg-xp{display:flex;align-items:center;gap:3px}
  /* moeda em --gold (mesma cor de .coins no topbar e .toast.gold), XP em
     cor neutra (mesma familia de .xpnum) -- app ja diferencia os dois
     assim em todo outro lugar, uma cor unica pra tudo quebrava esse padrao */
  .dmg-float .dmg-moeda{color:var(--gold)}
  .dmg-float .dmg-sep{color:var(--muted);font-weight:500}
  .dmg-float .dmg-xp{color:var(--text)}
  /* FIX v3 (pedido do usuario): v2 ficava parado o tempo todo (fade in
     place). Agora e mais rapido (1.9s->1.1s) e volta a subir -- mas so
     no FIM (55%->100%), depois de ja ter aparecido parado por um tempo
     (15%->55%) pra dar tempo de ler antes de comecar a subir/sumir. */
  @keyframes dmgFloat{
    0%{transform:translate(-50%,-50%) scale(.8);opacity:0}
    15%{transform:translate(-50%,-50%) scale(1);opacity:1}
    55%{transform:translate(-50%,-50%) scale(1);opacity:1}
    100%{transform:translate(-50%,calc(-50% - 34px)) scale(1);opacity:0}
  }
  /* variante empilhada usa o mesmo translate(-50%,-50%) da keyframe
     acima (centraliza no ponto left/top) -- o "ficar a esquerda do
     sprite" e resolvido no JS (originX com folga pra esquerda), nao
     aqui, pra nao precisar de uma keyframe separada so pra isso */
  .vs{font-family:'Outfit',sans-serif;font-size:11px;font-weight:500;color:var(--dim);padding-bottom:30px;letter-spacing:1px}
  .mobinfo{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;transition:opacity .3s}
  .mobinfo.off{opacity:0}
  /* estado de vitoria */
  .arena.venceu .fight{gap:0}
  .arena.venceu .vs{opacity:0;width:0;padding:0;overflow:hidden}
  .arena.venceu .fighter.mob{width:0;overflow:hidden}
  .vitoria{display:none;flex-direction:column;align-items:center;gap:5px;margin-top:2px}
  .vitoria.on{display:flex;animation:subir .4s ease-out .3s backwards}
  .vitoria.on .faixa{animation:faixaPunch .5s ease-out .65s both}
  @keyframes faixaPunch{
    0%{transform:scale(1);text-shadow:none}
    40%{transform:scale(1.28);text-shadow:0 0 14px var(--gold)}
    100%{transform:scale(1);text-shadow:0 0 6px var(--gold)}
  }
  /* cor fixa (pedido do usuario): var(--accent) mudava de tema pra tema
     -- alguns temas tem accent muito escuro ou muito parecido com o
     fundo da arena, deixando "DIA VENCIDO" ilegivel. #FFD65A (dourado
     claro) + sombra escura funciona em qualquer fundo, claro ou escuro. */
  .vitoria .faixa{font-family:'Silkscreen',monospace;font-size:11px;color:#FFD65A;text-shadow:0 1px 3px rgba(0,0,0,.65);letter-spacing:1px;display:inline-block}
  .vitoria .ganho{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--gold)}
  .vitoria .ganho svg{width:16px;height:16px;image-rendering:pixelated}
  /* item pedido pelo usuario: burst de faiscas radiando da faixa DIA
     VENCIDO, mesma tecnica posicional de .coin-drop/.dmg-float */
  .vitoria-spark{position:absolute;left:0;top:0;width:8px;height:8px;pointer-events:none;
    animation:vitoriaSpark .65s ease-out forwards}
  .vitoria-spark svg{width:100%;height:100%;image-rendering:pixelated}
  @keyframes vitoriaSpark{
    0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
    25%{transform:translate(-50%,-50%) scale(1);opacity:1}
    100%{transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.25);opacity:0}
  }
  @keyframes subir{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .mobname{font-family:'Outfit',sans-serif;font-size:12px;font-weight:500;color:var(--blood)}
  .mobhp{font-family:'Outfit',sans-serif;font-size:16px;font-weight:600;color:var(--text);
         font-variant-numeric:tabular-nums}
  .mobhp.golpe{animation:hpGolpe .35s ease-out}
  @keyframes hpGolpe{0%{color:var(--perigo);transform:scale(1.35)}100%{color:var(--text);transform:scale(1)}}

  .xpwrap{padding:14px 18px;border-bottom:1px solid var(--line)}
  .xprow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
  .perfilhero .xprow{gap:8px}
  .perfilhero .xprow .xplabel{flex:none}
  .perfilhero .xprow .xpnum{flex:none;white-space:nowrap}
  .xplabel{font-family:'Outfit',sans-serif;font-size:12px;font-weight:500;color:var(--muted)}
  .xpnum{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
  .bar{height:9px;background:var(--panel-2);border:1px solid var(--line);border-radius:3px;padding:2px}
  .fill{height:100%;width:0%;background:linear-gradient(180deg,#7FCBF3,#3F9BD6);border-radius:2px;transition:width .45s cubic-bezier(.4,1.3,.5,1);position:relative;overflow:hidden}
  /* FIX (pedido do usuario: cor fixa pra barra de Estagio em todos os
     temas -- 1a tentativa mexeu em .estagio-pill-fill, classe morta de um
     componente antigo que nao e mais usada; a barra real e #estagioTopoFill
     com a classe generica .fill, compartilhada com a barra de XP (#fill).
     Varios temas (:root[data-tema=...]) redefinem `.fill{background:
     var(--accent) !important}`, entao so um seletor por ID consegue vencer
     esse !important em qualquer tema -- especificidade de ID > classe,
     mesmo com !important dos dois lados. */
  #estagioTopoFill{ background:#4EA1E8 !important; }
  /* FIX (pedido do usuario: "esse tanto de barra nao ficou legal" -- 3
     barras empilhadas ficou poluido). Estagio virou so texto (label +
     fracao), sem barra visual -- #estagioTopoFill continua recebendo
     width no JS (renderEstagioBar(), nao mudou), so ninguem ve mais
     porque o wrapper .bar dele fica escondido aqui. */
  #estagioTopoBar{ display:none; }
  /* v4.143 (pedido do usuario): shimmer continuo na barra de XP,
     aditivo via ::after -- nao mexe no width/transition acima. */
  .fill:not(.hpfill)::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(100deg,transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%);
    transform:translateX(-100%);animation:xpShimmer 2.4s ease-in-out infinite;
  }
  @keyframes xpShimmer{to{transform:translateX(220%)}}
  @media (prefers-reduced-motion: reduce){ .fill::after{display:none} }
  /* #fill (barra de XP, nao a de Vida -- ver #hpfill, que fica com a
     transicao rapida padrao) sincronizada com animarContagemNumero()
     (script principal, 1100ms) -- ANTES herdava os mesmos .45s da
     barra de Vida, terminando bem antes do numero (1.1s) parar de
     contar: barra ja cheia, numero ainda subindo, dessincronizado
     (confirmado em video: "a barra de xp ta errada"). */
  #fill{transition:width 1.1s cubic-bezier(.4,1.3,.5,1)}

  .tasks{padding:16px 18px 8px;flex:1}
  .thead{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}
  .ttitle{font-size:15px;font-weight:500}
  .tcount{font-size:12px;color:var(--dim)}
  .add{background:transparent;color:var(--accent);border:1px solid var(--accent-dim);border-radius:8px;padding:6px 12px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s}
  .add:hover{background:var(--accent-dim)}
  .list{display:flex;flex-direction:column;gap:7px}
  .task{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--accent-dim);border-radius:10px;padding:12px 13px;cursor:pointer;transition:border-color .15s,opacity .2s}
  .task:hover{border-color:var(--dim);border-left-color:var(--accent)}
  .box{width:19px;height:19px;flex:none;border:1.5px solid var(--dim);border-radius:5px;display:grid;place-items:center;transition:all .18s}
  .box svg{width:11px;height:11px;opacity:0;transition:opacity .15s}
  .task.done .box{background:var(--accent);border-color:var(--accent)}
  .task.done .box svg{opacity:1}
  .task.done .label{color:var(--dim);text-decoration:line-through}
  .task.done{opacity:.6}
  .task.vanish{opacity:0;transform:translateX(40px);transition:opacity .2s,transform .2s}
  .task.tap{transform:scale(.97);transition:transform .12s}
  /* pedido do usuario: animacao de saida/entrada no toque parcial
     (.saiu/.entrou) removida -- nao ficou legal, revertido pro toque
     parcial sem efeito visual de saida (so animarGolpe()+som, ver
     alternar() no JS). Regras abaixo ficam definidas mas sem chamador
     (mesma convencao de moedasCaindo()/voarRecompensaFinal() nao
     removidas quando desligadas -- nao apaga, so para de usar). */
  @keyframes tarefaPopOut{ from{transform:translateX(0);opacity:1} to{transform:translateX(120%);opacity:0} }
  @keyframes tarefaPopIn{ 0%{transform:translateX(-30%);opacity:0} 60%{transform:translateX(4%);opacity:1} 100%{transform:translateX(0);opacity:1} }
  .task.saiu{animation:tarefaPopOut .26s ease-in both !important}
  .task.entrou{animation:tarefaPopIn .32s cubic-bezier(.2,.9,.3,1.2) both !important}
  .tinfo{display:flex;flex-direction:column;gap:2px;min-width:0}
  .label{font-size:14px;line-height:1.3}
  .repeat{font-family:'Outfit',sans-serif;font-size:11px;color:var(--dim);letter-spacing:0}
  .vezesbadge{font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;color:var(--accent);
              letter-spacing:0}
  .del{margin-left:auto;background:none;border:none;color:var(--dim);font-size:16px;cursor:pointer;padding:0 2px;line-height:1;opacity:.35;transition:opacity .15s}
  .task:hover .del{opacity:1}
  .empty{text-align:center;color:var(--dim);font-size:13px;padding:26px 12px;border:1px dashed var(--line);border-radius:10px;line-height:1.5}

  .composer{display:none;flex-direction:column;gap:10px;margin-top:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:13px}
  .composer.on{display:flex}
  .composer input{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:11px 12px;font-family:'Outfit',sans-serif;font-size:14px;outline:none;width:100%}
  .composer input:focus{border-color:var(--accent-dim)}
  .modes{display:flex;gap:6px}
  .mode{flex:1;background:var(--panel);color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:8px;font-family:'Outfit',sans-serif;font-size:12px;cursor:pointer;transition:.15s}
  .mode.on{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-dim)}
  .days{display:none;gap:4px}
  .days.on{display:flex}
  /* v4.161: stepper "Todo dia N" (recorrencia mensal) -- escondido por
     padrao como .days, so que via id (maior especificidade que a classe
     .vezeswrap generica que ele tambem usa pro layout coluna/gap). */
  #diaMesWrap{display:none}
  #diaMesWrap.on{display:flex}
  #edDiaMesWrap{display:none}
  #edDiaMesWrap.on{display:flex}
  /* v4.162: recorrencia anual (dia + mes) -- mesmo padrao show/hide via id
     dos outros sub-paineis de recorrencia (maior especificidade que a
     classe .vezeswrap generica que reaproveita pro layout coluna/gap). */
  #anualWrap{display:none}
  #anualWrap.on{display:flex}
  #edAnualWrap{display:none}
  #edAnualWrap.on{display:flex}
  .day{flex:1;background:var(--panel);color:var(--dim);border:1px solid var(--line);border-radius:7px;padding:8px 0;font-family:'Silkscreen',monospace;font-size:8px;cursor:pointer;transition:.15s}
  .day.on{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-dim)}
  .cbtn{background:var(--accent);color:var(--bg);border:none;border-radius:9px;padding:11px;font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;cursor:pointer}

  .nav{display:flex;position:relative;border-top:1px solid var(--line);background:var(--panel-2);margin-top:14px}
  .nav button{flex:1;position:relative;z-index:1;background:none;border:none;cursor:pointer;padding:14px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--dim);transition:color .15s}
  .nav button svg{width:26px;height:26px}
  .nav button span{display:none}
  .nav button.on{color:var(--accent)}
  .navpill{position:absolute;top:8px;left:0;width:62px;height:44px;border-radius:999px;background:var(--accent-dim);border:1px solid rgba(255,255,255,.14);box-shadow:0 0 10px rgba(255,255,255,.08);transform:translateX(0);transition:transform .32s cubic-bezier(.34,1.56,.64,1);pointer-events:none;z-index:0}

  /* ============ Estatisticas ============ */
  .est-card{background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:20px;margin-bottom:14px;box-shadow:0 10px 24px rgba(0,0,0,.22);position:relative}
  .est-divider{height:1px;background:var(--line);margin:0 0 16px}
  .est-titulo{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-bottom:16px;display:flex;align-items:center;gap:7px}

  .est-resumogrid{display:flex;justify-content:space-between;gap:10px}
  .est-resumoitem{flex:1;text-align:center}
  .est-resumonum{font-family:'Silkscreen',monospace;font-size:19px;color:var(--accent)}
  .est-resumolbl{font-size:9.5px;color:var(--dim);margin-top:4px;line-height:1.3}

  .est-streakcard{position:relative;overflow:hidden;flex-shrink:0;padding-bottom:18px}
  .est-streakcard .est-titulo{position:relative;z-index:1}

  .est-streaknum{font-family:'Silkscreen',monospace;font-size:40px;color:var(--text);line-height:1}
  /* Tocha reaproveitada do sprite ja usado nas TOCHAS DECORATIVAS DA ARENA
     (mesmo PNG/tecnica de .tocha-arena la em baixo -- 3 frames de flicker,
     48x32 = 16x32 por frame, animado via steps(3)+background-position).
     Pedido do usuario: dar identidade de masmorra pra Estatisticas
     reaproveitando assets que ja existem, sem criar sprite novo. */
  .est-tocha{
    width:16px;height:32px;
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAYAAABU1PscAAACoklEQVR4nO2WTUgbQRiG34RekkAPEcRDNLDKgudCWqHBgiLdICXQU2jEUoQYvJZcwx56kXrooWAgh0oqgZ5yCEZKPQQLSYVSCj2FJJKfgwiRUqiewvQQZtnZnf3Ryq6HvBA2O7vP9843s/PNAGONNdZYd1b7KyJxuw9W8lq98D9J3NYAmMUxTeDF54YnHA/dqCNOzR43AVHwEfqbWb1U2uwGpe/KzR4T6zr8/opI6NXM38ODU3IGU4UiztYSmCoUEY6H0Cn1ITd7aLSvdIyWz85NK/fheAjz0joAYGFp0xZP/ami+SCONy64/l4zmF7pLKTkjOlMiIKP1I52ITd7inGn1Mdh6g2SiSJqR7u2+Fx2G9F8UBkAAPj4R+D6e9VwSs4gl91WzNUBwvEQvrz/ZpgENV9Y2mS4aD6IcDyE5P22aRJansaYWb3E8cYFAHD9TRdxNB9URv86ys5NM5zdGB++thVey+U+/QYAvHwsMAyTgPpht+xHYJhGYJhGt+y33QlqruXpjJrJyD+aD6Jb9jNJchMARt+53OyhU+orbfPSOpaf/MTy1kPdCGh1tpYAAEPeSik5o+MDwzReva2Z+4uCjyS3npPB6R7ZKWSJuvyJgo/sFLJkcLpHpEdPuSXRLd6jDhCRYgCAd6+fcZNMJkZVqXVe1ZUzt3jDIDwNvv/lmrvJM2ug0b7ynFQObmTuFs/diQFgdnJRaWudVxkTow64weuqEM+ABrMyd4O/ZxRo4kGAuW9VrKzd4bk7sfZbPKkc2Bo9N3jD47SdNiM5yesSoIc69SICRt+hnU44zeuO0xEphh/1X9zgESlmeRx2mtdtZPT/7OSicnahR2z1s0r90LAEO8kzVYhdKFUyUQ8wEBXP3C3+WpuKkfFd5cdyQv8A0LgoFtXx0DYAAAAASUVORK5CYII=");
    background-size:48px 32px;
    image-rendering:pixelated;
    animation:tochaChama .6s steps(3) infinite;
    pointer-events:none;
  }
  .est-tocha-estatica{animation:none;background-position-x:-16px}
  @media (prefers-reduced-motion: reduce){.est-tocha{animation:none;background-position-x:-16px}}

  .est-tocha-principal{position:absolute;right:16px;bottom:0;transform-origin:bottom right;z-index:1}

  /* Feedback de toque nos cards clicaveis (streak + historico) -- pedido
     do usuario, baseado em tecnica sugerida pelo Gemini (prints): em vez
     de um brilho ambiente "convidando" a tocar (testamos e nao ficou
     bom, sinal fraco demais), uma sombra fixa de elevacao no streakcard
     de dentro (tambem descartada -- retangulo solto colado na tela,
     porque o streakcard nao tem fundo proprio), uma borda dourada fixa
     (tambem descartada), uma seta perto da tocha feito a do Historico
     (tambem descartada -- nao ficou legal ali), o card inteiro crescendo
     ao arrastar a tela (varias tentativas -- nenhuma ficou boa) ou
     sombra mais forte no card inteiro (funcionou sem o problema do
     retangulo solto, mas usuario pediu pra tirar e seguir a proxima
     sugestao do Gemini), o que ficou foi: compressao ao tocar (:active/
     .est-pressionado, padrao de qualquer botao nativo) + uma seta ">"
     no canto superior direito (.est-cardseta), convencao de "abre uma
     tela nova" (recomendacao do Gemini). :active sozinho e pouco
     confiavel em mobile (as vezes nem dispara, principalmente
     Safari/iOS) -- por isso .est-pressionado tambem existe, ligada via
     JS com pointerdown/pointerup (ver wiring do estCardPrincipal/
     estHistCard). O card inteiro (Sequencia atual + Desde o inicio
     juntos) e clicavel, nao so a parte de cima. */
  .est-clicavel{cursor:pointer;transition:transform .12s ease}
  .est-clicavel:active, .est-clicavel.est-pressionado{transform:scale(.97)}

  #estCardPrincipal{position:relative}
  .est-cardseta{position:absolute;top:20px;right:20px;width:15px;height:15px;color:var(--dim);z-index:1;pointer-events:none}

  .est-streaklbl{display:none}

  .est-statsrow{display:flex;gap:12px;margin-bottom:14px}
  .est-statscol{flex:1;min-width:0;margin-bottom:0;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
  .est-statscol .est-titulo{justify-content:center}
  .est-statscol .est-ringbox,.est-statscol .est-donutbox{margin:6px 0 12px}

  /* PLANO PRO -- cadeado sobre card de estatistica (pedido do usuario).
     Borra os FILHOS reais (nao o proprio card -- blur no card gera halo
     estranho na borda, e nao o .est-lockoverlay, que precisa ficar nitido)
     e mostra o .est-lockoverlay (SVG de cadeado real + "PRO", ja no HTML
     do card -- nao emoji, pedido explicito do usuario). */
  .est-card.premiumBloqueado{ cursor:pointer; }
  .est-card.premiumBloqueado > *:not(.est-lockoverlay){
    filter:blur(5px); user-select:none; pointer-events:none;
  }
  .est-lockoverlay{
    display:none; position:absolute; inset:0; z-index:1;
    flex-direction:column; align-items:center; justify-content:center; gap:5px;
    background:rgba(10,8,16,.32); border-radius:12px;
  }
  .est-lockoverlay svg{ width:20px; height:20px; color:var(--text); }
  /* selo "PRO" no MESMO estilo usado em todo o resto do app (.temaSelo,
     .pjSelo -- pilula pequena, fundo var(--accent), texto var(--bg)) --
     antes esse aqui tinha fonte Silkscreen 10px propria e destoava,
     ficando mais chamativo que os outros (pedido do usuario: "parece
     mais destacado que todos os outros lugares"). */
  .est-lockoverlay span{
    font-family:'Outfit',sans-serif; font-size:8px; font-weight:700;
    background:var(--accent); color:var(--bg);
    border-radius:999px; padding:2px 6px; letter-spacing:.3px;
  }
  .est-card.premiumBloqueado .est-lockoverlay{ display:flex; }
  .est-donutlegenda-compacta{width:100%}
  .est-donutlegenda-compacta .est-legitem{font-size:10.5px}
  .est-donutlegenda-compacta .est-legbar{display:none}
  .est-donutlegenda-compacta b{margin-left:auto}
  .est-ringrow{display:flex;align-items:center;gap:18px}
  .est-ringbox{position:relative;width:80px;height:80px;flex:none}
  .est-ringtrack{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -90deg, color-mix(in srgb, var(--accent) 35%, transparent) 0%, var(--accent) calc(var(--pct)*1%), transparent calc(var(--pct)*1%));-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px))}
  .est-ringbg{position:absolute;inset:0;border-radius:50%;background:var(--panel-3);-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));mask:radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));z-index:-1}
  .est-ringtxt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .est-ringtxt .n{font-family:'Silkscreen',monospace;font-size:16px;color:var(--accent)}
  .est-ringtxt .u{font-size:7px;color:var(--dim);letter-spacing:.06em}

  .est-chartwrap{position:relative}
  .est-chartponto{filter:drop-shadow(0 0 2px rgba(0,0,0,.4))}
  .est-chartlabels{display:flex;justify-content:space-between;margin-top:8px}
  .est-chartlabels span{font-size:9.5px;color:var(--dim)}

  .est-mapames{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
  /* view de Ano precisa sair do grid de 7 colunas (mes/semana) -- essa
     regra nunca existiu, so era referenciada em comentario/JS (.remove()
     em 3 lugares, .add() em nenhum) -- classe totalmente morta ate agora.
     Sem isso, .est-anograde (que ja e display:flex;flex-direction:column
     por conta propria) virava 1 item de grid preso na coluna 1 de 7,
     espremendo as 12 linhas do ano numa fatia da largura do card. */
  #estMapaMes.est-mapames-ano{display:block}

  /* v4.161 (pedido do usuario -- "o grafico anual tá horrível"): celulas
     de 8px -> 9px com canto arredondado (3px, igual ao .est-tile da
     legenda) e gap maior (2px -> 3px), pra dar pra realmente enxergar o
     grid em vez de uma faixa solida. */
  .est-anograde{display:flex;flex-direction:column;gap:6px}
  .est-anolinha{display:flex;align-items:center;gap:7px}
  .est-anomeslbl{width:24px;flex:none;font-family:'Outfit',sans-serif;font-size:9.5px;color:var(--dim)}
  .est-anodias{display:flex;gap:3px;flex:1;min-width:0;flex-wrap:wrap}
  .est-anodia{display:block;width:9px;height:9px;border-radius:3px;background:var(--panel-3)}
  .est-anodia.est-anodia-vitoria{background:#3A2E1A}
  .est-anodia.est-anodia-fuga{background:#242428}
  .est-histchevron{width:14px;height:14px;margin-left:auto;flex:none;color:var(--dim)}
  .est-histsufixo{color:var(--dim);font-weight:400}

  /* seletor de ano da visao "ano" do Historico -- escondido por padrao,
     so aparece com .on (ligado/desligado em renderHistoricoConteudo). */
  .est-anoswitcher{display:none;align-items:center;justify-content:center;gap:16px;margin-bottom:14px}
  .est-anoswitcher.on{display:flex}
  .est-anobtn{background:none;border:none;padding:6px;cursor:pointer;color:var(--dim);display:flex;align-items:center;justify-content:center}
  .est-anobtn svg{width:16px;height:16px}
  .est-anobtn:hover{color:var(--text)}
  .est-anobtn:disabled{opacity:.3;cursor:default}
  .est-anonum{font-family:'Silkscreen',monospace;font-size:15px;color:var(--text);min-width:44px;text-align:center}

  .est-periodoopc{display:block;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:13px;color:var(--text);font-family:'Outfit',sans-serif;font-size:14px;margin-bottom:8px;cursor:pointer}
  .est-periodoopc:last-child{margin-bottom:0}
  .est-periodoopc.on{background:var(--accent-dim);border-color:var(--accent-dim);color:var(--accent);font-weight:600}

  .est-montpopnum{font-family:'Outfit',sans-serif;font-weight:600;font-size:34px;color:var(--text);text-align:center;margin-bottom:4px}
  .est-montpoplbl{font-size:11.5px;color:var(--dim);text-align:center;margin-bottom:16px;min-height:15px}
  .est-montpopwrap{height:130px;position:relative;overflow:hidden;border-radius:12px;background:var(--panel)}
  .est-montpopglow{position:absolute;inset:0;background:radial-gradient(circle at 50% 85%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 60%);opacity:0;transition:opacity 1.1s ease}
  .est-montpopglow.brilha{opacity:1}
  .est-montpopimg{position:absolute;left:50%;bottom:6px;transform:translate(-50%,0) scale(calc(var(--tocha-escala,1) * .3));transform-origin:bottom center;opacity:0;transition:transform 1s cubic-bezier(.2,.9,.25,1.3), opacity .5s ease}
  .est-montpopimg.cresceu{opacity:1;transform:translate(-50%,0) scale(var(--tocha-escala,1))}

  /* Botao "Compartilhar" -- pedido explicito do usuario: cor FIXA (nao
     var(--accent)), de proposito, pra se destacar mesmo no tema Grafite
     (que e 100% grayscale por decisao de design -- ver [data-tema="grafite"]).
     Unico botao do app que quebra a regra "tudo segue o tema" -- excecao
     proposital, nao esquecimento de usar var(). */
  .est-compartilharBtn{
    margin-top:14px;width:100%;
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:13px;border:none;border-radius:12px;cursor:pointer;
    background:linear-gradient(135deg, #F2A65A, #E949CE);
    color:#1A1526;font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;
    transition:transform .12s ease, opacity .15s ease;
  }
  .est-compartilharBtn svg{width:17px;height:17px;flex:none}
  .est-compartilharBtn:active{transform:scale(.97)}
  .est-compartilharBtn:disabled{opacity:.6;cursor:default;transform:none}
  .est-tile{aspect-ratio:1;border-radius:4px;border:1px solid var(--line);background:var(--panel-3);display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden;font-family:'Outfit',sans-serif;font-size:8.5px;font-weight:600;color:var(--dim)}
  .est-tile span.est-tiledia{position:relative;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.85);margin-bottom:1px}
  .est-tile-vitoria{background:#3A2E1A;border-color:#3A2E1A;color:#F2E7D5}
  .est-tile-fuga{background:#242428;border-color:#242428;color:#8a8a92}
  .est-tile-vitoria .est-tocha, .est-tile-fuga .est-tocha{position:absolute;top:2px;left:50%;transform:translateX(-50%) scale(.85);transform-origin:top center}
  .est-tocha-apagada{filter:grayscale(1) brightness(.55);clip-path:inset(56% 0 0 0)}
  .est-mapalegenda{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:9.5px;color:var(--dim);flex-wrap:wrap}
  .est-mapalegenda .est-tile{width:11px;height:11px;flex:none;font-size:0}

  .est-donutbox{position:relative;width:70px;height:70px;flex:none}
  .est-donutring{position:absolute;inset:0;border-radius:50%;background:var(--panel-3);-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));mask:radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px))}
  .est-donuttxt{position:absolute;inset:0;display:grid;place-items:center;font-family:'Silkscreen',monospace;font-size:14px;color:var(--text)}
  .est-donutlegenda{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
  .est-legitem{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:7px}
  .est-legitem b{color:var(--text);font-weight:600;flex:none}
  .est-legbar{flex:1;height:4px;border-radius:2px;background:var(--panel-3);overflow:hidden;margin:0 2px}
  .est-legbar i{display:block;height:100%;border-radius:2px;transition:width .5s var(--expo)}
  .est-dot{width:8px;height:8px;border-radius:2px;flex:none}

  .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--accent);color:var(--bg);font-family:'Silkscreen',monospace;font-size:10px;padding:11px 18px;border-radius:8px;opacity:0;pointer-events:none;transition:transform .32s var(--spring-curve), opacity .25s var(--expo);text-align:center;z-index:200}
  .toast.gold{background:var(--gold)}
  .toast.fuga{background:var(--perigo);color:#fff} /* --perigo, nao --blood: aviso importante, precisa se destacar mesmo no tema Grafite */

  /* boas-vindas */
  .intro{position:fixed;inset:0;background:var(--bg);z-index:80;display:flex;justify-content:center;padding:20px;overflow-y:auto;
    opacity:1;transition:opacity .3s var(--expo), visibility 0s;}
  .intro.off{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--expo), visibility 0s .3s;}
  .card{width:100%;max-width:400px;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:10px 4px 24px}
  .passo{display:none;flex-direction:column;gap:18px}
  .passo.on{display:flex}
  /* v4.148 (pedido do usuario): mostrarPasso() so trocava display:none/flex
     na hora, sem nenhuma animacao -- diferente do carrossel de marketing
     (deslizar()), que ja tinha curva calibrada. Nao dava pra usar o mesmo
     truque de opacity+visibility dos overlays fixos (.edov/.cfgOverlay)
     aqui, porque .passo fica dentro do fluxo normal do .card (position
     estatica) -- tirar o display:none faria os 4 passos ocuparem espaco
     ao mesmo tempo. Em vez disso: entrada via keyframe de um tiro,
     disparada em JS (ver mostrarPasso()), sem mexer no display/layout.*/
  @keyframes passoIn{
    from{opacity:0;transform:translateX(16px)}
    to{opacity:1;transform:translateX(0)}
  }
  .passo.on.passoIn{animation:passoIn .32s var(--expo)}
  .marca{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
  .marca svg{width:80px;height:80px;image-rendering:pixelated}
  .titulo{font-family:'Silkscreen',monospace;font-size:20px;color:var(--accent);letter-spacing:1px}
  .lema{font-size:15px;color:var(--muted);line-height:1.5;max-width:280px}
  .regras{display:flex;flex-direction:column;gap:11px}
  .regra{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
  .regra .ic{width:26px;height:26px;flex:none;display:grid;place-items:center;background:var(--accent-dim);border-radius:7px;color:var(--accent);font-family:'Silkscreen',monospace;font-size:10px}
  .regra p{font-size:13.5px;line-height:1.45;color:var(--text)}
  .regra p b{color:var(--accent);font-weight:600}
  .campo{display:flex;flex-direction:column;gap:8px}
  .campo label{font-size:13px;color:var(--muted)}
  .campo input{background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:13px 14px;font-family:'Outfit',sans-serif;font-size:15px;outline:none}
  .campo input:focus{border-color:var(--accent-dim)}
  .primario{background:var(--accent);color:var(--bg);border:none;border-radius:11px;padding:14px;font-family:'Outfit',sans-serif;font-size:15px;font-weight:600;cursor:pointer;width:100%}
  .secundario{background:none;border:none;color:var(--dim);font-family:'Outfit',sans-serif;font-size:13px;cursor:pointer;padding:6px}
  .listaini{display:flex;flex-direction:column;gap:7px;min-height:10px}
  .itemini{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14px}
  .itemini button{margin-left:auto;background:none;border:none;color:var(--dim);font-size:16px;cursor:pointer}
  .dica{font-size:12px;color:var(--dim);text-align:center;line-height:1.5}
  #nomeTopo{font-family:'Outfit',sans-serif;font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap}
  @media (max-width:520px){
    body{padding:0}
    .app{max-width:none;border:none;border-radius:0;min-height:100vh;min-height:100dvh}
    .topbar{padding-top:max(12px, env(safe-area-inset-top))}
    .nav{padding-bottom:max(0px, env(safe-area-inset-bottom))}
  }
  .toast.on{opacity:1;transform:translate(-50%,0)}

/* ===== Bloco style #2 ===== */
/* ---------- identidade: minimalista + dark fantasy ---------- */
  :root{
    --bg:#0F1216;
    --panel:#0F1216;
    --panel-2:#151A20;
    --line:#232A33;
    --text:#E6E9ED;
    --muted:#8A93A0;
    --dim:#5A6470;
    --accent:#C9A961;
    --accent-dim:#3A2F18;
    --gold:#C9A961;
    --blood:#9E3B3B;
  }

  /* superficies sem caixas: hairlines e respiro */
  .app{background:transparent;border:none;border-radius:0;box-shadow:none}
  .topbar{border-bottom:1px solid var(--line);padding:16px 20px}
  .arena{border-bottom:1px solid var(--line);background:
      radial-gradient(70% 90% at 50% 40%, rgba(201,169,97,.05) 0%, transparent 70%);
      box-shadow:none;padding:30px 20px 22px}
  .xpwrap{padding:16px 20px;border-bottom:1px solid var(--line)}
  .tasks{padding:20px}

  /* tipografia: serifa para o mundo do jogo, sans para a interface */
  .lvl{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;letter-spacing:.1em;
       text-transform:uppercase;color:var(--accent);background:none;padding:0;border-radius:0}
  .coins{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;letter-spacing:.04em}
  .mobname{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;font-weight:500;
           color:#C4787A;letter-spacing:.02em}
  #nomeTopo{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;letter-spacing:.02em;color:var(--text)}
  .vs{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;color:var(--dim);letter-spacing:.06em}
  .ttitle{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;letter-spacing:.01em}
  .tcount{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .xplabel{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .xpnum{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;color:var(--text)}
  /* cor fixa (pedido do usuario, mesmo motivo da regra .vitoria .faixa
     acima): var(--accent) mudava de tema pra tema e ficava ilegivel em
     alguns fundos. */
  .faixa{font-family:'Cormorant Garamond',serif !important;font-size:20px !important;font-weight:600;
         letter-spacing:.18em;text-transform:uppercase;color:#FFD65A !important;text-shadow:0 1px 3px rgba(0,0,0,.65)}

  /* barras finas, sem moldura */
  .bar{height:3px;background:var(--line);border:none;border-radius:0;padding:0}
  .fill{background:var(--accent) !important;border-radius:0}

  /* tarefas: linhas, nao cartoes */
  .task{background:transparent;border:none;border-left:none;border-bottom:1px solid var(--line);
        border-radius:0;padding:16px 2px;box-shadow:none}
  .task:hover{background:rgba(201,169,97,.03);transform:none;box-shadow:none}
  .box{border-radius:50%;border:1px solid var(--dim);width:20px;height:20px}
  .task.done .box{background:var(--accent);border-color:var(--accent)}
  .task .txt{font-size:17px;font-weight:400}
  .task .sub{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

  /* botao: contorno fino dourado */
  .add{background:transparent !important;color:var(--accent) !important;border:1px solid var(--accent-dim) !important;
       border-radius:2px !important;padding:9px 16px !important;font-size:13px !important;font-weight:500 !important;
       letter-spacing:.06em;text-transform:uppercase;box-shadow:none !important}
  .add:hover{background:var(--accent-dim) !important;filter:none}

  .empty{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:var(--muted);
         border:none;background:none}

  /* menu inferior: discreto */
  .nav{background:transparent;border-top:1px solid var(--line)}
  .nav button{font-size:12px;letter-spacing:.08em;text-transform:uppercase}

  /* onboarding */
  .titulo{font-family:'Cormorant Garamond',serif !important;font-size:34px !important;font-weight:600;
          letter-spacing:.22em;color:var(--accent) !important}
  .lema{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;line-height:1.5}
  .primario{background:transparent !important;color:var(--accent) !important;border:1px solid var(--accent) !important;
            border-radius:2px !important;letter-spacing:.1em;text-transform:uppercase;font-size:13px !important}
  .primario:hover{background:var(--accent-dim) !important}
  .regra .ic{background:none;border:1px solid var(--accent-dim);color:var(--accent);border-radius:50%;
             font-family:'Cormorant Garamond',serif;font-size:13px}
  .card{background:transparent;border:none}

  .toast{border-radius:2px;letter-spacing:.1em;text-transform:uppercase;font-size:11px}

/* ===== Bloco style #3 ===== */
/* vinheta e textura fina sobre o app inteiro */
  body::after{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:5;
    background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.45) 100%);
  }
  .app{position:relative}

  /* losango ornamental depois do titulo da lista */
  .ttitle::after{
    content:'◆';margin-left:9px;font-size:9px;color:var(--accent);opacity:.5;vertical-align:middle
  }

  /* nivel com filetes dos dois lados */
  .lvl{display:inline-flex;align-items:center;gap:9px}
  .lvl::before,.lvl::after{content:'';width:16px;height:1px;background:var(--accent);opacity:.4}

  /* respiro entre o herói e o rodapé da arena */
  .mobinfo{margin-top:10px}

  .hero-sprite{position:relative}

/* ===== Bloco style #4 ===== */
/* ---------- layout: tela cheia, so a lista rola ---------- */
  html,body{height:100%;overflow:hidden}
  /* min-height:0 -- o @media mobile mais acima poe min-height:100vh/100dvh no
     .app, e min-height VENCE max-height: quando 100dvh fica maior que o
     viewport real (898 = tela cheia, vs 842 sem as barras do sistema; visto
     no log medidas[...] appH=842px mas appBottom=898) o app crescia e a nav
     ficava cortada. A altura passa a vir SO de --app-h. */
  .app{height:var(--app-h,100dvh);max-height:var(--app-h,100dvh);min-height:0;overflow:hidden}
  .topbar,.arena,.xpwrap,.nav{flex:none}
  .tasks{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .thead{flex:none}
  .cattabs{flex:none}
  .list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
        scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .list::-webkit-scrollbar{width:4px}
  .list::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}
  .composer{flex:none}

  /* arena mais compacta em telas baixas, pra caber sem apertar a lista */
  @media (max-height:700px){
    .arena{padding:18px 20px 14px}
    .xpwrap{padding:12px 20px}
    .tasks{padding:14px 20px}
  }

  /* no desktop o cartao nao encosta nas bordas */
  @media (min-width:521px){
    body{overflow:auto;padding:16px}
    .app{height:auto;max-height:calc(100dvh - 32px)}
  }

  /* o onboarding continua podendo rolar */
  .intro{overflow-y:auto}

/* ===== Bloco style #5 ===== */
/* ---------- dialogo de apresentacao por tela (1x por aba) ---------- */
  .dlgOverlay{position:fixed;inset:0;background:rgba(4,3,7,.62);z-index:97;
              opacity:0;pointer-events:none;transition:opacity .2s}
  .dlgOverlay.on{opacity:1;pointer-events:auto}

  /* replica o max-width:400px + centralizacao do .app -- ver comentario no JS
     que monta este overlay (busca por "dlgStage") pra entender o motivo */
  .dlgStage{position:absolute;inset:0;max-width:400px;margin:0 auto}

  /* botao pular (pedido do usuario): fecha a sequencia inteira de falas de
     uma vez, sem precisar clicar fala por fala */
  .dlgPular{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;
            z-index:99;background:rgba(4,3,7,.5);border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
            color:var(--accent);font-family:'Outfit',sans-serif;font-size:12px;
            font-weight:600;letter-spacing:.02em;padding:6px 12px;border-radius:20px;
            cursor:pointer;opacity:0;pointer-events:none;transition:opacity .22s}
  .dlgOverlay.on .dlgPular{opacity:1;pointer-events:auto}

  .dlgHeroWrap{position:absolute;left:0;right:0;
               bottom:calc(130px + env(safe-area-inset-bottom));z-index:98;
               display:flex;justify-content:center;pointer-events:none;
               opacity:0;transition:opacity .22s}
  .dlgOverlay.on .dlgHeroWrap{opacity:1}
  .dlgHeroImg{width:96px;height:96px;image-rendering:pixelated;
              filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}

  .dlgNomeplate{position:absolute;left:24px;
                bottom:calc(138px + env(safe-area-inset-bottom));z-index:99;
                background:var(--accent);color:#3A2410;font-weight:700;font-size:13px;
                padding:5px 18px 5px 12px;clip-path:polygon(0 0,100% 0,86% 100%,0 100%);
                display:flex;align-items:center;gap:6px;
                transform:translateY(8px);opacity:0;transition:transform .22s,opacity .22s}
  .dlgOverlay.on .dlgNomeplate{transform:translateY(0);opacity:1}
  .dlgNomeplate span{font-size:11px}

  .dlgBox{position:absolute;left:14px;right:14px;
          bottom:calc(14px + env(safe-area-inset-bottom));z-index:98;height:124px;
          background:rgba(37,30,56,.97);border:1px solid var(--accent);border-radius:14px;
          padding:20px 16px 10px;box-sizing:border-box;
          box-shadow:0 0 0 1px rgba(242,166,90,.25),0 10px 30px rgba(0,0,0,.6);
          display:flex;flex-direction:column;justify-content:space-between;
          transform:translateY(12px);opacity:0;
          transition:transform .22s cubic-bezier(.2,.8,.3,1),opacity .22s;pointer-events:none}
  .dlgOverlay.on .dlgBox{transform:translateY(0);opacity:1;pointer-events:auto}

  .dlgTexto{font-family:'Outfit',system-ui,sans-serif;font-size:15px;font-weight:400;
            line-height:1.42;color:var(--text)}
  .dlgCursor{display:inline-block;width:2px;height:14px;background:var(--accent);
             vertical-align:-2px;margin-left:1px;animation:dlgPisca .8s step-end infinite}
  @keyframes dlgPisca{50%{opacity:0}}
  .dlgDica{display:flex;justify-content:flex-end;flex:none;color:var(--accent);
           font-size:16px;line-height:1;opacity:0;transition:opacity .25s}
  .dlgDica.on{opacity:1}

/* ===== Bloco style #6 ===== */
/* ---------- legibilidade ---------- */
  :root{
    --bg:#13171C;
    --panel:#13171C;
    --panel-2:#1A1F26;
    --line:#2A323C;
    --text:#F1F3F6;
    --muted:#AEB7C2;
    --dim:#7C8794;
    --accent:#D4B872;
    --accent-dim:#3A3628;
  }

  /* serifa fica so no ornamental: nivel, nome do monstro, titulo, vitoria */
  .xpnum,.coins,#nomeTopo{font-family:'Outfit',sans-serif !important;font-style:normal !important}
  .coins{font-size:16px;font-weight:600;letter-spacing:0}
  .xpnum{font-size:15px;font-weight:500;letter-spacing:0}
  #nomeTopo{font-size:15px;font-weight:500;letter-spacing:0;color:var(--muted)}

  /* textos funcionais: sem caixa alta espalhada */
  .tcount{font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted)}
  .xplabel{font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500}
  .task .sub{font-size:13px;letter-spacing:0;text-transform:none;color:var(--dim)}
  .task .txt{font-size:17px;font-weight:400;color:var(--text)}
  .nav button{font-size:12px;letter-spacing:.02em;text-transform:none}
  .add{letter-spacing:.02em !important;text-transform:none !important;font-size:14px !important;
       color:var(--accent) !important}

  /* serifa mantida, porem maior e com mais peso pra nao afinar no escuro */
  .lvl{font-size:18px;font-weight:600;letter-spacing:.08em;color:var(--accent)}
  .mobname{font-size:20px;font-weight:600;color:#D98A8A}
  .ttitle{font-size:24px;font-weight:600;color:var(--text)}
  .empty{font-size:18px;color:var(--muted)}

  /* linhas um pouco mais visiveis */
  .task{border-bottom-color:var(--line)}
  .bar{height:4px;background:#232A33}

/* ===== Bloco style #7 ===== */
/* ================= CREPUSCULO ================= */
  :root{
    --bg:#1B2430;
    --panel:#1B2430;
    --panel-2:#243040;
    --line:#33445A;
    --text:#F6F1E6;
    --muted:#B4C2D2;
    --dim:#8394A8;
    --accent:#F2A65A;
    --accent-dim:#5A3D20;
    --gold:#F2C94C;
    --blood:#E56B6B;
    --verde:#63C99A;
  }

  body{background:var(--bg) !important}
  body::after{background:none !important}

  /* --- topo: nivel e moedas com mais presenca --- */
  .topbar{padding:16px 20px 12px;border-bottom:none}
  .lvl{font-family:'Outfit',sans-serif !important;font-size:13px !important;font-weight:600 !important;
       letter-spacing:.02em !important;text-transform:none !important;color:var(--bg) !important;
       background:var(--accent) !important;padding:6px 14px !important;border-radius:20px !important}
  .lvl::before,.lvl::after{display:none}
  .coins{font-family:'Outfit',sans-serif !important;font-size:17px !important;font-weight:600 !important;
         color:var(--gold) !important}

  /* --- arena: ceu em degrade e chao, sprites maiores --- */
  .arena{border-bottom:none !important;margin:0 14px;border-radius:18px;padding:22px 16px 16px !important;
    background:linear-gradient(180deg,#2C3B4F 0%,#233144 55%,#1E2A39 100%) !important;
    box-shadow:0 8px 24px rgba(0,0,0,.28) !important;
    position:relative;overflow:hidden}
  .hero-sprite svg,.mob-sprite svg{width:74px;height:74px}
  .vs{font-family:'Outfit',sans-serif !important;font-style:normal !important;font-size:12px !important;
      color:var(--dim) !important;letter-spacing:.1em !important;text-transform:uppercase}
  #nomeTopo{font-size:15px !important;color:var(--muted) !important}
  .mobname{font-family:'Cormorant Garamond',serif !important;font-style:italic !important;
           font-size:21px !important;font-weight:600 !important;color:#FFB4A8 !important}

  /* --- experiencia: barra dentro de um bloco proprio --- */
  .xpwrap{margin:14px 14px 0;padding:14px 16px !important;background:var(--panel-2);
          border:none !important;border-radius:14px}
  .xplabel{font-size:13px !important;color:var(--muted) !important;font-weight:500}
  .xpnum{font-size:15px !important;color:var(--text) !important;font-weight:600}
  .bar{height:7px !important;background:rgba(0,0,0,.32) !important;border-radius:4px}
  .fill{background:linear-gradient(90deg,var(--accent),var(--xp2)) !important;border-radius:4px}

  /* --- tarefas: linhas generosas com fundo proprio --- */
  .tasks{padding:16px 14px 0 !important}
  .ttitle{font-family:'Outfit',sans-serif !important;font-size:19px !important;font-weight:600 !important;
          color:var(--text) !important}
  .ttitle::after{display:none}
  .tcount{font-size:13px !important;color:var(--dim) !important}
  .add{background:var(--accent) !important;color:var(--bg) !important;border:none !important;
       border-radius:22px !important;padding:10px 18px !important;font-size:14px !important;
       font-weight:600 !important;text-transform:none !important;letter-spacing:0 !important}
  .add:hover{filter:brightness(1.06)}

  .task{background:var(--panel-2) !important;border:none !important;border-radius:14px !important;
        padding:15px 16px !important;margin-bottom:9px;box-shadow:none !important}
  .task:hover{background:var(--panel-3) !important}
  .task.done{opacity:.5}
  .box{border-radius:50% !important;border:2px solid var(--dim) !important;width:22px !important;height:22px !important}
  .task.done .box{background:var(--verde) !important;border-color:var(--verde) !important}
  .task .txt{font-size:16px !important;font-weight:500}
  .task .sub{font-size:13px !important;color:var(--dim) !important}
  .empty{font-family:'Outfit',sans-serif !important;font-style:normal !important;font-size:15px !important;
         color:var(--dim) !important}

  /* --- menu: item ativo em pilula --- */
  .nav{background:var(--panel) !important;border-top:1px solid var(--line) !important;padding:6px 8px}
  .nav button{font-size:12px !important;color:var(--dim)}
  .nav button.on{color:var(--accent)}

  /* cor fixa (pedido do usuario, mesmo motivo das outras regras .faixa) */
  .vitoria .faixa{font-family:'Outfit',sans-serif !important;font-size:15px !important;font-weight:700 !important;
                  letter-spacing:.08em;color:#FFD65A !important;text-shadow:0 1px 3px rgba(0,0,0,.65)}
  .toast{border-radius:22px;text-transform:none;font-size:13px;letter-spacing:0}

/* ===== Bloco style #8 ===== */
/* nome do heroi no topo, nao mais sobre o sprite */
  .topbar{gap:10px}
  #nomeTopo{font-family:'Outfit',sans-serif !important;font-size:15px !important;font-weight:500 !important;
            color:var(--muted) !important;margin:0 !important;flex:1;text-align:left}
  .fighter{gap:8px}

/* ===== Bloco style #9 ===== */
/* sombra no chao, pra assentar os sprites na arena */
  .hero-sprite,.mob-sprite{position:relative}
  .hero-sprite::after,.mob-sprite::after{
    content:'';position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
    width:62px;height:13px;border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(0,0,0,.62) 0%, rgba(0,0,0,.3) 45%, transparent 74%);
    transition:opacity .4s,width .4s;pointer-events:none
  }
  .hero-sprite svg,.mob-sprite svg{position:relative;z-index:1}
  /* a sombra acompanha o estado do monstro */
  .mob-sprite.espreita::after{opacity:.4}
  .mob-sprite.dead::after,.mob-sprite.fugiu::after{opacity:0;width:24px}

/* ===== Bloco style #10 ===== */
/* sombra como elemento real, desenhada abaixo do sprite */
  .hero-sprite,.mob-sprite{position:relative;display:flex;flex-direction:column;align-items:center}
  .sombra{
    width:56px;height:12px;border-radius:50%;margin-top:-8px;
    background:radial-gradient(ellipse at center, rgba(0,0,0,.6) 0%, rgba(0,0,0,.28) 48%, rgba(0,0,0,0) 75%);
    transition:opacity .4s,width .4s;pointer-events:none;flex:none
  }
  .mob-sprite .sombra{order:2}
  .mob-sprite.espreita .sombra{opacity:.4}
  .mob-sprite.dead .sombra,.mob-sprite.fugiu .sombra{opacity:0;width:22px}
  /* remove a tentativa anterior */
  .hero-sprite::after,.mob-sprite::after{display:none}

/* ===== Bloco style #11 ===== */
/* sprites do pacote: as regras de estado valem tambem para <img> */
  .mob-sprite .mobimg{width:78px;height:78px;image-rendering:pixelated;
                      transition:transform .18s,opacity .35s;display:block}
  .mob-sprite.dead .mobimg{opacity:0;transform:translateY(14px) scale(.6) rotate(12deg)}
  .mob-sprite.shake .mobimg{filter:brightness(0) invert(1)}
  .mob-sprite.fugiu .mobimg{animation:fuga .55s ease-in forwards}
  .mob-sprite.espreita .mobimg{opacity:.45;filter:grayscale(.55)}

/* ===== Bloco style #12 ===== */
/* heroi como imagem do pacote */
  .hero-sprite .heroimg{width:83px;height:83px;image-rendering:pixelated;
                        transition:transform .18s;display:block}
  .hero-sprite.ferido .heroimg{filter:brightness(0) invert(1)}

/* ===== Bloco style #13 ===== */
/* ---------- arrastar (segurando em qualquer parte do card) ---------- */
  .task{touch-action:none;-webkit-user-select:none;user-select:none;
        transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s,border-color .16s}
  .task.dragging{position:fixed;z-index:80;margin:0 !important;
                 outline:2px solid var(--accent);outline-offset:-1px;
                 box-shadow:0 16px 32px rgba(0,0,0,.45);
                 transform:scale(1.03);pointer-events:none;transition:none}
  .task.settling{transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,outline-color .18s}
  .task-placeholder{background:transparent;border:none;margin-bottom:9px}

/* ===== Bloco style #14 ===== */
/* ---- escolha de personagem ---- */
  .palco{
    position:relative; display:flex; flex-direction:column; align-items:center;
    padding:18px 0 12px; margin:2px 0 16px; border-radius:16px;
    background:linear-gradient(180deg,#2C3B4F 0%,#22304180 60%,transparent 100%);
    overflow:hidden;
  }
  .palco::before{
    content:''; position:absolute; left:50%; top:14px; transform:translateX(-50%);
    width:120px; height:120px; border-radius:50%;
    background:radial-gradient(circle, rgba(242,166,90,.18) 0%, transparent 68%);
    animation:tocha 3.4s ease-in-out infinite;
  }
  .palco-sprite{position:relative; z-index:1; height:120px; display:flex; align-items:flex-end}
  .palco-sprite img{width:120px;height:120px;image-rendering:pixelated;display:block;
                    animation:respira 2.6s ease-in-out infinite}
  @keyframes respira{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
  .palco-sombra{
    width:60px;height:13px;border-radius:50%;margin-top:-4px;
    background:radial-gradient(ellipse at center, rgba(0,0,0,.6) 0%, rgba(0,0,0,.28) 45%, transparent 74%);
  }
  .palco-nome{
    margin-top:10px; font-family:'Cormorant Garamond',serif; font-style:italic;
    font-size:19px; color:var(--text); letter-spacing:.4px;
  }

  .grade{
    display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px;
  }
  /* v4.116 (item 42-d do roadmap): setas flanqueando o palco -- mesmo
     padrao visual da referencia (Habit Slayer, setas em volta do
     preview central), aplicado aqui em cima do heroi JA ESCOLHIDO
     (prev/next no array HEROIS), sem trocar o sistema de sprites
     prontos por composicao em camadas -- decisao do usuario, escopo
     menor. A grade continua embaixo como atalho, nada removido. */
  .palcoNav{display:flex;align-items:center;gap:10px;margin:2px 0 16px}
  .palcoNav .palco{flex:1;margin:0}
  .palcoSeta{width:38px;height:38px;border-radius:50%;flex:none;
             background:rgba(255,255,255,.06);border:none;color:var(--text);
             display:grid;place-items:center;cursor:pointer;transition:background .15s, transform .12s}
  .palcoSeta:hover{background:rgba(255,255,255,.12)}
  .palcoSeta:active{transform:scale(.92)}
  .palcoSeta svg{width:20px;height:20px}
  .opcao{
    position:relative; display:flex; align-items:center; justify-content:center;
    padding:8px 2px; border-radius:12px; cursor:pointer;
    background:#243040; border:2px solid transparent;
    transition:border-color .15s, background .15s, transform .12s;
  }
  .opcao img{width:47px;height:47px;image-rendering:pixelated;display:block}
  .opcao:active{transform:scale(.94)}
  .opcao.sel{border-color:var(--accent); background:#2B3849}
  .opcao.sel::after{
    content:''; position:absolute; right:4px; top:4px;
    width:7px; height:7px; border-radius:50%; background:var(--accent);
  }

/* ===== Bloco style #15 ===== */
/* ============ TEMA: base roxa, acoes em laranja ============ */
  :root{
    --bg:#1A1526;
    --panel:#1A1526;
    --panel-2:#251E38;
    --line:#3B3057;
    --text:#F5F0E9;
    --muted:#B9AED2;
    --dim:#8779A8;
    --accent:#F2A65A;
    --accent-dim:#5A3D20;
    --gold:#F2C94C;
    --blood:#E5698A;
    --verde:#63C99A;
    --perigo:#F45781;
    --perigo2:#E03131;
    --panel-3:#2A2240;
    --mobname:#F0A0BE;

  }
  body{background:var(--bg)}

  /* arena */
  .arena{background:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.35) 100%),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAKCAYAAADVTVykAAABfElEQVR4nJ2TwU7CQBCGvxKMQeCEXojGlMvWIw/AnfIOwh0egYfwpIneQJ4Bn4L22r10SeCoJ0CDJVkvdNPWgsT/srM738x0Z6fWZDKpPwyHdLpdlFK0222yklIyHY3o9HoHmVMUBAFvr6+49/copXBdl6KUkkW0JgxDGo0GUspfgUIInnefKKWwbTuXOUWO4/ASbZjP56ZWAeD6rILrugcD/1vwUJ5kBwsAH6sVUkqEEMbheR6e5xm7tNXYtp3LJLnkmrUBSludqmXd1mp1nQCuKpVUgN5/YJ5q1SrW3l5EGwBuzsosok1qjfW+XgPwdW6Z82K33wdg9PREr9//c8iklIwfH+kOBoRhePTpYn46HnPXagH8yl2Mjcty+eggxhJCUKtWT2Jjfrq38wa4kNz8dZv4RstofRIb84toc7CrpgPL3WcuoLVO7X3fB20Zn2VZeWHpHEd8pgPZ6QSYzWamqO/7ADSbTUrfmiAIcBzHsNm/ITn9F5ncSd8PSsnXJX9WpAwAAAAASUVORK5CYII=) repeat,linear-gradient(180deg,var(--arena-1) 0%,var(--arena-2) 55%,var(--arena-3) 100%) !important;background-size:auto, 130px 41px, auto !important;image-rendering:pixelated}

  .fill{background:linear-gradient(90deg,var(--accent),var(--xp2)) !important}
  /* Barra de XP (Arena + Perfil) fixada em amarelo/dourado -- pedido
     explicito do usuario pra nao trocar de cor com o tema, diferente do
     resto da UI que usa var(--accent)/var(--xp2) de proposito. Sobrescreve
     so por ID (#fill = Arena, #perfilFill = Perfil), sem tocar na regra
     .fill acima nem em nenhuma das outras 3 que existem no arquivo --
     evita o risco documentado de reativar cascata morta ao mexer numa
     regra .fill existente.
     Historico do valor: v1 verde com gradiente (var(--verde) theme-
     invariant) -> v2 verde solido (#5FC77E, ajuste de tom) -> v3 (aqui)
     voltou pro amarelo/laranja que a barra tinha ORIGINALMENTE no tema
     padrao (Crepusculo, antes de qualquer override): #F2A65A -> #F2C94C,
     que la e var(--accent)/var(--xp2) do :root sem tema, agora hardcoded
     pra nao mudar com o tema. */
  #fill, #perfilFill{background:linear-gradient(90deg,#F2A65A,#F2C94C) !important}
  .mobname{color:var(--mobname) !important}

  /* cartoes e superficies que estavam com azul fixo */
  .task, .itemini, .opcao{background:var(--panel-3) !important}
  .opcao.sel{background:var(--sel-bg) !important; border-color:var(--accent) !important}
  .palco{background:linear-gradient(180deg,var(--arena-1) 0%,color-mix(in srgb, var(--arena-2) 50%, transparent) 60%,transparent 100%) !important}
  .palco::before{background:radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 68%) !important}

/* ===== Bloco style #16 ===== */
/* ============ NAV: abas Tarefas / Inventario / Loja ============ */
  .oculto{display:none !important}

  .view{display:none;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
        flex-direction:column;padding:16px 18px 8px}
  .view.on{display:flex}

  .vhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
  .vhead .vtitle{font-family:'Outfit',sans-serif;font-size:16px;font-weight:600;color:var(--text)}
  .vhead .vsub{font-family:'Outfit',sans-serif;font-size:12px;color:var(--dim)}

  .vazio{margin:auto;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;padding:20px 8px}
  .vazio .vicon{width:46px;height:46px;color:var(--dim);opacity:.45}
  .vazio b{font-family:'Outfit',sans-serif;font-size:15px;font-weight:600;color:var(--muted)}
  .vazio p{font-family:'Outfit',sans-serif;font-size:13px;line-height:1.55;color:var(--dim);max-width:250px}

  .saldo{display:inline-flex;align-items:center;gap:5px;font-family:'Outfit',sans-serif;
         font-size:13px;font-weight:600;color:var(--gold);background:rgba(245,190,74,.10);
         border:1px solid rgba(245,190,74,.22);border-radius:999px;padding:5px 11px;margin-top:4px}
  .saldo svg{width:28px;height:28px}

  .nav button{cursor:pointer}

/* ===== Bloco style #17 ===== */
/* ============ INVENTARIO ============ */
  .pxi{background-image:url("sheet.png?v=1");background-repeat:no-repeat;image-rendering:pixelated;flex:none}

  #viewInventario{padding:14px 14px 8px}

  /* --- painel de equipamento --- */
  .equipbox{background:var(--panel-3);border:1px solid var(--line);border-radius:14px;padding:12px 12px 10px;margin-bottom:14px}
  .equiprow{display:flex;gap:8px;justify-content:space-between}
  .eslot{flex:1;aspect-ratio:1;border-radius:10px;background:var(--poco);border:1px dashed var(--line);
         display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;overflow:hidden}
  .eslot.cheio{border-style:solid}
  .eslot .etag{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-family:'Outfit',sans-serif;
               font-size:8px;letter-spacing:.03em;color:var(--dim);text-transform:uppercase}
  .eslot.cheio .etag{display:none}
  .eslot svg{width:16px;height:16px;color:var(--dim);opacity:.35}
  .eslot .fantasma{filter:grayscale(1) brightness(.62);opacity:.30}
  .bonusline{display:flex;gap:14px;justify-content:center;margin-top:11px;padding-top:9px;border-top:1px solid var(--line)}
  .bonusline span{font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:600;color:var(--dim)}
  .bonusline b{font-weight:700}
  .bonusline .bm b{color:var(--gold)}
  .bonusline .bx b{color:var(--accent)}

  /* --- filtros --- */
  .invfiltros{display:flex;gap:7px;margin-bottom:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;
              position:sticky;top:0;z-index:2;background:var(--panel);padding-top:6px}
  .invfiltros button{flex:none;font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:600;color:var(--dim);
        background:var(--panel-3);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer}
  .invfiltros button.on{color:var(--bg);background:var(--accent);border-color:var(--accent)}

  /* --- grade --- */
  .invgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  @media (min-width:420px){ .invgrid{grid-template-columns:repeat(6,1fr)} }
  .cel{aspect-ratio:1;border-radius:10px;background:var(--panel-3);border:1px solid var(--line);
       display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}
  .cel:active{transform:scale(.94)}
  .cel .qtd{position:absolute;right:3px;bottom:2px;font-family:'Outfit',sans-serif;font-size:10px;
            font-weight:700;color:var(--text);text-shadow:0 1px 2px #000}
  .cel .eq{position:absolute;left:3px;top:3px;width:6px;height:6px;border-radius:50%;background:var(--verde)}
  .r0{border-color:#4A4066}.r1{border-color:var(--verde)}.r2{border-color:#5AA9F2}
  .r3{border-color:#B57BE8}.r4{border-color:#F2A65A;box-shadow:0 0 10px rgba(242,166,90,.30)}
  .r5{border-color:#5AE0D8;box-shadow:0 0 10px rgba(90,224,216,.30)}

  /* --- ficha do item --- */
  .sheetbg{position:fixed;inset:0;background:rgba(10,7,18,.72);z-index:80;display:none}
  .sheetbg.on{display:block}
  .isheet{position:fixed;left:0;right:0;bottom:0;z-index:81;background:#251E38;border-top:1px solid var(--line);
          border-radius:20px 20px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));
          transform:translateY(102%);transition:transform .22s ease;max-width:520px;margin:0 auto}
  .isheet.on{transform:translateY(0)}
  .ihead{display:flex;gap:13px;align-items:center}
  .ihead .ibox{width:60px;height:60px;border-radius:12px;background:var(--poco);border:1px solid var(--line);
               display:flex;align-items:center;justify-content:center;flex:none}
  .iname{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--text);line-height:1.15}
  .imeta{font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
  .ibonus{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
  .ibonus span{font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;color:var(--muted);
               background:var(--poco);border:1px solid var(--line);border-radius:8px;padding:5px 10px}
  .iacts{display:flex;gap:8px;margin-top:15px}
  .iacts button{flex:1;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;padding:11px 6px;
                border-radius:11px;border:1px solid var(--line);background:var(--poco);color:var(--muted);cursor:pointer}
  .iacts button.prim{background:var(--accent);border-color:var(--accent);color:var(--bg)}
  .iacts button.danger{color:var(--perigo)} /* --perigo, nao --blood: precisa continuar visivel no tema Grafite (acessibilidade, mesmo motivo do .cfgbtnfull.perigo) */

/* ===== Bloco style #18 ===== */
#viewLoja{padding:14px 14px 8px}

  .lojatopo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
  .lojatopo .saldo{margin-top:0}

  .lojatabs{display:flex;gap:6px}
  .lojatabs button{font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:600;color:var(--dim);
        background:var(--panel-3);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer}
  .lojatabs button.on{color:var(--bg);background:var(--accent);border-color:var(--accent)}

  .lojalista{display:flex;flex-direction:column;gap:8px}
  .lrow{display:flex;align-items:center;gap:11px;background:var(--panel-3);border:1px solid var(--line);
        border-radius:12px;padding:9px 11px;position:relative}
  .lrow.oferta{border-color:var(--gold);box-shadow:0 0 10px rgba(242,201,76,.14)}
  .lrow.trava{opacity:.5}
  .lrow.esgotado{opacity:.38}
  .lrow .lbox{width:46px;height:46px;border-radius:10px;background:var(--poco);border:1px solid var(--line);
        display:flex;align-items:center;justify-content:center;flex:none}
  .lrow .linfo{flex:1;min-width:0}
  .lname{font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;color:var(--text);
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lmeta{font-family:'Outfit',sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;
         letter-spacing:.05em;margin-top:2px}
  .lbonus{font-family:'Outfit',sans-serif;font-size:11px;color:var(--dim);margin-top:3px}
  .lbonus b{color:var(--muted);font-weight:600}
  .lacao{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
  .lpreco{font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:700;color:var(--gold);
          font-variant-numeric:tabular-nums;white-space:nowrap}
  .lpreco s{color:var(--dim);font-weight:500;font-size:10.5px;margin-right:4px}
  .lpreco .lmoeda{width:24px;height:24px;margin-left:2px;vertical-align:-7px}
  .lbtn{font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;padding:6px 14px;border-radius:9px;
        border:1px solid var(--accent);background:var(--accent);color:var(--bg);cursor:pointer;white-space:nowrap}
  .lbtn.sec{background:var(--poco);border-color:var(--line);color:var(--muted)}
  .lbtn.off{background:var(--poco);border-color:var(--line);color:var(--dim);cursor:default}
  .lflag{position:absolute;top:-7px;left:11px;font-family:'Outfit',sans-serif;font-size:9px;font-weight:700;
         text-transform:uppercase;letter-spacing:.08em;background:var(--gold);color:var(--bg);
         border-radius:999px;padding:2px 7px}
  .lqtd{font-family:'Outfit',sans-serif;font-size:11px;color:var(--dim);font-weight:600}
  .lbulk{margin-top:12px;width:100%;font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:600;
         padding:10px;border-radius:11px;border:1px dashed var(--line);background:var(--poco);
         color:var(--gold);cursor:pointer}
  .lnota{font-family:'Outfit',sans-serif;font-size:11.5px;color:var(--dim);text-align:center;
         margin:14px 0 4px;line-height:1.5}

/* ===== Bloco style #21 ===== */
/* dentro da folha o composer perde a caixa propria, senao fica caixa dentro de caixa */
  #addOverlay .composer{
    margin-top:0 !important;
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    padding:0 !important;
  }
  #addOverlay .composer input{font-size:15px;padding:13px}
  #addOverlay .cbtn{padding:14px;font-size:15px;border-radius:12px;margin-top:4px}

/* ===== Bloco style #22 ===== */
.xpwrap .hprow{margin-bottom:5px}
  .xpwrap .hpbar{margin-bottom:12px}
  .xpwrap .hpfill{
    background:var(--perigo) !important;
    transition:width .45s cubic-bezier(.4,1.2,.5,1), background .3s;
  }
  .xpwrap .hpfill.baixa{background:var(--perigo2) !important}
  .xpnum.hpnum{color:var(--perigo) !important}
  .xpnum.hpnum.baixa{color:var(--perigo2) !important}
  .hpdano{animation:hptremor .4s ease}
  @keyframes hptremor{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-4px)} 45%{transform:translateX(4px)}
    70%{transform:translateX(-2px)}
  }
  @media (prefers-reduced-motion:reduce){ .hpdano{animation:none} }

/* ===== Bloco style #23 ===== */
/* ============ AVISOS NO TOPO ============ */
  /* Nao existe faixa livre dentro da arena: a vida do monstro fica em y=77,
     os sprites de y=88 a 175 e o nome do monstro de y=191 a 216. O unico vao
     real da tela e o miolo da topbar — o selo de nivel acaba em x=88 e as
     moedas ficam a direita. Dai a largura maxima estreita: alargar volta a
     cobrir o nivel ou o contador de moedas. */
  .toast{
    bottom:auto !important;
    top:calc(9px + env(safe-area-inset-top)) !important;
    transform:translate(-50%, -12px) !important;
    z-index:90;                        /* as folhas modais ficam em 80 */
    max-width:min(62vw, 236px);
    padding:9px 14px !important;
    line-height:1.35;
    box-shadow:0 6px 20px rgba(0,0,0,.5);
  }
  .toast.on{transform:translate(-50%, 0) !important}

/* ===== Bloco style #24 ===== */
/* a aura usa ::after porque o ::before do .hero-sprite ja e o halo de tocha */
  .hero-sprite::after{
    content:'';position:absolute;inset:-14%;border-radius:50%;
    background:radial-gradient(circle, var(--aura,transparent) 0%, transparent 62%);
    opacity:0;transition:opacity .45s, background .45s;
    pointer-events:none;z-index:0;
  }
  .hero-sprite.temAura::after{opacity:.85;animation:auraPulso 3.2s ease-in-out infinite}
  @keyframes auraPulso{0%,100%{opacity:.55}50%{opacity:.95}}

  /* EQUIPAMENTOS: faixa horizontal no topo do .xpwrap, acima da barra de Vida.
     Saiu de cima do sprite (badges absolutos) porque as caixas tampavam o
     heroi e brigavam por espaco com a arena. Vive dentro de .xpwrap, que ja
     esta em blocosTarefas — some sozinho ao trocar de aba, sem gancho novo. */
  .eqrow{margin-bottom:12px}
  .eqrow[hidden]{display:none}
  .eqbadges{
    display:flex;flex-wrap:wrap;gap:6px;align-items:center;
    margin-top:5px;pointer-events:none;
  }
  .eqb{
    width:30px;height:30px;border-radius:7px;flex:none;
    display:grid;place-items:center;
    background:rgba(0,0,0,.4);
    border:1px solid var(--cor,var(--line));
    box-shadow:0 0 6px -1px var(--cor,transparent);
  }
  .eqb .pxi{opacity:.95}

  /* arma em destaque: 2-3x maior que os demais, moldura mais grossa e brilho
     mais forte reaproveitando a mesma var(--cor) por raridade do item —
     item 19 do roadmap ("badge maior + moldura por raridade") */
  .eqb.eqb-arma{
    width:52px;height:52px;border-radius:10px;
    border-width:2px;
    box-shadow:0 0 12px -1px var(--cor,transparent), 0 0 0 1px var(--cor,transparent) inset;
  }

  @media (max-width:345px){
    .eqbadges{gap:4px}
    .eqb{width:26px;height:26px}
    .eqb.eqb-arma{width:44px;height:44px}
  }
  @media (prefers-reduced-motion:reduce){
    .hero-sprite.temAura::after{animation:none}
  }

/* ===== Bloco style #25 ===== */
.perfilhero{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;
              padding:16px;margin-bottom:14px;text-align:center}
  .perfilheroLinha{display:flex;align-items:center;gap:16px;text-align:left}
  .perfilheroLinha .hero-sprite{flex:none}
  .perfilheroInfo{flex:1;min-width:0}
  .perfilnome{font-family:'Outfit',sans-serif;font-size:15px;font-weight:600;margin-bottom:10px}
  .perfilhero .bar{margin-bottom:6px}
  .perfilhero .xpnum{display:block}
  /* .xpwrap/.hprow/.hpbar sao reaproveitados do cabecalho da Arena (mesmo
     par hpfill/hpnum, so troca de id) -- aqui dentro do card .perfilhero
     zera o padding/borda pensados pro contexto da Arena, ja que o card
     do Perfil ja tem sua propria borda/padding. */
  .perfilhero .xpwrap{padding:0;border-bottom:none;margin-top:2px}

  .statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
  .statcard{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
            padding:12px;display:flex;flex-direction:column;gap:4px}
  .statlabel{font-family:'Outfit',sans-serif;font-size:11px;color:var(--dim)}
  .statval{font-family:'Silkscreen',monospace;font-size:14px;color:var(--accent)}

/* ===== Bloco style #26 ===== */
/* .perfiltabs/.pcfg/.perfilpane.oculto removidos daqui -- a fileira de
     pills (Atributos/Conquistas/Bestiário/engrenagem) deixou de existir
     (item 18 do roadmap: Perfil virou rolagem unica, sem sub-abas). A
     engrenagem agora mora no vhead (ver .vheadCfgBtn abaixo). */
  .vheadDireita{display:flex;align-items:center;gap:10px}
  .vheadCfgBtn{width:34px;height:34px;flex:none;display:grid;place-items:center;
    background:var(--panel-3);border:1px solid var(--line);border-radius:10px;
    color:var(--muted);cursor:pointer}
  .vheadCfgBtn svg{width:17px;height:17px}
  .vheadCfgBtn:active{background:var(--accent-dim);color:var(--accent)}

  /* previas (Historico/Conquistas/Bestiario) reaproveitam .cfgrow, que ja
     existia pra Config -- mesmo visual, zero CSS novo pra elas.
     .prevfaixa reaproveita classes visuais que ja existiam em outros
     modulos (.caldia/.calvitoria/.calfuga do Historico, .conqcaticone
     das Conquistas, .bestimg do Bestiario) -- so a faixa horizontal em
     si e nova. */
  .cfgrowtopo{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .prevfaixa{display:flex;gap:6px;margin-top:10px;min-height:32px;
             overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prevfaixa .caldia{width:32px;height:32px;aspect-ratio:unset;flex:none}
  /* pedido do usuario: previa de conquistas so com texto, sem icone --
     chip com cor da conquista na borda/texto em vez de circulo preenchido */
  .prevconqchip{flex:none;display:flex;align-items:center;height:30px;padding:0 11px;
                border-radius:14px;background:var(--panel-3);border:1px solid var(--pv-cor);
                font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;
                color:var(--pv-cor);white-space:nowrap}
  .prevbestimg{width:32px;height:32px;flex:none;object-fit:contain;image-rendering:pixelated;
               border-radius:8px;background:var(--panel-3);padding:3px;box-sizing:border-box}
  .prevvazio{font-family:'Outfit',sans-serif;font-size:11.5px;color:var(--dim);
             display:flex;align-items:center}

  /* overlay de Config -- mesmo padrao de histOverlay/grimOverlay, z-index
     um degrau abaixo (69 vs 70) de proposito: se o usuario abrir o
     Historico de dentro do Config, o Historico precisa pintar por cima. */
  /* v4.141 (pedido do usuario): mesma logica do .edov/.edsheet -- fechar
     era display:none instantaneo, virou transition reversivel (fade +
     leve slide). Beneficia os 7 usos de .cfgOverlay: Config, Heroi,
     Aparencia, Preferencias, Idioma, Conquistas, Bestiario. */
  .cfgOverlay{position:fixed;inset:0;z-index:69;background:var(--bg);
    display:flex;flex-direction:column;overflow:hidden;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateX(14px);
    transition:opacity .24s var(--expo), transform .24s var(--expo), visibility 0s .24s;}
  .cfgOverlay.on{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0);
    transition:opacity .24s var(--expo), transform .24s var(--expo), visibility 0s;}
  .cfgovhead{display:flex;align-items:center;gap:10px;flex:none;
    padding:calc(14px + env(safe-area-inset-top)) 16px 10px;
    border-bottom:1px solid var(--line)}
  .cfgovhead .vtitle{font-family:'Outfit',sans-serif;font-size:16px;font-weight:600;color:var(--text)}
  .cfgvoltar{width:36px;height:36px;flex:none;display:grid;place-items:center;
    background:transparent;border:none;border-radius:50%;color:var(--text);cursor:pointer}
  .cfgvoltar:active{background:rgba(255,255,255,.08)}
  .cfgovcorpo{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
  .cfgovcorpo .edsec{margin:18px 0 8px}
  .cfgovcorpo .edsec:first-child{margin-top:0}

  .cfgrow{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
          padding:12px 13px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .cfgrow.cfgcol{flex-direction:column;align-items:stretch}
  /* item 39: linhas-resumo da tela principal de Config que abrem sub-tela */
  .cfgrow.cfglink{cursor:pointer}
  .cfgrow.cfglink:active{background:var(--panel-3)}
  /* bug reportado: Politica de Privacidade/Termos de Uso sublinhados -- e
     um <a> de verdade (abre externo), sem text-decoration:none herdava o
     sublinhado padrao do navegador em cima do texto inteiro da linha. */
  .cfgrow.cfglink, .cfgrow.cfglink:visited{text-decoration:none;color:inherit}
  .cfgseta{width:18px;height:18px;flex:none;color:var(--dim)}
  .cfgtxt{display:flex;flex-direction:column;gap:2px}
  .cfgtxt b{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--text)}
  .cfgtxt span{font-family:'Outfit',sans-serif;font-size:11.5px;color:var(--dim)}
  .cfgbtn{font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;color:var(--accent);
          background:transparent;border:1px solid var(--accent-dim);border-radius:8px;padding:7px 12px;
          cursor:pointer;flex:none}
  .cfgbtn:hover{background:var(--accent-dim)}
  .cfgbtn.perigo{color:var(--blood);border-color:var(--blood)}
  .cfgbtn.perigo:hover{background:rgba(229,107,107,.12)}

  /* switch liga/desliga (item 39: substitui o botao Vibrar/Som do
     Feedback tatil por um toggle -- ver JS "CONFIG — PREFERENCIA DE
     FEEDBACK NO CLIQUE"). Estrutura: trilho (.swch) + bolinha
     (.swch-bolinha) que desliza via transform quando .on entra. */
  .swch{width:46px;height:26px;flex:none;border-radius:999px;border:none;cursor:pointer;
        background:var(--line);padding:3px;display:flex;align-items:center;
        transition:background .22s var(--expo)}
  .swch.on{background:var(--accent)}
  .swch-bolinha{width:20px;height:20px;border-radius:50%;background:#FFF;
        transition:transform .32s var(--spring-curve)}
  .swch.on .swch-bolinha{transform:translateX(20px)}

  .cfgcol .grade{margin:10px 0 0;grid-template-columns:repeat(4,1fr)}

  .temagrid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
  .temaswatch{width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;flex:none}
  .temaswatch.sel{border-color:var(--text)}

  /* paletas — so custom properties, sem redesenho de layout */
  /* v4.138 (pedido do usuario): tema Azul (meianoite) REMOVIDO da paleta,
     substituido por Branco -- contraparte CLARA do Grafite. Grafite e
     100% grayscale de proposito (item 25 do roadmap, R=G=B em todo
     valor, inclusive gold/blood -- ver comentario dele mais abaixo);
     Branco segue a MESMA filosofia so que invertida (fundo claro, texto
     escuro), pra formar o par "Preto e Branco" que o usuario pediu pra
     aparecer primeiro na lista, antes dos temas coloridos. */
  /* v4.140 (ajuste pedido pelo usuario -- "tema branco ta forte demais"):
     contraste interno suavizado. Um tema claro sempre vai parecer mais
     "forte" do lado de 5 temas escuros (isso e fisico, tela branca emite
     bem mais luz -- nao da pra evitar), mas o contraste PRETO-no-BRANCO
     estava no extremo (#1E1E1E em #EDEDED). Suavizado pra um cinza mais
     morno em vez de branco/preto puros -- mais parecido com o "light
     mode" nativo de iOS/Android (nunca usam #FFF/#000 puros tambem). */
  :root[data-tema="branco"]{
    --bg:#D2D0CB; --panel:#DBD9D4; --panel-2:#CECCC7; --line:#B6B3AC;
    --text:#2E2C29; --muted:#5A564F; --dim:#7F7B73;
    --accent:#2E2C29; --accent-dim:#C4C1BA; --gold:#5C5650; --blood:#78716A;
    --panel-3:#C2BFB8; --poco:#E9E7E3; --sel-bg:#C2BFB8; --mobname:#4A453F;
    --arena-1:#C2BFB8; --arena-2:#CAC7C1; --arena-3:#D4D2CC;
    --xp2:#5C5650;
  }
  :root[data-tema="pergaminho"]{
    --bg:#0F1216; --panel:#0F1216; --panel-2:#151A20; --line:#232A33;
    --text:#E6E9ED; --muted:#8A93A0; --dim:#5A6470;
    --accent:#C9A961; --accent-dim:#3A2F18; --gold:#C9A961; --blood:#9E3B3B;
    --panel-3:#1D2318; --poco:#0A0C0F; --sel-bg:#242A1B; --mobname:#D9A05B;
    --arena-1:#2A2415; --arena-2:#1E1A10; --arena-3:#14110A;
    --xp2:#C9A961;
  }
  /* Ametista e Rosé: mesmo tema Dourado (fundo/neutros identicos),
     só o destaque troca de cor -- pedido do usuario apos ver o
     mockup de comparacao de temas. */
  :root[data-tema="ametista"]{
    --bg:#0F1216; --panel:#0F1216; --panel-2:#151A20; --line:#232A33;
    --text:#E6E9ED; --muted:#8A93A0; --dim:#5A6470;
    --accent:#A98FDE; --accent-dim:#2A2140; --gold:#A98FDE; --blood:#9E3B3B;
    --panel-3:#241E30; --poco:#0A0C0F; --sel-bg:#2C2440; --mobname:#C9B3EA;
    --arena-1:#362A50; --arena-2:#281F3D; --arena-3:#1C1730;
    --xp2:#A98FDE;
  }
  :root[data-tema="rose"]{
    --bg:#0F1216; --panel:#0F1216; --panel-2:#151A20; --line:#232A33;
    --text:#E6E9ED; --muted:#8A93A0; --dim:#5A6470;
    --accent:#E0A5AE; --accent-dim:#3A2027; --gold:#E0A5AE; --blood:#9E3B3B;
    --panel-3:#2A1D22; --poco:#0A0C0F; --sel-bg:#33232A; --mobname:#EDC0C6;
    --arena-1:#3D2830; --arena-2:#2C1E24; --arena-3:#1F151A;
    --xp2:#E0A5AE;
  }
  /* PLANO PRO -- Esmeralda e Terracota: os 2 temas exclusivos do plano
     (item 2 do escopo fechado). Aprovados via mockup de comparacao
     (Artifact) antes de entrar aqui, mesmo fluxo das rodadas de tema
     anteriores. 1a tentativa do 2o tema foi "Azul" (fundo quente +
     destaque frio) -- rejeitado pelo usuario ("nao quero azul de jeito
     nenhum"), substituido por Esmeralda: verde vivo/saturado (bem mais
     vibrante que o antigo tema Floresta/Verde, que era um verde-folha
     desbotado) sobre fundo GRAFITE NEUTRO (nao verde), pra nao repetir
     o problema de fundo-e-destaque-na-mesma-familia que os primeiros
     temas coloridos tiveram. Terracota segue a formula ja aprovada
     (fundo frio + destaque quente), num tom terracota/cobre, mais
     avermelhado que o Laranja e mais terroso que o Sangue. Bloqueio de
     uso (nao-assinante) fica no JS/CSS do seletor (TEMAS[].pro +
     pintarTemaGrid()), nao aqui -- esses blocos de cor sao neutros a
     assinatura. */
  :root[data-tema="esmeralda"]{
    --bg:#12161A; --panel:#12161A; --panel-2:#1A2025; --line:#37414A;
    --text:#EAF1EE; --muted:#9DB0A8; --dim:#66766E;
    --accent:#22C55E; --accent-dim:#123424; --gold:#D9C15C; --blood:#E5484D;
    --panel-3:#232A30; --poco:#0B0D0F; --sel-bg:#1D3327; --mobname:#5EE39A;
    /* arena-1/2/3 = pedra da masmorra (gradiente atras da textura de
       tijolo, ver aplicarFundoTemaArena()). 1a versao ficou cinza-neutro
       quase igual ao Terracota e sem contraste com o --bg -- usuario
       reparou que a parede "nao mudava nada" comparado com Laranja/
       Dourado/Escuro, que tem tom proprio e mais claro. Corrigido pra
       pedra com leve musgo esverdeado, puxando a identidade do tema pra
       dentro da masmorra tambem (mesmo principio do marrom-quente do
       Dourado apesar do fundo dele ser frio). */
    --arena-1:#24352B; --arena-2:#1B2822; --arena-3:#101915;
    --xp2:#22C55E;
  }
  :root[data-tema="terracota"]{
    --bg:#10161C; --panel:#10161C; --panel-2:#18212A; --line:#354655;
    --text:#EDEEEF; --muted:#9DACB9; --dim:#647686;
    --accent:#C96A4A; --accent-dim:#3D2318; --gold:#D9A45C; --blood:#D64B4B;
    --panel-3:#212C37; --poco:#0B1116; --sel-bg:#3D2318; --mobname:#E29676;
    /* mesmo ajuste do Esmeralda acima -- pedra com tom quente/ferrugem,
       puxando a cor do destaque pra dentro da masmorra em vez de ficar
       neutra e parecida com a do Esmeralda. */
    --arena-1:#3D2B22; --arena-2:#2C1F19; --arena-3:#1C130F;
    --xp2:#C96A4A;
  }
  /* item 25 do roadmap — spec fechada em sessao de brainstorm (21/08) */
  /* v4.133 (pedido do usuario, comparando com Habitica real): primeira
     tentativa (--bg #0A0A0A -> #141414) foi tao sutil que na tela real
     nao fez diferenca perceptivel -- usuario testou o arquivo certo,
     tema certo, e continuou "muito escuro". v4.134: recalibrado de
     forma bem mais agressiva, mirando a MESMA FAIXA de luminancia que
     o Habitica usa de verdade no screenshot de referencia (cinza-carvao,
     no bg #0A0A0A para #141414 estava mais que 3x mais escuro que o Habitica;
     agora --bg ~#282828, na faixa certa. Continua 100% grayscale (R=G=B
     em todo valor) -- decisao do item 25 preservada, nao reintroduz cor,
     so aumenta o quanto de cinza. --accent continua #FFFFFF e COR_RAR
     (raridade de item) nao e tocado, fora do sistema de tema. */
  :root[data-tema="grafite"]{
    --bg:#282828; --panel:#323232; --panel-2:#3D3D3D; --panel-3:#494949;
    --line:#5C5C5C; --text:#FAFAFA; --muted:#C2C2C2; --dim:#909090;
    --accent:#FFFFFF; --accent-dim:#4A4A4A;
    --gold:#E8E8E8; --blood:#B8B8B8; --mobname:#E0E0E0; --sel-bg:#4A4A4A; --poco:#1C1C1C;
    --arena-1:#454545; --arena-2:#383838; --arena-3:#2C2C2C; --xp2:#EDEDED;
  }
  /* v4.158 (pedido do usuario -- "o verde-magenta nao combina com o
     app"): Floresta (id mantido por compatibilidade com localStorage
     de quem ja tinha esse tema salvo, label no seletor virou so
     "Verde") refeito do zero via mockup de paleta (Artifact) testado
     antes de entrar em produto -- usuario aprovou a opcao "Verde
     Selva": verde-folha desaturado como destaque, sobre fundo
     verde-musgo bem escuro. Combinacao "natural", sem o contraste
     roxo/magenta bizarro da versao anterior. */
  :root[data-tema="floresta"]{
    --bg:#152018; --panel:#152018; --panel-2:#1E2C22; --panel-3:#26392B;
    --line:#3A5142; --text:#EFEDE4; --muted:#AEC4B2; --dim:#77937D;
    --accent:#6FAE6F; --accent-dim:#22391F; --gold:#D8B45C; --blood:#C15C4E;
    --mobname:#D9A05B; --sel-bg:#2A3B2C; --poco:#0F1712;
    --arena-1:#3A5142; --arena-2:#26392B; --arena-3:#1C2A20; --xp2:#D8B45C;
  }
  /* v4.159 (pedido do usuario -- primeira versao de Arcano/Sangue nao
     ficou boa: "azul arcano nao tem distincao boa sobre o roxo" e
     "sangue nao ficou legal"). Segunda rodada no mockup de paleta,
     com um preview MUITO mais realista (medidas e cores reais tiradas
     do app rodando via getComputedStyle, incluindo elementos que NAO
     mudam de cor com o tema -- pip de dificuldade, barra de vida,
     gradiente da barra de XP, check verde). Usuario aprovou "Sangue
     Rubro" (vermelho vivo/escarlate como destaque, saiu do
     dourado-osso apagado da v1) e "Arcano Espectral" (verde-agua/teal
     neon, saiu de vez da familia roxo/azul que colidia com o Laranja). */
  :root[data-tema="arcano"]{
    --bg:#0C1620; --panel:#0C1620; --panel-2:#13222F; --panel-3:#1B303F;
    --line:#2E4C5C; --text:#E4F3F2; --muted:#9DC2C4; --dim:#5F8C90;
    --accent:#5EEBD1; --accent-dim:#0F3A38; --gold:#D9C15C; --blood:#D6537A;
    --mobname:#7ED4C8; --sel-bg:#1B303F; --poco:#070E14;
    --arena-1:#2E4C5C; --arena-2:#1B303F; --arena-3:#13222F; --xp2:#D9C15C;
  }
  :root[data-tema="sangue"]{
    --bg:#190B0B; --panel:#190B0B; --panel-2:#291010; --panel-3:#391616;
    --line:#5C2020; --text:#F5E8DC; --muted:#D6A08E; --dim:#A16B57;
    --accent:#E8433A; --accent-dim:#4A1512; --gold:#E0B978; --blood:#E8433A;
    --mobname:#E8896F; --sel-bg:#391616; --poco:#120707;
    --arena-1:#5C2020; --arena-2:#391616; --arena-3:#291010; --xp2:#E0B978;
  }

/* ===== Bloco style #27 ===== */
.baubg{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:95;
         opacity:0;pointer-events:none;transition:opacity .22s}
  .baubg.on{opacity:1;pointer-events:auto}

  .baupop{position:fixed;left:50%;top:50%;z-index:96;
          transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;
          transition:transform .25s cubic-bezier(.2,.9,.3,1.2), opacity .22s;
          background:var(--panel-2);border:1px solid var(--line);border-radius:18px;
          padding:24px 20px 20px;width:min(300px, calc(100% - 56px));text-align:center}
  .baupop.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}

  .bauicone{width:68px;height:68px;margin:0 auto 8px;
            display:flex;align-items:center;justify-content:center}
  .bauicone.abriu{animation:bauPulo .4s ease}
  @keyframes bauPulo{0%{transform:scale(1)}45%{transform:scale(1.2) rotate(-4deg)}100%{transform:scale(1)}}
  /* icone de verdade do baú clicado (Arena), em vez do sprite generico do
     catalogo -- reaproveita as mesmas CSS vars do pack Treasure Chests */
  .bauicone2{background-size:contain;background-repeat:no-repeat;background-position:center;image-rendering:pixelated}
  .bauicone2.baupadrao{background-image:var(--bau-fechado)}
  .bauicone2.baupadrao.abriu{background-image:var(--bau-aberto)}
  .bauicone2.tier0{background-image:var(--bau-esp-t0-fechado)}
  .bauicone2.tier0.abriu{background-image:var(--bau-esp-t0-aberto)}
  .bauicone2.tier1{background-image:var(--bau-esp-t1-fechado)}
  .bauicone2.tier1.abriu{background-image:var(--bau-esp-t1-aberto)}
  .bauicone2.tier2{background-image:var(--bau-esp-t2-fechado)}
  .bauicone2.tier2.abriu{background-image:var(--bau-esp-t2-aberto)}
  .bauicone2.tier3{background-image:var(--bau-esp-t3-fechado)}
  .bauicone2.tier3.abriu{background-image:var(--bau-esp-t3-aberto)}

  .baulabel{font-family:'Silkscreen',monospace;font-size:11px;color:var(--accent);
            letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}

  .bauitens{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
  .baucard{display:flex;align-items:center;gap:10px;background:var(--panel-2);
           border:1px solid var(--line);border-radius:10px;padding:8px 10px;
           text-align:left;opacity:0;transform:translateY(6px);
           animation:baucardIn .32s ease forwards}
  @keyframes baucardIn{to{opacity:1;transform:translateY(0)}}
  .baubox{width:34px;height:34px;border-radius:8px;background:var(--poco);flex:none;
          display:flex;align-items:center;justify-content:center}
  .bautxt{flex:1;min-width:0}
  .baunome{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--text);
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bauraridade{font-family:'Outfit',sans-serif;font-size:10.5px;font-weight:700;
               text-transform:uppercase;letter-spacing:.05em;margin-top:1px}

  .bauok{width:100%;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;
         padding:11px;border-radius:11px;border:none;background:var(--accent);
         color:var(--bg);cursor:pointer}

  .lvlpop{position:fixed;left:50%;top:50%;z-index:96;
          transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;
          transition:transform .25s cubic-bezier(.2,.9,.3,1.2), opacity .22s;
          background:var(--panel-2);border:1px solid var(--gold);border-radius:18px;
          padding:26px 22px 20px;width:min(280px, calc(100% - 56px));text-align:center;
          box-shadow:0 0 26px -8px var(--gold)}
  .lvlpop.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
  .lvllabel{font-family:'Silkscreen',monospace;font-size:11px;color:var(--muted);
            letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
  .lvlnum{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:700;
          color:var(--gold);line-height:1;margin-bottom:4px}
  .lvlnum.pulou{animation:lvlPulo .45s ease}
  @keyframes lvlPulo{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
  .lvlvida{font-family:'Outfit',sans-serif;font-size:12.5px;color:var(--muted);margin-bottom:16px}
  .lvlvida b{color:var(--text);font-weight:700}
  .lvlok{width:100%;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;
         padding:11px;border-radius:11px;border:none;background:var(--accent);
         color:var(--bg);cursor:pointer}

  /* Tela cheia "Estagio Concluido" -- REESCRITO (pedido do usuario:
     comparando com video de referencia de outro app, queria uma tela
     cheia abrindo, nao um popup pequeno por cima da Arena). Cobre a
     tela inteira (inclusive topbar), fundo solido (nao precisa mais do
     .baubg escurecido nem do backdrop-blur -- e opaco por conta propria),
     com o sprite do heroi centralizado. z-index bem alto (150) pra
     garantir que fica acima de QUALQUER outro overlay. */
  .estagio-tela{
    position:fixed; inset:0; z-index:150;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
    background:var(--bg); padding:24px; text-align:center;
    opacity:0; pointer-events:none; transition:opacity .35s ease;
  }
  .estagio-tela.on{opacity:1; pointer-events:auto}
  /* FIX (pedido do usuario): a animacao de entrada dos elementos (fade+
     sobe) tocava sozinha assim que a tela abria, ANTES do usuario clicar
     em qualquer coisa. Pedido foi: a animacao so deve tocar DEPOIS do
     clique em "Continuar". Entao o conteudo agora aparece estatico junto
     com o fade da propria tela (sem animacao propria nos elementos), e
     quem anima e a SAIDA: ao clicar Continuar, a classe .estagio-tela-
     saindo entra (ver fecharEstagioTelaCompleta() no script), fazendo a
     tela encolher+sumir de vez (zoom leve + fade), no lugar do fade
     simples de opacity que tinha antes -- essa e a animacao que agora
     acontece depois do clique. */
  .estagio-tela-titulo{
    font-family:'Outfit',sans-serif; font-weight:700; font-size:22px; color:var(--text);
  }
  .estagio-tela-hero{
    width:120px; height:120px; object-fit:contain; image-rendering:pixelated;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.5));
  }
  /* Preview do bioma novo -- pedido revisado do usuario: voltou a
     mostrar a imagem CHEIA do tema (tema.arte, a mesma arte de fundo da
     Arena), nao mais a camada unica flutuante (tema.arteEstagio). Como
     agora e um retangulo cheio (nao uma silhueta com fundo transparente
     tipo a montanha), volta a fazer sentido ter moldura: aspect-ratio
     16:9 + object-fit:cover pra recortar certinho, cantos arredondados
     e sombra. Temas sem arte propria (Padrao) nunca chegam aqui -- a
     ceremonia so roda pra Deserto/Floresta/Montanhas. */
  .estagio-tela-preview{
    width:min(280px, calc(100% - 48px)); aspect-ratio:16/9; object-fit:cover;
    border-radius:14px; box-shadow:0 10px 24px -8px rgba(0,0,0,.55);
    image-rendering:pixelated;
  }
  .estagio-tela-sub{
    display:flex; align-items:center; gap:8px;
    font-family:'Silkscreen',monospace; font-size:12px; color:var(--dim); letter-spacing:.04em;
  }
  .estagio-tela-sub-flag{font-size:14px}
  /* Mensagem extra (pedido do usuario) so quando o ULTIMO tema (hoje
     Montanhas) e concluido -- avisa que a partir dai todos os biomas
     ja podem ser escolhidos livremente arrastando a Arena. */
  .estagio-tela-todos{
    max-width:260px; text-align:center; font-family:'Outfit',sans-serif; font-size:13px;
    color:var(--text); background:color-mix(in srgb, var(--accent) 18%, transparent);
    border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius:12px; padding:10px 14px; line-height:1.4;
  }
  .estagio-tela-continuar{
    margin-top:8px; padding:13px 38px; border:none; border-radius:12px; cursor:pointer;
    background:var(--accent); color:var(--bg); font-family:'Outfit',sans-serif; font-weight:600; font-size:14px;
  }
  .estagio-tela.estagio-tela-saindo{
    transition:opacity .38s ease, transform .38s cubic-bezier(.4,0,.7,.3);
    transform:scale(.92); opacity:0;
  }

  .quedapop{position:fixed;left:50%;top:50%;z-index:96;
            transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;
            transition:transform .25s cubic-bezier(.2,.9,.3,1.2), opacity .22s;
            background:var(--panel-2);border:1px solid var(--perigo);border-radius:18px;
            padding:26px 22px 20px;width:min(280px, calc(100% - 56px));text-align:center;
            box-shadow:0 0 26px -8px var(--perigo)}
  .quedapop.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
  .quedaicone{width:56px;height:56px;margin:0 auto 10px;
              display:flex;align-items:center;justify-content:center}
  .quedaicone img{width:56px;height:56px;image-rendering:pixelated;
                   filter:grayscale(1) brightness(.8)}
  .quedalabel{font-family:'Silkscreen',monospace;font-size:11px;color:var(--perigo);
              letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
  .quedatitulo{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:23px;
               font-weight:600;color:var(--text);line-height:1.2;margin-bottom:10px}
  .quedaperda{font-family:'Outfit',sans-serif;font-size:12.5px;color:var(--muted);
              margin-bottom:16px}
  .quedaperda b{color:var(--gold);font-weight:700}
  .quedaok{width:100%;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;
           padding:11px;border-radius:11px;border:none;background:var(--accent);
           color:var(--bg);cursor:pointer}

/* ===== Bloco style #28 ===== */
.atributospontos{margin-top:14px}
  .atrhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  .atrhead b{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--text)}
  .atrpill{font-family:'Silkscreen',monospace;font-size:11px;color:var(--bg);
           background:var(--accent);padding:4px 10px;border-radius:999px}

  /* cartao por atributo -- fechado (previa) por padrao: so icone/nome/valor,
     cor do atributo (--atr-cor) so como acento no icone, nao fundo inteiro
     (era chapado demais, pedido explicito do usuario pra ficar mais discreto).
     Corpo com descricao + botao de investir fica escondido ate tocar na
     barra, revelado via classe .aberto (ver JS logo abaixo). */
  .atrcard{border-radius:14px;overflow:hidden;background:var(--panel-2);
           border:1px solid var(--line);margin-bottom:10px}
  .atrcard.trava{opacity:.55}
  .atrbarra{display:flex;align-items:center;gap:10px;padding:12px 13px;
            cursor:pointer;-webkit-tap-highlight-color:transparent}
  .atricone{width:18px;height:18px;flex:none;color:var(--atr-cor)}
  .atrnome{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;flex:1;color:var(--text)}
  .atrvalor{font-family:'Silkscreen',monospace;font-size:14px;color:var(--atr-cor)}
  .atrchevron{width:16px;height:16px;flex:none;color:var(--dim);transition:transform .2s ease}
  .atrcard.aberto .atrchevron{transform:rotate(180deg)}
  .atrcorpo{display:flex;align-items:center;justify-content:space-between;gap:10px;
            padding:0 13px;max-height:0;overflow:hidden;
            transition:max-height .22s ease,padding .22s ease}
  .atrcard.aberto .atrcorpo{max-height:80px;padding:0 13px 13px}
  .atrdesc{font-family:'Outfit',sans-serif;font-size:11.5px;color:var(--dim)}
  .atrmais{width:34px;height:34px;flex:none;border-radius:10px;border:1px solid var(--accent-dim);
           background:transparent;color:var(--accent);font-size:18px;font-weight:600;cursor:pointer;
           font-family:'Outfit',sans-serif;line-height:1}
  .atrmais:hover{background:var(--accent-dim)}
  .atrmais:disabled{opacity:.35;cursor:not-allowed;background:transparent}

  /* atrcard2: redesign sem acordeao (pedido do usuario) -- tudo sempre
     visivel (nome/valor, descricao, barra de progresso, botao +), nada
     escondido atras de clique. Os 3 atributos tem o mesmo teto (30%) e
     mesmo custo por ponto (2%), entao a barra usa bonus/TETO direto (ver
     JS em renderAtributosPontos). */
  .atrcard2{border-radius:14px;background:var(--panel-2);border:1px solid var(--line);
            padding:12px 13px;margin-bottom:10px}
  .atrcard2-topo{display:flex;align-items:center;gap:10px;margin-bottom:4px}
  .atrcard2-topo .atricone{width:18px;height:18px;flex:none;color:var(--atr-cor)}
  .atrcard2-topo .atrnome{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;flex:1;color:var(--text)}
  .atrcard2-topo .atrvalor{font-family:'Silkscreen',monospace;font-size:14px;color:var(--atr-cor)}
  .atrcard2 .atrdesc{display:block;font-family:'Outfit',sans-serif;font-size:11.5px;color:var(--dim);margin-bottom:10px}
  .atrcard2-linha{display:flex;align-items:center;gap:10px}
  .atrbarrafundo{flex:1;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
  .atrbarrafill{height:100%;border-radius:4px;background:var(--atr-cor);width:0%;
                transition:width .25s ease}
  .atrmais2{width:30px;height:30px;flex:none;border-radius:9px;border:1px solid var(--atr-cor);
            background:transparent;color:var(--atr-cor);font-size:17px;font-weight:600;cursor:pointer;
            font-family:'Outfit',sans-serif;line-height:1}
  .atrmais2:hover{background:var(--atr-cor);color:var(--bg)}
  .atrmais2:disabled{opacity:.35;cursor:not-allowed;background:transparent;color:var(--atr-cor)}

/* ===== Bloco style #29 ===== */
.lvlitem{display:flex;align-items:center;gap:10px;margin:12px 0;padding:10px 12px;
    background:#1F1930;border:1px solid #332A4D;border-radius:12px}
  .lvlitembox{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center}
  .lvlitemtxt{font-family:'Outfit',sans-serif;font-size:12.5px;color:#B3A8D4;line-height:1.35}
  .lvlitemtxt b{color:#5AE0D8}

  .grimOverlay{position:fixed;inset:0;z-index:70;background:#15111F;display:none;
    flex-direction:column;overflow:hidden}
  .grimOverlay.on{display:flex}
  .grimHead{display:flex;align-items:center;justify-content:space-between;
    padding:16px 16px 10px;border-bottom:1px solid #332A4D;flex:none}
  .grimHead h2{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;
    font-size:22px;color:#EFEAFB;margin:0}
  .grimFechar{width:40px;height:40px;border-radius:10px;background:#201A32;border:1px solid #332A4D;
    color:#EFEAFB;font-size:20px;line-height:1;cursor:pointer;flex:none}
  .grimSub{padding:8px 16px;font-family:'Outfit',sans-serif;font-size:12px;color:#7C7196;flex:none}
  .grimScroll{flex:1;overflow-y:auto;padding:6px 16px 24px}
  .grimGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  @media(min-width:420px){ .grimGrid{grid-template-columns:repeat(5,1fr)} }
  .grimcel{aspect-ratio:1;border-radius:10px;background:#201A32;border:1px solid #332A4D;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px;overflow:hidden}
  .grimcel.grimok{cursor:pointer}
  .grimcel .grimrar{font-family:'Outfit',sans-serif;font-size:9px;font-weight:700;
    text-transform:uppercase;letter-spacing:.03em}
  .grimsilhueta{filter:brightness(0);opacity:.32}

/* ===== Bloco style #30 ===== */
.conqcat{margin-bottom:32px}

  .conqcabecalho{display:flex;align-items:center;gap:11px;margin-bottom:16px}
  .conqcaticone{width:34px;height:34px;flex:none;border-radius:50%;display:flex;align-items:center;
                justify-content:center;background:var(--conqcat-cor);color:#1A1526}
  .conqcaticone svg{width:18px;height:18px}
  .conqcattxt{flex:1;min-width:0}
  .conqcatnome{font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;color:var(--conqcat-cor)}
  .conqcatsub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

  /* CONQUISTAS V2 -- lista plana (Minhas conquistas / Não desbloqueadas), sem
     arvore/tiers visiveis. Reaproveita .edsec (rotulo de secao, ja usado
     em Config) pros dois cabecalhos. */
  .conqv2item{display:flex;align-items:center;gap:12px;padding:11px 2px;
              border-bottom:1px solid var(--line)}
  .conqv2item:last-child{border-bottom:none}
  .conqv2txt{flex:1;min-width:0}
  .conqv2nome{font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:700;color:var(--text)}
  .conqv2item.trancado .conqv2nome{color:var(--muted)}
  .conqv2desc{font-family:'Outfit',sans-serif;font-size:11.5px;color:var(--dim);margin-top:2px}
  .conqv2data{font-family:'Silkscreen',monospace;font-size:9.5px;color:var(--dim);flex:none;white-space:nowrap}
  .conqcatcontagem{font-family:'Silkscreen',monospace;font-size:13px;letter-spacing:.02em;color:var(--muted);flex:none}
  .conqcatcontagem b{color:var(--conqcat-cor)}

  .conqtrilha{position:relative;padding-left:38px}

  .conqmarco{position:relative;padding-bottom:20px}
  .conqmarco:last-child{padding-bottom:0}
  .conqmarco::before{content:'';position:absolute;left:-25px;top:26px;bottom:-2px;width:2px;background:var(--line)}
  .conqmarco:last-child::before{display:none}
  .conqmarco.feito::before,.conqmarco.pendente::before{background:var(--conqcat-cor)}

  .conqno{position:absolute;left:-38px;top:0;width:26px;height:26px;border-radius:50%;
          display:flex;align-items:center;justify-content:center;flex:none;
          background:var(--panel-2);border:2px solid var(--line)}
  .conqno svg{width:12px;height:12px;color:var(--dim);opacity:.5}
  .conqmarco.feito .conqno{border-color:var(--conqcat-cor);background:var(--conqcat-cor)}
  .conqmarco.feito .conqno svg{color:#1A1526;width:13px;height:13px;opacity:1}
  .conqmarco.atual .conqno{border-color:var(--conqcat-cor)}
  .conqmarco.pendente .conqno{border-color:var(--conqcat-cor);background:var(--conqcat-cor);
                               animation:conqPulsa 1.6s ease-in-out infinite}
  .conqmarco.pendente .conqno svg{color:#1A1526;width:14px;height:14px;opacity:1}
  @keyframes conqPulsa{
    0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--conqcat-cor) 45%, transparent)}
    50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--conqcat-cor) 0%, transparent)}
  }

  .conqcorpo{padding-top:1px}
  .conqmnome{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:var(--text);letter-spacing:.01em}
  .conqmarco.bloq .conqmnome{color:var(--muted)}
  .conqreq{font-family:'Outfit',sans-serif;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
  .conqmarco.bloq .conqreq{color:var(--dim)}
  .conqfracao{font-family:'Silkscreen',monospace;font-size:13px;letter-spacing:.02em;color:var(--conqcat-cor);margin-top:6px;display:inline-block}

  .conqxpprevia{font-family:'Outfit',sans-serif;font-size:11px;color:var(--dim);margin-top:5px;display:inline-block}
  .conqxpfeito{font-family:'Outfit',sans-serif;font-size:11px;color:var(--conqcat-cor);margin-top:5px;display:inline-block}
  .conqreceber{margin-top:8px;font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:700;
               padding:8px 14px;border-radius:999px;border:none;cursor:pointer;
               background:var(--conqcat-cor);color:#1A1526}

  .conqtudo{display:block;width:100%;margin-bottom:18px;padding:13px;border:none;border-radius:14px;
            cursor:pointer;background:var(--accent);color:var(--bg);
            font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;text-align:center}

  /* balaozinho de notificacao -- injetado via JS em cima do botao da
     sub-aba Conquistas e do botao "Perfil" da nav inferior */
  .conqbadge{position:absolute;top:2px;right:8px;min-width:16px;height:16px;padding:0 4px;
             border-radius:999px;background:var(--perigo,#F45781);color:#fff;
             font-family:'Silkscreen',monospace;font-size:9px;
             display:none;align-items:center;justify-content:center;
             box-shadow:0 0 0 2px var(--panel-2)}

/* ===== Bloco style #31 ===== */
.bestsub{font-family:'Outfit',sans-serif;font-size:12px;color:var(--dim);margin-bottom:10px}
  .bestgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .bestcel{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
           padding:8px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:4px}
  .bestimg{width:36px;height:36px;image-rendering:pixelated;object-fit:contain}
  .bestimg.bestsilhueta{filter:brightness(0);opacity:.32}
  .bestnome{font-family:'Outfit',sans-serif;font-size:8.5px;font-weight:600;color:var(--muted);
            text-align:center;line-height:1.2;max-width:100%;overflow:hidden;
            text-overflow:ellipsis;white-space:nowrap}

/* ===== Bloco style #32 ===== */
.histOverlay{position:fixed;inset:0;z-index:70;background:var(--bg);display:none;
    flex-direction:column;overflow:hidden}
  .histOverlay.on{display:flex}
  .histHead{display:flex;align-items:center;justify-content:space-between;
    padding:16px 16px 10px;border-bottom:1px solid var(--line);flex:none}
  .histHead h2{font-family:'Outfit',sans-serif;font-weight:700;font-size:18px;color:var(--text);margin:0}
  .histFechar{width:40px;height:40px;border-radius:10px;background:var(--panel-2);
    border:1px solid var(--line);color:var(--text);font-size:20px;line-height:1;cursor:pointer;flex:none}
  .histScroll{flex:1;overflow-y:auto;padding:16px}

  .calnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .calnav button{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
                 background:var(--panel-2);color:var(--text);font-size:18px;cursor:pointer;
                 font-family:'Outfit',sans-serif;line-height:1}
  .calnav button:hover{background:var(--accent-dim)}
  .calnav span{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;color:var(--text);
               text-transform:capitalize}

  .caldiassemana{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
  .caldiassemana span{font-family:'Outfit',sans-serif;font-size:10px;font-weight:600;
                       color:var(--dim);text-align:center}

  .calgrade{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:14px}
  .caldia{aspect-ratio:1;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);
          display:flex;align-items:center;justify-content:center;position:relative;
          font-family:'Outfit',sans-serif;font-size:11px;color:var(--muted)}
  .caldia.calvazio{background:transparent;border-color:transparent}
  .caldia.calhoje{border-color:var(--accent);border-width:2px}
  .caldia.calvitoria{background:rgba(99,201,154,.18);border-color:var(--verde);color:var(--text)}
  .caldia.calfuga{background:rgba(244,87,129,.16);border-color:var(--perigo);color:var(--text)}
  .caldia.calsemtarefa{background:var(--panel-3);border-color:var(--line);color:var(--dim)}

  .callegenda{display:flex;gap:14px;flex-wrap:wrap;font-family:'Outfit',sans-serif;
              font-size:11px;color:var(--dim)}
  .callegenda span{display:flex;align-items:center;gap:5px}
  .calponto{width:9px;height:9px;border-radius:50%;flex:none}
  .calponto.calvitoria{background:var(--verde)}
  .calponto.calfuga{background:var(--perigo)}
  .calponto.calsemtarefa{background:var(--dim)}

/* ===== Bloco style #33 ===== */
/* fundo = tijolo pixel (padrao de alvenaria, ver pintarParede() no
     script abaixo) + o sprite fixo do Grimorio Proibido flutuando ao lado
     do titulo, so de enfeite. */
  .intro.loginBg{background-color:#0B0710}
  .loginSprite{margin:0 auto 4px;animation:respira 2.4s ease-in-out infinite}

  /* cada elemento do formulario se destaca sozinho em cima do tijolo
     (campo com fundo solido + icone, botao Entrar preenchido, sombra
     de texto nos labels/links) */
  /* v4.120: #passoLogin ganha padding-top reservando o espaco onde o
     cenario real (Montanhas) fica -- a imagem em si NAO mora mais aqui
     dentro (ver #introCenario/.fundoGradCamada, camadas fixas irmas de
     .card, mais abaixo neste arquivo) porque #passoLogin vira
     .carrosselSlide e leva transform durante o swipe, o que cortava a
     imagem quando ela era filha daqui. */
  /* justify-content:flex-start (em vez do "center" herdado de
     .carrosselSlide) -- com .loginEscolha (tela de escolha, curta) o
     center deixava uma folga enorme entre o cenario e o conteudo; o
     mockup mostra o conteudo colado logo abaixo do cenario. */
  /* FIX (v4.123, pedido do usuario com print): o mockup usa
     .cenarioTopo{height:56%} DENTRO do .telafone (o "celular" em
     miniatura do mockup, 230px de largura so pra visualizacao lado a
     lado) -- eu tinha portado o valor em PIXEL (150px) sem escalar pra
     tela real, o que deixava o cenario minusculo e desproporcional (por
     isso a "escala" parecia errada -- nao eram os botoes em si, era o
     cenario ocupando so ~18% da tela em vez de mais da metade). Troca
     pra vh, proporcional a tela de verdade, igual o mockup pretendia. */
  /* FIX (v4.128, bug relatado pelo usuario com video do Habitica): o
     padding-top:52vh SOMAVA com a altura do conteudo (.loginEscolha,
     ~228px) -- em celular de verdade, com a barra de endereco do Chrome
     visivel, a altura util da viewport fica bem menor que window.innerHeight
     usado pelo "vh" do CSS. Resultado: 52vh + conteudo ultrapassava a
     tela e #intro (overflow-y:auto) forcava scroll so pra ver os botoes
     -- exatamente o que o Habitica NUNCA faz (o video mostra os botoes
     sempre visiveis, sem arrastar nada). #passoLogin (.carrosselSlide)
     ja tem inset:0 (altura = 100% do espaco disponivel de verdade, nunca
     maior que a tela) -- entao troca o padding-top fixo por
     justify-content:flex-end: sem nenhuma reserva de espaco em vh, o
     conteudo so gruda no fundo do espaco que sobrou, adaptando sozinho a
     qualquer altura de tela/barra do navegador, sem jamais estourar. */
  #passoLogin.carrosselSlide{justify-content:flex-end}
  .loginEscolha{margin-top:18px;margin-bottom:8px}
  #passoLogin .titulo{font-family:'Silkscreen',monospace !important;color:#F2A65A !important;
                       font-size:19px !important;letter-spacing:1px !important;
                       text-transform:none !important;font-style:normal !important;
                       text-shadow:0 2px 10px rgba(0,0,0,.85)}
  #passoLogin .campo label{text-shadow:0 1px 4px rgba(0,0,0,.85)}
  .campoIcone{position:relative}
  .campoIc{position:absolute;left:14px;bottom:13px;width:20px;height:20px;color:var(--dim);pointer-events:none}
  .campoIc svg{width:100%;height:100%}
  .campoIcone input{padding-left:44px !important}
  .campoStatus{position:absolute;right:14px;bottom:13px;width:20px;height:20px;pointer-events:none;display:none}
  .campoStatus svg{width:100%;height:100%}
  .campoStatus .icOk,.campoStatus .icErro{display:none}
  .campoStatus.ok{display:block;color:#4ADE80}
  .campoStatus.ok .icOk{display:block}
  .campoStatus.erro{display:block;color:var(--perigo)}
  .campoStatus.erro .icErro{display:block}
  #loginSenha, #loginSenhaConfirmar{padding-right:40px !important}

  /* botao Entrar: o onboarding padrao usa contorno vazado (ver regra
     global .primario mais acima no arquivo), mas em cima do tijolo
     isso some -- aqui, so dentro do login, ele fica preenchido/solido */
  #passoLogin .primario{background:var(--accent) !important;color:#14101c !important;
                         border:none !important;text-transform:none !important;letter-spacing:normal !important;
                         font-size:15px !important;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.45);
                         border-radius:999px !important}
  #passoLogin .loginGoogleBtn{border-radius:999px}
  #passoLogin .primario:hover{background:var(--accent) !important;filter:brightness(1.08)}
  #passoLogin .secundario,#passoLogin .loginLink,#passoLogin .loginRodape,#passoLogin .loginDivisor{
    text-shadow:0 1px 4px rgba(0,0,0,.85)}

  /* v4.121: tela de escolha (1a tela do login, igual ao mockup) -- so
     wordmark+tagline+2 botoes+link. O formulario completo (email/senha/
     cadastro, ja existente, zero mudanca de logica) fica em
     .loginFormWrap, escondido ate a pessoa escolher "Continuar com
     email" ou "Entrar" (ver JS logo apos o insertAdjacentHTML). */
  .loginEscolha{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
                width:100%;padding:0 4px}
  .loginEscolha .marca{margin-bottom:0}
  .loginEscolha .titulo{font-size:26px !important}
  .loginEscolhaTagline{font-size:15px;color:var(--dim);text-shadow:0 1px 4px rgba(0,0,0,.85);margin-top:-4px}
  /* FIX (v4.123): os botoes de escolha (CTA principal da tela) reusam
     .loginGoogleBtn, mas com padding/fonte proprios, maiores que o botao
     Google "de dentro" do formulario (.loginFormWrap .loginGoogleBtn,
     intocado) -- no mockup esses 2 botoes sao o elemento dominante da
     tela, nao um botao secundario pequeno. */
  .loginEscolha .primario,.loginEscolha .loginGoogleBtn{width:100%;padding:17px;font-size:16.5px}
  /* v4.132 (pedido do usuario, print do Habitica: "copiar exatamente
     assim"): la os DOIS botoes (Google e email) sao pilulas BRANCAS
     identicas -- so o icone muda (G colorido vs. envelope colorido).
     Removido o fundo roxo-escuro que esse botao tinha antes -- agora
     so herda o branco/texto escuro padrao de .loginGoogleBtn, igual
     ao de cima. O icone virou o emoji nativo "📧" (span.loginEmailEmoji,
     ver #passoLogin no <script>) em vez de um SVG monocromatico --
     e exatamente o que renderiza colorido feito no Habitica. */
  .loginGoogleBtn.email .loginEmailEmoji{font-size:19px;line-height:1}
  .loginEscolha .loginRodape{font-size:14px;margin-top:2px}
  .loginFormWrap{display:flex;flex-direction:column;gap:18px}
  /* v4.129: transicao escolha->form (ver abrirFormLogin() no <script>
     do #passoLogin) -- desliza+fade em vez da troca seca de display */
  .loginEscolha,.loginFormWrap{transition:opacity .26s ease,transform .26s ease}
  .loginEscolha.loginSlideOut{opacity:0;transform:translateX(-26px)}
  .loginFormWrap.loginSlideIn{opacity:0;transform:translateX(26px)}
  /* v4.131: reverso (voltar do form pra escolha, ver
     window.voltarParaEscolhaLogin) -- direcoes trocadas de proposito
     (form sai pela DIREITA por onde entrou, escolha entra pela
     ESQUERDA por onde saiu) pra parecer uma navegacao "pra tras" de
     verdade, nao a mesma animacao tocada ao contrario */
  .loginFormWrap.loginSlideOut{opacity:0;transform:translateX(26px)}
  .loginEscolha.loginSlideIn{opacity:0;transform:translateX(-26px)}
  /* v4.131 (pedido do usuario, print do Habitica): o formulario de
     email nao precisa repetir o botao Google/divisor "ou" -- a tela de
     escolha (.loginEscolha) ja oferece Google, e voltar pra ela agora
     e so apertar a seta (ver window.voltarParaEscolhaLogin). Mantido
     no DOM (nao removido) porque loginEscolhaGoogle.onclick ainda
     dispara um .click() nele por baixo dos panos -- so escondido
     visualmente aqui. */
  #loginFormWrap #loginGoogleBtn,#loginFormWrap .loginDivisor{display:none}

  .loginTopBtns{position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;
                display:flex;gap:8px;z-index:90}
  .miniBtn{width:34px;height:34px;border-radius:50%;background:rgba(21,17,32,.72);
           border:1px solid var(--line);color:var(--muted);display:grid;place-items:center;
           cursor:pointer;backdrop-filter:blur(2px);transition:border-color .15s,color .15s}
  .miniBtn:hover{border-color:var(--accent-dim);color:var(--accent)}
  .miniBtn svg{width:17px;height:17px}

  #passoLogin .marca{margin-bottom:2px}
  .loginModo{font-size:14px;color:var(--dim);text-shadow:0 1px 4px rgba(0,0,0,.85);
             transition:opacity .15s}
  .loginDivisor{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:12px}
  .loginDivisor::before,.loginDivisor::after{content:'';flex:1;height:1px;background:var(--line)}
  .loginGoogleBtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
                  background:#fff;color:#1A1526;border:none;border-radius:11px;padding:13px;
                  font-family:'Outfit',sans-serif;font-size:14.5px;font-weight:600;cursor:pointer}
  .loginGoogleBtn svg{width:18px;height:18px}
  .loginLinha{display:flex;justify-content:space-between;align-items:center}
  .loginLink{background:none;border:none;color:var(--accent);font-family:'Outfit',sans-serif;
             font-size:12.5px;cursor:pointer;padding:4px 0}
  .loginRodape{text-align:center;font-size:13px;color:var(--dim)}
  /* aceite de Termos/Privacidade: cartao translucido + checkbox custom */
  .loginAceite{display:flex;align-items:center;gap:12px;font-family:'Outfit',sans-serif;font-size:13.5px;line-height:1.4;color:#D5D8DE;text-align:left;
    margin:4px 0;padding:12px 14px;border-radius:14px;cursor:pointer;-webkit-tap-highlight-color:transparent;
    background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.16);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-shadow:0 1px 3px rgba(0,0,0,.6);
    transition:border-color .18s,background .18s}
  .loginAceite input{flex:none;appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:0;border-radius:7px;cursor:pointer;
    border:2px solid rgba(255,255,255,.45);background:rgba(0,0,0,.25) center/16px no-repeat;
    transition:background-color .15s,border-color .15s,transform .15s}
  .loginAceite input:checked{background-color:var(--accent);border-color:var(--accent);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191919' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
  .loginAceite input:active{transform:scale(.9)}
  .loginAceite:has(input:checked){border-color:var(--accent);background:rgba(255,255,255,.1)}
  .loginAceite a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
  .loginAceiteNota{display:none;margin:6px 0;font-family:'Outfit',sans-serif;font-size:12.5px;line-height:1.4;color:#D5D8DE;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.6)}
  .loginAceiteNota.on{display:block}
  .loginAceiteNota a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
  .loginAceite.erro{border-color:#F45781;background:rgba(244,87,129,.14);animation:aceiteErro .45s}
  .loginAceite.erro input{border-color:#F45781}
  @keyframes aceiteErro{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
  .loginSenhaErro{font-size:12px;color:var(--perigo);margin-top:-8px}

  #passoBoasVindas{align-items:center;text-align:center;gap:28px}
  #passoBoasVindas .marca{gap:6px}
  .boasVindasRotulo{font-size:14px;color:var(--dim);text-shadow:0 1px 4px rgba(0,0,0,.85)}
  #boasVindasNome{font-size:30px;font-family:'Outfit',sans-serif;font-weight:700;
                  letter-spacing:normal;text-shadow:0 2px 10px rgba(0,0,0,.85)}
  #passoBoasVindas .primario{width:100%}

  /* v4.124 (item 34 do roadmap): trava de verificacao de email */
  /* v4.129 (tela estava poluida): .verificarBloco junta a mensagem
     principal + aviso de spam com gap apertado (sao relacionados,
     devem ler como uma unidade mais discreta que o CTA). O gap GRANDE
     (22px, no #passoVerificarEmail) fica ENTRE os grupos, nao dentro
     deles -- e isso que cria a hierarquia.
     v4.132 (poluida de novo, botao "Ja confirmei"/"Verificar agora"
     removido): a checagem virou 100% automatica (poll a cada 4s, ver
     confirmarSeVerificado/confirmarSeVerificadoOverlay no bloco
     Firebase) -- sobrou so "Reenviar email" (agora .primario, e o
     unico CTA que resta) e "Email errado? Corrigir" (link isolado). */
  #passoVerificarEmail{align-items:center;text-align:center;gap:22px}
  #passoVerificarEmail .marca{gap:6px}
  .verificarBloco{display:flex;flex-direction:column;gap:6px}
  .verificarTexto{font-size:14px;color:var(--dim);line-height:1.5;
                   text-shadow:0 1px 4px rgba(0,0,0,.85)}
  .verificarSpamAviso{font-size:12px;color:var(--dim);opacity:.6}
  #verificarEmailAlvo{font-weight:600;color:var(--fg,#fff)}
  #passoVerificarEmail .primario{width:100%}

  /* v4.124: overlay de bloqueio pro caminho "silencioso" (ja tem save
     local, #passoLogin nem existe no DOM) -- standalone, fixed, nao
     depende de #intro/.off. Reaproveita as mesmas classes .primario/
     .verificarBloco ja definidas acima. */
  #bloqueioVerificacaoEmail{position:fixed;inset:0;z-index:9999;
    background:var(--bg);display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;
    gap:22px;padding:32px}
  #bloqueioVerificacaoEmail .titulo{font-size:22px}
  #bloqueioVerificacaoEmail .primario,
  #bloqueioVerificacaoEmail .verificarBloco{width:100%;max-width:340px}

  /* v4.24x (pedido do usuario: loading state "bonequinho correndo" +
     frase tipo "conectando com a masmorra"). z-index 10000 -- 1 acima
     do maior overlay existente (#bloqueioVerificacaoEmail, 9999) --
     pra cobrir QUALQUER tela, inclusive a de login. Escondido por
     padrao (display:none) e so vira flex com .on, pra nao ocupar
     espaco/interceptar clique nenhum enquanto nao esta em uso. */
  /* FIX (pedido do usuario: "tinha que ter uma transição melhor quando a
     animação aparece e quando ela some") -- era display:none/flex seco,
     sem transicao nenhuma (display nao anima). Trocado pro mesmo padrao
     ja usado em .pjDropdown (fade via opacity+visibility, visibility
     atrasada pra so "desligar" depois do fade terminar, sem herdar
     display:none que cortaria a transicao na hora). display:flex fica
     sempre ligado (opacity 0 + pointer-events:none escondem/desativam
     de verdade quando fechado -- zero custo de layout, e' so 1 elemento). */
  .loadingMasmorra{
    display:flex; position:fixed; inset:0; z-index:10000;
    background:var(--bg); flex-direction:column; align-items:center;
    justify-content:center; gap:16px; text-align:center; padding:32px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .25s var(--expo), visibility 0s .25s;
  }
  .loadingMasmorra.on{
    opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity .25s var(--expo), visibility 0s;
  }
  .loadingMasmorraSprite{
    width:56px; height:56px; image-rendering:pixelated;
    animation:loadingMasmorraCorrer .5s ease-in-out infinite;
  }
  @keyframes loadingMasmorraCorrer{
    0%, 100%{ transform:translateY(0) rotate(-4deg); }
    50%{ transform:translateY(-10px) rotate(4deg); }
  }
  .loadingMasmorraTxt{
    font-family:'Silkscreen',monospace; font-size:12px; color:var(--dim);
    letter-spacing:.02em; max-width:280px;
  }
  @media (prefers-reduced-motion: reduce){
    .loadingMasmorraSprite{ animation:none; }
  }

  /* PLANO PRO -- paywall central, tela cheia em 2 etapas (pitch ->
     preco), sem card flutuando. v2 (pedido do usuario, depois de
     comparar varios mockups): visual flat/clean, fonte unica (Outfit,
     Silkscreen so no eyebrow pequeno), paleta Grafite (mesma do resto do
     app), fundo reaproveitando a arte real "Floresta" de TEMAS_ARENA
     (assets.js) com o MESMO gradiente/tecnica do cenario de login (ver
     mostrarCenarioLogin()/#introCenario.modoLogin) -- pintado 1x em
     #pwFlorestaImg dentro de abrirPaywall() (index.html). Etapa 1 virou
     uma trilha vertical (.pwTrilha/.pwPasso) com o passo "Suas tarefas"
     ja concluido; etapa 2 ganhou um monstro real (MONSTROS[31], "Goblin
     fungoso", bioma floresta) sentado em cima do botao "Assinar Plano
     Pro" (.pwMob dentro de .pwCtaWrap). Mesmo padrao de fade (opacity+
     visibility, sem display:none) do .loadingMasmorra logo acima.
     z-index 9500 -- abaixo do loading (10000, so cobre tudo por
     instantes) mas acima de qualquer view/overlay normal do app. */
  :root{
    --pw-accent:#FAFAFA; --pw-panel:#323232; --pw-panel2:#3D3D3D; --pw-line:#5C5C5C; --pw-muted:#D8D8D8;
  }
  .paywallOverlay{
    display:flex; flex-direction:column; position:fixed; inset:0; z-index:9500;
    background:#282828; color:#FAFAFA; overflow:hidden;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:scale(1.03); transform-origin:center;
    transition:opacity .4s var(--expo), transform .4s var(--expo), visibility 0s .4s;
  }
  .paywallOverlay.on{
    opacity:1; visibility:visible; pointer-events:auto; transform:scale(1);
    transition:opacity .4s var(--expo), transform .4s var(--expo), visibility 0s;
  }
  .pwFloresta{ position:absolute; inset:0; z-index:0; overflow:hidden; }
  .pwFloresta img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated;
  }
  .pwFloresta::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(11,7,16,0) 0%,rgba(11,7,16,0) 35%,rgba(11,7,16,.58) 68%,rgba(11,7,16,.94) 100%);
  }
  .pwTopo{
    position:absolute; top:16px; left:0; right:0; z-index:3;
    display:flex; align-items:center; justify-content:space-between; padding:0 16px;
  }
  .pwClose,.pwBack{ background:rgba(0,0,0,.35); border:none; border-radius:8px; color:#FAFAFA; padding:6px; cursor:pointer; }
  .pwClose svg,.pwBack svg{ width:22px; height:22px; }
  .pwBack{ visibility:hidden; }
  .pwBack.on{ visibility:visible; }
  .pwDots{ display:flex; gap:6px; }
  .pwDot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); transition:width .2s var(--expo), background .2s; }
  .pwDot.on{ width:18px; border-radius:4px; background:var(--pw-accent); }

  .pwEtapa{ display:none; position:relative; z-index:2; flex:1; overflow-y:auto; }
  .pwEtapa.on{ display:flex; }
  .pwConteudo{
    display:flex; flex-direction:column; align-items:center; width:100%; height:100%;
    padding:64px 24px 26px;
  }
  /* v2 (pedido do usuario: "parece pequena, não usa a maior parte da
     tela") -- antes .pwConteudo tinha margin:auto 0, que centraliza o
     bloco INTEIRO (header+trilha/planos+CTA) dentro da tela cheia,
     sobrando uma faixa vazia igual em cima e embaixo em telas altas de
     verdade (o preview de 380x780 usado nos testes escondia isso). Agora
     as DUAS etapas ficam ancoradas: header logo abaixo de .pwTopo,
     .pwTrilha/.pwPlanos crescem (flex:1) pra ocupar o espaco que sobra
     -- em vez de virar um blocao centralizado -- e o CTA fica ancorado
     embaixo (.pwSpacer absorve so o resto). */
  .pwSpacer{ flex:1; min-height:20px; }
  .pwEyebrow{
    font-family:'Silkscreen',monospace; font-size:12px; letter-spacing:2.5px;
    color:var(--pw-muted); text-transform:uppercase; text-align:center; margin-bottom:8px;
  }
  .pwHeadline{
    font-family:'Outfit',sans-serif; font-size:27px; font-weight:800; line-height:1.22;
    margin:0 0 10px; text-align:center; color:#FAFAFA;
  }
  .pwHeadlineMenor{ font-size:22px; margin-bottom:0; }
  .pwSub{ font-size:13.5px; color:var(--pw-muted); text-align:center; line-height:1.45; margin:0 0 22px; max-width:290px; }

  .pwTrilha{
    position:relative; width:100%; margin-top:8px;
    flex:4 1 0; min-height:0; display:flex; flex-direction:column; justify-content:space-evenly;
  }
  .pwTrilhaLinha{ position:absolute; left:29px; top:0; bottom:0; width:2px; background:rgba(255,255,255,.2); }
  .pwPasso{ position:relative; display:flex; align-items:center; gap:14px; min-height:70px; }
  .pwPassoNo{
    width:58px; height:58px; border-radius:14px;
    /* pedido do usuario: contraste ruim do icone bloqueado em cima da
       parte clara da arte de fundo (o gradiente .pwFloresta::after so
       escurece perto do rodape). Fundo solido virou vidro escuro com
       blur -- fica legivel em qualquer trecho da imagem, nao so nos
       mais escuros. */
    background:rgba(10,10,10,.55); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
    border:1px solid rgba(255,255,255,.16); box-shadow:0 4px 14px rgba(0,0,0,.3);
    flex:none; display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
  }
  .pwPasso.on .pwPassoNo{ background:var(--pw-accent); border-color:var(--pw-accent); box-shadow:none; }
  .pwPassoNo svg{ width:24px; height:24px; color:var(--pw-muted); }
  .pwPasso.on .pwPassoNo svg{ color:#1C1C1C; }
  .pwPassoTxt b{ display:block; font-size:14px; font-weight:700; color:#fff; }
  .pwPassoTxt span{ display:block; font-size:10.5px; color:var(--pw-muted); margin-top:2px; }

  .pwPlanos{
    display:flex; flex-direction:column; justify-content:center; gap:14px; width:100%; margin:22px 0 6px;
    flex:4 1 0; min-height:0;
  }
  .pwPlano{
    position:relative; border-radius:14px; padding:15px 16px; cursor:pointer;
    /* pedido do usuario: mesmo vidro escuro com blur do .pwPassoNo
       (contraste contra a arte de fundo), aplicado aqui nos cards de
       plano. */
    background:rgba(10,10,10,.55); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
    border:1.5px solid rgba(255,255,255,.16); box-shadow:0 4px 14px rgba(0,0,0,.3);
  }
  .pwPlano.sel{ border-color:var(--pw-accent); background:rgba(30,30,30,.65); }
  .pwPlanoRow{ display:flex; align-items:center; width:100%; gap:12px; }
  .pwPlanoInfo{ display:flex; flex-direction:column; gap:3px; flex:1; }
  .pwPlanoNome{ font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; }
  .pwPlanoSub{ font-size:12px; color:var(--pw-muted); }
  .pwPopular{
    position:absolute; top:-9px; left:16px; background:var(--pw-accent); color:#1C1C1C; font-size:8.5px;
    font-weight:800; letter-spacing:.04em; padding:2px 8px; border-radius:999px; text-transform:uppercase;
  }
  .pwBadge{
    position:absolute; top:-10px; right:14px; background:#1C1C1C; border:1.5px solid var(--pw-accent);
    color:var(--pw-accent); font-size:11px; font-weight:800; letter-spacing:.02em; padding:3px 10px; border-radius:999px;
  }
  .pwPlanoPreco{ font-size:18px; font-weight:800; text-align:right; white-space:nowrap; }
  /* FIX: era ".pwPlanoPreco span" (generico) -- certo enquanto o unico
     span aqui dentro era o "/mes". Depois que o proprio numero do preco
     virou span tambem (pra poder traduzir R$17,90 -> R$17.90 sem perder
     o "/mes" ao lado, ver data-i18n="pro.precoMensal"/"pro.precoAnual"),
     essa regra generica passou a encolher o preco JUNTO -- ficava
     pequeno feito o "/mes". Classe .pwPlanoUnidade restringe o estilo
     pequeno/discreto so pro rotulo de unidade mesmo. */
  .pwPlanoPreco .pwPlanoUnidade{ display:block; font-size:10.5px; font-weight:400; color:var(--pw-muted); }
  .pwRadio{
    width:21px; height:21px; border-radius:50%; border:2px solid var(--pw-line); flex:none;
    display:grid; place-items:center;
  }
  .pwPlano.sel .pwRadio{ border-color:var(--pw-accent); background:var(--pw-accent); }
  .pwPlano.sel .pwRadio::after{
    content:''; width:9px; height:7px; border-left:2.5px solid #1C1C1C; border-bottom:2.5px solid #1C1C1C;
    transform:rotate(-45deg) translate(1px,-1px);
  }

  .pwMicro{ display:flex; align-items:center; justify-content:center; gap:7px; font-size:12.5px; color:var(--pw-muted); margin:16px 0 14px; }
  .pwMicro svg{ width:14px; height:14px; color:var(--pw-accent); }

  /* Linha "Termos e Condições · Privacidade · Restaurar compras" embaixo
     do CTA (pedido do usuario, mesmo padrao do Skillion: 3 links
     discretos, sublinhados, separados por ponto). Termos/Privacidade
     abrem o site real em nova aba (href setado por JS, mesma logica de
     idioma de atualizarLinksLegais() em Config -- ver
     atualizarLinksLegaisPaywall() perto dela); "Restaurar compras" ainda
     e' so um aviso ("em breve"), mesmo estagio de iniciarCompraAssinatura(). */
  .pwLegal{
    display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
    font-family:'Outfit',sans-serif; font-size:11px; color:var(--pw-muted);
    margin:10px 0 0; text-align:center;
  }
  .pwLegal a, .pwLegal button{
    background:none; border:none; padding:0; margin:0; cursor:pointer;
    font-family:inherit; font-size:inherit; color:var(--pw-muted);
    text-decoration:underline; text-underline-offset:2px;
  }
  .pwLegal .pwLegalDot{ color:var(--pw-muted); opacity:.6; }

  .pwCtaWrap{ position:relative; width:100%; margin-top:38px; }
  .pwMob{
    position:absolute; left:78%; bottom:100%; transform:translateX(-50%) scaleX(-1);
    width:60px; height:60px; margin-bottom:-6px; image-rendering:pixelated;
    filter:drop-shadow(0 4px 4px rgba(0,0,0,.55));
  }
  .pwCTA{
    background:var(--pw-accent); color:#1C1C1C; border:none; border-radius:16px; padding:18px;
    font-family:'Outfit',sans-serif; font-size:16.5px; font-weight:800; width:100%; cursor:pointer;
  }
  #pwEtapa1 .pwCTA{ margin-top:28px; }
  .pwCTA:hover{ filter:brightness(1.05); }
  .pwSecundario{
    background:none; border:none; color:var(--pw-muted); font-family:'Outfit',sans-serif;
    font-size:12.5px; text-align:center; padding:12px 2px 0; width:100%; cursor:pointer;
  }
  /* TESTE GRATIS -- botao "Testar gratis" na etapa 2, alternativa a
     assinar direto. Contorno (nao preenchido) pra ficar claramente
     secundario ao .pwCTA principal, mas ainda um botao de verdade (nao
     um link como .pwSecundario) -- e' uma acao concreta, so nao a
     "recomendada". */
  .pwCTASecundaria{
    background:none; border:1.5px solid rgba(255,255,255,.35); color:#FAFAFA; border-radius:16px;
    padding:14px; font-family:'Outfit',sans-serif; font-size:14px; font-weight:700; width:100%;
    cursor:pointer; margin-bottom:10px; transition:transform .12s var(--expo), background .15s;
  }
  .pwCTASecundaria:hover{ background:rgba(255,255,255,.08); }
  .pwCTASecundaria:active{ transform:scale(.97); }

  /* ---------------------------------------------------------------------
     Animacoes do paywall.
     v3 (pedido do usuario: "a animação das coisas aparecendo não ficou
     legal, tira"): removida a cascata pwSobe que fazia CADA elemento
     (eyebrow, headline, passo, plano, CTA...) entrar num timing proprio
     -- ficava "picado". A entrada agora e' UMA coisa so: o fade+leve
     zoom-out do .paywallOverlay inteiro (o cenario de fundo ja aparece
     junto, entao nao tem sentido os filhos ficarem piscando por cima
     depois), no mesmo espirito do reveal do cenario de login/estagio
     (#introCenario, so opacity, ver mais acima) -- calmo, uma unica
     transicao, sem elementos surgindo um a um.
     Transicao entre etapas (Continuar/Voltar) continua com slide
     (pwStepIn/pwStepInVolta) -- isso nao foi reclamado, so a entrada
     inicial "picada".
     --------------------------------------------------------------------- */
  @keyframes pwStepIn{
    from{ opacity:0; transform:translateX(46px) scale(.98); }
    to{ opacity:1; transform:translateX(0) scale(1); }
  }
  @keyframes pwStepInVolta{
    from{ opacity:0; transform:translateX(-46px) scale(.98); }
    to{ opacity:1; transform:translateX(0) scale(1); }
  }
  .pwEtapa.pwStepIn{ animation:pwStepIn .26s var(--expo); }
  .pwEtapa.pwStepInVolta{ animation:pwStepInVolta .26s var(--expo); }

  .pwPlano{ transition:transform .15s var(--expo), border-color .15s, background .15s; }
  .pwPlano:active{ transform:scale(.995); }

  /* pulso ao selecionar -- SO transform+transition, nunca `animation`,
     pra nunca mais colidir com a entrada (ver nota acima). JS (perto de
     selecionarPlano(), index.html) adiciona .pwPulse e remove logo
     depois; a transicao ja declarada em .pwPlano cuida da subida e
     descida sozinha. */
  .pwPlano.pwPulse{ transform:scale(1.012); }

  .pwCTA{ transition:transform .12s var(--expo), filter .15s; }
  .pwCTA:active{ transform:scale(.97); }
  .pwClose,.pwBack{ transition:transform .12s var(--expo); }
  .pwClose:active,.pwBack:active{ transform:scale(.88); }

  @media (prefers-reduced-motion: reduce){
    .paywallOverlay{ transform:none !important; }
    .pwEtapa.pwStepIn,.pwEtapa.pwStepInVolta{
      animation:none !important; opacity:1 !important; transform:none !important;
    }
  }

/* ===== Bloco style #34 ===== */
.carrosselTopo{display:flex;align-items:center;justify-content:space-between}
  .carrosselTopoLado{flex:1;display:flex}
  .carrosselTopoEsq{justify-content:flex-start}
  .carrosselTopoDir{justify-content:flex-end}
  .carrosselVoltar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);
                    border:none;color:var(--text);display:grid;place-items:center;cursor:pointer;
                    visibility:hidden;flex:none}
  .carrosselVoltar.visivel{visibility:visible}
  .carrosselVoltar svg{width:18px;height:18px}
  .carrosselDots{display:flex;gap:7px;flex:none}
  .carrosselDot{width:7px;height:7px;border-radius:50%;background:var(--line)}
  .carrosselDot.on{background:var(--accent)}
  /* v4.117 (item 42-h do roadmap): .carrosselPular removido -- botao
     "Pular" tirado do topo do carrossel (pedido do usuario). O link
     "Ja tem conta?" (abaixo) continua sozinho no lado direito do topo. */
  /* v4.116 (item 42-e do roadmap): login deixou de ser um passo
     numerado do carrossel -- vira um "desvio" opcional, acessivel a
     qualquer momento por este link discreto no topo (persiste em
     TODOS os slides, ao contrario de Pular que some a partir do
     slide 4). Ver irParaLogin()/voltarDoLoginCarrossel() mais abaixo. */
  .carrosselEntrarLink{background:none;border:none;color:var(--accent);font-family:'Outfit',sans-serif;
                        font-size:12px;letter-spacing:.02em;cursor:pointer;padding:8px;flex:none;
                        text-decoration:underline;text-underline-offset:2px}
  .carrosselEntrarLink:hover{filter:brightness(1.2)}

  /* fixed;inset:0 tira o splash do fluxo do .card -- ele nao fica preso
     no max-width:400px/padding que .card usa pro resto do onboarding.
     z-index avaliado dentro do stacking context de #intro (que ja tem
     position:fixed + z-index proprio), entao basta ficar acima de tudo
     o que #intro contem -- nao precisa disputar com o resto da pagina. */
  #passoSplash{position:fixed;inset:0;z-index:1;
               background-image:radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--arena-1) 42%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 65%), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAKCAYAAADVTVykAAABfElEQVR4nJ2TwU7CQBCGvxKMQeCEXojGlMvWIw/AnfIOwh0egYfwpIneQJ4Bn4L22r10SeCoJ0CDJVkvdNPWgsT/srM738x0Z6fWZDKpPwyHdLpdlFK0222yklIyHY3o9HoHmVMUBAFvr6+49/copXBdl6KUkkW0JgxDGo0GUspfgUIInnefKKWwbTuXOUWO4/ASbZjP56ZWAeD6rILrugcD/1vwUJ5kBwsAH6sVUkqEEMbheR6e5xm7tNXYtp3LJLnkmrUBSludqmXd1mp1nQCuKpVUgN5/YJ5q1SrW3l5EGwBuzsosok1qjfW+XgPwdW6Z82K33wdg9PREr9//c8iklIwfH+kOBoRhePTpYn46HnPXagH8yl2Mjcty+eggxhJCUKtWT2Jjfrq38wa4kNz8dZv4RstofRIb84toc7CrpgPL3WcuoLVO7X3fB20Zn2VZeWHpHEd8pgPZ6QSYzWamqO/7ADSbTUrfmiAIcBzHsNm/ITn9F5ncSd8PSsnXJX9WpAwAAAAASUVORK5CYII=");
               background-size:cover, 130px 41px;
               background-repeat:no-repeat, repeat;
               background-position:center, center;
               align-items:center;justify-content:center}
  .carrosselImgWrap{display:flex;justify-content:center;align-items:center;min-height:96px}
  .carrosselImgGrande{width:168px;height:168px;image-rendering:pixelated}
  .carrosselGrupo{gap:12px}
  .carrosselImgMini{width:72px;height:72px;image-rendering:pixelated}

  /* v4.14x: slides 2/3 do onboarding (golpe/bau) -- loop CSS puro,
     reaproveitando os mesmos assets/classes do combate real
     (--spr-slash-comum, --bau-fechado/--bau-aberto, .baucard/.baubox/
     .bautxt/.baunome/.bauraridade ja existentes acima). Sem JS de
     timing: cada ciclo e 100% CSS, nao trava/desincroniza. */
  .obPalco{position:relative;width:100%;height:150px}
  /* v4.134 (pedido do usuario: o golpe demorava pra COMECAR quando a
     pessoa entrava no slide -- 1728ms parado ate o 1o flash, chance
     grande de ja ter passado pro proximo slide sem ver nada). Fix NAO e
     acelerar o ciclo inteiro (isso mudaria o ritmo/duracao do loop de
     verdade, que continua 3.2s) -- e usar animation-delay NEGATIVO pra
     "adiantar" a animacao pro ponto logo antes do golpe (48% de 3.2s)
     assim que o slide fica visivel, entao o 1o flash aparece em ~190ms
     em vez de ~1728ms. Repeticoes seguintes continuam no ritmo normal
     de 3.2s (so a largada e que muda). iniciarCicloGolpe() no JS foi
     ajustado igual, pro popup de moeda+XP continuar sincronizado com o
     flash (ver comentario la, mais abaixo no arquivo). */
  .obHeroSp{position:absolute;left:6%;bottom:0;height:126px;width:auto;
            image-rendering:pixelated;animation:obHeroLunge 3.2s ease-in-out infinite;animation-delay:-1.536s}
  .obMobSp{position:absolute;right:6%;bottom:4px;height:108px;width:auto;
           image-rendering:pixelated;animation:obMobShake 3.2s ease-in-out infinite;animation-delay:-1.536s}
  @keyframes obHeroLunge{
    0%,50%{transform:translateX(0)}
    55%{transform:translateX(12px)}
    62%,100%{transform:translateX(0)}
  }
  @keyframes obMobShake{
    0%,53%{transform:translate(0,0) rotate(0);filter:none}
    56%{transform:translate(-5px,-2px) rotate(-6deg);filter:brightness(0) invert(1)}
    59%{transform:translate(4px,1px) rotate(5deg);filter:brightness(0) invert(1)}
    62%{transform:translate(-2px,0) rotate(-2deg);filter:none}
    66%,100%{transform:translate(0,0) rotate(0);filter:none}
  }
  .obSlashFx{position:absolute;right:22%;bottom:34px;width:56px;height:56px;
             background-image:var(--spr-slash-comum);background-repeat:no-repeat;
             background-size:504px 56px;background-position:0 0;
             filter:grayscale(1) brightness(2.4);image-rendering:pixelated;
             opacity:0;animation:obSlash 3.2s linear infinite;animation-delay:-1.536s}
  @keyframes obSlash{
    0%,53%{opacity:0;background-position:0 0}
    54%{opacity:1;background-position:0 0;animation-timing-function:steps(9)}
    63%{opacity:1;background-position:-504px 0}
    64%,100%{opacity:0}
  }
  .obRecIcon{position:absolute;width:14px;height:14px;opacity:0;pointer-events:none;
             right:24%;bottom:64px;animation:obIconVoo 3.2s ease-in infinite}
  .obRecIcon svg{width:100%;height:100%;image-rendering:pixelated}
  .obRecIcon.xp{animation-delay:.08s}
  @keyframes obIconVoo{
    0%,65%{opacity:0;transform:translate(0,0)}
    67%{opacity:1;transform:translate(0,0)}
    80%{opacity:1;transform:translate(-58%,-30px)}
    81%,100%{opacity:0}
  }
  .obRecompensa{position:absolute;left:8%;bottom:80px;display:flex;flex-direction:column;
                gap:2px;font-size:12px;font-weight:700;opacity:0;pointer-events:none;
                animation:obRecompensaPop 3.2s ease-out infinite}
  .obRecompensa .obMoeda,.obRecompensa .obXp{display:flex;align-items:center;gap:3px}
  .obRecompensa .obMoeda{color:var(--gold)}
  .obRecompensa .obXp{color:var(--text)}
  .obRecompensa svg{width:13px;height:13px;image-rendering:pixelated}
  @keyframes obRecompensaPop{
    0%,80%{opacity:0;transform:translateY(4px)}
    84%{opacity:1;transform:translateY(0)}
    95%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(-6px)}
  }

  .obBauWrap{flex-direction:column;gap:12px;width:100%}
  .obBauImg{width:96px;height:96px;background-size:contain;background-repeat:no-repeat;
            background-position:center;image-rendering:pixelated;
            background-image:var(--bau-fechado);
            animation:obBauAbre 3.4s ease-in-out infinite;animation-delay:-.85s}
  @keyframes obBauAbre{
    0%,29%{background-image:var(--bau-fechado);transform:scale(1)}
    31%{transform:scale(1.08)}
    33%,100%{background-image:var(--bau-aberto);transform:scale(1)}
  }
  .obBauItens{width:100%;max-width:280px;margin:0 auto}
  .obBauItens .baucard{opacity:0;transform:translateY(6px);
                        animation:obBaucardCiclo 3.4s ease infinite;animation-delay:-.85s}
  .obBauItens .baucard:nth-child(2){animation-delay:-.7s}
  @keyframes obBaucardCiclo{
    0%,37%{opacity:0;transform:translateY(6px)}
    45%,92%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(6px)}
  }

  /* v4.15x: redesign visual do onboarding (pedido do usuario) -- dots no
     rodape (perto do botao, nao mais no topo), titulo em Outfit bold
     (nao mais Silkscreen, exceto no wordmark DUNGEONLOG do slide 1 e no
     login, que ficam como estao), botao em pilula translucida. Fundo
     gradiente por slide fica em JS (pintarFundoOnboarding(), reaproveita
     o mesmo mecanismo de intro.style.backgroundImage que pintarParede()
     ja usa) -- via CSS sozinho o gradiente ficaria preso dentro do
     padding do .card/.intro e sobraria uma borda da parede antiga
     (era exatamente o "mistura com a tela antiga" reportado). */
  #passoCarrosselTudo{position:relative}
  .carrosselDots{position:absolute;left:0;right:0;bottom:78px;justify-content:center;pointer-events:none}
  .carrosselSlide:not([data-slide="1"]):not([data-slide="login"]) .titulo{
    font-family:'Outfit',sans-serif !important;font-weight:800 !important;font-size:22px !important;
    letter-spacing:-.01em !important;color:#fff !important;text-transform:none !important;font-style:normal !important}
  .carrosselSlide:not([data-slide="1"]):not([data-slide="login"]) .lema{
    color:rgba(255,255,255,.85) !important;font-style:normal !important;font-family:'Outfit',sans-serif !important}
  .carrosselSlide:not([data-slide="login"]) .primario{
    border-radius:999px !important;background:rgba(0,0,0,.28) !important;color:#fff !important;
    border:none !important;box-shadow:none !important;text-transform:none !important;letter-spacing:normal !important}

  /* headline em 2 linhas (fraca+forte), copia exata do mockup
     (mockup_onboarding_animado.html: .headline .fraca/.forte) -- usado
     so nos slides golpe/bau (SLIDES com campo "fraca" preenchido). */
  .obHeadline{text-align:center;margin-top:4px}
  .obFraca{display:block;font-family:'Outfit',sans-serif !important;font-size:13px !important;
           font-weight:500 !important;opacity:.75;margin-bottom:5px;color:#fff !important;font-style:normal !important}
  .obForte{display:block;font-family:'Outfit',sans-serif !important;font-size:21px !important;
           font-weight:800 !important;letter-spacing:-.01em !important;color:#fff !important;font-style:normal !important}
  .obCorpo{text-align:center;font-size:12.5px;line-height:1.55;opacity:.88;margin-top:12px;
           max-width:260px;margin-left:auto;margin-right:auto;color:#fff;font-family:'Outfit',sans-serif;
           position:relative;z-index:2}
  .obHeadline{position:relative;z-index:2}

  /* slide "estagio": cross-fade entre 2 cenarios reais (TEMAS_ARENA),
     copia exata do mockup (estagioBg/estagioPillDemo). z-index:-1 pra
     ficar atras do headline/corpo (acima) e dos dots/botao (fora do
     .carrosselMeio) sem precisar mexer na stacking order deles. */
  /* v4.120: fundo do onboarding inteiro (gradiente por slide + cenario
     real do estagio/login) virou 2+1 camadas FIXAS, IRMAS de .card
     dentro de #intro -- ver pintarFundoOnboarding()/mostrarCenarioEstagio()/
     mostrarCenarioLogin() no script do carrossel. Antes, tanto o
     gradiente (via inline style em #intro) quanto o cenario real
     (.obEstagioBg, filha do .carrosselSlide) tentavam bleedar com margem
     negativa calculada a mao pra compensar os paddings de .intro/.card --
     so que .carrosselSlide leva transform durante o swipe (deslizar()),
     o que quebra esse calculo e cortava a imagem no topo (bug relatado
     pelo usuario). Camadas fixas, fora do elemento que anima, resolvem
     os dois problemas de uma vez: bleed sempre exato relativo a
     viewport, e a troca de gradiente agora cross-fadeia (opacity
     transition) em vez de trocar na hora.
     fundoGradCamada = 2 camadas empilhadas pro gradiente por slide
     (crossfade); introCenario = cenario real (estagio: cross-fade
     deserto/montanhas; login: montanhas estatica, so o topo). */
  .fundoGradCamada{position:fixed;inset:0;z-index:-1;background-size:cover;
    background-repeat:no-repeat;background-position:center;
    opacity:0;transition:opacity .45s ease;pointer-events:none}
  #introCenario{position:fixed;left:0;right:0;top:0;bottom:0;z-index:-1;
    overflow:hidden;opacity:0;transition:opacity .35s ease;pointer-events:none}
  /* v4.130 (pedido do usuario, com prints do Habitica): ANTES o modoLogin
     limitava o cenario a 52vh (so um "banner" no topo, resto da tela em
     cor solida #0B0710 -- ver irParaLogin()). O Habitica cobre a tela
     INTEIRA com a arte (montanha+castelo) e o conteudo (marca, campos,
     botoes) flutua por cima dela do topo ao rodape, sem nenhuma faixa
     solida separada. Tirando este override o modoLogin passa a herdar o
     inset:0 (tela cheia) que o modoEstagio ja usa -- mesmo mecanismo,
     so muda o gradiente de escurecimento abaixo. */
  #introCenario.ativo{opacity:1}
  #introCenario .cenarioImg{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;image-rendering:pixelated;opacity:0}
  #introCenario.modoEstagio .cenarioImg{animation:obEstagioFade 3.2s ease-in-out infinite}
  #introCenario.modoEstagio .cenarioImg.dois{animation-delay:-1.6s}
  #introCenario.modoLogin .cenarioImg{opacity:1;animation:none}
  #introCenario::after{content:'';position:absolute;inset:0}
  #introCenario.modoEstagio::after{
    background:linear-gradient(180deg,rgba(10,8,14,.35) 0%,rgba(10,8,14,.55) 55%,rgba(10,8,14,.88) 100%)}
  /* v4.130: gradiente recalibrado pra tela cheia -- topo (~35%) fica
     limpo pra mostrar o ceu/montanha como no Habitica, escurece a
     partir da metade pra garantir contraste dos campos/botoes que
     flutuam perto do rodape (#passoLogin usa justify-content:flex-end). */
  #introCenario.modoLogin::after{
    background:linear-gradient(180deg,rgba(11,7,16,0) 0%,rgba(11,7,16,0) 35%,rgba(11,7,16,.58) 68%,rgba(11,7,16,.94) 100%)}
  @keyframes obEstagioFade{0%,45%{opacity:1}55%,100%{opacity:0}}
  .obEstagioPill{position:relative;z-index:2;display:flex;flex-direction:column;
                 align-items:center;gap:6px;margin-bottom:4px}
  .obEstagioPill .obLbl{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;opacity:.75;color:#fff}
  .obEstagioPill .obNum{font-family:'Silkscreen',monospace;font-size:22px;color:#fff;
                         text-shadow:0 2px 8px rgba(0,0,0,.5)}

  /* trio escalonado do slide 1 (marca) -- igual a foto de referencia:
     sprite do meio maior/na frente, laterais menores/atras, um pouco
     mais baixos, sobrepondo o do meio. align-items:flex-end + tamanhos
     diferentes ja produz o efeito "meio mais alto" sem precisar de
     posicionamento absoluto nem numeros de offset vertical manuais. */
  .carrosselTrioLogo{display:flex;justify-content:center;align-items:flex-end;margin:12px 0}
  .carrosselTrioLogo img{image-rendering:pixelated;position:relative}
  .carrosselTrioLogo .ctlCentro{width:160px;height:160px;z-index:2}
  .carrosselTrioLogo .ctlLado{width:100px;height:100px;z-index:1}
  .carrosselTrioLogo .ctlEsq{margin-right:-28px}
  .carrosselTrioLogo .ctlDir{margin-left:-28px}
  /* topo (voltar/dots/pular) agora é UM SÓ elemento fixo, fora dos
     slides que deslizam -- antes cada slide carregava seu próprio topo,
     e durante a transição (~300ms) os dois ficavam visíveis ao mesmo
     tempo, mostrando dots/Pular duplicados cruzando a tela (bug visto
     em screenshot real, capturado no meio de uma transição). Agora
     #passoCarrosselTudo (o .passo de fora) contém o topo fixo + o
     .carrosselPalco (position:relative, só ele é o "viewport" que os
     slides absolutos preenchem) -- só o palco anima, o topo fica
     parado, igual no vídeo de referência. */
  /* #passoCarrosselTudo precisa do proprio flex:1 -- antes, quando os
     slides eram filhos DIRETOS do .card, o flex:1 de cada slide bastava
     pra consumir o espaco livre (.card{justify-content:center} so
     entra em jogo com o que sobra DEPOIS do flex-grow ser resolvido).
     Agora existe 1 nivel a mais (.card > #passoCarrosselTudo >
     .carrosselPalco > .carrosselSlide) -- sem propagar flex:1 aqui
     tambem, o wrapper externo fica do tamanho do proprio conteudo (so
     a altura do topo), e .carrosselPalco{flex:1} nao tem sobra nenhuma
     pra crescer -- vira altura 0, e o conteudo do slide (position:
     absolute;inset:0 relativo a uma caixa de 0px) vaza visualmente pra
     cima do topo sem que ninguem perceba olhando só o print (survivor
     bug: cliques no topo eram capturados pelo slide por baixo -- só
     apareceu tentando clicar de verdade via automação, não em screenshot). */
  #passoCarrosselTudo.on{flex:1}
  .carrosselPalco{position:relative;flex:1}
  .carrosselSlide{position:absolute;inset:0;display:none;flex-direction:column;
                   justify-content:center;gap:18px}
  .carrosselSlide.on{display:flex;touch-action:pan-y}
  .carrosselMeio{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px}

  /* legibilidade da descricao reportada como ruim (itálico serifado
     pequeno e apagado) -- escopado só no carrossel via .carrosselMeio,
     não mexe no .lema global (login/passo1 usam a mesma classe e não
     foram tocados). Tira o itálico (principal vilão de legibilidade em
     corpo de texto pequeno), sobe tamanho/peso/contraste. */
  .carrosselMeio .lema{
    font-style:normal;font-size:17.5px;font-weight:400;
    color:var(--text);line-height:1.6;max-width:300px;margin:0 auto
  }
  .carrosselTarefasDemo{display:flex;flex-direction:column;gap:8px;margin-top:14px;width:100%}
  /* .task/.box/.tinfo/.label/.tmeta/.difpip/.repeat/.del/.done sao o
     componente REAL da lista de tarefas (ver linha ~1714, render()) --
     zero CSS novo pra eles, só herdam o que ja existe. Os botoes .del
     e .box aqui nao tem onclick nenhum (tabindex="-1" pra nao roubar
     foco de teclado tambem) -- é só mostra, decorativo. */

  /* v4.117 (item 42-f do roadmap): slide de transicao entre EVOLUA e
     Nome -- prosa centralizada, sem .marca/.titulo (a referencia nao
     tem cabecalho nessa tela, só a frase). Cursor piscando (::after)
     fica visivel enquanto o typewriter roda (iniciarTypewriter, no
     script abaixo) e junto com o texto quando ja terminou -- decisao
     de nao esconder o cursor no fim, pra nao precisar de mais uma
     classe/estado só pra isso. */
  .carrosselTransicao{display:flex;align-items:center;justify-content:center;min-height:120px}
  .carrosselTransicaoTexto{
    font-family:'Cormorant Garamond',serif;font-style:italic;font-size:25px;
    color:var(--text);line-height:1.6;text-align:center;max-width:300px;margin:0 auto
  }
  .carrosselTransicaoTexto::after{
    content:'';display:inline-block;width:2px;height:1em;margin-left:3px;
    background:var(--accent);vertical-align:text-bottom;animation:carrosselCursorPisca .9s step-end infinite
  }
  @keyframes carrosselCursorPisca{0%,100%{opacity:1}50%{opacity:0}}

/* ===== Bloco style #35 ===== */
.somBtn{background:none;border:none;padding:4px;margin:0;cursor:pointer;
          color:var(--dim);display:flex;align-items:center;justify-content:center;flex:none}
  .somBtn svg{width:18px;height:18px}
  .somBtn.mudo{color:var(--perigo)}

/* ===== Bloco style #36 ===== */
/* === Sprite Slash (pack "Pixel_Art_Animations_-_Slashes") ===
     Decisao de escopo (chat de animacoes de combate): so 'corte' e 'impacto'
     ganham sprite animado -- sao as unicas categorias com golpe fisico
     compativel com um arco de slash. perfuracao/distancia/arcano continuam
     com os efeitos CSS existentes (estocada, projetil e particulas magicas
     nao combinam com o movimento de slash). */
  .fx-sprite-slash{
    position:absolute;width:64px;height:64px;pointer-events:none;z-index:7;
    background-repeat:no-repeat;image-rendering:pixelated;
    transform:translate(-50%,-50%) scale(var(--escala-slash,1));
  }
  /* cor do sprite = raridade da arma (nao categoria). Estilo de movimento
     agora varia por raridade tambem, pra dar variedade visual: Slash 2
     (comum/incomum, 7 frames, rajada mais angulosa) / Slash 3 (raro/epico,
     9 frames, crescente fino) / Slash 1 (lendario, 9 frames, arco largo). */
  /* TESTE: todas as 5 raridades usando o MESMO estilo/tamanho do raro/epico
     (Slash 3, 9 frames), so a cor muda -- pra comparar lado a lado se
     "raridade maior = mais poderoso" fica mais claro so pela cor, sem
     diferenca de sprite/escala extra por classe. */
  .fx-sprite-slash.comum{
    background-image:var(--spr-slash-comum);
    background-size:576px 64px;
    filter:grayscale(1) brightness(2.4); /* Slash3/color5 ciano -> branco, bate com COR_RAR[0] */
    animation:fxSpriteSlash9Fixo .42s steps(9) forwards;
  }
  .fx-sprite-slash.incomum{
    background-image:var(--spr-slash-incomum);
    background-size:576px 64px;
    /* Slash3/color1 verde nativo, ja bate com COR_RAR[1] #63C99A */
    animation:fxSpriteSlash9Fixo .42s steps(9) forwards;
  }
  .fx-sprite-slash.raro{
    background-image:var(--spr-slash-raro);
    background-size:576px 64px;
    /* Slash3/color5 ciano sem filtro (nativo), aproxima COR_RAR[2] #5AA9F2 */
    animation:fxSpriteSlash9Fixo .42s steps(9) forwards;
  }
  .fx-sprite-slash.epico{
    background-image:var(--spr-slash-epico);
    background-size:576px 64px;
    filter:hue-rotate(44deg) saturate(1.3) brightness(1.1); /* Slash3/color3 -> roxo, bate com COR_RAR[3] #B57BE8 */
    animation:fxSpriteSlash9Fixo .42s steps(9) forwards;
  }
  .fx-sprite-slash.lendario{
    background-image:var(--spr-slash-lendario);
    background-size:576px 64px;
    /* Slash3/color4 laranja nativo, bate com COR_RAR[4] #F2A65A */
    animation:fxSpriteSlash9Fixo .42s steps(9) forwards;
  }
  @keyframes fxSpriteSlash9{
    0%{background-position:0 0;opacity:0;
       transform:translate(-50%,-50%) scale(var(--escala-slash,1)) translate(-20px,-20px) rotate(-35deg)}
    8%{opacity:1}
    100%{background-position:-576px 0;opacity:1;
       transform:translate(-50%,-50%) scale(var(--escala-slash,1)) translate(20px,20px) rotate(35deg)}
  }
  @keyframes fxSpriteSlash7{
    0%{background-position:0 0;opacity:0;
       transform:translate(-50%,-50%) scale(var(--escala-slash,1)) translate(-20px,-20px) rotate(-35deg)}
    8%{opacity:1}
    100%{background-position:-448px 0;opacity:1;
       transform:translate(-50%,-50%) scale(var(--escala-slash,1)) translate(20px,20px) rotate(35deg)}
  }
  /* comum/incomum: sem deslocamento -- fica parado no centro do mob. Arte do
     Slash 2 concentra o desenho ~7px abaixo do centro do quadro 64x64, entao
     desloca -7px em Y pra recentralizar. Escala extra (+30%) pra compensar
     a falta de movimento. */
  @keyframes fxSpriteSlash7Fixo{
    0%{background-position:0 0;opacity:0;
       transform:translate(-50%,-50%) scale(calc(var(--escala-slash,1) * 1.3)) translateY(-7px) rotate(25deg)}
    8%{opacity:1}
    100%{background-position:-448px 0;opacity:1;
       transform:translate(-50%,-50%) scale(calc(var(--escala-slash,1) * 1.3)) translateY(-7px) rotate(25deg)}
  }
  /* lendario: Slash 1 ja fica quase centrado (desvio pequeno), so escala extra. */
  @keyframes fxSpriteSlash9FixoLendario{
    0%{background-position:0 0;opacity:0;
       transform:translate(-50%,-50%) scale(calc(var(--escala-slash,1) * 1.3)) translate(-6px,-2px) rotate(25deg)}
    8%{opacity:1}
    100%{background-position:-576px 0;opacity:1;
       transform:translate(-50%,-50%) scale(calc(var(--escala-slash,1) * 1.3)) translate(-6px,-2px) rotate(25deg)}
  }
  /* raro/epico: sem deslocamento diagonal -- fica parado no centro do mob,
     so troca de frame (pedido explicito do usuario, testar como fica). */
  /* raro/epico: recentralizado (a arte do Slash 3 concentra o desenho na
     metade de cima do quadro 64x64, por isso parecia deslocado pra cima --
     compensa com translateY) e escala extra (+35%) so pra esses dois. */
  /* correcao de centro (translateY) precisa vir DEPOIS de scale() na lista --
     assim o deslocamento escala junto com o tamanho em vez de ficar fixo em
     px (bug: aumentar a escala sem isso faz o desenho "subir" de novo,
     porque o offset fixo passa a ser proporcionalmente menor). */
  @keyframes fxSpriteSlash9Fixo{
    0%{background-position:0 0;opacity:0;
       transform:translate(-50%,-50%) scale(calc(var(--escala-slash,1) * 1.5)) translateY(12.5px) rotate(25deg)}
    8%{opacity:1}
    100%{background-position:-576px 0;opacity:1;
       transform:translate(-50%,-50%) scale(calc(var(--escala-slash,1) * 1.5)) translateY(12.5px) rotate(25deg)}
  }

/* ===== Bloco style #37 ===== */
:root{
    --spr-slash-comum: url("data:image/png;base64,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");
    --spr-slash-incomum: url("data:image/png;base64,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");
    --spr-slash-raro: url("data:image/png;base64,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");
    --spr-slash-epico: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkAAAABACAYAAADyBcgfAAAPlElEQVR42u2dTWwTZxrHnzeqd4EG14kloAdSVxGhJ+ew1RgRpPYCgUMEWtYHO3AnErcwtxy5DbkhtdcVxD54uwJFWiBcqLRBeERXig+rJcjaEA6hkcYJbgq0XuXdg+d1Xg/jj3zMV+b/kyx/zJffGdvz8/M87zuMc04AAAAAAGGiB7sAAAAAABAgAAAAAAAIEAAAAAAABAgAAAAAAAIEAAAAAAABAgAAAACAAAEAAAAA+IdPsAsAANvlCit3O2tuDzaX3e4Cd/mgl222kpEe57cxbUc40XYAIEAAgD3jDDPkp00jkqpKvGleTTfYdtatKnG6WHTuvaeV9ifZgl5uiM+F5MDobrb1oLScM7fZlQgV9LJjbdZ0o6t5E7SeSSuDY9Lxy3QSQlWJj/3yofbFw9LybSKiJYrl/faZvZ/a1eKTbaZN79V7dPJzDyBAAIA9YJ63zkDP0xqNsM2GzKhKnBMRXSqudRQhsZzTWGUgQeu20vNdqdpvt/xEMlppNV1Mk9dV0Mu5JYp1lKCEh8dUiI+mU6aFLLU6fnxLkmKnhRAV9PKs30SoGwlUlfikOe/nNpNv2Lx2K/FZ5GsiovTJ6Ky5bNdSZP3D4CQuRT+3FfVE1A8CBECgeEN9ba9Dc4yvmafMrRPOvVRdhE4VW55I6TIZrrVBSNw4q+RkWRFSU5/e00LyNkzx6bGdJkROyNCF5MCoiAbN8P6WJ4gEc769VsZZxVZ8bObv/tpDzMgQxTJChGZ4f0cRckN+V+eireVoKjKp6cbnYh+szkXtoj62kaBV816n2jdK+v2PQmrUm7WOIqRSTWzflc/9EsXaSXBOmi9jvpaXH3crT52EP0Hrnvx27UACs+ZjX6SzIUAA+F+QmkRohG2SphukKnF6liLeToLcwk582knPjmSD1WVqIhmtmBL0aJxVcu0kyE3upfpyGm02xKddZK8bYRHLb7W/LkLjrELdSJBXHDlXvaW1lh4xT0NmEp9Fvl56W3suIj9EREtva8/F8urN2i0iIiX9fix9MjrbjQh5iRAfi+gwSZiyneRJSLIkSdyUp2yAfrpk0ZHfd3aX64IAARBmERISRESkpuKeSVBBL+cSLSM+DkVdGiJkptfYsucSdC/Vl5Pqe7bdfuv8I2zzIynaan8sd2e49/rVhY0RP8pPq4iPLD1NUZS3tefiPvFZ5GuR+qIpulGg92NiuSWqp9K0qfikXyXIKj9ExKyiI0eGGvvAXmyYFDlhSxST1+93Ecrt8focbS8ECIAgiRAnOkZbIuSlBH0c9XEWWYRENMhLCboz3DuvlYzTey1+87yHRtgmqUq8HgVgW4J1dWHj9J3h3nk/SZCSfv9En4t+00582kWFiIjoXHVa1AupSnylIUNCuF9UxwovqqSkyXfRoASt5yyprqxVeJYolrGL/IgUlrzMEsWyrURHTPdx1CdIkSoIEABBFCE5GuSFBLktPyNsszk15LEE3Rnunf++VHVEfrbaWBcfIUKabmRG2CZd5f6RICX9/oleOPiN3bSO0tNiXpVqdORcdVpV4iviNakw+nP1Zu2WNhUhP0iQnfzYRIPslrOmMrm5DFF9aISm77MsPT6UoFZpKkfTVxAgAALMMVqzj/IEQIJ6D0Timm7wbk/+rYpzJ5LRitwLrNX6rK/LEuT2cRtnlcz3tLkt+bG2/1oy+lQ8FiJlXZ+IBGm6kVGVeP5aMvr08IHIKzVFpJWMzJ3hqKcS1E5+7KJB1l5eArmnmBCh1bnopHbOaEiQkB1tKj5JU3Sj8KI6pk1FPZWgVvJjLXy2yo4Z4bHKTFYWoXZYtsN88FOW3cNoUK7FOiFAAOwn7KSg0fOrCxmSJYiIfFMYbde+dqIiT5sYbl1PJKJA4n5LgtyLAm319jK6br+qxPOkEBX08iwR0Qzvz8/ThrTO9UakQE3Vxw7SdCMj2ijWc/hA5FVBL8+mlcExIUP3Un25S8U11/9la1ORSe1t9TlRawES0pM+GZ1V56LTUi8vy5xReb0rRPWU11JdfG4dOVed1qbiojB6WpuKTIp5vJYgO/mx9vhqF62xTpNkSYgRt5McizT5Lfqz4x5fbrcJAgSAR9gMdtgkDZfJoHne01aEhAQRM1wdC8WE2f1jtXZfJyJ6UFp+1O1KRZGzkCE5LSSnwpojQQOjM5JUOMX55MB1TW9f9yPafy0ZffqwtHz7UrHHPKnZDofU1LNrhtbyphTNXhseuP59qXp6nvfQPK1l6nVBgw2RMk+EuXupOLkpQaKre6sUV0N8lPiKerP27cfC0+Y70ZCZg9NEB0mbiqwUPouMFV5UzW0L4Tk4rU1FJr2SIDnSI0TFLFYWx5J10duroxAREQtA3Y/d80DUAkGAAPAIa7RGNcf4af75MzqK0Bvqo8tkNFJh5G5YvEmCrPIjxKfb6Mw4q+TEMheSA6MTyWhFFiFZguRI0MRwfVkno0AFvZxJK4OviOh0O/lRlXi+oJdnry705FtJTydmeH9+hjby42w9o6YGx0REiJiRUZVBEiNGJ2g9e6nYkxtnlVm3usgXXlTHVm2KnoX8qDsQn/ZCVJcd9WbtFqWrJAuPWRB9i/ZwJOkuRUWO8PAOErPbbWU79ALzQ62N7+t9IEAABEiImqSogwjJqRIPYETER9imbdRnO1LSNC9bzskiJLrB20WEvis5HwWSoz+d5GevZKQuQmv5cbY+q6YGxzQyMppuZK4lo0+XKJZL0Hr2znDv08NK35iIHjl+8n9bs019HTlXnV6di95Q90B8WkSGponoiYhCFV5Ux9Ino7PaVOQGEbnZRT4n5EeKCOWdkJ8upcor8cgGWX6IcDV4AHwvRaeKxMzLYdAI22xZPD3Pe8RAidyDt8p2Kz92MjTD+7NiXWL9QvTke+uI1E5w+EDklSxgTsuPVYQuFdeyCVrPEtULpxO0nl2iWK6eZlvLjLNKxoXj3DLttToXveH0xvXCwW8LL6pjIvojHnuF3NMrYIMVhjryAwECIKAi1EqCvEaIyl7Ij1WEHpSWHz0oLT+SJahRCG0+b3XNMTdwUn6sIiR6kKWVwTEhROOskj2fHLjuRluttT9uyY8sQeKxtUeZF3gxUrOZEuMEIEAAhEmEWkmQSI2ZPZRc/3Gc4f3ZKwsb8b2UH3ndQoRkCbKm/czxiZyKAmVbRX+EnLixn68ubIxcS0afarqROZ8cuC7ER+5O7yDTNvK34rpwSumurS7ykUmXNp+Vu7h7Efkxt+l1j89AR3+IUAMEAsT9VMdZOBFRQS/n7/LBfRuOPlUkpqbinJjhy/+AThYiz/D+LLHl3ERyYFTuLi8iQhPD7rdXRH92WvC8Ex6Wlm+r9YLsRq8wL+rAjpyrTqtzUU+6oYsu8UJ8xACJ5HJBNAguiACBwKDpRuO2WHxNi8XXpOkGXyy+5ovF17ybsVn2kwQRfTyY4g88vu/bbhcJku8d/sfbhFeF5zO8P//Lh9oXIgpERHRnuPfptWR03mX5W/HysyCiP6YMuZWGy9kNcOghOY+2Gfg/mRAgEGg8GPvGV233sOeXLyTI5c2KtEPjNs972KXiWtaLq7Q/LC3flkeUJnItDeav74EZCfJiQESfFD5nCUCAAAhjFCjMWEeY9rIQ2gMJzMvS87C0fNvN7Svp9z/6SYLMh0h/AQgQCA/32aHQtl1V4r7sEeaSADRFgeZ5D3lxbTAvsUaBrBEhJ6mPB+SjPz/uFUEDCBAA3lPQy/mw7wORBgurCFn3Q8gkMC89zoX5+LuYAkPKaZ+AXmBg33CRvwtdNOhUkRgx4jbyE4r02Azvz94d7h11K/V1L9Xnvz8BpfLt88mB6+eHyZXojzYVqX+2zPo7s+dVmAi1aEKAAPDTPz8lTov0LtT74A31+T4CtBL7sun5sSN/rJva4n/2ZP1hS3/JPCwt33ZrIESfM0kO1wGZQ2xkifzQAcOb97BfhhmBAAGwDwRQyM8xWqOREO4D68VXgTNcLPr+LaIIGnQNaoAA2AeIUaDNa1L55n2txL5s3D56z6u/0ZvV33a9jQel5Ue9ByL/ldJgoarRSCuDjTqgwwciI/g2AAABAiHjPjskrsociBPg0aGjjdtuERGgH3icNN3wpP5Hlp1W0uM0M7w/E8bP/vnkwHW3u8EDEHSQAgNgH3GZBW8cJD70FRHtrhZI040/qUr8pwQrL4bxuEs1QHl8CwDoDkSAQOAJ0+CHnQjzyNgbH2pfOnkdsiBIEL4BAECA9iWM1mxvQ49rnNEaZ7TGw7ZP0spgRj75+2Ro+tCwF+muvagFmkhGK2EvgJZrgQAAnUEKbB/w8uzGliOFkIs8+F3gjw4dpZ8Xf97Rsppu0BuK02Vm0ClOzI1PwV//1U9EL+nY+vr2ZCcWc+T9XFnY6B8P8YVBkP4CYPsgAhRwTjzu5eZ96Nq+wH5vDEh2nx0K7ajQ87yHLjPD9fTXkU9O+GYf3Ev1/RTm9BcAYPsgAgQCS1oZzGi6QRfJHAyx+C67FLIowLMU8RG9fgmIoF8clQ99taNC6AvJgdGCXn5E5Oxg0L/qxz3dP/+gJ+0mN7q/X6RB/DgAAAHa/4j018uzG6FOfxX0cn6Y/hC69p8qEv1AcXqWCn5bdlIHNM4quSuc+on2b/Sng/gQEWUI6S8AIEBh4sTjXv7y7AadeNwr1wGFjqHUcSL+OnTpj2cp4ppeT315Ff35c2S7UZfmrPtf/vdp0/MZlmw8/lR53XFtBarQOKvk08pg02tOkOWvPTnOXXywIT8AQIDCRZijPwvs99x9qqe/whr9uVRcozf1awGFtvz3QnJgtPdAJI5fAwAABCgkhD36I+p/ghz9OfPy380vbGMQQ1WJ8xF9ky6TEWj5+dsnvxLRx5Ggbtj4UDMgPwAACFB45Sd0//4TtJ7T9PrjsEZ/zMEfPTv2f6/tLs2UY80FxbZ1Lnq57SrIH5fjBgBAgJxn6HFNfsoXz0ZYmA9eWAuflyiWucjf0VDqOC0W34Wx6zOnEKe9TPlBl3cAQHgECCeArehPWNufoPXcEsVoKHW8ftFPdihU7VeVOPfqYqcAALCfYJwH5+oJZgSoIT+LZyPhOlj1K363lT9Offu2/VdYObdEsYyqtL/ieYLW6S73/1goZ7Z/4dKuxf+fHNkhAABoR9AiQGEP/Ye6/d3IT5DYgaQg8gMAAHsVVAhSBAiEmzPM6EoAgxIBAgAAAAECAAAAAHANXAwVAAAAABAgAAAAAAAIEAAAAAAABAgAAAAAAAIEAAAAAAABAgAAAACAAAEAAAAAQIAAAAAAACBAAAAAAAAQIAAAAAAACBAAAAAAAAQIAAAAAGBn/B/kPKHKmAyo7gAAAABJRU5ErkJggg==");
    --spr-slash-lendario: url("data:image/png;base64,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");
  }


/* ===== Blocos de módulos autônomos (extraídos do corpo do HTML) ===== */

/* --- Módulo style #1 --- */
#viewLoja{padding:14px 14px 8px}

  .lojatopo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
  .lojatopo .saldo{margin-top:0}

  .lojatabs{display:flex;gap:6px}
  .lojatabs button{font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:600;color:var(--dim);
        background:var(--panel-3);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer}
  .lojatabs button.on{color:var(--bg);background:var(--accent);border-color:var(--accent)}

  .lojalista{display:flex;flex-direction:column;gap:8px}
  .lrow{display:flex;align-items:center;gap:11px;background:var(--panel-3);border:1px solid var(--line);
        border-radius:12px;padding:9px 11px;position:relative}
  .lrow.oferta{border-color:var(--gold);box-shadow:0 0 10px rgba(242,201,76,.14)}
  .lrow.trava{opacity:.5}
  .lrow.esgotado{opacity:.38}
  .lrow .lbox{width:46px;height:46px;border-radius:10px;background:var(--poco);border:1px solid var(--line);
        display:flex;align-items:center;justify-content:center;flex:none}
  .lrow .linfo{flex:1;min-width:0}
  .lname{font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;color:var(--text);
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lmeta{font-family:'Outfit',sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;
         letter-spacing:.05em;margin-top:2px}
  .lbonus{font-family:'Outfit',sans-serif;font-size:11px;color:var(--dim);margin-top:3px}
  .lbonus b{color:var(--muted);font-weight:600}
  .lacao{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
  .lpreco{font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:700;color:var(--gold);
          font-variant-numeric:tabular-nums;white-space:nowrap}
  .lpreco s{color:var(--dim);font-weight:500;font-size:10.5px;margin-right:4px}
  .lpreco .lmoeda{width:24px;height:24px;margin-left:2px;vertical-align:-7px}
  .lbtn{font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;padding:6px 14px;border-radius:9px;
        border:1px solid var(--accent);background:var(--accent);color:var(--bg);cursor:pointer;white-space:nowrap}
  .lbtn.sec{background:var(--poco);border-color:var(--line);color:var(--muted)}
  .lbtn.off{background:var(--poco);border-color:var(--line);color:var(--dim);cursor:default}
  .lflag{position:absolute;top:-7px;left:11px;font-family:'Outfit',sans-serif;font-size:9px;font-weight:700;
         text-transform:uppercase;letter-spacing:.08em;background:var(--gold);color:var(--bg);
         border-radius:999px;padding:2px 7px}
  .lqtd{font-family:'Outfit',sans-serif;font-size:11px;color:var(--dim);font-weight:600}
  .lbulk{margin-top:12px;width:100%;font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:600;
         padding:10px;border-radius:11px;border:1px dashed var(--line);background:var(--poco);
         color:var(--gold);cursor:pointer}
  .lnota{font-family:'Outfit',sans-serif;font-size:11.5px;color:var(--dim);text-align:center;
         margin:14px 0 4px;line-height:1.5}

/* --- Módulo style #2 --- */
/* ============ TAREFAS: botoes maiores + dificuldade ============ */

  /* botao "+ Adicionar": area de toque de 44px, minimo recomendado no celular */
  .thead .add{
    padding:11px 18px !important;
    font-size:14.5px !important;
    font-weight:600 !important;
    border-radius:11px !important;
    min-height:44px !important;
  }
  .thead .add:active{transform:scale(.96)}

  /* botao de apagar: era 16px e so aparecia no :hover — no celular nao existe hover */
  .task .del{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    margin-left:auto !important;
    padding:0 !important;
    font-size:21px !important;
    line-height:1 !important;
    border-radius:10px !important;
    color:var(--dim) !important;
    background:rgba(255,255,255,.045) !important;
    opacity:1 !important;              /* sempre visivel */
    display:grid; place-items:center;
    transition:background .15s, color .15s, transform .1s;
  }
  .task .del:active{
    background:rgba(242,87,129,.20) !important;
    color:var(--perigo) !important;
    transform:scale(.9);
  }
  .task:hover .del{opacity:1 !important}

  .task{padding:13px 12px 13px 14px !important}
  .task .box{width:24px !important;height:24px !important;border-width:2px !important}

  /* --- linha de meta abaixo do titulo --- */
  .tinfo{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
  .tmeta{display:flex;align-items:center;gap:8px}

  /* --- losangos de dificuldade --- */
  .difpip{display:inline-flex;gap:3px;align-items:center}
  .difpip i{
    width:6px;height:6px;
    background:currentColor;
    transform:rotate(45deg);
    border-radius:1px;
    display:block;
  }
  .task[data-dif="trivial"] .difpip{color:#7E8BA3}
  .task[data-dif="facil"]   .difpip{color:var(--verde)}
  .task[data-dif="media"]   .difpip{color:#F2C94C}
  .task[data-dif="dificil"] .difpip{color:var(--perigo)}

  /* --- seletor no composer --- */
  .difwrap{display:flex;flex-direction:column;gap:7px}
  .diflabel{
    font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  }
  .difs{display:flex;gap:6px}
  .dif{
    flex:1;min-height:56px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    background:var(--panel);border:1px solid var(--line);border-radius:10px;
    padding:8px 4px;cursor:pointer;transition:.15s;
    color:var(--dim);
  }
  .dif .difnome{
    font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:500;
    color:var(--muted);line-height:1;
  }
  .dif.on{background:var(--accent-dim);border-color:var(--accent)}
  .dif.on .difnome{color:var(--accent);font-weight:600}
  .dif:active{transform:scale(.96)}

  .dif[data-dif="trivial"].on{color:#7E8BA3}
  .dif[data-dif="facil"].on  {color:var(--verde)}
  .dif[data-dif="media"].on  {color:#F2C94C}
  .dif[data-dif="dificil"].on{color:var(--perigo)}
  .dif[data-dif="trivial"].on .difnome{color:#7E8BA3}
  .dif[data-dif="facil"].on   .difnome{color:var(--verde)}
  .dif[data-dif="media"].on   .difnome{color:#F2C94C}
  .dif[data-dif="dificil"].on .difnome{color:var(--perigo)}

  /* --- "vezes por dia": mesmo rotulo do difwrap, stepper proprio --- */
  .vezeswrap{display:flex;flex-direction:column;gap:7px}
  .vezesrow{display:flex;align-items:center;gap:12px}
  .vezesbtn{
    width:40px;height:40px;flex:none;border-radius:10px;
    background:var(--panel);border:1px solid var(--line);color:var(--text);
    font-family:'Outfit',sans-serif;font-size:18px;font-weight:600;line-height:1;
    cursor:pointer;transition:.15s;
  }
  .vezesbtn:active{transform:scale(.94)}
  .vezesbtn:disabled{opacity:.35;cursor:default}
  .vezesnum{
    flex:1;text-align:center;font-family:'Outfit',sans-serif;
    font-size:15px;font-weight:600;color:var(--text);
  }
  .vezesnum b{font-family:'Outfit',sans-serif;font-size:20px;font-weight:700;margin-right:5px}

  /* --- opcoes avancadas: disclosure + color picker livre por tarefa --- */
  .advtoggle{
    width:100%;text-align:left;background:none;border:none;padding:6px 0;
    font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:600;
    color:var(--dim);letter-spacing:.02em;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;
  }
  .advchevron{transition:transform .18s;font-size:11px}
  .advtoggle.on .advchevron{transform:rotate(180deg)}
  .advpanel{
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .22s ease, opacity .18s;
  }
  .advpanel.on{max-height:190px;opacity:1}
  .advcolorrow{display:flex;flex-direction:column;gap:9px;padding:8px 0 4px}
  .advcolorpick{display:flex;align-items:center;gap:9px}
  .advswatch{
    width:40px;height:40px;flex:none;border-radius:9px;
    border:1px solid var(--line);background:var(--accent);
  }
  .advhex{
    flex:1;min-width:0;height:40px;padding:0 12px;border-radius:9px;
    border:1px solid var(--line);background:var(--panel);color:var(--text);
    font-family:'Outfit',sans-serif;font-size:14px;letter-spacing:.03em;
  }
  .advhex:focus{outline:none;border-color:var(--accent)}
  .advswatches{display:flex;flex-wrap:wrap;gap:8px}
  .advpreset{
    width:28px;height:28px;flex:none;border-radius:8px;cursor:pointer;
    border:2px solid transparent;transition:transform .1s,border-color .12s;
  }
  .advpreset:active{transform:scale(.9)}
  .advpreset.on{border-color:var(--text)}
  .advreset{
    background:var(--panel);border:1px solid var(--line);border-radius:9px;
    color:var(--muted);font-family:'Outfit',sans-serif;font-size:12px;font-weight:500;
    padding:0 12px;height:40px;cursor:pointer;
  }
  .advreset:active{transform:scale(.97)}

  /* --- opcoes avancadas: categoria de tarefa (pedido do usuario) --- */
  .advpanel.on{max-height:420px}
  .advcatrow{display:flex;flex-direction:column;gap:9px;padding:8px 0 4px}
  .catchips{display:flex;flex-wrap:wrap;gap:8px}
  .catchip{
    display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;
    border-radius:9px;border:1px solid var(--line);background:var(--panel);
    color:var(--muted);font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:500;
    cursor:pointer;transition:border-color .12s,color .12s,transform .1s;
  }
  .catchip:active{transform:scale(.97)}
  .catchip.on{border-color:var(--text);color:var(--text)}
  .catnova{
    align-self:flex-start;background:none;border:none;padding:2px 0;
    font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:600;
    color:var(--accent);cursor:pointer;
  }
  .catnova.off{display:none}
  /* categoria visivel logo abaixo do nome da tarefa (feedback: estava escondida em Opcoes avancadas) */
  .catvisivel{padding:2px 0 6px}
  .catvisivel .catchip{height:40px;padding:0 16px;border-radius:100px;font-size:14px;font-weight:600}
  .catvisivel .catchip.on{border-color:var(--accent);background:var(--accent-dim)}
  .catvisivel .catnova{font-size:13.5px}
  .catform{
    max-height:0;overflow:hidden;opacity:0;display:flex;flex-direction:column;gap:9px;
    transition:max-height .2s ease,opacity .16s;
  }
  .catform.on{max-height:160px;opacity:1;margin-top:2px}
  .catnomeinput{
    height:40px;padding:0 12px;border-radius:9px;
    border:1px solid var(--line);background:var(--panel);color:var(--text);
    font-family:'Outfit',sans-serif;font-size:14px;
  }
  .catnomeinput:focus{outline:none;border-color:var(--accent)}
  .catformacoes{display:flex;gap:8px;justify-content:flex-end}
  .catformcancelar,.catformok{
    border-radius:9px;font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:600;
    padding:0 14px;height:36px;cursor:pointer;
  }
  .catformcancelar{background:var(--panel);border:1px solid var(--line);color:var(--muted)}
  .catformok{background:var(--accent);border:none;color:var(--bg)}
  .catformcancelar:active,.catformok:active{transform:scale(.96)}

  /* pedido do usuario: "a categoria devia aparecer como texto e nao tipo
     cor" -- o badge coloridinho por card (.catbadge, ponto+nome em cada
     linha) saiu. Categoria agora aparece so como TEXTO, via cabecalho de
     grupo acima das tarefas daquela categoria (ver .catgrupo abaixo),
     igual a referencia do Skillion ("Habitos", "A Fazer" com contagem).
     So aparece agrupado quando o filtro esta em "Todos" -- com uma
     categoria especifica ja selecionada na aba, a lista fica simples
     (a aba ativa ja deixa claro qual categoria e essa). */
  .catgrupo{
    display:flex;align-items:center;gap:9px;padding:14px 2px 6px;
  }
  .catgruponome{font-family:'Outfit',sans-serif;font-size:19px;font-weight:700;color:var(--text)}
  .catgrupocount{
    min-width:20px;height:20px;padding:0 6px;border-radius:100px;background:var(--panel-2);
    display:flex;align-items:center;justify-content:center;
    font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:600;color:var(--dim);
  }

  /* --- categoria de tarefa: abas de filtro acima da lista (pedido do
     usuario, "tipo igual o do Skillion") --- */
  .cattabs{
    display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;
    padding-bottom:10px;margin-bottom:2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .cattabs::-webkit-scrollbar{display:none}
  /* pedido do usuario: botoes maiores (eram 32px/12.5px) -- e o lapis de
     editar saiu daqui, cada aba volta a ser so um botao simples de novo
     (filtra ao tocar); editar/apagar agora mora na tela "Categorias"
     (ver #categoriasOverlay mais abaixo). */
  .cattab{
    flex:none;display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;
    border-radius:100px;border:1px solid var(--line);background:var(--panel);
    color:var(--muted);font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;
    cursor:pointer;white-space:nowrap;transition:border-color .12s,color .12s,background .12s;
  }
  .cattab.on{border-color:var(--accent);color:var(--text);background:var(--accent-dim)}
  .cattabnova{border-style:dashed;color:var(--accent)}

  /* --- tela "Categorias" (pedido do usuario, lista completa tipo
     Skillion: nome + contagem de tarefas + editar + apagar + adicionar
     nova, tudo na mesma folha) --- */
  .catlista{display:flex;flex-direction:column;gap:9px;max-height:50vh;overflow-y:auto;margin-bottom:14px}
  .catrow{
    display:flex;align-items:center;gap:10px;padding:14px 14px;
    background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  }
  .catrowinfo{flex:1;min-width:0}
  .catrownome{font-family:'Outfit',sans-serif;font-size:15px;font-weight:600;color:var(--text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .catrowcount{font-family:'Outfit',sans-serif;font-size:12px;color:var(--dim);margin-top:2px}
  .catrowbtn{
    flex:none;display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:10px;background:var(--panel);
    border:1px solid var(--line);color:var(--muted);cursor:pointer;
  }
  .catrowbtn svg{width:17px;height:17px;stroke:currentColor}
  .catrowbtn:active{transform:scale(.93)}
  .catrowbtn.del{color:var(--perigo);border-color:var(--perigo)}
  .catnovarow[hidden]{display:none}
  .catnovarow{
    display:flex;align-items:center;gap:10px;padding:14px;
    background:none;border:1.5px dashed var(--line);border-radius:12px;
    color:var(--accent);font-family:'Outfit',sans-serif;font-size:14.5px;font-weight:600;
    cursor:pointer;width:100%;
  }
  .catnovarow svg{width:18px;height:18px;stroke:currentColor;flex:none}

/* --- Módulo style #3 --- */
/* --- caixa de concluir e botao de apagar, em area de toque real --- */
  .task .box{
    width:42px !important; height:42px !important;
    min-width:42px !important;
    border-radius:12px !important;
    border:2px solid var(--dim) !important;
    display:grid !important; place-items:center;
    transition:background .16s, border-color .16s, transform .1s;
  }
  .task .box svg{width:20px;height:20px}
  .task .box:active{transform:scale(.9)}
  .task.done .box{background:var(--verde,#63C99A) !important;border-color:var(--verde,#63C99A) !important;color:var(--bg) !important}

  .task .del{
    width:42px !important; height:42px !important;
    min-width:42px !important;
    font-size:23px !important;
    border-radius:12px !important;
  }

  .task{gap:13px !important;padding:12px !important}
  .task .tinfo{cursor:pointer}

  /* --- folha do editor --- */
  /* v4.140 (pedido do usuario): abrir ja tinha animacao (@keyframes edsobe,
     mantido abaixo so por historico -- nao e mais usado), fechar era
     display:none instantaneo. Trocado animation (one-shot, nao reversivel)
     por transition (reversivel de graca): fechar agora desliza pra baixo
     e o backdrop faz fade, sem tocar em nenhum JS -- os 5 lugares que
     reaproveitam .edov/.edsheet (Nova tarefa, Editar tarefa, Estatisticas,
     Renomear, confirmacao de exclusao) ganham o fechar animado juntos. */
  .edov{
    position:fixed; inset:0; z-index:80;
    background:rgba(10,7,18,.68);
    backdrop-filter:blur(3px);
    display:flex; align-items:flex-end; justify-content:center;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .22s var(--expo), visibility 0s .22s;
  }
  .edov.on{
    opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity .22s var(--expo), visibility 0s;
  }

  .edsheet{
    position:relative;
    width:100%; max-width:430px;
    background:var(--panel-2); border-top:1px solid var(--line);
    border-radius:20px 20px 0 0;
    padding:8px 16px calc(18px + env(safe-area-inset-bottom));
    max-height:88vh; overflow-y:auto;
    transform:translateY(100%);
    transition:transform .28s var(--expo);
  }
  .edov.on .edsheet{ transform:translateY(0); }
  @keyframes edsobe{from{transform:translateY(100%)}to{transform:translateY(0)}} /* nao usado mais, mantido por historico */

  .edpuxador{width:38px;height:4px;border-radius:2px;background:var(--line);margin:6px auto 14px}

  .edfechar{
    position:absolute; top:10px; right:12px; width:32px; height:32px;
    background:transparent; border:none; border-radius:50%;
    color:var(--dim); font-size:22px; line-height:1; cursor:pointer;
    display:grid; place-items:center;
  }
  .edfechar:active{background:rgba(255,255,255,.08)}

  .edtitulo{
    font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;
    letter-spacing:.07em;text-transform:uppercase;color:var(--dim);
    margin-bottom:10px;
  }
  .edcampo{
    width:100%; background:var(--panel); color:var(--text);
    border:1px solid var(--line); border-radius:11px;
    padding:13px 13px; font-family:'Outfit',sans-serif; font-size:15px;
    outline:none; margin-bottom:16px;
  }
  .edcampo:focus{border-color:var(--accent)}

  .edsec{
    font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
    margin-bottom:7px;
  }
  .edbloco{margin-bottom:16px}
  .edbloco .days{margin-top:6px}

  .edacoes{display:flex;gap:9px;margin-top:4px}
  .edsalvar{
    flex:1; background:var(--accent); color:var(--bg); border:none;
    border-radius:12px; padding:14px;
    font-family:'Outfit',sans-serif; font-size:15px; font-weight:600; cursor:pointer;
  }
  .edexcluir{
    width:54px; background:transparent; border:1px solid rgba(244,87,129,.35);
    border-radius:12px; color:var(--perigo); font-size:21px; cursor:pointer;
    display:grid; place-items:center;
  }
  .edexcluir:active{background:rgba(244,87,129,.15)}
  .edsalvar:active,.edexcluir:active{transform:scale(.97)}

  /* botao de confirmar comprar/vender (#confirmOk, folha generica de
     pedirConfirmacao): pedido do usuario -- mesmo visual escuro/neutro do
     botao "Vender" do inventario (.iacts button, sem .prim) em vez do
     dourado padrao do .edsalvar, tanto pra compra quanto pra venda na Loja
     (os dois fluxos reaproveitam o mesmo #confirmOk) */
  #confirmOk{background:var(--poco); border:1px solid var(--line); color:var(--muted)}

  /* botao destrutivo de largura cheia, pra folhas de confirmacao com texto
     (diferente de .edexcluir, que e so pra icone unico tipo "x", 54px fixo) */
  .edperigo{
    flex:1; background:var(--perigo); color:#2A0E16; border:none;
    border-radius:12px; padding:14px;
    font-family:'Outfit',sans-serif; font-size:15px; font-weight:600; cursor:pointer;
  }
  .edperigo:active{transform:scale(.97)}

/* --- Módulo style #4 --- */
/* dentro da folha o composer perde a caixa propria, senao fica caixa dentro de caixa */
  #addOverlay .composer{
    margin-top:0 !important;
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    padding:0 !important;
  }
  #addOverlay .composer input{font-size:15px;padding:13px}
  #addOverlay .cbtn{padding:14px;font-size:15px;border-radius:12px;margin-top:4px}

/* --- Módulo style #5 --- */
.xpwrap .hprow{margin-bottom:5px}
  .xpwrap .hpbar{margin-bottom:12px}
  .xpwrap .hpfill{
    background:var(--perigo) !important;
    transition:width .45s cubic-bezier(.4,1.2,.5,1), background .3s;
  }
  .xpwrap .hpfill.baixa{background:var(--perigo2) !important}
  .xpnum.hpnum{color:var(--perigo) !important}
  .xpnum.hpnum.baixa{color:var(--perigo2) !important}
  .hpdano{animation:hptremor .4s ease}
  @keyframes hptremor{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-4px)} 45%{transform:translateX(4px)}
    70%{transform:translateX(-2px)}
  }
  @media (prefers-reduced-motion:reduce){ .hpdano{animation:none} }

/* --- Módulo style #6 --- */
/* ============ AVISOS NO TOPO ============ */
  /* Nao existe faixa livre dentro da arena: a vida do monstro fica em y=77,
     os sprites de y=88 a 175 e o nome do monstro de y=191 a 216. O unico vao
     real da tela e o miolo da topbar — o selo de nivel acaba em x=88 e as
     moedas ficam a direita. Dai a largura maxima estreita: alargar volta a
     cobrir o nivel ou o contador de moedas. */
  .toast{
    bottom:auto !important;
    top:calc(9px + env(safe-area-inset-top)) !important;
    transform:translate(-50%, -12px) !important;
    z-index:90;                        /* as folhas modais ficam em 80 */
    max-width:min(62vw, 236px);
    padding:9px 14px !important;
    line-height:1.35;
    box-shadow:0 6px 20px rgba(0,0,0,.5);
  }
  .toast.on{transform:translate(-50%, 0) !important}

/* --- Módulo style #7 --- */
/* a aura usa ::after porque o ::before do .hero-sprite ja e o halo de tocha */
  .hero-sprite::after{
    content:'';position:absolute;inset:-14%;border-radius:50%;
    background:radial-gradient(circle, var(--aura,transparent) 0%, transparent 62%);
    opacity:0;transition:opacity .45s, background .45s;
    pointer-events:none;z-index:0;
  }
  .hero-sprite.temAura::after{opacity:.85;animation:auraPulso 3.2s ease-in-out infinite}
  @keyframes auraPulso{0%,100%{opacity:.55}50%{opacity:.95}}

  /* EQUIPAMENTOS: faixa horizontal no topo do .xpwrap, acima da barra de Vida.
     Saiu de cima do sprite (badges absolutos) porque as caixas tampavam o
     heroi e brigavam por espaco com a arena. Vive dentro de .xpwrap, que ja
     esta em blocosTarefas — some sozinho ao trocar de aba, sem gancho novo. */
  .eqrow{margin-bottom:12px}
  .eqrow[hidden]{display:none}
  .eqbadges{
    display:flex;flex-wrap:wrap;gap:6px;align-items:center;
    margin-top:5px;pointer-events:none;
  }
  .eqb{
    width:30px;height:30px;border-radius:7px;flex:none;
    display:grid;place-items:center;
    background:rgba(0,0,0,.4);
    border:1px solid var(--cor,var(--line));
    box-shadow:0 0 6px -1px var(--cor,transparent);
  }
  .eqb .pxi{opacity:.95}

  /* arma em destaque: 2-3x maior que os demais, moldura mais grossa e brilho
     mais forte reaproveitando a mesma var(--cor) por raridade do item —
     item 19 do roadmap ("badge maior + moldura por raridade") */
  .eqb.eqb-arma{
    width:52px;height:52px;border-radius:10px;
    border-width:2px;
    box-shadow:0 0 12px -1px var(--cor,transparent), 0 0 0 1px var(--cor,transparent) inset;
  }

  @media (max-width:345px){
    .eqbadges{gap:4px}
    .eqb{width:26px;height:26px}
    .eqb.eqb-arma{width:44px;height:44px}
  }
  @media (prefers-reduced-motion:reduce){
    .hero-sprite.temAura::after{animation:none}
  }

/* --- Módulo style #8 --- */
.perfilhero{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;
              padding:16px;margin-bottom:14px;text-align:center}
  .perfilheroLinha{display:flex;align-items:center;gap:16px;text-align:left}
  .perfilheroLinha .hero-sprite{flex:none}
  .perfilheroInfo{flex:1;min-width:0}
  .perfilnome{font-family:'Outfit',sans-serif;font-size:15px;font-weight:600;margin-bottom:10px}
  .perfilhero .bar{margin-bottom:6px}
  .perfilhero .xpnum{display:block}
  /* .xpwrap/.hprow/.hpbar sao reaproveitados do cabecalho da Arena (mesmo
     par hpfill/hpnum, so troca de id) -- aqui dentro do card .perfilhero
     zera o padding/borda pensados pro contexto da Arena, ja que o card
     do Perfil ja tem sua propria borda/padding. */
  .perfilhero .xpwrap{padding:0;border-bottom:none;margin-top:2px}

  .statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
  .statcard{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
            padding:12px;display:flex;flex-direction:column;gap:4px}
  .statlabel{font-family:'Outfit',sans-serif;font-size:11px;color:var(--dim)}
  .statval{font-family:'Silkscreen',monospace;font-size:14px;color:var(--accent)}

/* --- Módulo style #9 --- */
/* .perfiltabs/.pcfg/.perfilpane.oculto removidos daqui -- a fileira de
     pills (Atributos/Conquistas/Bestiário/engrenagem) deixou de existir
     (item 18 do roadmap: Perfil virou rolagem unica, sem sub-abas). A
     engrenagem agora mora no vhead (ver .vheadCfgBtn abaixo). */
  .vheadDireita{display:flex;align-items:center;gap:10px}
  .vheadCfgBtn{width:34px;height:34px;flex:none;display:grid;place-items:center;
    background:var(--panel-3);border:1px solid var(--line);border-radius:10px;
    color:var(--muted);cursor:pointer}
  .vheadCfgBtn svg{width:17px;height:17px}
  .vheadCfgBtn:active{background:var(--accent-dim);color:var(--accent)}

  /* previas (Historico/Conquistas/Bestiario) reaproveitam .cfgrow, que ja
     existia pra Config -- mesmo visual, zero CSS novo pra elas.
     .prevfaixa reaproveita classes visuais que ja existiam em outros
     modulos (.caldia/.calvitoria/.calfuga do Historico, .conqcaticone
     das Conquistas, .bestimg do Bestiario) -- so a faixa horizontal em
     si e nova. */
  .cfgrowtopo{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .prevfaixa{display:flex;gap:6px;margin-top:10px;min-height:32px;
             overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prevfaixa .caldia{width:32px;height:32px;aspect-ratio:unset;flex:none}
  /* pedido do usuario: previa de conquistas so com texto, sem icone --
     chip com cor da conquista na borda/texto em vez de circulo preenchido */
  .prevconqchip{flex:none;display:flex;align-items:center;height:30px;padding:0 11px;
                border-radius:14px;background:var(--panel-3);border:1px solid var(--pv-cor);
                font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;
                color:var(--pv-cor);white-space:nowrap}
  .prevbestimg{width:32px;height:32px;flex:none;object-fit:contain;image-rendering:pixelated;
               border-radius:8px;background:var(--panel-3);padding:3px;box-sizing:border-box}
  .prevvazio{font-family:'Outfit',sans-serif;font-size:11.5px;color:var(--dim);
             display:flex;align-items:center}

  /* overlay de Config -- mesmo padrao de histOverlay/grimOverlay, z-index
     um degrau abaixo (69 vs 70) de proposito: se o usuario abrir o
     Historico de dentro do Config, o Historico precisa pintar por cima. */
  /* v4.141 (pedido do usuario): mesma logica do .edov/.edsheet -- fechar
     era display:none instantaneo, virou transition reversivel (fade +
     leve slide). Beneficia os 7 usos de .cfgOverlay: Config, Heroi,
     Aparencia, Preferencias, Idioma, Conquistas, Bestiario. */
  .cfgOverlay{position:fixed;inset:0;z-index:69;background:var(--bg);
    display:flex;flex-direction:column;overflow:hidden;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateX(14px);
    transition:opacity .24s var(--expo), transform .24s var(--expo), visibility 0s .24s;}
  .cfgOverlay.on{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0);
    transition:opacity .24s var(--expo), transform .24s var(--expo), visibility 0s;}
  .cfgovhead{display:flex;align-items:center;gap:10px;flex:none;
    padding:calc(14px + env(safe-area-inset-top)) 16px 10px;
    border-bottom:1px solid var(--line)}
  .cfgovhead .vtitle{font-family:'Outfit',sans-serif;font-size:16px;font-weight:600;color:var(--text)}
  .cfgvoltar{width:36px;height:36px;flex:none;display:grid;place-items:center;
    background:transparent;border:none;border-radius:50%;color:var(--text);cursor:pointer}
  .cfgvoltar:active{background:rgba(255,255,255,.08)}
  .cfgovcorpo{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
  .cfgovcorpo .edsec{margin:18px 0 8px}
  .cfgovcorpo .edsec:first-child{margin-top:0}

  .cfgrow{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
          padding:12px 13px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .cfgrow.cfgcol{flex-direction:column;align-items:stretch}
  /* item 39: linhas-resumo da tela principal de Config que abrem sub-tela */
  .cfgrow.cfglink{cursor:pointer}
  .cfgrow.cfglink:active{background:var(--panel-3)}
  /* bug reportado: Politica de Privacidade/Termos de Uso sublinhados -- e
     um <a> de verdade (abre externo), sem text-decoration:none herdava o
     sublinhado padrao do navegador em cima do texto inteiro da linha. */
  .cfgrow.cfglink, .cfgrow.cfglink:visited{text-decoration:none;color:inherit}
  .cfgseta{width:18px;height:18px;flex:none;color:var(--dim)}
  .cfgtxt{display:flex;flex-direction:column;gap:2px}
  .cfgtxt b{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--text)}
  .cfgtxt span{font-family:'Outfit',sans-serif;font-size:11.5px;color:var(--dim)}
  .cfgbtn{font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;color:var(--accent);
          background:transparent;border:1px solid var(--accent-dim);border-radius:8px;padding:7px 12px;
          cursor:pointer;flex:none}
  .cfgbtn:hover{background:var(--accent-dim)}
  .cfgbtn.perigo{color:var(--blood);border-color:var(--blood)}
  .cfgbtn.perigo:hover{background:rgba(229,107,107,.12)}

  /* switch liga/desliga (item 39: substitui o botao Vibrar/Som do
     Feedback tatil por um toggle -- ver JS "CONFIG — PREFERENCIA DE
     FEEDBACK NO CLIQUE"). Estrutura: trilho (.swch) + bolinha
     (.swch-bolinha) que desliza via transform quando .on entra. */
  .swch{width:46px;height:26px;flex:none;border-radius:999px;border:none;cursor:pointer;
        background:var(--line);padding:3px;display:flex;align-items:center;
        transition:background .22s var(--expo)}
  .swch.on{background:var(--accent)}
  .swch-bolinha{width:20px;height:20px;border-radius:50%;background:#FFF;
        transition:transform .32s var(--spring-curve)}
  .swch.on .swch-bolinha{transform:translateX(20px)}

  .cfgcol .grade{margin:10px 0 0;grid-template-columns:repeat(4,1fr)}

  .temagrid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
  .temaswatch{width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;flex:none}
  .temaswatch.sel{border-color:var(--text)}

  /* paletas — so custom properties, sem redesenho de layout */
  /* v4.138 (pedido do usuario): tema Azul (meianoite) REMOVIDO da paleta,
     substituido por Branco -- contraparte CLARA do Grafite. Grafite e
     100% grayscale de proposito (item 25 do roadmap, R=G=B em todo
     valor, inclusive gold/blood -- ver comentario dele mais abaixo);
     Branco segue a MESMA filosofia so que invertida (fundo claro, texto
     escuro), pra formar o par "Preto e Branco" que o usuario pediu pra
     aparecer primeiro na lista, antes dos temas coloridos. */
  /* v4.140 (ajuste pedido pelo usuario -- "tema branco ta forte demais"):
     contraste interno suavizado. Um tema claro sempre vai parecer mais
     "forte" do lado de 5 temas escuros (isso e fisico, tela branca emite
     bem mais luz -- nao da pra evitar), mas o contraste PRETO-no-BRANCO
     estava no extremo (#1E1E1E em #EDEDED). Suavizado pra um cinza mais
     morno em vez de branco/preto puros -- mais parecido com o "light
     mode" nativo de iOS/Android (nunca usam #FFF/#000 puros tambem). */
  :root[data-tema="branco"]{
    --bg:#D2D0CB; --panel:#DBD9D4; --panel-2:#CECCC7; --line:#B6B3AC;
    --text:#2E2C29; --muted:#5A564F; --dim:#7F7B73;
    --accent:#2E2C29; --accent-dim:#C4C1BA; --gold:#5C5650; --blood:#78716A;
    --panel-3:#C2BFB8; --poco:#E9E7E3; --sel-bg:#C2BFB8; --mobname:#4A453F;
    --arena-1:#C2BFB8; --arena-2:#CAC7C1; --arena-3:#D4D2CC;
    --xp2:#5C5650;
  }
  :root[data-tema="pergaminho"]{
    --bg:#0F1216; --panel:#0F1216; --panel-2:#151A20; --line:#232A33;
    --text:#E6E9ED; --muted:#8A93A0; --dim:#5A6470;
    --accent:#C9A961; --accent-dim:#3A2F18; --gold:#C9A961; --blood:#9E3B3B;
    --panel-3:#1D2318; --poco:#0A0C0F; --sel-bg:#242A1B; --mobname:#D9A05B;
    --arena-1:#2A2415; --arena-2:#1E1A10; --arena-3:#14110A;
    --xp2:#C9A961;
  }
  /* Ametista e Rosé: mesmo tema Dourado (fundo/neutros identicos),
     só o destaque troca de cor -- pedido do usuario apos ver o
     mockup de comparacao de temas. */
  :root[data-tema="ametista"]{
    --bg:#0F1216; --panel:#0F1216; --panel-2:#151A20; --line:#232A33;
    --text:#E6E9ED; --muted:#8A93A0; --dim:#5A6470;
    --accent:#A98FDE; --accent-dim:#2A2140; --gold:#A98FDE; --blood:#9E3B3B;
    --panel-3:#241E30; --poco:#0A0C0F; --sel-bg:#2C2440; --mobname:#C9B3EA;
    --arena-1:#362A50; --arena-2:#281F3D; --arena-3:#1C1730;
    --xp2:#A98FDE;
  }
  :root[data-tema="rose"]{
    --bg:#0F1216; --panel:#0F1216; --panel-2:#151A20; --line:#232A33;
    --text:#E6E9ED; --muted:#8A93A0; --dim:#5A6470;
    --accent:#E0A5AE; --accent-dim:#3A2027; --gold:#E0A5AE; --blood:#9E3B3B;
    --panel-3:#2A1D22; --poco:#0A0C0F; --sel-bg:#33232A; --mobname:#EDC0C6;
    --arena-1:#3D2830; --arena-2:#2C1E24; --arena-3:#1F151A;
    --xp2:#E0A5AE;
  }
  /* PLANO PRO -- Esmeralda e Terracota: os 2 temas exclusivos do plano
     (item 2 do escopo fechado). Aprovados via mockup de comparacao
     (Artifact) antes de entrar aqui, mesmo fluxo das rodadas de tema
     anteriores. 1a tentativa do 2o tema foi "Azul" (fundo quente +
     destaque frio) -- rejeitado pelo usuario ("nao quero azul de jeito
     nenhum"), substituido por Esmeralda: verde vivo/saturado (bem mais
     vibrante que o antigo tema Floresta/Verde, que era um verde-folha
     desbotado) sobre fundo GRAFITE NEUTRO (nao verde), pra nao repetir
     o problema de fundo-e-destaque-na-mesma-familia que os primeiros
     temas coloridos tiveram. Terracota segue a formula ja aprovada
     (fundo frio + destaque quente), num tom terracota/cobre, mais
     avermelhado que o Laranja e mais terroso que o Sangue. Bloqueio de
     uso (nao-assinante) fica no JS/CSS do seletor (TEMAS[].pro +
     pintarTemaGrid()), nao aqui -- esses blocos de cor sao neutros a
     assinatura. */
  :root[data-tema="esmeralda"]{
    --bg:#12161A; --panel:#12161A; --panel-2:#1A2025; --line:#37414A;
    --text:#EAF1EE; --muted:#9DB0A8; --dim:#66766E;
    --accent:#22C55E; --accent-dim:#123424; --gold:#D9C15C; --blood:#E5484D;
    --panel-3:#232A30; --poco:#0B0D0F; --sel-bg:#1D3327; --mobname:#5EE39A;
    /* arena-1/2/3 = pedra da masmorra (gradiente atras da textura de
       tijolo, ver aplicarFundoTemaArena()). 1a versao ficou cinza-neutro
       quase igual ao Terracota e sem contraste com o --bg -- usuario
       reparou que a parede "nao mudava nada" comparado com Laranja/
       Dourado/Escuro, que tem tom proprio e mais claro. Corrigido pra
       pedra com leve musgo esverdeado, puxando a identidade do tema pra
       dentro da masmorra tambem (mesmo principio do marrom-quente do
       Dourado apesar do fundo dele ser frio). */
    --arena-1:#24352B; --arena-2:#1B2822; --arena-3:#101915;
    --xp2:#22C55E;
  }
  :root[data-tema="terracota"]{
    --bg:#10161C; --panel:#10161C; --panel-2:#18212A; --line:#354655;
    --text:#EDEEEF; --muted:#9DACB9; --dim:#647686;
    --accent:#C96A4A; --accent-dim:#3D2318; --gold:#D9A45C; --blood:#D64B4B;
    --panel-3:#212C37; --poco:#0B1116; --sel-bg:#3D2318; --mobname:#E29676;
    /* mesmo ajuste do Esmeralda acima -- pedra com tom quente/ferrugem,
       puxando a cor do destaque pra dentro da masmorra em vez de ficar
       neutra e parecida com a do Esmeralda. */
    --arena-1:#3D2B22; --arena-2:#2C1F19; --arena-3:#1C130F;
    --xp2:#C96A4A;
  }
  /* item 25 do roadmap — spec fechada em sessao de brainstorm (21/08) */
  /* v4.133 (pedido do usuario, comparando com Habitica real): primeira
     tentativa (--bg #0A0A0A -> #141414) foi tao sutil que na tela real
     nao fez diferenca perceptivel -- usuario testou o arquivo certo,
     tema certo, e continuou "muito escuro". v4.134: recalibrado de
     forma bem mais agressiva, mirando a MESMA FAIXA de luminancia que
     o Habitica usa de verdade no screenshot de referencia (cinza-carvao,
     no bg #0A0A0A para #141414 estava mais que 3x mais escuro que o Habitica;
     agora --bg ~#282828, na faixa certa. Continua 100% grayscale (R=G=B
     em todo valor) -- decisao do item 25 preservada, nao reintroduz cor,
     so aumenta o quanto de cinza. --accent continua #FFFFFF e COR_RAR
     (raridade de item) nao e tocado, fora do sistema de tema. */
  :root[data-tema="grafite"]{
    --bg:#282828; --panel:#323232; --panel-2:#3D3D3D; --panel-3:#494949;
    --line:#5C5C5C; --text:#FAFAFA; --muted:#C2C2C2; --dim:#909090;
    --accent:#FFFFFF; --accent-dim:#4A4A4A;
    --gold:#E8E8E8; --blood:#B8B8B8; --mobname:#E0E0E0; --sel-bg:#4A4A4A; --poco:#1C1C1C;
    --arena-1:#454545; --arena-2:#383838; --arena-3:#2C2C2C; --xp2:#EDEDED;
  }
  /* v4.158 (pedido do usuario -- "o verde-magenta nao combina com o
     app"): Floresta (id mantido por compatibilidade com localStorage
     de quem ja tinha esse tema salvo, label no seletor virou so
     "Verde") refeito do zero via mockup de paleta (Artifact) testado
     antes de entrar em produto -- usuario aprovou a opcao "Verde
     Selva": verde-folha desaturado como destaque, sobre fundo
     verde-musgo bem escuro. Combinacao "natural", sem o contraste
     roxo/magenta bizarro da versao anterior. */
  :root[data-tema="floresta"]{
    --bg:#152018; --panel:#152018; --panel-2:#1E2C22; --panel-3:#26392B;
    --line:#3A5142; --text:#EFEDE4; --muted:#AEC4B2; --dim:#77937D;
    --accent:#6FAE6F; --accent-dim:#22391F; --gold:#D8B45C; --blood:#C15C4E;
    --mobname:#D9A05B; --sel-bg:#2A3B2C; --poco:#0F1712;
    --arena-1:#3A5142; --arena-2:#26392B; --arena-3:#1C2A20; --xp2:#D8B45C;
  }
  /* v4.159 (pedido do usuario -- primeira versao de Arcano/Sangue nao
     ficou boa: "azul arcano nao tem distincao boa sobre o roxo" e
     "sangue nao ficou legal"). Segunda rodada no mockup de paleta,
     com um preview MUITO mais realista (medidas e cores reais tiradas
     do app rodando via getComputedStyle, incluindo elementos que NAO
     mudam de cor com o tema -- pip de dificuldade, barra de vida,
     gradiente da barra de XP, check verde). Usuario aprovou "Sangue
     Rubro" (vermelho vivo/escarlate como destaque, saiu do
     dourado-osso apagado da v1) e "Arcano Espectral" (verde-agua/teal
     neon, saiu de vez da familia roxo/azul que colidia com o Laranja). */
  :root[data-tema="arcano"]{
    --bg:#0C1620; --panel:#0C1620; --panel-2:#13222F; --panel-3:#1B303F;
    --line:#2E4C5C; --text:#E4F3F2; --muted:#9DC2C4; --dim:#5F8C90;
    --accent:#5EEBD1; --accent-dim:#0F3A38; --gold:#D9C15C; --blood:#D6537A;
    --mobname:#7ED4C8; --sel-bg:#1B303F; --poco:#070E14;
    --arena-1:#2E4C5C; --arena-2:#1B303F; --arena-3:#13222F; --xp2:#D9C15C;
  }
  :root[data-tema="sangue"]{
    --bg:#190B0B; --panel:#190B0B; --panel-2:#291010; --panel-3:#391616;
    --line:#5C2020; --text:#F5E8DC; --muted:#D6A08E; --dim:#A16B57;
    --accent:#E8433A; --accent-dim:#4A1512; --gold:#E0B978; --blood:#E8433A;
    --mobname:#E8896F; --sel-bg:#391616; --poco:#120707;
    --arena-1:#5C2020; --arena-2:#391616; --arena-3:#291010; --xp2:#E0B978;
  }

/* --- Módulo style #10 --- */
.baubg{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:95;
         opacity:0;pointer-events:none;transition:opacity .22s}
  .baubg.on{opacity:1;pointer-events:auto}

  .baupop{position:fixed;left:50%;top:50%;z-index:96;
          transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;
          transition:transform .25s cubic-bezier(.2,.9,.3,1.2), opacity .22s;
          background:var(--panel-2);border:1px solid var(--line);border-radius:18px;
          padding:24px 20px 20px;width:min(300px, calc(100% - 56px));text-align:center}
  .baupop.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}

  .bauicone{width:68px;height:68px;margin:0 auto 8px;
            display:flex;align-items:center;justify-content:center}
  .bauicone.abriu{animation:bauPulo .4s ease}
  @keyframes bauPulo{0%{transform:scale(1)}45%{transform:scale(1.2) rotate(-4deg)}100%{transform:scale(1)}}

  .baulabel{font-family:'Silkscreen',monospace;font-size:11px;color:var(--accent);
            letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px}

  .bauitens{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
  .baucard{display:flex;align-items:center;gap:10px;background:var(--panel-2);
           border:1px solid var(--line);border-radius:10px;padding:8px 10px;
           text-align:left;opacity:0;transform:translateY(6px);
           animation:baucardIn .32s ease forwards}
  @keyframes baucardIn{to{opacity:1;transform:translateY(0)}}
  .baubox{width:34px;height:34px;border-radius:8px;background:var(--poco);flex:none;
          display:flex;align-items:center;justify-content:center}
  .bautxt{flex:1;min-width:0}
  .baunome{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--text);
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bauraridade{font-family:'Outfit',sans-serif;font-size:10.5px;font-weight:700;
               text-transform:uppercase;letter-spacing:.05em;margin-top:1px}

  .bauok{width:100%;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;
         padding:11px;border-radius:11px;border:none;background:var(--accent);
         color:var(--bg);cursor:pointer}

  .lvlpop{position:fixed;left:50%;top:50%;z-index:96;
          transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;
          transition:transform .25s cubic-bezier(.2,.9,.3,1.2), opacity .22s;
          background:var(--panel-2);border:1px solid var(--gold);border-radius:18px;
          padding:26px 22px 20px;width:min(280px, calc(100% - 56px));text-align:center;
          box-shadow:0 0 26px -8px var(--gold)}
  .lvlpop.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
  .lvllabel{font-family:'Silkscreen',monospace;font-size:11px;color:var(--muted);
            letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
  .lvlnum{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:700;
          color:var(--gold);line-height:1;margin-bottom:4px}
  .lvlnum.pulou{animation:lvlPulo .45s ease}
  @keyframes lvlPulo{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
  .lvlvida{font-family:'Outfit',sans-serif;font-size:12.5px;color:var(--muted);margin-bottom:16px}
  .lvlvida b{color:var(--text);font-weight:700}
  .lvlok{width:100%;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;
         padding:11px;border-radius:11px;border:none;background:var(--accent);
         color:var(--bg);cursor:pointer}

  /* Tela cheia "Estagio Concluido" -- REESCRITO (pedido do usuario:
     comparando com video de referencia de outro app, queria uma tela
     cheia abrindo, nao um popup pequeno por cima da Arena). Cobre a
     tela inteira (inclusive topbar), fundo solido (nao precisa mais do
     .baubg escurecido nem do backdrop-blur -- e opaco por conta propria),
     com o sprite do heroi centralizado. z-index bem alto (150) pra
     garantir que fica acima de QUALQUER outro overlay. */
  .estagio-tela{
    position:fixed; inset:0; z-index:150;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
    background:var(--bg); padding:24px; text-align:center;
    opacity:0; pointer-events:none; transition:opacity .35s ease;
  }
  .estagio-tela.on{opacity:1; pointer-events:auto}
  /* FIX (pedido do usuario): a animacao de entrada dos elementos (fade+
     sobe) tocava sozinha assim que a tela abria, ANTES do usuario clicar
     em qualquer coisa. Pedido foi: a animacao so deve tocar DEPOIS do
     clique em "Continuar". Entao o conteudo agora aparece estatico junto
     com o fade da propria tela (sem animacao propria nos elementos), e
     quem anima e a SAIDA: ao clicar Continuar, a classe .estagio-tela-
     saindo entra (ver fecharEstagioTelaCompleta() no script), fazendo a
     tela encolher+sumir de vez (zoom leve + fade), no lugar do fade
     simples de opacity que tinha antes -- essa e a animacao que agora
     acontece depois do clique. */
  .estagio-tela-titulo{
    font-family:'Outfit',sans-serif; font-weight:700; font-size:22px; color:var(--text);
  }
  .estagio-tela-hero{
    width:120px; height:120px; object-fit:contain; image-rendering:pixelated;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.5));
  }
  /* Preview do bioma novo -- pedido revisado do usuario: voltou a
     mostrar a imagem CHEIA do tema (tema.arte, a mesma arte de fundo da
     Arena), nao mais a camada unica flutuante (tema.arteEstagio). Como
     agora e um retangulo cheio (nao uma silhueta com fundo transparente
     tipo a montanha), volta a fazer sentido ter moldura: aspect-ratio
     16:9 + object-fit:cover pra recortar certinho, cantos arredondados
     e sombra. Temas sem arte propria (Padrao) nunca chegam aqui -- a
     ceremonia so roda pra Deserto/Floresta/Montanhas. */
  .estagio-tela-preview{
    width:min(280px, calc(100% - 48px)); aspect-ratio:16/9; object-fit:cover;
    border-radius:14px; box-shadow:0 10px 24px -8px rgba(0,0,0,.55);
    image-rendering:pixelated;
  }
  .estagio-tela-sub{
    display:flex; align-items:center; gap:8px;
    font-family:'Silkscreen',monospace; font-size:12px; color:var(--dim); letter-spacing:.04em;
  }
  .estagio-tela-sub-flag{font-size:14px}
  /* Mensagem extra (pedido do usuario) so quando o ULTIMO tema (hoje
     Montanhas) e concluido -- avisa que a partir dai todos os biomas
     ja podem ser escolhidos livremente arrastando a Arena. */
  .estagio-tela-todos{
    max-width:260px; text-align:center; font-family:'Outfit',sans-serif; font-size:13px;
    color:var(--text); background:color-mix(in srgb, var(--accent) 18%, transparent);
    border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius:12px; padding:10px 14px; line-height:1.4;
  }
  .estagio-tela-continuar{
    margin-top:8px; padding:13px 38px; border:none; border-radius:12px; cursor:pointer;
    background:var(--accent); color:var(--bg); font-family:'Outfit',sans-serif; font-weight:600; font-size:14px;
  }
  .estagio-tela.estagio-tela-saindo{
    transition:opacity .38s ease, transform .38s cubic-bezier(.4,0,.7,.3);
    transform:scale(.92); opacity:0;
  }

  .quedapop{position:fixed;left:50%;top:50%;z-index:96;
            transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;
            transition:transform .25s cubic-bezier(.2,.9,.3,1.2), opacity .22s;
            background:var(--panel-2);border:1px solid var(--perigo);border-radius:18px;
            padding:26px 22px 20px;width:min(280px, calc(100% - 56px));text-align:center;
            box-shadow:0 0 26px -8px var(--perigo)}
  .quedapop.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
  .quedaicone{width:56px;height:56px;margin:0 auto 10px;
              display:flex;align-items:center;justify-content:center}
  .quedaicone img{width:56px;height:56px;image-rendering:pixelated;
                   filter:grayscale(1) brightness(.8)}
  .quedalabel{font-family:'Silkscreen',monospace;font-size:11px;color:var(--perigo);
              letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
  .quedatitulo{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:23px;
               font-weight:600;color:var(--text);line-height:1.2;margin-bottom:10px}
  .quedaperda{font-family:'Outfit',sans-serif;font-size:12.5px;color:var(--muted);
              margin-bottom:16px}
  .quedaperda b{color:var(--gold);font-weight:700}
  .quedaok{width:100%;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;
           padding:11px;border-radius:11px;border:none;background:var(--accent);
           color:var(--bg);cursor:pointer}

/* --- Módulo style #11 --- */
.atributospontos{margin-top:14px}
  .atrhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  .atrhead b{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--text)}
  .atrpill{font-family:'Silkscreen',monospace;font-size:11px;color:var(--bg);
           background:var(--accent);padding:4px 10px;border-radius:999px}

  /* cartao por atributo -- fechado (previa) por padrao: so icone/nome/valor,
     cor do atributo (--atr-cor) so como acento no icone, nao fundo inteiro
     (era chapado demais, pedido explicito do usuario pra ficar mais discreto).
     Corpo com descricao + botao de investir fica escondido ate tocar na
     barra, revelado via classe .aberto (ver JS logo abaixo). */
  .atrcard{border-radius:14px;overflow:hidden;background:var(--panel-2);
           border:1px solid var(--line);margin-bottom:10px}
  .atrcard.trava{opacity:.55}
  .atrbarra{display:flex;align-items:center;gap:10px;padding:12px 13px;
            cursor:pointer;-webkit-tap-highlight-color:transparent}
  .atricone{width:18px;height:18px;flex:none;color:var(--atr-cor)}
  .atrnome{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;flex:1;color:var(--text)}
  .atrvalor{font-family:'Silkscreen',monospace;font-size:14px;color:var(--atr-cor)}
  .atrchevron{width:16px;height:16px;flex:none;color:var(--dim);transition:transform .2s ease}
  .atrcard.aberto .atrchevron{transform:rotate(180deg)}
  .atrcorpo{display:flex;align-items:center;justify-content:space-between;gap:10px;
            padding:0 13px;max-height:0;overflow:hidden;
            transition:max-height .22s ease,padding .22s ease}
  .atrcard.aberto .atrcorpo{max-height:80px;padding:0 13px 13px}
  .atrdesc{font-family:'Outfit',sans-serif;font-size:11.5px;color:var(--dim)}
  .atrmais{width:34px;height:34px;flex:none;border-radius:10px;border:1px solid var(--accent-dim);
           background:transparent;color:var(--accent);font-size:18px;font-weight:600;cursor:pointer;
           font-family:'Outfit',sans-serif;line-height:1}
  .atrmais:hover{background:var(--accent-dim)}
  .atrmais:disabled{opacity:.35;cursor:not-allowed;background:transparent}

/* --- Módulo style #12 --- */
.lvlitem{display:flex;align-items:center;gap:10px;margin:12px 0;padding:10px 12px;
    background:#1F1930;border:1px solid #332A4D;border-radius:12px}
  .lvlitembox{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center}
  .lvlitemtxt{font-family:'Outfit',sans-serif;font-size:12.5px;color:#B3A8D4;line-height:1.35}
  .lvlitemtxt b{color:#5AE0D8}

  .grimOverlay{position:fixed;inset:0;z-index:70;background:#15111F;display:none;
    flex-direction:column;overflow:hidden}
  .grimOverlay.on{display:flex}
  .grimHead{display:flex;align-items:center;justify-content:space-between;
    padding:16px 16px 10px;border-bottom:1px solid #332A4D;flex:none}
  .grimHead h2{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;
    font-size:22px;color:#EFEAFB;margin:0}
  .grimFechar{width:40px;height:40px;border-radius:10px;background:#201A32;border:1px solid #332A4D;
    color:#EFEAFB;font-size:20px;line-height:1;cursor:pointer;flex:none}
  .grimSub{padding:8px 16px;font-family:'Outfit',sans-serif;font-size:12px;color:#7C7196;flex:none}
  .grimScroll{flex:1;overflow-y:auto;padding:6px 16px 24px}
  .grimGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  @media(min-width:420px){ .grimGrid{grid-template-columns:repeat(5,1fr)} }
  .grimcel{aspect-ratio:1;border-radius:10px;background:#201A32;border:1px solid #332A4D;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px;overflow:hidden}
  .grimcel.grimok{cursor:pointer}
  .grimcel .grimrar{font-family:'Outfit',sans-serif;font-size:9px;font-weight:700;
    text-transform:uppercase;letter-spacing:.03em}
  .grimsilhueta{filter:brightness(0);opacity:.32}

/* --- Módulo style #13 --- */
.conqcat{margin-bottom:32px}

  .conqcabecalho{display:flex;align-items:center;gap:11px;margin-bottom:16px}
  .conqcaticone{width:34px;height:34px;flex:none;border-radius:50%;display:flex;align-items:center;
                justify-content:center;background:var(--conqcat-cor);color:#1A1526}
  .conqcaticone svg{width:18px;height:18px}
  .conqcattxt{flex:1;min-width:0}
  .conqcatnome{font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;color:var(--conqcat-cor)}
  .conqcatsub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

  /* CONQUISTAS V2 -- lista plana (Minhas conquistas / Não desbloqueadas), sem
     arvore/tiers visiveis. Reaproveita .edsec (rotulo de secao, ja usado
     em Config) pros dois cabecalhos. */
  .conqv2item{display:flex;align-items:center;gap:12px;padding:11px 2px;
              border-bottom:1px solid var(--line)}
  .conqv2item:last-child{border-bottom:none}
  .conqv2txt{flex:1;min-width:0}
  .conqv2nome{font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:700;color:var(--text)}
  .conqv2item.trancado .conqv2nome{color:var(--muted)}
  .conqv2desc{font-family:'Outfit',sans-serif;font-size:11.5px;color:var(--dim);margin-top:2px}
  .conqv2data{font-family:'Silkscreen',monospace;font-size:9.5px;color:var(--dim);flex:none;white-space:nowrap}
  .conqcatcontagem{font-family:'Silkscreen',monospace;font-size:13px;letter-spacing:.02em;color:var(--muted);flex:none}
  .conqcatcontagem b{color:var(--conqcat-cor)}

  .conqtrilha{position:relative;padding-left:38px}

  .conqmarco{position:relative;padding-bottom:20px}
  .conqmarco:last-child{padding-bottom:0}
  .conqmarco::before{content:'';position:absolute;left:-25px;top:26px;bottom:-2px;width:2px;background:var(--line)}
  .conqmarco:last-child::before{display:none}
  .conqmarco.feito::before,.conqmarco.pendente::before{background:var(--conqcat-cor)}

  .conqno{position:absolute;left:-38px;top:0;width:26px;height:26px;border-radius:50%;
          display:flex;align-items:center;justify-content:center;flex:none;
          background:var(--panel-2);border:2px solid var(--line)}
  .conqno svg{width:12px;height:12px;color:var(--dim);opacity:.5}
  .conqmarco.feito .conqno{border-color:var(--conqcat-cor);background:var(--conqcat-cor)}
  .conqmarco.feito .conqno svg{color:#1A1526;width:13px;height:13px;opacity:1}
  .conqmarco.atual .conqno{border-color:var(--conqcat-cor)}
  .conqmarco.pendente .conqno{border-color:var(--conqcat-cor);background:var(--conqcat-cor);
                               animation:conqPulsa 1.6s ease-in-out infinite}
  .conqmarco.pendente .conqno svg{color:#1A1526;width:14px;height:14px;opacity:1}
  @keyframes conqPulsa{
    0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--conqcat-cor) 45%, transparent)}
    50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--conqcat-cor) 0%, transparent)}
  }

  .conqcorpo{padding-top:1px}
  .conqmnome{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:var(--text);letter-spacing:.01em}
  .conqmarco.bloq .conqmnome{color:var(--muted)}
  .conqreq{font-family:'Outfit',sans-serif;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
  .conqmarco.bloq .conqreq{color:var(--dim)}
  .conqfracao{font-family:'Silkscreen',monospace;font-size:13px;letter-spacing:.02em;color:var(--conqcat-cor);margin-top:6px;display:inline-block}

  .conqxpprevia{font-family:'Outfit',sans-serif;font-size:11px;color:var(--dim);margin-top:5px;display:inline-block}
  .conqxpfeito{font-family:'Outfit',sans-serif;font-size:11px;color:var(--conqcat-cor);margin-top:5px;display:inline-block}
  .conqreceber{margin-top:8px;font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:700;
               padding:8px 14px;border-radius:999px;border:none;cursor:pointer;
               background:var(--conqcat-cor);color:#1A1526}

  .conqtudo{display:block;width:100%;margin-bottom:18px;padding:13px;border:none;border-radius:14px;
            cursor:pointer;background:var(--accent);color:var(--bg);
            font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;text-align:center}

  /* balaozinho de notificacao -- injetado via JS em cima do botao da
     sub-aba Conquistas e do botao "Perfil" da nav inferior */
  .conqbadge{position:absolute;top:2px;right:8px;min-width:16px;height:16px;padding:0 4px;
             border-radius:999px;background:var(--perigo,#F45781);color:#fff;
             font-family:'Silkscreen',monospace;font-size:9px;
             display:none;align-items:center;justify-content:center;
             box-shadow:0 0 0 2px var(--panel-2)}

/* --- Módulo style #14 --- */
.bestsub{font-family:'Outfit',sans-serif;font-size:12px;color:var(--dim);margin-bottom:10px}
  .bestgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .bestcel{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
           padding:8px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:4px}
  .bestimg{width:36px;height:36px;image-rendering:pixelated;object-fit:contain}
  .bestimg.bestsilhueta{filter:brightness(0);opacity:.32}
  .bestnome{font-family:'Outfit',sans-serif;font-size:8.5px;font-weight:600;color:var(--muted);
            text-align:center;line-height:1.2;max-width:100%;overflow:hidden;
            text-overflow:ellipsis;white-space:nowrap}

/* --- Módulo style #15 --- */
.histOverlay{position:fixed;inset:0;z-index:70;background:var(--bg);display:none;
    flex-direction:column;overflow:hidden}
  .histOverlay.on{display:flex}
  .histHead{display:flex;align-items:center;justify-content:space-between;
    padding:16px 16px 10px;border-bottom:1px solid var(--line);flex:none}
  .histHead h2{font-family:'Outfit',sans-serif;font-weight:700;font-size:18px;color:var(--text);margin:0}
  .histFechar{width:40px;height:40px;border-radius:10px;background:var(--panel-2);
    border:1px solid var(--line);color:var(--text);font-size:20px;line-height:1;cursor:pointer;flex:none}
  .histScroll{flex:1;overflow-y:auto;padding:16px}

  .calnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .calnav button{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
                 background:var(--panel-2);color:var(--text);font-size:18px;cursor:pointer;
                 font-family:'Outfit',sans-serif;line-height:1}
  .calnav button:hover{background:var(--accent-dim)}
  .calnav span{font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;color:var(--text);
               text-transform:capitalize}

  .caldiassemana{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
  .caldiassemana span{font-family:'Outfit',sans-serif;font-size:10px;font-weight:600;
                       color:var(--dim);text-align:center}

  .calgrade{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:14px}
  .caldia{aspect-ratio:1;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);
          display:flex;align-items:center;justify-content:center;position:relative;
          font-family:'Outfit',sans-serif;font-size:11px;color:var(--muted)}
  .caldia.calvazio{background:transparent;border-color:transparent}
  .caldia.calhoje{border-color:var(--accent);border-width:2px}
  .caldia.calvitoria{background:rgba(99,201,154,.18);border-color:var(--verde);color:var(--text)}
  .caldia.calfuga{background:rgba(244,87,129,.16);border-color:var(--perigo);color:var(--text)}
  .caldia.calsemtarefa{background:var(--panel-3);border-color:var(--line);color:var(--dim)}

  .callegenda{display:flex;gap:14px;flex-wrap:wrap;font-family:'Outfit',sans-serif;
              font-size:11px;color:var(--dim)}
  .callegenda span{display:flex;align-items:center;gap:5px}
  .calponto{width:9px;height:9px;border-radius:50%;flex:none}
  .calponto.calvitoria{background:var(--verde)}
  .calponto.calfuga{background:var(--perigo)}
  .calponto.calsemtarefa{background:var(--dim)}

/* --- Módulo style #16 --- */
/* fundo = tijolo pixel (padrao de alvenaria, ver pintarParede() no
     script abaixo) + o sprite fixo do Grimorio Proibido flutuando ao lado
     do titulo, so de enfeite. */
  .intro.loginBg{background-color:#0B0710}
  .loginSprite{margin:0 auto 4px;animation:respira 2.4s ease-in-out infinite}

  /* cada elemento do formulario se destaca sozinho em cima do tijolo
     (campo com fundo solido + icone, botao Entrar preenchido, sombra
     de texto nos labels/links) */
  /* v4.120: #passoLogin ganha padding-top reservando o espaco onde o
     cenario real (Montanhas) fica -- a imagem em si NAO mora mais aqui
     dentro (ver #introCenario/.fundoGradCamada, camadas fixas irmas de
     .card, mais abaixo neste arquivo) porque #passoLogin vira
     .carrosselSlide e leva transform durante o swipe, o que cortava a
     imagem quando ela era filha daqui. */
  /* justify-content:flex-start (em vez do "center" herdado de
     .carrosselSlide) -- com .loginEscolha (tela de escolha, curta) o
     center deixava uma folga enorme entre o cenario e o conteudo; o
     mockup mostra o conteudo colado logo abaixo do cenario. */
  /* FIX (v4.123, pedido do usuario com print): o mockup usa
     .cenarioTopo{height:56%} DENTRO do .telafone (o "celular" em
     miniatura do mockup, 230px de largura so pra visualizacao lado a
     lado) -- eu tinha portado o valor em PIXEL (150px) sem escalar pra
     tela real, o que deixava o cenario minusculo e desproporcional (por
     isso a "escala" parecia errada -- nao eram os botoes em si, era o
     cenario ocupando so ~18% da tela em vez de mais da metade). Troca
     pra vh, proporcional a tela de verdade, igual o mockup pretendia. */
  /* FIX (v4.128, bug relatado pelo usuario com video do Habitica): o
     padding-top:52vh SOMAVA com a altura do conteudo (.loginEscolha,
     ~228px) -- em celular de verdade, com a barra de endereco do Chrome
     visivel, a altura util da viewport fica bem menor que window.innerHeight
     usado pelo "vh" do CSS. Resultado: 52vh + conteudo ultrapassava a
     tela e #intro (overflow-y:auto) forcava scroll so pra ver os botoes
     -- exatamente o que o Habitica NUNCA faz (o video mostra os botoes
     sempre visiveis, sem arrastar nada). #passoLogin (.carrosselSlide)
     ja tem inset:0 (altura = 100% do espaco disponivel de verdade, nunca
     maior que a tela) -- entao troca o padding-top fixo por
     justify-content:flex-end: sem nenhuma reserva de espaco em vh, o
     conteudo so gruda no fundo do espaco que sobrou, adaptando sozinho a
     qualquer altura de tela/barra do navegador, sem jamais estourar. */
  #passoLogin.carrosselSlide{justify-content:flex-end}
  .loginEscolha{margin-top:18px;margin-bottom:8px}
  #passoLogin .titulo{font-family:'Silkscreen',monospace !important;color:#F2A65A !important;
                       font-size:19px !important;letter-spacing:1px !important;
                       text-transform:none !important;font-style:normal !important;
                       text-shadow:0 2px 10px rgba(0,0,0,.85)}
  #passoLogin .campo label{text-shadow:0 1px 4px rgba(0,0,0,.85)}
  .campoIcone{position:relative}
  .campoIc{position:absolute;left:14px;bottom:13px;width:20px;height:20px;color:var(--dim);pointer-events:none}
  .campoIc svg{width:100%;height:100%}
  .campoIcone input{padding-left:44px !important}
  .campoStatus{position:absolute;right:14px;bottom:13px;width:20px;height:20px;pointer-events:none;display:none}
  .campoStatus svg{width:100%;height:100%}
  .campoStatus .icOk,.campoStatus .icErro{display:none}
  .campoStatus.ok{display:block;color:#4ADE80}
  .campoStatus.ok .icOk{display:block}
  .campoStatus.erro{display:block;color:var(--perigo)}
  .campoStatus.erro .icErro{display:block}
  #loginSenha, #loginSenhaConfirmar{padding-right:40px !important}

  /* botao Entrar: o onboarding padrao usa contorno vazado (ver regra
     global .primario mais acima no arquivo), mas em cima do tijolo
     isso some -- aqui, so dentro do login, ele fica preenchido/solido */
  #passoLogin .primario{background:var(--accent) !important;color:#14101c !important;
                         border:none !important;text-transform:none !important;letter-spacing:normal !important;
                         font-size:15px !important;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.45);
                         border-radius:999px !important}
  #passoLogin .loginGoogleBtn{border-radius:999px}
  #passoLogin .primario:hover{background:var(--accent) !important;filter:brightness(1.08)}
  #passoLogin .secundario,#passoLogin .loginLink,#passoLogin .loginRodape,#passoLogin .loginDivisor{
    text-shadow:0 1px 4px rgba(0,0,0,.85)}

  /* v4.121: tela de escolha (1a tela do login, igual ao mockup) -- so
     wordmark+tagline+2 botoes+link. O formulario completo (email/senha/
     cadastro, ja existente, zero mudanca de logica) fica em
     .loginFormWrap, escondido ate a pessoa escolher "Continuar com
     email" ou "Entrar" (ver JS logo apos o insertAdjacentHTML). */
  .loginEscolha{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
                width:100%;padding:0 4px}
  .loginEscolha .marca{margin-bottom:0}
  .loginEscolha .titulo{font-size:26px !important}
  .loginEscolhaTagline{font-size:15px;color:var(--dim);text-shadow:0 1px 4px rgba(0,0,0,.85);margin-top:-4px}
  /* FIX (v4.123): os botoes de escolha (CTA principal da tela) reusam
     .loginGoogleBtn, mas com padding/fonte proprios, maiores que o botao
     Google "de dentro" do formulario (.loginFormWrap .loginGoogleBtn,
     intocado) -- no mockup esses 2 botoes sao o elemento dominante da
     tela, nao um botao secundario pequeno. */
  .loginEscolha .primario,.loginEscolha .loginGoogleBtn{width:100%;padding:17px;font-size:16.5px}
  /* v4.132 (pedido do usuario, print do Habitica: "copiar exatamente
     assim"): la os DOIS botoes (Google e email) sao pilulas BRANCAS
     identicas -- so o icone muda (G colorido vs. envelope colorido).
     Removido o fundo roxo-escuro que esse botao tinha antes -- agora
     so herda o branco/texto escuro padrao de .loginGoogleBtn, igual
     ao de cima. O icone virou o emoji nativo "📧" (span.loginEmailEmoji,
     ver #passoLogin no <script>) em vez de um SVG monocromatico --
     e exatamente o que renderiza colorido feito no Habitica. */
  .loginGoogleBtn.email .loginEmailEmoji{font-size:19px;line-height:1}
  .loginEscolha .loginRodape{font-size:14px;margin-top:2px}
  .loginFormWrap{display:flex;flex-direction:column;gap:18px}
  /* v4.129: transicao escolha->form (ver abrirFormLogin() no <script>
     do #passoLogin) -- desliza+fade em vez da troca seca de display */
  .loginEscolha,.loginFormWrap{transition:opacity .26s ease,transform .26s ease}
  .loginEscolha.loginSlideOut{opacity:0;transform:translateX(-26px)}
  .loginFormWrap.loginSlideIn{opacity:0;transform:translateX(26px)}
  /* v4.131: reverso (voltar do form pra escolha, ver
     window.voltarParaEscolhaLogin) -- direcoes trocadas de proposito
     (form sai pela DIREITA por onde entrou, escolha entra pela
     ESQUERDA por onde saiu) pra parecer uma navegacao "pra tras" de
     verdade, nao a mesma animacao tocada ao contrario */
  .loginFormWrap.loginSlideOut{opacity:0;transform:translateX(26px)}
  .loginEscolha.loginSlideIn{opacity:0;transform:translateX(-26px)}
  /* v4.131 (pedido do usuario, print do Habitica): o formulario de
     email nao precisa repetir o botao Google/divisor "ou" -- a tela de
     escolha (.loginEscolha) ja oferece Google, e voltar pra ela agora
     e so apertar a seta (ver window.voltarParaEscolhaLogin). Mantido
     no DOM (nao removido) porque loginEscolhaGoogle.onclick ainda
     dispara um .click() nele por baixo dos panos -- so escondido
     visualmente aqui. */
  #loginFormWrap #loginGoogleBtn,#loginFormWrap .loginDivisor{display:none}

  .loginTopBtns{position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;
                display:flex;gap:8px;z-index:90}
  .miniBtn{width:34px;height:34px;border-radius:50%;background:rgba(21,17,32,.72);
           border:1px solid var(--line);color:var(--muted);display:grid;place-items:center;
           cursor:pointer;backdrop-filter:blur(2px);transition:border-color .15s,color .15s}
  .miniBtn:hover{border-color:var(--accent-dim);color:var(--accent)}
  .miniBtn svg{width:17px;height:17px}

  #passoLogin .marca{margin-bottom:2px}
  .loginModo{font-size:14px;color:var(--dim);text-shadow:0 1px 4px rgba(0,0,0,.85);
             transition:opacity .15s}
  .loginDivisor{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:12px}
  .loginDivisor::before,.loginDivisor::after{content:'';flex:1;height:1px;background:var(--line)}
  .loginGoogleBtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
                  background:#fff;color:#1A1526;border:none;border-radius:11px;padding:13px;
                  font-family:'Outfit',sans-serif;font-size:14.5px;font-weight:600;cursor:pointer}
  .loginGoogleBtn svg{width:18px;height:18px}
  .loginLinha{display:flex;justify-content:space-between;align-items:center}
  .loginLink{background:none;border:none;color:var(--accent);font-family:'Outfit',sans-serif;
             font-size:12.5px;cursor:pointer;padding:4px 0}
  .loginRodape{text-align:center;font-size:13px;color:var(--dim)}
  .loginSenhaErro{font-size:12px;color:var(--perigo);margin-top:-8px}

  #passoBoasVindas{align-items:center;text-align:center;gap:28px}
  #passoBoasVindas .marca{gap:6px}
  .boasVindasRotulo{font-size:14px;color:var(--dim);text-shadow:0 1px 4px rgba(0,0,0,.85)}
  #boasVindasNome{font-size:30px;font-family:'Outfit',sans-serif;font-weight:700;
                  letter-spacing:normal;text-shadow:0 2px 10px rgba(0,0,0,.85)}
  #passoBoasVindas .primario{width:100%}

  /* v4.124 (item 34 do roadmap): trava de verificacao de email */
  /* v4.129 (tela estava poluida): .verificarBloco junta a mensagem
     principal + aviso de spam com gap apertado (sao relacionados,
     devem ler como uma unidade mais discreta que o CTA). O gap GRANDE
     (22px, no #passoVerificarEmail) fica ENTRE os grupos, nao dentro
     deles -- e isso que cria a hierarquia.
     v4.132 (poluida de novo, botao "Ja confirmei"/"Verificar agora"
     removido): a checagem virou 100% automatica (poll a cada 4s, ver
     confirmarSeVerificado/confirmarSeVerificadoOverlay no bloco
     Firebase) -- sobrou so "Reenviar email" (agora .primario, e o
     unico CTA que resta) e "Email errado? Corrigir" (link isolado). */
  #passoVerificarEmail{align-items:center;text-align:center;gap:22px}
  #passoVerificarEmail .marca{gap:6px}
  .verificarBloco{display:flex;flex-direction:column;gap:6px}
  .verificarTexto{font-size:14px;color:var(--dim);line-height:1.5;
                   text-shadow:0 1px 4px rgba(0,0,0,.85)}
  .verificarSpamAviso{font-size:12px;color:var(--dim);opacity:.6}
  #verificarEmailAlvo{font-weight:600;color:var(--fg,#fff)}
  #passoVerificarEmail .primario{width:100%}

  /* v4.124: overlay de bloqueio pro caminho "silencioso" (ja tem save
     local, #passoLogin nem existe no DOM) -- standalone, fixed, nao
     depende de #intro/.off. Reaproveita as mesmas classes .primario/
     .verificarBloco ja definidas acima. */
  #bloqueioVerificacaoEmail{position:fixed;inset:0;z-index:9999;
    background:var(--bg);display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;
    gap:22px;padding:32px}
  #bloqueioVerificacaoEmail .titulo{font-size:22px}
  #bloqueioVerificacaoEmail .primario,
  #bloqueioVerificacaoEmail .verificarBloco{width:100%;max-width:340px}

/* --- Módulo style #17 --- */
.carrosselTopo{display:flex;align-items:center;justify-content:space-between}
  .carrosselTopoLado{flex:1;display:flex}
  .carrosselTopoEsq{justify-content:flex-start}
  .carrosselTopoDir{justify-content:flex-end}
  .carrosselVoltar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);
                    border:none;color:var(--text);display:grid;place-items:center;cursor:pointer;
                    visibility:hidden;flex:none}
  .carrosselVoltar.visivel{visibility:visible}
  .carrosselVoltar svg{width:18px;height:18px}
  .carrosselDots{display:flex;gap:7px;flex:none}
  .carrosselDot{width:7px;height:7px;border-radius:50%;background:var(--line)}
  .carrosselDot.on{background:var(--accent)}
  /* v4.117 (item 42-h do roadmap): .carrosselPular removido -- botao
     "Pular" tirado do topo do carrossel (pedido do usuario). O link
     "Ja tem conta?" (abaixo) continua sozinho no lado direito do topo. */
  /* v4.116 (item 42-e do roadmap): login deixou de ser um passo
     numerado do carrossel -- vira um "desvio" opcional, acessivel a
     qualquer momento por este link discreto no topo (persiste em
     TODOS os slides, ao contrario de Pular que some a partir do
     slide 4). Ver irParaLogin()/voltarDoLoginCarrossel() mais abaixo. */
  .carrosselEntrarLink{background:none;border:none;color:var(--accent);font-family:'Outfit',sans-serif;
                        font-size:12px;letter-spacing:.02em;cursor:pointer;padding:8px;flex:none;
                        text-decoration:underline;text-underline-offset:2px}
  .carrosselEntrarLink:hover{filter:brightness(1.2)}

  /* fixed;inset:0 tira o splash do fluxo do .card -- ele nao fica preso
     no max-width:400px/padding que .card usa pro resto do onboarding.
     z-index avaliado dentro do stacking context de #intro (que ja tem
     position:fixed + z-index proprio), entao basta ficar acima de tudo
     o que #intro contem -- nao precisa disputar com o resto da pagina. */
  #passoSplash{position:fixed;inset:0;z-index:1;
               background-image:radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--arena-1) 42%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 65%), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAKCAYAAADVTVykAAABfElEQVR4nJ2TwU7CQBCGvxKMQeCEXojGlMvWIw/AnfIOwh0egYfwpIneQJ4Bn4L22r10SeCoJ0CDJVkvdNPWgsT/srM738x0Z6fWZDKpPwyHdLpdlFK0222yklIyHY3o9HoHmVMUBAFvr6+49/copXBdl6KUkkW0JgxDGo0GUspfgUIInnefKKWwbTuXOUWO4/ASbZjP56ZWAeD6rILrugcD/1vwUJ5kBwsAH6sVUkqEEMbheR6e5xm7tNXYtp3LJLnkmrUBSludqmXd1mp1nQCuKpVUgN5/YJ5q1SrW3l5EGwBuzsosok1qjfW+XgPwdW6Z82K33wdg9PREr9//c8iklIwfH+kOBoRhePTpYn46HnPXagH8yl2Mjcty+eggxhJCUKtWT2Jjfrq38wa4kNz8dZv4RstofRIb84toc7CrpgPL3WcuoLVO7X3fB20Zn2VZeWHpHEd8pgPZ6QSYzWamqO/7ADSbTUrfmiAIcBzHsNm/ITn9F5ncSd8PSsnXJX9WpAwAAAAASUVORK5CYII=");
               background-size:cover, 130px 41px;
               background-repeat:no-repeat, repeat;
               background-position:center, center;
               align-items:center;justify-content:center}
  .carrosselImgWrap{display:flex;justify-content:center;align-items:center;min-height:96px}
  .carrosselImgGrande{width:168px;height:168px;image-rendering:pixelated}
  .carrosselGrupo{gap:12px}
  .carrosselImgMini{width:72px;height:72px;image-rendering:pixelated}

  /* v4.14x: slides 2/3 do onboarding (golpe/bau) -- loop CSS puro,
     reaproveitando os mesmos assets/classes do combate real
     (--spr-slash-comum, --bau-fechado/--bau-aberto, .baucard/.baubox/
     .bautxt/.baunome/.bauraridade ja existentes acima). Sem JS de
     timing: cada ciclo e 100% CSS, nao trava/desincroniza. */
  .obPalco{position:relative;width:100%;height:150px}
  /* v4.134 (pedido do usuario: o golpe demorava pra COMECAR quando a
     pessoa entrava no slide -- 1728ms parado ate o 1o flash, chance
     grande de ja ter passado pro proximo slide sem ver nada). Fix NAO e
     acelerar o ciclo inteiro (isso mudaria o ritmo/duracao do loop de
     verdade, que continua 3.2s) -- e usar animation-delay NEGATIVO pra
     "adiantar" a animacao pro ponto logo antes do golpe (48% de 3.2s)
     assim que o slide fica visivel, entao o 1o flash aparece em ~190ms
     em vez de ~1728ms. Repeticoes seguintes continuam no ritmo normal
     de 3.2s (so a largada e que muda). iniciarCicloGolpe() no JS foi
     ajustado igual, pro popup de moeda+XP continuar sincronizado com o
     flash (ver comentario la, mais abaixo no arquivo). */
  .obHeroSp{position:absolute;left:6%;bottom:0;height:126px;width:auto;
            image-rendering:pixelated;animation:obHeroLunge 3.2s ease-in-out infinite;animation-delay:-1.536s}
  .obMobSp{position:absolute;right:6%;bottom:4px;height:108px;width:auto;
           image-rendering:pixelated;animation:obMobShake 3.2s ease-in-out infinite;animation-delay:-1.536s}
  @keyframes obHeroLunge{
    0%,50%{transform:translateX(0)}
    55%{transform:translateX(12px)}
    62%,100%{transform:translateX(0)}
  }
  @keyframes obMobShake{
    0%,53%{transform:translate(0,0) rotate(0);filter:none}
    56%{transform:translate(-5px,-2px) rotate(-6deg);filter:brightness(0) invert(1)}
    59%{transform:translate(4px,1px) rotate(5deg);filter:brightness(0) invert(1)}
    62%{transform:translate(-2px,0) rotate(-2deg);filter:none}
    66%,100%{transform:translate(0,0) rotate(0);filter:none}
  }
  .obSlashFx{position:absolute;right:22%;bottom:34px;width:56px;height:56px;
             background-image:var(--spr-slash-comum);background-repeat:no-repeat;
             background-size:504px 56px;background-position:0 0;
             filter:grayscale(1) brightness(2.4);image-rendering:pixelated;
             opacity:0;animation:obSlash 3.2s linear infinite;animation-delay:-1.536s}
  @keyframes obSlash{
    0%,53%{opacity:0;background-position:0 0}
    54%{opacity:1;background-position:0 0;animation-timing-function:steps(9)}
    63%{opacity:1;background-position:-504px 0}
    64%,100%{opacity:0}
  }
  .obRecIcon{position:absolute;width:14px;height:14px;opacity:0;pointer-events:none;
             right:24%;bottom:64px;animation:obIconVoo 3.2s ease-in infinite}
  .obRecIcon svg{width:100%;height:100%;image-rendering:pixelated}
  .obRecIcon.xp{animation-delay:.08s}
  @keyframes obIconVoo{
    0%,65%{opacity:0;transform:translate(0,0)}
    67%{opacity:1;transform:translate(0,0)}
    80%{opacity:1;transform:translate(-58%,-30px)}
    81%,100%{opacity:0}
  }
  .obRecompensa{position:absolute;left:8%;bottom:80px;display:flex;flex-direction:column;
                gap:2px;font-size:12px;font-weight:700;opacity:0;pointer-events:none;
                animation:obRecompensaPop 3.2s ease-out infinite}
  .obRecompensa .obMoeda,.obRecompensa .obXp{display:flex;align-items:center;gap:3px}
  .obRecompensa .obMoeda{color:var(--gold)}
  .obRecompensa .obXp{color:var(--text)}
  .obRecompensa svg{width:13px;height:13px;image-rendering:pixelated}
  @keyframes obRecompensaPop{
    0%,80%{opacity:0;transform:translateY(4px)}
    84%{opacity:1;transform:translateY(0)}
    95%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(-6px)}
  }

  .obBauWrap{flex-direction:column;gap:12px;width:100%}
  .obBauImg{width:96px;height:96px;background-size:contain;background-repeat:no-repeat;
            background-position:center;image-rendering:pixelated;
            background-image:var(--bau-fechado);
            animation:obBauAbre 3.4s ease-in-out infinite;animation-delay:-.85s}
  @keyframes obBauAbre{
    0%,29%{background-image:var(--bau-fechado);transform:scale(1)}
    31%{transform:scale(1.08)}
    33%,100%{background-image:var(--bau-aberto);transform:scale(1)}
  }
  .obBauItens{width:100%;max-width:280px;margin:0 auto}
  .obBauItens .baucard{opacity:0;transform:translateY(6px);
                        animation:obBaucardCiclo 3.4s ease infinite;animation-delay:-.85s}
  .obBauItens .baucard:nth-child(2){animation-delay:-.7s}
  @keyframes obBaucardCiclo{
    0%,37%{opacity:0;transform:translateY(6px)}
    45%,92%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(6px)}
  }

  /* v4.15x: redesign visual do onboarding (pedido do usuario) -- dots no
     rodape (perto do botao, nao mais no topo), titulo em Outfit bold
     (nao mais Silkscreen, exceto no wordmark DUNGEONLOG do slide 1 e no
     login, que ficam como estao), botao em pilula translucida. Fundo
     gradiente por slide fica em JS (pintarFundoOnboarding(), reaproveita
     o mesmo mecanismo de intro.style.backgroundImage que pintarParede()
     ja usa) -- via CSS sozinho o gradiente ficaria preso dentro do
     padding do .card/.intro e sobraria uma borda da parede antiga
     (era exatamente o "mistura com a tela antiga" reportado). */
  #passoCarrosselTudo{position:relative}
  .carrosselDots{position:absolute;left:0;right:0;bottom:78px;justify-content:center;pointer-events:none}
  .carrosselSlide:not([data-slide="1"]):not([data-slide="login"]) .titulo{
    font-family:'Outfit',sans-serif !important;font-weight:800 !important;font-size:22px !important;
    letter-spacing:-.01em !important;color:#fff !important;text-transform:none !important;font-style:normal !important}
  .carrosselSlide:not([data-slide="1"]):not([data-slide="login"]) .lema{
    color:rgba(255,255,255,.85) !important;font-style:normal !important;font-family:'Outfit',sans-serif !important}
  .carrosselSlide:not([data-slide="login"]) .primario{
    border-radius:999px !important;background:rgba(0,0,0,.28) !important;color:#fff !important;
    border:none !important;box-shadow:none !important;text-transform:none !important;letter-spacing:normal !important}

  /* headline em 2 linhas (fraca+forte), copia exata do mockup
     (mockup_onboarding_animado.html: .headline .fraca/.forte) -- usado
     so nos slides golpe/bau (SLIDES com campo "fraca" preenchido). */
  .obHeadline{text-align:center;margin-top:4px}
  .obFraca{display:block;font-family:'Outfit',sans-serif !important;font-size:13px !important;
           font-weight:500 !important;opacity:.75;margin-bottom:5px;color:#fff !important;font-style:normal !important}
  .obForte{display:block;font-family:'Outfit',sans-serif !important;font-size:21px !important;
           font-weight:800 !important;letter-spacing:-.01em !important;color:#fff !important;font-style:normal !important}
  .obCorpo{text-align:center;font-size:12.5px;line-height:1.55;opacity:.88;margin-top:12px;
           max-width:260px;margin-left:auto;margin-right:auto;color:#fff;font-family:'Outfit',sans-serif;
           position:relative;z-index:2}
  .obHeadline{position:relative;z-index:2}

  /* slide "estagio": cross-fade entre 2 cenarios reais (TEMAS_ARENA),
     copia exata do mockup (estagioBg/estagioPillDemo). z-index:-1 pra
     ficar atras do headline/corpo (acima) e dos dots/botao (fora do
     .carrosselMeio) sem precisar mexer na stacking order deles. */
  /* v4.120: fundo do onboarding inteiro (gradiente por slide + cenario
     real do estagio/login) virou 2+1 camadas FIXAS, IRMAS de .card
     dentro de #intro -- ver pintarFundoOnboarding()/mostrarCenarioEstagio()/
     mostrarCenarioLogin() no script do carrossel. Antes, tanto o
     gradiente (via inline style em #intro) quanto o cenario real
     (.obEstagioBg, filha do .carrosselSlide) tentavam bleedar com margem
     negativa calculada a mao pra compensar os paddings de .intro/.card --
     so que .carrosselSlide leva transform durante o swipe (deslizar()),
     o que quebra esse calculo e cortava a imagem no topo (bug relatado
     pelo usuario). Camadas fixas, fora do elemento que anima, resolvem
     os dois problemas de uma vez: bleed sempre exato relativo a
     viewport, e a troca de gradiente agora cross-fadeia (opacity
     transition) em vez de trocar na hora.
     fundoGradCamada = 2 camadas empilhadas pro gradiente por slide
     (crossfade); introCenario = cenario real (estagio: cross-fade
     deserto/montanhas; login: montanhas estatica, so o topo). */
  .fundoGradCamada{position:fixed;inset:0;z-index:-1;background-size:cover;
    background-repeat:no-repeat;background-position:center;
    opacity:0;transition:opacity .45s ease;pointer-events:none}
  #introCenario{position:fixed;left:0;right:0;top:0;bottom:0;z-index:-1;
    overflow:hidden;opacity:0;transition:opacity .35s ease;pointer-events:none}
  /* v4.130 (pedido do usuario, com prints do Habitica): ANTES o modoLogin
     limitava o cenario a 52vh (so um "banner" no topo, resto da tela em
     cor solida #0B0710 -- ver irParaLogin()). O Habitica cobre a tela
     INTEIRA com a arte (montanha+castelo) e o conteudo (marca, campos,
     botoes) flutua por cima dela do topo ao rodape, sem nenhuma faixa
     solida separada. Tirando este override o modoLogin passa a herdar o
     inset:0 (tela cheia) que o modoEstagio ja usa -- mesmo mecanismo,
     so muda o gradiente de escurecimento abaixo. */
  #introCenario.ativo{opacity:1}
  #introCenario .cenarioImg{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;image-rendering:pixelated;opacity:0}
  #introCenario.modoEstagio .cenarioImg{animation:obEstagioFade 3.2s ease-in-out infinite}
  #introCenario.modoEstagio .cenarioImg.dois{animation-delay:-1.6s}
  #introCenario.modoLogin .cenarioImg{opacity:1;animation:none}
  #introCenario::after{content:'';position:absolute;inset:0}
  #introCenario.modoEstagio::after{
    background:linear-gradient(180deg,rgba(10,8,14,.35) 0%,rgba(10,8,14,.55) 55%,rgba(10,8,14,.88) 100%)}
  /* v4.130: gradiente recalibrado pra tela cheia -- topo (~35%) fica
     limpo pra mostrar o ceu/montanha como no Habitica, escurece a
     partir da metade pra garantir contraste dos campos/botoes que
     flutuam perto do rodape (#passoLogin usa justify-content:flex-end). */
  #introCenario.modoLogin::after{
    background:linear-gradient(180deg,rgba(11,7,16,0) 0%,rgba(11,7,16,0) 35%,rgba(11,7,16,.58) 68%,rgba(11,7,16,.94) 100%)}
  @keyframes obEstagioFade{0%,45%{opacity:1}55%,100%{opacity:0}}
  .obEstagioPill{position:relative;z-index:2;display:flex;flex-direction:column;
                 align-items:center;gap:6px;margin-bottom:4px}
  .obEstagioPill .obLbl{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;opacity:.75;color:#fff}
  .obEstagioPill .obNum{font-family:'Silkscreen',monospace;font-size:22px;color:#fff;
                         text-shadow:0 2px 8px rgba(0,0,0,.5)}

  /* trio escalonado do slide 1 (marca) -- igual a foto de referencia:
     sprite do meio maior/na frente, laterais menores/atras, um pouco
     mais baixos, sobrepondo o do meio. align-items:flex-end + tamanhos
     diferentes ja produz o efeito "meio mais alto" sem precisar de
     posicionamento absoluto nem numeros de offset vertical manuais. */
  .carrosselTrioLogo{display:flex;justify-content:center;align-items:flex-end;margin:12px 0}
  .carrosselTrioLogo img{image-rendering:pixelated;position:relative}
  .carrosselTrioLogo .ctlCentro{width:160px;height:160px;z-index:2}
  .carrosselTrioLogo .ctlLado{width:100px;height:100px;z-index:1}
  .carrosselTrioLogo .ctlEsq{margin-right:-28px}
  .carrosselTrioLogo .ctlDir{margin-left:-28px}
  /* topo (voltar/dots/pular) agora é UM SÓ elemento fixo, fora dos
     slides que deslizam -- antes cada slide carregava seu próprio topo,
     e durante a transição (~300ms) os dois ficavam visíveis ao mesmo
     tempo, mostrando dots/Pular duplicados cruzando a tela (bug visto
     em screenshot real, capturado no meio de uma transição). Agora
     #passoCarrosselTudo (o .passo de fora) contém o topo fixo + o
     .carrosselPalco (position:relative, só ele é o "viewport" que os
     slides absolutos preenchem) -- só o palco anima, o topo fica
     parado, igual no vídeo de referência. */
  /* #passoCarrosselTudo precisa do proprio flex:1 -- antes, quando os
     slides eram filhos DIRETOS do .card, o flex:1 de cada slide bastava
     pra consumir o espaco livre (.card{justify-content:center} so
     entra em jogo com o que sobra DEPOIS do flex-grow ser resolvido).
     Agora existe 1 nivel a mais (.card > #passoCarrosselTudo >
     .carrosselPalco > .carrosselSlide) -- sem propagar flex:1 aqui
     tambem, o wrapper externo fica do tamanho do proprio conteudo (so
     a altura do topo), e .carrosselPalco{flex:1} nao tem sobra nenhuma
     pra crescer -- vira altura 0, e o conteudo do slide (position:
     absolute;inset:0 relativo a uma caixa de 0px) vaza visualmente pra
     cima do topo sem que ninguem perceba olhando só o print (survivor
     bug: cliques no topo eram capturados pelo slide por baixo -- só
     apareceu tentando clicar de verdade via automação, não em screenshot). */
  #passoCarrosselTudo.on{flex:1}
  .carrosselPalco{position:relative;flex:1}
  .carrosselSlide{position:absolute;inset:0;display:none;flex-direction:column;
                   justify-content:center;gap:18px}
  .carrosselSlide.on{display:flex;touch-action:pan-y}
  .carrosselMeio{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px}

  /* legibilidade da descricao reportada como ruim (itálico serifado
     pequeno e apagado) -- escopado só no carrossel via .carrosselMeio,
     não mexe no .lema global (login/passo1 usam a mesma classe e não
     foram tocados). Tira o itálico (principal vilão de legibilidade em
     corpo de texto pequeno), sobe tamanho/peso/contraste. */
  .carrosselMeio .lema{
    font-style:normal;font-size:17.5px;font-weight:400;
    color:var(--text);line-height:1.6;max-width:300px;margin:0 auto
  }
  .carrosselTarefasDemo{display:flex;flex-direction:column;gap:8px;margin-top:14px;width:100%}
  /* .task/.box/.tinfo/.label/.tmeta/.difpip/.repeat/.del/.done sao o
     componente REAL da lista de tarefas (ver linha ~1714, render()) --
     zero CSS novo pra eles, só herdam o que ja existe. Os botoes .del
     e .box aqui nao tem onclick nenhum (tabindex="-1" pra nao roubar
     foco de teclado tambem) -- é só mostra, decorativo. */

  /* v4.117 (item 42-f do roadmap): slide de transicao entre EVOLUA e
     Nome -- prosa centralizada, sem .marca/.titulo (a referencia nao
     tem cabecalho nessa tela, só a frase). Cursor piscando (::after)
     fica visivel enquanto o typewriter roda (iniciarTypewriter, no
     script abaixo) e junto com o texto quando ja terminou -- decisao
     de nao esconder o cursor no fim, pra nao precisar de mais uma
     classe/estado só pra isso. */
  .carrosselTransicao{display:flex;align-items:center;justify-content:center;min-height:120px}
  .carrosselTransicaoTexto{
    font-family:'Cormorant Garamond',serif;font-style:italic;font-size:25px;
    color:var(--text);line-height:1.6;text-align:center;max-width:300px;margin:0 auto
  }
  .carrosselTransicaoTexto::after{
    content:'';display:inline-block;width:2px;height:1em;margin-left:3px;
    background:var(--accent);vertical-align:text-bottom;animation:carrosselCursorPisca .9s step-end infinite
  }
  @keyframes carrosselCursorPisca{0%,100%{opacity:1}50%{opacity:0}}

/* --- Módulo style #18 --- */
.somBtn{background:none;border:none;padding:4px;margin:0;cursor:pointer;
          color:var(--dim);display:flex;align-items:center;justify-content:center;flex:none}
  .somBtn svg{width:18px;height:18px}
  .somBtn.mudo{color:var(--perigo)}

/* --- Módulo style #19 --- */
/* === Sprite Slash (pack "Pixel_Art_Animations_-_Slashes") ===
     Decisao de escopo (chat de animacoes de combate): so 'corte' e 'impacto'
     ganham sprite animado -- sao as unicas categorias com golpe fisico
     compativel com um arco de slash. perfuracao/distancia/arcano continuam
     com os efeitos CSS existentes (estocada, projetil e particulas magicas
     nao combinam com o movimento de slash). */
  .fx-sprite-slash{
    position:absolute;width:64px;height:64px;pointer-events:none;z-index:7;
    background-repeat:no-repeat;image-rendering:pixelated;
    transform:translate(-50%,-50%) scale(var(--escala-slash,1));
  }
  /* cor do sprite = raridade da arma (nao categoria). Estilo de movimento
     agora varia por raridade tambem, pra dar variedade visual: Slash 2
     (comum/incomum, 7 frames, rajada mais angulosa) / Slash 3 (raro/epico,
     9 frames, crescente fino) / Slash 1 (lendario, 9 frames, arco largo). */
  /* TESTE: todas as 5 raridades usando o MESMO estilo/tamanho do raro/epico
     (Slash 3, 9 frames), so a cor muda -- pra comparar lado a lado se
     "raridade maior = mais poderoso" fica mais claro so pela cor, sem
     diferenca de sprite/escala extra por classe. */
  .fx-sprite-slash.comum{
    background-image:var(--spr-slash-comum);
    background-size:576px 64px;
    filter:grayscale(1) brightness(2.4); /* Slash3/color5 ciano -> branco, bate com COR_RAR[0] */
    animation:fxSpriteSlash9Fixo .42s steps(9) forwards;
  }
  .fx-sprite-slash.incomum{
    background-image:var(--spr-slash-incomum);
    background-size:576px 64px;
    /* Slash3/color1 verde nativo, ja bate com COR_RAR[1] #63C99A */
    animation:fxSpriteSlash9Fixo .42s steps(9) forwards;
  }
  .fx-sprite-slash.raro{
    background-image:var(--spr-slash-raro);
    background-size:576px 64px;
    /* Slash3/color5 ciano sem filtro (nativo), aproxima COR_RAR[2] #5AA9F2 */
    animation:fxSpriteSlash9Fixo .42s steps(9) forwards;
  }
  .fx-sprite-slash.epico{
    background-image:var(--spr-slash-epico);
    background-size:576px 64px;
    filter:hue-rotate(44deg) saturate(1.3) brightness(1.1); /* Slash3/color3 -> roxo, bate com COR_RAR[3] #B57BE8 */
    animation:fxSpriteSlash9Fixo .42s steps(9) forwards;
  }
  .fx-sprite-slash.lendario{
    background-image:var(--spr-slash-lendario);
    background-size:576px 64px;
    /* Slash3/color4 laranja nativo, bate com COR_RAR[4] #F2A65A */
    animation:fxSpriteSlash9Fixo .42s steps(9) forwards;
  }
  @keyframes fxSpriteSlash9{
    0%{background-position:0 0;opacity:0;
       transform:translate(-50%,-50%) scale(var(--escala-slash,1)) translate(-20px,-20px) rotate(-35deg)}
    8%{opacity:1}
    100%{background-position:-576px 0;opacity:1;
       transform:translate(-50%,-50%) scale(var(--escala-slash,1)) translate(20px,20px) rotate(35deg)}
  }
  @keyframes fxSpriteSlash7{
    0%{background-position:0 0;opacity:0;
       transform:translate(-50%,-50%) scale(var(--escala-slash,1)) translate(-20px,-20px) rotate(-35deg)}
    8%{opacity:1}
    100%{background-position:-448px 0;opacity:1;
       transform:translate(-50%,-50%) scale(var(--escala-slash,1)) translate(20px,20px) rotate(35deg)}
  }
  /* comum/incomum: sem deslocamento -- fica parado no centro do mob. Arte do
     Slash 2 concentra o desenho ~7px abaixo do centro do quadro 64x64, entao
     desloca -7px em Y pra recentralizar. Escala extra (+30%) pra compensar
     a falta de movimento. */
  @keyframes fxSpriteSlash7Fixo{
    0%{background-position:0 0;opacity:0;
       transform:translate(-50%,-50%) scale(calc(var(--escala-slash,1) * 1.3)) translateY(-7px) rotate(25deg)}
    8%{opacity:1}
    100%{background-position:-448px 0;opacity:1;
       transform:translate(-50%,-50%) scale(calc(var(--escala-slash,1) * 1.3)) translateY(-7px) rotate(25deg)}
  }
  /* lendario: Slash 1 ja fica quase centrado (desvio pequeno), so escala extra. */
  @keyframes fxSpriteSlash9FixoLendario{
    0%{background-position:0 0;opacity:0;
       transform:translate(-50%,-50%) scale(calc(var(--escala-slash,1) * 1.3)) translate(-6px,-2px) rotate(25deg)}
    8%{opacity:1}
    100%{background-position:-576px 0;opacity:1;
       transform:translate(-50%,-50%) scale(calc(var(--escala-slash,1) * 1.3)) translate(-6px,-2px) rotate(25deg)}
  }
  /* raro/epico: sem deslocamento diagonal -- fica parado no centro do mob,
     so troca de frame (pedido explicito do usuario, testar como fica). */
  /* raro/epico: recentralizado (a arte do Slash 3 concentra o desenho na
     metade de cima do quadro 64x64, por isso parecia deslocado pra cima --
     compensa com translateY) e escala extra (+35%) so pra esses dois. */
  /* correcao de centro (translateY) precisa vir DEPOIS de scale() na lista --
     assim o deslocamento escala junto com o tamanho em vez de ficar fixo em
     px (bug: aumentar a escala sem isso faz o desenho "subir" de novo,
     porque o offset fixo passa a ser proporcionalmente menor). */
  @keyframes fxSpriteSlash9Fixo{
    0%{background-position:0 0;opacity:0;
       transform:translate(-50%,-50%) scale(calc(var(--escala-slash,1) * 1.5)) translateY(12.5px) rotate(25deg)}
    8%{opacity:1}
    100%{background-position:-576px 0;opacity:1;
       transform:translate(-50%,-50%) scale(calc(var(--escala-slash,1) * 1.5)) translateY(12.5px) rotate(25deg)}
  }

/* --- Módulo style #20 --- */
:root{
    --spr-slash-comum: url("data:image/png;base64,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");
    --spr-slash-incomum: url("data:image/png;base64,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");
    --spr-slash-raro: url("data:image/png;base64,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");
    --spr-slash-epico: url("data:image/png;base64,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");
    --spr-slash-lendario: url("data:image/png;base64,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");
  }


/* --- Módulo style #21 --- */
/* Redesign compacto do menu de Config: linhas com icone circular a
   esquerda (padrao inspirado no Habitica), subtitulo menor com
   ellipsis, e rotulo de secao (.edsec) mais discreto. Regras aditivas
   escopadas em .cfgOverlay -- nao mexe nas regras .cfgrow/.cfgtxt/
   .edsec ja existentes (Modulo/secao acima), so ganha na cascata por
   especificidade (2 classes vence 1) e por vir depois no arquivo. */
.cfgOverlay .cfgrow{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 2px;
  background:transparent;
  border:none;
  border-radius:0;
  margin-bottom:0;
  border-bottom:1px solid var(--line);
  min-height:48px;
}
.cfgOverlay .cfgrow:last-child{ border-bottom:none }
.cfgOverlay .cfgrow.cfgcol{
  align-items:flex-start;
  flex-direction:column;
}
.cfgOverlay .cfgicone{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.07);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold, #d4af37);
}
.cfgOverlay .cfgicone svg{ width:22px; height:22px; }
.cfgOverlay .cfgtxt{ flex:1; min-width:0; }
.cfgOverlay .cfgtxt b{
  display:block;
  font-size:16px;
  font-weight:600;
  line-height:1.2;
}
.cfgOverlay .cfgtxt span{
  display:block;
  font-size:12px;
  opacity:.5;
  margin-top:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* --- Módulo style #23 --- */
/* Linhas de 1 linha só (Herói/Aparência/Preferências/Idioma): valor atual
   mostrado a direita, antes da seta, em vez de subtitulo empilhado --
   padrao "one-line list item, trailing supporting text" do Material.
   Isso deixa a linha com ~56px de altura (so o <b>, sem <span> dentro de
   .cfgtxt) em vez dos ~72px das linhas que ainda tem subtitulo real
   (Conta/Apagar dados/Feedback, que carregam status/aviso importante). */
.cfgOverlay .cfgval{
  flex:none;
  font-size:13px;
  color:var(--dim);
  margin-right:2px;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Sair/Apagar tudo saíram de dentro das linhas (eram pilula de 12px) e
   viraram CTA full-width no rodape do Config -- pedido do usuario
   comparando com o destaque que o concorrente da pra essas acoes.
   Mesma logica de oculto/perigo de antes, so o container mudou. */
.zonarisco{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cfgbtnfull{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:14px;
  border-radius:999px;
  font-family:'Outfit',sans-serif;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  background:transparent;
  border:1.5px solid var(--line);
  color:var(--text);
}
.cfgbtnfull svg{ width:18px; height:18px; flex:none; }
.cfgbtnfull:active{ background:rgba(255,255,255,.06); }
/* Acessibilidade (pedido do usuario): --blood e zerado pro cinza no tema
   Grafite (grayscale por decisao de design). Pra acoes destrutivas
   importantes, isso apaga o unico sinal visual de "cuidado". Mesma logica
   ja usada pelo .est-compartilharBtn (excecao documentada acima) --
   var(--perigo)/var(--perigo2) NUNCA sao sobrescritas por nenhum tema
   (ver :root, sao usadas em vida critica/calendario de falta/erro de
   form), entao usamos elas aqui em vez de --blood. */
.cfgbtnfull.perigo{ border-color:var(--perigo); color:var(--perigo); }
.cfgbtnfull.perigo:active{ background:rgba(244,87,129,.12); }

.cfgOverlay .edsec{
  font-size:11px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  opacity:.4;
  margin:20px 2px 4px;
}

/* --- Módulo style #22 --- */
/* Sub-telas Herói e Aparência (Config): cards maiores, usando mais da
   tela -- pedido do usuario comparando com o seletor de tema do
   Skyllion (cards grandes com preview + nome, nao bolinha pequena).
   Escopado por ID (#gradeHeroisConfig / #temaGrid) de proposito: tanto
   .grade/.opcao quanto .temaswatch sao reaproveitados em outro lugar
   do app (#gradeHerois no onboarding usa a mesma .grade/.opcao) -- so
   o container de Config muda de layout, o resto do app continua igual.
   #gradeNovoHeroi (tela "Novo herói" do Plano Pro) entrou na mesma
   regra -- mesmo card grande, sem duplicar CSS. */

#gradeHeroisConfig.grade,
#gradeNovoHeroi.grade{
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
#gradeHeroisConfig .opcao,
#gradeNovoHeroi .opcao{
  padding:16px 4px;
  border-radius:16px;
}
#gradeHeroisConfig .opcao img,
#gradeNovoHeroi .opcao img{
  width:64px;
  height:64px;
}

#cfgTemaCard{
  padding:12px 13px;
}
#temaGrid.temagrid{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.temalinha{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 4px;
  cursor:pointer;
  border-bottom:1px solid var(--line);
  transition:background .12s;
}
.temalinha:last-child{ border-bottom:none }
.temalinha:active{ background:var(--panel-3) }
.temaDot{
  width:30px;
  height:30px;
  border-radius:50%;
  flex:none;
  border:2px solid var(--line);
  box-sizing:border-box;
}
.temaNome{
  flex:1;
  font-family:'Outfit',sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--text);
}
.temaCheck{
  width:20px;
  height:20px;
  flex:none;
  color:var(--accent);
  opacity:0;
  transform:scale(.6);
  transition:opacity .12s, transform .12s;
}
.temalinha.sel .temaCheck{
  opacity:1;
  transform:scale(1);
}
.temalinha.sel .temaDot{
  border-color:var(--text);
}

/* PLANO PRO -- tema bloqueado (Azul/Terracota pra quem nao assina).
   Mesma linguagem visual ja usada no dropdown de personagens
   (.pjNovoBtn.bloqueado + .pjSelo) -- opacidade reduzida + selo "PRO",
   copiado em vez de reaproveitar a classe de la de proposito (contextos
   diferentes, ver comentario do #novoHeroiOverlay sobre nao juntar
   fluxos que nao devem se pisar). */
.temalinha.bloqueado{ opacity:.55; }
.temaSelo{
  font-size:8px; font-weight:700; background:var(--accent); color:var(--bg);
  border-radius:999px; padding:2px 6px; letter-spacing:.3px; flex:none;
}

/* --- Módulo style #23 --- */
/* Fix: no tema Escuro (--accent:#FFFFFF), o switch ligado (trilho
   branco) + a bolinha (#FFF fixo) ficavam brancos os dois, sem
   contraste nenhum ("muito branco", print do usuario). Sombra sutil
   na bolinha resolve pra qualquer tema, sem depender de --accent nao
   ser branco -- nao mexe no .swch/.swch.on original (Modulo acima),
   so adiciona definicao visual em cima do que ja existe. */
.swch-bolinha{
  box-shadow:0 1px 3px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.12);
}

/* --- Módulo style #24: I18N — slide de idioma (item 46 do roadmap) ---
   2 botões lado a lado, mesma pill de opção que outros toggles do app
   (ex: temalinha de Aparência), sem introduzir token de cor novo. */
.carrosselIdiomaEscolha{
  display:flex;
  gap:12px;
  margin-top:22px;
  width:100%;
}
.idiomaOpcao{
  flex:1;
  padding:14px 10px;
  border-radius:14px;
  border:1.5px solid var(--line);
  background:var(--panel-2);
  color:var(--dim);
  font-family:'Outfit',sans-serif;
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.idiomaOpcao.on{
  border-color:var(--accent);
  color:var(--text);
  background:color-mix(in srgb, var(--accent) 14%, var(--panel-2));
}

/* --- Módulo style #25: Idioma em Config (item 47 do roadmap) ---
   Reaproveita .temalinha/.temaNome/.temaCheck (já usados em Aparência)
   pra manter a mesma lista de opção -- só troca a bolinha de cor
   (.temaDot) por uma bandeira emoji, mesmo tamanho de caixa. */
.idiomaBandeira{
  width:30px;
  height:30px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
}

/* ---------------------------------------------------------------------
   Estado :disabled em #save e #addbtn -- validacao proativa de criar
   tarefa (ver index.html, atualizarEstadoSave()). Bloco novo no fim do
   arquivo, de proposito: style.css tem os modulos 1-20 duplicados
   inteiros (achado documentado, causa raiz nao investigada ainda -- ver
   roadmap.md item 39), so a ultima regra da cascata vence. Um bloco novo
   aqui no fim sempre vence, sem precisar editar as duas copias. */
#save:disabled,
#addbtn:disabled{
  opacity:.4;
  cursor:not-allowed;
  filter:none;
}
#save:disabled:hover,
#addbtn:disabled:hover{
  background:inherit;
  filter:none;
}

/* ---------------------------------------------------------------------
   Badge de notificacao de conquistas (.conqbadge) -- animacao de entrada/
   saida + tag "NOVO" na lista. Bloco novo no fim do arquivo, mesmo motivo
   de sempre (style.css tem os modulos 1-20 duplicados, so a ultima regra
   da cascata vence -- ver nota no bloco anterior).

   display:none/flex nao anima (o navegador troca na hora, sem transicao
   possivel) -- por isso a base agora fica sempre display:flex, e quem
   controla visivel/escondido e opacity+scale via classe .on. O JS
   (atualizarBadges(), bloco "PERFIL — CONQUISTAS") so alterna .on/.pop,
   nunca mais mexe em style.display. */
.conqbadge{
  display:flex !important;
  transform-origin:center;
  transform:scale(0);
  opacity:0;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), opacity .18s ease;
  pointer-events:none;
}
.conqbadge.on{
  transform:scale(1);
  opacity:1;
}
@keyframes conqbadgePop{
  0%{ transform:scale(.6); }
  55%{ transform:scale(1.35); }
  100%{ transform:scale(1); }
}
.conqbadge.pop{
  animation:conqbadgePop .38s cubic-bezier(.34,1.56,.64,1);
}

/* Tag "NOVO" dentro da lista de Conquistas -- marca exatamente qual item
   gerou a notificacao do badge (pedido do usuario: "indicar de onde vem
   essa notificacao"). Some sozinha na proxima vez que a tela abrir,
   porque nesse momento o item já entra pro set de "vistas" (ver
   renderConquistasV2()). */
.conqv2nome{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  font-size:15.5px !important; /* era 13.5px -- pedido do usuario, mais legivel */
}
.conqv2desc{
  font-size:13px !important; /* era 11.5px */
  color:var(--muted) !important; /* era --dim, contraste mais baixo -- muted le melhor sem perder a hierarquia visual (ainda mais apagado que o titulo) */
}
.conqv2novo{
  display:inline-flex;
  align-items:center;
  height:15px;
  padding:0 5px;
  border-radius:999px;
  background:var(--perigo,#F45781);
  color:#fff;
  font-family:'Silkscreen',monospace;
  font-size:8px;
  letter-spacing:.03em;
  line-height:1;
  animation:conqbadgePop .38s cubic-bezier(.34,1.56,.64,1);
}
.conqv2novoitem{
  border-left:3px solid var(--perigo,#F45781);
  padding-left:9px !important;
  border-radius:4px;
}

/* ---------------------------------------------------------------------
   2 ajustes pedidos pelo usuario (sessao de brainstorm), bloco novo no
   fim do arquivo -- mesmo motivo de sempre (modulos 1-20 duplicados, so
   a ultima regra da cascata vence, ver notas anteriores nesta mesma
   secao final do arquivo).

   1) Badge de notificacao (.conqbadge) subiu pra fora do botao, no
      canto superior direito, em vez de ficar em cima do texto/icone
      (top:2px/right:8px original ficava colado por dentro, cobrindo
      parte do conteudo em botoes pequenos como #verConquistasBtn).
      Padrao comum de notification-dot: metade fora da borda do botao.
   2) Chips da previa de conquistas (.prevconqchip): 1a rodada tirou o
      texto do nome, virou bolinha colorida solida. 2a rodada (pedido do
      usuario, mesma sessao): nem bolinha -- a faixa inteira parou de ser
      populada e ficou display:none (JS, funcao que le
      prevConquistasFaixa). Regra abaixo fica sem nenhum elemento pra
      aplicar hoje -- mantida sem apagar (convencao append-only do
      projeto), caso a faixa volte a ser usada no futuro. */
.conqbadge{
  top:-6px !important;
  right:-6px !important;
}

.prevconqchip{
  width:14px !important;
  height:14px !important;
  padding:0 !important;
  border:none !important;
  border-radius:50% !important;
  background:var(--pv-cor) !important;
  align-self:center !important;
}

/* ---------------------------------------------------------------------
   Fix: destaque azul nativo do navegador (tap highlight) aparecendo por
   cima do card ao segurar pra arrastar tarefa, em vez do efeito proprio
   do app (placeholder elastico + card flutuante seguindo o dedo). Achado
   comparando video do DevTools (emulacao de toque por mouse, sem esse
   highlight) com video do aparelho real (toque de verdade, com o
   highlight visivel). Causa: -webkit-tap-highlight-color nunca foi
   setado em .task -- a propriedade ja existe em outros elementos do
   arquivo (.atrbarra, por exemplo), so ficou faltando aqui, que e
   justamente o elemento que mais precisa dela (segurar por 220ms pra
   arrastar e o gesto mais propenso a esse highlight aparecer). Bloco
   novo no fim do arquivo, mesmo motivo de sempre (modulos 1-20
   duplicados). Nao mexe em nenhuma logica JS do arrasto (iniciarArrasto/
   atualizarPlaceholder/atualizarAlturaElastica) -- so tira o efeito
   visual do navegador que competia com o efeito proprio do app. */
.task{
  -webkit-tap-highlight-color:transparent;
}

/* ---------------------------------------------------------------------
   v4.160 (pedido do usuario): sistema de titulos equipaveis REMOVIDO
   por completo -- ficava aqui o CSS de #perfilTitulo e .conqv2estrela
   (a estrela de equipar em cada linha de Conquistas). Ver comentario
   equivalente no index.html, perto de renderConquistasV2().
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Logo do app (portal de pedra) usado em toda tela que mostra o nome
   "DUNGEONLOG" -- splash, login, verificacao de email (fluxo normal e
   o overlay de bloqueio silencioso), no lugar do sprite pixel art do
   Grimorio Proibido que tinha antes. Mesma imagem do icone/manifest, so
   com fundo tornado transparente. .logoApp e <img>, nao <div
   class="pxi">, entao precisa de tamanho proprio (nao usa mais
   background-position do spritesheet) e image-rendering normal (nao
   pixelated -- e ilustracao lisa, nao pixel art). Bloco novo no fim do
   arquivo, mesmo motivo de sempre (modulos 1-20 duplicados). Tamanho
   aumentado a pedido do usuario (era 72px/120px, ficou pequeno). */
.logoApp{
  width:104px;
  height:104px;
  object-fit:contain;
  image-rendering:auto;
  flex:none;
  animation:none; /* estatico, pedido do usuario -- sobrescreve o "respira" que .loginSprite carrega (sprite pixel art antigo balancava, o logo novo fica parado) */
}
#passoSplash .logoApp{
  width:170px;
  height:170px;
}

/* ===== módulo N — Spec 4/4b: baú clicável na Arena (recompensa do dia) =====
   Sprites: pack "Treasure Chests" (Mana Seed / Seliel the Shaper, itch.io,
   uso comercial liberado). Par escolhido: baú dourado/madeira, tier 1 col 1
   do spritesheet original (32x32, upscale 4x nearest-neighbor no crop). */
:root{
  --bau-fechado: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAADZUlEQVR4nO3dMWhTQRzH8ad0EFwyNlQkHYSmQ8ngEHAtonTspEPpkEFQHNrR2TEdBMGhgzjo1FEE0bGQoUMo0gQcGgpixyyCg1hX75/6zuPevZfk9/1s1768/0v64+7l7tJkGQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAmEZXUhd41G5c/N2+3enkHn+0v++0W42fhV7PwvqToPpW7PWE1n/VGyX9G11NeXJMPwIgjgCIW6j6AlZXm077lxljWys1p11rLwadf9w7d9q/Tb2Tk4Fbz1u/kbR+2egBxBEAcQRAXOn3AHbML5odc33s9Rx/Cjt/6D2Jr/5R1NnC0QOIIwDiCIC4yucBrP7ommmb9+XDYdT51+5G1rdrAcNxofXLRg8gjgCIIwDikt8D9M/dMXXLc3zyufgpr29fr9ToAcQRAHEEQNzUzQP4hM71z1v9otEDiCMA4giAuNLvAeweuND9AbF7An3XM+31i0YPII4AiCMA4iqfB7BjYOr9AAs38sfcquuXjR5AHAEQRwDElX4PMBh8d9rNZt1pp16P/+K5nqrrl40eQBwBEEcAxFU+D2DHwFue42PX431jrp0HyLKx02pFVa9+zLfoAcQRAHEEQFzl9wCWbwwOtfb0pdNuetbfVze7TvvNzm6h15MtxT28aPQA4giAOAIgLvk9QGvRnVs/PPjseYRZj4/8rFxnPWz9fWJ/wnmx15Nl+c/fvl69UWQ5D3oAcQRAHAEQV/r/B9h7+zzqfJPvy8N0u+9zf7+7u+G07Zjss7XX9R+UY+fhs6jHh6IHEEcAxBEAcZV/NtCK3TNo2T14y/X6pcf9y/a9/Pf9ffN/Au3z8z2fqtEDiCMA4giAuOTfG9hurFz4j/p/2+1x0PFflzadtm8Mntij+O0gqN7rXi3oeJ/eaMj3BiIdAiCOAIgr/R4gdG69aNfvbOT+/sdh/lpBanbthHsAJEUAxBEAcaWvBcSulx+/eOy0fWsBdq6+7xnjQ9ca7Pnt5xBC9dkPgDIRAHEEQNzM7Qew7BjsM/G9fx6h52c/AGYKARBHAMQlXwt4cN/9stzTwVmh+wPmzXLzpvM3effhY9J69ADiCIA4AiAu+TzA6eDM/ij5fccsu+T1SooeQBwBEEcAAAAAAAAAAAAA5tgftjoJelp9eW0AAAAASUVORK5CYII=");
  --bau-aberto:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAEG0lEQVR4nO3dvYtUVxjH8UnUsCgkU2lUiCso7KwQRgvZP0AE7ZLOLdTCygSLWFqIAcFGC1ErC2OhjSalKGoREBYR39CZBZc4Luz6AspqUMS32ASS53G9l8uZc+bs/L6f7nHu3HPv9cc5Z87cvVOrAQAAAAAAAACAfvZF7Ab27t5p6iXLF5u6PvDB1A9u3TL183vX7faL3rvavt/7ZtVaW69eZ+qZl/N62n7n6QJTP556Yup9B48V7j/Ul1H3juwRAHEEQNz82A2cP3v5n//Xh07tL9z+z5Mn3b/YMXpw8dtK7T+fuGHqFZt3mLre4/abq+32v4zu8buIOk+jBxBHAMQRAHHR5wBeq9U29fBww9TNwde2Hqqbuj4yWKm9mbFHpr7j2vdit+9XDfz1SI0eQBwBEEcAxCWfA7TbD4Pe78fUbrf/sjPgWzRVM6j1T8f80OsRih5AHAEQRwDEJZ8DeH4MLBuDq5q/4WdTNz6z3X8b2LX6a8ePd/V47v3d2zHfowcQRwDEEQBxyecAv53+o9L2ZybDMnpgg61/P3V99g3/9eOovWfvzOSbrh5PrVZ8/qu++jpw/9XQA4gjAOIIgLjkc4D1QyOmvjo+FrU9v87gx/iy7WPz1+PZX62k7dMDiCMA4giAuJ5/FxCbX3fYtuWHStv3O3oAcQRAHAEQl/0cYOHysEN8NfXO1FXH+G63nxt6AHEEQBwBEJfdHCB0zI29v9D2c5sT0AOIIwDiCIC46M8JHBkcMs8ImnjzInaTc5q/J3CsM84zghAPARBHAMQl/5Dsv4/3a/O9/twem18H8NfjytlLKQ+HHkAdARBHAMRlN+AuW7Os14cQ1cTUZK8PwaAHEEcAxBEAcdnNAabvThe+nvscoez4c0MPII4AiCMA4rKbA3i5j/meP97c5wT0AOIIgDgCIC75HKDRWFr4uv++fLqW9xhapuzvAPz1uBLzYGZBDyCOAIgjAOKyXwfI7W/p+g09gDgCII4AiOv5HODArzsrbf/u4hFT+9/2Te3m+Iyp/W8U5Y4eQBwBEEcAxCWfAwwPl/5yX6HbF23tx+AyJ8bqha9vH6m2Py/0/FKjBxBHAMQRAHHJ5wCtVrvwdf+bPWX3D1RdB2h2Xnd1f34O4s+v6vmkRg8gjgCIIwDikj8nMFTo5/TYytYZquI5gYiKAIgjAOKSrwM0vy3+HF7mZmegS0cSR/D5PUp7fvQA4giAOAIgLvkcYOuhg0Hvv334J1Pndk/g97uOhu1vdE/Q+6uiBxBHAMQRAHFz/n6AqvcExsb9AJhTCIA4AiAu+v0AWzZtNPX99mRX7w/oNysb35n/k9PnLkRtjx5AHAEQRwDERV8HuN/+5Ddyos875rJZrldU9ADiCIA4AgAAAAAAAAAAANDHPgJBMP913QAJ8gAAAABJRU5ErkJggg==");
--bau-esp-t0-fechado: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAChklEQVR4nO3dvWsUQRwG4Ch2IoixuEIQRdAi8RrRSvyobVNZ2/rH2FpbpU0dFavY5aNIIWis0kQEsU5ad8A7jtuZ3eR9nm7ZZWf27mVu+O3s7coKAAAAAAAAAAAAAAAAAAAAAAAwRpdqN/Dk4fPTf7ffvH1Ru8lz7f27j53tnb1PVb+jyzVPzvgJQDgBCHdl6A4c7v7qbD+Y3hioJ22M7XqNAOEEIJwAhBt8DlD+Bm5++Fq1vY3Xj2fuH7r91owA4QQgnACEG3wOUFpfuxfdfmtGgHACEE4Awo1uDtB3bbysvS9q6Fp9bUaAcAIQTgDCCUA4AQgnAOEEINzo6gB9349ftrbfd3+sB2BUBCCcAIQb3RxgbPfjx9afvhkBwglAOAEIN/gcYGzPytVuf2zXawQIJwDhBCDc4HOAoX8DWxvb9RoBwglAOAEIV30OcPznpLO97Dr9i678vGozAoQTgHACEK55HeDL592q53/6bDpz/+bW9sz9G69eztxfu/+tGQHCCUA4AQhXfQ4wubba2b6+erXX8/8++bvQ8WV/ltX39ZSOqp7dCBBPAMIJQLjmdYDaz8aVz/KV6/rn1QlK+wffOtu133lUvjOoNiNAOAEIJwDhms8Bzvt6gPPe/5IRIJwAhBOAcNXfHXz7znrn3cF91+IXNa92v+i9hb6VawKPvu97dzD1CEA4AQjXvA5Q+/75PPP+86es/bfmuQCaEoBwAhCu+ZrA1v+7t+xveuv+lnUIawKpSgDCCUC46nOAW3dvdmrZm1vbp/87toXDHz+rHr+sR9P7nc9rZ69ue0aAcAIQTgDCVV8PMJms1W7iQjs+Pqh6fiNAOAEIJwAAAAAAAAAX2BkPu29RYSNTBgAAAABJRU5ErkJggg==");
  --bau-esp-t0-aberto:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAADGklEQVR4nO3dsU8UQRTHcTCGhpgQrkFjRBJMLEQTC6iMSm1LZU1rZ2NjbGzsaKmt/COQUHGFyYkFiSSKMXoNFxNjYwMt+4xsJjvvzdz9vp9uAszMHb+8mZtd2KkpAAAAAAAAAAAwyaa9B3jz+lWjffXafKN9f/WW9xSq9qH/udH++WPUaD9/8dJ1/EuuvaN6BEAcARDnvgdYu/vo9Hx789lj7yHH2vbWTqO9//G96++ICiCOAIgjAOIuRw9o17i53mzW/lfuLGftzzr4dNTp53+d/Mk0kzyoAOIIgDgCIC58D/Dg4b2s/aWuyXu7gwu/njq/3HuOtvnlRgUQRwDEEQBx4dcC7Of+3J+Lbf9d12i7x/Cer+2fawFwRQDEEQBx4ecA1vD3SdX9HX79lrU/K/e1kFRUAHEEQBwBEOe+B8i9JqfyXsO7sp/7o98vKoA4AiCOAIgjAOIIgDgCII4AiCt+LaDN3/m10lPoZGa0X3oKF6ICiCMA4giAuOr2AOO+5lv29dS2J6ACiCMA4giAuPA9QNv17trWSG+l75egAogjAOIIgLjwPcDtmzcabXvP3qSdA1h2j9P2fnijAogjAOIIgLjqrgUsLF/P2t/w6HtS/6nfn2rUr+ucgwogjgCIIwDiCIA4AiCOAIgjAOKqOwfw/hwezb6emULz+B8qgDgCII4AiAvfA9j/3Wuvf9vr5cNuj+j5h12Tc3+/1XaPY9v74Y0KII4AiCMA4qo7B7DU/k4gGhVAHAEQRwDEFd8DbDxZLz0FaVQAcQRAHAEQ574HWLjSa7RTn/WbW9tZu/1bvWj2/Tp2Ho8KII4AiCMA4sLPATaeroaO9+5tv9FOXeOj57u9tRM6HhVAHAEQRwDEhe8BDgej6CEb7D14lj2nKD1fb1QAcQRAHAEQF/7s4L3dgfeQndhn+UbPl2cHIxQBEEcAxIWfA8z1ZqOHTFJ6fuwBEIoAiCMA4sLvCWw7i8+t6z2I0fO15xDcEwhXBEAcARA3HT3g4tLKafSY4+T4y0Ho74QKII4AiCMAAAAAAAAAAAAAAAAAE+YMOJevcDDg0hIAAAAASUVORK5CYII=");
  --bau-esp-t1-fechado: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAADVklEQVR4nO3dPWtUQRTG8VUCNiIKKiKBkBBRiTEQg4USEATBLjYBkahgZyOooB9BQQUbO0Fd0EoQBAUr8a3aBGKUKAkbYiGCgn6D2DonsONh7szd5Pn/umFv7rm7eZiZnTu722gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIButCF3gfEjYyv/tqfOXel4fPPh7aA90Ler0us5euyMq76Vej3e+m8/tLL+jzbmPDm6HwEQRwDE9dR9ASMjw0H7vRljx0aHgvbeg9td5//68VfHerOzc0HbjvGl65dGDyCOAIgjAOKKzwHsGFg1O+bGrJqDvPad3zsniNVvJp3Njx5AHAEQRwDE1b4OYLWXf3RsD8ykrcUfHk+sb9YJWjPV1i+NHkAcARBHAMRlnwP8/vnHdXzutfhur+99vVLRA4gjAOIIgLiuWweI8Y6p661+1egBxBEAcQRAXPE5gN0D590fUPX7cO+evLrrV40eQBwBEEcAxNW+DmDHwNz7ATZt6Tzm1l2/NHoAcQRAHAEQV3wOsLQ0H7T7+/cH7dL34+311F2/NHoAcQRAHAEQV/s6gHcMTL0fH6tn3/evNhR5PK1+afQA4giAOAIgrvY5gBUfg30uXroRtGP33ycmJoP21cvnK72e3X2jlZ4vFT2AOAIgjgCIyz4H2LZja9B+/vSx6++nEz8r591zZ4+3n9VLvZ7p1peOj9vXq7GQVC6KHkAcARBHAMQV/36A+81nSedLfV/+qHmz4+Nnp64F7VVjcsStOw+cVxS6MDWR9Pde9ADiCIA4AiCu9s8GWql7BmN29va6jp88dbzj462Zz0HbPr/Y86kbPYA4AiCOAIjL/ruBB/YMrsSP+n+Hxva5jrf332NjsB2zvy/7vgw4ttbv9Wlhkd8NRD4EQBwBEFd8HcC7tm559wy2l1+4jn/3xne8lfr8+K5gFEUAxBEAccXnAKn3y+/dvR60Y/cC7Fp9bIz33muw57efQ/BiPwCKIgDiCIC4NbcfwLJjcIwd42O852c/ANYUAiCOAIjLvh/g9MkTQXtusV3p/oD1ZnhwIPifPHn5Kms9egBxBEAcARCXfR1gaf5b0N7c6Mk+71jL7OuVGz2AOAIgjgAAAAAAAAAAAACsY38BYLv85kDRajIAAAAASUVORK5CYII=");
  --bau-esp-t1-aberto:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAECUlEQVR4nO3dO2gUQRzH8VMjShSN+IjEQhISVGI81HSCaCMKFrZBtIk2aSxs7IKNWBjBJhYq+LYSREHFRhHsYuCMIT5iHkJCfGEskspX6/yLXZe52Zu73/fT/b3dnbnzx8zc3ma3UAAAAAAAAAAAALVsQegGek/2OHXjhnVO3bD0t1NPlkpO/eP9oLv9sl+mdve3VrZud+u2HU49O7eoou1PfFvs1J+mPjv16b7+xOP7Whj06IgeARBHAMTVhW7g7v0nf/6tr9y4l7j9xZsPzb80OlVL4/psHfjglj0Hu5x6dWTtdx85ZI8QdJ3GCCCOAIgjAOKCrwGsUmnIqYvFDqdu2ejOsZ072p1607Y1mdp7++prYvtW6PattP6ExgggjgCIIwDicl8DjI+PeO2fNqf6tj82OZNyhPaU15PZOd/38/DFCCCOAIgjAOJyXwNYdg5Mn4Oz2bXnsFM3r0jevrl5i1PfuNZX1v40bVxS1uP5YgQQRwDEEQBxua8BLl2/nGn7kYlpr/bsGuDx01uJ2+/f625v2/ftT6EwmPjq+mX1nsfPhhFAHAEQRwDE5b4G2L3bvS7++fPkOdGXPc9g5/i07UOzn8e7l29ybZ8RQBwBEEcAxFX8t4DQ7HmH40ePZdq+1jECiCMA4giAuOjXAPUb/Lo4P/XTqbPO8eVuPzaMAOIIgDgCIC66NYDvnBv6eL7tx7YmYAQQRwDEEQBxwe8TuLWt1blH0MzcfOgmq5q9JvD1+1HuEYRwCIA4AiAu9y/J9vd4e26+0t/bQ7PnAezn8eDu7Ty7wwigjgCIIwDioptwm9qbKt2FoEanPla6Cw5GAHEEQBwBEBfdGmB6OPnv72NfI6T1PzaMAOIIgDgCIC66NYAV+5xv2f7GviZgBBBHAMQRAHG5rwHsvXgt+3v5dCHuOTRN2t8BpH0eoTECiCMA4giAuOjPA8T2t3S1hhFAHAEQRwDEVXwNcKY32zN5Xjxz7/dvn+2bt4HBYae2zyeIHSOAOAIgjgCIy30NUCx2eO3/4plb2zk4zcuB5Pvx7+zcnLFHLt/3lzdGAHEEQBwBEJf7GqBUGkp83T6zJ+338qznAdKeTZz1eHYNYt9f1veTN0YAcQRAHAEQl/t9An35fk8PLe08Q1bcJxBBEQBxBEBc7ucBVq1t8No/7Xt8pfm+v+9fZsvSj//FCCCOAIgjAOJyXwOcO3/Va//+C6ecOrZrAntOnPU6XveRQ177Z8UIII4AiCMA4qr+eoCs1wSGxvUAqCoEQBwBEBf8eoCuA/ucemh0rKzXB9SajtYW5//kzqMnQdtjBBBHAMQRAHHBzwOMj7jPyFleqAu+7qhm9vMKjRFAHAEQRwAAAAAAAAAAAABq2F/6r/TvVtUhhQAAAABJRU5ErkJggg==");
  --bau-esp-t2-fechado: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAADY0lEQVR4nO3dMWsUQRjG8VFsrE8IbGGSzg/gFQa0kYMUKQ0inOEgjeiBpSCIiCBYHkRJIxwxcNinsBfOIvkOwRSBgKksLLUT512YYdmd2b17/r9uuJ3ZvcvDzO7s7MY5AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADQRVdS7+D2zd6f/8tHH/1dbr+/75ULd8srT158CLYfq291rT1bf+up93O5k7PLpH+jqykbR/cRAHEEQNy17Htc3/KKhVv1yv2in7W+Oz0y7fljdPb2MqMHEEcAxBEAccnPATZ7l8HP7Zg4fDzyN7BjrPFy441XXtkx9c2Y7Jxpz7TfdHv2Ov/w8zS4/WbP//zkzCVFDyCOAIgjAOLyzwMYgzU7xt9o5ThyKX/fURuH8Q89gDgCII4AiGv9HMC6+PbTK6+sV6x/MA1+nrs9+326hh5AHAEQRwDEtX4O8G7+Ovj5ZOdHrfpdby9WPzV6AHEEQBwBENf6OUB0jdypWXcfWR8QX3NnxtzS/f1njbbXL6bV6mdGDyCOAIgjAOKSnwN8vex55XFpzH1QrcHImF29fk112zP17e/lXHhNZV30AOIIgDgCIK71eYCY0vqAu9XWDB6fH3vlYe0jCuv6/X+LHkAcARBHAMR1/hzAio2xdsyf7Nu5+nD7dvvnT8LbDxZszLfoAcQRAHEEQFz2cwA7htsx2xqshdsrjfFW1bl6s/1kP7z+4OIg3Fz0+5XOIey9gLToAcQRAHEEQFz2dwXH3hlU1fhtu+8T2HvV7DyAXQ/Au4KRFAEQRwDEZX9P4Phw1Gj79vn92HoB+z5+y/4/g9L+zHV709/HDadekfcEIikCII4AiMu/HqDhdfl2zI+tIYzPQ1Rrr/HnDDKjBxBHAMQRAHHZnw3cttfR84fB+nsbX4KfR+s7v37s3kHpOt+2P2/4+Ex9ng1EVgRAHAEQl30ewF5HF/Pw/+aNze3H6tsx2J4TxLaP/e/gusdXqj8L36toGj2AOAIgjgCIW7hnA6uyY3jsujw25i8begBxBEAcARCX/bmAT4/Szm0vut0ZzwUgIwIgjgCISz4PcG/1lzeG7c56eSe7F4z9vXguAEkRAHEEQFzyeYA7xfXUu1hq389/J22fHkAcARBHAAAAAAAAAAAAAJbYX8od3+GbpzepAAAAAElFTkSuQmCC");
  --bau-esp-t2-aberto:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAEXklEQVR4nO3dT2hUVxjG4VtpUYsgaYRAWlTahYFCQTEtStJNsVrMSggiiAi6CBJw6aqiducuIGUWSoMEBpkuI5WAIDhGKlJFKFRBpVIFoTGIokIFu/X7rp7jOPfcuTPv79l9M/fPmeHlnDNnZu7NMgAAAAAAAAAA0Ms+SH2Ck8c2mfrP+1+Y+vnSDXaHp/dNuX3DDfv8x8tMefbm167+xu6/7ndXX7HHe/bC7v/HV8Hj+/ZsX+/a55y9Zo+XrfjMlMsfXTL1l5/eNvX+w5eDx2/XkqRHR+URAHEEQNyHqU9QO3nr1ev17G/rzPPjE3aM9o7suBZ8fuYXO4fYnNkxdXHebj88Gh5Tj5/5xNRrl/xjj3d9yB5va/h4M9dt+x5kF0zdqC039dgPt/whks7T6AHEEQBxBEBc8jlAzt1Z98B3phrMhtzz50318OK/ph4eHA6ebvfhX90jY8HtGzVbH5xYEzyfb8/A6Krg8XNy70e56AHEEQBxBEBc6XMAP2Z6D7K/Wtp+y1o7pg/s2fte7Xqbqdrftj2njwa39+31rye2fZb1v3PbikAPII4AiCMA4spfB3Aah85Htgh/ro7NEXLbn54OPt/qHCL2ub8x2uLrq79682aJ0AOIIwDiCIC40ucAjTn3wFxrY7jXvLPS1FPZtKn9mJ47vzO5x9Z+znCwZs830mb781gHQIkIgDgCIK7j6wB+DG+XH6P9nGByZm9w/9iY77Xb/pHPH7e1f7voAcQRAHEEQFzH5wCpxeYEse17HT2AOAIgjgCIq9wcYKSvr9DjNRcXTd3qGJ+6PZ1GDyCOAIgjAOIqNwcoWtFjeK+hBxBHAMQRAHHJrxO4cXW/+aH7iscvU5+yqz1daadlV+8tcI0gpEMAxBEAcaWvA/jfwPnf1PX653b/XYB/P84t8L8AlIgAiCMA4ir3XcBI30edbkJSzWr9HIAeQB0BEEcAxBEAcQRAHAEQRwDElb4OMP69rZvu+vzNxf9M3e3rAv71eP79OFdP2Jg3oAcQRwDEEQBxlfsuIP/fue7+fUDV/gvo0QOIIwDiCIC4ys0BvKqPod2OHkAcARBHAMR1fA4wNVHstXL9/QAmf2rxXr7OiR/t/QD82n23owcQRwDEEQBxyecA2/oXTF30vX298ci1gMcOhO/LN/uz/Tu+H/NTt3/b3LSpr95Lejp6AHUEQBwBEFf+OsDd2dJP+To/J8mLrBt0uP1FowcQRwDEEQBxyecA/po34xft2vrk/M7g/ic2nwk+H90/s/vHvht4GGvffMHtc/vnrxEUm7O0hx5AHAEQRwDElb4OMDBqx+DB+aGWtvdi+/sx2M8JYtsPZmnbl9u/Hv6uomj0AOIIgDgCIK7jvwlMzY/hsc/lsTG/19ADiCMA4giAuNLvGXRqV9q17W63r26/C+CeQUiKAIgjAOKSrwN8u+aJGcP21fvLXezuMv794n8BSIoAiCMAAAAAAAAAAAAAAAAAPeZ/cKHy9rZIYrEAAAAASUVORK5CYII=");
  --bau-esp-t3-fechado: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAADX0lEQVR4nO3dv2sUQRjG8STYWwXSHKcXiQoaxejF1GIjFkLESmz1r/BvsLCxtwoGLESLEIJplIuCRkENuTPnFQas7A2xUXBeYSbD7Mxt7vl+umFvfyR5mHd25nYzNgYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOpoPPcJriy092M+32w2ks7X7w+c9tHGsaTj/RzsOO2qry9k9VUn699oIufBUX8EQBwBEHek9AltDZ1pHfd+frox6d3eHfzwbr//8MGBruuv1+/fOO2d1XXv9ZyYbnqPt93tO+3uwP15t3pfnXbsGCEVPYA4AiCOAIgrPgawNT+2pqayNX5785N7/tnT3v3t9Z06OVPNhf3BGABFEQBxBEBc8TFAqOaHaurnL1ve/UPzApfPXfS27RghNA8REjtGWEk6Wzx6AHEEQBwBEFd8DHD92lWnbWu6ZbfbmhraH370AOIIgDgCIK74GMAK3SdXPdeeuhZg1/dj5y2q/nlS0QOIIwDiCIC4oY8BrNT7/tDcfexagF1bsMcPXU/dar5FDyCOAIgjAOJqNwawDttcf+yYxc4rlEYPII4AiCMA4mo3Bsi93p+6FhBS95pv0QOIIwDiCIC42o0BYsXW1Ni1gFFHDyCOAIgjAOIO3RggVPPt+v2eqem25seKfX9B3e77LXoAcQRAHAEQl30M8O27/3l9O3f+/3v1/Ptb9r17vybjnu+3awM9c7xUoe8shn5fVaMHEEcAxBEAccXnAZ49d9+CE1vjU9kaX1roOYPS6AHEEQBxBEBc8TFA6Zqf+h2/taVl7/bQ/zsIKf37sOgBxBEAcQRAXPExwMraund77P/li32//tKjx97tt+7ervR8pd//H4seQBwBEEcAxBUfA9y7s+jdnnpfbGuurfmhGh8aI8Ref2iewH5/ge8DoCgCII4AiBv6cwGpNT9UY1vzc047VOMvLLif703seT8/7Ln8VPQA4giAOAIgrvgY4MXLjtOOXU+3982WnQdozbedtq3xsVKfU7CGvVZADyCOAIgjAOLGc59g8cZNp7357u1+7nP+62z7UtL+HzobFV3Jwcyen3P+JstPn2Q9Hz2AOAIgjgCIyz4GmJo6k/sUI21392PW49MDiCMA4ggAAAAAAAAAAADACPsNa0f4frApDccAAAAASUVORK5CYII=");
  --bau-esp-t3-aberto:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAD80lEQVR4nO3dPWsUURTG8bzYayPEYo0mIggaxGAkjRLEwk6IpBIbC+38AGJlZWkhaGEjVmLAQkwhFsEiupIgqxCNSUzcwoBN/AAmtrlHmMNl5t6Z5Pn/uutuZmaTx3vOzNxMenoAAAAAAAAAAAAAAMBe05t6BxfHx7Z3jgcHW8Hrx4eORm1vafVHMF5f7xa+f3/rSNT2rT/dtWCc+/jfzrWT/oz6Um4czUcAxBEAcfty7/Dh/TvB+Ou3pWC8vLIejFe6v4Oxrbl2bGvs0LnRYHxs5ETh8S13FoPxat/fwv3FunxhzPxLOH70dLrU9mMxA4gjAOIIgLjsPcCr12+Csa3xVfNqvvf+1Q/tKg/nv8873DpY6fZjMQOIIwDiCIC45D3Az19hzZuZDWtq2fPqWM8fPyt8fermtWDsXav3jt9el/Bet9+v1JgBxBEAcQRAXPbrAJZXI70abNkaurnVH4xtjbdsj+DV5Njjs+sJ6sYMII4AiCMA4mrvASxbU20NPnwo7tr55/bHSt/v9QT2+GzNt5/v0sT5YPzu/YJ3iJViBhBHAMQRAHG19wBezbfKXiuP7QliecfHdQA0CgEQRwDEZe8BYmv+btf0z8cMII4AiCMA4mq/DqCmaT0BM4A4AiCOAIjL3gM0rQbWre7vBzOAOAIgjgCIy94D2DVzVdfA2DWDsVIfL78biKwIgDgCIC55D+Ctky+77j+3ssdnP6/3/UiNGUAcARBHAMRlvw5gn6ljfxdut/UEntiabj/v97Xi5yeUxQwgjgCIIwDiGr8msO775anZnij2mUNlMQOIIwDiCIC42nuA2Pvhsc/gKfv7+GWfU2g17boGM4A4AiCOAIjL3gN4zwa2vJpvVf0MnrLba/p1DGYAcQRAHAEQV/t6gNjz7KrP873tW951B4/tCWJ7oqoxA4gjAOIIgLja7wV46+JTPzs4Vtn92esarAdArQiAOAIgLnsPMNyKux9e9tnCp8bOBuPYvxvo/X0Bbz1D7L2M3JgBxBEAcQRAXPIewKvZsT2Bdy3e7s/W/Ls3bhdu/96TB8HY9gBeTfdqvD3vt3g+ALIiAOIIgLja7wV4vJrpWe4sBmNvXb73/lvXJwu/fqUbV8NZD4BaEQBxBEBc7T1AbM20YnuEianiGm555/Vlj79uzADiCIA4AiAuew8wM9sOxrE13DtvtvcGNrf6g/GZ8dHCr1+Ymw/GB8x/karP83OvAbSYAcQRAHEEQFxv6h1MXrkajDuf5rdT73MnuyYwlrcmsGojp0eDn8n0yxdJ98cMII4AiCMA4pL3AAMDJ1PvYk/b2PiSdPvMAOIIgDgCAAAAAAAAAAAAsIf9A2eLOhKcjwmqAAAAAElFTkSuQmCC");

}
.fighter{ position:relative; }
.bauArena{
  position:absolute; right:-64px; bottom:2px;
  width:64px; height:64px; cursor:pointer; display:none;
  background-image:var(--bau-fechado);
  background-size:contain; background-repeat:no-repeat; background-position:center;
  image-rendering:pixelated;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));
}
.bauArena.mostrar{ display:block; }
.bauArena.aberto{ background-image:var(--bau-aberto); animation:none; cursor:default; pointer-events:none; }
/* especial fica do OUTRO lado do herói (esquerda), nao gruda no padrao */
.bauArena.bauEspecial{ right:auto; left:-64px; }
.bauArena.bauEspecial.tier0{ background-image:var(--bau-esp-t0-fechado); }
.bauArena.bauEspecial.tier0.aberto{ background-image:var(--bau-esp-t0-aberto); }
.bauArena.bauEspecial.tier1{ background-image:var(--bau-esp-t1-fechado); }
.bauArena.bauEspecial.tier1.aberto{ background-image:var(--bau-esp-t1-aberto); }
.bauArena.bauEspecial.tier2{ background-image:var(--bau-esp-t2-fechado); }
.bauArena.bauEspecial.tier2.aberto{ background-image:var(--bau-esp-t2-aberto); }
.bauArena.bauEspecial.tier3{ background-image:var(--bau-esp-t3-fechado); }
.bauArena.bauEspecial.tier3.aberto{ background-image:var(--bau-esp-t3-aberto); }
/* REMOVIDO (pedido do usuario): fechadura pixel (::after) do bau trancado --
   redundante com o chip .dica ("Requer uma chave X ou superior") que ja
   aparece ao clicar no bau trancado (ver abrirBauEspecial()), e um item a
   menos na tela. Regra original (com a imagem base64 do cadeado) removida
   daqui -- historico completo no controle de versao do repo, nao
   reproduzido no arquivo pra nao inflar o CSS com base64 morto.
   RETOMADO (pedido do usuario) com icone novo: cadeado pixel em SVG (leve, nitido). */
.bauArena.trancado::after{content:'';position:absolute;left:50%;bottom:14px;width:22px;height:26px;transform:translateX(-50%);
  background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2012%2014%22%20shape-rendering=%22crispEdges%22%3E%3Crect%20x=%223%22%20y=%220%22%20width=%226%22%20height=%221%22%20fill=%22%232a2118%22/%3E%3Crect%20x=%222%22%20y=%221%22%20width=%222%22%20height=%226%22%20fill=%22%232a2118%22/%3E%3Crect%20x=%228%22%20y=%221%22%20width=%222%22%20height=%226%22%20fill=%22%232a2118%22/%3E%3Crect%20x=%224%22%20y=%221%22%20width=%224%22%20height=%221%22%20fill=%22%23d5d9e0%22/%3E%3Crect%20x=%223%22%20y=%222%22%20width=%221%22%20height=%225%22%20fill=%22%23b8bcc4%22/%3E%3Crect%20x=%228%22%20y=%222%22%20width=%221%22%20height=%225%22%20fill=%22%238b909a%22/%3E%3Crect%20x=%220%22%20y=%227%22%20width=%2212%22%20height=%227%22%20fill=%22%232a2118%22/%3E%3Crect%20x=%221%22%20y=%228%22%20width=%2210%22%20height=%225%22%20fill=%22%23e8a92a%22/%3E%3Crect%20x=%221%22%20y=%228%22%20width=%2210%22%20height=%221%22%20fill=%22%23ffe27a%22/%3E%3Crect%20x=%221%22%20y=%2212%22%20width=%2210%22%20height=%221%22%20fill=%22%23b9831f%22/%3E%3Crect%20x=%225%22%20y=%229%22%20width=%222%22%20height=%222%22%20fill=%22%232a2118%22/%3E%3Crect%20x=%225.5%22%20y=%2211%22%20width=%221%22%20height=%221%22%20fill=%22%232a2118%22/%3E%3C/svg%3E") center/contain no-repeat;image-rendering:pixelated;pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.bauArena .dica{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  white-space:nowrap; background:#000; color:#fff; padding:3px 8px;
  border-radius:4px; font-size:12px; opacity:0; pointer-events:none; transition:opacity .15s;
}
.bauArena .dica.on{ opacity:1; }
/* surge uma vez quando aparece (dia vencido), depois entra num pulso
   continuo sutil -- e o que indica "toque aqui" enquanto nao foi aberto */
@keyframes bauSurge{
  0%{ transform:scale(.35) translateY(8px); opacity:0; }
  70%{ transform:scale(1.14) translateY(-2px); opacity:1; }
  100%{ transform:scale(1) translateY(0); opacity:1; }
}
@keyframes bauPulso{
  0%, 100%{ transform:scale(1); filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)) brightness(1); }
  50%{ transform:scale(1.08); filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)) brightness(1.15); }
}
.bauArena.mostrar{
  animation: bauSurge .5s cubic-bezier(.34,1.56,.64,1) both,
             bauPulso 1.4s ease-in-out .5s infinite;
}
/* pedido do usuario: clicar no bau especial trancado sem ter chave
   disponivel para de incomodar com o pulso continuo (ver
   abrirBauEspecial() -- branch chaveId==null). Volta a pulsar sozinho
   se uma chave ficar disponivel depois (ver atualizarBauArena()).
   Selector composto (3 classes) de proposito, pra ganhar de
   .bauArena.mostrar (2 classes) na especificidade sem depender da
   ordem no arquivo. */
.bauArena.mostrar.bau-pausado{ animation:none; }
/* precisa ser mais especifica que .bauArena.mostrar (2 classes) pra vencer
   a cascata de verdade -- antes as duas regras tinham a mesma especificidade
   e a que vinha depois no arquivo ganhava, entao o pulso nao parava */
.bauArena.mostrar.aberto{ animation:none; }

/* ===== módulo N — pop-up "Tarefas perdidas" (dano não-fatal na virada) =====
   Mesma família visual do baú/queda: glow colorido no card (como .quedapop),
   itens em card com box de ícone (como .baucard/.baubox), em vez de linhas
   de texto plano. Fecha com toque no fundo, igual ao baú. */
.largpop{position:fixed;left:50%;top:50%;z-index:96;
         transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;
         transition:transform .25s cubic-bezier(.2,.9,.3,1.2), opacity .22s;
         background:var(--panel-2);border:1px solid var(--perigo);border-radius:18px;
         padding:26px 22px 20px;width:min(300px, calc(100% - 56px));text-align:center;
         box-shadow:0 0 26px -8px var(--perigo)}
  .largpop.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}

  .largicone{width:56px;height:56px;margin:0 auto 10px;
             display:flex;align-items:center;justify-content:center}
  .largicone img{width:56px;height:56px;image-rendering:pixelated;
                 transform:scaleX(-1);filter:grayscale(1) brightness(.8)}

  .larglabel{font-family:'Silkscreen',monospace;font-size:11px;color:var(--perigo);
             letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
  .largtitulo{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;
              font-weight:600;color:var(--text);line-height:1.2;margin-bottom:14px}

  .largitens{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;
             max-height:180px;overflow-y:auto}
  .largitem{display:flex;align-items:center;justify-content:space-between;gap:10px;
            background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
            padding:9px 12px;text-align:left;opacity:0;transform:translateY(6px);
            animation:largitemIn .32s ease forwards}
  @keyframes largitemIn{to{opacity:1;transform:translateY(0)}}
  .largnome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;
            font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--text)}
  /* losangos de dificuldade -- mesma cor por tier de .task[data-dif] la na
     lista de tarefas (ver modulo "linha de meta abaixo do titulo"), so que
     escopado em .largitem pra nao depender de estar dentro de .task */
  .largitem[data-dif="trivial"] .difpip{color:#7E8BA3}
  .largitem[data-dif="facil"]   .difpip{color:var(--verde)}
  .largitem[data-dif="media"]   .difpip{color:#F2C94C}
  .largitem[data-dif="dificil"] .difpip{color:var(--perigo)}

  .largtotal{font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:700;
             color:var(--perigo);margin-bottom:16px}

  .largok{width:100%;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;
          padding:11px;border-radius:11px;border:none;background:var(--accent);
          color:var(--bg);cursor:pointer}

/* ======================================================================
   TOCHAS DECORATIVAS DA ARENA -- puramente cosmetico, independe do
   sistema de Temas de Arena (ainda pausado/nao implementado, ver
   roadmap). Sprite: pack "DampDungeons" (Animations/Dungeon_ObjectsDungeon.png),
   licenca permite uso comercial e edicao. Tocha de pe (chama + bacia +
   tripe), 3 frames de flicker reempacotados em tira horizontal 48x32
   (16x32 cada frame). Mesma tecnica de animacao por spritesheet ja
   usada em fx-sprite-slash (background-position + steps(N)), so
   trocando o asset e o timing.
   Pedido do usuario: tocha pequena e alta na parede (nao ancorada no
   chao) -- ajustar left/right/top/scale abaixo se quiser recalibrar. */
.tocha-arena{
  position:absolute;
  top:4px;
  width:16px;
  height:32px;
  background-size:48px 32px;
  image-rendering:pixelated;
  transform:scale(1.7);
  animation:tochaChama .6s steps(3) infinite;
  pointer-events:none;
  z-index:1;
}
/* duas spritesheets separadas (esq/dir ja espelhada no proprio PNG) em
   vez de scaleX(-1) via transform -- o transform so age DEPOIS do
   layout, entao "right:Npx" + scaleX(-1) + transform-origin:top right
   espelha a caixa PRA FORA da ancora, nao pra dentro (bug encontrado
   testando no aparelho: tocha direita vazava a borda da arena em
   +13.6px). Espelhar a imagem em si elimina o problema de vez. */
.tocha-arena.tocha-esq{
  left:4px;
  transform-origin:top left;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAYAAABU1PscAAACoklEQVR4nO2WTUgbQRiG34RekkAPEcRDNLDKgudCWqHBgiLdICXQU2jEUoQYvJZcwx56kXrooWAgh0oqgZ5yCEZKPQQLSYVSCj2FJJKfgwiRUqiewvQQZtnZnf3Ryq6HvBA2O7vP9843s/PNAGONNdZYd1b7KyJxuw9W8lq98D9J3NYAmMUxTeDF54YnHA/dqCNOzR43AVHwEfqbWb1U2uwGpe/KzR4T6zr8/opI6NXM38ODU3IGU4UiztYSmCoUEY6H0Cn1ITd7aLSvdIyWz85NK/fheAjz0joAYGFp0xZP/ami+SCONy64/l4zmF7pLKTkjOlMiIKP1I52ITd7inGn1Mdh6g2SiSJqR7u2+Fx2G9F8UBkAAPj4R+D6e9VwSs4gl91WzNUBwvEQvrz/ZpgENV9Y2mS4aD6IcDyE5P22aRJansaYWb3E8cYFAHD9TRdxNB9URv86ys5NM5zdGB++thVey+U+/QYAvHwsMAyTgPpht+xHYJhGYJhGt+y33QlqruXpjJrJyD+aD6Jb9jNJchMARt+53OyhU+orbfPSOpaf/MTy1kPdCGh1tpYAAEPeSik5o+MDwzReva2Z+4uCjyS3npPB6R7ZKWSJuvyJgo/sFLJkcLpHpEdPuSXRLd6jDhCRYgCAd6+fcZNMJkZVqXVe1ZUzt3jDIDwNvv/lmrvJM2ug0b7ynFQObmTuFs/diQFgdnJRaWudVxkTow64weuqEM+ABrMyd4O/ZxRo4kGAuW9VrKzd4bk7sfZbPKkc2Bo9N3jD47SdNiM5yesSoIc69SICRt+hnU44zeuO0xEphh/1X9zgESlmeRx2mtdtZPT/7OSicnahR2z1s0r90LAEO8kzVYhdKFUyUQ8wEBXP3C3+WpuKkfFd5cdyQv8A0LgoFtXx0DYAAAAASUVORK5CYII=");
}
.tocha-arena.tocha-dir{
  right:4px;
  transform-origin:top right;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAYAAABU1PscAAACuUlEQVR4nO2WP2gaURzHv4YsKnSwEDL4By5yU5dSSA1EUkgIMTi4ShVCCZjQoZvrcUMX6VpQcGhJgtBJisRSkkFSsAmELoWCqOCfQYSGUqhO4TrY38Pz3p2XNHgZ7gvi3Xu/z+/fvXf3AFu2bNmyZaCjTVExmp+7LXhXCfwvq1vAXeo2RRxtikog5sXzzzWHkR23AFFwKuREFJwK/ZsNLgpOhX5yvaPyaZYHAH90oPLFs9VUJwpORQr6EM57cLZ7xcZ7yThyUga15tCwI6LgVKqnWQDAj/J7tIpdNifXO6Z4KehDIOZFq9hFLxnH4kFBN/7cJJyS0zj8LQAAAjEvACCc9yAnZVA9zRp2kpJPxAv4lHqNVrGLcN7DkjfDp+Q0gFH3AWDxoMD+U3Jaw89NwidvzwEAZ7tX8EcHrAgAWFnf001iPPnEgyYCMS9LnnxM4yk+2Y83EAByUkZThOoJ7KyOOp/78IuNUSekoA8A8O5Lk9M7rYija+JvIn90wJLXk6oASq5dciGc98B9vQ/39T7aJRezoSKNFM570C65NLzZIvzRAZfnxZ8fv6HJF1IG1UiWjdNGpPVppI2XT7HxbLRfJvleMm7IUnweL9c73PiqAhLxAg4LcUBOY2V9T2WYktPYWRXw6s1H3QSs4NkrSRScytLCGgCMnHBE8EX5WPM6s4rnOnn4xM11oBfcSl61iWvNoaPRr+Dn5Z8bB7eK536J6ZoeKQA0+hUWRC8BK3jNWYgMxuHJOSPNmp/XWP3T5DpslKeFtobnnkZrzaHjonzM7qetXSt5w+P0tDE9zZLXFDD+PiYtLaxxT4J6wWfJa47Ty5FtruNvX79jObI99Tg8a55t4khoS2n0Kxhfe49DjwAAJ5fnqnGerOJVGyMS2mLVNfoVUDfMbkIreO4gOTL78blvvK1Z6i8q7hIvKJXHLAAAAABJRU5ErkJggg==");
}

@keyframes tochaChama{
  from{ background-position-x:0; }
  to{ background-position-x:-48px; }
}

/* ======================================================================
   FIX DE STACKING: .fight, .vitoria e .mobinfo (herói/monstro, banner
   "dia vencido", nome+vida do monstro) sao os 3 filhos diretos de
   .arena com CONTEUDO visivel, e nenhum tem position definido nas
   regras originais -- por padrao todos pintam ATRAS de qualquer
   descendente posicionado com z-index, incluindo as novas
   .arena-bg-layer. Sem isso ficam escondidos atras do fundo (foi
   exatamente o que aconteceu com .mobinfo -- nome do monstro sumiu --
   eu tinha corrigido so .fight antes e esquecido dos outros dois).
   Aditivo, nao mexe nas regras originais (~linhas 38, 90, 96). */
.fight, .vitoria, .mobinfo{ position:relative; z-index:1; }

/* ======================================================================
   CAMADAS DE FUNDO DA ARENA (carrossel deslizante, TESTE) -- duas divs
   full-cover, cada uma recebe o fundo de um tema via JS
   (aplicarFundoTemaArena) e anima com transform:translateX, tecnica
   classica de carrossel (uma sai enquanto a outra entra). z-index:0 pra
   ficar atras de tocha/fight/toast/dots. .arena precisa continuar com
   overflow:hidden (ja tem, regra padrao) pra cortar o que sai da tela. */
.arena-bg-layer{
  position:absolute; inset:0; z-index:0;
  background-repeat:no-repeat; image-rendering:pixelated;
  transition:transform .28s ease;
}

/* ======================================================================
   OVERLAY DE TEMA BLOQUEADO -- quando o tema ATUAL (persistido, nao
   durante o arrasto/previa) e pago e nao desbloqueado, esconde
   herói/monstro/nome (misturar conteudo em cor cheia com um fundo em
   silhueta ficava estranho -- feedback do usuario) e mostra so o
   icone de cadeado (pixel art, mesma tecnica crispEdges do icone de
   moeda -- nao emoji, pra combater com o resto do app) + texto.
   Classe .arena.tema-bloqueado toggada em JS (ver
   atualizarBloqueioArena()). z-index alto (3), acima de tudo. */
.tema-arena-bloqueio{
  position:absolute; inset:0; z-index:3;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  pointer-events:none;
  background:rgba(0,0,0,.35);
}
.arena.tema-bloqueado .tema-arena-bloqueio{ display:flex; }
.arena.tema-bloqueado .fight,
.arena.tema-bloqueado .mobinfo,
.arena.tema-bloqueado .vitoria{
  opacity:0; pointer-events:none;
}
.tema-arena-cadeado-img{
  width:32px; height:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
#temaArenaBloqueioTexto{
  font-family:'Outfit',sans-serif; font-size:12px; font-weight:600;
  color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.7);
  text-align:center; padding:0 24px;
}

/* bolinhas indicando quantos temas existem e qual esta selecionado --
   escondidas por padrao (opacity:0), so aparecem durante o arrasto
   (classe .visivel, adicionada/removida em JS no touchstart/touchend
   do gesto real) e so quando ha 2+ temas acessiveis pra navegar. */
.tema-arena-dots{
  position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .25s ease;
}
.tema-arena-dots.visivel{ opacity:1; }
.tema-arena-dot{
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.35);
}
.tema-arena-dot-atual{ background:rgba(255,255,255,.9); }

/* Indicador de Estagio -- REDESIGN (pedido do usuario: "nao ta combinando
   com o estilo do resto do app" / "nao tem barra de XP nem nada"). A v1
   so recolori o pill pra bater com o Nivel (badge solido), mas um pill
   de IDENTIDADE (Nivel) e um indicador de PROGRESSO (Estagio) sao coisas
   diferentes -- a peca certa pra copiar era a barra de Experiencia
   (.xpwrap/.bar/.fill), que e o padrao visual REAL de progresso no app:
   fundo neutro (var(--panel-2)), trilho escuro translucido e
   preenchimento em gradiente accent->xp2. Agora usa exatamente os
   mesmos tokens/gradiente, so num pacote mais compacto pra caber no
   meio da topbar. */
.estagio-pill-wrap{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  align-self:center;
  flex:1; min-width:0; margin:0 8px;
}
.estagio-pill{
  display:flex; align-items:center; gap:5px;
  background:var(--panel-2); border-radius:999px; padding:4px 12px;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:10.5px;
  color:var(--text); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.estagio-pill-num{ font-size:9.5px; font-weight:500; color:var(--muted); flex:none; }
.estagio-pill-trilho{
  width:100%; max-width:110px; height:6px; border-radius:3px;
  background:rgba(0,0,0,.32); overflow:hidden;
}
/* v4.160 (pedido do usuario): tirado o gradiente accent->xp2 da barra
   de estagio -- agora cor solida (var(--accent)) em todos os temas.
   NOTA: esta classe (.estagio-pill-fill) e de um componente antigo (pilula
   solta na topbar) que nao esta mais no markup atual -- a barra de Estagio
   em uso hoje e #estagioTopoFill (ver #estagioTopoFill acima, perto de
   .fill). Deixada como estava pra nao mexer em nada morto. */
.estagio-pill-fill{ height:100%; border-radius:3px; background:var(--accent); transition:width .4s ease; }

/* ======================================================================
   POOF DE DERROTA DO MONSTRO -- nuvem de fumaca (16 frames, extraida
   do pacote de sprites "Free Smoke Fx Pixel" que o usuario mandou --
   troca da nuvem branca de 4 frames antiga, que o usuario achou fraca.
   Preto do sprite original virou transparencia (chroma-key) na
   extracao, mantendo so o branco da fumaca. Spawnada por
   mostrarPoofMonstro() no exato lugar onde o monstro estava, no
   instante da derrota (ANTES de render() escondê-lo). Mesma tecnica de
   spritesheet+steps() da tocha da Arena. Item 2 do redesign de feedback
   de combate (ver roadmap: numero ancorado -> poof -> recompensa
   voando -> entrada do bau). */
.poof-monstro{
  position:absolute; left:0; top:0; width:80px; height:80px;
  transform:translate(-50%,-50%);
  background-image:url("data:image/png;base64,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");
  background-size:1040px 80px; image-rendering:pixelated;
  pointer-events:none; z-index:2;
  animation:poofMonstroFrames .39s steps(13) forwards;
}
@keyframes poofMonstroFrames{
  from{ background-position-x:0; }
  to{ background-position-x:-1040px; }
}

/* ======================================================================
   RECOMPENSA VOANDO (item 3) -- icone criado dinamicamente por
   voarRecompensa()/voarRecompensaFinal() (script principal), sempre
   como position:fixed porque o destino (o HEROI) fica dentro da
   .arena, mas o elemento nasce em coordenadas de VIEWPORT (mesma
   tecnica da variante "fora da Arena" do dmg-float) -- mais simples
   assim do que lidar com o offset relativo toda vez.
   left/top/transform/opacity mudados via JS logo apos o double rAF; a
   transition abaixo e o que faz a viagem parecer suave em vez de um
   "teletransporte". */
.recompensa-voando{
  position:fixed; width:22px; height:22px;
  transform:translate(-50%,-50%) scale(1);
  opacity:1; pointer-events:none; z-index:500;
  transition:
    left .75s cubic-bezier(.25,.65,.3,1),
    top .75s cubic-bezier(.25,.65,.3,1),
    transform .75s ease-in,
    opacity .75s ease-in .16s;
}


/* ======================================================================
   PLANO PRO -- seletor de personagem (topbar), dropdown "Meus herois" e
   cortina de transicao ao trocar. Zero token novo -- so reaproveita
   --panel-2/--panel-3/--line/--accent/--dim/--gold ja existentes, e o
   mesmo --expo (curva de animacao) que a Arena/tema ja usam pra
   cross-fade. #lvl (dentro do .pjTrigger) NAO foi tocado -- continua
   span puro, render() escreve textContent nele igual sempre.
   ====================================================================== */
.pjTrigger{
  /* v4.24x (pedido do usuario: "não precisa desse quadrado, pode
     aparecer só o nível normal sem quadrado") -- container perdeu o
     fundo/padding/radius que formavam o "pill" -- fica so um flex row
     transparente por baixo do texto. .pjTrigger .lvl (logo abaixo) ja
     zerava o quadrado do PROPRIO #lvl dentro daqui; agora nenhum dos
     dois desenha caixa nenhuma. */
  display:flex; align-items:center; gap:6px;
  background:none; border:none;
  cursor:default; font-family:'Outfit',sans-serif;
}
.pjTrigger .pjNomeTopo{
  font-size:13px; font-weight:600; color:var(--accent);
  max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pjTrigger .pjNomeTopo:empty{ display:none; } /* grátis com 1 personagem só: sem rótulo, so o Nível mesmo */
.pjTrigger .pjNomeTopo:not(:empty) + .lvl::before{ content:'· '; }
/* FIX (borda escura estranha): .lvl ja tem seu proprio background+padding+
   radius (regra original, linha ~54). Botar ele dentro do .pjTrigger --
   que TAMBEM tem background+padding+radius -- criava um "pill dentro de
   pill" (a caixa escura extra que apareceu no print). Zera soh dentro do
   .pjTrigger; a regra .lvl{} original continua intacta pra quem usa
   fora daqui.
   IMPORTANT necessario: o tema Crepusculo (linha ~753) redefine .lvl
   com !important (background/padding/radius/cor propria) -- sem
   !important aqui essa regra nao vencia a do tema, e o quadrado escuro
   voltava sempre que esse tema (ou qualquer outro com !important) tava
   ativo. Cor tambem entra na disputa: sem forcar, o texto ficava
   var(--bg) (escuro) em cima do --accent-dim do botao = quase ilegivel. */
.pjTrigger .lvl{
  background:none !important; padding:0 !important; border-radius:0 !important;
  color:var(--accent) !important; font-size:13px !important; font-weight:600 !important;
  letter-spacing:normal !important; text-transform:none !important;
}
.pjTrigger .pjChevron{ width:10px; height:10px; color:var(--accent); opacity:.8; flex:none; transition:transform .2s var(--expo); }
.pjTrigger.aberto .pjChevron{ transform:rotate(180deg); }

/* v4.22x (pedido do usuario: "animação de puxar pra baixo") -- era so um
   fade + 6px de deslize, mal dava pra notar. Agora ele nasce encolhido
   verticalmente a partir do topo (scaleY) e "desenrola" pra baixo, tipo
   uma cortina abrindo, alem do fade/slide que ja existia. transform-
   origin:top garante que o encolhimento acontece colado no botao que
   abriu (#pjTrigger), nao no centro do dropdown. */
.pjDropdown{
  position:absolute; top:52px; left:18px; width:230px; z-index:20;
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  padding:8px; box-shadow:0 12px 28px rgba(0,0,0,.45);
  transform-origin:top center;
  opacity:0; visibility:hidden; transform:translateY(-8px) scaleY(.75);
  transition:opacity .22s var(--expo), transform .22s var(--expo), visibility 0s .22s;
}
.pjDropdown.on{
  opacity:1; visibility:visible; transform:translateY(0) scaleY(1);
  transition:opacity .22s var(--expo), transform .22s var(--expo), visibility 0s;
}
.pjDropdown .edsec{ margin:4px 6px 6px; }
.pjItem{
  display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:8px;
  cursor:pointer; background:none; border:none; width:100%; text-align:left;
  font-family:'Outfit',sans-serif; color:var(--text);
}
.pjItem:active{ background:rgba(255,255,255,.05); }
.pjItem.ativo{ background:var(--panel-3); cursor:default; }
.pjItem .pjAvatar{
  flex:0 0 30px; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.pjItem.ativo .pjAvatar{ background:var(--accent-dim); }
.pjItem .pjAvatar img{ width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.pjItem .pjTxt{ flex:1; min-width:0; }
.pjItem .pjTxt b{ display:block; font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pjItem .pjTxt span{ display:block; font-size:10.5px; color:var(--dim); }
.pjNovoBtn{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  margin-top:4px; padding:9px; border-radius:999px; border:1.5px dashed var(--line);
  background:transparent; color:var(--dim); font-family:'Outfit',sans-serif;
  font-size:12px; font-weight:600; cursor:pointer;
}
.pjNovoBtn.bloqueado{ opacity:.55; }
.pjNovoBtn .pjSelo{
  font-size:8px; font-weight:700; background:var(--accent); color:var(--bg);
  border-radius:999px; padding:2px 6px; letter-spacing:.3px;
}

/* cortina cheia -- cobre so o .app (que ja e position:relative, ver
   media query existente), NAO a tela toda. Opacidade pura, mesma logica
   ja usada no cross-fade de tema da arena: nunca revela o conteudo novo
   antes de estar pronto por baixo. */
.pjCortina{
  position:absolute; inset:0; z-index:30; background:var(--bg);
  opacity:0; pointer-events:none;
  transition:opacity .22s var(--expo);
}
.pjCortina.on{ opacity:1; pointer-events:auto; }

/* ===== Bloco style #NOVO — carrossel de onboarding refeito (v4.17x) =====
   Pedido do usuario: design minimalista, paleta do tema Grafite (jah e o
   tema padrao pra quem ainda nao escolheu, ver temaSalvo()), tipografia
   em escala tipo Play Store (eyebrow pequeno maiusculo -> headline forte
   -> corpo em cinza) em vez do "titulo fraca/forte" mais decorativo de
   antes. So overrides + componentes NOVOS (pergunta de categoria, card
   de progresso, badges de conquista) -- nao mexe na estrutura JS/HTML
   dos blocos antigos (.carrosselSlide/.carrosselMeio/etc. continuam os
   mesmos elementos, so o visual muda por cima). Cores hardcoded em
   grafite (nao var(--accent) etc.) de proposito: o carrossel de
   onboarding roda ANTES da pessoa escolher tema (ver GRADIENTES_ONBOARD,
   ja hardcoded do mesmo jeito por decisao anterior), entao usar var()
   aqui faria o card de pergunta/progresso mudar de cor se a pessoa
   trocasse de tema DEPOIS -- o onboarding deve continuar visualmente
   grafite sempre, junto do fundo gradiente que ja e fixo. */

/* ---- escala tipografica (eyebrow / headline / corpo) ---- */
.obFraca{
  font-size:11px !important; font-weight:700 !important; letter-spacing:.14em !important;
  text-transform:uppercase; color:#9A9A9A !important; opacity:1 !important;
}
.obForte{
  font-size:25px !important; font-weight:700 !important; line-height:1.2 !important;
  letter-spacing:-.01em; color:#FAFAFA !important; margin-top:3px;
}
.obCorpo{
  font-size:14px !important; line-height:1.55 !important; opacity:1 !important;
  color:#C2C2C2 !important; margin-top:10px !important; max-width:270px;
}

/* ---- pergunta de categoria (slide Personalizacao) ---- */
.quizPergunta{
  font-family:'Outfit',sans-serif; font-size:21px; font-weight:700; line-height:1.25;
  text-align:center; color:#FAFAFA; margin-top:6px;
}
.quizOpcoes{display:flex;flex-direction:column;gap:9px;margin-top:16px;width:100%}
.quizOpcao{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:#323232; border:1.5px solid #494949; border-radius:13px; padding:13px 14px;
  font-family:'Outfit',sans-serif; font-size:14px; color:#FAFAFA; font-weight:500;
  cursor:pointer; transition:border-color .15s, background .15s;
}
.quizIcone{
  width:38px; height:38px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--poco);
}
.quizIcone img{width:28px;height:28px;image-rendering:pixelated;display:block}
.quizOpcao.sel{border-color:var(--cat-cor); background:#4A4A4A}
.quizOpcao .check{
  margin-left:auto; width:18px; height:18px; border-radius:50%; border:1.5px solid #5C5C5C; flex:none;
}
.quizOpcao.sel .check{border-color:var(--cat-cor); background:var(--cat-cor); position:relative}
.quizOpcao.sel .check::after{
  content:''; position:absolute; inset:0; margin:auto; width:8px; height:5px;
  border-left:2px solid #1A1526; border-bottom:2px solid #1A1526;
  transform:translateY(-1px) rotate(-45deg);
}

/* ---- card de progresso (slide Sensacao de Progresso) ---- */
.progressoCard{
  background:#323232; border:1px solid #494949; border-radius:16px;
  padding:16px 18px; width:100%; max-width:280px; margin:14px auto 0;
}
.progressoTop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.progressoLvl{font-family:'Silkscreen',monospace;font-size:12px;color:#FAFAFA}
.progressoPct{font-family:'Outfit',sans-serif;font-size:11.5px;color:#909090}
.progressoCard .barra{height:8px;border-radius:5px;background:#494949;overflow:hidden}
.progressoCard .barra i{display:block;height:100%;background:#FAFAFA;border-radius:5px}

/* ---- badges de conquista (slide Conquistas, substitui prova social) ---- */
.obConquistasRow{display:flex;gap:12px;justify-content:center}
.obConquistaBadge{
  width:64px;height:64px;border-radius:16px;background:var(--poco);
  border:1.5px solid #494949;display:flex;align-items:center;justify-content:center;
  color:#1A1526;
}
.obConquistaBadge svg{width:28px;height:28px;stroke:currentColor}
.obConquistaBadge.off{background:#323232;opacity:.4}
.obConquistaBadge.off svg{stroke:#909090}
/* .r0-.r5 (cor de raridade) vem ANTES no arquivo (~linha 1093) e so seta
   border-color -- a regra .obConquistaBadge acima, por vir DEPOIS e usar
   o shorthand `border`, venceria a cascata e apagaria a cor/glow mesmo
   com a classe aplicada. Override pontual so pro r4 (unico usado aqui
   hoje, Coroa Real/Diamante) em vez de confiar na ordem entre blocos. */
.obConquistaBadge.r4{border-color:#F2A65A;box-shadow:0 0 10px rgba(242,166,90,.30)}

/* ---- botao primario do onboarding: minimalista, contraste alto ---- */
.carrosselSlide:not([data-slide="login"]) .primario{
  background:#FAFAFA !important; color:#1E1E1E !important; border:none !important;
  border-radius:12px !important; font-weight:600 !important; letter-spacing:.01em;
}

/* ---- dots minimalistas (ativo vira pilula, resto ponto pequeno) ---- */
.carrosselDot{width:6px;height:6px;background:#494949}
.carrosselDot.on{background:#FAFAFA;width:16px;border-radius:3px}

/* ===== Bloco style #NOVO2 — setup pos-login: Personagem + Nome (v4.17x) =====
   Restyle de #passo2 (Nome) e #passoHeroi (Personagem) pra bater com o
   visual do carrossel novo (grafite, minimalista, escala tipo Play
   Store) -- pedido do usuario. Ao contrario do carrossel (que forca
   grafite hardcoded, roda ANTES de qualquer tema escolhido), estes 2
   passos usam var(--accent)/var(--panel)/etc. normalmente: rodam DEPOIS
   do login, quando o tema (padrao Grafite, ver temaSalvo()) ja esta
   aplicado no :root -- nao precisa hardcode aqui. */
.setupDots{display:flex;gap:7px;justify-content:center;margin-bottom:22px}
.setupHeadline{text-align:center;margin-bottom:22px}
.setupHeadline .obFraca{color:var(--dim) !important}
.setupLabel{
  display:block; font-family:'Outfit',sans-serif; font-size:22px !important; font-weight:700 !important;
  line-height:1.25; color:var(--text) !important; text-align:center; margin-bottom:4px;
}
#passo2 .campo, #passoHeroi .campo{align-items:center}
#passo2, #passoHeroi{justify-content:center}
#passo2 .primario, #passoHeroi .primario{
  border-radius:12px; font-weight:600; letter-spacing:.01em;
}

/* ===== Bloco style #NOVO3 — redesign Personagem/Nome (v4.18x) =====
   Substitui as regras do #NOVO2 acima que miravam o markup antigo
   (preview-box fixo #palcoSprite/#palcoNome + grid estatico de 8
   miniaturas em #passoHeroi; label+input em caixa em #passo2) --
   removidas porque o HTML foi reescrito (ver index.html). Pedido do
   usuario: "quero telas completamente novas... design novo da sua
   criatividade mas diferente". As duas ideias novas:
   1) #passoHeroi vira um carrossel horizontal de cards com scroll
      nativo + snap -- arrastar o dedo ESCOLHE o heroi de verdade (ver
      montarCarrosselHerois() no <script>), sem grid separado.
   2) #passo2 vira uma "placa de nome": avatar circular do heroi ja
      escolhido acima de um campo sem caixa, so uma linha embaixo
      (como assinar uma pergaminho), em vez do input com fundo/borda
      igual a qualquer outro formulario do app. */

/* ---------- Personagem: carrossel horizontal com snap ---------- */
.heroiCarrosselWrap{ position:relative; margin:4px -4px 6px; }
.heroiCarrossel{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 42% 10px; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);
}
.heroiCarrossel::-webkit-scrollbar{display:none}
.heroiCard{
  flex:0 0 auto; width:104px; height:104px; scroll-snap-align:center;
  display:flex; align-items:center; justify-content:center;
  border-radius:18px; background:var(--panel-2); border:1px solid var(--line);
  opacity:.4; transform:scale(.82);
  transition:opacity .22s var(--expo), transform .22s var(--expo), border-color .22s, box-shadow .22s;
  cursor:pointer;
}
.heroiCard img{width:76px;height:76px;image-rendering:pixelated;display:block;pointer-events:none}
.heroiCard.sel{
  opacity:1; transform:scale(1); border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent), 0 14px 26px -14px rgba(0,0,0,.55);
}
.heroiNomeGrande{
  display:block; text-align:center; margin:2px 0 22px;
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:21px; color:var(--text); letter-spacing:.3px;
  min-height:26px; /* evita a tela "pular" de layout enquanto o texto troca */
}
.heroiSeta{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%; border:none;
  background:var(--panel-3); color:var(--text);
  display:grid; place-items:center; cursor:pointer; z-index:2;
  transition:background .15s;
}
.heroiSeta:hover{background:var(--panel)}
.heroiSetaEsq{left:-2px}
.heroiSetaDir{right:-2px}

/* ---------- Nome: placa com avatar do heroi escolhido ---------- */
.nomeAvatarBadge{
  width:72px; height:72px; margin:0 auto 18px; border-radius:50%;
  background:radial-gradient(circle,var(--panel-2) 0%,var(--panel) 100%);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.nomeAvatarBadge img{width:52px;height:52px;image-rendering:pixelated;display:block}
.nomeCampo{align-items:center}
.nomeInputElegante{
  width:100%; text-align:center; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:24px; color:var(--text); background:transparent; border:none;
  border-bottom:1.5px solid var(--line); border-radius:0; padding:8px 4px 10px; outline:none;
  transition:border-color .2s;
}
.nomeInputElegante::placeholder{color:var(--dim); opacity:.6}
.nomeInputElegante:focus{border-color:var(--accent)}

/* ===== Bloco style #NOVO4 — espaçamento das barras de status (v4.20x) =====
   pedido do usuario: espacamento entre Vida/Experiencia/Estagio ficou
   apertado depois que Estagio virou 3a linha dentro de #statsBarra
   (.xprow ja tem margin-bottom:6px entre label e barra, mas nao havia
   nada SEPARANDO um grupo do proximo). So no card de status do topo
   (id="statsBarra") pra nao mexer no mesmo .xpwrap/.bar reaproveitado
   em Perfil (.perfilhero ja tem seu proprio ritmo, linha ~1216). */
#statsBarra .bar{margin-bottom:14px}
#statsBarra .bar:last-child{margin-bottom:0}

/* ===== Bloco style #NOVO5 — acordeão "Heróis" dentro de Config (v4.23x) =====
   pedido do usuario: clicar na linha "Heróis" (Config) expande a lista
   de personagens + botao "+ Novo herói" NA MESMA TELA, sem abrir
   dropdown flutuante nem sub-tela nova. Reaproveita .pjItem/.pjAvatar/
   .pjTxt/.pjNovoBtn/.pjSelo/.bloqueado (ja existentes, usados pelo
   dropdown da topbar) -- so o container/trigger sao novos. */
.cfgrow.cfgacordeao{ cursor:pointer; }
.cfgrow.cfgacordeao:active{ background:var(--panel-3); }
.cfgacordeaoSeta{ transition:transform .2s var(--expo); }
.cfgacordeaoSeta.aberto{ transform:rotate(90deg); }
/* linha "Heróis" ABERTA nao mostra a propria divisoria (border-bottom
   padrao de toda linha de Config, ver Modulo #21) -- ela fica logo
   colada no conteudo expandido, entao a linha ali no meio parecia
   fim-de-lista. Fechada, volta ao normal. */
.cfgOverlay .cfgrow.cfgacordeao.aberto{ border-bottom:none; }

/* FIX #2 (relatado pelo usuario: mesmo com border-width animando 0->1px
   a linha continuava aparecendo ABERTO, e o box ficava com um cinza
   destacado -- var(--panel-2) -- que nao combina com o resto de Config,
   que e lista PLANA (.cfgOverlay .cfgrow: fundo transparente, so
   divisorias border-bottom, ver Modulo #21). Fix de verdade: o painel
   perde CARD inteiro (fundo + borda) e vira so um container que
   expande/recolhe, no MESMO tom de cinza do overlay (var(--bg), o
   fundo do proprio .cfgOverlay) -- os itens dentro (.pjItem quando
   ativo, .pjNovoBtn tracejado) ja tem contraste proprio suficiente,
   nao precisam de uma caixa por fora pra se destacar. */
.cfgacordeaoPainel{
  max-height:0; overflow:hidden;
  background:transparent; border:none;
  margin:0; padding:0;
  transition:max-height .28s var(--expo), padding .28s var(--expo);
}
.cfgacordeaoPainel.on{
  max-height:420px; overflow-y:auto; padding:4px 0 14px;
}
.cfgHeroisLista{ display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }

/* Nome do heroi centralizado na .topbar, na mesma linha/fonte de #lvl
   ("Nível I") -- pedido do usuario. .topbar era flex simples com
   justify-content:space-between (#pjTrigger vs .coins nas pontas) --
   vira grid de 3 colunas (1fr auto 1fr) pra esse bloco novo cair
   EXATAMENTE no meio da barra inteira, e nao so no meio do espaco vazio
   entre #pjTrigger e .coins (que tem larguras diferentes uma da outra).
   #nomeTopo herda a MESMA fonte de #lvl (Outfit, 600, 13px) -- so a cor
   fica um pouco mais discreta (var(--muted)) pra nao competir com o
   nivel, que continua sendo a info principal daquela barra.
   HISTORICO: teve uma badge "PRO" do lado do nome aqui (e outra em
   #perfilNome, Perfil) -- passou por 3 rodadas de ajuste de cor/fonte/
   contraste e acabou removida de vez a pedido do usuario ("acho que
   pode tirar a badge sinceramente"), junto com a logica JS que
   ligava/desligava ela (atualizarBadgesPro(), no script principal). */
.topbar{ display:grid; grid-template-columns:1fr auto 1fr; }
.topbar .pjTrigger{ justify-self:start }
.topbar .coins{ justify-self:end }
.nomeBadgeTopo{ display:flex; align-items:center; justify-self:center; gap:2px }
.nomeBadgeTopo #nomeTopo{
  font-family:'Outfit',sans-serif; font-size:13px; font-weight:600;
  color:var(--muted); white-space:nowrap;
}

/* Tela de planos (#pwEtapa2, 3a e ultima parada da sequencia). Historico:
   teve uma linha do tempo do teste gratis (#pwResumoTrial) embutida
   acima dos cards, igual ao Skillion -- removida a pedido do usuario
   ("tira essa parte daqui da cima"), ja que a mesma informacao (quando o
   aviso chega, quando o teste acaba) ja aparece na tela anterior
   (#pwEtapa3) e na copy do proprio card "7 dias gratis". Com menos
   conteudo agora, o pedido virou o oposto do que motivou o corte de
   espacamento anterior: "o conteúdo é pra ocupar TODA a tela" -- entao
   aqui a caixa cresce (flex:1) e .pwSpacer (flex:1 por padrao, ver regra
   base de .pwSpacer) absorve o espaco sobrando embaixo do ultimo card,
   empurrando o CTA pra base da tela -- igual ao padrao das outras 2
   etapas do paywall, que ja usam a tela inteira. */
#pwEtapa2 .pwConteudo{ padding-top:54px; }
#pwEtapa2 .pwPlanos{ gap:14px; }
#pwEtapa2 .pwPlano{ padding:16px 18px; }

/* ===== v4.130 — Perfil "ficha B" (placas hexagonais) ===== */
.fichaHero{background:radial-gradient(ellipse at 50% 100%,#4A3775,#241C3B 60%,#1B1530);padding:16px}
.fichaHero .perfilheroLinha{align-items:flex-end}
.fichaHero .perfilnome{font-size:22px;font-weight:700;margin-bottom:6px}
.atributospontos{background:var(--panel-2);border:1px solid var(--line);border-radius:18px;padding:14px 8px 16px;margin:14px 0}
.atributospontos .atrhead{margin:0 8px 14px}
.atributospontos .atrhead b{font-size:16px;font-weight:700}
.hexrow{display:flex;gap:4px}
.hexcol{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center}
.hexo,.hexi{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:flex;align-items:center;justify-content:center}
.hexo{width:104px;height:120px;background:var(--atr-cor)}
.hexi{width:98px;height:112px;background:var(--panel-3,#2A2240);flex-direction:column;gap:2px;color:var(--atr-cor)}
.hexi .atricone{width:20px;height:20px}
.hexpts{font-family:'Silkscreen',monospace;font-size:30px;line-height:1;color:var(--text)}
.hexde{font-size:11px;color:var(--muted)}
.hexcol .atrnome{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;color:var(--text);margin-top:8px}
.hexcol .atrvalor{font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;color:var(--atr-cor);margin:2px 0 8px}
.hexbtn{width:auto;height:36px;padding:0 16px;border-radius:18px;border:none;background:var(--atr-cor);color:var(--bg);
  font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;cursor:pointer}
.hexbtn:hover{background:var(--atr-cor);color:var(--bg)}
.hexbtn:disabled{background:transparent;border:1px solid var(--line);color:var(--dim);opacity:1;cursor:not-allowed}
.hexlegenda{margin:16px 8px 0;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.hexleg{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.hexleg .atricone{width:14px;height:14px;flex:none;color:var(--atr-cor)}
.hexleg b{color:var(--text)}
.rnota{font-family:'Outfit',sans-serif;font-size:11.5px;color:var(--dim)}
/* v4.131: fundo cinza atras das barras do heroi removido (herdava o painel da Arena) */
.fichaHero .perfilheroInfo .xpwrap{background:none;border:0;box-shadow:none;padding:0;margin:0;border-radius:0}
.fichaHero .perfilheroInfo{text-align:left}
/* v4.132: heroi sem degrade roxo (pedido do usuario) -- volta ao painel padrao do tema */
.fichaHero{background:var(--panel-2);padding:16px}
/* v4.133: sem icones nas placas; uma cor so (accent do tema) em 3 tons */
.hexrow>.hexcol:nth-child(1),.hexlegenda>.hexleg:nth-child(1){--atr-cor:color-mix(in srgb,var(--accent) 68%,#fff)}
.hexrow>.hexcol:nth-child(2),.hexlegenda>.hexleg:nth-child(2){--atr-cor:var(--accent)}
.hexrow>.hexcol:nth-child(3),.hexlegenda>.hexleg:nth-child(3){--atr-cor:color-mix(in srgb,var(--accent) 62%,var(--bg))}
.hexleg::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--atr-cor);flex:none}
/* v4.134: 3 tons sempre distintos (accent -> accent+fundo), legenda removida */
.hexrow>.hexcol:nth-child(1){--atr-cor:var(--accent)}
.hexrow>.hexcol:nth-child(2){--atr-cor:color-mix(in srgb,var(--accent) 68%,var(--bg))}
.hexrow>.hexcol:nth-child(3){--atr-cor:color-mix(in srgb,var(--accent) 42%,var(--bg))}
.atributospontos{padding-bottom:14px}
/* v4.135: autofill do Chrome/Android pintava o campo de email de azul translucido
   (#passoLogin) -- mantem o fundo e a cor do texto do tema */
#passoLogin .campo input:-webkit-autofill,
#passoLogin .campo input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--panel-2) inset;
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  transition:background-color 99999s ease-in-out 0s;
}
/* v4.136: placas menores; botao so "+" (o +2% por ponto ja esta implicito) */
.atributospontos{padding:12px 8px 12px}
.atributospontos .atrhead{margin:0 8px 10px}
.hexo{width:82px;height:94px}
.hexi{width:77px;height:88px}
.hexpts{font-size:24px}
.hexde{font-size:10px}
.hexcol .atrnome{font-size:14px;margin-top:6px}
.hexcol .atrvalor{font-size:16px;margin:0 0 6px}
.hexbtn{min-width:44px;height:32px;padding:0 14px;font-size:20px;line-height:1}

/* ===== v4.137 — estado de erro do loading (heroi tomba) ===== */
.loadingMasmorraMsg{display:none;font-family:'Outfit',sans-serif;font-size:14px;color:var(--text);max-width:260px;line-height:1.4}
.loadingMasmorraBtn{display:none;font-family:'Outfit',sans-serif;font-weight:700;font-size:15px;border:none;border-radius:999px;
  background:var(--accent);color:var(--bg);height:46px;padding:0 26px;cursor:pointer}
.loadingMasmorra.erro .loadingMasmorraSprite{animation:loadingMasmorraTombar 1.1s cubic-bezier(.3,.7,.4,1) forwards;transform-origin:50% 88%}
@keyframes loadingMasmorraTombar{
  0%{transform:translateY(-10px) rotate(4deg)}
  28%{transform:translateY(0) rotate(0) scale(1.12,.86)}
  40%{transform:translateY(0) rotate(0) scale(.96,1.04)}
  55%{transform:translateY(-4px) rotate(-14deg)}
  75%{transform:translateY(0) rotate(-72deg)}
  100%{transform:translateY(-2px) rotate(-90deg)}
}
.loadingMasmorra.erro{margin:0}
.loadingMasmorra.erro .loadingMasmorraSprite{margin-bottom:14px}
.loadingMasmorra.erro .loadingMasmorraTxt{color:#E5698A;animation:loadingMasmorraSobe .4s .9s both}
.loadingMasmorra.erro .loadingMasmorraMsg{display:block;animation:loadingMasmorraSobe .4s 1.05s both}
.loadingMasmorra.erro .loadingMasmorraBtn{display:block;animation:loadingMasmorraSobe .4s 1.2s both}
@keyframes loadingMasmorraSobe{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .loadingMasmorra.erro .loadingMasmorraSprite{animation:none;transform:rotate(-90deg)}
}

/* ===== v4.139 — Atributos: lista expansível (ideia H) ===== */
.atributospontos{padding:0;overflow:hidden}
.atributospontos .atrhead{margin:0;padding:14px 14px 10px}
.atrlinha{border-top:1px solid var(--line)}
.atrlinha.aberta{background:color-mix(in srgb,var(--panel-3,#2A2240) 40%,transparent)}
.atrtopo{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.atrtopo:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
.atricone2{width:38px;height:38px;flex:none;border-radius:10px;background:var(--panel-3,#2A2240);color:var(--accent);display:flex;align-items:center;justify-content:center}
.atrmeio{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.atrlinha .atrnome{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;color:var(--text)}
.atrseg{display:flex;gap:3px}
.atrseg i{flex:1;height:6px;border-radius:2px;background:var(--line);display:block}
.atrseg i.on{background:var(--accent)}
.atrnum{display:flex;flex-direction:column;align-items:flex-end}
.atrlinha .atrvalor{font-family:'Silkscreen',monospace;font-size:16px;color:var(--accent);margin:0}
.atrptsl{font-size:11px;color:var(--dim)}
.atrchev{display:flex;color:var(--dim);transition:transform .2s}
.atrlinha.aberta .atrchev{transform:rotate(90deg)}
.atrdet{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.atrlinha.aberta .atrdet{grid-template-rows:1fr}
.atrdetIn{overflow:hidden;min-height:0;padding:0 14px 0 64px}
.atrlinha.aberta .atrdetIn{padding-bottom:14px}
.atrdetxt{margin:0;font-family:'Outfit',sans-serif;font-size:12.5px;line-height:1.4;color:var(--muted)}
.atrinvestir{margin-top:10px;width:100%;height:44px;border:none;border-radius:12px;background:var(--accent);color:var(--bg);font-family:'Outfit',sans-serif;font-size:14.5px;font-weight:700;cursor:pointer}
.atrinvestir:disabled{background:var(--panel-3,#2A2240);color:var(--dim);cursor:not-allowed}
@media (prefers-reduced-motion: reduce){.atrdet,.atrchev{transition:none}}

/* ===== v4.143 — Perfil: Bento ===== */
.fichaHero{border-radius:18px}
.fichaHero .hero-sprite{background:radial-gradient(ellipse at 50% 90%,color-mix(in srgb,var(--accent) 28%,transparent),var(--panel-3,#2A2240));border-radius:14px}
.bentorow{display:flex;gap:8px;align-items:stretch;margin:14px 0}
.bentoAtr{flex:1.35;min-width:0;margin:0!important;padding:12px!important;display:flex;flex-direction:column}
.bentoAtr .atrhead{padding:0;margin:0 0 10px}
.atrbento{display:flex;gap:2px;flex:1}
.gcol{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;border-radius:12px;padding:4px 0;-webkit-tap-highlight-color:transparent}
.gcol.sel{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.gico{color:var(--accent);display:flex}
.gauge{display:flex!important;flex-direction:column-reverse;gap:2px;width:26px}
.gauge i{height:7px;border-radius:2px;background:var(--line);display:block;flex:none}
.gauge i.on{background:var(--accent)}
.gcol .atrvalor{font-family:'Silkscreen',monospace;font-size:12px;color:var(--accent)}
.gcol .atrnome{font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;color:var(--muted)}
.gplus{width:34px;height:34px;border-radius:50%;border:none;background:var(--accent);color:var(--bg);font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.gplus:not(:disabled){font-size:22px}
.gplus:disabled{background:transparent;border:1px solid var(--line);color:var(--dim);cursor:not-allowed}
.gpts{font-size:10.5px;color:var(--dim)}
.atrinfo{margin:8px 0 0;font-family:'Outfit',sans-serif;font-size:11px;line-height:1.35;color:var(--dim);text-align:center;min-height:30px}
.bentocol{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.bentoPts{background:var(--accent);color:var(--bg);border-radius:18px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;align-items:center}
.bentoPts.vazio{background:var(--panel-2);color:var(--dim);border:1px solid var(--line)}
.bentoPtsNum{font-family:'Silkscreen',monospace;font-size:30px;line-height:1;background:none;padding:0;color:inherit}
.bentoPtsLbl{font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;margin-top:4px;line-height:1.2}
.bentocol .statgrid{display:flex;flex-direction:column;gap:8px;margin:0;flex:1}
.bentocol .statcard{flex:1;border-radius:14px;padding:8px 10px;display:flex;flex-direction:column;justify-content:center;gap:1px}
.bentocol .statval{font-size:15px;order:0}
.bentocol .statlabel{font-size:10px;order:1}
.conqAnel{--p:0;width:56px;height:56px;flex:none;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--line) 0);display:flex;align-items:center;justify-content:center;position:relative}
.conqAnel::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--panel-2)}
.conqAnel b{position:relative;font-family:'Silkscreen',monospace;font-size:11px;color:var(--text)}
#prevConquistas .cfgrowtopo{gap:12px}
#prevConquistas .cfgtxt{flex:1;min-width:0}
#prevBestiarioFaixa{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;min-height:0}
.bestcel{aspect-ratio:1;border-radius:10px;background:var(--panel-3,#2A2240);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.bestcel .prevbestimg{width:70%;height:70%}
.bestcel.vazia{background:var(--bg);border:1px dashed var(--line);color:var(--dim);font-family:'Silkscreen',monospace;font-size:13px}

/* ===== v4.144 — Perfil: plano, sem painéis (ideia b) ===== */
.perfilPlano{display:flex;flex-direction:column;gap:16px}
.planoHero{text-align:center;position:relative;padding-top:4px}
.planoHero::before{content:"";position:absolute;left:50%;top:34px;width:230px;height:120px;transform:translateX(-50%);background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);pointer-events:none}
.planoHero .hero-sprite{position:relative;display:flex;justify-content:center;margin:0 auto;width:auto}
.planoHero #perfilHeroSprite .heroimg{width:120px;height:120px;image-rendering:pixelated;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}
.planoHero .sombra{display:none}
.planoNome{position:relative;display:flex;justify-content:center;align-items:center;gap:8px;margin-top:2px}
.planoNome .perfilnome{font-size:22px;font-weight:700;margin:0}
.planoNivel{font-family:'Silkscreen',monospace;font-size:11px;letter-spacing:.05em;padding:3px 9px;border-radius:7px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.planoBarras{display:flex;gap:16px;margin-top:12px;text-align:left}
.planoBar{flex:1;min-width:0}
.planoBar .bar{margin:4px 0 0}
.planoStats{display:flex;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.planoStat{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column;gap:2px}
.planoStat .statval{font-size:14px}
.planoStat .statlabel{font-size:10px}
.planoAtr .atrhead{display:flex;justify-content:space-between;align-items:center;margin:0 0 6px}
.planoAtr .atrhead b{font-size:16px;font-weight:700}
.atrpill.vazio{background:var(--panel-3,#2A2240);color:var(--dim)}
.alinha{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.aico{color:var(--accent);display:flex;flex:none}
.ameio{flex:1;min-width:0}
.atop{display:flex;justify-content:space-between;align-items:baseline}
.alinha .atrnome{font-family:'Outfit',sans-serif;font-size:14.5px;font-weight:700;color:var(--text)}
.alinha .atrvalor{font-family:'Silkscreen',monospace;font-size:13px;color:var(--accent);margin:0}
.alinha .atrseg{margin:6px 0 4px}
.alinha .atrseg i{height:5px}
.adesc{font-family:'Outfit',sans-serif;font-size:11px;color:var(--dim)}
.alinha .gplus{width:36px;height:36px}
.perfilPlano #prevConquistas,.perfilPlano #prevBestiario{background:none;border:0;border-radius:0;box-shadow:none;padding:12px 0 0;margin:0;border-top:1px solid var(--line)}

/* v4.145: menos informacao -- sem brilho, sem chip de nivel (ja no cabecalho), Moedas fora da faixa
   (ja na barra de cima), descricao do atributo so ao tocar na linha */
.planoHero::before{display:none}
.planoNivel{display:none}
.planoStat.semMoedas{display:none}
.adir{display:flex;align-items:baseline;gap:8px}
.apts{font-family:'Outfit',sans-serif;font-size:11px;color:var(--dim)}
.alinha{cursor:pointer;-webkit-tap-highlight-color:transparent}
.adesc{display:none;font-family:'Outfit',sans-serif;font-size:11.5px;line-height:1.35;color:var(--muted)}
.alinha.sel .adesc{display:block}
.alinha .atrseg{margin:7px 0 0}
.alinha.sel .atrseg{margin-bottom:6px}

/* v4.146 — Perfil em 3 paginas (swipe) */
.pgTrilho{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:flex-start}
.pgTrilho::-webkit-scrollbar{display:none}
.pgPag{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;box-sizing:border-box;display:flex;flex-direction:column;gap:18px;min-height:60vh;padding:0 2px}
.pgDots{display:flex;justify-content:center;gap:7px;padding-top:10px}
.pgDots i{width:6px;height:6px;border-radius:50%;background:var(--line);cursor:pointer;transition:.2s}
.pgDots i.on{background:var(--text);width:18px;border-radius:4px}
.pgPag:nth-child(1) .planoHero{padding-top:18px}
.pgPag:nth-child(1) .planoHero #perfilHeroSprite .heroimg{width:150px;height:150px}
.pgPag:nth-child(1) .planoNome .perfilnome{font-size:26px}
.pgPag:nth-child(2) .atrhead{flex-direction:column;align-items:center;gap:2px;margin-bottom:10px}
.pgPag:nth-child(2) .atrhead b{font-size:12px;font-weight:500;color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
.pgPag:nth-child(2) .atrpill{font-family:'Silkscreen',monospace;font-size:44px;line-height:1;background:none;padding:0;color:var(--text)}
.pgPag:nth-child(2) .atrpill.vazio{color:var(--dim)}
.pgPag:nth-child(3) #prevConquistas,.pgPag:nth-child(3) #prevBestiario{border-top:0;padding-top:0}

.atrpill .pgLbl{margin-left:6px}
.pgPag:nth-child(2) .atrpill{display:flex;flex-direction:column;align-items:center;gap:4px}
.pgPag:nth-child(2) .atrpill .pgNum{font-size:48px;font-weight:400}
.pgPag:nth-child(2) .atrpill .pgLbl{margin:0;font-family:'Outfit',sans-serif;font-size:12px;color:var(--dim)}

/* v4.147 — Perfil: Aneis (substitui paginas) */
.perfilAneis{display:flex;flex-direction:column;gap:16px}
.anelOculto{display:none!important}
.anelHero{position:relative;width:210px;height:210px;margin:6px auto 0}
.anelSvg{transform:rotate(-90deg);display:block}
.anelHero .atrilho,.aneisAtr .atrilho{fill:none;stroke:var(--line);stroke-width:5}
.aarco{fill:none;stroke:var(--text);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .5s}
.aarco.xp{stroke:#F2C94C}.aarco.hp{stroke:#E5698A}
.anelHero .hero-sprite{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:auto;margin:0}
.anelHero #perfilHeroSprite .heroimg{width:110px;height:110px;image-rendering:pixelated}
.anelHero .sombra{display:none}
.anelNome{text-align:center;margin-top:-2px}
.anelNome>b{font-size:24px;font-weight:700}
.anelNivel{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.anelLeg{display:flex;justify-content:center;gap:18px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.anelLeg b{color:var(--text)}
.anelLeg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.anelLeg .dhp{background:#E5698A}.anelLeg .dxp{background:#F2C94C}
.anelAtr .atrhead{display:flex;justify-content:space-between;align-items:baseline;margin:0 2px 12px}
.anelAtr .atrhead b{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.anelAtr .atrpill{background:none;padding:0;font-family:'Outfit',sans-serif;font-size:13px;color:var(--text)}
.anelAtr .atrpill.vazio{color:var(--dim)}
.anelAtr .atrpill .pgNum,.anelAtr .atrpill .pgLbl{font-size:13px;font-family:'Outfit',sans-serif;font-weight:400;margin:0}
.anelAtr .atrpill .pgLbl{margin-left:4px}
.aneisLinha{display:flex}
.aneisAtr{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.aelo{position:relative;width:64px;height:64px}
.aelo svg{transform:rotate(-90deg);display:block}
.aneisAtr .atrilho{stroke-width:4}.aneisAtr .aarco{stroke-width:4}
.aneisAtr.sel .aarco{stroke:var(--accent)}
.aval{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.anome{font-size:13px;font-weight:600}
.aneisAtr .gplus{width:34px;height:34px;font-size:22px;line-height:1}
.anelInfo{text-align:center;font-size:12px;color:var(--dim);margin-top:10px;min-height:16px}
.anelStatsLinha{text-align:center;font-size:12.5px;color:var(--dim);line-height:1.7}
.anelStatsLinha b{color:var(--muted);font-weight:600}
.anelStatsLinha i{font-style:normal;margin:0 6px}
.anelAtr .atrpill{display:inline-flex!important;flex-direction:row!important;align-items:baseline;gap:4px}

/* v4.148 — Aneis: menos informacao, mais respiro */
.perfilAneis{gap:28px}
.anelStatsLinha,.anelNivel{display:none}
.anelHero{margin-top:12px}
.anelNome{margin-top:4px}
.anelLeg{margin-top:14px}
.anelAtr .atrhead{margin-bottom:20px}
.aneisAtr{gap:10px}
.aneisAtr .gplus{margin-top:2px}
.anelInfo{margin-top:18px;min-height:0}
.anelInfo:empty{display:none}
/* v4.149 — cabecalho Atributos: alinhado e mesma fonte */
.anelAtr .atrhead{display:flex!important;justify-content:space-between!important;align-items:center!important}
.anelAtr .atrpill,.anelAtr .atrpill .pgNum,.anelAtr .atrpill .pgLbl{font-family:'Outfit',sans-serif!important;font-size:13px!important;font-weight:500!important;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)!important;margin:0!important}
.anelAtr .atrpill{flex:none;gap:6px!important;text-align:right}
.anelAtr .atrpill:not(.vazio) .pgNum,.anelAtr .atrpill:not(.vazio) .pgLbl{color:var(--text)!important}
/* v4.150 — filtros do inventario ficam fixos no topo ao rolar; graficos do Perfil seguem a cor do tema */
#viewInventario .invfiltros{position:sticky;top:0;z-index:6;background:var(--bg);margin:0 -14px 8px;padding:8px 14px}
.perfilAneis .aarco,.perfilAneis .aarco.xp{stroke:var(--accent)}
.anelLeg .dxp{background:var(--accent)}
/* v4.151 — XP/Vida mantêm cor fixa; só os arcos de atributo seguem o tema; Conquistas sem anel */
.perfilAneis .aarco.xp{stroke:#F2C94C}
.perfilAneis .aarco.hp{stroke:#E5698A}
.anelLeg .dxp{background:#F2C94C}
.perfilAneis .conqAnel{display:none}
/* v4.152 — .view e flex coluna: sem flex:none os filtros encolhiam e sumiam */
#viewInventario>*{flex:none}
#viewInventario .invfiltros{min-height:44px;box-sizing:border-box;align-items:center}

/* v4.153 — telas de login: e-mail enviado + bem-vindo de volta */
.verificarBloco{align-items:center;gap:10px}
.verificarIcone{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);margin-bottom:4px}
.verificarTitulo{margin:0;font-family:'Outfit',sans-serif;font-size:22px;font-weight:700;color:var(--fg,#fff);text-shadow:0 2px 10px rgba(0,0,0,.85)}
.verificarTexto{font-size:14px;line-height:1.55}
.verificarTexto b,#verificarEmailAlvo{color:var(--fg,#fff);font-weight:600;word-break:break-all}
#passoBoasVindas .marca{align-items:center;gap:4px}
.boasVindasHeroi{width:96px;height:96px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.boasVindasHeroi img{width:96px;height:96px;image-rendering:pixelated;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.boasVindasHeroi:empty{display:none}
.boasVindasNivel{font-family:'Silkscreen',monospace;font-size:11px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.85)}
.boasVindasNivel:empty{display:none}
#passoBoasVindas .primario{background:var(--accent)!important;color:#14101c!important;border:none!important}

/* v4.154 -- feedback inline (login/verificacao) */
.msgInline{margin:8px 0 0;text-align:center}
.msgInline.ok{color:var(--sucesso,#4CAF7A)}

/* v4.155 -- sem destaque azul nativo do Android ao tocar (nav, botoes, links) */
html,body,button,a,input,select,textarea,label,[role="button"],[onclick],.nav,.nav *{-webkit-tap-highlight-color:transparent}

/* v4.156 -- olho de senha + trocar de conta */
.campo.temOlho input[type=password],.campo.temOlho #loginSenha,.campo.temOlho #loginSenhaConfirmar{padding-right:46px !important}
.verSenha{position:absolute;right:6px;bottom:6px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--dim);cursor:pointer;padding:0}
.verSenha svg{width:20px;height:20px}
.campo.temOlho .campoStatus{right:46px}
#boasVindasTrocar{margin-top:6px}

/* v4.157 -- "cara de app": sem puxar-pra-recarregar, sem zoom por toque duplo,
   sem selecao/menu de pressionar em UI (campos de texto continuam selecionaveis) */
html,body{overscroll-behavior-y:none}
html{touch-action:manipulation}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img{-webkit-user-drag:none;user-drag:none}

/* v4.158 -- logo texto (opcao 1): dungeon fino + log grosso, tudo creme */
.titulo.logoDL,#passoLogin .titulo.logoDL,.loginEscolha .titulo.logoDL,#bloqueioVerificacaoEmail .titulo.logoDL{
  font-family:'Outfit',sans-serif !important;font-weight:300 !important;color:#F5F0E9 !important;
  font-size:clamp(36px,14vw,58px) !important;letter-spacing:-.012em !important;padding-left:0;line-height:1;text-shadow:none !important}
.logoDL b{font-weight:700;color:#F5F0E9}
#bloqueioVerificacaoEmail .titulo.logoDL{font-size:clamp(32px,11vw,44px) !important}

/* billing -- chip de feedback do paywall (aviso() esta mudo; compra/restaurar mostram aqui) */
#pwBillingMsg{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);z-index:5;padding:12px 14px;border-radius:14px;background:#251E38;color:#F5F0E9;border:1px solid rgba(242,166,90,.45);font:500 14px/1.3 'Outfit',system-ui,sans-serif;text-align:center;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s}
#pwBillingMsg.on{opacity:1;transform:none}

/* tela de compra confirmada: monstros no espaco livre */
.compraOkMobs{display:flex;align-items:center;justify-content:center;gap:28px;min-height:140px}
.compraOkMob{width:112px;height:112px;image-rendering:pixelated;filter:drop-shadow(0 6px 0 rgba(0,0,0,.35));animation:compraOkBob 2.4s ease-in-out infinite}
.compraOkMob.b{animation-delay:-1.2s;transform:scaleX(-1)}
@keyframes compraOkBob{0%,100%{translate:0 0}50%{translate:0 -8px}}


/* DIA MANUAL: botao 'Terminar dia' (aparece quando nao ha pendentes) */
.terminarDiaBtn{display:block;width:100%;margin:14px 0 4px;padding:14px 16px;border:none;border-radius:12px;
background:var(--accent);color:var(--bg);font-family:'Outfit',sans-serif;font-size:15px;font-weight:600;cursor:pointer;
animation:tdEntra .45s cubic-bezier(.2,1.3,.4,1) both}
.terminarDiaBtn[hidden]{display:none}
.terminarDiaBtn:active{transform:scale(.98)}
@keyframes tdEntra{0%{opacity:0;transform:translateY(14px) scale(.94)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.terminarDiaBtn{animation:none}}

/* PROTOTIPO: arma na mao do heroi. Ancora no canto inferior-esquerdo do
   sprite (cabo) perto da mao direita do boneco; gira no golpe. */
.hero-sprite .heroArma{position:absolute;left:52px;top:15px;width:56px;height:56px;z-index:3;pointer-events:none;
  transform-origin:20% 85%;transform:rotate(8deg)}
.hero-sprite .heroArma .pxi{filter:drop-shadow(0 1px 0 rgba(0,0,0,.5))}
.hero-sprite.golpeando .heroArma{animation:armaGolpe .9s ease-out}
@keyframes armaGolpe{0%,40%{transform:rotate(-20deg)}55%{transform:rotate(75deg)}75%{transform:rotate(75deg)}100%{transform:rotate(8deg)}}

/* armas de longo alcance: empunhadas pelo meio, atiram de onde estao (recuo curto) */
.hero-sprite .heroArma.ranged{left:46px;top:36px;transform:none;transform-origin:50% 50%}
.hero-sprite .heroArma.arcoDiag .pxi{transform:rotate(-45deg) scale(.78);transform-origin:50% 50%}
.hero-sprite.golpeando .heroArma.ranged{animation:armaTiro .9s ease-out}
@keyframes armaTiro{0%,40%{transform:translateX(0)}52%{transform:translateX(-3px)}100%{transform:translateX(0)}}

.projetil{position:fixed;z-index:9999;width:16px;height:2px;margin:-1px 0 0 0;background:#d9c7a0;pointer-events:none;box-shadow:-5px 0 0 #8b5a2b,0 0 0 1px rgba(0,0,0,.45);opacity:0}
.projetil::after{content:'';position:absolute;right:-3px;top:-2px;width:4px;height:6px;background:#cfd6dd;clip-path:polygon(0 0,100% 50%,0 100%)}
.projetil.pedra{width:6px;height:6px;margin:-3px 0 0 0;border-radius:50%;background:#9a9a9a;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.projetil.pedra::after{display:none}

.projetil.flecha{width:auto;height:auto;background:none;box-shadow:none;margin:0}
.projetil.flecha::after{display:none}
.projetil.flecha img{display:block;image-rendering:pixelated;width:30px;height:auto;transform:translate(-50%,-50%)}

/* notebook / tela baixa: arena+equip+XP comem a altura toda e a lista de tarefas ficava com 0px
   (so ela rolava). Nesses casos o app inteiro rola e a nav fica colada embaixo. */
@media (min-width:521px) and (max-height:860px){
  .app{overflow-y:auto;scrollbar-width:thin}
  .tasks{flex:none;overflow:visible;min-height:auto}
  .list{flex:none;overflow:visible}
  .nav{position:sticky;bottom:0;z-index:20;background:var(--panel) !important}
}

/* PROTOTIPO: armadura/elmo/escudo no heroi (caixa do heroi = 83x87) */
.hero-sprite .heroEq{position:absolute;pointer-events:none}
.hero-sprite .heroEq .pxi{filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))}
.hero-sprite .eqArmadura{z-index:1}
.hero-sprite .eqElmo{z-index:2}
.hero-sprite .eqEscudo{z-index:3}

.dmg-float.centro{gap:6px;font-size:13px}
.hero-sprite .eqChapeu{z-index:2}

/* busca + subcategorias do inventario */
.invbusca{margin:0 0 8px}
.invbusca input{width:100%;box-sizing:border-box;font-family:'Outfit',sans-serif;font-size:13px;color:var(--text);background:var(--panel-3);border:1px solid var(--line);border-radius:999px;padding:8px 14px;outline:none}
.invbusca input:focus{border-color:var(--accent)}
#viewInventario .invfiltros.invsub{position:static;min-height:0;margin:0 0 10px;padding:0 0 2px}
#viewInventario .invfiltros.invsub button{font-size:11px;padding:4px 10px}

.dicadiames{font-family:'Outfit',sans-serif;font-size:11.5px;color:var(--dim);margin-top:6px;line-height:1.3}

/* --- cor da tarefa: checkbox concluido e fundo na cor --- */
.task.comcor .box{border-color:color-mix(in srgb, var(--tc) 60%, transparent) !important}
.task.comcor.done .box{background:color-mix(in srgb, var(--tc) 70%, var(--panel-2)) !important;border-color:transparent !important}
.task.comcor{background:color-mix(in srgb, var(--tc) 10%, var(--panel-2)) !important}

/* mao do heroi por cima da arma: mesmo sprite do heroi, recortado em manga+punho, pra parecer que segura o cabo */
.hero-sprite .heroMao{position:absolute;left:0;top:0;width:83px;height:83px;z-index:5;pointer-events:none;image-rendering:pixelated;clip-path:inset(56.1px 19.5px 17.1px 56.1px)}
.hero-sprite.ferido .heroMao{filter:brightness(0) invert(1)}
/* herois 5-8 (femininas): mao em outra posicao */
.hero-sprite .heroMao.f{clip-path:inset(58.6px 14.6px 17.1px 61px)}
/* armas escuras: clareadas (sem halo) pra destacar do fundo da arena */
.hero-sprite .heroArma.escura .pxi{filter:brightness(1.6) contrast(1.05) drop-shadow(0 1px 0 rgba(0,0,0,.5))}
/* icones de armas escuras (inventario, slots, loja, bau): mesmo clareamento da arma na arena */
.pxi.armaEscura{filter:brightness(1.6) contrast(1.05)}

/* categorias de tarefa desligadas (window.CATEGORIAS_ATIVAS = false em index.html):
   some a linha de abas e o seletor de categoria do composer/editor */
.cattabs, .advcatrow, .catvisivel{display:none !important}

/* estagio: a linha "Tarefas para Estagio N" saiu do painel; o progresso fica numa barra flutuante colada acima da nav (que e sticky) */
#estagioTopoRow, #estagioTopoBar{display:none !important}
.estFlut{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:4px;
  padding:6px 14px 8px;min-width:150px;border-radius:12px;background:color-mix(in srgb, var(--accent) 14%, #08080a);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);box-shadow:0 4px 16px rgba(0,0,0,.6);pointer-events:none;z-index:21;
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;color:#e8e8ec}
.estFlut.on{display:flex}
.estFlutBar{display:block;width:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.estFlutBar i{display:block;height:100%;width:0;border-radius:3px;background:var(--accent, #F2A65A);transition:width .4s ease}
/* barra flutuante no tema branco: --accent e' escuro, sumia sobre o fundo preto */
:root[data-tema="branco"] .estFlutBar i{background:#F7F6F3}
:root[data-tema="branco"] .estFlut{border-color:rgba(255,255,255,.28)}

/* Aparência (celular): cartões de tema em grade 2x3 (mockup A). */
#aparenciaOverlay #cfgTemaCard{ align-items:stretch; gap:10px; padding:8px 2px; }
#aparenciaOverlay #cfgTemaCard .cfgtxt span{ opacity:.7; font-size:13px; }
#aparenciaOverlay #temaGrid{ width:100%; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
#aparenciaOverlay #temaGrid{ gap:18px 14px; }
.temaItem{ display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.temaCard{ position:relative; width:100%; aspect-ratio:3/4; border-radius:18px; border:3px solid transparent; padding:9px 8px 0; overflow:hidden;
  display:flex; flex-direction:column; gap:6px; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(128,128,128,.3); }
.temaCard.sel{ border-color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.4); }
:root[data-tema="branco"] .temaCard.sel{ border-color:#2E2C29; }
.temaCard.bloqueado{ opacity:.85; }
.temaCard > span{ display:flex; align-items:center; }
.tmTopo{ justify-content:space-between; height:8px; }
.tmTopo b{ height:5px; border-radius:3px; width:22%; }
.tmTopo b:nth-child(2){ width:30%; }
.tmTopo b:nth-child(3){ width:14%; }
.tmArena{ height:30%; margin-top:14px; border-radius:10px; justify-content:space-around; }
.tmArena i{ width:20%; height:62%; border-radius:5px; }
.tmArena u{ width:8%; height:4px; border-radius:2px; }
.tmStats{ flex-direction:column; align-items:stretch !important; justify-content:center; gap:7px; border-radius:9px; padding:9px 7px; }
.tmStats b{ display:block; height:5px; border-radius:3px; }
.tmStats b:first-child{ width:100%; }
.tmTit{ justify-content:space-between; }
.tmTit b{ width:42%; height:7px; border-radius:3px; opacity:.85; }
.tmTit i{ width:24%; height:14px; border-radius:6px; }
.tmVazio{ flex:1; flex-direction:column; justify-content:center; gap:5px; }
.tmVazio b{ height:4px; width:62%; border-radius:2px; }
.tmVazio b + b{ width:42%; }
.tmNav{ justify-content:space-around; height:11%; margin:0 -8px; border-top:1px solid rgba(128,128,128,.3); }
.tmNav i{ width:22%; height:55%; border-radius:999px; }
.tmNav b{ width:11%; height:36%; border-radius:4px; }
.tmCadeado{ position:absolute !important; right:8px; top:8px; width:26px; height:26px; border-radius:50% !important; justify-content:center;
  background:#F2C94C; color:#3b2f00; }
.tmCadeado svg{ width:14px; height:14px; }
.temaCardNome{ font-size:15px; font-weight:600; text-align:center; font-family:'Outfit',sans-serif; }

.tmVazio{ flex:1; }

/* Aparência: faixas de tema (opção C) */
#aparenciaOverlay #temaGrid{ grid-template-columns:1fr; gap:10px; }
.temaFaixa{ display:flex; align-items:center; height:64px; padding:0; border-radius:16px; overflow:hidden; cursor:pointer;
  border:2px solid rgba(128,128,128,.3); font-family:'Outfit',sans-serif; text-align:left; }
.temaFaixa.sel{ border-color:#fff; }
:root[data-tema="branco"] .temaFaixa.sel{ border-color:#2E2C29; }
.tfSw{ display:flex; width:110px; height:100%; flex:none; }
.tfSw i{ flex:1; display:block; }
.tfNome{ flex:1; padding:0 14px; font-size:17px; font-weight:600; }
.tfCad{ width:24px; height:24px; margin-right:14px; border-radius:50%; background:#F2C94C; color:#3b2f00; display:flex; align-items:center; justify-content:center; }
.tfCad svg{ width:13px; height:13px; }
.tfCheck{ display:none; width:24px; height:24px; margin-right:14px; border-radius:50%; align-items:center; justify-content:center; }
.tfCheck svg{ width:14px; height:14px; }
.temaFaixa.sel .tfCheck{ display:flex; }

/* Aparência: lista full-width (design original, ocupando a tela) */
#aparenciaOverlay #temaGrid{ grid-template-columns:1fr; gap:0; }
.temaLinha2{ display:flex; align-items:center; gap:14px; width:100%; min-height:64px; padding:0 4px; background:none; border:0;
  border-bottom:1px solid rgba(128,128,128,.28); color:inherit; font-family:'Outfit',sans-serif; text-align:left; cursor:pointer; }
.temaLinha2:last-child{ border-bottom:0; }
.tl2Dot{ width:36px; height:36px; border-radius:50%; flex:none; border:2.5px solid rgba(128,128,128,.55); }
.temaLinha2.sel .tl2Dot{ border-color:#fff; }
:root[data-tema="branco"] .temaLinha2.sel .tl2Dot{ border-color:#2E2C29; }
.tl2Nome{ flex:1; font-size:17px; font-weight:600; }
.temaLinha2.bloqueado .tl2Dot, .temaLinha2.bloqueado .tl2Nome{ opacity:.7; }
.tl2Check{ width:28px; height:28px; display:none; align-items:center; justify-content:center; }
.tl2Check svg{ width:22px; height:22px; }
.temaLinha2.sel .tl2Check{ display:flex; }

/* Carrossel: heroi com espada + golpe por JS (ver golpeOb() no index.html); desliga os loops CSS antigos */
.obHeroSp{ width:125px; animation:none !important; }
.obMobSp, .obSlashFx{ animation:none !important; }
.obHeroInner{ position:absolute; left:0; bottom:0; width:83px; height:83px; transform:scale(1.5); transform-origin:0 100%; }
.obSlashFx{ display:none !important; }

/* barra de estagio flutuante cobria o fim da lista: reserva espaco no fim pra ultima tarefa rolar pra cima dela */
.list{padding-bottom:68px}

/* aviso em texto quando o aceite dos Termos falta (antes so a borda ficava vermelha e parecia botao quebrado) */
.loginAceiteMsg{display:none;margin:2px 4px 6px;font-family:'Outfit',sans-serif;font-size:13px;line-height:1.35;color:#F45781;text-align:left;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.loginAceite.erro + .loginAceiteMsg{display:block}

/* botoes de entrada do login: sombra e feedback de toque pra nao parecerem desativados (feedback de testador) */
.loginEscolha .primario,.loginEscolha .loginGoogleBtn{box-shadow:0 3px 14px rgba(0,0,0,.4);transition:transform .12s}
.loginEscolha .primario:active,.loginEscolha .loginGoogleBtn:active{transform:scale(.97)}

/* 13/10: termos na tela de escolha = letra miuda no rodape (abaixo de "Entrar como convidado") */
.loginEscolha .loginAceiteNota{margin:2px 0 0;font-size:11.5px;color:rgba(213,216,222,.62);line-height:1.35}
.loginEscolha .loginAceiteNota a{color:rgba(255,255,255,.8)}
.loginEscolha .loginAceiteNota{white-space:nowrap;margin-top:-4px}

/* 13/10: termos fora da tela de escolha (poluida; Habitica nao mostra); links em Config > Legal e na caixa do cadastro por e-mail */
.loginEscolha .loginAceiteNota{display:none !important}
/* botao principal do onboarding/login com cara de "toque aqui": seta + sombra de destaque (branco liso lia como desabilitado) */
#intro .primario{font-weight:700;box-shadow:0 6px 22px rgba(255,255,255,.16),0 2px 6px rgba(0,0,0,.35)}
#intro .primario::after{content:"\203A";margin-left:9px;font-size:1.35em;line-height:0;position:relative;top:1px}

/* 13/10: aceite implicito dos termos no ultimo passo do onboarding (escolha do heroi) */
.onbTermos{margin:10px 0 0;text-align:center;font-family:'Outfit',sans-serif;font-size:12px;line-height:1.4;color:rgba(213,216,222,.7)}
.onbTermos a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* 13/10: "Conhecer o app" no canto superior esquerdo (onde fica a seta quando o login abre direto) */
.loginConhecerTopo{background:none;border:none;color:rgba(255,255,255,.82);font-family:'Outfit',sans-serif;font-size:14px;font-weight:500;padding:8px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.carrosselTopoEsq{position:relative}
.loginConhecerTopo{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap}

/* 14/10: dois testadores (Ori, Day 5 e 6) dizem que o Continuar branco parece "apagado": botao principal do onboarding em azul */
/* branco volta, mas com cara de botao clicavel (testadores achavam "desabilitado"): degrau 3D embaixo, texto preto forte, brilho que passa devagar */
#intro .primario{background:linear-gradient(#fff,#ececec) !important;color:#111 !important;font-weight:800;position:relative;overflow:hidden;
  box-shadow:0 4px 0 #a9a9a9,0 10px 24px rgba(255,255,255,.14) !important;transition:transform .08s,box-shadow .08s}
#intro .primario:active{transform:translateY(3px);box-shadow:0 1px 0 #a9a9a9,0 4px 12px rgba(255,255,255,.1) !important}
#intro .primario::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-20deg);animation:ctaBrilho 3.4s ease-in-out 1.2s infinite;pointer-events:none}
@keyframes ctaBrilho{0%,55%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){#intro .primario::before{animation:none;display:none}}

/* ===== Desktop (Windows/Mac/tablet largo): layout 2 colunas =====
   Celular (<900px) fica intacto. Aba Tarefas: heroi/arena/XP a esquerda,
   lista de tarefas a direita. Outras abas (.view) ocupam as 2 colunas. */
@media (min-width:900px) and (pointer:fine), (min-width:1100px){
  body{padding:0;align-items:flex-start}
  .app{
    max-width:none;display:grid;grid-template-columns:minmax(430px,36%) 1fr;
    grid-template-rows:auto 1fr auto auto;align-content:stretch;
    height:100dvh;max-height:none;border-radius:0;border:none;
  }
  .app>.topbar{grid-column:1 / -1;grid-row:1}
  .app>.arena{grid-column:1;grid-row:2;display:flex;flex-direction:column;justify-content:center;min-height:0}
  .app>.xpwrap{grid-column:1;grid-row:3;align-self:end}
  .app>.tasks{grid-column:2;grid-row:2 / 4;min-height:0;overflow-y:auto;border-left:1px solid var(--line)}
  .app>.view{grid-column:1 / -1;grid-row:2 / 4;min-height:0}
  .app>.nav{grid-column:1 / -1;grid-row:4;margin-top:0}
  .app>.nav button{padding:12px 4px}
  .card,.dlgStage{max-width:520px}
  .app>.arena{padding:40px 24px 30px}
  .app>.arena .fight{zoom:1.35;margin-bottom:24px}
  .app>.xpwrap{padding:16px 24px;font-size:15px}
  .app>.tasks{padding:22px 32px;display:flex;flex-direction:column}
  .app>.tasks .empty{margin:auto;border:none;font-size:20px}
  .app>.topbar{padding:16px 28px}
}
@media (min-width:1600px){.app>.arena .fight{zoom:2.2}.app>.tasks{padding:28px 48px}.app>.xpwrap{font-size:17px}}

/* ===== Desktop: modais/sheets/overlays (celular intacto) ===== */
@media (min-width:900px) and (pointer:fine), (min-width:1100px){
  /* bottom-sheets viram dialogos centrais ampliados */
  .isheet{left:50%;right:auto;bottom:auto;top:50%;width:520px;max-width:none;margin:0;zoom:1.3;
    border-radius:20px;transform:translate(-50%,-45%);opacity:0;pointer-events:none;
    transition:transform .22s ease,opacity .22s ease}
  .isheet.on{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
  .edov{align-items:center}
  .edsheet{max-width:520px;zoom:1.3;border-radius:20px;transform:translateY(24px);opacity:0;
    transition:transform .28s var(--expo),opacity .28s var(--expo);padding-bottom:18px}
  .edov.on .edsheet{transform:translateY(0);opacity:1}
  .baupop{zoom:1.3}
  .dlgStage{max-width:640px}
  .dlgStage>*{zoom:1.25}
  /* telas cheias (Config, Grimorio, Historico...): conteudo centralizado e legivel */
  .cfgOverlay>*,.grimOverlay>*,.histOverlay>*{width:min(100%,880px);margin-left:auto;margin-right:auto;box-sizing:border-box}
  .cfgOverlay,.grimOverlay,.histOverlay{font-size:17px}
  .cfgOverlay .vtitle{font-size:20px !important}
}

/* Desktop: popups restantes (level up, toast, pilula de estagio) e abas */
@media (min-width:900px) and (pointer:fine), (min-width:1100px){
  .lvlpop{zoom:1.4}
  .toast{zoom:1.4}
  .estFlut{zoom:1.4}
  .app>.view>*{zoom:1;width:100%;max-width:1000px;margin-left:auto;margin-right:auto;box-sizing:border-box}
}
@media (min-width:900px) and (pointer:fine), (min-width:1100px){.app>.view>*{margin-left:auto !important;margin-right:auto !important}.app>.view .equiprow{max-width:640px;margin-left:auto;margin-right:auto}.app>.view .invfiltros{justify-content:flex-start}}
@media (min-width:1600px) and (max-height:960px){.app>.arena .fight{zoom:1.7}}
@media (min-width:1600px) and (max-height:780px){.app>.arena .fight{zoom:1.35}}

/* Desktop: onboarding/carrossel/login ampliados */
@media (min-width:900px) and (pointer:fine), (min-width:1100px){
  #intro .card{max-width:620px}
  #intro .carrosselSlide>*{zoom:1.35}
  #intro .passo{zoom:1.3}
}

/* Desktop: onboarding limitado pela ALTURA (notebook / janela com barras) */
@media (min-width:900px) and (max-height:1000px){ #intro .carrosselSlide>*{zoom:1.1} #intro .passo{zoom:1.1} }
@media (min-width:900px) and (max-height:820px){ #intro .carrosselSlide>*{zoom:1} #intro .passo{zoom:1} }

/* separador so pra leitores de tela (eyebrow + titulo do onboarding liam juntos: 'TASKSYour tasks') */
.srSep{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* a pilula de estagio (.estFlut) flutua sobre o fim da area de tarefas: reserva espaco embaixo pra nao cobrir "Terminar dia" (Redmi Note 8) */
.tasks::after{content:"";display:block;flex:none;height:52px}

/* ===== Telas de conquista (Nivel / Estagio) -- bottom sheet com molas ===== */
.cq-tela{--spr2:linear(0,.02,.08 3%,.26 8%,.58 14%,.86 20%,1.02 26%,1.06 32%,1.03 40%,.99 52%,1.002 70%,1);--spr:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);
  position:fixed;inset:0;z-index:150;visibility:hidden;pointer-events:none}
.cq-tela.on{visibility:visible;pointer-events:auto}
.cq-tela *{animation-play-state:paused}.cq-tela.on *{animation-play-state:running}
.md-back{position:absolute;inset:0;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;animation:mdFade .35s ease forwards}
.md-sheet{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;max-height:94%;overflow-y:auto;background:var(--panel-2);border-top:1px solid var(--line);border-radius:26px 26px 0 0;padding:10px 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;transform:translateY(105%);animation:mdUp .22s ease forwards}
.cq-tela.estagio-tela-saindo .md-sheet{animation:mdDown .22s ease forwards;animation-play-state:running}
.cq-tela.estagio-tela-saindo .md-back{animation:mdFadeOut .22s ease forwards;animation-play-state:running}
@keyframes mdUp{to{transform:none}}@keyframes mdDown{from{transform:none}to{transform:translateY(105%)}}
@keyframes mdFade{to{opacity:1}}@keyframes mdFadeOut{from{opacity:1}to{opacity:0}}
.md-handle{width:38px;height:4px;border-radius:2px;background:var(--line);margin-bottom:16px;flex:none}
.md-k{font-family:'Silkscreen',monospace;font-size:10px;letter-spacing:.18em;color:var(--muted);opacity:0;animation:mdIn .4s ease .3s forwards}
@keyframes mdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.md-t{font-family:'Outfit',sans-serif;font-size:22px;font-weight:600;color:var(--text);margin:8px 0 0;opacity:0;animation:mdIn .4s ease .45s forwards}
.md-art{position:relative;width:100%;height:158px;border-radius:18px;overflow:hidden;margin:14px 0;background:#222;flex:none}
.md-art .l{position:absolute;inset:0;background-size:cover;background-position:center;image-rendering:pixelated}
.md-art .n{clip-path:circle(0% at 50% 62%);animation:mdIris 1s cubic-bezier(.6,.05,.2,1) .55s forwards}
.md-art .zoom{position:absolute;inset:0;transform:scale(1.14);animation:mdZoom 1.8s cubic-bezier(.2,.7,.2,1) .4s forwards}
@keyframes mdIris{to{clip-path:circle(80% at 50% 62%)}}@keyframes mdZoom{to{transform:scale(1)}}
.md-art .shade{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.6));z-index:2}
.md-art .tocha-arena{z-index:2}
.md-hero{position:absolute;left:50%;bottom:14px;width:83px;height:83px;margin-left:-41px;object-fit:contain;image-rendering:pixelated;z-index:2;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35));opacity:0;transform:translateY(28px) scale(.85);animation:mdHero .8s var(--spr2) .55s forwards}
@keyframes mdHero{to{opacity:1;transform:none}}
.md-name{position:absolute;left:14px;bottom:10px;z-index:3;overflow:hidden;height:34px}
.md-name b{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:28px;line-height:34px;color:#fff;transform:translateY(110%);animation:mdName .6s cubic-bezier(.2,.9,.2,1) 1.2s forwards}
@keyframes mdName{to{transform:none}}
.md-seg{display:flex;gap:6px;width:100%}.md-seg i{flex:1;height:6px;border-radius:3px;background:var(--line);position:relative;overflow:hidden}
.md-seg i.ok{background:var(--gold)}.md-seg i b{position:absolute;left:0;top:0;width:100%;height:100%;display:block;background:var(--gold);transform:scaleX(0);transform-origin:left;animation:mdFill .8s cubic-bezier(.3,.7,.2,1) .5s forwards}
@keyframes mdFill{to{transform:none}}
.md-segl{display:flex;justify-content:space-between;width:100%;font-size:12px;color:var(--dim);margin-top:7px;opacity:0;animation:mdIn .4s ease .6s forwards}
.md-h{font-family:'Silkscreen',monospace;font-size:10px;letter-spacing:.16em;color:var(--dim);width:100%;margin-top:16px;opacity:0;animation:mdIn .4s ease 1.3s forwards}
.md-mobs{display:flex;gap:8px;width:100%;margin-top:8px}
.md-mobs span{flex:1;aspect-ratio:1;max-width:80px;border-radius:14px;background:rgba(255,255,255,.06);display:grid;place-items:center;opacity:0;transform:translateY(14px) scale(.9);animation:mdRow .55s var(--spr2) forwards;animation-delay:calc(1.4s + var(--i)*.07s)}
.md-mobs img{width:62%;image-rendering:pixelated;filter:brightness(0) opacity(.6)}
.md-mobs .rev img{animation:mdRev .7s ease 2s forwards}
@keyframes mdRev{0%{filter:brightness(0) opacity(.6) blur(0)}50%{filter:brightness(.6) blur(3px)}100%{filter:none}}
.md-all{width:100%;margin-top:12px;font-size:13px;color:var(--dim);line-height:1.4;opacity:0;animation:mdIn .4s ease 2s forwards}
.md-rows{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:16px}
.md-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border-radius:14px;padding:11px 13px;opacity:0;transform:translateY(16px) scale(.97);animation:mdRow .55s var(--spr2) forwards;animation-delay:calc(1.35s + var(--i)*.08s)}
@keyframes mdRow{to{opacity:1;transform:none}}
.md-row .ic{width:28px;height:28px;border-radius:8px;background:var(--line);display:grid;place-items:center;font-family:'Silkscreen',monospace;font-size:10px;color:var(--gold);flex:none}
.md-row .t{flex:1;font-size:13.5px;color:var(--muted)}
.md-row .v{font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;display:flex;gap:7px;align-items:center}
.md-row .d{font-family:'Silkscreen',monospace;font-size:9px;background:var(--gold);color:#1d1a12;border-radius:5px;padding:3px 6px;transform:scale(0);animation:mdPop .45s var(--spr) forwards;animation-delay:calc(1.9s + var(--i)*.08s)}
@keyframes mdPop{to{transform:scale(1)}}
.md-btn{width:100%;margin-top:18px;flex:none;background:var(--accent);color:var(--bg);border:0;border-radius:14px;font-family:'Outfit',sans-serif;font-weight:600;font-size:15px;padding:14px;cursor:pointer;opacity:0;transform:translateY(10px);animation:mdRow .5s var(--spr2) var(--bd,1.9s) forwards}
@media (prefers-reduced-motion:reduce){.cq-tela *{animation-duration:.01s!important;animation-delay:0s!important}}

/* Level Up: textos so com fade curto (sem deslizar); so numeral e valores se movem */
@keyframes mdFade2{to{opacity:1}}
#lvlTela .md-k,#lvlTela .md-t{animation:mdFade2 .25s ease .35s forwards}
#lvlTela .md-segl{animation:mdFade2 .25s ease .5s forwards}
#lvlTela .md-row{transform:none;animation:mdFade2 .3s ease forwards;animation-delay:calc(.9s + var(--i)*.06s)}
#lvlTela .md-row .d{animation-delay:calc(1.3s + var(--i)*.06s)}
#lvlTela .md-btn{transform:none;animation:mdFade2 .3s ease 1.4s forwards}

/* ===== Popups como bottom sheet (baú, queda, largada) -- mesma linguagem das telas de Nivel/Estagio.
   Entrada com mola; a saida e o proprio transition revertendo (desce e some). ===== */
:root{--spr2:linear(0,.02,.08 3%,.26 8%,.58 14%,.86 20%,1.02 26%,1.06 32%,1.03 40%,.99 52%,1.002 70%,1)}
.baupop,.quedapop,.largpop{
  left:0 !important; right:0; top:auto !important; bottom:0; margin:0 auto; zoom:1 !important;
  width:100% !important; max-width:520px; border-radius:26px 26px 0 0 !important; border-bottom:0 !important;
  padding-top:30px !important; padding-bottom:calc(22px + env(safe-area-inset-bottom)) !important;
  transform:translateY(105%) !important; opacity:1 !important;
  visibility:hidden; transition:transform .22s ease, visibility 0s .22s !important;
}
.baupop.on,.quedapop.on,.largpop.on{
  transform:none !important; visibility:visible; transition:transform .22s ease, visibility 0s !important;
}
.baupop::before,.quedapop::before,.largpop::before{
  content:""; position:absolute; top:10px; left:50%; width:38px; height:4px; margin-left:-19px;
  border-radius:2px; background:var(--line);
}
.baubg{background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); transition:opacity .22s ease}

/* ultima tarefa feita: sobra so o golpe final -- o botao Terminar dia pulsa */
@keyframes tdPulsa{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent)}}
.terminarDiaBtn:not([hidden]){animation:tdEntra .45s cubic-bezier(.2,1.3,.4,1) both,tdPulsa 2s ease-in-out .9s infinite}
@media (prefers-reduced-motion:reduce){.terminarDiaBtn{animation:none !important}}

/* Afixos e forja */
.cel .afx{position:absolute;left:3px;bottom:2px;font:700 9px/1 'Outfit',sans-serif;padding:2px 3px;border-radius:4px;background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--gold)}
.cel .afx.a-est{color:#7fb8ff}.cel .afx.a-sor{color:#8fe3a0}.cel .afx.a-bar{color:#ffb070}
.afxTag{color:var(--gold)}.afxTag.a-est{color:#7fb8ff}.afxTag.a-sor{color:#8fe3a0}.afxTag.a-bar{color:#ffb070}
.forjaBox{display:flex;flex-direction:column;gap:10px}
.forjaLn{display:flex;justify-content:space-between;align-items:center;gap:10px}
.forjaLn small{color:var(--dim);font-size:12px}
.forjaCusto{font-size:13px;color:var(--text)}
.forjaDica{font-size:12px;color:var(--dim)}
.iacts button[disabled]{opacity:.4;pointer-events:none}

/* Animacao da forja: 3 marteladas no item e o novo afixo entra com mola */
@keyframes forjaBate{0%{transform:translateY(0) scale(1)}12%{transform:translateY(-7px) scale(1.04)}22%{transform:translateY(2px) scale(.9,1.06)}30%,38%{transform:translateY(0) scale(1)}46%{transform:translateY(-7px) scale(1.04)}56%{transform:translateY(2px) scale(.9,1.06)}64%,72%{transform:translateY(0) scale(1)}80%{transform:translateY(-7px) scale(1.06)}90%{transform:translateY(2px) scale(.88,1.08)}100%{transform:translateY(0) scale(1)}}
@keyframes forjaTrem{0%,100%{transform:translateX(0)}20%{transform:translateX(-2px)}40%{transform:translateX(2px)}60%{transform:translateX(-1px)}80%{transform:translateX(1px)}}
.ibox.forjando{animation:forjaBate .85s cubic-bezier(.3,.7,.3,1) both;border-color:var(--accent)}
@keyframes forjaEntra{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.forjaLn.forjaRev{animation:forjaEntra .55s var(--spr2,cubic-bezier(.2,.9,.3,1.2)) both}
@media (prefers-reduced-motion:reduce){.ibox.forjando,.forjaLn.forjaRev{animation:none}}

.cel .afx.a-bau,.afxTag.a-bau{color:#e6a8ff}.cel .afx.a-abu,.afxTag.a-abu{color:#ff8f8f}.cel .afx.a-tes,.afxTag.a-tes{color:#7fe0d6}

/* bau extra (afixo Abundante): empilhado acima do especial */
.bauArena.bauExtra{ right:auto; left:-64px; bottom:62px; }

/* Ficha de equipamento em estilo RPG: linhas rotulo/valor + secao de encantamento */
.ibonus.istats{display:block}
.istats .irow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 2px;font-family:'Outfit',sans-serif;font-size:14px;color:var(--muted)}
.istats .irow b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
.istats .irow b.pos{color:var(--verde)}
.istats .irow b.neg{color:var(--perigo)}
.istats .irow.dim{font-size:12px;color:var(--dim)}
.istats .irow.dim b{color:var(--dim);font-weight:500}
.istats .isep{display:flex;align-items:center;gap:8px;margin:6px 0;border-top:1px solid var(--line);padding-top:8px;font:600 10px 'Outfit',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.istats .isep:empty{padding-top:0;margin:4px 0}
.istats .iafx{font:600 15px 'Outfit',sans-serif;color:var(--gold);padding:2px 2px 0}
.istats .iafx.a-est{color:#7fb8ff}.istats .iafx.a-sor{color:#8fe3a0}.istats .iafx.a-bar{color:#ffb070}.istats .iafx.a-bau{color:#e6a8ff}.istats .iafx.a-abu{color:#ff8f8f}.istats .iafx.a-tes{color:#7fe0d6}
.istats .irow b.afv{color:var(--gold)}
.istats .irow b.afv.a-est{color:#7fb8ff}.istats .irow b.afv.a-sor{color:#8fe3a0}.istats .irow b.afv.a-bar{color:#ffb070}.istats .irow b.afv.a-bau{color:#e6a8ff}.istats .irow b.afv.a-abu{color:#ff8f8f}.istats .irow b.afv.a-tes{color:#7fe0d6}
.istats .idesc{font:400 12px 'Outfit',sans-serif;color:var(--dim);padding:0 2px 4px}
.ibonus.istats span{background:none;border:0;padding:0;border-radius:0;box-shadow:none;font-weight:inherit;font-size:inherit;color:inherit}
.ibonus.istats .isep span{font:600 10px 'Outfit',sans-serif}

/* afixos no inventario: valor colorido + barra na base da celula; chips de filtro */
:root{--afx-gan:var(--gold);--afx-est:#7fb8ff;--afx-sor:#8fe3a0;--afx-bar:#ffb070;--afx-bau:#e6a8ff;--afx-abu:#ff8f8f;--afx-tes:#7fe0d6}
.cel{overflow:hidden}
.cel .afx{left:auto;right:3px;top:3px;bottom:auto;padding:1px 3px;font-size:9px;background:color-mix(in srgb,var(--bg) 75%,transparent)}
.cel .afx.a-gan{color:var(--afx-gan)}.cel .afx.a-est{color:var(--afx-est)}.cel .afx.a-sor{color:var(--afx-sor)}.cel .afx.a-bar{color:var(--afx-bar)}.cel .afx.a-bau{color:var(--afx-bau)}.cel .afx.a-abu{color:var(--afx-abu)}.cel .afx.a-tes{color:var(--afx-tes)}
.cel .afbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--afx-gan)}
.cel .afbar.a-est{background:var(--afx-est)}.cel .afbar.a-sor{background:var(--afx-sor)}.cel .afbar.a-bar{background:var(--afx-bar)}.cel .afbar.a-bau{background:var(--afx-bau)}.cel .afbar.a-abu{background:var(--afx-abu)}.cel .afbar.a-tes{background:var(--afx-tes)}
#invAfxFiltros button[style*='--afc']{border-color:var(--afc);color:var(--afc)}
#invAfxFiltros button[style*='--afc'].on{background:var(--afc);color:var(--bg)}

/* Tooltip de item estilo RPG classico: centralizado, linhas "+X% Atributo", encantamento colorido entre ornamentos */
.istats{text-align:center}
.istats .irow{justify-content:center;flex-direction:row-reverse;gap:6px;padding:3px 0;font-size:15px;color:var(--text)}
.istats .irow b,.istats .irow b.pos{color:var(--text);font-weight:600}
.istats .irow b.neg{color:var(--perigo)}
.istats .irow.dim{font-size:12px;color:var(--dim);flex-direction:row;gap:5px}
.istats .irow.dim b{color:var(--dim)}
.istats .isep.orn{border:0;margin:10px 0 6px;padding:0;height:10px;position:relative}
.istats .isep.orn::before{content:'';position:absolute;left:8%;right:8%;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 44%,transparent 44%,transparent 56%,var(--line) 56%,var(--line) 80%,transparent)}
.istats .isep.orn::after{content:'◆';position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);font-size:8px;color:var(--dim);line-height:1}
.istats .iafx{text-align:center;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:2px 0 4px}
.istats .irow b.afv{font-weight:700}
.istats .idesc{text-align:center;font-style:italic;padding:2px 14px 6px}
.istats .isep:empty:not(.orn){margin:8px 0 4px;border-top:1px solid var(--line)}

/* indicador discreto: uma gema colorida no canto (cor = tipo do afixo) */
.cel .afgem{position:absolute;right:5px;top:5px;width:7px;height:7px;background:var(--afx-gan);transform:rotate(45deg);border-radius:1px}
.cel .afgem.a-est{background:var(--afx-est)}.cel .afgem.a-sor{background:var(--afx-sor)}.cel .afgem.a-bar{background:var(--afx-bar)}.cel .afgem.a-bau{background:var(--afx-bau)}.cel .afgem.a-abu{background:var(--afx-abu)}.cel .afgem.a-tes{background:var(--afx-tes)}

/* Forja: limpa, centralizada */
.forjaBox{display:block}
.fPar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fPar.one{grid-template-columns:1fr}
.fBloco{border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center;background:color-mix(in srgb,var(--bg) 40%,transparent)}
.fBloco small{display:block;font:600 10px 'Outfit',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.fBloco .fVal{font:600 15px 'Outfit',sans-serif;color:var(--afx-gan)}
.fVal.a-est{color:var(--afx-est)}.fVal.a-sor{color:var(--afx-sor)}.fVal.a-bar{color:var(--afx-bar)}.fVal.a-bau{color:var(--afx-bau)}.fVal.a-abu{color:var(--afx-abu)}.fVal.a-tes{color:var(--afx-tes)}
.fCusto{text-align:center;margin:12px 0 2px;font:400 14px 'Outfit',sans-serif;color:var(--muted)}
.fCusto b{color:var(--text)}.fCusto b.ok{color:var(--verde)}.fCusto b.falta{color:var(--perigo)}.fCusto i{font-style:normal;color:var(--dim);margin:0 4px}

/* Tooltip de equipamento estilo Diablo: tudo centralizado, nome do afixo entre aspas sob o nome do item */
.ihead.eqh{flex-direction:column;align-items:center;text-align:center;gap:8px}
.ihead.eqh .iname{font-size:20px}
.iafn{font:600 13px 'Outfit',sans-serif;letter-spacing:.04em;margin-top:3px;color:var(--afx-gan)}
.iafn.a-est{color:var(--afx-est)}.iafn.a-sor{color:var(--afx-sor)}.iafn.a-bar{color:var(--afx-bar)}.iafn.a-bau{color:var(--afx-bau)}.iafn.a-abu{color:var(--afx-abu)}.iafn.a-tes{color:var(--afx-tes)}
.istats .irow b.afv{font-weight:600}

/* afixo no loot do bau */
.baufx{font:600 11px 'Outfit',sans-serif;margin-top:2px;color:var(--afx-gan)}
.baufx.a-est{color:var(--afx-est)}.baufx.a-sor{color:var(--afx-sor)}.baufx.a-bar{color:var(--afx-bar)}.baufx.a-bau{color:var(--afx-bau)}.baufx.a-abu{color:var(--afx-abu)}.baufx.a-tes{color:var(--afx-tes)}

/* tag de raridade como badge + losango antes das linhas de bonus */
.imeta.tag{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:999px;font-size:11px;letter-spacing:.08em;background:color-mix(in srgb,currentColor 16%,transparent);border:1px solid color-mix(in srgb,currentColor 35%,transparent)}
.istats .irow:not(.dim)::before{content:'◆';font-size:7px;color:var(--dim);align-self:center;order:3;margin-left:2px}

/* runa do afixo no canto da celula do inventario */
.cel .rune{position:absolute;right:5px;top:5px;width:8px;height:11px;color:var(--afx-gan);opacity:.95;pointer-events:none}
.cel .rune.a-est{color:var(--afx-est)}.cel .rune.a-sor{color:var(--afx-sor)}.cel .rune.a-bar{color:var(--afx-bar)}.cel .rune.a-bau{color:var(--afx-bau)}.cel .rune.a-abu{color:var(--afx-abu)}.cel .rune.a-tes{color:var(--afx-tes)}

.cel .rune{width:11px;height:11px;right:5px;top:5px}

.cel .rune{width:12px;height:12px;right:5px;top:5px;image-rendering:pixelated;filter:drop-shadow(0 0 1px rgba(0,0,0,.9))}

.cel .rune{width:10px;height:14px;right:5px;top:4px}

/* linha de encantamento na ficha (positivo = cor do afixo, ruim = vermelho) */
.istats .irow.afl{color:var(--afx-gan);font-weight:600}
.istats .irow.afl.a-est{color:var(--afx-est)}.istats .irow.afl.a-sor{color:var(--afx-sor)}.istats .irow.afl.a-bar{color:var(--afx-bar)}.istats .irow.afl.a-bau{color:var(--afx-bau)}.istats .irow.afl.a-abu{color:var(--afx-abu)}.istats .irow.afl.a-tes{color:var(--afx-tes)}
.istats .irow.afl.neg,.fBloco .fVal.neg,.baufx.neg{color:var(--perigo)}
.istats .idesc{padding:4px 14px}

.iacts button.semTes{opacity:.4}

/* dica do botao Criar tarefa */
.saveHint{min-height:0;height:0;overflow:hidden;opacity:0;text-align:center;font:500 12px 'Outfit',sans-serif;color:var(--perigo);transition:opacity .6s ease,height .3s ease .3s,margin .3s ease .3s}
.saveHint.on{height:18px;opacity:1;margin:4px 0}
@keyframes sacode{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.sacode{animation:sacode .35s ease}
@media (prefers-reduced-motion:reduce){.sacode{animation:none}}

.saveHint.on{transition:opacity .2s,height .2s,margin .2s}

/* botoes secundarios (Forjar, Vender, Voltar...): preenchidos com tinta do tema + borda e texto na cor de destaque -> claramente tocaveis */
.iacts button:not(.prim),#confirmOk{background:color-mix(in srgb,var(--accent) 16%,var(--poco));border:1.5px solid color-mix(in srgb,var(--accent) 65%,transparent);color:var(--accent)}
.iacts button:not(.prim):active,#confirmOk:active{background:color-mix(in srgb,var(--accent) 28%,var(--poco))}
.iacts button.semTes{opacity:.45}

/* Forjar: roxo solido fixo (igual em todos os temas), sem gradiente nem brilho */

/* tela de forja: mesmo layout da ficha (linhas centralizadas), sem caixas */
.istats .irow.fVelho{opacity:.5}
.istats .irow.dim b.neg{color:var(--perigo)}
.istats .irow.forjaRev{animation:forjaRev .45s ease-out both}

/* cena da forja: item sobre a bigorna, golpes de martelo, fagulhas quadradas (pixel) */
.cena{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:6px}
.cena .ibox{width:76px;height:76px;transition:border-color .15s,box-shadow .15s}
.bigorna{width:104px;height:12px;margin-top:6px;background:var(--line);border-radius:3px 3px 6px 6px;position:relative}
.bigorna::after{content:'';position:absolute;left:30px;right:30px;bottom:-9px;height:9px;background:var(--line);border-radius:0 0 4px 4px}
.cena[data-calor="1"] .ibox{border-color:#B8561A;box-shadow:0 0 0 1px #B8561A}
.cena[data-calor="2"] .ibox{border-color:#E8761F;box-shadow:0 0 0 2px #E8761F}
.cena[data-calor="3"] .ibox{border-color:#FFB020;box-shadow:0 0 0 3px #FFB020}
@keyframes forjaGolpe{0%{transform:translate(0,-12px) scale(1.06)}22%{transform:translate(0,3px) scale(.92,1.06)}34%{transform:translate(-3px,0)}46%{transform:translate(3px,0)}58%{transform:translate(-2px,0)}100%{transform:none}}
.cena.bate{animation:forjaGolpe .36s steps(7,end)}
.fg{position:absolute;left:50%;top:46px;width:5px;height:5px;background:#FFB020;pointer-events:none;animation:fagulha .6s steps(6,end) forwards}
@keyframes fagulha{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 34px));opacity:0}}
.fSlots{display:flex;justify-content:center;gap:10px;padding:6px 0 4px}
.fSlots i{width:18px;height:18px;border:1.5px dashed var(--dim);border-radius:3px;transform:rotate(45deg) scale(.8)}
.fSlots i.on{border:0;background:#7FE0D6;border-radius:3px}
@keyframes gemaVoa{0%{transform:rotate(45deg) translate(0,0);opacity:1}100%{transform:rotate(45deg) translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
.fSlots i.voa{animation:gemaVoa .45s cubic-bezier(.5,0,.8,.4) forwards}
.fSlotsTx{justify-content:center}
@keyframes carimbo{0%{transform:scale(2);opacity:0}60%{transform:scale(.94);opacity:1}100%{transform:scale(1)}}
.istats .irow.forjaRev{animation:carimbo .4s ease-out both}
@media (prefers-reduced-motion:reduce){.cena.bate,.fSlots i.voa,.istats .irow.forjaRev{animation:none}.fg{display:none}}

/* ===== forja em pixel art: parede de tijolo, tochas e martelo da propria sheet, bigorna desenhada em pixels ===== */
.cena{position:relative;width:100%;height:178px;padding:0;display:block;border-radius:14px;overflow:hidden;border:2px solid #14101F;image-rendering:pixelated}
.cena .parede{position:absolute;inset:0;background:#2B2342 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='24' shape-rendering='crispEdges'><rect width='48' height='24' fill='%232B2342'/><rect y='11' width='48' height='2' fill='%231B1629'/><rect y='23' width='48' height='2' fill='%231B1629'/><rect x='23' width='2' height='12' fill='%231B1629'/><rect x='47' y='12' width='2' height='12' fill='%231B1629'/><rect x='2' y='2' width='10' height='2' fill='%2335294F'/><rect x='26' y='14' width='10' height='2' fill='%2335294F'/></svg>");background-size:48px 24px;image-rendering:pixelated}
.cena .tocha{position:absolute;top:10px}
.cena .tocha.t1{left:10px}
.cena .tocha.t2{right:10px;transform:scaleX(-1)}
@keyframes tochaPisca{0%,100%{filter:none}50%{filter:brightness(1.35)}}
.cena .tocha{animation:tochaPisca .5s steps(2,end) infinite}
.cena.bate .tocha{animation-duration:.18s}
.cena .forjaPeca{position:absolute;left:50%;bottom:46px;margin-left:-24px;width:48px;height:48px}
.cena .ibox{width:48px;height:48px;background:none;border:0;border-radius:0;box-shadow:none;display:block;padding:0;transition:none}
.cena[data-calor="1"] .forjaPeca{filter:drop-shadow(2px 0 0 #B8561A) drop-shadow(-2px 0 0 #B8561A) drop-shadow(0 2px 0 #B8561A) drop-shadow(0 -2px 0 #B8561A)}
.cena[data-calor="2"] .forjaPeca{filter:drop-shadow(2px 0 0 #E8761F) drop-shadow(-2px 0 0 #E8761F) drop-shadow(0 2px 0 #E8761F) drop-shadow(0 -2px 0 #E8761F)}
.cena[data-calor="3"] .forjaPeca{filter:drop-shadow(2px 0 0 #FFB020) drop-shadow(-2px 0 0 #FFB020) drop-shadow(0 2px 0 #FFB020) drop-shadow(0 -2px 0 #FFB020)}
.cena .bigorna{position:absolute;left:50%;bottom:8px;width:132px;height:72px;margin-left:-66px;margin-top:0;background:none;border-radius:0}
.cena .bigorna::after{display:none}
.cena .martelo{position:absolute;left:50%;bottom:62px;margin-left:6px;transform-origin:50% 94%;transform:rotate(38deg)}
@keyframes marteloBate{0%{transform:rotate(38deg)}40%{transform:rotate(38deg)}60%{transform:rotate(-52deg)}72%{transform:rotate(-52deg)}100%{transform:rotate(38deg)}}
.cena.bate .martelo{animation:marteloBate .38s steps(8,end)}
@keyframes pecaAmassa{0%,50%{transform:none}60%{transform:scale(1.12,.84)}75%{transform:scale(.96,1.04)}100%{transform:none}}
.cena.bate .forjaPeca{animation:pecaAmassa .38s steps(5,end);transform-origin:50% 100%}
.cena.bate{animation:none}
.fg{top:104px}
.fSlots i.pxi{width:30px;height:30px;border:0;background-color:transparent;transform:none;border-radius:0}
.fSlots i.pxi:not(.on){opacity:.25;filter:grayscale(1)}
@keyframes gemaVoa{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.4);opacity:0}}
.fSlots i.voa{animation:gemaVoa .45s steps(7,end) forwards}
@media (prefers-reduced-motion:reduce){.cena .tocha,.cena.bate .martelo,.cena.bate .forjaPeca{animation:none}}

.cena .forjaPeca{bottom:76px}
.cena .martelo{margin-left:30px;bottom:80px;transform:rotate(30deg)}
@keyframes marteloBate{0%,35%{transform:rotate(30deg)}55%,70%{transform:rotate(-72deg)}100%{transform:rotate(30deg)}}
.fg{top:96px}
.fSlots i.pxi.on{background-image:url("sheet.png?v=1");background-repeat:no-repeat}
.cena[data-calor] .ibox{box-shadow:none;border-color:transparent}
.cena .forjaPeca{bottom:72px}
/* escala inteira (2x dos sprites 32px) em tudo da cena: sem pixel esticado */
.cena .tocha{top:14px}
.cena .tocha.t1{left:12px}.cena .tocha.t2{right:12px}
.cena .ibox{width:64px;height:64px}
.cena .forjaPeca{width:64px;height:64px;margin-left:-32px;bottom:50px}
.cena .bigorna{width:88px;height:48px;margin-left:-44px;bottom:8px}
.cena .martelo{margin-left:34px;bottom:56px}
.fSlots i.pxi{width:32px;height:32px}
.fg{top:100px}

/* ===== forja: banner igual ao da tela de Nivel (arte real do jogo) ===== */
.cena{position:relative;width:100%;height:158px;margin:0;border-radius:18px;overflow:hidden;border:0;background:#222;display:block}
.cena .l{position:absolute;inset:0;image-rendering:pixelated}
.cena .tocha-arena{z-index:2}
.cena .cfHeroi{position:absolute;left:16%;bottom:20px;width:83px;height:83px;z-index:2}
.cena .cfHeroi img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block}
.cena .cfPeca{position:absolute;right:18%;bottom:24px;width:64px;height:64px;z-index:2}
.cena .forjaPeca{position:relative;left:auto;bottom:auto;margin:0;width:64px;height:64px;transform-origin:50% 100%}
.cena .sombra{position:absolute;left:50%;bottom:-6px;width:72%;height:9px;margin-left:-36%;border-radius:50%;background:rgba(0,0,0,.38)}
.cena .cfHeroi .sombra{bottom:-4px}
@keyframes cfLunge{0%{transform:none}38%{transform:translateX(52px) rotate(6deg)}100%{transform:none}}
@keyframes cfTrema{0%,34%{transform:none}44%{transform:translateX(7px) scale(1.1,.88)}58%{transform:translateX(-4px)}100%{transform:none}}
.cena.bate .cfHeroi{animation:cfLunge .34s cubic-bezier(.2,.8,.3,1)}
.cena.bate .forjaPeca{animation:cfTrema .34s steps(6,end)}
.cena.bate .martelo,.cena.bate .tocha{animation:none}
.cena .fg{left:auto;right:calc(18% + 30px);top:84px}
@media (prefers-reduced-motion:reduce){.cena.bate .cfHeroi,.cena.bate .forjaPeca{animation:none}}

/* ===== forja B: roleta de encantamentos com sprites reais ===== */
.rolista{display:flex;flex-direction:column;gap:8px}
.rolRow{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:14px;border:2px solid var(--line);background:var(--poco);text-align:left}
.rolRow.dim{opacity:.5;border-color:transparent}
.rolRow.cur{opacity:.7}
.rolRow.sel{border-color:var(--text)}
.rolRow.sel.trava{animation:rolTrava .35s steps(4,end)}
@keyframes rolTrava{0%{transform:scale(1.06)}100%{transform:none}}
.rolIc{width:44px;height:44px;flex:none;border-radius:12px;background:var(--bg);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center}
.rolTx{flex:1;font:600 15px 'Outfit',sans-serif;color:var(--afx-gan)}
.rolTx.dim{color:var(--dim);font-weight:500}
.rolTx.a-est{color:var(--afx-est)}.rolTx.a-sor{color:var(--afx-sor)}.rolTx.a-bar{color:var(--afx-bar)}.rolTx.a-bau{color:var(--afx-bau)}.rolTx.a-abu{color:var(--afx-abu)}.rolTx.a-tes{color:var(--afx-tes)}.rolTx.neg{color:var(--perigo)}
.rolTag{font:700 9px 'Outfit',sans-serif;letter-spacing:.1em;background:var(--text);color:var(--bg);padding:3px 6px;border-radius:5px}
@media (prefers-reduced-motion:reduce){.rolRow.sel.trava{animation:none}}
.ibonus.istats .rolTx{color:var(--afx-gan);font:600 15px 'Outfit',sans-serif}
.ibonus.istats .rolTx.dim{color:var(--dim);font-weight:500}
.ibonus.istats .rolTx.a-est{color:var(--afx-est)}.ibonus.istats .rolTx.a-sor{color:var(--afx-sor)}.ibonus.istats .rolTx.a-bar{color:var(--afx-bar)}.ibonus.istats .rolTx.a-bau{color:var(--afx-bau)}.ibonus.istats .rolTx.a-abu{color:var(--afx-abu)}.ibonus.istats .rolTx.a-tes{color:var(--afx-tes)}.ibonus.istats .rolTx.neg{color:var(--perigo)}
.ibonus.istats .rolTag{font:700 9px 'Outfit',sans-serif;letter-spacing:.1em;background:var(--text);color:var(--bg);padding:3px 6px;border-radius:5px}
/* roleta em tira + escolha de tesouros */
.rolJan{position:relative;height:292px;overflow:hidden;border-radius:14px}
.rolTira{display:flex;flex-direction:column;gap:0;will-change:transform}
.rolTira .rolRow{height:52px;box-sizing:border-box;padding:4px 8px;margin-bottom:8px;flex:none}
.rolSel{position:absolute;left:0;right:0;top:120px;height:52px;box-sizing:border-box;border:2px solid var(--text);border-radius:14px;z-index:2;pointer-events:none}
.rolSel.trava{animation:rolTrava .35s steps(4,end)}
.rolDica{text-align:center;font:500 12px 'Outfit',sans-serif;color:var(--dim);padding:2px 0 6px}
.tesGrade{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-height:150px;overflow-y:auto;padding:2px}
.tesCel{position:relative;aspect-ratio:1;border-radius:12px;border:2px solid var(--rc,var(--line));background:var(--poco);display:flex;align-items:center;justify-content:center;padding:0;color:var(--text)}
.tesCel:disabled{opacity:.3}
.tesCel b{position:absolute;right:3px;bottom:1px;font:700 10px 'Outfit',sans-serif;color:var(--text)}
.fSlots i{cursor:pointer}
.fSlots i:not(.on){width:36px;height:36px;border:2px dashed var(--dim);border-radius:10px;transform:none;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){.rolSel.trava{animation:none}}
.fSlots i:not(.on){width:44px;height:44px}
.fSlots i.on{width:44px;height:44px;border:2px solid var(--line);border-radius:10px;background:var(--poco);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transform:none}
.tesGrade{grid-template-columns:repeat(auto-fill,56px);justify-content:center;gap:8px;max-height:176px}
.tesCel{width:56px;height:56px;aspect-ratio:auto}
/* slot vazio: celula solida de inventario com sprite fantasma (sem pontilhado) */
.fSlots i:not(.on){border:2px solid var(--line);background:var(--poco);border-radius:10px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.fSlots i.vazio .pxi{opacity:.2;filter:grayscale(1)}
/* tela de forja compacta: cabecalho horizontal, grade usa so o espaco que sobra */
.ihead.eqh.forjaH{flex-direction:row;text-align:left;align-items:center;gap:14px}
.ihead.eqh.forjaH .imeta.tag{align-self:flex-start;margin-top:6px}
.tesGrade{max-height:clamp(96px,calc(100dvh - 560px),176px)}
#ficha.on{max-height:calc(100dvh - 12px);overflow-y:auto}
/* pulso da roleta ao travar: suave, sem steps */
@keyframes rolTrava{0%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--text) 55%,transparent)}40%{transform:scale(1.035);box-shadow:0 0 0 6px color-mix(in srgb,var(--text) 0%,transparent)}100%{transform:scale(1)}}
.rolSel.trava{animation:rolTrava .45s ease-out}
/* transicao entre telas da ficha (item -> escolher tesouros -> roleta -> resultado) */
@keyframes telaF{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes telaB{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
#ficha.trocando.dirF .ihead,#ficha.trocando.dirF .ibonus,#ficha.trocando.dirF .iacts{animation:telaF .34s cubic-bezier(.2,.8,.2,1) both}
#ficha.trocando.dirB .ihead,#ficha.trocando.dirB .ibonus,#ficha.trocando.dirB .iacts{animation:telaB .34s cubic-bezier(.2,.8,.2,1) both}
#ficha.trocando .ibonus{animation-delay:.05s}
#ficha.trocando .iacts{animation-delay:.1s}
#ficha.trocando.soCorpo .ihead,#ficha.trocando.soCorpo .iacts{animation:none}
/* ===== tour de primeira vez: spotlight com cartao e botoes explicitos ===== */
.tourOverlay{position:fixed;inset:0;z-index:99990;display:none;pointer-events:none;font-family:'Outfit',sans-serif}
.tourOverlay.on{display:block}
.tourHole{position:fixed;border-radius:16px;border:2px solid #fff;box-shadow:0 0 0 100vmax rgba(5,4,10,.86);transition:opacity .2s ease,left .4s cubic-bezier(.2,.8,.2,1),top .4s cubic-bezier(.2,.8,.2,1),width .4s cubic-bezier(.2,.8,.2,1),height .4s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.tourHole i{position:absolute;inset:-2px;border-radius:16px;border:2px solid rgba(255,255,255,.7);animation:tourPulso 1.6s ease-out infinite}
@keyframes tourPulso{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.12,1.25);opacity:0}}
.tourCard{position:fixed;box-sizing:border-box;background:#1B1629;color:#EDE9F7;border:1px solid #3B3257;border-radius:20px;padding:16px 16px 14px;box-shadow:0 18px 50px rgba(0,0,0,.55);transition:opacity .2s ease}
.tourSeta{position:absolute;width:14px;height:14px;background:#1B1629;border-left:1px solid #3B3257;border-top:1px solid #3B3257;transform:translateX(-50%) rotate(45deg);top:-8px}
.tourCard:not(.abaixo) .tourSeta{top:auto;bottom:-8px;transform:translateX(-50%) rotate(225deg)}
.tourNum{font:700 11px 'Outfit',sans-serif;letter-spacing:.14em;color:#8C84A6}
.tourTit{font:700 19px 'Outfit',sans-serif;margin-top:4px}
.tourSub{font:400 14px/1.35 'Outfit',sans-serif;color:#B9B2D0;margin-top:3px}
.tourBarra{display:flex;gap:4px;margin:14px 0 12px}
.tourBarra i{flex:1;height:4px;border-radius:2px;background:#3B3257}
.tourBarra i.on{background:#fff}
.tourBtns{display:flex;align-items:center;gap:8px}
.tourBtns button{font:700 14px 'Outfit',sans-serif;border-radius:12px;padding:11px 16px;border:0}
.tourPular{background:none;color:#8C84A6;padding-left:2px !important}
.tourVolta{background:transparent;color:#EDE9F7;border:1.5px solid #4A4170 !important}
.tourProx{background:#fff;color:#14101F}
@media (prefers-reduced-motion:reduce){.tourHole,.tourCard{transition:none}.tourHole i{animation:none}}

.tourOverlay.leve .tourHole{box-shadow:0 0 0 100vmax rgba(5,4,10,.5)}
#addbtn.tourToque{transform:scale(.92);filter:brightness(1.3);transition:transform .12s}
.tourFake{position:relative;z-index:1}

.tourBloq{position:fixed;display:block;pointer-events:auto;background:transparent}
.tourCard{pointer-events:auto}
.tourTopo{display:flex;align-items:center;justify-content:space-between}
.tourTag{font:700 10px 'Outfit',sans-serif;letter-spacing:.12em;color:#14101F;background:#fff;border-radius:999px;padding:3px 9px}
.tourTag:empty{display:none}
.tourOverlay.ok .tourCard{opacity:0 !important}
.tourOverlay:not(.vez) .tourHole i{animation:none;opacity:0}

/* ===== folhas de confirmacao/dialogo no mesmo padrao da ficha do item (fundo roxo escuro, linha roxa, titulo serifado) ===== */
#confirmSheet,#excluirContaOverlay .edsheet,#nomeOverlay .edsheet,#estPeriodoOverlay .edsheet,#estMontanhaOverlay .edsheet{background:#251E38;border-top:1px solid #3B3257}
#confirmSheet .edtitulo,#excluirContaOverlay .edtitulo,#nomeOverlay .edtitulo{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:22px;letter-spacing:0;text-transform:none;color:var(--text);line-height:1.15}
#confirmSheet .edpuxador,#excluirContaOverlay .edpuxador,#nomeOverlay .edpuxador{background:#3B3257}
#confirmCancelar{background:var(--poco) !important;border:1px solid #3B3257 !important;color:var(--text) !important;font-size:14px}
#confirmOk{background:var(--accent);border:1px solid var(--accent);color:var(--bg);font-size:14px}
#confirmOk:active{background:var(--accent);filter:brightness(.9)}

/* tour: transicoes curtas (menos repaint do escurecimento em tela cheia) */
.tourHole{transition:opacity .12s ease,left .2s cubic-bezier(.3,.8,.3,1),top .2s cubic-bezier(.3,.8,.3,1),width .2s cubic-bezier(.3,.8,.3,1),height .2s cubic-bezier(.3,.8,.3,1)}
.tourCard{transition:opacity .15s ease;will-change:opacity}

/* cartao do tour: entrada/saida limpas (sobe + escala + fade) */
.tourCard{transition:opacity .22s ease,transform .3s cubic-bezier(.2,.9,.3,1);transform:none}
.tourCard.tcOculto{opacity:0;transform:translateY(14px) scale(.96);transition:opacity .14s ease,transform .16s ease-in}
#confirmItem{margin:0 0 12px}
#confirmTitulo.verbo{font:700 11px 'Outfit',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}

/* ===== tour v3: destaque escuro + caixa do heroi fixa embaixo ===== */
.tourCard{box-sizing:border-box;display:grid;grid-template-columns:64px 1fr;gap:10px 12px;background:#251E38;border:1.5px solid #3B3257;border-radius:20px;padding:14px;box-shadow:0 -10px 40px rgba(0,0,0,.5);color:#EDE9F7}
.tourCard.noTopo{box-shadow:0 10px 40px rgba(0,0,0,.5)}
.tourFace{width:64px;height:64px;border-radius:14px;background:#1B1629;border:1px solid #3B3257;display:grid;place-items:center;overflow:hidden}
.tourFace img{width:60px;height:60px;image-rendering:pixelated;object-fit:contain}
.tourNome{display:flex;align-items:center;gap:8px;font:italic 600 19px 'Cormorant Garamond',serif}
.tourNum{margin-left:auto;font:700 11px 'Outfit',sans-serif;letter-spacing:.12em;color:#8C84A6;font-style:normal}
.tourSub{font:400 15px/1.35 'Outfit',sans-serif;color:#EDE9F7;margin-top:3px;min-height:40px}
.tourRod{grid-column:1/3;display:flex;align-items:center;gap:10px}
.tourRod .tourBarra{flex:1;margin:0}
.tourRod button{font:700 14px 'Outfit',sans-serif;border-radius:12px;padding:10px 16px;border:0}
.tourRod .tourPular{background:none;color:#8C84A6;padding:10px 4px}
.tourRod .tourVolta{background:transparent;color:#EDE9F7;border:1.5px solid #4A4170}
.tourRod .tourProx{background:#fff;color:#14101F}

.tourFalta{color:transparent}
.tourOverlay.on{animation:tourEntra .35s ease-out}
@keyframes tourEntra{from{opacity:0}to{opacity:1}}
.tourCard{transition:opacity .25s ease,transform .38s cubic-bezier(.2,.9,.25,1.15),left .3s cubic-bezier(.3,.8,.3,1),top .3s cubic-bezier(.3,.8,.3,1)}
.tourCard.tcOculto{transition:opacity .14s ease,transform .16s ease-in}

.tourFace.fala img{animation:tourFala .26s ease-in-out infinite alternate}
@keyframes tourFala{from{transform:translateY(0)}to{transform:translateY(-3px)}}
.tourHole.chega i{animation:tourOnda .75s cubic-bezier(.2,.7,.3,1) 1 !important;opacity:1}
@keyframes tourOnda{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.16,1.35);opacity:0}}
.tourBarra i{transition:background .35s ease}

/* durante o tour: sem blur de fundo nas folhas (backdrop-filter em tela cheia e o que mais pesa na animacao) */
body.tourAberto .edov,body.tourAberto .baubg,body.tourAberto .sheetbg{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
body.tourAberto .edsheet{will-change:transform}

.tourHole{transition:none !important}

/* durante o tour a folha NAO desliza (so aparece com fade): assim a posicao final ja esta valendo quando o destaque e o dialogo chegam, sem fase escura */
body.tourAberto .edov .edsheet{transform:none !important;transition:opacity .22s ease !important}
body.tourAberto .edov:not(.on) .edsheet{opacity:0}
body.tourAberto .edov.on .edsheet{opacity:1}

.tourHole{transition:border-color .16s ease !important}
.tourOverlay.saindo .tourHole{border-color:transparent}
.tourOverlay.saindo .tourHole i{opacity:0 !important;animation:none !important}
.tourHole{transition:border-color .12s ease,box-shadow .16s ease !important}

.tourOverlay.cortina .tourHole{box-shadow:0 0 0 100vmax rgb(5,4,10) !important;transition:border-color .12s ease,box-shadow .06s ease !important}

/* veu: durante a troca de passo cobre ate o buraco do destaque (o elemento aceso nao pode ficar solto na tela sem anel/cartao) */
.tourVeu{position:fixed;inset:0;background:rgb(5,4,10);opacity:0;pointer-events:none;transition:opacity .32s ease}
.tourOverlay.saindo .tourVeu{opacity:.86;transition:opacity .14s ease}
.tourOverlay.saindo.leve .tourVeu{opacity:.5}
.tourOverlay.cortina .tourVeu{opacity:1}

/* v2: na saida o buraco colapsa (largura/altura 0): o escurecimento (box-shadow) cobre a tela toda IGUAL, sem quadrado claro sobrando */
.tourVeu{display:none !important}
.tourOverlay.saindo .tourHole{width:0 !important;height:0 !important;border-width:0 !important}

.tourOverlay.fim{opacity:0;transition:opacity .36s ease}


/* afixo Tesoureiro (tex): mesmas regras do Garimpeiro, cor propria */
:root{--afx-tex:#b8e65c}
.cel .afx.a-tex,.afxTag.a-tex{color:#b8e65c}
.istats .iafx.a-tex{color:#b8e65c}
.istats .irow b.afv.a-tex{color:#b8e65c}
.cel .afx.a-tex{color:var(--afx-tex)}
.cel .afbar.a-tex{background:var(--afx-tex)}
.cel .afgem.a-tex{background:var(--afx-tex)}
.fVal.a-tex{color:var(--afx-tex)}
.iafn.a-tex{color:var(--afx-tex)}
.baufx.a-tex{color:var(--afx-tex)}
.cel .rune.a-tex{color:var(--afx-tex)}
.istats .irow.afl.a-tex{color:var(--afx-tex)}
.rolTx.a-tex{color:var(--afx-tex)}
.ibonus.istats .rolTx.a-tex{color:var(--afx-tex)}

/* lista de idiomas: uma opcao embaixo da outra, sem bandeira */
#idiomaGrid.temagrid{flex-direction:column;flex-wrap:nowrap;gap:2px}
#idiomaGrid .temalinha{width:100%;box-sizing:border-box}
#idiomaGrid.temagrid{align-self:stretch;width:100%}

/* sem barra de rolagem visivel em nenhuma tela (a rolagem continua funcionando) */
*{scrollbar-width:none !important;-ms-overflow-style:none !important}
*::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important}

/* switches cinza (estilo Skillion): ligado = trilho cinza + bolinha clara; desligado = trilho escuro + bolinha cinza */
.swch{background:rgba(128,128,132,.28) !important}
.swch.on{background:#8b8b90 !important}
.swch .swch-bolinha{background:#9a9aa0;box-shadow:none}
.swch.on .swch-bolinha{background:#f2f2f4}

/* Config compacto em cartoes (estilo Skillion): grupos arredondados, icone solto sem bolha, linhas mais baixas */
.cfgOverlay .cfgcard{background:var(--panel-2);border-radius:18px;margin:0 0 6px;overflow:hidden}
.cfgOverlay .cfgcard .cfgrow{padding:11px 16px;min-height:50px;gap:14px;border-bottom:none;position:relative}
.cfgOverlay .cfgcard .cfgrow + .cfgrow::before,.cfgOverlay .cfgcard .cfgacordeaoPainel + .cfgrow::before{content:"";position:absolute;top:0;left:54px;right:0;border-top:1px solid var(--line)}
.cfgOverlay .cfgcard .cfgicone{flex:0 0 24px;width:24px;height:24px;background:none;border-radius:0;color:var(--dim)}
.cfgOverlay .cfgcard .cfgicone svg{width:22px;height:22px}
.cfgOverlay .cfgcard .cfgtxt b{font-size:15px;font-weight:500}
.cfgOverlay .cfgcard .cfgtxt span{font-size:12px}
.cfgOverlay .edsec{margin:18px 6px 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.cfgOverlay .cfgcard .cfgrow:not(.cfglink):not(.cfgacordeao){padding-left:16px}

/* Aparencia e Idioma: mesmo tamanho/cartao compacto da tela principal de Config */
#cfgTemaCard,#cfgIdiomaCard{background:var(--panel-2) !important;border-radius:18px !important;padding:0 !important;margin:0 0 6px !important;overflow:hidden;border:none !important}
#cfgTemaCard>.cfgtxt,#cfgIdiomaCard>.cfgtxt{display:none}
#temaGrid.temagrid,#idiomaGrid.temagrid{gap:0;margin-top:0;width:100%;align-self:stretch}
#cfgTemaCard .temalinha,#cfgIdiomaCard .temalinha{padding:11px 16px;min-height:50px;border-bottom:none;position:relative;box-sizing:border-box}
#cfgTemaCard .temalinha + .temalinha::before,#cfgIdiomaCard .temalinha + .temalinha::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:1px solid var(--line)}
#cfgTemaCard .temaNome,#cfgIdiomaCard .temaNome{font-size:15px;font-weight:500}
#cfgTemaCard .temaDot{width:24px;height:24px}
#cfgTemaCard .temaLinha2{min-height:50px;padding:11px 16px;border-bottom:none;position:relative;box-sizing:border-box;gap:14px}
#cfgTemaCard .temaLinha2 + .temaLinha2::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:1px solid var(--line)}
#cfgTemaCard .tl2Dot{width:26px;height:26px;border-width:2px}
#cfgTemaCard .tl2Nome{font-size:15px;font-weight:500}
#cfgTemaCard .tl2Check{width:24px;height:24px}
#cfgTemaCard .tl2Check svg{width:20px;height:20px}

/* Herois: mesmo padrao de cartoes do Config */
.cfgcardGrade{padding:10px}
.cfgcardGrade .grade{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0}
#gradeHeroisConfig .opcao,#gradeNovoHeroi .opcao{padding:8px 2px;border-radius:12px}
#gradeHeroisConfig .opcao img,#gradeNovoHeroi .opcao img{width:52px;height:52px}
#novoHeroiOverlay .cfgcard .campo{width:100%;margin:0}

#cfgHeroiResumo,#cfgAparenciaResumo,#cfgPrefsResumo{display:none !important}

/* Tela unica Herois: linhas de personagem no padrao dos cartoes do Config */
#heroisOverlay .cfgHeroisLista{width:100%}
#heroisOverlay .pjItem{padding:10px 16px;min-height:60px;border-radius:0;gap:14px;position:relative;background:none}
#heroisOverlay .pjItem.ativo{background:none}
#heroisOverlay .pjItem + .pjItem::before{content:"";position:absolute;top:0;left:70px;right:0;border-top:1px solid var(--line)}
#heroisOverlay .pjItem .pjAvatar{flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:var(--panel-3)}
#heroisOverlay .pjItem .pjAvatar img{width:34px;height:34px}
#heroisOverlay .pjItem .pjTxt b{font-size:15px;font-weight:500}
#heroisOverlay .pjItem .pjTxt span{font-size:12px}
#heroisOverlay .pjCheck{width:22px;height:22px;flex:none;color:var(--text)}
#heroisOverlay .pjEdit{flex:none;width:32px;height:32px;display:grid;place-items:center;color:var(--dim);border-radius:50%;cursor:pointer}
#heroisOverlay .pjEdit svg{width:18px;height:18px}
#heroisOverlay .pjEdit:active{background:rgba(255,255,255,.08)}
#heroisOverlay .pjNovoBtn{margin:12px 0 0;padding:13px;border-radius:14px;font-size:14px;font-weight:500}

/* Config: Sair / Excluir conta ancorados no fim da tela, botoes um pouco menores */
#cfgOverlay .cfgovcorpo{display:flex;flex-direction:column}
#cfgOverlay .cfgovcorpo>*{flex-shrink:0}
#cfgOverlay .zonarisco{margin-top:auto;padding:28px 0 calc(12px + env(safe-area-inset-bottom));gap:8px}
#cfgOverlay .zonarisco .cfgbtnfull{padding:12px;font-size:14px}

/* onboarding: botao primario com cor FIXA (nao depende de tema/modo claro-escuro nem de regra antiga em cache) -- sempre legivel e com cara de clicavel */
#intro .carrosselSlide:not([data-slide="login"]) button.primario,
.carrosselSlide:not([data-slide="login"]) button.primario{
  background:#FAFAFA !important; color:#1E1E1E !important; opacity:1 !important; border:none !important;
}

/* PAYWALL NOVO (etapa 1) -- vitrine de herois + beneficios + bloco da oferta */
#pwEtapa1 .pwNConteudo{ align-items:stretch; padding:0 24px 22px; }
.pwNPalco{ flex:none; height:27vh; min-height:150px; max-height:260px; display:flex; align-items:flex-end; justify-content:center; gap:6px; padding-bottom:10px; }
.pwNPalco img{ image-rendering:pixelated; width:84px; height:84px; opacity:.88; }
.pwNPalco img#pwNHeroiC{ width:132px; height:132px; opacity:1; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.pwNHeadline{ text-align:left; font-size:30px; line-height:1.08; margin:0 0 14px; text-wrap:balance; }
.pwNLista{ display:flex; flex-direction:column; padding:2px 14px; border-radius:18px; background:rgba(11,7,16,.58); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.pwNRow{ display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.pwNRow:last-child{ border-bottom:none; }
.pwNIc{ flex:none; width:40px; height:40px; border-radius:12px; background:rgba(185,174,210,.16); color:#B9AED2; display:flex; align-items:center; justify-content:center; }
.pwNIc svg{ width:22px; height:22px; }
.pwNTxt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.pwNTxt b{ font-size:15px; font-weight:600; color:#fff; }
.pwNTxt span{ font-size:12.5px; color:#B8B8C4; }
.pwNOfertaLinha{ margin:0 0 14px; text-align:center; font-size:13.5px; line-height:1.4; color:#B8B8C4; }
/* fundo do paywall: sem a arte da floresta (volta ao fundo liso de antes) */
.paywallOverlay .pwFloresta{ display:none; }
.paywallOverlay{ background:linear-gradient(180deg,#1c1a24 0%,#141414 46%); }

/* cena de fundo so da etapa 1: arte das Montanhas no topo, esmaecendo pro fundo liso (mockup) */
.pwNCena{ position:absolute; top:0; left:0; right:0; height:calc(27vh + 70px); min-height:220px; max-height:330px; overflow:hidden; z-index:0; pointer-events:none; }
.pwNCena img{ width:100%; height:100%; object-fit:cover; image-rendering:pixelated; display:block; filter:saturate(.9) brightness(.8); }
.pwNCena::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,20,20,.35) 0%,rgba(20,20,20,0) 35%,#141414 98%); }
.pwNPalco,.pwNHeadline,.pwNLista{ position:relative; z-index:1; }

/* tela de lembrete (etapa 3 do DOM) -- layout novo */
#pwEtapa3 .pwLConteudo{ padding-top:72px; }
.pwLHeadline{ font-size:28px; line-height:1.12; margin:0; text-wrap:balance; }
.pwLPalco{ position:relative; flex:none; width:100%; height:30vh; min-height:190px; max-height:260px; margin:10px 0 6px; }
/* fundo da tela inteira (Montanhas), escurecendo pra baixo pra manter as opcoes legiveis */
#pwEtapa3{ position:relative; }
.pwLTela{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.pwLTela img{ width:100%; height:100%; object-fit:cover; image-rendering:pixelated; display:block; filter:saturate(.95) brightness(.85); }
.pwLTela::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,20,20,.3) 0%,rgba(20,20,20,0) 30%,rgba(20,20,20,.35) 62%,rgba(20,20,20,.9) 96%); }
#pwEtapa3 .pwLConteudo{ position:relative; z-index:1; }
.pwLPalco #pwLHeroi{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:min(18vh,120px); height:min(18vh,120px); image-rendering:pixelated; filter:drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.pwLSino{ position:absolute; left:50%; top:16%; width:48px; height:48px; margin-left:-24px; image-rendering:pixelated; transform:rotate(-14deg); filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.pwLSino::after{ content:''; }
.pwLSub{ font-size:16px; color:#fff; margin:0 0 14px; max-width:none; }
.pwLMicro{ margin:0 0 14px; }
#pwEtapa2{ position:relative; }
#pwEtapa2 .pwPConteudo{ position:relative; z-index:1; }

/* heroi Pro bloqueado nas grades de escolha -- mesmo cadeado do bau trancado */
.opcao.heroiBloq, .heroiCard.heroiBloq{ position:relative; }
.opcao.heroiBloq img{ opacity:.5; }
.opcao.heroiBloq::after, .opcao.heroiBloq.sel::after{ top:auto; border-radius:0; content:''; position:absolute; right:4px; bottom:4px; width:18px; height:21px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 12 14%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%223%22 y=%220%22 width=%226%22 height=%221%22 fill=%22%232a2118%22/%3E%3Crect x=%222%22 y=%221%22 width=%222%22 height=%226%22 fill=%22%232a2118%22/%3E%3Crect x=%228%22 y=%221%22 width=%222%22 height=%226%22 fill=%22%232a2118%22/%3E%3Crect x=%224%22 y=%221%22 width=%224%22 height=%221%22 fill=%22%23d5d9e0%22/%3E%3Crect x=%223%22 y=%222%22 width=%221%22 height=%225%22 fill=%22%23b8bcc4%22/%3E%3Crect x=%228%22 y=%222%22 width=%221%22 height=%225%22 fill=%22%238b909a%22/%3E%3Crect x=%220%22 y=%227%22 width=%2212%22 height=%227%22 fill=%22%232a2118%22/%3E%3Crect x=%221%22 y=%228%22 width=%2210%22 height=%225%22 fill=%22%23e8a92a%22/%3E%3Crect x=%221%22 y=%228%22 width=%2210%22 height=%221%22 fill=%22%23ffe27a%22/%3E%3Crect x=%221%22 y=%2212%22 width=%2210%22 height=%221%22 fill=%22%23b9831f%22/%3E%3Crect x=%225%22 y=%229%22 width=%222%22 height=%222%22 fill=%22%232a2118%22/%3E%3Crect x=%225.5%22 y=%2211%22 width=%221%22 height=%221%22 fill=%22%232a2118%22/%3E%3C/svg%3E") center/contain no-repeat; image-rendering:pixelated; filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)); }

/* tela "Plano Pro ativado / Teste gratis ativado" (billingMostrarCompraOk) */
.compraOkPalco{ flex:none; display:flex; justify-content:center; margin-bottom:6px; }
.compraOkPalco img{ width:112px; height:112px; image-rendering:pixelated; filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)); }

/* linha do tempo na tela de planos */
.pwTL{ margin:0 0 12px; padding:0 12px; }
.pwTL .pwNRow{ padding:7px 0; gap:12px; }
.pwTL .pwNIc{ width:34px; height:34px; border-radius:10px; }
.pwTL .pwNIc svg{ width:19px; height:19px; }
.pwTL .pwNTxt b{ font-size:14px; }
.pwTL .pwNTxt span{ font-size:12px; }

.pwPlano .pwZero{ display:none; }
.pwPlano.comTrial .pwZero{ display:flex; flex-direction:column; align-items:flex-end; }
.pwPlano.comTrial .pwPlanoPreco:not(.pwZero){ display:none; }

/* linha do tempo no estilo Skillion: sem cartao, icones vazados verdes, conector vertical. Cores fixas (nao seguem o tema do app) */
.pwTL{ margin-top:10px !important; background:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; padding:0 4px; margin:0 0 14px; border-radius:0; gap:0; }
.pwTL .pwNRow{ position:relative; align-items:flex-start; border-bottom:none; padding:0 0 14px; gap:14px; }
.pwTL .pwNRow:last-child{ padding-bottom:0; }
.pwTL .pwNIc{ width:40px; height:40px; border-radius:12px; background:rgba(0,0,0,.22); border:2px solid #A6E08B; color:#A6E08B; box-sizing:border-box; }
.pwTL .pwNIc svg{ width:20px; height:20px; }
.pwTL .pwNRow:not(:last-child)::after{ content:''; position:absolute; left:19px; top:42px; bottom:2px; width:2px; background:#A6E08B; border-radius:2px; }
.pwTL .pwNTxt{ padding-top:0; }
.pwTL .pwNTxt b{ font-size:16px; line-height:1.2; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.pwTL .pwNTxt span{ font-size:13px; color:#E6E6EE; text-shadow:0 1px 3px rgba(0,0,0,.7); }
/* botao Pro na barra de estagio (plano gratis, 10/10) */
.estFlut[data-pro]{ pointer-events:auto; cursor:pointer; padding:7px 14px; border-radius:999px; background:#A6E08B; border:1px solid rgba(0,0,0,.25); box-shadow:0 2px 10px rgba(0,0,0,.35); }
.estFlut[data-pro] .estFlutTxt{ color:#1C1C1C !important; font-weight:700; }
.estFlut[data-pro] .estFlutBar{ display:none; }

.paywallOverlay{ --pw-accent:#FAFAFA; --pw-panel:#323232; --pw-panel2:#3D3D3D; --pw-line:#5C5C5C; --pw-muted:#D8D8D8; color:#FAFAFA; }