/* calangolingo — base
   Fundo branco, um verde de marca forte, tipografia arredondada e botões com
   peso: tudo que é clicável precisa PARECER clicável, principalmente no celular. */

@font-face {
  font-family: "Nunito";
  src: url("nunito.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --fundo:  #FAFBFC;   /* quase branco: e' o que faz o card branco aparecer */
  --papel:  #FFFFFF;
  --nuvem:  #EFF2F4;
  --tinta:  #22282C;
  --cinza:  #5C646A;   /* escuro o bastante para ler de verdade */
  --fraco:  #868E95;
  --linha:  #D8DEE3;   /* visivel: e' o que faz o botao parecer botao */
  --linha-forte: #BFC7CE;

  --verde:       #21B45A;
  --verde-baixo: #17903F;
  --verde-claro: #E3F6EB;

  --laranja:       #FF9C21;
  --laranja-baixo: #C97505;
  --laranja-claro: #FFF0D9;

  --vermelho:       #E5544B;
  --vermelho-baixo: #C24239;
  --vermelho-claro: #FCE8E7;

  --ui: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --jp: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

  --largura: 46rem;
  --alt-topo: 54px;
  --raio: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #131719; --papel: #1D2326; --nuvem: #262D31;
    --tinta: #ECEFF1; --cinza: #97A0A6; --fraco: #6E767C;
    --linha: #333B40; --linha-forte: #454F55;
    --verde: #3ECB74; --verde-baixo: #24894B; --verde-claro: #17301F;
    --laranja: #FFAE47; --laranja-baixo: #E09838; --laranja-claro: #33260F;
    --vermelho: #F0736A; --vermelho-baixo: #B9564E; --vermelho-claro: #331B19;
  }
}
:root[data-tema="escuro"] {
  --fundo: #131719; --papel: #1D2326; --nuvem: #262D31;
  --tinta: #ECEFF1; --cinza: #97A0A6; --fraco: #6E767C;
  --linha: #333B40; --linha-forte: #454F55;
  --verde: #3ECB74; --verde-baixo: #24894B; --verde-claro: #17301F;
  --laranja: #FFAE47; --laranja-baixo: #E09838; --laranja-claro: #33260F;
  --vermelho: #F0736A; --vermelho-baixo: #B9564E; --vermelho-claro: #331B19;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--verde); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; border-radius: 8px; }

.envelope { max-width: var(--largura); margin: 0 auto; padding: 0 16px 72px; }

/* ---------- botões com peso ----------
   A borda de baixo mais grossa dá volume; ao apertar, a peça desce e a borda
   encolhe. É esse detalhe que faz o botão parecer objeto, e não retângulo. */

.btn {
  font: inherit; font-weight: 800; font-size: .92rem;
  letter-spacing: .04em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 22px;
  border: 2px solid var(--linha-forte); border-bottom-width: 5px;
  border-radius: var(--raio);
  background: var(--papel); color: var(--cinza);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform .07s ease, border-bottom-width .07s ease,
              background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--nuvem); }
.btn:active { transform: translateY(3px); border-bottom-width: 2px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }

