/* 舒尔特训练平台 · 移动优先 */

:root {
  --viewport-height: 100vh;
  color-scheme: dark; /* 原生控件（select 下拉、滚动条等）跟随深色配色 */
  --bg: #0b1220;
  --bg-deep: #070c16;
  --surface: #151e32;
  --surface-2: #1c2740;
  --surface-3: #243252;
  --ink: #f2f6ff;
  --muted: #8b9bb8;
  --muted-2: #5c6b88;
  --accent: #5b8cff;
  --accent-2: #7aa2ff;
  --success: #3ddc97;
  --warn: #ffb020;
  --danger: #ff6b7a;
  --p1: #5b8cff;
  --p2: #ff7ab6;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --mono: "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* 主题无关的描边 / 浅填充 / 分段轨道（浅色主题下重定义） */
  --line: rgba(255, 255, 255, 0.05);
  --line-2: rgba(255, 255, 255, 0.08);
  --line-3: rgba(255, 255, 255, 0.14);
  --fill: rgba(255, 255, 255, 0.05);
  --fill-2: rgba(255, 255, 255, 0.09);
  --seg-track: rgba(0, 0, 0, 0.28);
  --spark-grid: rgba(255, 255, 255, 0.06);
  --spark-line: #5b8cff;
  --spark-dot: #7aa2ff;
}

/* 旧版 Android WebView 使用 vh；支持动态视口时跟随系统栏与窗口变化。 */
@supports (height: 100dvh) {
  :root {
    --viewport-height: 100dvh;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  overscroll-behavior: none;
}

body {
  min-height: var(--viewport-height);
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

#app {
  min-height: var(--viewport-height);
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(91, 140, 255, 0.18), transparent 55%),
    radial-gradient(800px 400px at 100% 100%, rgba(61, 220, 151, 0.08), transparent 50%),
    var(--bg);
  overflow: clip;
}

/* 平板/桌面：放宽容器(与横竖屏无关) */
@media (min-width: 600px) {
  #app {
    max-width: 960px;
  }
}

/* Screens */
.screen {
  display: none;
  min-height: var(--viewport-height);
  padding: calc(16px + var(--safe-top)) 18px calc(24px + var(--safe-bottom));
  flex-direction: column;
  animation: screen-in 0.28s ease;
}

.screen.active {
  display: flex;
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen,
  .cell,
  .countdown-num {
    animation: none !important;
    transition: none !important;
  }
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.topbar h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.topbar-spacer {
  width: 40px;
  flex: 0 0 auto;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--fill);
  transition: background 0.15s, color 0.15s, transform 0.1s;
}

.icon-btn:hover {
  color: var(--ink);
  background: var(--line-2);
}

.icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.icon-btn:active {
  transform: scale(0.96);
}

.screen-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lead {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.section-label {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Home */
.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--accent), #8b5cf6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 7px;
  box-shadow: 0 8px 24px rgba(91, 140, 255, 0.35);
}

.brand-mark span {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
}

.brand-mark span:nth-child(2) {
  opacity: 0.55;
}
.brand-mark span:nth-child(3) {
  opacity: 0.7;
}

.brand h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tagline {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.home-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-card {
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 var(--line-2);
  display: grid;
  grid-template-columns: 88px 1fr;
  grid-template-areas:
    "preview copy"
    "cta cta";
  gap: 14px 16px;
  align-items: center;
}

.hero-preview {
  grid-area: preview;
  width: 88px;
  height: 88px;
  border-radius: 16px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 6px;
  background: var(--bg);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 8px 20px rgba(0, 0, 0, 0.25);
}

.hero-preview i {
  border-radius: 4px;
  display: block;
  opacity: 0.95;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.hero-copy {
  grid-area: copy;
  min-width: 0;
}

.hero-kicker {
  margin: 0;
  color: var(--accent-2);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.hero-copy h2 {
  margin: 4px 0 6px;
  font-size: 1.2rem;
  font-weight: 700;
}

.hero-desc {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.88rem;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.8rem;
  font-family: var(--mono);
}

.hero-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted-2);
}

.hero-card .btn {
  grid-area: cta;
}

/* Mode grid */
.mode-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mode-tablist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--line);
  border: 1px solid var(--fill-2);
}

.mode-tab {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}

.mode-tab.active {
  color: var(--ink);
  background: var(--surface-2);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24), inset 0 1px 0 var(--fill-2);
}

.mode-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mode-tab-hint {
  margin: 0 2px;
  color: var(--muted);
  font-size: 0.75rem;
}

.mode-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mode-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.mode-group-head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.mode-group-head span {
  color: var(--muted);
  font-size: 0.75rem;
}

.mode-tools .mode-group-head { margin-top: 2px; }

.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mode-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--fill-2);
  text-align: left;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
  min-height: 112px;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 var(--fill);
}

.mode-card:hover {
  border-color: rgba(91, 140, 255, 0.4);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 var(--line-2);
}

.mode-card:active {
  transform: scale(0.97) translateY(1px);
}

