/* ============================================================
   A Bikavér Őrzőinek Testvérisége — mobil kalandjáték
   Stílus: lovagrendi pergamen, mobilra optimalizálva
   ============================================================ */

:root {
  --barna-sotet: #3a2417;
  --barna-fejlec: #4a2c18;
  --barna-melyseg: #2a1a0f;
  --pergamen: #f3e7c8;
  --pergamen-melyebb: #e9d8b0;
  --pergamen-arnyek: #d8c298;
  --tinta: #2e2013;
  --tinta-halvany: #6b5640;
  --arany: #b08d3e;
  --arany-vilagos: #d9b75b;
  --piros: #7c2d1e;
  --siker: #3f6b32;
  --hiba: #8a2b1d;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size: 19px;
  line-height: 1.6;
  color: var(--tinta);
  background-color: var(--barna-melyseg);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(120, 80, 40, 0.25), transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(60, 35, 15, 0.5), transparent 55%);
  min-height: 100vh;
}

/* ---- Elrendezés ---- */
.shell {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--barna-sotet);
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

/* ---- Fejléc ---- */
.fejlec {
  background: linear-gradient(180deg, var(--barna-fejlec), var(--barna-melyseg));
  color: var(--pergamen);
  padding: 26px 22px 22px;
  border-bottom: 3px solid var(--arany);
  text-align: center;
}
.fejlec .cimer { font-size: 30px; margin-bottom: 6px; letter-spacing: 4px; }
.fejlec h1 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 25px;
  font-weight: 700;
  margin: 0;
  color: var(--arany-vilagos);
  letter-spacing: 1px;
  line-height: 1.25;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.fejlec .alcim {
  margin: 8px 0 0;
  font-size: 16px;
  font-style: italic;
  color: #cbb78f;
}

/* ---- Tartalom ---- */
.tartalom { padding: 22px 18px 40px; }

/* Pergamen kártya */
.lap {
  background: var(--pergamen);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.35), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(180,150,100,0.18), transparent 45%);
  border: 1px solid var(--pergamen-arnyek);
  border-radius: 10px;
  padding: 22px 20px;
  margin-bottom: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 0 40px rgba(180,150,100,0.18);
}
.lap h2 {
  font-family: 'Cinzel', Georgia, serif;
  color: var(--piros);
  font-size: 22px;
  margin: 0 0 4px;
  line-height: 1.2;
}
.lap p { margin: 0 0 14px; }
.lap p:last-child { margin-bottom: 0; }
.lap strong { color: var(--piros); }

/* Vers / idézet blokk */
.vers {
  font-style: italic;
  text-align: center;
  padding: 16px 14px;
  margin: 16px 0;
  border-top: 1px solid var(--pergamen-arnyek);
  border-bottom: 1px solid var(--pergamen-arnyek);
  color: var(--tinta-halvany);
  line-height: 1.9;
}

/* Tükrözhető kép (Völgy állomás) */
.tukor-keret {
  border-radius: 10px; overflow: hidden;
  border: 2px solid var(--arany);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  margin-bottom: 14px;
}
.tukrozheto-kep {
  width: 100%; display: block;
  transition: transform 0.5s ease;
}
.tukrozheto-kep.flipped { transform: scaleX(-1); }

/* Vésett fémtábla (Völgy állomás) */
.plakett {
  background: linear-gradient(150deg, #c9ccd0 0%, #9a9da1 38%, #babdc1 60%, #84878b 100%);
  border: 6px solid #6e7174;
  border-radius: 10px;
  padding: 26px 18px;
  margin: 16px 0;
  text-align: center;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.6), inset 0 -3px 10px rgba(0,0,0,0.4), 0 6px 16px rgba(0,0,0,0.5);
}
.plakett-szoveg {
  display: inline-block;
  color: #3b3e42;
  transition: transform 0.55s ease;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 -1px 1px rgba(0,0,0,0.35);
}
.plakett-szoveg.flipped { transform: scaleX(-1); }
.plakett-szoveg .kicsi {
  display: block; font-size: 14px; letter-spacing: 3px; margin-bottom: 6px; color: #55585c;
}
.plakett-szoveg .nagy {
  display: block; font-family: 'Cinzel', Georgia, serif; font-weight: 700;
  font-size: 44px; letter-spacing: 4px;
}

/* Tükrözött szöveg (Völgy állomás) */
.tukor {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 3px;
  text-align: center;
  color: var(--piros);
  transition: transform 0.5s ease;
  display: inline-block;
  width: 100%;
}
.tukor.flipped { transform: scaleX(-1); }

/* ---- Videó ---- */
.video-keret {
  position: relative;
  margin: 0 0 20px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--arany);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  background: #000;
}
.video-keret video { width: 100%; display: block; }
.video-keret .placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 16/9; color: #b89; text-align: center; padding: 20px;
  background: repeating-linear-gradient(45deg, #1a120a, #1a120a 12px, #221710 12px, #221710 24px);
  font-size: 15px;
}
.video-keret .placeholder .ikon { font-size: 38px; margin-bottom: 8px; }

