/* ============================================================
   Hello Biztonság — SZERZŐDÉSKÖTÉS · 1. aloldal („Mire mondtál igent?") stílus
   Minden szabály .sz alá skópozva, hogy ne ütközzön a témával.
   A blokkjaidra tedd rá a .sz wrappert (ld. szekció-fájl).
   A dinamikus tartalmat (boncolás, helyzet-játék, fordítható lapok,
   sorrend-feladat, életkor-csúszka) az sz-page.js építi fel — a
   kártyák belső stílusa ott, inline van; ide csak az kerül, amit
   inline nem lehet (hover, animáció, reszponzív, flip-3D).
   ============================================================ */

.sz{
  --navy:#003153; --navy-d:#00263f; --teal:#11B7A3; --lime:#C9EA3D;
  --cream:#F7F5F0; --danger:#FF5A5A; --amber:#F5B324; --info:#8AA9C9;
  --neon:#FF2A4D;
  --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);
}
.sz *{box-sizing:border-box}
.sz img{display:block}
.sz a{text-decoration:none}
.sz button{font-family:inherit}
.sz .i{display:inline-flex;align-items:center;justify-content:center}
.sz .i svg{width:100%;height:100%;display:block}
.sz-hidden{display:none!important}

/* ---- Belépő animációk ---- */
.sz-pop{animation:szpop .5s cubic-bezier(.2,.9,.3,1.2) backwards}
.sz-rise{animation:szrise .45s ease backwards}

