/* ==========================================================================
   games.zzxcd.cn · 数独
   --------------------------------------------------------------------------
   世界：报纸上的每日谜题。
   谜面格是印刷体的墨色粗字，填进去的答案是强调色的细字 —— 一眼分得清谁给的。
   宫线用 2px 墨线，格线用 1px 淡线：这是数独唯一的必需品，别的不加。
   数字盘做成一条等分的"字模条"，用掉某个数就把它压暗。
   ========================================================================== */

#gameView {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
}

/* ---------- 状态条 ---------- */
.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
}

/* 顶栏的计时（已被页面脚本包进 .stat-box）——尺寸交给 shell.css 的共用规则，
   这里只在"计时还在顶栏读数格里"时生效 */
.stat-box .clock {
  margin-left: 0;
  color: var(--ink);
}

.stat-box .remain {
  padding: 0;
  border: 0;
  font-size: calc(0.95rem * var(--font-scale, 1));
  font-weight: 700;
  color: var(--ink);
  margin-left: 0;
  letter-spacing: 0;
}

/* ---------- 工具条 ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: min(100%, 520px);
  /* shell.css 给 .toolbar 留了 6.4rem 右内距，那是防「贴着视口顶部的横向状态条」
     被右上角两个固定圆钮盖住用的。本页工具条在状态条下方一行（固定圆钮在对局中
     又被 JS 加 .hidden 收走），继续留着它只会让三个按钮挤成 417.6px 宽、
     右端比棋盘/数字盘短 102.4px —— 见 _shot/auditsd-desk-s9.png。 */
  padding-right: 0;
  min-width: 0;
}

.tbtn {
  flex: 1 1 6rem;
  min-height: 2.3rem;
  padding: 0.4rem 0.6rem;
  border: var(--rule);
  background: var(--sheet);
  font-size: calc(0.82rem * var(--font-scale, 1));
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.tbtn:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--sheet));
}

.tbtn:active {
  transform: translate(2px, 2px);
}

.tbtn.disabled {
  opacity: 0.42;
  pointer-events: none;
}

.tb-undo,
.tb-eraser,
.tb-new {
  position: relative;
}

/* ---------- 棋盘 ---------- */
.board {
  display: grid;
  border: var(--rule);
  background: var(--sheet);
  box-shadow: var(--shadow);
  width: min(100%, 520px);
  touch-action: manipulation;
  min-width: 0;
}

.board.s4 {
  grid-template-columns: repeat(4, 1fr);
  font-size: calc(1.7rem * var(--font-scale, 1));
}

.board.s6 {
  grid-template-columns: repeat(6, 1fr);
  font-size: calc(1.4rem * var(--font-scale, 1));
}

.board.s9 {
  grid-template-columns: repeat(9, 1fr);
  font-size: calc(1.1rem * var(--font-scale, 1));
}

.board.s16 {
  grid-template-columns: repeat(16, 1fr);
  font-size: calc(0.78rem * var(--font-scale, 1));
}

.cell {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-right: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: var(--sheet);
  transition: background-color 90ms linear;
  min-width: 0;
}

/* 宫线：JS 在每宫最后一列/行打 .br/.bb */
.cell.br {
  border-right: var(--rule);
}

.cell.bb {
  border-bottom: var(--rule);
}

.cell .v {
  /* 不要在这里写 font-family：设置抽屉的「字体」是改变 body 的 font-family
     （页面 JS 里 FONTS），元素自身命中的声明会盖掉继承值 —— 写了 var(--font)
     就等于把棋盘数字钉死在 Archivo，选衬线体/等宽体时棋盘毫无反应。 */
  font-size: 1em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--accent-ink);
}

.cell.given .v {
  font-weight: 800;
  color: var(--ink);
}

/* 同行同列同宫：淡底提示，不抢注意力 */
.cell.hl {
  background: color-mix(in srgb, var(--ink) 7%, var(--sheet));
}

/* 同数字：强调色描边，横向扫视时能连成线 */
.cell.same {
  background: color-mix(in srgb, var(--accent) 16%, var(--sheet));
}

.cell.sel {
  background: color-mix(in srgb, var(--accent) 26%, var(--sheet));
  box-shadow: inset 0 0 0 2px var(--accent);
}

