/* =====================================================================
   POKER TRAINING — o sistema visual, num lugar só.

   Ate aqui cada tela carregava a propria copia dos tokens e dos botoes,
   escrita a mao no `<style>` dela. Com 60 telas isso quer dizer 60
   lugares para mudar quando a cor mudar — e a primeira que ficasse para
   tras seria a que ninguem abriu naquele dia.

   Este arquivo e a fonte. Ele mora em `assets/`, que o deploy publica
   inteiro, e por isso alcanca tanto as paginas publicas (HTML estatico
   servido direto) quanto as telas restritas (entregues pelo porteiro).

   O QUE ELE NAO CONSEGUE ALCANCAR: `style="..."` escrito no elemento.
   Estilo em linha vence qualquer folha, e este codigo usa estilo em
   linha em toda parte. Por isso a troca de FONTE nas telas antigas e
   feita no texto do arquivo, e nao aqui — esta folha manda no que e
   classe, e as classes sao o caminho daqui para a frente.
   ===================================================================== */

:root{
  /* O chao e preto com VIES DE VERDE, e nao preto neutro: o neutro veio
     de um site laranja, e deixava o azul da marca sem eco em lugar
     nenhum. O verde aqui nunca e cor de elemento — e atmosfera. */
  --chao:#080B09;
  --faixa:#0C110E;
  --carta:#111815;
  --acesa:#17201C;

  --linha:rgba(255,255,255,0.07);
  --linha-forte:rgba(255,255,255,0.14);

  --tinta:#EAF0EC;
  --tinta-2:#93A29A;
  --tinta-3:#5F6D66;

  /* A marca sai do logo e continua sendo o que se CLICA. O verde e o que
     esta atras. Trocar um pelo outro seria jogar o logo fora. */
  --marca:#48AFF7;
  --marca-clara:#7FC8FF;
  --verde:#6FA982;
  --verde-vivo:#5EC08A;
  --violeta:#A78BFA;
  --ouro:#F5C542;
  --perigo:#F87171;

  --raio:8px;
  --raio-carta:14px;

  --fonte-titulo:'Sora',system-ui,sans-serif;
  --fonte-corpo:'Public Sans',system-ui,sans-serif;
  --fonte-dado:'Space Mono',monospace;
}

/* ---- base ---------------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--chao)}
body{font-family:var(--fonte-corpo);color:var(--tinta);font-size:16px;line-height:1.65;
     -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--fonte-titulo);margin:0;letter-spacing:-0.02em;text-wrap:balance}
::selection{background:rgba(111,169,130,0.35)}

/* A barra de rolagem fina e escura: a do sistema desenha um trilho claro
   no meio do escuro, e num site inteiro escuro isso e um risco branco de
   cima a baixo. */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--chao)}
