/* ==========================================================================
   MACETES DE MATEMÁTICA — design system "Quadro de giz verde" (mockups)
   --------------------------------------------------------------------------
   Manual para quem desenha as telas. Só HTML + este CSS. Zero JS.

   ESQUELETO DE TODA TELA (copie de 01-home.html):
     <body>
       <main class="celular">
         <div class="tela">                      quadro verde + moldura de madeira
           <header class="topo">...</header>     barra superior (opcional)
           <section class="tela__conteudo">...</section>   área flexível
           <footer class="tela__rodape">...</footer>       (opcional)
           <div class="bandeja">...</div>        bandeja de giz decorativa (opcional)
         </div>
       </main>
     </body>
     Em viewport <= 430px o celular ocupa a tela inteira (PNG = tela do jogo).
     .tela__conteudo NÃO rola: o conteúdo precisa caber em 844px.
     Use .rolavel numa lista longa (Boletim, Caderno) se precisar.

   TIPOGRAFIA (classes)
     .t-titulo      título grande em giz (Cabin Sketch)       <h1 class="t-titulo">
     .t-subtitulo   subtítulo em giz (Gochi Hand 26px)
     .t-giz         texto corrido de giz (Gochi Hand 20px) — explicações
     .t-legenda     texto pequeno de giz, mais apagado
     .t-numero      número legível (Nunito 800) — SEMPRE em respostas/contas
     .t-amarelo .t-rosa .t-azul .t-verde .t-laranja .t-certo .t-errado   cor do giz
     .sublinhado    sublinhado rabiscado em giz amarelo
     .circulado     contorno rabiscado em volta de uma palavra/número

   ÍCONES (máscara SVG, herdam a cor do texto; 24px; --ico-tam muda o tamanho)
     <span class="ico ico--voltar"></span>
     nomes: voltar avancar fechar pausa config som musica livro figurinha check x
            cadeado play mapa lampada trofeu apagar relogio fogo pessoa paleta
            repetir estrela coracao chapeu (formatura)

   LAYOUT
     .pilha (coluna, gap 12) .pilha--p (gap 8) .pilha--g (gap 20)
     .linha (linha centrada, gap 8) .linha--entre (space-between)
     .centro (text-align center) .cresce (flex:1) .mt-auto (empurra p/ baixo)
     .grade-2  .grade-3   grades de colunas iguais

   COMPONENTES
     Barra superior   <header class="topo">
                        <a class="btn-icone" href="#"><span class="ico ico--voltar"></span></a>
                        <div class="topo__titulo">1º ano<small>Nível 5</small></div>
                        <div class="topo__acoes">...</div>
                      </header>
     Botões           <a class="btn btn--primario">       amarelo, ação principal
                      <a class="btn btn--secundario">     contorno de giz
                      <a class="btn btn--fantasma">       só texto de giz
                      modificadores: .btn--bloco (100%), .btn--grande, .btn--pequeno
                      <span class="btn__sub">linha menor dentro do botão</span>
                      <a class="btn-icone">  botão redondo só com ícone (.btn-icone--amarelo)
     Cartão           <div class="cartao">  (.cartao--destaque amarelo, .cartao--papel papel)
     Estrelas         <div class="estrelas"><span class="estrela"></span>
                        <span class="estrela"></span><span class="estrela estrela--vazia"></span></div>
                      .estrelas--p (16px) .estrelas--g (44px)
     Vidas            <div class="vidas"><span class="vida"></span><span class="vida"></span>
                        <span class="vida vida--perdida"></span></div>
     Timer (barra)    <div class="timer" style="--pct:62%"><span class="ico ico--relogio"></span>
                        <div class="timer__barra"></div><b class="timer__seg">7s</b></div>
                      .timer--alerta (rosa, quase acabando)  .timer--esgotado
     Placar           <div class="placar"><div class="score"><small>score</small>1.240</div>
                        <div class="combo">×4<small>combo</small></div></div>
     Progresso        <div class="progresso"><span class="ponto ponto--certo"></span>
                        <span class="ponto ponto--errado"></span><span class="ponto ponto--atual"></span>
                        <span class="ponto"></span>...</div>   (8 pontos = 8 perguntas)
     Conta no quadro  <div class="conta">563 − 199 = <span class="conta__vazio">?</span></div>
                      .conta--m (menor)  .conta__vazio--preenchido (resposta escrita)
     Opções (2x2)     <div class="opcoes"><button class="opcao">364</button>
                        <button class="opcao opcao--certa">364<span class="opcao__marca"></span></button>
                        <button class="opcao opcao--errada">362<span class="opcao__marca"></span></button>
                        <button class="opcao opcao--apagada">374</button></div>
     Visor + teclado  <div class="visor">36<span class="visor__cursor"></span></div>
                      <div class="teclado"><button class="tecla">1</button>...
                        <button class="tecla tecla--acao"><span class="ico ico--apagar"></span></button>
                        <button class="tecla">0</button><button class="tecla tecla--ok">OK</button></div>
     Nó de trilha     <a class="no no--concluido">3<span class="no__estrelas">...estrelas--p...</span></a>
                      estados: .no--bloqueado (põe <span class="ico ico--cadeado">)
                               .no--liberado  .no--concluido  .no--atual  .no--pulado
                      tipos:   .no--recap (losango)  .no--prova (maior, troféu)
                      <span class="no__rotulo">Arredondar</span> legenda sob o nó
                      .trilha (coluna) + .trilha__ligacao (traço pontilhado vertical)
     Cadeado          <span class="cadeado"><span class="ico ico--cadeado"></span></span>
     Badge            <span class="badge">Fácil</span>  .badge--amarelo --rosa --azul --verde --madeira
     Modal            <div class="overlay"><div class="modal">
                        <h2 class="modal__titulo">...</h2> ... <div class="modal__acoes">...</div>
                      </div></div>   (coloque como último filho de .tela)
     Toast            <div class="toast"><span class="ico ico--estrela"></span> Conquista!</div>
                      (fica no topo da .tela; .toast--baixo no rodapé)
     Toggle           <label class="toggle"><input type="checkbox" checked><span class="toggle__trilho"></span></label>
     Slider           <input class="slider" type="range" value="70" style="--pct:70%">
     Atalho           <a class="atalho"><span class="ico ico--livro t-azul"></span>Boletim</a>  (use em .grade-3)
     Lista de ajustes <div class="item"><span class="ico ..."></span><span class="cresce">Música</span>...</div>
     Papel            <div class="papel">  folha creme (diploma, boletim impresso)
     Rabiscos         <span class="rabisco" style="top:120px;left:20px;--r:-8deg">7 × 8 = 56</span>
                      contas apagadas de fundo, decorativas (pointer-events: none)
     Mancha           <span class="mancha" style="top:..;left:..;--w:180px"></span> marca de apagador
     Bandeja de giz   <div class="bandeja"><span class="bandeja__giz"></span>
                        <span class="bandeja__giz bandeja__giz--amarelo"></span>
                        <span class="bandeja__apagador"></span></div>
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@400;700&family=Gochi+Hand&family=Nunito:wght@700;800;900&display=swap");

:root {
  /* quadro */
  --quadro: #2f5b45;
  --quadro-claro: #3e6f57;
  --quadro-escuro: #1e3e2f;
  /* giz */
  --giz: #f4f1e7;
  --giz-suave: rgba(244, 241, 231, 0.78);
  --giz-traco: rgba(244, 241, 231, 0.55);
  --giz-fraco: rgba(244, 241, 231, 0.28);
  --giz-po: rgba(244, 241, 231, 0.08);
  --giz-amarelo: #f8de6f;
  --giz-rosa: #f7a8c0;
  --giz-azul: #95d2f3;
  --giz-verde: #b4ec9f;
  --giz-laranja: #f8b46a;
  /* madeira */
  --madeira: #9b6435;
  --madeira-clara: #c48a55;
  --madeira-escura: #5f3817;
  /* estados */
  --certo: #86e08f;
  --certo-fundo: rgba(134, 224, 143, 0.2);
  --errado: #ff8a80;
  --errado-fundo: rgba(255, 138, 128, 0.2);
  /* fora do quadro */
  --parede: #e8dcc2;
  --papel: #f8f0dc;
  --tinta: #2d2a26;
  /* fontes */
  --fonte-titulo: "Cabin Sketch", "Gochi Hand", cursive;
  --fonte-giz: "Gochi Hand", "Comic Sans MS", cursive;
  --fonte-numero: "Nunito", system-ui, sans-serif;
  /* espaço e raios */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --raio-p: 10px;
  --raio-m: 16px;
  --raio-g: 24px;
  --raio-giz: 14px 20px 12px 22px / 20px 12px 22px 14px; /* canto "à mão" */
  --sombra-giz: 0 0 1px rgba(255, 255, 255, 0.55), 0 0 6px rgba(255, 255, 255, 0.18);
  /* texturas */
  --ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .2 0 0 0 0 .15 0 0 0 1.4 -.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --rabisco-linha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C40 3 80 10 120 6 S180 4 198 7' fill='none' stroke='%23f8de6f' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M10 10 C60 7 110 11 190 8' fill='none' stroke='%23f8de6f' stroke-width='1.5' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E");
  --madeira-veios: repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 9px, rgba(255, 255, 255, 0.06) 9px 11px, transparent 11px 23px);
}

