/* ==========================================================================
   ČAKY SKÁČE - hra na úvod webu HK Dukla Trenčín
   Všetko je zapuzdrené v .dukla-hra, aby sa to dalo vložiť do Drupalu
   bez zásahu do témy. Farby a písma podľa klubového webu.
   ========================================================================== */

/* Klubové písma. V náhľade sa berú z priečinka fonty/, na webe Dukly ich
   téma už načítava sama - tieto pravidlá len ukážu na jej cestu, takže sa
   po vložení do Drupalu nič nesťahuje dvakrát. */
@font-face{
  font-family: 'Saira Extra Condensed';
  src: url('fonty/SairaExtraCondensed-Bold.ttf') format('truetype'),
       url('/themes/web/fonts/Saira_Extra_Condensed/SairaExtraCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face{
  font-family: 'Saira Extra Condensed';
  src: url('fonty/SairaExtraCondensed-ExtraBold.ttf') format('truetype'),
       url('/themes/web/fonts/Saira_Extra_Condensed/SairaExtraCondensed-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}
@font-face{
  font-family: 'Saira Semi Condensed';
  src: url('fonty/SairaSemiCondensed-Regular.ttf') format('truetype'),
       url('/themes/web/fonts/Saira_Semi_Condensed/SairaSemiCondensed-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face{
  font-family: 'Saira Semi Condensed';
  src: url('fonty/SairaSemiCondensed-SemiBold.ttf') format('truetype'),
       url('/themes/web/fonts/Saira_Semi_Condensed/SairaSemiCondensed-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
/* Hra beží vo vlastnom okne (na webe v rámci) - stránka okolo nej nemá čo
   rolovať. Bez tohto sa za plochou hry objaví riadok navyše a v rámci
   naskočí posuvník. */
html, body{
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.dukla-hra{
  --dk-bordo:      #730037;
  --dk-bordo-dark: #5F002E;
  --dk-bordo-deep: #33001A;
  --dk-zlta:       #FCD500;
  --dk-biela:      #FFF4F8;

  /* Hra vyplní celé okno, v ktorom beží (na webe je to rámec) - tvar tak
     určuje rámec a hra sa v ňom roztiahne od kraja po kraj, bez pásov
     a bez zaoblených rohov. */
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: linear-gradient(170deg, var(--dk-bordo) 0%, var(--dk-bordo-dark) 45%, var(--dk-bordo-deep) 100%);
  font-family: 'Saira Semi Condensed', 'Saira Extra Condensed', sans-serif;
  color: var(--dk-biela);
  -webkit-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Počas hry sa plocha nesmie posúvať pod prstom - ťah nahor je skok,
   nie rolovanie stránky. Mimo hry ostáva rolovanie bežné. */
.dukla-hra--hra{
  touch-action: none;
}

.dukla-hra__platno{
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- prekryvné vrstvy (úvod, koniec) ---------- */
.dukla-hra__vrstva{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 40%, rgba(51,0,26,.72), rgba(51,0,26,.93));
  backdrop-filter: blur(2px);
}
.dukla-hra__vrstva--skryta{ display: none; }

.dukla-hra__nazov{
  font-family: 'Saira Extra Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: .86;
  font-size: clamp(44px, 11vw, 104px);
  color: var(--dk-zlta);
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.dukla-hra__nazov span{
  display: block;
  color: var(--dk-biela);
}
.dukla-hra__navod{
  margin: 10px 0 22px;
  font-size: clamp(15px, 2.8vw, 21px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.35;
  color: var(--dk-biela);
}

/* znak Dukly nad názvom hry */
.dukla-hra__znak{
  width: clamp(64px, 15vw, 130px);
  height: auto;
  display: block;
  margin-bottom: 6px;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.5));
}

.dukla-hra__tlacidlo{
  border: none;
  cursor: pointer;
  padding: 14px 46px;
  font-family: 'Saira Extra Condensed', sans-serif;
  font-size: clamp(20px, 3.6vw, 28px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--dk-bordo);
  background: var(--dk-zlta);
  box-shadow: 0 14px 30px -12px rgba(252,213,0,.55);
  transition: background .2s, transform .2s;
}
.dukla-hra__tlacidlo:hover,
.dukla-hra__tlacidlo:focus{
  background: #DDBB00;
  transform: translateY(-2px);
}

.dukla-hra__koniec-nadpis{
  font-family: 'Saira Extra Condensed', sans-serif;
  font-size: clamp(28px, 6vw, 52px);
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(255,244,248,.6);
}
.dukla-hra__skore-velke{
  font-family: 'Saira Extra Condensed', sans-serif;
  font-size: clamp(72px, 18vw, 150px);
  font-weight: 800;
  line-height: .9;
  color: var(--dk-zlta);
}
.dukla-hra__rekord{
  margin: 6px 0 24px;
  font-size: clamp(13px, 2.4vw, 17px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,244,248,.6);
}
.dukla-hra__rekord strong{ color: var(--dk-biela); }

/* ---------- priebežné skóre ---------- */
.dukla-hra__hud{
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 2;
  font-family: 'Saira Extra Condensed', sans-serif;
  font-size: clamp(30px, 6vw, 54px);
  font-weight: 800;
  line-height: 1;
  color: var(--dk-zlta);
  text-shadow: 0 4px 16px rgba(0,0,0,.5);
  pointer-events: none;
}
.dukla-hra__hud--skryty{ display: none !important; }

/* počítadlo pozbieraných erbov vľavo hore - rovnaká veľkosť písma ako má
   počet skokov vpravo, erb je rovnako vysoký ako číslica */
.dukla-hra__erby{
  position: absolute;
  top: 14px;
  left: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Saira Extra Condensed', sans-serif;
  font-size: clamp(30px, 6vw, 54px);
  font-weight: 800;
  line-height: 1;
  color: var(--dk-zlta);
  text-shadow: 0 4px 16px rgba(0,0,0,.5);
  pointer-events: none;
}
.dukla-hra__erby img{
  width: auto;
  height: clamp(32px, 6.4vw, 58px);
  display: block;
}

/* Rozpis bodov na konci hry - dva stĺpce pevnej šírky: názov vľavo,
   hodnota vpravo. Oba riadky majú rovnaké odsadenie zľava, aby texty
   lícovali aj s obrázkom znaku. */
.dukla-hra__sucet{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 18px;
  width: min(330px, 86%);
  margin: 6px auto 14px;
  text-align: left;
  font-size: clamp(12px, 2.3vw, 16px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,244,248,.6);
}
.dukla-hra__sucet > span{
  position: relative;
  padding-left: 30px;   /* miesto pre znak, aby oba riadky začínali rovnako */
  line-height: 1.25;
}
.dukla-hra__sucet strong{
  justify-self: end;
  color: var(--dk-biela);
  font-weight: 600;
  font-size: 1.15em;
}
/* znak Dukly pri riadku a pod ním hodnota bonusu */
.dukla-hra__popis-znak img{
  position: absolute;
  left: 0;
  top: 2px;
  width: auto;
  height: clamp(15px, 2.8vw, 20px);
  display: block;
}
.dukla-hra__popis-znak em{
  display: block;
  margin-top: 1px;
  font-style: normal;
  font-size: .8em;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--dk-zlta);
}

/* zatrasenie pri náraze */
.dukla-hra--naraz{ animation: dukla-hra-tras .32s ease; }
@keyframes dukla-hra-tras{
  0%,100%{ transform: translate(0,0); }
  20%{ transform: translate(-6px, 3px); }
  45%{ transform: translate(5px, -3px); }
  70%{ transform: translate(-3px, 2px); }
}