/* Zi Wei Dou Shu — układ 1:1 z makietą „Purpurowa Gwiazda" (2026-09-06): czerń, czerwień, złoto, smok. */
.tzw-strona {
	--tlo: #07050a; --panel: rgba( 12, 8, 14, .86 ); --panel-mocny: rgba( 10, 6, 10, .94 );
	--obrys: rgba( 201, 162, 78, .55 ); --obrys-slaby: rgba( 201, 162, 78, .28 );
	--zloto: #f3d9a0; --zloto-cieply: #e9c77a; --zloto-ciemne: #c9a24e; --zloto-etyk: #cda474;
	--purpura: #c99cff; --purpura-ciemna: #7a4fc0; --lawenda: #b9a6d8;
	--czerwien: #b3332f; --czerwien-ciemna: #5a1420; --roz: #ec6470;
	--tekst: #c9c2c8; --tekst-slaby: #9a939e; --tekst-mocny: #efe9ea;
	--serif: 'Cormorant Garamond', 'Times New Roman', serif; --kapit: 'Cinzel', 'Cormorant Garamond', serif; --sans: 'Jost', system-ui, sans-serif; --cjk: 'Noto Serif SC', 'Noto Serif CJK SC', 'SimSun', serif;
	position: relative; margin: 0 auto; padding: 44px 150px 60px; color: var( --tekst ); font: 300 15px/1.6 var( --sans );
	background: linear-gradient( 180deg, rgba( 7, 5, 10, .25 ), rgba( 7, 5, 10, .6 ) 40%, rgba( 7, 5, 10, .85 ) ), var( --tlo-strony ) center top / 100% auto no-repeat, var( --tlo );
}
.tzw-strona * { box-sizing: border-box; }
body:has( .tzw-strona ) { background: #07050a; }
body:has( .tzw-strona ) .wp-site-blocks > header, body:has( .tzw-strona ) header.wp-block-template-part, body:has( .tzw-strona ) .wp-site-blocks > footer, body:has( .tzw-strona ) footer.wp-block-template-part, body:has( .tzw-strona ) .wp-block-post-title { display: none !important; }
body:has( .tzw-strona ) .wp-site-blocks, body:has( .tzw-strona ) .wp-block-group, body:has( .tzw-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tzw-strona ) .wp-block-post-content > *, body:has( .tzw-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tzw-strona ) .wp-block-post-content > .tzw-strona, body:has( .tzw-strona ) .entry-content > .tzw-strona, .tzw-strona { max-width: 1520px !important; margin-left: auto !important; margin-right: auto !important; }

/* narożniki strony jak w makiecie */
.tzw-strona::before, .tzw-strona::after { content: ''; position: absolute; top: 14px; width: 42px; height: 42px; border: 1px solid var( --obrys ); pointer-events: none; }
.tzw-strona::before { left: 14px; border-right: 0; border-bottom: 0; }
.tzw-strona::after { right: 14px; border-left: 0; border-bottom: 0; }

/* boczne napisy w pustych pasach */
.tzw-bok { position: absolute; width: 120px; margin: 0; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; line-height: 1.9; color: var( --zloto-etyk ); }
.tzw-bok--l { left: 34px; text-align: left; }
.tzw-bok--p { right: 34px; text-align: right; }
.tzw-bok--gora { top: 90px; }
.tzw-bok--dol { bottom: 60px; }
.tzw-bok b { display: block; margin: 0 0 18px; font: 400 32px/1.35 var( --cjk ); letter-spacing: .32em; color: var( --zloto ); writing-mode: vertical-rl; }
.tzw-bok--p b { margin-left: auto; }
.tzw-bok span { display: block; }
.tzw-pieczec { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-top: 12px; border: 1px solid var( --czerwien ); border-radius: 3px; font: 500 9px/1 var( --cjk ); letter-spacing: 0; color: var( --czerwien ); writing-mode: vertical-rl; text-transform: none; }
.tzw-bok--p .tzw-pieczec { margin-left: auto; }

/* hero */
.tzw-hero { position: relative; max-width: 760px; margin: 0 auto 40px; text-align: center; }
.tzw-nad { margin: 0 0 12px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tzw-nad i { font-style: normal; color: var( --zloto ); margin: 0 10px; }
.tzw-tytul { margin: 0; font: 500 clamp( 44px, 5.6vw, 76px )/1.02 var( --kapit ); letter-spacing: .06em; text-transform: uppercase; background: linear-gradient( 180deg, #f7e2b0, #e2bf78 55%, #c49a48 ); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.tzw-cjk { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 12px 0 18px; font: 400 30px var( --cjk ); letter-spacing: .5em; color: var( --purpura ); }
.tzw-cjk .tzw-pieczec { margin: 0; letter-spacing: 0; }
.tzw-lead { margin: 0 auto 14px; max-width: 62ch; font-size: 15.5px; line-height: 1.65; color: var( --tekst-mocny ); }
.tzw-uwaga { max-width: 60ch; margin: 0 auto; font-size: 12.5px; line-height: 1.6; color: var( --tekst-slaby ); }
.tzw-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 14px; align-items: end; max-width: 820px; margin: 24px auto 0; padding: 22px 24px; border: 1px solid var( --obrys ); border-radius: 16px; background: var( --panel ); text-align: left; }
.tzw-form[hidden] { display: none; }
.tzw-pole { display: grid; gap: 6px; }
.tzw-pole > span { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tzw-pole input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var( --obrys-slaby ); border-radius: 10px; background: rgba( 4, 2, 6, .7 ); color: var( --tekst-mocny ); font: 300 15px var( --sans ); color-scheme: dark; outline: none; }
.tzw-pole input:focus { border-color: var( --zloto-ciemne ); box-shadow: 0 0 0 3px rgba( 201, 162, 78, .18 ); }
.tzw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 30px; border: 1px solid var( --zloto-ciemne ); border-radius: 999px; background: linear-gradient( 180deg, rgba( 243, 217, 160, .14 ), rgba( 243, 217, 160, .03 ) ); color: var( --zloto ); font: 400 12px var( --sans ); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.tzw-btn:hover { background: rgba( 243, 217, 160, .2 ); box-shadow: 0 0 22px rgba( 243, 217, 160, .18 ); }
.tzw-btn--czerwony { border-color: rgba( 243, 217, 160, .7 ); background: linear-gradient( 180deg, #8a1f2c, #5a1420 ); color: var( --zloto ); box-shadow: 0 0 30px rgba( 179, 51, 47, .35 ); }
.tzw-btn--czerwony:hover { background: linear-gradient( 180deg, #a02635, #6a1826 ); box-shadow: 0 0 40px rgba( 179, 51, 47, .5 ); }
.tzw-btn--maly { height: 44px; padding: 0 34px; }
.tzw-blad { grid-column: 1 / -1; margin: 0; color: #f3a1a1; font-size: 13.5px; }
.tzw-blad[hidden] { display: none; }

/* plansza 4×4 */
.tzw-wynik { margin-top: 10px; }
.tzw-wynik[hidden] { display: none; }
.tzw-plansza { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); grid-template-rows: repeat( 4, minmax( 176px, auto ) ); gap: 14px; }
.tzw-palac { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; border: 1px solid var( --obrys-slaby ); border-radius: 12px; overflow: hidden; background: #0a0609; color: var( --tekst ); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.tzw-palac::before { content: ''; position: absolute; inset: 0; background: var( --tlo-strony ) var( --poz, 50% 50% ) / 320% auto no-repeat; filter: saturate( 1.55 ) contrast( 1.18 ) brightness( 1.08 ); }
.tzw-palac::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba( 8, 5, 10, .1 ), rgba( 8, 5, 10, .2 ) 50%, rgba( 8, 5, 10, .82 ) ); }
.tzw-palac:hover { border-color: var( --zloto-ciemne ); transform: translateY( -2px ); box-shadow: 0 16px 34px rgba( 0, 0, 0, .55 ); }
.tzw-palac:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 2px; }
.tzw-palac.jest-zycie { border-color: var( --zloto ); box-shadow: 0 0 0 1px rgba( 243, 217, 160, .35 ), 0 0 34px rgba( 243, 217, 160, .18 ); }
.tzw-palac__glowne { display: grid; gap: 2px; position: relative; z-index: 2; }
.tzw-palac__gwiazda { display: flex; align-items: baseline; gap: 12px; }
.tzw-palac__gwiazda b { font: 400 26px/1.15 var( --cjk ); color: var( --zloto ); text-shadow: 0 1px 6px rgba( 0, 0, 0, .9 ); }
.tzw-palac__gwiazda small { font-size: 12.5px; color: var( --tekst-mocny ); text-shadow: 0 1px 5px rgba( 0, 0, 0, .95 ); }
.tzw-palac__pusty { position: relative; z-index: 2; font: italic 400 14px var( --serif ); color: var( --tekst-slaby ); }
.tzw-palac__pomoc { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; font: 400 15px var( --cjk ); color: var( --purpura ); text-shadow: 0 1px 5px rgba( 0, 0, 0, .95 ); }
.tzw-palac__dol { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 8px; border-top: 1px solid rgba( 201, 162, 78, .22 ); }
.tzw-palac__nazwa { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var( --zloto-etyk ); }
.jest-zycie .tzw-palac__nazwa { color: var( --zloto ); }
.tzw-palac__gal { font: 400 18px var( --cjk ); color: var( --zloto-cieply ); }
.tzw-palac__cialo { position: absolute; right: 12px; top: 12px; z-index: 2; padding: 3px 10px; border: 1px solid rgba( 201, 156, 255, .7 ); border-radius: 999px; background: rgba( 122, 79, 192, .3 ); font-size: 11px; letter-spacing: .06em; color: var( --purpura ); }
.tzw-palac__hua { position: absolute; right: 12px; top: 12px; z-index: 2; }
.tzw-hua { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; border-radius: 5px; font: 400 13px var( --cjk ); font-style: normal; color: #1a1010; background: var( --zloto ); vertical-align: middle; }
.tzw-hua--權 { background: #f0a35a; } .tzw-hua--科 { background: #b98bff; } .tzw-hua--忌 { background: #f39aa4; }

/* środek */
.tzw-srodek { grid-row: 2 / 4; grid-column: 2 / 4; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 26px; border: 1px solid var( --obrys ); border-radius: 14px; background: radial-gradient( circle at 50% 42%, rgba( 120, 22, 36, .55 ), transparent 58% ), var( --panel-mocny ); text-align: center; overflow: hidden; }
.tzw-srodek::before { content: ''; position: absolute; left: 50%; top: 42%; width: 420px; height: 420px; transform: translate( -50%, -50% ); border-radius: 999px; background: repeating-radial-gradient( circle, rgba( 201, 162, 78, .14 ) 0 1px, transparent 1px 34px ); pointer-events: none; }
.tzw-srodek::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba( 201, 162, 78, .18 ); border-radius: 10px; pointer-events: none; }
.tzw-srodek > * { position: relative; z-index: 1; }
.tzw-srodek__zwierze { display: block; width: 130px; height: 200px; margin: 0 0 14px; border-radius: 10px; overflow: hidden; border: 1px solid var( --obrys ); box-shadow: 0 0 0 4px rgba( 8, 5, 10, .9 ), 0 0 0 5px rgba( 201, 162, 78, .45 ), 0 20px 40px rgba( 0, 0, 0, .6 ); }
.tzw-srodek__zwierze img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tzw-srodek__nad { margin: 0; font: 500 38px/1.1 var( --serif ); letter-spacing: .06em; color: var( --zloto ); }
.tzw-srodek__data { margin: 0; font: 400 15px var( --serif ); color: var( --tekst ); }
.tzw-srodek__ustroj { display: grid; gap: 2px; margin: 14px 0 6px; }
.tzw-srodek__ustroj b { font: 500 34px/1 var( --serif ); color: var( --roz ); }
.tzw-srodek__ustroj span { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --roz ); opacity: .85; }
.tzw-srodek__zycie { display: grid; gap: 6px; margin: 0 0 14px; }
.tzw-srodek__zycie span { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tzw-srodek__zycie b { font: 500 21px var( --serif ); color: var( --tekst-mocny ); }
.tzw-srodek__zycie b i { font: 400 22px var( --cjk ); font-style: normal; color: var( --zloto ); }

/* panele */
.tzw-panel { position: relative; margin: 20px 0 0; padding: 26px 32px; border: 1px solid var( --obrys ); border-radius: 12px; background: var( --panel ); }
.tzw-panel::before { content: '◆'; position: absolute; left: 50%; top: -7px; transform: translateX( -50% ); font-size: 9px; color: var( --zloto-ciemne ); background: #0a0709; padding: 0 8px; }
.tzw-panel h2 { margin: 0 0 8px; font: 500 30px var( --serif ); color: var( --zloto ); }
.tzw-panel h2 i { font: 400 28px var( --cjk ); font-style: normal; }
.tzw-panel__pod, .tzw-metoda p { margin: 0; font-size: 14px; line-height: 1.7; color: var( --tekst ); }
.tzw-sihua__lista { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.tzw-sihua__lista li { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding: 12px 16px; border: 1px solid var( --obrys-slaby ); border-radius: 10px; background: rgba( 4, 2, 6, .55 ); }
.tzw-sihua__lista li b { grid-row: 1 / 3; width: 36px; height: 36px; margin: 0; font-size: 20px; border-radius: 6px; }
.tzw-sihua__lista li span { font-size: 15px; color: var( --tekst-mocny ); }
.tzw-sihua__lista li span i { font: 400 16px var( --cjk ); font-style: normal; color: var( --zloto ); margin-right: 6px; }
.tzw-sihua__lista li small { font-size: 11.5px; color: var( --tekst-slaby ); }
.tzw-dalej { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 34px 0 0; }
.tzw-dalej .tzw-btn { min-width: 220px; }

/* okno pałacu — rozmycie, złota rama */
.tzw-okno { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px;
	--obrys: rgba( 201, 162, 78, .55 ); --obrys-slaby: rgba( 201, 162, 78, .28 ); --zloto: #f3d9a0; --zloto-cieply: #e9c77a; --zloto-ciemne: #c9a24e; --zloto-etyk: #cda474;
	--purpura: #c99cff; --lawenda: #b9a6d8; --tekst: #c9c2c8; --tekst-slaby: #9a939e; --tekst-mocny: #efe9ea;
	--serif: 'Cormorant Garamond', 'Times New Roman', serif; --sans: 'Jost', system-ui, sans-serif; --cjk: 'Noto Serif SC', 'Noto Serif CJK SC', 'SimSun', serif;
	font: 300 15px/1.6 var( --sans ); color: var( --tekst ); }
.tzw-okno * { box-sizing: border-box; }
.tzw-okno__tlo { position: absolute; inset: 0; background: rgba( 4, 2, 6, .72 ); backdrop-filter: blur( 8px ); }
.tzw-okno__panel { position: relative; width: min( 100%, 740px ); max-height: 90vh; overflow: auto; padding: 32px 36px; border: 1px solid var( --obrys ); border-radius: 14px; background: linear-gradient( 180deg, #14090e, #0a0609 ); box-shadow: 0 30px 80px rgba( 0, 0, 0, .7 ), 0 0 0 1px rgba( 201, 162, 78, .15 ); color: var( --tekst ); }
.tzw-okno__zamknij { position: absolute; right: 14px; top: 12px; width: 34px; height: 34px; border: 1px solid var( --obrys ); border-radius: 999px; background: none; color: var( --zloto ); font-size: 20px; cursor: pointer; }
.tzw-okno__nad { margin: 0 0 6px; font: 400 15px var( --cjk ); letter-spacing: .1em; color: var( --purpura ); }
.tzw-okno__tytul { margin: 0 0 6px; font: 500 32px/1.15 var( --serif ); color: var( --zloto ); }
.tzw-okno__lead { margin: 0 0 18px; font-size: 14px; color: var( --lawenda ); }
.tzw-okno__akapit { margin: 0 0 10px; font-size: 14.5px; line-height: 1.7; color: var( --tekst-mocny ); }
.tzw-gwiazda { margin: 0 0 16px; padding-top: 14px; border-top: 1px solid rgba( 201, 162, 78, .18 ); }
.tzw-gwiazda h4 { margin: 0 0 6px; font: 500 21px var( --serif ); color: var( --zloto ); }
.tzw-gwiazda__cjk { font: 400 26px var( --cjk ); margin-right: 4px; }
.tzw-gwiazda h4 .tzw-hua { margin-left: 10px; width: auto; padding: 0 8px; font-size: 11px; font-family: var( --sans ); letter-spacing: .06em; }
.tzw-gwiazda--pomoc ul { margin: 0; padding: 0 0 0 18px; font-size: 13.5px; line-height: 1.7; }
.tzw-gwiazda--pomoc b { font-weight: 400; color: var( --tekst-mocny ); }

@media ( max-width: 1200px ) { .tzw-strona { padding-left: 32px; padding-right: 32px; } .tzw-bok { display: none; } }
@media ( max-width: 900px ) {
	.tzw-form { grid-template-columns: 1fr 1fr; }
	.tzw-plansza { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); grid-template-rows: none; }
	.tzw-palac { grid-row: auto !important; grid-column: auto !important; }
	.tzw-srodek { grid-row: auto; grid-column: 1 / -1; order: -1; }
	.tzw-sihua__lista { grid-template-columns: 1fr 1fr; }
}
@media ( max-width: 600px ) { .tzw-plansza { grid-template-columns: 1fr; } .tzw-form, .tzw-sihua__lista { grid-template-columns: 1fr; } }

.tzw-okno__palac { padding: 0 0 6px; font-size: 15px; color: var( --tekst ); }
.tzw-okno__rada { margin: 6px 0 0; padding: 10px 14px; border-left: 2px solid var( --zloto-ciemne ); font-size: 14px; line-height: 1.6; color: var( --tekst-mocny ); }
.tzw-okno__rada b { font-weight: 400; color: var( --zloto ); }
