/* Kosmiczna energia chwili — slider widoków nieba.
   Ta sama paleta co reszta Taroscope: granat, przygaszony fiolet, matowe złoto.
   Kolor niosą wyłącznie znaki zodiaku; wszystko inne jest ciche, żeby to one
   prowadziły wzrok. */

#kosmos {
	position: relative;
	margin: 0;
	background: #06050f;
	font-family: Jost, system-ui, sans-serif;
	outline: none;
}
#kosmos .num { font-variant-numeric: tabular-nums; }
#kosmos text,
.ke-kropka, .ke-p-znak i, .nt-os-z i, .nt-glif {
	font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans', 'Apple Symbols', serif;
}

.ks-okno { overflow: hidden; }
.ks-tor {
	display: flex;
	transition: transform .55s cubic-bezier(.22,.61,.36,1);
	will-change: transform;
}
.ks-slajd {
	position: relative;
	flex: 0 0 100%;
	min-height: 760px;
	padding: 54px clamp(20px, 5vw, 76px) 96px;
	box-sizing: border-box;
	background-color: #06050f;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
/* tła z biblioteki — te same, których używa panel „Grafiki ✦” */
.ks-slajd--lewe {
	background-image: var(--tg-tlo-lewe, url('tycho-4k.webp'));
	background-position: 22% 38%;
}
.ks-slajd--prawe {
	background-image: var(--tg-tlo-prawe, url('tycho-4k.webp'));
	background-position: 68% 44%;
}
.ks-slajd::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient( 120% 80% at 50% 30%, rgba(46,28,92,.42), rgba(6,5,15,.86) 72% ),
		linear-gradient( 180deg, rgba(6,5,15,.72) 0%, rgba(6,5,15,.42) 32%, rgba(6,5,15,.94) 100% );
	pointer-events: none;
}
/* pasmo gór u dołu — domyka kadr tak, jak na projekcie */
.ks-slajd::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 130px;
	background:
		linear-gradient( 180deg, rgba(6,5,15,0), #06050f 78% ),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 130' preserveAspectRatio='none'%3E%3Cpath d='M0,130 L0,86 L92,52 L184,88 L268,44 L352,80 L440,34 L540,74 L634,40 L724,82 L820,50 L912,86 L1010,56 L1104,90 L1200,62 L1200,130 Z' fill='%23090816'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
	pointer-events: none;
}
.ks-plansza { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }

/* sterowanie */
.ks-strzalka {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(240,206,126,.32);
	background: rgba(10,9,26,.55);
	color: #e7e1ff;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.ks-strzalka:hover { border-color: rgba(240,206,126,.75); color: #f0ce7e; background: rgba(20,16,44,.75); }
.ks-strzalka:focus-visible { outline: 2px solid #f0ce7e; outline-offset: 3px; }
.ks-strzalka--wstecz { left: clamp(8px, 2vw, 28px); }
.ks-strzalka--dalej  { right: clamp(8px, 2vw, 28px); }

.ks-kropki {
	position: absolute;
	left: 0; right: 0; bottom: 26px;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 9px;
}
.ks-kropka {
	width: 7px; height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(237,231,255,.28);
	cursor: pointer;
	transition: background .25s ease, transform .25s ease;
}
.ks-kropka.jest { background: #f0ce7e; transform: scale(1.35); }
.ks-kropka:focus-visible { outline: 2px solid #f0ce7e; outline-offset: 3px; }

/* ── widok 1: kosmiczna energia chwili ─────────────────────────────────────── */

.ke-tytul {
	margin: 0;
	text-align: center;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 300;
	font-size: clamp(2rem, 3.4vw, 3rem);
	color: #f4f1ff;
	letter-spacing: .01em;
}
.ke-podtytul {
	margin: .5rem 0 0;
	text-align: center;
	font-size: .82rem;
	letter-spacing: .06em;
	color: #9a93c4;
}

.ke-scena { position: relative; height: 300px; margin-top: 10px; }
.ke-luk { position: absolute; inset: 0; width: 100%; height: 100%; }
.ke-ksiezyc {
	position: absolute;
	left: 50%; top: 52px;
	transform: translateX(-50%);
	margin: 0;
	text-align: center;
}
.ke-ksiezyc img {
	display: block;
	width: 132px; height: 132px;
	border-radius: 50%;
	box-shadow: 0 0 46px rgba(214,228,255,.24);
}
.ke-ksiezyc figcaption { margin-top: 12px; font-size: .82rem; color: #d8d4ec; }
.ke-ksiezyc figcaption em { display: block; font-style: normal; font-size: .74rem; color: #8b84b4; }

.ke-osie {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	max-width: 860px;
	margin: 6px auto 0;
}
.ke-os {
	padding: 14px 16px;
	border: 1px solid rgba(167,139,250,.22);
	border-radius: 12px;
	background: rgba(12,10,30,.55);
	text-align: center;
	backdrop-filter: blur(3px);
}
.ke-os-tytul {
	font-size: .62rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #8b84b4;
}
.ke-os-znak {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 8px;
	font-size: .98rem;
}
.ke-kropka {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 19px; height: 19px;
	border-radius: 50%;
	font-size: .72rem;
	color: #1a1330;
}
.ke-os-st { margin-top: 5px; font-size: .74rem; color: #8b84b4; }

.ke-planety {
	max-width: 1060px;
	margin: 20px auto 0;
	padding: 16px 20px 18px;
	border: 1px solid rgba(167,139,250,.2);
	border-radius: 14px;
	background: rgba(12,10,30,.5);
	backdrop-filter: blur(3px);
}
.ke-planety h3 {
	margin: 0 0 14px;
	text-align: center;
	font-size: .62rem;
	font-weight: 400;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #f0ce7e;
}
.ke-planety-rzad {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: 8px;
}
.ke-planeta { text-align: center; }
.ke-planeta img {
	width: 42px; height: 42px;
	border-radius: 50%;
	object-fit: cover;
}
.ke-p-nazwa { display: block; margin-top: 6px; font-size: .72rem; color: #d8d4ec; }
.ke-p-znak { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 3px; }
.ke-p-znak i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px; height: 15px;
	border-radius: 50%;
	font-size: .6rem;
	font-style: normal;
	color: #1a1330;
}
.ke-p-znak em { font-style: normal; font-size: .68rem; color: #8b84b4; }

/* ── widoki 2 i 3: karta z rysunkiem plus panel ────────────────────────────── */

.nt-uklad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 22px;
	align-items: start;
}
.nt-karta {
	padding: 22px 24px 26px;
	border: 1px solid rgba(167,139,250,.2);
	border-radius: 16px;
	background: rgba(10,9,26,.55);
	backdrop-filter: blur(4px);
}
.nt-karta--kolo { display: flex; flex-direction: column; align-items: center; }
.nt-naglowek { align-self: flex-start; margin-bottom: 8px; }
.nt-etykieta {
	font-size: .62rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #f0ce7e;
}
.nt-kiedy { margin-top: 6px; font-size: .84rem; color: #ede7ff; }
.nt-gdzie { font-size: .76rem; color: #8b84b4; }
.nt-kolo, .mn-kopula { width: min(520px, 100%); height: auto; }

.nt-tytul {
	margin: 18px 0 10px;
	font-size: .62rem;
	font-weight: 400;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #f0ce7e;
}
.nt-karta--panel .nt-tytul:first-child { margin-top: 0; }

.nt-ksiezyc { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.nt-ksiezyc img { width: 74px; height: 74px; border-radius: 50%; }
.nt-faza { font-size: .88rem; color: #ede7ff; }
.nt-proc { font-size: 1.5rem; color: #f0ce7e; line-height: 1.1; }
.nt-podpis { font-size: .68rem; color: #8b84b4; }

.nt-os {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	font-size: .8rem;
}
.nt-os-k { font-size: .68rem; letter-spacing: .16em; color: #f0ce7e; }
.nt-os-z { display: flex; align-items: center; gap: 6px; color: #ede7ff; }
.nt-os-z i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px; height: 17px;
	border-radius: 50%;
	font-size: .64rem;
	font-style: normal;
	color: #1a1330;
}
.nt-os-st { font-size: .74rem; color: #8b84b4; }

.nt-lista { display: flex; flex-direction: column; }
.nt-wiersz {
	display: grid;
	grid-template-columns: 20px 1fr auto auto;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	font-size: .8rem;
	border-bottom: 1px solid rgba(167,139,250,.09);
}
.nt-wiersz:last-child { border-bottom: 0; }
.nt-glif { color: #9a93c4; }
.nt-nazwa { color: #ede7ff; }
.nt-znak { font-size: .78rem; }
.nt-st { font-size: .74rem; color: #8b84b4; padding-left: 8px; }

.mn-opis { margin: 0 0 14px; font-size: .78rem; line-height: 1.55; color: #9a93c4; }

/* ── widok 4: zaproszenie do pytania ───────────────────────────────────────── */

.np-uklad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	min-height: 560px;
}
.np-tytul {
	margin: 0;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 300;
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	line-height: 1.1;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #f4f1ff;
}
.np-opis {
	margin: 18px 0 26px;
	max-width: 42ch;
	font-size: .92rem;
	line-height: 1.65;
	color: #b9b3d6;
}
.np-cta {
	display: inline-block;
	padding: .85rem 1.9rem;
	border-radius: 9999px;
	border: 1px solid rgba(240,206,126,.55);
	background: linear-gradient( 180deg, rgba(240,206,126,.16), rgba(240,206,126,.06) );
	color: #f0ce7e;
	text-decoration: none;
	font-size: .76rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	transition: background .25s ease, color .25s ease;
}
.np-cta:hover { background: #f0ce7e; color: #16102c; }
.np-kolo { position: relative; display: flex; justify-content: center; }
.np-ksiezyc {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 148px; height: 148px;
	border-radius: 50%;
	box-shadow: 0 0 60px rgba(214,228,255,.2);
}

/* ── węższe ekrany ─────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	.nt-uklad { grid-template-columns: minmax(0, 1fr); }
	.ke-planety-rzad { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 16px; }
}
@media (max-width: 720px) {
	.ks-slajd { min-height: 660px; padding: 40px 16px 88px; }
	.ke-osie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ke-scena { height: 240px; }
	.ke-ksiezyc img { width: 104px; height: 104px; }
	.np-uklad { grid-template-columns: minmax(0, 1fr); gap: 24px; min-height: 0; }
	.ks-strzalka { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
	.ks-tor { transition: none; }
}

/* ── wybór miasta ──────────────────────────────────────────────────────────── */

#kosmos-miasta {
	position: absolute;
	z-index: 99999;
	width: 320px;
	padding: 16px;
	border-radius: 16px;
	border: 1px solid rgba(240,206,126,.28);
	background: linear-gradient( 180deg, rgba(22,16,52,.98), rgba(11,10,26,.99) );
	box-shadow: 0 26px 60px rgba(0,0,0,.65), 0 0 40px rgba(74,58,140,.35);
	font-family: Jost, system-ui, sans-serif;
}
.km-tytul {
	margin-bottom: 10px;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.1rem;
	color: #f0ce7e;
}
.km-szukaj {
	width: 100%;
	box-sizing: border-box;
	padding: .6rem .8rem;
	border-radius: 10px;
	border: 1px solid rgba(167,139,250,.3);
	background: rgba(11,10,26,.7);
	color: #ede7ff;
	font: inherit;
	font-size: .88rem;
}
.km-szukaj:focus { outline: none; border-color: rgba(240,206,126,.6); }
.km-wyniki { margin: 8px 0 10px; max-height: 210px; overflow-y: auto; }
.km-miasto {
	display: block;
	width: 100%;
	text-align: left;
	padding: .45rem .6rem;
	border: 0;
	border-radius: 8px;
	background: none;
	color: #d8d4ec;
	font: inherit;
	font-size: .86rem;
	cursor: pointer;
}
.km-miasto:hover,
.km-miasto.jest { background: rgba(74,58,140,.35); color: #fff; }
.km-miasto.jest { box-shadow: inset 2px 0 0 rgba(240,206,126,.75); }
.km-m-opis { margin-left: .5em; font-size: .76rem; color: #8b84b4; }
.km-pusto { padding: .5rem .6rem; font-size: .8rem; color: #7d77a6; }
.km-gps {
	width: 100%;
	padding: .55rem;
	border-radius: 9999px;
	border: 1px solid rgba(240,206,126,.3);
	background: none;
	color: #9a93c4;
	font: inherit;
	font-size: .74rem;
	letter-spacing: .1em;
	cursor: pointer;
}
.km-gps:hover { color: #f0ce7e; border-color: rgba(240,206,126,.6); }
.km-zrodlo {
	margin-top: .6rem;
	font-size: .66rem;
	letter-spacing: .08em;
	color: #5d5883;
	text-align: right;
}


/* ── klikalne byty ─────────────────────────────────────────────────────────── */
[data-astro] { cursor: pointer; }
.ks-plansza [data-astro]:hover { filter: brightness(1.3); }
svg [data-astro]:hover { opacity: .82; }

/* ── karta wiedzy (grimuar) ────────────────────────────────────────────────── */
#astro-karta { position: fixed; inset: 0; z-index: 100000; font-family: Jost, system-ui, sans-serif; }
#astro-karta .ak-tlo {
	position: absolute; inset: 0;
	background: rgba(4,3,12,.72);
	backdrop-filter: blur(5px);
}
#astro-karta .ak-panel {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: min(560px, calc(100vw - 32px));
	max-height: min(78vh, 720px);
	overflow-y: auto;
	padding: 30px 34px 28px;
	border-radius: 18px;
	border: 1px solid rgba(240,206,126,.4);
	background: linear-gradient(180deg, rgba(24,18,56,.98), rgba(10,9,26,.99));
	box-shadow: 0 40px 90px rgba(0,0,0,.7), 0 0 60px rgba(74,58,140,.4);
	color: #d8d4ec;
}
#astro-karta .ak-zamknij {
	position: absolute; top: 10px; right: 14px;
	border: 0; background: none;
	color: #9a93c4; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
#astro-karta .ak-zamknij:hover { color: #f0ce7e; }
#astro-karta .ak-typ {
	margin: 0; font-size: .62rem; letter-spacing: .3em;
	text-transform: uppercase; color: #8b84b4;
}
#astro-karta .ak-tytul {
	margin: .25rem 0 .8rem;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 400; font-size: 2rem; color: #f0ce7e;
}
#astro-karta .ak-esencja { margin: 0 0 1.1rem; font-size: .95rem; line-height: 1.7; color: #ede7ff; }
#astro-karta .ak-naglowek {
	margin: 0 0 .6rem; font-size: .62rem; letter-spacing: .3em;
	text-transform: uppercase; color: #f0ce7e;
}
#astro-karta .ak-cytat {
	margin: 0 0 1rem; padding: .8rem 1rem .7rem 1.1rem;
	border-left: 2px solid rgba(240,206,126,.5);
	background: rgba(74,58,140,.14);
	border-radius: 0 10px 10px 0;
}
#astro-karta .ak-cytat p { margin: 0; font-size: .88rem; line-height: 1.65; font-style: italic; }
#astro-karta .ak-cytat footer { margin-top: .5rem; font-size: .72rem; color: #9a93c4; font-style: normal; }
#astro-karta .ak-cytat details { margin-top: .45rem; }
#astro-karta .ak-cytat summary { font-size: .68rem; letter-spacing: .12em; color: #7d77a6; cursor: pointer; }
#astro-karta .ak-cytat details p { font-size: .78rem; color: #9a93c4; margin-top: .3rem; }
#astro-karta .ak-laduje { text-align: center; color: #9a93c4; padding: 1.2rem 0; }

/* ── pasek planet: duże kafle w suwaku, nie mrówki w siatce ────────────────── */
#bodies {
	display: flex !important;
	grid-template-columns: none !important;
	gap: 22px;
	overflow-x: auto;
	padding: 8px 4px 16px;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: rgba(240,206,126,.35) transparent;
}
#bodies .body {
	flex: 0 0 172px;
	scroll-snap-align: center;
	cursor: pointer;
}
#bodies .disc {
	width: 118px !important;
	height: 118px !important;
	margin: 0 auto 10px;
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	filter: drop-shadow(0 0 18px rgba(240,206,126,.18));
	transition: transform .25s ease, filter .25s ease;
}
#bodies .body:hover .disc {
	transform: scale(1.07);
	filter: drop-shadow(0 0 26px rgba(240,206,126,.4));
}
#bodies .who { font-size: .95rem; }
#bodies .pos { font-size: .82rem; }


/* ── karta wiedzy: nagłówek-hero ───────────────────────────────────────────── */
/* overflow: hidden przycinało nagłówek do zaokrąglenia, ale przy okazji
   odbierało karcie pasek i przewijanie myszą — pion musi zostać auto. */
#astro-karta .ak-panel.ma-hero { padding: 0 0 26px; overflow-x: hidden; overflow-y: auto; }
#astro-karta .ma-hero .ak-tresc { padding: 0 34px; }
#astro-karta .ak-hero {
	height: 230px;
	background-size: cover;
	background-position: center 30%;
	position: relative;
	margin-bottom: 18px;
}
#astro-karta .ak-hero::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(16,12,40,0) 45%, rgba(20,15,48,.96) 100%);
}
#astro-karta .ak-hero--niebo {
	display: flex; align-items: center; justify-content: center;
	background: radial-gradient(120% 120% at 50% 0%, #241a52 0%, #120e2e 55%, #0a081e 100%);
}
#astro-karta .ak-hero--niebo .ak-konstelacja { width: 88%; height: 88%; }
#astro-karta .ak-hero--srodek img {
	height: 170px; width: 170px; border-radius: 50%;
	filter: drop-shadow(0 0 34px rgba(214,228,255,.35));
}
#astro-karta .ma-hero .ak-tytul { text-align: center; margin-top: -4px; }
#astro-karta .ak-glif { font-family: 'Segoe UI Symbol','Noto Sans Symbols 2',serif; font-size: 1.5rem; }
#astro-karta .ak-tagline {
	margin: -.4rem 0 .5rem; text-align: center;
	font-style: italic; color: #cfc7ea; font-size: .95rem;
}
#astro-karta .ak-teraz {
	margin: 0 0 1rem; text-align: center;
	font-size: .68rem; letter-spacing: .22em; color: #9a93c4;
}
#astro-karta .ma-hero .ak-naglowek { text-align: center; }

/* ── paski przewijania ─────────────────────────────────────────────────────────
   Ta sama gramatyka, co na mapie nieba: tor to kropkowany złoty południk
   (jak nasza ekliptyka, stroke-dasharray 1 6), a suwak to ciepłe światło,
   które po nim wędruje. Kapsuła jest cienka, ale pole trafienia obejmuje cały
   tor — przezroczysta ramka daje jej oddech, nie odbierając uchwytu. */

/* Firefox i nowsze silniki bez ::-webkit-scrollbar. Warunek jest istotny:
   w Chrome samo ustawienie scrollbar-width wyłącza style ::-webkit-scrollbar,
   więc pasek zniknąłby zamiast wyładnieć. */
@supports not selector(::-webkit-scrollbar) {
	* {
		scrollbar-width: thin;
		scrollbar-color: rgba(240, 206, 126, .6) rgba(24, 18, 52, .35);
	}
}

::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-corner { background: transparent; }

::-webkit-scrollbar-track {
	background-color: transparent;
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(240, 206, 126, .45) 0 1px,
		transparent 1px 7px
	);
	background-size: 1px 100%;
	background-position: center;
	background-repeat: repeat-y;
}
::-webkit-scrollbar-track:horizontal {
	background-image: repeating-linear-gradient(
		to right,
		rgba(240, 206, 126, .45) 0 1px,
		transparent 1px 7px
	);
	background-size: 100% 1px;
	background-position: center;
	background-repeat: repeat-x;
}

::-webkit-scrollbar-thumb {
	border: 3px solid transparent;
	background-clip: padding-box;
	background-color: #e6c176;
	background-image: linear-gradient(180deg, #f8e2ab, #d2a55c);
	border-radius: 9999px;
	box-shadow: 0 0 10px rgba(240, 206, 126, .5), inset 0 0 0 1px rgba(255, 240, 205, .35);
	transition: box-shadow .25s ease, background-image .25s ease;
}
::-webkit-scrollbar-thumb:horizontal {
	background-image: linear-gradient(90deg, #f8e2ab, #d2a55c);
}
::-webkit-scrollbar-thumb:hover {
	background-image: linear-gradient(180deg, #fff0cd, #e8bd74);
	box-shadow: 0 0 16px rgba(255, 224, 150, .75);
}
::-webkit-scrollbar-thumb:active {
	background-image: linear-gradient(180deg, #fff6e0, #f0ce7e);
	box-shadow: 0 0 22px rgba(255, 232, 175, .9);
}

/* Okno przeglądarki dostaje szerszy tor — jest wysokie, więc kropki układają
   się w czytelną skalę, jak podziałka na obręczy astrolabium. */
html::-webkit-scrollbar { width: 16px; }

/* Karta wiedzy przewija się tuż przy zaokrąglonym rogu; stały rynienka
   trzyma tekst w miejscu, gdy pasek się pojawia i znika. */
#astro-karta .ak-panel { scrollbar-gutter: stable; }

/* Fotografia konstelacji w oknie znaku. Kadr jest pionowy 7:9 i ma złoty
 * podpis wtopiony w dole, więc `contain` — `cover` obcinałby nazwę. */
#astro-karta .ak-hero--foto { height: clamp( 240px, 34vh, 330px ); background: radial-gradient( 70% 90% at 50% 45%, rgba(96,56,190,.45), transparent 72% ), #07041c; }
#astro-karta .ak-hero--foto > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }


/* ══════════════════════════  pasek pory doby  ═══════════════════════════
 *
 * Suwak godziny stoi teraz przy mapie nieba, a nie pod kopułą. Kolor jego
 * wypełnienia to ta sama gama, którą przybiera niebo o tej porze — pasek
 * mówi więc dwie rzeczy naraz: którą mamy godzinę i jakie jest wtedy niebo.
 */

.mn-czas {
	max-width: 560px;
	margin: 6px auto 0;
	padding: 14px 18px 12px;
	border: 1px solid rgba( 240, 217, 160, .28 );
	border-radius: 16px;
	background: rgba( 12, 8, 38, .55 );
	font-family: 'Jost', system-ui, sans-serif;
}

.mn-czas__gora {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.mn-czas__etyk {
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #c9a870;
}

.mn-czas__zegar {
	font-family: 'Cormorant Garamond', 'Times New Roman', serif;
	font-size: 30px;
	line-height: 1;
	color: #fbe9bd;
	text-shadow: 0 0 22px rgba( 240, 217, 160, .3 );
}

.mn-czas__rzad {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0 10px;
}

.mn-czas__krok {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid rgba( 240, 217, 160, .3 );
	border-radius: 50%;
	background: rgba( 16, 10, 46, .7 );
	color: #f0d9a0;
	font-family: 'Cormorant Garamond', serif;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .2s, color .2s, box-shadow .2s;
}

.mn-czas__krok:hover,
.mn-czas__krok:focus-visible {
	outline: none;
	border-color: #f0d9a0;
	color: #fff5da;
	box-shadow: 0 0 18px rgba( 240, 217, 160, .3 );
}

/* Tor suwaka to miniatura doby: noc → zmierzch → dzień → zmierzch → noc. */
.mn-czas__suwak {
	flex: 1 1 auto;
	min-width: 0;
	height: 10px;
	margin: 0;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 9999px;
	background: linear-gradient( 90deg,
		#0d0a24 0%, #191447 14%, #8b4f9e 22%, #f7a978 28%,
		#4380ca 42%, #1a5db8 50%, #4380ca 58%,
		#f7a978 72%, #8b4f9e 78%, #191447 86%, #0d0a24 100% );
	box-shadow: inset 0 0 0 1px rgba( 240, 217, 160, .22 );
	cursor: pointer;
}

.mn-czas__suwak::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #f6e6b8;
	background: #1a1136;
	box-shadow: 0 0 0 3px rgba( 12, 8, 38, .7 ), 0 0 20px rgba( 240, 217, 160, .55 );
	cursor: grab;
}

.mn-czas__suwak::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #f6e6b8;
	background: #1a1136;
	box-shadow: 0 0 0 3px rgba( 12, 8, 38, .7 ), 0 0 20px rgba( 240, 217, 160, .55 );
	cursor: grab;
}

.mn-czas__suwak:focus-visible { outline: 2px solid #f0d9a0; outline-offset: 4px; }

.mn-czas__stopka {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mn-czas__faza {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	letter-spacing: .06em;
	color: #9a90bd;
}

.mn-czas__faza i {
	width: 26px;
	height: 8px;
	border-radius: 9999px;
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .18 );
}

.mn-czas__teraz {
	padding: 7px 14px;
	border: 1px solid rgba( 240, 217, 160, .3 );
	border-radius: 9999px;
	background: none;
	color: #f0d9a0;
	font-family: inherit;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .2s, color .2s, opacity .2s;
}

.mn-czas__teraz:hover { border-color: #f0d9a0; color: #fff5da; }

/* Gdy patrzymy na „teraz", przycisk powrotu nie ma co robić. */
.mn-czas.jest-teraz .mn-czas__teraz { opacity: .35; pointer-events: none; }

/* Stary, dwupikselowy suwak pod kopułą też zasługuje na uchwyt, który
 * widać — to ten sam element, więc poprawka działa w obu miejscach. */
#time {
	height: 8px;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 9999px;
	background: linear-gradient( 90deg, #0d0a24, #8b4f9e 24%, #4380ca 50%, #8b4f9e 76%, #0d0a24 );
	box-shadow: inset 0 0 0 1px rgba( 240, 217, 160, .22 );
}

#time::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid #f6e6b8; background: #1a1136;
	box-shadow: 0 0 14px rgba( 240, 217, 160, .5 );
}

#time::-moz-range-thumb {
	width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid #f6e6b8; background: #1a1136;
	box-shadow: 0 0 14px rgba( 240, 217, 160, .5 );
}

/* ─────────────  konstelacja jako tło kart ASC / MC / DSC / IC  ────────── */

.nt-os { position: relative; overflow: hidden; isolation: isolate; }

.nt-os__tlo {
	position: absolute;
	inset: -12%;
	z-index: -1;
	background-size: cover;
	background-position: center 38%;
	/* Rozmycie i przygaszenie: to ma być poświata za tekstem, nie obrazek
	 * do oglądania — liczby muszą zostać pierwsze. */
	filter: blur( 7px ) saturate( 1.15 );
	opacity: .38;
	-webkit-mask-image: radial-gradient( 120% 100% at 50% 40%, #000 30%, transparent 78% );
	mask-image: radial-gradient( 120% 100% at 50% 40%, #000 30%, transparent 78% );
	transition: opacity .3s, filter .3s;
	pointer-events: none;
}

.nt-os:hover .nt-os__tlo { opacity: .6; filter: blur( 5px ) saturate( 1.25 ); }

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

@media ( max-width: 900px ) {
	.mn-czas { max-width: 100%; padding: 12px 14px 10px; }
	.mn-czas__zegar { font-size: 24px; }
	.mn-czas__stopka { flex-wrap: wrap; gap: 8px; }
}

/* Stary pulpit nigdy nie miga: chowamy go od pierwszej klatki, a nie
 * dopiero wtedy, gdy skrypt karuzeli zdazy wstac. Klasa `bez-kosmosu`
 * na <html> to bezpiecznik — wraca, jesli karuzela nie powstanie. */
#pulpit { display: none; }
html.bez-kosmosu #pulpit { display: block; }

/* Pasek nie moze zmieniac ksztaltu w trakcie przeciagania: zegar dostaje
 * cyfry o stalej szerokosci, opis pory ma wlasna kolumne i moze sie zawinac,
 * a przycisk stoi w miejscu. Stala wysokosc trzyma karte spokojnie. */
.mn-czas { width: 100%; min-height: 148px; }
.mn-czas__zegar { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.mn-czas__stopka { min-height: 34px; align-items: center; }
.mn-czas__faza { flex: 1 1 auto; min-width: 0; }
.mn-czas__faza span { display: block; min-width: 0; }
.mn-czas__teraz { flex: 0 0 auto; white-space: nowrap; }
.nt-karta--kolo .mn-czas { margin-top: 14px; }

/* ══════════  strzalki karuzeli — wersja dopasowana do serwisu  ════════
 *
 * Stary `left: clamp(8px, 2vw, 28px)` przyklejal je do krawedzi okna — na
 * szerokim ekranie ladowaly kilkaset pikseli od tresci i wychodzily poza
 * kadr. Teraz stoja tuz przy pasie tresci: `max()` trzyma je przy karcie
 * na duzym ekranie i przy krawedzi na malym.
 *
 * Wyglad: cienka zlota obreczka i szeryfowy chevron — ta sama reka, co
 * strzalki na Ksiezycu i w slajderze konstelacji. */
.ks-strzalka.ks-strzalka {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba( 240, 217, 160, .3 );
	border-radius: 50%;
	background: rgba( 16, 10, 46, .72 );
	color: #f0d9a0;
	font-family: 'Cormorant Garamond', 'Times New Roman', serif;
	font-size: 26px;
	line-height: 1;
	backdrop-filter: blur( 6px );
	box-shadow: 0 10px 30px rgba( 6, 4, 22, .5 );
	transition: border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.ks-strzalka.ks-strzalka:hover {
	border-color: #f0d9a0;
	color: #fff5da;
	box-shadow: 0 0 26px rgba( 240, 217, 160, .34 ), 0 10px 30px rgba( 6, 4, 22, .5 );
	transform: translateY( -50% ) scale( 1.06 );
}
.ks-strzalka.ks-strzalka:focus-visible { outline: 2px solid #f0d9a0; outline-offset: 4px; }
/* Wyzsza specyficznosc z #kosmos: arkusz `niebo.css` jest wpisany w tresc
 * strony, wiec laduje PO tym enqueue i inaczej wygrywa swoim `clamp()`. */
#kosmos .ks-strzalka--wstecz { left: max( 14px, calc( 50% - 680px ) ); }
#kosmos .ks-strzalka--dalej  { right: max( 14px, calc( 50% - 680px ) ); }
#kosmos .ks-strzalka { top: 46%; }

/* Kropki: zlota kreska zamiast szarej plamki — czytelniej, ktora strona. */
.ks-kropka.ks-kropka {
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: rgba( 240, 217, 160, .26 );
}
.ks-kropka.ks-kropka.jest {
	background: #f0d9a0;
	box-shadow: 0 0 14px rgba( 240, 217, 160, .55 );
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.ks-strzalka.ks-strzalka:hover { transform: translateY( -50% ); }
}

/* Podpis suwaka pod kopula stal przyklejony do lewej krawedzi okna, a tor
 * ciagnal sie przez caly ekran. Wciagamy caly wiersz do srodka — napis idzie
 * w prawo, tor robi sie krotszy i latwiej w niego trafic.
 * Podwojona klasa + `body`, bo `niebo.css` jest wpisany w tresc strony
 * i laduje sie po tym arkuszu. */
body .scrub.scrub--pod-niebem {
	padding-left: clamp( 20px, 9vw, 190px );
	padding-right: clamp( 20px, 5vw, 90px );
	gap: 18px;
}

/* ── material znaku: szesc sekcji z horoskopu ────────────────────── */
/* Akapit czyta sie jak esencja. Lista cech (SWIATLO, CIEN) jest lzejsza
   i chlodniejsza, zeby oko od razu widzialo wyliczenie, nie zdanie.
   `ak-rys` nie mial dotad zadnej reguly — dziedziczyl rozmiar po motywie
   i przez to wygladal na wieksze pismo niz reszta karty. */
#astro-karta .ak-akapit {
	margin: 0 0 1.15rem; font-size: .95rem; line-height: 1.7; color: #ede7ff;
}
#astro-karta .ak-cechy {
	margin: 0 0 1.25rem; font-size: .9rem; line-height: 1.6;
	color: #cfc7ea; letter-spacing: .015em;
}
#astro-karta .ak-rys {
	margin: 0 0 .4rem; font-size: .95rem; line-height: 1.75; color: #cfc7ea;
}
#astro-karta .ma-hero .ak-akapit,
#astro-karta .ma-hero .ak-cechy { text-align: center; }