.btn.principal { background: var(--verde); border-color: var(--verde-baixo); color: #fff; }
.btn.principal:hover { background: var(--verde); filter: brightness(1.07); }

.btn.perigo { border-color: var(--vermelho); border-bottom-color: var(--vermelho-baixo); color: var(--vermelho); }
.btn.perigo:hover { background: var(--vermelho-claro); }
.btn.bom { border-color: var(--verde); border-bottom-color: var(--verde-baixo); color: var(--verde); }
.btn.bom:hover { background: var(--verde-claro); }

.btn.largo { width: 100%; }
.btn.pequeno { min-height: 42px; padding: 9px 16px; font-size: .76rem; border-bottom-width: 4px; }

/* pílulas de escolha */
.pilula, .trilha {
  font: inherit; font-weight: 800; font-size: .84rem;
  min-height: 42px; padding: 9px 16px; white-space: nowrap;
  border: 2px solid var(--linha); border-bottom-width: 4px; border-radius: 14px;
  background: var(--papel); color: var(--cinza); cursor: pointer;
  transition: transform .07s ease, border-bottom-width .07s ease,
              background-color .12s ease, color .12s ease, border-color .12s ease;
}
.pilula:hover, .trilha:hover { background: var(--nuvem); color: var(--tinta); }
.pilula:active, .trilha:active { transform: translateY(2px); border-bottom-width: 2px; }
.pilula[aria-pressed="true"], .trilha[aria-pressed="true"] {
  background: var(--verde-claro); border-color: var(--verde); color: var(--verde);
}

/* ---------- topo ---------- */

.topo { position: sticky; top: 0; z-index: 40; background: var(--papel); border-bottom: 2px solid var(--linha); }
.topo-i {
  max-width: var(--largura); margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; min-height: var(--alt-topo);
}
.marca {
  font-weight: 900; font-size: 1.18rem; letter-spacing: -.03em;
  color: var(--tinta); text-decoration: none; margin-right: auto;
  white-space: nowrap;
}
.marca .lingo { color: var(--verde); }
/* placeholder até existir logo de verdade: o mesmo bicho da aba do navegador,
   na altura do texto. Sem flex aqui — o `gap` separava "calango" de "lingo". */
.marca .bicho { font-size: .92em; margin-right: .26em; }
/* interruptor de tema: mostra os dois estados e desliza entre eles, em vez
   de um botão escrito "tema" que não diz para onde vai */
.troca-tema {
  position: relative; flex: none; cursor: pointer;
  width: 68px; height: 36px; padding: 0;
  border: 2px solid var(--linha); border-radius: 20px; background: var(--nuvem);
  display: flex; align-items: center; justify-content: space-between;
  transition: background-color .2s ease, border-color .2s ease;
}
.troca-tema:hover { border-color: var(--linha-forte); }
.troca-tema .icone-sol, .troca-tema .icone-lua {
  font-size: .82rem; line-height: 1; width: 30px; text-align: center;
  transition: opacity .2s ease; z-index: 1;
}
.troca-tema .icone-sol { color: var(--laranja-baixo); }
.troca-tema .icone-lua { color: var(--cinza); }
.troca-tema .pino {
  position: absolute; top: 2px; left: 2px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--papel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  transition: transform .22s cubic-bezier(.3, 1.4, .5, 1);
}
.troca-tema[aria-checked="true"] .pino { transform: translateX(32px); }
.troca-tema[aria-checked="true"] .icone-sol { opacity: .35; }
.troca-tema[aria-checked="false"] .icone-lua { opacity: .35; }

/* ---------- cabeçalho da lição ---------- */

.cabeca { padding: 24px 0 16px; display: flex; flex-direction: column; gap: 12px; }
.cabeca h1 {
  margin: 0; font-size: clamp(1.65rem, 6.5vw, 2.35rem); font-weight: 900;
  letter-spacing: -.035em; line-height: 1.08; text-wrap: balance;
}
.selos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.selo {
  font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 20px; background: var(--verde-claro); color: var(--verde);
}
.selo.neutro { background: var(--nuvem); color: var(--cinza); }

.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.cta-cartas { min-height: 46px; padding: 10px 16px; font-size: .84rem; border-bottom-width: 4px; }
.cta-cartas .ic { flex: none; }
.cta-cartas .quantos {
  background: rgba(255, 255, 255, .26); border-radius: 20px;
  padding: 2px 9px; font-size: .78rem; margin-left: 2px;
}

/* dica que aparece ao passar o mouse — no celular o toque só navega, então
   a informação essencial continua no próprio rótulo */
[data-dica] { position: relative; }
[data-dica]::after {
  content: attr(data-dica);
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 17rem;
  white-space: normal;        /* .pilula tem nowrap e a dica herdava: virava tira */
  background: var(--tinta); color: var(--fundo);
  padding: 9px 13px; border-radius: 10px;
  font-size: .78rem; font-weight: 700; line-height: 1.4;
  text-transform: none; letter-spacing: 0; text-align: left;
  opacity: 0; pointer-events: none; z-index: 50;
  transition: opacity .16s ease, transform .16s ease;
}
[data-dica]:hover::after, [data-dica]:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
@media (hover: none) { [data-dica]::after { display: none; } }

/* sincronia saiu da barra que rola: é ajuste de uma vez, não de leitura */
.sincronia {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  font-size: .72rem; font-weight: 800; color: var(--fraco);
}
.sincronia .rot { text-transform: uppercase; letter-spacing: .07em; }
.sincronia button {
  font: inherit; font-weight: 900; width: 30px; height: 30px; line-height: 1; cursor: pointer;
  border: 2px solid var(--linha); border-bottom-width: 3px; background: var(--papel);
  color: var(--cinza); border-radius: 10px; padding: 0;
}
.sincronia button:hover { color: var(--tinta); border-color: var(--linha-forte); }
.sincronia button:active { transform: translateY(1px); border-bottom-width: 2px; }
.sincronia output { min-width: 3.6em; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- vídeo ---------- */

.suporte-video { position: relative; }
.moldura {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: var(--raio); overflow: hidden; border: 2px solid var(--linha);
}
.moldura iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.moldura.presa {
  position: fixed; bottom: 14px; right: 14px; top: auto;
  width: 280px; z-index: 30; border-radius: 12px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .3);
}

/* ---------- controles da lição ---------- */

.controles {
  position: sticky; top: var(--alt-topo); z-index: 20;
  display: flex; align-items: center; gap: 7px;
  padding: 10px 0; margin-bottom: 4px;
  background: var(--fundo); border-bottom: 2px solid var(--linha);
  overflow-x: auto; scrollbar-width: none;
}
.controles::-webkit-scrollbar { display: none; }

/* Quando os idiomas não cabem, o corte seco não avisa que há mais. O
   esmaecido usa a cor do fundo, então funciona igual nos dois temas. */
.faixa-controles { position: relative; }
.faixa-controles .borda-rolagem {
  position: absolute; top: 0; right: 0; bottom: 2px; width: 56px;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 4px; pointer-events: none; opacity: 0;
  font-size: 1.5rem; font-weight: 900; color: var(--cinza);
  background: linear-gradient(to right, transparent, var(--fundo) 62%);
  transition: opacity .18s ease;
}
.faixa-controles.tem-mais .borda-rolagem { opacity: 1; }
.idiomas { display: flex; align-items: center; gap: 6px; flex: none; }
.idiomas .separa { width: 2px; height: 22px; background: var(--linha); border-radius: 1px; flex: none; }

/* ---------- transcrição ---------- */

.transcricao { list-style: none; margin: 0; padding: 0; }
.fala {
  position: relative; padding: 15px 14px 15px 16px;
  border-bottom: 2px solid var(--linha); cursor: pointer;
  border-left: 4px solid transparent;
  transition: background-color .12s ease, border-color .12s ease;
}
.fala:hover { background: var(--nuvem); }
.fala.ativa { background: var(--verde-claro); border-left-color: var(--verde); }
.fala.passada .txt { opacity: .45; }

.fala .progresso {
  position: absolute; left: 0; bottom: -2px; height: 3px;
  background: var(--laranja); width: 0; display: none; border-radius: 2px;
}
.fala.ativa .progresso { display: block; }

.quem {
  display: inline-block; font-size: .68rem; font-weight: 900;
  letter-spacing: .09em; text-transform: uppercase; color: var(--fraco); margin-bottom: 6px;
}
.fala.ativa .quem { color: var(--verde); }

.txt > * { margin: 0 0 5px; }
.txt > *:last-child { margin-bottom: 0; }

.t-ja { font-family: var(--jp); font-size: 1.3rem; font-weight: 500; line-height: 2.1; }
.t-ja ruby rt { font-size: .46em; color: var(--fraco); font-weight: 400; }
.t-ja b { font-weight: 700; color: var(--laranja-baixo); }
.t-ja b ruby rt { color: var(--laranja-baixo); }

.t-romaji { font-size: .9rem; font-weight: 600; color: var(--fraco); font-style: italic; }
.t-trad   { font-size: .95rem; font-weight: 600; color: var(--cinza); }
.fala.ativa .t-trad { color: var(--tinta); }

.fala.fora { background: transparent; border-left-color: transparent; }
.fala.fora .t-ja { font-size: 1.05rem; }

/* ---------- notas ---------- */

.nota {
  margin: 14px 0; padding: 14px 16px;
  background: var(--laranja-claro); border: 2px solid transparent;
  border-left: 4px solid var(--laranja); border-radius: 12px;
  font-size: .92rem; line-height: 1.55; color: var(--tinta);
}
.nota .tipo {
  display: block; font-size: .66rem; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; color: var(--laranja-baixo); margin-bottom: 5px;
}

/* ---------- catálogo ---------- */

.grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--papel); border: 2px solid var(--linha); border-bottom-width: 5px;
  border-radius: var(--raio); overflow: hidden;
  transition: transform .1s ease, border-color .12s ease, border-bottom-width .1s ease;
}
.card:hover { border-color: var(--verde); transform: translateY(-2px); }
.card:active { transform: translateY(1px); border-bottom-width: 3px; }
.card .capa {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; background: var(--nuvem); border-bottom: 2px solid var(--linha);
}
.card-txt { padding: 15px 17px 18px; }
.card h2 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 900; letter-spacing: -.02em; }
.card .meta { margin: 0; font-size: .82rem; font-weight: 700; color: var(--cinza); }
.card .meta.fraco { color: var(--fraco); margin-top: 3px; }

