/* Moonlit deck, edition 02. Shared by the reading room, daily card and library. */
.tarot-face.deck-face {
  container-type: inline-size;
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 1px solid #d6bc80;
  border-radius: 9px;
  background: #101a2a;
  overflow: hidden;
  box-shadow: 0 2px 1px #e4cf9a33 inset, 0 14px 32px #0005;
  isolation: isolate;
}
.deck-face::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #c9ac697a;
  border-radius: 5px;
  pointer-events: none;
  z-index: 3;
}
.deck-image { position: absolute; inset: 0; background: #101a2a; }
.deck-image-major { bottom: 17%; }
.deck-face .deck-image > .major-illustration {
  width: 100%; height: 100%; object-fit: contain; border-radius: 0;
}
.tarot-face.deck-face.reversed img { transform: none; }
.deck-face.reversed .deck-image { transform: rotate(180deg); }
.deck-index {
  position: absolute; z-index: 2; top: 4%; left: 50%; transform: translateX(-50%);
  min-width: 19%; padding: 2% 5%; border: 1px solid #cbb581;
  background: #111d2deb; color: #f2ddac; line-height: 1.1;
  font-family: Georgia, serif; font-size: clamp(8px, 6cqw, 18px);
  letter-spacing: .12em; text-align: center; border-radius: 20px;
}
.deck-title {
  position: absolute; z-index: 2; left: 0; bottom: 0; width: 100%; height: 17%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 3px; padding: 3% 4% 4%; background: #ece2c8;
  color: #243447; border-top: 1px solid #cdb57e;
}
.deck-title strong {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(9px, 6.7cqw, 21px); line-height: 1.45; letter-spacing: .07em;
}
.deck-title small {
  font-family: Georgia, serif; font-size: clamp(6px, 3.5cqw, 11px);
  letter-spacing: .1em; line-height: 1.2;
}
.deck-title-long strong { font-size: clamp(7px, 5.4cqw, 17px); letter-spacing: .015em; white-space: nowrap; }
.minor-pips { position: absolute; inset: 14% 11% 23%; }
.minor-pips .suit-pip {
  position: absolute; height: auto; aspect-ratio: 1; object-fit: contain;
  transform: translate(-50%, -50%) !important; border-radius: 0;
  mix-blend-mode: lighten;
}
.deck-image:not(.deck-image-major)::after {
  content: ""; position: absolute; inset: 10% 9% 20%;
  border: 1px solid #c2a86770; border-radius: 44% 44% 4px 4px;
  pointer-events: none;
}
.court-emblem {
  position: absolute; inset: 16% 12% 24%; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 6%;
}
.court-emblem img { width: 82%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: lighten; }
.court-rank { color: #ead6a3; font: 7cqw / 1.2 Georgia, serif; letter-spacing: .12em; }
.court-rule { width: 46%; border-top: 1px solid #b8a173; }
.court-12 { transform: rotate(-7deg); }
.court-13 .court-rule { width: 64%; border-top-style: double; border-top-width: 3px; }
.court-14 .court-rule { width: 74%; border-top-style: double; border-top-width: 4px; }
.hero-card .deck-face { padding: 0; }
.hero-card .deck-face::after { inset: 4px; }
.hero-card .deck-title { gap: 2px; }
.daily-tarot .deck-face { width: min(100%, 265px); }
.card-page { grid-template-columns: 290px minmax(0, 1fr); gap: 64px; padding-top: 64px; padding-bottom: 64px; }
.card-page .deck-face { width: 280px; }
.card-page .meta { color: #bbc5d5; }

.tarot-room-v2 {
  padding: 48px 28px 44px;
  background: radial-gradient(ellipse at 50% 42%, #263847 0%, #172637 28%, #10192c 69%);
  overflow: hidden;
}
.tarot-intro .eyebrow { font-size: 12px; letter-spacing: .23em; color: #d3bd8e; }
.tarot-room-v2 h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.65; margin: 12px 0 18px; letter-spacing: .05em; }
.tarot-room-v2 h1 br { display: none; }
.tarot-room-v2 .lead { font-size: 16px; line-height: 1.95; color: #c3ccda; }
.tarot-table { max-width: 840px; margin: 0 auto; }
.tarot-room-v2 .tarot-deck { gap: 35px; margin: 43px auto 50px; padding: 0 12px; }
.tarot-room-v2 .draw-card {
  display: block; position: relative; flex: 0 1 195px;
  width: 195px; height: auto; aspect-ratio: 2 / 3; padding: 0;
  border-radius: 10px; perspective: 1200px; animation: none;
  transition: transform .32s ease, opacity .35s ease; outline-offset: 8px;
}
.tarot-room-v2 .draw-card:first-child { transform: rotate(-6deg) translateY(11px); }
.tarot-room-v2 .draw-card:last-child { transform: rotate(6deg) translateY(11px); }
.tarot-room-v2 .draw-card:not(:disabled):hover,
.tarot-room-v2 .draw-card:not(:disabled):focus-visible { transform: translateY(-11px); }
.card-flipper {
  display: block; position: absolute; inset: 0; border-radius: 9px;
  transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.65,.25,1);
  box-shadow: 0 22px 40px #0007;
}
.draw-back, .draw-front {
  display: block; position: absolute; inset: 0; border-radius: 9px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.draw-back { overflow: hidden; border: 1px solid #d4ba80; background: #101a2a; }
.draw-back img { width: 100%; height: 100%; object-fit: cover; }
.draw-front { transform: rotateY(180deg); }
.draw-front .deck-face { width: 100%; height: 100%; }
.draw-card.flipped .card-flipper { transform: rotateY(180deg); }
.tarot-room-v2 .draw-card:disabled { opacity: .32; cursor: default; }
.tarot-room-v2 .draw-card.selected:disabled { opacity: 1; transform: translateY(-8px); animation: none; }
.card-choice-number { position: absolute; top: calc(100% + 12px); left: 0; right: 0; font: 13px Georgia,serif; color: #b8a67e; letter-spacing: .2em; }
.draw-status { font-size: 14px; min-height: 28px; color: #d5c5a3; margin-top: 14px; }
.tarot-room-v2 .tarot-caution { color: #c2cbd9; font-size: 14px; line-height: 1.95; margin-top: 20px; }
.mobile-break { display: none; }
.tarot-how { max-width: 580px; margin: 14px auto 0; color: #9facbf; font-size: 13px; }
.tarot-how summary { cursor: pointer; text-underline-offset: 5px; }
.tarot-how p { margin-top: 12px; text-align: left; }
#tarot-result { scroll-margin-top: 28px; }
.tarot-room-v2 .tarot-result-inner {
  max-width: 970px; margin: 44px auto 25px; padding: 42px;
  border: 1px solid #8192a23b; background: #f1f2f1; border-radius: 4px;
}
.reading-header { display: grid; grid-template-columns: 235px minmax(0, 1fr); align-items: center; gap: 38px; }
.reading-card { text-align: center; }
.reading-card .deck-face { width: 235px; margin: auto; }
.reading-orientation { font-size: 13px; color: #756647; margin-top: 14px; letter-spacing: .06em; }
.tarot-result-inner .reading-copy h2 { margin: 10px 0 14px; font-size: 32px; outline-offset: 6px; }
.tarot-result-inner .reading-copy p { font-size: 16px; line-height: 1.95; }
.tarot-result-inner .reading-copy .eyebrow { font-size: 12px; }
.tarot-result-inner .keywords { margin: 0 0 20px; color: #766340; }
.reading-action { margin-top: 22px; padding: 18px 0 0; border-top: 1px solid #ccd3d8; }
.tarot-result-inner .reading-action h3 { font-size: 15px; margin: 0 0 8px; color: #665534; }
.reading-topics { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; margin-top: 34px; padding-top: 25px; border-top: 1px solid #d1d7dd; }
.tarot-result-inner .reading-topics h3 { margin: 0 0 12px; font-size: 18px; }
.tarot-result-inner .reading-topics p { font-size: 15px; line-height: 1.95; }
.reading-footer { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tarot-result-inner .reading-footer > a { font-size: 14px; margin-top: 0; }
.reading-footer .share-actions { margin: 0; gap: 16px; flex-wrap: wrap; }
.reading-footer .share-actions a { margin: 0; }
.tarot-room-v2 #draw-again { color: #e8d7af; border-color: #a59773; margin-top: 8px; }

.tarot-library { max-width: 1250px; }
.library-intro { color: #677284; font-size: 16px; margin-top: 18px; line-height: 1.95; }
.library-group-heading { margin-top: 34px; font-size: 20px; }
.library-group-heading small { margin-left: 12px; color: #7c8592; font-size: 13px; font-weight: 400; }
.tarot-gallery { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 29px 24px; margin: 24px 0 35px; }
.tarot-library-card { min-width: 0; display: block; text-align: center; }
.tarot-library-card .deck-face { width: 100%; transition: transform .2s ease; box-shadow: 0 7px 14px #14233324; }
.tarot-library-card:hover .deck-face { transform: translateY(-5px); }
.library-card-name { display: block; font-weight: 600; font-size: 14px; margin-top: 13px; line-height: 1.6; }
.tarot-library-card > small { display: block; font-size: 12px; line-height: 1.7; color: #778190; margin-top: 5px; }
.suit-library { border-top: 1px solid #cfd5db; padding: 23px 0; }
.suit-library:last-of-type { border-bottom: 1px solid #cfd5db; }
.suit-library summary { display: flex; justify-content: space-between; gap: 16px; cursor: pointer; font-size: 18px; font-weight: 600; list-style: none; }
.suit-library summary::-webkit-details-marker { display: none; }
.suit-library summary small { font-weight: 400; font-size: 14px; color: #707c8a; margin-left: 20px; }
.suit-count { font-size: 13px; color: #7c8593; white-space: nowrap; font-weight: 400; }
.suit-count i { display: inline-block; font-size: 19px; font-style: normal; margin-left: 24px; transition: transform .2s; }
.suit-library[open] .suit-count i { transform: rotate(45deg); }
.tarot-art-note { color: #6c7889; font-size: 12px; margin-top: 30px; line-height: 1.9; }

@media (max-width: 1000px) {
  .tarot-gallery { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .card-page { grid-template-columns: 245px minmax(0,1fr); gap: 36px; }
  .card-page .deck-face { width: 235px; }
}
@media (max-width: 700px) {
  .tarot-room-v2 { padding: 33px 22px 35px; }
  .tarot-intro .eyebrow { font-size: 12px; letter-spacing: .12em; }
  .tarot-room-v2 h1 { font-size: 28px; margin: 12px 0 16px; line-height: 1.65; }
  .tarot-room-v2 h1 br { display: inline; }
  .tarot-room-v2 .lead { font-size: 15px; }
  .tarot-room-v2 .tarot-deck { gap: 12px; padding: 0 1px; margin: 37px auto 46px; }
  .tarot-room-v2 .draw-card { flex: 1 1 0; width: auto; min-width: 0; border-radius: 6px; }
  .card-flipper, .draw-back, .draw-front { border-radius: 6px; }
  .tarot-face.deck-face { border-radius: 6px; }
  .deck-face::after { inset: 3px; border-radius: 3px; }
  .deck-title { gap: 1px; }
  .card-choice-number { font-size: 12px; top: calc(100% + 11px); }
  .tarot-room-v2 .tarot-caution { font-size: 14px; margin-top: 18px; }
  .mobile-break { display: inline; }
  .tarot-how { font-size: 13px; }
  .tarot-room-v2 .tarot-result-inner { margin: 28px -6px 20px; padding: 27px 21px; }
  .reading-header { grid-template-columns: 1fr; gap: 27px; }
  .reading-card .deck-face { width: 220px; }
  .tarot-result-inner .reading-copy h2 { font-size: 28px; }
  .tarot-result-inner .reading-copy .eyebrow { font-size: 12px; }
  .reading-topics { grid-template-columns: 1fr; gap: 22px; margin-top: 28px; }
  .reading-footer { display: block; }
  .reading-footer .share-actions { justify-content: flex-start; margin-top: 22px; gap: 8px 18px; }
  .reading-footer .share-actions .button { font-size: 14px; }
  .tarot-room-v2 #draw-again { font-size: 14px; padding: 12px 20px; }
  .tarot-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px 13px; }
  .library-intro { font-size: 15px; }
  .tarot-library .section-heading h2 { font-size: 24px; }
  .library-card-name { font-size: 14px; }
  .tarot-library-card > small { font-size: 12px; }
  .suit-library summary small { display: block; font-size: 13px; margin: 4px 0 0; }
  .suit-count i { margin-left: 12px; }
  .card-page { grid-template-columns: 1fr; gap: 34px; padding: 38px 28px; }
  .card-page .deck-face { width: 245px; }
}
@media (max-width: 365px) {
  .tarot-room-v2 { padding-left: 17px; padding-right: 17px; }
  .tarot-room-v2 h1 { font-size: 25px; }
  .tarot-room-v2 .lead { font-size: 14px; }
  .tarot-room-v2 .tarot-deck { gap: 9px; }
  .tarot-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-flipper, .draw-card, .tarot-library-card .deck-face { transition: none !important; animation: none !important; }
}