/* DEVSTRIKE – landing oldal.
   A paletta és a betűk a játékéval azonosak (css/styles.css), hogy az oldal
   és a játék egyetlen dolognak látsszon. */
:root{
  --cyan:#00ffe0; --magenta:#ff2d95; --bg:#05060a; --panel:#0a0f16;
  --red:#ff2233; --green:#22ff66; --amber:#ffcc44;
  --szoveg:#cfe; --halvany:#7d93a8;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--szoveg);
  font-family:'Share Tech Mono',monospace; font-size:16px; line-height:1.65;
  overflow-x:hidden;
}
a{color:inherit}

/* ---- 3D háttér + finom rács ---- */
#mag-vaszon{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
#rács{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(rgba(0,255,224,.04) 1px, transparent 1px) 0 0/100% 3px,
    /* A szöveg BAL hasábja mögé sötétítés: a 3D mag a jobb oldalon van,
       a betűk így mindig olvashatók maradnak fölötte. */
    linear-gradient(100deg, rgba(5,6,10,.94) 0%, rgba(5,6,10,.86) 42%, rgba(5,6,10,.35) 68%, rgba(5,6,10,.15) 100%),
    radial-gradient(ellipse at 50% 0%, transparent 45%, rgba(5,6,10,.6) 100%);
}
@media (max-width:900px){
  /* keskenyen a mag középen van – ott egyenletes sötétítés kell */
  #rács{ background:
    linear-gradient(rgba(0,255,224,.04) 1px, transparent 1px) 0 0/100% 3px,
    rgba(5,6,10,.82); }
}
main, #labjegyzet{ position:relative; z-index:2 }
/* A fejléc a `main` FÖLÖTT: azonos z-index mellett a DOM-ban később jövő
   `main` takarta volna, és a „Játék indítása" gomb kattinthatatlan lett. */
#fejlec{ z-index:10 }

/* ---- Fejléc ---- */
#fejlec{
  position:fixed; top:0; left:0; right:0; height:64px;
  display:flex; align-items:center; gap:26px; padding:0 22px;
  background:linear-gradient(rgba(5,6,10,.92), rgba(5,6,10,.35));
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(0,255,224,.14);
}
#fejlec .marka{
  display:flex; align-items:center; text-decoration:none;
  /* a szóvédjegy PNG-je átlátszó hátterű, cián grafikával – a sötét
     fejlécen ezért nem kell mögé lapot tenni */
  filter:drop-shadow(0 0 12px rgba(0,255,224,.35));
}
#fejlec .marka img{ height:26px; width:auto; display:block }
#fejlec nav{ display:flex; gap:20px; margin-left:auto }
#fejlec nav a{
  color:var(--halvany); text-decoration:none; font-size:12px; letter-spacing:2px;
  padding:4px 0; border-bottom:1px solid transparent; transition:.18s;
}
#fejlec nav a:hover{ color:var(--cyan); border-bottom-color:var(--cyan) }

