/* Tipos de letra guardados na própria app (fonts/, licença SIL OFL 1.1):
   abrem mais depressa, funcionam offline e a app não contacta a Google.
   Cada ficheiro é "variável": um só para todos os pesos. Só o alfabeto
   latino (chega para as 6 línguas da app). */
@font-face{
    font-family:"Nunito";
    font-style:normal;
    font-weight:400 800;
    font-display:swap;
    src:url("fonts/nunito.woff2") format("woff2");
}
@font-face{
    font-family:"Baloo 2";
    font-style:normal;
    font-weight:500 800;
    font-display:swap;
    src:url("fonts/baloo2.woff2") format("woff2");
}
@font-face{
    font-family:"Lilita One";
    font-style:normal;
    /* Só existe em peso normal: declarada para todos os pesos, para o
       telemóvel nunca inventar um negrito (no iPhone engrossava as letras
       até ficarem ilegíveis, ex.: "Já és Premium!") */
    font-weight:400 900;
    font-display:swap;
    src:url("fonts/lilita-one.woff2") format("woff2");
}

/* Tudo com box-sizing:border-box — padding e borda contam dentro da
   largura, por isso "width:100%" nunca transborda. */
*,
*::before,
*::after{
    box-sizing:border-box;
}

:root{
    /* Escala tipográfica — usar sempre estes, nunca px soltos */
    --fs-2xs:10px;
    --fs-xs:11px;
    --fs-sm:13px;
    --fs-base:15px;
    --fs-md:17px;
    --fs-lg:20px;
    --fs-xl:22px;
    --fs-2xl:28px;
    --fs-3xl:34px;
    --fs-display:44px;

    /* Cantos arredondados */
    --radius-xs:4px;
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:20px;
    --radius-pill:999px;

    --bg-body-start:#1d1538;
    --bg-body-end:#0b0818;

    /* Fundo "Arena celeste" (ver body::before / body::after) */
    --bg-nebula:rgba(123,44,255,.34);
    --bg-star:rgba(255,214,120,.20);
    --bg-star-glow:rgba(255,190,60,.10);
    --bg-ring:rgba(200,180,255,.065);
    --bg-grain:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27><filter id=%27n%27><feTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/><feColorMatrix values=%270 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0%27/></filter><rect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/></svg>");
    --text-primary:#ffffff;
    --text-secondary:#a8a3c0;
    --card-bg-start:#332a52;
    --card-bg-end:#1c1832;
    --card-border:#453a68;
    --input-bg:#241f3d;
    --surface-bg:#372c58;
    --surface-bg-alt:#2c2547;
    --nav-bg:#15111f;
    --nav-border:#332a52;
    --shadow-color:rgba(0,0,0,.45);
    --heading-accent:rgb(235, 241, 177);
    --accent-teal:#2dd4bf;
    --gold:#f6d365;
    --gold-dim:rgba(246,211,101,.12);
}

[data-theme="light"]{
    --bg-body-start:#f8f5fe;
    --bg-body-end:#ebe4f8;

    --bg-nebula:rgba(150,105,255,.20);
    --bg-star:rgba(255,190,80,.45);
    --bg-star-glow:rgba(255,186,73,.22);
    --bg-ring:rgba(95,60,180,.075);
    --bg-grain:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27><filter id=%27n%27><feTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/><feColorMatrix values=%270 0 0 0 .25  0 0 0 0 .15  0 0 0 0 .45  0 0 0 .06 0%27/></filter><rect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/></svg>");
    --text-primary:#1c2431;
    --text-secondary:#5b6472;
    --card-bg-start:#ffffff;
    --card-bg-end:#f7f4fc;
    --card-border:#e1d9f1;
    --input-bg:#ffffff;
    --surface-bg:#f2eefa;
    --surface-bg-alt:#ece6f7;
    --nav-bg:#ffffff;
    --nav-border:#e1d9f1;
    --shadow-color:rgba(60,30,120,.10);
    --heading-accent:#8a7a1f;
    --accent-teal:#0f766e; /* mais escuro: contraste ≥ 4,5 no fundo claro */
    --gold:#8a5f00; /* dourado mais escuro: lê-se bem no fundo claro (contraste ≥ 4,5) */
    --gold-dim:rgba(200,150,12,.12);
}

/* Botões e campos herdam a letra da app (por omissão o browser usa
   Arial, e os botões pareciam de outro site) */
button,
input,
select,
textarea{
    font-family:inherit;
}

html {
    scroll-padding-top: env(safe-area-inset-top, 0px);
    /* Sem isto, em ecrãs curtos o gradiente do body repete-se a meio
       do ecrã e aparece uma "faixa" de outra cor. */
    min-height: 100%;
    /* Tira o "elástico" da página inteira ao arrastar para lá do fim
       — numa app nativa só o conteúdo faz scroll, não a janela. */
    overscroll-behavior-y: none;
}

/* Cor de base por trás de tudo (aparece também no "puxar" do scroll) */
html{
    background:var(--bg-body-end);
}

body {
    color: var(--text-primary);
    font-family: 'Nunito', Arial, sans-serif;

    max-width: 500px;
    margin: 0 auto;
    padding:24px 20px 90px 20px;
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    transition: background .3s ease, color .3s ease;
    position: relative;
}

.ability-toggle{
    width:100%;
    margin-top:14px;
    padding:12px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--surface-bg-alt);
    border:2px solid var(--card-border);
    border-radius:var(--radius-md);
    color:var(--text-primary);
    font-size:var(--fs-base);
    font-weight:bold;
    font-family:inherit;
    cursor:pointer;
}

.ability-toggle-chevron{
    transition:.2s;
    color:var(--text-secondary);
}

.ability-toggle.expanded .ability-toggle-chevron{
    transform:rotate(180deg);
    color:var(--gold);
}

.ability-panel{
    margin-top:8px;
    padding:14px 16px;
    background:rgba(255,215,0,.06);
    border:2px solid rgba(255,215,0,.3);
    border-radius:var(--radius-md);
}

.ability-panel strong{
    display:block;
    color:var(--gold);
    font-size:var(--fs-base);
    margin-bottom:6px;
}

.ability-panel p{
    font-size:var(--fs-sm);
    line-height:1.5;
    color:var(--text-secondary);
    margin:0;
}

.mini-rarity-tag{
    display:block;
    margin-top:-12px;
    margin-bottom:18px;
    font-size:var(--fs-xs);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
}