.mode-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mode-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mode-icon-classic {
  background: rgba(91, 140, 255, 0.18);
  color: #9bb8ff;
}
.mode-icon-reverse {
  background: rgba(255, 176, 32, 0.16);
  color: #ffc85c;
}
.mode-icon-rhythm { background: rgba(255, 122, 182, 0.17); color: #ffabd1; }
.mode-icon-tracking { background: rgba(109, 209, 255, 0.18); color: #b3ebff; }
.mode-icon-color { background: rgba(61, 220, 151, 0.16); color: #8cebc3; }
.mode-icon-condition { background: rgba(255, 176, 32, 0.16); color: #ffd27c; }
.mode-icon-dynamic { background: rgba(91, 140, 255, 0.18); color: #a9c0ff; }
.mode-icon-stroop { background: rgba(255, 90, 110, .17); color: #ffb2bd; }
.mode-icon-spatial { background: rgba(100, 225, 214, .16); color: #a9fff5; }
.mode-icon-inhibition { background: rgba(255, 190, 75, .16); color: #ffda92; }
.mode-icon-nback { background: rgba(178, 126, 255, .18); color: #d7bbff; }
.mode-icon-flanker { background: rgba(255, 139, 91, .18); color: #ffc29f; }
.mode-icon-cpt { background: rgba(91, 188, 255, .18); color: #b0e5ff; }
.mode-icon-movingtrack { background: rgba(232, 103, 255, .17); color: #f2b5ff; }
.mode-icon-stats {
  background: rgba(61, 220, 151, 0.14);
  color: #6eecc0;
}

.mode-icon-letters {
  background: rgba(244, 114, 182, 0.16);
  color: #f9a8d4;
}
.mode-icon-mole {
  background: rgba(251, 191, 36, 0.16);
  color: #fcd34d;
}
.mode-icon-find {
  background: rgba(251, 146, 60, 0.16);
  color: #fdba74;
}
.mode-icon-flash {
  background: rgba(139, 92, 246, 0.16);
  color: #c4b5fd;
}
.mode-icon-math {
  background: rgba(34, 211, 238, 0.14);
  color: #67e8f9;
}
.mode-icon-poem {
  background: rgba(232, 121, 249, 0.14);
  color: #f0abfc;
}
.mode-icon-challenge {
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
}

.math-prompt {
  text-align: center;
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(91, 140, 255, 0.12);
  border: 1px solid rgba(91, 140, 255, 0.25);
}

.math-eyebrow {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 2px;
}

.math-prompt strong {
  font-family: var(--mono);
  font-size: 1.45rem;
  color: var(--accent-2);
}

/* 双盘速辨：内容贴 HUD 下方，重心靠上；剩余空间留在底部 */
#screen-play.is-twin .game-tip {
  position: static;
  margin: 10px auto 0;
  text-align: center;
  opacity: 0.9;
  max-width: 36em;
  min-height: 0;
  display: block;
}

#screen-play.is-twin .math-prompt {
  margin-top: 4px;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: rgba(91, 140, 255, 0.1);
  border-color: rgba(91, 140, 255, 0.2);
}

#screen-play.is-twin .math-eyebrow {
  margin-bottom: 0;
  font-size: 0.78rem;
  color: var(--ink);
  font-weight: 600;
}

/* 平板：双盘卡片不要在中间被拉出大空档 */
@media (min-width: 700px) {
  #screen-play.is-twin .math-prompt {
    margin-top: 12px;
  }

  #screen-play.is-twin .twin-boards {
    max-width: min(100%, 640px);
  }

  #screen-play.is-twin .board.twin-board {
    width: min(40vw, 250px);
    max-width: 250px;
  }
}

.twin-boards {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin: 0 auto 10px;
  width: 100%;
  max-width: min(100%, 560px);
  padding: 10px 8px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.twin-panel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.twin-tag {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* 用细分割线代替 “vs”，减少视觉噪音 */
.twin-vs {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  margin: 8px 6px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.14),
    transparent
  );
  overflow: hidden;
  font-size: 0;
  color: transparent;
}

.board.twin-board {
  width: min(42vw, 210px);
  max-width: 210px;
  aspect-ratio: 1;
  gap: 4px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 14px rgba(0, 0, 0, 0.16);
}

.twin-board .cell {
  border-radius: 8px;
  font-size: clamp(0.78rem, 3.4vw, 1.15rem);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* 双盘模式：作答条贴在对比区下，不要被 board-wrap 推到屏幕底部 */
#screen-play.is-twin .board-wrap {
  flex: 0 0 auto;
  min-height: 0;
  padding: 0;
}

#screen-play.is-twin .board-wrap::before {
  display: none;
}

/* 箭头找异：数字格正常舒尔特观感，箭头格加重大号突出 */
.board[data-game="flanker"] .cell {
  font-size: clamp(1.15rem, 5.6vw, 1.85rem);
  font-weight: 800;
}

.board[data-game="flanker"] .cell[data-label="↑"],
.board[data-game="flanker"] .cell[data-label="↓"],
.board[data-game="flanker"] .cell[data-label="←"],
.board[data-game="flanker"] .cell[data-label="→"] {
  font-size: clamp(1.5rem, 7vw, 2.3rem);
  filter: brightness(1.18) saturate(1.15);
  box-shadow:
    0 var(--lift) 0 rgba(0, 0, 0, 0.28),
    var(--lift-shadow),
    0 0 0 2px rgba(255, 255, 255, 0.35),
    var(--bevel-top),
    var(--bevel-bot);
}

.board[data-game="flanker"] .cell[data-label="↑"],
.board[data-game="flanker"] .cell[data-label="↓"],
.board[data-game="flanker"] .cell[data-label="←"],
.board[data-game="flanker"] .cell[data-label="→"] {
  animation: flanker-arrow-pop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes flanker-arrow-pop {
  from { transform: scale(0.7); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}

/* 多条件搜索：条件放在盘面上方醒目大字，一眼可见 */
.condition-prompt {
  text-align: center;
  margin-bottom: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 176, 32, 0.22), rgba(255, 120, 32, 0.12));
  border: 2px solid rgba(255, 176, 32, 0.55);
  box-shadow: 0 8px 24px rgba(255, 150, 20, 0.18);
}

.condition-eyebrow {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--warn);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.condition-prompt strong {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.35rem, 5.2vw, 1.85rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-wrap: balance;
}

:root[data-ui-theme="light"] .condition-prompt {
  background: linear-gradient(135deg, rgba(255, 170, 20, 0.2), rgba(255, 130, 40, 0.1));
  border-color: rgba(220, 120, 0, 0.5);
}

:root[data-ui-theme="light"] .condition-prompt strong {
  color: #7a3b00;
}

:root[data-ui-theme="light"] .condition-eyebrow {
  color: #b45309;
}

/* 事件切换脉冲：连续相同符号也能被感知到新一轮作答开始 */
.math-prompt.event-pulse,
.condition-prompt.event-pulse {
  animation: math-prompt-pulse 0.32s ease;
}

@keyframes math-prompt-pulse {
  0% { transform: scale(0.97); opacity: 0.55; }
  100% { transform: scale(1); opacity: 1; }
}

.flash-timer {
  text-align: center;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: var(--warn);
  line-height: 1.25;
  height: 1.25em; /* 固定高度，显隐不改布局 */
  overflow: hidden;
  transition: opacity 0.15s ease;
}

/* 默认不占位（非瞬记玩法） */
.flash-timer {
  display: none;
}

/* 瞬记：全程占位，is-off 只隐藏不折叠 */
.flash-timer.slot {
  display: block;
}

.flash-timer.slot.is-off {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.flash-timer.slot:not(.is-off) {
  visibility: visible;
  opacity: 1;
}

/* ========== 经典打地鼠 · 写实洞口 ========== */
.whack-board {
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
  /* 格间缝隙/盘缘落指时挡住捏合缩放，只保留竖向滚动 */
  touch-action: pan-y;
  -webkit-touch-callout: none;
  user-select: none;
  background:
    radial-gradient(ellipse 100% 60% at 50% -8%, rgba(200, 255, 160, 0.22), transparent 50%),
    radial-gradient(ellipse 45% 35% at 12% 18%, var(--fill-2), transparent 50%),
    radial-gradient(ellipse 30% 20% at 88% 72%, rgba(20, 70, 20, 0.2), transparent 50%),
    repeating-linear-gradient(98deg, transparent 0 3px, rgba(40, 90, 30, 0.04) 3px 4px),
    linear-gradient(180deg, #6fb84a 0%, #4f9a32 45%, #3a7a26 100%);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.4),
    inset 0 2px 0 var(--line-3),
    inset 0 -12px 28px rgba(0, 0, 0, 0.16);
  border: 2px solid #2a6a1c;
}

/* 洞口：草毯 + 泥丘 + 深洞 + 前土沿 */
.hole {
  position: relative;
  aspect-ratio: 1;
  min-height: 0;
  border: 0;
  border-radius: 42% 42% 46% 46% / 38% 38% 48% 48%;
  background: transparent;
  overflow: hidden;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* 对战双人同时点按时避免手势/长按选中/系统菜单干扰 */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.08s;
}

.hole:focus,
.hole:focus-visible {
  outline: none;
}

.hole:active {
  transform: scale(0.96);
}

/* 洞周草毯 */
.hole::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    /* 不规则草斑 */
    radial-gradient(ellipse 28% 18% at 22% 18%, rgba(200, 250, 140, 0.55), transparent 60%),
    radial-gradient(ellipse 22% 16% at 78% 16%, rgba(80, 150, 45, 0.5), transparent 55%),
    radial-gradient(ellipse 30% 20% at 18% 70%, rgba(60, 120, 35, 0.4), transparent 55%),
    radial-gradient(ellipse 26% 18% at 82% 68%, rgba(50, 110, 30, 0.45), transparent 55%),
    radial-gradient(ellipse 40% 24% at 50% 100%, rgba(30, 70, 20, 0.35), transparent 60%),
    /* 细草纹理 */
    repeating-linear-gradient(
      82deg,
      transparent 0 7px,
      rgba(40, 100, 28, 0.08) 7px 8px
    ),
    repeating-linear-gradient(
      98deg,
      transparent 0 11px,
      rgba(120, 200, 80, 0.06) 11px 12px
    ),
    linear-gradient(168deg, #6fbe44 0%, #4a942e 42%, #327020 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -8px 14px rgba(0, 60, 0, 0.28),
    inset 0 0 0 1px rgba(0, 70, 0, 0.18);
  z-index: 0;
}

/* 洞周草叶点缀 */
.hole::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    /* 左侧草簇 */
    linear-gradient(100deg, transparent 0 12%, #7ed957 12% 13%, transparent 13% 16%, #5cb83e 16% 17%, transparent 17%),
    /* 右上草簇 */
    linear-gradient(160deg, transparent 0 20%, #8fe06a 20% 21%, transparent 21% 24%, #6bc044 24% 25%, transparent 25%),
    /* 下缘草尖 */
    linear-gradient(80deg, transparent 0 30%, #5cb83e 30% 31%, transparent 31% 34%, #7ed957 34% 35%, transparent 35% 38%, #4a9a32 38% 39%, transparent 39%);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}

/* 泥土环（湿土色带斑） */
.mud-ring {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 14%;
  bottom: 6%;
  border-radius: 44% 44% 48% 48% / 40% 40% 52% 52%;
  background:
    radial-gradient(ellipse 26% 16% at 20% 32%, rgba(170, 120, 55, 0.5), transparent 55%),
    radial-gradient(ellipse 22% 14% at 80% 40%, rgba(55, 32, 12, 0.45), transparent 55%),
    radial-gradient(ellipse 28% 18% at 50% 72%, rgba(100, 60, 28, 0.45), transparent 55%),
    radial-gradient(ellipse 18% 12% at 38% 16%, rgba(210, 160, 80, 0.4), transparent 50%),
    radial-gradient(ellipse 14% 10% at 68% 18%, rgba(180, 130, 60, 0.3), transparent 50%),
    linear-gradient(
      178deg,
      #b8884a 0%,
      #9a6a34 22%,
      #7a5028 48%,
      #5e3c1c 72%,
      #4a2e14 100%
    );
  box-shadow:
    inset 0 -6px 12px rgba(0, 0, 0, 0.45),
    inset 0 10px 16px rgba(0, 0, 0, 0.15),
    0 3px 5px rgba(0, 0, 0, 0.28);
  z-index: 1;
}

/* 深洞 */
.tunnel {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 30%;
  bottom: 20%;
  border-radius: 44%;
  background:
    radial-gradient(ellipse 70% 55% at 50% 25%, #3a2214 0%, #1a0e06 50%, #050302 100%);
  box-shadow:
    inset 0 16px 24px rgba(0, 0, 0, 1),
    inset 0 -8px 12px rgba(70, 40, 18, 0.4),
    inset 0 2px 0 rgba(90, 55, 28, 0.35);
  z-index: 2;
}

/* 前景土丘沿 */
.lip {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -6%;
  height: 56%;
  border-radius: 50% 50% 40% 40% / 38% 38% 64% 64%;
  background:
    /* 土块高光 */
    radial-gradient(ellipse 20% 14% at 16% 30%, rgba(220, 170, 100, 0.55), transparent 55%),
    radial-gradient(ellipse 16% 11% at 84% 36%, rgba(190, 140, 70, 0.4), transparent 50%),
    radial-gradient(ellipse 14% 10% at 48% 14%, rgba(240, 200, 140, 0.45), transparent 50%),
    radial-gradient(ellipse 12% 9% at 28% 48%, rgba(200, 150, 80, 0.3), transparent 50%),
    /* 土块阴影与裂纹感 */
    radial-gradient(ellipse 18% 12% at 38% 72%, rgba(55, 30, 12, 0.45), transparent 55%),
    radial-gradient(ellipse 14% 10% at 72% 60%, rgba(45, 25, 10, 0.4), transparent 50%),
    linear-gradient(ellipse 8% 30% at 55% 50%, rgba(40, 22, 8, 0.35), transparent 70%),
    linear-gradient(
      178deg,
      #c8944e 0%,
      #a87438 22%,
      #8b5a2c 48%,
      #6b4420 74%,
      #543418 100%
    );
  box-shadow:
    0 12px 20px rgba(0, 0, 0, 0.42),
    inset 0 -5px 0 rgba(0, 0, 0, 0.35),
    inset 0 18px 28px rgba(0, 0, 0, 0.14);
  z-index: 5;
  pointer-events: none;
}

/* 土沿：土粒 + 小石子 + 顶缘草叶 */
.lip::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: -6%;
  height: 28%;
  border-radius: 50% 50% 0 0;
  background:
    repeating-linear-gradient(
      76deg,
      transparent 0 9px,
      rgba(90, 165, 48, 0.55) 9px 11px,
      transparent 11px 17px
    ),
    repeating-linear-gradient(
      104deg,
      transparent 0 13px,
      rgba(65, 135, 38, 0.5) 13px 15px,
      transparent 15px 22px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 18px,
      rgba(100, 180, 55, 0.4) 18px 19px,
      transparent 19px 28px
    );
  opacity: 0.75;
  mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
  pointer-events: none;
}

.lip::after {
  content: "";
  position: absolute;
  inset: 22% 10% auto;
  height: 48%;
  background:
    radial-gradient(circle at 10% 35%, #c8b898 0 3.5px, transparent 4px),
    radial-gradient(circle at 24% 60%, #a09078 0 2.5px, transparent 3px),
    radial-gradient(circle at 38% 28%, #d0c0a0 0 2px, transparent 2.5px),
    radial-gradient(circle at 52% 55%, #8a7860 0 3px, transparent 3.5px),
    radial-gradient(circle at 68% 32%, #b8a888 0 2.5px, transparent 3px),
    radial-gradient(circle at 80% 58%, #988870 0 3.5px, transparent 4px),
    radial-gradient(circle at 92% 40%, #c0b090 0 2px, transparent 2.5px),
    /* 更大泥块 */
    radial-gradient(ellipse 12% 8% at 30% 42%, rgba(160, 110, 50, 0.35), transparent 60%),
    radial-gradient(ellipse 10% 7% at 70% 48%, rgba(140, 95, 45, 0.3), transparent 55%);
  opacity: 0.65;
  border-radius: 45%;
  pointer-events: none;
}

/* ========== 精修地鼠 ========== */
.mole {
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: 64%;
  height: 72%;
  transform: translate(-50%, 120%);
  transition: transform 0.2s cubic-bezier(0.25, 0.9, 0.3, 1.08);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}

.hole.up .mole {
  transform: translate(-50%, 0%);
}

/* 身体（在头部下方，被 lip 挡住一部分） */
.mole-body {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 70%;
  height: 48%;
  border-radius: 40% 40% 20% 20%;
  background: linear-gradient(180deg, #b87a42 0%, #8b5528 100%);
  z-index: 1;
}

.mole-head {
  position: absolute;
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #e8b878 0%, #d49a58 35%, #b07030 78%, #8b5020 100%);
  box-shadow:
    inset -5px -8px 14px rgba(0, 0, 0, 0.18),
    inset 4px 5px 10px rgba(255, 230, 180, 0.3),
    0 6px 10px rgba(0, 0, 0, 0.22);
  z-index: 2;
}

/* 口鼻浅色区 */
.muzzle {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translateX(-50%);
  width: 58%;
  height: 36%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #ffe8c4 0%, #f0d0a0 70%, #e0b880 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 3;
}

.mole-ear {
  position: absolute;
  top: 14%;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #d49a58, #8b5020);
  z-index: 1;
  box-shadow:
    inset -2px -3px 5px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.15);
}

.mole-ear.left {
  left: 2%;
}

.mole-ear.right {
  right: 2%;
}

.mole-ear i {
  display: block;
  width: 48%;
  height: 48%;
  margin: 26% auto 0;
  border-radius: 50%;
  background: #f0a880;
  opacity: 0.85;
}

.mole-eye {
  position: absolute;
  top: 34%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #4a3218, #140e06 72%);
  box-shadow:
    0 1px 0 var(--line-3),
    0 0 0 2px rgba(80, 50, 25, 0.15),
    inset 2px 3px 0 rgba(255, 255, 255, 0.5);
  z-index: 5;
  overflow: hidden;
}

.mole-eye.left {
  left: 26%;
}

.mole-eye.right {
  right: 26%;
}

.mole-eye::after {
  content: "";
  position: absolute;
  top: 16%;
  left: 20%;
  width: 42%;
  height: 42%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
}

.mole-nose {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translateX(-50%);
  width: 18%;
  aspect-ratio: 1.25;
  border-radius: 50% 50% 55% 55%;
  background: radial-gradient(circle at 40% 30%, #ffb8a0, #f07858 55%, #d06040 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 6;
}

.mole-mouth {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translateX(-50%);
  width: 16%;
  height: 10%;
  border-bottom: 2.5px solid #6b3820;
  border-radius: 0 0 50% 50%;
  opacity: 0.45;
  z-index: 6;
}

/* 腮红 */
.mole-blush {
  position: absolute;
  top: 48%;
  width: 12%;
  aspect-ratio: 1.3;
  border-radius: 50%;
  background: rgba(255, 120, 120, 0.28);
  filter: blur(1px);
  z-index: 4;
}

.mole-blush.left {
  left: 14%;
}

.mole-blush.right {
  right: 14%;
}

.mole-paw {
  position: absolute;
  bottom: 10%;
  width: 20%;
  aspect-ratio: 0.65;
  border-radius: 45% 45% 40% 40%;
  background: linear-gradient(180deg, #e0a868 0%, #c48848 100%);
  z-index: 4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

.mole-paw.left {
  left: 6%;
  transform: rotate(-16deg);
}

.mole-paw.right {
  right: 6%;
  transform: rotate(16deg);
}

.hole.hit .mole {
  animation: whack-hit 0.2s ease;
}

.hole.wrong {
  animation: shake 0.28s ease;
}

@keyframes whack-hit {
  0% {
    transform: translate(-50%, 0%) scale(1);
  }
  40% {
    transform: translate(-50%, 10%) scale(0.9);
  }
  100% {
    transform: translate(-50%, 0%) scale(1);
  }
}

.whack-board + .game-tip {
  color: var(--warn);
}

.level-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.challenge-chapter-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.challenge-chapter-nav button {
  min-height: 42px;
  padding: 7px 5px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
}
.challenge-chapter-nav button:hover,
.challenge-chapter-nav button:focus-visible { border-color: var(--accent); color: var(--accent-2); }

.challenge-chapter {
  padding: 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.challenge-chapter:nth-child(2) {
  border-color: rgba(164, 132, 255, 0.3);
  background:
    radial-gradient(circle at 100% 0, rgba(160, 128, 255, 0.14), transparent 45%),
    linear-gradient(160deg, var(--surface-2), var(--surface));
}

.challenge-chapter:nth-child(3) {
  border-color: rgba(92, 207, 196, 0.29);
  background:
    radial-gradient(circle at 100% 0, rgba(92, 207, 196, 0.12), transparent 46%),
    linear-gradient(160deg, var(--surface-2), var(--surface));
}

.challenge-chapter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 1px 2px 12px;
}

.challenge-chapter-head h3 { margin: 0; font-size: 1.05rem; }
.challenge-chapter-head p { margin: 4px 0 0; color: var(--muted); font-size: 0.78rem; }
.challenge-chapter-stars { flex: 0 0 auto; color: var(--warn); font-family: var(--mono); font-size: 0.85rem; font-weight: 800; }
.challenge-chapter-gate { margin: 0 2px 12px; color: var(--muted); font-size: 0.77rem; }
.challenge-levels { display: grid; gap: 9px; }

@media (min-width: 720px) {
  .challenge-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 古诗选择列表 */
.poem-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.poem-card {
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s, transform 0.1s;
}

.poem-card:hover {
  border-color: rgba(91, 140, 255, 0.4);
}

.poem-card:active {
  transform: scale(0.99);
}

.poem-card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.poem-card-head strong {
  font-size: 1.02rem;
}

.poem-dynasty {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(91, 140, 255, 0.14);
  color: #9bb8ff;
  font-size: 0.72rem;
}

.poem-meta {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.72rem;
  font-family: var(--mono);
  flex-shrink: 0;
}

.poem-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 玩法页诗文面板：进度高亮 */
.poem-panel {
  flex-shrink: 0;
  margin: 6px 4px 0;
  padding: 10px 14px 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
}

.poem-panel-name {
  font-weight: 650;
  font-size: 0.9rem;
  color: var(--accent-2);
  margin-bottom: 4px;
}

.poem-panel-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--ink);
}

.poem-panel-text .pp-punct {
  color: var(--muted);
}

.poem-panel-text span {
  transition: color 0.2s ease, opacity 0.2s ease;
}

.poem-panel-text .read {
  color: var(--muted);
  opacity: 0.72;
}

.poem-panel-text .next {
  color: var(--success);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(61, 220, 151, 0.45);
}

.level-card {
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s, transform 0.1s;
}

.level-card strong {
  font-size: 1.05rem;
}

.level-card.locked {
  opacity: 0.45;
}

.level-card:not(.locked):hover {
  border-color: rgba(91, 140, 255, 0.4);
}

.level-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
}

.level-stars {
  color: var(--warn);
  letter-spacing: 0.06em;
}

.level-meta {
  color: var(--muted);
  font-size: 0.82rem;
}

.mode-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mode-text strong {
  font-size: 0.95rem;
  font-weight: 650;
}

.mode-text span {
  color: var(--muted);
  font-size: 0.78rem;
}

/* Panels */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.panel-head h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
}

.panel-hint {
  color: var(--muted);
  font-size: 0.78rem;
}

.theme-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 110px;
  overflow-y: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}

.theme-row::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.theme-row::-webkit-scrollbar-thumb {
  background: var(--line-3);
  border-radius: 999px;
}

.theme-panel {
  flex-shrink: 0;
}

.theme-row::-webkit-scrollbar {
  display: none;
}

.theme-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--fill);
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 0.85rem;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.theme-chip.active {
  border-color: rgba(91, 140, 255, 0.5);
  color: var(--ink);
  background: rgba(91, 140, 255, 0.12);
}

.theme-swatch {
  display: flex;
  gap: 3px;
}

.theme-swatch i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 14px;
  font-weight: 650;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  transition: transform 0.1s, filter 0.15s, background 0.15s, opacity 0.15s;
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #7c5cff);
  color: white;
  box-shadow: 0 10px 28px rgba(91, 140, 255, 0.35);
}

.btn-primary:hover {
  filter: brightness(1.06);
}

.btn-ghost {
  background: var(--line);
  color: var(--ink);
  border: 1px solid var(--line-2);
}

.btn-ghost:hover {
  background: var(--fill-2);
}

.btn-block {
  width: 100%;
}

.btn-lg {
  min-height: 54px;
  font-size: 1.05rem;
}

/* Size grid — 一行 4 个，末行 3 个居中 */
.size-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* 难度页紧凑布局：内容一屏放下，开始按钮吸底始终可见 */
#screen-difficulty .screen-body {
  gap: 12px;
}

#screen-difficulty .switch-row {
  padding: 11px 0;
}

#screen-difficulty .players-row {
  flex-wrap: wrap;
  gap: 8px 12px;
}

.seg-mini {
  gap: 4px;
}

.seg-mini .seg-btn {
  min-height: 38px;
  padding: 0 10px;
  font-size: 0.8rem;
}

/* 记录卡：填充设置卡与开始按钮之间的留白 */
.best-card {
  padding: 12px 16px;
  margin-top: auto;
}

.best-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.best-head strong {
  font-size: 0.92rem;
  font-weight: 650;
}

.best-head span {
  color: #7aa2ff;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--mono);
}

#best-spark {
  display: block;
  width: 100%;
  height: 48px;
}

.best-empty {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

#btn-start-game {
  position: sticky;
  bottom: calc(10px + var(--safe-bottom));
  margin-top: auto;
  z-index: 5;
  box-shadow:
    0 10px 28px rgba(91, 140, 255, 0.35),
    0 18px 40px rgba(0, 0, 0, 0.45);
}

.size-card {
  width: calc((100% - 30px) / 4);
  max-width: 110px;
  aspect-ratio: 1 / 0.78;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color 0.15s, transform 0.12s, background 0.15s;
  flex: 0 0 auto;
}

.size-card strong {
  font-size: clamp(1.15rem, 5vw, 1.45rem);
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.size-card span {
  color: var(--muted);
  font-size: clamp(0.78rem, 3vw, 0.92rem);
  font-weight: 500;
  line-height: 1.2;
}

.size-card:hover {
  border-color: rgba(91, 140, 255, 0.4);
  background: var(--surface-2);
}

.size-card:active {
  transform: scale(0.97);
}

.size-card.selected {
  border-color: var(--accent);
  background: rgba(91, 140, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(91, 140, 255, 0.3);
}

.size-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Option card / switches */
.option-card {
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  padding: 4px 16px;
}

.interf-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.interf-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}

.interf-label strong {
  font-size: 0.92rem;
  font-weight: 650;
}

.interf-label span {
  color: var(--muted);
  font-size: 0.8rem;
}

.seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--seg-track);
}

.seg-btn {
  min-height: 44px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.seg-btn.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #7c5cff);
  border-color: var(--line-3);
  box-shadow:
    0 1px 0 var(--line-3),
    0 6px 14px rgba(91, 140, 255, 0.35);
}

.seg-btn:not(.active):hover {
  color: var(--ink);
  background: var(--fill);
}

#click-style-seg .seg-btn { position: relative; }
.vip-lock {
  position: absolute;
  top: -7px;
  right: -5px;
  padding: 2px 5px;
  border-radius: 7px;
  background: linear-gradient(135deg, #ffbd49, #ff769a);
  color: #20130a;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.1;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.seg-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cell.mono-cell {
  color: rgba(255, 255, 255, 0.9);
  text-shadow:
    0 1px 0 var(--line-2),
    0 2px 3px rgba(0, 0, 0, 0.35);
}

.cell.mono-cell.on-light {
  color: rgba(20, 16, 28, 0.92);
}

/* 动态随机：整盘闪一下 */
.board.flash-recolor {
  animation: recolor-flash 0.28s ease;
}

@keyframes recolor-flash {
  0% {
    filter: brightness(1.12) saturate(1.15);
  }
  100% {
    filter: none;
  }
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}

.switch-row:last-child {
  border-bottom: 0;
}

.switch-row strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
}

.switch-row span:not(.switch) {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 2px;
}

.switch-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: var(--surface-3);
  flex: 0 0 auto;
  transition: background 0.2s;
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.switch-row input:checked + .switch {
  background: var(--accent);
}

.switch-row input:checked + .switch::after {
  transform: translateX(20px);
}

.switch-row input:focus-visible + .switch {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 双人/单人分段（难度页「训练方式」） */
.seg-1 {
  grid-template-columns: 1fr;
}

.seg-2 {
  grid-template-columns: repeat(2, 1fr);
}

.seg-4 {
  grid-template-columns: repeat(4, 1fr);
}

.seg-4 .seg-btn {
  min-height: 40px;
  font-size: 0.8rem;
  padding: 0 2px;
}

.seg-5 {
  grid-template-columns: repeat(5, 1fr);
}

.seg-5 .seg-btn {
  min-height: 38px;
  font-size: 0.72rem;
  padding: 0 1px;
}

.seg-6 {
  grid-template-columns: repeat(3, 1fr);
}

.seg-6 .seg-btn {
  min-height: 38px;
  font-size: 0.78rem;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  min-width: 56px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--line);
  border: 1px solid transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 600;
}

.chip.active {
  color: var(--ink);
  border-color: var(--accent);
  background: rgba(91, 140, 255, 0.14);
}

.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Stats */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat-card {
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  padding: 14px 10px;
  text-align: center;
}

.stat-label {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  margin-bottom: 6px;
}

.stat-card strong {
  font-size: 1.15rem;
  font-family: var(--mono);
  font-weight: 700;
}

.best-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.best-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.best-row:last-child {
  border-bottom: 0;
}

.best-row span {
  color: var(--muted);
}

.best-row strong {
  font-family: var(--mono);
  font-weight: 650;
}

#trend-canvas {
  width: 100%;
  height: 140px;
  display: block;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}

.empty-state {
  color: var(--muted);
  text-align: center;
  font-size: 0.85rem;
  padding: 18px 0;
}

.about-text {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.about-text.muted {
  color: var(--muted-2);
  font-size: 0.8rem;
  margin: 0;
}

/* Game screens */
.game-screen {
  padding-left: 14px;
  padding-right: 14px;
  overflow: hidden;
}

/* 单人对局：提示绝对定位，文案换行/长短变化不会推挤盘面 */
#screen-play {
  position: relative;
}

#screen-play .game-tip {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: calc(12px + var(--safe-bottom));
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 4px;
}

#screen-play .board-wrap {
  padding-bottom: 64px;
}

#screen-race .game-top {
  margin-bottom: 8px;
}

#screen-race .game-tip {
  margin-top: 4px;
}

.game-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.game-top .icon-btn {
  align-self: flex-start;
}

.game-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.game-mode {
  color: var(--muted);
  font-size: 0.88rem;
}

/* 乐曲音效：显示当前曲名 */
.melody-badge {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(138, 231, 255, 0.12);
  border: 1px solid rgba(138, 231, 255, 0.28);
  color: var(--accent-2);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.melody-badge[hidden] {
  display: none !important;
}

.game-timer {
  font-family: var(--mono);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s, transform 0.15s;
}

.game-timer.has-penalty {
  color: var(--warn);
}

.game-timer.penalty-flash {
  color: var(--danger);
  animation: penalty-bump 0.4s ease;
}

@keyframes penalty-bump {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.game-progress-wrap {
  height: 4px;
  border-radius: 999px;
  background: var(--fill);
  overflow: hidden;
}

.game-progress {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--success));
  transition: width 0.2s ease;
}

.game-hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.hud-item {
  background: var(--fill);
  border-radius: 12px;
  padding: 8px 10px;
  text-align: center;
}

.hud-item span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  margin-bottom: 2px;
}

.hud-item strong {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 700;
}

.board-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 4px 0 12px;
  position: relative;
}

.board-wrap::before {
  content: "";
  position: absolute;
  width: min(92%, 380px);
  aspect-ratio: 1;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 30%, rgba(91, 140, 255, 0.1), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}

.board {
  width: min(100%, 420px);
  aspect-ratio: 1;
  display: grid;
  gap: 9px;
  /* 格间缝隙/盘缘落指时挡住捏合缩放，只保留竖向滚动（手机对战需上下滑） */
  touch-action: pan-y;
  -webkit-touch-callout: none;
  user-select: none;
  position: relative;
  z-index: 1;
  padding: 10px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
  box-shadow:
    inset 0 1px 0 var(--fill),
    0 20px 50px rgba(0, 0, 0, 0.28);
}

.board-sm {
  width: 100%;
  gap: 5px;
  padding: 6px;
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 var(--line),
    0 10px 28px rgba(0, 0, 0, 0.22);
}

/* Cells — 立体压感 + 随机凹凸 */
.cell {
  --lift: 6px;
  --lift-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
  --bevel-top: inset 0 2px 0 rgba(255, 255, 255, 0.32);
  --bevel-bot: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  --press-y: 3px;
  --sheen: 165deg;
  position: relative;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-family: var(--mono);
  color: rgba(255, 255, 255, 0.98);
  text-shadow:
    0 1px 0 var(--line-3),
    0 2px 3px rgba(0, 0, 0, 0.35);
  box-shadow:
    0 var(--lift) 0 rgba(0, 0, 0, 0.22),
    var(--lift-shadow),
    var(--bevel-top),
    var(--bevel-bot);
  transition:
    transform 0.11s cubic-bezier(0.2, 0.8, 0.3, 1),
    box-shadow 0.11s cubic-bezier(0.2, 0.8, 0.3, 1),
    opacity 0.28s ease,
    filter 0.15s ease;
  overflow: hidden;
  cursor: pointer;
  font-size: clamp(1.35rem, 6.2vw, 2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  isolation: isolate;
  transform: none;
  /* 对战双人同时点按：禁掉滚动/长按选中/双击缩放手势干扰 */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* 凸起：高按键 */
.cell.r-up-2 {
  --lift: 9px;
  --lift-shadow: 0 14px 22px rgba(0, 0, 0, 0.34);
  --bevel-top: inset 0 2.5px 0 rgba(255, 255, 255, 0.42);
  --bevel-bot: inset 0 -2.5px 0 rgba(0, 0, 0, 0.22);
  filter: brightness(1.05);
}

.cell.r-up-1 {
  --lift: 7px;
  --lift-shadow: 0 11px 18px rgba(0, 0, 0, 0.3);
  --bevel-top: inset 0 2px 0 rgba(255, 255, 255, 0.36);
  --bevel-bot: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  filter: brightness(1.02);
}

/* 平：基准 */
.cell.r-flat {
  --lift: 5px;
  --lift-shadow: 0 8px 14px rgba(0, 0, 0, 0.24);
}

/* 凹陷：嵌进棋盘 */
.cell.r-down-1 {
  --lift: 2px;
  --lift-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
  --bevel-top: inset 0 2px 2px rgba(0, 0, 0, 0.22);
  --bevel-bot: inset 0 -1px 0 rgba(255, 255, 255, 0.14);
  --press-y: 1px;
  filter: brightness(0.92) saturate(0.96);
}

.cell.r-down-2 {
  --lift: 0px;
  --lift-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  --bevel-top: inset 0 3px 3px rgba(0, 0, 0, 0.3);
  --bevel-bot: inset 0 -1px 0 rgba(255, 255, 255, 0.16);
  --press-y: 0px;
  filter: brightness(0.86) saturate(0.92);
  transform: scale(0.96);
  border-radius: 14px;
}

/* 玻璃高光层 */
.cell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    var(--sheen),
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.08) 38%,
    transparent 62%
  );
  pointer-events: none;
  z-index: 1;
}

.cell.r-down-1::before,
.cell.r-down-2::before {
  opacity: 0.55;
  background: linear-gradient(
    var(--sheen),
    var(--fill-2) 0%,
    rgba(0, 0, 0, 0.08) 45%,
    transparent 70%
  );
}

.cell-num {
  position: relative;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.cell.on-light {
  color: rgba(20, 16, 28, 0.92);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 多彩纯白格：更接近纯白，减弱灰边 */
.cell.mc-white {
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.16),
    0 10px 18px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.cell.mc-white::before {
  background: linear-gradient(
    var(--sheen, 165deg),
    rgba(255, 255, 255, 0.55) 0%,
    var(--line-3) 40%,
    transparent 62%
  );
}

.cell.mc-white:active,
.cell.mc-white.pressing {
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.14),
    0 4px 10px rgba(0, 0, 0, 0.16),
    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.cell.mc-white.hint {
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.16),
    0 10px 18px rgba(0, 0, 0, 0.22),
    0 0 0 2px rgba(255, 255, 255, 0.95),
    0 0 28px rgba(255, 255, 255, 0.45);
}

/* 点击涟漪 */
.cell::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7), transparent 70%);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.cell:active,
.cell.pressing {
  transform: translateY(var(--press-y)) scale(0.97);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.24),
    0 4px 10px rgba(0, 0, 0, 0.22),
    var(--bevel-top),
    var(--bevel-bot);
}

