/* Mistyczny Wschód — hub i Atlas. Tokeny serwisu (granat + złoto); każda tradycja ma własną nić koloru.
   Sygnatura: szlak sześciu przystanków, który filtruje moduły i Atlas. Miara serwisu: 1520 px treści. */
.tat-strona {
	--tlo: #060716; --panel: rgba( 10, 10, 34, .74 ); --obrys: rgba( 230, 196, 138, .3 ); --wlos: rgba( 230, 196, 138, .12 );
	--zloto: #fde291; --zloto-cieply: #f9d57a; --zloto-ciemne: #e6c48a; --zloto-etyk: #cda474; --jade: #7cc5a4; --cynober: #c8412f;
	--tekst: #b3b1c2; --tekst-slaby: #9393a7; --tekst-mocny: #e6e2ea;
	--serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif;
	position: relative; max-width: 1520px; margin: 0 auto; padding: 0 40px 90px; color: var( --tekst ); font: 300 15px var( --sans );
	background: radial-gradient( 1300px 640px at 50% -12%, rgba( 90, 60, 160, .26 ), transparent 70% ), radial-gradient( 900px 520px at 90% 30%, rgba( 200, 65, 47, .08 ), transparent 70% ), var( --tlo ); overflow-x: clip;
}
.tat-strona *, .tat-strona *::before, .tat-strona *::after { box-sizing: border-box; }
body:has( .tat-strona ) .wp-site-blocks > header, body:has( .tat-strona ) header.wp-block-template-part, body:has( .tat-strona ) .wp-site-blocks > footer, body:has( .tat-strona ) footer.wp-block-template-part, body:has( .tat-strona ) .wp-block-post-title { display: none !important; }
body:has( .tat-strona ) .wp-site-blocks, body:has( .tat-strona ) .wp-block-group, body:has( .tat-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tat-strona ) .wp-block-post-content > *, body:has( .tat-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tat-strona ) { background: #060716; }
body:has( .tat-strona ) .wp-block-post-content > .tat-strona, body:has( .tat-strona ) .entry-content > .tat-strona, .tat-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; } /* 1600 − 2×40 = 1520 treści */
.tat-strona button { font-family: inherit; }
.pismo-dewanagari { font-family: 'Noto Serif Devanagari', serif; }
/* Pismo tybetanskie: sylaba zlozona ma tusz wysoki na ok. 1,6 wysokosci czcionki,
   wiec przy interlinii 1 wychodzi poza swoje pudelko i nakrywa podpis pod spodem. */
.pismo-tybetanski { font-family: 'Noto Serif Tibetan', serif; line-height: 1.8; }
.pismo-cjk { font-family: 'Noto Serif SC', serif; }
.pismo-arabski { font-family: 'Noto Naskh Arabic', serif; }

