/* App styles — :root, body, shared UI copied from mockups/tabuleiro-pecas.html + layout additions */
/* Tema do app (escolhível: auto/claro/escuro; auto segue prefers-color-scheme do sistema).
   :root = ESCURO suave (padrão de fallback); [data-theme="light"] = PERGAMINHO claro.
   O atributo data-theme é setado no <html> por src/ui/app-theme.js (e por um script inline no index.html, p/ não piscar). */

/* Inter self-hospedada (variável, 1 arquivo por subset cobre TODOS os pesos 100–900).
   Antes vinha do CDN do Google (fonts.googleapis.com) — agora é local + no precache do SW,
   então funciona offline de verdade, sem render-block e sem bater no servidor do Google. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--bg:#241c12;--panel:#2f2618;--panel2:#39301f;--ink:#f1e7d6;--muted:#bba789;
  --accent:#cd8a48;--accentText:#1a120b;--line:#4a3b29;--sel:#e0a24a;--move:#5fb16b;--danger:#cf5b3a;--atk:#ef7d5a;--def:#6fa8e0;
  /* Cor semântica de resultado (Nivel 2 / T2.6): --win vitória/positivo/concluído, --loss derrota/negativo/falha; --banner-brown = faixa marrom (toplive/disc-banner) */
  --win:#5fb16b;--loss:var(--danger);--banner-brown:linear-gradient(180deg,#5a3a14,#3a2710);
  /* Cor semântica de empate (--draw, dourado), medalhas (--bronze/--silver/--gold) e "ao vivo" (--live). Compartilhadas entre os temas, como --win/--loss */
  --draw:#caa64a;--bronze:#c17a3f;--silver:#c9cdd4;--gold:#e8b84b;--live:#e0483a;
  /* Border-radius (Nivel 2 / T2.2): --r-sm controles (8/9/10/11), --r-md cards/CTAs (12/13/14/16/18/20), --r-pill pilula. 50% e raios <=7px (elementos pequenos) ficam literais */
  --r-sm:10px;--r-md:14px;--r-pill:999px;
  /* Numeros-display (Nivel 2 / T2.8): so os que passam da escala de texto (--fs-xl 24). Numeros menores usam --fs-* + font-weight:800 */
  --num-l:21px;--num-xl:30px;
  /* Regra de peso de fonte (Nivel 2 / T2.9): 400 secundario, 500 corpo, 600 label/botao, 700 titulo/CTA, 800 numero/estatistica. Outliers .aula-btn e .med-tier corrigidos p/ 700 */
  /* Escala tipografica (Nivel 2 / T2.1): 6 degraus. De-para: 9/10/11/11.5->xs; 12/12.5/13->sm; 13.5->md; 14/14.5/14.7/15/16/17->base; 18/19/20/21/22->lg; 24/26/30->xl. Glifos/emoji/icones (char, iconbtn, x de fechar) ficam literais */
  --fs-xs:11px;--fs-sm:12.5px;--fs-md:13.5px;--fs-base:15.5px;--fs-lg:20px;--fs-xl:24px;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23bd7a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:root[data-theme="light"]{--bg:#ebdfc4;--panel:#f6eedb;--panel2:#e2d4b4;--ink:#352a1b;--muted:#6b5a40;
  /* --muted e --accent escurecidos no tema claro p/ passar WCAG AA (>=4.5:1) como texto pequeno — o #8a7657/#b06a28 antigos ficavam ~3:1 */
  /* --atk/--def por tema p/ passar AA como rotulo pequeno (.nmrole): claros no escuro, escuros no claro. Os #d0563a/#4a86c5 unicos reprovavam (~2.6-3.9:1). */
  --accent:#8c531c;--accentText:#fff7ea;--line:#d3c3a0;--atk:#a5331d;--def:#285991}
*{box-sizing:border-box}
/* `hidden` tem de esconder SEMPRE. A regra do navegador para [hidden] é display:none com a
   especificidade de um seletor de tipo, então qualquer classe nossa com `display` próprio a vence
   em silêncio: o elemento fica com o atributo, o JS acha que escondeu, e ele continua na tela.
   Foi o que aconteceu com .toplive e .jwrap (flex) na Sala Online e com .livepill (inline-flex). */
[hidden]{display:none!important}
/* App, não página: sem zoom (double-tap/pinch) nem ajuste automático de fonte */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);
  color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-weight:500;height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none}
/* Cara de app: nada de selecionar texto (mouse/celular) nem menu de copiar no toque longo.
   Campos de digitação (editar nome, código do console) continuam selecionáveis/editáveis. */