/* ---- Gombok ---- */
.gomb{
  display:inline-block; text-decoration:none; cursor:pointer;
  font-family:'Share Tech Mono',monospace; font-size:13px; letter-spacing:2px;
  padding:13px 26px; border-radius:3px;
  color:var(--cyan); border:1px solid var(--cyan); background:transparent;
  transition:.18s;
}
.gomb:hover{ background:rgba(0,255,224,.12); box-shadow:0 0 22px rgba(0,255,224,.35) }
.gomb.elsodleges{
  background:var(--cyan); color:#021b18; border-color:var(--cyan); font-weight:bold;
  box-shadow:0 0 26px rgba(0,255,224,.4);
}
.gomb.elsodleges:hover{ background:#5fffe9; box-shadow:0 0 38px rgba(0,255,224,.6) }
.gomb.kicsi{ padding:8px 16px; font-size:11px }
.gomb.nagy{ padding:17px 40px; font-size:15px }

/* ---- Szakasz-alapok ---- */
section{ max-width:var(--max); margin:0 auto; padding:96px 22px; scroll-margin-top:78px }
.felcim{
  font-family:'Orbitron',sans-serif; font-size:11px; letter-spacing:6px;
  color:var(--magenta); margin:0 0 14px;
}
h1{
  font-family:'Orbitron',sans-serif; font-weight:900;
  font-size:clamp(34px, 6vw, 68px); line-height:1.05; letter-spacing:1px;
  margin:0 0 22px; color:#eafffb;
  text-shadow:0 0 40px rgba(0,255,224,.28);
}
h2{
  font-family:'Orbitron',sans-serif; font-weight:700;
  font-size:clamp(24px, 3.4vw, 38px); line-height:1.2; letter-spacing:1px;
  margin:0 0 18px; color:#eafffb;
}
h3{
  font-family:'Orbitron',sans-serif; font-weight:500; font-size:15px;
  letter-spacing:2px; margin:0 0 8px; color:var(--cyan);
}
.szakasz-fej{ max-width:660px; margin-bottom:36px }
.leiras{ color:var(--halvany); font-size:17px; margin:0 }
.megjegyzes{
  margin:46px 0 0; padding:18px 20px; color:var(--halvany); font-size:14px;
  border-left:2px solid var(--amber); background:rgba(255,204,68,.05);
}
.megjegyzes b{ color:var(--amber) }

/* ---- Hero ---- */
#hero{
  min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; padding-top:110px;
}
#hero .tartalom{ max-width:760px }
#hero .bevezeto{ font-size:18px; color:#a9c2d4; margin:0 0 32px; max-width:640px }
#hero .bevezeto b{ color:var(--cyan) }
.gombsor{ display:flex; gap:14px; flex-wrap:wrap }
.jelzok{
  list-style:none; display:flex; gap:26px; flex-wrap:wrap;
  margin:40px 0 0; padding:0; color:var(--halvany); font-size:12px; letter-spacing:2px;
}
.jelzok li::before{ content:'▸ '; color:var(--green) }
.gorgetes-jel{ margin:56px auto 0; width:22px; height:36px; border:1px solid rgba(0,255,224,.4); border-radius:12px; position:relative }
.gorgetes-jel span{
  position:absolute; left:50%; top:8px; width:3px; height:7px; margin-left:-1.5px;
  background:var(--cyan); border-radius:2px; animation:gorget 1.7s infinite;
}
@keyframes gorget{ 0%{opacity:0;transform:translateY(0)} 40%{opacity:1} 100%{opacity:0;transform:translateY(13px)} }

