/* Taroscope — „Wróżby z kart”.
 *
 * Ta strona jest cieplejsza i bardziej fioletowa niż horoskop: tam niosło
 * niebo i złoto, tutaj niesie mgławica i świeca. Sygnaturą są ilustracje
 * rozkładów, które WYCHODZĄ poza obrys kafla — dzięki temu siatka czyta się
 * jak przedmioty rozłożone na stole, a nie jak kolejne kwadraty.
 *
 * Wszystko zamknięte pod #tw-wrozby, żeby motyw nie mieszał się w środek.
 */

body:has(#tw-wrozby) .wp-site-blocks > header,
body:has(#tw-wrozby) header.wp-block-template-part,
body:has(#tw-wrozby) .wp-site-blocks > footer,
body:has(#tw-wrozby) footer.wp-block-template-part,
body:has(#tw-wrozby) .wp-block-post-title { display: none !important; }

body:has(#tw-wrozby) .wp-site-blocks,
body:has(#tw-wrozby) .wp-block-group,
body:has(#tw-wrozby) .wp-block-post-content {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

body:has(#tw-wrozby) .wp-block-post-content > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body:has(#tw-wrozby) { background: #0b0a18; }

#tw-wrozby {
	--tlo:          #0b0a18;
	--tlo-karta:    rgba(32, 24, 70, .44);
	--tlo-panel:    rgba(20, 15, 46, .60);

	--zloto:        #f0ce7e;
	--zloto-jasne:  #f7e3a8;
	--zloto-ciemne: #d9ae54;
	--zloto-obrys:  rgba(240, 206, 126, .20);

	--lawenda:      #cfc7ea;
	--lawenda-cien: #9a93c4;
	--tekst:        #ede7ff;
	--tekst-slaby:  #9a93c4;

	/* Fiolet zostaje, ale schodzi z pierwszego planu do glebi tla;
	   cieply akcent niesie teraz `--zar`, ten sam co w Runach. */
	--fiolet:       #4a3a8c;
	--zar:          #e8752f;

	--serif: 'Cormorant Garamond', 'Times New Roman', serif;
	--sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

	position: relative;
	min-height: 100vh;
	padding: 0 0 60px;
	/* To samo podloze co w Runach i Ksiedze: noc z ciepla poswiata u gory
	   i chlodna u dolu. Dzieki temu przejscie miedzy zakladkami nie zmienia
	   koloru strony, tylko jej zawartosc. */
	background:
		radial-gradient( 900px 620px at 50% -6%, rgba(232, 117, 47, .09), transparent 70% ),
		radial-gradient( 1100px 780px at 50% 106%, rgba(74, 58, 140, .28), transparent 72% ),
		linear-gradient( 180deg, #0b0a18, #150f30 46%, #0b0a18 );
	color: var(--tekst);
	font-family: var(--sans);
	font-weight: 300;
	overflow-x: hidden;
}

/* Mgławica i gwiazdy — tło tej strony, nie dekoracja kafli. */
#tw-wrozby::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(1px 1px at 9% 12%, rgba(255, 246, 220, .55) 50%, transparent 51%),
		radial-gradient(1px 1px at 74% 7%, rgba(255, 246, 220, .45) 50%, transparent 51%),
		radial-gradient(1px 1px at 31% 44%, rgba(255, 246, 220, .35) 50%, transparent 51%),
		radial-gradient(1px 1px at 88% 38%, rgba(255, 246, 220, .4) 50%, transparent 51%),
		radial-gradient(1px 1px at 54% 76%, rgba(255, 246, 220, .3) 50%, transparent 51%),
		radial-gradient(1px 1px at 19% 88%, rgba(255, 246, 220, .35) 50%, transparent 51%),
		radial-gradient(900px 620px at 78% 4%, rgba(112, 62, 200, .30), transparent 68%),
		radial-gradient(1000px 700px at 12% 42%, rgba(74, 58, 140, .22), transparent 70%);
}

#tw-wrozby > * { position: relative; z-index: 1; }

#tw-wrozby *,
#tw-wrozby *::before,
#tw-wrozby *::after { box-sizing: border-box; }

#tw-wrozby :focus-visible { outline: 2px solid var(--zloto); outline-offset: 3px; }

/* --------------------------------------------------------------- nagłówek */

.tw-hero { text-align: center; padding: 54px 24px 0; }

.tw-nad {
	margin: 0 0 6px;
	font-size: 12px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--lawenda);
}

.tw-nad i { font-style: normal; color: var(--fiolet); margin: 0 8px; }

.tw-hero h1 {
	margin: 0 0 16px;
	font-family: var(--serif);
	font-weight: 500;
	font-size: 78px;
	line-height: .96;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--zloto);
	text-shadow: 0 0 46px rgba(216, 178, 106, .35);
}

.tw-lede {
	margin: 0 auto;
	max-width: 620px;
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--tekst);
}

/* ------------------------------------------------------- pytanie do wróżki */

.tw-pytanie {
	max-width: 1520px;
	margin: 32px auto 0;
	padding: 26px 30px 28px;
	border: 1px solid var(--zloto-obrys);
	border-radius: 20px;
	background: var(--tlo-panel);
	text-align: center;
	position: relative;
}

/* Włos ze świecącym punktem na górnej krawędzi — jak w mockupie. */
.tw-pytanie::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 12%;
	right: 12%;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(247, 227, 168, .75), transparent);
}

.tw-pytanie h2 {
	margin: 0 0 18px;
	font-family: var(--serif);
	font-weight: 500;
	font-size: 26px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--zloto);
}

.tw-pytanie h2 i { font-style: normal; font-size: 15px; opacity: .8; margin: 0 8px; }

.tw-zamiary {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 16px;
}

.tw-zamiar {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 22px;
	border-radius: 999px;
	border: 1px solid rgba(240, 206, 126, .20);
	background: rgba(20, 12, 46, .6);
	color: var(--lawenda);
	font-family: var(--sans);
	font-size: 13px;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}

.tw-zamiar span { color: var(--zloto-ciemne); }
.tw-zamiar:hover { border-color: rgba(240, 206, 126, .45); color: #f2ecff; }

.tw-zamiar[aria-pressed="true"] {
	/* Rzecz wybrana swieci na cieplo w calym serwisie — w Runach plakietka,
	   w belce nitka zaru, tutaj ten kafel. */
	background: linear-gradient(100deg, rgba(232, 117, 47, .22), rgba(240, 206, 126, .10));
	border-color: rgba(240, 206, 126, .55);
	color: #f7e3a8;
	box-shadow: 0 0 20px rgba(232, 117, 47, .26);
}

.tw-zamiar[aria-pressed="true"] span { color: #f7e3a8; }

.tw-szukaj { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }

.tw-szukaj input {
	flex: 1 1 420px;
	min-width: 0;
	padding: 15px 20px;
	border-radius: 12px;
	border: 1px solid rgba(240, 206, 126, .17);
	background: rgba(14, 8, 34, .8);
	color: #e6e0ff;
	font-family: var(--sans);
	font-size: 14.5px;
	font-style: italic;
}

.tw-szukaj input::placeholder { color: #7b71a8; font-style: italic; }
.tw-szukaj input:focus { outline: none; border-color: rgba(207, 199, 234, .72); box-shadow: 0 0 0 3px rgba(232, 117, 47, .22); }

/* Jedyny jasny przycisk na stronie — to on ma przyciągać wzrok. */
.tw-dopasuj {
	flex: 0 0 auto;
	padding: 15px 34px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(100deg, var(--zloto-jasne), var(--zloto-ciemne));
	color: #2a1c06;
	font-family: var(--sans);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .17em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 0 30px rgba(216, 178, 106, .4);
	transition: filter .2s, transform .2s, box-shadow .2s;
}

.tw-dopasuj i { font-style: normal; margin: 0 6px; }
.tw-dopasuj:hover:not([disabled]) { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 0 40px rgba(216, 178, 106, .55); }
.tw-dopasuj[disabled] { opacity: .6; cursor: default; }

.tw-wynik {
	margin-top: 18px;
	padding: 16px 18px;
	border: 1px solid rgba(240, 206, 126, .17);
	border-radius: 12px;
	background: rgba(16, 9, 40, .7);
	text-align: left;
	font-size: 13.6px;
	line-height: 1.6;
}

.tw-wynik[hidden] { display: none; }
.tw-wynik h3 { margin: 0 0 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--zloto-ciemne); font-weight: 400; }
.tw-wynik ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.tw-wynik li { display: grid; gap: 4px; }

.tw-wynik button {
	justify-self: start;
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
	font-family: var(--serif);
	font-size: 20px;
	color: var(--zloto);
	cursor: pointer;
	text-align: left;
}

.tw-wynik button:hover { text-decoration: underline; }
.tw-wynik p { margin: 0; color: var(--tekst-slaby); }
.tw-blad { color: #e2909a; }

/* ---------------------------------------------------------------- siatka */

.tw-siatka {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 18px;
	max-width: 1520px;
	margin: 30px auto 0;
	/* Karty konczy ta sama krawedz co panele nad siatka. Wczesniej byly tu
	   dwie reguly na padding i wygrywala pozniejsza. */
	padding: 0;
	align-items: stretch;
}

.tw-szer-3 { grid-column: span 3; }
.tw-szer-4 { grid-column: span 4; }
.tw-szer-6 { grid-column: span 6; }
.tw-szer-12 { grid-column: span 12; }

.tw-karta {
	position: relative;
	display: flex;
	overflow: hidden;
	min-height: 210px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--zloto-obrys);
	border-radius: 16px;
	/* Ton kafla schodzi z gory w dol; bez tego kafle bez ilustracji sa
	   plaskimi prostokatami obok tych z grafika. */
	background:
		radial-gradient( 130% 90% at 50% 0%, rgba(240, 206, 126, .05), transparent 62% ),
		linear-gradient( 180deg, rgba(38, 28, 82, .5), rgba(20, 15, 46, .62) ),
		var(--tlo-karta);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .25s, transform .25s, box-shadow .25s, background .25s;
}

.tw-karta:hover {
	border-color: rgba(216, 178, 106, .6);
	transform: translateY(-3px);
	background:
		radial-gradient( 130% 90% at 50% 0%, rgba(240, 206, 126, .09), transparent 62% ),
		linear-gradient( 180deg, rgba(46, 34, 96, .55), rgba(24, 18, 54, .66) ),
		rgba(26, 21, 58, .60);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 30px rgba(74, 58, 140, .26);
}

.tw-karta__tresc {
	display: flex;
	flex-direction: column;
	padding: 22px 24px 20px;
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
	z-index: 2;
}

.tw-karta__glif { font-size: 17px; color: var(--fiolet); margin-bottom: 10px; letter-spacing: .18em; }

.tw-karta__tytul {
	font-family: var(--serif);
	font-size: 25px;
	line-height: 1.1;
	color: var(--zloto);
	margin-bottom: 10px;
}

.tw-karta__opis {
	font-size: 13.2px;
	line-height: 1.58;
	color: var(--tekst);
	margin-bottom: 16px;
}

.tw-karta__stopka {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 11px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--lawenda-cien);
}

.tw-karta__stopka svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.tw-karta:hover .tw-karta__stopka { color: var(--zloto-ciemne); }

/* Ilustracja dostaje własną kolumnę — tekst nigdy na nią nie wchodzi.
   Sygnatura zostaje: obraz jest wyższy niż kafel i wychodzi poza obrys,
   a od strony tekstu wtapia się miękko w tło karty. */
.tw-karta--art { display: grid; }

.tw-karta--art { grid-template-rows: minmax(0, 1fr); }

.tw-karta--lewo { grid-template-columns: 46% minmax(0, 1fr); }
.tw-karta--lewo .tw-karta__art { grid-column: 1; grid-row: 1; }
.tw-karta--lewo .tw-karta__tresc { grid-column: 2; grid-row: 1; }

.tw-karta--prawo { grid-template-columns: minmax(0, 1fr) 46%; }
.tw-karta--prawo .tw-karta__art { grid-column: 2; grid-row: 1; }
.tw-karta--prawo .tw-karta__tresc { grid-column: 1; grid-row: 1; }

.tw-karta__art {
	position: relative;
	overflow: hidden;
	pointer-events: none;
	align-self: stretch;
}

/* Welon w kolorze zaru nad ilustracja. Kazdy obraz jest inny, a ten sam
   cienki cieply film sprawia, ze wszystkie siedza w jednej palecie. */
.tw-karta__art::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient( 130% 110% at 50% 38%, rgba( 232, 117, 47, .12 ), rgba( 11, 10, 24, .18 ) 78% );
}

.tw-karta__art img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	height: 122%;
	width: auto;
	max-width: none;
	opacity: .95;
	/* Ilustracje sa mocno fioletowe i to one, a nie style, robily z tej
	   strony jeden wielki fiolet. Nie przemalowujemy ich — sciagamy tylko
	   nasycenie i przesuwamy odcien o kilka stopni w cieplo, zeby usiadly
	   w tej samej nocy co Runy. */
	filter: saturate( .64 ) hue-rotate( -12deg ) brightness( .96 );
	transition: transform .45s cubic-bezier(.22, .61, .36, 1), opacity .3s;
}

.tw-karta:hover .tw-karta__art img {
	transform: translate( -50%, -52% ) scale( 1.07 );
	opacity: 1;
	filter: saturate( .84 ) hue-rotate( -8deg );
}

/* Miękkie zejście w tło od strony tekstu — bez tego byłaby twarda krawędź. */
.tw-karta__art::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Przejscie tonalne, nie kant: zejscie zaczyna sie wczesniej i idzie w
   trzech krokach, a do tego dochodzi delikatne przyciemnienie od gory
   i dolu — dzieki temu ilustracja wtapia sie w kafel ze wszystkich
   stron, zamiast konczyc sie jedna pionowa krawedzia. */
.tw-karta--lewo .tw-karta__art::after {
	background:
		linear-gradient( to bottom, rgba(23, 18, 50, .55), transparent 26%, transparent 74%, rgba(23, 18, 50, .55) ),
		linear-gradient( to right, transparent 30%, rgba(23, 18, 50, .35) 62%, rgba(23, 18, 50, .82) 84%, #171232 100% );
}

.tw-karta--prawo .tw-karta__art::after {
	background:
		linear-gradient( to bottom, rgba(23, 18, 50, .55), transparent 26%, transparent 74%, rgba(23, 18, 50, .55) ),
		linear-gradient( to left, transparent 30%, rgba(23, 18, 50, .35) 62%, rgba(23, 18, 50, .82) 84%, #171232 100% );
}

/* Kafel bez ilustracji układa treść na całej szerokości. */
.tw-karta:not(.tw-karta--art) .tw-karta__tresc { max-width: none; }

/* ------------------------------------------------------- rozpocznij wróżbę */

.tw-start {
	position: relative;
	display: flex;
	align-items: center;
	gap: 26px;
	max-width: 1520px;
	margin: 26px auto 0;
	padding: 30px 40px;
	border: 1px solid var(--zloto-obrys);
	border-radius: 20px;
	background: rgba(20, 15, 46, .55);
	overflow: hidden;
}

.tw-start__kula {
	flex: 0 0 auto;
	width: 250px;
	height: auto;
	margin: -30px 0 -40px -14px;
}

.tw-start__tresc { flex: 1 1 auto; text-align: center; }

.tw-start__nad {
	margin: 0 0 8px;
	font-size: 12.5px;
	letter-spacing: .12em;
	color: var(--lawenda);
}

.tw-start__nad i { font-style: normal; color: var(--zloto-ciemne); margin: 0 7px; }

.tw-start h2 {
	margin: 0 0 8px;
	font-family: var(--serif);
	font-weight: 500;
	font-size: 42px;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--zloto);
}

.tw-start__lede { margin: 0 0 20px; font-size: 14.5px; color: var(--tekst); }

.tw-start__cta {
	display: inline-block;
	padding: 16px 44px;
	border-radius: 12px;
	background: linear-gradient(100deg, var(--zloto-jasne), var(--zloto-ciemne));
	color: #2a1c06;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .19em;
	text-transform: uppercase;
	box-shadow: 0 0 34px rgba(216, 178, 106, .42);
	transition: filter .2s, transform .2s;
}

.tw-start__cta i { font-style: normal; margin: 0 8px; }

/* Akademia to drugi klocek tej samej budowy co „Rozpocznij wrozbe":
   ilustracja z lewej, tekst i zloty przycisk z prawej. Rozni je tylko
   tresc i szersza ksiega — jedna gramatyka niesie dwie zachety. */

.tw-akademia { margin-top: 18px; }

.tw-akademia__ksiega {
	width: 300px;
	margin: -24px 0 -28px -8px;
	/* To samo wyciszenie co na ilustracjach rozkladow — zeby ksiega
	   siedziala w tej samej nocy, a nie swiecila fioletem z makiety. */
	filter: saturate( .64 ) hue-rotate( -12deg ) brightness( .96 );
}
.tw-start__cta:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* Rozkłady przygaszone, gdy wybrano zamiar, który do nich nie pasuje. */
.tw-karta.tw-przygaszony { opacity: .34; filter: saturate(.55); }
.tw-karta.tw-podswietlony { border-color: rgba(247, 227, 168, .7); box-shadow: 0 0 26px rgba(216, 178, 106, .3); }

/* ------------------------------------------------------------ mniejsze */

@media (max-width: 1080px) {
	.tw-szer-3 { grid-column: span 6; }
	.tw-szer-4 { grid-column: span 6; }
	.tw-szer-6 { grid-column: span 12; }
	.tw-hero h1 { font-size: 62px; }
}

@media (max-width: 780px) {
	.tw-siatka { gap: 14px; }
	.tw-szer-3, .tw-szer-4, .tw-szer-6, .tw-szer-12 { grid-column: span 12; }
	.tw-hero h1 { font-size: 46px; }
	.tw-karta { min-height: 190px; }
	.tw-karta--lewo, .tw-karta--prawo { grid-template-columns: 38% minmax(0, 1fr); }
	.tw-karta--prawo .tw-karta__art { grid-column: 1; }
	.tw-karta--prawo .tw-karta__tresc { grid-column: 2; }
	.tw-karta--prawo .tw-karta__art::after { background: linear-gradient(to right, transparent 55%, #171232 100%); }
	.tw-start { flex-direction: column; padding: 24px 22px 28px; }
	.tw-akademia__ksiega { width: 210px; margin: -10px 0 4px; }
	.tw-start__kula { width: 190px; margin: -10px 0 0; }
	.tw-start h2 { font-size: 32px; }
	.tw-pytanie { margin-left: 16px; margin-right: 16px; padding: 22px 18px 24px; }
}

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

/* ── panel pytania: ten sam moduł co w aplikacji ──────────────────────
 *
 * Oprawa idzie z `panel.css` i `tarot-ask.css` — tutaj tylko to, czego ta
 * strona potrzebuje inaczej: panel ma kończyć się dokładnie tam, gdzie
 * siatka kafli pod nim, żeby dwie sekcje stały w jednej osi.
 */
#tw-wrozby .tq.tq.tq {
	max-width: 1520px;
	margin: 32px auto 0;
}

/* Pigułki zamiaru mieszkają teraz wewnątrz panelu. */
#tw-wrozby .tq.tq.tq .tw-zamiary { margin: 0 0 18px; }

/* Karta dopasowania z ilustracją: obraz po lewej, powód po prawej.
   Ta sama grafika, którą widać w kaflu rozkładu niżej — wybór z wróżki
   i wybór z siatki prowadzą rozpoznawalnie do tego samego. */
#tw-wrozby .tq-slider__karta.tqk--z-obrazem {
	display: grid;
	grid-template-columns: minmax( 0, 30% ) minmax( 0, 1fr );
	gap: 30px;
	align-items: center;
	text-align: left;
	padding: 1.5rem 1.7rem;
}

#tw-wrozby .tqk__art {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	aspect-ratio: 4 / 3;
	border: 1px solid rgba( 201, 168, 76, .28 );
}

#tw-wrozby .tqk__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* To samo wyciszenie, co na ilustracjach w siatce — bez niego obraz
	   świeci fioletem mocniej niż cała reszta strony. */
	filter: saturate( .64 ) hue-rotate( -12deg ) brightness( .96 );
}

