/* =============================================================================
   Pythia · lib/tarot-table.css — estilo da mesa de tarô (classes emitidas por
   lib/tarot-table.js: .pythia-table / .pythia-card / .pythia-face / .pythia-typface).
   O engine deixa o CSS para o host (data-driven). Grid via --pythia-cols/rows e
   --col/--row por slot; flip via .is-revealed; invertida via .is-reversed.
   ============================================================================= */
:root {
  --suit-wands: #b4632a;
  --suit-cups: #2f6f8f;
  --suit-swords: #5b6470;
  --suit-pentacles: #6a7a3a;
  --major-accent: #9A7B1E;
  --ink-faint: #9a9588;
}

.pythia-table {
  display: grid;
  grid-template-columns: repeat(var(--pythia-cols, 3), 1fr);
  grid-auto-rows: auto;
  gap: 14px 12px;
  width: 100%;
  margin: 6px 0 4px;
}
.pythia-slot {
  grid-column: var(--col, auto);
  grid-row: var(--row, auto);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.pythia-slot--cross { transform: rotate(90deg); transform-origin: center; }
.pythia-slot__label {
  font-size: 12px; color: var(--faint, #6B665A); text-align: center; font-weight: 600;
}

/* card + flip (3D) */
.pythia-card {
  appearance: none; border: 0; padding: 0; background: transparent; cursor: pointer;
  width: 100%; max-width: 150px; aspect-ratio: 240 / 410; perspective: 900px;
}
.pythia-card__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.pythia-card.is-revealed .pythia-card__inner { transform: rotateY(180deg); }
.pythia-card__face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(31,43,61,.16); border: 1px solid #E6E0D2; background: #fff;
}
.pythia-card__front { transform: rotateY(180deg); }
.pythia-card__back { display: grid; place-items: center; background: #1F2B3D; }
.pythia-card.is-reversed .pythia-card__front .pythia-face__art,
.pythia-card.is-reversed .pythia-card__front .pythia-face__fallback { transform: rotate(180deg); }

/* card back ornament */
.pythia-cardback { width: 100%; height: 100%; }
.pythia-cardback__bg { fill: #1F2B3D; }
.pythia-cardback__lattice { stroke: #C9A84B; stroke-opacity: .5; }
.pythia-cardback__mark { fill: #C9A84B; }

/* face: real art over typographic fallback */
.pythia-face { position: relative; width: 100%; height: 100%; background: #FBF8F1; }
.pythia-face__art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 2;
}
.pythia-face__fallback { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.pythia-face--fallbackonly .pythia-face__art { display: none; }
.pythia-face__kw {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  font-size: 9.5px; line-height: 1.3; text-align: center; padding: 4px 6px;
  color: #FBF8F1; background: linear-gradient(180deg, rgba(31,43,61,0), rgba(31,43,61,.82));
  font-family: var(--mono, monospace);
}

/* typographic fallback face */
.pythia-typface { width: 100%; height: 100%; display: block; background: #FBF8F1; }
.pythia-typface text { font-family: var(--serif, Georgia, serif); }
.pythia-typface__num, .pythia-typface__name { font-family: var(--serif, Georgia, serif); }
.pythia-typface__sym { font-family: var(--serif, Georgia, serif); }
.pythia-typface__pending { font-family: var(--mono, monospace); }

@media (prefers-reduced-motion: reduce) {
  .pythia-card__inner { transition: none; }
}