/* Atlas bóstw Indii. Tokeny serwisu; akcent: szafran. Podpisem strony jest klucz,
   więc znaczki i karty mają być czytelne, a nie ozdobne. Miara: 1520 px treści. */
.tbo-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; --szafran: #e8964a;
	--tekst: #b3b1c2; --tekst-slaby: #9393a7; --tekst-mocny: #e6e2ea;
	--serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif; --dev: 'Noto Serif Devanagari', Georgia, serif;
	position: relative; max-width: 1520px; margin: 0 auto; padding: 0 40px 90px; color: var( --tekst ); font: 300 15px var( --sans );
	background: radial-gradient( 1200px 620px at 50% -10%, rgba( 90, 60, 160, .24 ), transparent 70% ), radial-gradient( 900px 520px at 86% 34%, rgba( 232, 150, 74, .08 ), transparent 70% ), var( --tlo ); overflow-x: clip;
}
.tbo-strona *, .tbo-strona *::before, .tbo-strona *::after { box-sizing: border-box; }
body:has( .tbo-strona ) .wp-site-blocks > header, body:has( .tbo-strona ) header.wp-block-template-part, body:has( .tbo-strona ) .wp-site-blocks > footer, body:has( .tbo-strona ) footer.wp-block-template-part, body:has( .tbo-strona ) .wp-block-post-title { display: none !important; }
body:has( .tbo-strona ) .wp-site-blocks, body:has( .tbo-strona ) .wp-block-group, body:has( .tbo-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tbo-strona ) .wp-block-post-content > *, body:has( .tbo-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tbo-strona ) { background: #060716; }
body:has( .tbo-strona ) .wp-block-post-content > .tbo-strona, body:has( .tbo-strona ) .entry-content > .tbo-strona, .tbo-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tbo-strona button { font-family: inherit; }

.tbo-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 ); }
.tbo-sciezka i { font-style: normal; color: var( --zloto-ciemne ); } .tbo-sciezka b { font-weight: 400; color: var( --zloto ); }
.tbo-poziom { display: flex; gap: 8px; margin: 0 0 0 auto; }
.tbo-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 ); }
.tbo-poziom span::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var( --jade ); box-shadow: 0 0 10px var( --jade ); }

