/* Rozkład własny — dla kogoś, kto ma swoją talię i już ją rozłożył.
 *
 * Nic się tu nie losuje. Wróżba wydarzyła się na stole użytkownika; ekran ma
 * tylko przyjąć, co mu wyszło, i to odczytać. Dlatego zamiast tasowania są dwa
 * pytania, a potem tyle pól, ile kart.
 *
 * Oprawa jest ta sama co w kartach wyniku: ramka `ramka-atlas.png` jako
 * `border-image`, Cormorant na nazwach, Jost na etykietach, iskra jako
 * ozdobnik. Jeden poziom ramy, nie dwa — sekcja nie dostaje własnej obwódki,
 * bo bloczki już ją mają.
 *
 * Sygnaturą jest suwak liczby kart: jego torem jest rząd dwunastu kart, z
 * których zapala się tyle, ile wybrano. Liczba nie jest wtedy abstrakcyjna —
 * widać układ, który się deklaruje.
 */

/* ─────────────────────  strona bez chromu motywu  ───────────────────── */

/* Dokładnie ten sam reset, którego używa `/wrozby/` — bez niego strona
 * dostaje drugie menu, jasne tło, tytuł od motywu i wąską kolumnę treści.
 * Wszystko zaczepione o `#tww-korzen`, żeby nie ruszać reszty serwisu. */

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

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

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

body:has(#tww-korzen) {
	background:
		linear-gradient( 180deg, rgba( 11, 8, 32, 0.72 ), rgba( 11, 8, 32, 0.88 ) ),
		url( gfx/tlo-strony.jpg ) center top / cover no-repeat,
		#0b0820;
	background-attachment: scroll, fixed, scroll;
}

#tww-korzen {
	max-width: none;
	width: 100%;
	margin-inline: 0;
}

/* ───────────────────────────  sekcja  ─────────────────────────── */

.tww {
	max-width: 1252px;
	margin: 2.5rem auto 4rem;
	padding: 0 24px;
	font-family: 'Jost', system-ui, sans-serif;
	color: #cfc8e6;
}

.tww[ hidden ] {
	display: none;
}

.tww__naglowek {
	text-align: center;
	margin-bottom: 2.4rem;
}

.tww__nad {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	margin: 0 0 0.6rem;
	font-size: 0.78rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #ccb88a;
}

.tww__nad::before,
.tww__nad::after {
	content: '';
	width: min( 18vw, 9rem );
	height: 1px;
	background: linear-gradient( 90deg, transparent, rgba( 201, 168, 76, 0.38 ), transparent );
}

.tww__naglowek h2 {
	margin: 0 0 0.7rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp( 1.9rem, 5vw, 3rem );
	font-weight: 500;
	letter-spacing: 0.06em;
	color: #e4d1a0;
}

.tww__lede {
	max-width: 44rem;
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.6;
	color: #8d87b1;
}

/* ───────────────────────  krok 1: wybór  ──────────────────────── */

/* Makieta układa oba pytania jeden pod drugim, na całą szerokość — obok
 * siebie slider rozkładów robił się ciasny i kafle wychodziły ściśnięte. */
.tww__wybor {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 0.6rem;
	max-width: 1180px;
	margin: 0 auto;
}

/* „albo" mówi prawdę o tych blokach: to alternatywa, nie kolejne kroki.
 * Dlatego nie ma tu numeracji 1 / 2. */
.tww__albo {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 0.3rem 0;
	font-size: 0.72rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #7d769f;
}

.tww__albo::before,
.tww__albo::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient( 90deg, transparent, rgba( 201, 168, 76, 0.3 ), transparent );
}

.tww__blok {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-style: solid;
	border-color: transparent;
	border-width: 22px 46px;
	border-image-source: url( gfx/ramka-jasna.png );
	border-image-slice: 53 111;
	border-image-width: 22px 46px;
	border-image-repeat: stretch;
	padding: 1.4rem 1.2rem 1.8rem;
	background: linear-gradient( 168deg, rgba( 34, 24, 70, 0.5 ), rgba( 14, 11, 34, 0.62 ) );
	text-align: center;
}