/* Welon w kolorze żaru: spina ilustrację z kartą, zamiast zostawiać
   twardą krawędź zdjęcia. */
#tw-wrozby .tqk__art::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient( 120% 100% at 50% 40%, rgba( 232, 117, 47, .12 ), transparent 72% ),
		linear-gradient( to right, transparent 55%, rgba( 23, 18, 50, .55 ) 100% );
}

#tw-wrozby .tqk--z-obrazem .tqk__tresc { display: flex; flex-direction: column; align-items: flex-start; }
#tw-wrozby .tqk--z-obrazem .tq-slider__nazwa::after { margin-left: 0; text-align: left; }
#tw-wrozby .tqk--z-obrazem .tq__go { margin-top: 1.1rem; }

@media ( max-width: 900px ) {
	#tw-wrozby .tq-slider__karta.tqk--z-obrazem {
		grid-template-columns: minmax( 0, 1fr );
		gap: 18px;
		text-align: center;
	}
	#tw-wrozby .tqk__art { aspect-ratio: 16 / 9; }
	#tw-wrozby .tqk--z-obrazem .tqk__tresc { align-items: center; }
}

/* Panel rozciągnięty na szerokość siatki potrzebuje własnych proporcji:
   pole pytania trzyma czytelną miarę i stoi na osi panelu (sztywne 38rem
   przyklejało je do lewej krawędzi), a treść zaczyna się niżej, bo górny
   ornament ramy rośnie razem z szerokością. */
