/* ==========================================================================
   HU-TÉMA — a style.css után töltődik, és felülírja azt.

   MIÉRT KÜLÖN FÁJL
   A style.css a FR-testvéroldal sablonja: az elrendezés, a komponensek és a
   reszponzív viselkedés onnan jön, és jó. Ami nem jó, az a vizuális
   azonosság: ugyanaz a tengerészkék alap, ugyanaz a korall akcentus, ugyanaz
   a pirulaforma, ugyanaz az Inter. Ez a fájl EZT a réteget cseréli le —
   a szerkezethez nem nyúl. Teljes visszaállítás: vedd ki a <link>-et a
   tools/parts/head.html-ből, és építs újra.

   A TÉMA IRÁNYA
   A magyar képkészlet (hungary-casino-1…6) mélyibolya–feketén ül, arany és
   neonlila kiemelésekkel. A felület ezt viszi tovább: ibolyafekete alap,
   arany akcentus, lila linkek. Így a képek nem idegen testként ülnek a
   lapon, és a rokonoldalról is első ránézésre megkülönböztethető.

   AMI VÁLTOZIK
   1. paletta        — tengerészkék+korall  →  ibolyafekete+arany
   2. tipográfia     — Inter mindenhol      →  Sora (címek) + Manrope (szöveg)
   3. forma          — pirula, 16px rádiusz →  szögletesebb, 6–8px
   4. fejléc         — lebegő kártya        →  lapos, alsó szegélyes sáv
   5. H2-jel         — színátmenetes négyzet→  arany függőleges vonal
   6. alsó sáv, rail — pirula                →  szögletes, arany aktív jelölés
   ========================================================================== */

