/* Bell Link -- játékfelület. Nincs keretrendszer, csak CSS. */

:root{
  --cella: 172px;
  --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;
  --sz-mega: #ff4fd8;

  /* A blackjack.css sajat lap-szinei -- a duplazas-latvany (kartya
     <duplazas-nem-akaszt-0901>) a blackjack lap-rajzolot hasznalja ujra,
     lasd js/lap-rajzolo.js, tehat ugyanazt a ket valtozot is athozza. */
  --piros-lap: #c81c2b;
  --fekete-lap: #14201a;
}

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

html,body{height:100%}
body{
  background:
    radial-gradient(115% 80% at 50% -10%, #5c0a18 0%, #2a0409 46%, #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:center;justify-content:center;
  /* IGAZOLT hibaosztaly, 2026-09-03 (brief-kaszi-letra-tulcsordulas-
     horgonyzas-0903.md, letra-tulcsordulas-hipotezis-0903.mjs meressel):
     ha a #szinpad magasabb a nezetnel, a sima `align-items:center` a
     tulcsordulas TETEJET olyan negativ pozicioba tolja, ahonnan a felfele
     gorgetes nem eri el (a klasszikus flexbox-kozeppontozas-tulcsordulas
     hiba). Az `align-items:safe center` a CSS Box Alignment specifikacio
     sajat valasza erre: tulcsordulasnal `flex-start`-ra esik vissza, tehat
     a teteje SOHA nem kerul a lathato terulet fole -- ez minden nezet-
     magassagon es minden tartalom-magassagon strukturalisan mukodik, uj
     kezzel szamolt keppont-ertek nelkul. A masodik `align-items:center` sor
     a regi ertek, csak azert marad meg, hogy a `safe` kulcsszot nem ismero
     regi bongeszo is kapjon egy ervenyes, a korabbival azonos viselkedesu
     erteket (a CSS a nem ismert erteku deklaraciot eldobja, igy a korabbi
     sor ervenyben marad -- ez NEM fallback-hack, hanem a kaszkad normal
     mukodese, egyetlen deklaracion belul ket ertekkel). */
  align-items:safe center;
  padding:14px;overflow-x:hidden;
}
body::before{                                  /* halvány szőnyeg-minta */
  content:'';position:fixed;inset:0;pointer-events:none;opacity:.20;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,190,90,.12) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(255,190,90,.10) 0 2px, transparent 2px 22px);
}

.szinpad{
  position:relative;z-index:1;width:100%;max-width:800px;
  display:flex;flex-direction:column;gap:14px;
}
.szinpad.razas-kicsi{animation:razas 260ms ease-in-out 2}
.szinpad.razas-nagy{animation:razas-nagy 320ms ease-in-out 4}
@keyframes razas{0%,100%{transform:translate(0,0)}25%{transform:translate(-3px,2px)}75%{transform:translate(3px,-2px)}}
@keyframes razas-nagy{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-8px,5px) rotate(-.35deg)}
  60%{transform:translate(9px,-6px) rotate(.35deg)}80%{transform:translate(-5px,-3px) rotate(-.2deg)}}

/* ------------------------------------------------------- jackpot-létra */
/* NEM ragad (2026-09-02, kártya 1f60731b -- a Fürtös jackpot-sáv MÁSODIK
   visszaesése után, Lead teljes söprése ugyanerre a mintára). A korábbi
   `position:sticky;top:0` (2026-08-30) PLUSZ a két törésponti `top`+
   `margin-top` felülírás (lásd lentebb, 1040px és 900px) UGYANAZ a
   hibaosztály, mint a Fürtösnél (kártya 856a276f, commit e743484e): egy
   sticky elem UTÁNI, nála rövidebb, NEM-sticky tartalom ELKERÜLHETETLENÜL
   átfedésbe kerül vele elég mély görgetésnél, FÜGGETLENÜL a margó
   méretétől -- a margó csak azt dönti el, HÁNY képpont görgetés után jön
   be az átfedés, nem azt, hogy bejön-e. Mérve, izolált sandboxon, öt
   görgetési állásnál (lásd store/kai-ragados-savok-strukturalis-
   levaltasa-jelentes-0902.md M2 pozitív kontroll): a régi kód bukott.
   Javítás: a létra TÖBBÉ NEM ragad, a natúr (dokumentum-folyásbeli) helye
   marad az egyetlen releváns pozíció -- ez ÚJABB kézzel számolt képpont-
   érték nélkül, minden törésponton strukturálisan kizárja a hibaosztályt.
   A két törésponti `top`/`margin-top` felülírás (lásd lentebb) ezért
   törölve, a `margin-top` értékek MEGMARADTAK (a `.jobb-felso` fixed
   sarok-doboz alá igazításhoz a lap tetején). */