.tat-sciezka { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 0 6px; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tat-sciezka i { font-style: normal; color: var( --zloto-ciemne ); } .tat-sciezka b { font-weight: 400; color: var( --zloto ); }
.tat-poziom { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 0 auto; }
.tat-poziom span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var( --wlos ); border-radius: 999px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var( --tekst ); }
.tat-poziom span::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var( --k ); box-shadow: 0 0 10px var( --k ); }
.jest-hist { --k: #7cc59a; } .jest-ezo { --k: #ad97d3; } .jest-wsp { --k: #f9d57a; } .jest-bad { --k: #6d9be6; }

.tat-hero { max-width: 900px; margin: 0 auto; padding: 60px 0 10px; text-align: center; }
.tat-nad { margin: 0 0 12px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tat-tytul { margin: 0; font: 500 clamp( 46px, 5.6vw, 82px )/1.02 var( --serif ); color: var( --zloto-cieply ); }
.tat-tytul small { display: block; margin-top: 10px; font: 300 16px var( --sans ); letter-spacing: .14em; color: var( --jade ); }
.tat-lead { margin: 22px auto 0; font-size: 16px; line-height: 1.72; color: var( --tekst-mocny ); }

/* szlak */
.tat-szlak { position: relative; margin: 40px 0 0; padding: 30px 0 0; }
.tat-szlak__nic { position: absolute; left: 0; right: 0; top: 40px; width: 100%; height: 120px; pointer-events: none; }
.tat-szlak__stacje { position: relative; display: grid; grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); gap: 14px; }
.tat-stacja { display: grid; gap: 4px; justify-items: center; padding: 18px 10px 16px; border: 1px solid var( --wlos ); border-radius: 18px; background: var( --panel ); backdrop-filter: blur( 10px ); color: var( --tekst ); text-align: center; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.tat-stacja i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 1px var( --wlos ); background: radial-gradient( circle at 50% 30%, color-mix( in srgb, var( --nic ) 26%, transparent ), transparent 65% ); font-style: normal; font-size: 30px; line-height: 1; color: var( --nic ); }
.tat-stacja b { margin-top: 6px; font: 500 19px var( --serif ); color: var( --zloto-cieply ); }
.tat-stacja span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tat-stacja:hover { border-color: var( --obrys ); transform: translateY( -3px ); }
.tat-stacja.jest-wybrana { border-color: var( --nic ); box-shadow: 0 0 28px color-mix( in srgb, var( --nic ) 30%, transparent ); }
.tat-stacja:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }
.tat-szlak__pod { max-width: 76ch; margin: 18px auto 0; text-align: center; font-size: 13.5px; line-height: 1.65; color: var( --tekst-slaby ); }

/* sekcje */
.tat-sekcja { margin: 64px 0 0; scroll-margin-top: 90px; }
.tat-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tat-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3vw, 40px )/1.15 var( --serif ); color: var( --zloto-cieply ); }
.tat-sekcja__lead { max-width: 76ch; margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var( --tekst ); }

/* moduły */
.tat-moduly { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 16px; margin: 26px 0 0; }
.tat-modul { display: grid; grid-template-columns: 54px minmax( 0, 1fr ); gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var( --wlos ); border-radius: 16px; background: var( --panel ); color: var( --tekst ); text-decoration: none; transition: border-color .2s, transform .2s, opacity .2s; }
.tat-modul:hover { border-color: var( --obrys ); transform: translateY( -2px ); }
.tat-modul.jest-przygaszony { opacity: .32; }
.tat-modul i { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; box-shadow: inset 0 0 0 1px var( --wlos ); font-style: normal; font-size: 24px; color: var( --zloto ); font-family: 'Noto Serif SC', 'Noto Serif Tibetan', 'Noto Serif Devanagari', var( --serif ); }
.tat-modul b { display: block; font: 500 17px var( --serif ); color: var( --zloto-cieply ); }
.tat-modul span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: var( --tekst-slaby ); }

