/* ====================================================================
   A KEZDOLAP (BEMUTATO-OLDAL) SAJAT STILUSA   (MUNKALISTA B7, A) opcio)
   Keszult: 2026-09-30.

   CSAK az index.html tolti be - a kozos stilus.css-t (a jogi lapok, a
   meghivo-lap) ez a fajl NEM erinti. A szinek, sarkok es betumeretek a
   stilus.css :root valtozoibol jonnek (a jatek temaja).

   A NYITOKEP ANIMACIOJA: a hat betu a jatek betukorenek elrendezeseben
   all (fent, jobbra fent, jobbra lent, lent, balra lent, balra fent).
   A betuk a SZO SORRENDJEBEN kigyulladnak (.s1 ... .s6 - kesleltetes),
   majd alattuk osszeall a szo. A HELY (.p1 ... .p6) es a SORREND kulon
   osztaly, igy a szo betui a korben osszekeverve allhatnak.
   `prefers-reduced-motion` eseten ALLO KEP: minden betu eg, a szo
   latszik. Inline stilus nincs (CSP: style-src 'self').
   ==================================================================== */

/* ---------------- nyitokep ---------------- */

.nyito { text-align: center; padding: 4px 0 8px; }
.nyito h1 { margin-bottom: 10px; }
.nyito p.felutes { text-align: center; margin-bottom: 22px; }

.betukor {
  position: relative; width: 220px; height: 220px;
  margin: 6px auto 10px;
}
.betukor .betu {
  position: absolute; width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--kocka); color: var(--tinta);
  font-size: var(--cim); font-weight: var(--vastag); line-height: 1;
  animation: gyul 8s ease-in-out infinite both;
}
/* a hat hely: kozeppont (110,110), sugar 78 px, 60 fokonkent */
.betukor .p1 { left: 78px;    top: 0; }
.betukor .p2 { left: 145.5px; top: 39px; }
.betukor .p3 { left: 145.5px; top: 117px; }
.betukor .p4 { left: 78px;    top: 156px; }
.betukor .p5 { left: 10.5px;  top: 117px; }
.betukor .p6 { left: 10.5px;  top: 39px; }
/* a szo sorrendje */
.betukor .s1 { animation-delay: 0s; }
.betukor .s2 { animation-delay: .35s; }
.betukor .s3 { animation-delay: .7s; }
.betukor .s4 { animation-delay: 1.05s; }
.betukor .s5 { animation-delay: 1.4s; }
.betukor .s6 { animation-delay: 1.75s; }

@keyframes gyul {
  0%, 8%    { background: var(--kocka); color: var(--tinta); box-shadow: none; }
  13%, 58%  { background: var(--akcent); color: var(--akcent-tinta);
              box-shadow: 0 0 22px rgba(255, 194, 75, .45); }
  68%, 100% { background: var(--kocka); color: var(--tinta); box-shadow: none; }
}

.kirakott {
  text-align: center; margin: 0 0 16px;
  font-size: var(--kiemelt); font-weight: var(--vastag);
  animation: kirak 8s ease-in-out infinite both;
}
.kirakott .szo { color: var(--akcent); letter-spacing: .18em; }
.kirakott .ertek {
  color: var(--jo); font-size: var(--kicsi); font-weight: 700;
  margin-left: 6px; letter-spacing: .02em; white-space: nowrap;
}

@keyframes kirak {
  0%, 36%   { opacity: 0; transform: translateY(6px); }
  42%, 62%  { opacity: 1; transform: none; }
  70%, 100% { opacity: 0; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .betukor .betu {
    animation: none; background: var(--akcent); color: var(--akcent-tinta);
  }
  .kirakott { animation: none; opacity: 1; transform: none; }
}

/* ---------------- bolti gombok ---------------- */

.boltgombok { justify-content: center; }
/* A `hidden` attributum (az App Store gomb az iOS elfogadasaig): a
   .gomb `display: inline-block` szabalya kulonben felulirna. */
.boltgombok [hidden] { display: none; }
.boltgombok.zaro { margin-top: 26px; }

/* ---------------- harom erosseg ---------------- */

.erossegek {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 34px 0 8px;
}
.erosseg {
  background: var(--felulet); border: 1px solid var(--vonal);
  border-radius: var(--sarok); padding: 16px 16px 14px;
}
.erosseg h3 { margin: 0 0 6px; color: var(--akcent); line-height: 1.3; }
/* keskeny kartya: itt a sorkizaras csak lyukakat huzna */
.erosseg p { margin: 0; text-align: left; hyphens: manual; color: var(--tinta); }
@media (max-width: 640px) {
  .erossegek { grid-template-columns: 1fr; }
}

/* ---------------- hogyan mukodik ---------------- */

ol.lepesek { list-style: none; padding: 0; margin: 0 0 14px; counter-reset: lepes; }
ol.lepesek li {
  counter-increment: lepes; position: relative;
  padding-left: 52px; min-height: 38px; margin-bottom: 14px;
}
ol.lepesek li::before {
  content: counter(lepes);
  position: absolute; left: 0; top: 0; width: 38px; height: 38px;
  border-radius: 50%; background: var(--akcent); color: var(--akcent-tinta);
  font-weight: var(--vastag); display: flex; align-items: center; justify-content: center;
}

/* ---------------- kepernyokepek (sajat, vizszintesen gorgo tarolo) -- */

/* A LAP maga nem gorgethet vizszintesen: csak ez a tarolo, a
   szulo szelessegen BELUL. */
.kepsor {
  display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 4px 2px 14px; margin: 0 0 8px;
  scrollbar-color: var(--vonal) transparent;
}
.kepsor:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.kepsor figure {
  flex: 0 0 auto; width: 220px; margin: 0; scroll-snap-align: start;
}
.kepsor img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--vonal); border-radius: var(--sarok);
  background: var(--felulet);
}
.kepsor figcaption {
  margin-top: 8px; text-align: center;
  color: var(--halvany); font-size: var(--kicsi); line-height: 1.35;
}