/* Shared values come from Rising Lotus Huisstijl. Original values remain as fallbacks. */

/* Tarot Lezingen - frontend (schudden, echt kiezen en leggen)
   Kleuren volgen automatisch de sitevariabelen --rl, --cream,
   --mid, --muted en --ink; de waarden hieronder zijn de fallback.

   Bewust NIET aan het thema gekoppeld:
   - --tl-rug-achtergrond: de kaartrug heeft een eigen kleur, zodat het
     schudden en de waaier nooit een effen thema-zwart vlak worden.
     (Instelbaar via Tarot Lezingen -> Instellingen.)
   - --tl-vlak: de achtergrond van kaarten, panelen en knoppen. Op
     donkere thema's kun je --tl-vlak en --tl-ink samen overschrijven. */

.tl-app {
	--tl-rl: var(--rl, var(--rl-style-accent,#cd9a99));
	--tl-cream: var(--cream, var(--rl-style-surface,#f5f5f5));
	--tl-mid: var(--mid, var(--rl-style-line,#e8dfd8));
	--tl-muted: var(--muted, #8a7d75);
	--tl-ink: var(--ink, var(--rl-style-ink,#1a1a1a));
	--tl-accent-tekst: var(--rl-style-focus,#7a4f4f);
	--tl-muted-tekst: var(--rl-style-muted,#756a64);
	--tl-rand: #978982;
	--tl-vlak: #fff;
	--tl-rug-achtergrond: #2b2136;
	--tl-radius: 8px;
	--tl-schaduw: var(--rl-shadow-subtle,
		0 12px 28px -14px rgba(26, 26, 26, 0.18),
		0 4px 10px -6px rgba(205, 154, 153, 0.22));
	--tl-kaart-b: 150px;

	max-width: 980px;
	margin: 0 auto;
	color: var(--tl-ink);
	font-family: var(--rl-style-font-body,var(--body-font-family, "Lato"), sans-serif);
	container: tl-app / inline-size;
}

.tl-app *,
.tl-app *::before,
.tl-app *::after {
	box-sizing: border-box;
}

/* Het hidden-attribuut verliest het anders van elke display-regel
   (uit het thema of uit deze stylesheet zelf, zoals display: flex op
   .tl-acties of inline-flex op de startknop) - daardoor bleef het
   startdeck zichtbaar boven de schudanimatie. Daarom expliciet: */
.tl-app [hidden] {
	display: none !important;
}

/* ── Kop ─────────────────────────────────────────── */

.tl-kop {
	text-align: center;
	margin-bottom: 1.25rem;
}

.tl-cap {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tl-accent-tekst);
	font-weight: 700;
	margin: 0 0 0.35rem;
}

.tl-titel {
	margin: 0 0 0.35rem;
	color: var(--tl-ink);
}

.tl-beschrijving {
	color: var(--tl-muted-tekst);
	margin: 0;
}

/* ── Knoppen ─────────────────────────────────────── */

.tl-acties,
.tl-acties-boven,
.tl-acties-onder,
.tl-waaier-acties {
	display: flex;
	gap: 0.7rem;
	justify-content: center;
	flex-wrap: wrap;
}

.tl-acties {
	margin-bottom: 1.5rem;
}

.tl-acties-boven {
	margin: 0 0 1rem;
}

.tl-acties-onder {
	margin: 0.5rem 0 1.5rem;
}

.tl-waaier-acties {
	margin: 0 0 1.75rem;
}

/* Alle interactieve elementen zijn <button>s; de selectors hieronder
   dragen bewust ".tl-app button" zodat themaregels als
   ".entry-content button { background: ... }" er niet doorheen lekken. */

.tl-app button.tl-knop {
	appearance: none;
	background: var(--tl-vlak);
	border: 1px solid var(--tl-ink);
	border-radius: var(--tl-radius);
	box-shadow: none;
	margin: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--tl-ink);
	font-family: var(--rl-style-font-body,inherit);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 0.6rem 1.7rem;
	min-height: 46px;
	cursor: pointer;
	touch-action: manipulation;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.tl-app button.tl-knop:active {
	background: var(--tl-cream);
}

.tl-app button.tl-knop:focus-visible {
	background: var(--tl-accent-tekst);
	border-color: var(--tl-accent-tekst);
	color: #fff;
	outline: 2px solid var(--tl-accent-tekst);
	outline-offset: 2px;
}

@media (hover: hover) {
	.tl-app button.tl-knop:hover {
		background: var(--tl-accent-tekst);
		border-color: var(--tl-accent-tekst);
		color: #fff;
	}
}

.tl-app button.tl-knop:disabled {
	opacity: 0.55;
	cursor: wait;
}

.tl-app button.tl-knop-secundair {
	border-color: var(--tl-rand);
	color: var(--tl-muted-tekst);
	font-size: 0.88rem;
}


/* Het zichtbare kaartendeck is de startknop van de lezing. */
.tl-start-acties {
	margin: 0 0 1.5rem;
}

.tl-app button.tl-start-dek {
	appearance: none;
	display: inline-flex;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	text-align: center;
	flex-direction: column;
	align-items: center;
	min-width: 180px;
	padding: 0.35rem 1rem 0.45rem;
	border: 0;
	background: transparent;
	color: var(--tl-ink);
	font-family: var(--rl-style-font-body,inherit);
	cursor: pointer;
	touch-action: manipulation;
}

.tl-start-dek-beeld {
	position: relative;
	display: block;
	width: 88px;
	aspect-ratio: 7 / 12;
	margin: 0.15rem auto 0.8rem;
	transition: transform 0.22s ease;
}

.tl-start-dek-kaart {
	position: absolute;
	inset: 0;
	display: block;
	box-shadow: 0 3px 8px rgba(26, 26, 26, 0.18);
	transition: transform 0.22s ease;
}

.tl-start-dek-kaart:nth-child(1) { transform: translate(-7px, 3px) rotate(-4deg); }
.tl-start-dek-kaart:nth-child(2) { transform: translate(-3px, 1px) rotate(-2deg); }
.tl-start-dek-kaart:nth-child(3) { transform: translate(3px, 1px) rotate(2deg); }
.tl-start-dek-kaart:nth-child(4) { transform: translate(7px, 3px) rotate(4deg); }
.tl-start-dek-kaart:nth-child(5) { transform: translate(0, 0); }

.tl-start-dek-titel {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.tl-start-dek-hint {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--tl-muted-tekst);
}

.tl-start-dek:active .tl-start-dek-beeld {
	transform: translateY(2px) scale(0.98);
}

.tl-app button.tl-start-dek:focus-visible {
	outline: 2px solid var(--tl-accent-tekst);
	outline-offset: 5px;
}

.tl-app button.tl-start-dek:disabled {
	opacity: 0.55;
	cursor: wait;
}

@media (hover: hover) {
	.tl-start-dek:hover .tl-start-dek-beeld {
		transform: translateY(-4px);
	}

	.tl-start-dek:hover .tl-start-dek-titel {
		color: var(--tl-accent-tekst);
	}
}

/* ── Status & hint ───────────────────────────────── */

.tl-status,
.tl-hint {
	text-align: center;
	font-size: 0.875rem;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tl-muted-tekst);
	font-weight: 700;
	margin: 0 0 1.1rem;
}

.tl-status:focus {
	outline: none;
}

.tl-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ── Kaartrug (gedeeld door dek, waaier, vlieger en bord) ── */

.tl-rug {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: var(--tl-rug-achtergrond);
	background-image:
		radial-gradient(ellipse at 50% 38%, rgba(205, 154, 153, 0.30), transparent 62%),
		repeating-linear-gradient(45deg, rgba(205, 154, 153, 0.22) 0 1px, transparent 1px 9px),
		repeating-linear-gradient(-45deg, rgba(205, 154, 153, 0.14) 0 1px, transparent 1px 9px);
	overflow: hidden;
}

.tl-rug::before {
	content: '';
	position: absolute;
	inset: 5px;
	border: 1px solid rgba(205, 154, 153, 0.65);
	pointer-events: none;
	z-index: 2;
}

.tl-rug::after {
	content: '\2726';
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--tl-rl);
	font-size: 1.5rem;
	line-height: 1;
	text-shadow: 0 0 12px rgba(205, 154, 153, 0.45);
}

.tl-rug img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 1;
}

.tl-kaart-onthul-hint {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: 0.55rem;
	transform: translateX(-50%);
	max-width: calc(100% - 0.7rem);
	padding: 0.22rem 0.45rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #4f3b44;
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
}

.tl-layout-enkel .tl-kaart-onthul-hint,
.tl-kaart.tl-geflipt .tl-kaart-onthul-hint {
	display: none;
}

/* ── Toneel: dek schudden ────────────────────────── */

.tl-toneel {
	position: relative;
	overflow-x: clip;
}

.tl-dek {
	position: relative;
	width: 92px;
	aspect-ratio: 7 / 12;
	margin: 0.25rem auto 1.5rem;
}

.tl-dek-kaart {
	position: absolute;
	inset: 0;
	box-shadow: 0 1px 2px rgba(26, 26, 26, 0.28);
}

.tl-dek.tl-schudt .tl-dek-kaart {
	animation: tl-schud 1.05s ease-in-out both;
	animation-delay: var(--dv, 0s);
}

@keyframes tl-schud {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}
	38% {
		transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--dr, 0deg));
	}
	72% {
		transform: translate(calc(var(--dx, 0px) * -0.55), calc(var(--dy, 0px) * -0.4)) rotate(calc(var(--dr, 0deg) * -0.65));
	}
	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

/* ── Paneel met de huidige positie (gids-modus) ──── */

.tl-paneel {
	max-width: 420px;
	margin: 0 auto 1.4rem;
	padding: 1rem 1rem 1.15rem;
	background: var(--tl-vlak);
	border: 1px solid var(--tl-rand);
	border-top: 3px solid var(--tl-rl);
	border-radius: var(--tl-radius);
	text-align: center;
}

.tl-paneel-wissel {
	animation: tl-wissel 0.35s ease;
}

@keyframes tl-wissel {
	from {
		opacity: 0.35;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tl-paneel-stap {
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tl-accent-tekst);
	font-weight: 700;
	margin: 0 0 0.3rem;
}

.tl-paneel-titel {
	margin: 0 0 0.3rem;
	font-size: 1.05rem;
	color: var(--tl-ink);
}

.tl-paneel-tekst {
	margin: 0 0 0.85rem;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--tl-muted-tekst);
	font-style: italic;
}

.tl-paneel-kies-hint {
	margin: 0;
	color: var(--tl-accent-tekst);
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.5;
}

.tl-paneel-wacht-op-keuze {
	padding-bottom: 0.9rem;
}

.tl-paneel-wacht-op-keuze .tl-paneel-tekst {
	margin-bottom: 0.55rem;
}

.tl-paneel-plek {
	margin: 0 auto;
	width: 108px;
}

.tl-paneel-plek.tl-gevuld-even {
	border-color: transparent;
	box-shadow: var(--tl-schaduw);
}

.tl-paneel-plek.tl-gevuld-even .tl-plek-nummer {
	display: none;
}

.tl-paneel-plek > .tl-rug {
	position: absolute;
	inset: 0;
}

/* ── Volledig deck van 78 kaarten ───────────────── */

.tl-periode {
	margin: -0.65rem 0 1rem;
	text-align: center;
	color: var(--tl-muted-tekst);
	font-size: 0.9rem;
	font-style: italic;
}

.tl-waaier-hint {
	margin: 0 0 0.65rem;
	text-align: center;
	color: var(--tl-muted-tekst);
	font-size: 0.84rem;
	line-height: 1.5;
	transition: opacity 0.25s ease;
}

.tl-waaier-hint.tl-verdwijnt {
	opacity: 0;
}

.tl-waaier-viewport {
	position: relative;
	max-width: 100%;
	margin: 0 auto 1rem;
	overflow: visible;
	touch-action: manipulation;
}

.tl-waaier {
	position: relative;
	outline: none;
}

.tl-waaier-gelaagd {
	display: block;
	isolation: isolate;
	margin: 0 auto;
}

.tl-waaier-gelaagd::before {
	content: '';
	position: absolute;
	z-index: 0;
	left: 13%;
	right: 13%;
	bottom: 2%;
	height: 25%;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(26, 26, 26, 0.14), rgba(26, 26, 26, 0) 70%);
	pointer-events: none;
}

.tl-app button.tl-waaier-kaart {
	appearance: none;
	position: absolute;
	z-index: var(--tl-waaier-z, 1);
	left: var(--tl-waaier-x, 50%);
	top: var(--tl-waaier-y, 50%);
	background: none;
	border: 0;
	border-radius: 3px;
	box-shadow: none;
	margin: 0;
	padding: 0;
	min-height: 0;
	min-width: 0;
	cursor: pointer;
	touch-action: manipulation;
	width: var(--tl-waaier-kaart-b, 54px);
	height: var(--tl-waaier-kaart-h, 93px);
	transform: translate(-50%, -50%) rotate(var(--hoek, 0deg));
	transform-origin: 50% 50%;
}

.tl-waaier-lift {
	width: 100%;
	height: 100%;
	transition: transform 0.18s ease;
	box-shadow: 0 1px 3px rgba(26, 26, 26, 0.3);
	border-radius: 3px;
	overflow: hidden;
}

@media (hover: hover) {
	.tl-waaier-gelaagd .tl-waaier-kaart:hover {
		z-index: 1000;
	}

	.tl-waaier-kaart:hover .tl-waaier-lift {
		transform: translateY(-14px);
	}
}

.tl-waaier-kaart:focus-visible .tl-waaier-lift {
	transform: translateY(-14px);
}

.tl-waaier-kaart:active .tl-waaier-lift {
	transform: translateY(-5px) scale(0.97);
}

.tl-waaier-gelaagd .tl-waaier-kaart:active {
	z-index: 1000;
}

.tl-waaier-kaart:focus-visible {
	outline: 3px solid var(--tl-accent-tekst);
	outline-offset: 2px;
	z-index: 1000;
}

.tl-waaier-kaart.tl-gekozen {
	visibility: hidden;
}

.tl-waaier.tl-vergrendeld .tl-waaier-kaart,
.tl-waaier.tl-auto-bezig .tl-waaier-kaart {
	pointer-events: none;
	cursor: wait;
}

.tl-waaier.tl-vergrendeld .tl-waaier-kaart:not(.tl-gekozen) .tl-waaier-lift {
	opacity: 0.78;
}

.tl-waaier.tl-klaar .tl-waaier-kaart {
	opacity: 0.15;
	pointer-events: none;
	transition: opacity 0.28s ease;
}

/* ── Vliegende kaart (van waaier naar positie) ──── */

.tl-vlieger {
	position: fixed;
	z-index: 9999;
	pointer-events: none;
	transition: transform 0.62s cubic-bezier(0.25, 0.8, 0.3, 1);
	will-change: transform;
}

/* Versneld tempo voor automatisch gelegde kaarten na de eerste. */
.tl-vlieger-snel {
	transition-duration: 0.3s;
}

/* Op een smal scherm blijft na de keuze van één kaart alleen de gekozen
   kaartrug zichtbaar terwijl de interpretatie wordt opgehaald. */
.tl-eenkaart-wacht {
	display: flex;
	justify-content: center;
	margin: 0.25rem auto 1.4rem;
	animation: tl-land 0.28s ease;
}

.tl-eenkaart-wacht-plek {
	position: relative;
	width: 112px;
	aspect-ratio: 7 / 12;
	overflow: hidden;
	border-radius: var(--rl-style-radius,4px);
	box-shadow: var(--tl-schaduw);
}

/* ── Plek (leeg positievak) en kaart ─────────────── */

.tl-plek {
	position: relative;
	width: var(--tl-kaart-b);
	max-width: 100%;
	aspect-ratio: 7 / 12;
	border: 1px dashed var(--tl-rand);
	border-radius: var(--rl-style-radius,4px);
	background: var(--tl-vlak);
	transition: border-color 0.2s;
}

.tl-plek-nummer {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	color: var(--tl-muted-tekst);
	font-weight: 700;
}

.tl-gevuld .tl-plek {
	border-color: transparent;
	box-shadow: var(--tl-schaduw);
}

.tl-gevuld .tl-plek-nummer {
	display: none;
}

.tl-app button.tl-kaart {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
	min-height: 0;
	cursor: pointer;
	touch-action: manipulation;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	perspective: 1000px;
	-webkit-perspective: 1000px;
	display: block;
}

.tl-kaart.tl-wacht {
	opacity: 0;
	pointer-events: none;
}

.tl-gevuld .tl-kaart {
	animation: tl-land 0.3s ease;
}

@keyframes tl-land {
	from {
		transform: scale(1.05);
	}
	to {
		transform: scale(1);
	}
}

.tl-kaart:focus-visible {
	outline: 2px solid var(--tl-accent-tekst);
	outline-offset: 3px;
}

.tl-kaart:active .tl-kaart-binnen {
	transform: scale(0.98);
}

.tl-kaart.tl-geflipt:active .tl-kaart-binnen {
	transform: rotateY(180deg) scale(0.98);
}

.tl-kaart-binnen {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.tl-kaart.tl-geflipt .tl-kaart-binnen {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

.tl-app button.tl-kaart.tl-geflipt {
	cursor: default;
}

.tl-kaart-binnen > .tl-rug,
.tl-kaart-binnen > .tl-voor {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.tl-voor {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	background: var(--tl-vlak);
	border: 1px solid var(--tl-rand);
	border-radius: 3px;
	overflow: hidden;
}

.tl-voor-inhoud {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 0.7rem 0.45rem;
	text-align: center;
}

.tl-voor.tl-omgekeerd .tl-voor-inhoud,
.tl-voor.tl-omgekeerd img {
	transform: rotate(180deg);
}

.tl-kaart-nummer {
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tl-muted-tekst);
	font-weight: 700;
}

.tl-kaart-symbool {
	font-size: 1.7rem;
	line-height: 1;
	color: var(--tl-accent-tekst);
}

.tl-kaart-naam {
	font-weight: 700;
	font-size: 0.82rem;
	line-height: 1.25;
	color: var(--tl-ink);
}

.tl-voor img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* De compacte eenkaartweergave eindigt als echte, vlakke voorkant. Dit
   omzeilt een fout in mobiele Chrome en Safari waarbij een afgeronde 3D-flip
   soms toch opnieuw de achterkant bovenop tekent. De klasse wordt toegevoegd
   terwijl de resultaatlijst nog verborgen is, dus er is geen tussenflits. */
.tl-eenkaart-compact .tl-kaart.tl-onthuld-vast .tl-kaart-binnen {
	transform: none !important;
	-webkit-transform: none !important;
	transform-style: flat;
	-webkit-transform-style: flat;
	transition: none;
}

.tl-eenkaart-compact .tl-kaart.tl-onthuld-vast .tl-rug {
	display: none;
}

.tl-eenkaart-compact .tl-kaart.tl-onthuld-vast .tl-voor {
	transform: none !important;
	-webkit-transform: none !important;
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	visibility: visible;
}

.tl-eenkaart-compact .tl-kaart.tl-onthuld-vast {
	cursor: default;
}

/* ── Bord (alleen in bord-modus, brede weergave) ─── */

.tl-bord {
	display: grid;
	gap: 1.1rem;
	justify-content: center;
	margin-bottom: 1.75rem;
}

.tl-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
}

.tl-slot-label {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--tl-ink);
	text-align: center;
	max-width: calc(var(--tl-kaart-b) + 28px);
	line-height: 1.35;
}

.tl-slot-nummer {
	display: inline-grid;
	place-items: center;
	width: 1.55em;
	height: 1.55em;
	border: 1px solid var(--tl-rand);
	background: var(--tl-vlak);
	color: var(--tl-muted-tekst);
	font-size: 0.74rem;
	font-weight: 700;
	margin-right: 0.4em;
	flex: none;
}

.tl-modus-bord.tl-layout-enkel .tl-bord {
	grid-template-columns: auto;
	--tl-kaart-b: 190px;
}

.tl-modus-bord.tl-layout-rij3 .tl-bord {
	grid-template-columns: repeat(3, auto);
}

.tl-modus-bord.tl-layout-rij4 .tl-bord {
	grid-template-columns: repeat(4, auto);
	--tl-kaart-b: 132px;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.tl-modus-bord.tl-layout-week .tl-bord {
	grid-template-columns: repeat(7, minmax(0, 1fr));
	--tl-kaart-b: 100%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.tl-modus-bord.tl-layout-week .tl-slot-label {
	max-width: none;
}

.tl-modus-bord.tl-layout-keltisch .tl-bord {
	grid-template-areas:
		'.  p5 .  p10'
		'p4 p1 p6 p9'
		'.  p3 .  p8'
		'.  .  .  p7';
	grid-template-columns: repeat(4, auto);
	align-items: center;
	--tl-kaart-b: 112px;
	gap: 1.15rem 1.5rem;
}

.tl-modus-bord.tl-layout-keltisch .tl-slot[data-slot='p1'] { grid-area: p1; }
.tl-modus-bord.tl-layout-keltisch .tl-slot[data-slot='p2'] { grid-area: p1; z-index: 2; }
.tl-modus-bord.tl-layout-keltisch .tl-slot[data-slot='p3'] { grid-area: p3; }
.tl-modus-bord.tl-layout-keltisch .tl-slot[data-slot='p4'] { grid-area: p4; }
.tl-modus-bord.tl-layout-keltisch .tl-slot[data-slot='p5'] { grid-area: p5; }
.tl-modus-bord.tl-layout-keltisch .tl-slot[data-slot='p6'] { grid-area: p6; }
.tl-modus-bord.tl-layout-keltisch .tl-slot[data-slot='p7'] { grid-area: p7; }
.tl-modus-bord.tl-layout-keltisch .tl-slot[data-slot='p8'] { grid-area: p8; }
.tl-modus-bord.tl-layout-keltisch .tl-slot[data-slot='p9'] { grid-area: p9; }
.tl-modus-bord.tl-layout-keltisch .tl-slot[data-slot='p10'] { grid-area: p10; }

.tl-modus-bord.tl-layout-keltisch .tl-slot[data-slot='p2'] .tl-plek {
	transform: rotate(90deg);
	border-color: transparent;
}

.tl-modus-bord.tl-layout-keltisch .tl-slot[data-slot='p2'] .tl-plek-nummer {
	transform: rotate(-90deg);
}

.tl-modus-bord.tl-layout-keltisch .tl-slot-label {
	display: none;
}

/* Verfijning op basis van de werkelijke beschikbare breedte
   (containerbreedte, niet de viewport). */
@container tl-app (max-width: 480px) {
	.tl-kop {
		margin-bottom: 1rem;
	}

	.tl-start-acties {
		margin-bottom: 1rem;
	}

	.tl-start-dek {
		padding-top: 0.15rem;
	}

	.tl-start-dek-beeld {
		width: 78px;
		margin-bottom: 0.65rem;
	}
}

@container tl-app (max-width: 900px) {
	.tl-modus-bord.tl-layout-keltisch .tl-bord {
		--tl-kaart-b: 96px;
		gap: 0.9rem 1.1rem;
	}

	.tl-modus-bord.tl-layout-week .tl-bord {
		gap: 0.7rem;
	}

	.tl-modus-bord.tl-layout-rij3 .tl-bord {
		--tl-kaart-b: 132px;
	}

	.tl-modus-bord.tl-layout-rij4 .tl-bord {
		--tl-kaart-b: 116px;
	}
}

/* ── Verticale lezing (gids-modus) ───────────────── */

.tl-lijst {
	max-width: 560px;
	margin: 0 auto 1.5rem;
}

.tl-item {
	background: var(--tl-vlak);
	border: 1px solid var(--tl-rand);
	border-left: 3px solid var(--tl-rl);
	border-radius: var(--tl-radius);
	padding: 1.05rem 1.1rem 1.2rem;
	margin-bottom: 1rem;
	box-shadow: 0 6px 16px -16px rgba(26, 26, 26, 0.15), 0 2px 6px -8px rgba(205, 154, 153, 0.18);
}

.tl-item-kop {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	margin-bottom: 0.35rem;
}

.tl-item-titel {
	margin: 0;
	font-size: 1rem;
	color: var(--tl-ink);
}

.tl-item-positie {
	margin: 0 0 0.8rem;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--tl-muted-tekst);
	font-style: italic;
}

.tl-item-plek {
	display: flex;
	justify-content: center;
	margin-bottom: 0.9rem;
}

.tl-item-plek .tl-plek {
	width: min(200px, 60cqw);
}

.tl-item-tekst[hidden] {
	display: none;
}

.tl-eenkaart-verschenen {
	animation: tl-eenkaart-verschijn 0.3s ease both;
}

@keyframes tl-eenkaart-verschijn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tl-item-kaartnaam {
	margin: 0 0 0.4rem;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--tl-ink);
	text-align: center;
}

/* Mini-overzicht van het Keltisch kruis */
.tl-mini {
	display: grid;
	grid-template-areas:
		'.  p5 .  p10'
		'p4 p1 p6 p9'
		'.  p3 .  p8'
		'.  .  .  p7';
	grid-template-columns: repeat(4, 26px);
	grid-auto-rows: 42px;
	gap: 5px;
	justify-content: center;
	align-items: center;
	margin: 0 0 1.25rem;
}

.tl-mini-cel {
	width: 26px;
	height: 42px;
	border: 1px solid var(--tl-rand);
	background: var(--tl-cream);
	display: grid;
	place-items: center;
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--tl-muted-tekst);
}

.tl-mini-cel[data-slot='p1'] { grid-area: p1; }
.tl-mini-cel[data-slot='p2'] { grid-area: p1; transform: rotate(90deg); background: var(--tl-vlak); border-color: var(--tl-accent-tekst); color: var(--tl-accent-tekst); z-index: 2; }
.tl-mini-cel[data-slot='p3'] { grid-area: p3; }
.tl-mini-cel[data-slot='p4'] { grid-area: p4; }
.tl-mini-cel[data-slot='p5'] { grid-area: p5; }
.tl-mini-cel[data-slot='p6'] { grid-area: p6; }
.tl-mini-cel[data-slot='p7'] { grid-area: p7; }
.tl-mini-cel[data-slot='p8'] { grid-area: p8; }
.tl-mini-cel[data-slot='p9'] { grid-area: p9; }
.tl-mini-cel[data-slot='p10'] { grid-area: p10; }

/* ── Uitleg (bord-modus) ─────────────────────────── */

.tl-uitleg {
	background: var(--tl-vlak);
	border: 1px solid var(--tl-rand);
	border-left: 3px solid var(--tl-rl);
	border-radius: var(--tl-radius);
	padding: 1.05rem 1.2rem;
	margin-bottom: 0.9rem;
	box-shadow: 0 6px 16px -16px rgba(26, 26, 26, 0.15), 0 2px 6px -8px rgba(205, 154, 153, 0.18);
}

.tl-uitleg[hidden] {
	display: none;
}

.tl-uitleg:focus {
	outline: none;
}

.tl-net-onthuld {
	animation: tl-onthuld 1.3s ease;
}

@keyframes tl-onthuld {
	0% {
		border-left-color: var(--tl-ink);
		background: var(--tl-cream);
	}
	100% {
		border-left-color: var(--tl-rl);
		background: var(--tl-vlak);
	}
}

.tl-uitleg-titel {
	margin: 0 0 0.35rem;
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--tl-ink);
}

.tl-uitleg-positie {
	font-size: 0.86rem;
	color: var(--tl-muted-tekst);
	font-style: italic;
	margin: 0 0 0.55rem;
}

.tl-uitleg-tekst {
	font-size: 0.95rem;
	line-height: 1.8;
	color: var(--tl-ink);
}

.tl-uitleg-tekst > p {
	margin: 0 0 1em;
}

.tl-uitleg-tekst > p:last-child {
	margin-bottom: 0;
}

/* Ja / Nee / Misschien */
.tl-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.35rem 0.9rem;
	margin-bottom: 0.6rem;
}

.tl-item-tekst .tl-badge {
	display: block;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.tl-badge-ja {
	background: var(--tl-accent-tekst);
	color: #fff;
}

.tl-badge-nee {
	background: var(--tl-ink);
	color: #fff;
}

.tl-badge-misschien {
	background: var(--tl-vlak);
	color: var(--tl-ink);
	border: 1px solid var(--tl-rand);
}

/* Rode draad en bewaren */
.tl-samenvatting {
	max-width: 760px;
	margin: 1.5rem auto;
}

.tl-samenvatting-inhoud {
	padding: 1.25rem 1.35rem;
	background: var(--tl-cream);
	border: 1px solid var(--tl-rand);
	border-left: 3px solid var(--tl-rl);
	border-radius: var(--tl-radius);
}

.tl-samenvatting-titel,
.tl-bewaren-titel {
	margin: 0 0 0.65rem;
	text-align: center;
	font-size: 1.05rem;
	color: var(--tl-ink);
}

.tl-samenvatting-inhoud p {
	margin: 0 0 0.75rem;
	line-height: 1.75;
}

.tl-samenvatting-inhoud p:last-child {
	margin-bottom: 0;
}

.tl-bewaren {
	margin-top: 1rem;
	padding-top: 1rem;
	text-align: center;
}

.tl-bewaar-acties,
.tl-fout-acties {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.7rem;
}

.tl-disclaimer {
	max-width: 620px;
	margin: 0.9rem auto 0;
	color: var(--tl-muted-tekst);
	font-size: 0.8rem;
	line-height: 1.55;
}

/* Persoonlijke tarotberekeningen */
.tl-berekening {
	max-width: 820px;
}

.tl-berekening-form {
	max-width: 620px;
	margin: 1.5rem auto 0;
	padding: 1rem 1.1rem;
	background: var(--tl-cream);
	border: 1px solid var(--tl-rand);
	border-left: 3px solid var(--tl-rl);
	border-radius: var(--tl-radius);
}

.tl-berekening-form > label {
	display: block;
	margin-bottom: 0.45rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--tl-ink);
}

.tl-berekening-invoer {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 0.7rem;
	flex-wrap: wrap;
}

.tl-berekening-invoer input[type="date"] {
	appearance: none;
	min-height: 46px;
	min-width: min(100%, 230px);
	padding: 0.55rem 0.7rem;
	font: inherit;
	font-size: 1rem;
	color: var(--tl-ink);
	background: var(--tl-vlak);
	border: 1px solid var(--tl-rand);
	border-radius: var(--tl-radius);
	box-shadow: none;
}

.tl-berekening-invoer input[type="date"]:focus-visible {
	outline: 2px solid var(--tl-accent-tekst);
	outline-offset: 2px;
	border-color: var(--tl-accent-tekst);
}

.tl-berekening-fout {
	margin: 0.75rem 0 0;
	color: #8b2525;
	font-weight: 600;
	text-align: center;
}

.tl-berekening-resultaat {
	margin: 1.5rem auto 0;
	scroll-margin-top: 24px;
}

.tl-berekening-resultaat:focus {
	outline: none;
}

.tl-berekening-periode,
.tl-berekening-formule,
.tl-berekening-notitie {
	max-width: 680px;
	margin: 0.8rem auto;
	line-height: 1.65;
	text-align: center;
}

.tl-berekening-periode {
	font-weight: 700;
}

.tl-berekening-formule {
	font-size: 0.88rem;
	color: var(--tl-muted-tekst);
}

.tl-berekening-notitie {
	padding: 0.8rem 1rem;
	background: var(--tl-cream);
	border-left: 3px solid var(--tl-rl);
	text-align: left;
}

.tl-berekening-notitie p {
	margin: 0 0 0.65rem;
}

.tl-berekening-notitie p:last-child {
	margin-bottom: 0;
}

.tl-berekening-kaartsectie {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: 1.25rem;
	align-items: center;
	margin: 1.2rem 0;
	padding: 1.2rem;
	background: var(--tl-vlak);
	border: 1px solid var(--tl-rand);
	border-radius: var(--tl-radius);
	box-shadow: var(--tl-schaduw);
}

.tl-berekening-kaartsectie.tl-berekening-secundair {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	background: var(--tl-cream);
	box-shadow: none;
}

.tl-berekening-kaart {
	width: 100%;
	max-width: 160px;
	margin: 0;
}

.tl-berekening-kaart-vlak {
	position: relative;
	width: 100%;
	aspect-ratio: 7 / 12;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.9), transparent 30%),
		linear-gradient(160deg, var(--tl-cream), var(--tl-mid));
	border: 1px solid var(--tl-rand);
	border-radius: calc(var(--tl-radius) + 1px);
}

