/* /sudoku/ — board, pad and overlays. Page frame, mode tabs and section boxes
   come from games.css; everything here reads the site tokens. Shared by all locales. */

.sudoku-play { text-align: center; }
.sudoku-play > h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text);
}
.sudoku-sub { max-inline-size: 60ch; margin-inline: auto !important; color: var(--text-muted); text-wrap: pretty; }
.sudoku-mode-tab i { margin-inline-end: 0.35em; }

.sudoku-play { max-inline-size: 100%; min-inline-size: 0; }
.sudoku-mode-tabs { max-inline-size: 100%; }
.sudoku-card { padding: var(--space-4) !important; }
@media (max-width: 599px) { .sudoku-card { padding: var(--space-2) !important; } }
/* In the play layer the board floats on the layer backdrop. */
html.play-open .sudoku-play { inline-size: min(1100px, calc(100vw - 2 * var(--gutter))) !important; }
html.play-open .sudoku-card { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
html.play-open .sudoku-card::before, html.play-open .sudoku-card::after { display: none !important; }
.sudoku-stage { position: relative; inline-size: 100%; margin-inline: auto; }
.sudoku-stage, .sudoku-stage * { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.sudoku-stage button { font: inherit; touch-action: manipulation; }

.sd-root {
  --sd-line: color-mix(in oklab, var(--accent) 45%, var(--border-strong));
  --sd-cell: color-mix(in oklab, var(--bg) 70%, var(--surface-2));
  --sd-user: var(--cyan);
  display: grid;
  gap: var(--space-3);
  justify-items: center;
}

/* ── HUD ─────────────────────────────────────────────────────────── */
.sd-hud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  inline-size: 100%;
  max-inline-size: 880px;
}
.sd-stat {
  display: grid;
  gap: 2px;
  padding: var(--space-2) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  line-height: 1.1;
  min-inline-size: 0;
}
.sd-stat span { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-stat b { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:lang(zh) .sd-stat b, :lang(ja) .sd-stat b, :lang(hi) .sd-stat b, :lang(ar) .sd-stat b { font-family: var(--font-body); font-size: var(--step-0); font-weight: 700; }
.sd-dots { display: inline-flex !important; justify-content: center; gap: 6px; padding-block: 5px; }
.sd-dots i {
  inline-size: 12px; block-size: 12px; border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--danger) 55%, var(--border-strong));
  background: transparent;
  transition: background-color var(--dur-med) var(--ease);
}
.sd-dots i.spent { background: var(--danger); border-color: var(--danger); box-shadow: 0 0 10px color-mix(in oklab, var(--danger) 60%, transparent); }
.sd-dots i.pop { animation: sd-pop 480ms var(--ease); }
html.play-open .sd-stat--score { display: none; }
html.play-open .sd-hud { grid-template-columns: repeat(3, minmax(0, 1fr)); max-inline-size: 560px; }

/* ── Layout ──────────────────────────────────────────────────────── */
.sd-main { display: grid; gap: var(--space-3); justify-items: center; inline-size: 100%; }
.sd-board-wrap { position: relative; inline-size: min(100%, 540px); }
.sd-side { display: grid; gap: var(--space-3); inline-size: min(100%, 540px); align-content: center; }
@media (min-width: 900px) {
  .sd-main { grid-template-columns: auto minmax(250px, 300px); align-items: center; justify-content: center; gap: var(--space-5); }
  .sd-board-wrap { inline-size: min(540px, calc(100dvh - 250px), 58vw); min-inline-size: 360px; }
  html.play-open .sd-board-wrap { inline-size: min(620px, calc(100dvh - 190px), 58vw); }
  .sd-side { inline-size: 100%; }
}
@media (max-width: 899px) {
  html.play-open .sd-board-wrap { inline-size: min(100%, calc(100dvh - 330px)); min-inline-size: min(100%, 300px); }
  html.play-open .sd-side { inline-size: min(100%, 540px); }
}

/* ── Board ───────────────────────────────────────────────────────── */
.sd-board {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, color-mix(in oklab, var(--accent) 55%, transparent), color-mix(in oklab, var(--violet) 45%, transparent) 55%, color-mix(in oklab, var(--cyan) 40%, transparent));
  box-shadow: var(--shadow-2), 0 0 40px color-mix(in oklab, var(--accent) 16%, transparent);
}
.sd-board.shake { animation: sd-shake 480ms var(--ease); }
.sd-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: calc(var(--radius-lg) - 4px);
  overflow: hidden;
}
.sd-box:nth-child(1) { border-start-start-radius: calc(var(--radius-lg) - 3px); }
.sd-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--sd-cell);
  color: var(--sd-user);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 6.4cqi;
  font-weight: 500;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sd-cell:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; z-index: 1; }
