/* ===================================================================
   diom.games - arkusz glowny
   Odtworzenie wygladu strony z WordPressa/Elementora, bez WordPressa.
   Wartosci liczbowe pochodza z pomiarow oryginalu przy szerokosci
   okna 1249 px - komentarze "orig:" podaja zmierzona pozycje.
   =================================================================== */

:root{
  --blue:      #1d96dc;   /* tlo strony, ikony spolecznosciowe, linki w stopce */
  --navy:      #000f1c;   /* pasek pod naglowkiem, tekst hasla */
  --white:     #fff;
  --container: 1140px;    /* szerokosc tresci, tak jak w Elementorze */
  --font:      "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-disp: "Salsa", "Roboto", cursive;
}

*,*::before,*::after{box-sizing:border-box}

html{background:var(--blue)}

body{
  margin:0;
  font-family:var(--font);
  color:var(--navy);
  background-color:var(--blue);
  background-image:url("../img/bg-sky.webp");
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-size:100% auto;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none;margin:0;padding:0}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:10px;
}

/* ------------------------------ NAGLOWEK --------------------------- */

.site-header{
  background:var(--white);
  position:relative;
  z-index:5;
}
.site-header__inner{
  /* orig przy oknie 1249: tresc od x=102 do x=1185.
     Elementor stawia ja niesymetrycznie (102 z lewej, 64 z prawej),
     wiec kontener 1121 + wciecie 38 z lewej odtwarza to dokladnie. */
  max-width:1121px;
  margin-inline:auto;
  padding:10px 0 10px 38px;
  min-height:103px;          /* orig: wysokosc paska 103 */
  display:flex;
  align-items:center;
}
.site-header__logo{
  width:285px;               /* orig: pudelko logo 285, obrazek z wcieciem 10 */
  padding:10px;
  flex:none;
}
.site-header__logo img{
  width:265px;               /* orig: 265x63 */
  height:auto;
}

.site-nav{
  width:380px;               /* orig: pudelko nawigacji 435..815 */
  margin-left:48px;
  flex:none;
}
.site-nav ul{display:flex;justify-content:space-around}
.site-nav a{
  display:inline-block;      /* transform nie dziala na elementach inline */
  font-size:15px;            /* orig: 15px / 900 / #000 */
  font-weight:900;
  line-height:15px;
  color:#000;
  transition:transform .3s;  /* orig: elementor-animation-grow */
}
.site-nav a:hover{transform:scale(1.1)}

.social{
  width:360px;               /* orig: pudelko 825..1185, ikony do prawej */
  margin-left:10px;
  display:flex;
  justify-content:flex-end;
  gap:10px;                  /* orig: ikony co 46 px przy srednicy 36 */
}
.social a{
  width:36px;height:36px;    /* orig: 36x36, promien 25px czyli kolo */
  border-radius:50%;
  background:var(--blue);
  display:grid;place-items:center;
  transition:transform .3s;  /* orig: elementor-animation-grow */
}
.social a:hover{transform:scale(1.1)}   /* orig: elementor-animation-grow */
.social svg{width:18px;height:18px;fill:var(--white)}


/* ------------------------- HASLO + FALA ---------------------------- */

.tagline{
  position:relative;
  height:120px;              /* orig: pasek 103..223 */
  background:var(--navy);
}
.tagline__text{
  position:relative;
  z-index:2;
  margin:0;
  padding-top:10px;          /* orig: pierwszy wiersz na y=113 */
  font-size:22px;            /* orig: 22px / 900 / #000f1c */
  font-weight:900;
  text-align:center;
  color:var(--navy);
}
.tagline__text span{
  display:block;
  line-height:16px;          /* orig: wiersz 16 px... */
}
.tagline__text span+span{margin-top:15px}   /* ...a odstep miedzy nimi 31 px */

/* fala - jeden ksztalt uzyty na gorze i na dole strony */
.wave{
  position:absolute;
  left:0;right:0;
  line-height:0;
  pointer-events:none;
  z-index:1;
}
.wave svg{
  display:block;
  /* orig: svg jest o 1.3 px szerszy niz kontener i wysrodkowany - Elementor
     robi tak, zeby przy ulamkowych szerokosciach nie bylo szczeliny na brzegu */
  position:relative;
  left:50%;
  width:calc(100% + 1.3px);
  transform:translateX(-50%);
  fill:var(--white);
}
.wave--top{
  top:-1px;
  height:114px;              /* orig: 114 */
}
/* orig: gorna fala jest odbita w poziomie (rotateY 180) - dolna nie */
.wave--top svg{height:114px;transform:translateX(-50%) rotateY(180deg)}

