/* leve-elegante.css · o modo Leve suavizado (contrato do mundo §12-bis, pedido do Giordano em 25/09 08h18: "muito brutalista,
   muito preto e branco, carregado demais"). Só vale com html[data-modo="leve"]; carrega depois de cartas.css e ganha de
   devolutiva.css pela especificidade. Fundo areia #EFEAE2 (a exceção já declarada do canon), cartas brancas com borda
   cinza de 1 px, traço preto a 55–70 %, nada de bloco preto cheio. Vermelho só no fio, no andaime e na ação principal.
   Texto sempre ≥ 4,5:1. Nenhuma sombra, degradê ou brilho. */
html[data-modo="leve"] {
  --areia: #EFEAE2;
  --traco: rgba(35, 31, 32, .62);   /* linha de desenho */
  --traco2: rgba(35, 31, 32, .22);  /* divisória */
  --texto2: rgba(35, 31, 32, .74);  /* texto secundário: 6:1 sobre branco, 5:1 sobre areia */
  --sel: #EDEDED;                   /* carta escolhida: 8 % de preto sobre branco */
}
html[data-modo="leve"] body { background: var(--areia); }
html[data-modo="leve"] .enunciado, html[data-modo="leve"] .carta-q h2 { font-weight: 800; }
html[data-modo="leve"] .regua { font-weight: 800; }
html[data-modo="leve"] .regua > i { height: 1px; opacity: .55; }

