/* ==========================================================================
   SPRINT Gaming – hlavný štýlový súbor
   --------------------------------------------------------------------------
   Obsah:
     1. Premenné a základné nastavenia (reset, body)
     2. Hlavička (logo, navigácia, jazyk)
     3. Hero banner (slider)
     4. Všeobecné sekcie
     5. Sekcia „O nás"
     6. Sekcia „Naše hry" (mriežka hier)
     7. Sekcia „Exkluzívna hra"
     8. Sekcia „Partneri"
     9. Sekcia „Kontakt"
    10. Úpravy veľkosti písma pre konkrétne sekcie
    11. Responzívne pravidlá (media / container queries)
   ========================================================================== */


/* ==========================================================================
   1. PREMENNÉ A ZÁKLAD
   ========================================================================== */

:root {
  /* Farby */
  --bg: #fff;
  --text: #000;
  --red: #d6201f;
  --wine: #7a0f3f;
  --card: #fff;

  /* Škálovacie koeficienty (jedným číslom sa zväčší/zmenší celá sekcia) */
  --fz-scale: 1.25;          /* globálna veľkosť písma */
  --deco-scale: 1.65;        /* dekoratívne obrázky (QK, kačka, Halloween) */
  --hero-scale: 2;           /* rozmery hero banneru */
  --hero-font-scale: 1.5;    /* písmo v hero banneri */
  --about-scale: 2.475;      /* odsadenie sekcie „O nás" */
  --about-font-scale: 1.2;   /* písmo v sekcii „O nás" */
  --excl-scale: 2.0592;      /* odsadenie sekcie „Exkluzívna hra" */
  --excl-font-scale: 1.2;    /* písmo v sekcii „Exkluzívna hra" */
  --page-font-scale: 1.2;    /* písmo v sekciách Hry / Partneri / Kontakt */
  --games-scale: 1.8;        /* veľkosť mriežky hier */

  /* Rešpektovanie "výrezov" na mobiloch (iPhone notch a pod.) */
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

*{
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;  /* kompenzácia sticky hlavičky pri skoku na kotvu */
}

body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: calc(16px * var(--fz-scale));
}

/* Hlavný obal stránky */
.page {
  width: 100%;
  max-width: none;
  margin: 0;
}


/* ==========================================================================
   2. HLAVIČKA
   ========================================================================== */

header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 5%;
  background: #fff;
  color: #000;
  border-bottom: 1px solid #8883;
}

/* --- Logo (obrázok) --- */
.logo {
  display: block;
  line-height: 0;
}

.logo img {
  display: block;
  height: calc(40px * var(--fz-scale));
  width: auto;
}

/* V tmavom režime dostane logo biele pozadie, aby bolo čitateľné */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo img {
    background: #fff;
    border-radius: 8px;
    padding: 3px 8px;
  }
}

:root[data-theme="dark"] .logo img {
  background: #fff;
  border-radius: 8px;
  padding: 3px 8px;
}

/* --- Textové logo „SPRINT gaming" --- */
.logoH2 {
  font-family: "Barlow", "Open Sans", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: calc(33px * var(--fz-scale));
  letter-spacing: 0;
  margin: 0;
  padding: 0;
}

.logoH22 {
  font-weight: 700;
  font-size: calc(22px * var(--fz-scale));
}

/* --- Navigácia --- */
nav {
  display: flex;
  gap: 22px;
  font-size: calc(17px * var(--fz-scale));
  font-weight: 600;
  flex-wrap: wrap;
}

nav a,
.lang a {
  color: #000;
  text-decoration: none;
  font-size: calc(17px * var(--fz-scale));
}

nav a:hover {
  color: #000;
}

/* --- Prepínač jazyka (ENG | SK) --- */
.lang {
  font-size: calc(14px * var(--fz-scale));
}

.lang a.on {
  font-weight: 700;
  color: var(--red);
}

/* Burger – na PC je v HTML atribút hidden; rozmery len v @media mobile */
.nav-toggle {
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle[hidden] {
  display: none !important;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #000;
  border-radius: 1px;
  transition: transform .2s, opacity .2s;
}

header.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

header.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

header.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 641px) {
  header .nav-toggle {
    display: none !important;
  }
}


