/* The Star Atlas Tarot (hb-kkclk): the tarot section's page in the cards' own colours, loaded after tarot.css. The
   ground is the cards' night blue (#18233F, #111930 at the trim); the ink is the cream of the plate's mat
   (#F0E5CC); the gold is the gold of the rules and titles (#C9A24A), all read off the card files
   (niche-decks/astrology-tarot/DIRECTION.md, look A). The cards are square, so the card list runs two by two on a
   phone and four across on a wide screen; the images keep their own square shape. */

body.tarot-page[data-tarot="astrology"] {
  background:
    radial-gradient(ellipse 70% 40% at 70% 0%, rgba(40, 56, 98, 0.6), transparent 70%),
    radial-gradient(ellipse 60% 50% at 20% 100%, rgba(201, 162, 74, 0.08), transparent 70%),
    #111930;
  background-repeat: no-repeat;
}

[data-tarot="astrology"] .tarot {
  --paper: #111930;
  --paper-2: #18233F;
  --paper-3: #1f2c4e;
  --ink: #F0E5CC;
  --ink-2: #ddd2b8;
  --ink-3: #aaa591;
  --line: rgba(240, 229, 204, 0.18);
  --card: #18233F;
  --gold: #d6b360;
  --candle: #e8d199;
  --accent: #F0E5CC;
  --accent-press: #ddd2b8;
  --accent-ink: #111930;
  --good: #d6b360;
}
[data-tarot="astrology"] .tarot .btn-primary {
  box-shadow: 0 0 0 1px rgba(201, 162, 74, 0.6), 0 6px 22px rgba(0, 0, 0, 0.4);
}

[data-tarot="astrology"] .t-hero-img {
  background: #111930; border-radius: var(--radius-m);
  box-shadow: 0 0 0 1px rgba(201, 162, 74, 0.6), 0 0 0 6px var(--paper), 0 0 0 7px rgba(201, 162, 74, 0.35),
              0 24px 60px rgba(0, 0, 0, 0.5);
}
[data-tarot="astrology"] .t-ships {
  border-color: rgba(201, 162, 74, 0.5);
  background: linear-gradient(135deg, rgba(201, 162, 74, 0.14), rgba(201, 162, 74, 0.04));
}
[data-tarot="astrology"] .t-orn span { background: linear-gradient(90deg, transparent, rgba(201, 162, 74, 0.6), transparent); }

/* square cards: 400 × 400 files, never stretched or cropped; the card's own corner (36 of 1050) */
[data-tarot="astrology"] .t-cards img {
  aspect-ratio: 1; object-fit: contain; border-radius: 3.4%;
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(201, 162, 74, 0.3);
}
@media (min-width: 560px) {
  [data-tarot="astrology"] .t-cards { grid-template-columns: repeat(2, 1fr); max-width: 640px; margin-inline: auto; }
}
@media (min-width: 1024px) {
  [data-tarot="astrology"] .t-cards { grid-template-columns: repeat(4, 1fr); max-width: none; }
}

/* the card sheet over the page (tarot.js) on this deck's night blue, not Salem's */
[data-tarot="astrology"] .t-sheet { background: #111930; }