/* ============================================================
   Hello Biztonság — BIZTONSÁGOS SZÓRAKOZÁS 3 aloldal stílus
   (ALKOHOL — „Két pohár jókedv, a harmadik a lejtő" — LVL03)
   Minden szabály .bsz3 alá skópozva, hogy ne ütközzön a témával
   és a többi „biztonságos szórakozás" oldallal (.bsz / .bsz2) sem.
   A dinamikus blokkokat (pohár-számláló, veszélytérkép, 112-lépések)
   a bsz3-page.js építi fel — a belső stílus ott, inline van.
   ============================================================ */

.bsz3{
  --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. */
.bsz3{overflow-x:clip}
@supports not (overflow-x:clip){ .bsz3{overflow-x:hidden} }
.bsz3 *{box-sizing:border-box}
.bsz3 img{display:block}
.bsz3 a{text-decoration:none}
.bsz3 button{font-family:inherit}
.bsz3 .i{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.bsz3 .i svg{width:100%;height:100%;display:block}

/* ---- Interaktív elemek ---- */
.bsz3-step{cursor:pointer;transition:background .2s,border-color .2s}
.bsz3-chip{min-width:0}
#bsz3-cats{min-width:0}

/* ---- Pohár-figura wobble: a pohárszámmal erősödik ---- */
.bsz3-figure{display:inline-flex;transform-origin:50% 100%;will-change:transform}
.bsz3-w0{animation:none}
.bsz3-w1{animation:bsz3sway 4.5s ease-in-out infinite}
.bsz3-w2{animation:bsz3sway 2.6s ease-in-out infinite}
.bsz3-w3{animation:bsz3wobble 1.4s ease-in-out infinite}
@keyframes bsz3sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes bsz3wobble{0%,100%{transform:rotate(-7deg) translateX(-3px)}25%{transform:rotate(5deg) translateX(3px)}50%{transform:rotate(-5deg) translateX(-2px)}75%{transform:rotate(7deg) translateX(3px)}}

/* ---- Animációk ---- */
@keyframes bsz3float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}
@keyframes bsz3pulseL{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)}}
/* Piros pulzálás a „Ne legyen harmadik." buborékhoz. A .bsz oldal bszpulse-ának mása:
   azért másolat és nem hivatkozás, hogy ez az oldal ne függjön a bsz-style.css-től. */
