/* ============================================================
   Hello Biztonság — VAGYONVÉDELEM 3. („Ne lopjanak tőlem") aloldal stílus
   Minden szabály .vv3 alá skópozva, hogy ne ütközzön a témával.
   A blokkjaidra tedd rá a .vv3 wrappert (ld. szekció-fájl).
   A dinamikus részeket (checklista, játékok, kontaktlista) a
   vv3-page.js építi fel — a belső szöveg-stílus ott, inline van.
   ============================================================ */

.vv3{
  --navy:#003153; --navy-d:#00263f; --teal:#11B7A3; --lime:#C9EA3D;
  --amber:#FFC53D; --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);
}
.vv3 *{box-sizing:border-box}
.vv3 img{display:block}
.vv3 a{text-decoration:none}
.vv3 button{font-family:inherit}
.vv3 .i{display:inline-flex;align-items:center;justify-content:center}
.vv3 .i svg{width:100%;height:100%;display:block}

/* ---- Belépő-animáció ---- */
.vv3-rise{animation:vv3rise .4s ease both}
@keyframes vv3rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ---- 01 · Praktika-MATRICAFAL ----
   A #vv3-habits konténerbe a vv3-page.js két gyereket tesz: bal oldalt a
   matrica-fal (.vv3-hab-wall, 10 ikonos csempe), jobb oldalt a reflektor-
   panel (.vv3-hab-spot) az aktív praktika teljes szövegével. A markup inline
   `grid 1fr 1fr`-jét itt írjuk felül (!important), hogy a fal szélesebb
   legyen; ≤900px-en egymás alá kerülnek (a fal felül, a panel alul).
   Állapotok a csempén: .is-active (reflektorban, lime keret + fény),
   .is-on (megvan: lime „felragasztott" matrica, pipa a sarkán, --tilt
   elforgatás). */
.vv3 #vv3-habits.vv3-hab{display:grid;grid-template-columns:1.25fr 1fr!important;gap:22px;align-items:start}
.vv3 .vv3-hab-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-self:center}
.vv3 .vv3-hab-tile{
  position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  aspect-ratio:1/1;padding:12px 8px 11px;border-radius:18px;
  background:#0a3a5c;border:1.5px solid rgba(247,245,240,.12);color:var(--cream);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s,border-color .2s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent
}
@supports not (aspect-ratio:1/1){ .vv3 .vv3-hab-tile{min-height:104px} }
.vv3 .vv3-hab-tile-ico{width:34px;height:34px;color:var(--lime);transition:color .2s,transform .25s}
.vv3 .vv3-hab-tile-ico .i{width:100%;height:100%}
.vv3 .vv3-hab-tile-txt{font:700 11.5px/1.25 'Space Grotesk';text-align:center;color:rgba(247,245,240,.85);letter-spacing:.01em}
.vv3 .vv3-hab-tile-n{position:absolute;top:7px;left:10px;font:700 10px 'Space Mono';color:rgba(247,245,240,.35)}
.vv3 .vv3-hab-tile-chk{
  position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;
  background:var(--lime);color:var(--navy);border:2px solid var(--navy);
  display:flex;align-items:center;justify-content:center;
  transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)
}
.vv3 .vv3-hab-tile-chk .i{width:14px;height:14px}
@media (hover:hover) and (pointer:fine){
  .vv3 .vv3-hab-tile:hover{transform:rotate(var(--tilt)) scale(1.05);border-color:rgba(201,234,61,.5)}
}
.vv3 .vv3-hab-tile.is-active{border-color:var(--lime);box-shadow:0 0 0 3px rgba(201,234,61,.22),0 10px 26px rgba(0,0,0,.28);transform:translateY(-3px)}
.vv3 .vv3-hab-tile.is-active .vv3-hab-tile-ico{transform:scale(1.12)}
.vv3 .vv3-hab-tile.is-on{background:var(--lime);border-color:var(--lime);transform:rotate(var(--tilt));box-shadow:0 6px 18px rgba(201,234,61,.22)}
.vv3 .vv3-hab-tile.is-on.is-active{transform:rotate(var(--tilt)) translateY(-3px);box-shadow:0 0 0 3px rgba(247,245,240,.35),0 10px 26px rgba(0,0,0,.28)}
.vv3 .vv3-hab-tile.is-on .vv3-hab-tile-ico{color:var(--navy)}
.vv3 .vv3-hab-tile.is-on .vv3-hab-tile-txt{color:var(--navy)}
.vv3 .vv3-hab-tile.is-on .vv3-hab-tile-n{color:rgba(0,49,83,.55)}
.vv3 .vv3-hab-tile.is-on .vv3-hab-tile-chk{transform:scale(1)}

