/* ==========================================================================
   CHAMPIONS OF THALORIA — ötnyelvű egyoldalas weboldal
   Egyetlen fájl. Nincs külső betűtípus, könyvtár, követőkód vagy süti.
   A nyelvválasztás a böngésző localStorage-ában marad meg (nem süti,
   nem megy sehova, ezért nem kell hozzá süti-figyelmeztetés).
   ========================================================================== */

:root{
  --gold:      #e0b055;
  --gold-soft: #f4dcab;
  --paladin:   #ffcf7a;
  --wizard:    #7bf0c0;
  --fallen:    #b07ae8;
  --ink:       #0a0907;
  --panel:     #14110d;
  --panel-2:   #1c1811;
  --text:      #d6ccbd;
  --text-dim:  #8f8577;
  --line:      #38301f;
  --sans:      system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--ink);
  color:var(--text);
  font-family:Georgia,'Times New Roman',serif;
  font-size:17px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:var(--gold); }

.wrap{ max-width:1120px; margin:0 auto; padding:0 26px; }

/* ---------- FELSŐ SÁV ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,9,7,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:56px; gap:16px; }
.brand{
  font-family:var(--sans); font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); text-decoration:none; white-space:nowrap;
}
.nav-right{ display:flex; align-items:center; gap:28px; }
.nav-links{ display:flex; gap:26px; }
.nav-links a{
  font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim); text-decoration:none; transition:color .15s;
}
.nav-links a:hover{ color:var(--gold-soft); }

/* ---------- NYELVVÁLASZTÓ ---------- */
.langs{ display:flex; gap:8px; align-items:center; }
.langs button{
  background:none; border:1px solid transparent; padding:3px; cursor:pointer;
  line-height:0; border-radius:2px; transition:.15s;
  opacity:.45; filter:grayscale(.55);
}
.langs button:hover{ opacity:.9; filter:none; }
.langs button.active{ opacity:1; filter:none; border-color:var(--gold); }
.langs img{ width:26px; height:auto; display:block; }

@media (max-width:860px){
  .nav-links{ display:none; }
  nav .wrap{ padding-top:8px; padding-bottom:8px; }
}
@media (max-width:420px){
  .brand{ font-size:10px; letter-spacing:.18em; }
  .langs img{ width:22px; }
}

/* ---------- FEJLÉC ---------- */
.hero{ position:relative; background:#000; line-height:0; }
/* ⚠️ A height:auto NÉLKÜL a kép megnyúlik: a HTML height attribútum és a
   CSS width:100% együtt torzítaná az oldalarányt. */
.hero img{ width:100%; height:auto; }
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:36%;
  background:linear-gradient(to bottom, rgba(10,9,7,0), var(--ink));
  pointer-events:none;
}

.hero-below{ text-align:center; padding:48px 26px 68px; }
.tagline{ max-width:680px; margin:0 auto; font-size:clamp(18px,2.4vw,22px); color:var(--gold-soft); }

