/* ==========================================================================
   MOLKSGAMES — arkusz stylow
   Kolory zmienisz w jednym miejscu: w sekcji :root ponizej.
   Motyw: chlodna czern + elektryczny blekit / akwamaryna / kwasna limonka
   ========================================================================== */

:root{
  /* --- tlo i tekst --- */
  --bg:        #080c14;   /* chlodna, gleboka czern */
  --bg-2:      #0e1420;
  --surface:   rgba(210,230,255,.05);
  --surface-2: rgba(210,230,255,.085);
  --line:      rgba(200,220,255,.12);
  --text:      #eaf0fa;
  --muted:     #93a3bd;

  /* --- kolory marki --- */
  --blue:  #3d7bff;   /* elektryczny blekit */
  --sky:   #6ba4ff;
  --aqua:  #2ee6c5;   /* akwamaryna */
  --lime:  #c6f135;   /* kwasna limonka */
  --coral: #ff5c5c;
  --tang:  #ff9a3c;

  /* domyslna para kolorow karty (kazda gra nadpisuje ja w HTML) */
  --c1: #3d7bff;
  --c2: #2ee6c5;

  --ink:  #06101a;        /* tekst na jasnych przyciskach */

  --radius:    22px;
  --radius-sm: 14px;
  --wrap:      1160px;
  --nav-h:     68px;
}

/* --------------------------------------------------------- reset / bazowe */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(15px,.55vw + 13.5px,17px);
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  line-height:1.12;
  letter-spacing:-.025em;
  margin:0;
}
p{ margin:0; }
img{ max-width:100%; height:auto; display:block; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }

:focus-visible{ outline:2px solid var(--aqua); outline-offset:3px; border-radius:6px; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(18px,4vw,28px);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--aqua); color:var(--ink); font-weight:600;
  padding:10px 16px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }

/* ------------------------------------------------------------------ tlo */
.bg{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(1200px 760px at 50% -12%, #16233f 0%, transparent 62%),
    var(--bg);
}

.blob{
  position:absolute;
  width:min(58vw,620px); aspect-ratio:1;
  border-radius:50%;
  filter:blur(100px);
  opacity:.26;
  animation:drift 24s ease-in-out infinite alternate;
}
.blob--1{ background:var(--blue);  top:-16%; left:-12%; opacity:.34; }
.blob--2{ background:var(--aqua);  top:26%;  right:-18%; opacity:.2; animation-delay:-8s; }
.blob--3{ background:var(--lime);  bottom:-20%; left:22%; opacity:.14; animation-delay:-15s; }

@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(4%,6%,0) scale(1.14); }
}

.grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(200,220,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,220,255,.03) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(900px 620px at 50% 8%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(900px 620px at 50% 8%, #000 0%, transparent 78%);
}

/* delikatne ziarno — zabija "plastikowy" wyglad gradientow */
.bg::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.045;
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){ .blob{ animation:none; } }

/* ----------------------------------------------------------------- menu */
.nav{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(8,12,20,.62);
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease;
}
.nav.is-stuck{ background:rgba(8,12,20,.9); border-bottom-color:var(--line); }

.nav__inner{ min-height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:16px; }

.logo{ display:inline-flex; align-items:center; gap:11px; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; }
/* logo: sama krowa, bez kolorowego kwadratu pod spodem.
   Delikatna jasna poswiata odcina czarna glowe od ciemnego tla. */
