.np-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.np-top .kv-tabs { flex: 1 1 280px; flex-wrap: nowrap; overflow-x: auto; }
.np-top .kv-tab { white-space: nowrap; }
@media (max-width: 600px) {
  .np-top [data-fs] { display: none; }
}

.np-body { display: grid; gap: 26px; margin-top: 22px; }
@media (min-width: 860px) {
  .np-body { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
}

.np-main { min-width: 0; }
.np-main > .kv-msg { margin: 0 0 16px; }
.np-panel { display: grid; gap: 18px; justify-items: center; }
.np-panel[data-panel='many'], .np-panel[data-panel='groups'] { justify-items: stretch; }

/* A roleta encolhe em telas baixas para o botão e o resultado caberem sem rolar. */
.np-stage { position: relative; width: 100%; max-width: max(260px, min(500px, calc(100svh - 300px))); }
.np-wheel-wrap { width: 100%; aspect-ratio: 1; }
.np-wheel-wrap canvas { display: block; cursor: pointer; }

/* Nome sorteado: aparece por cima da roleta, no centro. */
.np-result {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 2px;
  width: max-content;
  max-width: 88%;
  text-align: center;
  padding: 12px 28px 16px;
  border: 3px solid #14213d;
  border-radius: 14px;
  background: var(--kit);
  color: #14213d;
  box-shadow: 6px 6px 0 #14213d;
  cursor: pointer;
}
.np-result span { font-weight: 650; font-size: 0.95rem; }
.np-result strong { font-size: clamp(1.8rem, 1.2rem + 3vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.np-result.is-new { animation: np-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes np-pop {
  from { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.np-options { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center; }

.np-history { margin: 0; color: var(--muted); text-align: center; font-size: 0.95rem; }
.np-history-label { font-weight: 650; color: var(--ink); }
.np-history .kv-btn { min-height: 30px; padding: 2px 8px; }

.np-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; }
.np-number { width: 120px; font-size: 1.2rem; font-weight: 700; }

.np-out { display: grid; gap: 14px; justify-items: start; padding-top: 18px; border-top: 2px solid var(--line); }
.np-picks { margin: 0; padding-left: 2.2em; display: grid; gap: 6px; font-size: 1.3rem; font-weight: 700; }
.np-picks li::marker { color: var(--muted); font-weight: 650; }
.np-groups { display: grid; gap: 12px; width: 100%; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.np-group { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; border-top: 5px solid var(--kit); }
.np-group h3 { font-size: 1rem; font-weight: 750; margin-bottom: 6px; }
.np-group ul { list-style: none; margin: 0; padding: 0; }
.np-group li { padding: 2px 0; }

.np-list { display: grid; gap: 8px; align-content: start; }
.np-list .kv-textarea { min-height: 220px; }
.np-list-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.np-list-actions { display: flex; gap: 2px; }
.np-list p { margin: 0; }

/* Tela cheia (projetor da sala de aula) */
.np:fullscreen { background: var(--surface); padding: 24px 32px; overflow: auto; }
.np:fullscreen .np-stage { max-width: min(100%, calc(100vh - 200px)); }
.np:fullscreen .np-body { grid-template-columns: minmax(0, 1fr) 260px; }