/* 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:#0d9488;
    --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;
}

.onboarding-icon{
    font-size:var(--fs-display);
    margin-bottom:18px;
}

.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:var(--fs-2xl);
    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){
    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 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,#ef4444,#b91c1c);
    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{
    font-size:var(--fs-2xl);
}
.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);
    opacity:.65;
    transition:opacity .2s ease, transform .2s ease, color .2s ease;
}
.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-2xl);
    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-xl);
    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;
    text-transform:uppercase;
    letter-spacing:1px;
}
.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 JUSTIFICADO — sem linhas "em cobra"
   Todos os parágrafos ficam com as duas margens alinhadas. A
   hifenização automática (na língua ativa — o <html lang> muda com o
   idioma) evita buracos grandes entre palavras em ecrãs estreitos.
   ========================================================= */
p,
li{
    text-align:justify;
    -webkit-hyphens:auto;
    hyphens:auto;
}
/* Onde o texto é centrado de propósito: linhas justificadas, mas a
   última continua ao centro (o bloco mantém o aspeto centrado) */
.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:justify;
    text-align-last: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{ 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; }
.premium-lock-icone{ padding:3px 7px; font-size:var(--fs-xs); }
/* 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,
.definicoes-rodape button{
    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; }
.definicoes-rodape-apagar{ display:inline-flex; align-items:center; gap:8px; }
.definicoes-rodape-apagar.hidden{ display:none; }
.definicoes-rodape button{ color:#f87171; }
[data-theme="light"] .definicoes-rodape button{ color:#c62828; }
.definicoes-rodape-marca{
    flex-basis:100%;
    margin:4px 0 0;
    font-size:var(--fs-xs);
    opacity:.75;
    text-align:center;
    text-align-last:auto;
}