::-webkit-scrollbar-thumb{background:#1E2723;border-radius:6px;border:2px solid var(--chao)}
::-webkit-scrollbar-thumb:hover{background:#2A3630}

/* ---- botoes -------------------------------------------------------- *
   Preenchido, canto de 8px, e o efeito e LEVANTAR: sobe 1px, clareia e
   ganha halo. Movimento de 1px e o que o dedo entende como "isto e um
   botao" sem virar animacao. No :active ele volta ao chao, porque botao
   que so sobe parece travado.

   A sombra usa a COR DO PROPRIO BOTAO diluida, e nao preto: sombra preta
   sobre chao preto nao existe, e o que da relevo num tema escuro e o
   halo da cor.                                                          */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-family:var(--fonte-titulo);font-weight:700;font-size:14.5px;letter-spacing:0.2px;
    padding:14px 26px;border-radius:var(--raio);border:1px solid transparent;cursor:pointer;
    transition:transform .16s ease,box-shadow .16s ease,background .16s ease,
               border-color .16s ease,color .16s ease}
.bt:hover{transform:translateY(-1px)}
.bt:active{transform:translateY(0)}
.bt:focus-visible{outline:2px solid var(--verde-vivo);outline-offset:3px}

.bt-marca{background:var(--marca);color:#04121C;box-shadow:0 6px 20px rgba(72,175,247,0.22)}
.bt-marca:hover{background:var(--marca-clara);box-shadow:0 10px 30px rgba(72,175,247,0.34)}

.bt-verde{background:var(--verde-vivo);color:#04150C;box-shadow:0 6px 20px rgba(94,192,138,0.20)}
.bt-verde:hover{background:#7BD3A2;box-shadow:0 10px 30px rgba(94,192,138,0.32)}

.bt-violeta{background:var(--violeta);color:#150A2E;box-shadow:0 6px 20px rgba(167,139,250,0.20)}
.bt-violeta:hover{background:#C0AAFF;box-shadow:0 10px 30px rgba(167,139,250,0.32)}

.bt-ouro{background:var(--ouro);color:#1C1400;box-shadow:0 6px 20px rgba(245,197,66,0.20)}
.bt-ouro:hover{background:#FFD968;box-shadow:0 10px 30px rgba(245,197,66,0.32)}

/* O vazado nao e um segundo botao de acao: e a saida discreta. Ele nao
   levanta e nao ganha halo — se levantasse, disputaria com o preenchido
   e a pagina passaria a ter duas acoes principais. */
.bt-vazio{background:transparent;color:var(--tinta);border-color:var(--linha-forte)}
.bt-vazio:hover{border-color:var(--tinta);background:rgba(255,255,255,0.04);transform:none}

.bt-bloco{display:flex;width:100%}
.bt-mini{padding:9px 16px;font-size:12.5px}

/* ---- superficies --------------------------------------------------- */
.carta{position:relative;overflow:hidden;background:var(--carta);
       border:1px solid var(--linha);border-radius:var(--raio-carta);
       transition:border-color .18s ease,background .18s ease}
.carta:hover{border-color:var(--linha-forte);background:var(--acesa)}

/* A janelinha de tela: a barra de cima com o pontinho, como um app. E o
   que faz uma miniatura ser lida como TELA e nao como quadro. */
.tela{background:var(--faixa);border:1px solid var(--linha);border-radius:11px;overflow:hidden}
.tela-topo{display:flex;align-items:center;gap:8px;padding:11px 15px;
           background:var(--carta);border-bottom:1px solid var(--linha)}
.ponto{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tela-nome{font-family:var(--fonte-dado);font-size:11px;color:var(--tinta-2)}

/* O "verde esmaecido ao fundo": um circulo enorme e quase invisivel
   atras das secoes. Nao pinta nada — tira o chao do preto morto. */
.brilho{position:absolute;border-radius:50%;pointer-events:none;
        background:radial-gradient(circle,rgba(111,169,130,0.13) 0%,transparent 62%)}
.brilho-azul{background:radial-gradient(circle,rgba(72,175,247,0.10) 0%,transparent 62%)}

.caixa{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.secao{position:relative;overflow:hidden;padding:clamp(64px,8vw,116px) 0}

/* O rotulo de secao: monospace, miudo, com o risco antes. Diz "aqui
   comeca outro assunto" sem gastar uma linha de titulo. */
.olho{display:inline-flex;align-items:center;gap:10px;font-family:var(--fonte-dado);
      font-weight:700;font-size:12px;letter-spacing:2.4px;text-transform:uppercase;
      color:var(--verde);margin-bottom:18px}
.olho::before{content:"";width:26px;height:2px;background:currentColor;flex-shrink:0}

.mono{font-family:var(--fonte-dado)}
.mudo{color:var(--tinta-2)}
.calado{color:var(--tinta-3)}

/* ---- formulario ---------------------------------------------------- */
.fld{width:100%;background:var(--carta);border:1px solid var(--linha-forte);
     border-radius:var(--raio);color:var(--tinta);font-family:var(--fonte-corpo);
     font-size:15px;padding:14px 16px;outline:none;
     transition:border-color .16s ease,box-shadow .16s ease}
.fld:focus{border-color:var(--verde-vivo);box-shadow:0 0 0 3px rgba(94,192,138,0.16)}
.fld::placeholder{color:var(--tinta-3)}
.lbl{font-family:var(--fonte-dado);font-weight:700;font-size:10.5px;letter-spacing:1.6px;
     color:var(--tinta-2);text-transform:uppercase;display:block;margin-bottom:9px}

/* A caixa de selecao e desenhada aqui, e nao pelo navegador: com
   `accent-color` quem decide o desenho e o sistema de quem olha, e havia
   navegador pintando caixa branca mesmo marcada. */
input[type="checkbox"].cx{-webkit-appearance:none;appearance:none;width:18px;height:18px;
  flex-shrink:0;margin:0;border:1px solid var(--linha-forte);border-radius:5px;
  background:var(--carta);cursor:pointer;display:inline-grid;place-content:center}
input[type="checkbox"].cx::before{content:"";width:11px;height:11px;transform:scale(0);
  background:#04150C;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}
input[type="checkbox"].cx:checked{background:var(--verde-vivo);border-color:var(--verde-vivo)}
input[type="checkbox"].cx:checked::before{transform:scale(1)}
input[type="checkbox"].cx:hover{border-color:var(--verde-vivo)}
input[type="checkbox"].cx:focus-visible{outline:2px solid var(--verde-vivo);outline-offset:2px}

/* ---- avisos -------------------------------------------------------- */
.ok{border:1px solid rgba(94,192,138,0.34);background:rgba(94,192,138,0.09);
    border-radius:var(--raio);padding:13px 16px;font-size:14px;color:#9BE0B6}
.erro{border:1px solid rgba(248,113,113,0.34);background:rgba(248,113,113,0.09);
      border-radius:var(--raio);padding:13px 16px;font-size:14px;line-height:1.5;color:#FCA5A5}

/* ---- selos --------------------------------------------------------- *
   Preenchido, e nao contornado: e o que se ve varrendo uma lista de
   vinte linhas de cima a baixo. O selo escreve a palavra em vez de pedir
   que quem olha traduza uma cor.                                        */
.selo{display:inline-flex;align-items:center;font-family:var(--fonte-dado);font-weight:700;
      font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:4px 9px;border-radius:5px}
.selo-ok{background:var(--verde-vivo);color:#04150C}
.selo-mal{background:var(--perigo);color:#2A0606}
.selo-espera{background:var(--ouro);color:#1C1400}
.selo-nulo{background:#2A3630;color:var(--tinta-2)}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .bt:hover{transform:none}
}