/* =====================================================================
   Awesome Animals — visual de revista em quadrinhos
   ===================================================================== */
:root {
  --selva:  #123B2E;
  --verde:  #1F5E45;
  --tigre:  #E2761B;
  --areia:  #F6EEDC;
  --papel:  #FFFDF7;
  --tinta:  #1B2A4A;
  --azul:   #3C6EA8;
  --preto:  #14161A;
  --amarelo:#FFD447;
  --vermelho:#D7263D;
  --ok:     #2E7D4F;
  --ok-bg:  #E4F5E9;
  --erro:   #B23A2E;
  --erro-bg:#FBE4E0;
  --rev-bg: #E6EEF8;
  --fonte-titulo: 'Bangers', 'Impact', 'Arial Black', 'Trebuchet MS', sans-serif;
  --fonte-texto:  'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', 'Trebuchet MS', sans-serif;
  --borda: 3px solid var(--preto);
  --sombra: 5px 5px 0 var(--preto);
  --largura: 900px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 17px;
  line-height: 1.5;
  color: var(--preto);
  /* retícula de pontos, como impressão de gibi */
  background-color: var(--areia);
  background-image: radial-gradient(rgba(226, 118, 27, .28) 1.4px, transparent 1.6px);
  background-size: 11px 11px;
}
[hidden] { display: none !important; }
img { max-width: 100%; }

/* ---------- acessibilidade ---------- */
.pular {
  position: absolute; left: -999px; top: 0;
  background: var(--amarelo); color: var(--preto); padding: 8px 12px;
  border: var(--borda); border-radius: 8px; z-index: 100; font-weight: 700;
}
.pular:focus { left: 8px; top: 8px; }
.campo:focus, .palavra:focus, .btn:focus, .aba:focus, .link:focus {
  outline: 4px solid var(--tigre);
  outline-offset: 2px;
}

/* ---------- capa da revista ---------- */
.capa {
  background-color: var(--tigre);
  background-image:
    repeating-linear-gradient(-55deg, transparent 0 22px, rgba(20, 22, 26, .85) 22px 34px);
  border-bottom: 4px solid var(--preto);
  color: var(--papel);
}
.capa-inner {
  max-width: var(--largura); margin: 0 auto; padding: 22px 20px 18px;
  display: flex; align-items: center; gap: 18px; position: relative;
}
.edicao {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%;
  background: var(--amarelo); border: var(--borda); box-shadow: 4px 4px 0 var(--preto);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--preto); transform: rotate(-8deg); line-height: 1;
}
.edicao span { font: 700 .8rem var(--fonte-texto); }
.edicao strong { font: 2rem var(--fonte-titulo); }
.capa-titulo { flex: 1; min-width: 0; }
h1 {
  font-family: var(--fonte-titulo); font-weight: 400; letter-spacing: 2px;
  font-size: clamp(2.4rem, 8vw, 4.2rem); line-height: 1; margin: 0;
  color: var(--amarelo); text-transform: uppercase;
  -webkit-text-stroke: 1.5px var(--preto);
  text-shadow: 4px 4px 0 var(--preto), 6px 6px 0 var(--vermelho);
}
.capa-sub {
  display: inline-block; margin: 10px 0 0; padding: 4px 10px;
  background: var(--papel); color: var(--preto); border: var(--borda);
  box-shadow: 3px 3px 0 var(--preto); font-weight: 700; font-size: .9rem;
  transform: rotate(-1deg);
}
.capa-figura {
  flex: 0 0 auto; width: 110px; height: 110px; object-fit: contain;
  background: var(--papel); border: var(--borda); border-radius: 12px;
  box-shadow: 4px 4px 0 var(--preto); transform: rotate(4deg);
}

