/* ═══════════════════════════════════════════════════════════════════════
   Twoje runy — dobór z kosmogramu
   ═══════════════════════════════════════════════════════════════════════
   Moduł stoi na Horoskopie, więc bierze jego paletę (noc, złoto, lawenda,
   neonowy fiolet) i jego ramę. Tokeny są zdublowane na `.trd`, żeby moduł
   dało się wkleić także na stronę próbną, gdzie arkusza Horoskopu nie ma.

   Sygnatura: OŚ NIEBA — trzy medaliony (Słońce, Księżyc, Ascendent) spięte
   złotą nicią, pod każdym runa; obok dwa medaliony żywiołów. Runy dosłownie
   „wiszą" na punktach kosmogramu, z których wynikają. */

.trd {
	--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;
	--nic:          rgba( 253, 226, 145, .55 );
	--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 );
	/* rama Horoskopu — ta sama, co `.tsk-neon`, przepisana, żeby nie zależeć od jego arkusza */
	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;
}
.trd *, .trd *::before, .trd *::after { box-sizing: border-box; }

/* Godła kompasu w rogach — jak w panelu Horoskopu. */
.trd::before,
.trd::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% );
}
.trd::before { left: 12px;  background-image: var( --kompas-l ); }
.trd::after  { right: 12px; background-image: var( --kompas-p ); }

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

.trd-glowa { position: relative; z-index: 1; text-align: center; }

.trd-nad {
	margin: 0 0 8px;
	font-size: 11px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var( --zloto-etyk );
}
.trd-nad i { font-style: normal; color: var( --zloto-ciemne ); margin: 0 10px; }

.trd-tytul {
	margin: 0;
	font-family: var( --serif );
	font-weight: 500;
	font-size: 30px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var( --zloto-cieply );
	line-height: 1.15;
}

.trd-ozdoba {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 12px 0 10px;
	color: var( --zloto-ciemne );
}
.trd-ozdoba i { display: block; width: 92px; height: 1px; background: linear-gradient( 90deg, transparent, var( --zloto-ciemne ) ); }
.trd-ozdoba i + b + i { background: linear-gradient( 90deg, var( --zloto-ciemne ), transparent ); }
.trd-ozdoba b { font-weight: 400; font-size: 12px; }

.trd-lead {
	max-width: 62ch;
	margin: 0 auto;
	font-size: 14.5px;
	line-height: 1.7;
	color: var( --lawenda );
}

/* ─────────────────────────  stan: pusto  ─────────────────────────── */

.trd-zaproszenie {
	position: relative;
	z-index: 1;
	margin: 26px auto 0;
	max-width: 58ch;
	text-align: center;
	font-family: var( --serif );
	font-size: 19px;
	font-style: italic;
	color: var( --zloto-ciemne );
}
.trd-zaproszenie a { color: var( --zloto ); text-decoration: none; border-bottom: 1px solid rgba( 253, 226, 145, .4 ); }

/* Formularz jest tylko na stronie próbnej — na Horoskopie dane wpisuje się
   w panelu wyżej. Wygląda jak tamten, żeby nie było dwóch gramatyk. */
.trd-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;
}
.trd-pole { display: grid; gap: 6px; position: relative; }
.trd-pole > span {
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var( --zloto-etyk );
}
.trd-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;
}
.trd-pole input:focus { border-color: var( --neon ); box-shadow: 0 0 0 3px rgba( 160, 111, 251, .18 ); }
.trd-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;
}
.trd-podpowiedzi[hidden] { display: none; }
.trd-podpowiedzi li { padding: 9px 14px; cursor: pointer; font-size: 14px; color: var( --tekst-mocny ); }
.trd-podpowiedzi li:hover, .trd-podpowiedzi li[aria-selected="true"] { background: rgba( 160, 111, 251, .16 ); }
.trd-podpowiedzi small { color: var( --tekst-slaby ); margin-left: 8px; }
.trd-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;
}
.trd-btn:hover { background: rgba( 253, 226, 145, .22 ); box-shadow: 0 0 22px rgba( 253, 226, 145, .18 ); }
.trd-btn:focus-visible { outline: 2px solid var( --neon ); outline-offset: 3px; }
/* Atrybut `hidden` musi wygrać z `display: grid` klasy — inaczej formularz
   zostaje pod wynikiem. */
