/* Real ou Fake? — estilos */
:root{
  --bg:#0f1115; --panel:#1a1d24; --panel2:#222632;
  --line:#2c313c; --txt:#e8eaed; --muted:#9aa0ab;
  --real:#2e9e5b; --real-d:#247a47;
  --fake:#d23b4e; --fake-d:#a82b3b;
  --accent:#4b86ff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  display:flex; flex-direction:column; min-height:100%;
}

/* Header */
.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--line);
}
.title{font-size:20px; font-weight:800; letter-spacing:.5px; margin:0}
.header-right{display:flex; gap:6px}
.icon-btn{
  background:transparent; border:0; color:var(--txt);
  font-size:20px; width:40px; height:40px; border-radius:10px; cursor:pointer;
}
.icon-btn:hover{background:var(--panel2)}

/* Jogo */
.game{
  flex:1; width:100%; max-width:520px; margin:0 auto;
  padding:18px 16px 28px; display:flex; flex-direction:column; gap:16px;
}

/* Progresso */
.progress{display:flex; gap:8px; justify-content:center; margin-top:4px}
.dot{width:11px; height:11px; border-radius:50%; background:var(--line); transition:.2s}
.dot.ok{background:var(--real)} .dot.no{background:var(--fake)}
.dot.cur{outline:2px solid var(--accent); outline-offset:2px}

/* Cartão */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:20px; min-height:170px; display:flex; flex-direction:column; gap:12px;
}
.card-type{
  align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--accent);
  background:rgba(75,134,255,.12); padding:5px 10px; border-radius:999px;
}
.card-q{font-size:17px; line-height:1.5; margin:0}

/* Feedback */
.feedback{
  background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:14px 16px;
  animation:rise .25s ease;
}
.verdict{margin:0 0 6px; font-weight:800; font-size:16px}
.verdict.ok{color:var(--real)} .verdict.no{color:var(--fake)}
.why{margin:0; color:var(--muted); font-size:14.5px; line-height:1.5}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Respostas */
.answers{display:flex; gap:12px}
.ans{
  flex:1; border:0; border-radius:14px; padding:18px 0; cursor:pointer;
  font-size:18px; font-weight:800; letter-spacing:1px; color:#fff; transition:.12s;
}
.ans:active{transform:scale(.98)}
.ans-real{background:var(--real)} .ans-real:hover{background:var(--real-d)}
.ans-fake{background:var(--fake)} .ans-fake:hover{background:var(--fake-d)}
.answers.locked .ans{opacity:.45; pointer-events:none}

/* Seguinte */
.next-btn{
  border:0; border-radius:14px; padding:16px 0; cursor:pointer;
  background:var(--accent); color:#fff; font-size:16px; font-weight:700;
}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:84px; transform:translateX(-50%);
  background:#000; color:#fff; padding:10px 16px; border-radius:10px;
  opacity:0; pointer-events:none; transition:.2s; font-size:14px; max-width:90%; text-align:center;
}
.toast.show{opacity:.95}

/* Overlay / modais */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; padding:16px; z-index:50;
}
.overlay[hidden]{display:none}
.modal{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:22px; width:100%; max-width:420px; max-height:88vh; overflow:auto;
}
.modal h2{margin:0 0 12px; font-size:20px}
.modal-close{
  position:absolute; top:12px; right:12px; background:transparent; border:0;
  color:var(--muted); font-size:18px; cursor:pointer;
}
.rules{margin:8px 0; padding-left:18px; color:var(--muted); line-height:1.6; font-size:14.5px}
.muted{color:var(--muted); font-size:13.5px}

/* Estatísticas */
.score-line{text-align:center; font-size:18px; font-weight:700; margin:0 0 14px}
.stats-grid{display:flex; justify-content:space-between; gap:8px; margin-bottom:16px}
.stats-grid > div{display:flex; flex-direction:column; align-items:center; flex:1}
.stat-num{font-size:26px; font-weight:800}
.stat-lbl{font-size:11px; color:var(--muted); text-align:center; margin-top:2px}
.next-share{display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:14px}
.next{display:flex; flex-direction:column}
.countdown{font-size:22px; font-weight:800; font-variant-numeric:tabular-nums}
.share-btn{background:var(--real); color:#fff; border:0; border-radius:12px; padding:14px 22px; font-size:15px; font-weight:800; cursor:pointer}

/* Email capture */
.email-capture{margin-top:16px; border-top:1px solid var(--line); padding-top:14px}
.ec-label{display:block; font-size:13.5px; color:var(--muted); margin-bottom:8px}
.ec-row{display:flex; gap:8px}
.ec-input{flex:1; background:var(--panel2); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:11px 12px; font-size:14px}
.ec-btn{background:var(--accent); color:#fff; border:0; border-radius:10px; padding:0 16px; font-weight:700; cursor:pointer}
.hidden{position:absolute; left:-9999px}

/* Sugestões / problemas */
.feedback-form{display:flex; flex-direction:column; gap:6px}
.feedback-form .ec-label{margin:8px 0 2px}
.ec-input-full{width:100%}
.fb-select, .fb-textarea{
  width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:11px 12px; font-size:14px; font-family:inherit;
}
.fb-textarea{resize:vertical; min-height:90px}
.fb-submit{margin-top:12px; padding:12px 0}

/* Lista de idiomas */
.lang-list{display:flex; flex-direction:column; gap:8px}
.lang-opt{display:flex; align-items:center; gap:10px; background:var(--panel2); border:1px solid var(--line); color:var(--txt); border-radius:12px; padding:12px 14px; cursor:pointer; font-size:15px}
.lang-opt.active{border-color:var(--accent)}
.lang-opt .flag{font-size:20px}
.lang-opt .check{margin-left:auto; color:var(--accent); opacity:0}
.lang-opt.active .check{opacity:1}