:root {
  --fundo: #101826;
  --fundo2: #172235;
  --cartao: #1b2840;
  --borda: #2e4062;
  --texto: #f2f6ff;
  --suave: #9aabc9;
  --amarelo: #ffc845;
  --amarelo-esc: #e0a516;
  --azul: #3d8bff;
  --azul-esc: #2a6ad6;
  --verde: #2fd38a;
  --laranja: #ff9f43;
  --vermelho: #ff5d6c;
  --raio: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 200, 69, 0.12), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(61, 139, 255, 0.16), transparent 45%) fixed,
    var(--fundo);
  color: var(--texto);
  font-family: 'Nunito', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
/* imagem de fundo (lupas, pegadas, ?) presa na tela, por baixo de tudo */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url(img/fundo.jpg) center / cover no-repeat;
  opacity: 0.9;
}
body { position: relative; z-index: 0; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button { cursor: pointer; }
.app { min-height: 100%; display: flex; flex-direction: column; }
.tela { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cartao {
  width: min(520px, 100%); background: var(--cartao); border: 2px solid var(--borda); border-radius: var(--raio);
  padding: 26px 24px 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* ── logo ── */
.lupa {
  width: 92px; height: 92px; margin: 0 auto 6px; border-radius: 50%; border: 9px solid var(--amarelo); position: relative;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 40px rgba(255, 200, 69, 0.35);
  animation: procurar 4s ease-in-out infinite;
}
.lupa::after { content: ''; position: absolute; width: 14px; height: 40px; background: var(--amarelo); border-radius: 8px; right: -24px; bottom: -34px; transform: rotate(-45deg); }
.lupa span { font-size: 40px; }
@keyframes procurar { 0%, 100% { transform: translate(-8px, 0) rotate(-6deg); } 50% { transform: translate(8px, -4px) rotate(6deg); } }
.logo { margin: 26px 0 0; text-align: center; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 46px; line-height: 0.95; letter-spacing: 1px; }
.logo span { display: block; font-size: 30px; color: var(--amarelo); }
.sub { text-align: center; color: var(--suave); margin: 14px 0 20px; line-height: 1.45; }
.sub b { color: var(--texto); }

/* logo desenhado */
.logo-img { margin: -6px 0 0; text-align: center; line-height: 0; }
.logo-anim { position: relative; display: inline-block; width: min(420px, 100%); animation: logo-chega 0.9s cubic-bezier(.2, 1.6, .4, 1) both, balancar 5s ease-in-out 0.9s infinite; }
.logo-anim img { width: 100%; height: auto; display: block; }
/* faixa de luz que passa por cima das letras (só onde tem desenho) */
.logo-brilho {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: var(--logo-mascara, url(img/logo-q0.png)); mask-image: var(--logo-mascara, url(img/logo-q0.png));
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.75) 48%, rgba(255, 255, 255, 0.0) 60%) no-repeat;
  background-size: 300% 100%; background-position: 160% 0; animation: logo-brilho 4.5s ease-in-out 1.2s infinite;
}
/* reflexo piscando na lente da lupa */
.logo-lente { position: absolute; left: 80.5%; top: 37%; width: 9%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 45%); animation: lente 3s ease-in-out 1.5s infinite; opacity: 0; }
.estrela { position: absolute; color: var(--amarelo); font-size: 28px; line-height: 1; pointer-events: none; text-shadow: 0 0 10px rgba(255, 200, 69, 0.9); animation: piscar-estrela 2.4s ease-in-out infinite; opacity: 0; }
.estrela.e1 { left: 2%; top: 8%; animation-delay: 1.2s; }
.estrela.e2 { left: 47%; top: -4%; font-size: 16px; color: #8cc0ff; text-shadow: 0 0 10px rgba(61, 139, 255, 0.9); animation-delay: 2s; }
.estrela.e3 { left: 96%; top: 52%; animation-delay: 2.8s; }
.estrela.e4 { left: 10%; top: 86%; font-size: 15px; color: #8cc0ff; text-shadow: 0 0 10px rgba(61, 139, 255, 0.9); animation-delay: 3.4s; }
@keyframes logo-chega { from { opacity: 0; transform: translateY(-40px) scale(0.6) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes logo-brilho { 0% { background-position: 160% 0; } 45%, 100% { background-position: -60% 0; } }
@keyframes lente { 0%, 60%, 100% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.1); } 80% { opacity: 0.2; transform: scale(1); } }
@keyframes piscar-estrela { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0); } 40% { opacity: 1; transform: scale(1.15) rotate(45deg); } 70% { opacity: 0.2; transform: scale(0.6) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .logo-anim, .logo-brilho, .logo-lente, .estrela { animation: none; } .estrela, .logo-lente { display: none; } }
@keyframes balancar { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-4px); } }
.logo-mini { display: block; width: 190px; height: auto; margin: -6px auto 4px; }

/* mascote */
.inicio { position: relative; }
.mascote-inicio { position: absolute; right: -185px; bottom: -20px; width: 200px; height: auto; pointer-events: none; animation: procurar 4s ease-in-out infinite; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45)); }
.cartao--fim { position: relative; }
@media (max-width: 900px) {
  .mascote-inicio { position: static; display: block; width: 110px; margin: -8px auto 0; }

}

