/* Playgames do Berta — base da casca, escrita mobile-first.
   O padrão é o celular em pé; as telas maiores só acrescentam colunas.
   Regras fixas: texto a partir de 20 px, alvos de 48 px fora das grades,
   contraste alto e nada de cor como único sinal. */

:root {
  --papel: #FBFBF8;
  --superficie: #EEF1F6;
  --tinta: #16203A;
  --apagado: #4E5972;
  --linha: #D3D9E4;
  --caneta: #1B47B4;
  --caneta-texto: #FFFFFF;
  --selecao: #D33F21;
  --marca-texto: #16203A;
  --m0: #FFD24A; --m1: #FFB199; --m2: #D2BCFF; --m3: #C4E777; --m4: #A9D4FF;
  --certo: #266B32;
  --erro: #C0341A;

  --corpo: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", "Atkinson Hyperlegible Next", ui-monospace, Consolas, monospace;

  --base: 20px;
  --fator-grade: 0.58;

  /* espaçamentos que acompanham a largura da tela */
  --gutter: clamp(12px, 3.5vw, 28px);
  --respiro: clamp(.9rem, 3vw, 1.4rem);
  --raio: 16px;
}

html[data-tamanho="1"] { --base: 22px; --fator-grade: 0.66; }
html[data-tamanho="2"] { --base: 25px; --fator-grade: 0.72; }

:root[data-tema="escuro"] {
  --papel: #10141D; --superficie: #1A2030; --tinta: #ECEFF6; --apagado: #A9B2C6; --linha: #2E364A;
  --caneta: #8EAEFF; --caneta-texto: #0E1426; --selecao: #FF7A5C;
  --m0: #EBC03C; --m1: #F0A088; --m2: #BFA8F2; --m3: #B4D86A; --m4: #94C1EC;
  --certo: #7CCB88; --erro: #FF8A70;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-contraste="alto"]) {
    --papel: #10141D; --superficie: #1A2030; --tinta: #ECEFF6; --apagado: #A9B2C6; --linha: #2E364A;
    --caneta: #8EAEFF; --caneta-texto: #0E1426; --selecao: #FF7A5C;
    --m0: #EBC03C; --m1: #F0A088; --m2: #BFA8F2; --m3: #B4D86A; --m4: #94C1EC;
    --certo: #7CCB88; --erro: #FF8A70;
  }
}

:root[data-contraste="alto"] {
  --papel: #FFFFFF; --superficie: #FFFFFF; --tinta: #000000; --apagado: #000000; --linha: #000000;
  --caneta: #00268C; --caneta-texto: #FFFFFF; --selecao: #B0270A;
  --m0: #FFE680; --m1: #FFC4B0; --m2: #E0D0FF; --m3: #D8F49B; --m4: #C2E2FF;
  --certo: #12561C; --erro: #99230C;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: var(--base);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
img, svg { max-width: 100%; }
:focus-visible { outline: 4px solid var(--selecao); outline-offset: 3px; border-radius: 6px; }

.tela { min-height: 100svh; display: flex; flex-direction: column; }
.tela[hidden], [hidden] { display: none !important; }

.conteudo {
  flex: 1;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--respiro) calc(var(--respiro) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--respiro);
}
.conteudo.centro { justify-content: center; text-align: center; align-items: center; }
.conteudo.jogo { padding-inline: 8px; gap: .8rem; }