.vazio {
  border: 2px dashed var(--linha); border-radius: var(--raio); padding: 34px;
  text-align: center; color: var(--cinza); font-weight: 700;
}

/* ---------- rodapé ---------- */

.rodape {
  margin-top: 44px; padding-top: 20px; border-top: 2px solid var(--linha);
  font-size: .8rem; font-weight: 700; color: var(--fraco);
  display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between;
}

@media (max-width: 620px) {
  .t-ja { font-size: 1.16rem; line-height: 1.95; }
  .moldura.presa { width: 158px; bottom: 10px; right: 10px; }
}

/* ---------- aviso de onde o progresso mora ----------
   Discreto por padrão: uma linha. Quem quiser entender, abre. */

.guardar-slot { display: flex; flex-direction: column; gap: 10px; }

.aviso-guardar {
  font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 11px 14px; border-radius: 12px;
  border: 2px solid var(--linha); background: var(--papel); color: var(--cinza);
  text-align: left;
}
.aviso-guardar:hover { border-color: var(--linha-forte); color: var(--tinta); }
.aviso-guardar .ponto {
  width: 8px; height: 8px; border-radius: 50%; background: var(--verde); flex: none;
}
.aviso-guardar .ponto.atencao { background: var(--laranja); }
.aviso-guardar .aviso-txt { flex: 1; }
.aviso-guardar .aviso-mais {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--verde);
}