.trd-form[hidden], .trd-zaproszenie[hidden] { display: none; }
.trd-drobne { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var( --tekst-slaby ); text-align: center; }
.trd-blad { grid-column: 1 / -1; margin: 0; color: #f3a1a1; font-size: 13.5px; text-align: center; }
.trd-blad[hidden] { display: none; }

/* ─────────────────────────  stan: wynik  ─────────────────────────── */

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

.trd-osie-tekst {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 18px;
	margin: 0 0 6px;
	font-family: var( --serif );
	font-size: 19px;
	color: var( --zloto );
	letter-spacing: .02em;
}
.trd-osie-tekst b { font-weight: 500; }
.trd-osie-tekst i { font-style: normal; color: var( --zloto-ciemne ); }

/* Bilans żywiołów — cztery ikony z paskami, jak przy kamieniach. */
.trd-bilans {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
	margin: 0 0 30px;
}
.trd-zywiol {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 5px 12px 5px 6px;
	border: 1px solid rgba( 230, 196, 138, .18 );
	border-radius: 999px;
	background: rgba( 2, 3, 22, .45 );
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: border-color .2s, background .2s;
}
.trd-zywiol:hover { border-color: rgba( 253, 226, 145, .5 ); background: rgba( 160, 111, 251, .10 ); }
.trd-zywiol:focus-visible { outline: 2px solid var( --neon ); outline-offset: 2px; }
.trd-zywiol img { width: 26px; height: 26px; border-radius: 999px; object-fit: cover; }
.trd-zywiol span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var( --tekst ); }
.trd-zywiol__pasek { position: relative; width: 64px; height: 4px; border-radius: 999px; background: rgba( 255, 255, 255, .08 ); overflow: hidden; }
.trd-zywiol__pasek i { position: absolute; inset: 0 auto 0 0; width: var( --p, 0% ); border-radius: inherit; background: linear-gradient( 90deg, var( --zloto-etyk ), var( --zloto ) ); }
.trd-zywiol b { font-weight: 400; font-size: 12px; color: var( --zloto-ciemne ); min-width: 1.2em; text-align: right; }
.trd-zywiol--mocny { border-color: rgba( 253, 226, 145, .45 ); }
.trd-zywiol--mocny span { color: var( --zloto ); }

/* ─────────────────────────  oś nieba + karty  ────────────────────── */

.trd-karty {
	position: relative;
	display: grid;
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	gap: 22px;
	padding-top: 44px;              /* miejsce na medaliony, które wystają nad kartę */
}

/* Złota nić spina trzy pierwsze medaliony — oś Słońce · Księżyc · Ascendent.
   Rysuje się SVG-iem, bo ma się „narysować" przy wejściu. */
.trd-nic {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 88px;
	pointer-events: none;
	overflow: visible;
}
.trd-nic path {
	fill: none;
	stroke: var( --nic );
	stroke-width: 1.2;
	stroke-dasharray: 2000;
	stroke-dashoffset: 2000;
	animation: trd-nic 1.4s cubic-bezier( .4, 0, .2, 1 ) .15s forwards;
}
.trd-nic circle { fill: var( --zloto ); opacity: 0; animation: trd-krop .4s ease 1.2s forwards; }
@keyframes trd-nic  { to { stroke-dashoffset: 0; } }
@keyframes trd-krop { to { opacity: .9; } }

.trd-karta {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 60px 16px 20px;
	border: 1px solid rgba( 230, 196, 138, .18 );
	border-radius: 16px;
	background:
		radial-gradient( 120% 70% at 50% 0%, rgba( 160, 111, 251, .10 ), transparent 60% ),
		var( --tlo-karta );
	opacity: 0;
	transform: translateY( 14px );
	animation: trd-wejscie .6s cubic-bezier( .2, .7, .2, 1 ) forwards;
	animation-delay: calc( .35s + var( --i, 0 ) * .12s );
}
@keyframes trd-wejscie { to { opacity: 1; transform: none; } }

/* Karty żywiołów mają kreskowaną ramę — to inna warstwa: nie punkt na
   niebie, tylko jego bilans. Bez marginesu: w siatce zwężałby kartę. */
.trd-karta--zywiol { border-style: dashed; border-color: rgba( 230, 196, 138, .22 ); }

/* Medalion — pierścień z ikoną, wystaje nad górną krawędź karty. Klikalny:
   planeta lub żywioł. */
