/* Área pública Xadrez (/xadrez, /mundial, /aprenda, /rankings, /torneios_abertos, /links) e a vitrine da landing.
   Só tokens de public/cores.css, para seguir o tema claro/escuro. Mobile first, sem rolagem lateral. */

.xd-pagina { max-width: 1100px; margin: 0 auto; padding: 16px; }
.xd-pagina * { box-sizing: border-box; }
.xd-titulo { color: var(--cor-titulo); font-size: 26px; line-height: 1.2; font-weight: 700; margin: 4px 0 6px; }
.xd-subtitulo { color: var(--cor-secundario); font-size: 15px; margin: 0 0 16px; }
.xd-secao { margin-top: 28px; }
.xd-secao > h2 { color: var(--cor-titulo); font-size: 20px; font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.xd-nota { color: var(--cor-secundario); font-size: 12px; margin-top: 8px; }
@media (min-width: 640px) { .xd-titulo { font-size: 32px; } }

/* Navegação entre as páginas da área */
.xd-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.xd-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 14px;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); color: var(--cor-texto-2); text-decoration: none; }
.xd-nav a:hover { border-color: var(--cor-borda-forte); }
.xd-nav a[aria-current="page"] { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }

/* Cartões */
.xd-grade { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .xd-grade-2 { grid-template-columns: 1fr 1fr; } .xd-grade-3, .xd-grade-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .xd-grade-3 { grid-template-columns: repeat(3, 1fr); } .xd-grade-4 { grid-template-columns: repeat(4, 1fr); } }
.xd-cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 8px; padding: 16px;
  box-shadow: 0 1px 2px var(--cor-sombra); min-width: 0; }