/* ---------- barras ---------- */
.barra {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem var(--gutter);
  padding-top: calc(.5rem + env(safe-area-inset-top));
  border-bottom: 2px solid var(--linha);
  background: var(--papel);
  position: sticky; top: 0; z-index: 5;
  min-height: 68px;
}
.barra h2 { font-size: 1em; flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra .botao { min-height: 52px; padding-inline: .8rem; font-size: .92em; min-width: 5rem; }

.barra-baixo {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: .6rem 8px calc(.6rem + env(safe-area-inset-bottom));
  border-top: 2px solid var(--linha);
  background: var(--papel);
  position: sticky; bottom: 0;
}
.barra-baixo .botao { flex: 1 1 4.5rem; min-height: 56px; padding-inline: .4rem; font-size: .88em; }

/* ---------- botões ---------- */
.botao {
  font-family: inherit; font-size: 1em; font-weight: 600;
  color: var(--tinta); background: var(--superficie);
  border: 2px solid var(--linha); border-radius: 14px;
  min-height: 60px; padding: .5rem 1rem; cursor: pointer;
}
.botao:hover { border-color: var(--caneta); }
.botao:active { transform: translateY(1px); }
.botao.principal { background: var(--caneta); border-color: var(--caneta); color: var(--caneta-texto); font-weight: 800; font-size: 1.05em; min-height: 66px; }
.botao.simples { background: var(--papel); }
.botao.largo { width: 100%; }
.botao[aria-pressed="true"] { background: var(--caneta); border-color: var(--caneta); color: var(--caneta-texto); }
.botao[disabled] { color: var(--apagado); background: var(--papel); border-style: dashed; cursor: default; opacity: .75; }
.botao[disabled]:hover { border-color: var(--linha); }
.botoes-grandes { display: flex; flex-direction: column; gap: .7rem; width: 100%; max-width: 24rem; }
.botoes-linha { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }

/* ---------- entrada e perfis ---------- */
.marca { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.05; font-weight: 800; letter-spacing: -.01em; }
.marca span { color: var(--caneta); }
.subtitulo { color: var(--apagado); font-size: .98em; max-width: 42ch; }
.rodape-inicio { font-family: var(--mono); font-size: .85em; color: var(--apagado); }

.formulario { display: flex; flex-direction: column; gap: .9rem; }
.campo { display: flex; flex-direction: column; gap: .35rem; font-weight: 700; }
.campo input {
  font-family: inherit; font-size: 1.05em; color: var(--tinta); width: 100%;
  background: var(--papel); border: 3px solid var(--linha); border-radius: 14px;
  min-height: 62px; padding: .5rem .9rem;
}
.campo input:focus { border-color: var(--caneta); outline: none; }
.erro-campo { background: var(--m1); color: var(--marca-texto); border-radius: 12px; padding: .7rem .9rem; font-weight: 700; }

.cabecalho-jogador { display: flex; flex-direction: column; gap: .5rem; }
.jogador { display: flex; align-items: center; gap: .6rem; }
.faixa-emoji { font-size: 1.9rem; line-height: 1; }
.jogador-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.jogador-texto b { font-size: 1.1em; }
.jogador-texto span { font-size: .84em; color: var(--apagado); font-family: var(--mono); }

/* ---------- estante: lista no estilo de loja de aplicativos ---------- */
.estante { display: flex; flex-direction: column; gap: 1.4rem; }

.prateleira { display: flex; flex-direction: column; gap: .2rem; }
.titulo-prateleira { font-size: 1.05em; }
.botao-prateleira {
  font-family: inherit; font-size: 1em; font-weight: 800; color: var(--tinta);
  background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: .35rem;
  padding: .45rem 0; min-height: 48px; width: 100%; text-align: left;
}
.seta-secao { width: 1.1em; height: 1.1em; flex: none; color: var(--apagado); transition: transform .18s; }
.botao-prateleira[aria-expanded="true"] .seta-secao { transform: rotate(90deg); }

.lista-jogos { list-style: none; margin: 0; padding: 0; --recuo: calc(3.15rem + .75rem); }
.lista-jogos.numerada { --recuo: calc(1.3rem + .55rem + 3.15rem + .55rem); }
/* O traço separador começa depois do ícone, como nas listas de loja.
   É um pseudo-elemento, e não uma margem, para não estreitar a linha inteira. */
.linha-jogo + .linha-jogo::before {
  content: ""; display: block; height: 1px;
  background: var(--linha); margin-left: var(--recuo);
}

.linha-toque {
  font-family: inherit; font-size: 1em; text-align: left; cursor: pointer;
  background: none; border: 0; color: var(--tinta);
  width: 100%; padding: .55rem 0;
  display: grid; grid-template-columns: 3.15rem minmax(0, 1fr) 6rem;
  align-items: center; column-gap: .75rem;
}
/* a prateleira numerada tem uma coluna a mais, então o texto vem um ponto menor */
.lista-jogos.numerada .linha-toque { grid-template-columns: 1.3rem 3.15rem minmax(0, 1fr) 5.6rem; column-gap: .55rem; }
.lista-jogos.numerada .linha-texto b { font-size: .84em; }
.linha-toque:hover .pilula { background: var(--caneta); color: var(--caneta-texto); }
.linha-toque:active { transform: translateY(1px); }

.posicao-jogo { font-family: var(--mono); font-size: 1.05em; font-weight: 700; color: var(--apagado); text-align: center; }

.capa {
  width: 3.15rem; height: 3.15rem; border-radius: 22%;
  display: grid; place-items: center; color: var(--marca-texto);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--cor) 92%, #FFFFFF) 0%,
    color-mix(in srgb, var(--cor) 62%, var(--papel)) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 14%, transparent);
}
.capa svg { width: 58%; height: 58%; }