body{-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Controles de formulário não herdam a fonte do body por padrão (usam a do user-agent);
   uma regra só faz todos usarem a Inter herdada — antes cada botão/input repetia font-family:'Inter'. */
button,input,select,textarea{font-family:inherit}
input,textarea,select,[contenteditable]{-webkit-user-select:text;-ms-user-select:text;user-select:text;-webkit-touch-callout:default}
/* #app é o ÚNICO container de rolagem: telas curtas ficam estáticas; só as longas (Sobre, Regras) rolam.
   Evita o "scroll fantasma" que vinha do body com min-height:100dvh. */
#app{height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:none}
/* Barra de rolagem escondida em TODAS as telas (a rolagem continua funcionando). */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
header{max-width:1240px;margin:0 auto 20px;text-align:center}
header h1{font-weight:700;letter-spacing:3px;font-size:30px;margin:0 0 6px;color:var(--accent)}
header p{margin:0;color:var(--muted);font-size:var(--fs-base)}
.board-frame{position:relative;border-radius:0;overflow:hidden;border:7px solid var(--frame,#6b5836);aspect-ratio:1/1}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 16px 18px;margin-bottom:16px}
/* Base de cartao (Nivel 2 / T2.3+T2.7): painel+borda+raio+padding padrao fatorado dos ~10 cartoes. Padding padrao 14px 16px; mgroup e a excecao (miolo das missoes) */
.rule-card,.aula-progress,.howto .step,.resbar-wrap,.h2h{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.mgroup{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:6px 0}
.htp-cta,.invite-btn{display:flex;align-items:center;gap:12px;width:100%;background:var(--panel2);border:1px solid var(--sel);border-radius:var(--r-md);padding:14px 16px;margin:0 0 16px;cursor:pointer;color:var(--ink);font:inherit;text-align:left}
.panel h2{font-size:var(--fs-sm);letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.panel h3{font-size:var(--fs-sm);font-weight:500;letter-spacing:.5px;color:var(--ink);margin:14px 0 7px}
.swatch{cursor:pointer;border-radius:var(--r-sm);border:2px solid transparent;padding:6px;text-align:center;background:var(--panel2);transition:.12s}
.swatch:hover{border-color:var(--muted)} .swatch.on{border-color:var(--sel);box-shadow:0 0 0 2px rgba(242,193,78,.25)}
.swatch .prev{height:44px;border-radius:6px;margin-bottom:6px} .swatch small{font-size:var(--fs-sm);color:var(--muted)}
button.act{flex:1;letter-spacing:1px;cursor:pointer;background:var(--panel2);
  color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px;font-size:var(--fs-sm);transition:.12s}
@media (hover:hover){button.act:hover{border-color:var(--accent);color:var(--accent)}}

/* Screens layout */
/* largura padrão de TODAS as telas: 520px, centralizado (visual "de celular").
   Só as telas de jogo (tabuleiro) usam max-width:none — vide .screen.gameplay/.game. */
.screen{max-width:520px;margin:0 auto;padding:16px}
.status{margin:10px 0;color:var(--accent)}
label{display:inline-flex;gap:6px;align-items:center}

.account{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}.avatar{width:36px;height:36px;border-radius:var(--r-sm);border:2px solid var(--accent);object-fit:cover;box-sizing:border-box}
.avatar-ph{display:flex;align-items:center;justify-content:center;background:var(--panel2);color:var(--muted)}.avatar-ph svg{width:64%;height:64%}.avatar-ph .uic{--uic-size:64%}
table.stats{border-collapse:collapse;margin:10px 0;min-width:320px}table.stats th,table.stats td{border:1px solid var(--line);padding:6px 12px;text-align:center}table.stats th{color:var(--accent);font-size:var(--fs-sm)}.muted{color:var(--muted)}

.lobby{list-style:none;padding:0;margin:12px 0;max-width:480px}
.plist{margin:12px 0;max-width:480px}
.lobby-item{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;cursor:pointer;background:var(--panel2)}
@media (hover:hover){.lobby-item:hover{border-color:var(--accent)}}
.lobby-item .nm{flex:1}.lobby-item .rt{color:var(--accent)}
.modal{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(0,0,0,.72);z-index:50;text-align:center;padding:24px;overflow-y:auto}
.modal p{max-width:420px;margin:0;font-size:var(--fs-lg)}

.clock{font-size:var(--fs-lg);text-align:center;padding:6px 10px;border-radius:var(--r-sm);background:var(--panel2);color:var(--ink);margin:4px 0}
.clock.warn{color:#ff5a4d;animation:blink .6s steps(2,start) infinite}
@keyframes blink{50%{opacity:.25}}

/* ===== Telas de partida estilo chess.com (.gameplay / .gp-*) ===== */
.screen.gameplay{max-width:none;width:100%;margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;padding:0;overflow:hidden;position:relative}
.gp-top{display:flex;align-items:center;gap:8px;padding:10px 12px 6px;flex:0 0 auto}
.gp-top .gp-title{flex:1;text-align:center;font-weight:700;font-size:var(--fs-lg);letter-spacing:1px;color:var(--accent)}
.gp-top .gp-rspace{min-width:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.gp-top .gp-eye{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:var(--fs-base);font-weight:600;font-variant-numeric:tabular-nums}
.gp-top .gp-eye svg{width:18px;height:18px}
.gp-top .gp-eye .uic{--uic-size:18px}
.gp-top .gp-live-dot{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(224,72,58,.6);animation:livepulse 1.6s infinite}
.gp-top .gp-live-dot.off{background:#7a6a52;animation:none;opacity:.5}
.gp-moves{display:flex;overflow-x:auto;white-space:nowrap;padding:5px 12px 7px;border-bottom:1px solid var(--line);scrollbar-width:none;-ms-overflow-style:none;flex:0 0 auto}
.gp-moves::-webkit-scrollbar{display:none}
.gp-mv{font-size:var(--fs-sm);color:var(--ink);padding:3px 7px;border-radius:6px;font-variant-numeric:tabular-nums;flex:0 0 auto;cursor:pointer}
.gp-mv .n{color:var(--muted);margin-right:4px}
.gp-mv.on{background:var(--accent);color:var(--accentText)}.gp-mv.on .n{color:var(--accentText);opacity:.75}
.gp-mv-ph{visibility:hidden}
.gp-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;flex:0 0 auto;position:relative}
.gp-bar .av{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel2);color:var(--muted);display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:var(--fs-lg);overflow:hidden}
.gp-bar .av img{width:100%;height:100%;object-fit:cover}
.gp-bar .av svg{width:60%;height:60%}
.gp-bar .av .uic{--uic-size:20px}
/* Presencial: ícone real da peça (rei/atacante) no avatar da barra — preenche sem cortar */
.gp-bar .av .vk,.gp-bar .av .disc{width:100%;height:100%}
.gp-bar .av .vk img{object-fit:contain}
.gp-bar .nm{flex:1;min-width:0;line-height:1.2}
.gp-bar .nm b{font-size:var(--fs-base);font-weight:600;color:var(--ink)}
.gp-bar .nm .rt{font-size:var(--fs-base);color:var(--muted);font-weight:400}
.gp-bar .nm .cflag{font-size:var(--fs-base)}
/* Contador de material: nº de peças que o lado capturou (espadas + número), inline no nome. */
.gp-bar .nm .gp-mat{display:inline-flex;align-items:center;gap:2px;margin-left:6px;font-size:var(--fs-sm);font-weight:600;color:var(--muted);vertical-align:middle}
.gp-bar .nm .gp-mat .uic{--uic-size:13px}
.gp-bar .nmrole{display:block;font-size:var(--fs-sm);font-weight:500;line-height:1.1;margin-top:1px}
.gp-bar .nmrole.atk{color:var(--atk)}
.gp-bar .nmrole.def{color:var(--def)}
.turnpill{font-size:var(--fs-xs);font-weight:600;color:var(--accent);border:1px solid var(--accent);border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap;flex:0 0 auto}
.gp-bar.turn{background:rgba(189,122,58,.12)}
.gp-bar .gp-delta{font-size:var(--fs-sm);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:2px}
.gp-bar .gp-delta.gp-delta-hold{visibility:hidden}
.gp-bar .gp-delta b{font-weight:500}
.gp-bar .gp-delta.win b{color:var(--win)}.gp-bar .gp-delta.lose b{color:var(--loss)}
.gp-clock{font-size:var(--fs-base);font-weight:600;font-variant-numeric:tabular-nums;background:var(--panel2);color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:3.5px 10px;letter-spacing:.5px}
.gp-clock.active{background:var(--accent);color:var(--accentText);border-color:var(--accent)}
.gp-clock.active.low{background:var(--danger);border-color:var(--danger);color:#fff}
.gp-board{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:4px 8px;position:relative}
.gp-board.board-locked{pointer-events:none}
.startbanner{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--accent);border-radius:var(--r-sm);padding:8px 14px;font-size:var(--fs-sm);line-height:1.35;text-align:center;max-width:90%;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.5);z-index:5}
.startbanner b{color:var(--accent)}
.gp-board .board-frame{width:min(96vw, calc(100dvh - 16rem));height:auto;aspect-ratio:1/1}
/* treinador/desafios têm personagem+balão → reservam um pouco mais de altura */
.gameplay.withcoach .gp-board .board-frame{width:min(96vw, calc(100dvh - 18.5rem))}
/* Treinador: a zona do treinador (balão + botões "jogar assim/repensar") tem altura
   reservada FIXA, então o tabuleiro não "pula" quando o balão vai de 2 p/ 3 linhas nem
   quando os botões aparecem. O tabuleiro é dimensionado pelo espaço que sobra (preenche e
   fica centrado, sem nunca cortar), garantindo posição estável em todos os estados. */
.gameplay.train .gp-coachzone{flex:0 0 auto;min-height:118px;display:flex;flex-direction:column;justify-content:flex-start}
/* avatar do treinador ancorado no TOPO da linha: não desce quando o balão ganha linhas */
.gameplay.train .gp-coach{align-items:flex-start}
/* QUADRADO SEMPRE: o LADO é a altura — o menor entre o espaço vertical que sobra (100%) e a
   largura útil da faixa (96vw, limitada pela largura real do .gp-board = 100vw menos os 8px+8px
   de padding). A largura vem do aspect-ratio. NÃO usar max-width aqui: com a altura já definida,
   um clamp de largura anula o aspect-ratio e achata as casas (era o bug do Treinador no celular). */
.gameplay.train .gp-board .board-frame{width:auto;height:min(100%, 96vw, 100vw - 16px);aspect-ratio:1/1;flex:0 0 auto}
.gp-footer{display:flex;border-top:1px solid var(--line);background:var(--panel);flex:0 0 auto}
.gp-fbtn{flex:1;background:none;border:none;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 11px;font-size:var(--fs-xs);-webkit-tap-highlight-color:transparent}
.gp-fbtn svg{width:23px;height:23px}
.gp-fbtn .uic{--uic-size:23px}
.gp-fbtn.off{opacity:.4}   /* chat bloqueado: botão apagado/inativo (online) */
@media (hover:hover){.gp-fbtn:hover:not(:disabled){color:var(--accent)}}
/* feedback de clique instantâneo (sem transição p/ aparecer já no clique no desktop) */
.gp-fbtn:active:not(:disabled){background:var(--accent);color:var(--accentText);transform:scale(.96)}
.gp-fbtn:disabled{opacity:.35;cursor:default}
/* personagem + balão (treinador/desafios) */
.gp-coach{display:flex;align-items:center;gap:10px;padding:10px 12px 6px;flex:0 0 auto}
.gp-coach .char{width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:30px;flex:0 0 auto;position:relative}
.gp-coach .char .coach-av{width:100%;height:100%;object-fit:contain;display:block}
.gp-bubble{position:relative;background:#f3ead7;color:#2a2118;border-radius:var(--r-md);padding:10px 13px;font-size:var(--fs-base);line-height:1.35;flex:1;font-weight:500}
.gp-bubble.warn{color:#9a3a1f}
.gp-bubble::before{content:'';position:absolute;left:-7px;top:50%;transform:translateY(-50%);width:0;height:0;border:7px solid transparent;border-right-color:#f3ead7;border-left:0}
.gp-chalnav{display:flex;align-items:center;justify-content:space-between;padding:7px 16px;flex:0 0 auto}
.gp-chalnav button{background:none;border:none;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;padding:4px}
.gp-chalnav button svg{width:24px;height:24px}
.gp-chalnav .lbl{font-size:var(--fs-base);font-weight:500;color:var(--ink)}
.gp-coach-acts{display:flex;gap:8px;justify-content:center;padding:0 12px 4px;flex:0 0 auto}
.gp-bubble .tmsg{color:#5a4a30}

/* ===== Tela de preparação (vs computador) ===== */
/* Tela de preparação (computador/treinador): cabeçalho congelado no topo + corpo rolável
   (garante alcançar o botão "Começar" quando a lista de bots passa da altura da tela). */
.screen.gsetup{width:100%;max-width:520px;margin:0 auto;padding:0 16px;box-sizing:border-box;overflow-x:hidden;height:100dvh;display:flex;flex-direction:column}
.gsetup .set-head{flex:0 0 auto}
.gsetup-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:none;padding-bottom:20px}
.setup-board{width:min(84vw,330px);max-width:100%;margin:6px auto 16px}
.setup-panel{display:flex;flex-direction:column;gap:14px}
.setup-label{color:var(--muted);font-size:var(--fs-base);margin-bottom:-4px}
.gsetup select{appearance:none;-webkit-appearance:none;cursor:pointer;flex:1;min-width:0;max-width:220px;
  background:var(--panel) var(--select-arrow) no-repeat right 12px center;
  background-size:11px;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 34px 10px 14px;font-family:inherit;font-size:var(--fs-base)}
.gsetup .setup-select{flex:none;width:100%;max-width:none}
.botlist{display:flex;flex-direction:column;gap:8px}
.botbtn{display:flex;align-items:center;gap:12px;width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 12px;cursor:pointer;color:var(--ink);text-align:left;font:inherit}
@media (hover:hover){.botbtn:hover{border-color:var(--accent)}}
.botbtn.on{border-color:var(--sel);background:rgba(224,162,74,.12);box-shadow:0 0 0 1px var(--sel) inset}
.botbtn .av{width:44px;height:44px;border-radius:var(--r-sm);background:var(--panel);object-fit:contain;flex:0 0 auto}
.botbtn .info{flex:1 1 auto;min-width:0}
.botbtn .nm{font-weight:600}
.botbtn .nm .ep{color:var(--muted);font-weight:400}
.botbtn .rt{color:var(--muted);font-variant-numeric:tabular-nums}
/* Seletor de bot em lista suspensa (dropdown) */
.botselect{position:relative}
.botselect>summary{list-style:none;cursor:pointer}
.botselect>summary::-webkit-details-marker{display:none}
.botselect>summary .chev{flex:0 0 auto;color:var(--muted);transition:transform .15s}
.botselect[open]>summary .chev{transform:rotate(180deg)}
.botselect[open]>summary{border-color:var(--accent)}
.botselect .botlist{margin-top:8px;max-height:300px;overflow:auto}
.side-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sidesel{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);padding:13px 6px;cursor:pointer;color:var(--ink);font-family:inherit;transition:.12s}
.sidesel:hover{border-color:var(--muted)}
.sidesel.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(189,122,58,.3)}
.sidesel .sic{width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.sidesel .sic.q{width:32px;height:32px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);color:var(--accent);font-size:var(--fs-base);font-weight:700}
.sidesel small{font-size:var(--fs-sm);color:var(--muted)}
.sidesel.on small{color:var(--ink)}
.setup-start{background:var(--accent);color:var(--accentText);border:1px solid var(--accent);border-radius:var(--r-md);
  padding:14px;font-weight:500;font-size:var(--fs-lg);letter-spacing:.5px;cursor:pointer;margin-top:4px}
.setup-start:hover{border-color:var(--accentText)}
/* Variante secundária (mesmo formato, visual dos botões do menu inicial: painel + borda, sem preencher) */
.setup-start.secondary{background:var(--panel);color:var(--ink);border-color:var(--line)}
/* ação destrutiva discreta (Abandonar/Desistir): texto em cor de alerta, sem preencher */
.setup-start.danger{background:var(--panel);color:var(--loss);border-color:var(--line)}
@media (hover:hover){.setup-start.danger:hover{border-color:var(--loss)}}
@media (hover:hover){.setup-start.secondary:hover{border-color:var(--accent)}}
/* Indicador do Fenrir (bot adaptativo): escada de degraus + marcas de lado + o que falta */
.fenrir-ind:empty{display:none}
.fenrir-ind{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}
.fenrir-ind .fl-ladder{display:flex;align-items:stretch;gap:3px;height:15px}
.fenrir-ind .fl-rung{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:3px}
.fenrir-ind .fl-rung:first-child{border-radius:var(--r-pill) 3px 3px var(--r-pill)}
.fenrir-ind .fl-rung:last-child{border-radius:3px var(--r-pill) var(--r-pill) 3px}
.fenrir-ind .fl-rung.done{background:var(--accent);border-color:var(--accent);opacity:.55}
.fenrir-ind .fl-rung.cur{background:var(--sel);border-color:var(--sel)}
.fenrir-ind .fl-marks{display:flex;gap:18px;margin-top:12px}
.fenrir-ind .fl-mk{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--muted)}
.fenrir-ind .fl-mk.on{color:var(--ink);font-weight:600}
.fenrir-ind .fl-dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;box-sizing:border-box}
.fenrir-ind .fl-dot.atk.on{background:var(--atk);border-color:var(--atk)}
.fenrir-ind .fl-dot.def.on{background:var(--def);border-color:var(--def)}
.fenrir-ind .fl-hint{font-size:var(--fs-sm);color:var(--ink);margin:11px 0 0}
.fenrir-ind .fl-risk{font-size:var(--fs-xs);color:var(--muted);margin:5px 0 0;display:flex;align-items:center;gap:5px}
.fenrir-ind .fl-risk .fl-i{color:var(--loss);font-weight:700}
.fenrir-ind .fl-soft{font-size:var(--fs-xs);color:var(--muted);margin:3px 0 0;opacity:.85}
/* Prestígio do Fenrir no topo (v176): patente + estrelas abaixo da escada cheia */
.fenrir-ind .fl-prestige{margin-top:12px}
.fenrir-ind .fl-title{font-size:var(--fs-base);font-weight:800;color:var(--gold);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fenrir-ind .fl-prestige-stars{display:inline-flex;gap:3px}
.fenrir-ind .fl-star{font-size:16px;line-height:1;color:var(--line)}
.fenrir-ind .fl-star.on{color:var(--gold)}
/* Faixa de patente do Fenrir no Perfil */

/* Modal de fim de partida */
.endmodal{z-index:60}
/* convite de revanche / oferta de empate sobrepõem o modal de fim (z-index 60) */
#omodal .modal{z-index:65}
/* sub-modais Compartilhar / Jogar Novamente abrem POR CIMA do modal de fim (v77) */
#sharesheet, #sidesheet{z-index:66}
.endcard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:28px 28px 24px;text-align:center;min-width:240px;max-width:90vw}
.endtitle{font-size:var(--fs-xl);font-weight:700;color:var(--accent);margin-bottom:6px}
.endwhy{color:var(--ink);margin-bottom:20px;font-size:var(--fs-base)}
.end-challenge{color:var(--muted);font-size:var(--fs-sm);line-height:1.4;margin:-12px 0 16px}
/* Resumo de desempenho pós-partida (lances + peças perdidas), logo abaixo do motivo. */
.end-perf{color:var(--muted);font-size:var(--fs-sm);line-height:1.4;margin:-12px 0 16px}
/* aviso de que a ajuda (Desfazer/Dica) anulou o rating desta partida */
.end-note{color:var(--muted);font-size:var(--fs-sm);line-height:1.4;margin:-6px 0 16px;text-align:center}
.endclose{position:absolute;top:2px;right:4px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--muted);font-size:var(--fs-xl);line-height:1;cursor:pointer;padding:0}
.endclose:hover{color:var(--ink)}
/* Botão de AÇÃO EM PILHA: o padrão dos modais (Opções/Compartilhar/Confirmar/fim de partida) e da
   tela "Como jogar em 30s" — mesma família, mesma regra (o .setup-start cru é maior: 14px + fs-lg,
   e é usado nas telas de SETUP, onde ele é a ação principal e solitária). */
.endcard .setup-start, .htp-actions .setup-start{width:100%;margin-top:0;padding:11px;font-size:var(--fs-base)}
/* Modais de LISTA (Opções / Compartilhar / Confirmar): mesmo título (18px) e mesmo espaço
   até o 1º botão (18px). O modal de fim de partida (.endmodal) fica com o título grande/accent. */
#optmodal .endtitle, .modal.confirm .endtitle, .modal.share-sheet .endtitle, .modal.notice .endtitle{font-size:18px;margin-bottom:18px}
.modal.confirm{z-index:70}
.modal.share-sheet{z-index:90}
.endcard .setup-start + .setup-start{margin-top:10px}
/* Console secreto */
.devconsole .endcard{min-width:260px}
.devconsole input{width:100%;box-sizing:border-box;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-size:var(--fs-base);font-family:inherit}
.devconsole .dcmsg{color:var(--muted);font-size:var(--fs-sm);min-height:18px;margin:8px 0 12px}
/* lista de comandos (/list17) — dev */
.devconsole .dc-listcard{min-width:300px;max-width:360px}
.devconsole .dc-list{max-height:60vh;overflow-y:auto;margin:0 0 12px;text-align:left}
.devconsole .dc-group{color:var(--accent);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;margin:12px 2px 4px}
.devconsole .dc-group:first-child{margin-top:0}
.devconsole .dc-row{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;margin:0 0 5px;cursor:pointer;color:var(--ink)}
.devconsole .dc-row:hover{border-color:var(--accent)}
.devconsole .dc-code{color:var(--accent);font-size:var(--fs-sm);font-family:ui-monospace,monospace}
.devconsole .dc-desc{color:var(--muted);font-size:var(--fs-xs)}
/* flutuante do preview de espectador (dev) */
.pv-spec{position:fixed;top:14px;right:14px;z-index:200;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px}
/* spinner do modal "aguardando revanche" */
.omodal-spin{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;margin:2px auto 16px;animation:omspin .9s linear infinite}
@keyframes omspin{to{transform:rotate(360deg)}}

/* ===== Menu estilo app (amigável, linhas com ícone) ===== */
.screen.menu{max-width:520px}
/* (removida a antiga .menu .brand centralizada — o título "Hnefatafl" agora é .tab-top .brand) */
.acct{display:flex;align-items:center;gap:12px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin-bottom:16px;color:var(--ink)}
.acct .avatar{width:42px;height:42px;border-radius:var(--r-sm);border:2px solid var(--accent);flex:0 0 auto}
.acct .who{display:flex;flex-direction:column;line-height:1.25}
.acct .who span{font-size:var(--fs-base);color:var(--muted)}
.acct.acct-link{cursor:pointer}
@media (hover:hover){.acct.acct-link:hover{border-color:var(--accent)}}
.acct .chev{margin-left:auto;color:var(--muted);font-size:var(--fs-xl);line-height:1}
.acct .streak{margin-left:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto}
.acct .streak .days{font-size:var(--fs-lg);font-weight:800;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.acct .streak img{width:26px;height:26px;display:block}
.acct .streak.streak-zero img{filter:grayscale(1) opacity(.5)}
.acct .streak.streak-zero .days{color:var(--muted)}
/* Fogo recolorido pela paleta: MESMO png da sequência, pintado via máscara. */
.flame{display:inline-block;width:20px;height:20px;flex:0 0 auto;
  -webkit-mask:url(../assets/icons/flame-426833.png) center/contain no-repeat;
  mask:url(../assets/icons/flame-426833.png) center/contain no-repeat;background:var(--accent)}
.acct.acct-login{cursor:pointer;justify-content:center;letter-spacing:.5px;gap:10px;font-size:var(--fs-base)}
.acct .gico{width:26px;height:26px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.acct .gico svg{width:18px;height:18px}
.menu-list{display:flex;flex-direction:column;gap:10px}
/* .menu-row foi unificado em .nav-card. Os acordeões usam .nav-card.exp-toggle. */

/* Barra inferior de abas (novo menu) */
/* fixa SEMPRE no rodapé da viewport (centralizada, casando com a largura .screen.tab) */
.bottom-nav{display:flex;border-top:1px solid var(--line);background:var(--panel);position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:520px;z-index:20}
.bnav-it{flex:1;background:none;border:none;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;font-size:var(--fs-xs);-webkit-tap-highlight-color:transparent}
.bnav-it .i{width:22px;height:22px}.bnav-it .i svg{width:22px;height:22px;display:block}
.bnav-it .i .uic{--uic-size:22px}
.bnav-it.on{color:var(--accent)}
@media (hover:hover){.bnav-it:hover{color:var(--accent)}}
.bnav-it:active{transform:scale(.95)}
/* Ícone de máscara SVG via CSS (sistema uiIcon) */
.uic{display:inline-block;width:var(--uic-size,24px);height:var(--uic-size,24px);background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;vertical-align:middle;flex:0 0 auto}
/* Bloco do jogador (topbar) */
/* O .pblock deixou de ser um botão na v182.2 (a chama e o avatar viraram alvos separados), então
   nem ele nem o vão de 7px entre os dois são clicáveis — o cursor foi para quem de fato clica. */
.pblock{display:flex;align-items:center;gap:7px;background:none;border:none;padding:2px;color:var(--ink)}
.pblock-login{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 12px;font-size:var(--fs-sm);color:var(--accent);font-weight:600;white-space:nowrap;flex:0 0 auto;cursor:pointer}
/* Convite a entrar na Início: faixa de largura inteira, logo abaixo do título. Discreta de
   propósito — a faixa de instalar, logo abaixo, é a do contorno em destaque, e duas chamadas
   com a mesma força brigariam entre si. */
.signin-banner{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px;margin-bottom:10px;
  font-size:var(--fs-base);font-weight:600;color:var(--accent);cursor:pointer}
@media (hover:hover){ .signin-banner:hover{border-color:var(--sel)} }
.signin-banner:active{transform:scale(.99)}
/* Reset dos dois botões filhos (eram <span>). O padding+margem simétricos engordam a área de toque
   da chama, que tem só 22px, SEM mover nada de lugar. */
.pb-streak,.pb-av{display:flex;background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit}
.pb-streak{padding:6px 4px;margin:-6px -4px}
.tab-top .brand,.tab-top .ttitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-streak{display:flex;align-items:center;gap:3px;font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.pb-streak img{width:22px;height:22px;transform:translateY(-2px)}.pb-streak.zero{filter:grayscale(1);opacity:.6}
.pb-av .avatar,.pb-av img,.pb-av .avatar-ph{width:36px;height:36px;border-radius:50%}
/* Telas de aba: o conteúdo rola e a barra fica fixa embaixo */
/* altura FIXA (100dvh) → é o .tab-body que rola por dentro; assim o cabeçalho (.tab-top) fica fixo */
.screen.tab{width:100%;max-width:520px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;padding:0;overflow-x:hidden;box-sizing:border-box}
.screen.tab .tab-body{flex:1;min-height:0;padding:0 16px 76px;overflow-y:auto;overflow-x:hidden}
/* a barra é fixa (fora do fluxo): reservar espaço no fim do conteúdo das telas com barra */
.screen.profile{padding-bottom:76px}
/* min-height fixa a altura da linha do cabeçalho: título no MESMO Y em todas as abas,
   independe do elemento da direita (avatar+🔥 nas 4 abas, ícone de amigos no Perfil). */
/* cabeçalho fixo ao rolar: gruda no topo do .tab-body (fundo tapa o conteúdo que passa por baixo).
   O padding-top vem do próprio cabeçalho (o .tab-body perdeu o dele) p/ o fundo cobrir até o topo. */
/* O `gap` é o piso do vão entre o título e o que estiver à direita. Sem ele o título ocupava a
   sobra inteira e ENCOSTAVA no vizinho (o botão de entrar não encolhe: nowrap + flex:0 0 auto) —
   media 0 px em Aprender/Jogar a 320 px em espanhol e francês. Com o gap o título recua e, no
   limite, corta com reticências, que é o que já se espera dele (min-width:0 + ellipsis acima). */
.tab-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;height:38px;box-sizing:content-box;position:sticky;top:0;z-index:15;background:var(--bg);padding-top:18px}
/* TÍTULO ÚNICO: mesma métrica (24/700) e line-height 38 em TODA tela (abas e set-head),
   = altura do bloco do avatar. Assim o título é a âncora de 38px e seu topo fica sempre
   a 18px (padding do container), idêntico em qualquer tela, independe do vizinho. */
.tab-top .brand,.tab-top .ttitle{font-size:var(--fs-xl);font-weight:700;line-height:38px}
.tab-top .brand{color:var(--accent);letter-spacing:.5px}
/* subtítulo localizado (Xadrez Viking / Viking Chess) ao lado do nome, na mesma linha */
.brand-sub{font-size:var(--fs-lg);font-weight:500;letter-spacing:0;color:var(--muted)}
.brand-sub::before{content:"·";margin:0 7px;color:var(--muted)}
/* botão de amigos pode estar no .set-head (perfil de outro) ou no .tab-top (seu perfil) */
.tab-top .head-friends{position:relative}
/* Cards de navegação (modos/seções) */
.nav-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 15px;margin-bottom:10px;font-size:var(--fs-base);color:var(--ink);cursor:pointer}
.nav-card .ic{width:24px;height:24px;color:var(--accent);display:flex;align-items:center;justify-content:center}
.nav-card .ic svg{width:24px;height:24px}
.nav-card .ic .uic{--uic-size:24px}
.nav-card .lbl{font-weight:600}
.nav-card .sub{display:block;font-size:var(--fs-sm);color:var(--muted);font-weight:400;margin-top:2px}
.nav-card .chev{margin-left:auto;color:var(--muted)}
.nav-card:not(.exp-toggle) .chev .uic{--uic-size:20px}
/* D7: emojis trocados por ícones SVG (tamanho por contexto) */
.uic.inl{--uic-size:1.05em;vertical-align:-.16em}
.review .nav button{display:flex;align-items:center;justify-content:center}
.review .nav button .uic{--uic-size:20px}
.lg-eye{display:flex;align-items:center;justify-content:center;color:var(--muted)}
.lg-eye .uic{--uic-size:18px}
#challenge-host .chav{color:var(--accent)}
#challenge-host .chav .uic{--uic-size:22px}
.nav-card .tag{margin-left:auto;color:var(--muted);font-size:var(--fs-sm)}
/* Selo de presença do card Online (tela Jogar): quantas pessoas estão na sala agora. Aceso =
   bolinha verde; zero = cinza, e o card perde o destaque para o Contra o Computador (a mesma
   gramática da chama da sequência, que fica apagada em vez de sumir). */
/* O véu do selo sai da PRÓPRIA cor do texto do card (color-mix), não de um rgba fixo: no card
   primário ele herda o contraste que o card já tem, e isso vale nos dois temas — no claro o
   primário é marrom escuro com texto claro, e um véu escuro fixo sumiria ali. */
.livepill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;
  background:rgba(128,128,128,.22);
  background:color-mix(in srgb, currentColor 14%, transparent);
  font-size:var(--fs-sm);font-weight:600}
.nav-card:not(.primary) .livepill{color:var(--muted)}
.livepill .dot{width:7px;height:7px;border-radius:50%;background:#5cc271;box-shadow:0 0 0 3px rgba(92,194,113,.2)}
:root[data-theme="light"] .livepill .dot{background:#3f9e57}
.livepill.off .dot{background:currentColor;opacity:.55;box-shadow:none}
/* Só quando o selo está VISÍVEL: escondido, ele deixa de empurrar, e a seta precisa do
   margin-left:auto de sempre para voltar à direita do card. */
.nav-card .livepill:not([hidden]) + .chev{margin-left:10px}
.nav-card.primary{background:var(--accent);border-color:var(--accent);color:var(--accentText)}
.nav-card.primary .ic{color:var(--accentText)}
.nav-card.primary .chev{color:var(--accentText);opacity:.75}
@media (hover:hover){.nav-card:hover{border-color:var(--accent)}}
/* AÇÃO (não navega) com a MESMA métrica dos cards do menu — mesma altura, mesma fonte, mesmo bronze.
   Herda de .nav-card de propósito: se a métrica dos cards mudar, o botão acompanha em vez de
   divergir. Sem ícone e sem seta, então o rótulo centraliza e a margem de lista some — e o
   `line-height` repete os 24px do ícone, que é quem dá a altura dos cards: sem ele o botão sairia
   5px mais baixo que os vizinhos, diferença pequena o bastante para parecer descuido. */
.nav-card.as-button{justify-content:center;margin-bottom:0;font-weight:600;line-height:24px}
.playbtn-home{width:100%;background:var(--accent);color:var(--accentText);border:1px solid var(--accent);border-radius:var(--r-md);padding:14px 15px;font-size:var(--fs-base);font-weight:700;display:flex;align-items:center;justify-content:flex-start;gap:12px;cursor:pointer;margin-bottom:10px}
.playbtn-home .ic{width:24px;height:24px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--accentText)}
.playbtn-home .ic .uic{--uic-size:24px}
.playbtn-home .lbl{flex:1;text-align:left}
.playbtn-home .chev{display:inline-flex;align-items:center;color:var(--accentText);opacity:.7}
.playbtn-home .chev .uic{--uic-size:22px}
/* Titulo de secao unificado (Nivel 2 / T2.5): antes .sec-h (menu) + .statsec (stats) + .ap-t (aulas). Um so componente global */
.sec-h{font-size:var(--fs-sm);color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px;font-weight:600}
.screen.menu .jwrap{margin-bottom:10px}

/* ===== Tela de Tema (preview ao vivo + abas + miniaturas) ===== */
.screen.settings{max-width:520px}
/* telas profundas (Voltar + título): mesmo respiro do topo e altura das abas (não "muito acima"). */
.set-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;margin:0 0 14px;padding:18px 0 12px;background:var(--bg);min-height:38px;box-sizing:content-box}
.set-head h2{margin:0;font-weight:700;font-size:var(--fs-xl);line-height:38px;display:flex;align-items:center}
/* Cabeçalho FIXO de verdade (padrão do "Contra o computador"): telas COM header perdem o
   padding-top do .screen, então o .set-head (sticky;top:0) já nasce colado no topo do scroller
   (#app) e gruda de cara, sem o "pulinho" ao rolar. O respiro do topo vem do padding do header.
   Telas SEM .set-head (menu, etc.) mantêm o padding-top normal. (review tem padding próprio.) */
.screen:has(.set-head){padding-top:0}
.iconbtn{background:none;border:none;color:var(--ink);font-size:30px;cursor:pointer;line-height:1;padding:0 6px;display:inline-flex;align-items:center;justify-content:center}
.iconbtn svg{width:24px;height:24px;display:block}.iconbtn .uic{--uic-size:24px}
.iconact{display:inline-flex;align-items:center;justify-content:center}
.iconact svg{width:20px;height:20px;display:block}
.settings .preview{max-width:320px;margin:0 auto 18px}
.settings .tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:16px}
.settings .tab{background:none;border:none;color:var(--muted);font-size:var(--fs-base);letter-spacing:.5px;padding:8px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.settings .tab.on{color:var(--accent);border-bottom-color:var(--accent)}
/* aba Conta (Configurações) */
/* a aba Conta ocupa a largura toda do #grid (que é uma grade de 3 colunas p/ as miniaturas) */
.acct-edit{grid-column:1/-1;display:flex;flex-direction:column;gap:18px;text-align:left}
.acct-edit .name-review-note{background:var(--panel2);border:1px solid var(--accent);border-radius:var(--r-sm);padding:10px 12px;color:var(--ink);font-size:var(--fs-sm);line-height:1.45}
.acct-edit .ae-field{display:flex;flex-direction:column;gap:6px}
.acct-edit .ae-field > label{font-size:var(--fs-sm);color:var(--muted);font-weight:600}
/* Zona de risco (v183): separada por um filete e no fim do formulário, para o botão de excluir
   conta não ficar ao lado dos controles do dia a dia. */
/* Botão do mesmo tamanho do "Desconectar" do Perfil, e centralizado como ele: como `.ae-field`
   é uma coluna flex, o `align-items:center` é o que tira a largura total do botão. */
.acct-edit .ae-danger{border-top:1px solid var(--line);margin-top:12px;padding-top:16px;align-items:center;text-align:center}
.acct-edit .ae-danger .ns-sub{font-size:var(--fs-xs);color:var(--muted);line-height:1.3}
/* O cartão tem largura definida e o texto ACOMPANHA. Antes o parágrafo é que era travado em
   34ch — uma medida que não conversa com o modal: em tela larga ele quebrava muito antes da
   borda, deixando uma faixa vazia à direita. Limitar o container é o que torna os dois
   responsivos juntos. */
.delacc .endcard{width:min(92vw,420px)}
.delacc .da-body{font-size:var(--fs-sm);color:var(--ink);margin:0 0 10px;text-align:left}
.delacc .da-keep{color:var(--muted)}
.delacc .da-pass{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink);padding:10px 11px;font-size:var(--fs-base);margin:2px 0 12px}
.delacc .da-err{text-align:left;margin:0 0 12px}
.acct-edit .ae-photo{display:flex;align-items:center;gap:14px}
.acct-edit .ae-photo .avatar{width:64px;height:64px;flex:0 0 auto}
.acct-edit .ae-photo .setup-start{width:auto;margin:0;padding:9px 16px;font-size:var(--fs-base)}
.acct-edit .name-row{display:flex;align-items:center;gap:8px}
.acct-edit .name-row b{font-size:var(--fs-lg)}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.thumb{background:var(--panel);border:2px solid transparent;border-radius:var(--r-md);padding:8px;cursor:pointer;color:var(--muted);transition:.12s}
.thumb:hover{border-color:var(--muted)}
.thumb.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(201,162,75,.28)}
.thumb .sw{height:58px;border-radius:var(--r-sm);margin-bottom:6px;display:flex;align-items:center;justify-content:center;gap:5px}
.thumb .sw.pcs{background:#e9dcc0}
.thumb .sw.appsw{border:1px solid var(--line);padding:0;overflow:hidden}
.thumb .sw.appsw .pill{width:58%;height:11px;border-radius:6px}
.thumb .sw.appsw.split{gap:0}
.thumb .sw.appsw.split .l,.thumb .sw.appsw.split .d{flex:1;height:100%}
.thumb .sw.appsw.split .l{background:#ebdfc4}.thumb .sw.appsw.split .d{background:#241c12}
.thumb .thsub{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:1px;line-height:1.2}
.thumb .mini{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center}
.thumb small{font-size:var(--fs-sm)}

.prof-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;position:relative}
.prof-head .avatar{width:54px;height:54px;border-radius:var(--r-md);border:2px solid var(--accent)}
.prof-head .rating{color:var(--accent)}
.prof-head .name-row{display:flex;align-items:center;gap:8px}
.prof-head .name-row b{font-size:var(--fs-lg)}
.prof-head .pmail{color:var(--muted);font-size:var(--fs-sm);word-break:break-all}
.prof-head .cflag{font-size:var(--fs-lg)}
/* Sequência (v182): discreta, colada na direita e na LINHA DO NOME — daí o align-self:flex-start,
   já que a coluna do nome é mais alta que a chama e o centro do flex desalinharia os dois. */
.streak-mini{display:flex;align-items:center;gap:5px;margin-left:auto;align-self:flex-start;cursor:pointer}
.streak-mini img{width:26px;height:26px;flex:0 0 auto}
.streak-mini .n{font-size:var(--num-l);font-weight:800;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.streak-mini.streak-zero img{filter:grayscale(1) opacity(.5)}
.streak-mini.streak-zero .n{color:var(--muted)}

/* Ações sobre outro jogador (perfil): 3 pontos no canto da linha do nome, onde no meu próprio
   perfil fica a sequência — os dois nunca coexistem. Alvo de toque 44px, como o × dos modais. */
.prof-kebab{align-self:flex-start;color:var(--muted);width:44px;height:44px;margin:0 -11px -22px auto;padding:0}
.prof-kebab .uic{--uic-size:22px}
/* ---- Perfil: painel de estatísticas (v31) ---- */
.prof-head .psince{color:var(--muted);font-size:var(--fs-sm)}
.filters{display:flex;flex-direction:column;gap:8px;margin:2px 0 4px}
.scope1,.scope2{display:flex;gap:7px;overflow-x:auto}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:9px}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 10px;text-align:center}
.stat-card .v{font-size:var(--num-l);font-weight:800;line-height:1.1}
.stat-card .v small{font-size:var(--fs-sm);font-weight:700}
.stat-card .v .up{color:var(--win)}.stat-card .v .down{color:var(--loss)}
.stat-card .k{color:var(--muted);font-size:var(--fs-xs);margin-top:4px;line-height:1.25}
.resbar{display:flex;height:30px;border-radius:7px;overflow:hidden;background:var(--panel2)}
.resbar .seg{display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:700;color:#10100c}
.resbar .win{background:var(--win)}.resbar .draw{background:var(--draw)}.resbar .loss{background:var(--loss)}
.reslab{display:flex;justify-content:space-between;margin-top:9px;font-size:var(--fs-sm);gap:6px}
.reslab b{font-size:var(--fs-base)}
.reslab .lw{color:var(--win)}.reslab .ld{color:var(--draw)}.reslab .ll{color:var(--loss)}
.h2h{margin-bottom:16px;cursor:pointer;transition:border-color .15s}
.h2h:hover{border-color:var(--accent)}
.h2h-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px}
.h2h-ttl{display:flex;align-items:center;gap:7px;font-size:var(--fs-base);font-weight:700}
.h2h-ic{display:inline-flex;color:var(--accent)}
.h2h-ic svg{width:18px;height:18px}.h2h-ic .uic{--uic-size:18px}
.h2h-sub{font-size:var(--fs-sm);color:var(--accent);white-space:nowrap}
.chart-wrap{position:relative;color:var(--accent);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:10px;margin-bottom:14px}
.chart-wrap .chart.rc{width:100%;height:auto;color:var(--accent);display:block;touch-action:pan-y}
.rc-tip{position:absolute;background:var(--accentText);color:var(--ink);border:1px solid var(--accent);border-radius:var(--r-sm);padding:5px 9px;font-size:var(--fs-sm);pointer-events:none;transform:translate(-50%,-130%);white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.4);z-index:5}
.rc-tip.below{transform:translate(-50%,30%)}   /* ponto no alto: o balão vai para baixo dele */
.rc-tip b{color:var(--accent)}
.adv{display:flex;flex-direction:column;gap:8px;margin-top:8px}/* mesmo espaço padrão acima (entre os 3 cards e "Melhor série") */
.adv-row{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px}
.adv-row .ic{width:24px;flex:0 0 auto;color:var(--accent);display:flex;align-items:center;justify-content:center}
.adv-row .ic .uic{--uic-size:20px}
.adv-row .at{flex:1}
.adv-row .at .k{font-size:var(--fs-sm)}
.adv-row .at .s{color:var(--muted);font-size:var(--fs-xs)}
.adv-row .av{font-weight:800;font-size:var(--fs-base)}
/* Calendário da sequência (v181), no modal aberto pelo card. Quatro estados: feito, perdido,
   hoje pendente e SEM REGISTRO — este último é o dia que o app não pode afirmar (anterior ao
   histórico), e por isso é visivelmente mais fraco que o X: não se acusa falha sem prova. */
