/* ══════════════════════════════════════════════════════════════
   TEMAS EQUIPÁVEIS — camada sobre o style.css
   Cada tema é uma classe body.theme-<id> (equipada pela loja):
     · firered  — retrô GBA (novo, premium)
     · rocket   — Equipe Rocket (Meowth/Koffing + R)
     · forest   — Floresta (Bulbasaur + folhas)
     · ocean    — Oceano (Squirtle + bolhas)
   Além de cores, cada tema traz MASCOTES no canto e muda o
   CARD DO TREINADOR. Isolado de propósito (fácil ajustar/reverter).
════════════════════════════════════════════════════════════════ */

/* Fonte pixel só para destaques, disponível a todos os temas. */
:root{ --font-pixel-ui:"Press Start 2P", ui-monospace, monospace; }

/* ── Mascote no canto (comum a todos os temas) ──────────────
   Reaproveita a camada decorativa .poke-bg (já é fixed, z:-1). */
.poke-bg::after,.poke-bg::before{
  content:""; position:fixed; pointer-events:none; z-index:-1;
  background-repeat:no-repeat; background-size:contain;
  image-rendering:pixelated; opacity:0; transition:opacity .4s;
}
/* Ficam ACIMA dos widgets de canto (chat à direita, selo de emote/reações à
   esquerda) para não aparecerem "por baixo" desses ícones. */
.poke-bg::after{ right:6px;  bottom:96px; width:176px; height:176px; background-position:bottom right; }
.poke-bg::before{ left:8px; bottom:70px; width:116px; height:116px; background-position:bottom left; }
body[class*="theme-"] .poke-bg::after,
body[class*="theme-"] .poke-bg::before{ opacity:.9; }
@media (max-width:640px){
  .poke-bg::after{ width:112px; height:112px; bottom:84px; opacity:.6 !important; }
  .poke-bg::before{ display:none; }
}

/* Mascote "espiando" no card do treinador (comum). */
body[class*="theme-"] .trainer-card::before{
  content:""; position:absolute; z-index:0; right:8px; bottom:-6px;
  width:104px; height:104px; background-repeat:no-repeat; background-size:contain;
  background-position:bottom right; image-rendering:pixelated; opacity:.92; pointer-events:none;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.25));
}