.linha-texto { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.linha-texto b { font-size: .9em; line-height: 1.2; }
.chamada {
  font-size: .74em; line-height: 1.25; color: var(--apagado);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.linha-acao { display: flex; flex-direction: column; align-items: stretch; gap: .15rem; text-align: center; }
.pilula {
  font-size: .68em; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
  color: var(--caneta); background: color-mix(in srgb, var(--caneta) 14%, var(--papel));
  border-radius: 999px; padding: .3rem .4rem; width: 100%;
  min-height: 2.2rem; display: grid; place-items: center;
}
.linha-acao small { font-size: .62em; color: var(--apagado); white-space: nowrap; }

/* ---------- níveis ---------- */
.painel-fase { background: var(--superficie); border-radius: var(--raio); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.painel-titulo { font-family: var(--mono); font-weight: 700; letter-spacing: .03em; }
.painel-texto { font-size: .88em; color: var(--apagado); max-width: 62ch; }
.titulo-grupo { font-size: 1em; font-weight: 800; }
.cartoes { display: grid; gap: .6rem; grid-template-columns: 1fr; }
.cartao {
  font-family: inherit; font-size: 1em; text-align: left; cursor: pointer;
  background: var(--superficie); color: var(--tinta);
  border: 2px solid var(--linha); border-radius: var(--raio);
  padding: .8rem .9rem; min-height: 68px;
  display: flex; flex-direction: column; gap: .1rem;
}
.cartao b { font-size: 1em; }
.cartao span { color: var(--apagado); font-size: .85em; }
.cartao[aria-pressed="true"] { border-color: var(--caneta); background: var(--papel); box-shadow: inset 0 0 0 3px var(--caneta); }
.cartao[disabled] { cursor: default; opacity: .6; border-style: dashed; }

/* ---------- área de jogo ---------- */
.area-jogo { display: flex; flex-direction: column; gap: .8rem; }
.aviso { background: var(--superficie); border-radius: 14px; padding: .6rem .8rem; min-height: 2.6em; font-size: .9em; }
.aviso.vitoria { background: var(--m3); color: var(--marca-texto); font-weight: 800; }

.placar { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-family: var(--mono); font-size: .86em; }
.placar-item b { font-size: 1.2em; color: var(--caneta); font-variant-numeric: tabular-nums; }
.barra-progresso { height: 10px; background: var(--superficie); border-radius: 999px; overflow: hidden; }
.barra-progresso span { display: block; height: 100%; width: 0; background: var(--caneta); transition: width .3s; }

/* ---------- fim de partida ---------- */
.selo { font-family: var(--mono); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--caneta); }
#texto-fim { font-size: 1.3em; }
.ganho-pontos { font-family: var(--mono); font-weight: 700; background: var(--superficie); border-radius: 999px; padding: .5rem 1.1rem; }
.proxima-fase { background: var(--m4); color: var(--marca-texto); border-radius: var(--raio); padding: .8rem 1rem; max-width: 30rem; font-weight: 700; }
.curiosidade { background: var(--superficie); border-radius: var(--raio); padding: .9rem 1rem; max-width: 30rem; font-size: .95em; }
.conquistas-novas { background: var(--m0); color: var(--marca-texto); border-radius: var(--raio); padding: .8rem 1rem; max-width: 30rem; display: flex; flex-direction: column; gap: .25rem; }
.titulo-recompensa { font-family: var(--mono); font-size: .75em; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- ranking ---------- */
.ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.ranking li { display: flex; align-items: center; gap: .6rem; background: var(--superficie); border-radius: 12px; padding: .55rem .8rem; font-size: .95em; }
.ranking li.eu { background: var(--m0); color: var(--marca-texto); font-weight: 800; }
.ranking li.vazio { color: var(--apagado); font-style: italic; }
.posicao { font-family: var(--mono); font-weight: 700; min-width: 1.8rem; text-align: center; }
.nome-ranking { flex: 1; min-width: 0; }
.pontos-ranking { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .88em; white-space: nowrap; }

/* ---------- recompensas ---------- */
.conquistas, .faixas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.conquistas li, .faixas li { display: flex; gap: .7rem; align-items: flex-start; background: var(--superficie); border-radius: 14px; padding: .7rem .8rem; opacity: .65; font-size: .95em; }
.conquistas li.feita, .faixas li.feita { opacity: 1; background: var(--m3); color: var(--marca-texto); }
.marca-conquista { font-weight: 800; }

/* ---------- ajustes e ajuda ---------- */
.ajuste { display: flex; flex-direction: column; gap: .5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--linha); }
.ajuste-titulo { font-weight: 800; }
.seletor { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.seletor .opcao { width: 100%; padding-inline: .3rem; font-size: .92em; }
.explicacao { color: var(--apagado); font-size: .88em; max-width: 62ch; }
.passos { margin: 0; padding-left: 1.3rem; display: grid; gap: .8rem; }
.passos li { max-width: 62ch; }

/* ---------- telas maiores ---------- */
@media (min-width: 560px) {
  .conteudo { max-width: 46rem; }
  .conteudo.jogo { max-width: 46rem; padding-inline: var(--gutter); }
  .lista-jogos { --recuo: calc(3.9rem + 1rem); }
  .lista-jogos.numerada { --recuo: calc(1.6rem + .8rem + 3.9rem + .8rem); }
  .linha-toque { grid-template-columns: 3.9rem minmax(0, 1fr) 7rem; column-gap: 1rem; padding: .7rem 0; }
  .lista-jogos.numerada .linha-toque { grid-template-columns: 1.6rem 3.9rem minmax(0, 1fr) 7rem; column-gap: .8rem; }
  .lista-jogos.numerada .linha-texto b { font-size: .9em; }
  .capa { width: 3.9rem; height: 3.9rem; }
  .cartoes { grid-template-columns: repeat(2, 1fr); }
  .botoes-linha { grid-template-columns: repeat(4, 1fr); }
  .barra { min-height: 76px; }
  .barra .botao { min-width: 6rem; font-size: .95em; }
  .barra-baixo { gap: .6rem; padding-inline: var(--gutter); }
  .barra-baixo .botao { flex: 1 1 8rem; font-size: .95em; min-height: 60px; }
  .seletor .opcao { font-size: 1em; }
}

@media (min-width: 900px) {
  .conteudo { max-width: 52rem; }
  .conteudo.jogo { max-width: 64rem; }
  .marca { font-size: 2.8rem; }
}

/* celular deitado: telas baixas ganham espaço vertical */
@media (orientation: landscape) and (max-height: 540px) {
  .barra { min-height: 56px; position: static; }
  .barra .botao, .barra-baixo .botao { min-height: 48px; }
  .barra-baixo { position: static; }
  .conteudo { padding-block: .6rem; gap: .6rem; }
  .aviso { min-height: 2.2em; }
}

@media (prefers-reduced-motion: reduce) {
  .botao:active { transform: none; }
  .barra-progresso span { transition: none; }
}