#streakModal .endtitle{display:flex;flex-direction:column;align-items:center;gap:8px}
.sk-flame{width:64px;height:64px}
.sk-title{font-size:var(--fs-lg);font-weight:700}
.sk-week{display:flex;justify-content:center;gap:8px;margin:14px 0 6px}
.sk-col{display:flex;flex-direction:column;align-items:center;gap:6px}
.sk-wd{font-size:var(--fs-xs);font-weight:700;color:var(--muted);text-transform:uppercase}
.sk-day{width:34px;height:34px;border-radius:var(--r-sm);border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center}
/* Glifo por MÁSCARA, não background-image: os SVGs do catálogo têm fill="#000" e sairiam pretos
   em cima do verde. Com máscara, a cor vem do `color` de cada estado e lê nos dois temas. */
.sk-day::after{content:'';width:56%;height:56%;background:currentColor;
  -webkit-mask:var(--sk-i) center/contain no-repeat;mask:var(--sk-i) center/contain no-repeat}
.sk-day.done{background-color:var(--win);border-color:var(--win);color:#fff;
  --sk-i:url(../assets/ui/check.svg)}
.sk-day.miss{border-color:var(--loss);color:var(--loss);--sk-i:url(../assets/ui/x.svg)}
.sk-day.today::after,.sk-day.unknown::after{display:none}
.sk-day.unknown{border-style:dashed;opacity:.4}
/* `.modal p` já define --fs-lg e ganha de `.sk-hint` por especificidade — daí o id no seletor. */
#streakModal .sk-hint{font-size:var(--fs-sm);color:var(--muted);text-align:center;margin:6px 0 0;line-height:1.4}
/* Modal "Montar meu pacote" (aba Peças): uma linha por peça, os 4 pacotes lado a lado.
   Fundo claro nos ladrilhos (como o .sw.pcs) p/ o Preto & Branco não sumir no painel escuro. */