/* ── formulário ── */
.campo { display: grid; gap: 6px; margin-bottom: 14px; }
.campo span { font-size: 14px; color: var(--suave); font-weight: 700; }
input {
  width: 100%; padding: 12px 14px; border: 2px solid var(--borda); border-radius: 12px; background: var(--fundo2);
  color: var(--texto); font-size: 17px; font-weight: 700; outline: none;
}
input:focus { border-color: var(--amarelo); box-shadow: 0 0 0 4px rgba(255, 200, 69, 0.15); }
.codigo { text-align: center; text-transform: uppercase; letter-spacing: 0.35em; font-family: 'Lilita One', sans-serif; }
.linha { display: flex; gap: 10px; align-items: center; }
.linha > input { flex: 1; min-width: 0; }
.linha--fim { justify-content: space-between; margin-top: 20px; }
.linha--fim .btn--grande { width: auto; flex: 1; }
.ou { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; color: var(--suave); font-size: 13px; }
.ou::before, .ou::after { content: ''; flex: 1; height: 1px; background: var(--borda); }
.btn {
  border: 0; border-radius: 12px; background: var(--amarelo); color: #1c1400; padding: 12px 18px; font-weight: 900; font-size: 16px;
  box-shadow: 0 4px 0 var(--amarelo-esc); transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--amarelo-esc); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn--grande { width: 100%; padding: 15px; font-size: 18px; }
