/* melody.games · 1234 sudoku — same paper / Morandi vibe as the picturebook,
   with bright per-digit accents so each number is a memorable spot color. */

:root {
  --paper:        #efe7d4;
  --paper-2:      #e3d8bf;
  --paper-card:   #fffaf0;

  --ink:          #2a3554;
  --ink-2:        #4d5072;
  --ink-3:        #8b8aa0;

  --blue:         #5a6c8d;
  --mauve:        #8378a3;
  --sage:         #6f8c5a;
  --butter:       #c9a64a;
  --coral:        #c47b5a;
  --brown:        #8a6849;
  --muted:        #7a7058;

  /* per-digit accents — slightly brighter than the muted palette so kids
     can recognise a digit by colour from across the room. */
  --d1: #5d9c47;   --d1-pale: #dfeed3;   /* sage */
  --d2: #d9a13a;   --d2-pale: #f7e6b7;   /* butter */
  --d3: #d36e4a;   --d3-pale: #f6d2c0;   /* coral */
  --d4: #4a6fa8;   --d4-pale: #d2deef;   /* blue */

  --font-display: 'Yeseva One', 'ZCOOL XiaoWei', serif;
  --font-body:    'Nunito', 'Noto Sans SC', system-ui, sans-serif;
  --font-cn:      'ZCOOL XiaoWei', 'Ma Shan Zheng', serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
button { font: inherit; color: inherit; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
  padding-bottom: 40px;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

.paper-grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .45;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(0,0,0,.04) 1px, transparent 2px),
    radial-gradient(circle at 70% 55%, rgba(120,80,30,.03) 1px, transparent 2px),
    radial-gradient(circle at 40% 84%, rgba(0,0,0,.035) 1px, transparent 2px);
  background-size: 220px 220px, 180px 180px, 240px 240px;
  mix-blend-mode: multiply;
}