.sd-cell.given { color: var(--text); font-weight: 700; }
.sd-cell.rel { background: color-mix(in oklab, var(--sd-cell) 82%, var(--violet)); }
.sd-cell.same { background: color-mix(in oklab, var(--sd-cell) 70%, var(--accent)); }
.sd-cell.sel { background: color-mix(in oklab, var(--sd-cell) 50%, var(--accent)); box-shadow: inset 0 0 0 2px var(--accent); color: #fff; }
.sd-cell.sel.given { color: #fff; }
.sd-cell.bad { color: var(--danger); background: color-mix(in oklab, var(--sd-cell) 78%, var(--danger)); }
.sd-cell.bad.sel { box-shadow: inset 0 0 0 2px var(--danger); }
@media (hover: hover) { .sd-root[data-state="play"] .sd-cell:not(.sel):hover { background: color-mix(in oklab, var(--sd-cell) 74%, var(--violet)); } }
.sd-digit:empty { display: none; }
.sd-digit { display: block; }
.sd-notes { display: none; position: absolute; inset: 6%; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.sd-cell.has-notes .sd-notes { display: grid; }
.sd-notes i { display: grid; place-items: center; font-style: normal; font-size: 2.35cqi; font-weight: 600; color: var(--text-muted); }
.sd-cell.sel .sd-notes i { color: #fff; }

.sd-root[data-state="idle"] .sd-cell, .sd-root[data-state="over"] .sd-cell, .sd-root[data-state="paused"] .sd-cell { cursor: default; }
.sd-root[data-state="paused"] .sd-board .sd-digit, .sd-root[data-state="paused"] .sd-notes { filter: blur(6px); }

/* Board juice */
.sd-cell.ink .sd-digit { animation: sd-ink 420ms var(--ease); }
.sd-cell.wrong { animation: sd-wrong 500ms var(--ease); }
.sd-cell.wave { animation: sd-wave 700ms var(--ease) var(--sd-delay, 0ms) both; }
.sd-cell.deal .sd-digit { animation: sd-deal 500ms var(--ease) var(--sd-delay, 0ms) both; }
@keyframes sd-ink {
  0% { transform: scale(1.6); opacity: 0; text-shadow: 0 0 18px var(--sd-user); }
  60% { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(1); text-shadow: none; }
}
@keyframes sd-wrong {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6%); }
  40% { transform: translateX(6%); }
  60% { transform: translateX(-4%); }
  80% { transform: translateX(3%); }
}
@keyframes sd-wave {
  0% { background-color: var(--sd-cell); }
  35% { background-color: color-mix(in oklab, var(--sd-cell) 30%, var(--lime)); color: var(--bg); transform: scale(1.06); }
  100% { background-color: var(--sd-cell); }
}
@keyframes sd-deal { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes sd-pop { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }
@keyframes sd-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px) rotate(-0.6deg); }
  50% { transform: translateX(7px) rotate(0.5deg); }
  75% { transform: translateX(-4px); }
}

.sd-toast {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 42%;
  margin-inline: auto;
  inline-size: max-content;
  max-inline-size: 90%;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  border: 1px solid color-mix(in oklab, var(--lime) 50%, var(--border));
  color: var(--lime);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  backdrop-filter: blur(6px);
}
.sd-toast:empty { display: none; }
.sd-toast.show { animation: sd-toast 1300ms var(--ease) both; }
:lang(zh) .sd-toast, :lang(ja) .sd-toast, :lang(hi) .sd-toast, :lang(ar) .sd-toast { font-family: var(--font-body); font-size: var(--step-1); }
@keyframes sd-toast {
  0% { opacity: 0; transform: translateY(14px) scale(0.9); }
  15% { opacity: 1; transform: translateY(0) scale(1.04); }
  25% { transform: scale(1); }
  75% { opacity: 1; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-22px); }
}

/* ── Progress, tools, pad ────────────────────────────────────────── */
.sd-progress { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); font-size: var(--step--1); color: var(--text-muted); }
.sd-progress b { font-family: var(--font-display); font-size: var(--step-1); color: var(--text); }
.sd-progress small { color: var(--text-faint); }
.sd-bar { block-size: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.sd-bar i { display: block; block-size: 100%; inline-size: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--cyan)); transition: inline-size var(--dur-med) var(--ease); }