.cell.done {
  pointer-events: none;
}

/* 消隐（可选项，默认关闭）：点对的格子淡出缩小；
   关闭时盘面保持 .keep，点对的格子视觉不变，难度更高 */
.board:not(.keep) .cell.done {
  opacity: 0.14;
  filter: grayscale(0.5);
  transform: scale(0.86) translateY(3px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.1),
    inset 0 2px 3px rgba(0, 0, 0, 0.25),
    inset 0 -1px 0 var(--line-2);
}

.board:not(.keep) .cell.done::before {
  opacity: 0.25;
}

.cell.wrong {
  animation: shake 0.35s ease;
  filter: brightness(1.2) saturate(1.25);
}

.cell.hint {
  box-shadow:
    0 var(--lift) 0 rgba(0, 0, 0, 0.22),
    var(--lift-shadow),
    0 0 0 2px rgba(255, 255, 255, 0.92),
    0 0 28px rgba(255, 255, 255, 0.4),
    var(--bevel-top),
    var(--bevel-bot);
  animation: pulse-hint 1.1s ease-in-out infinite;
  filter: brightness(1.06) !important;
}

.cell.ripple::after {
  animation: ripple-out 0.32s ease-out forwards;
}

/* 视觉追踪：预览时只亮一格，亮点像在盘面上流动；同时用 pointer-events 锁住盘面。 */
.board.tracking-preview {
  pointer-events: none;
}

