/* Księga Przemian — arkusz strony.
 *
 * Barwy wzięte wprost z makiet (dominanty policzone z pikseli, nie na oko):
 * tło #00041c, złoto linii heksagramu #b8883f–#c09050, złoto tekstu jaśniejsze,
 * podświetlenie linii zmiennej #fddc85. To ciemniejszy, bardziej brązowy
 * rejestr niż Niebo czy Księżyc — i taki ma być, bo to inny dział — ale krój
 * i gramatyka ozdób zostają te same, żeby serwis trzymał się kupy.
 *
 * Rama, narożniki i medalion są rysowane, nie wycinane z makiety: przy każdej
 * przekątnej ekranu mają zostać ostre.
 */

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

.tic {
	--tlo:          #00041c;
	--tlo-glab:     #010a24;
	--panel:        rgba( 9, 10, 42, .62 );
	--panel-jasny:  rgba( 18, 18, 58, .5 );
	--zloto:        #efcf87;
	--zloto-jasne:  #fde0a0;
	--zloto-linia:  #c19553;
	--zloto-cichy:  #a8823f;
	--obrys:        rgba( 196, 150, 84, .3 );
	--obrys-mocny:  rgba( 239, 207, 135, .62 );
	--lawenda:      #b9a6e0;
	--tekst:        #d6cfe8;
	--tekst-slaby:  #9b93bb;
	--czerwien:     #b3272d;

	--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 48px;
	color: var( --tekst );
	font-family: var( --sans );
	font-weight: 300;
	background:
		radial-gradient( 120% 90% at 50% 0%, rgba( 62, 34, 122, .5 ), transparent 66% ),
		radial-gradient( 90% 70% at 12% 34%, rgba( 96, 46, 150, .28 ), transparent 62% ),
		radial-gradient( 90% 70% at 88% 30%, rgba( 70, 40, 140, .22 ), transparent 62% ),
		var( --tlo );
	/* `clip`, nie `hidden`: `hidden` robi z korzenia pojemnik przewijania
	 * i przeglądarka przestaje doczytywać obrazki spod `loading=lazy`. */
	overflow-x: clip;
}

.tic-laduje {
	padding: 120px 20px;
	text-align: center;
	font-family: var( --serif );
	font-size: 20px;
	color: var( --zloto-cichy );
}

/* ═══════════════════  pasek działu (nie druga belka)  ═══════════════════
 *
 * Makieta ma tu własny nagłówek serwisu. Serwis ma jeden wspólny nagłówek
 * i taka jest dyrektywa, więc tożsamość działu wchodzi paskiem wewnątrz
 * strony: ta sama treść i ta sama kolejność, bez dublowania belki.
 */

.tic-pasek {
	display: flex;
	align-items: center;
	gap: 26px;
	max-width: 1520px;
	margin: 0 auto;
	padding: 18px 28px 16px;
	border-bottom: 1px solid var( --obrys );
}

.tic-marka {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
	text-decoration: none;
}

.tic-marka__tytul {
	font-family: var( --serif );
	font-size: 19px;
	line-height: 1.05;
	letter-spacing: .06em;
	color: var( --zloto );
	text-transform: uppercase;
}

.tic-marka__pod {
	display: block;
	margin-top: 2px;
	font-family: var( --sans );
	font-size: 10.5px;
	letter-spacing: .2em;
	color: var( --zloto-cichy );
}

.tic-nawigacja {
	display: flex;
	align-items: center;
	gap: 30px;
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
	flex-wrap: wrap;
}

.tic-nawigacja a {
	position: relative;
	padding: 4px 0;
	font-size: 11.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var( --tekst-slaby );
	text-decoration: none;
	transition: color .2s;
}

.tic-nawigacja a:hover,
.tic-nawigacja a:focus-visible { color: var( --zloto-jasne ); outline: none; }

.tic-nawigacja a.jest { color: var( --zloto ); }

.tic-nawigacja a.jest::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: linear-gradient( 90deg, transparent, var( --zloto ), transparent );
}

