/* Duels (DUEL agent): head-to-head mode for single-player games. Builds on mp.css (.np-mp-*, .np-mm-*) and race.css (.np-race-*). */

.np-duel-rules { font-size: 12.5px; line-height: 1.35; text-align: center; color: var(--text-dim, #565a72); }

/* live panel: progress bars instead of race scores */
.np-duel-live .np-race-side { gap: 5px; }
.np-duel-prog { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; max-width: 170px; min-width: 0; }
.np-race-side.is-opp .np-duel-prog { grid-area: score; }
.np-duel-pb { height: 8px; border-radius: 999px; background: var(--bg-soft, rgba(14,16,32,.1)); overflow: hidden; }
.np-duel-pb i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent, #3e7d00); transition: width .4s ease; }
.np-race-side.is-opp .np-duel-pb i { background: #f97316; }
.np-duel-prog span { font-size: 12px; font-weight: 700; text-align: center; color: var(--text-dim, #565a72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.np-race-mini.np-duel-mini { width: 64px; height: 64px; }

/* countdown / time-up card */
.np-duel-cd { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.np-duel-cd-n { font: 800 clamp(40px, 12vw, 64px)/1 var(--font-display, system-ui); color: var(--accent, #3e7d00); letter-spacing: -.02em; }
.np-duel-cd b { font-size: 17px; }
.np-duel-cd span { font-size: 14px; color: var(--text-dim, #565a72); }
.np-duel-cd small { font-size: 12.5px; line-height: 1.35; color: var(--text-dim, #565a72); max-width: 300px; }

/* result card */
.np-duel-res { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.np-duel-res b { font: 800 24px/1.1 var(--font-display, system-ui); }
.np-duel-res.is-win b { color: var(--accent, #3e7d00); }
.np-duel-res.is-loss b { color: #dc2626; }
.np-duel-res span { font-size: 13.5px; color: var(--text-dim, #565a72); }
.np-duel-res .np-race-xp { margin: 4px 0 0; color: var(--volt-ink, #0e1020); font-size: 12px; }
.np-duel-ans { text-align: center; font-size: 14px; }
.np-duel-vs { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.np-duel-vs b { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.np-duel-vs .np-mp-chip { min-width: 0; }
.np-mm-card .np-mp-more .btn { flex: 1 1 90px; }

/* input lock after a wrong sudoku number / chess move */
.np-duel-on .game-area { position: relative; }
.np-duel-lock { position: absolute; inset: 0; z-index: 19; display: flex; align-items: center; justify-content: center;
  background: rgba(220, 38, 38, .14); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); border-radius: inherit; }
.np-duel-lock-box { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 18px; border-radius: 14px;
  background: var(--bg-card, #fff); color: var(--text, #12142a); box-shadow: 0 10px 30px rgba(0,0,0,.25); text-align: center; }
.np-duel-lock-box b { font: 800 34px/1 var(--font-display, system-ui); color: #dc2626; }
.np-duel-lock-box span { font-size: 13px; }

/* during a duel: solo-only extras stay out of the way */
.np-duel-on #stuck-banner, .np-duel-on .hm-hint { display: none !important; }

@media (max-width: 560px), (max-height: 500px) {
  .np-race-mini.np-duel-mini { width: 48px; height: 48px; }
  .np-duel-prog span { font-size: 11px; }
  .np-duel-rules { font-size: 11.5px; }
  .np-duel-res b { font-size: 20px; }
  .np-duel-cd small { display: none; }
}
@media (max-height: 500px) {
  .np-mm-card .np-duel-rules { display: none; }
}