/* ============================================================
   Hello Biztonság — PÉNZÜGYI BIZTONSÁG 2. aloldal stílus
   („Védd meg Tomit!" — adat- és pénzvédelem, 3 feladat)
   Minden szabály .pb2 alá skópozva, hogy ne ütközzön a témával
   és az első pénzügyi oldallal (.pb) sem.

   A dinamikus blokkokat (karakter-SVG, posztok, adatcsapdák,
   chat-történet, HUD) a pb2-page.js építi fel — a belső stílus
   nagyrészt ott, inline van. Ide az kerül, ami osztály-alapú:
   a páncél-animáció, a hotspotok, a fixált HUD és a reszponzív
   töréspontok.
   ============================================================ */

.pb2{
  --navy:#003153; --navy-d:#00263f; --navy-c:#0a3a5c;
  --teal:#11B7A3; --lime:#C9EA3D; --orange:#FF8A3D;
  --cream:#F7F5F0; --danger:#FF5A5A;
  --steel:#D2E1EC;
  --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. */
.pb2{overflow-x:clip}
@supports not (overflow-x:clip){ .pb2{overflow-x:hidden} }
.pb2 *{box-sizing:border-box}
.pb2 img{display:block}
.pb2 a{text-decoration:none}
.pb2 button{font-family:inherit}
.pb2 .i{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.pb2 .i svg{width:100%;height:100%;display:block}
.pb2-hidden{display:none!important}

/* ============================================================
   KARAKTER + PÁNCÉL
   A figurát a pb2-page.js characterFig() építi: NÉGY egymásra
   rétegzett kép (alapfigura + sisak / mellvért / csizma), mind
   azonos, 1328×1760-as vásznon — ezért pontos fedésbe kerülnek.

   A rajz csak a vászon közepét tölti ki (kb. 736×1680 — a sisak
   tollforgója a legfelső pont), ezért
   „belenagyítunk": a --cx/--cy/--cw/--ch a vászon kivágását adja
   meg vászon-pixelben, azt feszítjük a dobozra. Új rajz esetén
   elég ezt a négy számot átírni.

   A három páncélelem MINDIG ott van a markupban, csak .pb2-on
   nélkül átlátszó — így a felöltés animálható, és ugyanaz a
   figura szolgálja ki a herót, a HUD-ot és a zárást.
   ============================================================ */
.pb2 .pb2-char{
  --iw:1328; --ih:1760;                    /* a közös vászon mérete */
  --cx:296; --cy:56;  --cw:736; --ch:1680; /* a látható kivágás     */
  position:relative;display:block;width:100%;
  aspect-ratio:var(--cw)/var(--ch);
  overflow:hidden;
}
/* max-width:none kell: a WP/Elementor img{max-width:100%} különben
   visszanyomná a felnagyított réteget. */
.pb2 .pb2-char img{
  position:absolute;max-width:none;
  width:calc(var(--iw) / var(--cw) * 100%);
  height:calc(var(--ih) / var(--ch) * 100%);
  left:calc(var(--cx) / var(--cw) * -100%);
  top:calc(var(--cy) / var(--ch) * -100%);
}
.pb2 .pb2-armor{
  opacity:0;pointer-events:none;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.9,.3,1.45);
}
/* mindegyik elem a SAJÁT helye fölül „ereszkedik le", ne a kép közepéből
   (az origó a teljes vászonra vonatkozik: sisak 17%, vért 50%, csizma 84%) */
.pb2 .pb2-armor[data-part="helm"]{transform-origin:50% 17.5%;transform:translateY(-7%) scale(.84)}
.pb2 .pb2-armor[data-part="chest"]{transform-origin:50% 50%;transform:translateY(-5%) scale(.86)}
.pb2 .pb2-armor[data-part="boots"]{transform-origin:50% 84%;transform:translateY(-4%) scale(.88)}
.pb2 .pb2-armor.pb2-on{transform:none;opacity:1}

/* A páncélelem-ikonok (feltöltött, egyszínű navy SVG-k) — a záró lista
   csempéin és a jutalom-toaston. Megszerzett elemnél a lime csempén a
   navy ikon jól olvasható; a még hiányzó elem csempéje sötét, ott a
   filter fehérre váltja az ikont, az opacity pedig visszahalványítja a
   korábbi rgba(247,245,240,.45) szintre. */
.pb2 .pb2-part-ic{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
.pb2 .pb2-part-ic-off{filter:brightness(0) invert(1);opacity:.45}

/* a testrészek finom „lélegzése", hogy ne legyen halott a figura */
@keyframes pb2breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.pb2 .pb2-char-live{animation:pb2breathe 4.2s ease-in-out infinite}

/* felvillanás, amikor új elem kerül fel */
@keyframes pb2flash{0%{filter:drop-shadow(0 0 0 rgba(201,234,61,0))}
  35%{filter:drop-shadow(0 0 18px rgba(201,234,61,.95))}
  100%{filter:drop-shadow(0 0 0 rgba(201,234,61,0))}}
.pb2 .pb2-flash{animation:pb2flash 1.1s ease-out}

/* ============================================================
   FIXÁLT PÁNCÉL-HUD
   A JS a <body> végére teszi (NEM egy szekcióba), ezért mindig
   látszik, akármelyik Elementor-szekciónál jársz. Desktopon jobb
   alsó kártya, mobilon alsó sáv.
   ============================================================ */
.pb2-hud{
  box-sizing:border-box;
  position:fixed; right:20px; bottom:20px; z-index:9998;
  width:196px; padding:14px 16px 13px;
  background:#00263f; border:1.5px solid rgba(201,234,61,.32); border-radius:18px;
  box-shadow:0 20px 44px -14px rgba(0,0,0,.7);
  cursor:pointer;
  opacity:0; transform:translateY(16px) scale(.96); pointer-events:none;
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.9,.3,1.2);
}
.pb2-hud.pb2-hud-show{opacity:1;transform:none;pointer-events:auto}
.pb2-hud-lab{font:700 9.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,240,.5);margin-bottom:8px}
.pb2-hud-row{display:flex;align-items:center;gap:12px}
.pb2-hud-fig{width:44px;flex:none}
.pb2-hud-slots{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.pb2-hud-slot{display:flex;align-items:center;gap:7px;font:700 10.5px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:rgba(247,245,240,.42);transition:color .3s}
.pb2-hud-slot .pb2-hud-dot{width:17px;height:17px;border-radius:6px;border:1.5px solid rgba(247,245,240,.22);display:flex;align-items:center;justify-content:center;flex:none;transition:all .3s}
.pb2-hud-slot.pb2-hud-got{color:var(--lime)}
.pb2-hud-slot.pb2-hud-got .pb2-hud-dot{background:var(--lime);border-color:var(--lime);color:#003153}
.pb2-hud-bar{height:5px;border-radius:999px;background:rgba(247,245,240,.1);overflow:hidden;margin-top:11px}
.pb2-hud-bar span{display:block;height:100%;width:0;background:var(--lime);border-radius:999px;transition:width .5s cubic-bezier(.2,.9,.3,1)}

/* jutalom-felugró */
.pb2-toast{
  position:fixed; right:20px; bottom:210px; z-index:9999;
  display:flex;align-items:center;gap:11px;
  background:var(--lime); color:#003153;
  border-radius:14px; padding:12px 17px;
  font:700 14px var(--f-head);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.6);
  opacity:0; transform:translateY(14px) scale(.95); pointer-events:none;
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.9,.3,1.3);
}
.pb2-toast.pb2-toast-show{opacity:1;transform:none}

