/*
 * A página "Os meus limites" (/conta/limites, 12/10/2026; opção C, "Cartão de jogador", aprovada pelo dono).
 * public/js/novo/limites-pagina.js desenha; aqui só o visual. Classes .ml-*.
 * Regras do site (raspadinhas.css): uma animação por bloco, nenhum texto cortado com reticências e, para quem pede
 * menos movimento, tudo parado no estado final.
 */

.ml-heroi { --ml-verde: #00ff88; --ml-amarelo: #ffd43b; --ml-borda-verde: #1d5a42;
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 18px; border-radius: 18px;
    background: #0f2a1f; border: 1px solid rgba(255, 212, 59, .38); color: #fff; min-width: 0; }
.ml-azulejo { position: absolute; inset: 0; opacity: .08; pointer-events: none; }
.ml-heroi-topo, .ml-heroi-corpo, .ml-heroi-dados, .ml-medidor { position: relative; }
.ml-heroi-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ml-heroi-titulo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ml-kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ml-amarelo); }
.ml-heroi h1 { margin: 0; max-width: 5.2em; font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; font-style: italic; font-weight: 800;
    font-size: 40px; line-height: .95; text-transform: uppercase; color: #fff; outline: 0; }
.ml-heroi-topo img { flex: none; width: 84px; height: 84px; }
.ml-heroi-corpo { display: flex; flex-direction: column; gap: 14px; }
.ml-heroi-corpo:empty { display: none; }
.ml-heroi-dados { display: flex; flex-direction: column; gap: 14px; }
.ml-produtos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ml-produto { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: rgba(14, 16, 19, .55); border: 1px solid var(--ml-borda-verde); min-width: 0; }
.ml-produto-nome { font-size: 13px; color: #b9bec5; }
.ml-produto-valor { font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; font-style: italic; font-weight: 800; font-size: 34px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.ml-produto-unidade { font-size: 12px; color: #8a919a; }
.ml-produto-espera { margin-top: 4px; font-size: 12px; color: var(--ml-amarelo); }
.ml-produto.bloqueado { border-color: rgba(255, 212, 59, .38); }
.ml-produto.bloqueado .ml-produto-valor { color: var(--ml-amarelo); }
.ml-geral { font-size: 12px; color: #9cf0c5; }

/* ---- o medidor: o ponteiro sobe até "X de 5" uma vez, com o arco */
.ml-medidor { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 6px; border-top: 1px solid var(--ml-borda-verde); text-align: center; }
.ml-medidor svg { display: block; overflow: visible; }
.ml-medidor-titulo { font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; font-style: italic; font-weight: 800; font-size: 30px; line-height: 1; color: #fff; }
.ml-medidor-resumo { font-size: 13px; color: #b9bec5; }
.ml-ponteiro { transform-origin: 100px 100px; transform: rotate(var(--angulo)); animation: ml-ponteiro 1.6s cubic-bezier(.2, .8, .2, 1) .2s both; }
.ml-arco { animation: ml-arco 1.4s cubic-bezier(.2, .8, .2, 1) .2s both; }
@keyframes ml-ponteiro { 0% { transform: rotate(-90deg); } 70% { transform: rotate(calc(var(--angulo) + 6deg)); } 100% { transform: rotate(var(--angulo)); } }
@keyframes ml-arco { from { stroke-dashoffset: 188.5; } }

/* ---- as condutas: deslizam para o lado no celular */
.ml-condutas { display: flex; flex-direction: column; gap: 12px; min-width: 0; scroll-margin-top: calc(var(--nv-topo, 60px) + 12px); }
.ml-condutas-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ml-condutas-cab h2 { margin: 0; font-size: 18px; font-weight: 700; color: #fff; }
.ml-condutas-cab span { font-size: 13px; color: #8a919a; }
.ml-trilho { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 12px; margin: 0 -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ml-trilho::-webkit-scrollbar { display: none; }
.ml-carta { --cor: #b9bec5; --borda: #2a3037; --fundo-selo: #14171b;
    scroll-snap-align: start; flex: 0 0 290px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px;
    background: #1b1f24; border: 1px solid var(--borda); color: #fff; animation: ml-entrar .5s ease-out both; }
.ml-carta.em_dia { --cor: #00ff88; --borda: #1d5a42; --fundo-selo: #0b2d21; }
.ml-carta.por_corrigir { --cor: #ffd43b; --borda: rgba(255, 212, 59, .38); --fundo-selo: #2a2208; }
.ml-carta.sem_dados { --borda: #2a3037; --fundo-selo: #14171b; }
.ml-carta-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ml-carta-topo img { width: 88px; height: 88px; margin: -6px 0 0 -6px; }
.ml-estado { flex: none; padding: 4px 10px; border-radius: 99px; background: var(--fundo-selo); border: 1px solid var(--borda); color: var(--cor); font-size: 12px; font-weight: 700; white-space: nowrap; }
.ml-carta.sem_dados .ml-estado { border-color: #3a424b; }
.ml-carta h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; color: #fff; }
.ml-numero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.ml-numero b { font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; font-style: italic; font-weight: 800; font-size: 56px; line-height: .9; color: var(--cor); font-variant-numeric: tabular-nums; }
.ml-numero span { font-size: 13px; line-height: 1.35; color: #b9bec5; }
.ml-calendario { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.ml-celula { aspect-ratio: 1; border-radius: 4px; background: #2a3037; animation: ml-celula .35s ease-out both; }
.ml-celula.marcado { background: #ffd43b; }
.ml-rosca-linha { display: flex; align-items: center; gap: 14px; }
.ml-rosca-linha svg { flex: none; }
.ml-rosca-linha text { font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; font-style: italic; font-weight: 800; font-size: 24px; }
.ml-rosca-linha > span { font-size: 13px; line-height: 1.4; color: #b9bec5; }
.ml-rosca-linha strong { color: #fff; }
.ml-rosca { stroke: var(--cor); animation: ml-rosca 1.2s cubic-bezier(.2, .8, .2, 1) .4s both; }
.ml-frase { margin: 0; font-size: 14px; line-height: 1.45; color: #d5d9de; }
.ml-dica { margin: 0; font-size: 13px; line-height: 1.45; color: #8a919a; }
.ml-dica strong { color: #b9bec5; }
@keyframes ml-entrar { from { opacity: 0; transform: translateX(24px); } }
@keyframes ml-celula { from { opacity: 0; transform: scale(.4); } }
@keyframes ml-rosca { from { stroke-dasharray: 0 263.9; } }

/* ---- pedir revisão (e a revisão em curso, a espera dos 7 dias, sem limite próprio) */
.ml-revisao { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 16px; background: #14171b; border: 1px solid #2a3037; color: #fff; }
.ml-revisao:empty { display: none; }
.ml-revisao > img { flex: none; width: 64px; height: 64px; }
.ml-revisao-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ml-revisao h2 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3; color: #fff; }
.ml-revisao p { margin: 0; font-size: 13px; line-height: 1.45; color: #b9bec5; }
.ml-revisao.em_curso, .ml-revisao.fechado { border-color: rgba(255, 212, 59, .38); }
.ml-botao { display: flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border: 0; border-radius: 12px; background: #00ff88; color: #0e1013 !important;
    font: inherit; font-size: 15px; font-weight: 800; text-decoration: none; cursor: pointer; }
.ml-botao:hover { background: #33ffa0; }
.ml-botao.sec { background: transparent; border: 1px solid #3a424b; color: #fff !important; font-weight: 700; }
.ml-botao.sec:hover { background: rgba(255, 255, 255, .06); }
.ml-botao:focus-visible, .ml-trilho:focus-visible { outline: 2px solid #00ff88; outline-offset: 2px; }

/* ---- computador: o destaque em duas colunas, as condutas em grade */
@media (min-width: 1025px) {
    .ml-heroi { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "topo medidor" "dados medidor"; column-gap: 28px; row-gap: 16px; padding: 24px 26px; }
    .ml-heroi-topo { grid-area: topo; }
    .ml-heroi-corpo { display: contents; }
    .ml-heroi-dados { grid-area: dados; align-self: end; }
    .ml-produtos { max-width: 560px; }
    .ml-medidor { grid-area: medidor; justify-content: center; padding: 0 0 0 26px; border-top: 0; border-left: 1px solid var(--ml-borda-verde); }
    .ml-heroi h1 { font-size: 48px; }
    .ml-condutas-cab span { display: none; }
    .ml-trilho { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); overflow: visible; padding: 0; margin: 0; }
    .ml-carta { flex: none; }
    .ml-revisao { padding: 20px 24px; }
    .ml-revisao-texto { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo acao" "texto acao"; column-gap: 24px; row-gap: 6px; align-items: center; }
    .ml-revisao h2 { grid-area: titulo; }
    .ml-revisao p { grid-area: texto; max-width: 640px; }
    .ml-revisao .ml-botao { grid-area: acao; }
}

/* O escudo do topo no computador (apontamento #14, 13/10/2026): saía com 84 px, solto no alto e longe dos cartões.
   - Cartão de 720 a 1065 px: 100 px, no meio da altura do título e alinhado à direita dos cartões (o topo para nos 560 px deles).
   - Cartão de 1066 px ou mais: coluna própria entre os cartões e o medidor, de 128 a 160 px, no meio da altura. O escudo
     encolhe antes dos cartões: os dois juntos nunca ficam com menos de 530 px (abaixo disso o valor e "o geral da casa" quebram linha).
   A medida é a do próprio cartão (container), não a da janela. */
.ml-heroi-caixa { container: ml-heroi / inline-size; min-width: 0; }
@media (min-width: 1025px) {
    .ml-heroi-topo { max-width: 560px; }
    /* De 720 px de cartão para cima o título ainda cabe ao lado do escudo maior (en e es numa linha só; abaixo disso os 16 px a
       mais o quebravam). A margem negativa mantém o espaço dos 84 px de antes: o cartão não cresce, e o escudo avança 8 px no
       respiro de cima (24 px) e no vão até os cartões (16 px). */
    @container ml-heroi (min-width: 720px) {
        .ml-heroi-topo img { align-self: center; width: 100px; height: 100px; margin-block: -8px; }
    }
    @container ml-heroi (min-width: 1066px) {
        .ml-heroi { grid-template-columns: minmax(0, 560px) minmax(min-content, 1fr) 300px; grid-template-areas: "topo arte medidor" "dados arte medidor"; }
        .ml-heroi-topo { display: contents; }
        .ml-heroi-titulo, .ml-heroi-topo img { position: relative; }
        .ml-heroi-titulo { grid-area: topo; }
        .ml-heroi-topo img { grid-area: arte; align-self: center; justify-self: center; width: clamp(128px, 100cqw - 938px, 160px); height: auto; aspect-ratio: 1; margin-block: 0; }
    }
}

/* O conteúdo do celular encosta 12 px na borda (conta.css): o trilho vai até a borda e volta. */
@media (max-width: 760px) {
    .ml-trilho { padding: 4px 12px 12px; margin: 0 -12px; scroll-padding-left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .ml-ponteiro, .ml-arco, .ml-carta, .ml-celula, .ml-rosca { animation: none; }
}