/* ---------- GOMBOK ---------- */
.actions{ margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  text-decoration:none; text-align:center;
  padding:15px 32px;
  border:1px solid var(--gold);
  color:var(--gold-soft);
  background:linear-gradient(to bottom, rgba(224,176,85,.15), rgba(224,176,85,.04));
  transition:.18s ease;
}
.btn:hover{ background:var(--gold); color:#191207; box-shadow:0 0 30px rgba(224,176,85,.35); }
.btn.ghost{ border-color:var(--line); color:var(--text-dim); background:none; }
.btn.ghost:hover{ border-color:var(--text-dim); color:var(--text); background:rgba(255,255,255,.05); box-shadow:none; }

/* ---------- FEJLESZTÉS ALATT SÁV ---------- */
.wip{
  background:#221b11;
  border-top:1px solid #4a3a1e; border-bottom:1px solid #4a3a1e;
  padding:20px 26px; text-align:center; font-size:15px; color:#d3bd92;
}
.wip .wl{ color:var(--gold-soft); letter-spacing:.12em; font-family:var(--sans); font-size:13px; font-weight:600; }
.wip p{ max-width:820px; margin:0 auto; }
.wip p + p{ margin-top:10px; }

/* ---------- SZAKASZOK ---------- */
section{ padding:88px 0; }
section + section{ border-top:1px solid var(--line); }

h2{
  font-size:clamp(21px,2.9vw,30px);
  line-height:1.35;
  color:var(--gold-soft);
  letter-spacing:.04em;
  text-align:center;
  margin-bottom:34px;
}
.body-copy{ max-width:780px; margin:0 auto; }
.body-copy p + p{ margin-top:18px; }
.center{ text-align:center; }
.dim{ color:var(--text-dim); }

/* ---------- HÁROM VÉRVONAL ---------- */
.bloodlines{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px; }
.bl{
  background:linear-gradient(to bottom, var(--panel-2), var(--panel));
  border:1px solid var(--line); border-top:2px solid var(--c);
  padding:0 30px 34px; text-align:center;
}
/* A jelképek fekete háttéren vannak: a 'screen' keverés eltünteti a feketét,
   így nem kellett külön áttetsző PNG-t készíteni hozzájuk. */
.bl .emblem{
  width:auto; height:190px; margin:24px auto 10px;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 26px rgba(255,255,255,.10));
}
.bl h3{
  font-family:var(--sans); font-size:14px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--c); margin-bottom:16px;
}
.bl p{ font-size:16px; text-align:left; }
.bl .motto{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  font-style:italic; font-size:15px; color:var(--text-dim); text-align:center;
}
.bl.paladin{ --c:var(--paladin); }
.bl.wizard { --c:var(--wizard);  }
.bl.fallen { --c:var(--fallen);  }

