/* Number Nibbles - everything specific to the sudoku; the shared look
   comes from /theme.css, loaded before this file. */

/* The cute hero lives on the setup screen (every viewport); the game
   screen carries no header at all - the whole board fits the fold. */
.hero .mascot { cursor: pointer; }

/* One shared width, viewport minus the app's side padding - and every block
   centres itself, because the screen column does not. */
:root { --nn-w: min(100vw - 32px, 420px); }
.nn-settings-card, .nn-hud-zone, .nn-board, .nn-pad, .nn-actions {
  width: var(--nn-w);
  margin-inline: auto;
}

.nn-hud-zone { display: flex; flex-direction: column; gap: 4px; }
.nn-tag-line {
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}

.nn-settings-card .chips { justify-content: center; }
.nn-howto .chips { margin: 4px 0 6px; align-items: center; }
.nn-depth-legend {
  list-style: none; margin: 0; padding: 0; font-size: 14px;
  color: var(--ink);
}
.nn-depth-legend li { padding: 4px 10px; border-radius: var(--r-xs); line-height: 1.4; }
/* The legends sit on a white card now, so the highlight is a pink wash. */
.nn-depth-legend li.is-on { background: var(--tint-pink-2); color: inherit; }
#nn-learn-btn {
  display: block; margin: 8px auto 0; border: 0; border-radius: var(--r-pill);
  background: var(--tint-lavender); color: var(--lavender-press); font-weight: 800;
  padding: 4px 14px; cursor: pointer; font-size: 14px;
}
.nn-learn-card { max-width: 480px; text-align: left; }
.nn-learn-card p { margin: 10px 0; line-height: 1.5; }
.nn-learn-card .text-button { text-align: center; margin: 0; }

/* The stats bar became the shared kit HUD (theme.css): score pill, clock
   ring, slips pill - the same silhouette the word game wears. */

/* The screen-filling slack layout comes from theme.css (.game-screen /
   .game-area). The game area is the board and its pad, together. */
.nn-game-area { display: flex; flex-direction: column; gap: 14px; width: 100%; }

/* ----------------------------------------------------------------- board */

.nn-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  background: var(--surface-3);
  border: 3px solid var(--pink);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(var(--pink-glow), .14);
  touch-action: manipulation;
}

.nn-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--nn-w) / 18);
  font-weight: 800;
  /* Your digits wear mint (the same 'correct' colour the word game uses);
     pink sat far too close to the mistake red. */
  color: var(--mint-deep);
  border-right: 1px solid var(--edge-soft);
  border-bottom: 1px solid var(--edge-soft);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.nn-cell:nth-child(9n) { border-right: none; }
.nn-cell:nth-child(n+73) { border-bottom: none; }
/* Chunky 3x3 box walls. */
.nn-cell:nth-child(3n):not(:nth-child(9n)) { border-right: 2px solid var(--pink-soft); }
.nn-cell:nth-child(n+19):nth-child(-n+27),
.nn-cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid var(--pink-soft); }

/* Digits sit in their own span: the placement pop scales the number, never
   the cell and its borders - and the number gets a little air around it. */
.nn-digit {
  line-height: 1;
  transform: scale(var(--js, 1)) rotate(var(--jr, 0deg));
}

.nn-cell.given { color: var(--ink); cursor: default; }
.nn-cell.peer { background: var(--tint-pink); }
.nn-cell.same { background: var(--tint-pink-2); }
.nn-cell.sel { background: var(--pink-soft); }
.nn-cell.wrong { color: var(--danger); background: var(--tint-pink-2); }
.nn-cell.hinted { animation: nn-glow 1.2s ease; }

@keyframes nn-glow {
  0% { background: var(--hint); }
  100% { background: transparent; }
}

/* Pencil marks: a tiny 3x3 grid inside the cell. */
.nn-marks {
  position: absolute;
  inset: 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  font-size: calc(var(--nn-w) / 45);
  font-weight: 700;
  color: var(--ink-soft);
  pointer-events: none;
}
.nn-marks span { display: flex; align-items: center; justify-content: center; }

/* ------------------------------------------------------------ number pad */

