/* ==========================================================
   FortunaJáték – stíluslap
   Motívum: a nyomtatott fogadószelvény (perforáció, bélyegző,
   monospace számok), éjszakai stadionfényben.
   Alap: sötét téma. A világos a [data-tema="vilagos"] alatt.
   ========================================================== */

:root {
  /* --- SÖTÉT (alapértelmezett) --- */
  --hatter:    #0b0f14;
  --felszin:   #141a21;
  --felszin-2: #1b232c;
  --szoveg:    #e8edf2;
  --szoveg-2:  #b6c1cd;
  --halvany:   #8593a1;
  --vonal:     #263039;
  --stamp:     #ff4d6d;
  --stamp-h:   #ff7089;
  --turf:      #35c07d;
  --arany:     #f0c000;
  --fej:       #060a0e;
  --arnyek:    0 10px 30px rgba(0,0,0,.45);

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body:    "Spectral", Georgia, serif;
  --mono:    "IBM Plex Mono", "Courier New", monospace;

  --r: 3px;
  --hatar: 1180px;
}

[data-tema="vilagos"] {
  --hatter:    #edeee8;
  --felszin:   #ffffff;
  --felszin-2: #f5f6f1;
  --szoveg:    #101820;
  --szoveg-2:  #2b333c;
  --halvany:   #6b7280;
  --vonal:     #cfd3c8;
  --stamp:     #b4123c;
  --stamp-h:   #8e0e2f;
  --turf:      #1e5c3a;
  --arany:     #a8830a;
  --fej:       #101820;
  --arnyek:    0 6px 18px rgba(16,24,32,.10);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
[data-tema="vilagos"] html, html:has([data-tema="vilagos"]) { color-scheme: light; }

body {
  margin: 0;
  background: var(--hatter);
  color: var(--szoveg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
}

.hatar { width: 100%; max-width: var(--hatar); margin: 0 auto; padding: 0 18px; }

a { color: var(--szoveg); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--stamp); }
:focus-visible { outline: 3px solid var(--stamp); outline-offset: 2px; }

.atlepes { position: absolute; left: -9999px; background: var(--stamp); color: #fff; padding: 10px 14px; }
.atlepes:focus { left: 8px; top: 8px; z-index: 60; }

.mono { font-family: var(--mono); }
.apro { font-size: 13px; color: var(--halvany); }

/* ---------- Fejléc ---------- */

.fej { background: var(--fej); color: #fff; border-bottom: 1px solid var(--vonal); }
.fej a { color: #fff; text-decoration: none; }
.fej-belso {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 10px;
}

.logo { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: .02em; line-height: 1; white-space: nowrap; }
.logo-fortuna { color: #fff; }
.logo-jatek   { color: var(--arany); }
.logo-stub { font-family: var(--mono); font-size: 12px; font-weight: 500; color: #7d8794; margin-left: 4px; vertical-align: super; }

.fej-jobb { display: flex; align-items: center; gap: 14px; }

.menu { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--display); font-size: 18px; text-transform: uppercase; letter-spacing: .06em; }
.menu a { padding: 4px 0; border-bottom: 2px solid transparent; }
.menu a:hover { border-bottom-color: var(--arany); }
.menu a.aktiv { border-bottom-color: var(--stamp); }

.tema-valto {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: #fff;
  border: 1px solid #38424e; border-radius: 999px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  padding: 5px 11px; cursor: pointer; white-space: nowrap;
}
.tema-valto:hover { border-color: var(--arany); color: var(--arany); }
.tema-valto .ikon { font-size: 13px; line-height: 1; }

.korhatar-sav {
  margin: 0; padding: 7px 18px;
  background: #04070a; color: #8593a1;
  font-family: var(--mono); font-size: 11.5px;
  text-align: center;
}
[data-tema="vilagos"] .korhatar-sav { background: #0a0f14; }

/* ---------- Szekciók ---------- */

.szekcio { margin: 34px 0; }
.szekcio-fej {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  border-bottom: 2px solid var(--szoveg); padding-bottom: 6px; margin-bottom: 18px;
}
.szekcio-cim { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 27px; letter-spacing: .03em; margin: 0; line-height: 1.1; }
.szekcio-fej .tovabb { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; }

h1.oldal-cim { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 7vw, 46px); letter-spacing: .02em; margin: 28px 0 4px; line-height: 1.05; }
.oldal-alcim { margin: 0 0 26px; color: var(--halvany); font-size: 16px; }

/* ---------- SZELVÉNY: a tipp kártya ---------- */

.szelvenyek { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .szelvenyek { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .szelvenyek { grid-template-columns: 1fr 1fr 1fr; } }

.szelveny {
  position: relative; background: var(--felszin);
  border: 1px solid var(--vonal); border-radius: var(--r);
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.szelveny:hover { transform: translateY(-2px); box-shadow: var(--arnyek); border-color: var(--halvany); }

.szelveny-fej { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--vonal); }
.szelveny-sportag { font-family: var(--display); text-transform: uppercase; font-weight: 600; font-size: 15px; letter-spacing: .08em; color: var(--turf); }
.szelveny-ido { font-family: var(--mono); font-size: 12px; color: var(--halvany); white-space: nowrap; }

.szelveny-esemeny { font-size: 15px; line-height: 1.35; color: var(--szoveg-2); margin: 0; }
.szelveny-tipp { font-family: var(--display); font-weight: 700; font-size: 25px; line-height: 1.1; margin: 0; letter-spacing: .01em; }

.szelveny-adatok { display: flex; align-items: center; gap: 12px; margin-top: auto; }

.odds-bely {
  font-family: var(--mono); font-weight: 600; font-size: 20px;
  color: var(--stamp); border: 2px solid var(--stamp); border-radius: 2px;
  padding: 3px 9px 2px; transform: rotate(-1.5deg); white-space: nowrap;
}

.ero { display: flex; gap: 3px; }
.ero i { width: 8px; height: 14px; background: var(--vonal); display: block; }
.ero i.tele { background: var(--arany); }

.esely-blokk { flex: 1; min-width: 70px; }
.esely-cimke { font-family: var(--mono); font-size: 11px; color: var(--halvany); display: block; }
.esely-sav { height: 6px; background: var(--felszin-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--vonal); }
.esely-sav span { display: block; height: 100%; background: var(--turf); }

.gomb {
  display: inline-block; text-align: center;
  font-family: var(--display); text-transform: uppercase; font-weight: 700;
  letter-spacing: .07em; font-size: 16px;
  background: var(--stamp); color: #fff !important;
  padding: 10px 16px; border-radius: 2px; text-decoration: none;
  border: 0; cursor: pointer;
}
.gomb:hover { background: var(--stamp-h); color: #fff !important; }
.gomb.masodlagos { background: transparent; color: var(--szoveg) !important; border: 2px solid var(--szoveg); }
.gomb.masodlagos:hover { background: var(--szoveg); color: var(--hatter) !important; }
.gomb.teljes { display: block; width: 100%; }

/* ---------- Szűrő csipkék ---------- */

.szuro { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.szuro a {
  display: inline-block; text-decoration: none;
  font-family: var(--mono); font-size: 12.5px;
  border: 1px solid var(--vonal); background: var(--felszin);
  padding: 5px 11px; border-radius: 999px;
}
.szuro a:hover { border-color: var(--stamp); }
.szuro a.aktiv { background: var(--szoveg); color: var(--hatter); border-color: var(--szoveg); }

/* ---------- Esély táblázat ---------- */

.nap-blokk { margin-bottom: 30px; }
.nap-cim { font-family: var(--display); text-transform: uppercase; font-size: 20px; letter-spacing: .05em; margin: 0 0 10px; padding-bottom: 4px; border-bottom: 1px solid var(--vonal); }
.nap-cim small { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--halvany); margin-left: 8px; }

.tabla-doboz { overflow-x: auto; background: var(--felszin); border: 1px solid var(--vonal); border-radius: var(--r); }
table.eselyek { width: 100%; border-collapse: collapse; min-width: 540px; }
table.eselyek th, table.eselyek td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--vonal); }
table.eselyek th { font-family: var(--display); text-transform: uppercase; font-size: 13.5px; letter-spacing: .07em; color: var(--halvany); font-weight: 600; }
table.eselyek td.szam { font-family: var(--mono); font-size: 14px; width: 92px; }
table.eselyek tr:last-child td { border-bottom: 0; }
.merk { font-weight: 600; }
.bajn { font-size: 13px; color: var(--halvany); }

.mini-sav { height: 4px; background: var(--felszin-2); margin-top: 3px; border-radius: 999px; overflow: hidden; }
.mini-sav span { display: block; height: 100%; background: var(--halvany); }
.mini-sav.zold span { background: var(--turf); }
.mini-sav.piros span { background: var(--stamp); }

/* ---------- Hírek ---------- */

.hir-racs { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .hir-racs { grid-template-columns: 1fr 1fr; } }

.hir-kartya { background: var(--felszin); border: 1px solid var(--vonal); border-radius: var(--r); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.hir-rovat { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--stamp); }
.hir-cim { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; margin: 0; }
.hir-cim a { text-decoration: none; }
.hir-cim a:hover { text-decoration: underline; }
.hir-meta { font-family: var(--mono); font-size: 11.5px; color: var(--halvany); }
.hir-felvezeto { margin: 0; font-size: 16px; color: var(--szoveg-2); }
.hir-kep { width: 100%; height: auto; border-radius: 2px; display: block; }

.hir-vezeto { grid-column: 1 / -1; }
.hir-vezeto .hir-cim { font-size: clamp(24px, 5vw, 34px); }

/* ---------- Szöveges lapok ---------- */

.cikk { background: var(--felszin); border: 1px solid var(--vonal); border-radius: var(--r); padding: 22px; max-width: 780px; }
.cikk h1 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 6vw, 40px); line-height: 1.08; margin: 6px 0 10px; text-transform: uppercase; }
.cikk h2 { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 21px; margin: 26px 0 8px; padding-top: 14px; border-top: 1px solid var(--vonal); }
.cikk h3 { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 18px 0 6px; }
.cikk .bevezeto { font-size: 19px; font-weight: 600; margin: 0 0 16px; }
.cikk p, .cikk li { color: var(--szoveg-2); }
.cikk p { margin: 0 0 14px; }
.cikk ul, .cikk ol { margin: 0 0 14px; padding-left: 22px; }
.cikk li { margin-bottom: 6px; }
.cikk .cimkek { font-family: var(--mono); font-size: 12px; color: var(--halvany); border-top: 1px dashed var(--vonal); padding-top: 12px; }
.cikk table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15px; }
.cikk table th, .cikk table td { border: 1px solid var(--vonal); padding: 8px 10px; text-align: left; vertical-align: top; }
.cikk table th { font-family: var(--display); text-transform: uppercase; font-size: 13px; letter-spacing: .05em; color: var(--halvany); }
.cikk .kiemelt-box { background: var(--felszin-2); border-left: 3px solid var(--arany); padding: 12px 14px; margin: 0 0 16px; border-radius: 2px; }
.cikk .kiemelt-box p:last-child { margin-bottom: 0; }

/* GYIK harmonika */
.gyik-elem { border: 1px solid var(--vonal); border-radius: var(--r); background: var(--felszin); margin-bottom: 10px; }
.gyik-elem summary {
  cursor: pointer; padding: 13px 16px; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: .01em;
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.gyik-elem summary::-webkit-details-marker { display: none; }
.gyik-elem summary::after { content: "+"; font-family: var(--mono); color: var(--stamp); font-size: 20px; }
.gyik-elem[open] summary::after { content: "–"; }
.gyik-valasz { padding: 0 16px 14px; color: var(--szoveg-2); }
.gyik-valasz p:last-child { margin-bottom: 0; }

/* ---------- Partner (fogadóiroda) lap ---------- */

.partner-fej {
  background: var(--felszin); border: 1px solid var(--vonal); border-radius: var(--r);
  padding: 22px; margin-bottom: 22px;
  display: grid; gap: 18px;
}
@media (min-width: 760px) { .partner-fej { grid-template-columns: 1.4fr 1fr; align-items: center; } }
.partner-nev { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 7vw, 44px); margin: 0 0 6px; line-height: 1; }
.partner-alcim { color: var(--halvany); font-family: var(--mono); font-size: 12.5px; margin: 0 0 14px; }
.bonusz-kartya { background: var(--felszin-2); border: 1px dashed var(--stamp); border-radius: var(--r); padding: 16px; text-align: center; }
.bonusz-cimke { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--halvany); display: block; margin-bottom: 6px; }
.bonusz-ertek { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.1; margin: 0 0 10px; }
.bonusz-kod { font-family: var(--mono); font-size: 20px; letter-spacing: .12em; color: var(--arany); border: 1px solid var(--vonal); border-radius: 2px; padding: 6px 12px; display: inline-block; margin-bottom: 12px; }

.jellemzok { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 0 0 8px; padding: 0; list-style: none; }
@media (min-width: 560px) { .jellemzok { grid-template-columns: 1fr 1fr; } }
.jellemzok li { display: flex; gap: 9px; align-items: flex-start; font-size: 15.5px; color: var(--szoveg-2); }
.jellemzok li::before { content: "✔"; color: var(--turf); font-size: 13px; line-height: 1.5; }

/* ---------- Űrlap ---------- */

.urlap { display: grid; gap: 14px; max-width: 560px; }
.urlap label { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: 15px; display: block; margin-bottom: 4px; }
.urlap input, .urlap textarea {
  width: 100%; font-family: var(--body); font-size: 16px;
  background: var(--hatter); color: var(--szoveg);
  border: 1px solid var(--vonal); border-radius: 2px; padding: 10px 12px;
}
.urlap textarea { min-height: 150px; resize: vertical; }
.urlap .rejtett { position: absolute; left: -9999px; }
.uzenet { border-radius: var(--r); padding: 12px 14px; margin-bottom: 18px; font-size: 15.5px; }
.uzenet.ok { background: rgba(53,192,125,.12); border: 1px solid var(--turf); }
.uzenet.hiba { background: rgba(255,77,109,.12); border: 1px solid var(--stamp); }

/* ---------- Banner ---------- */

.banner { margin: 30px 0; text-align: center; }
.banner-jel { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--halvany); margin-bottom: 5px; }
.banner-kod { overflow: hidden; }
.banner-kod img { max-width: 100%; height: auto; }

