/* dorgo -- a Thunder Coins-tipusu demo jatek lapja. Onallo fajl, a furtos.css
   palettajat koveti (ugyanaz a szinkeszlet), de nem importalja azt es nem is
   irja at -- ez a lap egy kulon, onallo szerverrol fut (lasd dorgo-server.js). */

:root{
  --arany:      #f6c33c;
  --arany-vil:  #ffeaa0;
  --arany-sot:  #8a5a06;
  --piros:      #d61423;
  --bordo:      #4a0510;
  --hatter:     #1a0308;
  --panel:      #2c0710;
  --keret:      #0d0205;
  --szoveg:     #f6e6c8;
  --halvany:    #b79a76;
  --zold:       #2fbf5a;

  --sz-grand: #ff2f3d;
  --sz-major: #b45cff;
  --sz-minor: #34d97a;
  --sz-mini:  #38b6ff;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}

html,body{min-height:100%}
body{
  background:
    radial-gradient(120% 78% at 50% -12%, #5c0a18 0%, #2a0409 48%, #120206 100%),
    var(--hatter);
  color:var(--szoveg);
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;align-items:flex-start;justify-content:center;
  padding:16px;overflow-x:hidden;min-height:100vh;
}

.dorgo-demo-jelzo{
  position:fixed;left:0;top:0;width:100%;z-index:50;text-align:center;
  background:var(--piros);color:#fff;font:700 12px/2 'Barlow Condensed',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;
}
.szinpad{margin-top:26px}

.jobb-felso{position:fixed;right:12px;top:34px;z-index:40;display:flex;
  flex-direction:column;align-items:flex-end;gap:6px}
.hang-kapcsolo,.link-gomb{font-size:11px;font-family:inherit;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;background:var(--panel);color:var(--halvany);
  border:1px solid var(--arany-sot);border-radius:6px;padding:5px 9px;}
.hang-kapcsolo[aria-pressed="false"]{opacity:.5}

.szinpad{
  position:relative;z-index:1;width:100%;max-width:640px;
  display:flex;flex-direction:column;gap:14px;
}

.dorgo-jackpot-sav{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  background:linear-gradient(180deg,var(--panel),var(--bordo));
  border:1px solid var(--arany-sot);border-radius:12px;padding:10px 8px;
}
.djp{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.djp-nev{font:700 11px/1 'Barlow Condensed',sans-serif;letter-spacing:.1em;color:var(--jpszin,var(--halvany))}
.djp-ertek{font:800 15px/1.3 'Cinzel',serif;color:var(--arany-vil);
  text-shadow:0 0 8px rgba(246,195,60,.5);white-space:nowrap}
.djp-grand{--jpszin:var(--sz-grand)} .djp-grand .djp-nev{font-size:13px}
.djp-major{--jpszin:var(--sz-major)}
.djp-minor{--jpszin:var(--sz-minor)}
.djp-mini{--jpszin:var(--sz-mini)}
.djp-grand .djp-ertek{color:#ffe066;font-size:17px}

.fejlec{text-align:center}
.jatek-nev{font:800 24px/1.2 'Cinzel',serif;letter-spacing:.22em;
  background:linear-gradient(180deg,#fff6d2 0%,#f6c33c 52%,#a86f04 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(246,195,60,.28)}

.hiba-sav{background:var(--piros);color:#fff;border-radius:8px;padding:8px 12px;font-size:13px}

.jackpot-jar-mondat{font-size:12px;line-height:1.5;color:var(--halvany);text-align:center;
  padding:0 6px}

.info-lap{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(5,1,2,.72);padding:16px}
.info-doboz{width:min(420px,100%);max-height:80vh;overflow:auto;border-radius:14px;
  background:linear-gradient(180deg,var(--panel),var(--bordo));border:1px solid var(--arany-sot);
  padding:16px 18px}
.info-fej{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.info-fej strong{font-family:'Cinzel',serif;letter-spacing:.06em;color:var(--arany);font-size:16px}
.info-zar{background:none;border:none;color:#ffe9b8;font-size:22px;line-height:1;cursor:pointer;padding:2px 6px}
.info-zar:hover{color:var(--arany)}
.info-szabaly-sor{margin:0;font-size:13px;line-height:1.6;color:var(--szoveg)}

/* 2026-09-06, brief-kaszi-dorgo-jackpot-bekotes-ujraarazas-0906.md 7. pont --
   also menusor, ugyanazok a menupontok (plusz a stilusuk), mint a Furtosnel
   (public/css/furtos.css), csak ide masolva: a Dorgo KULON css-fajlt tolt
   be, nem importalhatja a Furtosét. A `--halvany`/`--arany` valtozok neve
   megegyezik, tehat a szabalyok valtoztatas nelkul illeszkednek. */
.dorgo-menusor{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.info-nyit{background:none;border:none;cursor:pointer;font:inherit;text-decoration:underline;
  text-underline-offset:2px;padding:2px;color:var(--halvany)}
.info-nyit:hover{color:var(--arany)}
.info-doboz-szeles{width:min(900px,100%)}

/* --------------------------------------------------------- napi kuldetes */
.kifizetes-ures{color:var(--halvany);font-size:13px;text-align:center;margin:6px 0}
.kifizetes-info{font-size:12px;color:var(--halvany);line-height:1.5;margin:0}
.kifizetes-lista{display:flex;flex-direction:column;gap:8px}
.k-sor{display:flex;flex-direction:column;gap:5px;padding:9px 0;border-bottom:1px solid rgba(246,195,60,.14)}
.k-sor:last-child{border-bottom:none}
.k-fej{display:flex;align-items:center;justify-content:space-between;gap:10px}
.k-cim{font-weight:700;color:#fff2cf;font-size:13px}
.k-jutalom{font-size:11px;color:var(--halvany);white-space:nowrap}
.k-track{height:8px;border-radius:5px;background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(246,195,60,.2);overflow:hidden}
.k-toltes{height:100%;border-radius:5px;background:linear-gradient(90deg,#f6c33c,#c98a08);transition:width 240ms ease-out}
.k-toltes.k-kesz{background:linear-gradient(90deg,#3ee08a,#1f9c5a)}
.k-lab{font-size:11px;color:var(--halvany);display:flex;justify-content:space-between}
.k-felvesz{align-self:flex-start;border:1px solid rgba(62,224,138,.5);background:rgba(20,58,36,.6);
  color:#b6f5cf;border-radius:6px;padding:5px 12px;font:inherit;font-size:12px;cursor:pointer;font-weight:700}
.k-felvesz:hover{background:rgba(20,58,36,.9);color:#fff}
.k-felvesz:disabled{filter:saturate(.35) brightness(.72);cursor:default}

/* ------------------------------------------------------------ ranglista */
.rl-sor{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;
  border-bottom:1px solid rgba(246,195,60,.14);font-size:13px}
.rl-sor:last-child{border-bottom:none}
.rl-hely{color:var(--halvany);font-size:11px;min-width:20px}
.rl-nev{font-weight:700;color:#fff2cf;flex:1}
.rl-szorzo{font-weight:700;color:#ffe07a;font-variant-numeric:tabular-nums}

/* -------------------------------------------------- jackpot-nyertesek */
.jn-sor{display:flex;align-items:center;gap:10px;font-size:13px;padding:9px 0;flex-wrap:wrap;
  border-bottom:1px solid rgba(246,195,60,.10)}
.jn-sor:last-child{border-bottom:none}
.jn-datum{color:var(--halvany);font-size:11px;min-width:118px}
.jn-nev{font-weight:700;color:#fff2cf}
.jn-jatek{font-size:10px;color:var(--halvany);text-transform:uppercase;letter-spacing:.04em;
  padding:1px 7px;border-radius:20px;border:1px solid rgba(255,255,255,.15)}
.jn-szintek{display:inline-flex;gap:4px;flex-wrap:wrap}
.jn-szint{padding:1px 7px;border-radius:20px;font-size:10px;letter-spacing:.06em;font-weight:700}
.jn-szint.mini{color:#cdeeff;background:rgba(56,182,255,.16);border:1px solid rgba(56,182,255,.45)}
.jn-szint.minor{color:#b6f5cf;background:rgba(52,217,122,.16);border:1px solid rgba(52,217,122,.45)}
.jn-szint.major{color:#e7d1ff;background:rgba(196,136,255,.16);border:1px solid rgba(196,136,255,.45)}
.jn-szint.grand{color:#ffd0d4;background:rgba(255,47,61,.16);border:1px solid rgba(255,47,61,.45)}
.jn-osszeg-oszlop{flex:1;display:flex;flex-direction:column;align-items:flex-end;min-width:90px}
.jn-osszeg{font-weight:700;color:#ffe07a;font-variant-numeric:tabular-nums}
.jn-osszeg-cimke{font-size:10px;color:var(--halvany)}
.jn-jatszd{border:1px solid var(--arany-sot);background:rgba(58,8,18,.6);
  color:var(--arany-vil);border-radius:6px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}
.jn-jatszd:hover{background:rgba(58,8,18,.9);color:#fff}
.jn-jatszd:disabled{filter:saturate(.35) brightness(.72);cursor:default}

/* --------------------------------------------------- napi szerencsekerék */
.kerek-keret{position:relative;width:clamp(150px,42vw,210px);aspect-ratio:1;margin:14px auto 6px}
.kerek-korlap{position:absolute;inset:0;border-radius:50%;transform:rotate(0deg);
  border:4px solid rgba(246,195,60,.55);
  box-shadow:0 8px 26px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.35)}
.kerek-cimke{position:absolute;font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:clamp(10px,3.4vw,13px);color:#fff6d2;text-shadow:0 1px 2px rgba(0,0,0,.7);white-space:nowrap}
.kerek-mutato{position:absolute;left:50%;top:-13px;transform:translateX(-50%);width:0;height:0;
  border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:16px solid var(--arany);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));z-index:3}
.kerek-kozep{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22%;height:22%;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe6a0,#c98a08 65%,#7a4d02);
  border:2px solid rgba(0,0,0,.4);box-shadow:0 3px 8px rgba(0,0,0,.5);z-index:2}
.kerek-porget{display:block;margin:12px auto 0;font-family:'Cinzel',serif;font-weight:800;letter-spacing:.06em;
  font-size:14px;padding:12px 26px;border-radius:10px;cursor:pointer;border:1px solid rgba(0,0,0,.25);
  background:linear-gradient(180deg,#f6c33c,#c98a08);color:#2c0710;min-height:44px}
.kerek-porget:disabled{filter:saturate(.35) brightness(.72);cursor:default}
.kerek-eredmeny{margin-top:14px;text-align:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:22px;color:#fff6d2;text-shadow:0 0 14px rgba(246,195,60,.7)}

/* ------------------------------------------------------ automata porgetes */
.automata-urlap{display:flex;flex-direction:column;gap:10px}
.automata-sor{display:flex;align-items:center;gap:8px;font-size:13px;color:#fff2cf}
.automata-sor span{flex:1}
.automata-sor input[type="checkbox"]{width:17px;height:17px;accent-color:#e0a316;flex:none}
.automata-sor input[type="number"]{width:84px;border-radius:8px;border:1px solid rgba(246,195,60,.35);
  background:#0e0206;color:#fff2cf;padding:6px 8px;font:inherit;font-size:14px}
.automata-sor input[type="number"]:disabled{opacity:.4}
.automata-gombsor{display:flex;gap:8px;margin-top:4px}
.automata-allapot{font-size:12px;color:var(--halvany);margin:6px 0 0;min-height:16px}
.kifizetes-gomb{border:none;border-radius:8px;cursor:pointer;padding:8px 16px;font:inherit;
  font-weight:700;letter-spacing:.04em;color:#2a1200;
  background:linear-gradient(180deg,#ffe07a 0%,#e8a516 40%,#a76c04 100%)}
.kifizetes-gomb:disabled{filter:saturate(.35) brightness(.72);cursor:default}
.kifizetes-visszavon{border:1px solid rgba(255,80,80,.45);background:rgba(58,8,18,.6);
  color:#ffb4b4;border-radius:6px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}
.kifizetes-visszavon:hover{background:rgba(58,8,18,.9);color:#fff}
.automata-futas{position:fixed;left:12px;bottom:12px;z-index:40;display:flex;
  align-items:center;gap:8px;padding:8px 10px;border-radius:10px;
  background:rgba(20,4,8,.85);border:1px solid rgba(246,195,60,.35);
  font-size:12px;color:#fff2cf}
.automata-futas span{white-space:nowrap}
.automata-futas button{cursor:pointer;padding:5px 10px;border-radius:6px;
  font-size:12px;font-weight:600;background:#7a1620;color:#ffe6b0;
  border:1px solid rgba(255,120,120,.4)}
.automata-futas button:hover{background:#931a26}

/* Sajat vasarlas-megerosito -- natv <dialog>, a hattér/keret az UA
   alapertelmezese helyett a sajat arany-bordo temank. A globalis
   `*{margin:0}` reset (fentebb) kiuti a dialog UA-alapertelmezett
   `margin:auto`-s kozepre-igazitasat, ezert azt itt kezzel potoljuk
   -- kulonben a dialog a viewport tetejere ragad. */
.vasarlas-parbeszed{position:fixed;inset:0;margin:auto;
  border:none;padding:0;background:transparent;
  max-width:min(420px,92vw);width:100%;max-height:80vh;height:fit-content;
  border-radius:14px}
.vasarlas-parbeszed::backdrop{background:rgba(5,1,2,.72)}
.vasarlas-doboz{display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(180deg,var(--panel),var(--bordo));
  border:1px solid var(--arany-sot);border-radius:14px;padding:16px 18px}
.vasarlas-reszletek{display:flex;flex-direction:column;gap:6px;margin:0}
.vasarlas-reszletek > div{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid rgba(246,195,60,.12);padding-bottom:4px}
.vasarlas-reszletek dt{font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:.06em;
  color:var(--halvany);text-transform:uppercase}
.vasarlas-reszletek dd{font:800 15px 'Cinzel',serif;color:var(--arany-vil)}
.vasarlas-info-sor{margin:0;font-size:12px;line-height:1.5;color:var(--halvany)}
.vasarlas-gombsor{display:flex;gap:10px}
.vasarlas-megse-gomb,.vasarlas-ok-gomb{flex:1;padding:11px;border-radius:10px;
  font:700 14px 'Barlow Condensed',sans-serif;letter-spacing:.04em;cursor:pointer}
.vasarlas-megse-gomb{background:transparent;border:1px solid var(--arany-sot);color:var(--szoveg)}
.vasarlas-megse-gomb:hover{border-color:var(--arany)}
.vasarlas-ok-gomb{background:linear-gradient(180deg,var(--arany-vil),var(--arany));
  border:1px solid var(--arany-sot);color:#3a1e00}
.vasarlas-ok-gomb:hover{filter:brightness(1.05)}

.gep{display:flex;flex-direction:column;gap:12px}

.racs-keret{position:relative;border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, #3a0a12 0%, #1a0308 80%);
  border:3px solid var(--arany-sot);padding:10px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.6);}
.racs{
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(5,1fr);
  gap:6px;aspect-ratio:3/5;
}
.mezo{
  position:relative;border-radius:10px;
  /* Melyseg-javitas (kartya de4486a4, 2026-09-05): a korabbi harom savarnyalat
     (#25060e/#0f0206/#1c040a) a KESZ, arnyekolt-kompozitalt kepernyokepen
     (nem csak a nyers hex-erteken) max R11/G3/B4 kulonbseget adott -- ez
     normal nezetben egy sik szinttol nem kulonboztetheto meg. Elso proba
     (#2c0810) a nyers hexen dupla kulonbseget adott, de a tenyleges,
     screenshot-bol visszamert kompozit ertekben (a box-shadow tompitasa
     miatt) csak kb 2x/1.3x/1.8x-ra jott ki -- ezert a legvilagosabb savot
     tovabb kellett emelni. A #500c18 -> #000000 -> #170309 harmas a MERT
     (nem szamolt) kompozit ertekeken R43/G6/B12 kulonbseget ad (a regi
     R11/G3/B4-hez kepest kb 3.9x/2.0x/3.0x), a legvilagosabb sav pedig
     (merve: kb R43/G6/B12) tovabbra is lathatoan sotetebb az elo racs-keret
     hatterenel (merve: kb R51/G8/B16), tehat a cella nem vilagosodik ki. */
  background:linear-gradient(180deg,#500c18 0%,#000000 58%,#170309 100%);
  box-shadow:inset 0 0 0 1px rgba(246,195,60,.12), inset 0 8px 16px rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;
  font:800 15px/1 'Cinzel',serif;color:var(--halvany);
}
/* Nyugalmi allapot -- halvany "erme-arnyek", NEM szimbolum (az matek-kerdes,
   lasd a briefet), csak annyit mond, hogy a cella varakozik, a jatek elo.
   Csak addig latszik, amig NINCS erme a mezon (:not(.van-erme)) -- amikor
   landol egy erme, a .van-erme sajat hattere teljesen felulirja, tehat nem
   versenyezhet a valodi ermevel. */
.mezo:not(.van-erme)::after{
  content:'';width:56%;height:56%;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, rgba(246,195,60,.16), rgba(246,195,60,.04) 62%, transparent 74%);
  border:1px solid rgba(246,195,60,.10);
  animation:erme-arnyek-lelegzet 3.6s ease-in-out infinite;
}
@keyframes erme-arnyek-lelegzet{0%,100%{opacity:.55}50%{opacity:1}}
/* Erme-abrak, SVG (brief-kai-dorgo-ermek-0904.md): a mezo hattere sotet marad
   (mint uresen), az erme egy tenyleges, korkoros illusztraciokent ul rajta --
   nem a teljes cella szinezese adja ki tobbe az "ermeseget". A radial-gradient
   fallback marad ARRA az esetre, ha az SVG nem toltodik be (offline, lassu
   halozat) -- igy sosem marad a mezo jeltelenul ures egy valodi ermenel. */
.mezo.van-erme{
  background:
    url('../img/erme-keszpenz.svg') center/82% no-repeat,
    radial-gradient(circle at 40% 30%, var(--arany-vil), var(--arany) 55%, var(--arany-sot) 100%);
  color:#3a1e00;box-shadow:0 0 14px rgba(246,195,60,.55);
  flex-direction:column;
}
.mezo.jack-mini{outline:2px solid #9fd8ff}
.mezo.jack-mini{
  background:
    url('../img/erme-jack-mini.svg') center/82% no-repeat,
    radial-gradient(circle at 40% 30%,#eaffea,#4fb6ff 55%,#1c5e8a 100%)
}
.mezo.jack-minor{
  background:
    url('../img/erme-jack-minor.svg') center/82% no-repeat,
    radial-gradient(circle at 40% 30%,#fff0ea,#ff8f4f 55%,#8a3906 100%)
}
.mezo.jack-major{
  background:
    url('../img/erme-jack-major.svg') center/82% no-repeat,
    radial-gradient(circle at 40% 30%,#fbeaff,#c48bff 55%,#5a2a8a 100%)
}
.mezo.jack-grand{
  background:
    url('../img/erme-jack-grand.svg') center/82% no-repeat,
    radial-gradient(circle at 40% 30%,#fffbe6,#ffd45a 55%,#8a5a06 100%);
  box-shadow:0 0 22px rgba(255,212,90,.85)
}
.mezo .m-cimke{font:800 9px/1 'Barlow Condensed',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.mezo .m-ertek{font:800 13px/1.3 'Cinzel',serif}
.mezo.uj-erme{animation:erme-uj .5s ease-out}
@keyframes erme-uj{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
/* 2026-09-06, brief-kaszi-dorgo-jackpot-bekotes-ujraarazas-0906.md 8. pont
   (Zoltan: "Ma nincs mozgas, csak vegeredmeny" -- a bonusz kozben egyetlen
   ures mezon sem latszott, MELYIK doboz porog, mielott az erme landol). A
   `.porog` osztaly a `bonuszLejatszik()` ALATT, ROVID ideig kerul ra pontosan
   azokra a mezokre, amik EBBEN a korben toltodnek fel -- lasd js/dorgo.js
   `porgoJelzesMutat()`. Forgo gyuru, a mar meglevo arany szinvilaggal. */
.mezo.porog{overflow:hidden}
.mezo.porog::before{
  content:'';position:absolute;inset:-2px;border-radius:12px;z-index:1;
  background:conic-gradient(from 0deg, rgba(246,195,60,0) 0%, rgba(246,195,60,.95) 22%, rgba(246,195,60,0) 46%);
  animation:mezo-porog-forog .55s linear infinite;
}
@keyframes mezo-porog-forog{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .mezo.porog::before{animation:none;opacity:.7}
}

.jackpot-mezo-info{font-size:11px;line-height:1.4;color:var(--halvany);text-align:center}

.jackpot-nyert-felirat{
  text-align:center;font:800 20px/1.3 'Cinzel',serif;letter-spacing:.04em;
  color:var(--arany-vil);text-shadow:0 0 12px rgba(246,195,60,.7);
  animation:jackpot-felirat-pulzal 1s ease-in-out infinite alternate;
}
.jackpot-nyert-felirat.jack-mini{color:#9fd8ff;text-shadow:0 0 12px rgba(159,216,255,.7)}
.jackpot-nyert-felirat.jack-minor{color:#ff8f4f;text-shadow:0 0 12px rgba(255,143,79,.7)}
.jackpot-nyert-felirat.jack-major{color:#c48bff;text-shadow:0 0 12px rgba(196,139,255,.7)}
.jackpot-nyert-felirat.jack-grand{color:#ffd45a;text-shadow:0 0 16px rgba(255,212,90,.9)}
@keyframes jackpot-felirat-pulzal{from{transform:scale(1)}to{transform:scale(1.06)}}

.bonusz-reteg{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:6px;padding-top:6px;pointer-events:none}
.bonusz-fejlec{display:flex;gap:10px;align-items:center;background:rgba(10,2,4,.75);
  border:1px solid var(--arany);border-radius:8px;padding:4px 12px}
.bonusz-cim{font:800 13px/1 'Cinzel',serif;color:var(--arany-vil);letter-spacing:.05em}
.bonusz-korok-hatra{font:700 12px/1 'Barlow Condensed',sans-serif;color:var(--halvany)}
.bonusz-doboz{background:rgba(10,2,4,.75);border:1px solid var(--arany-sot);
  border-radius:8px;padding:4px 12px;display:flex;gap:8px;align-items:center}
.bonusz-doboz .cimke{font:700 11px 'Barlow Condensed',sans-serif;color:var(--halvany);
  text-transform:uppercase}
.bonusz-doboz .ertek{font:800 15px 'Cinzel',serif;color:var(--arany-vil)}
.bonusz-uj-erme-uzenet{pointer-events:none;background:rgba(10,2,4,.85);border:1px solid var(--arany);
  border-radius:8px;padding:4px 12px;color:var(--arany-vil);font:700 12px 'Barlow Condensed',sans-serif;
  animation:uj-erme-uzenet-eltuno 1.6s ease-out forwards}
@keyframes uj-erme-uzenet-eltuno{0%{opacity:0;transform:translateY(-4px)}15%{opacity:1;transform:translateY(0)}75%{opacity:1}100%{opacity:0}}

.eredmeny-sor,.allapotsor{display:flex;gap:8px}
.doboz{flex:1;background:var(--panel);border:1px solid var(--arany-sot);border-radius:10px;
  padding:8px 10px;display:flex;flex-direction:column;gap:2px;align-items:center}
.doboz .cimke{font:700 10px/1 'Barlow Condensed',sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--halvany)}
.doboz .ertek{font:800 16px/1.3 'Cinzel',serif;color:var(--arany-vil)}
.doboz-nyeremeny .ertek{color:var(--zold)}

/* Elfogyott demo-egyenleg -- Zoltan sajat probaja, 2026-09-03: "elfogyott a
   demo-egyenleg, nem tudom tesztelni, plusz nem mondja meg, hogyan toltsd
   fel". A doboz kiemelkedik (piros pulzalo keret), a cimke felirata atvalt
   -- lasd dorgo.js egyenlegFrissit(). A PORGETES/VASARLAS gomb ilyenkor
   tiltva van, az UJRAINDIT viszont pont ebben a dobozban all, tehat a
   figyelmeztetes plusz a kiut egy helyen latszik. */
.doboz-egyenleg.elfogyott{border-color:var(--piros);
  animation:egyenleg-elfogyott-pulzal 1.4s ease-in-out infinite}
.doboz-egyenleg.elfogyott .cimke{color:#ffb4bb}
@keyframes egyenleg-elfogyott-pulzal{0%,100%{box-shadow:0 0 0 1px var(--piros)}50%{box-shadow:0 0 10px 3px var(--piros)}}

.ujraindit-gomb{margin-top:2px;font:700 12px 'Barlow Condensed',sans-serif;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:transparent;
  color:var(--arany-vil);border:1px solid var(--arany);border-radius:6px;padding:3px 10px}
.ujraindit-gomb:hover{background:rgba(246,195,60,.14)}

.doboz-tet{flex:2}
.tet-gombsor{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.tet-gomb{font:700 12px 'Barlow Condensed',sans-serif;background:var(--keret);
  color:var(--halvany);border:1px solid var(--arany-sot);border-radius:6px;
  padding:4px 8px;cursor:pointer}
.tet-gomb[aria-pressed="true"]{background:var(--arany);color:#3a1e00;border-color:var(--arany-vil)}

.porget{flex:1.2;border:none;border-radius:12px;cursor:pointer;padding:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(180deg,#ffe07a 0%,#e8a516 40%,#a76c04 100%);
  color:#2a1200;box-shadow:0 6px 0 #6d4402, 0 12px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
  font-family:'Cinzel',serif;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.porget:active{transform:translateY(4px);box-shadow:0 2px 0 #6d4402,0 6px 14px rgba(0,0,0,.5)}
.porget:disabled{opacity:.45;cursor:not-allowed}
.porget-felirat{font-weight:800;font-size:15px;letter-spacing:.04em}
.porget-tet{font-size:11px;color:var(--arany-vil)}

.bonusz-vasarlas-sor{display:flex}
.bonusz-vasarlas-gomb{flex:1;display:flex;justify-content:space-between;align-items:center;
  background:var(--panel);border:1px dashed var(--arany-sot);border-radius:10px;
  color:var(--szoveg);padding:10px 14px;font:600 13px 'Barlow',sans-serif;cursor:pointer}
.bonusz-vasarlas-gomb:disabled{opacity:.4;cursor:not-allowed}
.bv-ar{font-weight:800;color:var(--arany-vil)}

.rtp-jelzes{text-align:center;font-size:11px;color:var(--halvany);opacity:.8}

/* 2026-09-07: a szabaly-mondat athelyezve az oldal aljarol a "Kifizetési
   tábla és szabályok" info-lap panelbe -- lasd dorgo.html. A korabbi,
   osszecsukhato <details>-alapu megjelenes (kartya c2116a12, 2026-09-02)
   emiatt megszunt, az .info-lap/.info-doboz keret adja a keretet, itt csak
   az alcim marad sajat stilus. */
.jackpot-alcim{font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:.04em;
  color:var(--arany);margin:0 0 6px}

@media (min-width:421px){
  /* Asztali/tablet nezet, 2026-09-03 (Zoltan sajat 1280x725 kepernyokepe,
     Chrome): korabban a racs magassagat a SZELESSEGE hatarozta meg
     (aspect-ratio:3/5 a szinpad max-width:640px-es szelessegebol), ezert
     1280 keppont szeles asztali ablakban a negyedik-otodik sor gorgetes
     nelkul levagodott, holott vizszintesen bosegesen maradt ures hely.
     Innentol forditva: a szinpad magassagat a viewporthoz kotjuk, a gep
     (vezerlok) plusz a racs-keret flex:1-gyel osztozik a fennmarado
     fuggoleges helyen -- a racs sajat magassaga ebbol az osztott
     terbol szarmazik, a szelesseget az aspect-ratio hatarozza meg
     (nem forditva). A racs max-magassaga 1000px (=5 sor * 200px), igy
     nagy kepernyon sem no nevetsegesre nagyra. A mobil nezetet (also
     media query) ez nem erinti. */
  .szinpad{height:calc(100vh - 64px);height:calc(100dvh - 64px)}
  .gep{flex:1;min-height:0}
  .racs-keret{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
  .racs{width:auto;max-width:100%;height:min(100%,1000px)}
}

@media (max-width:420px){
  /* A jobb-felso (korabban ÚJRAINDÍT/HANG egymas alatt) sok fuggoleges
     helyet vitt el a jackpot-sav folott -- most (mar csak HANG) egy sorban
     all, igy a szinpad felso margoja is csokkenthetp (78 -> 52px). Az
     ÚJRAINDÍT azota az egyenleg-dobozban all, lasd .ujraindit-gomb lejjebb. */
  .szinpad{margin-top:52px}
  .jobb-felso{flex-direction:row;top:26px;gap:4px}
  .hang-kapcsolo,.link-gomb{padding:3px 7px;font-size:10px}

  .szinpad{gap:8px}
  .jatek-nev{font-size:17px}
  .fejlec{padding:2px 0}
  .djp-ertek{font-size:12px}
  /* 5 000 000 ₡ 14px-en meg ket sorba tort a 80px-es oszlopban, ferdere
     huzva a savot -- 13px plusz a fenti nowrap mar egy sorban fer el
     (mert-merve: brief-robi-dorgo-verziozas-plusz-jatszhatosag-0902.md). */
  .djp-grand .djp-ertek{font-size:13px}
  .dorgo-jackpot-sav{padding:6px 6px}

  /* A racs (tarcsak) SZANDEKOSAN keskenyebb a teljes szelessegnel: az
     aspect-ratio:3/5 miatt a magassaga a szelessegevel egyutt no, ez az
     EGYETLEN mod, hogy a jackpot-sav PLUSZ a porgetes-gomb is beferjen
     gorgetes nelkul egy 390x844-es kepernyore -- MERT-mérve, lasd a
     brief-robi-dorgo-mobil-elso-keperno-0902.md valaszt. */
  .racs-keret{width:270px;max-width:270px;margin:0 auto;padding:6px;align-self:center}

  .gep{gap:6px}
  .eredmeny-sor,.allapotsor{gap:6px}
  .doboz{padding:5px 6px;gap:0}
  .doboz .cimke{font-size:8px}
  .doboz .ertek{font-size:12px}
  .tet-gombsor{gap:3px}
  .tet-gomb{padding:3px 5px;font-size:10px}
  /* Legalabb akkora, mint a tet-gomb (10px) -- mérce, kartya-brief 0903. */
  .ujraindit-gomb{margin-top:1px;padding:2px 6px;font-size:10px}
  .porget{padding:5px;flex:1}
  .porget-felirat{font-size:12px}
  .porget-tet{font-size:9px}
}