/* ═══════════════════════════════════════
   PORTALFISICA THEME
   Paleta: azul royal #1a3a6b · dourado #f0a500
   secundário #0d2447 · fundo #0a1628
   ═══════════════════════════════════════ */
:root{
  --navy:   #0a1628;
  --navy2:  #0d2447;
  --navy3:  #162f5c;
  --blue:   #1a3a6b;
  --blue2:  #2358a8;
  --accent: #f0a500;
  --accent2:#ffd166;
  --text:   #e8edf5;
  --muted:  #7a93b8;
  --right:  #2ecc71;
  --wrong:  #e74c3c;
  --white:  #ffffff;
  --radius: 10px;
  --font:   'Montserrat', sans-serif;
  --code:   'Source Code Pro', monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--navy);
  color:var(--text);
  font-family:'Open Sans',sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}
/* ── header bar ── */
#topbar{
  background:var(--navy2);
  border-bottom:3px solid var(--accent);
  padding:0 2rem;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;position:sticky;top:0;z-index:100;
}
.logo{
  font-family:var(--font);font-weight:900;font-size:20px;
  color:var(--white);letter-spacing:.5px;
  display:flex;align-items:center;gap:10px;
}
.logo span{color:var(--accent);}
.logo-atom{font-size:24px;}
a.logo{text-decoration:none;}
.topbar-tag{
  font-family:var(--font);font-size:11px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  background:var(--accent);color:var(--navy);
  padding:4px 14px;border-radius:4px;
}

/* ── wrap ── */
.wrap{max-width:820px;margin:0 auto;padding:2.5rem 1.5rem 5rem;}

/* ══════ HERO SPLASH ══════ */
#splash{}
.hero{
  background:linear-gradient(135deg,var(--navy2) 0%,var(--blue) 60%,var(--navy2) 100%);
  border:1px solid rgba(240,165,0,.2);
  border-radius:12px;
  padding:3rem 2.5rem 2.5rem;
  text-align:center;
  margin-bottom:2.5rem;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 70% -20%,rgba(240,165,0,.12) 0%,transparent 60%);
}
.hero-eyebrow{
  font-family:var(--font);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.hero-eyebrow::before,.hero-eyebrow::after{
  content:'';width:40px;height:1px;background:rgba(240,165,0,.4);
}
.hero h1{
  font-family:var(--font);font-weight:900;
  font-size:clamp(2rem,6vw,3.6rem);
  color:var(--white);letter-spacing:-.02em;line-height:1.1;
  margin-bottom:.8rem;position:relative;
}
.hero h1 span{color:var(--accent);}
.hero p{
  font-size:15px;color:var(--muted);max-width:520px;
  margin:0 auto 2rem;line-height:1.7;font-weight:300;
  position:relative;
}
.hero-badge-row{
  display:flex;align-items:center;justify-content:center;
  gap:20px;flex-wrap:wrap;margin-bottom:.5rem;position:relative;
}
.hbadge{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;padding:6px 16px;
  font-family:var(--font);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.hbadge b{color:var(--accent);}

/* ── section label ── */
.section-label{
  font-family:var(--font);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:10px;
  margin-bottom:1.2rem;
}
.section-label::after{flex:1;content:'';height:1px;background:rgba(240,165,0,.2);}

/* ── lessons grid ── */
.lessons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.lesson-card{
  background:var(--navy2);
  border:1px solid rgba(255,255,255,.08);
  border-top:3px solid var(--lc,var(--blue2));
  border-radius:var(--radius);
  padding:1.4rem 1.2rem 1.1rem;
  cursor:pointer;
  transition:transform .15s,box-shadow .2s,border-color .2s;
  position:relative;overflow:hidden;
}
.lesson-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 60%);
  border-radius:var(--radius);
}
.lesson-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.4),0 0 0 1px var(--lc,var(--blue2));border-color:var(--lc,var(--blue2));}
.lesson-card:active{transform:scale(.97);}
.lc-num{
  font-family:var(--font);font-size:9px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--lc,var(--blue2));
  display:flex;align-items:center;gap:6px;margin-bottom:.6rem;
}
.lc-num::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--lc,var(--blue2));flex-shrink:0;}
.lc-title{font-family:var(--font);font-size:13px;font-weight:700;line-height:1.35;color:var(--white);}
.lc-count{font-family:var(--code);font-size:10px;color:var(--muted);margin-top:.6rem;}
.lc-best{font-family:var(--code);font-size:10px;color:var(--accent);margin-top:.3rem;font-weight:700;}