/* ---------- placar geral fixo ---------- */
.placar-geral {
  position: sticky; top: 0; z-index: 10;
  background: var(--papel); border-bottom: 4px solid var(--preto);
}
.placar-inner {
  max-width: var(--largura); margin: 0 auto; padding: 8px 16px;
  display: flex; align-items: center; gap: 14px;
}
/* explosão de estrela "POW!" com os pontos */
.estrela {
  flex: 0 0 auto; min-width: 96px; height: 64px; padding: 0 12px;
  background: var(--amarelo);
  clip-path: polygon(50% 0%, 61% 12%, 76% 4%, 79% 20%, 96% 22%, 88% 36%, 100% 50%, 88% 64%, 96% 78%, 79% 80%, 76% 96%, 61% 88%, 50% 100%, 39% 88%, 24% 96%, 21% 80%, 4% 78%, 12% 64%, 0% 50%, 12% 36%, 4% 22%, 21% 20%, 24% 4%, 39% 12%);
  display: grid; place-items: center;
  font: 1.25rem var(--fonte-titulo); letter-spacing: 1px; color: var(--preto);
}
.placar-texto { flex: 1; min-width: 0; }
#pontos-det { font-weight: 700; font-size: .92rem; color: var(--verde); }
.barra {
  height: 12px; background: #fff; border: var(--borda);
  border-radius: 99px; overflow: hidden; margin-top: 4px;
}
.barra-cheia {
  height: 100%; width: 0;
  background: repeating-linear-gradient(-45deg, var(--tigre) 0 8px, var(--amarelo) 8px 16px);
  transition: width .4s ease;
}