.logo__mark{
  width:48px; height:38px; flex:none;   /* glowa jest szersza niz wyzsza */
  display:grid; place-items:center;
}
.logo__mark img{
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 0 1.5px rgba(255,255,255,.55)) drop-shadow(0 3px 7px rgba(0,0,0,.7));
}
.logo__text{ font-size:19px; letter-spacing:-.02em; }
.logo__text span{
  background:linear-gradient(90deg,var(--aqua),var(--lime));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.menu{ display:flex; align-items:center; gap:6px; }
.menu > a{
  padding:9px 13px; border-radius:10px;
  font-size:.94rem; font-weight:500; color:var(--muted);
  transition:color .18s ease, background .18s ease;
}
.menu > a:hover{ color:var(--text); background:var(--surface); }
.menu > a.btn{ color:var(--ink); }

.burger{
  display:none;
  width:44px; height:44px; padding:0;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  cursor:pointer;
}
.burger span{
  display:block; width:19px; height:2px; margin:4px auto;
  background:var(--text); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------------ ikony
   Kreskowe ikony 24x24 wklejone w strone (sprite na gorze index.html).
   Kolor dziedzicza po tekscie, wiec wystarczy ustawic color na rodzicu. */
.ikony{ position:absolute; width:0; height:0; overflow:hidden; }

.ico{
  width:24px; height:24px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* --------------------------------------------------------------- przyciski */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px;
  border:1px solid transparent; border-radius:999px;
  font-weight:600; font-size:.96rem; line-height:1;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--sm{ padding:9px 16px; font-size:.88rem; }

.btn--primary{
  background:linear-gradient(135deg,var(--blue),var(--aqua));
  color:var(--ink);
  box-shadow:0 10px 30px -10px rgba(61,123,255,.75);
}
.btn--primary:hover{ box-shadow:0 16px 40px -12px rgba(46,230,197,.6); }

.btn--ghost{ background:var(--surface); border-color:var(--line); color:var(--text); }
.btn--ghost:hover{ background:var(--surface-2); border-color:rgba(200,220,255,.28); }

/* przycisk sklepu przejmuje kolory karty, w ktorej stoi */
.btn--play{
  background:linear-gradient(135deg,var(--c1),var(--c2));
  color:var(--ink);
  box-shadow:0 10px 30px -12px color-mix(in srgb, var(--c1) 80%, transparent);
}
.btn--play svg{ width:17px; height:17px; fill:currentColor; flex:none; }
.btn svg{ width:16px; height:16px; fill:currentColor; flex:none; }

/* ------------------------------------------------------- maskotka w hero */
.cowstage{
  display:grid; justify-items:center; gap:4px;
  perspective:900px;              /* zeby obrot wygladal przestrzennie */
  margin-bottom:2px;
}

.cow{
  width:clamp(108px,14vw,164px);
  padding:0; border:0; background:none; cursor:pointer;
  transform-style:preserve-3d;
  animation:cow-turn 11s ease-in-out infinite;   /* co ~11 s pelny obrot */
}
/* taniec siedzi na opakowaniu, nie na obrazku — dzieki temu czapeczka
   podskakuje razem z krowa */
.cow__inner{
  position:relative; display:block;
  transform-origin:50% 88%;
  animation:cow-dance 1.15s ease-in-out infinite;
}
.cow img{
  display:block; width:100%;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.5));
}

/* czapeczka — widoczna dopiero po odkryciu sekretu */
.cow__hat{
  position:absolute; left:50%; top:-3%;
  width:27%;
  transform:translateX(-50%) rotate(-12deg) scale(0);
  transform-origin:50% 100%;
  opacity:0; pointer-events:none;
  transition:transform .45s cubic-bezier(.34,1.4,.5,1), opacity .3s ease;
}
.cow__hat svg{ display:block; width:100%; filter:drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.cow.has-hat .cow__hat{ opacity:1; transform:translateX(-50%) rotate(-12deg) scale(1); }

.cow__hint.is-secret{ color:var(--lime); opacity:1; }

/* podskok + kolysanie na boki */
@keyframes cow-dance{
  0%,100%{ transform:translateY(0) rotate(-5deg) scaleY(1); }
  25%    { transform:translateY(-9px) rotate(0deg) scaleY(1.04); }
  50%    { transform:translateY(0) rotate(5deg) scaleY(.96); }
  75%    { transform:translateY(-9px) rotate(0deg) scaleY(1.04); }
}

/* obrot dookola wlasnej osi — dzieje sie w ostatniej cwiartce cyklu */
@keyframes cow-turn{
  0%,76%{ transform:rotateY(0deg); }
  100%  { transform:rotateY(360deg); }
}

/* szybki podwojny obrot po klikniecu */
.cow.is-spin{ animation:cow-spin .85s cubic-bezier(.34,.9,.32,1); }
@keyframes cow-spin{
  from{ transform:rotateY(0deg) scale(1); }
  55% { transform:rotateY(400deg) scale(1.08); }
  to  { transform:rotateY(720deg) scale(1); }
}

.cow__hint{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); opacity:.55;
  transition:opacity .2s ease, color .2s ease;
}
.cowstage:hover .cow__hint{ opacity:1; color:var(--aqua); }

@media (prefers-reduced-motion:reduce){
  .cow, .cow__inner{ animation:none; }
}

/* ----------------------------------------------------------------- hero */
.hero{ padding:clamp(56px,9vw,112px) 0 clamp(32px,5vw,56px); }
.hero__inner{ text-align:center; display:grid; justify-items:center; gap:22px; }

.eyebrow{
  display:inline-block;
  padding:7px 15px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
  font-size:.8rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted);
}

