/* ═══════════════════════════════════════════════════════════════════════
   Twój kosmogram — strona robocza modułów
   ═══════════════════════════════════════════════════════════════════════
   Paleta Horoskopu (noc, złoto, lawenda, neon) i jego rama — moduły mają
   wrócić na Horoskop / w jedno miejsce „Twój kosmogram". Tokeny zdublowane
   na `.tks`, żeby strona robocza działała bez arkusza Horoskopu. */

.tks {
	--tlo:          #020316;
	--tlo-panel:    #070518;
	--tlo-karta:    #08061a;
	--zloto:        #fde291;
	--zloto-cieply: #f9d57a;
	--zloto-ciemne: #e6c48a;
	--zloto-etyk:   #cda474;
	--lawenda:      #ad97d3;
	--tekst:        #aba9b6;
	--tekst-slaby:  #9393a7;
	--tekst-mocny:  #e0dbde;
	--neon:         #a06ffb;
	--serif: 'Cormorant Garamond', 'Times New Roman', serif;
	--sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

	position: relative;
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1520px;
	padding: 34px 40px 36px;
	color: var( --tekst );
	font-family: var( --sans );
	font-weight: 300;
	background: var( --tlo-panel );
	border: 1px solid rgba( 160, 111, 251, .52 );
	border-radius: 18px;
	box-shadow:
		0 0 0 1px rgba( 160, 111, 251, .14 ),
		0 0 30px rgba( 116, 66, 214, .30 ),
		inset 0 0 70px rgba( 52, 26, 110, .30 );
	overflow: hidden;
}
.tks *, .tks *::before, .tks *::after { box-sizing: border-box; }