/* ══════ GAME ══════ */
#game{display:none;}
.game-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.8rem;gap:1rem;
}
.back-btn{
  background:none;border:1px solid rgba(255,255,255,.12);
  border-radius:6px;padding:7px 14px;
  font-family:var(--font);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.back-btn:hover{color:var(--white);border-color:var(--accent);background:rgba(240,165,0,.08);}
.game-title{
  font-family:var(--font);font-size:15px;font-weight:800;
  color:var(--accent);text-align:center;flex:1;
}
.sound-btn{
  background:none;border:none;
  font-size:18px;cursor:pointer;color:var(--muted);
  transition:color .2s;padding:4px 6px;
}
.sound-btn:hover{color:var(--white);}

/* progress */
.prog-wrap{margin-bottom:1.5rem;}
.prog-row{display:flex;align-items:center;gap:10px;margin-bottom:.5rem;}
.prog-track{flex:1;height:6px;background:var(--navy3);border-radius:99px;overflow:hidden;}
.prog-fill{
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue2),var(--accent));
  transition:width .5s cubic-bezier(.34,1.56,.64,1);
}
.prog-label{font-family:var(--code);font-size:11px;color:var(--muted);white-space:nowrap;}

/* score row */
.score-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:1.8rem;}
.score-box{
  background:var(--navy2);border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:.7rem 1rem;text-align:center;
}
.score-box .sn{font-family:var(--font);font-size:1.9rem;font-weight:900;line-height:1;}
.score-box .sl{font-family:var(--code);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:2px;}
.s-right .sn{color:var(--right);}
.s-wrong .sn{color:var(--wrong);}
.s-idx  .sn{font-size:1.1rem;color:var(--muted);}