.tl-berekening-kaart-vlak img {
	position: absolute;
	z-index: 2;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--tl-vlak);
}

.tl-berekening-kaart-inhoud {
	position: absolute;
	z-index: 1;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 0.8rem 0.55rem 1rem;
	text-align: center;
	color: var(--tl-ink);
}

.tl-berekening-kaart-nummer {
	align-self: flex-start;
	font-size: 0.78rem;
	font-weight: 700;
}

.tl-berekening-kaart-symbool {
	font-size: 2.4rem;
	color: var(--tl-accent-tekst);
}

.tl-berekening-kaart-naam {
	font-family: var(--rl-style-font-heading,Georgia, serif);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
}

.tl-berekening-kaarttitel {
	margin: 0 0 0.65rem;
	font-size: 1.2rem;
	color: var(--tl-ink);
}

.tl-berekening-duiding p {
	margin: 0 0 0.8rem;
	line-height: 1.75;
}

.tl-berekening-duiding p:last-child {
	margin-bottom: 0;
}

@media (max-width: 560px) {
	.tl-berekening-invoer {
		display: grid;
	}

	.tl-berekening-invoer input[type="date"],
	.tl-berekening-invoer button.tl-knop {
		width: 100%;
	}

	.tl-berekening-kaartsectie {
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 0.9rem;
		padding: 0.9rem;
		align-items: start;
	}

	.tl-berekening-kaart {
		max-width: 112px;
	}

	.tl-berekening-kaarttitel {
		font-size: 1.05rem;
	}

	.tl-berekening-duiding p {
		font-size: 0.92rem;
		line-height: 1.65;
	}
}