.tww__pytanie {
	margin: 0 0 1.1rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp( 1.5rem, 3vw, 2rem );
	letter-spacing: 0.03em;
	color: #ddc79a;
}

/* Podtytuł z iskrami — z makiety, tuż pod pytaniem. */
.tww__podtytul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	margin: -0.7rem 0 1.2rem;
	font-size: 0.72rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: #9a93c0;
}

.tww__podtytul::before,
.tww__podtytul::after {
	content: '✦';
	font-size: 0.6rem;
	color: rgba( 201, 168, 76, 0.55 );
}

/* ─────────────────  sygnatura: talia jako suwak  ───────────────── */

.tww__licznik {
	margin: 0 0 0.9rem;
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8d87b1;
}

.tww__licznik b {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: 0;
	color: #e4d1a0;
	vertical-align: -0.15em;
	margin-right: 0.35rem;
}

.tww__talia {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	margin-bottom: 1.2rem;
}

.tww__karta {
	flex: 0 0 auto;
	width: 3.1rem;
	aspect-ratio: 2 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba( 124, 100, 180, 0.45 );
	border-radius: 6px;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.15rem;
	color: #b7addb;
	background: linear-gradient( 168deg, rgba( 32, 24, 62, 0.9 ), rgba( 16, 12, 36, 0.9 ) );
	cursor: pointer;
	transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

/* Wybrane karty świecą złotem i pokazują iskrę zamiast numeru — widać wtedy
 * układ, a nie listę liczb. */
.tww__karta.jest {
	border-color: rgba( 201, 168, 76, 0.72 );
	box-shadow: 0 0 9px rgba( 201, 168, 76, 0.18 );
	color: #e6d2a4;
	transform: translateY( -3px );
}

.tww__suwak {
	width: 100%;
	max-width: 46rem;
	margin: 0 0 1.6rem;
	accent-color: #c9a84c;
}

/* ─────────────────  slider rozkładów (podgląd)  ────────────────── */

.tww__slider {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	margin-bottom: 0.9rem;
}

.tww__strzalka {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border: 1px solid rgba( 201, 168, 76, 0.35 );
	border-radius: 9999px;
	background: rgba( 22, 17, 46, 0.7 );
	color: #ccb88a;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.18s, color 0.18s;
}

.tww__strzalka:hover {
	border-color: rgba( 201, 168, 76, 0.75 );
	color: #e4d1a0;
}

.tww__tor {
	display: flex;
	gap: 0.7rem;
	overflow-x: auto;
	scroll-behavior: smooth;
	list-style: none;
	margin: 0;
	padding: 0.3rem;
	scrollbar-width: none;
}

/* `scrollbar-width` wyłącza w Chrome regułę ::-webkit-scrollbar, więc idzie
 * w zapytaniu warunkowym — inaczej pasek zostaje widoczny. */
@supports not selector( ::-webkit-scrollbar ) {
	.tww__tor::-webkit-scrollbar {
		display: none;
	}
}

/* Rozmiar musi siedzieć na elemencie listy, nie na przycisku: `.tww__tor` jest
 * kontenerem flex, więc to `<li>` jest jego elementem. Z `flex-basis` na
 * przycisku `<li>` zapadało się do min-content i kafle miały 66 px. */
.tww__tor > li {
	flex: 0 0 9.4rem;
	display: flex;
}

.tww__kafel {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	min-height: 14.5rem;
	padding: 0.8rem 0.6rem 0.9rem;
	border: 1px solid rgba( 124, 100, 180, 0.3 );
	border-radius: 10px;
	background: linear-gradient( 168deg, rgba( 30, 23, 58, 0.6 ), rgba( 14, 11, 32, 0.75 ) );
	color: #cfc8e6;
	cursor: pointer;
	transition: border-color 0.18s, box-shadow 0.18s;
}

.tww__kafel:hover {
	border-color: rgba( 201, 168, 76, 0.5 );
}

.tww__kafel[ aria-pressed='true' ] {
	border-color: rgba( 201, 168, 76, 0.7 );
	box-shadow: 0 0 10px rgba( 201, 168, 76, 0.16 );
}

.tww__kafel img {
	width: 100%;
	height: 8.2rem;
	object-fit: contain;
}

.tww__kafel-glif {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 8.2rem;
	font-size: 2.4rem;
	color: rgba( 201, 168, 76, 0.6 );
}

.tww__kafel-nazwa {
	margin-top: auto;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.02rem;
	line-height: 1.2;
	color: #e4d1a0;
}

.tww__kafel-ile {
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8d87b1;
}

.tww__wybrany {
	min-height: 1.4rem;
	margin: 0 0 1.1rem;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ccb88a;
}

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

.tww__dalej {
	margin-top: auto;
	width: min( 100%, 24rem );
	min-height: 3.3rem;
	padding: 0.9rem 2rem;
	white-space: nowrap;
	border: 0;
	border-radius: 10px;
	background: url( gfx/przycisk.png ) 0 0 / 100% 100% no-repeat;
	box-shadow: 0 0 14px rgba( 198, 160, 70, 0.18 );
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.08rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #2b1d05;
	cursor: pointer;
	transition: box-shadow 0.2s, transform 0.2s;
}

.tww__dalej:hover:not( :disabled ) {
	box-shadow: 0 0 22px rgba( 210, 168, 70, 0.3 );
	transform: translateY( -1px );
}

.tww__dalej:disabled {
	filter: grayscale( 0.6 ) brightness( 0.7 );
	box-shadow: none;
	cursor: not-allowed;
}

/* ─────────────────────  krok 2: wpisywanie  ───────────────────── */

.tww__pola[ hidden ],
.tww__wynik[ hidden ] {
	display: none;
}

/* Kroki 2 i 3 mają własny, wyśrodkowany rytm — „← Zmień układ" jest ich
 * pierwszym wierszem, a nie elementem doklejonym z boku ramy. */
.tww__pola,
.tww__wynik {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1180px;
	margin: 0 auto;
}

.tww__pola > *,
.tww__wynik > * {
	width: 100%;
}

.tww__pola > .tww__wstecz,
.tww__wynik > .tww__wstecz {
	width: auto;
}

.tww__wstecz {
	display: inline-flex;
	align-items: center;
	margin: 0 auto 1.6rem;
	padding: 0.5rem 1.2rem;
	border: 1px solid rgba( 201, 168, 76, 0.35 );
	border-radius: 9999px;
	background: rgba( 22, 17, 46, 0.6 );
	color: #ccb88a;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	cursor: pointer;
}

.tww__wstecz:hover {
	border-color: rgba( 201, 168, 76, 0.75 );
	color: #e4d1a0;
}

.tww__lista {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 22rem, 1fr ) );
	gap: 1rem;
	list-style: none;
	margin: 0 0 1.8rem;
	padding: 0;
}

