:root{
  --bg:#0b0d12; --bg2:#12151d; --panel:#171b25; --line:#252b39; --line2:#39415480;
  --txt:#e9edf5; --dim:#8b93a7; --dim2:#5b6377;
  --acc:#ffd166; --acc2:#f7a440;
  --ok:#3ddc97; --bad:#ff5d73; --me:#5eb0ff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:radial-gradient(1200px 700px at 50% -10%,#1b2130 0%,var(--bg) 60%) fixed;
  color:var(--txt);font:15px/1.6 "Segoe UI",system-ui,sans-serif;min-height:100vh;
}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

.fejlec{display:flex;align-items:center;gap:14px;padding:16px 26px;
  border-bottom:1px solid var(--line);background:#0e1117cc;backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:20}
.logo{font-weight:800;letter-spacing:.16em;font-size:19px;
  background:linear-gradient(92deg,var(--acc),var(--acc2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.fejlec .sp{flex:1}
.fejlec nav{display:flex;align-items:center;gap:16px;font-size:14px}
.fejlec nav a{color:var(--dim)}
.fejlec nav a:hover{color:var(--txt);text-decoration:none}

.hamburgergomb{display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:36px;height:36px;border:1px solid var(--line);border-radius:9px;
  background:none;cursor:pointer;flex:none}
.hamburgergomb span{display:block;width:18px;height:2px;background:var(--txt);
  border-radius:2px;transition:.2s}
.hamburgergomb.nyitva span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburgergomb.nyitva span:nth-child(2){opacity:0}
.hamburgergomb.nyitva span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:760px){
  .hamburgergomb{display:flex}
  .fejlec nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:2px;background:#0e1117f5;backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);padding:8px 16px 16px;box-shadow:0 16px 30px -14px #000}
  .fejlec nav.nyitva{display:flex}
  .fejlec nav a{padding:12px 4px;border-bottom:1px solid var(--line2)}
  .fejlec nav .fejav{width:100%;border:0;border-radius:0;padding:12px 4px;border-bottom:1px solid var(--line2)}
  .fejlec nav .fejav span{display:inline}
  .fejlec nav .gomb.kicsi{width:100%;margin-top:6px}
}

.fejav{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;
  border:1px solid var(--line);border-radius:99px;transition:.2s}
.fejav:hover{border-color:var(--line2);background:#ffffff08;text-decoration:none}
.fejav img{width:30px;height:30px;border-radius:50%;object-fit:cover;display:block}
.fejav span{font-size:14px;color:var(--txt);font-weight:600}

.hitelesito{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:11px 20px;font-size:13.5px;color:#ffe0a3;
  background:#f7a4401f;border-bottom:1px solid #f7a44055}
.hitelesito .gomb{width:auto;padding:7px 14px;font-size:12px}

/* a width:100% kell: a lapváz flex-oszlop, ott a margin:0 auto a TARTALOMHOZ
   zsugorítaná a dobozt a rendelkezésre álló szélesség kitöltése helyett */
.tartalom{width:100%;max-width:1100px;margin:0 auto;padding:32px 22px 60px}
.szuk{width:100%;max-width:460px;margin:0 auto;padding:40px 22px 60px}

h1{font-size:26px;margin-bottom:6px;letter-spacing:.02em}
h2{font-size:18px;margin-bottom:14px}
.alcim{color:var(--dim);font-size:14px;margin-bottom:26px}

.doboz{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:26px;box-shadow:0 24px 60px -30px #000}
.doboz + .doboz{margin-top:20px}
.doboz h2{display:flex;align-items:center;gap:9px;padding-bottom:14px;margin-bottom:18px;
  border-bottom:1px solid var(--line)}

/* Kattintásra megjelenő adat (impresszum): a szerver csak kérésre adja ki. */
.adatgomb{padding:3px 12px;border-radius:99px;border:1px solid var(--line2);
  background:transparent;color:var(--acc);font-size:13px;font-weight:600;transition:.15s}
.adatgomb:hover:not(:disabled){border-color:var(--acc);background:#ffd1660f}
.adatgomb:disabled{opacity:.5;cursor:default}

/* Spamvédett e-mail cím: a HTML-ben visszafelé áll, ez forgatja olvashatóra.
   A kijelölés-másolás így a fordított szöveget adná, ezért a kijelölést tiltjuk. */
.emailvedett{unicode-bidi:bidi-override;direction:rtl;-webkit-user-select:none;user-select:none}

/* Összecsukható szakasz (játékszabály). A natív <details>/<summary> elemre épül:
   nem kell hozzá JavaScript, és billentyűzettel is nyitható. */
.szakasz{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 24px 60px -30px #000;overflow:hidden}
.szakasz + .szakasz{margin-top:14px}
.szakasz > summary{display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:18px 26px;font-size:19px;font-weight:700;list-style:none;
  transition:background .15s,color .15s}
.szakasz > summary::-webkit-details-marker{display:none}   /* a saját nyilunkat használjuk */
.szakasz > summary::after{content:'';margin-left:auto;width:9px;height:9px;flex:none;
  border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s,border-color .15s}
.szakasz > summary:hover{background:#ffffff08;color:var(--acc)}
.szakasz > summary:hover::after{border-color:var(--acc)}
.szakasz > summary:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.szakasz[open] > summary{border-bottom:1px solid var(--line)}
.szakasz[open] > summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
/* A burkot a szabaly.php szkriptje teszi a tartalom köré: a <details> magától
   nem animálható, mert csukott állapotban egyszerűen elrejti a tartalmát. */
.szakaszburok{overflow:hidden;transition:height .3s cubic-bezier(.4,0,.2,1)}
.szakaszbelso{padding:20px 26px 24px}
.szakaszbelso > p{margin-bottom:12px}
.szakaszbelso > p:last-child{margin-bottom:0}
.szakaszbelso ul,.szakaszbelso ol{color:var(--dim);padding-left:20px;line-height:1.9;margin:10px 0 12px}
.gyikkerdes{font-weight:700;color:var(--txt);margin-bottom:4px !important}
.gyikkerdes:not(:first-child){margin-top:18px !important}
.gyikvalasz{color:var(--dim)}

.mezo{margin-bottom:17px}
.mezo label{display:block;font-size:12.5px;color:var(--dim);margin-bottom:6px;font-weight:600}
.mezo input[type=text],.mezo input[type=email],.mezo input[type=password],
.mezo input[type=file],.mezo input[type=number]{
  width:100%;padding:11px 13px;border-radius:10px;font:inherit;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt);transition:.18s}
.mezo input[type=number].rovid{max-width:170px}
.mezo input[type=number]::-webkit-outer-spin-button,
.mezo input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mezo input[type=number]{-moz-appearance:textfield;appearance:textfield}
.mezo textarea{width:100%;padding:11px 13px;border-radius:10px;font:inherit;resize:vertical;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt);transition:.18s}
.mezo input:focus,.mezo textarea:focus{outline:0;border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(255,209,102,.13)}
.mezo input:disabled{color:var(--dim);background:#0e1117;cursor:not-allowed}
.mezo .sugo{font-size:11.5px;color:var(--dim2);margin-top:5px}

.gomb{display:block;width:100%;padding:12px;border-radius:11px;font-weight:800;letter-spacing:.04em;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#20160a;
  box-shadow:0 12px 30px -12px rgba(255,209,102,.65);transition:.18s;text-align:center}
.gomb:hover{transform:translateY(-2px);text-decoration:none}
.gomb.masodlagos{background:#12151dcc;border:1px solid var(--line2);color:var(--txt);
  box-shadow:0 10px 26px -14px #000;backdrop-filter:blur(4px)}
.gomb.masodlagos:hover{background:#1b2030ee;border-color:var(--acc);color:var(--txt)}
.gomb.veszely{background:none;border:1px solid #ff5d7355;color:var(--bad);box-shadow:none}
.gomb.veszely:hover{background:#ff5d731a}
.gomb.kicsi{display:inline-block;width:auto;padding:9px 18px;font-size:13px}
.gomb[hidden]{display:none}

.alalink{text-align:center;margin-top:18px;font-size:13.5px;color:var(--dim)}

.uzenet{padding:11px 15px;border-radius:10px;margin-bottom:16px;font-size:14px;
  border:1px solid;animation:be .3s}
.uzenet.siker{background:#3ddc971a;border-color:#3ddc9755;color:#8ff0c4}
.uzenet.hiba {background:#ff5d731a;border-color:#ff5d7355;color:#ffb3bd}
.uzenet.info {background:#5eb0ff1a;border-color:#5eb0ff55;color:#b3d9ff}
@keyframes be{from{opacity:0;transform:translateY(-6px)}}

.avsor{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.avkep{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--line);background:var(--bg2)}
.avsor .jobb{flex:1;min-width:210px}

.profilsav{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:18px 22px}
.profilsav .profilfej{margin:0;flex:1;min-width:250px}
.profilsav .stat{flex:2;min-width:320px}
.profilsav .csempe{padding:12px 16px}
.profilsav .csempe .ertek{font-size:26px}

.profilracs{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:16px}
.profilracs .doboz{margin:0;padding:20px 22px}
.profilracs .doboz h2{padding-bottom:12px;margin-bottom:14px}
.profilracs .mezo{margin-bottom:13px}

.profilracs .oszlop{display:flex;flex-direction:column;gap:16px}

.veszelydoboz{background:var(--panel);border:1px solid var(--line);
  border-radius:18px;overflow:hidden}
.veszelydoboz summary{list-style:none;cursor:pointer;padding:13px 22px;font-weight:600;
  font-size:15px;color:var(--dim);display:flex;align-items:center;gap:8px}
.veszelydoboz summary::-webkit-details-marker{display:none}
.veszelydoboz summary::after{content:'▾';margin-left:auto;color:var(--dim2)}
.veszelydoboz[open] summary{color:var(--bad);border-bottom:1px solid var(--line)}
.veszelydoboz[open] summary::after{content:'▴'}
.veszelydoboz summary:hover{color:var(--txt)}
.veszelydoboz .belso{padding:18px 22px 22px}

@media(max-width:860px){
  .profilracs{grid-template-columns:1fr}
  .profilsav{gap:18px}
}

.profilfej{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.profilfej .nev{font-size:22px;font-weight:800}
.profilfej .em{color:var(--dim);font-size:14px}
.profilfej .cimke{display:inline-block;margin-top:5px;font-size:11px;padding:2px 9px;border-radius:99px;
  border:1px solid var(--line);color:var(--dim2)}

.stat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.csempe{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:16px 18px}
.csempe .ertek{font-size:32px;font-weight:800;line-height:1.15;letter-spacing:-.01em}
.csempe .felirat{font-size:12px;color:var(--dim);margin-top:2px}
.csempe .melle{font-size:12px;color:var(--dim2);margin-top:1px}
.csempe.j .ertek{color:var(--acc)}
.csempe.ny .ertek{color:var(--ok)}
.csempe.ar .ertek{color:var(--me)}

.mero{height:5px;border-radius:99px;background:var(--line);margin-top:10px;overflow:hidden}
.mero i{display:block;height:100%;border-radius:99px;background:var(--me)}

.jelvenyracs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.jkartya{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 14px;
  text-align:center;opacity:.45;filter:grayscale(.7);transition:.2s}
.jkartya.megvan{opacity:1;filter:none;border-color:var(--jszin,var(--acc));
  background:linear-gradient(160deg,color-mix(in srgb,var(--jszin,var(--acc)) 18%,var(--bg2)),var(--bg2));
  box-shadow:0 0 0 1px var(--jszin,var(--acc)) inset}
.jikonnagy{font-size:34px;margin-bottom:6px;line-height:1}
.jcim{font-weight:800;font-size:14px}
.jlemez{font-size:11px;font-weight:700;margin-top:2px;color:var(--jszin2,var(--acc));letter-spacing:.03em}
.jleiras{font-size:11.5px;color:var(--dim);margin-top:6px;line-height:1.5}
.jkovetkezo{font-size:10.5px;color:var(--dim2);margin-top:8px;border-top:1px solid var(--line);padding-top:7px}

.ures{color:var(--dim);font-size:13.5px;text-align:center;padding:6px 0 2px}

@media(max-width:520px){
  .stat{grid-template-columns:1fr;gap:10px}
  .csempe{display:flex;align-items:baseline;gap:10px;padding:12px 15px}
  .csempe .ertek{font-size:24px}
  .mero{display:none}
}

.hero{text-align:center;padding:50px 0 40px}
.hero p{color:var(--dim);max-width:760px;margin:12px auto 30px;font-size:30px;line-height:1.4}
.hero .gombok{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero .gombok .gomb{width:auto;padding:13px 30px}
.hero .gombok .gomb.fojatek{padding:17px 52px;font-size:16px;border-radius:13px}

.adminlink{position:relative}
.ertesito{position:absolute;top:-9px;right:-14px;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;background:#e5484d;color:#fff;font-size:10.5px;font-weight:800;
  line-height:17px;text-align:center}

.nyelvurlap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nyelvurlap label{color:var(--dim);font-size:14px}
.nyelvurlap select{padding:9px 12px;min-width:210px}

.sutisav{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:500;
  width:min(720px,94vw);background:#12151def;border:1px solid var(--line2);border-radius:16px;
  box-shadow:0 24px 60px -20px #000;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:16px 18px;animation:sutibe .4s}
@keyframes sutibe{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
.sutifo{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sutiszoveg{flex:1;min-width:220px}
.sutiszoveg b{display:block;font-size:15px;margin-bottom:3px}
.sutiszoveg span{font-size:12.5px;color:var(--dim);line-height:1.5}
.sutigombok{display:flex;gap:8px;flex:none}
.sutisor{display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:9px 2px;border-top:1px solid var(--line)}
.sutisor span{font-size:12px;color:var(--dim);line-height:1.45}
.sutisor b{color:var(--txt);font-size:13px}
.sutisor input{width:18px;height:18px;flex:none;accent-color:var(--acc)}
.sutireszlet .sutigombok{margin-top:10px;justify-content:flex-end}
@media(max-width:560px){.sutigombok{width:100%}.sutigombok .gomb{flex:1}}

.racs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:36px}
.racs .doboz{padding:20px}
.racs h3{font-size:15px;margin-bottom:6px}
.racs p{font-size:13.5px;color:var(--dim)}

@media(max-width:600px){
  .fejlec{padding:12px 16px}
  .fejlec nav{gap:10px;font-size:13px}
  .fejav span{display:none}
  .tartalom,.szuk{padding:24px 16px 50px}
  .hero p{font-size:22px}
}

.kollazs{position:fixed;inset:0;overflow:hidden;z-index:-2;background:#07090d}
.kollazs img{position:absolute;border-radius:6px;box-shadow:0 30px 60px -18px #000;
  filter:saturate(.62) brightness(.72) blur(1.1px)}
.fatyol{position:fixed;inset:0;z-index:-1;
  background:radial-gradient(115% 85% at 50% 42%,#0b0d12b3 0%,#0b0d12f2 52%,#0b0d12 100%)}

/* dvh, mert a vh nem számolja bele a mobilböngészők eltűnő címsorát.
   A lap görgethető: a demo az első képernyő, alatta jön az ismertető. A demo
   szándékosan valamivel alacsonyabb egy nézetnél, hogy az alatta következő
   szakasz teteje kilátsszon - ez mutatja, hogy van még lejjebb tartalom. */
body.demolap{min-height:100dvh;display:flex;flex-direction:column}
body.demolap .lablec{margin-top:0;padding:12px 22px;flex:none}

.demo{flex:none;height:calc(100dvh - 44px);width:100%;max-width:1300px;margin:0 auto;
  padding:14px 20px 0;display:flex;flex-direction:column;align-items:center;position:relative}

.demofelso{align-self:stretch;display:flex;align-items:center;justify-content:flex-end;
  gap:14px;flex:none;margin-bottom:2px}
.demofelso a{color:var(--txt);font-size:14px;text-shadow:0 2px 10px #000}
.demofelso .gomb{width:auto;padding:8px 16px;font-size:12.5px}

.demofej{text-align:center;flex:none}
/* a h1 két részből áll: nagy márkanév + a mottó alcímként (lásd index.php) */
.demofej h1{margin:0;font-weight:400}
.demofej .cim{display:block;font-size:clamp(28px,5vh,44px);font-weight:800;letter-spacing:.15em;
  background:linear-gradient(92deg,var(--acc),var(--acc2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 24px #000)}
.demofej .alcim{display:block;color:var(--txt);opacity:.9;margin-top:6px;
  font-size:clamp(12.5px,1.7vh,15.5px);letter-spacing:normal;text-shadow:0 2px 14px #000}

/* a padding-bottom helyet tart a súgónak (nyíl + évbuborék), ami az idővonal fölé nyúlik */
#kartyahely{flex:1;min-height:0;display:grid;place-items:center;padding:8px 0 52px}

.minta{position:absolute;bottom:26px;transform:translateX(-50%);z-index:4;
  pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:5px}

.minta .mnyil{display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--acc);
  animation:le 1.5s ease-in-out infinite}
.minta .mnyil svg{width:26px;height:26px;filter:drop-shadow(0 4px 10px #000)}

.minta.indit{bottom:auto;top:-64px}
.minta .mnyil.fel{animation:fel 1.5s ease-in-out infinite}
@keyframes fel{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.minta .mszoveg{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;text-shadow:0 2px 10px #000}
@keyframes le{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

.minta .mbub{display:flex;flex-direction:column;align-items:center;
  animation:lelegzik 2.2s ease-in-out infinite}
.minta .mbub .sz{background:#ffd16626;border:1px solid var(--acc);color:var(--acc);
  font-weight:800;font-size:19px;padding:3px 11px;border-radius:8px;
  font-variant-numeric:tabular-nums;backdrop-filter:blur(2px)}
.minta .mbub .tu{width:2px;height:14px;background:var(--acc);opacity:.6}

.minta .mkartya{width:40px;height:52px;border-radius:6px;
  border:2px dashed var(--acc);background:#ffd16618;
  animation:lelegzik 2.2s ease-in-out infinite}
@keyframes lelegzik{0%,100%{opacity:.5}50%{opacity:1}}

.ivdoboz{width:100%;padding:0 8px 10px;flex:none;
  background:linear-gradient(180deg,transparent,#080a0ecc 45%,#080a0ee6)}
.ivonal{position:relative;height:clamp(88px,14vh,120px)}
.ivonal .tengely{position:absolute;left:0;right:0;bottom:28px;height:3px;border-radius:99px;
  background:linear-gradient(90deg,transparent,#cfd6e4 7%,#cfd6e4 93%,transparent);
  box-shadow:0 0 20px rgba(207,214,228,.35)}
.ivonal.cel .tengely{background:linear-gradient(90deg,transparent,var(--acc) 7%,var(--acc) 93%,transparent);
  box-shadow:0 0 26px rgba(255,209,102,.5)}

.ivonal .tick{position:absolute;bottom:30px;width:1px;background:#727b90;
  transform:translateX(-50%);transition:height .08s linear}
.ivonal .tick.ev5{background:#8b93a7}
.ivonal .tick.evtiz{width:2px;background:var(--txt)}
.ivonal .tick.kozel{background:var(--acc)}
.ivonal .evlabel{position:absolute;bottom:5px;transform:translateX(-50%);
  font-size:12.5px;font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums;
  text-shadow:0 2px 8px #000}
.ivonal .evlabel.kicsi{font-size:10.5px;font-weight:400;color:var(--acc)}

.evbub{position:absolute;bottom:64px;transform:translateX(-50%);z-index:5;pointer-events:none}
.evbub .sz{background:var(--acc);color:#20160a;font-weight:800;font-size:22px;
  padding:5px 14px;border-radius:9px;box-shadow:0 12px 30px -10px #000;
  font-variant-numeric:tabular-nums}
.evbub .tu{width:2px;height:26px;margin:0 auto;background:var(--acc)}

.dfej{text-align:center;margin-bottom:18px}
.dfej .dcim{font-size:23px;font-weight:800;line-height:1.25}
.dfej.jo .dcim{color:var(--ok)}
.dfej.kozel .dcim{color:var(--acc)}
.devsor{display:flex;justify-content:center;gap:22px;margin-top:10px;font-size:13.5px;color:var(--dim)}
.devsor b{font-size:19px;color:var(--txt);font-variant-numeric:tabular-nums}

.ddal{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--line)}
.ddal img{width:58px;height:58px;border-radius:8px;object-fit:cover;flex:none;background:#000}
.ddal .dc{font-weight:700}
.ddal .de{color:var(--dim);font-size:13.5px}

.dszoveg{color:var(--dim);font-size:14px;margin:16px 0}
.dgombok{display:flex;gap:10px}
.dgombok .gomb{flex:1;padding:13px}
.dujra{display:block;width:100%;margin-top:14px;padding:8px;font-size:13px;color:var(--dim2);
  text-align:center}
.dujra:hover{color:var(--txt)}
.dujra span{color:var(--dim2);opacity:.8}
.dujra.nincs{color:var(--dim2);cursor:default}

@media(max-width:600px){
  .demo{padding:10px 12px 0}
  .demofelso{gap:10px}
  .dgombok{flex-direction:column}
  .minta .mszoveg{font-size:11px}
}

@media(max-height:560px){
  .demofej .alcim{display:none}
  .minta .mnyil svg{width:20px;height:20px}
  .minta .mszoveg{display:none}
  .minta .mkartya{width:30px;height:38px}
  .minta .mbub .sz{font-size:16px;padding:2px 9px}
  #kartyahely{padding:4px 0 40px}
}

.lablec{margin-top:40px;padding:22px;border-top:1px solid var(--line);
  display:flex;gap:20px;justify-content:center;flex-wrap:wrap;
  font-size:13px;color:var(--dim2);background:#0b0d12cc}
.lablec a{color:var(--dim)}
.lablec a:hover{color:var(--acc)}
.fblink{display:inline-flex;align-items:center;gap:5px}
.nyelvvalto{display:inline-flex;gap:6px}
.nyelvvalto a{font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:2px 7px;
  border:1px solid var(--line);border-radius:99px}
.nyelvvalto a.most{border-color:var(--acc);color:var(--acc)}

.varakozas{color:var(--dim);font-size:13.5px;padding:12px 0}

.talalat{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:11px;
  border:1px solid var(--line);background:var(--bg2);margin-bottom:8px}
.talalat img,.talalat .nincskep{width:46px;height:46px;border-radius:7px;flex:none;object-fit:cover;background:#000}
.talalat .szoveg{flex:1;min-width:0}
.talalat .cim{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.talalat .elo{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.talalat .album{color:var(--dim2)}
.talalat.bent{opacity:.55}
.bentcimke{font-size:11.5px;color:var(--dim2);border:1px solid var(--line);padding:4px 10px;border-radius:99px}

.gepi{font-size:10px;color:var(--dim2);border:1px solid var(--line);border-radius:99px;
  padding:1px 6px;margin-left:6px;vertical-align:middle;cursor:help}

.minicel{width:74px;padding:6px 8px;border-radius:8px;font:inherit;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt)}
.minicel::-webkit-outer-spin-button,.minicel::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.minicel{-moz-appearance:textfield;appearance:textfield}

.ikongomb.zar{cursor:help;border-color:transparent;opacity:.65}
.ikongomb.zar:hover{border-color:transparent;color:inherit}

.talalat.ismert{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.keszcimke{font-size:11.5px;color:var(--ok);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.talalat.kizart{opacity:.6}
.tiltcimke{font-size:11.5px;color:var(--bad);margin-top:2px}
.ltalalat .lev.kesz{color:var(--ok)}

.elemzodoboz{margin-top:18px;padding:18px;border-radius:14px;
  background:var(--bg2);border:1px solid var(--line2)}
.elemzodoboz .fejlecsor{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.elemzodoboz .fejlecsor img{width:56px;height:56px;border-radius:8px;object-fit:cover}
.elemzodoboz .cim{font-weight:700;font-size:16px}
.elemzodoboz .elo{color:var(--dim);font-size:14px}
.elemzodoboz .album{color:var(--dim2);font-size:11.5px}

.forrasok{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.forras{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 14px;text-align:center}
.forras .fnev{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.forras .fev{font-size:27px;font-weight:800;margin:2px 0;color:var(--txt)}
.forras .fmegj{font-size:10.5px;color:var(--dim2)}
.forras.egyezik{border-color:var(--acc);background:rgba(255,209,102,.09)}
.forras.egyezik .fev{color:var(--acc)}
.forras.nincs .fev{color:var(--dim2)}
.forras.betolt{cursor:default}
.forras.betolt .fev{color:var(--dim2);animation:lelegzik 2.2s ease-in-out infinite}
.aitelet-vazlat{animation:lelegzik 2.2s ease-in-out infinite}

.urlapsor{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.urlapsor label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--dim);flex:1;min-width:130px}
.urlapsor input[type=text],.urlapsor input[type=number]{
  padding:9px 11px;border-radius:9px;font:inherit;background:var(--panel);
  border:1px solid var(--line);color:var(--txt)}
.urlapsor input:focus{outline:0;border-color:var(--acc)}
.urlapsor label.nagyev{max-width:150px}
.urlapsor label.nagyev input{font-size:22px;font-weight:800;color:var(--acc);text-align:center}
/* előregisztrációs űrlap: szakaszcím és igen/nem választósor */
.urlapszakasz{font-size:14px;font-weight:700;color:var(--dim);margin:26px 0 14px;
  padding-top:18px;border-top:1px solid var(--line)}
.valaszsor{display:flex;gap:22px;align-items:center;padding-top:4px}
.valaszsor label.jelolo{display:flex;flex-direction:row;align-items:center;gap:7px;
  color:var(--txt);font-size:14px;cursor:pointer}
.urlapsor label.jelolo{flex-direction:row;align-items:center;gap:7px;flex:none;color:var(--txt);font-size:13.5px}
.urlapsor button{flex:none}

.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--dim2);font-weight:600;padding:0 10px 9px;border-bottom:1px solid var(--line)}
.tabla td{padding:9px 10px;border-bottom:1px solid #1c2130}
.tabla tr:hover td{background:#ffffff05}
.tabla .ev{font-weight:800;color:var(--acc);font-size:15px}
.tabla .fdolg{font-size:11px;color:var(--steal,#c084fc);font-style:italic}
.tabla .jobbra{text-align:right;white-space:nowrap}
.tabla .szerkeszto td{background:#0e1117;padding:14px 12px}
.tabla .jelolooszlop{width:34px;padding-right:0}
.tabla tr.kijelolve td{background:#5eb0ff14}

/* a tömeges műveletek sávja: mindig kint van, kijelölésre kiemelődik */
.tomegsav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;
  padding:10px 14px;border:1px solid var(--line);border-radius:11px;
  font-size:13.5px;font-weight:600;transition:.15s}
.tomegsav.aktiv{border-color:var(--acc);background:#5eb0ff0d}
.tomegsav .jelolo{display:flex;align-items:center;gap:7px;color:var(--dim);font-weight:500}
.tomegsav .gomb{width:auto;padding:8px 14px;font-size:12.5px;flex:none}
.tomegsav .gomb:disabled{opacity:.45;cursor:default}
.tomegsav #tomegszam{flex:1;min-width:80px}

.ikongomb{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
  color:var(--dim);font-size:12px;transition:.15s}
.ikongomb:hover{border-color:var(--acc);color:var(--acc)}
.ikongomb.torol:hover{border-color:var(--bad);color:var(--bad)}
.ikongomb.nagy{width:40px;height:40px;font-size:15px}

@media(max-width:700px){
  .forrasok{grid-template-columns:repeat(2,1fr)}
  .tabla thead{display:none}
  .urlapsor label{min-width:110px}
}

.stat.negy{grid-template-columns:repeat(5,1fr)}
.csempe.fig .ertek{color:var(--acc2)}
.uzenet.sav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.uzenet.sav .gomb{width:auto;padding:10px 18px;font-size:13px;flex:none}
.tabla tr.varakozik td{background:#f7a4400d}
.tabla tr.varakozik .ev{color:var(--acc2)}
.figy{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
  background:var(--acc2);color:#20160a;font-size:11px;font-weight:800;margin-left:5px;vertical-align:1px}

dialog#ablak{
  width:min(640px,calc(100vw - 28px));padding:0;border:1px solid var(--line2);border-radius:18px;
  background:var(--panel);color:var(--txt);box-shadow:0 40px 90px -30px #000;
  margin:auto;
  max-height:calc(100vh - 40px);overflow-y:auto;
}
dialog#ablak::backdrop{background:#05070bcc;backdrop-filter:blur(3px)}
#ablaktartalom{padding:22px}

.afej{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.afej img{width:58px;height:58px;border-radius:9px;object-fit:cover;flex:none;background:#000}
.afej .acim{flex:1;min-width:0}
.afej .cim{font-weight:700;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.afej .elo{color:var(--dim);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.afej .sorcimke{font-size:11px;color:var(--acc2);border:1px solid #f7a44055;background:#f7a4401a;
  padding:4px 10px;border-radius:99px;flex:none;white-space:nowrap}

#aforrasok{margin-bottom:14px;min-height:86px}
#aforrasok .forras{cursor:pointer;transition:.15s;width:100%}
#aforrasok .forras:hover:not(:disabled){border-color:var(--acc);transform:translateY(-1px)}
#aforrasok .forras:disabled{cursor:default;opacity:.6}

#ablak .nagyev{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--dim);
  max-width:170px;margin-bottom:14px}
#ablak .nagyev input{padding:9px 11px;border-radius:9px;font:inherit;background:var(--bg2);
  border:1px solid var(--line);font-size:24px;font-weight:800;color:var(--acc);text-align:center}
#ablak .nagyev input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px rgba(255,209,102,.13)}
#ablak .uzenet{margin-bottom:14px}
#ablak .uzenet a{margin-left:6px}

.alab{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.alab .gomb{width:auto;padding:11px 22px;flex:none}
.alab #ahiba{flex:1;min-width:0}
.alab #ahiba .uzenet{margin:0}

.listasor{display:flex;gap:10px;margin-bottom:6px}
.listasor input{flex:1;min-width:0;padding:11px 13px;border-radius:10px;font:inherit;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt)}
.listasor input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px rgba(255,209,102,.13)}
.listasor .gomb{width:auto;padding:11px 22px;flex:none}

.fazisok{margin:14px 0 4px;padding:14px 16px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--line)}
.fazis{display:flex;align-items:center;gap:14px;padding:7px 0}
.fazis .fcim{width:190px;flex:none;line-height:1.25}
.fazis .fcim b{display:block;font-size:13.5px;color:var(--dim2);font-weight:700}
.fazis .fcim span{font-size:11px;color:var(--dim2)}
.fazis .fszam{width:110px;flex:none;text-align:right;font-size:12.5px;color:var(--dim2);
  font-variant-numeric:tabular-nums}

.fsav{flex:1;height:7px;border-radius:99px;background:var(--line);overflow:hidden;position:relative}
.fsav i{display:block;height:100%;width:0;border-radius:99px;background:var(--line2);
  transition:width .25s ease}

.fazis.fut .fcim b{color:var(--txt)}
.fazis.fut .fcim span{color:var(--dim)}
.fazis.fut .fszam{color:var(--acc);font-weight:700}
.fazis.fut .fsav i{background:linear-gradient(90deg,var(--acc2),var(--acc))}

.fsav.hatarozatlan i{background:linear-gradient(90deg,transparent,var(--acc),transparent);
  animation:hullam 1.1s linear infinite}
@keyframes hullam{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.fazis.kesz .fcim b{color:var(--dim)}
.fazis.kesz .fszam{color:var(--ok)}
.fazis.kesz .fsav i{background:var(--ok)}
.fazis.hiba .fszam{color:var(--bad)}
.fazis.hiba .fsav i{background:var(--bad)}

.freszlet{font-size:11.5px;color:var(--dim2);margin-top:8px;padding-top:8px;
  border-top:1px solid var(--line);min-height:17px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lsor.ment{background:#ffd1660d}
.lkesz{font-size:12.5px;color:var(--ok);font-weight:600}

@media(max-width:700px){
  .fazis{flex-wrap:wrap;gap:6px}
  .fazis .fcim{width:auto;flex:1}
  .fazis .fszam{width:auto}
  .fsav{order:3;flex-basis:100%}
}

.listafej{display:flex;align-items:center;gap:12px;margin:14px 0 10px;
  font-size:12.5px;color:var(--dim);font-weight:600}
.listafej .gomb{width:auto;padding:9px 18px;font-size:13px}
.listafej .gomb:disabled{opacity:.45;box-shadow:none;transform:none;cursor:default}

.listasorok{max-height:420px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;
  background:var(--bg2);padding:6px}
.lsor{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;
  border-bottom:1px solid #1c2130}
.lsor:last-child{border-bottom:0}
.lsor.fut{background:#ffffff05}
.lsor .jel{width:17px;height:17px;flex:none;accent-color:var(--acc)}
.lsor .jel:disabled{opacity:.3}
.lforras{flex:1;min-width:0}
.lforras .ln{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lforras .lnyers{font-size:11px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ljobb{width:46%;min-width:0;text-align:right}

.ltalalat .lt{font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ltalalat .lm{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:2px}
.ltalalat .lev{font-weight:800;color:var(--acc);font-size:14px}
.ltalalat .lpont{font-size:11px;color:var(--dim2)}
.ltalalat.bizonytalan .lt{color:var(--acc2)}
.ltalalat.bizonytalan .lpont{color:var(--acc2)}
.lcsere{font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:2px 9px}
.lcsere:hover{border-color:var(--acc);color:var(--acc)}
.lvar{font-size:12px;color:var(--dim2)}
.lnincs{font-size:12px;color:var(--bad)}
.lbent{font-size:11.5px;color:var(--dim2);border:1px solid var(--line);padding:3px 9px;border-radius:99px}

.laltok{display:flex;flex-direction:column;gap:4px;padding:4px 10px 10px 40px}
.laltok .csere{text-align:left;font-size:12.5px;color:var(--dim);padding:7px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel)}
.laltok .csere:hover{border-color:var(--acc);color:var(--txt)}
.laltok .lalbum{color:var(--dim2);font-size:11px}

@media(max-width:700px){
  .listasor{flex-direction:column}
  .listasor .gomb{width:100%}
  .lsor{flex-wrap:wrap}
  .ljobb{width:auto;flex:1;text-align:left}
  .ltalalat .lm{justify-content:flex-start}
}

.morzsa{font-size:13px;margin-bottom:10px}
.morzsa a{color:var(--dim)}
.morzsa a:hover{color:var(--txt);text-decoration:none}

.pakliracs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:20px}
.paklikartya{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:18px;
  display:flex;flex-direction:column;gap:12px;transition:.2s}
.paklikartya:hover{border-color:var(--line2);transform:translateY(-2px)}
.paklikartya .fej{display:flex;align-items:center;gap:8px}
.paklikartya .nev{font-weight:700;font-size:16.5px;color:var(--txt);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paklikartya .nev:hover{color:var(--acc);text-decoration:none}
.paklikartya .jel{font-size:10px;color:var(--dim2);border:1px solid var(--line);
  padding:2px 8px;border-radius:99px;flex:none}
.paklikartya .adatok{display:flex;gap:12px;font-size:13px;color:var(--dim)}
.paklikartya .adatok b{color:var(--acc)}
.paklikartya .muveletek{display:flex;gap:8px;align-items:center;margin-top:auto}
.paklikartya .muveletek .gomb{flex:1}

.menu{position:relative;flex:none}
.menu summary{list-style:none;cursor:pointer;display:grid;place-items:center}
.menu summary::-webkit-details-marker{display:none}
.menutartalom{position:absolute;right:0;top:36px;z-index:30;width:230px;
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:12px;
  box-shadow:0 20px 50px -18px #000;display:flex;flex-direction:column;gap:10px}
.menutartalom .atnevezo{display:flex;gap:6px}
.menutartalom input[type=text]{flex:1;min-width:0;padding:7px 9px;border-radius:8px;font:inherit;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt)}
.menutartalom input:focus{outline:0;border-color:var(--acc)}

.szobasor{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid #1c2130}
.szobasor:last-child{border-bottom:0}
.szobasor .bal{flex:1;min-width:0}
.szobasor .nev{font-weight:700;font-size:15.5px;color:var(--txt)}
.szobasor .nev:hover{color:var(--acc);text-decoration:none}
.szobasor .reszlet{font-size:12.5px;color:var(--dim);margin-top:2px}
.szobasor .kod{font-family:ui-monospace,monospace;letter-spacing:.14em;color:var(--acc);
  background:#ffd16614;padding:1px 7px;border-radius:5px;margin-right:6px}

.mezo select,.urlapsor select{width:100%;padding:9px 11px;border-radius:9px;font:inherit;
  background:var(--panel);border:1px solid var(--line);color:var(--txt)}
.urlapsor select:focus{outline:0;border-color:var(--acc)}

.szobalab{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.szobalab .gomb{width:auto}
.szobasor form{flex:none}

.lobbiracs{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.letszamjel{font-size:13px;color:var(--dim);font-weight:600}

.lobbisor{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;
  background:var(--bg2);border:1px solid var(--line);margin-bottom:8px;animation:be .3s}
.lobbisor.en{border-color:var(--me)}
.lobbisor .av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:800;font-size:15px;color:#12151d}
.lobbisor .szoveg{flex:1;min-width:0}
.lobbisor .nev{font-weight:700;font-size:14.5px}
.lobbisor .te{font-size:10px;color:var(--me);border:1px solid var(--me);padding:1px 6px;
  border-radius:99px;margin-left:4px;font-weight:600}
.lobbisor .alsor{font-size:12px;color:var(--dim)}

.jelenlet{display:flex;align-items:center;gap:9px;font-size:16px;color:var(--dim);
  margin:-2px 0 14px}
.jelenlet b{color:var(--acc);font-size:19px;font-weight:800}
.jelenlet.kozepre{justify-content:center;margin:10px 0 0}
.doboz h2 .jelenlet.fejlecben{margin:0 0 0 auto;font-size:13.5px;font-weight:400;gap:7px}
.doboz h2 .jelenlet.fejlecben b{font-size:16px}
.jelenlet .pont{width:8px;height:8px;border-radius:50%;background:#3ddc84;flex:none;
  box-shadow:0 0 0 3px rgba(61,220,132,.18)}
/* Tíz helyezés fér bele, de a doboz nem nő meg tőle: a lista görgethető, vékony
   görgetősávval. A flex kitölti a doboz maradék helyét, hogy ne maradjon üres sáv
   a lista alatt; a max-height a mellette álló jelvény-doboz belmagassága, ezért a
   hosszabb lista sem tudja megnyújtani a sort. */
.ranglistadoboz{display:flex;flex-direction:column;min-height:0}
/* overflow-y:scroll (nem auto): a sáv akkor is a helyén marad, ha épp nincs mit
   görgetni, így a lista szélessége sem ugrik meg új játékos felkerülésekor */
.ranglista{flex:1;min-height:0;max-height:419px;overflow-y:scroll;scrollbar-gutter:stable;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--dim2) transparent}
.ranglista:hover{scrollbar-color:var(--dim) transparent}
.ranglista::-webkit-scrollbar{width:5px}
.ranglista::-webkit-scrollbar-track{background:transparent}
.ranglista::-webkit-scrollbar-thumb{background:var(--dim2);border-radius:99px}
.ranglista:hover::-webkit-scrollbar-thumb{background:var(--dim)}
@media(max-width:820px){ .ranglista{flex:none;max-height:327px} }
.rangsor{display:flex;align-items:center;gap:14px;padding:10px 4px;border-bottom:1px solid #1c2130}
.rangsor:last-child{border-bottom:0}
.rangsor .rszam{width:20px;flex:none;text-align:center;font-weight:800;color:var(--dim2);font-size:14px}
.rangsor.elso .rszam{color:var(--acc)}
.rangsor .rav{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line)}
.rangsor .szoveg{flex:1;min-width:0}
.rangsor .nev{font-weight:700;font-size:14.5px}
.rangsor .te{font-size:10px;color:var(--me);border:1px solid var(--me);padding:1px 6px;
  border-radius:99px;margin-left:4px;font-weight:600}
.rangsor .rnyert{display:flex;align-items:center;gap:5px;flex:none;
  font-size:20px;font-weight:800;color:var(--me)}
.rangsor .rnyert .kupa{font-size:14px;filter:saturate(.85)}
.rjelvenyek{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
.rjchip{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;font-size:11px;
  background:var(--bg2);border:1px solid var(--jbszin,var(--line2));
  box-shadow:0 0 0 1px var(--jbszin,transparent) inset;cursor:default}

.kezdo2hasab{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kezdo2hasab .doboz{margin-top:0}
@media(max-width:820px){ .kezdo2hasab{grid-template-columns:1fr} }

.jelvenyreklam{background:linear-gradient(160deg,#332508,var(--panel) 60%);border-color:#ffd16655;
  display:flex;flex-direction:column}
.jelvenyreklam h2{font-size:19px}
.jelvenyreklam p{font-size:15px;color:var(--txt);opacity:.82;line-height:1.75}
.jelvenyreklam p+p{margin-top:12px}
.jrracs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  margin:22px 0;flex:1;align-content:center}
.jrelem{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;min-width:0}
.jrikon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;font-size:26px;
  background:var(--bg2);border:1px solid #ffd16666;box-shadow:0 0 22px -4px rgba(255,209,102,.55)}
.jrikon.hianyzik{opacity:.4;box-shadow:none;border-color:var(--line)}
.jrnev{font-size:11px;font-weight:700;color:var(--dim);line-height:1.3}
.jrzaro{font-size:17px;font-weight:800;text-align:center;padding-top:16px;
  border-top:1px solid #ffd16633;
  background:linear-gradient(92deg,var(--acc),var(--acc2));-webkit-background-clip:text;
  background-clip:text;color:transparent}

.meghivo{display:flex;gap:12px;align-items:stretch}
.meghivo .kodmutato{flex:1;min-width:0;padding:14px 10px;
  display:flex;flex-direction:column;justify-content:center}
.meghivo .kodertek{font-size:clamp(19px,2.2vw,28px);letter-spacing:.12em}

.qrdoboz{flex:none;width:124px;background:#fff;border-radius:13px;padding:7px 7px 3px;
  text-align:center}
.qrdoboz img{display:block;width:110px;height:110px;margin:0 auto}
.qrfelirat{font-size:9px;color:#5b6377;letter-spacing:.03em;padding:2px 0 3px;line-height:1.3}

@media(max-width:480px){
  .meghivo{flex-direction:column;align-items:center}
  .meghivo .kodmutato{width:100%}
}

.kodmutato{background:var(--bg2);border:1px dashed var(--line2);border-radius:13px;
  padding:16px;text-align:center}
.kodfelirat{font-size:10px;color:var(--dim2);letter-spacing:.16em}
.kodertek{font-size:34px;font-weight:800;letter-spacing:.22em;color:var(--acc);
  font-family:ui-monospace,monospace;cursor:pointer;margin-top:4px}
.kodertek:hover{opacity:.8}

@media(max-width:820px){
  .lobbiracs{grid-template-columns:1fr}
}

.fejlec .fejbelepes{color:var(--txt);font-size:14px}
.fejlec .fejbelepes:hover{color:var(--acc);text-decoration:none}
.fejlec nav .gomb.kicsi{padding:8px 16px;font-size:12.5px}

.ualso{display:flex;align-items:center;gap:12px;margin-top:16px}
.ualso .alalink{flex:1;margin:0;text-align:left;font-size:13px}
.uvissza{font-size:12.5px;color:var(--dim2);white-space:nowrap}
.uvissza:hover{color:var(--txt);text-decoration:none}

.urlapfedo{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:#05070bcc;backdrop-filter:blur(3px);padding:20px;overflow:auto}
.urlapfedo[hidden]{display:none}
.urlapdoboz{width:min(430px,100%)}
.ulap{background:var(--panel);border:1px solid var(--line2);border-radius:18px;
  padding:24px;box-shadow:0 40px 90px -30px #000}
.ulap[hidden]{display:none}
.ulap h2{margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}

body.lapvaz{min-height:100vh;display:flex;flex-direction:column}
body.lapvaz .tartalom,body.lapvaz .szuk{flex:1}
body.lapvaz .lablec{margin-top:0}
body.demolap{min-height:0}

.racs{grid-template-columns:repeat(3,1fr);align-items:stretch}
.racs .doboz{display:flex;flex-direction:column;margin-top:0}
@media(max-width:820px){ .racs{grid-template-columns:1fr} }

.szobaracs{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.szobaracs .oszlop{display:flex;flex-direction:column;gap:16px}
.szobaracs .doboz{margin:0;padding:20px 22px}
.szobaracs .doboz h2{padding-bottom:12px;margin-bottom:14px;font-size:16.5px}
.szobaracs .urlapsor{margin-bottom:0}
.szobaracs .szobasor{padding:9px 0}

@media(max-width:900px){ .szobaracs{grid-template-columns:1fr} }

.vlepesek{display:flex;justify-content:center;gap:8px;margin-bottom:22px}
.vpont{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.vpont.aktiv{background:var(--acc);box-shadow:0 0 0 4px #ffd16626}
.vpanel{display:flex;flex-direction:column;gap:14px;min-height:64px}
.vpanel[hidden]{display:none}
.vpanel label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--dim)}
.vpanel label.jelolo{flex-direction:row;align-items:center;gap:8px;color:var(--txt);font-size:14px}
.vpanel input[type=text],.vpanel select{
  padding:9px 11px;border-radius:9px;font:inherit;font-size:14.5px;background:var(--bg2);
  border:1px solid var(--line);color:var(--txt);width:100%}
.vpanel input[type=text]:focus,.vpanel select:focus{outline:0;border-color:var(--acc)}
.vgombok{display:flex;align-items:center;gap:10px;margin-top:20px}
.vgombok .sp{flex:1}
.vgombok .gomb{width:auto}

.vosszegzes{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);
  border-radius:11px;overflow:hidden}
.vosor{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;
  border-bottom:1px solid var(--line);font-size:13.5px}
.vosor:last-child{border-bottom:0}
.vosor span{color:var(--dim)}
.vosor b{color:var(--txt);text-align:right}

dialog#ujszobaablak{
  position:fixed;top:74px;left:50%;margin:0;transform:translateX(-50%);
  width:min(520px,calc(100vw - 28px));padding:22px;border:1px solid var(--line2);
  border-radius:18px;background:var(--panel);color:var(--txt);
  box-shadow:0 40px 90px -30px #000;max-height:calc(100vh - 110px);overflow-y:auto;
}
dialog#ujszobaablak::backdrop{background:#05070bcc;backdrop-filter:blur(3px)}
#ujszobaablak .afej{margin-bottom:16px}
#ujszobaablak .afej .cim{font-size:18px}

@media(max-width:600px){ dialog#ujszobaablak{top:16px} }

.cimke{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:99px;
  border:1px solid;vertical-align:1px}
.cimke.ok{color:var(--ok);border-color:#3ddc9755;background:#3ddc971a}
.cimke.tiltott{color:var(--bad);border-color:#ff5d7355;background:#ff5d731a}
.cimke.admin{color:var(--acc);border-color:#ffd16655;background:#ffd1661a;margin-left:5px}
.kicimke2{font-size:10px;color:var(--me);border:1px solid var(--me);padding:1px 6px;
  border-radius:99px;margin-left:4px}

.tabla .muveletek{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.tabla .muveletek form{margin:0}
.tabla .muveletek .gomb.kicsi{padding:6px 12px;font-size:11.5px}

.bejsor{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;
  background:var(--bg2)}
.bejsor.kesz{opacity:.5}
.bejsor .bfej{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.bejsor .btest{font-size:13.5px;color:var(--dim);white-space:pre-wrap}
.bejsor .gomb.kicsi{padding:5px 11px;font-size:11px}

/* --- profil: ajándékok --- */
.ajandeksav{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.ajbontas,.ajreklam{flex:1;min-width:240px;display:flex;flex-direction:column;align-items:center;
  gap:8px;padding:16px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);text-align:center}
.ajbontas{border-color:rgba(255,209,102,.4)}
.ajdb{font-size:34px;font-weight:800;line-height:1;color:var(--acc)}
.ajszoveg{font-size:13px;color:var(--dim)}
.ajmelle{font-size:11.5px;color:var(--dim2)}
.ajreklamdoboz{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:6px}
.ajreklamhely{width:300px;height:250px;max-width:100%;display:flex;align-items:center;justify-content:center}
.ajreklamhely.helykitolto{border:1px dashed var(--line);border-radius:10px;
  background:rgba(255,255,255,.03);color:var(--dim2);font-size:12px}
.ajido{font-size:12px;color:var(--dim)}

.ajracs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.ajkartya{position:relative;padding:14px 12px;border-radius:14px;text-align:center;
  background:var(--bg2);border:1px solid var(--line);opacity:.55;transition:.2s}
.ajkartya.megvan{opacity:1;border-color:rgba(255,209,102,.4)}
.ajkartya.nyert{border-color:var(--acc);box-shadow:0 0 0 2px rgba(255,209,102,.35);transform:translateY(-3px)}
.ajikon{font-size:26px;line-height:1;margin-bottom:6px}
.ajcim{font-weight:700;font-size:13.5px;margin-bottom:4px}
.ajleiras{font-size:11.5px;color:var(--dim);line-height:1.35}
.ajszam{position:absolute;top:-9px;right:-9px;min-width:26px;height:26px;border-radius:99px;
  display:grid;place-items:center;padding:0 7px;font-weight:800;font-size:13px;
  background:var(--line);color:var(--dim)}
.ajkartya.megvan .ajszam{background:var(--acc);color:#12151d}
.ajbuborek{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);white-space:nowrap;
  padding:6px 12px;border-radius:99px;font-size:12px;font-weight:700;z-index:5;
  background:#12151d;color:var(--acc);border:1px solid var(--acc);box-shadow:0 10px 24px -10px #000}

/* --- kezdőlap: a kártya két oldalán a jelenlét és a zenetár mérete --- */
.demosav{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;gap:46px}
/* a kártyahely a sávon belül a teljes magasságot kapja, hogy az idővonal a helyén maradjon */
.demosav #kartyahely{flex:none;height:100%}
.demooldal{flex:1 1 0;max-width:220px;text-align:center;font-size:15px;line-height:1.45;color:var(--dim)}
.demooldal b{display:block;font-size:42px;line-height:1.05;margin-bottom:2px;
  color:var(--acc);font-weight:800;text-shadow:0 4px 24px rgba(0,0,0,.7)}
@media(max-width:900px){
  .demosav{flex-direction:column;gap:16px}
  .demooldal{max-width:340px;font-size:14px}
  .demooldal b{font-size:32px}
  /* keskeny nézetben a kártya alatt az idővonal mutatója fut, ezért mindkét szöveg fölé kerül */
  .demooldal.jelenletszam{order:-2;flex:none}
  .demosav .zenetar{order:-1;flex:none}
  .demosav #kartyahely{height:auto;flex:1;min-height:0;width:100%}
}


/* a próbajáték ajándékdoboza: a nyeremény és a regisztrációs gomb */
.dajdb{font-size:30px;font-weight:800;color:var(--acc);margin:2px 0 14px;
  text-shadow:0 4px 22px #000,0 0 40px #000}
.dajdb b{font-size:1.25em}
.dajreg{display:block;width:100%;text-align:center;text-decoration:none}


/* ---- A kezdőlap alatti ismertető ------------------------------------------
   Sötét, tömör sáv a kollázs fölött, hogy a szöveg mindenképp olvasható legyen. */
.bemutato{position:relative;z-index:1;background:#0b0d12f2;
  border-top:1px solid var(--line);padding:52px 22px 46px}
.bemutatobelso{max-width:820px;margin:0 auto}
.bemutato h2{font-size:21px;margin:0 0 12px;color:var(--acc)}
.bemutato h2:not(:first-child){margin-top:34px}
.bemutato p{color:var(--dim);margin-bottom:12px}
.bemutato b{color:var(--txt);font-weight:600}

.bemutato .lepesek{counter-reset:lepes;list-style:none;margin:16px 0 0;padding:0;
  display:grid;gap:12px}
.bemutato .lepesek li{counter-increment:lepes;position:relative;color:var(--dim);
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:15px 18px 15px 56px}
.bemutato .lepesek li::before{content:counter(lepes);position:absolute;left:16px;top:14px;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#20160a;
  font-weight:800;font-size:13.5px}

.bemutato2{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:8px}
.bemutato2 h2{margin-top:34px}

.bemutatozaro{margin-top:30px}
.bemutatolinkek{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.bemutatolinkek .gomb{width:auto;padding:11px 22px;font-size:13.5px}

@media(max-width:700px){
  .bemutato{padding:38px 18px 34px}
  .bemutato2{grid-template-columns:1fr;gap:0}
  .bemutatolinkek .gomb{width:100%}
}