a.xd-cartao { display: block; text-decoration: none; color: var(--cor-texto); transition: border-color .2s, transform .2s; }
a.xd-cartao:hover { border-color: var(--cor-primaria); }
.xd-cartao h3 { color: var(--cor-titulo); font-size: 17px; font-weight: 700; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.xd-cartao p { margin: 4px 0 0; font-size: 14px; color: var(--cor-texto-2); }
.xd-cartao .xd-mini { font-size: 12px; color: var(--cor-secundario); }
.xd-icone { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px;
  background: var(--cor-primaria-clara); color: var(--cor-primaria-texto); flex: 0 0 auto; }
.xd-destaque { background: var(--cor-destaque-clara); border-color: #fde68a; }
[data-tema="escuro"] .xd-destaque { border-color: rgba(250, 204, 21, .3); }

.xd-selo { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--cor-superficie-3); color: var(--cor-texto-2); }
.xd-selo-azul { background: var(--cor-primaria-clara); color: var(--cor-primaria-texto); }
.xd-selo-amarelo { background: var(--cor-destaque-clara); color: var(--cor-destaque-texto); }
.xd-selo-verde { background: #dcfce7; color: #166534; }
.xd-selo-vermelho { background: #fee2e2; color: #991b1b; }
[data-tema="escuro"] .xd-selo-verde { background: rgba(34, 197, 94, .18); color: #86efac; }
[data-tema="escuro"] .xd-selo-vermelho { background: rgba(239, 68, 68, .18); color: #fca5a5; }

.xd-botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 6px;
  background: var(--cor-primaria); color: #fff; text-decoration: none; font-size: 14px; border: 0; cursor: pointer; }
.xd-botao:hover { background: #1d4ed8; color: #fff; }
.xd-botao:disabled { opacity: .4; cursor: default; }
.xd-botao-claro { background: var(--cor-primaria-clara); color: var(--cor-primaria-texto); }
.xd-botao-claro:hover { background: var(--cor-foco); color: var(--cor-primaria-texto); }

/* Mundial: placar */
.xd-placar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; text-align: center; }
.xd-jogador-nome { font-size: 18px; font-weight: 700; color: var(--cor-titulo); }
.xd-bandeira { font-size: 28px; line-height: 1; }
.xd-pontos { font-size: 40px; font-weight: 800; color: var(--cor-texto); font-variant-numeric: tabular-nums; }
.xd-x { font-size: 18px; color: var(--cor-secundario); }
@media (min-width: 640px) { .xd-pontos { font-size: 56px; } .xd-jogador-nome { font-size: 22px; } }

.xd-calendario { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.xd-dia { border: 1px solid var(--cor-borda); border-radius: 8px; padding: 8px; text-align: center; background: var(--cor-superficie); font-size: 13px; }
.xd-dia strong { display: block; color: var(--cor-titulo); }
.xd-dia-hoje { border-color: var(--cor-primaria); box-shadow: 0 0 0 2px var(--cor-foco); }
.xd-dia-feito { background: var(--cor-superficie-2); }

.xd-embed { width: 100%; aspect-ratio: 4 / 5; border: 0; border-radius: 8px; background: var(--cor-superficie-2); }
@media (min-width: 768px) { .xd-embed { aspect-ratio: 16 / 10; } }

/* Listas simples (notícias, links) */
.xd-lista { list-style: none; margin: 0; padding: 0; }
.xd-lista li { padding: 10px 0; border-bottom: 1px solid var(--cor-borda); }
.xd-lista li:last-child { border-bottom: 0; }
.xd-lista a { color: var(--cor-texto); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.xd-lista a:hover { color: var(--cor-primaria-texto); }
.xd-lista .xd-mini { display: block; font-size: 12px; color: var(--cor-secundario); margin-top: 2px; }

/* Rankings */
.xd-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.xd-tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-secundario);
  background: var(--cor-superficie-2); padding: 8px; }
.xd-tabela td { padding: 8px; border-top: 1px solid var(--cor-borda); vertical-align: middle; }
.xd-tabela .xd-num { text-align: center; width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xd-tabela .xd-nome { overflow-wrap: anywhere; }
.xd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.xd-chip { padding: 5px 12px; border-radius: 999px; font-size: 13px; border: 1px solid var(--cor-borda); background: var(--cor-superficie);
  color: var(--cor-texto-2); cursor: pointer; width: auto; margin: 0; }
.xd-chip[aria-pressed="true"] { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }

/* Tabuleiro das lições */
.xd-licao { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 820px) { .xd-licao { grid-template-columns: minmax(280px, 400px) 1fr; } }
.xd-tabuleiro { width: 100%; max-width: 400px; margin: 0 auto; aspect-ratio: 1; border-radius: 6px; overflow: hidden;
  box-shadow: 0 2px 6px var(--cor-sombra); }
.tab-svg { display: block; width: 100%; height: 100%; }
.tab-clara { fill: #f0d9b5; }
.tab-escura { fill: #b58863; }
.tab-verde { fill: rgba(34, 197, 94, .45); }
.tab-vermelho { fill: rgba(239, 68, 68, .5); }
.tab-azul { fill: rgba(59, 130, 246, .45); }
.tab-certo { fill: rgba(34, 197, 94, .6); }
.tab-errado { fill: rgba(239, 68, 68, .6); }
.tab-ponto { fill: rgba(21, 128, 61, .55); }
.tab-anel { fill: none; stroke: rgba(21, 128, 61, .6); stroke-width: .08; }
.tab-coord { font-size: .2px; font-weight: 700; font-family: system-ui, sans-serif; pointer-events: none; }
.tab-coord-clara { fill: #f0d9b5; }
.tab-coord-escura { fill: #b58863; }
.tab-peca { font-size: .82px; font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", "Apple Symbols", "Arial Unicode MS", sans-serif;
  pointer-events: none; paint-order: stroke; stroke-linejoin: round; }
.tab-branca { fill: #fff; stroke: #1f2937; stroke-width: .045px; }
.tab-preta { fill: #1f2937; stroke: #f9fafb; stroke-width: .02px; }
.tab-seta { stroke: rgba(234, 88, 12, .85); stroke-width: .16; stroke-linecap: round; pointer-events: none; }
.tab-seta-ponta { fill: rgba(234, 88, 12, .85); }
.tab-alvo { fill: transparent; cursor: pointer; }
.tab-alvo:hover, .tab-alvo:focus { fill: rgba(59, 130, 246, .25); outline: none; }

.xd-quadro-texto { font-size: 15px; line-height: 1.55; color: var(--cor-texto); }
.xd-quadro-texto p { margin: 0 0 10px; }
.xd-passos { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.xd-contador { font-size: 13px; color: var(--cor-secundario); }
.xd-pergunta { margin-top: 12px; padding: 12px; border-radius: 8px; background: var(--cor-primaria-clara); font-size: 14px; }
.xd-pergunta strong { color: var(--cor-primaria-texto); }
.xd-resposta-certa { color: #15803d; font-weight: 600; }
.xd-resposta-errada { color: #b91c1c; font-weight: 600; }
[data-tema="escuro"] .xd-resposta-certa { color: #86efac; }
[data-tema="escuro"] .xd-resposta-errada { color: #fca5a5; }
.xd-indice-licoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.xd-indice-licoes a { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--cor-superficie-3); color: var(--cor-texto-2); text-decoration: none; }
.xd-indice-licoes a:hover { background: var(--cor-primaria-clara); color: var(--cor-primaria-texto); }

/* Vitrine da landing */
.xd-vitrine { padding: 24px 8px; }
.xd-vitrine-dentro { max-width: 1200px; margin: 0 auto; }
.xd-vitrine h2 { text-align: center; color: var(--cor-titulo); font-size: 24px; margin: 0 0 4px; }
.xd-vitrine > .xd-vitrine-dentro > p { text-align: center; color: var(--cor-secundario); margin: 0 0 16px; }