* {
  box-sizing: border-box;
}

/* ---------- página e celular ---------- */

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.5), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.025) 0 2px, transparent 2px 60px),
    var(--parede);
  font-family: var(--fonte-giz);
  color: var(--giz);
}

.celular {
  position: relative;
  width: 390px;
  height: 844px;
  border-radius: 46px;
  overflow: hidden;
  box-shadow:
    0 0 0 10px #1c1c1c,
    0 0 0 12px #3a3a3a,
    0 30px 70px rgba(40, 25, 10, 0.45);
}

@media (max-width: 430px) {
  body {
    display: block;
    padding: 0;
  }

  .celular {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 640px;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---------- a tela de quadro ---------- */

.tela {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 9px solid var(--madeira);
  border-image: linear-gradient(135deg, var(--madeira-clara), var(--madeira) 30%, var(--madeira-escura) 70%, var(--madeira)) 1;
  background:
    radial-gradient(ellipse 60% 18% at 30% 22%, var(--giz-po), transparent 70%),
    radial-gradient(ellipse 50% 14% at 75% 58%, rgba(244, 241, 231, 0.06), transparent 70%),
    radial-gradient(ellipse 70% 12% at 40% 86%, rgba(244, 241, 231, 0.05), transparent 70%),
    var(--ruido),
    radial-gradient(ellipse at 50% 40%, var(--quadro-claro), var(--quadro) 55%, var(--quadro-escuro) 100%);
  box-shadow: inset 0 0 0 2px var(--madeira-escura), inset 0 0 50px rgba(0, 0, 0, 0.45);
  font-family: var(--fonte-giz);
  font-size: 20px;
  line-height: 1.25;
  color: var(--giz);
}

/* grão de giz por cima de tudo (dá aspereza aos traços) */
.tela::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: var(--grao);
  opacity: 0.22;
}

.tela__conteudo {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-4) var(--esp-4);
}

