/* Wspolny wyglad podstron. Strona glowna zachowuje swoj uklad startowy. */
.spojna-strona {
  color-scheme:dark;
  --tlo:#090b0c; --tlo-2:#111416; --panel:#141719;
  --tekst:#f4f4f2; --tekst-2:#bdc2c5; --muted:#bdc2c5;
  --linia:#ffffff20; --max:1220px;
  --koral:#ff4e58; --koral-2:#ff6570; --niebieski:#e50914;
  --cien:0 16px 44px #0003;
  margin:0; background:#090b0c; color:#f4f4f2;
  font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
.spojna-strona::before,.spojna-strona::after { content:none; }
.spojna-strona .kontener,.spojna-strona .instrukcja-kontener {
  width:min(1220px,calc(100% - 40px)); margin-inline:auto;
}
.spojna-strona .spojny-hero,body[data-root] main>.hero {
  position:relative; isolation:isolate; overflow:hidden; min-height:0;
  padding:48px 0 40px; border:0; border-bottom:1px solid #ffffff20;
  background:radial-gradient(ellipse at 88% 0%,#820e244d,transparent 62%),
    repeating-linear-gradient(0deg,transparent 0 4px,#ffffff03 5px 6px),
    linear-gradient(112deg,#111416,#090b0c 75%);
}
.spojna-strona .spojny-hero::before,body[data-root] main>.hero::before {
  content:"7"; position:absolute; z-index:-1; top:-.16em; right:3%;
  color:transparent; -webkit-text-stroke:1px #ffffff0d;
  font:950 clamp(18rem,36vw,34rem)/1 system-ui,sans-serif;
  transform:rotate(7deg); pointer-events:none;
}
.spojna-strona .spojny-hero::after { content:none; }
.spojna-strona .spojny-hero h1,body[data-root] main>.hero h1 {
  max-width:1000px; margin:22px 0; color:#f4f4f2;
  font-size:clamp(2.15rem,4.5vw,3.6rem); font-weight:850;
  line-height:1.1; letter-spacing:-.045em; text-wrap:balance; overflow-wrap:anywhere;
}
.spojna-strona .spojny-hero h1 span {
  display:inline; margin:0; color:#e50914; font:inherit; letter-spacing:inherit; white-space:normal;
}
.spojna-strona .spojny-hero :is(.lead,.wstep),
.spojna-strona .instrukcja-wstep>div>p,body[data-root] main>.hero .lead {
  max-width:850px; margin:0; color:#bdc2c5; font-size:1.05rem; line-height:1.7;
}
.spojna-strona .spojny-hero :is(.okruszki,.powrot-start) {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0 0 20px; color:#b8bdbf; font-size:.82rem; line-height:1.5;
}
.spojna-strona .spojny-hero .nadtytul {
  margin:0 0 20px; color:#ff6570; font-size:.75rem; font-weight:750; letter-spacing:.12em;
}
.spojna-strona .spojny-hero :is(.etykieta,.status,.poziom) {
  display:inline-flex; align-items:center; gap:8px; margin:0 0 4px;
  padding:6px 11px; border:1px solid #a5222c; border-radius:999px;
  background:#49131c77; color:#ffb0b6; font-size:.75rem; line-height:1.5;
  font-weight:700; letter-spacing:.06em;
}
.spojna-strona .spojny-hero .metryki,.spojna-strona .spojny-hero .meta {
  display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0;
}
.spojna-strona .spojny-hero :is(.metryki,.meta)>span,
.spojna-strona .spojny-hero .etykiety li {
  border:1px solid #ffffff20; border-radius:8px; background:#15181ac9;
  color:#c8cdcf; padding:6px 10px; font-size:.8rem; font-weight:500;
}
.spojna-strona .spojny-hero .akcje { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.spojna-strona main :is(.przycisk,.kontakt-przycisk) {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; max-width:100%; padding:11px 18px; border:1px solid #b72b35;
  border-radius:10px; background:#5a141e; color:#fff; box-shadow:0 8px 24px #0002;
  font:700 .92rem/1.4 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  text-align:center; text-decoration:none;
}
.spojna-strona main :is(.przycisk,.kontakt-przycisk):hover { background:#7a1c29; border-color:#ff6570; }
.spojna-strona main :is(.przycisk-jasny,.przycisk.drugi,.przycisk.ency) {
  background:#1a1e21; border-color:#53595e; color:#f4f4f2;
}
.spojna-strona main :is(.przycisk-discord,.discord-btn,.kontakt-discord) { background:#5865f2; border-color:#8790ff; }
.spojna-strona main :is(.przycisk-discord,.discord-btn,.kontakt-discord):hover { background:#4754df; }
.spojna-strona :focus-visible { outline:3px solid #ff6570; outline-offset:4px; }
.spojna-strona .instrukcja-wstep .adres-glowny { max-width:780px; min-height:94px; }
.spojna-strona .instrukcja-wstep .wybor-metody { max-width:900px; }
.spojna-strona .opisy-wstepne { gap:28px; }
.spojna-strona .opisy-wstepne .wstep { font-size:1rem; }
.spojna-strona .hero-tresc .haslo { margin:0 0 14px; color:#f4f4f2; font-size:1.2rem; }
.spojna-strona .pigulka { background:#141719; border-color:#ffffff20; box-shadow:none; }
.spojna-strona .pigulka-etykieta { color:#ff6570; }
.spojny-discord #tresc>.kontener { width:100%; }
.spojny-discord .spojny-hero { padding-inline:max(20px,calc((100% - 1220px)/2)); gap:40px; }
.spojny-discord #tresc>.kontener>:not(.spojny-hero) { width:min(1220px,calc(100% - 40px)); margin-inline:auto; }
/* Konkurs: te same ciemne panele takze ponizej naglowka. */
.spojny-konkurs :is(.sekcja-kolor,.sekcja-gracza,.sekcja-prawna) { background:#0e1113; }
.spojny-konkurs :is(.panel-gracza,.zasada-karta,.regulamin-rozwijany,.nagroda,.ranking,.spis,.paragraf,.termin,.komunikat-start,.dane-karta,.faq details,.cta) {
  background:#141719; border-color:#ffffff20; box-shadow:0 16px 44px #0003;
}
.spojny-konkurs :is(.sekcja-prawna>.kontener>h2,.regulamin-rozwijany>summary) { color:#f4f4f2; }
.spojny-konkurs .regulamin-rozwijany>summary::after { background:#252a2d; color:#fff; }
.spojny-konkurs .foto { background:radial-gradient(ellipse at 25% 20%,#681524,#15191c 80%); }
.spojny-konkurs .miejsce-foto { background:#111416; color:#c8cdcf; border-color:#62676a; }
.spojny-konkurs :is(.bonus,.pokaz-email) { background:#28161c; color:#ffafb5; border:1px solid #a5222c; }
.spojny-konkurs :is(.email-link,.kategoria) { color:#ffafb5; }
.spojny-konkurs th { background:#22272a; color:#c8cdcf; }
.spojny-konkurs td { color:#bdc2c5; }
.spojny-konkurs .paragraf :is(p,li) { color:#bdc2c5; }
.spojny-konkurs .wazne { background:#302517; color:#eed6ad; }
.spojny-konkurs .wazne strong { color:#ffe0ad; }
.spojny-konkurs :is(.prywatnosc h3,.dane-karta strong) { color:#8ce4b8; }
.spojny-konkurs .spis a:hover,.spojny-konkurs .spis a:focus { background:#38141c; }
/* Encyklopedia: wspolna identyfikacja, bez zmiany katalogu i niezaleznych paneli. */
body[data-root] { background:#090b0c; color:#f4f4f2; --line:#ffffff20; --muted:#bdc2c5; }
body[data-root] .masthead { max-width:none; background:#090b0c; border-bottom:1px solid #ffffff20; padding-block:18px; }
body[data-root] .brand b { color:#e50914; border-color:#74232b; }
body[data-root] .topnav { background:#111416; border-color:#ffffff20; }
body[data-root] :is(.topnav a[aria-current],.eyebrow,.sidebar strong) { color:#ff858d; }
body[data-root] .language-menu { background:#171b1e; border-color:#53595e; }
body[data-root] .language-menu a[aria-current] { background:#4b1821; }
body[data-root] .sidebar .menu-parent { color:#ff9299; }
body[data-root] .sidebar a[aria-current] { background:#3d1720; }
body[data-root] .finder { background:#141719; border-color:#ffffff20; border-top-color:#b72b35; }
body[data-root] .finder button[type=submit] { background:#5a141e; color:#fff; border:1px solid #b72b35; }
body[data-root] .finder button[type=submit]:hover { background:#7a1c29; }
body[data-root] main>.hero { padding:32px 26px; border-radius:14px; border:1px solid #ffffff20; }
body[data-root] main>.hero h1 { margin-top:0; font-size:clamp(2rem,3.5vw,3rem); }
body[data-root] main>.hero .lead { margin-bottom:0; }
body[data-root] main>.hero::after { clear:both; }
@media(max-width:650px) {
  .spojna-strona .kontener,.spojna-strona .instrukcja-kontener { width:calc(100% - 24px); }
  .spojna-strona .spojny-hero { padding:30px 0; }
  .spojna-strona .spojny-hero h1 { margin:20px 0; font-size:clamp(2rem,7.5vw,2.65rem); }
  .spojna-strona .spojny-hero :is(.lead,.wstep),.spojna-strona .instrukcja-wstep>div>p { font-size:1rem; }
  .spojna-strona .spojny-hero::before { top:0; right:-20px; font-size:20rem; }
  .spojna-strona .spojny-hero .akcje { display:grid; grid-template-columns:1fr; }
  .spojna-strona .spojny-hero .akcje .przycisk { width:100%; }
  .spojny-discord .spojny-hero { padding-inline:12px; gap:28px; }
  .spojny-discord #tresc>.kontener>:not(.spojny-hero) { width:calc(100% - 24px); }
  body[data-root] main>.hero { padding:24px 18px; }
  body[data-root] main>.hero h1 { font-size:2rem; }
}
@media print {
  .spojna-strona .spojny-hero,body[data-root] main>.hero { background:none; }
  .spojna-strona .spojny-hero::before,body[data-root] main>.hero::before { content:none; }
}