/* ============================================================
   REGRAS DO JOGO — folha própria

   POR QUE ESTE ARQUIVO EXISTE SEPARADO

   O modal de regras agora é impresso em TODA página do site,
   porque a interrogação ao lado do avatar mora no header e o
   header aparece até na home e no login. Só que o tm-ui.css —
   nove mil linhas de mesa, cartas e placar — só é carregado nas
   telas de jogo.

   Deixar o CSS do modal lá dentro faria o "?" da home abrir uma
   caixa sem estilo nenhum: texto preto empilhado sobre a página,
   sem fundo e sem botão de fechar. Carregar o tm-ui inteiro numa
   página de login para estilizar um modal seria o outro extremo.

   Então o modal virou o que ele já era em PHP: autocontido. A
   TM_Regras enfileira esta folha na hora de imprimir, e ela é a
   única coisa que a página de login carrega a mais.
   ============================================================ */

.tm-rodape-regras{
    margin:26px 0 6px;
    text-align:center;
}

/* --- O GATILHO ---

   A classe .tm-abrir-regras diz o que o elemento FAZ, não como
   ele se parece: ela existe em três lugares com três aparências
   (o "?" redondo do header, o "?" da mesa e o link de texto no
   rodapé do lobby).

   Por isso ela sozinha é só um reset de <button>. A aparência
   vem de quem está em volta ou da classe de roupa ao lado.

   A alternativa — pôr o visual de link aqui e sobrescrever nos
   outros dois — dependeria de ordem de carregamento entre esta
   folha e o tm-ui, e a folha que vence é a que carrega depois.
   O "?" da mesa viraria um link sublinhado sem ninguém entender
   por quê. */