/* ---------- ARÉNA-ÍGÉRET ---------- */
.promise-wrap{
  position:relative;
  background:url('img/parchment.jpg') center/cover no-repeat;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.promise-wrap::before{ content:''; position:absolute; inset:0; background:rgba(8,7,5,.87); }
.promise{ position:relative; max-width:820px; margin:0 auto; padding:92px 26px; }
.promise h2{ text-align:left; margin-bottom:26px; }
.promise p + p{ margin-top:16px; }
.promise .stamp{
  margin-top:32px; padding-top:22px; border-top:1px solid rgba(224,176,85,.25);
  font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}

/* ---------- VIDEÓ ---------- */
.video-frame{
  position:relative; aspect-ratio:16/9;
  background:var(--panel); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  color:var(--text-dim); text-align:center; padding:24px;
}
.video-frame iframe, .video-frame video{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-frame .note{ font-family:var(--sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase; }

/* ---------- LÁBLÉC ---------- */
footer{ border-top:1px solid var(--line); padding:60px 0 78px; text-align:center; color:var(--text-dim); font-size:15px; }
.footer-links{ margin-bottom:26px; display:flex; gap:28px; justify-content:center; flex-wrap:wrap; }
.footer-links a{
  font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); text-decoration:none;
}
.footer-links a:hover{ text-decoration:underline; }
.studio{ font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; opacity:.55; margin-top:14px; }

/* ---------- FINOM BEÚSZÁS ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

@media (max-width:640px){
  section{ padding:64px 0; }
  .promise{ padding:66px 22px; }
  .bl .emblem{ height:150px; }
}

/* ==========================================================================
   ZENE-GOMB
   Alapból REJTVE van, és a site.js csak akkor mutatja meg, ha a hangfájl
   tényleg létezik. Így ha nincs feltöltve zene, nem lóg ott egy halott gomb.
   ========================================================================== */
.music{
  display:flex;                 /* MINDIG látszik; csak hibás hangfájlnál tűnik el */
  align-items:center; justify-content:center;
  width:34px; height:34px;
  background:none; cursor:pointer;
  border:1px solid var(--line); border-radius:2px;
  color:var(--text-dim);
  transition:.18s ease; flex:0 0 auto;
}
.music.broken{ display:none; }   /* nincs vagy hibás a hangfájl */
.music:hover{ color:var(--gold-soft); border-color:var(--gold); }
.music.playing{ color:var(--gold); border-color:var(--gold); box-shadow:0 0 14px rgba(224,176,85,.25); }
.music svg{ width:18px; height:18px; display:block; }
/* A két ikon közül mindig csak az egyik látszik */
.music .ico-off{ display:block; }
.music .ico-on { display:none; }
.music.playing .ico-off{ display:none; }
.music.playing .ico-on { display:block; }

/* Lassú, finom pulzálás, amíg szól — jelzi, hogy tőle jön a hang */
@keyframes musicPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
.music.playing svg{ animation:musicPulse 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .music.playing svg{ animation:none; } }

.nav-right{ gap:22px; }
@media (max-width:420px){ .nav-right{ gap:14px; } .music{ width:30px; height:30px; } }

/* ==========================================================================
   ALOLDALAK (galéria, sajtócsomag, napló) — közös fejléc
   ========================================================================== */
.page-head{
  border-bottom:1px solid var(--line);
  padding:70px 0 56px;
  text-align:center;
  background:linear-gradient(to bottom, #100d09, var(--ink));
}
.page-head h1{
  font-size:clamp(28px,4.4vw,44px); color:var(--gold-soft);
  letter-spacing:.05em; margin-bottom:14px;
}
.page-head p{ max-width:660px; margin:0 auto; color:var(--text-dim); }
.back{
  display:inline-block; margin-top:26px;
  font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim); text-decoration:none;
}
.back:hover{ color:var(--gold-soft); }

/* ==========================================================================
   MEGOSZTÁS
   ========================================================================== */
.share{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.share a, .share button{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  text-decoration:none; cursor:pointer;
  padding:12px 20px;
  border:1px solid var(--line); background:none; color:var(--text-dim);
  transition:.18s ease;
}
.share a:hover, .share button:hover{ border-color:var(--gold); color:var(--gold-soft); background:rgba(224,176,85,.06); }
.share svg{ width:16px; height:16px; }
.share button.done{ border-color:var(--gold); color:var(--gold); }

/* ==========================================================================
   GYIK
   ========================================================================== */
.faq{ max-width:820px; margin:0 auto; }
.faq details{
  border-bottom:1px solid var(--line);
  padding:4px 0;
}
.faq details:first-of-type{ border-top:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none;
  padding:22px 40px 22px 0; position:relative;
  color:var(--gold-soft); font-size:18px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  color:var(--gold); font-size:24px; line-height:1; transition:transform .2s;
}
.faq details[open] summary::after{ content:'–'; }
.faq summary:hover{ color:var(--gold); }
.faq .answer{ padding:0 40px 24px 0; color:var(--text-dim); }

/* ==========================================================================
   GALÉRIA
   ========================================================================== */
.gal-section{ margin-bottom:64px; }
.gal-section h2{ text-align:left; margin-bottom:8px; }
.gal-count{
  font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:26px;
}
.gal-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.gal-grid a{
  display:block; position:relative; overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
  aspect-ratio:16/9;
}
.gal-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease, opacity .25s; }
.gal-grid a:hover{ border-color:var(--gold); }
.gal-grid a:hover img{ transform:scale(1.05); }

/* Nagyított kép (lightbox) */
.lb{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(6,5,4,.96);
  align-items:center; justify-content:center; padding:30px;
}
.lb.open{ display:flex; }
.lb img{ max-width:100%; max-height:88vh; object-fit:contain; border:1px solid var(--line); }
.lb .close{
  position:absolute; top:18px; right:22px;
  background:none; border:none; color:var(--text-dim); font-size:34px; cursor:pointer; line-height:1;
}
.lb .close:hover{ color:var(--gold); }
.lb .nav-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text-dim); font-size:46px; cursor:pointer;
  padding:10px 18px; line-height:1;
}
.lb .nav-arrow:hover{ color:var(--gold); }
.lb .prev{ left:6px; } .lb .next{ right:6px; }
.lb .caption{
  position:absolute; bottom:16px; left:0; right:0; text-align:center;
  font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim);
}

/* ==========================================================================
   SAJTÓCSOMAG
   ========================================================================== */