/* ---- Küldetés: a négy egység ---- */
.egysegek{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px }
.egyseg{
  position:relative; padding:26px 22px 24px;
  background:linear-gradient(160deg, rgba(10,20,32,.86), rgba(8,12,20,.7));
  border:1px solid rgba(0,255,224,.16); border-radius:5px;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.egyseg.aktiv{
  border-color:rgba(0,255,224,.55);
  box-shadow:0 0 34px rgba(0,255,224,.16);
  transform:translateY(-4px);
}
.egyseg .sorszam{
  font-family:'Orbitron',sans-serif; font-size:11px; letter-spacing:3px;
  color:var(--magenta); display:block; margin-bottom:12px;
}
.egyseg .tananyag{
  color:var(--amber); font-size:12px; letter-spacing:2px; margin:0 0 12px;
  text-transform:uppercase;
}
.egyseg p:last-child{ color:var(--halvany); font-size:14px; margin:0 }

/* ---- Tanterv-létra ---- */
.letra{ list-style:none; margin:0; padding:0; counter-reset:szint }
.letra li{
  display:grid; grid-template-columns:56px 1fr auto; gap:18px; align-items:center;
  padding:16px 18px; border-left:2px solid rgba(0,255,224,.2);
  margin-left:10px; position:relative;
}
.letra li::before{
  content:''; position:absolute; left:-6px; top:50%; width:10px; height:10px;
  margin-top:-5px; border-radius:50%; background:var(--bg);
  border:2px solid var(--cyan); box-shadow:0 0 10px rgba(0,255,224,.5);
}
.letra .szam{
  font-family:'Orbitron',sans-serif; font-size:12px; color:var(--halvany); letter-spacing:2px;
}
.letra .nev{ font-family:'Orbitron',sans-serif; font-size:15px; letter-spacing:2px; color:#eafffb }
.letra .fogalom{ color:var(--amber); font-size:12px; letter-spacing:2px; text-align:right }
.letra li:nth-child(n+9) .nev{ color:var(--magenta) }

/* ---- Kártyák ---- */
.kartyak{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px }
.kartya{
  padding:22px 20px; border-radius:5px; background:rgba(8,12,20,.72);
  border:1px solid rgba(255,255,255,.07);
  transition:transform .25s, border-color .25s;
}
.kartya:hover{ transform:translateY(-3px) }
.kartya p{ color:var(--halvany); font-size:14px; margin:0 }
.kartya.ellenseg{ border-top:2px solid var(--red) }
.kartya.ellenseg h3{ color:#ff7b88 }
.kartya.ellenseg:hover{ border-color:rgba(255,34,51,.4) }
.kartya.eszkoz{ border-top:2px solid var(--green) }
.kartya.eszkoz h3{ color:var(--green) }
.kartya.eszkoz:hover{ border-color:rgba(34,255,102,.4) }

/* ---- Tanároknak ---- */
.pontok{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px }
.pontok article{ padding:22px 20px; border:1px solid rgba(255,255,255,.07); border-radius:5px }
.pontok p{ color:var(--halvany); font-size:14px; margin:0 }
.kurzus{
  margin-top:26px; padding:26px 24px; border-radius:5px;
  border:1px dashed rgba(255,204,68,.45); background:rgba(255,204,68,.05);
}
.kurzus h3{ color:var(--amber) }
.kurzus p{ color:var(--halvany); font-size:14px; margin:0 }

/* ---- Zárás ---- */
#zaras{ text-align:center; padding:150px 22px 170px }
#zaras p{ color:var(--halvany); max-width:520px; margin:0 auto 34px }

/* ---- Lábjegyzet ---- */
#labjegyzet{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; max-width:var(--max); margin:0 auto;
  padding:26px 22px 40px; border-top:1px solid rgba(255,255,255,.08);
  color:var(--halvany); font-size:12px; letter-spacing:2px;
}
.nyelv{ display:flex; align-items:center; gap:10px }
.fejlec-nyelv{ color:var(--halvany); font-size:11px; letter-spacing:1px; white-space:nowrap }
.fejlec-nyelv select{
  background:var(--panel); color:var(--cyan); border:1px solid rgba(0,255,224,.3);
  border-radius:3px; padding:6px 8px; font-family:inherit; font-size:12px;
}
#nyelv-valaszto{
  background:var(--panel); color:var(--cyan); border:1px solid rgba(0,255,224,.3);
  border-radius:3px; padding:6px 10px; font-family:inherit; font-size:12px;
}

/* ---- Feltűnés görgetésre ----
   FONTOS: amit a GSAP koreografál (egység-kártyák, szembejön-kártyák,
   szakaszfejek, tanterv-létra), az NEM kap `data-reveal`-t. Különben a CSS
   és a GSAP ugyanazt az `opacity`-t animálná egymás ellen, és a GSAP inline
   stílusa nyerne – a kártyák láthatatlanok maradtak.
   Így GSAP nélkül is működik minden: azok az elemek egyszerűen látszanak. */
[data-reveal]{ opacity:0; transform:translateY(26px) }
[data-reveal].lathato{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1) }

/* Aki csökkentett mozgást kért, annak semmi nem ugrál – és a 3D is megáll. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  [data-reveal]{ opacity:1; transform:none }
  .gorgetes-jel span{ animation:none }
}

@media (max-width:700px){
  #fejlec nav{ display:none }
  .fejlec-nyelv span{ display:none }
  section{ padding:80px 18px }
  .letra li{ grid-template-columns:44px 1fr; }
  .letra .fogalom{ grid-column:2; text-align:left }
}

/* ---- Banner ---- */
#banner{ padding-top:0 }
#banner figure{ margin:0 }
#banner img{
  width:100%; height:auto; display:block; border-radius:6px;
  border:1px solid rgba(0,255,224,.2);
  box-shadow:0 0 60px rgba(0,255,224,.1);
}
#banner figcaption{
  margin-top:16px; text-align:center; color:var(--cyan);
  font-family:'Orbitron',sans-serif; font-size:13px; letter-spacing:4px;
  text-shadow:0 0 18px rgba(0,255,224,.4);
}