.hero__title{ font-size:clamp(2.15rem,6.4vw,4.35rem); font-weight:800; max-width:16ch; }
.grad{
  background:linear-gradient(100deg,var(--sky),var(--aqua) 48%,var(--lime) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero__lead{ max-width:56ch; color:var(--muted); font-size:clamp(1rem,1.3vw,1.14rem); }

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

.hero__apps{ display:flex; gap:clamp(12px,2.4vw,20px); margin-top:10px; }
.hero__apps img{
  width:clamp(64px,15vw,88px); border-radius:22px;
  border:1px solid var(--line);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.9);
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease;
}
.hero__apps a:hover img{ transform:translateY(-7px) rotate(-3deg) scale(1.05); box-shadow:0 22px 44px -14px rgba(61,123,255,.6); }

.stats{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(18px,5vw,56px);
  margin:18px 0 0; padding:20px clamp(20px,4vw,40px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.stats dt{
  font-family:"Bricolage Grotesque",sans-serif; font-size:1.7rem; font-weight:700;
  background:linear-gradient(120deg,var(--aqua),var(--lime));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stats dd{ margin:2px 0 0; font-size:.86rem; color:var(--muted); }

/* ------------------------------------------------------- mini-gra: krowa */
.game10{
  display:flex; align-items:center; gap:clamp(24px,4vw,56px);
  padding:clamp(24px,3.4vw,40px);
  background:linear-gradient(115deg, rgba(61,123,255,.14), rgba(198,241,53,.07));
  border:1px solid var(--line); border-radius:var(--radius);
}

.game10__stage{ position:relative; flex:none; width:clamp(150px,20vw,230px); }

.game10__cow{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none;
  transition:transform .09s ease-out;
}
.game10__cow img{
  display:block; width:100%; pointer-events:none;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.55));
}
.game10__cow.is-live{ animation:cow10-idle 1.4s ease-in-out infinite; }
.game10__cow.is-hit{ animation:cow10-hit .12s ease-out; }

@keyframes cow10-idle{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%    { transform:translateY(-6px) rotate(2deg); }
}
@keyframes cow10-hit{
  from{ transform:scale(.9) rotate(-3deg); }
  to  { transform:scale(1) rotate(0); }
}

/* fruwajace "+1" */
.game10__fx{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
.game10__plus{
  position:absolute;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.25rem;
  color:var(--lime);
  text-shadow:0 2px 8px rgba(0,0,0,.7);
  animation:plusjeden .7s ease-out forwards;
}
@keyframes plusjeden{
  from{ transform:translate(-50%,0) scale(.7); opacity:1; }
  to  { transform:translate(-50%,-64px) scale(1.25); opacity:0; }
}

.game10__panel{ flex:1 1 320px; min-width:0; }

.game10__score{ display:flex; align-items:baseline; gap:10px; }
.game10__count{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(2.6rem,7vw,4rem); line-height:1;
  background:linear-gradient(120deg,var(--aqua),var(--lime));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.game10__unit{ color:var(--muted); font-size:.95rem; }

.game10__bar{
  margin-top:16px; height:10px; border-radius:99px; overflow:hidden;
  background:rgba(210,230,255,.09); border:1px solid var(--line);
}
.game10__fill{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--blue),var(--aqua),var(--lime));
}
.game10__time{
  margin-top:6px; text-align:right;
  font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums;
}

.game10__msg{ margin-top:14px; min-height:1.6em; color:var(--text); font-weight:500; }

.game10__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:18px; }
.game10__best{ font-size:.92rem; color:var(--muted); }
.game10__best b{ color:var(--lime); font-weight:700; }

.game10__share{ margin-top:14px; font-size:.88rem; color:var(--muted); }
.game10__share a{ color:var(--aqua); font-weight:600; }

.game10__moo{
  margin-top:18px; padding-top:14px;
  border-top:1px solid var(--line);
  font-size:.8rem; color:var(--muted); opacity:.8;
}
.game10__moo b{ color:var(--text); }

/* -------------------------------------------------- zgoda na ciasteczka */
.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:140;
  padding:clamp(12px,2vw,20px);
  transform:translateY(120%);
  transition:transform .45s cubic-bezier(.2,.9,.3,1);
}
.cookie.is-on{ transform:none; }