.tbo-hero { max-width: 80ch; padding: 44px 0 8px; }
.tbo-nad { margin: 0 0 12px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tbo-tytul { margin: 0; font: 500 clamp( 46px, 5.4vw, 80px )/1.03 var( --serif ); color: var( --zloto-cieply ); }
.tbo-tytul small { display: block; margin-top: 8px; font: 300 16px var( --sans ); letter-spacing: .14em; color: var( --szafran ); }
.tbo-lead { margin: 22px 0 0; font-size: 16.5px; line-height: 1.75; color: var( --tekst-mocny ); }

.tbo-sekcja { margin: 76px 0 0; }
.tbo-sekcja--scisla { position: relative; margin-top: 44px; padding: 34px 30px 30px; border: 1px solid var( --wlos ); border-radius: 26px; background: radial-gradient( 900px 420px at 18% 0%, rgba( 232, 150, 74, .1 ), transparent 65% ), radial-gradient( 700px 400px at 88% 100%, rgba( 143, 168, 216, .08 ), transparent 65% ), linear-gradient( 180deg, rgba( 14, 12, 34, .8 ), rgba( 6, 7, 22, .92 ) ); box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 ); }
.tbo-sekcja__nad { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tbo-sekcja__tytul { margin: 0; font: 500 clamp( 28px, 3vw, 40px )/1.15 var( --serif ); color: var( --zloto-cieply ); }
.tbo-sekcja__lead { max-width: 78ch; margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var( --tekst ); }

/* ────────────────────────────────  klucz  ──────────────────────────────── */
.tbo-klucz { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 430px ); gap: 34px; align-items: start; margin: 30px 0 0; }
.tbo-klucz__wybor { min-width: 0; }
.tbo-klucz__grupa { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tbo-klucz__grupa span { font-size: 10.5px; color: var( --tekst-slaby ); }
.tbo-klucz__grupa:not( :first-child ) { margin-top: 26px; }
.tbo-znaczki { display: flex; flex-wrap: wrap; gap: 8px; }
.tbo-znaczek { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid var( --wlos ); border-radius: 12px; background: rgba( 10, 10, 34, .5 ); color: var( --tekst ); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.tbo-znaczek__nazwa { font: 400 15px var( --serif ); letter-spacing: .01em; }
.tbo-znaczek__ile { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: rgba( 230, 196, 138, .1 ); font-size: 10.5px; color: var( --zloto-etyk ); text-align: center; }
.tbo-znaczek:hover { border-color: var( --obrys ); color: var( --tekst-mocny ); }
.tbo-znaczek.jest-wybrany { border-color: var( --szafran ); background: rgba( 232, 150, 74, .13 ); color: var( --zloto-cieply ); }
.tbo-znaczek.jest-wybrany .tbo-znaczek__ile { background: rgba( 232, 150, 74, .22 ); color: var( --szafran ); }
.tbo-znaczek.jest-pusty { opacity: .42; }
.tbo-znaczek:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }
.tbo-zeruj { margin-top: 22px; padding: 10px 20px; border: 1px solid var( --obrys ); border-radius: 999px; background: none; color: var( --zloto-cieply ); font-size: 12px; letter-spacing: .12em; cursor: pointer; }
.tbo-zeruj[hidden] { display: none; }

.tbo-klucz__opis { position: sticky; top: 92px; min-height: 300px; padding: 28px 30px; border: 1px solid var( --wlos ); border-top: 2px solid rgba( 232, 150, 74, .5 ); border-radius: 3px 3px 20px 20px; background: var( --panel ); backdrop-filter: blur( 10px ); }
.tbo-opis__nad { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var( --szafran ); }
.tbo-opis__nazwa { margin: 0; font: 500 30px/1.06 var( --serif ); color: var( --zloto-cieply ); }
.tbo-opis__nazwa small { display: block; margin-top: 6px; font: 400 20px var( --dev ); color: var( --szafran ); }
.tbo-opis__zwierze { margin: 8px 0 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tbo-opis__krotko { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var( --tekst-mocny ); }
.tbo-opis__tresc p { margin: 14px 0 0; font-size: 14px; line-height: 1.72; color: var( --tekst ); }
.tbo-opis__kto { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var( --wlos ); display: flex; flex-wrap: wrap; gap: 8px; }
.tbo-opis__kto .tbo-opis__nad { flex: 0 0 100%; margin-bottom: 4px; }
.tbo-opis__zacheta { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: var( --tekst-slaby ); }
.tbo-odsyl { padding: 7px 14px; border: 1px solid var( --wlos ); border-radius: 999px; background: none; color: var( --zloto-cieply ); font: 400 15px var( --serif ); cursor: pointer; transition: border-color .2s; }
.tbo-odsyl:hover { border-color: var( --obrys ); }
.tbo-odsyl:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

/* ─────────────────────────────  karty postaci  ───────────────────────────── */
.tbo-rodziny { display: flex; flex-wrap: wrap; gap: 16px; margin: 22px 0 0; }
.tbo-rodzina { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tbo-rodzina::before { content: ''; width: 22px; height: 3px; border-radius: 2px; background: var( --k ); }
.tbo-rodzina b { font-weight: 400; color: var( --tekst ); }
.tbo-rodzina i { font-style: normal; color: var( --zloto-etyk ); }

.tbo-siatka { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 22px 0 0; padding: 12px 4px 22px; cursor: grab; scroll-behavior: smooth; }
.tbo-siatka::-webkit-scrollbar { display: none; }
.tbo-siatka.jest-ciagniety { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.tbo-tor { position: relative; min-width: 0; contain: inline-size; }
.tbo-tor__strz { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -30px; border: 1px solid rgba( 230, 196, 138, .34 ); border-radius: 50%; background: rgba( 6, 7, 22, .92 ); color: var( --zloto-etyk ); cursor: pointer; box-shadow: 0 10px 30px rgba( 0, 0, 0, .6 ); transition: color .2s, border-color .2s, box-shadow .2s; }
.tbo-tor__strz::before { content: ''; width: 11px; height: 11px; margin-left: 5px; border-left: 1.6px solid currentColor; border-top: 1.6px solid currentColor; transform: rotate( -45deg ); }
.tbo-tor__strz--lewo { left: -20px; }
.tbo-tor__strz--prawo { right: -20px; transform: scaleX( -1 ); }
.tbo-tor__strz:hover { color: var( --zloto ); border-color: var( --zloto ); box-shadow: 0 10px 36px rgba( 249, 213, 122, .26 ); }
.tbo-tor__strz[hidden] { display: none; }
.tbo-tor__licznik { position: absolute; right: 6px; bottom: -6px; margin: 0; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tbo-karta { position: relative; flex: 0 0 clamp( 210px, 19vw, 292px ); scroll-snap-align: start; display: block; padding: 0; border: 1px solid color-mix( in srgb, var( --k ) 42%, transparent ); border-radius: 18px; background: #05060f; overflow: hidden; cursor: pointer; aspect-ratio: 2 / 3; box-shadow: 0 18px 44px -18px rgba( 0, 0, 0, .95 ), inset 0 0 0 1px rgba( 255, 255, 255, .05 ); transition: transform .3s cubic-bezier( .2, .7, .3, 1 ), box-shadow .3s, border-color .3s, opacity .3s, filter .3s; }
.tbo-karta::after { content: ''; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba( 249, 213, 122, .16 ), inset 0 -70px 90px -60px color-mix( in srgb, var( --k ) 60%, transparent ); transition: box-shadow .3s; }
.tbo-karta:hover { transform: translateY( -10px ) scale( 1.02 ); border-color: color-mix( in srgb, var( --k ) 85%, transparent ); box-shadow: 0 34px 70px -20px rgba( 0, 0, 0, .95 ), 0 0 60px -12px color-mix( in srgb, var( --k ) 55%, transparent ); }
.tbo-karta:hover::after { box-shadow: inset 0 0 0 1px rgba( 249, 213, 122, .4 ), inset 0 -80px 110px -60px color-mix( in srgb, var( --k ) 75%, transparent ); }
.tbo-karta__pismo, .tbo-karta__nazwa, .tbo-karta__rodzina, .tbo-karta__krotko, .tbo-karta__znaki { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset( 50% ); white-space: nowrap; }
.tbo-karta:hover { border-color: var( --obrys ); transform: translateY( -3px ); box-shadow: 0 18px 40px rgba( 0, 0, 0, .45 ); }
.tbo-karta:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }
.tbo-karta.jest-przygaszony { opacity: .2; filter: saturate( .25 ); }
/* Kafel ze zdjęciem: kwadrat u góry, reszta jak dotąd. Najazd lekko rozjaśnia. */
.tbo-karta__foto { position: absolute; inset: 0; margin: 0; border-radius: 18px; overflow: hidden; background: #05060f; }
.tbo-karta__foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate( .92 ) brightness( .92 ); transition: transform .5s, filter .4s; }
.tbo-karta:hover .tbo-karta__foto img { transform: scale( 1.05 ); filter: saturate( 1.02 ) brightness( 1.04 ); }
.tbo-karta.ma-foto:hover .tbo-karta__foto img { transform: scale( 1.03 ); filter: saturate( 1 ); }
.tbo-karta.ma-foto .tbo-karta__pismo { margin-top: 0; }
.tbo-karta__pismo { margin: 0; font: 400 26px/1.3 var( --dev ); color: var( --k ); }
.tbo-karta__nazwa { margin: 2px 0 0; font: 500 24px/1.08 var( --serif ); color: var( --zloto-cieply ); }
.tbo-karta__rodzina { margin: 0; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var( --k ); }
.tbo-karta__krotko { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var( --tekst ); }
.tbo-karta__znaki { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var( --wlos ); }
.tbo-mini { padding: 3px 9px; border: 1px solid var( --wlos ); border-radius: 999px; font-size: 10.5px; letter-spacing: .06em; color: var( --tekst-slaby ); }
.tbo-mini--vahana { border-style: dashed; color: var( --zloto-etyk ); }

/* ───────────────────────────────  pasek roku  ─────────────────────────────── */
.tbo-rok { margin: 30px 0 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
.tbo-rok::-webkit-scrollbar { display: none; }
.tbo-rok__os { display: grid; grid-template-columns: repeat( 12, minmax( 112px, 1fr ) ); gap: 6px; align-items: start; }
.tbo-rok__kol { display: grid; gap: 10px; padding: 12px 8px 16px; border-top: 1px solid var( --wlos ); }
.tbo-rok__kol.jest-pusty { opacity: .5; }
.tbo-rok__mies { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tbo-rok__lista { display: grid; gap: 8px; }
.tbo-swieto { display: grid; gap: 3px; padding: 12px 12px 12px 14px; border: 1px solid var( --wlos ); border-left: 2px solid color-mix( in srgb, var( --k ) 60%, transparent ); border-radius: 3px 12px 12px 3px; background: rgba( 10, 10, 34, .55 ); text-align: left; cursor: pointer; transition: border-color .22s, transform .22s; }
.tbo-swieto:hover { border-color: var( --obrys ); border-left-color: var( --k ); transform: translateY( -2px ); }
.tbo-swieto:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }
.tbo-swieto__kropka { width: 9px; height: 9px; border: 1.5px solid var( --k ); border-radius: 999px; }
.tbo-swieto.jest-stale .tbo-swieto__kropka { background: var( --k ); box-shadow: 0 0 10px var( --k ); }
.tbo-swieto b { font: 500 15px/1.15 var( --serif ); color: var( --zloto-cieply ); }
.tbo-swieto small { font-size: 10.5px; line-height: 1.35; color: var( --tekst-slaby ); }
.tbo-rok__opis { max-width: 84ch; margin: 26px 0 0; font-size: 14.5px; line-height: 1.72; color: var( --tekst ); }

.tbo-ramy__siatka { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 16px; margin: 28px 0 0; }
.tbo-ramy__siatka > div { padding: 26px 28px; border: 1px solid var( --wlos ); border-radius: 18px; background: var( --panel ); }
.tbo-ramy__siatka i { display: block; margin-bottom: 10px; font: 400 24px var( --dev ); font-style: normal; color: var( --zloto-ciemne ); }
.tbo-ramy__siatka b { display: block; margin-bottom: 8px; font: 400 12px var( --sans ); letter-spacing: .2em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tbo-ramy__siatka p { margin: 0; font-size: 14px; line-height: 1.72; color: var( --tekst ); }
.tbo-ramy__siatka .jest-uczciwie { border-color: rgba( 124, 197, 164, .3 ); background: rgba( 124, 197, 164, .06 ); }
.tbo-ramy__siatka .jest-uczciwie b, .tbo-ramy__siatka .jest-uczciwie i { color: var( --jade ); }

/* ────────────────────────────────  okno  ──────────────────────────────── */
.tbo-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; }
.tbo-tlo.jest-widoczne { opacity: 1; }
.tbo-okno { --k: #cda474; --zloto: #fde291; --zloto-cieply: #f9d57a; --zloto-etyk: #cda474; --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; --dev: 'Noto Serif Devanagari', Georgia, serif;
	position: relative; width: min( 900px, 100% ); max-height: min( 88vh, 940px ); overflow: auto; padding: 40px 44px 44px; border: 1px solid var( --obrys ); border-top: 3px solid var( --k ); border-radius: 4px 4px 24px 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; }
.tbo-tlo.jest-widoczne .tbo-okno { transform: none; }
.tbo-okno *, .tbo-okno *::before, .tbo-okno *::after { box-sizing: border-box; }
.tbo-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; }
.tbo-okno__nad { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var( --k ); }
.tbo-okno__tytul { margin: 0; padding-right: 46px; font: 500 38px/1.06 var( --serif ); color: var( --zloto-cieply ); }
.tbo-pismo { display: block; margin-top: 6px; font: 400 26px var( --dev ); color: var( --k ); }
.tbo-okno__lead { margin: 16px 0 0; max-width: 82ch; font-size: 16px; line-height: 1.72; color: var( --tekst-mocny ); }
.tbo-okno__karta { float: right; width: min( 320px, 40% ); margin: 0 0 18px 26px; border: 1px solid var( --wlos ); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba( 0, 0, 0, .5 ); }
.tbo-okno__karta img { display: block; width: 100%; height: auto; }
.tbo-okno__znaki, .tbo-okno__swieta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.tbo-okno__swieta { margin: 0; }
.tbo-znak { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 15px; border: 1px solid var( --wlos ); border-radius: 999px; background: none; color: var( --zloto-cieply ); font: 400 15px var( --serif ); text-align: left; cursor: pointer; transition: border-color .2s; }
.tbo-znak small { font: 300 10.5px var( --sans ); letter-spacing: .1em; color: var( --tekst-slaby ); }
.tbo-znak:hover { border-color: var( --obrys ); }
.tbo-znak--vahana { border-style: dashed; }
.tbo-znak:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }
.tbo-blok { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var( --wlos ); }
.tbo-blok h4 { margin: 0 0 10px; font: 400 11px var( --sans ); letter-spacing: .26em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tbo-blok p { margin: 0 0 12px; max-width: 84ch; font-size: 15px; line-height: 1.75; color: var( --tekst ); }
.tbo-blok p:last-child { margin-bottom: 0; }
.tbo-blok--uwaga { padding: 18px 20px; border: 1px solid rgba( 232, 150, 74, .3 ); border-radius: 14px; background: rgba( 232, 150, 74, .07 ); }
.tbo-blok--uwaga h4 { color: var( --szafran, #e8964a ); }

@media ( max-width: 1240px ) {
	.tbo-siatka { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.tbo-klucz { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 360px ); gap: 24px; }
}
@media ( max-width: 1020px ) {
	.tbo-strona { padding: 0 24px 70px; }
	.tbo-klucz { grid-template-columns: minmax( 0, 1fr ); }
	.tbo-klucz__opis { position: static; min-height: 0; }
	.tbo-siatka { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.tbo-ramy__siatka { grid-template-columns: minmax( 0, 1fr ); }
	.tbo-okno { padding: 34px 26px 30px; }
	.tbo-okno__karta { float: none; width: 100%; max-width: 340px; margin: 18px 0 0; }
	.tbo-okno__tytul { font-size: 30px; }
}
@media ( max-width: 680px ) {
	.tbo-strona { padding: 0 16px 60px; }
	.tbo-siatka { grid-template-columns: minmax( 0, 1fr ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.tbo-karta, .tbo-swieto, .tbo-znaczek, .tbo-tlo, .tbo-okno { transition: none; }
}

/* ────────────────────  kręgi i powiązania (siatka)  ──────────────────── */
.tbo-kregi { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 400px ); gap: 30px; align-items: start; margin: 26px 0 0; }
.tbo-kregi__plotno { min-width: 0; }
.tbo-typy { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.tbo-typ { --k: var( --zloto-etyk ); display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var( --wlos ); border-radius: 999px; background: rgba( 10, 10, 34, .5 ); color: var( --tekst ); font-size: 11.5px; letter-spacing: .06em; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.tbo-typ::before { content: ''; width: 16px; height: 2px; border-radius: 2px; background: var( --k ); }
.tbo-typ i { font-style: normal; font-size: 10px; color: var( --tekst-slaby ); }
.tbo-typ:hover { border-color: var( --obrys ); color: var( --tekst-mocny ); }
.tbo-typ.jest-wybrany { border-color: color-mix( in srgb, var( --k ) 65%, transparent ); background: color-mix( in srgb, var( --k ) 14%, transparent ); color: var( --zloto-cieply ); }
.tbo-typ:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

.tbo-siatka-svg { border: 1px solid var( --wlos ); border-radius: 20px; background: radial-gradient( 700px 500px at 50% 40%, rgba( 20, 18, 52, .7 ), rgba( 6, 7, 22, .85 ) ); overflow: hidden; }
.tbo-siec__svg { display: block; width: 100%; height: auto; }
.tbo-skupisko__obw { fill: color-mix( in srgb, var( --k ) 5%, transparent ); stroke: color-mix( in srgb, var( --k ) 26%, transparent ); stroke-width: 1; stroke-dasharray: 4 6; }
.tbo-skupisko__nazwa { font: 400 15px 'Cormorant Garamond', Georgia, serif; letter-spacing: .1em; fill: color-mix( in srgb, var( --k ) 85%, #fff 10% ); text-anchor: middle; }

.tbo-linia { fill: none; stroke: color-mix( in srgb, var( --k ) 52%, transparent ); stroke-width: 1.4; transition: stroke .2s, stroke-width .2s, opacity .2s; }
.tbo-linia--szkolna { stroke-dasharray: 7 5; }
.tbo-linia--sporna { stroke-dasharray: 1.5 4.5; stroke-linecap: round; }
.tbo-linia.jest-aktywna { stroke: var( --k ); stroke-width: 2.6; }
.tbo-linia.jest-przygaszona { opacity: .1; }
.tbo-linia.jest-ukryta { display: none; }

.tbo-wezel { cursor: pointer; }
.tbo-wezel__kropka { fill: color-mix( in srgb, var( --k ) 55%, #0a0d24 ); stroke: var( --k ); stroke-width: 1.4; transition: fill .2s, r .2s; }
.tbo-wezel__nazwa { font: 400 12px 'Cormorant Garamond', Georgia, serif; fill: #cfccdb; text-anchor: middle; pointer-events: none; transition: fill .2s; }
.tbo-wezel:hover .tbo-wezel__kropka { fill: var( --k ); }
.tbo-wezel:hover .tbo-wezel__nazwa { fill: #fde291; }
.tbo-wezel.jest-wybrany .tbo-wezel__kropka { fill: #fde291; stroke: #fde291; }
.tbo-wezel.jest-wybrany .tbo-wezel__nazwa { fill: #fde291; font-size: 14px; }
.tbo-wezel.jest-sasiad .tbo-wezel__nazwa { fill: #e6e2ea; }
.tbo-wezel.jest-daleki { opacity: .3; }
.tbo-wezel:focus-visible .tbo-wezel__kropka { stroke: #fde291; stroke-width: 3; }

.tbo-kregi__legenda { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 0 0; font-size: 10.5px; letter-spacing: .1em; color: var( --tekst-slaby ); }
.tbo-pew { display: inline-flex; align-items: center; gap: 8px; }
.tbo-pew::before { content: ''; width: 30px; height: 0; border-top: 1.6px solid var( --zloto-etyk ); }
.tbo-pew--szkolna::before { border-top-style: dashed; }
.tbo-pew--sporna::before { border-top-style: dotted; border-top-width: 2.2px; }

.tbo-kregi__panel { position: sticky; top: 92px; min-height: 320px; padding: 26px 28px; border: 1px solid var( --wlos ); border-top: 2px solid rgba( 232, 150, 74, .5 ); border-radius: 3px 3px 20px 20px; background: var( --panel ); backdrop-filter: blur( 10px ); }
.tbo-panel__licz { display: flex; gap: 22px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var( --wlos ); }
.tbo-panel__licz span { display: grid; gap: 2px; }
.tbo-panel__licz b { font: 500 26px/1 'Cormorant Garamond', Georgia, serif; color: var( --zloto-cieply ); }
.tbo-panel__licz small { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var( --tekst-slaby ); }

/* Lista powiazan przewija sie w panelu. Zapas z prawej robi miejsce na nitke
   paska (`scrollbar-gutter: stable`, wiec nie skacze przy krotkiej liscie),
   a cien wpuszczony do srodka nie przewija sie razem z trescia i gasi dolna
   krawedz — dzieki temu przyciete kafle wygladaja na zamierzone. */
.tbo-relacje { display: grid; gap: 10px; margin: 18px 0 0; max-height: 520px; overflow-y: auto; scrollbar-gutter: stable; padding-right: 14px; box-shadow: inset 0 -34px 26px -28px rgba( 4, 3, 12, .96 ); }
.tbo-relacja { padding: 14px 16px; border: 1px solid var( --wlos ); border-left: 2px solid color-mix( in srgb, var( --k ) 60%, transparent ); border-radius: 3px 14px 14px 3px; background: rgba( 6, 7, 22, .5 ); }
.tbo-relacja__glowa { margin: 0; }
.tbo-relacja__glowa b { font: 500 15px/1.3 'Cormorant Garamond', Georgia, serif; color: var( --zloto-cieply ); }
.tbo-relacja__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.tbo-relacja__typ, .tbo-relacja__pew { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; }
.tbo-relacja__typ { color: var( --k ); }
.tbo-relacja__pew { color: var( --tekst-slaby ); }
.tbo-relacja--powszechna .tbo-relacja__pew { color: var( --jade ); }
.tbo-relacja--sporna .tbo-relacja__pew { color: #e8a074; }
.tbo-relacja__uwaga { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var( --tekst ); }
.tbo-relacja__skok { margin: 10px 0 0; padding: 0; border: 0; background: none; color: var( --zloto-etyk ); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.tbo-relacja__skok:hover { color: var( --zloto ); }
.tbo-ramy__siatka--trzy { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); margin-top: 26px; }

@media ( max-width: 1240px ) {
	.tbo-kregi { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 340px ); gap: 22px; }
	.tbo-ramy__siatka--trzy { grid-template-columns: minmax( 0, 1fr ); }
}
@media ( max-width: 1020px ) {
	.tbo-kregi { grid-template-columns: minmax( 0, 1fr ); }
	.tbo-kregi__panel { position: static; }
	.tbo-wezel__nazwa { font-size: 15px; }
	.tbo-skupisko__nazwa { font-size: 19px; }
}


/* ---------------------------------------------------------------------------
   TŁA SEKCJI

   Reguły trzymają się atrybutu data-tlo, który PHP dokłada dopiero wtedy,
   gdy plik naprawdę leży na serwerze. Dopóki grafiki nie ma, blok nie dostaje
   ani ramki, ani wypełnienia i wygląda dokładnie jak dziś — brak ma być cichy,
   a nie zostawiać pustej ramy.

   Obraz wchodzi WARSTWĄ właściwości background, nie przez ::before. Tych dwóch
   pseudoelementów używa wspólny zdobienia.css i nadpisanie ich zabrałoby blokom
   zdobienia reszty serwisu.

   Zmienna nazywa się --obraz-tla, a NIE --tlo: w większości arkuszy serwisu
   --tlo jest już barwą tła strony i nadpisanie jej psułoby kolory.
   --------------------------------------------------------------------------- */

.tbo-hero[data-tlo] {
	position: relative; max-width: none;
	padding: 64px 36px 52px; border-radius: 26px;
	border: 1px solid rgba( 255, 255, 255, .10 );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 );
	background:
		linear-gradient( 90deg, rgba( 12, 10, 14, .90 ) 0%, rgba( 12, 10, 14, .70 ) 34%, rgba( 12, 10, 14, .34 ) 64%, rgba( 12, 10, 14, 0 ) 100% ),
		var( --obraz-tla ) 50% 46% / cover no-repeat;
}
.tbo-hero[data-tlo] > * { max-width: 80ch; }

.tbo-sekcja[data-tlo] {
	position: relative;
	padding: 40px 36px 44px; border-radius: 26px;
	border: 1px solid rgba( 255, 255, 255, .10 );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .05 ), 0 40px 90px -50px rgba( 0, 0, 0, .95 );
	background:
		radial-gradient( 880px 500px at 12% 16%, rgba( 15, 13, 18, .62 ), transparent 74% ),
		linear-gradient( 180deg, rgba( 15, 13, 18, .10 ) 0%, rgba( 15, 13, 18, .22 ) 48%, rgba( 15, 13, 18, .48 ) 100% ),
		var( --obraz-tla ) 62% 52% / cover no-repeat;
}

@media ( max-width: 680px ) {
	.tbo-sekcja[data-tlo], .tbo-hero[data-tlo] { padding: 28px 20px 32px; border-radius: 18px; }
}

/* ---------------------------------------------------------------------------
   CZYTELNOSC NA TLE

   Kafle i klocki są z założenia przezroczyste — mają tło o kryciu 0,07,
   bo projektowano je na płaską barwę. Nad fotografią to przestaje działać:
   zmierzone na żywej stronie, tekst kafla nad jaśniejszym miejscem zdjęcia ma
   kontrast 1,23:1, czyli jest NIECZYTELNY. Zasłona na całej sekcji tego nie
   naprawia — z rachunku wychodzi, że musiałaby mieć krycie 0,80 i zabiłaby obraz.

   Dlatego czytelność niesie sam kafel, i tylko tam, gdzie pod spodem jest zdjęcie.
   Próg liczony w NAJGORSZYM przypadku, czyli nad czystą bielą, bo tła rozjaśniane
   gammą bywają jaśniejsze niż najjaśniejszy punkt oryginalnego zdjęcia. Próg 4,5:1
   wypada przy kryciu 0,845 — stąd 0,90, a nie 0,86, które miało zapas na granicy błędu.
   Przy 0,90 nad bielą: tekst 5,35:1, tytuł 12,80:1. Między kaflami obraz zostaje widoczny.
   --------------------------------------------------------------------------- */

.tbo-sekcja[data-tlo] .zd-pas > li,
.tbo-sekcja[data-tlo] .zd-klocek {
	background-color: rgba( 12, 10, 14, .90 );
	backdrop-filter: blur( 2px );
	border-color: rgba( 255, 255, 255, .16 );
	box-shadow: 0 18px 40px -26px rgba( 0, 0, 0, .9 );
}

/* 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. */
.tbo-strona .tbo-hero .tbo-okno.zd-okno,
.tbo-strona .tbo-hero .zd-okno.zd-okno,
.tbo-strona .tbo-hero .tbo-okno.tbo-okno {
	background:
		radial-gradient( 720px 240px at 42% 0%, rgba( 10, 10, 34, .10 ), transparent 70% ),
		linear-gradient( 168deg, #111221, #060716 );
}