/* Pasek górny i menu: wspólne dla strony głównej i poradników. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.belka{position:sticky;top:0;z-index:20;background:var(--tlo);transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.belka.skryta{transform:translateY(-100%)}
.belka.cien{box-shadow:0 1px 0 rgba(26,33,64,.1)}
.b-w{display:flex;align-items:center;gap:6px;max-width:var(--b-max,none);margin:0 auto;padding:6px var(--bok,18px);min-height:60px}
.b-w .znak{margin-right:auto}
.b-nav,.b-cta{display:none}

.m-btn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 14px;border-radius:22px;background:var(--piasek);color:var(--ink);font:800 17px/1 var(--h);transition:transform .1s}
.m-btn:active,.m-zam:active{transform:scale(.95)}
.m-ik{display:flex;flex-direction:column;gap:5px;width:18px}
.m-ik i{display:block;height:2.5px;border-radius:2px;background:currentColor}
.m-ik i:last-child{width:12px}

/* Menu */
.menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--tlo);color:var(--ink);overflow:hidden}
.menu[open]{display:grid;grid-template-rows:auto 1fr auto}
.menu::backdrop{background:rgba(26,33,64,.38)}
html.m-otw{overflow:hidden}
.m-gora{display:flex;align-items:center;padding:6px var(--bok,18px);min-height:60px}
.m-gora .znak{margin-right:auto}
.m-zam{position:relative;width:44px;height:44px;border-radius:50%;background:var(--piasek);color:var(--ink);transition:transform .1s}
.m-zam i{position:absolute;left:13px;top:20.75px;width:18px;height:2.5px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
.m-zam i+i{transform:rotate(-45deg)}
.m-tresc{overflow-y:auto;overscroll-behavior:contain;padding:4px var(--bok,18px) 20px}
.m-h{font:800 24px/1.1 var(--h);letter-spacing:-.012em;margin:14px 0 4px}
.m-lista{list-style:none;padding:0;margin:0}
.m-lista a{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center;min-height:64px;padding:7px 0;color:inherit;text-decoration:none;border-radius:14px}
.m-lista b{display:block;font:800 20px/1.15 var(--h);letter-spacing:-.008em}
.m-lista small{display:block;margin-top:2px;font-size:15.5px;line-height:1.3;color:var(--szary)}
.m-k{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:15px;font:800 19px/1 var(--h);background:var(--piasek)}
.m-k svg{width:26px;height:26px}
.m-k.t-nieb{background:var(--j-nieb,#DCE6FB)}.m-k.t-koral{background:var(--j-koral,#FFE3DB)}.m-k.t-lila{background:var(--j-lila,#E8E1FA)}.m-k.t-mint{background:var(--j-mint,#D5F1E5)}.m-k.t-sun{background:var(--j-sun,#FFF0C8)}
.m-lista a[aria-current] .m-k{background:var(--ink);color:#fff}
.m-lista a[aria-current] b{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.m-dol{padding:10px var(--bok,18px) calc(12px + env(safe-area-inset-bottom));box-shadow:0 -1px 0 rgba(26,33,64,.08)}
.m-cta{display:flex;align-items:center;justify-content:center;min-height:58px;border-radius:16px;background:var(--sun);color:var(--ink);font:800 21px/1 var(--h);text-decoration:none}

@media (hover:hover){.m-lista a:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}}

@media (min-width:900px){
  .belka{box-shadow:0 1px 0 rgba(26,33,64,.08)}
  .b-w{min-height:76px;gap:4px}
  .b-nav{display:flex;margin-right:10px}
  .b-nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;font-weight:700;font-size:17px;text-decoration:none;border-radius:12px}
  .b-nav a:hover,.b-nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
  .b-cta{display:flex;align-items:center;min-height:48px;padding:0 22px;border-radius:15px;background:var(--sun);font:800 18px/1 var(--h);text-decoration:none;margin-left:8px;order:3}
  .menu{--bok:28px;left:auto;width:min(440px,100%);box-shadow:-1px 0 0 rgba(26,33,64,.08)}
  .m-gora{min-height:76px}
}

@media (prefers-reduced-motion:no-preference){
  .menu[open]{animation:m-wej .26s cubic-bezier(.2,.8,.2,1)}
  .menu[open]::backdrop{animation:m-tlo .26s ease-out}
  .menu[open] .m-lista li{animation:m-li .32s calc(70ms + var(--i,0) * 22ms) cubic-bezier(.2,.8,.2,1) both}
  .menu.zamyka{animation:m-wyj .18s ease-in forwards}
  .menu.zamyka::backdrop{animation:m-tlo .18s ease-in reverse forwards}
  @keyframes m-wej{from{opacity:0;transform:translateY(-14px)}}
  @keyframes m-wyj{to{opacity:0;transform:translateY(-10px)}}
  @keyframes m-tlo{from{opacity:0}}
  @keyframes m-li{from{opacity:0;transform:translateY(8px)}}
}
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
  @keyframes m-wej{from{opacity:0;transform:translateX(28px)}}
  @keyframes m-wyj{to{opacity:0;transform:translateX(20px)}}
}
@media (prefers-reduced-motion:reduce){.belka{transition:none}}
html{scrollbar-gutter:stable}
/* Kafel gry: ludzik i liczba osób, żeby nie wyglądało jak wiek */
.m-k.m-os{gap:1px;font-size:17px;padding-top:3px}
.m-k.m-os svg{width:17px;height:17px;fill:currentColor;margin:-3px 0 0 -2px}
/* Logo: końcówka domeny na żółtej karteczce, jak wylosowany fant */
.znak .pl,.st-z .pl{display:inline-block;margin-left:3px;padding:.14em .2em .04em;background:var(--sun,#FFC94D);color:var(--ink,#1A2140);border-radius:.2em;transform:rotate(-7deg);font-size:.72em;line-height:1;box-shadow:1px 2px 0 rgba(26,33,64,.18)}
/* Ikona na ekranie telefonu */
.m-inst{margin-top:18px;padding-top:12px;box-shadow:0 -1px 0 rgba(26,33,64,.1)}
.m-lista-b{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center;width:100%;min-height:64px;padding:7px 0;text-align:left;color:inherit;background:none;border:0;font:inherit;cursor:pointer}
.m-lista-b b{display:block;font:800 20px/1.15 var(--h);letter-spacing:-.008em}
.m-lista-b small{display:block;margin-top:2px;font-size:15.5px;line-height:1.3;color:var(--szary)}
.m-ios{margin:6px 0 4px 62px;padding:12px 14px;border-radius:14px;background:var(--j-sun,#FFF0C8);font-size:17px;line-height:1.4}
.m-ios svg{width:20px;height:20px;vertical-align:-4px}
html{scroll-padding-top:76px}