.cell.tracking-step {
  z-index: 7;
  outline: 4px solid #d5f8ff;
  outline-offset: 3px;
  filter: brightness(1.35) saturate(1.2);
  animation: tracking-step-pulse 0.52s cubic-bezier(.2, .8, .2, 1) both;
}

.cell.tracking-step::after {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(222, 251, 255, .94), rgba(84, 210, 255, .26) 48%, transparent 70%);
  animation: tracking-step-ripple .52s ease-out both;
}

@keyframes tracking-step-pulse {
  from { transform: scale(.86); box-shadow: 0 0 0 0 rgba(138, 231, 255, .95); }
  55% { transform: scale(1.08); box-shadow: 0 0 0 15px rgba(138, 231, 255, .12), 0 0 32px rgba(138, 231, 255, .9); }
  to { transform: scale(1); box-shadow: 0 0 0 26px rgba(138, 231, 255, 0); }
}

@keyframes tracking-step-ripple {
  from { opacity: .95; transform: translate(-50%, -50%) scale(.25); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

/* 目标追踪预览：目标标记在熄灭前多闪 2 轮（0.5s 后起，1.1s/轮 × 2），
   给足记忆时间；与出场脉冲叠加，预览时长由 JS 按 2.6s+ 对齐。 */
.board.tracking-preview .cell.tracking-step {
  animation:
    tracking-step-pulse 0.52s cubic-bezier(.2, .8, .2, 1) both,
    tracking-blink 1.1s ease-in-out 0.5s 2;
}

/* 目标 ≥5 个的轮次：多闪 1 轮（共 3 轮）再打乱 */
.board.tracking-preview .cell.tracking-step.memory-long {
  animation:
    tracking-step-pulse 0.52s cubic-bezier(.2, .8, .2, 1) both,
    tracking-blink 1.1s ease-in-out 0.5s 3;
}

@keyframes tracking-blink {
  0%, 100% { opacity: 1; filter: brightness(1.35) saturate(1.2); }
  50% { opacity: 0.32; filter: brightness(0.8) saturate(0.85); }
}

/* 进阶玩法：条件色覆盖主题色，让颜色成为可读的游戏信息。 */
.cell.condition-color-red { background: linear-gradient(145deg, #ff7186, #c82c4a) !important; }
.cell.condition-color-yellow { background: linear-gradient(145deg, #ffe36b, #d89c17) !important; color: #2a1c00; }
.cell.condition-color-blue { background: linear-gradient(145deg, #69bcff, #256ed6) !important; }
.cell.condition-color-green { background: linear-gradient(145deg, #66dfac, #228b61) !important; }

/* 色词冲突：背景保持低调，字体颜色才是唯一正确线索。 */
:root { --stroop-red:#ff6376; --stroop-yellow:#ffe36b; --stroop-blue:#70baff; --stroop-green:#67dfa8; }
.cell.stroop-cell { background: linear-gradient(145deg, #263348, #172236) !important; font-weight: 900; text-shadow: 0 0 12px currentColor; }

/* 反应抑制：可点/禁止同款呼吸高亮，仅框色区分（绿=点，红=忍住） */
.cell.inhibition-target {
  outline: 3px solid #3dff9a;
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px rgba(61, 255, 154, 0.25),
    0 0 28px rgba(61, 255, 154, 0.55),
    0 8px 22px rgba(0, 0, 0, 0.25);
  animation: inhibition-go 0.7s ease-in-out infinite;
  z-index: 2;
}

/* 禁止：与可点目标同款高亮节奏，仅闪烁框为红色 */
.cell.inhibition-target.inhibition-nogo {
  outline: 3px solid #ff2d4a;
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px rgba(255, 45, 74, 0.25),
    0 0 28px rgba(255, 45, 74, 0.55),
    0 8px 22px rgba(0, 0, 0, 0.25);
  animation: inhibition-nogo 0.7s ease-in-out infinite;
  z-index: 2;
}

/* 可点：绿色呼吸；禁止：红色同节奏呼吸 — 只看框色，别被额外标记分心 */
@keyframes inhibition-go {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 2px rgba(61, 255, 154, 0.2),
      0 0 18px rgba(61, 255, 154, 0.35),
      0 8px 22px rgba(0, 0, 0, 0.25);
  }
  50% {
    transform: scale(1.06);
    box-shadow:
      0 0 0 3px rgba(61, 255, 154, 0.4),
      0 0 32px rgba(61, 255, 154, 0.7),
      0 8px 22px rgba(0, 0, 0, 0.25);
  }
}

@keyframes inhibition-nogo {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 2px rgba(255, 45, 74, 0.2),
      0 0 18px rgba(255, 45, 74, 0.35),
      0 8px 22px rgba(0, 0, 0, 0.25);
  }
  50% {
    transform: scale(1.06);
    box-shadow:
      0 0 0 3px rgba(255, 45, 74, 0.4),
      0 0 32px rgba(255, 45, 74, 0.7),
      0 8px 22px rgba(0, 0, 0, 0.25);
  }
}

/* 追踪阶段把多个目标同时清楚标出；混排完成后标记会随旧盘面一并消失。 */
.cell.tracking-step { outline-color: #fff4a8; box-shadow: 0 0 0 5px rgba(255, 227, 107, .42), 0 0 26px rgba(255, 227, 107, .9); }
.board.moving-mix .cell { animation: moving-mix-in .42s cubic-bezier(.18, .8, .2, 1) both; }
@keyframes moving-mix-in { from { opacity: .15; transform: scale(.72) rotate(-5deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

/* 持续注意 · 信号狩猎：目标/干扰信号外观完全一致（青白脉冲），
   必须读亮起格上的数字才能决定点或不点，不能靠颜色走捷径。 */
.cell.cpt-flash {
  outline: 3px solid #9fe8ff;
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px rgba(159, 232, 255, 0.3),
    0 0 30px rgba(91, 188, 255, 0.6),
    0 8px 22px rgba(0, 0, 0, 0.25);
  animation: cpt-signal 0.6s ease-in-out infinite;
  z-index: 2;
}

@keyframes cpt-signal {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 2px rgba(159, 232, 255, 0.25),
      0 0 18px rgba(91, 188, 255, 0.4),
      0 8px 22px rgba(0, 0, 0, 0.25);
  }
  50% {
    transform: scale(1.07);
    box-shadow:
      0 0 0 3px rgba(159, 232, 255, 0.5),
      0 0 34px rgba(91, 188, 255, 0.75),
      0 8px 22px rgba(0, 0, 0, 0.25);
  }
}

/* 周边视野 · 余光捕点已下线 */

/* 太鼓达人式：判定圈在轨道左端，音符右→左滑入 */
.taiko-lane {
  margin: 6px 0 12px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(8, 12, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.taiko-lane[hidden] {
  display: none !important;
}

.taiko-track {
  position: relative;
  height: 64px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(125, 255, 224, 0.18) 0%,
    rgba(125, 255, 224, 0.06) 22%,
    rgba(255, 255, 255, 0.05) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.taiko-hit {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  z-index: 3;
}

.taiko-hit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(255, 255, 255, 0.25);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.taiko-hit-core {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.75);
  transition: transform 0.15s ease, background 0.15s ease;
}

.taiko-lane.is-approach .taiko-hit-ring {
  border-color: #7dffe0;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(125, 255, 224, 0.8),
    0 0 0 4px rgba(125, 255, 224, 0.35);
  transform: scale(1.08);
}

.taiko-lane.is-approach .taiko-hit-core {
  background: #7dffe0;
  transform: scale(1.18);
  box-shadow: 0 0 16px rgba(125, 255, 224, 0.9);
}

.taiko-lane.is-hit .taiko-hit-ring {
  border-color: #fff;
  transform: scale(1.2);
  animation: taiko-hit-ring 0.32s ease-out;
}

.taiko-lane.is-hit .taiko-hit-core {
  transform: scale(1.35);
  background: #fff;
}

.taiko-lane.is-miss .taiko-hit-ring {
  border-color: #ff6b7d;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(255, 80, 100, 0.8);
  animation: taiko-miss-ring 0.32s ease-out;
}

.taiko-lane.is-miss .taiko-hit-core {
  background: #ff8a9a;
}

@keyframes taiko-hit-ring {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(125, 255, 224, 0.95);
  }
  100% {
    transform: scale(1.28);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 0 22px rgba(125, 255, 224, 0);
  }
}

@keyframes taiko-miss-ring {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

/* 音符：从右侧滑到判定圈中心（圈心 left:12+24=36，note 32px → left:20） */
.taiko-note {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--rhythm-ring, #ffe36b) 52%, #b87910);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--rhythm-ring, #ffe36b) 85%, transparent),
    0 2px 8px rgba(0, 0, 0, 0.35);
  animation: taiko-note-run var(--rhythm-duration, 2100ms) linear infinite;
}

@keyframes taiko-note-run {
  0% {
    left: calc(100% - 34px);
    opacity: 0.55;
    transform: scale(0.85);
    filter: brightness(1);
  }
  20% {
    opacity: 1;
    transform: scale(0.95);
  }
  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  /* 到达判定圈中心 */
  100% {
    left: 20px;
    opacity: 1;
    transform: scale(1.12);
    filter: brightness(1.2);
  }
}

/* 目标格高亮 */
.cell.rhythm-target {
  z-index: 5;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px rgba(125, 255, 224, 0.65),
    0 10px 28px rgba(0, 0, 0, 0.3) !important;
}

.cell.rhythm-target .cell-num {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.65);
}

.cell.rhythm-target.rhythm-now {
  animation: rhythm-cell-pulse 0.28s ease-out;
}

@keyframes rhythm-cell-pulse {
  0% {
    box-shadow:
      0 0 0 3px #fff,
      0 0 0 6px rgba(125, 255, 224, 0.65),
      0 10px 28px rgba(0, 0, 0, 0.3) !important;
  }
  45% {
    box-shadow:
      0 0 0 3px #fff,
      0 0 0 10px rgba(125, 255, 224, 0.85),
      0 0 32px rgba(125, 255, 224, 0.75) !important;
  }
  100% {
    box-shadow:
      0 0 0 3px #fff,
      0 0 0 6px rgba(125, 255, 224, 0.65),
      0 10px 28px rgba(0, 0, 0, 0.3) !important;
  }
}

/* 连击变色：黄 → 青 → 紫 → 橙（用于轨道音符） */
.cell.rhythm-c1 {
  --rhythm-ring: #ffe36b;
}
.cell.rhythm-c2 {
  --rhythm-ring: #6be7ff;
}
.cell.rhythm-c3 {
  --rhythm-ring: #c48cff;
}
.cell.rhythm-c4 {
  --rhythm-ring: #ff9b4a;
}

/* 未命中：整格轻闪 */
.cell.rhythm-miss {
  animation: rhythm-miss 0.35s ease;
}

@keyframes rhythm-miss {
  0% {
    filter: grayscale(0.2) brightness(0.85);
  }
  50% {
    filter: grayscale(0.7) brightness(0.7);
  }
  100% {
    filter: none;
  }
}

/* 判定字：淡出，不常驻 */
/* 判定字：贴在太鼓判定圈上方 */
.rhythm-judge {
  position: absolute;
  left: 36px;
  top: -2px;
  z-index: 8;
  transform: translate(-50%, -100%);
  font-family: var(--mono);
  font-size: clamp(13px, 3.2vw, 18px);
  font-weight: 900;
  letter-spacing: 0.06em;
  pointer-events: none;
  white-space: nowrap;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(0, 0, 0, 0.35);
  animation: rhythm-judge-fade 0.75s ease forwards;
}

.rhythm-judge.is-perfect {
  color: #7dffe0;
}
.rhythm-judge.is-good {
  color: #ffe36b;
}
.rhythm-judge.is-miss {
  color: #ff8193;
}

@keyframes rhythm-judge-fade {
  0% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(0.75);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -110%) scale(1.1);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -130%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -170%) scale(0.95);
  }
}

@keyframes ripple-out {
  0% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(14);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

@keyframes pulse-hint {
  0%,
  100% {
    box-shadow:
      0 var(--lift) 0 rgba(0, 0, 0, 0.22),
      var(--lift-shadow),
      0 0 0 2px rgba(255, 255, 255, 0.8),
      0 0 16px rgba(255, 255, 255, 0.28),
      var(--bevel-top),
      var(--bevel-bot);
  }
  50% {
    box-shadow:
      0 var(--lift) 0 rgba(0, 0, 0, 0.22),
      var(--lift-shadow),
      0 0 0 2px rgba(255, 255, 255, 1),
      0 0 36px rgba(255, 255, 255, 0.5),
      var(--bevel-top),
      var(--bevel-bot);
  }
}

.board-sm .cell {
  border-radius: 11px;
  font-size: clamp(1.05rem, 4.8vw, 1.45rem);
  --press-y: 2px;
}

.board-sm .cell.r-up-2 {
  --lift: 5px;
}

.board-sm .cell.r-up-1 {
  --lift: 4px;
}

.board-sm .cell.r-flat {
  --lift: 3px;
}

.board-sm .cell.r-down-1 {
  --lift: 1px;
}

.board-sm .cell.r-down-2 {
  --lift: 0px;
  border-radius: 10px;
}

.board-sm .cell:active,
.board-sm .cell.pressing {
  transform: translateY(var(--press-y)) scale(0.96);
}

.game-tip {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  min-height: 1.4em;
}

/* Race — 面对面分屏（上侧旋转 180°） */
#screen-race {
  padding-top: calc(8px + var(--safe-top));
  padding-bottom: calc(8px + var(--safe-bottom));
}

.race-top {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.race-title {
  font-weight: 650;
}

.race-arena {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto 1fr;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

.race-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--line-3),
    transparent
  );
  margin: 2px 12px;
  flex-shrink: 0;
  order: 1;
}

/* 竖屏：玩家 1 在下、玩家 2 在上并整体旋转（面对面） */
.race-side-top {
  order: 0;
  transform: rotate(180deg);
  transform-origin: center center;
}

.race-divider {
  order: 1;
}

.race-side-bottom {
  order: 2;
}

/* 横屏：左右并排，对面玩家的盘面旋转 180° 面对面 */
@media (orientation: landscape) and (min-height: 300px) {
  .race-arena {
    grid-template-columns: 1fr 1px 1fr;
    grid-template-rows: 1fr;
    gap: 0;
  }

  .race-side {
    justify-content: center;
  }

  .race-side-top {
    order: 0;
    grid-column: 1;
    grid-row: 1;
    transform: rotate(180deg);
  }

  .race-divider {
    order: 1;
    grid-column: 2;
    grid-row: 1;
    width: 1px;
    height: auto;
    margin: 8px 0;
    background: linear-gradient(
      180deg,
      transparent,
      var(--line-3),
      transparent
    );
    justify-self: center;
    z-index: 2;
  }

  .race-side-bottom {
    order: 2;
    grid-column: 3;
    grid-row: 1;
  }

  .race-side .board {
    width: min(100%, 44vh, 420px);
  }
}

.race-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
}

.race-side.finished {
  opacity: 0.7;
}

.race-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 650;
  padding: 0 2px;
  flex-shrink: 0;
}

.race-side-head.p1 {
  color: var(--p1);
}

.race-side-head.p2 {
  color: var(--p2);
}

.race-tag {
  opacity: 0.9;
}

.race-exit {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--line);
  flex-shrink: 0;
}

.race-exit:hover {
  color: var(--ink);
  background: var(--fill-2);
}

.race-timer {
  font-family: var(--mono);
  font-size: 1.2rem;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}

.race-side .board {
  flex: 0 0 auto;
  width: min(100%, 42vw, 300px);
  aspect-ratio: 1;
  margin: 0 auto;
  align-self: center;
  gap: 7px;
  padding: 7px;
}

/* portrait stacked: fit both boards in viewport */
@media (orientation: portrait) {
  .race-arena {
    overflow: hidden;
  }

  .race-side {
    min-height: 0;
    justify-content: center;
  }

  .race-side .board {
    width: min(100%, 36vh, 320px);
    max-height: 100%;
  }
}

/* race 内的打地鼠盘：压缩留白适配半屏 */
.race-side .whack-board {
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
}

.race-side .whack-board .mole-mouth,
.race-side .whack-board .mole-blush {
  display: none;
}

.race-target {
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  flex-shrink: 0;
}

.race-target strong {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1rem;
  margin-left: 4px;
}

#screen-race .game-tip {
  margin-top: 4px;
  flex-shrink: 0;
}

/* Result */
.result-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 20px 8px;
}

.result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  background: rgba(61, 220, 151, 0.16);
  color: var(--success);
  border: 1px solid rgba(61, 220, 151, 0.35);
}

.result-badge.good {
  background: rgba(91, 140, 255, 0.16);
  color: var(--accent-2);
  border-color: rgba(91, 140, 255, 0.35);
}

.result-badge.ok {
  background: rgba(255, 176, 32, 0.14);
  color: var(--warn);
  border-color: rgba(255, 176, 32, 0.35);
}

.result-badge.battle {
  background: rgba(255, 122, 182, 0.14);
  color: var(--p2);
  border-color: rgba(255, 122, 182, 0.35);
}

.result-title {
  margin: 4px 0 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.result-sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.result-time {
  font-family: var(--mono);
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 10px 0 4px;
  font-variant-numeric: tabular-nums;
}

.result-time span {
  font-size: 1.2rem;
  color: var(--muted);
  margin-left: 4px;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 10px;
  width: min(100%, 320px);
  margin: 12px 0 4px;
}

.result-stats div {
  background: var(--surface);
  border-radius: 12px;
  padding: 10px 6px;
}

.result-stats span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  margin-bottom: 4px;
}

.result-stats strong {
  font-family: var(--mono);
  font-size: 1rem;
}

.result-new {
  margin-top: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffb020, #ff7ab6);
  color: #1a1020;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

/* 本次成绩超越的全平台玩家百分位 */
.result-beat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 320px);
  margin: 2px 0 0;
}

.result-beat[hidden] { display: none; }

.result-beat-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  overflow: hidden;
}

.result-beat-track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd985, #f2a52b);
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.result-beat-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}

.result-beat-text strong {
  font-family: var(--mono);
  color: #f2a52b;
  font-size: 1rem;
  font-weight: 800;
  padding: 0 1px;
}

.result-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 280px);
  margin-top: 18px;
}