.facts{ max-width:820px; margin:0 auto 56px; border-top:1px solid var(--line); }
.facts div{ display:flex; gap:24px; padding:15px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.facts dt{
  flex:0 0 190px;
  font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.facts dd{ flex:1 1 300px; }
.asset-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.asset{ border:1px solid var(--line); background:var(--panel); padding:16px; text-align:center; }
.asset img{ width:100%; height:130px; object-fit:contain; margin-bottom:14px; background:#000; }
.asset .name{ font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text); }
.asset .meta{ font-size:13px; color:var(--text-dim); margin-top:4px; }

/* ==========================================================================
   FEJLESZTŐI NAPLÓ
   ========================================================================== */
.post{ max-width:820px; margin:0 auto 60px; padding-bottom:52px; border-bottom:1px solid var(--line); }
.post:last-child{ border-bottom:none; }
.post .date{
  font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px;
}
.post h2{ text-align:left; margin-bottom:18px; }
.post p + p{ margin-top:16px; }
.post img{ margin:24px 0; border:1px solid var(--line); }
.post ul{ margin:16px 0 16px 22px; }
.post li{ margin-bottom:8px; }

/* ==========================================================================
   HANGULATI EFFEKTEK — oldalsó fényoszlopok + szálló parázs
   ---------------------------------------------------------------------------
   A rétegeket a site.js hozza létre, ezért egyik HTML fájlba sem kell beleírni.

   ⚠️ MIÉRT A TARTALOM FÖLÖTT VAN, ÉS MIÉRT "screen"?
   Ha a tartalom ALÁ tennénk, a fejlécbanner (ami teljes szélességű és
   átlátszatlan) egyszerűen kitakarná az oldal tetején. A `mix-blend-mode:
   screen` viszont csak VILÁGOSÍT: a fekete pixelei nem látszanak, csak a
   fény adódik hozzá az alatta lévő képhez. Ezért mehet nyugodtan fölé —
   nem takar el semmit, csak megvilágítja.
   ========================================================================== */

.fx{
  position:fixed; inset:0;
  z-index:5;                 /* tartalom fölött, de a menü (50) alatt */
  pointer-events:none;       /* soha nem fogja el a kattintást */
  overflow:hidden;
  mix-blend-mode:screen;     /* csak hozzáad fényt, nem takar */
}

/* ── Oldalsó fényoszlopok ──────────────────────────────────────────────────
   Balra a Paladin aranya, jobbra a Fallen ibolyája.                        */
.fx-glow{
  position:absolute; top:-10%; bottom:-10%;
  width:34vw; max-width:520px;
  filter:blur(40px);
  will-change:opacity, transform;
}
.fx-glow.left{
  left:-10vw;
  background:linear-gradient(to right,
    rgba(255,186,92,.55) 0%,
    rgba(255,170,70,.22) 40%,
    rgba(255,160,60,.06) 70%,
    rgba(255,160,60,0)   100%);
  animation:fxBreatheL 13s ease-in-out infinite;
}
.fx-glow.right{
  right:-10vw;
  background:linear-gradient(to left,
    rgba(168,110,255,.48) 0%,
    rgba(150,95,235,.20) 40%,
    rgba(140,90,225,.06) 70%,
    rgba(140,90,225,0)   100%);
  animation:fxBreatheR 17s ease-in-out infinite;
}

/* A kettő szándékosan MÁS ütemű (13 és 17 mp): sosem lüktetnek együtt,
   ettől tűnik élőnek és nem gépiesnek. */
@keyframes fxBreatheL{
  0%,100%{ opacity:.55; transform:translateX(0)     scaleX(1);    }
  50%    { opacity:1;    transform:translateX(22px) scaleX(1.12); }
}
@keyframes fxBreatheR{
  0%,100%{ opacity:.50; transform:translateX(0)      scaleX(1);    }
  50%    { opacity:.95;  transform:translateX(-22px) scaleX(1.12); }
}

/* ── Szálló parázs ─────────────────────────────────────────────────────── */
.fx-embers{ position:absolute; inset:0; width:100%; height:100%; }

/* Kis kijelzőn visszafogottabban — ott a fény elvenné a helyet a szövegtől. */
@media (max-width:760px){
  .fx-glow{ width:52vw; }
  .fx-glow.left{ left:-16vw; }
  .fx-glow.right{ right:-16vw; }
}

/* Aki kikapcsolta a mozgást a rendszerében, annál álljon meg minden. */
@media (prefers-reduced-motion:reduce){
  .fx-glow{ animation:none; opacity:.7; }
  .fx-embers{ display:none; }
}