/* ============================================================
   Klipo -- tema unico das quatro telas.
   FONTE UNICA DE VERDADE das cores, fontes, raios e sombras.
   Nao defina cor em nenhum .html: use var(--nome) daqui.
   Trocar a marca = trocar este arquivo.
   ============================================================ */

:root{
  /* --- superficie --- */
  --bg:#FBF0D5; --panel:#FFFBEF; --panel2:#FFF7E2; --border:#EADFBD;
  --text:#2A2F57; --muted:#5F6480; --stage:#F5EDD8;

  /* --- indigo: navegacao, links, acoes secundarias --- */
  --accent:#5C6BC0; --accent-hover:#46529E;
  --accent-soft:rgba(92,107,192,.12); --accent-tx:#FFFFFF;

  /* --- manteiga: a acao principal, UMA por tela --- */
  --cta:#FFD166; --cta-edge:#E3AE3C; --cta-tx:#2A2F57;

  /* --- apoio --- */
  --lavanda:#A8B5E8; --brilho:#FFF3C4; --chrome:#5C6BC0;

  /* --- estado --- */
  --danger:#E05A3C; --ok:#2E8577; --aviso:#B4502F;
  --erro-bg:#FDEDE8; --erro-bd:#F6CBBC; --erro-tx:#8A2E16;
  --aviso-bg:#FFF1EC; --aviso-bd:#FFC9B5; --aviso-tx:#7A3A26;
  --ok-bg:#E6F7F3; --ok-bd:#A9E3D8; --ok-tx:#0E3F38;

  /* --- marcadores sobre a arte do usuario (canvas) ---
     ficam iguais nos dois temas: o fundo deles e a arte, nao a tela */
  --marcador:#5C6BC0; --marcador-halo:#FFFFFF;


  /* --- cores das ILUSTRACOES de peca ---
     Iguais nos dois temas de proposito: representam a peca fisica, nao a
     interface. Se seguissem o tema, no escuro o corpo e o relevo virariam
     a mesma cor e o desenho perderia o volume. */
  --peca:#5C6BC0;        --peca-lado:#46529E;
  --peca2:#A8B5E8;       --peca2-lado:#8291D6;
  --peca-luz:#FFF3C4;
  --peca-ima:#FFD166;    --peca-ima-lado:#E3AE3C;
  --peca-mesa:rgba(70,82,158,.30);

  /* --- xadrez de transparencia --- */
  --xadrez-a:#FFFFFF; --xadrez-b:#F4EEDC;

  --sombra:0 1px 2px rgba(92,107,192,.05),0 10px 30px rgba(92,107,192,.09);

  /* --- raios --- */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;

  /* --- tipografia --- */
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --disp:'Fredoka',system-ui,sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
}

html[data-tema="escuro"]{
  --bg:#1B1F3B; --panel:#242952; --panel2:#2C3260; --border:#333A6B;
  --text:#EDEAF7; --muted:#A6ACD4; --stage:#333A6B;
  --accent:#A8B5E8; --accent-hover:#C3CCF2;
  --accent-soft:rgba(168,181,232,.16); --accent-tx:#1B1F3B;
  --cta:#FFD166; --cta-edge:#B88A2B; --cta-tx:#2A2F57;
  --lavanda:#A8B5E8; --brilho:#FFF3C4; --chrome:#242952;
  --danger:#FF8A65; --ok:#4FC3B0; --aviso:#FFB08A;
  --erro-bg:rgba(255,138,101,.10); --erro-bd:rgba(255,138,101,.35); --erro-tx:#FFC2AD;
  --aviso-bg:rgba(255,176,138,.10); --aviso-bd:rgba(255,176,138,.32); --aviso-tx:#FFD3BF;
  --ok-bg:rgba(79,195,176,.10); --ok-bd:rgba(79,195,176,.34); --ok-tx:#A9E3D8;
  --xadrez-a:#2C3260; --xadrez-b:#262B57;
  --sombra:none;
}

/* ============ pecas comuns as quatro telas ============ */

.btn{border-radius:var(--r-pill)}
.btn.primary{background:var(--cta);border-color:var(--cta-edge);color:var(--cta-tx);
  font-weight:700;box-shadow:0 4px 0 var(--cta-edge)}
.btn.primary:hover:not(:disabled){background:#FFDA85;border-color:var(--cta-edge);color:var(--cta-tx)}
.btn.primary:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 var(--cta-edge)}

/* --- seletor de idioma: globo + sigla --- */
.klipo-lingua{position:relative;flex:0 0 auto;margin-right:8px}
.klipo-lingua > button{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;
  font-weight:700;padding:7px 12px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:inherit}
.klipo-lingua > button:hover{background:rgba(255,255,255,.22)}
.klipo-lingua svg{width:15px;height:15px;flex:0 0 auto}
.klipo-lingua ul{position:absolute;right:0;top:calc(100% + 6px);z-index:60;margin:0;padding:5px;
  list-style:none;min-width:150px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.klipo-lingua ul[hidden]{display:none}
.klipo-lingua li button{display:flex;width:100%;align-items:center;gap:9px;font:inherit;font-size:14px;
  padding:9px 11px;border:0;border-radius:var(--r-sm);background:none;color:var(--text);
  cursor:pointer;text-align:left}
.klipo-lingua li button:hover{background:var(--accent-soft)}
.klipo-lingua li button[aria-current="true"]{font-weight:700;color:var(--accent)}
.klipo-lingua li .sig{font-family:var(--mono);font-size:11px;font-weight:700;opacity:.65;margin-left:auto}