/* =============================================================================
   Urania · tarot/tarot.css · estilo da página de tarô grátis (consulente).
   A product of Cachola Tech · Made in Eindhoven
   -----------------------------------------------------------------------------
   Reaproveita os tokens da casa (var(--cream)/--ink/--gold/--serif...) definidos
   em /styles.css, que esta página também carrega. Aqui mora só o que é da mesa de
   tarô do consulente: o seletor de tiragem, a faixa de honestidade, o resultado
   por carta e o ajuste do grid da Cruz Celta para caber em 320/360px sem overflow.
   A mesa em si (.pythia-*) tem o CSS próprio em /lib/tarot-table.css.
   CSP: style-src 'self'. Zero estilo inline; tudo vive neste arquivo.
   ============================================================================= */

.tarot-hero { text-align: center; position: relative; padding: 40px 0 16px; }
.tarot-hero .display { max-width: 20ch; }
.tarot-hero .lede { max-width: 58ch; }

/* seletor de tiragem + botão tirar */
.spread-pick {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 18px auto 6px; max-width: 640px;
}
.spread-opt {
  font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.spread-opt:hover { border-color: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 12px 28px -22px rgba(31,43,61,.5); }
.spread-opt:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.spread-opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #FBF8F1; }
.spread-opt .so-glyph { color: var(--gold); margin-right: 6px; }
.spread-opt[aria-pressed="true"] .so-glyph { color: var(--gold-soft); }

.draw-row { display: flex; justify-content: center; margin: 14px auto 4px; max-width: 360px; }
.draw-row .btn-primary { width: 100%; }

/* faixa de honestidade · tradição simbólica, não previsão */
.tarot-honesty {
  max-width: 680px; margin: 10px auto 0; text-align: center;
  font-size: 13.5px; color: var(--faint); line-height: 1.5;
}
.tarot-honesty .seed-pill {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--gold);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px;
}

/* a mesa (mount do engine) */
.tarot-table-wrap { max-width: 760px; margin: 22px auto 0; }
.tarot-table-wrap.is-celtic { max-width: 600px; }

/* leitura por carta · uma linha por posição, art-thumb + significado */
.reading-list { max-width: 720px; margin: 24px auto 0; display: grid; gap: 12px; }
.reading-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px;
}
.reading-thumb {
  width: 64px; height: 109px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--cream); position: relative;
}
.reading-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reading-thumb.is-reversed img { transform: rotate(180deg); }
.reading-body { min-width: 0; }
.reading-pos {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 4px;
}
.reading-name {
  font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink);
  margin: 0 0 4px; line-height: 1.15;
}
.reading-orient {
  display: inline-block; font-family: var(--mono); font-size: 10.5px;
  border-radius: 999px; padding: 2px 8px; margin-bottom: 8px;
  border: 1px solid var(--line-2); color: var(--faint);
}
.reading-orient.is-reversed { color: var(--violet); border-color: var(--violet); }
.reading-kw { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; margin: 0; }
.reading-kw .kw-lead { color: var(--faint); }

/* ações do resultado */
.tarot-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  max-width: 720px; margin: 20px auto 0;
}

/* card cruzado pro mapa astral (cross-link honesto) */
.tarot-xlink {
  max-width: 680px; margin: 28px auto 0; text-align: center;
  background: var(--cream-2); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 20px;
}
.tarot-xlink .sub-title { margin-bottom: 6px; }

@media (max-width: 560px) {
  .tarot-hero { padding: 28px 0 12px; }
  .reading-row { grid-template-columns: 52px 1fr; gap: 12px; padding: 12px; }
  .reading-thumb { width: 52px; height: 89px; }
  .reading-name { font-size: 17px; }
  /* o CTA do Ray tem copy longa em PT; em telas estreitas ocupa a largura toda e
     quebra a linha em vez de estourar a borda (gate de overflow). */
  #rayCard .ray-actions { width: 100%; }
  #rayCard .ray-actions .btn { width: 100%; white-space: normal; text-align: center; }
}

/* Cruz Celta em telas estreitas: a mesa do engine usa grid 4x4. Em 320/360 as
   10 cartas a 150px estourariam; aqui forçamos as cartas a encolher para caber
   dentro da largura, sem rolagem horizontal (gate mobile-overflow). A treliça
   do verso da carta é recortada por clipPath no próprio engine, então nem o
   pixel nem o bounding-rect do <line> estouram a borda. */
@media (max-width: 420px) {
  .pythia-table--celtic { gap: 8px 6px; }
  .pythia-table--celtic .pythia-card { max-width: none; }
  .pythia-table--celtic .pythia-slot__label { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .spread-opt { transition: none; }
  .spread-opt:hover { transform: none; }
}