.cookie__box{
  max-width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; gap:clamp(16px,2.6vw,32px);
  padding:clamp(16px,2.2vw,24px);
  background:#0c121e;
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9);
}

.cookie__tytul{ font-size:1rem; margin-bottom:6px; }
.cookie__txt p{ font-size:.88rem; color:var(--muted); max-width:74ch; }
.cookie__txt a{ color:var(--aqua); font-weight:600; }

.cookie__btns{ display:flex; flex-wrap:wrap; gap:10px; flex:none; }

.foot__cookies{
  padding:0; border:0; background:none;
  color:var(--muted); font:inherit; font-size:inherit;
  text-decoration:underline; text-underline-offset:3px;
  cursor:pointer;
  transition:color .18s ease;
}
.foot__cookies:hover{ color:var(--aqua); }

@media (prefers-reduced-motion:reduce){ .cookie{ transition:none; } }

/* ------------------------------------------------------------- konfetti */
.konfetti{ position:fixed; inset:0 0 auto; height:0; z-index:120; pointer-events:none; }
.konfetti span{
  position:absolute; top:-14px;
  width:9px; height:14px;
  animation:spada linear forwards;
}
@keyframes spada{
  from{ transform:translateY(-10px) rotate(0deg); opacity:1; }
  to  { transform:translateY(102vh) rotate(720deg); opacity:.9; }
}

/* -------------------------------------------------- krowa-towarzysz w rogu */
.buddy{
  position:fixed; left:18px; bottom:18px; z-index:80;
  opacity:0; transform:translateY(16px) scale(.85);
  pointer-events:none;
  transition:opacity .3s ease, transform .35s cubic-bezier(.34,1.3,.5,1);
}
.buddy.is-on{ opacity:1; transform:none; pointer-events:auto; }

.buddy__link{
  position:relative; display:block; width:62px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.7));
  transition:transform .25s cubic-bezier(.34,1.3,.5,1);
}
.buddy__link:hover{ transform:translateY(-5px) rotate(-5deg); }
.buddy__link img{ display:block; width:100%; }

.buddy__prop{
  position:absolute; right:-10px; top:-10px;
  width:30px; height:30px;
  display:grid; place-items:center;
  color:var(--aqua);
  background:var(--bg-2); border:1px solid var(--line); border-radius:50%;
  box-shadow:0 4px 10px rgba(0,0,0,.6);
}
.buddy__prop .ico{ width:16px; height:16px; }
.buddy__prop.is-swap{ animation:rekwizyt .4s cubic-bezier(.34,1.5,.5,1); }
@keyframes rekwizyt{
  from{ transform:scale(0) rotate(-40deg); }
  to  { transform:scale(1) rotate(0); }
}

.buddy__close{
  position:absolute; right:-8px; bottom:-6px; z-index:2;
  width:22px; height:22px; padding:0;
  display:grid; place-items:center;
  background:var(--bg-2); color:var(--muted);
  border:1px solid var(--line); border-radius:50%;
  font-size:15px; line-height:1; cursor:pointer;
  opacity:0; transition:opacity .2s ease, color .2s ease;
}
.buddy:hover .buddy__close{ opacity:1; }
.buddy__close:hover{ color:var(--coral); }

@media (prefers-reduced-motion:reduce){
  .game10__cow, .buddy__prop, .konfetti span{ animation:none; }
}

/* -------------------------------------------------------------- sekcje */
.section{ padding:clamp(52px,8vw,96px) 0; }
.section--tight{ padding-block:clamp(36px,5vw,60px); }

.section__head{ text-align:center; margin-bottom:clamp(30px,4vw,48px); }
.section__title{ font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:700; }
.section__sub{ margin-top:10px; color:var(--muted); }