.sd-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.sd-tool {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  min-block-size: 56px;
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.sd-tool svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sd-tool small { font-size: 0.75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
.sd-tool small b { position: absolute; inset-block-start: 5px; inset-inline-end: 5px; display: inline-grid; place-items: center; min-inline-size: 1.5em; block-size: 1.5em; padding-inline: 3px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink, #120a2e); font-size: 0.7rem; }
.sd-tool:hover:not(:disabled) { color: var(--text); background: var(--surface-2); }
.sd-tool:active:not(:disabled) { transform: scale(0.95); }
.sd-tool:disabled { opacity: 0.45; cursor: default; }
.sd-tool.on { color: var(--accent); border-color: var(--accent); background: color-mix(in oklab, var(--surface-1) 75%, var(--accent)); }
.sd-tool:focus-visible, .sd-num:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sd-pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.sd-num {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 54px;
  padding: 4px 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-1));
  box-shadow: var(--glass-hi), 0 3px 0 rgb(4 2 20 / 0.5);
  color: var(--text);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), opacity var(--dur-med) var(--ease);
}
.sd-num span { font-family: var(--font-body); font-size: 1.55rem; font-weight: 600; line-height: 1; }
.sd-num small { font-size: 0.65rem; color: var(--text-faint); line-height: 1; }
.sd-num:hover:not(:disabled) { border-color: var(--accent); }
.sd-num:active:not(:disabled) { transform: translateY(2px); box-shadow: var(--glass-hi), 0 1px 0 rgb(4 2 20 / 0.5); }
.sd-num.same { border-color: var(--accent); box-shadow: var(--glass-hi), 0 3px 0 rgb(4 2 20 / 0.5), 0 0 14px color-mix(in oklab, var(--accent) 35%, transparent); }
.sd-num:disabled { opacity: 0.4; cursor: default; }
.sd-num.done { opacity: 0.25; }
.sd-num.done small { visibility: hidden; }
.sd-num.pop { animation: sd-pop 480ms var(--ease); opacity: 1; border-color: var(--lime); }
.sd-pad.noting .sd-num { border-style: dashed; border-color: color-mix(in oklab, var(--accent) 55%, var(--border-strong)); }
.sd-pad.noting .sd-num span { font-size: 1.15rem; color: var(--accent); }
.sd-keys { margin: 0; font-size: var(--step--1); color: var(--text-faint); }
@media (pointer: coarse) { .sd-keys { display: none; } }
@media (min-width: 900px) {
  .sd-pad { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .sd-num { min-block-size: 64px; }
  .sd-num span { font-size: 1.9rem; }
}
@media (max-width: 420px) {
  .sd-pad { gap: 4px; }
  .sd-num span { font-size: 1.35rem; }
  .sd-tool { min-block-size: 50px; }
}

/* ── Overlay (standalone page only) ──────────────────────────────── */
.sd-overlay {
  position: absolute;
  inset: calc(-1 * var(--space-2));
  z-index: 5;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  backdrop-filter: blur(4px);
  animation: sd-fade 260ms var(--ease);
}
.sd-overlay[hidden] { display: none; }
html.play-open .sd-overlay { display: none; }
.sd-ov-card {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  inline-size: min(100%, 380px);
  padding: var(--space-5) var(--space-5);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--surface-1) 94%, transparent);
  box-shadow: var(--shadow-3);
  text-align: center;
  animation: sd-rise 360ms var(--ease);
}
.sd-ov-kicker { margin: 0; font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.sd-ov-title { margin: 0; font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; line-height: 1; color: var(--text); }
:lang(zh) .sd-ov-title, :lang(ja) .sd-ov-title, :lang(hi) .sd-ov-title, :lang(ar) .sd-ov-title { font-family: var(--font-body); font-size: var(--step-2); line-height: 1.3; }
.sd-ov-sub { margin: 0; color: var(--text-muted); text-wrap: pretty; }
.sd-ov-stars { display: flex; gap: var(--space-2); }
.sd-ov-stars:empty { display: none; }
.sd-ov-stars i {
  inline-size: 34px; block-size: 34px;
  background: var(--surface-3);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.sd-ov-stars i.on { background: var(--amber); animation: sd-star 520ms var(--ease) calc(var(--k) * 140ms) both; }
.sd-ov-actions { display: grid; gap: var(--space-2); inline-size: 100%; margin-block-start: var(--space-2); }
.sd-ov-actions .btn { inline-size: 100%; min-block-size: var(--tap); justify-content: center; }
.sd-ov-actions .btn--primary.sd-primary { background: var(--accent); color: var(--accent-ink, #120a2e); border-color: transparent; font-weight: 700; }
.sd-ov-actions .btn--primary.sd-primary:hover { background: color-mix(in srgb, var(--accent) 86%, white); }
@keyframes sd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sd-rise { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes sd-star { 0% { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  .sudoku-stage *, .sudoku-stage *::before { animation: none !important; transition: none !important; }
  .sd-toast.show { opacity: 1; }
}