/* ============ JORNADA INCRÍVEL — estilo ============ */
:root{
  --bg:#0a0a12;
  --bg2:#11111f;
  --panel:#181826;
  --panel2:#20203200;
  --line:#2c2c42;
  --gold:#e8b84b;
  --gold2:#f5d680;
  --red:#e03a3a;
  --red-deep:#8a1f1f;
  --green:#39c46a;
  --txt:#eef0f6;
  --muted:#9aa0b4;
  --max:#c026d3;
  --crit:#e03a3a;
  --alto:#f59e0b;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, #1b1530 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 100%, #2a1015 0%, transparent 55%),
    var(--bg);
  color:var(--txt);
  min-height:100%;
  overflow-x:hidden;
}
h1,h2,.title-main{font-family:'Cinzel',serif;letter-spacing:.5px}
.hl{color:var(--gold)}
.muted{color:var(--muted);font-size:.9rem;margin:.2rem 0}
.hidden{display:none !important}

/* ---------- 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:inherit;font-weight:600;font-size:.95rem;color:var(--txt);
  background:#23233a;border:1px solid var(--line);border-radius:12px;
  padding:.7rem 1.2rem;cursor:pointer;transition:.18s;
}
.btn:hover{background:#2d2d49;transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--txt)}
.btn-primary{
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  color:#2a1d00;border:none;box-shadow:0 6px 20px -6px rgba(232,184,75,.55);
}
.btn-primary:hover{filter:brightness(1.06)}
.btn.big{font-size:1.1rem;padding:.95rem 1.8rem}

/* ---------- HOME ---------- */
.home-hero{max-width:760px;margin:0 auto;padding:7vh 1.4rem 4rem;text-align:center}
.home-emblem{font-size:3.2rem;filter:drop-shadow(0 4px 16px rgba(224,58,58,.4))}
.title-main{font-size:clamp(2.2rem,7vw,4rem);font-weight:800;
  background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(232,184,75,.15);margin-top:.3rem}