.tks::before,
.tks::after {
	content: '';
	position: absolute;
	top: 12px;
	width: 118px;
	height: 116px;
	background-size: cover;
	background-position: center;
	opacity: .55;
	pointer-events: none;
	-webkit-mask-image: radial-gradient( closest-side, #000 50%, transparent 100% );
	mask-image: radial-gradient( closest-side, #000 50%, transparent 100% );
}
.tks::before { left: 12px;  background-image: var( --kompas-l ); }
.tks::after  { right: 12px; background-image: var( --kompas-p ); }

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

.tks-glowa { position: relative; z-index: 1; text-align: center; }
.tks-nad { margin: 0 0 8px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tks-nad i { font-style: normal; color: var( --zloto-ciemne ); margin: 0 10px; }
.tks-tytul {
	margin: 0;
	font-family: var( --serif );
	font-weight: 500;
	font-size: 30px;
	letter-spacing: .06em;
	color: var( --zloto-cieply );
	line-height: 1.15;
}
.tks-ozdoba { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0 0; color: var( --zloto-ciemne ); }
.tks-ozdoba i { display: block; width: 92px; height: 1px; background: linear-gradient( 90deg, transparent, var( --zloto-ciemne ) ); }
.tks-ozdoba i + b + i { background: linear-gradient( 90deg, var( --zloto-ciemne ), transparent ); }
.tks-ozdoba b { font-weight: 400; font-size: 12px; }

/* ─────────────────────────────  formularz  ───────────────────────── */

.tks-form {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr 2fr auto;
	gap: 14px;
	align-items: end;
	max-width: 900px;
	margin: 26px auto 0;
}
.tks-form[hidden] { display: none; }
.tks-pole { display: grid; gap: 6px; position: relative; }
.tks-pole > span { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tks-pole input {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid rgba( 230, 196, 138, .28 );
	border-radius: 10px;
	background: rgba( 2, 3, 22, .7 );
	color: var( --tekst-mocny );
	font: 300 15px var( --sans );
	color-scheme: dark;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}
.tks-pole input:focus { border-color: var( --neon ); box-shadow: 0 0 0 3px rgba( 160, 111, 251, .18 ); }
.tks-podpowiedzi {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
	margin: 6px 0 0; padding: 6px 0; list-style: none;
	border: 1px solid rgba( 230, 196, 138, .28 ); border-radius: 10px;
	background: #0b0820; box-shadow: 0 18px 40px rgba( 0, 0, 0, .5 );
	max-height: 240px; overflow: auto;
}
.tks-podpowiedzi[hidden] { display: none; }
.tks-podpowiedzi li { padding: 9px 14px; cursor: pointer; font-size: 14px; color: var( --tekst-mocny ); }
.tks-podpowiedzi li:hover { background: rgba( 160, 111, 251, .16 ); }
.tks-podpowiedzi small { color: var( --tekst-slaby ); margin-left: 8px; }
.tks-btn {
	height: 44px; padding: 0 22px;
	border: 1px solid var( --zloto-ciemne ); border-radius: 999px;
	background: linear-gradient( 180deg, rgba( 253, 226, 145, .16 ), rgba( 253, 226, 145, .04 ) );
	color: var( --zloto ); font: 400 12px var( --sans ); letter-spacing: .2em; text-transform: uppercase;
	cursor: pointer; transition: background .2s, box-shadow .2s;
}
.tks-btn:hover { background: rgba( 253, 226, 145, .22 ); box-shadow: 0 0 22px rgba( 253, 226, 145, .18 ); }
.tks-btn:focus-visible { outline: 2px solid var( --neon ); outline-offset: 3px; }
.tks-blad { grid-column: 1 / -1; margin: 0; color: #f3a1a1; font-size: 13.5px; text-align: center; }
.tks-blad[hidden] { display: none; }

/* ─────────────────────────────  wynik / moduły  ──────────────────── */

.tks-wynik { position: relative; z-index: 1; margin-top: 30px; }
.tks-wynik[hidden] { display: none; }

.tks-modul {
	padding: 30px 0 0;
	border-top: 1px solid rgba( 230, 196, 138, .14 );
}
.tks-modul:first-child { border-top: 0; padding-top: 0; }
.tks-modul__nad {
	margin: 0 0 8px;
	text-align: center;
	font-size: 11px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var( --zloto );
}
.tks-modul__nad i { font-style: normal; color: var( --zloto-ciemne ); margin: 0 12px; }

/* Rachunek pokazany jawnie — złota formuła pod nagłówkiem. */
.tks-wzor {
	margin: 0 0 26px;
	text-align: center;
	font-family: var( --serif );
	font-size: 20px;
	letter-spacing: .04em;
	color: var( --zloto-ciemne );
}
.tks-wzor b { font-weight: 500; color: var( --zloto ); }
.tks-wzor i { font-style: normal; color: var( --lawenda ); margin: 0 10px; }

/* Karty — dwie albo trzy obok siebie, w proporcji karty tarota. */
.tks-karty {
	display: flex;
	justify-content: center;
	gap: 34px;
	flex-wrap: wrap;
}
.tks-karta {
	width: 250px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	opacity: 0;
	transform: translateY( 14px );
	animation: tks-wejscie .6s cubic-bezier( .2, .7, .2, 1 ) forwards;
	animation-delay: calc( .15s + var( --i, 0 ) * .14s );
}
@keyframes tks-wejscie { to { opacity: 1; transform: none; } }

.tks-karta__rola {
	margin: 0 0 12px;
	font-size: 10.5px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var( --zloto-etyk );
}
.tks-karta--dusza .tks-karta__rola,
.tks-karta--glowna .tks-karta__rola { color: var( --zloto ); }

/* Karty nauczyciela — z tej samej rodziny liczb, ale nie główne: mniejsze,
   przygaszone, z kreską po lewej, żeby czytało się je jako „obok". */
.tks-karta--nauczyciel { width: 190px; padding-left: 26px; border-left: 1px solid rgba( 230, 196, 138, .18 ); }
/* Przygaszenie filtrem, nie `opacity` — animacja wejścia kończy na opacity: 1 i nadpisałaby je. */
.tks-karta--nauczyciel .tks-karta__obraz { width: 150px; filter: saturate( .75 ) brightness( .85 ); transition: filter .3s, transform .3s, box-shadow .3s; }
.tks-karta--nauczyciel .tks-karta__obraz:hover { filter: none; }
.tks-karta--nauczyciel .tks-karta__nazwa { font-size: 20px; color: var( --zloto-ciemne ); }

.tks-karta__obraz {
	position: relative;
	display: block;
	width: 200px;
	aspect-ratio: 3 / 5;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var( --tlo-karta );
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba( 230, 196, 138, .45 ), 0 0 0 5px var( --tlo-panel ), 0 0 0 6px rgba( 230, 196, 138, .18 ), 0 18px 40px rgba( 0, 0, 0, .45 );
	transition: transform .3s cubic-bezier( .2, .7, .2, 1 ), box-shadow .3s;
}
.tks-karta__obraz img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tks-karta__obraz:hover { transform: translateY( -4px ) scale( 1.02 ); box-shadow: 0 0 0 1px var( --zloto-ciemne ), 0 0 0 5px var( --tlo-panel ), 0 0 0 6px rgba( 230, 196, 138, .4 ), 0 24px 50px rgba( 0, 0, 0, .55 ); }
.tks-karta__obraz:focus-visible { outline: 2px solid var( --neon ); outline-offset: 6px; }
.tks-karta__numer {
	position: absolute;
	top: 8px;
	left: 10px;
	font-family: var( --serif );
	font-size: 18px;
	color: var( --zloto );
	text-shadow: 0 0 10px rgba( 0, 0, 0, .9 );
	pointer-events: none;
}

.tks-karta__nazwa {
	margin: 16px 0 2px;
	font-family: var( --serif );
	font-weight: 500;
	font-size: 24px;
	letter-spacing: .04em;
	color: var( --zloto );
	line-height: 1.1;
}
.tks-karta__wladca { margin: 0 0 10px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tks-karta__opis { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var( --lawenda ); }
.tks-karta__num { margin: 0; font-size: 13px; line-height: 1.6; color: var( --tekst ); max-width: 26ch; }

.tks-skad {
	max-width: 74ch;
	margin: 30px auto 0;
	padding-top: 22px;
	border-top: 1px solid rgba( 230, 196, 138, .14 );
	text-align: center;
	font-size: 13px;
	line-height: 1.7;
	color: var( --tekst-slaby );
}
.tks-skad b { font-weight: 400; color: var( --tekst ); }

/* ─────────────────────────  B. liczby  ───────────────────────────── */

.tks-pole--imie { grid-column: 1 / 4; }
.tks-pole--imie em { font-style: normal; text-transform: none; letter-spacing: 0; color: var( --tekst-slaby ); margin-left: 6px; }

.tks-liczby__imie {
	margin: 0 0 22px;
	text-align: center;
	font-family: var( --serif );
	font-size: 20px;
	letter-spacing: .18em;
	color: var( --zloto-ciemne );
}
.tks-liczby__imie:empty { display: none; }

/* Medaliony — jak przy runach: liczba w złotym pierścieniu; mistrzowska ma
   podwójny obrys i drobną redukcję obok (11/2). */
.tks-liczby {
	display: flex;
	justify-content: center;
	gap: 18px 26px;
	flex-wrap: wrap;
}
.tks-liczba {
	width: 176px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 6px 6px 12px;
	border: 1px solid transparent;
	border-radius: 16px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	opacity: 0;
	transform: translateY( 12px );
	animation: tks-wejscie .55s cubic-bezier( .2, .7, .2, 1 ) forwards;
	animation-delay: calc( .1s + var( --i, 0 ) * .1s );
	transition: border-color .25s, background .25s;
}
.tks-liczba:hover { border-color: rgba( 230, 196, 138, .3 ); background: rgba( 160, 111, 251, .07 ); }
.tks-liczba:focus-visible { outline: 2px solid var( --neon ); outline-offset: 3px; }

.tks-liczba__medalion {
	position: relative;
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	margin-bottom: 12px;
	border-radius: 999px;
	border: 1px solid var( --zloto-ciemne );
	background: radial-gradient( circle at 50% 35%, rgba( 253, 226, 145, .16 ), transparent 62% ), var( --tlo-karta );
	box-shadow: 0 0 0 4px var( --tlo-panel ), 0 0 0 5px rgba( 230, 196, 138, .28 ), 0 0 24px rgba( 253, 226, 145, .16 );
	transition: box-shadow .25s;
}
.tks-liczba:hover .tks-liczba__medalion { box-shadow: 0 0 0 4px var( --tlo-panel ), 0 0 0 5px var( --zloto-ciemne ), 0 0 34px rgba( 253, 226, 145, .32 ); }
.tks-liczba--mistrzowska .tks-liczba__medalion { box-shadow: 0 0 0 4px var( --tlo-panel ), 0 0 0 5px var( --zloto-ciemne ), 0 0 0 9px var( --tlo-panel ), 0 0 0 10px rgba( 230, 196, 138, .28 ), 0 0 30px rgba( 253, 226, 145, .3 ); }
.tks-liczba__cyfra {
	font-family: var( --serif );
	font-weight: 500;
	font-size: 42px;
	line-height: 1;
	color: var( --zloto );
	letter-spacing: -.02em;
}
.tks-liczba__red { position: absolute; right: 12px; bottom: 14px; font-family: var( --serif ); font-size: 14px; color: var( --zloto-etyk ); }

.tks-liczba__pozycja { margin: 0 0 4px; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tks-liczba--droga .tks-liczba__pozycja,
.tks-liczba--rok .tks-liczba__pozycja { color: var( --zloto ); }
.tks-liczba__haslo { margin: 0 0 8px; font-family: var( --serif ); font-size: 16px; font-style: italic; color: var( --lawenda ); line-height: 1.25; }
.tks-liczba__rachunek { font-size: 11px; letter-spacing: .04em; color: var( --tekst-slaby ); line-height: 1.5; max-width: 22ch; }

.tks-liczby__brak { margin: 18px auto 0; max-width: 56ch; text-align: center; font-family: var( --serif ); font-size: 17px; font-style: italic; color: var( --zloto-ciemne ); }
.tks-liczby__brak[hidden] { display: none; }

#astro-karta.tks-okno .ak-hero--liczba { display: grid; place-items: center; background: radial-gradient( circle, rgba( 160, 111, 251, .22 ), transparent 70% ), #06041a; }
#astro-karta.tks-okno .tks-okno__liczba {
	display: grid; place-items: center;
	width: 150px; height: 150px; border-radius: 999px;
	border: 1px solid #e6c48a;
	box-shadow: 0 0 0 5px #06041a, 0 0 0 6px rgba( 230, 196, 138, .3 ), 0 0 50px rgba( 253, 226, 145, .3 );
	font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 72px; color: #fde291;
}
#astro-karta.tks-okno .tks-okno__liczba.jest-mistrzowska { box-shadow: 0 0 0 5px #06041a, 0 0 0 6px #e6c48a, 0 0 0 11px #06041a, 0 0 0 12px rgba( 230, 196, 138, .3 ), 0 0 60px rgba( 253, 226, 145, .35 ); }
#astro-karta.tks-okno .tks-okno__rachunek { font-family: 'Cormorant Garamond', serif; font-size: 17px; letter-spacing: .04em; color: #e6c48a; margin: 2px 0; }

/* ─────────────────────────  okno karty  ──────────────────────────── */

#astro-karta.tks-okno .ak-hero img { width: 100%; height: 100%; object-fit: contain; background: #06041a; }
#astro-karta.tks-okno .ak-sekcja { margin: 14px 0 0; }
#astro-karta.tks-okno .ak-sekcja > b { display: block; margin: 0 0 4px; font-weight: 400; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: #cda474; }

/* ─────────────────────────  strona robocza  ──────────────────────── */

body:has( .tks-strona ) .wp-site-blocks > header,
body:has( .tks-strona ) header.wp-block-template-part,
body:has( .tks-strona ) .wp-site-blocks > footer,
body:has( .tks-strona ) footer.wp-block-template-part,
body:has( .tks-strona ) .wp-block-post-title { display: none !important; }
body:has( .tks-strona ) .wp-site-blocks,
body:has( .tks-strona ) .wp-block-group,
body:has( .tks-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tks-strona ) .wp-block-post-content > *,
body:has( .tks-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tks-strona ) { background: #020316; }

.tks-strona {
	min-height: 100vh;
	padding: 40px 20px 80px;
	background: radial-gradient( 1100px 620px at 50% -10%, rgba( 116, 66, 214, .22 ), transparent 70% ), #020316;
}
.tks-proba { max-width: 1520px; margin: 0 auto 14px; font: 300 12px 'Jost', system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #9393a7; text-align: center; }

@media ( max-width: 760px ) {
	.tks { padding: 26px 18px 28px; }
	.tks::before, .tks::after { display: none; }
	.tks-tytul { font-size: 22px; }
	.tks-form { grid-template-columns: 1fr 1fr; }
	.tks-pole--miasto, .tks-btn { grid-column: 1 / -1; }
	.tks-karty { gap: 22px; }
	.tks-karta { width: 200px; }
	.tks-karta__obraz { width: 160px; }
}
@media ( prefers-reduced-motion: reduce ) {
	.tks-karta { animation: none; opacity: 1; transform: none; }
}

/* ═══════════════════════════════  0. niebo urodzenia  ════════════════ */

.tks-modul--kolo { padding-top: 0; }
.tks-niebo { display: grid; grid-template-columns: minmax( 300px, 520px ) 1fr; gap: 30px 44px; align-items: center; max-width: 1100px; margin: 0 auto; }
.tks-kolo__svg { width: 100%; height: auto; }
.tks-kolo__pierscien { fill: none; stroke: rgba( 230, 196, 138, .35 ); stroke-width: 1; }
.tks-kolo__pierscien--cienki { stroke: rgba( 230, 196, 138, .16 ); }
.tks-kolo__pierscien--srodek { stroke: rgba( 160, 111, 251, .25 ); fill: rgba( 2, 3, 22, .5 ); }
.tks-kolo__kreska { stroke: rgba( 230, 196, 138, .14 ); stroke-width: 1; }
.tks-kolo__horyzont { stroke: rgba( 253, 226, 145, .35 ); stroke-width: 1; stroke-dasharray: 4 5; }
.tks-kolo__znak { font-size: 15px; fill: var( --zloto-ciemne ); }
.tks-kolo__planeta { font: 400 19px var( --serif ); fill: var( --zloto ); cursor: pointer; }
.tks-kolo__planeta.jest-asc { font-size: 13px; letter-spacing: .06em; fill: var( --lawenda ); }
.tks-kolo__planeta:hover, .tks-kolo__planeta:focus { fill: #fff; outline: none; }
.tks-kolo__wskaznik { stroke: rgba( 253, 226, 145, .4 ); stroke-width: 1; }
.tks-kolo__srodek { font: 500 26px var( --serif ); fill: var( --zloto-cieply ); letter-spacing: .04em; }
.tks-kolo__srodek-pod { font: 300 10px var( --sans ); letter-spacing: .3em; text-transform: uppercase; fill: var( --zloto-etyk ); }
.tks-niebo__obok { display: grid; gap: 22px; }
.tks-obok__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tks-osie { display: grid; gap: 6px; }
.tks-os { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid rgba( 230, 196, 138, .22 ); border-radius: 999px; background: rgba( 2, 3, 22, .45 ); color: var( --tekst-mocny ); font: 300 14px var( --sans ); cursor: pointer; width: fit-content; transition: border-color .2s, background .2s; }
.tks-os:hover { border-color: var( --zloto-ciemne ); background: rgba( 253, 226, 145, .06 ); }
.tks-os b { font: 400 18px var( --serif ); color: var( --zloto ); min-width: 20px; text-align: center; }
.tks-os small { color: var( --tekst-slaby ); }
.tks-osie__reszta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tks-os--maly { padding: 4px 10px; font-size: 12px; color: var( --tekst ); }
.tks-os--maly b { font-size: 15px; }
.tks-bilans { display: grid; gap: 6px; }
.tks-zywiol { display: grid; grid-template-columns: 78px 1fr 28px; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tks-zywiol__pas { height: 5px; border-radius: 999px; background: rgba( 255, 255, 255, .06 ); overflow: hidden; }
.tks-zywiol__pas i { display: block; height: 100%; border-radius: inherit; background: var( --zl, var( --zloto ) ); box-shadow: 0 0 10px var( --zl, var( --zloto ) ); }
.tks-zywiol--ogien { --zl: #ee7f3d; } .tks-zywiol--ziemia { --zl: #d2a85e; } .tks-zywiol--powietrze { --zl: #c9b8ef; } .tks-zywiol--woda { --zl: #6d9be6; }
.tks-zywiol__ile { text-align: right; color: var( --tekst ); }
.tks-ksiezyc__karta { display: inline-flex; align-items: center; gap: 14px; padding: 8px 16px 8px 8px; border: 1px solid rgba( 230, 196, 138, .22 ); border-radius: 999px; background: rgba( 2, 3, 22, .45 ); color: var( --tekst-mocny ); font: inherit; text-align: left; cursor: pointer; }
.tks-ksiezyc__karta:hover { border-color: var( --zloto-ciemne ); }
.tks-ksiezyc__tekst { display: grid; gap: 2px; }
.tks-ksiezyc__tekst b { font: 500 16px var( --serif ); color: var( --zloto-cieply ); }
.tks-ksiezyc__tekst small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tks-tarcza { position: relative; display: block; width: 56px; height: 56px; border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
.tks-tarcza img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tks-tarcza__cien { position: absolute; inset: 0; width: 100%; height: 100%; }
#astro-karta .ak-hero--ksiezyc { display: grid; place-items: center; min-height: 200px; background: radial-gradient( circle at 50% 50%, rgba( 201, 184, 239, .18 ), transparent 60% ), #08061a; }
#astro-karta .ak-hero--ksiezyc .tks-tarcza { width: 150px; height: 150px; }
.tks-niebo__uwaga { max-width: 70ch; margin: 18px auto 0; text-align: center; font-size: 12.5px; color: var( --tekst-slaby ); }

/* ═══════════════════════════  kafle: kamienie i runy  ════════════════ */

.tks-kafle { display: grid; grid-template-columns: repeat( auto-fit, minmax( 150px, 180px ) ); justify-content: center; gap: 16px; }
.tks-kafel { display: grid; gap: 6px; justify-items: center; padding: 12px 10px 14px; border: 1px solid rgba( 230, 196, 138, .18 ); border-radius: 14px; background: rgba( 2, 3, 22, .45 ); color: var( --tekst ); font: inherit; text-align: center; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; animation: tks-wejscie .6s both; animation-delay: calc( var( --i, 0 ) * 70ms ); }
.tks-kafel:hover { border-color: var( --zloto-ciemne ); transform: translateY( -2px ); box-shadow: 0 14px 30px rgba( 0, 0, 0, .4 ); }
.tks-kafel:focus-visible { outline: 2px solid var( --neon ); outline-offset: 3px; }
.tks-kafel__rola { margin: 0; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tks-kafel__obraz { position: relative; display: block; width: 118px; height: 118px; border-radius: 22px; overflow: hidden; background: radial-gradient( circle at 40% 35%, var( --kk, #2a2450 ), var( --kk2, var( --kk, #0b0820 ) ) 70% ); box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .08 ); }
.tks-kafel__obraz img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tks-kafel--runa .tks-kafel__obraz { border-radius: 999px; background: radial-gradient( circle at 50% 40%, #1a1436, #0b0a18 70% ); }
.tks-kafel__glif { position: absolute; inset: 0; display: grid; place-items: center; font: 400 44px var( --serif ); color: #f0ce7e; text-shadow: 0 0 18px rgba( 240, 206, 126, .5 ); pointer-events: none; }
.tks-kafel__nazwa { margin: 4px 0 0; font: 500 18px var( --serif ); color: var( --zloto-cieply ); }
.tks-kafel__gdzie { margin: 0; font-size: 12px; color: var( --tekst-slaby ); }
@keyframes tks-wejscie { from { opacity: 0; transform: translateY( 10px ); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════  E. filary  ═════════════════════════ */

.tks-filary { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 16px; max-width: 640px; margin: 0 auto; }
.tks-filar { text-align: center; animation: tks-wejscie .6s both; animation-delay: calc( var( --i, 0 ) * 90ms ); }
.tks-filar__nazwa { margin: 0 0 8px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tks-filar.jest-pan .tks-filar__nazwa { color: var( --zloto ); }
.tks-tabliczka { display: grid; gap: 2px; padding: 12px 8px; border: 1px solid rgba( 230, 196, 138, .28 ); border-radius: 8px 8px 12px 12px; background: linear-gradient( 180deg, #0f0b26, #08061a ); box-shadow: inset 0 0 0 4px rgba( 230, 196, 138, .05 ), 0 10px 24px rgba( 0, 0, 0, .4 ); }
.tks-filar.jest-pan .tks-tabliczka { border-color: var( --zloto-ciemne ); box-shadow: inset 0 0 0 4px rgba( 253, 226, 145, .07 ), 0 0 26px rgba( 253, 226, 145, .14 ); }
.tks-tabliczka.jest-pusta { min-height: 118px; place-items: center; border-style: dashed; opacity: .55; }
.tks-tabliczka__pyt { font: 400 40px var( --serif ); color: var( --zloto-etyk ); }
.tks-cjk { border: 0; background: none; padding: 2px; font: 400 44px/1.1 'Noto Serif SC', 'Noto Serif CJK SC', 'SimSun', serif; color: var( --el, var( --zloto ) ); cursor: pointer; border-radius: 6px; text-shadow: 0 0 16px color-mix( in srgb, var( --el, #fde291 ) 40%, transparent ); }
.tks-cjk:hover { background: rgba( 255, 255, 255, .05 ); }
.tks-cjk:focus-visible { outline: 2px solid var( --neon ); }
.jest-drewno { --el: #7cc59a; } .jest-ogien { --el: #ee7f3d; } .jest-ziemia { --el: #d2a85e; } .jest-metal { --el: #ece6d4; } .jest-woda { --el: #6d9be6; } .jest-zloto { --el: #fde291; }
.tks-filar__pod { margin: 8px 0 0; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tks-filar.jest-pan .tks-filar__pod { color: var( --zloto ); }
.tks-filary__pan { max-width: 70ch; margin: 18px auto 0; text-align: center; font-size: 14px; line-height: 1.6; color: var( --tekst ); }
#astro-karta .ak-hero--cjk { display: grid; place-items: center; min-height: 190px; background: radial-gradient( circle at 50% 45%, color-mix( in srgb, var( --el, #fde291 ) 26%, transparent ), transparent 62% ), linear-gradient( 180deg, #0f0b26, #08061a ); }
.tks-cjk-hero { font: 400 108px/1 'Noto Serif SC', 'Noto Serif CJK SC', 'SimSun', serif; color: var( --el, #fde291 ); text-shadow: 0 0 34px color-mix( in srgb, var( --el, #fde291 ) 50%, transparent ); }

/* ═══════════════════════════════  F. dziś  ═══════════════════════════ */

.tks-dzis { max-width: 72ch; margin: 0 auto; text-align: center; }
.tks-btn--dzis { display: inline-block; }
.tks-btn:disabled { opacity: .45; cursor: not-allowed; }
.tks-dzis__uwaga { margin: 10px 0 0; font-size: 12.5px; color: var( --tekst-slaby ); }
.tks-dzis__pod { margin: 0 0 14px; font: 500 20px/1.35 var( --serif ); color: var( --zloto-cieply ); }
.tks-dzis__akapit { margin: 0 0 12px; font-size: 14.5px; line-height: 1.75; color: var( --tekst ); text-align: left; }
.tks-dzis__tranzyty { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 0; }
.tks-dzis__tranzyty span { padding: 4px 12px; border: 1px solid rgba( 230, 196, 138, .2 ); border-radius: 999px; font-size: 12px; color: var( --tekst-slaby ); }
.tks-dzis__link { margin: 16px 0 0; font-size: 12.5px; letter-spacing: .08em; }
.tks-dzis__link a, .tks-skad a, #astro-karta .ak-akapit--link a { color: var( --zloto-ciemne ); text-decoration: none; border-bottom: 1px solid rgba( 230, 196, 138, .3 ); }
.tks-dzis__link a:hover, .tks-skad a:hover, #astro-karta .ak-akapit--link a:hover { color: var( --zloto ); border-color: var( --zloto ); }

.tks-dalej { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px 0 0; padding-top: 22px; border-top: 1px solid rgba( 230, 196, 138, .14 ); }
.tks-dalej a { padding: 8px 18px; border: 1px solid rgba( 230, 196, 138, .28 ); border-radius: 999px; color: var( --zloto-ciemne ); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; }
.tks-dalej a:hover { background: rgba( 253, 226, 145, .08 ); color: var( --zloto ); }

@media ( max-width: 900px ) {
	.tks-niebo { grid-template-columns: 1fr; }
	.tks-filary { grid-template-columns: repeat( 2, 1fr ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.tks-kafel, .tks-filar { animation: none; }
}

body:has( .tks-strona ) .wp-block-post-content > .tks-strona, body:has( .tks-strona ) .entry-content > .tks-strona, .tks-strona { max-width: 1520px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; }

/* ═══════════════  makieta „Kosmogram" 2026-09-06 — układ 1:1  ═══════════════ */
body:has( .tks-strona ) .wp-block-post-content > .tks-strona, body:has( .tks-strona ) .entry-content > .tks-strona, .tks-strona { max-width: 1520px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 0 60px; background: var( --tlo-strony ) center top / 100% auto no-repeat, #020316; }
.tks { max-width: none; padding: 40px 150px 30px; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.tks::before, .tks::after { display: none; }
.tks-nad { font-size: 12px; color: var( --zloto ); }
.tks-nad i { color: var( --zloto ); }
.tks-tytul { font-size: clamp( 30px, 3.2vw, 46px ); font-weight: 500; letter-spacing: .02em; }
.tks-lead { max-width: 62ch; margin: 12px auto 0; font-size: 15px; line-height: 1.6; color: var( --lawenda ); text-align: center; }
.tks-wynik { margin-top: 26px; }
.tks-modul { position: relative; padding: 34px 0 30px; border-top: 1px solid rgba( 230, 196, 138, .16 ); }
.tks-modul--kolo { padding-top: 0; border-top: 0; }
.tks-modul__nad { font-size: 12px; letter-spacing: .32em; color: var( --zloto ); }
.tks-modul__nad i { color: var( --zloto ); margin: 0 10px; }
.tks-modul__pod { margin: 0 0 24px; text-align: center; font-size: 13.5px; color: var( --lawenda ); }

/* boczne napisy — w pustych pasach po obu stronach kolumny */
.tks-bok { position: absolute; top: 44px; width: 120px; margin: 0; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; line-height: 1.8; color: var( --zloto-etyk ); }
.tks-bok--l { left: -136px; text-align: left; }
.tks-bok--p { right: -136px; text-align: right; }
.tks-bok i { display: block; width: 26px; height: 10px; margin: 0 0 10px; background: linear-gradient( 90deg, transparent, var( --zloto-ciemne ), transparent ) center / 100% 1px no-repeat; position: relative; }
.tks-bok i::after { content: '◈'; position: absolute; left: 50%; top: -3px; transform: translateX( -50% ); font-size: 8px; color: var( --zloto-ciemne ); background: none; }
.tks-bok--p i { margin-left: auto; }
.tks-bok b { display: block; font-weight: 400; color: var( --zloto ); }
.tks-bok span { display: block; margin-top: 12px; font-size: 12.5px; letter-spacing: 0; text-transform: none; line-height: 1.5; color: var( --tekst ); }
.tks-modul--kolo .tks-bok { top: 200px; }
#tks-dzis .tks-bok { top: 150px; }

/* niebo: koło po lewej, kolumna po prawej */
.tks-niebo { grid-template-columns: minmax( 320px, 560px ) minmax( 0, 1fr ); gap: 20px 60px; align-items: start; max-width: none; }
.tks-niebo__obok { gap: 20px; padding-top: 6px; }
.tks-obok__nad { margin: 0 0 10px; font-size: 10.5px; letter-spacing: .28em; color: var( --zloto ); }
.tks-obok__nad--glowny { font-size: 11px; }
.tks-osie { gap: 8px; }
.tks-osie > .tks-os { width: min( 100%, 360px ); justify-content: flex-start; padding: 9px 16px; border-color: rgba( 230, 196, 138, .34 ); background: rgba( 8, 6, 26, .78 ); font-size: 14px; }
.tks-osie > .tks-os small { margin-left: auto; font-size: 12px; color: var( --zloto ); }
.tks-osie__reszta { gap: 8px 10px; margin-top: 14px; }
.tks-os--maly { padding: 5px 12px; border-color: rgba( 160, 111, 251, .42 ); background: rgba( 8, 6, 26, .7 ); font-size: 11.5px; color: var( --tekst-mocny ); }
.tks-os--maly b { color: var( --lawenda ); }
.tks-bilans .tks-obok__nad { color: var( --zloto ); }
.tks-zywiol { grid-template-columns: 96px 1fr 22px; font-size: 11px; letter-spacing: .16em; color: var( --tekst-mocny ); }
.tks-zywiol__pas { height: 6px; background: rgba( 255, 255, 255, .05 ); }
.tks-ksiezyc { margin-top: 4px; }
.tks-ksiezyc .tks-obok__nad { display: none; }
.tks-ksiezyc__karta { position: relative; width: 100%; max-width: 420px; padding: 16px 64px 16px 16px; border-radius: 18px; border-color: rgba( 230, 196, 138, .34 ); background: linear-gradient( 90deg, rgba( 20, 14, 46, .85 ), rgba( 8, 6, 26, .85 ) ); }
.tks-ksiezyc__karta::before { content: 'Księżyc urodzeniowy'; position: absolute; left: 96px; top: 12px; font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tks-ksiezyc__karta::after { content: '›'; position: absolute; right: 18px; top: 50%; transform: translateY( -50% ); width: 30px; height: 30px; border: 1px solid var( --zloto-ciemne ); border-radius: 999px; font: 400 20px/28px var( --serif ); text-align: center; color: var( --zloto ); }
.tks-ksiezyc__tekst { padding-top: 16px; }
.tks-ksiezyc__tekst b { font-size: 18px; }
.tks-tarcza { width: 66px; height: 66px; }

/* karty: obraz + tekst obok, trzy w rzędzie, równe */
.tks-wzor { display: none; }
.tks-karty { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 26px; max-width: 1180px; margin: 0 auto; }
.tks-karta, .tks-karta--nauczyciel { width: auto; display: grid; grid-template-columns: 150px minmax( 0, 1fr ); grid-template-rows: auto auto auto 1fr; column-gap: 18px; align-items: start; text-align: left; padding: 0; border: 0; }
.tks-karta--nauczyciel .tks-karta__obraz { width: 150px; filter: none; }
.tks-karta__rola { grid-column: 2; margin: 6px 0 4px; }
.tks-karta__obraz { grid-column: 1; grid-row: 1 / 6; width: 150px; }
.tks-karta__nazwa, .tks-karta--nauczyciel .tks-karta__nazwa { grid-column: 2; margin: 0 0 2px; font-size: 24px; color: var( --zloto ); }
.tks-karta__wladca { grid-column: 2; margin: 0 0 12px; }
.tks-karta__opis { grid-column: 2; font-size: 12.5px; color: var( --tekst ); }
.tks-karta__num { grid-column: 2; font-size: 12.5px; color: var( --tekst ); max-width: none; }

/* „skąd" — zwinięte */
.tks-skad { max-width: 74ch; margin: 22px auto 0; padding: 0; border: 0; font-size: 12.5px; text-align: center; }
.tks-skad summary { cursor: pointer; list-style: none; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tks-skad summary::-webkit-details-marker { display: none; }
.tks-skad summary:hover { color: var( --zloto ); }
.tks-skad p { margin: 10px 0 0; }

/* kafle kamieni i run */
.tks-kafle { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); gap: 18px; max-width: 1100px; margin: 0 auto; }
.tks-kafel { padding: 18px 12px 16px; gap: 4px; border-color: rgba( 160, 111, 251, .3 ); background: rgba( 8, 6, 26, .72 ); }
.tks-kafel__rola { display: none; }
.tks-kafel__obraz { width: 132px; height: 132px; border-radius: 22px; }
.tks-kafel--runa .tks-kafel__obraz { border-radius: 999px; }
.tks-kafel__nazwa { margin-top: 12px; font-size: 20px; }

/* filary */
.tks-filary { max-width: 760px; gap: 30px; }
.tks-tabliczka { padding: 18px 10px; border-radius: 14px; background: linear-gradient( 180deg, rgba( 20, 14, 46, .9 ), rgba( 8, 6, 26, .9 ) ); }
.tks-cjk { font-size: 54px; }
.tks-filary__pan { display: none; }

/* dziś */
.tks-dzis { max-width: none; }
.tks-btn--dzis { height: 50px; padding: 0 44px; border: 0; background: linear-gradient( 90deg, #e6c48a, #fde9a8 ); color: #14102a; font-weight: 500; box-shadow: 0 0 30px rgba( 253, 226, 145, .35 ); }
.tks-btn--dzis:hover { background: linear-gradient( 90deg, #f9d57a, #fff1c2 ); box-shadow: 0 0 40px rgba( 253, 226, 145, .5 ); }
.tks-dzis__uwaga { display: none; }
.tks-dalej { margin: 26px 0 0; padding: 0; border: 0; gap: 16px; }
.tks-dalej a { padding: 12px 26px; border-color: rgba( 230, 196, 138, .5 ); background: rgba( 8, 6, 26, .7 ); color: var( --zloto ); }

@media ( max-width: 1200px ) { .tks { padding-left: 40px; padding-right: 40px; } .tks-bok { display: none; } .tks-kafle { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } .tks-karty { grid-template-columns: 1fr; max-width: 560px; } }
@media ( max-width: 760px ) { .tks { padding-left: 18px; padding-right: 18px; } .tks-kafle { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } }

/* liczby: cyfry wersalikowe wycentrowane w kole, siedem medalionów w jednym rzędzie */
.tks-liczby { display: grid; grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); gap: 12px; max-width: 1240px; margin: 0 auto; }
.tks-liczba { width: auto; padding: 6px 4px 12px; }
.tks-liczba__medalion { position: relative; }
.tks-liczba__cyfra { position: absolute; inset: 0; display: grid; place-items: center; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "pnum" 1; padding-bottom: 2px; letter-spacing: 0; }
.tks-liczba__red { right: 10px; bottom: 12px; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
@media ( max-width: 1200px ) { .tks-liczby { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } }
@media ( max-width: 700px ) { .tks-liczby { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } }

/* ciemniejszy pas pod sekcjami — napisy nie giną na górach i wodzie (Przemo 2026-09-06) */
.tks-modul { margin-top: 18px; padding: 30px 28px 28px; border: 1px solid rgba( 160, 111, 251, .18 ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 4, 4, 22, .62 ), rgba( 4, 4, 22, .78 ) ); backdrop-filter: blur( 3px ); }
.tks-modul--kolo { margin-top: 0; padding: 26px 28px 28px; }
.tks-bok--l { left: -160px; } .tks-bok--p { right: -160px; }
.tks-modul .tks-bok { top: 40px; }
.tks-modul--kolo .tks-bok { top: 190px; }
.tks-karta { grid-template-rows: auto auto auto auto; align-content: start; }