:root {
  --preto: #0e0d0c;
  --papel: #f4ecd4;
  --papel-2: #e6dcbd;
  --acido: #c6ff00;
  --rosa: #ff2e88;
  --laranja: #ff8a1f;
  --tinta: #0b0b0b;
  --titulo: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", 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(--preto);
  background-image: radial-gradient(rgba(244, 236, 212, .07) 1px, transparent 1.5px);
  background-size: 7px 7px;
  color: var(--papel);
  font: 15px/1.4 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
.topo { grid-area: topo; }
main { grid-area: miolo; overflow: auto; 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(--acido); }
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(--acido); 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(4, 1fr); background: var(--papel); 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(--rosa); }

.cartao {
  background: var(--papel); color: var(--tinta); border: 3px solid var(--tinta);
  box-shadow: 4px 4px 0 var(--rosa); padding: 12px; margin: 0 4px 12px 0;
}
.cartao.verde { box-shadow: 4px 4px 0 var(--acido); }
.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(--papel); 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(--acido); }
.barra.rosa i { background: var(--rosa); }
.etiqueta {
  display: inline-block; padding: 1px 6px; background: var(--tinta); color: var(--acido);
  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, a:focus-visible { outline: 3px solid var(--rosa); outline-offset: 1px; }
.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(--rosa); color: var(--tinta) !important; border: 3px solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta);
  font: 19px/1.1 var(--titulo); letter-spacing: .5px; text-transform: uppercase;
}
.botao:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.botao.verde { background: var(--acido); }
.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(--acido); 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(--acido); }
.alerta.ruim { background: var(--rosa); }
.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(--papel-2);
  border: 3px solid var(--tinta); border-radius: 12px; box-shadow: 2px 2px 0 var(--tinta); transform: rotate(-3deg);
}
.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(--papel-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 "Trebuchet MS", "Segoe UI", system-ui, sans-serif; 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(--rosa); outline-offset: 2px; background: var(--acido); }
.opcao input:focus-visible + .stk { outline: 3px solid var(--rosa); 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(--rosa); 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(--papel); 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(--acido); }
.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(--rosa); opacity: 1; }
.grafico .media { position: absolute; left: 0; right: 0; border-top: 3px dashed var(--rosa); 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(--acido); margin: 0; transform: rotate(-2deg); }
.slogan { font: 20px/1.15 var(--titulo); color: var(--rosa); text-transform: uppercase; margin: 2px 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 { max-width: 1240px; margin: 0 auto; }
  .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(--acido); 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(--papel-2);
  border: 4px solid var(--tinta); border-radius: 18px; display: flex; align-items: flex-end; justify-content: center;
}
.palco .avatar { width: 96%; }
.mold-prata { border-color: #c9d1d9; box-shadow: 0 0 0 3px var(--tinta), 0 0 0 6px #8a939c; }
.mold-ouro { border-color: #ffd400; box-shadow: 0 0 0 3px var(--tinta), 0 0 14px 3px #ffd400; }
.mold-neon { border-color: var(--rosa); box-shadow: 0 0 0 3px var(--tinta), 0 0 16px 4px var(--rosa), 0 0 26px 6px var(--acido); }
.mold-fogo { border-color: var(--laranja); box-shadow: 0 0 0 3px var(--tinta), 0 -4px 18px 5px #ff4d00; }
.mold-onda { border-color: #2d9cff; box-shadow: 0 0 0 3px var(--tinta), 0 0 0 7px #c6ff00, 0 0 18px 8px #2d9cff; }
.fundo-praia { background: linear-gradient(#8fd8ff 0 58%, #2d9cff 58% 74%, #f4dc9a 74%); }
.fundo-sol { background: radial-gradient(circle at 50% 62%, #ffd400 0 16%, transparent 17%), linear-gradient(#ff2e88, #ff8a1f 70%, #5a2a72 70%); }
.fundo-noite { background: radial-gradient(circle at 80% 18%, #f4ecd4 0 9%, transparent 10%), linear-gradient(#0d1140, #3c2a78); }
.fundo-grafite { background: repeating-linear-gradient(115deg, #1b1917 0 18px, #ff2e88 18px 24px, #1b1917 24px 44px, #c6ff00 44px 48px); }
.fundo-galaxia { background: radial-gradient(circle at 20% 25%, #fff 0 1.5%, transparent 2%), radial-gradient(circle at 75% 30%, #fff 0 1%, transparent 1.5%), radial-gradient(circle at 60% 12%, #fff 0 1%, transparent 1.5%), radial-gradient(circle at 40% 40%, #8a4dff, #0b0730 70%); }

.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(--preto); color: var(--papel) !important;
    font: 400 14px/1.2 "Trebuchet MS", sans-serif !important; text-transform: none !important;
  }
  .jogador b { font: 26px/1 var(--titulo); letter-spacing: .5px; color: var(--acido); overflow-wrap: anywhere; }
  .jogador .etiqueta { align-self: center; background: var(--rosa); 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(--papel); 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: 2px; }
.ligacao { color: inherit !important; text-decoration: none; }
.voltar { display: inline-block; text-decoration: none; }
.vazio { max-width: 560px; }
.coluna { min-width: 0; }

.guia { background: var(--papel); 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: 58px; 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); box-shadow: 4px 4px 0 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(--acido); }
.toast.ruim { background: var(--rosa); }
.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(-30px) scale(.8); } }
@keyframes sair-toast { to { opacity: 0; transform: translateY(-20px); 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(--papel); color: var(--tinta); border: 4px solid var(--tinta);
  box-shadow: 6px 6px 0 var(--rosa); 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(--acido); }
  .abas a.ativa:hover { background: var(--rosa); }
  .botao:not([disabled]):hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tinta); filter: brightness(1.08); }
  .seletor button:hover { background: #fff; transform: translateY(-2px); }
  .seletor button[aria-selected=true]:hover { background: var(--acido); }
  .selo:hover, .produto:hover { transform: translateY(-3px); }
  .itens .cartao:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--rosa); }
  .stk:hover, .opcao:hover .stk { transform: rotate(3deg) scale(1.08); }
  .jogador:hover .palco { transform: scale(1.02); }
  .palco { transition: transform .2s ease; }
  .marca:hover img { transform: rotate(-20deg) scale(1.1); }
  .marca:hover { transform: translateX(2px); }
  .sair:hover { background: var(--rosa); color: var(--tinta); }
  .topo a.mini:hover, .voltar:hover { transform: translateX(-2px); }
  .botao-texto:hover { color: var(--rosa); }
  .guia summary:hover { color: #b00040; }
  .lista a:hover { background: var(--acido); }
}
.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 { 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: 70px; }
}

/* ===== Visual trash: xerox, fita crepe, recorte e tinta ===== */
@font-face { font-family: "Marcador"; src: url("/fontes/permanent-marker.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Maquina"; src: url("/fontes/special-elite.woff2") format("woff2"); font-display: swap; }
:root { --titulo: "Marcador", Impact, "Arial Black", sans-serif; --din-pos: #0a6b2d; --din-neg: #b3001b; }

body {
  font-family: "Maquina", "Courier New", monospace;
  background-color: #0c0b0a;
  background-image:
    radial-gradient(rgba(244, 236, 212, .09) 1px, transparent 1.4px),
    repeating-linear-gradient(-8deg, rgba(255, 46, 136, .05) 0 2px, transparent 2px 90px);
  background-size: 6px 6px, auto;
}
h1, h2, h3 { text-transform: none; letter-spacing: 0; }
h1 { transform: rotate(-1deg); }
.marca, .abas a, .botao, .seletor button, .guia summary, .selo b, .toast.premio b { font-family: var(--titulo); text-transform: none; }
.marca s, .capa h1 s { text-decoration-color: var(--rosa); text-decoration-thickness: 4px; }

.topo { background: var(--acido); border-bottom: 0; clip-path: polygon(0 0, 100% 0, 100% 86%, 88% 100%, 72% 88%, 55% 100%, 37% 90%, 20% 100%, 0 88%); padding-bottom: 12px; }
.sair, .etiqueta { font-family: "Maquina", monospace; }
.sair { transform: rotate(2deg); }

/* Cartoes parecem papel colado com fita */
.cartao { position: relative; box-shadow: 5px 6px 0 var(--rosa); border-width: 2px; border-radius: 3px 12px 4px 10px / 10px 3px 12px 4px; }
.cartao:nth-child(odd) { transform: rotate(-.35deg); }
.cartao:nth-child(even) { transform: rotate(.35deg); }
.selo { position: relative; border-width: 2px; transform: rotate(-1deg); clip-path: polygon(0 2%, 100% 0, 98% 100%, 2% 97%); }
.selo:nth-child(2) { transform: rotate(1.2deg); }
.selo::before {
  content: ""; position: absolute; top: -6px; left: 30%; width: 40%; height: 13px;
  background: rgba(255, 212, 0, .75); transform: rotate(-3deg);
}
.selo { clip-path: none; }
.fala {
  display: inline-block; margin: 0 0 10px; padding: 3px 8px; background: var(--tinta); color: var(--acido);
  font: 16px/1.2 var(--titulo); transform: rotate(-.8deg); border-left: 5px solid var(--rosa);
}
.botao { border-width: 3px; border-radius: 2px 7px 3px 9px / 6px 3px 8px 2px; transform: rotate(-.5deg); }
.botao:nth-of-type(even) { transform: rotate(.6deg); }
.abas a { font-size: 18px; }
.abas a.ativa { background: var(--rosa); text-decoration: underline wavy; }
.toast { border-radius: 2px; transform: rotate(-1deg); }
.toast.premio em { display: block; font: 700 15px/1.25 "Maquina", monospace; margin-bottom: 4px; }
.toast.premio small { display: inline-block; margin: 1px 5px 0 0; font-size: 12px; padding: 0 4px; background: var(--tinta); color: #ffd400; }
.subiu-chamada { font-family: var(--titulo); text-transform: none; }

/* 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(--acido); font: 700 13px "Maquina", monospace; }
.jogador .saldo { color: #ffd400; font: 700 13px "Maquina", monospace; }

/* Rank */
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rank li { display: grid; grid-template-columns: 34px 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px; border-bottom: 2px dashed var(--tinta); }
.rank li.eu { background: var(--acido); }
.rank .posicao { font: 24px/1 var(--titulo); text-align: center; }
.rank-nome { min-width: 0; }
.rank-nome b, .rank-nome small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank li:nth-child(1) .posicao { color: #b58900; }

/* Glitch no hover */
@media (hover: hover) {
  .marca:hover span, .botao:not([disabled]):hover { text-shadow: 2px 0 var(--rosa), -2px 0 #2d9cff; }
  .abas a:not(.jogador):hover { transform: translateX(4px) rotate(-.6deg); }
  .cartao:hover { filter: contrast(1.04); }
  .rank li:hover { background: var(--papel-2); }
  .rank li.eu:hover { background: var(--acido); }
}
.alertas, .subiu { font-family: "Maquina", monospace; }
.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 "Maquina", monospace; 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(--papel); }
.jogador .insignia .fig { width: 40px; }
.heroi-dados .insignia { margin: 2px 0 2px; }
.rank-nome .insignia .fig { width: 24px; }
.rank-nome .insignia small { display: inline; }
.rank-nome .insignia b { display: inline; font: 700 12px "Maquina", monospace; }
.rank .posicao { color: var(--tinta); }
.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(--rosa); 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; }
}

/* Marcador desenha o 1 como um risco: numeros usam fonte legivel. */
.selo b, .rank .posicao, .num-grande, .heroi-dados h1.num-grande { font-family: Impact, Haettenschweiler, "Arial Black", sans-serif; letter-spacing: .5px; }
.rank-nome .insignia small::after { content: " - "; }
.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; }
.rank li.eu .posicao, .rank li:nth-child(1) .posicao { color: var(--tinta); }
.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; }
.alertas { top: auto; bottom: 64px; }
@media (min-width: 900px) {
  .abas a:not(.jogador) { justify-content: flex-start; }
  .alertas { top: auto; bottom: 20px; }
  .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(--acido); }
.texto-legal .voltar, .centro > .voltar { color: var(--acido); }

.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: 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: 74dvh; }
}