/* ---- Hang (narráció) ---- */
.audio-keret {
  background: var(--pergamen-melyebb);
  border: 1px solid var(--arany);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.audio-keret .audio-cimke {
  font-family: 'Cinzel', Georgia, serif;
  color: var(--piros); font-weight: 700; font-size: 16px;
  margin-bottom: 10px;
}
.audio-keret audio { width: 100%; display: block; }

/* ---- Zoomolható kép ---- */
.kep-keret {
  margin: 0 0 20px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--arany);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  position: relative;
  cursor: zoom-in;
}
.kep-keret img { width: 100%; display: block; }
.kep-keret .nagyit-cimke {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.65); color: #fff; font-size: 13px;
  padding: 4px 10px; border-radius: 14px; pointer-events: none;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.92);
  display: none; align-items: center; justify-content: center;
  overflow: auto; padding: 0;
  touch-action: pinch-zoom;
}
.lightbox.nyitva { display: flex; }
.lightbox img { max-width: none; width: auto; min-width: 100%; height: auto; }
.lightbox .bezar {
  position: fixed; top: 14px; right: 14px; z-index: 1001;
  background: rgba(0,0,0,0.7); color: #fff; border: 1px solid #fff;
  width: 44px; height: 44px; border-radius: 50%; font-size: 24px; cursor: pointer;
}

/* ---- Válasz beviteli mező ---- */
.valasz-blokk {
  background: var(--pergamen-melyebb);
  border: 1px dashed var(--tinta-halvany);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 20px;
}
.valasz-blokk label { display: block; font-weight: 700; margin-bottom: 10px; color: var(--tinta); }
.valasz-sor { display: flex; gap: 8px; }
.valasz-blokk input[type="text"] {
  flex: 1; min-width: 0;
  font-family: inherit; font-size: 20px;
  padding: 12px 14px;
  border: 1px solid var(--pergamen-arnyek);
  border-radius: 8px; background: #fff; color: var(--tinta);
  text-align: center; letter-spacing: 2px;
}
.valasz-blokk input:focus { outline: 2px solid var(--arany); }

.gomb {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 17px; font-weight: 700;
  padding: 12px 20px;
  background: linear-gradient(180deg, var(--arany-vilagos), var(--arany));
  color: var(--barna-melyseg);
  border: none; border-radius: 8px; cursor: pointer;
  box-shadow: 0 3px 0 #7a5e22;
  transition: transform 0.08s;
}
.gomb:active { transform: translateY(2px); box-shadow: 0 1px 0 #7a5e22; }
.gomb.masodlagos {
  background: transparent; color: var(--pergamen);
  border: 1px solid var(--arany); box-shadow: none;
}

.uzenet { margin-top: 14px; padding: 12px 14px; border-radius: 8px; font-weight: 600; display: none; }
.uzenet.lathato { display: block; }
.uzenet.siker { background: rgba(63,107,50,0.15); color: var(--siker); border: 1px solid var(--siker); }
.uzenet.hiba { background: rgba(138,43,29,0.12); color: var(--hiba); border: 1px solid var(--hiba); }

/* Siker-feltárás */
.feltaras {
  background: var(--pergamen);
  border: 2px solid var(--siker);
  border-radius: 10px; padding: 20px; margin-bottom: 20px;
  display: none;
}
.feltaras.lathato { display: block; animation: fade 0.6s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(10px);} to {opacity:1; transform:none;} }

/* ---- Navigáció ---- */
.nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.nav .gomb { flex: 1; text-align: center; text-decoration: none; }

/* ---- Oklevél ---- */
.oklevel {
  background: var(--pergamen);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.4), transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(160,120,70,0.2), transparent 50%);
  border: 3px double var(--arany);
  border-radius: 6px;
  padding: 28px 22px;
  text-align: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.oklevel .felirat { font-family:'Cinzel',serif; letter-spacing: 4px; color: var(--arany); font-size: 14px; }
.oklevel h2 { font-family:'Cinzel',serif; color: var(--piros); font-size: 24px; margin: 8px 0 4px; }
.oklevel .nevek {
  font-family: 'Cinzel', serif; font-size: 26px; font-weight: 700;
  color: var(--tinta); margin: 18px 0; padding: 10px 0;
  border-top: 1px solid var(--pergamen-arnyek); border-bottom: 1px solid var(--pergamen-arnyek);
  min-height: 1.4em; word-break: break-word;
}
.oklevel .esku { font-style: italic; font-size: 17px; color: var(--tinta-halvany); }
.oklevel .pecset { font-size: 50px; margin-top: 14px; }
.oklevel .datum { margin-top: 10px; font-size: 15px; color: var(--tinta-halvany); }

/* ---- Lábléc ---- */
.lablec { text-align: center; padding: 18px; font-size: 13px; color: #8a7355; }
.lablec a { color: var(--arany-vilagos); }

/* Kiemelt doboz (sötét, arany szöveg) */
.kiemelt {
  background: linear-gradient(180deg, var(--barna-fejlec), var(--barna-melyseg));
  color: var(--arany-vilagos);
  border: 1px solid var(--arany);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 18px 0 0;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Lakat-jelzés (melyik dobozt nyitja a megfejtés) */
.lakat-jel {
  display: flex; align-items: center; gap: 10px;
  background: var(--pergamen-melyebb);
  border-left: 4px solid var(--arany);
  border-radius: 8px;
  padding: 12px 14px; margin: 16px 0 0;
  font-weight: 600; color: var(--tinta);
}
.lakat-jel .ikon { font-size: 22px; }

/* Súgó */
.sugo-blokk { margin-bottom: 20px; }
.sugo-tartalom {
  background: var(--pergamen-melyebb);
  border: 1px dashed var(--tinta-halvany);
  border-radius: 8px; padding: 14px 16px; margin-top: 10px;
  display: none; color: var(--tinta-halvany); font-style: italic;
}
.sugo-tartalom.lathato { display: block; animation: fade 0.4s ease; }

/* Kis segéd */
.kozepre { text-align: center; }
.halvany { color: var(--tinta-halvany); font-size: 15px; }
.szerkeszto-jel {
  font-size: 13px; background: #fff6d8; border: 1px dashed #b08d3e;
  padding: 8px 10px; border-radius: 6px; color: #7a5e22; margin-top: 10px;
}