/* ==========================================================================
   Play Sudoku — game styles + design tokens
   Aesthetic: fine printed puzzle. Ink givens, cobalt player entries, paper grid.
   ========================================================================== */

:root {
  /* Paper + ink palette */
  --paper:        #eef1f6;
  --paper-deep:   #e4e8f0;
  --board-bg:     #ffffff;
  --ink:          #1b2231;   /* givens, headings, thick grid lines */
  --ink-soft:     #5a6478;
  --ink-faint:    #8a93a6;

  /* Cobalt — the player's pen */
  --pen:          #2f4fe0;
  --pen-deep:     #1f37ad;
  --pen-wash:     #e6ebfc;   /* peer row/col/box */
  --pen-wash-2:   #d4ddfa;   /* same number */
  --pen-sel:      #c3cffb;   /* selected cell */

  --warn:         #d23b34;
  --warn-wash:    #fbe3e2;
  --success:      #1a9d6a;
  --amber:        #e39a13;

  --line:         #d3d9e4;   /* thin cell lines */
  --line-bold:    var(--ink);

  --radius:       14px;
  --radius-sm:    9px;
  --shadow:       0 1px 0 rgba(27,34,49,.04), 0 18px 40px -24px rgba(27,34,49,.45);

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------------------ */
/*  App shell                                                         */
/* ------------------------------------------------------------------ */
.sk-app {
  --cell: clamp(34px, 10.5vw, 52px);
  width: 100%;
  max-width: calc(var(--cell) * 9 + 8px);
  margin-inline: auto;
  font-family: var(--font-body);
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
}

/* ------------------------------------------------------------------ */
/*  Status bar                                                        */
/* ------------------------------------------------------------------ */
.sk-statusbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}
.sk-diff { display: flex; flex-direction: column; line-height: 1.1; }
.sk-diff__label {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.sk-diff__value {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600; color: var(--ink);
}
.sk-meta { display: flex; align-items: center; gap: 14px; }
.sk-mistakes {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink-soft); font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: .95rem;
}
.sk-mistakes svg { color: var(--ink-faint); }
.sk-timer {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem; font-weight: 600; letter-spacing: .01em;
  min-width: 3.2ch; text-align: right;
}
.sk-pausebtn {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--board-bg); color: var(--ink-soft);
  cursor: pointer; transition: border-color .15s, color .15s, transform .1s;
}
.sk-pausebtn:hover { border-color: var(--pen); color: var(--pen); }
.sk-pausebtn:active { transform: scale(.94); }

/* ------------------------------------------------------------------ */
/*  Board                                                             */
/* ------------------------------------------------------------------ */
.sk-boardwrap { position: relative; }
.sk-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--board-bg);
  border: 3px solid var(--line-bold);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.sk-cell {
  position: relative;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-display);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  transition: background-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.sk-cell:nth-child(9n) { border-right: 0; }
.sk-cell.sk-cell--br { border-right: 2.5px solid var(--line-bold); }
.sk-cell.sk-cell--bb { border-bottom: 2.5px solid var(--line-bold); }