.tm-abrir-regras{
    padding:0;
    border:none;
    background:none;
    color:inherit;
    font:inherit;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

/* --- O link de texto do rodapé ---

   Vale para o antigo gatilho de regras e para o link da política
   que tomou o lugar dele. Os dois são a mesma coisa do ponto de
   vista visual: um link discreto no fim da tela, que quem
   procura acha e quem não procura não tropeça. */

.tm-rodape-regras .tm-link-rodape,
.tm-rodape-regras .tm-abrir-regras{
    display:inline-block;
    padding:8px 14px;
    color:rgba(255,255,255,.5);
    font:600 13px/1 Arial, Helvetica, sans-serif;
    text-decoration:underline;
    text-underline-offset:3px;
}

.tm-rodape-regras .tm-link-rodape:hover,
.tm-rodape-regras .tm-link-rodape:focus-visible,
.tm-rodape-regras .tm-abrir-regras:hover,
.tm-rodape-regras .tm-abrir-regras:focus-visible{ color:rgba(255,255,255,.85); }

/* --- Roupa 2: o botão redondo do header ---

   Fica ao lado da conta, no lobby, na sala, no ranking e no
   perfil. Ele já esteve solto abaixo do header por uma versão,
   quando o header parecia desalinhado — mas o desalinho vinha da
   área segura do celular, não daqui, e foi corrigido no tema.

   O `flex-shrink:0` e o `align-self:center` são o que impedem
   que ele volte a mexer na barra: sem o primeiro, o flex do
   header o espremeria quando a logo fosse grande; sem o
   segundo, ele esticaria até a altura do botão da conta, que é
   mais alto, e viraria um oval. */

.tm-header-ajuda{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:center;
    flex:0 0 auto;

    width:32px;
    height:32px;
    padding:0;

    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;
    background:rgba(255,255,255,.06);

    color:rgba(255,255,255,.6);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;

    transition:color .18s ease, background .18s ease, transform .12s ease;
}

.tm-header-ajuda svg{
    width:20px;
    height:20px;
    fill:currentColor;
    display:block;
}

.tm-header-ajuda:hover,
.tm-header-ajuda:focus-visible{
    color:#ffbb33;
    background:rgba(255,255,255,.13);
    border-color:rgba(255,187,51,.4);
}

.tm-header-ajuda:active{ transform:scale(.92); }


/* --- Roupa 3: o botão da MESA ---

   Na mesa não há header, e a interrogação ficava espremida
   dentro do placar. Agora ela mora numa linha própria, entre o
   placar e o feltro, encostada à esquerda.

   A linha é um bloco comum no fluxo: a mesa não rola, então não
   há motivo para `fixed` — e `fixed` ali esbarraria na regra
   `body.tm-jogo > * { position: relative }`, que já derrubou
   outros dois elementos deste projeto. */

/* A LINHA DO "?" NÃO OCUPA ALTURA NENHUMA.

   Ela ocupava 38px, e esses 38px saíam do vão de cima da mesa.
   O feltro é centralizado por `margin: auto` no espaço que
   sobra entre o placar e a mão — tirar altura do topo desse
   espaço empurra a mesa para baixo por metade do que foi
   tirado. Foi o que aconteceu: a mesa desceu 19px no dia em que
   a interrogação chegou.

   A tentativa anterior foi compensar com margem negativa
   (`margin: 0 0 -10px`). Compensou só parte, e mesmo que o
   número fechasse seria um acerto frágil: qualquer mudança no
   tamanho do botão desalinharia a mesa de novo, e ninguém
   ligaria uma coisa à outra.

   Agora a linha tem altura ZERO e o botão sai dela por
   `translateY`, sem empurrar nada. O botão continua exatamente
   onde estava — 16px abaixo do placar — e a mesa volta a se
   centralizar como se a interrogação não existisse.

   `position: relative` + z-index só para o clique continuar
   funcionando: conteúdo que transborda de uma caixa de altura
   zero é desenhado, mas passa a disputar camada com o que vem
   depois no fluxo. */
.tm-ajuda-mesa-linha{
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;

    padding:0 14px;
    margin:0;

    height:0;
    overflow:visible;
    flex:0 0 auto;

    position:relative;
    z-index:60;
}

/* Os 16px que antes eram padding da linha. Como transform, eles
   movem o botão sem custar altura no fluxo. */
.tm-ajuda-mesa-linha .tm-ajuda-mesa{
    transform:translateY(16px);
}

.tm-ajuda-mesa-linha .tm-ajuda-mesa:active{
    transform:translateY(16px) scale(.92);
}

.tm-ajuda-mesa{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:32px;
    height:32px;
    padding:0;

    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;
    background:rgba(255,255,255,.07);

    color:rgba(255,255,255,.6);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.tm-ajuda-mesa svg{
    width:20px;
    height:20px;
    fill:currentColor;
    display:block;
}

.tm-ajuda-mesa:hover,
.tm-ajuda-mesa:focus-visible{ color:#ffbb33; border-color:rgba(255,187,51,.4); }
.tm-ajuda-mesa:active{ transform:scale(.92); }

@media (max-width:400px){
    .tm-header-ajuda,
    .tm-ajuda-mesa{ width:29px; height:29px; }
    .tm-header-ajuda svg,
    .tm-ajuda-mesa svg{ width:18px; height:18px; }
}

/* --- O modal --- */

/* ----------------------------------------------------------
   O !important AQUI É NECESSÁRIO

   Existe neste projeto uma regra abrangente:
   `body.tm-jogo > * { position: relative }`. Como o modal é
   movido para dentro do <body> (para escapar do CSS dos
   containers do jogo), ele passa a ser filho direto e cai nessa
   regra — que tem especificidade maior que uma classe simples.

   O resultado era o modal virar um bloco no meio da página, em
   vez de cobrir a tela: a sobreposição começava a 275px do topo
   e o fundo escuro não cobria nada.

   Regra abrangente merece resposta abrangente. As outras
   propriedades não precisam disso.
---------------------------------------------------------- */
.tm-regras-fundo{
    position:fixed !important;
    inset:0;
    z-index:99995;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(6,10,14,.82);
    backdrop-filter:blur(6px);
    animation:tmRegrasEntra .18s ease-out;
}

.tm-regras-fundo[hidden]{ display:none; }

@keyframes tmRegrasEntra{ from{ opacity:0; } to{ opacity:1; } }

.tm-regras-caixa{
    position:relative;
    width:100%;
    max-width:460px;
    max-height:84vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;

    background:linear-gradient(160deg,#1d2b35,#141f27);
    border:1px solid rgba(255,255,255,.10);
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    padding:24px 20px 26px;
    color:rgba(255,255,255,.86);
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    line-height:1.62;
    animation:tmRegrasSobe .24s cubic-bezier(.2,.9,.3,1.1);
}

@keyframes tmRegrasSobe{ from{ transform:translateY(20px) scale(.97); } to{ transform:none; } }

.tm-regras-caixa h2{
    margin:0 0 8px;
    font-size:19px;
    font-weight:900;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:#fff;
    padding-right:36px;
}

.tm-regras-caixa h3{
    margin:24px 0 8px;
    font-size:13px;
    font-weight:800;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--tm-amarelo, #ffaa00);
}

/* ----------------------------------------------------------
   COR DECLARADA EM CADA ELEMENTO, NÃO HERDADA

   O texto do modal saía cinza-escuro sobre fundo escuro porque o
   tema tem .tm-regras-corpo{color:#333} — sobra do modal antigo,
   que era claro. Eu tinha reusado esse nome de classe e herdei o
   problema junto.

   A classe agora é .tm-regras-texto, que não existe em nenhum
   outro lugar, e cada elemento declara a própria cor: assim uma
   regra de fora não pinta o conteúdo por herança.
---------------------------------------------------------- */

.tm-regras-texto{
    color:rgba(255,255,255,.86);
    font-size:15px;
    line-height:1.62;
}

.tm-regras-caixa p,
.tm-regras-texto p{
    margin:0 0 10px;
    color:rgba(255,255,255,.86);
}

.tm-regras-caixa ul,
.tm-regras-texto ul{
    margin:0 0 10px;
    padding-left:20px;
}

.tm-regras-caixa li,
.tm-regras-texto li{
    margin-bottom:5px;
    color:rgba(255,255,255,.86);
}

.tm-regras-caixa strong,
.tm-regras-texto strong{ color:#fff; font-weight:800; }

.tm-regras-fechar{
    position:absolute;
    top:12px;
    right:12px;
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.10);
    color:#fff;
    font:400 22px/1 Arial, Helvetica, sans-serif;
    cursor:pointer;
    z-index:2;
}

.tm-regras-fechar:hover{ background:rgba(255,255,255,.2); }

.tm-escala-truco li strong:first-child{ color:var(--tm-amarelo, #ffaa00); }

/* --- Tabela de força dentro do modal --- */

.tm-regras-caixa .tm-forca{
    width:100%;
    border-collapse:collapse;
    margin:10px 0 4px;
    font-size:13px;
}

.tm-regras-caixa .tm-forca td{
    padding:6px 5px;
    border-bottom:1px solid rgba(255,255,255,.07);
    vertical-align:middle;
}

.tm-regras-caixa .tm-forca tr:last-child td{ border-bottom:none; }

.tm-forca-pos{
    width:26px;
    text-align:right;
    padding-right:10px !important;
    font-weight:800;
    font-variant-numeric:tabular-nums;
    color:rgba(255,255,255,.35);
}

.tm-forca-cartas{
    white-space:nowrap;
    line-height:1;
}

.tm-forca-nome{
    text-align:right;
    font-size:11px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--tm-amarelo, #ffaa00);
    white-space:nowrap;
}

.tm-regras-caixa .tm-forca tr.manilha td{ background:rgba(255,170,0,.07); }
.tm-regras-caixa .tm-forca tr.manilha .tm-forca-pos{ color:var(--tm-amarelo, #ffaa00); }

.tm-carta-mini{
    display:inline-block;
    min-width:27px;
    padding:3px 5px;
    margin:0 3px 0 0;
    border-radius:5px;
    background:#f7f7f7;
    color:#1a1a1a;
    font-weight:800;
    font-size:13px;
    line-height:1.15;
    text-align:center;
    box-shadow:0 1px 2px rgba(0,0,0,.35);
}

.tm-carta-mini.vermelha{ color:#c00000; }

.tm-regras-caixa .tm-forca tr.manilha .tm-carta-mini{
    background:#fff;
    box-shadow:0 0 0 2px rgba(255,170,0,.65), 0 1px 3px rgba(0,0,0,.45);
}

/* Especificidade acima de ".tm-regras-texto p", senão a nota
   herdava a cor do corpo e perdia a hierarquia visual. */
.tm-regras-texto .tm-forca-nota,
.tm-forca-nota{
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.08);
    font-size:13px;
    line-height:1.55;
    color:rgba(255,255,255,.72);
}

@media (max-width:360px){
    .tm-regras-caixa{ padding:20px 16px 22px; font-size:14px; }
    .tm-regras-caixa .tm-forca{ font-size:12px; }
    .tm-carta-mini{ min-width:24px; padding:2px 4px; margin-right:2px; font-size:12px; }
    .tm-forca-nome{ font-size:10px; }
}