/* ============ ABA TAROT ============
   Usa as mesmas peças do app (painel, campos, area-mesa, carta-flip, mini,
   ficha, fala-abertura, conselho-caixa). Aqui só o que é próprio do Tarot. */

.tarot-topo { text-align: center; margin-bottom: 16px; }
.tarot-titulo .tarot-orn { color: var(--ouro); letter-spacing: .4em; font-size: .8rem; }
.tarot-titulo h2.tarot-h { border: none; padding: 0; margin: 4px 0 2px; font-size: 1rem; letter-spacing: 5px; }
.tarot-titulo h2.tarot-h::before { content: ""; }
.tarot-titulo p { font-size: .82rem; color: var(--tinta-suave); font-style: italic; }

.tarot-subabas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.tarot-subabas button {
  font: inherit; font-size: .72rem; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer;
  border: 1px solid rgba(184,134,42,.45); background: rgba(251,244,230,.7); color: var(--tinta-suave);
  border-radius: 999px; padding: 7px 14px;
}
.tarot-subabas button[aria-selected="true"] { background: var(--noite); color: var(--ouro-claro); border-color: var(--noite); }

.tarot-opcoes { margin-top: 12px; }

/* mesa: grade montada a partir do desenho da apostila */
.tarot-area { container-type: inline-size; padding-top: 18px; padding-bottom: 18px; }
.tarot-vazio { color: rgba(244,232,208,.78); font-style: italic; text-align: center; padding: 50px 10px; }
.tarot-mesa {
  --carta: min(118px, calc((100cqw - 12px - (var(--cols) - 1) * 8px) / var(--cols)));
  display: grid; justify-content: center; gap: 12px 8px;
  grid-template-columns: repeat(var(--cols), var(--carta));
}
.tarot-mesa:empty { display: none; }
.tarot-mesa .slot { width: var(--carta); position: relative; }
.tarot-mesa .carta-flip { aspect-ratio: 7 / 12; }
.tarot-mesa .frente img { object-fit: cover; }
.tarot-mesa .posicao-nome { font-size: min(.64rem, calc(var(--carta) * .095)); letter-spacing: .6px; overflow-wrap: anywhere; }
.tarot-mesa .nome-carta { font-size: min(.78rem, calc(var(--carta) * .11)); overflow-wrap: anywhere; line-height: 1.25; }
.tarot-mesa .nome-carta small { font-size: min(.58rem, calc(var(--carta) * .085)); letter-spacing: .4px; text-transform: none; }
.tarot-mesa .verso { font-size: calc(var(--carta) * .2); }
/* Cruz Celta: a carta 2 cruza a carta 1, deitada por cima */
.tarot-mesa .slot.deitada { z-index: 2; pointer-events: none; }
.tarot-mesa .slot.deitada .carta-flip { --giro: 90deg; width: 82%; margin: 0 auto; pointer-events: auto; }
.tarot-mesa .slot.deitada .posicao-nome { visibility: hidden; }
.tarot-mesa .slot.deitada .nome-carta { visibility: hidden; }
.tarot-mesa .nome-carta small.tarot-cruza { color: #F3D98F; margin-top: 2px; }
.tarot-mesa .slot.esclarecimento .posicao-nome { color: var(--ouro-claro); }
.tarot-cruz_celta { row-gap: 26px; }

/* leque: escolher as cartas viradas para baixo */
.tarot-leque-dica { color: #F4E8D0; text-align: center; font-size: .9rem; margin-bottom: 12px; }
.tarot-leque-dica span { display: block; color: var(--ouro-claro); font-size: .78rem; letter-spacing: 1px; margin-top: 4px; }
.tarot-leque-cartas { display: flex; flex-wrap: wrap; justify-content: center; padding: 6px 4px 10px 22px; }
.tarot-leque-carta {
  width: 40px; aspect-ratio: 7 / 12; margin: 0 0 8px -18px; border-radius: 4px; cursor: pointer;
  border: 1px solid rgba(243,217,143,.55); background-color: var(--azul);
  background-image: repeating-linear-gradient(45deg, rgba(212,184,100,.18) 0 1px, transparent 0 50%),
                    repeating-linear-gradient(-45deg, rgba(212,184,100,.18) 0 1px, transparent 0 50%);
  background-size: 8px 8px; box-shadow: -2px 2px 6px rgba(0,0,0,.4); transition: transform .15s;
}
.tarot-leque-carta:hover, .tarot-leque-carta:focus-visible { transform: translateY(-8px); outline: none; }
.tarot-leque-carta.escolhida { opacity: .15; transform: translateY(8px); cursor: default; }

/* já tirei no meu baralho */
.tarot-manual-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tarot-manual-linha { display: flex; flex-direction: column; gap: 4px; color: #F3D98F; font-size: .72rem; letter-spacing: .8px; text-transform: uppercase; }
.tarot-manual-linha select { text-transform: none; letter-spacing: 0; font-size: .9rem; }
.tarot-aviso-manual { color: #FFD2B0; text-align: center; margin-top: 10px; }

/* leitura */
.tarot-leitura h2 { margin-top: 22px; }
.tarot-leitura .fala-abertura { margin-bottom: 6px; }
.tarot-bloco p { margin: 0 0 12px; }
.tarot-sintese ul { margin-left: 18px; }
.tarot-sintese li { margin-bottom: 8px; }
.tarot-leitura .conselho-caixa p { margin: 0 0 8px; }
.tarot-acoes-leitura { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.tarot-mesa-dica { font-size: .78rem; color: var(--tinta-suave); margin-top: 10px; font-style: italic; }

/* as 78 cartas */
.tarot-filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.tarot-filtros button {
  font: inherit; font-size: .74rem; cursor: pointer; border-radius: 999px; padding: 6px 12px;
  border: 1px solid rgba(184,134,42,.45); background: transparent; color: var(--tinta-suave);
}
.tarot-filtros button[aria-pressed="true"] { background: rgba(184,134,42,.16); color: var(--tinta); border-color: var(--ouro); }
.tarot-filtros input { flex: 1 1 180px; background: #EBDDBE; border: 1px solid rgba(28,15,6,.1); border-radius: 10px; padding: 8px 12px; font: inherit; }
.tarot-grade .mini img { aspect-ratio: 7 / 12; }
.tarot-grade .mini .chave { text-transform: none; letter-spacing: .2px; font-size: .64rem; }

.tarot-ficha .tarot-ficha-img { width: 150px; aspect-ratio: auto; }
.tarot-en { font-size: .7rem; letter-spacing: 1px; text-transform: none; color: var(--tinta-suave); }
.tarot-meta { font-size: .86rem; color: var(--tinta-suave); }
.tarot-palavras { margin: 10px 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.tarot-palavras span { font-size: .74rem; border: 1px solid rgba(184,134,42,.5); border-radius: 999px; padding: 2px 10px; background: rgba(184,134,42,.07); }
.tarot-frase { font-style: italic; border-left: 3px solid var(--ouro); padding: 6px 12px; margin: 10px 0; }
.tarot-voltar { margin-bottom: 8px; }

/* textos vindos da apostila */
.tarot-ficha-corpo { font-size: .93rem; }
.tarot-ficha-corpo h3, .tarot-ficha-corpo h2, .tarot-ficha-corpo .t-sec {
  font-size: .74rem; letter-spacing: 2px; text-transform: uppercase; color: var(--azul); font-weight: normal;
  border-bottom: 1px solid rgba(184,134,42,.3); padding-bottom: 5px; margin: 20px 0 8px;
}
.tarot-ficha-corpo h2::before { content: ""; }
.tarot-ficha-corpo h4 { font-size: .9rem; color: var(--azul); font-weight: normal; margin: 14px 0 4px; }
.tarot-ficha-corpo p { margin: 0 0 9px; }
.tarot-ficha-corpo ul, .tarot-ficha-corpo ol { margin: 0 0 10px 20px; }
.tarot-ficha-corpo li { margin-bottom: 4px; }
.tarot-ficha-corpo table, .tarot-tabela { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: .85rem; display: block; overflow-x: auto; }
.tarot-ficha-corpo th, .tarot-ficha-corpo td, .tarot-tabela th, .tarot-tabela td { border-bottom: 1px solid rgba(28,15,6,.1); padding: 6px 8px; text-align: left; vertical-align: top; }
.tarot-ficha-corpo th, .tarot-tabela th { font-weight: normal; color: var(--tinta-suave); font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; }
.tarot-ficha-corpo blockquote { border-left: 3px solid var(--ouro); padding: 4px 12px; margin: 8px 0; font-style: italic; }
.tarot-ficha-corpo .caixa { border-radius: 0 12px 12px 0; padding: 10px 14px; margin: 10px 0 12px; border-left: 3px solid var(--ouro); background: rgba(184,134,42,.07); }
.tarot-ficha-corpo .caixa p:last-child { margin-bottom: 0; }
.tarot-ficha-corpo .caixa.revisao { border-left-color: var(--terracota); background: rgba(196,81,26,.06); }
.tarot-ficha-corpo .caixa.revisao::before { content: "✎ Leitura da revisão"; display: block; font-size: .66rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--terracota); margin-bottom: 4px; }
.tarot-ficha-corpo .caixa.atencao { border-left-color: var(--terracota); }
.tarot-ficha-corpo .fonte { font-size: .72rem; color: var(--tinta-suave); font-style: italic; }
.tarot-ficha-corpo .tiragem { display: none; }

/* guia de tiragens */
.tarot-indice { font-size: .85rem; margin-bottom: 8px; line-height: 2; }
.tarot-tir { border-top: 1px solid rgba(184,134,42,.3); padding-top: 14px; margin-top: 18px; }
.tarot-tir h3 { font-size: 1.05rem; color: var(--azul); font-weight: normal; margin-bottom: 6px; }
.tarot-tir > p { font-size: .92rem; }
.tarot-tir .acao { margin-top: 6px; }
.tarot-esquema { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 64px)); gap: 6px; justify-content: center; margin: 14px 0; }
.tarot-esq-pos {
  aspect-ratio: 7 / 10; border: 1px solid rgba(184,134,42,.6); border-radius: 6px; background: rgba(30,43,107,.06);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3px; min-width: 0;
}
.tarot-esq-pos b { color: var(--azul); font-size: .95rem; }
.tarot-esq-pos span { font-size: .56rem; line-height: 1.15; color: var(--tinta-suave); overflow-wrap: anywhere; }
.tarot-esq-pos.deitada { transform: rotate(90deg) scale(.82); background: rgba(196,81,26,.12); z-index: 1; }

/* como ler */
.tarot-regras { border-left: 3px solid var(--terracota); background: rgba(196,81,26,.05); border-radius: 0 12px 12px 0; padding: 12px 16px; margin-bottom: 16px; }
.tarot-regras p { margin: 0 0 7px; font-size: .92rem; }
.tarot-det { border-top: 1px solid rgba(184,134,42,.3); padding: 10px 0; }
.tarot-det summary { cursor: pointer; color: var(--azul); font-size: .95rem; }
.tarot-det[open] summary { margin-bottom: 8px; }

/* histórico */
.tarot-hist { margin-bottom: 10px; }
.tarot-hist-cartas { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .82rem; color: var(--tinta-suave); margin-top: 4px; }

@media (max-width: 720px) {
  .tarot-subabas button { padding: 6px 10px; font-size: .64rem; letter-spacing: .6px; }
  .tarot-mesa { gap: 10px 5px; --carta: min(104px, calc((100cqw - 4px - (var(--cols) - 1) * 5px) / var(--cols))); }
  .tarot-ficha .tarot-ficha-img { width: 104px; }
}

/* resposta direta, logo depois da abertura */
.tarot-resposta { border: 1px solid rgba(30,43,107,.35); border-radius: 14px; padding: 12px 16px; background: rgba(30,43,107,.05); }
.tarot-resposta p { margin: 0 0 6px; }
.tarot-resposta p:last-child { margin-bottom: 0; }
.tarot-resposta-rotulo { font-size: 1.15rem; color: var(--azul); letter-spacing: .5px; }

/* "Entender esta tiragem" aberto ali mesmo */
.tarot-explica { margin-top: 10px; font-size: .93rem; }
.tarot-explica p { margin: 0 0 8px; }
.tarot-explica .tarot-esquema { margin: 10px 0; }
.tarot-explica-pos { margin: 0 0 10px 22px; }
.tarot-explica-pos li { margin-bottom: 3px; }

/* carta tocada na mesa: o trecho dela na história pisca de leve */
.tarot-historia p.tarot-destaque { animation: tarot-destaque 1.8s ease; border-radius: 8px; }
@keyframes tarot-destaque { 0%, 40% { background: rgba(184,134,42,.22); } 100% { background: transparent; } }
.tarot-ver-ficha { font-size: .78rem; }