/* barra e rodapé: sem régua grossa */
html[data-modo="leve"] .barra { background: var(--areia); border-bottom: 1px solid var(--traco2); }
html[data-modo="leve"] .fio6 li { background: #fff; border: 1px solid var(--cinza); }
html[data-modo="leve"] .fio6 li.feito { border-color: var(--traco); }
html[data-modo="leve"] .fio6 li.agora { border: 1.5px solid var(--verm); }
html[data-modo="leve"] .fio6 ol::before { height: 1px; margin-top: -.5px; background: var(--traco2); }
html[data-modo="leve"] .fio6 ol::after { height: 2px; margin-top: -1px; }
html[data-modo="leve"] .rodape { background: var(--areia); border-top: 1px solid var(--traco2); }
html[data-modo="leve"] .voltar:hover, html[data-modo="leve"] .avancar:not(.acao):hover, html[data-modo="leve"] .aa:hover { background: rgba(35, 31, 32, .06); }

/* capa, cena e ilha desenhada */
html[data-modo="leve"] .tela-capa, html[data-modo="leve"] .capa-arte, html[data-modo="leve"] .capa-foto,
html[data-modo="leve"] .cena, html[data-modo="leve"] .ilha.diagrama, html[data-modo="leve"] .ilha { background: var(--areia); }
html[data-modo="leve"] .diagrama-svg .contorno { fill: #fff; stroke: var(--traco); stroke-width: 2.2; }
html[data-modo="leve"] .diagrama-svg .pino circle { fill: #fff; stroke: rgba(35, 31, 32, .3); stroke-width: 2.4; }
html[data-modo="leve"] .diagrama-svg .pino .ic { stroke: rgba(35, 31, 32, .42); stroke-width: 1.3; }
html[data-modo="leve"] .diagrama-svg .pino.feito circle { fill: #fff; stroke: var(--traco); stroke-width: 3; }
html[data-modo="leve"] .diagrama-svg .pino.feito .ic { stroke: var(--preto); }
html[data-modo="leve"] .diagrama-svg .pino.agora circle { fill: #fff; stroke: var(--verm); stroke-width: 4.5; }
html[data-modo="leve"] .diagrama-svg .pino.agora .ic { stroke: var(--preto); }
html[data-modo="leve"] .diagrama-svg .pino circle.anel-f { fill: none; stroke: var(--traco); stroke-width: 3; }
html[data-modo="leve"] .diagrama-svg .pino circle.anel-a { fill: none; stroke: var(--verm); stroke-width: 3.5; }
html[data-modo="leve"] .rota .no { stroke-width: 2.5; stroke: var(--traco); }
html[data-modo="leve"] .rota .no.feito { fill: #fff; stroke: var(--preto); }
html[data-modo="leve"] .pino-e { border: 1px solid var(--traco); }
html[data-modo="leve"] .pino-e.falta { border-color: var(--cinza); }
html[data-modo="leve"] .pino-e.proximo, html[data-modo="leve"] .pino-e.alavanca { border: 1.5px solid var(--verm); }
html[data-modo="leve"] .pino-e.forte { outline: 1.5px solid var(--traco); }

/* botões e chips */
html[data-modo="leve"] .chip { border: 1px solid var(--traco2); background: #fff; font-weight: 700; }
html[data-modo="leve"] .chip[aria-pressed="true"] { background: #fff; color: var(--preto); border: 1.5px solid var(--traco); font-weight: 800; }
html[data-modo="leve"] .btn.fantasma, html[data-modo="leve"] .btn[aria-disabled="true"] { outline-width: 1px; outline-color: var(--traco); }
html[data-modo="leve"] .btn.escuro { background: #fff; color: var(--preto); outline: 1px solid var(--traco); outline-offset: -1px; }
html[data-modo="leve"] .perfis-teste { border: 1px dashed var(--traco); }
html[data-modo="leve"] .perfis-teste button, html[data-modo="leve"] .dialogo .seg button, html[data-modo="leve"] .nav-passos button { border: 1px solid var(--traco2); }
html[data-modo="leve"] .dialogo .seg button[aria-pressed="true"] { background: #fff; color: var(--preto); border: 1.5px solid var(--traco); }
html[data-modo="leve"] .dialogo .caixa { border-top: 1px solid var(--traco2); }
html[data-modo="leve"] .dialogo .grupo { border-top: 1px solid var(--cinza); }
html[data-modo="leve"] .retomar { background: #fff; border: 1px solid var(--cinza); }

/* a carta da pergunta */
html[data-modo="leve"] .papel { border: 1px solid var(--cinza); }
html[data-modo="leve"] .carta-q .pilha-eixo i { border: 1px solid var(--cinza); border-top: 0; }
html[data-modo="leve"] .enunciado .balao { background: var(--areia); color: var(--preto); font-weight: 700; }
html[data-modo="leve"] .enunciado .balao::before { color: var(--texto2); }
html[data-modo="leve"] .enunciado .balao::after { border-right-color: var(--areia); }
html[data-modo="leve"] .enunciado .num, html[data-modo="leve"] .balao .num { background: transparent; color: var(--preto); box-shadow: none; text-decoration: underline; text-decoration-color: var(--verm); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html[data-modo="leve"] .no-caso .escolhida { background: #fff; color: var(--preto); border: 1.5px solid var(--traco); }
html[data-modo="leve"] .no-caso .escolhida .ok { color: var(--verm); }

/* as cartas de resposta: brancas, borda cinza de 1 px; a escolhida fica em cinza claro com contorno a 70 % */
html[data-modo="leve"] .carta-r .frente { border: 1px solid var(--cinza); }
html[data-modo="leve"] .carta-r .verso { background: var(--sel); color: var(--preto); border: 1.5px solid rgba(35, 31, 32, .7); }
html[data-modo="leve"] .carta-r .ok { color: var(--verm); }
html[data-modo="leve"] .tecla { border: 1px solid rgba(35, 31, 32, .38); color: var(--texto2); font-weight: 800; }
html[data-modo="leve"] .verso .tecla { background: var(--verm); border-color: var(--verm); color: #fff; }
html[data-modo="leve"] .m-situacao .carta-r .frente .tecla { background: transparent; color: var(--texto2); }
html[data-modo="leve"] .m-situacao .carta-r .txt, html[data-modo="leve"] .m-decisao .carta-r .txt { font-weight: 600; }
html[data-modo="leve"] .m-objeto .txt, html[data-modo="leve"] .m-inventario .txt, html[data-modo="leve"] .m-regua .linha .txt, html[data-modo="leve"] .m-palpite .nome { font-weight: 700; }
html[data-modo="leve"] .m-inventario .ico .ok { background: transparent; color: var(--verm); }
html[data-modo="leve"] .carta-r.fixa .frente { border: 1px dashed var(--traco) !important; }
html[data-modo="leve"] .carta-r.fixa .frente .tecla { border-style: dashed; }
@media (hover: hover) {
  html[data-modo="leve"] .carta-r:hover .frente { background-color: #FAF8F5; border-color: var(--traco2); }
  html[data-modo="leve"] .carta-r:hover .frente .tecla { background: transparent; color: var(--preto); border-color: var(--traco); }
}

/* a pergunta "escura" (decisão) vira areia um tom abaixo, não preto */
html[data-modo="leve"] .tela-q.escura .conteudo { background: #E6DFD4; color: var(--preto); }
html[data-modo="leve"] .tela-q.escura .carta-q .regua > span:first-child { color: var(--verm2); }
html[data-modo="leve"] .tela-q.escura .carta-q .regua > span:last-child { color: var(--texto2); }
html[data-modo="leve"] .tela-q.escura .enunciado .balao { background: #fff; color: var(--preto); }
html[data-modo="leve"] .tela-q.escura .enunciado .balao::before { color: var(--texto2); }
html[data-modo="leve"] .tela-q.escura .enunciado .balao::after { border-right-color: #fff; }
html[data-modo="leve"] .tela-q.escura .enunciado .num, html[data-modo="leve"] .tela-q.escura .balao .num { background: transparent; color: var(--preto); }
html[data-modo="leve"] .tela-q.escura .carta-r .verso { outline: 0; color: var(--preto); }
html[data-modo="leve"] .tela-q.escura .carta-r.fixa .frente { border-color: var(--traco) !important; color: var(--preto); }
html[data-modo="leve"] .tela-q.escura .carta-r.fixa .frente .tecla { border-color: var(--traco); }
html[data-modo="leve"] .tela-q.escura .no-caso .escolhida { outline: 0; }
html[data-modo="leve"] .tela-q.escura .conteudo .rodape .voltar, html[data-modo="leve"] .tela-q.escura .conteudo .rodape .maco,
html[data-modo="leve"] .tela-q.escura .conteudo .rodape .avancar { color: var(--preto); }

/* o selo e a tela do nível: claros */
html[data-modo="leve"] .tela-selo, html[data-modo="leve"] .tela-r.escuro, html[data-modo="leve"] .tela-r { background: var(--areia); color: var(--preto); }
html[data-modo="leve"] .tela-selo .regua > span:first-child, html[data-modo="leve"] .tela-r.escuro .regua > span:first-child { color: var(--verm2); }
html[data-modo="leve"] .tela-selo .rodape, html[data-modo="leve"] .tela-r.escuro .rodape { background: var(--areia); color: var(--preto); border-top: 1px solid var(--traco2); }
html[data-modo="leve"] .tela-selo .voltar, html[data-modo="leve"] .tela-r.escuro .voltar, html[data-modo="leve"] .tela-r.escuro .maco { color: var(--preto); }
html[data-modo="leve"] .tela-selo .voltar:hover, html[data-modo="leve"] .tela-r.escuro .voltar:hover { background: rgba(35, 31, 32, .06); color: var(--preto); }
html[data-modo="leve"] .leque-maco i { border: 1px solid var(--cinza); }
html[data-modo="leve"] .carta-nivel .frente { border: 1px solid var(--cinza); }
html[data-modo="leve"] .carta-nivel .nivel-nome { font-weight: 800; letter-spacing: -.02em; }
html[data-modo="leve"] .escada li i { border: 1px solid var(--traco); }
html[data-modo="leve"] .escada li.on i { background: var(--preto); border-color: var(--preto); }
html[data-modo="leve"] .escada.deitada li i { height: 12px; }
html[data-modo="leve"] .escada.deitada li.atual i { height: 20px; background: var(--verm); border-color: var(--verm); }

/* emblemas desenhados: moldura fina, traço mais leve */
html[data-modo="leve"] .emb-l { border: 1px solid var(--cinza); background: #fff; }
html[data-modo="leve"] .emb-l svg { width: 56%; height: 56%; stroke-width: 1.25; }
html[data-modo="leve"] .fio6 li b .naipe { stroke-width: 1.4; }

/* o resultado */
html[data-modo="leve"] .cartao, html[data-modo="leve"] .fatos-emp li, html[data-modo="leve"] .menu-passar { border: 1px solid var(--cinza); background: #fff; }
html[data-modo="leve"] .fatos-emp li b { border: 1px solid var(--traco2); }
html[data-modo="leve"] .destaque { border: 1px solid var(--cinza); }
html[data-modo="leve"] .destaque.forte { border: 1.5px solid var(--traco); padding: 8px 10px; }
html[data-modo="leve"] .destaque.alavanca:not(.forte) { border: 1.5px solid var(--verm); }
html[data-modo="leve"] .ilha-r .alvo-lugar:hover { outline: 1.5px solid var(--traco); }
html[data-modo="leve"] .carta-eixo.forte .papel::after { border: 1.5px solid var(--traco); }
html[data-modo="leve"] .mini5 i { border: 1px solid var(--traco); }
html[data-modo="leve"] .pontos-p i { border: 1px solid var(--traco); }
html[data-modo="leve"] .pontos-p i.on { background: var(--preto); }
html[data-modo="leve"] .escada2 .mk.palp { border: 1.5px solid var(--traco); }
html[data-modo="leve"] .equipe-arte, html[data-modo="leve"] .leque-achados button { border: 1px solid var(--cinza); }

/* capa: o texto na mesma areia, os seis naipes como cartas finas */
html[data-modo="leve"] .capa-texto { background: var(--areia); border-top: 1px solid var(--traco2); }
html[data-modo="leve"] .capa-naipes .n { border: 1px solid var(--cinza); color: var(--texto2); }
html[data-modo="leve"] .capa-naipes .n svg { stroke-width: 1.3; }
html[data-modo="leve"] .fatos li::before { background: var(--traco); }

/* o contador do lugar e o maço */
html[data-modo="leve"] .fio-local { border: 1px solid var(--cinza); }
html[data-modo="leve"] .fio-local .qual { font-weight: 800; }
html[data-modo="leve"] .fio-local li + li::before { height: 1px; top: 7.5px; background: var(--traco2); }
html[data-modo="leve"] .fio-local li.feito + li::before { height: 2px; top: 7px; }
html[data-modo="leve"] .fio-local li b { border: 1.5px solid var(--traco); }
html[data-modo="leve"] .fio-local li.feito b { background: var(--traco); }
html[data-modo="leve"] .fio-local li.agora b { border: 2.5px solid var(--verm); }
html[data-modo="leve"] .maco { font-weight: 800; }
html[data-modo="leve"] .maco .pilha i { border: 1px solid var(--traco); }
html[data-modo="leve"] .tela-q.escura .rodape { border-top-color: var(--traco2); }
html[data-modo="leve"] .tela-q.escura .regua > span:first-child { color: var(--verm2); }

/* 27/09 · as linhas alternadas no Leve: a carta branca e, uma sim, uma não, um cinza quente um grau abaixo (sobre a
   areia do fundo, as duas continuam cartas; texto preto a 14:1) */
html[data-modo="leve"] .carta-r.alt .frente { background-color: #F5F3EF; }
@media (hover: hover) { html[data-modo="leve"] .carta-r.alt:hover .frente { background-color: #FAF8F5; } }
[dir="rtl"] html[data-modo="leve"] .enunciado .balao::after, html[data-modo="leve"][dir="rtl"] .enunciado .balao::after { border-left-color: var(--areia); }
html[data-modo="leve"][dir="rtl"] .tela-q.escura .enunciado .balao::after { border-left-color: #fff; }