.tic-pasek__prawa { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

.tic-kompas {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var( --obrys );
	border-radius: 50%;
	color: var( --zloto );
}

.tic-odczyty {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	border: 1px solid var( --obrys );
	border-radius: 9999px;
	background: none;
	color: var( --zloto );
	font-family: var( --sans );
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .2s, color .2s, box-shadow .2s;
}

.tic-odczyty:hover,
.tic-odczyty:focus-visible {
	outline: none;
	border-color: var( --zloto );
	color: var( --zloto-jasne );
	box-shadow: 0 0 22px rgba( 239, 207, 135, .25 );
}

/* ══════════════════════════  rama sceny  ════════════════════════════════ */

.tic-rama {
	position: relative;
	max-width: 1520px;
	margin: 26px auto 0;
	padding: 34px clamp( 18px, 3vw, 52px ) 44px;
	border: 1px solid var( --obrys );
	border-radius: 6px;
	background:
		radial-gradient( 90% 60% at 50% 0%, rgba( 44, 26, 96, .3 ), transparent 70% ),
		rgba( 3, 5, 26, .55 );
}

/* Druga, cieńsza linia w środku — jak na makiecie. */
.tic-rama::before {
	content: '';
	position: absolute;
	inset: 7px;
	border: 1px solid rgba( 196, 150, 84, .16 );
	border-radius: 3px;
	pointer-events: none;
}

.tic-rog {
	position: absolute;
	width: 54px;
	height: 54px;
	background: no-repeat center / contain;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cg fill='none' stroke='%23c19553' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M2 16c8 0 12-4 12-12'/%3E%3Cpath d='M2 26c13 0 22-9 22-22' opacity='.65'/%3E%3Cpath d='M8 8c5 0 9 4 9 9 0 4-3 6-6 5s-3-5 0-6 7 2 7 7'/%3E%3Ccircle cx='24' cy='24' r='1.6' fill='%23efcf87' stroke='none'/%3E%3C/g%3E%3C/svg%3E" );
	pointer-events: none;
}

.tic-rog--lg { top: 12px; left: 12px; }
.tic-rog--pg { top: 12px; right: 12px; transform: scaleX( -1 ); }
.tic-rog--ld { bottom: 12px; left: 12px; transform: scaleY( -1 ); }
.tic-rog--pd { bottom: 12px; right: 12px; transform: scale( -1 ); }

/* ══════════════════════════  pasek kroków  ══════════════════════════════ */

.tic-kroki {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.tic-krok { display: flex; align-items: center; gap: 12px; }

.tic-krok__kolko {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba( 196, 150, 84, .45 );
	border-radius: 50%;
	font-family: var( --sans );
	font-size: 13px;
	color: var( --tekst-slaby );
	transition: border-color .3s, color .3s, box-shadow .3s;
}

.tic-krok__nazwa {
	font-family: var( --serif );
	font-size: 17px;
	color: var( --tekst-slaby );
	transition: color .3s;
}

.tic-krok__lacznik {
	width: clamp( 40px, 7vw, 108px );
	height: 1px;
	margin: 0 16px;
	background: repeating-linear-gradient( 90deg, rgba( 196, 150, 84, .5 ) 0 3px, transparent 3px 8px );
}

.tic-krok.zrobiony .tic-krok__kolko { color: var( --zloto ); border-color: var( --obrys-mocny ); }
.tic-krok.zrobiony .tic-krok__nazwa { color: var( --tekst ); }

.tic-krok.teraz .tic-krok__kolko {
	color: var( --zloto-jasne );
	border-color: var( --zloto );
	box-shadow: 0 0 0 4px rgba( 239, 207, 135, .1 ), 0 0 24px rgba( 239, 207, 135, .5 );
}

.tic-krok.teraz .tic-krok__nazwa { color: var( --zloto-jasne ); }

.tic-krok.teraz { position: relative; }

.tic-krok.teraz::after {
	content: '';
	position: absolute;
	left: 44px;
	right: 0;
	bottom: -9px;
	height: 1px;
	background: linear-gradient( 90deg, var( --zloto ), rgba( 239, 207, 135, .1 ) );
}

/* ═══════════════════════  kolumna z pieczęcią  ══════════════════════════ */

.tic-scena {
	display: grid;
	grid-template-columns: 132px minmax( 0, 1fr );
	gap: clamp( 12px, 2vw, 34px );
	align-items: start;
}

.tic-pion { display: grid; justify-items: center; gap: 18px; padding-top: 12px; }

.tic-pion__znak {
	font-family: var( --serif );
	font-size: 44px;
	line-height: 1.05;
	letter-spacing: .06em;
	color: var( --zloto );
	writing-mode: vertical-rl;
	text-shadow: 0 0 26px rgba( 239, 207, 135, .3 );
}

.tic-pion__pieczec { width: 44px; height: 44px; opacity: .95; }

.tic-pion__mysl {
	margin: 8px 0 0;
	font-family: var( --serif );
	font-size: 15px;
	font-style: italic;
	line-height: 1.5;
	text-align: center;
	color: var( --tekst-slaby );
}

.tic-pion__mysl small {
	display: block;
	margin-top: 8px;
	font-family: var( --sans );
	font-style: normal;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var( --zloto-cichy );
}

/* ══════════════════════════  wspólne kawałki  ══════════════════════════ */

.tic-tytul {
	margin: 6px 0 6px;
	font-family: var( --serif );
	font-size: clamp( 34px, 4.2vw, 58px );
	font-weight: 500;
	line-height: 1.05;
	text-align: center;
	color: var( --zloto );
	text-shadow: 0 0 46px rgba( 239, 207, 135, .28 );
}

.tic-nad {
	margin: 0;
	font-family: var( --sans );
	font-size: 11px;
	letter-spacing: .3em;
	text-transform: uppercase;
	text-align: center;
	color: var( --tekst-slaby );
}

.tic-pod {
	margin: 0 auto 22px;
	max-width: 56ch;
	font-family: var( --serif );
	font-size: clamp( 16px, 1.5vw, 21px );
	line-height: 1.5;
	text-align: center;
	color: var( --lawenda );
}

.tic-diament {
	display: block;
	width: 100%;
	height: 18px;
	margin: 14px 0;
	background: no-repeat center;
	background-image:
		linear-gradient( 90deg, transparent, rgba( 196, 150, 84, .45 ) 22%, rgba( 196, 150, 84, .45 ) 78%, transparent ),
		none;
	background-size: 100% 1px;
	position: relative;
}

.tic-diament::after {
	content: '◈';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	padding: 0 12px;
	background: var( --tlo-glab );
	color: var( --zloto-cichy );
	font-size: 12px;
}

.tic-karta {
	position: relative;
	padding: 22px 24px;
	border: 1px solid var( --obrys );
	border-radius: 14px;
	background: var( --panel );
}

.tic-karta__tytul {
	margin: 0 0 14px;
	font-family: var( --sans );
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
	text-align: center;
	color: var( --zloto );
}

/* ─────────────────────────────  przyciski  ─────────────────────────────── */

.tic-przycisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	max-width: 100%;
	padding: 15px 34px;
	border: 1px solid var( --obrys );
	border-radius: 9999px;
	background: rgba( 20, 16, 56, .5 );
	color: var( --zloto );
	font-family: var( --serif );
	font-size: 20px;
	letter-spacing: .04em;
	cursor: pointer;
	transition: border-color .2s, color .2s, box-shadow .2s, background .2s;
}

.tic-przycisk:hover,
.tic-przycisk:focus-visible {
	outline: none;
	border-color: var( --zloto );
	color: var( --zloto-jasne );
	box-shadow: 0 0 30px rgba( 239, 207, 135, .28 );
}

/* Pigułka wypełniona złotem — jedna na ekran, dla czynności głównej. */
.tic-przycisk--zloty {
	border-color: transparent;
	background: linear-gradient( 180deg, #f4dda2 0%, #e0bd74 48%, #c79a4d 100% );
	color: #2a1c05;
	box-shadow: 0 0 34px rgba( 226, 189, 116, .3 );
}

.tic-przycisk--zloty:hover,
.tic-przycisk--zloty:focus-visible {
	color: #1c1203;
	box-shadow: 0 0 46px rgba( 244, 221, 162, .5 );
}

.tic-przycisk--maly { padding: 11px 22px; font-size: 16px; }

.tic-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 18px;
	padding: 0;
	border: 0;
	background: none;
	color: var( --tekst-slaby );
	font-family: var( --serif );
	font-size: 16px;
	cursor: pointer;
	transition: color .2s;
}

.tic-link i {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 1px solid var( --obrys );
	border-radius: 50%;
	font-style: normal;
	font-size: 11px;
}

.tic-link:hover,
.tic-link:focus-visible { outline: none; color: var( --zloto-jasne ); }

/* ══════════════════════════  ekran: intencja  ═══════════════════════════ */

.tic-uklad--intencja {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 340px;
	gap: clamp( 18px, 3vw, 46px );
	align-items: start;
	margin-top: 10px;
}

.tic-wiazka {
	display: block;
	width: min( 620px, 100% );
	margin: 4px auto 0;
	filter: drop-shadow( 0 20px 50px rgba( 0, 0, 0, .55 ) );
}

.tic-pole {
	display: block;
	width: min( 560px, 100% );
	margin: 18px auto 4px;
	padding: 14px 20px;
	border: 1px solid var( --obrys );
	border-radius: 9999px;
	background: rgba( 6, 8, 32, .6 );
	color: var( --tekst );
	font-family: var( --serif );
	font-size: 18px;
	text-align: center;
}

.tic-pole::placeholder { color: var( --tekst-slaby ); font-style: italic; }
.tic-pole:focus { outline: none; border-color: var( --obrys-mocny ); box-shadow: 0 0 26px rgba( 239, 207, 135, .18 ); }

.tic-srodek { display: grid; justify-items: center; }

.tic-rytual { display: grid; gap: 16px; }

.tic-rytual__wiersz { display: flex; align-items: center; gap: 14px; }

.tic-rytual__ikona {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border: 1px solid var( --obrys );
	border-radius: 50%;
	color: var( --zloto );
	font-size: 15px;
}

.tic-rytual__tekst { font-size: 14px; line-height: 1.5; color: var( --tekst ); }

/* ══════════════════════════  ekran: metoda  ═════════════════════════════ */

.tic-metody {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: 22px;
	max-width: 940px;
	margin: 8px auto 0;
}

.tic-metoda {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 26px 24px 24px;
	border: 1px solid var( --obrys );
	border-radius: 16px;
	background: var( --panel );
	color: inherit;
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}

.tic-metoda:hover,
.tic-metoda:focus-visible {
	outline: none;
	border-color: var( --obrys-mocny );
	box-shadow: 0 0 34px rgba( 239, 207, 135, .16 );
	transform: translateY( -2px );
}

.tic-metoda__glif { font-size: 30px; color: var( --zloto ); }

.tic-metoda__nazwa {
	font-family: var( --serif );
	font-size: 25px;
	color: var( --zloto-jasne );
}

.tic-metoda__opis { font-size: 13.5px; line-height: 1.55; color: var( --tekst ); }

.tic-metoda__liczby {
	display: flex;
	gap: 14px;
	margin-top: 4px;
	font-family: var( --sans );
	font-size: 10.5px;
	letter-spacing: .1em;
	color: var( --zloto-cichy );
}

/* ══════════════════════════  ekran: linie  ══════════════════════════════ */

.tic-uklad--linie {
	display: grid;
	grid-template-columns: 300px minmax( 0, 1fr ) 330px;
	gap: clamp( 14px, 2vw, 30px );
	align-items: start;
	margin-top: 8px;
}

.tic-sloty { display: grid; gap: 10px; }

.tic-slot { display: flex; align-items: center; gap: 14px; }

.tic-slot__nr {
	width: 20px;
	font-family: var( --serif );
	font-size: 17px;
	text-align: right;
	color: var( --tekst-slaby );
	border-bottom: 1px solid transparent;
}

.tic-slot.jest .tic-slot__nr { color: var( --zloto ); }
.tic-slot.teraz .tic-slot__nr { color: var( --zloto-jasne ); border-bottom-color: var( --zloto ); }

.tic-slot__linia { flex: 1 1 auto; height: 20px; }

/* Linia heksagramu: pełna albo przerwana w środku. Rysujemy dwoma polami
 * w gridzie, dzięki czemu przerwa ma zawsze tę samą szerokość. */
.tic-linia {
	display: grid;
	grid-template-columns: 1fr 22px 1fr;
	align-items: center;
	height: 100%;
}

.tic-linia span {
	height: 15px;
	border-radius: 2px;
	background: linear-gradient( 180deg, #d9ad66 0%, #c19553 55%, #a87b3c 100% );
}

.tic-linia--pusta span { background: rgba( 196, 150, 84, .12 ); height: 12px; }

.tic-linia--ciagla span:nth-child( 2 ) { background: inherit; }

.tic-linia--przerwana span:nth-child( 2 ) { background: none; }

.tic-linia--zmienna span {
	background: linear-gradient( 180deg, #fff0c4 0%, #fddc85 55%, #e6bc63 100% );
	box-shadow: 0 0 22px rgba( 253, 220, 133, .55 );
}

.tic-naczynie { display: block; width: min( 330px, 92% ); margin: 6px auto 4px; }

.tic-wynik { display: grid; justify-items: center; gap: 8px; }

.tic-wynik__glif { font-size: 34px; color: var( --zloto ); line-height: 1; }

.tic-wynik__nazwa {
	font-family: var( --serif );
	font-size: 23px;
	color: var( --zloto-jasne );
}

.tic-wynik__pod { font-size: 13.5px; color: var( --tekst ); text-align: center; }

.tic-wynik__przejscie {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin: 8px 0 4px;
}

.tic-wynik__przejscie .tic-linia { flex: 1 1 0; height: 20px; }

.tic-wynik__strzalka { color: var( --zloto ); font-size: 17px; }

.tic-ruchy {
	display: grid;
	gap: 6px;
	width: 100%;
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid var( --obrys );
}

.tic-ruch {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-family: var( --sans );
	font-size: 11px;
	letter-spacing: .04em;
	color: var( --tekst-slaby );
}

.tic-ruch b { color: var( --zloto-cichy ); font-weight: 400; }

/* ══════════════════════════  ekran: heksagram  ══════════════════════════ */

.tic-godlo {
	margin: 0 0 2px;
	font-family: var( --serif );
	font-size: clamp( 40px, 5vw, 66px );
	line-height: 1.1;
	text-align: center;
	color: var( --zloto );
	text-shadow: 0 0 48px rgba( 239, 207, 135, .3 );
}

.tic-godlo small {
	display: block;
	margin-top: 2px;
	font-family: var( --sans );
	font-size: clamp( 13px, 1.3vw, 17px );
	letter-spacing: .22em;
	color: var( --zloto-cichy );
}

.tic-uklad--wynik {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 330px;
	gap: clamp( 16px, 2.4vw, 40px );
	align-items: start;
	margin-top: 12px;
}

.tic-pary {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 18px;
}

.tic-pary.ma-przemiane {
	grid-template-columns: minmax( 0, 1fr ) 92px minmax( 0, 1fr );
	align-items: center;
}

.tic-kolumna__tytul {
	margin: 0 0 4px;
	font-family: var( --sans );
	font-size: 10.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	text-align: center;
	color: var( --zloto-cichy );
}

.tic-kolumna__nazwa {
	margin: 0 0 16px;
	font-family: var( --serif );
	font-size: 19px;
	text-align: center;
	color: var( --zloto-jasne );
}

.tic-kolumna__stopka {
	margin: 16px 0 0;
	font-family: var( --serif );
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
	color: var( --tekst );
}

.tic-most { display: grid; justify-items: center; gap: 8px; }

.tic-most__krag {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border: 1px solid var( --obrys );
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 74, 42, 140, .5 ), transparent 72% );
	font-size: 34px;
	color: var( --zloto );
}

.tic-most__opis {
	font-family: var( --sans );
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: center;
	color: var( --zloto-cichy );
}

.tic-trygramy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 8px;
	font-family: var( --sans );
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --tekst );
}

.tic-trygramy i { font-style: normal; font-size: 17px; color: var( --zloto ); }

.tic-slowa {
	margin: 0 0 14px;
	font-family: var( --sans );
	font-size: 11px;
	letter-spacing: .2em;
	text-align: center;
	color: var( --zloto-cichy );
}

.tic-blok { margin: 0 0 16px; }

.tic-blok__etyk {
	margin: 0 0 6px;
	font-family: var( --serif );
	font-size: 17px;
	color: var( --zloto );
}