/* reflektor-panel */
.vv3 .vv3-hab-spot{
  position:relative;overflow:hidden;min-height:300px;
  background:linear-gradient(160deg,#0a3a5c,#062a44);border:1.5px solid rgba(201,234,61,.3);border-radius:22px;
  padding:24px 26px 22px;display:flex;flex-direction:column;gap:12px;transition:border-color .3s
}
.vv3 .vv3-hab-spot::before{content:'';position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,234,61,.16),transparent 65%);pointer-events:none;transition:opacity .3s}
.vv3 .vv3-hab-spot.is-on{border-color:rgba(201,234,61,.7)}
.vv3 .vv3-hab-spot-in{animation:vv3spot .35s ease both}
@keyframes vv3spot{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.vv3 .vv3-hab-spot-head{display:flex;align-items:center;gap:14px}
.vv3 .vv3-hab-spot-ico{flex:none;width:56px;height:56px;border-radius:16px;background:var(--lime);color:var(--navy);display:flex;align-items:center;justify-content:center}
.vv3 .vv3-hab-spot-ico .i{width:28px;height:28px}
.vv3 .vv3-hab-spot-eyebrow{font:700 12px 'Space Mono';letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.vv3 .vv3-hab-spot-title{margin:2px 0 0;font:700 22px/1.2 'Space Grotesk';letter-spacing:-.01em;color:var(--cream)}
.vv3 .vv3-hab-spot-text{margin:0;font-size:15px;line-height:1.6;color:rgba(247,245,240,.78);flex:1}
.vv3 .vv3-hab-spot-text strong{color:var(--cream)}
.vv3 .vv3-hab-spot-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px}
.vv3 .vv3-hab-spot-done{
  cursor:pointer;display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:999px;
  background:var(--lime);color:var(--navy);border:1.5px solid var(--lime);
  font:700 14px 'Space Grotesk';transition:background .2s,color .2s,transform .15s
}
.vv3 .vv3-hab-spot-done .i{width:18px;height:18px}
.vv3 .vv3-hab-spot-done:active{transform:scale(.97)}
.vv3 .vv3-hab-spot-done.is-on{background:rgba(201,234,61,.12);color:var(--lime)}
.vv3 .vv3-hab-spot-nav{display:inline-flex;gap:8px}
.vv3 .vv3-hab-spot-prev,.vv3 .vv3-hab-spot-next{
  cursor:pointer;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(247,245,240,.06);border:1.5px solid rgba(247,245,240,.16);color:var(--cream);transition:background .2s,border-color .2s
}
.vv3 .vv3-hab-spot-prev .i,.vv3 .vv3-hab-spot-next .i{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){
  .vv3 .vv3-hab-spot-prev:hover,.vv3 .vv3-hab-spot-next:hover{border-color:var(--lime);background:rgba(201,234,61,.12)}
}
@media(max-width:900px){
  .vv3 #vv3-habits.vv3-hab{grid-template-columns:1fr!important}
  .vv3 .vv3-hab-spot{min-height:0}
}
@media(max-width:600px){
  .vv3 .vv3-hab-wall{grid-template-columns:repeat(4,1fr);gap:9px}
  .vv3 .vv3-hab-tile{border-radius:14px;gap:6px;padding:9px 5px 8px}
  .vv3 .vv3-hab-tile-ico{width:26px;height:26px}
  .vv3 .vv3-hab-tile-txt{font-size:10px}
  .vv3 .vv3-hab-tile-n{display:none}
  .vv3 .vv3-hab-spot{padding:20px 18px 18px;border-radius:18px}
  .vv3 .vv3-hab-spot-title{font-size:19px}
}

/* ---- Telefonkönyv · telefonszám-memória ----
   2026-09-17 óta: bal oldalt egy TELEFON-MOCKUP (.vv3-phone) a „Kedvencek"
   listával — a sorokra koppintva jelölöd, kinek a számát tudod fejből
   (lime pipa, a státuszsáv térerő-csíkjai is nőnek). Jobb oldalt a panel
   (#vv3-mem-panel) a kipipáltak számából (MEM[n-1]) mutatja az értékelést,
   0-nál a felhívó szöveget. A markup a régi (#vv3-mem-opts / #vv3-mem-panel),
   mindent a vv3-page.js épít bele. */
.vv3 .vv3-mem-phone-wrap{display:flex;align-items:stretch;justify-content:center}
.vv3 .vv3-phone{
  position:relative;width:100%;max-width:320px;margin:0 auto;
  background:#041a2c;border:7px solid #0d2f47;border-radius:36px;
  box-shadow:0 0 0 1.5px rgba(247,245,240,.12),0 22px 50px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.04);
  padding:14px 14px 16px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .3s
}
.vv3 .vv3-phone.is-full{box-shadow:0 0 0 1.5px rgba(201,234,61,.55),0 22px 50px rgba(0,0,0,.45),0 0 40px rgba(201,234,61,.18)}
.vv3 .vv3-phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:96px;height:22px;border-radius:999px;background:#0d2f47}
.vv3 .vv3-phone-status{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 0;height:30px}
.vv3 .vv3-phone-time{font:700 13px 'Space Grotesk';color:rgba(247,245,240,.85)}
.vv3 .vv3-phone-sig{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.vv3 .vv3-phone-sig i{display:block;width:4px;border-radius:1.5px;background:rgba(247,245,240,.22);transition:background .25s}
.vv3 .vv3-phone-sig i:nth-child(1){height:5px}
.vv3 .vv3-phone-sig i:nth-child(2){height:8px}
.vv3 .vv3-phone-sig i:nth-child(3){height:11px}
.vv3 .vv3-phone-sig i:nth-child(4){height:14px}
.vv3 .vv3-phone-sig i.is-on{background:var(--lime)}
.vv3 .vv3-phone-head{display:flex;align-items:center;gap:8px;padding:6px 6px 2px;font:700 18px 'Space Grotesk';color:var(--cream)}
.vv3 .vv3-phone-head>.i{width:18px;height:18px;color:var(--amber)}
.vv3 .vv3-phone-count{margin-left:auto;font:700 11px 'Space Mono';letter-spacing:.06em;color:rgba(247,245,240,.55)}
.vv3 .vv3-phone-count b{color:var(--lime);font-size:13px}
.vv3 .vv3-phone-list{display:flex;flex-direction:column;gap:6px}
.vv3 .vv3-phone-row{
  cursor:pointer;display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:rgba(247,245,240,.05);border:1.5px solid rgba(247,245,240,.08);border-radius:16px;padding:10px 12px;
  color:var(--cream);transition:background .2s,border-color .2s,transform .15s;-webkit-tap-highlight-color:transparent
}
.vv3 .vv3-phone-row:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .vv3 .vv3-phone-row:hover{border-color:rgba(201,234,61,.4)}
}
.vv3 .vv3-phone-row.is-on{background:rgba(201,234,61,.12);border-color:rgba(201,234,61,.6)}
.vv3 .vv3-phone-ava{
  flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#1b5a80,#0a3a5c);color:rgba(247,245,240,.85);transition:background .2s,color .2s
}
.vv3 .vv3-phone-ava .i{width:19px;height:19px}
.vv3 .vv3-phone-row.is-on .vv3-phone-ava{background:var(--lime);color:var(--navy)}
.vv3 .vv3-phone-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.vv3 .vv3-phone-name{font:700 15px 'Space Grotesk';color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vv3 .vv3-phone-sub{font:500 11.5px 'DM Sans';color:rgba(247,245,240,.5)}
.vv3 .vv3-phone-row.is-on .vv3-phone-sub{color:var(--lime)}
.vv3 .vv3-phone-chk{
  flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(247,245,240,.25);
  display:flex;align-items:center;justify-content:center;color:transparent;transition:background .2s,border-color .2s,color .2s
}
.vv3 .vv3-phone-chk .i{width:15px;height:15px}
.vv3 .vv3-phone-row.is-on .vv3-phone-chk{background:var(--lime);border-color:var(--lime);color:var(--navy)}
.vv3 .vv3-phone-hint{font:italic 500 12px 'DM Sans';color:rgba(247,245,240,.5);text-align:center;padding:4px 8px 0;line-height:1.45}
.vv3 .vv3-phone-hint b{color:rgba(247,245,240,.8)}

/* jobb oldali panel tartalma */
.vv3 #vv3-mem-panel{display:flex;flex-direction:column}
.vv3 .vv3-mem-idle{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;
  color:rgba(247,245,240,.6);padding:10px
}
.vv3 .vv3-mem-idle>.i{width:44px;height:44px;color:var(--teal)}
.vv3 .vv3-mem-idle p{font:500 15px/1.55 'DM Sans';max-width:300px;margin:0}
.vv3 .vv3-mem-idle b{color:var(--cream)}
.vv3 .vv3-mem-res{flex:1;display:flex;flex-direction:column;justify-content:center}
.vv3 .vv3-mem-res-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.vv3 .vv3-mem-res-n{
  flex:none;width:64px;height:64px;border-radius:18px;background:var(--lime);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:36px
}
.vv3 .vv3-mem-res-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.vv3 .vv3-mem-res-tag{font:800 19px/1.1 'Space Grotesk';color:var(--lime)}
.vv3 .vv3-mem-res-sub{display:inline-flex;align-items:center;gap:8px;font:700 11px 'Space Mono';letter-spacing:.08em;text-transform:uppercase;color:rgba(247,245,240,.5)}
.vv3 .vv3-mem-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.vv3 .vv3-mem-bars i{display:block;width:4px;border-radius:1.5px;background:rgba(247,245,240,.2)}
.vv3 .vv3-mem-bars i:nth-child(1){height:5px}
.vv3 .vv3-mem-bars i:nth-child(2){height:8px}
.vv3 .vv3-mem-bars i:nth-child(3){height:11px}
.vv3 .vv3-mem-bars i:nth-child(4){height:14px}
.vv3 .vv3-mem-bars i.is-on{background:var(--lime)}
.vv3 .vv3-mem-res-txt{font-size:15px;line-height:1.6;color:rgba(247,245,240,.9);margin:0 0 18px}
.vv3 .vv3-mem-next{
  align-self:flex-start;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  background:var(--teal);color:#fff;border:none;font:700 15px 'Space Grotesk';padding:13px 20px;border-radius:12px;
  transition:transform .15s,filter .2s
}
.vv3 .vv3-mem-next .i{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){ .vv3 .vv3-mem-next:hover{filter:brightness(1.08)} }
.vv3 .vv3-mem-next:active{transform:scale(.97)}
.vv3-call-cta{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;height:100%;
  background:linear-gradient(160deg,var(--lime),#a9cf1f);border-radius:16px;padding:26px 22px
}
.vv3-call-big{font-family:'Anton',sans-serif;font-size:56px;line-height:.9;color:var(--navy);letter-spacing:-.01em}
.vv3-call-sub{font:italic 500 14px 'DM Sans';color:#123f2a;max-width:280px;margin:12px 0 0;line-height:1.5}

/* ---- Lokátor vs. háromszögelés térkép ---- */
.vv3-map{
  position:relative;overflow:hidden;height:360px;border-radius:20px;
  border:1.5px solid rgba(247,245,240,.12);cursor:grab;
  background:#0c2033;touch-action:none
}
.vv3-map.vv3-grabbing{cursor:grabbing}
/* pásztázható „térkép-világ" — CSS-rajzolt utcahálózat */
.vv3-map-world{
  position:absolute;top:0;left:0;width:160%;height:160%;
  background-color:#12324a;
  background-image:
    linear-gradient(rgba(247,245,240,.10) 2px,transparent 2px),
    linear-gradient(90deg,rgba(247,245,240,.10) 2px,transparent 2px),
    linear-gradient(rgba(247,245,240,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(247,245,240,.05) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,40px 40px,40px 40px;
  will-change:transform
}
/* pár „park" folt a térképen, hogy ne legyen üres */
.vv3-map-world::before{
  content:"";position:absolute;left:180px;top:120px;width:150px;height:110px;border-radius:16px;
  background:rgba(17,183,163,.18);box-shadow:340px 220px 0 rgba(17,183,163,.14),120px 360px 0 rgba(255,197,61,.10)
}
/* telefon-jelölő + kimenetel-rétegek (a világ közepéhez rögzítve) */
.vv3-map-anchor{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
/* pontos háromszög (háromszögeléses mód) */
.vv3-map-triangle{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-58%);
  width:0;height:0;border-left:130px solid transparent;border-right:130px solid transparent;
  border-bottom:210px solid rgba(201,234,61,.20);
  filter:drop-shadow(0 0 0 rgba(0,0,0,0));pointer-events:none
}
.vv3-map-triangle::after{
  content:"";position:absolute;left:-130px;top:0;width:0;height:0;
  border-left:130px solid transparent;border-right:130px solid transparent;
  border-bottom:210px solid transparent;
}
/* háromszög körvonala */
.vv3-map-tri-outline{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-58%);pointer-events:none
}
/* pontos bemérés: kis pulzáló kör a pötty körül */
.vv3-map-precise{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,234,61,.28),rgba(201,234,61,0) 70%);
  border:2px solid rgba(201,234,61,.6);pointer-events:none;animation:vv3ping 2s ease-out infinite
}
@keyframes vv3ping{0%{box-shadow:0 0 0 0 rgba(201,234,61,.4)}70%{box-shadow:0 0 0 22px rgba(201,234,61,0)}100%{box-shadow:0 0 0 0 rgba(201,234,61,0)}}
/* a telefon-pötty (mindig középen, a jelölő cuccban egy telefon) */
.vv3-map-pin{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);
  display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:3
}
.vv3-map-pin .vv3-map-bubble{
  width:44px;height:44px;border-radius:50% 50% 50% 4px;transform:rotate(45deg);
  background:var(--amber);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px rgba(0,0,0,.4);border:2px solid #1b2732
}
.vv3-map-pin.vv3-map-pin-precise .vv3-map-bubble{background:var(--lime)}
.vv3-map-pin .vv3-map-bubble .i{transform:rotate(-45deg);color:#1b2732}
.vv3-map-q{
  margin-top:6px;font-family:'Anton',sans-serif;font-size:26px;color:var(--amber);
  text-shadow:0 2px 6px rgba(0,0,0,.5)
}
.vv3-map-pin-precise + .vv3-map-q,.vv3-map-pin.vv3-map-pin-precise .vv3-map-q{display:none}
/* readout doboz — a módválasztó gombok alatt, a jobb oszlopban (2026-09-17-ig a térkép alatt volt) */
.vv3-map-readout{
  display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.55;
  color:rgba(247,245,240,.85);background:rgba(247,245,240,.04);
  border:1.5px solid rgba(247,245,240,.12);border-radius:14px;padding:14px 16px
}

/* ---- BikeSafe beágyazás ----
   2026-09-17 óta CSAK MOBILON (≤600px) látszik; asztalin/tableten a
   „bikesafe.hu" gomb marad a bringa-kártyán. A hozzá tartozó zárójeles
   megjegyzés (.vv3-embed-note) is csak mobilon jelenik meg. */
.vv3-embed{
  border:1.5px solid rgba(247,245,240,.14);border-radius:16px;overflow:hidden;background:#0a3a5c
}
.vv3-embed iframe{display:block;width:100%;height:420px;border:0;background:#fff}
@media(min-width:601px){
  .vv3 .vv3-embed,.vv3 .vv3-embed-note{display:none}
}

/* ---- 02 · Bulizás közben — fordítható eset-kártyák ----
   A két lap NEM abszolút pozicionált, hanem ugyanabba a rács-cellába
   kerül, így nincs szükség fix kártyamagasságra: a kártya a hosszabbik
   laphoz igazodik, a rács pedig soron belül egyformára húzza őket. */
.vv3-party-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vv3-pc{perspective:1300px;display:grid}
.vv3-pc-inner{
  position:relative;display:grid;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,.15,.2,1)
}
.vv3-pc.vv3-pc-flipped .vv3-pc-inner{transform:rotateY(180deg)}
.vv3-pc-face{
  grid-area:1/1;min-width:0;backface-visibility:hidden;
  border-radius:18px;padding:20px;display:flex;flex-direction:column;overflow:hidden;
  background:#0a3a5c;border:1.5px solid rgba(247,245,240,.1)
}
.vv3-pc-back{transform:rotateY(180deg)}
.vv3-pc-num{
  position:absolute;top:16px;right:18px;
  font-family:'Anton',sans-serif;font-size:22px;color:rgba(247,245,240,.16)
}
.vv3-pc-tag{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  padding:5px 11px;border-radius:999px;margin-bottom:14px;
  font:700 10px 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase
}
.vv3-pc-txt{font-size:15.5px;line-height:1.45;font-weight:600;color:var(--cream);margin:0 0 16px}
.vv3-pc-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.vv3-pc-btn{
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;
  border-radius:13px;padding:12px 8px;border:2px solid;background:transparent;
  font:800 11.5px 'Space Grotesk',sans-serif;line-height:1.25;text-align:center;
  transition:transform .12s,background .18s
}
@media (hover:hover) and (pointer:fine){.vv3-pc-btn:hover{transform:translateY(-2px)}}
.vv3-pc-yes{color:var(--danger);border-color:var(--danger);background:rgba(255,90,90,.1)}
@media (hover:hover) and (pointer:fine){.vv3-pc-yes:hover{background:rgba(255,90,90,.2)}}
.vv3-pc-no{color:var(--lime);border-color:var(--lime);background:rgba(201,234,61,.1)}
@media (hover:hover) and (pointer:fine){.vv3-pc-no:hover{background:rgba(201,234,61,.2)}}
.vv3-pc-verdict{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:6px 12px;border-radius:999px;margin-bottom:12px;
  font:800 11px 'Space Grotesk',sans-serif;letter-spacing:.04em;text-transform:uppercase
}
.vv3-pc-tip{font-size:14px;line-height:1.55;color:rgba(247,245,240,.86);margin:0 0 14px}
.vv3-pc-back-btn{
  cursor:pointer;margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  background:none;border:none;padding:0;color:rgba(247,245,240,.55);
  font:700 12px 'Space Mono',monospace;text-transform:uppercase;letter-spacing:.06em
}
@media (hover:hover) and (pointer:fine){.vv3-pc-back-btn:hover{color:var(--cream)}}

/* ---- 02 · Bulizós checklist ----
   A chipek 2026-09-17 óta PIPÁLHATÓK: a vv3-page.js initPartyCheck()-je
   kattintásra az `is-on` osztályt kapcsolgatja (a markup statikus, id
   nem kell — osztály alapján találja meg). Kipipálva zöld (teal) keret +
   halvány zöld háttér, és a jobb felső sarokban egy pipa-jelvény
   (.vv3-party-chip-chk, a JS szúrja be). */
.vv3-party-check{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vv3-party-chip{
  position:relative;display:flex;align-items:flex-start;gap:13px;cursor:pointer;
  background:#0a3a5c;border:1.5px solid rgba(247,245,240,.1);border-radius:15px;padding:16px 18px;
  transition:border-color .2s,background .2s,transform .2s;-webkit-tap-highlight-color:transparent
}
@media (hover:hover) and (pointer:fine){
  .vv3-party-chip:hover{border-color:rgba(17,183,163,.5)}
}
.vv3-party-chip.is-on{border-color:var(--teal);background:rgba(17,183,163,.1)}
.vv3-party-chip-chk{
  position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;
  background:var(--teal);color:var(--navy);border:2px solid var(--navy);
  display:flex;align-items:center;justify-content:center;
  transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)
}
.vv3-party-chip-chk .i{width:15px;height:15px}
.vv3-party-chip.is-on .vv3-party-chip-chk{transform:scale(1)}
.vv3-party-chip-ico{
  flex:none;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center
}
.vv3-party-chip-t{font:700 15px 'Space Grotesk',sans-serif;color:var(--cream);margin-bottom:3px}
.vv3-party-chip-s{font-size:13px;line-height:1.45;color:rgba(247,245,240,.65)}

/* ---- 03 · Elveszett tárgyak — nyitható kontaktkártyák ---- */
.vv3-lost-item{
  background:#0a3a5c;border:1.5px solid rgba(247,245,240,.1);border-radius:15px;
  overflow:hidden;transition:border-color .2s
}
.vv3-lost-item.vv3-lost-open{border-color:rgba(17,183,163,.45)}
.vv3-lost-head{
  cursor:pointer;display:flex;align-items:center;gap:13px;width:100%;
  background:transparent;border:0;padding:15px 17px;color:var(--cream)
}
.vv3-lost-ico{
  flex:none;width:40px;height:40px;border-radius:11px;background:rgba(17,183,163,.16);
  color:var(--teal);display:flex;align-items:center;justify-content:center
}
.vv3-lost-chev{transition:transform .25s}
.vv3-lost-open .vv3-lost-chev{transform:rotate(180deg)}
.vv3-lost-body{padding:2px 17px 16px}
.vv3-lost-row{display:flex;gap:12px;padding:7px 0;border-top:1px solid rgba(247,245,240,.08)}
.vv3-lost-key{
  flex:none;width:92px;font:700 11px 'Space Mono';letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal);padding-top:2px
}
.vv3-lost-val{flex:1;font-size:14px;line-height:1.5;color:rgba(247,245,240,.88);word-break:break-word}
/* a kontaktlista 3-asával tömbösítve (rács) */
.vv3 #vv3-lost{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}

/* ---- Játék 2 · lépés-chipek (ikonos, tagolt utasítás) ---- */
.vv3 .vv3-f1-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:660px;margin:0 auto 14px}
.vv3 .vv3-f1-step{
  display:inline-flex;align-items:center;gap:9px;background:rgba(247,245,240,.05);
  border:1px solid rgba(247,245,240,.14);border-radius:12px;padding:10px 14px;
  font:600 13.5px 'DM Sans';color:rgba(247,245,240,.9);text-align:left
}
.vv3 .vv3-f1-step-warn{background:rgba(255,90,90,.08);border-color:rgba(255,90,90,.32)}
/* A chip szövegét burkoló span. NÉLKÜLE a szöveg szavai KÜLÖN flex-elemek
   lesznek, és keskeny kijelzőn hasábokra esik szét a mondat. */
