/* NV Casino Polska – arkusz stylów (style.css) */

:root{
  /* Paleta NV Casino – fiolet + róż jak w banerze */
  --tlo:#0f0a1a; --powierzchnia:#181127; --powierzchnia-2:#22183a; --linia:#33264f;
  --tekst:#efeaf7; --tekst-przygaszony:#a99cc2;
  --marka:#7c3aed; --marka-2:#b5179e; --marka-najechanie:#9333ea;
  --marka-gradient:linear-gradient(135deg,var(--marka),var(--marka-2));
  --akcent:#c9a7ff;            /* linki i wyróżnienia */
  --akcent-tekst:#ffffff;        /* tekst na przyciskach */
  --kolor-zalety:#2ecc71; --kolor-wady:#ff4d6d; --zaokraglenie:14px; --szerokosc:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--tlo);color:var(--tekst);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--akcent)}
.kontener{max-width:var(--szerokosc);margin:0 auto;padding:0 16px}
h1,h2,h3,h4{line-height:1.2;overflow-wrap:anywhere}
h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 .5rem}
h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:2.6rem 0 .8rem;scroll-margin-top:84px}
h3{font-size:1.2rem;margin:1.6rem 0 .5rem;scroll-margin-top:84px}

/* Nagłówek */
.naglowek{position:sticky;top:0;z-index:50;background:rgba(15,10,26,.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--linia)}
.naglowek .kontener{display:flex;align-items:center;justify-content:space-between;gap:12px;height:68px}
.przyciski-konta{display:flex;gap:8px}
.przycisk{display:inline-block;padding:10px 18px;border-radius:999px;font-weight:700;text-decoration:none;text-align:center;white-space:nowrap}
.przycisk-glowny{background:var(--marka-gradient);color:var(--akcent-tekst);box-shadow:0 6px 20px rgba(124,58,237,.35);transition:filter .15s,transform .15s}
.przycisk-glowny:hover{filter:brightness(1.12);transform:translateY(-1px)}
.przycisk-obrys{border:1px solid var(--linia);color:var(--tekst)}
.przycisk-obrys:hover{border-color:var(--marka)}
.przycisk-duzy{padding:14px 28px;font-size:1.05rem}