.tela__rodape {
  position: relative;
  z-index: 1;
  padding: 0 var(--esp-4) var(--esp-4);
}

.rolavel {
  overflow-y: auto;
  scrollbar-width: none;
}

.rolavel::-webkit-scrollbar {
  display: none;
}

/* ---------- layout ---------- */

.pilha { display: flex; flex-direction: column; gap: var(--esp-3); }
.pilha--p { gap: var(--esp-2); }
.pilha--g { gap: 20px; }
.linha { display: flex; align-items: center; gap: var(--esp-2); }
.linha--entre { justify-content: space-between; }
.linha--centro { justify-content: center; }
.centro { text-align: center; align-items: center; }
.cresce { flex: 1; min-width: 0; }
.mt-auto { margin-top: auto; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3); }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-3); }

/* ---------- tipografia ---------- */

.t-titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--giz);
  text-shadow: var(--sombra-giz);
}

.t-subtitulo {
  margin: 0;
  font-family: var(--fonte-giz);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  text-shadow: var(--sombra-giz);
}

.t-giz {
  margin: 0;
  font-family: var(--fonte-giz);
  font-size: 20px;
  line-height: 1.3;
  color: var(--giz);
  text-shadow: var(--sombra-giz);
}

.t-legenda {
  margin: 0;
  font-family: var(--fonte-giz);
  font-size: 16px;
  line-height: 1.2;
  color: var(--giz-suave);
}