/* ---------- abas ---------- */
.abas-wrap { max-width: var(--largura); margin: 16px auto 0; padding: 0 12px; }
.abas {
  display: flex; gap: 10px; overflow-x: auto; padding: 6px 6px 12px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.aba {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  border: var(--borda); background: var(--papel); color: var(--preto);
  font: 700 .95rem var(--fonte-texto); padding: 6px 12px 6px 6px;
  cursor: pointer; white-space: nowrap; box-shadow: 4px 4px 0 var(--preto);
  transition: transform .08s, box-shadow .08s;
}
.aba:hover { background: #FFF3C4; }
.aba.ativa { background: var(--amarelo); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--preto); }
.aba-icone {
  width: 34px; height: 34px; object-fit: contain; background: #fff;
  border: 2px solid var(--preto); border-radius: 6px;
}
.aba-feitos {
  font: 1rem var(--fonte-titulo); letter-spacing: 1px;
  background: var(--preto); color: var(--amarelo); border-radius: 99px; padding: 1px 8px;
}
.aba-feitos.completo { background: var(--verde); color: #fff; }

/* ---------- conteúdo do tema ---------- */
.conteudo { max-width: var(--largura); margin: 0 auto; padding: 10px 12px 60px; }
.conteudo:focus { outline: none; }
.tema-cab { display: flex; align-items: center; gap: 16px; margin: 14px 4px 34px; }
.tema-icone {
  width: 92px; height: 92px; flex: 0 0 92px; object-fit: contain;
  background: #fff; border: var(--borda); box-shadow: var(--sombra); transform: rotate(-3deg);
}
.tema-cab h2 {
  font: clamp(2rem, 6vw, 2.8rem) var(--fonte-titulo); letter-spacing: 1.5px;
  margin: 0; color: var(--vermelho); line-height: 1; text-transform: uppercase;
  -webkit-text-stroke: 1px var(--preto); text-shadow: 3px 3px 0 var(--preto);
}
.pt { color: var(--azul); font-style: italic; font-weight: 700; margin: 4px 0 0; }
.nota-livre, .vazio {
  background: var(--amarelo); border: var(--borda); box-shadow: 4px 4px 0 var(--preto);
  padding: 10px 14px; margin: -14px 0 28px; font-weight: 700;
}

/* ---------- quadro (cartão) de exercício ---------- */
.cartao {
  position: relative; background: var(--papel);
  border: var(--borda); box-shadow: 7px 7px 0 var(--preto);
  padding: 30px 20px 20px; margin: 0 0 40px;
  transform: rotate(-.3deg);
}
.cartao-b { transform: rotate(.3deg); }
.selo {
  position: absolute; top: -18px; left: 14px;
  background: var(--amarelo); color: var(--preto);
  font: 1.35rem var(--fonte-titulo); letter-spacing: 1px;
  padding: 2px 14px; border: var(--borda); box-shadow: 4px 4px 0 var(--preto);
  transform: rotate(-3deg);
}
.cartao-b .selo { left: auto; right: 14px; transform: rotate(2.5deg); }

/* enunciado em balão de fala */
.enun {
  position: relative; background: #fff; border: var(--borda); border-radius: 22px;
  padding: 10px 16px; margin: 6px 0 14px; font-weight: 700; font-size: 1.12rem;
}
.enun::before, .enun::after {
  content: ""; position: absolute; left: 34px; width: 0; height: 0;
  border-style: solid;
}
.enun::before { bottom: -18px; border-width: 18px 14px 0 0; border-color: var(--preto) transparent transparent transparent; }
.enun::after  { bottom: -12px; left: 37px; border-width: 13px 10px 0 0; border-color: #fff transparent transparent transparent; }
/* tradução em caixa de legenda */
.enun-pt {
  background: #FFF6CC; border: var(--borda); padding: 6px 12px; margin: 0 0 16px 22px;
  color: var(--azul); font-style: italic; font-weight: 700; display: inline-block;
}

.leitura {
  background: #FFF6CC; border: var(--borda); box-shadow: 4px 4px 0 var(--preto);
  padding: 10px 14px; margin: 0 0 18px;
}
.leitura-en { margin: 0 0 6px; font-weight: 700; }
.leitura-pt { margin: 0; color: var(--azul); font-style: italic; }
.leitura p + p.leitura-en { margin-top: 6px; }

/* ---------- itens ---------- */
.itens { list-style: none; counter-reset: it; margin: 0; padding: 0; }
.item {
  counter-increment: it; position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin: 0 0 10px;
  border: 3px solid transparent;
}
.item::before {
  content: counter(it); flex: 0 0 30px; height: 30px; border-radius: 50%;
  background: var(--preto); color: var(--amarelo);
  font: 1.05rem var(--fonte-titulo); display: grid; place-items: center;
}
.item::after {
  content: ""; font: 1.6rem var(--fonte-titulo); line-height: 1;
  margin-left: auto; flex: 0 0 auto;
}
.figura {
  width: 76px; height: 76px; flex: 0 0 76px; object-fit: contain;
  background: #fff; border: var(--borda); border-radius: 8px;
  box-shadow: 3px 3px 0 var(--preto);
}
/* caixa que aparece no lugar de uma figura ainda não criada (mesmo tamanho da figura) */
.figura-falta {
  padding: 4px; border-style: dashed; border-color: var(--vermelho); box-shadow: none;
  font-size: .62rem; line-height: 1.15; color: var(--vermelho); font-weight: 700;
  display: grid; place-items: center; text-align: center; word-break: break-all; overflow: hidden;
}
.aba-icone.figura-falta { font-size: 1rem; padding: 0; }
.item-corpo { flex: 1; min-width: 0; }
.q { display: inline; font-weight: 700; }
.nw { white-space: nowrap; }

.campo {
  font: inherit; font-weight: 700; color: var(--preto); background: #fff;
  border: var(--borda); border-radius: 6px; padding: 4px 8px;
  max-width: 100%; margin: 2px 0; vertical-align: middle;
  box-shadow: 2px 2px 0 var(--preto);
}
.sel { cursor: pointer; }
textarea.campo { display: block; width: 100%; min-height: 70px; resize: vertical; margin-top: 6px; }

.item.ok       { background: var(--ok-bg);   border-color: var(--ok); }
.item.erro     { background: var(--erro-bg); border-color: var(--erro); }
.item.revelado { background: var(--rev-bg);  border-color: var(--azul); }
.item.ok .campo   { border-color: var(--ok); }
.item.erro .campo { border-color: var(--erro); }
.item.ok::after       { content: "✓"; color: var(--ok); }
.item.erro::after     { content: "✗"; color: var(--erro); }
.item.revelado::after { content: "!"; color: var(--azul); }

/* ---------- ordenar palavras ---------- */
.ordenar { width: 100%; }
.linha {
  min-height: 50px; border-bottom: 3px dashed var(--preto);
  display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 2px 8px; align-items: center;
}
.linha-vazia { color: #5C6478; font-style: italic; font-size: .95rem; }
.chip {
  background: var(--preto); color: var(--amarelo); padding: 4px 10px;
  font-weight: 700; border-radius: 4px;
}
.banco { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 8px; }
.palavra {
  font: 700 1rem var(--fonte-texto); background: #fff; color: var(--preto);
  border: var(--borda); padding: 6px 12px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--preto); transition: transform .08s, box-shadow .08s;
}
.palavra:hover:not(:disabled) { background: #FFF6CC; }
.palavra:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--preto); }
.palavra:disabled { opacity: .3; box-shadow: none; cursor: default; text-decoration: line-through; }
.link {
  background: none; border: 0; color: var(--azul); text-decoration: underline;
  cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem; padding: 2px 0;
}

/* ---------- botões e placar do exercício ---------- */
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.btn {
  font: 1.25rem var(--fonte-titulo); letter-spacing: 1.5px; text-transform: uppercase;
  border: var(--borda); padding: 6px 18px; cursor: pointer;
  box-shadow: var(--sombra); transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--preto); }
.btn-corrigir { background: var(--amarelo); color: var(--preto); }
.btn-ver { background: #fff; color: var(--preto); }
.btn-mini { font-size: .95rem; padding: 4px 10px; background: #fff; box-shadow: 3px 3px 0 var(--preto); white-space: nowrap; }
/* placar do exercício: explosão "WOW!" */
.placar {
  display: inline-flex; align-items: center; gap: 8px;
  font: 1.15rem var(--fonte-titulo); letter-spacing: 1px;
  background: #fff; border: var(--borda); padding: 3px 12px; box-shadow: 3px 3px 0 var(--preto);
}
.placar:empty { display: none; }
.placar .onom {
  color: var(--vermelho); font-size: 1.35rem; transform: rotate(-4deg); display: inline-block;
}
.placar.tudo { background: var(--amarelo); }
.aviso { margin: 12px 0 0; font-size: .95rem; color: var(--azul); font-style: italic; font-weight: 700; }
.aviso:empty { display: none; }

.rodape { text-align: center; font-size: .85rem; color: var(--verde); padding: 20px 12px; font-weight: 700; }

/* ---------- nome do aluno na capa ---------- */
.capa-nome {
  display: inline-block; margin: 10px 0 0 8px; padding: 3px 12px;
  background: var(--amarelo); color: var(--preto); border: var(--borda);
  box-shadow: 3px 3px 0 var(--preto); font: 1.15rem var(--fonte-titulo); letter-spacing: 1px;
  cursor: pointer; transform: rotate(1.5deg);
}
.capa-nome:hover { background: #fff; }
.capa-nome:focus { outline: 4px solid var(--papel); outline-offset: 2px; }

/* ---------- janela do nome ---------- */
.modal-fundo {
  position: fixed; inset: 0; z-index: 50; padding: 16px;
  background: rgba(20, 22, 26, .72); display: grid; place-items: center;
}
.modal {
  width: min(430px, 100%); background: var(--papel); border: var(--borda);
  box-shadow: 8px 8px 0 var(--tigre); padding: 22px 20px 18px; transform: rotate(-.6deg);
}
.modal-titulo {
  font: clamp(1.8rem, 7vw, 2.4rem) var(--fonte-titulo); letter-spacing: 1px; line-height: 1.05;
  margin: 0; color: var(--vermelho); -webkit-text-stroke: 1px var(--preto); text-shadow: 3px 3px 0 var(--preto);
  text-wrap: balance;
}
.modal-sub { margin: 6px 0 14px; color: var(--azul); font-style: italic; font-weight: 700; }
.modal-campo { display: block; width: 100%; font-size: 1.25rem; min-height: 48px; }
.modal-erro { margin: 8px 0 0; min-height: 1.4em; color: var(--erro); font-weight: 700; }
.modal .acoes { margin-top: 6px; }

/* ---------- painel "Terminou por hoje?" ---------- */
.painel-envio {
  display: grid; gap: 8px; justify-items: start;
  background: var(--amarelo); border: var(--borda); box-shadow: 7px 7px 0 var(--preto);
  padding: 18px 20px; margin: 4px 0 20px; transform: rotate(.4deg);
}
.painel-envio-titulo {
  font: 2rem var(--fonte-titulo); letter-spacing: 1.5px; line-height: 1;
  margin: 0; text-transform: uppercase;
}
.painel-envio p { margin: 0; font-weight: 700; max-width: 60ch; }
.btn-enviar { background: var(--verde); color: #fff; margin-top: 4px; }
.btn:disabled { opacity: .6; cursor: progress; }

/* ---------- aviso do envio ---------- */
.aviso-envio {
  position: fixed; left: 50%; bottom: 16px; z-index: 40; transform: translateX(-50%);
  width: min(540px, calc(100% - 24px)); padding: 10px 14px;
  background: #FFF6CC; border: var(--borda); box-shadow: 5px 5px 0 var(--preto); font-weight: 700;
}
/* ---------- parar e enviar / retomar ---------- */
.btn-parar { background: var(--verde); color: #fff; white-space: nowrap; flex: 0 0 auto; }
.rodape .btn-mini { margin-top: 6px; }
.painel-envio .acoes { margin-top: 4px; }
.cartao { scroll-margin-top: 96px; }

.aviso-envio.ok   { background: var(--ok-bg);   border-color: var(--ok); }
.aviso-envio.erro { background: var(--erro-bg); border-color: var(--erro); }

/* ---------- celular ---------- */
@media (max-width: 560px) {
  body { font-size: 16px; }
  /* capa */
  .capa-inner { padding: 14px 12px; gap: 10px; }
  .edicao { width: 52px; height: 52px; }
  .edicao span { font-size: .65rem; }
  .edicao strong { font-size: 1.4rem; }
  h1 { text-shadow: 3px 3px 0 var(--preto), 5px 5px 0 var(--vermelho); }
  .capa-figura { width: 64px; height: 64px; }
  .capa-sub { font-size: .75rem; margin-top: 8px; }
  /* placar fixo compacto: uma linha só */
  .placar-inner { padding: 5px 8px; gap: 8px; }
  .estrela { min-width: 78px; height: 48px; font-size: 1rem; padding: 0 8px; }
  #pontos-det { font-size: .74rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra { height: 9px; margin-top: 2px; }
  .btn-mini { font-size: .8rem; padding: 4px 8px; letter-spacing: 1px; }
  /* abas */
  .abas-wrap { margin-top: 12px; padding: 0 8px; }
  .aba { padding: 5px 10px 5px 5px; font-size: .9rem; }
  /* tema e quadros */
  .tema-cab { gap: 12px; margin: 10px 2px 26px; }
  .tema-icone { width: 64px; height: 64px; flex-basis: 64px; }
  .conteudo { padding: 6px 8px 50px; }
  .cartao { padding: 24px 10px 14px; margin-bottom: 30px; transform: none; box-shadow: 5px 5px 0 var(--preto); }
  .selo { font-size: 1.15rem; padding: 1px 10px; top: -16px; left: 10px; }
  .cartao-b .selo { right: 10px; }
  .enun { padding: 8px 12px; font-size: 1.05rem; border-radius: 16px; }
  .enun-pt { margin-left: 6px; padding: 5px 10px; font-size: .95rem; }
  .leitura { padding: 8px 10px; box-shadow: 3px 3px 0 var(--preto); }
  /* itens: alvos de toque maiores */
  .item { padding: 8px 6px; gap: 8px; }
  .item::before { flex-basis: 26px; height: 26px; font-size: .95rem; }
  .figura, .figura-falta { width: 54px; height: 54px; flex-basis: 54px; }
  .figura-falta { font-size: .55rem; }
  .campo { min-height: 42px; padding: 6px 8px; }
  .palavra { min-height: 44px; padding: 8px 12px; }
  .chip { padding: 6px 10px; }
  .btn { padding: 8px 14px; font-size: 1.1rem; }
  .acoes { gap: 10px; }
  .placar { font-size: 1.05rem; }
  /* banco de palavras ocupa a largura toda, abaixo do número e da figura */
  .item-ordenar { flex-wrap: wrap; }
  .item-ordenar .item-corpo { flex-basis: 100%; }
  .item-ordenar::after { position: absolute; right: 8px; top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}