.tww__pole {
	display: flex;
	/* Do dolnej krawędzi, nie do środka: nad listą stoi jeszcze etykieta
	 * „KARTA N", więc wyśrodkowanie względem całej kolumny wypychało
	 * przycisk „odwrócona" ponad listę. */
	align-items: flex-end;
	gap: 0.7rem;
	border-style: solid;
	border-color: transparent;
	border-width: 14px 30px;
	border-image-source: url( gfx/ramka-atlas.png );
	border-image-slice: 53 111;
	border-image-width: 14px 30px;
	border-image-repeat: stretch;
	padding: 0.5rem 0.3rem 0.7rem;
	background: linear-gradient( 168deg, rgba( 30, 23, 58, 0.5 ), rgba( 15, 12, 34, 0.65 ) );
}

.tww__numer {
	flex: 0 0 auto;
	width: 2rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.4rem;
	text-align: center;
	color: rgba( 201, 168, 76, 0.75 );
}

.tww__srodek {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}

.tww__etykieta {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8d87b1;
}

.tww__select {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid rgba( 124, 100, 180, 0.45 );
	border-radius: 8px;
	background: rgba( 18, 14, 40, 0.9 );
	color: #ede7ff;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 0.95rem;
}

/* Bez tego rozwinięta lista leci krojem systemowym i wygląda jak z edytora. */
.tww__select option,
.tww__select optgroup {
	font-family: 'Jost', system-ui, sans-serif;
	background: #16112e;
	color: #ede7ff;
}