.sk-cell__val {
  font-size: calc(var(--cell) * .58);
  font-weight: 500;
  line-height: 1;
  color: var(--pen);            /* player entries: cobalt */
}
.sk-cell.is-given .sk-cell__val {
  color: var(--ink);            /* givens: solid ink, heavier */
  font-weight: 700;
}
.sk-cell:not(.is-empty):not(.is-given) .sk-cell__val { animation: sk-ink .18s ease; }
@keyframes sk-ink { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.sk-cell.is-wrong .sk-cell__val { color: var(--warn); }
.sk-cell.is-wrong { background: var(--warn-wash); }

/* Highlights */
.sk-cell.is-peer     { background: var(--pen-wash); }
.sk-cell.is-same     { background: var(--pen-wash-2); }
.sk-cell.is-selected { background: var(--pen-sel); }
.sk-cell.is-same .sk-cell__val { text-decoration: underline; text-underline-offset: 3px; }
.sk-cell.is-hinted { animation: sk-hint .6s ease; }
@keyframes sk-hint {
  0%, 100% { background: var(--board-bg); }
  35% { background: #fdeec6; box-shadow: inset 0 0 0 2px var(--amber); }
}

/* Pencil notes — mini 3×3 */
.sk-cell__notes {
  position: absolute; inset: 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  pointer-events: none;
}
.sk-note {
  display: grid; place-items: center;
  font-size: calc(var(--cell) * .25);
  font-family: var(--font-body);
  color: var(--ink-faint);
  line-height: 1;
}

/* Pause overlay */
.sk-pause-overlay {
  position: absolute; inset: 0;
  display: none; place-items: center;
  background: color-mix(in srgb, var(--board-bg) 86%, transparent);
  backdrop-filter: blur(7px);
  border-radius: var(--radius);
}
.sk-app.is-paused .sk-pause-overlay { display: grid; }
.sk-app.is-paused .sk-cell__val,
.sk-app.is-paused .sk-cell__notes { visibility: hidden; }
.sk-resume {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border: 0; border-radius: 999px;
  background: var(--ink); color: #fff; font-family: var(--font-display);
  font-size: 1rem; font-weight: 600; cursor: pointer;
}

/* ------------------------------------------------------------------ */
/*  Action row                                                        */
/* ------------------------------------------------------------------ */
.sk-actions {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-top: 16px;
}
.sk-action {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 4px 9px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--board-bg); color: var(--ink-soft);
  cursor: pointer; font-family: var(--font-body);
  transition: border-color .15s, color .15s, background-color .15s, transform .08s;
}
.sk-action:hover { border-color: var(--pen); color: var(--pen); }
.sk-action:active { transform: translateY(1px); }
.sk-action__label { font-size: .76rem; font-weight: 600; }
.sk-action.is-active { background: var(--pen); border-color: var(--pen); color: #fff; }
.sk-notes-state {
  font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; opacity: .8; margin-top: -3px;
}

/* ------------------------------------------------------------------ */
/*  Number pad                                                        */
/* ------------------------------------------------------------------ */
.sk-pad {
  display: grid; grid-template-columns: repeat(9, 1fr);
  gap: 6px; margin-top: 10px;
}
.sk-padbtn {
  position: relative;
  aspect-ratio: 1 / 1.25;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--board-bg); color: var(--ink);
  font-family: var(--font-display); cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .12s, background-color .12s, transform .08s, color .12s;
}
.sk-padbtn__n { font-size: clamp(1.1rem, 4.4vw, 1.5rem); font-weight: 600; }
.sk-padbtn__count {
  position: absolute; top: 3px; right: 5px;
  font-family: var(--font-body); font-size: .58rem; font-weight: 700;
  color: var(--ink-faint);
}
.sk-padbtn:hover { border-color: var(--pen); color: var(--pen); }
.sk-padbtn:active { transform: translateY(1px); }
.sk-padbtn.is-done { opacity: .32; }

/* ------------------------------------------------------------------ */
/*  Footer / new game                                                 */
/* ------------------------------------------------------------------ */
.sk-foot { margin-top: 16px; }
.sk-newbtn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px; border: 0; border-radius: var(--radius-sm);
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  cursor: pointer; transition: background-color .15s, transform .08s;
}
.sk-newbtn:hover { background: var(--pen-deep); }
.sk-newbtn:active { transform: translateY(1px); }

