* { box-sizing:border-box; margin:0; padding:0; }
  /* Barra de rolagem vertical OCULTA em toda a UI (mas o scroll continua possivel):
     Firefox (scrollbar-width), IE/Edge antigo (-ms-overflow-style) e WebKit/Blink
     (::-webkit-scrollbar). Vale p/ html/body e todos os containers roláveis
     (overlays, listas internas) sem remover a rolagem. */
  * { scrollbar-width:none; -ms-overflow-style:none; }
  *::-webkit-scrollbar { width:0; height:0; display:none; }
  html,body { height:100%; background:#04060f; color:#e6edf3; overflow:hidden;
    font-family:system-ui,-apple-system,sans-serif; }
  #app { position:fixed; inset:0; }
  #scene { position:absolute; inset:0; display:block; }
  /* larguras dos widgets de canto (mapa esq / camera dir) — variaveis unicas
     usadas p/ dimensionar os cantos E reservar o espaco do HUD central */
  :root { --mapW: clamp(170px,29vw,328px); --camW: var(--mapW); --mapR: 3/2;
    --hud-bottom: 82px;   /* camera = minimapa; --hud-bottom = margem inferior comum aos indicadores E aos botoes de rodape */
    /* Fonte GRANDE comum dos controles de acao/clique/selecao (botoes, dropdowns,
       seletores) - valor unico p/ ler a distancia; reaproveitar em todo controle novo. */
    --ctl-fs: 22px; --ctl-fw: 800; }
  /* valores centralizados no topo, ENTRE o mapa (esq) e a camera (dir):
     o padding lateral reserva exatamente a largura de cada canto, entao os
     stats ficam sempre na folga central, sem colidir nem descer os cantos */
  #hud { position:fixed; top:auto; left:0; right:0; bottom:calc(var(--hud-bottom) + env(safe-area-inset-bottom,0px));
    display:flex; gap:6px; justify-content:center; flex-wrap:nowrap; pointer-events:none; z-index:5;
    box-sizing:border-box; padding-left:8px; padding-right:8px; }
  /* numeros GRANDES p/ ler a certa distancia (esteira) */
  /* painel LCD estilo relogio digital: rotulo pequeno + NUMERO GRANDE luminoso */
  .stat { background:rgba(3,6,14,.82); border:1px solid #14203c; backdrop-filter:blur(4px);
    border-radius:14px; padding:8px clamp(12px,3vw,22px); text-align:center; line-height:1.1;
    box-shadow:inset 0 0 18px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.4);
    font-size:clamp(11px,1.5vw,15px); color:#8fa6c8; letter-spacing:1.5px; text-transform:uppercase; }
  .stat b { display:block; margin-top:2px; font-weight:800; color:#ffd257;
    font-family:ui-monospace,'SF Mono',Menlo,Consolas,'Roboto Mono',monospace;
    font-variant-numeric:tabular-nums; font-size:clamp(30px,6.6vw,68px); line-height:1;
    text-shadow:0 0 10px rgba(255,190,60,.65), 0 0 2px rgba(255,255,255,.25); }
  /* delta: UMA unidade por vez (segundos por padrao) + botao toggle p/ trocar s <-> m */
  #statDelta .deltaVals { display:flex; gap:.4em; justify-content:center; align-items:center; margin-top:2px; text-transform:none; }
  #statDelta .deltaVals b { display:inline; margin-top:0; text-transform:none; }
  #statDelta .deltaUnit { text-transform:none; cursor:pointer; font:700 clamp(12px,2.4vw,16px)/1 system-ui,-apple-system,sans-serif;
    color:#8fd6ff; background:rgba(10,26,48,.6); border:1px solid rgba(120,200,255,.5); border-radius:8px;
    min-width:26px; min-height:26px; padding:2px 8px; letter-spacing:.5px; transition:transform .06s, background .15s; }
  #statDelta .deltaUnit:hover { background:rgba(20,42,74,.85); }
  #statDelta .deltaUnit:active { transform:scale(.9); }
  /* PAINEL HOLOGRAFICO (RA): vidro translucido + borda em brilho + cantos */
  .holo { position:relative; background:rgba(10,26,48,.42); border:1px solid rgba(120,200,255,.5);
    box-shadow:0 0 14px rgba(60,150,255,.25), inset 0 0 14px rgba(40,120,220,.12); backdrop-filter:blur(3px); }
  .holo::before, .holo::after { content:""; position:absolute; width:10px; height:10px;
    border:2px solid rgba(150,220,255,.85); pointer-events:none; }
  .holo::before { left:-1px; top:-1px; border-right:none; border-bottom:none; }
  .holo::after { right:-1px; bottom:-1px; border-left:none; border-top:none; }
  /* INDICADOR DE FORMA (cintura p/ cima): canto superior direito, discreto, so na corrida */
  /* Indicador de forma LOGO ABAIXO do preview da camera, com a MESMA largura (centralizado
     na base da camera). Pilulas empilhadas, cada uma mais ALTA e centralizada. Acompanha o
     lado da camera (cam-left no tablet em paisagem). */
  #formHud { position:fixed; top:calc(env(safe-area-inset-top,0px) + 8px + (var(--camW) * 1.5) + 8px);
    right:8px; left:auto; width:var(--camW); z-index:6;
    display:none; flex-direction:column; align-items:stretch; gap:6px; pointer-events:none; }
  body.cf-ingame:not(.cf-menuscr) #formHud { display:flex; }
  body.cam-left #formHud { left:8px; right:auto; }
  #formHud .fItem { display:flex; align-items:center; justify-content:center; gap:6px; min-height:42px;
    font:600 clamp(11px,1.5vw,14px)/1 system-ui,-apple-system,sans-serif;
    color:#cfe0f5; background:rgba(10,26,48,.5); border:1px solid rgba(120,200,255,.35);
    border-radius:10px; padding:9px 10px; backdrop-filter:blur(3px); letter-spacing:.3px; }
  #formHud .fIco { font-size:1.15em; filter:grayscale(.1); }
  #formHud .fVal { font-weight:800; font-variant-numeric:tabular-nums; margin-left:2px; }
  #formHud .fItem.ok { border-color:rgba(34,197,94,.75); color:#bdf0cf; }
  #formHud .fItem.ok .fVal { color:#22c55e; }
  #formHud .fItem.warn { border-color:rgba(240,168,53,.7); color:#ffe0a8; }
  #formHud .fItem.warn .fVal { color:#f0a835; }
  /* HUD de musica: equalizador + volume (centro inferior, acima dos botoes) */
  /* painel de musica ACIMA dos indicadores numericos (#hud, bottom:82px + ~88px de
     altura): fica logo acima deles, sem cobrir os numeros KM/H, METROS, TEMPO. */
  #musicHud { position:fixed; left:50%; transform:translateX(-50%); bottom:180px; z-index:6;
    display:flex; align-items:center; justify-content:space-evenly; gap:16px; padding:18px 22px; border-radius:18px; }
  #musicHud .mIco { font-size:30px; line-height:1; opacity:.9; }
  /* alto-falante = botao de MUDO (toggle): reseta o visual pesado do button base */
  #musicHud .mMute { flex:0 0 auto; min-height:0; width:auto; padding:4px 8px; background:none;
    box-shadow:none; border:none; border-radius:10px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  #musicHud .mMute:hover { filter:brightness(1.15); }
  #musicHud .mMute:active { transform:scale(.9); box-shadow:none; }
  #musicHud .mMute.mudo { opacity:.5; }
  /* botoes de FONTE da musica: 📱 (do aparelho) e 💿 (embutidas do app). Modos
     EXCLUSIVOS - o ativo fica em destaque; o inativo, esmaecido. */
  #musicHud .mMode { flex:0 0 auto; min-height:0; width:auto; padding:4px 8px; background:none;
    box-shadow:none; border:none; border-radius:10px; cursor:pointer; -webkit-tap-highlight-color:transparent;
    font-size:26px; line-height:1; opacity:.45; }
  #musicHud .mMode:hover { filter:brightness(1.15); }
  #musicHud .mMode:active { transform:scale(.9); box-shadow:none; }
  #musicHud .mMode.ativo { opacity:1; text-shadow:0 0 10px #6cc6ff; }
  #eqCanvas { display:block; width:200px; height:76px; }
  /* Toast do cenario atual (troca ao avancar a distancia) */
  .cenarioToast { position:fixed; left:50%; top:96px; transform:translateX(-50%) translateY(-8px); z-index:6;
    padding:8px 18px; border-radius:14px; background:rgba(6,10,24,.55); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.22); color:#fff; font-size:16px; opacity:0; pointer-events:none;
    transition:opacity .4s, transform .4s; text-align:center; white-space:nowrap; }
  .cenarioToast.show { opacity:1; transform:translateX(-50%) translateY(0); }
  .cenarioToast .novo { display:block; font-size:12px; color:#8affc0; margin-top:2px; letter-spacing:1px; text-transform:uppercase; }
  #volSlider { width:110px; height:40px; accent-color:#6cc6ff; cursor:pointer; }
  @media (orientation:landscape) and (max-height:560px){
    /* Paisagem BAIXA (celular deitado): a tela e curta e os paineis de minimapa (topo-esq)
       e camera (topo-dir) descem ate quase a metade. O painel de musica (centro) nao pode
       COLIDIR com eles — limita a LARGURA ao vao central (entre os dois cantos) e ENCOLHE o
       equalizador/padding p/ caber sem invadir. */
    #musicHud{ bottom:150px; box-sizing:border-box; gap:10px; padding:10px 12px;
      max-width:calc(100vw - 2*(var(--camW) + 8px) - 16px); }
    #musicHud > *{ min-width:0; }
    #eqCanvas{ width:150px; max-width:100%; }
    #volSlider{ width:84px; }
  }
  /* Celular retrato ESTREITO: encolhe os cantos p/ ALARGAR a folga central,
     mantendo mapa e camera nos cantos do topo e os stats centralizados entre eles */
  @media (max-width:640px) and (orientation:portrait){
    :root { --mapW: 32vw; --camW: var(--mapW); --hud-bottom: 92px; }   /* celular vertical: painel menor + margem inferior comum maior */
    /* contadores (KM/H, METROS, TEMPO) vao p/ o FUNDO: o topo fica so p/ os paineis */
    #hud { top:auto; padding-left:6px; padding-right:6px; gap:5px; }
  }
  /* mini-mapa no topo-ESQUERDO */
  #mapWrap { position:fixed; top:8px; left:8px; width:var(--mapW);
    aspect-ratio:2/3; background:rgba(8,12,26,.7); border:1px solid #1f2a44;
    border-radius:10px; backdrop-filter:blur(4px); padding:6px; pointer-events:none; }
  #mapCanvas { width:100%; height:100%; display:block; }
  /* camera no topo-DIREITO */
  #camWrap { position:fixed; top:8px; right:8px; width:var(--camW);
    aspect-ratio:2/3; border:1px solid #1f2a44; border-radius:10px;   /* mesmo tamanho/forma do minimapa */
    overflow:hidden; background:#000; }
  #video { display:none; }
  #poseCanvas { width:100%; height:100%; object-fit:cover; }
  /* guia de posicionamento: pilula discreta logo ABAIXO do preview da camera */
  #camDica { position:fixed; right:8px; top:calc(8px + (var(--camW) * 1.5) + 6px); width:var(--camW);
    z-index:5; display:none; box-sizing:border-box; padding:7px 9px; border-radius:9px;
    background:rgba(20,28,48,.92); border:1px solid #2a3a5c; color:#dce7fb;
    font-size:12px; line-height:1.25; text-align:center; box-shadow:0 4px 14px rgba(0,0,0,.4); }
  #camDica.on { display:block; }
  /* POSICAO do preview conforme o lado da camera fisica (tablet em paisagem: a
     camera que no retrato fica no topo vai para a LATERAL). O controlador de
     orientacao liga body.cam-left; o padrao (sem a classe) e topo-DIREITO. */
  body.cam-left #camWrap { left:8px; right:auto; }
  body.cam-left #camDica { left:8px; right:auto; }
  /* OVERLAY de orientacao: cobre a tela quando o aparelho esta na orientacao
     errada (celular deve correr em RETRATO; tablet em PAISAGEM). Mostra um icone
     de aparelho girando + a instrucao. Ligado por body.orient-wrong. */
  #orientOverlay { position:fixed; inset:0; z-index:9000; display:none;
    flex-direction:column; align-items:center; justify-content:center; gap:22px;
    background:rgba(6,10,22,.94); backdrop-filter:blur(6px);
    color:#eaf2ff; text-align:center; padding:24px; }
  body.orient-wrong #orientOverlay { display:flex; }
  #orientOverlay .oIco { width:96px; height:150px; position:relative;
    animation:oRot 2.2s ease-in-out infinite; }
  #orientOverlay .oDev { position:absolute; inset:0; border:4px solid #f0a835;
    border-radius:16px; background:rgba(240,168,53,.10); }
  #orientOverlay .oDev::after { content:""; position:absolute; top:9px; left:50%;
    transform:translateX(-50%); width:22px; height:5px; border-radius:3px;
    background:#f0a835; }          /* "camera"/alto-falante do aparelho */
  #orientOverlay .oTxt { font-size:19px; font-weight:800; line-height:1.3; max-width:420px; }
  #orientOverlay .oSub { font-size:14px; opacity:.85; max-width:420px; }
  @keyframes oRot { 0%,18%{ transform:rotate(0deg); } 50%,68%{ transform:rotate(90deg); } 100%{ transform:rotate(90deg); } }
  /* celular (alvo retrato): a animacao gira de paisagem -> retrato (desgira) */
  body.orient-goal-portrait #orientOverlay .oIco { animation-name:oRotToPortrait; }
  @keyframes oRotToPortrait { 0%,18%{ transform:rotate(90deg); } 50%,100%{ transform:rotate(0deg); } }
  /* Sentido do giro conforme o LADO detectado (body.cam-left = camera a esquerda, angulo
     90; sem a classe = camera a direita, angulo 270): a animacao desgira no sentido certo
     p/ chegar ao retrato -- esquerda gira de +90->0, direita de -90->0. */
  body.orient-goal-portrait:not(.cam-left) #orientOverlay .oIco { animation-name:oRotToPortraitR; }
  @keyframes oRotToPortraitR { 0%,18%{ transform:rotate(-90deg); } 50%,100%{ transform:rotate(0deg); } }
  /* botao mapa: esconde/mostra SO o minimapa (NUNCA a camera - motor do jogo) */
  body.panels-hidden #mapWrap { display:none; }
  /* botao camera (📷): esconde/mostra SO o painel de captura (preview). A camera
     (o <video>, ja display:none) continua rodando e alimentando a deteccao -> a
     corrida NAO para. A camera so e liberada ao sair da corrida / fechar a aba. */
  body.cam-hidden #camWrap { display:none; }
  body.cam-hidden #camDica { display:none !important; }
  body.panels-hidden #hud { padding-left:8px; }   /* so o lado do minimapa; a camera continua, mantem o padding-right */
  /* botoes de MUSICA (🎵) e CAMERA (📷): SEMPRE ancorados ao FUNDO da tela, canto
     INFERIOR DIREITO (nao mais na margem dos indicadores). Margem lateral 8px e a
     mesma margem inferior do botao Iniciar/Parar (8px + safe-area). */
  #toggles { position:fixed; right:8px; top:auto; bottom:calc(8px + env(safe-area-inset-bottom,0px));
    display:flex; align-items:flex-end; gap:8px; z-index:4; }
  /* botao 🗺️ (ocultar minimapa): ESPELHO no FUNDO, canto INFERIOR ESQUERDO. */
  #tgPan { position:fixed; left:8px; right:auto; top:auto; bottom:calc(8px + env(safe-area-inset-bottom,0px)); z-index:4; }
  .tgl { width:56px; height:56px; font-size:28px; padding:0; border-radius:12px;
    background:rgba(22,30,52,.9); border:1px solid #24304f; line-height:1; }
  /* botoes de MUSICA (🎵), CAMERA (📷) e MINIMAPA (🗺️): so-icone, um pouco maiores
     que uma digital grande + margem de seguranca (~64px alvo de toque confortavel). */
  #tgMus, #tgCam, #tgPan { width:64px; height:64px; font-size:32px; border-radius:14px; }
  /* MUSICA (🎵) vai para o TOPO-CENTRO, entre o minimapa (topo-esq) e a camera
     (topo-dir), para nao ser sobreposta pelos botoes do rodape em telas estreitas. */
  #tgMus { position:fixed; left:50%; right:auto; top:8px; bottom:auto;
    transform:translateX(-50%); z-index:5; }
  .tgl.off { background:#3a1720; border-color:#5a2430; opacity:.85; filter:grayscale(.4); }
  /* z-index ACIMA do painel de musica (z:6) e dos toggles: o botao Parar/Iniciar
     nunca fica escondido atras do painel de EQ/volume quando ele esta aberto. */
  /* A barra e larga (left/right:10px) e cobria os toggles dos cantos inferiores
     (📷 camera / 🗺️ minimapa). O container NAO captura clique; so o proprio botao
     Iniciar/Parar -> o clique nas laterais vazias cai nos toggles embaixo. */
  #controls { position:fixed; left:10px; right:10px; bottom:10px; display:flex; gap:10px; justify-content:center; z-index:8; pointer-events:none; }
  #controls button { pointer-events:auto; }
  /* botao unico (Iniciar/Parar) NAO estica a largura toda: contido e centralizado.
     MESMA largura do "Correr novamente" (#report .primary) -> par consistente entre telas. */
  /* Mais ESTREITO que antes (era 72%/300): deixa margem entre o Parar e os botoes de
     canto (mapa/camera/musica) na tela de corrida, antes e depois dele. */
  #controls button { flex:0 0 auto; width:clamp(150px,52%,230px); }
  /* botoes da corrida: LARGOS e ALTOS p/ facil pressionamento */
  #controls button { min-height:64px; font-size:19px; }
  /* Botoes "gostosos de apertar" + grandes p/ acessibilidade (idosos):
     alvo generoso, cantos macios, leve gradiente, sombra e pressao com afundar. */
  /* Padrao de botao (= "Ver demonstracao"): BORDA + sombreado 3D (bevel) + som ao clicar
     (o som e global, via blip no pointerdown). box-sizing inclui a borda na altura. */
  button { flex:1; min-height:60px; padding:16px 20px; font-size:var(--ctl-fs); font-weight:var(--ctl-fw);
    border:2px solid rgba(0,0,0,.28); box-sizing:border-box; border-radius:16px; color:#e6edf3; cursor:pointer; letter-spacing:.2px;
    background:linear-gradient(#243052,#161e34);
    box-shadow:0 4px 0 #0c1226, 0 6px 14px rgba(0,0,0,.4); -webkit-tap-highlight-color:transparent;
    transition:transform .06s ease, box-shadow .06s ease, filter .1s; }
  button:hover { filter:brightness(1.08); }
  button:active { transform:translateY(4px) scale(.99); box-shadow:0 0 0 #0c1226, 0 2px 6px rgba(0,0,0,.4); }
  button:focus-visible { outline:3px solid #ffd27a; outline-offset:2px; }
  button.primary { color:#241300;
    background:linear-gradient(#ffc65a,#f0a835);
    box-shadow:0 4px 0 #a86e12, 0 6px 16px rgba(240,168,53,.35); }
  button.primary:active { box-shadow:0 0 0 #a86e12, 0 2px 8px rgba(240,168,53,.35); }
  /* ===== PADRAO GLOBAL DE CONTROLES (app mobile-touch) =====
     Especificidade baixa (:where / seletor de elemento) p/ telas sobrescreverem.
     1) LARGURA: botao de ACAO isolado nunca estica nem fica superdimensionado -
        largura pelo conteudo, com teto e centralizado (telas que precisam de
        full-width, como login/cadastro, ainda vencem via "#id .primary").
     2) ESPACAMENTO minimo entre controles adjacentes (anti-misclique/touch):
        containers de controle usam gap >= 12px via .ctlRow/.ctlCol. */
  button.primary { width:auto; max-width:min(340px,100%); margin-inline:auto; align-self:center; }
  /* Botao "Proximo" (ex-"Continuar"): MESMA COR VERDE do botao Proximo do
     assistente (.uw-btn-primary => --uw-accent = var(--green,#22c55e)), texto
     branco. O ID+classe de cada botao vence a especificidade de `button.primary`
     (dourado degrade). */
  button.primary.cfProximo { background:#22c55e; color:#fff;
    box-shadow:0 4px 0 #15803d, 0 6px 16px rgba(34,197,94,.35); }
  button.primary.cfProximo:active { box-shadow:0 0 0 #15803d, 0 2px 8px rgba(34,197,94,.35); }
  /* Botao Salvar (tela Avatar): verde, MESMO tratamento do Proximo
     (solido + sombra 3D, texto branco), so muda a cor para verde. */
  button.primary.cfSalvar { background:#2fb344; color:#fff;
    box-shadow:0 4px 0 #1e7a2e, 0 6px 16px rgba(47,179,68,.35); }
  button.primary.cfSalvar:active { box-shadow:0 0 0 #1e7a2e, 0 2px 8px rgba(47,179,68,.35); }
  :where(.ctlRow) { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; }
  :where(.ctlCol) { display:flex; flex-direction:column; gap:14px; }
  /* Botao "Entrar como Convidado": mesmo alto-relevo do primary, em tom claro
     (prata-azulado) para ficar perceptivel e distinto do dourado do "Entrar". */
  #linkConvidadoL { color:#1a2138;
    background:linear-gradient(#eef3ff,#c6d4ef);
    box-shadow:0 4px 0 #8393b8, 0 6px 16px rgba(150,170,210,.35); }
  #linkConvidadoL:active { box-shadow:0 0 0 #8393b8, 0 2px 8px rgba(150,170,210,.35); }
  /* ===== Landing de marketing (1a tela p/ quem ainda nao entrou) ===== */
  #landing { position:fixed; inset:0; z-index:31; display:none; align-items:flex-start;
    justify-content:center; padding:20px; overflow:auto;
    background:radial-gradient(120% 90% at 50% 0%, #10193a 0%, #05070f 70%); }
  #landing .card { width:100%; max-width:460px; background:rgba(12,18,36,.9);
    border:1px solid #24304f; border-radius:16px; padding:26px 22px; text-align:center;
    box-sizing:border-box; display:flex; flex-direction:column; gap:18px; }
  #landing .lpKicker { font-size:12px; letter-spacing:2px; text-transform:uppercase;
    color:#9fd0ff; margin:0; }
  /* Titulo PADRAO de todas as telas: mesmo tamanho/cor/espacamento (padronizado). */
  .cf-title { font-size:clamp(22px,5.5vw,28px); line-height:1.14; color:var(--cf-gold);
    margin:0 0 10px; text-align:center; font-weight:800; letter-spacing:.2px; }
  #landing .lpHooks { display:flex; flex-direction:column; gap:10px; text-align:left;
    margin:0; padding:0; }
  #landing .lpHooks li { list-style:none; display:flex; gap:12px; align-items:flex-start;
    background:#0e1730; border:1px solid #24304f; border-radius:12px; padding:12px 14px;
    font-size:14px; color:#e6edf3; line-height:1.4; font-weight:700; }   /* textos de destaque TODOS em bold */
  #landing .lpHooks .ico { font-size:22px; flex:0 0 auto; line-height:1.2; }
  #landing .lpCta { display:flex; flex-direction:column; gap:12px; margin-top:2px; }
  #landing .lpSecondary { display:flex; gap:12px; }
  #landing .lpSecondary button { flex:1; min-height:56px; }
  #msg { position:fixed; inset:0; display:none; align-items:center; justify-content:center;
    text-align:center; padding:24px; background:rgba(0,0,0,.9); font-size:17px;
    line-height:1.5; white-space:pre-line; z-index:60; }   /* acima das telas (29) e do header (40)/hamburguer (55) p/ o erro da camera aparecer */
  /* nomes acima dos bonecos (projetados do 3D) */
  #labels { position:fixed; inset:0; pointer-events:none; z-index:3; overflow:hidden; }
  .nameLabel { position:absolute; transform:translate(-50%,-100%);
    padding:6px 18px; border-radius:12px; background:rgba(8,12,26,.6);
    color:#fff; font-size:40px; font-weight:700; white-space:nowrap;
    text-shadow:0 1px 3px #000, 0 0 6px #000; border:1px solid rgba(255,255,255,.15);
    will-change:left,top; }
  .nameLabel.me { color:#ffd28a; border-color:#f0a83566; }
  /* tela de cadastro inicial */
  #startForm { position:fixed; inset:0; z-index:30; display:flex;
    flex-direction:column; align-items:center; justify-content:flex-start;
    padding:10px; overflow-y:auto; scroll-padding-bottom:calc(var(--cf-ftr-h,72px) + 16px);
    background:radial-gradient(120% 90% at 50% 0%, #10193a 0%, #05070f 70%); }
  #startForm .card { width:100%; max-width:400px; background:rgba(12,18,36,.9);
    border:1px solid #24304f; border-radius:16px; padding:18px 16px; text-align:center; }
  /* Folga inferior = altura REAL do rodape fixo (--cf-ftr-h) + 8px, reservada por um
     SPACER (::after) ao fim do container em coluna. Num container de scroll o Chrome
     IGNORA o padding-bottom (e a margem do item) na area rolavel; so um elemento/pseudo
     em fluxo conta no scrollHeight -> sem ele o rodape fixo cobre os ultimos controles
     e nao da pra rolar ate o fim. */
  #startForm::after, #loginScreen::after, #registerScreen::after {
    content:''; flex:0 0 auto; width:1px; height:calc(var(--cf-ftr-h,72px) + 16px); }
  /* #startForm h1 -> estilo unico em .cf-title */
  #startForm .sub { font-size:13px; color:#9fb0d0; margin-bottom:16px; line-height:1.4; }
  #startForm label { display:block; text-align:left; font-size:13px; color:#c8d4ec; margin:10px 0 4px; }
  #startForm label .opt { color:#8296b6; font-weight:400; font-size:.9em; }
  #startForm .field { display:flex; gap:8px; }
  #startForm input { flex:1; padding:12px; font-size:16px; border-radius:10px;
    border:1px solid #2c3a5e; background:#0b1226; color:#e6edf3; min-width:0; }
  /* Peso/Altura: linha de 2 colunas que quebra no mobile; campo numerico COMPACTO
     (nao estica full-width) comunicando o limite curto de digitos. */
  #startForm .fieldRow { display:flex; gap:12px; flex-wrap:wrap; }
  #startForm .fieldRow > label { flex:1 1 140px; margin-top:10px; }
  #startForm input.f-num { flex:0 0 auto; width:7.5em; max-width:100%; text-align:center; }
  #startForm .mic { flex:0 0 64px; height:56px; font-size:30px; padding:0; background:#21335c; }
  #startForm .mic.rec { background:#c0392b; animation:pulse .8s infinite; }
  @keyframes pulse { 50% { opacity:.55; } }
  #startForm .primary { width:100%; margin-top:18px; padding:15px; font-size:var(--ctl-fs); }
  #startForm .opc { color:#7787a8; font-weight:400; font-size:11px; }
  /* Telas Entrar / Criar conta: reaproveitam o visual do #startForm */
  #loginScreen, #registerScreen { position:fixed; inset:0; z-index:30; display:none;
    flex-direction:column; align-items:center; justify-content:flex-start;
    padding:10px; overflow-y:auto; scroll-padding-bottom:calc(var(--cf-ftr-h,72px) + 16px);
    background:radial-gradient(120% 90% at 50% 0%, #10193a 0%, #05070f 70%); }
  /* Tema DIA (claro): Entrar/Criar conta com fundo claro das variaveis do tema (diferente da noite). */
  html[data-theme="light"] #loginScreen, html[data-theme="light"] #registerScreen {
    background:radial-gradient(120% 90% at 50% 0%, var(--cf-bg2) 0%, var(--cf-bg) 72%); }
  /* Telas Entrar/Criar conta: card com a ALTURA DO CONTEUDO, ANCORADO AO TOPO
     -- igual ao layout da janela "Corrida Fantasma" (#startForm). O container ja
     alinha ao topo (align-items:flex-start); sem min-height:100dvh o card deixa de
     esticar/centralizar e senta no topo. O gap uniforme mantem o respiro entre os
     controles (inclusive os botoes SSO, que nao ficam colados). */
  #loginScreen .card, #registerScreen .card { width:100%; max-width:400px;
    box-sizing:border-box;
    display:flex; flex-direction:column; justify-content:flex-start; gap:22px;
    /* altura do painel = viewport - folga topo (10) - folga do rodape (spacer ::after);
       o painel preenche a tela sem o card invadir o rodape fixo. */
    min-height:calc(100dvh - 10px - var(--cf-ftr-h,72px) - 16px);
    background:rgba(12,18,36,.9); border:1px solid #24304f; border-radius:16px; padding:22px 16px; text-align:center; }
  /* zera as margens verticais avulsas dos filhos: o espacamento passa a vir SO do
     gap/space-evenly, deixando o ritmo uniforme (inclusive entre Google e CDF). */
  #loginScreen .card > *, #registerScreen .card > * { margin-top:0; margin-bottom:0; }
  /* Link "Nao tem conta? Criar conta" / "Ja tem conta? Entrar": espaco acima e
     abaixo (o .sub com link, distinto do subtitulo do topo, que tem <b>). */
  #loginScreen .card > .sub:has(a), #registerScreen .card > .sub:has(a) { padding:10px 0; }
  #loginScreen label, #registerScreen label { display:block; text-align:left; font-size:17px; color:#c8d4ec; margin:10px 0 4px; }
  /* checkbox de consentimento LGPD (Li e aceito Politica + Termos) no cadastro */
  #registerScreen .consentRow { display:flex; gap:9px; align-items:flex-start; text-align:left;
    font-size:14px; line-height:1.35; color:#c8d4ec; margin:14px 0 2px; cursor:pointer; }
  #registerScreen .consentRow input { flex:0 0 auto; width:22px; height:22px; margin:1px 0 0; cursor:pointer; accent-color:#f0a835; }
  #registerScreen .consentRow a { color:#ffc65a; text-decoration:underline; }
  /* passos do wizard: ocultos ate serem ADOTADOS numa .uw-pane-inner (evita flash e o vazamento
     dos passos ainda nao visitados). O wizard mostra so o passo corrente. */
  .wzStep { display:none; }
  .uw-pane-inner .wzStep { display:block; }
  #regWizard, #trackWizard { --uw-accent:#f0a835; }
  /* Rodape do wizard: Voltar e Proximo/Comecar com a MESMA altura; e o botao
     Proximo/Comecar sem largura exagerada (ajustado ao conteudo). */
  /* flex:0 0 auto anula o `button{flex:1}` global (que faria o botao CRESCER
     ate o max-width dentro do rodape flex); assim o botao hug o texto interno. */
  #trackWizard .uw-foot .uw-btn, #regWizard .uw-foot .uw-btn {
    height:48px; min-height:48px; flex:0 0 auto; width:auto; }
  #trackWizard .uw-foot .uw-btn-primary, #regWizard .uw-foot .uw-btn-primary {
    max-width:240px; padding:0 22px; }
  /* "Passo X de Y" numa LINHA PROPRIA centralizada (acima dos botoes), e os dois botoes
     numa UNICA linha alinhados (Voltar a esquerda, Comecar/Proximo a direita, mesma altura).
     Evita o "Comecar" cair solto numa 2a linha desalinhado quando a fonte e grande no mobile. */
  #trackWizard .uw-foot .uw-count, #regWizard .uw-foot .uw-count {
    flex:1 1 100%; order:-1; text-align:center; }
  #loginScreen .field, #registerScreen .field { display:flex; gap:8px; }
  #loginScreen input, #registerScreen input { flex:1; padding:15px; font-size:19px; border-radius:10px;
    border:1px solid #2c3a5e; background:#0b1226; color:#e6edf3; min-width:0; }
  /* Campo de NOME invalido (nome ja cadastrado): borda vermelha + halo -> sinaliza
     que o campo precisa ser corrigido. Marcado via aria-invalid no checaNome. */
  #registerScreen input[aria-invalid="true"] { border-color:#e5484d;
    box-shadow:0 0 0 2px rgba(229,72,77,.28); }
  #registerScreen .mic { flex:0 0 64px; height:56px; font-size:30px; padding:0; background:#21335c; }
  #registerScreen .mic.rec { background:#c0392b; animation:pulse .8s infinite; }
  #loginScreen .primary, #registerScreen .primary { width:100%; }
  /* Botao "Entrar" do login IGUAL ao da landing (.cfBtnEntrar, azul): o ID vence
     a especificidade de `button.primary` (dourado) para a cor azul valer. */
  #btnLogin.cfBtnEntrar{ color:#06243a;
    background:linear-gradient(var(--cf-blue2,#7cc4ff),var(--cf-blue,#3a9bff));
    box-shadow:0 4px 0 #1f5c96, 0 6px 16px rgba(58,155,255,.35); font-weight:800; }
  #btnLogin.cfBtnEntrar:active{ box-shadow:0 0 0 #1f5c96, 0 2px 8px rgba(58,155,255,.35); }
  /* MESMO TAMANHO do "Entrar" da landing (#lpEntrar.cfBtnEntrar): min-height 60,
     padding 10x22, largura 100% max 300 centrada -- vence as regras de botao de
     conta (364-371, height 56/padding 0 30/fit-content) via dois IDs. */
  #loginScreen #btnLogin.cfBtnEntrar{ height:auto; min-height:60px; padding:10px 22px;
    width:100%; max-width:300px; margin-left:auto; margin-right:auto; }
  #loginScreen .primary + .sub, #registerScreen .primary + .sub { margin-top:18px; }
  #loginScreen .erro, #registerScreen .erro { color:#ff8a8a; font-size:14px; min-height:16px; margin-top:8px; }
  #startForm a, #loginScreen a, #registerScreen a { color:#ffc65a; text-decoration:none; }
  .authNav { display:flex; gap:10px; margin:6px 0 4px; }
  .field.pw { position:relative; }
  /* Campos de SENHA e NOME alinhados ABAIXO e IGUAIS ao label (largura cheia do
     card, borda esquerda coincidindo com a do rotulo) -- sem centralizar/encolher. */
  #loginScreen .field.pw, #registerScreen .field.pw { max-width:none; margin-inline:0; }
  #registerScreen .field:has(#regNome) { max-width:none; margin-inline:0; }
  /* Botao "olho" (mostrar/ocultar senha): LARGO como um dedao (~76px) p/ toque
     confortavel, mantendo a altura do campo. */
  .olho { flex:0 0 76px; width:76px; height:56px; min-height:0; font-size:24px; padding:0;
    background:#21335c; border-radius:12px; box-shadow:none; }
  .olho[aria-pressed="true"] { background:#2c4a2f; }
  .olho svg { width:24px; height:24px; display:block; margin:auto; stroke:#e8eefc; }
  .olho[aria-pressed="true"] svg { stroke:#bfe6c4; }
  .btnGhost { width:100%; margin-top:12px; }
  #startForm .erro { color:#ff8a8a; font-size:13px; min-height:16px; margin-top:8px; }
  #startForm .dica { color:#8090b0; font-size:11px; margin-top:22px; min-height:14px; line-height:1.45; }
  /* Barra de scroll OCULTA mas rolagem FUNCIONAL nas telas roláveis (startForm/login/registro). */
  #startForm, #loginScreen, #registerScreen { scrollbar-width:none; -ms-overflow-style:none; }
  #startForm::-webkit-scrollbar, #loginScreen::-webkit-scrollbar, #registerScreen::-webkit-scrollbar { width:0; height:0; display:none; }
  .ouSep { display:flex; align-items:center; gap:10px; color:#7787a8; font-size:12px; margin:14px 0 10px; }
  .ouSep::before, .ouSep::after { content:""; flex:1; height:1px; background:#24304f; }
  cdf-login-button { display:block; margin-top:8px; --cdf-btn-radius:10px; --cdf-btn-font-size:15px;
    --cdf-btn-bg:#fff; --cdf-btn-bg-hover:#f1f3f7; --cdf-btn-fg:#000; --cdf-btn-border:#d0d7e2; }
  cdf-login-button::part(button) { width:100%; justify-content:center;
    transition:transform .06s ease, box-shadow .06s ease, filter .1s;
    box-shadow:0 0 0 2px #f0a835, 0 4px 0 #c4ccd8, 0 6px 14px rgba(0,0,0,.28); } /* anel ambar + alto-relevo */
  cdf-login-button::part(button):hover { filter:brightness(1.04); }
  cdf-login-button::part(button):active { transform:translateY(4px) scale(.99);
    box-shadow:0 0 0 2px #f0a835, 0 0 0 #c4ccd8, 0 2px 6px rgba(0,0,0,.28); }
  .googleBtn { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px;
    text-decoration:none; padding:12px; border-radius:10px; background:#fff; color:#000;
    font-weight:700; font-size:15px; border:1px solid #d0d7e2;
    -webkit-tap-highlight-color:transparent;
    transition:transform .06s ease, box-shadow .06s ease, filter .1s;
    box-shadow:0 0 0 2px #f0a835, 0 4px 0 #c4ccd8, 0 6px 14px rgba(0,0,0,.28); } /* anel ambar + alto-relevo */
  .googleBtn:hover { filter:brightness(1.04); }
  /* A fonte do botao Google vinha AMARELADA porque a regra "#startForm a {color:#ffc65a}"
     (especificidade de ID) vencia o ".googleBtn". Forcamos PRETO com o mesmo nivel de ID. */
  #startForm .googleBtn, #loginScreen .googleBtn, #registerScreen .googleBtn { color:#000; }
  .googleBtn:active { transform:translateY(4px) scale(.99);
    box-shadow:0 0 0 2px #f0a835, 0 0 0 #c4ccd8, 0 2px 6px rgba(0,0,0,.28); }
  /* ==== Padronizacao dos botoes das telas de conta ====
     Todos os botoes tem a MESMA altura (56px); os botoes de acao tem
     largura ajustada ao conteudo (sem esticar) e ficam centralizados. */
  #startForm button, #loginScreen button, #registerScreen button {
    flex:0 0 auto; height:56px; min-height:56px; }
  #startForm .primary, #loginScreen .primary, #registerScreen .primary,
  #startForm .btnGhost, #loginScreen .btnGhost, #registerScreen .btnGhost,
  #startForm .googleBtn, #loginScreen .googleBtn {
    display:flex; align-items:center; justify-content:center; white-space:nowrap;
    width:fit-content; max-width:100%; margin-left:auto; margin-right:auto;
    height:56px; min-height:56px; padding:0 30px; }
  .authNav { justify-content:center; align-items:stretch; }
  /* "Entrar" e "Criar conta" = duas colunas IGUAIS, mesma largura/altura e
     topo alinhado. Seletor com #startForm p/ vencer a especificidade de
     "#startForm .primary" (que impunha width:fit-content ao "Criar conta"). */
  #startForm .authNav button { flex:1 1 0; width:auto; max-width:none; white-space:nowrap;
    display:flex; align-items:center; justify-content:center; padding:0 12px;
    margin:0; }
  /* Botao "Ver demonstracao" na landing de marketing: largura cheia do CTA. */
  /* "Ver demonstracao": MESMA fonte/altura dos demais botoes da landing (herda a
     fonte/padding do button base, sem o 15px antigo) e MESMA margem -> margin-top:0
     para o espacamento ficar igual ao gap:12px do .lpCta (sem somar os 12px do .btnGhost). */
  #landing #btnDemo { width:100%; margin-top:0; }
  #startForm cdf-login-button, #loginScreen cdf-login-button {
    width:fit-content; max-width:100%; margin-left:auto; margin-right:auto; }
  #startForm cdf-login-button::part(button),
  #loginScreen cdf-login-button::part(button) {
    width:100%; min-height:56px; height:56px; padding:0 30px; }
  /* SSO com a MESMA largura: "Entrar com Google" ESTICA p/ igualar "Entrar com CodeDogfooding"
     (que era mais largo pelo texto). Os dois full-width, capados, centralizados. */
  #startForm .googleBtn, #loginScreen .googleBtn, #registerScreen .googleBtn,
  #startForm cdf-login-button, #loginScreen cdf-login-button { width:100%; max-width:360px; }
  /* Fallback do botao CDF: mostrado por JS se o custom element nao montar
     (script do CDF bloqueado / Referer ausente / dominio nao autorizado). */
  .cdfFallback[hidden] { display:none !important; }
  .cdfFallback .cdfMark { width:22px; height:22px; border-radius:5px; flex:0 0 auto; }
  /* Somente os botoes "Entrar" e "Entrar como Convidado" da tela de login
     ficam um pouco mais baixos (2 IDs vencem o "#loginScreen .primary"). */
  #loginScreen #btnLogin, #loginScreen #linkConvidadoL {
    height:46px; min-height:46px; }
  .swatches { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
  .swatch { width:40px; height:40px; border-radius:50%; cursor:pointer; border:3px solid transparent; }
  .swatch.sel { border-color:#fff; box-shadow:0 0 0 2px #f0a835; }
  .formaSel { display:flex; gap:10px; justify-content:center; margin:4px 0 14px; }
  .formaSel button { flex:0 0 auto; width:auto; padding:0 18px; height:56px; min-height:56px; font-size:16px; font-weight:var(--ctl-fw);
    background:#0e1730; border:2px solid #24304f; border-radius:12px; color:#c8d4ec; box-shadow:none; }
  .formaSel button.sel { border-color:#f0a835; color:#ffd27a; box-shadow:0 0 0 2px #f0a83540; }
  .playlist { text-align:left; max-height:120px; overflow:auto; border:1px solid #24304f;
    border-radius:10px; padding:6px 8px; margin-bottom:6px; }
  .playlist label { display:flex; align-items:center; gap:8px; font-size:13px; color:#c8d4ec;
    padding:4px 2px; margin:0; cursor:pointer; }
  .playlist .vazio { color:#8090b0; font-size:12px; padding:6px; }
  /* tela de escolha de pista */
  #trackScreen { position:fixed; inset:0; z-index:29; display:none; align-items:flex-start;
    justify-content:center; padding:20px; overflow:auto;
    background:radial-gradient(120% 90% at 50% 0%, #10193a 0%, #05070f 70%); }
  #trackScreen .card { width:100%; max-width:420px; background:rgba(12,18,36,.94);
    border:1px solid #24304f; border-radius:16px; padding:22px; text-align:center; }
  /* AVATAR: o card ocupa a viewport e a VITRINE 3D (preview do corredor no pedestal)
     toma todo o espaco livre. ROLAGEM VERTICAL PERMITIDA (barra oculta) quando o
     conteudo nao couber (ex.: celular deitado): o container rola e o card cresce
     alem da viewport em vez de clipar. Controles no topo e o "Continuar" no rodape. */
  #avatarScreen { position:fixed; inset:0; z-index:29; display:none; align-items:flex-start;
    justify-content:center; padding:16px; overflow-y:auto;
    background:radial-gradient(120% 90% at 50% 0%, #10193a 0%, #05070f 70%); }
  #avatarScreen .card { width:100%; max-width:420px; min-height:0; margin:auto;
    background:rgba(12,18,36,.94); border:1px solid #24304f; border-radius:16px;
    padding:18px; text-align:center; display:flex; flex-direction:column; gap:14px; overflow:visible; }
  #avatarScreen .card > * { margin:0; flex:0 0 auto; }
  /* #avatarScreen h1 -> estilo unico em .cf-title */
  #avatarScreen #catSel { margin:0; }
  /* Largura = maior nome de corredor (width:auto dimensiona o select nativo ao maior
     texto das opcoes); cap em 90vw para nao estourar no celular. Fonte grande p/ ler a distancia. */
  #avatarScreen .modeloDrop { width:auto; max-width:90vw; margin-inline:auto; align-self:center; height:60px; min-height:60px;
    background:#0e1730; border:2px solid #24304f; border-radius:12px; color:#e6edf3;
    font-size:var(--ctl-fs); font-weight:var(--ctl-fw); padding:0 52px 0 20px; cursor:pointer;
    text-align:center; text-align-last:center; -webkit-appearance:none; appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,#9fb0d0 50%),linear-gradient(135deg,#9fb0d0 50%,transparent 50%);
    background-position:calc(100% - 26px) 26px,calc(100% - 18px) 26px; background-size:8px 8px,8px 8px; background-repeat:no-repeat; }
  #avatarScreen .modeloDrop:focus-visible { outline:3px solid #ffd27a; outline-offset:2px; }
  /* NOMES das opcoes legiveis: o <select> nativo e estilizado para o tema ESCURO
     (color:#e6edf3), mas sem cor nas <option> a LISTA ABERTA usa o fundo CLARO do
     SO e o texto quase branco SOME ("nomes nao aparecem"). Fixa fundo escuro +
     texto claro nas opcoes de TODOS os seletores de modelo (avatar, wizard, lab). */
  .modeloDrop option, .modeloDrop optgroup { background:#0e1730; color:#e6edf3; }
  /* VITRINE: ocupa TODO o espaco restante (flex:1) - prioridade maxima da tela. */
  /* Preview da vitrine PREENCHE o vertical disponivel do card (escala por dispositivo):
     flex:1 cresce ate o espaco restante; min-height garante um tamanho minimo no celular. */
  #avatarScreen .vitrine { position:relative; flex:1 1 auto; min-height:160px; width:100%;
    border:1px solid #24304f; border-radius:14px; overflow:hidden;
    background:radial-gradient(120% 80% at 50% 10%, #0b1430 0%, #04060d 72%);
    box-shadow:inset 0 0 60px rgba(0,0,0,.6); }
  #avatarScreen .vitrine canvas { display:block; width:100%; height:100%; }
  #avatarScreen .vitrine .dica { position:absolute; left:0; right:0; bottom:8px; text-align:center;
    font-size:12px; color:#cfe0ff; pointer-events:none; text-shadow:0 1px 4px #000; letter-spacing:.3px; }
  #avatarScreen .btnAvatarOk, #avatarScreen .primary { margin-top:0; }
  /* PREPARE-SE: mesma moldura de overlay da avatarScreen; previa de camera com a
     deteccao de pose (esqueleto) desenhada no canvas, espelhada. Aviso informativo. */
  #prepScreen { position:fixed; inset:0; z-index:29; display:none; align-items:center; justify-content:center;
    padding:16px; overflow-y:auto; background:radial-gradient(120% 90% at 50% 0%, #10193a 0%, #05070f 70%); }
  /* card CABE EM UMA TELA: altura capada (desconta o header) e bordas (padding) iguais no
     topo e no fundo; o visualizador (.prepPreview) encolhe p/ o conjunto caber sem rolar. */
  #prepScreen .card { width:100%; max-width:460px; min-height:0;
    height:calc(100dvh - var(--cf-hdr-h,56px) - 48px);
    max-height:calc(100dvh - var(--cf-hdr-h,56px) - 48px);
    background:rgba(12,18,36,.94); border:1px solid #24304f; border-radius:16px;
    padding:18px; text-align:center; display:flex; flex-direction:column; gap:14px; overflow:visible; }
  #prepScreen .card > * { margin:0; flex:0 0 auto; }
  /* #prepScreen h1 -> estilo unico em .cf-title */
  #prepScreen .prepLead { color:#c8d4ec; font-size:16px; line-height:1.45; }
  #prepScreen .prepLead b { color:#ffd27a; }
  /* ilustracao das duas orientacoes: dois "aparelhos" (retangulos CSS) deitado e em pe. */
  #prepScreen .prepOri { display:flex; gap:26px; justify-content:center; align-items:flex-end; }
  #prepScreen .prepOriItem { display:flex; flex-direction:column; align-items:center; gap:6px;
    color:#c8d4ec; font-size:14px; font-weight:700; }
  #prepScreen .prepOriIco { display:block; border:3px solid #9fb0d0; border-radius:7px; position:relative; }
  #prepScreen .prepOriIco.land { width:56px; height:36px; }
  #prepScreen .prepOriIco.port { width:36px; height:56px; }
  #prepScreen .prepOriIco::after { content:""; position:absolute; background:#9fb0d0; border-radius:2px; }
  /* paisagem: camera na lateral; mostra as duas rotacoes (direita e o espelho, a esquerda) */
  #prepScreen .prepOriIco.land::after { width:4px; height:14px; right:4px; top:50%; transform:translateY(-50%); }
  #prepScreen .prepOriIco.land.mir::after { right:auto; left:4px; }
  /* retrato: camera no TOPO (nao invertida) */
  #prepScreen .prepOriIco.port::after { width:14px; height:4px; top:4px; left:50%; transform:translateX(-50%); }
  #prepScreen .prepOriPair { display:flex; gap:12px; align-items:center; }
  #prepScreen .prepPreview { position:relative; flex:1 1 auto; min-height:0; width:100%;
    border:1px solid #24304f; border-radius:14px; overflow:hidden; background:#05070f; }
  /* o <video> fica invisivel (so decodifica os frames); o esqueleto+imagem sao
     desenhados no canvas por cima, espelhados, igual a captura da corrida. */
  #prepScreen #prepVideo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
  #prepScreen #prepPoseCanvas { position:absolute; inset:0; width:100%; height:100%; display:block; background:#05070f; }
  #prepScreen .prepPreview .dica { position:absolute; left:0; right:0; bottom:8px; text-align:center;
    font-size:13px; color:#cfe0ff; text-shadow:0 1px 4px #000; pointer-events:none; }
  /* PAINEL: dashboard com botoes grandes (grid 2x2) dos tipos de relatorio; CABE EM 1 TELA. */
  #painelScreen { position:fixed; inset:0; z-index:29; display:none; align-items:center; justify-content:center;
    padding:16px; overflow-y:auto; background:radial-gradient(120% 90% at 50% 0%, #10193a 0%, #05070f 70%); }
  #painelScreen .card { width:100%; max-width:460px; min-height:0;
    max-height:calc(100dvh - var(--cf-hdr-h,56px) - 48px);
    background:rgba(12,18,36,.94); border:1px solid #24304f; border-radius:16px;
    padding:18px; text-align:center; display:flex; flex-direction:column; gap:14px; }
  #painelScreen .painelGrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  #painelScreen .painelBtn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    min-height:116px; padding:14px 10px; border:1px solid #24304f; border-radius:16px; color:#dbe6ff;
    background:linear-gradient(#182341,#0e1630); box-shadow:0 4px 0 #0b1226, 0 6px 16px rgba(0,0,0,.4);
    cursor:pointer; transition:transform .06s ease, box-shadow .06s ease, filter .1s; }
  #painelScreen .painelBtn:hover { filter:brightness(1.08); }
  #painelScreen .painelBtn:active { transform:translateY(4px) scale(.99); box-shadow:0 0 0 #0b1226, 0 2px 8px rgba(0,0,0,.4); }
  #painelScreen .pIco { font-size:30px; line-height:1; }
  #painelScreen .pNum b { font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; color:#ffd257; }
  #painelScreen .pNum i { font-style:normal; font-size:13px; color:#9fb0d0; margin-left:3px; }
  #painelScreen .pLbl { font-size:14px; color:#c8d4ec; font-weight:700; }
  /* Tema DIA (claro): Painel com fundo/cartoes/botoes claros das variaveis do tema. */
  html[data-theme="light"] #painelScreen { background:radial-gradient(120% 90% at 50% 0%, var(--cf-bg2) 0%, var(--cf-bg) 72%); }
  html[data-theme="light"] #painelScreen .card { background:var(--cf-panel); border-color:var(--cf-border); }
  html[data-theme="light"] #painelScreen .painelBtn { background:var(--cf-panel2); border-color:var(--cf-border); color:var(--cf-ink);
    box-shadow:0 4px 0 #c4ccd8, 0 6px 16px rgba(20,35,61,.12); }
  html[data-theme="light"] #painelScreen .painelBtn:active { box-shadow:0 0 0 #c4ccd8, 0 2px 8px rgba(20,35,61,.12); }
  html[data-theme="light"] #painelScreen .pLbl { color:var(--cf-ink2); }
  /* Tema DIA: demais telas que ainda ficavam escuras (Meus dados, Avatar, Escolher pista,
     Prepare-se, Relatorio, Academia). Fundo claro (gradiente dos tokens) + cartao claro. */
  html[data-theme="light"] #startForm,
  html[data-theme="light"] #trackScreen,
  html[data-theme="light"] #avatarScreen,
  html[data-theme="light"] #prepScreen,
  html[data-theme="light"] #report,
  html[data-theme="light"] #animLabScreen {
    background:radial-gradient(120% 90% at 50% 0%, var(--cf-bg2) 0%, var(--cf-bg) 72%); }
  html[data-theme="light"] #startForm .card,
  html[data-theme="light"] #trackScreen .card,
  html[data-theme="light"] #avatarScreen .card,
  html[data-theme="light"] #prepScreen .card,
  html[data-theme="light"] #report .card {
    background:var(--cf-panel); border-color:var(--cf-border); color:var(--cf-ink); }
  /* Campos de "Meus dados" claros no dia (o input escuro some no cartao claro). */
  html[data-theme="light"] #startForm input {
    background:var(--cf-bg2); border-color:var(--cf-border); color:var(--cf-ink); }
  html[data-theme="light"] #startForm label { color:var(--cf-ink2); }
  /* Avatar: botoes de categoria (Reais/Surreais) e o dropdown de nomes claros no dia;
     o selecionado mantem a borda dourada. A vitrine 3D segue escura (palco do preview). */
  html[data-theme="light"] .formaSel button { background:var(--cf-panel2); border-color:var(--cf-border); color:var(--cf-ink); }
  html[data-theme="light"] .formaSel button.sel { border-color:#f0a835; color:#b26a00; }
  html[data-theme="light"] #avatarScreen .modeloDrop,
  html[data-theme="light"] #avatarWzBody .modeloDrop {
    background:var(--cf-panel2); border-color:var(--cf-border); color:var(--cf-ink); }
  /* Avatar como PASSO 1 do wizard: a vitrine/controles perderam o seletor
     #avatarScreen ao serem movidos p/ dentro de #trackWizard. Reaplica o estilo no
     novo contexto, com ALTURA DEFINIDA (nao ha mais o pai flex:1 dando altura). */
  #avatarWzBody{ display:flex; flex-direction:column; gap:14px; }
  #avatarWzBody #catSel{ margin:0; }
  #avatarWzBody .modeloDrop{ width:100%; max-width:320px; margin-inline:auto; height:52px; min-height:52px;
    background:#0e1730; border:2px solid #24304f; border-radius:12px; color:#e6edf3; font-size:16px; font-weight:700;
    padding:0 40px 0 16px; cursor:pointer; text-align:center; text-align-last:center; -webkit-appearance:none; appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,#9fb0d0 50%),linear-gradient(135deg,#9fb0d0 50%,transparent 50%);
    background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
  #avatarWzBody .vitrine{ position:relative; width:100%; height:clamp(220px,42vh,420px); min-height:120px;
    border:1px solid #24304f; border-radius:14px; overflow:hidden;
    background:radial-gradient(120% 80% at 50% 10%, #0b1430 0%, #04060d 72%); box-shadow:inset 0 0 60px rgba(0,0,0,.6); }
  #avatarWzBody .vitrine canvas{ display:block; width:100%; height:100%; }
  #avatarWzBody .vitrine .dica{ position:absolute; left:0; right:0; bottom:8px; text-align:center; font-size:12px;
    color:#cfe0ff; pointer-events:none; text-shadow:0 1px 4px #000; letter-spacing:.3px; }
  /* LABORATORIO DE ANIMACOES (admin): pode rolar (mais controles que a vitrine). */
  #animLabScreen { position:fixed; inset:0; z-index:29; display:none; align-items:flex-start; justify-content:center;
    padding:16px; overflow:auto; background:radial-gradient(120% 90% at 50% 0%, #10193a 0%, #05070f 70%); }
  #animLabScreen .card { width:100%; max-width:460px; background:rgba(12,18,36,.94); border:1px solid #24304f;
    border-radius:16px; padding:16px; text-align:center; display:flex; flex-direction:column; gap:12px; }
  /* #animLabScreen h1 -> estilo unico em .cf-title */
  #animLabScreen .labHead { display:flex; align-items:center; justify-content:center; gap:8px; }
  #animLabScreen .labRow { display:flex; gap:10px; flex-wrap:wrap; }
  #animLabScreen .labLbl { display:flex; flex-direction:column; gap:4px; font-size:12px; color:#9fb0d0; flex:1 1 160px; text-align:left; }
  #animLabScreen .labSub { font-size:12px; color:#f0a835; font-weight:700; text-align:left; }
  #animLabScreen .labMapa { display:flex; flex-direction:column; gap:8px; border-top:1px solid #1b2742; padding-top:10px; }
  #animLabScreen .labMapaRow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; text-align:left; }
  #animLabScreen .labMapaRow .est { flex:0 0 auto; font-size:13px; color:#cfe0ff; font-weight:700; min-width:150px; }
  #animLabScreen .labMapaRow .est small { display:block; font-weight:400; color:#8fa6c8; font-size:11px; }
  #animLabScreen .labMapaRow select { flex:1 1 160px; min-width:140px; }
  #animLabScreen .labFaixa { flex:0 0 auto; display:flex; align-items:center; gap:4px; font-size:12px; color:#9fb0d0; }
  #animLabScreen .labFaixa input { width:56px; padding:6px 6px; border-radius:8px; border:1px solid #2c3a5e;
    background:#0e1836; color:#e6edf3; font-size:13px; text-align:center; }
  #animLabScreen .labFaixa input:disabled { opacity:.55; }
  #animLabScreen .vitrine { position:relative; height:340px; width:100%; border:1px solid #24304f; border-radius:14px;
    overflow:hidden; background:radial-gradient(120% 80% at 50% 10%, #0b1430 0%, #04060d 72%); }
  #animLabScreen .vitrine canvas { display:block; width:100%; height:100%; }
  #animLabScreen .vitrine .dica { position:absolute; left:0; right:0; bottom:8px; text-align:center; font-size:12px;
    color:#cfe0ff; text-shadow:0 1px 4px #000; pointer-events:none; }
  /* Mesmo padrao dos demais seletores: fundo escuro, raio 12, e a SETINHA de
     dropdown (dois gradientes) a direita -- antes estavam sem seta (pareciam caixa
     de texto, "fora do padrao"). */
  #animLabScreen .modeloDrop { width:100%; height:48px; min-height:48px; background-color:#0e1730; border:2px solid #24304f;
    border-radius:12px; color:#e6edf3; font-size:15px; font-weight:600; padding:0 40px 0 14px; -webkit-appearance:none; appearance:none; cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,#9fb0d0 50%),linear-gradient(135deg,#9fb0d0 50%,transparent 50%);
    background-position:calc(100% - 22px) 20px,calc(100% - 15px) 20px; background-size:8px 8px,8px 8px; background-repeat:no-repeat; }
  #animLabScreen .modeloDrop:focus-visible { outline:3px solid #ffd27a; outline-offset:2px; }
  /* #trackScreen h1 -> estilo unico em .cf-title */
  .tracks { display:flex; flex-direction:column; gap:10px; }
  .track { display:grid; grid-template-columns:44px 1fr auto; grid-template-rows:auto auto;
    align-items:center; gap:2px 12px; text-align:left; padding:12px 14px; cursor:pointer;
    background:#0e1730; border:2px solid #24304f; border-radius:12px; }
  .track.sel { border-color:#f0a835; box-shadow:0 0 0 2px #f0a83540; }
  .track .tIco { grid-row:1/3; font-size:28px; text-align:center; color:#9fd0ff; }
  .track .tNome { font-size:16px; font-weight:700; color:#e6edf3; }
  .track .tNivel { grid-column:3; grid-row:1; font-size:11px; font-weight:700; padding:2px 8px; border-radius:8px; }
  .tNivel.facil { background:#123f2a; color:#5ee08a; }
  .tNivel.medio { background:#3a3410; color:#ffd86a; }
  .tNivel.dificil { background:#3f1a1a; color:#ff8a8a; }
  .track .tDesc { grid-column:2/4; grid-row:2; font-size:12px; color:#9fb0d0; }
  /* Tema DIA: cards de opcao (pista/fantasma) claros; o selecionado mantem a borda dourada. */
  html[data-theme="light"] .track { background:var(--cf-panel2); border-color:var(--cf-border); color:var(--cf-ink); }
  html[data-theme="light"] .track.sel { border-color:#f0a835; }
  html[data-theme="light"] .track .tNome { color:var(--cf-ink); }
  html[data-theme="light"] .track .tDesc { color:var(--cf-ink2); }
  html[data-theme="light"] .track .tIco { color:#3b6ea5; }
  #trackScreen .primary { width:100%; margin-top:16px; padding:15px; font-size:var(--ctl-fs); }
  /* Seletor de fantasma de referencia (ghost pace pessoal/global/replay) */
  #ghostRefs { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:8px; }
  .gref { flex:1 1 45%; min-width:130px; padding:12px 8px; font-size:15px; border-radius:10px;
          background:#16234a; color:#c8d4ec; border:1px solid #26406e; cursor:pointer; transition:.12s; }
  .gref:hover { background:#1d2f5e; }
  .gref:active { transform:scale(.97); }
  .gref.sel { background:#3a2f10; color:#ffd77a; border-color:#f0a835; box-shadow:0 0 12px #f0a83566; }
  /* relatorio ao parar */
  #report { position:fixed; inset:0; z-index:28; display:flex; align-items:flex-start;
    justify-content:center; padding:20px; overflow:auto;
    background:radial-gradient(120% 90% at 50% 0%, #10193a 0%, #05070f 70%); }
  #report .card { width:100%; max-width:440px; background:rgba(12,18,36,.96);
    border:1px solid #24304f; border-radius:16px; padding:22px; text-align:center;
    box-sizing:border-box; }
  /* #report h1 -> estilo unico em .cf-title */
  #report .secTit { font-size:14px; color:#c8d4ec; text-align:left; margin:14px 0 8px; }
  .repResumo { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .repResumo .cell { background:#0e1730; border:1px solid #24304f; border-radius:10px; padding:10px; }
  .repResumo .cell small { display:block; color:#9fb0d0; font-size:11px; }
  .repResumo .cell b { color:#f0a835; font-size:20px; }
  /* Telemetria pos-corrida: ritmo (km/h) x distancia — voce vs fantasma */
  .telemetria { margin-top:12px; }
  .telemetria .telTit { font-size:14px; color:#c8d4ec; text-align:left; margin:0 0 6px; }
  .telemetria .telLeg { display:flex; gap:14px; justify-content:center; margin:6px 0 2px; font-size:12px; color:#c8d4ec; }
  .telemetria .telLeg i { display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:5px; }
  .telemetria svg { width:100%; height:auto; display:block; touch-action:pan-y; }
  .telemetria .telAxis { fill:#7f8db0; font-size:9px; }
  .telemetria .telGrid { stroke:#24304f; stroke-width:1; }
  .telemetria .telHint { color:#7f8db0; font-size:11px; text-align:center; margin-top:4px; }
  .tblWrap { max-height:200px; overflow:auto; }
  .repRank { width:100%; border-collapse:collapse; font-size:13px; }
  .repRank th, .repRank td { padding:7px 8px; text-align:left; border-bottom:1px solid #1f2a44; }
  .repRank th { color:#9fb0d0; font-weight:600; }
  .repRank tr.me { background:#2a2410; }
  .repRank tr.me td { color:#ffd28a; font-weight:700; }
  .repRank td.pos { text-align:center; width:36px; }
  #report .primary { flex:0 0 auto; width:clamp(200px,72%,300px); max-width:100%; margin:18px auto 0;
    padding:12px 34px; font-size:16px; display:block; }
  /* navegacao do relatorio: trocar avatar / trocar pista / correr de novo */
  /* multiplayer assincrono: link/codigo de desafio no relatorio */
  .repDesafio { margin:12px 0 0; text-align:center; font-size:14px; color:#c8d4ec; }
  .repDesafio .cod { font:800 24px/1.1 ui-monospace,'SF Mono',Menlo,Consolas,monospace; color:#ffd257; letter-spacing:3px; margin:6px 0; }
  .repDesafio .lnk { display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:6px; }
  .repDesafio input { flex:1; min-width:0; max-width:250px; padding:9px 10px; border-radius:8px; background:#0e1836; color:#dce6ff; border:1px solid #26406e; font-size:13px; }
  .repDesafio button.copiar { padding:9px 14px; border-radius:8px; background:#21335c; color:#dbe6ff; border:1px solid #26406e; cursor:pointer; font-size:13px; }
  .repDesafio button.copiar:hover { background:#2b4270; }
  .repNav { display:flex; flex-direction:column; gap:10px; justify-content:center; align-items:center; margin-top:16px; }
  /* Mesma tipografia do "Correr novamente" (#report .primary = 16px) em TODOS
     os botoes do relatorio, para o texto ficar igual entre eles. */
  .repNav .btnGhost { width:auto; margin-top:0; padding:12px 20px; white-space:nowrap; font-size:16px; }
  .repNav .primary { margin:0; width:auto; white-space:nowrap; font-size:16px; }
  /* "Desafiar amigo": MARROM CLARO, LARGURA PADRAO (= Correr novamente / Parar) e borda/bevel
     3D sombreado como os demais botoes de acao; o SOM ao clicar vem do blip global (todo button). */
  #btnDesafiar{ color:#3a2a17; background:linear-gradient(#e7c49a,#cfa271);
    box-shadow:0 4px 0 #9c7442, 0 6px 16px rgba(176,130,75,.35); font-weight:800;
    width:clamp(200px,72%,300px); max-width:100%; }
  #btnDesafiar:active{ box-shadow:0 0 0 #9c7442, 0 2px 8px rgba(176,130,75,.35); }
  /* ===== CARD com MARGEM SUPERIOR = INFERIOR em todas as telas de cartao =====
     margin:auto centraliza o card no espaco disponivel (ambos os eixos, scroll-safe: quando
     o card e mais alto que a area, as margens colapsam e ele rola sem cortar o topo). O
     padding-bottom:16px casa o respiro do topo (padding-top ja reserva o header + 16),
     entao a folga ACIMA e ABAIXO do card fica igual. (Avatar/Prepare-se/Painel ja estavam
     simetricos e tem preenchimento proprio -> fora desta regra. Landing tem topbar + card
     + rodape fixo, ancorado ao topo de proposito -> tambem fora.) */
  #startForm, #loginScreen, #registerScreen, #trackScreen, #report { padding-bottom:16px; }
  #startForm > .card, #loginScreen > .card, #registerScreen > .card,
  #trackScreen > .card, #report > .card { margin:auto; }
  /* Aviso de ZONA do fantasma (antecipa onde o recorde acelerou/segurou o ritmo).
     Overlay in-race, centralizado no topo; some quando o ghost esta oculto. */
  /* Aviso de mudanca de ZONA: CENTRALIZADO na tela (vertical + horizontal) e com
     fonte GRANDE, para aparecer em destaque no meio da corrida. */
  #zonaAviso { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.92);
    z-index:40; pointer-events:none; opacity:0; transition:opacity .25s, transform .25s;
    display:flex; align-items:center; gap:14px; padding:16px 28px; border-radius:999px;
    font:800 30px/1 system-ui,sans-serif; letter-spacing:.3px; white-space:nowrap;
    background:rgba(8,14,30,.78); border:2px solid #26406e; box-shadow:0 6px 28px rgba(0,0,0,.5);
    backdrop-filter:blur(6px); text-align:center; }
  #zonaAviso.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
  #zonaAviso .zIco { font-size:44px; }
  #zonaAviso .zDist { opacity:.85; font-weight:700; }
  #zonaAviso.acel { color:#7be08a; border-color:#2f6b3a; }
  #zonaAviso.freia { color:#e0b45a; border-color:#6b5320; }
  @media (max-width:520px){ #zonaAviso { font-size:24px; padding:13px 20px; gap:10px; } #zonaAviso .zIco{font-size:34px;} }
  /* Flash de SETOR/PARCIAL: aparece ~1,6s ao cruzar um checkpoint (parcial + delta vs recorde).
     Fica um pouco abaixo do #zonaAviso p/ nao colidir. */
  #setorFlash { position:fixed; left:50%; top:120px; transform:translateX(-50%) translateY(-6px);
    z-index:41; pointer-events:none; opacity:0; transition:opacity .25s, transform .25s;
    display:flex; align-items:center; gap:10px; padding:8px 16px; border-radius:999px;
    font:700 15px/1 system-ui,sans-serif; letter-spacing:.2px; white-space:nowrap;
    background:rgba(8,14,30,.78); border:1px solid #26406e; box-shadow:0 2px 14px rgba(0,0,0,.4);
    backdrop-filter:blur(6px); color:#dbe6ff; }
  #setorFlash.show { opacity:1; transform:translateX(-50%) translateY(0); }
  #setorFlash .sfSet { color:#8fd6ff; }
  #setorFlash .sfParc { font-variant-numeric:tabular-nums; }
  #setorFlash .sfDelta { font-variant-numeric:tabular-nums; font-weight:800; }
  #setorFlash.ahead .sfDelta { color:#42e06a; }
  #setorFlash.behind .sfDelta { color:#f0b429; }
  @media (max-width:520px){ #setorFlash { font-size:13px; top:104px; padding:7px 13px; gap:7px; } }
  /* tabela de parciais: linha do setor colorida conforme o delta vs recorde */
  #repParciais tr.setAhead td:last-child { color:#42e06a; font-weight:700; }
  #repParciais tr.setBehind td:last-child { color:#f0b429; font-weight:700; }
  /* Retencao: faixa de sequencia (tela inicial) + bloco comemorativo (relatorio) */
  .streakBanner { background:linear-gradient(90deg,#3a2a10,#241a08); border:1px solid #6b4e18;
    color:#ffd98a; border-radius:12px; padding:10px 12px; font-size:15px; margin:0 0 14px; }
  .streakBanner b { color:#ffcf5a; font-size:20px; }
  .celebra { margin-bottom:14px; }
  .celebra .cStreak { font-size:20px; color:#ffd98a; }
  .celebra .cStreak b { color:#ffcf5a; font-size:30px; }
  .celebra .cBadge { display:inline-block; margin-top:8px; padding:6px 12px; border-radius:10px;
    background:#123f2a; color:#5ee08a; font-weight:800; font-size:14px; }
  .celebra .cBadge.novo { background:#3a2f10; color:#ffd86a; }
  .celebra .cFrase { margin-top:10px; color:#c8d4ec; font-size:14px; line-height:1.4; }
  /* CELULAR/TABLET DEITADO (paisagem, altura curta): adapta como desktop -
     widgets dos cantos dimensionados pela ALTURA; HUD em uma linha; toggles
     ao lado da camera (nao colidem com os botoes de baixo). */
  @media (orientation:landscape) and (max-height:560px){
    /* cantos dimensionados pela ALTURA (34vh de alto -> 25.5vh de largura);
       as variaveis carregam essa largura p/ o HUD e o botao de musica seguirem */
    :root { --mapW: 36vh; --camW: var(--mapW); }
    .tgl { width:46px; height:46px; font-size:22px; }
    .stat { padding:6px 12px; }
    .stat b { font-size:clamp(24px,5.6vh,38px); }
    #controls { bottom:8px; }
    #controls button { min-height:48px; font-size:16px; }
  }

  /* ============================================================
     ACESSIBILIDADE — textos e controles GRANDES (publico idoso).
     Bloco de override no fim p/ vencer os tamanhos fixos acima sem
     reescrever cada regra. Ajuste central de tamanho aqui.
     ============================================================ */
  #startForm .sub, #avatarScreen .sub { font-size:17px !important; line-height:1.5; }
  #startForm label, .playlist label { font-size:17px !important; }
  #startForm input, #avatarScreen input { font-size:19px !important; padding:15px !important; }
  #avatarScreen .secTit { font-size:18px !important; }
  /* titulos padronizados em .cf-title (sem override de tamanho por tela no mobile) */
  .track .tNome { font-size:19px !important; }
  .track .tDesc { font-size:15px !important; }
  .track .tNivel { font-size:13px !important; }
  #startForm .dica, #avatarScreen .dica { font-size:14px !important; }
  .swatch { width:52px !important; height:52px !important; }   /* alvo de toque maior */

  /* ---- Rodape legal do CDF (policy-terms.js injeta .cdf-policy-links no <footer>) ----
     Barra discreta fixada no rodape, ACIMA das telas de entrada (z-index 40 >
     startForm/login/register que sao 30) para os links legais ficarem clicaveis
     no login. Some durante o jogo (body.cf-ingame) para nao cobrir os controles.
     Miramos o <footer> que CONTEM os links (o modulo monta no footer existente). */
  footer:has(.cdf-policy-links) { position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:flex; justify-content:center; align-items:center; padding:6px 12px; margin:0;
    background:rgba(4,6,15,.82); backdrop-filter:blur(4px);
    border-top:1px solid rgba(240,168,53,.22); font-size:12px; line-height:1.3; }
  .cdf-policy-links { display:flex; flex-wrap:wrap; justify-content:center;
    gap:6px 8px; color:#9fb0c8; text-align:center; }
  .cdf-policy-links a, .cdf-policy-privacy, .cdf-policy-terms, .cdf-cookies-link {
    color:#cdd8e8; text-decoration:none; cursor:pointer; }
  .cdf-policy-links a:hover, .cdf-policy-privacy:hover, .cdf-policy-terms:hover,
  .cdf-cookies-link:hover { color:#f0a835; text-decoration:underline; }
  /* FIX cliques: o rodape (fixed, largura total, z-index 40) cobria os toggles de
     corrida nos cantos inferiores (📷 camera / 🗺️ minimapa, z-index 4) e COMIA o
     clique. O container do rodape deixa de capturar ponteiro; SO os links legais
     seguem clicaveis -> o clique em area vazia do rodape cai nos toggles embaixo. */
  footer:has(.cdf-policy-links), .cdf-policy-links { pointer-events:none; }
  .cdf-policy-links a, .cdf-policy-links .cdf-policy-privacy,
  .cdf-policy-links .cdf-policy-terms, .cdf-policy-links .cdf-cookies-link { pointer-events:auto; }
  body.cf-ingame footer:has(.cdf-policy-links) { display:none; }
  /* Mobile (<=767px): os 3 links legais caem juntos numa linha quebrada. */
  @media (max-width:767px){
    footer:has(.cdf-policy-links) { font-size:11px; }
    .cdf-policy-links .cdf-policy-sep:has(+ .cdf-policy-privacy){
      flex-basis:100% !important; min-width:0 !important; height:0 !important;
      margin:0 !important; opacity:0 !important; pointer-events:none !important; }
  }
  /* ===== Menu hamburguer (estilo CDF, enxuto): abre pela ESQUERDA, trava o scroll do fundo ===== */
  .cfnav-burger{ position:fixed; top:calc((var(--cf-hdr-h) - 46px)/2); left:10px; z-index:55; width:46px; height:46px; min-height:0;
    padding:0; border-radius:12px; border:1px solid #24304f; background:rgba(8,14,30,.82); color:#e6edf3;
    cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; }
  .cfnav-burger svg{ width:24px; height:24px; }
  .cfnav-burger[hidden]{ display:none !important; }
  .cfnav-overlay{ position:fixed; inset:0; z-index:70; background:rgba(4,8,16,.58); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .2s; }
  .cfnav-overlay.open{ opacity:1; pointer-events:auto; }
  .cfnav-drawer{ position:fixed; top:0; left:0; bottom:0; z-index:71; width:min(86vw,320px);
    background:rgba(10,16,32,.98); border-right:1px solid #24304f; transform:translateX(-100%);
    transition:transform .22s ease; display:flex; flex-direction:column; max-height:100dvh; overscroll-behavior:contain; }
  .cfnav-drawer.open{ transform:translateX(0); }
  /* Rotulo EMPURRADO para a direita do fechar: o fechar (fixo, 46px em left:10)
     ocupa o canto; padding-left = 10(left) + 46(largura) + 12(folga). */
  /* Cabecalho CENTRALIZADO com o fantasma dourado (favicon); altura maior p/ acomodar
     o botao de fechar (46px @ top:10). Padding lateral simetrico (>= largura do fechar)
     p/ o titulo ficar centrado sem colidir com o X a esquerda. */
  /* Altura IGUAL a do header do topo (var(--cf-hdr-h)); logo centralizado
     verticalmente e dimensionado pela ALTURA para caber na barra. */
  /* Logo ALINHADO A ESQUERDA na MESMA posicao do header do topo (10 pad + 52
     margem + 1 borda + 8 pad = 71px), p/ nao deslocar ao abrir/fechar o menu. */
  .cfnav-head{ display:flex; align-items:center; justify-content:flex-start; gap:8px;
    height:var(--cf-hdr-h); box-sizing:border-box;
    padding:0 16px 0 71px; border-bottom:1px solid #1b2742; }
  .cfnav-head b{ color:#f0a835; font-size:18px; }
  .cfnav-head .cfnav-logo{ width:28px; height:28px; flex:0 0 auto; }
  /* logotipo completo (icone + texto) no cabecalho do menu */
  .cfnav-head .cfnav-logo-full{ height:var(--cf-logo-h); max-width:78%;
    display:flex; align-items:center; }
  .cfnav-head .cfnav-logo-full img,
  .cfnav-head .cfnav-logo-full svg{ height:100%; width:auto; max-width:100%; display:block; }
  /* Logo do menu com a MESMA pilula/borda do header (.cfTop-brand) + clicavel (vai p/ a landing). */
  /* Pilula do logo IDENTICA a do header do topo (.cfTop-brand): mesmo padding/borda/raio,
     p/ caber na altura var(--cf-hdr-h) sem estourar o cabecalho do menu. */
  #cfnavLogo{ background:#0b1020; border:1px solid var(--cf-border); border-radius:12px;
    padding:1px 12px 1px 8px; box-sizing:content-box; cursor:pointer; }
  html[data-theme="light"] #cfnavLogo{ background:#f6f8fc; border-color:#9fb1cf; }
  /* logo inline segue o toggle manual de tema (html[data-theme]) */
  .cfnav-logo-full .cf-fill{ fill:url(#ouroTxt); stroke:#7a3d00; stroke-width:2; }
  .cfnav-logo-full .cf-glow{ filter:url(#glow); }
  html[data-theme="light"] .cfnav-logo-full .cf-fill{ stroke:#5a2c00; stroke-width:2.4; }
  html[data-theme="light"] .cfnav-logo-full .cf-glow{ filter:none; }
  /* tema claro: cabecalho do menu em off-white; emblema em tile branco com borda leve */
  html[data-theme="light"] .cfnav-head{ background:#f6f8fc; border-bottom-color:var(--cf-border); }
  html[data-theme="light"] .cfnav-logo-full .cf-badge{ fill:#ffffff; stroke:#c4d0e4; stroke-width:1.2; }
  /* Fechar EXATAMENTE sobre o hamburguer (mesmo ponto/tamanho: o mesmo ponto da
     tela alterna abrir/fechar). Fica FORA do drawer (nao sofre o transform do painel)
     e so aparece com o menu aberto. */
  .cfnav-close{ position:fixed; top:calc((var(--cf-hdr-h) - 46px)/2); left:10px; z-index:72; display:none;
    width:46px; height:46px; min-height:0; padding:0; border-radius:12px; border:1px solid #2c3a5e;
    background:#131f3a; color:#cfe0ff; font-size:18px; cursor:pointer; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.4); transition:background .12s,color .12s,border-color .12s; }
  body.cfnav-lock .cfnav-close{ display:flex; }
  .cfnav-close:hover{ background:#c0392b; color:#fff; border-color:#c0392b; }
  .cfnav-links{ padding:8px; overflow:auto; display:flex; flex-direction:column; gap:8px; }
  .cfnav-link{ flex:0 0 auto; display:flex; align-items:center; gap:12px; width:100%; text-align:left; min-height:52px;
    padding:0 14px; border-radius:12px; border:1px solid #1e2a48; background:#0e1730; color:#dfe8fb;
    font-size:16px; font-weight:600; cursor:pointer; box-shadow:none; }
  .cfnav-link:hover{ border-color:#f0a83570; filter:brightness(1.06); }
  .cfnav-link .ic{ font-size:20px; width:24px; text-align:center; flex:0 0 auto; }
  .cfnav-sub{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#7f93b8; padding:12px 12px 2px; }
  body.cfnav-lock{ overflow:hidden; }
  /* ===== Tema claro (dia): o menu hamburguer INTEIRO fica claro (nao so o
     cabecalho). Usa os tokens --cf-* p/ bater com o resto da UI. O X de fechar
     mantem o hover vermelho; o overlay/backdrop segue escurecendo o fundo. ===== */
  html[data-theme="light"] .cfnav-burger{ background:var(--cf-panel2); color:var(--cf-ink);
    border-color:var(--cf-border); box-shadow:0 4px 14px rgba(20,35,61,.14); }
  html[data-theme="light"] .cfnav-drawer{ background:var(--cf-bg2); border-right-color:var(--cf-border); }
  html[data-theme="light"] .cfnav-close{ background:var(--cf-panel2); color:var(--cf-ink); border-color:var(--cf-border); }
  html[data-theme="light"] .cfnav-link{ background:var(--cf-panel2); border-color:var(--cf-border); color:var(--cf-ink); }
  html[data-theme="light"] .cfnav-sub{ color:var(--cf-mut); }

  /* ==========================================================================
     LAYOUT DE MARKETING estilo SimplesBio (header + landing + precos + teste
     gratis). Fundo NAVY predominante; tema dia/noite funcional via
     html[data-theme]; tokens em :root p/ trocar o esquema sem duplicar regras.
     Escopo isolado (prefixo cf-/#cfTop/#precosScreen/#testeGratisScreen): NAO
     toca o HUD/jogo. ========================================================= */
  :root{
    --cf-bg:#04060f; --cf-bg2:#0a1226; --cf-panel:rgba(12,18,36,.92);
    --cf-panel2:#0e1730; --cf-border:#24304f; --cf-ink:#e6edf3; --cf-ink2:#c8d4ec;
    --cf-mut:#9fb0d0; --cf-gold:#f0a835; --cf-gold2:#ffc65a;
    --cf-coral:#ff6b5b; --cf-coral2:#ff8e73; --cf-yellow:#f0b429; --cf-yellow2:#ffd257;
    --cf-hdr-h:60px;
    /* Altura do logotipo completo dimensionada p/ o ICONE (quadrado do fantasma,
       ~84% da altura do logo) bater com o botao hamburguer (46px): 46/0.843=54.6. */
    --cf-logo-h:54.6px;
  }
  html[data-theme="light"]{
    --cf-bg:#eef2f8; --cf-bg2:#ffffff; --cf-panel:#ffffff;
    --cf-panel2:#f4f7fc; --cf-border:#d5deec; --cf-ink:#16233d; --cf-ink2:#2c3e5e;
    --cf-mut:#5a6c88;
  }
  /* Cabecalho fixo (marca a esq; controles a dir). Fica ACIMA das telas publicas
     (z-index 40 > telas 30/31); escondido durante o jogo/overlays via .cf-nohdr. */
  #cfTop{ position:fixed; top:0; left:0; right:0; height:var(--cf-hdr-h); z-index:40;
    display:none; align-items:center; justify-content:space-between; gap:10px;
    padding:8px max(10px,env(safe-area-inset-left)) 8px max(10px,env(safe-area-inset-right));
    background:linear-gradient(180deg,var(--cf-bg2),color-mix(in srgb,var(--cf-bg2) 82%,transparent));
    border-bottom:1px solid var(--cf-border); backdrop-filter:blur(6px); }
  body.cf-public #cfTop{ display:flex; }
  body.cf-public.cf-nohdr #cfTop{ display:none; }
  body.cf-public.cf-nohdr .cfnav-burger{ display:none !important; }
  /* RELATORIO: exibe o header (marca + perfil/tema/idioma) e o hamburguer, como
     nas telas publicas. O card ganha espaco p/ nao ficar sob o header. */
  body.cf-report #cfTop{ display:flex; }
  body.cf-report #report{ padding-top:calc(var(--cf-hdr-h) + 16px); }
  /* margin-left reserva o espaco do hamburguer fixo (left:10 + 46 de largura),
     para a marca ficar AO LADO do menu, nunca abaixo/sobreposta. */
  .cfTop-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; min-width:0;
    margin-left:52px;
    background:#0b1020; border:1px solid var(--cf-border); border-radius:12px; padding:1px 12px 1px 8px; }
  /* Tema claro (dia): a marca ganha FUNDO OFF-WHITE suave e borda mais visivel. */
  html[data-theme="light"] .cfTop-brand{ background:#f6f8fc; border-color:#9fb1cf; }
  /* Logo completo (icone + texto) dimensionado pela ALTURA, centralizado na barra
     de 60px — mesma regra do cabecalho do menu, para os dois baterem. */
  .cfTop-brand img,
  .cfTop-brand svg{ height:var(--cf-logo-h); width:auto; max-width:60vw; flex:0 0 auto; display:block; }
  /* logo INLINE da marca segue o toggle manual de tema (html[data-theme]) */
  .cfTop-brand .cf-fill{ fill:url(#ouroTxt); stroke:#7a3d00; stroke-width:2; }
  .cfTop-brand .cf-glow{ filter:url(#glow); }
  html[data-theme="light"] .cfTop-brand .cf-fill{ stroke:#5a2c00; stroke-width:2.4; }
  html[data-theme="light"] .cfTop-brand .cf-glow{ filter:none; }
  /* tema claro: emblema do icone em tile branco com BORDA leve (nao some no off-white) */
  html[data-theme="light"] .cfTop-brand .cf-badge{ fill:#ffffff; stroke:#c4d0e4; stroke-width:1.2; }
  .cfTop-ctrls{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
  /* Botao redondo (tema) + gatilho da pilula: circulo com a MESMA borda da UI. */
  .cfCtl{ width:44px; height:44px; min-height:0; padding:0; flex:0 0 auto; border-radius:50%;
    display:flex; align-items:center; justify-content:center; background:var(--cf-panel2);
    border:1px solid var(--cf-border); color:var(--cf-ink); box-shadow:none; font-size:20px; }
  .cfCtl:hover{ filter:brightness(1.08); }
  .cfCtl svg{ width:22px; height:22px; }
  #cfTheme .ico-moon{ display:none; } html[data-theme="dark"] #cfTheme .ico-sun{ display:none; }
  html[data-theme="dark"] #cfTheme .ico-moon{ display:block; }
  /* Perfil (so logado): avatar + nome que encolhe. */
  .cfUser{ display:none; align-items:center; gap:7px; max-width:150px; background:var(--cf-panel2);
    border:1px solid var(--cf-border); border-radius:22px; padding:4px 12px 4px 6px; min-height:44px; color:var(--cf-ink); }
  body.cf-authed .cfUser{ display:flex; }
  /* Na landing (marketing) o perfil NAO aparece: o visitante ainda nao tem dados. */
  body[data-cf-screen="landing"] .cfUser{ display:none !important; }
  .cfUser .av{ width:30px; height:30px; border-radius:50%; background:#21335c; display:flex;
    align-items:center; justify-content:center; font-size:16px; flex:0 0 auto; }
  .cfUser .nm{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Pilula de idioma (self-contained; bandeira + nome; retrato = so bandeira). */
  .cfLang{ position:relative; flex:0 0 auto; }
  .cfLang-btn{ width:auto; min-height:44px; padding:0 12px; border-radius:22px; display:flex; gap:8px;
    align-items:center; background:var(--cf-panel2); border:1px solid var(--cf-border); color:var(--cf-ink);
    box-shadow:none; font-size:14px; font-weight:600; }
  .cfLang-btn .fl{ font-size:18px; line-height:1; }
  .cfLang-menu{ position:absolute; top:calc(100% + 6px); right:0; min-width:150px; z-index:60;
    background:var(--cf-panel); border:1px solid var(--cf-border); border-radius:12px; padding:6px;
    box-shadow:0 12px 30px rgba(0,0,0,.45); display:none; }
  .cfLang.open .cfLang-menu{ display:block; }
  .cfLang-menu button{ width:100%; min-height:42px; justify-content:flex-start; gap:10px; text-align:left;
    padding:0 12px; border-radius:9px; background:transparent; border:1px solid transparent; color:var(--cf-ink);
    box-shadow:none; font-size:15px; font-weight:600; }
  .cfLang-menu button:hover{ background:var(--cf-panel2); }
  .cfLang-menu button[aria-current="true"]{ border-color:var(--cf-gold); }
  @media (max-width:620px) and (orientation:portrait){
    .cfLang-btn .nm{ display:none; } .cfLang-btn{ width:44px; padding:0; justify-content:center; border-radius:50%; }
    /* Perfil: so o circulo com o icone (sem nome), igual ao tema e a pilula de idioma. */
    .cfUser .nm{ display:none; } .cfUser{ width:44px; padding:0; justify-content:center; border-radius:50%; }
    .cfUser .av{ margin:0; }
  }
  /* Celular na vertical estreito: a pilula de tema encostaria no texto do logo.
     Entao mostra SO o icone do fantasma (esconde o texto da marca e recorta o
     span na largura do icone). O SVG e inline (ver i18n.js), por isso o texto
     tem a classe .cf-brandtext e pode ser escondido. */
  @media (max-width:430px) and (orientation:portrait){
    .cfTop-brand .cf-brandtext{ display:none; }
    /* Logo compacto (so o icone) com o MESMO tamanho do botao hamburguer (46px):
       icone 44px + 1px de borda de cada lado = pilula de 46px, igual ao burger. */
    #cfBrandLogo{ display:block; width:44px; overflow:hidden; }
    .cfTop-brand{ padding:0 6px; }
    .cfTop-brand img, .cfTop-brand svg{ height:44px; max-width:none; }
  }
  /* As telas publicas ganham espaco p/ o header e o esquema navy via tokens. */
  body.cf-public #landing, body.cf-public #loginScreen, body.cf-public #registerScreen,
  body.cf-public #startForm, #precosScreen, #testeGratisScreen{
    padding-top:calc(var(--cf-hdr-h) + 16px);
    background:radial-gradient(120% 90% at 50% 0%, var(--cf-bg2) 0%, var(--cf-bg) 72%); }

  /* ----- Landing nova (modelo da imagem) ----- */
  /* topbar + card empilham em COLUNA, ancorados ao TOPO (justify-content:flex-start
     evita o centramento vertical que abria um vao vazio antes do "Ja tem conta"). */
  #landing{ flex-direction:column; align-items:center; justify-content:flex-start; gap:10px;
    padding-top:calc(var(--cf-hdr-h) + 8px);
    /* folga inferior = altura REAL do rodape fixo (--cf-ftr-h, medida em JS) + 8px,
       a MESMA folga de 8px que o card tem para o header em cima. Assim o scroll
       alcanca a borda de baixo do card sem o rodape cobri-la. Fallback 72px cobre
       o rodape de 2 linhas no celular ate o JS medir. */
    padding-bottom:calc(var(--cf-ftr-h, 72px) + 8px); }
  #landing .lpTopbar{ margin:0; }
  #landing .lpTopbar{ width:100%; max-width:460px; display:flex; justify-content:flex-start;
    gap:8px; align-items:center; margin:0 0 6px; }
  /* Botao "Entrar" no topo: mesmo modelo (sombra + clique com som, herdados do
     button base + blip global), cor AZUL p/ diferenciar dos CTAs coral/amarelo. */
  .cfBtnEntrar{ color:#06243a; background:linear-gradient(var(--cf-blue2,#7cc4ff),var(--cf-blue,#3a9bff));
    box-shadow:0 4px 0 #1f5c96, 0 6px 16px rgba(58,155,255,.35); font-weight:800; padding:10px 22px; }
  .cfBtnEntrar:active{ box-shadow:0 0 0 #1f5c96, 0 2px 8px rgba(58,155,255,.35); }
  #landing .card{ background:var(--cf-panel); border-color:var(--cf-border); }
  #landing h1{ color:var(--cf-gold); }
  #landing .lpHooks li{ background:var(--cf-panel2); border-color:var(--cf-border); color:var(--cf-ink); }
  /* CTAs coloridos da imagem: laranja (teste) em cima, amarelo (precos) embaixo. */
  .cfBtnTrial{ color:#3a1206; background:linear-gradient(var(--cf-coral2),var(--cf-coral));
    box-shadow:0 4px 0 #b23c2c, 0 6px 16px rgba(255,107,91,.35); }
  .cfBtnTrial:active{ box-shadow:0 0 0 #b23c2c, 0 2px 8px rgba(255,107,91,.35); }
  .cfBtnPrecos{ color:#3a2b00; background:linear-gradient(var(--cf-yellow2),var(--cf-yellow));
    box-shadow:0 4px 0 #a8830f, 0 6px 16px rgba(240,180,41,.35); }
  .cfBtnPrecos:active{ box-shadow:0 0 0 #a8830f, 0 2px 8px rgba(240,180,41,.35); }
  /* "Ver demonstracao": cor VERDE (4a cor, distinta do azul/coral/amarelo),
     com borda e o MESMO efeito 3D (sombra 0 4px 0 + :active afunda) dos CTAs. */
  #landing .lpCta #btnDemo{ color:#042a22; border:2px solid #0b4536;
    background:linear-gradient(#5fe3b7,#22c08a);
    box-shadow:0 4px 0 #157a58, 0 6px 16px rgba(34,192,138,.35); font-weight:800; }
  #landing .lpCta #btnDemo:active{ box-shadow:0 0 0 #157a58, 0 2px 8px rgba(34,192,138,.35); }
  #landing .lpCta{ align-items:center; }
  /* "Ver demonstracao" com a MESMA largura dos CTAs acima (max 300, centralizado). */
  #landing .lpCta .cfBtnEntrar, #landing .lpCta .cfBtnTrial, #landing .lpCta .cfBtnPrecos, #landing .lpCta #btnDemo{ width:100%; max-width:300px; margin-inline:auto; }
  /* Tela de precos: TODOS os botoes de plano na MESMA altura padrao (= plano Atleta):
     min-height do button base (60px) + centralizacao, independente do texto do CTA. */
  /* flex:0 0 auto ANULA o button{flex:1} global (que faria o CTA ESTICAR p/ preencher o
     card e deixava "Comecar gratis" mais alto que "Assinar" quando o card tinha menos itens).
     Com altura FIXA de 60px e sem crescer, os tres CTAs ficam exatamente iguais. */
  #precosScreen [data-cf-assinar]{ flex:0 0 auto; height:60px; min-height:60px; width:100%; display:inline-flex;
    align-items:center; justify-content:center; white-space:nowrap; }   /* altura FIXA -> "Comecar gratis" = "Assinar" */

  /* ----- Preco / planos (modelo SimplesBio; dados ficticios) ----- */
  #precosScreen, #testeGratisScreen{ position:fixed; inset:0; z-index:31; display:none;
    align-items:flex-start; justify-content:center; overflow:auto;
    padding:calc(var(--cf-hdr-h) + 16px) 20px 28px; }
  #precosScreen .cf-wrap{ width:100%; max-width:1040px; display:flex; flex-direction:column; gap:18px; }
  #precosScreen .cf-head{ text-align:center; }
  /* #precosScreen .cf-head h1 -> estilo unico em .cf-title */
  #precosScreen .cf-head p{ color:var(--cf-ink2); font-size:15px; margin:0; }
  .cf-plan-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
  .cf-plan-card{ background:var(--cf-panel); border:1px solid var(--cf-border); border-radius:18px;
    padding:22px 18px; display:flex; flex-direction:column; gap:12px; text-align:center; position:relative; }
  .cf-plan-card.pop{ border-color:var(--cf-gold); box-shadow:0 0 0 1px var(--cf-gold), 0 10px 30px rgba(240,168,53,.18); }
  .cf-plan-badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); white-space:nowrap;
    background:linear-gradient(var(--cf-gold2),var(--cf-gold)); color:#241300; font-size:12px; font-weight:800;
    padding:4px 12px; border-radius:20px; }
  .cf-plan-name{ font-size:20px; font-weight:800; color:var(--cf-ink); }
  .cf-plan-price{ font-size:34px; font-weight:800; color:var(--cf-gold); line-height:1; }
  .cf-plan-price small{ font-size:14px; color:var(--cf-mut); font-weight:600; }
  .cf-plan-feats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; text-align:left; }
  .cf-plan-feats li{ display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--cf-ink2); line-height:1.35; }
  .cf-plan-feats li::before{ content:"✓"; color:#54d18c; font-weight:800; flex:0 0 auto; }
  /* Botoes dos cards de plano UNIFORMES: mesma largura e altura nos 3, alinhados
     na BASE do card (margin-top:auto) e centrados. Vence o .primary{width:auto}. */
  .cf-plan-card button{ width:100%; max-width:240px; min-height:54px; margin:auto auto 0;
    align-self:center; }
  #precosScreen .cf-nav{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
  /* Botoes padronizados Voltar/Entrar na nav (nao esticam full-width; tamanho pelo conteudo). */
  #precosScreen .cf-nav .cfBtnVoltar, #precosScreen .cf-nav .cfBtnEntrar{ flex:0 0 auto; width:auto; }
  /* Botao "Voltar ao inicio" padrao: modelo base (sombra + clique com som) em tom NEUTRO. */
  .cfBtnVoltar{ color:#e6edf3; background:linear-gradient(#2a3652,#1a2236);
    box-shadow:0 4px 0 #0c1226, 0 6px 16px rgba(0,0,0,.4); font-weight:800; }
  .cfBtnVoltar:active{ box-shadow:0 0 0 #0c1226, 0 2px 8px rgba(0,0,0,.4); }
  /* Linha do "Entrar" no cadastro: centraliza o botao padronizado. */
  .cf-entrar-row{ display:flex; justify-content:center; }

  /* ----- Teste gratis (modelo SimplesBio) ----- */
  #testeGratisScreen .card{ width:100%; max-width:440px; background:var(--cf-panel);
    border:1px solid var(--cf-border); border-radius:18px; padding:26px 22px; text-align:center;
    display:flex; flex-direction:column; gap:16px; box-sizing:border-box; }
  #testeGratisScreen h1{ color:var(--cf-gold); font-size:28px; margin:0; }
  #testeGratisScreen .tg-price{ font-size:34px; font-weight:800; color:var(--cf-gold); }
  #testeGratisScreen .tg-price small{ font-size:15px; color:var(--cf-mut); font-weight:600; display:block; }
  #testeGratisScreen .tg-benefits{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; text-align:left; }
  #testeGratisScreen .tg-benefits li{ display:flex; gap:10px; align-items:flex-start; background:var(--cf-panel2);
    border:1px solid var(--cf-border); border-radius:12px; padding:11px 13px; font-size:14px; color:var(--cf-ink); line-height:1.4; }
  #testeGratisScreen .tg-nav{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; color:var(--cf-ink2); font-size:14px; }
  #testeGratisScreen .tg-nav a{ color:var(--cf-gold2); font-weight:700; text-decoration:underline; cursor:pointer; }
  /* Botao "Criar e Ativar Conta" desabilitado (ate marcar o aceite LGPD): atenuado
     e com cursor de bloqueado, para comunicar que ainda nao esta liberado. */
  #btnCriarConta:disabled{ opacity:.5; filter:grayscale(.35); cursor:not-allowed; }
  /* Banner do TESTE GRATIS (logado): barra fina abaixo do header; dourada quando
     ativo, coral quando expirado. Clique -> planos. */
  #cfTrialBanner{ position:fixed; top:var(--cf-hdr-h); left:0; right:0; z-index:39; display:none;
    align-items:center; justify-content:center; gap:8px; width:100%; min-height:38px; border:none;
    border-radius:0; padding:6px 14px; box-shadow:0 2px 8px rgba(0,0,0,.25); cursor:pointer;
    font-size:14px; font-weight:700; }
  /* Ativo: mesma cor do botao "Teste gratis 14 dias" (coral). Expirado: mesma cor
     do botao "Ver planos e precos" (amarelo). */
  #cfTrialBanner{ color:#3a1206; background:linear-gradient(var(--cf-coral2),var(--cf-coral)); }
  #cfTrialBanner.exp{ color:#3a2b00; background:linear-gradient(var(--cf-yellow2),var(--cf-yellow)); }
  #cfTrialBanner b{ text-decoration:underline; }
  #cfTrialBanner:active{ transform:none; }
  /* Quando o banner esta visivel, reservar a altura dele nas telas publicas. */
  body.cf-public.cf-trial #landing, body.cf-public.cf-trial #loginScreen,
  body.cf-public.cf-trial #registerScreen, body.cf-public.cf-trial #startForm,
  body.cf-trial #precosScreen, body.cf-trial #testeGratisScreen{
    padding-top:calc(var(--cf-hdr-h) + 38px + 26px); }
  body.cf-public.cf-trial #landing{ padding-top:calc(var(--cf-hdr-h) + 38px + 26px); }

  /* ======================================================================
     TELAS DE MENU UNIFICADAS: toda tela acessivel pelo menu hamburguer
     (pista, vitrine, relatorio, meus dados, e as admin: formula, mapa,
     skyboxes, academia) usa o MESMO aspecto - a barra de header (#cfTop) + o
     hamburguer no topo, SEM botao de fechar proprio (a navegacao e pelo menu).
     Excecao: a simulacao de corrida, que NAO recebe o header - e automatica,
     pois durante a corrida nenhuma tela de menu esta visivel. A classe
     cf-menuscr e ligada por JS (cfSyncMenuChrome) quando uma dessas telas
     esta visivel. */
  body.cf-menuscr #cfTop{ display:flex; z-index:62; }
  body.cf-menuscr .cfnav-burger{ z-index:63; }
  /* SIMULACAO DE CORRIDA: esconde o hamburguer (jogo rodando = cf-ingame ligado
     e NENHUMA tela de menu visivel, logo sem cf-menuscr). */
  body.cf-ingame:not(.cf-menuscr) .cfnav-burger{ display:none !important; }
  /* telas "card" simples: reservam a altura do header no topo */
  body.cf-menuscr #trackScreen,
  body.cf-menuscr #animLabScreen,
  body.cf-menuscr #report,
  body.cf-menuscr #prepScreen,
  body.cf-menuscr #startForm{ padding-top:calc(var(--cf-hdr-h) + 16px); }
  /* avatar: ancora no topo sob o header; o card preenche a altura sob o header e
     CRESCE/ROLA (barra oculta) quando o conteudo nao couber. */
  body.cf-menuscr #avatarScreen{ align-items:flex-start; padding-top:calc(var(--cf-hdr-h) + 12px); }
  body.cf-menuscr #avatarScreen .card{ min-height:calc(100dvh - var(--cf-hdr-h) - 24px); }
  /* telas admin de tela cheia (split-pane z-61): empurram o conteudo p/ baixo do header */
  body.cf-menuscr #formulaScreen .admWrap,
  body.cf-menuscr #mapScreen .mgWrap,
  body.cf-menuscr #skyScreen .skWrap{ top:var(--cf-hdr-h); }

/* Sem WATERMARK em nenhum campo: o widget do Telefone Universal (CDF) usa a
   mascara como placeholder cinza; ocultamos esse placeholder para o campo nao
   exibir marca d'agua (pedido do dono). Vale so para o campo mascarado do modulo. */
.uph-input::placeholder{ opacity:0 !important; }

/* ====================================================================
   TESTE GRATIS (Prepare-se) + POP-UP DE AVALIACAO (0 a 5 estrelas).
   Usa os tokens --cf-* (tema claro/escuro automatico). O overlay e
   position:fixed cobrindo a viewport -> o floating-window.js central
   injeta o "X" e a trava de rolagem do fundo (padrao da rede).
   ==================================================================== */
.ratingOverlay{ position:fixed; inset:0; z-index:120; display:flex;
  align-items:center; justify-content:center; padding:16px;
  background:rgba(2,6,16,.66); backdrop-filter:blur(3px); }
.ratingCard{ width:min(92vw,420px); box-sizing:border-box;
  background:var(--cf-panel2); color:var(--cf-ink);
  border:1px solid var(--cf-border); border-radius:16px;
  padding:22px 20px 18px; text-align:center;
  box-shadow:0 18px 60px rgba(0,0,0,.5); margin-inline:auto; }
.ratingCard h2{ margin:.1rem 0 .3rem; font-size:1.35rem; }
.ratingSub{ margin:0 0 .4rem; color:var(--cf-mut); }
.ratingLogo{ display:block; margin:.2rem auto .9rem; max-width:200px; width:70%; height:auto; }
.ratingStars{ display:flex; gap:6px; justify-content:center; margin:.2rem 0 .4rem; }
.ratStar{ background:none; border:none; cursor:pointer; padding:4px;
  font-size:2.4rem; line-height:1; color:var(--cf-border);
  transition:transform .08s ease, color .08s ease;
  min-width:44px; min-height:44px; }   /* alvo de toque >=44px */
.ratStar.on{ color:var(--cf-gold); }
.ratStar:active{ transform:scale(.88); }
.ratingValor{ min-height:1.2em; margin:.1rem 0 .9rem;
  font-weight:700; color:var(--cf-ink2); }
.ratingAcoes{ display:flex; justify-content:center; align-items:center; }
/* "Votar" sozinho: largura pelo conteudo (nao estica a largura do card), CENTRALIZADO. */
.ratingAcoes .primary{ height:52px; min-height:52px; flex:0 1 auto; min-width:min(220px,70%);
  box-sizing:border-box; border:none; border-radius:16px; margin:0; padding:0 32px;
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  font-size:16px; }   /* mesma tipografia do "Correr novamente" (#report .primary) */
@media (max-width:420px){ .ratStar{ font-size:2rem; } }