/* ------------------------------------------------------------------ gry */
.games{ display:grid; gap:clamp(18px,2.6vw,26px); grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }

.game{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(20px,2.6vw,28px);
  background:linear-gradient(180deg, rgba(210,230,255,.07), rgba(210,230,255,.025));
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.3,1), border-color .28s ease, box-shadow .28s ease;
}
.game::before{
  content:""; position:absolute; inset:0 0 auto; height:4px;
  background:linear-gradient(90deg,var(--c1),var(--c2));
}
.game::after{
  content:""; position:absolute; inset:-40% 40% auto -20%; height:70%;
  background:radial-gradient(circle, var(--c1) 0%, transparent 68%);
  opacity:.14; pointer-events:none;
}
.game:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--c1) 45%, transparent);
  box-shadow:0 26px 60px -26px color-mix(in srgb, var(--c1) 75%, transparent);
}

.game__top{ display:flex; align-items:center; gap:16px; position:relative; }
.game__icon img{
  width:76px; border-radius:20px;
  border:1px solid var(--line);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.9);
  transition:transform .25s ease;
}
.game__icon:hover img{ transform:scale(1.06) rotate(-3deg); }

.game__name{ font-size:1.28rem; font-weight:700; }
.game__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.game__tags span{
  padding:4px 10px; border-radius:999px;
  font-size:.72rem; font-weight:600; letter-spacing:.03em;
  background:color-mix(in srgb, var(--c1) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--c1) 42%, transparent);
  color:var(--text);
}

.game__pitch{
  display:flex; align-items:flex-start; gap:10px;
  margin:20px 0 12px;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:1.02rem;
  color:#fff;
}
.game__pitch .ico{ width:21px; height:21px; margin-top:2px; color:var(--c1); }

/* opis: na starcie przyciety, rozwijany przyciskiem "Czytaj wiecej" */
.game__desc{
  position:relative;
  color:var(--muted); font-size:.94rem;
  max-height:132px; overflow:hidden;
  transition:max-height .45s ease;
  /* delikatne wygaszenie dolnej krawedzi przycietego opisu */
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
}
.game.is-open .game__desc{
  max-height:2000px;
  -webkit-mask-image:none;
          mask-image:none;
}

.game__desc p + p{ margin-top:12px; }
.feats{ display:grid; gap:9px; margin:14px 0; }
.feats li{ position:relative; padding-left:24px; }
.feats li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,var(--c1),var(--c2));
}
.feats b{ color:var(--text); font-weight:600; }

.more{
  align-self:flex-start;
  margin-top:12px; padding:8px 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  color:var(--text); font:inherit; font-size:.86rem; font-weight:600;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.more:hover{ background:var(--surface-2); border-color:color-mix(in srgb, var(--c1) 50%, transparent); }

.game__actions{ margin-top:auto; padding-top:22px; display:grid; gap:10px; }
.game__actions .btn{ width:100%; }
.game__social{ color:var(--muted); }
.game__social:hover{ color:var(--text); }

/* ------------------------------------------------------ zwiastun (YouTube) */
.trailer{
  display:flex; align-items:center; gap:clamp(22px,3.4vw,40px);
  margin-top:clamp(18px,2.6vw,26px);
  padding:clamp(20px,2.8vw,32px);
  background:linear-gradient(110deg, color-mix(in srgb, var(--c1) 14%, transparent), rgba(210,230,255,.03));
  border:1px solid color-mix(in srgb, var(--c1) 28%, var(--line));
  border-radius:var(--radius);
}

.trailer__player{ flex:none; width:clamp(180px,20vw,232px); }

/* pionowy odtwarzacz 9:16 — proporcje jak ekran telefonu */
.trailer__player .lite,
.trailer__player iframe{
  display:block; width:100%; aspect-ratio:9/16;
  border:1px solid var(--line); border-radius:20px;
  background:#05080d;
}

.lite{
  position:relative; padding:0; overflow:hidden; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.9);
}
.lite img{
  width:100%; height:100%;
  /* miniatura z YouTube jest 16:9 — cover wycina z niej dokladnie pionowy kadr */
  object-fit:cover; object-position:center;
}
.lite__play{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(5,8,13,.15), rgba(5,8,13,.45));
  transition:background .25s ease;
}
.lite__play svg{
  width:60px; height:60px; padding:17px 15px 17px 20px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  fill:var(--ink);
  box-shadow:0 10px 26px -8px color-mix(in srgb, var(--c1) 85%, transparent);
  transition:transform .25s cubic-bezier(.2,.8,.3,1);
}
.lite:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -22px color-mix(in srgb, var(--c1) 75%, transparent); }
.lite:hover .lite__play{ background:linear-gradient(180deg, rgba(5,8,13,.05), rgba(5,8,13,.3)); }
.lite:hover .lite__play svg{ transform:scale(1.09); }

