/* Mo — Mistyczny Wschód · Tybet. Tokeny serwisu + akcent modułu: bordo szat (maroon), szafran i turkus tybetańskich
ozdób, ciemne drewno kostki. Sygnatura: kostka 3D toczy się dwa razy, dwa pola rzutów zapalają się, odpowiedź rozwija się. */
.tmo-strona {
--tlo: #060716; --panel: rgba( 10, 10, 34, .74 ); --panel-mocny: rgba( 7, 5, 22, .94 ); --obrys: rgba( 230, 196, 138, .3 ); --wlos: rgba( 230, 196, 138, .12 );
--zloto: #fde291; --zloto-cieply: #f9d57a; --zloto-ciemne: #e6c48a; --zloto-etyk: #cda474; --lawenda: #ad97d3;
--tekst: #b3b1c2; --tekst-slaby: #9393a7; --tekst-mocny: #e6e2ea;
--bordo: #7a1f2b; --bordo-jasne: #a83a47; --szafran: #e7a23a; --turkus: #2fb3a8; --kosc: #1a1120;
--serif: 'Cormorant Garamond', Georgia, serif; --sans: Jost, system-ui, sans-serif; --tyb: 'Noto Serif Tibetan', 'Microsoft Himalaya', serif;
position: relative; padding: 0 40px 80px; color: var( --tekst ); font: 300 15px var( --sans );
background: radial-gradient( 1200px 600px at 50% -10%, rgba( 122, 31, 43, .28 ), transparent 70% ), radial-gradient( 900px 500px at 88% 30%, rgba( 47, 179, 168, .10 ), transparent 70% ), var( --tlo ); overflow-x: clip;
}
.tmo-strona *, .tmo-strona *::before, .tmo-strona *::after { box-sizing: border-box; }
body:has( .tmo-strona ) .wp-site-blocks > header, body:has( .tmo-strona ) header.wp-block-template-part, body:has( .tmo-strona ) .wp-site-blocks > footer, body:has( .tmo-strona ) footer.wp-block-template-part, body:has( .tmo-strona ) .wp-block-post-title { display: none !important; }
body:has( .tmo-strona ) .wp-site-blocks, body:has( .tmo-strona ) .wp-block-group, body:has( .tmo-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tmo-strona ) .wp-block-post-content > *, body:has( .tmo-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tmo-strona ) { background: #060716; }
/* miara serwisu: 1520 px treści (1600 − 2×40 paddingu) */
body:has( .tmo-strona ) .wp-block-post-content > .tmo-strona, body:has( .tmo-strona ) .entry-content > .tmo-strona, .tmo-strona { box-sizing: border-box; max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
.tmo-strona button { font-family: inherit; }
.tmo-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 ); }
.tmo-sciezka i { font-style: normal; color: var( --zloto-ciemne ); } .tmo-sciezka b { font-weight: 400; color: var( --zloto ); }
.tmo-poziom { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 0 auto; }
.tmo-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 ); }
.tmo-poziom span::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var( --k ); box-shadow: 0 0 10px var( --k ); }
.tmo-poziom .jest-hist { --k: #7cc59a; } .tmo-poziom .jest-ezo { --k: #ad97d3; } .tmo-poziom .jest-wsp { --k: #f9d57a; } .tmo-poziom .jest-bad { --k: #6d9be6; }
/* ── hero ── */
.tmo-hero { display: grid; grid-template-columns: 72px minmax( 0, 1fr ) minmax( 380px, 520px ); gap: 34px; align-items: center; min-height: 560px; padding: 30px 0 10px; }
/* W pionie `line-height` wyznacza SZEROKOSC wiersza — przy 1 tybetanskie sylaby
wychodzily poza swoja kolumne i lamaly sie na krawedzi. 1,8 daje im miejsce. */
.tmo-pion { writing-mode: vertical-rl; margin: 6px 0 0; align-self: start; font: 400 28px/1.8 var( --tyb ); letter-spacing: .18em; color: var( --zloto-ciemne ); text-shadow: 0 0 30px rgba( 253, 226, 145, .25 ); }
.tmo-nad { margin: 0 0 10px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tmo-tytul { margin: 0; font: 500 clamp( 42px, 5vw, 72px )/1.05 var( --serif ); color: var( --zloto-cieply ); }
.tmo-tytul small { display: block; margin-top: 6px; font: 400 18px var( --tyb ); letter-spacing: .1em; color: var( --lawenda ); }
.tmo-lead { max-width: 58ch; margin: 18px 0 20px; font-size: 15.5px; line-height: 1.7; color: var( --tekst-mocny ); }
.tmo-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 18px 0 0; }
.tmo-cta small { font-size: 12px; color: var( --tekst-slaby ); }
.tmo-btn { height: 48px; padding: 0 30px; 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 11.5px var( --sans ); letter-spacing: .26em; text-transform: uppercase; cursor: pointer; transition: box-shadow .2s, background .2s; }
.tmo-btn:hover { background: rgba( 253, 226, 145, .22 ); box-shadow: 0 0 22px rgba( 253, 226, 145, .18 ); }
.tmo-btn:disabled { opacity: .6; cursor: wait; }
.tmo-btn:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }
.tmo-btn--zar { border-color: var( --szafran ); background: linear-gradient( 180deg, rgba( 231, 162, 58, .3 ), rgba( 122, 31, 43, .25 ) ); color: #ffe4b8; }
.tmo-btn--zar:hover { background: rgba( 231, 162, 58, .4 ); box-shadow: 0 0 26px rgba( 231, 162, 58, .35 ); }
/* kostka 3D */
.tmo-scena { position: relative; display: grid; place-items: center; align-content: center; gap: 34px; height: 520px; }
.tmo-scena::after { content: ''; position: absolute; left: 50%; top: 58%; width: 360px; height: 70px; margin-left: -180px; border-radius: 50%; background: radial-gradient( ellipse, rgba( 231, 162, 58, .22 ), transparent 70% ); filter: blur( 12px ); pointer-events: none; }
.tmo-kostka { width: 180px; height: 180px; perspective: 900px; }
.tmo-kostka__bryla { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.4s cubic-bezier( .2, .8, .2, 1 ); }
.tmo-kostka.jest-toczy .tmo-kostka__bryla { transition-timing-function: cubic-bezier( .3, .6, .3, 1 ); }
.tmo-sciana { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 2px; border: 2px solid rgba( 253, 226, 145, .55 ); border-radius: 18px; background: radial-gradient( circle at 35% 30%, #3a2233, var( --kosc ) 70% ); box-shadow: inset 0 0 0 6px rgba( 122, 31, 43, .55 ), inset 0 0 40px rgba( 0, 0, 0, .7 ); backface-visibility: hidden; }
.tmo-sciana b { font: 600 68px/1.8 var( --tyb ); color: var( --zloto ); text-shadow: 0 0 18px rgba( 253, 226, 145, .35 ); }
.tmo-sciana small { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var( --szafran ); }
.tmo-sciana--a { transform: rotateY( 0deg ) translateZ( 90px ); }
.tmo-sciana--ra { transform: rotateY( 90deg ) translateZ( 90px ); }
.tmo-sciana--pa { transform: rotateY( 180deg ) translateZ( 90px ); }
.tmo-sciana--tsa { transform: rotateY( -90deg ) translateZ( 90px ); }
.tmo-sciana--na { transform: rotateX( 90deg ) translateZ( 90px ); }
.tmo-sciana--dhi { transform: rotateX( -90deg ) translateZ( 90px ); }
.tmo-rzuty { display: flex; gap: 18px; }
.tmo-rzut { display: grid; justify-items: center; gap: 2px; min-width: 120px; padding: 10px 14px; border: 1px solid var( --wlos ); border-radius: 14px; background: var( --panel ); transition: border-color .3s, box-shadow .3s; }
.tmo-rzut i { font-style: normal; font-size: 9.5px; letter-spacing: .3em; color: var( --tekst-slaby ); }
.tmo-rzut b { font: 600 30px/1.8 var( --tyb ); color: var( --tekst-slaby ); }
.tmo-rzut small { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tmo-rzut.jest { border-color: var( --szafran ); box-shadow: 0 0 24px rgba( 231, 162, 58, .25 ); }
.tmo-rzut.jest b { color: var( --zloto ); } .tmo-rzut.jest small { color: var( --szafran ); }
@media ( prefers-reduced-motion: reduce ) { .tmo-kostka__bryla { transition: none; } }
/* ── odpowiedź ── */
.tmo-wynik { display: grid; grid-template-columns: minmax( 0, 1.25fr ) minmax( 0, 1fr ); gap: 30px; align-items: start; margin: 10px 0 60px; }
.tmo-wynik[hidden] { display: none; }
.tmo-odp { position: relative; padding: 34px 38px 38px; border: 1px solid var( --obrys ); border-radius: 18px; background: linear-gradient( 180deg, rgba( 122, 31, 43, .28 ), rgba( 10, 10, 34, .9 ) 30% ), var( --panel-mocny ); box-shadow: 0 30px 60px rgba( 0, 0, 0, .6 ); clip-path: inset( 0 0 100% 0 ); animation: tmo-rozwin 1s .2s cubic-bezier( .2, .8, .2, 1 ) forwards; }
.tmo-odp::after { content: ''; position: absolute; inset: 6px; border: 1px solid var( --wlos ); border-radius: 13px; pointer-events: none; }
.tmo-odp.jest-od-razu { animation: none; clip-path: none; }
@keyframes tmo-rozwin { to { clip-path: inset( 0 0 0 0 ); } }
.tmo-odp.jest-dobry { --ton: var( --turkus ); } .tmo-odp.jest-mieszany { --ton: var( --szafran ); } .tmo-odp.jest-trudny { --ton: var( --bordo-jasne ); }
.tmo-odp__glowa { text-align: center; }
.tmo-odp__sylaby { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 0 0 10px; }
.tmo-odp__sylaby i { font-style: normal; color: var( --zloto-ciemne ); font-size: 22px; }
.tmo-odp__sylaba { display: grid; justify-items: center; gap: 2px; padding: 8px 16px; border: 1px solid var( --obrys ); border-radius: 14px; background: rgba( 26, 17, 32, .8 ); color: var( --tekst ); font: inherit; cursor: pointer; transition: border-color .2s; }
.tmo-odp__sylaba:hover { border-color: var( --zloto ); }
.tmo-odp__sylaba b { font: 600 34px/1.8 var( --tyb ); color: var( --zloto ); }
.tmo-odp__sylaba small { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var( --szafran ); }
.tmo-odp__ton { margin: 0 0 4px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --ton ); }
.tmo-odp__nazwa { margin: 0; font: 500 clamp( 30px, 3.4vw, 46px )/1.1 var( --serif ); color: var( --zloto-cieply ); }
.tmo-odp__haslo { margin: 6px 0 0; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var( --lawenda ); }
.tmo-odp__obraz { display: flex; gap: 12px; margin: 22px 0 14px; padding: 14px 16px; border: 1px solid var( --wlos ); border-left: 2px solid var( --ton ); border-radius: 0 12px 12px 0; background: rgba( 255, 255, 255, .03 ); font: italic 400 17px/1.5 var( --serif ); color: var( --tekst-mocny ); }
.tmo-odp__obraz i { font-style: normal; color: var( --ton ); }
.tmo-odp__lead { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var( --tekst-mocny ); }
.tmo-odp__tresc p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.7; color: var( --tekst ); }
.tmo-rady { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 8px 18px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var( --wlos ); list-style: none; }
.tmo-rady li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 8px 0; cursor: pointer; outline: none; }
.tmo-rady li:hover b, .tmo-rady li:focus-visible b { color: var( --zloto ); }
.tmo-rady i { font: 400 18px/1.3 var( --tyb ); font-style: normal; color: var( --szafran ); }
.tmo-rady b { display: block; font: 500 14px var( --serif ); letter-spacing: .04em; color: var( --tekst-mocny ); }
.tmo-rady span { display: block; font-size: 12.5px; line-height: 1.5; color: var( --tekst ); }
.tmo-odp__praktyka { margin: 16px 0 0; padding: 12px 16px; border: 1px solid rgba( 47, 179, 168, .35 ); border-radius: 12px; background: rgba( 47, 179, 168, .08 ); font-size: 13.5px; line-height: 1.6; color: var( --tekst-mocny ); }
.tmo-odp__praktyka b { display: block; margin-bottom: 4px; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var( --turkus ); font-weight: 400; }
.tmo-obok { display: grid; gap: 14px; }
.tmo-karta { position: relative; padding: 22px 24px; border: 1px solid var( --obrys ); border-radius: 16px; background: var( --panel ); }
.tmo-karta::after { content: ''; position: absolute; inset: 5px; border: 1px solid var( --wlos ); border-radius: 12px; pointer-events: none; }
.tmo-karta h3 { margin: 0 0 8px; font: 500 22px var( --serif ); color: var( --zloto-cieply ); }
.tmo-karta p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var( --tekst ); }
.tmo-akcje { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; position: relative; z-index: 1; }
.tmo-akcje .tmo-btn, .tmo-akcje .tsk-zapisz__btn { height: 40px; padding: 0 18px; font-size: 10.5px; }
/* ── sekcje ── */
.tmo-sekcja { margin: 40px 0 0; }
.tmo-sekcja__nad { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 6px; font-size: 11.5px; letter-spacing: .34em; text-transform: uppercase; color: var( --zloto ); }
.tmo-sekcja__nad::before, .tmo-sekcja__nad::after { content: ''; width: 110px; height: 1px; background: linear-gradient( 90deg, transparent, var( --zloto-ciemne ) ); } .tmo-sekcja__nad::after { background: linear-gradient( 90deg, var( --zloto-ciemne ), transparent ); }
.tmo-sekcja__tytul { margin: 0 0 8px; text-align: center; font: 500 clamp( 28px, 3vw, 42px ) var( --serif ); color: var( --zloto-cieply ); }
.tmo-sekcja__lead { max-width: 70ch; margin: 0 auto 26px; text-align: center; font-size: 14.5px; line-height: 1.65; }
.tmo-sylaby { display: grid; grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); gap: 12px; }
.tmo-sylaba { display: grid; justify-items: center; gap: 4px; padding: 18px 10px 14px; border: 1px solid var( --wlos ); border-radius: 14px; background: var( --panel ); color: var( --tekst ); font: inherit; cursor: pointer; text-align: center; transition: transform .2s, border-color .2s; }
.tmo-sylaba:hover { transform: translateY( -3px ); border-color: var( --zloto ); }
.tmo-sylaba b { font: 600 38px/1.8 var( --tyb ); color: var( --zloto ); }
.tmo-sylaba span { font: 500 14px var( --serif ); letter-spacing: .12em; color: var( --tekst-mocny ); }
.tmo-sylaba small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var( --szafran ); }
.tmo-wiedza { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 16px; }
.tmo-wpis { position: relative; display: grid; gap: 10px; padding: 22px 20px 18px; border: 1px solid var( --wlos ); border-radius: 16px; background: linear-gradient( 180deg, rgba( 12, 9, 34, .92 ), rgba( 8, 6, 26, .96 ) ); color: var( --tekst ); text-align: left; font: inherit; cursor: pointer; transition: transform .25s, border-color .25s, box-shadow .25s; }
.tmo-wpis:hover { transform: translateY( -4px ); border-color: var( --szafran ); box-shadow: 0 24px 50px rgba( 0, 0, 0, .6 ), 0 0 30px rgba( 231, 162, 58, .18 ); }
.tmo-wpis:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }
.tmo-wpis i { display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 10px; border: 1px solid var( --obrys ); border-radius: 999px; background: radial-gradient( circle at 40% 35%, rgba( 122, 31, 43, .5 ), rgba( 10, 7, 34, .9 ) 72% ); font: 400 20px var( --tyb ); font-style: normal; color: var( --zloto ); justify-self: start; }
.tmo-wpis h3 { margin: 0; font: 500 22px/1.12 var( --serif ); color: var( --zloto-cieply ); }
.tmo-wpis p { margin: 0; font-size: 13px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tmo-wpis em { font-style: normal; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var( --zloto ); }
.tmo-historia { display: grid; grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) ); gap: 10px; }
.tmo-hist { display: grid; grid-template-columns: 64px minmax( 0, 1fr ); align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var( --wlos ); border-radius: 12px; background: var( --panel ); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, transform .2s; }
.tmo-hist:hover { border-color: var( --zloto ); transform: translateY( -2px ); }
.tmo-hist b { font: 600 22px/1.2 var( --tyb ); color: var( --zloto ); text-align: center; }
.tmo-hist.jest-trudny b { color: var( --bordo-jasne ); } .tmo-hist.jest-dobry b { color: var( --turkus ); }
.tmo-hist strong { display: block; font: 500 15px var( --serif ); color: var( --tekst-mocny ); }
.tmo-hist small { display: block; font-size: 11px; color: var( --tekst-slaby ); }
.tmo-pow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 34px; padding: 14px 18px; border: 1px solid var( --wlos ); border-radius: 14px; background: rgba( 255, 255, 255, .02 ); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tmo-pow a { color: var( --zloto ); text-decoration: none; } .tmo-pow a:hover { text-decoration: underline; text-underline-offset: 4px; } .tmo-pow span { margin-left: auto; }
/* ── okno ── */
.tmo-okno { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; font: 300 15px Jost, system-ui, sans-serif; }
.tmo-okno__tlo { position: absolute; inset: 0; background: rgba( 3, 2, 10, .72 ); backdrop-filter: blur( 10px ); -webkit-backdrop-filter: blur( 10px ); }
.tmo-okno__panel { position: relative; width: min( 100%, 760px ); max-height: 90vh; overflow: auto; padding: 34px 38px; border: 1px solid rgba( 230, 196, 138, .3 ); border-radius: 18px; background: rgba( 7, 5, 22, .94 ); box-shadow: 0 30px 80px rgba( 0, 0, 0, .7 ); color: #b3b1c2; }
.tmo-okno__zamknij { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; border: 1px solid rgba( 230, 196, 138, .3 ); border-radius: 999px; background: rgba( 7, 5, 22, .8 ); color: #fde291; font-size: 22px; cursor: pointer; }
.tmo-okno__nad { margin: 0 0 6px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #cda474; }
.tmo-okno h3 { margin: 0 0 4px; font: 500 36px/1.1 'Cormorant Garamond', Georgia, serif; color: #f9d57a; }
.tmo-okno__tyb { margin: 0 0 12px; font: 400 26px/1.8 'Noto Serif Tibetan', serif; color: #ad97d3; }
.tmo-okno p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.7; }
.tmo-okno h4 { margin: 18px 0 6px; font: 500 20px 'Cormorant Garamond', Georgia, serif; color: #fde291; }
.tmo-okno__rada { padding: 12px 16px; border-left: 2px solid #e7a23a; background: rgba( 231, 162, 58, .08 ); font: italic 400 17px/1.5 'Cormorant Garamond', Georgia, serif; color: #e6e2ea; }
.tmo-okno .tmo-poziom { margin: 16px 0 0; } .tmo-okno .tmo-poziom span { border: 1px solid rgba( 230, 196, 138, .12 ); }
@media ( max-width: 1200px ) { .tmo-hero { grid-template-columns: 1fr; } .tmo-pion { display: none; } .tmo-wiedza { grid-template-columns: repeat( 2, 1fr ); } .tmo-sylaby { grid-template-columns: repeat( 3, 1fr ); } .tmo-wynik { grid-template-columns: 1fr; } }
@media ( max-width: 680px ) { .tmo-strona { padding: 0 16px 60px; } .tmo-wiedza, .tmo-sylaby, .tmo-rady { grid-template-columns: 1fr; } .tmo-scena { height: 440px; } .tmo-odp { padding: 26px 18px 30px; } .tmo-poziom { margin-left: 0; } }
/* ── pismo tybetańskie potrzebuje miejsca ───────────────────────────────────
Sylaba złożona (np. དྷི) ma tusz wysoki na ok. 1,6 wysokości czcionki: 1,08
nad linią pisma i 0,52 pod nią. Przy `line-height: 1` wychodziła poza kafel
i nakrywała podpis pod spodem. Dlatego wszędzie, gdzie stoi tybetański glif,
interlinia wynosi 1,8 — i dlatego stopnia pisma nie podnosimy „na oko”.
Ta sama uwaga dotyczy dewanagari z matrą i japońskiej furigany. */
[lang="bo"], .pismo-tybetanski { line-height: 1.8; }
/* ══════════════════════════════════════════════════════════════════════════
PIECZĘĆ ODPOWIEDZI
Odpowiedź Mo to jedno zdanie werdyktu i dwie sylaby, z których wynika.
Dotąd stały jako dwa małe kafelki z kreską między nimi — czyli jak formularz.
Tutaj stają się pieczęcią: kamienna płyta na szerokość panelu, dwie sylaby
w złocie, nić między nimi, po której raz przebiega światło, i poświata
w barwie werdyktu (turkus, szafran albo bordo — to samo `--ton`, które
już nosi klasa odpowiedzi, więc barwa niesie treść, a nie ozdobę).
══════════════════════════════════════════════════════════════════════════ */
.tmo-odp {
--ton: var( --szafran );
/* Trzy przejścia zamiast jednego: barwa werdyktu u góry, indygo w środku,
noc u dołu. Dzięki temu panel ma głębię, a nie płaskie tło. */
background:
radial-gradient( 620px 300px at 50% -6%, color-mix( in srgb, var( --ton ) 22%, transparent ), transparent 70% ),
linear-gradient( 180deg, rgba( 122, 31, 43, .3 ), rgba( 14, 12, 40, .94 ) 34%, rgba( 6, 7, 22, .97 ) ),
var( --panel-mocny );
}
/* Cienka nitka światła po górnej krawędzi — barwa werdyktu, gasnąca ku bokom. */
.tmo-odp::before {
content: ''; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; border-radius: 2px; pointer-events: none;
background: linear-gradient( 90deg, transparent, color-mix( in srgb, var( --ton ) 85%, transparent ) 22%, color-mix( in srgb, var( --ton ) 85%, transparent ) 78%, transparent );
box-shadow: 0 0 22px color-mix( in srgb, var( --ton ) 55%, transparent );
}
/* ── płyta pieczęci ── */
.tmo-odp__glowa {
position: relative; margin: -34px -38px 26px; padding: 40px 38px 30px; text-align: center;
border-bottom: 1px solid var( --wlos ); border-radius: 17px 17px 0 0; overflow: hidden;
background:
radial-gradient( 460px 220px at 50% 42%, color-mix( in srgb, var( --ton ) 20%, transparent ), transparent 72% ),
linear-gradient( 180deg, rgba( 26, 17, 32, .9 ), rgba( 10, 10, 34, .72 ) );
}
/* Obłoki w narożnikach — motyw z obramowań tanek, nie ogólna „ozdoba". */
.tmo-odp__glowa::before, .tmo-odp__glowa::after {
content: ''; position: absolute; top: 10px; width: 74px; height: 42px; opacity: .55; pointer-events: none;
background: url( "data:image/svg+xml;utf8," ) center / contain no-repeat;
}
.tmo-odp__glowa::before { left: 14px; }
.tmo-odp__glowa::after { right: 14px; transform: scaleX( -1 ); }
/* ── dwie sylaby i nić między nimi ── */
.tmo-odp__sylaby { gap: 0; margin: 0 0 18px; }
.tmo-odp__sylaba {
position: relative; gap: 6px; padding: 16px 26px 14px; border-radius: 18px;
border: 1px solid color-mix( in srgb, var( --ton ) 34%, transparent );
background: linear-gradient( 180deg, rgba( 36, 24, 44, .92 ), rgba( 12, 10, 28, .95 ) );
box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .06 ), 0 18px 40px -22px rgba( 0, 0, 0, .95 );
transition: transform .26s cubic-bezier( .2, .7, .3, 1 ), border-color .26s, box-shadow .26s;
}
.tmo-odp__sylaba:hover {
transform: translateY( -4px ); border-color: var( --zloto );
box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .1 ), 0 26px 50px -20px rgba( 0, 0, 0, .95 ), 0 0 54px -16px color-mix( in srgb, var( --ton ) 70%, transparent );
}
.tmo-odp__sylaba:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 4px; }
.tmo-odp__sylaba b { font-size: 44px; text-shadow: 0 0 26px color-mix( in srgb, var( --ton ) 60%, transparent ), 0 0 60px rgba( 253, 226, 145, .18 ); }
.tmo-odp__sylaba small { letter-spacing: .24em; color: var( --zloto-etyk ); }
/* Strzałka zamienia się w nić: kreska, po której raz przebiega światło. */
.tmo-odp__sylaby i {
position: relative; flex: 0 0 clamp( 54px, 8vw, 104px ); height: 1px; margin: 0 4px; font-size: 0;
background: linear-gradient( 90deg, transparent, rgba( 230, 196, 138, .5 ) 18%, rgba( 230, 196, 138, .5 ) 82%, transparent );
}
.tmo-odp__sylaby i::after {
content: ''; position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
background: var( --zloto ); box-shadow: 0 0 14px 2px color-mix( in srgb, var( --ton ) 80%, transparent );
animation: tmo-nitka 1.5s .55s cubic-bezier( .4, 0, .2, 1 ) 1 both;
}
@keyframes tmo-nitka {
from { left: 0; opacity: 0; }
18% { opacity: 1; }
to { left: calc( 100% - 7px ); opacity: 1; }
}
/* ── werdykt ── */
.tmo-odp__ton {
display: inline-flex; align-items: center; gap: 12px; margin: 0 0 8px;
font-size: 10px; letter-spacing: .36em;
}
.tmo-odp__ton::before, .tmo-odp__ton::after {
content: ''; width: clamp( 26px, 5vw, 64px ); height: 1px;
background: linear-gradient( 90deg, transparent, color-mix( in srgb, var( --ton ) 70%, transparent ) );
}
.tmo-odp__ton::after { transform: scaleX( -1 ); }
.tmo-odp__nazwa { text-shadow: 0 0 46px rgba( 249, 213, 122, .26 ); }
.tmo-odp__haslo { color: var( --lawenda ); text-shadow: 0 0 30px rgba( 173, 151, 211, .3 ); }
/* ── zdobienia w treści ── */
.tmo-odp__obraz { position: relative; border-radius: 0 14px 14px 0; background: linear-gradient( 90deg, color-mix( in srgb, var( --ton ) 9%, transparent ), rgba( 255, 255, 255, .02 ) 60% ); }
.tmo-odp__obraz i { text-shadow: 0 0 18px color-mix( in srgb, var( --ton ) 70%, transparent ); }
.tmo-rady span { position: relative; padding-left: 18px; }
.tmo-rady span::before {
content: ''; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; opacity: .8;
background: url( "data:image/svg+xml;utf8," ) center / contain no-repeat;
}
/* Dolna krawędź panelu gaśnie w noc — bez twardego cięcia. */
.tmo-odp { box-shadow: 0 30px 60px rgba( 0, 0, 0, .6 ), inset 0 -60px 60px -60px rgba( 4, 3, 12, .95 ); }
@media ( max-width: 680px ) {
.tmo-odp__glowa { margin: -26px -18px 22px; padding: 30px 18px 24px; }
.tmo-odp__glowa::before, .tmo-odp__glowa::after { display: none; }
.tmo-odp__sylaba { padding: 12px 16px 10px; }
.tmo-odp__sylaba b { font-size: 34px; }
.tmo-odp__sylaby i { flex-basis: 34px; }
}
@media ( prefers-reduced-motion: reduce ) {
.tmo-odp__sylaby i::after { animation: none; left: calc( 100% - 7px ); }
.tmo-odp__sylaba { transition: none; }
}
/* ── sześć sylab jako banery ──────────────────────────────────────────────────
Glif, wymowa i żywioł są wypalone na obrazie, więc podpisy w kodzie zostają
tylko dla czytnika ekranu. Baner ma proporcje 16:9 i własny żywioł w tle:
ogień przy RA, woda przy PA, kamienie przy NA. */
.tmo-sylaby { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 18px; }
.tmo-sylaba.ma-baner { display: block; padding: 0; overflow: hidden; border-radius: 16px; border-color: var( --wlos ); background: #05060f; }
/* Owijka MUSI mieć jawną szerokość: kafel jest gridem, a element bez własnej
szerokości kurczy się do zera i `aspect-ratio` daje wtedy zerową wysokość. */
.tmo-sylaba__baner { position: relative; width: 100%; min-width: 0; margin: 0; aspect-ratio: 1672 / 941; overflow: hidden; }
.tmo-sylaba__baner img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate( .96 ) brightness( .9 ); transition: transform .5s cubic-bezier( .2, .7, .3, 1 ), filter .4s; }
.tmo-sylaba__baner::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba( 249, 213, 122, .14 ), inset 0 -40px 60px -50px rgba( 0, 0, 0, .9 ); transition: box-shadow .3s; }
.tmo-sylaba.ma-baner:hover { transform: translateY( -5px ); border-color: var( --zloto ); box-shadow: 0 26px 56px -22px rgba( 0, 0, 0, .95 ), 0 0 60px -18px rgba( 231, 162, 58, .5 ); }
.tmo-sylaba.ma-baner:hover .tmo-sylaba__baner img { transform: scale( 1.04 ); filter: saturate( 1.05 ) brightness( 1.02 ); }
.tmo-sylaba.ma-baner:hover .tmo-sylaba__baner::after { box-shadow: inset 0 0 0 1px rgba( 249, 213, 122, .4 ), inset 0 -40px 60px -50px rgba( 0, 0, 0, .9 ); }
.tmo-sylaba.ma-baner:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 4px; }
.tmo-sylaba.ma-baner b, .tmo-sylaba.ma-baner span, .tmo-sylaba.ma-baner small {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset( 50% ); white-space: nowrap;
}
@media ( max-width: 1200px ) { .tmo-sylaby { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } }
@media ( max-width: 680px ) { .tmo-sylaby { grid-template-columns: minmax( 0, 1fr ); } }
@media ( prefers-reduced-motion: reduce ) { .tmo-sylaba__baner img { transition: none; } }
/* ── kafle „Skąd się wzięło Mo" w barwie banerów ──────────────────────────────
Sylaby wyżej są nocno-morskie: granat, turkus i złoto. Kafle wiedzy szły
dotąd w śliwkę i bordo, więc dwie sekcje obok siebie wyglądały jak z dwóch
różnych stron. Teraz dzielą tę samą paletę, a bordo zostaje tam, gdzie coś
znaczy: przy trudnej odpowiedzi. */
.tmo-wpis {
border-color: rgba( 47, 179, 168, .16 );
background: linear-gradient( 180deg, rgba( 10, 26, 40, .94 ), rgba( 6, 14, 28, .97 ) );
box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .04 );
}
.tmo-wpis:hover {
border-color: var( --turkus );
box-shadow: 0 26px 54px -22px rgba( 0, 0, 0, .9 ), 0 0 46px -18px rgba( 47, 179, 168, .45 );
}
.tmo-wpis i {
border-color: rgba( 47, 179, 168, .34 );
background: radial-gradient( circle at 40% 35%, rgba( 47, 179, 168, .28 ), rgba( 6, 14, 28, .92 ) 70% );
box-shadow: 0 0 26px -8px rgba( 47, 179, 168, .5 );
}
.tmo-wpis em { color: var( --turkus ); }
/* Więcej tekstu na kaflu: wstęp ma się kończyć, a nie urywać po czterech wierszach. */
.tmo-wpis p { font-size: 13.5px; line-height: 1.68; -webkit-line-clamp: 9; }