/* ============================================================
   Hello Biztonság — BIZTONSÁGOS SZÓRAKOZÁS 4 aloldal stílus
   (FELESLEGES KOCKÁZATVÁLLALÁS — „Nem vagy csirke" — LVL04)
   Minden szabály .bsz4 alá skópozva, hogy ne ütközzön a témával
   és a többi „biztonságos szórakozás" oldallal (.bsz / .bsz2 / .bsz3) sem.
   A dinamikus blokkokat (kártyajáték, haver-erő, 112-lépések)
   a bsz4-page.js építi fel — a belső stílus ott, inline van.
   ============================================================ */

.bsz4{
  --navy:#003153; --navy-d:#00263f; --navy-c:#0a3a5c;
  --teal:#11B7A3; --lime:#C9EA3D; --orange:#FF8A3D;
  --cream:#F7F5F0; --danger:#FF5A5A;
  --f-display:'Anton',sans-serif;
  --f-head:'Space Grotesk',sans-serif;
  --f-body:'DM Sans',system-ui,sans-serif;
  --f-mono:'Space Mono',monospace;
  background:var(--navy); color:var(--cream); font-family:var(--f-body);
}
/* clip és NEM hidden: a hidden görgetési konténert csinál a wrapperből,
   amitől a benne lévő position:sticky (pl. a hb-stack kártya-paklik)
   teljesen hatástalanná válik — a lapok nem ragadnak meg, viszont a
   böngésző mégis sticky-ként kezeli őket, és iOS-en akadozik a görgetés.
   A clip ugyanúgy levágja az oldalra kilógót, de nem hoz létre görgetőt. */
