:root {
  --tarot-ink: #282219;
  --tarot-muted: #746b5d;
  --tarot-gold: #bc8c12;
  --tarot-gold-soft: #f1dc9d;
  --tarot-paper: rgba(255, 255, 255, .93);
  --tarot-line: rgba(132, 105, 52, .15);
}

[hidden] { display: none !important; }

.tarot-experience-body {
  min-height: 100vh;
  padding-bottom: 104px;
  color: var(--tarot-ink);
  background:
    radial-gradient(circle at 50% -4%, rgba(232, 196, 102, .18), transparent 27rem),
    linear-gradient(135deg, #fbf7eb, #f7f0df 54%, #faf6eb);
}

.tarot-experience {
  width: min(100%, 460px);
  min-height: calc(100vh - 88px);
  margin: 0 auto;
  padding: 22px 16px 44px;
}

.tarot-flow-header {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  min-height: 44px;
}

.tarot-flow-header > strong {
  text-align: center;
  font-size: 1.06rem;
}

.tarot-round-button {
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #ede3ce;
  border-radius: 9999px;
  color: var(--tarot-ink);
  background: #fff;
  box-shadow: 0 2px 6px rgba(80, 55, 10, .06), 0 12px 30px -12px rgba(90, 62, 12, .16);
  font: inherit;
  cursor: pointer;
}

.tarot-round-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.restart-button { justify-self: end; color: #8a7653; }

.tarot-topic-stage { padding-top: 0; }

.tarot-brand-medallion {
  display: grid;
  width: 58px;
  height: 58px;
  margin: -20px auto 8px;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6cf 0 42%, #e3c35d 100%);
  box-shadow: 0 12px 24px rgba(175, 127, 14, .22);
}

.tarot-brand-medallion img { width: 38px; height: 38px; border-radius: 12px; object-fit: cover; }
.tarot-topic-stage > h1 { margin: 0; text-align: center; font-size: 1.7rem; }

.tarot-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 108px;
  margin: 8px auto 2px;
  color: var(--tarot-gold);
  font-size: .72rem;
}
.tarot-divider::before, .tarot-divider::after { content: ""; width: 38px; height: 1px; background: linear-gradient(90deg, transparent, rgba(174, 126, 22, .45)); }
.tarot-divider::after { transform: scaleX(-1); }
.tarot-lead { margin: 6px 0 20px; text-align: center; color: var(--tarot-muted); font-size: .9rem; }

.tarot-question-card,
.tarot-deck-panel,
.tarot-spread-panel,
.reading-summary {
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 26px;
  background: var(--tarot-paper);
  box-shadow: 0 17px 40px rgba(84, 61, 20, .1);
}

.tarot-question-card { padding: 19px; }
.tarot-question-card h2 { margin: 0 0 2px; font-size: 1.05rem; }
.tarot-question-card > p { margin: 0 0 14px; color: var(--tarot-muted); font-size: .79rem; line-height: 1.55; }

.tarot-topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tarot-topic-chips button,
.selection-tools button {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--tarot-line);
  border-radius: 999px;
  color: var(--tarot-ink);
  background: #fff;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.tarot-topic-chips button.active {
  border-color: rgba(174, 124, 13, .45);
  background: linear-gradient(145deg, #fff9e8, #f3deb0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75);
  font-weight: 800;
}
.tarot-topic-chips .custom-topic { display: inline-flex; align-items: center; gap: 5px; }

.tarot-question-list { display: grid; gap: 8px; margin-top: 14px; }
.tarot-question-option {
  position: relative;
  display: grid;
  width: 100%;
  gap: 2px;
  padding: 13px 38px 13px 14px;
  border: 0;
  border-radius: 15px;
  color: var(--tarot-ink);
  background: #f7f3eb;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.tarot-question-option::after { content: "›"; position: absolute; top: 50%; right: 15px; color: var(--tarot-gold); font-size: 1.45rem; transform: translateY(-50%); }
.tarot-question-option strong { font-size: .88rem; }
.tarot-question-option small { color: #8a8174; font-size: .71rem; line-height: 1.45; }

.tarot-custom-question { display: grid; gap: 9px; margin-top: 14px; }
.tarot-custom-question label { font-size: .83rem; font-weight: 800; }
.tarot-custom-question textarea { min-height: 98px; resize: vertical; padding: 12px; border: 1px solid var(--tarot-line); border-radius: 15px; color: var(--tarot-ink); background: #fffdf8; font: inherit; }
.custom-question-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.custom-question-footer small { color: var(--tarot-muted); }
.custom-question-footer button { padding: 10px 16px; border: 0; border-radius: 999px; color: #fff; background: #b8860c; font: inherit; font-weight: 800; }

.selected-question-heading { margin: 20px 0 14px; text-align: center; }
.selected-question-heading span { color: #a07924; font-size: .75rem; font-weight: 800; letter-spacing: .06em; }
.selected-question-heading h1 { max-width: 390px; margin: 7px auto 0; font-size: 1.2rem; line-height: 1.45; }

.tarot-deck-panel { padding: 20px 18px 22px; text-align: center; }
.tarot-deck-panel > p { margin: 0 0 17px; color: var(--tarot-muted); font-size: .78rem; line-height: 1.6; }

.tarot-deck-stack {
  position: relative;
  display: block;
  width: 112px;
  height: 164px;
  margin: 4px auto 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.tarot-deck-stack img { position: absolute; inset: 0; width: 94px; height: 154px; border: 2px solid #cda641; border-radius: 8px; object-fit: cover; box-shadow: 0 7px 18px rgba(32,27,18,.2); backface-visibility: hidden; will-change: transform; }
.tarot-deck-stack img:nth-child(1) { left: 9px; transform: rotate(-7deg); }
.tarot-deck-stack img:nth-child(2) { left: 14px; transform: rotate(-2deg); }
.tarot-deck-stack img:nth-child(3) { left: 19px; transform: rotate(4deg); }
.tarot-deck-stack.shuffling { animation: shuffleDeckLift .92s cubic-bezier(.22,.75,.24,1); }
.tarot-deck-stack.shuffling img:nth-child(1) { animation: shuffleCardLeft .92s cubic-bezier(.22,.75,.24,1); }
.tarot-deck-stack.shuffling img:nth-child(2) { animation: shuffleCardCenter .92s cubic-bezier(.22,.75,.24,1); }
.tarot-deck-stack.shuffling img:nth-child(3) { animation: shuffleCardRight .92s cubic-bezier(.22,.75,.24,1); }
@keyframes shuffleDeckLift {
  0%, 100% { transform: translateY(0); }
  48% { transform: translateY(-5px); }
}
@keyframes shuffleCardLeft {
  0%, 100% { transform: translate3d(0,0,0) rotate(-7deg); }
  24% { transform: translate3d(-42px,-7px,0) rotate(-15deg); }
  54% { transform: translate3d(28px,5px,0) rotate(5deg); }
  76% { transform: translate3d(-8px,-2px,0) rotate(-9deg); }
}
@keyframes shuffleCardCenter {
  0%, 100% { transform: translate3d(0,0,0) rotate(-2deg); }
  30% { transform: translate3d(24px,-5px,0) rotate(7deg); }
  62% { transform: translate3d(-24px,4px,0) rotate(-10deg); }
  82% { transform: translate3d(7px,-1px,0) rotate(0deg); }
}
@keyframes shuffleCardRight {
  0%, 100% { transform: translate3d(0,0,0) rotate(4deg); }
  24% { transform: translate3d(42px,-8px,0) rotate(15deg); }
  54% { transform: translate3d(-30px,6px,0) rotate(-7deg); }
  76% { transform: translate3d(8px,-2px,0) rotate(7deg); }
}

.shuffle-status { min-height: 20px; margin-bottom: 10px; color: #94711e; font-size: .76rem; }
.tarot-gold-button,
.tarot-share-dialog > div > button:first-child,
#sendSelectedReadings {
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  color: #fffdf7;
  background: linear-gradient(180deg, #dcb641, #b98508);
  box-shadow: 0 8px 18px rgba(167, 119, 7, .22);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.tarot-deck-panel .tarot-gold-button { min-width: 142px; }
#spreadDeck {
  display: inline-flex;
  min-width: 0;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  color: #3a2606;
  background: linear-gradient(180deg, #f8e29c 0%, #e6ba54 46%, #bc8814 100%);
  box-shadow: 0 14px 30px -8px rgba(184,134,11,.42), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1.5px 0 rgba(120,80,0,.18);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
#spreadDeck svg,
#reshuffleDeck svg {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#spreadDeck svg { width: 18px; height: 18px; }
#spreadDeck:active,
#reshuffleDeck:active { transform: scale(.95); }

.tarot-spread-panel { overflow: hidden; padding: 20px 10px 18px; text-align: center; }
.spread-instruction { margin: 0 0 12px; font-size: .84rem; font-weight: 800; }
.tarot-card-grid {
  display: grid;
  width: min(100%, 420px);
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px 4px;
  margin: 0 auto 14px;
  padding: 12px 8px;
  border: 1px solid rgba(179,137,34,.2);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,250,234,.92), rgba(246,235,206,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 26px rgba(94,68,18,.09);
}
.ring-card {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3.2;
  padding: 0;
  border: 1px solid rgba(226,180,58,.72);
  border-radius: 4px;
  background: #111936;
  box-shadow: 0 3px 7px rgba(22,17,10,.2);
  cursor: pointer;
  animation: dealCard .42s cubic-bezier(.2,.78,.28,1) both;
  animation-delay: calc(var(--deal-index) * 4ms);
  transition: transform .2s ease, filter .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.ring-card:nth-child(71) { grid-column: 2; }
.ring-card img { display: block; width: 100%; height: 100%; border-radius: 3px; object-fit: cover; pointer-events: none; }
.ring-card:hover, .ring-card:focus-visible { z-index: 2; outline: 0; filter: brightness(1.1); transform: translateY(-4px) scale(1.06); box-shadow: 0 6px 12px rgba(140,99,8,.2), 0 0 0 2px #e6bd4e; }
.ring-card.is-pending {
  z-index: 8;
  animation: none;
  outline: 0;
  filter: brightness(1.08);
  transform: translateY(-10px) scale(1.42);
  box-shadow: 0 11px 15px rgba(68,45,8,.24), 0 0 0 2px #e6bd4e;
}
.ring-card.is-selected { opacity: .22; pointer-events: none; }
@keyframes dealCard {
  from { opacity: 0; transform: translateY(-10px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.card-confirm { display: flex; align-items: center; justify-content: center; gap: 9px; margin: -4px auto 11px; }
.card-confirm span { color: #8f6b1a; font-size: .79rem; font-weight: 800; }
.card-confirm button { padding: 9px 15px; border: 0; border-radius: 999px; color: #fff; background: #b8860c; font: inherit; font-size: .78rem; font-weight: 800; }
.tarot-outline-button { min-height: 40px; padding: 8px 16px; border: 1px solid rgba(173,127,23,.28); border-radius: 999px; color: #8b6818; background: #fffdf7; font: inherit; font-weight: 700; cursor: pointer; }
#reshuffleDeck {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-color: rgba(184,134,11,.45);
  color: #b8860b;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}
#reshuffleDeck svg { width: 16px; height: 16px; }

.selected-card-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 15px 5px 0; }
.selected-slot { display: grid; min-height: 128px; align-content: start; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; background: linear-gradient(180deg, #f8f3e8, #f4efe6); }
.opened-card-button { display: block; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: zoom-in; }
.opened-card-button:focus-visible { outline: 3px solid rgba(184,134,12,.42); outline-offset: 3px; }
.opened-card-button img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.opened-card-button img.reversed { transform: rotate(180deg); }
.selected-slot .opened-card-button { width: 55px; height: 88px; box-shadow: 0 6px 12px rgba(36,25,14,.16); }
.selected-slot strong { font-size: .69rem; line-height: 1.25; }
.selected-slot small { color: var(--tarot-muted); font-size: .63rem; }
.slot-placeholder { display: grid; width: 55px; height: 88px; place-items: center; border: 1px dashed rgba(150,125,80,.3); border-radius: 6px; color: #c7b899; font-size: 1.2rem; }

.tarot-results { padding-top: 14px; }
.result-card-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 18px 14px; text-align: center; }
.result-card { display: grid; justify-items: center; gap: 4px; }
.result-card .opened-card-button { width: 76px; max-width: 100%; aspect-ratio: 2/3.2; box-shadow: 0 8px 18px rgba(36,25,14,.2); }
.result-card strong { font-size: .68rem; line-height: 1.25; }
.result-card small { color: var(--tarot-muted); font-size: .62rem; line-height: 1.25; }

.reading-summary { padding: 24px 18px 20px; text-align: center; }
.summary-orb { display: grid; width: 48px; height: 48px; margin: -2px auto 8px; place-items: center; border-radius: 50%; color: #b58512; background: #fff8df; box-shadow: 0 0 24px rgba(210,166,55,.22); font-size: 1.25rem; }
.result-kicker { margin: 0 0 3px; color: #a3771c; font-size: .69rem; font-weight: 800; letter-spacing: .04em; }
.reading-summary > h2 { margin: 0 0 15px; font-size: 1.17rem; }
.reading-details { display: grid; gap: 10px; text-align: left; }
.reading-detail { display: grid; grid-template-columns: 62px 1fr; gap: 12px; padding: 12px; border-radius: 16px; background: #f8f4ec; }
.reading-detail .opened-card-button { width: 62px; height: 99px; box-shadow: 0 5px 12px rgba(36,25,14,.14); }
.reading-detail h3 { margin: 0 0 2px; font-size: .92rem; }
.reading-detail .position-label { color: #a17a24; font-size: .68rem; font-weight: 800; }
.reading-detail strong { display: block; margin: 4px 0; font-size: .76rem; }
.reading-detail p { margin: 0; color: var(--tarot-muted); font-size: .74rem; line-height: 1.6; }
.reversed-note { color: #906624 !important; font-weight: 700; }
.reading-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.share-status { min-height: 20px; margin: 10px 0 0; color: #8d6d25; font-size: .72rem; }

body.card-viewer-open { overflow: hidden; }
.tarot-card-viewer { position: fixed; inset: 0; z-index: 2400; display: grid; place-items: center; padding: 18px; background: rgba(24,20,15,.76); backdrop-filter: blur(8px); }
.tarot-card-viewer-dialog { position: relative; width: min(88vw, 390px); max-height: 92vh; padding: 18px; overflow-y: auto; border: 1px solid rgba(229,196,111,.42); border-radius: 22px; background: #fffdf8; box-shadow: 0 26px 80px rgba(10,8,5,.45); text-align: center; }
.tarot-card-viewer-dialog > img { display: block; width: min(100%, 330px); max-height: 75vh; margin: 0 auto; aspect-ratio: 2/3.2; border-radius: 12px; object-fit: contain; background: #151529; box-shadow: 0 16px 34px rgba(28,20,10,.28); }
.tarot-card-viewer-dialog > img.reversed { transform: rotate(180deg); }
.tarot-card-viewer-dialog h2 { margin: 14px 0 2px; font-size: 1.05rem; }
.tarot-card-viewer-dialog p { margin: 0; color: var(--tarot-muted); font-size: .76rem; }
.tarot-card-viewer-close { position: absolute; top: 9px; right: 9px; z-index: 2; display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 1px solid rgba(157,120,34,.18); border-radius: 50%; color: #3e3424; background: rgba(255,253,248,.94); box-shadow: 0 7px 18px rgba(33,25,12,.18); font: inherit; font-size: 1.35rem; cursor: pointer; }

.tarot-share-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 18px; background: rgba(35,29,20,.48); backdrop-filter: blur(6px); }
.tarot-share-dialog { position: relative; width: min(100%, 390px); padding: 24px; border-radius: 24px; background: #fffdf8; box-shadow: 0 22px 60px rgba(35,26,12,.28); text-align: center; }
.tarot-share-dialog h2 { margin: 0 0 17px; font-size: 1.12rem; }
.tarot-share-dialog > div:not(.selection-tools):not(.reading-selection-list) { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.tarot-share-dialog button { font: inherit; }
.dialog-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f2ede4; font-size: 1.4rem; }
.selection-tools { display: flex; justify-content: center; gap: 7px; margin-bottom: 10px; }
.selection-tools button { min-height: 34px; padding: 6px 10px; font-size: .72rem; }
.reading-selection-list { display: grid; max-height: 46vh; gap: 7px; overflow-y: auto; margin: 10px 0; text-align: left; }
.reading-selection-item { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: start; padding: 10px; border-radius: 13px; background: #f7f2e9; }
.reading-selection-item input { margin-top: 3px; accent-color: #b8860c; }
.reading-selection-item strong { display: block; font-size: .78rem; }
.reading-selection-item small { display: -webkit-box; overflow: hidden; color: var(--tarot-muted); font-size: .68rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.selection-dialog > #sendSelectedReadings, .selection-dialog > #skipSelectedReadings { width: 100%; margin-top: 7px; }
.selection-error { margin: 6px 0; color: #a43434; font-size: .72rem; }

@media (max-width: 390px) {
  .tarot-experience { padding-inline: 10px; }
  .tarot-question-card { padding: 16px; }
  .tarot-spread-panel { padding-inline: 7px; }
  .tarot-card-grid { gap: 4px 3px; padding: 9px 5px; }
  .reading-detail { grid-template-columns: 52px 1fr; }
  .reading-detail .opened-card-button { width: 52px; height: 83px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}