/* ==========================================================================
   3. HERO BANNER (slider)
   ========================================================================== */

.hero {
  container-type: inline-size;   /* umožňuje @container query nižšie */
  position: relative;
  color: #000;
  background: #000;
  overflow: hidden;
}

/* --- Jednotlivé slajdy --- */
.slide {
  display: none;
  padding: 0;
  margin: 0;
  line-height: 0;
}

.slide.on {
  display: block;
  animation: fd .6s;
}

@keyframes fd {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Šípky doľava / doprava --- */
.ar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #0004;
  color: #fff;
  border: 0;
  width: calc(36px * var(--hero-scale));
  height: calc(36px * var(--hero-scale));
  border-radius: 50%;
  font-size: calc(22px * var(--fz-scale));
  cursor: pointer;
  z-index: 2;
}

.ar:hover   { background: #0008; }
.ar.l       { left: 10px; }
.ar.r       { right: 10px; }

/* --- Bodky (indikátor aktuálneho slajdu) --- */
.dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.dots i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff6;
  cursor: pointer;
}

.dots i.on {
  background: #fffa;
}

/* --- WEBP banér na celú šírku stránky --- */
.reel-img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

/* --- Dekoratívny „výherný automat" (3 stĺpce) --- */
.reel {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 6px;
  padding: 12px;
  background: #120505;
  border: 4px solid #c0121c;
  border-radius: 12px;
  font-size: calc(44px * var(--fz-scale));
  text-align: center;
}

.reel div {
  background: #1c0a0a;
  border-radius: 8px;
  padding: 6px 0;
}

/* --- Texty v banneri --- */
.hero h1 {
  margin: 0;
  font-size: clamp(
    calc(40px * var(--fz-scale) * var(--hero-font-scale)),
    calc(7vw * var(--fz-scale) * var(--hero-font-scale)),
    calc(76px * var(--fz-scale) * var(--hero-font-scale))
  );
  font-family: Georgia, serif;
  font-style: italic;
  color: #ffd24a;
  text-shadow: 0 4px 12px #0008;
  line-height: 1;
}

.hero p {
  margin: calc(14px * var(--hero-scale)) 0 0;
  font-size: clamp(
    calc(18px * var(--fz-scale) * var(--hero-font-scale)),
    calc(2.4vw * var(--fz-scale) * var(--hero-font-scale)),
    calc(26px * var(--fz-scale) * var(--hero-font-scale))
  );
  color: #ff9a3c;
  font-weight: 600;
}


/* ==========================================================================
   4. VŠEOBECNÉ SEKCIE
   ========================================================================== */

section {
  padding: 48px 5%;
  text-align: center;
}

h2 {
  margin: 0 0 18px;
  font-weight: 500;
  font-size: calc(26px * var(--fz-scale));
}

/* Spoločný riadkový štýl odsekov v „O nás" a „Exkluzívna hra" */
.about p,
.excl p {
  font-weight: 600;
  line-height: 1.6;
}


/* ==========================================================================
   5. SEKCIA „O NÁS"
   ========================================================================== */

.about {
  background: url("../img/Pozadie_Sprint.png") center/cover no-repeat;
  position: relative;
  z-index: 2;
  padding: calc(48px * var(--about-scale)) 5%;
  box-sizing: border-box;
}

/* Dekoratívny obrázok (kačka/QK) v rohu sekcie */
.qk {
  position: absolute;
  right: 1%;
  bottom: 0;
  width: clamp(
    calc(90px * var(--deco-scale)),
    calc(21% * var(--deco-scale)),
    calc(230px * var(--deco-scale))
  );
  height: auto;
  transform: translateY(34%);
  pointer-events: none;
}

/* Variant umiestnený vľavo */
.qk-l {
  left: 1%;
  right: auto;
}

.about .logoH2,
.about p {
  max-width: 69.84%;
  margin-left: auto;
  margin-right: auto;
}

