/* 20 Number Challenge — online (group-platform) mode styles.
 * Mirrors the visual language of the solo mode (style.css) while keeping
 * online-only classes prefixed with nc- to avoid collisions. */

#nc-online-root {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 16px 60px;
}

.nc-online-banner {
  background: rgba(255, 185, 32, 0.18);
  border: 1px solid rgba(255, 185, 32, 0.45);
  color: #6b4a00;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}

#nc-online-status {
  font-size: 14px;
  color: var(--text-secondary, #5e5c5e);
  margin: 8px 0;
  min-height: 1em;
}
#nc-online-status.error { color: var(--gof-warm, #de6739); }

.nc-online-card {
  background: var(--card-bg, #fff);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--card-shadow, 0 4px 20px rgba(0,0,0,0.08));
  margin-bottom: 12px;
}

.nc-online-section-title {
  font-family: 'League Spartan', 'Trocchi', sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--gof-primary-dark, #157623);
}

/* ===== Roster ===== */
.nc-roster {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.nc-roster-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid var(--slot-border, #d1d5db);
}
.nc-roster-item:last-child { border-bottom: none; }
.nc-roster-name {
  font-weight: 600;
  font-size: 15px;
}
.nc-roster-progress {
  font-size: 13px;
  color: var(--text-secondary, #5e5c5e);
  background: var(--gof-bg-light, #dde5ed);
  padding: 2px 8px;
  border-radius: 999px;
}
.nc-roster-progress.is-done {
  background: var(--gof-primary, #9bca3e);
  color: #fff;
}
.nc-roster-progress.is-eliminated {
  background: rgba(222, 103, 57, 0.18);
  color: var(--gof-warm, #de6739);
}

.nc-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nc-badge-you {
  background: rgba(155, 202, 62, 0.22);
  color: var(--gof-primary-dark, #157623);
}
.nc-badge-host {
  background: var(--gof-accent, #ffb920);
  color: #fff;
}
.nc-remove-btn {
  background: transparent;
  border: 1px solid var(--gof-warm, #de6739);
  color: var(--gof-warm, #de6739);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.nc-remove-btn:hover { background: var(--gof-warm, #de6739); color: #fff; }

/* ===== Buttons ===== */
.nc-online-btn {
  display: inline-block;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: var(--gof-primary, #9bca3e);
  color: #fff;
  cursor: pointer;
  margin-top: 8px;
}
.nc-online-btn:hover:not(:disabled) { background: var(--gof-primary-dark, #157623); }
.nc-online-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.nc-online-btn.secondary {
  background: var(--gof-bg-light, #dde5ed);
  color: var(--text-primary, #2f2c28);
}
.nc-online-btn.secondary:hover:not(:disabled) {
  background: #c6d0db;
}
.nc-online-btn.switch {
  background: transparent;
  color: var(--text-secondary, #5e5c5e);
  border: 1px solid var(--slot-border, #d1d5db);
}

/* ===== Lobby ===== */
.nc-lobby-player-count {
  font-size: 13px;
  color: var(--text-secondary, #5e5c5e);
  margin-bottom: 8px;
}
.nc-lobby-settings {
  margin: 8px 0 12px;
  padding: 10px 12px;
  background: rgba(155, 202, 62, 0.08);
  border-radius: 8px;
}
.nc-lobby-settings-group { margin-bottom: 10px; }
.nc-lobby-settings-group:last-child { margin-bottom: 0; }
.nc-lobby-settings-label {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
}
.nc-lobby-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nc-lobby-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--slot-border, #d1d5db);
  border-radius: 6px;
  cursor: pointer;
}
.nc-lobby-radio-label input { margin: 0; }
.nc-lobby-radio-label input:disabled + span { color: var(--text-secondary, #5e5c5e); }
.nc-lobby-guest-settings {
  font-size: 13px;
  color: var(--text-secondary, #5e5c5e);
  margin: 8px 0;
}
.nc-hint {
  font-size: 13px;
  color: var(--text-secondary, #5e5c5e);
  margin: 8px 0;
}

/* ===== Playing ===== */
.nc-playing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-secondary, #5e5c5e);
}
.nc-timer {
  font-family: 'Trocchi', 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--gof-primary-dark, #157623);
}
.nc-timer.is-low { color: var(--gof-warm, #de6739); }
.nc-timer.is-countdown {
  color: var(--gof-accent, #ffb920);
  font-style: italic;
  font-size: 14px;
  font-weight: 600;
}

.nc-playing-meta {
  font-size: 12px;
  color: var(--text-secondary, #5e5c5e);
  text-align: right;
}

.nc-draw-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}
.nc-draw-number {
  font-family: 'Trocchi', 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: var(--gof-primary-dark, #157623);
  min-height: 56px;
  display: flex;
  align-items: center;
}
.nc-draw-number.is-empty { color: var(--slot-border, #d1d5db); }
.nc-draws-remaining {
  font-size: 13px;
  color: var(--text-secondary, #5e5c5e);
}
.nc-draw-btn {
  font-size: 17px;
  padding: 12px 28px;
}
.nc-place-prompt {
  font-size: 14px;
  color: var(--gof-accent, #ffb920);
  font-weight: 700;
}
.nc-place-prompt.is-eliminating { color: var(--gof-warm, #de6739); }

/* Fixed-min-height container holding either the Draw button or the
   "Tap a yellow slot" prompt. Keeps the board below from jumping when
   one is swapped for the other. Same shape for the lobby's Start button
   vs guest-waiting hint. */
.nc-action-slot {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
}
.nc-draw-action-slot { min-height: 52px; }
.nc-lobby-action-slot { min-height: 52px; margin: 12px 0; }

/* Reserved space for eliminated / done notices so the board doesn't shift
   up when neither is showing. Notices render inside this; the slot itself
   stays a fixed height. */
.nc-notice-slot {
  min-height: 56px;
  margin-top: 12px;
}

/* Countdown display: same .nc-draw-number element repurposed during the
   pre-start window. Slightly tighter so 3/2/1 read as a count, not a value. */
.nc-draw-number.is-countdown {
  color: var(--gof-accent, #ffb920);
  font-size: 64px;
}

/* Empty-board preview (lobby) styling. Same shape as the playing board
   but the slots are clearly idle (no hover, dim text). */
.nc-board-preview .nc-slot {
  opacity: 0.55;
  cursor: default;
}

/* Lobby settings disclosure (replaces the visible form from v1). */
.nc-lobby-settings-details {
  margin: 12px 0 8px;
  background: var(--gof-bg-light, #dde5ed);
  border-radius: 8px;
  padding: 8px 12px;
}
.nc-lobby-settings-details > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary, #5e5c5e);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nc-lobby-settings-details > summary::-webkit-details-marker { display: none; }
.nc-lobby-settings-details > summary::before {
  content: '⚙';
  font-size: 14px;
}
.nc-settings-summary-label {
  font-weight: 700;
}
.nc-settings-summary-current {
  color: var(--text-secondary, #5e5c5e);
}
.nc-lobby-settings-details[open] > summary {
  margin-bottom: 8px;
}
.nc-lobby-settings-details .nc-lobby-settings {
  background: transparent;
  padding: 0;
}

.nc-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  max-width: 240px;
  margin: 0 auto;
}
.nc-slot {
  height: 36px;
  border: 1px solid var(--slot-border, #d1d5db);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  background: #fff;
  color: var(--text-secondary, #5e5c5e);
  user-select: none;
}
.nc-slot.is-filled {
  background: var(--gof-primary, #9bca3e);
  color: #fff;
  border-color: var(--gof-primary, #9bca3e);
}
.nc-slot.is-valid {
  background: rgba(255, 185, 32, 0.22);
  border-color: var(--gof-accent, #ffb920);
  color: var(--gof-primary-dark, #157623);
  cursor: pointer;
}
.nc-slot.is-valid:hover {
  background: rgba(255, 185, 32, 0.45);
}
.nc-slot.is-invalid {
  background: rgba(222, 103, 57, 0.10);
  color: rgba(222, 103, 57, 0.55);
}
.nc-slot.is-bad {
  background: var(--gof-warm, #de6739);
  color: #fff;
  border-color: var(--gof-warm, #de6739);
}

.nc-eliminated-notice,
.nc-done-notice {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.nc-eliminated-notice {
  background: rgba(222, 103, 57, 0.10);
  color: var(--gof-warm, #de6739);
}
.nc-done-notice {
  background: rgba(155, 202, 62, 0.18);
  color: var(--gof-primary-dark, #157623);
}

.nc-host-more {
  margin-top: 12px;
  font-size: 13px;
}
.nc-host-warning {
  font-size: 12px;
  color: var(--text-secondary, #5e5c5e);
  margin: 6px 0;
}

/* ===== Ended ===== */
.nc-ended-title {
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: 26px;
  text-align: center;
  margin-bottom: 16px;
  color: var(--gof-primary-dark, #157623);
}
.nc-ended-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.nc-ended-player-card {
  background: var(--gof-bg-light, #dde5ed);
  border-radius: 10px;
  padding: 10px;
}
.nc-ended-player-card.is-winner {
  background: rgba(255, 185, 32, 0.25);
  border: 2px solid var(--gof-accent, #ffb920);
}
.nc-ended-player-card.is-eliminated {
  opacity: 0.85;
}
.nc-ended-player-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 13px;
}
.nc-ended-player-name { font-weight: 700; }
.nc-ended-player-score { color: var(--text-secondary, #5e5c5e); }
.nc-ended-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.nc-slot-small {
  height: 22px;
  font-size: 12px;
  border-radius: 4px;
}