/* 本关玩法提示 */
.level-tip-kicker {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#modal-level-tip h3 {
  margin: 0 0 10px;
}

.level-tip-body {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.55;
}

.br-rows {
  width: min(100%, 340px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 8px;
}

.br-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.br-row.win {
  border-color: rgba(61, 220, 151, 0.45);
  background: rgba(61, 220, 151, 0.08);
}

.br-row .name {
  font-weight: 650;
}

.br-row.p1 .name {
  color: var(--p1);
}
.br-row.p2 .name {
  color: var(--p2);
}

.br-row .time {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 700;
}

/* Countdown */
.countdown {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(7, 12, 22, 0.72);
  backdrop-filter: blur(6px);
}

.countdown[hidden] {
  display: none;
}

.countdown-num {
  font-size: 5rem;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--ink);
  animation: count-pop 0.7s ease;
  text-shadow: 0 0 40px rgba(91, 140, 255, 0.5);
}

@keyframes count-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  40% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Toast */
.toast {
  position: absolute;
  left: 50%;
  bottom: calc(28px + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 60;
  max-width: min(90%, 320px);
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(28, 39, 64, 0.95);
  border: 1px solid var(--fill-2);
  color: var(--ink);
  font-size: 0.9rem;
  box-shadow: var(--shadow);
  text-align: center;
}

.toast[hidden] {
  display: none;
}

/* Wide desktop comfort */
@media (min-width: 520px) {
  .board {
    width: min(100%, 440px);
  }
}

/* 平板/桌面：更大的盘面 + 居中限宽的内容列 */
@media (min-width: 600px) {
  .board {
    width: min(100%, 62vh, 600px);
  }

  .screen-body {
    max-width: 680px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  #screen-poems .screen-body {
    max-width: 880px;
  }

  .mode-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .poem-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-content: start;
  }

  .game-top,
  .game-hud,
  .poem-panel,
  .math-prompt {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 平板竖屏：双人上下堆叠时盘面也可以更大 */
@media (orientation: portrait) and (min-width: 600px) {
  .race-side .board {
    width: min(100%, calc(calc(var(--viewport-height) / 2) - 112px - var(--safe-top) - var(--safe-bottom)), 480px);
  }
}

/* 竖向窄分屏同样为诗文和底部提示预留空间。 */
@media (orientation: portrait) {
  #screen-play.has-math-prompt .board:not([data-choice-layout="row"]) {
    width: min(100%, calc(var(--viewport-height) - 408px), 600px);
  }

  #screen-play.has-condition-prompt .board:not([data-choice-layout="row"]) {
    width: min(100%, calc(var(--viewport-height) - 420px), 600px);
  }

  #screen-play.is-poem .board {
    width: min(100%, calc(var(--viewport-height) - 440px), 600px);
  }

  #screen-play.is-poem .poem-panel {
    max-height: calc(var(--viewport-height) * 0.22);
    overflow-y: auto;
    margin-bottom: 48px;
  }

  #screen-play.is-poem .board-wrap {
    padding-bottom: 12px;
  }
}