.tww__select optgroup {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.05rem;
	color: #e4d1a0;
}

.tww__select:focus-visible {
	outline: 2px solid rgba( 201, 168, 76, 0.8 );
	outline-offset: 2px;
}

.tww__obrot {
	flex: 0 0 auto;
	padding: 0.45rem 0.7rem;
	border: 1px solid rgba( 124, 100, 180, 0.45 );
	border-radius: 9999px;
	background: rgba( 22, 17, 46, 0.7 );
	color: #a9a3c8;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.18s, color 0.18s;
}

.tww__obrot[ aria-pressed='true' ] {
	border-color: rgba( 201, 168, 76, 0.85 );
	color: #e4d1a0;
}

.tww__stopka {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	text-align: center;
}

.tww__postep {
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8d87b1;
}

.tww__blad {
	width: 100%;
	margin: 0.6rem 0 0;
	font-size: 0.88rem;
	color: #d8a0a8;
}

/* ────────────────────────  krok 3: wynik  ─────────────────────── */

.tww__wynik h3 {
	margin: 0 0 0.4rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp( 1.6rem, 4vw, 2.3rem );
	text-align: center;
	color: #e4d1a0;
}

.tww__karty {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 20rem, 1fr ) );
	gap: 1rem;
	list-style: none;
	margin: 1.6rem 0;
	padding: 0;
}

.tww__wynik-karta {
	border-style: solid;
	border-color: transparent;
	border-width: 16px 34px;
	border-image-source: url( gfx/ramka-atlas.png );
	border-image-slice: 53 111;
	border-image-width: 16px 34px;
	border-image-repeat: stretch;
	padding: 0.5rem 0.4rem 0.7rem 4.4rem;
	position: relative;
	background: linear-gradient( 168deg, rgba( 30, 23, 58, 0.55 ), rgba( 15, 12, 34, 0.7 ) );
	text-align: left;
}

/* Medalion: ten sam kadr z ilustracji karty co w kaflach aplikacji. */
.tww__wynik-karta::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0.15rem;
	width: 3.2rem;
	height: 3.2rem;
	margin-top: -1.6rem;
	border: 1px solid rgba( 201, 168, 76, 0.5 );
	border-radius: 9999px;
	background-color: rgba( 40, 30, 72, 0.7 );
	background-image: var( --karta, none );
	background-position: 50% 22%;
	background-repeat: no-repeat;
	background-size: 200% auto;
	box-shadow: 0 0 0 3px rgba( 13, 13, 26, 0.9 ), inset 0 0 12px rgba( 0, 0, 0, 0.5 );
}

.tww__wynik-nazwa {
	margin: 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.1rem;
	color: #ddcfa8;
}

.tww__wynik-nazwa span {
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #a9c0a4;
}

.tww__wynik-nazwa span.odwrocona {
	color: #c8a0a8;
}

.tww__wynik-poz {
	margin: 0.15rem 0 0;
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8f88bb;
}

.tww__wynik-kw {
	margin: 0.4rem 0 0;
	font-size: 0.8rem;
	line-height: 1.45;
	color: #9a94ba;
}

.tww__podsumowanie {
	border-style: solid;
	border-color: transparent;
	border-width: 18px 38px;
	border-image-source: url( gfx/ramka-atlas.png );
	border-image-slice: 53 111;
	border-image-width: 18px 38px;
	border-image-repeat: stretch;
	padding: 0.8rem 0.6rem 1rem;
	background: linear-gradient( 168deg, rgba( 34, 26, 66, 0.6 ), rgba( 15, 12, 34, 0.75 ) );
}

.tww__podsumowanie h4 {
	margin: 0 0 0.9rem;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 0.78rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-align: center;
	color: #ccb88a;
}

.tww__podsumowanie p {
	margin: 0 0 0.9rem;
	font-size: 0.95rem;
	line-height: 1.7;
	color: #bdb6d8;
}

.tww__podsumowanie p:last-child {
	margin-bottom: 0;
}

