/* =========================================================
   REDESENHO (out 2026): acabamento limpo, identidade do jogo
   - Base calma: fundo azul-noite da arena (escuro) ou azul-gelo
     (claro), cartões lisos sem bordas, cantos generosos, muito ar.
   - Identidade do Smashing Four: títulos na letra do jogo (Lilita
     One), botão principal dourado-mel em cápsula, azul da arena e as
     cores das raridades (prata, dourado, roxo).
   Carrega depois de style.css e só substitui o que muda: apagar este
   ficheiro (e a linha no index.html) volta ao visual anterior.
   ========================================================= */

:root{
    --rd-azul:#1C82CF;
    --rd-mel:#F2B635;
    --rd-mel-escuro:#A87412;
    --rd-mel-texto:#3B2500;
    --rd-verde:#3FAE2A;
    --rd-prata:#C7CCD3;
    --rd-roxo:#B07CFF;
    --rd-raio:24px;

    /* tema escuro: azul-noite */
    --bg-body-start:#0F1C2E;
    --bg-body-end:#09121F;
    --bg-nebula:rgba(28,130,207,.20);
    --bg-star:transparent;
    --bg-star-glow:transparent;
    --bg-ring:transparent;
    --text-primary:#FFFFFF;
    --text-secondary:#8FA3BC;
    --card-bg-start:#14243A;
    --card-bg-end:#14243A;
    --card-border:#22364F;
    --input-bg:#1B2E47;
    --surface-bg:#1B2E47;
    --surface-bg-alt:#14243A;
    --nav-bg:rgba(20,36,58,.94);
    --nav-border:transparent;
    --shadow-color:rgba(3,8,16,.45);
    --heading-accent:#FFFFFF;
    --gold:#F2B635;
    --gold-dim:rgba(242,182,53,.14);
}

[data-theme="light"]{
    --bg-body-start:#F4F7FB;
    --bg-body-end:#E8EFF7;
    --bg-nebula:rgba(28,130,207,.10);
    --text-primary:#0B1622;
    --text-secondary:#56677E;
    --card-bg-start:#FFFFFF;
    --card-bg-end:#FFFFFF;
    --card-border:#E1E8F1;
    --input-bg:#EEF3F9;
    --surface-bg:#EEF3F9;
    --surface-bg-alt:#F6F9FC;
    --nav-bg:rgba(255,255,255,.95);
    --shadow-color:rgba(11,22,34,.08);
    --heading-accent:#0B1622;
    --gold:#8a5f00; /* dourado como texto: contraste ≥ 4,5 */
    --gold-dim:rgba(200,150,12,.12);
}

/* Fundo: só a luz azul da arena no topo, sem astro nem anéis */
body::before{
    background:
        radial-gradient(ellipse 90% 45% at 50% 0%, var(--bg-nebula), transparent 70%),
        linear-gradient(to bottom, var(--bg-body-start), var(--bg-body-end));
    animation:none;
}
body::after{ background:var(--bg-grain); background-size:160px 160px; -webkit-mask-image:none; mask-image:none; opacity:.6; }

/* ---------- Títulos: a letra do jogo ---------- */
h1, h2{
    font-family:'Lilita One', 'Baloo 2', 'Nunito', sans-serif;
    font-weight:400;
    letter-spacing:.2px;
}
h1{ color:var(--text-primary); }
h2{ color:var(--heading-accent); }
.app-title{ color:var(--text-primary); }

/* ---------- Cartões lisos ---------- */
.card,
.hero-card,
.resultado-item,
.guide-entry-card,
.settings-group{
    background:var(--card-bg-start) !important;
    border:none !important;
    border-radius:var(--rd-raio);
    box-shadow:none;
}
[data-theme="light"] .card,
[data-theme="light"] .hero-card,
[data-theme="light"] .resultado-item,
[data-theme="light"] .guide-entry-card,
[data-theme="light"] .settings-group{
    box-shadow:0 1px 2px rgba(11,22,34,.05), 0 8px 24px rgba(11,22,34,.04);
}
.card::before{ display:none; }

/* ---------- Rótulos em frase normal ("Nível atual") ---------- */
label:not(.lembrar-dados):not(.pitch-consent):not(.ritmo-linha-rotulo):not(.calc-ritmo):not(.ritmo-campo-linha):not(.sim-rotulo){
    text-transform:lowercase;
    letter-spacing:0;
    font-size:var(--fs-base);
    font-weight:700;
    color:var(--text-secondary);
    margin-bottom:8px;
}
label:not(.lembrar-dados):not(.pitch-consent):not(.ritmo-linha-rotulo):not(.calc-ritmo):not(.ritmo-campo-linha):not(.sim-rotulo)::first-letter{
    text-transform:uppercase;
}
label.em-foco{ color:var(--gold) !important; }

/* ---------- Campos cheios, sem contorno ---------- */
input,
select,
textarea,
.tema-comum input,
.tema-comum select,
[data-theme="light"] .tema-comum input,
[data-theme="light"] .tema-comum select{
    background:var(--input-bg);
    border:2px solid transparent;
    border-radius:16px;
    box-shadow:none;
}
input:focus,
select:focus,
textarea:focus{
    border-color:var(--rd-mel);
    box-shadow:0 0 0 4px rgba(242,182,53,.15);
}
input::placeholder{ color:var(--text-secondary); opacity:.7; }

/* ---------- Raridade: cápsula com a cor da raridade escolhida ---------- */
.rarity-segmented{
    gap:4px;
    padding:4px;
    border-radius:999px;
    background:var(--input-bg);
}
.rarity-seg-btn{
    border:none !important;
    border-radius:999px !important;
    background:transparent !important;
    box-shadow:none !important;
    color:var(--text-secondary);
    text-transform:lowercase;
    font-weight:800;
}
.rarity-seg-btn::first-letter{ text-transform:uppercase; }
.rarity-seg-btn.raridade-comum.active{ background:var(--rd-prata) !important; color:#1E2833 !important; }
.rarity-seg-btn.raridade-raro.active{ background:var(--rd-mel) !important; color:var(--rd-mel-texto) !important; }
.rarity-seg-btn.raridade-epico.active{ background:var(--rd-roxo) !important; color:#1F0B3A !important; }

/* ---------- − / + redondos ---------- */
.stepper-btn,
:root:not([data-theme="light"]) .stepper-btn,
[data-theme="light"] .stepper-btn{
    border-radius:50%;
    background:var(--input-bg);
    color:var(--text-primary);
    box-shadow:none;
}
.stepper-btn:hover,
:root:not([data-theme="light"]) .stepper-btn:hover{ background:var(--card-border); }

/* ---------- Botão principal: dourado-mel em cápsula (o do jogo) ---------- */
.btn-primary,
.premium-btn{
    border:none;
    border-radius:999px;
    background:linear-gradient(180deg, #F7C95A, var(--rd-mel));
    color:var(--rd-mel-texto);
    font-family:'Lilita One', 'Nunito', sans-serif;
    font-weight:400;
    letter-spacing:.4px;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 var(--rd-mel-escuro);
    text-shadow:none;
}
.btn-primary:active,
.premium-btn:active{ transform:translateY(2px); box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 2px 0 var(--rd-mel-escuro); }
.tema-comum .btn-primary,
.tema-raro .btn-primary,
.tema-epico .btn-primary,
[data-theme="light"] .tema-comum .btn-primary,
[data-theme="light"] .tema-raro .btn-primary,
[data-theme="light"] .tema-epico .btn-primary{
    box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 var(--rd-mel-escuro);
}
/* sem o brilho colorido à volta de cada botão (o ".tema-comum button" do
   style.css). Com a força mínima para o vencer: antes era mais forte e
   apagava também o contorno de "escolhido" (plano e pagamento no Premium,
   ordenar na Coleção) e o brilho das medalhas ganhas. A 2.ª linha vence o
   '[data-theme="light"] .tema-comum button' (sombra quadrada na barra de
   baixo no tema claro) */
:is(.tema-comum, .tema-raro, .tema-epico) button:where(:not(.btn-primary):not(.premium-btn)),
:is([data-theme="light"]) :is(.tema-comum, .tema-raro, .tema-epico) button:where(:not(.btn-primary):not(.premium-btn)){ box-shadow:none; }

/* ---------- Separadores (Estatísticas / Comparar…) em cápsula ---------- */
.mode-tabs{
    padding:4px;
    gap:4px;
    border:none;
    border-radius:999px;
    background:var(--input-bg);
}
.mode-tab{
    border:none !important;
    border-radius:999px !important;
    background:transparent !important;
    box-shadow:none !important;
    color:var(--text-secondary);
}
.mode-tab.active{
    background:var(--card-bg-start) !important;
    color:var(--text-primary) !important;
}
:root:not([data-theme="light"]) .mode-tab.active{ background:#2A4161 !important; }

/* ---------- Barra de baixo: flutua, em cápsula ---------- */
body{ padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px)); }
.bottom-nav{
    left:12px;
    right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    max-width:476px;
    margin:0 auto;
    height:66px;
    padding-bottom:0;
    border:none;
    border-radius:999px;
    background:var(--nav-bg);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 12px 30px var(--shadow-color);
}
.nav-btn-home{
    width:58px;
    height:58px;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 var(--rd-mel-escuro), 0 10px 22px rgba(212,160,23,.35);
    transform:translateY(-14px);
}
.nav-btn-home:active{ transform:translateY(-12px) scale(.96); }
@media (hover:hover){ .nav-btn-home:hover{ transform:translateY(-16px); } }
.nav-btn.active::after{ bottom:6px; }

/* ---------- Resultado: o cartão dourado é a moeda do jogo ---------- */
.resultado-destaque{ border:none !important; border-radius:var(--rd-raio); }
.tituloResultado{ color:var(--text-primary); }
button.partilhar-resultado{
    border:none;
    border-radius:999px;
    background:var(--card-bg-start);
    color:var(--text-primary);
}
[data-theme="light"] button.partilhar-resultado{ box-shadow:0 1px 2px rgba(11,22,34,.06); }
.resultado-item p,
.resultado-par p{ color:var(--gold); }

/* ---------- Heróis da Coleção e do início ---------- */
button.meu-heroi{ border:none; background:var(--card-bg-start); border-radius:18px; }
button.meu-heroi.pronto{ box-shadow:inset 0 0 0 2px var(--rd-verde); }
.colecao-livre{ border:none; background:var(--card-bg-start); }

/* ---------- Sequência no topo ---------- */
.streak-indicator{
    border:none !important;
    border-radius:999px;
    background:var(--card-bg-start) !important;
    color:var(--text-primary) !important;
}

/* ---------- Guia: título como os outros, dicas em cartões lisos ---------- */
.guide-title,
.guide-title span{ color:var(--text-primary); }
.guide-tip{
    border:none !important;
    background:var(--card-bg-start) !important;
    border-radius:20px;
    box-shadow:none;
}
[data-theme="light"] .guide-tip{ box-shadow:0 1px 2px rgba(11,22,34,.05); }
.dica-ecra{ border:none; background:var(--card-bg-start); border-radius:18px; }

/* "Os teus heróis": título na letra do jogo, em frase normal */
.meus-herois-topo{ text-transform:none; letter-spacing:.2px; }
.meus-herois-topo > span{ font-family:'Lilita One', 'Nunito', sans-serif; font-size:var(--fs-md); font-weight:400; color:var(--text-primary); }
.meus-herois-topo button{ font-family:'Nunito', sans-serif; font-size:var(--fs-sm); font-weight:800; text-transform:none; }

/* =========================================================
   ACERTOS (v80)
   ========================================================= */
/* Textos de introdução: texto solto, sem caixa (antes ganhavam um
   fundo branco colado ao texto) */
.card.intro-simples{
    background:transparent !important;
    box-shadow:none !important;
    padding:0 2px !important;
    margin-bottom:16px;
}
.card.intro-simples p{ color:var(--text-secondary); text-align:left; }

/* Títulos dos ecrãs sempre na cor do texto (Novidades estava azul-petróleo) */
h1.guide-title,
.screen h1.guide-title,
[data-theme="light"] h1.guide-title{ color:var(--text-primary) !important; }

/* Separadores dentro de um separador (Classificações › Heróis /
   Esquadrões / O meu deck): mais leves que os de cima, sublinhado */
#deckGuidesModeTabs{
    background:transparent;
    padding:0;
    gap:0;
    border-radius:0;
    border-bottom:1px solid var(--card-border) !important;
}
#deckGuidesModeTabs .mode-tab{
    border-radius:0 !important;
    background:transparent !important;
    padding:10px 4px 12px;
    position:relative;
}
#deckGuidesModeTabs .mode-tab.active{
    background:transparent !important;
    color:var(--text-primary) !important;
}
#deckGuidesModeTabs .mode-tab.active::after{
    content:"";
    position:absolute;
    left:22%;
    right:22%;
    bottom:-1px;
    height:3px;
    border-radius:3px;
    background:var(--rd-mel);
}

/* Escolher raridade / arena (‹ NORMAL ›): cápsula lisa */
.stepper-nav-display{
    border:none !important;
    border-radius:18px !important;
    background:var(--card-bg-start) !important;
    box-shadow:none !important;
}
[data-theme="light"] .stepper-nav-display{ box-shadow:0 1px 2px rgba(11,22,34,.06) !important; }
.stepper-nav-label{ color:var(--text-primary) !important; }
.stepper-nav button,
.stepper-nav-btn{
    border:none !important;
    border-radius:50% !important;
    background:var(--input-bg) !important;
    color:var(--text-primary) !important;
    box-shadow:none !important;
}

/* O meu deck: rótulos pequenos e escolha com letra normal */
.deck-slot label{ font-size:var(--fs-sm) !important; }
.deck-slot select{ font-size:16px; font-weight:700; padding:12px 14px; }