#tw-wrozby .tq.tq.tq { padding-top: 5.4rem; padding-bottom: 4.6rem; }

#tw-wrozby .tq.tq.tq .tq__field {
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}

/* Rama panelu w wersji przyciętej do samej złotej linii.
 *
 * Plik z aplikacji ma ~3,6% przezroczystego marginesu na poświatę z każdej
 * strony, więc panel rozciągnięty na szerokość siatki i tak kończył się
 * węziej niż kafle pod nim — box był równy, lico nie. Ta kopia jest przycięta
 * dokładnie do kreski, dzięki czemu krawędź obrazu = krawędź panelu.
 *
 * Proporcja pilnuje, żeby słońca i księżyce w ornamencie zostały kołami:
 * przy rozciąganiu tła w jednej osi robiły się jajami.
 */
#tw-wrozby .tq.tq.tq {
	max-width: 1520px;
	aspect-ratio: 1600 / 605;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-image: url( "gfx/panel-tlo-lico3.webp?v=3" );
	padding: clamp( 1.8rem, 3.5%, 3.4rem ) clamp( 2.4rem, 6%, 6rem );
}

/* Wyniki wróżki: własny blok pod panelem, w jednej osi z siatką kafli.
   Odstęp jest ten sam, co między wynikami a siatką (30 px), żeby trzy
   sekcje szły równym rytmem, a nie każda swoim. */
/* `tarot-ask.css` ustawia margines panelu przez `!important`, więc bez tego
   odstęp pod panelem nie chciał się zrównać z resztą strony. Pliku aplikacji
   nie ruszamy — nadpisujemy tylko na tej stronie. */
#tw-wrozby .tq.tq.tq { margin: 0 auto 30px !important; }

/* Jeden rytm dla całej strony: panel → wyniki → siatka → zachęty. */
#tw-wrozby .tw-start { margin-top: 30px; }

#tw-wrozby .tw-wyniki {
	max-width: 1520px;
	margin: 0 auto;
}

/* Siatka trzyma ten sam odstęp również wtedy, gdy wyniki są schowane. */
#tw-wrozby .tw-siatka { margin-top: 30px; }

#tw-wrozby .tw-wyniki .tq-slider { margin-top: 0; }