/* ── FLIP CARD ── */
.card-stage{perspective:1400px;margin-bottom:1.5rem;}
.card{
  position:relative;width:100%;min-height:260px;
  transform-style:preserve-3d;cursor:pointer;
  transition:transform .6s cubic-bezier(.34,1.1,.64,1);
  -webkit-transform-style:preserve-3d;
}
.card.flipped{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);}
.face-back{pointer-events:none;}
.card.flipped .face-back{pointer-events:auto;}
.face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  -webkit-transform:translateZ(0);
  border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2.2rem 2rem;overflow:hidden;
}
.face-front{
  background:linear-gradient(145deg,var(--navy2) 0%,var(--blue) 100%);
  border:1px solid rgba(240,165,0,.25);
  border-top:3px solid var(--accent);
}
.face-back{
  background:linear-gradient(145deg,var(--blue) 0%,var(--navy2) 100%);
  border:1px solid rgba(240,165,0,.25);
  border-top:3px solid var(--right);
  transform:rotateY(180deg);
  -webkit-transform:rotateY(180deg);
}
/* corner labels */
.cn{position:absolute;font-family:var(--code);font-size:9px;color:var(--muted);letter-spacing:.08em;}
.cn-tl{top:1rem;left:1.2rem;} .cn-tr{top:1rem;right:1.2rem;}
.cn-bl{bottom:1rem;left:1.2rem;} .cn-br{bottom:1rem;right:1.2rem;}
/* front content */
.card-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(240,165,0,.12);
  border:1px solid rgba(240,165,0,.4);
  border-radius:4px;
  padding:3px 12px;margin-bottom:1rem;
  font-family:var(--font);font-size:9px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
}
.card-val{
  font-family:var(--font);font-size:clamp(1.2rem,3.5vw,1.8rem);font-weight:800;
  color:var(--white);text-align:center;line-height:1.4;
  margin-bottom:.8rem;word-break:break-word;white-space:pre-line;
}
.card-hint{font-size:13px;color:var(--accent2);text-align:center;max-width:340px;font-style:italic;font-weight:300;display:none;}
.hint-btn{
  margin-top:1rem;background:none;
  border:1px solid rgba(240,165,0,.3);border-radius:6px;
  padding:5px 14px;
  font-family:var(--font);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.hint-btn:hover{color:var(--accent);border-color:var(--accent);background:rgba(240,165,0,.08);}
.hint-btn.used{display:none;}
/* back content */
.back-answer{
  font-family:var(--font);font-size:clamp(1.2rem,3vw,1.8rem);
  font-weight:900;color:var(--accent2);text-align:center;
  margin-bottom:.5rem;
}
.back-desc{
  font-size:13px;color:var(--muted);text-align:center;
  max-width:420px;line-height:1.7;font-weight:300;margin-bottom:1rem;
}
.code-block{
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);
  border-left:3px solid var(--accent);
  border-radius:6px;padding:8px 16px;
  font-family:var(--code);font-size:12px;
  text-align:left;max-width:100%;word-break:break-word;
  line-height:1.7;
}
.kw{color:#7dd3fc;} .cm{color:#86efac;} .op{color:#94a3b8;} .vv{color:var(--accent2);}

/* ── OPTIONS ── */
.opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1.2rem;}
.opt-btn{
  background:var(--navy2);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;padding:.85rem 1rem;
  font-family:'Open Sans',sans-serif;font-size:14px;color:var(--text);
  cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s,transform .1s;
  line-height:1.4;
}
.opt-btn:hover:not(:disabled){
  border-color:var(--accent);
  background:rgba(240,165,0,.07);
  transform:translateY(-1px);
}
.opt-btn:active:not(:disabled){transform:scale(.97);}
.opt-btn.correct{border-color:var(--right);background:rgba(46,204,113,.1);color:var(--right);}
.opt-btn.incorrect{border-color:var(--wrong);background:rgba(231,76,60,.1);color:var(--wrong);}
.opt-btn:disabled{cursor:not-allowed;}
.opt-prefix{font-family:var(--code);font-size:9px;color:var(--muted);margin-bottom:3px;letter-spacing:.08em;}

/* next btn */
.next-btn{
  display:none;width:100%;padding:.9rem;
  border-radius:8px;
  background:linear-gradient(90deg,var(--blue2),var(--blue));
  border:1px solid var(--accent);
  color:var(--white);
  font-family:var(--font);font-size:14px;font-weight:700;
  cursor:pointer;letter-spacing:.03em;
  transition:opacity .2s,transform .12s,box-shadow .2s;
  margin-bottom:1.2rem;
}
.next-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 24px rgba(240,165,0,.25);}
.next-btn.show{display:block;}