.t-numero {
  font-family: var(--fonte-numero);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* cores de giz (.t-amarelo etc.): ficam no FIM do arquivo para vencer componentes */

.sublinhado {
  padding-bottom: 6px;
  background: var(--rabisco-linha) bottom / 100% 10px no-repeat;
}

.circulado {
  display: inline-block;
  padding: 0 8px;
  border: 2.5px solid var(--giz-amarelo);
  border-radius: 55% 45% 50% 50% / 60% 50% 50% 40%;
  transform: rotate(-2deg);
}

/* ---------- ícones (máscara) ---------- */

.ico {
  --ico-tam: 24px;
  display: inline-block;
  flex: none;
  width: var(--ico-tam);
  height: var(--ico-tam);
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
  vertical-align: middle;
}

.ico--voltar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4.5 7.5 12l7.5 7.5'/%3E%3C/svg%3E"); }
.ico--avancar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5 16.5 12 9 19.5'/%3E%3C/svg%3E"); }
.ico--fechar,
.ico--x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.ico--check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 6.5'/%3E%3C/svg%3E"); }
.ico--pausa { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M8.5 5v14M15.5 5v14'/%3E%3C/svg%3E"); }
.ico--config { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9 7 7M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1'/%3E%3C/svg%3E"); }
.ico--som { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E"); }
.ico--musica { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E"); }
.ico--livro { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11a3 3 0 0 1 3 3v14H8a3 3 0 0 1-3-3z'/%3E%3Cpath d='M5 18a3 3 0 0 1 3-3h11M9 8h6'/%3E%3C/svg%3E"); }
.ico--figurinha { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h6z'/%3E%3Cpath d='M13 20v-4a3 3 0 0 1 3-3h4M9 10h.01M15 10h.01'/%3E%3C/svg%3E"); }
.ico--cadeado { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5M12 14.5v2'/%3E%3C/svg%3E"); }
.ico--play { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4.5c0-.8.9-1.3 1.6-.8l10 6.6c.6.4.6 1.3 0 1.7l-10 6.6c-.7.4-1.6 0-1.6-.9z' fill='black'/%3E%3C/svg%3E"); }
.ico--mapa { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2zM9 4v14M15 6v14'/%3E%3C/svg%3E"); }
.ico--lampada { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.8.8 1 1.5 1 2.5h6c0-1 .2-1.7 1-2.5A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.ico--trofeu { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0zM7 6H4a3 3 0 0 0 3.5 4M17 6h3a3 3 0 0 1-3.5 4M12 14v3M8 21h8M9 17.5h6'/%3E%3C/svg%3E"); }
.ico--apagar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5h11v14H9l-6-7zM12 9.5l5 5M17 9.5l-5 5'/%3E%3C/svg%3E"); }
.ico--relogio { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13.5' r='7.5'/%3E%3Cpath d='M12 10v3.5l2.5 2M10 2.5h4'/%3E%3C/svg%3E"); }
.ico--fogo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c.8 4 6.5 6 6.5 11.5a6.5 6.5 0 0 1-13 0c0-3.2 2-4.6 2.3-7.6 1.9 1 3.2 3 3.2 5.4 1.3-2 1.5-5.6 1-9.3z' fill='black'/%3E%3C/svg%3E"); }
.ico--pessoa { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.ico--paleta { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1.5 0 2-1 2-2s-1-2 0-3 2-1 3-1a4 4 0 0 0 4-4c0-4.5-4-8-9-8z'/%3E%3Ccircle cx='7.5' cy='11' r='.6'/%3E%3Ccircle cx='11' cy='7' r='.6'/%3E%3Ccircle cx='16' cy='8.5' r='.6'/%3E%3C/svg%3E"); }
.ico--repetir { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0 1 14-5.3L20 9M20 4v5h-5M20 12a8 8 0 0 1-14 5.3L4 15M4 20v-5h5'/%3E%3C/svg%3E"); }
.ico--estrela { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6 6.6.9-4.8 4.6 1.2 6.6L12 17.1l-5.9 3.2 1.2-6.6-4.8-4.6 6.6-.9z' fill='black' stroke='black' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ico--coracao { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21 10.6 19.7C5.4 15 2 12 2 8.2 2 5.1 4.4 2.8 7.4 2.8c1.8 0 3.4.8 4.6 2.1 1.2-1.3 2.8-2.1 4.6-2.1 3 0 5.4 2.3 5.4 5.4 0 3.8-3.4 6.8-8.6 11.5z' fill='black'/%3E%3C/svg%3E"); }
.ico--chapeu { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c3 2.5 9 2.5 12 0v-5M22 9v6'/%3E%3C/svg%3E"); }

/* ---------- barra superior ---------- */

.topo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 64px;
  padding: var(--esp-3) var(--esp-3) var(--esp-2);
}

.topo__titulo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  text-shadow: var(--sombra-giz);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topo__titulo small {
  margin-top: 3px;
  font-family: var(--fonte-giz);
  font-weight: 400;
  font-size: 16px;
  color: var(--giz-suave);
}

.topo__acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

/* ---------- botões ---------- */

.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--raio-giz);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn > .linha {
  gap: 10px;
}

.btn__sub {
  font-family: var(--fonte-giz);
  font-weight: 400;
  font-size: 15px;
  opacity: 0.85;
}

.btn--primario {
  color: var(--quadro-escuro);
  background:
    var(--ruido),
    linear-gradient(180deg, #fbe88f, var(--giz-amarelo) 60%, #eccb4f);
  box-shadow: 0 5px 0 #b8952c, 0 8px 18px rgba(0, 0, 0, 0.35);
}

.btn--secundario {
  color: var(--giz);
  background: rgba(244, 241, 231, 0.06);
  border: 2.5px solid var(--giz-traco);
  text-shadow: var(--sombra-giz);
}

.btn--fantasma {
  min-height: 44px;
  color: var(--giz-suave);
  background: none;
  font-family: var(--fonte-giz);
  font-weight: 400;
  font-size: 20px;
}

.btn--bloco { display: flex; width: 100%; }
.btn--grande { min-height: 72px; font-size: 30px; }
.btn--pequeno { min-height: 40px; padding: 6px 14px; font-size: 18px; }

.btn-icone {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50% 46% 52% 48%;
  border: 2.5px solid var(--giz-traco);
  background: rgba(0, 0, 0, 0.12);
  color: var(--giz);
  text-decoration: none;
}

.btn-icone--amarelo {
  border-color: transparent;
  background: var(--giz-amarelo);
  color: var(--quadro-escuro);
  box-shadow: 0 4px 0 #b8952c;
}

/* ---------- cartão / papel ---------- */

.cartao {
  position: relative;
  padding: var(--esp-4);
  border: 2.5px solid var(--giz-traco);
  border-radius: var(--raio-giz);
  background: rgba(10, 30, 20, 0.22);
}

.cartao--destaque {
  border-color: var(--giz-amarelo);
  background: rgba(248, 222, 111, 0.08);
}

.cartao--papel,
.papel {
  color: var(--tinta);
  border: 0;
  border-radius: 6px;
  background:
    var(--ruido),
    linear-gradient(180deg, #fdf7e6, var(--papel));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  text-shadow: none;
}

.papel {
  position: relative;
  padding: var(--esp-5);
}

/* ---------- estrelas ---------- */

.estrelas {
  --tam: 28px;
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  filter: drop-shadow(0 0 4px rgba(248, 222, 111, 0.45));
}

.estrelas--p { --tam: 16px; gap: 2px; }
.estrelas--g { --tam: 46px; gap: 8px; }
/* estrela do meio maior (tela de resultado) */
.estrelas--arco .estrela:nth-child(2) { width: calc(var(--tam) * 1.3); height: calc(var(--tam) * 1.3); margin-bottom: 10px; }

.estrela {
  display: inline-block;
  width: var(--tam);
  height: var(--tam);
  background: var(--giz-amarelo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6 6.6.9-4.8 4.6 1.2 6.6L12 17.1l-5.9 3.2 1.2-6.6-4.8-4.6 6.6-.9z' fill='black' stroke='black' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6 6.6.9-4.8 4.6 1.2 6.6L12 17.1l-5.9 3.2 1.2-6.6-4.8-4.6 6.6-.9z' fill='black' stroke='black' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.estrela--vazia {
  background: var(--giz-fraco);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6l2.5 5.2 5.6.8-4.1 3.9 1 5.6-5-2.7-5 2.7 1-5.6-4.1-3.9 5.6-.8z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-dasharray='3 1.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6l2.5 5.2 5.6.8-4.1 3.9 1 5.6-5-2.7-5 2.7 1-5.6-4.1-3.9 5.6-.8z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-dasharray='3 1.6'/%3E%3C/svg%3E");
}

/* ---------- vidas ---------- */

.vidas {
  display: inline-flex;
  gap: 4px;
  filter: drop-shadow(0 0 3px rgba(247, 168, 192, 0.5));
}

.vida {
  display: inline-block;
  width: 26px;
  height: 26px;
  background: var(--giz-rosa);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21 10.6 19.7C5.4 15 2 12 2 8.2 2 5.1 4.4 2.8 7.4 2.8c1.8 0 3.4.8 4.6 2.1 1.2-1.3 2.8-2.1 4.6-2.1 3 0 5.4 2.3 5.4 5.4 0 3.8-3.4 6.8-8.6 11.5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21 10.6 19.7C5.4 15 2 12 2 8.2 2 5.1 4.4 2.8 7.4 2.8c1.8 0 3.4.8 4.6 2.1 1.2-1.3 2.8-2.1 4.6-2.1 3 0 5.4 2.3 5.4 5.4 0 3.8-3.4 6.8-8.6 11.5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vida--perdida {
  background: var(--giz-fraco);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-dasharray='3 1.8'%3E%3Cpath d='M12 20 10.9 19C6 14.6 3 11.8 3 8.3 3 5.6 5.1 3.8 7.5 3.8c1.7 0 3.4.9 4.5 2.3 1.1-1.4 2.8-2.3 4.5-2.3 2.4 0 4.5 1.8 4.5 4.5 0 3.5-3 6.3-7.9 10.7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-dasharray='3 1.8'%3E%3Cpath d='M12 20 10.9 19C6 14.6 3 11.8 3 8.3 3 5.6 5.1 3.8 7.5 3.8c1.7 0 3.4.9 4.5 2.3 1.1-1.4 2.8-2.3 4.5-2.3 2.4 0 4.5 1.8 4.5 4.5 0 3.5-3 6.3-7.9 10.7z'/%3E%3C/svg%3E");
}

/* ---------- timer ---------- */

.timer {
  --pct: 100%;
  --cor: var(--giz-azul);
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--cor);
}

.timer__barra {
  flex: 1;
  height: 14px;
  border: 2px solid var(--giz-traco);
  border-radius: 10px 14px 9px 12px;
  background:
    linear-gradient(90deg, var(--cor) var(--pct), transparent var(--pct)) padding-box;
  box-shadow: 0 0 8px rgba(149, 210, 243, 0.25);
}

.timer__seg {
  min-width: 34px;
  text-align: right;
  font-family: var(--fonte-numero);
  font-weight: 800;
  font-size: 18px;
}

.timer--alerta { --cor: var(--giz-rosa); }
.timer--esgotado { --cor: var(--giz-fraco); --pct: 0%; }

/* ---------- placar: score e combo ---------- */

.placar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
}

.score {
  display: flex;
  flex-direction: column;
  font-family: var(--fonte-numero);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  color: var(--giz);
}

.score small,
.combo small {
  font-family: var(--fonte-giz);
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--giz-suave);
}

.combo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 3px solid var(--giz-laranja);
  border-radius: 52% 48% 50% 50% / 48% 52% 48% 52%;
  font-family: var(--fonte-numero);
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  color: var(--giz-laranja);
  transform: rotate(-6deg);
  box-shadow: 0 0 14px rgba(248, 180, 106, 0.35);
}

.combo small { font-size: 11px; color: var(--giz-laranja); }

/* ---------- progresso das perguntas ---------- */

.progresso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ponto {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px dashed var(--giz-fraco);
  border-radius: 50%;
  color: var(--quadro-escuro);
}

.ponto--certo,
.ponto--errado {
  border-style: solid;
}

.ponto--certo { border-color: var(--certo); background: var(--certo); }
.ponto--errado { border-color: var(--errado); background: var(--errado); }

.ponto--certo::before,
.ponto--errado::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ponto--errado::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

.ponto--atual {
  width: 30px;
  height: 30px;
  border: 3px solid var(--giz-amarelo);
  box-shadow: 0 0 10px rgba(248, 222, 111, 0.55);
}

/* ---------- conta no quadro ---------- */

.conta {
  font-family: var(--fonte-numero);
  font-weight: 800;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
  color: var(--giz);
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.5), 0 0 12px rgba(255, 255, 255, 0.15);
}

.conta--m { font-size: 40px; }

.conta__vazio {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 6px;
  border-bottom: 4px dashed var(--giz-amarelo);
  color: var(--giz-amarelo);
  text-align: center;
}

.conta__vazio--preenchido {
  border-bottom-style: solid;
}

/* ---------- opções de resposta ---------- */

.opcoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.opcao {
  position: relative;
  display: grid;
  place-items: center;
  height: 92px;
  border: 3px solid var(--giz-traco);
  border-radius: var(--raio-giz);
  background:
    var(--ruido),
    rgba(10, 30, 20, 0.28);
  color: var(--giz);
  font-family: var(--fonte-numero);
  font-weight: 800;
  font-size: 38px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.opcao:nth-child(2) { border-radius: 20px 12px 22px 14px / 12px 22px 14px 20px; }
.opcao:nth-child(3) { border-radius: 12px 22px 16px 18px / 22px 14px 20px 12px; }

.opcao--certa {
  border-color: var(--certo);
  background: var(--certo-fundo);
  color: var(--certo);
  box-shadow: 0 0 18px rgba(134, 224, 143, 0.35);
}

.opcao--errada {
  border-color: var(--errado);
  background: var(--errado-fundo);
  color: var(--errado);
}

.opcao--apagada {
  opacity: 0.35;
}

.opcao__marca {
  position: absolute;
  top: -12px;
  right: -10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--certo);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}

.opcao__marca::before {
  content: "";
  position: absolute;
  inset: 6px;
  background: var(--quadro-escuro);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.opcao--errada .opcao__marca { background: var(--errado); }

.opcao--errada .opcao__marca::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

/* ---------- visor e teclado numérico ---------- */

.visor {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  border-bottom: 4px solid var(--giz-amarelo);
  font-family: var(--fonte-numero);
  font-weight: 800;
  font-size: 52px;
  color: var(--giz-amarelo);
  font-variant-numeric: tabular-nums;
}

.visor__cursor {
  width: 4px;
  height: 46px;
  margin-left: 4px;
  border-radius: 2px;
  background: var(--giz-amarelo);
  opacity: 0.8;
}

.teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background:
    var(--madeira-veios),
    linear-gradient(180deg, var(--madeira), var(--madeira-escura));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 6px 14px rgba(0, 0, 0, 0.4);
}

.tecla {
  display: grid;
  place-items: center;
  height: 62px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #355f4a, var(--quadro-escuro));
  color: var(--giz);
  font-family: var(--fonte-numero);
  font-weight: 800;
  font-size: 30px;
  box-shadow: 0 4px 0 #13281e, inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

.tecla--acao { color: var(--giz-rosa); }

.tecla--ok {
  background: linear-gradient(180deg, #fbe88f, var(--giz-amarelo));
  color: var(--quadro-escuro);
  font-size: 26px;
  font-weight: 900;
  box-shadow: 0 4px 0 #b8952c;
}

/* ---------- trilha de níveis ---------- */

.trilha {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trilha__ligacao {
  width: 0;
  height: 26px;
  border-left: 4px dotted var(--giz-traco);
}

.trilha__ligacao--feita { border-left-color: var(--giz-amarelo); }

.no {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 66px;
  height: 66px;
  border: 3.5px solid var(--giz-traco);
  border-radius: 50% 47% 52% 49%;
  background: rgba(10, 30, 20, 0.3);
  color: var(--giz);
  font-family: var(--fonte-numero);
  font-weight: 900;
  font-size: 26px;
  text-decoration: none;
}

.no--liberado {
  border-color: var(--giz);
  box-shadow: 0 0 10px rgba(244, 241, 231, 0.2);
}

.no--concluido {
  border-color: var(--giz-verde);
  background: var(--giz-verde);
  color: var(--quadro-escuro);
  box-shadow: 0 4px 0 #6fa65f;
}

.no--atual {
  width: 78px;
  height: 78px;
  border-color: var(--giz-amarelo);
  background: var(--giz-amarelo);
  color: var(--quadro-escuro);
  font-size: 30px;
  box-shadow: 0 0 0 7px rgba(248, 222, 111, 0.22), 0 0 26px rgba(248, 222, 111, 0.6), 0 5px 0 #b8952c;
}

.no--bloqueado {
  border-style: dashed;
  border-color: var(--giz-fraco);
  color: var(--giz-fraco);
  background: rgba(0, 0, 0, 0.15);
}

/* liberado pela prova direta, ainda sem estrelas */
.no--pulado {
  border-style: dashed;
  border-color: var(--giz-azul);
  color: var(--giz-azul);
}

.no--recap {
  border-radius: 12px;
  transform: rotate(45deg) scale(0.85);
}

.no--recap > * { transform: rotate(-45deg); }

.no--prova {
  width: 86px;
  height: 86px;
  border-radius: 18px 24px 16px 26px / 24px 16px 26px 18px;
}

.no__estrelas {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
}

.no__rotulo {
  display: block;
  margin-top: 6px;
  font-family: var(--fonte-giz);
  font-size: 16px;
  text-align: center;
  color: var(--giz-suave);
}

/* ---------- cadeado, badge ---------- */

.cadeado {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: var(--giz-suave);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px 4px;
  border: 2px solid currentColor;
  border-radius: 999px 900px 999px 950px;
  font-family: var(--fonte-giz);
  font-size: 16px;
  line-height: 1.1;
  color: var(--giz);
  white-space: nowrap;
}

.badge .ico { --ico-tam: 16px; }

.badge--amarelo { color: var(--quadro-escuro); background: var(--giz-amarelo); border-color: var(--giz-amarelo); }
.badge--rosa { color: var(--quadro-escuro); background: var(--giz-rosa); border-color: var(--giz-rosa); }
.badge--azul { color: var(--quadro-escuro); background: var(--giz-azul); border-color: var(--giz-azul); }
.badge--verde { color: var(--quadro-escuro); background: var(--giz-verde); border-color: var(--giz-verde); }
.badge--madeira { color: var(--papel); background: var(--madeira); border-color: var(--madeira-escura); }

/* ---------- modal, overlay, toast ---------- */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: var(--esp-5);
  background: rgba(8, 22, 15, 0.72);
  backdrop-filter: blur(2px);
}

.modal {
  position: relative;
  width: 100%;
  padding: var(--esp-5) 20px 20px;
  border: 8px solid var(--madeira);
  border-image: linear-gradient(135deg, var(--madeira-clara), var(--madeira) 40%, var(--madeira-escura)) 1;
  background:
    var(--ruido),
    radial-gradient(ellipse at 50% 30%, var(--quadro-claro), var(--quadro));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.modal__titulo {
  margin: 0 0 var(--esp-2);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.05;
  text-shadow: var(--sombra-giz);
}

.modal__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin-top: 20px;
}

.toast {
  position: absolute;
  z-index: 45;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 2.5px solid var(--giz-amarelo);
  border-radius: var(--raio-giz);
  background: var(--quadro-escuro);
  color: var(--giz-amarelo);
  font-size: 19px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.toast--baixo {
  top: auto;
  bottom: 70px;
}

/* ---------- toggle e slider ---------- */

.toggle {
  position: relative;
  display: inline-block;
  flex: none;
  width: 58px;
  height: 32px;
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle__trilho {
  position: absolute;
  inset: 0;
  border: 2.5px solid var(--giz-traco);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
}

.toggle__trilho::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--giz-suave);
  transition: transform 0.2s;
}

.toggle input:checked + .toggle__trilho {
  border-color: var(--giz-amarelo);
  background: rgba(248, 222, 111, 0.25);
}

.toggle input:checked + .toggle__trilho::before {
  transform: translateX(26px);
  background: var(--giz-amarelo);
}

.slider {
  --pct: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: none;
}

.slider::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--giz-amarelo) var(--pct), rgba(244, 241, 231, 0.2) var(--pct));
}

.slider::-moz-range-track {
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--giz-amarelo) var(--pct), rgba(244, 241, 231, 0.2) var(--pct));
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--giz);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

.slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--giz);
}

/* ---------- atalho (ícone grande + legenda, ex.: Home) ---------- */

.atalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  padding: 10px 6px;
  border: 2.5px solid var(--giz-traco);
  border-radius: var(--raio-giz);
  background: rgba(10, 30, 20, 0.22);
  color: var(--giz);
  font-size: 18px;
  text-decoration: none;
  text-shadow: var(--sombra-giz);
}

.atalho .ico { --ico-tam: 30px; }
.atalho:nth-child(2) { border-radius: 20px 12px 22px 14px / 12px 22px 14px 20px; }

/* ---------- item de lista (ajustes, boletim) ---------- */

.item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 56px;
  padding: var(--esp-2) 0;
  border-bottom: 2px dashed var(--giz-fraco);
}

.item:last-child { border-bottom: 0; }

/* ---------- decoração: rabiscos, manchas, bandeja ---------- */

.rabisco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  font-family: var(--fonte-giz);
  font-size: 22px;
  white-space: nowrap;
  color: var(--giz);
  opacity: 0.14;
  transform: rotate(var(--r, 0deg));
}

.mancha {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: var(--w, 160px);
  height: calc(var(--w, 160px) * 0.35);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(244, 241, 231, 0.09), transparent 70%);
  transform: rotate(var(--r, -6deg));
}

.bandeja {
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 18px;
  padding: 0 28px;
  background:
    var(--madeira-veios),
    linear-gradient(180deg, var(--madeira-clara), var(--madeira) 45%, var(--madeira-escura));
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.35);
}

.bandeja__giz {
  width: 46px;
  height: 9px;
  margin-bottom: 1px;
  border-radius: 3px 5px 5px 3px;
  background: linear-gradient(180deg, #fff, #dcd8cc);
  transform: translateY(-9px) rotate(-3deg);
}

.bandeja__giz--amarelo { width: 34px; background: linear-gradient(180deg, #fff2a8, var(--giz-amarelo)); transform: translateY(-9px) rotate(2deg); }
.bandeja__giz--rosa { width: 26px; background: linear-gradient(180deg, #ffd3df, var(--giz-rosa)); }
.bandeja__giz--azul { width: 30px; background: linear-gradient(180deg, #d1ecfb, var(--giz-azul)); }

.bandeja__apagador {
  width: 74px;
  height: 20px;
  margin-left: auto;
  border-radius: 4px;
  background:
    linear-gradient(180deg, #8a5a2e 0 55%, #3b3b3b 55% 100%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 -3px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-11px);
}

/* ---------- utilitários de cor (no fim para vencer os componentes) ---------- */

.t-amarelo { color: var(--giz-amarelo); }
.t-rosa { color: var(--giz-rosa); }
.t-azul { color: var(--giz-azul); }
.t-verde { color: var(--giz-verde); }
.t-laranja { color: var(--giz-laranja); }
.t-certo { color: var(--certo); }
.t-errado { color: var(--errado); }

/* ==========================================================================
   GALERIA (design/index.html) — não usar nas telas
   ========================================================================== */

body.galeria {
  display: block;
  padding: 40px 32px 80px;
  color: var(--tinta);
  font-family: var(--fonte-giz);
}

.galeria__cabecalho {
  max-width: 1200px;
  margin: 0 auto 32px;
  padding: 28px 32px;
  border: 12px solid var(--madeira);
  border-image: linear-gradient(135deg, var(--madeira-clara), var(--madeira) 40%, var(--madeira-escura)) 1;
  background:
    var(--ruido),
    radial-gradient(ellipse at 40% 30%, var(--quadro-claro), var(--quadro));
  color: var(--giz);
}

.galeria__cabecalho p {
  margin: 10px 0 0;
  font-size: 20px;
  color: var(--giz-suave);
}

.galeria__grade {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px 22px;
}

.galeria__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--tinta);
  text-decoration: none;
}

.galeria__janela {
  position: relative;
  width: 195px;
  height: 422px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--quadro-escuro);
  box-shadow: 0 0 0 5px #1c1c1c, 0 14px 30px rgba(40, 25, 10, 0.35);
}

.galeria__janela iframe {
  width: 390px;
  height: 844px;
  border: 0;
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;
}

.galeria__rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  line-height: 1.1;
  text-align: center;
}

.galeria__num {
  font-family: var(--fonte-numero);
  font-weight: 900;
  font-size: 15px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--quadro);
  color: var(--giz);
}

.galeria__secao {
  grid-column: 1 / -1;
  margin: 18px 0 -6px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 28px;
  color: var(--quadro-escuro);
  border-bottom: 3px dashed rgba(47, 91, 69, 0.35);
}

@media (max-width: 430px) {
  body.galeria {
    padding: 16px 12px 40px;
  }
}