.title-sub{font-size:clamp(1.1rem,3.5vw,1.6rem);color:var(--muted);font-weight:600;margin-top:.1rem}
.home-pitch{margin:1.8rem auto;max-width:620px;line-height:1.65;color:#cfd3e0;font-size:1.02rem}
.home-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.2rem}
.home-stats{display:flex;gap:2.2rem;justify-content:center;margin-top:2.6rem}
.home-stats div{display:flex;flex-direction:column}
.home-stats b{font-size:1.7rem;color:var(--gold);font-family:'Cinzel',serif}
.home-stats span{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.home-foot{margin-top:2.6rem;color:#5a5f73;font-size:.78rem}

/* ---------- top bar ---------- */
.bar{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem 1rem;background:rgba(10,10,18,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar-title{font-family:'Cinzel',serif;font-weight:600;font-size:1.05rem}
.bar-right{display:flex;gap:.8rem;align-items:center}
.hud{font-size:.95rem;color:var(--muted)}
.hud b{color:var(--txt)}

/* ---------- battle setup ---------- */
.battle-setup{max-width:560px;margin:0 auto;padding:8vh 1.4rem;text-align:center}
.battle-setup h2{font-size:1.6rem;margin-bottom:.4rem}
.chip-row{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin:.6rem 0 1.6rem}
.chip{
  font-family:inherit;font-size:.85rem;font-weight:600;color:var(--muted);
  background:#1c1c2e;border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;cursor:pointer;transition:.16s;
}
.chip:hover{color:var(--txt);border-color:#3c3c5c}
.chip.active{background:var(--gold);color:#241900;border-color:var(--gold)}

/* ---------- battle arena ---------- */
.battle-arena{max-width:1040px;margin:0 auto;padding:1rem 1.2rem 4rem}
.progress{height:6px;background:#1b1b2c;border-radius:999px;overflow:hidden;margin:.6rem 0}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--red));transition:width .4s}
.round-info{text-align:center;color:var(--muted);font-size:.85rem;margin-bottom:1rem;letter-spacing:.5px}

.versus{display:grid;grid-template-columns:minmax(220px,330px) 1fr;gap:1.8rem;align-items:start}
@media(max-width:760px){.versus{grid-template-columns:1fr;gap:1.1rem}}

.card-frame{
  position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#000;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(232,184,75,.06);
}
.card-frame img{width:100%;display:block}
/* na pergunta, mostra só a arte (esconde as caixas de baixo) */
.card-frame.cropped{aspect-ratio:760/720;}
.card-frame.cropped img{position:absolute;top:0;left:0}
.reveal-flag{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#04210f;font-weight:800;font-size:.72rem;
  padding:.25rem .7rem;border-radius:999px;letter-spacing:1px;box-shadow:0 4px 14px rgba(0,0,0,.4)
}

.villain-meta .danger-badge{
  display:inline-block;font-weight:800;font-size:.72rem;letter-spacing:1.5px;
  padding:.28rem .7rem;border-radius:6px;color:#fff;
}
.danger-MÁXIMO,.danger-badge.MÁXIMO{background:linear-gradient(90deg,var(--max),#7c2d92)}
.danger-CRÍTICO,.danger-badge.CRÍTICO{background:linear-gradient(90deg,var(--crit),var(--red-deep))}
.danger-ALTO,.danger-badge.ALTO{background:linear-gradient(90deg,var(--alto),#a85c08)}
.q-name,#q-name{font-size:1.9rem;margin:.5rem 0 .3rem;line-height:1.05}
.q-represents{color:#cfd3e0;line-height:1.5;margin-bottom:.7rem}
.q-powers{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.4rem}
.q-powers span{
  font-size:.78rem;background:#2a1518;border:1px solid #4a2226;color:#f0b8b8;
  padding:.25rem .6rem;border-radius:999px
}

.question-block{margin-top:1.4rem}
.question-label{font-size:1rem;margin-bottom:.8rem;color:#e7e9f2}
.options{display:grid;gap:.6rem}
.option{
  text-align:left;font-family:inherit;font-size:.96rem;font-weight:500;color:var(--txt);
  background:#1c1c2e;border:1.5px solid var(--line);border-radius:12px;padding:.85rem 1rem;cursor:pointer;
  transition:.15s;display:flex;align-items:center;gap:.7rem
}
.option:hover:not(:disabled){border-color:var(--gold);background:#23233a}
.option .ico{font-size:1.1rem;opacity:.7}
.option:disabled{cursor:default}
.option.correct{border-color:var(--green);background:#13301f;color:#bff5d2}
.option.wrong{border-color:var(--red);background:#301315;color:#f5bcbc}
.option.dim{opacity:.45}

.feedback{margin-top:1.2rem;padding:1rem;border-radius:14px;background:#16162a;border:1px solid var(--line);animation:fade .25s}
.feedback-head{font-weight:800;font-size:1.1rem;margin-bottom:.4rem;font-family:'Cinzel',serif}
.feedback-head.ok{color:var(--green)}
.feedback-head.no{color:var(--red)}
.feedback-text{color:#cfd3e0;line-height:1.55;margin-bottom:.9rem;font-size:.95rem}
.feedback-text b{color:var(--gold2)}

/* ---------- battle result ---------- */
.battle-result{max-width:560px;margin:0 auto;padding:8vh 1.4rem;text-align:center}
.battle-result h2{font-size:2rem}
.result-emblem{font-size:4rem;margin:.4rem 0}
.result-rank{font-family:'Cinzel',serif;font-size:1.3rem;color:var(--gold);margin-bottom:1.4rem}
.result-stats{display:flex;gap:2rem;justify-content:center;margin-bottom:1.4rem}
.result-stats b{font-size:1.8rem;color:var(--txt);display:block;font-family:'Cinzel',serif}
.result-stats span{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.result-msg{color:#cfd3e0;line-height:1.6;margin-bottom:1.6rem}

/* ---------- desdobramento (arenas) ---------- */
.desdobramento-intro{max-width:820px;margin:1.4rem auto 0;padding:0 1.4rem;color:#cfd3e0;line-height:1.6;text-align:center}
.arena-grid{
  max-width:1100px;margin:1.6rem auto;padding:0 1.2rem 4rem;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;
}
.arena-card{
  background:linear-gradient(180deg,#1a1a2c,#15151f);border:1px solid var(--line);border-radius:16px;
  padding:1.1rem;cursor:pointer;transition:.18s;position:relative;overflow:hidden
}
.arena-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 16px 40px -20px rgba(232,184,75,.4)}
.arena-card .guardian{font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);font-weight:700}
.arena-card h3{font-family:'Cinzel',serif;font-size:1.15rem;margin:.25rem 0 .5rem}
.arena-card .arena-desc{font-size:.85rem;color:var(--muted);line-height:1.45;margin-bottom:.7rem}
.arena-threats{display:flex;flex-wrap:wrap;gap:.35rem}
.arena-threats span{font-size:.72rem;background:#2a1518;border:1px solid #4a2226;color:#f0b8b8;padding:.2rem .55rem;border-radius:999px}

/* ---------- codex ---------- */
.codex-filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding:1.2rem 1rem .4rem}
.codex-grid{
  max-width:1200px;margin:1rem auto;padding:0 1rem 4rem;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem
}
.codex-card{
  position:relative;border-radius:12px;overflow:hidden;cursor:pointer;border:1px solid var(--line);
  background:#000;transition:.18s;aspect-ratio:760/1140
}
.codex-card img{width:100%;height:100%;object-fit:cover;display:block;transition:.25s}
.codex-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 16px 40px -20px rgba(0,0,0,.8)}
.codex-card:hover img{transform:scale(1.04)}
.codex-card .cx-num{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.7);color:var(--gold);
  font-size:.7rem;font-weight:700;padding:.1rem .45rem;border-radius:6px}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:50;background:rgba(4,4,10,.86);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:1.4rem;animation:fade .2s
}
.modal-content{
  position:relative;max-width:920px;width:100%;max-height:92vh;overflow:auto;
  display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:1.4rem;align-items:start;
  background:#13131f;border:1px solid var(--line);border-radius:18px;padding:1.4rem
}
@media(max-width:680px){.modal-content{grid-template-columns:1fr;text-align:center}}
.modal-content img{width:100%;border-radius:12px;display:block}
.modal-close{
  position:absolute;top:.6rem;right:.7rem;z-index:2;background:#23233a;color:var(--txt);
  border:1px solid var(--line);border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:1rem
}
.modal-close:hover{background:var(--red);color:#fff}
.modal-detail{text-align:left;padding-top:.4rem}
.modal-detail h2{font-size:1.6rem;margin-bottom:.3rem}
.modal-detail .md-quote{font-style:italic;color:var(--gold2);margin:.6rem 0;line-height:1.5}
.modal-detail h4{font-size:.74rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:1rem 0 .35rem}
.modal-detail p{color:#cfd3e0;line-height:1.55;font-size:.95rem}
.md-list{display:flex;flex-wrap:wrap;gap:.4rem}
.md-list span{font-size:.82rem;padding:.28rem .65rem;border-radius:999px;border:1px solid var(--line)}
.md-weapons span{background:#13301f;border-color:#1f5a36;color:#bff5d2}
.md-powers span{background:#2a1518;border-color:#4a2226;color:#f0b8b8}
.md-guardian{display:inline-block;background:#2a230a;border:1px solid #5c4a12;color:var(--gold2);
  padding:.3rem .7rem;border-radius:8px;font-weight:700;font-size:.9rem}

/* ---------- celular ---------- */
@media(max-width:600px){
  .home-hero{padding:5vh 1.1rem 3rem}
  .home-pitch{font-size:.96rem;margin:1.4rem auto}
  /* botões empilhados e largos: alvo de toque melhor no celular */
  .home-actions{gap:.6rem}
  .home-actions .btn{flex:1 1 100%}
  .btn.big{font-size:1.02rem;padding:.85rem 1.2rem}
  .home-stats{gap:1.4rem;flex-wrap:wrap}
  .home-stats b{font-size:1.45rem}

  /* barra do topo não estoura com o título + HUD */
  .bar{gap:.5rem;padding:.6rem .7rem}
  .bar-title{font-size:.92rem}
  .bar-right{gap:.5rem}
  .hud{font-size:.85rem}

  .battle-setup{padding:5vh 1.1rem}
  .battle-setup h2{font-size:1.35rem}
  .q-name,#q-name{font-size:1.5rem}
}