.bsz4{overflow-x:clip}
@supports not (overflow-x:clip){ .bsz4{overflow-x:hidden} }
.bsz4 *{box-sizing:border-box}
.bsz4 img{display:block}
.bsz4 a{text-decoration:none}
.bsz4 button{font-family:inherit}
.bsz4 .i{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.bsz4 .i svg{width:100%;height:100%;display:block}

/* ---- Interaktív elemek ---- */
.bsz4-step{cursor:pointer;transition:background .2s,border-color .2s}

/* ---- Animációk ---- */
@keyframes bsz4float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}
@keyframes bsz4pulseL{0%,100%{box-shadow:0 0 0 0 rgba(201,234,61,.5)}70%{box-shadow:0 0 0 16px rgba(201,234,61,0)}}
@keyframes bsz4marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes bsz4pop{from{opacity:0;transform:translateY(16px) scale(.97)}60%{transform:translateY(-3px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes bsz4glow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes bsz4deal{from{opacity:0;transform:translateY(24px) rotate(-2deg) scale(.95)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
.bsz4-pop{animation:bsz4pop .45s cubic-bezier(.2,.9,.3,1.2) backwards}
.bsz4-deal{animation:bsz4deal .4s cubic-bezier(.2,.9,.3,1.1) backwards}

/* ============================================================
   01/B — KÁRTYÁS VÁLTOZAT (#bsz4-game-b)
   A lapot a bsz4-page.js initGameB() építi. Felépítés:
     .bsz4b-stage > .bsz4b-swipe (húzás/kisuhanás)
                      > .bsz4b-card (átfordulás)
                          > .bsz4b-front / .bsz4b-back
   ============================================================ */
.bsz4 .bsz4b-lab{font:700 10px var(--f-mono);letter-spacing:.08em;color:rgba(247,245,240,.5);text-transform:uppercase;margin-bottom:3px}
.bsz4 .bsz4b-top{margin-bottom:16px;position:relative;z-index:2}

.bsz4 .bsz4b-stage{position:relative;height:452px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.bsz4 .bsz4b-ghost{position:absolute;width:292px;height:420px;border-radius:20px;background:#12454f;border:1.5px solid rgba(247,245,240,.09)}
.bsz4 .bsz4b-g1{transform:rotate(-3.5deg) translateY(5px)}
.bsz4 .bsz4b-g2{transform:rotate(4deg) translateY(9px)}

.bsz4 .bsz4b-swipe{position:absolute;width:292px;height:420px;perspective:1400px;touch-action:pan-y;cursor:grab;will-change:transform}
.bsz4 .bsz4b-grab{cursor:grabbing}
.bsz4 .bsz4b-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.35,.05,.2,1)}
/* jobbról balra fordul fel */
.bsz4 .bsz4b-card.bsz4b-flip{transform:rotateY(180deg)}
.bsz4 .bsz4b-face{position:absolute;inset:0;border-radius:20px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* ---- Előlap: krém alap, modern megjelenés ----
   A krém alapszín szándékos (ez adja a „kártya" érzetet), de sarokjelzés
   és díszkeret nélkül: a kategóriát a felső színcsík és a címke jelöli. */
/* A krém alap enyhén petróleum felé hangolva, hogy a sötét-türkiz videók
   ne idegen testként üljenek a lapon (a szöveg navy marad, kontraszt OK). */
.bsz4 .bsz4b-front{background:linear-gradient(165deg,#FAFCF9,#E7EFEA);border:1px solid rgba(0,38,63,.1);box-shadow:0 18px 40px rgba(0,0,0,.42),0 2px 0 rgba(255,255,255,.7) inset}
.bsz4 .bsz4b-edge{position:absolute;top:0;left:0;right:0;height:5px}
.bsz4 .bsz4b-inner{position:absolute;inset:5px 0 0;padding:16px 14px 14px;display:flex;flex-direction:column;text-align:center}
.bsz4 .bsz4b-chip{align-self:center;font:700 9.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
/* A képmező a kártya teljes belső szélességét megkapja (a videó ezt tölti ki);
   a kicsit szűkebb oldalpadding is ezt szolgálja. */
.bsz4 .bsz4b-art{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:4px 0 10px;margin:0 -4px}
.bsz4 .bsz4b-txt{position:relative;font:700 15px var(--f-head);line-height:1.34;color:#00263f;margin:0 0 12px;letter-spacing:-.01em}
.bsz4 .bsz4b-bar{height:8px;background:rgba(196,31,50,.2);border-radius:999px;overflow:hidden;margin-bottom:6px}
.bsz4 .bsz4b-bar span{display:block;height:100%;border-radius:999px;transition:width .4s}
.bsz4 .bsz4b-odds{display:flex;justify-content:space-between;font:700 10.5px var(--f-mono)}
.bsz4 .bsz4b-drinkfoot{font:700 11px var(--f-mono);color:rgba(0,38,63,.6);border-top:1px dashed rgba(0,38,63,.25);padding-top:9px}

/* ---- Bélyegzők húzás közben ---- */
.bsz4 .bsz4b-stamp{position:absolute;top:16px;font:800 13px var(--f-head);letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border:3px solid;border-radius:9px;opacity:0;pointer-events:none;background:rgba(255,253,247,.9)}
.bsz4 .bsz4b-yes{right:12px;color:#C41F32;border-color:#C41F32;transform:rotate(12deg)}
.bsz4 .bsz4b-no{left:12px;color:#0E8E7F;border-color:#0E8E7F;transform:rotate(-12deg)}

/* ---- Hátlap: az eredmény, kártyamintás grafikával ---- */
.bsz4 .bsz4b-back{transform:rotateY(180deg);background:#00263f;
  background-image:repeating-linear-gradient(45deg,rgba(17,183,163,.16) 0 7px,transparent 7px 15px),
                   repeating-linear-gradient(-45deg,rgba(201,234,61,.10) 0 7px,transparent 7px 15px);
  border:1.5px solid rgba(247,245,240,.22);box-shadow:0 18px 40px rgba(0,0,0,.42)}
.bsz4 .bsz4b-binner{position:absolute;inset:10px 20px;border:1.5px solid rgba(247,245,240,.22);border-radius:12px;background:rgba(0,38,63,.88);padding:22px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.bsz4 .bsz4b-medal{display:inline-flex;width:56px;height:56px;border-radius:15px;align-items:center;justify-content:center;margin-bottom:14px}
.bsz4 .bsz4b-btitle{font:800 22px var(--f-head);letter-spacing:-.01em;margin-bottom:9px;text-transform:uppercase}
.bsz4 .bsz4b-bsub{font-size:13.5px;line-height:1.5;color:rgba(247,245,240,.85);margin:0}

/* ---- Gombok / súgó ---- */
.bsz4 .bsz4b-row{display:flex;gap:12px}
.bsz4 .bsz4b-btn{flex:1;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid transparent;font:700 15px var(--f-head);padding:14px;border-radius:13px;cursor:pointer}
.bsz4 .bsz4b-btn-ghost{background:rgba(17,183,163,.12);color:var(--teal);border-color:var(--teal)}
.bsz4 .bsz4b-btn-cream{background:var(--cream);color:var(--navy);border-color:var(--cream)}
.bsz4 .bsz4b-hint{text-align:center;font:400 12px var(--f-mono);color:rgba(247,245,240,.5);margin-top:12px}

/* ---- Lap be/ki suhanása ---- */
@keyframes bsz4b-in{from{transform:translateX(360px) rotate(10deg);opacity:0}to{transform:translateX(0) rotate(0);opacity:1}}
.bsz4 .bsz4b-in{animation:bsz4b-in .44s cubic-bezier(.2,.85,.3,1) backwards}
.bsz4 .bsz4b-out{transition:transform .36s ease-in,opacity .36s ease-in;transform:translateX(-420px) rotate(-13deg)!important;opacity:0}

/* ---- Animált vonalrajz-figurák ----
   A mozgás nyelve a rajz stílusát követi: lassú, ringatózó, „kézzel rajzolt"
   lüktetés — nem gépies, nem ideges. Minden ciklus 1,4 s fölött van, kivéve
   ahol a szapora mozgás maga az üzenet (futó végtagok, pörgő kerék).
   A JS (bsz4-page.js figure()) ezeket az osztályokat aggatja a jelenetekre. */
.bsz4 .bsz4b-fig{width:100%;height:100%;max-height:132px;display:block;overflow:visible}
/* Kártya-animáció (mp4) — a rajzolt figura helyén.
   A videók NÉGYZETESEK (640×640) és sötét petróleum tónusúak (~#386465).
   Korábban 132px magasra voltak fogva, így a 292px széles kártyán egy pici
   négyzet lett belőlük. Most kitöltik a teljes rendelkezésre álló képmezőt
   (.bsz4b-art), a kártya MÉRETE viszont nem változott: a mező marad az, ami
   a szöveg/esélysáv fölött megmarad. object-fit:cover, mert a mező nem
   pontosan négyzetes — így nem marad üres csík a videó mellett.
   A háttér a videók saját tónusa: ha egy klip mégis eltérő arányú, a
   kilógó sáv beleolvad. */
.bsz4 .bsz4b-vid{width:100%;height:100%;max-width:none;max-height:none;display:block;border-radius:12px;object-fit:cover;background:#2E5A5C}
.bsz4 .bsz4b-fig *{transform-box:view-box}

/* A törzs szélesebb csővé rajzolódik, mint a végtagok — ettől lesz a
   figurának valódi sziluettje pálcika-arányok helyett. A két <g> a JS
   tube() két menete: az ELSŐ a navy körvonal, a MÁSODIK a teal kitöltés
   (a rect a keret, ezért g:nth-of-type számol, nem :nth-child).
   A CSS erősebb, mint a menetcsoportokra tett stroke-width attribútum. */
.bsz4 .bsz4b-fig > g:nth-of-type(1) .bsz4b-torso{stroke-width:15.4px}
.bsz4 .bsz4b-fig > g:nth-of-type(2) .bsz4b-torso{stroke-width:10.2px}

@keyframes bsz4b-sway{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}
@keyframes bsz4b-wob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes bsz4b-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}}
@keyframes bsz4b-spin{to{transform:rotate(360deg)}}
@keyframes bsz4b-limbA{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes bsz4b-limbB{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}}
/* billegés: a kocsi a kerekein dől ide-oda, közben kicsit meg is emelkedik */
@keyframes bsz4b-tumble{0%,100%{transform:rotate(-11deg) translateY(0)}50%{transform:rotate(9deg) translateY(-3px)}}
/* pulzálás: a törésre utaló kellékek (röntgenlap, csont, csillagok) lüktetnek */
@keyframes bsz4b-pulse{0%,100%{transform:scale(1);opacity:.82}50%{transform:scale(1.15);opacity:1}}
@keyframes bsz4b-shake{0%,100%{transform:translateX(-1.6px) rotate(-1.5deg)}50%{transform:translateX(1.6px) rotate(1.5deg)}}
@keyframes bsz4b-raise{0%,100%{transform:rotate(0)}45%,65%{transform:rotate(-34deg)}}
@keyframes bsz4b-spray{0%{opacity:0;transform:translateX(-6px) scale(.5)}50%{opacity:1}100%{opacity:0;transform:translateX(7px) scale(1.15)}}
@keyframes bsz4b-blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes bsz4b-drop{0%{opacity:0;transform:translateY(-6px)}30%{opacity:1}100%{opacity:0;transform:translateY(20px)}}
@keyframes bsz4b-kick{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(10deg)}}
/* szikrák a fej körül: felvillannak és elhalványulnak, kissé elfordulva */
@keyframes bsz4b-twinkle{0%,100%{opacity:.15;transform:scale(.6) rotate(-25deg)}45%{opacity:1;transform:scale(1.12) rotate(12deg)}}
/* hullámos mozgásvonal: balra sodródik és elfogy */
@keyframes bsz4b-squig{0%{opacity:0;transform:translateX(12px)}35%{opacity:.95}100%{opacity:0;transform:translateX(-14px)}}
/* cikcakk talaj: alig észrevehető oldalirányú hullámzás */
@keyframes bsz4b-zig{0%,100%{transform:translateX(-2.4px)}50%{transform:translateX(2.4px)}}

.bsz4 .bsz4b-sway{transform-origin:70px 104px;animation:bsz4b-sway 3.1s ease-in-out infinite}
.bsz4 .bsz4b-wob{transform-origin:70px 106px;animation:bsz4b-wob 2.3s ease-in-out infinite}
.bsz4 .bsz4b-bob{animation:bsz4b-bob 1.5s ease-in-out infinite}
.bsz4 .bsz4b-spin{animation:bsz4b-spin 1.1s linear infinite}
.bsz4 .bsz4b-limbA{animation:bsz4b-limbA .62s ease-in-out infinite}
.bsz4 .bsz4b-limbB{animation:bsz4b-limbB .62s ease-in-out infinite}
.bsz4 .bsz4b-tumble{transform-origin:70px 62px;animation:bsz4b-tumble 1.6s ease-in-out infinite}
.bsz4 .bsz4b-pulse{animation:bsz4b-pulse 1.1s ease-in-out infinite}
.bsz4 .bsz4b-shake{transform-origin:70px 100px;animation:bsz4b-shake .5s ease-in-out infinite}
.bsz4 .bsz4b-raise{animation:bsz4b-raise 2.8s ease-in-out infinite}
.bsz4 .bsz4b-spray{animation:bsz4b-spray .9s ease-out infinite}
.bsz4 .bsz4b-blink{animation:bsz4b-blink 1.4s ease-in-out infinite}
.bsz4 .bsz4b-drop{animation:bsz4b-drop 2.2s ease-in infinite}
.bsz4 .bsz4b-kick{animation:bsz4b-kick .8s ease-in-out infinite}
.bsz4 .bsz4b-twinkle{animation:bsz4b-twinkle 1.8s ease-in-out infinite}
.bsz4 .bsz4b-squig{animation:bsz4b-squig 1.5s ease-in-out infinite}
.bsz4 .bsz4b-zig{animation:bsz4b-zig 5.5s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  .bsz4 .bsz4b-fig *{animation:none!important}
}

/* ---- Gépelődő cím kurzora ---- */
@keyframes bsz4caret{0%,100%{opacity:1}50%{opacity:0}}
.bsz4-caret{display:inline-block;color:#C9EA3D;font-weight:400;margin-left:2px;animation:bsz4caret 1s step-end infinite}

/* ---- Reszponzív ---- */
@media(max-width:900px){
  .bsz4-hero-grid{grid-template-columns:minmax(0,1fr)!important}
  .bsz4-game-grid{grid-template-columns:minmax(0,1fr)!important}
  .bsz4-gameb-grid{grid-template-columns:minmax(0,1fr)!important}
  .bsz4-crew-grid{grid-template-columns:minmax(0,1fr)!important}
  .bsz4-say-grid{grid-template-columns:minmax(0,1fr)!important}
  .bsz4 h1{font-size:56px!important}
}
@media(max-width:600px){
  .bsz4-nav-links{display:none!important}
  .bsz4 h1{font-size:44px!important}
  .bsz4 h2{font-size:31px!important}
  .bsz4 section[id="jatek"],.bsz4 section[id="jatek-b"],.bsz4 header{padding-left:20px!important;padding-right:20px!important}
  .bsz4 .bsz4b-stage{height:404px}
  .bsz4 .bsz4b-swipe,.bsz4 .bsz4b-ghost{width:262px;height:376px}
  .bsz4 .bsz4b-inner{padding:14px 11px 12px}
  .bsz4 .bsz4b-txt{font-size:14px}
  .bsz4 .bsz4b-fig{max-height:112px}
  .bsz4 .bsz4b-btitle{font-size:19px}
  .bsz4 .bsz4b-row{flex-direction:column}
  .bsz4 section[id="kiallni"]>div,.bsz4 section[id="segitseg"]>div{padding-left:20px!important;padding-right:20px!important}
  .bsz4 section[id="segitseg"]{padding-left:20px!important;padding-right:20px!important}
  .bsz4 section[id="szervek"],.bsz4 section[id="igaz-hamis"]{padding-left:20px!important;padding-right:20px!important}
  .bsz4 nav{padding-left:20px!important;padding-right:20px!important}
  /* A /biztonsagos-szorakozas-2/ hero lebegő kép-kártyája: mobilon helyette
     a header alján lévő .hb-pin ablak mutatja ugyanezt a képet (hb-ui.css). */
  .bsz4 .bsz4-hero-card{display:none!important}
}

/* ============================================================
   Vape-vonal (/biztonsagos-szorakozas-4/) új blokkjai
   02 · szervtérkép (#bsz4-organs) · 03 · igaz/hamis (#bsz4-truth)
   A tartalmat a bsz4-page.js építi (initOrgans / initTruth).
   ============================================================ */

/* ---- 02 · Szervtérkép ---- */
.bsz4 .bsz4-organ-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.bsz4 .bsz4-organ-tab{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:12px;background:rgba(247,245,240,.04);border:1.5px solid rgba(247,245,240,.12);color:rgba(247,245,240,.82);font:700 14px 'Space Grotesk';cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s}
.bsz4 .bsz4-organ-tab .i{color:#C9EA3D;transition:color .15s}
@media (hover:hover) and (pointer:fine){.bsz4 .bsz4-organ-tab:hover{transform:translateY(-2px);border-color:rgba(201,234,61,.4)}}
.bsz4 .bsz4-organ-tab.on{background:#C9EA3D;border-color:#C9EA3D;color:#003153}
.bsz4 .bsz4-organ-tab.on .i{color:#003153}
.bsz4 .bsz4-organ-panel{background:#0a3a5c;border:1.5px solid rgba(247,245,240,.1);border-radius:22px;padding:30px 32px;animation:bsz4organfade .3s ease}
.bsz4 .bsz4-organ-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.bsz4 .bsz4-organ-ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none}
.bsz4 .bsz4-organ-kick{font:700 12px 'Space Mono';letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,240,.5);margin-bottom:2px}
.bsz4 .bsz4-organ-title{font:700 24px 'Space Grotesk';color:#F7F5F0;letter-spacing:-.01em;line-height:1.15}
.bsz4 .bsz4-organ-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.bsz4 .bsz4-organ-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.55;color:rgba(247,245,240,.82)}
.bsz4 .bsz4-organ-list li .i{flex:none;margin-top:2px}
/* Másodlagos „És később:" sor — a hosszú távú tény, tudatosan halványabban,
   hogy a MOST érezhető hatások vezessenek (ld. bsz4-page.js NOW tömb). */
.bsz4 .bsz4-organ-later{margin-top:18px;font-size:13.5px;line-height:1.5;color:rgba(247,245,240,.5)}
.bsz4 .bsz4-organ-later b{color:rgba(247,245,240,.72);font-weight:700}
.bsz4 .bsz4-organ-src{margin-top:16px;padding-top:16px;border-top:1px solid rgba(247,245,240,.1);font:700 11px 'Space Mono';letter-spacing:.08em;text-transform:uppercase;color:rgba(247,245,240,.4)}
@keyframes bsz4organfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- 03 · Tinder-swipe igaz/hamis (#bsz4-truth) ----
   Jobbra = IGAZ, balra = HAMIS. A húzható lap alatt gombok is vannak. */
.bsz4 .bsz4-sw-top{max-width:460px;margin:0 0 14px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.bsz4 .bsz4-sw-prog{display:flex;gap:7px}
.bsz4 .bsz4-sw-dot{width:9px;height:9px;border-radius:50%;background:rgba(247,245,240,.14);transition:background .2s}
.bsz4 .bsz4-sw-dot.done{background:#C9EA3D}
.bsz4 .bsz4-sw-dot.now{background:#11B7A3;box-shadow:0 0 0 4px rgba(17,183,163,.18)}
.bsz4 .bsz4-sw-score{font:700 13px 'Space Mono';color:rgba(247,245,240,.6)}
.bsz4 .bsz4-sw-stage{position:relative;max-width:460px;height:322px;margin:0}
.bsz4 .bsz4-sw-back{position:absolute;inset:0;border-radius:22px;background:#0a3a5c;border:1.5px solid rgba(247,245,240,.08);transform:translateY(14px) scale(.955);opacity:.55}
.bsz4 .bsz4-sw-card{position:absolute;inset:0;border-radius:22px;background:linear-gradient(160deg,#0e456a,#093351);border:1.5px solid rgba(247,245,240,.14);padding:30px 28px;display:flex;flex-direction:column;justify-content:center;text-align:center;cursor:grab;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);touch-action:pan-y;user-select:none;-webkit-user-select:none;will-change:transform}
.bsz4 .bsz4-sw-card.grab{cursor:grabbing}
.bsz4 .bsz4-sw-cnum{position:absolute;top:16px;left:20px;font:700 12px 'Space Mono';color:rgba(247,245,240,.4)}
.bsz4 .bsz4-sw-quote{font-family:'Anton',sans-serif;font-size:56px;line-height:.5;color:rgba(201,234,61,.22);margin-bottom:10px}
.bsz4 .bsz4-sw-s{font:700 22px 'Space Grotesk';color:#F7F5F0;line-height:1.3;letter-spacing:-.01em}
.bsz4 .bsz4-sw-hint{margin-top:16px;display:inline-flex;align-items:center;gap:7px;justify-content:center;font:700 11px 'Space Mono';letter-spacing:.05em;text-transform:uppercase;color:rgba(247,245,240,.4)}
.bsz4 .bsz4-sw-hint .i{color:rgba(247,245,240,.4)}
.bsz4 .bsz4-sw-stamp{position:absolute;top:22px;font-family:'Anton',sans-serif;font-size:28px;letter-spacing:.04em;padding:3px 13px;border:3px solid;border-radius:10px;opacity:0;pointer-events:none}
.bsz4 .bsz4-sw-stamp.yes{right:20px;color:#11B7A3;border-color:#11B7A3;transform:rotate(13deg)}
.bsz4 .bsz4-sw-stamp.no{left:20px;color:#FF8A3D;border-color:#FF8A3D;transform:rotate(-13deg)}
.bsz4 .bsz4-sw-reveal{position:absolute;inset:0;border-radius:22px;background:#0a3a5c;border:1.5px solid rgba(247,245,240,.14);padding:26px 28px;display:flex;flex-direction:column;justify-content:center;animation:bsz4organfade .3s ease;overflow:auto}
.bsz4 .bsz4-sw-vhead{display:inline-flex;align-items:center;gap:8px;font:700 22px 'Space Grotesk';letter-spacing:-.01em;margin-bottom:6px}
.bsz4 .bsz4-sw-answer{font:600 13.5px 'DM Sans';color:rgba(247,245,240,.7);margin-bottom:12px}
.bsz4 .bsz4-sw-rs{font:700 15px 'Space Grotesk';color:#F7F5F0;line-height:1.3;margin-bottom:9px}
.bsz4 .bsz4-sw-exp{font-size:13.5px;line-height:1.55;color:rgba(247,245,240,.78)}
.bsz4 .bsz4-sw-donec{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.bsz4 .bsz4-sw-donebig{font-family:'Anton',sans-serif;font-size:66px;line-height:1}
.bsz4 .bsz4-sw-donet{font:600 15px 'DM Sans';color:rgba(247,245,240,.78);max-width:340px;margin-top:8px;line-height:1.5}
.bsz4 .bsz4-sw-ctrl{max-width:460px;margin:18px 0 0;display:flex;gap:12px}
.bsz4 .bsz4-sw-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:13px;font:700 15px 'Space Grotesk';cursor:pointer;border:2px solid;transition:transform .12s}
.bsz4 .bsz4-sw-btn.no{background:rgba(255,138,61,.12);color:#FF8A3D;border-color:#FF8A3D}
.bsz4 .bsz4-sw-btn.yes{background:rgba(17,183,163,.12);color:#11B7A3;border-color:#11B7A3}
@media (hover:hover) and (pointer:fine){.bsz4 .bsz4-sw-btn:hover{transform:translateY(-1px)}}
.bsz4 .bsz4-sw-next{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#F7F5F0;color:#003153;border:none;font:700 16px 'Space Grotesk';padding:14px;border-radius:13px;cursor:pointer}
.bsz4 .bsz4-sw-next.alt{background:#C9EA3D}
@media(max-width:600px){
  .bsz4 .bsz4-sw-stage{height:340px}
  .bsz4 .bsz4-sw-s{font-size:20px}
}

/* ---- 02 · „Már most." — lime pulzálás (figyelemfelhívás) ---- */
.bsz4 .bsz4-pulse-lime{color:#C9EA3D;display:inline-block;transform-origin:left center;animation:bsz4pulseLime 1.6s ease-in-out infinite}
@keyframes bsz4pulseLime{0%,100%{transform:scale(1);text-shadow:0 0 0 rgba(201,234,61,0)}50%{transform:scale(1.045);text-shadow:0 0 20px rgba(201,234,61,.55)}}

/* ---- 04 · Nikotinmérgezés jelei — animált pálcikaember-csempék ---- */
.bsz4 .bsz4-sym-panel{background:linear-gradient(160deg,#14273c,#0b2032);border:1.5px solid rgba(255,90,90,.4);border-radius:22px;padding:24px 26px;margin-bottom:30px}
.bsz4 .bsz4-sym-head{display:inline-flex;align-items:center;gap:9px;font:700 13px 'Space Mono';letter-spacing:.12em;text-transform:uppercase;color:#FF5A5A;margin-bottom:18px}
.bsz4 .bsz4-sym-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bsz4 .bsz4-sym{display:flex;flex-direction:column;align-items:center;gap:10px;background:rgba(247,245,240,.04);border:1.5px solid rgba(247,245,240,.1);border-radius:16px;padding:16px 8px 13px;transition:border-color .2s,transform .2s}
@media (hover:hover) and (pointer:fine){.bsz4 .bsz4-sym:hover{border-color:rgba(255,90,90,.45);transform:translateY(-3px)}}
.bsz4 .bsz4-sym-ic{width:52px;height:52px}
.bsz4 .bsz4-sym-ic svg{width:100%;height:100%;overflow:visible}
.bsz4 .bsz4-sym-l{font:700 12.5px 'Space Grotesk';color:#F7F5F0;text-align:center;line-height:1.15}
.bsz4 .bsz4-sym-foot{margin-top:16px;font-size:13.5px;line-height:1.5;color:rgba(247,245,240,.78)}
.bsz4 .bsz4-sym-foot b{color:#C9EA3D}
/* pálcikaember alapvonal */
.bsz4 .sx-fig{stroke:#F7F5F0;stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round;fill:none}
/* teljes figura-mozgás (a <svg> HTML-dobozán, ott a transform-origin jól viselkedik) */
.bsz4 .bsz4-sym.lurch svg{animation:bsz4symLurch 1.5s ease-in-out infinite;transform-origin:50% 92%}
.bsz4 .bsz4-sym.shake svg{animation:bsz4symShake .26s ease-in-out infinite}
.bsz4 .bsz4-sym.sway svg{animation:bsz4symSway 2.3s ease-in-out infinite;transform-origin:50% 92%}
/* belső akcentusok (fill-box → saját középpont körül) */
.bsz4 .sx-beat{animation:bsz4symBeat .7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.bsz4 .sx-spin{animation:bsz4symSpin 3s linear infinite;transform-box:fill-box;transform-origin:center}
.bsz4 .sx-drop{animation:bsz4symDrop 1.6s ease-in infinite;transform-box:fill-box;transform-origin:center}
.bsz4 .sx-drop.d2{animation-delay:.8s}
.bsz4 .sx-q{animation:bsz4symFloat 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.bsz4 .sx-q.q2{animation-delay:.45s}
.bsz4 .sx-q.q3{animation-delay:.9s}
@keyframes bsz4symShake{0%,100%{transform:translateX(-1.6px)}50%{transform:translateX(1.6px)}}
@keyframes bsz4symSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes bsz4symLurch{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
@keyframes bsz4symSpin{to{transform:rotate(360deg)}}
@keyframes bsz4symBeat{0%,100%{transform:scale(1)}30%{transform:scale(1.3)}}
@keyframes bsz4symDrop{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(13px);opacity:0}}
@keyframes bsz4symFloat{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-4px);opacity:1}}
@media(max-width:820px){.bsz4 .bsz4-sym-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:440px){.bsz4 .bsz4-sym-grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){
  .bsz4 .bsz4-sym.lurch svg,.bsz4 .bsz4-sym.shake svg,.bsz4 .bsz4-sym.sway svg,
  .bsz4 .sx-beat,.bsz4 .sx-spin,.bsz4 .sx-drop,.bsz4 .sx-q,.bsz4 .bsz4-pulse-lime{animation:none}
}