/**
 * Tarot Reading — front-end styles.
 *
 * Namespaced with .trp- throughout so nothing leaks into the Synastry theme.
 * Typography is inherited from the theme; the palette follows Synastry:
 * black sections, white buttons with black text (gold #CA9D75 on hover) and
 * #CA9D75 accents. Every colour is a CSS variable written by
 * Tarot Reading → Appearance, with the Synastry palette as the fallback.
 */

/* ------------------------------------------------------------------ *
 *  Shared section shell
 * ------------------------------------------------------------------ */

.trp-section {
	background: var(--trp-bg, #000000);
	color: #ffffff;
	padding: 70px 20px;
}

.trp-spread,
.trp-results-inner {
	max-width: 1140px;
	margin: 0 auto;
	text-align: center;
}

.trp-admin-warning {
	background: #000000;
	border: 1px dashed var(--trp-accent, #ca9d75);
	color: var(--trp-accent, #ca9d75);
	font-size: 14px;
	margin: 20px auto;
	max-width: 720px;
	padding: 16px 20px;
	text-align: center;
}

/* ------------------------------------------------------------------ *
 *  Buttons — white background, black text, gold text on hover
 * ------------------------------------------------------------------ */

.trp-btn {
	background: var(--trp-btn-bg, #ffffff);
	border: 0;
	border-radius: 0;
	color: var(--trp-btn-text, #000000);
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	line-height: 1;
	padding: 16px 36px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.25s ease;
}

.trp-btn:hover,
.trp-btn:focus {
	background: var(--trp-btn-bg, #ffffff);
	color: var(--trp-btn-hover, #ca9d75);
	text-decoration: none;
}

.trp-btn:disabled {
	cursor: default;
	opacity: 0.6;
}

.trp-btn-ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 0;
	color: var(--trp-ghost-text, #ffffff);
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 2px;
	line-height: 1;
	padding: 15px 30px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.trp-btn-ghost:hover,
.trp-btn-ghost:focus {
	border-color: var(--trp-accent, #ca9d75);
	color: var(--trp-btn-hover, #ca9d75);
}

.trp-btn:focus-visible,
.trp-btn-ghost:focus-visible,
.trp-card:focus-visible {
	outline: 2px solid var(--trp-accent, #ca9d75);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 *  Spread
 * ------------------------------------------------------------------ */

/* Title + intro read their font/size/spacing/color from CSS variables set
   inline from the plugin's styling settings (defaults match the theme).
   The declarations are !important with element+class selectors on purpose:
   themes and page builders (Synastry, Elementor) ship high-specificity
   heading/paragraph rules that would otherwise silently override the values
   configured in Tarot Reading → Settings. */
/* --trp-scale shrinks the admin-configured sizes on small screens without
   overwriting the values set in Tarot Reading → Settings. */
.trp-section h2.trp-spread-title {
	color: var(--trp-title-color, #ffffff) !important;
	font-family: var(--trp-font, inherit) !important;
	font-size: calc(var(--trp-title-size, 32px) * var(--trp-scale, 1)) !important;
	letter-spacing: calc(var(--trp-title-tracking, 3px) * var(--trp-scale, 1)) !important;
	line-height: 1.25;
	margin: 0 0 14px !important;
	padding: 0 !important;
	text-transform: uppercase;
}

.trp-section p.trp-intro {
	color: var(--trp-intro-color, rgba(255, 255, 255, 0.75)) !important;
	font-family: var(--trp-font, inherit) !important;
	font-size: calc(var(--trp-intro-size, 16px) * var(--trp-scale, 1)) !important;
	letter-spacing: calc(var(--trp-intro-tracking, 1px) * var(--trp-scale, 1)) !important;
	margin: 0 0 var(--trp-intro-margin, 34px) !important;
	padding: 0 !important;
}

.trp-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	margin: 0 0 30px;
}

@media (max-width: 991px) {
	.trp-grid {
		gap: 16px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.trp-grid {
		gap: 10px;
	}

	.trp-section {
		padding: 46px 14px;
	}
}

.trp-card {
	-webkit-tap-highlight-color: transparent;
	background: transparent;
	border: 0;
	cursor: pointer;
	display: block;
	margin: 0;
	padding: 0;
	perspective: 800px;
	position: relative;
	width: 100%;
}

/* Shuffle animation: transforms are applied inline (per-card offsets to the
   pile at the grid centre); this class supplies the transition. */
.trp-card.trp-anim {
	transition: transform 0.48s cubic-bezier(0.55, 0.06, 0.35, 1);
	will-change: transform;
}

.trp-grid.is-shuffling {
	pointer-events: none;
}

.trp-card-back {
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border: 1px solid rgba(202, 157, 117, 0.45);
	border-radius: 10px;
	display: block;
	aspect-ratio: 3 / 5;
	position: relative;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
	will-change: transform;
}

/* Decorative fallback when no card-back image is set. */
.trp-card-back--empty {
	background-image: radial-gradient(circle at 50% 35%, rgba(202, 157, 117, 0.22), transparent 60%),
		linear-gradient(160deg, #16110c 0%, #060504 100%);
}

.trp-card-back--empty::after {
	color: var(--trp-accent, #ca9d75);
	content: "\2726"; /* ✦ */
	font-size: 26px;
	left: 50%;
	opacity: 0.8;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.trp-card:hover .trp-card-back,
.trp-card:focus-visible .trp-card-back {
	border-color: rgba(202, 157, 117, 0.9);
	transform: translateY(-6px);
}

/* Selected: lift + slight flip tilt + gold glow. */
.trp-card.is-selected .trp-card-back {
	border-color: var(--trp-accent, #ca9d75);
	box-shadow: 0 14px 34px rgba(202, 157, 117, 0.35), 0 0 0 1px var(--trp-accent, #ca9d75) inset;
	transform: translateY(-14px) rotateY(14deg);
}

.trp-counter {
	color: var(--trp-accent, #ca9d75);
	font-size: 13px;
	letter-spacing: 3px;
	margin: 0;
	text-transform: uppercase;
}

.trp-counter-count {
	font-size: 17px;
}

.trp-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 26px;
}

/* ------------------------------------------------------------------ *
 *  Modal — "Reveal Your Answer"
 * ------------------------------------------------------------------ */

.trp-modal {
	display: none;
	inset: 0;
	position: fixed;
	z-index: 99999;
}

.trp-modal.is-open {
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 20px;
}

.trp-modal-overlay {
	background: rgba(0, 0, 0, 0.82);
	inset: 0;
	position: absolute;
}

.trp-modal-dialog {
	animation: trp-fade-up 0.3s ease;
	background: var(--trp-bg, #000000);
	border: 1px solid var(--trp-accent, #ca9d75);
	max-width: 480px;
	padding: 44px 34px 40px;
	position: relative;
	text-align: center;
	width: 100%;
}

.trp-modal-title {
	color: var(--trp-title-color, #ffffff);
	font-size: 26px;
	letter-spacing: 2px;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.trp-modal-text {
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 6px;
}

.trp-modal-error {
	color: #e2735f;
	font-size: 14px;
	margin: 10px 0 0;
}

.trp-modal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 26px;
}

@keyframes trp-fade-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ------------------------------------------------------------------ *
 *  Spread selector (custom spreads)
 * ------------------------------------------------------------------ */

.trp-spread-picker {
	margin: 0 0 36px;
}

.trp-spread-picker-label {
	color: var(--trp-accent, #ca9d75);
	font-size: 12px;
	letter-spacing: 2px;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.trp-spread-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.trp-spread-choice {
	align-items: center;
	background: transparent;
	border: 1px solid rgba(202, 157, 117, 0.35);
	border-radius: 0;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font-family: inherit;
	gap: 6px;
	justify-content: flex-start;
	min-width: 68px;
	padding: 12px 12px 9px;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.trp-spread-choice:hover,
.trp-spread-choice:focus-visible {
	border-color: var(--trp-accent, #ca9d75);
}

.trp-spread-choice.is-active {
	background: rgba(202, 157, 117, 0.12);
	border-color: var(--trp-accent, #ca9d75);
	box-shadow: 0 0 0 1px var(--trp-accent, #ca9d75) inset;
}

.trp-spread-icon {
	color: var(--trp-accent, #ca9d75);
	display: grid;
	gap: 2px;
	grid-auto-rows: 9px;
	grid-template-columns: repeat(var(--ic, 4), 6px);
	justify-content: center;
	min-height: 20px;
}

.trp-spread-icon i {
	background: currentColor;
	border-radius: 1px;
	display: block;
	grid-column: var(--c, auto) / span var(--s, 1);
	grid-row: var(--r, auto);
	height: 9px;
	min-width: 6px;
	opacity: 0.9;
}

.trp-spread-icon i.is-cross {
	opacity: 0.55;
	transform: rotate(90deg);
}

.trp-spread-count {
	color: var(--trp-accent, #ca9d75);
	font-size: 12px;
	letter-spacing: 1px;
}

.trp-spread-name {
	color: rgba(255, 255, 255, 0.6);
	font-size: 10px;
	letter-spacing: 1px;
	max-width: 96px;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 *  Picker layout ([tarot_picker]) — strip + slots
 * ------------------------------------------------------------------ */

.trp-picker {
	margin: 0 auto;
	max-width: 1140px;
	text-align: center;
}

.trp-learn {
	margin: -18px 0 28px;
}

.trp-learn a {
	color: var(--trp-accent, #ca9d75);
	font-size: 14px;
	letter-spacing: 1px;
	text-decoration: underline;
	transition: color 0.25s ease;
}

.trp-learn a:hover {
	color: #ffffff;
}

.trp-question {
	margin: 0 0 32px;
}

.trp-question-input {
	background: transparent;
	border: 1px solid rgba(202, 157, 117, 0.5);
	border-radius: 0;
	color: #ffffff;
	font-family: inherit;
	font-size: 15px;
	max-width: 620px;
	padding: 14px 18px;
	/* Placeholder and typed text sit centred, on every screen size. */
	text-align: center;
	width: 100%;
}

.trp-question-input:focus {
	border-color: var(--trp-accent, #ca9d75);
	outline: none;
}

.trp-question-input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.trp-choose-label {
	color: var(--trp-accent, #ca9d75);
	font-size: 13px;
	letter-spacing: 3px;
	margin: 0 0 18px;
	text-transform: uppercase;
}

.trp-strip-row {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: center;
	margin: 0 0 28px;
}

.trp-shuffle-round {
	background: var(--trp-btn-bg, #ffffff);
	border: 0;
	border-radius: 50%;
	color: var(--trp-btn-text, #000000);
	cursor: pointer;
	flex: 0 0 auto;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	height: 88px;
	letter-spacing: 1px;
	line-height: 1.4;
	overflow-wrap: break-word;
	padding: 8px 7px;
	text-transform: uppercase;
	transition: color 0.25s ease;
	width: 88px;
}

/* "Stop Shuffling" is a longer label than "Shuffle Cards": shrink it so it
   always stays inside the circle rather than spilling past its edge. */
.trp-shuffle-round.is-stopping {
	font-size: 9px;
	letter-spacing: 0;
	line-height: 1.25;
}

.trp-btn.is-stopping,
.trp-btn-ghost.is-stopping {
	letter-spacing: 1px;
}

.trp-shuffle-round:hover,
.trp-shuffle-round:focus {
	color: var(--trp-btn-hover, #ca9d75);
}

/* Fixed width: the strip must not resize as cards are picked or re-dealt,
   otherwise the flex row re-centres and the round shuffle button drifts.
   The scrollbar is hidden (the ribbon still scrolls by touch/wheel) and the
   card pitch is tuned so a full strip fits without needing to scroll. */
.trp-strip {
	-ms-overflow-style: none;
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 18px 12px 12px;
	scrollbar-width: none;
	width: 780px;
}

.trp-strip::-webkit-scrollbar {
	display: none;
}

.trp-strip-card {
	-webkit-tap-highlight-color: transparent;
	background: transparent;
	border: 0;
	cursor: pointer;
	flex: 0 0 auto;
	margin-left: -48px;
	padding: 0;
	position: relative;
	transition: transform 0.25s ease, opacity 0.25s ease, width 0.25s ease, margin 0.25s ease;
	width: 76px;
}

.trp-strip-card:first-child {
	margin-left: 0;
}

.trp-strip-card .trp-card-back {
	border-radius: 6px;
}

.trp-strip-card:hover,
.trp-strip-card:focus-visible {
	transform: translateY(-12px);
	z-index: 5;
}

.trp-strip-card.is-picked {
	margin-left: 0;
	opacity: 0;
	pointer-events: none;
	width: 0;
}

/* Continuous deck shuffle. Every card moves at the same moment — no
   per-card delay — collapsing into a closed deck at the centre of the
   ribbon, riffling there, then fanning open again. It repeats until the
   visitor stops it. --i is the card's index, --n the number of cards, so
   each card knows exactly how far to travel to land on the stack. */
.trp-strip.is-shuffling {
	/* Cards travel sideways past the ribbon's edges mid-riffle, so nothing
	   may clip them while the animation runs. */
	overflow: visible;
	pointer-events: none;
}

.trp-strip.is-shuffling .trp-strip-card {
	/* Distance this particular card must travel to land on the closed deck
	   at the centre of the ribbon. */
	--closed-x: calc((var(--n, 24) - 1) * 14px - var(--i, 0) * 28px);

	animation: trp-riffle 1.9s cubic-bezier(0.42, 0, 0.3, 1) infinite;
}

/* Alternate cards take the mirrored path, so the deck splits into two
   halves that slide across one another before merging. */
.trp-strip.is-shuffling .trp-strip-card:nth-child(even) {
	animation-name: trp-riffle-alt;
}

/* Odd cards: lift, sweep right across their neighbours riding on top,
   drop onto the stack, then fan out underneath. */
@keyframes trp-riffle {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(0deg);
		z-index: 1;
	}

	10% {
		transform: translate3d(0, -18px, 0) rotate(3deg);
		z-index: 30;
	}

	24% {
		transform: translate3d(56px, -22px, 0) rotate(7deg);
		z-index: 30;
	}

	40% {
		transform: translate3d(var(--closed-x), -15px, 0) rotate(3deg);
		z-index: 30;
	}

	54% {
		transform: translate3d(var(--closed-x), 0, 0) rotate(0deg);
		z-index: 30;
	}

	66% {
		transform: translate3d(var(--closed-x), 0, 0) rotate(0deg);
		z-index: 1;
	}

	84% {
		transform: translate3d(calc(var(--closed-x) * 0.42), -7px, 0) rotate(-2deg);
		z-index: 1;
	}
}

/* Even cards: the mirrored half — sweeps left and underneath, then rides
   on top as the deck fans open. */
@keyframes trp-riffle-alt {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(0deg);
		z-index: 1;
	}

	10% {
		transform: translate3d(0, 14px, 0) rotate(-3deg);
		z-index: 1;
	}

	24% {
		transform: translate3d(-56px, 18px, 0) rotate(-7deg);
		z-index: 1;
	}

	40% {
		transform: translate3d(var(--closed-x), 13px, 0) rotate(-3deg);
		z-index: 1;
	}

	54% {
		transform: translate3d(var(--closed-x), 0, 0) rotate(0deg);
		z-index: 1;
	}

	66% {
		transform: translate3d(var(--closed-x), 0, 0) rotate(0deg);
		z-index: 30;
	}

	84% {
		transform: translate3d(calc(var(--closed-x) * 0.42), 7px, 0) rotate(2deg);
		z-index: 30;
	}
}

@keyframes trp-wave-up {
	30% {
		transform: translateY(-16px) rotate(-4deg);
	}

	70% {
		transform: translateY(6px) rotate(2deg);
	}
}

@keyframes trp-wave-down {
	30% {
		transform: translateY(14px) rotate(4deg);
	}

	70% {
		transform: translateY(-6px) rotate(-2deg);
	}
}

.trp-deck-choose {
	margin: 0 0 34px;
}

.trp-deck-select {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23CA9D75'/%3E%3C/svg%3E");
	background-position: right 16px center;
	background-repeat: no-repeat;
	border: 1px solid rgba(202, 157, 117, 0.5);
	border-radius: 0;
	color: #ffffff;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	letter-spacing: 2px;
	padding: 13px 44px 13px 20px;
	text-transform: uppercase;
	transition: border-color 0.25s ease;
}

.trp-deck-select:hover,
.trp-deck-select:focus {
	border-color: var(--trp-accent, #ca9d75);
	outline: none;
}

.trp-deck-select option {
	background: #000000;
	color: #ffffff;
}

.trp-slots {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0 auto 26px;
	max-width: 640px;
	/* Room for the card name printed under a filled slot. */
	padding-bottom: 22px;
}

@media (max-width: 560px) {
	.trp-slots {
		gap: 12px;
	}
}

.trp-slot {
	-webkit-tap-highlight-color: transparent;
	align-items: center;
	aspect-ratio: 3 / 5;
	background: rgba(255, 255, 255, 0.02);
	border: 1px dashed rgba(202, 157, 117, 0.4);
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	padding: 0;
	position: relative;
}

.trp-slot-ph {
	color: rgba(202, 157, 117, 0.35);
	font-size: 44px;
	font-weight: 700;
}

.trp-slot-card {
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border: 1px solid var(--trp-accent, #ca9d75);
	border-radius: 10px;
	inset: 0;
	opacity: 0;
	position: absolute;
	transform: scale(0.7);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.trp-slot.is-filled .trp-slot-card {
	opacity: 1;
	transform: scale(1);
}

/* Chosen card showing its own artwork (Appearance → Cards). */
.trp-slot.is-face-up .trp-slot-card {
	animation: trp-slot-flip 0.45s ease;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

@keyframes trp-slot-flip {
	0% {
		transform: rotateY(90deg) scale(0.9);
	}

	100% {
		transform: rotateY(0deg) scale(1);
	}
}

.trp-slot.is-filled .trp-slot-ph {
	visibility: hidden;
}

.trp-slot.is-filled:hover .trp-slot-card {
	box-shadow: 0 8px 22px rgba(202, 157, 117, 0.3);
}

/* Slots arranged as a spread layout (positions from the chosen spread).
   The max-width formula sizes the cards from the viewport height so the
   whole pattern fits on screen without scrolling: each row gets ~62vh/rows
   of height, and card width follows the 3:5 aspect ratio (× 0.6). */
.trp-slots-layout {
	column-gap: 30px;
	grid-template-columns: repeat(var(--trp-cols, 4), minmax(0, 1fr));
	/* Cards are sized from the viewport height so the whole pattern fits;
	   the factor leaves room for the position label above each card and the
	   card name below it. */
	max-width: min(900px, max(280px, calc(var(--trp-cols, 4) * ((50vh / var(--trp-rows, 3)) * 0.6) + (var(--trp-cols, 4) - 1) * 30px)));
	/* Top padding keeps the first row's labels inside the box even when a
	   page-builder container clips overflow; the bottom leaves room for the
	   last row's card names. */
	padding-bottom: 24px;
	padding-top: 26px;
	row-gap: 68px;
}

.trp-slots-layout .trp-slot {
	grid-column: var(--c, auto) / span var(--s, 1);
	grid-row: var(--r, auto);
	overflow: visible;
	/* dx/dy let two cards share a cell and overlap (Soulmate soul pair). */
	transform: translate(var(--dx, 0), var(--dy, 0));
	z-index: 1;
}

.trp-slots-layout .trp-slot.is-cross {
	z-index: 2;
}

/* Only the card visual rotates (the inner rotor); the slot box — and the
   label anchored to it — stay upright. */
.trp-slot .trp-rotor {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	inset: 0;
	justify-content: center;
	position: absolute;
	transform: rotate(var(--rot, 0deg));
}

.trp-slots-layout .trp-slot.is-cross .trp-rotor {
	transform: rotate(var(--rot, 90deg)) scale(0.92);
}

/* In a spread layout the dashed placeholder moves onto the rotor so it
   tilts together with the card: a rotated card then matches its own
   outline exactly instead of spilling past an upright box. */
.trp-slots-layout .trp-slot {
	background: transparent;
	border: 0;
}

.trp-slots-layout .trp-slot .trp-rotor {
	background: rgba(255, 255, 255, 0.02);
	border: 1px dashed rgba(202, 157, 117, 0.4);
	border-radius: 10px;
}

/* Keep the "?" upright inside a tilted placeholder. */
.trp-slots-layout .trp-slot .trp-slot-ph {
	transform: rotate(calc(-1 * var(--rot, 0deg)));
}

/* Position label sits just above the card's top edge. It lives inside the
   rotor, so on a tilted card it runs along that card's own edge — matching
   the Soulmate design and keeping each label attached to its own card. */
.trp-slot-label {
	bottom: calc(100% + 8px);
	color: rgba(202, 157, 117, 0.9);
	font-size: 10px;
	left: 50%;
	letter-spacing: 1px;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	transform: translateX(-50%);
	white-space: nowrap;
	z-index: 5;
}

.trp-slots-layout .trp-slot.is-cross .trp-slot-label {
	display: none;
}

/* Card name sits just under the card's bottom edge — also inside the rotor,
   so it follows a tilted card the same way the label does. */
.trp-slot-name {
	color: var(--trp-title-color, #ffffff);
	font-size: 11px;
	left: 50%;
	letter-spacing: 1px;
	line-height: 1.3;
	max-width: 190%;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	top: calc(100% + 6px);
	transform: translateX(-50%);
	width: max-content;
	z-index: 4;
}

/* On a tilted card the name moves to the card's outer long edge rather than
   its bottom edge: with a -45° tilt "below the card" points down-right —
   straight over the neighbouring card — so it is placed to the side that
   rotates away from the pair instead. The counter-rotation keeps the words
   running straight across, so they stay easy to read and predictable in
   width (capped, wrapping to a second line rather than sprawling into a
   neighbour's label). */
.trp-slot.is-rotated .trp-slot-name {
	font-size: 10px;
	line-height: 1.35;
	max-width: 108px;
	top: 50%;
}

.trp-slot.is-rot-neg .trp-slot-name {
	left: auto;
	right: calc(100% + 12px);
	text-align: center;
	transform: translateY(-50%) rotate(calc(-1 * var(--rot, 0deg)));
}

.trp-slot.is-rot-pos .trp-slot-name {
	left: calc(100% + 12px);
	text-align: center;
	transform: translateY(-50%) rotate(calc(-1 * var(--rot, 0deg)));
}

@media (max-width: 767px) {
	.trp-strip-row {
		flex-direction: column;
		gap: 16px;
	}

	.trp-strip {
		max-width: 100%;
	}
}

/* ------------------------------------------------------------------ *
 *  Yes or No reading ([tarot_yesno]) — rotated X board
 * ------------------------------------------------------------------ */

.trp-yesno {
	margin: 0 auto;
	max-width: 1140px;
	text-align: center;
}

.trp-yesno-status {
	color: var(--trp-accent, #ca9d75);
	font-size: 12px;
	letter-spacing: 3px;
	margin: 0 0 34px;
	text-transform: uppercase;
}

.trp-yesno-board {
	display: grid;
	gap: 48px 20px;
	grid-template-columns: repeat(var(--trp-cols, 5), minmax(0, 1fr));
	margin: 0 auto 40px;
	max-width: min(660px, max(300px, calc(var(--trp-cols, 5) * ((64vh / var(--trp-rows, 5)) * 0.6) + (var(--trp-cols, 5) - 1) * 18px)));
	/* Top padding keeps the first row's labels inside the board box, so a
	   page-builder container with overflow:hidden can never clip them. */
	padding-top: 36px;
	position: relative;
}

.trp-yesno-cell {
	grid-column: var(--c, auto);
	grid-row: var(--r, auto);
	position: relative;
	z-index: 1;
}

.trp-yesno-cell .trp-rotor {
	position: relative;
	transform: rotate(var(--rot, 0deg));
}

.trp-yesno-cell .trp-card-back {
	border-radius: 8px;
}

/* Answer label: upright horizontal text centered above each card (it does
   NOT rotate with the card), raised above every neighbouring card so words
   like "Maybe" can never be covered or cut off. */
.trp-yesno-label {
	bottom: calc(100% + 14px);
	color: var(--trp-accent, #ca9d75);
	font-size: 11px;
	left: 50%;
	letter-spacing: 2px;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	transform: translateX(-50%);
	white-space: nowrap;
	z-index: 5;
}

/* Re-deal ripple across the X. */
.trp-yesno-board.is-shuffling .trp-yesno-cell {
	animation: trp-wave-up 0.75s ease both;
	animation-delay: calc(var(--i, 0) * 45ms);
}

.trp-yesno-board.is-shuffling .trp-yesno-cell:nth-child(even) {
	animation-name: trp-wave-down;
}

@media (max-width: 560px) {
	.trp-yesno-board {
		gap: 22px 10px;
	}

	.trp-yesno-label {
		font-size: 8px;
		letter-spacing: 1px;
	}
}

/* ------------------------------------------------------------------ *
 *  Results — flip reveal
 * ------------------------------------------------------------------ */

.trp-results-title {
	color: #ffffff;
	font-size: 32px;
	letter-spacing: 3px;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.trp-results-deck {
	color: var(--trp-accent, #ca9d75);
	font-size: 13px;
	letter-spacing: 3px;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.trp-results-spread {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	letter-spacing: 3px;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.trp-results-question {
	color: rgba(255, 255, 255, 0.65);
	font-size: 15px;
	font-style: italic;
	margin: 0 0 8px;
}

.trp-results-text {
	color: rgba(255, 255, 255, 0.72);
	margin: 14px 0 0;
}

.trp-results-grid {
	display: grid;
	gap: 36px 28px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 44px 0 0;
}

@media (max-width: 991px) {
	.trp-results-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.trp-results-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.trp-flip {
	margin: 0 auto;
	max-width: 300px;
}

/* The reading is paid for by the time it reaches this page, so results are
   rendered face-up: the card's own artwork, never the card back. They fade
   and rise into place one after another instead of flipping. */
.trp-cardface {
	align-items: center;
	animation: trp-reveal 0.7s ease both;
	animation-delay: calc(var(--i, 0) * 0.13s);
	aspect-ratio: 3 / 5;
	background-color: transparent;
	border: 1px solid rgba(202, 157, 117, 0.55);
	border-radius: 10px;
	display: flex;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

@keyframes trp-reveal {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.96);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.trp-cardface img,
.trp-face-img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.trp-face-name {
	color: var(--trp-accent, #ca9d75);
	font-size: 18px;
	letter-spacing: 2px;
	padding: 12px;
	text-transform: uppercase;
}

.trp-result-name {
	color: var(--trp-accent, #ca9d75);
	font-size: 17px;
	letter-spacing: 2px;
	margin: 22px 0 10px;
	text-transform: uppercase;
}

.trp-result-desc {
	color: rgba(255, 255, 255, 0.75);
	font-size: 15px;
	line-height: 1.75;
	text-align: left;
}

.trp-result-desc p {
	color: inherit;
	margin: 0 0 1em;
}

/* Results arranged in the chosen spread layout. Sized from the viewport
   height (like .trp-slots-layout) so the full pattern fits on screen. */
.trp-layout {
	display: grid;
	gap: 44px 26px;
	grid-template-columns: repeat(var(--trp-cols, 4), minmax(0, 1fr));
	margin: 44px auto 0;
	max-width: min(900px, max(300px, calc(var(--trp-cols, 4) * ((54vh / var(--trp-rows, 3)) * 0.6) + (var(--trp-cols, 4) - 1) * 26px)));
}

.trp-layout-cell {
	grid-column: var(--c, auto) / span var(--s, 1);
	grid-row: var(--r, auto);
	position: relative;
	transform: translate(var(--dx, 0), var(--dy, 0));
	z-index: 1;
}

.trp-layout-cell .trp-flip {
	margin: 0 auto;
	max-width: 170px;
	transform: rotate(var(--rot, 0deg));
}

.trp-layout-cell.is-cross {
	z-index: 2;
}

.trp-layout-cell.is-cross .trp-flip {
	transform: rotate(var(--rot, 90deg)) scale(0.92);
}

/* Decorative circular emblem behind spread layouts that declare one. */
.trp-spread-center {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: radial-gradient(circle, rgba(202, 157, 117, 0.14), transparent 72%);
	border: 1px solid rgba(202, 157, 117, 0.35);
	border-radius: 50%;
	display: flex;
	grid-column: var(--c, 2) / span var(--s, 3);
	grid-row: var(--r, 2) / span var(--s, 3);
	justify-content: center;
	pointer-events: none;
	place-self: center;
	width: 76%;
	z-index: 0;
}

.trp-spread-center::after {
	color: rgba(202, 157, 117, 0.75);
	content: "\2736"; /* ✶ */
	font-size: clamp(22px, 4vw, 40px);
}

/* Soulmate: an infinity loop watermark instead of the circle. */
.trp-spread-center--infinity {
	aspect-ratio: auto;
	background: none;
	border: 0;
	border-radius: 0;
	height: 100%;
	width: 100%;
}

.trp-spread-center--infinity::after {
	color: var(--trp-accent, #ca9d75);
	content: "\221E"; /* ∞ */
	font-size: clamp(300px, 62vw, 760px);
	line-height: 0.8;
	opacity: 0.17;
}

.trp-layout-label {
	color: var(--trp-accent, #ca9d75);
	display: block;
	font-size: 11px;
	letter-spacing: 1px;
	margin-top: 8px;
	position: relative;
	text-transform: uppercase;
	/* Tilts with its card, so the results page reads the same way as the
	   selection screen (no-op when the position has no rotation). */
	transform: rotate(var(--rot, 0deg));
	z-index: 5;
}

/* Tilted positions put their label beside the card, on the side the card
   leans away to — matching the selection screen. */
.trp-layout-cell.is-rot-neg .trp-layout-label,
.trp-layout-cell.is-rot-pos .trp-layout-label {
	margin-top: 0;
	max-width: 160%;
	position: absolute;
	top: 50%;
	width: max-content;
}

.trp-layout-cell.is-rot-neg .trp-layout-label {
	right: calc(100% + 6px);
	text-align: right;
	transform: translateY(-50%) rotate(var(--rot, 0deg));
}

.trp-layout-cell.is-rot-pos .trp-layout-label {
	left: calc(100% + 6px);
	text-align: left;
	transform: translateY(-50%) rotate(var(--rot, 0deg));
}

.trp-layout-cell.is-cross .trp-layout-label {
	display: none;
}

/* Detailed meanings under the layout. */
.trp-result-details {
	margin: 54px auto 0;
	max-width: 780px;
	text-align: left;
}

.trp-result-detail {
	border-top: 1px solid rgba(202, 157, 117, 0.25);
	padding: 26px 0;
}

.trp-result-detail:first-child {
	border-top: 0;
	padding-top: 0;
}

.trp-result-detail .trp-result-name {
	margin-top: 0;
}

.trp-result-pos {
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: none;
}

.trp-results-again {
	margin: 52px 0 0;
}

.trp-results-empty .trp-results-again {
	margin-top: 30px;
}

/* ------------------------------------------------------------------ *
 *  Order-received page — reading link
 * ------------------------------------------------------------------ */

.trp-thankyou-link {
	margin: 0 0 24px;
	text-align: center;
}

.trp-thankyou-note {
	margin: 0 0 24px;
	text-align: center;
}

/* ------------------------------------------------------------------ *
 *  Mobile typography
 *
 *  Headline and intro shrink through --trp-scale (so the sizes set in
 *  Settings are respected, just scaled); the remaining UI text is stepped
 *  down directly. Selectors are doubled where a value also comes from the
 *  inline admin styles, so these rules win regardless of source order.
 * ------------------------------------------------------------------ */

@media (max-width: 991px) {
	.trp-section.trp-section {
		--trp-scale: 0.86;
	}
}

@media (max-width: 767px) {
	.trp-section.trp-section {
		--trp-scale: 0.78;
	}

	.trp-btn,
	.trp-btn-ghost {
		font-size: 11px;
		letter-spacing: 1.5px;
		padding: 13px 22px;
	}

	.trp-shuffle-round {
		font-size: 10px;
		height: 74px;
		padding: 7px 6px;
		width: 74px;
	}

	.trp-shuffle-round.is-stopping {
		font-size: 8px;
	}

	.trp-counter,
	.trp-choose-label,
	.trp-results-deck,
	.trp-yesno-status {
		font-size: 11px;
		letter-spacing: 2px;
	}

	.trp-counter-count {
		font-size: 14px;
	}

	.trp-question-input {
		font-size: 12px;
		padding: 11px 12px;
	}

	.trp-question-input::placeholder {
		font-size: 12px;
	}

	.trp-deck-select {
		font-size: 12px;
		padding: 11px 38px 11px 16px;
	}

	.trp-spread-picker-label,
	.trp-results-spread {
		font-size: 10px;
	}

	.trp-spread-name {
		font-size: 9px;
	}

	.trp-slot-label,
	.trp-layout-label {
		font-size: 9px;
		letter-spacing: 0.5px;
	}

	.trp-slot-name {
		font-size: 9px;
		letter-spacing: 0.5px;
	}

	.trp-slot.is-rotated .trp-slot-name {
		font-size: 8px;
	}

	.trp-modal-title {
		font-size: 20px;
	}

	.trp-modal-text {
		font-size: 14px;
	}

	.trp-modal-dialog {
		padding: 32px 22px 28px;
	}

	.trp-results-title {
		font-size: 24px;
		letter-spacing: 2px;
	}

	.trp-result-name {
		font-size: 15px;
	}

	.trp-result-desc,
	.trp-results-question {
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.trp-section.trp-section {
		--trp-scale: 0.68;
	}

	.trp-btn,
	.trp-btn-ghost {
		font-size: 10px;
		letter-spacing: 1px;
		padding: 12px 18px;
	}

	.trp-shuffle-round {
		font-size: 9px;
		height: 64px;
		padding: 6px 5px;
		width: 64px;
	}

	.trp-shuffle-round.is-stopping {
		font-size: 7px;
	}

	.trp-question-input {
		font-size: 11px;
		padding: 10px 12px;
	}

	.trp-question-input::placeholder {
		font-size: 11px;
	}

	.trp-counter,
	.trp-choose-label,
	.trp-results-deck,
	.trp-yesno-status {
		font-size: 10px;
		letter-spacing: 1.5px;
	}

	.trp-slot-label,
	.trp-slot-name,
	.trp-layout-label {
		font-size: 8px;
		letter-spacing: 0;
	}

	.trp-slot.is-rotated .trp-slot-name {
		font-size: 7px;
	}

	.trp-results-title {
		font-size: 20px;
	}

	.trp-modal-title {
		font-size: 18px;
	}

	.trp-result-desc {
		font-size: 13px;
	}
}

/* ------------------------------------------------------------------ *
 *  Reduced motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.trp-card-back,
	.trp-cardface,
	.trp-modal-dialog,
	.trp-card.trp-anim,
	.trp-strip.is-shuffling .trp-strip-card,
	.trp-strip-card,
	.trp-slot-card,
	.trp-yesno-board.is-shuffling .trp-yesno-cell {
		animation: none;
		transition: none;
	}

	.trp-card.is-selected .trp-card-back {
		transform: none;
	}
}