/* Number Theatre part 3 — styles for the wonders6.js exhibits (Collatz,
   Pascal, Times-Table Circle). Prefix .nc- so it can never collide with the
   other Number Theatre files (.nt- and .nz- are taken).
   Reuses the .wx-* vocabulary from screens.css; only adds what's new. */

/* ---------------------------------------------------------------- shared */
/* the strip UNDER a full-height canvas (stats, leaderboards, notes). It must
   never push the canvas off the column, so it caps its own height and scrolls
   inside itself; min-width:0 lets it shrink inside the flex column. */
.nc-info {
  flex-shrink: 0; min-width: 0;
  max-height: 42vh; overflow-y: auto; overflow-x: hidden;
  border-top: 1px solid var(--line);
  margin-top: 10px; padding-top: 8px;
}
/* one-line contextual readout under the Pascal / Times-Table canvases —
   min-height reserved so its text appearing never re-squashes the canvas
   (the wonders5 squash-bug lesson, applied at the CSS layer this time) */
.nc-read {
  flex-shrink: 0; min-height: 40px; min-width: 0;
  padding: 8px 2px 0; font-size: 13.5px; line-height: 1.5; color: var(--tx1);
}
.nc-read b { color: var(--tx0); }
.nc-read button, .nc-go { font-size: 12.5px; margin-left: 6px; }
.nc-note { flex-shrink: 0; color: var(--tx2); font-size: 12.8px; line-height: 1.6; margin-top: 8px; max-width: 92ch; }
.nc-note b { color: var(--tx1); }
.nc-good { color: var(--good); }
.nc-bad { color: var(--bad); }
.nc-dim { color: var(--tx2); }
.nc-warn { color: var(--bad); font-size: 13px; max-width: 46ch; }
.nc-hidden { display: none !important; }
/* thin visual divider between control groups in the one wrapping strip */
.nc-sep { width: 1px; align-self: stretch; background: var(--line); }

/* number entry (Collatz): monospace like the Kaprekar box, but 7 digits wide */
.nc-in {
  width: 7.5em; font: 600 16px/1 Consolas, monospace; letter-spacing: 1.5px;
  text-align: center; background: var(--bg1);
}

/* ------------------------------------------------------------- Collatz */
.nc-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.nc-chip {
  background: #12161f; border: 1px solid var(--line); border-radius: 9px;
  padding: 5px 10px; font-size: 13px; color: var(--tx1);
}
.nc-chip b { color: var(--gold); }
/* the ride written out as numbers — wraps, never widens the page */
.nc-num {
  font: 13.5px/1.6 Consolas, monospace; color: var(--gold);
  overflow-wrap: anywhere; word-break: break-all; max-width: 100%;
}
.nc-verdict { margin-top: 8px; font: 13.5px/1.55 'Segoe UI', system-ui, sans-serif; color: var(--tx1); }
/* the two record tables sit side by side until the column runs out of room,
   then stack — auto-fit collapses long before a phone's 390px does */
.nc-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 10px; }
.nc-panel {
  background: linear-gradient(180deg, #161b29, #11141f);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; min-width: 0;
}
.nc-panel h4 { font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--tx2); margin-bottom: 6px; }

/* -------------------------------------------------------- Times-Table */
.nc-big-m { font: 700 20px/1 Consolas, monospace; color: var(--gold); min-width: 3.4em; }

/* ---------------------------------------------------- small screens */
@media (max-width: 900px) {
  .nc-info { max-height: 46vh; }
  .nc-big-m { font-size: 17px; }
  .nc-sep { display: none; } /* the strip wraps anyway; a floating tick looks lost */
}
/* finger-first targets — only OUR classes; .wx-controls belongs to screens.css
   and restyling it from here would silently reshape every other wing */
@media (pointer: coarse) {
  .nc-read button, .nc-go { min-height: 38px; }
}