.mini-rarity-tag.raridade-comum{ color:#9ca3af; }
.mini-rarity-tag.raridade-raro{ color:var(--gold); }
.mini-rarity-tag.raridade-epico{ color:#b66dff; }

.share-card{
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    margin-bottom:25px;
    background:linear-gradient(135deg, #1e1640 0%, #16112e 60%, #1a1535 100%);
    border:1.5px solid rgba(192,132,252,.25);
    box-shadow:0 4px 32px rgba(130,80,220,.18), 0 1px 0 rgba(255,255,255,.04) inset;
}

.share-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(40px);
    opacity:.35;
    pointer-events:none;
}

.share-orb-1{
    width:180px;
    height:180px;
    top:-70px;
    right:-50px;
    background:radial-gradient(circle, #a855f7, transparent 70%);
}

.share-orb-2{
    width:150px;
    height:150px;
    bottom:-60px;
    left:-40px;
    background:radial-gradient(circle, #f6d365, transparent 70%);
}

.share-card-inner{
    position:relative;
    z-index:1;
    padding:28px 24px;
    text-align:center;
}

.share-app-icon{
    font-size:var(--fs-display);
    margin-bottom:10px;
}

.share-title{
    font-size:var(--fs-lg);
    margin-bottom:8px;
    color:#ffffff;
}

.share-desc{
    font-size:var(--fs-base);
    color:#b7aed6;
    margin-bottom:20px;
    line-height:1.5;
}

.share-native-btn{
    width:100%;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:linear-gradient(180deg,#f6d365,#d4a017);
    border:none;
    border-radius:var(--radius-md);
    color:#222;
    font-family:inherit;
    font-size:var(--fs-base);
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

.share-native-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(255,215,0,.3);
}

.share-native-icon{
    display:flex;
}

.share-social-row{
    display:flex;
    gap:8px;
    margin-top:14px;
}

.share-social-btn{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    padding:12px 4px;
    border-radius:var(--radius-md);
    border:1.5px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.04);
    color:#cbd5e1;
    font-family:inherit;
    font-size:var(--fs-2xs);
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.share-social-btn.whatsapp{ color:#25d366; border-color:rgba(37,211,102,.25); }
.share-social-btn.whatsapp:hover{ border-color:#25d366; background:rgba(37,211,102,.1); }
.share-social-btn.twitter{ color:#e7e9ea; border-color:rgba(231,233,234,.2); }
.share-social-btn.twitter:hover{ border-color:#e7e9ea; background:rgba(255,255,255,.08); }
.share-social-btn.reddit{ color:#ff4500; border-color:rgba(255,69,0,.25); }
.share-social-btn.reddit:hover{ border-color:#ff4500; background:rgba(255,69,0,.1); }
.share-social-btn.copy:hover{ border-color:var(--gold); color:var(--gold); background:rgba(255,215,0,.1); }
.share-social-btn.copy.copied{ border-color:#4ade80; color:#4ade80; background:rgba(74,222,128,.1); }

.share-copy-icon-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
}

.share-divider{
    height:1px;
    background:rgba(255,255,255,.08);
    margin:20px 0 16px 0;
}

.share-rate-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    text-align:left;
}

.share-rate-title{
    font-size:var(--fs-base);
    font-weight:700;
    color:#ffffff;
    margin-bottom:2px;
}

.share-rate-desc{
    font-size:var(--fs-sm);
    color:#8892a6;
}

.share-rate-btn{
    flex-shrink:0;
    padding:10px 16px;
    border-radius:var(--radius-md);
    border:1.5px solid var(--gold);
    background:transparent;
    color:var(--gold);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:700;
    cursor:pointer;
}

[data-theme="light"] .share-card{
    background:linear-gradient(135deg, #f5eeff 0%, #efe6fb 55%, #f3ecfb 100%);
    border:1.5px solid rgba(147,51,234,.18);
    box-shadow:0 4px 24px rgba(130,80,220,.10), 0 1px 0 rgba(255,255,255,.5) inset;
}
[data-theme="light"] .share-title,
[data-theme="light"] .share-rate-title{
    color:var(--text-primary);
}
[data-theme="light"] .share-desc,
[data-theme="light"] .share-rate-desc{
    color:var(--text-secondary);
}
[data-theme="light"] .share-divider{
    background:linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent);
}
[data-theme="light"] .share-social-btn{
    border-color:rgba(0,0,0,.12);
    background:rgba(0,0,0,.03);
    color:var(--text-secondary);
}
[data-theme="light"] .share-social-btn.whatsapp{
    color:#25d366;
    border-color:rgba(37,211,102,.3);
}
[data-theme="light"] .share-social-btn.whatsapp:hover{
    background:rgba(37,211,102,.1);
}
[data-theme="light"] .share-social-btn.reddit{
    color:#ff4500;
    border-color:rgba(255,69,0,.3);
}
[data-theme="light"] .share-social-btn.reddit:hover{
    background:rgba(255,69,0,.1);
}
[data-theme="light"] .share-social-btn.twitter{
    color:#0f1419;
    border-color:rgba(15,20,25,.18);
}
[data-theme="light"] .share-social-btn.twitter:hover{
    background:rgba(15,20,25,.06);
    border-color:rgba(15,20,25,.3);
}

.rarity-segmented{
    display:flex;
    gap:8px;
    margin-bottom:18px;
}

.rarity-seg-btn{
    flex:1;
    padding:12px 8px;
    border-radius:var(--radius-md);
    border:2px solid var(--card-border);
    background:var(--input-bg);
    color:var(--text-secondary);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

/* A escolhida fica pintada com a cor da raridade (antes o "Comum"
   escolhido era cinzento sobre cinzento e parecia um botão desligado) */
.rarity-seg-btn.raridade-comum.active{
    border-color:#94a3b8;
    color:#fff;
    background:linear-gradient(180deg, #94a3b8, #64748b);
}

.rarity-seg-btn.raridade-raro.active{
    border-color:#d4a017;
    color:#2a1700;
    background:linear-gradient(180deg, #f6d365, #d4a017);
}

.rarity-seg-btn.raridade-epico.active{
    border-color:#b66dff;
    color:#fff;
    background:linear-gradient(180deg, #c084fc, #9333ea);
}

.hero-picker{
    position:relative;
    margin-bottom:18px;
}

.hero-picker-toggle{
    width:100%;
    height:58px;
    padding:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--input-bg);
    border:2px solid var(--card-border);
    border-radius:var(--radius-md);
    color:var(--text-primary);
    font-size:var(--fs-md);
    font-weight:bold;
    font-family:inherit;
    cursor:pointer;
}

.hero-picker-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.hero-picker-caret{
    font-size:var(--fs-sm);
    opacity:.6;
    flex-shrink:0;
    margin-left:8px;
}

.hero-picker-menu{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    right:0;
    background:var(--card-bg-start);
    border:2px solid var(--card-border);
    border-radius:var(--radius-lg);
    box-shadow:0 15px 35px rgba(0,0,0,.5);
    z-index:500;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.hero-picker-search{
    margin:10px;
    width:calc(100% - 20px);
    height:44px;
    padding:0 12px;
    border-radius:var(--radius-md);
    border:2px solid var(--card-border);
    background:var(--input-bg);
    color:var(--text-primary);
    font-size:16px; /* abaixo de 16px o iPhone faz zoom ao tocar no campo */
    font-family:inherit;
    box-sizing:border-box;
}

.hero-picker-list{
    overflow-y:auto;
    max-height:360px;
    padding:8px 6px 10px 6px;
    display:flex;
    flex-wrap:wrap;
}

.hero-picker-group-label{
    width:100%;
    padding:10px 8px 6px 8px;
    font-size:var(--fs-sm);
    text-transform:uppercase;
    letter-spacing:1.5px;
    font-weight:800;
    border-bottom:2px solid currentColor;
    margin:0 0 4px 0;
    box-sizing:border-box;
}

.hero-picker-group-label.raridade-comum{ color:#9ca3af; }
.hero-picker-group-label.raridade-raro{ color:var(--gold); }
.hero-picker-group-label.raridade-epico{ color:#b66dff; }

.hero-picker-row{
    width:50%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    text-align:left;
    padding:11px 8px;
    margin-bottom:2px;
    border-radius:var(--radius-sm);
    background:none;
    border:none;
    color:var(--text-primary);
    font-size:var(--fs-base);
    font-family:inherit;
    cursor:pointer;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.hero-picker-row::before{
    content:"";
    flex-shrink:0;
    width:8px;
    height:8px;
    margin-right:7px;
    border-radius:50%;
    background:currentColor;
}

.hero-picker-row.raridade-comum{ color:#9ca3af; }
.hero-picker-row.raridade-raro{ color:var(--gold); }
.hero-picker-row.raridade-epico{ color:#b66dff; }

.hero-picker-row span{
    color:var(--text-primary);
    overflow:hidden;
    text-overflow:ellipsis;
}

.hero-picker-row:hover{
    background:rgba(255,215,0,.08);
}

/* Aviso "sem ligação" — fixo no topo, por cima de tudo */
.offline-banner{
    position:fixed;
    top:calc(env(safe-area-inset-top, 0px) + 8px);
    left:50%;
    transform:translateX(-50%);
    z-index:99998;
    max-width:calc(100vw - 32px);
    padding:8px 14px;
    border-radius:var(--radius-pill);
    background:#3b2f12;
    border:1px solid var(--gold);
    color:#ffe9a8;
    font-size:var(--fs-sm);
    font-weight:700;
    text-align:center;
    box-shadow:0 8px 20px rgba(0,0,0,.4);
}
.offline-banner.hidden{
    display:none;
}

/* 👁️ dentro do campo da palavra-passe */
.campo-password{
    position:relative;
    margin-bottom:18px;
}
.campo-password input{
    margin-bottom:0;
    padding-right:52px;
}
.campo-password button.ver-password{
    position:absolute;
    top:0;
    right:4px;
    width:46px;
    height:100%;
    padding:0;
    border:none;
    background:none;
    box-shadow:none;
    font-size:var(--fs-lg);
    cursor:pointer;
    opacity:.75;
}

/* Regras da palavra-passe: ganham ✅ à medida que se escreve */
.password-rules{
    list-style:none;
    margin:-8px 0 16px;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
    font-size:var(--fs-sm);
    color:var(--text-secondary);
}
.password-rules li::before{
    content:"○ ";
}
.password-rules li.cumprida{
    color:#4ade80;
}
.password-rules li.cumprida::before{
    content:"✓ ";
}

/* Heróis fora da amostra grátis (Stats, sem Premium) */
.hero-picker-row-locked span{
    opacity:.45;
}
.hero-picker-lock{
    margin-left:auto;
    padding-left:6px;
    font-style:normal;
    font-size:var(--fs-xs);
    flex-shrink:0;
}

/* Faixa da amostra grátis, no topo das Stats */
.stats-free-banner{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin-bottom:16px;
    padding:12px 14px;
    border:1.5px dashed var(--gold);
    border-radius:var(--radius-lg);
    background:var(--gold-dim);
}
.stats-free-banner.hidden{
    display:none;
}
.stats-free-banner p{
    margin:0;
    font-size:var(--fs-sm);
    font-weight:700;
    line-height:1.45;
    text-align:center;
    text-wrap:balance;
    color:var(--text-primary);
}
.stats-free-banner .premium-btn.stats-free-btn{
    width:100%;
    height:44px;
    margin:0;
    padding:0 14px;
    font-size:var(--fs-base);
}

/* Painel por cima do ecrã (seletores estreitos, ex.: Comparar) */
.hero-picker-backdrop{
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(5,3,15,.6);
    backdrop-filter:blur(2px);
}
.hero-picker-menu.hero-picker-sheet{
    position:fixed;
    top:calc(env(safe-area-inset-top, 0px) + 56px);
    bottom:auto;
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:min(440px, calc(100vw - 24px));
    max-height:calc(100dvh - 120px - env(safe-area-inset-top, 0px));
    z-index:1001;
}
.hero-picker-sheet .hero-picker-list{
    flex:1;
    min-height:0;
    max-height:none;
}

.hero-picker-empty{
    padding:20px;
    text-align:center;
    color:var(--text-secondary);
    font-size:var(--fs-base);
}

.home-header{
    position:relative;
    text-align:center;
}

.home-header::after{
    content:"⚜️ ⚔️ ⚜️";
    display:block;
    margin-top:10px;
    font-size:var(--fs-base);
    letter-spacing:6px;
    opacity:.55;
}

.streak-indicator{
    text-align:center;
    font-size:var(--fs-sm);
    font-weight:bold;
    color:var(--gold);
    margin-top:-6px;
    margin-bottom:0;
}

.badges-row{
    display:flex;
    gap:8px;
}

.badge{
    width:52px;
    height:56px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    background:var(--surface-bg-alt);
    border:2px solid var(--card-border);
    border-radius:var(--radius-md);
    opacity:.45;
    transition:transform .15s ease;
}

.badge.unlocked{
    opacity:1;
    transform:translateY(-2px);
}

.badge-icon{
    font-size:var(--fs-lg);
    line-height:1;
}

.badge-label{
    display:block;
    font-size:var(--fs-2xs);
    font-weight:800;
    letter-spacing:.3px;
    color:var(--text-secondary);
}

/* Cor própria por nível, só quando desbloqueado — dá sensação real de
   progressão (bronze → prata → ouro → diamante) em vez de serem todos
   iguais. */
.badge.bronze.unlocked{
    border-color:#cd7f32;
    background:rgba(205,127,50,.14);
    box-shadow:0 0 10px rgba(205,127,50,.35);
}
.badge.bronze.unlocked .badge-label{ color:#e3a66e; }

.badge.prata.unlocked{
    border-color:#8a97a8;
    background:rgba(138,151,168,.18);
    box-shadow:0 0 10px rgba(138,151,168,.4);
}
.badge.prata.unlocked .badge-label{ color:#8a97a8; }

.badge.ouro.unlocked{
    border-color:var(--gold);
    background:rgba(255,215,0,.14);
    box-shadow:0 0 12px rgba(255,215,0,.4);
}
.badge.ouro.unlocked .badge-label{ color:var(--gold); }

.badge.diamante.unlocked{
    border-color:#7ee8fa;
    background:rgba(126,232,250,.14);
    box-shadow:0 0 14px rgba(126,232,250,.45);
}
.badge.diamante.unlocked .badge-label{ color:#7ee8fa; }

.theme-options{
    display:flex;
    gap:6px;
}
.theme-option{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--surface-bg-alt);
    border:2px solid var(--card-border);
    border-radius:var(--radius-md);
    color:var(--text-secondary);
    cursor:pointer;
    transition:.2s;
}

.theme-option-icon{
    font-size:var(--fs-md);
}

.theme-option:hover{
    border-color:var(--gold);
}

.theme-option.active{
    background:linear-gradient(180deg,#f6d365,#d4a017);
    border-color:var(--gold);
    color:#222;
}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.card-featured{
    border-left:4px solid var(--gold);
}

.card-compact{
    padding:16px 20px;
}

.card-compact + .card-compact{
    margin-top:-13px;
}

.settings-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:6px 0;
}

.settings-row + .settings-row{
    border-top:1px solid var(--card-border);
    margin-top:6px;
    padding-top:14px;
}

.settings-row-label{
    font-size:var(--fs-base);
    font-weight:bold;
    color:var(--text-primary);
}

.mini-btn{
    background:var(--surface-bg-alt);
    color:var(--text-secondary);
    border:2px solid var(--card-border);
    border-radius:var(--radius-md);
    padding:8px 14px;
    font-size:var(--fs-sm);
    font-weight:bold;
    cursor:pointer;
}
.auth-tabs{
    display:flex;
    gap:8px;
    margin-bottom:22px;
    background:var(--surface-bg-alt);
    border-radius:var(--radius-md);
    padding:4px;
}

.auth-tab{
    flex:1;
    background:none;
    border:none;
    padding:12px;
    border-radius:var(--radius-sm);
    color:var(--text-secondary);
    font-weight:bold;
    font-size:var(--fs-base);
    cursor:pointer;
}

.auth-tab.active{
    background:linear-gradient(180deg,#f6d365,#d4a017);
    color:#222;
}

.auth-switch{
    text-align:center;
    color:var(--gold);
    font-size:var(--fs-sm);
    font-weight:bold;
    cursor:pointer;
    margin-top:14px;
    margin-bottom:0;
}

.auth-hint{
    font-size:var(--fs-sm);
    color:var(--text-secondary);
    margin-top:-12px;
    margin-bottom:18px;
    line-height:1.4;
}

.auth-switch:hover{
    text-decoration:underline;
}

#btnAuthLogin,
#btnAuthSignup,
#btnAuthReset,
#btnAuthNewPassword{
    width:100%;
    font-family:'Baloo 2', 'Nunito', Arial, sans-serif;
    letter-spacing:.2px;
    height:56px;
    padding:15px;
    border:none;
    border-radius:var(--radius-md);
    background:linear-gradient(180deg,#f6d365,#d4a017);
    color:#222;
    font-size:var(--fs-md);
    font-weight:bold;
    cursor:pointer;
}

.app-title{
    font-size: var(--fs-3xl);
    letter-spacing: 1px;
    white-space: nowrap;
}

@media (max-width: 420px) {
    .app-title{
        font-size: var(--fs-2xl);
    }
}

@media (max-width: 360px) {
    .app-title{
        font-size: var(--fs-xl);
    }
}

@media (max-width: 320px) {
    .app-title{
        font-size: var(--fs-lg);
    }
}

.onboarding-overlay{
    position:fixed;
    inset:0;
    z-index:2000;
    background:rgba(10,14,22,.92);
    backdrop-filter:blur(4px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.onboarding-card{
    position:relative;
    width:100%;
    max-width:380px;
    background:linear-gradient(145deg,var(--card-bg-start),var(--card-bg-end));
    border:2px solid var(--gold);
    border-radius:var(--radius-xl);
    padding:36px 28px 28px 28px;
    text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.5);
}

.onboarding-skip{
    position:absolute;
    top:16px;
    right:16px;
    background:none;
    border:none;
    color:var(--text-secondary);
    font-size:var(--fs-sm);
    font-weight:bold;
    cursor:pointer;
    padding:6px 10px;
}

/* "‹ Voltar" — do 2.º passo em diante, para corrigir o idioma ou a Arena */
.onboarding-back{
    position:absolute;
    top:16px;
    left:16px;
    background:none;
    border:none;
    color:var(--text-secondary);
    font-size:var(--fs-2xl);
    line-height:1;
    font-weight:bold;
    cursor:pointer;
    padding:2px 12px 6px;
}
.onboarding-back.hidden{ display:none; }

.onboarding-icon{
    font-size:var(--fs-2xl);
    margin-bottom:10px;
}

.onboarding-slide h2{
    color:var(--gold);
    font-size:var(--fs-lg);
    margin-bottom:14px;
}

.onboarding-slide p{
    color:var(--text-secondary);
    font-size:var(--fs-base);
    line-height:1.5;
    margin-bottom:0;
}

.onboarding-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin:26px 0 22px 0;
}

.onboarding-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--card-border);
    transition:.2s;
}

.onboarding-dot.active{
    background:var(--gold);
    width:22px;
    border-radius:var(--radius-xs);
}

#btnOnboardingNext{
    width:100%;
    font-family:'Baloo 2', 'Nunito', Arial, sans-serif;
    letter-spacing:.2px;
    height:56px;
    padding:15px;
    border:none;
    border-radius:var(--radius-md);
    background:linear-gradient(180deg,#f6d365,#d4a017);
    color:#222;
    font-size:var(--fs-md);
    font-weight:bold;
    cursor:pointer;
}
/* Vive agora dentro da linha "Idioma" das Definições. */
.lang-switcher{
    position:relative;
    z-index:20;
}
.lang-toggle{
    display:flex;
    align-items:center;
    gap:6px;
    background:var(--card-bg-start);
    border:2px solid var(--card-border);
    border-radius:var(--radius-pill);
    padding:8px 12px;
    color:var(--text-primary);
    font-size:var(--fs-sm);
    font-weight:bold;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.4);
}

.lang-toggle:hover{
    border-color:var(--gold);
}

.lang-caret{
    font-size:var(--fs-2xs);
    opacity:.7;
    margin-left:2px;
}

.lang-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:170px;

    background:var(--card-bg-start);
    border:2px solid var(--card-border);
    border-radius:var(--radius-lg);
    padding:6px;

    box-shadow:0 15px 35px rgba(0,0,0,.5);

    display:flex;
    flex-direction:column;
    gap:2px;
}

.lang-option{
    display:block;
    width:100%;
    text-align:left;
    background:none;
    border:none;
    color:var(--text-primary);
    font-size:var(--fs-base);
    font-weight:normal;
    padding:10px 12px;
    border-radius:var(--radius-sm);
    cursor:pointer;
}

.lang-option:hover{
    background:rgba(255,255,255,.08);
}

.lang-option.active{
    background:linear-gradient(180deg,#f6d365,#d4a017);
    color:#222;
    font-weight:bold;
}
header {
    position:relative;
    text-align: center;
    margin-bottom: 35px;
}

.guide-back-btn{
    position:absolute;
    top:2px;
    left:0;
    background:none;
    border:none;
    color:var(--gold);
    font-size:34px;
    font-weight:bold;
    cursor:pointer;
    padding:6px 10px;
    line-height:1;
    -webkit-tap-highlight-color:transparent;
}
.tituloResultado{
    text-align:center;
    color:white;
    margin-bottom:5px;
}
.subtitle {
    color: var(--text-secondary);
    margin-top:-10px;
    font-size: var(--fs-base);
    letter-spacing: 1px;
    opacity: .8;
}
h1 {
    font-family: 'Baloo 2', 'Nunito', Arial, sans-serif;
    font-weight: 700;
    font-size: var(--fs-3xl);
    letter-spacing: .5px;
    line-height: 1.1;
    color: var(--gold);
    text-align: center;
}
h2 {
    font-family: 'Baloo 2', 'Nunito', Arial, sans-serif;
    font-weight: 700;
    color: var(--heading-accent);
}

h3 {
    font-family: 'Baloo 2', 'Nunito', Arial, sans-serif;
    font-weight: 700;
}

p  {
    margin-bottom: 8px;
}

label{
    display:block;
    color:var(--text-secondary);
    font-weight:bold;
    margin-bottom:6px;
}
/* Rótulos dos campos: todos iguais (maiúsculas, sem ícone) — antes uns
   eram "NÍVEL ATUAL" e outros "⚔️ Herói" */
label:not(.lembrar-dados):not(.pitch-consent):not(.ritmo-linha-rotulo):not(.calc-ritmo):not(.ritmo-campo-linha):not(.sim-rotulo){
    text-transform:uppercase;
    letter-spacing:.4px;
}

input,
select,
textarea{
    width:100%;
    padding:14px;
    margin-bottom:18px;
    border:2px solid var(--card-border);
    border-radius:var(--radius-md);
    
    background:var(--input-bg);
    color:var(--text-primary);
    font-size:var(--fs-lg);
    font-weight:bold;
    font-family:inherit;

    transition:.25s;
    outline:none;
    box-sizing:border-box;
}

input,
select{
    height: 58px;
}

textarea{
    font-size:16px; /* abaixo de 16px o iPhone faz zoom ao tocar no campo */
    font-weight:normal;
    resize:vertical;
    min-height:110px;
}

.tema-comum input:focus,
.tema-comum select:focus,
.tema-comum textarea:focus{
    border-color:#8c8c8c;
    box-shadow:0 0 10px rgba(140,140,140,.35);
}

.tema-raro input:focus,
.tema-raro select:focus,
.tema-raro textarea:focus{
    border-color:#d4af37;
    box-shadow:0 0 10px rgba(212,175,55,.35);
}

.tema-epico input:focus,
.tema-epico select:focus,
.tema-epico textarea:focus{
    border-color:#b66dff;
    box-shadow:0 0 10px rgba(182,109,255,.35);
}

.btn-primary{
    width:100%;
    height: 62px;
    padding:15px;
    border:none;
    border-bottom:5px solid #9c7209;
    border-radius:var(--radius-lg);

    background:linear-gradient(180deg,#f6d365,#d4a017);

    color:#3a2c00;
    font-family: 'Baloo 2', 'Nunito', Arial, sans-serif;
    font-size:var(--fs-xl);
    font-weight:700;
    text-shadow:0 1px 0 rgba(255,255,255,.4);

    letter-spacing: .5px;
    cursor:pointer;
    transition:transform .08s ease, border-bottom-width .08s ease, box-shadow .2s ease;

    position:relative;
    overflow:hidden;
}

.btn-primary::before{
    content:"";
    position:absolute;
    top:0;
    left:-75%;
    width:50%;
    height:100%;
    background:linear-gradient(
        115deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );
    transform:skewX(-20deg);
    transition:left .55s ease;
}

/* Só em dispositivos com rato — no telemóvel o :hover fica "preso"
   depois de um toque e o brilho/sombra não desaparecem. */
@media (hover:hover){
    .btn-primary:hover::before{
        left:125%;
    }

    .btn-primary:hover{
        box-shadow:0 4px 14px rgba(255,215,0,.35);
    }
}

/* Efeito "botão de jogo" ao pressionar: a borda grossa de baixo
   desaparece e o botão desce, como se estivesse a ser empurrado
   contra a superfície — o mesmo truque visual dos botões
   "CHALLENGE" deste género de jogos mobile. */
.btn-primary:active{
    transform:translateY(4px);
    border-bottom-width:1px;
}
.btn-primary:disabled{
    cursor:wait;
    opacity:.8;
    transform:none;
    filter:brightness(.9);
}

.resultado-item{
    background-color: var(--surface-bg-alt);
    border-radius: var(--radius-md);
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
    flex: 1 1 200px;
    transition: transform 0.3s;
}
.resultado-item h3 {
    font-size: var(--fs-xs);
    margin-bottom: 5px;
    text-align: center;
    text-transform: uppercase;
    opacity: 0.7;
}
.resultado-item p {
    font-size: var(--fs-2xl);
    font-weight: bold;
    text-align: center;
    margin: 5px 0;
    color: var(--gold);
}
.resultado-item:first-child {
    border: 2px solid var(--gold);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.card{
    background:
    linear-gradient(145deg,var(--card-bg-start),var(--card-bg-end));
    border-radius:var(--radius-xl);
    padding:28px 24px;
    margin-bottom:25px;
    border:2px solid var(--card-border);
    box-shadow:
    0 15px 35px var(--shadow-color),
    inset 0 0 25px rgba(255,255,255,.03);
    transition:.3s ease;
    position:relative;
}
.card::before{
    content:"";
    position:absolute;
    top:0;
    left:24px;
    right:24px;
    height:2px;
    background:linear-gradient(90deg, transparent, rgba(255,215,0,.7), transparent);
}

#mensagem {
    margin-top: 15px;
    padding: 10px;
    border-radius: var(--radius-sm);
    text-align: center;
    font-weight: bold;
    color: white;
}
.erro {
    background-color: #d9534f;
    color: white;
}
.sucesso {
    background-color: #5cb85c;
    color: white;
}

.icone {
    font-size: var(--fs-2xl);
    margin-bottom: 8px;
}
.resultado-destaque{
    width:100%;
    background:linear-gradient(180deg,#f8d66d,#d4a017);
    color:#1b1b1b;
    border-radius:var(--radius-lg);
    padding:20px;
    text-align:center;
    margin-bottom:20px;
    box-shadow:0 8px 25px rgba(255,215,0,.30);
}

.resultado-destaque .emoji{
    font-size:var(--fs-display);
}

.resultado-destaque span{
    display:block;
    margin-top:10px;
    font-size:var(--fs-base);
    text-transform:uppercase;
    letter-spacing:2px;
}

.resultado-destaque h2{
    font-size:var(--fs-display);
    margin:4px 0 0 0;
    color:#2a1700;
    text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* Fundo dourado claro: todo o texto do cartão em castanho escuro, para
   se ler bem (o amarelo/branco por cima do dourado quase desaparecia) */
.resultado-destaque span,
.resultado-destaque .progresso-texto{
    color:#3d2600;
}
.resultado-destaque .resultado-msg{
    background:rgba(60,35,0,.12);
}
.resultado-destaque .msg-texto{
    color:#2a1700;
    font-weight:700;
}
.resultado-sobra{
    margin:6px 0 0;
    font-size:var(--fs-sm);
    font-weight:800;
    color:#3d2600;
}

/* "Até ao nível 27": ocupa a linha toda, com cartas e ouro lado a lado */
.resultado-item-largo{
    grid-column:1 / -1;
}
.resultado-par{
    display:flex;
    justify-content:space-around;
    gap:12px;
}
.resultado-par span{
    display:block;
    font-size:var(--fs-xs);
    text-transform:uppercase;
    letter-spacing:.5px;
    opacity:.7;
}

.resultado-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}
.stepper{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
}

.stepper input{
    flex:1;
    width:100%;
    margin:0;
    text-align:center;
}

.stepper button{
    width:52px;
    height:52px;
    padding:0;
    border-radius:var(--radius-md);
    font-size:var(--fs-2xl);
    font-weight:bold;
}

.stepper-btn{
    width:52px;
    min-width:45px;
    height:52px;
    padding:0;
    display:flex;
    justify-content:center;
    align-items:center;
    border:none;
    border-radius: 50%;

    background:#34445c;
    color:white;
    font-size:var(--fs-xl);
    font-weight:bold;

    cursor:pointer;
    flex-shrink:0;
}

.stepper-btn:hover{
    background:#455a75;
}

.stepper-btn:active{
    transform:scale(.95);
}

/* ===== SELECT DA RARIDADE ===== */

#raridade{
    transition: all .3s ease;
    font-weight: bold;
}

/* ===== Tema Comum ===== */
.tema-comum .card,
.tema-comum .resultado-item,
.tema-comum .resultado-destaque{
    border:2px solid #9ca3af;
}

.tema-comum button{
    box-shadow:0 0 15px rgba(156,163,175,.35);
}

/* ===== Tema Raro ===== */

.tema-raro .card,
.tema-raro .resultado-item,
.tema-raro .resultado-destaque{
    border:2px solid var(--gold);
}

.tema-raro button{
    box-shadow:0 0 18px rgba(255,215,0,.45);
}

/* ===== Tema Épico ===== */

.tema-epico .card,
.tema-epico .resultado-item,
.tema-epico .resultado-destaque{
    border:2px solid #b66dff;
}

.tema-epico button{
    box-shadow:0 0 18px rgba(182,109,255,.45);
}

/* Inputs - Comum */
.tema-comum input,
.tema-comum select{
    border-color:#8c8c8c;
}

/* Inputs - Raro */
.tema-raro input,
.tema-raro select{
    border-color:#d4af37;
}

/* Inputs - Épico */
.tema-epico input,
.tema-epico select{
    border-color:#b66dff;
}

.barra-progresso{
    width: 100%;
    height: 12px;

    background-color: rgba(0,0,0,.2);
    border-radius: var(--radius-pill);
    overflow: hidden;

    margin-top: 15px;
}
.barra-preenchida{
    height: 100%;
    border-radius: var(--radius-pill);
      background:linear-gradient(
        90deg,
        #22c55e,
        #4ade80
    );
    transition: .5s;
}
.progresso-texto{
    margin-top: 8px;
    font-size: var(--fs-base);
    font-weight: bold;
}
.premium-card{
    margin-top:25px;
    padding:20px;

    background:linear-gradient(145deg,var(--card-bg-start),var(--card-bg-end));
    border:2px dashed var(--gold);
    border-radius:var(--radius-lg);
    text-align:center;

    box-shadow:
    0 10px 25px rgba(0,0,0,.35);
}

.premium-card h3{
    color:var(--gold);
    margin-bottom:15px;
}

.premium-card p{
    margin:8px 0;
    opacity:.9;
}

.premium-card{
    margin-top:25px;
    padding:25px;

    text-align:center;

    background:
    linear-gradient(145deg,var(--card-bg-start),var(--card-bg-end));

    border:2px solid var(--gold);
    border-radius:var(--radius-xl);

    box-shadow:
    0 10px 30px rgba(0,0,0,.35);
}

.premium-lock{
    font-size:var(--fs-display);
    margin-bottom:10px;
}

.premium-feature-heading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:var(--fs-lg);
}

/* Variante só para o cartão de "Premium Features" na Home — tudo à
   esquerda, em vez de centrado como os outros cartões Premium. */
.premium-card h2{
    color:var(--gold);
    margin-bottom:10px;
}

.premium-text{
    color:var(--text-secondary);
    font-size:var(--fs-base);
    line-height:1.5;
    margin-bottom:20px;
}

.share-progress-btn{
    width:100%;
    height:56px;
    padding:14px;
    margin-bottom:16px;
    border:2px solid var(--gold);
    border-radius:var(--radius-lg);
    background:var(--gold-dim);
    color:var(--gold);
    font-family:'Baloo 2', 'Nunito', Arial, sans-serif;
    font-size:var(--fs-md);
    font-weight:800;
    letter-spacing:.3px;
    cursor:pointer;
}

.premium-btn{
    width:100%;
    height:62px;
    padding:15px;
    border:none;
    border-radius:var(--radius-md);

    background:linear-gradient(180deg,#f6d365,#d4a017);

    color:#222;
    font-family: 'Baloo 2', 'Nunito', Arial, sans-serif;
    font-size:var(--fs-lg);
    font-weight:700;

    letter-spacing: .5px;
    cursor:pointer;
    transition:.25s;
}

@media (hover:hover){
    .premium-btn:hover{
        transform:translateY(-2px);
        box-shadow:0 8px 20px rgba(255,215,0,.35);
    }
}

.premium-btn:active{
    transform:scale(.97);
}

.mode-tabs{
    display:flex;
    gap:8px;
    margin-bottom:16px;
}

.mode-tab{
    flex:1;
    padding:13px;
    border-radius:var(--radius-md);
    border:2px solid var(--card-border);
    background:var(--input-bg);
    color:var(--text-secondary);
    font-family:inherit;
    font-size:var(--fs-base);
    font-weight:800;
    cursor:pointer;
}

.mode-tab.active{
    border-color:var(--gold);
    color:var(--gold);
    background:var(--gold-dim);
}

.tier-row{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:14px;
    padding:14px;
    border-radius:var(--radius-lg);
    background:var(--surface-bg-alt);
    border:2px solid var(--card-border);
}

.tier-badge{
    flex-shrink:0;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-md);
    font-size:var(--fs-lg);
    font-weight:800;
    font-family:'Baloo 2', 'Nunito', Arial, sans-serif;
}

.tier-S .tier-badge{ background:linear-gradient(180deg,#ffe066,#c8960c); color:#3a2c00; }
.tier-A .tier-badge{ background:linear-gradient(180deg,#d8dde3,#9ca8b8); color:#1c2431; }
.tier-B .tier-badge{ background:linear-gradient(180deg,#e3a66e,#9c5e22); color:#2b1700; }
.tier-C .tier-badge{ background:linear-gradient(180deg,#9ca3af,#5b6472); color:#1c2431; }

.tier-heroes{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:9px;
}

.tier-hero{
    display:flex;
    align-items:baseline;
    gap:7px;
    flex-wrap:wrap;
}

.tier-hero-name{
    font-weight:800;
    color:var(--text-primary);
    font-size:var(--fs-base);
    white-space:nowrap;
}

.tier-hero-note{
    font-size:var(--fs-sm);
    color:var(--text-secondary);
}

.whats-new-entry{
    background:linear-gradient(145deg,var(--card-bg-start),var(--card-bg-end));
    border:2px solid var(--card-border);
    border-radius:var(--radius-lg);
    padding:16px 18px;
    margin-bottom:12px;
}

.whats-new-entry h2,
.whats-new-entry h3{
    font-size:var(--fs-md);
    color:var(--gold);
    margin-bottom:6px;
}

.whats-new-entry p{
    font-size:var(--fs-sm);
    color:var(--text-secondary);
    line-height:1.5;
    margin:0;
}

.roadmap-backup-row{
    display:flex;
    gap:8px;
    margin-top:18px;
}

.roadmap-backup-btn{
    flex:1;
    padding:11px 8px;
    border-radius:var(--radius-md);
    border:2px solid var(--card-border);
    background:var(--input-bg);
    color:var(--text-secondary);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    cursor:pointer;
}

.collection-badge-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    border-radius:var(--radius-md);
    border:2px solid var(--card-border);
    background:var(--surface-bg-alt);
    margin-bottom:8px;
    opacity:.5;
}

.collection-badge-row.unlocked{
    opacity:1;
}

.collection-badge-icon{
    flex-shrink:0;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-md);
    font-size:var(--fs-md);
    background:var(--input-bg);
}

.collection-badge-row.bronze.unlocked .collection-badge-icon{ background:rgba(205,127,50,.18); }
.collection-badge-row.prata.unlocked .collection-badge-icon{ background:rgba(138,151,168,.2); }
.collection-badge-row.ouro.unlocked .collection-badge-icon{ background:rgba(255,215,0,.18); }
.collection-badge-row.diamante.unlocked .collection-badge-icon{ background:rgba(126,232,250,.18); }

.collection-badge-row.bronze.unlocked{ border-color:#cd7f32; }
.collection-badge-row.prata.unlocked{ border-color:#8a97a8; }
.collection-badge-row.ouro.unlocked{ border-color:var(--gold); }
.collection-badge-row.diamante.unlocked{ border-color:#7ee8fa; }

.collection-badge-info{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}

.collection-badge-name{
    font-size:var(--fs-base);
    font-weight:800;
    color:var(--text-primary);
}

.collection-badge-desc{
    font-size:var(--fs-xs);
    color:var(--text-secondary);
}

.collection-badge-status{
    flex-shrink:0;
    font-size:var(--fs-md);
}

.confirm-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
    padding:24px;
}

.confirm-modal-card{
    background:linear-gradient(145deg,var(--card-bg-start),var(--card-bg-end));
    border:2px solid var(--gold);
    border-radius:var(--radius-lg);
    padding:24px;
    max-width:340px;
    width:100%;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.5);
}

.confirm-modal-text{
    color:var(--text-primary);
    font-size:var(--fs-md);
    font-weight:700;
    margin-bottom:20px;
}

.confirm-modal-buttons{
    display:flex;
    gap:10px;
}

.confirm-modal-btn{
    flex:1;
    padding:12px;
    border-radius:var(--radius-md);
    border:none;
    font-family:'Baloo 2', 'Nunito', Arial, sans-serif;
    font-size:var(--fs-base);
    font-weight:800;
    cursor:pointer;
}

.confirm-modal-cancel{
    background:var(--input-bg);
    color:var(--text-primary);
    border:2px solid var(--card-border);
}

.confirm-modal-confirm{
    background:linear-gradient(180deg,#dc2626,#991b1b); /* branco legível (antes 3,8:1) */
    color:#ffffff;
}

.roadmap-sort-options{
    display:flex;
    gap:8px;
}

.roadmap-sort-option{
    flex:1;
    padding:10px 8px;
    border-radius:var(--radius-md);
    border:2px solid var(--card-border);
    background:var(--input-bg);
    color:var(--text-secondary);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    cursor:pointer;
    text-align:center;
}

.roadmap-sort-option.active{
    border-color:var(--gold);
    color:var(--gold);
    background:var(--gold-dim);
}

.stepper-nav{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
}

.stepper-nav-arrow{
    flex-shrink:0;
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-md);
    border:2px solid var(--card-border);
    background:var(--input-bg);
    color:var(--text-primary);
    font-size:var(--fs-xl);
    font-weight:800;
    font-family:inherit;
    line-height:1;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.stepper-nav-arrow:disabled{
    opacity:.3;
    cursor:default;
}

.stepper-nav-display{
    flex:1;
    min-width:0;
    text-align:center;
    padding:10px 14px;
    border-radius:var(--radius-lg);
    background:linear-gradient(145deg,var(--card-bg-start),var(--card-bg-end));
    border:2px solid var(--gold);
}

.stepper-nav-label{
    font-family:'Baloo 2', 'Nunito', Arial, sans-serif;
    font-size:var(--fs-md);
    font-weight:800;
    color:var(--gold);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.stepper-nav-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;
    margin-top:7px;
}

.stepper-nav-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--card-border);
    transition:width .2s, border-radius .2s;
}

.stepper-nav-dot.active{
    width:16px;
    border-radius:var(--radius-xs);
    background:var(--gold);
}

.arena-grid{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:16px;
}

.arena-tile{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    width:calc(33.333% - 7px);
    box-sizing:border-box;
    padding:14px 6px 11px;
    border-radius:var(--radius-lg);
    border:2px solid var(--card-border);
    border-bottom:4px solid var(--card-border);
    background:linear-gradient(160deg, var(--card-bg-start), var(--card-bg-end));
    color:var(--text-secondary);
    cursor:pointer;
    transition:transform .08s ease, border-bottom-width .08s ease;
    overflow:hidden;
}

.arena-tile::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:50%;
    background:linear-gradient(180deg, rgba(255,255,255,.07), transparent);
    pointer-events:none;
}

.arena-tile-num{
    font-family:'Baloo 2', 'Nunito', Arial, sans-serif;
    font-size:var(--fs-xl);
    font-weight:800;
    line-height:1;
}

.arena-tile-trophies{
    font-size:var(--fs-2xs);
    font-weight:700;
    letter-spacing:.3px;
    opacity:.8;
}

.arena-tile.active{
    border-color:var(--gold);
    border-bottom-color:var(--gold);
    background:linear-gradient(160deg, var(--gold-dim), var(--card-bg-end));
    color:var(--gold);
    box-shadow:0 0 14px var(--gold-dim);
}

.arena-tile:active{
    transform:translateY(2px);
    border-bottom-width:2px;
}

.arena-tile:disabled{
    opacity:.4;
    cursor:default;
}

.arena-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
}

.arena-tab{
    flex-shrink:0;
    padding:9px 16px;
    border-radius:var(--radius-xl);
    border:2px solid var(--card-border);
    background:var(--input-bg);
    color:var(--text-secondary);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}

.arena-tab.active{
    border-color:var(--gold);
    color:var(--gold);
    background:rgba(255,215,0,.1);
}

.deck-card{
    background:linear-gradient(145deg,var(--card-bg-start),var(--card-bg-end));
    border:2px solid var(--card-border);
    border-radius:var(--radius-xl);
    padding:20px;
    margin-bottom:16px;
}

.deck-card.tag-experimental{
    border-color:#b66dff;
}

.deck-tag{
    display:inline-block;
    font-size:var(--fs-2xs);
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding:4px 10px;
    border-radius:var(--radius-pill);
    margin-bottom:10px;
}

.deck-tag.safe{
    background:rgba(34,197,94,.15);
    color:#22c55e;
}

.deck-tag.aggressive{
    background:rgba(255,215,0,.15);
    color:var(--gold);
}

.deck-tag.experimental{
    background:rgba(182,109,255,.15);
    color:#b66dff;
}

.deck-tag.advanced{
    background:rgba(220,38,38,.15);
    color:#ef4444;
}

.deck-card h3{
    color:var(--heading-accent);
    font-size:var(--fs-md);
    margin-bottom:8px;
}

.deck-card-heroes{
    font-weight:bold;
    color:var(--gold);
    font-size:var(--fs-base);
    margin-bottom:10px;
}

.deck-card-desc{
    font-size:var(--fs-base);
    line-height:1.5;
    color:var(--text-secondary);
}
.guide-title{
    color: var(--accent-teal) !important;
}

.guide-entry-card{
    display:flex;
    align-items:center;
    gap:14px;
    background:linear-gradient(145deg,rgba(45,212,191,.14),rgba(182,109,255,.10));
    border:2px solid rgba(45,212,191,.5);
    border-radius:var(--radius-xl);
    padding:18px;
    margin-top:20px;
    cursor:pointer;
    transition:.2s;
}

.guide-entry-card:hover,
.guide-entry-card:active{
    border-color:var(--accent-teal);
}

.guide-entry-icon{
    flex-shrink:0;
    width:46px;
    height:46px;
    border-radius:var(--radius-lg);
    background:rgba(45,212,191,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:var(--fs-xl);
}

.guide-entry-text{
    flex:1;
    min-width:0;
}

.guide-entry-text h2{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    font-size:var(--fs-md);
    color:var(--accent-teal);
    margin-bottom:2px;
}

.guide-entry-text p{
    font-size:var(--fs-sm);
    color:var(--text-secondary);
    margin:0;
}

.guide-tip{
    background:var(--surface-bg-alt);
    border:2px solid var(--card-border);
    border-radius:var(--radius-lg);
    padding:14px 16px;
    margin-bottom:10px;
    cursor:pointer;
    transition:.2s;
}

.guide-tip.expanded{
    border-color:var(--accent-teal);
}

.guide-tip-header{
    display:flex;
    align-items:center;
    gap:12px;
}

.guide-tip-number{
    flex-shrink:0;
    width:26px;
    height:26px;
    border-radius:50%;
    background:linear-gradient(180deg,#5eead4,#0d9488);
    color:#0a2422;
    font-size:var(--fs-sm);
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
}

.guide-tip-icon{
    flex-shrink:0;
    font-size:var(--fs-lg);
}

.guide-tip-header h3{
    flex:1;
    min-width:0;
    font-size:var(--fs-base);
    color:var(--text-primary);
    margin:0;
}

.guide-tip-chevron{
    flex-shrink:0;
    color:var(--text-secondary);
    transition:.2s;
}

.guide-tip.expanded .guide-tip-chevron{
    transform:rotate(180deg);
    color:var(--accent-teal);
}

.guide-tip-body{
    display:none;
    font-size:var(--fs-sm);
    line-height:1.55;
    color:var(--text-secondary);
    margin:12px 0 0 38px;
}

.guide-tip.expanded .guide-tip-body{
    display:block;
}

.guide-golden-rule{
    background:linear-gradient(145deg,rgba(255,215,0,.14),rgba(212,160,23,.08));
    border:2px solid var(--gold);
    border-radius:var(--radius-xl);
    padding:20px;
    margin-top:16px;
}

/* Dicas Premium (3–10 e Regra de Ouro) para quem não é Premium: só o
   título, com cadeado; tocar abre o ecrã Premium */
/* Sem Premium as dicas 3–10 e a Regra de Ouro nem aparecem: o cartão
   Premium mostra só uma pré-visualização desfocada (sem os títulos) */
.guide-tip-locked,
.guide-golden-rule.guide-tip-locked{
    display:none;
}
.guide-tip-locked .guide-tip-chevron{
    font-size:0;
}
.guide-tip-locked .guide-tip-chevron::before{
    content:"🔒";
    font-size:var(--fs-sm);
}
.guide-tip-locked .guide-tip-body,
.guide-golden-rule.guide-tip-locked p{
    display:none;
}
.guide-golden-rule.guide-tip-locked{
    cursor:pointer;
}
.guide-golden-rule.guide-tip-locked h3{
    margin-bottom:0;
}
.guide-golden-rule.guide-tip-locked h3::after{
    content:" 🔒";
}
#guideUnlocked > #guideLocked{
    margin:6px 0 16px;
}

.guide-golden-rule h3{
    color:var(--gold);
    font-size:var(--fs-md);
    margin-bottom:10px;
}

.guide-golden-rule p{
    font-size:var(--fs-base);
    line-height:1.6;
    color:var(--text-primary);
    margin:0;
}

.premium-feature-arrow{
    flex-shrink:0;
    font-size:var(--fs-2xl);
    color:var(--gold);
    font-weight:bold;
}

.premium-lock-badge{
    display:inline-flex;
    align-items:center;
    padding:2px 8px;
    border-radius:var(--radius-sm);
    background:rgba(255,215,0,.15);
    color:var(--gold);
    font-size:var(--fs-2xs);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
    white-space:nowrap;
}

.coming-soon-badge{
    display:inline-block;
    margin-top:6px;
    padding:3px 9px;
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,.08);
    color:var(--text-secondary);
    font-size:var(--fs-2xs);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.roadmap-item{
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--surface-bg-alt);
    border:2px solid var(--card-border);
    border-radius:var(--radius-lg);
    padding:14px;
    margin-bottom:10px;
}

.roadmap-item.maxed{
    border-color:var(--gold);
    background:rgba(255,215,0,.08);
}

.roadmap-priority{
    flex-shrink:0;
    width:28px;
    height:28px;
    border-radius:50%;
    background:linear-gradient(180deg,#f6d365,#d4a017);
    color:#222;
    font-weight:bold;
    font-size:var(--fs-sm);
    display:flex;
    align-items:center;
    justify-content:center;
}

.roadmap-info{
    flex:1;
    min-width:0;
}

.roadmap-info strong{
    display:block;
    color:var(--text-primary);
    font-size:var(--fs-base);
}

.roadmap-info span{
    display:block;
    font-size:var(--fs-sm);
    color:var(--text-secondary);
    margin-top:2px;
}

/* Barra de progresso até ao nível seguinte */
.roadmap-progress{
    height:5px;
    margin-top:8px;
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,.08);
    overflow:hidden;
}
.roadmap-progress i{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, #d4a017, #f6d365);
}

/* Pronto a evoluir: destaque dourado, para saltar à vista na lista */
.roadmap-item.pronto{
    border-color:var(--gold);
    background:rgba(255,215,0,.1);
    box-shadow:0 0 14px rgba(255,215,0,.18);
}
.roadmap-item.pronto .roadmap-info span{
    color:#4ade80;
    font-weight:800;
}
.roadmap-item.pronto .roadmap-progress i{
    background:linear-gradient(90deg, #22c55e, #4ade80);
}

/* Veredicto do Comparar */
.compare-verdict{
    margin-top:16px;
    padding:14px 16px;
    border:1.5px solid var(--gold);
    border-radius:var(--radius-lg);
    background:var(--gold-dim);
}
.compare-verdict h3{
    margin:0 0 8px;
    font-size:var(--fs-sm);
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--gold);
}
.compare-verdict ul{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:var(--fs-base);
    color:var(--text-primary);
}
.compare-verdict p{
    margin:10px 0 0;
    font-size:var(--fs-sm);
    font-weight:800;
    color:var(--text-primary);
}

/* Curva do herói (Stats): dano e vida do nível mínimo ao 27 */
.hero-curve{
    margin-top:18px;
}
.hero-curve-title{
    margin:0 0 6px;
    font-size:var(--fs-xs);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:var(--text-secondary);
}
.hero-curve svg{
    display:block;
    width:100%;
    height:auto;
    overflow:visible;
}
.hero-curve-gain{
    margin:8px 0 0;
    font-size:var(--fs-sm);
    font-weight:700;
    line-height:1.4;
    color:var(--text-primary);
}

.roadmap-remove{
    flex-shrink:0;
    background:none;
    border:none;
    color:var(--text-secondary);
    font-size:var(--fs-lg);
    cursor:pointer;
    padding:4px 8px;
}

/* ---------- Coleção editável ---------- */
/* Cada herói é agora uma linha tocável (abre o editor por baixo) */
.roadmap-item{
    display:block;
    padding:0;
}
.tema-comum .roadmap-linha,
.tema-raro .roadmap-linha,
.tema-epico .roadmap-linha,
.roadmap-linha{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    padding:14px;
    border:none;
    background:none;
    box-shadow:none;
    color:inherit;
    font:inherit;
    text-align:left;
    cursor:pointer;
}
.roadmap-info span.roadmap-progress{
    display:block;
}
.roadmap-chevron{
    flex-shrink:0;
    color:var(--text-secondary);
    font-size:var(--fs-base);
    opacity:.7;
}
.roadmap-item.aberto{
    border-color:var(--gold);
}
.roadmap-editor{
    padding:0 14px 14px;
    border-top:1px solid var(--card-border);
    padding-top:12px;
}
.roadmap-editor input{
    height:48px;
    margin-bottom:12px;
    font-size:16px; /* abaixo de 16px o iPhone faz zoom */
}
.roadmap-editor-botoes{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.roadmap-editor-botoes button{
    flex:1 1 auto;
    min-height:44px;
    padding:0 14px;
    border-radius:var(--radius-md);
    font-family:inherit;
    font-weight:800;
    font-size:var(--fs-base);
    cursor:pointer;
    box-shadow:none;
}
.roadmap-editor-botoes .roadmap-evoluir{
    flex-basis:100%;
    border:none;
    background:linear-gradient(180deg, #4ade80, #16a34a);
    color:#052e12;
}
.roadmap-editor-botoes .roadmap-guardar{
    border:none;
    background:linear-gradient(180deg, #f6d365, #d4a017);
    color:#222;
}
.roadmap-editor-botoes .roadmap-apagar{
    border:1.5px solid rgba(239,68,68,.6);
    background:transparent;
    color:#f87171;
}

.soon-tag{
    display:inline-block;
    margin-top:6px;
    font-size:var(--fs-2xs);
    padding:3px 8px;
    border-radius:var(--radius-pill);
    background:rgba(182,109,255,.2);
    color:#b66dff;
    font-weight:bold;
}

.bottom-nav{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    /* Espaço extra para a barra de gestos do iPhone quando a app está
       instalada no ecrã principal. */
    height:calc(70px + env(safe-area-inset-bottom, 0px));
    padding-bottom:env(safe-area-inset-bottom, 0px);
    box-sizing:border-box;
    background:var(--nav-bg);
    border-top:2px solid var(--nav-border);
    display:flex;
    justify-content:space-around;
    align-items:center;
    z-index:999;
}

.nav-btn-home{
    flex-shrink:0;
    width:60px;
    height:60px;
    border-radius:50%;
    border:none;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(180deg,#f6d365,#d4a017);
    box-shadow:
        0 8px 20px rgba(212,160,23,.55),
        0 0 0 6px var(--nav-bg);

    transform:translateY(-18px);
    transition:.2s;
}

@media (hover:hover){
    .nav-btn-home:hover{
        transform:translateY(-20px);
    }
}

.nav-btn-home:active{
    transform:translateY(-16px) scale(.96);
}

.nav-home-icon{
    width:40px;
    height:40px;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
/* Ícones desenhados da barra (icons/ui/) — iguais em todos os telemóveis */
.nav-icon{
    width:28px;
    height:28px;
    display:block;
    object-fit:contain;
}
.nav-alert-dot{
    position:absolute;
    top:2px;
    right:calc(50% - 18px);
    width:9px;
    height:9px;
    border-radius:50%;
    background:#ef4444;
    border:2px solid var(--nav-bg, #16111f);
    box-shadow:0 0 6px rgba(239,68,68,.7);
}

.nav-btn{
    margin:0;
    padding:0;
    background:none;
    background-color:transparent;
    background-image:none;
    border:none;
    outline:none;
    box-shadow:none;
    filter:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    -webkit-tap-highlight-color:transparent;
    color:var(--text-secondary);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:1;
    height:100%;
    font-size:var(--fs-lg);
    font-family:inherit;
    line-height:normal;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
}
.nav-btn span{
    font-size:var(--fs-2xs);
    margin-top:3px;
    letter-spacing: .5px;
}
.nav-btn span.nav-vs-icon{
    font-size:var(--fs-base);
    font-weight:800;
    line-height:1;
    margin-top:0;
}
/* Uma só cor de destaque, como nas apps nativas: inativos em cinzento
   apagado, o ativo em dourado (a cor da app) com um ponto por baixo.
   Antes cada separador tinha a sua cor e o ativo mudava de tom. */
.nav-btn{
    color:var(--text-secondary);
    transition:opacity .2s ease, transform .2s ease, color .2s ease;
}
/* Os ícones desenhados ficam sempre a cores; os inativos só um pouco
   mais apagados, o ativo sobe e ganha o rótulo dourado */
.nav-btn:not(.active) .nav-icon{
    filter:saturate(.75) brightness(.85);
}
/* A coroa do Premium brilha sempre: é o convite à compra */
#premiumBtnNav .nav-icon{ width:34px; height:34px; margin:-3px 0; filter:drop-shadow(0 0 4px rgba(246,211,101,.45)); }
.nav-btn.active{
    color:var(--gold);
    opacity:1;
    transform: translateY(-3px);
}
.nav-btn.active span{
    font-weight:800;
}
/* O Premium continua dourado mesmo inativo: é o convite à compra */
#premiumBtnNav{
    color:var(--gold);
}
.nav-btn.active::after{
    content:"";
    position:absolute;
    bottom:4px;
    left:50%;
    width:4px;
    height:4px;
    margin-left:-2px;
    border-radius:50%;
    background:var(--gold);
}
.hidden{
    display: none;
}
.screen{
    margin: top 20px;
}
.hero-card{
    background:
    linear-gradient(
        145deg,
        var(--card-bg-start),
        var(--card-bg-end)
    );
    border:2px solid var(--gold);
    border-radius: var(--radius-xl);
    padding: 20px;
    margin-top: 15px;
}
.hero-header{
    font-size: var(--fs-xl);
    font-weight: bold;
    color: var(--gold);
    text-align: center;
    margin-bottom: 20px;
}
.stat-row{
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.compare-hero-btn{
    width: 100%;
    margin-top: 20px;
    height:52px;
    padding:14px;

    background:transparent;
    border:2px solid var(--gold);
    border-radius:var(--radius-md);

    color:var(--gold);
    font-size:var(--fs-base);
    font-weight:bold;
    letter-spacing:.5px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    cursor:pointer;
    transition:.2s;
}

.compare-hero-btn:hover{
    background:rgba(255,215,0,.1);
}

.compare-hero-btn:active{
    transform:scale(.97);
}
.compare-grid{
    display:flex;
    gap:12px;
    margin-bottom:20px;
}
.compare-grid .compare-card{
    flex:1;
    min-width:0;
}
.compare-card{
    background:var(--surface-bg-alt);
    padding:12px;
    border-radius:var(--radius-md);
}
.compare-card select,
.compare-card input{
    margin-bottom:10px;
}
.compare-header-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin:20px 0 12px 0;
    padding:16px 14px;
    background:var(--surface-bg-alt);
    border-radius:var(--radius-lg);
}
.compare-header-hero{
    flex:1;
    min-width:0;
    text-align:center;
}
.compare-header-name{
    font-weight:800;
    font-size:var(--fs-base);
    color:var(--text-primary);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.compare-header-level{
    font-size:var(--fs-sm);
    font-weight:bold;
    color:var(--gold);
    margin-top:3px;
}
.compare-vs-text{
    flex:0 0 auto;
    font-size:var(--fs-sm);
    font-weight:800;
    color:var(--text-secondary);
    padding:0 8px;
}
.compare-stat-row{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--surface-bg-alt);
    border-radius:var(--radius-md);
    padding:14px;
    margin-bottom:10px;
}

.compare-rarity-badge{
    flex:1;
    min-width:0;
    text-align:center;
    padding:5px 8px;
    border-radius:var(--radius-sm);
    font-size:var(--fs-xs);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.compare-rarity-divider{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px 0 14px;
}

.compare-rarity-divider::before,
.compare-rarity-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--card-border);
}

.compare-rarity-label{
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px 13px;
    border-radius:var(--radius-xl);
    font-size:var(--fs-2xs);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.7px;
    white-space:nowrap;
}

.compare-rarity-icon{
    font-size:var(--fs-sm);
}

.compare-rarity-label.raridade-comum{
    background:rgba(156,163,175,.13);
    color:#9ca3af;
    border:1.5px solid rgba(156,163,175,.3);
}

.compare-rarity-label.raridade-raro{
    background:rgba(255,215,0,.12);
    color:var(--gold);
    border:1.5px solid rgba(255,215,0,.32);
}

.compare-rarity-label.raridade-epico{
    background:rgba(182,109,255,.13);
    color:#b66dff;
    border:1.5px solid rgba(182,109,255,.35);
}

.compare-rarity-badge.raridade-comum{ background:rgba(156,163,175,.15); color:#9ca3af; }
.compare-rarity-badge.raridade-raro{ background:rgba(255,215,0,.15); color:var(--gold); }
.compare-rarity-badge.raridade-epico{ background:rgba(182,109,255,.15); color:#b66dff; }
.compare-value{
    flex:1;
    min-width:0;
    font-size:var(--fs-lg);
    font-weight:bold;
    text-align:center;
    color:var(--text-secondary);
}
.compare-value.vencedor{
    color:var(--gold);
}
.compare-label{
    flex-shrink:0;
    font-size:var(--fs-sm);
    text-align:center;
    opacity:.75;
    white-space:nowrap;
}
.label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--fs-base);
    font-weight: bold;
    color: var(--text-secondary);
    letter-spacing: .5px;
    }
  
    /* spinner a rodar no botão*/

.spinner{
    display:inline-block;
    width:18px;
    height:18px;
    border:3px solid rgba(255,255,255,.35);
    border-top:3px solid #222;
    border-radius:50%;
    animation:spin .8s linear infinite;
    vertical-align:middle;
    margin-right:8px;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

.btn-primary:disabled{
    cursor:wait;
    opacity:.85;
}

#resultado{
    opacity:1;
    transform:translateY(0) scale(1);
    transition:
        opacity .35s ease,
        transform .35s ease;
}

#resultado.animar{
    opacity:0;
    transform:translateY(20px) scale(.97);
}

.resultado-msg{
    display:flex;
    align-items:center;
    gap:14px;
    margin:18px 0;
    padding:18px;
    border-radius:var(--radius-lg);
    background:#273446;
    border:2px solid rgba(255,255,255,.06);
}

.msg-emoji{
    font-size:var(--fs-3xl);
}

.msg-texto{
    font-size:var(--fs-base);
    line-height:1.5;
    color:var(--text-secondary);
}
.hero-stats{
    display:flex;
    flex-direction:row;
    gap:10px;
    margin-top:20px;
}
.stat-box{
    flex:1;
    min-width:0;
    background:var(--surface-bg);
    border-radius:var(--radius-lg);
    padding:16px 6px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    transition:.25s;
}

/* Ícone por cima do rótulo (e não ao lado) — ao lado, o círculo de
   44px + "HABILIDADE" não cabia em caixas de ~100px de largura. */
.stat-icon-title{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    max-width:100%;
    font-size:var(--fs-xs);
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:.5px;
    font-weight:bold;
}

.stat-icon-title .stat-icon{
    width:30px;
    height:30px;
    font-size:var(--fs-base);
}

.stat-icon-title .stat-title{
    flex:none;
    max-width:100%;
    font-size:var(--fs-xs);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.stat-icon{
    width:44px;
    height:44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:var(--fs-xl);
    flex-shrink:0;
    background:rgba(239,68,68,.14);
}

.stat-box:nth-of-type(2) .stat-icon{
    background:rgba(74,222,128,.14);
}

.stat-box:nth-of-type(3) .stat-icon{
    background:rgba(182,109,255,.14);
}

.stat-title{
    flex:1;
    font-size:var(--fs-base);
    color:var(--text-secondary);
}

.stat-value{
    font-size:var(--fs-xl);
    font-weight:bold;
    color:var(--gold);
}
.toast{
    position:fixed;
    top:25px;
    left:50%;
    transform:translateX(-50%) translateY(-30px);
    min-width:280px;
    max-width:420px;
    padding:16px 22px;
    border-radius:var(--radius-lg);
    background:#2d3748;
    color:white;
    font-weight:bold;
    text-align:center;
    box-shadow:0 12px 30px rgba(0,0,0,.45);
    opacity:0;
    pointer-events:none;
    transition:.35s;
    z-index:99999;
}
.toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}
.toast.erro{
    background:#dc2626;
}
.toast.sucesso{
    background:#16a34a;
}
.toast.info{
    background:#2563eb;
}
.pop{
    animation:pop .35s ease;
}
@keyframes pop{
    0%{
        transform:scale(.9);
    }
    60%{
        transform:scale(1.05);
    }
    100%{
        transform:scale(1);
    }
}
.resultado-destaque{
    position:relative;
    overflow:hidden;
}
.resultado-destaque::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:70%;
    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );
}
.pop::before{
    animation:shine .7s ease;
}

@keyframes shine{
    from{
        left:-120%;
    }
    to{
        left:150%;
    }
}
.resultado-msg{
    margin-top:20px;
    padding:16px;
    border-radius:var(--radius-lg);
    background:rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    gap:14px;
    animation:fade .5s ease;
}
.msg-emoji{
    font-size:var(--fs-3xl);
    flex-shrink:0;
}
.msg-texto{
    font-size:var(--fs-base);
    line-height:1.5;
    color:white;
}
.verde{
    color:#22c55e;
}
.amarelo{
    color:#facc15;
}
.vermelho{
    color:#ef4444;
}
.mini-emoji{
    font-size:var(--fs-2xl);
    margin-bottom:8px;
}
.resultado-item small{
    display:block;
    margin-top:8px;
    color:var(--text-secondary);
    font-size:var(--fs-sm);
    line-height:1.4;
}

/* =========================================================
   SENSAÇÃO DE APP NATIVA
   ========================================================= */

/* Toques: sem seleção de texto ao manter o dedo, sem o flash azul do
   browser e sem o atraso de duplo-toque para zoom. */
button,label,.bottom-nav,.settings-row,.guide-tip-header,.guide-entry-card,.badge{
    -webkit-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
}

button,.guide-entry-card{
    touch-action:manipulation;
}

/* Feedback de toque nos cartões clicáveis (substitui os :hover). */
.guide-entry-card{
    transition:transform .12s ease, background .2s ease, border-color .2s ease;
}
.guide-entry-card:active{
    transform:scale(.98);
}

/* Transição entre ecrãs: cada vez que uma secção deixa de estar
   .hidden, a animação volta a correr — não é preciso JS. */
#homeScreen,
.screen{
    animation:screen-in .22s ease-out;
}

@keyframes screen-in{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:none; }
}

/* Foco visível só para teclado (o rato/toque não mostra contorno). */
button:focus-visible,[role="button"]:focus-visible,.guide-entry-card:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    border-color:var(--gold);
}

/* Quem pediu menos movimento no sistema não leva animações. */
@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
    /* Exceção: o anel dourado do botão do centro (Premium) continua a
       rodar — é pequeno e lento, e sem ele o botão parecia avariado */
    body.is-premium .nav-btn-home::before{
        animation-duration:4s !important;
        animation-iteration-count:infinite !important;
    }
}

/* =========================================================
   NAVEGAÇÃO NOVA (secção 3): headers compactos, Heróis,
   pré-visualização Premium, Definições em lista agrupada
   ========================================================= */

/* Headers compactos, alinhados à esquerda — como numa app, e não como
   o topo de uma página web. */
header{
    text-align:left;
    margin-bottom:18px;
}
header h1{
    font-size:var(--fs-2xl);
    text-align:left;
    margin:0 0 4px 0;
}
header .subtitle{
    margin-top:0;
    font-size:var(--fs-sm);
    letter-spacing:.3px;
}
/* Ecrãs com seta de voltar: a seta fica ao lado do título */
header:has(.guide-back-btn){
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}
header:has(.guide-back-btn) .guide-back-btn{
    position:static;
    padding:4px 8px 4px 0;
}
header:has(.guide-back-btn) h1{
    flex:1;
    margin:0;
}
header:has(.guide-back-btn) .subtitle{
    flex-basis:100%;
}

/* Home: título da app à esquerda, streak em "chip" à direita */
.home-header{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    column-gap:12px;
}
.home-header::after{
    content:none;
}
.home-header .app-title{
    font-size:var(--fs-xl);
    white-space:normal;
}
.home-header .subtitle{
    grid-column:1;
}
.streak-indicator{
    grid-column:2;
    grid-row:1 / span 2;
    margin:0;
    padding:6px 10px;
    border-radius:var(--radius-pill);
    background:var(--gold-dim);
    font-size:var(--fs-sm);
    white-space:nowrap;
}
.streak-indicator:empty{
    display:none;
}
/* A sequência é um botão: abre as Conquistas */
button.streak-indicator{
    border:none;
    box-shadow:none;
    color:var(--gold);
    font-family:inherit;
    font-weight:bold;
    cursor:pointer;
    transition:transform .12s ease;
}
button.streak-indicator::after{
    content:" ›";
    opacity:.7;
}
button.streak-indicator:active{
    transform:scale(.96);
}

/* Separadores do topo de "Heróis" (Stats · Comparar · Rankings) */
.heroes-tabs{
    background:var(--surface-bg-alt);
    border-radius:var(--radius-lg);
    padding:4px;
    gap:4px;
    margin-bottom:18px;
}
.heroes-tabs .mode-tab{
    padding:10px 6px;
    border:none;
    border-radius:var(--radius-md);
    background:transparent;
    font-size:var(--fs-sm);
    /* anula o brilho que o tema de raridade (.tema-comum button…)
       põe em todos os botões */
    box-shadow:none;
}
.heroes-tabs .mode-tab.active{
    background:var(--gold-dim);
    box-shadow:inset 0 0 0 2px var(--gold);
}

/* Pré-visualização Premium: o conteúdo real, esbatido e sem toque,
   com o cartão "Premium" a flutuar por cima. */
.premium-gate{
    position:relative;
    min-height:340px;
}
.premium-preview{
    max-height:520px;
    overflow:hidden;
    opacity:.4;
    filter:saturate(.6);
    pointer-events:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-mask-image:linear-gradient(to bottom, #000 45%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 45%, transparent 100%);
}
.premium-gate > .premium-card{
    position:absolute;
    top:70px;
    left:8px;
    right:8px;
    z-index:5;
    margin-top:0;
}

/* Definições: grupos tipo iOS — um cartão por grupo, linhas
   separadas por divisórias finas, título pequeno por cima. */
.settings-group{
    background:linear-gradient(145deg,var(--card-bg-start),var(--card-bg-end));
    border:1.5px solid var(--card-border);
    border-radius:var(--radius-lg);
    padding:2px 16px;
    margin-bottom:22px;
}
.settings-group .settings-row{
    min-height:52px;
    padding:8px 0;
    margin:0;
}
.settings-group .settings-row + .settings-row{
    margin-top:0;
    padding-top:8px;
}
.settings-group-label{
    font-size:var(--fs-sm);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--text-secondary);
    margin:0 0 8px 6px;
}
.settings-group-padded{
    padding:14px 16px;
}
.settings-block-label{
    display:block;
    margin:0 0 10px 0;
}
.settings-group-padded .badges-row{
    flex-wrap:wrap;
    margin-bottom:18px;
}

/* Linha clicável (abre um sub-ecrã) — botão sem aspeto de botão */
button.settings-link{
    width:100%;
    background:none;
    border:none;
    border-radius:0;
    color:inherit;
    font-family:inherit;
    text-align:left;
    cursor:pointer;
    box-shadow:none;
}
.settings-group .settings-link + .settings-link,
.settings-group .settings-row + .settings-link,
.settings-group .settings-link + .settings-row{
    border-top:1px solid var(--card-border);
}
.settings-link .settings-row-label{
    flex:1;
}
.settings-link .premium-feature-arrow{
    font-size:var(--fs-md);
    opacity:.7;
    line-height:1;
}
.settings-link:active{
    opacity:.6;
}
.settings-row-value{
    font-size:var(--fs-sm);
    color:var(--text-secondary);
}

/* Onboarding: escolha do idioma logo no primeiro ecrã */
.onboarding-lang-label{
    margin-top:18px !important;
    font-size:var(--fs-sm) !important;
    font-weight:800;
}
.onboarding-langs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:10px;
}
button.onboarding-lang{
    width:100%;
    padding:10px 8px;
    border-radius:var(--radius-md);
    border:1.5px solid var(--card-border);
    background:var(--input-bg);
    color:var(--text-primary);
    font-family:inherit;
    font-size:var(--fs-base);
    font-weight:700;
    text-align:left;
    cursor:pointer;
    box-shadow:none;
}
.onboarding-lang.active{
    border-color:var(--gold);
    background:var(--gold-dim);
    color:var(--gold);
}

button.guide-back-btn{
    box-shadow:none;
}

/* Antes eram style="..." soltos no index.html */
.mb-0{
    margin-bottom:0;
}
.stats-rarity-tag{
    margin-bottom:8px;
}
.hero-min-level-note{
    text-align:center;
    margin-top:-4px;
}
.roadmap-sort-row{
    margin-bottom:14px;
}
.help-text{
    margin-bottom:18px;
}
.feedback-email-note{
    margin-top:-10px;
    margin-bottom:18px;
}
/* Para o ponto vermelho (.nav-alert-dot) se posicionar no botão */
.nav-btn{
    position:relative;
}

/* O título da app ocupa a linha inteira e o chip da sequência fica por
   baixo — lado a lado não cabiam e o último ⚔️ ficava sozinho numa linha. */
.home-header{
    grid-template-columns:1fr;
}
.home-header .app-title{
    font-size:var(--fs-xl);
}
.streak-indicator{
    grid-column:auto;
    grid-row:auto;
}
/* Chips por baixo do título: sequência e (para Premium) a coroa */
.home-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
}

/* =========================================================
   PREMIUM PITCH — Definições › Premium
   Um ecrã de recompensa, como no jogo: abre-se um orbe e sai
   uma carta holográfica. É sempre "noite na arena", em
   qualquer tema, por isso as cores aqui são fixas.
   ========================================================= */

.pitch{
    --p-ink:#0d0720;
    --p-night:#1a0d3d;
    --p-violet:#7b2cff;
    --p-magenta:#ff3ec8;
    --p-gold:#ffc93c;
    --p-gold-deep:#c98a12;
    --p-cyan:#4ff0ff;
    --p-text:#f6f0ff;
    --p-muted:#b9acdc;
    --p-display:"Lilita One", "Baloo 2", sans-serif;

    margin:calc(-24px - env(safe-area-inset-top, 0px)) -20px 0;
    padding:0 20px 28px;
    color:var(--p-text);
    background:radial-gradient(ellipse 120% 60% at 50% 0%, var(--p-night) 0%, var(--p-ink) 70%);
    min-height:100vh;
    overflow:hidden;
}

/* Com o pitch aberto, a página toda fica "noite" (também no tema claro) */
html:has(#premiumPitchScreen:not(.hidden)){
    background:#0d0720;
}
html:has(#premiumPitchScreen:not(.hidden)) body::before,
html:has(#premiumPitchScreen:not(.hidden)) body::after{
    display:none;
}

/* ---------- Palco ---------- */

/* Fechado: o palco ocupa o ecrã e o orbe fica ao centro. Ao abrir,
   encolhe para dar lugar aos planos, que sobem por baixo da carta. */
.pitch-stage{
    position:relative;
    height:min(600px, calc(100vh - 150px));
    transition:height .8s cubic-bezier(.3,.9,.3,1) .35s;
    margin:0 -20px;
    padding-top:env(safe-area-inset-top, 0px);
    display:grid;
    place-items:center;
    isolation:isolate;
}

/* "chão" da arena: um brilho elíptico debaixo do orbe/carta */
.pitch-stage::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:34px;
    width:260px;
    height:46px;
    transform:translateX(-50%);
    border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(123,44,255,.55), transparent 70%);
    filter:blur(6px);
    z-index:-1;
}

.pitch-back{
    position:absolute;
    top:calc(14px + env(safe-area-inset-top, 0px));
    left:12px;
    z-index:10;
    color:var(--p-gold);
}

/* Raios de luz a rodar atrás da carta (só depois de abrir) */
.pitch-rays{
    position:absolute;
    width:680px;
    height:680px;
    left:50%;
    top:50%;
    margin:-340px 0 0 -340px;
    background:repeating-conic-gradient(from 0deg, rgba(255,214,102,.20) 0deg 5deg, transparent 5deg 15deg);
    -webkit-mask-image:radial-gradient(circle, #000 0%, transparent 62%);
    mask-image:radial-gradient(circle, #000 0%, transparent 62%);
    opacity:0;
    transition:opacity .8s ease;
    z-index:-1;
}
.pitch-stage[data-state="open"]{
    height:400px;
}
.pitch-stage.pitch-instant{
    transition:none;
}
.pitch-stage[data-state="open"] .pitch-rays{
    opacity:1;
    animation:pitch-spin 40s linear infinite;
}

/* Faíscas a subir do chão */
.pitch-sparks i{
    position:absolute;
    bottom:60px;
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--p-gold);
    box-shadow:0 0 8px var(--p-gold);
    opacity:0;
    animation:pitch-spark 4.5s ease-in infinite;
}
.pitch-sparks i:nth-child(1){ left:22%; animation-delay:0s; }
.pitch-sparks i:nth-child(2){ left:34%; animation-delay:1.7s; background:var(--p-cyan); box-shadow:0 0 8px var(--p-cyan); }
.pitch-sparks i:nth-child(3){ left:46%; animation-delay:.6s; }
.pitch-sparks i:nth-child(4){ left:58%; animation-delay:2.9s; background:var(--p-magenta); box-shadow:0 0 8px var(--p-magenta); }
.pitch-sparks i:nth-child(5){ left:70%; animation-delay:1.1s; }
.pitch-sparks i:nth-child(6){ left:79%; animation-delay:3.6s; background:var(--p-cyan); box-shadow:0 0 8px var(--p-cyan); }
.pitch-sparks i:nth-child(7){ left:28%; animation-delay:2.3s; background:var(--p-magenta); box-shadow:0 0 8px var(--p-magenta); }
.pitch-sparks i:nth-child(8){ left:64%; animation-delay:4s; }

/* ---------- O orbe ---------- */

button.pitch-orb{
    grid-area:1 / 1;
    position:relative;
    width:150px;
    height:150px;
    padding:0;
    border:none;
    background:none;
    box-shadow:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    animation:pitch-bob 3.2s ease-in-out infinite;
    transition:transform .35s cubic-bezier(.5,-0.4,.7,.2), opacity .25s ease;
}

.pitch-orb-glow{
    position:absolute;
    inset:-40px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(196,59,255,.55), transparent 65%);
    animation:pitch-pulse 2.4s ease-in-out infinite;
}

.pitch-orb-body{
    position:absolute;
    inset:0;
    border-radius:50%;
    overflow:hidden;
    background:radial-gradient(circle at 34% 28%, #ffb3f2 0%, #d24bff 22%, #7b2cff 55%, #2b0a72 100%);
    box-shadow:
        inset -14px -18px 30px rgba(20,0,60,.65),
        inset 8px 10px 20px rgba(255,255,255,.18),
        0 18px 40px rgba(60,10,140,.6);
}

/* redemoinho mágico lá dentro */
.pitch-orb-swirl{
    position:absolute;
    inset:-20%;
    background:conic-gradient(from 0deg, transparent 0 20%, rgba(255,255,255,.35) 26%, transparent 34% 55%, rgba(79,240,255,.35) 62%, transparent 70%);
    mix-blend-mode:screen;
    animation:pitch-spin 6s linear infinite;
}

.pitch-orb-shine{
    position:absolute;
    top:14%;
    left:20%;
    width:34%;
    height:20%;
    border-radius:50%;
    background:radial-gradient(ellipse, rgba(255,255,255,.85), transparent 70%);
    transform:rotate(-25deg);
}

/* anel de metal dourado à volta, como os orbes do jogo */
.pitch-orb-band{
    position:absolute;
    left:-14px;
    right:-14px;
    top:50%;
    height:44px;
    margin-top:-14px;
    border-radius:50%;
    border:7px solid var(--p-gold);
    border-top-color:transparent;
    box-shadow:0 6px 0 -2px var(--p-gold-deep), 0 10px 18px rgba(0,0,0,.45);
    transform:rotate(-8deg);
}

.pitch-orb-cracks{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    fill:none;
    stroke:#fff6c8;
    stroke-width:2.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:160;
    stroke-dashoffset:160;
    filter:drop-shadow(0 0 4px #ffe27a);
}

.pitch-orb-hint{
    grid-area:1 / 1;
    align-self:end;
    margin:0 0 6px;
    font-size:var(--fs-sm);
    font-weight:700;
    color:var(--p-muted);
    animation:pitch-pulse 2.4s ease-in-out infinite;
    transition:opacity .3s ease;
}

/* A abrir: o orbe pára de flutuar, treme e racha */
.pitch-stage[data-state="opening"] .pitch-orb{
    animation:pitch-shake .75s linear both;
}
.pitch-stage[data-state="opening"] .pitch-orb-cracks{
    transition:stroke-dashoffset .6s ease-in .1s;
    stroke-dashoffset:0;
}
.pitch-stage[data-state="opening"] .pitch-orb-glow{
    animation:none;
    opacity:1;
    transform:scale(1.35);
    transition:transform .7s ease-in;
}
/* a animação de pulsar mexe na opacidade, por isso tem de parar aqui */
.pitch-stage:not([data-state="closed"]) .pitch-orb-hint{
    animation:none;
    opacity:0;
    visibility:hidden;
}

/* Aberto: o orbe desaparece num estoiro */
.pitch-stage[data-state="open"] .pitch-orb{
    animation:none;
    transform:scale(1.7);
    opacity:0;
    pointer-events:none;
}

.pitch-flash{
    grid-area:1 / 1;
    width:80px;
    height:80px;
    border-radius:50%;
    background:radial-gradient(circle, #fff 0%, #ffe9a8 40%, rgba(255,201,60,0) 70%);
    opacity:0;
    pointer-events:none;
    z-index:5;
}
.pitch-stage[data-state="open"]:not(.pitch-instant) .pitch-flash{
    animation:pitch-flash .8s ease-out both;
}

/* ---------- A carta holográfica ---------- */

.pitch-card-wrap{
    grid-area:1 / 1;
    perspective:900px;
    opacity:0;
    transform:translateY(30px) scale(.4);
    pointer-events:none;
}
.pitch-stage[data-state="open"] .pitch-card-wrap{
    opacity:1;
    transform:none;
    pointer-events:auto;
}
.pitch-stage[data-state="open"]:not(.pitch-instant) .pitch-card-wrap{
    animation:pitch-card-in 1.1s cubic-bezier(.18,1.25,.4,1) .12s both;
}

.pitch-card{
    --rx:0deg;
    --ry:0deg;
    --mx:50%;
    --my:50%;
    position:relative;
    width:196px;
    height:268px;
    border-radius:var(--radius-xl);
    border:3px solid transparent;
    background:
        linear-gradient(160deg, #2a1166 0%, #160838 60%, #22094f 100%) padding-box,
        linear-gradient(135deg, #fff1b8, #ffc93c 25%, #c98a12 50%, #ffe28a 75%, #a86b00) border-box;
    box-shadow:
        0 24px 50px rgba(0,0,0,.55),
        0 0 40px rgba(123,44,255,.45);
    transform:rotateX(var(--rx)) rotateY(var(--ry));
    transform-style:preserve-3d;
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
    touch-action:none;
    overflow:hidden;
    cursor:grab;
}
.pitch-card.is-tilting{
    transition:transform .06s linear;
}

/* película holográfica: muda de cor com o ângulo da carta */
.pitch-card-foil{
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:repeating-linear-gradient(120deg,
        rgba(79,240,255,0) 0%,
        rgba(79,240,255,.55) 8%,
        rgba(255,62,200,.55) 16%,
        rgba(255,201,60,.55) 24%,
        rgba(79,240,255,0) 32%);
    background-size:300% 300%;
    background-position:var(--mx) var(--my);
    mix-blend-mode:color-dodge;
    opacity:.55;
    pointer-events:none;
}
/* sem dedo em cima, a película "respira" sozinha */
.pitch-card:not(.is-tilting) .pitch-card-foil{
    animation:pitch-foil 7s ease-in-out infinite alternate;
}

.pitch-card-glare{
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 50%);
    mix-blend-mode:overlay;
    pointer-events:none;
}

.pitch-card-face{
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
}

.pitch-card-crown{
    width:78px;
    fill:var(--p-gold);
    filter:drop-shadow(0 4px 0 var(--p-gold-deep)) drop-shadow(0 0 14px rgba(255,201,60,.6));
    margin-bottom:10px;
}

.pitch-card-name{
    font-family:var(--p-display);
    font-size:var(--fs-3xl);
    line-height:1.1;
    letter-spacing:.5px;
    background:linear-gradient(180deg, #fff6d0 0%, #ffc93c 55%, #c98a12 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 3px 0 rgba(60,20,0,.55));
}

.pitch-card-sub{
    font-size:var(--fs-xs);
    font-weight:800;
    color:var(--p-muted);
    letter-spacing:.3px;
}

/* três gemas = raridade máxima */
.pitch-card-gems{
    display:flex;
    gap:8px;
    margin-top:16px;
}
.pitch-card-gems b{
    width:11px;
    height:11px;
    transform:rotate(45deg);
    background:linear-gradient(135deg, #ffd6f6, #ff3ec8);
    box-shadow:0 0 8px rgba(255,62,200,.8);
}

/* ---------- Texto, promessas, planos ---------- */

.pitch-body{
    opacity:0;
    visibility:hidden;
    transform:translateY(18px);
    transition:opacity .6s ease .55s, transform .6s ease .55s, visibility 0s linear .55s;
}
.pitch-stage[data-state="open"] + .pitch-body{
    opacity:1;
    visibility:visible;
    transform:none;
}
.pitch-stage.pitch-instant + .pitch-body{
    transition:none;
}
/* Com a esfera fechada, o texto e os planos ainda não existem: sem isto
   ocupavam espaço invisível e dava para fazer scroll para o vazio */
.pitch-stage[data-state="closed"] + .pitch-body{
    display:none;
}

.pitch-title{
    font-family:var(--p-display);
    font-weight:400;
    font-size:var(--fs-3xl);
    line-height:1.05;
    color:var(--p-text);
    text-align:center;
    margin:0 0 10px;
    text-shadow:0 3px 0 rgba(0,0,0,.35);
}

/* Duas frases, uma por linha (o \n vem na tradução) */
.pitch-lead{
    max-width:40ch;
    white-space:pre-line;
    text-wrap:balance;
    margin:0 auto 26px;
    text-align:center;
    font-size:var(--fs-base);
    line-height:1.5;
    color:var(--p-muted);
}

.pitch-promises{
    list-style:none;
    padding:0;
    margin:0 0 28px;
    display:flex;
    flex-direction:column;
    gap:16px;
}
.pitch-promises li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    font-size:var(--fs-sm);
    line-height:1.45;
    color:var(--p-muted);
}
.pitch-promises strong{
    display:block;
    font-size:var(--fs-base);
    color:var(--p-text);
    margin-bottom:2px;
}
.pitch-promise-icon{
    flex-shrink:0;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    font-size:var(--fs-md);
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), rgba(123,44,255,.25));
    box-shadow:inset 0 0 0 1.5px rgba(255,201,60,.35);
}

.pitch-plans{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:18px;
}

/* Planos como "bilhetes": recortes semicirculares nos lados */
button.pitch-plan{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:24px 10px 18px;
    border:none;
    border-radius:var(--radius-md);
    background:linear-gradient(170deg, #2a1764, #1a0d3d);
    color:var(--p-text);
    font-family:inherit;
    cursor:pointer;
    box-shadow:inset 0 0 0 2px rgba(185,172,220,.25);
    -webkit-mask:
        radial-gradient(circle 9px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 9px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle 9px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 9px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
    transition:transform .15s ease, box-shadow .2s ease;
}
button.pitch-plan:active{
    transform:scale(.97);
}
button.pitch-plan[aria-checked="true"]{
    box-shadow:inset 0 0 0 3px var(--p-gold), inset 0 0 24px rgba(255,201,60,.25);
}

/* o plano de 6 meses tem acabamento holográfico, como a carta */
button.pitch-plan-epic{
    background:
        linear-gradient(120deg, rgba(79,240,255,.18), rgba(255,62,200,.2), rgba(255,201,60,.18), rgba(79,240,255,.18)),
        linear-gradient(170deg, #34196f, #1a0d3d);
    background-size:300% 100%, 100% 100%;
    animation:pitch-foil 6s ease-in-out infinite alternate;
}

.pitch-plan-name{
    font-size:var(--fs-sm);
    font-weight:800;
    color:var(--p-muted);
}
.pitch-plan-price{
    font-family:var(--p-display);
    font-size:var(--fs-2xl);
    line-height:1.1;
    color:var(--p-text);
}
button.pitch-plan[aria-checked="true"] .pitch-plan-price{
    color:var(--p-gold);
}
.pitch-plan-note{
    font-size:var(--fs-xs);
    color:var(--p-muted);
}
.pitch-plan-save{
    position:absolute;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
    padding:2px 8px;
    border-radius:var(--radius-pill);
    background:#ff3ec8;
    color:#fff;
    font-size:var(--fs-xs);
    font-weight:800;
}

/* o texto leva preço e período ("…€15.99 a cada 6 meses"): pode ir
   para 2 linhas em vez de ficar cortado */
.btn-primary.pitch-cta{
    height:auto;
    min-height:62px;
    padding:12px 16px;
    margin-bottom:12px;
    font-size:var(--fs-lg);
    line-height:1.2;
    white-space:normal;
}

.pitch-fine{
    text-align:center;
    font-size:var(--fs-xs);
    line-height:1.5;
    color:var(--p-muted);
}

.pitch-active{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:18px;
    border-radius:var(--radius-lg);
    background:rgba(255,201,60,.1);
    box-shadow:inset 0 0 0 2px rgba(255,201,60,.45);
    text-align:center;
}
.pitch-active strong{
    font-family:var(--p-display);
    font-weight:400;
    font-size:var(--fs-lg);
    color:var(--p-gold);
}
/* .pitch-active define display:flex, por isso o .hidden genérico perdia */
.pitch-active.hidden{
    display:none;
}
button.pitch-plan-epic{
    padding-top:34px;
}
/* conteúdo dos dois bilhetes alinhado por baixo, para os preços ficarem à mesma altura */
button.pitch-plan{
    justify-content:flex-end;
}
.pitch-active span{
    color:var(--p-muted);
    font-size:var(--fs-sm);
}

/* ---------- Animações ---------- */

@keyframes pitch-spin{
    to{ transform:rotate(360deg); }
}

@keyframes pitch-bob{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-12px); }
}

@keyframes pitch-pulse{
    0%, 100%{ opacity:.65; }
    50%{ opacity:1; }
}

@keyframes pitch-shake{
    0%{ transform:translate(0,0) rotate(0); }
    10%{ transform:translate(-4px,1px) rotate(-5deg); }
    20%{ transform:translate(4px,-1px) rotate(5deg); }
    30%{ transform:translate(-6px,2px) rotate(-7deg); }
    40%{ transform:translate(6px,-2px) rotate(7deg); }
    50%{ transform:translate(-7px,1px) rotate(-8deg) scale(1.03); }
    60%{ transform:translate(7px,-1px) rotate(8deg) scale(1.05); }
    70%{ transform:translate(-8px,2px) rotate(-9deg) scale(1.07); }
    80%{ transform:translate(8px,-2px) rotate(9deg) scale(1.1); }
    90%{ transform:translate(-4px,0) rotate(-4deg) scale(1.14); }
    100%{ transform:translate(0,0) rotate(0) scale(1.18); }
}

@keyframes pitch-flash{
    0%{ opacity:1; transform:scale(.2); }
    35%{ opacity:1; }
    100%{ opacity:0; transform:scale(9); }
}

@keyframes pitch-card-in{
    0%{ opacity:0; transform:translateY(40px) scale(.2) rotateY(540deg); }
    60%{ opacity:1; }
    100%{ opacity:1; transform:none; }
}

@keyframes pitch-foil{
    0%{ background-position:0% 30%, 0 0; }
    100%{ background-position:100% 70%, 0 0; }
}

@keyframes pitch-spark{
    0%{ opacity:0; transform:translateY(0) scale(.6); }
    15%{ opacity:.9; }
    100%{ opacity:0; transform:translateY(-260px) scale(1.2); }
}

/* =========================================================
   RITUAL DE ENTRADA PREMIUM
   Sempre que um utilizador Premium abre a app: aurora, a coroa
   cai e bate no chão (onda de choque + faíscas), "Premium" em
   holográfico, e os números da própria pessoa a contar.
   Cores fixas (é sempre "noite"), como no pitch.
   ========================================================= */

.pw{
    --pw-ink:#0b0618;
    --pw-gold:#ffc93c;
    --pw-gold-deep:#c98a12;
    --pw-text:#f6f0ff;
    --pw-muted:#b9acdc;
    --pw-display:"Lilita One", "Baloo 2", sans-serif;

    position:fixed;
    inset:0;
    z-index:3000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:calc(24px + env(safe-area-inset-top, 0px)) 22px calc(24px + env(safe-area-inset-bottom, 0px));
    background:var(--pw-ink);
    color:var(--pw-text);
    overflow:hidden;
    opacity:1;
    transition:opacity .4s ease, transform .4s ease;
}
.pw.hidden{
    display:none;
}
.pw.is-closing{
    opacity:0;
    transform:scale(1.06);
    pointer-events:none;
}

/* Aurora: manchas de cor a deslizar devagar atrás de tudo */
.pw-aurora{
    position:absolute;
    inset:-30%;
    background:
        radial-gradient(40% 35% at 30% 30%, rgba(123,44,255,.55), transparent 70%),
        radial-gradient(35% 30% at 72% 38%, rgba(255,62,200,.35), transparent 70%),
        radial-gradient(45% 35% at 50% 80%, rgba(79,240,255,.22), transparent 70%),
        radial-gradient(30% 25% at 50% 45%, rgba(255,201,60,.25), transparent 70%);
    filter:blur(10px);
    animation:pw-aurora 14s ease-in-out infinite alternate;
}

.pw-content{
    position:relative;
    width:100%;
    max-width:380px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

/* ---------- A coroa a cair ---------- */

.pw-crown-wrap{
    position:relative;
    width:120px;
    height:96px;
    display:grid;
    place-items:center;
    margin-bottom:6px;
}

.pw-crown{
    width:112px;
    fill:var(--pw-gold);
    filter:drop-shadow(0 6px 0 var(--pw-gold-deep)) drop-shadow(0 0 22px rgba(255,201,60,.65));
    animation:pw-crown-drop .75s cubic-bezier(.55,0,.75,.2) both, pw-crown-float 3.5s ease-in-out .95s infinite;
}

/* onda de choque quando a coroa "aterra" */
.pw-shock{
    position:absolute;
    left:50%;
    top:70%;
    width:40px;
    height:14px;
    margin:-7px 0 0 -20px;
    border-radius:50%;
    border:3px solid rgba(255,214,102,.9);
    opacity:0;
    animation:pw-shock .9s ease-out .72s both;
}

/* faíscas disparadas em círculo no momento do impacto */
.pw-burst{
    position:absolute;
    left:50%;
    top:70%;
    width:0;
    height:0;
}
.pw-burst i{
    --a:0deg;
    position:absolute;
    width:6px;
    height:16px;
    margin:-8px 0 0 -3px;
    border-radius:3px;
    background:linear-gradient(var(--pw-gold), rgba(255,201,60,0));
    opacity:0;
    transform:rotate(var(--a)) translateY(0);
    animation:pw-burst .9s cubic-bezier(.1,.8,.3,1) .74s both;
}
.pw-burst i:nth-child(1){ --a:0deg; }
.pw-burst i:nth-child(2){ --a:30deg; background:linear-gradient(#4ff0ff, rgba(79,240,255,0)); }
.pw-burst i:nth-child(3){ --a:60deg; }
.pw-burst i:nth-child(4){ --a:90deg; background:linear-gradient(#ff3ec8, rgba(255,62,200,0)); }
.pw-burst i:nth-child(5){ --a:120deg; }
.pw-burst i:nth-child(6){ --a:150deg; background:linear-gradient(#4ff0ff, rgba(79,240,255,0)); }
.pw-burst i:nth-child(7){ --a:180deg; }
.pw-burst i:nth-child(8){ --a:210deg; background:linear-gradient(#ff3ec8, rgba(255,62,200,0)); }
.pw-burst i:nth-child(9){ --a:240deg; }
.pw-burst i:nth-child(10){ --a:270deg; background:linear-gradient(#4ff0ff, rgba(79,240,255,0)); }
.pw-burst i:nth-child(11){ --a:300deg; }
.pw-burst i:nth-child(12){ --a:330deg; background:linear-gradient(#ff3ec8, rgba(255,62,200,0)); }

/* ---------- Texto ---------- */

.pw-greeting{
    margin:0;
    font-size:var(--fs-base);
    font-weight:700;
    color:var(--pw-muted);
    animation:pw-rise .6s ease .95s both;
}

/* "Premium" holográfico: o gradiente desliza pelas letras */
.pw-title{
    margin:2px 0 6px;
    font-family:var(--pw-display);
    font-weight:400;
    font-size:var(--fs-display);
    line-height:1.05;
    letter-spacing:1px;
    background:linear-gradient(100deg, #fff6d0 0%, #ffc93c 20%, #ff9be6 38%, #8ef6ff 52%, #ffc93c 68%, #fff6d0 85%, #ffc93c 100%);
    background-size:250% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 4px 0 rgba(40,10,0,.6));
    animation:pw-rise .6s ease 1.05s both, pw-holo 5s linear 1.6s infinite;
}

.pw-subtitle{
    margin:0 0 22px;
    font-size:var(--fs-sm);
    color:var(--pw-muted);
    animation:pw-rise .6s ease 1.15s both;
}

/* ---------- Os números da pessoa ---------- */

.pw-stats{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin-bottom:18px;
}

.pw-stat{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:14px 6px 12px;
    border-radius:var(--radius-lg);
    background:rgba(255,255,255,.05);
    box-shadow:inset 0 0 0 1.5px rgba(185,172,220,.22);
    animation:pw-pop .5s cubic-bezier(.2,1.4,.4,1) both;
}
.pw-stat:nth-child(1){ animation-delay:1.25s; }
.pw-stat:nth-child(2){ animation-delay:1.35s; }
.pw-stat:nth-child(3){ animation-delay:1.45s; }

.pw-stat b{
    font-family:var(--pw-display);
    font-weight:400;
    font-size:var(--fs-2xl);
    line-height:1;
    color:var(--pw-text);
}
.pw-stat span{
    font-size:var(--fs-xs);
    line-height:1.3;
    color:var(--pw-muted);
}

/* "prontos a evoluir" > 0 → é a boa notícia do dia, brilha */
.pw-stat-hot.has-value{
    background:rgba(255,201,60,.12);
    box-shadow:inset 0 0 0 2px var(--pw-gold), 0 0 24px rgba(255,201,60,.25);
}
.pw-stat-hot.has-value b{
    color:var(--pw-gold);
}

.pw-tip{
    min-height:2.9em;
    max-width:34ch;
    margin:0 0 20px;
    font-size:var(--fs-sm);
    line-height:1.45;
    color:var(--pw-text);
    animation:pw-rise .6s ease 1.55s both;
}

.pw-actions{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:10px;
    animation:pw-rise .6s ease 1.65s both;
}

button.pw-secondary{
    width:100%;
    padding:13px;
    border:none;
    border-radius:var(--radius-md);
    background:rgba(255,201,60,.1);
    box-shadow:inset 0 0 0 2px rgba(255,201,60,.5);
    color:var(--pw-gold);
    font-family:inherit;
    font-size:var(--fs-base);
    font-weight:800;
    cursor:pointer;
}
button.pw-secondary.hidden{
    display:none;
}

/* barra de tempo: o ritual fecha sozinho; carregar e manter pausa */
.pw-timer{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:rgba(255,255,255,.08);
}
.pw-timer i{
    display:block;
    height:100%;
    width:100%;
    transform-origin:left;
    background:linear-gradient(90deg, var(--pw-gold), #ff9be6, #8ef6ff);
    transform:scaleX(1);
}

/* Reduzir movimento: tudo já no sítio, sem quedas nem faíscas */
.pw.pw-calm *,
.pw.pw-calm *::before,
.pw.pw-calm *::after{
    animation:none !important;
}
.pw.pw-calm .pw-burst,
.pw.pw-calm .pw-shock{
    display:none;
}

/* ---------- Lembretes permanentes (só body.is-premium) ---------- */

button.premium-chip{
    display:none;
    align-items:center;
    gap:4px;
    padding:6px 12px;
    border:none;
    border-radius:var(--radius-pill);
    background:
        linear-gradient(100deg, rgba(255,201,60,.22), rgba(255,155,230,.22), rgba(142,246,255,.22), rgba(255,201,60,.22));
    background-size:250% 100%;
    box-shadow:inset 0 0 0 1.5px rgba(255,201,60,.6);
    color:var(--gold);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    cursor:pointer;
    animation:pw-holo 6s linear infinite;
}
body.is-premium button.premium-chip{
    display:inline-flex;
}

/* anel holográfico a rodar à volta do botão dourado do centro */
body.is-premium .nav-btn-home::before{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    /* um só tom (dourado): um brilho que dá a volta, como um cometa */
    background:conic-gradient(from 0deg, rgba(255,201,60,0) 0deg, rgba(255,201,60,.15) 120deg, #ffc93c 300deg, #fff1b8 340deg, rgba(255,201,60,0) 360deg);
    -webkit-mask:radial-gradient(circle, transparent 62%, #000 64%);
    mask:radial-gradient(circle, transparent 62%, #000 64%);
    animation:pitch-spin 4s linear infinite;
    pointer-events:none;
}
.nav-btn-home{
    position:relative;
}

/* ---------- Animações ---------- */

@keyframes pw-aurora{
    0%{ transform:translate(0,0) rotate(0); }
    100%{ transform:translate(4%,-3%) rotate(12deg); }
}

@keyframes pw-crown-drop{
    0%{ opacity:0; transform:translateY(-70vh) rotate(-18deg) scale(1.3); }
    70%{ opacity:1; }
    100%{ opacity:1; transform:translateY(0) rotate(0) scale(1); }
}

@keyframes pw-crown-float{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
}

@keyframes pw-shock{
    0%{ opacity:1; transform:scale(1); }
    100%{ opacity:0; transform:scale(9, 6); }
}

@keyframes pw-burst{
    0%{ opacity:1; transform:rotate(var(--a)) translateY(0) scaleY(.4); }
    100%{ opacity:0; transform:rotate(var(--a)) translateY(-150px) scaleY(1); }
}

@keyframes pw-rise{
    0%{ opacity:0; transform:translateY(14px); }
    100%{ opacity:1; transform:none; }
}

@keyframes pw-pop{
    0%{ opacity:0; transform:scale(.6); }
    100%{ opacity:1; transform:none; }
}

@keyframes pw-holo{
    0%{ background-position:0% 50%; }
    100%{ background-position:250% 50%; }
}

/* quando a coroa aterra, o ecrã treme um bocadinho */
@keyframes pw-quake{
    0%, 100%{ transform:translate(0,0); }
    20%{ transform:translate(-4px,3px); }
    40%{ transform:translate(4px,-2px); }
    60%{ transform:translate(-3px,1px); }
    80%{ transform:translate(2px,-1px); }
}
.pw:not(.pw-calm) .pw-content{
    animation:pw-quake .35s linear .74s;
}

/* Quem já é Premium nunca vê o cadeado do Guia na Calculadora —
   salvaguarda extra para além do JS (atualizarSeloGuiaHome). */
body.is-premium #guideEntryLockBadge{
    display:none !important;
}

/* =========================================================
   FUNDO "ARENA CELESTE"
   A app flutua sobre uma paisagem minimalista: céu em gradiente,
   um astro suave no canto (lua dourada no escuro, sol no claro),
   uma nebulosa violeta a deslizar muito devagar e, em baixo, os
   anéis do chão de uma arena vistos em perspetiva. Grão finíssimo
   por cima para dar textura. Fixo: o conteúdo desliza por cima.
   Só violeta + dourado (as cores da app).
   ========================================================= */

/* céu + astro + nebulosa */
body::before{
    content:"";
    position:fixed;
    inset:-12%;
    z-index:-2;
    pointer-events:none;
    background:
        /* o astro: disco suave + halo largo */
        /* (posições relativas a uma caixa 12% maior que o ecrã: 74%/24%
            fica ~80% da largura e ~20% da altura visível) */
        radial-gradient(circle 38px at 74% 24%, var(--bg-star) 0%, var(--bg-star) 62%, transparent 100%),
        radial-gradient(circle 220px at 74% 24%, var(--bg-star-glow), transparent 70%),
        /* nebulosa violeta */
        radial-gradient(ellipse 60% 40% at 12% 38%, var(--bg-nebula), transparent 70%),
        radial-gradient(ellipse 45% 30% at 70% 70%, var(--bg-nebula), transparent 75%),
        /* céu */
        linear-gradient(to bottom, var(--bg-body-start), var(--bg-body-end));
    animation:fundo-deriva 60s ease-in-out infinite alternate;
}

/* chão da arena (anéis) + grão */
body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
        var(--bg-grain),
        repeating-radial-gradient(ellipse 150% 60% at 50% 112%, transparent 0 42px, var(--bg-ring) 42px 43.5px);
    background-size:160px 160px, 100% 100%;
    -webkit-mask-image:linear-gradient(to top, #000 0%, #000 25%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.12) 100%);
    mask-image:linear-gradient(to top, #000 0%, #000 25%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.12) 100%);
}

@keyframes fundo-deriva{
    0%{ transform:translate(0, 0) scale(1); }
    100%{ transform:translate(-3%, 2%) scale(1.04); }
}

/* ---------- Pitch: método de pagamento (cartão / MB WAY) ---------- */

.pitch-methods{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:-4px 0 18px;
}

button.pitch-method{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    border:none;
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.05);
    box-shadow:inset 0 0 0 1.5px rgba(185,172,220,.25);
    color:var(--p-text);
    font-family:inherit;
    text-align:left;
    cursor:pointer;
    transition:box-shadow .2s ease, background .2s ease, transform .15s ease;
}
button.pitch-method:active{
    transform:scale(.97);
}
button.pitch-method[aria-checked="true"]{
    background:rgba(255,201,60,.1);
    box-shadow:inset 0 0 0 2.5px var(--p-gold);
}

.pitch-method-icon{
    flex-shrink:0;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,.08);
    font-size:var(--fs-md);
}
/* "MB WAY" em texto, nas cores da marca (vermelho) */
.pitch-method-mbway{
    background:#d6001c;
    color:#fff;
    font-size:var(--fs-2xs);
    font-weight:800;
    line-height:1;
    letter-spacing:.3px;
    text-align:center;
}

.pitch-method-text{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}
.pitch-method-text strong{
    font-size:var(--fs-base);
    color:var(--p-text);
}
.pitch-method-text small{
    font-size:var(--fs-xs);
    line-height:1.3;
    color:var(--p-muted);
}

.pitch-extend-title{
    font-family:var(--p-display);
    font-weight:400;
    font-size:var(--fs-lg);
    color:var(--p-text);
    text-align:center;
    margin:22px 0 14px;
}
.pitch-extend-title.hidden{
    display:none;
}

button.pitch-manage{
    margin-top:10px;
    padding:10px 16px;
    border:none;
    border-radius:var(--radius-pill);
    background:transparent;
    box-shadow:inset 0 0 0 1.5px rgba(255,201,60,.6);
    color:var(--p-gold);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    cursor:pointer;
}
button.pitch-manage.hidden{
    display:none;
}
button.pitch-manage:disabled,
.pitch-cta:disabled{
    opacity:.6;
    cursor:wait;
}

/* ---------- Ligações legais (Termos / Privacidade) ---------- */

/* linhas das Definições que são links (<a>) em vez de botões */
a.settings-link{
    display:flex;
    text-decoration:none;
    color:inherit;
}

.nota-legal{
    margin:-6px 0 16px;
    font-size:var(--fs-xs);
    line-height:1.5;
    color:var(--text-secondary);
}
.nota-legal a,
.pitch-consent a{
    color:inherit;
    font-weight:800;
    text-decoration:underline;
}

/* Caixa de consentimento antes de pagar (ecrã Premium, sempre escuro) */
.pitch-consent{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:0 0 16px;
    padding:12px;
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.04);
    box-shadow:inset 0 0 0 1.5px rgba(185,172,220,.2);
    font-size:var(--fs-xs);
    font-weight:400;
    line-height:1.5;
    color:var(--p-muted);
    cursor:pointer;
    text-align:left;
}
/* anula o estilo global dos inputs (width:100%, height:58px…) */
.pitch-consent input[type="checkbox"]{
    flex-shrink:0;
    width:20px;
    height:20px;
    margin:1px 0 0;
    padding:0;
    accent-color:var(--p-gold);
    box-shadow:none;
    cursor:pointer;
}
.pitch-consent.falta{
    box-shadow:inset 0 0 0 2px #ff6b6b;
    animation:consentimento-abana .4s ease;
}
@keyframes consentimento-abana{
    0%, 100%{ transform:translateX(0); }
    25%{ transform:translateX(-6px); }
    75%{ transform:translateX(6px); }
}

/* =========================================================
   ÁREAS DE TOQUE — mínimo de 44px (recomendação Apple/Google)
   As setas "←", os botões de tema/som e a sequência de dias eram
   mais pequenos e fáceis de falhar com o dedo.
   ========================================================= */
button.guide-back-btn{
    min-width:44px;
    min-height:44px;
}
.theme-option{
    width:44px;
    height:44px;
}
button.streak-indicator{
    min-height:36px;
    padding:8px 14px;
}

/* =========================================================
   ENVOLVIMENTO — prémio da sequência, dica do dia, lembretes,
   Arena no onboarding, apagar conta
   ========================================================= */
.premio-banner{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 18px;
    padding:14px 16px;
    border:1.5px solid var(--gold);
    border-radius:var(--radius-lg);
    background:linear-gradient(135deg, rgba(255,201,60,.18), rgba(182,109,255,.14));
    box-shadow:0 0 18px rgba(255,201,60,.18);
}
.premio-banner.hidden{ display:none; }
.premio-banner-icon{ font-size:var(--fs-2xl); }
.premio-banner p{
    flex:1 1 180px;
    margin:0;
    font-size:var(--fs-sm);
    font-weight:800;
    color:var(--text-primary);
}
button.premio-btn{
    min-height:44px;
    padding:0 18px;
    border:none;
    border-radius:var(--radius-md);
    background:linear-gradient(180deg, #f6d365, #d4a017);
    color:#222;
    font-family:inherit;
    font-weight:800;
    font-size:var(--fs-base);
    cursor:pointer;
    box-shadow:none;
}
button.premio-btn.hidden{ display:none; }
.premio-banner button.premio-btn{ flex:1 1 100%; }

.premio-card,
.lembrete-card{
    margin-bottom:16px;
    padding:16px;
    border:1.5px solid var(--gold);
    border-radius:var(--radius-lg);
    background:var(--gold-dim);
}
.lembrete-card{ border-style:dashed; }
.lembrete-card.hidden{ display:none; }
.premio-card-topo{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:var(--fs-md);
    color:var(--gold);
}
.premio-card p,
.lembrete-card p{
    margin:8px 0 10px;
    font-size:var(--fs-sm);
    line-height:1.45;
    color:var(--text-primary);
}
.premio-progresso{
    height:8px;
    margin-bottom:12px;
    border-radius:var(--radius-pill);
    background:rgba(255,255,255,.1);
    overflow:hidden;
}
.premio-progresso i{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, #d4a017, #f6d365);
    transition:width .5s ease;
}
.premio-card button.premio-btn,
.lembrete-card button.premio-btn{ width:100%; }

.dica-dia{
    margin:22px 0 14px;
    padding:14px 16px;
    border-left:4px solid var(--gold);
    border-radius:var(--radius-md);
    background:var(--surface-bg-alt);
}
.dica-dia-label{
    display:block;
    margin-bottom:4px;
    font-size:var(--fs-xs);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:var(--gold);
}
.dica-dia p{
    margin:0;
    font-size:var(--fs-base);
    line-height:1.45;
    color:var(--text-primary);
}

.onboarding-arenas{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
    margin-top:14px;
}
button.onboarding-arena{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    min-height:56px;
    padding:6px 4px;
    border:1.5px solid var(--card-border);
    border-radius:var(--radius-md);
    background:transparent;
    box-shadow:none;
    color:var(--text-primary);
    font-family:inherit;
    cursor:pointer;
}
button.onboarding-arena b{ font-size:var(--fs-lg); }
button.onboarding-arena small{ font-size:var(--fs-2xs); color:var(--text-secondary); }
button.onboarding-arena.active{
    border-color:var(--gold);
    background:var(--gold-dim);
    color:var(--gold);
}


.settings-group.hidden{ display:none; }

/* Onboarding com altura fixa: o botão "Seguinte" fica sempre no mesmo
   sítio (antes o cartão mudava de altura a cada passo e o botão saltava
   para onde o dedo já não estava) */
.onboarding-card{
    display:flex;
    flex-direction:column;
    min-height:min(620px, calc(100dvh - 40px));
}
.onboarding-slide{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.onboarding-slide.hidden{
    display:none;
}

/* ---------- Nível alvo (calculadora) ---------- */
select.nivel-alvo{
    height:52px;
    font-size:16px;
}

/* ---------- Partilhar o resultado ---------- */
button.partilhar-resultado{
    display:block;
    width:100%;
    min-height:48px;
    margin:14px 0 6px;
    border:1.5px solid var(--gold);
    border-radius:var(--radius-md);
    background:transparent;
    box-shadow:none;
    color:var(--gold);
    font-family:inherit;
    font-weight:800;
    font-size:var(--fs-base);
    cursor:pointer;
}

/* ---------- Plano de evolução (Coleção) ---------- */
.plano-card.hidden{ display:none; }
.plano-card input{ font-size:16px; }
.plano-resumo{
    margin:16px 0 10px;
    padding:12px 14px;
    border-radius:var(--radius-md);
    background:var(--gold-dim);
    color:var(--text-primary);
    font-weight:800;
    line-height:1.45;
}
.plano-lista{
    margin:0 0 12px;
    padding-left:22px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.plano-lista li{ color:var(--gold); font-weight:800; }
.plano-lista li strong{ color:var(--text-primary); }
.plano-lista li span{
    display:block;
    font-weight:600;
    font-size:var(--fs-sm);
    color:var(--text-secondary);
}
.plano-dica,
.plano-vazio{
    margin:0 0 12px;
    font-size:var(--fs-sm);
    line-height:1.45;
    color:var(--text-secondary);
}
.plano-vazio{ margin-top:14px; }
button.plano-aplicar{
    width:100%;
    min-height:48px;
    border:none;
    border-radius:var(--radius-md);
    background:linear-gradient(180deg, #4ade80, #16a34a);
    box-shadow:none;
    color:#052e12;
    font-family:inherit;
    font-weight:800;
    font-size:var(--fs-base);
    cursor:pointer;
}

/* ---------- Convite para instalar a app (Home) ---------- */
.instalar-banner{
    position:relative;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 18px;
    padding:14px 44px 14px 16px;
    border:1.5px dashed var(--gold);
    border-radius:var(--radius-lg);
    background:var(--surface-bg-alt);
}
.instalar-banner.hidden{ display:none; }
.instalar-banner > span{ font-size:var(--fs-2xl); }
.instalar-banner p{
    flex:1 1 180px;
    margin:0;
    font-size:var(--fs-sm);
    line-height:1.4;
    color:var(--text-primary);
}
.instalar-banner button.premio-btn{ flex:1 1 100%; }
button.instalar-fechar{
    position:absolute;
    top:4px;
    right:4px;
    width:40px;
    height:40px;
    border:none;
    background:none;
    box-shadow:none;
    color:var(--text-secondary);
    font-size:var(--fs-base);
    cursor:pointer;
}
.settings-row.hidden{ display:none; }

/* =========================================================
   TEXTO À ESQUERDA (22/10/2026). Antes era justificado, mas sem hífenes
   (desligados na v54: no iPhone cortavam palavras a meio) abria buracos
   entre as palavras em ecrãs estreitos. À esquerda lê-se melhor.
   ========================================================= */
p,
li{
    text-align:left;
    -webkit-hyphens:manual;
    hyphens:manual;
}
/* Onde o texto é centrado de propósito (textos curtos): centrado a sério —
   justificado abria buracos enormes entre as palavras */
.onboarding-card p,
.premium-card p,
header p,
.confirm-modal-card p,
.pw-content p,
.stats-free-banner p,
.pitch-body p,
.pitch-active span,
.share-card-inner p,
.resultado-destaque p,
.resultado-item p,
.hero-min-level-note,
.auth-switch,
.hero-picker-empty,
#mensagem{
    text-align:center;
}
/* Listas com números/nomes alinhados à esquerda (não são prosa) */
.plano-lista li,
.pitch-promises li{
    text-align:left;
}
/* Avisos curtos (uma ou duas linhas): justificar abria buracos enormes
   entre as palavras ("Amostra   grátis:   experimenta") */
.stats-free-banner p,
header p,
.pw-content p,
.pitch-active span,
.hero-min-level-note,
.auth-switch,
.hero-picker-empty{
    text-align:center;
    text-align-last:auto;
}
.instalar-banner p,
.premio-banner p,
.lembrete-card p,
.premio-card p,
.nota-legal,
.feedback-email-note,
.hero-curve-gain,
.compare-verdict li{
    text-align:left;
    text-align-last:auto;
}

/* "Lembrar os meus dados" (login) */
label.lembrar-dados{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    margin:-6px 0 12px;
    color:var(--text-primary);
    font-weight:700;
    font-size:var(--fs-sm);
    cursor:pointer;
}
label.lembrar-dados input{
    width:22px;
    height:22px;
    margin:0;
    accent-color:var(--gold);
    flex-shrink:0;
}

/* Áreas de toque com pelo menos 44px (recomendação Apple/Google) */
.streak-indicator{
    min-height:44px;
}

/* Blocos cinzentos no lugar dos textos Premium (pré-visualização esbatida) */
.texto-escondido{
    color:var(--text-secondary);
    opacity:.45;
    letter-spacing:-1px;
}
.conteudo-falta{
    text-align:center;
}
.conteudo-falta p{
    text-align:center;
    text-align-last:auto;
    color:var(--text-secondary);
}

/* =========================================================
   FUNCIONALIDADES NOVAS — separadores de 3, preencher vários,
   progresso, criar deck, previsão, convite ao Premium, convites
   ========================================================= */

/* Três separadores lado a lado: letra um pouco menor para caberem */
.mode-tabs-tres .mode-tab{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:8px 6px;
    font-size:var(--fs-sm);
    line-height:1.25;
}

/* "— ou —" e "⚡ Adicionar vários de uma vez", no fim do cartão "Adicionar herói" */
.colecao-ou{
    display:flex;
    align-items:center;
    gap:12px;
    margin:14px 0 10px;
    color:var(--text-secondary);
    font-size:var(--fs-xs);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
}
.colecao-ou::before,
.colecao-ou::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--card-border);
}
.colecao-rapida-chip{
    width:100%;
    min-height:48px;
    padding:10px 14px;
    border:1.5px solid var(--accent-teal);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--accent-teal) 12%, transparent);
    color:var(--accent-teal);
    font-size:var(--fs-base);
    font-weight:800;
    cursor:pointer;
    transition:transform .15s ease, background .2s ease;
}
.colecao-rapida-chip:hover{ background:color-mix(in srgb, var(--accent-teal) 22%, transparent); }
.colecao-rapida-chip:active{ transform:scale(.96); }

/* Folha a ecrã inteiro com os 75 heróis */
body.sem-scroll{ overflow:hidden; }
.colecao-rapida{
    position:fixed;
    inset:0;
    z-index:1500;
    display:flex;
    flex-direction:column;
    max-width:500px;
    margin:0 auto;
    padding:calc(14px + env(safe-area-inset-top, 0px)) 16px 0;
    background:var(--bg-body-end);
}
.colecao-rapida.hidden{ display:none; }
.colecao-rapida-topo{
    display:flex;
    align-items:center;
    gap:10px;
}
.colecao-rapida-topo h2{
    margin:0;
    font-size:var(--fs-xl);
    color:var(--gold);
}
.colecao-rapida-ajuda{
    margin:8px 0 10px;
    font-size:var(--fs-sm);
    color:var(--text-secondary);
    text-align:left;
    text-align-last:auto;
}
.colecao-rapida-pesquisa{
    margin-bottom:10px;
    padding:11px 14px;
    font-size:var(--fs-base);
}
.colecao-rapida-lista{
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:12px;
}
.colecao-rapida-grupo{
    position:sticky;
    top:0;
    z-index:1;
    padding:8px 4px;
    background:var(--bg-body-end);
    font-size:var(--fs-sm);
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
}
.colecao-rapida-grupo.raridade-comum{ color:#9ca8b8; }
.colecao-rapida-grupo.raridade-raro{ color:#5aa9ff; }
.colecao-rapida-grupo.raridade-epico{ color:#c084fc; }
.colecao-rapida-grupo.hidden{ display:none; }
.colecao-rapida-linha{
    display:grid;
    grid-template-columns:1fr 64px 84px;
    align-items:center;
    gap:8px;
    padding:6px 8px;
    margin-bottom:6px;
    border:1.5px solid var(--card-border);
    border-radius:var(--radius-md);
    background:var(--surface-bg-alt);
}
.colecao-rapida-linha.tem{
    border-color:var(--accent-teal);
}
.colecao-rapida-linha.hidden{ display:none; }
.colecao-rapida-nome{
    font-weight:800;
    font-size:var(--fs-sm);
    color:var(--text-primary);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.colecao-rapida-linha input{
    margin:0;
    padding:8px 6px;
    font-size:var(--fs-base);
    text-align:center;
}
.colecao-rapida-rodape{
    padding:10px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--card-border);
}
.colecao-rapida-rodape .btn-primary{ margin:0; }

/* O teu progresso */
.historico-resumo{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
    margin-bottom:14px;
}
.historico-numero{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:12px 6px;
    border:1.5px solid var(--card-border);
    border-radius:var(--radius-lg);
    background:linear-gradient(145deg,var(--card-bg-start),var(--card-bg-end));
    text-align:center;
}
.historico-numero b{
    font-family:'Baloo 2', 'Nunito', Arial, sans-serif;
    font-size:var(--fs-xl);
    color:var(--gold);
    line-height:1.1;
}
.historico-numero small{
    font-size:var(--fs-xs);
    color:var(--text-secondary);
    font-weight:700;
}
.historico-grafico-card h2{ font-size:var(--fs-md); margin:0 0 10px; }
.historico-grafico{
    display:flex;
    align-items:flex-end;
    gap:6px;
    height:140px;
}
.historico-barra{
    flex:1;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
}
.historico-barra i{
    display:block;
    width:100%;
    max-width:28px;
    border-radius:6px 6px 2px 2px;
    background:linear-gradient(180deg,#5eead4,#0d9488);
    min-height:2px;
}
.historico-barra.atual i{ background:linear-gradient(180deg,#ffe066,#c8960c); }
.historico-barra-valor{
    font-size:var(--fs-xs);
    font-weight:800;
    color:var(--text-primary);
    min-height:14px;
}
.historico-barra small{
    font-size:var(--fs-2xs);
    color:var(--text-secondary);
    white-space:nowrap;
}
.historico-subtitulo{
    margin:18px 0 8px;
    font-size:var(--fs-md);
    color:var(--text-primary);
}
.historico-lista{
    list-style:none;
    margin:0;
    padding:0;
}
.historico-lista li{
    display:grid;
    grid-template-columns:1fr auto;
    gap:2px 10px;
    padding:10px 12px;
    margin-bottom:6px;
    border:1.5px solid var(--card-border);
    border-radius:var(--radius-md);
    background:var(--surface-bg-alt);
    text-align:left;
}
.historico-lista li strong{ color:var(--text-primary); }
.historico-lista li span{ grid-column:1; font-size:var(--fs-sm); color:var(--text-secondary); }
.historico-lista li small{ grid-column:2; grid-row:1 / span 2; align-self:center; font-size:var(--fs-xs); color:var(--text-secondary); }

/* Criar deck */
.deck-slots{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px;
}
.deck-slot label{ font-size:var(--fs-xs); }
.deck-nota-card{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px;
    margin-bottom:10px;
    border:2px solid var(--gold);
    border-radius:var(--radius-lg);
    background:var(--gold-dim);
}
.deck-nota-card strong{
    display:block;
    font-size:var(--fs-md);
    color:var(--text-primary);
}
.deck-nota-card span{
    font-size:var(--fs-sm);
    color:var(--text-secondary);
}
.deck-herois{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.deck-heroi{
    padding:10px 12px;
    border:1.5px solid var(--card-border);
    border-radius:var(--radius-md);
    background:var(--surface-bg-alt);
}
.deck-heroi-tier{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border-radius:8px;
    font-weight:800;
    font-family:'Baloo 2', 'Nunito', Arial, sans-serif;
}
.deck-heroi.tier-S .deck-heroi-tier{ background:linear-gradient(180deg,#ffe066,#c8960c); color:#3a2c00; }
.deck-heroi.tier-A .deck-heroi-tier{ background:linear-gradient(180deg,#d8dde3,#9ca8b8); color:#1c2431; }
.deck-heroi.tier-B .deck-heroi-tier{ background:linear-gradient(180deg,#e3a66e,#9c5e22); color:#2b1700; }
.deck-heroi.tier-C .deck-heroi-tier{ background:linear-gradient(180deg,#9ca3af,#5b6472); color:#1c2431; }
.deck-sugestao{
    margin-top:12px;
    padding:12px 14px;
    border-left:3px solid var(--accent-teal);
    border-radius:var(--radius-sm);
    background:var(--surface-bg-alt);
    color:var(--text-primary);
    font-size:var(--fs-sm);
    text-align:left;
    text-align-last:auto;
}

/* Calculadora: previsão (Premium) e convite ao Premium */
.calc-upsell{
    margin-top:14px;
    padding:16px;
    border:2px solid var(--gold);
    border-radius:var(--radius-lg);
    background:linear-gradient(145deg,rgba(255,215,0,.12),rgba(123,44,255,.10));
    text-align:center;
}
.calc-upsell strong{
    display:block;
    font-size:var(--fs-md);
    color:var(--gold);
    margin-bottom:6px;
}
.calc-upsell p{
    margin:0 0 12px;
    font-size:var(--fs-sm);
    color:var(--text-primary);
    text-align:center;
    text-align-last:auto;
}
.calc-upsell .premium-btn{ height:50px; padding:10px; }

/* Convidar amigos */
.convite-card{ text-align:center; }
.convite-rotulo{
    margin:0;
    font-size:var(--fs-sm);
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:var(--text-secondary);
    text-align:center;
    text-align-last:auto;
}
.convite-codigo{
    margin:6px 0 16px;
    font-family:'Baloo 2', 'Nunito', Arial, sans-serif;
    font-size:42px;
    font-weight:800;
    letter-spacing:6px;
    color:var(--gold);
    text-align:center;
    text-align-last:auto;
}
.convite-copiar{
    width:100%;
    min-height:46px;
    margin-top:10px;
    border:2px solid var(--card-border);
    border-radius:var(--radius-md);
    background:transparent;
    color:var(--text-primary);
    font-weight:800;
    cursor:pointer;
}
.convite-contagem{
    margin:14px 0 4px;
    font-weight:800;
    color:var(--accent-teal);
    text-align:center;
    text-align-last:auto;
}
.convite-regras{
    margin:12px 0 0;
    padding-left:20px;
    text-align:left;
    color:var(--text-secondary);
    font-size:var(--fs-sm);
}
.convite-regras li{ text-align:left; margin-bottom:4px; }
.convite-usar{
    display:flex;
    gap:8px;
    align-items:center;
}
.convite-usar input{
    margin:0;
    text-transform:uppercase;
    letter-spacing:4px;
    text-align:center;
}
.convite-usar .mini-btn{ flex-shrink:0; min-height:52px; padding:0 18px; }
.colecao-rapida-fechar{
    flex-shrink:0;
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:var(--surface-bg-alt);
    color:var(--text-primary);
    font-size:var(--fs-lg);
    cursor:pointer;
}
.colecao-rapida-linha input{
    height:42px;
    min-height:0;
}


/* ---------- Blocos a pulsar enquanto os dados chegam ---------- */
.esqueleto-lista{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.esqueleto-bloco{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:16px;
    border:1.5px solid var(--card-border);
    border-radius:var(--radius-lg);
    background:var(--surface-bg-alt);
}
.esqueleto-bloco i,
.esqueleto-numero,
.esqueleto-grafico{
    display:block;
    border-radius:6px;
    background:linear-gradient(90deg, var(--card-border) 0%, var(--surface-bg) 50%, var(--card-border) 100%);
    background-size:200% 100%;
    animation:esqueleto-brilho 1.3s ease-in-out infinite;
}
.esqueleto-bloco i{ height:14px; width:60%; }
.esqueleto-bloco i + i{ height:10px; width:85%; }
.esqueleto-numero{ min-height:78px; border-radius:var(--radius-lg); }
.esqueleto-grafico{ width:100%; height:100%; border-radius:var(--radius-md); opacity:.6; }
@keyframes esqueleto-brilho{
    0%{ background-position:100% 0; }
    100%{ background-position:-100% 0; }
}

/* ---------- Definições: cartão da conta ---------- */
.conta-cartao{
    padding-top:14px;
}
.conta-topo{
    display:flex;
    align-items:center;
    gap:12px;
}
.conta-avatar{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    border-radius:50%;
    background:linear-gradient(145deg,#f6d365,#c8960c);
    color:#3a2c00;
    font-family:'Baloo 2', 'Nunito', Arial, sans-serif;
    font-size:var(--fs-2xl);
    font-weight:800;
    box-shadow:0 4px 14px rgba(200,150,12,.35);
}
.conta-info{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}
.conta-info strong{
    font-size:var(--fs-md);
    color:var(--text-primary);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.conta-info span{
    font-size:var(--fs-sm);
    color:var(--text-secondary);
    overflow:hidden;
    text-overflow:ellipsis;
}
.conta-selo{
    flex-shrink:0;
    padding:4px 10px;
    border-radius:var(--radius-pill);
    background:var(--gold-dim);
    border:1px solid var(--gold);
    color:var(--gold);
    font-size:var(--fs-xs);
    font-weight:800;
}
.conta-selo.hidden{ display:none; }
.conta-botoes{
    display:flex;
    align-items:center;
    gap:10px;
    justify-content:flex-end;
    padding:10px 0 12px;
    border-bottom:1px solid var(--card-border);
}
.conta-botoes .mini-btn{ min-height:40px; }
.conta-botoes .mini-btn.hidden{ display:none; }

/* ---------- Conquistas: botão partilhar ---------- */
.conquista-partilhar{
    flex-shrink:0;
    width:40px;
    height:40px;
    margin-left:6px;
    border:1.5px solid var(--gold);
    border-radius:50%;
    background:var(--gold-dim);
    color:inherit;
    font-size:var(--fs-base);
    cursor:pointer;
}

/* ---------- Sem internet ---------- */
.offline-banner{
    display:flex;
    flex-direction:column;
    gap:2px;
    width:calc(100vw - 32px);
    max-width:440px;
    padding:12px 40px 12px 16px;
    border-radius:var(--radius-lg);
    text-align:left;
}
.offline-banner.hidden{ display:none; }
.offline-banner strong{ font-size:var(--fs-base); }
.offline-banner span{ font-weight:600; font-size:var(--fs-xs); line-height:1.4; }
.offline-fechar{
    position:absolute;
    top:6px;
    right:6px;
    width:32px;
    height:32px;
    border:none;
    background:none;
    color:inherit;
    font-size:var(--fs-base);
    cursor:pointer;
}
/* Com o aviso "sem internet" à vista, as mensagens aparecem por baixo dele */
body.sem-internet:has(#offlineBanner:not(.hidden)) .toast{
    top:calc(env(safe-area-inset-top, 0px) + 112px);
}

/* Nome e email numa linha só, com "…" se forem compridos */
.conta-info span{ white-space:nowrap; }
.conta-botoes .conta-selo{ margin-right:auto; }

.roadmap-sort-row.hidden{ display:none; }
.colecao-adicionar{ margin:0 0 18px; }
.colecao-adicionar h2{ font-size:var(--fs-md); margin:0 0 12px; }

/* Telemóveis pequenos: os 3 separadores numa linha cada um */
@media (max-width:360px){
    .mode-tabs-tres .mode-tab{ font-size:var(--fs-xs); white-space:nowrap; padding:8px 4px; }
}
#roadmapEmptyMsg .premium-text{ text-align:left; text-align-last:auto; }

/* =========================================================
   TIPOGRAFIA — números e etiquetas iguais em toda a app
   Números grandes na letra dos títulos (Baloo 2), com algarismos da
   mesma largura (não "saltam" ao mudar); etiquetas pequenas sempre em
   Nunito forte, maiúsculas e com o mesmo espaçamento.
   ========================================================= */
.resultado-item p,
.resultado-destaque h2,
.stat-value{
    font-family:'Baloo 2', 'Nunito', Arial, sans-serif;
    font-weight:800;
    font-variant-numeric:tabular-nums;
    line-height:1.15;
}
.resultado-item h3,
.resultado-par span{
    font-family:inherit;
    font-weight:800;
    letter-spacing:.5px;
    line-height:1.35;
    opacity:.75;
}
input[type=text][data-milhares],
input[type=number],
.progresso-texto,
.resultado-sobra{
    font-variant-numeric:tabular-nums;
}
/* Textos curtos de boas-vindas: centrados (justificar abria buracos) */
.onboarding-card p{
    text-align:center;
    text-align-last:auto;
}
.onboarding-card h2{ line-height:1.2; }
/* "Comparar este herói" + 🔒 Premium: o texto fica numa linha sempre que
   cabe; se não couber, o botão cresce em vez de esmagar as duas linhas */
.compare-hero-btn{
    height:auto;
    min-height:52px;
    padding:10px 14px;
    line-height:1.25;
}
.compare-hero-btn .premium-lock-badge{ flex-shrink:0; white-space:nowrap; }
/* Um cartão que começa por texto não fica com um "buraco" em cima */
.card > p:first-child{ margin-top:0; }
/* O email corta com "…"; o convite "Entra para…" (sem sessão) pode ter 2 linhas */
.conta-info span[data-i18n]{ white-space:normal; }
/* Barra de baixo no tema claro: os inativos continuam "apagados", mas
   legíveis (com .65 as etiquetas de 10px ficavam quase invisíveis) */
[data-theme="light"] .nav-btn:not(.active){ opacity:.85; }
/* Conquistas por desbloquear: em vez de meio-transparentes (o texto
   ficava ilegível), contorno tracejado e só o ícone a cinzento */
.collection-badge-row:not(.unlocked){
    opacity:1;
    border-style:dashed;
}
.collection-badge-row:not(.unlocked) .collection-badge-icon{
    filter:grayscale(1);
    opacity:.55;
}
.collection-badge-row:not(.unlocked) .collection-badge-name{ color:var(--text-secondary); }
/* Subtítulos dos ecrãs: legíveis no tema claro */
[data-theme="light"] .subtitle{ opacity:1; }

/* ---------- Calculadora: nível alvo dentro do resultado (Premium) ---------- */
.alvo-inline{
    width:auto;
    min-height:0;
    height:auto;
    margin:0 2px;
    padding:2px 22px 2px 8px;
    border:1.5px solid var(--gold);
    border-radius:var(--radius-sm);
    background-color:var(--gold-dim);
    color:var(--gold);
    font:inherit;
    font-weight:800;
    vertical-align:baseline;
    cursor:pointer;
}

/* ---------- Coleção › Plano: "Quando chego lá?" ---------- */
.ritmo-card{ margin-top:18px; }
.ritmo-grelha{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin:6px 0 4px;
}
.ritmo-campo{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin:0;
    font-size:var(--fs-xs);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
    text-align:center;
}
.ritmo-campo span{
    align-self:center;
    padding:2px 8px;
    border-radius:999px;
    color:#fff;
}
.ritmo-campo.raridade-comum span{ background:#7b8794; }
.ritmo-campo.raridade-raro span{ background:#2f80ed; }
.ritmo-campo.raridade-epico span{ background:#9b51e0; }
.ritmo-campo input{
    margin:0;
    text-align:center;
    font-weight:800;
}
.ritmo-subtitulo{
    margin:16px 0 8px;
    font-size:var(--fs-sm);
    text-transform:uppercase;
    letter-spacing:.5px;
    opacity:.8;
}
.ritmo-lista{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.ritmo-lista li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-radius:var(--radius-md);
    background:var(--surface-bg-alt);
    text-align:left;
}
.ritmo-lista li.ritmo-ja{ border:1.5px solid var(--accent-teal); }
.ritmo-heroi{ display:flex; flex-direction:column; min-width:0; }
.ritmo-heroi strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ritmo-heroi span{ font-size:var(--fs-xs); color:var(--text-secondary); }
.ritmo-quando{ display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; }
.ritmo-quando b{ color:var(--accent-teal); font-variant-numeric:tabular-nums; }
.ritmo-quando small{ font-size:var(--fs-xs); color:var(--text-secondary); }
.roadmap-eta{
    display:inline-block;
    margin-left:2px;
    color:var(--accent-teal);
    font-weight:800;
    white-space:nowrap;
}

/* ---------- Conta: a imagem é um botão "Editar perfil" ---------- */
button.conta-avatar{
    position:relative;
    border:none;
    padding:0;
    cursor:pointer;
}
button.conta-avatar:disabled{ cursor:default; }
button.conta-avatar:not(:disabled)::after{
    content:"✎";
    position:absolute;
    right:-2px;
    bottom:-2px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--card-bg-start);
    border:1.5px solid var(--gold);
    color:var(--gold);
    font-family:'Nunito', Arial, sans-serif;
    font-size:11px;
    font-weight:800;
}
button.conta-avatar:not(:disabled):active{ transform:scale(.95); }
.conta-avatar-heroi{ font-size:var(--fs-xl); }

.perfil-card{
    display:flex;
    flex-direction:column;
    max-height:min(88vh, 640px);
    overflow-y:auto;
    text-align:left;
}
.perfil-card h2{ margin:0 0 12px; text-align:center; }
.perfil-avatar-grande{
    align-self:center;
    width:76px;
    height:76px;
    margin-bottom:12px;
}
.perfil-avatar-grande.conta-avatar-heroi{ font-size:var(--fs-3xl); }
.perfil-rotulo{
    display:block;
    margin:14px 0 6px;
    font-size:var(--fs-sm);
    font-weight:800;
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:.5px;
}
.perfil-card .colecao-rapida-pesquisa{ margin:0 0 10px; }
.perfil-grelha{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(46px, 1fr));
    gap:8px;
    max-height:220px;
    overflow-y:auto;
    padding:2px;
    margin-bottom:16px;
}
.perfil-opcao{
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid var(--card-border);
    border-radius:var(--radius-md);
    background:var(--surface-bg-alt);
    font-size:22px;
    line-height:1;
    cursor:pointer;
    transition:transform .15s ease, border-color .15s ease;
}
.perfil-opcao[aria-checked="true"]{
    border-color:var(--gold);
    background:var(--gold-dim);
    transform:scale(1.05);
}
.perfil-opcao-inicial{
    font-family:'Baloo 2', 'Nunito', Arial, sans-serif;
    font-size:var(--fs-md);
    font-weight:800;
    color:var(--text-secondary);
}
/* Ligações e chips pequenos: sem o brilho dos botões grandes */
.calc-previsao-btn,
.ritmo-lembrete-btn,
.alvo-inline,
.colecao-rapida-chip,
.perfil-opcao{ box-shadow:none; }
/* "Guardar" do perfil é uma ação positiva: dourado, não o vermelho de apagar */
#perfilGuardar{
    background:linear-gradient(180deg,#f6d365,#d4a017);
    border-color:transparent;
    color:#2a1d00;
}
#perfilGuardar:disabled{ opacity:.6; }
[tabindex="-1"]:focus{ outline:none; }
/* Selo "Novo" nas Novidades (até serem abertas) */
.novidades-selo{
    margin-left:auto;
    margin-right:6px;
    padding:2px 8px;
    border-radius:999px;
    background:var(--accent-teal);
    color:#fff;
    font-size:var(--fs-2xs);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.novidades-selo.hidden{ display:none; }

/* Guia: pré-visualização desfocada das dicas Premium */
.guia-teaser{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:4px 0 14px;
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);
    mask-image:linear-gradient(180deg,#000 55%,transparent);
}
.guia-teaser-linha{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:var(--radius-md);
    background:var(--surface-bg-alt);
}
.guia-teaser-linha .guide-tip-number{ flex-shrink:0; filter:grayscale(1); opacity:.7; }
.guia-teaser-linha i{
    display:block;
    height:10px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--text-secondary),transparent);
    opacity:.35;
    filter:blur(2px);
}
.guia-teaser-linha span:last-child{ margin-left:auto; font-size:var(--fs-sm); }

/* ---------- "📅 Quando chego lá?" no resultado da calculadora ---------- */
.calc-previsao{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:14px;
    padding:16px;
    border:1.5px solid color-mix(in srgb, var(--accent-teal) 55%, transparent);
    border-radius:var(--radius-lg);
    background:color-mix(in srgb, var(--accent-teal) 9%, transparent);
    text-align:left;
}
.calc-previsao-titulo{
    font-family:'Baloo 2', 'Nunito', Arial, sans-serif;
    font-size:var(--fs-md);
    color:var(--accent-teal);
    line-height:1.2;
}
.calc-previsao p{
    margin:0;
    font-size:var(--fs-base);
    font-weight:700;
    line-height:1.45;
    color:var(--text-primary);
    text-align:left;
    text-align-last:auto;
}
.calc-previsao-btn,
.ritmo-lembrete-btn{
    align-self:stretch;
    min-height:46px;
    padding:10px 16px;
    border:none;
    border-radius:var(--radius-md);
    background:var(--accent-teal);
    color:#fff;
    font-family:inherit;
    font-size:var(--fs-base);
    font-weight:800;
    box-shadow:none;
    cursor:pointer;
    transition:transform .15s ease, filter .2s ease;
}
.calc-previsao-btn:hover,
.ritmo-lembrete-btn:hover{ filter:brightness(1.08); }
.calc-previsao-btn:active,
.ritmo-lembrete-btn:active{ transform:scale(.98); }

/* ---------- Coleção › Plano: convite para ligar os avisos ---------- */
.ritmo-lembrete{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:10px 12px;
    margin-top:16px;
    padding:14px;
    border-radius:var(--radius-md);
    background:var(--surface-bg-alt);
}
.ritmo-lembrete.hidden{ display:none; }
.ritmo-lembrete-icone{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:color-mix(in srgb, var(--accent-teal) 18%, transparent);
    font-size:var(--fs-lg);
}
.ritmo-lembrete p{
    margin:0;
    font-size:var(--fs-sm);
    font-weight:700;
    line-height:1.4;
    text-align:left;
    text-align-last:auto;
}
.ritmo-lembrete-btn{ grid-column:1 / -1; }
.ritmo-lembrete-btn.hidden{ display:none; }
/* Texto sobre os botões turquesa: escuro no tema escuro (turquesa claro),
   branco no tema claro (turquesa escuro) — legível nos dois */
:root{ --on-teal:#05302b; }
[data-theme="light"]{ --on-teal:#ffffff; }
.calc-previsao-btn,
.ritmo-lembrete-btn{ color:var(--on-teal); }

/* ---------- Definições: rodapé discreto (Termos · Privacidade · Apagar conta) ---------- */
.definicoes-rodape{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:4px 8px;
    margin:22px 0 8px;
    font-size:var(--fs-sm);
    color:var(--text-secondary);
    text-align:center;
}
.definicoes-rodape a{
    padding:8px 4px;
    min-height:36px;
    border:none;
    background:none;
    box-shadow:none;
    color:var(--text-secondary);
    font:inherit;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
}
.definicoes-rodape a:hover{ color:var(--text-primary); text-decoration:underline; }
.ritmo-unidade{
    margin:2px 0 0;
    font-size:var(--fs-xs);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--text-secondary);
    text-align:center;
    text-align-last:auto;
}
/* "Apagar conta", discreto, no fim de Editar perfil */
.perfil-apagar{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid var(--card-border);
    text-align:center;
}
.perfil-apagar.hidden{ display:none; }
.perfil-apagar button{
    min-height:40px;
    padding:8px 12px;
    border:none;
    background:none;
    box-shadow:none;
    color:#f87171;
    font:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    cursor:pointer;
}
[data-theme="light"] .perfil-apagar button{ color:#c62828; }

/* ---------- Ritmo: resumo, editar e ajuda por arena ---------- */
.ritmo-resumo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:var(--radius-md);
    background:var(--surface-bg-alt);
}
.ritmo-resumo.hidden,
.ritmo-edicao.hidden,
.ritmo-feito.hidden{ display:none; }
.ritmo-resumo p{
    margin:0;
    font-weight:800;
    text-align:left;
    text-align-last:auto;
    font-variant-numeric:tabular-nums;
}
.ritmo-editar,
.ritmo-ajuda-linha button{
    flex-shrink:0;
    min-height:38px;
    padding:6px 14px;
    border:1.5px solid var(--accent-teal);
    border-radius:999px;
    background:transparent;
    box-shadow:none;
    color:var(--accent-teal);
    font:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    cursor:pointer;
}
.ritmo-feito{
    width:100%;
    min-height:46px;
    margin-top:12px;
    border:none;
    border-radius:var(--radius-md);
    background:var(--accent-teal);
    box-shadow:none;
    color:var(--on-teal);
    font:inherit;
    font-weight:800;
    cursor:pointer;
}
.ritmo-ajuda{
    margin-top:12px;
    padding:10px 14px;
    border:1px solid var(--card-border);
    border-radius:var(--radius-md);
}
.ritmo-ajuda summary{
    cursor:pointer;
    font-weight:800;
    color:var(--accent-teal);
    min-height:32px;
    display:flex;
    align-items:center;
}
.ritmo-ajuda[open] summary{ margin-bottom:8px; }
.ritmo-ajuda label{ margin-top:4px; }
.ritmo-ajuda-nota{
    margin:10px 0 0;
    font-size:var(--fs-xs);
    color:var(--text-secondary);
    text-align:left;
    text-align-last:auto;
}
.ritmo-ajuda-linha{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 0;
    border-bottom:1px solid var(--card-border);
    font-size:var(--fs-sm);
}
.ritmo-ajuda-linha:last-child{ border-bottom:none; }
/* Estatísticas: habilidade que só aparece num nível mais alto */
.habilidade-bloqueada{
    font-size:var(--fs-sm);
    color:var(--text-secondary);
    white-space:nowrap;
}

/* Topo da Calculadora: logótipo da app ao lado do nome */
.marca{
    display:flex;
    align-items:center;
    gap:12px;
}
.marca-logo{
    width:52px;
    height:52px;
    border-radius:14px;
    flex-shrink:0;
    box-shadow:0 4px 14px rgba(0,0,0,.35), 0 0 0 2px rgba(246,211,101,.55);
}
.marca .app-title{ margin:0; text-align:left; }
.marca .subtitle{ margin:2px 0 0; text-align:left; }
.chip-icon{
    width:18px;
    height:18px;
    vertical-align:-4px;
}

/* Moldura dourada no avatar — prémio dos 30 dias seguidos com Premium */
.conta-avatar.avatar-moldura-dourada{
    box-shadow:0 0 0 3px #f6d365, 0 0 0 5px #b8860b, 0 0 14px rgba(246,211,101,.65);
}

/* Premium a abrir a app: a página fica tapada (cor da coroa) até o
   ecrã de boas-vindas entrar — ver js/arranque-cedo.js */
html.premium-a-abrir body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:2999;
    background:#0b0618;
}

/* Títulos dos ecrãs com o ícone desenhado (icons/ui/) antes do texto */
h1.com-icone{
    display:flex;
    align-items:center;
    gap:10px;
}
h1.com-icone .titulo-icone{
    width:34px;
    height:34px;
    flex-shrink:0;
    object-fit:contain;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));
}

/* Estatísticas: escolher herói/nível e ver os números no mesmo cartão */
.hero-card-unico{
    margin-top:0;
}
.hero-card-seletor{
    padding-bottom:18px;
    margin-bottom:18px;
    border-bottom:1px solid var(--card-border);
}
/* O nome já está no seletor logo acima — não se repete */
.hero-card-unico .hero-header{ display:none; }
.hero-card-unico .stats-rarity-tag{ display:inline-block; margin-bottom:12px; }

/* Aviso "o teu Premium acaba" (MB WAY, últimos 3 dias) */
.renovar-aviso{
    display:block;
    width:100%;
    margin:0 0 14px;
    padding:12px 16px;
    border:1px solid var(--gold);
    border-radius:var(--radius-lg);
    background:var(--gold-dim);
    color:var(--gold);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    text-align:left;
    cursor:pointer;
}
.renovar-aviso.hidden{ display:none; }

/* Primeira vez com Premium: os 3 passos */
.tour-card h2{ color:var(--gold); font-size:var(--fs-lg); margin:0 0 14px; }
.tour-passos{
    list-style:none;
    counter-reset:passo;
    margin:0 0 20px;
    padding:0;
    text-align:left;
}
.tour-passos li{
    counter-increment:passo;
    position:relative;
    padding:0 0 14px 40px;
}
.tour-passos li::before{
    content:counter(passo);
    position:absolute;
    left:0;
    top:0;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--gold);
    color:#2a1d00;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
}
.tour-passos strong{ display:block; color:var(--text-primary); margin-bottom:2px; }
.tour-passos span{ color:var(--text-secondary); font-size:var(--fs-sm); line-height:1.45; }
.tour-depois{
    display:block;
    margin:10px auto 0;
    background:none;
    border:none;
    color:var(--text-secondary);
    font-family:inherit;
    font-weight:700;
    cursor:pointer;
    padding:8px 12px;
}

.tour-coroa{ display:block; margin:0 auto 10px; width:72px; height:72px; object-fit:contain; }

/* O selo Premium é um botão: abre a página Premium */
button.conta-selo{ cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:4px; }

/* "Quando posso evoluir?": explicação sempre visível e dica das raridades */
.ritmo-explica{
    color:var(--text-secondary);
    font-size:var(--fs-sm);
    line-height:1.5;
    margin:-4px 0 14px;
    text-align:left;
}
.ritmo-dica{
    margin:12px 0 0;
    font-size:var(--fs-sm);
    color:var(--text-secondary);
    text-align:left;
    line-height:1.5;
}
.ritmo-quando small{ display:block; }

.ritmo-lista li{ flex-wrap:wrap; }
.ritmo-lista .ritmo-detalhe{ flex-basis:100%; color:var(--text-secondary); font-size:var(--fs-xs); margin-top:-4px; }

/* Ícones desenhados de dano / vida / habilidade (icons/ui/) */
.stat-icon{ background:none !important; }
.stat-icon img{ width:36px; height:36px; object-fit:contain; display:block; }
.compare-icone{ width:20px; height:20px; vertical-align:-5px; object-fit:contain; }

.conta-botoes.sem-separador{ border-bottom:none; padding-bottom:4px; }
.tour-passos li{ text-align:left; hyphens:manual; }

/* Guia Premium (mesmo formato do tutorial inicial) */
.tour-icone{
    display:block;
    margin:6px auto 16px;
    width:88px;
    height:88px;
    object-fit:contain;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.tour-slide[data-tour="0"] .tour-icone{ width:96px; height:96px; }
.tour-slide p{ text-align:center; }

/* ---------- Usabilidade: próximo a evoluir, dicas, anular, vazios ---------- */
/* Dicas da primeira vez em cada ecrã */
.dica-ecra{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 16px;
    padding:12px 14px;
    border:1px dashed var(--card-border);
    border-radius:var(--radius-lg);
    background:rgba(255,255,255,.04);
}
.dica-ecra.hidden{ display:none; }
.dica-ecra-icone{ font-size:var(--fs-lg); flex-shrink:0; }
.dica-ecra p{
    flex:1;
    margin:0;
    font-size:var(--fs-sm);
    line-height:1.45;
    color:var(--text-secondary);
    text-align:left;
}
button.dica-ecra-ok{
    flex-shrink:0;
    min-height:40px;
    padding:0 12px;
    border:none;
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.1);
    color:var(--text-primary);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    cursor:pointer;
}
[data-theme="light"] .dica-ecra{ background:rgba(0,0,0,.03); }
[data-theme="light"] button.dica-ecra-ok{ background:rgba(0,0,0,.07); }

/* Aviso com "Anular" */
.toast.com-acao{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    text-align:left;
    pointer-events:none;
}
.toast.com-acao.show{ pointer-events:auto; }
button.toast-acao{
    flex-shrink:0;
    min-height:36px;
    padding:0 14px;
    border:1.5px solid rgba(255,255,255,.85);
    border-radius:var(--radius-md);
    background:transparent;
    color:#fff;
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    cursor:pointer;
}

/* Ecrãs vazios com um passo seguinte */
.vazio-bloco.hidden{ display:none; }
.vazio-bloco .premium-text{ text-align:left; text-align-last:auto; }
button.vazio-acao{
    display:block;
    min-height:44px;
    margin:4px 0 12px;
    padding:0 16px;
    border:1px solid var(--gold);
    border-radius:var(--radius-md);
    background:var(--gold-dim);
    color:var(--gold);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    cursor:pointer;
}

/* − / + no editor da Coleção e "manter carregado" sem menus do telemóvel */
.roadmap-editor .stepper{ margin-bottom:12px; gap:8px; }
.roadmap-editor .stepper input{ margin:0; }
.roadmap-editor .stepper-btn{ width:46px; min-width:46px; height:46px; }
.stepper-btn{
    touch-action:manipulation;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
}

/* Calculadora: quanto do caminho até ao nível alvo já está feito */
.alvo-progresso{ margin-top:12px; }
.alvo-barra{
    display:block;
    height:8px;
    border-radius:var(--radius-pill);
    background:rgba(0,0,0,.25);
    overflow:hidden;
}
.alvo-barra i{
    display:block;
    height:100%;
    border-radius:var(--radius-pill);
    background:linear-gradient(90deg, #22c55e, #4ade80);
}
.alvo-progresso small{
    display:block;
    margin-top:6px;
    font-size:var(--fs-xs);
    color:var(--text-secondary);
}

/* Seletor de heróis: "Recentes" no topo */
.hero-picker-recentes{ color:var(--gold); }

/* Calculadora: "Ver nível a nível" (fechado por omissão) */
.nivel-a-nivel{
    margin:14px 0 0;
    border:1px solid var(--card-border);
    border-radius:var(--radius-lg);
    background:rgba(255,255,255,.03);
    overflow:hidden;
}
.nivel-a-nivel summary{
    min-height:44px;
    display:flex;
    align-items:center;
    padding:0 16px;
    font-size:var(--fs-sm);
    font-weight:800;
    color:var(--text-primary);
    cursor:pointer;
    list-style:none;
}
.nivel-a-nivel summary::-webkit-details-marker{ display:none; }
.nivel-a-nivel summary::after{ content:"›"; margin-left:auto; font-size:var(--fs-lg); transition:transform .2s; }
.nivel-a-nivel[open] summary::after{ transform:rotate(90deg); }
.nivel-a-nivel table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.nivel-a-nivel th,
.nivel-a-nivel td{ padding:8px 12px; text-align:right; border-top:1px solid var(--card-border); }
.nivel-a-nivel th:first-child,
.nivel-a-nivel td:first-child{ text-align:left; }
.nivel-a-nivel th{ font-size:var(--fs-xs); color:var(--text-secondary); font-weight:800; }
.nivel-a-nivel td{ color:var(--text-primary); font-variant-numeric:tabular-nums; }
.nivel-a-nivel tr.chega td{ color:#4ade80; }
.nivel-a-nivel td:last-child{ width:28px; padding-left:0; }

/* "?" ao lado de um rótulo */
.rotulo-com-ajuda{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.rotulo-com-ajuda label{ margin-bottom:0; }
button.ajuda-btn{
    width:26px;
    height:26px;
    flex-shrink:0;
    padding:0;
    border:1px solid var(--card-border);
    border-radius:50%;
    background:rgba(255,255,255,.06);
    color:var(--text-secondary);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    line-height:1;
    cursor:pointer;
    position:relative;
}
/* Área de toque maior do que o círculo */
button.ajuda-btn::before{ content:""; position:absolute; inset:-9px; }
.ajuda-texto{
    margin:8px 0 4px;
    padding:10px 12px;
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.05);
    font-size:var(--fs-sm);
    line-height:1.45;
    color:var(--text-secondary);
    text-align:left;
}
.ajuda-texto.hidden{ display:none; }

/* Pesquisa na Coleção (com mais de 8 heróis) */
input.colecao-pesquisa{ margin:0 0 12px; }
input.colecao-pesquisa.hidden{ display:none; }

/* =========================================================
   PREMIUM PITCH — versão do tema claro
   "Manhã na arena": fundo pérola com luz dourada. A carta e o
   orbe continuam iguais (são objetos do jogo e destacam-se melhor
   sobre o claro); muda só o que está à volta.
   ========================================================= */
[data-theme="light"] .pitch{
    --p-text:#1f1640;
    --p-muted:#5d5280;
    --p-ui-gold:#8a5f00; /* dourado para texto: contraste ≥ 4,5 no claro */
    background:
        radial-gradient(ellipse 90% 45% at 50% 18%, rgba(255,214,102,.45) 0%, transparent 70%),
        radial-gradient(ellipse 120% 60% at 50% 0%, #fff8e6 0%, #f4eeff 55%, #ebe4f8 100%);
}
html[data-theme="light"]:has(#premiumPitchScreen:not(.hidden)){
    background:#ebe4f8;
}
/* A carta é sempre "noite": repõe as cores claras do texto dela */
[data-theme="light"] .pitch-card{
    --p-text:#f6f0ff;
    --p-muted:#b9acdc;
    box-shadow:
        0 22px 44px rgba(60,30,120,.35),
        0 0 36px rgba(123,44,255,.35);
}
[data-theme="light"] .pitch-back{ color:var(--p-ui-gold); }
[data-theme="light"] .pitch-rays{
    background:repeating-conic-gradient(from 0deg, rgba(214,150,20,.22) 0deg 5deg, transparent 5deg 15deg);
}
[data-theme="light"] .pitch-stage::after{
    background:radial-gradient(ellipse at center, rgba(123,44,255,.28), transparent 70%);
}
[data-theme="light"] .pitch-title{
    text-shadow:0 2px 0 rgba(123,44,255,.12);
}

/* Promessas */
[data-theme="light"] .pitch-promise-icon{
    background:radial-gradient(circle at 35% 30%, #ffffff, #ece4fb);
    box-shadow:inset 0 0 0 1.5px rgba(201,138,18,.45), 0 3px 8px rgba(60,30,120,.10);
}

/* Planos */
[data-theme="light"] button.pitch-plan{
    background:linear-gradient(170deg, #ffffff, #f6f1fe);
    box-shadow:inset 0 0 0 2px #ddd3f0, 0 4px 12px rgba(60,30,120,.08);
}
[data-theme="light"] button.pitch-plan-epic{
    background:
        linear-gradient(120deg, rgba(79,240,255,.22), rgba(255,62,200,.16), rgba(255,201,60,.26), rgba(79,240,255,.22)),
        linear-gradient(170deg, #ffffff, #f6f1fe);
    background-size:300% 100%, 100% 100%;
}
[data-theme="light"] button.pitch-plan[aria-checked="true"]{
    box-shadow:inset 0 0 0 3px #c98a12, 0 6px 18px rgba(201,138,18,.20);
}
[data-theme="light"] button.pitch-plan[aria-checked="true"] .pitch-plan-price{
    color:var(--p-ui-gold);
}

/* Formas de pagamento e consentimento */
[data-theme="light"] button.pitch-method{
    background:#ffffff;
    box-shadow:inset 0 0 0 1.5px #ddd3f0, 0 3px 10px rgba(60,30,120,.06);
}
[data-theme="light"] button.pitch-method[aria-checked="true"]{
    background:#fff8e6;
    box-shadow:inset 0 0 0 2.5px #c98a12;
}
[data-theme="light"] .pitch-method-icon{ background:#f2eefa; }
[data-theme="light"] .pitch-method-mbway{ background:#d6001c; }
[data-theme="light"] .pitch-consent{
    background:#ffffff;
    box-shadow:inset 0 0 0 1.5px #ddd3f0;
}
[data-theme="light"] .pitch-consent input[type="checkbox"]{ accent-color:#c98a12; }

/* Já é Premium: estado e "Gerir" */
[data-theme="light"] .pitch-active{
    background:#fff8e6;
    box-shadow:inset 0 0 0 2px rgba(201,138,18,.55);
}
[data-theme="light"] .pitch-active strong{ color:var(--p-ui-gold); }
[data-theme="light"] button.pitch-manage{
    color:var(--p-ui-gold);
    box-shadow:inset 0 0 0 1.5px rgba(138,95,0,.55);
}

/* =========================================================
   TEMA CLARO — cores de texto com contraste suficiente
   Os verdes, cinzentos e roxos claros do tema escuro quase
   desapareciam no fundo pérola: aqui ficam mais escuros.
   ========================================================= */
[data-theme="light"] .roadmap-item.pronto .roadmap-info span,
[data-theme="light"] .password-rules li.cumprida,
[data-theme="light"] .nivel-a-nivel tr.chega td,
[data-theme="light"] .deck-tag.safe,
[data-theme="light"] .verde,
[data-theme="light"] .share-social-btn.copy.copied{
    color:#15803d;
}
[data-theme="light"] .share-social-btn.copy.copied{ border-color:#15803d; }

/* Normal (comum): cinzento legível */
[data-theme="light"] .mini-rarity-tag.raridade-comum,
[data-theme="light"] .hero-picker-group-label.raridade-comum,
[data-theme="light"] .hero-picker-row.raridade-comum,
[data-theme="light"] .compare-rarity-label.raridade-comum,
[data-theme="light"] .compare-rarity-badge.raridade-comum,
[data-theme="light"] .colecao-rapida-grupo.raridade-comum{
    color:#4b5563;
}

/* Épico: roxo mais fundo */
[data-theme="light"] .mini-rarity-tag.raridade-epico,
[data-theme="light"] .hero-picker-group-label.raridade-epico,
[data-theme="light"] .hero-picker-row.raridade-epico,
[data-theme="light"] .compare-rarity-label.raridade-epico,
[data-theme="light"] .deck-tag.experimental{
    color:#7e22ce;
}

/* Barra de baixo e selo da sequência: letra pequena precisa de mais
   contraste no claro (os rótulos ficavam meio transparentes) */
[data-theme="light"] .nav-btn{ opacity:1; }
[data-theme="light"] .nav-btn:not(.active):not(#premiumBtnNav){ color:#4b5563; }
[data-theme="light"] #premiumBtnNav,
[data-theme="light"] .nav-btn.active{ color:#6b4a00; }
[data-theme="light"] .streak-indicator{ color:#6b4a00; }

/* Resumo do mês (Progresso) */
.resumo-mes.hidden{ display:none; }
.card.resumo-mes{ border-color:var(--gold); }
.resumo-mes h2{ margin:0 0 12px; }
.resumo-mes .historico-resumo{ margin-bottom:10px; }
.resumo-mes-melhor{
    margin:0 0 12px;
    font-size:var(--fs-sm);
    font-weight:800;
    color:var(--text-primary);
    text-align:center;
}
.resumo-mes .partilhar-resultado{ margin-top:0; }

/* Cartão do Guia na Home (escondido para quem é Premium) */
.guide-entry-card.hidden{ display:none; }

/* iPhone: com letra abaixo de 16px, o Safari amplia a página ao tocar num
   campo e ela fica ampliada depois (ex.: pesquisa do Editar perfil) */
@supports (-webkit-touch-callout: none){
    input, select, textarea{ font-size:max(16px, 1em) !important; }
}

/* Ajuda e sugestões: o email da conta, simples */
.email-conta-bloco{ margin:0 0 18px; }
.email-conta-bloco.hidden{ display:none; }
.rotulo-campo{
    display:block;
    margin-bottom:6px;
    color:var(--text-secondary);
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:.4px;
}
.email-conta{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:50px;
    padding:0 14px;
    border:2px solid var(--card-border);
    border-radius:var(--radius-md);
    background:var(--surface-bg, rgba(255,255,255,.04));
    color:var(--text-primary);
    font-weight:700;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ---------- Coleção compacta ---------- */
/* "➕ Adicionar heróis": recolhido quando já há heróis */
.colecao-adicionar-det{ margin-bottom:16px; }
.colecao-adicionar-det > summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 16px;
    border:1.5px dashed var(--gold);
    border-radius:var(--radius-lg);
    background:var(--gold-dim);
    color:var(--gold);
    font-weight:800;
    cursor:pointer;
}
.colecao-adicionar-det > summary::-webkit-details-marker{ display:none; }
.colecao-adicionar-det[open] > summary{ display:none; }
.colecao-adicionar-det .colecao-adicionar{ margin-bottom:0; }

/* Filtros: Todos · Prontos · Normal · Raro · Épico */
.roadmap-filtros{
    display:flex;
    gap:8px;
    margin:0 -20px 12px;
    padding:2px 20px;
    overflow-x:auto;
    scrollbar-width:none;
}
.roadmap-filtros::-webkit-scrollbar{ display:none; }
.roadmap-filtros.hidden{ display:none; }
button.roadmap-filtro{
    flex-shrink:0;
    min-height:38px;
    padding:0 14px;
    border:1.5px solid var(--card-border);
    border-radius:var(--radius-pill);
    background:transparent;
    color:var(--text-secondary);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    white-space:nowrap;
    cursor:pointer;
}
button.roadmap-filtro b{ margin-left:4px; opacity:.7; }
button.roadmap-filtro.active{
    border-color:var(--gold);
    background:var(--gold-dim);
    color:var(--gold);
}

/* Linhas um pouco mais baixas: cabem mais heróis no ecrã */
.roadmap-linha{ padding:11px 14px; gap:12px; }
.roadmap-item{ margin-bottom:8px; }

button.roadmap-mais{
    display:block;
    width:100%;
    min-height:46px;
    margin:4px 0 16px;
    border:1.5px solid var(--card-border);
    border-radius:var(--radius-lg);
    background:transparent;
    color:var(--text-primary);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    cursor:pointer;
}
button.roadmap-mais.hidden{ display:none; }

.email-conta span:last-child{ overflow:hidden; text-overflow:ellipsis; }

/* ---------- "Quando posso evoluir?": construtor do ritmo ---------- */
.ritmo-nota{
    margin:-8px 0 14px;
    font-size:var(--fs-sm);
    line-height:1.45;
    color:var(--text-secondary);
    text-align:left;
}
.ritmo-raridade{
    margin:0 0 12px;
    padding:12px 14px;
    border:1.5px solid var(--card-border);
    border-radius:var(--radius-lg);
    background:rgba(255,255,255,.03);
    transition:box-shadow .3s ease;
}
.ritmo-raridade.realce{ box-shadow:0 0 0 2px var(--gold); }
.ritmo-raridade .ritmo-nota{ margin:4px 0 10px; }
.ritmo-raridade-topo{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}
.ritmo-raridade-topo strong{ font-size:var(--fs-md); }
.ritmo-raridade.raridade-comum .ritmo-raridade-topo strong{ color:var(--text-primary); }
.ritmo-raridade.raridade-raro .ritmo-raridade-topo strong{ color:var(--gold); }
.ritmo-raridade.raridade-epico .ritmo-raridade-topo strong{ color:#b66dff; }
[data-theme="light"] .ritmo-raridade.raridade-epico .ritmo-raridade-topo strong{ color:#7e22ce; }
.ritmo-total{
    font-size:var(--fs-sm);
    font-weight:800;
    color:var(--text-primary);
    white-space:nowrap;
}
.ritmo-linha{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}
.ritmo-linha:last-child{ margin-bottom:0; }
.ritmo-linha-rotulo{
    flex:1;
    margin:0;
    font-size:var(--fs-sm);
    font-weight:700;
    color:var(--text-secondary);
    text-transform:none;
    letter-spacing:0;
}
.ritmo-linha-rotulo small{ display:block; font-weight:600; font-size:var(--fs-xs); opacity:.85; }
.ritmo-passos{ display:flex; align-items:center; gap:6px; }
.ritmo-passos .stepper-btn{ width:36px; min-width:36px; height:36px; font-size:var(--fs-lg); }
.ritmo-passos output{ min-width:26px; text-align:center; font-weight:800; color:var(--text-primary); }
.ritmo-vezes{ min-width:34px; font-weight:800; color:var(--text-secondary); }
.ritmo-linha input{
    width:110px;
    flex:0 0 110px;
    height:42px;
    margin:0;
    padding:0 10px;
    text-align:center;
}
button.ritmo-feito{ width:100%; }

/* =========================================================
   CONQUISTAS — anel de progresso e grelha de medalhas
   ========================================================= */
.conquistas-topo{
    display:flex;
    align-items:center;
    gap:16px;
    margin:0 0 18px;
    padding:16px;
    border:1px solid var(--card-border);
    border-radius:var(--radius-lg);
    background:linear-gradient(145deg, var(--card-bg-start), var(--card-bg-end));
}
.conquistas-anel{
    --p:0%;
    position:relative;
    flex-shrink:0;
    width:76px;
    height:76px;
    display:flex;
    align-items:baseline;
    justify-content:center;
    padding-top:22px;
    border-radius:50%;
    background:
        radial-gradient(closest-side, var(--card-bg-start) 78%, transparent 80% 100%),
        conic-gradient(var(--gold) var(--p), rgba(127,127,127,.18) 0);
}
.conquistas-anel b{ font-size:var(--fs-xl); line-height:1; color:var(--text-primary); }
.conquistas-anel small{ font-size:var(--fs-sm); font-weight:800; color:var(--text-secondary); }
.conquistas-topo-texto{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.conquistas-topo-texto strong{ font-size:var(--fs-md); color:var(--text-primary); }
.conquistas-topo-texto span{ font-size:var(--fs-sm); color:var(--text-secondary); font-weight:700; }

.conquistas-secao{
    margin:18px 0 10px;
    font-size:var(--fs-sm);
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--text-secondary);
    text-align:left;
}
.conquistas-grelha{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
}
@media (min-width:420px){ .conquistas-grelha{ grid-template-columns:repeat(4, 1fr); } }

button.medalha{
    --tier:#8a97a8;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    min-height:116px;
    padding:14px 6px 12px;
    border:1.5px solid var(--card-border);
    border-radius:var(--radius-lg);
    background:linear-gradient(145deg, var(--card-bg-start), var(--card-bg-end));
    color:var(--text-primary);
    font-family:inherit;
    cursor:pointer;
    transition:transform .15s ease;
}
button.medalha:active{ transform:scale(.96); }
button.medalha.bronze{ --tier:#cd7f32; }
button.medalha.prata{ --tier:#a3b1c2; }
button.medalha.ouro{ --tier:#f6d365; }
button.medalha.diamante{ --tier:#7ee8fa; }
.medalha-icone{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:26px;
    background:rgba(127,127,127,.12);
}
.medalha-nome{
    font-size:var(--fs-xs);
    font-weight:800;
    line-height:1.25;
    text-align:center;
    color:var(--text-secondary);
}
/* Feita: aro e brilho da cor do escalão */
button.medalha.feita{ border-color:var(--tier); }
button.medalha.feita .medalha-icone{
    background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.25), transparent 60%), color-mix(in srgb, var(--tier) 28%, transparent);
    box-shadow:0 0 0 2px var(--tier), 0 0 14px color-mix(in srgb, var(--tier) 45%, transparent);
}
button.medalha.feita .medalha-nome{ color:var(--text-primary); }
/* Por fazer: apagada, com barrinha de progresso */
button.medalha:not(.feita) .medalha-icone{ filter:grayscale(1); opacity:.45; }
.medalha-barra{
    width:70%;
    height:4px;
    border-radius:var(--radius-pill);
    background:rgba(127,127,127,.2);
    overflow:hidden;
}
.medalha-barra i{ display:block; height:100%; background:var(--gold); border-radius:inherit; }

/* Detalhe */
.conquista-folha{
    position:fixed;
    inset:0;
    z-index:2500;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}
.conquista-folha.hidden{ display:none; }
.conquista-folha-fundo{ position:absolute; inset:0; background:rgba(5,3,15,.55); }
.conquista-folha-cartao{
    --tier:#8a97a8;
    position:relative;
    width:100%;
    max-width:440px;
    margin:0 12px calc(12px + env(safe-area-inset-bottom, 0px));
    padding:28px 22px 22px;
    border-radius:var(--radius-xl);
    background:linear-gradient(160deg, var(--card-bg-start), var(--card-bg-end));
    border:1.5px solid var(--card-border);
    text-align:center;
    animation:folha-sobe .25s ease-out;
}
.conquista-folha-cartao.bronze{ --tier:#cd7f32; }
.conquista-folha-cartao.prata{ --tier:#a3b1c2; }
.conquista-folha-cartao.ouro{ --tier:#f6d365; }
.conquista-folha-cartao.diamante{ --tier:#7ee8fa; }
.conquista-folha-cartao.feita{ border-color:var(--tier); }
@keyframes folha-sobe{ from{ transform:translateY(30px); opacity:0; } to{ transform:none; opacity:1; } }
.conquista-folha-icone{
    width:84px;
    height:84px;
    margin:0 auto 12px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:44px;
    background:rgba(127,127,127,.12);
}
.conquista-folha-cartao.feita .conquista-folha-icone{
    background:color-mix(in srgb, var(--tier) 28%, transparent);
    box-shadow:0 0 0 3px var(--tier), 0 0 22px color-mix(in srgb, var(--tier) 50%, transparent);
}
.conquista-folha-cartao:not(.feita) .conquista-folha-icone{ filter:grayscale(1); opacity:.5; }
.conquista-folha-cartao h2{ margin:0 0 6px; font-size:var(--fs-xl); }
.conquista-folha-cartao p{ margin:0 0 10px; text-align:center; color:var(--text-secondary); }
.conquista-folha-estado{ font-weight:800; color:var(--text-primary) !important; }
button.conquista-folha-fechar{
    position:absolute;
    top:10px;
    right:10px;
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:rgba(127,127,127,.14);
    color:var(--text-primary);
    font-size:var(--fs-md);
    cursor:pointer;
}
button.conquista-partilhar.conquista-partilhar-grande{
    width:100%;
    min-height:48px;
    margin-top:6px;
    border:1.5px solid var(--gold);
    border-radius:var(--radius-md);
    background:var(--gold-dim);
    color:var(--gold);
    font-family:inherit;
    font-size:var(--fs-base);
    font-weight:800;
    cursor:pointer;
}
[data-theme="light"] button.medalha.ouro{ --tier:#c99a12; }
[data-theme="light"] .conquista-folha-cartao.ouro{ --tier:#c99a12; }

/* Conquistas: 4 por linha e cartões de cima mais leves */
.conquistas-grelha{ grid-template-columns:repeat(4, 1fr); gap:8px; }
button.medalha{ min-height:98px; padding:12px 4px 10px; gap:6px; }
.medalha-icone{ width:44px; height:44px; font-size:22px; }
#progressScreen .premio-card{ padding:14px 16px; }
#progressScreen .premio-card p{ font-size:var(--fs-sm); margin:6px 0 10px; }
#progressScreen .lembrete-card{ padding:12px 14px; }
#progressScreen .lembrete-card p{ font-size:var(--fs-sm); margin:0; }

/* =========================================================
   MINIMALISTA — montras do Premium, resultado, definições
   ========================================================= */
.premium-card.vitrine{
    border:1.5px solid var(--gold);
    padding:22px 20px 18px;
    box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.vitrine-selo{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:12px;
    padding:4px 12px;
    border-radius:var(--radius-pill);
    background:var(--gold-dim);
    color:var(--gold);
    font-size:var(--fs-xs);
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.vitrine-titulo{
    margin:0 0 8px;
    font-size:var(--fs-xl);
    line-height:1.2;
    color:var(--text-primary);
}
.vitrine-texto{
    margin:0 0 16px;
    font-size:var(--fs-sm);
    line-height:1.5;
    color:var(--text-secondary);
    text-align:center;
}
.vitrine .premium-btn{ width:100%; }
.vitrine-preco{
    display:block;
    margin-top:10px;
    font-size:var(--fs-xs);
    font-weight:700;
    color:var(--text-secondary);
}
.vitrine .guia-teaser{ margin-bottom:14px; }
.colecao-montra.hidden{ display:none; }
.colecao-montra .premium-preview{ padding-top:10px; }

/* Resultado: o essencial à vista, o resto em "Ver detalhes" */
.resultado-detalhes{
    margin:12px 0 0;
    border:1px solid var(--card-border);
    border-radius:var(--radius-lg);
    overflow:hidden;
}
.resultado-detalhes > summary{
    list-style:none;
    display:flex;
    align-items:center;
    min-height:46px;
    padding:0 16px;
    font-size:var(--fs-sm);
    font-weight:800;
    color:var(--text-primary);
    cursor:pointer;
}
.resultado-detalhes > summary::-webkit-details-marker{ display:none; }
.resultado-detalhes > summary::after{ content:"›"; margin-left:auto; font-size:var(--fs-lg); transition:transform .2s; }
.resultado-detalhes[open] > summary::after{ transform:rotate(90deg); }
.resultado-detalhes .resultado-item-largo{ margin:0 12px 12px; }
.resultado-detalhes .nivel-a-nivel{ margin:0; border:none; border-top:1px solid var(--card-border); border-radius:0; background:transparent; }
.nivel-a-nivel-titulo{
    margin:0;
    padding:12px 16px 4px;
    font-size:var(--fs-xs);
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--text-secondary);
    text-align:left;
}
.vitrine .premium-btn{ font-size:var(--fs-md); line-height:1.25; padding-top:12px; padding-bottom:12px; height:auto; min-height:52px; }
.colecao-montra{ min-height:600px; }
.colecao-montra > .premium-card{ top:150px; }
.colecao-montra .premium-preview{ opacity:.55; filter:saturate(.7) blur(1px); }
.historico-grafico-card.hidden{ display:none; }
/* Comparar: os nomes dos heróis cabiam cortados ("Bers…") nas duas colunas */
#compareScreen .hero-picker-toggle{ padding-left:10px; padding-right:8px; }
#compareScreen .hero-picker-name{ font-size:var(--fs-sm); }

/* ---------- Ronda 2: calculadora, ritmo, revisão ---------- */
.calc-ritmo{
    display:block;
    margin:8px 0 6px;
    font-size:var(--fs-sm);
    font-weight:700;
    color:var(--text-secondary);
    text-transform:none;
    letter-spacing:0;
}
.calc-ritmo-campo{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.calc-ritmo-campo input{ flex:0 0 130px; width:130px; height:46px; margin:0; text-align:center; }
.calc-ritmo-campo span{ font-size:var(--fs-sm); color:var(--text-secondary); font-weight:700; }
#calcPrevisaoTexto{ margin:0; font-weight:700; color:var(--text-primary); }

.ritmo-simples{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
label.ritmo-campo-linha{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0;
    text-transform:none;
    letter-spacing:0;
}
.ritmo-campo-linha span{ flex:1; font-size:var(--fs-base); font-weight:800; color:var(--text-primary); }
.ritmo-campo-linha.raridade-raro span{ color:var(--gold); }
.ritmo-campo-linha.raridade-epico span{ color:#b66dff; }
[data-theme="light"] .ritmo-campo-linha.raridade-epico span{ color:#7e22ce; }
.ritmo-campo-linha input{ flex:0 0 110px; width:110px; height:46px; margin:0; text-align:center; }
.ritmo-campo-linha small{ width:70px; font-size:var(--fs-xs); font-weight:700; color:var(--text-secondary); }
.ritmo-nota{ margin:4px 0 12px; }

/* Introduções sem caixa: só texto */
.card.intro-simples{
    padding:0 4px;
    margin-bottom:14px;
    background:none;
    border:none;
    box-shadow:none;
}
.card.intro-simples p{ text-align:left; color:var(--text-secondary); font-size:var(--fs-sm); }

/* Ordenar: um interruptor pequeno, em vez de dois botões grandes */
.roadmap-sort-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.roadmap-sort-row .settings-block-label{ margin:0; }
.roadmap-sort-options{ display:flex; gap:4px; padding:3px; border-radius:var(--radius-pill); background:rgba(127,127,127,.12); }
.roadmap-sort-option{ padding:6px 14px; min-height:34px; border:none; border-radius:var(--radius-pill); background:transparent; font-size:var(--fs-xs); }
.roadmap-sort-option.active{ background:var(--gold-dim); color:var(--gold); box-shadow:inset 0 0 0 1.5px var(--gold); }

/* Cópia de segurança nas Definições: só para quem é Premium */
.so-premium{ display:none !important; }
body.is-premium .so-premium{ display:flex !important; }

/* ---------- Ronda 3 ---------- */
/* A linha dourada dos cartões não fica colada às introduções sem caixa */
.card.intro-simples::before{ display:none; }

/* Simulador do "Quando posso evoluir?" */
#ritmoSimulador{ margin-top:4px; }
.sim-linha{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
label.sim-rotulo{
    flex:0 0 38%;
    margin:0;
    font-size:var(--fs-sm);
    font-weight:800;
    color:var(--text-secondary);
}
.sim-linha select{ flex:1; margin:0; height:48px; }
.sim-resultado{
    margin:6px 0 16px;
    padding:12px 14px;
    border-radius:var(--radius-md);
    background:var(--gold-dim);
    color:var(--text-primary);
    font-weight:700;
    line-height:1.5;
    text-align:left;
}
select.calc-arena{ margin:0 0 10px; height:46px; }

/* Cópia de segurança: links discretos por baixo de "Partilhar" */
.colecao-copia{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:-4px 0 18px;
    color:var(--text-secondary);
    font-size:var(--fs-xs);
}
.colecao-copia button{
    min-height:36px;
    padding:0 6px;
    border:none;
    background: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;
}
/* Simulador: rótulo por cima e menu com a largura toda (lado a lado cortava o texto) */
.sim-linha{ flex-direction:column; align-items:stretch; gap:6px; margin-bottom:12px; }
label.sim-rotulo{ flex:none; }
.sim-linha select{ width:100%; height:auto; }

/* Calculadora: o menu da arena não corta o texto */
select.calc-arena{ height:auto; min-height:52px; padding-top:12px; padding-bottom:12px; }

/* Tutorial: passo das notificações */
.onboarding-avisos .avisos-sino{
    width:64px;
    height:64px;
    margin:0 auto 14px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:var(--surface-bg);
    font-size:30px;
}
.onboarding-avisos h2{ margin-bottom:8px; }
.onboarding-avisos > p{ font-size:var(--fs-sm); margin-bottom:14px; }
.avisos-exemplos{ display:flex; flex-direction:column; gap:8px; margin:0 0 16px; text-align:left; }
.aviso-exemplo{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:10px 12px;
    border:1px solid var(--card-border);
    border-radius:var(--radius-md);
    background:var(--surface-bg);
}
.aviso-exemplo img{ border-radius:9px; flex-shrink:0; }
.aviso-exemplo span{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.aviso-exemplo small{ font-size:var(--fs-2xs); letter-spacing:0; color:var(--text-secondary); font-weight:700; }
.aviso-exemplo strong{ font-size:var(--fs-sm); color:var(--text-primary); }
.aviso-exemplo em{ font-style:normal; font-size:var(--fs-xs); line-height:1.35; color:var(--text-secondary); }
button.avisos-ativar{
    width:100%;
    min-height:52px;
    border:none;
    border-radius:var(--radius-pill);
    background:linear-gradient(180deg, #f6d365, #d4a514);
    color:#1c1406;
    font-family:inherit;
    font-size:var(--fs-md);
    font-weight:800;
    cursor:pointer;
}
button.avisos-depois{
    display:block;
    margin:6px auto 0;
    min-height:40px;
    border:none;
    background:none;
    color:var(--text-secondary);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:700;
    cursor:pointer;
}
.onboarding-card button.avisos-depois{ background:transparent; box-shadow:none; }
/* Olho da palavra-passe: cinzento, com o "buraco" da cor do campo */
.campo-password button.ver-password{
    --fundo-olho:var(--input-bg, #fff);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-secondary);
    opacity:.85;
}
.campo-password button.ver-password svg{ display:block; }

/* =========================================================
   TUTORIAL DO PREMIUM — guiado sobre os ecrãs verdadeiros
   ========================================================= */
.tour-guiado{
    position:fixed;
    inset:0;
    z-index:2900;
}
.tour-guiado.hidden{ display:none; }
/* Sem botão a destacar (1.º passo): o ecrã todo escurece */
.tour-guiado.sem-foco{ background:rgba(8,5,20,.55); }
/* O "buraco" iluminado à volta do botão da barra */
.tour-foco{
    position:fixed;
    border-radius:var(--radius-pill);
    box-shadow:0 0 0 2px var(--gold), 0 0 0 9999px rgba(8,5,20,.55);
    transition:left .35s ease, top .35s ease, width .35s ease, height .35s ease;
    pointer-events:none;
}
.tour-foco.hidden{ display:none; }
/* O círculo que se abre à volta, a repetir */
.tour-foco::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    border:2px solid var(--gold);
    animation:tour-anel 1.6s ease-out infinite;
}
@keyframes tour-anel{
    0%{ transform:scale(1); opacity:.9; }
    100%{ transform:scale(1.45); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .tour-foco::after{ animation:none; } }

/* O cartão, por cima da barra de baixo */
.tour-folha{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(92px + env(safe-area-inset-bottom, 0px));
    max-width:460px;
    margin:0 auto;
    padding:20px 20px 16px;
    border-radius:var(--radius-xl);
    background:linear-gradient(160deg, var(--card-bg-start), var(--card-bg-end));
    border:1px solid var(--card-border);
    box-shadow:0 18px 44px rgba(0,0,0,.35);
    text-align:left;
}
.tour-folha.entra{ animation:folha-sobe .3s ease-out; }
.tour-folha-topo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.tour-folha-icone{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:var(--surface-bg);
}
.tour-folha-icone img{ object-fit:contain; }
.tour-pontos{ display:flex; gap:6px; }
.tour-pontos i{ width:8px; height:8px; border-radius:var(--radius-pill); background:rgba(127,127,127,.35); transition:width .25s ease; }
.tour-pontos i.active{ width:24px; background:var(--gold); }
.tour-folha h2{ margin:0 0 6px; font-size:var(--fs-xl); color:var(--text-primary); text-align:left; }
.tour-folha p{ margin:0 0 16px; font-size:var(--fs-sm); line-height:1.5; color:var(--text-secondary); text-align:left; }
.tour-folha-botoes{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
button.tour-saltar{
    min-height:44px;
    padding:0 4px;
    border:none;
    background:none;
    color:var(--text-secondary);
    font-family:inherit;
    font-size:var(--fs-base);
    font-weight:700;
    cursor:pointer;
}
button.tour-entendi{
    min-height:48px;
    padding:0 22px;
    border:none;
    border-radius:var(--radius-pill);
    background:linear-gradient(180deg, #f6d365, #d4a514);
    color:#1c1406;
    font-family:inherit;
    font-size:var(--fs-base);
    font-weight:800;
    cursor:pointer;
}
.tour-folha button.tour-saltar{ background:transparent; box-shadow:none; width:auto; }
.tour-folha button.tour-entendi{ width:auto; flex:0 0 auto; }

/* Tutorial do Premium à semelhança da referência: letra mais pequena,
   "Saltar" discreto e botão escuro em pílula (claro no tema escuro) */
.tour-folha{ padding:18px 20px 14px; border-radius:24px; }
.tour-folha h2{ font-size:var(--fs-md); font-weight:800; margin:0 0 4px; }
.tour-folha p{ font-size:var(--fs-sm); line-height:1.45; margin:0 0 14px; }
.tour-folha-icone{ width:42px; height:42px; border-radius:12px; background:rgba(127,127,127,.12); }
.tour-folha-icone img{ width:24px; height:24px; }
.tour-pontos i{ width:7px; height:7px; }
.tour-pontos i.active{ width:22px; background:var(--text-primary); }
.tour-folha button.tour-saltar{
    min-height:40px;
    padding:0;
    font-size:var(--fs-sm);
    font-weight:500;
    color:var(--text-secondary);
}
.tour-folha button.tour-entendi{
    min-height:44px;
    padding:0 20px;
    background:#121212;
    color:#ffffff;
    font-size:var(--fs-sm);
    font-weight:700;
}
:root:not([data-theme="light"]) .tour-folha button.tour-entendi{ background:#f4f2f8; color:#121212; }

/* Durante o tutorial, os ecrãs entram sem animação (a meio da animação
   passavam por cima do cartão) */
body.tour-ativo .screen, body.tour-ativo #homeScreen{ animation:none !important; }

/* Sem o contorno fixo: fica só o círculo que se abre à volta */
.tour-foco{ box-shadow:0 0 0 9999px rgba(8,5,20,.55); }


/* Anel do tutorial: elemento próprio, por cima do escurecido.
   (Dentro do .tour-foco, com a sombra de 9999px, o Safari do iPhone
   não desenhava a animação.) */
.tour-foco::after{ display:none; }
.tour-anel{
    position:fixed;
    border-radius:var(--radius-pill);
    border:2px solid var(--gold);
    pointer-events:none;
    transform:translateZ(0);
    will-change:transform, opacity;
    -webkit-animation:tour-anel 1.6s ease-out infinite;
    animation:tour-anel 1.6s ease-out infinite;
}
.tour-anel.hidden{ display:none; }
@-webkit-keyframes tour-anel{
    0%{ -webkit-transform:scale(1); opacity:.9; }
    100%{ -webkit-transform:scale(1.45); opacity:0; }
}
/* Com "Reduzir movimento" ligado: em vez de sumir, pulsa suave (acende e
   apaga, cresce pouco), que continua a mostrar onde tocar */
@media (prefers-reduced-motion: reduce){
    .tour-anel{
        -webkit-animation:tour-anel-suave 1.8s ease-in-out infinite;
        animation:tour-anel-suave 1.8s ease-in-out infinite;
    }
}
@keyframes tour-anel-suave{
    0%, 100%{ transform:scale(1); opacity:.25; }
    50%{ transform:scale(1.12); opacity:.95; }
}
@-webkit-keyframes tour-anel-suave{
    0%, 100%{ -webkit-transform:scale(1); opacity:.25; }
    50%{ -webkit-transform:scale(1.12); opacity:.95; }
}

/* Tutorial: o anel abre pouco (bonito e discreto) e o separador ativo
   perde a borda dourada enquanto o tutorial está aberto */
@keyframes tour-anel{
    0%{ transform:scale(1); opacity:.9; }
    100%{ transform:scale(1.18); opacity:0; }
}
@-webkit-keyframes tour-anel{
    0%{ -webkit-transform:scale(1); opacity:.9; }
    100%{ -webkit-transform:scale(1.18); opacity:0; }
}
@keyframes tour-anel-suave{
    0%, 100%{ transform:scale(1); opacity:.25; }
    50%{ transform:scale(1.05); opacity:.95; }
}
@-webkit-keyframes tour-anel-suave{
    0%, 100%{ -webkit-transform:scale(1); opacity:.25; }
    50%{ -webkit-transform:scale(1.05); opacity:.95; }
}
.tour-anel{ border-radius:18px; }
body.tour-ativo .mode-tab.active{ border-color:transparent; box-shadow:none; }

/* Anel do tutorial (versão final): nasce justo ao ícone e abre-se até à
   largura do botão, some e recomeça. Bem visível: linha grossa e brilho.
   Corre também com "Reduzir movimento" (é um indicador pequeno e lento). */
.tour-anel{
    left:var(--x0); top:var(--y0); width:var(--w0); height:var(--h0);
    border:3px solid var(--gold);
    border-radius:18px;
    box-shadow:0 0 14px rgba(246,211,101,.75), inset 0 0 10px rgba(246,211,101,.35);
    transform:none;
    will-change:left, top, width, height, opacity;
    -webkit-animation:tour-anel-abre 1.5s ease-out infinite;
    animation:tour-anel-abre 1.5s ease-out infinite;
}
@keyframes tour-anel-abre{
    0%{ left:var(--x0); top:var(--y0); width:var(--w0); height:var(--h0); opacity:1; }
    75%{ opacity:.9; }
    100%{ left:var(--x1); top:var(--y1); width:var(--w1); height:var(--h1); opacity:0; }
}
@-webkit-keyframes tour-anel-abre{
    0%{ left:var(--x0); top:var(--y0); width:var(--w0); height:var(--h0); opacity:1; }
    75%{ opacity:.9; }
    100%{ left:var(--x1); top:var(--y1); width:var(--w1); height:var(--h1); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
    .tour-anel{
        -webkit-animation:tour-anel-abre 1.8s ease-out infinite;
        animation:tour-anel-abre 1.8s ease-out infinite;
    }
}
.tour-foco{ border-radius:18px; }
[data-theme="light"] .tour-anel{ border-color:#d4a514; box-shadow:0 0 14px rgba(212,165,20,.7), inset 0 0 10px rgba(212,165,20,.3); }

/* =========================================================
   POLIMENTO VISUAL (out 2026): mesmo estilo, mais acabado
   ========================================================= */
/* Números com largura fixa: os valores não "dançam" quando mudam
   (contadores, resultados, cartas, ouro) */
body{ font-variant-numeric:tabular-nums; }

/* Títulos equilibrados (sem uma palavra sozinha na última linha) e um
   pouco mais compactos; parágrafos sem palavras órfãs */
h1, h2, h3{ text-wrap:balance; }
h1, h2{ letter-spacing:-.2px; line-height:1.15; }
p, li{ text-wrap:pretty; }

/* O primeiro título de um cartão não soma margem ao espaço do cartão
   (o "Calcular evolução" tinha um vazio grande por cima) */
.card > h2:first-child,
.card > h3:first-child{ margin-top:0; }

/* Rótulos dos campos: mais pequenos e espaçados, para não competirem
   com o título nem com os valores */
label:not(.lembrar-dados):not(.pitch-consent):not(.ritmo-linha-rotulo):not(.calc-ritmo):not(.ritmo-campo-linha):not(.sim-rotulo){
    font-size:var(--fs-sm);
    font-weight:800;
    letter-spacing:.8px;
    margin-bottom:8px;
}

/* Sombras com a cor do fundo (roxo muito escuro), não preto puro */
:root:not([data-theme="light"]){ --shadow-color:rgba(10,4,32,.55); }

/* Resposta ao toque em botões que ainda não tinham */
.rarity-seg-btn,
.mode-tab,
button.settings-link,
button.onboarding-lang,
button.roadmap-filtro{
    transition:transform .12s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.rarity-seg-btn:active,
.mode-tab:active,
button.onboarding-lang:active,
button.roadmap-filtro:active{ transform:scale(.96); }
button.settings-link:active{ transform:scale(.985); }

/* Textos curtos em cartões estreitos: alinhados à esquerda (justificado
   abria buracos entre as palavras em 2 linhas) */
.guide-entry-text p{ text-align:left; }

/* =========================================================
   POLIMENTO DO TEMA CLARO (out 2026)
   Uma só família de cores: tudo puxado ao roxo do fundo (antes
   misturava cinzento-azulado, verde-azeitona e roxo) e o dourado como
   único destaque.
   ========================================================= */
[data-theme="light"]{
    --text-primary:#1f1a33;   /* tinta roxa muito escura (antes azul-cinza) */
    --text-secondary:#5d5672; /* contraste ≥ 6:1 no fundo dos cartões */
    --heading-accent:#7a5400; /* títulos no mesmo dourado do cabeçalho (antes verde-azeitona) */
}

/* − / +: claros, com a cor da app, em vez de um bloco cinzento-azulado */
[data-theme="light"] .stepper-btn{
    background:#efe9fb;
    color:#3a2870;
    box-shadow:inset 0 0 0 1.5px #d9cdf2;
}
[data-theme="light"] .stepper-btn:hover{ background:#e5dcf8; }

/* Campos e cartão "Normal": cinzento com um toque de roxo (contraste
   do contorno ≥ 3:1, como pede a acessibilidade) */
[data-theme="light"] .tema-comum input,
[data-theme="light"] .tema-comum select{ border-color:#8e84aa; box-shadow:none; }
[data-theme="light"] .tema-comum .card,
[data-theme="light"] .tema-comum .resultado-item,
[data-theme="light"] .tema-comum .resultado-destaque{ border-color:#b4abcc; }

/* O brilho colorido à volta de todos os botões fica bem no escuro, mas
   no claro sujava o fundo: sombra curta e suave da mesma cor */
[data-theme="light"] .tema-comum button{ box-shadow:0 2px 6px rgba(60,30,120,.08); }
[data-theme="light"] .tema-raro button{ box-shadow:0 2px 10px rgba(200,150,12,.22); }
[data-theme="light"] .tema-epico button{ box-shadow:0 2px 10px rgba(140,70,220,.20); }

/* =========================================================
   ACABAMENTOS DE TOPO (out 2026)
   ========================================================= */
/* Avisos no topo: cápsula de vidro escuro com um ponto e uma borda da
   cor do tipo (antes: blocos verde/azul/vermelho muito saturados) */
.toast{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:0;
    width:max-content;
    max-width:min(420px, calc(100vw - 32px));
    padding:12px 18px;
    border-radius:var(--radius-pill);
    background:rgba(24,18,44,.92);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    backdrop-filter:blur(14px) saturate(140%);
    border:1px solid rgba(246,211,101,.45);
    box-shadow:0 14px 34px rgba(8,4,24,.5), inset 0 1px 0 rgba(255,255,255,.08);
    color:#fff;
    font-size:var(--fs-sm);
    font-weight:800;
    line-height:1.35;
    text-align:left;
    transform:translateX(-50%) translateY(-20px) scale(.96);
    transition:opacity .25s ease, transform .4s cubic-bezier(.2,1.3,.4,1);
}
.toast.show{ transform:translateX(-50%) translateY(0) scale(1); }
.toast::before{
    content:"";
    flex:none;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--toast-cor, var(--gold));
    box-shadow:0 0 10px var(--toast-cor, var(--gold));
}
.toast.info,
.toast.sucesso,
.toast.erro{ background:rgba(24,18,44,.92); }
.toast.sucesso{ --toast-cor:#4ade80; border-color:rgba(74,222,128,.45); }
.toast.info{ --toast-cor:#f6d365; }
.toast.erro{ --toast-cor:#f87171; border-color:rgba(248,113,113,.55); }
[data-theme="light"] .toast,
[data-theme="light"] .toast.info,
[data-theme="light"] .toast.sucesso,
[data-theme="light"] .toast.erro{
    background:rgba(255,255,255,.94);
    color:var(--text-primary);
    box-shadow:0 12px 30px rgba(60,30,120,.16);
}
[data-theme="light"] .toast.info{ --toast-cor:#c8960c; border-color:rgba(200,150,12,.45); }
[data-theme="light"] .toast.sucesso{ --toast-cor:#16a34a; }
[data-theme="light"] .toast.erro{ --toast-cor:#dc2626; }

/* Cartão dourado do resultado: relevo de moeda (luz em cima, aresta
   escura em baixo) e um brilho suave no canto */
.resultado-destaque{
    background:
        radial-gradient(120% 80% at 15% 0%, rgba(255,250,215,.55), transparent 55%),
        linear-gradient(180deg,#f9d871,#d9a61c);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        inset 0 -3px 0 rgba(120,70,0,.25),
        0 12px 30px rgba(212,160,23,.28);
}

/* Tema escuro, raridade Normal: contorno cinzento mais suave (antes
   competia com o conteúdo) */
:root:not([data-theme="light"]) .tema-comum .card,
:root:not([data-theme="light"]) .tema-comum .resultado-item{
    border-color:rgba(176,170,210,.5);
}

/* − / + no escuro: roxo da app em vez de cinzento-azulado */
:root:not([data-theme="light"]) .stepper-btn{
    background:#3b3163;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 3px 0 rgba(10,4,32,.45);
}
:root:not([data-theme="light"]) .stepper-btn:hover{ background:#4a3e7a; }

/* Entrada em cascata: ao abrir um ecrã, os blocos aparecem um a seguir
   ao outro (em vez de tudo de uma vez). Curto: no máximo ~0,3 s. */
#homeScreen > :not(.conquista-folha),
.screen > :not(.conquista-folha){
    animation:entrada-cascata .38s cubic-bezier(.2,.8,.2,1) backwards;
}
#homeScreen > :nth-child(2), .screen > :nth-child(2){ animation-delay:.04s; }
#homeScreen > :nth-child(3), .screen > :nth-child(3){ animation-delay:.08s; }
#homeScreen > :nth-child(4), .screen > :nth-child(4){ animation-delay:.12s; }
#homeScreen > :nth-child(5), .screen > :nth-child(5){ animation-delay:.16s; }
#homeScreen > :nth-child(n+6), .screen > :nth-child(n+6){ animation-delay:.2s; }
@keyframes entrada-cascata{
    from{ opacity:0; transform:translateY(12px); }
}
body.tour-ativo #homeScreen > *,
body.tour-ativo .screen > *{ animation:none !important; }

/* Barras de progresso do resultado enchem-se ao aparecer */
.barra-preenchida,
.alvo-barra i{
    animation:barra-enche 1s cubic-bezier(.2,.8,.2,1) backwards .15s;
}
@keyframes barra-enche{
    from{ width:0; }
}

/* Número do − / + dá um pequeno salto quando muda */
input.salto{ animation:numero-salto .22s ease-out; }
@keyframes numero-salto{
    40%{ transform:scale(1.06); }
}
@media (prefers-reduced-motion: reduce){
    #homeScreen > *, .screen > *, .barra-preenchida, .alvo-barra i{ animation-delay:0s !important; }
}

/* Confetes (festejar() em js/base.js) */
.festa{
    position:fixed;
    top:44px;
    left:50%;
    width:0;
    height:0;
    z-index:100000;
    pointer-events:none;
}
.festa i{
    position:absolute;
    width:8px;
    height:12px;
    border-radius:2px;
    opacity:0;
    animation:confete 1.4s cubic-bezier(.15,.6,.35,1) forwards;
}
@keyframes confete{
    0%{ opacity:1; transform:translate(0,0) rotate(0); }
    15%{ opacity:1; }
    100%{ opacity:0; transform:translate(var(--dx), var(--dy)) rotate(var(--r)); }
}

/* O rótulo do campo que estás a preencher fica dourado */
label.em-foco{ color:var(--gold); }
label{ transition:color .2s ease; }

/* Raridade escolhida dá um pequeno "pop" */
.rarity-seg-btn.active{ animation:seg-pop .28s cubic-bezier(.2,1.4,.4,1); }
@keyframes seg-pop{
    0%{ transform:scale(.94); }
    100%{ transform:scale(1); }
}

/* "Partilhar resultado": logo por baixo do cartão dourado, com ícone
   (gera uma imagem pronta para WhatsApp/Instagram, js/partilha.js) */
button.partilhar-resultado{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0 0 20px;
    background:rgba(246,211,101,.08);
    transition:transform .12s ease, background-color .2s ease;
}
button.partilhar-resultado:active{ transform:scale(.98); background:rgba(246,211,101,.16); }
button.partilhar-resultado::before{
    content:"";
    width:18px;
    height:18px;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='M7 8l5-5 5 5'/><path d='M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='M7 8l5-5 5 5'/><path d='M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/></svg>") center/contain no-repeat;
}

/* Guia (sem Premium): convite compacto por baixo das 2 dicas abertas,
   sem a lista falsa nem o preço (menos "montra", mais respeito) */
#guideLocked .guia-teaser,
#guideLocked .vitrine-preco,
#guideLocked .vitrine-selo{ display:none; }
#guideLocked{ padding:20px 20px 18px; }
#guideLocked .vitrine-titulo{ font-size:var(--fs-lg); margin:0 0 6px; }
#guideLocked .vitrine-texto{ margin-bottom:14px; }

/* =========================================================
   COLEÇÃO PARA TODOS (sem Premium: 3 heróis) + ECRÃ INICIAL PESSOAL
   ========================================================= */
/* Saudação com o nome no lugar de "Calculadora de evolução" */
.saudacao-home{ color:var(--text-primary); opacity:.85; font-weight:700; }

/* Os teus heróis: uma faixa baixa, não um cartão grande */
.meus-herois{ margin:4px 0 16px; }
.meus-herois-topo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 2px 8px;
    font-size:var(--fs-xs);
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
    color:var(--text-secondary);
}
.meus-herois-topo button{
    border:none;
    background:none;
    padding:6px 2px;
    color:var(--gold);
    font:inherit;
    letter-spacing:.4px;
    cursor:pointer;
}
.meus-herois-topo button::after{ content:" ›"; }
.meus-herois-lista{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
}
button.meu-heroi{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
    min-width:0;
    padding:10px 12px;
    border:1px solid var(--card-border);
    border-radius:var(--radius-md);
    background:linear-gradient(145deg, var(--card-bg-start), var(--card-bg-end));
    color:var(--text-primary);
    text-align:left;
    font-family:inherit;
    cursor:pointer;
    transition:transform .12s ease;
}
button.meu-heroi:active{ transform:scale(.97); }
.meu-heroi-nome{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:var(--fs-sm);
    font-weight:800;
}
.meu-heroi-estado{ font-size:var(--fs-2xs); font-weight:700; color:var(--text-secondary); line-height:1.3; }
button.meu-heroi.pronto{ border-color:rgba(74,222,128,.55); box-shadow:inset 0 0 0 1px rgba(74,222,128,.15); }
button.meu-heroi.pronto .meu-heroi-estado{ color:#4ade80; }
[data-theme="light"] button.meu-heroi.pronto .meu-heroi-estado{ color:#15803d; }
button.meus-herois-vazio{
    display:block;
    width:100%;
    padding:12px 14px;
    border:1px dashed var(--card-border);
    border-radius:var(--radius-md);
    background:transparent;
    color:var(--text-secondary);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:700;
    text-align:left;
    cursor:pointer;
}
button.meus-herois-vazio::after{ content:" ›"; color:var(--gold); }

/* Coleção sem Premium: contador + arena, compacto */
.colecao-livre{
    margin:0 0 16px;
    padding:14px 16px 12px;
    border:1px solid var(--card-border);
    border-radius:var(--radius-lg);
    background:var(--surface-bg-alt);
}
.colecao-livre-topo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
    font-size:var(--fs-sm);
    font-weight:800;
}
button.colecao-livre-premium{
    flex:none;
    border:none;
    background:none;
    padding:4px 0;
    color:var(--gold);
    font-family:inherit;
    font-size:var(--fs-sm);
    font-weight:800;
    cursor:pointer;
}
button.colecao-livre-premium::after{ content:" ›"; }
.colecao-livre select{ margin-bottom:6px; font-size:16px; }
.colecao-livre-dica{ display:block; color:var(--text-secondary); font-size:var(--fs-xs); line-height:1.4; }

/* Sem Premium: sem "adicionar muitos de uma vez" nem importar */
body.colecao-gratis #btnColecaoRapida,
body.colecao-gratis .colecao-ou,
body.colecao-gratis [data-abrir-rapida],
body.colecao-gratis .colecao-copia,
body.colecao-gratis .colecao-vazia-premium{ display:none; }
body:not(.colecao-gratis) .colecao-vazia-gratis{ display:none; }

/* Plano e Progresso com um cadeado pequeno (abrem o Premium) */
body.colecao-gratis [data-colecao-tab="plano"]::after,
body.colecao-gratis [data-colecao-tab="progresso"]::after{
    content:"";
    display:inline-block;
    width:11px;
    height:11px;
    margin-left:5px;
    vertical-align:-1px;
    background:currentColor;
    opacity:.7;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z'/></svg>") center/contain no-repeat;
}

/* Coleção sem conta */
.colecao-sem-conta{ text-align:center; }
.colecao-sem-conta p{ text-align:center; color:var(--text-secondary); margin-bottom:16px; }
.meus-herois-topo button,
button.colecao-livre-premium,
button.meus-herois-vazio{ box-shadow:none !important; }

.deck-tag.trending{
    background:rgba(56,189,248,.15);
    color:#38bdf8;
}
[data-theme="light"] .deck-tag.trending{ color:#0369a1; }