/* ── RESULT ── */
#result{display:none;text-align:center;animation:fadeUp .5s ease both;}
#result.show{display:block;}
.res-trophy{font-size:4.5rem;margin-bottom:1rem;animation:popIn .4s cubic-bezier(.34,1.56,.64,1) both;}
.res-title{
  font-family:var(--font);font-size:clamp(1.8rem,5vw,2.8rem);
  font-weight:900;color:var(--white);letter-spacing:-.02em;margin-bottom:.3rem;
}
.res-sub{color:var(--muted);font-size:14px;margin-bottom:1.8rem;font-weight:300;}
.res-hints{font-family:var(--code);font-size:11px;color:var(--muted);text-align:center;margin:-1rem auto 1.8rem;}
.res-hints span{color:var(--accent);font-weight:700;}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:320px;margin:0 auto 2rem;}
.res-stat{
  background:var(--navy2);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:1.2rem 1rem;
}
.res-stat .bn{font-family:var(--font);font-size:2.6rem;font-weight:900;line-height:1;margin-bottom:3px;}
.res-stat .bl{font-family:var(--code);font-size:9px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;}
.ra .bn{color:var(--right);} .re .bn{color:var(--wrong);}
/* email form */
.email-card{
  background:var(--navy2);
  border:1px solid rgba(240,165,0,.25);
  border-top:3px solid var(--accent);
  border-radius:10px;padding:1.8rem;
  max-width:500px;margin:0 auto 1.5rem;text-align:left;
}
.email-card h3{font-family:var(--font);font-size:15px;font-weight:800;color:var(--white);margin-bottom:.3rem;}
.email-card p{font-size:12px;color:var(--muted);margin-bottom:1.2rem;font-weight:300;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.field-row.one{grid-template-columns:1fr;}
label{font-family:var(--font);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px;}
input[type=text],input[type=email]{
  width:100%;padding:9px 12px;border-radius:6px;
  border:1px solid rgba(255,255,255,.12);background:var(--navy);
  color:var(--text);font-family:'Open Sans',sans-serif;font-size:14px;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(240,165,0,.15);}
.send-btn{
  width:100%;padding:11px;border-radius:7px;margin-top:12px;
  background:linear-gradient(90deg,var(--accent),#e09000);
  color:var(--navy);border:none;
  font-family:var(--font);font-size:14px;font-weight:800;
  cursor:pointer;letter-spacing:.02em;
  transition:opacity .2s,transform .12s,box-shadow .2s;
}
.send-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px rgba(240,165,0,.3);}
.send-btn:active{transform:scale(.97);}
.send-btn:disabled{opacity:.4;cursor:not-allowed;}
.msg-ok{color:var(--right);font-size:12px;margin-top:8px;text-align:center;font-family:var(--code);}
.msg-err{color:var(--wrong);font-size:12px;margin-top:8px;text-align:center;font-family:var(--code);}
.btn-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.btn-sec{
  padding:10px 24px;border-radius:7px;
  border:1px solid rgba(255,255,255,.15);background:var(--navy2);
  color:var(--text);font-family:var(--font);font-size:13px;font-weight:700;
  cursor:pointer;transition:transform .12s,background .15s,border-color .15s;
}
.btn-sec:hover{background:var(--navy3);border-color:var(--accent);transform:translateY(-1px);}
.btn-hof{border-color:var(--accent);color:var(--accent);}
.btn-hof:hover{background:rgba(240,165,0,.12);}

/* ── hof link on splash ── */
.hof-link-row{text-align:center;margin:1.4rem 0 0;}
.hof-btn{
  display:inline-block;padding:9px 22px;border-radius:7px;
  border:1px solid var(--accent);background:transparent;
  color:var(--accent);font-family:var(--font);font-size:13px;font-weight:700;
  cursor:pointer;transition:background .15s,transform .12s;text-decoration:none;
}
.hof-btn:hover{background:rgba(240,165,0,.12);transform:translateY(-1px);}

/* ── divider ── */
.divider{height:1px;background:rgba(255,255,255,.07);margin:2rem 0;}

/* ── flash ── */
#flash{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:0;transition:opacity .08s;}
#flash.r{background:radial-gradient(ellipse at 50% 50%,rgba(46,204,113,.12) 0%,transparent 70%);}
#flash.w{background:radial-gradient(ellipse at 50% 50%,rgba(231,76,60,.12) 0%,transparent 70%);}
#flash.on{opacity:1;}

/* ── particle ── */
.pt{position:fixed;pointer-events:none;z-index:300;border-radius:50%;animation:ptFly var(--d) ease-out forwards;}
@keyframes ptFly{from{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(0);opacity:0}}

/* ── anims ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes popIn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes cardIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.fadein{animation:fadeUp .5s ease both;}
.cin{animation:cardIn .4s cubic-bezier(.34,1.1,.64,1) both;}

/* footer bar */
#footbar{
  background:var(--navy2);border-top:1px solid rgba(255,255,255,.07);
  text-align:center;padding:.8rem;
  font-size:11px;color:var(--muted);font-family:var(--font);
  letter-spacing:.05em;
}
#footbar span{color:var(--accent);}

@media(max-width:480px){
  .opts-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .wrap{padding:1.5rem 1rem 4rem;}
  .hero{padding:2rem 1.2rem;}
}