@media(max-width:760px){
  .pb2-hud{left:0;right:0;bottom:0;width:auto;border-radius:16px 16px 0 0;padding:9px 14px 10px;border-width:1.5px 0 0}
  .pb2-hud-lab{display:none}
  .pb2-hud-row{gap:10px}
  .pb2-hud-fig{width:30px}
  .pb2-hud-slots{flex-direction:row;align-items:center;gap:8px}
  .pb2-hud-slot{flex-direction:column;gap:3px;font-size:8.5px;text-align:center;flex:1}
  .pb2-hud-bar{margin-top:7px}
  .pb2-toast{left:14px;right:14px;bottom:96px;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .pb2 .pb2-char-live{animation:none}
  .pb2 .pb2-armor{transition:opacity .2s ease}
  .pb2 .pb2-flash{animation:none}
}

/* ============================================================
   01 — MIT TUDNAK RÓLAD? (közösségi posztok + hotspotok)
   A poszt „képe" egy 400×300-as SVG jelenet, a rákoppintható
   zónák százalékosan pozicionált gombok fölötte — így mobilon is
   pontosan ott maradnak, ahol a rajzon a részlet van.
   ============================================================ */
.pb2 .pb2-shot{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#0a3a5c}
.pb2 .pb2-shot > svg{position:absolute;inset:0;width:100%;height:100%}
.pb2 .pb2-zone{
  position:absolute;border:0;background:transparent;padding:0;cursor:pointer;
  border-radius:10px;transition:all .25s;
}
.pb2 .pb2-zone::after{
  content:'';position:absolute;inset:0;border-radius:10px;
  border:2.5px dashed rgba(201,234,61,0);transition:border-color .25s,background .25s;
}
@media (hover:hover) and (pointer:fine){.pb2 .pb2-zone:hover::after{border-color:rgba(201,234,61,.55);background:rgba(201,234,61,.1)}}
.pb2 .pb2-zone.pb2-found::after{border:2.5px solid var(--lime);background:rgba(201,234,61,.22)}
.pb2 .pb2-zone.pb2-peek::after{border-color:rgba(255,90,90,.85);background:rgba(255,90,90,.16)}
.pb2 .pb2-zone .pb2-pin{
  position:absolute;top:-11px;right:-11px;width:24px;height:24px;border-radius:50%;
  background:var(--lime);color:#003153;display:none;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.pb2 .pb2-zone.pb2-found .pb2-pin{display:flex;animation:pb2pop .4s cubic-bezier(.2,.9,.3,1.5)}

/* Mobil koppintási ráhagyás. A 02-es blokk csapdaképein több hotspot egyetlen
   szövegsorra esik: telefonon ez 8–12 px magas célpont, amit könnyű elvéteni.
   A ::before egy LÁTHATATLAN, kicsit nagyobb felület — a keret (::after) marad
   pontosan a részleten, csak a koppintható terület nő. Szándékosan kicsi a
   ráhagyás: az egymás alatti hotspotok (pl. jelszó / kódmezők) így sem lopják
   el egymás koppintását. */
@media(max-width:600px){
  .pb2 .pb2-zone::before{content:'';position:absolute;inset:-6px}
}

/* szöveges hotspot (képaláírás, helyjelölő, komment) */
.pb2 .pb2-tok{
  border:0;background:rgba(201,234,61,.0);padding:1px 3px;margin:0 -2px;border-radius:6px;
  font:inherit;color:inherit;cursor:pointer;
  box-shadow:inset 0 -2px 0 rgba(201,234,61,.28);transition:all .2s;
}
@media (hover:hover) and (pointer:fine){.pb2 .pb2-tok:hover{background:rgba(201,234,61,.16);box-shadow:inset 0 -2px 0 rgba(201,234,61,.7)}}
.pb2 .pb2-tok.pb2-found{background:var(--lime);color:#003153;font-weight:700;box-shadow:none}
.pb2 .pb2-tok.pb2-peek{background:rgba(255,90,90,.9);color:#fff;box-shadow:none}

@keyframes pb2marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes pb2pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes pb2rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pb2shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.pb2 .pb2-rise{animation:pb2rise .32s ease}
.pb2 .pb2-shake{animation:pb2shake .4s ease}

/* ============================================================
   02 — ADATCSAPDA (hamis oldalak böngésző-kerettel)
   ============================================================ */
.pb2 .pb2-tr{cursor:pointer;position:relative;border-radius:8px;transition:box-shadow .2s,background .2s}
@media (hover:hover) and (pointer:fine){.pb2 .pb2-tr:hover{box-shadow:0 0 0 2.5px rgba(201,234,61,.6)}}
.pb2 .pb2-tr.pb2-found{box-shadow:0 0 0 2.5px var(--lime);background:rgba(201,234,61,.16)}
.pb2 .pb2-tr.pb2-peek{box-shadow:0 0 0 2.5px var(--danger);background:rgba(255,90,90,.16)}
.pb2 .pb2-page-body{cursor:crosshair}

/* ============================================================
   03 — IGAZI BARÁT VAGY FELTÖRT FIÓK? (chat)
   ============================================================ */
.pb2 .pb2-choice{
  display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:rgba(17,183,163,.1);border:1.5px solid rgba(17,183,163,.45);
  color:var(--cream);border-radius:14px;padding:13px 15px;
  font:600 14.5px var(--f-body);line-height:1.4;
  transition:background .2s,border-color .2s,transform .12s;
}
@media (hover:hover) and (pointer:fine){.pb2 .pb2-choice:hover{background:rgba(17,183,163,.2);border-color:var(--teal)}}
.pb2 .pb2-choice:active{transform:scale(.99)}
@keyframes pb2msg{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.pb2 .pb2-msg{animation:pb2msg .34s cubic-bezier(.2,.9,.3,1.1) backwards}

/* ============================================================
   Reszponzív
   ============================================================ */
@media(max-width:960px){
  .pb2-hero-grid{grid-template-columns:minmax(0,1fr)!important}
  .pb2-task-grid{grid-template-columns:minmax(0,1fr)!important}
  .pb2-done-grid{grid-template-columns:minmax(0,1fr)!important}
  .pb2 h1{font-size:58px!important}
}
@media(max-width:600px){
  .pb2-nav-links{display:none!important}
  .pb2 h1{font-size:42px!important}
  .pb2 h2{font-size:29px!important}
  .pb2 header,.pb2 section,.pb2 nav,.pb2 footer{padding-left:18px!important;padding-right:18px!important}
  /* a teljes szélességű szekciókban a belső sáv ne adjon MÉG egy 40px-et */
  .pb2 #pb2-t2 > div,.pb2 #pb2-done > div{padding-left:0!important;padding-right:0!important}
  /* a webcím a 02-es feladat lényege — mobilon is férjen ki minél többet */
  .pb2 [data-tr="0"]{font-size:11px!important}
  /* a fixált alsó HUD-sáv ne takarja a feladatok utolsó sorát */
  .pb2 #pb2-t1,.pb2 #pb2-t2,.pb2 #pb2-t3{padding-bottom:104px!important}
  .pb2 footer{padding-bottom:96px!important}
}

/* ---- Hero · Tomi figurája feleakkora (2026-09-02) ----
   A karakterkártyán a figura 152px széles volt (a kivágás aránya miatt
   ~347px magas) — túl nagy a kártyához képest. Most 76px széles, ~174px
   magas. Az !important az inline width:152px miatt kell, így az élesen
   Elementor-újramásolás nélkül, FTP-vel is érvényesül. */
.pb2 #pb2-hero-char{width:76px!important}