/* Number Nibbles - everything specific to the sudoku; the shared look
   comes from /theme.e741e714.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; }

/* Every block is the theme's play column wide and centres itself,
   because the screen column does not. */
.nn-settings-card, .nn-howto-card, .hud, .nn-board, .nn-pad, .game-foot, .party-strip, .invite-card {
  width: var(--play-w);
  margin-inline: auto;
}

.nn-tag-line {
  margin: -10px 0 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(--play-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;
}
.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); }
.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); }

/* 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(--cell-peer); }
.nn-cell.same { background: var(--cell-match); }
/* The selected cell is a quiet pink in light and a deep one in dark, and
   the fill alone says it is selected: the digit keeps its own colour, so
   mint still says yours-and-right, ink still says given, red still says
   wrong. */
/* The selection, and the selection through a lesson's washes (the second
   pair outranks the wash rules). */
.nn-cell.sel, .nn-cell.sel.hint-focus, .nn-cell.sel.hint-cause {
  background: linear-gradient(160deg, var(--cell-sel), var(--cell-sel-2));
}
/* Pencil marks are the exception: their --ink-soft grey sank into the
   fill at 1.74, so they wear the cell's ink. The marks inherit it, so a
   lesson's hot, ghost and struck marks keep their own colours. */
.nn-cell.sel .nn-marks { color: var(--cell-sel-ink); }
/* A lesson's ghost and struck marks on the selected cell keep their
   colours on a chip of the plain face, so they read as they do on every
   other cell (the hot mark has a chip of its own already). */
.nn-cell.sel .nn-marks .nn-ghost,
.nn-cell.sel .nn-marks .nn-strike { background: var(--surface-3); border-radius: 4px; }
.nn-cell.wrong { color: var(--wrong); 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(--play-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;
}
.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); }

/* ------------------------------------------------------------- win card
   Every sudoku modal (win, fail, daily, stats, learn, confirm, party
   results) sits on the theme's .modal-veil. */

.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(--play-w);
  margin-inline: auto;
}

/* The theme's quiet candy bubble, sat above the board. */
.nn-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  cursor: pointer;
  text-align: center;
}
/* 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(--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: 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;
}

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

/* Both sit on the theme's .board-veil. */
.nn-rolling { color: var(--ink-soft); }
.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;
}
.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, .setup-play, .nn-setup-actions { width: var(--play-w); margin-inline: auto; }
.setup-play { display: block; }   /* an id would outrank the theme's invite-mode hide */
/* Daily and stats share the play button's width between them, rather
   than sitting as two small buttons in the middle of it. */
.nn-setup-actions .foot-button { flex: 1; justify-content: center; padding-block: 12px; }


/* Landing on an invite link (/n/CODE) strips the setup screen down to the
   join essentials. The kit's chrome is hidden by theme.css; the settings
   card and the daily/stats pair are this file's to hide. */
body.inviting #nn-settings-home,
body.inviting .nn-howto-card,
body.inviting .nn-setup-actions { display: none; }

/* Party results: the standings (theme .lobby-player rows) inside the win
   card, which therefore stretches its children rather than centring them. */
.nn-presults-card { align-items: stretch; }

/* The how-to is a drawer in its own card under the settings (which
   travel to the lobby without it): a summary line that opens into
   sections under field labels, readable ink on white. */
.nn-howto summary {
  font-size: 14px;
  font-weight: 800;
  color: var(--pink-deep);
  cursor: pointer;
  list-style: none;
  text-align: center;
  padding: 4px;
}
.nn-howto summary::-webkit-details-marker { display: none; }
.nn-howto[open] summary { margin-bottom: 12px; }
.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 { --play-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 { 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; --play-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; }
  .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); }
  }
}