/* filtry + siatka */
.tat-filtry { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; padding: 16px 20px; border: 1px solid var( --wlos ); border-radius: 18px; background: var( --panel ); }
.tat-filtry__etyk { margin: 0 4px 0 0; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tat-filtry__etyk--dalej { margin-left: 12px; }
.tat-chip { padding: 7px 13px; border: 1px solid var( --wlos ); border-radius: 999px; background: transparent; color: var( --tekst ); font-size: 12px; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.tat-chip em { font-style: normal; margin-left: 6px; font-size: 10.5px; color: var( --tekst-slaby ); }
.tat-chip:hover { border-color: var( --obrys ); color: var( --tekst-mocny ); }
.tat-chip.jest-wybrany { border-color: var( --jade ); background: rgba( 124, 197, 164, .14 ); color: #d5ece2; }
.tat-filtry__zeruj { margin-left: auto; border: 0; background: none; color: var( --zloto-etyk ); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.tat-siatka { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 16px; margin: 24px 0 0; }
.tat-kafel { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var( --wlos ); border-radius: 18px; background: var( --panel ); backdrop-filter: blur( 10px ); text-align: left; color: inherit; cursor: pointer; transition: border-color .22s, transform .22s, box-shadow .22s; }
.tat-kafel::before { content: ''; position: absolute; left: 20px; right: 20px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient( 90deg, transparent, var( --nic ), transparent ); opacity: .85; }
.tat-kafel:hover { border-color: var( --obrys ); transform: translateY( -3px ); box-shadow: 0 18px 40px rgba( 0, 0, 0, .45 ); }
.tat-kafel:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }
.tat-kafel__glowa { display: flex; align-items: center; gap: 12px; }
.tat-kafel__glif { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1px var( --wlos ); font-size: 20px; color: var( --nic ); }
.tat-kafel__oryg { font-size: 22px; line-height: 1.2; color: var( --zloto ); overflow-wrap: anywhere; }
.tat-kafel__nazwa { margin: 0; font: 500 22px/1.1 var( --serif ); color: var( --zloto-cieply ); }
.tat-kafel__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tat-kafel__meta span { padding: 3px 9px; border: 1px solid var( --wlos ); border-radius: 999px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tat-kafel__meta .jest-typ { border-color: color-mix( in srgb, var( --nic ) 45%, transparent ); color: var( --nic ); }
.tat-kafel__lead { margin: 0; font-size: 13.5px; line-height: 1.6; color: var( --tekst ); }
.tat-kafel__stopa { margin-top: auto; padding-top: 10px; border-top: 1px solid var( --wlos ); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tat-pusto { grid-column: 1 / -1; padding: 40px; border: 1px dashed var( --wlos ); border-radius: 20px; text-align: center; color: var( --tekst-slaby ); }
.tat-pow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 52px 0 0; padding-top: 22px; border-top: 1px solid var( --wlos ); font-size: 12.5px; color: var( --tekst-slaby ); }
.tat-pow a { padding: 6px 14px; border: 1px solid var( --wlos ); border-radius: 999px; color: var( --zloto-etyk ); text-decoration: none; }
.tat-pow a:hover { border-color: var( --obrys ); color: var( --zloto ); }

/* okno */
.tat-tlo { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 28px; background: rgba( 4, 3, 12, .72 ); backdrop-filter: blur( 14px ); opacity: 0; transition: opacity .22s; }
.tat-tlo.jest-widoczne { opacity: 1; }
.tat-okno { --zloto: #fde291; --zloto-cieply: #f9d57a; --zloto-etyk: #cda474; --jade: #7cc5a4; --cynober: #c8412f; --tekst: #b3b1c2; --tekst-slaby: #9393a7; --tekst-mocny: #e6e2ea; --wlos: rgba( 230, 196, 138, .14 ); --obrys: rgba( 230, 196, 138, .3 ); --serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif;
	position: relative; width: min( 1040px, 100% ); max-height: min( 88vh, 940px ); overflow: auto; padding: 40px 44px 44px; border: 1px solid var( --obrys ); border-radius: 24px; background: linear-gradient( 180deg, rgba( 16, 12, 40, .97 ), rgba( 7, 5, 22, .98 ) ); box-shadow: 0 40px 90px rgba( 0, 0, 0, .6 ); color: var( --tekst ); font: 300 18px var( --sans ); transform: translateY( 14px ); transition: transform .22s; }
.tat-tlo.jest-widoczne .tat-okno { transform: none; }
.tat-okno__x { position: absolute; right: 18px; top: 18px; width: 38px; height: 38px; border: 1px solid var( --wlos ); border-radius: 50%; background: rgba( 7, 5, 22, .6 ); color: var( --zloto-etyk ); font-size: 17px; cursor: pointer; z-index: 1; }
.tat-okno__glowa { display: grid; grid-template-columns: 104px minmax( 0, 1fr ); gap: 22px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var( --wlos ); }
.tat-okno__medal { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; box-shadow: inset 0 0 0 1px var( --wlos ); background: radial-gradient( circle at 50% 30%, color-mix( in srgb, var( --nic, #fde291 ) 24%, transparent ), transparent 65% ); font-size: 40px; line-height: 1.2; color: var( --zloto ); text-align: center; overflow-wrap: anywhere; padding: 6px; }
.tat-okno__nad { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tat-okno__tytul { margin: 0; font: 500 40px/1.06 var( --serif ); color: var( --zloto-cieply ); }
.tat-okno__tytul span { display: block; margin-top: 6px; font: 300 13px var( --sans ); letter-spacing: .18em; text-transform: uppercase; color: var( --nic, var( --jade ) ); }
.tat-okno__lead { margin: 18px 0 0; font: 300 19px/1.7 var( --serif ); color: var( --tekst-mocny ); }
.tat-okno__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.tat-okno__meta span { padding: 5px 12px; border: 1px solid var( --wlos ); border-radius: 999px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tat-okno__siatka { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 20px; margin: 26px 0 0; }
.tat-blok { padding: 20px 22px; border: 1px solid var( --wlos ); border-radius: 16px; background: rgba( 255, 255, 255, .02 ); }
.tat-blok h4 { margin: 0 0 10px; font: 400 12px var( --sans ); letter-spacing: .24em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tat-blok p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.74; color: var( --tekst ); }
.tat-blok p:last-child { margin-bottom: 0; }
.tat-blok--szeroki { grid-column: 1 / -1; }
.tat-blok--uczciwie { border-color: rgba( 200, 65, 47, .4 ); background: rgba( 200, 65, 47, .06 ); }
.tat-blok--uczciwie h4 { color: #e3603f; }
.tat-ciekawostka { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 0; padding: 16px 20px; border-left: 2px solid var( --jade ); border-radius: 0 14px 14px 0; background: rgba( 124, 197, 164, .1 ); font-size: 14.5px; line-height: 1.7; color: #d8ece7; }
.tat-ciekawostka i { font-style: normal; color: var( --jade ); }
.tat-okno__pow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tat-okno__pow span { padding: 5px 12px; border: 1px solid var( --wlos ); border-radius: 999px; letter-spacing: .06em; text-transform: none; font-size: 12.5px; color: var( --tekst ); }
.tat-okno__akcje { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var( --wlos ); }
.tat-btn { height: 44px; padding: 0 24px; border: 1px solid var( --zloto-ciemne ); border-radius: 999px; background: linear-gradient( 180deg, rgba( 253, 226, 145, .16 ), rgba( 253, 226, 145, .05 ) ); color: var( --zloto ); font: 400 11px var( --sans ); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; }
.tat-btn--cichy { border-color: var( --wlos ); background: none; color: var( --tekst-slaby ); }
.tat-btn--cichy:hover { border-color: var( --obrys ); color: var( --tekst-mocny ); }

@media ( max-width: 1280px ) {
	.tat-szlak__stacje { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.tat-szlak__nic { display: none; }
	.tat-moduly, .tat-siatka { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}
@media ( max-width: 860px ) {
	.tat-strona { padding: 0 20px 70px; }
	.tat-hero { padding-top: 30px; text-align: left; }
	.tat-szlak__stacje { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.tat-moduly, .tat-siatka { grid-template-columns: minmax( 0, 1fr ); }
	.tat-okno { padding: 30px 20px; }
	.tat-okno__glowa { grid-template-columns: 72px minmax( 0, 1fr ); gap: 16px; }
	.tat-okno__medal { width: 72px; height: 72px; font-size: 26px; }
	.tat-okno__tytul { font-size: 30px; }
	.tat-okno__siatka { grid-template-columns: minmax( 0, 1fr ); }
	.tat-filtry__etyk--dalej { margin-left: 0; }
}
@media ( prefers-reduced-motion: reduce ) { .tat-kafel, .tat-stacja, .tat-modul, .tat-tlo, .tat-okno { transition: none; } }

/* ── tor kafli (jak na /mantry/): jeden pas zamiast wielu rzędów ── */
.tat-tor { position: relative; margin: 26px 0 10px; min-width: 0; contain: inline-size; }
.tat-tor__pas { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 2px 10px; margin: -4px -2px -10px; cursor: grab; scroll-behavior: smooth; }
.tat-tor__pas::-webkit-scrollbar { display: none; }
.tat-tor__pas.jest-ciagniety { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.tat-tor__pas > .tat-kafel { flex: 0 0 calc( ( 100% - 3 * 16px ) / 4 ); min-width: 0; scroll-snap-align: start; }
.tat-tor__strz { position: absolute; top: 0; bottom: 22px; z-index: 2; display: grid; place-items: center; width: 62px; border: 0; background: linear-gradient( 90deg, var( --tlo ) 26%, rgba( 6, 7, 22, .82 ) 62%, rgba( 6, 7, 22, 0 ) ); color: var( --zloto-etyk ); cursor: pointer; }
.tat-tor__strz::before { content: ''; width: 13px; height: 13px; margin-left: 6px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate( -45deg ); }
.tat-tor__strz--lewo { left: -8px; } .tat-tor__strz--prawo { right: -8px; transform: scaleX( -1 ); }
.tat-tor__strz:hover { color: var( --zloto ); }
.tat-tor__strz[hidden] { display: none; }
.tat-tor__licznik { position: absolute; right: 4px; bottom: -14px; margin: 0; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --tekst-slaby ); }
@media ( max-width: 1280px ) { .tat-tor__pas > .tat-kafel { flex-basis: calc( ( 100% - 2 * 16px ) / 3 ); } }
@media ( max-width: 860px ) { .tat-tor__pas > .tat-kafel { flex-basis: 82%; } .tat-tor__strz { display: none; } }

.tat-tor--moduly .tat-tor__pas > .tat-modul { flex: 0 0 calc( ( 100% - 3 * 16px ) / 4 ); min-width: 0; scroll-snap-align: start; }
@media ( max-width: 1280px ) { .tat-tor--moduly .tat-tor__pas > .tat-modul { flex-basis: calc( ( 100% - 16px ) / 2 ); } }
@media ( max-width: 860px ) { .tat-tor--moduly .tat-tor__pas > .tat-modul { flex-basis: 86%; } }

/* Wizerunek hasła. Atlas nie ma własnych grafik — sięga po te, które moduły
   Wschodu już mają. Hasła bez pliku (pojęcia: tao, qi, bardo, sema) zostają
   przy glifie i to jest zamierzone: postać ma twarz, pojęcie ma znak. */
.tat-kafel__foto { margin: -20px -20px 0; border-radius: 17px 17px 0 0; overflow: hidden; aspect-ratio: 1 / 1; background: rgba( 0, 0, 0, .35 ); }
.tat-kafel__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tat-kafel__foto--glif { display: grid; place-items: center; background: linear-gradient( 160deg, rgba( 255, 255, 255, .045 ), rgba( 0, 0, 0, .25 ) ); }
.tat-kafel__foto--glif span { font-size: 96px; line-height: 1; color: var( --zloto-cieply ); opacity: .5; text-shadow: 0 0 40px rgba( 0, 0, 0, .6 ); }


/* ═══ OPRAWA 2026-09-11 — po zaostrzonym teście: tła, poświata, przejścia, ozdobniki, okno ≥18 px ═══ */
.tat-blok p { font: 300 18px/1.72 var( --serif ); color: var( --tekst-mocny ); }
.tat-sekcja--tlo { background-image: linear-gradient( rgba( 7, 5, 22, .82 ), rgba( 7, 5, 22, .92 ) ), var( --tlo ); background-size: cover; background-position: center; padding: 48px 32px; border: 1px solid var( --wlos ); border-radius: 22px; }
.tat-hero.tat-sekcja--tlo { max-width: none; padding: 72px 32px 40px; background-image: linear-gradient( 90deg, rgba( 7, 5, 22, .92 ), rgba( 7, 5, 22, .55 ) 60%, rgba( 7, 5, 22, .3 ) ), var( --tlo ); background-size: cover; background-position: center; border: 0; border-radius: 0; text-align: left; }
.tat-hero.tat-sekcja--tlo > * { max-width: 900px; margin-left: 0; }
.tat-szlak { background-image: linear-gradient( 180deg, rgba( 124, 197, 164, .07 ), rgba( 7, 5, 22, 0 ) 70% ); }
.tat-sekcja:not( .tat-sekcja--tlo ) { background-image: linear-gradient( 180deg, rgba( 230, 196, 138, .05 ), rgba( 7, 5, 22, 0 ) 60% ); }
.tat-kafel:hover, .tat-kafel:focus-visible { box-shadow: 0 18px 40px rgba( 0, 0, 0, .45 ), 0 0 0 1px rgba( 253, 226, 145, .35 ), 0 0 36px rgba( 253, 226, 145, .2 ); }
.tat-modul:hover, .tat-modul:focus-visible { box-shadow: 0 12px 30px rgba( 0, 0, 0, .4 ), 0 0 28px rgba( 253, 226, 145, .18 ); }
.tat-stacja:hover, .tat-stacja:focus-visible { box-shadow: 0 0 30px color-mix( in srgb, var( --nic, #fde291 ) 35%, transparent ); }
.tat-ozdoba { display: flex; justify-content: center; margin: 56px 0 -24px; pointer-events: none; }
.tat-ozdoba img { width: min( 520px, 70% ); height: auto; filter: drop-shadow( 0 0 18px rgba( 253, 226, 145, .35 ) ); opacity: .92; }
@media ( prefers-reduced-motion: reduce ) { .tat-kafel, .tat-modul, .tat-stacja { transition: none; } }

/* POŚWIATA W SPOCZYNKU — dyrektywa o glow dotyczy tytułów i paneli, nie tylko stanu :hover. */
.tat-tytul, .tat-sekcja__tytul { text-shadow: 0 0 28px rgba( 253, 226, 145, .28 ), 0 2px 18px rgba( 0, 0, 0, .5 ); }
.tat-kafel { box-shadow: 0 10px 28px rgba( 0, 0, 0, .35 ), 0 0 0 1px rgba( 253, 226, 145, .08 ), 0 0 22px rgba( 253, 226, 145, .07 ); }


/* ═══ SUWAK KRĘGU — słoty z poświatą, kropki z podpisem, świecąca gałka ═══ */
.tat-wybor { margin: 18px 0 0; padding: 26px 28px 14px; border: 1px solid var( --wlos ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 230, 196, 138, .05 ), rgba( 7, 5, 22, 0 ) ), var( --panel ); position: relative; }
.tat-wybor__tor { position: relative; display: flex; justify-content: space-between; align-items: flex-end; height: 64px; padding: 0 12px; }
/* linia toru */
.tat-wybor__tor::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: 9px; height: 2px; border-radius: 2px; background: linear-gradient( 90deg, rgba( 230, 196, 138, .12 ), rgba( 230, 196, 138, .45 ), rgba( 230, 196, 138, .12 ) ); box-shadow: 0 0 14px rgba( 230, 196, 138, .18 ); }
.tat-wybor__slot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 0; padding: 0; border: 0; background: transparent; color: var( --tekst-slaby ); cursor: pointer; overflow: visible; }
.tat-wybor__slot b { white-space: nowrap; font: 300 12px var( --sans ); letter-spacing: .16em; text-transform: uppercase; transition: color .25s, text-shadow .25s; }
.tat-wybor__slot i { display: block; width: 12px; height: 12px; border-radius: 50%; background: color-mix( in srgb, var( --nic ) 55%, #0a0820 ); box-shadow: 0 0 0 3px rgba( 7, 5, 22, .9 ), 0 0 10px color-mix( in srgb, var( --nic ) 45%, transparent ); transition: transform .25s, box-shadow .25s; }
.tat-wybor__slot:hover b, .tat-wybor__slot:focus-visible b { color: var( --zloto-cieply ); }
.tat-wybor__slot:hover i { transform: scale( 1.25 ); box-shadow: 0 0 0 3px rgba( 7, 5, 22, .9 ), 0 0 18px var( --nic ); }
.tat-wybor__slot.jest b { color: var( --nic ); text-shadow: 0 0 18px color-mix( in srgb, var( --nic ) 55%, transparent ); }
.tat-wybor__slot.jest i { background: var( --nic ); box-shadow: 0 0 0 3px rgba( 7, 5, 22, .9 ), 0 0 22px var( --nic ); }
.tat-wybor__slot:focus-visible { outline: none; }
.tat-wybor__slot:focus-visible i { box-shadow: 0 0 0 3px rgba( 7, 5, 22, .9 ), 0 0 0 5px var( --zloto ), 0 0 22px var( --nic ); }
/* gałka: pozycja z --poz, barwa z --nic; jedzie po torze płynnie */
.tat-wybor__galka { position: absolute; z-index: 0; /* pozycja przez transform z JS — przejscie na `left` z calc()+var() nie ruszalo galki (zmierzone) */ left: 0; bottom: -3px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient( circle at 40% 35%, #fff9e6, var( --nic, #e6c48a ) 55%, color-mix( in srgb, var( --nic, #e6c48a ) 40%, #0a0820 ) ); box-shadow: 0 0 0 2px rgba( 7, 5, 22, .95 ), 0 0 0 4px color-mix( in srgb, var( --nic, #e6c48a ) 40%, transparent ), 0 0 34px var( --nic, #e6c48a ); transform: translateX( 12px ); transition: transform .38s cubic-bezier( .2, .8, .2, 1 ), background .38s, box-shadow .38s; pointer-events: none; }
/* przezroczysty suwak NA torze: ciągnięcie i klik; słoty zostają dla klawiatury */
.tat-wybor__suwak { position: absolute; z-index: 2; left: 0; right: 0; bottom: -8px; width: 100%; height: 36px; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent; }
.tat-wybor__suwak::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; }
.tat-wybor__suwak::-moz-range-thumb { width: 30px; height: 30px; border: 0; }
.tat-wybor__suwak:focus-visible { opacity: 0; }
.tat-wybor__pod { margin: 20px 0 0; font-size: 12.5px; letter-spacing: .04em; color: var( --tekst-slaby ); text-align: center; }
@media ( max-width: 760px ) { .tat-wybor__slot b { font-size: 10px; letter-spacing: .08em; } .tat-wybor { padding: 22px 12px 12px; } }
@media ( prefers-reduced-motion: reduce ) { .tat-wybor__galka, .tat-wybor__slot i, .tat-wybor__slot b { transition: none; } }

/* [hidden] MUSI WYGRYWAĆ Z display:flex. Kafel ma display:flex z arkusza, a atrybut
   hidden daje tylko display:none z arkusza przeglądarki — reguła autorska bije go
   i filtr NIE CHOWAŁ NICZEGO: 49 kafli z hidden stało w torze, licznik mówił „z 13".
   Zmierzone 2026-09-11 po zgłoszeniu Przema „kropka chodzi, ale nie zmienia bogów". */
.tat-kafel[hidden], .tat-modul[hidden] { display: none !important; }


/* ═══ GRUPY KRĘGÓW (Azja / Bliski Wschód) ═══ */
.tat-wybor__grupy { display: flex; justify-content: center; gap: 6px; margin: -8px 0 14px; }
.tat-wybor__grupa { padding: 7px 16px; border: 1px solid var( --wlos ); border-radius: 999px; background: transparent; color: var( --tekst-slaby ); font: 300 12px var( --sans ); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s, box-shadow .2s, background .2s; }
.tat-wybor__grupa:hover { color: var( --zloto-cieply ); border-color: var( --obrys ); }
.tat-wybor__grupa.jest { color: var( --zloto-cieply ); border-color: var( --zloto ); background: rgba( 230, 196, 138, .08 ); box-shadow: 0 0 22px rgba( 253, 226, 145, .18 ); }
.tat-wybor__grupa:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 2px; }

/* ═══ SUWAK EPOKI ═══ */
.tat-epoka { margin: 22px 0 0; padding: 18px 12px 6px; border-top: 1px solid var( --wlos ); }
.tat-epoka__gora { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.tat-epoka__etyk { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tat-epoka__rok { font: 400 30px/1 var( --serif ); color: var( --zloto-cieply ); text-shadow: 0 0 22px rgba( 253, 226, 145, .3 ); }
.tat-epoka__zeruj { margin-left: auto; padding: 6px 12px; border: 1px solid var( --obrys ); border-radius: 999px; background: transparent; color: var( --zloto-etyk ); font: 300 11px var( --sans ); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.tat-epoka__zeruj:hover, .tat-epoka__zeruj:focus-visible { color: var( --zloto-cieply ); box-shadow: 0 0 18px rgba( 253, 226, 145, .2 ); outline: none; }
.tat-epoka__suwak { width: 100%; height: 26px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.tat-epoka__suwak::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient( 90deg, rgba( 230, 196, 138, .18 ), var( --zloto ) ); }
.tat-epoka__suwak::-moz-range-track { height: 3px; border-radius: 2px; background: linear-gradient( 90deg, rgba( 230, 196, 138, .18 ), var( --zloto ) ); }
.tat-epoka__suwak::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -9.5px; border-radius: 50%; background: #fff6dc; border: 2px solid var( --zloto ); box-shadow: 0 0 0 4px rgba( 253, 226, 145, .16 ), 0 0 22px rgba( 253, 226, 145, .45 ); }
.tat-epoka__suwak::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff6dc; border: 2px solid var( --zloto ); box-shadow: 0 0 0 4px rgba( 253, 226, 145, .16 ), 0 0 22px rgba( 253, 226, 145, .45 ); }
.tat-epoka__suwak:focus-visible { outline: none; }
.tat-epoka__skala { display: flex; justify-content: space-between; margin-top: 2px; }
.tat-epoka__skala button { flex: 1 1 0; padding: 4px 0; border: 0; background: transparent; color: var( --tekst-slaby ); font: 300 11px var( --sans ); letter-spacing: .04em; cursor: pointer; transition: color .2s; }
.tat-epoka__skala button:first-child { text-align: left; } .tat-epoka__skala button:last-child { text-align: right; }
.tat-epoka__skala button.jest, .tat-epoka__skala button:hover { color: var( --zloto-cieply ); }
.tat-epoka__pod { margin: 8px 0 0; font-size: 12.5px; letter-spacing: .03em; color: var( --tekst-slaby ); text-align: center; }
.tat-kafel__epoka { display: inline-block; margin: 2px 0 0; font: 300 11px var( --sans ); letter-spacing: .12em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tat-okno__epoka { margin: 10px 0 0; font: 300 12px var( --sans ); letter-spacing: .16em; text-transform: uppercase; color: var( --zloto-etyk ); }
@media ( max-width: 760px ) { .tat-epoka__skala button:nth-child( even ) { visibility: hidden; } }


/* ═══ PASEK MIEJSC: dwa rzędy, JEDEN wybór ═══
   Zakładki „Azja / Bliski Wschód" usunięte — były przełącznikiem między
   dwoma listami, a to są po prostu miejsca na jednej mapie. Drugi rząd
   nie ma już „Wszystkich" (jedno na oba) i nie jest chowany. */
.tat-wybor__tor + .tat-wybor__tor { margin-top: 4px; }
.tat-wybor__tor[hidden] { display: none !important; }
.tat-wybor__galka[hidden] { display: none !important; }
.tat-wybor__tor { height: 58px; }

/* OKNO TEZY — przejscie tonalne.
   Wspolna warstwa daje oknu tezy plaska pobialke rgba(255,255,255,.028)
   regulami o swoistosci 0,2,0 i 0,3,0 — jedna wartosc dla wszystkich dzialow
   naraz. Dublowana klasa daje 0,4,0 i zamyka sprawe bez !important.
   Barwy sa z palety TEGO dzialu. Dopisane po stronie SERWERA, bo lokalna
   kopia modulu bywa starsza niz wgrana. */
.tat-strona .tat-hero .tat-okno.zd-okno,
.tat-strona .tat-hero .zd-okno.zd-okno,
.tat-strona .tat-hero .tat-okno.tat-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 10, 10, 34, .10 ), transparent 70% ),
		linear-gradient( 168deg, #111221, #060716 );
}