@keyframes szfloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-13px) rotate(1deg)}}
@keyframes szpulseA{0%,100%{box-shadow:0 0 0 0 rgba(245,179,36,.5)}70%{box-shadow:0 0 0 16px rgba(245,179,36,0)}}
@keyframes szmarq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes szpop{from{opacity:0;transform:translateY(22px) scale(.94)}60%{transform:translateY(-4px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes szrise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes szshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ---- HERO — a lebegő „elfogadom" kártya: a pipa magától bepipálódik,
   a gomb utána felvillan (a kattintás = nyilatkozat üzenete). ---- */
.sz-hero-card{animation:szfloat 6s ease-in-out infinite}
.sz-hero-check{position:relative;width:22px;height:22px;border-radius:6px;border:2px solid rgba(247,245,240,.5);flex:none;animation:szcheckbox 5s ease-in-out infinite}
.sz-hero-check::after{content:'';position:absolute;left:5px;top:1px;width:7px;height:12px;border:solid #003153;border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);animation:szcheckmark 5s ease-in-out infinite}
@keyframes szcheckbox{0%,28%{background:transparent;border-color:rgba(247,245,240,.5)}36%,100%{background:#C9EA3D;border-color:#C9EA3D}}
@keyframes szcheckmark{0%,30%{transform:rotate(45deg) scale(0)}40%,100%{transform:rotate(45deg) scale(1)}}
.sz-hero-btn{animation:szbtnflash 5s ease-in-out infinite}
@keyframes szbtnflash{0%,44%{background:rgba(201,234,61,.18);color:#C9EA3D;box-shadow:none}56%,100%{background:#C9EA3D;color:#003153;box-shadow:0 0 26px -4px rgba(201,234,61,.75)}}
.sz-hero-cursor{position:absolute;right:26px;bottom:14px;width:22px;height:22px;color:#F7F5F0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));animation:szcursor 5s ease-in-out infinite;pointer-events:none}
@keyframes szcursor{0%{transform:translate(70px,60px);opacity:0}12%{opacity:1}28%{transform:translate(-118px,-56px)}34%{transform:translate(-118px,-56px) scale(.85)}38%{transform:translate(-118px,-56px) scale(1)}50%{transform:translate(-8px,-4px)}54%{transform:translate(-8px,-4px) scale(.85)}58%{transform:translate(-8px,-4px) scale(1)}80%{transform:translate(-8px,-4px);opacity:1}100%{transform:translate(70px,60px);opacity:0}}

/* ---- Hero: a két nagy téma kártyái ---- */
.sz-theme{transition:transform .15s,border-color .18s}
@media (hover:hover) and (pointer:fine){a.sz-theme:hover{transform:translateY(-3px);border-color:rgba(245,179,36,.55)}}

/* ---- 01 · BONCOLÁS — a történet kiemelt, koppintható részei ---- */
.sz-hot{
  display:inline;cursor:pointer;border-radius:6px;padding:1px 6px;margin:0 -1px;
  background:rgba(245,179,36,.14);border-bottom:2px solid rgba(245,179,36,.75);
  color:#F7F5F0;font-weight:700;transition:background .18s,border-color .18s,color .18s;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  animation:szhotpulse 2.2s ease-in-out infinite;
}
.sz-hot:nth-of-type(2){animation-delay:.4s}
.sz-hot:nth-of-type(3){animation-delay:.8s}
.sz-hot:nth-of-type(4){animation-delay:1.2s}
@keyframes szhotpulse{0%,100%{box-shadow:0 0 0 0 rgba(245,179,36,0)}50%{box-shadow:0 0 0 5px rgba(245,179,36,.16)}}
.sz-hot.sz-seen{animation:none;background:rgba(17,183,163,.12);border-bottom-color:rgba(17,183,163,.7)}
.sz-hot.sz-active{animation:none;background:var(--amber);border-bottom-color:var(--amber);color:#003153}
@media (hover:hover) and (pointer:fine){.sz-hot:hover{background:rgba(245,179,36,.3)}.sz-hot.sz-active:hover{background:var(--amber)}}
.sz-hot:focus-visible{outline:2px solid #C9EA3D;outline-offset:2px}
/* a négy „pont" jelvényei a történet alatt */
.sz-dot{cursor:pointer;transition:transform .15s,background .18s,border-color .18s}
@media (hover:hover) and (pointer:fine){.sz-dot:hover{transform:translateY(-2px)}}

/* ---- 02 · FELISMERED? — válaszgombok ---- */
.sz-opt{cursor:pointer;transition:transform .12s,background .18s,border-color .18s,opacity .18s}
@media (hover:hover) and (pointer:fine){.sz-opt:not(:disabled):hover{transform:translateY(-2px)}}
.sz-opt:disabled{cursor:default}
.sz-opt.sz-opt-wrong{animation:szshake .4s ease}
/* a bizonytalan szavak a chatben */
.sz-vague{background:rgba(255,90,90,.18);border-bottom:2px solid rgba(255,90,90,.8);border-radius:4px;padding:0 4px;color:#fff;font-weight:700}
/* chat-buborékok: a bal oldali (más) és a jobb oldali (a kérdező) */
.sz-bub{max-width:82%;padding:9px 13px;border-radius:14px;font-size:14.5px;line-height:1.45}
.sz-bub-l{align-self:flex-start;background:rgba(247,245,240,.09);border-bottom-left-radius:4px}
.sz-bub-r{align-self:flex-end;background:rgba(17,183,163,.22);border-bottom-right-radius:4px}
.sz-bub-name{font:700 10.5px 'Space Mono';letter-spacing:.08em;text-transform:uppercase;color:rgba(247,245,240,.55);margin-bottom:3px}
/* visszajelző panel */
.sz-fb{animation:szrise .3s ease}

/* ---- 03 · FORDÍTSD MEG A LAPOKAT — 3D flip, magasság NÉLKÜL
   (a két lap ugyanabba a rács-cellába kerül; mobilon a JS fitDeck()
   méretezi a paklit — ld. ALOLDALAK-telepites.md 8.7) ---- */
.sz-flip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sz-flip{perspective:1200px;display:grid;cursor:pointer;animation:szpop .55s cubic-bezier(.2,.9,.3,1.2) backwards}
.sz-flip:nth-child(1){animation-delay:.02s}
.sz-flip:nth-child(2){animation-delay:.09s}
.sz-flip:nth-child(3){animation-delay:.16s}
.sz-flip:nth-child(4){animation-delay:.23s}
.sz-flip:focus-visible{outline:2px solid #C9EA3D;outline-offset:3px;border-radius:18px}
.sz-inner{position:relative;display:grid;grid-template-rows:minmax(0,1fr);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.15,.2,1),height .4s cubic-bezier(.4,.15,.2,1)}
.sz-flip.sz-flipped .sz-inner{transform:rotateY(180deg)}
.sz-face{grid-area:1/1;min-width:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;padding:22px;display:flex;flex-direction:column;overflow:hidden}
.sz-face-b{transform:rotateY(180deg)}
@media (hover:hover) and (pointer:fine){.sz-flip:hover .sz-face:not(.sz-face-b){border-color:rgba(247,245,240,.5)}}

/* ---- 03 · RAKD SORRENDBE — húzható üzenetek ---- */
.sz-ord-list{display:flex;flex-direction:column;gap:10px;position:relative}
.sz-ord-item{
  position:relative;display:flex;align-items:center;gap:12px;
  background:#0a3a5c;border:1.5px solid rgba(247,245,240,.12);border-radius:14px;padding:12px 14px;
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
  transition:transform .18s ease,box-shadow .18s,border-color .18s,background .18s;
}
.sz-ord-item.sz-drag{cursor:grabbing;z-index:5;transition:none;box-shadow:0 18px 34px -12px rgba(0,0,0,.7);border-color:rgba(245,179,36,.7);background:#0d4468}
.sz-ord-item.sz-ok{border-color:rgba(201,234,61,.7);background:rgba(201,234,61,.08)}
.sz-ord-item.sz-bad{border-color:rgba(255,42,77,.7);background:rgba(255,42,77,.08)}
.sz-ord-handle{flex:none;color:rgba(247,245,240,.4)}
.sz-ord-btn{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid rgba(247,245,240,.16);background:rgba(247,245,240,.05);color:#F7F5F0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.sz-ord-btn:disabled{opacity:.25;cursor:default}
@media (hover:hover) and (pointer:fine){.sz-ord-btn:not(:disabled):hover{background:rgba(247,245,240,.14)}}
.sz-ord-tag{position:absolute;left:-10px;top:-10px;font:700 10px 'Space Mono';letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:#C9EA3D;color:#003153;opacity:0;transform:scale(.7);transition:opacity .25s,transform .25s}
.sz-ord-item.sz-ok .sz-ord-tag{opacity:1;transform:scale(1)}

/* ---- 04 · HÁNY ÉVESEN? — a háromállású csúszka ---- */
.sz-range{
  -webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;margin:0;
  background:linear-gradient(90deg,rgba(17,183,163,.55),rgba(245,179,36,.55) 50%,rgba(201,234,61,.55));
  outline:none;cursor:pointer;
}
.sz-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:34px;height:34px;border-radius:50%;background:#F7F5F0;border:5px solid var(--sz-thumb,#F5B324);box-shadow:0 6px 18px -4px rgba(0,0,0,.6);cursor:grab;transition:transform .15s}
.sz-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#F7F5F0;border:5px solid var(--sz-thumb,#F5B324);box-shadow:0 6px 18px -4px rgba(0,0,0,.6);cursor:grab}
.sz-range:active::-webkit-slider-thumb{transform:scale(1.1);cursor:grabbing}
.sz-range:focus-visible::-webkit-slider-thumb{outline:3px solid #C9EA3D;outline-offset:2px}
.sz-range::-moz-range-track{height:10px;border-radius:999px;background:transparent}
.sz-age-lbl{cursor:pointer;transition:color .18s,opacity .18s;font:700 12px 'Space Mono';letter-spacing:.06em;text-transform:uppercase;color:rgba(247,245,240,.5);text-align:center;background:none;border:none;padding:6px 0}
.sz-age-lbl.sz-on{color:#F7F5F0}
.sz-age-card{animation:szrise .35s ease}
.sz-age-ex{display:flex;align-items:center;gap:14px;background:rgba(247,245,240,.045);border:1px solid rgba(247,245,240,.1);border-radius:14px;padding:13px 15px;animation:szrise .4s ease backwards}
.sz-age-ex:nth-child(2){animation-delay:.06s}
.sz-age-ex:nth-child(3){animation-delay:.12s}
.sz-age-ex:nth-child(4){animation-delay:.18s}
.sz-why{cursor:pointer;transition:background .18s,border-color .18s}
@media (hover:hover) and (pointer:fine){.sz-why:hover{background:rgba(247,245,240,.12)}}
.sz-chev{transition:transform .25s ease}
.sz-chev.open{transform:rotate(180deg)}

/* ---- Mozgásérzékenység ---- */
@media (prefers-reduced-motion: reduce){
  .sz-hero-card,.sz-hero-check,.sz-hero-check::after,.sz-hero-btn,.sz-hero-cursor,
  .sz-hot,.sz-pop,.sz-rise,.sz-flip,.sz-fb,.sz-age-card,.sz-age-ex,.sz-opt.sz-opt-wrong{animation:none!important}
  .sz-hero-check{background:#C9EA3D;border-color:#C9EA3D}
  .sz-hero-check::after{transform:rotate(45deg) scale(1)}
  .sz-hero-btn{background:#C9EA3D;color:#003153}
  .sz-hero-cursor{display:none}
  .sz-inner{transition:none!important}
}

/* ---- Reszponzív ---- */
@media(max-width:1000px){
  .sz-flip-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .sz-hero-grid{grid-template-columns:1fr!important}
  .sz-hero-visual{justify-self:start!important}
  .sz-two{grid-template-columns:1fr!important}
  .sz-dissect-grid{grid-template-columns:1fr!important}
  .sz-age-grid{grid-template-columns:1fr!important}
}
@media(max-width:600px){
  .sz-nav-links{display:none!important}
  .sz-flip-grid{grid-template-columns:1fr}
  .sz-themes{grid-template-columns:1fr!important}
  .sz-hero-visual{width:100%!important}
  .sz-hero-visual > div{width:100%!important;max-width:340px}

  /* a paklinál mindkét lap a dobozra feszül — a JS (fitDeck) állítja a
     közös magasságot a legmagasabb előlaphoz (ld. 8.7 + hb-stack) */
  .sz-face{align-self:stretch}

  /* kisebb oldalsó margó, hogy több hely legyen (az inline paddingra
     illeszkedő szelektorok, a markuphoz nem kell nyúlni) */
  .sz > nav,.sz > header,
  .sz > section[style*="padding:70px 40px"],
  .sz > section[style*="padding:60px 40px"]{padding-left:18px!important;padding-right:18px!important}
  .sz > section > div[style*="padding:0 40px"]{padding-left:18px!important;padding-right:18px!important}

  /* a helyzet-játék válaszgombjai egymás alá */
  .sz-opts{grid-template-columns:1fr!important}
  .sz-opt{padding:12px 14px!important;font-size:14px!important}
  /* a visszajelző fejléce egy sorban maradjon */
  .sz-fb-head{flex-wrap:nowrap!important;gap:8px!important}
  .sz-fb-title{font-size:12.5px!important;letter-spacing:0!important}
  .sz-fb-pill{flex:none;font-size:10.5px!important;padding:4px 9px!important;white-space:normal;text-align:center;max-width:46%}
  /* a boncolás történet betűje */
  .sz-story{font-size:18px!important;line-height:1.7!important}
  .sz-age-lbls{font-size:10.5px}
}