.piece-picker .endcard{text-align:left;max-width:380px}
.piece-picker .pp-sub{color:var(--muted);font-size:var(--fs-sm);margin:0 0 14px}
.piece-picker .pp-row{margin-bottom:12px}
.piece-picker .pp-lbl{display:block;font-size:var(--fs-sm);color:var(--muted);font-weight:600;margin-bottom:6px}
.piece-picker .pp-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pptile{background:#e9dcc0;border:3px solid transparent;border-radius:var(--r-md);padding:6px 4px 4px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px}
.pptile > div{width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.pptile .ppname{font-size:var(--fs-xs);color:#5d4c33;line-height:1.15;text-align:center}
/* A escolhida tem que gritar: é UMA de quatro em cada linha, e o fundo claro dos ladrilhos come contraste. */
.pptile.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,162,75,.5)}
.pptile.on .ppname{color:#3d3122;font-weight:700}
/* Card da variante no topo das Regras (v135): o título virou só "Regras", então é aqui que fica dito
   a que variante as regras se aplicam. */
.rules .variant-note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-sm);padding:10px 12px;margin:0 0 16px;display:flex;flex-direction:column;gap:2px}
.rules .variant-note b{color:var(--accent);font-size:var(--fs-sm)}
.rules .variant-note span{color:var(--muted);font-size:var(--fs-sm);line-height:1.4}
.avatar-picker .avgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px;max-width:340px}
.avtile{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);padding:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--fs-sm);min-height:58px}
.avtile img{width:100%;height:auto;border-radius:var(--r-sm);display:block}
.avtile.on{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel) inset}
.prof-select{appearance:none;-webkit-appearance:none;background:var(--panel2) var(--select-arrow) no-repeat right 12px center;background-size:11px;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 34px 10px 12px;font-size:var(--fs-base);width:100%}
.edit-name{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px;display:inline-flex;align-items:center}
@media (hover:hover){.edit-name:hover{color:var(--accent)}}.edit-name svg{width:17px;height:17px}.edit-name .uic{--uic-size:17px}
.name-edit{display:flex;flex-direction:column;gap:6px;margin:2px 0}
.name-edit .row{display:flex;gap:6px;align-items:center}
.name-edit input{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);font-size:var(--fs-base);padding:6px 10px;width:170px}
.name-edit input:focus{outline:none;border-color:var(--accent)}
.name-edit button{border:none;border-radius:var(--r-sm);padding:6px 12px;cursor:pointer}
.name-edit .save{background:var(--accent);color:var(--accentText)}.name-edit .cancel{background:var(--panel2);color:var(--ink)}
.name-edit .err{color:var(--danger);font-size:var(--fs-sm);min-height:1px}
.screen.profile{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
.vertodas{display:block;width:100%;max-width:480px;margin:2px auto 6px}
.logout-wrap{margin-top:28px;margin-bottom:8px;display:flex;justify-content:center}
.btn-logout,.btn-del{background:none;border:1px solid var(--line);color:var(--muted);letter-spacing:.5px;font-size:var(--fs-base);padding:10px 22px;border-radius:var(--r-sm);cursor:pointer;transition:.12s}
.btn-logout:hover,.btn-del:hover{border-color:var(--danger);color:var(--danger)}
/* A exclusão já nasce em cor de alerta; o Desconectar só chega lá no hover. */
.btn-del{color:var(--loss)}
.chart-wrap svg{width:100%;height:auto;display:block}
.chart-wrap circle{fill:var(--accent)}
.hist-list{list-style:none;padding:0;margin:8px 0 16px;max-width:480px}
.hist{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line)}
.hist .dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.hist .dot.win{background:var(--win)}.hist .dot.loss{background:var(--loss)}.hist .dot.draw{background:var(--draw)}
.hist .op{flex:1}.hist .dl{color:var(--accent);font-variant-numeric:tabular-nums}.hist .dt{color:var(--muted);font-size:var(--fs-sm)}
.hist.playable{cursor:pointer}
.hist.playable:hover{background:var(--panel2)}
.hist .play{margin-left:8px;color:var(--accent);font-size:var(--fs-sm)}