/* 横屏：顶部区域与提示框压缩高度；提示类模式（速算/2-back/CPT/Flanker/周边视野）
   的 HUD+提示框固定开销更大，按视口高度收紧盘面，保证一屏放下不滚动 */
@media (orientation: landscape) {
  .game-top {
    gap: 4px;
    margin-bottom: 6px;
  }

  .game-top .icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .game-top .icon-btn svg {
    width: 18px;
    height: 18px;
  }

  .math-prompt {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    padding: 4px 12px;
    margin-bottom: 2px;
  }

  .math-prompt .math-eyebrow {
    display: inline;
    font-size: 0.78rem;
  }

  .math-prompt strong {
    font-size: 1.15rem;
  }

  /* 提示框多占约 20px，方形盘面（速算/周边视野等）按更高开销收紧；
     单行选项盘高度自适应，不受此约束 */
  #screen-play.has-math-prompt .board:not([data-choice-layout="row"]),
  #screen-play.has-condition-prompt .board:not([data-choice-layout="row"]) {
    width: min(100%, calc(var(--viewport-height) - 268px), 440px);
  }

  /* 古诗:面板移到棋盘侧边,不占纵向空间 */
  .poem-panel {
    position: fixed;
    right: 14px;
    top: 55%;
    transform: translateY(-50%);
    width: min(320px, 36vw);
    margin: 0;
    z-index: 5;
  }
}

/* 平板/桌面横屏：同时受窗口高度约束，短窗口也保留完整操作区。 */
@media (orientation: landscape) and (min-width: 720px) {
  .board {
    width: min(100%, calc(62vh - 24px), calc(var(--viewport-height) - 290px), 600px);
  }

  .race-side .board {
    width: min(100%, calc(var(--viewport-height) - 144px - var(--safe-top) - var(--safe-bottom)), 480px);
  }

  /* 诗文占独立列，避免固定浮层盖住右侧格子；转屏只改变布局。 */
  #screen-play.is-poem.active {
    display: grid;
    height: var(--viewport-height);
    grid-template-columns: minmax(0, 1fr) minmax(200px, 28%);
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: 20px;
  }

  #screen-play.is-poem .game-top,
  #screen-play.is-poem .game-hud {
    grid-column: 1 / -1;
  }

  #screen-play.is-poem .board-wrap {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
    padding-bottom: 60px;
  }

  #screen-play.is-poem .board {
    width: min(100%, calc(var(--viewport-height) - 280px), 600px);
  }

  #screen-play.is-poem .poem-panel {
    position: static;
    transform: none;
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    width: 100%;
    min-height: 0;
    max-height: calc(100% - 60px);
    overflow-y: auto;
    margin: 0 0 60px;
  }

  .game-top .icon-btn,
  .race-exit {
    width: 44px;
    height: 44px;
  }
}

/* 提示较高的平板窗口单独限高；矮窗口继续使用紧凑横屏规则。 */
@media (orientation: landscape) and (min-width: 720px) and (min-height: 521px) {
  #screen-play.has-math-prompt .board:not([data-choice-layout="row"]) {
    width: min(100%, calc(var(--viewport-height) - 337px - var(--safe-top) - var(--safe-bottom)), 440px);
  }

  #screen-play.has-condition-prompt .board:not([data-choice-layout="row"]) {
    width: min(100%, calc(var(--viewport-height) - 396px - var(--safe-top) - var(--safe-bottom)), 440px);
  }
}

/* 横屏手机/矮窗口：纵向空间有限,压缩边距并按视口高度收紧盘面 */
@media (orientation: landscape) and (max-height: 520px) {
  .screen {
    padding-top: 6px;
    padding-bottom: 10px;
  }

  .board {
    width: min(100%, calc(var(--viewport-height) - 249px), 440px);
  }

  .board-wrap {
    padding-top: 2px;
    padding-bottom: 6px;
  }

  .game-top {
    margin-bottom: 6px;
  }

  .game-hud {
    margin-bottom: 8px;
  }

  .hud-item {
    padding: 4px 8px;
  }

  .race-side .board {
    width: min(100%, calc(var(--viewport-height) - 120px), 300px);
  }
}

/* Large board sizes: tighter gap + still-readable digits */
.board[data-size="6"] .cell {
  font-size: clamp(1.2rem, 5.4vw, 1.7rem);
}

.board[data-size="7"],
.board[data-size="8"],
.board[data-size="9"] {
  gap: 6px;
}

.board[data-size="7"] .cell {
  font-size: clamp(1.1rem, 5vw, 1.5rem);
}

.board[data-size="8"] .cell {
  font-size: clamp(1rem, 4.4vw, 1.35rem);
}

.board[data-size="9"] {
  gap: 5px;
}

.board[data-size="9"] .cell {
  border-radius: 10px;
  font-size: clamp(0.95rem, 4vw, 1.2rem);
}

/* Smaller grids: larger digits */
.board[data-size="3"] .cell {
  font-size: clamp(1.6rem, 8vw, 2.4rem);
}

.board[data-size="4"] .cell {
  font-size: clamp(1.5rem, 7vw, 2.15rem);
}

/* 选项类小盘面：2-back / Flanker 两个选项是单行布局，
   打破方形容器改为高度自适应，格子保持方正居中，
   避免被行高拉成细长条，也避免横屏下跟随盘面缩得过小；
   周边视野 2×2 仍是方形容器，格子天然方正 */
.board[data-choice-layout="row"] {
  aspect-ratio: auto;
  width: min(100%, 440px);
}

.board[data-choice-layout="row"] .cell {
  width: 100%;
  max-width: min(220px, calc(var(--viewport-height) - 265px));
  height: auto;
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  font-size: clamp(1.1rem, 4vw, 2.2rem);
}

/* 双盘作答条：图标主导，写在通用 row 之后 */
.board[data-game="nback"][data-choice-layout="row"] {
  width: min(100%, 400px);
  gap: 12px;
  margin: 4px auto 0;
  aspect-ratio: auto;
  padding: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.board[data-game="nback"][data-choice-layout="row"] .cell {
  max-width: none;
  width: 100%;
  height: auto;
  aspect-ratio: 1.15 / 1;
  border-radius: 18px;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  padding: 6px;
}

.board[data-game="nback"][data-choice-layout="row"] .cell::before,
.board[data-game="nback"][data-choice-layout="row"] .cell::after {
  display: none !important;
}

.twin-ans {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

.twin-ans-icon {
  display: grid;
  place-items: center;
  width: min(52%, 72px);
  aspect-ratio: 1;
}

.twin-ans-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.22));
}

.twin-ans-text {
  font-size: clamp(0.72rem, 2.4vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  opacity: 0.85;
}

.twin-ans-same .twin-ans-text {
  color: #3dd68c;
}

.twin-ans-diff .twin-ans-text {
  color: #ff6b7a;
}

.twin-ans:active {
  transform: scale(0.96);
}

.twin-ans-same.twin-ans:hover {
  box-shadow: 0 0 0 2px rgba(61, 214, 140, 0.35) !important;
}

.twin-ans-diff.twin-ans:hover {
  box-shadow: 0 0 0 2px rgba(255, 107, 122, 0.35) !important;
}

/* 横屏双盘 */
@media (orientation: landscape) {
  .twin-boards {
    max-width: min(100%, 520px);
    margin-bottom: 6px;
    padding: 8px;
  }

  .board.twin-board {
    width: min(30vh, 190px);
    max-width: 190px;
    margin: 0 auto;
  }

  .twin-board .cell {
    font-size: clamp(0.65rem, 2.2vh, 1rem);
  }

  #screen-play.is-twin .game-tip {
    margin-top: 4px;
    margin-bottom: 0;
  }
}

.board-sm[data-size="6"] .cell,
.board-sm[data-size="7"] .cell {
  font-size: clamp(0.95rem, 4vw, 1.25rem);
}

.board-sm[data-size="8"] .cell,
.board-sm[data-size="9"] .cell {
  font-size: clamp(0.85rem, 3.5vw, 1.1rem);
}

/* ---------- 帐户 / 登录 / 管理 ---------- */
.brand-mark-lg {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  padding: 11px;
  gap: 5px;
  box-shadow: 0 14px 36px rgba(91, 140, 255, 0.4);
}

.brand-mark-lg span {
  border-radius: 4px;
}

.login-body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 28px 22px;
  padding-top: max(28px, env(safe-area-inset-top));
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.login-brand h1 {
  margin: 6px 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.login-brand .tagline {
  font-size: 0.85rem;
}

.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-downloads {
  width: 100%;
  max-width: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.8rem;
}

.login-download-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
}

.login-download-link:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-download-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* 原生 App 内隐藏登录页 APK 下载入口（仅 Web 版展示） */
.login-downloads[hidden] {
  display: none;
}

/* 首次启动隐私协议弹窗 */
.consent-card {
  max-width: 340px;
}

.consent-text {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.7;
}

.consent-text p,
.consent-text ul {
  margin: 6px 0;
  padding: 0;
}

.consent-text li {
  margin: 4px 0 4px 1.2em;
}

.consent-link {
  background: none;
  border: 0;
  padding: 0;
  min-height: 32px;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  touch-action: manipulation;
}

/* 协议全文查看层（覆盖全屏，内嵌隐私/协议页面） */
.policy-viewer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
}

.policy-viewer iframe {
  flex: 1;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: #fff;
}

.policy-viewer .btn {
  margin-top: 10px;
}

.policy-viewer[hidden] {
  display: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.field input {
  min-height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--fill-2);
  background: var(--fill);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 0.15s, background 0.15s;
}

.field input:focus {
  outline: none;
  border-color: rgba(91, 140, 255, 0.6);
  background: rgba(91, 140, 255, 0.08);
}

.form-error {
  margin: 0;
  color: var(--danger, #ff6b7a);
  font-size: 0.82rem;
  line-height: 1.4;
}

.account-name-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.account-expiry {
  color: var(--muted-2);
  font-size: 0.78rem;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.account-actions .btn {
  min-height: 42px;
  padding: 0 16px;
  font-size: 0.9rem;
}

.btn-danger {
  background: rgba(255, 107, 122, 0.1);
  color: #ff8a96;
  border: 1px solid rgba(255, 107, 122, 0.25);
}

.btn-danger:hover {
  background: rgba(255, 107, 122, 0.18);
}

.btn-sm {
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.85rem;
  border-radius: 11px;
}

/* 弹窗 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 8, 18, 0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  animation: modal-in 0.16s ease-out;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.modal-card h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.modal-actions .btn {
  flex: 1;
  min-height: 44px;
  font-size: 0.92rem;
}

/* 管理页用户列表 */
.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
}

.user-row:last-child {
  border-bottom: none;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-size: 0.98rem;
}

.role-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(91, 140, 255, 0.16);
  color: #9db9ff;
}

.role-badge.admin {
  background: rgba(61, 220, 151, 0.14);
  color: #6fe3b4;
}

.user-created {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
}