/* Fout */
.tl-fout {
	text-align: center;
	color: var(--tl-ink);
	font-weight: 600;
	padding: 1rem;
	border: 1px solid var(--tl-rand);
	border-left: 3px solid var(--tl-rl);
	border-radius: var(--tl-radius);
	background: var(--tl-cream);
	margin: 0 0 1.25rem;
}

.tl-fout > p {
	margin: 0 0 0.8rem;
}


/* Compacte gids op korte telefoons, zodat de waaier direct bereikbaar blijft. */
@media (max-width: 760px) and (max-height: 700px) {
	.tl-status {
		margin-bottom: 0.55rem;
	}

	.tl-paneel {
		margin-bottom: 0.55rem;
		padding: 0.65rem 0.75rem 0.75rem;
	}

	.tl-paneel-stap {
		margin-bottom: 0.18rem;
		font-size: 0.68rem;
	}

	.tl-paneel-titel {
		margin-bottom: 0.18rem;
		font-size: 0.98rem;
	}

	.tl-paneel-tekst {
		margin-bottom: 0.45rem;
		font-size: 0.82rem;
		line-height: 1.4;
	}

	.tl-paneel-plek {
		width: 82px;
	}

	.tl-waaier {
		margin-bottom: 0.4rem;
	}

	.tl-waaier-acties {
		margin-bottom: 1rem;
	}
}