/* ──────────────────────────────  wąsko  ───────────────────────── */

@media ( max-width: 900px ) {
	.tww__wybor {
		grid-template-columns: 1fr;
	}

	.tww__albo {
		flex-direction: row;
		padding: 0.4rem 0;
	}

	.tww__albo::before,
	.tww__albo::after {
		width: auto;
		height: 1px;
		background: linear-gradient( 90deg, transparent, rgba( 201, 168, 76, 0.3 ), transparent );
	}

	.tww__blok,
	.tww__pole,
	.tww__wynik-karta {
		border-width: 12px 24px;
		border-image-width: 12px 24px;
	}

	.tww__karta {
		width: 2.5rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tww__karta,
	.tww__dalej {
		transition: none;
	}

	.tww__tor {
		scroll-behavior: auto;
	}
}


/* ──────────────────────────  tytuł kroku  ─────────────────────────── */

.tww__tytul {
	margin: 0 0 0.4rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp( 1.6rem, 4vw, 2.3rem );
	font-weight: 500;
	text-align: center;
	color: #e4d1a0;
}

.tww__pola .tww__lede,
.tww__wynik .tww__lede {
	text-align: center;
	margin-bottom: 1.8rem;
}

/* ────────────────────────────  stół  ──────────────────────────────── */

/* Karty leżą na pozycjach z rozkładu, podanych w procentach, więc blat musi
 * mieć własne proporcje — inaczej nie ma względem czego liczyć `top`. */
.tww__stol {
	border-style: solid;
	border-color: transparent;
	border-width: 20px 42px;
	border-image-source: url( gfx/ramka-atlas.png );
	border-image-slice: 53 111;
	border-image-width: 20px 42px;
	border-image-repeat: stretch;
	/* Rama trzyma się maty, zamiast rozciągać się na całą kolumnę — inaczej
	 * między złotą krawędzią a obrusem zostawał szeroki, ciemny pas. */
	width: min( 100%, 52rem );
	margin: 1.6rem auto;
	padding: 0.6rem;
	background: #0d0b22;
}

/* Obrus jest ten sam, którym aplikacja nakrywa swoje rozkłady — inaczej stół
 * na tej stronie wyglądałby jak z innego serwisu. */
.tww__blat {
	background:
		radial-gradient( 60% 60% at 50% 45%, rgba( 20, 14, 44, 0.25 ), rgba( 10, 8, 26, 0.72 ) ),
		url( /wp-content/uploads/2026/08/ChatGPT-Image-17-cze-2026-21_45_34.png ) center / cover no-repeat;
	border-radius: 6px;
}

.tww__blat {
	position: relative;
	width: 100%;
	margin: 0;
	aspect-ratio: 1 / 1;
	min-height: 20rem;
}

.tww__miejsce {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	width: 15%;
	min-width: 4.4rem;
	transform: translate( -50%, -50% );
	text-align: center;
}

.tww__stol-karta {
	width: 100%;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border: 1px solid rgba( 201, 168, 76, 0.55 );
	border-radius: 6px;
	background: rgba( 18, 14, 40, 0.9 );
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.55 ), 0 0 14px rgba( 124, 58, 237, 0.16 );
}

.tww__stol-karta img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Karta odwrócona leży na stole do góry nogami — tak też ją pokazujemy. */
.tww__stol-karta.odwrocona img {
	transform: rotate( 180deg );
}

.tww__stol-nazwa {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0.3rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 0.8rem;
	color: #ddcfa8;
}

.tww__stol-podpis {
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.3;
	color: #8d87b1;
}

/* ─────────────────────────  odsłuch  ──────────────────────────────── */

.tww__gra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem;
	margin-top: 1.2rem;
	padding-top: 1.1rem;
	background:
		linear-gradient( 90deg, transparent, rgba( 201, 168, 76, 0.3 ), transparent )
		top / 100% 1px no-repeat;
}

.tww__gra-start {
	padding: 0.6rem 1.4rem;
	border: 1px solid rgba( 201, 168, 76, 0.5 );
	border-radius: 9999px;
	background: rgba( 26, 20, 52, 0.7 );
	color: #e2d3a6;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.tww__gra-start:hover:not( :disabled ) {
	border-color: rgba( 201, 168, 76, 0.9 );
	color: #f0e4c4;
}

