/* Tarot tak czy nie — makieta 07.10.2026 na tokenach strony głównej.
   Prefiks ttn-, bez zmian arkuszy współdzielonych. */

/* Geometria szali: belka, misy i karta liczą położenie z jednego kąta.
   --ttn-lad przenosi kartę znad belki na misę (0 → 1), --ttn-strona wybiera misę
   (-1 tak, 1 nie), --ttn-hx włącza odchylenie w bok, --ttn-swit odsłania lico. */
@property --ttn-kat { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --ttn-lad { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --ttn-strona { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --ttn-hx { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --ttn-swit { syntax: '<percentage>'; inherits: true; initial-value: 0%; }

body.ttn-body {
    --ttn-noc: #0f0c16;
    --ttn-noc-karty: #110d19;
    --ttn-papier: #f4efe6;
    --ttn-kartka: #fbf8f2;
    --ttn-atrament: #1c1a17;
    --ttn-atrament-2: #5a5248;
    --ttn-linia: #d8ccb4;
    --ttn-zloto: #d4b05a;
    --ttn-bordo: #7a2433;
    --ttn-mosiadz: #a47c48;      /* linie i ikony */
    --ttn-mosiadz-tekst: #8a6436; /* drobny tekst na kartce, 5:1 */
    --ttn-tak: #e8c978;          /* misa „tak”: złoto */
    --ttn-nie: #b9b3d6;          /* misa „nie”: srebro księżyca */
    --ttn-jasny: #f1e8d8;
    --ttn-jasny-2: #cfc4b2;
    background: var(--ttn-noc);
}
/* Tła pod wspólnym płótnem gwiazd (-1), jak na karcie dnia. */
.ttn-body::before {
    content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 50% at 80% 8%, rgba(122, 36, 51, 0.22), transparent 60%),
        radial-gradient(ellipse 60% 50% at 10% 60%, rgba(70, 52, 120, 0.2), transparent 65%),
        radial-gradient(ellipse 80% 60% at 60% 110%, rgba(212, 176, 90, 0.07), transparent 60%),
        var(--ttn-noc);
}
.ttn-body .sg-niebo {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23F1E8D8'%3E%3Ccircle cx='18' cy='30' r='.8' opacity='.7'/%3E%3Ccircle cx='96' cy='12' r='.6' opacity='.5'/%3E%3Ccircle cx='170' cy='58' r='1' opacity='.8'/%3E%3Ccircle cx='60' cy='118' r='.6' opacity='.5'/%3E%3Ccircle cx='214' cy='140' r='.8' opacity='.6'/%3E%3Ccircle cx='132' cy='190' r='.7' opacity='.6'/%3E%3Ccircle cx='30' cy='210' r='1' opacity='.7'/%3E%3Ccircle cx='190' cy='226' r='.5' opacity='.5'/%3E%3C/g%3E%3Ccircle cx='120' cy='96' r='1.1' fill='%23E8C978' opacity='.8'/%3E%3C/svg%3E");
}
.ttn { font-family: var(--sg-font-tekst); font-size: var(--sg-fs-tekst); line-height: 1.65; }
.ttn [hidden] { display: none; }
.sg-wrap.ttn-kolumna { width: min(100% - 2 * var(--sg-margines), 43rem); }
.sg-wrap.ttn-kolumna--szeroka { width: min(100% - 2 * var(--sg-margines), 60.5rem); }
.ttn a:not(.sg-btn) { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ttn a:focus-visible, .ttn button:focus-visible, .ttn summary:focus-visible { outline: 3px solid var(--sg-terakota); outline-offset: 5px; }
.ttn-nad { margin: 0; font: 600 0.6875rem/1.3 var(--sg-font-tekst); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ttn-zloto); }
.ttn-kreska { display: block; width: 56px; height: 1px; margin: 1.25rem auto 0; background: var(--ttn-zloto); opacity: 0.85; }
.ttn .sg-h2 { max-width: none; font-size: clamp(2rem, 4.8vw, 2.875rem); line-height: 1.1; }
.ttn .sg-h2--lewo { margin: 0 0 1rem; }
.ttn-papier { background-color: var(--ttn-papier); background-image: var(--sg-ziarno); color: var(--ttn-atrament); }
.ttn-papier .sg-h2 { color: var(--ttn-atrament); }
.ttn-papier a:not(.sg-btn) { color: var(--ttn-bordo); text-decoration-color: rgba(122, 36, 51, 0.35); }
.ttn-lede { margin: 0 0 1rem; font: 400 1.4rem/1.45 var(--sg-font-naglowek); color: var(--ttn-atrament); }

/* ---------- scena: głowa z lewej, szala z prawej ---------- */
.ttn-scena { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); padding-bottom: 3.5rem; background: radial-gradient(80% 55% at 50% 0%, rgba(36, 21, 54, 0.55), transparent 72%); }
.ttn-scena::before { content: ''; position: absolute; inset: 0; background: var(--sg-ziarno); opacity: 0.35; pointer-events: none; }
.ttn-scena.is-otwarta { padding-bottom: 4.5rem; }
.ttn-hero { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.125rem; }
.ttn-hero__glowa { max-width: 40rem; margin: 0 auto; text-align: center; }
.ttn-h1 { margin: 0; font: 500 var(--sg-fs-h1)/1.04 var(--sg-font-naglowek); letter-spacing: -0.005em; color: var(--sg-papier); text-wrap: balance; }
.ttn-h1 span {
    display: block; font-weight: 400; font-style: italic; color: transparent;
    background: linear-gradient(100deg, #a8853f 0%, #e8c978 30%, #fff1c8 45%, #e8c978 60%, #a8853f 100%);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
    animation: ttn-polysk-h1 14s ease-in-out infinite;
}
.ttn-hero__lede { max-width: 40ch; margin: 1rem auto 0; font-size: clamp(1rem, 2.2vw, 1.125rem); color: rgba(244, 239, 230, 0.74); }
.ttn-hero__jak { max-width: 40ch; margin: 0.75rem auto 0; font-size: 0.96875rem; color: var(--sg-papier); }
.ttn-podpowiedz { margin: 0.375rem 0 0.875rem; text-align: center; font-size: 0.875rem; color: rgba(244, 239, 230, 0.5); transition: opacity 0.4s; }
.ttn-scena.is-zajeta .ttn-podpowiedz { opacity: 0; }
.ttn-powrot { max-width: 34ch; margin: 0 auto; padding: 0.625rem 0.875rem; border: 1px solid rgba(212, 176, 90, 0.42); border-radius: 2px; background: rgba(12, 10, 24, 0.5); text-align: center; font-size: 0.9375rem; color: var(--sg-papier); }

/* ---------- szala ---------- */
.ttn-szala {
    --ttn-w: min(26.25rem, 80vw);
    --ttn-l: calc(var(--ttn-w) * 0.38);
    --ttn-s: calc(var(--ttn-w) * 0.42);
    --ttn-py: calc(var(--ttn-w) * 0.72);
    --ttn-cw: calc(var(--ttn-w) * 0.36);
    --ttn-mala: 0.65;
    --ttn-kat: 0deg; --ttn-lad: 0; --ttn-strona: 0; --ttn-hx: 0;
    position: relative; width: var(--ttn-w); height: calc(var(--ttn-w) * 1.38); margin: 0 auto;
}
.ttn-szala.is-czeka { animation: ttn-kolysanie 6.5s ease-in-out infinite; }
.ttn-szala.is-gotowa { margin-top: calc(var(--ttn-w) * -0.56); }
.ttn-szala__poswiata { position: absolute; left: 50%; top: 26%; width: 92%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(217, 184, 94, 0.2) 0%, rgba(201, 168, 76, 0.06) 40%, transparent 66%); pointer-events: none; transition: opacity 1s ease; }
.ttn-szala.is-gotowa .ttn-szala__poswiata { opacity: 0; }
.ttn-szala__slup { position: absolute; left: 50%; top: calc(var(--ttn-py) - 10px); bottom: 0; width: calc(var(--ttn-w) * 0.5); transform: translateX(-50%); color: var(--ttn-zloto); pointer-events: none; }
.ttn-szala .ttn-szala__slup svg, .ttn-szala .ttn-misa svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ttn-szala__belka { position: absolute; left: calc(50% - var(--ttn-l)); top: calc(var(--ttn-py) - 2px); width: calc(var(--ttn-l) * 2); height: 4px; border-radius: 2px; background: linear-gradient(90deg, #8b6b2e, #e8c978 30%, #fff1c8 50%, #e8c978 70%, #8b6b2e); transform: rotate(var(--ttn-kat)); box-shadow: 0 0 14px rgba(232, 201, 120, 0.25); }
.ttn-szala__belka::before, .ttn-szala__belka::after { content: ''; position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #e8c978; transform: translateY(-50%); }
.ttn-szala__belka::before { left: -5px; }
.ttn-szala__belka::after { right: -5px; }
.ttn-szala__os { position: absolute; left: 50%; top: var(--ttn-py); width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #fff1c8, #c9a84c 60%, #8b6b2e); box-shadow: 0 0 0 3px rgba(12, 10, 24, 0.6), 0 0 0 4px rgba(232, 201, 120, 0.6); }
.ttn-misa {
    --ttn-znak: -1;
    position: absolute; width: calc(var(--ttn-w) * 0.4); height: calc(var(--ttn-s) + var(--ttn-w) * 0.08);
    left: calc(50% + var(--ttn-znak) * var(--ttn-l) * cos(var(--ttn-kat)));
    top: calc(var(--ttn-py) + var(--ttn-znak) * var(--ttn-l) * sin(var(--ttn-kat)));
    transform: translateX(-50%); pointer-events: none; color: var(--ttn-tak);
}
.ttn-misa--nie { --ttn-znak: 1; color: var(--ttn-nie); }
.ttn-misa svg { transition: filter 0.5s ease; }
.ttn-misa__etykieta { position: absolute; left: 0; right: 0; bottom: calc(var(--ttn-w) * -0.075); text-align: center; font: 600 0.75rem/1 var(--sg-font-tekst); letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.75; transition: opacity 1s ease, text-shadow 1s ease; }
.ttn-misa.is-nad .ttn-misa__etykieta, .ttn-szala.is-gotowa .ttn-misa.is-wybrana .ttn-misa__etykieta { opacity: 1; text-shadow: 0 0 14px currentColor; }
.ttn-misa.is-nad svg { filter: drop-shadow(0 0 8px currentColor); }
.ttn-szala.is-gotowa .ttn-misa.is-wybrana svg { filter: drop-shadow(0 0 12px currentColor); }

/* karta: nad belką, po odkryciu zjeżdża na misę */
.ttn-karta {
    position: absolute; z-index: 3; display: block; width: var(--ttn-cw); padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
    left: calc(50% + var(--ttn-hx) * var(--ttn-strona) * var(--ttn-l) * cos(var(--ttn-kat)));
    top: calc((1 - var(--ttn-lad)) * var(--ttn-w) * 0.02 + var(--ttn-lad) * (var(--ttn-py) + var(--ttn-strona) * var(--ttn-l) * sin(var(--ttn-kat)) + var(--ttn-w) * 0.435 - var(--ttn-cw) * 1.8 * var(--ttn-mala)));
    transform: translateX(-50%) scale(calc(1 - var(--ttn-lad) * (1 - var(--ttn-mala)))) rotate(calc(var(--ttn-strona) * 9deg * (1 - var(--ttn-lad) * var(--ttn-lad))));
    transform-origin: 50% 0;
}
.ttn-karta:hover, .ttn-karta:focus, .ttn-karta:disabled { background: transparent; }
.ttn-karta:disabled { cursor: default; opacity: 1; }
.ttn-karta__wnetrze { display: block; position: relative; aspect-ratio: 351 / 630; }
.ttn-karta:not(.is-odkryta) .ttn-karta__wnetrze { animation: ttn-unoszenie 5s ease-in-out infinite; }
.ttn-karta__lico, .ttn-karta__rewers { display: block; position: absolute; inset: 0; overflow: hidden; border-radius: 8px; }
.ttn-karta__lico { background: var(--ttn-papier); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(201, 168, 76, 0.5); overflow: visible; }
.ttn-karta__lico img { border-radius: 8px; }
.ttn-karta__lico img:not([src]) { visibility: hidden; }
.ttn-karta .ttn-karta__wnetrze img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ttn-karta__rewers { z-index: 1; -webkit-mask-image: linear-gradient(to top, transparent calc(var(--ttn-swit) - 12%), #000 var(--ttn-swit)); mask-image: linear-gradient(to top, transparent calc(var(--ttn-swit) - 12%), #000 var(--ttn-swit)); }
.ttn-karta__zorza { position: absolute; z-index: 2; left: -10%; right: -10%; height: 30%; bottom: calc(var(--ttn-swit) - 18%); opacity: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(255, 240, 205, 0.95), rgba(232, 201, 119, 0.6) 42%, rgba(217, 184, 94, 0) 75%); filter: blur(5px); mix-blend-mode: screen; }
.ttn-szala.is-swit .ttn-karta .ttn-karta__wnetrze { animation: ttn-swit 2.4s cubic-bezier(0.45, 0.05, 0.35, 1) 0.3s forwards; }
.ttn-szala.is-swit .ttn-karta__zorza { animation: ttn-zorza 2.4s ease 0.3s forwards; }
.ttn-szala.is-swit .ttn-szala__poswiata { animation: ttn-poswiata 2.9s ease forwards; }
.ttn-karta.is-odkryta { cursor: default; }
.ttn-karta.is-odkryta .ttn-karta__wnetrze { --ttn-swit: 118%; }
.ttn-karta.is-odkryta .ttn-karta__rewers { visibility: hidden; }
.ttn-karta.is-ukryta { opacity: 0; }
.ttn-karta.is-wyskok { animation: ttn-wyskok 1s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }
.ttn-karta.is-leci .ttn-karta__lico { box-shadow: 0 0 0 1px rgba(232, 201, 120, 0.8), 0 0 28px 4px rgba(232, 201, 120, 0.45), 0 18px 36px rgba(0, 0, 0, 0.55); }
/* znak dłoni tylko na karcie czekającej na kliknięcie */
.ttn-szala.is-czeka .ttn-karta:not(:disabled)::after {
    content: ''; position: absolute; left: 50%; bottom: 16px; z-index: 5; width: 40px; height: 40px; margin-left: -20px; border: 1px solid rgba(232, 201, 120, 0.8); border-radius: 50%; pointer-events: none;
    background: rgba(18, 14, 26, 0.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V5.5a1.5 1.5 0 0 1 3 0V10m0-1.5a1.5 1.5 0 0 1 3 0V11m0-1a1.5 1.5 0 0 1 3 0v4.5c0 3.6-2.4 6.5-6 6.5-2.4 0-3.8-1.1-5-3l-2.6-4.2a1.5 1.5 0 0 1 2.4-1.8L9 14' fill='none' stroke='%23E8C978' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
    animation: ttn-dotknij 3.2s ease-out infinite;
}

/* tasowanie, iskry i smuga */
.ttn-duch {
    position: absolute; z-index: 2; border-radius: 8px; pointer-events: none; transform-origin: 50% 92%;
    background: radial-gradient(ellipse 75% 70% at 45% 38%, #efe3c4 0%, #d8c597 50%, #bba474 88%, #a48d5f 100%);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 0 0 1.5px rgba(255, 243, 207, 0.85), inset 0 0 0 8px rgba(0, 0, 0, 0), inset 0 0 0 9px rgba(94, 66, 18, 0.45), inset 0 0 0 14px rgba(0, 0, 0, 0), inset 0 0 0 15px rgba(94, 66, 18, 0.22);
    animation: ttn-tasowanie 3s cubic-bezier(0.45, 0, 0.3, 1) var(--ttn-gd, 0ms) both;
}
.ttn-duch.is-gasnie { animation: ttn-duch-gasnie 0.5s ease forwards; }
.ttn-iskry { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ttn-iskra { position: absolute; width: var(--ttn-rozmiar); height: var(--ttn-rozmiar); border-radius: 50%; background: radial-gradient(circle, #fffaf0 0%, #e8c977 45%, rgba(217, 184, 94, 0) 70%); box-shadow: 0 0 12px rgba(217, 184, 94, 0.85); opacity: 0; animation: ttn-iskra 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) var(--ttn-opoznienie, 0ms) forwards; }
.ttn-smuga { position: absolute; width: var(--ttn-rozmiar); height: var(--ttn-rozmiar); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fffaf0 0%, #e8c977 50%, rgba(217, 184, 94, 0) 72%); animation: ttn-smuga 1.1s ease-out forwards; }

/* ---------- wynik ---------- */
.ttn-wynik { display: none; width: 100%; max-width: 32.5rem; margin: 0 auto; text-align: center; }
.ttn-wynik.is-widoczny { display: block; }
.ttn-wynik.is-widoczny > * { animation: ttn-wejscie 0.6s ease both; }
.ttn-wynik.is-widoczny > :nth-child(2) { animation-delay: 0.1s; }
.ttn-wynik.is-widoczny > :nth-child(3) { animation-delay: 0.25s; }
.ttn-wynik.is-widoczny > :nth-child(4) { animation-delay: 0.4s; }
.ttn-wynik.is-widoczny > :nth-child(5) { animation-delay: 0.5s; }
.ttn-wynik__slowo { margin: 0.375rem 0 0; font: 500 clamp(4.5rem, 14vw, 6.75rem)/0.95 var(--sg-font-naglowek); letter-spacing: -0.02em; text-transform: capitalize; }
.ttn-wynik__slowo--tak { --ttn-c1: #a8853f; --ttn-c2: #e8c978; color: var(--ttn-tak); text-shadow: 0 0 34px rgba(232, 201, 120, 0.35); }
.ttn-wynik__slowo--nie { --ttn-c1: #6e6894; --ttn-c2: #b9b3d6; color: var(--ttn-nie); text-shadow: 0 0 34px rgba(185, 179, 214, 0.3); }
.ttn-wynik__slowo.is-polysk {
    color: transparent; text-shadow: none;
    background: linear-gradient(100deg, var(--ttn-c1) 0%, var(--ttn-c2) 35%, #fffdf5 48%, var(--ttn-c2) 62%, var(--ttn-c1) 100%);
    background-size: 260% 100%; -webkit-background-clip: text; background-clip: text;
    animation: ttn-polysk-slowa 2.6s ease-out 0.2s both, ttn-wejscie 0.6s ease both;
}
.ttn-wynik__karta { margin: 0.625rem 0 0; font-size: 0.90625rem; color: rgba(244, 239, 230, 0.74); }
.ttn-wynik__karta b { margin-left: 0.375rem; font: italic 500 1.4rem/1.2 var(--sg-font-naglowek); color: var(--sg-papier); }
.ttn-wynik__tekst { margin: 0.875rem 0 0; font: italic 400 1.4rem/1.45 var(--sg-font-naglowek); color: var(--sg-papier); }
.ttn-wynik__wiecej { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.875rem; font-size: 0.9375rem; color: var(--sg-zloto-jasne); text-decoration: underline; text-decoration-color: rgba(212, 176, 90, 0.42); text-underline-offset: 4px; }
.ttn-wynik__wiecej::after { content: '↗'; content: '↗' / ''; }
.ttn-wynik__wiecej:hover { color: var(--sg-papier); }

/* ---------- kwestionariusz: kartka na jasnym pasie ---------- */
.ttn-mostek { padding-block: 4.5rem 0.5rem; scroll-margin-top: 1rem; }
.ttn-mostek::before, .ttn-pytanie::before { content: ''; position: absolute; left: 50%; top: 0; width: min(560px, 70%); height: 1px; transform: translateX(-50%); background: var(--sg-linia-zlota); }
.ttn-mostek:not([hidden]) + .ttn-pytanie::before { display: none; }
.ttn-mostek .kzw { --kzw-ground: var(--ttn-kartka); --kzw-miara: 43rem; }
.ttn-mostek .kzw__plyta { padding: 2.75rem 3rem 2.25rem; border: 1px solid #e3d7c0; border-top: 3px solid #c9a84c; border-radius: 2px; box-shadow: 0 24px 50px -24px rgba(28, 26, 23, 0.25); }
.ttn-mostek .kzw__plyta::before { display: none; }
.ttn-mostek .kzw__naglowek { margin: 0; font: 500 clamp(1.8125rem, 4.8vw, 2.5rem)/1.12 var(--sg-font-naglowek); letter-spacing: -0.005em; color: var(--ttn-atrament); }
.ttn-mostek .kzw__lede { margin: 0; font-style: normal; color: var(--ttn-atrament-2); }

/* ---------- jak zadać pytanie ---------- */
.ttn-pytanie { padding-block: 6.5rem 3.75rem; }
.ttn-mostek:not([hidden]) + .ttn-pytanie { padding-top: 7rem; }
.ttn-pary { display: grid; gap: 0.875rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.ttn-para { margin: 0; padding: 1.125rem 1.25rem 1rem; border: 1px solid var(--ttn-linia); border-radius: 8px; background: var(--ttn-kartka); box-shadow: 0 10px 26px -18px rgba(28, 26, 23, 0.3); }
.ttn-para__wiersz { display: grid; grid-template-columns: 4.875rem 1fr; gap: 0.625rem; align-items: baseline; }
.ttn-para__wiersz + .ttn-para__wiersz { margin-top: 0.625rem; padding-top: 0.625rem; border-top: 1px dashed var(--ttn-linia); }
.ttn-para__etykieta { font: 600 0.65625rem/1.6 var(--sg-font-tekst); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ttn-atrament-2); }
.ttn-para__wiersz--pytaj .ttn-para__etykieta { color: var(--ttn-mosiadz-tekst); }
.ttn-para__zdanie { margin: 0; font: italic 400 1.3rem/1.4 var(--sg-font-naglowek); }
.ttn-para__wiersz--bylo .ttn-para__zdanie { color: var(--ttn-atrament-2); text-decoration: line-through; text-decoration-color: rgba(107, 30, 42, 0.45); text-decoration-thickness: 1.5px; }
.ttn-para__wiersz--pytaj .ttn-para__zdanie { color: var(--ttn-atrament); text-decoration: underline; text-decoration-color: rgba(217, 184, 94, 0); text-decoration-thickness: 0.32em; text-underline-offset: -0.12em; text-decoration-skip-ink: none; transition: text-decoration-color 1.4s ease 0.3s; }
.ttn-para.is-widoczna .ttn-para__wiersz--pytaj .ttn-para__zdanie { text-decoration-color: rgba(217, 184, 94, 0.45); }
.ttn-para__wiersz--pytaj .ttn-para__zdanie--zwykle { font: 400 1rem/1.5 var(--sg-font-tekst); text-decoration: none; }
.ttn-pary__po { margin: 1.5rem 0 0; font-size: 1rem; color: var(--ttn-atrament-2); }

/* ---------- 22 karty na dwóch misach ---------- */
.ttn-karty { padding-block: 5rem; }
.ttn-karty::before {
    content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(ellipse 60% 70% at 80% 0%, rgba(122, 36, 51, 0.22), transparent 60%),
        radial-gradient(ellipse 60% 70% at 10% 100%, rgba(70, 52, 120, 0.22), transparent 65%),
        var(--ttn-noc-karty);
}
.ttn-karty::after { content: ''; position: absolute; bottom: 0; left: 50%; width: min(560px, 70%); height: 1px; transform: translateX(-50%); background: var(--sg-linia-zlota); pointer-events: none; }
.ttn-karty .sg-h2 { color: var(--ttn-jasny); }
.ttn-karty__lede { margin: 0 0 1rem; color: var(--ttn-jasny); }
.ttn-karty__szala { display: flex; justify-content: center; margin: 0.375rem 0 1.625rem; color: var(--sg-zloto-jasne); }
.ttn-szala-mala { display: block; width: min(300px, 80%); height: auto; overflow: visible; }
.ttn-misy { display: grid; gap: 1.875rem; }
.ttn-misy__kolumna { --ttn-c: var(--ttn-tak); }
.ttn-misy__kolumna--nie { --ttn-c: var(--ttn-nie); }
.ttn-misy__tytul { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.625rem; font: 600 0.78125rem/1 var(--sg-font-tekst); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ttn-c); }
.ttn-misy__tytul::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--ttn-c), transparent); opacity: 0.5; }
.ttn-misy__lista { margin: 0; padding: 0; list-style: none; }
.ttn-wpis { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0.875rem; align-items: start; margin: 0; padding: 0.75rem 0; border-bottom: 1px solid rgba(212, 176, 90, 0.16); transition: background 0.8s ease; }
.ttn-karty .ttn-wpis__mini { display: block; width: 40px; height: auto; aspect-ratio: 351 / 630; object-fit: cover; border-radius: 4px; background: #2a2238; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 176, 90, 0.3); }
.ttn-wpis__nazwa { margin: 0; font: 500 1.4rem/1.2 var(--sg-font-naglowek); color: var(--ttn-jasny); }
.ttn-wpis__nazwa a { color: var(--ttn-jasny); text-decoration: underline; text-decoration-color: rgba(232, 201, 120, 0.4); }
.ttn-wpis__nazwa a:hover { color: var(--sg-zloto-jasne); }
.ttn-wpis__nr { margin-right: 0.5rem; font: italic 400 1.05rem/1 var(--sg-font-naglowek); color: var(--ttn-c); }
.ttn-wpis__zdanie { margin: 0.1875rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ttn-jasny-2); }
.ttn-wpis__zdanie::first-letter { text-transform: uppercase; }
.ttn-wpis__znacznik { display: none; margin: 0 0 0.375rem; padding: 0.3125rem 0.5rem; border-radius: 2px; background: var(--ttn-c); font: 600 0.625rem/1 var(--sg-font-tekst); letter-spacing: 0.16em; text-transform: uppercase; color: #1a1406; }
.ttn-wpis.is-twoja { margin-left: -0.75rem; padding-left: 0.75rem; background: linear-gradient(90deg, rgba(232, 201, 120, 0.14), transparent 85%); box-shadow: inset 3px 0 0 var(--ttn-c); }
.ttn-wpis.is-twoja .ttn-wpis__znacznik { display: inline-block; }
.ttn-karty .ttn-wpis.is-twoja .ttn-wpis__mini { box-shadow: 0 0 0 2px var(--ttn-c), 0 0 22px rgba(232, 201, 120, 0.45); }
.ttn-misy__wiecej { display: none; margin: 1.75rem 0 0; text-align: center; }
.sg-btn.ttn-misy__przycisk { padding: 0.875rem 1.375rem; border-color: rgba(232, 201, 120, 0.6); border-radius: 2px; background: transparent; font-size: 0.96875rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none; color: var(--ttn-jasny); }
.sg-btn.ttn-misy__przycisk:hover, .sg-btn.ttn-misy__przycisk:focus { border-color: var(--sg-zloto-jasne); background: rgba(212, 176, 90, 0.12); color: var(--ttn-jasny); }

/* ---------- pytania ---------- */
.ttn-faq { padding-block: 4.5rem 3.75rem; }
.ttn-faq__lista { margin-top: 0.25rem; border-top: 1px solid var(--ttn-linia); }
.ttn-faq__pozycja { border-bottom: 1px solid var(--ttn-linia); }
.ttn-faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.125rem 0; list-style: none; cursor: pointer; font: 500 1.4rem/1.3 var(--sg-font-naglowek); }
.ttn-faq summary::-webkit-details-marker { display: none; }
.ttn-faq summary span { position: relative; flex: none; width: 1rem; height: 1rem; margin-top: 0.4rem; color: var(--ttn-mosiadz); transition: transform 0.2s; }
.ttn-faq summary span::before, .ttn-faq summary span::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor; }
.ttn-faq summary span::after { transform: rotate(90deg); }
.ttn-faq details[open] summary span { transform: rotate(45deg); }
.ttn-faq__pozycja > p { margin: 0 0 1.25rem; font-size: 1rem; color: var(--ttn-atrament-2); }

/* ---------- zakończenie: nocny blok na papierze ---------- */
.ttn-koniec { padding-block: 1.5rem 4rem; }
.ttn-koniec__blok { position: relative; padding: 3rem 1.5rem 2.5rem; border-radius: 4px; background: linear-gradient(180deg, #1c1528, #120e1a); text-align: center; color: var(--ttn-jasny); }
.ttn-koniec__blok::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(212, 176, 90, 0.35); border-radius: 5px; pointer-events: none; }
.ttn-koniec__szala { width: 92px; margin: 0 auto 0.5rem; color: var(--sg-zloto-jasne); }
.ttn-koniec .sg-h2 { max-width: 20ch; margin: 0 auto 0.75rem; color: var(--ttn-jasny); }
.ttn-koniec__tekst { max-width: 44ch; margin: 0 auto 1.5rem; color: var(--ttn-jasny-2); }
.ttn-opinia { max-width: 46ch; margin: 0 auto 1.375rem; padding: 1rem 1.125rem; border-left: 2px solid var(--ttn-zloto); background: rgba(255, 255, 255, 0.03); text-align: left; }
.ttn-opinia__gwiazdki { font-size: 0.875rem; letter-spacing: 0.14em; color: var(--sg-zloto-jasne); }
.ttn-opinia blockquote { margin: 0.375rem 0 0; padding: 0; border: 0; background: none; font: italic 400 1.25rem/1.45 var(--sg-font-naglowek); color: var(--ttn-jasny); }
.ttn-opinia figcaption { margin-top: 0.5rem; font-size: 0.84375rem; color: #a89d89; }
.ttn-koniec__cta { position: relative; }
.ttn-koniec__cta::after { content: '→'; content: '→' / ''; }
.ttn-koniec__cta:hover::after, .ttn-koniec__cta:focus-visible::after { transform: translateX(4px); }
.ttn-koniec__pod { margin: 0.875rem auto 0; font-size: 0.875rem; color: #a89d89; }

@keyframes ttn-polysk-h1 { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes ttn-kolysanie { 0%, 100% { --ttn-kat: -1.8deg; } 50% { --ttn-kat: 1.8deg; } }
@keyframes ttn-unoszenie { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ttn-dotknij { 0% { box-shadow: 0 0 0 0 rgba(232, 201, 120, 0.55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(232, 201, 120, 0); } }
/* tasowanie: wachlarz, zebranie, dwa przełożenia połówek, zebranie w talię */
@keyframes ttn-tasowanie {
    0% { transform: none; opacity: 0; }
    6% { opacity: 1; }
    18% { transform: rotate(var(--ttn-gr)) translate(var(--ttn-gx), -6%); }
    30% { transform: none; }
    44% { transform: translate(var(--ttn-sx), -3%) rotate(var(--ttn-sr)); }
    56% { transform: none; }
    70% { transform: translate(calc(var(--ttn-sx) * -0.8), -3%) rotate(calc(var(--ttn-sr) * -0.8)); }
    82%, 100% { transform: translateY(calc(var(--ttn-gi) * 1.2%)); opacity: 1; }
}
@keyframes ttn-duch-gasnie { to { opacity: 0; transform: translateY(calc(var(--ttn-gi) * 1.2% + 4%)); } }
@keyframes ttn-wyskok { 0% { opacity: 0; translate: 0 10%; scale: 0.92; } 25% { opacity: 1; } 55% { translate: 0 -14%; scale: 1.07; } 100% { translate: 0 0; scale: 1; } }
@keyframes ttn-swit { from { --ttn-swit: 0%; } to { --ttn-swit: 118%; } }
@keyframes ttn-zorza { 0% { opacity: 0; } 12%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ttn-poswiata { 0% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.25); filter: brightness(2); } 100% { transform: translate(-50%, -50%) scale(1.08); filter: brightness(1.3); } }
@keyframes ttn-iskra { 0% { opacity: 0; transform: translate(0, 0) scale(0.3); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--ttn-x), var(--ttn-y)) scale(1); } }
@keyframes ttn-smuga { 0% { opacity: 0.95; transform: scale(1); } 100% { opacity: 0; transform: translateY(14px) scale(0.2); } }
@keyframes ttn-polysk-slowa { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes ttn-wejscie { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (min-width: 760px) {
    .ttn-pary { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 820px) {
    .ttn-misy { grid-template-columns: 1fr 1fr; gap: 2.75rem; }
}
@media (min-width: 900px) {
    .ttn-hero { grid-template-columns: minmax(0, 1fr) 27.5rem; grid-template-rows: auto 1fr; column-gap: 3.5rem; row-gap: 0; align-items: start; max-width: 65.5rem; }
    .ttn-hero__glowa { grid-column: 1; grid-row: 1; max-width: none; margin: 0; padding-top: 3.75rem; text-align: left; }
    .ttn-scena.is-otwarta .ttn-hero__glowa { padding-top: 0; }
    .ttn-kreska, .ttn-hero__lede, .ttn-hero__jak { margin-left: 0; }
    .ttn-hero__narzedzie { grid-column: 2; grid-row: 1 / span 2; }
    .ttn-szala { --ttn-w: 26.25rem; }
    .ttn-wynik { grid-column: 1; grid-row: 2; max-width: 32.5rem; margin: 1.625rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(201, 168, 76, 0.3); text-align: left; }
}
@media (max-width: 819px) {
    .ttn-misy.is-skrocona .ttn-wpis:nth-child(n+6) { display: none; }
    .ttn-misy.is-skrocona .ttn-wpis.is-twoja { display: grid; }
    .ttn-misy.is-skrocona ~ .ttn-misy__wiecej { display: block; }
}
@media (max-width: 639px) {
    .ttn-scena.is-otwarta { padding-bottom: 3rem; }
    .ttn-mostek { padding-top: 2.75rem; }
    .ttn-mostek .kzw__plyta { padding: 1.875rem 1.125rem 1.5rem; }
    .ttn-mostek:not([hidden]) + .ttn-pytanie { padding-top: 2.25rem; }
    .ttn-pytanie { padding-bottom: 2.875rem; }
    .ttn-faq { padding-bottom: 2.875rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ttn *, .ttn *::before, .ttn *::after { animation: none; transition: none; }
}