/* Two rows of six: the nine digits plus erase, pencil and undo. */
.nn-pad {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.nn-key {
  font: inherit;
  font-weight: 800;
  font-size: 27px;
  line-height: 1.1;
  color: var(--pink-deep);
  background: var(--surface-3);
  border: 2px solid var(--pink-soft);
  border-radius: var(--r-md);
  padding: 7px 0 4px;
  min-height: 60px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  -webkit-tap-highlight-color: transparent;
}
.nn-key small { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.nn-key:disabled { opacity: .35; cursor: default; }
.nn-key.armed { background: var(--pink-soft); }
.nn-tool span { font-size: 23px; }
.nn-tool.on { background: var(--pink-soft); }

.nn-actions {
  display: flex;
  gap: calc(10px * var(--foot-fit, 1));
  justify-content: center;
}
.nn-actions .foot-button.on { background: var(--pink-soft); }

/* ------------------------------------------------------------- win veil */

.nn-veil {
  position: fixed;
  inset: 0;
  background: var(--veil);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  padding: 20px;
}
.nn-win-card { text-align: center; align-items: center; max-width: 340px; }
.nn-win-mascot { font-size: 52px; line-height: 1.1; }
.nn-win-title { margin: 0; font-size: 22px; color: var(--pink-deep); }


/* ------------------------------------------------------------ hint bubble
   The bubble floats above the board (over the stats bar) instead of taking
   part in layout - a hint must never shove the board mid-tap. */

.nn-board-zone {
  position: relative;
  width: var(--nn-w);
  margin-inline: auto;
}

.nn-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  cursor: pointer;
  background: var(--surface-3);
  border: 2px solid var(--hint);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 6px 16px rgba(var(--lavender-glow), .25);
}
/* Lavender is the hint colour here too - the word game learned first that
   amber hints and an amber clock read as the same warning. The evidence
   cells wash sky, so the hint and its reasons never blur together. */
.nn-cell.hint-focus { background: var(--tint-lavender); }
.nn-cell.hint-cause { background: var(--tint-sky); }

/* Hint candidates: the player's own matching pencil marks light up hot;
   digits the technique needs but the player never marked appear as ghosts.
   Unrelated candidates are never revealed. */
.nn-marks span.nn-mark-hot {
  color: var(--lavender-press);
  font-weight: 800;
  background: var(--lavender-soft);
  border-radius: 4px;
}
.nn-marks span.nn-ghost { color: var(--lavender-deep); font-weight: 800; }
.nn-marks span.nn-strike {
  color: var(--pink);
  font-weight: 800;
  text-decoration: line-through 2px;
  opacity: 0.85;
}

/* Selection must stay visible through a lesson's washes. */
.nn-cell.sel.hint-focus, .nn-cell.sel.hint-cause { background: var(--pink-soft); }

/* --------------------------------------------------------------- rolling */

.nn-rolling {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  color: var(--ink-soft);
  background: var(--veil);
  backdrop-filter: blur(4px);
  border-radius: var(--r-lg);
}
.nn-rolling span { font-size: 44px; animation: bob 1s ease-in-out infinite; }

/* -------------------------------------------------------------- calendar */

.nn-cal-card, .nn-stats-card { width: min(94vw, 380px); text-align: center; align-items: stretch; }
.nn-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nn-cal-title { display: flex; flex-direction: column; }
.nn-cal-title b { font-size: 16px; color: var(--ink); }
.nn-cal-title small { font-size: 12px; color: var(--ink-soft); }
.nn-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.nn-cal-days span { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.nn-day {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: var(--r-xs);
  background: var(--tint-pink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.nn-day.blank { background: none; cursor: default; }
.nn-day.done { background: var(--pink-soft); }
.nn-day.today { border-color: var(--pink); }
.nn-day:disabled { opacity: .35; cursor: default; }

/* ----------------------------------------------------------------- stats */

.nn-stats-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 2px;
  border-bottom: 1px dashed var(--pink-soft);
  font-size: 13px;
  color: var(--ink-soft);
}
.nn-stats-row:last-child { border-bottom: none; }
.nn-stats-row .nn-sr-name { font-weight: 800; color: var(--ink); width: 104px; text-align: left; }
.nn-stats-row b { color: var(--ink); }
.nn-stats-row .nn-sr-item { margin-left: auto; }
.nn-stats-row .nn-sr-item:first-of-type { margin-left: 0; }

/* ------------------------------------------------------------ party ---
   The play-together UI. The identity, lobby and invite widgets themselves
   (.name-input, .emoji-btn, .party-code-big, .lobby-player, .kick-btn,
   .invite-card...) live in theme.css, shared with the word game. */

#nn-screen-setup .card-quiet, #nn-play, .nn-setup-actions { width: var(--nn-w); margin-inline: auto; }
#nn-play { display: block; }


/* Landing on an invite link (/n/CODE) strips the setup screen down to the
   join essentials - the same treatment the word game gives /p/CODE. */
.invite-card { width: var(--nn-w); margin-inline: auto; }
body.inviting .nn-settings-card,
body.inviting #nn-play,
body.inviting .nn-setup-actions,
body.inviting #nn-host,
body.inviting #nn-join-code,
body.inviting .card-quiet > .field-label,
body.inviting .card-quiet > .hint-text:not(.error) { display: none; }
body.inviting #nn-join { flex: 1; }

/* The countdown before a party round opens - the rolling overlay,
   re-dressed with a big popping number. */
.nn-count { gap: 2px; }
.nn-count span {
  font-size: 64px;
  animation: none;
  color: var(--pink-deep);
  text-shadow: 0 3px 0 var(--emboss);
}

/* Live rivals/teammates above the board. */
.nn-party-strip {
  width: var(--nn-w);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.nn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  padding: 4px 11px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft);
}
.nn-pill.me { border-color: var(--me); color: var(--ink); }
.nn-pill b { color: var(--pink-deep); }
.nn-pill.is-out { opacity: .5; }
.nn-pill.is-done { border-color: var(--correct); background: var(--tint-mint); }

/* Party results: the standings list inside the win card. */
.nn-presults-card { align-items: stretch; }
.nn-pr-standings { display: flex; flex-direction: column; gap: 6px; }

.nn-pr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-3);
  border: 2px solid var(--pink-soft);
  border-radius: var(--r-md);
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.nn-pr-row.winner { border-color: var(--gold); background: var(--tint-gold); }
.nn-pr-row .nn-pr-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nn-pr-row .nn-pr-note { font-size: 13px; color: var(--ink-soft); font-weight: 700; }

/* The how-to lives inside the settings card like the word game's More
   options drawer, sectioned by field labels - readable ink on white. */
.nn-howto-body {
  text-align: left;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 12px;
}
.nn-howto-body p { margin: 0; }
.nn-howto-body b { color: var(--ink); }

/* Keyboard hints exist only on wide screens. */
.nn-kbd { display: none; }

/* ------------------------------------------------------------- desktop ---
   A phone is one tight column; a desktop game screen gets the board big on
   the left and a proper side panel: stats, a 3x3 numpad with the tools as
   its fourth row, and keyboard hints. */

@media (min-width: 940px) {
  #app { max-width: 960px; }

  /* Only the game screen earns the wide two-column layout. The setup and
     lobby keep the word game's 520px column, so the two games' menus and
     lobbies look like siblings - consistency over cleverness. */
  :root { --nn-w: 520px; }
  #nn-screen-setup.is-active,
  #nn-screen-lobby.is-active {
    width: min(100%, 520px);
    margin-inline: auto;
  }
  /* Six tiers wrap 3+3 instead of 5 plus one lonely stretched straggler. */
  #nn-difficulty .chip, #nn-party-difficulty .chip { flex: 1 1 30%; }

  /* The game screen keeps the one shared template even on desktop - HUD
     at the top, buttons docked at the bottom - and only the game AREA
     goes two-column: board on the left, pad and keyboard hints right. */
  .nn-game-area {
    display: grid;
    grid-template-columns: 520px 360px;
    /* Flexible rows either side centre the pad and kbd hint against the
       board instead of pinning them to its top edge. */
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      "board ."
      "board pad"
      "board kbd"
      "board .";
    justify-content: center;
    align-items: start;
    column-gap: 44px;
    row-gap: 14px;
  }
  .nn-board-zone { grid-area: board; --nn-w: 520px; width: 520px; }
  .nn-pad { grid-area: pad; width: 100%; margin-inline: 0; }
  .nn-kbd {
    display: block;
    grid-area: kbd;
    text-align: center;
    font-size: 12px;
    color: var(--ink-soft);
    margin: 0;
  }
  .nn-kbd b { color: var(--ink); }

  /* The proper numpad: 1-2-3 / 4-5-6 / 7-8-9, tools underneath. */
  .nn-pad { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .nn-key { min-height: 62px; font-size: 27px; }
  .nn-tool span { font-size: 24px; }

  /* Desktop nicety: squares light up under the mouse. */
  @media (hover: hover) {
    .nn-cell:not(.given):hover { background: var(--pink-soft); }
    .nn-key:not(:disabled):hover { border-color: var(--pink); }
    .nn-day:not(:disabled):not(.blank):hover { border-color: var(--pink); }
  }
}