/* === Nova Duel Enhancements v1.0 === */
/* Intro Overlay */
.duel-intro-overlay{
  position:fixed; inset:0; background:radial-gradient(120% 120% at 50% 50%, rgba(10,10,20,.96) 0%, rgba(10,10,20,.98) 60%, rgba(0,0,0,.98) 100%);
  display:none; align-items:center; justify-content:center; z-index:999999;
  overflow:hidden;
}
.duel-intro-stage{ position:relative; width:min(1100px,95vw); height:min(540px,70vh); border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.5); overflow:hidden; }
.duel-side{
  position:absolute; top:0; bottom:0; width:55%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  padding:24px;
  transform:translateX(var(--tx,0)); opacity:0;
  animation: sideIn .6s ease forwards;
}
.duel-side.left{
  left:0; --tx:-40px;
  background:linear-gradient(135deg, rgba(99,102,241,.15), rgba(59,130,246,.05));
  border-right:1px solid rgba(255,255,255,.08);
}
.duel-side.right{
  right:0; --tx:40px;
  background:linear-gradient(225deg, rgba(244,63,94,.15), rgba(251,146,60,.05));
  border-left:1px solid rgba(255,255,255,.08);
}
@keyframes sideIn{ to{ transform:translateX(0); opacity:1; } }

.duel-intro-photo{
  width:min(120px,20vmin); height:min(120px,20vmin);
  border-radius:16px; object-fit:cover; border:4px solid rgba(255,255,255,.2);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.duel-intro-name{
  font-size:clamp(18px,3.2vmin,28px); font-weight:900; letter-spacing:.5px;
  color:#fff; text-align:center; text-shadow:0 2px 10px rgba(0,0,0,.6);
  max-width:90%; word-break:break-word;
}

.duel-vs-wrap{
  position:absolute; inset:auto 0 24px 0; display:flex; align-items:center; justify-content:center; gap:18px;
}
.duel-vs-badge{
  font-weight:900; font-size:clamp(20px,3.2vmin,28px);
  color:#111; background:#f5f5f5; padding:8px 18px; border-radius:999px;
  box-shadow:0 8px 24px rgba(255,255,255,.15), inset 0 1px 0 rgba(255,255,255,.6);
  animation:pulseVS 1.2s ease-in-out infinite;
}
@keyframes pulseVS{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.06) } }

/* Swords (SVG) */
.swords{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(8deg);
  width:min(420px,70vmin); height:auto; opacity:0; filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));
  animation:swordsIn .9s .25s ease forwards;
}
@keyframes swordsIn{ to{ opacity:1; transform:translate(-50%,-50%) rotate(0deg) } }

/* Countdown */
.duel-countdown{
  position:absolute; top:22px; left:50%; transform:translateX(-50%);
  font-size:clamp(26px,4vmin,34px); font-weight:900; color:#fff; letter-spacing:2px;
  text-shadow:0 3px 18px rgba(0,0,0,.7);
}
.count-num{ display:inline-block; min-width:1ch; animation:popNum .6s ease; }
@keyframes popNum{ 0%{ transform:scale(.6); opacity:.5 } 60%{ transform:scale(1.3); opacity:1 } 100%{ transform:scale(1) } }

/* Question Screen polish */
.question-container.duel-animate{ animation:qcIn .35s ease both; }
@keyframes qcIn{ from{ transform:scale(.98); opacity:.0; filter:saturate(.9) } to{ transform:scale(1); opacity:1; filter:saturate(1) } }

.option-button{ position:relative; overflow:hidden; }
.option-button .ring{
  position:absolute; inset:0; border:2px solid rgba(255,255,255,.15); border-radius:10px; pointer-events:none;
}
.option-button.correct{ box-shadow:0 10px 20px rgba(16,185,129,.35) }
.option-button.wrong{ box-shadow:0 10px 20px rgba(239,68,68,.35) }

/* Tap particles */
.tap-pop{ position:fixed; width:8px; height:8px; background:#fff; border-radius:50%; pointer-events:none; will-change:transform,opacity; }

/* Winner fireworks */
.confetti{
  position:fixed; top:-10px; width:8px; height:12px; opacity:0; transform:translateY(-20px);
  animation: fall var(--dur) linear forwards; z-index:999998;
}
@keyframes fall{
  to{ transform:translate(var(--tx), 100vh) rotate(var(--rot)); opacity:1 }
}

/* Top VS bar */
.duel-topbar{ display:none; position:sticky; top:0; z-index:99996; width:100%; max-width:900px; margin-bottom:8px }
.duel-topbar-inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:8px 12px;
  background:linear-gradient(90deg, rgba(99,102,241,.15), rgba(244,63,94,.15));
  border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.duel-topbar .pname{ font-weight:800; color:#111; text-shadow:0 1px 0 rgba(255,255,255,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.duel-topbar .vs{ font-weight:900 }
.duel-topbar .bar{ height:8px; background:#eee; border-radius:999px; overflow:hidden; }
.duel-topbar .fill{ height:100%; width:0%; transition:width .3s ease; }

/* Guard against overlap */
.duel-intro-overlay.dismissed{ display:none !important; }