.tl-morgen {
	width: 100%;
	margin: 0.4rem 0 0;
	text-align: center;
	font-size: 0.88rem;
	color: var(--tl-muted-tekst);
}

/* Alleen voor de afdrukweergave. De kaart krijgt altijd een CSS-variant,
   zodat ook een ontbrekende of nog niet geladen JPG netjes wordt afgedrukt. */
.tl-print-kaart {
	display: none;
}

/* Rustige afdrukweergave voor printen of bewaren als PDF. */
@media print {
	body.tl-print-actief * {
		visibility: hidden !important;
	}

	body.tl-print-actief .tl-print-doel,
	body.tl-print-actief .tl-print-doel * {
		visibility: visible !important;
	}

	body.tl-print-actief .tl-print-doel {
		position: absolute;
		inset: 0 auto auto 0;
		width: 100%;
		max-width: none;
	}

	.tl-print-doel .tl-toneel,
	.tl-print-doel .tl-start-acties,
	.tl-print-doel .tl-acties-boven,
	.tl-print-doel .tl-acties-onder,
	.tl-print-doel .tl-bewaren,
	.tl-print-doel .tl-bord,
	.tl-print-doel .tl-item-plek,
	.tl-print-doel button {
		display: none !important;
	}

	.tl-print-doel .tl-item,
	.tl-print-doel .tl-uitleg,
	.tl-print-doel .tl-samenvatting-inhoud {
		box-shadow: none;
		break-inside: avoid;
	}

	.tl-print-kaart {
		display: block !important;
		grid-column: 1;
		grid-row: 1 / span 8;
		align-self: start;
		width: 74px;
		margin: 0;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.tl-print-kaart-vlak {
		position: relative;
		width: 74px;
		height: 127px;
		overflow: hidden;
		border: 1px solid #77616b;
		border-radius: var(--rl-style-radius,4px);
		background: #faf5ef;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.tl-print-kaart-omgekeerd .tl-print-kaart-vlak {
		transform: rotate(180deg);
	}

	.tl-print-kaart-inhoud {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 7px 4px;
		color: #332a2e;
		text-align: center;
	}

	.tl-print-kaart-nummer {
		align-self: flex-start;
		font-size: 7px;
	}

	.tl-print-kaart-symbool {
		font-size: 22px;
		color: #8f5f65;
	}

	.tl-print-kaart-naam {
		font-family: var(--rl-style-font-heading,Georgia, 'Times New Roman', serif);
		font-size: 7px;
		line-height: 1.15;
	}

	.tl-print-kaart img {
		position: absolute;
		z-index: 1;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.tl-print-doel .tl-item,
	.tl-print-doel .tl-uitleg,
	.tl-app .tl-item,
	.tl-app .tl-uitleg {
		display: grid !important;
		grid-template-columns: 76px minmax(0, 1fr);
		column-gap: 14px;
		align-items: start;
	}

	.tl-print-doel .tl-item > :not(.tl-print-kaart):not(.tl-item-plek),
	.tl-print-doel .tl-uitleg > :not(.tl-print-kaart),
	.tl-app .tl-item > :not(.tl-print-kaart):not(.tl-item-plek),
	.tl-app .tl-uitleg > :not(.tl-print-kaart) {
		grid-column: 2;
	}

	.tl-print-doel .tl-uitleg[hidden],
	.tl-app .tl-uitleg[hidden],
	.tl-print-doel .tl-item-tekst[hidden],
	.tl-app .tl-item-tekst[hidden] {
		display: none !important;
	}
}

/* Nette basisafdruk wanneer iemand zelf Ctrl+P gebruikt, zonder de
   printknop: verberg de besturing en druk alleen de lezing af. */
@media print {
	.tl-app .tl-toneel,
	.tl-app .tl-start-acties,
	.tl-app .tl-acties-boven,
	.tl-app .tl-acties-onder,
	.tl-app .tl-bewaren,
	.tl-app .tl-bord,
	.tl-app .tl-item-plek,
	.tl-app button {
		display: none !important;
	}
}

/* ── Minder beweging ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.tl-kaart-binnen,
	.tl-waaier-lift,
	.tl-vlieger,
	.tl-app button.tl-knop,
	.tl-start-dek-beeld,
	.tl-start-dek-kaart,
	.tl-plek {
		transition: none;
	}

	.tl-dek.tl-schudt .tl-dek-kaart,
	.tl-gevuld .tl-kaart,
	.tl-eenkaart-wacht,
	.tl-eenkaart-verschenen,
	.tl-paneel-wissel,
	.tl-net-onthuld {
		animation: none;
	}
}