.wave--bottom{
  position:relative;
  height:120px;              /* orig: 1815..1935 */
  margin-top:2px;
  z-index:1;
}
.wave--bottom svg{height:120px;transform:translateX(-50%) rotate(180deg)}

/* -------------------------------- HERO ----------------------------- */

.hero{
  position:relative;
  min-height:892px;          /* orig: 223..1115 */
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("../img/hero-whisperborn.webp") no-repeat 50% 50%;
  background-size:100% auto;
  z-index:0;
}
.hero__inner{
  position:relative;
  z-index:1;
  /* orig: kolumna z trescia zaczyna sie na x=27 przy oknie 1249,
     czyli szerzej niz zwykly kontener 1140 - stad 1195 */
  max-width:1195px;
  margin-inline:auto;
  padding-top:159px;         /* orig: gorna krawedz tytulu na y=382 */
}
.hero__col{
  width:636px;               /* orig: kolumna 636 dosunieta do lewej */
  max-width:100%;
}
.hero__title{
  width:616px;               /* orig: 616x321, wysrodkowany w kolumnie */
  max-width:100%;
  margin:0 auto;
}
.hero__buttons{
  margin:10px 0 0;           /* orig: 703 -> 713 */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;                  /* orig: 796 -> 816 */
}
.hero__buttons img{
  width:341px;               /* orig: 341x83 */
  opacity:.85;               /* orig: przygaszone, rozjasnia sie po najechaniu */
  filter:brightness(100%) contrast(100%) saturate(145%);
  transition:transform .6s,opacity .6s,filter .6s;
}
.hero__buttons a:hover img{
  transform:scale(1.1);      /* orig: elementor-animation-grow */
  opacity:1;
  filter:brightness(115%) contrast(113%) saturate(151%);
}

/* ------------------------------- MEDIA ----------------------------- */

.media{
  position:relative;
  min-height:698px;          /* orig: 1115..1813 */
}
.media::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("../img/leaves.webp") no-repeat 50% 0;
  background-size:contain;
  z-index:0;
}
.media .container{position:relative;z-index:1}

.media__heading{
  margin:0;
  padding-top:172px;         /* orig: naglowek na y=1287 */
  font-family:var(--font-disp);
  font-size:54px;            /* orig: 54px / 600 / bialy */
  font-weight:600;
  line-height:54px;
  text-align:center;
  color:var(--white);
}

.gallery{
  margin:30px auto 0;        /* orig: pierwszy rzad na y=1371 */
  width:1053px;              /* orig: 3x300 + 2x76.5 */
  max-width:100%;
  display:grid;
  grid-template-columns:repeat(3,300px);
  justify-content:space-between;
  gap:9px 76px;              /* orig: odstepy 76 w poziomie, 9 w pionie */
}
.gallery img{
  width:300px;height:172px;  /* orig: 300x172 (WP lekko rozciaga 300x169) */
  object-fit:cover;
  border:3px solid var(--white);   /* orig: 3px biala ramka... */
  border-radius:17px;              /* ...i zaokraglenie 17 px */
  transition:transform .2s;
}
.gallery a:hover img{transform:scale(1.03)}

/* ------------------------------ STOPKA ----------------------------- */

.site-footer{
  background:var(--white);
  text-align:center;
  padding:9px 10px 0;        /* orig: linki na y=1944, czyli 9 px od gory */
}
.site-footer__links{
  display:flex;
  justify-content:center;
  gap:55px;                  /* orig: odstep miedzy pudelkami linkow */
  min-height:59px;           /* orig: znak towarowy 59 px nizej, na y=2003 */
  align-items:flex-start;
}
.site-footer__links a{
  display:inline-block;
  padding:12px 24px;         /* orig: pudelko 162x39, tekst 12 px od gory */
  font-size:15px;            /* orig: 15px / 500 / #1d96dc */
  font-weight:500;
  line-height:15px;
  color:var(--blue);
}
.site-footer__links a:hover{text-decoration:underline}
.site-footer__mark{
  margin:0;
  padding-bottom:24px;       /* orig: strona konczy sie na y=2044 */
  font-size:11px;            /* orig: 11px / 600 / #1d96dc */
  font-weight:600;
  line-height:16.5px;
  color:var(--blue);
}