.tic-blok p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var( --tekst ); }

.tic-odczytanie { display: grid; gap: 14px; }

.tic-odczytanie__naglowek {
	margin: 0;
	font-family: var( --serif );
	font-size: 21px;
	text-align: center;
	color: var( --zloto-jasne );
}

.tic-odczytanie p { margin: 0; font-size: 14px; line-height: 1.6; text-align: center; color: var( --tekst ); }

.tic-linia-zmienna {
	display: grid;
	gap: 4px;
	padding: 12px 0;
	border-top: 1px solid var( --obrys );
}

.tic-linia-zmienna__nr {
	font-family: var( --sans );
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var( --zloto-cichy );
}

.tic-stopka-wynik {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 20px;
	padding: 20px 26px;
	border: 1px solid var( --obrys );
	border-radius: 14px;
	background: var( --panel-jasny );
}

.tic-taiji { flex: 0 0 auto; width: 54px; height: 54px; }

.tic-stopka-wynik p {
	margin: 0;
	font-family: var( --serif );
	font-size: 17px;
	line-height: 1.55;
	color: var( --tekst );
}

.tic-stopka-wynik b { color: var( --zloto-jasne ); font-weight: 500; }

.tic-akcje {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 22px;
}

/* ═══════════════════════════  stopka strony  ════════════════════════════ */

.tic-stopka { display: grid; place-items: center; margin-top: 26px; }
.tic-stopka .tic-taiji { width: 46px; height: 46px; opacity: .85; }

/* ════════════════════════════  mniejsze ekrany  ═════════════════════════ */

@media ( max-width: 1180px ) {
	.tic-uklad--linie { grid-template-columns: minmax( 0, 1fr ); }
	.tic-uklad--intencja,
	.tic-uklad--wynik { grid-template-columns: minmax( 0, 1fr ); }
	.tic-pary.ma-przemiane { grid-template-columns: minmax( 0, 1fr ); }
	.tic-most__krag { transform: rotate( 90deg ); }
}

