/* ═══════════════════════════════════════════════════════════════
   EMBERHOLD — strona gry
   ═══════════════════════════════════════════════════════════════ */
:root{
  --noc:#0a0811; --noc2:#110d1b; --panel:#171222; --panel2:#1f1830;
  --linia:rgba(255,200,140,.14); --linia2:rgba(255,200,140,.28);
  --tekst:#f4ecdc; --tekst2:#c9bba3; --tekst3:#8f8270;
  --zar:#ff7a2e; --zar2:#ffb45c; --zloto:#ffd27a; --krew:#d8452f;
  --fiolet:#8b5cf6; --lod:#8fd3ff;
  --C:#b0bec5; --B:#64b5f6; --A:#ba68c8; --S:#ffca28;
  --r:18px; --r2:28px;
  --cien:0 30px 80px -20px rgba(0,0,0,.75), 0 0 0 1px var(--linia);
  --f-tyt:'Cinzel', 'Lora', Georgia, serif;
  --f-txt:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-ser:'Lora', Georgia, serif;
  --max:1240px;
  --nav:72px;
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--noc); color:var(--tekst); font-family:var(--f-txt); font-size:17px; line-height:1.65;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img,video,canvas{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
::selection{background:var(--zar); color:#1a0d00}
.pix{image-rendering:pixelated}

/* ziarno na całej stronie */
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:9000; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.wrap{width:min(var(--max), 100% - 32px); margin-inline:auto}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ── typografia ── */
h1,h2,h3,h4{font-family:var(--f-tyt); font-weight:700; line-height:1.08; margin:0; letter-spacing:.01em}
.oko{display:inline-flex; align-items:center; gap:10px; font:600 12.5px/1 var(--f-txt); letter-spacing:.28em; text-transform:uppercase; color:var(--zar2)}
.oko::before{content:""; width:28px; height:1px; background:linear-gradient(90deg,transparent,var(--zar2))}
.h2{font-size:clamp(34px, 5.2vw, 68px); margin:18px 0 18px}
.zl{background:linear-gradient(180deg,#fff3d6 0%,#ffd27a 45%,#ff9a3c 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 24px rgba(255,140,40,.25))}
.lead{font-size:clamp(17px,1.6vw,20px); color:var(--tekst2); max-width:640px; margin:0}
.srodek{text-align:center} .srodek .lead{margin-inline:auto}
.naglowek{margin-bottom:56px}

/* ── przyciski ── */
.btn{position:relative; display:inline-flex; align-items:center; gap:12px; padding:15px 26px; border-radius:999px; font-weight:650; font-size:16px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s; will-change:transform; white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-zar{color:#200c00; background:linear-gradient(180deg,#ffc070,#ff7a2e 60%,#e2541a); box-shadow:0 10px 40px -8px rgba(255,110,30,.65), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.18)}
.btn-zar:hover{transform:translateY(-2px); box-shadow:0 18px 60px -10px rgba(255,120,30,.85), inset 0 1px 0 rgba(255,255,255,.6)}
.btn-zar::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  background-size:250% 100%; background-position:120% 0; mix-blend-mode:overlay; animation:blysk 4.5s ease-in-out infinite}
@keyframes blysk{0%,70%{background-position:120% 0} 100%{background-position:-120% 0}}
.btn-duch{border:1px solid var(--linia2); background:rgba(255,255,255,.03); backdrop-filter:blur(8px)}
.btn-duch:hover{background:rgba(255,200,140,.08); border-color:rgba(255,200,140,.45)}
.btn svg{width:22px; height:22px; flex:none}
.btn small{display:block; font-size:11px; font-weight:600; opacity:.7; letter-spacing:.06em; text-transform:uppercase; line-height:1.1}
.btn .dwa{display:flex; flex-direction:column; line-height:1.15; text-align:left}

/* ── nawigacja ── */
.nav{position:fixed; inset:0 0 auto; height:var(--nav); z-index:500; display:flex; align-items:center; transition:background .4s, backdrop-filter .4s, box-shadow .4s}
.nav.tlo{background:rgba(10,8,17,.72); backdrop-filter:blur(16px) saturate(1.4); box-shadow:0 1px 0 var(--linia)}
.nav .wrap{display:flex; align-items:center; gap:28px}
.nav-logo{display:flex; align-items:center; gap:10px; font-family:var(--f-tyt); font-weight:700; font-size:19px; letter-spacing:.08em}
.nav-logo img{width:38px; height:auto; filter:drop-shadow(0 0 10px rgba(255,140,40,.5))}
.nav-linki{display:flex; gap:4px; margin-left:auto}
.nav-linki a{padding:8px 14px; border-radius:999px; font-size:14.5px; color:var(--tekst2); transition:color .25s, background .25s}
.nav-linki a:hover,.nav-linki a.akt{color:var(--tekst); background:rgba(255,255,255,.06)}
.jezyk{display:flex; padding:3px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--linia); position:relative}
.jezyk button{position:relative; z-index:1; padding:6px 11px; font-size:12.5px; font-weight:700; letter-spacing:.08em; color:var(--tekst3); transition:color .3s}
.jezyk button.akt{color:#1d0c00}
.jezyk i{position:absolute; top:3px; bottom:3px; width:calc(50% - 3px); left:3px; border-radius:999px; background:var(--zloto); transition:transform .45s cubic-bezier(.6,-0.2,.2,1.3)}
.jezyk[data-l="en"] i{transform:translateX(100%)}
.nav .btn{padding:10px 18px; font-size:14px}
.burger{display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--linia); position:relative}
.burger span{position:absolute; left:11px; right:11px; height:2px; background:var(--tekst); border-radius:2px; transition:transform .35s, opacity .25s}
.burger span:nth-child(1){top:14px} .burger span:nth-child(2){top:20px} .burger span:nth-child(3){top:26px}
.menu-otw .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-otw .burger span:nth-child(2){opacity:0}
.menu-otw .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:980px){
  .nav-linki{position:fixed; inset:var(--nav) 0 auto; flex-direction:column; padding:14px 16px 22px; background:rgba(10,8,17,.96); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--linia); transform:translateY(-12px); opacity:0; pointer-events:none; transition:.35s}
  .nav-linki a{font-size:18px; padding:12px 14px}
  .menu-otw .nav-linki{transform:none; opacity:1; pointer-events:auto}
  .burger{display:block; margin-left:auto}
  .nav-linki{margin-left:0}
  .nav .btn-nav{display:none}
}

/* ── HERO ── */
.hero{position:relative; height:100svh; min-height:640px; overflow:hidden; isolation:isolate}
#scena{position:absolute; inset:0; width:100%; height:100%}
.hero-fallback{position:absolute; inset:0; background:url(../img/L_front.webp) center bottom/cover no-repeat, #120b1c; z-index:-1}
.hero::after{content:""; position:absolute; inset:auto 0 0; height:28%; background:linear-gradient(180deg,transparent,var(--noc)); pointer-events:none}
.hero-tresc{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:calc(var(--nav) + 10px) 16px 150px; pointer-events:none}
.hero-tresc::before{content:""; position:absolute; left:50%; top:46%; width:min(1100px,140vw); height:78%; translate:-50% -50%; z-index:-1; background:radial-gradient(closest-side,rgba(8,5,14,.62),rgba(8,5,14,.28) 60%,transparent); pointer-events:none}
.hero-tresc > *{pointer-events:auto}
.hero-logo{width:min(300px, 62vw, 34vh); height:auto; filter:drop-shadow(0 10px 40px rgba(255,120,30,.45)) drop-shadow(0 0 2px rgba(0,0,0,.8)); margin-bottom:10px}
.hero h1{font-size:clamp(28px,4.4vw,58px); text-shadow:0 4px 30px rgba(0,0,0,.7); max-width:15ch}
.hero p.lead{color:#eadfca; text-shadow:0 2px 16px rgba(0,0,0,.9); margin:16px auto 30px; max-width:560px}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.odlicz{display:flex; flex-direction:column; align-items:center; gap:8px; margin:-8px auto 22px}
.odlicz-tyt{font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--zloto); text-shadow:0 2px 12px rgba(0,0,0,.9)}
.odlicz-pola{display:flex; gap:8px}
.odlicz-pole{min-width:64px; padding:8px 6px 6px; border-radius:12px; background:rgba(20,12,30,.62); border:1px solid rgba(255,210,122,.3); backdrop-filter:blur(10px); display:flex; flex-direction:column; align-items:center; line-height:1}
.odlicz-pole b{font-family:var(--f-tyt); font-size:28px; font-weight:800; color:#fff6e3; font-variant-numeric:tabular-nums; text-shadow:0 0 18px rgba(255,150,50,.55)}
.odlicz-pole small{margin-top:4px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--tekst3)}
.odlicz.po .odlicz-pola{display:none}
.odlicz.po .odlicz-tyt{font-size:16px; letter-spacing:.2em}
.nagroda-pigulka{text-align:left; display:inline-flex; align-items:center; gap:10px; margin-top:22px; padding:8px 16px 8px 8px; border-radius:999px; font-size:14px; font-weight:600;
  background:rgba(20,12,30,.6); border:1px solid rgba(255,210,122,.35); backdrop-filter:blur(10px); color:var(--zloto)}
.nagroda-pigulka b{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:radial-gradient(circle at 30% 30%,#fff2c4,#ffb340); color:#3a1d00; font-size:14px}
.zwoj{position:absolute; left:50%; bottom:28px; z-index:3; translate:-50% 0; display:flex; flex-direction:column; align-items:center; gap:10px; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--tekst3)}
.zwoj i{width:24px; height:38px; border:1.5px solid var(--tekst3); border-radius:14px; position:relative}
.zwoj i::after{content:""; position:absolute; left:50%; top:8px; width:3px; height:8px; margin-left:-1.5px; border-radius:2px; background:var(--zloto); animation:mysz 2s infinite}
@keyframes mysz{0%{opacity:0; transform:translateY(-4px)} 30%{opacity:1} 80%{opacity:0; transform:translateY(12px)} 100%{opacity:0}}

/* ── pasek przewijany ── */
.pasek{position:relative; padding:22px 0; border-block:1px solid var(--linia); background:linear-gradient(90deg,#120c1c,#1a1022,#120c1c); overflow:hidden; z-index:2}
.pasek-tor{display:flex; gap:48px; width:max-content; animation:tor 40s linear infinite}
.pasek span{display:flex; align-items:center; gap:48px; font-family:var(--f-tyt); font-size:clamp(18px,2vw,24px); letter-spacing:.12em; text-transform:uppercase; color:var(--tekst2); white-space:nowrap}
.pasek span::after{content:"✦"; color:var(--zar); font-size:.7em}
@keyframes tor{to{transform:translateX(-50%)}}

/* ── sekcje ── */
.sek{position:relative; padding:clamp(90px,12vw,160px) 0; overflow-x:clip}
.sek-ciemna{background:linear-gradient(180deg,var(--noc),var(--noc2) 30%,var(--noc2) 70%,var(--noc))}
.poswiata{position:absolute; pointer-events:none; border-radius:50%; filter:blur(80px); opacity:.5; z-index:0}
.sek > .wrap{position:relative; z-index:1}

/* pojawianie się przy przewijaniu */
.wej{opacity:0; transform:translateY(40px); transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0s)}
.wej.jest{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .wej{opacity:1; transform:none; transition:none} .pasek-tor{animation:none} }

/* ── zwiastun ── */
.kino{perspective:1600px; margin-top:10px}
.kino-ekran{position:relative; aspect-ratio:16/9; border-radius:var(--r2); overflow:hidden; box-shadow:var(--cien), 0 0 120px -30px rgba(255,120,30,.5);
  transform:rotateX(14deg) scale(.92); transform-origin:50% 100%; transition:transform .1s linear; background:#000; cursor:pointer}
.kino-ekran img,.kino-ekran video{width:100%; height:100%; object-fit:cover}
.kino-ekran::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 120%,rgba(0,0,0,.0),rgba(0,0,0,.45)); pointer-events:none}
.graj{position:absolute; left:50%; top:50%; z-index:2; width:112px; height:112px; translate:-50% -50%; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,140,50,.92); box-shadow:0 0 0 14px rgba(255,140,50,.18), 0 0 0 30px rgba(255,140,50,.08), 0 20px 60px rgba(0,0,0,.5); transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.graj::before{content:""; position:absolute; inset:-14px; border-radius:50%; border:2px solid rgba(255,200,140,.6); animation:fala 2.4s infinite}
@keyframes fala{from{transform:scale(.8); opacity:1} to{transform:scale(1.6); opacity:0}}
.graj svg{width:40px; height:40px; margin-left:6px; fill:#260f00}
.kino-ekran:hover .graj{transform:scale(1.08)}
.kino-napis{position:absolute; left:28px; bottom:22px; z-index:2; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:#ffe3bf}
.modal{position:fixed; inset:0; z-index:9500; display:grid; place-items:center; padding:16px; background:rgba(5,3,9,.9); backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:opacity .4s}
.modal.otw{opacity:1; pointer-events:auto}
.modal video{width:min(1200px,100%); max-height:86vh; border-radius:16px; box-shadow:var(--cien); background:#000}
.modal-x{position:absolute; top:18px; right:18px; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.08); font-size:22px}

/* ── opowieść przypięta ── */
.opowiesc{position:relative}
.op-uklad{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(30px,5vw,80px)}
.op-kroki{padding:12vh 0 30vh}
.op-krok{min-height:70vh; display:flex; flex-direction:column; justify-content:center; opacity:.22; transition:opacity .6s}
.op-krok.akt{opacity:1}
.op-krok .num{font-family:var(--f-tyt); font-size:14px; letter-spacing:.3em; color:var(--zar2)}
.op-krok h3{font-size:clamp(28px,3.4vw,46px); margin:14px 0 16px}
.op-krok p{color:var(--tekst2); margin:0 0 18px; max-width:46ch}
.op-krok ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.op-krok li{display:flex; gap:12px; align-items:flex-start; color:var(--tekst2); font-size:15.5px}
.op-krok li::before{content:""; flex:none; width:7px; height:7px; margin-top:9px; border-radius:2px; transform:rotate(45deg); background:var(--zar)}
.op-scena{position:sticky; top:calc(var(--nav) + 6vh); height:calc(88vh - var(--nav)); display:flex; align-items:center; perspective:1800px}
.urzadzenie{position:relative; width:100%; aspect-ratio:16/10; border-radius:34px; padding:14px; background:linear-gradient(145deg,#2c2338,#120e19 60%);
  box-shadow:0 50px 120px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.05);
  transform-style:preserve-3d; transform:rotateY(-14deg) rotateX(6deg); transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.urzadzenie::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(140deg,rgba(255,200,140,.5),transparent 40%,transparent 70%,rgba(255,140,50,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
.ekran{position:relative; width:100%; height:100%; border-radius:22px; overflow:hidden; background:#000; transform:translateZ(1px)}
.ekran video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s, transform 1.4s cubic-bezier(.2,.8,.2,1); transform:scale(1.08)}
.ekran video.akt{opacity:1; transform:scale(1)}
.ekran::after{content:""; position:absolute; inset:0; background:linear-gradient(125deg,rgba(255,255,255,.14),transparent 30%); pointer-events:none}
.urz-cien{position:absolute; left:8%; right:8%; bottom:-60px; height:60px; background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%); filter:blur(10px); transform:translateZ(-100px)}
.urz-etykieta{position:absolute; right:-14px; top:28px; transform:translateZ(80px); padding:10px 16px; border-radius:14px; font-weight:700; font-size:14px;
  background:rgba(23,18,34,.85); border:1px solid var(--linia2); backdrop-filter:blur(10px); box-shadow:0 20px 40px rgba(0,0,0,.5); display:flex; gap:8px; align-items:center}
.urz-etykieta i{width:8px; height:8px; border-radius:50%; background:#5df08b; box-shadow:0 0 10px #5df08b; animation:migaj 1.6s infinite}
@keyframes migaj{50%{opacity:.3}}
.op-pasek{position:absolute; left:14px; right:14px; bottom:-34px; height:3px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden}
.op-pasek b{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--zar),var(--zloto)); transition:width .6s}
.op-mobil{display:none}
@media (max-width:900px){
  .op-uklad{display:block}
  .op-scena{display:none}
  .op-kroki{padding:0}
  .op-krok{min-height:0; opacity:1; padding:28px 0 46px}
  .op-mobil{display:block; margin-top:22px; border-radius:20px; overflow:hidden; box-shadow:var(--cien); aspect-ratio:16/9; background:#000}
  .op-mobil video{width:100%; height:100%; object-fit:cover}
}

/* ── karty funkcji ── */
.siatka{display:grid; gap:18px}
.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.s4{grid-template-columns:repeat(4,minmax(0,1fr))}
.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){ .s3,.s4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .s3,.s4,.s2{grid-template-columns:minmax(0,1fr)} }
.karta{position:relative; border-radius:var(--r2); padding:28px; background:linear-gradient(180deg,rgba(35,27,50,.75),rgba(20,15,30,.75)); border:1px solid var(--linia);
  overflow:hidden; transform-style:preserve-3d; transition:border-color .4s, transform .5s cubic-bezier(.2,.8,.2,1)}
.karta::before{content:""; position:absolute; inset:0; background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(255,150,60,.13),transparent 50%); opacity:0; transition:opacity .4s; pointer-events:none}
.karta:hover{border-color:var(--linia2)} .karta:hover::before{opacity:1}
.karta h3{font-size:22px; margin:16px 0 10px}
.karta p{color:var(--tekst2); font-size:15.5px; margin:0}
.ikona{width:54px; height:54px; border-radius:16px; display:grid; place-items:center; font-size:26px; background:linear-gradient(145deg,rgba(255,150,60,.25),rgba(255,150,60,.05)); border:1px solid rgba(255,170,90,.3)}

/* ── PETY ── */
.pety-sek{overflow:hidden}
.karuzela{position:relative; height:min(560px,95vw); min-height:360px; perspective:1100px; perspective-origin:50% 30%; margin:20px 0 10px; touch-action:pan-y; cursor:grab; user-select:none}
.karuzela:active{cursor:grabbing}
.kar-pierscien{position:absolute; left:50%; top:50%; width:0; height:0; transform-style:preserve-3d}
.kar-el{position:absolute; left:-80px; top:-80px; width:160px; height:160px; transform-style:preserve-3d; transition:filter .4s}
.kar-el .spr{position:absolute; inset:0; background-repeat:no-repeat; image-rendering:pixelated; filter:drop-shadow(0 12px 14px rgba(0,0,0,.6))}
.kar-el .cien{position:absolute; left:20%; right:20%; bottom:2px; height:16px; border-radius:50%; background:radial-gradient(rgba(0,0,0,.6),transparent 70%)}
.kar-el .ran{transition:opacity .3s; position:absolute; top:-6px; right:16px; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font:800 13px var(--f-txt); color:#140a00; box-shadow:0 4px 10px rgba(0,0,0,.5)}
.kar-podloga{position:absolute; left:50%; top:62%; width:1100px; height:1100px; margin-left:-550px; margin-top:-550px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,140,50,.18),rgba(255,140,50,.05) 40%,transparent 62%); transform:rotateX(80deg); pointer-events:none}
.kar-sterowanie{display:flex; gap:12px; justify-content:center; align-items:center; margin-bottom:28px; flex-wrap:wrap}
.okragly{width:52px; height:52px; border-radius:50%; border:1px solid var(--linia2); display:grid; place-items:center; font-size:20px; transition:background .3s}
.okragly:hover{background:rgba(255,200,140,.1)}
.filtry{display:flex; gap:6px; padding:5px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--linia)}
.filtry button{padding:8px 14px; border-radius:999px; font-size:13.5px; font-weight:650; color:var(--tekst2); transition:.3s}
.filtry button.akt{background:rgba(255,255,255,.1); color:var(--tekst)}
.filtry button[data-r] b{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px}

.pet-panel{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:28px; align-items:stretch; margin-top:10px}
@media (max-width:900px){ .pet-panel{grid-template-columns:minmax(0,1fr)} }
.pet-podium{position:relative; border-radius:var(--r2); min-height:380px; overflow:hidden; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 75%,rgba(255,150,60,.35),transparent 55%), url(../img/zagroda_tlo.webp) center 60%/cover; box-shadow:var(--cien)}
.pet-podium::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,8,17,.55),rgba(10,8,17,.15) 40%,rgba(10,8,17,.65))}
.pet-podium .duzy{position:relative; width:300px; height:240px; background-repeat:no-repeat; image-rendering:pixelated; filter:drop-shadow(0 18px 18px rgba(0,0,0,.55)); transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pet-podium .duzy.pop{animation:pop .7s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{0%{transform:scale(.6); filter:brightness(4) drop-shadow(0 0 30px #fff)} 60%{transform:scale(1.08)} 100%{transform:scale(1)}}
.gwiazdy{position:absolute; bottom:18px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:2}
.gwiazdy button{width:42px; height:42px; border-radius:12px; font-size:20px; color:rgba(255,255,255,.25); background:rgba(10,8,17,.6); border:1px solid var(--linia); backdrop-filter:blur(6px); transition:.25s}
.gwiazdy button.wl{color:var(--S); text-shadow:0 0 12px rgba(255,202,40,.7)}
.gwiazdy button:disabled{opacity:.25; cursor:not-allowed}
.pet-info{border-radius:var(--r2); padding:32px; background:linear-gradient(180deg,rgba(35,27,50,.8),rgba(20,15,30,.8)); border:1px solid var(--linia)}
.ranga{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase}
.pet-info h3{font-size:clamp(28px,3vw,40px); margin:14px 0 8px}
.pet-info .moc{color:var(--tekst3); font-size:14.5px; margin-bottom:22px}
.um{display:flex; gap:16px; padding:16px; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid var(--linia); margin-bottom:12px}
.um .ik{flex:none; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:22px}
.um b{display:block; font-size:16px} .um span{color:var(--tekst2); font-size:14.5px}
.um em{font-style:normal; color:var(--tekst3); font-size:12.5px; margin-left:8px}

/* wylęgarnia */
.wylegarnia{margin-top:clamp(80px,10vw,130px); display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(24px,4vw,60px); align-items:center}
@media (max-width:900px){ .wylegarnia{grid-template-columns:minmax(0,1fr)} }
.jaja{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:26px 0}
.jajo-wyb{position:relative; padding:14px 8px 12px; border-radius:18px; border:1px solid var(--linia); background:rgba(255,255,255,.03); text-align:center; transition:.3s}
.jajo-wyb img{height:64px; width:auto; margin:0 auto 8px; transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.jajo-wyb span{display:block; font-size:13px; font-weight:650} .jajo-wyb small{color:var(--tekst3); font-size:12px}
.jajo-wyb.akt{border-color:rgba(255,210,122,.6); background:rgba(255,210,122,.08); box-shadow:0 0 30px -8px rgba(255,190,90,.5)}
.jajo-wyb.akt img,.jajo-wyb:hover img{transform:translateY(-6px) rotate(-6deg)}
.szanse{display:grid; gap:10px; margin-bottom:26px}
.szansa{display:grid; grid-template-columns:110px 1fr 58px; align-items:center; gap:12px; font-size:14px}
.szansa .tor{height:10px; border-radius:10px; background:rgba(255,255,255,.06); overflow:hidden}
.szansa .tor b{display:block; height:100%; border-radius:inherit; transition:width .8s cubic-bezier(.2,.8,.2,1)}
.szansa .pr{text-align:right; font-variant-numeric:tabular-nums; color:var(--tekst2)}
.inkubator{position:relative; aspect-ratio:1/1; max-width:520px; margin-inline:auto; width:100%}
.inkubator canvas{position:absolute; inset:0; width:100%; height:100%}
.ink-wynik{position:absolute; inset:auto 0 -2%; text-align:center; opacity:0; transform:translateY(10px); transition:.5s; pointer-events:none}
.ink-wynik.jest{opacity:1; transform:none}
.ink-wynik b{display:block; font-family:var(--f-tyt); font-size:clamp(22px,2.6vw,32px); text-shadow:0 4px 20px rgba(0,0,0,.8)}
.licznik{display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; color:var(--tekst3); font-size:13.5px}
.licznik span b{color:var(--tekst)}

/* ── KUŹNIA ── */
.kuznia{position:relative; overflow:hidden}
.kuznia-tlo{position:absolute; inset:0; background:radial-gradient(ellipse at 70% 60%,rgba(255,90,20,.28),transparent 55%), radial-gradient(ellipse at 20% 20%,rgba(140,60,255,.12),transparent 50%)}
.kz-uklad{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(30px,4vw,64px); align-items:center}
@media (max-width:900px){ .kz-uklad{grid-template-columns:minmax(0,1fr)} }
.kowadlo{position:relative; aspect-ratio:1/1; width:100%; max-width:540px; margin-inline:auto; border-radius:50%;
  background:radial-gradient(circle at 50% 58%,rgba(255,120,30,.35),rgba(255,120,30,.08) 45%,transparent 68%)}
.kowadlo canvas{position:absolute; inset:-12%; width:124%; height:124%; pointer-events:none}
.kz-przedmiot{position:absolute; left:50%; top:46%; width:46%; translate:-50% -50%; image-rendering:pixelated; filter:drop-shadow(0 20px 26px rgba(0,0,0,.7)); transition:filter .6s}
.kz-przedmiot.uderz{animation:uderz .45s cubic-bezier(.2,.8,.2,1)}
@keyframes uderz{0%{transform:scale(1)} 25%{transform:scale(.9) rotate(-3deg); filter:brightness(2.4) drop-shadow(0 0 30px #ffb15c)} 100%{transform:scale(1)}}
.kz-plus{position:absolute; z-index:2; left:50%; top:4%; translate:-50% 0; font-family:var(--f-tyt); font-size:clamp(42px,6vw,76px); font-weight:800; color:var(--zloto);
  text-shadow:0 0 30px rgba(255,160,50,.8), 0 4px 0 #6b2c00}
.kz-plus.max{color:#fff; text-shadow:0 0 18px #fff, 0 0 50px var(--pos,#ffca28), 0 4px 0 #4a2100; animation:pulsuj 1.6s infinite}
@keyframes pulsuj{50%{transform:scale(1.06)}}
.kz-wybor{display:flex; gap:8px; flex-wrap:wrap; margin:24px 0}
.kz-wybor button{width:60px; height:60px; border-radius:18px; border:1px solid var(--linia); background:rgba(255,255,255,.03); display:grid; place-items:center; transition:.3s; position:relative}
.kz-wybor button img{width:40px; height:40px; object-fit:contain; image-rendering:pixelated}
.kz-wybor button.akt{border-color:var(--rk,var(--zloto)); box-shadow:0 0 0 1px var(--rk,var(--zloto)) inset, 0 0 26px -6px var(--rk,var(--zloto))}
.kz-pasek-poz{display:flex; align-items:center; gap:14px; margin:6px 0 20px; flex-wrap:wrap}
.kz-pasek-poz label{font-size:14px; color:var(--tekst2)}
.poziomy{display:flex; gap:6px}
.poziomy button{width:40px; height:40px; border-radius:12px; border:1px solid var(--linia); font-weight:800; font-size:14px; color:var(--tekst2); transition:.25s}
.poziomy button.akt{background:var(--zloto); color:#241000; border-color:transparent}
.kz-staty{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:20px}
.stat{padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid var(--linia)}
.stat small{display:block; color:var(--tekst3); font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.stat b{font-size:22px; font-variant-numeric:tabular-nums} .stat b em{font-style:normal; font-size:14px; color:#7ee787; margin-left:6px}
.koszt{display:flex; gap:16px; flex-wrap:wrap; font-size:15px; color:var(--tekst2); margin-bottom:22px; min-height:24px}
.koszt b{color:var(--tekst)}
.kz-komunikat{font-size:14px; color:var(--zar2); min-height:22px; margin-top:12px}
.kz-tory{display:grid; grid-template-columns:repeat(9,1fr); gap:5px; margin:-4px 0 22px}
.kz-tory i{height:8px; border-radius:4px; background:rgba(255,255,255,.08); transition:background .4s, box-shadow .4s}
.kz-tory i.wl{background:linear-gradient(90deg,var(--zar),var(--zloto)); box-shadow:0 0 10px rgba(255,160,60,.6)}
.kz-tory i.blok{background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 4px,transparent 4px 8px)}
.tabela{width:100%; border-collapse:collapse; font-size:14.5px; margin-top:10px}
.tabela th,.tabela td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--linia)}
.tabela th{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--tekst3); font-weight:650}
.tabela td{color:var(--tekst2)} .tabela td:first-child{color:var(--tekst); font-weight:600}
.przewin{overflow-x:auto; border-radius:18px; border:1px solid var(--linia); background:rgba(255,255,255,.02)}

/* ── bossowie ── */
.bossowie{position:relative; overflow:hidden}
.bossowie-tlo{position:absolute; inset:0; background:url(../img/loch_bg.webp) center/cover; opacity:.35; filter:saturate(1.2)}
.bossowie-tlo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,var(--noc),rgba(10,8,17,.4) 30%,rgba(10,8,17,.5) 70%,var(--noc))}
.boss-rzad{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin-top:20px}
@media (max-width:900px){ .boss-rzad{grid-template-columns:repeat(2,minmax(0,1fr))} }
.boss{position:relative; padding:22px 16px 20px; border-radius:24px; text-align:center; background:linear-gradient(180deg,rgba(25,18,36,.65),rgba(12,9,18,.85)); border:1px solid var(--linia);
  backdrop-filter:blur(6px); transition:transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s}
.boss:hover{transform:translateY(-10px); border-color:rgba(160,120,255,.5)}
.boss img{height:150px; width:auto; margin:0 auto 10px; image-rendering:pixelated; filter:drop-shadow(0 0 22px rgba(130,90,255,.55)); animation:unos 4s ease-in-out infinite; animation-delay:var(--d,0s)}
@keyframes unos{50%{transform:translateY(-10px)}}
.boss b{display:block; font-family:var(--f-tyt); font-size:17px}
.boss small{color:var(--tekst3); font-size:13px}
.telefon{position:relative; width:min(300px,80vw); aspect-ratio:9/19.5; border-radius:44px; padding:10px; background:linear-gradient(145deg,#2c2338,#0e0b14);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(255,255,255,.06); margin-inline:auto}
.telefon video,.telefon img{width:100%; height:100%; object-fit:cover; border-radius:34px; background:#000}
.telefon::after{content:""; position:absolute; top:20px; left:50%; translate:-50% 0; width:84px; height:22px; border-radius:20px; background:#06040a}
.duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,80px); align-items:center}
@media (max-width:900px){ .duo{grid-template-columns:minmax(0,1fr)} .duo .telefon{order:-1} }
.lista{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:16px}
.lista li{display:flex; gap:16px; align-items:flex-start}
.lista li .ikona{flex:none; width:46px; height:46px; font-size:21px; border-radius:14px}
.lista li b{display:block; font-size:16.5px} .lista li span{color:var(--tekst2); font-size:15px}

/* ── pory roku ── */
.pory-wybor{display:flex; gap:8px; justify-content:center; margin-bottom:30px; flex-wrap:wrap}
.pory-wybor button{padding:12px 20px; border-radius:999px; border:1px solid var(--linia); font-weight:650; font-size:15px; transition:.3s; display:flex; gap:8px; align-items:center}
.pory-wybor button.akt{background:var(--kol,#fff); color:#140c00; border-color:transparent; box-shadow:0 10px 30px -8px var(--kol)}
.pory-okno{position:relative; border-radius:var(--r2); overflow:hidden; aspect-ratio:16/8; box-shadow:var(--cien); background:#000}
@media (max-width:700px){ .pory-okno{aspect-ratio:4/5} }
.pory-okno video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; clip-path:circle(0% at var(--wx,50%) var(--wy,50%)); transition:clip-path 1.1s cubic-bezier(.6,0,.2,1); z-index:0}
.pory-okno video.akt{clip-path:circle(150% at var(--wx,50%) var(--wy,50%)); z-index:1}
.pory-okno video.bylo{clip-path:circle(150% at 50% 50%); z-index:0; transition:none}
.pory-okno canvas{z-index:2}
.pory-kolo{position:absolute; right:20px; top:20px; z-index:3; width:118px; height:118px}
.pory-kolo svg{width:100%; height:100%; overflow:visible}
.pory-dane{z-index:3}
@media (max-width:700px){ .pory-kolo{width:84px; height:84px; right:12px; top:12px} }
.pory-okno canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.pory-dane{position:absolute; left:20px; bottom:20px; right:20px; display:flex; gap:10px; flex-wrap:wrap; z-index:2}
.pory-dane span{padding:10px 14px; border-radius:14px; background:rgba(10,8,17,.72); backdrop-filter:blur(10px); border:1px solid var(--linia); font-size:14px; font-weight:600}
.pory-dane span em{font-style:normal; margin-left:6px}
.plus{color:#7ee787} .minus{color:#ff8a80}

/* ── pre-rejestracja ── */
.rejestracja{position:relative; overflow:hidden}
.rej-karta{position:relative; border-radius:40px; padding:clamp(30px,5vw,70px); overflow:hidden;
  background:radial-gradient(ellipse at 80% 20%,rgba(255,170,70,.35),transparent 50%), radial-gradient(ellipse at 10% 100%,rgba(140,80,255,.3),transparent 55%), linear-gradient(160deg,#241733,#130d1d);
  border:1px solid rgba(255,210,122,.3); box-shadow:0 40px 120px -30px rgba(255,120,30,.45)}
.rej-uklad{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:40px; align-items:center; position:relative; z-index:1}
@media (max-width:900px){ .rej-uklad{grid-template-columns:minmax(0,1fr)} }
.nagroda-3d{position:relative; aspect-ratio:1/1; perspective:1000px; max-width:440px; margin-inline:auto; width:100%}
.nagroda-obrot{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .2s linear}
.holo{position:absolute; inset:8%; border-radius:32px; transform:translateZ(0); overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.02)), radial-gradient(circle at 50% 40%,rgba(255,220,150,.35),transparent 60%);
  border:1px solid rgba(255,230,180,.35); box-shadow:inset 0 0 60px rgba(255,200,120,.15)}
.holo::after{content:""; position:absolute; inset:-50%; background:conic-gradient(from var(--k,0deg),transparent,rgba(255,180,255,.18),rgba(140,220,255,.18),rgba(255,240,160,.2),transparent 40%);
  mix-blend-mode:screen; animation:holo 8s linear infinite}
@property --k{syntax:'<angle>'; initial-value:0deg; inherits:false}
@keyframes holo{to{--k:360deg}}
.nag-jajo{position:absolute; left:50%; top:46%; width:46%; translate:-50% -50%; transform:translateZ(90px); filter:drop-shadow(0 30px 30px rgba(0,0,0,.55)); animation:unos 5s ease-in-out infinite}
.nag-diament{position:absolute; right:6%; top:12%; transform:translateZ(130px); font-size:16px; font-weight:800; padding:12px 18px 12px 14px; border-radius:18px; display:flex; align-items:center; gap:8px;
  background:linear-gradient(180deg,#5fd3ff,#2a7fff); color:#fff; box-shadow:0 20px 40px -10px rgba(40,120,255,.7), inset 0 1px 0 rgba(255,255,255,.6); text-shadow:0 1px 0 rgba(0,0,0,.3)}
.nag-diament span{font-size:26px; font-family:var(--f-tyt)}
.nag-etykieta{position:absolute; left:6%; bottom:12%; transform:translateZ(110px); padding:10px 16px; border-radius:14px; background:rgba(10,8,17,.75); border:1px solid var(--linia2); font-weight:700; font-size:14px; backdrop-filter:blur(8px)}
.kroki-rej{display:grid; gap:12px; margin:30px 0}
.krok-rej{display:flex; gap:16px; align-items:center}
.krok-rej b{flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-tyt); background:rgba(255,210,122,.15); color:var(--zloto); border:1px solid rgba(255,210,122,.4)}
.krok-rej span{color:var(--tekst2)}

/* ── FAQ ── */
.faq{max-width:860px; margin-inline:auto}
.faq details{border-bottom:1px solid var(--linia)}
.faq summary{list-style:none; cursor:pointer; padding:24px 50px 24px 0; position:relative; font-family:var(--f-tyt); font-size:clamp(18px,2vw,22px); font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:10px; top:50%; width:14px; height:14px; margin-top:-10px; border-right:2px solid var(--zar2); border-bottom:2px solid var(--zar2); transform:rotate(45deg); transition:transform .4s}
.faq details[open] summary::after{transform:rotate(225deg); margin-top:-3px}
.faq .odp{color:var(--tekst2); padding:0 0 26px; max-width:70ch}
.faq .odp p{margin:0 0 10px}

/* ── stopka ── */
.stopka{border-top:1px solid var(--linia); padding:70px 0 40px; background:#07060c}
.stopka-uklad{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px}
@media (max-width:760px){ .stopka-uklad{grid-template-columns:1fr} }
.stopka h4{font-family:var(--f-txt); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--tekst3); margin-bottom:16px}
.stopka a{display:block; color:var(--tekst2); padding:4px 0; font-size:15px} .stopka a:hover{color:var(--tekst)}
.stopka p{color:var(--tekst3); font-size:14px}
.stopka-dol{margin-top:50px; padding-top:24px; border-top:1px solid var(--linia); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--tekst3); font-size:13px}

/* ═══ STRONA „JAK GRAĆ” ═══ */
.podhero{position:relative; padding:calc(var(--nav) + 90px) 0 80px; overflow:hidden}
.podhero-tlo{position:absolute; inset:0; background:url(../img/L_mid.webp) center 40%/cover; opacity:.55}
.podhero-tlo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,8,17,.4),var(--noc) 92%)}
.podhero h1{font-size:clamp(40px,6.5vw,86px); margin:18px 0 20px}
.przewodnik{display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(30px,5vw,80px); align-items:start}
@media (max-width:980px){ .przewodnik{grid-template-columns:minmax(0,1fr)} }
.spis{position:sticky; top:calc(var(--nav) + 24px); max-height:calc(100vh - var(--nav) - 48px); overflow:auto; padding-right:8px}
.spis b{display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--tekst3); margin-bottom:14px}
.spis a{display:flex; gap:12px; align-items:center; padding:8px 12px; border-radius:12px; font-size:14.5px; color:var(--tekst3); transition:.25s; border-left:2px solid transparent}
.spis a > span:first-child{width:22px; flex:none; text-align:center}
.spis a:hover{color:var(--tekst)} .spis a.akt{color:var(--tekst); background:rgba(255,255,255,.04); border-left-color:var(--zar)}
@media (max-width:980px){
  .spis{position:sticky; top:var(--nav); z-index:20; max-height:none; overflow-x:auto; overflow-y:hidden; display:flex; gap:6px; padding:12px 0; margin:0 -16px; padding-inline:16px;
    background:rgba(10,8,17,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--linia); scrollbar-width:none}
  .spis::-webkit-scrollbar{display:none}
  .spis b{display:none} .spis a{white-space:nowrap; border-left:0; border:1px solid var(--linia); border-radius:999px; padding:7px 14px}
}
.rozdzial{padding:20px 0 90px; scroll-margin-top:calc(var(--nav) + 70px)}
.rozdzial + .rozdzial{border-top:1px solid var(--linia); padding-top:80px}
.rozdzial h2{font-size:clamp(30px,4vw,50px); margin:14px 0 18px}
.rozdzial h3{font-size:22px; margin:40px 0 14px}
.rozdzial p{color:var(--tekst2); max-width:70ch}
.rozdzial .duo{margin-top:30px}
.wskazowka{display:flex; gap:16px; padding:20px 22px; border-radius:18px; margin:28px 0; background:linear-gradient(90deg,rgba(255,150,60,.12),rgba(255,150,60,.03)); border:1px solid rgba(255,170,90,.28)}
.wskazowka::before{content:"💡"; font-size:22px} .wskazowka p{margin:0; color:var(--tekst)}
.budynki{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-top:26px}
.budynek{display:flex; flex-direction:column; border-radius:22px; padding:18px; background:linear-gradient(180deg,rgba(35,27,50,.75),rgba(20,15,30,.75)); border:1px solid var(--linia); transition:.35s}
.budynek:hover{transform:translateY(-4px); border-color:var(--linia2)}
.budynek .obr{height:120px; display:grid; place-items:center; margin-bottom:12px; border-radius:16px; background:radial-gradient(ellipse at 50% 80%,rgba(120,190,90,.28),transparent 65%)}
.budynek .obr img{max-height:110px; max-width:90%; image-rendering:pixelated}
.budynek b{font-family:var(--f-tyt); font-size:17px}
.budynek span{font-size:14px; color:var(--tekst2); margin-top:4px}
.budynek small{margin-top:10px; font-size:12.5px; color:var(--tekst3)}
.tag{display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:rgba(255,255,255,.06); color:var(--tekst2); margin-right:6px}
.cechy{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; margin-top:20px}
.cecha{display:flex; gap:12px; align-items:center; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid var(--linia)}
.cecha i{font-style:normal; font-size:22px} .cecha b{display:block; font-size:15px} .cecha span{font-size:13.5px; color:var(--tekst2)}
.cecha.dobra{border-color:rgba(126,231,135,.25)} .cecha.zla{border-color:rgba(255,138,128,.22)}
.zrzut{border-radius:24px; overflow:hidden; box-shadow:var(--cien)}
.pet-siatka{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-top:22px}
.pet-mini{position:relative; padding:12px 8px 10px; border-radius:18px; text-align:center; background:rgba(255,255,255,.03); border:1px solid var(--linia); transition:.3s}
.pet-mini:hover{transform:translateY(-4px); border-color:var(--rk)}
.pet-mini .spr{width:96px; height:80px; margin:0 auto 6px; background-repeat:no-repeat; image-rendering:pixelated}
.pet-mini b{display:block; font-size:13px; line-height:1.25}
.pet-mini i{position:absolute; top:8px; right:8px; width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font:800 11px var(--f-txt); font-style:normal; color:#140a00}
.oś{position:relative; margin:30px 0; padding-left:32px; border-left:2px solid var(--linia2)}
.oś > div{position:relative; padding-bottom:26px}
.oś > div::before{content:""; position:absolute; left:-41px; top:4px; width:16px; height:16px; border-radius:50%; background:var(--noc); border:3px solid var(--zar)}
.oś b{display:block; font-family:var(--f-tyt); font-size:18px; margin-bottom:4px}
.oś span{color:var(--tekst2); font-size:15.5px}
.na-koniec{margin-top:60px; border-radius:32px; padding:clamp(28px,4vw,50px); text-align:center; background:radial-gradient(ellipse at 50% 0%,rgba(255,150,60,.25),transparent 60%), var(--panel); border:1px solid var(--linia2)}

/* kursor-światło (tylko desktop) */
.kursor{position:fixed; left:0; top:0; width:420px; height:420px; margin:-210px 0 0 -210px; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle,rgba(255,140,50,.07),transparent 60%); transition:opacity .4s}
@media (hover:none){ .kursor{display:none} }

/* dźwięk */
.dzwiek{position:fixed; right:18px; bottom:18px; z-index:600; width:48px; height:48px; border-radius:50%; background:rgba(23,18,34,.8); border:1px solid var(--linia2); backdrop-filter:blur(10px); display:grid; place-items:center; font-size:18px}

/* ── poprawki na telefon ── */
@media (max-width:700px){
  .kar-sterowanie .okragly{display:none}
  .filtry{max-width:100%; overflow-x:auto; scrollbar-width:none}
  .filtry::-webkit-scrollbar{display:none}
  .filtry button{padding:7px 11px; font-size:12.5px; white-space:nowrap}
  .wylegarnia .inkubator{order:-1; max-width:340px}
  .jaja{gap:6px} .jajo-wyb{padding:10px 4px} .jajo-wyb img{height:48px}
  .szansa{grid-template-columns:92px 1fr 50px; font-size:13px}
  .pet-info{padding:22px}
  .rej-karta{border-radius:28px}
  .kowadlo{max-width:340px}
}

/* ══ telefon: lżej i ciaśniej ══ */
@media (max-width:700px){
  body::after{display:none}
  *{backdrop-filter:none!important; -webkit-backdrop-filter:none!important}
  .nav.tlo{background:rgba(10,8,17,.96)}
  .nav-linki{background:#0c0914}
  .sek{padding:68px 0}
  .naglowek{margin-bottom:30px}
  .h2{font-size:clamp(28px,8vw,36px); margin:12px 0}
  .lead{font-size:16px}
  .wej{transform:translateY(18px)}
  .hero-logo{width:min(200px,50vw,26vh); margin-bottom:4px}
  .hero h1{font-size:clamp(26px,7.4vw,34px)}
  .hero p.lead{font-size:15px; margin:12px auto 20px}
  .hero-cta .btn{padding:13px 20px; font-size:15px}
  .nagroda-pigulka{font-size:12.5px; margin-top:14px}
  .hero p.lead{display:none}
  .odlicz{margin:6px auto 16px; gap:6px}
  .odlicz-pole{min-width:56px; padding:6px 4px 5px; border-radius:10px}
  .odlicz-pole b{font-size:22px}
  .odlicz-tyt{font-size:11px}
  .zwoj{display:none}
  .pasek{padding:14px 0} .pasek span{font-size:15px; gap:28px} .pasek-tor{gap:28px}
  .kino-ekran{transform:none!important; border-radius:18px}
  .graj{width:76px; height:76px} .graj svg{width:28px; height:28px}
  .op-krok{padding:18px 0 34px} .op-krok h3{font-size:24px; margin:8px 0 10px} .op-krok p{font-size:15px}
  .op-mobil{border-radius:16px; margin-top:16px}
  .karuzela{height:300px; min-height:0; perspective:900px}
  .kar-el .spr{filter:none!important}
  .kar-podloga{display:none}
  .pet-podium{min-height:280px}
  .pet-info h3{font-size:26px}
  .um{padding:12px; gap:12px} .um .ik{width:38px; height:38px; font-size:18px}
  .wylegarnia{margin-top:60px}
  .kz-plus{font-size:44px}
  .s4{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .s4 .karta{padding:16px; border-radius:18px} .s4 .karta h3{font-size:16px; margin:10px 0 6px} .s4 .karta p{font-size:13px; line-height:1.5}
  .s4 .ikona{width:40px; height:40px; font-size:19px; border-radius:12px}
  .s3 .karta{padding:20px}
  .boss img, .boss .spr{max-width:100%}
  .boss{padding:14px 8px} .boss b{font-size:14px}
  .rej-karta{padding:26px 20px}
  .faq summary{font-size:17px; padding:18px 40px 18px 0}
  .stopka{padding:44px 0 30px}
  .karta, .budynek, .boss{transform:none!important}
  .boss img{animation:none}
}
@media (max-width:700px){
  .hero-tresc{padding-top:calc(var(--nav) + 30px)}
  .szansa{grid-template-columns:108px 1fr 46px; font-size:12.5px}
}

.rej-karta .btn-discord{margin-left:12px} .btn-discord svg{width:22px;height:22px;color:#a8b4ff}
@media (max-width:700px){ .rej-karta .btn-discord{margin:12px 0 0} }