/* ===================== PASEK TYTULU PODSTRONY ======================= */
/* orig /games/: pasek 103..171 (68 px), przezroczysty, napis na y=131 */

.tagline--page{
  height:50px;               /* orig /terms-of-service/: pasek 103..153 */
  background:transparent;
}
.tagline__page{
  position:relative;z-index:2;
  margin:0;
  padding-top:10px;          /* orig: napis na y=113 */
  font-size:22px;            /* orig: 22px / 900 / niebieski */
  font-weight:900;
  line-height:16px;
  text-align:center;
  color:var(--blue);
}
.tagline--lg{height:68px}    /* orig /games/: pasek 103..171 */
.tagline--lg .tagline__page{
  padding-top:28px;          /* orig: napis na y=131 */
  font-size:60px;            /* orig: 60px / 900 */
}

/* ============================== GRY ================================ */
/* orig: sekcja 272..665, lewa kolumna 570 px, prawa 550 px, odstep 10 */

.game{padding:20px 0}
.game--first{padding-top:121px}   /* orig: odstep 100 px + wciecie sekcji 20 */
.game__grid{
  padding-inline:0;          /* orig: kolumny zaczynaja sie na x=55 */
  display:grid;
  grid-template-columns:570px 550px;
  gap:10px;
  align-items:start;
}
.game__media{padding:0 10px}               /* orig: film/obrazek 10 px od lewej, bez wciecia u gory */
.game__media img{width:100%;height:auto;border-radius:4px}