/* Coleção: heróis em cartões lisos; "pronto" com o verde do jogo */
.roadmap-item{
    background:var(--card-bg-start) !important;
    border:none !important;
    border-radius:20px !important;
    box-shadow:none;
}
[data-theme="light"] .roadmap-item{ box-shadow:0 1px 2px rgba(11,22,34,.05), 0 6px 18px rgba(11,22,34,.04); }
.roadmap-item.pronto{ box-shadow:inset 0 0 0 2px var(--rd-verde) !important; }
.roadmap-item.pronto .roadmap-priority{ background:var(--rd-verde) !important; color:#fff !important; }
.roadmap-priority{ background:linear-gradient(180deg, #F7C95A, var(--rd-mel)) !important; color:var(--rd-mel-texto) !important; }
.share-progress-btn{
    border:none !important;
    border-radius:999px !important;
    background:var(--card-bg-start) !important;
    color:var(--text-primary) !important;
}
[data-theme="light"] .share-progress-btn{ box-shadow:0 1px 2px rgba(11,22,34,.06); }
.roadmap-sort-options{ background:var(--input-bg) !important; }
.roadmap-sort-option.active{ background:var(--card-bg-start) !important; color:var(--text-primary) !important; }
:root:not([data-theme="light"]) .roadmap-sort-option.active{ background:#2A4161 !important; }
.colecao-rapida-chip{
    border:none !important;
    border-radius:999px !important;
    background:var(--input-bg) !important;
    color:var(--text-primary) !important;
}

/* Início sem conta: uma linha arrumada (ícone, título, frase, seta) */
button.meus-herois-vazio{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 14px 14px 12px;
    border:none;
    border-radius:20px;
    background:var(--card-bg-start);
    color:var(--text-primary);
}
[data-theme="light"] button.meus-herois-vazio{ box-shadow:0 1px 2px rgba(11,22,34,.05); }
button.meus-herois-vazio::after{ content:none; }
.mhv-icone{
    flex:none;
    width:40px;
    height:40px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gold-dim);
    color:var(--gold);
}
.mhv-texto{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mhv-texto strong{ font-size:var(--fs-base); font-weight:800; }
.mhv-texto small{ font-size:var(--fs-sm); font-weight:600; color:var(--text-secondary); }
.mhv-seta{ flex:none; color:var(--text-secondary); }

/* Convites do Premium (Comparar, Guia, Classificações, resultado):
   cartão liso com um fio dourado fino, título na cor do texto */
.premium-card.vitrine,
.calc-upsell{
    background:var(--card-bg-start) !important;
    border:none !important;
    border-radius:var(--rd-raio) !important;
    box-shadow:inset 0 0 0 1.5px rgba(242,182,53,.45) !important;
}
[data-theme="light"] .premium-card.vitrine,
[data-theme="light"] .calc-upsell{
    box-shadow:inset 0 0 0 1.5px rgba(242,182,53,.55), 0 8px 24px rgba(11,22,34,.06) !important;
}
.vitrine-titulo,
.calc-upsell strong{
    font-family:'Lilita One', 'Nunito', sans-serif;
    font-weight:400;
    color:var(--text-primary) !important;
}
.vitrine-texto,
.calc-upsell p{ color:var(--text-secondary) !important; }
.vitrine-selo{
    border:none !important;
    background:var(--gold-dim) !important;
    color:var(--gold) !important;
}

/* Botões secundários (Partilhar as estatísticas…): cápsula lisa */
.compare-hero-btn{
    border:none !important;
    border-radius:999px !important;
    background:var(--input-bg) !important;
    color:var(--text-primary) !important;
    box-shadow:none !important;
}

/* Tema claro: números em azul-noite (o dourado escuro parecia castanho);
   o dourado fica para o cartão do resultado e para os botões */
[data-theme="light"] .stat-value,
[data-theme="light"] .resultado-item p,
[data-theme="light"] .resultado-par p{ color:var(--text-primary) !important; }

/* Cartão do Guia no início e selos "2 dicas abertas" */
.guide-entry-text h2,
.guide-entry-text h2 span{ color:var(--text-primary) !important; }
.premium-lock-badge{
    border:none !important;
    background:var(--gold-dim) !important;
    color:var(--gold) !important;
}
.guide-entry-icon{ background:var(--input-bg) !important; border:none !important; }

/* Números das dicas do Guia: dourado-mel do jogo */
.guide-tip-number{
    background:linear-gradient(180deg, #F7C95A, var(--rd-mel)) !important;
    color:var(--rd-mel-texto) !important;
    border:none !important;
    box-shadow:none !important;
}

/* Definições: opções de tema e som (cápsulas lisas, a ativa em mel) */
.theme-option,
.sound-option{
    border:none !important;
    background:var(--input-bg) !important;
    box-shadow:none !important;
}
.theme-option.active,
.sound-option.active{
    background:linear-gradient(180deg, #F7C95A, var(--rd-mel)) !important;
    color:var(--rd-mel-texto) !important;
    box-shadow:0 2px 0 var(--rd-mel-escuro) !important;
}

/* Conta: Iniciar sessão / Criar conta como os outros separadores */
.auth-tabs{
    padding:4px;
    gap:4px;
    border:none !important;
    border-radius:999px !important;
    background:var(--input-bg) !important;
}
.auth-tab{
    border:none !important;
    border-radius:999px !important;
    background:transparent !important;
    box-shadow:none !important;
    color:var(--text-secondary) !important;
}
.auth-tab.active{
    background:var(--card-bg-start) !important;
    color:var(--text-primary) !important;
}
:root:not([data-theme="light"]) .auth-tab.active{ background:#2A4161 !important; }
[data-theme="light"] .auth-tab.active{ box-shadow:0 1px 2px rgba(11,22,34,.08) !important; }

/* Setas de voltar na cor do texto */
.guide-back-btn,
button.guide-back-btn{ color:var(--text-primary) !important; }

/* Conquistas: prémio dos 30 dias como os outros convites; títulos das
   secções iguais aos das Definições */
.premio-card{
    background:var(--card-bg-start) !important;
    border:none !important;
    border-radius:var(--rd-raio) !important;
    box-shadow:inset 0 0 0 1.5px rgba(242,182,53,.45) !important;
}
[data-theme="light"] .premio-card{ box-shadow:inset 0 0 0 1.5px rgba(242,182,53,.55), 0 8px 24px rgba(11,22,34,.06) !important; }
.premio-card-topo,
.premio-card-topo *{ color:var(--text-primary); }
h2.conquistas-secao{
    font-family:'Nunito', sans-serif !important;
    font-size:var(--fs-base) !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    text-transform:none;
    color:var(--text-primary) !important;
}
button.mini-btn,
button.lang-toggle{
    border:none !important;
    border-radius:999px !important;
    background:var(--input-bg) !important;
    color:var(--text-primary) !important;
    box-shadow:none !important;
}

/* Seletor de herói (todos): campo cheio sem contorno; no O meu deck,
   letra mais pequena para caber em duas colunas */
.hero-picker-toggle{
    border:2px solid transparent !important;
    border-radius:16px !important;
    background:var(--input-bg) !important;
    box-shadow:none !important;
}
.deck-slot .hero-picker-toggle{ padding:12px 12px; }
.deck-slot .hero-picker-name{ font-size:var(--fs-base) !important; }

/* =========================================================
   PÁGINA PREMIUM com as cores novas
   A carta holográfica, o orbe e os planos em "bilhete" ficam (são os
   objetos de jogo da página); o fundo e as superfícies passam do roxo
   para o azul-noite da arena (escuro) e azul-gelo (claro).
   ========================================================= */
.pitch{
    --p-ink:#09121F;
    --p-night:#14304F;
    --p-gold:#F2B635;
    --p-gold-deep:#A87412;
    --p-text:#FFFFFF;
    --p-muted:#8FA3BC;
}
html:has(#premiumPitchScreen:not(.hidden)){ background:#09121F; }
.pitch-stage::after{ background:radial-gradient(ellipse at center, rgba(28,130,207,.5), transparent 70%); }
.pitch-promise-icon{
    background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), rgba(28,130,207,.28));
}
button.pitch-plan{
    background:linear-gradient(170deg, #1C3554, #12233A);
    box-shadow:inset 0 0 0 2px rgba(143,163,188,.22);
}
button.pitch-plan-epic{
    background:
        linear-gradient(120deg, rgba(79,240,255,.16), rgba(255,62,200,.14), rgba(255,201,60,.18), rgba(79,240,255,.16)),
        linear-gradient(170deg, #1F3C5E, #12233A);
    background-size:300% 100%, 100% 100%;
}
button.pitch-plan[aria-checked="true"]{ box-shadow:inset 0 0 0 3px var(--p-gold), inset 0 0 24px rgba(242,182,53,.22); }
button.pitch-method,
.pitch-consent,
.pw-stat{
    background:rgba(255,255,255,.05);
    box-shadow:inset 0 0 0 1.5px rgba(143,163,188,.22);
}
button.pitch-method[aria-checked="true"]{ background:rgba(242,182,53,.1); box-shadow:inset 0 0 0 2.5px var(--p-gold); }

/* Tema claro: manhã na arena, em azul-gelo */
[data-theme="light"] .pitch{
    --p-text:#0B1622;
    --p-muted:#56677E;
    --p-ui-gold:#8a5f00;
    background:
        radial-gradient(ellipse 90% 40% at 50% 16%, rgba(242,182,53,.30) 0%, transparent 70%),
        radial-gradient(ellipse 120% 60% at 50% 0%, #FFFFFF 0%, #F1F6FC 55%, #E6EEF7 100%);
}
html[data-theme="light"]:has(#premiumPitchScreen:not(.hidden)){ background:#E6EEF7; }
[data-theme="light"] .pitch-stage::after{ background:radial-gradient(ellipse at center, rgba(28,130,207,.25), transparent 70%); }
[data-theme="light"] .pitch-title{ text-shadow:none; }
[data-theme="light"] .pitch-promise-icon{
    background:#FFFFFF;
    box-shadow:inset 0 0 0 1.5px rgba(242,182,53,.5), 0 3px 8px rgba(11,22,34,.06);
}
[data-theme="light"] button.pitch-plan{
    background:#FFFFFF;
    box-shadow:inset 0 0 0 2px #E1E8F1, 0 4px 12px rgba(11,22,34,.06);
}
[data-theme="light"] button.pitch-plan-epic{
    background:
        linear-gradient(120deg, rgba(79,240,255,.18), rgba(255,62,200,.12), rgba(255,201,60,.22), rgba(79,240,255,.18)),
        #FFFFFF;
    background-size:300% 100%, 100% 100%;
}
[data-theme="light"] button.pitch-plan[aria-checked="true"]{ box-shadow:inset 0 0 0 3px var(--rd-mel), 0 6px 18px rgba(242,182,53,.22); }
[data-theme="light"] button.pitch-method,
[data-theme="light"] .pitch-consent{
    background:#FFFFFF;
    box-shadow:inset 0 0 0 1.5px #E1E8F1, 0 3px 10px rgba(11,22,34,.04);
}
[data-theme="light"] button.pitch-method[aria-checked="true"]{ background:#FFF9EA; box-shadow:inset 0 0 0 2.5px var(--rd-mel); }
[data-theme="light"] .pitch-method-icon{ background:#EEF3F9; }
[data-theme="light"] .pitch-active{ background:#FFF9EA; box-shadow:inset 0 0 0 2px rgba(242,182,53,.6); }
[data-theme="light"] .pitch-card{ box-shadow:0 22px 44px rgba(11,22,34,.25), 0 0 36px rgba(28,130,207,.25); }

/* =========================================================
   ACERTOS (v82)
   ========================================================= */
/* Regra de Ouro: sem o espaço a mais em cima do título; cartão como
   os convites (fio dourado fino) */
.guide-golden-rule{
    background:var(--card-bg-start) !important;
    border:none !important;
    border-radius:var(--rd-raio) !important;
    box-shadow:inset 0 0 0 1.5px rgba(242,182,53,.45);
}
.guide-golden-rule h3{
    margin-top:0;
    font-family:'Lilita One', 'Nunito', sans-serif;
    font-weight:400;
    color:var(--text-primary) !important;
}

/* Partilhar a app: cartão liso (sem o roxo antigo e as manchas de luz) */
.share-card{
    background:var(--card-bg-start) !important;
    border:none !important;
    border-radius:var(--rd-raio) !important;
    box-shadow:none !important;
}
[data-theme="light"] .share-card{ box-shadow:0 1px 2px rgba(11,22,34,.05), 0 8px 24px rgba(11,22,34,.04) !important; }
.share-orb{ display:none !important; }
.share-title{ color:var(--text-primary) !important; }
.share-desc{ color:var(--text-secondary) !important; }
.share-social-btn{
    border:none !important;
    border-radius:16px !important;
    background:var(--input-bg) !important;
    box-shadow:none !important;
}
.share-app-icon{ background:var(--input-bg) !important; border:none !important; }

/* Tema claro sem castanhos: o dourado fica só nos preenchimentos (botões
   mel, moeda do resultado); textos e realces passam ao azul da arena */
[data-theme="light"]{
    --gold:#1C6FB0;
    --gold-dim:rgba(28,111,176,.10);
}
[data-theme="light"] .nav-btn.active{ color:#1C6FB0; }
[data-theme="light"] #premiumBtnNav{ color:var(--text-primary); }
[data-theme="light"] .streak-indicator{ color:var(--text-primary) !important; }
[data-theme="light"] .pitch{ --p-ui-gold:#1C6FB0; }
[data-theme="light"] .pitch-consent input[type="checkbox"],
[data-theme="light"] input[type="checkbox"]{ accent-color:#1C6FB0; }
/* números redondos que eram dourados com texto escuro: ficam mel */
.tour-passos li::before{ background:var(--rd-mel) !important; color:var(--rd-mel-texto) !important; }
/* o fio dos convites no claro também deixa de puxar ao castanho */
[data-theme="light"] .premium-card.vitrine,
[data-theme="light"] .calc-upsell,
[data-theme="light"] .premio-card,
[data-theme="light"] .guide-golden-rule{
    box-shadow:inset 0 0 0 1.5px rgba(242,182,53,.6), 0 8px 24px rgba(11,22,34,.06) !important;
}
.share-app-icon{
    width:64px;
    height:64px;
    margin:0 auto 12px !important;
    border-radius:20px;
    display:flex !important;
    align-items:center;
    justify-content:center;
}

/* =========================================================
   ACERTOS (v83)
   ========================================================= */
/* MB WAY: o ícone volta a ter o vermelho da marca no tema claro */
[data-theme="light"] .pitch-method-icon.pitch-method-mbway{ background:#d6001c; color:#fff; }

/* O meu deck (tema claro): os seletores ficam fora de um cartão, por
   isso precisam de fundo branco e sombra para se verem */
[data-theme="light"] .deck-slot .hero-picker-toggle{
    background:#FFFFFF !important;
    box-shadow:0 1px 2px rgba(11,22,34,.06), 0 4px 14px rgba(11,22,34,.05) !important;
}

/* Sem o "elástico" do iPhone ao arrastar: quando tudo cabe no ecrã, a
   página fica parada; quando não cabe, desliza sem esticar */
html,
body{ overscroll-behavior-y:none; }

/* Atrás da barra de baixo não se vê a página: a barra ocupa a largura
   toda até ao fundo do ecrã, na cor do fundo, e a cápsula "flutuante"
   é desenhada dentro dela */
.bottom-nav{
    left:0;
    right:0;
    bottom:0;
    max-width:none;
    margin:0;
    height:calc(76px + env(safe-area-inset-bottom, 0px));
    padding:0 calc(12px + max(0px, (100vw - 500px) / 2)) calc(10px + env(safe-area-inset-bottom, 0px));
    border-radius:0;
    background:var(--bg-body-end);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:none;
    isolation:isolate;
}
.bottom-nav::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    left:calc(12px + max(0px, (100vw - 500px) / 2));
    right:calc(12px + max(0px, (100vw - 500px) / 2));
    border-radius:999px;
    background:var(--card-bg-start);
    box-shadow:0 10px 26px var(--shadow-color);
    pointer-events:none;
}
[data-theme="light"] .bottom-nav::before{ box-shadow:0 1px 2px rgba(11,22,34,.06), 0 10px 26px rgba(11,22,34,.08); }

/* =========================================================
   ACERTOS (v84)
   ========================================================= */
/* Fundo liso na metade de baixo: a faixa por trás da barra fica da
   mesma cor e deixa de se ver como um retângulo */
body::before{
    background:
        radial-gradient(ellipse 90% 45% at 50% 0%, var(--bg-nebula), transparent 70%),
        linear-gradient(to bottom, var(--bg-body-start) 0%, var(--bg-body-end) 45%, var(--bg-body-end) 100%);
}

/* Só o espaço que a barra precisa, sem sobra (a página deixa de
   deslizar para mostrar espaço vazio) */
body{ padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }
.definicoes-rodape{ margin-bottom:0 !important; padding-bottom:0 !important; }

/* Regra de Ouro: moldura dourada com destaque */
.guide-golden-rule{
    position:relative;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(242,182,53,.20), transparent 60%),
        var(--card-bg-start) !important;
    box-shadow:
        inset 0 0 0 2px var(--rd-mel),
        0 0 0 4px rgba(242,182,53,.14),
        0 10px 30px rgba(242,182,53,.18) !important;
}
[data-theme="light"] .guide-golden-rule{
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(242,182,53,.22), transparent 60%),
        #FFFDF6 !important;
    box-shadow:
        inset 0 0 0 2px var(--rd-mel),
        0 0 0 4px rgba(242,182,53,.16),
        0 10px 30px rgba(242,182,53,.20) !important;
}
.guide-golden-rule h3{ color:var(--text-primary) !important; font-size:var(--fs-lg); }

/* Tutorial: o anel abre a velocidade constante (sem abrandar no fim).
   Fica na caixa final e encolhe com transform, que o iPhone anima sem
   solavancos (animar largura/altura ia aos saltos) */
.tour-anel{
    left:var(--x1); top:var(--y1); width:var(--w1); height:var(--h1);
    transform-origin:0 0;
    will-change:transform, opacity;
    -webkit-animation:tour-anel-flui 1.3s linear infinite;
    animation:tour-anel-flui 1.3s linear infinite;
}
@keyframes tour-anel-flui{
    0%{ transform:translate(var(--tx), var(--ty)) scale(var(--sx), var(--sy)); opacity:1; }
    70%{ opacity:.9; }
    100%{ transform:none; opacity:0; }
}
@-webkit-keyframes tour-anel-flui{
    0%{ -webkit-transform:translate(var(--tx), var(--ty)) scale(var(--sx), var(--sy)); opacity:1; }
    70%{ opacity:.9; }
    100%{ -webkit-transform:none; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
    .tour-anel{ -webkit-animation:tour-anel-flui 1.6s linear infinite; animation:tour-anel-flui 1.6s linear infinite; }
}

/* Tutorial (só no escuro; o claro fica como estava): o ecrã por trás escurece menos (lê-se o título da
   página) e o cartão destaca-se com título maior e contorno claro */
:root:not([data-theme="light"]) .tour-guiado.sem-foco{ background:rgba(4,10,20,.45); }
:root:not([data-theme="light"]) .tour-foco{ box-shadow:0 0 0 9999px rgba(4,10,20,.42); }
:root:not([data-theme="light"]) .tour-folha{
    background:#1B2E47 !important;
    border:none !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 18px 44px rgba(0,0,0,.45) !important;
}
:root:not([data-theme="light"]) .tour-folha h2{ font-size:var(--fs-lg) !important; line-height:1.2; color:#FFFFFF !important; margin:0 0 6px !important; }
:root:not([data-theme="light"]) .tour-folha p{ color:#C3D1E2 !important; }
:root:not([data-theme="light"]) .tour-folha-icone{ background:rgba(242,182,53,.16) !important; }

/* Coroa do Premium (só aparece a quem não é Premium): um brilho passa
   por ela a cada minuto, com um pequeno salto, para chamar a atenção */
.coroa-brilho{ position:relative; display:block; line-height:0; font-style:normal; }
.coroa-brilho::after{
    content:"";
    position:absolute;
    inset:-3px 0;
    pointer-events:none;
    -webkit-mask:url("icons/ui/premium@2x.webp") center / contain no-repeat;
    mask:url("icons/ui/premium@2x.webp") center / contain no-repeat;
    background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%) no-repeat;
    background-size:300% 100%;
    background-position:120% 0;
    animation:coroa-brilho 60s ease-in-out 3s infinite;
}
#premiumBtnNav .nav-icon{ animation:coroa-salto 60s ease-in-out 3s infinite; }
@keyframes coroa-brilho{
    0%{ background-position:120% 0; }
    2.5%, 100%{ background-position:-20% 0; }
}
@keyframes coroa-salto{
    0%, 3%, 100%{ transform:scale(1); }
    1%{ transform:scale(1.18) rotate(-6deg); }
    2%{ transform:scale(1.05) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce){
    .coroa-brilho::after, #premiumBtnNav .nav-icon{ animation:none; }
}

/* Coroa: no mesmo momento do brilho, um halo dourado abre-se por trás
   (no claro o brilho branco sozinho quase não se via sobre fundo branco) */
.coroa-brilho{ isolation:isolate; }
.coroa-brilho::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:50%; top:50%;
    width:48px; height:48px;
    margin:-24px 0 0 -24px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(242,182,53,.55) 0%, rgba(242,182,53,.25) 45%, rgba(242,182,53,0) 70%);
    box-shadow:0 0 0 2px rgba(242,182,53,.6);
    opacity:0;
    pointer-events:none;
    animation:coroa-halo 60s ease-out 3s infinite;
}
@keyframes coroa-halo{
    0%{ opacity:0; transform:scale(.5); }
    .8%{ opacity:1; transform:scale(1); }
    3.2%{ opacity:0; transform:scale(1.7); }
    100%{ opacity:0; transform:scale(1.7); }
}
[data-theme="light"] .coroa-brilho::before{
    background:radial-gradient(circle, rgba(242,182,53,.85) 0%, rgba(242,182,53,.4) 45%, rgba(242,182,53,0) 72%);
    box-shadow:0 0 0 2.5px #E0A21F;
}
[data-theme="light"] #premiumBtnNav .nav-icon{ filter:drop-shadow(0 1px 3px rgba(168,116,18,.55)); }
@media (prefers-reduced-motion: reduce){ .coroa-brilho::before{ animation:none; } }

/* Resultado: rótulos em letra normal (as maiúsculas espaçadas partiam em
   duas linhas e gritavam mais do que os números) */
.resultado-destaque > span,
.resultado-item h3,
.resultado-par span{
    text-transform:none !important;
    letter-spacing:0 !important;
}
.resultado-destaque > span{ font-size:var(--fs-sm); font-weight:700; }
.resultado-item h3{ font-size:var(--fs-sm) !important; font-weight:700; line-height:1.3; }

/* Mensagem dentro da carta dourada: vidro claro em vez de caixa barrenta */
.resultado-msg{
    background:rgba(255,255,255,.32) !important;
    border:none !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45) !important;
}

/* Guia: seta desenhada em vez do carácter "⌄" */
.guide-tip:not(.guide-tip-locked) .guide-tip-chevron{
    width:22px;
    height:22px;
    font-size:0;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition:transform .25s ease, color .2s ease;
}
.guide-tip.expanded .guide-tip-chevron{ color:var(--rd-azul); }

/* Raridade do herói: pílula com a cor da raridade (igual ao seletor) */
.mini-rarity-tag{
    display:inline-block;
    width:auto;
    padding:4px 11px;
    border-radius:999px;
    text-transform:lowercase !important;
    letter-spacing:0 !important;
    font-size:var(--fs-xs);
    font-weight:800;
    line-height:1.2;
}
.mini-rarity-tag::first-letter{ text-transform:uppercase; }
.mini-rarity-tag.raridade-comum{ background:var(--rd-prata); color:#1E2833 !important; }
.mini-rarity-tag.raridade-raro{ background:var(--rd-mel); color:var(--rd-mel-texto) !important; }
.mini-rarity-tag.raridade-epico{ background:var(--rd-roxo); color:#1F0B3A !important; }

/* Heróis: "Ver habilidade" como os outros campos (liso, sem borda) e
   legenda do gráfico mais discreta */
.ability-toggle{
    border:none !important;
    border-radius:16px !important;
    background:var(--input-bg) !important;
    min-height:52px;
}
.ability-toggle-chevron{
    width:20px;
    height:20px;
    font-size:0;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ability-toggle.expanded .ability-toggle-chevron{ color:var(--rd-azul); }
.hero-curve-gain{ color:var(--text-secondary) !important; font-weight:600 !important; }
.resultado-par span{ display:block; }
.resultado-par span::first-letter{ text-transform:uppercase; }

/* Partilhar a app: o ícone da app e, assim que estiver pronta, a
   imagem que os amigos vão receber (ligeiramente inclinada, como um
   cartão na mão) */
.share-app-icon img{ display:block; width:64px; height:64px; border-radius:16px; }
.share-app-icon.hidden{ display:none !important; }
button.share-previa{
    display:block;
    width:144px;
    margin:0 auto 18px;
    padding:0;
    border:none;
    background:none;
    box-shadow:none;
    cursor:pointer;
    transform:rotate(-3deg);
    transition:transform .25s ease;
}
button.share-previa.hidden{ display:none; }
button.share-previa:active{ transform:rotate(0deg) scale(.97); }
button.share-previa img{
    display:block;
    width:144px;
    height:auto;
    aspect-ratio:1080 / 1350;
    border-radius:16px;
    box-shadow:0 0 0 2px var(--rd-mel), 0 14px 32px rgba(0,0,0,.35);
    animation:previa-entra .35s ease-out;
}
@keyframes previa-entra{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:none; } }
[data-theme="light"] button.share-previa img{ box-shadow:0 0 0 2px var(--rd-mel), 0 14px 32px rgba(15,28,46,.22); }

/* Conquistas: medalhas por ganhar lisas (sem contorno, como os outros
   cartões); só as ganhas levam a moldura da cor do escalão */
button.medalha{ background:var(--card-bg-start) !important; border-radius:20px !important; }
button.medalha:not(.feita){ border-color:transparent !important; }
button.medalha.feita{ border-width:2px !important; box-shadow:0 0 18px color-mix(in srgb, var(--tier) 30%, transparent); }
/* Bronze no claro: cobre vivo em vez de castanho */
[data-theme="light"] button.medalha.bronze{ --tier:#EE8A3C; }
[data-theme="light"] button.medalha.feita .medalha-icone{ background:color-mix(in srgb, var(--tier) 16%, #FFFFFF) !important; }

/* Coroa (v89): a cada 30 segundos, sem anel. No escuro chega o brilho,
   o salto e um halo suave; no claro o halo é maior e mais quente e a
   coroa ganha brilho dourado, para sobressair sobre o branco */
.coroa-brilho::after{ animation:coroa-brilho 30s ease-in-out 3s infinite; }
#premiumBtnNav .nav-icon{ animation:coroa-salto 30s ease-in-out 3s infinite; }
.coroa-brilho::before{
    box-shadow:none !important;
    animation:coroa-halo 30s ease-out 3s infinite;
}
@keyframes coroa-brilho{
    0%{ background-position:120% 0; }
    5%, 100%{ background-position:-20% 0; }
}
@keyframes coroa-salto{
    0%, 6%, 100%{ transform:scale(1); }
    2%{ transform:scale(1.22) rotate(-7deg); }
    4%{ transform:scale(1.06) rotate(3deg); }
}
@keyframes coroa-halo{
    0%{ opacity:0; transform:scale(.5); }
    1.6%{ opacity:1; transform:scale(1.05); }
    6.4%, 100%{ opacity:0; transform:scale(1.6); }
}
[data-theme="light"] .coroa-brilho::before{
    width:64px; height:64px;
    margin:-32px 0 0 -32px;
    background:radial-gradient(circle, rgba(255,196,40,.95) 0%, rgba(255,184,28,.55) 40%, rgba(255,184,28,0) 70%) !important;
}
[data-theme="light"] #premiumBtnNav .nav-icon{ animation:coroa-salto-claro 30s ease-in-out 3s infinite; }
@keyframes coroa-salto-claro{
    0%, 6%, 100%{ transform:scale(1); filter:drop-shadow(0 1px 3px rgba(168,116,18,.55)); }
    2%{ transform:scale(1.26) rotate(-7deg); filter:drop-shadow(0 0 10px rgba(255,190,30,.95)) brightness(1.12); }
    4%{ transform:scale(1.08) rotate(3deg); filter:drop-shadow(0 0 6px rgba(255,190,30,.8)); }
}
@media (prefers-reduced-motion: reduce){
    [data-theme="light"] #premiumBtnNav .nav-icon{ animation:none; }
}

/* Relevo dos cartões (v90): no claro, branco sobre branco não se
   distinguia; agora cada cartão tem um brilho branco no topo e uma
   sombra azulada suave por baixo. No escuro, sombra preta e um fio de
   luz no topo, para os cartões saírem do fundo */
[data-theme="light"] .card:not(.intro-simples):not(.vitrine):not(.premium-card),
[data-theme="light"] .hero-card,
[data-theme="light"] .resultado-item,
[data-theme="light"] .guide-entry-card,
[data-theme="light"] .settings-group,
[data-theme="light"] .guide-tip,
[data-theme="light"] button.medalha:not(.feita){
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        0 0 0 1px rgba(15,28,46,.05),
        0 2px 4px rgba(15,28,46,.05),
        0 10px 24px rgba(15,28,46,.09) !important;
}
:root:not([data-theme="light"]) .card:not(.intro-simples):not(.vitrine):not(.premium-card),
:root:not([data-theme="light"]) .hero-card,
:root:not([data-theme="light"]) .resultado-item:not(.destaque),
:root:not([data-theme="light"]) .guide-entry-card,
:root:not([data-theme="light"]) .settings-group,
:root:not([data-theme="light"]) .guide-tip,
:root:not([data-theme="light"]) button.medalha:not(.feita){
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 2px 4px rgba(0,0,0,.25),
        0 12px 28px rgba(0,0,0,.40) !important;
}
/* As dicas do Guia ainda mais destacadas (são o que se lê ali) */
:root:not([data-theme="light"]) .guide-tip{ background:#172B45 !important; }
[data-theme="light"] .guide-tip{ background:#FFFFFF !important; }
[data-theme="light"] .guide-tip{
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        0 0 0 1px rgba(15,28,46,.06),
        0 4px 8px rgba(15,28,46,.06),
        0 14px 30px rgba(15,28,46,.14) !important;
}
:root:not([data-theme="light"]) .guide-tip{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 0 1px rgba(0,0,0,.35),
        0 14px 30px rgba(0,0,0,.55) !important;
}

/* Guia no escuro: o texto lê-se melhor (títulos das dicas a branco
   firme, explicações e introdução mais claras) */
:root:not([data-theme="light"]) #guideScreen .subtitle,
:root:not([data-theme="light"]) #guideScreen .premium-text{ color:#C3D1E2 !important; }
:root:not([data-theme="light"]) .guide-tip-header h3{ color:#FFFFFF !important; font-weight:800; }
:root:not([data-theme="light"]) .guide-tip-body,
:root:not([data-theme="light"]) .guide-tip-body p{ color:#D2DDEA !important; }
:root:not([data-theme="light"]) .vitrine-texto{ color:#C3D1E2 !important; }

/* Selo "2 dicas abertas": igual ao que era, só com sombra nas letras
   para se destacarem do fundo (branca no claro, preta no escuro) */
#guideEntryLockBadge{ text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.5); }
[data-theme="light"] #guideEntryLockBadge{ text-shadow:0 1px 0 #FFFFFF, 0 0 6px rgba(255,255,255,.95); }

/* Coroa: no fim de cada salto volta sempre ao tamanho da barra (36px,
   que com o desenho da coroa fica do tamanho dos outros ícones) */
#premiumBtnNav .nav-icon{ width:36px !important; height:36px !important; margin:-4px 0 !important; }
.coroa-brilho::after{ inset:-4px 0; }
@keyframes coroa-salto{
    0%{ transform:none; }
    2%{ transform:scale(1.22) rotate(-7deg); }
    4%{ transform:scale(1.06) rotate(3deg); }
    6%, 100%{ transform:none; }
}
@keyframes coroa-salto-claro{
    0%{ transform:none; filter:drop-shadow(0 1px 3px rgba(168,116,18,.55)); }
    2%{ transform:scale(1.26) rotate(-7deg); filter:drop-shadow(0 0 10px rgba(255,190,30,.95)) brightness(1.12); }
    4%{ transform:scale(1.08) rotate(3deg); filter:drop-shadow(0 0 6px rgba(255,190,30,.8)); }
    6%, 100%{ transform:none; filter:drop-shadow(0 1px 3px rgba(168,116,18,.55)); }
}

/* Boas-vindas: ícone da app e ícones desenhados do jogo em vez de emojis */
.onboarding-arte{
    font-size:0 !important;
    line-height:0;
    display:flex;
    justify-content:center;
    margin:0 auto 14px;
}
.onboarding-arte img{ display:block; width:72px; height:72px; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.onboarding-arte-app img{
    width:76px;
    height:76px;
    border-radius:20px;
    box-shadow:0 0 0 3px var(--rd-mel), 0 12px 26px rgba(0,0,0,.35);
    filter:none;
}
[data-theme="light"] .onboarding-arte img{ filter:drop-shadow(0 6px 12px rgba(15,28,46,.18)); }
[data-theme="light"] .onboarding-arte-app img{ box-shadow:0 0 0 3px var(--rd-mel), 0 12px 26px rgba(15,28,46,.18); filter:none; }

/* Ecrãs muito estreitos (320px): rótulos da barra um pouco mais
   pequenos, para "Einstellungen" (alemão) não encostar à borda */
@media (max-width: 340px){
    .bottom-nav .nav-btn span[data-i18n]{ font-size:10px; letter-spacing:-.2px; }
}

/* O meu deck: as duas colunas sempre com a mesma largura e dentro do
   ecrã (um nome comprido, ex.: "Ídolo dos Trovões", empurrava a grelha
   para fora pela direita) */
.deck-slots{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
.deck-slot{ min-width:0; }
.deck-slot .hero-picker,
.deck-slot .hero-picker-toggle{ min-width:0; max-width:100%; }
.deck-slot .hero-picker-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* "Quando posso evoluir?" no resultado: com as cores da app (saiu o
   verde-água e o contorno roxo da versão antiga) */
.calc-previsao{
    background:var(--card-bg-start) !important;
    border:none !important;
    border-radius:var(--rd-raio) !important;
}
.calc-previsao-titulo{ color:var(--text-primary) !important; font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400 !important; font-size:var(--fs-md) !important; }
select.calc-arena{
    border:none !important;
    border-radius:16px !important;
    background-color:var(--input-bg) !important;
    box-shadow:none !important;
    color:var(--text-primary) !important;
    font-weight:700;
}
#calcPrevisaoTexto{ text-align:left !important; text-align-last:auto !important; color:var(--text-secondary) !important; font-weight:600 !important; }

/* Resumo do Plano ("+20 níveis com…"): sem justificar (abria espaços
   entre as palavras) e com o fundo das caixas da app */
p.plano-resumo{
    text-align:left !important;
    text-align-last:auto !important;
    background:var(--input-bg) !important;
    color:var(--text-primary) !important;
    border:none !important;
}
#alvoResultado{
    border:none !important;
    border-radius:12px !important;
    background-color:var(--input-bg) !important;
    color:var(--text-primary) !important;
    box-shadow:inset 0 0 0 1.5px var(--rd-mel) !important;
    font-weight:800;
}

/* O verde-água antigo (--accent-teal) ainda aparecia em vários sítios
   (convites, previsões, ritmo, chips da Coleção). Passa a ser o azul da
   arena, o acento da app nova, nos dois temas */
:root{ --accent-teal:#5BB4F2; }
[data-theme="light"]{ --accent-teal:#1C6FB0; }

/* Página Premium para quem JÁ é Premium: primeiro o estado da
   subscrição, depois "O que o teu Premium te dá" e, no fim, prolongar.
   O título e o texto de venda ("a partir de 9 cêntimos por dia") saem */
.pitch-tens{ display:none; }
.pitch-body.ja-premium{ display:flex; flex-direction:column; }
.pitch-body.ja-premium .pitch-title,
.pitch-body.ja-premium .pitch-lead{ display:none; }
.pitch-body.ja-premium #pitchActive{ order:-2; margin:0 0 22px; }
.pitch-body.ja-premium .pitch-tens{
    display:block;
    order:-1;
    margin:0 0 10px;
    font-family:'Lilita One', 'Nunito', sans-serif;
    font-size:var(--fs-lg);
    color:var(--text-primary);
    text-align:left !important;
}

/* Tutorial: o anel um pouco mais rápido */
.tour-anel{
    -webkit-animation-duration:1s !important;
    animation-duration:1s !important;
}
@media (prefers-reduced-motion: reduce){
    .tour-anel{ -webkit-animation-duration:1.3s !important; animation-duration:1.3s !important; }
}

/* Novidades: cartões lisos como os outros, sem espaço a mais em cima */
.whats-new-entry{
    border:none !important;
    background:var(--card-bg-start) !important;
    border-radius:var(--rd-raio) !important;
    padding:18px 20px !important;
}
.whats-new-entry h2, .whats-new-entry h3{ margin:0 0 6px !important; }
.whats-new-entry p{ margin:0 !important; }

/* Linha "Avisos" nas Definições: nome com uma frase curta por baixo; à
   direita, o botão "Ligar" (pílula mel) ou o estado */
.settings-avisos{ align-items:center; gap:12px; }
.settings-avisos.hidden{ display:none !important; }
.settings-avisos-texto{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.settings-avisos-nota{
    font-size:var(--fs-xs);
    line-height:1.35;
    color:var(--text-secondary);
    font-weight:600;
    text-align:left;
}
button.avisos-ligar{
    flex:none;
    width:auto;
    min-height:38px;
    padding:0 16px;
    border:none;
    border-radius:999px;
    background:var(--rd-mel);
    color:var(--rd-mel-texto);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    box-shadow:none;
    cursor:pointer;
}
button.avisos-ligar.hidden{ display:none; }
button.avisos-ligar:active{ transform:scale(.96); }
.settings-avisos.ligados #avisosEstado{ color:var(--rd-verde); font-weight:800; }

/* "Os teus heróis" no início: emoji do herói por cima e o nome em até
   duas linhas (antes cortava "Ratos Crimi…") */
.meu-heroi-emoji{ font-size:20px; line-height:1; margin-bottom:2px; }
.meu-heroi-emoji:empty{ display:none; }
.meu-heroi-nome{
    white-space:normal !important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    line-height:1.2;
    font-size:var(--fs-xs) !important;
}
button.meu-heroi{ justify-content:flex-start; padding:10px 11px !important; }
/* Heróis prontos no início: moldura verde do jogo bem visível */
button.meu-heroi.pronto{ box-shadow:inset 0 0 0 2px var(--rd-verde) !important; }
[data-theme="light"] button.meu-heroi{ background:#FFFFFF !important; box-shadow:0 0 0 1px rgba(15,28,46,.05), 0 6px 16px rgba(15,28,46,.08) !important; }
[data-theme="light"] button.meu-heroi.pronto{ box-shadow:inset 0 0 0 2px var(--rd-verde), 0 6px 16px rgba(15,28,46,.08) !important; }
.roadmap-emoji{ font-size:1.05em; margin-right:2px; }
.roadmap-info .roadmap-emoji{ display:inline !important; margin:0 2px 0 0 !important; font-size:1.05em !important; color:inherit !important; }
/* Veredicto do Comparar: conclusão alinhada à esquerda (justificada
   abria espaços entre as palavras) */
.compare-verdict p{ text-align:left !important; text-align-last:auto !important; }
/* Classificação no claro: cada nível (S, A, B, C) num cartão branco com
   relevo, como os outros cartões */
[data-theme="light"] .tier-row{
    background:#FFFFFF !important;
    box-shadow:inset 0 1px 0 #FFFFFF, 0 0 0 1px rgba(15,28,46,.05), 0 8px 20px rgba(15,28,46,.07) !important;
}

/* Etiqueta do último balance nas Estatísticas (ao lado da raridade) */
.balance-tag{
    display:inline-block;
    margin:0 0 12px 6px;
    padding:4px 10px;
    border-radius:999px;
    font-size:var(--fs-xs);
    font-weight:800;
    line-height:1.2;
    vertical-align:top;
}
.balance-tag.hidden{ display:none; }
.balance-tag.balance-buff{ background:rgba(63,174,42,.18); color:#6FD95A; }
.balance-tag.balance-nerf{ background:rgba(232,72,72,.16); color:#FF8A8A; }
[data-theme="light"] .balance-tag.balance-buff{ background:rgba(63,174,42,.14); color:#1E7A12; }
[data-theme="light"] .balance-tag.balance-nerf{ background:rgba(214,40,40,.10); color:#B42323; }

/* Progresso ainda sem evoluções: um cartão a explicar, centrado */
.historico-resumo.hidden, .historico-subtitulo.hidden{ display:none !important; }
.card.progresso-vazio{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
    padding:26px 22px !important;
}
.progresso-vazio-icone{ font-size:34px; line-height:1; }
.card.progresso-vazio p{
    margin:0;
    text-align:center !important;
    text-align-last:center !important;
    color:var(--text-secondary);
    line-height:1.5;
}

/* Tutorial Premium: ícone grande e centrado no quadrado (a 24px a coroa
   quase não se via); a coroa tem mais margem no desenho, por isso vai
   um pouco maior */
.tour-folha-icone{
    width:54px !important;
    height:54px !important;
    border-radius:16px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
}
.tour-folha-icone img{
    width:42px !important;
    height:42px !important;
    object-fit:contain;
    display:block;
}
.tour-folha-icone img.icone-coroa{ width:48px !important; height:48px !important; }
[data-theme="light"] .tour-folha-icone{ background:rgba(242,182,53,.18) !important; }
/* Os desenhos têm margem própria: ampliados para encherem o quadrado;
   fundo com tom dourado em vez de cinzento */
.tour-folha-icone{ overflow:hidden; background:linear-gradient(145deg, rgba(242,182,53,.30), rgba(242,182,53,.12)) !important; box-shadow:inset 0 0 0 1px rgba(242,182,53,.35); }
.tour-folha-icone img{ transform:scale(1.18); }
.tour-folha-icone img.icone-coroa{ transform:scale(1.45); }
[data-theme="light"] .tour-folha-icone{ background:linear-gradient(145deg, rgba(242,182,53,.34), rgba(242,182,53,.14)) !important; }

/* Ajuda e sugestões: o rótulo "Email" como os outros (frase normal) e a
   caixa do email da conta lisa, igual aos outros campos */
.rotulo-campo{
    text-transform:none !important;
    letter-spacing:0 !important;
    font-size:var(--fs-sm) !important;
    font-weight:800 !important;
    color:var(--text-primary) !important;
}
.email-conta{
    border:none !important;
    background:var(--input-bg) !important;
    border-radius:16px !important;
}
.rotulo-campo{ color:var(--text-secondary) !important; font-size:15px !important; font-weight:700 !important; margin-bottom:8px !important; }

/* Coleção sem Premium: contador com 3 vagas e a nota dos heróis à espera noutra linha */
.colecao-livre-topo{ display:grid; grid-template-columns:minmax(0,1fr) auto; row-gap:4px; align-items:center; }
#colecaoLivreTexto{ display:contents; }
.colecao-livre-conta{ grid-column:1 / -1; }
button.colecao-livre-premium{ grid-column:2; grid-row:2; }
.colecao-livre-conta{ display:flex; align-items:center; gap:8px; }
.colecao-livre-vagas{ flex:none; }
.colecao-livre-vagas{ display:inline-flex; gap:4px; }
.colecao-livre-vagas i{ width:9px; height:9px; border-radius:50%; background:var(--card-border); box-shadow:inset 0 0 0 1px rgba(127,140,160,.35); }
.colecao-livre-vagas i.cheia{ background:var(--gold); box-shadow:none; }
.colecao-livre-extra{ font-size:var(--fs-xs); font-weight:700; color:var(--text-secondary); }

/* Alemão: os substantivos levam sempre maiúscula, por isso as etiquetas
   ficam como estão escritas (sem passar a minúsculas) */
html[lang="de"] label:not(.lembrar-dados):not(.pitch-consent):not(.ritmo-linha-rotulo):not(.calc-ritmo):not(.ritmo-campo-linha):not(.sim-rotulo){ text-transform:none !important; }

/* ---------- Mensagens do suporte (chat em Ajuda e sugestões) ---------- */
.mensagens-contagem{
    margin-left:auto; margin-right:6px;
    min-width:20px; height:20px; padding:0 6px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:999px; background:#ef4444; color:#fff;
    font-size:var(--fs-2xs); font-weight:800; line-height:1;
}
.mensagens-contagem.hidden{ display:none; }
.feedback-nota-resposta{ display:block; margin-top:10px; text-align:center; color:var(--text-secondary); font-size:var(--fs-xs); line-height:1.4; }

.conversas-card h2{ margin:0 0 10px; font-size:var(--fs-lg); }
.conversas-lista{ display:flex; flex-direction:column; gap:6px; }
.conversa-linha{
    display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px;
    width:100%; padding:12px; border:none; border-radius:14px;
    background:var(--input-bg); color:var(--text-primary);
    font-family:inherit; text-align:left; cursor:pointer;
    transition:transform .15s ease, background .2s ease;
}
.conversa-linha:active{ transform:scale(.98); }
.conversa-emoji{ font-size:22px; line-height:1; }
.conversa-meio{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.conversa-resumo{ font-size:var(--fs-sm); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversa-estado{ font-size:var(--fs-xs); color:var(--text-secondary); font-weight:600; }
.conversa-hora{ font-size:var(--fs-2xs); color:var(--text-secondary); align-self:start; padding-top:2px; }
.conversa-linha.por-ler .conversa-estado{ color:var(--rd-azul); font-weight:800; }
.conversa-linha.por-ler .conversa-estado::before{
    content:""; display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%;
    background:#ef4444; vertical-align:1px;
}

/* Conversa aberta: o cabeçalho do ecrã dá lugar ao da conversa */
#feedbackScreen.em-conversa > header{ display:none; }
.conversa-topo{ display:flex; align-items:center; gap:10px; margin:4px 0 16px; }
.conversa-topo strong{ font-size:var(--fs-lg); font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400; }
.conversa-fio{ display:flex; flex-direction:column; gap:10px; padding-bottom:16px; }
.bolha{
    max-width:84%; padding:10px 14px 8px; border-radius:18px;
    line-height:1.45; overflow-wrap:anywhere;
}
.bolha p{ margin:0; white-space:pre-wrap; font-size:var(--fs-base); }
.bolha small{ display:block; margin-top:4px; font-size:var(--fs-2xs); opacity:.7; text-align:right; }
.bolha-quem{ display:block; margin-bottom:3px; font-size:var(--fs-xs); color:var(--rd-azul); }
.bolha-suporte{ align-self:flex-start; background:var(--card-bg-start); border-bottom-left-radius:6px; box-shadow:0 1px 2px rgba(11,22,34,.08); }
.bolha-eu{ align-self:flex-end; background:var(--rd-azul); color:#fff; border-bottom-right-radius:6px; }
.conversa-escrever{
    position:sticky; bottom:calc(96px + env(safe-area-inset-bottom, 0px));
    display:flex; gap:8px; align-items:flex-end;
    padding:8px; border-radius:20px; background:var(--card-bg-start);
    box-shadow:0 6px 24px rgba(5,12,24,.25);
}
.conversa-escrever textarea{ flex:1; min-height:44px; max-height:140px; margin:0; resize:none; font-size:16px; }
.conversa-escrever .btn-primary{ width:auto; margin:0; padding:0 18px; min-height:44px; flex:none; }
:root:not([data-theme="light"]) .bolha-quem{ color:#7cc0f5; }
.conversa-topo .guide-back-btn{ position:static; padding:4px 8px 4px 0; font-size:34px; }
.bolha p{ text-align:left; }
.conversa-escrever .btn-primary{ font-size:var(--fs-base); }

/* "Quando posso evoluir?": herói escolhido numa lista com pesquisa */
span.sim-rotulo{ display:block; color:var(--text-secondary); font-size:var(--fs-base); font-weight:700; }
.sim-heroi-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; min-height:48px; padding:10px 14px; border:none; border-radius:14px;
    background:var(--input-bg); color:var(--text-primary);
    font-family:inherit; font-size:var(--fs-base); font-weight:800; text-align:left; cursor:pointer;
}
.sim-heroi-toggle small{ color:var(--text-secondary); font-weight:700; }
.sim-heroi-seta{ color:var(--text-secondary); transition:transform .2s ease; }
.sim-heroi-toggle[aria-expanded="true"] .sim-heroi-seta{ transform:rotate(180deg); }
.sim-heroi-painel{ padding:8px; border-radius:16px; background:var(--input-bg); }
.sim-heroi-painel.hidden{ display:none; }
.sim-heroi-painel input[type="search"]{ width:100%; margin:0 0 8px; }
.sim-heroi-lista{
    display:flex; flex-direction:column; gap:4px;
    max-height:min(320px, 50vh); overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
.sim-heroi-linha{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; padding:10px 12px; border:none; border-radius:12px;
    background:transparent; color:var(--text-primary);
    font-family:inherit; text-align:left; cursor:pointer;
}
.sim-heroi-linha:active{ transform:scale(.98); }
.sim-heroi-linha.ativo{ background:var(--card-bg-start); box-shadow:inset 0 0 0 2px var(--rd-azul); }
.sim-heroi-nome{ font-size:var(--fs-sm); font-weight:800; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sim-heroi-info{ flex:none; font-size:var(--fs-xs); font-weight:700; color:var(--text-secondary); }
.sim-heroi-linha.pronto .sim-heroi-info{ color:#2fb25a; }
.sim-heroi-vazio{ margin:8px 4px; color:var(--text-secondary); font-size:var(--fs-sm); text-align:center; }

/* Plano: quantos heróis evoluir */
.plano-quantos{ display:flex; margin:0 0 14px; }
.plano-quantos .roadmap-sort-option{ flex:1; }
.sim-heroi-painel input#simHeroiPesquisa{
    height:40px !important; min-height:0 !important; padding:0 12px !important;
    font-size:var(--fs-sm); font-weight:600; border-radius:10px !important;
    background:var(--card-bg-start) !important;
}
.conversa-escrever.hidden{ display:none; }
.conversa-fechada{
    margin:4px 0 16px; padding:14px 16px; border-radius:16px;
    background:var(--card-bg-start); text-align:center;
}
.conversa-fechada.hidden{ display:none; }
.conversa-fechada p{ margin:0 0 12px; text-align:center; color:var(--text-secondary); font-size:var(--fs-sm); line-height:1.45; }
.conversa-linha.resolvida .conversa-estado{ color:#2fb25a; }
.conversa-fechada .vazio-acao{ display:inline-flex; margin:0 auto; }

/* Contraste (acessibilidade): o ícone fica com a cor da marca e o texto
   na cor normal, que se lê nos dois temas; selo "Novo" num azul mais escuro */
.share-social-btn.whatsapp span,
.share-social-btn.reddit span{ color:var(--text-primary); }
.novidades-selo{ background:#1C6FB0; }
/* Partilha: letras nas cores das marcas (como antes) no escuro; no claro,
   o mesmo verde/vermelho num tom mais escuro, para se lerem no fundo claro */
.share-social-btn.whatsapp span{ color:#25d366; }
.share-social-btn.reddit span{ color:#ff4500; }
[data-theme="light"] .share-social-btn.whatsapp span{ color:#0a7a35; }
[data-theme="light"] .share-social-btn.reddit span{ color:#c43a00; }

/* Definições › Notificações: o que receber, numa só fila de etiquetas */
.avisos-tipos{ display:flex; flex-wrap:nowrap; gap:6px; padding:0 16px 14px 0; overflow-x:auto; scrollbar-width:none; }
.avisos-tipos::-webkit-scrollbar{ display:none; }
.avisos-tipos.hidden{ display:none; }
button.aviso-chip{
    flex:none; padding:4px 10px; border:1px solid var(--card-border) !important; border-radius:999px !important;
    background:transparent !important; box-shadow:none !important;
    color:var(--text-secondary); font-family:inherit; font-size:var(--fs-xs); font-weight:700; line-height:1.3;
    cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
button.aviso-chip[aria-checked="true"]{ background:rgba(47,178,90,.14) !important; border-color:rgba(47,178,90,.6) !important; color:#2fb25a; }
[data-theme="light"] button.aviso-chip[aria-checked="true"]{ color:#1d7a3c; }
button.aviso-chip:focus-visible{ outline:2px solid var(--rd-azul); outline-offset:2px; }

/* Estatísticas: "Valor errado?" discreto, por baixo dos números */
button.valor-errado{
    display:block; margin:-4px 0 10px auto; padding:6px 2px;
    border:none; background:none; box-shadow:none;
    color:var(--text-secondary); font-family:inherit; font-size:var(--fs-xs); font-weight:700;
    text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}

/* Ecrã inicial à medida: sem espaço desperdiçado por baixo do Calcular */
#homeScreen #mensagem:empty,
#homeScreen #resultado:empty{ display:none; }
#homeScreen > .card{ margin-bottom:16px; }
#homeScreen > .card > :last-child{ margin-bottom:0; }
/* Quando tudo cabe acima da barra de baixo, a página não desliza
   (js/arranque.js decide; com o resultado ou em ecrãs pequenos, desliza) */
html.ecra-fixo, html.ecra-fixo body{ overflow:hidden; overscroll-behavior:none; }

/* Chat: o campo de escrever fica numa faixa com a cor do fundo da página,
   a toda a largura e até à barra de baixo — o texto que sobe deixa de se
   ver a passar por trás (com uma passagem suave no topo da faixa) */
.conversa-rodape{
    position:sticky; z-index:5;
    bottom:calc(76px + env(safe-area-inset-bottom, 0px));
    margin:0 -20px; padding:18px 20px 20px;
    background:linear-gradient(to bottom, transparent 0, var(--bg-body-end) 18px);
}
.conversa-rodape .conversa-escrever{ position:static; }
.conversa-rodape:has(.conversa-escrever.hidden){ display:none; }


/* ---------- "As tuas mensagens": abas Em aberto / Resolvidas e lista agrupada ---------- */
.conversas-abas{ display:flex; margin:0 0 12px; }
.conversas-abas.hidden{ display:none; }
.conversas-abas .mode-tab{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 10px; font-size:var(--fs-sm); font-weight:800; }
.aba-contagem{
    min-width:20px; height:20px; padding:0 6px; border-radius:999px;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(127,140,160,.18); color:var(--text-secondary); font-size:11px; font-weight:800; line-height:1;
}
.conversas-abas .mode-tab.active .aba-contagem{ background:var(--rd-azul); color:#fff; }

/* Um só bloco, linhas separadas por um fio (como numa app de mensagens) */
.conversas-lista{ display:block; border-radius:16px; overflow:hidden; background:var(--input-bg); }
.conversas-lista .conversa-linha{
    display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px;
    width:100%; padding:12px 14px; margin:0; border:none; border-radius:0; background:transparent;
    color:var(--text-primary); font-family:inherit; text-align:left; cursor:pointer;
    transition:background .15s ease;
}
.conversas-lista .conversa-linha + .conversa-linha{ box-shadow:inset 0 1px 0 rgba(127,140,160,.16); }
.conversas-lista .conversa-linha:active{ transform:none; background:rgba(127,140,160,.10); }

.conversa-avatar{
    position:relative; width:40px; height:40px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center; font-size:19px; line-height:1;
}
.conversa-avatar.tipo-bug{ background:rgba(239,68,68,.16); }
.conversa-avatar.tipo-suggestion{ background:rgba(242,182,53,.18); }
.conversa-avatar.tipo-complaint{ background:rgba(249,115,22,.18); }
.conversa-avatar.tipo-other{ background:rgba(28,130,207,.18); }
.conversa-visto{
    position:absolute; right:-2px; bottom:-2px; width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#2fb25a; color:#fff; font-size:11px; font-style:normal; font-weight:900;
    box-shadow:0 0 0 2px var(--input-bg);
}

.conversas-lista .conversa-meio{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.conversas-lista .conversa-resumo{ font-size:var(--fs-sm); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversa-previa{ font-size:var(--fs-xs); color:var(--text-secondary); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversa-previa b{ font-weight:800; }
.conversa-lado{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; align-self:stretch; justify-content:center; }
.conversas-lista .conversa-hora{ font-size:var(--fs-2xs); color:var(--text-secondary); padding:0; }
.conversa-ponto{ width:9px; height:9px; border-radius:50%; background:var(--rd-azul); box-shadow:0 0 0 3px rgba(28,130,207,.22); }

/* Com resposta por ler: assunto e prévia em destaque */
.conversa-linha.por-ler .conversa-resumo{ font-weight:900; }
.conversa-linha.por-ler .conversa-previa{ color:var(--text-primary); }
/* Resolvida: mais calma */
.conversa-linha.resolvida .conversa-resumo{ color:var(--text-secondary); font-weight:700; }

/* Aba vazia */
.conversas-vazio{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    margin:0; padding:22px 16px; text-align:center;
}
.conversas-vazio-simbolo{ font-size:26px; line-height:1; margin-bottom:4px; }
.conversas-vazio strong{ font-size:var(--fs-sm); }
.conversas-vazio small{ font-size:var(--fs-xs); color:var(--text-secondary); }

/* Ajuda e sugestões: "As tuas mensagens" numa só linha no topo
   (o formulário é o principal; a caixa de mensagens abre ao tocar) */
button.mensagens-entrada{
    display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:12px;
    width:100%; margin:0 0 16px; padding:12px 16px;
    border:none !important; border-radius:18px !important;
    background:var(--card-bg-start) !important; box-shadow:0 1px 2px rgba(11,22,34,.08) !important;
    color:var(--text-primary); font-family:inherit; text-align:left; cursor:pointer;
    transition:transform .15s ease;
}
button.mensagens-entrada.hidden{ display:none; }
button.mensagens-entrada:active{ transform:scale(.99); }
.mensagens-entrada-icone{
    width:38px; height:38px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(28,130,207,.16); font-size:18px; line-height:1;
}
.mensagens-entrada-texto{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mensagens-entrada-texto strong{ font-size:var(--fs-base); font-weight:800; }
.mensagens-entrada-texto small{ font-size:var(--fs-xs); font-weight:700; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
button.mensagens-entrada.tem-novas .mensagens-entrada-texto small{ color:var(--rd-azul); }
:root:not([data-theme="light"]) button.mensagens-entrada.tem-novas .mensagens-entrada-texto small{ color:#7cc0f5; }
.mensagens-entrada-ponto{ width:9px; height:9px; border-radius:50%; background:var(--rd-azul); box-shadow:0 0 0 3px rgba(28,130,207,.22); }
.mensagens-entrada-ponto.hidden{ display:none; }
.mensagens-entrada-seta{ color:var(--text-secondary); font-size:22px; line-height:1; }
/* A caixa de mensagens abre com a seta de voltar no topo */
.conversas-card .conversa-topo{ margin:0 0 14px; }
/* A caixa de mensagens ocupa o ecrã como a conversa (sem cartão à volta):
   seta e título no topo, separadores e lista por baixo */
.card.conversas-card{ background:none !important; box-shadow:none !important; border:none !important; padding:0 !important; }
.card.conversas-card .conversa-topo{ margin:4px 0 16px; }
.card.conversas-card{ background-image:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.card.conversas-card::before, .card.conversas-card::after{ display:none !important; }
html body #conversasCard.card{ background:none !important; box-shadow:none !important; border:none !important; padding:0 !important; }

/* Separadores da caixa de mensagens: uma pastilha que desliza para o separador ativo */
.conversas-abas{ position:relative; }
.conversas-abas::before{
    content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 6px);
    border-radius:999px; background:var(--card-bg-start);
    box-shadow:0 1px 2px rgba(11,22,34,.12);
    transition:transform .34s cubic-bezier(.3,.7,.2,1);
}
:root:not([data-theme="light"]) .conversas-abas::before{ background:#2A4161; }
.conversas-abas[data-aba="resolvidas"]::before{ transform:translateX(calc(100% + 4px)); }
.conversas-abas .mode-tab{ position:relative; z-index:1; transition:color .25s ease; }
.conversas-abas .mode-tab.active{ background:transparent !important; }

/* As conversas entram em cascata (ao abrir a caixa ou mudar de separador) */
@keyframes conversaEntra{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:none; }
}
.conversas-lista.a-entrar .conversa-linha,
.conversas-lista.a-entrar .conversas-vazio{
    animation:conversaEntra .38s cubic-bezier(.2,.7,.2,1) both;
    animation-delay:calc(var(--i, 0) * 45ms);
}
@media (prefers-reduced-motion: reduce){
    .conversas-abas::before{ transition:none; }
    .conversas-lista.a-entrar .conversa-linha,
    .conversas-lista.a-entrar .conversas-vazio{ animation:none; }
}

/* ---------- Início: "Os teus heróis" num só cartão ----------
   À esquerda o número que interessa (prontos a evoluir), à direita as 3
   evoluções mais baratas com o custo em ouro */
button.resumo-herois{
    display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:16px;
    width:100%; padding:14px 16px; border:none !important; border-radius:20px !important;
    background:var(--card-bg-start) !important; box-shadow:0 1px 2px rgba(11,22,34,.08) !important;
    color:var(--text-primary); font-family:inherit; text-align:left; cursor:pointer;
    transition:transform .15s ease;
}
button.resumo-herois:active{ transform:scale(.99); }
.rh-numero{
    display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    min-width:74px; padding-right:16px; box-shadow:1px 0 0 rgba(127,140,160,.18);
}
.rh-numero b{ font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400; font-size:38px; line-height:1; color:var(--text-primary); }
button.resumo-herois.tem-prontos .rh-numero b{ color:#2fb25a; }
.rh-numero small{ max-width:84px; font-size:var(--fs-2xs); font-weight:700; line-height:1.25; color:var(--text-secondary); }
.rh-lista{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.rh-linha{ display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:8px; }
.rh-emoji{ font-size:16px; line-height:1; text-align:center; }
.rh-nome{ font-size:var(--fs-sm); font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rh-custo{ display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:800; font-variant-numeric:tabular-nums; }
.rh-niveis{ color:var(--text-secondary); font-weight:700; margin-right:2px; }
.rh-moeda{
    width:11px; height:11px; border-radius:50%; flex:none;
    background:radial-gradient(circle at 35% 30%, #ffe9a6 0 25%, #f2b635 55%, #c98a12 100%);
    box-shadow:0 0 0 1px rgba(150,100,10,.35);
}
.rh-falta{ font-size:var(--fs-xs); font-weight:700; color:var(--text-secondary); }
/* Mais espaço para o nome do herói */
button.resumo-herois{ gap:12px; padding:14px 14px 14px 16px; }
.rh-numero{ min-width:0; padding-right:12px; }
.rh-numero small{ max-width:70px; }
.rh-linha{ grid-template-columns:18px minmax(0,1fr) auto; gap:7px; }
.rh-custo{ gap:4px; }
.rh-niveis{ font-size:var(--fs-2xs); margin-right:3px; letter-spacing:-.2px; }
/* Compacto: o ecrã inicial continua a caber sem deslizar */
button.resumo-herois{ padding:11px 14px 11px 16px; }
.rh-lista{ gap:6px; }
.rh-numero b{ font-size:34px; }

/* ---------- Início: "Os teus heróis" com medalhões ----------
   Identidade própria (sem imagens do jogo): iniciais do herói num medalhão
   com relevo, na cor da raridade. Lista de 2 linhas separadas por um fio. */
button.resumo-herois{
    display:block; padding:2px 14px; gap:0;
}
.resumo-herois .rh-linha{
    display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:12px;
    padding:9px 0;
}
.resumo-herois .rh-linha + .rh-linha{ box-shadow:inset 0 1px 0 rgba(127,140,160,.14); }
.rh-medalhao{
    position:relative; width:38px; height:38px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center; overflow:hidden;
    font-family:'Lilita One', 'Nunito', sans-serif; font-size:15px; letter-spacing:.3px; line-height:1;
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -2.5px 0 rgba(0,0,0,.18), 0 2px 6px rgba(5,12,24,.28);
}
.rh-medalhao.raridade-comum{ background:linear-gradient(150deg, #F4F6F9 0%, #C7CCD3 55%, #98A1AD 100%); color:#1E2833; }
.rh-medalhao.raridade-raro{ background:linear-gradient(150deg, #FFE6A6 0%, #F2B635 55%, #C98A12 100%); color:#3B2500; }
.rh-medalhao.raridade-epico{ background:linear-gradient(150deg, #E6D3FF 0%, #B07CFF 55%, #7740DC 100%); color:#1F0B3A; }
/* Épico: um reflexo holográfico discreto */
.rh-medalhao.raridade-epico::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 45%, rgba(140,220,255,.25) 52%, transparent 66%);
    mix-blend-mode:soft-light;
}
.rh-texto{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.resumo-herois .rh-nome{ font-size:var(--fs-sm); font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rh-detalhe{ font-size:var(--fs-xs); font-weight:700; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.rh-ouro{
    display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px;
    background:rgba(242,182,53,.13); color:#F6C760;
    font-size:var(--fs-xs); font-weight:900; font-variant-numeric:tabular-nums;
}
[data-theme="light"] .rh-ouro{ background:rgba(242,182,53,.18); color:#7a5200; }
/* Compacto: o ecrã inicial continua a caber sem deslizar */
.resumo-herois .rh-linha{ grid-template-columns:34px minmax(0,1fr) auto; gap:11px; padding:6px 0; }
.rh-medalhao{ width:34px; height:34px; font-size:14px; }
.rh-texto{ gap:0; }
.rh-ouro{ padding:4px 9px; }
button.resumo-herois{ padding:1px 14px; }
#meusHerois .meus-herois-topo{ margin-bottom:6px; }
/* Conversa resolvida: nota e botão "Nova mensagem" sempre ao centro */
.conversa-fechada:not(.hidden){ display:flex; flex-direction:column; align-items:center; }
.conversa-fechada .vazio-acao{ margin:0 auto; align-self:center; }

/* Convite da calculadora: a resposta ("12 de novembro") está ali, mas
   desfocada. É uma data de enfeite: a verdadeira só existe no Premium */
.calc-teaser-data{
    display:block;
    margin:4px 0 8px;
    font-family:'Lilita One', 'Nunito', sans-serif;
    font-size:30px;
    line-height:1.2;
    color:var(--text-primary);
}
.calc-teaser-data span{
    display:inline-block;
    padding:0 6px;
    filter:blur(9px);
    user-select:none;
    -webkit-user-select:none;
    pointer-events:none;
}

/* Onboarding: o topo (2 300+ troféus) numa linha só, por baixo das 9 arenas */
button.onboarding-arena.onboarding-arena-topo{
    grid-column:1 / -1;
    min-height:40px;
    flex-direction:row;
    justify-content:center;
}
button.onboarding-arena.onboarding-arena-topo small{ font-size:var(--fs-sm); color:inherit; font-weight:700; }

/* Esconde sem mexer no lugar dos outros (ex.: "Saltar" no último passo) */
.invisivel{ visibility:hidden; }

/* Alvos de toque com pelo menos ~44 px de altura, sem mudar o aspeto */
/* "Esqueceste-te da palavra-passe?" e "Voltar a iniciar sessão" */
.auth-switch{ padding:13px 0; margin-top:1px; margin-bottom:-13px; }
/* "Valor errado?" */
button.valor-errado{ position:relative; }
button.valor-errado::before{ content:""; position:absolute; inset:-9px -6px; }
/* Dicas do Guia: o cabeçalho ocupa o topo do cartão todo (antes só a
   linha do título reagia ao toque, o resto do cartão não fazia nada) */
.guide-tip-header{ margin:-14px -16px -7px; padding:14px 16px 7px; }

/* Tutorial do Premium: "Já és Premium!" ficava uma mancha branca no iPhone.
   A Lilita One só existe em peso normal e o 800 obrigava o telemóvel a
   inventar o negrito, engrossando as letras até fechar os buracos (a, e, m).
   Peso certo, sem negrito inventado, e uma sombra escura fina para recortar
   as letras do fundo */
.tour-folha h2{
    font-weight:400 !important;
    font-synthesis:none;
    letter-spacing:.01em;
}
:root:not([data-theme="light"]) .tour-folha h2{
    text-shadow:0 1px 0 rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
}

/* Campos com letra abaixo de 16 px fazem o iPhone aproximar a página ao
   tocar (e fica aproximada). Pesquisa da Coleção rápida estava a 15 px */
.colecao-rapida-pesquisa{ font-size:16px; }

/* Plano › "Que heróis?": LUGARES. Um lugar redondo por herói (1, 2, 3, 5).
   Vazio: anel tracejado com "+". Cheio: o medalhão do herói (o mesmo do
   ecrã inicial), com o nome por baixo e um "×" para o tirar. O herói
   "salta" para o lugar quando entra. */
.plano-lugares{ display:flex; flex-wrap:wrap; gap:14px; margin:2px 0 8px; }
.plano-lugares.hidden{ display:none; }
button.plano-lugar{
    position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
    width:58px; padding:0; border:none; background:none; box-shadow:none;
    color:var(--text-primary); font-family:inherit; cursor:pointer;
}
.plano-lugar-mais{
    width:54px; height:54px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:2px dashed rgba(143,163,188,.5);
    color:var(--text-secondary); font-size:26px; font-weight:300; line-height:1;
    transition:border-color .2s, color .2s, transform .15s;
}
button.plano-lugar:hover .plano-lugar-mais{ border-color:var(--gold); color:var(--gold); }
button.plano-lugar:active .plano-lugar-mais{ transform:scale(.94); }
button.plano-lugar .rh-medalhao{ width:54px; height:54px; font-size:20px; }
button.plano-lugar small{
    max-width:64px; font-size:11px; font-weight:800; line-height:1.15;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary);
}
button.plano-lugar.cheio small{ color:var(--text-primary); }
.plano-lugar-tirar{
    position:absolute; top:-3px; right:-1px; width:20px; height:20px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--card-bg-start); color:var(--text-secondary);
    box-shadow:0 0 0 2px var(--card-bg-start), inset 0 0 0 1.5px rgba(143,163,188,.45);
    font-style:normal; font-size:13px; font-weight:800; line-height:1;
}
button.plano-lugar.entrou .rh-medalhao{ animation:lugar-entra .34s cubic-bezier(.3,1.6,.5,1); }
@keyframes lugar-entra{ 0%{ transform:scale(.4); opacity:.2; } 100%{ transform:scale(1); opacity:1; } }
.plano-lugares-nota{ margin:0 0 14px; font-size:var(--fs-xs); color:var(--text-secondary); text-align:left; }
.plano-lugares-nota.hidden{ display:none; }
button.plano-limpar{ padding:6px 4px; margin:-6px 0; border:none; background:none; box-shadow:none; color:var(--gold); font:inherit; font-weight:700; cursor:pointer; }
[data-theme="light"] button.plano-limpar{ color:#7A5200; }

/* O painel que sobe de baixo, com os medalhões da Coleção */
.escolha-folha{ position:fixed; inset:0; z-index:2800; } /* por cima da barra de baixo (999), por baixo do tutorial (2900) */
.escolha-folha.hidden{ display:none; }
.escolha-fundo{ position:absolute; inset:0; background:rgba(4,8,16,.6); animation:escolha-fundo .2s ease-out; }
.escolha-painel{
    position:absolute; left:0; right:0; bottom:0; max-height:80vh; max-height:80dvh;
    display:flex; flex-direction:column;
    padding:10px 16px calc(14px + env(safe-area-inset-bottom));
    border-radius:26px 26px 0 0; background:var(--card-bg-start);
    box-shadow:0 -12px 40px rgba(0,0,0,.4);
    animation:escolha-sobe .28s cubic-bezier(.2,.85,.25,1);
}
.escolha-painel::before{ content:""; align-self:center; width:40px; height:4px; border-radius:4px; background:rgba(143,163,188,.4); margin-bottom:12px; }
@keyframes escolha-sobe{ from{ transform:translateY(100%); } to{ transform:none; } }
@keyframes escolha-fundo{ from{ opacity:0; } to{ opacity:1; } }
.escolha-topo{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.escolha-topo h3{ margin:0; font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400; font-size:var(--fs-lg); color:var(--text-primary); }
.escolha-contagem{ padding:3px 9px; border-radius:999px; background:var(--gold-dim); color:var(--gold); font-size:var(--fs-xs); font-weight:800; font-variant-numeric:tabular-nums; }
button.escolha-ok{
    margin-left:auto; min-height:40px; padding:8px 18px; border:none; border-radius:999px;
    background:var(--gold); color:#2A1A00; font-family:inherit; font-weight:800; cursor:pointer; box-shadow:none;
}
input.escolha-pesquisa{
    width:100%; height:46px; margin:0 0 6px; padding:0 14px; box-sizing:border-box;
    border:none; border-radius:14px; background:var(--input-bg); color:var(--text-primary);
    font-family:inherit; font-size:16px;
}
.escolha-grelha{ overflow-y:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px 4px; }
.escolha-grelha h4{ margin:14px 2px 8px; font-size:var(--fs-xs); font-weight:800; color:var(--text-secondary); }
.escolha-lista{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px 4px; }
button.escolha-heroi{
    position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
    min-width:0; padding:8px 2px 7px; border:none; border-radius:16px;
    background:none; box-shadow:none; color:var(--text-primary); font-family:inherit; cursor:pointer;
    transition:background .15s, transform .12s;
}
button.escolha-heroi:active{ transform:scale(.95); }
button.escolha-heroi .rh-medalhao{ width:50px; height:50px; font-size:18px; margin-bottom:3px; }
button.escolha-heroi.pronto .rh-medalhao{ box-shadow:0 0 0 2px var(--card-bg-start), 0 0 0 4px #3ddc84; }
button.escolha-heroi b{ max-width:100%; font-size:11.5px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
button.escolha-heroi small{ font-size:11px; font-weight:700; color:var(--text-secondary); }
button.escolha-heroi[aria-pressed="true"]{ background:rgba(242,182,53,.16); }
button.escolha-heroi[aria-pressed="true"] .rh-medalhao{ box-shadow:0 0 0 2px var(--card-bg-start), 0 0 0 4px var(--gold); }
button.escolha-heroi[aria-pressed="true"]::after{
    content:"✓"; position:absolute; top:4px; left:calc(50% + 14px);
    width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--gold); color:#2A1A00; font-size:12px; font-weight:900;
    box-shadow:0 0 0 2px var(--card-bg-start);
}
.escolha-vazio{ padding:24px 0; text-align:center; color:var(--text-secondary); }
[data-theme="light"] .escolha-fundo{ background:rgba(11,22,34,.35); }
[data-theme="light"] .escolha-painel{ background:#FFFFFF; box-shadow:0 -12px 40px rgba(11,22,34,.18); }
/* No claro o destaque da app é azul: botão e ✓ com letra branca, fundo azul-claro */
[data-theme="light"] button.escolha-heroi[aria-pressed="true"]{ background:#E7F0FA; }
[data-theme="light"] button.escolha-ok,
[data-theme="light"] button.escolha-heroi[aria-pressed="true"]::after{ color:#FFFFFF; }
[data-theme="light"] .escolha-contagem{ background:#FFF4D6; color:#7A5200; }
/* A escrever (teclado aberto): o painel encosta ao topo e fica com a altura
   que o teclado deixa livre (--vv-* vêm do visualViewport, em js/colecao.js) */
.escolha-folha.a-escrever .escolha-painel{
    top:var(--vv-topo, 0px); bottom:auto;
    height:var(--vv-altura, 100%); max-height:none;
    padding-top:calc(10px + env(safe-area-inset-top));
    border-radius:0 0 22px 22px;
    animation:none;
}
.escolha-folha.a-escrever .escolha-painel::before{ display:none; }
@media (prefers-reduced-motion: reduce){
    .escolha-painel, .escolha-fundo, button.plano-lugar.entrou .rh-medalhao{ animation:none; }
}
.plano-lista li.plano-parado strong{ opacity:.75; }
.plano-lista li.plano-parado span{ color:var(--text-secondary); }

/* =========================================================
   RESULTADO DA CALCULADORA: "carta" em vez do bloco amarelo.
   À esquerda um anel com o nível a que se chega (de 27), na cor da
   raridade (prata, ouro, roxo, como os medalhões); à direita o nível
   em grande e o detalhe. Um só movimento: o anel enche ao aparecer.
   ========================================================= */
#resultado .resultado-destaque.carta-resultado{
    display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:4px 16px;
    padding:18px 18px 16px; margin-bottom:14px; text-align:left;
    background:var(--card-bg-start) !important; color:var(--text-primary);
    border:none !important; border-radius:var(--rd-raio, 24px);
    box-shadow:inset 0 0 0 1.5px var(--carta-cor-suave), 0 10px 28px rgba(0,0,0,.22) !important;
    --carta-cor:#F2B635; --carta-cor-suave:rgba(242,182,53,.28);
}
#resultado .carta-resultado.raridade-comum{ --carta-cor:#B9C1CC; --carta-cor-suave:rgba(185,193,204,.28); }
#resultado .carta-resultado.raridade-epico{ --carta-cor:#B07CFF; --carta-cor-suave:rgba(176,124,255,.32); }
#resultado .carta-resultado::before{ content:none; }

.carta-anel{ position:relative; width:96px; height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.carta-anel svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.carta-anel circle{ fill:none; stroke-width:8; }
.carta-anel-fundo{ stroke:rgba(143,163,188,.18); }
.carta-anel-cheio{
    stroke:var(--carta-cor); stroke-linecap:round;
    stroke-dasharray:100; stroke-dashoffset:var(--fim);
}
.carta-resultado.pop .carta-anel-cheio{ animation:carta-anel-enche .9s cubic-bezier(.25,.8,.25,1); }
@keyframes carta-anel-enche{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:var(--fim); } }
.carta-anel b{ position:relative; font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400; font-size:34px; line-height:1; color:var(--text-primary); }
.carta-anel small{ position:relative; margin-top:2px; font-size:var(--fs-2xs); font-weight:800; color:var(--text-secondary); font-variant-numeric:tabular-nums; }

#resultado .carta-texto{ min-width:0; }
#resultado .carta-texto > span{ display:block; font-size:var(--fs-sm); font-weight:700; color:var(--text-secondary); text-transform:none !important; letter-spacing:0 !important; }
#resultado .carta-sobra{ margin:2px 0 0; font-size:var(--fs-xs); font-weight:700; color:var(--text-secondary); text-align:left; }
#resultado .carta-texto h2{
    margin:2px 0 4px; font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400;
    font-size:30px; line-height:1.05; color:var(--carta-cor); text-align:left;
}
#resultado .carta-detalhe{ margin:0; font-size:var(--fs-sm); font-weight:700; color:var(--text-primary); text-align:left; }
#resultado .carta-msg{
    grid-column:1 / -1; margin:12px 0 0; padding-top:12px;
    box-shadow:inset 0 1px 0 rgba(143,163,188,.16);
    font-size:var(--fs-sm); color:var(--text-secondary); text-align:left;
}
/* Tema claro: carta branca; o prata e o ouro escurecem para se lerem no branco */
[data-theme="light"] #resultado .resultado-destaque.carta-resultado{
    background:#FFFFFF !important;
    box-shadow:inset 0 0 0 1.5px var(--carta-cor-suave), 0 8px 24px rgba(11,22,34,.08) !important;
}
[data-theme="light"] #resultado .carta-resultado.raridade-comum{ --carta-cor:#6B7685; }
[data-theme="light"] #resultado .carta-resultado.raridade-raro{ --carta-cor:#B9800F; }
[data-theme="light"] #resultado .carta-resultado.raridade-epico{ --carta-cor:#7A45D6; }

/* =========================================================
   ECRÃS VAZIOS: três lugares tracejados (como os do plano) em vez de
   texto solto ou emoji. Coleção vazia, plano sem heróis, Progresso sem
   evoluções. Texto centrado (justificado abria buracos).
   ========================================================= */
.vazio-bloco:not(.hidden),
.card.progresso-vazio{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:24px 20px !important; margin:0 0 16px;
    border-radius:var(--rd-raio, 24px); background:var(--card-bg-start);
    text-align:center;
}
.vazio-bloco::before,
.card.progresso-vazio::before{
    content:""; width:150px; height:44px; flex-shrink:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 44'%3E%3Cg fill='none' stroke='%238FA3BC' stroke-opacity='.55' stroke-width='2' stroke-dasharray='5 5'%3E%3Ccircle cx='22' cy='22' r='20'/%3E%3Ccircle cx='75' cy='22' r='20'/%3E%3Ccircle cx='128' cy='22' r='20'/%3E%3C/g%3E%3Cpath d='M75 14v16M67 22h16' stroke='%23F2B635' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vazio-bloco .premium-text,
.vazio-bloco p,
.card.progresso-vazio p{
    margin:0; max-width:34ch;
    text-align:center !important; text-align-last:center !important;
    color:var(--text-secondary); line-height:1.5;
}
.vazio-bloco .premium-text.hidden{ display:none; }
[data-theme="light"] .vazio-bloco:not(.hidden),
[data-theme="light"] .card.progresso-vazio{ background:#FFFFFF; box-shadow:0 1px 2px rgba(11,22,34,.06); }

/* =========================================================
   BARRA DE BAIXO: o separador ativo com uma pastilha suave por trás
   (antes só subia 3px e tinha um ponto pequeno)
   ========================================================= */
.nav-btn{ isolation:isolate; }
.nav-btn.active::before{
    content:""; position:absolute; z-index:-1; inset:7px 6px 5px; border-radius:14px;
    background:rgba(242,182,53,.12);
}
[data-theme="light"] .nav-btn.active::before{ background:rgba(28,111,176,.10); }

/* Coleção na barra de baixo: o ponto vermelho com o número de heróis prontos */
.nav-alert-dot.com-numero{
    width:auto; min-width:18px; height:18px; padding:0 5px; top:0; right:calc(50% - 26px);
    border-radius:999px; box-sizing:border-box;
    display:flex; align-items:center; justify-content:center;
    color:#FFFFFF; font-size:11px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums;
}

/* =========================================================
   CARTA DO HERÓI · holográfica (escolhida a 22/10/2026). Sem imagens do jogo.
   - Épico: moldura arco-íris e folha holográfica com losangos.
   - Raro: folha dourada com linhas finas e reflexo.
   - Normal: metal escovado.
   - "media" (painel e lugares do plano) é a versão rica: cantos e fita
     recortada com o nível. "mini" (lista da Coleção) é a contida: só a
     prioridade no canto.
   - Pronta a evoluir: rebordo verde, brilho e seta.
   - Ao tocar, um reflexo atravessa a carta (.brilha, js/colecao.js).
   ========================================================= */
.carta-heroi{
    --ch-l:60px; --ch-fonte:24px;
    position:relative; flex-shrink:0; display:inline-block;
    width:var(--ch-l); aspect-ratio:3 / 4; padding:3px; border-radius:12px;
    background:linear-gradient(155deg, var(--ch-m1) 0%, var(--ch-m2) 42%, var(--ch-m3) 100%);
    box-shadow:0 6px 12px rgba(0,0,0,.42), inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(0,0,0,.35);
}
.carta-heroi.raridade-comum{ --ch-m1:#FBFCFD; --ch-m2:#BCC4CE; --ch-m3:#66717E; --ch-tom:#283444; --ch-brilho:rgba(220,228,238,.30); --ch-letra:#F2F5F9; }
.carta-heroi.raridade-raro{ --ch-m1:#FFF3CC; --ch-m2:#F2B635; --ch-m3:#94600A; --ch-tom:#3A2C0E; --ch-brilho:rgba(255,205,90,.42); --ch-letra:#FFE08A; }
.carta-heroi.raridade-epico{ --ch-m1:#F3E8FF; --ch-m2:#A673FF; --ch-m3:#5126A8; --ch-tom:#2B1850; --ch-brilho:rgba(176,124,255,.55); --ch-letra:#EBDDFF;
    background:conic-gradient(from 210deg at 50% 50%, #FFB3E6, #B88CFF, #8FD8FF, #B9FFC8, #FFE29A, #FFB3E6); }
.ch-dentro{
    position:relative; display:flex; align-items:center; justify-content:center; height:100%;
    border-radius:9px; overflow:hidden;
    background:radial-gradient(85% 60% at 50% 32%, var(--ch-brilho), transparent 72%), linear-gradient(180deg, var(--ch-tom), #0E1828);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.30), inset 0 0 0 3px rgba(0,0,0,.25);
}
/* Texturas por raridade */
.raridade-comum .ch-dentro::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); }
.raridade-raro .ch-dentro::before{ content:""; position:absolute; inset:-30%; background:
    repeating-linear-gradient(120deg, rgba(255,230,160,.10) 0 1px, transparent 1px 5px),
    linear-gradient(115deg, transparent 32%, rgba(255,240,190,.38) 46%, transparent 60%); }
.raridade-epico .ch-dentro::before{ content:""; position:absolute; inset:-30%; mix-blend-mode:screen; background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 7px),
    linear-gradient(115deg, transparent 18%, rgba(255,120,220,.40) 33%, rgba(120,220,255,.40) 45%, rgba(170,255,170,.32) 56%, transparent 72%); }
.ch-dentro .ch-ini{
    position:relative; z-index:1; font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400;
    font-size:var(--ch-fonte); line-height:1; color:var(--ch-letra);
    -webkit-text-stroke:1.5px rgba(8,14,26,.85); paint-order:stroke fill; text-shadow:0 3px 0 rgba(0,0,0,.5);
}
/* Versão rica (media): cantos e fita recortada com o nível */
.carta-media .ch-dentro::after{
    content:""; position:absolute; inset:5px; border-radius:6px; pointer-events:none; opacity:.8;
    background:
        linear-gradient(var(--ch-m2),var(--ch-m2)) top left/8px 1.5px no-repeat, linear-gradient(var(--ch-m2),var(--ch-m2)) top left/1.5px 8px no-repeat,
        linear-gradient(var(--ch-m2),var(--ch-m2)) top right/8px 1.5px no-repeat, linear-gradient(var(--ch-m2),var(--ch-m2)) top right/1.5px 8px no-repeat,
        linear-gradient(var(--ch-m2),var(--ch-m2)) bottom left/8px 1.5px no-repeat, linear-gradient(var(--ch-m2),var(--ch-m2)) bottom left/1.5px 8px no-repeat,
        linear-gradient(var(--ch-m2),var(--ch-m2)) bottom right/8px 1.5px no-repeat, linear-gradient(var(--ch-m2),var(--ch-m2)) bottom right/1.5px 8px no-repeat;
}
.ch-fita{
    position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); z-index:3;
    padding:2px 10px 3px; color:#14100A; font-size:11px; font-weight:900; line-height:1.2; white-space:nowrap;
    background:linear-gradient(180deg, var(--ch-m1), var(--ch-m2) 55%, var(--ch-m3));
    clip-path:polygon(0 0,100% 0,90% 50%,100% 100%,0 100%,10% 50%);
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.55));
}
.raridade-epico .ch-fita{ background:linear-gradient(90deg,#FFB3E6,#B88CFF,#8FD8FF); }
/* Versão contida (mini, lista da Coleção): só a prioridade no canto */
.carta-heroi.carta-mini{ --ch-l:40px; --ch-fonte:16px; padding:2px; border-radius:8px; box-shadow:0 3px 8px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.6); }
.carta-mini .ch-dentro{ border-radius:6px; }
.carta-mini .ch-dentro .ch-ini{ -webkit-text-stroke:1px rgba(8,14,26,.85); text-shadow:0 2px 0 rgba(0,0,0,.5); }
.ch-canto{
    position:absolute; top:2px; left:2px; z-index:2; min-width:15px; padding:0 3px; border-radius:4px;
    background:rgba(0,0,0,.55); color:#fff; font-size:11px; font-weight:900; line-height:1.4; text-align:center; font-variant-numeric:tabular-nums;
}
.ch-seta{
    position:absolute; top:6px; right:6px; z-index:4; width:17px; height:17px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#3ddc84; color:#06301A; font-size:11px; font-weight:900; line-height:1; box-shadow:0 0 0 2px rgba(0,0,0,.35);
}
.carta-heroi.pronto{ box-shadow:0 0 0 2px #3ddc84, 0 0 14px rgba(61,220,132,.32), 0 6px 12px rgba(0,0,0,.42), inset 0 1.5px 0 rgba(255,255,255,.7); }
.carta-mini.pronto{ box-shadow:0 0 0 2px #3ddc84, 0 3px 8px rgba(0,0,0,.38); }
/* Reflexo ao tocar */
.carta-heroi.brilha .ch-dentro::after{ display:none; }
.carta-heroi .ch-reflexo{ position:absolute; inset:-40%; z-index:2; pointer-events:none; opacity:0;
    background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); transform:translateX(-60%); }
.carta-heroi.brilha .ch-reflexo{ animation:ch-reflexo .6s ease-out; }
@keyframes ch-reflexo{ 0%{ opacity:1; transform:translateX(-60%); } 100%{ opacity:1; transform:translateX(60%); } }
@media (prefers-reduced-motion: reduce){ .carta-heroi.brilha .ch-reflexo{ animation:none; } }

/* Coleção: a carta no lugar do número */
.roadmap-linha > .carta-heroi{ margin-right:2px; }

/* Plano › lugares: carta rica; vazio = carta tracejada */
button.plano-lugar{ width:62px; }
button.plano-lugar .carta-heroi{ --ch-l:54px; --ch-fonte:20px; margin-bottom:6px; }
.plano-lugar-mais{ width:54px; height:auto; aspect-ratio:3 / 4; border-radius:12px; }
.plano-lugar-tirar{ top:-6px; right:-2px; z-index:5; }
button.plano-lugar.entrou .carta-heroi{ animation:lugar-entra .34s cubic-bezier(.3,1.6,.5,1); }
@media (prefers-reduced-motion: reduce){ button.plano-lugar.entrou .carta-heroi{ animation:none; } }

/* Plano › painel: carta rica (o nível vai na fita) */
button.escolha-heroi .carta-heroi{ --ch-l:60px; margin-bottom:10px; }
button.escolha-heroi[aria-pressed="true"] .carta-heroi{ box-shadow:0 0 0 2.5px var(--gold), 0 6px 12px rgba(0,0,0,.42); }
button.escolha-heroi[aria-pressed="true"]::after{ top:2px; left:calc(50% + 19px); z-index:5; }
button.escolha-heroi[aria-pressed="true"] .ch-seta{ display:none; } /* o ✓ dourado fica no lugar da seta */
.carta-mini .ch-seta{ display:none; } /* na lista, o rebordo verde e o texto já dizem "pronto" */

/* Letra mais pequena da app passa de 10 para 11 px: os selos ("2 de 10 sem
   Premium") e os nomes dos botões de partilha ficavam abaixo do legível */
:root{ --fs-2xs:11px; }

/* Faíscas do ecrã de compra: caem 3 vezes ao abrir e param (antes piscavam sem fim) */
.pitch-sparks i{ animation-iteration-count:3 !important; }

/* Números com largura igual em todo o lado onde há valores (ouro, cartas,
   dano, vida): não "dançam" quando mudam nem desalinham em coluna */
.resultado-item p, .resultado-par p, .carta-anel b, .stat-card, #damageStat, #healthStat, #abilityStat,
.plano-resumo, .plano-lista span, .compare-value, .rh-ouro, .pitch-plan-price, .ritmo-card, .historico-lista,
.conquistas-anel b, input[inputmode="numeric"], #nivel, #cartas{ font-variant-numeric:tabular-nums; }

/* =========================================================
   FICHA DO HERÓI (Estatísticas): carta holográfica grande + nome +
   raridade em cima; as três estatísticas em barras com o valor no
   nível 27; a habilidade sempre à vista.
   ========================================================= */
.ficha-cabeca{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:16px; margin:0 0 26px; }
.carta-heroi.carta-grande{ --ch-l:96px; --ch-fonte:38px; padding:3.5px; border-radius:14px; }
.carta-grande .ch-dentro{ border-radius:11px; }
.carta-grande .ch-dentro .ch-ini{ -webkit-text-stroke:2px rgba(8,14,26,.85); text-shadow:0 4px 0 rgba(0,0,0,.5); }
.carta-grande .ch-fita{ font-size:11.5px; padding:3px 14px 4px; bottom:-9px; }
.carta-grande .ch-dentro::after{
    content:""; position:absolute; inset:6px; border-radius:7px; pointer-events:none; opacity:.85;
    background:
        linear-gradient(var(--ch-m2),var(--ch-m2)) top left/10px 1.5px no-repeat, linear-gradient(var(--ch-m2),var(--ch-m2)) top left/1.5px 10px no-repeat,
        linear-gradient(var(--ch-m2),var(--ch-m2)) top right/10px 1.5px no-repeat, linear-gradient(var(--ch-m2),var(--ch-m2)) top right/1.5px 10px no-repeat,
        linear-gradient(var(--ch-m2),var(--ch-m2)) bottom left/10px 1.5px no-repeat, linear-gradient(var(--ch-m2),var(--ch-m2)) bottom left/1.5px 10px no-repeat,
        linear-gradient(var(--ch-m2),var(--ch-m2)) bottom right/10px 1.5px no-repeat, linear-gradient(var(--ch-m2),var(--ch-m2)) bottom right/1.5px 10px no-repeat;
}
.ficha-texto{ min-width:0; }
.ficha-nome{ margin:0 0 6px !important; font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400 !important; font-size:30px !important; line-height:1.05; color:var(--text-primary) !important; text-align:left !important; }
.ficha-raridade{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:var(--fs-xs); font-weight:800; }
.ficha-raridade.raridade-comum{ background:rgba(185,193,204,.16); color:#D5DBE3; }
.ficha-raridade.raridade-raro{ background:rgba(242,182,53,.16); color:#FFD877; }
.ficha-raridade.raridade-epico{ background:rgba(176,124,255,.18); color:#D9C2FF; }
[data-theme="light"] .ficha-raridade.raridade-comum{ color:#4B5563; }
[data-theme="light"] .ficha-raridade.raridade-raro{ color:#7A5200; }
[data-theme="light"] .ficha-raridade.raridade-epico{ color:#5B2DB8; }
/* O nome e a raridade antigos passam para a cabeça nova */
#statsScreen #heroName, #statsScreen #statsRaridadeTag{ display:none !important; }

/* Estatísticas em barras */
#statsScreen .hero-stats{ display:grid !important; grid-template-columns:1fr; gap:16px; margin-top:16px; }
#statsScreen .stat-box{
    display:grid !important; grid-template-columns:auto 1fr auto auto; grid-template-areas:"icone titulo valor max" "barra barra barra barra";
    align-items:center; gap:6px 10px; padding:0 !important; background:none !important; box-shadow:none !important; text-align:left;
}
#statsScreen .stat-icon-title{ display:contents; }
#statsScreen .stat-icon{ grid-area:icone; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:9px; }
#statsScreen .stat-icon img{ width:24px; height:24px; }
#statsScreen .stat-title{ grid-area:titulo; font-size:var(--fs-sm) !important; font-weight:800; color:var(--text-secondary) !important; text-transform:none !important; letter-spacing:0 !important; }
#statsScreen .stat-value{ grid-area:valor; margin:0 !important; font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400; font-size:24px !important; line-height:1; color:var(--text-primary) !important; text-align:right; }
.stat-max{ grid-area:max; font-size:var(--fs-xs); font-weight:800; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.stat-barra{ grid-area:barra; height:10px; border-radius:999px; background:rgba(143,163,188,.16); overflow:hidden; }
.stat-barra i{ display:block; height:100%; width:0; border-radius:999px; transition:width .45s cubic-bezier(.25,.8,.25,1); }
.stat-dano .stat-icon{ background:rgba(255,112,96,.16); } .stat-dano .stat-barra i{ background:linear-gradient(90deg,#FF8A65,#FF5A5F); }
.stat-vida .stat-icon{ background:rgba(61,220,132,.16); } .stat-vida .stat-barra i{ background:linear-gradient(90deg,#7BE495,#2FBF6A); }
.stat-hab .stat-icon{ background:rgba(176,124,255,.18); } .stat-hab .stat-barra i{ background:linear-gradient(90deg,#C9A8FF,#8D5BFF); }
#statsScreen .stat-value .habilidade-bloqueada{ font-family:'Nunito', sans-serif; font-size:var(--fs-sm); font-weight:800; }

/* Habilidade sempre aberta: sem o botão "Ver habilidade" */
#statsScreen #abilityToggle{ display:none !important; }
#statsScreen .ability-panel{ margin-top:16px; padding:12px 14px; border-radius:14px; background:var(--input-bg); }
#statsScreen .ability-panel strong{ display:block; margin-bottom:2px; color:var(--text-primary); }
#statsScreen .ability-panel p{ margin:0; color:var(--text-secondary); font-size:var(--fs-sm); line-height:1.45; }
.ficha-raridade{ text-transform:lowercase; }
.ficha-raridade::first-letter{ text-transform:uppercase; }

/* Sequência no início: chama com o número por dentro e "dias seguidos" à
   frente, sem cartão à volta (escolhido a 23/10/2026) */
button.streak-indicator{
    display:inline-flex !important; align-items:center; gap:3px;
    padding:2px 4px 2px 0 !important; background:none !important; box-shadow:none !important; border-radius:0;
    color:var(--text-primary) !important; font-size:var(--fs-sm); font-weight:800;
}
button.streak-indicator::after{ content:none; } /* sem a setinha */
.seq-chama{ position:relative; width:42px; height:46px; flex-shrink:0; display:flex; align-items:flex-end; justify-content:center; }
.seq-chama svg{ position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 3px 6px rgba(232,64,43,.35)); }
.seq-chama b{
    position:relative; margin-bottom:7px; font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400;
    font-size:16px; line-height:1; color:#FFFFFF;
    -webkit-text-stroke:1.2px rgba(90,20,0,.65); paint-order:stroke fill; text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.seq-texto{ white-space:nowrap; margin-top:6px; font-size:15px; } /* alinhado com o número dentro da chama */

/* Premium no topo (opção C, 23/10/2026): em vez da pastilha "Premium", o
   logo ganha um aro dourado fino e uma coroa pequena no canto */
button.marca-selo{ position:relative; flex-shrink:0; padding:0; border:none; background:none; box-shadow:none !important; border-radius:14px; cursor:default; }
.marca-coroa{ display:none; }
body.is-premium button.marca-selo{ cursor:pointer; }
body.is-premium .marca-logo{ box-shadow:0 4px 14px rgba(0,0,0,.35), 0 0 0 2px var(--bg-body-start, #0F1C2E), 0 0 0 3.5px #F2B635 !important; }
body.is-premium .marca-coroa{
    display:flex; position:absolute; top:-9px; right:-8px; width:22px; height:22px; border-radius:50%;
    align-items:center; justify-content:center; background:var(--bg-body-start, #0F1C2E);
}
.marca-coroa svg{ width:15px; height:15px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
body.is-premium #premiumChip{ display:none !important; }
[data-theme="light"] body.is-premium .marca-coroa,
[data-theme="light"].is-premium .marca-coroa{ background:#EEF2F7; }

/* =========================================================
   CARTAS QUE GANHAM VIDA (js/cartas-vivas.js)
   - As cartas grandes e médias inclinam-se debaixo do dedo e o brilho
     holográfico segue-o (--rx/--ry/--mx/--my).
   - Editor da Coleção: carta grande para puxar para cima (+1 pedido).
   - "Abri um baú": grelha de heróis e cartas que se viram uma a uma.
   ========================================================= */
.carta-heroi:not(.carta-mini){
    transform:perspective(600px) translateY(var(--subir, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition:transform .45s cubic-bezier(.2,.9,.25,1.25), box-shadow .3s;
}
.carta-heroi.inclinada{ transition:transform .06s linear, box-shadow .3s; }
.ch-holo{
    position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .3s;
    mix-blend-mode:color-dodge;
    background:
        radial-gradient(circle at var(--mx, 50%) var(--my, 40%), rgba(255,255,255,.7), transparent 40%),
        repeating-linear-gradient(115deg, #ff7ad9 0%, #8a7bff 7%, #6fe3ff 14%, #9dffb0 21%, #ffe27a 28%, #ff7ad9 35%);
    background-size:100% 100%, 300% 300%;
    background-position:center, var(--mx, 50%) var(--my, 40%);
}
.raridade-raro .ch-holo{ mix-blend-mode:overlay; }
.raridade-comum .ch-holo{ mix-blend-mode:soft-light; }
.carta-heroi.inclinada .ch-holo{ opacity:.85; }
.raridade-epico.carta-grande .ch-holo, .raridade-epico.carta-viva .ch-holo{ opacity:.18; }
.carta-heroi.raridade-epico.inclinada .ch-holo{ opacity:.95; }
.carta-grande{ touch-action:none; }
@media (prefers-reduced-motion: reduce){ .carta-heroi:not(.carta-mini){ transition:none; } }

/* Editor da Coleção › puxar para somar um pedido */
.pedido-bloco{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:16px; margin:2px 0 14px; padding:4px 0 12px; border-bottom:1px solid var(--card-border); }
.pedido-palco{ padding:4px 6px 12px; user-select:none; -webkit-user-select:none; }
.pedido-palco.pode-puxar{ touch-action:none; cursor:grab; }
.pedido-palco.vai-somar .carta-heroi{ filter:brightness(1.18); box-shadow:0 0 0 2.5px var(--gold), 0 12px 24px rgba(0,0,0,.45); }
.carta-heroi.somou{ animation:carta-somou .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes carta-somou{ 0%{ transform:perspective(600px) scale(.9); } 100%{ transform:perspective(600px) scale(1); } }
.pedido-lado{ min-width:0; }
.pedido-dica{ margin:0 0 10px !important; font-size:var(--fs-sm); font-weight:700; color:var(--text-secondary); text-align:left; line-height:1.35; }
.pedido-somar{
    min-height:42px; padding:0 16px; border:0; border-radius:12px; cursor:pointer;
    background:color-mix(in srgb, var(--gold) 18%, transparent); color:var(--gold);
    font:inherit; font-weight:900; font-size:var(--fs-base); font-variant-numeric:tabular-nums;
    transition:transform .15s;
}
.pedido-somar:active{ transform:scale(.96); }
.pedido-arena{ margin:0; }
.pedido-chip{
    position:fixed; left:0; top:0; z-index:1600; width:24px; height:32px; border-radius:5px; pointer-events:none;
    background:linear-gradient(155deg,#FBFCFD,#BCC4CE 45%,#66717E); box-shadow:0 4px 10px rgba(0,0,0,.35);
}
.pedido-chip.raridade-raro{ background:linear-gradient(155deg,#FFF3CC,#F2B635 45%,#94600A); }
.pedido-chip.raridade-epico{ background:conic-gradient(from 210deg, #FFB3E6, #B88CFF, #8FD8FF, #B9FFC8, #FFE29A, #FFB3E6); }

/* Abri um baú */
.bau-chip{ display:block; margin:0 0 12px; }
.bau-chip.hidden{ display:none; }
.bau-grelha{ display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:14px 8px; align-content:start; padding-top:4px; }
.bau-grelha.hidden{ display:none; }
.bau-heroi{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.bau-heroi.hidden{ display:none; }
.bau-carta{ display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; padding:4px 0; border:0; background:none; cursor:pointer; color:var(--text-primary); }
.bau-carta .carta-heroi{ --ch-l:58px; --ch-fonte:22px; }
.bau-carta[aria-pressed="true"] .carta-heroi{ box-shadow:0 0 0 2.5px var(--gold), 0 6px 12px rgba(0,0,0,.42); }
.bau-carta[aria-pressed="false"] .carta-heroi{ opacity:.7; }
.bau-nome{ max-width:100%; font-size:var(--fs-2xs); font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bau-qtd{ width:100%; max-width:76px; height:36px; min-height:0; margin:0; padding:4px; text-align:center; font-size:16px; font-variant-numeric:tabular-nums; }
.bau-qtd.hidden{ display:none; }
.bau-revelar{ flex:1; overflow-y:auto; display:flex; flex-direction:column; justify-content:center; padding:10px 0 20px; }
.bau-revelar.hidden{ display:none; }
.bau-folha.revelado .colecao-rapida-pesquisa{ display:none; }
.bau-mesa{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px 14px; perspective:900px; }
.bau-virar{ position:relative; width:84px; aspect-ratio:3 / 4; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.3,1.4,.4,1); }
.bau-virar.virada{ transform:rotateY(180deg); }
.bau-face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:12px; }
.bau-costas{
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 50% 40%, #2C4E7A, #12233A 70%);
    box-shadow:inset 0 0 0 3px var(--gold), 0 10px 20px rgba(0,0,0,.4);
}
.bau-costas::after{ content:"S4"; font-family:'Lilita One', 'Nunito', sans-serif; font-size:26px; color:var(--gold); -webkit-text-stroke:1.5px #0B1424; paint-order:stroke fill; }
.bau-virar:not(.virada) .bau-costas{ animation:bau-respira 2.2s ease-in-out infinite; }
@keyframes bau-respira{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.bau-frente{ transform:rotateY(180deg); display:flex; justify-content:center; }
.bau-frente .carta-heroi{ --ch-l:84px; --ch-fonte:30px; }
.bau-virar.virada .bau-frente{ animation:bau-clarao .9s ease-out; }
.bau-virar.raridade-epico.virada .bau-frente .carta-heroi{ box-shadow:0 0 30px 6px rgba(184,140,255,.7), 0 6px 12px rgba(0,0,0,.42); }
.bau-virar.raridade-raro.virada .bau-frente .carta-heroi{ box-shadow:0 0 22px 4px rgba(242,182,53,.55), 0 6px 12px rgba(0,0,0,.42); }
@keyframes bau-clarao{ 0%{ filter:brightness(2.2); } 100%{ filter:brightness(1); } }
.bau-mais{
    position:absolute; left:50%; bottom:-12px; transform:translateX(-50%); z-index:5;
    padding:2px 10px 3px; border-radius:999px; background:#fff; color:#14100A;
    font-size:12px; font-weight:900; white-space:nowrap; box-shadow:0 3px 8px rgba(0,0,0,.3); font-variant-numeric:tabular-nums;
}
.bau-resumo{ margin:26px 0 0 !important; text-align:center !important; font-family:'Lilita One', 'Nunito', sans-serif; font-size:22px; color:var(--text-primary); }
.bau-resumo.hidden{ display:none; }
@media (prefers-reduced-motion: reduce){
    .bau-virar{ transition:none; }
    .bau-virar:not(.virada) .bau-costas, .bau-virar.virada .bau-frente, .carta-heroi.somou{ animation:none; }
}

/* Sensor do telemóvel: as cartas grandes seguem a inclinação, com o brilho a acompanhar */
.cartas-com-sensor .carta-heroi:not(.carta-mini):not(.inclinada){ transition:transform .18s linear, box-shadow .3s; }
.cartas-com-sensor .carta-heroi:not(.carta-mini) .ch-holo{ opacity:.45; }
.cartas-com-sensor .carta-heroi.raridade-epico:not(.carta-mini) .ch-holo{ opacity:.7; }

/* Evoluí: a carta aparece em grande, vira-se e volta com o nível novo */
.evolucao-palco{
    position:fixed; inset:0; z-index:1700; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
    background:radial-gradient(60% 45% at 50% 45%, rgba(242,182,53,.22), rgba(6,12,22,.82) 70%);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    opacity:0; transition:opacity .25s;
}
.evolucao-palco.entrou, .evolucao-palco.virada{ opacity:1; }
.evolucao-palco.a-sair{ opacity:0; }
.evolucao-virar{
    position:relative; width:150px; aspect-ratio:3 / 4; transform-style:preserve-3d;
    transform:scale(.6); transition:transform .7s cubic-bezier(.3,1.4,.4,1);
}
.evolucao-palco.entrou .evolucao-virar{ transform:scale(1); }
.evolucao-palco.virada .evolucao-virar{ transform:scale(1) rotateY(180deg); }
.evolucao-face{ position:absolute; inset:0; display:flex; justify-content:center; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.evolucao-nova{ transform:rotateY(180deg); }
.evolucao-face .carta-heroi{ --ch-l:150px; --ch-fonte:58px; padding:5px; border-radius:20px; }
.evolucao-face .ch-dentro{ border-radius:16px; }
.evolucao-face .ch-dentro .ch-ini{ -webkit-text-stroke:3px rgba(8,14,26,.85); text-shadow:0 5px 0 rgba(0,0,0,.5); }
.evolucao-face .ch-fita{ font-size:15px; padding:4px 20px 5px; bottom:-12px; }
.evolucao-nova .carta-heroi{ box-shadow:0 0 0 3px #3ddc84, 0 0 50px 10px rgba(61,220,132,.45), 0 16px 30px rgba(0,0,0,.5); }
.evolucao-nova .ch-holo{ opacity:.6; }
.evolucao-texto{
    margin:0 !important; text-align:center !important; color:#fff; font-weight:800; font-size:var(--fs-base);
    opacity:0; transform:translateY(8px); transition:opacity .3s .5s, transform .3s .5s;
}
.evolucao-texto b{ display:block; margin-top:2px; font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400; font-size:34px; color:#3ddc84; }
.evolucao-palco.virada .evolucao-texto{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
    .evolucao-palco, .evolucao-virar, .evolucao-texto{ transition:none; }
}

/* Títulos de secção em letra normal: maiúsculas espaçadas em todo o lado
   pareciam um modelo. "Novo" e o "ou" ficam como estavam. */
.settings-group-label, .convite-rotulo, .hero-curve-title{
    text-transform:none; letter-spacing:0;
}
.settings-group-label{ font-size:var(--fs-base); font-weight:800; color:var(--text-primary); }
.hero-curve-title, .convite-rotulo{ font-size:var(--fs-sm); font-weight:800; }

/* Sequência no canto superior direito: logo e título à esquerda, chama com
   o número dentro e "dias seguidos" em duas linhas à direita. O botão
   Premium (só para quem ainda não é) passa para a linha de baixo. */
.home-header{ grid-template-columns:minmax(0,1fr) auto; column-gap:10px; text-align:left; }
.home-header .marca{ grid-column:1; grid-row:1; min-width:0; }
.home-chips{ display:contents; }
button.streak-indicator{ grid-column:2; grid-row:1; align-self:center; margin:0; padding:0 !important; gap:2px; }
button.streak-indicator .seq-texto{
    margin-top:4px; max-width:64px; font-size:13px; line-height:1.1; font-weight:800; white-space:normal; text-align:left;
}
.home-chips .premium-chip{ grid-column:1 / -1; grid-row:2; justify-self:start; margin-top:8px; }

/* =========================================================
   ABRI UM BAÚ, versão 2 (js/cartas-vivas.js)
   - Entrada na Coleção: baú desenhado + nome + último baú.
   - Folha: heróis em mosaico (tocar soma 1 carta), bandeja em baixo
     com − / número / + e o efeito ("faltam 45 → 20", "fica pronto").
   - Ao abrir: cartas viram-se com o resultado de cada herói.
   ========================================================= */
button.bau-entrada{
    display:flex; align-items:center; gap:14px; width:100%; margin:0 0 14px; padding:12px 16px 12px 12px;
    border:1.5px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius:18px; cursor:pointer; text-align:left;
    background:linear-gradient(100deg, color-mix(in srgb, var(--gold) 14%, var(--card-bg-start)), var(--card-bg-start) 60%);
    color:var(--text-primary); font:inherit; box-shadow:none;
    transition:transform .15s, border-color .2s;
}
button.bau-entrada.hidden{ display:none; }
button.bau-entrada:active{ transform:scale(.98); }
.bau-icone{ flex-shrink:0; width:52px; height:44px; display:flex; align-items:center; justify-content:center; }
.bau-icone svg{ width:100%; height:100%; overflow:visible; filter:drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.bau-tampa{ fill:#B5651D; transform-origin:24px 18px; }
.bau-caixa{ fill:#8B4513; }
.bau-fita{ fill:#F2B635; }
.bau-fecho{ fill:#FFE08A; stroke:#94600A; stroke-width:1.2; }
button.bau-entrada:hover .bau-tampa, button.bau-entrada:focus-visible .bau-tampa{ animation:bau-tampa-abre .7s ease-in-out; }
#roadmapScreen:not(.hidden) .bau-tampa{ animation:bau-tampa-abre .8s ease-in-out .6s 1; }
@keyframes bau-tampa-abre{ 0%,100%{ transform:rotate(0); } 35%{ transform:translateY(-3px) rotate(-8deg); } 65%{ transform:translateY(-1px) rotate(3deg); } }
.bau-entrada-texto{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.bau-entrada-texto b{ font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400; font-size:19px; line-height:1.1; }
.bau-entrada-texto span{ font-size:var(--fs-sm); font-weight:700; color:var(--text-secondary); line-height:1.3; }
.bau-entrada-seta{ font-size:26px; font-weight:800; color:var(--gold); line-height:1; }

/* Folha */
.bau-folha .colecao-rapida-pesquisa{ margin-top:12px; }
.bau-grelha{ display:block; padding-top:0; }
.bau-grupo{ margin:6px 0 10px !important; font-size:var(--fs-sm) !important; font-weight:800; color:var(--text-secondary); text-align:left; }
.bau-grupo.hidden, .bau-mosaico.hidden{ display:none; }
.bau-mosaico{ display:grid; grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)); gap:12px 6px; margin-bottom:18px; }
button.bau-heroi{
    position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; padding:4px 0;
    border:0; background:none; box-shadow:none; cursor:pointer; color:var(--text-primary); font:inherit;
}
button.bau-heroi .carta-heroi{ --ch-l:54px; --ch-fonte:20px; transition:transform .15s, box-shadow .2s; }
button.bau-heroi:active .carta-heroi{ transform:scale(.93); }
button.bau-heroi.novo .carta-heroi{ opacity:.6; filter:saturate(.6); }
button.bau-heroi[aria-pressed="true"] .carta-heroi{ opacity:1; filter:none; box-shadow:0 0 0 2.5px var(--gold), 0 6px 12px rgba(0,0,0,.42); }
.bau-conta{
    position:absolute; top:-2px; left:calc(50% + 14px); z-index:6; min-width:24px; padding:2px 6px; border-radius:999px;
    background:var(--gold); color:#2A1B00; font-size:11px; font-weight:900; line-height:1.3; font-variant-numeric:tabular-nums;
    box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.bau-conta:empty{ display:none; }
.bau-nome{ max-width:100%; font-size:var(--fs-2xs); font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Bandeja: o que vai no baú e o efeito em cada herói */
.bau-bandeja{
    max-height:38vh; overflow-y:auto; margin:0 -16px; padding:10px 16px 4px;
    border-top:1px solid var(--card-border); background:color-mix(in srgb, var(--card-bg-start) 70%, transparent);
}
.bau-bandeja.hidden{ display:none; }
.bau-vazio{ margin:4px 0 8px !important; font-size:var(--fs-sm); font-weight:700; color:var(--text-secondary); text-align:left; line-height:1.4; }
.bau-linha{ display:flex; align-items:center; gap:10px; padding:6px 0; }
.bau-linha + .bau-linha{ border-top:1px solid var(--card-border); }
.bau-linha-texto{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.bau-linha-texto b{ font-size:var(--fs-sm); font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bau-efeito{ font-size:var(--fs-xs); font-weight:700; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.bau-efeito.pronto{ color:#3ddc84; }
.bau-passos{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.bau-passos button{
    width:36px; height:36px; min-height:0; padding:0; border:0; border-radius:50%; cursor:pointer;
    background:var(--surface-bg-alt); color:var(--text-primary); font:inherit; font-size:20px; font-weight:800; line-height:1;
}
.bau-passos button:active{ transform:scale(.92); }
.bau-passos input{ width:52px; height:36px; min-height:0; margin:0; padding:0 4px; text-align:center; font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }

/* Rodapé: "Evoluir X" aparece por cima do "Feito" quando há um pronto */
.bau-rodape{ display:flex; flex-direction:column; gap:8px; }
.bau-evoluir{
    min-height:48px; border:0; border-radius:var(--radius-md); cursor:pointer;
    background:#3ddc84; color:#06301A; font:inherit; font-weight:900; font-size:var(--fs-base);
}
.bau-evoluir.hidden{ display:none; }

/* Revelação com o resultado por baixo de cada carta */
.bau-carta-revelada{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.bau-resultado{ font-size:var(--fs-sm); font-weight:800; color:var(--text-secondary); opacity:0; transition:opacity .3s .35s; font-variant-numeric:tabular-nums; }
.bau-resultado.pronto{ color:#3ddc84; }
.bau-carta-revelada.virada .bau-resultado{ opacity:1; }
.bau-resumo span{ display:block; margin-top:6px; font-family:'Nunito', sans-serif; font-size:var(--fs-base); font-weight:800; color:#3ddc84; }
@media (prefers-reduced-motion: reduce){
    .bau-tampa, #roadmapScreen:not(.hidden) .bau-tampa{ animation:none; }
    .bau-resultado{ transition:none; }
}

/* Etiquetas pequenas em letra normal (o selo "2 de 10 sem Premium" e o
   "Escolhe o teu herói" do perfil também estavam em maiúsculas espaçadas) */
.premium-lock-badge, .perfil-rotulo{ text-transform:none !important; letter-spacing:0 !important; }

/* =========================================================
   MENOS É MAIS (30/10/2026): cada ecrã com uma coisa principal
   - Coleção: sem subtítulo; uma só barra (＋ Adicionar · 🎁 Baú · Custo ▾)
     no lugar de três blocos; linhas finas em vez de cartões; sem número
     de posição nem lápis em cada herói.
   - Plano: opções avançadas atrás de "Mais opções"; sem notas repetidas.
   - Ficha do herói: o nome troca de herói; sem rótulos óbvios; a curva
     só aparece quando se pede.
   ========================================================= */
#roadmapScreen > header .subtitle{ display:none; }
.colecao-adicionar-resumo{ display:none !important; }
.colecao-barra{ display:flex; align-items:center; gap:8px; margin:2px 0 18px; }
button.barra-pill{
    height:40px; padding:0 16px; border:0 !important; border-radius:999px !important; cursor:pointer;
    display:inline-flex; align-items:center; gap:6px;
    background:var(--surface-bg-alt) !important; box-shadow:none !important;
    color:var(--text-primary); font-family:inherit; font-size:var(--fs-base); font-weight:800;
    transition:transform .15s ease, background .2s ease;
}
button.barra-pill:active{ transform:scale(.96); }
button.barra-pill.aberto{ background:color-mix(in srgb, var(--gold) 18%, transparent) !important; color:var(--gold); }
button.barra-pill.hidden{ display:none; }
.colecao-barra #roadmapSortRow{ margin:0 0 0 auto; padding:0; background:none; border:0; }
.colecao-barra #roadmapSortRow.hidden{ display:none; }
.colecao-barra #roadmapSortRow > .settings-row-label, .colecao-barra #roadmapSortOptions{ display:none; }
button.barra-ordem{
    height:40px; padding:0 4px; border:0 !important; background:none !important; box-shadow:none !important; cursor:pointer;
    color:var(--text-secondary); font-family:inherit; font-size:var(--fs-sm); font-weight:800;
}
.colecao-adicionar-det[open] > .colecao-adicionar{ margin-bottom:18px; }

/* Lista de heróis: linhas finas em vez de cartões */
#roadmapList .roadmap-item{
    background:transparent !important; box-shadow:none !important; border-radius:0 !important;
    margin-bottom:0 !important; border:0 !important; border-bottom:1px solid var(--card-border) !important;
}
#roadmapList .roadmap-item.pronto{ border:2px solid #3ddc84 !important; border-radius:16px !important; margin:4px 0 !important; }
#roadmapList .roadmap-item.aberto{ background:var(--surface-bg-alt) !important; border-radius:18px !important; border-bottom-color:transparent !important; margin:6px 0 !important; }
.roadmap-linha .ch-canto, .roadmap-chevron{ display:none !important; }

/* Plano: "Mais opções" */
.plano-lugares-nota{ display:none !important; }
button.plano-mais-opcoes{
    display:block; margin:4px 0 16px; padding:6px 0; border:0 !important; background:none !important; box-shadow:none !important;
    color:var(--gold); font-family:inherit; font-size:var(--fs-sm); font-weight:800; cursor:pointer; text-align:left;
}
.plano-opcoes.hidden{ display:none; }
.ritmo-explica, #ritmoPrevisoes > .plano-vazio{ display:none !important; }

/* Ficha do herói: o nome troca de herói; sem rótulos "Herói" e "Nível" */
.hero-card-seletor > label{ display:none !important; }
.hero-card-seletor .hero-picker{ position:relative; height:0; margin:0; }
.hero-card-seletor .hero-picker-toggle{ position:absolute; width:1px; height:1px; padding:0; opacity:0; pointer-events:none; overflow:hidden; }
button.ficha-trocar{
    display:inline-flex; align-items:center; gap:8px; padding:0; border:0 !important; background:none !important; box-shadow:none !important;
    color:inherit; font:inherit; cursor:pointer; text-align:left;
}
.ficha-trocar-seta{ font-family:'Nunito', sans-serif; font-size:18px; color:var(--text-secondary); }
button.ficha-trocar:active{ transform:scale(.98); }
#heroCurve:not(.aberta){ display:none; }
button.curva-toggle{
    display:block; margin:16px 0 4px; padding:6px 0; border:0 !important; background:none !important; box-shadow:none !important;
    color:var(--gold); font-family:inherit; font-size:var(--fs-sm); font-weight:800; cursor:pointer; text-align:left;
}

/* ===== ACABAMENTO (30/10/2026) =====
   Os mesmos espaços e cantos em toda a app: cartões grandes 24, painéis
   dentro deles 20 (ou 16 quando são campos), margem interior de 20 */
#resultado .resultado-destaque.carta-resultado{ padding:20px; }
.calc-previsao{ padding:20px; }
.dica-ecra{ border-radius:20px; }
#statsScreen .ability-panel{ border-radius:16px; }

/* Tema claro: o fundo das barras da Coleção era branco transparente e não
   se via (não se percebia quanto faltava); botões claros com a mesma sombra
   leve dos outros (Partilhar resultado) */
[data-theme="light"] .roadmap-progress{ background:rgba(11,22,34,.08); }
[data-theme="light"] .ajuda-btn{ background:var(--input-bg); }
[data-theme="light"] .barra-pill{ box-shadow:0 1px 2px rgba(11,22,34,.06); }

/* ===== RESULTADO DA CALCULADORA, MAIS LIMPO (30/10/2026) =====
   Um cartão com tudo o que importa (nível, ouro, cartas e partilhar), uma
   linha para o objetivo que abre ao tocar, e uma linha para o Premium */
#resultado .carta-resultado{ scroll-margin-top:16px; }
#resultado .carta-linha{
    grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:10px;
    margin-top:14px; padding-top:14px; box-shadow:inset 0 1px 0 rgba(143,163,188,.16);
}
#resultado .carta-linha b{
    display:block; font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400;
    font-size:26px; line-height:1.05; color:var(--gold); font-variant-numeric:tabular-nums;
}
#resultado .carta-linha span{ display:block; margin-top:2px; font-size:var(--fs-xs); font-weight:700; line-height:1.25; color:var(--text-secondary); }
#resultado .carta-linha span{ text-transform:none !important; letter-spacing:0 !important; }
[data-theme="light"] #resultado .carta-linha b{ color:var(--text-primary); }
#resultado .carta-partilhar{
    grid-column:3; width:40px; height:40px; padding:0; border:none; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--input-bg); color:var(--text-primary); cursor:pointer;
}
#resultado .carta-partilhar:active{ transform:scale(.94); }

#resultado .resultado-alvo{ margin:4px 4px 0; }
#resultado .resultado-alvo summary{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:12px 0; list-style:none; cursor:pointer;
    font-weight:800; font-size:var(--fs-base); color:var(--text-primary);
}
#resultado .resultado-alvo summary::-webkit-details-marker{ display:none; }
#resultado .resultado-alvo summary em{ font-style:normal; color:var(--gold); white-space:nowrap; }
#resultado .resultado-alvo summary em::after{ content:" ›"; display:inline-block; transition:transform .2s; }
#resultado .resultado-alvo[open] summary em::after{ transform:rotate(90deg); }
#resultado .resultado-alvo-corpo{ padding:4px 0 12px; }
#resultado .resultado-alvo-nivel{ text-transform:none !important; display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:var(--fs-sm); font-weight:700; color:var(--text-secondary); }

#resultado .calc-linha{
    display:flex; align-items:center; gap:12px; width:100%; margin:0; padding:12px 4px;
    border:none; border-top:1px solid rgba(143,163,188,.16); border-radius:0;
    background:none; box-shadow:none; text-align:left; cursor:pointer;
    font:inherit; color:var(--text-secondary);
}
#resultado .calc-linha strong{ flex:1; min-width:0; font-size:var(--fs-sm); font-weight:700; color:inherit; }
#resultado .calc-linha b{ color:var(--gold); font-weight:900; white-space:nowrap; }
#resultado .calc-previsao{ margin-top:12px; }
#resultado .resultado-alvo .resultado-par p{ margin:0; font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400; font-size:24px; line-height:1.1; }
#resultado .resultado-alvo .resultado-par{ text-align:left; justify-content:flex-start; gap:28px; }
#resultado .resultado-alvo summary span{ min-width:0; }


/* Guias de Deck: "+ info" pequeno no cartão; a explicação abre numa folha
   com o ecrã desfocado atrás */
button.deck-mais-info{
    display:inline-block; margin:0; padding:4px 0; min-height:0; border:none; background:none; box-shadow:none;
    font-family:inherit; font-size:var(--fs-sm); font-weight:800; color:var(--text-secondary); cursor:pointer;
}
.deck-card-heroes{ margin-bottom:6px; }
.deck-info-folha .escolha-fundo{
    background:rgba(4,8,16,.4);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.deck-info-folha .escolha-painel{
    top:50%; bottom:auto; left:16px; right:16px; max-width:480px; margin:0 auto;
    padding:20px; border-radius:24px; transform:translateY(-50%);
    box-shadow:0 20px 50px rgba(0,0,0,.45);
    animation:deck-info-entra .24s cubic-bezier(.2,.85,.25,1);
}
.deck-info-folha .escolha-painel::before{ display:none; }
@keyframes deck-info-entra{ from{ opacity:0; transform:translateY(-46%) scale(.97); } to{ opacity:1; transform:translateY(-50%); } }
.deck-info-folha .escolha-topo{ position:relative; justify-content:center; padding:0 36px; }
.deck-info-folha .escolha-topo h3{ text-align:center; }
button.deck-info-fechar{
    position:absolute; top:-8px; right:-10px; width:40px; height:40px; min-height:0; padding:0;
    display:flex; align-items:center; justify-content:center;
    border:none; border-radius:50%; background:none; box-shadow:none; color:var(--text-secondary); cursor:pointer;
}
button.deck-info-fechar:active{ transform:scale(.92); }
.deck-info-folha .deck-card-desc{ margin:4px 0 0; overflow-y:auto; text-align:justify; hyphens:auto; }
.deck-info-folha .deck-card-heroes{ text-align:center; }

/* Guias de Deck: cada equipa como uma ficha (um herói por linha, ponto da
   cor da raridade, nível à direita) e, no "+ info", os heróis 2 a 2 */
.equipa-lista{ list-style:none; margin:2px 0 6px; padding:0; }
.equipa-lista li{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid rgba(143,163,188,.14); }
.equipa-lista li:first-child{ border-top:none; }
.equipa-ponto{ width:8px; height:8px; flex:none; border-radius:50%; background:#8FA3BC; }
.raridade-comum .equipa-ponto{ background:#B9C1CC; }
.raridade-raro .equipa-ponto{ background:#F2B635; }
.raridade-epico .equipa-ponto{ background:#B07CFF; }
.equipa-nome{ flex:1; min-width:0; font-weight:800; font-size:var(--fs-base); color:var(--text-primary); }
.equipa-alt{ font-size:12px; font-weight:700; color:var(--text-secondary); }
.equipa-nivel{ font-size:var(--fs-sm); font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; white-space:nowrap; }
.equipa-nivel.vazio{ color:var(--text-secondary); opacity:.5; font-weight:700; }
.deck-card h3{ margin-bottom:6px !important; }
.deck-info-folha .escolha-topo{ flex-direction:column; gap:8px; margin-bottom:16px; }
#deckInfoEtiqueta{ align-self:center; margin:0; }
.equipa-grelha{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 16px; }
.equipa-quadrado{ padding:10px 12px; border-radius:14px; background:var(--input-bg); text-align:center; }
.equipa-quadrado b{ display:block; font-size:var(--fs-sm); font-weight:800; color:var(--text-primary); line-height:1.25; }
.equipa-quadrado .equipa-nivel{ display:block; margin-top:2px; font-size:12px; }
.deck-info-folha .deck-card-desc{ padding-top:14px; border-top:1px solid rgba(143,163,188,.16); }

/* Tocar num herói da equipa abre a ficha dele: um "›" discreto diz que dá */
.equipa-lista li[data-ver-heroi], .equipa-quadrado[data-ver-heroi]{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.equipa-lista li[data-ver-heroi]::after{ content:"›"; margin-left:-4px; font-size:18px; line-height:1; color:var(--text-secondary); opacity:.5; }
.equipa-lista li[data-ver-heroi]:active, .equipa-quadrado[data-ver-heroi]:active{ opacity:.6; }
.equipa-lista li[data-ver-heroi]:focus-visible, .equipa-quadrado[data-ver-heroi]:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:10px; }

/* Premium: por baixo da esfera, o que se ganha e o preço (antes só
   "Toca na esfera"); só o convite a tocar pulsa */
.pitch-orb-hint{ display:flex; flex-direction:column; align-items:center; gap:8px; max-width:300px; text-align:center; animation:none; }
.pitch-orb-hint > span:first-child{ animation:pitch-pulse 2.4s ease-in-out infinite; }
.pitch-orb-valor{ font-size:var(--fs-sm); font-weight:600; line-height:1.45; color:var(--p-muted); opacity:.9; }
#resultado .calc-linha strong{ font-family:inherit !important; font-size:var(--fs-sm) !important; font-weight:700 !important; }
.pitch-orb-valor{ font-size:var(--fs-xs); font-weight:700; opacity:.75; }
#resultado .resultado-alvo summary span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#resultado .calc-linha.calc-upsell{ border:none !important; border-top:1px solid rgba(143,163,188,.16) !important; border-radius:0 !important; background:none !important; box-shadow:none !important; padding:12px 4px !important; }
/* Sequência: no 1.º dia a chama fica escondida (js/idioma.js) */
button.streak-indicator.hidden{ display:none !important; }

/* Início mais calmo (01/11/2026): só a calculadora. O Guia está na barra de
   baixo; "Guarda os teus heróis" é uma linha por baixo do Calcular */
#linkGuideFromHome{ display:none !important; }
#meusHerois{ margin:0; text-align:center; }
button.meus-herois-link{
    display:inline-block; margin:14px auto 0; padding:8px 12px; min-height:0;
    border:none; background:none; box-shadow:none; font:inherit;
    font-size:var(--fs-sm); font-weight:800; color:var(--text-secondary); cursor:pointer;
}
button.meus-herois-link b{ color:var(--gold); font-weight:800; }

/* Classificação: sem emojis, cada herói numa linha com a explicação por
   baixo e um traço fino a separar (01/11/2026) */
#tierListContent .tier-row{ padding:16px 16px 6px !important; gap:14px !important; align-items:flex-start; }
#tierListContent .tier-heroes{ display:block !important; flex:1; min-width:0; }
#tierListContent .tier-hero{ display:block !important; padding:2px 0 12px !important; margin:0 0 12px !important; border-bottom:1px solid rgba(143,163,188,.14); }
#tierListContent .tier-hero:last-child{ border-bottom:none; margin-bottom:0 !important; }
#tierListContent .tier-hero-name{ display:block; font-size:var(--fs-base) !important; font-weight:800 !important; color:var(--text-primary) !important; margin-bottom:3px; }
#tierListContent .tier-hero-note{ display:block; font-size:13.5px !important; line-height:1.45 !important; color:var(--text-secondary) !important; }
/* Classificação: sem a frase de introdução; nível à direita do nome; tocar abre a ficha */
#tierListSection p[data-i18n="tierListIntro"]{ display:none !important; }
#tierListContent .tier-hero-name{ display:flex !important; align-items:baseline; justify-content:space-between; gap:10px; }
#tierListContent .tier-hero-name .equipa-nivel{ flex:none; }
#tierListContent .tier-hero[data-ver-heroi]{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
#tierListContent .tier-hero[data-ver-heroi]:active{ opacity:.6; }
#tierListContent .tier-hero[data-ver-heroi]:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:8px; }

/* O meu deck (01/11/2026): sem os rótulos "Herói 1…4" (ficam para o leitor
   de ecrã), avaliação num só cartão com o nível de cada herói, e uma troca
   que se faz com um toque */
.deck-slot label{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
button.deck-usar-meus{
    display:block; margin:8px 0 0; padding:4px 0; min-height:0; border:none; background:none; box-shadow:none;
    font:inherit; font-size:var(--fs-sm); font-weight:800; color:var(--gold); cursor:pointer; text-align:left;
}
.deck-nota-card span{ text-transform:none !important; letter-spacing:0 !important; }
.deck-herois{ padding:4px 16px; border-radius:var(--rd-raio, 24px); background:var(--card-bg-start); }
.deck-herois .deck-heroi{
    display:grid !important; grid-template-columns:auto 1fr; column-gap:12px; row-gap:3px; align-items:center;
    background:none !important; border:none !important; box-shadow:none !important; border-radius:0 !important;
    margin:0 !important; padding:14px 0 !important; border-bottom:1px solid rgba(143,163,188,.14) !important;
}
.deck-herois .deck-heroi:last-child{ border-bottom:none !important; }
.deck-herois .tier-hero-name{ display:flex !important; justify-content:space-between; gap:10px; font-weight:800 !important; color:var(--text-primary) !important; }
.deck-herois .tier-hero-note{ grid-column:2; font-size:13.5px !important; line-height:1.45 !important; color:var(--text-secondary) !important; }
.deck-herois .deck-heroi[data-ver-heroi]{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.deck-herois .deck-heroi[data-ver-heroi]:active{ opacity:.6; }
.deck-troca{ display:flex; align-items:center; gap:12px; margin:12px 0 0; padding:14px 16px; border-radius:18px; background:var(--card-bg-start); }
.deck-troca p{ margin:0; flex:1; font-size:var(--fs-sm); font-weight:700; color:var(--text-primary); line-height:1.4; }
.deck-troca button{
    flex:none; min-height:0; padding:9px 16px; border:none; border-radius:999px; box-shadow:none;
    background:var(--gold); color:#2A1A00; font:inherit; font-size:var(--fs-sm); font-weight:800; cursor:pointer;
}
[data-theme="light"] .deck-troca button{ color:#fff; }

/* Seletor de heróis: o nível ao lado dos heróis da pessoa */
.hero-picker-row .hero-picker-nivel{ margin-left:auto; padding-left:10px; font-style:normal; font-size:var(--fs-xs); font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; }
/* O meu deck: o herói que entrou numa troca acende por um instante */
.deck-herois .deck-heroi.acabou-de-entrar{ animation:deck-entrou 1.2s cubic-bezier(.16,1,.3,1); }
@keyframes deck-entrou{ from{ background:var(--gold-dim); } to{ background:transparent; } }
@media (prefers-reduced-motion: reduce){ .deck-herois .deck-heroi.acabou-de-entrar{ animation:none; } }
.hero-picker-list .hero-picker-row.hero-picker-row-meu{ flex:0 0 100% !important; width:100% !important; max-width:100% !important; }

/* Premium de quem já é Premium (01/11/2026): sem a lista do que o Premium
   dá, barra dourada dos dias e um botão "Prolongar o Premium" à altura */
.pitch-body.ja-premium .pitch-tens, .pitch-body.ja-premium .pitch-promises{ display:none !important; }
.pitch-dias-barra{ display:block; align-self:stretch; height:6px; margin:12px 4px 2px; border-radius:6px; background:rgba(242,182,53,.18); overflow:hidden; }
.pitch-dias-barra i{ display:block; height:100%; width:100%; border-radius:inherit; background:linear-gradient(90deg, #F7C95A, #F2B635); }
button.pitch-prolongar{
    position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
    margin:16px 0 0; padding:15px 18px; border:none; border-radius:999px; overflow:hidden; cursor:pointer;
    background:linear-gradient(135deg, #FFE08A 0%, #F2B635 45%, #D9931A 100%); color:#2A1A00;
    font-family:'Lilita One', 'Nunito', sans-serif; font-size:19px; letter-spacing:.2px;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.55), 0 4px 0 #A87412, 0 12px 28px rgba(242,182,53,.28);
}
button.pitch-prolongar.hidden{ display:none; }
button.pitch-prolongar svg{ width:22px; height:22px; flex:none; fill:currentColor; }
button.pitch-prolongar::after{
    content:""; position:absolute; top:0; bottom:0; left:-40%; width:30%;
    background:linear-gradient(105deg, transparent, rgba(255,255,255,.65), transparent);
    transform:skewX(-18deg); animation:pitch-prolongar-brilho 3.2s ease-in-out infinite;
}
@keyframes pitch-prolongar-brilho{ 0%, 55%{ left:-40%; } 100%{ left:130%; } }
button.pitch-prolongar:active{ transform:translateY(2px); box-shadow:inset 0 2px 0 rgba(255,255,255,.55), 0 2px 0 #A87412; }
@media (prefers-reduced-motion: reduce){ button.pitch-prolongar::after{ animation:none; display:none; } }

/* Plano com a Coleção vazia (01/11/2026): título ao centro, três cartas
   vazias em leque (uma por raridade), a mensagem e o botão dourado */
#colecaoVistaPlano.plano-sem-herois #planoEvolucao > *:not(h2):not(#planoSemHerois){ display:none !important; }
#colecaoVistaPlano.plano-sem-herois #ritmoCard{ display:none !important; }
#colecaoVistaPlano.plano-sem-herois #planoEvolucao{ padding-bottom:30px !important; }
#colecaoVistaPlano.plano-sem-herois #planoEvolucao h2{ text-align:center; }
#planoSemHerois:not(.hidden){ display:flex !important; flex-direction:column; align-items:center; padding:8px 0 0 !important; background:none !important; }
#planoSemHerois::before{ content:none !important; display:none !important; }
.plano-leque{ position:relative; width:200px; height:150px; margin:6px 0 22px; }
.plano-leque::after{ content:""; position:absolute; left:50%; bottom:-14px; width:150px; height:24px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(closest-side, rgba(242,182,53,.22), transparent); }
.plano-leque-carta{
    position:absolute; top:6px; left:50%; width:86px; height:116px; margin-left:-43px; border-radius:16px; overflow:hidden;
    background:linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, #13233a), #0f1c2e 75%);
    box-shadow:inset 0 0 0 1.5px var(--c), 0 10px 24px rgba(0,0,0,.35);
}
.plano-leque-carta::before{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 45%, transparent 60%); }
.plano-leque-carta.c1{ --c:#B9C1CC; transform:translateX(-52px) rotate(-12deg); opacity:.75; }
.plano-leque-carta.c3{ --c:#B07CFF; transform:translateX(52px) rotate(12deg); opacity:.75; }
.plano-leque-carta.c2{ --c:#F2B635; top:0; z-index:2; display:flex; align-items:center; justify-content:center; }
.plano-leque-carta.c2 b{ position:relative; font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400; font-size:40px; line-height:1; color:#F2B635; }
[data-theme="light"] .plano-leque-carta{ background:linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, #ffffff), #f3f6fb 75%); box-shadow:inset 0 0 0 1.5px var(--c), 0 10px 24px rgba(11,22,34,.12); }
#planoSemHerois .plano-vazio{ max-width:270px; margin:0 0 18px !important; text-align:center; color:var(--text-secondary); line-height:1.5; }
#planoSemHerois button.vazio-acao{
    min-width:220px; padding:14px 24px !important; border:none !important; border-radius:999px !important; cursor:pointer;
    background:linear-gradient(180deg, #F7C95A, #F2B635) !important; color:#2A1A00 !important;
    font-family:'Lilita One', 'Nunito', sans-serif !important; font-size:17px !important; font-weight:400 !important;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 #A87412 !important;
}
/* Progresso vazio: o mesmo leque de cartas e botão dourado do Plano */
.card.progresso-vazio{ padding:26px 20px 30px !important; }
.card.progresso-vazio::before{ content:none !important; display:none !important; }
.card.progresso-vazio .plano-leque{ margin:2px 0 22px; }
.card.progresso-vazio .plano-leque-carta.c2 b{ font-size:30px; }
.card.progresso-vazio p{ max-width:270px; margin:0 auto 18px !important; text-align:center; color:var(--text-secondary); line-height:1.5; }
.card.progresso-vazio button.vazio-acao{
    min-width:220px; padding:14px 24px !important; border:none !important; border-radius:999px !important; cursor:pointer;
    background:linear-gradient(180deg, #F7C95A, #F2B635) !important; color:#2A1A00 !important;
    font-family:'Lilita One', 'Nunito', sans-serif !important; font-size:17px !important; font-weight:400 !important;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 #A87412 !important;
}
/* Convidar amigos: uma regra só, e a contagem na cor do texto secundário */
.convite-contagem{ color:var(--gold) !important; font-weight:800 !important; font-size:var(--fs-base) !important; line-height:1.4; max-width:280px; margin-left:auto !important; margin-right:auto !important; }
.convite-regra{ margin:6px 0 0; text-align:center; font-size:var(--fs-sm); color:var(--text-secondary); }

/* Tutorial de entrada: o passo do Premium com a carta Premium (01/11/2026) */
.onboarding-carta-premium{
    position:relative; width:96px; height:128px; margin:10px auto 18px; border-radius:16px; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    background:linear-gradient(150deg, #5B21B6 0%, #7C3AED 45%, #1E3A8A 100%);
    box-shadow:inset 0 0 0 2px #F2B635, 0 12px 30px rgba(124,58,237,.35); transform:rotate(-4deg);
}
.onboarding-carta-premium::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%); }
.onboarding-carta-premium svg{ width:40px; height:40px; fill:#F2B635; }
.onboarding-carta-premium b{ font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400; font-size:17px; color:#FFD877; }
/* Tutorial: o sino solto, sem quadrado à volta */
.onboarding-avisos .avisos-sino{ width:auto !important; height:auto !important; background:none !important; border-radius:0 !important; font-size:42px !important; margin:0 auto 10px !important; filter:drop-shadow(0 6px 14px rgba(242,182,53,.35)); }

/* Conversa com o suporte (01/11/2026): topo com o logótipo do suporte,
   bolhas de app de mensagens, separador do dia e envio redondo. Quem é
   Premium vê a coroa no logótipo (como no início) e tons dourados */
#conversaVista .conversa-topo{ display:flex; align-items:center; gap:12px; padding:6px 0 16px; margin-bottom:6px; border-bottom:1px solid rgba(143,163,188,.14); }
.conversa-quem{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.conversa-avatar{ position:relative; width:44px; height:44px; flex:none; }
.conversa-avatar img{ width:44px; height:44px; display:block; border-radius:14px; box-shadow:0 0 0 2px rgba(143,163,188,.25); }
.conversa-avatar::after{ content:""; position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 2.5px var(--bg-body-start, #0F1C2E); }
.conversa-coroa{ display:none; position:absolute; top:-9px; right:-8px; width:22px; height:22px; border-radius:50%; align-items:center; justify-content:center; background:var(--bg-body-start, #0F1C2E); }
.conversa-coroa svg{ width:15px; height:15px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
body.is-premium .conversa-coroa{ display:flex; }
body.is-premium .conversa-avatar img{ box-shadow:0 0 0 2px var(--bg-body-start, #0F1C2E), 0 0 0 3.5px #F2B635; }
[data-theme="light"] .conversa-coroa{ background:#EEF2F7; }
.conversa-nome{ display:block; font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400; font-size:19px; color:var(--text-primary); line-height:1.1; }
.conversa-estado{ display:block; margin-top:3px; font-size:12.5px; font-weight:700; color:var(--text-secondary); }

#conversaVista .conversa-fio{ display:flex; flex-direction:column; gap:14px; padding:10px 0 18px; }
.conversa-dia{ align-self:center; padding:4px 12px; border-radius:999px; background:var(--input-bg); font-size:11.5px; font-weight:800; color:var(--text-secondary); }
#conversaVista .bolha{ max-width:82%; padding:12px 15px 9px !important; border:none !important; box-shadow:none !important; font-size:15px; line-height:1.45; }
#conversaVista .bolha p{ margin:0; }
#conversaVista .bolha small{ display:block; margin-top:5px; font-size:11px; font-weight:700; opacity:.6; text-align:right; }
#conversaVista .bolha-eu{ align-self:flex-end; border-radius:20px 20px 6px 20px !important; background:#24406A !important; color:#fff !important; }
#conversaVista .bolha-suporte{ align-self:flex-start; position:relative; margin-left:38px; border-radius:20px 20px 20px 6px !important; background:var(--card-bg-start) !important; color:var(--text-primary) !important; }
#conversaVista .bolha-suporte .bolha-quem{ display:none; }
#conversaVista .bolha-suporte::before{ content:""; position:absolute; left:-38px; bottom:0; width:28px; height:28px; border-radius:9px; background:url(icons/marca-104.webp) center / cover; }
body.is-premium #conversaVista .bolha-eu{ background:linear-gradient(135deg, #FFE08A, #F2B635 55%, #E0A21F) !important; color:#2A1A00 !important; }
body.is-premium #conversaVista .bolha-suporte{ box-shadow:inset 0 0 0 1px rgba(242,182,53,.35) !important; }
[data-theme="light"] #conversaVista .bolha-eu{ background:#1F4E8C !important; }
[data-theme="light"] body.is-premium #conversaVista .bolha-eu,
[data-theme="light"].is-premium #conversaVista .bolha-eu{ background:linear-gradient(135deg, #FFE08A, #F2B635 55%, #E0A21F) !important; color:#2A1A00 !important; }

#conversaVista .conversa-rodape{ background:none !important; padding:8px 20px 12px !important; border:none !important; box-shadow:none !important; }
#conversaVista .conversa-escrever{ display:flex; align-items:flex-end; gap:10px; padding:6px 6px 6px 18px; border-radius:28px; background:var(--card-bg-start); box-shadow:inset 0 0 0 1px rgba(143,163,188,.14); }
body.is-premium #conversaVista .conversa-escrever{ box-shadow:inset 0 0 0 1px rgba(242,182,53,.4); }
#conversaVista .conversa-escrever textarea{ flex:1; min-height:44px; max-height:120px; padding:12px 0 !important; border:none !important; background:none !important; box-shadow:none !important; resize:none; font:inherit; font-size:16px; color:var(--text-primary); }
#conversaVista #btnResponderConversa{ width:46px; height:46px; min-height:0; flex:none; padding:0 !important; margin:0 !important; border-radius:50% !important; display:flex; align-items:center; justify-content:center; background:#24406A !important; box-shadow:none !important; }
#conversaVista #btnResponderConversa svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
[data-theme="light"] #conversaVista #btnResponderConversa{ background:#1F4E8C !important; }
body.is-premium #conversaVista #btnResponderConversa{ background:linear-gradient(135deg, #FFE08A, #F2B635 55%, #D9931A) !important; }
body.is-premium #conversaVista #btnResponderConversa svg{ stroke:#2A1A00; }

/* Novidades (01/11/2026): a mais recente num cartão com brilho e as
   anteriores numa linha do tempo que abre ao tocar */
#whatsNewScreen header .subtitle{ display:none; }
.nv-destaque{
    position:relative; margin:4px 0 26px; padding:22px 20px 20px; border-radius:24px; overflow:hidden;
    background:radial-gradient(120% 90% at 100% 0%, rgba(124,58,237,.35), transparent 55%), linear-gradient(160deg, #1B2E4B, #13233A);
    box-shadow:inset 0 0 0 1.5px rgba(242,182,53,.55), 0 16px 34px rgba(0,0,0,.35);
}
.nv-destaque::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.10) 48%, transparent 60%); pointer-events:none; }
.nv-chip{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:linear-gradient(135deg, #FFE08A, #F2B635 55%, #D9931A); color:#2A1A00; font-size:11px; font-weight:900; letter-spacing:.4px; text-transform:uppercase; }
.nv-destaque h2{ margin:12px 0 8px !important; font-family:'Lilita One', 'Nunito', sans-serif; font-weight:400; font-size:26px !important; color:#fff !important; line-height:1.1; }
.nv-destaque p{ margin:0 !important; font-size:15px; line-height:1.55; color:#C9D6E6 !important; }
.nv-linha{ position:relative; margin:0; padding:0 0 0 26px; list-style:none; }
.nv-linha::before{ content:""; position:absolute; left:7px; top:8px; bottom:8px; width:2px; border-radius:2px; background:linear-gradient(180deg, rgba(242,182,53,.6), rgba(143,163,188,.15)); }
.nv-item{ position:relative; padding:0 0 4px; }
.nv-item::before{ content:""; position:absolute; left:-24px; top:20px; width:12px; height:12px; border-radius:50%; background:var(--bg-body-start, #0F1C2E); box-shadow:inset 0 0 0 2.5px rgba(143,163,188,.55); }
.nv-item:first-child::before{ box-shadow:inset 0 0 0 2.5px #F2B635; }
.nv-item summary{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 4px; list-style:none; cursor:pointer; font-weight:800; font-size:16px; color:var(--text-primary); border-bottom:1px solid rgba(143,163,188,.12); }
.nv-item summary::-webkit-details-marker{ display:none; }
.nv-item summary::after{ content:"›"; color:var(--text-secondary); opacity:.6; font-size:20px; transition:transform .2s; }
.nv-item details[open] summary::after{ transform:rotate(90deg); }
.nv-item p{ margin:10px 4px 14px !important; font-size:14px; line-height:1.5; color:var(--text-secondary) !important; }
[data-theme="light"] .nv-destaque{ background:radial-gradient(120% 90% at 100% 0%, rgba(124,58,237,.16), transparent 55%), linear-gradient(160deg, #FFFFFF, #F5F0FF); box-shadow:inset 0 0 0 1.5px rgba(217,147,26,.6), 0 14px 30px rgba(11,22,34,.10); }
[data-theme="light"] .nv-destaque h2{ color:#14243A !important; }
[data-theme="light"] .nv-destaque p{ color:#4A5A70 !important; }
[data-theme="light"] .nv-item::before{ background:#EEF2F7; }