/* jogo.css · a mesa do KRAKOR (Bloco 1, 01/11/2026).
   Copiado para site/assets/jogo.css pelo tools/link_jogo.py; editar a cópia
   some no build. As cores são as do tema (as variáveis da página), a letra é
   a do site, nada de mono, todo toque com 44 px. */
#kr-mesa{margin:1.2rem 0 1.6rem}
.kr-barra{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,.85fr);gap:.4rem;align-items:stretch;margin-bottom:.6rem;max-width:720px;margin-left:auto;margin-right:auto}
.kr-barra .kr-bt{padding:.4rem .2rem;font-size:.86rem;line-height:1.15;white-space:normal;overflow-wrap:normal;word-break:normal}
.kr-barra .kr-bt[hidden]{display:none}
.kr-bt{min-height:44px;min-width:44px;padding:.55rem 1rem;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font:600 .95rem/1.2 var(--fd);cursor:pointer;touch-action:manipulation}
.kr-bt:hover{border-color:var(--c1)}
.kr-bt:focus-visible,.kr-sel:focus-visible{outline:3px solid var(--c1);outline-offset:2px}
.kr-bt-pri{background:var(--c1);border-color:var(--c1);color:var(--sobre-forte)}
.kr-bt[aria-pressed="true"]{border-color:var(--c1);box-shadow:inset 0 0 0 2px var(--c1)}
.kr-bt[hidden]{display:none}
.kr-sel{min-height:44px;padding:.45rem .7rem;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font:500 .95rem/1.2 var(--fd);max-width:100%}
.kr-palco{width:100%;max-width:720px;margin:0 auto;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--card);line-height:0}
.kr-tela{display:block;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kr-status{margin:.75rem 0 .35rem;font:600 1rem/1.45 var(--fd);color:var(--ink);min-height:1.45em}
.kr-acoes{display:flex;flex-wrap:wrap;gap:.5rem;min-height:44px}
.kr-fim{margin:1rem 0 0;padding:1rem 1.1rem;border:1px solid var(--line);border-left:4px solid var(--hi);
  border-radius:12px;background:var(--card);display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center}
.kr-fim[hidden]{display:none}
.kr-fim b{font:700 1.15rem/1.3 var(--fd);color:var(--ink)}
.kr-fim span{font:400 .98rem/1.45 var(--fd);color:var(--ink-2);flex:1 1 12rem}
/* a legenda das peças, desenhada pelo jogo.js com o mesmo pincel do tabuleiro */
.kr-legenda{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.5rem .9rem;
  margin:.6rem 0 0;padding:0;list-style:none}
.kr-legenda li{display:flex;align-items:center;gap:.55rem;font:500 .95rem/1.35 var(--fd);color:var(--ink)}
.kr-legenda canvas{flex:0 0 auto;width:30px;height:30px}
@media (max-width:420px){.kr-bt{padding:.5rem .8rem}.kr-sel{flex:1 1 8rem}}

/* ---------------------------------------- a partida (01/11/2026, parte 3) -- */
/* o adversário em cima do tabuleiro e você embaixo, como no xadrez:
   relógio num canto, a sua ração no outro (rodada de 01/11/2026) */
.kr-lado{display:flex;align-items:center;gap:.6rem;padding:.35rem .7rem;min-height:44px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);font:500 .95rem/1.3 var(--fd);color:var(--ink-2);max-width:720px;margin:0 auto}
.kr-lado[hidden]{display:none}
.kr-lado-b{margin-bottom:.45rem}
.kr-lado-a{margin-top:.45rem}
.kr-lado b{font:700 .98rem/1.3 var(--fd);color:var(--ink)}
.kr-quem{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .55rem;min-width:0;flex:1 1 auto}
.kr-lado-a .kr-quem{justify-content:center;text-align:center}
.kr-racao{font:700 1.02rem/1.2 var(--fd);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;
  padding:.2rem .55rem;border-radius:8px;border:1px solid var(--line)}
