/* ==========================================================================
   数字猜谜 · 本地版  —— 样式
   画面风格可自由调整，这里给出一套干净、偏官方 Nerdle 的视觉。
   ========================================================================== */

/* ---------- 主题变量 ---------- */
:root {
  --bg: #ffffff;
  --bg-soft: #f4f5f7;
  --surface: #ffffff;
  --text: #12141a;
  --text-dim: #6b7280;
  --line: #d7dae0;
  --line-strong: #878d99;
  --tile-bg: #ffffff;
  --tile-text: #12141a;
  --tile-border-empty: #d7dae0;
  --tile-border-filled: #878d99;
  --green: #3aa394;
  --purple: #a05eb5;
  --black: #3a3a3c;
  --key-bg: #d3d6da;
  --key-text: #12141a;
  --key-shadow: rgba(0, 0, 0, .14);
  --accent: #2456c8;
  --danger: #c0392b;
  --overlay: rgba(18, 20, 26, .48);
  --radius: 10px;
  --tile-gap: 5px;
}

[data-theme="dark"] {
  --bg: #12141a;
  --bg-soft: #191c24;
  --surface: #1b1f28;
  --text: #eef1f6;
  --text-dim: #9aa3b2;
  --line: #333a47;
  --line-strong: #5b6472;
  --tile-bg: #1b1f28;
  --tile-text: #eef1f6;
  --tile-border-empty: #333a47;
  --tile-border-filled: #6d7686;
  --green: #2f8f81;
  --purple: #8e4ba3;
  --black: #2b2b2e;
  --key-bg: #4a5261;
  --key-text: #eef1f6;
  --key-shadow: rgba(0, 0, 0, .5);
  --accent: #5b8def;
  --danger: #e05a4a;
  --overlay: rgba(0, 0, 0, .62);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, color .18s ease;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 12px 10px;
}

/* ---------- 顶部栏 ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--line);
}

.topbar__side {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.topbar__side--right { margin-left: auto; }

.topbar__title {
  flex: 1 1 auto;
  text-align: center;
  min-width: 0;
}

.topbar__title h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .16em;
  text-indent: .16em;
}

.topbar__sub {
  margin: 1px 0 0;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.icon-btn:hover { background: var(--bg-soft); }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- 状态条 ---------- */
.statusbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0 2px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.statusbar__item b { color: var(--text); font-weight: 700; }
.statusbar__dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--line-strong);
  opacity: .6;
}

/* ---------- 提示气泡 ----------
   放在棋盘下沿附近；z-index 高于弹窗面板，避免被弹窗遮住。 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 168px;
  transform: translate(-50%, 10px);
  z-index: 120;
  max-width: min(90vw, 420px);
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast.is-error { background: var(--danger); color: #fff; }

@media (max-height: 720px) {
  .toast { bottom: 138px; }
}

/* ---------- 棋盘 ---------- */
.board-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;      /* 竖直居中，剩余空白均分到上下 */
  justify-content: center;
  padding: 16px 0;
  min-height: 0;
}

.board {
  display: grid;
  gap: var(--tile-gap);
  width: 100%;
  /* 具体宽度由 JS 按列数设定（格子太少时不至于过大，太多时不至于溢出） */
  margin: 0 auto;
}

.board__row {
  display: grid;
  /* 间距由 JS 按列数下发（列数多时收紧），默认 5px */
  gap: var(--tile-gap, 5px);
}

.tile {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--tile-border-empty);
  border-radius: 4px;
  background: var(--tile-bg);
  color: var(--tile-text);
  /* 字号由 JS 按实际单格宽度算出（--tile-font），跟着列数缩放；
     没有该变量时退回视口推算，保证任何情况下都有个合理值。 */
  font-size: var(--tile-font, clamp(13px, 5.4vw, 30px));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  overflow: hidden;          /* 长题缩到很小时，宁可裁掉也不撑破格子 */
  user-select: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.tile.is-filled { border-color: var(--tile-border-filled); }