/* Baner */
.baner{background:radial-gradient(circle at 80% 30%,rgba(124,58,237,.35),transparent 60%),linear-gradient(135deg,#1d1036,#0f0a1a);border-bottom:1px solid var(--linia)}
.baner .kontener{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:center;padding-top:36px;padding-bottom:36px}
.baner-bonus{font-size:clamp(1.4rem,3.4vw,2.2rem);font-weight:800;margin:.2rem 0 1rem}
.baner-bonus span{background:linear-gradient(90deg,#c9a7ff,#ff7ad9);-webkit-background-clip:text;background-clip:text;color:transparent}
.baner-uwaga{font-size:.85rem;color:var(--tekst-przygaszony);margin-top:.8rem}
.baner-obraz{margin:0;border-radius:var(--zaokraglenie);overflow:hidden;box-shadow:0 20px 50px rgba(124,58,237,.3);border:1px solid var(--linia)}
.baner-obraz img{width:100%;height:auto;aspect-ratio:1200/667;object-fit:cover}

/* Autor i data */
.informacje-autor{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.9rem;color:var(--tekst-przygaszony);margin:.4rem 0 1.2rem}

/* Bloki */
.karta{background:var(--powierzchnia);border:1px solid var(--linia);border-radius:var(--zaokraglenie);padding:18px 20px;margin:16px 0}
.tabela-kontener{overflow-x:auto;margin:16px 0;border:1px solid var(--linia);border-radius:var(--zaokraglenie)}
table{width:100%;border-collapse:collapse;background:var(--powierzchnia);min-width:560px}
caption{text-align:left;font-weight:700;padding:12px 14px;background:var(--powierzchnia-2)}
th,td{padding:10px 14px;border-bottom:1px solid var(--linia);text-align:left;vertical-align:top}
thead th{background:var(--powierzchnia-2);font-size:.9rem;color:var(--tekst-przygaszony)}
tbody th{font-weight:600;width:38%}
.fakty table{min-width:0}

/* Spis treści */
.spis-tresci ol{margin:0;padding-left:1.2rem;columns:2;column-gap:28px}
.spis-tresci li{margin:.3rem 0;break-inside:avoid}
.spis-tresci a{color:var(--tekst);text-decoration:none}
.spis-tresci a:hover{color:var(--akcent)}
.spis-tresci-tytul{margin:0 0 8px;font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.06em;color:var(--tekst-przygaszony)}

/* Zalety i wady */
.zalety-wady{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.zalety-wady .karta h3{margin-top:0}
.zalety-wady .zalety{border-top:3px solid var(--kolor-zalety)}
.zalety-wady .wady{border-top:3px solid var(--kolor-wady)}

/* Kroki */
.kroki{counter-reset:s;list-style:none;padding:0}
.kroki li{counter-increment:s;position:relative;padding:10px 0 10px 48px;border-bottom:1px dashed var(--linia)}
.kroki li::before{content:counter(s);position:absolute;left:0;top:8px;width:32px;height:32px;border-radius:50%;background:var(--marka);color:var(--akcent-tekst);font-weight:800;display:grid;place-items:center}

/* Siatki */
.siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
#sloty + .siatka{grid-template-columns:repeat(4,1fr)}
@media (max-width:800px){#sloty + .siatka{grid-template-columns:repeat(2,1fr);gap:10px}}
.siatka .karta{margin:0}
.siatka .karta h3,.siatka .karta h4{margin-top:0}
.karta-slotu{background:var(--powierzchnia);border:1px solid var(--linia);border-radius:var(--zaokraglenie);overflow:hidden;text-decoration:none;color:var(--tekst)}
.karta-slotu .miniatura{aspect-ratio:1/1;background:var(--powierzchnia-2);overflow:hidden}
.karta-slotu .miniatura img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.karta-slotu:hover .miniatura img{transform:scale(1.05)}
.karta-slotu .opis{padding:10px 12px}
.karta-slotu .opis b{display:block}
.karta-slotu .opis small{color:var(--tekst-przygaszony)}

figure{margin:18px 0}
figcaption{font-size:.85rem;color:var(--tekst-przygaszony);margin-top:6px}

.wezwanie{text-align:center;margin:24px 0}

/* Często zadawane pytania */
.pytania details{background:var(--powierzchnia);border:1px solid var(--linia);border-radius:var(--zaokraglenie);margin:10px 0;padding:0 18px}
.pytania summary{cursor:pointer;padding:14px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.pytania summary::-webkit-details-marker{display:none}
.pytania summary::after{content:"+";flex:0 0 auto;color:var(--akcent);font-size:1.2rem}
.pytania details[open] summary::after{content:"–"}
.pytania details p{margin:0 0 14px}

/* Odpowiedzialna gra */
.gra-odpowiedzialna{border-left:4px solid var(--kolor-wady)}

/* Stopka */
.stopka{border-top:1px solid var(--linia);margin-top:48px;padding:28px 0 90px;font-size:.88rem;color:var(--tekst-przygaszony)}
.stopka nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:12px}
.stopka nav a{color:var(--tekst-przygaszony)}
.znak-18{display:inline-grid;place-items:center;width:34px;height:34px;border:2px solid var(--tekst-przygaszony);border-radius:50%;font-weight:800;margin-right:8px}

/* Dolny pasek przycisków (mobile) */
.pasek-mobilny{display:none}

@media (max-width:800px){
  .baner .kontener{grid-template-columns:1fr}
  .baner .kontener{padding-top:16px;gap:16px}
  .baner-obraz{order:-1}
  .zalety-wady{grid-template-columns:1fr}
  .spis-tresci ol{columns:1}
  .naglowek .przyciski-konta{display:none}          /* na telefonie tylko dolny pasek przycisków */
  .naglowek .kontener{height:56px}
  body{padding-bottom:72px}                   /* pasek nie zasłania treści */
  .stopka{padding-bottom:28px}
  .pasek-mobilny{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px;background:rgba(15,10,26,.97);border-top:1px solid var(--linia)}
  .pasek-mobilny .przycisk{flex:1}
}
  .baner-nadtytul{margin:0;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--akcent)}
/* Akcenty marki */
.spis-tresci{border-left:3px solid var(--marka)}
thead th,caption{border-bottom:2px solid var(--marka)}
.karta-slotu:hover{border-color:var(--marka)}

/* Miganie przycisków (klasę .migaj dodaje skrypt.js) */
@keyframes migotanie{
  0%,100%{opacity:1;box-shadow:0 6px 20px rgba(124,58,237,.35)}
  50%{opacity:.55;box-shadow:0 0 28px rgba(181,23,158,.75)}
}
.migaj{animation:migotanie 1.2s ease-in-out infinite}
.migaj:hover{animation-play-state:paused;opacity:1}
@media (prefers-reduced-motion:reduce){
  .migaj{animation:none}
}

/* Sekcja rejestracji – obraz + kroki obok siebie */
.rejestracja-uklad{display:grid;grid-template-columns:480px 1fr;gap:28px;align-items:start;margin:18px 0}
.rejestracja-obraz{margin:0}
.rejestracja-obraz img{width:100%;height:auto;border-radius:var(--zaokraglenie);border:1px solid var(--linia);box-shadow:0 16px 40px rgba(124,58,237,.25)}
.rejestracja-tresc > p:first-child{margin-top:0}
.rejestracja-tresc h3{margin-top:1rem}
@media (max-width:800px){
  .rejestracja-uklad{grid-template-columns:1fr;gap:12px}
  .rejestracja-obraz{max-width:643px;margin:0 auto}
}

/* Sekcja aplikacji – zdjęcie */
.aplikacja-obraz img{width:100%;height:auto;border-radius:var(--zaokraglenie);border:1px solid var(--linia);box-shadow:0 16px 40px rgba(124,58,237,.25)}

/* Strona 404 */
.strona-404{text-align:center;padding-top:48px;padding-bottom:24px;max-width:720px}
.strona-404-kod{margin:0;font-size:clamp(5rem,18vw,9rem);font-weight:900;line-height:1;background:var(--marka-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.strona-404 h1{margin:.6rem 0 .4rem}
.strona-404-opis{color:var(--tekst-przygaszony);margin:0 auto 1.6rem;max-width:520px}
.strona-404-przyciski{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.strona-404-linki{text-align:left;margin-top:36px}
.strona-404-linki ul{margin:0;padding-left:1.2rem;display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.strona-404-linki li{margin:.35rem 0}
@media (max-width:800px){.strona-404-linki ul{grid-template-columns:1fr}.strona-404-przyciski .przycisk{flex:1 1 100%}}

/* ===== Wielostronicowość: menu, okruszki, stopka ===== */
.menu-glowne{display:flex;gap:4px;margin-left:auto;margin-right:8px}
.menu-glowne a{color:var(--tekst-przygaszony);text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 12px;border-radius:999px;white-space:nowrap}
.menu-glowne a:hover{color:var(--tekst)}
.menu-glowne a[aria-current="page"]{color:var(--tekst);background:var(--powierzchnia-2)}
.okruszki{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.85rem;color:var(--tekst-przygaszony);margin:24px 0 10px}
.okruszki a{color:var(--tekst-przygaszony)}
.okruszki a:hover{color:var(--akcent)}
article > h1:first-child{margin-top:28px}
.stopka-strony{padding-bottom:12px;border-bottom:1px solid var(--linia)}
.stopka .stopka-strony a{color:var(--tekst);text-decoration:none;font-weight:600}
.stopka .stopka-strony a[aria-current="page"]{color:var(--akcent)}
.zalety-wady .karta h4{margin-top:0}
.gra-odpowiedzialna p{margin:0}
@media (max-width:800px){
  .naglowek .kontener{height:auto;flex-wrap:wrap;padding-top:8px;padding-bottom:6px;row-gap:4px}
  .naglowek .kontener > a img{width:128px;height:auto}
  .menu-glowne{order:3;flex:1 1 100%;margin:0 -4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .menu-glowne a{font-size:.9rem;padding:6px 10px}
}

/* ===== Ilustracje w treści (SVG) ===== */
.nv-figure{margin:24px 0}
.nv-figure img{display:block;width:100%;height:auto;border-radius:12px}
.nv-figure figcaption,.nv-steps figcaption{margin-top:8px;font-size:.85rem;line-height:1.4;color:var(--tekst-przygaszony);text-align:center}
.nv-steps{display:flex;gap:16px;margin:24px 0;padding:0 0 8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.nv-steps figure{flex:0 0 clamp(170px,28%,220px);margin:0;scroll-snap-align:start}
.nv-steps img{display:block;width:100%;height:auto}
@media (max-width:767px){
  .nv-figure{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nv-figure img{min-width:720px}
  .nv-figure figcaption{position:sticky;left:0}
}