/* Spellbinder — style strony. Czcionki hostowane lokalnie (RODO), zestawy latin + latin-ext. */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/cinzel-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/cinzel-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/cinzel-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/cinzel-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/eb-garamond-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/eb-garamond-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Kaushan Script';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/kaushan-script-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Kaushan Script';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/kaushan-script-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/noto-serif-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/noto-serif-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== wspólny szkielet ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{--bg:#121214;--panel:#1c1c20;--text:#e8e4dc;--muted:#a9a294;--line:#34343a;--acc:#8f6236;--acc2:#5cc8ff;--hfont:'Cinzel';--bfont:'Noto Serif';--r:8px;
  background:var(--bg);color:var(--text);font:400 1rem/1.6 var(--bfont),Georgia,serif;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:28px 16px 40px}
a{color:var(--acc2)}
a:focus-visible,button:focus-visible{outline:3px solid var(--acc2);outline-offset:3px}
h1,h2,h3{font-family:var(--hfont),Georgia,serif;font-weight:var(--hw,400);line-height:1.15;color:var(--acc-h,var(--text))}
.pomin{position:absolute;left:-9999px;top:8px;z-index:10;background:#000;color:#fff;padding:8px 14px}
.pomin:focus{left:8px}

/* nagłówek i nawigacja sezonów */
.naglowek{padding:30px 16px 16px;text-align:center}
.naglowek h1{font-size:clamp(1.9rem,5vw,2.8rem)}
.naglowek .sub{color:var(--muted);font-size:.95rem;margin-top:4px}
.menu{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;padding:10px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.92rem}
.menu a{color:var(--text);text-decoration:none;opacity:.85;padding:2px 0}
.menu a:hover{opacity:1}
.menu a[aria-current="page"]{opacity:1;border-bottom:2px solid var(--acc2)}
.menu a.przel{color:var(--acc2);opacity:1}

/* treść */
.wstep{max-width:760px;margin:0 auto 28px;font-size:1.05rem}
.wstep p+p{margin-top:10px}
.sekcja{margin-top:36px}
.sekcja>h2{font-size:1.6rem;margin-bottom:6px;text-align:center}
.sekcja>.lede{color:var(--muted);text-align:center;margin-bottom:18px}
.kafle{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.kafel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;position:relative}
.kafel h3{font-size:1.3rem}
.kafel p{font-size:.95rem;margin-top:6px}
.kafel .stan{display:inline-block;margin-top:10px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:1px 7px}

/* ramka Zaprzyjaźnione strony (wspólna dla stron fanowskich Artura) */
.przyjaciele{display:grid;gap:10px;max-width:420px;margin:0 auto}
.przyjaciele a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;text-decoration:none;color:var(--text)}
.przyjaciele a:hover{border-color:var(--acc2)}
.przyjaciele strong{display:block;font-family:var(--hfont),serif;color:var(--acc-h,var(--text))}
.przyjaciele span{font-size:.88rem;color:var(--muted)}

/* stopka */
.stopka{border-top:1px solid var(--line);padding:18px 16px 26px;text-align:center;font-size:.85rem;color:var(--muted)}
.stopka p+p{margin-top:4px}
.stopka a{color:inherit}

/* ===== SEZON 1 · S1-A „Kamień i błyskawica” ===== */
body.s1{--bg:#23211e;--panel:#2e2b27;--text:#e9e1cf;--muted:#a89f8c;--line:#4a443c;--acc:#8f6236;--acc2:#5cc8ff;--hfont:'Cinzel';--hw:700;--bfont:'EB Garamond';
  background-image:radial-gradient(circle at 20% 10%,rgba(92,200,255,.08),transparent 40%),repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 2px,transparent 2px 7px);background-attachment:fixed;font-size:1.08rem}
.s1 .naglowek h1{text-shadow:0 0 18px rgba(92,200,255,.45)}
.s1 .kafel{box-shadow:0 0 0 1px rgba(92,200,255,.12),0 0 22px rgba(92,200,255,.08)}