.painel-guardar {
  border: 2px solid var(--linha); border-radius: 14px;
  background: var(--nuvem); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.painel-guardar[hidden] { display: none; }
.pg-titulo { margin: 0; font-size: .95rem; font-weight: 900; color: var(--tinta); }
.pg-lista {
  margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px;
  font-size: .86rem; font-weight: 600; color: var(--cinza); line-height: 1.5;
}
.pg-lista b { color: var(--tinta); font-weight: 800; }
.pg-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-nota {
  margin: 0; padding-top: 10px; border-top: 2px solid var(--linha);
  font-size: .82rem; font-weight: 600; color: var(--fraco); line-height: 1.5;
}
.pg-recado:empty { display: none; }
.pg-recado {
  margin: 0; font-size: .82rem; font-weight: 800; color: var(--verde);
}

/* com conta, o aviso vira confirmação: não é botão, não abre nada */
.aviso-guardar.como-conta {
  cursor: default; border-color: var(--verde); background: var(--verde-claro);
  color: var(--verde);
}

/* quem já estudou vê a borda em atenção: é aí que há o que perder */
.aviso-guardar.atencao-borda { border-color: var(--laranja); color: var(--tinta); }
.aviso-guardar.atencao-borda .aviso-mais { color: var(--laranja-baixo); }
.painel-guardar .btn.largo { margin-top: 2px; }

/* ---------- impressão / PDF ---------- */

@media print {
  :root {
    --fundo: #fff; --papel: #fff; --nuvem: #fff;
    --tinta: #000; --cinza: #333; --fraco: #666; --linha: #bbb;
    --verde: #245; --laranja: #663; --verde-claro: transparent; --laranja-claro: #f4f4f4;
  }
  body { background: #fff; color: #000; font-size: 11pt; }
  .topo, .controles, .suporte-video, .acoes, .rodape, .progresso { display: none !important; }
  .envelope { max-width: none; padding: 0; }
  .cabeca { padding: 0 0 12pt; border-bottom: 1pt solid #999; }
  .cabeca h1 { font-size: 20pt; }
  .selo { border: 1pt solid #bbb; color: #333 !important; background: none !important; }
  .fala {
    border-left: none; padding: 7pt 0; border-bottom: 1pt dotted #ccc;
    break-inside: avoid; page-break-inside: avoid;
  }
  .fala.ativa, .fala:hover { background: none !important; }
  .fala.passada .txt { opacity: 1; }
  .quem { color: #555 !important; font-size: 8pt; }
  .t-ja { font-size: 13pt; line-height: 1.9; }
  .t-ja ruby rt { color: #555; }
  .t-ja b { color: #000; }
  .t-romaji, .t-trad { font-size: 9.5pt; color: #333 !important; }
  .nota { border: 1pt solid #ccc; border-left: 2pt solid #888; break-inside: avoid; font-size: 9pt; }
  @page { margin: 14mm 12mm; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- conta no cabeçalho ---------- */

.conta-slot { display: flex; align-items: center; }
.conta-nome {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  border-color: var(--verde); background: var(--verde-claro); color: var(--verde);
}
.conta-ponto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--verde); flex: none;
}

/* Dica no cabeçalho abre para BAIXO: ali "acima" está fora da tela, e a
   dica aparecia cortada na borda de cima. */
.topo [data-dica]::after {
  bottom: auto; top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px);
}
.topo [data-dica]:hover::after, .topo [data-dica]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}
/* a pílula da conta fica colada na direita: centrar a dica a jogaria para fora */
.topo .conta-nome::after { left: auto; right: 0; transform: translateY(-4px); }
.topo .conta-nome:hover::after, .topo .conta-nome:focus-visible::after { transform: translateY(0); }

.sub-home { margin: 0; color: var(--cinza); font-size: 1rem; font-weight: 600; }
/* na home o painel fica separado do catálogo */
.grade + .guardar-slot { margin-top: 26px; }

/* seletor de idioma da interface */
.troca-idioma {
  font: inherit; font-weight: 800; font-size: .78rem; cursor: pointer;
  padding: 8px 10px; border-radius: 12px; flex: none;
  border: 2px solid var(--linha); background: var(--papel); color: var(--cinza);
}
.troca-idioma:hover { color: var(--tinta); border-color: var(--linha-forte); }
@media (max-width: 480px) { .troca-idioma { max-width: 5.2rem; } }