/* ---------------------------------------------------------------- 1. PALETTA */
:root {
  /* Alapok — ibolyafekete, a képek hátteréhez hangolva */
  --bg:        #120b22;
  --bg-2:      #180f2c;
  --panel:     #1d1336;
  --surface:   #241a41;
  --surface-2: #2f2352;
  --bg-deep:   #0b0617;

  --border:        #322550;
  --border-strong: #4d3a7d;

  --text:      #ffffff;
  --text-soft: #d9cff2;
  --text-mute: #a08fca;

  /* Akcentus: arany. A képeken a zsetonok, a pajzs és a szalag is arany —
     ez köti össze a felületet a grafikával. */
  --accent-1:   #f3b73e;
  --accent-2:   #dd8626;
  --accent-lt:  #ffd88b;
  --accent-dim: rgba(243, 183, 62, .12);

  /* Link: neonlila. Kontraszt a --bg-n ~8:1, bőven AA fölött. */
  --link: #b9a0ff;

  /* CTA = arany, sötét tintával. A FR-en korall pirula volt fehér szöveggel;
     az arany+sötét párosnak nagyobb a kontrasztja és más a karaktere. */
  --cta-1:   #f8c44a;
  --cta-2:   #e08b22;
  --cta-ink: #23160a;

  --green-1: #3ddc84;
  --green-2: #16a34a;

  --warn:     #f3b73e;
  --warn-dim: rgba(243, 183, 62, .10);
  --tip:      #b9a0ff;
  --tip-dim:  rgba(185, 160, 255, .10);

  /* Csempe-színátmenetek: lila–arany család, nem a FR kék–zöld–narancs */
  --grad-orange: linear-gradient(135deg, #7a3f10, #dd8626);
  --grad-green:  linear-gradient(135deg, #3c1f6b, #7b4fd1);
  --grad-purple: linear-gradient(135deg, #4a1d6e, #a134b0);
  --grad-blue:   linear-gradient(135deg, #241a41, #5b3fa8);
  --grad-teal:   linear-gradient(135deg, #123f52, #2a8fa0);

  /* Forma: a FR pirulás, lekerekített nyelvét szögletesre váltjuk */
  --radius:    8px;
  --radius-sm: 6px;
  --pill:      8px;

  --font:         "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Sora", var(--font);
}

/* ------------------------------------------------------------ 2. TIPOGRÁFIA */
h1, h2, h3, .promo-title, .brand-txt b, .toc-title, .faq-q, .site-foot h3 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
}
h1 { font-weight: 700; }
h2 { font-weight: 700; }
.promo-title { font-weight: 700; }
body { letter-spacing: .003em; }

/* --------------------------------------------------------------- 3. FEJLÉC */
/* A FR-fejléc lebegő, színátmenetes kártya volt. Itt lapos, teljes szélességű
   sáv, alul szegéllyel — a legfeltűnőbb különbség a két oldal között. */
.site-head {
  padding: 0;
  background: rgba(18, 11, 34, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.head-in {
  min-height: 64px;
  padding: 10px 0;
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.brand-mark {
  border-radius: 8px;
  background: linear-gradient(140deg, var(--accent-1), var(--accent-2));
  color: #23160a;
  box-shadow: 0 3px 12px rgba(243, 183, 62, .34);
}
/* Menüpont: aláhúzásos aktív jelölés a kitöltött pirula helyett */
.nav a { border-radius: 6px; }
.nav a[aria-current="page"] {
  background: none;
  box-shadow: none;
  color: var(--accent-lt);
  position: relative;
}
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 1px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}
@media (max-width: 1023px) {
  /* lenyíló mobilmenüben nincs értelme az aláhúzásnak */
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] { background: rgba(255, 255, 255, .08); }
  .nav { top: 74px; }
}

/* -------------------------------------------------------------- 4. GOMBOK */
.btn { border-radius: 8px; letter-spacing: .01em; }
.btn-cta { box-shadow: 0 8px 22px rgba(243, 183, 62, .28); }
.btn-green { box-shadow: 0 8px 22px rgba(61, 220, 132, .24); }

/* --------------------------------------------------------- 5. SZAKASZCÍMEK */
/* A FR-nél színátmenetes négyzet + fehér pont állt a H2 előtt. Helyette
   egyszerű arany függőleges vonal — más ritmus, kevesebb dísz. */
h2 { padding-left: 20px; }
h2::before {
  width: 4px;
  height: 1.05em;
  top: .16em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
  box-shadow: none;
}
h2::after { display: none; }
@media (max-width: 1023px) {
  h2 { padding-left: 18px; }
  h2::before { width: 3px; height: 1.05em; border-radius: 2px; }
  h2::after { display: none; }
}
.block-head::before {
  width: 22px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  box-shadow: none;
}
.eyebrow {
  border-radius: 6px;
  border-color: rgba(243, 183, 62, .28);
  color: var(--accent-lt);
}

/* ------------------------------------------------------- 6. OLDALSÓ SÁV */
.rail a { border-radius: 6px; }
.rail a[aria-current="page"] {
  background: rgba(243, 183, 62, .10);
  box-shadow: inset 0 0 0 1px rgba(243, 183, 62, .30);
  color: var(--accent-lt);
}
.rail a[aria-current="page"]::before {
  left: 0; top: 8px;
  width: 3px; height: 26px;
  border-radius: 0 2px 2px 0;
}
.rail-cta {
  color: #23160a !important;
  background: linear-gradient(135deg, var(--cta-1), var(--cta-2));
  box-shadow: 0 6px 16px rgba(243, 183, 62, .30);
}
.rail-cta:hover { background: linear-gradient(135deg, var(--cta-1), var(--cta-2)); }

/* ----------------------------------------------------------- 7. ALSÓ SÁV */
.botbar {
  border-radius: 10px;
  background: rgba(29, 19, 54, .92);
  backdrop-filter: blur(10px);
}
.botbar-item { border-radius: 7px; }
.botbar-cta { color: #23160a; }

/* ------------------------------------------------------- 8. APRÓ ELEMEK */
.chip, .age-badge, .rail-age em { border-radius: 6px; }
.brand-mark { border-radius: 8px; }
.promo, .toc, .faq-item, .tbl-wrap, .pay-panel, .shot, .banner,
.tile-card, .game-card, .legal-block, .cta-block { border-radius: var(--radius); }
.tbl-wrap table thead th { letter-spacing: .06em; }

/* A promó sötétítő fátyla is ibolyás legyen, ne tengerészkék */
.promo::before {
  background: linear-gradient(95deg,
    rgba(11, 6, 23, .95) 0%, rgba(11, 6, 23, .86) 38%,
    rgba(11, 6, 23, .46) 66%, rgba(11, 6, 23, .10) 100%);
}
@media (max-width: 700px) {
  .promo::before {
    background: linear-gradient(180deg,
      rgba(11, 6, 23, .70) 0%, rgba(11, 6, 23, .90) 45%, rgba(11, 6, 23, .97) 100%);
  }
}

/* ------------------------------------------------- 9. BEÉGETETT SZÍNEK
   A style.css néhány helyen nem tokenből, hanem kézzel írt tengerészkékből
   dolgozik — ezeket a :root felülírása nem éri el, külön kell cserélni.
   Enélkül a lap alapszíne kék marad, és a téma felemásnak látszik. */

/* A lap fölé fektetett fényfolt: kék + korall volt, most lila + arany */
body::before {
  background:
    radial-gradient(70% 50% at 15% 0%, rgba(123, 79, 209, .28), transparent 70%),
    radial-gradient(45% 45% at 92% 2%, rgba(243, 183, 62, .10), transparent 72%);
}

@media (min-width: 1024px) {
  /* Oldalsó sáv teste */
  .rail {
    border-radius: 10px;
    background: linear-gradient(180deg, #241a41, #1a1130 55%, #2f2352);
  }
  /* Összecsukott sáv ikonjainak buboréka */
  .rail:not(.open) a span {
    border-radius: 6px;
    background: #241a41;
  }
}

/* A széles banner tartalék-színátmenete (a kép alatt látszik, amíg tölt) */
.banner {
  background:
    var(--img, none) right center / auto 100% no-repeat,
    linear-gradient(110deg, #170e2b 0%, #3a1f52 38%, #6d3070 66%, #a2701f 100%);
}

/* A banner fölé fektetett sötétítő fátyol is beégetett tengerészkék volt
   (rgba(9,21,58,…)) — emiatt a bal fele kéknek látszott a lila lapon. */
.banner::after {
  background: linear-gradient(90deg,
    rgba(13, 7, 26, .96) 0%, rgba(13, 7, 26, .80) 40%,
    rgba(13, 7, 26, .28) 68%, transparent 100%);
}

/* Csempék és játékkártyák szövegolvashatósági fátyla — szintén beégetett
   tengerészkék volt; ibolyára váltjuk, hogy ne üssön el a lap alapszínétől. */
.tile-card::after {
  background: linear-gradient(180deg, transparent 30%, rgba(13, 7, 26, .78) 100%);
}
.game-card::after {
  background: linear-gradient(180deg, transparent 40%, rgba(13, 7, 26, .84) 100%);
}
.tile-card.tile-obj::after {
  background: linear-gradient(90deg,
    rgba(13, 7, 26, .58) 0%, rgba(13, 7, 26, .14) 58%, transparent 100%);
}
.tile-card.tile-shot::after,
.game-card.game-photo::after {
  background: linear-gradient(180deg, transparent 42%, rgba(13, 7, 26, .88) 100%);
}

/* ==========================================================================
   10. HU-SPECIFIKUS KIEGÉSZÍTÉSEK
   Korábban a style.css végén álltak. Onnan átkerültek ide, hogy a style.css
   bájtra azonos maradjon a FR-sablonnal — így egy jövőbeli sablonfrissítés
   konfliktus nélkül átvehető, és minden magyar eltérés EGY fájlban látszik.
   ========================================================================== */

/* --- Cikkbe ágyazott illusztrációk képaláírással -------------------------
   A képek a többi panellel azonos keretet kapnak, a képaláírás halkabb.
   A FR-sablon háttérképes megoldást használt; a magyar oldalak a brief
   SSR- és alt-követelménye miatt valódi <img> elemekkel dolgoznak. */
.shot {
  margin: 26px 0 30px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 14px 38px rgba(4, 9, 26, .45);
}
.shot img { width: 100%; }
.shot figcaption {
  padding: 12px 18px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-mute);
  border-top: 1px solid var(--border);
}

/* --- Ékezethiba-javítás -------------------------------------------------
   Az oldalsó sáv szakaszcímkéi nagybetűsek, a soruk viszont line-height: 1,
   a span pedig overflow: hidden — így a nagybetűk fölé kerülő magyar
   ékezetek (Á, É, Ó, Ő, Ú, Ű) levágódnak. Franciául alig látszott;
   magyarul minden szakaszcímkét érint. */
.rail-sep span { line-height: 1.45; }

/* --- Promó-hero: enyhébb elmosás ---------------------------------------
   A FR-sablonban blur(6px) volt: ott általános hangulatképek szerepeltek,
   amelyekből csak a szín számított. A magyar képkészlet viszont
   felismerhető motívumokra épül (Magyarország-térkép, Lánchíd, Parlament,
   ajándékdoboz, ujjlenyomat) — 6 px-en ezek elmosódnának, és pont az veszne
   el, amiért a kép készült. A szöveg kontrasztját nem a blur, hanem a
   .promo::before sötétítő átmenete adja.
   Visszaállítás a FR-értékre: blur(6px) + scale(1.08). */
.promo img {
  filter: blur(2px) brightness(.86) saturate(1.05);
  transform: scale(1.04);
}

/* A fejléc CTA-ja: a `.nav a { color: … }` erősebb szelektor, mint a
   `.btn-cta { color: … }`, ezért a gomb felirata a menü halvány színét vette
   fel. A FR-en ez nem tűnt fel (fehér szöveg korall gombon), aranyon viszont
   olvashatatlan. Itt visszavesszük a sötét tintát. */
.nav a.btn-cta,
.nav a.btn-cta:hover { color: var(--cta-ink); }