/* ---- Játékosnév ---- */
#jatekos-urlap{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:20px 22px; margin-bottom:26px; border-radius:5px;
  background:rgba(8,12,20,.75); border:1px solid rgba(0,255,224,.22);
}
#jatekos-urlap label{ color:var(--halvany); font-size:12px; letter-spacing:2px }
#jatekos-urlap input{
  flex:1; min-width:180px; padding:11px 14px; border-radius:3px;
  background:var(--bg); color:var(--cyan); font-family:inherit; font-size:14px;
  border:1px solid rgba(0,255,224,.35);
}
#jatekos-urlap input:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 14px rgba(0,255,224,.3) }
#jatekos-urlap button{
  padding:11px 22px; border-radius:3px; cursor:pointer;
  background:var(--cyan); color:#021b18; border:none; font-weight:bold;
  font-family:inherit; font-size:12px; letter-spacing:2px;
}
#jatekos-urlap button:hover{ background:#5fffe9 }
#jatekos-uzenet{ width:100%; margin:0; font-size:12px; color:var(--green); min-height:16px }
#jatekos-uzenet.hiba{ color:var(--red) }

/* ---- Ranglista ---- */
#ranglista-tabla{ width:100%; border-collapse:collapse; font-size:14px }
#ranglista-tabla th{
  text-align:left; padding:10px 12px; color:var(--halvany);
  font-family:'Orbitron',sans-serif; font-size:10px; letter-spacing:3px;
  border-bottom:1px solid rgba(255,255,255,.12); font-weight:500;
}
#ranglista-tabla td{ padding:11px 12px; border-bottom:1px solid rgba(255,255,255,.05) }
#ranglista-tabla tbody tr:nth-child(1) td{ color:var(--amber) }
#ranglista-tabla tbody tr:nth-child(2) td{ color:#d8e6f0 }
#ranglista-tabla tbody tr:nth-child(3) td{ color:#c08a5a }
#ranglista-tabla .hely{ font-family:'Orbitron',sans-serif; width:52px }
#ranglista-tabla .pont{ font-family:'Orbitron',sans-serif }
/* A saját sor és a betöltetlen helyek a dobogó-színezés UTÁN állnak, és
   ugyanolyan fajsúlyú a választójuk – különben az első három hely színe
   nyerne, és a saját sor nem látszana ki a listából. */
#ranglista-tabla tbody tr.en td{ color:var(--cyan); font-weight:bold }
#ranglista-tabla tbody tr.ures td{ color:#3b4a55 }
#ranglista-ures{ color:var(--halvany); font-size:14px; padding:18px 2px }
#ranglista-tabla[hidden], #ranglista-ures[hidden]{ display:none }

/* ---- Megosztás ---- */
#megosztas{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:22px; padding:16px 20px; border-radius:5px;
  background:rgba(8,12,20,.6); border:1px solid rgba(255,255,255,.08);
  color:var(--halvany); font-size:12px; letter-spacing:2px;
}
.megoszt{
  padding:10px 20px; border-radius:3px; cursor:pointer;
  background:transparent; color:var(--szoveg); border:1px solid rgba(255,255,255,.2);
  font-family:'Orbitron',sans-serif; font-size:11px; letter-spacing:2px;
}
.megoszt.fb:hover{ color:#fff; border-color:#4c7fe0; box-shadow:0 0 16px rgba(76,127,224,.35) }
.megoszt.ig:hover{ color:#fff; border-color:var(--magenta); box-shadow:0 0 16px rgba(255,45,149,.35) }
#megosztas-uzenet{
  width:100%; margin:0; font-size:12px; letter-spacing:0; line-height:1.5;
  color:var(--amber); min-height:16px;
}

@media (max-width:700px){
  #ranglista-tabla th:nth-child(4), #ranglista-tabla td:nth-child(4){ display:none }
  #banner figcaption{ font-size:11px; letter-spacing:2px }
}