.letra{
  display:grid;grid-template-columns:1.4fr 1.15fr 1fr 1fr;gap:10px;
  padding:8px 6px;margin:-8px -6px 0;border-radius:14px;
  background:linear-gradient(180deg, rgba(15,2,5,.96) 0%, rgba(15,2,5,.90) 75%, rgba(15,2,5,.78) 100%);
  box-shadow:0 10px 18px -10px rgba(0,0,0,.65);
}
.jp{
  position:relative;border-radius:12px;padding:10px 12px 9px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:linear-gradient(180deg,#3a0812 0%,#1b0308 100%);
  border:2px solid var(--arany-sot);
  box-shadow:inset 0 1px 0 rgba(255,225,160,.30), 0 6px 18px rgba(0,0,0,.55);
}
.jp::before{
  content:'';position:absolute;inset:0;opacity:.30;
  background:radial-gradient(85% 120% at 50% 0%, var(--jpszin) 0%, transparent 62%);
}
.jp-grand{--jpszin:var(--sz-grand)}
.jp-major{--jpszin:var(--sz-major)}
.jp-minor{--jpszin:var(--sz-minor)}
.jp-mini{--jpszin:var(--sz-mini)}

.jp-nev{
  position:relative;font-family:'Cinzel',Georgia,serif;font-weight:800;
  letter-spacing:.16em;font-size:14px;color:var(--jpszin);
  text-shadow:0 0 12px color-mix(in srgb, var(--jpszin) 70%, transparent);
}
.jp-grand .jp-nev{font-size:19px}
.jp-ertek{
  position:relative;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:26px;line-height:1.05;
  background:linear-gradient(180deg,#fff6d2 0%,#f6c33c 55%,#c98a08 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.jp-grand .jp-ertek{font-size:38px}
.jp-jog{position:relative;font-size:10px;color:var(--halvany);letter-spacing:.03em}
.jp.nem-jogosult{filter:saturate(.35) brightness(.72)}
.jp.nem-jogosult .jp-jog{color:#e08a6a}
.jp.villog{animation:jp-villog 380ms ease-in-out 8}
@keyframes jp-villog{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,225,160,.3),0 6px 18px rgba(0,0,0,.55)}
  50%{box-shadow:inset 0 0 26px var(--jpszin),0 0 34px var(--jpszin);border-color:var(--jpszin)}
}
/* A letra-ertek KIFIZETES UTANI csokkeneset jelzi lathatoan -- a jatek.js
   jackpotDobozEsesAnim() rakja/veszi le, pontosan a jackpot-feltaras
   pillanataban (2026-08-30-i brief). Elhalvanyul-visszater, a szam-csere
   maga a halvany-pont kozepen tortenik, tehat nem tunik nema ugrasnak. */
.jp-ertek.jp-esik{animation:jp-esik 700ms ease}
@keyframes jp-esik{
  0%{opacity:1;transform:translateY(0)}
  40%{opacity:.12;transform:translateY(8px)}
  60%{opacity:.12;transform:translateY(-4px)}
  100%{opacity:1;transform:translateY(0)}
}

/* ----------------------------------------------------------------- gép */
.gep{
  border-radius:20px;padding:14px 16px 12px;
  background:linear-gradient(180deg,#4a0a16 0%,#2a0509 55%,#1c0307 100%);
  border:3px solid transparent;
  background-origin:border-box;
  box-shadow:0 20px 46px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,220,160,.18);
  position:relative;
}
.gep::before{
  content:'';position:absolute;inset:-3px;border-radius:20px;padding:3px;z-index:0;
  background:linear-gradient(160deg,#ffeaa0,#c98a08 32%,#7a4d05 55%,#ffd76a 78%,#8a5a06);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.gep-fej{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px;position:relative}
.marka{
  font-family:'Cinzel',Georgia,serif;font-weight:800;letter-spacing:.30em;font-size:20px;
  background:linear-gradient(180deg,#fff6d2,#f6c33c 50%,#a86f04);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 22px rgba(246,195,60,.30);
}
.gep-alcim{font-size:11px;color:var(--halvany);letter-spacing:.06em}

/* --------------------------------------------------- forrósag-jelző */
/* 2026-09-01, MÁSODIK kör (kártya d0bb69b2): a `.gep-fej` sorába rakott
   46px-es doboz Zoltán szerint továbbra sem látszott. A `.forrosag-sor` ezért
   SAJÁT, teljes szélességű sorba került, közvetlenül a játéktér FÖLÉ (a
   `.gep-fej` alatt, a `.mezo-keret` előtt) -- nem a mezőn belül, tehát a
   tekercseket nem takarja, viszont játék közben ránézésre azonnal látszik. A
   kör átmérője 46px-ről 160px-re (mobilon 44px-ről 108px-re) nőtt, jóval a
   háromszorosa fölé. A "duzzad" hatást a benne lévő kép `transform:scale()`-
   je plusz a dobozt körülölelő fény (`box-shadow`) erősödése adja --
   szintenként nagyobb, fényesebb, az ötödiken lassan lüktető. A kép
   `mix-blend-mode:screen`-nel olvad a sötét alapba (a fal.ai kép saját
   sötétbarna háttere ELTŰNIK, csak az arany harang plusz a fény marad
   látható) -- valódi alfa-átlátszóság helyett, mert a flux/dev nem ad
   átlátszó PNG-t, ezt mérve találtuk (2026-08-30). */
.forrosag-sor{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:14px}
.forrosag-jelzo{
  width:160px;height:160px;flex-shrink:0;position:relative;z-index:1;
  border-radius:50%;overflow:hidden;
}
.forrosag-jelzo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  mix-blend-mode:screen;opacity:.4;filter:brightness(1) saturate(1);
  transform-origin:center center;
  transition:opacity .6s ease,transform .5s ease,filter .6s ease;
}
/* a bónusz-távolság fokozat-neve -- a 08-31-én törölt szöveges sáv tudása,
   DE nem önálló feliratsávként (azt Zoltán kifejezetten levetette), hanem
   a képre írt, mindig olvasható jelzésként. A szint kizárólag a szerver
   `forrosag.arany` mezőjéből jön, lásd forrosagHatterFrissit() jatek.js.
   2026-09-01, HARMADIK kör: korábban itt egy `${szazalek}%` szám állt --
   Zoltán szerint (TG 32008) ígéretnek hat, ezért mostantól a FORROSAG_
   NEVEK egyike (jatek.js), nem szám -- a `font-variant-numeric` ezért
   maradhat, de gyakorlati hatása nincs. */
.forrosag-szam{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:2;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;
  color:#fff6d2;background:rgba(20,3,8,.72);padding:2px 9px;border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(255,214,120,.35);font-variant-numeric:tabular-nums;
}
/* 2026-09-02, NEGYEDIK kör (Zoltán, két szó: "Nem kell sav"): a kör alatti
   kitöltő-sáv (`.forrosag-track`/`.forrosag-toltes`) TELJESEN törölve --
   a rögzített, sosem-100%-os kitöltés is ugyanazt az ígéret-hatást keltette,
   amit a régi százalékos felirat (Zoltán TG 32008). Az infót kizárólag a
   `.forrosag-szam` fokozat-név viszi. */
/* Zoltán TG 31964: "nem erted, ugye, hogy a kepeket kellene kitenni... nem
   latom oket". Gyökér: az 1. szint .34 átlátszósága gyakorlatilag
   láthatatlan volt a sötét háttéren -- ami maradt, a `.forrosag-szam`
   kísérő-szazalék, ő pontosan azt látta. A KÉP legyen a fő látvány MÉG AZ
   ELSŐ szinten is, a szintek közti fokozás a magasabb opacitás/méret-
   tartományban maradjon (1-ös még mindig halványabb/kisebb, mint az 5-ös,
   csak nem eltűnő). */
.forrosag-jelzo[data-szint="1"]{box-shadow:none}
.forrosag-jelzo[data-szint="1"] img{opacity:.62;transform:scale(.78)}
.forrosag-jelzo[data-szint="2"]{box-shadow:0 0 14px 3px rgba(246,195,60,.25)}
.forrosag-jelzo[data-szint="2"] img{opacity:.74;transform:scale(.87)}
.forrosag-jelzo[data-szint="3"]{box-shadow:0 0 22px 5px rgba(246,195,60,.42)}
.forrosag-jelzo[data-szint="3"] img{opacity:.86;transform:scale(.94)}
.forrosag-jelzo[data-szint="4"]{box-shadow:0 0 32px 8px rgba(246,195,60,.58);transition:box-shadow .6s ease}
.forrosag-jelzo[data-szint="4"] img{opacity:.95;transform:scale(1.05);filter:brightness(1.1) saturate(1.12)}
.forrosag-jelzo[data-szint="5"]{
  box-shadow:0 0 48px 13px rgba(246,195,60,.8);transition:box-shadow .6s ease;
  animation:forrosag-jelzo-lukt 2.4s ease-in-out infinite;
}
.forrosag-jelzo[data-szint="5"] img{opacity:1;transform:scale(1.2);filter:brightness(1.3) saturate(1.25)}
@keyframes forrosag-jelzo-lukt{
  0%,100%{box-shadow:0 0 48px 13px rgba(246,195,60,.8);transform:scale(1)}
  50%{box-shadow:0 0 66px 18px rgba(246,195,60,1);transform:scale(1.06)}
}
/* Asztali elhelyezés (Zoltán TG 31964: "asztali gepen balra-jobbra van is
   hely neki"). A `.szinpad` max-width 800px, tehát 1180px viewport fölött
   legalább 190px marad mindkét oldalon -- ez a `.gep` (position:relative)
   mellé, a JÁTÉKTÉR OLDALÁRA kitéve fér el kitakarás nélkül, a `.forrosag-
   sor` saját sora emiatt megszűnik (a `.mezo-keret` feljebb csúszik --
   szándékos, ez a felszabaduló hely a cél, MÉRVE a brief screenshotjain). */
@media (min-width:1180px){
  .forrosag-sor{position:absolute;top:64px;left:-190px;margin:0;z-index:1}
}
@media (prefers-reduced-motion:reduce){
  .forrosag-jelzo[data-szint="5"]{animation:none}
}

/* --------------------------------------------------------- a 3x4 mező */
.mezo-keret{
  position:relative;border-radius:14px;padding:10px;
  background:linear-gradient(180deg,#080103 0%,#160208 100%);
  border:2px solid var(--arany-sot);
  box-shadow:inset 0 0 44px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,214,120,.16);
  overflow:hidden;
}
.mezo{
  display:grid;grid-template-columns:repeat(4,var(--cella));gap:6px;justify-content:center;
  position:relative;z-index:1;
}
.oszlop{
  height:calc(var(--cella) * 3);overflow:hidden;position:relative;border-radius:8px;
  background:linear-gradient(180deg,#20040b,#0d0205 50%,#20040b);
  box-shadow:inset 0 12px 22px rgba(0,0,0,.85), inset 0 -12px 22px rgba(0,0,0,.85);
}
.szalag{will-change:transform}
.cella{
  width:var(--cella);height:var(--cella);padding:5px;position:relative;
}
.tile{
  width:100%;height:100%;border-radius:8px;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(96,20,36,.55),rgba(20,3,8,.75));
  box-shadow:inset 0 0 0 1px rgba(255,214,120,.14);
}
.tile svg{width:78%;height:78%;filter:drop-shadow(0 3px 5px rgba(0,0,0,.65))}
.oszlop.porog .szalag{filter:blur(1.6px)}
.oszlop.koppan{animation:koppan 220ms cubic-bezier(.3,1.6,.5,1)}
@keyframes koppan{0%{transform:translateY(0)}45%{transform:translateY(7px)}100%{transform:translateY(0)}}

/* nyerő cellák */
.cella.nyer .tile{
  background:linear-gradient(180deg,rgba(246,195,60,.34),rgba(120,60,4,.30));
  box-shadow:inset 0 0 0 2px var(--arany), 0 0 22px rgba(246,195,60,.55);
  animation:nyer-lukt 620ms ease-in-out infinite;
}
@keyframes nyer-lukt{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* mega-elem (2x2/3x3 blokk) -- kártya kasziyes-rtp-alulfizet-0829.
   2026-09-02 (Lead lelete, brief-kaszi-bell-link-ot-hiba-0902.md, 1. tétel,
   TG 32457-32465): "a jel a keret 27 százalékát tölti ki (544px keret,
   150px jel), plusz a cellahatárok látszanak a blokkon belül". Az EREDETI
   verzió csak a `.cella.mega-blokk .tile`-ot tintezte (mindegyik CELLA a
   SAJÁT, kis egyedi ikonjával maradt látható), a `.mega-keret` pedig csak
   egy díszkeret volt, átlátszó háttérrel -- 25 elkülönülő csempe egy közös
   szegéllyel, nem EGY összefüggő óriás jel. JAVÍTVA a Fürtös lapján már
   bevált mintával (services/bell-link/public/css/furtos.css `.mega-keret`,
   2026-09-02 délelőtt): a `.mega-keret` TELJESEN OPAK hátteret kap (a tint-
   osztály felesleges alá kerül, nem törölve, mert a `.mega-blokk` osztály
   az egyedi ikon elrejtéséhez továbbra is kell), az egyedi ikonok
   `visibility:hidden`-re váltanak, plusz EGY, a teljes kereten átívelő,
   90%-os méretű ikon kerül a helyükre (`jeloljMega()`, jatek.js). ÚJ MÉRCE:
   a jel a keret belső méretének LEGALÁBB 85%-a, nulla belső rácsvonal. */
.cella.mega-blokk .tile svg{visibility:hidden}
.mega-keret{
  position:absolute;pointer-events:none;z-index:2;border-radius:12px;
  background:linear-gradient(180deg,#3a0a2c 0%,#1c0416 100%);
  box-shadow:inset 0 0 0 3px var(--sz-mega), 0 0 34px rgba(255,79,216,.65);
  animation:mega-keret-lukt 900ms ease-in-out infinite;
  display:flex;align-items:center;justify-content:center;
}
.mega-keret .mega-jel{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
}
.mega-keret .mega-jel svg{
  width:90%;height:90%;filter:drop-shadow(0 4px 10px rgba(0,0,0,.75));
  animation:jel-erkezik 260ms cubic-bezier(.2,1.5,.5,1);
}
@keyframes mega-keret-lukt{
  0%,100%{box-shadow:inset 0 0 0 3px var(--sz-mega), 0 0 34px rgba(255,79,216,.55)}
  50%{box-shadow:inset 0 0 0 4px var(--sz-mega), 0 0 54px rgba(255,79,216,.85)}
}
/* A furtos.css-ből átvéve (ugyanaz a hatás mindkét lapon): az óriás jel
   enyhén kicsinyítve, átlátszatlanul érkezik, nem csak egyszerűen felugrik. */
@keyframes jel-erkezik{from{transform:scale(.72);opacity:0}to{transform:none;opacity:1}}
.mega-keret::before{
  content:'MEGA';position:absolute;left:50%;top:-14px;transform:translateX(-50%);
  font-family:'Cinzel',serif;font-weight:800;font-size:15px;letter-spacing:.18em;
  color:#fff0fb;text-shadow:0 1px 0 #000,0 0 10px rgba(255,79,216,.9);
  background:rgba(20,2,16,.85);padding:2px 12px;border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--sz-mega);white-space:nowrap;
}

/* harang-cella, rajta a kredit-összeg */
.cella.harang .tile{
  background:radial-gradient(70% 70% at 50% 38%, #6a2408 0%, #2a0a04 100%);
  box-shadow:inset 0 0 0 2px rgba(246,195,60,.55), 0 0 18px rgba(246,195,60,.22);
}
.harang-ertek{
  position:absolute;left:50%;bottom:9%;transform:translateX(-50%);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:calc(var(--cella)*.165);
  line-height:1;white-space:nowrap;color:#fff8dc;
  text-shadow:0 1px 0 #000,0 0 9px rgba(255,190,60,.85);
  font-variant-numeric:tabular-nums;
}
.cella.harang[data-tipus="mini"] .tile{box-shadow:inset 0 0 0 2px var(--sz-mini),0 0 22px color-mix(in srgb,var(--sz-mini) 55%,transparent)}
.cella.harang[data-tipus="minor"] .tile{box-shadow:inset 0 0 0 2px var(--sz-minor),0 0 22px color-mix(in srgb,var(--sz-minor) 55%,transparent)}
.cella.harang[data-tipus="major"] .tile{box-shadow:inset 0 0 0 2px var(--sz-major),0 0 24px color-mix(in srgb,var(--sz-major) 65%,transparent)}
.cella.harang[data-tipus="duplazo"] .tile{box-shadow:inset 0 0 0 2px #46e8ff,0 0 24px rgba(70,232,255,.5)}
.cella.harang[data-tipus="duplazo"] .harang-ertek{color:#c9f7ff;text-shadow:0 1px 0 #000,0 0 10px rgba(70,232,255,.9)}
.szint-cimke{
  position:absolute;left:50%;top:7%;transform:translateX(-50%);
  font-family:'Cinzel',serif;font-weight:800;font-size:calc(var(--cella)*.115);letter-spacing:.10em;
}
[data-tipus="mini"] .szint-cimke{color:var(--sz-mini)}
[data-tipus="minor"] .szint-cimke{color:var(--sz-minor)}
[data-tipus="major"] .szint-cimke{color:var(--sz-major)}

/* ------------------------------------------------- duplázó-jel landolása */
/* Az ÉRINTETT (készpénz-típusú) harang-cellák kiemelése -- ugyanaz a cián
   szín, mint a duplázó-cella saját kerete, hogy a szem összekösse a kettőt. */
.cella.dupla-erintett .tile{animation:dupla-lukt 520ms ease-in-out 3}
@keyframes dupla-lukt{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.10);box-shadow:inset 0 0 0 2px #46e8ff,0 0 26px rgba(70,232,255,.75)}
}
.dupla-sav{
  position:absolute;left:50%;top:14%;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 18px;border-radius:12px;pointer-events:none;
  background:rgba(8,2,4,.86);border:1px solid rgba(70,232,255,.55);
  box-shadow:0 0 30px rgba(70,232,255,.35);
  animation:dupla-sav-be 220ms ease-out;
}
.dupla-sav-cim{font-family:'Cinzel',serif;font-weight:700;font-size:12px;letter-spacing:.08em;
  color:#c9f7ff;text-transform:uppercase}
.dupla-sav-szoveg{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;
  color:#fff;text-shadow:0 0 12px rgba(70,232,255,.7);font-variant-numeric:tabular-nums}
.dupla-sav-szoveg b{color:#c9f7ff}
@keyframes dupla-sav-be{0%{opacity:0;transform:translateX(-50%) translateY(-8px)}100%{opacity:1;transform:translateX(-50%) translateY(0)}}

/* --------------------------------------------- közelítés-feszültség (11/12) */
.kozelites-sav{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  font-family:'Cinzel',serif;font-weight:800;font-size:15px;letter-spacing:.14em;
  padding:7px 20px;border-radius:20px;pointer-events:none;text-transform:uppercase;
  background:rgba(8,2,4,.88);border:1px solid rgba(255,47,61,.6);color:#ffd0d4;
  animation:kozelites-villog 620ms ease-in-out infinite;
}
@keyframes kozelites-villog{
  0%,100%{box-shadow:0 0 16px rgba(255,47,61,.45)}
  50%{box-shadow:0 0 34px rgba(255,47,61,.85);color:#fff}
}
.mezo-keret.kozelit{animation:kozelites-keret 620ms ease-in-out infinite}
@keyframes kozelites-keret{
  0%,100%{box-shadow:inset 0 0 44px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,47,61,.25)}
  50%{box-shadow:inset 0 0 44px rgba(0,0,0,.9), inset 0 0 0 2px rgba(255,47,61,.65), 0 0 26px rgba(255,47,61,.4)}
}

/* -------------------------------------------------------- bónusz-mód */
.mezo-keret.bonusz{padding-top:46px;
  background:linear-gradient(180deg,#120204 0%,#2a1502 100%);
  box-shadow:inset 0 0 60px rgba(246,195,60,.16), inset 0 0 0 2px rgba(246,195,60,.45);
}
.mezo-keret.bonusz .oszlop{background:linear-gradient(180deg,#2a1502,#0d0703 50%,#2a1502)}
.cella.zarolt .tile{
  animation:zarolt-fel 420ms cubic-bezier(.2,1.7,.4,1);
  box-shadow:inset 0 0 0 2px var(--arany),0 0 26px rgba(246,195,60,.55);
}
@keyframes zarolt-fel{0%{transform:scale(1.55) rotate(-8deg);opacity:0}60%{transform:scale(.94)}100%{transform:scale(1)}}
.cella.ures .tile{background:linear-gradient(180deg,rgba(40,26,4,.5),rgba(10,6,2,.7));box-shadow:inset 0 0 0 1px rgba(246,195,60,.10)}
.cella.ures.porgo .tile{animation:ures-porog 220ms linear infinite}
.cella.ures.porgo svg{opacity:.30;animation:ures-mozog 220ms linear infinite}
@keyframes ures-porog{0%{filter:brightness(1)}50%{filter:brightness(1.5)}100%{filter:brightness(1)}}
@keyframes ures-mozog{0%{transform:translateY(-34%) scaleY(1.25)}100%{transform:translateY(34%) scaleY(1.25)}}

.bonusz-sav{
  position:absolute;left:0;right:0;top:0;z-index:4;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:7px 12px;
  background:linear-gradient(180deg,rgba(120,60,0,.96),rgba(60,24,0,.86));
  border-bottom:2px solid var(--arany);
}
.bs-cim{font-family:'Cinzel',serif;font-weight:800;letter-spacing:.18em;font-size:15px;
  background:linear-gradient(180deg,#fff6d2,#f6c33c 55%,#c98a08);-webkit-background-clip:text;background-clip:text;color:transparent}
.bs-szamlalo{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;
  color:#fff6d2;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.bs-szamlalo-szoveg{font-size:11px;color:#ffe9b8;letter-spacing:.05em}
.bs-korok{display:flex;gap:6px}
.kor-pont{width:13px;height:13px;border-radius:50%;background:#3a2200;box-shadow:inset 0 0 0 2px rgba(246,195,60,.5)}
.kor-pont.el{background:radial-gradient(circle at 35% 30%,#fff3c0,#f6c33c 55%,#a86f04);box-shadow:0 0 12px rgba(246,195,60,.9)}
.bs-szoveg{font-size:11px;color:#ffe9b8;letter-spacing:.05em}
.bs-tovabb{font-family:'Cinzel',serif;font-weight:800;letter-spacing:.06em;font-size:12px;
  padding:6px 14px;border-radius:8px;cursor:pointer;border:1px solid rgba(0,0,0,.25);
  background:linear-gradient(180deg,#f6c33c,#c98a08);color:#2c0710;
  animation:bs-tovabb-pulzal 1.1s ease-in-out infinite}
.bs-tovabb:active{transform:translateY(2px)}
@keyframes bs-tovabb-pulzal{0%,100%{box-shadow:0 0 0 rgba(246,195,60,.6)}50%{box-shadow:0 0 14px rgba(246,195,60,.9)}}
.bs-gyujtott{margin-left:auto;white-space:nowrap;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;color:#fff6d2;
  text-shadow:0 0 14px rgba(246,195,60,.7);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------ bónusz-mini (0902) */
/* Lásd az index.html #bonuszMini melletti fejléc-kommentet a hibaosztályért.
   Ugyanaz a "kis, ÁLLANDÓAN fix helyettes" minta, mint a `.jackpot-mini`
   (b82f2273) -- FÖLÉ kell kerülnie a `.jobb-felso`/`.jackpot-mini` sarok-
   dobozoknak (z-index:40), mert épp AZOK takarták el a `.bonusz-sav`-ot,
   amikor az a legördítés miatt a képernyő teteje közelébe került. */
.bonusz-mini{
  /* bottom:64px, NEM 14px: LEMÉRVE (0902), hogy 12-14px-en pont az
     `.automata-futas` sávjába lóg -- az a sáv PONT akkor is látszik, amikor
     ennek a gombnak látszania kell (automatából nyílt bónusz), tehát a két
     fix elem konkrétan egyszerre van a képernyőn. A magasabb pozíció a
     `.automata-futas`/`.bemutato` sávok fölé kerül, függetlenül a
     szélességtől (azok balra/jobbra ülnek, ez középen). */
  position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:41;
  font-family:'Cinzel',serif;font-weight:800;letter-spacing:.06em;font-size:13px;
  padding:9px 20px;border-radius:24px;cursor:pointer;border:1px solid rgba(0,0,0,.25);
  background:linear-gradient(180deg,#f6c33c,#c98a08);color:#2c0710;
  min-height:44px;box-shadow:0 4px 14px rgba(0,0,0,.5);
  animation:bs-tovabb-pulzal 1.1s ease-in-out infinite;
}
.bonusz-mini:active{transform:translateX(-50%) translateY(2px)}

/* --------------------------------------- alsó sávok (forrósag + strike), 2026-08-30 */
/* Közös burok, NORMÁL FOLYÁSBAN a rács ALATT (0830 esti javítás, lásd a
   0830-i forróság-sávok tekercs-takarásáról szóló brief-et). A korábbi
   `position:absolute;bottom:0` a régi egy-soros "BÓNUSZIG" harang-sáv
   öröksége volt -- az csak porgetés közben villant fel, nem versenyzett a
   tekercsekkel. Amint a burok két, EGYSZERRE látszó sávot kapott (dupla
   magasság), ugyanaz az abszolút pozíció már a mező alsó sorára tapadt rá
   (4/12 cella fedve mind 1440-en, mind 390-en -- lemérve
   forrosag-huzas-kapu.js melletti Playwright-méréssel). A `.mezo-keret`-nek
   nincs saját layout-módja (block), így a `.mezo` utáni normál-folyású elem
   magától alá kerül -- a köztük álló `.bonusz-sav` abszolút pozíciójú, nem
   foglal helyet, tehát nem tolja el. A burok így MINDIG a rács alatt, saját
   helyén áll, egyetlen tekercs-cellát sem fed. */
.also-savok{display:flex;flex-direction:column;margin-top:8px}

/* forrósagjelző: 2026-09-01-én a régi szöveges kijelző törölve (Zoltán TG
   31591: szöveges helyett képi kell) -- a képi réteg (.forrosag-hatter,
   lásd feljebb a "harang-háttér" szekciót) maradt. */

/* ------------------------------------------------------ strike-sáv (2026-08-29-i brief) */
.strike-sav{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:6px 12px;pointer-events:none;
  background:linear-gradient(0deg,rgba(43,20,2,.92) 25%,rgba(43,20,2,0));
}
.ss-cim{font-family:'Cinzel',serif;font-weight:800;letter-spacing:.13em;font-size:10.5px;
  color:var(--arany-vil);text-transform:uppercase;white-space:nowrap}
.ss-track{flex:1 1 60px;min-width:50px;height:8px;border-radius:5px;background:rgba(0,0,0,.55);
  box-shadow:inset 0 0 0 1px rgba(246,195,60,.28);overflow:hidden}
.ss-toltes{height:100%;width:0%;border-radius:5px;
  background:linear-gradient(90deg,var(--arany-sot),var(--arany));transition:width 280ms ease-out}
.ss-szamlalo{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12.5px;
  color:var(--arany-vil);font-variant-numeric:tabular-nums;white-space:nowrap}
.ss-uzenet{flex-basis:100%;font-size:11px;color:var(--halvany);letter-spacing:.02em}
/* a küszöb előtti utolsó két nyerésnél feszült állapotba vált (4. tétel) */
.strike-sav.feszult{background:linear-gradient(0deg,rgba(74,5,16,.94) 25%,rgba(74,5,16,0))}
.strike-sav.feszult .ss-toltes{background:linear-gradient(90deg,#ffd54a,var(--piros))}
.strike-sav.feszult .ss-cim,.strike-sav.feszult .ss-szamlalo{animation:kozelites-villog 520ms ease-in-out infinite}
.strike-sav.feszult .ss-uzenet{color:#ffd0d4;font-weight:700}
.strike-sav.utolso .ss-uzenet{
  font-size:14px;font-weight:800;letter-spacing:.06em;color:#fff2cf;
  text-shadow:0 0 12px rgba(255,47,61,.75);
  animation:strike-utolso-villog 420ms ease-in-out infinite;
}
@keyframes strike-utolso-villog{0%,100%{opacity:1}50%{opacity:.55}}

/* --------------------------------- 3. oszlop lassítása közelítő harangoknál (3. tétel) */
.oszlop.kozelit-lassit{animation:kozelit-oszlop-pulzal 340ms ease-in-out infinite}
@keyframes kozelit-oszlop-pulzal{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.3) drop-shadow(0 0 9px rgba(255,47,61,.6))}
}

/* --------------------------------------------------------- állapotsor */
.allapotsor{display:grid;grid-template-columns:.9fr 1.7fr .9fr auto;gap:10px;align-items:stretch;margin-top:12px}
.doboz{
  border-radius:10px;padding:7px 12px;display:flex;flex-direction:column;justify-content:center;gap:2px;
  background:linear-gradient(180deg,#1b0308,#310811);
  border:1px solid rgba(246,195,60,.28);
}
.cimke{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--halvany)}
.ertek{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:25px;color:#fff2cf;font-variant-numeric:tabular-nums}
.ertek.nyert{color:var(--arany-vil);text-shadow:0 0 14px rgba(246,195,60,.55)}

/* ---------------------------------- megforgatási követelmény sáv (2. tétel) */
.bonusz-zar-sor{
  margin-top:9px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  border-radius:10px;padding:6px 12px;
  background:linear-gradient(180deg,#1b0308,#310811);
  border:1px solid rgba(180,92,255,.35);
}
.bz-cim{font-family:'Cinzel',serif;font-weight:800;letter-spacing:.1em;font-size:10px;
  color:var(--sz-major);text-transform:uppercase;white-space:nowrap}
.bz-osszeg{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;
  color:#fff2cf;font-variant-numeric:tabular-nums;white-space:nowrap}
.bz-track{flex:1 1 80px;min-width:60px;height:7px;border-radius:5px;background:rgba(0,0,0,.55);
  box-shadow:inset 0 0 0 1px rgba(180,92,255,.3);overflow:hidden}
.bz-toltes{height:100%;width:0%;border-radius:5px;
  background:linear-gradient(90deg,#7a3fb0,var(--sz-major));transition:width 240ms ease-out}
.bz-hatralek{font-size:11.5px;color:var(--halvany);white-space:nowrap}
.bz-figyelmezetes{flex-basis:100%;font-size:11px;color:var(--sz-grand);line-height:1.35}
/* --------------------------------------------------------- tét-csúszka */
.tet-csuszka-sor{display:flex;align-items:center;gap:9px;min-width:0}
.tet-csuszka{
  -webkit-appearance:none;appearance:none;flex:1;min-width:64px;height:26px;
  background:transparent;cursor:pointer;touch-action:pan-x;
}
.tet-csuszka::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;
  background:linear-gradient(90deg,#8a5a06,#f6c33c);
  border:1px solid rgba(246,195,60,.35);
}
.tet-csuszka::-moz-range-track{
  height:6px;border-radius:999px;
  background:linear-gradient(90deg,#8a5a06,#f6c33c);
  border:1px solid rgba(246,195,60,.35);
}
.tet-csuszka::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9px;
  border-radius:50%;cursor:grab;
  background:linear-gradient(180deg,#ffe28a,#e0a316);
  border:2px solid #fff0bd;box-shadow:0 0 10px rgba(246,195,60,.6), 0 2px 4px rgba(0,0,0,.5);
}
.tet-csuszka::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;cursor:grab;border:none;
  background:linear-gradient(180deg,#ffe28a,#e0a316);
  border:2px solid #fff0bd;box-shadow:0 0 10px rgba(246,195,60,.6), 0 2px 4px rgba(0,0,0,.5);
}
.tet-csuszka:active::-webkit-slider-thumb{cursor:grabbing}
.tet-csuszka:focus-visible::-webkit-slider-thumb{outline:2px solid #fff2cf;outline-offset:2px}
.tet-csuszka-ertek{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;
  color:#ffe28a;white-space:nowrap;min-width:2.5em;text-align:right;
  font-variant-numeric:tabular-nums;
}
.porget{
  min-width:168px;border:none;border-radius:12px;cursor:pointer;padding:8px 22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  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);
  transition:transform 90ms ease, box-shadow 90ms ease;
  /* Nyomva tartott pörgetés (jatek.js, porgetHoldBekot): hosszú érintésre
     mobilon NE jöjjön fel szöveg-kijelölés/nagyítós lupa/callout, plusz a
     böngésző NE kezelje panelezésként/görgetésként a gombon tartott ujjat. */
  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{filter:saturate(.35) brightness(.72);cursor:default}
.porget-felirat{font-family:'Cinzel',serif;font-weight:800;letter-spacing:.10em;font-size:17px}
.porget-tet{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:600;opacity:.78}

.labjegyzet{margin-top:9px;text-align:center;font-size:11px;color:var(--halvany)}
.labjegyzet-sor{margin-top:9px;display:flex;justify-content:center;gap:14px}
.labjegyzet-sor .labjegyzet{margin-top:0}

/* 2026-08-29: bónusz-vásárlás gomb, plusz az alsó RTP-jelzés. */
.bonusz-vasarlas-sor{margin-top:10px;display:flex;justify-content:center}
.bonusz-vasarlas-gomb{
  border:1px solid var(--arany-sot);border-radius:10px;cursor:pointer;padding:8px 18px;
  display:flex;align-items:center;gap:10px;background:rgba(246,195,60,.08);
  color:var(--arany-vil);font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:14px;transition:background 120ms ease;
}
.bonusz-vasarlas-gomb:hover{background:rgba(246,195,60,.16)}
.bonusz-vasarlas-gomb:disabled{filter:saturate(.4) brightness(.7);cursor:default}
.bv-ar{font-weight:700;color:var(--arany);font-variant-numeric:tabular-nums}
.rtp-jelzes{
  margin-top:8px;text-align:center;font-size:10px;letter-spacing:.04em;
  color:var(--halvany);opacity:.62;
}
.info-nyit{background:none;border:none;cursor:pointer;font:inherit;text-decoration:underline;
  text-underline-offset:2px;padding:2px}
.info-nyit:hover{color:#f6c33c}

/* ---------------------------------------------------- kifizetési tábla */
.info-lap{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(6,2,4,.72);padding:16px}
.info-doboz{width:min(420px,100%);max-height:80vh;overflow:auto;border-radius:14px;
  background:linear-gradient(180deg,#26060c,#170308);border:1px solid rgba(246,195,60,.35);
  box-shadow:0 20px 60px rgba(0,0,0,.6);padding:16px 18px}
/* A Kai-féle kifizetési tábla + szabály-lap szélesebb rácsot kíván (lásd
   kkp-komponens.css), mint a sima kifizetés-kérő panel -- csak ITT bővítve. */
.info-doboz-szeles{width:min(900px,100%)}
.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:#f6c33c;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:#f6c33c}
.info-tabla{width:100%;border-collapse:collapse;font-size:13px}
.info-tabla th{text-align:left;padding:6px 8px;color:var(--halvany);font-size:11px;
  text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid rgba(246,195,60,.25)}
.info-tabla td{padding:6px 8px;border-bottom:1px solid rgba(246,195,60,.10);color:#fff2cf}
.info-tabla td:last-child,.info-tabla th:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- kifizetés */
.kifizetes-urlap{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;
  padding-bottom:14px;border-bottom:1px solid rgba(246,195,60,.18)}
.kifizetes-urlap label{font-size:11px;color:var(--halvany);text-transform:uppercase;letter-spacing:.06em}
.kifizetes-sor-urlap{display:flex;gap:8px}
.kifizetes-sor-urlap input{flex:1;min-width:0;border-radius:8px;border:1px solid rgba(246,195,60,.35);
  background:#0e0206;color:#fff2cf;padding:8px 10px;font:inherit;font-size:15px}
.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-info{font-size:12px;color:var(--halvany);line-height:1.5;margin:0}
.kifizetes-figyelmezetes{color:var(--sz-grand)}
.kifizetes-lista{display:flex;flex-direction:column;gap:8px}
.kifizetes-sor{display:flex;align-items:center;gap:10px;font-size:13px;padding:8px 0;
  border-bottom:1px solid rgba(246,195,60,.10)}
.kifizetes-sor span:first-child{font-weight:700;color:#fff2cf;min-width:84px}
.kifizetes-allapot{flex:1;color:var(--halvany)}
.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}
.kifizetes-ures{color:var(--halvany);font-size:13px;text-align:center;margin:6px 0}

/* --------------------------------------------------- Nyeremény-doboz 2x gomb
   (kártya <duplazas-nem-akaszt-0901>, Zoltán: "nem fogok minden alkalommal
   gombot nyomni -- a Nyeremény boxba írja ki az összeget, mellette legyen
   egy piros 2x gomb. Ha nem nyom rá, NEM akasztja meg a játékot"). A gomb
   a #utolsoNyeremeny MELLETT áll, a normál játékmenetet SOSE blokkolja --
   csak akkor jelenik meg, ha az utolsó pörgetésnek van duplázható
   nyereménye (lásd js/jatek.js duplazasGombFrissit()), új pörgetésnél
   eltűnik. 44x44px alatti mérete tiltott (MÉRCE 2. pont), ezért fix
   méretű kör, nem szöveg-szélességtől függő pill. */
.nyeremeny-2x-gomb{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-left:8px;border:none;border-radius:50%;cursor:pointer;
  font-family:'Cinzel',serif;font-weight:800;letter-spacing:.02em;font-size:14px;
  color:#fff2cf;background:linear-gradient(180deg,#ff5c5c 0%,#c81b1b 55%,#7a0d0d 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12) inset;
  animation:nyeremeny-2x-lelegzik 1600ms ease-in-out infinite;
}
.nyeremeny-2x-gomb:hover{filter:brightness(1.08)}
@keyframes nyeremeny-2x-lelegzik{
  0%,100%{box-shadow:0 4px 10px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12) inset, 0 0 0 0 rgba(200,27,27,.5)}
  50%{box-shadow:0 4px 10px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12) inset, 0 0 0 6px rgba(200,27,27,0)}
}

/* ------------------------------------------------- nyeremény-duplázás popover
   (kártya 72ff87c6) -- ugyanaz az .info-lap/.info-doboz keret, mint az
   automata/kifizetés paneleknél. CSAK TELJES összegre megy (Zoltán 1.
   kikötése): a kassza-felirat mindig a teljes kockáztatott összeg, nincs
   csúszka, nincs "fele" gomb. */
.duplazas-kassza{font-size:13px;color:var(--halvany);margin:0 0 4px}
.duplazas-kassza b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:32px;color:#fff2cf;font-variant-numeric:tabular-nums;margin-top:2px}
.duplazas-kor{font-size:12px;color:var(--halvany);margin:0 0 14px}
/* A valasztas MAGAN A LEFORDITOTT LAPON tortenik (Zoltan TG 31926, kartya
   5470d5d2): a #duplazasPiros/#duplazasFekete <button> (jatek.js
   duplazasPopoverFuttat) ket nagy, felig-attetszo zonakent fedi a lap ket
   felet -- nem kulon gombsor alatta. A kartya-hat minta ugyanaz, mint a
   .bj-lap-rejtett. */
.duplazas-valaszto{position:relative;width:180px;height:118px;margin:2px auto 12px;
  border-radius:8px;overflow:hidden;
  background:repeating-linear-gradient(45deg,#8a5a06 0 6px,#6d4402 6px 12px);
  box-shadow:0 3px 9px rgba(0,0,0,.55), inset 0 0 0 2px rgba(246,195,60,.5)}
.duplazas-zona{position:absolute;top:0;bottom:0;width:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font:inherit;
  font-family:'Cinzel',serif;font-weight:800;letter-spacing:.08em;font-size:14px;
  color:#fff2cf;text-shadow:0 1px 3px rgba(0,0,0,.7);transition:transform 90ms,filter 90ms}
.duplazas-zona:active{transform:scale(.97)}
.duplazas-zona:focus-visible{outline:3px solid #f6c33c;outline-offset:-3px;z-index:1}
.duplazas-zona-piros{left:0;background:linear-gradient(180deg,rgba(255,92,92,.82) 0%,rgba(200,27,27,.82) 55%,rgba(122,13,13,.82) 100%)}
.duplazas-zona-fekete{right:0;background:linear-gradient(180deg,rgba(90,90,90,.82) 0%,rgba(40,40,40,.82) 55%,rgba(10,10,10,.82) 100%)}
.duplazas-zona-piros:hover{filter:brightness(1.1)}
.duplazas-zona-fekete:hover{filter:brightness(1.25)}
.duplazas-eredmeny{font-size:13px;color:#fff2cf;line-height:1.5;margin:0 0 12px;
  padding:10px 12px;border-radius:8px;background:rgba(246,195,60,.08)}
.duplazas-veg-gombsor{display:flex;gap:8px;flex-wrap:wrap}

/* ---------------------------------------------- duplázás kártyapakli-látvány
   (kártya <duplazas-nem-akaszt-0901>, Zoltán: "valóban szeretném látni a
   blackjackból ismert kártyapaklit... A gombnyomás után keverés-hang, aztán
   jön a lap és eredmény. Animatív, szórakoztató legyen"). A .bj-lap* rész a
   blackjack.css PONTOS másolata (js/lap-rajzolo.js rajzolja mindkét helyen),
   mert a Fürtös/Kaszi Bell lap nem tölti be a blackjack.css-t. */
.bj-lap{
  position:relative;width:52px;height:74px;border-radius:6px;
  background:linear-gradient(180deg,#fbf7ec,#eee5cf);
  box-shadow:0 3px 7px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.12);
  display:flex;flex-direction:column;justify-content:space-between;padding:3px 4px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
}
.bj-lap.bj-piros{color:var(--piros-lap)}
.bj-lap.bj-fekete{color:var(--fekete-lap)}
.bj-lap-rang{font-size:14px;line-height:1}
.bj-lap-szin-nagy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:22px;line-height:1}
.bj-lap-rang.bj-lent{align-self:flex-end;transform:rotate(180deg)}
.bj-lap.bj-lap-kiraly{background:linear-gradient(180deg,#fff6d2,#f6c33c 42%,#eee5cf)}
.bj-lap-portre{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:36px;height:36px;border-radius:50%;object-fit:cover;
  border:2px solid var(--arany-sot);
  box-shadow:0 0 6px rgba(246,195,60,.55), inset 0 0 0 1px rgba(0,0,0,.4);
}
.bj-lap-rejtett{
  background:repeating-linear-gradient(45deg, #8a5a06 0 6px, #6d4402 6px 12px);
  box-shadow:0 3px 7px rgba(0,0,0,.55), inset 0 0 0 2px rgba(246,195,60,.5);
}

.duplazas-lap-terulet{display:flex;align-items:center;justify-content:center;
  min-height:118px;margin:2px 0 12px;perspective:600px}
.duplazas-pakli{display:flex}
.duplazas-pakli .bj-lap{margin-left:-38px}
.duplazas-pakli .bj-lap:first-child{margin-left:0}
.duplazas-pakli.keveredik .bj-lap{animation:duplazas-pakli-kever 700ms ease-in-out}
.duplazas-pakli.keveredik .bj-lap:nth-child(2){animation-delay:60ms}
.duplazas-pakli.keveredik .bj-lap:nth-child(3){animation-delay:120ms}
@keyframes duplazas-pakli-kever{
  0%{transform:translateX(0) rotate(0)}
  25%{transform:translateX(-7px) rotate(-5deg)}
  50%{transform:translateX(6px) rotate(4deg)}
  75%{transform:translateX(-4px) rotate(-2deg)}
  100%{transform:translateX(0) rotate(0)}
}
.duplazas-huzott-hely{margin-left:10px;min-width:52px;min-height:74px}
.duplazas-huzott-hely .bj-lap{animation:duplazas-lap-fordul 460ms ease}
@keyframes duplazas-lap-fordul{
  0%{transform:rotateY(85deg) scale(.88);opacity:.15}
  55%{transform:rotateY(0deg) scale(1.05);opacity:1}
  100%{transform:rotateY(0deg) scale(1)}
}
/* A sor MINDIG kint van, elso korben is (Zoltan TG 31926, kartya 5470d5d2:
   "legyen kint a korabbi utolso lapok sora") -- ures allapotban a
   duplazasElozmenyKiir() (jatek.js) egy halvany hely-jelolot rajzol bele
   helyette a `.duplazas-elozmeny:empty{display:none}` regi szabaly helyett,
   AZONOS foglalt magassaggal, hogy az elso lap megjelenesekor ne ugorjon a
   felulet. */
.duplazas-elozmeny{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;
  min-height:62px;margin:0 0 12px;padding-top:10px;border-top:1px solid rgba(246,195,60,.14)}
.duplazas-elozmeny .bj-lap{width:34px;height:48px;padding:2px 3px}
.duplazas-elozmeny .bj-lap-rang{font-size:9.5px}
.duplazas-elozmeny .bj-lap-szin-nagy{font-size:14px}
.duplazas-elozmeny .bj-lap-portre{width:20px;height:20px;border-width:1px}
.duplazas-elozmeny-helyjelolo{font-size:11px;color:var(--halvany);font-style:italic}
/* Elválasztó két duplázás-MENET lapjai között (Zoltán TG 32144, kártya
   7d6de538) -- a lánc most a lap-újratöltésig megmarad, ez teszi láthatóvá,
   melyik lapok tartoztak egy lánchoz. */
.duplazas-elozmeny-hatarolo{width:1px;height:38px;align-self:center;flex:none;
  background:repeating-linear-gradient(to bottom,rgba(246,195,60,.5) 0 4px,transparent 4px 8px);
  margin:0 2px}

/* ------------------------------------------------------ automata pörgetés */
.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}

/* --------------------------------------------------------- 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-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-kod{color:var(--halvany);font-size:11px;font-family:ui-monospace,'Cascadia Code',monospace;letter-spacing:.04em}
.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 rgba(246,195,60,.45);background:rgba(58,8,18,.6);
  color:#ffe07a;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 küldetés */
.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}

/* --------------------------------------------------- napi szerencsekerék */
/* Valodi forgo kerek: a .kerek-korlap egyetlen elem, amit a Web Animations
   API forgat (transform), a szektor-cimkek gyerekei, tehat egyutt forognak.
   A --kerek-meret a mobil 390-en is elfer (min(420px,100%) info-doboz,
   12-14px padding), lasd store/brief-theo-szerencsekerek-valodi-0829.txt. */
.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}
/* A padding+min-height a 44x44px erintheto-terulet miatt (kártya 874d1b8a
   MERCE 6. pont, a fooldali allando kerek mereset) -- ugyanez a valtoztatas
   a furtos.css sajat kerek-porget masolatan is atvezetve, mert a Furtos
   oldal nem ezt a fajlt, hanem a sajatjat tolti be. */
.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)}
.minta-jel{
  margin-left:6px;padding:1px 7px;border-radius:20px;font-size:10px;letter-spacing:.08em;
  color:#ffd9a0;background:rgba(246,195,60,.12);border:1px solid rgba(246,195,60,.35);
}

/* -------------------------------------------------- nyeremény-animációk */
.hatter-reteg{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.reszecske{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.nyeremeny-reteg{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;pointer-events:none}
.hatter-reteg .fatyol{position:absolute;inset:0;background:#000;opacity:0;animation:fatyol-be 320ms ease forwards}
@keyframes fatyol-be{to{opacity:var(--fatyol,.5)}}

/* A korabbi, a nyeremeny-retegbe nyilo "Duplazas/Beteszem" felkinalas
   (kartya 72ff87c6, .nyeremeny-reteg.duplazhato/.nyeremeny-dupla-*) TOROLVE
   -- pontosan ez akasztotta meg a jatekot minden nyeres utan (kartya
   <duplazas-nem-akaszt-0901>, Zoltan: "minden alkalommal nem fogok gombot
   nyomni"). A helyette allo, NEM blokkolo felkinalas a `.nyeremeny-2x-gomb`,
   lasd feljebb. */

/* kicsi: nincs elsötétítés, csak egy felúszó pirula */
.sz-kicsi .pirula{
  position:relative;padding:6px 16px;border-radius:22px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;color:#2a1400;
  background:linear-gradient(180deg,#ffeaa0,#e8b21c);
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  animation:pirula 1500ms cubic-bezier(.2,1.5,.4,1) forwards;
}
@keyframes pirula{
  0%{transform:translateY(26px) scale(.55);opacity:0}
  22%{transform:translateY(0) scale(1);opacity:1}
  70%{transform:translateY(-14px) scale(1);opacity:1}
  100%{transform:translateY(-42px) scale(.96);opacity:0}
}

/* közepes: gyűrű-lökés, plusz görgő szám */
.nyeremeny-reteg .tabla{position:relative;z-index:3;text-align:center}
.nyeremeny-reteg .tabla::after{
  content:'';position:absolute;inset:-46px -90px;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(8,1,3,.92) 0%, rgba(8,1,3,.72) 52%, transparent 82%);
}
.gyuru{
  position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;
  border:3px solid rgba(246,195,60,.85);animation:gyuru 900ms ease-out forwards;
}
.gyuru.k2{animation-delay:180ms}
.gyuru.k3{animation-delay:360ms}
@keyframes gyuru{0%{transform:scale(.25);opacity:.95}100%{transform:scale(2.4);opacity:0}}
.felirat{
  font-family:'Cinzel',Georgia,serif;font-weight:800;letter-spacing:.12em;
  background:linear-gradient(180deg,#fff8dc 0%,#f6c33c 48%,#b97c05 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(90,40,0,.85)) drop-shadow(0 0 26px rgba(255,190,60,.55));
}
.sz-kozepes .felirat{font-size:26px;display:block;margin-bottom:4px}
.osszeg{
  display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;line-height:1;
  color:#fff8dc;text-shadow:0 3px 0 rgba(90,40,0,.9),0 0 34px rgba(255,196,60,.85);
  font-variant-numeric:tabular-nums;
}
.sz-kozepes .osszeg{font-size:54px;animation:osszeg-be 420ms cubic-bezier(.2,1.7,.4,1)}
@keyframes osszeg-be{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}

/* sorozat-bónusz: a sorozat-szám kicsi felül, a szorzó plusz a görgő
   végösszeg legalább akkora, mint a sima "közepes" nyeremény-összeg --
   korábban egy alul villanó szöveg volt, alig látszott (lásd jatek.js
   sorozatBonuszAnim()) */
.sz-sorozat .felirat{font-size:22px;display:block;margin-bottom:2px}
.sz-sorozat .sor-db{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:16px;
  letter-spacing:.08em;color:#ffe9b8;margin-bottom:8px;
}
.sz-sorozat .szorzo{
  display:block;font-family:'Cinzel',Georgia,serif;font-weight:800;font-size:64px;line-height:1;
  background:linear-gradient(180deg,#fff8dc 0%,#f6c33c 48%,#b97c05 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(90,40,0,.85)) drop-shadow(0 0 26px rgba(255,190,60,.55));
  animation:osszeg-be 420ms cubic-bezier(.2,1.7,.4,1);
}
/* a tételes kiírás (2026-08-29-i brief, 5. tétel): alap plusz strike-bónusz
   külön sorban, a görgetett végösszeg fölött -- lásd sorozatBonuszAnim(),
   jatek.js. */
.sz-sorozat .sz-tetelek{
  display:flex;flex-direction:column;gap:2px;margin:6px 0 4px;
  font-family:'Barlow Condensed',sans-serif;font-size:15px;color:#ffe9b8;
}
.sz-sorozat .sz-tetelek b{color:#fff8dc;font-variant-numeric:tabular-nums}
.sz-sorozat .sz-osszesen-cim{display:block;font-size:12px;letter-spacing:.14em;
  color:#ffe9b8;text-transform:uppercase}
.sz-sorozat .osszeg{font-size:44px;margin-top:2px;animation:osszeg-be 420ms cubic-bezier(.2,1.7,.4,1) 80ms backwards}

/* nagy: forgó fénylegyező, erősebb minden */
.sugarak{
  position:absolute;left:50%;top:50%;width:1400px;height:1400px;margin:-700px 0 0 -700px;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,214,120,.22) 0deg 6deg, transparent 6deg 19deg);
  animation:sugar-forog 9s linear infinite;
  -webkit-mask:radial-gradient(circle,transparent 0%,#000 20%,#000 34%,transparent 60%);
  mask:radial-gradient(circle,transparent 0%,#000 20%,#000 34%,transparent 60%);
}
@keyframes sugar-forog{to{transform:rotate(360deg)}}
.sz-nagy .felirat{font-size:38px;display:block;margin-bottom:6px}
.sz-nagy .osszeg{font-size:78px;animation:osszeg-be 480ms cubic-bezier(.2,1.7,.4,1)}
.sz-nagy .tabla{animation:tabla-lukt 1300ms ease-in-out infinite}
@keyframes tabla-lukt{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

/* hatalmas: betűnként beugró felirat, halo */
.sz-hatalmas .felirat{font-size:46px;display:block;margin-bottom:6px}
.sz-hatalmas .szo{display:inline-block;white-space:nowrap}
.sz-hatalmas .betu{display:inline-block;animation:betu-be 460ms cubic-bezier(.2,1.8,.4,1) backwards}
@keyframes betu-be{0%{transform:translateY(-52px) scale(1.9) rotate(-11deg);opacity:0}100%{transform:none;opacity:1}}
.sz-hatalmas .osszeg{font-size:96px}
.halo{
  position:absolute;left:50%;top:50%;width:820px;height:820px;margin:-410px 0 0 -410px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,206,90,.42) 0%,rgba(255,150,20,.18) 34%,transparent 66%);
  animation:halo-lukt 1500ms ease-in-out infinite;
}
@keyframes halo-lukt{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.16);opacity:1}}

/* jackpot: szint-színű, koncentrikus gyűrűk */
.sz-jackpot .felirat{font-size:34px;letter-spacing:.20em;display:block;margin:-6px 0 4px}
.sz-jackpot .jp-cim{
  display:block;font-family:'Cinzel',serif;font-weight:800;font-size:62px;letter-spacing:.08em;
  color:var(--jpszin);
  text-shadow:0 0 8px #fff,0 0 30px var(--jpszin),0 0 70px var(--jpszin),0 4px 0 rgba(0,0,0,.75);
  animation:jp-cim 900ms cubic-bezier(.2,1.7,.4,1);
}
@keyframes jp-cim{0%{transform:scale(2.6) rotate(6deg);opacity:0;filter:blur(9px)}100%{transform:none;opacity:1;filter:none}}
.sz-jackpot .osszeg{font-size:86px}
.sz-jackpot .sugarak{background:repeating-conic-gradient(from 0deg,
  color-mix(in srgb,var(--jpszin) 40%,transparent) 0deg 5deg, transparent 5deg 16deg);
  animation-duration:6s}
.jgyuru{
  position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;
  border:4px solid var(--jpszin);animation:jgyuru 1600ms ease-out infinite;
}
.jgyuru.g2{animation-delay:400ms}
.jgyuru.g3{animation-delay:800ms}
.jgyuru.g4{animation-delay:1200ms}
@keyframes jgyuru{0%{transform:scale(.2);opacity:.9}100%{transform:scale(3.6);opacity:0}}
.jp-alszoveg{display:block;margin-top:4px;font-size:13px;color:#ffe0b0;letter-spacing:.10em}

/* bónuszba lépés */
.bonusz-belepo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.fuggony{position:absolute;inset:0;background:linear-gradient(180deg,#7a3a00,#2a0f00);animation:fuggony 1900ms ease forwards}
@keyframes fuggony{0%{clip-path:inset(50% 0 50% 0)}18%{clip-path:inset(0 0 0 0)}78%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(50% 0 50% 0)}}
.bb-tartalom{position:relative;text-align:center;animation:bb-tart 1900ms ease forwards}
@keyframes bb-tart{0%{opacity:0;transform:scale(.6)}20%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
.bb-cim{font-family:'Cinzel',serif;font-weight:800;font-size:52px;letter-spacing:.10em;
  background:linear-gradient(180deg,#fff8dc,#f6c33c 50%,#b97c05);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(255,190,60,.8))}
.bb-alcim{display:block;margin-top:6px;font-size:15px;color:#ffe9b8;letter-spacing:.12em}
.bb-harangok{display:flex;gap:14px;justify-content:center;margin-top:14px}
.bb-harangok svg{width:52px;height:52px;transform-origin:50% 12%;
  animation-name:bb-harang,bb-cseng;
  animation-timing-function:cubic-bezier(.2,1.7,.4,1),ease-in-out;
  animation-fill-mode:backwards,backwards}
@keyframes bb-harang{0%{transform:translateY(-90px) scale(.3) rotate(-30deg);opacity:0}100%{transform:none;opacity:1}}
/* A csengés: a lengő mozgás akkor indul, amikor a harang "landolt" -- ezt a
   JS az animation-delay második értékével időzíti a hangeffekttel együtt. */
@keyframes bb-cseng{
  0%{transform:rotate(0)}
  22%{transform:rotate(15deg)}
  48%{transform:rotate(-11deg)}
  72%{transform:rotate(6deg)}
  90%{transform:rotate(-3deg)}
  100%{transform:rotate(0)}
}

/* ---------------------------------------------------------- admin-link */
.admin-link{position:fixed;left:12px;top:12px;z-index:40;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:rgba(246,195,60,.55);padding:4px 9px;border-radius:6px;
  background:rgba(20,4,8,.7);border:1px solid rgba(246,195,60,.25)}
.admin-link:hover{color:#f6c33c;border-color:rgba(246,195,60,.5)}

/* ---------------------------------------------------- GRAND-jelvény (fix) */
/* Miért fixed, nem sticky: lásd a `.letra` fenti jegyzetét plusz
   index.html jegyzetét (kártya 1f60731b folytatása, 2026-09-02 délelőtt).
   Ugyanaz a mérete/pozíció-mintája, mint a `.jobb-felso`-nak, csak a bal
   oldalon (az admin-linket csak a fooldal használja, itt a sarok szabad). */
.jackpot-mini{position:fixed;left:12px;top:12px;z-index:40;
  display:flex;align-items:baseline;gap:6px;padding:4px 10px;
  border-radius:22px;background:rgba(20,4,8,.82);
  border:1px solid rgba(246,195,60,.4);min-height:44px;box-sizing:border-box}
/* Görgetés közben a `.letra` sáv átmenetileg pont ezen a sávon halad át --
   ilyenkor a jelvény felesleges (a valódi GRAND-doboz ott van előtte), a
   takarás pedig zavaró. A `jackpotMiniAtfedesFrissit()` (jatek.js) teszi
   rá/veszi le képpont-pontos átfedés-méréssel, görgetéskor plusz átméretezéskor.
   SZÁNDÉKOSAN nincs opacity-átmenet: egy lágy áttűnés köztes kockáin a
   jelvény MÉG részben átlátszó, MÁR átfedésben -- ez ugyanaz a hibaosztály,
   csak felére hígítva. A metszet/opacitás invariáns (lásd
   admin/teszt/jackpot-mini-badge-meres-0902.mjs M3b) csak azonnali váltásnál
   tartható pontosan. */
.jackpot-mini.jm-rejtve{opacity:0;pointer-events:none}
.jm-nev{font-family:'Cinzel',Georgia,serif;font-weight:800;font-size:10px;
  letter-spacing:.12em;color:var(--sz-grand, #ff5a6a)}
.jm-ertek{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff6d2 0%,#f6c33c 55%,#c98a08 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* --------------------------------------------------- hang/gyors-kapcsoló */
.jobb-felso{position:fixed;right:12px;top:12px;z-index:40;display:flex;
  flex-direction:column;align-items:flex-end;gap:6px}
.hang-kapcsolo{font-size:11px;
  font-family:inherit;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  color:rgba(246,195,60,.55);padding:4px 9px;border-radius:6px;
  background:rgba(20,4,8,.7);border:1px solid rgba(246,195,60,.25)}
.hang-kapcsolo:hover{color:#f6c33c;border-color:rgba(246,195,60,.5)}
.hang-kapcsolo[aria-pressed="false"]{color:rgba(255,217,217,.55);border-color:rgba(255,80,80,.3);
  text-decoration:line-through}
/* A GYORS-kapcsolónál a "false" a normál, alap állapot -- ott nem áthúzás
   kell, hanem a "true" (bekapcsolt villámgyors) legyen a kiemelt. */

/* Vissza a fooldalra (2026-09-01, Zoltan TG 31610, majd ujra 2026-09-01
   reggel, kartyak 852f4e2d/228e0b1e: a 26x26-os ikon-valtozat SENKI szamara
   nem volt megtalalhato -- a felirat hianya volt a hiba, nem a gomb
   merete). Az eredeti utkozes oka NEM a gomb szelessege volt, hanem hogy a
   `.letra` semmilyen helyet nem tartott fenn a jobb-felso sarok-savnak
   (lasd ott a `top` ertek jegyzetet) -- azt most megoldottuk, tehat a gomb
   szabadon lehet felirat-meretu. Legalabb 44x44 erintheto felulet (mobil-
   minimum), lathato "Főoldal" felirattal. */
.link-gomb{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 14px;border-radius:22px;cursor:pointer;
  color:rgba(246,195,60,.7);background:rgba(20,4,8,.82);
  border:1px solid rgba(246,195,60,.35);text-decoration:none}
.link-gomb:hover{color:#f6c33c;border-color:rgba(246,195,60,.5)}
.link-gomb svg{display:block;flex:none}
.link-gomb-felirat{font-size:11px;font-family:inherit;letter-spacing:.08em;text-transform:uppercase}
#gyorsKapcsolo[aria-pressed="false"]{color:rgba(246,195,60,.55);border-color:rgba(246,195,60,.25);
  text-decoration:none}
#gyorsKapcsolo[aria-pressed="true"]{color:#2a1200;border-color:#fff0bd;
  background:linear-gradient(180deg,#ffe28a,#e0a316);box-shadow:0 0 12px rgba(246,195,60,.5)}

/* --------------------------------------------------- automata futás-jelző */
.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}

/* ------------------------------------------------------ bemutató-panel */
.bemutato{position:fixed;right:12px;bottom:12px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.bemutato-nyit{
  width:34px;height:34px;border-radius:50%;cursor:pointer;font-weight:700;
  background:rgba(20,4,8,.85);color:#f6c33c;border:1px solid rgba(246,195,60,.5);
}
.bemutato-lap{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:10px;
  background:rgba(14,3,6,.94);border:1px solid rgba(246,195,60,.35);font-size:12px}
.bemutato-lap strong{color:#f6c33c;font-size:11px;letter-spacing:.10em;text-transform:uppercase}
.bemutato-lap button{cursor:pointer;padding:4px 9px;border-radius:6px;font-size:12px;
  background:#2c0710;color:#ffe6b0;border:1px solid rgba(246,195,60,.3);text-align:left}

/* ---------------------------------------------------- asztali magassag
   (Zoltan TG 32799, kartya af62d1b1, tobbszor kert javitas): 172px-es fix
   --cella mellett a jackpot-sor plusz az egyenleg-sor 1280x720-as ablakban
   levagodott, mert a 3 soros racs onmagaban 516px, a korulotte allo
   panelekkel egyutt tobb, mint a lathato magassag. A --cella innentol a
   lathato ablakmagassaghoz igazodik (min() also hatarat a 172px adja, tehat
   nagy, 1920x1080-as kepernyon nem zsugorodik feleslegesen), a 500px a
   racson KIVULI elemek (jackpot-sor, cim, STRIKE-sav, egyenleg/tet/porget-
   sor, tavolsagok) MERT osszmagassaga 1280x720-on -- lasd JELENTES-asztali-
   layout-af62d1b1-0903.md a pontos meresert. */
@media (min-width:901px){
  :root{--cella:min(172px, calc((100vh - 380px) / 3))}
}

/* --------------------------------------------------------------- mobil */
@media (max-width:900px){
  :root{--cella:min(16vw, 112px)}
  body{padding:8px;align-items:flex-start}
  /* MERCE (Zoltan TG, 591px-es kepernyokep, kartya d0bb69b2 alatti kor):
     390 keppontos szelessegen a racs mind a harom sora plusz a porget-gomb
     lathato legyen gorgetes nelkul. A `.szinpad` szekciok kozotti 14px-es
     res mobilon felesleges luxus, szukebbre venni erdemi magassagot ad
     vissza a jatekternek/gombnak, kulon-kulon minden szekcional alig
     eszrevehetoen. Ugyanez az indok a --cella 21vw->17vw, a `.gep-fej`
     margoja, a `.mezo-keret`/`.doboz`/`.porget` parnazasa plusz az
     `.allapotsor` fuggoleges tavolsagai mogott is. */
  .szinpad{gap:6px}
  .letra{grid-template-columns:1fr 1fr;gap:6px}
  .jp{padding:5px 8px 4px}
  .jp-grand .jp-ertek{font-size:29px}
  .jp-ertek{font-size:21px}
  .jp-nev{font-size:12px}
  .jp-grand .jp-nev{font-size:15px}
  .jp-jog{font-size:9px}
  .gep{padding:8px 10px 7px;border-radius:16px}
  .gep-fej{margin-bottom:6px}
  .marka{font-size:15px;letter-spacing:.22em}
  .gep-alcim{font-size:9px}
  .forrosag-jelzo{width:100px;height:100px}
  .forrosag-szam{font-size:12px;padding:1px 7px}
  .forrosag-sor{margin-bottom:6px}
  .mezo-keret{padding:6px}
  .mezo{gap:4px}
  .allapotsor{grid-template-columns:1fr 1fr;gap:5px;margin-top:6px}
  .doboz{padding:4px 12px}
  .tet-doboz{grid-column:1 / -1;order:3}
  .porget{grid-column:1 / -1;order:4;width:100%;min-height:44px;flex-direction:row;gap:10px;align-items:baseline;padding:5px 22px}
  .ertek{font-size:21px}
  .sz-kozepes .felirat{font-size:19px}
  .sz-kozepes .osszeg{font-size:38px}
  .sz-sorozat .felirat{font-size:16px}
  .sz-sorozat .sor-db{font-size:12px}
  .sz-sorozat .szorzo{font-size:40px}
  .sz-sorozat .sz-tetelek{font-size:12px}
  .sz-sorozat .sz-osszesen-cim{font-size:10.5px}
  .sz-sorozat .osszeg{font-size:29px}
  .strike-sav{gap:6px;padding:3px 9px}
  .ss-uzenet{font-size:10px}
  .sz-nagy .felirat{font-size:22px}
  .sz-nagy .osszeg{font-size:48px}
  .sz-hatalmas .felirat{font-size:21px}
  .sz-hatalmas .osszeg{font-size:52px}
  .sz-jackpot .jp-cim{font-size:36px}
  .sz-jackpot .felirat{font-size:20px}
  .sz-jackpot .osszeg{font-size:44px}
  .bb-cim{font-size:30px}
  .bb-alcim{font-size:12px}
  .bb-harangok svg{width:38px;height:38px}
  .bs-cim{font-size:12px}
  .bs-szoveg{display:none}
  .bs-szamlalo-szoveg{display:none}
  .bs-szamlalo{font-size:13px}
  .bonusz-sav{gap:6px;padding:6px 9px}
  .mezo-keret.bonusz{padding-top:40px}
  .bs-gyujtott{font-size:17px}
  .bonusz-zar-sor{padding:6px 9px;row-gap:4px}
  .bz-track{flex:1 1 100%;order:3}
  .bz-hatralek{font-size:10.5px;order:4}
  .halo{width:520px;height:520px;margin:-260px 0 0 -260px}
  .bemutato{right:6px;bottom:6px}
  .admin-link{left:6px;top:6px;font-size:10px;padding:3px 7px}
  .automata-futas{left:6px;bottom:6px;font-size:11px;padding:6px 8px;gap:6px}
  .automata-futas button{font-size:11px;padding:4px 8px}
  .bs-tovabb{font-size:11px;padding:5px 10px}
  .info-doboz{padding:12px 14px}
  .bonusz-vasarlas-gomb{font-size:12px;padding:7px 12px;gap:6px;flex-wrap:wrap;justify-content:center;text-align:center}
  .rtp-jelzes{font-size:9px}
  /* A labjegyzet-sor 1440-en egy sorban fer el, 390-en viszont a het
     link nowrap flexben a viewport ala tolodik (scrollWidth 508 vs 390,
     store/brief-theo-kerek-mobil-labjegyzet-0829.txt). Tordelo sor:
     mindegyik link kattinthato marad gorgetes nelkul, a font/gap szukebb,
     hogy 2 sorba ferjen. */
  .labjegyzet-sor{flex-wrap:wrap;row-gap:6px;column-gap:10px;gap:6px 10px}
  .labjegyzet-sor .labjegyzet{font-size:10.5px}
  .duplazas-kassza b{font-size:26px}
  /* MERCE 4. pont: 390px-en a ket kattintasi zona is 44px fole -- a
     kartya kisebb, de a fele meg mindig ~72x92px, bovel a minimum folott. */
  .duplazas-valaszto{width:150px;height:96px}
  .duplazas-zona{font-size:12px}
  /* MERCE 2/6. pont: 390px-en is 44x44 fole -- a margin szukebb, a meret nem. */
  .nyeremeny-2x-gomb{margin-left:6px}
  .duplazas-pakli .bj-lap,.duplazas-huzott-hely .bj-lap{width:46px;height:64px;border-radius:6px;padding:3px}
  .duplazas-elozmeny .bj-lap{width:30px;height:42px}
}

/* A `.jobb-felso` (jobb felső sarok, fixen 12px-re) ÉS a sticky `.letra`
   ütközése 1040px viewport-szélességig tart, NEM csak a 900px-es mobil-
   töréspontig: a `.szinpad` max-width:800px miatt a `.letra` jobb széle
   828px fölött már nem nő tovább, csak középre igazodik, viszont a
   viewport szűkülése lassabb, mint ez a középre-állás, tehát 901-1040px
   között a jobb szél MÉG mindig a fix sarok alá lóg -- Playwright-méréssel
   járva körül (kártya 852f4e2d, 2026-09-01: fedes-px2 3066 901px-en, 0
   1040px-en). Ezért a `top:122px` felülírás egy 1040px-es, a 900px-es
   mobil-blokktól FÜGGETLEN media query, nem annak bővítése.

   2026-09-01, MÁSODIK hiba ugyanitt (Zoltán mobil-képernyőképe, 591px
   szélesen, kártya d0bb69b2 alatti kör): a `top:122px` a `.letra`-t
   VIZUÁLISAN 122px-re tolja a tetejétől, DE a `position:sticky` a
   DOKUMENTUM-FOLYÁSBAN a natúr (nem-sticky) pozíció szerinti helyet
   foglalja -- ami itt kb. 14px. A különbség (kb. 108px) SEHOL nincs
   lefoglalva, tehát a `.letra` UTÁNI tartalom (a `.gep-fej`, a
   forrósagjelző, majd a `.mezo-keret` teteje) alá csúszik a sticky
   fejlécnek: a négy jackpot-doboz ráfeküdt a tekercsek felső sorára. A
   `margin-top` -- a `top`-tal ellentétben -- VALÓDI helyet foglal a
   folyásban, tehát ugyanerre az értékre állítva a natúr pozíció is 122px-re
   kerül, a sticky-eltolás innentől nulla, a rákövetkező elemek helyesen
   122px-rel lejjebb kezdődnek. A vízszintes/alsó `margin` (a fenti
   `margin:-8px -6px 0` háttér-kilógatás trükkje) változatlan marad, csak a
   `margin-top` felülíródik. */
@media (max-width:1040px){
  .letra{margin-top:122px}
}

/* 900px alatt a `.jobb-felso` (FŐOLDAL/HANG/GYORS) EGY sorba kerül -- Zoltán
   TG (591px-es képernyőkép, kártya d0bb69b2 alatti kör): a három, egymás
   alatt lépcsőzött, mind más szélességű gomb nem csak csúnya, hanem 90px-nyi
   függőleges helyet is pazarolt a szűk telefon-magasságból. Egy sorban a
   három gomb együtt is bőven elfér 360px-től (mérve: kb. 260px széles,
   szemben a legszűkebb mobil-tartalom-szélességgel, ~330px-kel). A `.letra`
   sticky felső-tere (lásd a fenti 1040px-es blokkot) emiatt itt ÚJRA
   kalibrálva: a jobb-felso stack magassága 102px-ről ~44px-re csökkent,
   tehát a korábbi 122px-es távolság-tartás túl nagy lenne -- ez a blokk
   FORRÁSBAN a fenti 1040px-es blokk UTÁN áll, hogy a kaszkádban felülírja
   azt a 900px-es tartományban (ugyanaz a specificitás, a későbbi nyer). */
@media (max-width:900px){
  .jobb-felso{flex-direction:row;align-items:center;top:8px;right:8px;gap:6px}
  .jackpot-mini{top:8px;left:8px;padding:3px 8px;min-height:36px;gap:4px}
  .jm-nev{font-size:9px}
  .jm-ertek{font-size:13px}
  .letra{margin-top:60px}
}
/* A jelvény szövege 360px alatt (legszűkebb támogatott mobil-szélesség)
   is beleférjen -- lásd a `.jm-ertek` rövidítését (`jpRovid()`, jatek.js:
   "12,6M ₡" formátum, nem a teljes "12 569 417 ₡"). */
@media (max-width:400px){
  .jackpot-mini{padding:3px 7px;gap:3px}
  .jm-nev{font-size:8px;letter-spacing:.08em}
  .jm-ertek{font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* képernyőkép-mód: mindent megállítunk a csúcsponton */
html.fagyasztva *,html.fagyasztva *::before,html.fagyasztva *::after{
  animation-play-state:paused !important;transition:none !important;
}