.video{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.game__info{color:var(--white)}
.game__icon{width:218px;height:218px;margin:36px 0 20px}   /* orig: ikona na y=913 */
.game__title{
  margin:0;
  font-size:40px;            /* orig: 40px / 600 / bialy */
  font-weight:600;
  line-height:40px;
}
.game__status{
  margin:20px 0 0;
  font-size:24px;            /* orig: 24px / 400 */
  font-weight:400;
  line-height:24px;
}
.game__tags{
  margin:20px 0 0;
  font-size:16px;            /* orig: 16px / 400 */
  font-weight:400;
  line-height:16px;
}
.game__desc{
  margin:20px 0 0;
  font-size:16px;            /* orig: 16px / 400 / interlinia 24 */
  font-weight:400;
  line-height:24px;
}
.game__cta{
  margin:34px 0 0;           /* orig: Lonely Looy - przycisk 34 px pod tekstem */
  padding-right:55px;        /* orig: pole przycisku 495 px zamiast 550 */
  text-align:right;
}
.game__cta--far{margin-top:81px}     /* orig: Sudoku - 81 px */

.btn-outline{
  display:inline-flex;       /* orig: ikona po lewej, odstep 5 px */
  align-items:center;
  gap:5px;
  padding:12px 24px;         /* orig: ramka 4 px, promien 8 px */
  border:4px solid var(--white);
  border-radius:8px;
  font-size:20px;            /* orig: 20px / 500 / bialy */
  font-weight:500;
  line-height:23px;          /* orig: pudelko 55 px wysokosci */
  color:var(--white);
  background:transparent;
  transition:transform .3s,background .3s,color .3s;
}
/* orig ma samo powiekszenie (elementor-animation-grow); biale wypelnienie
   to swiadomy dodatek - zostaje razem ze skalowaniem */
.btn-outline:hover{
  transform:scale(1.1);
  background:var(--white);
  color:var(--navy);
}
.btn-outline svg{width:20px;height:20px;fill:currentColor;flex:none}

/* ----------------------- DOFINANSOWANIE UE ------------------------- */
/* orig: sekcja 665..857, tekst na y=675, logotypy 768x103 na y=713 */

.funding{padding:10px 0 41px}      /* orig: sekcja 665..857 */
.funding .container{padding-inline:0}
.funding__text{
  margin:0;
  font-size:16px;
  font-weight:400;
  line-height:24px;
  color:var(--white);
}
.funding__logos{
  width:768px;max-width:calc(100% - 20px);
  height:auto;
  margin:14px auto 0;
}


/* ===================== STRONY TEKSTOWE (proza) ===================== */
/* orig /terms-of-service/: sekcja 154..1706, tekst od y=233,
   granatowy #043a6d na tle nieba, kolumna 1120 px */

.prose-section{padding:69px 0 19px}
.prose{
  padding:10px 0;
  color:#043a6d;             /* orig: rgb(4,58,109) */
}
.prose h1{
  margin:8px 0 16px;         /* orig: pudelko 48 px wysokosci... */
  font-size:32px;            /* ...ale tekst 32 px (Elementor mial to w stylu w atrybucie) */
  font-weight:500;
  line-height:48px;
}
.prose h2{
  margin:8px 0 16px;         /* orig: 32px / 500 / interlinia 38.4 */
  font-size:32px;
  font-weight:500;
  line-height:38.4px;
}
.prose h3{margin:8px 0 16px;font-size:24px;font-weight:500;line-height:28.8px}
.prose p{
  margin:0 0 14.4px;         /* orig: 16px / 400 / interlinia 24 */
  font-size:16px;
  font-weight:400;
  line-height:24px;
}
.prose ul,
.prose ol{margin:0 0 14.4px;padding-left:40px}   /* orig: wciecie listy 40 px */
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{font-size:16px;font-weight:400;line-height:24px}
.prose a{color:#043a6d;text-decoration:underline}
.prose a:hover{color:var(--navy)}
.prose strong,.prose b{font-weight:700}
.prose img{max-width:100%;height:auto;margin:16px 0}

/* /contact/ w oryginale nie ma zadnej tresci - zostaje sam odstep.
   orig: pasek 103..184 (81 px, nie 120 jak na stronie glownej), potem 20 px. */
.page-contact .tagline{height:81px}
.page-empty{height:20px}


/* ============================= EVENTS ============================== */
/* orig: sekcja 221..570, obrazek 65,241 550x309 (promien 20), tekst 635 */

.event{padding:20px 0}
.event--first{padding-top:88px}    /* orig: sekcja 221..570, tresc od y=241 */
.event--second{padding-top:87px}   /* orig: sekcja 946..1303, tresc od y=966 */
.event__grid{
  padding-inline:0;
  display:grid;
  grid-template-columns:570px 550px;
  gap:10px;
  align-items:start;
}
.event__media{padding:0 10px}
.event__media img{width:100%;height:auto;border-radius:20px}   /* orig: promien 20 */

.event__info{color:var(--white)}
.event__title{
  margin:0;
  font-size:40px;            /* orig: 40px / 600 / bialy */
  font-weight:600;
  line-height:40px;
}
.event__desc{
  margin:20px 0 0;
  font-size:16px;            /* orig: 16px / 400 / interlinia 24 */
  font-weight:400;
  line-height:24px;
}
.event__cta{
  margin:34px 0 0;           /* orig: przycisk na y=479 */
  padding-right:55px;
  text-align:right;
}

/* karuzela - orig: 4 zdjecia 380x253, przewijane w petli */
.carousel-section{padding:10px 0}
.carousel-section .container{padding-inline:0}   /* orig: karuzela 55..1195 */
.carousel{position:relative;overflow:hidden;padding-bottom:36px}  /* orig: pudelko 289 przy kadrach 253 */
.carousel__track{
  display:flex;
  gap:0;
  transition:transform .5s ease;
  will-change:transform;
}
.carousel__slide{flex:0 0 380px;padding:0}
.carousel__slide img{width:380px;height:253px;object-fit:cover;display:block}
.carousel__arrow{
  position:absolute;top:126px;transform:translateY(-50%);   /* srodek kadru, nie calego pudelka */
  width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(0,15,28,.55);color:#fff;
  font-size:22px;line-height:1;cursor:pointer;z-index:2;
  transition:background .15s;
}
.carousel__arrow:hover{background:rgba(0,15,28,.85)}
.carousel__arrow--prev{left:8px}
.carousel__arrow--next{right:8px}

.carousel__dots{
  position:absolute;
  left:0;right:0;
  bottom:12px;               /* orig: kropki na y=852, czyli 19 px pod kadrami */
  display:flex;
  justify-content:center;
  gap:12px;                  /* orig: margines 6 px z kazdej strony */
}
.carousel__dot{
  width:6px;height:6px;      /* orig: 6x6, czarne kolo */
  padding:0;border:0;
  border-radius:50%;
  background:#000;
  opacity:.2;                /* orig: nieaktywna 0.2 */
  cursor:pointer;
  transition:opacity .2s;
}
.carousel__dot[aria-current="true"]{opacity:1}   /* orig: aktywna 1 */
.carousel__dot:hover{opacity:.6}

/* galeria ze spotkan - orig: 4 kolumny po 285 px, bez odstepow */
.event-gallery-section{padding:10px 0 9px}
.event-gallery-section .container{padding-inline:0}  /* orig: galeria 55..1195 */
.event-gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;                     /* orig: zdjecia stykaja sie bokami */
}
.event-gallery img{width:100%;height:auto;display:block;transition:opacity .15s}
.event-gallery a:hover img{opacity:.85}

/* ============================ TUTORIAL ============================= */
/* orig: naglowek 32/600 na y=264, obrazek 800x397 na y=316, tekst na y=733 */

.step{padding:0 0 74px}
.step .container{padding-inline:0}   /* orig: kolumna tekstu 1140, nie 1120 */
.step:first-of-type{padding-top:80px}
.step__title{
  margin:0;
  font-size:32px;            /* orig: 32px / 600 / bialy, wysrodkowany */
  font-weight:600;
  line-height:32px;
  text-align:center;
  color:var(--white);
}
.step__img{
  width:800px;               /* orig: 800x397, wysrodkowany */
  max-width:100%;
  margin:20px auto 0;
}
.step__text{
  margin-top:20px;
  color:var(--white);
}
.step__text p{margin:0 0 14.4px;font-size:16px;font-weight:400;line-height:24px}  /* orig: blok 110 px */
.step--closing{padding-bottom:80px}

/* pasek z dwuwierszowym tytulem (orig /tutorial15puzzle/: 103..184) */
.tagline--two{height:81px}
.tagline--two .tagline__page span{display:block;margin-top:15px;line-height:16px}

/* ============================= DAYBREAK ============================ */
/* Oddzielny projekt: ciemne tlo, font Share Tech, bez naglowka strony. */

body.is-bare{
  background:#222;           /* orig: rgb(34,34,34), bez grafiki w tle */
  color:#fff;
}
body.is-bare .site-footer{background:#222;padding-top:10px}
body.is-bare .site-footer__links a{color:#fff}
body.is-bare .site-footer__mark{color:#fff}   /* orig: bialy, nie niebieski */

.db-hero{
  height:1110px;             /* orig: sekcja 0..1110 */
  background:url("../img/daybreak/hero.webp") no-repeat 50% 50%;
  background-size:cover;
}
.db-art{background-repeat:no-repeat;background-position:0 0}
.db-art--miasto{
  height:568px;              /* orig: sekcja 1110..1678 */
  background-image:url("../img/daybreak/miasto.webp");
}
.db-art--kanaly{
  height:620px;              /* orig: sekcja 2008..2628 */
  background-image:url("../img/daybreak/kanaly.webp");
}
.db-art--divider{
  height:70px;               /* orig: sekcja 3091..3161 */
  background-image:url("../img/daybreak/divider.webp");
}

.db-block{padding:10px 0}
.db-block .container{padding-inline:0}   /* orig: kolumna 55..1195 */
.db-title{
  margin:0;
  font-family:"Share Tech","Roboto",sans-serif;
  font-size:78px;            /* orig: 78px / 700 / bialy */
  font-weight:700;
  line-height:78px;
  color:#fff;
}
.db-title--left  {text-align:left}
.db-title--right {text-align:right}
.db-title--center{text-align:center}

.db-text{
  margin:20px 0 0;
  font-family:"Share Tech","Roboto",sans-serif;
  font-size:22px;            /* orig: 22px / 300 / interlinia 33 */
  font-weight:300;
  line-height:33px;
  color:#bebebe;
}

.db-media{padding-top:10px}
.db-gallery{
  margin-top:22px;           /* orig: pierwszy rzad na y=3269 */
  display:grid;
  grid-template-columns:repeat(3,370px);
  justify-content:space-between;
  gap:15px 14px;             /* orig: odstepy 14 w poziomie, 15 w pionie */
}
.db-gallery img{
  width:370px;height:212px;  /* orig: 370x212, promien 15 */
  object-fit:cover;
  border-radius:15px;
  transition:transform .2s;
}
.db-gallery a:hover img{transform:scale(1.02)}

/* ============================ RESPONSYWNOSC =========================
   Dwa uklady zmierzone na oryginale:
   - desktop, okno 1249 px  (reguly wyzej)
   - mobile,  okno  375 px  (blok @media max-width:767px)
   Zakres posredni skaluje uklad desktopowy plynnie - Elementor robi
   tam to samo, tylko wlasnymi klasami.
   =================================================================== */

@media (max-width:1200px){
  .site-header__inner{max-width:100%;padding-left:20px;padding-right:20px}
  .site-nav{width:auto;margin-left:auto;margin-right:auto}
  .site-nav ul{gap:44px}
  .social{width:auto;margin-left:auto}
  .hero__inner{max-width:100%;padding-left:20px;padding-right:20px}
}

@media (max-width:1100px){
  .site-nav ul{gap:28px}
  .gallery{
    width:100%;
    grid-template-columns:repeat(3,1fr);
    gap:9px 24px;
  }
  .gallery img{width:100%;height:auto;aspect-ratio:300/172}
}

@media (max-width:900px){
  .hero__col{width:60%;min-width:320px}
  .hero__buttons img{width:100%;max-width:341px}
}

/* ------------------------- MOBILE (orig: 375 px) -------------------- */

@media (max-width:767px){

  /* naglowek: logo / menu / ikony jedno pod drugim - orig: pasek 211 px */
  .site-header__inner{
    flex-direction:column;
    align-items:stretch;
    max-width:none;
    padding:20px 20px 20px;
    min-height:211px;
  }
  .site-header__logo{width:auto;padding:0;flex:auto}
  .site-header__logo img{width:335px;max-width:100%}   /* orig: 335x80 na y=20 */

  .site-nav{width:auto;margin:10px 0 0}                /* orig: menu na y=110 */
  .site-nav ul{justify-content:space-between}
  .site-nav a{padding:12px 24px;display:block}         /* orig: pudelka 88..95 x 39 */

  .social{
    width:auto;margin:10px 0 0;                        /* orig: ikony na y=159 */
    justify-content:center;gap:10px;
  }
  .social a{width:32px;height:32px}                    /* orig: 32 px, nie 36 */
  .social svg{width:16px;height:16px}

  /* Fala trzyma te same proporcje co na PC: wysokosc ~9.1% szerokosci okna.
     Przy sztywnych 91 px na waskim ekranie rozciagala sie w pionie 3.3x, a
     w poziomie tylko 1.3x - grzbiety robily sie strome i zjadaly tekst hasla.
     (W oryginale jest dokladnie ten sam problem - swiadomie go nie kopiujemy.) */
  .wave--top,.wave--top svg{height:9.1vw;min-height:26px}
  .wave--bottom,.wave--bottom svg{height:9.6vw;min-height:28px}
  .wave--bottom{margin-top:17px}

  /* Haslo lezy na bialym polu zakonczonym fala - granatowy tekst jest wtedy
     czytelny zawsze, niezaleznie od tego, gdzie wypadnie grzbiet. */
  .tagline,
  .page-contact .tagline{height:auto;padding-bottom:9.1vw}
  .tagline:not(.tagline--page) .wave--top{top:auto;bottom:0}
  .tagline__text{
    margin:0;
    padding:10px 0 12px;
    background:var(--white);
    font-size:18px;
  }
  .tagline__text span{line-height:22px}
  .tagline__text span+span{margin-top:0}

  /* hero - orig: sekcja 291 px, grafika w tle skalowana do 600 px */
  .hero{min-height:291px}
  .hero::before{background-size:600px auto}
  .hero__inner{max-width:none;padding:30px 0 0}
  .hero__col{
    width:48%;                                         /* orig: kolumna 180 px */
    min-width:0;               /* kasuje min-width z szerszego breakpointu */
    margin-left:7%;                                    /* orig: x=26 */
  }
  .hero__title{width:100%}                             /* orig: 180x94 */
  .hero__buttons{margin-top:10px;gap:20px}
  .hero__buttons a{width:89%}                          /* orig: 160x39 na x=36 */
  .hero__buttons img{width:100%;max-width:none}

  /* media - orig: sekcja 1253 px, naglowek 32 px na y=643 */
  .media{min-height:1253px}
  .media__heading{padding-top:44px;font-size:32px;line-height:32px}
  .gallery{
    width:auto;
    margin-top:30px;                                   /* orig: pierwsze zdjecie y=705 */
    grid-template-columns:min(300px,100%);
    justify-content:center;
    gap:9px;                                           /* orig: odstep 9 px */
  }
  .gallery img{width:100%;height:auto;aspect-ratio:300/171}


  /* --- gry, wydarzenia: dwie kolumny schodza pod siebie --- */
  .game__grid,.event__grid{grid-template-columns:1fr;gap:20px}
  .game--first{padding-top:40px}
  .event--first,.event--second{padding-top:40px}
  .game__media,.event__media{padding:0}
  .game__icon{width:140px;height:140px;margin-top:0}
  .game__title,.event__title{font-size:30px;line-height:34px}
  .game__cta,.event__cta{padding-right:0;text-align:center;margin-top:24px}
  .game__cta--far{margin-top:24px}
  .btn-outline{font-size:17px;padding:10px 18px}

  /* --- karuzela: dwa kadry zamiast czterech --- */
  .carousel__slide{flex:0 0 50%}
  .carousel__slide img{width:100%;height:auto}
  .carousel{padding-bottom:12px}
  .carousel__arrow{top:50%}

  /* --- galeria ze spotkan: dwie kolumny --- */
  .event-gallery{grid-template-columns:repeat(2,1fr)}

  /* --- tutorial --- */
  .step{padding-bottom:40px}
  .step:first-of-type{padding-top:40px}
  .step__title{font-size:22px;line-height:28px}
  .step__img{margin-top:16px}
  .step__text{margin-top:16px}

  /* --- daybreak --- */
  .db-hero{height:60vh;min-height:320px}
  .db-art--miasto{height:180px;background-size:cover}
  .db-art--kanaly{height:200px;background-size:cover}
  .db-art--divider{height:30px;background-size:cover}
  .db-title{font-size:40px;line-height:44px}
  .db-title--left,.db-title--right,.db-title--center{text-align:center}
  .db-text{font-size:18px;line-height:27px}
  .db-gallery{grid-template-columns:1fr;gap:12px}
  .db-gallery img{width:100%;height:auto;aspect-ratio:370/212}

  /* stopka - orig: linki na y=1982, pudelka 122x54 i 102x54 */
  .site-footer{padding:9px 10px 0}
  .site-footer__links{gap:20px;min-height:75px}
  /* inline-block, bo przy zwyklym <a> pionowy padding nie wchodzi w uklad */
  .site-footer__links a{display:inline-block;padding:19px 4px}  /* orig: 122 i 102 px */
  .site-footer__mark{padding-bottom:23px}                       /* orig: strona konczy sie na 2097 */
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}


/* ------------------------------ LIGHTBOX --------------------------- */
/* Budowany przez assets/js/site.js dopiero po kliknieciu w zdjecie. */

.lightbox{
  position:fixed;inset:0;z-index:100;
  display:none;align-items:center;justify-content:center;
  gap:12px;padding:24px;
  background:rgba(0,15,28,.92);
}
.lightbox.is-open{display:flex}
.lightbox__img{
  max-width:min(1600px,94vw);
  max-height:92vh;
  width:auto;height:auto;
  border-radius:4px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox__close,.lightbox__nav{
  background:none;border:0;color:#fff;cursor:pointer;
  font-size:34px;line-height:1;padding:8px 14px;
  opacity:.65;transition:opacity .15s;
}
.lightbox__close:hover,.lightbox__nav:hover{opacity:1}
.lightbox__close{position:absolute;top:10px;right:16px;font-size:40px}

@media (max-width:560px){
  .lightbox{padding:12px;gap:2px}
  .lightbox__nav{font-size:28px;padding:6px}
}