@media ( max-width: 900px ) {
	.tic-scena { grid-template-columns: minmax( 0, 1fr ); }
	.tic-pion { grid-auto-flow: column; justify-content: center; align-items: center; }
	.tic-pion__znak { writing-mode: horizontal-tb; font-size: 30px; }
	.tic-pion__mysl { max-width: 32ch; text-align: left; }
	.tic-krok__nazwa { display: none; }
	.tic-krok__lacznik { width: 26px; margin: 0 8px; }
	.tic-krok.teraz::after { display: none; }
	.tic-nawigacja { display: none; }
	.tic-rama { padding: 26px 14px 32px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.tic-metoda,
	.tic-przycisk,
	.tic-krok__kolko { transition: none; }
}

/* ═══════════════  motyw robi miejsce dla działu  ══════════════
 *
 * Ta sama pułapka, co przy Księżycu: motyw zwęża KAŻDE bezpośrednie dziecko
 * treści do szerokości kolumny i bez tego resetu cała strona ściska się
 * do 645 px. Chowamy też nagłówek wpisu — dział ma własny.
 */
body:has( .tic ) .wp-site-blocks > header,
body:has( .tic ) header.wp-block-template-part,
body:has( .tic ) .wp-site-blocks > footer,
body:has( .tic ) footer.wp-block-template-part,
body:has( .tic ) .wp-block-post-title { display: none !important; }

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

body:has( .tic ) .wp-block-post-content > * { max-width: none !important; }

/* Zdjęcia wycięte z makiet mają prostokątną krawędź. Wtapiamy ją maską,
 * żeby przedmiot leżał na tle, a nie w ramce. */
.tic-wiazka, .tic-naczynie {
	-webkit-mask-image: radial-gradient( 74% 74% at 50% 50%, #000 52%, transparent 100% );
	mask-image: radial-gradient( 74% 74% at 50% 50%, #000 52%, transparent 100% );
}

.tic-wiazka { width: min( 520px, 100% ); margin-top: 10px; }
.tic-uklad--intencja { margin-top: 0; }

/* ═════════════════  dociagniecie do makiet  ══════════════════ */

/* „Losujesz linię 4 z dołu” jest na makiecie złotą antykwą, a nie
 * rozstrzelonymi wersalikami — to zdanie, nie etykieta. */
.tic-nad--losujesz {
	font-family: var( --serif );
	font-size: clamp( 19px, 1.7vw, 24px );
	letter-spacing: .02em;
	text-transform: none;
	color: var( --zloto );
	margin-bottom: 4px;
}

/* Puste pola linii to na makiecie obrysowane prostokąty, nie słabe paski. */
.tic-linia--pusta {
	grid-template-columns: minmax( 0, 1fr );
	border: 1px solid rgba( 196, 150, 84, .28 );
	border-radius: 4px;
	height: 20px;
}
.tic-linia--pusta span { display: none; }

/* Linia zmienna ma być widoczna od razu — to ona niesie całą przemianę. */
.tic-linia--zmienna { position: relative; }
.tic-linia--zmienna::after {
	content: '◈';
	position: absolute;
	right: -18px;
	top: 50%;
	transform: translateY( -50% );
	font-size: 10px;
	color: var( --zloto-jasne );
	text-shadow: 0 0 12px rgba( 253, 220, 133, .8 );
}
.tic-sloty { padding-right: 20px; }

/* Na telefonie pasek działu zawija się zamiast wychodzić poza ekran:
 * nazwa w jednym wierszu, przycisk pod nią, kompas do schowka. */
@media ( max-width: 700px ) {
	.tic-pasek {
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		padding: 14px 16px 12px;
	}
	.tic-pasek__prawa { width: 100%; justify-content: center; }
	.tic-kompas { display: none; }
	.tic-odczyty { padding: 9px 16px; font-size: 10px; }
	.tic-marka { justify-content: center; }
}

/* Pieczęć wycięta z makiety ma ciemne tło kadru. `screen` zdejmuje je
 * na ciemnej stronie, więc zostaje sam czerwony stempel. */
.tic-pion__pieczec { mix-blend-mode: screen; width: 40px; height: 40px; }

/* ══════════════════════  monety i metka metody  ═══════════════════════ */

.tic-monety {
	display: block;
	width: min( 330px, 92% );
	margin: 6px auto 4px;
	filter: drop-shadow( 0 14px 28px rgba( 0, 0, 0, .5 ) );
}

/* Widać, czym się losuje — bez tego łodygi i monety są nie do odróżnienia. */
.tic-metka {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 14px;
	font-family: var( --sans );
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var( --zloto-cichy );
}

.tic-metka__zmien {
	padding: 4px 12px;
	border: 1px solid var( --obrys );
	border-radius: 9999px;
	background: none;
	color: var( --tekst-slaby );
	font: inherit;
	letter-spacing: .16em;
	cursor: pointer;
	transition: border-color .2s, color .2s;
}

.tic-metka__zmien:hover,
.tic-metka__zmien:focus-visible {
	outline: none;
	border-color: var( --zloto );
	color: var( --zloto-jasne );
}

/* ══════════════════════  odczytanie pod pytanie  ══════════════════════ */

.tic-pytanie {
	margin: 4px 0 2px;
	padding: 12px 14px;
	border-left: 2px solid var( --obrys-mocny );
	font-family: var( --serif );
	font-size: 16px;
	font-style: italic;
	line-height: 1.5;
	text-align: left;
	color: var( --zloto-jasne );
}

.tic-czekam { display: grid; justify-items: center; gap: 12px; padding: 18px 0; }
.tic-czekam p { font-size: 13.5px; color: var( --tekst-slaby ); text-align: center; }
.tic-czekam__brak { font-size: 13.5px; line-height: 1.6; color: var( --tekst-slaby ); text-align: center; }

/* Kołowrotek: ten sam gest oczekiwania, co w tarocie i horoskopie. */
.tic-kolowrotek {
	width: 38px;
	height: 38px;
	border: 1px solid rgba( 196, 150, 84, .25 );
	border-top-color: var( --zloto );
	border-radius: 50%;
	animation: tic-obrot 1.1s linear infinite;
}

@keyframes tic-obrot { to { transform: rotate( 360deg ); } }

@media ( prefers-reduced-motion: reduce ) {
	.tic-kolowrotek { animation-duration: 4s; }
}

/* ════════════  linia ciągła kontra przerywana — na poważnie  ════════
 *
 * Trzy przylegające segmenty z zaokrąglonymi rogami zostawiały wąską ciemną
 * szczelinę na każdym styku. Z odległości linia ciągła wyglądała wtedy jak
 * przerywana i każdy heksagram wyglądał tak samo — stąd wrażenie, że silnik
 * zwraca ciągle to samo. Linia ciągła to teraz JEDEN ciagly pasek na całą
 * szerokość, a przerywana ma szczelinę, której nie da się pomylić ze szwem.
 */
.tic-linia.tic-linia--ciagla { grid-template-columns: minmax( 0, 1fr ); }
.tic-linia.tic-linia--ciagla span:nth-child( 2 ),
.tic-linia.tic-linia--ciagla span:nth-child( 3 ) { display: none; }

.tic-linia.tic-linia--przerwana { grid-template-columns: 1fr 26px 1fr; }
.tic-linia.tic-linia--przerwana span:nth-child( 2 ) { background: none; }

/* ═══════════  głos i PDF — przeniesione 1:1 z Horoskopu  ═══════════════
 *
 * Ta sama czynność w tym samym serwisie ma wyglądać tak samo, więc klasy
 * `tsk-gra` i `tsk-narzedzie` są przepisane bez zmian; podmienione są tylko
 * nazwy zmiennych barw na nasze, żeby arkusz był samodzielny.
 */
/* ------------------------------------------------- głos i plik do druku */

.tsk-narzedzia { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.tsk-narzedzie {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var( --sans );
	font-size: 11.5px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var( --zloto-cichy );
	border: 1px solid rgba(230, 196, 138, .38);
	border-radius: 7px;
	padding: 12px 20px;
	background: transparent;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
.tsk-narzedzie:hover:not([disabled]) { background: rgba(230, 196, 138, .10); color: var( --zloto ); border-color: rgba(230, 196, 138, .7); }
.tsk-narzedzie[disabled] { opacity: .5; cursor: default; }
.tsk-narzedzie svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; }
/* ====================================================== własny odtwarzacz
 * Systemowy odtwarzacz przeglądarki to biała pigułka — na tej stronie wyglądał
 * jak wycięty z innego serwisu. Ten jest z tej samej rodziny co reszta:
 * złoty pierścień, kreska postępu z rombem i czas pisany wersalikami.
 */

.tsk-gra {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin-top: 14px;
	padding: 13px 16px;
	border: 1px solid rgba(160, 111, 251, .3);
	border-radius: 11px;
	background: rgba(10, 7, 30, .72);
}
.tsk-gra__play {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(230, 196, 138, .5);
	background: radial-gradient(circle at 50% 38%, rgba(60, 34, 122, .85), rgba(8, 5, 26, .96));
	color: var(--zloto-cieply);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: box-shadow .2s, border-color .2s;
}
.tsk-gra__play:hover { border-color: var( --zloto ); box-shadow: 0 0 18px rgba(140, 88, 240, .5); }
.tsk-gra__play svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.tsk-gra__pasek {
	flex: 1 1 auto;
	position: relative;
	height: 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	min-width: 0;
}
.tsk-gra__tor {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	border-radius: 2px;
	background: rgba(230, 196, 138, .22);
}
.tsk-gra__wypelnienie {
	position: absolute;
	left: 0;
	height: 2px;
	width: 0;
	border-radius: 2px;
	background: linear-gradient(to right, #c79a52, #f8e2ab);
	box-shadow: 0 0 10px rgba(249, 213, 122, .55);
}
.tsk-gra__uchwyt {
	position: absolute;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	transform: translateX(-50%) rotate(45deg);
	background: var(--zloto-cieply);
	box-shadow: 0 0 10px rgba(249, 213, 122, .8);
	left: 0;
}
.tsk-gra__czas {
	flex: 0 0 auto;
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--tekst-slaby);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.tsk-gra__pobierz {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	border: 1px solid rgba(230, 196, 138, .34);
	color: var( --zloto-cichy );
	display: grid;
	place-items: center;
	text-decoration: none;
	transition: background .2s, color .2s, border-color .2s;
}
.tsk-gra__pobierz:hover { background: rgba(230, 196, 138, .1); color: var( --zloto ); border-color: rgba(230, 196, 138, .7); }
.tsk-gra__pobierz svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; }
/* ═══════════════  odczytanie w poziomie, pod rozkładem  ═══════════════ */

.tic-odczytanie {
	margin-top: 20px;
	text-align: left;
}

.tic-odczytanie .tic-karta__tytul,
.tic-odczytanie .tic-odczytanie__naglowek { text-align: center; }

.tic-zmienne {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 20px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var( --obrys );
}

.tic-zmienne .tic-linia-zmienna { border-top: 0; padding: 0; }
.tic-zmienne .tic-linia-zmienna p:last-child { text-align: left; line-height: 1.6; }

.tic-pytanie { text-align: left; max-width: 62ch; margin-left: auto; margin-right: auto; }

.tic-narzedzia { justify-content: center; }
.tic-blad { width: 100%; text-align: center; font-size: 13px; color: #e0a0a0; }

/* Pas rozkładu ma teraz całą szerokość — dwie kolumny plus krąg pośrodku. */
.tic-pary { max-width: 1100px; margin: 0 auto; }

/* ══════════════════════════  wersja na papier  ═════════════════════════ */

.tic-druk { display: none; }

@media print {
	body > *:not( .tic-druk ) { display: none !important; }
	.tic-druk {
		display: block;
		max-width: 170mm;
		margin: 0 auto;
		padding: 0;
		color: #1b1a24;
		font-family: 'Cormorant Garamond', Georgia, serif;
		font-size: 12pt;
		line-height: 1.55;
	}
	.tic-druk__glowa { border-bottom: 1px solid #b9985c; padding-bottom: 8mm; margin-bottom: 8mm; }
	.tic-druk h1 { margin: 0; font-size: 24pt; font-weight: 500; color: #8a6a2c; }
	.tic-druk__pod { margin: 2mm 0 0; font-family: 'Jost', system-ui, sans-serif; font-size: 9pt; letter-spacing: .18em; text-transform: uppercase; color: #7a6a4c; }
	.tic-druk__haslo { margin: 3mm 0 0; font-style: italic; font-size: 13pt; }
	.tic-druk h2 { margin: 7mm 0 2mm; font-family: 'Jost', system-ui, sans-serif; font-size: 9.5pt; letter-spacing: .2em; text-transform: uppercase; color: #8a6a2c; }
	.tic-druk h3 { margin: 5mm 0 1mm; font-family: 'Jost', system-ui, sans-serif; font-size: 8.5pt; letter-spacing: .18em; text-transform: uppercase; color: #7a6a4c; }
	.tic-druk p { margin: 0 0 3mm; }
	.tic-druk__stopka { margin-top: 12mm; padding-top: 4mm; border-top: 1px solid #ddd2ba; font-family: 'Jost', system-ui, sans-serif; font-size: 8pt; letter-spacing: .14em; color: #8a8272; text-align: center; }
}

.tic-linia-zmienna.jest-zmienna {
	border-left: 2px solid var( --obrys-mocny );
	padding-left: 14px;
}

.tic-znacznik {
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 9999px;
	background: rgba( 253, 220, 133, .16 );
	color: var( --zloto-jasne );
	font-size: 8.5px;
	letter-spacing: .18em;
}

/* ── spis 64 heksagramów ── */

.tic-spis { display: grid; gap: 2px; margin-top: 10px; }

.tic-spis__poz {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 12px 4px;
	border-bottom: 1px solid rgba( 196, 150, 84, .14 );
}

.tic-spis__znak {
	flex: 0 0 auto;
	width: 34px;
	font-size: 26px;
	line-height: 1;
	color: var( --zloto );
}

.tic-spis__nazwa { margin: 0; font-family: var( --serif ); font-size: 17px; color: var( --zloto-jasne ); }
.tic-spis__pod { margin: 2px 0 0; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var( --zloto-cichy ); }
.tic-spis__haslo { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var( --tekst-slaby ); }

/* Nawigacja działu to teraz przyciski — mają wyglądać jak odnośniki. */
.tic-nawigacja button {
	position: relative;
	padding: 4px 0;
	border: 0;
	background: none;
	font-family: var( --sans );
	font-size: 11.5px;
	font-weight: 300;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var( --tekst-slaby );
	cursor: pointer;
	transition: color .2s;
}

.tic-nawigacja button:hover,
.tic-nawigacja button:focus-visible { color: var( --zloto-jasne ); outline: none; }
.tic-nawigacja button.jest { color: var( --zloto ); }

.tic-nawigacja button.jest::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: linear-gradient( 90deg, transparent, var( --zloto ), transparent );
}

/* ══════════════════════════════════════════════════════════════════════
 *  Odczytanie — miara wiersza i wyrównanie
 *
 *  Proza wyśrodkowana na całą szerokość ekranu ma rwane krawędzie i czyta
 *  się źle. Wyśrodkowany jest BLOK, nie tekst: każda kolumna ma własną
 *  miarę, a akapity stoją do lewej. Środkujemy tylko nagłówki i pytanie —
 *  krótkie rzeczy, którym środek służy.
 * ══════════════════════════════════════════════════════════════════════ */

.tic-odczytanie {
	position: relative;
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

.tic-odczytanie > * { position: relative; z-index: 1; }

.tic-odczytanie p { text-align: left; }
.tic-odczytanie .tic-karta__tytul,
.tic-odczytanie .tic-odczytanie__naglowek { text-align: center; }

/* Pierwszy akapit pod „Linie zmienne: N” to zdanie objaśniające — środek. */
.tic-odczytanie > p { max-width: 62ch; margin-left: auto; margin-right: auto; text-align: center; }

.tic-pytanie { text-align: center; border-left: 0; border-top: 1px solid var( --obrys ); border-bottom: 1px solid var( --obrys ); padding: 14px 18px; }

/* Sześć linii w dwóch rzędach po trzy — nigdy 4 + 2 z dziurą po prawej. */
.tic-zmienne { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 24px 30px; }

.tic-linia-zmienna { padding-left: 0; }
.tic-linia-zmienna p:last-child { max-width: 38ch; }

.tic-linia-zmienna__nr {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

/* Ta sama kreska co w rozkładzie, przy akapicie o tej linii. */
.tic-linia-zmienna__rys { display: block; width: 42px; flex: 0 0 42px; }
.tic-linia-zmienna__rys .tic-linia { height: 9px; }
.tic-linia-zmienna__rys .tic-linia span { height: 7px; }
.tic-linia-zmienna__rys .tic-linia--przerwana { grid-template-columns: 1fr 10px 1fr; }
.tic-linia-zmienna__rys .tic-linia--zmienna::after { display: none; }

/* ══════════════════════════════════════════════════════════════════════
 *  Znaki Księgi jako tło
 *
 *  Za odczytaniem stoi ten sam heksagram, który wypadł; za każdą kolumną
 *  rozkładu — jej własne dwa trygramy. Powiększone, rozmyte i ledwie
 *  widoczne: mają dawać głębię, a nie odbierać czytelność literom.
 * ══════════════════════════════════════════════════════════════════════ */

.tic-znak-tlo {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	transform: translate( -50%, -50% );
	font-family: var( --serif );
	font-size: clamp( 320px, 42vw, 620px );
	line-height: 1;
	color: var( --zloto );
	opacity: .05;
	filter: blur( 5px );
	pointer-events: none;
	user-select: none;
}

.tic-karta--figura { position: relative; overflow: hidden; }
.tic-karta--figura > *:not( .tic-trygram-tlo ) { position: relative; z-index: 1; }

.tic-trygram-tlo {
	position: absolute;
	left: 50%;
	z-index: 0;
	transform: translateX( -50% );
	font-size: clamp( 150px, 17vw, 250px );
	line-height: 1;
	color: var( --zloto );
	opacity: .055;
	filter: blur( 4px );
	pointer-events: none;
	user-select: none;
}

.tic-trygram-tlo--gora { top: -6%; }
.tic-trygram-tlo--dol { bottom: -8%; }

/* Poświata za całą sceną — mgławica w barwie działu, nie kolejna ramka. */
.tic-rama::after {
	content: '易';
	position: absolute;
	right: -3%;
	bottom: -6%;
	z-index: 0;
	font-family: var( --serif );
	font-size: clamp( 260px, 30vw, 460px );
	line-height: 1;
	color: var( --lawenda );
	opacity: .03;
	filter: blur( 7px );
	pointer-events: none;
	user-select: none;
}

.tic-rama > * { position: relative; z-index: 1; }

@media ( max-width: 1100px ) {
	.tic-zmienne { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 720px ) {
	.tic-zmienne { grid-template-columns: minmax( 0, 1fr ); }
	.tic-znak-tlo { font-size: 300px; opacity: .04; }
	.tic-rama::after { display: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.tic-znak-tlo, .tic-trygram-tlo { filter: none; }
}

/* ══════════════════════════════════════════════════════════════════════
 *  Slider heksagramów
 *
 *  Sześćdziesiąt cztery pozycje to nie lista do przewijania, tylko ciąg —
 *  więc jeden heksagram zajmuje całe okno i przesuwa się w następny.
 *  Bohaterem karty jest znak chiński w ciemnym złocie: duży, wypełniony
 *  gradientem, z jedną cienką linią pod spodem. Reszta karty jest cicha.
 * ══════════════════════════════════════════════════════════════════════ */

#astro-karta .ak-panel.tic-okno-slider { max-width: 980px; }

.tic-slider__nad {
	margin: 0 0 14px;
	font-family: var( --sans );
	font-size: 10px;
	letter-spacing: .28em;
	text-transform: uppercase;
	text-align: center;
	color: var( --zloto-cichy );
}

.tic-slider {
	position: relative;
	display: grid;
	grid-template-columns: 46px minmax( 0, 1fr ) 46px;
	align-items: center;
	gap: 10px;
}

.tic-slider:focus-visible { outline: 1px solid var( --obrys ); outline-offset: 10px; }

.tic-slider__okno { overflow: hidden; }

.tic-slider__tor {
	display: flex;
	transition: transform .55s cubic-bezier( .22, .61, .36, 1 );
	will-change: transform;
}

.tic-slajd {
	flex: 0 0 100%;
	min-width: 0;
	padding: 4px 10px 8px;
}

.tic-slajd__glowa { text-align: center; }

/* Znak w ciemnym złocie — gradient zamiast płaskiej barwy, żeby miał
 * głębię przy tym rozmiarze. Cienka kreska pod spodem zamyka go jak pieczęć. */
.tic-slajd__chinski {
	display: block;
	margin: 0 auto;
	font-family: var( --serif );
	font-size: clamp( 96px, 13vw, 152px );
	line-height: 1.02;
	background: linear-gradient( 165deg, #f0d6a0 0%, #c79a4d 42%, #8c6626 100% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow( 0 6px 26px rgba( 176, 128, 56, .45 ) );
}

.tic-slajd__numer {
	margin: 6px 0 0;
	font-family: var( --sans );
	font-size: 10.5px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var( --zloto-cichy );
}

.tic-slajd__nazwa {
	margin: 4px 0 0;
	padding-bottom: 12px;
	font-family: var( --serif );
	font-size: clamp( 26px, 3vw, 36px );
	font-weight: 500;
	letter-spacing: .04em;
	color: var( --zloto-jasne );
	border-bottom: 1px solid var( --obrys );
}

.tic-slajd__haslo {
	margin: 12px auto 0;
	max-width: 46ch;
	font-family: var( --serif );
	font-size: 18px;
	font-style: italic;
	line-height: 1.5;
	color: var( --lawenda );
}

.tic-slajd__srodek {
	display: grid;
	grid-template-columns: 210px minmax( 0, 1fr );
	gap: 30px;
	align-items: start;
	margin-top: 22px;
}

.tic-slajd__figura { display: grid; gap: 8px; }
.tic-slajd__wiersz { display: flex; align-items: center; gap: 12px; }

.tic-slajd__nr {
	width: 14px;
	font-family: var( --serif );
	font-size: 14px;
	text-align: right;
	color: var( --tekst-slaby );
}

.tic-slajd__trygramy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 12px 0 0;
	font-family: var( --sans );
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --tekst-slaby );
}

.tic-slajd__trygramy i { font-style: normal; font-size: 15px; color: var( --zloto ); }

.tic-slajd__opis { min-width: 0; }

.tic-slajd__slowa {
	margin: 0 0 14px;
	font-family: var( --sans );
	font-size: 10px;
	letter-spacing: .22em;
	color: var( --zloto-cichy );
}

.tic-slajd__etyk {
	margin: 14px 0 4px;
	font-family: var( --serif );
	font-size: 16px;
	color: var( --zloto );
}

.tic-slajd__etyk:first-of-type { margin-top: 0; }

.tic-slajd__tekst {
	margin: 0;
	max-width: 62ch;
	font-size: 14px;
	line-height: 1.65;
	color: var( --tekst );
}

.tic-slider__strzalka {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var( --obrys );
	border-radius: 50%;
	background: rgba( 16, 12, 44, .7 );
	color: var( --zloto );
	font-family: var( --serif );
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .2s, color .2s, box-shadow .2s;
}

.tic-slider__strzalka:hover,
.tic-slider__strzalka:focus-visible {
	outline: none;
	border-color: var( --zloto );
	color: #fff5da;
	box-shadow: 0 0 24px rgba( 239, 207, 135, .32 );
}

.tic-slider__licznik {
	grid-column: 1 / -1;
	margin: 14px 0 0;
	font-family: var( --sans );
	font-size: 10px;
	letter-spacing: .24em;
	text-align: center;
	color: var( --zloto-cichy );
}

@media ( max-width: 760px ) {
	.tic-slajd__srodek { grid-template-columns: minmax( 0, 1fr ); gap: 20px; }
	.tic-slajd__figura { max-width: 220px; margin: 0 auto; }
	.tic-slider { grid-template-columns: 38px minmax( 0, 1fr ) 38px; }
	.tic-slider__strzalka { width: 38px; height: 38px; font-size: 21px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.tic-slider__tor { transition: none; }
}

/* Zdanie „kiedy ją wybrać" pod opisem metody — to ono decyduje o wyborze. */
.tic-metoda__kiedy {
	margin-top: 2px;
	font-family: var( --serif );
	font-size: 15.5px;
	font-style: italic;
	line-height: 1.5;
	color: var( --zloto-jasne );
}

/* ══════════════════════════════════════════════════════════════════════
 *  Slider — szerzej, bez ucinania tekstu, z ozdobnymi strzałkami
 * ══════════════════════════════════════════════════════════════════════ */

#astro-karta .ak-panel.tic-okno-slider { max-width: min( 1240px, 94vw ); }

.tic-slider { grid-template-columns: 64px minmax( 0, 1fr ) 64px; gap: 16px; }

/* Kolumna opisu musi móc się zwęzić poniżej treści — bez tego akapity
 * układają się w swojej naturalnej szerokości i okno je ucina. */
.tic-slajd,
.tic-slajd__srodek,
.tic-slajd__opis,
.tic-slajd__figura { min-width: 0; }

.tic-slajd__srodek { grid-template-columns: 220px minmax( 0, 1fr ); gap: 38px; }

.tic-slajd__tekst {
	max-width: none;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.tic-slajd__slowa { overflow-wrap: anywhere; }

/* ── strzałka ozdobna ── */

.tic-strzalka-oz {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: transform .25s;
}

.tic-strzalka-oz svg { width: 100%; height: 100%; overflow: visible; }

.tic-strzalka-oz__krag {
	fill: rgba( 16, 12, 44, .55 );
	stroke: rgba( 196, 150, 84, .42 );
	stroke-width: 1.1;
	transition: stroke .25s, fill .25s;
}

.tic-strzalka-oz__krag2 {
	fill: none;
	stroke: rgba( 196, 150, 84, .2 );
	stroke-width: .8;
	stroke-dasharray: 3 5;
	transform-origin: 32px 32px;
	transition: stroke .25s;
}

.tic-strzalka-oz__grot {
	fill: none;
	stroke: #efcf87;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .25s;
}

.tic-strzalka-oz__romb { fill: rgba( 239, 207, 135, .55 ); transition: fill .25s; }

.tic-strzalka-oz--prawo svg { transform: scaleX( -1 ); }

.tic-strzalka-oz:hover .tic-strzalka-oz__krag,
.tic-strzalka-oz:focus-visible .tic-strzalka-oz__krag {
	stroke: #efcf87;
	fill: rgba( 34, 24, 74, .8 );
}

.tic-strzalka-oz:hover .tic-strzalka-oz__krag2 { stroke: rgba( 239, 207, 135, .5 ); }
.tic-strzalka-oz:hover .tic-strzalka-oz__grot { stroke: #fff2ce; }
.tic-strzalka-oz:hover .tic-strzalka-oz__romb { fill: #fde0a0; }
.tic-strzalka-oz:hover { transform: scale( 1.06 ); }
.tic-strzalka-oz:focus-visible { outline: none; }

.tic-strzalka-oz:hover .tic-strzalka-oz__krag2 { animation: tic-krecenie 9s linear infinite; }

@keyframes tic-krecenie { to { transform: rotate( 360deg ); } }

/* ══════════════════════  moneta na czas czekania  ═══════════════════════
 *
 * Ten sam gest, co koło w tarocie: coś się kręci, więc widać, że system
 * pracuje. Tu kręci się chińska moneta — narzędzie tej wróżby, nie ogólny
 * spinner.
 */

.tic-moneta-ruch {
	position: relative;
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	perspective: 500px;
}

.tic-moneta-ruch__blask {
	position: absolute;
	inset: -34%;
	border-radius: 50%;
	background: radial-gradient( circle, rgba( 239, 207, 135, .3 ), transparent 68% );
	filter: blur( 8px );
	animation: tic-oddech 2.6s ease-in-out infinite;
}

.tic-moneta-ruch__tarcza {
	position: relative;
	width: 82px;
	height: 82px;
	transform-style: preserve-3d;
	animation: tic-obrot-monety 2.8s cubic-bezier( .5, 0, .5, 1 ) infinite;
	filter: drop-shadow( 0 0 18px rgba( 239, 207, 135, .45 ) );
}

@keyframes tic-obrot-monety {
	0%   { transform: rotateY( 0deg ); }
	100% { transform: rotateY( 360deg ); }
}

@keyframes tic-oddech {
	0%, 100% { opacity: .55; transform: scale( .94 ); }
	50%      { opacity: 1;   transform: scale( 1.06 ); }
}

.tic-czekam { gap: 14px; padding: 30px 0 26px; }

.tic-czekam__tytul {
	margin: 0;
	font-family: var( --serif );
	font-size: 22px;
	color: var( --zloto-jasne );
}

.tic-czekam p:last-child { max-width: 40ch; }

@media ( prefers-reduced-motion: reduce ) {
	.tic-moneta-ruch__tarcza { animation-duration: 9s; }
	.tic-moneta-ruch__blask { animation: none; }
	.tic-strzalka-oz:hover .tic-strzalka-oz__krag2 { animation: none; }
	.tic-strzalka-oz:hover { transform: none; }
}

@media ( max-width: 760px ) {
	.tic-slider { grid-template-columns: 46px minmax( 0, 1fr ) 46px; gap: 8px; }
	.tic-strzalka-oz { width: 46px; height: 46px; }
}

/* ══════════════════════════════════════════════════════════════════════
 *  Odczytanie — układ ostateczny
 *
 *  Wcześniejsze reguły rozjeżdżały się przy kolejnych poprawkach, więc cały
 *  układ tej sekcji stoi tu, w jednym miejscu, i ma wyższą specyficzność
 *  (`.tic` z przodu). Zasady są trzy:
 *
 *  1. Wyśrodkowany jest BLOK, nie tekst. Akapit stoi do lewej i wypełnia
 *     swoją kolumnę — dzięki temu trzy bloki mają równą szerokość, a nie
 *     taką, jaka wyjdzie z długości zdania.
 *  2. Nagłówki i krótkie zdania są wyśrodkowane. Proza nigdy.
 *  3. Sekcje rozdziela włos, nie ramka. Ma być cicho.
 * ══════════════════════════════════════════════════════════════════════ */

.tic .tic-odczytanie {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding: 26px clamp( 20px, 3vw, 44px ) 30px;
}

/* Zdanie wprowadzające i pytanie — krótkie, więc środek im służy. */
.tic .tic-odczytanie > p,
.tic .tic-odczytanie .tic-odczytanie__naglowek { text-align: center; }
.tic .tic-odczytanie > p { max-width: 58ch; margin-left: auto; margin-right: auto; }

.tic .tic-pytanie {
	max-width: 52ch;
	margin: 18px auto;
	padding: 14px 20px;
	border-top: 1px solid var( --obrys );
	border-bottom: 1px solid var( --obrys );
	text-align: center;
}

/* ── sześć linii: trzy równe kolumny, dwa rzędy ── */

.tic .tic-zmienne {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 26px 0;
	margin-top: 20px;
	padding-top: 0;
	border-top: 0;
}

.tic .tic-zmienne .tic-linia-zmienna {
	padding: 0 26px;
	border: 0;
	border-left: 1px solid rgba( 196, 150, 84, .16 );
}

.tic .tic-zmienne .tic-linia-zmienna:nth-child( 3n + 1 ) { border-left: 0; padding-left: 0; }
.tic .tic-zmienne .tic-linia-zmienna:nth-child( 3n ) { padding-right: 0; }

.tic .tic-zmienne .tic-linia-zmienna p:last-child {
	max-width: none;
	margin: 0;
	text-align: left;
	font-size: 14px;
	line-height: 1.65;
}

/* Linia ruchoma dostaje złoty włos zamiast grubej kreski — ma się wyróżniać
 * spokojnie, a nie krzyczeć. */
.tic .tic-zmienne .tic-linia-zmienna.jest-zmienna { border-left-color: rgba( 239, 207, 135, .5 ); }
.tic .tic-zmienne .tic-linia-zmienna.jest-zmienna:nth-child( 3n + 1 ) {
	border-left: 0;
	box-shadow: inset 2px 0 0 -1px rgba( 239, 207, 135, .5 );
	padding-left: 12px;
}

.tic .tic-narzedzia { margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba( 196, 150, 84, .16 ); }

@media ( max-width: 1000px ) {
	.tic .tic-trzy { grid-template-columns: minmax( 0, 1fr ); gap: 22px; }
	.tic .tic-trzy__pole { padding: 0; border-left: 0; border-top: 1px solid rgba( 196, 150, 84, .16 ); padding-top: 18px; }
	.tic .tic-trzy__pole:first-child { border-top: 0; padding-top: 0; }
	.tic .tic-zmienne { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.tic .tic-zmienne .tic-linia-zmienna:nth-child( 3n + 1 ) { border-left: 1px solid rgba( 196, 150, 84, .16 ); padding-left: 26px; }
	.tic .tic-zmienne .tic-linia-zmienna:nth-child( 2n + 1 ) { border-left: 0; padding-left: 0; }
}

@media ( max-width: 640px ) {
	.tic .tic-zmienne { grid-template-columns: minmax( 0, 1fr ); }
	.tic .tic-zmienne .tic-linia-zmienna { border-left: 0 !important; padding: 0 !important; }
}

.tic .tic-zmienne .tic-linia-zmienna,
.tic .tic-zmienne .tic-linia-zmienna:nth-child( 3n + 1 ),
.tic .tic-zmienne .tic-linia-zmienna:nth-child( 3n ) { padding-left: 26px; padding-right: 26px; }
.tic .tic-zmienne { margin-left: -26px; margin-right: -26px; width: calc( 100% + 52px ); }
.tic .tic-zmienne .tic-linia-zmienna.jest-zmienna:nth-child( 3n + 1 ) { padding-left: 26px; }

@media ( max-width: 1000px ) {
	.tic .tic-trzy { margin-left: 0; margin-right: 0; width: 100%; }
	.tic .tic-trzy__pole,
	.tic .tic-trzy__pole:first-child,
	.tic .tic-trzy__pole:last-child { padding-left: 0; padding-right: 0; }
}

@media ( max-width: 640px ) {
	.tic .tic-zmienne { margin-left: 0; margin-right: 0; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
 *  Slajd heksagramu — układ z makiety
 *
 *  Znak chiński siedzi w środku złotej mandali z trygramami. To jedyne
 *  miejsce, w którym ta karta jest głośna; wszystko dalej — numer, imię,
 *  hasło, dwie kolumny — schodzi w dół coraz ciszej. Ozdobniki są
 *  z paczki, ta sama ręka co na makiecie.
 *
 *  Odstępy między blokami są RÓWNE i policzone z jednej zmiennej, żeby
 *  nie rozjeżdżały się przy kolejnej poprawce.
 * ══════════════════════════════════════════════════════════════════════ */

.tic { --odstep: 26px; }

#astro-karta .ak-panel.tic-okno-slider {
	max-width: min( 1320px, 95vw );
	padding: 44px clamp( 24px, 4vw, 64px ) 40px;
	position: relative;
	overflow: hidden;
}

.tic-okno-rog {
	position: absolute;
	width: clamp( 90px, 9vw, 140px );
	opacity: .5;
	pointer-events: none;
	z-index: 0;
}

.tic-okno-rog--lg { top: 10px; left: 10px; }
.tic-okno-rog--pg { top: 10px; right: 10px; transform: scaleX( -1 ); }
.tic-okno-rog--ld { bottom: 10px; left: 10px; transform: scaleY( -1 ); }
.tic-okno-rog--pd { bottom: 10px; right: 10px; transform: scale( -1 ); }

#astro-karta .ak-panel.tic-okno-slider > .ak-tresc { position: relative; z-index: 1; }

/* Zamykanie — krążek z makiety zamiast systemowego znaku. */
#astro-karta .ak-zamknij.tic-zamknij-gr {
	width: 54px;
	height: 54px;
	border: 0;
	background: none;
	z-index: 3;
}

.tic-zamknij-gr__obraz { width: 100%; height: 100%; transition: transform .2s, filter .2s; }
.tic-zamknij-gr:hover .tic-zamknij-gr__obraz { transform: scale( 1.08 ); filter: brightness( 1.15 ); }

/* ── głowa slajdu ── */

.tic-slajd { padding: 0; }
.tic-slajd__glowa { display: grid; justify-items: center; text-align: center; }

.tic-slajd__pierscien {
	position: relative;
	display: grid;
	place-items: center;
	width: min( 340px, 62vw );
	aspect-ratio: 900 / 798;
}

.tic-slajd__mandala {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: .92;
}

.tic-slajd__chinski {
	position: relative;
	z-index: 1;
	display: block;
	font-family: var( --serif );
	font-size: clamp( 76px, 9vw, 118px );
	line-height: 1;
	background: linear-gradient( 165deg, #f6e2ae 0%, #d8ab5c 45%, #9a7231 100% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow( 0 4px 22px rgba( 200, 150, 60, .55 ) );
}

.tic-slajd__numer {
	margin: var( --odstep ) 0 0;
	font-family: var( --sans );
	font-size: 11px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var( --zloto-cichy );
}

.tic-slajd__nazwa {
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	font-family: var( --serif );
	font-size: clamp( 30px, 3.6vw, 46px );
	font-weight: 500;
	letter-spacing: .06em;
	color: #efe7ff;
	text-shadow: 0 0 34px rgba( 200, 180, 255, .22 );
}

.tic-slajd__haslo {
	margin: 12px auto 0;
	max-width: 46ch;
	font-family: var( --serif );
	font-size: 19px;
	font-style: italic;
	color: var( --lawenda );
}

.tic-slajd__diament {
	display: block;
	width: min( 460px, 80% );
	margin: var( --odstep ) auto 0;
	opacity: .85;
}

.tic-slajd__diament--maly { width: 100%; margin: 18px auto; opacity: .6; }

/* ── dwie kolumny ── */

.tic-slajd__srodek {
	display: grid;
	grid-template-columns: 300px minmax( 0, 1fr );
	gap: 0;
	align-items: start;
	margin-top: calc( var( --odstep ) * 1.4 );
}

.tic-slajd__figura { padding-right: 40px; }
.tic-slajd__linie { display: grid; gap: 14px; }
.tic-slajd__wiersz { display: flex; align-items: center; gap: 16px; }

.tic-slajd__nr {
	width: 16px;
	font-family: var( --serif );
	font-size: 17px;
	text-align: right;
	color: var( --tekst-slaby );
}

.tic-slajd__pary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: center; }
.tic-slajd__para { display: grid; justify-items: center; gap: 8px; }

.tic-slajd__trygram {
	font-size: 30px;
	line-height: 1;
	color: var( --zloto );
	text-shadow: 0 0 18px rgba( 239, 207, 135, .3 );
}

.tic-slajd__podpis {
	font-family: var( --sans );
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var( --tekst-slaby );
}

/* Pionowy włos rozdzielający kolumny — jak na makiecie. */
.tic-slajd__opis {
	padding-left: 40px;
	border-left: 1px solid rgba( 196, 150, 84, .22 );
}

.tic-slajd__slowa {
	margin: 0;
	font-family: var( --sans );
	font-size: 11px;
	letter-spacing: .24em;
	text-align: center;
	color: var( --zloto );
}

/* Wszystkie sekcje mają TEN SAM odstęp od poprzedniej. */
.tic-slajd__sekcja { margin-top: var( --odstep ); }
.tic-slajd__sekcja:first-of-type { margin-top: 0; }

.tic-slajd__etyk {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 10px;
	font-family: var( --serif );
	font-size: 22px;
	font-weight: 400;
	color: #efe7ff;
}

.tic-slajd__ikona { width: 40px; height: 40px; flex: 0 0 40px; }

.tic-slajd__tekst {
	margin: 0;
	max-width: none;
	font-size: 15px;
	line-height: 1.75;
	color: var( --tekst );
}

/* ── strzałki i stopka ── */

.tic-slider { grid-template-columns: 76px minmax( 0, 1fr ) 76px; gap: 18px; align-items: center; }

.tic-strzalka-gr {
	width: 76px;
	height: 76px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.tic-strzalka-gr__obraz { width: 100%; height: 100%; transition: transform .2s, filter .2s; }
.tic-strzalka-gr:hover .tic-strzalka-gr__obraz { transform: scale( 1.07 ); filter: brightness( 1.15 ); }
.tic-strzalka-gr:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 6px; border-radius: 50%; }

.tic-slider__lotos {
	grid-column: 1 / -1;
	display: block;
	width: min( 420px, 70% );
	margin: 8px auto 0;
	opacity: .8;
}

.tic-slider__licznik { margin-top: var( --odstep ); }

@media ( max-width: 900px ) {
	.tic-slajd__srodek { grid-template-columns: minmax( 0, 1fr ); gap: var( --odstep ); }
	.tic-slajd__figura { padding-right: 0; max-width: 300px; margin: 0 auto; }
	.tic-slajd__opis { padding-left: 0; border-left: 0; border-top: 1px solid rgba( 196, 150, 84, .22 ); padding-top: var( --odstep ); }
	.tic-slider { grid-template-columns: 54px minmax( 0, 1fr ) 54px; gap: 8px; }
	.tic-strzalka-gr { width: 54px; height: 54px; }
	.tic-okno-rog { width: 70px; opacity: .35; }
}

@media ( prefers-reduced-motion: reduce ) {
	.tic-strzalka-gr__obraz, .tic-zamknij-gr__obraz { transition: none; }
}

/* ══════════════  zmienne dla okna modalnego  ════════════════
 *
 * Okno modalne wisi POZA `.tic` — doklejamy je do `body`, żeby rozmycie tła
 * działało na całej stronie. Przez to nie widziało żadnej zmiennej z działu:
 * `margin-top: var(--odstep)` było niepoprawne i odstępy między sekcjami
 * wychodziły ZEROWE. Stąd całe to rozjeżdżanie. Powtarzamy więc cały zestaw
 * tutaj, na `#astro-karta`.
 */
#astro-karta {
	--odstep:       26px;
	--tlo:          #00041c;
	--tlo-glab:     #010a24;
	--panel:        rgba( 9, 10, 42, .62 );
	--panel-jasny:  rgba( 18, 18, 58, .5 );
	--zloto:        #efcf87;
	--zloto-jasne:  #fde0a0;
	--zloto-linia:  #c19553;
	--zloto-cichy:  #a8823f;
	--obrys:        rgba( 196, 150, 84, .3 );
	--obrys-mocny:  rgba( 239, 207, 135, .62 );
	--lawenda:      #b9a6e0;
	--tekst:        #d6cfe8;
	--tekst-slaby:  #9b93bb;
	--serif: 'Cormorant Garamond', 'Times New Roman', serif;
	--sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Równe odstępy w slajdzie — jedna miara, bez wyjątków. */
#astro-karta .tic-slajd__sekcja { margin-top: 26px; }
#astro-karta .tic-slajd__sekcja:first-of-type { margin-top: 0; }
#astro-karta .tic-slajd__numer { margin-top: 26px; }
#astro-karta .tic-slajd__diament { margin-top: 26px; }
#astro-karta .tic-slajd__srodek { margin-top: 36px; }
#astro-karta .tic-slider__licznik { margin-top: 26px; }

/* ════════════════  szerokosc panelu slidera  ══════════════════
 *
 * `max-width` sam nic nie dał: panel okna dziedziczy wąską szerokość
 * z arkusza Nieba i tylko się do niej kurczył. Ustawiamy `width` wprost,
 * inaczej prawa kolumna schodziła do kilkudziesięciu pikseli.
 */
#astro-karta .ak-panel.tic-okno-slider {
	width: min( 1320px, 95vw );
	margin-left: auto;
	margin-right: auto;
}

/* Kolumny w proporcji, nie sztywne 300 px — panel bywa węższy niż ekran,
 * a zapytanie medialne patrzy na EKRAN, więc tu nie pomoże. */
#astro-karta .tic-slajd__srodek {
	grid-template-columns: minmax( 190px, 0.85fr ) minmax( 0, 1.7fr );
}

/* ══════════════════════════════════════════════════════════════════════
 *  O METODZIE — długi tekst, więc własna typografia
 *
 *  To jedyne miejsce w serwisie, gdzie ktoś siada i czyta kilka minut.
 *  Interfejsowa siatka by tu przeszkadzała, więc: jedna kolumna o miarze
 *  ~66 znaków, inicjał otwierający każdy dział, złota linia z rombem
 *  między działami, lotos przy „Ciekawostkach".
 *
 *  Ryzyko, na które idę świadomie: inicjał jest DUŻY (cztery wiersze)
 *  i wypełniony ciemnym złotem z gradientem. To jedyny głośny element —
 *  wszystko dookoła zostaje szeptem, żeby dało się przeczytać do końca.
 * ══════════════════════════════════════════════════════════════════════ */

#astro-karta .ak-panel.tic-okno-metoda {
	width: min( 1040px, 94vw );
	max-width: min( 1040px, 94vw );
	margin-left: auto;
	margin-right: auto;
	padding: 48px clamp( 24px, 5vw, 76px ) 44px;
	position: relative;
	overflow: hidden;
}

#astro-karta .ak-panel.tic-okno-metoda > .ak-tresc { position: relative; z-index: 1; }

.tic-metoda { max-width: 72ch; margin: 0 auto; }

.tic-metoda-nad {
	margin: 0;
	font-family: var( --sans );
	font-size: 10.5px;
	letter-spacing: .34em;
	text-transform: uppercase;
	text-align: center;
	color: var( --zloto-cichy );
}

.tic-metoda-glowna {
	margin: 12px 0 0;
	font-family: var( --serif );
	font-size: clamp( 32px, 4vw, 50px );
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: .02em;
	text-align: center;
	color: #efe7ff;
	text-shadow: 0 0 38px rgba( 200, 180, 255, .2 );
}

.tic-metoda-lead {
	margin: 8px 0 0;
	font-family: var( --serif );
	font-size: 20px;
	font-style: italic;
	text-align: center;
	color: var( --lawenda );
}

.tic-metoda-diament { display: block; width: min( 420px, 76% ); margin: 34px auto; opacity: .8; }
.tic-metoda-lotos { display: block; width: min( 380px, 68% ); margin: 40px auto 34px; opacity: .8; }

.tic-metoda-tekst {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.8;
	text-align: left;
	color: var( --tekst );
}

.tic-metoda-tekst:last-child { margin-bottom: 0; }

/* Inicjał — ciemne złoto, cztery wiersze wysokości. */
.tic-inicjal {
	float: left;
	margin: 6px 16px 0 0;
	font-family: var( --serif );
	font-size: 4.2em;
	font-weight: 600;
	line-height: .82;
	background: linear-gradient( 160deg, #f6e2ae 0%, #d8ab5c 46%, #8f6a2f 100% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow( 0 3px 14px rgba( 200, 150, 60, .45 ) );
}

.tic-metoda-tekst--inicjal::after { content: ''; display: block; clear: both; }

/* ── nagłówek działu ── */

.tic-metoda-dzial { margin: 0 0 22px; text-align: center; }

.tic-metoda-tytul {
	margin: 6px 0 0;
	font-family: var( --serif );
	font-size: clamp( 24px, 2.6vw, 33px );
	font-weight: 500;
	letter-spacing: .03em;
	color: var( --zloto-jasne );
}

/* ── dwa punkty o liniach ── */

.tic-metoda-punkty { display: grid; gap: 18px; margin: 0 0 22px; }

.tic-metoda-punkt {
	display: grid;
	grid-template-columns: 60px minmax( 0, 1fr );
	gap: 20px;
	align-items: start;
	padding-left: 4px;
}

.tic-metoda-punkt__rys { display: block; padding-top: 12px; }
.tic-metoda-punkt__rys .tic-linia { height: 10px; }
.tic-metoda-punkt__rys .tic-linia span { height: 8px; }
.tic-metoda-punkt__rys .tic-linia--przerwana { grid-template-columns: 1fr 12px 1fr; }
.tic-metoda-punkt__nazwa { color: var( --zloto-jasne ); font-weight: 500; }
.tic-metoda-punkt .tic-metoda-tekst { margin: 0; }

/* ── dwie ścieżki ── */

.tic-sciezki {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 26px;
	margin: 26px 0 0;
}

.tic-sciezka {
	padding: 26px 24px;
	border: 1px solid var( --obrys );
	border-radius: 16px;
	background: rgba( 10, 10, 44, .5 );
	text-align: center;
}

.tic-sciezka__ikona { width: 58px; height: 58px; margin: 0 auto 12px; display: block; }

.tic-sciezka__nazwa {
	margin: 0;
	font-family: var( --serif );
	font-size: 25px;
	font-weight: 500;
	color: var( --zloto-jasne );
}

.tic-sciezka__pod {
	margin: 4px 0 16px;
	font-family: var( --sans );
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var( --zloto-cichy );
}

.tic-sciezka .tic-metoda-tekst { margin: 0; font-size: 15px; line-height: 1.75; }

/* ── ciekawostki ── */

.tic-ciekawostki { display: grid; gap: 26px; margin-top: 6px; }

.tic-ciekawostka {
	display: grid;
	grid-template-columns: 26px minmax( 0, 1fr );
	gap: 16px;
	align-items: start;
}

.tic-ciekawostka__znak { font-size: 13px; line-height: 1.9; color: var( --zloto-cichy ); }

.tic-ciekawostka__tytul {
	margin: 0 0 6px;
	font-family: var( --serif );
	font-size: 21px;
	font-weight: 500;
	color: var( --zloto-jasne );
}

.tic-ciekawostka .tic-metoda-tekst { margin: 0; font-size: 15.5px; }

@media ( max-width: 640px ) {
	.tic-inicjal { font-size: 3.4em; margin-right: 12px; }
	.tic-metoda-punkt { grid-template-columns: 44px minmax( 0, 1fr ); gap: 14px; }
	.tic-ciekawostka { grid-template-columns: minmax( 0, 1fr ); gap: 6px; }
	.tic-ciekawostka__znak { display: none; }
}

/* ══════════════════  polozenie okna — poprawka  ═════════════════
 *
 * Okno srodkuje sie SAMO: `left: 50%` plus `translateX(-50%)`. Dolozony
 * przeze mnie `margin: auto` policzyl sie do 196 px i DODAL sie do tego
 * srodkowania — panel wyjechal w prawo i wychodzil poza ekran. Zerujemy.
 */
#astro-karta .ak-panel.tic-okno-slider,
#astro-karta .ak-panel.tic-okno-metoda {
	margin-left: 0;
	margin-right: 0;
}


/* ════════════════  krzyżyk i ucięty tekst — poprawka  ══════════════
 *
 * 1. Krzyżyk był jajowaty. Grafika jest kwadratowa (170×170), ale
 *    dostawała 42×52 px przy `object-fit: fill`, więc pierścień był
 *    ściskany w poziomie. Wymuszamy kwadrat i `contain`.
 *
 * 2. Tekst heksagramu się nie mieścił: panel miewa 806 px wysokości
 *    przy 1330 px treści i `overflow: hidden` — ponad 500 px opisu
 *    było ucięte i nie dawało się do niego dojść. Okno slidera
 *    dostaje własne przewijanie, strzałki zostają na miejscu.
 * ═════════════════════════════════════════════════════════════════ */

#astro-karta .ak-zamknij.tic-zamknij-gr {
	width: 54px;
	height: 54px;
	min-width: 54px;
	min-height: 54px;
	padding: 0;
	box-sizing: border-box;
	flex: 0 0 auto;
}

#astro-karta .ak-zamknij.tic-zamknij-gr .tic-zamknij-gr__obraz {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

#astro-karta .ak-panel.tic-okno-slider {
	height: auto;
	max-height: 92vh;
}

#astro-karta .ak-panel.tic-okno-slider .tic-slider__okno {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: calc( 92vh - 150px );
	scrollbar-width: thin;
	scrollbar-color: rgba( 192, 144, 80, .55 ) transparent;
}

#astro-karta .ak-panel.tic-okno-slider .tic-slider__okno::-webkit-scrollbar { width: 8px; }
#astro-karta .ak-panel.tic-okno-slider .tic-slider__okno::-webkit-scrollbar-track { background: transparent; }
#astro-karta .ak-panel.tic-okno-slider .tic-slider__okno::-webkit-scrollbar-thumb {
	background: rgba( 192, 144, 80, .5 );
	border-radius: 4px;
}


/* ═══════════════  ODCZYTANIE — jeden układ, jedna miara  ══════════════
 *
 * Do tej pory szerokość i odstępy bloków opisywało DWADZIEŚCIA reguł
 * dopisywanych jedna po drugiej, często sprzecznych: raz `max-width: 74ch`
 * i `margin: auto`, raz `max-width: none`, raz kolumny z paddingiem 26 px,
 * raz bez. Stąd każdy blok miewał inną szerokość i inny odstęp.
 *
 * Teraz jest jedno źródło prawdy:
 *   – `--blok`  — ta sama szerokość dla WSZYSTKICH sekcji odczytania,
 *   – `--odstep` — ten sam odstęp pionowy między nimi,
 *   – kolumny rozdziela `column-gap`, nie padding, więc wszystkie trzy
 *     mają identyczną szerokość; włos rysuje pseudoelement POŚRODKU przerwy.
 * ════════════════════════════════════════════════════════════════════ */

.tic .tic-odczytanie {
	--blok: 100%;
	--odstep-blok: 32px;
	--wlos: 1px solid rgba( 196, 150, 84, .16 );
	--przerwa: 56px;
}

.tic .tic-czytanie { display: block; }

/* Wszystkie sekcje odczytania: ta sama szerokość, ten sam odstęp. */
.tic .tic-trzy,
.tic .tic-rozdzial {
	width: var( --blok );
	margin: var( --odstep-blok ) auto 0;
	box-sizing: border-box;
}

.tic .tic-rozdzial {
	padding: var( --odstep-blok ) 0 0;
	border-top: var( --wlos );
}

.tic .tic-trzy {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	column-gap: var( --przerwa );
	row-gap: var( --odstep-blok );
	padding: 0;
	border: 0;
}

.tic .tic-trzy__pole {
	position: relative;
	display: grid;
	gap: 10px;
	align-content: start;
	padding: 0;
	border: 0;
}

/* Włos dokładnie pośrodku przerwy — nie zabiera kolumnie ani piksela. */
.tic .tic-trzy__pole + .tic-trzy__pole::before {
	content: '';
	position: absolute;
	left: calc( var( --przerwa ) / -2 );
	top: 0;
	bottom: 0;
	border-left: var( --wlos );
}

.tic .tic-trzy__pole p { max-width: none; margin: 0; text-align: left; }
.tic .tic-trzy__pole p:last-child { font-size: 14.5px; line-height: 1.7; }

.tic .tic-rozdzial__tekst {
	max-width: none;
	margin: 12px 0 0;
	text-align: left;
	font-size: 15px;
	line-height: 1.75;
}

.tic .tic-rozdzial--wynik .tic-rozdzial__tekst { color: var( --zloto-jasne ); }

@media ( max-width: 900px ) {
	.tic .tic-trzy { grid-template-columns: 1fr; column-gap: 0; }
	.tic .tic-trzy__pole + .tic-trzy__pole::before { display: none; }
	.tic .tic-trzy__pole + .tic-trzy__pole {
		padding-top: var( --odstep-blok );
		border-top: var( --wlos );
	}
}

/* ══════════  okno O METODZIE tez musi się przewijać  ══════════
 *
 * Ten sam błąd co w sliderze, tylko w drugim oknie: panel miał 812 px
 * wysokości przy 3070 px treści i `overflow: hidden` — 2258 px tekstu
 * (Dwie ścieżki, Czego I Ching nie robi, Czysty przypadek, Ciekawostki)
 * było w DOM, ale niewidoczne i nie do przewinięcia. Naprawiając slider
 * objąłem regułą tylko `.tic-okno-slider` i zostawiłem to okno z wadą.
 * ═════════════════════════════════════════════════════════════ */

#astro-karta .ak-panel.tic-okno-metoda {
	height: auto;
	max-height: 92vh;
	overflow: hidden;
}

#astro-karta .ak-panel.tic-okno-metoda > .ak-tresc {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: calc( 92vh - 130px );
	padding-right: 10px;
	scrollbar-width: thin;
	scrollbar-color: rgba( 192, 144, 80, .55 ) transparent;
}

#astro-karta .ak-panel.tic-okno-metoda > .ak-tresc::-webkit-scrollbar { width: 8px; }
#astro-karta .ak-panel.tic-okno-metoda > .ak-tresc::-webkit-scrollbar-track { background: transparent; }
#astro-karta .ak-panel.tic-okno-metoda > .ak-tresc::-webkit-scrollbar-thumb {
	background: rgba( 192, 144, 80, .5 );
	border-radius: 4px;
}


/* ════════════════  BLOKI EKRANU WYNIKU — jedna miara  ════════════════
 *
 * Pomiar na żywej stronie pokazał, skąd brało się "każdy blok inny":
 *
 *   .tic-pary          325 → 1425   szerokość 1100  (max-width: 1100px)
 *   .tic-odczytanie    285 → 1465   szerokość 1180  (max-width: 1180px)
 *   .tic-karta--pasek  246 → 1504   szerokość 1258
 *   .tic-stopka-wynik  246 → 1504   szerokość 1258
 *
 * Trzy różne szerokości i odstępy 22 / 20 / 0 / 20 / 22 — stąd schodki na
 * lewej i prawej krawędzi. Wcześniej równałem sekcje WEWNĄTRZ karty
 * odczytania, a rozjazd był piętro wyżej, między kartami.
 *
 * Teraz wszystkie bloki ekranu wyniku biorą tę samą szerokość i ten sam
 * odstęp z dwóch zmiennych. Żadna karta nie ma już własnego `max-width`.
 * ════════════════════════════════════════════════════════════════════ */

.tic .tic-ekran {
	--blok-szer: 100%;
	--blok-odstep: 24px;
}

.tic .tic-ekran > .tic-pary,
.tic .tic-ekran > .tic-karta,
.tic .tic-ekran > .tic-odczytanie,
.tic .tic-ekran > .tic-stopka-wynik,
.tic .tic-ekran > .tic-akcje {
	width: var( --blok-szer );
	max-width: var( --blok-szer );
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* Ten sam odstęp nad każdym blokiem — także tam, gdzie wynosił zero. */
.tic .tic-ekran > .tic-pary,
.tic .tic-ekran > .tic-karta,
.tic .tic-ekran > .tic-odczytanie,
.tic .tic-ekran > .tic-stopka-wynik,
.tic .tic-ekran > .tic-akcje {
	margin-top: var( --blok-odstep );
	margin-bottom: 0;
}

/* Pierwszy blok pod nagłówkiem nie potrzebuje podwójnego odstępu. */
.tic .tic-ekran > .tic-pod + .tic-pary { margin-top: 0; }