.about .logoH2 {
  font-size: calc(33px * var(--fz-scale) * var(--about-font-scale));
}

.about .logoH22 {
  font-size: calc(22px * var(--fz-scale) * var(--about-font-scale));
}

.about p {
  font-size: calc(17px * var(--fz-scale) * var(--about-font-scale));
  margin-top: 0;
  margin-bottom: 0;
}


/* ==========================================================================
   6. SEKCIA „NAŠE HRY" (mriežka hier)
   ========================================================================== */

.games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 22px 16px;
  max-width: 900px;
  margin: 0 auto;
}

/* --- Jedna hra (karta) --- */
.game {
  font-size: calc(15px * var(--fz-scale));
  font-weight: 600;
  color: #000;
}

.game a.t {
  color: inherit;
  text-decoration: none;
}

/* Náhľadový obrázok hry */
.game .t {
  position: relative;
  aspect-ratio: 252 / 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 4px 0 8px;
  overflow: hidden;
  background: #222;
  border-radius: 6px;
  color: #fff;
  font-weight: 800;
  font-size: calc(15px * var(--fz-scale));
  line-height: 1.1;
  text-shadow: 0 2px 4px #000a;
  transition: transform .2s;
}

.game .t img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Animovaný náhľad (GIF/WebP) prekrývajúci statický obrázok */
.game .t img.anim {
  position: absolute;
  inset: 0;
  display: none;
  object-fit: contain;
  background: #fff;
}

.game .t img.anim.on {
  display: block;
}

/* Jemné nadvihnutie obrázka pri prejdení myšou */
.game:hover .t {
  transform: translateY(-4px);
}

/* Názov hry */
.gn {
  display: block;
}

/* Štítok „Novinka" (rezervuje miesto aj keď je prázdny) */
.new {
  display: block;
  height: calc(16px * var(--fz-scale));
  color: var(--red);
  font-size: calc(12px * var(--fz-scale));
}

/* Tlačidlo „Demo" */
.demo {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 14px;
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: 14px;
  font-size: calc(12px * var(--fz-scale));
  text-decoration: none;
}

.demo:hover {
  background: var(--red);
  color: #fff;
}


/* ==========================================================================
   7. SEKCIA „EXKLUZÍVNA HRA"
   ========================================================================== */

.excl {
  background: url("../img/Pozadie_Exkluzivne.png") center/cover no-repeat;
  position: relative;
  color: #000;
  padding: calc(48px * var(--excl-scale)) 5%;
  box-sizing: border-box;
}

.excl h2,
.excl p {
  max-width: 69.84%;
  margin-left: auto;
  margin-right: auto;
}

.excl p {
  font-size: calc(17px * var(--fz-scale) * var(--excl-font-scale));
}

.excl h2 {
  font-size: calc(26px * var(--fz-scale) * var(--excl-font-scale));
}


/* ==========================================================================
   8. SEKCIA „PARTNERI"
   ========================================================================== */

.partners {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 48px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 14px 32px;
  background: #fff;
  border-radius: 10px;
}