.tile.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.tile--green  { background: var(--green);  border-color: var(--green);  color: #fff; }
.tile--purple { background: var(--purple); border-color: var(--purple); color: #fff; }
.tile--black  { background: var(--black);  border-color: var(--black);  color: #fff; }

@keyframes pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.tile.is-pop { animation: pop .12s ease; }
.board__row.is-shake { animation: shake .38s ease; }
.result.is-shake { animation: shake .38s ease; }

@keyframes flip {
  0%   { transform: rotateX(0deg) scale(1); }
  55%  { transform: rotateX(-90deg) scale(1.04); }
  100% { transform: rotateX(0deg) scale(1); }
}

/* 逐格翻牌：每格按 --i 错开，一次重排即可全部播放 */
.tile.is-flip {
  animation: flip .38s ease both;
  animation-delay: calc(var(--i, 0) * 110ms);
}

/* ---------- 结果面板 ---------- */
.result {
  margin: 0 0 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  animation: fade-up .3s ease both;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.result__title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
}
.result__answer {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--text-dim);
}
.result__answer b {
  color: var(--text);
  font-size: 17px;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.result__meta {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.result__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- 按钮 ---------- */
.btn {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover { background: var(--bg-soft); }
.btn:active { transform: scale(.97); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--primary:hover { filter: brightness(1.08); background: var(--accent); }

.btn--ghost { background: transparent; }
.btn--danger { color: var(--danger); border-color: var(--danger); }
.btn--danger:hover { background: rgba(192, 57, 43, .08); }
.btn--block { display: block; width: 100%; }

/* ---------- 键盘 ----------
   10 列网格：
     行1 = 数字 1~0（各 1 列）
     行2 = + − × ÷ =（各 1 列）+ 回车(3) + 退格(1) + 清空(1)
 */
.keyboard {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 4px;
}

.keyboard__row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
}

.key {
  grid-column: span 1;
  height: 46px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 6px;
  background: var(--key-bg);
  color: var(--key-text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 0 var(--key-shadow);
  transition: filter .12s ease, transform .08s ease, background-color .15s ease, color .15s ease;
}
.key:hover { filter: brightness(1.06); }
.key:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--key-shadow); }

/* 行2 合计正好 10 列：+ − × ÷ =（5）+ 回车(2) + 退格(2) + 清空(1) */
.key--enter { grid-column: span 2; font-size: 14px; letter-spacing: .02em; }
.key--half { grid-column: span 2; font-size: 13px; letter-spacing: 0; }
.key--clear { grid-column: span 1; font-size: 15px; letter-spacing: 0; }

.key--green  { background: var(--green);  color: #fff; }
.key--purple { background: var(--purple); color: #fff; }
.key--black  { background: var(--black);  color: #fff; }

/* ---------- 页脚 ---------- */
.footer {
  padding: 8px 0 2px;
  text-align: center;
}
.footer p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}
/* 免责声明：上线到 GitHub Pages 等公开托管时，
   官方要求"醒目地声明与原作者无关联"，所以这段要保证可读。 */
.footer__disclaimer {
  margin-top: 6px !important;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font-size: 10.5px !important;
  line-height: 1.6 !important;
  opacity: .9;
}
.footer__disclaimer b { color: var(--text); font-weight: 700; }

/* ---------- 弹窗 ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
}
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  animation: fade .18s ease both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
  animation: fade-up .22s ease both;
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal__close:hover { background: var(--bg-soft); color: var(--text); }

.modal__panel h2 {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 800;
}
.modal__panel h3 {
  margin: 20px 0 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}
.modal__lead {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.modal code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-soft);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .94em;
  color: var(--text);
}

/* 说明里的示例 */
.help-example {
  margin: 12px 0 6px;
  text-align: center;
}
.help-tiles {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.help-tiles .tile {
  width: 34px;
  height: 34px;
  aspect-ratio: auto;
  font-size: 17px;
  border-radius: 3px;
}
.help-example__cap {
  margin: 7px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}
.help-example__note {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-dim);
  word-break: break-word;
}

.legend, .rules {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.legend li, .rules li {
  position: relative;
  margin: 7px 0;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.6;
}
.rules li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}
.legend li { padding-left: 24px; }

.legend__swatch {
  position: absolute;
  left: 0;
  top: .28em;
  width: 15px; height: 15px;
  border-radius: 3px;
}
.legend__swatch--green  { background: var(--green); }
.legend__swatch--purple { background: var(--purple); }
.legend__swatch--black  { background: var(--black); }

/* 统计 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 6px 0 4px;
}
.stat {
  padding: 10px 4px;
  border-radius: 8px;
  background: var(--bg-soft);
  text-align: center;
}
.stat b {
  display: block;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-dim);
}

.dist { display: flex; flex-direction: column; gap: 4px; }
.dist__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.dist__label { flex: 0 0 14px; color: var(--text-dim); text-align: right; }
.dist__bar {
  flex: 1 1 auto;
  height: 20px;
  border-radius: 4px;
  background: var(--bg-soft);
  overflow: hidden;
}
.dist__fill {
  height: 100%;
  min-width: 0;
  border-radius: 4px;
  background: var(--line-strong);
  transition: width .35s ease;
}
.dist__fill.is-current { background: var(--green); }
.dist__count {
  flex: 0 0 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.level-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.code-row {
  display: flex;
  gap: 8px;
}

/* ---------- 自己出题面板 ---------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.chip {
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip:active { transform: scale(.96); }

/* ---------- 答题轮数选择 ---------- */
.rounds-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rounds-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* 轮数胶囊：数字用等宽字体、居中，选中态用主色实心 */
.chip--round {
  min-width: 42px;
  text-align: center;
  font-weight: 700;
}
.chip--round.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.chip--round.is-on:hover { color: #fff; filter: brightness(1.08); }

.rounds-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.input--num {
  width: 64px;
  padding: 6px 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
/* 去掉数字输入框的上下箭头，避免误触 */
.input--num::-webkit-outer-spin-button,
.input--num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input--num { -moz-appearance: textfield; appearance: textfield; }

.modal__hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-dim);
}
.modal__hint code {
  font-size: .95em;
}

.share-box {
  margin: 8px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
}
.share-box__expr,
.share-box__code {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-dim);
  word-break: break-all;
}
.share-box__expr b {
  font-size: 16px;
  letter-spacing: .08em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.share-box__code code {
  background: var(--surface);
}
.share-box .modal__hint { margin-top: 6px; }
.share-box .code-row { margin-top: 2px; }
.share-box .input {
  background: var(--surface);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px;
}

/* 顶栏图标比较多时，小屏上收紧间距 */
@media (max-width: 400px) {
  .topbar__side { gap: 2px; }
  .icon-btn { width: 33px; height: 33px; }
  .icon-btn svg { width: 19px; height: 19px; }
  .topbar__title h1 { font-size: 20px; }
}
.input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(36, 86, 200, .15);
}

/* ---------- 小屏适配 ---------- */
/* 矮屏优先保证"整屏可玩、不用滚动"，页脚属于次要信息 */
@media (max-height: 760px) {
  .footer { display: none; }
}

@media (max-height: 720px) {
  .key { height: 42px; font-size: 16px; }
  .key--half { height: 40px; }
  .board-wrap { padding: 8px 0; }
  .topbar__title h1 { font-size: 20px; }
  .statusbar { padding: 5px 0 0; }
}

@media (max-height: 620px) {
  .key { height: 38px; }
  .key--half { height: 36px; }
  .topbar { padding: 6px 0 4px; }
  .topbar__title h1 { font-size: 18px; }
  .board-wrap { padding: 4px 0; }
}

@media (max-width: 380px) {
  .app { padding: 0 8px 8px; }
  .keyboard__row { gap: 4px; }
  .key { border-radius: 5px; }
  .keyboard__row { grid-template-columns: repeat(10, 1fr); }
}

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