/* Tela de Regras ilustrada (com movimento animado) */
.screen.rules{max-width:520px}
.rule-cards{display:flex;flex-direction:column;gap:14px;margin:12px 0}
.rule-card h3{margin:0 0 6px;color:var(--accent);font-size:var(--fs-base)}
.rule-card p{margin:0 0 10px;color:var(--ink);font-size:var(--fs-base);line-height:1.45}
.rd-legend{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-size:var(--fs-sm);margin:2px 0 14px}
.rd-legend span{display:inline-flex;align-items:center;gap:6px}
.rd-dot{width:13px;height:13px;border-radius:50%;display:inline-block}
.rd-dot.att{background:var(--atk)}.rd-dot.def{background:var(--def)}.rd-dot.king{background:#d9a23a}
/* Guia rápido (atacante/defensor) ao final das Regras */
.rule-guide{margin:8px 0 4px}
.rg-title{color:var(--accent);font-size:var(--fs-base);margin:0 0 10px}
.rg-block{background:var(--panel);border:1px solid var(--line);border-left-width:4px;border-radius:var(--r-md);padding:13px 16px;margin-bottom:12px}
.rg-block.att{border-left-color:var(--atk)}
.rg-block.def{border-left-color:var(--def)}
.rg-block h4{margin:0 0 3px;font-size:var(--fs-base)}
.rg-block.att h4{color:var(--atk)}
.rg-block.def h4{color:var(--def)}
.rg-sub{margin:0 0 6px;color:var(--muted);font-size:var(--fs-sm);line-height:1.45}
.rg-tip{margin-top:16px}
.rg-tiptext{margin:0;color:var(--ink);font-size:var(--fs-base);line-height:1.45}
.rg-tiptext .rg-num{color:var(--accent);font-weight:700;margin-right:1px}
.rg-tip .rd-wrap{width:min(216px,68%);margin-top:8px}
.rd-dot.mark{background:transparent;border:1.5px solid var(--frame,#5a4326)}
/* paleta fixa do tabuleiro-exemplo (pergaminho), independente do tema do jogador */
.rd-wrap{--rdsq:#e7dabf;--rdsq2:#dccba6;--rdframe:#5a4326;position:relative;width:min(300px,82%);margin:6px auto 0}
.rd-board{position:relative;width:100%;aspect-ratio:1;border:5px solid var(--rdframe);border-radius:6px;
  display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);overflow:hidden}
.rd-cell{position:relative;background:var(--rdsq)} .rd-cell.d{background:var(--rdsq2)}
.rd-cell.mark::after{content:"";position:absolute;inset:18%;border:1.5px solid rgba(90,67,38,.55);border-radius:3px}
.rd-cell.corner::after{border-radius:50%}
.rd-layer{position:absolute;inset:0;pointer-events:none}
.rd-tok{position:absolute;width:7.6%;height:7.6%;border-radius:50%;transform:translate(-50%,-50%);
  transition:left .8s ease,top .8s ease,opacity .45s ease;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.rd-board.reset .rd-tok{transition:none}
.rd-tok.att{background:var(--atk)}.rd-tok.def{background:var(--def)}
.rd-tok.king{background:#d9a23a;width:7.8%;height:7.8%;box-shadow:0 0 0 1.5px #7a5a1f,0 1px 2px rgba(0,0,0,.4)}
.rd-tok.king::after{content:"♔";font-size:var(--fs-xs);color:#1a120b;display:flex;align-items:center;justify-content:center;height:100%}
.rd-tok.gone{opacity:0}
.rd-arrow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.rd-badge{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);background:rgba(26,18,11,.85);
  color:#f0d9a8;font-size:var(--fs-sm);padding:3px 10px;border-radius:var(--r-md);opacity:0;transition:opacity .3s;border:1px solid var(--accent);z-index:2}
.rd-badge.show{opacity:1}

/* Tela Sobre */
.screen.about{max-width:520px;padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
.about .lead{font-size:var(--fs-base)}
.about h3{color:var(--accent);font-size:var(--fs-base);margin:16px 0 6px}
.about .credits{margin:0;padding-left:18px;color:var(--ink)}
.about .credits li{margin:4px 0}
.about a{color:var(--accent)}
.about .changelog{list-style:none;margin:8px 0 16px;padding:0}
.about .changelog li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.about .changelog li b{color:var(--accent);flex:0 0 44px}
.about .changelog li span{color:var(--ink);font-size:var(--fs-base);line-height:1.45}
.about .changelog li em{font-style:normal;font-weight:600;color:var(--accentText);background:var(--accent);border-radius:6px;padding:1px 7px;font-size:var(--fs-xs);margin-right:5px;vertical-align:middle}
.about .dev-credit{color:var(--muted);font-size:var(--fs-base);text-align:center;margin:18px 0 6px}
.about .credits-link{text-align:center;margin:0 0 20px;font-size:var(--fs-sm)}
.about .credits-link a{color:var(--accent)}
/* Bloco de versão (rodapé de Sobre): tudo centralizado, hierarquia versão > build > crédito */
.about .upd-ver{font-size:17px;font-weight:600;text-align:center;color:var(--ink);margin:22px 0 2px;padding-top:16px;border-top:1px solid var(--line)}
.about .upd-ver b{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.about .upd-build{text-align:center;color:var(--muted);font-size:14px;margin:0 0 16px;font-variant-numeric:tabular-nums}

/* Toggles da aba Efeitos */
/* Aba Efeitos (Som/Animação/Coordenadas): mesma pilha de switches da aba Conta — o .ns-toggle é
   o padrão único de switch do app; o antigo cartão-com-switch (.thumb.toggle) morreu na v135. */
.fx-list{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;text-align:left}
.switch{display:inline-block;width:46px;height:26px;border-radius:var(--r-pill);background:#9a8e78;position:relative;transition:background .15s}
.switch.on{background:#3a7d44}
.switch i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.switch.on i{left:23px}

/* v11 — painel do treinador */
.coach{margin:0 auto 4px;max-width:520px;padding:0 10px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;text-align:center;min-height:68px}
.coach-acts{display:flex;gap:8px;justify-content:center}
.coach-acts .act{white-space:nowrap}

/* v14 — Revisão da partida */
/* Tela compacta: tudo cabe sem rolar; o tabuleiro encolhe pro que sobra de altura. */
.screen.review { max-width: 520px; margin: 0 auto; padding: 0 12px 12px; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; }
.screen.review .set-head { margin-bottom: 8px; }
.review #boardHost { display: flex; justify-content: center; }
.review .board-frame { width: min(92vw, calc(100dvh - 30rem)); margin: 0 auto; }
.rev-progress { text-align: center; color: var(--muted); padding: 28px 0; font-size:var(--fs-base); }
.rev-summary { background: var(--panel); border: 1px solid var(--line); border-radius:var(--r-md); padding: 8px 12px; margin-bottom: 8px; }
.rev-summary .res { font-size:var(--fs-base); font-weight: 600; }
.rev-summary .acc { display: flex; gap: 16px; margin-top: 4px; font-size:var(--fs-sm); color: var(--muted); flex-wrap: wrap; }
.rev-summary .acc b { color: var(--ink); font-variant-numeric: tabular-nums; }
.review .movechip { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; font-size:var(--fs-base); }
.review .movechip .badge { font-size:var(--fs-lg); }
/* Selo do nível 3 (v134): ⏳ enquanto o motor repensa a posição, 🔎 quando o veredicto é o profundo. */
.review .movechip .deepmark { font-size:var(--fs-sm); margin-left: 4px; opacity: .85; }
.review .movechip .deepmark.pending { animation: deeppulse 1.1s ease-in-out infinite; }
@keyframes deeppulse { 0%,100% { opacity:.35 } 50% { opacity:.9 } }
@media (prefers-reduced-motion: reduce) { .review .movechip .deepmark.pending { animation: none } }
.review .movechip .lbl { font-weight: 600; }
/* Rótulo da categoria do lance = pílula com fundo colorido (estilo chess.com). */
.review .movechip .cat { margin-left: auto; font-weight: 700; font-size:var(--fs-sm); padding: 3px 11px; border-radius:var(--r-pill); color: #1a120b; white-space: nowrap; }
.cat.melhor, .cat.bom, .cat.unico { background: #7fae8f; }
.cat.imprecisao { background: #e0b25a; }
.cat.erro, .cat.capivara, .cat.chance_perdida { background: #e07a5f; }
.cat.brilhante { background: #7cc1ec; }
.cat.forcado, .cat.neutro { background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }
.evalwrap { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius:var(--r-sm); padding: 6px; margin-bottom: 8px; }
.evalwrap svg.eval { display: block; width: 100%; height: 64px; }
.evalwrap .marker { position: absolute; top: 6px; bottom: 6px; width: 2px; background: var(--sel); opacity: .9; pointer-events: none; }

/* Revisão — fase carregando */
.rev-board { margin-bottom: 8px; }
.rev-load { background: var(--panel); border: 1px solid var(--line); border-radius:var(--r-md); padding: 10px 12px; }
.rev-load-lab { display: flex; justify-content: space-between; font-size:var(--fs-sm); margin-bottom: 6px; }
.rev-load-lab span { color: var(--muted); }
.rev-load-lab b { font-variant-numeric: tabular-nums; }
.rev-bar { height: 9px; border-radius: 6px; background: var(--panel2); overflow: hidden; }
.rev-bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--sel)); transition: width .25s ease; }

/* Revisão — relatório: jogadores */
.review .players { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 6px; }
.review .pcard { background: var(--panel); border: 1px solid var(--line); border-radius:var(--r-md); padding: 10px; text-align: center; }
.review .pcard.me { border-color: var(--sel); box-shadow: 0 0 0 2px rgba(224,162,74,.18); }
.review .pcard .avatar { width: 42px; height: 42px; border-radius:var(--r-sm); margin: 0 auto 6px; display: block; }
.review .pcard .nm { font-size:var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review .pcard .sub { font-size:var(--fs-xs); color: var(--muted); }
.review .pcard .prec { margin-top: 6px; font-size: var(--num-l); font-weight: 800; font-variant-numeric: tabular-nums; }
.review .pcard.attackers .prec { color: var(--accent); }
.review .pcard.defenders .prec { color: var(--ink); }
.review .pcard .preclab { font-size:var(--fs-xs); color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }

/* Revisão — relatório: categorias */
.review .cats { background: var(--panel); border: 1px solid var(--line); border-radius:var(--r-md); padding: 4px 10px; margin-bottom: 12px; }
.review .cats .cr { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.review .cats .cr:last-child { border-bottom: 0; }
.review .cats .cr .a { text-align: right; font-weight: 700; }
.review .cats .cr .b { text-align: left; font-weight: 700; }
.review .cats .cr .m { display: flex; align-items: center; gap: 6px; justify-content: center; color: var(--muted); font-size:var(--fs-sm); min-width: 150px; }
.review .cats .cr .m .e { font-size:var(--fs-base); }
.review .cats .cat-more { text-align: center; color: var(--muted); font-size:var(--fs-sm); padding: 7px 0 5px; cursor: pointer; }

/* Revisão — relatório: ações */
.review .cta { display: block; width: 100%; background: var(--accent); color: var(--accentText); border: none; border-radius:var(--r-md); padding: 13px; font-size:var(--fs-base); font-weight: 700; cursor: pointer; margin-bottom: 8px; }
.review .rev-report-acts { display: flex; gap: 8px; }
/* Compartilhar/Exportar no mesmo peso/tamanho do padrão (o .act base é fs-sm + letter-spacing, fica fino) */
.review .rev-report-acts .act { font-size: var(--fs-base); font-weight: 600; letter-spacing: 0; padding: 11px; }
.review .rev-report-acts + .rev-report-acts{margin-top:8px}
.review .rev-report-acts .act:disabled{opacity:.55;pointer-events:none}

/* Revisão — passo a passo: balão do treinador */
.review .movechip { display: flex; gap: 10px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius:var(--r-md); padding: 10px; margin: 8px 0; min-height: 20px; }
.review .movechip .coach-av { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.review .movechip .coach-txt { font-size:var(--fs-sm); line-height: 1.35; }
.review .movechip .coach-txt .cn { font-weight: 700; }
.review .movechip .coach-txt .cn .e { margin-right: 4px; }
.review .movechip .lbl { color: var(--muted); font-size:var(--fs-sm); }

/* Revisão — lista recolhível */
.review .discl { background: var(--panel); border: 1px solid var(--line); border-radius:var(--r-md); overflow: hidden; margin-top: 8px; }
.review .discl > summary { list-style: none; cursor: pointer; padding: 11px 12px; display: flex; align-items: center; gap: 8px; font-size:var(--fs-sm); font-weight: 600; }
.review .discl > summary::-webkit-details-marker { display: none; }
.review .discl > summary .chev { margin-left: auto; color: var(--muted); display: inline-flex; transition: transform .15s; }
.review .discl[open] > summary .chev { transform: rotate(180deg); }
.review .discl .discl-body { padding: 0 6px 8px; }
/* v123: na fase de replay a gaveta de Lances anotados abre sempre (atributo `open`) e o #movelist
   (que já é o container rolável, max-height 84px por padrão) é esticado até o fim da tela por JS
   (fitDrawer, review.js) — a lista rola dentro, a página não. Feito por JS porque o teto útil
   depende da altura do tabuleiro/movechip, que variam. */
.review .nav { display: flex; justify-content: center; align-items: center; gap: 8px; }
.review .nav button { width: 52px; height: 42px; border-radius:var(--r-sm); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size:var(--fs-lg); cursor: pointer; }
.review .nav .ply { min-width: 84px; text-align: center; color: var(--muted); font-size:var(--fs-base); }

/* v16 — compartilhar */
.share-row { display: flex; justify-content: center; margin-bottom: 8px; }
.share-row .act { padding: 7px 14px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius:var(--r-sm); padding: 8px 14px; font-size:var(--fs-base); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 80; }
.toast.show { opacity: 1; }
/* toast pequeno sobe pra ficar ACIMA da barra inferior (~56px) sem tampar os ícones do menu */
.toast-float { z-index: 120; max-width: 86vw; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,.4);
  bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
.toast-float .toast-ic { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin-right: 7px; }
/* Aviso comemorativo (importante): card grande centralizado, some em ~5s ou ao tocar */
.toast-cel { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .22s; z-index: 130; }
.toast-cel.show { opacity: 1; }
.toast-cel .cel-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 30px 32px; text-align: center; max-width: 88vw; min-width: 240px; box-shadow: 0 14px 44px rgba(0,0,0,.5); transform: scale(.94); transition: transform .22s; }
.toast-cel.show .cel-card { transform: scale(1); }
.toast-cel .cel-ic { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: 0 auto 12px; }
.toast-cel img.cel-ic { object-fit: contain; }
.toast-cel .cel-title { font-size: var(--fs-lg); font-weight: 700; color: var(--accent); text-wrap: balance; }
.toast-cel .cel-sub { margin-top: 6px; color: var(--muted); font-size: var(--fs-base); }
.toast-cel .cel-sub2 { margin-top: 3px; color: var(--muted); font-size: var(--fs-sm); }
.toast-cel .cel-hint { margin-top: 16px; font-size: var(--fs-sm); color: var(--muted); opacity: .75; }
/* card de conquista: nome em destaque (não afeta sequência/missões, que usam .cel-sub padrão) */
.toast-cel.cel-ach .cel-sub { color: var(--ink); font-weight: 600; }
.toast-cel.cel-ach .cel-sub2 { display: flex; align-items: center; justify-content: center; gap: 6px; }
.cel-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.4); }
.cel-dot.gold { background: var(--gold); } .cel-dot.silver { background: var(--silver); } .cel-dot.bronze { background: var(--bronze); }
.ns-toggle { display: flex; align-items: center; gap: 10px; background: none; border: none; color: var(--ink); cursor: pointer; font: inherit; text-align: left; padding: 2px 0; }
.ns-toggle small { color: var(--ink); }   /* o rótulo do switch é texto de leitura, não legenda (v135) */
.ns-toggle .ns-txt { display: flex; flex-direction: column; gap: 1px; }
.ns-toggle .ns-sub { font-size: var(--fs-xs); color: var(--muted); line-height: 1.25; }

/* v17 — lista de lances */
#movelist { max-height: 84px; overflow: auto; }
.ml-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size:var(--fs-base); font-variant-numeric: tabular-nums; }
.ml-table .num { color: var(--muted); width: 30px; padding: 2px 4px; }
.ml-table .mv { padding: 3px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-table .mv:hover { background: var(--panel2); }
.ml-table .mv.on { background: var(--panel2); outline: 1px solid var(--sel); }
.ml-table .mv.empty { cursor: default; }
/* v159: cabeçalho nomeando quem fez cada lance (atacante à esquerda, defensor à direita). */
.ml-table thead th { font-size: var(--fs-sm); font-weight: 600; text-align: left; padding: 1px 6px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-table thead th.num { padding: 0; }
.ml-table thead th.atk { color: var(--atk); }
.ml-table thead th.def { color: var(--def); }
.ml-empty { color: var(--muted); text-align: center; padding: 8px 0; }

/* v18 — seletor de tempo */
.tm-row { display: flex; gap: 8px; margin: 8px 0 12px; }
.tm { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: var(--panel); border: 1px solid var(--line); border-radius:var(--r-sm); color: var(--ink); cursor: pointer; font-size:var(--fs-base); }
.tm small { color: var(--muted); font-size:var(--fs-xs); }
.tm.on { border-color: var(--sel); background: var(--panel2); }

/* v22 — login e-mail/senha */
.screen.login { max-width: 520px; margin: 0 auto; }
.login-king { display:block; width:64px; height:64px; margin:6px auto 14px; }
.lg-tabs { display:flex; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:4px; margin-bottom:16px; }
.lg-tab { flex:1; padding:9px; border:none; background:none; border-radius:7px; font-family:inherit; font-size:var(--fs-base); font-weight:500; color:var(--muted); cursor:pointer; }
.lg-tab.on { background:var(--accent); color:var(--accentText); }
.lg-field { margin-bottom:13px; }
.lg-field label { display:block; font-size:var(--fs-sm); color:var(--muted); margin-bottom:5px; }
.lg-field input { width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink); font-family:inherit; font-size:var(--fs-base); padding:11px 12px; }
.lg-field input::placeholder { color:#7a6450; }
.lg-inp { position:relative; }
.lg-inp input { padding-right:42px; }
.lg-eye { position:absolute; right:2px; top:50%; transform:translateY(-50%); width:44px; height:44px; border:none; background:none; cursor:pointer; font-size:var(--fs-base); }
.lg-forgot { display:block; text-align:right; font-size:var(--fs-sm); color:var(--sel); margin:-4px 0 14px; text-decoration:none; }
.lg-go { width:100%; margin-top:2px; background:var(--accent); color:var(--accentText); border:none; border-radius:var(--r-sm); font-family:inherit; font-size:var(--fs-base); font-weight:500; padding:12px; cursor:pointer; }
.lg-go:disabled { opacity:.6; cursor:default; }
.lg-or { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:var(--fs-sm); margin:16px 0; }
.lg-or::before, .lg-or::after { content:""; flex:1; height:1px; background:var(--line); }
.lg-google { width:100%; display:flex; align-items:center; justify-content:center; gap:9px; background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-sm); font-family:inherit; font-size:var(--fs-base); font-weight:500; padding:11px; cursor:pointer; }
.lg-google svg { width:18px; height:18px; }
.lg-err { background:rgba(207,91,58,.14); border:1px solid var(--danger); color:#f0b6a3; font-size:var(--fs-sm); padding:9px 11px; border-radius:var(--r-sm); margin-bottom:13px; }
.lg-err.ok { background:rgba(120,190,110,.14); border-color:#6fae62; color:#a9d99b; }
.lg-forgot.disabled { opacity:.5; pointer-events:none; }
/* margem INFERIOR 14px, o mesmo vao dos outros blocos do topo da Home. Com 0 aqui, o que
   vinha depois (o cartao de instalar, ou o botao Jogar) encostava — o .tab-body e bloco comum,
   sem gap, entao o espacamento vem so das margens. */
.verify-banner { background:rgba(189,122,58,.14); border:1px solid var(--accent); color:#e8c89c; font-size:var(--fs-sm); padding:9px 11px; border-radius:var(--r-sm); margin:10px 0 14px; line-height:1.4; }
.verify-banner a { color:var(--sel); cursor:pointer; }

/* Banner "Instalar o app" (PWA) — aparece no menu quando instalável; mesmas métricas de .menu-row */
.install-banner{display:flex;align-items:center;gap:14px;padding:11px 16px;border-radius:var(--r-md);cursor:pointer;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(189,122,58,.20),rgba(120,78,28,.20));border:1px solid var(--accent)}
.install-banner .ic{width:30px;flex:0 0 auto;color:var(--accent);display:flex;align-items:center;justify-content:center}
.install-banner .ic svg{width:24px;height:24px}
.install-banner .ic .uic{--uic-size:24px}
.install-banner .txt{font-size:var(--fs-base);font-weight:600;line-height:1.2;color:var(--ink)}
.install-banner .txt small{display:block;font-weight:400;font-size:var(--fs-sm);color:var(--muted);margin-top:1px}
/* ✕ em SVG de traço fino, no tamanho/espessura da seta (.chev), à mesma distância da borda direita (padding 16px, sem padding próprio à direita) */
.install-banner .x{margin-left:auto;flex:0 0 auto;background:none;border:none;color:var(--muted);line-height:0;cursor:pointer;padding:6px 0 6px 12px;display:flex;align-items:center}
.install-banner .x svg{width:24px;height:24px}
@media (hover:hover){ .install-banner:hover{border-color:var(--sel)} .install-banner .x:hover{color:var(--ink)} }
.install-banner:active{transform:scale(.99)}

/* Instruções de instalação no iPhone/iPad */
.ios-card{text-align:left;max-width:340px;padding:22px 22px 22px}
.ios-h{font-size:var(--fs-base);font-weight:700;margin-bottom:4px}
.ios-p{font-size:var(--fs-sm);color:var(--muted);margin:0 0 14px;line-height:1.4}
.ios-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.ios-steps li{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-base);line-height:1.35;color:var(--ink)}
.ios-steps .ios-n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#211606;font-weight:700;font-size:var(--fs-sm);display:flex;align-items:center;justify-content:center}
.ios-steps b{color:var(--ink)}
.ios-ic{display:inline-flex;width:16px;height:16px;vertical-align:-3px;color:var(--accent)}
.ios-ic svg{width:100%;height:100%}.ios-ic .uic{--uic-size:100%}

/* Chat rápido online */
.gp-fbtn{position:relative}
/* balão ancorado NA barra: pendura abaixo (adversário, topo) / acima (eu, rodapé) — no espaço entre o nome e o tabuleiro, sem cobrir o nome */
.gp-bar .chat-bubble{position:absolute;left:12px;background:var(--panel);border:1px solid var(--accent);color:var(--ink);border-radius:var(--r-md);padding:7px 12px;font-size:var(--fs-base);max-width:72%;box-shadow:0 6px 16px rgba(0,0,0,.45);z-index:30}
.gp-bar .chat-bubble.top{top:calc(100% - 3px)}
.gp-bar .chat-bubble.top::after{content:'';position:absolute;left:18px;top:-7px;border:7px solid transparent;border-bottom-color:var(--accent)}
.gp-bar .chat-bubble.bot{bottom:calc(100% - 3px)}
.gp-bar .chat-bubble.bot::after{content:'';position:absolute;left:18px;bottom:-7px;border:7px solid transparent;border-top-color:var(--accent)}
.gp-bar .chat-bubble.emo{font-size:var(--fs-xl);padding:5px 12px}
.chat-wrap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(0,0,0,.4);z-index:45}
.chat-sheet{background:var(--panel);border-top:1px solid var(--line);border-radius:var(--r-md) var(--r-md) 0 0;padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 24px rgba(0,0,0,.45)}
.chat-sheet .cs-head{display:flex;align-items:center;margin-bottom:10px}
.chat-sheet .cs-head b{font-size:var(--fs-sm);letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.chat-sheet .cs-x{margin-left:auto;background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer}
.chat-emotes{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:12px}
.chat-emotes .ce{font-size:var(--fs-xl);background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 0;cursor:pointer}
.chat-emotes .ce:active{background:var(--accent)}
.chat-phrases{display:flex;flex-wrap:wrap;gap:7px}
.chat-phrases .cp{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-pill);padding:8px 14px;font-size:var(--fs-sm);cursor:pointer}
.chat-phrases .cp:active{background:var(--accent);color:var(--accentText)}

/* Ranking */
.screen.ranking #rkControls { margin: 8px 0; }
.rk-list { display: flex; flex-direction: column; gap: 4px; }
#rkMore { margin-top: 12px; }
.linklike { background: none; border: none; color: var(--accent, #c89b3c); text-decoration: underline; cursor: pointer; padding: 0; }

/* Cards expansíveis no menu — gaveta conectada (Jogar / Missões Diárias) */
.nav-card .mcount{margin-left:auto;font-size:var(--fs-sm);font-weight:700;color:var(--muted);padding:1px 9px;border:1px solid var(--line);border-radius:var(--r-pill)}
.nav-card.exp-toggle .lbl{flex:1}   /* rótulo do acordeão ocupa o espaço (como no antigo menu-row) */
/* o wrap é UM item da .menu-list: o gap (10px) fica igual acima e abaixo, aberto ou fechado */
.jwrap{display:flex;flex-direction:column}
.jwrap .exp-toggle{transition:border-radius .15s,background .15s;margin-bottom:0}
/* fechado = igual aos demais; ABERTO = preenchido (laranja), como o Jogar era antes */
.jwrap.open .exp-toggle{border-bottom-left-radius:0;border-bottom-right-radius:0;background:var(--accent);border-color:var(--accent);color:var(--accentText)}
.jwrap.open .exp-toggle .ic{color:var(--accentText)}
.jwrap.open .exp-toggle .chev{color:var(--accentText);opacity:.85}
.jwrap.open .exp-toggle .mcount{color:var(--accentText)}
/* card recolhido mostra a seta para baixo; expandido, para cima (SVGs distintos, sem rotacionar) */
.chev.exp{display:inline-flex;align-items:center}
.chev.exp .cd{display:inline-flex;align-items:center;line-height:0}
.chev.exp .cu{display:none;align-items:center;line-height:0}
.chev.exp .uic{--uic-size:22px}
.jwrap.open .chev.exp .cd{display:none}
.jwrap.open .chev.exp .cu{display:inline-flex}
.exp-panel{max-height:0;overflow:hidden;transition:max-height .34s ease}
.jwrap.open .exp-panel{max-height:520px}
/* a gaveta "sai" do botão: fundo mais escuro, cantos de cima retos, conectada */
.drawer{background:var(--panel2);border:1px solid var(--line);border-top:none;border-radius:0 0 var(--r-md) var(--r-md);padding:7px;display:flex;flex-direction:column;gap:6px}
.menu-opt{display:flex;align-items:center;gap:13px;width:100%;padding:12px 13px;border-radius:var(--r-sm);background:transparent;border:none;color:var(--ink);font:inherit;font-size:var(--fs-base);text-align:left;cursor:pointer}
@media (hover:hover){.menu-opt:hover{background:var(--panel)}}
.menu-opt .ic{width:22px;height:22px;flex:0 0 auto;color:var(--accent);display:grid;place-items:center}
.menu-opt .ic svg{width:22px;height:22px}.menu-opt .ic .uic{--uic-size:22px}
.menu-opt .lbl{flex:1;font-weight:600}
.menu-opt .chev{color:var(--muted);display:inline-flex;align-items:center;line-height:0;margin-right:-3px}
.menu-opt .chev svg{width:18px;height:18px;display:block}.menu-opt .chev .uic{--uic-size:18px}
.menu-opt .lock{font-size:var(--fs-base);margin-left:auto}
/* sem o flash AZUL de toque (mobile) e feedback igual aos botões de rodapé das partidas (.gp-fbtn:active).
   O gráfico de rating é um <svg> clicável que NÃO é botão — por isso entra na lista explicitamente. */
.menu-opt,.mi,.acct,button,[role="button"],.chart-wrap svg{-webkit-tap-highlight-color:transparent}
.menu-opt:active{background:var(--accent);color:var(--accentText);transform:scale(.98)}
.menu-opt:active .ic{color:var(--accentText)}
.mi:active{transform:scale(.98)}
/* remove o anel só quando NÃO é foco de teclado (mata o anel preso do tap no iOS, preserva teclado no desktop) */
.nav-card:focus:not(:focus-visible),.menu-opt:focus:not(:focus-visible),.mi:focus:not(:focus-visible),.acct:focus:not(:focus-visible){outline:none}
/* Anel de foco de TECLADO visível e consistente (a11y). Elementos com foco próprio (.thumb.toggle etc.) vencem por especificidade. */
button:focus-visible,a:focus-visible,summary:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible,.cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mi{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:9px;width:100%;text-align:left;color:inherit;cursor:pointer}
.mi-board{width:72px;height:72px;flex:0 0 auto;border-radius:0;overflow:hidden;display:block}
.mi-board .board-frame{width:72px;height:72px;padding:1px;border-radius:0;border-width:3px}
.mi-board #board{width:100%;height:100%}
.mi-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mi-title{font-size:var(--fs-md);font-weight:600;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi-sub{font-size:var(--fs-sm);font-weight:500;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi-icon{display:flex;align-items:center;margin-top:4px;color:var(--accent)}
.mi-icon img{width:27px;height:27px;border-radius:6px}
.mi-icon svg{width:23px;height:23px}
.mi-check{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center}
.mi-check svg{width:20px;height:20px}
.mi-check .uic{--uic-size:20px}
.mi-check.todo{color:#bcb29a}
/* exercício de AULA ainda não feito: círculo vazio neutro (não o X). Escopado à tela Aulas p/ não
   afetar as Missões Diárias, que continuam com o X quando não feitas. */
.aulas .mi-check.todo::before{content:'';width:15px;height:15px;border:2px solid currentColor;border-radius:50%;opacity:.65}
.mi-check.done{color:var(--win,#6aa15a)}

/* Card de Missões sempre visível (sem gaveta): caixa única (--panel) definida no grupo-cartao acima; missões flat dentro */
/* Mesma métrica do .playbtn-home / .nav-card (15px de margem, ícone de 24, respiro de 12): o ícone e o
   título das Missões têm que cair na MESMA coluna de Jogar e Ranking, que ficam logo acima e abaixo.
   A .mi.flat perde a borda (era transparente, mas empurrava o tabuleiro 1px) pelo mesmo motivo. */
.mgroup .mhead{display:flex;align-items:center;gap:12px;padding:14px 15px;color:var(--ink);font-size:var(--fs-base)}
.mgroup .mhead .mic{width:24px;height:24px;flex:0 0 auto;color:var(--accent);display:flex;align-items:center;justify-content:center}
.mgroup .mhead .mic .uic{--uic-size:24px}
.mgroup .mhead .mtitle{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgroup .mi.flat{background:transparent;border:0;border-radius:0;padding:9px 15px}
.mgroup .mi-info{align-self:stretch}            /* texto no topo, alinhado com o tabuleiro */
/* chip compacto da sequência: só 🔥 + número, menor */
.schip{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.schip .flame{width:15px;height:15px}
.schip .n{font-size:var(--fs-base);line-height:1}
.schip.zero{filter:grayscale(1);opacity:.55}   /* sem sequência: cinza com 0 */

/* ===== Conquistas (medalhas) ===== */
.medal{position:relative;width:54px;height:54px;border-radius:50%;flex:0 0 auto;aspect-ratio:1/1}
.medal.med-big{width:78px;height:78px}
.med-ring{position:absolute;inset:0;border-radius:50%;padding:3px}
/* borda sólida na cor de cada medalha (mesma cor do badge .med-tier / .ach-dot) */
.medal.bronze .med-ring{background:var(--bronze)}
.medal.silver .med-ring{background:var(--silver)}
.medal.gold .med-ring{background:var(--gold)}
.medal.locked .med-ring{background:#3a3122}
.med-face{position:absolute;inset:3px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;overflow:hidden}
.med-face img{transform-origin:center}
.med-face .mf-bot{width:100%;height:100%;object-fit:cover;object-position:top}
.med-face .mf-icon{width:74%;height:74%;object-fit:contain}
.medal.locked .med-face{filter:grayscale(1) brightness(.5)}
.med-tier{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);font-size:var(--fs-xs);font-weight:700;padding:2px 7px;border-radius:var(--r-sm);color:#1a120b;white-space:nowrap;text-transform:uppercase}
.medal.bronze .med-tier{background:var(--bronze)}
.medal.silver .med-tier{background:var(--silver)}
.medal.gold .med-tier{background:var(--gold)}
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px;margin-bottom:8px}
.ach-cell{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:4px;border-radius:var(--r-md)}
@media (hover:hover){.ach-cell:hover{background:var(--panel2)}}
.ach-nm{font-size:var(--fs-sm);font-weight:600;line-height:1.2}
.ach-pwrap{width:100%}
.ach-bar{height:6px;border-radius:4px;background:#3a3122;overflow:hidden}
.ach-bar>i{display:block;height:100%;background:var(--accent)}
.ach-meta{font-size:var(--fs-xs);color:var(--muted);margin-top:4px}
.ach-mmedal{display:flex;justify-content:center;margin:2px 0 12px}
.ach-mnm{font-size:var(--fs-lg);font-weight:700;text-align:center}
.ach-mex{font-size:var(--fs-md);color:var(--muted);text-align:center;margin:4px 0 14px}
.ach-mprog{width:100%;text-align:center;margin:0 0 18px}
.ach-mprog .ach-meta{margin-top:6px}
.ach-levels{display:flex;flex-direction:column;gap:12px;text-align:left}
.ach-lv{display:flex;align-items:center;gap:12px}
.ach-lv .ach-dot{width:18px;height:18px;border-radius:50%;border:2px solid rgba(0,0,0,.45);flex:0 0 auto}
.ach-lv .ach-lt{flex:1;font-size:var(--fs-base);font-weight:600}
.ach-lv .ach-lr{font-size:var(--fs-sm);color:var(--muted)}
.ach-lv.done .ach-lr{color:#9bce6b}
.ach-lv.todo{opacity:.5}
.ach-dot.gold{background:var(--gold)}.ach-dot.silver{background:var(--silver)}.ach-dot.bronze{background:var(--bronze)}
/* "+ Ver todas" das conquistas + "+ Ver todas as partidas": estilo do "+ Atualizações anteriores" (Sobre), texto pequeno */
.morelink{background:none;border:none;cursor:pointer;color:var(--accent);font-size:var(--fs-sm);font-weight:600;display:inline-flex;align-items:center;gap:8px;padding:2px 0;margin:2px 0 10px}
.morelink::before{content:'+';display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid var(--line);border-radius:5px;font-size:var(--fs-base);line-height:1}

/* ===== Aulas ===== */
/* lista de temas (acordeão) */
.screen.aulas .nav-card .ic.aula-num{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-base);color:var(--accent)}
/* gaveta aberta: fundo vira laranja → o número usa a cor de contraste p/ não sumir */
.screen.aulas .jwrap.open .exp-toggle .ic.aula-num{color:var(--accentText)}
.screen.aulas .chev{display:inline-flex;align-items:center;color:var(--muted);transition:transform .2s}
.screen.aulas .chev svg{width:20px;height:20px}.screen.aulas .chev .uic{--uic-size:20px}
.screen.aulas .jwrap.open .exp-toggle .chev{transform:rotate(180deg)}
/* (contador "x/y" das Aulas compartilha o balão .nav-card .mcount) */
/* gaveta de Aulas pode ser alta (8+ exercícios): libera a altura e deixa o #app rolar */
.screen.aulas .jwrap.open .exp-panel{max-height:2000px}
/* player do exercício — estilo lição (status no balão, barra de progresso, botões coloridos) */
.aula-ex .gp-top .aula-title{font-size:var(--fs-base);letter-spacing:.2px;text-transform:none;font-weight:700}
/* alturas FIXAS do balão e da barra de ações + reserva própria do tabuleiro → ele nunca sobe/desce */
.aula-ex .gp-coach{height:128px;align-items:center}
.aula-ex .gp-coach .char{width:64px;height:64px}
.aula-ex .gp-coach .char .coach-av{width:100%;height:100%;object-fit:contain;display:block}
.screen.aula-ex .gp-board .board-frame{width:min(95vw, calc(100dvh - 20rem))}
.aula-ex .gp-bub-head{display:flex;align-items:center;gap:7px;font-weight:800;font-size:var(--fs-base);margin-bottom:4px}
.aula-ex .gp-bub-head .bh-ic{display:inline-flex;align-items:center}
.aula-ex .gp-bub-head .bh-ic svg{width:20px;height:20px;display:block}.aula-ex .gp-bub-head .bh-ic .uic{--uic-size:20px}
.aula-ex .gp-bub-body{font-size:var(--fs-md);line-height:1.38}
.aula-ex .gp-bubble.play .gp-bub-head{color:#8a6d3b}
.aula-ex .gp-bubble.ok .gp-bub-head{color:#2e7d32}
.aula-ex .gp-bubble.fail .gp-bub-head{color:var(--loss)}
.aula-ex .gp-bubble.warn .gp-bub-body{color:var(--loss);font-weight:600}
.aula-ex .aula-prog{padding:8px 14px 2px;flex:0 0 auto}
.aula-ex .aula-prog-label{font-weight:800;font-size:var(--fs-base);margin-bottom:6px}
.aula-ex .aula-prog-bar{height:9px;border-radius:6px;background:rgba(128,128,128,.25);overflow:hidden}
.aula-ex .aula-prog-bar span{display:block;height:100%;border-radius:6px;background:var(--accent);transition:width .3s}
.aula-ex .aula-actions{display:flex;gap:10px;align-items:center;justify-content:center;padding:8px 14px;height:78px;flex:0 0 auto}
.aula-ex .aula-btn{flex:1;border:none;border-radius:var(--r-md);padding:14px;font-size:var(--fs-base);font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.aula-ex .aula-btn svg{width:20px;height:20px;flex:0 0 auto}.aula-ex .aula-btn .uic{--uic-size:20px}
.aula-ex .aula-btn.repeat{background:#e0392b;color:#fff}
/* Dica completa (nível 2): não há mais o que revelar → botão inerte, sem sumir (evita pulo do layout) */
.aula-ex .aula-btn:disabled{opacity:.5;cursor:default}
.aula-ex .aula-btn.next{background:var(--accent);color:var(--accentText)}
.aula-ex .aula-btn.hint{flex:0 0 auto;background:transparent;color:var(--accent);border:1.5px solid var(--accent);font-weight:700;padding:11px 22px;gap:9px}
.aula-ex .aula-btn.hint .hint-ic{width:22px;height:22px;display:block;flex:0 0 auto}
@media (hover:hover){.aula-ex .aula-btn.repeat:hover{background:#c8301f}.aula-ex .aula-btn.next:hover{filter:brightness(.94)}.aula-ex .aula-btn.hint:hover{background:rgba(205,138,72,.12)}}
/* modal de introdução do tema (1ª aula de cada tema) */
.aula-intro .endcard{max-width:420px}
.aula-intro .ai-num{font-size:var(--fs-sm);font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.aula-intro .ai-title{margin:4px 0 12px;color:var(--accent);font-size:var(--fs-lg)}
.aula-intro .ai-intro{font-size:var(--fs-base);line-height:1.5;margin:0 0 18px;text-align:left}

/* Modo espectador — lista de partidas ao vivo */
.livelist{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.live-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);background:var(--panel2);border:1px solid var(--line);cursor:pointer}
.live-row:hover{border-color:var(--accent)}
.live-row .vs{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.live-row .ln{display:flex;align-items:center;gap:6px;font-size:var(--fs-base)}
.live-row .ln .rt{color:var(--accent);font-size:var(--fs-sm)}
.livedot{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(224,72,58,.6);animation:livepulse 1.6s infinite;flex:none}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(224,72,58,.6)}70%{box-shadow:0 0 0 7px rgba(224,72,58,0)}100%{box-shadow:0 0 0 0 rgba(224,72,58,0)}}
.watchbtn{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:var(--r-sm);padding:4px 10px;cursor:pointer;font-size:var(--fs-sm);white-space:nowrap;flex:none}
@media (hover:hover){.watchbtn:hover{border-color:var(--accent);color:var(--accent)}}

/* Bolinha "ao vivo" no canto do espectador (alinhada ao gp-top) */
/* (bolinha "ao vivo" do espectador agora vive no slot direito do cabeçalho: .gp-top .gp-live-dot) */

/* Sala — botão de partidas ao vivo + títulos de seção */
.toplive{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:10px 0 4px;padding:11px;border-radius:var(--r-sm);background:var(--banner-brown);border:1px solid #7a5320;color:#ffdca6;font-weight:600;font-size:var(--fs-base);cursor:pointer}
.toplive:hover{border-color:#d98a2b}
.toplive .toplive-ic{width:20px;height:20px;object-fit:contain;vertical-align:middle}
.toplive .livecount{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-md);background:rgba(255,220,166,.18);font-size:var(--fs-sm)}
.secttl{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.1em;opacity:.55;margin:14px 0 4px}
.lobby-item .watchbtn{margin-left:6px}

/* Aulas — cartão de progresso geral + botão "Continuar" (item C) */
.aula-progress{margin-bottom:14px}
.aula-progress .ap-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.aula-progress .ap-n{font-size:var(--fs-base);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.aula-progress .ap-bar{height:9px;border-radius:var(--r-pill);background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.aula-progress .ap-bar>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--move);transition:width .3s}
.aula-continue{display:flex;align-items:center;gap:12px;width:100%;margin-top:13px;background:var(--accent);border:1px solid var(--accent);color:var(--accentText);border-radius:var(--r-md);padding:12px 14px;font:inherit;cursor:pointer;text-align:left}
.aula-continue .pic{width:22px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:var(--fs-base)}
.aula-continue .pic svg{width:20px;height:20px}.aula-continue .pic .uic{--uic-size:20px}
.aula-continue .c-info{flex:1;line-height:1.2}
.aula-continue .c-info b{font-size:var(--fs-base);font-weight:700}
.aula-continue .c-info small{display:block;font-size:var(--fs-sm);opacity:.85}
.aula-continue .chev{display:flex;align-items:center;opacity:.8}
.aula-continue .chev svg{width:20px;height:20px}.aula-continue .chev .uic{--uic-size:20px}
.aula-continue.done{background:var(--panel2);color:var(--ink);border-color:var(--line)}
.aula-continue:active{transform:scale(.99)}

/* Amigos (item D) */
.set-head .head-friends{margin-left:auto}
.head-friends .mask-ic{width:24px;height:24px;background:var(--ink)}
.invite-btn .mask-ic{width:24px;height:24px;flex:0 0 auto;background:var(--accent)}
.invite-btn .t{flex:1}.invite-btn .t b{display:block;font-size:var(--fs-base)}.invite-btn .t small{color:var(--muted);font-size:var(--fs-sm)}
.invite-btn .chev{color:var(--muted);font-size:var(--fs-lg)}
.friends .secttl{margin-top:14px}
.friends .lobby-item.offline{opacity:.65}
.friends .fbtn{flex:0 0 auto;background:var(--accent);color:var(--accentText);border:1px solid var(--accent);border-radius:var(--r-sm);padding:7px 12px;font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;margin-left:6px}
.friends .fbtn.ghost{background:transparent;color:var(--muted);border-color:var(--line);font-weight:500;padding:7px 10px}
.invite-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;margin:30px auto 0;max-width:340px}
.invite-card .invite-av,.invite-card .avatar{width:72px;height:72px;border-radius:var(--r-md)}
.invite-card h3{margin:0;font-size:var(--fs-lg);font-weight:700}
.invite-card p{margin:0;color:var(--muted);font-size:var(--fs-base);line-height:1.45}
.invite-card .setup-start{width:100%}
/* D2: selo de pedidos, busca, linha de pedido */
.set-head .head-friends{position:relative}
.head-badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-sm);background:var(--danger);color:#fff;font-size:var(--fs-xs);font-weight:700;line-height:17px;text-align:center;border:2px solid var(--bg);box-sizing:content-box}
.friend-search{display:flex;gap:8px;margin:0 0 8px}
.friend-search input{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);font:inherit;font-size:var(--fs-base);padding:9px 12px}
.friend-search input:focus{outline:none;border-color:var(--accent)}
.friends .secttl.sub{opacity:.5}

/* Reconexão online (item F) */
.reconnecting{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.62)}
.reconnecting .rc-card{display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:24px 30px;color:var(--ink);font-size:var(--fs-base);font-weight:600}
.reconnecting .rc-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:rcspin .8s linear infinite}
@keyframes rcspin{to{transform:rotate(360deg)}}
.disc-banner{position:fixed;top:0;left:0;right:0;z-index:80;background:var(--banner-brown);border-bottom:1px solid #7a5320;color:#ffdca6;font-size:var(--fs-md);font-weight:600;text-align:center;padding:9px 12px}

/* ===== Onboarding de 1ª vez (item E) ===== */
/* Tela "Como jogar em 30s" (#/comojogar) */
/* top:0 p/ o .set-head sticky ficar colado no topo (padrão das outras telas); safe-area embaixo p/ rolar até o fim */
.screen.howto{max-width:520px;margin:0 auto;padding:0 24px calc(24px + env(safe-area-inset-bottom,0px))}
.howto .step{display:flex;gap:13px;align-items:flex-start;margin-bottom:12px}
.howto .step .sic{flex:0 0 auto;width:30px;color:var(--accent);display:flex;align-items:center;justify-content:center}
.howto .step .sic svg{width:26px;height:26px}
/* ícone vindo de arquivo SVG via mask (recolorido com a cor do contexto = --accent) */
.mask-ic{display:block;background:currentColor}
.howto .step .sic .mask-ic{width:26px;height:26px}
.htp-cta .ic .mask-ic{width:24px;height:24px}
.howto .step .stxt b{display:block;font-size:var(--fs-base);margin-bottom:3px}
.howto .step .stxt>span{font-size:var(--fs-base);color:var(--muted);line-height:1.45}
.htp-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.htp-board{max-width:240px;margin:0 auto 8px}
.htp-cap{font-size:var(--fs-sm);text-align:center;margin:0 0 16px;line-height:1.45}

/* Modal de boas-vindas (1ª abertura) */
.welcome-modal .welcome-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:30px 26px 24px;max-width:300px;width:100%;display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center}
.welcome-card .wm-x{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:21px;line-height:1;padding:8px}
.welcome-card .wm-icon{width:64px;height:64px;border-radius:var(--r-md)}
.welcome-card h3{margin:0;font-size:var(--fs-lg);font-weight:700;letter-spacing:.5px;color:var(--ink)}
.welcome-card p{margin:0;font-size:var(--fs-base);color:var(--muted);line-height:1.45}
.welcome-card .setup-start{width:100%}
.welcome-card .linklike{background:none;border:none;color:var(--muted);font:inherit;font-size:var(--fs-base);text-decoration:underline;cursor:pointer}

/* Ícone "?" de ajuda no cabeçalho (Computador/Campanha): à direita, centralizado no eixo Y (.set-head é flex align-items:center) */
.set-head .head-help{margin-left:auto}
.head-help .mask-ic{width:22px;height:22px;background:var(--muted)}
.gp-top .gp-help .mask-ic{width:22px;height:22px;background:var(--muted)}
/* Modal de ajuda (info-modal): título + corpo rolável + "Entendi" */
.info-modal .info-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:24px 20px 18px;max-width:380px;width:100%;max-height:82vh;display:flex;flex-direction:column;gap:12px;text-align:left}
.info-card .im-x{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:21px;line-height:1;padding:8px}
.info-card .im-title{margin:0 20px;font-size:var(--fs-lg);font-weight:700;color:var(--ink);text-align:center}
.info-card .im-body{overflow-y:auto;display:flex;flex-direction:column;gap:11px;font-size:var(--fs-md);color:var(--muted);line-height:1.45}
.info-card .im-intro{margin:0;color:var(--ink);font-size:var(--fs-base)}
/* Modal de Regras (botão "?" da partida): linhas objetivo/movimento/captura com ícone. */
.im-rules{display:flex;flex-direction:column;gap:14px}
.im-rule{display:flex;gap:12px;align-items:flex-start}
.im-rule .im-ric{flex:0 0 auto;width:26px;height:26px;color:var(--accent);display:flex;align-items:center;justify-content:center}
.im-rule .im-ric .uic,.im-rule .im-ric .mask-ic{width:24px;height:24px}
.im-rule .im-rt b{display:block;color:var(--ink);font-size:var(--fs-base);margin-bottom:2px}
.im-rule .im-rt p{margin:0}
.im-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.im-list li{line-height:1.4}
.im-bot{display:flex;gap:11px;align-items:flex-start}
.im-bot .im-av{width:40px;height:40px;border-radius:var(--r-sm);flex:0 0 auto;background:var(--panel2)}
.im-bot .im-bn{color:var(--ink);font-size:var(--fs-base)}
.im-bot .im-br{color:var(--muted);font-weight:600}
.im-bot .im-ep{color:var(--muted);font-weight:400}
.im-bot .im-bd{margin-top:2px;line-height:1.4}
.im-fenrir{border-top:1px solid var(--line);padding-top:11px;margin-top:2px}
.welcome-sides{display:flex;gap:9px;width:100%;margin:2px 0}
.welcome-side{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 8px;font-size:var(--fs-sm);line-height:1.35;color:var(--muted)}
.welcome-side b{display:block;font-size:var(--fs-sm);margin-bottom:2px;color:var(--ink)}
.welcome-side.atk b{color:var(--atk)}.welcome-side.def b{color:var(--def)}

/* Acesso à tela "Como jogar em 30s" no topo das Regras */
.htp-cta .ic{flex:0 0 auto;width:26px;color:var(--accent);display:flex;align-items:center;justify-content:center}
.htp-cta .ic svg{width:24px;height:24px}
.htp-cta .t{flex:1}
.htp-cta .t b{display:block;font-size:var(--fs-base)}
.htp-cta .t small{color:var(--muted);font-size:var(--fs-sm)}
.htp-cta .chev{color:var(--muted);font-size:var(--fs-lg)}
.htp-cta:active{transform:scale(.99)}

/* ===== Modo Campanha (#/campanha) ===== */
/* Progresso fixo abaixo do cabeçalho (.set-head sticky top:0, ~68px) ao rolar a lista de bots. */
/* espaço inferior p/ o último card não ficar atrás da barra de gesto do celular (safe-area) */
.screen.campaign { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.screen.campaign .cmp-prog { background: var(--panel2); border: 1px solid var(--line); border-radius:var(--r-md); padding: 12px 14px; margin-bottom: 14px; position: sticky; top: 68px; z-index: 14; }
.screen.campaign .done-flag { position: sticky; top: 68px; z-index: 14; }
.screen.campaign .cmp-prog-top { display: flex; justify-content: space-between; font-size:var(--fs-sm); color: var(--muted); margin-bottom: 8px; }
.screen.campaign .cmp-prog-top b { color: var(--ink); }
.screen.campaign .cmp-bar { height: 9px; background: rgba(0,0,0,.25); border-radius:var(--r-pill); overflow: hidden; }
.screen.campaign .cmp-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #e8b54b); }
.screen.campaign .cmp-list { display: flex; flex-direction: column; gap: 10px; }
.screen.campaign .cmp-bot { background: var(--panel2); border: 1px solid var(--line); border-radius:var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.screen.campaign .cmp-bot.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.screen.campaign .cmp-bot.locked { opacity: .55; }
.screen.campaign .cmp-brow { display: flex; align-items: center; gap: 11px; }
.screen.campaign .cmp-av { width: 46px; height: 46px; border-radius:var(--r-sm); border: 1px solid var(--line); object-fit: cover; }
.screen.campaign .cmp-info { flex: 1; min-width: 0; }
.screen.campaign .cmp-nm { font-weight: 700; font-size:var(--fs-base); }
.screen.campaign .cmp-nm small { color: var(--muted); font-weight: 500; }
.screen.campaign .cmp-rt { color: var(--muted); font-size:var(--fs-sm); }
.screen.campaign .cmp-stat { width: 27px; height: 27px; display: grid; place-items: center; flex: none; }
.screen.campaign .cmp-stat svg { width: 27px; height: 27px; }
.screen.campaign .cmp-stat.done { color: var(--win); }
.screen.campaign .cmp-stat.lock { color: var(--muted); }
.screen.campaign .cmp-stat.cur { font-size:var(--fs-lg); color: var(--ink); }
.screen.campaign .cmp-pips { display: flex; flex-direction: column; gap: 7px; }
.screen.campaign .cmp-grp { display: flex; align-items: center; gap: 9px; }
.screen.campaign .cmp-lb { display: flex; align-items: center; gap: 6px; width: 116px; font-size:var(--fs-sm); font-weight: 600; }
.screen.campaign .cmp-grp.atk .cmp-lb { color: var(--atk); }
.screen.campaign .cmp-grp.def .cmp-lb { color: var(--def); }
.screen.campaign .cmp-sic { width: 16px; height: 16px; display: inline-block; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.screen.campaign .cmp-dots { display: flex; gap: 7px; }
.screen.campaign .cmp-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: transparent; }
.screen.campaign .cmp-grp.atk .cmp-dot.on { background: var(--atk); border-color: var(--atk); }
.screen.campaign .cmp-grp.def .cmp-dot.on { background: var(--def); border-color: var(--def); }
.screen.campaign .cmp-dot.next { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217,138,61,.22); }
.screen.campaign .cmp-next { font-size:var(--fs-sm); }
.screen.campaign .cmp-next b { color: var(--accent); }
.screen.campaign .cmp-lockmsg { font-size:var(--fs-sm); color: var(--muted); }
.screen.campaign .cmp-play { width: 100%; padding: 12px; border: 0; border-radius:var(--r-md); background: var(--accent); color: var(--accentText); font-weight: 800; font-size:var(--fs-base); cursor: pointer; }
/* Faixa de conclusão padronizada (Campanha + Aulas): título dourado + progresso branco (mesmo
   tamanho/negrito) + barra verde, tudo dentro de um retângulo de fundo sólido com contorno dourado. */
.done-flag { background:#3a2c12; border:1px solid #e8b54b; border-radius:var(--r-md); padding:12px 14px; margin-bottom:14px; }
.done-flag h3 { margin:0 0 10px; color:#e8b54b; font-size:var(--fs-base); text-align:center; }
.done-flag .df-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.done-flag .df-lbl, .done-flag .df-n { color:var(--ink); font-size:var(--fs-sm); font-weight:700; }
.done-flag .df-n { font-variant-numeric:tabular-nums; }
.done-flag .df-bar { height:9px; border-radius:var(--r-pill); background:var(--panel2); border:1px solid var(--line); overflow:hidden; }
.done-flag .df-bar > i { display:block; height:100%; border-radius:var(--r-pill); background:var(--move); }

/* Linha de jogador padrao (player-row) */
.prow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:8px;cursor:pointer;font-family:inherit;color:inherit;transition:border-color .15s}
.prow:hover{border-color:var(--accent)}
.prow.me{border-color:var(--accent);background:var(--panel2)}
.prow .avatar{width:38px;height:38px;flex:0 0 auto}
.prow .av{width:38px;height:38px;flex:0 0 auto;border-radius:var(--r-sm);object-fit:cover;border:1px solid var(--line)}
.prow-pos{flex:0 0 auto;width:22px;text-align:center;color:var(--muted);font-size:var(--fs-base);font-weight:700}
.prow-main{flex:1 1 auto;min-width:0}
.prow-name{display:flex;align-items:center;gap:5px;color:var(--ink);font-size:var(--fs-base);font-weight:600;line-height:1.2;overflow:hidden}
.prow-name .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow-name .cflag{font-size:var(--fs-base)}
/* Insígnias (v180): selo logo depois da bandeira. Máscara + currentColor (via .uic.inl), então
   UMA arte serve aos dois temas e o selo herda a cor de destaque. A margem existe para o fluxo
   INLINE (linha do nome nas barras de partida, que não tem gap); onde o contêiner já é flex com
   gap (.prow-name, .prof-head) ela zera, senão o espaço dobra. */
.pbadge{display:inline-flex;align-items:center;color:var(--accent);vertical-align:-.16em;margin-left:4px}
.prow-name .pbadge,.prof-head .pbadge{margin-left:0}
.prow-sub{color:var(--muted);font-size:var(--fs-sm);margin-top:2px;display:flex;align-items:center;gap:6px;line-height:1.2}
.prow-sub .up{color:var(--win);font-weight:600}.prow-sub .down{color:var(--loss);font-weight:600}
.prow-rt{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;line-height:1;color:var(--sel);font-size:var(--fs-base);font-weight:600;font-variant-numeric:tabular-nums}
.prow-rt small{color:var(--muted);font-weight:500;font-size:var(--fs-xs)}
.prow-rt .winic{width:17px;height:17px;flex:0 0 auto;background:var(--accent);-webkit-mask:url(../assets/ui/medal.svg) center/contain no-repeat;mask:url(../assets/ui/medal.svg) center/contain no-repeat}
.prow-kebab{flex:0 0 auto;color:var(--muted);display:flex;align-items:center;justify-content:center;width:24px;height:30px}
.prow-kebab svg{width:18px;height:18px}.prow-kebab .uic{--uic-size:18px}
.resdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.resdot.win{background:var(--win)}.resdot.loss{background:var(--loss)}.resdot.draw{background:var(--draw)}
/* Partidas recentes (Início): rating cinza/fino do mesmo tamanho do nome; bolinha maior à direita */
.prow-rating{color:var(--muted);font-weight:400}
.prow.recent .resdot{width:13px;height:13px;margin-right:4px}
.rk-selfhint{text-align:center;font-size:var(--fs-sm);margin:12px 4px 0;line-height:1.4}
.prow.noreplay{opacity:.7}
.prow.noreplay .prow-kebab{display:none}
.statusdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.statusdot.on{background:#6fae5f}.statusdot.play{background:var(--accent)}.statusdot.off{background:#5a4a38}
.sheet-host{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;z-index:60}
.sheet{width:100%;background:var(--panel2);border-top-left-radius:18px;border-top-right-radius:18px;border-top:1px solid var(--line);padding:8px 10px 18px;box-shadow:0 -8px 30px rgba(0,0,0,.5);max-width:520px;margin:0 auto}
.sheet-grab{width:42px;height:5px;border-radius:3px;background:#4a3924;margin:6px auto 10px}
.sheet-id{display:flex;align-items:center;gap:10px;padding:4px 8px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.sheet-id .avatar{width:42px;height:42px}
.sheet-id .nm{color:var(--ink);font-size:var(--fs-base);font-weight:700;display:flex;align-items:center;gap:5px}
.sheet-id .rt{color:var(--sel);font-size:var(--fs-sm);font-weight:600;margin-top:1px}
.sheet-act{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;color:var(--ink);font-family:inherit;font-size:var(--fs-base);font-weight:500;padding:12px 10px;border-radius:var(--r-sm);cursor:pointer;text-align:left}
.sheet-act:hover{background:var(--panel)}
.sheet-act .ic{width:22px;height:22px;flex:0 0 auto;color:var(--accent);display:flex;align-items:center;justify-content:center}
.sheet-act .ic svg{width:20px;height:20px}.sheet-act .ic .uic{--uic-size:20px}
.sheet-act.danger{color:var(--danger)}.sheet-act.danger .ic{color:var(--danger)}
/* Painel de baixo p/ escolher o oponente (Contra o computador). Reusa .sheet-host/.sheet/.botbtn. */
.sheet-host.bot-sheet .sheet{background:var(--panel)}
.sheet-ttl{font-size:var(--fs-sm);letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin:2px 8px 10px;text-align:center}
.sheet-botlist{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:60vh;padding:2px 2px 6px}
/* zona de arraste da gaveta (pega + título): arrastar p/ baixo fecha */
.sheet-drag{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.sheet-drag:active{cursor:grabbing}
/* oponente ainda não escolhido (setup vs computador) */
.botbtn .bot-ph{color:var(--muted)}
.setup-start:disabled{opacity:.45;cursor:not-allowed}
/* Tela Importar partida */
.import-ta{width:100%;box-sizing:border-box;min-height:220px;margin:4px 0 12px;padding:12px;resize:vertical;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--fs-sm);line-height:1.5}
.import-ta:focus{outline:none;border-color:var(--accent)}
.import-err{color:var(--danger);font-size:var(--fs-md);margin:0 2px 12px}
/* Explicação da tela Importar: uma frase do que a tela faz + os caminhos numerados até o texto. */
.imp-lead{color:var(--muted);font-size:var(--fs-sm);line-height:1.5;margin:0 0 14px}
.imp-steps{counter-reset:imp;list-style:none;margin:0 0 14px;padding:0}
.imp-steps li{counter-increment:imp;position:relative;padding-left:30px;margin-bottom:9px;
  color:var(--muted);font-size:var(--fs-sm);line-height:1.5}
.imp-steps li:last-child{margin-bottom:0}
.imp-steps li::before{content:counter(imp);position:absolute;left:0;top:0;width:20px;height:20px;
  border-radius:50%;background:var(--panel2);border:1px solid var(--line);color:var(--accent);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.imp-steps b{color:var(--ink);font-weight:600}

/* Filtros de estatística estilo botão+popover (v45) — src/ui/filter-bar.js */
/* Período segmentado inline (estilo chess.com): fileira sempre visível, 1 toque. Trilho --panel, ativo --panel2. */
.perseg{display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;margin-bottom:12px}
.perseg-b{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;background:none;color:var(--muted);font-family:inherit;font-size:var(--fs-sm);font-weight:700;padding:8px 4px;border-radius:var(--r-pill);cursor:pointer;font-variant-numeric:tabular-nums;transition:background .12s,color .12s}
.perseg-b.on{background:var(--panel2);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.perseg-b:active{transform:scale(.97)}
@media (hover:hover){.perseg-b:not(.on):hover{color:var(--ink)}}

/* uma única linha: os chips não quebram; se não couberem, rola na horizontal (padrão mobile). Barra de rolagem oculta. Popover é fixed (vide filter-bar.js) p/ não ser cortado pelo overflow. */
.fbar{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:12px}
.fbar::-webkit-scrollbar{display:none}
.fdrop{flex:0 0 auto}
.fbtn-drop{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink);font-family:inherit;font-size:var(--fs-sm);font-weight:600;padding:7px 11px;cursor:pointer}
.fbtn-drop .fic{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--accent)}
.fbtn-drop .fic svg{width:17px;height:17px}.fbtn-drop .fic .uic{--uic-size:17px}.fbtn-drop .fic img{width:18px;height:18px;border-radius:5px;object-fit:cover}
.fbtn-drop .chev{margin-left:1px;color:var(--muted);font-size:var(--fs-xs)}
.fbtn-drop.open{border-color:var(--accent)}
.fpop{position:absolute;top:calc(100% + 6px);left:0;min-width:172px;background:var(--panel2);border:1px solid var(--accent);border-radius:var(--r-md);padding:5px;z-index:30;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.fopt{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;color:var(--ink);font-family:inherit;font-size:var(--fs-base);font-weight:500;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;text-align:left}
.fopt:hover{background:var(--panel)}
.fopt.sel{color:var(--sel)}
.fopt .oic{width:20px;height:20px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--accent)}
.fopt .oic svg{width:18px;height:18px}.fopt .oic .uic{--uic-size:18px}.fopt .oic img{width:20px;height:20px;border-radius:5px;object-fit:cover}
.pdot{width:13px;height:13px;border-radius:50%;display:inline-block;flex:0 0 auto}
.pdot.atk{background:var(--atk)}.pdot.def{background:var(--def)}
.pdot.both{background:linear-gradient(90deg,var(--atk) 50%,var(--def) 50%)}

/* Correspondência (v52) */
.corr-invite{margin-bottom:8px}
.corr-iacts{display:flex;gap:8px;margin-top:-2px}
.corr-iacts .setup-start{margin:0;flex:1;padding:8px 0}
.corr-iacts .ok{background:var(--accent);color:var(--accentText);border-color:var(--accent)}
.corr-clock{color:var(--muted,#ad917a);font-size:var(--fs-sm)}
.corr-clock.warn{color:var(--danger,#cf5b3a)}
/* Gaveta de Correspondência na Sala Online (reaproveita .jwrap/.drawer/.menu-opt do menu) */
.corr-lobby{margin:0 0 4px}
.corr-lobby.open .exp-panel{max-height:1400px}
.corr-lobby .menu-opt .corr-clock{margin-left:auto;flex:0 0 auto}
.corr-lobby .corr-drawer-empty{color:var(--muted);font-size:var(--fs-md);margin:0;padding:10px 13px}
.corr-time-banner{background:var(--panel2,#2c2114);border:1px solid var(--line,#3f3022);border-radius:var(--r-sm);text-align:center;padding:7px;color:var(--muted,#ad917a);font-size:var(--fs-sm);margin:8px 0}
.corr-time-banner b{color:var(--ink,#efe3d2)}
.corr-time-banner.warn b{color:var(--danger,#cf5b3a)}

/* ===== Faixa global de desafio recebido ===== */
#challenge-host { position: fixed; left: 0; right: 0; top: 0; z-index: 1200; pointer-events: none; }
#challenge-host .chbanner {
  pointer-events: auto; position: absolute; left: 10px; right: 10px; top: 10px; max-width: 520px; margin: 0 auto;
  background: linear-gradient(180deg,#33260f,#241a0e); border: 1px solid var(--accent); border-radius:var(--r-md);
  box-shadow: 0 10px 28px rgba(0,0,0,.5); padding: 11px 12px 0;
  transform: translateY(-140%); opacity: 0; transition: transform .42s cubic-bezier(.2,.9,.2,1.05), opacity .3s;
}
#challenge-host .chbanner.show { transform: translateY(0); opacity: 1; }
#challenge-host .chrow { display: flex; align-items: center; gap: 11px; }
#challenge-host .chav { width: 42px; height: 42px; border-radius: 50%; background: #3a2a17; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size:var(--fs-lg); flex: none; }
#challenge-host .chtxt { flex: 1; min-width: 0; }
#challenge-host .chtitle { font-size:var(--fs-base); font-weight: 700; line-height: 1.2; }
#challenge-host .chmeta { font-size:var(--fs-sm); color: var(--muted); margin-top: 1px; display: flex; align-items: center; gap: 6px; }
#challenge-host .pill { background: #1f1709; border: 1px solid var(--line); border-radius:var(--r-pill); padding: 1px 8px; font-size:var(--fs-xs); color: var(--ink); }
#challenge-host .chbtns { display: flex; gap: 8px; }
#challenge-host .chbtn { border: none; border-radius:var(--r-sm); padding: 9px 14px; font-size:var(--fs-sm); font-weight: 700; cursor: pointer; }
#challenge-host .chbtn.acc { background: var(--accent); color: var(--accentText); }
#challenge-host .chbtn.dec { background: transparent; color: var(--muted); border: 1px solid var(--line); }
#challenge-host .chprog { height: 4px; margin: 10px -12px 0; background: rgba(0,0,0,.25); border-radius:0 0 var(--r-md) var(--r-md); overflow: hidden; }
#challenge-host .chprog > i { display: block; height: 100%; width: 100%; transform-origin: left;
  background: linear-gradient(90deg,var(--sel),var(--accent)); animation: chdrain 30s linear forwards; }
@keyframes chdrain { to { transform: scaleX(0); } }
/* escurecimento leve do app enquanto a faixa está visível */
body.chdim #app { filter: brightness(.82); transition: filter .3s; }
@media (prefers-reduced-motion: reduce) {
  #challenge-host .chbanner { transition: opacity .2s; transform: none; }
  #challenge-host .chprog > i { animation: none; }
  .clock.warn, .gp-top .gp-live-dot, .livedot, .omodal-spin, .reconnecting .rc-spin { animation: none; }
  .toast-cel, .toast-float { transition: none; }
}

/* Card de Sala vazia (sugestões quando não há ninguém online) */
.empty-card{border:1px dashed var(--line);border-radius:var(--r-md);background:var(--panel);padding:16px 14px;text-align:center;margin:6px 0}
.empty-card .ec-ttl{font-size:var(--fs-base);color:var(--ink);font-weight:600;margin-bottom:3px}
.empty-card .ec-desc{font-size:var(--fs-sm);color:var(--muted);margin-bottom:14px;line-height:1.4}
.ec-opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;margin-bottom:9px;cursor:pointer;color:var(--ink)}
.ec-opt:last-child{margin-bottom:0}
@media (hover:hover){.ec-opt:hover{border-color:var(--accent)}}
.ec-opt .ic{width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:var(--bg);color:var(--accent)}
.ec-opt .ic svg{width:21px;height:21px}.ec-opt .ic .uic{--uic-size:21px}
.ec-opt .tx{flex:1}
.ec-opt .tx b{display:block;font-size:var(--fs-base);font-weight:600}
.ec-opt .tx small{display:block;font-size:var(--fs-sm);color:var(--muted);margin-top:1px}
.ec-opt.primary{background:var(--accent);color:var(--accentText);border-color:var(--accent)}
/* Sala morta = um card só: o botão de correspondência do card vira gaveta quando há partida sua
   vez ou convite (ver corrPlacement). Reusa o mecanismo do resto do app (.jwrap/.exp-panel/
   .drawer); o que muda é que aqui o toggle é um .ec-opt, não um .nav-card. */
.ec-wrap{margin-bottom:9px}
.ec-wrap .ec-opt{margin-bottom:0}
.ec-wrap.open .ec-opt{border-bottom-left-radius:0;border-bottom-right-radius:0}
.ec-wrap .drawer{text-align:left;border-radius:0 0 var(--r-sm) var(--r-sm)}
.ec-opt .chev{flex:0 0 auto;display:inline-flex;align-items:center;color:inherit;opacity:.85}
.ec-opt .chev .uic{--uic-size:22px}
.ec-opt .tx{min-width:0}                 /* sem isto o rótulo não encolhe e empurra a seta para fora */
.ec-opt .tx b{overflow-wrap:break-word}  /* quebra entre palavras; só parte a palavra se não couber */
.ec-opt .mcount{flex:0 0 auto;margin-right:8px;font-size:var(--fs-sm);font-weight:700;color:inherit;
  padding:1px 9px;border:1px solid currentColor;border-radius:var(--r-pill);opacity:.9}
.ec-wrap.open .ec-opt .mcount{display:none}   /* aberta, a lista já mostra quantas são */
.ec-opt.primary .ic{background:rgba(0,0,0,.14);color:var(--accentText)}
.ec-opt.primary .tx small{color:rgba(26,18,11,.7)}