@keyframes bsz3pulseR{0%,100%{box-shadow:0 0 0 0 rgba(255,90,90,.55)}70%{box-shadow:0 0 0 18px rgba(255,90,90,0)}}
@keyframes bsz3marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes bsz3pop{from{opacity:0;transform:translateY(16px) scale(.97)}60%{transform:translateY(-3px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Hatás-kártya: lentről felfelé megforduló belépő. A transform-origin az ALSÓ él,
   így a doboz az alja körül billen fel — a rotateX -85 fokról áll fel 0-ra.
   A bsz3-page.js minden pohárnál újrafuttatja (osztály le, reflow, osztály vissza). */
@keyframes bsz3flip{from{opacity:0;transform:perspective(700px) rotateX(-85deg)}to{opacity:1;transform:perspective(700px) rotateX(0)}}
.bsz3-flip{transform-origin:bottom center;backface-visibility:hidden;animation:bsz3flip .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes bsz3glow{0%,100%{opacity:.55}50%{opacity:1}}
.bsz3-pop{animation:bsz3pop .45s cubic-bezier(.2,.9,.3,1.2) backwards}

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

/* ---- Pulzáló 112 segélyhívó szám ---- */
@keyframes bsz3numpulse{0%,100%{transform:scale(1);text-shadow:0 0 0 rgba(201,234,61,0)}50%{transform:scale(1.06);text-shadow:0 0 28px rgba(201,234,61,.55)}}
.bsz3-pulse112{display:inline-block;animation:bsz3numpulse 1.8s ease-in-out infinite}

/* ============================================================
   02 · VESZÉLYKÁRTYA — kép felül + alulról-felfelé fordulás
   A kártya két külön blokk: fent a kép (fordul), alatta a
   szövegdoboz (CSAK ezt keretezi a kategória színe). A vázat a
   bsz3-page.js initDanger() építi fel EGYSZER, a fordulás szöge
   halmozódik (deg += 360 húzásonként).
   FIGYELEM: a .bsz3-flip nevet a poharas játék használja — ezért
   itt bsz3-d* előtagú, külön osztályok.
   ============================================================ */
.bsz3 .bsz3-dcard{display:flex;flex-direction:column;gap:10px}
.bsz3 .bsz3-dimgwrap{perspective:1600px;background:transparent;border-radius:18px;overflow:hidden}
.bsz3 .bsz3-dflip{position:relative;width:100%;aspect-ratio:561/313;transform-style:preserve-3d;transform-origin:center;transition:transform .82s cubic-bezier(.2,.72,.24,1);transform:rotateX(0deg);will-change:transform}
.bsz3 .bsz3-dface{position:absolute;inset:0;backface-visibility:hidden;background:transparent}
/* A képet háttérképként (background-size:cover) tesszük ki, NEM <img object-fit>-tel:
   így a lime keret + lekerekítés ugyanazon az elemen van, a háttér a border-box-ig ér
   (background-clip:border-box az alap), és NEM marad közte kék sáv — iOS Safariban is,
   ahol az object-fit + border-radius + a 3D-s kártya levágása megbízhatatlan. A JS a
   #bsz3-dimg backgroundImage-ét állítja. A hátlap ugyanezt a keretet kapja. */
.bsz3 .bsz3-dphoto{width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;background-origin:border-box;background-clip:border-box;border:3px solid #C9EA3D;border-radius:18px}
.bsz3 .bsz3-dback{transform:rotateX(180deg);display:flex;align-items:center;justify-content:center;border:3px solid #C9EA3D;border-radius:18px;background:repeating-linear-gradient(135deg,rgba(201,234,61,.05) 0 14px,transparent 14px 28px),linear-gradient(160deg,#0a3a5c,#062a44)}
.bsz3 .bsz3-dbox{background:linear-gradient(180deg,#0a3a5c,#062a44);border:1.5px solid rgba(247,245,240,.12);border-radius:18px;padding:24px 28px 26px;display:flex;flex-direction:column;flex:1;min-height:200px;transition:border-color .4s}
@media(prefers-reduced-motion:reduce){.bsz3 .bsz3-dflip{transition:transform .25s ease}}

/* ---- 02 · bal oszlop: „pakli"-kártya + legyező-lapok + nagyobb 112 ---- */
.bsz3 .bsz3-dleft{align-self:start}   /* ne feszüljön a jobb kártya magasságára */
.bsz3 .bsz3-pakli{background:#0a3a5c;border-radius:16px;padding:18px 20px 16px;display:flex;flex-direction:column;gap:14px}
.bsz3 .bsz3-deck{display:flex;justify-content:center;padding:2px 0}
.bsz3 .bsz3-deck .c{width:48px;height:64px;border-radius:9px;margin:0 -7px;border:2px solid rgba(0,38,63,.25);display:flex;align-items:flex-end;justify-content:center;box-shadow:0 8px 16px -7px rgba(0,0,0,.55);transform:rotate(var(--r,0deg)) translateY(var(--y,0))}
.bsz3 .bsz3-deck .c .i{width:17px;height:17px;margin-bottom:8px;color:#003153}
.bsz3 .bsz3-b112{background:rgba(201,234,61,.12);border:1.5px solid #C9EA3D;border-radius:16px;padding:15px 20px;display:flex;align-items:center;gap:15px;animation:bsz3ring112 2.4s ease-in-out infinite}
@keyframes bsz3ring112{0%,100%{box-shadow:0 0 0 0 rgba(201,234,61,0)}50%{box-shadow:0 0 0 9px rgba(201,234,61,.10)}}
.bsz3 .bsz3-b112 .ph{flex:none;width:46px;height:46px;border-radius:13px;background:rgba(201,234,61,.16);display:flex;align-items:center;justify-content:center;color:#C9EA3D}
@media(prefers-reduced-motion:reduce){.bsz3 .bsz3-b112{animation:none}}

/* ---- Reszponzív ---- */
@media(max-width:900px){
  .bsz3-hero-grid{grid-template-columns:minmax(0,1fr)!important}
  .bsz3-drink-grid{grid-template-columns:minmax(0,1fr)!important}
  .bsz3-danger-grid{grid-template-columns:minmax(0,1fr)!important}
  .bsz3 h1{font-size:56px!important}
  /* Egy oszlopban a bal hasáb a kártya FÖLÉ kerül, ezért itt a húzó-gomb és a
     112-buborék helyet cserél: a gomb közvetlenül a kártya elé kerül, amit húz.
     A köztük lévő infódoboz alapértelmezett order:0 marad, nem kell hozzányúlni. */
  .bsz3 .bsz3-112{order:-1}
  .bsz3 #bsz3-danger-spin{order:1}
}
@media(max-width:600px){
  /* A 01-es blokk lebegő kép-kártyája: mobilon helyette a szekció alján lévő
     .hb-pin ablak mutatja ugyanezt a képet, rácsúszós effekttel (hb-ui). */
  .bsz3 .bsz3-float-card{display:none!important}

  /* A 4 veszélytípus-buborék 13,5px-en 4 külön sorba törik (a leghosszabb pár
     340px a 295px-es helyen). Kisebb betű/margó -> 375px-en 2x2, 6px ráhagyással.
     !important kell: a méretek inline stílusban vannak a szekció HTML-jében.
     Ennél keskenyebb telefonon a flex-wrap magától több sorba tördeli. */
  .bsz3 .bsz3-tags{gap:8px!important}
  .bsz3 .bsz3-tags>span{font-size:12px!important;padding:8px 10px!important;gap:6px!important}
  .bsz3 .bsz3-tags .i{width:14px!important;height:14px!important}
  .bsz3-nav-links{display:none!important}
  .bsz3 h1{font-size:44px!important}
  .bsz3 h2{font-size:31px!important}
  .bsz3 section[id="poharak"],.bsz3 section[id="poharak-video"],.bsz3 section[id="veszelyek"],.bsz3 header{padding-left:20px!important;padding-right:20px!important}
  .bsz3 section[id="veszelyek"]>div,.bsz3 section[id="segitseg"]>div{padding-left:20px!important;padding-right:20px!important}
  .bsz3 section[id="segitseg"]{padding-left:20px!important;padding-right:20px!important}
  .bsz3 nav{padding-left:20px!important;padding-right:20px!important}
}