.tww__gra-start:disabled {
	opacity: 0.6;
	cursor: progress;
}

.tww__gra-info {
	font-size: 0.82rem;
	color: #c8a0a8;
}

.tww__gra-panel {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	width: 100%;
}

.tww__gra-play {
	flex: 0 0 auto;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid rgba( 201, 168, 76, 0.55 );
	border-radius: 9999px;
	background: rgba( 26, 20, 52, 0.8 );
	color: #e4d1a0;
	font-size: 0.8rem;
	line-height: 1;
	cursor: pointer;
}

.tww__gra-tor {
	flex: 1 1 auto;
	height: 4px;
	border-radius: 9999px;
	background: rgba( 124, 100, 180, 0.28 );
	cursor: pointer;
}

.tww__gra-tor i {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 9999px;
	background: linear-gradient( 90deg, rgba( 201, 168, 76, 0.7 ), #e4d1a0 );
}

.tww__gra-czas {
	flex: 0 0 auto;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: #8d87b1;
	font-variant-numeric: tabular-nums;
}

.tww__gra-pobierz {
	flex: 0 0 auto;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ccb88a;
	text-decoration: none;
	border-bottom: 1px solid rgba( 201, 168, 76, 0.4 );
}

.tww__gra-pobierz:hover {
	color: #f0e4c4;
}

@media ( max-width: 900px ) {
	.tww__stol {
		border-width: 14px 28px;
		border-image-width: 14px 28px;
	}

	.tww__blat {
		aspect-ratio: 1 / 1;
	}

	.tww__miejsce {
		width: 20%;
	}
}


/* ─────────────────────  własna lista wyboru karty  ───────────────────── */

/* Natywny `<select>` po rozwinięciu rysuje system — stąd pasek przewijania
 * i krój rodem z Windows 3.1. Tutaj wszystko jest zwykłym HTML-em. */

.tww__wybieracz {
	position: relative;
	width: 100%;
}

.tww__wybieracz-guzik {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	width: 100%;
	padding: 0.6rem 0.85rem;
	border: 1px solid rgba( 124, 100, 180, 0.45 );
	border-radius: 8px;
	background: rgba( 18, 14, 40, 0.92 );
	color: #8f88bb;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 0.95rem;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.18s, color 0.18s;
}

.tww__wybieracz-guzik:hover {
	border-color: rgba( 201, 168, 76, 0.5 );
}

.tww__wybieracz-guzik:focus-visible {
	outline: 2px solid rgba( 201, 168, 76, 0.75 );
	outline-offset: 2px;
}

.tww__wybieracz.ma-karte .tww__wybieracz-guzik {
	border-color: rgba( 201, 168, 76, 0.55 );
	color: #ede7ff;
}

.tww__wybieracz-nazwa {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tww__wybieracz-strzalka {
	flex: 0 0 auto;
	font-size: 1rem;
	line-height: 1;
	color: rgba( 201, 168, 76, 0.7 );
}

.tww__wybieracz-panel {
	position: absolute;
	z-index: 40;
	top: calc( 100% + 0.35rem );
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	max-height: 21rem;
	border: 1px solid rgba( 201, 168, 76, 0.4 );
	border-radius: 10px;
	background: #150f34;
	box-shadow: 0 20px 44px rgba( 0, 0, 0, 0.65 );
	overflow: hidden;
}

.tww__wybieracz-panel[ hidden ] {
	display: none;
}

.tww__wybieracz-szukaj {
	flex: 0 0 auto;
	margin: 0.55rem 0.55rem 0.35rem;
	padding: 0.45rem 0.7rem;
	border: 1px solid rgba( 124, 100, 180, 0.4 );
	border-radius: 6px;
	background: rgba( 10, 8, 26, 0.8 );
	color: #ede7ff;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 0.9rem;
}

.tww__wybieracz-szukaj:focus-visible {
	outline: none;
	border-color: rgba( 201, 168, 76, 0.7 );
}

.tww__wybieracz-lista {
	flex: 1 1 auto;
	overflow-y: auto;
	margin: 0;
	padding: 0 0 0.4rem;
	list-style: none;
	/* Cienki, złoty pasek zamiast systemowego. */
	scrollbar-width: thin;
	scrollbar-color: rgba( 201, 168, 76, 0.45 ) transparent;
}

.tww__wybieracz-grupa {
	padding: 0.6rem 0.9rem 0.2rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.02rem;
	letter-spacing: 0.04em;
	color: #ddc79a;
}

.tww__wybieracz-grupa[ hidden ],
.tww__wybieracz-lista li[ hidden ] {
	display: none;
}

.tww__wybieracz-opcja {
	display: block;
	width: 100%;
	padding: 0.38rem 0.9rem 0.38rem 1.5rem;
	border: 0;
	background: none;
	color: #cfc8e6;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 0.92rem;
	text-align: left;
	cursor: pointer;
}

.tww__wybieracz-opcja:hover:not( :disabled ),
.tww__wybieracz-opcja:focus-visible {
	outline: none;
	background: rgba( 124, 58, 237, 0.24 );
	color: #f2ecff;
}

.tww__wybieracz-opcja[ aria-selected='true' ] {
	color: #e4d1a0;
}

/* Karta użyta już w innym polu — widać, że jest, i widać, że nie do wzięcia. */
.tww__wybieracz-opcja.zajeta {
	opacity: 0.35;
	text-decoration: line-through;
	cursor: not-allowed;
}


/* ─────────────────────  blok z pytaniem  ───────────────────── */

.tww__blok--pytanie {
	margin-bottom: 0.6rem;
}

.tww__pytanie-pole {
	width: min( 100%, 34rem );
	padding: 0.7rem 1rem;
	border: 1px solid rgba( 124, 100, 180, 0.45 );
	border-radius: 8px;
	background: rgba( 18, 14, 40, 0.92 );
	color: #ede7ff;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 1rem;
	text-align: center;
}

.tww__pytanie-pole::placeholder {
	color: #7d769f;
	font-style: italic;
}

.tww__pytanie-pole:focus-visible {
	outline: none;
	border-color: rgba( 201, 168, 76, 0.7 );
}

.tww__pytanie-echo {
	margin: 0 0 1.4rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: clamp( 1.05rem, 2.4vw, 1.3rem );
	text-align: center;
	color: #b7a7dd;
}

/* ───────────────  lista wyboru rozwijana w górę  ─────────────── */

.tww__wybieracz.w-gore .tww__wybieracz-panel {
	top: auto;
	bottom: calc( 100% + 0.35rem );
}

/* ──────────────────  odstęp nad powrotem  ─────────────────── */

.tww__wynik > .tww__wstecz,
.tww__pola > .tww__wstecz {
	margin-top: 1.6rem;
}

/* Powiększenie karty rysują klasy z `tarot-app.css` — patrz `wlasny.js`. */

/* Karta na stole zaprasza kliknięciem. */
.tww__stol-karta {
	cursor: zoom-in;
	transition: transform 0.18s, box-shadow 0.18s;
}

.tww__stol-karta:hover,
.tww__stol-karta:focus-visible {
	outline: none;
	transform: translateY( -4px );
	box-shadow: 0 10px 26px rgba( 0, 0, 0, 0.6 ), 0 0 16px rgba( 201, 168, 76, 0.3 );
}

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


/* ──────────  panel „Zadaj pytanie" na tej stronie  ────────── */

/* Panel jest ten sam co w aplikacji i stylizuje go `panel.css`; tutaj
 * ustawiamy mu tylko miejsce w kolumnie strony. */
.tww .tq {
	margin: 0 auto 1.6rem;
}

.tww__po-pytaniu[ hidden ] {
	display: none;
}

.tww__po-pytaniu {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 0.6rem;
}


/* Numer zostaje na środku wiersza, przycisk równa się z listą. */
.tww__pole .tww__numer {
	align-self: center;
}

.tww__pole .tww__obrot {
	align-self: flex-end;
	min-height: 2.6rem;
}