.trailer__label{
  font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c1);
}
.trailer__info h3{ margin:6px 0 10px; font-size:clamp(1.2rem,2.2vw,1.6rem); }
.trailer__info > p:last-of-type{ color:var(--muted); max-width:46ch; }
.trailer__links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }

/* --------------------------------------------------------------- studio */
.about{
  padding:clamp(24px,3.4vw,40px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.about__lead{ font-size:clamp(1.02rem,1.6vw,1.2rem); max-width:70ch; margin-inline:auto; text-align:center; color:var(--muted); }
.about__lead b{ color:var(--text); }

.cards{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-top:28px; }
.card{
  padding:20px;
  background:rgba(210,230,255,.04); border:1px solid var(--line); border-radius:var(--radius-sm);
  transition:transform .22s ease, background .22s ease;
}
.card:hover{ transform:translateY(-4px); background:rgba(210,230,255,.08); }
.card__ico{ display:block; color:var(--ik,var(--aqua)); }
.card__ico .ico{ width:26px; height:26px; }
.card h3{ margin:10px 0 6px; font-size:1.02rem; }
.card p{ font-size:.88rem; color:var(--muted); }

/* ------------------------------------------------------------- maskotka */
.mascot{
  display:grid; align-items:center;
  grid-template-columns:1fr auto;
  gap:clamp(22px,3.2vw,44px);
  margin-top:16px; padding:clamp(22px,3vw,34px) clamp(22px,3.4vw,40px);
  background:linear-gradient(110deg, rgba(61,123,255,.14), rgba(198,241,53,.07));
  border:1px solid var(--line); border-radius:var(--radius);
}

.mascot__intro{ display:flex; align-items:center; gap:clamp(20px,3vw,36px); }

.mascot__art{
  position:relative; flex:none;
  display:grid; place-items:center;
  width:clamp(120px,17vw,170px); aspect-ratio:3/4;
}
.mascot__art::before{           /* poswiata za krowa */
  content:""; position:absolute; inset:6%;
  border-radius:50%;
  background:radial-gradient(circle, var(--aqua) 0%, transparent 68%);
  opacity:.28; filter:blur(14px);
}
.mascot__art img{
  position:relative; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.55));
  animation:sway 6s ease-in-out infinite alternate;
}
@keyframes sway{
  from{ transform:translateY(0) rotate(-2deg); }
  to  { transform:translateY(-8px) rotate(2deg); }
}
@media (prefers-reduced-motion:reduce){ .mascot__art img{ animation:none; } }

.mascot__label{
  font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--aqua);
}
.mascot__txt h3{ margin:6px 0 10px; font-size:clamp(1.2rem,2.2vw,1.55rem); }
.mascot__txt > p:last-of-type{ color:var(--muted); max-width:52ch; }
.mascot__links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

/* filmik z TikToka w sekcji maskotki */
.mascot__clip{ margin:0; width:clamp(285px,27vw,340px); flex:none; }
.mascot__clip .lite,
.mascot__clip iframe{
  display:block; width:100%;
  aspect-ratio:325/738;          /* player TikToka ma opis pod filmem */
  border:1px solid var(--line); border-radius:20px;
  background:#05080d;
}
.mascot__clip .lite img{ filter:brightness(1.3) contrast(1.06); }
.mascot__clip figcaption{
  margin-top:12px; text-align:center;
  font-size:.8rem; color:var(--muted);
}
.mascot__clip figcaption b{ color:var(--aqua); font-weight:600; }

