/* ==========================================================
   Arena Xadrez — estilos base (M1.3)
   Tema escuro (padrão) e claro via [data-tema]
   ========================================================== */
:root, html[data-tema="escuro"] {
    --fundo:#12141a; --card:#1c1f27; --borda:#2c303c;
    --texto:#e8e9ec; --texto-suave:#9aa0ad;
    --acento:#7cb342; --acento-hover:#8fc753; --acento-texto:#10130a;
    --erro:#e57373; --ok:#81c784;
    --sombra:0 4px 16px rgba(0,0,0,.35);
}
html[data-tema="claro"] {
    --fundo:#f4f5f7; --card:#ffffff; --borda:#d9dce3;
    --texto:#1c1f27; --texto-suave:#5b6270;
    --acento:#558b2f; --acento-hover:#33691e; --acento-texto:#ffffff;
    --erro:#c62828; --ok:#2e7d32;
    --sombra:0 4px 16px rgba(0,0,0,.08);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; }
body {
    font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    background:var(--fundo); color:var(--texto);
    min-height:100vh; display:flex; flex-direction:column;
    transition:background .25s, color .25s;
}
a { color:var(--acento); }

/* ---- Topo / navegação ---- */
.topo { border-bottom:1px solid var(--borda); background:var(--card); }
.topo-interno { max-width:1080px; margin:0 auto; padding:12px 20px;
    display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo { font-size:21px; font-weight:700; color:var(--texto); text-decoration:none; white-space:nowrap; }
.logo span { color:var(--acento); }
.nav { display:flex; align-items:center; gap:18px; }
.nav-link { color:var(--texto-suave); text-decoration:none; font-size:14px; font-weight:600; }
.nav-link:hover { color:var(--texto); }
.nav-usuario { color:var(--acento); font-size:14px; font-weight:700; }
.nav-form { display:inline; }
.nav-botao { background:none; border:0; cursor:pointer; padding:0; font:inherit; }
.menu-botao { display:none; background:none; border:1px solid var(--borda); color:var(--texto);
    border-radius:8px; font-size:18px; padding:4px 10px; cursor:pointer; }

.tema-botao { background:none; border:1px solid var(--borda); border-radius:20px;
    padding:4px 10px; cursor:pointer; font-size:14px; line-height:1; }
html[data-tema="escuro"] .tema-icone-escuro { display:none; }
html[data-tema="claro"]  .tema-icone-claro  { display:none; }

/* ---- Estrutura ---- */
.conteudo { flex:1; width:100%; max-width:1080px; margin:0 auto; padding:28px 20px; }
.rodape { padding:16px 20px; border-top:1px solid var(--borda);
    color:var(--texto-suave); font-size:13px; text-align:center; background:var(--card); }

/* ---- Componentes ---- */
.card { background:var(--card); border:1px solid var(--borda);
    border-radius:12px; padding:24px; box-shadow:var(--sombra); }
.card-form { background:var(--card); border:1px solid var(--borda); box-shadow:var(--sombra);
    border-radius:12px; padding:32px; width:100%; max-width:440px; margin:24px auto; }
.card-form h1 { font-size:20px; margin-bottom:18px; }

label { display:block; font-size:14px; color:var(--texto-suave); margin:14px 0 6px; }
input[type=text], input[type=email], input[type=password], textarea, select {
    width:100%; padding:11px 12px; border-radius:8px;
    border:1px solid var(--borda); background:var(--fundo);
    color:var(--texto); font-size:15px; }
input:focus, textarea:focus, select:focus { outline:2px solid var(--acento); border-color:transparent; }

.botao { display:inline-block; width:100%; margin-top:22px; padding:12px; border:0; border-radius:8px;
    background:var(--acento); color:var(--acento-texto); font-size:15px; font-weight:700;
    cursor:pointer; text-align:center; text-decoration:none; }
.botao:hover { background:var(--acento-hover); }
.botao-mini { width:auto; margin:0; padding:8px 16px; font-size:14px; }
.botao-secundario { background:transparent; color:var(--acento); border:1px solid var(--acento); }
.botao-secundario:hover { background:var(--acento); color:var(--acento-texto); }
.botao-link { background:none; border:0; color:var(--acento); cursor:pointer;
    font-size:14px; padding:0; margin-top:8px; }

.erro { color:var(--erro); font-size:13px; margin-top:6px; }
.links { margin-top:18px; text-align:center; font-size:14px; }
.texto-suave { color:var(--texto-suave); font-size:14px; line-height:1.6; margin-bottom:14px; }
.honeypot { position:absolute; left:-9999px; opacity:0; }

.alerta { border-radius:8px; padding:12px 14px; margin-bottom:20px; font-size:14px; }
.alerta-ok { background:rgba(129,199,132,.12); color:var(--ok); border:1px solid rgba(129,199,132,.4); }
.alerta-erro { background:rgba(229,115,115,.12); color:var(--erro); border:1px solid rgba(229,115,115,.4); }

/* ---- Toasts (flash) ---- */
.toast { position:relative; border-radius:10px; padding:13px 16px; margin-bottom:18px;
    font-size:14px; box-shadow:var(--sombra); animation:toast-entra .3s ease; }
.toast-ok { background:rgba(129,199,132,.15); color:var(--ok); border:1px solid rgba(129,199,132,.45); }
.toast-erro { background:rgba(229,115,115,.15); color:var(--erro); border:1px solid rgba(229,115,115,.45); }
.toast.saindo { opacity:0; transform:translateY(-6px); transition:all .35s; }
@keyframes toast-entra { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

/* ---- Hero da home ---- */
.hero { text-align:center; padding:72px 0 56px; }
.hero h1 { font-size:34px; margin-bottom:14px; }
.hero p { color:var(--texto-suave); max-width:520px; margin:0 auto 26px; line-height:1.6; }
.hero-acoes { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-acoes .botao { width:auto; margin:0; padding:12px 26px; }

/* ---- Responsivo ---- */
@media (max-width: 720px) {
    .menu-botao { display:block; }
    .nav { display:none; position:absolute; top:58px; left:0; right:0;
        background:var(--card); border-bottom:1px solid var(--borda);
        flex-direction:column; padding:16px 20px; gap:14px; z-index:50; }
    .nav.aberto { display:flex; }
    .topo { position:relative; }
    .hero h1 { font-size:26px; }
    .card-form { padding:24px 18px; }
}

/* ---- Perfil (M2.1) ---- */
.perfil-capa { height:180px; border-radius:12px; border:1px solid var(--borda);
    background:linear-gradient(120deg, var(--card), var(--borda));
    background-size:cover; background-position:center; }
.perfil-cabecalho { display:flex; align-items:flex-end; gap:18px;
    margin:-48px 24px 20px; flex-wrap:wrap; }
.perfil-avatar { position:relative; width:96px; height:96px; border-radius:50%;
    border:4px solid var(--fundo); background:var(--acento); overflow:visible;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.perfil-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.perfil-avatar-inicial { font-size:38px; font-weight:800; color:var(--acento-texto); }
.ponto-online { position:absolute; right:4px; bottom:4px; width:16px; height:16px;
    border-radius:50%; background:#4caf50; border:3px solid var(--fundo); }
.perfil-identidade { flex:1; min-width:180px; }
.perfil-identidade h1 { font-size:24px; }
.perfil-username { color:var(--texto-suave); font-size:14px; margin-top:2px; }
.selo { font-size:11px; font-weight:700; border-radius:10px; padding:2px 8px; margin-left:6px; }
.selo-online { background:rgba(76,175,80,.15); color:#4caf50; border:1px solid rgba(76,175,80,.4); }
.perfil-detalhes { margin-top:8px; }
.perfil-bio { line-height:1.6; margin-bottom:14px; white-space:pre-line; }
.perfil-meta { list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px;
    color:var(--texto-suave); font-size:14px; }

/* ---- Configurações ---- */
.config-grade { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.config-check { display:flex; align-items:center; gap:10px; margin-top:18px;
    font-size:14px; color:var(--texto-suave); cursor:pointer; }
.config-check input { width:auto; }
.config-avatar-previa { width:96px; height:96px; border-radius:50%; object-fit:cover;
    border:1px solid var(--borda); display:block; margin-bottom:6px; }
.config-capa-previa { width:100%; border-radius:8px; border:1px solid var(--borda);
    display:block; margin-bottom:6px; }
@media (max-width:860px) { .config-grade { grid-template-columns:1fr; } }
a.nav-usuario { text-decoration:none; }
a.nav-usuario:hover { text-decoration:underline; }

/* ---- Social e notificações (M2.2/M2.3) ---- */
.nav-sino { position:relative; text-decoration:none; font-size:17px; }
.sino-badge { position:absolute; top:-7px; right:-10px; background:var(--erro); color:#fff;
    font-size:10px; font-weight:800; border-radius:10px; padding:1px 5px; min-width:16px; text-align:center; }
.secao-titulo { font-size:15px; color:var(--texto-suave); text-transform:uppercase;
    letter-spacing:.4px; margin-bottom:14px; }
.linha-jogador { display:flex; align-items:center; gap:12px; padding:10px 0;
    border-top:1px solid var(--borda); flex-wrap:wrap; }
.linha-jogador:first-of-type { border-top:0; }
.mini-avatar { position:relative; width:42px; height:42px; border-radius:50%;
    background:var(--acento); display:flex; align-items:center; justify-content:center;
    color:var(--acento-texto); font-weight:800; text-decoration:none; flex-shrink:0; }
.mini-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.mini-online { position:absolute; right:-1px; bottom:-1px; width:12px; height:12px;
    border-radius:50%; background:#4caf50; border:2px solid var(--card); }
.linha-info { flex:1; display:flex; flex-direction:column; min-width:120px; }
.linha-info a { text-decoration:none; font-weight:700; }
.perfil-acoes { display:flex; gap:8px; flex-wrap:wrap; }
.botao-perigo { background:transparent; color:var(--erro); border:1px solid var(--erro); }
.botao-perigo:hover { background:var(--erro); color:#fff; }
.linha-notif { display:flex; justify-content:space-between; gap:14px; padding:12px 4px;
    border-top:1px solid var(--borda); text-decoration:none; color:var(--texto); }
.linha-notif:first-of-type { border-top:0; }
.linha-notif.nao-lida { background:rgba(124,179,66,.07); border-left:3px solid var(--acento); padding-left:10px; }

/* ---- Partida (M3.1) ---- */
.partida-grade { display:grid; grid-template-columns:minmax(280px, 560px) 1fr; gap:20px; align-items:start; }
.tabuleiro { width:100%; max-width:560px; }
.partida-status { margin-top:12px; font-weight:700; font-size:15px; }
.partida-lateral { min-height:200px; display:flex; flex-direction:column; }
.lances-lista { flex:1; max-height:420px; overflow-y:auto; line-height:2; font-size:14px;
    font-family:ui-monospace,Consolas,monospace; }
.lance-num { color:var(--texto-suave); margin:0 6px 0 10px; }
.lance { background:var(--fundo); border:1px solid var(--borda); border-radius:6px; padding:2px 7px; margin-right:2px; }
.partida-acoes { margin-top:14px; }
@media (max-width:860px) { .partida-grade { grid-template-columns:1fr; } }

/* ---- Replay / PGN / histórico (M3.3-M3.4) ---- */
.replay-controles { margin-top:12px; display:flex; align-items:center; gap:6px; }
.replay-controles .botao { margin:0; }
.fen-caixa { margin-top:12px; font-family:ui-monospace,Consolas,monospace; font-size:12px; }
.partida-acoes { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.partida-acoes .botao { margin:0; }
.lance.ativo { outline:2px solid var(--acento); }
.linha-partida { display:flex; align-items:center; gap:16px; padding:12px 4px;
    border-top:1px solid var(--borda); text-decoration:none; color:var(--texto); flex-wrap:wrap; }
.linha-partida:first-of-type { border-top:0; }
.linha-partida-id { font-weight:800; color:var(--acento); }
.linha-partida-resultado { flex:1; display:flex; gap:10px; align-items:center; }

/* ---- Online (M4) ---- */
.jogador-barra { display:flex; justify-content:space-between; align-items:center;
    padding:6px 4px; }
.jogador-nome { font-weight:700; font-size:14px; }
.relogio { font-family:ui-monospace,Consolas,monospace; font-size:20px; font-weight:800;
    background:var(--card); border:1px solid var(--borda); border-radius:8px; padding:4px 12px; }
.relogio.ativo { border-color:var(--acento); color:var(--acento); }
.relogio.critico { border-color:var(--erro); color:var(--erro); }
.oferta-banner { margin-top:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    background:rgba(124,179,66,.1); border:1px solid var(--acento); border-radius:10px; padding:10px 14px; font-size:14px; }
.oferta-banner .botao { margin:0; }

/* ---- Presença / chat / ratings (M4.3-M4.4-M5.1) ---- */
.ponto-presenca { display:inline-block; width:9px; height:9px; border-radius:50%;
    background:var(--borda); margin-right:7px; vertical-align:1px; }
.ponto-presenca.on { background:#4caf50; }
.espectadores { float:right; font-size:12px; color:var(--texto-suave); }
.chat-bloco { border-top:1px solid var(--borda); margin-top:12px; padding-top:10px; }
.chat-lista { max-height:160px; overflow-y:auto; font-size:13px; line-height:1.7; }
.chat-lista .chat-user { color:var(--acento); font-weight:700; margin-right:5px; }
.chat-envio { display:flex; gap:8px; margin-top:8px; }
.chat-envio input { flex:1; padding:8px 10px; font-size:13px; }
.chat-envio .botao { margin:0; }
.reconexao { margin-top:10px; font-size:13px; color:var(--erro); }
.ratings-grade { display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; }
.rating-item { background:var(--fundo); border:1px solid var(--borda); border-radius:10px;
    padding:10px 16px; display:flex; flex-direction:column; gap:2px; min-width:110px; }
.rating-cat { font-size:12px; color:var(--texto-suave); }
.rating-valor { font-size:22px; }

/* ---- Fila / ranking (M5.2-M5.3) ---- */
.destaque-fila { margin-bottom:20px; border-color:var(--acento); }
.fila-form { display:flex; gap:10px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.fila-form select { max-width:230px; }
.fila-form .botao { margin:0; }
.fila-espera { display:flex; gap:12px; align-items:center; margin-top:8px; flex-wrap:wrap; font-size:14px; }
.fila-espera .botao { margin:0; }
.fila-spinner { width:16px; height:16px; border:2px solid var(--borda); border-top-color:var(--acento);
    border-radius:50%; animation:gira .8s linear infinite; }
@keyframes gira { to { transform:rotate(360deg); } }
.ranking-abas { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.ranking-aba { padding:8px 16px; border-radius:20px; border:1px solid var(--borda);
    text-decoration:none; color:var(--texto-suave); font-size:14px; font-weight:600; }
.ranking-aba.ativa { background:var(--acento); color:var(--acento-texto); border-color:var(--acento); }
.ranking-pos { width:34px; text-align:center; font-weight:800; color:var(--texto-suave); }
.ranking-pos.top3 { color:var(--acento); font-size:18px; }
.ranking-rating { font-size:19px; }
.ranking-rating small { color:var(--texto-suave); }

/* ---- IA e análise (Fase 6) ---- */
.tabuleiro-com-eval { display:flex; gap:10px; align-items:stretch; }
.tabuleiro-com-eval .tabuleiro { flex:1; }
.eval-barra { width:16px; border-radius:8px; overflow:hidden; background:#2b2b2b;
    border:1px solid var(--borda); display:flex; flex-direction:column; justify-content:flex-end; }
.eval-branca { background:#f0f0f0; transition:height .4s ease; }
.ia-status { margin-top:10px; font-size:14px; color:var(--texto-suave); }
.analise-painel { margin-top:12px; }
.analise-progresso { height:8px; border-radius:4px; background:var(--fundo);
    border:1px solid var(--borda); overflow:hidden; }
.analise-progresso-barra { height:100%; width:0; background:var(--acento); transition:width .2s; }
.analise-resumo { margin-top:10px; font-size:13px; line-height:1.8; }
.lance.impreciso { border-color:#e6c229; color:#e6c229; }
.lance.erro { border-color:#f08c00; color:#f08c00; }
.lance.capivarada { border-color:var(--erro); color:var(--erro); }
.badge-analise { display:inline-block; border-radius:6px; padding:0 6px; font-size:11px;
    font-weight:800; margin-left:4px; }

/* Correção: [hidden] deve vencer qualquer display de classe */
[hidden] { display: none !important; }

/* ---- Puzzles (M7) ---- */
.puzzle-acoes { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.puzzle-acoes .botao { margin:0; }

/* ---- Temas de problemas (M7.3) ---- */
.temas-pagina { display:grid; grid-template-columns:220px 1fr; gap:20px; align-items:start; }
@media (max-width:800px) { .temas-pagina { grid-template-columns:1fr; } }
.temas-menu { padding:10px; position:sticky; top:80px; }
.temas-menu-item { display:block; padding:10px 12px; border-radius:8px; text-decoration:none;
    color:var(--texto); font-size:14px; }
.temas-menu-item:hover { background:var(--fundo); }
.temas-menu-item.ativa { background:var(--acento); color:var(--acento-texto); font-weight:700; }
.temas-grupo-titulo { margin:26px 0 12px; font-size:19px; border-bottom:1px solid var(--borda); padding-bottom:8px; }
.temas-grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; }
.tema-card { display:flex; gap:12px; align-items:flex-start; background:var(--card);
    border:1px solid var(--borda); border-radius:10px; padding:14px; text-decoration:none;
    color:var(--texto); transition:border-color .15s, transform .15s; }
.tema-card:hover { border-color:var(--acento); transform:translateY(-1px); }
.tema-card .tema-emoji { font-size:26px; line-height:1; }
.tema-card .tema-info { display:flex; flex-direction:column; gap:4px; }
.tema-card .tema-info > span { font-size:13px; color:var(--texto-suave); line-height:1.5; }
.tema-vazio { opacity:.45; }
.tema-destaque { border-color:var(--acento); background:linear-gradient(135deg, var(--card), var(--fundo)); }
.temas-topo { display:flex; gap:14px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.tema-badge { background:var(--card); border:1px solid var(--acento); border-radius:20px;
    padding:5px 14px; font-size:13px; }

/* ---- Aprender (M7.4) ---- */
.aprender-pagina { display:grid; grid-template-columns:230px 1fr; gap:20px; align-items:start; }
@media (max-width:800px) { .aprender-pagina { grid-template-columns:1fr; } }
.aprender-lateral { position:sticky; top:80px; text-align:center; }
.aprender-mascote { font-size:64px; }
.aprender-progresso { height:12px; border-radius:6px; background:var(--fundo);
    border:1px solid var(--borda); overflow:hidden; margin:12px 0 6px; }
.aprender-progresso > div { height:100%; background:var(--acento); transition:width .4s; }
.aprender-secao { letter-spacing:4px; font-size:16px; margin:26px 0 12px;
    color:var(--texto-suave); text-align:center; }
.aprender-grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
.licao-card { display:flex; gap:12px; align-items:center; background:linear-gradient(135deg, #3d3352, #2a2440);
    border:1px solid var(--borda); border-radius:10px; padding:16px; text-decoration:none;
    color:#fff; transition:transform .15s, border-color .15s; }
[data-tema="claro"] .licao-card { background:linear-gradient(135deg, #6a5a96, #524678); }
.licao-card:hover { transform:translateY(-2px); border-color:var(--acento); }
.licao-card.feita { outline:2px solid #4caf50; }
.licao-card .licao-emoji { font-size:30px; }
.licao-card .licao-info { display:flex; flex-direction:column; gap:3px; }
.licao-card .licao-info > span { font-size:13px; opacity:.8; }
.licao-estrelas { color:#e6c229; font-size:13px; margin-left:6px; }
.licao-verde { background:linear-gradient(135deg, #2e5230, #1f3d24); }
[data-tema="claro"] .licao-verde { background:linear-gradient(135deg, #4c8a50, #38683e); }
.licao-pontos { display:flex; gap:6px; margin-top:10px; }
.ponto-estagio { width:12px; height:12px; border-radius:50%; background:var(--fundo);
    border:1px solid var(--borda); }
.ponto-estagio.atual { border-color:var(--acento); background:var(--acento); opacity:.5; }
.ponto-estagio.feito { background:#4caf50; border-color:#4caf50; }
.estrela-alvo { position:absolute; inset:0; display:flex; align-items:center;
    justify-content:center; font-size:32px; pointer-events:none; z-index:5;
    animation:pulsa 1.2s ease-in-out infinite; }
@keyframes pulsa { 50% { transform:scale(1.15); } }
#tabuleiro .square-55d63 { position:relative; }

/* ---- Coordenadas (M7.5) ---- */
.coord-alvo { text-align:center; font-size:56px; font-weight:800; letter-spacing:2px;
    margin-bottom:10px; color:var(--acento); min-height:70px; }
.coord-certa { box-shadow: inset 0 0 0 4px #4caf50 !important; }
.coord-errada { box-shadow: inset 0 0 0 4px #e05555 !important; }

/* ---- Navbar com grupos suspensos (estilo Lichess) ---- */
.nav-grupo { position:relative; }
.nav-grupo-rotulo { cursor:pointer; user-select:none; letter-spacing:.5px; }
.nav-dropdown { display:none; position:absolute; top:100%; left:0; min-width:220px;
    background:var(--card); border:1px solid var(--borda); border-radius:0 0 10px 10px;
    box-shadow:0 10px 24px rgba(0,0,0,.35); padding:6px; z-index:60; }
.nav-dropdown a, .nav-dropdown .nav-botao, .nav-dropdown .nav-desativado {
    display:block; width:100%; text-align:left; padding:10px 12px; border-radius:8px;
    color:var(--texto); text-decoration:none; font-size:14px; background:none; border:0; cursor:pointer; }
.nav-dropdown a:hover, .nav-dropdown .nav-botao:hover { background:var(--fundo); }
.nav-desativado { opacity:.5; cursor:default; }
.nav-dropdown-direita { left:auto; right:0; }
@media (hover:hover) and (min-width:801px) {
    .nav-grupo:hover .nav-dropdown { display:block; }
}
.nav-grupo.aberto .nav-dropdown { display:block; }
@media (max-width:800px) {
    .nav-grupo { width:100%; }
    .nav-dropdown { position:static; box-shadow:none; border:0; border-left:2px solid var(--borda);
        border-radius:0; margin-left:10px; min-width:0; }
}

/* Correções de camada e fundo dos dropdowns */
.topo { position:relative; z-index:100; }
.nav-dropdown { z-index:120; background:var(--card); }

/* ---- Praticar (M7.6) ---- */
.pratica-contagem { margin-left:auto; background:rgba(255,255,255,.12); border-radius:14px;
    padding:4px 12px; font-size:13px; font-weight:800; white-space:nowrap; }

/* ---- Coordenadas v2 ---- */
.coord-opcoes { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.coord-abas { display:flex; gap:6px; }
.coord-aba { flex:1; padding:8px 6px; border-radius:8px; border:1px solid var(--borda);
    background:var(--fundo); color:var(--texto); cursor:pointer; font-size:13px; font-weight:700; }
.coord-aba.ativa { background:var(--acento); border-color:var(--acento); color:var(--acento-texto); }
.coord-toggle { font-size:13px; display:flex; gap:8px; align-items:center; }
.coord-destaque { box-shadow: inset 0 0 0 5px var(--acento) !important; }
.coord-teclado { margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.coord-teclas { display:flex; gap:6px; }
.coord-tecla { flex:1; padding:10px 0; border-radius:8px; border:1px solid var(--borda);
    background:var(--card); color:var(--texto); font-size:16px; font-weight:800; cursor:pointer; }
.coord-tecla:active { background:var(--acento); color:var(--acento-texto); }

/* ---- Jogabilidade móvel e cliques no tabuleiro (m80) ----
   1) touch-action:none — arrastar peça no celular não rola mais a página
      (o chessboard.js recebe o touchmove em vez do navegador).
   2) pointer-events:none nas peças — cliques/toques sempre atingem a CASA;
      o chessboard.js escuta na casa, então o arrastar continua intacto,
      e nas Coordenadas as casas com peças voltam a pontuar. */
.tabuleiro { touch-action: none; -webkit-tap-highlight-color: transparent; }
.tabuleiro img { pointer-events: none; -webkit-user-drag: none; user-select: none; }

/* Convite para criar conta (visitantes nas telas de treino) */
.convite-conta { margin-top:10px; font-size:13px; background:var(--fundo);
    border:1px dashed var(--acento); border-radius:8px; padding:8px 12px; }

/* ---- Estudos (M7.10) ---- */
.estudo-form { display:flex; gap:10px; flex-wrap:wrap; }
.estudo-form input[type=text] { flex:1; min-width:200px; }
.estudo-form .botao { margin:0; }
.estudo-capitulos { display:flex; flex-direction:column; gap:4px; }
.estudo-cap { padding:8px 10px; border-radius:8px; text-decoration:none; color:var(--texto);
    font-size:14px; border:1px solid transparent; }
.estudo-cap:hover { background:var(--fundo); }
.estudo-cap.ativa { border-color:var(--acento); background:var(--fundo); font-weight:700; }
.replay-controles { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.replay-controles .botao { margin:0; }
.estudo-comentario { margin-top:10px; }
.estudo-comentario textarea { width:100%; min-height:70px; resize:vertical; }
.lance.comentado::after { content:'💬'; font-size:9px; margin-left:2px; }
.lance.atual { background:var(--acento); color:var(--acento-texto); border-color:var(--acento); }