/* Strona główna crodus.ai: prezentacja bez przewijania. Pasek u góry i u dołu, plansza między nimi,
   Croduś (scena 3D) obok planszy na komputerze i pod nią na telefonie. Rozmiary planszy liczy towarzysz.js. */
html.pr{--gora:64px;--dol:64px;overflow:hidden;height:100%;overscroll-behavior:none}
html.pr.tel{--gora:54px;--dol:58px}
html.pr body{height:100%;overflow:hidden;background:#f3f4f8;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
.scena-tlo{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 60% at 86% 88%,#e4e8f6 0%,rgba(228,232,246,0) 62%),radial-gradient(60% 50% at 10% 8%,#eef0fb 0%,rgba(238,240,251,0) 60%),linear-gradient(180deg,#fbfbfd 0%,#f3f4f8 55%,#eceef5 100%)}
.okno-orn{position:fixed;inset:0;z-index:1;opacity:.75}
.snieg-strony{position:fixed;inset:0;z-index:4;pointer-events:none}
.snieg-strony canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cr-scena{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;pointer-events:none;z-index:3}

/* --- pasek górny ------------------------------------------------------------------------------------------------------ */
.pr-gora{position:fixed;inset:0 0 auto 0;height:var(--gora);z-index:50;display:flex;align-items:center;gap:18px;padding:0 22px;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid #e6e9f4}
.pr-menu-btn{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 15px 0 11px;border-radius:999px;border:1.5px solid var(--pale);background:#fff;
  font:500 14.5px var(--font);color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}
.pr-menu-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.pr-menu-btn:hover,.pr-menu-btn[aria-expanded="true"]{border-color:var(--blue);background:var(--mist)}
.pr-gora .brand{font-size:20px}
.pr-linki{margin-left:auto;display:flex;align-items:center;gap:26px;font:500 15px var(--font)}
.pr-linki a{color:var(--ink2);position:relative;padding:6px 0}
.pr-linki a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--red);transition:right .3s var(--ease)}
.pr-linki a:hover::after{right:0}
.pr-linki .crodu{color:var(--blue);font-weight:700;font-size:14px;letter-spacing:.06em}
.pr-linki .crodu::after{display:none}

/* --- menu rozdziałów (po lewej) ------------------------------------------------------------------------------------- */
.pr-menu{position:fixed;left:0;top:var(--gora);bottom:calc(var(--dol) + var(--zgoda-h, 0px));width:300px;z-index:48;background:rgba(255,255,255,.97);border-right:1px solid #e6e9f4;
  box-shadow:18px 0 50px -30px rgba(23,26,51,.35);transform:translateX(-104%);transition:transform .42s var(--ease);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
html.menu-on .pr-menu{transform:none}
.pr-menu-lista{padding:12px 0;flex:1}
.pr-menu-lista a{display:flex;gap:14px;align-items:flex-start;padding:9px 20px 9px 18px;border-left:3px solid transparent;color:var(--ink);transition:background .2s}
.pr-menu-lista a:hover{background:var(--mist)}
.pr-menu-lista a.akt{background:var(--mist);border-left-color:var(--red)}
.pr-menu-lista b{font:700 13px var(--font);color:var(--blue);min-width:20px;padding-top:2px}
.pr-menu-lista span{font:500 15px/1.25 var(--font)}
.pr-menu-lista small{display:block;font:400 12.5px/1.3 var(--font);color:var(--muted);margin-top:2px}
.pr-menu-lista a.byl b{color:#8f95ff}
.pr-menu-dol{display:flex;gap:18px;padding:14px 20px 18px;border-top:1px solid #e6e9f4;font:500 14px var(--font)}
.pr-menu-dol a{color:var(--blue)}

/* --- scena z planszami ------------------------------------------------------------------------------------------------ */
.pr-scena{position:fixed;inset:var(--gora) 0 calc(var(--dol) + var(--zgoda-h, 0px)) 0;transition:bottom .4s ease;z-index:2;overflow:hidden}
.rz{position:absolute;left:var(--px,0);top:var(--py,0);width:var(--pw,100%);height:var(--ph,100%);visibility:hidden;opacity:0;pointer-events:none;
  transform:translateX(calc(46px * var(--kier,1)));transition:opacity .5s ease,transform .7s var(--ease),visibility 0s linear .7s}
.rz.on{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity .6s ease .12s,transform .8s var(--ease) .08s,visibility 0s}
.rz.wyj{transform:translateX(calc(-46px * var(--kier,1)))}
html.pr-px .rz{transition:left .42s var(--ease),width .42s var(--ease),opacity .5s ease,transform .7s var(--ease),visibility 0s linear .7s}
html.pr-px .rz.on{transition:left .42s var(--ease),width .42s var(--ease),opacity .6s ease .12s,transform .8s var(--ease) .08s,visibility 0s}
.pl{position:absolute;left:0;top:0;width:var(--w0,1040px);height:var(--h0,640px);transform-origin:0 0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--s,1));
  display:flex;flex-direction:column}
html.przed .rz.on{opacity:0;transform:translateY(16px)}

/* --- pasek dolny ------------------------------------------------------------------------------------------------------ */
.pr-dol{position:fixed;inset:auto 0 var(--zgoda-h, 0px) 0;transition:bottom .4s ease;height:var(--dol);z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 22px;gap:12px;
  background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-top:1px solid #e6e9f4}
.pr-nazwa{display:flex;align-items:baseline;gap:9px;font:500 14px var(--font);color:var(--ink2);min-width:0;white-space:nowrap;overflow:hidden}
.pr-nazwa b{font-weight:700;color:var(--blue)}
.pr-nawig{display:flex;align-items:center;gap:6px}
.pr-strz{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--pale);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s,opacity .2s}
.pr-strz svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pr-strz:hover{border-color:var(--blue);background:var(--mist)}
.pr-strz:disabled{opacity:.35;cursor:default;border-color:var(--pale);background:#fff}
.pr-kropki{display:flex;align-items:center;padding:0 4px}
.pr-kropki button{width:22px;height:32px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center;transition:width .35s var(--ease)}
.pr-kropki i{display:block;width:8px;height:8px;border-radius:5px;background:#cfd5ea;transition:width .35s var(--ease),background .3s;position:relative;overflow:hidden}
.pr-kropki button:hover i{background:#9aa3cf}
.pr-kropki .byl i{background:#9da3ff}
.pr-kropki .akt{width:40px}
.pr-kropki .akt i{width:32px;background:#d7dcf3}
.pr-kropki .akt i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);background:var(--blue);border-radius:5px}
.pr-ster{display:flex;justify-content:flex-end;gap:8px}
.pr-pauza,.pr-glos{height:42px;min-width:42px;border-radius:999px;border:1.5px solid var(--pale);background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font:500 14px var(--font);padding:0 10px;transition:border-color .2s,background .2s,color .2s}
.pr-pauza:hover,.pr-glos:hover{border-color:var(--blue);background:var(--mist)}
.pr-pauza svg,.pr-glos svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pr-pauza .i-graj{display:none;fill:currentColor;stroke:none}
.pr-pauza[aria-pressed="true"] .i-pauza{display:none}
.pr-pauza[aria-pressed="true"] .i-graj{display:block}
.pr-pauza[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.pr-glos .g-x{display:none}
.pr-glos[aria-pressed="true"] .g-fale{display:none}
.pr-glos[aria-pressed="true"] .g-x{display:block}
.pr-glos[aria-pressed="true"]{color:var(--muted)}
.pr-glos-t{display:none}
.pr-glos.zablokowany{background:var(--blue);border-color:var(--blue);color:#fff;padding:0 15px 0 12px;animation:glosPuls 1.8s ease-in-out infinite}
.pr-glos.zablokowany .pr-glos-t{display:inline}
@keyframes glosPuls{0%,100%{box-shadow:0 0 0 0 rgba(9,0,233,.35)}50%{box-shadow:0 0 0 8px rgba(9,0,233,0)}}

/* --- dymek i klikalny Croduś ------------------------------------------------------------------------------------------- */
.cr-klik{position:fixed;left:0;top:0;z-index:41;border:0;padding:0;margin:0;background:transparent;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cr-klik:focus-visible{outline:3px solid var(--blue,#0900E9);outline-offset:4px}
.cr-dymek{position:fixed;left:0;top:0;z-index:45;width:max-content;max-width:min(340px,calc(100vw - 24px));background:#fff;color:#171A33;border-radius:18px;padding:14px 36px 14px 18px;
  box-shadow:0 1px 0 rgba(23,26,51,.04),0 18px 44px -12px rgba(23,26,51,.28),0 0 0 1px rgba(23,26,51,.06);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;will-change:transform;font-family:"DM Sans",system-ui,sans-serif}
.cr-dymek.on{opacity:1;visibility:visible;transition:opacity .25s ease}
.cr-dymek:after{content:"";position:absolute;bottom:-7px;left:var(--ogon,50%);width:16px;height:16px;margin-left:-8px;background:#fff;transform:rotate(45deg);border-radius:3px}
.cr-dymek.bok:after{bottom:auto;left:auto;right:-7px;top:var(--ogon,50%);margin:-8px 0 0}
.cr-tekst{margin:0;font-size:16.5px;line-height:1.42;font-weight:500;min-height:1.42em}
.cr-tekst .nie{color:transparent}
.cr-przyciski{display:flex;gap:8px;flex-wrap:wrap}
.cr-przyciski:not(:empty){margin-top:12px}
.cr-btn{font:inherit;font-size:14.5px;font-weight:500;border-radius:999px;padding:9px 16px;cursor:pointer;border:1px solid #D3E2FD;background:#fff;color:#171A33;transition:background .2s,border-color .2s,transform .2s}
.cr-btn:hover{border-color:#0900E9;transform:translateY(-1px)}
.cr-btn.glowny{background:#0900E9;border-color:#0900E9;color:#fff}
.cr-zamknij{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:#8a8fa8;font-size:19px;line-height:1;cursor:pointer}
.cr-zamknij:hover{background:#EEF3FE;color:#171A33}
.cr-odl{display:block;margin-top:10px;font:500 12.5px "DM Sans",system-ui,sans-serif;color:#8a8fa8}

/* --- telefon (i wąskie, wysokie okna): Croduś w pasie pod planszą ------------------------------------------------------ */
html.tel .pr-gora{padding:0 12px;gap:10px}
html.tel .pr-menu-btn{height:38px;padding:0 9px}
html.tel .pr-menu-btn span{display:none}
html.tel .pr-gora .brand{font-size:18px}
html.tel .pr-linki a:not(.crodu){display:none}
html.tel .pr-menu{width:min(340px,88vw)}
html.tel .pr-dol{grid-template-columns:1fr auto;padding:0 8px;gap:4px}
html.tel .pr-nazwa{display:none}
html.tel .pr-nawig{gap:2px}
html.tel .pr-strz{width:38px;height:38px}
html.tel .pr-kropki{padding:0}
html.tel .pr-kropki button{width:10px}
html.tel .pr-kropki i{width:5px;height:5px}
html.tel .pr-kropki .akt{width:20px}
html.tel .pr-kropki .akt i{width:14px}
html.tel .pr-pauza,html.tel .pr-glos{height:38px;min-width:38px;padding:0 8px}
html.tel .pr-ster{gap:5px}
html.tel .pr-glos.zablokowany{padding:0 9px}
html.tel .pr-glos.zablokowany .pr-glos-t{display:none}
html.tel .cr-dymek{padding:10px 30px 10px 13px;border-radius:15px;max-width:none}
html.tel .cr-tekst{font-size:14.5px;line-height:1.38}
html.tel .cr-btn{font-size:13.5px;padding:7px 12px}

@media (prefers-reduced-motion:reduce){.rz,.rz.on{transition:opacity .2s}.rz,.rz.wyj{transform:none}}
@media (max-width:380px){
  html.tel .pr-kropki button{width:8px}
  html.tel .pr-kropki i{width:4px;height:4px}
  html.tel .pr-kropki .akt{width:16px}
  html.tel .pr-kropki .akt i{width:11px}
  html.tel .pr-strz,html.tel .pr-pauza,html.tel .pr-glos{width:36px;min-width:36px;height:36px;padding:0}
  html.tel .pr-dol{padding:0 6px}
}

/* przycisk startu z dźwiękiem (gdy przeglądarka blokuje dźwięk do pierwszego kliknięcia), jak na crodu.com */
#bramka{position:fixed;left:50%;top:50%;z-index:60;transform:translate(-50%,-50%) scale(.96);display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s}
#bramka.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
#bramka .tak{font:700 19px/1 'DM Sans',system-ui,sans-serif;padding:19px 30px 19px 26px;border-radius:999px;border:0;background:var(--blue);color:#fff;cursor:pointer;box-shadow:0 14px 40px rgba(9,0,233,.35);display:flex;align-items:center;gap:12px;transition:transform .2s}
#bramka .tak::before{content:"";width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
#bramka .tak:hover{transform:scale(1.03)}
#bramka .nie{font:500 14px/1 'DM Sans',system-ui,sans-serif;background:none;border:0;color:var(--ink);opacity:.6;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* pasek zgody (z /_s/t.js) na całą szerokość na samym dole: strona podnosi się nad nim o --zgoda-h, nic nie zasłania */

/* --- loader jak na crodu.com: przy wejściu widać tylko jego (bez menu i pasków), potem karta startowa albo od razu Croduś --- */
#loader{position:fixed;inset:0;z-index:2147482990;--bg:#eef0f7;--blask:#f8f9fd;--ink:#171a33;--card:#ffffff;--akc:#0900e9;font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;pointer-events:none;overflow:hidden;perspective:900px;perspective-origin:50% 46%;
  background:radial-gradient(900px 620px at 50% 46%,var(--blask) 0%,transparent 72%),radial-gradient(130% 100% at 50% 46%,color-mix(in srgb,#5a55ff 10%,var(--bg)) 30%,color-mix(in srgb,#5a55ff 30%,var(--bg)) 70%,color-mix(in srgb,#3a3f8f 48%,var(--bg)) 100%);
  transition:opacity .8s ease,visibility 0s .8s;}
#loader::before{content:"";position:absolute;inset:-10%;opacity:.8;background-image:radial-gradient(color-mix(in srgb,var(--akc) 45%,transparent) 1.1px,transparent 1.7px);background-size:30px 30px;
  -webkit-mask:radial-gradient(60% 55% at 50% 46%,#000 0%,transparent 100%);mask:radial-gradient(60% 55% at 50% 46%,#000 0%,transparent 100%);animation:ldKropki 14s linear infinite}
@keyframes ldKropki{to{transform:translateY(30px)}}
html.zaladowane #loader{opacity:0;visibility:hidden;}
/* karta startowa wyskakuje nad loaderem: podpis i pasek gasną, bryły lecą dalej w tle */
html.karta #loader .lt,html.karta #loader .pasek{opacity:0;transition:opacity .4s ease}
html.karta #start-karta{background:rgba(238,240,247,.25)}
#lot{position:absolute;left:50%;top:46%;width:0;height:0;transform-style:preserve-3d}
#lot .p{position:absolute;z-index:1;left:0;top:0;transform-style:preserve-3d;opacity:0;animation:ldLot var(--t) linear var(--d) infinite}
@keyframes ldLot{0%{transform:translate3d(var(--x),var(--y),-2400px);opacity:0}14%{opacity:1}82%{opacity:1}100%{transform:translate3d(calc(var(--x)*1.6),calc(var(--y)*1.6),520px);opacity:0}}
#lot .o{position:absolute;left:calc(var(--s)/-2);top:calc(var(--s)/-2);width:var(--s);height:var(--s);transform-style:preserve-3d;animation:ldObr var(--o) linear infinite var(--kier,normal)}
@keyframes ldObr{from{transform:rotateX(var(--rx)) rotateY(0deg) rotateZ(var(--rz))}to{transform:rotateX(calc(var(--rx) + 360deg)) rotateY(540deg) rotateZ(var(--rz))}}
#lot .o i{position:absolute;inset:0;background:var(--c);border-radius:18%;backface-visibility:visible}
#lot .k i:nth-child(1){transform:translateZ(calc(var(--s)/2))}
#lot .k i:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--s)/2));filter:brightness(.78)}
#lot .k i:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--s)/2));filter:brightness(.9)}
#lot .k i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s)/2));filter:brightness(.86)}
#lot .k i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s)/2));filter:brightness(1.12)}
#lot .k i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s)/2));filter:brightness(.7)}
#lot .ku{animation:none}
#lot .ku i{border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0%,color-mix(in srgb,var(--c) 55%,#fff) 18%,var(--c) 52%,color-mix(in srgb,var(--c) 62%,#000) 100%)}
#lot .pi i{background:none;border:calc(var(--s)*.17) solid var(--c);border-radius:50%}
#lot .pi i+i{transform:translateZ(-3px);filter:brightness(.7)}
#lot .tr i{border-radius:0;clip-path:polygon(50% 4%,96% 92%,4% 92%)}
#lot .tr i+i,#lot .pl i+i{transform:translateZ(-4px);filter:brightness(.68)}
#lot .pl i{border-radius:0;clip-path:polygon(36% 0,64% 0,64% 36%,100% 36%,100% 64%,64% 64%,64% 100%,36% 100%,36% 64%,0 64%,0 36%,36% 36%)}
#loader .lt{position:absolute;left:50%;top:calc(46% + 12px);transform:translate(-50%,-50%);font-weight:700;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);white-space:nowrap;
  padding:12px 22px;border-radius:999px;background:color-mix(in srgb,var(--card) 72%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 14px 40px -22px rgba(23,26,51,.45);transition:opacity .35s ease}
#loader .lt.zm{opacity:0}
#loader .pasek{position:absolute;left:50%;top:calc(46% + 50px);width:160px;height:3px;margin-left:-80px;border-radius:3px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
#loader .pasek i{position:absolute;inset:0;background:var(--akc);transform-origin:0 50%;transform:scaleX(0);transition:transform .35s ease}