/* ===== SEZON 2 · S2-C+ „Jedwab, cynober, złoto i jadeit” ===== */
body.s2{--bg:#f3ead6;--panel:#fbf5e8;--text:#1e1a17;--muted:#6e6253;--line:#c9a043;--acc:#b8291b;--acc2:#2a8564;--hfont:'Kaushan Script';--bfont:'Noto Serif';--acc-h:#a8261a;--r:3px;--cl:rgba(201,160,67,.22);
  background-image:radial-gradient(circle at 0 100%,transparent 14px,var(--cl) 15px,var(--cl) 16px,transparent 17px),radial-gradient(circle at 100% 100%,transparent 14px,var(--cl) 15px,var(--cl) 16px,transparent 17px);background-size:32px 18px}
.s2 a:focus-visible{outline-color:#b8291b}
.s2 .naglowek{background:linear-gradient(180deg,#b02a1c,#8e1f14);border-bottom:3px solid #c9a043;box-shadow:inset 0 -6px 0 #7a1a10,inset 0 -7px 0 #c9a043}
.s2 .naglowek h1{color:#f2c75c;text-shadow:0 2px 0 #5e140c,0 0 18px rgba(242,199,92,.35)}
.s2 .naglowek .sub{color:#f6e3c0}
.s2 .menu{background:#7a1a10;border:0;border-bottom:2px solid #c9a043}
.s2 .menu a{color:#f2d58a}
.s2 .menu a[aria-current="page"]{border-bottom-color:#f2c75c;color:#fff3cf}
.s2 .menu a.przel{color:#7fd6b0}
.s2 .menu a:focus-visible{outline-color:#f2c75c}
.s2 .kafel{border:2px solid #c9a043;outline:1px solid #b8291b;outline-offset:3px}
.s2 .kafel::before,.s2 .kafel::after{content:"";position:absolute;width:12px;height:12px;background:#b8291b;transform:rotate(45deg)}
.s2 .kafel::before{top:-7px;left:-7px}
.s2 .kafel::after{bottom:-7px;right:-7px}
.s2 .kafel .stan{color:#2a8564;border-color:#2a8564}
.s2 .stopka{background:#7a1a10;color:#f2d58a;border-top:2px solid #c9a043}

/* ===== STRONA GŁÓWNA · portal dwóch światów ===== */
.portal{display:flex;min-height:min(78vh,620px);border-radius:12px;overflow:hidden;position:relative}
.polowa{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:32px;text-decoration:none;transition:flex .55s cubic-bezier(.4,0,.2,1),filter .4s;position:relative}
.portal:hover .polowa,.portal:focus-within .polowa{filter:saturate(.55) brightness(.7)}
.portal .polowa:hover,.portal .polowa:focus-visible{flex:1.95;filter:none}
.polowa *{position:relative}
.polowa .nr{font:400 .75rem 'Noto Serif',serif;letter-spacing:.15em;text-transform:uppercase;opacity:.8}
.polowa h2{margin-top:4px}
.polowa p{font-size:.98rem;max-width:360px;margin-top:6px;opacity:.92}
.polowa .wejdz{margin-top:14px;font:400 .9rem 'Noto Serif',serif}
.p1{background:#23211e;color:#e9e1cf;background-image:radial-gradient(circle at 70% 30%,rgba(92,200,255,.25),transparent 45%),repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 2px,transparent 2px 7px)}
.p1 h2{font:700 clamp(1.8rem,4vw,2.4rem)/1.05 'Cinzel',serif;color:#e9e1cf;text-shadow:0 0 20px rgba(92,200,255,.55)}
.p1 p{font-family:'EB Garamond',serif;font-size:1.08rem}
.p1 .wejdz{color:#5cc8ff}
.p2{background:#f3ead6;color:#1e1a17;background-image:linear-gradient(180deg,rgba(176,42,28,.92) 0,rgba(142,31,20,.85) 26%,rgba(243,234,214,0) 58%)}
.p2::before{content:"";position:absolute;inset:0;--cl:rgba(201,160,67,.25);background-image:radial-gradient(circle at 0 100%,transparent 14px,var(--cl) 15px,var(--cl) 16px,transparent 17px),radial-gradient(circle at 100% 100%,transparent 14px,var(--cl) 15px,var(--cl) 16px,transparent 17px);background-size:32px 18px}
.p2::after{content:"";position:absolute;inset:10px;border:2px solid #c9a043;pointer-events:none}
.p2 .nr{color:#7a1a10;opacity:1}
.p2 h2{font:400 clamp(1.8rem,4vw,2.5rem)/1.1 'Kaushan Script',serif;color:#a8261a}
.p2 p{color:#3a302a}
.p2 .wejdz{color:#2a8564}
.p1::after{content:"";position:absolute;top:0;bottom:0;right:0;width:22px;z-index:3;background:linear-gradient(to left,rgba(0,0,0,.42),rgba(0,0,0,.12) 45%,transparent);pointer-events:none} /* styk połówek: delikatny cień (dawniej kolorowy pasek z poświatą) */
.portal-tytul{position:absolute;top:22px;left:0;right:0;text-align:center;pointer-events:none;z-index:5} /* nad cieniem styku (.p1::after z-index 3) i znakiem */
.portal-tytul h1{font:700 clamp(1.3rem,3vw,1.7rem) 'Cinzel',serif;letter-spacing:.2em;color:#fff;text-shadow:0 2px 12px #000}
.portal-tytul span{display:block;font:.88rem 'Noto Serif',serif;color:#ddd;margin-top:2px}
@media (max-width:700px){
  .portal{flex-direction:column;min-height:600px}
  .portal .polowa:hover,.portal .polowa:focus-visible{flex:1.3}
  .p1::after{display:none}
  .p2{background-image:linear-gradient(180deg,rgba(176,42,28,.92) 0,rgba(142,31,20,.85) 8%,rgba(243,234,214,0) 22%)}
  .polowa{padding:44px 26px 28px}
  .portal-tytul{position:static;background:#0f0f10;padding:12px 0}
}
@media (prefers-reduced-motion:reduce){.polowa{transition:none}}

/* dziennik zmian */
.wpis{border-left:3px solid var(--acc2);padding:4px 0 4px 16px;margin-bottom:22px}
.wpis h2{font-size:1.25rem;margin-bottom:4px}

/* ===== kafel-link (dział gotowy) ===== */
a.kafel{display:block;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
a.kafel:hover{border-color:var(--acc2);transform:translateY(-2px)}
a.kafel .stan{color:var(--acc2);border-color:var(--acc2)}
@media (prefers-reduced-motion:reduce){a.kafel{transition:none}a.kafel:hover{transform:none}}

/* ===== strony odcinków ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skok{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:760px;margin:0 auto 26px}
.skok a{min-width:2.2em;padding:3px 0;text-align:center;border:1px solid var(--line);border-radius:4px;text-decoration:none;color:var(--text);font-size:.9rem}
.skok a:hover{border-color:var(--acc2);color:var(--acc2)}
.odcinki{display:grid;gap:16px;max-width:820px;margin:0 auto}
.odcinek{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;scroll-margin-top:16px}
.odcinek header{display:flex;gap:14px;align-items:center;margin-bottom:8px}
.odcinek .nr{flex:0 0 2.4em;height:2.4em;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--acc2);color:var(--acc2);font-family:var(--hfont),serif;font-weight:700}
.odcinek h2{font-size:1.3rem}
.odcinek .data{color:var(--muted);font-size:.88rem}
.odcinek .wyroznienie{display:inline-block;margin-top:10px;font-size:.82rem;padding:2px 9px;border-radius:3px;background:var(--acc);color:#fff}
.odcinek .przypis{margin-top:10px;font-size:.88rem;color:var(--muted);border-left:2px solid var(--line);padding-left:10px}
.odcinek .przypis span{color:var(--text)}
.zrodla-odcinkow{max-width:820px;margin:24px auto 0;font-size:.85rem;color:var(--muted);text-align:center}
.s1 .odcinek .nr{box-shadow:0 0 10px rgba(92,200,255,.3)}
.s2 .skok a{border-color:#c9a043;color:#7a1a10;background:#fbf5e8}
.s2 .skok a:hover{color:#b8291b;border-color:#b8291b}
.s2 .odcinek{border:2px solid #c9a043}
.s2 .odcinek .nr{border:1px solid #c9a043;background:#b8291b;color:#f9e2a6;border-radius:3px}
.s2 .odcinek .przypis{border-left-color:#2a8564}

/* ===== postacie ===== */
.grupa>h2{margin-bottom:16px}
.postacie{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;align-items:start}
.postac{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;scroll-margin-top:16px}
.postac h3{font-size:1.35rem}
.postac .frak{font-size:.85rem;color:var(--acc2);margin:2px 0 8px;letter-spacing:.03em}
.postac>p{font-size:.97rem}
.postac .gra{margin-top:10px;font-size:.9rem;color:var(--muted)}
.postac .gra a{color:var(--text)}
.postac .przypis{margin-top:10px;font-size:.86rem;color:var(--muted);border-left:2px solid var(--line);padding-left:10px}
.postac .przypis span{color:var(--text)}
.postac:target{outline:2px solid var(--acc2);outline-offset:4px}

/* ===== obsada ===== */
table.obsada{width:100%;max-width:900px;margin:0 auto;border-collapse:collapse;table-layout:fixed;background:var(--panel);border:1px solid var(--line)}
.obsada th,.obsada td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.obsada thead th{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400}
.obsada tbody th{font-weight:400;color:var(--acc-h,var(--text))}
.obsada td.swiat{color:var(--muted);font-size:.9rem}
.obsada thead th:nth-child(1){width:42%}
.obsada thead th:nth-child(2){width:30%}
.obsada .uwaga{display:block;font-size:.8rem;color:var(--muted);margin-top:3px}
.obsada tr:target{outline:2px solid var(--acc2);outline-offset:-2px}
@media (max-width:640px){
  .obsada thead{display:none}
  .obsada tr{display:block;border-bottom:1px solid var(--line);padding:8px 12px}
  .obsada th,.obsada td{display:block;border:0;padding:1px 0}
}
.s2 .postac{border:2px solid #c9a043}
.s2 .postac .przypis{border-left-color:#2a8564}
.s2 table.obsada{border:2px solid #c9a043}
.s2 .obsada thead th{color:#7a1a10}

/* ===== działy opisowe: technologia, miejsca, wynalazki, światy ===== */
.spis a{min-width:auto;padding:4px 12px}
.hasla{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
.haslo{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;scroll-margin-top:16px}
.haslo h3{font-size:1.3rem}
.haslo .oryginal{font-family:var(--bfont),serif;font-size:.85rem;color:var(--muted);font-weight:400}
.haslo>p{font-size:.97rem;margin-top:6px}
.haslo .plener{font-size:.9rem;color:var(--acc2)}
.haslo .plener span{color:var(--muted)}
.haslo .przypis{margin-top:10px;font-size:.86rem;color:var(--muted);border-left:2px solid var(--line);padding-left:10px}
.haslo .przypis span{color:var(--text)}
.haslo:target{outline:2px solid var(--acc2);outline-offset:4px}
.s2 .haslo{border:2px solid #c9a043}
.s2 .haslo .przypis{border-left-color:#2a8564}

/* ===== galeria ===== */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;align-items:start}
.zdjecie{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.zdjecie img{display:block;width:100%;height:auto}
.zdjecie a:hover img{opacity:.9}
.zdjecie figcaption{padding:12px 16px 14px}
.zdjecie strong{display:block;font-family:var(--hfont),serif;font-size:1.2rem;color:var(--acc-h,var(--text))}
.zdjecie .rola{display:block;font-size:.93rem;margin-top:4px}
.zdjecie .autor{display:block;font-size:.8rem;color:var(--muted);margin-top:8px}
.zdjecie .autor a{color:var(--muted)}
.s2 .zdjecie{border:2px solid #c9a043}

/* ===== przycisk „W górę” (bez JS; pojawia się po przewinięciu tam, gdzie działa animation-timeline) ===== */
.w-gore{position:fixed;right:16px;bottom:16px;z-index:5;padding:8px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--acc2);color:var(--acc2);text-decoration:none;font-size:.9rem;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.w-gore:hover{background:var(--acc2);color:var(--bg)}
@supports (animation-timeline: scroll()){
  .w-gore{animation:pokaz-w-gore linear both;animation-timeline:scroll(root);animation-range:0 400px}
  @keyframes pokaz-w-gore{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
}
@media print{.w-gore{display:none}}

/* ===== wyszukiwarka ===== */
.szukaj{max-width:640px;margin:0 auto 10px}
.szukaj label{display:block;margin-bottom:6px;color:var(--muted)}
.szukaj-pole{display:flex;gap:8px}
.szukaj input{flex:1;min-width:0;padding:10px 12px;font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.szukaj input:focus{outline:2px solid var(--acc2);outline-offset:1px}
.szukaj button{padding:10px 18px;font:inherit;color:#fff;background:var(--acc);border:0;border-radius:var(--r);cursor:pointer}
.wynik-info{max-width:640px;margin:12px auto;color:var(--muted)}
.wyniki{max-width:640px;margin:0 auto;padding-left:0;list-style:none}
.wyniki li{border-bottom:1px solid var(--line);padding:10px 0}
.wyniki a{font-size:1.05rem}
.wyniki .grupa-wyniku{display:block;font-size:.82rem;color:var(--muted)}

/* ===== STRONA GŁÓWNA · tło i znak przy wyborze świata (v0.13) =====
   Najechanie / fokus na połowę portalu: pod całą stroną przenika przygaszone zdjęcie świata
   (warstwa fixed pod treścią), a znak serialu przesuwa się na środek wybranej połowy.
   Tylko CSS (:has) — bez skryptów. Telefony (brak hover): bez tła, znak stoi na środku. */
.start-tlo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
/* rozmycie i przyciemnienie wypalone w plikach (bez CSS filter) — przenikanie samej przezroczystości jest lekkie */
.start-tlo span{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity .7s ease;will-change:opacity}
.start-tlo .t1{left:-15%;background-image:url(/img/start/tlo-sezon-1.webp);background-position:center top;transform:scaleX(-1)} /* lustro jak .z1 — zamek po lewej, to samo miejsce w spoczynku i po najechaniu */
.start-tlo .t2{background-image:url(/img/start/tlo-sezon-2.webp);background-position:center top} /* góra: kula w prawym górnym rogu nie może wypaść przy szerokich ekranach */
.start-tlo::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 38%,transparent 40%,rgba(18,18,20,.75) 100%)}
body:has(.p1:hover,.p1:focus-visible) .start-tlo .t1,
body:has(.p2:hover,.p2:focus-visible) .start-tlo .t2{opacity:.5}
/* spoczynek: oba światy bardzo blado — zamek po lewej (lustro, żeby zamek trafił na lewą stronę), pałac po prawej,
   przenikanie w środku (maska). Po najechaniu na połowę: wybrany świat .5 na cały ekran, blade tło gaśnie. */
.start-tlo .z1,.start-tlo .z2{opacity:.14}
.start-tlo .z1{left:-15%;background-image:url(/img/start/tlo-sezon-1.webp);background-position:center top;transform:scaleX(-1);
  -webkit-mask-image:linear-gradient(to left,#000 38%,transparent 62%);mask-image:linear-gradient(to left,#000 38%,transparent 62%)}
.start-tlo .z2{background-image:url(/img/start/tlo-sezon-2.webp);background-position:center top;
  -webkit-mask-image:linear-gradient(to right,transparent 40%,#000 62%);mask-image:linear-gradient(to right,transparent 40%,#000 62%)}
body:has(.portal .polowa:hover,.portal .polowa:focus-visible) .start-tlo .z1,
body:has(.portal .polowa:hover,.portal .polowa:focus-visible) .start-tlo .z2{opacity:0}
/* znak jedzie razem z połówkami: warstwa szerokości portalu przesuwana transform (karta graficzna, bez przeliczania układu),
   ta sama krzywa i czas co .polowa (flex). 17.91% = zmierzony środek połowy przy flex 1.95 (32.09% / 67.91%, z paddingiem 32px). Zmiana flex = zmierzyć w przeglądarce.
   Odstęp linii od napisu SPELLBINDER przy portalu 1068px: ok. 29px (~7 mm na iMacu) */
.portal-znak-tor{position:absolute;inset:0;z-index:4;pointer-events:none;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.portal-znak{position:absolute;left:50%;top:48%;width:clamp(110px,14vw,170px);height:auto;transform:translate(-50%,-50%);
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.6))}
.portal:has(.p1:hover,.p1:focus-visible) .portal-znak-tor{transform:translateX(-17.91%)}
.portal:has(.p2:hover,.p2:focus-visible) .portal-znak-tor{transform:translateX(17.91%)}
@media (hover:none){.start-tlo{display:none}.portal .portal-znak-tor{transform:none}}
@media (prefers-reduced-motion:reduce){.start-tlo span,.portal-znak-tor{transition:none}}