/* 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: 13.5px;
  color: var(--ink);
}
.nn-depth-legend li { padding: 4px 10px; border-radius: 10px; 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: 999px;
  background: var(--tint-lavender); color: #6f5bd0; 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: 18px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(240, 97, 154, .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: #e5484d; background: var(--tint-pink-2); }
.nn-cell.hinted { animation: nn-glow 1.2s ease; }

@keyframes nn-glow {
  0% { background: var(--gold, #ffe27a); }
  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: 29px;
  line-height: 1.1;
  color: var(--pink-deep);
  background: var(--surface-3);
  border: 2px solid var(--pink-soft);
  border-radius: 12px;
  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: 24px; 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(--lemon);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 6px 16px rgba(240, 200, 90, .25);
}
.nn-cell.hint-focus { background: var(--tint-lemon); }
.nn-cell.hint-cause { background: var(--tint-lavender); }   /* the technique's evidence */

/* 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: #8a7bd8;
  font-weight: 800;
  background: #e3d8ff;
  border-radius: 4px;
}
.nn-marks span.nn-ghost { color: #b3a3e6; font-weight: 800; }
.nn-marks span.nn-strike {
  color: #e2a3b8;
  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: 18px;
}
.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: 17px; 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: 10px;
  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: 999px;
  padding: 4px 11px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft);
}
.nn-pill.me { border-color: var(--pink); color: var(--ink); }
.nn-pill b { color: var(--pink-deep); }
.nn-pill.is-out { opacity: .5; }
.nn-pill.is-done { border-color: var(--mint-deep); 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: 14px;
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.nn-pr-row.winner { border-color: var(--lemon); background: var(--tint-lemon); }
.nn-pr-row .nn-pr-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nn-pr-row .nn-pr-note { font-size: 12.5px; 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: 30px; }
  .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); }
  }
}