.user-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.stack-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.reset-for {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

button:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* hidden 属性优先于 .modal 的 display:flex */
.modal[hidden] {
  display: none;
}

/* hidden 属性优先于任何 display 规则（弹窗/入口链接等） */
[hidden] {
  display: none !important;
}

/* ---------- 注册表单 ---------- */
.login-switch {
  margin: 10px 0 0;
}
.sms-row {
  display: flex;
  gap: 8px;
}
.sms-row input {
  flex: 1;
  min-width: 0;
}
.sms-row .btn {
  white-space: nowrap;
}

/* ---------- 浅色主题（设置中切换） ---------- */
:root[data-ui-theme="light"] {
  color-scheme: light;
  --bg: #eef2f9;
  --bg-deep: #e3e9f4;
  --surface: #ffffff;
  --surface-2: #f3f6fc;
  --surface-3: #e8edf7;
  --ink: #17233c;
  --muted: #5c6c88;
  --muted-2: #93a1ba;
  --accent: #4a7dff;
  --accent-2: #3a67d8;
  --line: rgba(23, 42, 76, 0.1);
  --line-2: rgba(23, 42, 76, 0.16);
  --line-3: rgba(23, 42, 76, 0.28);
  --fill: rgba(23, 42, 76, 0.05);
  --fill-2: rgba(23, 42, 76, 0.09);
  --seg-track: rgba(23, 42, 76, 0.07);
  --shadow: 0 12px 40px rgba(23, 42, 76, 0.14);
  --spark-grid: rgba(23, 42, 76, 0.1);
  --spark-line: #4a7dff;
  --spark-dot: #4a7dff;
}

/* 浅色主题视觉增强：柔彩色光晕 + 立体卡片 */
:root[data-ui-theme="light"] #app {
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(91, 140, 255, 0.18), transparent 60%),
    radial-gradient(900px 480px at 108% 10%, rgba(139, 92, 246, 0.12), transparent 55%),
    radial-gradient(820px 460px at -10% 100%, rgba(61, 220, 151, 0.14), transparent 55%),
    linear-gradient(180deg, #f3f6fc, #e9eef8);
}

:root[data-ui-theme="light"] .panel,
:root[data-ui-theme="light"] .option-card,
:root[data-ui-theme="light"] .interf-panel,
:root[data-ui-theme="light"] .mode-card,
:root[data-ui-theme="light"] .poem-card,
:root[data-ui-theme="light"] .level-card,
:root[data-ui-theme="light"] .stat-card,
:root[data-ui-theme="light"] .best-card,
:root[data-ui-theme="light"] .size-card {
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border-color: rgba(91, 140, 255, 0.16);
  box-shadow:
    0 8px 22px rgba(35, 64, 130, 0.07),
    0 2px 5px rgba(35, 64, 130, 0.04);
}