.trd-medalion {
	position: absolute;
	top: -44px;
	left: 50%;
	transform: translateX( -50% );
	width: 88px;
	height: 88px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
}
.trd-medalion:focus-visible { outline: 2px solid var( --neon ); outline-offset: 4px; }
.trd-medalion::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 999px;
	border: 1px solid var( --zloto-ciemne );
	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, .18 );
	background: var( --tlo-karta );
	transition: box-shadow .25s;
}
.trd-medalion:hover::before { box-shadow: 0 0 0 4px var( --tlo-panel ), 0 0 0 5px var( --zloto-ciemne ), 0 0 34px rgba( 253, 226, 145, .35 ); }
.trd-medalion img,
.trd-medalion .trd-asc {
	position: absolute;
	inset: 6px;
	width: calc( 100% - 12px );
	height: calc( 100% - 12px );
	border-radius: 999px;
	object-fit: cover;
}
.trd-medalion .trd-asc {
	display: grid;
	place-items: center;
	background: radial-gradient( circle at 50% 80%, rgba( 253, 226, 145, .35 ), transparent 60% ), #0b0820;
	font-family: var( --serif );
	font-size: 15px;
	letter-spacing: .12em;
	color: var( --zloto );
}
.trd-medalion .trd-asc::after {
	content: '';
	position: absolute;
	left: 14%;
	right: 14%;
	bottom: 30%;
	height: 1px;
	background: var( --zloto-ciemne );
}

.trd-karta__rola {
	margin: 0 0 4px;
	font-size: 10.5px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var( --zloto-etyk );
}

/* „w Baranie" z glifem — klik otwiera znak. */
.trd-karta__gdzie {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 16px;
	padding: 4px 12px 4px 8px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var( --lawenda );
	font: 300 13.5px var( --sans );
	cursor: pointer;
	transition: border-color .2s, background .2s;
}
.trd-karta__gdzie:hover { border-color: rgba( 173, 151, 211, .4 ); background: rgba( 160, 111, 251, .10 ); }
.trd-karta__gdzie:focus-visible { outline: 2px solid var( --neon ); outline-offset: 2px; }
.trd-karta__gdzie .trd-glif { font-size: 17px; color: var( --zloto ); line-height: 1; }
.trd-karta__gdzie img { width: 22px; height: 22px; }

/* Emblemat runy w złotej oprawie — klik otwiera okno runy. */
.trd-karta__runa {
	position: relative;
	display: block;
	width: 150px;
	height: 150px;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba( 230, 196, 138, .45 ), 0 0 0 5px var( --tlo-karta ), 0 0 0 6px rgba( 230, 196, 138, .18 );
	transition: transform .3s cubic-bezier( .2, .7, .2, 1 ), box-shadow .3s;
}
.trd-karta__runa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trd-karta__runa:hover { transform: translateY( -3px ) scale( 1.02 ); box-shadow: 0 0 0 1px var( --zloto-ciemne ), 0 0 0 5px var( --tlo-karta ), 0 0 0 6px rgba( 230, 196, 138, .4 ), 0 18px 40px rgba( 0, 0, 0, .45 ); }
.trd-karta__runa:focus-visible { outline: 2px solid var( --neon ); outline-offset: 6px; }
.trd-karta__runa .trd-glif-duzy {
	position: absolute;
	right: 8px;
	bottom: 6px;
	font-size: 22px;
	line-height: 1;
	color: var( --zloto );
	text-shadow: 0 0 10px rgba( 0, 0, 0, .9 );
	pointer-events: none;
}

.trd-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;
}
.trd-karta__pl { margin: 0 0 10px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var( --tekst-slaby ); }
.trd-karta__astro { margin: 0; font-size: 13px; line-height: 1.6; color: var( --tekst ); max-width: 26ch; }

/* Znaczniki żywiołu i planety pod zdaniem — małe, klikalne. */
.trd-karta__znaczniki { display: flex; gap: 8px; margin-top: 12px; }
.trd-znacznik {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px 3px 4px;
	border: 1px solid rgba( 230, 196, 138, .18 );
	border-radius: 999px;
	background: transparent;
	color: var( --tekst-slaby );
	font: 300 11px var( --sans );
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .2s, color .2s;
}
.trd-znacznik:hover { border-color: var( --zloto-ciemne ); color: var( --zloto ); }
.trd-znacznik:focus-visible { outline: 2px solid var( --neon ); outline-offset: 2px; }
.trd-znacznik img { width: 18px; height: 18px; border-radius: 999px; object-fit: cover; }

/* ─────────────────────────  stopka wyniku  ───────────────────────── */

.trd-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 );
}
.trd-skad b { font-weight: 400; color: var( --tekst ); }

.trd-linki { display: flex; justify-content: center; align-items: center; gap: 26px; margin: 18px 0 0; }
.trd-linki a,
.trd-zmien {
	padding: 0;
	border: 0;
	background: none;
	color: var( --zloto-ciemne );
	font: 300 12.5px var( --sans );
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border-bottom: 1px solid rgba( 230, 196, 138, .3 );
	transition: color .2s, border-color .2s;
}
.trd-linki a:hover, .trd-zmien:hover { color: var( --zloto ); border-color: var( --zloto ); }

