/*
 * Identidade: fliperama de boteco. Jogo de guerra de PS1/PS2: chapa de metal rebitada, titulo dourado e estencil.
 * A tampinha e a ficha da maquina. Letra comum no texto: leitura vem antes do estilo.
 */
@font-face { font-family: "Guerra"; src: url("/fontes/black-ops-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Guerra"; src: url("/fontes/black-ops-one-ext.woff2") format("woff2"); font-display: swap; unicode-range: U+0100-02BA; }
@font-face { font-family: "Atkinson"; font-weight: 400; src: url("/fontes/atkinson-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Atkinson"; font-weight: 700; src: url("/fontes/atkinson-700.woff2") format("woff2"); font-display: swap; }
:root {
  --noite: #17181f;
  --noite-2: #0d0e13;
  --chumbo: #3b3f46;
  --areia: #d9c389;
  --areia-2: #b79f64;
  --areia-clara: #f1e4bb;
  --ouro: #ffcc1a;
  --alvo: #d8281e;
  --cobalto: #1c56b0;
  --oliva: #5c6b2c;
  --tinta: #15130d;
  --laranja: #e8791e;
  --din-pos: #0d5c28;
  --din-neg: #a3120d;
  --titulo: "Guerra", Impact, sans-serif;
  --numero: "Guerra", Impact, sans-serif;
  --corpo: "Atkinson", "Segoe UI", system-ui, sans-serif;
  --leitura: "Atkinson", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Moldura: a pagina nao rola; so o miolo rola, e apenas se a tela for pequena demais. */
html, body { height: 100%; }
body {
  margin: 0; height: 100vh; height: 100dvh; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "topo" "miolo" "abas";
  background: var(--noite);
  background-image: radial-gradient(rgba(244, 236, 212, .07) 1px, transparent 1.5px);
  background-size: 7px 7px;
  color: var(--areia);
  font: 15px/1.4 var(--corpo);
}
.topo { grid-area: topo; }
main { grid-area: miolo; overflow: auto; scrollbar-gutter: stable; padding: 12px; min-height: 0; }
.abas { grid-area: abas; }
.centro { width: 100%; max-width: 460px; margin: 0 auto; }

h1, h2, h3 { font-family: var(--titulo); font-weight: 400; letter-spacing: .5px; line-height: 1.05; margin: 0 0 8px; }
h1 { font-size: 30px; text-transform: uppercase; }
h2 { font-size: 22px; text-transform: uppercase; }
h3 { font-size: 20px; }
a { color: var(--ouro); }
p { margin: 0 0 8px; }
.muted { color: #b9b09a; font-size: 13px; }

.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 12px; background: var(--ouro); color: var(--tinta); border-bottom: 3px solid var(--tinta);
}
.marca { display: flex; align-items: center; gap: 6px; font: 22px/1 var(--titulo); color: var(--tinta); text-decoration: none; }
.marca .fig { width: 28px; }
.topo a.mini { color: var(--tinta); font-weight: 700; font-size: 13px; }

.abas { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--areia); border-top: 3px solid var(--tinta); }
.abas a {
  padding: 12px 2px; text-align: center; color: var(--tinta); text-decoration: none;
  font: 15px/1 var(--titulo); letter-spacing: .3px; text-transform: uppercase; border-right: 2px solid var(--tinta);
}
.abas a:last-child { border-right: 0; }
.abas a.ativa { background: var(--alvo); }

.cartao {
  background: var(--areia); color: var(--tinta); border: 3px solid var(--tinta); padding: 12px; margin: 0 4px 12px 0;
}
.cartao.verde { }
.cartao a { color: #8a0f47; }
.cartao .muted { color: #5e5745; }
.cartao > :last-child { margin-bottom: 0; }

/* Painel */
.placar { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: center; }
.placar h2 { margin-bottom: 4px; }
.placar p { margin: 4px 0; font-size: 14px; }
.selos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 4px 12px 0; }
.selo { background: var(--areia); color: var(--tinta); border: 3px solid var(--tinta); padding: 6px 4px; text-align: center; }
.selo .fig { width: 28px; margin: 0 auto; }
.selo b { display: block; font: 19px/1.1 var(--titulo); overflow-wrap: anywhere; }
.selo span { font-size: 11px; line-height: 1.1; display: block; }
.itens { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 8px; }
.itens .cartao { margin-bottom: 0; }

.barra { height: 14px; background: #fff; border: 2px solid var(--tinta); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--ouro); }
.barra.rosa i { background: var(--alvo); }
.etiqueta {
  display: inline-block; padding: 1px 6px; background: var(--tinta); color: var(--ouro);
  font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
}

/* Formularios */
label { display: block; font-weight: 700; margin: 8px 0 3px; font-size: 14px; }
input, select, button { font: inherit; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select {
  width: 100%; padding: 9px; background: #fff; color: var(--tinta); border: 3px solid var(--tinta); border-radius: 0;
}
input:focus-visible, select:focus-visible, button:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--tinta); outline-offset: 1px; box-shadow: 0 0 0 6px #fff; }
.opcao input:focus-visible + span { outline: 3px solid var(--tinta); box-shadow: 0 0 0 6px #fff; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 13px; }
.check input { margin-top: 3px; }
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.linha { display: flex; gap: 6px; align-items: stretch; }
.linha input { flex: 1; min-width: 0; }
.erro { color: #b00040; font-size: 13px; font-weight: 700; margin: 2px 0 0; }
.erro:empty { display: none; }

.botao {
  display: inline-block; padding: 9px 14px; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--alvo); color: var(--tinta) !important; border: 3px solid var(--tinta);
  font: 19px/1.1 var(--titulo); letter-spacing: .5px; text-transform: uppercase;
}
.botao:active { transform: translate(2px, 2px); }
.botao.verde { background: var(--ouro); }
.botao.bloco { display: block; width: 100%; margin-top: 10px; }
.botao.pequeno { font-size: 16px; padding: 7px 10px; }
.botao-texto { background: none; border: 0; padding: 0; color: #8a0f47; text-decoration: underline; cursor: pointer; }
.voltar { background: none; border: 0; padding: 0 0 6px; color: var(--ouro); font-weight: 700; cursor: pointer; }

.alerta { padding: 7px 9px; margin: 0 4px 10px 0; border: 2px solid var(--tinta); font-weight: 700; color: var(--tinta); font-size: 13px; }
.alerta.ok { background: var(--ouro); }
.alerta.ruim { background: var(--alvo); }
.alerta.perigo { background: var(--laranja); font-weight: 400; margin-right: 0; }

/* Adesivos */
.fig { display: block; width: 100%; height: auto; stroke: var(--tinta); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.stk {
  display: inline-block; flex: none; width: 60px; padding: 6px; background: var(--areia-2);
  border: 3px solid var(--tinta); border-radius: 12px;
}
.stk.mini { width: 44px; padding: 4px; border-radius: 9px; }
.stk.grande { width: 72px; }
.cor-laranja { background: #ffc48a; }
.cor-amarelo { background: #ffe873; }
.cor-rosa { background: #ffb3d4; }
.cor-azul { background: #a9e0ff; }
.cor-roxo { background: #d3bfff; }
.cor-verde { background: #cdf29a; }
.cor-papel { background: var(--areia-2); }
.cabeca-item { display: flex; gap: 10px; align-items: center; margin: 0 4px 8px 0; min-width: 0; }
.cabeca-item h1, .cabeca-item h3, .cabeca-item p { margin: 0; }

.grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; }
.grade.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opcao {
  display: block; position: relative; width: 100%; margin: 0; padding: 0; background: none; border: 0; color: inherit;
  text-align: center; font: 400 11px/1.15 var(--corpo); cursor: pointer;
}
.opcao input { position: absolute; opacity: 0; }
.opcao .stk { display: block; width: min(60px, 100%); margin: 0 auto 4px; }
.opcao input:checked + .stk { outline: 3px solid var(--alvo); outline-offset: 2px; background: var(--ouro); }
.opcao input:focus-visible + .stk { outline: 3px solid var(--alvo); outline-offset: 2px; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { padding: 6px 0; border-bottom: 2px dashed var(--tinta); font-size: 14px; line-height: 1.25; }
.lista li:last-child { border-bottom: 0; }
.lista-fig li { display: flex; gap: 10px; align-items: center; }
.bloqueada { opacity: .5; }
.atual { font-weight: 700; }
.bolinha { display: block; width: 32px; height: 32px; margin: 0 auto 3px; border: 3px solid var(--tinta); border-radius: 50%; }
.opcao input:checked + .bolinha { outline: 3px solid var(--alvo); outline-offset: 2px; }
.cores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.detalhe { min-height: 38px; margin-top: 10px; font-size: 13px; }

/* Abas internas das telas longas */
.seletor { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 4px 10px 0; }
.seletor button {
  flex: 1 1 auto; padding: 8px 6px; cursor: pointer; background: var(--areia); color: var(--tinta);
  border: 3px solid var(--tinta); font: 15px/1 var(--titulo); letter-spacing: .3px; text-transform: uppercase;
}
.seletor button[aria-selected=true] { background: var(--ouro); }
.oculto { display: none; }

/* Grafico */
.grafico { position: relative; height: 130px; display: flex; align-items: flex-end; gap: 2px; border-bottom: 3px solid var(--tinta); }
.grafico .dia { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.grafico .dia i { display: block; width: 100%; min-height: 3px; background: var(--tinta); border-radius: 3px 3px 0 0; }
.grafico .dia.vazio i { background: repeating-linear-gradient(45deg, #b8ad8c 0 2px, transparent 2px 4px); height: 100% !important; opacity: .35; border-radius: 0; }
.grafico .dia:hover i { background: var(--alvo); opacity: 1; }
.grafico .media { position: absolute; left: 0; right: 0; border-top: 3px dashed var(--alvo); pointer-events: none; }
.eixo { display: flex; justify-content: space-between; margin-top: 4px; }

/* Entrada */
.capa { min-height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 8px; text-align: center; max-width: 460px; margin: 0 auto; }
.capa-arte .fig { width: auto; height: min(32dvh, 250px); margin: 0 auto; }
.capa h1 { font-size: clamp(38px, 11vw, 64px); color: var(--ouro); margin: 0; }
.slogan { font: 20px/1.15 var(--titulo); color: var(--alvo); text-transform: uppercase; margin: 10px 0 4px; }
.passos-capa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 6px 0; }
.passos-capa div { font-size: 11px; line-height: 1.15; }
.passos-capa .stk { display: block; width: 46px; margin: 0 auto 4px; }
.capa .botao.bloco { margin-top: 6px; }
.links { font-size: 13px; margin: 8px 0 0; }

/* Baixa altura: encolhe o que e decoracao para caber sem rolar. */
@media (max-height: 680px) {
  .stk.grande { width: 56px; }
  .placar { grid-template-columns: 56px minmax(0, 1fr); }
  .capa-arte .fig { height: 24dvh; }
  .passos-capa { display: none; }
}

/* Telefone: mostra uma aba interna por vez. */
@media (max-width: 899px) {
  .oculto-celular { display: none; }
}

/* Web: menu lateral e colunas. */
@media (min-width: 900px) {
  body:has(> .abas) {
    grid-template-rows: auto minmax(0, 1fr); grid-template-columns: 200px minmax(0, 1fr);
    grid-template-areas: "topo topo" "abas miolo";
  }
  body { font-size: 16px; }
  .marca { font-size: 26px; }
  .marca .fig { width: 34px; }
  .topo { padding: 8px 20px; }
  main { padding: 20px 24px; }
  h1 { font-size: 38px; }
  h2 { font-size: 26px; }
  .abas { display: flex; flex-direction: column; border-top: 0; border-right: 3px solid var(--tinta); }
  .abas a { padding: 18px 16px; text-align: left; font-size: 20px; border-right: 0; border-bottom: 2px solid var(--tinta); }

  .tela { width: 100%; }
  .colunas { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
  .colunas-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); overflow: visible; }
  .itens .cartao { flex: none; }
  .seletor.so-celular { display: none; }
  .oculto-celular { display: block; }
  .grade { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .grade.tres { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .opcao { font-size: 12px; }
  .opcao .stk { width: 72px; }

  .capa { flex-direction: row; align-items: center; justify-content: center; gap: 56px; max-width: 1040px; text-align: left; }
  .capa-arte { flex: 0 0 auto; }
  .capa-arte .fig { height: min(70dvh, 520px); }
  .capa-texto { flex: 1 1 0; max-width: 480px; }
  .capa h1 { font-size: 72px; }
  .slogan { font-size: 28px; }
  .passos-capa { margin: 16px 0; }
  .passos-capa div { font-size: 13px; }
  .passos-capa .stk { width: 60px; }
}

/* Marca */
.marca img { display: block; width: 34px; height: 34px; }
.marca span { display: block; padding-top: 1px; }
.topo-acoes { display: flex; align-items: center; gap: 12px; }
.topo-acoes form { margin: 0; }
.sair {
  padding: 5px 10px; cursor: pointer; background: var(--tinta); color: var(--ouro); border: 0;
  font: 13px/1 var(--titulo); letter-spacing: .3px; text-transform: uppercase;
}
.botao.branco { background: #fff; }
.botao[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.rodape, .links { font-size: 12px; }

/* Personagem como jogo */
.avatar { stroke-width: 5; }
.palco {
  position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--areia-2);
  border: 4px solid var(--tinta); border-radius: 18px; display: flex; align-items: flex-end; justify-content: center;
}
.palco .avatar { width: 96%; }
.mold-fita::after { background-image: url(/img/loja/mold-fita-88c3619231b3a7fc438d312264fb3997.svg); }
.mold-ouro::after { background-image: url(/img/loja/mold-ouro-267b0ff9220e7aa717692007e2739641.svg); }
.mold-neon::after { background-image: url(/img/loja/mold-neon-8ed3ff6ac0afdf3ba9b83045de7e0780.svg); }
.mold-fogo::after { background-image: url(/img/loja/mold-fogo-bf85c366470e788fce2b5fc682ea0c91.svg); }
.mold-onda::after { background-image: url(/img/loja/mold-onda-2b8abb94d15e7856ad7cc575d6b7c10c.svg); }
.mold-espinho::after { background-image: url(/img/loja/mold-espinho-8d29ef87a668d6d7dcf1f2286733bec1.svg); }
.mold-rei::after { background-image: url(/img/loja/mold-rei-49177af321ee7946c0d5d2e82ebdae9c.svg); }
.mold-prata::after { background-image: url(/img/loja/mold-prata-540d5f99a0c1d2f91a1c35bb36e43c1d.svg); }
.fundo-praia { background: url(/img/loja/fundo-praia-695766ab0edbbd935257e2158391b735.svg) center / cover; }
.fundo-sol { background: url(/img/loja/fundo-sol-732bec9d317a4b4e51c585693b2ea8f9.svg) center / cover; }
.fundo-noite { background: url(/img/loja/fundo-noite-39c6ba168ed09104adf7a0ae3dc8f4ac.svg) center / cover; }
.fundo-grafite { background: url(/img/loja/fundo-grafite-f61a012a95ef97c52bc8fa3124a330b4.svg) center / cover; }
.fundo-lambe { background: url(/img/loja/fundo-lambe-dc1a0683856a67110fdbfcc5b2c570cd.svg) center / cover; }
.fundo-galaxia { background: url(/img/loja/fundo-galaxia-dd4bd7bb145915efa5b99ea0d35c1736.svg) center / cover; }
.fundo-laje { background: url(/img/loja/fundo-laje-f9e037d1bf713790989e82d6a263c673.svg) center / cover; }
.fundo-floresta { background: url(/img/loja/fundo-floresta-33a7c986431acd3502f9775fa5d1128c.svg) center / cover; }
.fundo-vhs { background: url(/img/loja/fundo-vhs-7a2c57a7ff36aaae85ed58f80c04c40e.svg) center / cover; }
.fundo-aurora { background: url(/img/loja/fundo-aurora-b0f6479f2aee756f0115ae81a8f06584.svg) center / cover; }
.palco[class*=mold-]::after { content: ""; position: absolute; inset: 0; background-size: 100% 100%; pointer-events: none; }

.heroi-jogador { display: grid; grid-template-columns: minmax(118px, 36%) minmax(0, 1fr); gap: 14px; align-items: center; margin: 0 4px 12px 0; }
.heroi-dados h1, .heroi-dados h2 { margin: 0 0 4px; overflow-wrap: anywhere; }
.heroi-dados .barra { margin: 8px 0 4px; }
.heroi-dados p { margin: 0 0 8px; }
.cartao .heroi-jogador { margin-right: 0; }

/* Cartao do jogador no menu lateral */
.jogador { display: none !important; }

/* Capa */
.capa-arte { display: flex; justify-content: center; align-items: flex-end; }
.capa-arte .trio { width: min(33vw, 150px); margin: 0 -8px; }
.capa-arte .trio:nth-child(2) { width: min(40vw, 190px); position: relative; z-index: 1; }
.capa-arte .fig { width: 100%; height: auto; margin: 0; }
.capa h1 { display: flex; align-items: center; justify-content: center; gap: 10px; transform: none; font-size: clamp(34px, 10vw, 60px); }
.capa h1 img { width: 1em; height: 1em; }

/* Loja */
.prateleira { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.produto { text-align: center; font-size: 12px; min-width: 0; }
.produto b { display: block; margin: 8px 0 4px; line-height: 1.1; }
.produto form { margin: 0; }
.produto .botao { display: block; width: 100%; padding: 6px 2px; font-size: 14px; }
.respiro { display: flex; gap: 10px; align-items: flex-start; }
.respiro p { margin: 2px 0 6px; }

/* Editor */
#editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.editor-previa { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; }
.editor-previa .botao { margin: 0; }
.editor-opcoes .cartao { margin-bottom: 4px; }
.grupo-opcoes { margin-bottom: 12px; }
.grupo-opcoes:last-child { margin-bottom: 0; }
.grupo-opcoes h3 { font-size: 17px; margin-bottom: 6px; }
.amostras { display: grid; grid-template-columns: repeat(auto-fill, 38px); gap: 8px; }
.amostras .opcao { width: 38px; }
.amostras .bolinha { margin: 0; }
.miniaturas { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
.miniaturas .stk { padding: 2px; transform: none; border-radius: 12px; overflow: hidden; }

/* Paginas legais rolam: texto juridico nao cabe em uma tela. */
.texto-legal { max-width: 720px; }
.texto-legal h2 { font-size: 20px; margin-top: 14px; }
.texto-legal ul { padding-left: 20px; margin: 0 0 8px; }
.texto-legal li { margin-bottom: 4px; }

@media (min-width: 900px) {
  .jogador {
    display: flex !important; flex-direction: column; gap: 6px; align-items: stretch; text-align: center;
    padding: 14px !important; background: var(--noite); color: var(--areia) !important;
    font: 400 14px/1.2 var(--corpo) !important; text-transform: none !important;
  }
  .jogador b { font: 26px/1 var(--titulo); letter-spacing: .5px; color: var(--ouro); overflow-wrap: anywhere; }
  .jogador .etiqueta { align-self: center; background: var(--alvo); color: var(--tinta); }
  .jogador .barra { display: block; }
  body:has(> .abas) { grid-template-columns: 260px minmax(0, 1fr); }
  .capa-arte .trio { width: 190px; }
  .capa-arte .trio:nth-child(2) { width: 240px; }
  .capa { gap: 40px; }
  .capa h1 { justify-content: flex-start; font-size: 56px; }
  .heroi-jogador { grid-template-columns: 240px minmax(0, 1fr); }
  .prateleira { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  #editor { grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
  .editor-previa { grid-template-columns: minmax(0, 1fr); }
}

/* Sobre o fundo preto da capa, o logo precisa de um disco claro. */
.capa h1 img { background: var(--areia); border-radius: 50%; padding: 2px; }
.capa-texto { min-width: 0; }

/* Estrutura das telas */
.titulo-pagina { display: none; }
.so-celular { }
.editor-titulo { grid-column: 1 / -1; }
.editor-titulo h1 { margin-bottom: 12px; }
.ligacao { color: inherit !important; text-decoration: none; }
.voltar { display: inline-block; text-decoration: none; }
.coluna { min-width: 0; }

.guia { background: var(--areia); color: var(--tinta); border: 3px solid var(--tinta); margin: 0 4px 12px 0; padding: 0 10px; }
.guia summary { padding: 8px 0; cursor: pointer; font: 17px/1.1 var(--titulo); letter-spacing: .3px; text-transform: uppercase; }
.passos { list-style: none; margin: 0; padding: 0 0 8px; display: grid; gap: 8px; }
.passos li { display: flex; gap: 8px; align-items: center; font-size: 13px; line-height: 1.25; }
.passos .stk.mini { width: 38px; }

/* Alertas de jogo */
.alertas { position: fixed; top: 72px; left: 0; right: 0; z-index: 30; width: min(92vw, 420px); margin: 0 auto; pointer-events: none; display: grid; gap: 8px; }
.toast {
  padding: 10px 14px; border: 3px solid var(--tinta); color: var(--tinta); font-weight: 700;
  animation: entrar-toast .4s cubic-bezier(.2, 1.6, .4, 1), sair-toast .4s ease-in 3.6s forwards; pointer-events: auto;
}
.toast.ok { background: var(--ouro); }
.toast.ruim { background: var(--alvo); }
.toast.premio { background: #ffd400; text-align: center; }
.toast.premio b { display: block; font: 30px/1.1 var(--titulo); letter-spacing: .5px; }
.toast.premio span { display: block; }
@keyframes entrar-toast { from { opacity: 0; transform: translateY(-140px) scale(.9); } }
@keyframes sair-toast { to { opacity: 0; transform: translateY(-140px); visibility: hidden; } }

.subiu {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, .8); pointer-events: auto; animation: aparecer .3s ease;
}
.subiu-caixa {
  width: min(100%, 320px); background: var(--areia); color: var(--tinta); border: 4px solid var(--tinta); padding: 16px; text-align: center; animation: pular .5s cubic-bezier(.2, 1.6, .4, 1);
}
.subiu-chamada { font: 30px/1 var(--titulo); text-transform: uppercase; color: #b00040; }
.subiu h2 { margin: 12px 0 0; }
.confete { position: fixed; top: -12px; z-index: 50; width: 10px; height: 14px; pointer-events: none; animation: cair linear forwards; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes pular { from { transform: scale(.6) rotate(-4deg); opacity: 0; } }
@keyframes cair { to { transform: translateY(105vh) rotate(720deg); opacity: .8; } }

/* Movimento */
main > * { animation: subir .3s ease; }
@keyframes subir { from { opacity: 0; } }
.barra i { transform-origin: left; animation: encher .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes encher { from { transform: scaleX(0); } }
.palco .avatar { animation: respirar 4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes respirar { 50% { transform: translateY(2px) scale(1.012); } }

.abas a, .botao, .seletor button, .cartao, .selo, .stk, .opcao, .sair, .marca img, .marca, .topo a.mini, .voltar, .botao-texto, .produto, .guia summary {
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, filter .15s ease;
}
@media (hover: hover) {
  .abas a:not(.jogador):hover { background: var(--ouro); }
  .abas a.ativa:hover { background: var(--alvo); }
  .seletor button:hover { background: #fff; transform: translateY(-2px); }
  .seletor button[aria-selected=true]:hover { background: var(--ouro); }
  .produto:hover { transform: translateY(-3px); }
  .itens .cartao:hover { transform: translate(-2px, -2px); }
  .stk:hover, .opcao:hover .stk { scale(1.08); }
  .palco { transition: transform .2s ease; }
  .marca:hover img { scale(1.1); }
  .marca:hover { transform: translateX(2px); }
  .sair:hover { background: var(--alvo); color: var(--tinta); }
  .topo a.mini:hover, .voltar:hover { transform: translateX(-2px); }
  .botao-texto:hover { color: var(--alvo); }
  .guia summary:hover { color: #b00040; }
  .lista a:hover { background: var(--ouro); }
}
.seletor button:active, .abas a:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .confete { display: none; }
}

@media (max-height: 680px) and (max-width: 899px) {
  .guia:not(.missoes) { display: none; }
}
@media (max-width: 899px) {
  .heroi-jogador > a { display: block; text-decoration: none; }
}

@media (min-width: 900px) {
  .so-celular.heroi-jogador { display: none; }
  .titulo-pagina { display: block; }
  .selos { grid-template-columns: repeat(3, minmax(0, 220px)); gap: 14px; margin: 0 0 16px; }
  .selo { padding: 10px; }
  .selo .fig { display: block; width: 40px; }
  .selo b { font-size: 28px; }
  .selo span { font-size: 13px; }
  .guia { margin: 0 0 16px; max-width: 920px; }
  .passos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .itens { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; align-items: stretch; }
  .itens .cartao { margin: 0; }
  .colunas-3.igual { align-items: stretch; }
  .colunas-3.igual > .cartao { margin: 0; height: 100%; }
  .colunas-3.igual > .coluna { display: flex; flex-direction: column; }
  .colunas-3.igual > .coluna > .cartao:last-of-type { margin-bottom: 0; flex: 1; }
  .alertas { top: 84px; }
}

/* XP, saldo e dinheiro. Tons escuros no papel, claros no fundo preto, para manter o contraste. */
.din-pos { color: var(--din-pos) !important; }
.din-neg { color: var(--din-neg) !important; }
main .muted .din-pos, .cabeca-item .muted .din-pos { color: var(--din-pos) !important; }
.tela > .cabeca-item .din-pos { color: #7dff9e !important; }
.tela > .cabeca-item .din-neg { color: #ff8f9c !important; }
.jogador .xp { color: var(--ouro); font: 700 13px var(--corpo); }
.jogador .saldo { color: #ffd400; font: 700 13px var(--corpo); }


.abas { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 899px) { .abas a { font-size: 15px; padding: 11px 1px; } }

/* Menu lateral cabe em telas baixas. */
@media (min-width: 900px) {
  .jogador .palco { width: min(170px, 26vh); margin: 0 auto; }
  .abas { overflow-y: auto; }
  .abas a:not(.jogador) { padding: 10px 16px; }
}

/* Insignia de nivel ao lado do nome, sem cobrir o personagem. */
.insignia { display: inline-flex; align-items: center; gap: 6px; min-width: 0; text-align: left; }
.insignia .fig { width: 32px; flex: none; stroke-width: 3; }
.insignia small { display: block; font: 700 11px/1.1 var(--corpo); opacity: .85; }
.insignia b { display: block; font: 15px/1.1 var(--titulo); overflow-wrap: anywhere; }
.jogador .insignia { align-self: center; }
.jogador .insignia b { font-size: 15px; color: var(--areia); }
.jogador .insignia .fig { width: 40px; }
.heroi-dados .insignia { margin: 2px 0 2px; }
.insignia-grande { width: 130px; margin: 8px auto; stroke-width: 3; }
.grade-niveis { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px 2px; }
.nivel-ponto { padding: 0; background: none; border: 0; cursor: pointer; transition: transform .15s ease; }
.nivel-ponto .fig { stroke-width: 3; }
.nivel-ponto.bloqueada { opacity: .3; filter: grayscale(1); }
.nivel-ponto.atual { outline: 3px solid var(--alvo); outline-offset: 1px; }
.nivel-ponto:hover { transform: scale(1.25); }
.ganho-tampinhas { background: #d81f26 !important; color: #fff !important; }

/* No desktop o menu lateral ja mostra o personagem. */
@media (min-width: 900px) {
  .tela > .heroi-jogador { grid-template-columns: minmax(0, 1fr); }
  .tela > .heroi-jogador .palco { display: none; }
}

.selo b, .num-grande, .heroi-dados h1.num-grande { font-family: var(--numero); letter-spacing: .5px; }
.grade-niveis { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 10px; }
.nivel-ponto { max-width: 58px; margin: 0 auto; }
.nivel-ponto.bloqueada { opacity: .6; filter: saturate(.75); }
@media (min-width: 900px) {
  .grade-niveis { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px 8px; }
  .itens { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
}

/* Revisao: alvos de toque, contraste e alinhamento. */
.botao[disabled] { opacity: 1; background: #cfc8b4; color: #2b2b2b !important; border-color: #6b6657; }
.bloqueada { opacity: 1; color: #4d473a; }
.bloqueada .stk { opacity: .55; }
.opcao, .selo span, .insignia small { font-size: 12px; }
.ajuda-ligar { display: block; }
.lista li .botao { margin-top: 6px; }
.lista a, .links a, .ligacao-alta { display: inline-block; padding: 6px 0; }
.links { line-height: 1.9; }
.check { padding: 6px 0; min-height: 40px; }
.voltar { padding: 10px 0; min-height: 44px; }
.botao-texto { padding: 12px 0; }
.botao.pequeno { min-height: 44px; }
.seletor button { min-height: 44px; }
.guia summary { padding: 13px 0; min-height: 44px; }
.topo a.mini { padding: 12px 4px; }
.sair { padding: 12px 10px; }
.abas a { min-height: 46px; display: flex; align-items: center; justify-content: center; }
.amostras { grid-template-columns: repeat(auto-fill, 44px); }
.amostras .opcao { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.bolinha { width: 36px; height: 36px; }
@media (min-width: 900px) {
  .abas a:not(.jogador) { justify-content: flex-start; }
  .selos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guia { max-width: none; }
  .produto .botao { min-height: 40px; }
}

.lista a.botao { padding: 12px 14px; min-height: 48px; display: flex; align-items: center; justify-content: center; }
.sair { min-height: 44px; }
.toast, .toast.premio { pointer-events: none; }
.links a, .ligacao-alta { padding: 10px 0; }
.marca { min-height: 44px; }
select { min-height: 44px; }
.voltar { display: inline-flex; align-items: center; color: var(--ouro); }
.texto-legal .voltar, .centro > .voltar { color: var(--ouro); }

.lista a:not(.botao), .links a, .ligacao-alta { padding: 13px 0; min-height: 44px; line-height: 18px; }
.topo a.mini { padding: 13px 4px; min-height: 44px; }

.mascote { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mascote .fig { width: 58px; flex: none; }
.mascote .fala { margin: 0; }
.acoes-painel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.acoes-painel .botao { display: flex; align-items: center; justify-content: center; min-height: 48px; }
.acoes-painel .botao:only-child { grid-column: 1 / -1; }
.deu-ruim-faixa { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0 0 12px; text-decoration: none; }
.respiro-titulo { margin-top: 14px; }
.editor-sticker { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.sticker-previa canvas { display: block; width: auto; max-width: 100%; max-height: 32vh; max-height: 32dvh; margin: 0 auto; }
.sticker-opcoes { margin-bottom: 0; }
@media (min-width: 900px) {
  .acoes-painel { max-width: 460px; }
  .editor-sticker { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .sticker-previa canvas { max-height: 74vh; max-height: 74dvh; }
}

/* Botao do Google no padrao da marca: fica de fora do visual trash. */
.ou { margin: 10px 0 2px; text-align: center; font-size: 13px; }
.botao-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 12px;
  background: #fff; color: #1f1f1f !important; border: 1px solid #747775; border-radius: 4px;
  font: 500 14px/20px Roboto, Arial, sans-serif; text-decoration: none;
}
.botao-google svg { flex: none; }
.botao-google:hover { background: #f7f8f8; }
.botao-google:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }

.check { min-height: 44px; align-items: center; }
.check input { flex: none; width: 20px; height: 20px; margin: 0; }
.detalhe { position: sticky; top: -12px; z-index: 2; margin: 0 0 8px; padding: 6px 8px; background: var(--tinta); color: var(--areia); }
.nivel-ponto.selecionado { outline: 3px solid var(--ouro); outline-offset: 1px; }
@media (max-width: 899px) {
  .seletor-cinco { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .seletor-cinco button { grid-column: span 2; }
  .seletor-cinco button:nth-child(n + 4) { grid-column: span 3; }
}
@media (min-width: 900px) {
  .jogador .barra { align-self: stretch; width: 100%; }
  .jogador small { font-size: 13px; }
}
.detalhe.muted { color: var(--areia); }
.nivel-ponto.selecionado { opacity: 1; filter: none; outline: 3px solid var(--alvo); }
@media (min-width: 900px) {
  .nivel-ponto { max-width: 50px; }
  [data-painel=trofeus] .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .produto .botao { min-height: 44px; }
}
.centro > .fig { width: 96px; margin: 0 auto 8px; }
.caixa-botoes { margin-top: 16px; }
.caixa-botoes .botao { width: 100%; min-height: 48px; }

.missoes { margin-bottom: 12px; }
.missao { margin-top: 10px; }
.missao p { margin: 0 0 4px; font-size: 14px; }
.missao small { display: block; margin-top: 3px; font-size: 12px; color: #4d473a; }
.missao.completa b::after { content: " ✓"; }
textarea { width: 100%; padding: 10px; font: inherit; border: 3px solid var(--tinta); background: #fff; color: var(--tinta); resize: vertical; }
.recado { padding: 10px 0; border-bottom: 2px dashed var(--tinta); }
.recado p { margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cf-turnstile { margin-top: 10px; }
.tela > h1 { margin-bottom: 12px; }
form .botao + .muted { margin-top: 10px; }

.destaque { font-size: 18px; font-weight: 700; margin-top: 0; }
.passos-simples { margin: 0 0 10px; padding-left: 22px; }
.passos-simples li { margin-bottom: 6px; }
.guia.missoes { margin-top: 12px; }
.guia.missoes .missao:last-child { padding-bottom: 12px; }
.tela > .selos { margin-top: 12px; }

.tutorial .stk { display: block; width: 84px; margin: 0 auto 10px; }
.tutorial p { margin: 6px 0 10px; }
.tutorial small { display: block; color: #4d473a; }
.botao-google { border: 3px solid var(--tinta); border-radius: 2px 7px 3px 9px / 6px 3px 8px 2px; min-height: 48px; font-weight: 700; }
.botao-google:hover { background: #fff; transform: translate(2px, 2px); }

.subiu { overflow: auto; }
.subiu-caixa { margin: auto; }
.toast.ruim { animation: entrar-toast .4s cubic-bezier(.2, 1.6, .4, 1); }
.cabeca-item > div { min-width: 0; overflow-wrap: anywhere; }
.alertas .toast { overflow-wrap: anywhere; }

.faixa-ajuda { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-bottom: 12px; font: 16px/1.2 var(--titulo); color: var(--tinta) !important; text-decoration: none; background: var(--alvo); border: 3px solid var(--tinta); }
.lista.setas a { display: flex; justify-content: space-between; color: inherit; }
.lista.setas a::after { content: "→"; }
.vazio-grafico { text-align: center; padding: 12px 0; }
.vazio-grafico .fig { width: 88px; margin: 0 auto 8px; }
.botao[disabled] { cursor: default; }
.tela > .botao.bloco { margin: 12px 0 0; }
.paginas > section { max-width: none; }
@media (min-width: 900px) {
  .hoje .itens { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .paginas .grade-niveis { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .paginas .nivel-ponto { max-width: 64px; }
}

.hoje .selos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faixa-ajuda { margin: 12px 0; }
.aviso-capa { margin-top: 12px; }
.capa-arte { position: relative; }
.vicio { position: absolute; z-index: 2; }
.vicio.um { top: 0; left: 4%; }
.vicio.dois { top: 8%; right: 4%; }
.vicio.tres { bottom: 6%; left: 0; }
@media (max-width: 899px) {
  [data-aba-atual=bonus] .heroi-jogador, [data-aba-atual=niveis] .heroi-jogador { display: none; }
  .paginas .grade-niveis { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .seletor-cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .seletor-cinco button, .seletor-cinco button:nth-child(n + 4) { grid-column: auto; padding-left: 0; padding-right: 0; font-size: 13px; }
}
.acoes-hoje { display: flex; gap: 8px; margin: 12px 4px 12px 0; }
.acoes-hoje > * { flex: 1 1 0; margin: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px 6px; }
@media (max-width: 899px) {
  .seletor-cinco button, .seletor-cinco button:nth-child(n + 4) { font-size: 12px; }
}

/* Paginacao de listas grandes */
.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.paginacao span { margin: 0 auto; }

/* Painel do dono */
.painel-admin { width: 100%; display: grid; gap: 14px; }
.painel-admin h1 { margin: 0; }
.painel-admin > .muted { margin: 0; }
.painel-admin .cartao { margin: 0; min-width: 0; }
.admin-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.numero { display: flex; flex-direction: column; gap: 2px; }
.numero b { font: 32px/1.1 var(--titulo); }
.admin-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.admin-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.admin-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.admin-barras { display: flex; align-items: flex-end; gap: 2px; height: 96px; border-bottom: 1px solid #5e5745; }
.admin-barras i { flex: 1; min-width: 0; background: #8a0f47; border-radius: 2px 2px 0 0; }
.admin-barras i:hover { background: var(--tinta); }
.admin-eixo { display: flex; justify-content: space-between; color: #5e5745; }
.admin-limites { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.admin-limite-topo { display: flex; justify-content: space-between; gap: 8px; }
.admin-barra { display: block; height: 10px; background: var(--areia-2); border: 1px solid var(--tinta); }
.admin-barra i { display: block; height: 100%; background: #2f7d32; }
.estado-atencao .admin-barra i { background: var(--laranja); }
.estado-pagar .admin-barra i { background: #c1121f; }
.selo-estado { font-size: 13px; font-weight: 700; white-space: nowrap; }
.admin-rola { overflow-x: auto; }
.admin-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-tabela th, .admin-tabela td { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--areia-2); }
.admin-tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-tabela code { font-size: 13px; }

/* Titulo inclinado precisa de folga da legenda. */
h1 + p, h2 + p { margin-top: 8px; }
.cabeca-item h1 + p, .cabeca-item h3 + p { margin-top: 6px; }

/* Bonus: figura, valor e texto em colunas fixas */
.tabela-bonus { list-style: none; margin: 0; padding: 0; }
.tabela-bonus li { display: grid; grid-template-columns: 44px 112px minmax(0, 1fr); gap: 12px; align-items: center; justify-content: stretch; text-align: left; padding: 8px 0; }
.tabela-bonus .stk { width: 44px; margin: 0; }
.tabela-bonus b { font-size: 17px; }
@media (max-width: 899px) {
  .tabela-bonus li { grid-template-columns: 36px 72px minmax(0, 1fr); gap: 8px; }
  .tabela-bonus .stk { width: 36px; }
  .tabela-bonus b { font-size: 14px; white-space: normal; }
}

/* Trofeus por familia */
.familia { margin-top: 16px; }
.familia h3 { margin-bottom: 8px; padding-bottom: 4px; border-bottom: 2px dashed var(--tinta); }
.opcao .progresso { display: block; margin-top: 2px; font-size: 11px; color: #4d473a; }

/* Loja que nao e roupa */
.seletor-loja { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.seletor-loja button, .seletor-loja button:nth-child(n + 4) { grid-column: auto; padding-left: 2px; padding-right: 2px; font-size: 14px; }
@media (min-width: 900px) {
  .seletor-loja { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
.prateleira.larga { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.amostra-tema { display: grid; grid-template-columns: 2fr 1fr 1fr; aspect-ratio: 1; border: 4px solid var(--tinta); border-radius: 18px; overflow: hidden; }
.amostra-tema i:nth-child(3) { background: var(--noite); }
.tema-piscina i:nth-child(1) { background: #7fd8d4; } .tema-piscina i:nth-child(2) { background: #0b6a8a; }
.tema-chiclete i:nth-child(1) { background: #ffb3d4; } .tema-chiclete i:nth-child(2) { background: #b0185b; }
.tema-brasa i:nth-child(1) { background: #ffae1f; } .tema-brasa i:nth-child(2) { background: #b5400f; }
.tema-uva i:nth-child(1) { background: #d3bfff; } .tema-uva i:nth-child(2) { background: #5b2a86; }
:root:has(meta[name=tema][content=tema-piscina]) { --ouro: #7fd8d4; --alvo: #0b6a8a; }
:root:has(meta[name=tema][content=tema-chiclete]) { --ouro: #ffb3d4; --alvo: #b0185b; }
:root:has(meta[name=tema][content=tema-brasa]) { --ouro: #ffae1f; --alvo: #b5400f; }
:root:has(meta[name=tema][content=tema-uva]) { --ouro: #d3bfff; --alvo: #5b2a86; }
.amostra-voz { margin: 0; padding: 10px; min-height: 96px; text-align: left; font-size: 14px; background: #fff; color: var(--tinta); border: 3px solid var(--tinta); }
.amostra-titulo { display: block; margin-bottom: 8px; padding: 12px 6px; font: 18px/1.1 var(--titulo); background: var(--noite); color: var(--ouro); }
.titulo-jogador { display: block; color: var(--alvo); font-size: 13px; font-weight: 700; }
@media (min-width: 900px) {
  [data-painel=trofeus] .grade { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}

/* Sem coluna sobrando quando ha menos cartoes que colunas */
@media (min-width: 900px) {
  .colunas:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
  .colunas-3.igual:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.grade { align-items: start; }
.amostra-titulo { display: flex; align-items: center; justify-content: center; min-height: 64px; }
@media (max-width: 899px) {
  .paginas .grade-niveis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Escolher o que reduzir: cartoes grandes, faceis de tocar */
.escolha-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 14px 6px 14px 0; }
.escolha { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 104px; padding: 14px; text-align: left; font: inherit; cursor: pointer; background: var(--areia); color: var(--tinta); border: 3px solid var(--tinta); border-radius: 3px 12px 4px 10px / 10px 3px 12px 4px; transition: transform .15s ease, box-shadow .15s ease; }
.escolha .stk { display: block; width: 72px; margin: 0; }
.escolha b { display: block; margin-bottom: 4px; font: 22px/1.05 var(--titulo); }
.escolha small { display: block; font-size: 13px; line-height: 1.3; color: #4d473a; }
.escolha-rodape { margin-top: 4px; }
.escolha-itens { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 16px 10px; }
.escolha-itens .opcao { font-size: 14px; font-weight: 700; line-height: 1.2; }
.escolha-itens .opcao .stk { width: 92px; }
@media (max-width: 899px) {
  .escolha-grupos { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .escolha { min-height: 84px; padding: 10px; grid-template-columns: 58px minmax(0, 1fr); }
  .escolha .stk { width: 58px; }
  .escolha b { font-size: 19px; }
  .escolha-itens { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 6px; }
  .escolha-itens .opcao { font-size: 12px; }
  .escolha-itens .opcao .stk { width: 70px; }
}

/* No Hoje o botao grande ja leva a ajuda; nas outras telas ela segue a um toque no topo. */
body:has(.faixa-ajuda) .topo-acoes .mini { display: none; }
.tutorial h2 { margin-bottom: 8px; }
.tutorial .fig-mascote { display: block; width: 120px; margin: 0 auto 10px; }

/* Metas sugeridas */
.sugestoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.sugestoes[hidden] { display: none; }
.sugestoes button { min-height: 44px; padding: 6px 2px; font: 14px/1.1 var(--titulo); color: var(--tinta); background: #fff; border: 2px solid var(--tinta); cursor: pointer; }
.sugestoes button[aria-pressed=true] { background: var(--ouro); }
.resumo-meta { margin: 10px 0 0; padding: 7px 9px; font-size: 13px; font-weight: 700; color: var(--tinta); background: #fff; border: 2px dashed var(--tinta); }

/* Extrato: cara de cupom de mercado */
.cupom { background: #fffdf4; font-family: var(--corpo); }
.cupom h2 { margin-bottom: 10px; }
.cupom h3 { margin: 14px 0 6px; }
.cupom-linha { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 5px 0; border-bottom: 1px dashed var(--tinta); }
.cupom-linha span { min-width: 0; overflow-wrap: anywhere; }
.cupom-linha b { flex: none; }
.cupom-linha.total { font-weight: 700; border-bottom: 3px double var(--tinta); }
.cupom-linha.sobra { font-size: 18px; font-weight: 700; }
.lista-cabe li { padding: 4px 0; }

/* Hora da vontade */
@media (min-width: 900px) {
  .vontade .cartao { display: flex; flex-direction: column; }
  .vontade [data-tecnica] { flex: 1; }
}
.relogio { text-align: center; }
.relogio .num-grande { margin: 8px 0 4px; font-size: 40px; line-height: 1; }
.relogio .bola { margin: 0 auto; width: 96px; height: 96px; border: 3px solid var(--tinta); border-radius: 50%; background: var(--ouro); transform: scale(.7); }
.relogio.rodando .bola { animation: respira 10s ease-in-out infinite; }
@keyframes respira { 0%, 100% { transform: scale(.65); } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .relogio.rodando .bola { animation: none; } }

.atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 4px 10px 0; }
.adicionar { margin: 0 4px 12px 0; width: auto; }
/* Apagar fica a um toque, sempre com a confirmacao do data-confirmar. */
.atalhos { align-items: center; }
.apagar-item { min-height: 44px; min-width: 44px; padding: 0 6px; font-weight: 700; }
.atalhos .apagar-item { color: var(--areia); }
.item-hoje { position: relative; }
.apagar-canto { position: absolute; top: 2px; right: 4px; }
.item-hoje .cabeca-item h3 { padding-right: 66px; }
@media (max-width: 899px) {
  /* Na tela Hoje os numeros aparecem sem rolar: icone ao lado, cartao baixo. */
  .hoje .selos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hoje .selo { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 16px 8px 8px; text-align: left; }
  .hoje .selo .fig { grid-row: span 2; width: 34px; margin: 0; }
  .hoje .selo b { font-size: 22px; }
}
a.selo { color: var(--tinta); text-decoration: none; }
@media (min-width: 900px) { .adicionar { max-width: 320px; } }
.vontade-ajuda { margin: 0 4px 10px 0; }

/* Bons costumes: o cartao inteiro e o botao, e o estado se le de longe. */
.costumes-placar { display: grid; gap: 6px; }
.costumes-placar .linha-placar { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.costumes-placar .num-grande { margin: 0; font-size: 30px; }
.costumes-placar p { margin: 0; font-weight: 700; font-size: 13px; }
.costumes-como { list-style: none; margin: 0 4px 12px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.costumes-como li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px; line-height: 1.2; background: rgba(244, 236, 212, .08); border: 2px dashed rgba(244, 236, 212, .35); border-radius: 8px; }
.costumes-como .stk { flex: none; width: 34px; padding: 3px; }
.costumes-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 4px 12px 0; }
.costumes-lista form { margin: 0; }
.costume {
  position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
  width: 100%; min-height: 118px; padding: 10px; text-align: left; cursor: pointer; font: inherit;
  background: var(--areia); color: var(--tinta); border: 3px solid var(--tinta); border-radius: 3px 12px 4px 10px / 10px 3px 12px 4px; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.costume:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }
.costume:active { transform: translate(3px, 4px); }
.costume .stk { width: 58px; }
.costume-texto b { display: block; font: 20px/1.05 var(--titulo); letter-spacing: .3px; }
.costume-texto small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.2; color: #4d473a; }
.costume-estado { justify-self: end; padding: 5px 8px; font: 15px/1 var(--titulo); white-space: nowrap; background: var(--tinta); color: var(--ouro); border-radius: 999px; }
.costume-rodape { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.costume-semana { display: flex; gap: 4px; }
.costume-semana i {
  display: grid; place-items: center; width: 22px; height: 22px; font: 700 10px/1 var(--corpo);
  color: #5e5745; background: transparent; border: 2px solid #b5ab90; border-radius: 50%;
}
.costume-semana i.feito { color: var(--tinta); background: var(--ouro); border-color: var(--tinta); }
.costume-semana i.hoje { border-color: var(--tinta); border-style: dashed; }
.costume-semana i.hoje.feito { border-style: solid; background: var(--alvo); }
.costume-sequencia { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.costume-sequencia .fig { width: 18px; }
.costume.feito { background: #e4ffa0; }
.costume.feito .costume-estado { background: var(--alvo); color: var(--tinta); }
.costume.feito .costume-estado::before { content: "\2713\00a0"; }
.costumes-nota { margin: 0 4px 0 0; }
.faixa-costumes {
  display: flex; align-items: center; gap: 10px; min-height: 58px; margin: 0 4px 12px 0; padding: 6px 10px; text-decoration: none;
  background: var(--areia); color: var(--tinta) !important; border: 3px solid var(--tinta);
}
.faixa-costumes b { display: block; font: 17px/1.1 var(--titulo); letter-spacing: .3px; }
.faixa-costumes small { display: block; font-size: 12px; }
.faixa-costumes .stk { flex: none; width: 38px; }
@media (min-width: 900px) {
  .costumes-como { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-right: 0; }
  .costumes-lista { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-right: 0; }
}
@media (hover: hover) {
  .costume:hover { transform: translate(-2px, -2px); }
  .costume.feito:hover { }
}
@media (prefers-reduced-motion: reduce) {
  .costume, .costume:hover, .costume:active { transition: none; transform: none; }
}
@media (max-width: 380px) {
  .abas a { font-size: 13px; }
  .costume-semana { gap: 2px; }
  .costume-semana i { width: 20px; height: 20px; }
}

/* Atalhos da tela Hoje: no computador seguem as duas colunas dos botoes e dos selos. */
.faixa-costumes, .faixa-ajuda { transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.faixa-costumes::after { content: "\2192"; margin-left: auto; font: 20px/1 var(--titulo); }
.faixa-costumes:focus-visible, .faixa-ajuda:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }
.faixa-costumes:active { transform: translate(3px, 3px); }
.faixa-ajuda:active { transform: translate(2px, 2px); }
.hoje-atalhos .adicionar { width: auto; }
@media (hover: hover) {
  .faixa-costumes:hover { transform: translate(-2px, -2px); }
  .faixa-costumes:hover .stk { scale(1.08); }
  .faixa-ajuda:hover { transform: translate(-2px, -2px); filter: brightness(1.08); }
  a.selo:hover, a.selo:nth-child(2):hover { transform: translateY(-3px); }
}
@media (min-width: 900px) {
  .acoes-hoje { gap: 14px; margin-right: 0; }
  .hoje-atalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
  .hoje-atalhos > :only-child { grid-column: 1 / -1; }
  .hoje-atalhos .faixa-costumes { margin: 0; }
  .hoje-atalhos .adicionar { display: flex; align-items: center; justify-content: center; width: 100%; max-width: none; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .faixa-costumes, .faixa-ajuda, .faixa-costumes:hover, .faixa-ajuda:hover, .faixa-costumes:active, .faixa-ajuda:active { transition: none; transform: none; }
}

/* ===== Fliperama ===== */
:root {
  --dentes: polygon(100.0% 50.0%,95.0% 56.8%,97.8% 64.7%,91.0% 69.7%,91.3% 78.2%,83.4% 80.9%,81.2% 89.1%,72.8% 89.4%,68.3% 96.5%,60.1% 94.4%,53.7% 99.9%,46.6% 95.4%,38.9% 98.7%,33.4% 92.4%,25.0% 93.3%,21.6% 85.6%,13.3% 84.0%,12.4% 75.6%,5.0% 71.7%,6.5% 63.4%,0.6% 57.5%,4.5% 50.0%,0.6% 42.5%,6.5% 36.6%,5.0% 28.3%,12.4% 24.4%,13.3% 16.0%,21.6% 14.4%,25.0% 6.7%,33.4% 7.6%,38.9% 1.3%,46.6% 4.6%,53.7% 0.1%,60.1% 5.6%,68.3% 3.5%,72.7% 10.6%,81.2% 10.9%,83.4% 19.1%,91.3% 21.8%,91.0% 30.3%,97.8% 35.3%,95.0% 43.2%);
  /* Canto em degraus de pixel. */
  --degraus: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px));
  --relevo: inset 3px 3px 0 rgba(255, 255, 255, .34), inset -3px -3px 0 rgba(0, 0, 0, .38);
  --rebites: radial-gradient(circle at 9px 9px, #fff6 0 1.5px, #0007 2px 3px, transparent 3.5px), radial-gradient(circle at calc(100% - 9px) 9px, #fff6 0 1.5px, #0007 2px 3px, transparent 3.5px),
    radial-gradient(circle at 9px calc(100% - 9px), #fff6 0 1.5px, #0007 2px 3px, transparent 3.5px), radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #fff6 0 1.5px, #0007 2px 3px, transparent 3.5px);
  --dourado: linear-gradient(#fff3b0 0 30%, #ffcc1a 30% 62%, #f08a12 62%);
}
body {
  font-family: var(--corpo); font-size: 20px; line-height: 1.2; font-synthesis: none; color: var(--areia-clara); background-color: var(--noite);
  background-image: linear-gradient(rgba(255, 255, 255, .025) 50%, transparent 50%); background-size: 100% 4px;
}
/* Sem filtro de pixel: ele apagava desenho e borrava a foto no hover. */
.palco .avatar { animation: none; }

/* Titulo de missao: dourado em faixas, com contorno. */
h1, h2, h3 { font-family: var(--titulo); font-weight: 400; text-transform: uppercase; letter-spacing: 0; line-height: 1.35; }
h1 { font-size: 19px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }
h1, .capa h1, .tela > h1, .jogador > b, .heroi-dados h1 {
  color: var(--ouro); background: var(--dourado); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000);
}
.cartao h1, .cartao h2, .cartao h3 { color: var(--tinta); }
.muted { color: #c9c2a8; font-size: 18px; }
.cartao .muted, .costume small, .escolha small { color: #3f3a28; }
a { color: var(--ouro); }
.cartao a { color: #8a120c; }

/* HUD */
.topo { position: relative; z-index: 5; padding: 8px 12px; border: 0; background: var(--noite-2); box-shadow: inset 0 -3px 0 var(--ouro); }
.marca { font-family: var(--titulo); font-size: 13px; color: var(--ouro); background: none; padding: 0; text-transform: uppercase; gap: 8px; }
.marca s { color: var(--areia-clara); text-decoration-color: var(--alvo); text-decoration-thickness: 3px; }
.marca img { width: 28px; height: 28px; }
.topo a.mini { min-height: 0; padding: 7px 10px; color: #fff; background: var(--cobalto); font: 700 15px/1 var(--leitura); }
main { padding: 16px 12px; }
.abas { background: var(--noite-2); border: 0; box-shadow: inset 0 3px 0 var(--ouro); }
.abas a { color: var(--areia-clara); border: 0; font: 400 19px/1 var(--corpo); text-transform: none; }
.abas a.ativa { color: var(--ouro); background: none; text-decoration: none; }
.abas a.ativa::before { content: "\25B6"; margin-right: 3px; font-size: 10px; animation: piscar 1s steps(2) infinite; }
@keyframes piscar { 50% { opacity: 0; } }
@media (hover: hover) {
  .abas a:not(.jogador):hover { background: none; color: var(--ouro); transform: none; }
  .abas a.ativa:hover { background: none; color: var(--ouro); }
}
@media (min-width: 900px) {
  body { font-size: 21px; }
  h1 { font-size: 24px; }
  h2 { font-size: 17px; }
  main { padding: 24px; }
  .abas { background: var(--noite-2); box-shadow: inset -3px 0 0 var(--ouro); }
  .abas a:not(.jogador) { font-size: 25px; padding: 12px 18px; border: 0; }
  .jogador { background: none; }
  .jogador > b { font: 16px/1.3 var(--titulo); }
  .marca { font-size: 15px; }
}
.jogador .xp { color: var(--ouro); font: 400 19px var(--corpo); }
.jogador .saldo { color: var(--areia-clara); font: 400 19px var(--corpo); }
.palco { border: 3px solid #000; border-radius: 0; box-shadow: var(--relevo); }

/* Placa de metal rebitada */
.cartao, .guia, .costume, .escolha, .faixa-costumes, .selo {
  color: var(--tinta); border: 0; border-radius: 0; margin-right: 0; clip-path: var(--degraus);
  background-color: var(--areia); background-image: var(--rebites); box-shadow: var(--relevo);
}
.cartao { padding: 16px; }
.guia { padding: 0 14px; }
.guia summary { font: 400 21px/1.2 var(--corpo); text-transform: none; }
.item-hoje { background-color: var(--areia-clara); }
@media (hover: hover) { .itens .cartao:hover { transform: none; filter: none; } }

/* A ficha da maquina */
.stk { display: inline-block; flex: none; width: 60px; padding: 10px; border: 0; border-radius: 0; background: var(--areia-2); clip-path: var(--dentes); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .18); }
.stk.mini { width: 46px; padding: 8px; border-radius: 0; }
.miniaturas .stk { clip-path: none; padding: 2px; border-radius: 0; box-shadow: none; }
.cor-laranja { background: #e8913a; } .cor-amarelo { background: var(--ouro); } .cor-rosa { background: #e8756e; }
.cor-azul { background: #6fb2e0; } .cor-roxo { background: #ab8fd8; } .cor-verde { background: #8fb84e; }
.opcao input:checked + .stk { outline: 0; background: var(--ouro); }
.opcao input:focus-visible + .stk { outline: 3px solid var(--tinta); outline-offset: 2px; clip-path: none; }

/* Botao de fliperama */
.botao {
  position: relative; padding: 12px 14px; color: #fff !important; background: var(--alvo); border: 0; border-radius: 0; clip-path: var(--degraus);
  box-shadow: var(--relevo); font: 12px/1.3 var(--titulo); text-transform: uppercase; letter-spacing: 0;
}
.botao.pequeno { font-size: 11px; }
.botao.verde { background: var(--ouro); color: var(--tinta) !important; }
.botao.branco { background: var(--areia-clara); color: var(--tinta) !important; }
.botao[disabled] { background: #8d8a7c; color: #1c1a12 !important; box-shadow: none; }
.botao:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .38); }
.seletor button, .sugestoes button { font: 400 20px/1.1 var(--corpo); text-transform: none; color: var(--areia-clara); background: var(--chumbo); border: 0; border-radius: 0; clip-path: var(--degraus); box-shadow: var(--relevo); }
.sugestoes button { color: var(--tinta); background: var(--areia-clara); }
.seletor button[aria-selected=true], .sugestoes button[aria-pressed=true] { color: var(--tinta); background: var(--ouro); }
@media (hover: hover) {
  .botao:not([disabled]):hover { filter: brightness(1.14); }
  .seletor button:hover { background: #4b5059; transform: none; }
  .seletor button[aria-selected=true]:hover { background: var(--ouro); }
  .costume:hover, .escolha:hover, .faixa-costumes:hover { filter: brightness(1.08); transform: none; }
  .costume.feito:hover { transform: none; }
  .faixa-ajuda:hover { transform: none; }
}
.botao-google { clip-path: none; border: 1px solid #747775; border-radius: 4px; box-shadow: none; font-weight: 500; }
.botao-google:hover { background: #f7f8f8; box-shadow: none; transform: none; }

/* Ajuda nunca e piada: letra comum e azul calmo. */
.faixa-ajuda { color: #fff !important; background: var(--cobalto); border: 0; border-radius: 0; clip-path: var(--degraus); box-shadow: var(--relevo); font: 700 16px/1.2 var(--leitura); }
.texto-legal, .texto-legal p, .texto-legal li, .alerta.perigo, .tutorial p { font-family: var(--leitura); font-size: 16px; }
.texto-legal h1, .texto-legal h2 { font-family: var(--titulo); }

/* Placar */
.selo { padding-top: 14px; background-color: var(--noite-2); background-image: var(--rebites); color: var(--areia-clara); }
a.selo { color: var(--areia-clara); }
.selo b, .num-grande, .heroi-dados h1.num-grande, .numero b { font-family: var(--numero); letter-spacing: 0; }
.selo b { font-size: 14px; color: var(--ouro); white-space: nowrap; overflow-wrap: normal; }
.selo span { font-size: 16px; }
.selo .din-pos { color: #76e08e !important; }
.selo .din-neg { color: #ff8f86 !important; }
.num-grande { font-size: 20px; }
.cartao .num-grande { color: var(--alvo); }
@media (min-width: 900px) { .selo b { font-size: 22px; } }
.barra { height: 14px; background: var(--noite-2); border: 3px solid #000; border-radius: 0; }
.barra i { background: repeating-linear-gradient(90deg, #6fcf3f 0 8px, #4ea62c 8px 10px); }
.barra.rosa i { background: repeating-linear-gradient(90deg, var(--alvo) 0 8px, #9c1a12 8px 10px); }
.jogador .barra i, .heroi-dados .barra i { background: repeating-linear-gradient(90deg, var(--ouro) 0 8px, #d89a0c 8px 10px); }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea { color: var(--tinta); background: #fff8e0; border: 3px solid #000; border-radius: 0; font-family: var(--leitura); }
input:focus-visible, select:focus-visible, button:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; box-shadow: 0 0 0 2px #000; clip-path: none; }
label { font-weight: 400; font-size: 19px; }
.cartao label { color: var(--tinta); }
.lista li, .recado, .familia h3 { border-bottom: 2px dotted rgba(0, 0, 0, .5); }
.detalhe, .detalhe.muted { color: var(--ouro); background: var(--noite-2); }
.etiqueta { color: var(--ouro); }
.alerta { border: 0; border-radius: 0; }
.alerta.ok { background: var(--ouro); }
.alerta.ruim { color: #fff; background: var(--alvo); }
.alerta.perigo { background: #f4c88f; border-left: 6px solid var(--alvo); }
.erro { color: #a3120d; }
.tela > .erro { color: #ff8f86; }

/* A Tampinha fala como rodape de dialogo de jogo. */
.fala { position: relative; display: inline-block; margin: 0 0 10px; padding: 8px 12px; color: var(--areia-clara); background: #101a4a; border: 0; clip-path: var(--degraus); box-shadow: inset 0 0 0 3px #e8e8f0; font: 400 20px/1.15 var(--corpo); }

/* Recompensa: MISSAO CUMPRIDA */
.toast { color: var(--tinta); background: var(--ouro); border: 0; border-radius: 0; clip-path: var(--degraus); box-shadow: var(--relevo); animation: entrar-toast .2s steps(4), sair-toast .2s steps(3) 3.6s forwards; }
.toast.ruim { color: #fff; background: var(--alvo); animation: entrar-toast .2s steps(4); }
.toast.premio { color: var(--areia-clara); background: var(--noite-2); box-shadow: inset 0 0 0 3px var(--ouro); }
.toast.premio b { display: block; font: 26px/1.3 var(--numero); color: var(--ouro); background: var(--dourado); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.toast.premio em { display: block; margin: 4px 0; font: 400 20px/1.15 var(--corpo); }
.toast.premio small { display: inline-block; margin: 1px 6px 0 0; padding: 0; font: 400 17px var(--corpo); color: var(--ouro); background: none; }
.ganho-tampinhas { color: var(--areia-clara) !important; background: none !important; }
.subiu-caixa { color: var(--areia-clara); background: var(--noite-2); border: 0; clip-path: var(--degraus); box-shadow: inset 0 0 0 3px var(--ouro); animation: entrar-toast .2s steps(4); }
.subiu-chamada { font: 18px/1.4 var(--titulo); text-transform: uppercase; color: var(--ouro); }
.subiu h2 { color: var(--areia-clara); }

/* Nota de mercado */
.cupom { background-color: #fff8e0; font-family: var(--leitura); }
.cupom h2, .cupom h3 { color: var(--tinta); }

/* Cuidados */
.costume-texto b { font: 400 23px/1.05 var(--corpo); }
.costume-texto small { font-size: 17px; }
.costume-estado { color: var(--ouro); background: var(--noite-2); border-radius: 0; font: 10px/1 var(--titulo); padding: 7px; }
.costume.feito { background-color: #bcd98a; }
.costume.feito .costume-estado { color: #fff; background: var(--alvo); font-size: 10px; transform: none; }
.costume.feito .costume-estado::before { content: "\2713 "; }
.costume-semana i { color: var(--tinta); background: var(--areia-2); border: 0; border-radius: 0; font: 400 15px/1 var(--corpo); clip-path: var(--dentes); }
.costume-semana i.feito { background: var(--ouro); }
.costume-semana i.hoje { background: var(--areia-clara); border: 0; }
.costume-semana i.hoje.feito { color: #fff; background: var(--alvo); }
.costumes-como li { color: var(--areia-clara); background: var(--noite-2); border: 0; border-radius: 0; font-size: 17px; }
.costume:active, .faixa-costumes:active { transform: translateY(3px); }
.faixa-costumes b { font: 400 23px/1.05 var(--corpo); }
.faixa-costumes small { font-size: 17px; }
.nivel-ponto.atual, .nivel-ponto.selecionado { outline: 3px solid var(--alvo); }
.slogan { font: 400 25px/1.1 var(--corpo); color: var(--areia-clara); text-transform: none; }
.capa h1 { font-size: clamp(22px, 7vw, 32px); }
.capa h1 s { text-decoration-color: var(--alvo); text-decoration-thickness: 4px; -webkit-text-fill-color: #f1e4bb; }
.capa h1 img { background: none; }
.ajuda-ligar, .escolha b { font-family: var(--corpo); }
.escolha b { font-weight: 400; font-size: 24px; }
@media (max-width: 899px) { .abas a { font-size: 18px; padding: 8px 1px; } }
@media (max-width: 380px) { .abas a { font-size: 16px; } .abas a.ativa::before { display: none; } .costume-semana i { width: 20px; height: 20px; } }
@media (prefers-reduced-motion: reduce) { .abas a.ativa::before { animation: none; } }
.opcao, .selo span, .insignia small { font-size: 16px; }
.opcao, .passos-capa div, .passos li, .links, .rodape { font-family: var(--corpo); }
.passos-capa div { font-size: 16px; }
.passos li { font-size: 17px; }
.insignia b { font: 400 21px/1 var(--corpo); }
.insignia small { font: 400 16px/1 var(--corpo); }
.lista li, .missao p { font-size: 19px; }
.missao small, .opcao .progresso { font-size: 16px; }
.rodape, .links { font-size: 16px; }
.detalhe { font-size: 18px; }
.titulo-jogador { font-size: 17px; font-weight: 400; color: var(--ouro); }
.tabela-bonus b { font: 11px/1.3 var(--titulo); }
.produto .botao { padding: 8px 2px; font-size: 9px; white-space: nowrap; }
.seletor-loja button, .seletor-loja button:nth-child(n + 4) { font-size: 18px; }
.costumes-placar .num-grande { font-size: 18px; }
.ajuda-tela .cartao p, .ajuda-tela .cartao li, .ajuda-tela .fala { font-family: var(--leitura); font-size: 16px; line-height: 1.4; }
@media (max-width: 899px) {
  .hoje .selo b { font: 400 27px/1 var(--corpo); white-space: normal; overflow-wrap: anywhere; }
}
.vicio.tres { display: none; }

/* ===== Acabamento: chapas de ferramentas/gerar-arte.py e tipografia final ===== */
body { font-size: 16px; line-height: 1.4; background-image: none; }
h1 { font-size: 26px; line-height: 1.15; }
h2 { font-size: 20px; line-height: 1.15; }
h3 { font-size: 18px; line-height: 1.15; }
.muted { font-size: 14px; }
label { font-size: 15px; font-weight: 700; }
.marca { font-size: 19px; }
.abas a { font: 400 14px/1 var(--titulo); }
.topo a.mini { font: 700 14px/1 var(--corpo); }
.botao { font: 400 18px/1.1 var(--titulo); text-transform: none; }
.botao.pequeno { font-size: 15px; }
.produto .botao { padding: 1px 0; font-size: 12px; white-space: nowrap; }
.seletor button, .sugestoes button { font: 400 15px/1.1 var(--titulo); }
.seletor-loja button, .seletor-loja button:nth-child(n + 4) { font-size: 13px; }
.guia summary { font: 400 17px/1.2 var(--titulo); }
.selo b { font-size: 22px; }
.selo span { font-size: 13px; }
.num-grande, .costumes-placar .num-grande { font-size: 26px; }
.fala { font: 700 15px/1.25 var(--corpo); }
.toast.premio b { font-size: 32px; }
.toast.premio em { font: 700 15px/1.25 var(--corpo); }
.toast.premio small { font: 700 13px var(--corpo); }
.subiu-chamada { font-size: 26px; }
.costume-texto b, .faixa-costumes b, .escolha b { font: 400 18px/1.1 var(--titulo); }
.costume-texto small, .faixa-costumes small, .escolha small { font-size: 14px; }
.costume-estado, .costume.feito .costume-estado { font: 400 13px/1 var(--titulo); }
.costume-semana i { font: 700 11px/1 var(--corpo); }
.costumes-como li, .passos li { font-size: 13px; }
.passos-capa div { font-size: 13px; }
.opcao, .selo span, .insignia small { font-size: 12px; }
.insignia b { font: 400 15px/1.1 var(--titulo); }
.insignia small { font: 700 12px/1 var(--corpo); }
.jogador > b { font: 400 22px/1.1 var(--titulo); }
.jogador .xp, .jogador .saldo { font: 700 14px var(--corpo); }
.lista li, .missao p { font-size: 15px; }
.missao small, .opcao .progresso { font-size: 12px; }
.rodape, .links, .detalhe { font-size: 13px; }
.titulo-jogador { font-size: 14px; font-weight: 700; }
.tabela-bonus b { font: 400 15px/1.2 var(--titulo); }
.slogan { font: 700 20px/1.2 var(--corpo); }
.capa h1 { font-size: clamp(34px, 10vw, 48px); }
.ajuda-tela .cartao p, .ajuda-tela .cartao li, .ajuda-tela .fala { font-size: 16px; }
@media (min-width: 900px) {
  body { font-size: 17px; }
  h1 { font-size: 32px; }
  h2 { font-size: 22px; }
  .abas a:not(.jogador) { font-size: 19px; }
  .marca { font-size: 22px; }
  .selo b { font-size: 28px; }
}
@media (max-width: 899px) {
  .abas a { font-size: 13px; padding: 12px 1px; }
  .hoje .selo b { font: 400 21px/1.05 var(--titulo); }
}
.abas a.ativa::before { font-size: 9px; }

.cartao, .guia, .costume, .escolha, .faixa-costumes {
  background: none; box-shadow: none; clip-path: none; image-rendering: pixelated;
  border: 12px solid transparent; border-image: url(/img/arte/placa-areia-51c1bff983c3e06d61b5764f9511101b.png) 8 fill / 12px round;
}
.selo { clip-path: none; }
.cartao { padding: 4px; }
.guia { padding: 0 6px; }
.costume { min-height: 0; padding: 0; }
.item-hoje, .cupom { border-image-source: url(/img/arte/placa-clara-37dd8f55819993885a8e3ef30ea9a756.png); }
.costume.feito { background: none; border-image-source: url(/img/arte/placa-verde-250a337b5e8f8563e57bb9b31693b2d6.png); }
.apagar-canto { top: -4px; right: -2px; }
.botao, .faixa-ajuda, .seletor button {
  background: none; box-shadow: none; clip-path: none; image-rendering: pixelated;
  border: 10px solid transparent; border-image: url(/img/arte/botao-vermelho-5c2238a22aaa02e5efa1792575cb2447.png) 5 fill / 10px stretch; padding: 3px 6px;
}
.botao.verde { background: none; border-image-source: url(/img/arte/botao-ouro-364e0ee6506fe173dc8e98a6ba59ab66.png); }
.botao.branco { background: none; border-image-source: url(/img/arte/botao-claro-556c1c296fef9d357585ce4805a236a5.png); }
.botao[disabled] { background: none; border-image-source: url(/img/arte/botao-chumbo-e9d55bc86ee2c8dbfefc494020419248.png); color: var(--areia-clara) !important; }
.faixa-ajuda { border-image-source: url(/img/arte/botao-azul-9f38a94e61ce581690bdfd1e5e4e505a.png); }
.seletor button { background: none; border-image-source: url(/img/arte/botao-chumbo-e9d55bc86ee2c8dbfefc494020419248.png); }
.seletor button[aria-selected=true] { background: none; border-image-source: url(/img/arte/botao-ouro-364e0ee6506fe173dc8e98a6ba59ab66.png); }
.acoes-hoje > * { padding: 2px 4px; }
.botao:active { box-shadow: none; }
@media (hover: hover) { .seletor button:hover, .seletor button[aria-selected=true]:hover { background: none; filter: brightness(1.14); } }
/* O cenario fica so na capa, bem apagado, atras do conteudo. */
main:has(.capa) { image-rendering: pixelated; background: linear-gradient(rgba(13, 14, 19, .8), rgba(13, 14, 19, .8)), url(/img/arte/cenario-45ab5941e3d32614df1e00b74bf56f84.png) 32% 100% / cover no-repeat, var(--noite); }