:root{
  --accent:#ff2f7a;
  --bg:#0c0c12;
  --text:#fff;
  --muted:#c9c9d4;

  --tile-min: 416px;
  --tile-gap: 20px;
  --tile-ratio: 2.25;

  /* Home: odstęp kafelków od dołu */
  --tiles-bottom-gap: clamp(64px, 12vh, 140px);
  --tiles-extra-down: 6vh; /* dociśnięcie kafelków w dół (0–8vh wg uznania) */
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:system-ui, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:none;opacity:.98}

/* ====== TŁO WIDEO ====== */
.bg-video{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.bg-video::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.08) 35%, rgba(0,0,0,.22));
}
.bg-video .bg{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  display:block;
}
@media (prefers-reduced-motion: reduce){ .bg-video{ display:none } }

/* ====== WARSTWA TREŚCI ====== */
.page{
  position:relative; z-index:1;
  min-height:100svh;
  display:grid; grid-template-rows:1fr auto auto;
}

/* ====== HERO ====== */
.hero{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(8px,1.6vh,18px);
  padding:0 16px; margin-top:clamp(2vh,6vh,8vh);
  text-align:center; opacity:.9;
}
.logo-img{
  width:clamp(420px,34vw,820px);
  max-width:92vw; height:auto; display:block; margin:0 auto;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.42));
}
.subtitle-img{
  width:clamp(480px,42vw,900px);
  max-width:92vw; height:auto; display:block; margin:0 auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.36));
}

/* ====== KAFELKI ====== */
.tiles{
  align-self:end;
  max-width:min(1400px,90vw);
  margin:clamp(16px,4vh,40px) auto clamp(20px,6vh,60px);
  padding:0 16px;
  display:grid; gap:var(--tile-gap);
  grid-template-columns:repeat(auto-fit,minmax(var(--tile-min),1fr));
}
@media (max-width:1080px){ :root{ --tile-min:336px } }
@media (max-width:820px){  :root{ --tile-min:256px } }

.img-tile{
  position:relative; aspect-ratio:var(--tile-ratio); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10); border-radius:18px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; outline:none;
}
.tile-img{
  width:100%; height:100%; object-fit:cover;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.45));
  transform:scale(1.02); will-change:transform;
}
.img-tile:hover{
  transform:translateY(-8px) scale(1.015);
  border-color:rgba(255,255,255,.24);
  box-shadow:0 20px 44px rgba(0,0,0,.38);
}
.img-tile:hover .tile-img{ transform:scale(1.05) }
.img-tile:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; box-shadow:0 0 0 4px rgba(0,0,0,.2) }

/* ====== STOPKA ====== */
.foot{ opacity:.8; text-align:center; padding:24px 0 40px; font-size:14px; color:var(--muted) }

/* ====== NARZĘDZIA ====== */
.visually-hidden{
  position:absolute !important; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; overflow:hidden; white-space:nowrap;
}

/* ==== HOME: 1 ekran, kafelki przy dole ==== */
.home{ overflow:hidden }
.home .page{
  min-height:100svh;
  display:grid; grid-template-rows:1fr;
}

/* rząd kafelków trzymamy przy dole z regulowanym gapem */
.home .tiles{
  align-self:end;
  margin:0 auto max(48px, calc(var(--tiles-bottom-gap) - var(--tiles-extra-down)));
  padding-bottom:0;
}

/* stopka jako overlay */
.home .foot{
  position:fixed; left:0; right:0; bottom:8px;
  padding:8px 0 12px; z-index:2; background:transparent;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* niskie ekrany */
@media (max-height:800px){
  :root{ --tiles-bottom-gap: clamp(56px, 10vh, 100px) }
}
@media (max-height:650px){
  :root{ --tiles-bottom-gap: clamp(48px, 8vh, 84px); --tiles-extra-down:4vh }
}

/* warstwy: wszystko ponad tłem */
body{ position:relative }
.bg-video{ z-index:0 }
body > :not(.bg-video){ position:relative; z-index:1 }
.img-tile{ will-change:transform; transform:translateZ(0) }

/* === Social ikony – PRAWY GÓRNY róg === */
.socials{
  position:fixed; z-index:3;
  top:clamp(10px, 2vh, 20px);
  right:clamp(10px, 2vw, 22px);
  left:auto; bottom:auto;
  display:flex; gap:10px;
}
.socials .s{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:999px;
  background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.socials img{
  width:24px; height:24px; display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.socials .s:hover{
  transform:translateY(-2px) scale(1.05);
  background:rgba(0,0,0,.55);
  border-color:rgba(255,255,255,.26);
}
.socials .s-discord:hover{ box-shadow:0 8px 22px rgba(88,101,242,.55) }
.socials .s-twitch:hover { box-shadow:0 8px 22px rgba(145,70,255,.55) }
.socials .s-kick:hover   { box-shadow:0 8px 22px rgba(83,252,24,.45) }
.socials .s-youtube:hover{ box-shadow:0 8px 22px rgba(255,0,51,.45) }

@media (max-width:900px){
  .socials{ top:12px; right:12px; gap:8px }
  .socials .s{ width:40px; height:40px }
  .socials img{ width:22px; height:22px }
}
@media (prefers-reduced-motion: reduce){
  .socials .s{ transition:none }
}
/* --- FORCE: social icons to the TOP-RIGHT --- */
.socials{
  position: fixed;
  top: clamp(10px, 2vh, 20px);
  right: clamp(10px, 2vw, 22px);
  left: auto !important;   /* nadpisuje stare reguły z left: ... */
  bottom: auto;
  display: flex;
  gap: 10px;
}

/* === Social: większe i przesunięte w prawo (LEWY górny róg) === */
.socials{
  position: fixed;
  z-index: 3;
  top: clamp(10px, 2vh, 20px);
  left: 5vw;                 /* ← odsuń od lewej ~5% szerokości ekranu */
  right: auto !important;    /* upewnij się, że nie trzyma się prawej */
  display: flex;
  gap: 12px;
}

.socials .s{
  width: 56px;               /* było 44px */
  height: 56px;
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.socials img{
  width: 30px;               /* było 24px */
  height: 30px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

/* Mobile – trochę mniejsze i odrobinę bliżej krawędzi */
@media (max-width: 900px){
  .socials{ left: 4vw; gap: 10px; }
  .socials .s{ width: 48px; height: 48px; }
  .socials img{ width: 26px; height: 26px; }
}