/* ==========================================================================
   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);
}


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

.hero {
  container-type: inline-size;   /* umožňuje @container query nižšie */
  position: relative;
  color: #000;
  background: radial-gradient(circle at 70% 30%, #e0541b, #a3150f 55%, #5a0a08);
}

/* --- Jednotlivé slajdy --- */
.slide {
  display: none;
  align-items: center;
  justify-content: space-around;
  gap: calc(20px * var(--hero-scale));
  flex-wrap: wrap;
  padding: calc(40px * var(--hero-scale)) 8%;
  height: calc(300px * var(--hero-scale));
}

.slide.on {
  display: flex;
  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;
}

/* --- Obrázok v slajde --- */
.reel-img {
  flex: none;
  height: calc(210px * var(--hero-scale));
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 6px 18px #0006;
}

/* --- 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) {
  nav {
    gap: 12px;
  }

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

/* Úzky hero banner (podľa šírky kontajnera, nie okna) */
@container (max-width: 700px) {
  .slide {
    height: calc(470px * var(--hero-scale));
    padding: calc(30px * var(--hero-scale)) 6%;
  }

  .reel-img {
    height: calc(170px * var(--hero-scale));
  }
}