/* ====== Header ====== */
.site-header {
  position: relative;
  z-index: 5;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(42,53,84,.10);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { width: 36px; height: 36px; display: block; flex: 0 0 36px; }
.brand-name {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: .2px;
}
.brand-tagline {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 1.5px;
  margin-top: 4px;
}

.diff-nav {
  display: flex;
  gap: 4px;
  background: rgba(42,53,84,.08);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 3px;
  flex: 0 0 auto;
}
.diff-btn {
  font-family: var(--font-cn);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: background .15s, color .15s;
}
.diff-btn:hover:not(.active) { background: rgba(42,53,84,.10); }
.diff-btn.active { background: var(--ink); color: var(--paper-card); }

/* ====== Board ====== */
.board-wrap {
  position: relative;
  z-index: 5;
  max-width: 420px;
  margin: 0 auto;
  padding: 28px 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.status {
  font-family: var(--font-cn);
  font-size: 18px;
  color: var(--ink-2);
  letter-spacing: 1px;
  min-height: 24px;
  text-align: center;
}
.status.win { color: var(--sage); font-weight: 700; }

.board {
  width: min(360px, 86vw);
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0;
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 10px;
  padding: 3px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 6px 18px rgba(42,53,84,.18);
  touch-action: none;  /* drag uses pointer events */
}

.cell {
  background: var(--paper-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(32px, 9vw, 44px);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background .15s, transform .12s;
}
/* 2x2 box separators */
.cell[data-r="0"], .cell[data-r="2"] { border-bottom: 1px solid rgba(42,53,84,.18); }
.cell[data-r="1"] { border-bottom: 3px solid var(--ink); }
.cell[data-c="0"], .cell[data-c="2"] { border-right: 1px solid rgba(42,53,84,.18); }
.cell[data-c="1"] { border-right: 3px solid var(--ink); }

/* ====== Four cell states ====== */

/* GIVEN — locked, printed-on-paper feel */
.cell.given { background: var(--paper-2); font-weight: 800; cursor: default; }

/* EMPTY — dashed inner outline says "fill me" */
.cell.empty { background: var(--paper-card); }
.cell.empty::after {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1.5px dashed rgba(42,53,84,.16);
  border-radius: 7px;
  pointer-events: none;
}

/* RIGHT — your answer, matches the solution */
.cell.correct { background: #e6f0d8; }

/* WRONG — your answer, doesn't match the solution */
.cell.wrong {
  background: #fadcd0;
  color: var(--coral);
  font-weight: 700;
}

/* per-digit accent colours — applied to given + correct cells */
.cell.d1 { color: var(--d1); }
.cell.d2 { color: var(--d2); }
.cell.d3 { color: var(--d3); }
.cell.d4 { color: var(--d4); }

/* ====== Focus-only helpers (only active when focused === true) ====== */
/* These win over state backgrounds by being declared later. */
.cell.peer { background: #f5ebd2; }
.cell.same { background: #e4ddde; }
.cell.selected { background: #fff3c9; }
.cell.given.peer     { background: #d9c9a7; }
.cell.given.same     { background: #cabba9; }
.cell.given.selected { background: #ebdfae; }

/* drag-over highlight: dashed outline in the drag digit's colour */
.board.dragging .cell.drop-target {
  outline: 3px dashed var(--drag, var(--ink));
  outline-offset: -6px;
  background: var(--drag-pale, var(--paper-card));
  transform: scale(1.03);
}

/* win celebration: each cell pops in a wave, staggered via inline delay */
@keyframes cell-bounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22); }
  65%  { transform: scale(.94); }
  100% { transform: scale(1); }
}
.cell.bounce { animation: cell-bounce .6s cubic-bezier(.34,1.56,.64,1) both; }

/* falling confetti pieces — colour and motion vars set per-piece in JS */
.confetti {
  position: fixed;
  pointer-events: none;
  z-index: 50;
  top: -6vh;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  will-change: transform, opacity;
}
@keyframes confetti-fall {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx, 0), 120vh) rotate(var(--rot, 360deg)); opacity: .85; }
}

/* ====== Number pad ====== */
.pad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  width: min(360px, 86vw);
  touch-action: none;
}
.pad-btn {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  padding: 16px 0;
  border-radius: 14px;
  border: 2px solid currentColor;
  cursor: grab;
  transition: transform .1s, box-shadow .12s, opacity .12s;
  user-select: none;
  -webkit-user-drag: none;
  position: relative;
}
.pad-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 0 rgba(42,53,84,.18); }
.pad-btn:active { cursor: grabbing; transform: translateY(0); }
.pad-btn.dragging-origin { opacity: .35; transform: scale(.95); box-shadow: none; }

.pad-btn[data-n="1"] { color: var(--d1); background: var(--d1-pale); }
.pad-btn[data-n="2"] { color: var(--d2); background: var(--d2-pale); }
.pad-btn[data-n="3"] { color: var(--d3); background: var(--d3-pale); }
.pad-btn[data-n="4"] { color: var(--d4); background: var(--d4-pale); }
.pad-btn.erase {
  color: var(--ink-2);
  background: var(--paper-card);
  border-color: var(--ink-2);
  font-size: 26px;
}

/* floating ghost tile that follows the pointer during drag */
.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  border: 2px solid currentColor;
  transform: translate(-50%, -50%) scale(1.1) rotate(-3deg);
  box-shadow: 0 10px 28px rgba(42,53,84,.28);
  opacity: .96;
}

/* ====== Controls ====== */
.controls { display: flex; gap: 10px; }
.ctrl-btn {
  font-family: var(--font-cn);
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--paper-card);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 9px 24px;
  cursor: pointer;
  transition: background .15s;
}
.ctrl-btn:hover { background: var(--ink-2); }

/* ====== Footer ====== */
.site-footer {
  position: relative;
  z-index: 5;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
}
.site-footer .dot { opacity: .6; }

@media (max-width: 480px) {
  .site-header { padding: 14px 18px; }
  .brand-name { font-size: 18px; }
  .board-wrap { padding-top: 18px; gap: 16px; }
  .pad-btn { font-size: 24px; padding: 14px 0; }
}