/* ------------------------------------------------------------------ */
/*  Difficulty menu + win modal (overlays inside the app)             */
/* ------------------------------------------------------------------ */
.sk-menu, .sk-win {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--ink) 44%, transparent);
  backdrop-filter: blur(3px);
  animation: sk-fade .18s ease;
}
@keyframes sk-fade { from { opacity: 0; } to { opacity: 1; } }
.sk-menu__inner, .sk-win__inner {
  width: min(92vw, 380px);
  background: var(--board-bg);
  border-radius: 20px;
  padding: 26px 22px;
  box-shadow: 0 30px 80px -30px rgba(27,34,49,.6);
  animation: sk-pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes sk-pop { from { transform: translateY(12px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

.sk-menu__title {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  margin: 0 0 16px; text-align: center;
}
.sk-menu__opt {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; margin-bottom: 9px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--board-bg); cursor: pointer;
  transition: border-color .14s, background-color .14s;
}
.sk-menu__opt:hover { border-color: var(--pen); background: var(--pen-wash); }
.sk-menu__name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.sk-menu__best { font-size: .8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sk-menu__cancel {
  width: 100%; margin-top: 6px; padding: 12px;
  border: 0; background: none; color: var(--ink-soft);
  font-family: var(--font-body); font-weight: 600; font-size: .92rem; cursor: pointer;
}
.sk-menu__cancel:hover { color: var(--ink); }

/* Win */
.sk-win__inner { text-align: center; }
.sk-win__mark {
  width: 64px; height: 64px; margin: 0 auto 14px;
  display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--success) 14%, #fff); color: var(--success);
  animation: sk-pop-mark .4s cubic-bezier(.2,.9,.3,1.4) .05s both;
}
@keyframes sk-pop-mark { from { transform: scale(0); } to { transform: none; } }
.sk-win__mark svg { width: 34px; height: 34px; }
.sk-win__title { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; margin: 0 0 4px; }
.sk-win__sub { margin: 0 0 18px; color: var(--ink-soft); }
.sk-win__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 0 0 20px;
}
.sk-win__stats > div {
  background: var(--paper); border-radius: var(--radius-sm); padding: 12px 6px;
}
.sk-win__stats dt {
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-bottom: 4px;
}
.sk-win__stats dd {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.sk-win__btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px; border: 0; border-radius: var(--radius-sm);
  background: var(--ink); color: #fff; font-family: var(--font-display);
  font-size: 1rem; font-weight: 600; cursor: pointer;
}
.sk-win__btn:hover { background: var(--pen-deep); }

[hidden] { display: none !important; }

/* ------------------------------------------------------------------ */
/*  Focus + motion + responsive                                       */
/* ------------------------------------------------------------------ */
.sk-cell:focus-visible,
.sk-padbtn:focus-visible,
.sk-action:focus-visible,
.sk-newbtn:focus-visible,
.sk-menu__opt:focus-visible {
  outline: 3px solid var(--pen);
  outline-offset: 2px;
  z-index: 2;
}

@media (min-width: 760px) {
  .sk-app { --cell: 56px; }
  .sk-action__label { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Rank / XP progression
   ========================================================================== */
.sk-rank {
  margin: 10px 0 14px;
  padding: 11px 13px;
  background: var(--board-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 rgba(27,34,49,.03);
}
.sk-rank__main {
  display: flex;
  align-items: center;
  gap: 11px;
}
.sk-rank__badge {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--pen);
  background: var(--pen-wash);
  border-radius: 10px;
}
.sk-rank__badge svg { width: 22px; height: 22px; }
.sk-rank__lv {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--ink);
  border: 2px solid var(--board-bg);
  border-radius: 9px;
}
.sk-rank__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.sk-rank__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -.01em;
}
.sk-rank__sub {
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sk-rank__streak {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px 4px 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--amber);
  background: #fdf3df;
  border-radius: 999px;
}
.sk-rank__streak svg { width: 15px; height: 15px; }
.sk-rank__track {
  margin-top: 10px;
  height: 7px;
  background: var(--paper-deep);
  border-radius: 999px;
  overflow: hidden;
}
.sk-rank__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--pen), var(--pen-deep));
  border-radius: 999px;
  transition: width .6s cubic-bezier(.22,.61,.36,1);
}

/* Win modal — XP + rank-up */
.sk-win__rankup {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 2px auto 4px;
  padding: 6px 13px;
  font-size: 13.5px;
  color: var(--pen-deep);
  background: var(--pen-wash);
  border-radius: 999px;
}
.sk-win__rankup svg { width: 17px; height: 17px; color: var(--pen); }
.sk-win__xp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 12px 0 4px;
}
.sk-win__xp-amt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  color: var(--pen);
  letter-spacing: -.02em;
}
.sk-win__xp-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-faint);
}
.sk-win__breakdown {
  margin: 4px auto 2px;
  max-width: 280px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  .sk-rank__fill { transition: none; }
}