.vv3 .vv3-f1-step-t{min-width:0}
.vv3 .vv3-f1-step-n{
  flex:none;width:20px;height:20px;border-radius:50%;background:var(--lime);color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;font:800 12px 'Space Grotesk'
}
.vv3 .vv3-f1-step-warn .vv3-f1-step-n{background:var(--danger);color:#fff}

/* ---- Játék 2 · F1-lámpák ---- */
.vv3-f1-lights{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.vv3-f1-col{
  display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;
  background:#0a2740;border:2px solid #123f5f
}
.vv3-f1-lamp{
  width:46px;height:46px;border-radius:50%;background:#2a0d0f;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.35);transition:background .05s,box-shadow .05s
}
.vv3-f1-lamp.vv3-f1-on{
  background:radial-gradient(circle at 40% 35%,#ff8a8a,#ff2b2b 60%,#c40000);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.2),0 0 18px rgba(255,60,60,.7)
}
.vv3-f1-lamp.vv3-f1-jump{
  background:radial-gradient(circle at 40% 35%,#fff2a8,#ffd23f 60%,#e0a800);
  box-shadow:0 0 20px rgba(255,210,63,.8);animation:vv3f1blink .12s steps(1) 4
}
@keyframes vv3f1blink{0%{opacity:1}50%{opacity:.25}100%{opacity:1}}
.vv3-f1-time{
  font-family:'Space Mono',monospace;font-weight:700;font-size:44px;letter-spacing:.02em;
  text-align:center;color:rgba(247,245,240,.85)
}
.vv3-f1-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:none;border-radius:14px;padding:16px 28px;cursor:pointer;
  font:800 18px 'Space Grotesk';background:var(--lime);color:var(--navy);
  transition:background .15s,color .15s,transform .08s;user-select:none
}
.vv3-f1-btn:active{transform:scale(.97)}
.vv3-f1.vv3-f1-flash{animation:vv3f1flash .5s ease}
@keyframes vv3f1flash{0%{box-shadow:0 0 0 0 rgba(201,234,61,.5)}100%{box-shadow:0 0 0 26px rgba(201,234,61,0)}}

/* ---- HERO / dekor animációk (a szekció-fájlból hivatkozva) ---- */
@keyframes vv3float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes vv3marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes vv3pulseL{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)}}

/* ---- Reszponzív ---- */
@media(max-width:900px){
  .vv3-party-grid{grid-template-columns:1fr 1fr}
  .vv3-party-check{grid-template-columns:1fr 1fr}
  .vv3-hero-grid{grid-template-columns:1fr!important}
  .vv3-two{grid-template-columns:1fr!important}
  .vv3-mem-grid{grid-template-columns:1fr!important}
  .vv3-map-grid{grid-template-columns:1fr!important}
  .vv3-carbike{grid-template-columns:1fr!important}
  .vv3-q-grid{grid-template-columns:repeat(2,1fr)!important}
  .vv3 #vv3-lost{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .vv3-party-grid{grid-template-columns:1fr}
  .vv3-party-check{grid-template-columns:1fr}
  .vv3-nav-links{display:none!important}
  #vv3-habits{grid-template-columns:1fr!important}
  .vv3-q-grid{grid-template-columns:1fr!important}
  .vv3 #vv3-lost{grid-template-columns:1fr}
  .vv3-map{height:300px}
  .vv3-f1-lamp{width:34px;height:34px}
  .vv3-f1-time{font-size:34px}
}

/* ============================================================
   03 „Ha baj van" — MOBIL optimalizálás
   ============================================================ */
@media(max-width:600px){

  /* ---- 107-es piros buborék ----
     A szövegblokk min-width:220px-e miatt 375px-en nem fért el az ikon
     mellett, ezért külön sorba tört, és fölötte tátongott a hely.
     Szűkebb margó + kisebb ikon + min-width:0 → egy sorban marad. */
  .vv3 .vv3-107{padding:16px 15px!important;gap:13px!important;margin-bottom:20px!important}
  .vv3 .vv3-107-ic{width:44px!important;height:44px!important;border-radius:12px!important}
  .vv3 .vv3-107-ic .i{width:24px!important;height:24px!important}
  .vv3 .vv3-107-txt{min-width:0!important}
  .vv3 .vv3-107-txt>div:first-child{font-size:17px!important}
  .vv3 .vv3-107-txt>div:last-child{font-size:13px!important;line-height:1.45!important}

  /* ---- „Fontos kérdések" — 3 kártya egymás mellett, nyíllal összekötve ----
     Korábban egy hasábban, egymás alatt futottak (5 nagy doboz), és nem
     látszott, hogy ezek EGYMÁS UTÁN jövő kérdések. Most hármasával állnak,
     a kártyák közti hézagban szaggatott vonal + nyílhegy mutatja a sorrendet.
     A sor végén (3.) és a legutolsónál nincs nyíl. */
  .vv3 .vv3-q-grid[style*="repeat(5"]{grid-template-columns:repeat(3,minmax(0,1fr))!important;
                   column-gap:17px!important;row-gap:14px!important}
  .vv3 .vv3-q-grid[style*="repeat(5"]>div{position:relative;padding:12px 8px!important;border-radius:12px!important}
  .vv3 .vv3-q-grid[style*="repeat(5"]>div .i{width:20px!important;height:20px!important;margin-bottom:5px!important}
  /* a kártyában ikon + EGY sor („Mit vittek el?") — a „Mi?"-féle rövid kérdés 2026-09-02 óta nincs */
  .vv3 .vv3-q-grid[style*="repeat(5"]>div>div:nth-child(2){font-size:14px!important;line-height:1.3!important}
  /* szaggatott összekötő + nyílhegy a hézagban */
  .vv3 .vv3-q-grid[style*="repeat(5"]>div::before{content:"";position:absolute;top:50%;right:-17px;width:17px;
    border-top:2px dashed rgba(17,183,163,.5);transform:translateY(-50%)}
  .vv3 .vv3-q-grid[style*="repeat(5"]>div::after{content:"";position:absolute;top:50%;right:-6px;width:0;height:0;
    border-left:6px solid rgba(17,183,163,.8);border-top:4.5px solid transparent;
    border-bottom:4.5px solid transparent;transform:translateY(-50%)}
  .vv3 .vv3-q-grid[style*="repeat(5"]>div:nth-child(3n)::before,.vv3 .vv3-q-grid[style*="repeat(5"]>div:nth-child(3n)::after,
  .vv3 .vv3-q-grid[style*="repeat(5"]>div:last-child::before,.vv3 .vv3-q-grid[style*="repeat(5"]>div:last-child::after{display:none}

  /* ---- Játék 2 · reakcióidő — a kb2 aloldal mobil-elrendezése szerint ----
     A lépés-chipek egymás alá, teljes szélességben; a „Bal klikk a gombon
     vagy SPACE" lépés telefonon értelmetlen, ezért nem jelenik meg.
     A lámpasor MINDIG egy sorban marad: az oszlopok együtt zsugorodnak, a
     lámpa a saját oszlopa szélességét veszi fel (aspect-ratio 1:1). */
  .vv3 .vv3-f1{padding:26px 16px!important}
  .vv3 .vv3-f1-steps{flex-direction:column;align-items:stretch;max-width:420px}
  .vv3 .vv3-f1-step{width:100%}
  .vv3 .vv3-f1-step-desk{display:none}
  /* Védőháló a RÉGI (2026-08-25 előtti) markupra, amelyben a chip szövege
     NINCS .vv3-f1-step-t span-ba csomagolva: flexben a szavak külön
     hasábokra estek („Amint | mind egyszerre kialszik | , csapj le!").
     Ilyenkor a chip sima blokk lesz, a szöveg természetesen tördelődik;
     a 3. („Bal klikk … SPACE") lépést sorszám szerint is elrejtjük. */
  .vv3 .vv3-f1-step:not(:has(.vv3-f1-step-t)){display:block;line-height:1.5}
  .vv3 .vv3-f1-step:not(:has(.vv3-f1-step-t))>.vv3-f1-step-n,
  .vv3 .vv3-f1-step:not(:has(.vv3-f1-step-t))>.i{vertical-align:middle;margin-right:6px}
  .vv3 .vv3-f1-steps>.vv3-f1-step:nth-child(3){display:none}
  .vv3-f1-lights{flex-wrap:nowrap;gap:6px;width:100%;max-width:330px;margin-left:auto;margin-right:auto}
  .vv3-f1-col{flex:1 1 0;min-width:0;align-items:center;padding:6px;gap:6px}
  .vv3-f1-lamp{width:100%;height:auto;aspect-ratio:1/1;max-width:34px}
}

/* ============================================================
   03 · „Illetve" lime buborékok (fénykép · gyári szám · leírás)
   ============================================================
   Ugyanazt a .vv3-q-grid osztályt viselik, mint a „Fontos kérdések"
   5-ös rács, ezért a fenti 3-hasábos + nyilas mobil-szabály RÁJUK IS
   ráült: 100 px-es hasábokban a szöveg kilógott, a szavak az ikonra
   csúsztak. A 3-hasábos szabály most az inline `repeat(5,1fr)`-re van
   skópozva; a buborékok telefonon egy hasábban, teljes szélességben
   futnak. */
@media(max-width:600px){
  .vv3 .vv3-q-grid[style*="1fr 1fr 1fr"]{grid-template-columns:1fr!important;gap:10px!important}
  .vv3 .vv3-q-grid[style*="1fr 1fr 1fr"]>div{padding:13px 14px!important}
  .vv3 .vv3-q-grid[style*="1fr 1fr 1fr"]>div>span:last-child{min-width:0;overflow-wrap:anywhere}
}

/* ============================================================
   Játék 2 · KOMPATIBILITÁS a kb2-es F1-markuppal
   ============================================================
   Az éles hellobiztonsag.hu/vagyonvedelem-3/ oldal utolsó widgetjébe
   (2026-09-02-i állapot) NEM a vv3 „Játék 2" blokk, hanem a Friss a
   jogsim (kb2) teljes „05 · Reakcióidő" szekciója van beillesztve
   (`<div class="vv3"><div class="kb2">…`, `kb2-f1-*` osztályok, `#kb2-f1-*`
   id-k → a kb2-page.js hajtja). A `.kb2` wrapper miatt a kb2-style.css
   szabályai ott érvényesülnek, de ha a wrapper egyszer lemarad (csak a
   `.vv3` alá kerül a kb2-markup), a chipek keret nélkül, hasábokra esve
   jelennének meg. Az alábbi blokk ezért a vv3 F1-szabályokat a
   kb2-osztályokra is ráteszi, és telefonon a 3. („Bal klikk … SPACE")
   lépést is elrejti, amit a kb2-style.css magától nem tesz meg.
   FIGYELEM: a beillesztett kb2-szekció SZÖVEGE (05 · Reakcióidő, „Valós
   forgalomban … féktávod") a közlekedéses oldalé — a vagyonvédelmi
   „Játék 2" változatot a vagyonvedelem-3-szekciok.html-ből kell újra
   beilleszteni; a CSS mindkét markuppal működik. */
.vv3 .kb2-f1-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:660px;margin:0 auto 14px}
.vv3 .kb2-f1-step{
  display:inline-flex;align-items:center;gap:9px;background:rgba(247,245,240,.05);
  border:1px solid rgba(247,245,240,.14);border-radius:12px;padding:10px 14px;
  font:600 13.5px 'DM Sans';color:rgba(247,245,240,.9);text-align:left
}
.vv3 .kb2-f1-step-warn{background:rgba(255,90,90,.08);border-color:rgba(255,90,90,.32)}
.vv3 .kb2-f1-step-t{min-width:0}
.vv3 .kb2-f1-step-n{
  flex:none;width:20px;height:20px;border-radius:50%;background:var(--lime);color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;font:800 12px 'Space Grotesk'
}
.vv3 .kb2-f1-step-warn .kb2-f1-step-n{background:var(--danger);color:#fff}
.vv3 .kb2-f1-lights{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.vv3 .kb2-f1-col{
  display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;
  background:#0a2740;border:2px solid #123f5f
}
.vv3 .kb2-f1-lamp{
  width:46px;height:46px;border-radius:50%;background:#2a0d0f;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.35);transition:background .05s,box-shadow .05s
}
.vv3 .kb2-f1-lamp.kb2-f1-on{
  background:radial-gradient(circle at 40% 35%,#ff8a8a,#ff2b2b 60%,#c40000);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.2),0 0 18px rgba(255,60,60,.7)
}
.vv3 .kb2-f1-lamp.kb2-f1-jump{
  background:radial-gradient(circle at 40% 35%,#fff2a8,#ffd23f 60%,#e0a800);
  box-shadow:0 0 20px rgba(255,210,63,.8);animation:vv3f1blink .12s steps(1) 4
}
.vv3 .kb2-f1-time{
  font-family:'Space Mono',monospace;font-weight:700;font-size:44px;letter-spacing:.02em;
  text-align:center;color:rgba(247,245,240,.85)
}
.vv3 .kb2-f1-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;border-radius:14px;
  padding:16px 28px;cursor:pointer;font:800 18px 'Space Grotesk';background:var(--lime);color:var(--navy);
  transition:background .15s,color .15s,transform .08s;user-select:none
}
.vv3 .kb2-f1-btn:active{transform:scale(.97)}
.vv3 .kb2-f1.kb2-f1-flash{animation:vv3f1flash .5s ease}
@media(max-width:600px){
  .vv3 .kb2-f1{padding:26px 16px!important}
  .vv3 .kb2-f1-steps{flex-direction:column;align-items:stretch;max-width:420px}
  .vv3 .kb2-f1-step{width:100%}
  /* 3. lépés = „Bal klikk a gombon vagy SPACE" — telefonon értelmetlen */
  .vv3 .kb2-f1-step:nth-child(3){display:none}
  /* a stopper-üzenet „— bal klikk vagy SPACE" farka (kb2- ÉS vv3-változat) */
  .vv3 .kb2-f1-kbd,.vv3 .vv3-f1-kbd{display:none}
  .vv3 .kb2-f1-lights{flex-wrap:nowrap;gap:6px;width:100%;max-width:330px;margin-left:auto;margin-right:auto}
  .vv3 .kb2-f1-col{flex:1 1 0;min-width:0;align-items:center;padding:6px;gap:6px}
  .vv3 .kb2-f1-lamp{width:100%;height:auto;aspect-ratio:1/1;max-width:34px}
  .vv3 .kb2-f1-time{font-size:34px}
}