/* ============================================================
   RISCOS PSICOSSOCIAIS — Hora da Segurança
   ============================================================ */
:root{
  --navy:#0d2a56; --navy2:#12325e; --navy-deep:#081a38;
  --blue:#1c4f8f; --blue-light:#2f9fe0;
  --gold:#f5a614; --gold-light:#ffd54a;
  --green:#19c37d; --red:#ef4757; --amber:#ffb43a;
  --ink:#0d1526; --panel:rgba(255,255,255,0.05); --panel-2:rgba(255,255,255,0.03);
  --border:rgba(255,255,255,0.10); --border-strong:rgba(255,213,74,0.45);
  --txt:#eef3fb; --muted:#9fb0c8;
  --font:'Outfit',sans-serif; --font-body:'Inter',sans-serif;
  --r-sm:8px; --r:14px; --r-lg:22px;
  --sh:0 12px 40px rgba(0,0,0,.45);
  --t:.25s cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--font-body); color:var(--txt); min-height:100vh;
  background:
    radial-gradient(1000px 600px at 15% -10%, rgba(47,159,224,.18), transparent 60%),
    radial-gradient(900px 600px at 100% 110%, rgba(245,166,20,.12), transparent 55%),
    linear-gradient(160deg,#0a1e3f 0%, #081a38 55%, #0a1526 100%);
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font)}
.muted{color:var(--muted)} .tiny{font-size:.72rem} .center{text-align:center}
mark{background:linear-gradient(120deg,var(--gold-light),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* SCREENS */
.screen{display:none; min-height:100vh; animation:fade .4s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* BUTTONS */
.btn{
  font-family:var(--font); font-weight:800; font-size:.95rem;
  border:none; border-radius:999px; padding:.85rem 1.6rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; transition:var(--t);
}
.btn span{display:inline-block}
.btn-primary{background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#3a2600; box-shadow:0 6px 18px rgba(245,166,20,.35)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(245,166,20,.5)}
.btn-lg{font-size:1.05rem; padding:1rem 2.2rem}
.btn-ghost{background:var(--panel); color:var(--txt); border:1px solid var(--border)}
.btn-ghost:hover{background:rgba(255,255,255,.09)}
.btn.disabled{opacity:.4; pointer-events:none}

/* ============ LANDING ============ */
#landing{display:none; place-items:center; text-align:center}
#landing.active{display:grid}
.bg-orbs{position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none}
.bg-orbs span{position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; animation:float 14s ease-in-out infinite}
.bg-orbs span:nth-child(1){width:340px;height:340px;background:var(--blue-light);top:-80px;left:-60px}
.bg-orbs span:nth-child(2){width:300px;height:300px;background:var(--gold);bottom:-100px;right:-40px;animation-delay:-5s}
.bg-orbs span:nth-child(3){width:240px;height:240px;background:var(--green);top:40%;left:60%;animation-delay:-9s;opacity:.2}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-30px)}}
.landing-inner{position:relative; z-index:1; max-width:680px; padding:2.5rem 1.5rem}
.brand-logo .hds-shield{width:110px;height:110px;filter:drop-shadow(0 8px 22px rgba(13,42,86,.6))}
.brand-name{font-family:var(--font); font-weight:900; font-size:1.35rem; letter-spacing:.5px; margin-top:.5rem}
.brand-url{display:inline-block; margin-top:.35rem; color:var(--gold-light); font-weight:700; text-decoration:none; font-size:.9rem}
.brand-divider{display:flex; align-items:center; justify-content:center; gap:.75rem; margin:1.4rem 0 .6rem; font-size:1.2rem}
.brand-divider span{height:1px; width:70px; background:linear-gradient(90deg,transparent,var(--border-strong),transparent)}
.hero-title{font-size:clamp(2.2rem,7vw,3.4rem); font-weight:900; line-height:1.05}
.hero-sub{color:#cfe0f5; font-size:1.02rem; line-height:1.6; margin:1rem auto 1.4rem; max-width:600px}
.hero-modules{display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom:1.3rem}
.hm-chip{display:flex; align-items:center; gap:.5rem; background:var(--panel); border:1px solid var(--border); border-radius:999px; padding:.45rem .9rem; font-size:.82rem; font-weight:700}
.hm-chip span{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#3a2600;display:grid;place-items:center;font-weight:900;font-size:.72rem}
.hero-note{background:rgba(47,159,224,.1); border:1px solid rgba(47,159,224,.3); border-radius:var(--r); padding:.8rem 1.1rem; font-size:.88rem; margin-bottom:1.6rem}
.landing-foot{margin-top:2rem; color:var(--muted); font-size:.78rem}

/* ============ CARD-CENTER (register/duo/done) ============ */
.card-center{min-height:100vh; display:grid; place-items:center; padding:1.5rem}
.form-card,.done-card{
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:var(--r-lg); padding:2.2rem 2rem;
  max-width:460px; width:100%; text-align:center; box-shadow:var(--sh); backdrop-filter:blur(12px);
}
.form-icon,.done-burst{font-size:3rem; margin-bottom:.5rem}
.form-card h2,.done-card h2{font-size:1.5rem; font-weight:800; margin-bottom:.4rem}
.form-card p{margin-bottom:1.3rem; font-size:.9rem; line-height:1.5}
.field{margin-bottom:1rem; position:relative}
.field input{
  width:100%; background:rgba(0,0,0,.25); border:2px solid var(--border); border-radius:var(--r);
  padding:.9rem 1rem; color:var(--txt); font-size:1rem; font-family:var(--font-body); transition:var(--t);
}
.field input:focus{outline:none; border-color:var(--gold)}
.field input.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.player-field{display:flex; align-items:center; gap:.6rem; text-align:left}
.player-field .pf-badge{flex-shrink:0; width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-family:var(--font);font-weight:900;font-size:.85rem;color:#fff}
.player-field.p1 .pf-badge{background:linear-gradient(135deg,#2f9fe0,#1c4f8f)}
.player-field.p2 .pf-badge{background:linear-gradient(135deg,#19c37d,#0e8f5b)}
.player-field input{margin:0}

/* ============ SLIDE ============ */
.slide-wrap{max-width:840px; margin:0 auto; padding:2rem 1.25rem 3rem}
.progress-rail{display:flex; gap:8px; margin-bottom:1.5rem}
.progress-rail .pr{flex:1; height:6px; border-radius:3px; background:var(--panel)}
.progress-rail .pr.done{background:var(--green)}
.progress-rail .pr.active{background:linear-gradient(90deg,var(--gold-light),var(--gold))}
.slide-card{
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:var(--r-lg); padding:2.4rem 2rem; box-shadow:var(--sh);
}
.slide-badge{display:inline-block; background:rgba(245,166,20,.15); border:1px solid var(--border-strong); color:var(--gold-light); font-family:var(--font); font-weight:800; font-size:.72rem; letter-spacing:1.5px; padding:.35rem .9rem; border-radius:999px}
.slide-emoji{font-size:3.4rem; margin:1rem 0 .5rem}
.slide-title{font-size:1.9rem; font-weight:900; margin-bottom:1rem}
.slide-body{font-size:1rem; line-height:1.7; color:#d7e3f4}
.slide-body p{margin-bottom:.9rem}
.slide-body strong{color:#fff}
.slide-body .topic{display:flex; gap:.8rem; align-items:flex-start; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r); padding:.9rem 1rem; margin-bottom:.7rem}
.slide-body .topic .ti{font-size:1.4rem; flex-shrink:0}
.slide-body .topic h4{font-size:1rem; margin-bottom:.2rem; color:#fff}
.slide-body .topic p{font-size:.88rem; color:var(--muted); margin:0}
.slide-key{margin:1.4rem 0; background:linear-gradient(135deg,rgba(25,195,125,.12),rgba(25,195,125,.04)); border:1px solid rgba(25,195,125,.35); border-left:4px solid var(--green); border-radius:var(--r); padding:1rem 1.2rem; font-size:.92rem}
.slide-key b{color:var(--green)}
#slideNext{margin-top:.5rem}

/* ============ GAME TOP ============ */
.game-top{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:rgba(8,20,40,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--border);
  padding:.85rem 1.25rem;
}
.gt-badge{display:inline-block; background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#3a2600; font-family:var(--font); font-weight:900; font-size:.72rem; padding:.25rem .7rem; border-radius:999px; letter-spacing:.5px}
.gt-title{font-family:var(--font); font-weight:800; font-size:1.05rem; margin-top:.2rem}
.turn-pill{background:var(--panel); border:1px solid var(--border); border-radius:999px; padding:.5rem 1.1rem; font-size:.85rem; font-weight:600}
.turn-pill strong{color:var(--gold-light)}
.turn-pill.p1 strong{color:#5fbef0}
.turn-pill.p2 strong{color:#3fe0a0}
.scoreboard{display:flex; gap:.5rem}
.sb{display:flex; flex-direction:column; align-items:center; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:.35rem .8rem; min-width:64px}
.sb-name{font-size:.66rem; color:var(--muted); font-weight:700; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sb-val{font-family:var(--font); font-weight:900; font-size:1.15rem}
.sb1 .sb-val{color:#5fbef0} .sb2 .sb-val{color:#3fe0a0}

.game-instruction{max-width:900px; margin:1.1rem auto 0; padding:0 1.25rem; text-align:center; color:#cfe0f5; font-size:.95rem; line-height:1.5}
.game-instruction .role-tag{display:inline-block; background:rgba(47,159,224,.14); border:1px solid rgba(47,159,224,.35); border-radius:999px; padding:.2rem .7rem; font-weight:700; font-size:.82rem; margin:0 .2rem}
.game-stage{max-width:960px; margin:1.2rem auto 0; padding:0 1.25rem 2rem}
.game-foot{max-width:960px; margin:0 auto; padding:0 1.25rem 3rem; display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap}

/* ---- speech bubble (role-play) ---- */
.speech{position:relative; background:#fff; color:#16233b; border-radius:18px; padding:1.3rem 1.5rem; max-width:640px; margin:0 auto 1.4rem; font-size:1.08rem; font-weight:600; line-height:1.5; box-shadow:0 10px 30px rgba(0,0,0,.4)}
.speech::after{content:''; position:absolute; bottom:-12px; left:48px; border:12px solid transparent; border-top-color:#fff; border-bottom:none}
.speech .who{position:absolute; top:-14px; left:20px; background:linear-gradient(135deg,#2f9fe0,#1c4f8f); color:#fff; font-size:.72rem; font-weight:800; padding:.2rem .7rem; border-radius:999px}
.speech.harsh{background:#fff2f0; border:2px solid #ffd0c8}
.speech.harsh::after{border-top-color:#fff2f0}

/* ---- option buttons (choices) ---- */
.choices{display:grid; gap:.75rem; max-width:640px; margin:0 auto}
.choice{
  text-align:left; background:var(--panel); border:2px solid var(--border); border-radius:var(--r);
  padding:1rem 1.2rem; color:var(--txt); font-size:.95rem; font-family:var(--font-body); cursor:pointer;
  transition:var(--t); display:flex; gap:.7rem; align-items:flex-start; line-height:1.45;
}
.choice:hover{border-color:var(--border-strong); transform:translateX(4px)}
.choice .ci{flex-shrink:0; font-size:1.1rem}
.choice.correct{border-color:var(--green); background:rgba(25,195,125,.12)}
.choice.wrong{border-color:var(--red); background:rgba(239,71,87,.12)}
.choice:disabled{cursor:default}

/* ---- CNV builder (jogo 1) ---- */
.cnv-preview{background:linear-gradient(135deg,rgba(25,195,125,.10),transparent); border:1px dashed rgba(25,195,125,.4); border-radius:var(--r); padding:1rem 1.2rem; margin:0 auto 1.2rem; max-width:660px; font-size:1rem; line-height:1.6; min-height:60px}
.cnv-preview .ph{color:var(--muted); font-style:italic}
.cnv-preview .filled{color:#bff3d9; font-weight:600}
.cnv-rows{display:grid; gap:1rem; max-width:660px; margin:0 auto}
.cnv-row{background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r); padding:.9rem 1rem}
.cnv-row-label{font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--gold-light); margin-bottom:.6rem; display:flex; align-items:center; gap:.4rem}
.cnv-chips{display:flex; flex-wrap:wrap; gap:.5rem}
.cnv-chip{background:rgba(255,255,255,.05); border:1.5px solid var(--border); border-radius:999px; padding:.5rem .9rem; font-size:.85rem; cursor:pointer; transition:var(--t); font-family:var(--font-body); color:var(--txt)}
.cnv-chip:hover{border-color:var(--border-strong)}
.cnv-chip.sel{background:rgba(47,159,224,.2); border-color:var(--blue-light)}
.cnv-chip.ok{background:rgba(25,195,125,.18); border-color:var(--green)}
.cnv-chip.no{background:rgba(239,71,87,.18); border-color:var(--red)}
.cnv-chip:disabled{cursor:default}

/* ---- classify (jogo 2) ---- */
.situation{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.6rem; max-width:640px; margin:0 auto 1.3rem; text-align:center; box-shadow:var(--sh)}
.situation .sit-scene{font-size:2.2rem; margin-bottom:.6rem}
.situation .sit-text{font-size:1.05rem; line-height:1.55; font-weight:500}
.discuss-hint{text-align:center; color:var(--amber); font-size:.85rem; font-weight:700; margin:0 auto 1rem; max-width:520px}
.classify-btns{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; max-width:640px; margin:0 auto}
.cbtn{padding:1.1rem .6rem; border-radius:var(--r); border:2px solid var(--border); background:var(--panel); color:var(--txt); font-family:var(--font); font-weight:800; font-size:.9rem; cursor:pointer; transition:var(--t); display:flex; flex-direction:column; align-items:center; gap:.4rem}
.cbtn .cbi{font-size:1.6rem}
.cbtn:hover{transform:translateY(-3px); border-color:var(--border-strong)}
.cbtn.correct{border-color:var(--green); background:rgba(25,195,125,.15)}
.cbtn.wrong{border-color:var(--red); background:rgba(239,71,87,.15)}
.cbtn:disabled{cursor:default}
@media(max-width:560px){.classify-btns{grid-template-columns:1fr}}

/* ---- balance board (jogo 4) ---- */
.balance-meters{display:flex; gap:1rem; max-width:640px; margin:0 auto 1.2rem; flex-wrap:wrap; justify-content:center}
.meter{flex:1; min-width:180px; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r); padding:.8rem 1rem}
.meter-l{display:flex; justify-content:space-between; font-size:.78rem; font-weight:700; margin-bottom:.4rem}
.meter-bar{height:14px; border-radius:7px; background:rgba(0,0,0,.3); overflow:hidden}
.meter-fill{height:100%; width:0%; transition:width .5s ease; border-radius:7px}
.meter-fill.stress{background:linear-gradient(90deg,#ffb43a,#ef4757)}
.meter-fill.prog{background:linear-gradient(90deg,#2f9fe0,#19c37d)}
.timeline{display:flex; gap:6px; max-width:660px; margin:0 auto 1.2rem; flex-wrap:wrap; justify-content:center}
.slot{width:52px; height:52px; border-radius:12px; border:2px dashed var(--border); display:grid; place-items:center; font-size:1.4rem; background:var(--panel-2); transition:var(--t)}
.slot.filled{border-style:solid}
.slot.task{background:rgba(47,159,224,.18); border-color:var(--blue-light)}
.slot.deep{background:rgba(245,166,20,.2); border-color:var(--gold)}
.slot.break{background:rgba(25,195,125,.18); border-color:var(--green)}
.block-picker{display:flex; gap:.8rem; max-width:660px; margin:0 auto; justify-content:center; flex-wrap:wrap}
.block-btn{background:var(--panel); border:2px solid var(--border); border-radius:var(--r); padding:.9rem 1.1rem; cursor:pointer; transition:var(--t); text-align:center; color:var(--txt); font-family:var(--font-body); min-width:120px}
.block-btn:hover{transform:translateY(-3px); border-color:var(--border-strong)}
.block-btn .bb-emoji{font-size:1.6rem; display:block; margin-bottom:.2rem}
.block-btn .bb-name{font-weight:800; font-size:.85rem}
.block-btn .bb-eff{font-size:.72rem; color:var(--muted); margin-top:.2rem}
.block-btn:disabled{opacity:.4; cursor:default}

/* ---- feedback panel (shared) ---- */
.fb{max-width:660px; margin:1.2rem auto 0; border-radius:var(--r); padding:1rem 1.2rem; font-size:.92rem; line-height:1.55; display:none}
.fb.show{display:block; animation:fade .3s}
.fb.good{background:rgba(25,195,125,.12); border:1px solid rgba(25,195,125,.4); border-left:4px solid var(--green)}
.fb.bad{background:rgba(239,71,87,.10); border:1px solid rgba(239,71,87,.4); border-left:4px solid var(--red)}
.fb b{color:#fff}

/* ============ DONE ============ */
.done-scores{display:flex; gap:1rem; justify-content:center; margin:1.2rem 0}
.done-scores .ds{background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r); padding:.8rem 1.2rem; min-width:110px}
.done-scores .ds-n{font-size:.75rem; color:var(--muted)}
.done-scores .ds-v{font-family:var(--font); font-weight:900; font-size:1.5rem}

/* ============ CERTIFICATE ============ */
.cert-scroll{min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:2rem 1rem 3rem}
.cert{width:100%; max-width:760px; background:linear-gradient(160deg,#fbfdff,#eef3fa); color:#16233b; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.5); overflow:hidden}
.cert-frame{border:3px double var(--gold); margin:14px; border-radius:10px; padding:2rem 2.2rem; position:relative}
.cert-top{display:flex; align-items:center; gap:1rem; margin-bottom:1rem}
.cert-logo .hds-shield{width:64px;height:64px}
.cert-brand{font-family:var(--font); font-weight:900; font-size:1.15rem; color:var(--navy)}
.cert-brand-url{font-size:.78rem; color:#5a708f; font-weight:600}
.cert-rule{height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:.5rem 0 1.2rem}
.cert-h1{font-family:var(--font); font-size:2.4rem; font-weight:900; text-align:center; color:var(--navy); letter-spacing:4px}
.cert-of{text-align:center; color:#5a708f; margin-bottom:1.2rem; font-weight:600}
.cert-txt{text-align:center; color:#3d4f68; font-size:.92rem; line-height:1.5; margin:.3rem 0}
.cert-desc{max-width:560px; margin:.4rem auto}
.cert-name{font-family:var(--font); text-align:center; font-size:1.9rem; font-weight:900; color:var(--gold); margin:.6rem 0 .1rem; text-transform:capitalize}
.cert-nameline{width:60%; max-width:360px; height:2px; background:#c9d6e6; margin:0 auto 1rem}
.cert-course{font-family:var(--font); text-align:center; font-size:1.3rem; font-weight:800; color:var(--navy); margin:.4rem 0}
.cert-meta{display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; margin:1.5rem 0}
.cm{text-align:center}
.cm-l{display:block; font-size:.72rem; color:#8494ab; font-weight:700; text-transform:uppercase; letter-spacing:.5px}
.cm-v{display:block; font-family:var(--font); font-weight:800; color:var(--navy); font-size:1rem}
.cert-foot{display:flex; justify-content:space-between; align-items:flex-end; margin-top:1.5rem}
.cert-seal .seal{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--gold-light),var(--gold));display:grid;place-items:center;font-size:1.8rem;box-shadow:0 6px 16px rgba(245,166,20,.4)}
.cert-sign{text-align:center}
.cert-sign-line{width:180px;height:2px;background:#16233b;margin-bottom:.3rem}
.cert-sign-name{font-family:var(--font); font-weight:800; font-size:.9rem}
.cert-sign-role{font-size:.72rem; color:#5a708f}
.cert-actions{display:flex; gap:.8rem; margin-top:1.5rem; flex-wrap:wrap; justify-content:center}
.cert-cta{margin-top:1.2rem; color:var(--muted); font-size:.85rem}
.cert-cta a{color:var(--gold-light); font-weight:700; text-decoration:none}

/* ============ TOAST ============ */
#toastHost{position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:.5rem; align-items:center; pointer-events:none}
.toast{background:rgba(13,26,50,.96); border:1px solid var(--border); border-left:4px solid var(--gold); border-radius:12px; padding:.75rem 1.2rem; font-size:.88rem; font-weight:700; box-shadow:var(--sh); animation:toastIn .3s ease; max-width:90vw}
.toast.good{border-left-color:var(--green)} .toast.bad{border-left-color:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ============ RESPONSIVE ============ */
@media(max-width:640px){
  .game-top{flex-wrap:wrap; gap:.6rem}
  .gt-center{order:3; width:100%; display:flex; justify-content:center}
  .slide-card{padding:1.6rem 1.2rem}
  .slide-title{font-size:1.5rem}
  .cert-frame{padding:1.3rem 1.1rem; margin:8px}
  .cert-h1{font-size:1.7rem}
  .cert-foot{flex-direction:column; gap:1rem; align-items:center}
}

/* ============ PRINT (certificado) ============ */
@media print{
  body{background:#fff}
  .screen{display:none!important}
  #certificate{display:block!important}
  .cert-actions,.cert-cta,#toastHost{display:none!important}
  .cert{box-shadow:none; max-width:100%}
}