/* ══════════════════════════════════════════════════════════════
   1) FIRE RED — retrô GBA (novo tema premium)
════════════════════════════════════════════════════════════════ */
body.theme-firered{
  /* MODO ESCURO retrô Fire Red — superfícies escuras quentes, texto claro. */
  --bg:#14101c; --bg-2:#1d1726; --panel:#241b30; --panel-2:#2e2440;
  --border:#4a3a5c; --text:#f2e8d6; --muted:#b0a0b2;
  --brand:#ff5a3c; --brand-2:#ff8a4c; --brand-ink:#7a1204;
  --accent:#ffcb3a; --accent-2:#ffe07a; --royal:#2f4a97; --lens:#7fd7ff;
  --frbox:#5a7fd0; --frbox-dk:#2f4a97; --frbox-hi:#a8c0f0;
  --ui:#2a2038; --ui-lt:#362a48; --ui-line:#5a4a6e; --ui-dk:#0e0a16; --ui-ink:#f2e8d6;
  --radius:8px; --radius-sm:6px;
  --hard:0 4px 0 var(--ui-dk); --hard-sm:0 3px 0 var(--ui-dk);
  --shadow:0 4px 0 var(--ui-dk), 0 12px 24px rgba(0,0,0,.5);
  --shadow-sm:0 3px 0 var(--ui-dk); --ring:0 0 0 3px rgba(255,90,60,.35);
  --topic:#4f8cff; --call:#21c07a; --deadline:#ff8a3d;
  /* Fundo escuro com brilho de fogo em cima e um toque azul-noturno embaixo. */
  background:
    radial-gradient(1200px 620px at 85% -15%, rgba(255,110,60,.20) 0, transparent 60%),
    radial-gradient(1000px 640px at -12% 112%, rgba(47,74,151,.22) 0, transparent 60%),
    radial-gradient(900px 520px at 50% 50%, rgba(224,57,43,.06) 0, transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #1a1424 0%, #100c18 100%) !important;
  background-color:var(--bg) !important;
}
body.theme-firered img{ image-rendering:pixelated; image-rendering:crisp-edges; }

/* Pixel só nos destaques */
body.theme-firered :is(h1,h2,h3,h4,.eyebrow,.nav-btn,.btn,.topbar-title,
  .user-chip,.streak-chip,.xp-stars,.tc-day,.pill,.day-card .day-meta,.ai-top small){
  font-family:var(--font-pixel-ui) !important; letter-spacing:.01em;
}
body.theme-firered h1{font-size:1.05rem !important; line-height:1.4;}
body.theme-firered :is(h2,.section-head h2,.xp-info h2){font-size:.92rem !important; line-height:1.45;}
body.theme-firered :is(h3,.day-card h3){font-size:.78rem !important; line-height:1.55;}
body.theme-firered h4{font-size:.7rem !important;}
body.theme-firered .eyebrow{font-size:.58rem !important; color:var(--brand) !important; letter-spacing:.05em;}
body.theme-firered .btn{font-size:.6rem !important; border-radius:6px !important; border-width:2px !important;}
body.theme-firered .nav-btn{font-size:.58rem !important;}
body.theme-firered :is(.user-chip,.streak-chip){font-size:.55rem !important;}
body.theme-firered .pill{font-size:.52rem !important;}

/* Topbar vermelha bevelada */
body.theme-firered .topbar{
  background:linear-gradient(180deg,#e8463a,#c62a1e) !important;
  border-bottom:4px solid var(--brand-ink) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 4px 0 var(--brand-ink);
}
body.theme-firered .topbar-title{color:#fff !important; text-shadow:2px 2px 0 var(--brand-ink);}
body.theme-firered .nav-btn{color:#ffe9d8 !important; border-radius:6px !important; border:2px solid transparent !important;}
body.theme-firered .nav-btn:hover{background:rgba(255,255,255,.16) !important; color:#fff !important;}
body.theme-firered .nav-btn.active{
  color:#3a2a10 !important; background:var(--accent-2) !important; border:2px solid #fff !important;
  box-shadow:inset 1px 1px 0 #fff2c0, inset -1px -1px 0 #b8860b, 0 2px 0 rgba(0,0,0,.25);
}
body.theme-firered .user-chip{
  color:var(--text) !important; background:var(--ui-lt) !important;
  border:2px solid var(--ui-line) !important; border-radius:6px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 var(--ui-dk);
}

/* Botões bevelados */
body.theme-firered .btn-primary{
  background:linear-gradient(180deg,#f4894c,#e0392b) !important; color:#fff !important;
  border-color:var(--brand-ink) !important;
  box-shadow:inset 1px 1px 0 #ffb07a, inset -1px -1px 0 var(--brand-ink), 0 3px 0 var(--brand-ink) !important;
  text-shadow:1px 1px 0 var(--brand-ink);
}
body.theme-firered .btn-primary:active{transform:translateY(2px); box-shadow:inset 1px 1px 0 #ffb07a, 0 1px 0 var(--brand-ink) !important;}
body.theme-firered .btn-ghost{
  background:var(--ui-lt) !important; color:var(--text) !important; border-color:var(--ui-line) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 2px 0 var(--ui-dk) !important;
}
body.theme-firered .btn-ghost:hover{background:#413354 !important; color:#fff !important; border-color:var(--brand) !important;}

/* Cards blocky bevelados */
body.theme-firered :is(.card,.principle,.men-daily,.roadmap-card,.missions-card,
  .community-list > *,.announcements-list > *,.exercise-card,.activity-card,.poll-card,
  .ann-card,.archive-item,.admin-panel-card,.admin-qa-btn,.admin-tool){
  background:var(--panel) !important; border:2px solid var(--border) !important; color:var(--text) !important;
  border-radius:var(--radius) !important; box-shadow:var(--hard), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.theme-firered :is(.archive-item,.admin-qa-btn,.admin-tool){box-shadow:var(--hard-sm) !important;}
body.theme-firered :is(.archive-item:hover,.exercise-card:hover,.admin-qa-btn:hover,.admin-tool:hover){border-color:var(--brand) !important; transform:translateY(-1px);}
body.theme-firered :is(.ai-title,.archive-item){color:var(--text) !important;}

/* Herói "Conteúdo de hoje": moldura de diálogo AZUL FRLG */
body.theme-firered .men-today{
  background:var(--panel) !important; border:none !important; border-radius:12px !important;
  padding:1rem 1.1rem 1.1rem !important; margin-top:1.1rem !important;
  box-shadow:0 0 0 3px var(--frbox-dk), 0 0 0 6px var(--frbox), 0 0 0 8px var(--frbox-hi), 0 12px 26px rgba(0,0,0,.55) !important;
}
body.theme-firered :is(.men-today .day-card,.men-today #today-card){background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important;}
body.theme-firered .day-card .activity{background:var(--panel-2) !important; border-left:4px solid var(--brand) !important; border-radius:var(--radius-sm) !important;}
body.theme-firered :is(.activity .eyebrow,.principle strong){color:var(--brand) !important;}

/* Chips/inputs/xp bevelados */
body.theme-firered :is(.pill,.streak-chip,.xp-stars,.tc-day,.chip){
  background:var(--ui-lt) !important; color:var(--text) !important;
  border:2px solid var(--ui-line) !important; border-radius:6px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
body.theme-firered .xp-bar{background:#0e0a16 !important; border:2px solid var(--ui-line) !important; border-radius:4px !important; padding:2px;}
body.theme-firered .xp-fill{background:linear-gradient(180deg,#7be06a,#3aa83a) !important; border-radius:2px !important;}
body.theme-firered :is(input,textarea,select){background:#1a1424 !important; color:var(--text) !important; border:2px solid var(--ui-line) !important; border-radius:6px !important;}
body.theme-firered :is(input,textarea)::placeholder{ color:#8a7e94 !important; }

/* Admin escuro/legível */
body.theme-firered .admin-nav{background:var(--panel) !important; border:2px solid var(--border) !important; border-radius:var(--radius) !important; box-shadow:var(--hard) !important;}
body.theme-firered .admin-subtab.active{background:linear-gradient(180deg,#f4894c,#e0392b) !important; box-shadow:inset 1px 1px 0 #ffb07a, 0 2px 0 var(--brand-ink) !important;}
body.theme-firered .admin-table th{color:var(--brand) !important;}

/* Jogos (tela cheia): re-escopa tokens p/ ESCURO coerente */
body.theme-firered #game-view{
  --panel:#16203a; --panel-2:#1e2b49; --border:#2b3a63; --text:#eaf0fb; --muted:#94a3c6;
  --bg:#0a0f1e; --bg-2:#111a30; --accent:#ffcb05; --accent-2:#ffe27a;
  background:radial-gradient(1000px 520px at 80% -10%, #2a1c14 0, transparent 60%), linear-gradient(180deg,#12101c,#0c0a14) !important;
  color:var(--text) !important;
}
body.theme-firered #game-view :is(.card,.exercise-card){background:var(--panel) !important; border:2px solid var(--border) !important; box-shadow:none !important; color:var(--text) !important;}
body.theme-firered #game-view :is(input,textarea,select){background:#0f1830 !important; color:var(--text) !important; border-color:var(--border) !important;}

/* Toast "item obtido" + login cartucho */
body.theme-firered .toast{background:var(--panel) !important; color:var(--text) !important; border-radius:8px !important; box-shadow:0 0 0 3px var(--frbox-dk), 0 0 0 6px var(--frbox) !important; font-weight:700;}
body.theme-firered .login-card.dex-shell{box-shadow:0 0 0 4px var(--brand-ink), 0 0 0 8px var(--brand), 0 20px 50px rgba(90,20,10,.4) !important;}

/* Card do treinador retrô + Charmander FRLG */
body.theme-firered .trainer-card{--tc-a:#e0392b; --tc-b:#f4894c; --tc-c:#ffcb3a; --tc-ink:#5a1008; border-radius:10px !important;}
body.theme-firered .trainer-card::before{
  background-image:url("https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/pokemon/versions/generation-iii/firered-leafgreen/4.png");
  width:96px; height:96px;
}
body.theme-firered .poke-bg::after{
  background-image:url("https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/pokemon/versions/generation-iii/firered-leafgreen/6.png");
}
body.theme-firered .poke-bg::before{
  background-image:url("https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/pokemon/versions/generation-iii/firered-leafgreen/25.png");
}

/* Mobile: molduras finas */
@media (max-width:560px){
  body.theme-firered .layout{padding-left:.7rem !important; padding-right:.7rem !important;}
  body.theme-firered .men-today{margin-left:0 !important; margin-right:0 !important; padding:.85rem .8rem 1rem !important;
    box-shadow:0 0 0 2px var(--frbox-dk), 0 0 0 4px var(--frbox), 0 0 0 6px var(--frbox-hi) !important;}
  body.theme-firered :is(.card,.archive-item,.exercise-card,.roadmap-card,.missions-card,
    .community-list > *,.announcements-list > *,.admin-panel-card){border-width:2px !important; box-shadow:var(--hard-sm) !important;}
  body.theme-firered h1{font-size:.95rem !important;} body.theme-firered :is(h2,.section-head h2){font-size:.82rem !important;}
}

/* ── VARIANTE CLARA do Fire Red (alternável nas Preferências) ──
   Reaproveita todas as regras do tema; só reverte os tokens/cores
   para o creme quente "rota do Kanto". */
body.theme-firered.fr-light{
  --bg:#dcc199; --bg-2:#cfb082; --panel:#fbf3df; --panel-2:#f0e4c8;
  --border:#be9c62; --text:#2b2540; --muted:#6f6478;
  --brand:#e0392b; --brand-2:#f4894c; --accent:#d07e00;
  --ui:#e6d5b2; --ui-lt:#fbf3df; --ui-line:#c9a86a; --ui-dk:#ad8f56; --ui-ink:#33251a;
  --shadow:0 4px 0 var(--ui-dk), 0 10px 22px rgba(120,80,20,.2);
  --ring:0 0 0 3px rgba(224,57,43,.30);
  background:
    radial-gradient(1200px 620px at 85% -15%, rgba(244,137,76,.55) 0, transparent 58%),
    radial-gradient(1000px 640px at -12% 112%, rgba(99,188,90,.42) 0, transparent 58%),
    radial-gradient(900px 500px at 50% 50%, rgba(224,57,43,.10) 0, transparent 70%),
    repeating-linear-gradient(0deg, rgba(110,74,28,.06) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(110,74,28,.06) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #e3caa2 0%, #cdad7c 100%) !important;
  background-color:var(--bg) !important;
}
/* Ajustes claros: campos, hover do ghost e barra de XP voltam ao claro. */
body.theme-firered.fr-light :is(input,textarea,select){ background:var(--ui-lt) !important; }
body.theme-firered.fr-light :is(input,textarea)::placeholder{ color:#a08a6a !important; }
body.theme-firered.fr-light .btn-ghost:hover{ background:#fff !important; }
body.theme-firered.fr-light .xp-bar{ background:#3a3350 !important; }

/* ══════════════════════════════════════════════════════════════
   2) EQUIPE ROCKET — vermelho/preto + Meowth/Koffing e o "R"
════════════════════════════════════════════════════════════════ */
body.theme-rocket{
  --bg:#140609; --bg-2:#22090e; --panel:#2a0d13; --panel-2:#3a141c; --border:#5a2230;
  --brand:#ff2b2b; --brand-2:#ff6a5a; --accent:#ff4d4d; --accent-2:#ff8a8a; --royal:#6a1020;
}
/* Faixa preta/vermelha na topbar + "R" gigante marca d'água */
body.theme-rocket .topbar{
  background:repeating-linear-gradient(135deg,#1a0206 0 22px,#2a0409 22px 44px) !important;
  border-bottom:3px solid #ff2b2b !important;
}
body.theme-rocket .nav-btn.active{background:linear-gradient(180deg,#ff4d4d,#c40010) !important;}
body.theme-rocket .layout::before{
  content:"R"; position:fixed; right:2vw; top:16vh; z-index:-1; pointer-events:none;
  font:900 34vh/1 var(--font-pixel-ui); color:#ff2b2b; opacity:.06;
}
/* Mascotes: Meowth (dir.) + Koffing (esq.) */
body.theme-rocket .poke-bg::after{ background-image:url("https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/pokemon/52.png"); }
body.theme-rocket .poke-bg::before{ background-image:url("https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/pokemon/109.png"); }
/* Card do treinador estilo Rocket + Meowth espiando */
body.theme-rocket .trainer-card{ --tc-a:#c40010; --tc-b:#1a0206; --tc-c:#ff2b2b; --tc-ink:#3a0006; }
body.theme-rocket .trainer-card::before{ background-image:url("https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/pokemon/52.png"); }
body.theme-rocket .eyebrow{ color:#ff5a5a !important; }

/* ══════════════════════════════════════════════════════════════
   3) FLORESTA — verdes + Bulbasaur e folhas
════════════════════════════════════════════════════════════════ */
body.theme-forest{
  --bg:#071408; --bg-2:#0c2110; --panel:#102b16; --panel-2:#163a1f; --border:#275a33;
  --brand:#3bbf5a; --brand-2:#6ad98a; --accent:#7ee08a; --accent-2:#b6f0bf; --royal:#17632f;
}
body.theme-forest{
  background:
    radial-gradient(1000px 520px at 82% -10%, rgba(110,217,138,.14) 0, transparent 60%),
    radial-gradient(800px 500px at -8% 10%, rgba(59,191,90,.12) 0, transparent 55%),
    var(--bg) !important;
}
body.theme-forest .nav-btn.active{background:linear-gradient(180deg,#6ad98a,#2a9d4e) !important; color:#06210f !important;}
/* Mascotes: Bulbasaur (dir.) + Oddish (esq.) */
body.theme-forest .poke-bg::after{ background-image:url("https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/pokemon/1.png"); }
body.theme-forest .poke-bg::before{ background-image:url("https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/pokemon/43.png"); }
/* Card do treinador verdejante + Bulbasaur espiando */
body.theme-forest .trainer-card{ --tc-a:#2a9d4e; --tc-b:#17632f; --tc-c:#8be0a0; --tc-ink:#06210f; }
body.theme-forest .trainer-card::before{ background-image:url("https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/pokemon/1.png"); }

/* ══════════════════════════════════════════════════════════════
   4) OCEANO — azuis + Squirtle e bolhas
════════════════════════════════════════════════════════════════ */
body.theme-ocean{
  --bg:#04121f; --bg-2:#06213a; --panel:#082b4d; --panel-2:#0d3a63; --border:#145a8c;
  --brand:#1f8fff; --brand-2:#4db6ff; --accent:#37c6ff; --accent-2:#8ee2ff; --royal:#0a4f8c;
}
body.theme-ocean{
  background:
    radial-gradient(1000px 520px at 82% -10%, rgba(77,182,255,.16) 0, transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(31,143,255,.16) 0, transparent 55%),
    var(--bg) !important;
}
body.theme-ocean .nav-btn.active{background:linear-gradient(180deg,#4db6ff,#0a6ec4) !important;}
/* Mascotes: Squirtle (dir.) + Lapras (esq.) */
body.theme-ocean .poke-bg::after{ background-image:url("https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/pokemon/7.png"); }
body.theme-ocean .poke-bg::before{ background-image:url("https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/pokemon/131.png"); }
/* Card do treinador oceânico + Squirtle espiando */
body.theme-ocean .trainer-card{ --tc-a:#0a6ec4; --tc-b:#0a4f8c; --tc-c:#8ee2ff; --tc-ink:#042038; }
body.theme-ocean .trainer-card::before{ background-image:url("https://cdn.jsdelivr.net/gh/PokeAPI/sprites@master/sprites/pokemon/7.png"); }

/* ── Topbar tingida por tema (rocket já é listrada acima) ──── */
body.theme-forest .topbar{ background:linear-gradient(180deg,#1e4a2c,#0c2110) !important; border-bottom:3px solid #3bbf5a !important; }
body.theme-ocean  .topbar{ background:linear-gradient(180deg,#0a4f8c,#06213a) !important; border-bottom:3px solid #37c6ff !important; }
body:is(.theme-forest,.theme-ocean,.theme-rocket) .topbar-title{ color:#fff !important; text-shadow:1px 1px 0 rgba(0,0,0,.5); }
body:is(.theme-forest,.theme-ocean,.theme-rocket) .nav-btn{ color:#f0f6ff !important; }

/* ── Captura temática: cor da pokébola + raios seguem o tema ── */
body[class*="theme-"] .capture-rays{
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 60%, transparent) 0 6deg, transparent 6deg 18deg) !important;
}
body.theme-firered .capture-ball .cb-top{ background:linear-gradient(#f4894c,#e0392b) !important; }
body.theme-rocket  .capture-ball .cb-top{ background:linear-gradient(#4a1526,#1a0206) !important; }
body.theme-forest  .capture-ball .cb-top{ background:linear-gradient(#6ad98a,#2a9d4e) !important; }
body.theme-ocean   .capture-ball .cb-top{ background:linear-gradient(#4db6ff,#0a6ec4) !important; }

/* ══════════════════════════════════════════════════════════════
   LOGIN REDESIGN — TERMINAL ICÔNICO DAS TRÊS GERAÇÕES
   Mantido no fim da folha para vencer os estilos legados do dex-shell e
   continuar correto mesmo quando o treinador troca de tema.
════════════════════════════════════════════════════════════════ */
.login-view-neo {
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  position: relative; isolation: isolate; overflow: hidden; padding: clamp(1rem, 3vw, 3rem);
  background:
    radial-gradient(900px 520px at 10% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 68%),
    radial-gradient(800px 520px at 100% 100%, color-mix(in srgb, var(--royal) 18%, transparent), transparent 70%),
    linear-gradient(145deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--text);
}
.login-view-neo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .2; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 42px 42px; mask-image: linear-gradient(135deg, #000, transparent 78%);
}
.login-view-neo::after {
  content: ""; position: absolute; width: min(65vw, 720px); height: min(65vw, 720px); right: -18%; bottom: -36%; z-index: -1;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 50%;
  box-shadow: 0 0 0 34px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 0 68px color-mix(in srgb, var(--accent) 4%, transparent);
}
.login-shell { width: min(1120px, 100%); display: grid; gap: .9rem; }
.login-masthead { display: flex; align-items: center; gap: .8rem; padding: 0 .25rem; }
.login-logo-mark { width: 54px; height: 54px; display: grid; place-items: center; position: relative; flex: 0 0 auto; border-radius: 16px; color: #fff; background: linear-gradient(145deg, var(--brand-2), var(--brand)); border: 2px solid color-mix(in srgb, var(--accent) 58%, #fff); box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.35); }
.login-logo-letter { font-family: var(--font-display); font-size: 1rem; font-weight: 900; letter-spacing: -.08em; transform: translateX(-1px); }
.login-logo-lens { position: absolute; right: 5px; top: 5px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--lens); box-shadow: 0 0 8px var(--lens); }
.login-masthead-copy { display: grid; min-width: 0; gap: .1rem; }
.login-masthead-copy strong { font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.5rem); letter-spacing: .04em; }
.login-masthead-copy > span:last-child { color: var(--muted); font-size: .78rem; }
.login-kicker { color: var(--accent); font-family: var(--font-mono); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.login-build-chip { margin-left: auto; padding: .45rem .7rem; border: 1px solid color-mix(in srgb, var(--call) 52%, var(--border)); border-radius: 999px; color: var(--call); font: 800 .62rem var(--font-mono); letter-spacing: .04em; white-space: nowrap; background: color-mix(in srgb, var(--call) 8%, transparent); }
.login-live-dot { display: inline-block; width: 7px; height: 7px; margin-right: .3rem; border-radius: 50%; background: var(--call); box-shadow: 0 0 9px var(--call); animation: login-live-pulse 1.8s ease-in-out infinite; }
@keyframes login-live-pulse { 50% { opacity: .35; transform: scale(.7); } }

.login-generations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.login-generation-card { min-width: 0; position: relative; overflow: hidden; padding: .7rem .8rem .45rem; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--panel) 88%, transparent); box-shadow: var(--shadow-sm); }
.login-generation-card::after { content: ""; position: absolute; right: -18px; bottom: -34px; width: 92px; height: 92px; border: 1px solid color-mix(in srgb, var(--gen-color, var(--brand)) 42%, transparent); border-radius: 50%; box-shadow: 0 0 0 12px color-mix(in srgb, var(--gen-color, var(--brand)) 7%, transparent); pointer-events: none; }
.gen-kanto { --gen-color: #ef5350; }.gen-johto { --gen-color: #7e9bff; }.gen-hoenn { --gen-color: #48c989; }
.login-generation-meta { display: flex; align-items: center; gap: .5rem; position: relative; z-index: 1; }
.login-gen-index { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 27px; border-radius: 8px; color: #fff; background: var(--gen-color); font: 800 .65rem var(--font-mono); }
.login-generation-meta div { display: grid; gap: .05rem; min-width: 0; }
.login-generation-meta strong { color: var(--text); font: 800 .75rem var(--font-display); letter-spacing: .08em; }
.login-generation-meta span { overflow: hidden; color: var(--muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.login-generation-sprites { display: flex; align-items: end; justify-content: space-around; min-height: 58px; margin-top: .2rem; position: relative; z-index: 1; }
.login-generation-sprites img { width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 5px 5px rgba(0,0,0,.35)); transition: transform .18s ease; }
.login-generation-card:hover .login-generation-sprites img:nth-child(1) { transform: translateY(-3px) rotate(-4deg); }
.login-generation-card:hover .login-generation-sprites img:nth-child(2) { transform: translateY(-5px); }
.login-generation-card:hover .login-generation-sprites img:nth-child(3) { transform: translateY(-3px) rotate(4deg); }

.login-card-neo { width: 100%; max-width: none; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand-2) 46%, var(--border)); border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 96%, transparent), color-mix(in srgb, var(--bg-2) 92%, transparent)); box-shadow: 0 22px 65px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.04) inset; }
.login-device-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem .9rem; border-bottom: 1px solid color-mix(in srgb, var(--brand-2) 28%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 23%, var(--panel)), color-mix(in srgb, var(--royal) 12%, var(--panel))); }
.login-device-lights { display: flex; align-items: center; gap: .7rem; }.login-device-lights .dex-lens { width: 29px; height: 29px; border-width: 3px; }.login-device-lights .led { width: 9px; height: 9px; }
.login-device-label { color: var(--muted); font: 700 .59rem var(--font-mono); letter-spacing: .09em; }.login-device-label b { margin-left: .4rem; color: var(--accent); }
.login-card-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr); }
.login-showcase { min-width: 0; display: flex; flex-direction: column; padding: clamp(1rem, 3vw, 2rem); border-right: 1px solid var(--border); background: radial-gradient(500px 300px at 40% 18%, color-mix(in srgb, var(--brand-2) 13%, transparent), transparent 70%); }
.login-showcase-top { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font: 700 .6rem var(--font-mono); letter-spacing: .08em; }.login-signal { color: var(--call); }.login-signal i { display: inline-block; width: 7px; height: 7px; margin-right: .25rem; border-radius: 50%; background: var(--call); box-shadow: 0 0 7px var(--call); }
.login-screen-neo { width: 100%; min-height: 285px; margin: .65rem 0 1.1rem !important; padding: 1rem !important; display: grid; place-items: center; border-color: color-mix(in srgb, var(--lens) 35%, var(--border)) !important; border-radius: 16px !important; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--royal) 40%, #091426), #07101f 72%) !important; box-shadow: inset 0 0 45px rgba(0,0,0,.6), 0 10px 25px rgba(0,0,0,.18) !important; }
.login-screen-neo .login-sprite { width: min(275px, 68%); height: min(275px, 68%); object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 17px 12px rgba(0,0,0,.5)); }
.login-screen-corner { position: absolute; z-index: 3; color: color-mix(in srgb, var(--lens) 75%, #fff); font: 800 1.25rem var(--font-mono); opacity: .7; }.corner-tl { top: .7rem; left: .9rem; }.corner-br { right: .9rem; bottom: .55rem; color: var(--brand-2); }
.login-showcase-copy { max-width: 510px; }.login-showcase-copy h1 { margin: .35rem 0 .55rem; color: var(--text); font-size: clamp(1.85rem, 4vw, 3.2rem); line-height: .98; letter-spacing: -.04em; }.login-showcase-copy h1 em { color: var(--accent); font-style: normal; text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 25%, transparent); }.login-showcase-copy p { max-width: 450px; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.login-feature-line { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: auto; padding-top: 1.2rem; color: var(--muted); font: 700 .6rem var(--font-mono); letter-spacing: .07em; }.login-feature-line span:first-child { color: var(--accent); }
.login-access { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(1.1rem, 3vw, 2.2rem); background: color-mix(in srgb, var(--panel) 72%, transparent); }.login-access-heading { display: flex; align-items: center; gap: .65rem; }.login-access-heading h2 { margin: .2rem 0 0; font-size: clamp(1.2rem, 2vw, 1.65rem); }.login-access-icon { display: grid; place-items: center; width: 41px; height: 41px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 1.65rem; }.login-access-intro { margin: .85rem 0 .45rem; color: var(--muted); font-size: .82rem; line-height: 1.5; }.login-form-neo { gap: .22rem; }.login-form-neo label { margin-top: .8rem; color: var(--text); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }.login-input-wrap { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--border); border-radius: 11px; background: color-mix(in srgb, var(--bg) 90%, transparent); }.login-input-wrap:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 18%, transparent); }.login-input-wrap > span { width: 18px; margin-left: .75rem; color: var(--accent); font-size: .75rem; }.login-input-wrap input { width: 100%; min-width: 0; border: 0; border-radius: 10px; background: transparent; }.login-input-wrap input:focus { box-shadow: none; }.login-help { margin: .35rem 0 .25rem; }.login-submit { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: .75rem; padding: .78rem 1rem; }.login-submit > span:last-child { margin-left: auto; font-size: 1.1rem; }.login-access-note { display: flex; gap: .5rem; margin-top: 1.1rem; padding: .65rem .7rem; border-left: 2px solid var(--accent); color: var(--muted); background: color-mix(in srgb, var(--accent) 7%, transparent); font-size: .7rem; line-height: 1.45; }.login-access-note > span:first-child { color: var(--accent); }.login-access-note b { color: var(--text); }.login-footer-neo { display: flex; justify-content: space-between; gap: .6rem; padding: .65rem 1rem; border-top: 1px solid var(--border); color: var(--muted); font: 700 .57rem var(--font-mono); letter-spacing: .07em; }.login-foot-neo { margin: 0; font-size: .7rem; letter-spacing: .08em; }
.login-otp-logo-wrap { width: 82px; height: 72px; align-self: flex-start; margin-top: -.35rem; padding: .35rem; border-radius: 20px; background: #fff; border: 2px solid color-mix(in srgb, var(--accent) 62%, #fff); box-shadow: 0 9px 22px color-mix(in srgb, var(--brand) 30%, transparent); }
.login-otp-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
body[class*="theme-"] .login-card-neo { max-width: none; border-radius: 20px !important; padding: 0 !important; }
body.theme-firered .login-view-neo :is(.login-masthead-copy strong,.login-showcase-copy h1,.login-access-heading h2) { font-family: var(--font-display) !important; }

@media (max-width: 760px) {
  .login-view-neo { align-items: flex-start; overflow: auto; padding: 1rem .75rem 1.5rem; }.login-shell { gap: .7rem; }.login-masthead { align-items: flex-start; }.login-logo-mark { width: 46px; height: 46px; border-radius: 13px; }.login-otp-logo-wrap { width: 62px; height: 54px; margin-top: -.15rem; padding: .2rem; border-radius: 14px; }.login-masthead-copy strong { font-size: 1rem; }.login-masthead-copy > span:last-child { font-size: .7rem; }.login-build-chip { display: none; }
  .login-generations { gap: .4rem; }.login-generation-card { padding: .5rem .45rem .3rem; border-radius: 11px; }.login-generation-meta { gap: .3rem; }.login-gen-index { width: 21px; height: 21px; flex-basis: 21px; font-size: .52rem; border-radius: 6px; }.login-generation-meta strong { font-size: .58rem; }.login-generation-meta span { font-size: .51rem; }.login-generation-sprites { min-height: 42px; }.login-generation-sprites img { width: 38px; height: 38px; }
  .login-card-grid { grid-template-columns: 1fr; }.login-showcase { border-right: 0; border-bottom: 1px solid var(--border); padding: 1rem; }.login-screen-neo { min-height: 220px; margin-bottom: .8rem !important; }.login-screen-neo .login-sprite { width: 190px; height: 190px; }.login-showcase-copy h1 { font-size: 2rem; }.login-showcase-copy p { font-size: .8rem; }.login-feature-line { padding-top: .8rem; }.login-access { padding: 1rem; }.login-footer-neo { flex-wrap: wrap; font-size: .5rem; }
}
@media (max-width: 420px) {
  .login-kicker { font-size: .52rem; }.login-generation-meta span { display: none; }.login-generation-meta { justify-content: center; }.login-generation-sprites img { width: 34px; height: 34px; }.login-device-label { font-size: .48rem; }.login-device-label b { display: none; }.login-showcase-top { font-size: .5rem; }.login-feature-line { gap: .3rem .55rem; font-size: .5rem; }.login-footer-neo span:nth-child(2) { display: none; }
}

/* A tela de login é uma apresentação única: em alturas menores ela se
   compacta para caber na viewport, em vez de criar uma página para arrastar. */
@media (min-width: 761px) and (max-height: 900px) {
  .login-view-neo { height: 100svh; min-height: 0; overflow: hidden; padding: .7rem 1.25rem; }
  .login-shell { gap: .45rem; }
  .login-masthead { min-height: 52px; }
  .login-otp-logo-wrap { width: 68px; height: 58px; }
  .login-generations { gap: .45rem; }
  .login-generation-card { padding: .45rem .6rem .25rem; }
  .login-generation-sprites { min-height: 44px; margin-top: .05rem; }
  .login-generation-sprites img { width: 43px; height: 43px; }
  .login-device-top { padding: .45rem .75rem; }
  .login-showcase { padding: .8rem 1rem; }
  .login-screen-neo { min-height: clamp(175px, 25vh, 225px); margin: .4rem 0 .65rem !important; }
  .login-screen-neo .login-sprite { width: min(220px, 62%); height: min(220px, 62%); }
  .login-showcase-copy h1 { margin: .2rem 0 .35rem; font-size: clamp(1.65rem, 3.2vw, 2.45rem); }
  .login-showcase-copy p { font-size: .78rem; line-height: 1.4; }
  .login-feature-line { padding-top: .65rem; }
  .login-access { padding: .9rem 1.15rem; }
  .login-access-intro { margin: .55rem 0 .25rem; font-size: .76rem; }
  .login-form-neo label { margin-top: .5rem; }
  .login-submit { margin-top: .55rem; padding: .62rem .8rem; }
  .login-access-note { margin-top: .7rem; padding: .5rem .6rem; }
  .login-footer-neo { padding: .45rem .75rem; }
  .login-foot-neo { font-size: .62rem; }
}

@media (max-width: 760px) and (max-height: 820px) {
  .login-view-neo { height: 100svh; min-height: 0; overflow: hidden; padding: .55rem .55rem .7rem; }
  .login-shell { gap: .4rem; }
  .login-masthead { min-height: 42px; }
  .login-otp-logo-wrap { width: 52px; height: 45px; margin-top: -.1rem; }
  .login-generations { gap: .3rem; }
  .login-generation-card { padding: .3rem .25rem .15rem; }
  .login-generation-sprites { display: none; }
  .login-generation-meta { min-height: 25px; }
  .login-card-grid { min-height: 0; }
  .login-showcase { padding: .65rem .7rem; }
  .login-screen-neo { min-height: 125px; margin: .3rem 0 .45rem !important; }
  .login-screen-neo .login-sprite { width: 125px; height: 125px; }
  .login-showcase-copy h1 { margin: .15rem 0 .25rem; font-size: 1.35rem; }
  .login-showcase-copy p { font-size: .68rem; line-height: 1.25; }
  .login-feature-line { gap: .25rem .55rem; padding-top: .45rem; font-size: .48rem; }
  .login-access { padding: .7rem; }
  .login-access-heading h2 { font-size: 1.05rem; }
  .login-access-intro { margin: .35rem 0 .15rem; font-size: .68rem; line-height: 1.25; }
  .login-form-neo label { margin-top: .35rem; font-size: .62rem; }
  .login-input-wrap input { padding: .5rem .6rem; font-size: .82rem; }
  .login-help { margin: .2rem 0 .1rem; font-size: .62rem; }
  .login-submit { margin-top: .35rem; padding: .55rem .7rem; font-size: .78rem; }
  .login-access-note { display: none; }
  .login-footer-neo { padding: .35rem .55rem; font-size: .45rem; }
  .login-foot-neo { font-size: .52rem; }
}

/* Contraste explícito dos campos de acesso. Alguns navegadores aplicam
   branco ao texto digitado/autopreenchido mesmo quando o tema é escuro. */
.login-input-wrap input,
.login-input-wrap input:focus,
.login-input-wrap input:active {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--accent);
  color-scheme: dark;
}
.login-input-wrap input::placeholder {
  color: color-mix(in srgb, var(--muted) 78%, transparent) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--muted) 78%, transparent) !important;
  opacity: 1;
}
.login-input-wrap input:-webkit-autofill,
.login-input-wrap input:-webkit-autofill:hover,
.login-input-wrap input:-webkit-autofill:focus {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--accent);
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--bg) 90%, transparent) inset;
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--bg) 90%, transparent) inset;
  transition: background-color 9999s ease-out 0s;
}
.login-screen-neo .login-sprite { transition: opacity .22s ease, transform .22s ease; }
.login-screen-neo .login-sprite.is-changing { opacity: 0; transform: scale(.84) translateY(8px); }

/* ═════════ ONBOARDING — TREINADOR E PARCEIRO ═════════ */
body:has(.starter-overlay) { overflow: hidden; }
.starter-overlay {
  align-items: flex-start;
  overflow-y: auto;
  padding: clamp(.75rem, 3vw, 2rem);
  touch-action: auto;
  background:
    radial-gradient(760px 420px at 8% 0%, color-mix(in srgb, var(--brand-2) 20%, transparent), transparent 68%),
    radial-gradient(700px 500px at 100% 100%, color-mix(in srgb, var(--royal) 20%, transparent), transparent 70%),
    rgba(4, 7, 14, .96);
}
.starter-box {
  max-width: 1080px;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  margin: auto;
  padding: clamp(1rem, 2.8vw, 2rem);
  text-align: left;
  border-color: color-mix(in srgb, var(--brand-2) 45%, var(--border));
  background:
    radial-gradient(680px 360px at 0% 0%, color-mix(in srgb, var(--brand-2) 11%, transparent), transparent 70%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 98%, transparent), var(--bg-2));
  box-shadow: 0 28px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.trainer-onboard-hero, .starter-onboard-hero {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  min-height: 190px;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--brand-2) 40%, var(--border));
  border-radius: 22px;
  background: linear-gradient(125deg, color-mix(in srgb, var(--brand-2) 17%, var(--panel)), color-mix(in srgb, var(--royal) 14%, var(--panel)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.trainer-onboard-hero-art, .starter-onboard-hero-art {
  display: grid;
  place-items: center;
  min-height: 155px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 18px;
  background: radial-gradient(circle at 50% 35%, rgba(127,215,255,.22), rgba(7,16,31,.85) 70%);
  overflow: hidden;
}
.trainer-onboard-hero-art img { width: 150px; height: 150px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 12px 8px rgba(0,0,0,.45)); }
.starter-onboard-featured { width: 154px; height: 154px; object-fit: contain; filter: drop-shadow(0 12px 8px rgba(0,0,0,.45)); }
.trainer-onboard-hero-copy, .starter-onboard-hero-copy { min-width: 0; }
.trainer-onboard-hero-copy .starter-h, .starter-onboard-hero-copy .starter-h { margin: .35rem 0 .55rem; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1; }
.trainer-onboard-hero-copy p, .starter-onboard-hero-copy p { max-width: 650px; margin: 0; font-size: .9rem; line-height: 1.55; }
.trainer-onboard-rule, .starter-onboard-rule { display: flex; align-items: center; gap: .55rem; margin-top: 1rem; padding: .65rem .75rem; border-left: 3px solid var(--accent); color: var(--muted); background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: .72rem; line-height: 1.4; }
.trainer-onboard-rule > span:first-child, .starter-onboard-rule > span:first-child { color: var(--accent); font-size: 1rem; }
.onboard-picker-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1.35rem 0 .55rem; }
.onboard-picker-heading strong { color: var(--text); font: 800 1.15rem var(--font-display); }
.onboard-filter-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 1rem; }
.onboard-filter-tab { padding: .48rem .75rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: color-mix(in srgb, var(--panel-2) 76%, transparent); font: 800 .68rem var(--font-mono); cursor: pointer; transition: .15s ease; }
.onboard-filter-tab:hover, .onboard-filter-tab.active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); }
.trainer-onboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.trainer-onboard-grid .trainer-opt { min-height: 156px; padding: .65rem .45rem .55rem; border-radius: 15px; background: linear-gradient(160deg, var(--panel-2), color-mix(in srgb, var(--bg-2) 85%, var(--panel-2))); }
.trainer-onboard-grid .trainer-opt:hover { border-color: var(--accent); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.trainer-onboard-grid .trainer-opt-img { width: 104px; height: 100px; }
.trainer-opt-region { color: var(--muted); font: 700 .5rem var(--font-mono); letter-spacing: .06em; }
.trainer-onboard-grid .trainer-opt-lbl { color: var(--text); font-size: .82rem; }
.starter-onboard-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.starter-onboard-grid .starter-card { min-height: 185px; justify-content: center; padding: .7rem .45rem .8rem; border-radius: 16px; background: linear-gradient(160deg, var(--panel-2), color-mix(in srgb, var(--bg-2) 84%, var(--panel-2))); }
.starter-onboard-grid .starter-card:hover { box-shadow: 0 0 0 2px var(--scolor), 0 14px 28px rgba(0,0,0,.35); }
.starter-onboard-grid .starter-mon { width: 112px; height: 112px; }
.starter-onboard-grid .starter-name { color: var(--text); font-size: 1rem; }
.starter-generation { color: var(--muted); font: 700 .5rem var(--font-mono); letter-spacing: .06em; }
.onboard-footnote { margin: 1rem 0 0; text-align: center; line-height: 1.45; }
.starter-choice-box::before { background: linear-gradient(90deg, var(--t-grass), var(--t-fire), var(--t-water), var(--t-electric), var(--t-normal)); }

/* Sprites reais no informativo da atualização. */
.gen3-tutorial-icon { overflow: hidden; }
.gen3-tutorial-real-sprite { width: 47px; height: 47px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 5px 5px rgba(0,0,0,.38)); }
.gen3-tutorial-icon:has(.gen3-tutorial-real-sprite) { background: radial-gradient(circle, color-mix(in srgb, var(--lens) 17%, var(--panel)), color-mix(in srgb, var(--brand-2) 9%, var(--panel))); }

@media (max-width: 760px) {
  .starter-overlay { padding: .55rem; }
  .starter-box { max-height: calc(100dvh - 1.1rem); padding: .8rem; border-radius: 18px; }
  .trainer-onboard-hero, .starter-onboard-hero { grid-template-columns: 86px minmax(0, 1fr); gap: .75rem; min-height: 0; padding: .75rem; border-radius: 16px; }
  .trainer-onboard-hero-art, .starter-onboard-hero-art { min-height: 86px; border-radius: 13px; }
  .trainer-onboard-hero-art img, .starter-onboard-featured { width: 82px; height: 82px; }
  .trainer-onboard-hero-copy .starter-h, .starter-onboard-hero-copy .starter-h { font-size: 1.35rem; }
  .trainer-onboard-hero-copy p, .starter-onboard-hero-copy p { font-size: .72rem; line-height: 1.35; }
  .trainer-onboard-rule, .starter-onboard-rule { margin-top: .55rem; padding: .45rem .55rem; font-size: .62rem; }
  .onboard-picker-heading { display: grid; gap: .15rem; margin-top: 1rem; }
  .onboard-filter-tabs { gap: .3rem; margin-bottom: .7rem; }
  .onboard-filter-tab { padding: .4rem .55rem; font-size: .57rem; }
  .trainer-onboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .trainer-onboard-grid .trainer-opt { min-height: 130px; }
  .trainer-onboard-grid .trainer-opt-img { width: 78px; height: 76px; }
  .starter-onboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .starter-onboard-grid .starter-card { min-height: 150px; }
  .starter-onboard-grid .starter-mon { width: 86px; height: 86px; }
  .starter-onboard-grid .starter-name { font-size: .86rem; }
  .onboard-footnote { font-size: .65rem; }
}

@media (max-width: 420px) {
  .trainer-onboard-hero, .starter-onboard-hero { grid-template-columns: 1fr; text-align: center; }
  .trainer-onboard-hero-art, .starter-onboard-hero-art { min-height: 100px; }
  .trainer-onboard-hero-art img, .starter-onboard-featured { width: 96px; height: 96px; }
  .trainer-onboard-rule, .starter-onboard-rule { justify-content: center; text-align: left; }
  .onboard-picker-heading { text-align: center; }
}

/* A entrada deve ser uma tela fechada, sem scrollbar externa. O conteúdo
   reduz os elementos decorativos conforme a altura disponível para que os
   campos e o botão continuem visíveis também em celulares altos/estreitos. */
body:has(#login-view:not(.hidden)), body:has(#legacy-login-view:not(.hidden)) { overflow: hidden; }
#login-view.login-view-neo { height: 100dvh; min-height: 0; overflow: hidden !important; }
@media (max-width: 760px) {
  #login-view.login-view-neo { align-items: flex-start; padding: .45rem .55rem .6rem; }
  #login-view .login-shell { gap: .35rem; }
  #login-view .login-masthead { min-height: 42px; }
  #login-view .login-otp-logo-wrap { width: 52px; height: 45px; margin-top: -.1rem; }
  #login-view .login-generations { gap: .3rem; }
  #login-view .login-generation-card { padding: .3rem .25rem .15rem; }
  #login-view .login-generation-sprites { display: none; }
  #login-view .login-generation-meta { min-height: 25px; }
  #login-view .login-device-top { padding: .38rem .55rem; }
  #login-view .login-showcase { padding: .62rem .7rem; }
  #login-view .login-screen-neo { min-height: clamp(120px, 19vh, 165px); margin: .25rem 0 .4rem !important; }
  #login-view .login-screen-neo .login-sprite { width: clamp(120px, 25vw, 165px); height: clamp(120px, 25vw, 165px); }
  #login-view .login-showcase-copy h1 { margin: .1rem 0 .2rem; font-size: clamp(1.25rem, 5vw, 1.7rem); }
  #login-view .login-showcase-copy p { font-size: .68rem; line-height: 1.25; }
  #login-view .login-feature-line { gap: .2rem .5rem; padding-top: .35rem; font-size: .46rem; }
  #login-view .login-access { padding: .62rem .7rem; }
  #login-view .login-access-heading h2 { font-size: 1.05rem; }
  #login-view .login-access-intro { margin: .3rem 0 .1rem; font-size: .67rem; line-height: 1.25; }
  #login-view .login-form-neo label { margin-top: .3rem; font-size: .6rem; }
  #login-view .login-input-wrap input { padding: .46rem .55rem; font-size: .8rem; }
  #login-view .login-help { margin: .15rem 0 .05rem; font-size: .6rem; }
  #login-view .login-submit { margin-top: .28rem; padding: .5rem .65rem; font-size: .76rem; }
  #login-view .login-access-note { display: none; }
  #login-view .login-footer-neo { padding: .3rem .5rem; font-size: .44rem; }
  #login-view .login-foot-neo { font-size: .5rem; }
}

@media (min-width: 761px) and (max-height: 760px) {
  #login-view.login-view-neo { padding: .35rem .9rem; }
  #login-view .login-shell { gap: .3rem; }
  #login-view .login-masthead { min-height: 44px; }
  #login-view .login-otp-logo-wrap { width: 58px; height: 50px; }
  #login-view .login-generation-card { padding: .3rem .45rem .15rem; }
  #login-view .login-generation-sprites { display: none; }
  #login-view .login-generation-meta { min-height: 25px; }
  #login-view .login-device-top { padding: .3rem .6rem; }
  #login-view .login-showcase { padding: .55rem .8rem; }
  #login-view .login-screen-neo { min-height: 145px; margin: .25rem 0 .4rem !important; }
  #login-view .login-screen-neo .login-sprite { width: 145px; height: 145px; }
  #login-view .login-showcase-copy h1 { margin: .1rem 0 .25rem; font-size: 1.55rem; }
  #login-view .login-showcase-copy p { font-size: .7rem; line-height: 1.3; }
  #login-view .login-feature-line { padding-top: .4rem; }
  #login-view .login-access { padding: .6rem .85rem; }
  #login-view .login-access-intro { margin: .35rem 0 .1rem; font-size: .72rem; }
  #login-view .login-form-neo label { margin-top: .35rem; }
  #login-view .login-submit { margin-top: .35rem; padding: .55rem .75rem; }
  #login-view .login-access-note { display: none; }
  #login-view .login-footer-neo { padding: .3rem .6rem; }
}

/* LOGIN · acabamento final para telas estreitas.
   A tela inteira fica contida na viewport; a hierarquia é reduzida sem
   esconder o formulário, e os selos das regiões continuam legíveis. */
.login-otp-logo-wrap {
  align-self: center;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  overflow: visible;
}
.login-otp-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: translateY(.08rem);
}
.login-region-emblem {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gen-color) 72%, #fff);
  border-radius: 12px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--gen-color) 38%, #fff), var(--gen-color));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 5px 12px color-mix(in srgb, var(--gen-color) 28%, transparent);
}
.login-region-emblem img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.35));
}

@media (max-width: 760px) {
  #login-view.login-view-neo {
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    align-items: stretch;
    overflow: hidden !important;
    padding: .35rem .45rem .4rem;
  }
  #login-view .login-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: .32rem;
  }
  #login-view .login-masthead {
    min-height: 48px;
    align-items: center;
    gap: .5rem;
    padding: 0 .08rem;
  }
  #login-view .login-logo-mark,
  #login-view .login-otp-logo-wrap {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    margin: 0;
    padding: .08rem;
    border-radius: 14px;
  }
  #login-view .login-otp-logo { transform: translateY(.06rem); }
  #login-view .login-masthead-copy { gap: 0; }
  #login-view .login-masthead-copy strong { font-size: .94rem; line-height: 1.05; }
  #login-view .login-masthead-copy > span:last-child { font-size: .61rem; line-height: 1.15; }
  #login-view .login-kicker { font-size: .48rem; letter-spacing: .08em; }
  #login-view .login-build-chip { display: none; }

  #login-view .login-generations { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .28rem; min-height: 0; }
  #login-view .login-generation-card { min-height: 0; padding: .3rem .3rem .26rem; border-radius: 11px; }
  #login-view .login-generation-meta { gap: .28rem; align-items: center; }
  #login-view .login-region-emblem,
  #login-view .login-gen-index {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    border-radius: 10px;
  }
  #login-view .login-region-emblem img { width: 34px; height: 34px; }
  #login-view .login-generation-meta div { gap: .02rem; }
  #login-view .login-generation-meta strong { font-size: .6rem; letter-spacing: .05em; }
  #login-view .login-generation-meta span { display: block; font-size: .46rem; line-height: 1.08; white-space: normal; }
  #login-view .login-generation-sprites { display: none; }

  #login-view .login-card-neo {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
  }
  #login-view .login-device-top { flex: 0 0 auto; min-height: 29px; padding: .28rem .5rem; }
  #login-view .login-device-lights { gap: .38rem; }
  #login-view .login-device-lights .dex-lens { width: 20px; height: 20px; border-width: 2px; }
  #login-view .login-device-lights .led { width: 6px; height: 6px; }
  #login-view .login-device-label { font-size: .45rem; letter-spacing: .06em; }
  #login-view .login-card-grid {
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }
  #login-view .login-showcase {
    min-height: 0;
    padding: .42rem .62rem .48rem;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  #login-view .login-showcase-top { font-size: .43rem; }
  #login-view .login-screen-neo {
    min-height: clamp(92px, 14vh, 126px);
    height: clamp(92px, 14vh, 126px);
    margin: .18rem 0 .22rem !important;
    padding: .35rem !important;
  }
  #login-view .login-screen-neo .login-sprite { width: 112px; height: 112px; }
  #login-view .login-showcase-copy h1 { margin: .08rem 0 0; font-size: 1.2rem; line-height: .96; }
  #login-view .login-showcase-copy p,
  #login-view .login-feature-line { display: none; }
  #login-view .login-access {
    min-height: 0;
    padding: .5rem .62rem .58rem;
    justify-content: flex-start;
    overflow: hidden;
  }
  #login-view .login-access-heading { gap: .45rem; }
  #login-view .login-access-icon { width: 31px; height: 31px; border-radius: 9px; font-size: 1.15rem; }
  #login-view .login-access-heading h2 { margin-top: .12rem; font-size: .98rem; }
  #login-view .login-access-intro { display: none; }
  #login-view .login-form-neo { gap: .12rem; }
  #login-view .login-form-neo label { margin-top: .3rem; font-size: .56rem; }
  #login-view .login-input-wrap { min-height: 32px; border-radius: 9px; }
  #login-view .login-input-wrap > span { width: 14px; margin-left: .55rem; font-size: .62rem; }
  #login-view .login-input-wrap input { min-height: 30px; padding: .35rem .45rem; font-size: .76rem; }
  #login-view .login-help { margin: .15rem 0 .02rem; font-size: .55rem; line-height: 1.15; }
  #login-view .login-submit { min-height: 34px; margin-top: .3rem; padding: .45rem .6rem; font-size: .7rem; }
  #login-view .login-access-note { display: none; }
  #login-view .login-footer-neo { flex: 0 0 auto; padding: .28rem .5rem; font-size: .4rem; }
  #login-view .login-foot-neo { font-size: .46rem; line-height: 1; }
}

@media (max-width: 380px) {
  #login-view .login-masthead-copy > span:last-child { display: none; }
  #login-view .login-generation-meta span { font-size: .42rem; }
  #login-view .login-region-emblem,
  #login-view .login-gen-index { width: 28px; height: 28px; flex-basis: 28px; }
  #login-view .login-region-emblem img { width: 31px; height: 31px; }
  #login-view .login-screen-neo { min-height: 86px; height: 86px; }
  #login-view .login-screen-neo .login-sprite { width: 100px; height: 100px; }
  #login-view .login-showcase-copy h1 { font-size: 1.08rem; }
  #login-view .login-access { padding-top: .38rem; }
}

@media (max-width: 760px) and (max-height: 680px) {
  #login-view .login-masthead { min-height: 42px; }
  #login-view .login-logo-mark,
  #login-view .login-otp-logo-wrap { width: 42px; height: 42px; flex-basis: 42px; }
  #login-view .login-generation-card { padding-block: .2rem; }
  #login-view .login-screen-neo { min-height: 76px; height: 76px; margin-block: .12rem .16rem !important; }
  #login-view .login-screen-neo .login-sprite { width: 88px; height: 88px; }
  #login-view .login-showcase { padding-block: .3rem .36rem; }
  #login-view .login-showcase-copy h1 { font-size: 1rem; }
  #login-view .login-access { padding-block: .35rem .42rem; }
  #login-view .login-access-heading h2 { font-size: .9rem; }
  #login-view .login-form-neo label { margin-top: .2rem; }
  #login-view .login-input-wrap { min-height: 28px; }
  #login-view .login-input-wrap input { min-height: 26px; padding-block: .22rem; }
  #login-view .login-submit { min-height: 30px; margin-top: .2rem; padding-block: .3rem; }
  #login-view .login-foot-neo { display: none; }
}