/* Tema visual comum (out/2026): carregado por último em todas as páginas.
   Títulos em Sora, texto em Plus Jakarta Sans, cartões mais leves.
   As cores dos jogos, a faixa amarela e o mascote continuam iguais. */
:root{
  --display:"Sora","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bg:#FFF9EC;
  --line:#EFE4CB;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#1B1813;--line:#3A3327}}
:root[data-theme="dark"]{--bg:#1B1813;--line:#3A3327}

body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* Sora é mais larga: aperta um pouco os títulos */
h1,h2,h3,h4{letter-spacing:-.02em}

/* Balão "instale o app" escondido de verdade: no iPhone, a barra
   transparente do Safari mostrava ele por baixo (faixa clara no fim da tela). */
.install{transition-property:translate,visibility}
.install:not(.show){visibility:hidden}

/* ---------- cabeçalho fino ---------- */
/* Jogos e Galera: uma linha só — voltar | mascote + nome | ofensiva e conta */
.band:has(> .topbar){padding-inline:max(16px,calc((100% - 480px) / 2 + 16px));display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:6px;
  padding-top:max(env(safe-area-inset-top,0px),8px);min-height:calc(max(env(safe-area-inset-top,0px),8px) + 54px)}
.band:has(> .topbar) > .topbar{display:contents}
.band:has(> .topbar) .back{grid-column:1;grid-row:1;font-size:0;width:30px;height:36px;padding:0;justify-content:flex-start}
.band:has(> .topbar) .back svg{width:18px;height:18px}
.band:has(> .topbar) .topbar > :not(.back){grid-column:3;grid-row:1}
.band:has(> .topbar) > .band-inner{grid-column:2;grid-row:1;align-self:stretch;height:auto;min-height:0;max-width:none;margin:0;justify-content:flex-start}
.band:has(> .topbar) .lockup{translate:none;gap:6px;align-items:flex-end;justify-content:flex-start;min-width:0}
.band:has(> .topbar) .mascot{height:54px;margin-bottom:-16px;animation:none}
.band:has(> .topbar) .lockup h1,.band:has(> .topbar) .lockup h1.longo{font-size:min(19px,4.8vw);font-weight:600;letter-spacing:-.01em;color:#fff;text-shadow:none;margin:0 0 15px;overflow:hidden;text-overflow:ellipsis;min-width:0}
.band:has(> .topbar) .back{margin-right:-2px}
.band:has(> .topbar) .tag-online{align-self:center;margin-bottom:0}

/* pílulas do topo mais discretas */
.band .streak,.band .hstreak,.band .login,.band .pillbtn{font-size:13px;padding-block:5px;min-height:0}
.band .streak svg,.band .hstreak svg,.band .login svg{width:16px;height:16px}
.band .login .pic{width:24px;height:24px}

/* Página inicial e página da Galera: marca menor */
.band-inner:has(> .brandtext){min-height:calc(env(safe-area-inset-top,0px) + 84px)}
.band-home .band-inner:has(> .brandtext){min-height:72px}
.band-home{padding-top:calc(env(safe-area-inset-top,0px) + 14px)}
.band-inner:has(> .brandtext) .mascot{height:62px;margin-bottom:-12px}
.brandtext{padding-bottom:12px}
.brandtext h1{font-size:24px!important;font-weight:600!important;text-shadow:none!important;letter-spacing:-.02em}
.brandtext p{font-size:12.5px!important;font-weight:500!important;text-shadow:none!important;opacity:.95}

/* Páginas de conta e institucionais */
.band > .band-inner > a > img,.band > .band-inner > .home > img{height:44px!important;margin-bottom:-10px!important}
.band > .band-inner:has(> a > img){height:56px!important}
.band > .band-inner > a > span{font-size:20px!important;font-weight:600!important;text-shadow:none!important;margin-bottom:14px!important}
.brandtext h1,.brandtext p{color:#fff!important}
.band .login,.band .hstreak,.band .streak{background:rgba(255,255,255,.45)}
/* nos jogos, "Entrar" vira só o ícone de pessoa para o nome do jogo caber */
.band:has(> .topbar) .acct-btn span.nm{display:none}
.band:has(> .topbar) .acct-btn{gap:2px;padding:5px 8px;font-size:13px}
.band:has(> .topbar) .acct-btn:has(.acct-pic){padding:3px}

/* Página inicial: subtítulo em tom escuro */
.band:not(.band-home) .brandtext p{color:var(--brand-ink)!important;opacity:.8}

/* O fundo em duas cores (topo da faixa / fundo da página) se repetia
   abaixo do fim da página e deixava uma linha amarela no rodapé. */
html{background-size:100% calc(100% + 200vh)!important;background-position:0 -100vh!important;background-repeat:no-repeat!important}

.band:has(> .band-inner > a > img){overflow:hidden}

/* Textos da faixa no mesmo tom do subtítulo da página inicial
   (marrom escuro). A Galera, de faixa roxa, mantém branco (galera.css). */
.band .lockup h1,.band .lockup h1.longo,.brandtext h1,.brandtext p,.band > .band-inner > a > span{color:var(--faixa-texto,rgb(59 42 5 / .8))!important;opacity:1!important}
@media (min-width:600px){.band:has(> .topbar) .acct-btn span.nm{display:inline}.band:has(> .topbar) .acct-btn{gap:6px;padding:5px 11px 5px 7px}}

/* ---------- cartões leves (teste no beta) ----------
   Caixas brancas sem contorno, só com uma sombra suave, como os cartões
   dos jogos na página inicial. A borda fica transparente (não some), para
   os estados que mudam a cor da borda — selecionado, certo, errado,
   próxima pista — continuarem aparecendo. */
:root{--sombra-cartao:0 2px 0 rgb(var(--shadow)/.06),0 1px 4px rgb(var(--shadow)/.07)}
.card,.card-white,.tile,.clue.up:not(.next):not(.found),.icon-btn,.hint-btn,.result,.verse,.game,.grp,
.theme-btn,.setup-row,details.ajustes,.player-item,.question-item,.share-card,.demo,.box,.rk,.papel,.mini,
.chipbtn,.word-zone,.tabu-card,.announce-box{border-color:transparent;box-shadow:var(--sombra-cartao)}