:root[data-ui-theme="light"] .hero-card {
  background:
    radial-gradient(420px 200px at 88% -20%, rgba(139, 92, 246, 0.14), transparent 60%),
    radial-gradient(420px 220px at -10% 120%, rgba(61, 220, 151, 0.12), transparent 60%),
    linear-gradient(180deg, #ffffff, #f7faff);
  border-color: rgba(91, 140, 255, 0.22);
  box-shadow:
    0 18px 44px rgba(74, 125, 255, 0.16),
    0 3px 8px rgba(35, 64, 130, 0.05);
}

:root[data-ui-theme="light"] .mode-card {
  box-shadow:
    0 10px 26px rgba(35, 64, 130, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

:root[data-ui-theme="light"] .mode-card:hover {
  border-color: rgba(91, 140, 255, 0.45);
  box-shadow:
    0 14px 32px rgba(74, 125, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

:root[data-ui-theme="light"] .size-card.selected {
  background: linear-gradient(160deg, rgba(91, 140, 255, 0.16), rgba(124, 92, 255, 0.1));
  border-color: rgba(91, 140, 255, 0.6);
  box-shadow:
    0 0 0 1px rgba(91, 140, 255, 0.35),
    0 6px 16px rgba(74, 125, 255, 0.2);
}

:root[data-ui-theme="light"] .btn-primary {
  box-shadow:
    0 10px 26px rgba(74, 125, 255, 0.32),
    0 2px 6px rgba(35, 64, 130, 0.12);
}

:root[data-ui-theme="light"] .brand-mark {
  box-shadow: 0 10px 26px rgba(74, 125, 255, 0.35);
}

:root[data-ui-theme="light"] .seg-btn.active {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2),
    0 6px 16px rgba(74, 125, 255, 0.3);
}

:root[data-ui-theme="light"] .switch-row input:checked + .switch {
  background: linear-gradient(135deg, var(--accent), #7c5cff);
}

:root[data-ui-theme="light"] .check-card:has(input:checked) {
  border-color: var(--accent);
  background: rgba(74, 125, 255, 0.1);
}
}

:root[data-ui-theme="light"] .topbar .icon-btn,
:root[data-ui-theme="light"] .game-top .icon-btn {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 8px rgba(35, 64, 130, 0.08);
}

/* 视觉层次：柔和方格光影延续训练主题，玩法区用色彩区分 */
:root {
  --card-blue: 105, 148, 255;
  --card-mint: 65, 207, 174;
  --card-amber: 255, 186, 93;
  --card-rose: 245, 124, 162;
  --card-violet: 172, 133, 255;
  --card-cyan: 86, 205, 226;
}

#app {
  background:
    radial-gradient(ellipse 75% 32% at 6% -3%, rgba(101, 119, 255, 0.2), transparent 78%),
    radial-gradient(ellipse 70% 28% at 105% 27%, rgba(79, 210, 189, 0.11), transparent 82%),
    radial-gradient(circle, rgba(165, 186, 245, 0.035) 1px, transparent 1px) 0 0 / 25px 25px,
    var(--bg);
}

.hero-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 95% 0, rgba(128, 104, 255, 0.22), transparent 48%),
    radial-gradient(circle at 4% 100%, rgba(68, 209, 194, 0.13), transparent 47%),
    linear-gradient(145deg, #222f52, #17233d 80%);
  border-color: rgba(151, 177, 255, 0.22);
  box-shadow: 0 22px 50px rgba(2, 8, 23, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.hero-card::before {
  content: "";
  position: absolute;
  width: 176px;
  height: 176px;
  right: -35px;
  top: -57px;
  border: 1px solid rgba(179, 196, 255, 0.12);
  border-radius: 38px;
  transform: rotate(24deg);
  box-shadow: 0 0 0 24px rgba(179, 196, 255, 0.025), 0 0 0 49px rgba(179, 196, 255, 0.018);
  pointer-events: none;
}

.hero-card > * { position: relative; }
.hero-preview { transform: rotate(-5deg); }
.hero-kicker { color: #9bc0ff; }

.mode-card {
  --card-rgb: var(--card-blue);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 102% -18%, rgba(var(--card-rgb), 0.21), transparent 55%),
    linear-gradient(155deg, var(--surface-2), var(--surface) 80%);
  border-color: rgba(var(--card-rgb), 0.2);
}

.mode-card::before {
  content: "";
  position: absolute;
  width: 68px;
  height: 68px;
  top: -26px;
  right: -25px;
  border-radius: 18px;
  border: 1px solid rgba(var(--card-rgb), 0.26);
  transform: rotate(24deg);
  pointer-events: none;
}

.mode-card:hover {
  border-color: rgba(var(--card-rgb), 0.52);
  box-shadow: 0 15px 32px rgba(0, 0, 0, 0.27), 0 0 0 1px rgba(var(--card-rgb), 0.1);
}

.mode-card:is([data-nav="reverse"], [data-nav="mole"], [data-nav="inhibition"], [data-nav="challenge"]) { --card-rgb: var(--card-amber); }
.mode-card:is([data-nav="letters"], [data-nav="rhythm"], [data-nav="stroop"], [data-nav="movingtrack"]) { --card-rgb: var(--card-rose); }
.mode-card:is([data-nav="find"], [data-nav="flanker"], [data-nav="condition"]) { --card-rgb: var(--card-amber); }
.mode-card:is([data-nav="flash"], [data-nav="poem"], [data-nav="nback"], [data-nav="spatial"]) { --card-rgb: var(--card-violet); }
.mode-card:is([data-nav="math"], [data-nav="tracking"], [data-nav="cpt"]) { --card-rgb: var(--card-cyan); }
.mode-card:is([data-nav="stats"], [data-nav="color"], [data-nav="path"]) { --card-rgb: var(--card-mint); }

.mode-card .mode-icon {
  background: rgba(var(--card-rgb), 0.18);
  color: rgb(var(--card-rgb));
  box-shadow: inset 0 0 0 1px rgba(var(--card-rgb), 0.13);
}

.panel,
.option-card,
.interf-panel,
.level-card,
.stat-card,
.size-card,
.login-card {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.11);
}

:root[data-ui-theme="light"] {
  --bg: #f0f3f8;
  --bg-deep: #e7edf5;
  --surface: #fffdfb;
  --surface-2: #f5f7fe;
  --surface-3: #e9eff9;
  --ink: #1a2944;
  --muted: #53637e;
  --accent: #416cdb;
  --accent-2: #315bbd;
}

:root[data-ui-theme="light"] #app {
  background:
    radial-gradient(ellipse 90% 30% at 13% 0, rgba(144, 169, 255, 0.29), transparent 80%),
    radial-gradient(ellipse 75% 28% at 101% 30%, rgba(230, 180, 212, 0.2), transparent 82%),
    radial-gradient(ellipse 70% 28% at -8% 84%, rgba(117, 208, 199, 0.18), transparent 78%),
    radial-gradient(circle, rgba(85, 110, 171, 0.04) 1px, transparent 1px) 0 0 / 25px 25px,
    linear-gradient(180deg, #f4f6fc, #edf2f8);
}

:root[data-ui-theme="light"] .hero-card {
  background:
    radial-gradient(circle at 95% 0, rgba(187, 165, 255, 0.26), transparent 50%),
    radial-gradient(circle at 0 100%, rgba(113, 211, 200, 0.17), transparent 45%),
    linear-gradient(145deg, #ffffff, #f1f5ff 82%);
  border-color: rgba(87, 119, 199, 0.25);
  box-shadow: 0 18px 42px rgba(60, 91, 156, 0.14), inset 0 1px 0 #fff;
}

:root[data-ui-theme="light"] .hero-card::before { border-color: rgba(96, 119, 200, 0.13); }
:root[data-ui-theme="light"] .hero-kicker { color: #355ec3; }
:root[data-ui-theme="light"] .hero-preview { box-shadow: inset 0 0 0 1px rgba(69, 98, 157, 0.15), 0 12px 22px rgba(67, 89, 142, 0.18); }

:root[data-ui-theme="light"] .mode-card {
  background:
    radial-gradient(circle at 105% -22%, rgba(var(--card-rgb), 0.26), transparent 58%),
    linear-gradient(150deg, #fffefd, #f8faff 82%);
  border-color: rgba(var(--card-rgb), 0.31);
  box-shadow: 0 9px 23px rgba(40, 62, 106, 0.08), inset 0 1px 0 #fff;
}

:root[data-ui-theme="light"] .mode-card:hover {
  border-color: rgba(var(--card-rgb), 0.66);
  box-shadow: 0 13px 27px rgba(50, 76, 130, 0.14);
}

:root[data-ui-theme="light"] .mode-card .mode-icon {
  background: rgba(var(--card-rgb), 0.19);
  color: rgb(var(--card-rgb));
}

:root[data-ui-theme="light"] .mode-card:is([data-nav="reverse"], [data-nav="mole"], [data-nav="find"], [data-nav="inhibition"], [data-nav="challenge"], [data-nav="flanker"], [data-nav="condition"]) .mode-icon { color: #9c5c08; }
:root[data-ui-theme="light"] .mode-card:is([data-nav="letters"], [data-nav="rhythm"], [data-nav="stroop"], [data-nav="movingtrack"]) .mode-icon { color: #a73e68; }
:root[data-ui-theme="light"] .mode-card:is([data-nav="flash"], [data-nav="poem"], [data-nav="nback"], [data-nav="spatial"]) .mode-icon { color: #6944bc; }
:root[data-ui-theme="light"] .mode-card:is([data-nav="math"], [data-nav="tracking"], [data-nav="cpt"]) .mode-icon { color: #12657b; }
:root[data-ui-theme="light"] .mode-card:is([data-nav="stats"], [data-nav="color"], [data-nav="path"]) .mode-icon { color: #176d5b; }
:root[data-ui-theme="light"] .mode-card:is([data-nav="classic"], [data-nav="switch"], [data-nav="dual"], [data-nav="dynamic"]) .mode-icon { color: #315fc2; }

:root[data-ui-theme="light"] :is(.panel, .option-card, .interf-panel, .level-card, .stat-card, .size-card, .login-card) {
  background: linear-gradient(145deg, #fffdfb, #f5f8ff);
  border-color: rgba(95, 122, 180, 0.18);
  box-shadow: 0 9px 25px rgba(55, 78, 130, 0.08), inset 0 1px 0 #fff;
}

:root[data-ui-theme="light"] .stat-card:nth-child(3n + 1) { background: linear-gradient(145deg, #f8faff, #edf2ff); }
:root[data-ui-theme="light"] .stat-card:nth-child(3n + 2) { background: linear-gradient(145deg, #fffdf8, #fff4e5); }
:root[data-ui-theme="light"] .stat-card:nth-child(3n) { background: linear-gradient(145deg, #f9fffd, #eaf8f3); }
:root[data-ui-theme="light"] .size-card.selected { background: linear-gradient(145deg, #e4edff, #f2efff); }
:root[data-ui-theme="light"] .mode-tab.active { background: #fffdfb; box-shadow: 0 3px 10px rgba(55, 78, 130, 0.12); }

@media (prefers-reduced-motion: no-preference) {
  .mode-card:hover .mode-icon { transform: translateY(-2px) rotate(-3deg); }
  .mode-icon { transition: transform 0.16s ease; }
}

/* 通关庆祝：奖杯、成绩舞台和短暂彩纸 */
#screen-result {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 27%, rgba(255, 196, 83, 0.18), transparent 38%),
    radial-gradient(circle at 82% 62%, rgba(243, 120, 173, 0.1), transparent 36%);
}

#screen-result .result-body {
  position: relative;
  z-index: 1;
  gap: 14px;
  width: 100%;
  padding: 22px 0;
}

.result-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 370px);
  padding: 28px 20px 24px;
  border: 1px solid rgba(245, 187, 85, 0.34);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 11%, rgba(255, 213, 106, 0.21), transparent 52%),
    linear-gradient(165deg, var(--surface-2), var(--surface));
  box-shadow: 0 25px 60px rgba(4, 11, 28, 0.22), inset 0 1px 0 var(--line-3);
}

.result-hero::before,
.result-hero::after {
  content: "";
  position: absolute;
  top: 20px;
  width: 45px;
  height: 45px;
  border-top: 2px solid rgba(255, 204, 103, 0.52);
  pointer-events: none;
}

.result-hero::before { left: 20px; border-left: 2px solid rgba(255, 204, 103, 0.52); border-radius: 14px 0 0; }
.result-hero::after { right: 20px; border-right: 2px solid rgba(255, 204, 103, 0.52); border-radius: 0 14px 0 0; }

.result-trophy {
  position: relative;
  display: grid;
  place-items: center;
  width: 126px;
  height: 126px;
  margin-bottom: 8px;
}

.result-trophy-halo {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 109, 0.36), rgba(255, 189, 77, 0.11) 58%, transparent 72%);
  box-shadow: 0 0 0 12px rgba(255, 199, 89, 0.035), 0 0 0 27px rgba(255, 199, 89, 0.025);
}

.result-trophy svg { position: relative; width: 110px; height: 110px; filter: drop-shadow(0 12px 11px rgba(176, 106, 24, 0.24)); }

.result-spark {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #ffc850;
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: 0 0 13px rgba(255, 203, 87, 0.75);
}

.spark-one { top: 20px; left: 9px; }
.spark-two { top: 8px; right: 12px; width: 6px; height: 6px; background: #ff89aa; }
.spark-three { right: -1px; bottom: 31px; width: 7px; height: 7px; background: #79ceef; }

#screen-result .result-badge {
  min-width: 100px;
  padding: 7px 19px;
  color: #6c3d00;
  background: linear-gradient(135deg, #fff1ad, #ffc85c);
  border: 1px solid #efae42;
  box-shadow: 0 5px 13px rgba(232, 160, 51, 0.2);
}

#screen-result .result-badge.good { color: #23488f; background: linear-gradient(135deg, #e9f3ff, #a9c6ff); border-color: #84adf1; }
#screen-result .result-badge.ok { color: #754816; background: linear-gradient(135deg, #fff4d8, #ffd99a); border-color: #f3c576; }

#screen-result .result-title {
  margin: 6px 0 0;
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  font-weight: 850;
  letter-spacing: 0.02em;
}

#screen-result .result-sub { max-width: 290px; line-height: 1.5; }

#screen-result .result-time {
  margin: 17px 0 0;
  font-size: clamp(3.5rem, 16vw, 5.1rem);
  font-weight: 800;
  color: var(--ink);
  text-shadow: 0 5px 23px rgba(255, 190, 74, 0.24);
}

#screen-result .result-time span { font-size: 1.1rem; font-weight: 700; }

.result-time-caption {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
}

#screen-result .result-stats { width: min(100%, 370px); gap: 9px; margin: 0; }

#screen-result .result-stats div {
  padding: 12px 6px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 7px 18px rgba(4, 11, 28, 0.09);
}

#screen-result .result-stats div:nth-child(1) { border-color: rgba(94, 202, 173, 0.35); }
#screen-result .result-stats div:nth-child(2) { border-color: rgba(119, 151, 245, 0.35); }
#screen-result .result-stats div:nth-child(3) { border-color: rgba(244, 185, 85, 0.35); }
#screen-result .result-stats strong { font-size: 1.08rem; }

#screen-result .result-beat { width: min(100%, 370px); }

#screen-result .result-new {
  margin: 0;
  padding: 7px 17px;
  background: linear-gradient(135deg, #ffe477, #ffab61 52%, #ff86a3);
  color: #472815;
  box-shadow: 0 8px 20px rgba(246, 146, 78, 0.24);
}

#screen-result .result-actions { width: min(100%, 370px); margin-top: 3px; }

.result-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.confetti-piece {
  position: absolute;
  top: -18px;
  left: var(--confetti-x);
  width: 8px;
  height: 13px;
  border-radius: 2px;
  opacity: 0;
  animation: result-confetti-fall var(--confetti-duration) var(--confetti-delay) ease-in forwards;
}

.confetti-piece:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; }

@keyframes result-confetti-fall {
  0% { opacity: 0; transform: translate3d(0, -15px, 0) rotate(0); }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--confetti-drift), 78vh, 0) rotate(640deg); }
}

@keyframes result-hero-arrive {
  from { opacity: 0; transform: translateY(18px) scale(0.93); }
  65% { opacity: 1; transform: translateY(-5px) scale(1.015); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes result-trophy-pop {
  from { opacity: 0; transform: translateY(22px) scale(0.5) rotate(-14deg); }
  65% { opacity: 1; transform: translateY(-7px) scale(1.12) rotate(5deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes result-sparkle { 50% { transform: rotate(45deg) scale(1.45); opacity: 0.55; } }

@media (prefers-reduced-motion: no-preference) {
  #screen-result.active .result-hero { animation: result-hero-arrive 0.6s cubic-bezier(.18,.8,.25,1) both; }
  #screen-result.active .result-trophy svg { animation: result-trophy-pop 0.7s 0.18s cubic-bezier(.18,.8,.22,1) both; }
  #screen-result.active .result-spark { animation: result-sparkle 1.1s 0.5s ease-in-out 2; }
}

:root[data-ui-theme="light"] #screen-result {
  background:
    radial-gradient(circle at 50% 29%, rgba(255, 199, 91, 0.22), transparent 39%),
    radial-gradient(circle at 90% 70%, rgba(250, 154, 185, 0.13), transparent 39%);
}

:root[data-ui-theme="light"] .result-hero {
  background:
    radial-gradient(circle at 50% 7%, rgba(255, 215, 134, 0.37), transparent 52%),
    linear-gradient(160deg, #fffefb, #fff8ed 75%, #fffdfb);
  border-color: rgba(232, 173, 71, 0.45);
  box-shadow: 0 25px 55px rgba(141, 105, 53, 0.13), inset 0 1px 0 #fff;
}

:root[data-ui-theme="light"] #screen-result .result-stats div:nth-child(1) { background: #f3fffa; }
:root[data-ui-theme="light"] #screen-result .result-stats div:nth-child(2) { background: #f4f7ff; }
:root[data-ui-theme="light"] #screen-result .result-stats div:nth-child(3) { background: #fffaf0; }

@media (max-height: 710px) {
  #screen-result .result-body { gap: 6px; padding: 7px 0; }
  .result-hero { padding: 10px 13px 12px; }
  .result-trophy { width: 78px; height: 78px; margin-bottom: 0; }
  .result-trophy svg { width: 72px; height: 72px; }
  #screen-result .result-title { margin-top: 2px; }
  #screen-result .result-time { margin-top: 5px; font-size: 3.1rem; }
  #screen-result .result-stats div { padding: 8px 5px; }
  #screen-result .result-actions { gap: 7px; }
  #screen-result .result-actions .btn { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .confetti-piece,
  #screen-result .result-hero,
  #screen-result .result-trophy svg,
  #screen-result .result-spark { animation: none !important; }
}

/* 按玩法和难度筛选的排行榜 */
.leaderboard-body { gap: 14px; }
.leaderboard-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.leaderboard-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.leaderboard-field:first-child { grid-column: 1 / -1; }
.leaderboard-field span { color: var(--muted); font-size: 0.76rem; font-weight: 650; }
.leaderboard-field select {
  width: 100%;
  min-height: 42px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
}
.leaderboard-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.leaderboard-panel { padding: 16px; }
.leaderboard-summary { margin: 0 0 12px; color: var(--muted); font-size: 0.78rem; }
.leaderboard-list { display: flex; flex-direction: column; gap: 7px; }
.leaderboard-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--fill);
}
.leaderboard-row.mine { border-color: rgba(255, 188, 76, 0.65); background: rgba(255, 191, 86, 0.12); }
.leaderboard-rank { color: var(--muted); font-family: var(--mono); font-weight: 800; }
.leaderboard-row:nth-child(-n + 3) .leaderboard-rank { color: #d89b31; }
.leaderboard-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.leaderboard-score { color: var(--ink); font-family: var(--mono); font-weight: 800; white-space: nowrap; }
.result-leaderboard-notice {
  width: min(100%, 370px);
  padding: 11px 14px;
  border: 1px solid rgba(245, 177, 57, 0.55);
  border-radius: 14px;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(255, 218, 128, 0.3), rgba(255, 142, 171, 0.18));
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(156, 98, 30, 0.1);
}
.result-leaderboard-link { color: var(--accent-2); font-size: 0.86rem; font-weight: 700; padding: 7px 12px; }
.result-leaderboard-link:hover { text-decoration: underline; }

/* ---------- 管理后台：分区 / 兑换码 / 订单 / 配置 ---------- */

.admin-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 16px 0;
  border-bottom: 1px solid var(--line);
}

.admin-tab {
  flex: 1;
  padding: 10px 4px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-tab.active {
  color: var(--accent-2);
  border-bottom-color: var(--accent);
}

.role-badge.vip {
  background: linear-gradient(135deg, rgba(255, 189, 73, 0.22), rgba(255, 118, 154, 0.2));
  color: #ffd985;
}

.role-badge.used {
  background: rgba(148, 163, 184, 0.16);
  color: #aab6c8;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field select {
  min-height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--fill-2);
  background: var(--fill);
  color: var(--ink);
  font-size: 1rem;
}

.field select option {
  background: var(--surface-2);
  color: var(--ink);
}

/* 复选卡片（后台支付方式多选） */
.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.check-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--fill-2);
  background: var(--fill);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: border-color 0.15s, background 0.15s;
}

.check-card input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

.check-card:has(input:checked) {
  border-color: var(--accent);
  background: rgba(91, 140, 255, 0.12);
}

.check-card:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.code-name {
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

.code-result {
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed var(--fill-2);
}

.code-result pre {
  margin: 0 0 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.86rem;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 180px;
  overflow: auto;
}

/* ---------- 会员中心 ---------- */

.vip-status-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(91, 140, 255, 0.12), rgba(139, 92, 246, 0.1));
}

.vip-status-card.vip-active {
  border-color: rgba(255, 189, 73, 0.55);
  background: linear-gradient(135deg, rgba(255, 189, 73, 0.16), rgba(255, 118, 154, 0.12));
}

.benefit-item + .benefit-item { margin-top: 12px; }
.benefit-title { margin: 0 0 4px; font-size: 0.95rem; font-weight: 750; }
.benefit-desc { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.65; }

.vip-status-main { flex: 1; min-width: 0; }

.vip-status-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 750;
  font-size: 1.02rem;
}

.vip-status-sub {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 10px;
  border-radius: 14px;
  border: 1px solid var(--fill-2);
  background: var(--fill);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, transform 0.15s;
}

.plan-card:active { transform: scale(0.97); }

.plan-card.featured {
  border-color: rgba(255, 189, 73, 0.65);
  background: linear-gradient(160deg, rgba(255, 189, 73, 0.14), var(--fill));
}

.plan-name {
  font-size: 0.86rem;
  font-weight: 750;
}

.plan-price {
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent-2);
}

.plan-card.featured .plan-price { color: #ffd985; }

.plan-price-original {
  font-size: 0.74rem;
  color: var(--muted);
  text-decoration: line-through;
}

.plan-flag {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff769a, #ffbd49);
  color: #1d1206;
  font-size: 0.64rem;
  font-weight: 800;
  white-space: nowrap;
}

.plan-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* 支付方式入口（按后台启用情况显示） */
.pay-method {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.pay-method-label {
  color: var(--muted);
  font-size: 0.82rem;
}

.redeem-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.redeem-row input {
  flex: 1;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--fill-2);
  background: var(--fill);
  color: var(--ink);
  font-size: 0.95rem;
  font-family: var(--mono);
  text-transform: uppercase;
}