.cell.err .v {
  /* 强调色实心块 + 反白。⚠️ 这里的字色必须是 var(--on-accent)（base.css 里固定为白），
     不能写 var(--sheet)：暗色主题下 --sheet 是深色 #242830，压在强调色块上只有
     1.89~3.02:1（实测 #1f4fa0 1.89 / #6b3fa0 2.00 / #1f6f4a 2.41 / #b8442a 2.74），
     反白字直接糊成一块。改成白字后四套主题一致：4.90~7.82:1（色盘见 DESIGN.md）。
     浅色主题下 --sheet≈白，所以视觉不变。 */
  color: var(--on-accent);
  background: var(--accent);
  padding: 0 0.18em;
}

/* ---------- 数字盘 ---------- */
.pad {
  display: grid;
  gap: 0.4rem;
  width: min(100%, 520px);
  min-width: 0;
}

.pad.p4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pad.p6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.pad.p9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.pad.p16 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.pbtn {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: var(--rule);
  background: var(--sheet);
  box-shadow: var(--shadow-sm);
  /* 同 .cell .v：font-family 交给继承，否则「字体」设置对数字盘没反应 */
  font-size: calc(1.05rem * var(--font-scale, 1));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
  min-width: 0;
}

.pbtn:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.pbtn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.hint {
  font-family: var(--font-mono);
  font-size: calc(0.72rem * var(--font-scale, 1));
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: center;
  max-width: 48ch;
}

/* ---------- 选难度（开局） ---------- */
.overlay-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
}

.overlay-mask.open {
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--scrim);
  min-width: 0;
}

.overlay-card {
  width: min(100%, 420px);
  padding: 1.3rem 1.2rem 1.2rem;
  border: var(--rule);
  background: var(--sheet);
  box-shadow: var(--shadow-lg);
  animation: sd-deal var(--dur-slow) var(--ease-out);
}

@keyframes sd-deal {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
}

.overlay-title {
  font-size: calc(1.22rem * var(--font-scale, 1));
  font-weight: 800;
  text-align: center;
}

.overlay-sub {
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: calc(0.74rem * var(--font-scale, 1));
  color: var(--ink-soft);
  text-align: center;
}

.diff-grid {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
  min-width: 0;
}

.dopt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.3rem 0.8rem;
  padding: 0.7rem 0.85rem;
  border: var(--rule);
  background: var(--sheet);
  text-align: left;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
  min-width: 0;
}

.dopt .dname {
  font-size: calc(1rem * var(--font-scale, 1));
  font-weight: 700;
}

.dopt .ddesc {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: calc(0.72rem * var(--font-scale, 1));
  color: var(--ink-soft);
}

.dopt .dbest {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: calc(0.72rem * var(--font-scale, 1));
  color: var(--accent-ink);
  text-align: right;
}

.dopt.on {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}

.dopt.on .ddesc,
.dopt.on .dbest {
  color: color-mix(in srgb, var(--on-accent) 82%, var(--accent));
}

.result-card {
  text-align: center;
}

.result-emoji {
  font-size: calc(2.1rem * var(--font-scale, 1));
  line-height: 1;
}

.result-title {
  margin-top: 0.3rem;
  font-size: calc(1.3rem * var(--font-scale, 1));
  font-weight: 800;
}

.result-text {
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: calc(0.78rem * var(--font-scale, 1));
  line-height: 1.7;
  color: var(--ink-soft);
}

.result-btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1.1rem;
  min-width: 0;
}

.btn {
  padding: 0.52rem 0.8rem;
  border: var(--rule);
  background: var(--sheet);
  box-shadow: var(--shadow-sm);
  font-size: calc(0.86rem * var(--font-scale, 1));
  font-weight: 700;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

.btn.primary {
  background: var(--accent);
  color: var(--on-accent);
}

.start-btn {
  width: 100%;
  margin-top: 0.9rem;
}

/* ---------- 断点 ---------- */
@media (max-width: 560px) {
  .clock {
    margin-left: 0;
  }

  .remain {
    display: none;
  }

  .board.s9 {
    font-size: calc(0.95rem * var(--font-scale, 1));
  }

  .board.s16 {
    font-size: calc(0.62rem * var(--font-scale, 1));
  }

  .pbtn {
    font-size: calc(0.92rem * var(--font-scale, 1));
  }
}