.kr-racao[hidden]{display:none}
.kr-racao.kr-lenta{border-color:var(--c1);box-shadow:inset 0 0 0 1px var(--c1)}
.kr-fome .kr-racao{color:var(--c4);border-color:var(--c4)}
.kr-lado-a{border-left:4px solid var(--c1)}
.kr-lado-b{border-left:4px solid var(--c2)}
.kr-vez{box-shadow:0 0 0 2px var(--hi)}
.kr-rel{font:700 1.1rem/1.2 var(--fd);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.kr-rel[hidden]{display:none}
.kr-pouco{color:var(--c4)}
/* o tabuleiro de ponta a ponta no celular (sai da margem da página) */
.kr-quadro{position:relative;max-width:720px;margin:0 auto}
@media (max-width:760px){.kr-quadro{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .kr-quadro .kr-palco{border-radius:0;border-left:0;border-right:0}}
.kr-quadro.kr-rola .kr-palco{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.kr-registro{margin-top:1rem}
.kr-reg{margin:.4rem 0 .2rem;padding:0 1rem 0 2.2rem;font:400 .95rem/1.5 var(--fd);color:var(--ink-2);max-height:16rem;overflow:auto}
.kr-reg li{margin:.15rem 0}
.kr-folha{margin:.4rem 0 1.4rem;padding:1rem 1.1rem 1.2rem;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.kr-folha[hidden],.kr-jogo[hidden]{display:none}
.kr-jogo,.kr-folha{scroll-margin-top:72px}
.kr-folha-t{margin:0 0 .6rem;font:700 1.35rem/1.25 var(--fd);color:var(--ink)}
.kr-grupo{border:0;margin:0 0 1.1rem;padding:0;min-width:0}
.kr-grupo legend{font:700 1.02rem/1.3 var(--fd);color:var(--ink);margin:0 0 .45rem;padding:0}
.kr-dica{margin:.1rem 0 .5rem;font:400 .95rem/1.45 var(--fd);color:var(--ink-2)}
.kr-opcoes{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .5rem}
.kr-op{padding:.45rem .8rem}
.kr-op[aria-pressed="true"],.kr-nivel[aria-pressed="true"]{background:var(--c1);border-color:var(--c1);color:var(--sobre-forte);box-shadow:none}
.kr-niveis{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.45rem}
.kr-nivel{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:.15rem;padding:.6rem .8rem}
.kr-nivel b{font:700 1rem/1.25 var(--fd)}
.kr-nivel span{font:400 .92rem/1.35 var(--fd);opacity:.92}
.kr-pontos{font:700 1rem/1.35 var(--fd);color:var(--ink);margin:.3rem 0}
.kr-pontos.kr-cheio{color:var(--c1)}
.kr-recrutas{list-style:none;margin:.3rem 0 .6rem;padding:0;display:grid;gap:.35rem}
.kr-recruta{display:grid;grid-template-columns:30px 1fr auto;grid-template-areas:"ic nome qtd" "ic desc desc";align-items:center;gap:.15rem .6rem;padding:.4rem .5rem;border:1px solid var(--line);border-radius:10px}
.kr-ic{grid-area:ic;width:30px;height:30px;align-self:start;margin-top:.45rem}
.kr-recruta-n{grid-area:nome;font:700 .95rem/1.3 var(--fd);color:var(--ink)}
.kr-recruta-d{grid-area:desc;font:400 .92rem/1.35 var(--fd);color:var(--ink-2)}
.kr-montar{margin:.4rem 0 .7rem}
.kr-montar .kr-recrutas{padding:0 .6rem .4rem}
.kr-resumo{color:var(--ink)}
.kr-qtd{grid-area:qtd;display:flex;align-items:center;gap:.25rem}
.kr-q{padding:0;width:44px;font-size:1.2rem}
.kr-q:disabled{opacity:.45;cursor:not-allowed}
.kr-n{min-width:1.6em;text-align:center;font:700 1.05rem/1 var(--fd);color:var(--ink)}
.kr-disp{display:block;max-width:100%;border-radius:8px;cursor:pointer;touch-action:manipulation}
.kr-erro{color:var(--c4);font:600 .95rem/1.4 var(--fd);min-height:1.4em;margin:.2rem 0 .4rem}
.kr-bt:disabled{opacity:.5;cursor:not-allowed}



/* ------------------------------ o tutorial e as cenas da página (01/11/2026) -- */
.kr-tut{max-width:720px;margin:0 auto .6rem;padding:.8rem .95rem;border:1px solid var(--line);border-left:4px solid var(--hi);
  border-radius:12px;background:var(--card)}
.kr-tut[hidden]{display:none}
.kr-tut-t{margin:0 0 .35rem;font:700 1.05rem/1.3 var(--fd);color:var(--ink)}
.kr-tut-txt{margin:0 0 .45rem;font:400 .98rem/1.45 var(--fd);color:var(--ink)}
.kr-tut-volta{margin:0 0 .5rem;font:600 .98rem/1.45 var(--fd);color:var(--ink);min-height:0}
.kr-tut-volta:empty{display:none}
.kr-tut-volta.kr-tut-ok{color:var(--ink)}
.kr-tut-bts{display:flex;flex-wrap:wrap;gap:.4rem}
.kr-tut-bts .kr-bt{flex:1 1 auto;padding:.4rem .7rem;font-size:.92rem;line-height:1.15;word-break:keep-all}
.kr-chamada{font:500 1.02rem/1.5 var(--fd);color:var(--ink)}
.kr-tentar{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.kr-h3{margin:1rem 0 .4rem;font:700 1.05rem/1.3 var(--fd);color:var(--ink)}
.kr-passos{padding-left:1.3rem}
.kr-passos>li{margin:.5rem 0 .9rem}
.kr-quadros{display:flex;flex-wrap:wrap;gap:.8rem;margin:.6rem 0}
.kr-quadrinho{margin:0;flex:1 1 120px;max-width:min(300px,calc(50% - .4rem));display:flex;flex-direction:column;gap:.35rem}
.kr-quadrinho canvas{display:block;border:1px solid var(--line);border-radius:8px;max-width:100%}
.kr-quadrinho figcaption{font:400 .95rem/1.4 var(--fd);color:var(--ink-2)}
.kr-legenda-marcas{margin-top:.5rem}

/* ------------------------- o tutorial em passos e o menu das lições (02/11/2026) -- */
.kr-tut-intro{margin:0 0 .35rem;font:400 .95rem/1.45 var(--fd);color:var(--ink-2)}
.kr-tut-intro:empty,.kr-tut-txt:empty{display:none}
.kr-tut-txt{font-weight:600}
.kr-tut-volta.kr-tut-erro{color:var(--c4)}
.kr-bt.kr-brilha{border-color:var(--hi);box-shadow:0 0 0 3px var(--hi)}
@media (prefers-reduced-motion:no-preference){.kr-bt.kr-brilha{animation:kr-brilho 1.2s ease-in-out infinite alternate}}
@keyframes kr-brilho{from{box-shadow:0 0 0 2px var(--hi)}to{box-shadow:0 0 0 5px var(--hi)}}
.kr-tut-menu-txt{margin:0 0 .7rem;font:400 1rem/1.5 var(--fd);color:var(--ink)}
.kr-tut-cap{margin:.6rem 0}
.kr-tut-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.4rem;padding:.4rem 0 .2rem}
.kr-tut-licao{text-align:left;justify-content:flex-start}
.kr-tut-licao[data-feita="1"]{border-color:var(--c1)}
/* o botão do som: apagado quando mudo (02/11/2026) */
.kr-barra .kr-bt[aria-pressed="false"]{text-decoration:line-through}
/* a moldura do tabuleiro, como a borda de madeira do xadrez (só onde ele não vai de ponta a ponta) */
@media (min-width:761px){.kr-quadro .kr-palco{box-shadow:0 0 0 4px var(--ink-2),0 0 0 5px var(--hi),0 10px 28px rgba(0,0,0,.22)}}

/* ------------------- o rating, o histórico, a revisão e o cartão (parte 5, 02/11/2026) -- */
.kr-acoes[hidden]{display:none}
.kr-pat{font:600 .92rem/1.3 var(--fd);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.kr-fim .kr-fim-rating{flex:1 1 100%;font:600 .98rem/1.45 var(--fd);color:var(--ink);font-variant-numeric:tabular-nums}
.kr-ratings{list-style:none;margin:.3rem 0 .7rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.4rem}
.kr-rating{display:flex;flex-direction:column;gap:.1rem;padding:.45rem .65rem;border:1px solid var(--line);border-radius:10px;
  font:400 .92rem/1.35 var(--fd);color:var(--ink-2)}
.kr-rating b{font:700 1.2rem/1.2 var(--fd);color:var(--ink);font-variant-numeric:tabular-nums}
.kr-rating-t{font-weight:700;color:var(--ink)}
.kr-rating-atual{border-color:var(--c1);box-shadow:inset 0 0 0 1px var(--c1)}
.kr-historico{margin-top:1rem}
.kr-hist{margin:.4rem 0 .2rem;padding:0 1rem 0 2.2rem;font:400 .95rem/1.5 var(--fd);color:var(--ink-2);max-height:20rem;overflow:auto}
.kr-hist li{margin:.25rem 0}
.kr-hist b{color:var(--ink)}
.kr-aviso{color:var(--ink);font-weight:600}
/* rever a partida: o número do lance e os quatro passos, embaixo do tabuleiro */
.kr-rever{max-width:720px;margin:.6rem auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
.kr-rever[hidden]{display:none}
.kr-rever-n{grid-column:1/-1;margin:0;font:700 1.02rem/1.3 var(--fd);color:var(--ink);text-align:center;font-variant-numeric:tabular-nums}
.kr-rever .kr-bt{padding:.4rem .2rem;font-size:.9rem;line-height:1.15}
.kr-rever .kr-rever-sair{grid-column:1/-1}