/* ---------- Üres állapot ---------- */

.ures { background: var(--felszin); border: 1px dashed var(--vonal); border-radius: var(--r); padding: 26px; text-align: center; color: var(--halvany); }
.ures strong { display: block; color: var(--szoveg); font-family: var(--display); font-size: 20px; text-transform: uppercase; margin-bottom: 6px; }

/* ---------- Lábléc ---------- */

.lab { background: var(--fej); color: #b6c1cd; margin-top: 46px; padding: 30px 0 20px; font-size: 15px; border-top: 1px solid var(--vonal); }
.lab a { color: #fff; }
.lab a:hover { color: var(--arany); }
.lab-racs { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .lab-racs { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.lab-cim { font-family: var(--display); text-transform: uppercase; font-size: 17px; letter-spacing: .07em; color: #fff; margin: 0 0 8px; }
.lab-lista { list-style: none; padding: 0; margin: 0; }
.lab-lista li { margin-bottom: 5px; }
.lab-alj { border-top: 1px solid #263041; margin-top: 24px; padding-top: 14px; font-family: var(--mono); font-size: 11.5px; color: #7d8794; }
.lab-alj strong { color: var(--arany); }

/* ---------- Süti sáv ---------- */

.suti-sav {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
  background: var(--felszin); border: 1px solid var(--vonal); border-radius: var(--r);
  box-shadow: var(--arnyek); padding: 14px 16px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  font-size: 14.5px; max-width: 720px; margin: 0 auto;
}
.suti-sav p { margin: 0; flex: 1 1 260px; color: var(--szoveg-2); }
.suti-sav .gomb { font-size: 14px; padding: 8px 14px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Tipp-jelölés ---------- */

.tipp-jel {
  display: inline-block; align-self: flex-start;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--arany); border: 1px solid var(--arany); border-radius: 999px;
  padding: 2px 8px;
}
.tipp-kulcsszo {
  margin: 0; font-family: var(--mono); font-size: 11.5px; color: var(--halvany);
  border-top: 1px dashed var(--vonal); padding-top: 8px;
}

/* ---------- Mérkőzés-elemzés kártya ---------- */

.elemzesek { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .elemzesek { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .elemzesek { grid-template-columns: 1fr 1fr 1fr; } }

.elemzes {
  background: var(--felszin); border: 1px solid var(--vonal); border-radius: var(--r);
  padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .12s ease, transform .12s ease;
}
.elemzes:hover { border-color: var(--halvany); transform: translateY(-2px); }
.elemzes-fej { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; border-bottom: 1px dashed var(--vonal); padding-bottom: 9px; }
.elemzes-liga { font-family: var(--display); text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: .07em; color: var(--turf); }
.elemzes-merkozes { font-family: var(--display); font-weight: 700; font-size: 23px; line-height: 1.12; margin: 0; }
.elemzes-merkozes a { text-decoration: none; }
.elemzes-merkozes a:hover { text-decoration: underline; }
.elemzes-cim { margin: 0; font-size: 15px; color: var(--szoveg-2); font-style: italic; }
.elemzes-reszlet { margin: 0; font-size: 14.5px; color: var(--halvany); }

.harom-esely { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.esely-cella { background: var(--felszin-2); border: 1px solid var(--vonal); border-radius: 2px; padding: 7px 9px; }
.esely-jel { display: block; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--halvany); }
.esely-ertek { display: block; font-family: var(--mono); font-weight: 600; font-size: 17px; margin: 2px 0 4px; }
.harom-esely.nagy { gap: 12px; margin-bottom: 18px; }
.harom-esely.nagy .esely-ertek { font-size: 24px; }

.elemzes-tippek { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 14.5px; }
.elemzes-tippek dt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--halvany); align-self: center; }
.elemzes-tippek dd { margin: 0; color: var(--szoveg); }

.elemzes-lab { margin-top: auto; display: flex; gap: 8px; }
.elemzes-lab .gomb { flex: 1; font-size: 14px; padding: 8px 10px; }

/* ---------- Banner formák ---------- */

.banner-box .banner-kod { max-width: 300px; margin: 0 auto; }
.banner-sav .banner-kod { max-width: 100%; }

/* A hely előre le van foglalva, hogy a kép betöltésekor ne ugorjon
   el alatta a tartalom. A 970-es szalag mobilon arányosan kicsinyül. */
.banner-kod { display: flex; align-items: center; justify-content: center; }
.banner-kod img { max-width: 100%; height: auto; }
@media (max-width: 700px) {
  .banner-sav .banner-kod { min-height: 0 !important; }
}

/* ---------- Preferred Sources felhívás ---------- */

.preferred-box {
  background: var(--felszin-2); border: 1px solid var(--vonal); border-left: 3px solid var(--arany);
  border-radius: 2px; padding: 14px 16px; margin: 22px 0;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}
.preferred-box p { margin: 0; flex: 1 1 260px; font-size: 15px; color: var(--szoveg-2); }
.preferred-box .gomb { font-size: 14px; padding: 8px 14px; }
.preferred-gombok { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Mobilmenü ---------- */

.menu-gomb {
  display: none;
  background: transparent; color: #fff; border: 1px solid #38424e; border-radius: 2px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 15px;
  padding: 7px 12px; cursor: pointer; align-items: center; gap: 8px;
}
.menu-gomb:hover { border-color: var(--arany); color: var(--arany); }
.menu-vonalak, .menu-vonalak::before, .menu-vonalak::after {
  display: block; width: 16px; height: 2px; background: currentColor; content: "";
}
.menu-vonalak { position: relative; }
.menu-vonalak::before { position: absolute; top: -5px; }
.menu-vonalak::after  { position: absolute; top: 5px; }

@media (max-width: 860px) {
  .fej-belso { align-items: center; }
  .menu-gomb { display: inline-flex; }
  .fej-jobb {
    display: none; width: 100%;
    flex-direction: column; align-items: flex-start; gap: 14px;
    padding: 12px 0 4px; border-top: 1px solid var(--vonal); margin-top: 8px;
  }
  .fej-jobb.nyitva { display: flex; }
  .menu { flex-direction: column; gap: 2px; width: 100%; font-size: 19px; }
  .menu a { display: block; width: 100%; padding: 8px 0; border-bottom: 1px solid var(--vonal); }
  .menu a:hover, .menu a.aktiv { border-bottom-color: var(--arany); }
}

/* ---------- Lejátszott mérkőzések listája ---------- */

.regi-lista { list-style: none; margin: 0; padding: 0; }
.regi-lista li {
  padding: 9px 0; border-bottom: 1px solid var(--vonal);
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
}
.regi-lista li:last-child { border-bottom: 0; }
.regi-lista a { font-weight: 600; }

/* ---------- Nyitóblokk (hero) ---------- */

.nyito {
  display: grid; gap: 22px; grid-template-columns: 1fr;
  margin: 26px 0 30px; padding-bottom: 26px;
  border-bottom: 2px solid var(--szoveg);
}
@media (min-width: 860px) { .nyito { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 34px; } }

.nyito-datum { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--halvany); margin: 0 0 8px; }
.nyito-cim {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(38px, 9vw, 62px); letter-spacing: .01em; line-height: .95; margin: 0 0 12px;
}
.nyito-lead { margin: 0 0 18px; color: var(--szoveg-2); font-size: 17px; max-width: 46ch; }
.nyito-gombok { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }

.nyito-szamok { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.szam-doboz {
  background: var(--felszin); border: 1px solid var(--vonal); border-radius: var(--r);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-height: 92px;
}
.szam-cimke { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--halvany); }
.szam-ertek { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--szoveg); }
.szam-ertek.kicsi { font-family: var(--mono); font-weight: 600; font-size: 26px; }
.szam-alcim { font-size: 12.5px; color: var(--halvany); line-height: 1.3; margin-top: auto; }

/* ==========================================================
   FINOMÍTÁS – modern réteg
   A fenti alapokra épül, nem írja felül a szerkezetet.
   ========================================================== */

/* Halvány fényudvar a háttérben, mint egy stadion reflektora.
   Nem dísz: a nyitóblokkot emeli ki a képernyő tetején. */
body {
  background-image:
    radial-gradient(900px 420px at 78% -8%, rgba(255, 77, 109, .10), transparent 62%),
    radial-gradient(760px 380px at 8% 0%, rgba(53, 192, 125, .07), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
[data-tema="vilagos"] body {
  background-image:
    radial-gradient(900px 420px at 78% -8%, rgba(180, 18, 60, .07), transparent 62%),
    radial-gradient(760px 380px at 8% 0%, rgba(30, 92, 58, .06), transparent 60%);
}

/* --- Fejléc: tapadós, áttetsző --- */

.fej {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--fej) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  transition: padding .18s ease, box-shadow .18s ease;
}
@supports not (backdrop-filter: blur(4px)) { .fej { background: var(--fej); } }
.fej.gorgetve { box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.fej.gorgetve .fej-belso { padding-top: 8px; padding-bottom: 6px; }
.fej.gorgetve .logo { font-size: 24px; }
.fej.gorgetve .korhatar-sav { display: none; }
.logo, .fej-belso { transition: font-size .18s ease, padding .18s ease; }

/* --- Szelvény: valódi perforáció a szaggatott vonal magasságában --- */

.szelveny { position: relative; overflow: hidden; }
.szelveny::before, .szelveny::after {
  content: ""; position: absolute; top: 44px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--hatter); border: 1px solid var(--vonal);
}
.szelveny::before { left: -9px; }
.szelveny::after  { right: -9px; }
.szelveny-fej { padding-right: 4px; }

.szelveny:hover {
  border-color: color-mix(in srgb, var(--stamp) 45%, var(--vonal));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

/* Szorzó-bélyegző: halvány háttértónus, hogy tényleg bélyegzőnek nézzen ki */
.odds-bely {
  background: color-mix(in srgb, var(--stamp) 10%, transparent);
  transition: transform .14s ease;
}
.szelveny:hover .odds-bely { transform: rotate(-1.5deg) scale(1.04); }

/* --- Szekciócímek: jelölősáv a cím előtt --- */

.szekcio-fej { border-bottom-width: 1px; position: relative; }
.szekcio-cim { display: flex; align-items: center; gap: 10px; }
.szekcio-cim::before {
  content: ""; width: 4px; height: 20px; background: var(--stamp);
  display: inline-block; border-radius: 1px;
}
.nap-cim { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }

/* --- Gombok: érezhető, de visszafogott visszajelzés --- */

.gomb { transition: background .14s ease, transform .08s ease, color .14s ease; }
.gomb:active { transform: translateY(1px); }
.gomb.masodlagos { transition: background .14s ease, color .14s ease, border-color .14s ease, transform .08s ease; }

/* --- Szűrőcsipkék --- */

.szuro a { transition: border-color .14s ease, background .14s ease, color .14s ease; }

/* --- Elemzéskártya: kiemelt esélycella --- */

.esely-cella { transition: border-color .14s ease; }
.elemzes:hover .esely-cella { border-color: color-mix(in srgb, var(--halvany) 40%, var(--vonal)); }

/* --- Táblázat: soronkénti kiemelés --- */

table.eselyek tbody tr { transition: background .12s ease; }
table.eselyek tbody tr:hover { background: color-mix(in srgb, var(--szoveg) 4%, transparent); }

/* --- Hírkártya --- */

.hir-kartya { transition: border-color .14s ease, transform .14s ease; }
.hir-kartya:hover { border-color: var(--halvany); transform: translateY(-2px); }
.hir-kep { border-radius: var(--r); }

/* --- Megjelenés görgetéskor --- */

.rejtve { opacity: 0; transform: translateY(14px); }
.megjelenik { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

@media (prefers-reduced-motion: reduce) {
  .rejtve { opacity: 1; transform: none; }
  .fej { position: static; }
}

/* --- Nyitóblokk finomítás --- */

.nyito { border-bottom-width: 1px; }
.szam-doboz { transition: border-color .14s ease; }
.szam-doboz:hover { border-color: var(--halvany); }
.szam-ertek { letter-spacing: -.01em; }

/* --- Kiválasztás színe --- */

::selection { background: var(--stamp); color: #fff; }

/* ---------- Kereső ---------- */

.kereso-urlap { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 26px; max-width: 620px; }
.kereso-urlap input[type="search"] {
  flex: 1 1 240px; font-family: var(--body); font-size: 17px;
  background: var(--felszin); color: var(--szoveg);
  border: 1px solid var(--vonal); border-radius: 2px; padding: 11px 14px;
}
.kereso-urlap input[type="search"]:focus { border-color: var(--stamp); outline: none; }

/* ---------- Szelvényépítő ---------- */

.szelveny-gombok { display: flex; gap: 8px; }
.szelveny-gombok .gomb { flex: 1; font-size: 14px; padding: 9px 10px; }
.gomb.szelvenyre.hozzaadva {
  background: var(--turf); border-color: var(--turf); color: #fff !important;
}

.szelveny-epito { position: fixed; right: 14px; bottom: 14px; z-index: 45; max-width: calc(100vw - 28px); }

.szelveny-ful {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--felszin); color: var(--szoveg);
  border: 1px solid var(--vonal); border-radius: 999px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .07em;
  font-size: 15px; padding: 10px 16px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
}
.szelveny-ful.van { border-color: var(--stamp); }
.szelveny-db {
  background: var(--stamp); color: #fff; border-radius: 999px;
  font-family: var(--mono); font-size: 12px; min-width: 22px; text-align: center;
  padding: 2px 6px; letter-spacing: 0;
}

.szelveny-panel {
  position: absolute; right: 0; bottom: 52px; width: 320px; max-width: calc(100vw - 28px);
  background: var(--felszin); border: 1px solid var(--vonal); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.42); overflow: hidden;
}
.szelveny-panel-fej {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--vonal);
  font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: 17px;
}
.szelveny-panel-fej button { background: none; border: 0; color: var(--halvany); font-size: 22px; line-height: 1; cursor: pointer; }
.szelveny-panel-fej button:hover { color: var(--stamp); }

.szelveny-tetelek { list-style: none; margin: 0; padding: 0; max-height: 42vh; overflow-y: auto; }
.szelveny-tetel {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--vonal); font-size: 14px;
}
.szelveny-tetel-esemeny { display: block; font-size: 11.5px; color: var(--halvany); }
.szelveny-tetel-odds { font-family: var(--mono); color: var(--stamp); }
.szelveny-torol { background: none; border: 0; color: var(--halvany); font-size: 18px; cursor: pointer; line-height: 1; }
.szelveny-torol:hover { color: var(--stamp); }
.szelveny-ures { padding: 16px 14px; color: var(--halvany); font-size: 14px; }

.szelveny-osszeg { padding: 12px 14px 14px; }
.szelveny-sor { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.szelveny-sor strong { font-family: var(--mono); font-size: 17px; }
.szelveny-tet { display: block; font-size: 13px; color: var(--halvany); margin-bottom: 10px; }
.szelveny-tet input {
  width: 100%; margin-top: 4px; font-family: var(--mono); font-size: 15px;
  background: var(--hatter); color: var(--szoveg);
  border: 1px solid var(--vonal); border-radius: 2px; padding: 8px 10px;
}
.szelveny-figyelmeztetes { font-size: 11.5px; color: var(--halvany); line-height: 1.5; margin: 0 0 10px; }

@media (max-width: 520px) {
  .szelveny-epito { right: 10px; bottom: 10px; }
  .szelveny-panel { width: calc(100vw - 20px); }
}

/* ==========================================================
   NAGY KONTRASZT MÓD
   Gyengénlátóknak és erős napfényben. Tiszta fekete alap,
   fehér szöveg, vastagabb keretek, nincs áttetszőség.
   ========================================================== */

[data-tema="kontraszt"] {
  --hatter:    #000000;
  --felszin:   #000000;
  --felszin-2: #101010;
  --szoveg:    #ffffff;
  --szoveg-2:  #ffffff;
  --halvany:   #d8d8d8;
  --vonal:     #ffffff;
  --stamp:     #ff8fa3;
  --stamp-h:   #ffb3c1;
  --turf:      #52e69b;
  --arany:     #ffd633;
  --fej:       #000000;
  --arnyek:    none;
}
[data-tema="kontraszt"] body { background-image: none; }
[data-tema="kontraszt"] .fej { background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-tema="kontraszt"] .szelveny,
[data-tema="kontraszt"] .elemzes,
[data-tema="kontraszt"] .hir-kartya,
[data-tema="kontraszt"] .cikk,
[data-tema="kontraszt"] .szam-doboz,
[data-tema="kontraszt"] .tabla-doboz,
[data-tema="kontraszt"] .szelveny-panel { border-width: 2px; }
[data-tema="kontraszt"] .gomb { border: 2px solid #fff; }
[data-tema="kontraszt"] .gomb.masodlagos { border-color: #fff; }
[data-tema="kontraszt"] a { text-decoration: underline; }
[data-tema="kontraszt"] .menu a { text-decoration: none; }
[data-tema="kontraszt"] .esely-sav,
[data-tema="kontraszt"] .mini-sav { border: 1px solid #fff; }
[data-tema="kontraszt"] .korhatar-sav { color: #fff; }
[data-tema="kontraszt"] .rejtve { opacity: 1; transform: none; }

/* ---------- Nyomtatás ---------- */

@media print {
  .fej, .lab, .banner, .suti-sav, .szelveny-epito, .szuro, .preferred-box, .atlepes { display: none !important; }
  body { background: #fff !important; color: #000 !important; font-size: 12pt; }
  .szelveny, .elemzes, .hir-kartya, .cikk, .tabla-doboz { border: 1px solid #999 !important; break-inside: avoid; }
  .odds-bely { transform: none !important; color: #000 !important; border-color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ---------- Következő mérkőzések csík ---------- */

.csik {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.csik-elem {
  flex: 0 0 auto; scroll-snap-align: start; min-width: 188px; max-width: 240px;
  background: var(--felszin); border: 1px solid var(--vonal); border-radius: var(--r);
  padding: 10px 12px; text-decoration: none;
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color .14s ease, transform .14s ease;
}
.csik-elem:hover { border-color: var(--stamp); transform: translateY(-2px); }
.csik-liga { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--turf); }
.csik-merkozes { font-family: var(--display); font-weight: 600; font-size: 16.5px; line-height: 1.2; color: var(--szoveg); }
.csik-ido { font-size: 11.5px; color: var(--halvany); }

/* ---------- Bajnokság-gyűjtő rács ---------- */

.liga-racs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.liga-doboz {
  background: var(--felszin); border: 1px solid var(--vonal); border-radius: var(--r);
  padding: 12px 14px; text-decoration: none;
  display: flex; flex-direction: column; gap: 4px; min-height: 74px;
  transition: border-color .14s ease, transform .14s ease;
}
.liga-doboz:hover { border-color: var(--stamp); transform: translateY(-2px); }
.liga-nev { font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.15; color: var(--szoveg); }
.liga-db { font-family: var(--mono); font-size: 11.5px; color: var(--halvany); margin-top: auto; }
.liga-db strong { color: var(--stamp); font-weight: 600; }

/* ---------- Hivatalos partner jelzés ---------- */

.partner-sav {
  background: var(--felszin-2); border: 1px solid var(--turf); border-left-width: 3px;
  border-radius: 2px; padding: 10px 13px; margin: 0 0 16px;
  font-size: 14px; color: var(--szoveg-2); line-height: 1.55;
}
.partner-sav strong { color: var(--turf); }

/* ---------- Kötelező 18+ jelölés ---------- */

.korhatar-jel {
  display: inline-block; margin-left: 5px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  vertical-align: 1px; opacity: .95;
}
.korhatar-figyelmeztetes {
  margin: 7px 0 0; font-size: 11px; line-height: 1.45;
  color: var(--halvany); font-family: var(--mono);
}
.cikk .korhatar-figyelmeztetes { font-size: 12px; margin-top: 4px; }
[data-tema="kontraszt"] .korhatar-figyelmeztetes { color: #fff; }

/* ---------- Morzsamenü ---------- */

.morzsa { margin: 22px 0 8px; }
.morzsa ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.morzsa li { font-family: var(--mono); font-size: 11.5px; color: var(--halvany); }
.morzsa li + li::before { content: "›"; margin-right: 6px; color: var(--vonal); }
.morzsa a { color: var(--halvany); text-decoration: none; }
.morzsa a:hover { color: var(--stamp); text-decoration: underline; }

/* ---------- Játékok ---------- */

.jatek-racs { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .jatek-racs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .jatek-racs { grid-template-columns: 1fr 1fr 1fr; } }

.jatek-doboz {
  background: var(--felszin); border: 1px solid var(--vonal); border-radius: var(--r);
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .14s ease, transform .14s ease;
}
.jatek-doboz:hover { border-color: var(--stamp); transform: translateY(-2px); }
.jatek-cim { font-family: var(--display); font-weight: 700; font-size: 24px; margin: 0; line-height: 1.1; text-transform: uppercase; }
.jatek-cim a { text-decoration: none; }
.jatek-rovid { margin: 0; color: var(--szoveg-2); font-size: 15px; }
.jatek-doboz .gomb { margin-top: auto; }

/* A beágyazott játékwidget saját stílussal érkezik – csak keretet adunk neki */
.jatek-keret { margin: 0 0 30px; }
.jatek-keret img, .jatek-keret canvas { max-width: 100%; }

/* A hidden attribútum csak akkor működik, ha erősebb a saját display
   szabályunknál – enélkül a süti sáv az elfogadás után is látszik. */
.suti-sav[hidden] { display: none !important; }

/* ---------- Több banner egy sorban ---------- */

.banner-sor-racs {
  display: grid; gap: 14px; justify-content: center;
  grid-template-columns: 1fr;
}
@media (min-width: 660px)  { .banner-sor-racs { grid-template-columns: repeat(2, max-content); } }
@media (min-width: 1000px) { .banner-sor-racs { grid-template-columns: repeat(3, max-content); } }
.banner-elem { display: flex; justify-content: center; }

/* ---------- Szelvényépítő: fogadási gombok ---------- */

.szelveny-fogadas { display: none; margin: 0 0 10px; }
.szelveny-fogadas-cimke {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--halvany);
  margin-bottom: 6px;
}
.szelveny-fogadas .gomb { display: block; width: 100%; font-size: 14px; padding: 9px 12px; margin-bottom: 6px; }
.szelveny-fogadas .szelveny-figyelmeztetes { margin-top: 4px; }

/* A szelvényfül ne takarja el a süti sávot és fordítva */
.szelveny-epito { z-index: 55; }
.suti-sav { z-index: 50; }
@media (max-width: 700px) {
  .szelveny-epito { bottom: 10px; right: 10px; }
}

.szelveny-fogadas-magyarazat {
  margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--halvany);
}

/* A keretes szalagbannerek ne tapadjanak a tartalomhoz */
main > .banner:first-child { margin: 18px 0 4px; }

/* ---------- Kampány-aloldalak ajánlatdoboza ---------- */

.ajanlat-doboz {
  background: var(--felszin-2); border: 1px dashed var(--stamp); border-radius: var(--r);
  padding: 18px; margin: 0 0 24px; text-align: center;
}
.ajanlat-doboz .bonusz-ertek { font-size: clamp(22px, 5vw, 30px); }
.ajanlat-doboz .korhatar-figyelmeztetes { margin-top: 8px; }

/* ---------- Promóciók ---------- */

.promo-racs { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 660px)  { .promo-racs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .promo-racs { grid-template-columns: 1fr 1fr 1fr; } }

.promo-doboz {
  background: var(--felszin); border: 1px solid var(--vonal); border-radius: var(--r);
  padding: 16px 17px; display: flex; flex-direction: column; gap: 9px;
  transition: border-color .14s ease, transform .14s ease;
}
.promo-doboz:hover { border-color: var(--stamp); transform: translateY(-2px); }
.promo-tipus {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--turf);
}
.promo-nev { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.15; margin: 0; }
.promo-leiras { margin: 0; font-size: 14.5px; color: var(--szoveg-2); }
.promo-doboz .gomb { margin-top: auto; font-size: 14px; padding: 9px 12px; }

/* ---------- Képes logó ---------- */

.logo-kep { display: block; height: 42px; width: auto; }
.fej.gorgetve .logo-kep { height: 30px; }
.logo-kep { transition: height .18s ease; }
@media (max-width: 520px) { .logo-kep { height: 34px; } }

/* ---------- QR-kód blokk ---------- */

.qr-blokk { margin: 14px 0 0; }
.qr-blokk img {
  display: block; margin: 0 auto 8px; width: 200px; height: 200px;
  background: #fff; padding: 8px; border-radius: var(--r);
}
.qr-blokk .apro { margin: 0; }

/* ---------- Közösségi linkek a láblécben ---------- */

.lab-social { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 0; }
.lab-social a { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; }