/* ─────────────────────  okno znaku / planety / żywiołu  ──────────── */

/* Klasy `.ak-*` i tło z rozmyciem daje `sky-slider.css`; tu tylko to, co
   inne niż w oknie runy: hero bez winiety runicznej i ozdobnik sekcji. */
#astro-karta.trd-okno .ak-hero img { width: 100%; height: 100%; object-fit: cover; }
#astro-karta.trd-okno .ak-hero--zywiol { display: grid; place-items: center; background: radial-gradient( circle, rgba( 160, 111, 251, .25 ), transparent 70% ), #06041a; }
#astro-karta.trd-okno .ak-hero--zywiol img { width: 120px; height: 120px; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 1px var( --zloto-ciemne ), 0 0 40px rgba( 253, 226, 145, .25 ); }
#astro-karta.trd-okno .ak-glif { font-size: 1.1em; margin-right: 2px; }
#astro-karta.trd-okno .ak-sekcja { margin: 14px 0 0; }
#astro-karta.trd-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; }

/* ─────────────────────────  w dziale Run  ────────────────────────── */

/* Na `/runy/` panel siedzi w zakładce „Twoje runy". Dział ma paletę
   noc / złoto / żar, nie neonowy fiolet Horoskopu — rama i blask idą za
   działem, w którym stoją; reszta (medaliony, karty, nić) zostaje. */
#trn-korzen .trd {
	--tlo-panel: rgba( 20, 15, 46, .60 );
	--tlo-karta: rgba( 11, 10, 24, .72 );
	--zloto: #f0ce7e;
	--zloto-cieply: #f0ce7e;
	--zloto-ciemne: #c9a45c;
	--zloto-etyk: #b89a63;
	--lawenda: #cfc7ea;
	--tekst: #cfc7ea;
	--tekst-slaby: #9a93c4;
	--tekst-mocny: #ede7ff;
	--neon: #e8752f;
	--nic: rgba( 240, 206, 126, .5 );
	margin-top: var( --rytm, 26px );
	border-color: rgba( 240, 206, 126, .36 );
	box-shadow:
		0 0 0 1px rgba( 240, 206, 126, .10 ),
		0 0 30px rgba( 232, 117, 47, .14 ),
		inset 0 0 70px rgba( 21, 15, 48, .5 );
}
#trn-korzen .trd[hidden] { display: none; }
#trn-korzen .trd .trd-karta { background: radial-gradient( 120% 70% at 50% 0%, rgba( 232, 117, 47, .09 ), transparent 60% ), var( --tlo-karta ); }
#trn-korzen .trd .trd-pole input:focus { box-shadow: 0 0 0 3px rgba( 232, 117, 47, .18 ); }

/* ─────────────────────────  strona próbna  ───────────────────────── */

/* Motyw TT25 wpuszcza treść w wąską kolumnę i dokłada własny nagłówek —
   strona próbna zaczyna od tego samego resetu, co Horoskop i Kamienie. */
body:has( .trd-strona ) .wp-site-blocks > header,
body:has( .trd-strona ) header.wp-block-template-part,
body:has( .trd-strona ) .wp-site-blocks > footer,
body:has( .trd-strona ) footer.wp-block-template-part,
body:has( .trd-strona ) .wp-block-post-title { display: none !important; }

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

body:has( .trd-strona ) .wp-block-post-content > *,
body:has( .trd-strona ) .entry-content > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body:has( .trd-strona ) { background: #020316; }

.trd-strona {
	min-height: 100vh;
	padding: 40px 20px 80px;
	background:
		radial-gradient( 1100px 620px at 50% -10%, rgba( 116, 66, 214, .22 ), transparent 70% ),
		#020316;
}
.trd-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; }

/* ─────────────────────────  ekrany  ──────────────────────────────── */

@media ( max-width: 1200px ) {
	.trd-karty { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); row-gap: 60px; }
	.trd-nic { display: none; }
	.trd-karta:nth-child( 4 ) { margin-left: 0; }
}
@media ( max-width: 760px ) {
	.trd { padding: 26px 18px 28px; }
	.trd::before, .trd::after { display: none; }
	.trd-tytul { font-size: 22px; }
	.trd-form { grid-template-columns: 1fr 1fr; }
	.trd-pole--miasto, .trd-btn { grid-column: 1 / -1; }
	.trd-karty { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}
@media ( max-width: 480px ) {
	.trd-karty { grid-template-columns: minmax( 0, 1fr ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.trd-nic path, .trd-nic circle, .trd-karta { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
}