.partners img {
  display: block;
  height: 64px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.partners b {
  font-size: calc(24px * var(--fz-scale));
  opacity: .7;
}


/* ==========================================================================
   9. SEKCIA „KONTAKT"
   ========================================================================== */

.contact {
  background: url("../img/Pozadie_kontakt.png") center/cover no-repeat;
  color: #fff;
  text-align: left;
  position: relative;
}

/* Dekoratívny obrázok v pravom dolnom rohu */
.contact-hw {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(
    calc(90px * var(--deco-scale)),
    calc(26% * var(--deco-scale)),
    calc(220px * var(--deco-scale))
  );
  height: auto;
  pointer-events: none;
}

.contact .in {
  position: relative;
  z-index: 1;
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.contact h2 {
  text-align: center;
  width: 100%;
  color: #fff;
  font-size: calc(26px * var(--fz-scale) * var(--page-font-scale));
}

.contact p {
  line-height: 1.6;
  font-size: calc(16px * var(--fz-scale) * var(--page-font-scale));
  margin: 0 0 16px;
  color: #fff;
}

.contact a {
  color: #fff;
  font-size: inherit;
}

/* Copyright – úplne dole, na stred, polovičné písmo oproti textu v kontakte (16px -> 8px) */
.contact .copyright {
  position: relative;
  z-index: 1;
  margin: 28px 0 -24px;
  text-align: center;
  font-size: calc(8px * var(--fz-scale) * var(--page-font-scale));
  line-height: 1.4;
  color: #fff;
  opacity: .9;
}


/* ==========================================================================
   10. ÚPRAVY VEĽKOSTI PÍSMA PRE KONKRÉTNE SEKCIE
   (Hry a Partneri používajú spoločný koeficient --page-font-scale)
   ========================================================================== */

/* --- Hry --- */
#hry .games {
  grid-template-columns: repeat(auto-fill, minmax(calc(130px * var(--games-scale)), 1fr));
  max-width: calc(900px * var(--games-scale));
  gap: calc(22px * var(--games-scale)) calc(16px * var(--games-scale));
}

#hry h2 {
  font-size: calc(26px * var(--fz-scale) * var(--page-font-scale));
}

#hry .game {
  font-size: calc(15px * var(--fz-scale) * var(--page-font-scale));
}

#hry .demo {
  font-size: calc(12px * var(--fz-scale) * var(--page-font-scale));
}

#hry .new {
  font-size: calc(12px * var(--fz-scale) * var(--page-font-scale));
  height: calc(16px * var(--fz-scale) * var(--page-font-scale));
}

/* --- Partneri (sekcia, ktorá obsahuje #partners) --- */
section:has(#partners) h2 {
  font-size: calc(26px * var(--fz-scale) * var(--page-font-scale));
}

section:has(#partners) .partners b {
  font-size: calc(24px * var(--fz-scale) * var(--page-font-scale));
}


/* ==========================================================================
   11. RESPONZÍVNE PRAVIDLÁ
   ========================================================================== */

/* Mobily a malé tablety */
@media (max-width: 640px) {
  :root {
    --fz-scale: 1;              /* 1.25 × 80 % */
    --hero-font-scale: 1.2;     /* 1.5 × 80 % */
    --about-font-scale: 0.96;   /* 1.2 × 80 % */
    --excl-font-scale: 0.96;
    --page-font-scale: 0.96;
  }

  header {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  /* Jazyk + burger spolu vpravo (nav je skrytá) */
  header .lang {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 2px;
    line-height: 1.15;
  }

  header .lang-sep {
    display: none;
  }

  header .nav-toggle {
    margin-left: auto;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px 5%;
    background: #fff;
    border-bottom: 1px solid #8883;
    box-shadow: 0 6px 16px #0002;
    z-index: 20;
  }

  header.nav-open nav {
    display: flex;
  }

  header nav a {
    padding: 12px 0;
    border-bottom: 1px solid #8882;
    text-align: left;
  }

  header nav a:last-child {
    border-bottom: 0;
  }

  .reel {
    grid-template-columns: repeat(3, 64px);
    font-size: calc(34px * var(--fz-scale));
  }

  /* Banér: orezať 15 % zľava a sprava → viditeľný stred (70 %), na celú šírku */
  .slide {
    overflow: hidden;
  }

  .hero .reel-img {
    width: calc(100% / 0.7);
    margin-left: calc(-100% * 0.15 / 0.7);
    max-width: none;
  }

  .hero .dots {
    gap: 6px;
    bottom: 4px;
  }

  .hero .dots i {
    width: 6px;
    height: 6px;
  }

  #hry .games {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    gap: 10px 8px;
  }

  #hry .game .t {
    margin: 2px 0 4px;
  }

  #hry .demo {
    padding: 2px 8px;
    margin-top: 4px;
  }
}

/* Hero banér: šírka vždy 100 % kontajnera (žiadne extra pravidlá pre úzke obrazovky) */
@container (max-width: 700px) {
  .ar.l { left: 6px; }
  .ar.r { right: 6px; }
}