/* --------------------------------------------------------- ikony social */
.socials{ display:flex; gap:10px; margin-top:16px; }
.socials a{
  display:grid; place-items:center;
  width:40px; height:40px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  color:var(--muted);
  transition:color .2s ease, background .2s ease, transform .2s ease, border-color .2s ease;
}
.socials a:hover{
  color:var(--ink); background:linear-gradient(135deg,var(--blue),var(--aqua));
  border-color:transparent; transform:translateY(-3px);
}
.socials svg{ width:19px; height:19px; fill:currentColor; }

/* ------------------------------------------------------------- wsparcie */
.support{
  display:flex; align-items:center; gap:clamp(22px,3.4vw,44px);
  margin-top:clamp(18px,2.6vw,26px);
  padding:clamp(24px,3.2vw,38px);
  background:linear-gradient(115deg, rgba(255,92,92,.12), rgba(198,241,53,.07));
  border:1px solid color-mix(in srgb, var(--coral) 24%, var(--line));
  border-radius:var(--radius);
}

/* glowa krowy z serduszkiem w rogu */
.support__art{
  position:relative; flex:none;
  width:clamp(96px,12vw,132px);
  display:grid; place-items:center;
}
.support__art::before{
  content:""; position:absolute; inset:-14%;
  border-radius:50%;
  background:radial-gradient(circle, var(--coral) 0%, transparent 68%);
  opacity:.22; filter:blur(12px);
}
.support__art img{
  position:relative; width:100%;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));
}
.support__heart{
  position:absolute; right:-2px; top:-6px;
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--coral),var(--tang));
  box-shadow:0 8px 18px -6px rgba(255,92,92,.8);
  animation:heartbeat 2.2s ease-in-out infinite;
}
.support__heart svg{ width:19px; height:19px; fill:#fff; }

@keyframes heartbeat{
  0%,100%{ transform:scale(1); }
  14%    { transform:scale(1.16); }
  28%    { transform:scale(1); }
  42%    { transform:scale(1.1); }
}
@media (prefers-reduced-motion:reduce){ .support__heart{ animation:none; } }

.support__label{
  font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--coral);
}
.support__txt h3{ margin:6px 0 10px; font-size:clamp(1.2rem,2.2vw,1.6rem); }
.support__lead{ color:var(--muted); max-width:58ch; }

.support__list{ display:grid; gap:8px; margin:16px 0 0; }
.support__list li{
  position:relative; padding-left:26px;
  font-size:.92rem; color:var(--muted);
}
.support__list li::before{
  content:""; position:absolute; left:3px; top:.55em;
  width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg,var(--coral),var(--tang));
}

.support__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:20px; }
.support__cta .btn--primary{
  background:linear-gradient(135deg,var(--coral),var(--tang));
  color:var(--ink);
  box-shadow:0 10px 30px -10px rgba(255,92,92,.75);
}
.support__cta .btn--primary:hover{ box-shadow:0 16px 40px -12px rgba(255,154,60,.7); }
.support__note{ font-size:.8rem; color:var(--muted); opacity:.75; }

/* -------------------------------------------------------------- kontakt */
.contact{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(24px,3.4vw,38px);
  background:linear-gradient(120deg, rgba(61,123,255,.2), rgba(198,241,53,.1));
  border:1px solid var(--line); border-radius:var(--radius);
}
.contact .section__sub{ margin-top:8px; }
.contact__cta{ display:flex; flex-wrap:wrap; gap:10px; }


/* --------------------------------------------------------------- stopka */
.foot{ border-top:1px solid var(--line); background:rgba(5,8,14,.6); padding-top:clamp(38px,5vw,56px); }
.foot__inner{ display:grid; gap:30px; grid-template-columns:1.4fr 1fr 1fr 1fr; }
.foot__brand p{ margin-top:12px; color:var(--muted); font-size:.9rem; max-width:32ch; }

.foot__col h4{ font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.foot__col a,
.foot__col .soon{ display:block; padding:5px 0; font-size:.91rem; color:var(--text); }
.foot__col a{ transition:color .18s ease; }
.foot__col a:hover{ color:var(--aqua); }
.foot__col .soon{ color:var(--muted); font-style:italic; }

.foot__bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  margin-top:clamp(30px,4vw,48px); padding-block:20px;
  border-top:1px solid var(--line);
  font-size:.83rem; color:var(--muted);
}
.foot__note{ opacity:.7; }