.btn--azul { background: var(--azul); color: #fff; box-shadow: 0 4px 0 var(--azul-esc); }
.btn--azul:active { box-shadow: 0 1px 0 var(--azul-esc); }
.btn--fantasma { background: transparent; color: var(--texto); border: 2px solid var(--borda); box-shadow: none; }
.btn--fantasma:active { box-shadow: none; }
.btn--pequeno { padding: 7px 12px; font-size: 14px; }
.regras { margin-top: 18px; color: var(--suave); font-size: 14px; }
.regras summary { cursor: pointer; font-weight: 800; color: var(--texto); }
.regras ol { padding-left: 20px; line-height: 1.55; }
.regras b { color: var(--texto); }

/* ── sala ── */
.rotulo { margin: 16px 0 8px; font-size: 13px; color: var(--suave); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; }
.rotulo small { text-transform: none; letter-spacing: 0; font-weight: 600; }
.sala-codigo { font-family: 'Lilita One', sans-serif; font-size: 56px; letter-spacing: 0.25em; text-align: center; color: var(--amarelo); line-height: 1; padding-left: 0.25em; }
.copiar { display: block; margin: 10px auto 0; }
.jogadores { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jogadores li { background: var(--fundo2); border: 2px solid var(--borda); padding: 7px 12px; border-radius: 999px; font-weight: 800; }
.jogadores li.dono::after { content: ' 👑'; }
.jogadores li.eu { border-color: var(--amarelo); }
.expulsar {
  margin-left: 6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(255, 93, 108, 0.18); color: var(--vermelho);
  font-weight: 900; font-size: 12px; line-height: 22px; padding: 0; vertical-align: middle;
}
.expulsar:hover { background: var(--vermelho); color: #fff; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes button {
  background: var(--fundo2); color: var(--texto); border: 2px solid var(--borda); border-radius: 12px; padding: 8px 12px; font-weight: 800;
}
.opcoes button.on { border-color: var(--amarelo); background: rgba(255, 200, 69, 0.14); color: var(--amarelo); }
.opcoes button:disabled { cursor: default; }
.espera { text-align: center; color: var(--suave); margin: 14px 0 0; }

/* ── jogo ── */
.tela--jogo { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 10px; gap: 10px; max-width: 1280px; width: 100%; margin: 0 auto; }
.topo { display: flex; align-items: center; gap: 12px; }
.topo-info { display: grid; line-height: 1.15; min-width: 110px; }
.topo-info b { font-size: 16px; }
.topo-info span { font-size: 13px; color: var(--suave); }
.relogio { flex: 1; height: 30px; background: var(--fundo2); border: 2px solid var(--borda); border-radius: 999px; position: relative; overflow: hidden; }
.relogio i { position: absolute; inset: 0; width: 100%; background: linear-gradient(90deg, var(--azul), #69a8ff); transition: width 0.25s linear; }
.relogio.pouco i { background: linear-gradient(90deg, var(--vermelho), #ff8a95); }
.relogio span { position: relative; display: grid; place-items: center; height: 100%; font-weight: 900; font-size: 15px; text-shadow: 0 1px 2px #0008; }

.mesa { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; height: calc(100vh - 92px); min-height: 480px; }
.palco.descrevendo .quadro { width: min(100%, calc((100vh - 505px) * 1.6)); min-width: min(100%, 420px); }
.palco.com-segredo .quadro { width: min(100%, calc((100vh - 310px) * 1.6)); }
.palco.descrevendo.com-segredo .quadro { width: min(100%, calc((100vh - 495px) * 1.6)); }
.palco { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.faixa { text-align: center; font-weight: 800; font-size: 17px; min-height: 24px; }
.faixa b { color: var(--amarelo); }
.segredo {
  display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; column-gap: 12px; padding: 6px 14px; border-radius: 14px; background: rgba(255, 200, 69, 0.1); border: 2px dashed var(--amarelo);
}
.segredo small { color: var(--suave); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.segredo b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 26px; color: var(--amarelo); text-align: center; line-height: 1.15; }
.segredo { align-items: center; }
.segredo .seg-cat { text-transform: uppercase; order: -1; padding: 4px 12px; border-radius: 10px; color: #fff; font-family: 'Lilita One', sans-serif; font-size: 17px; letter-spacing: 0.5px; }
.cat-grande {
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 18px; border-radius: 16px; margin: 0 auto;
  font-family: 'Lilita One', sans-serif; font-size: clamp(20px, 3.2vw, 30px); letter-spacing: 0.5px; color: #fff;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 10px 30px rgba(0, 0, 0, 0.3); animation: surgir 0.35s ease-out; text-align: center;
}
.cat-grande i { font-style: normal; font-size: 1.4em; filter: drop-shadow(0 2px 2px #0005); }
.cat-filmes { background: linear-gradient(135deg, #e5484d, #b3213b); }
.cat-musicas { background: linear-gradient(135deg, #a855f7, #6d28d9); }
.cat-series { background: linear-gradient(135deg, #3d8bff, #1f5bc4); }
.cat-jogos { background: linear-gradient(135deg, #22c55e, #15803d); }
.cat-animes { background: linear-gradient(135deg, #f472b6, #be185d); }
.cat-comidas { background: linear-gradient(135deg, #f97316, #c2410c); }
.cat-lugares { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.cat-ditados { background: linear-gradient(135deg, #a16207, #713f12); }
.cat-memes { background: linear-gradient(135deg, #eab308, #a16207); }
.cat-times { background: linear-gradient(135deg, #16a34a, #14532d); }
.mascara { text-align: center; font-family: ui-monospace, monospace; font-size: 24px; font-weight: 800; letter-spacing: 0.18em; color: var(--amarelo); white-space: pre-wrap; }

.quadro-caixa { width: 100%; }
.quadro {
  position: relative; width: min(100%, calc((100vh - 250px) * 1.6)); aspect-ratio: 16 / 10; margin: 0 auto; border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.06) 1.5px, transparent 1.6px) 0 0 / 26px 26px,
    linear-gradient(160deg, #fdfaf1, #efe7d2);
  border: 3px solid #e8dcb8; box-shadow: inset 0 0 0 3px #fff8, 0 10px 30px rgba(0, 0, 0, 0.35);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.quadro { background:
    radial-gradient(circle, rgba(0, 0, 0, 0.07) 1.5px, transparent 1.6px) 0 0 / 26px 26px,
    linear-gradient(160deg, #fffdf6, #f1e9d6); }
.quadro-vazio { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 20px; text-align: center; color: #8d8269; font-weight: 800; font-size: 17px; pointer-events: none; }
.quadro-vazio img { width: clamp(70px, 22%, 150px); height: auto; opacity: 0.9; animation: procurar 4s ease-in-out infinite; }
.quadro-vazio p { margin: 0; }
.peca {
  position: absolute; left: 0; top: 0; line-height: 1; transform-origin: center; white-space: nowrap; cursor: grab;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  transition: left 0.09s linear, top 0.09s linear, transform 0.09s linear, font-size 0.09s linear;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.18));
}
.quadro.meu .peca { transition: none; }
.quadro:not(.meu) .peca { cursor: default; pointer-events: none; }
.peca.nova { animation: pular 0.35s ease-out; }
@keyframes pular { 0% { scale: 0.2; } 70% { scale: 1.15; } 100% { scale: 1; } }
.selecao { position: absolute; border: 2px dashed var(--azul); border-radius: 10px; pointer-events: none; }
.alca {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--azul); border: 3px solid #fff;
  box-shadow: 0 2px 6px #0006; cursor: nwse-resize; touch-action: none; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 900;
}

.painel { background: var(--cartao); border: 2px solid var(--borda); border-radius: 16px; padding: 10px; display: grid; gap: 8px; }
.ferramentas { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.dica-ferr { flex: 1; color: var(--suave); font-size: 14px; font-weight: 700; }
.ferr-botoes { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.fb { width: 40px; height: 40px; border-radius: 10px; border: 2px solid var(--borda); background: var(--fundo2); color: var(--texto); font-size: 18px; font-weight: 900; display: grid; place-items: center; }
.fb:hover { border-color: var(--azul); }
.fb--ruim:hover { border-color: var(--vermelho); }
.busca { display: flex; gap: 6px; }
.busca input { flex: 1; min-width: 0; padding: 10px 12px; font-size: 16px; }
.grade .nada { grid-column: 1 / -1; margin: 10px; color: var(--suave); font-weight: 700; text-align: center; }
.cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; background: var(--fundo2); border-radius: 12px; padding: 6px; }
.cores button { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; border: 2px solid transparent; background: transparent; color: var(--suave); cursor: pointer; }
.cores button span { font-size: 30px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.cores button small { font-size: 11px; font-weight: 800; }
.cores button:hover { background: rgba(255, 255, 255, 0.06); }
.cores button.on { border-color: var(--amarelo); color: var(--amarelo); }
.linha-abas { display: flex; align-items: center; gap: 8px; }
.linha-abas .abas { flex: 1; min-width: 0; }
.tons { display: flex; gap: 2px; background: var(--fundo2); border-radius: 10px; padding: 2px; flex: none; }
.tons button { font-size: 20px; padding: 2px 4px; border: 2px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.tons button.on { border-color: var(--amarelo); }
.abas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.abas button { flex: none; font-size: 22px; padding: 4px 10px; border-radius: 10px; border: 2px solid transparent; background: transparent; }
.abas button.on { background: var(--fundo2); border-color: var(--amarelo); }
.grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 2px; max-height: 150px; overflow-y: auto;
  background: var(--fundo2); border-radius: 12px; padding: 6px;
}
.grade button { font-size: 28px; height: 46px; border: 0; background: transparent; border-radius: 10px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.grade button:hover { background: rgba(255, 255, 255, 0.08); transform: scale(1.15); }
.nativo { font-size: 15px; }
.acoes { display: flex; gap: 10px; }
.acoes .btn--grande { flex: 1; }

/* ── lado: placar + chat ── */
.lado { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.placar { list-style: none; margin: 0; padding: 8px; background: var(--cartao); border: 2px solid var(--borda); border-radius: 16px; display: grid; gap: 4px; }
.placar li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; font-weight: 800; }
.placar li .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placar li .p { color: var(--amarelo); font-variant-numeric: tabular-nums; }
.placar li.eu { background: rgba(255, 255, 255, 0.05); }
.placar li.acertou { background: rgba(47, 211, 138, 0.16); }
.placar li.descreve { background: rgba(61, 139, 255, 0.18); }
.placar li .ic { width: 22px; text-align: center; }
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--cartao); border: 2px solid var(--borda); border-radius: 16px; overflow: hidden; }
.chat-linhas { list-style: none; margin: 0; padding: 10px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.chat-linhas li { font-size: 15px; line-height: 1.3; word-break: break-word; }
.chat-linhas li b { color: var(--suave); }
.chat-linhas li.quase { color: var(--laranja); font-weight: 800; }
.chat-linhas li.quase b { color: var(--laranja); }
.chat-linhas li.acerto { color: var(--verde); font-weight: 900; background: rgba(47, 211, 138, 0.1); padding: 4px 8px; border-radius: 8px; }
.chat-linhas li.acerto b { color: var(--verde); }
.chat-linhas li.conversa { opacity: 0.8; font-style: italic; }
.chat-linhas li.sistema { color: var(--amarelo); font-weight: 800; text-align: center; font-size: 14px; }
.chat-form { display: flex; gap: 6px; padding: 8px; border-top: 2px solid var(--borda); }
.chat-form input { flex: 1; min-width: 0; padding: 10px 12px; }
.chat-form .btn { padding: 10px 14px; }

/* revelação */
.revela {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 16px;
  background: rgba(16, 24, 38, 0.82); backdrop-filter: blur(3px); animation: surgir 0.3s ease-out; color: var(--texto);
}
.revela small { font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--suave); }
.revela b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: clamp(28px, 5vw, 46px); color: var(--amarelo); line-height: 1.05; }
.revela p { margin: 4px 0 0; font-weight: 700; }
@keyframes surgir { from { opacity: 0; transform: scale(0.96); } }

/* ── fim ── */
.titulo-fim { text-align: center; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 36px; margin: 0 0 14px; }
.palco-podio { position: relative; display: flex; justify-content: center; align-items: flex-end; max-width: 620px; margin: 0 auto 10px; padding-top: 46px; }
.podio { display: flex; justify-content: center; align-items: flex-end; gap: 6px; perspective: 600px; }
.lugar { display: flex; flex-direction: column; align-items: center; width: 132px; }
.pessoa { display: grid; justify-items: center; gap: 2px; position: relative; padding-bottom: 8px; opacity: 0; animation: chegar 0.5s cubic-bezier(.2, 1.4, .4, 1) forwards; animation-delay: calc(var(--atraso) + 0.4s); }
.pessoa .medalha { font-size: 40px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)); }
.pessoa .nome { font-weight: 900; font-size: 16px; max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pessoa .pts { font-style: normal; font-family: 'Lilita One', sans-serif; font-size: 22px; color: var(--amarelo); font-variant-numeric: tabular-nums; }
.l1 .pessoa .medalha { font-size: 54px; }
.l1 .pessoa .pts { font-size: 28px; }
.coroa { position: absolute; top: -34px; font-style: normal; font-size: 34px; animation: coroa 1.4s ease-in-out infinite; animation-delay: 2s; }
@keyframes coroa { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-6px) rotate(8deg); } }
@keyframes chegar { from { opacity: 0; transform: translateY(-40px) scale(0.6); } to { opacity: 1; transform: none; } }
.degrau {
  position: relative; width: 100%; border-radius: 6px 6px 0 0; display: grid; place-items: start center; padding-top: 10px;
  transform-origin: bottom; transform: scaleY(0); animation: subir 0.6s cubic-bezier(.3, 1.3, .5, 1) forwards; animation-delay: var(--atraso);
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.18), 0 12px 24px rgba(0, 0, 0, 0.35);
}
/* tampa de cima do degrau (efeito 3D) */
.degrau::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; border-radius: 6px 6px 0 0; transform: perspective(200px) rotateX(45deg); transform-origin: bottom; filter: brightness(1.25); background: inherit; }
.degrau span { font-family: 'Lilita One', sans-serif; font-size: 34px; color: rgba(255, 255, 255, 0.92); text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.l1 .degrau { height: 130px; background: linear-gradient(180deg, #ffd666, #e0a516); }
.l2 .degrau { height: 95px; background: linear-gradient(180deg, #d9e2f0, #8e9bb3); }
.l3 .degrau { height: 70px; background: linear-gradient(180deg, #e0a070, #9b6236); }
@keyframes subir { to { transform: scaleY(1); } }
.mascote-fim { position: absolute; right: -10px; bottom: 0; width: 120px; height: auto; pointer-events: none; animation: pular-mascote 0.9s ease-in-out infinite; }
@keyframes pular-mascote { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-16px) rotate(6deg); } }
/* confete */
.cartao--fim { overflow: hidden; }
.confete { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.confete i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation: cair var(--t) cubic-bezier(.25, .6, .5, 1) forwards; animation-delay: var(--d); }
.confete i.redondo { width: 10px; height: 10px; border-radius: 50%; }
@keyframes cair { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), 105vh) rotate(var(--r)); } }
.jogadores--fim li span { color: var(--amarelo); margin-left: 6px; }

/* ── galeria ── */
.cartao--fim { width: min(1100px, 100%); }
.cartao--fim .titulo-fim { max-width: 520px; margin-left: auto; margin-right: auto; }
.cartao--fim .linha--fim { max-width: 520px; margin-left: auto; margin-right: auto; }
.galeria-titulo { margin: 22px 0 12px; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 24px; text-align: center; }
.galeria-titulo small { display: block; font-family: 'Nunito', sans-serif; font-size: 14px; color: var(--suave); font-weight: 700; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.obra { margin: 0; background: var(--fundo2); border: 2px solid var(--borda); border-radius: 16px; padding: 10px; position: relative; }
.obra.campea { border-color: var(--amarelo); box-shadow: 0 0 0 3px rgba(255, 200, 69, 0.25), 0 10px 30px rgba(255, 200, 69, 0.18); }
.trofeu { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--amarelo); color: #1c1400; font-weight: 900; font-size: 13px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; z-index: 2; }
.mini {
  container-type: inline-size; position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.07) 1.2px, transparent 1.3px) 0 0 / 16px 16px, linear-gradient(160deg, #fffdf6, #f1e9d6);
}
.mini span { position: absolute; line-height: 1; white-space: nowrap; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.obra figcaption { display: grid; gap: 3px; margin-top: 8px; }
.obra figcaption b { font-size: 16px; color: var(--amarelo); }
.obra figcaption span { font-size: 13px; color: var(--suave); font-weight: 700; }
.votar { margin-top: 4px; border: 2px solid var(--borda); background: transparent; color: var(--texto); border-radius: 10px; padding: 6px 10px; font-weight: 900; cursor: pointer; }
.votar:hover:not(:disabled) { border-color: var(--amarelo); }
.votar.on { background: rgba(255, 200, 69, 0.16); border-color: var(--amarelo); color: var(--amarelo); }
.votar:disabled { opacity: 0.6; cursor: default; }

/* ── tela inicial em 2 colunas ── */
.inicio-grade { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 380px); gap: 18px; align-items: start; justify-content: center; width: 100%; }
.inicio-grade .cartao { width: 100%; }
.inicio .mascote-inicio { right: auto; left: -185px; }
.conta-barra { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 12px; font-size: 14px; color: var(--suave); }
.conta-barra b { color: var(--texto); }
.link { background: none; border: 0; color: var(--azul); font-weight: 800; padding: 2px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: #7cb2ff; }
.selo { font-style: normal; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; background: var(--azul); color: #fff; font-size: 10px; font-weight: 900; vertical-align: 1px; }
.titulo-bloco { margin: 0 0 10px; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 22px; letter-spacing: 0.3px; }
.publicas .titulo-bloco + .btn { margin-bottom: 6px; }
.publicas .titulo-bloco:not(:first-child) { margin-top: 18px; }
.dica-bloco { margin: 4px 0 10px; color: var(--suave); font-size: 13px; text-align: center; }
.lista-salas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 230px; overflow-y: auto; }
.lista-salas li { display: flex; align-items: center; gap: 8px; background: var(--fundo2); border: 2px solid var(--borda); border-radius: 12px; padding: 8px 10px; }
.lista-salas li div { flex: 1; min-width: 0; display: grid; }
.lista-salas li div b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-salas li div span { font-size: 12px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-salas li em { font-style: normal; font-weight: 900; color: var(--amarelo); font-size: 14px; }
.vazio-lista { list-style: none; justify-content: center; text-align: center; color: var(--suave); font-size: 13px; padding: 12px !important; border-style: dashed !important; background: transparent !important; }
.ranking-mini { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.ranking-mini li { display: flex; justify-content: space-between; padding: 6px 10px; background: var(--fundo2); border-radius: 10px; font-weight: 800; font-size: 14px; }
.ranking-mini li b { color: var(--amarelo); }
.ranking-mini .vazio-lista { display: block; border: 2px dashed var(--borda); }

/* ── sala de espera larga (cabe numa tela só) ── */
.sala-cartao { width: min(1040px, 100%); display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 26px; padding: 20px 24px; }
.sala-esq { display: flex; flex-direction: column; }
.sala-esq .linha--fim { margin-top: auto; padding-top: 14px; }
.sala-dir { border-left: 2px solid var(--borda); padding-left: 24px; }
.sala-cartao .rotulo { margin: 12px 0 6px; }
.sala-cartao .rotulo:first-child { margin-top: 0; }
.sala-cartao .sala-codigo { font-size: 46px; }
.sala-cartao .logo-mini { width: 170px; margin: 0 auto 2px; }
.sala-cartao .opcoes { gap: 6px; }
.sala-cartao .opcoes button { padding: 6px 10px; font-size: 14px; border-radius: 10px; }
.sala-cartao .espera { margin-top: 10px; font-size: 14px; }
.nota { align-self: center; color: var(--suave); font-size: 13px; font-weight: 700; margin-left: 4px; }
.livre { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 2px solid var(--borda); border-radius: 10px; font-size: 14px; font-weight: 800; color: var(--suave); }
.livre.on { border-color: var(--amarelo); color: var(--amarelo); background: rgba(255, 200, 69, 0.14); }
.livre input { width: 64px; padding: 4px 6px; font-size: 14px; border-radius: 8px; text-align: center; }

/* ── janelas ── */
.janela-fundo { position: fixed; inset: 0; z-index: 40; background: rgba(5, 10, 20, 0.7); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; animation: surgir 0.2s; }
.janela { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.janela-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--borda); background: var(--fundo2); color: var(--texto); font-weight: 900; cursor: pointer; }
.form-conta { display: grid; gap: 4px; }
.form-conta .btn { margin-top: 4px; }
.form-conta .link { justify-self: center; }
.erro-form { margin: 6px 0 0; min-height: 18px; color: var(--vermelho); font-weight: 800; text-align: center; font-size: 14px; }
.btn--perigo { border-color: rgba(255, 93, 108, 0.6) !important; color: var(--vermelho) !important; }
form .btn--perigo { background: var(--vermelho); color: #fff !important; box-shadow: 0 4px 0 #b3303e; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.stats div { background: var(--fundo2); border: 2px solid var(--borda); border-radius: 12px; padding: 10px; display: grid; justify-items: center; }
.stats b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 26px; color: var(--amarelo); }
.stats span { font-size: 12px; color: var(--suave); font-weight: 800; }
.tabela-rolar { max-height: 60vh; overflow-y: auto; }
.ranking { width: 100%; border-collapse: collapse; font-size: 14px; }
.ranking th { position: sticky; top: 0; background: var(--cartao); color: var(--suave); text-align: left; padding: 6px; font-size: 12px; }
.ranking td { padding: 7px 6px; border-top: 1px solid var(--borda); font-weight: 700; }
.ranking tr.eu td { background: rgba(255, 200, 69, 0.12); }
.ranking td:nth-child(n + 3), .ranking th:nth-child(n + 3) { text-align: center; }

@media (max-width: 900px) {
  .inicio-grade { grid-template-columns: 1fr; }
  .sala-cartao { grid-template-columns: 1fr; }
  .sala-dir { border-left: 0; padding-left: 0; border-top: 2px solid var(--borda); padding-top: 12px; }
}

/* ── avisos ── */
.avisos { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 50; width: min(460px, calc(100% - 24px)); pointer-events: none; }
.aviso { background: #24365a; border: 2px solid var(--azul); padding: 10px 14px; border-radius: 12px; font-weight: 800; text-align: center; box-shadow: 0 10px 30px #0007; animation: surgir 0.2s; }
.aviso.ruim { border-color: var(--vermelho); background: #47202a; }
.aviso.bom { border-color: var(--verde); background: #173f31; }
.estouro { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 60; }
.estouro div { font-family: 'Lilita One', sans-serif; font-size: clamp(36px, 8vw, 72px); color: var(--verde); text-shadow: 0 4px 0 #0b5a37, 0 0 40px rgba(47, 211, 138, 0.6); animation: estourar 1.4s ease-out forwards; text-align: center; }
@keyframes estourar { 0% { transform: scale(0.3); opacity: 0; } 18% { transform: scale(1.12); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(1) translateY(-30px); opacity: 0; } }

/* ── celular ── */
@media (max-width: 860px) {
  .mesa { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; align-content: start; }
  .palco .quadro, .palco.descrevendo .quadro, .palco.com-segredo .quadro, .palco.descrevendo.com-segredo .quadro { width: 100%; min-width: 0; }
  .chat { min-height: 220px; flex: none; }
  .placar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; }
  .placar li { padding: 4px 8px; font-size: 13px; }
  .placar li .n { max-width: 90px; }
  .chat-linhas { max-height: 34vh; }
  .quadro { max-height: none; }
  .logo { font-size: 40px; }
  .segredo b { font-size: 22px; }
  .grade { max-height: 150px; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
  .grade button { font-size: 26px; height: 42px; }
  .fb { width: 36px; height: 36px; font-size: 16px; }
}

@media (max-width: 700px) {
  .mascote-fim { width: 64px; right: -6px; }
  .lugar { width: 96px; }
  .l1 .degrau { height: 100px; }
  .l2 .degrau { height: 74px; }
  .l3 .degrau { height: 54px; }
  .pessoa .medalha { font-size: 32px; }
  .l1 .pessoa .medalha { font-size: 42px; }
}

/* ── avatar ── */
.av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 15px; line-height: 1; flex: none; margin-right: 6px; vertical-align: middle; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.av--letra { background: var(--borda); color: var(--texto); font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 13px; }
.av--chat { width: 20px; height: 20px; font-size: 12px; margin-right: 4px; vertical-align: -4px; }
.av--peq { width: 22px; height: 22px; font-size: 13px; margin-right: 2px; }
.av--grande { width: 44px; height: 44px; font-size: 26px; margin: 0; }
.av--enorme { width: 96px; height: 96px; font-size: 56px; margin: 0; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.35); }
.av--podio { width: 56px; height: 56px; font-size: 32px; margin: 0 0 -10px; border: 3px solid #fff; z-index: 1; }
.l1 .av--podio { width: 68px; height: 68px; font-size: 40px; }
.jogadores li { display: inline-flex; align-items: center; }
.placar li .av { margin-right: 0; }
.avatar-btn { flex: none; display: grid; justify-items: center; gap: 1px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--suave); }
.avatar-btn small { font-size: 10px; font-weight: 800; }
.avatar-btn:hover .av { transform: scale(1.08); }
.avatar-btn .av { transition: transform 0.15s; }
.conta-barra .avatar-btn .av--grande { width: 36px; height: 36px; font-size: 20px; }
.conta-barra .avatar-btn small { display: none; }
.av-previa { display: grid; place-items: center; margin: 4px 0 6px; }
.av-cores { display: flex; flex-wrap: wrap; gap: 8px; }
.av-cores button { width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2); }
.av-cores button.on { border-color: #fff; transform: scale(1.12); }
.av-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 2px; max-height: 190px; overflow-y: auto; background: var(--fundo2); border-radius: 12px; padding: 6px; margin-bottom: 8px; }
.av-grade button { font-size: 26px; height: 42px; border: 2px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.av-grade button.on { border-color: var(--amarelo); background: rgba(255, 200, 69, 0.14); }
.av-outro { margin-bottom: 10px; font-size: 15px; }

/* ── telas animadas ── */
.tela-anim { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle, rgba(10, 16, 28, 0.55), rgba(10, 16, 28, 0) 70%); animation: tela-fundo 1.9s ease forwards; }
.tela-conteudo { position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 34px 18px 18px; border-radius: 28px; background: linear-gradient(135deg, #24365a, #1b2840); border: 3px solid var(--azul); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); animation: tela-entra 0.55s cubic-bezier(.2, 1.5, .4, 1) both, tela-sai 0.35s ease-in 1.55s forwards; max-width: calc(100vw - 32px); }
.tela-mascote { width: 120px; height: auto; animation: tela-mascote 0.7s ease-in-out infinite alternate; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.4)); }
.tela-textos { display: grid; gap: 4px; }
.tela-textos b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: clamp(30px, 6vw, 52px); line-height: 1; color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
.tela-textos span { font-weight: 800; font-size: clamp(14px, 2.4vw, 19px); color: var(--suave); }
.tela-brilho { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.18) 45%, transparent 60%); background-size: 250% 100%; animation: brilho 1.2s ease 0.3s; }
.tela-vez .tela-conteudo { border-color: var(--amarelo); background: linear-gradient(135deg, #4a3a10, #2a2410); }
.tela-vez .tela-textos b { color: var(--amarelo); }
.tela-acerto .tela-conteudo, .tela-todos .tela-conteudo { border-color: var(--verde); background: linear-gradient(135deg, #12503a, #173f31); }
.tela-acerto .tela-textos b, .tela-todos .tela-textos b { color: #7ff0bd; }
.tela-tempo .tela-conteudo { border-color: var(--vermelho); background: linear-gradient(135deg, #5a1f2a, #3a1820); }
.tela-tempo .tela-mascote { animation: tela-triste 0.9s ease-in-out infinite alternate; }
@keyframes tela-entra { from { opacity: 0; transform: scale(0.4) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes tela-sai { to { opacity: 0; transform: scale(0.9) translateY(-20px); } }
@keyframes tela-fundo { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tela-mascote { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-12px) rotate(6deg); } }
@keyframes tela-triste { from { transform: rotate(-4deg); } to { transform: rotate(4deg) translateY(4px); } }
@keyframes brilho { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (max-width: 600px) {
  .tela-conteudo { flex-direction: column; text-align: center; padding: 16px 20px; gap: 8px; }
  .tela-mascote { width: 90px; }
}

/* ── botão de som ── */
.botao-som { position: fixed; left: 12px; bottom: 12px; z-index: 30; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--borda); background: var(--cartao); font-size: 20px; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.botao-som:hover { border-color: var(--amarelo); }

/* o que está dentro do quadro (emojis, seleção, revelação) não passa por cima das janelas e avisos */
.quadro { isolation: isolate; }
.avisos { z-index: 2100; }

/* ───────────── celular: versão simplificada ───────────── */
.so-celular { display: none !important; }
@media (max-width: 700px) {
  .so-celular { display: block !important; }
  .tela { padding: 10px; }
  .cartao { padding: 18px 16px; border-radius: 16px; }
  /* início: logo menor, sem mascote, botões grandes primeiro */
  .mascote-inicio { display: none !important; }
  .logo-anim { width: min(270px, 100%); }
  .sub { font-size: 14px; margin: 6px 0 12px; }
  .inicio .btn--grande { margin-bottom: 8px; }
  .publicas [data-rapido], .publicas .dica-bloco, .publicas .ranking-mini { display: none; }
  .publicas .titulo-bloco { font-size: 19px; }
  .lista-salas { max-height: 200px; }
  /* sala: configurações escondidas num botão */
  .sala-dir { display: none; border-top: 0; padding-top: 0; }
  .sala-dir.aberta { display: block; }
  .sala-cartao { gap: 10px; padding: 16px; }
  .sala-cartao .sala-codigo { font-size: 40px; }
  .botao-config { width: 100%; margin-top: 10px; }
  .resumo-config { margin: 10px 0 0; text-align: center; color: var(--suave); font-weight: 800; font-size: 14px; }
  .sala-esq .linha--fim { position: sticky; bottom: 0; background: var(--cartao); padding: 10px 0 2px; }
  /* jogo: topo em 2 linhas, relógio largo */
  .topo { flex-wrap: wrap; gap: 8px; }
  .topo-info { flex: 1; min-width: 0; }
  .topo-info span { display: none; }
  .relogio { order: 5; flex: 1 1 100%; height: 24px; }
  .cat-grande { font-size: 18px; padding: 6px 12px; gap: 8px; }
  .faixa { font-size: 15px; }
  .segredo { padding: 6px 10px; }
  .segredo b { font-size: 20px; }
  /* quem descreve: ferramentas quebram linha, sem rolar para o lado */
  .painel { padding: 8px; min-width: 0; }
  .ferramentas { flex-wrap: wrap; gap: 6px; }
  .ferr-botoes { gap: 4px; }
  .fb { width: 34px; height: 34px; font-size: 15px; }
  .linha-abas { flex-wrap: wrap; }
  .linha-abas .abas { flex: 1 1 100%; }
  .tons { margin: 0 auto; }
  .grade { max-height: 130px; }
  .cores { grid-template-columns: repeat(6, 1fr); }
  .cores button small { display: none; }
  body.eu-descrevo .chat { display: none; }
  /* chat de quem chuta: campo sempre visível embaixo */
  .chat { min-height: 200px; }
  .chat-form { position: sticky; bottom: 0; background: var(--cartao); }
  .botao-som { left: auto; right: 10px; bottom: 10px; width: 36px; height: 36px; font-size: 17px; }
}
.painel { grid-template-columns: minmax(0, 1fr); }
.ferramentas { min-width: 0; }

/* ── idiomas ── */
.idiomas { display: flex; justify-content: center; gap: 6px; margin: 4px 0 2px; }
.idiomas button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 2px solid var(--borda); background: var(--fundo2); color: var(--suave); font-size: 18px; cursor: pointer; }
.idiomas button small { font-size: 12px; font-weight: 800; }
.idiomas button.on { border-color: var(--amarelo); color: var(--amarelo); background: rgba(255, 200, 69, 0.12); }
@media (max-width: 700px) { .idiomas button small { display: none; } }

/* ── páginas Privacidade e Sobre ── */
.pagina { max-width: 780px; margin: 0 auto; padding: 18px 16px 48px; }
.pag-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pag-voltar { color: #9fb4d8; font-weight: 800; text-decoration: none; }
.pag-voltar:hover { color: var(--amarelo); }
.pag-logo { display: block; width: 190px; height: auto; margin: 14px 0 12px; }
.pag-cartao { width: 100%; padding: 22px 24px 26px; }
.pag-cartao h1 { margin: 0; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: clamp(26px, 5vw, 36px); line-height: 1.1; }
.pag-data { margin: 4px 0 6px; color: var(--suave); font-weight: 700; }
.pag-cartao h2 { margin: 22px 0 6px; color: var(--amarelo); font-size: 19px; font-weight: 900; }
.pag-txt { line-height: 1.62; font-size: 16px; }
.pag-txt ol, .pag-txt ul { padding-left: 22px; margin: 6px 0; }
.pag-txt li { margin: 4px 0; }
.pag-txt a, .rodape a { color: #8cc0ff; }
/* rodapé da tela inicial */
.rodape { text-align: center; padding: 6px 16px 22px; color: #7f8fac; font-size: 13px; font-weight: 700; }
.rodape a { text-decoration: none; margin: 0 4px; }
.rodape a:hover { color: var(--amarelo); }
.rodape small { display: block; opacity: 0.7; margin-top: 3px; }
/* espaço do anúncio (só aparece quando o AdSense estiver configurado) */
.anuncio { margin-top: 16px; width: 100%; }
.anuncio-rotulo { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #6f7f9c; font-weight: 800; margin: 0 2px 4px; }
.anuncio ins { display: block; min-height: 250px; border-radius: 14px; overflow: hidden; }
/* palavras de recuperação */
.palavras { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; }
.palavras span { background: var(--fundo2); border: 2px solid var(--amarelo); color: var(--amarelo); font-family: 'Lilita One', sans-serif; font-size: 24px; padding: 6px 14px; border-radius: 12px; }
.tres-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.aviso-conta { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 159, 67, 0.12); border: 2px solid rgba(255, 159, 67, 0.5); color: #ffc58f; font-weight: 700; font-size: 14px; }