/* ================= PODSTRONA: POLITYKA PRYWATNOSCI ================= */
.page{ padding:clamp(40px,6vw,72px) 0 clamp(30px,4vw,48px); }
.page__title{ font-size:clamp(1.9rem,4.4vw,3rem); font-weight:800; }
.page__lead{ margin-top:14px; max-width:64ch; color:var(--muted); }
.crumbs{ margin-bottom:16px; font-size:.86rem; color:var(--muted); }
.crumbs a:hover{ color:var(--aqua); }

.policies{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.policy{
  display:flex; flex-direction:column; gap:14px;
  padding:22px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .22s ease, border-color .22s ease;
}
.policy:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--c1) 45%, transparent); }
.policy__head{ display:flex; align-items:center; gap:14px; }
.policy__head img{ width:56px; border-radius:15px; border:1px solid var(--line); }
.policy__head h3{ font-size:1.05rem; }
.policy__head p{ font-size:.8rem; color:var(--muted); margin-top:4px; }
.policy p.policy__txt{ font-size:.9rem; color:var(--muted); }
.policy .btn{ margin-top:auto; width:100%; }

.badge{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:999px;
  font-size:.78rem; font-weight:600;
  background:rgba(46,230,197,.15); border:1px solid rgba(46,230,197,.42); color:#7ff0da;
}

.note{
  margin-top:26px; padding:18px 20px;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--aqua);
  border-radius:var(--radius-sm);
  font-size:.9rem; color:var(--muted);
}
.note a{ color:var(--aqua); }

/* ---------------------------------------------------- animacja pojawiania */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ================================ TELEFON / TABLET ======================= */
@media (max-width:900px){
  .foot__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  .burger{ display:block; }

  .menu{
    position:fixed; inset:var(--nav-h) 0 auto;
    flex-direction:column; align-items:stretch; gap:4px;
    padding:16px clamp(18px,4vw,28px) 22px;
    background:#0a1018;
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 50px -20px rgba(0,0,0,.9);
    transform:translateY(-12px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .menu.is-open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .menu > a{ padding:13px 14px; font-size:1rem; border-radius:12px; }
  .menu > a.btn{ margin-top:8px; padding:14px; }

  .hero__cta .btn{ width:100%; }
  .hero__cta{ width:100%; max-width:340px; }

  .stats{ width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-inline:14px; }
  .stats > div{ text-align:center; }
  .stats dt{ font-size:1.35rem; }
  .stats dd{ font-size:.76rem; line-height:1.35; }

  .games{ grid-template-columns:1fr; }
  .contact{ flex-direction:column; align-items:flex-start; }
  .contact__cta{ width:100%; }
  .contact__cta .btn--primary{ flex:1 1 100%; }

  .trailer{ flex-direction:column; text-align:center; }
  .trailer__player{ width:min(230px,72vw); }
  .trailer__info > p:last-of-type{ margin-inline:auto; }
  .trailer__links{ justify-content:center; }

  .game10{ flex-direction:column; text-align:center; }
  .game10__stage{ width:min(200px,55vw); }
  .game10__score{ justify-content:center; }
  .game10__actions{ flex-direction:column; }
  .game10__actions .btn{ width:100%; }
  .game10__time{ text-align:center; }

  .cookie__box{ flex-direction:column; align-items:stretch; text-align:center; }
  .cookie__btns{ flex-direction:column; }
  .cookie__btns .btn{ width:100%; }
  .cookie__txt p{ margin-inline:auto; }

  .buddy{ left:12px; bottom:12px; }
  .buddy__link{ width:52px; }
  .buddy__close{ opacity:1; }

  .support{ flex-direction:column; text-align:center; }
  .support__lead{ margin-inline:auto; }
  .support__list{ justify-items:start; display:inline-grid; text-align:left; }
  .support__cta{ flex-direction:column; width:100%; }
  .support__cta .btn{ width:100%; }

  .mascot{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .mascot__intro{ flex-direction:column; }
  .mascot__clip{ width:min(300px,80vw); }
  .mascot__txt > p:last-of-type{ margin-inline:auto; }
  .mascot__links{ justify-content:center; }
  .socials{ justify-content:flex-start; }

  .foot__inner{ grid-template-columns:1fr; gap:26px; }
  .foot__bottom{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:400px){
  .game__icon img{ width:62px; }
  .game__top{ gap:12px; }
}