/* ========================================
   小游戏组件 + 结局图鉴 + 新美化组件样式
   ======================================== */

/* ===== 1. 小游戏触发器（故事文本内卡片） ===== */

.minigame-trigger {
  display: flex;
  align-items: center;
  gap: var(--ui-gap-10);
  padding: var(--ui-pad-md-y) var(--ui-pad-md-x);
  margin: var(--ui-gap-8) 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  width: 100%;
  box-sizing: border-box;
}

.minigame-trigger-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: color-mix(in srgb, var(--accent-color) 18%, var(--bg-tertiary));
  border-radius: var(--radius-sm);
  color: var(--accent-color);
}

.minigame-trigger-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--ui-fs-15);
  font-weight: 600;
  color: var(--text-primary);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.minigame-trigger-guide {
  flex: 1 1 100%;
  font-size: var(--ui-fs-12);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: calc(-1 * var(--ui-gap-6));
}

.minigame-trigger-btn {
  flex-shrink: 0;
  min-width: 3.6rem;
  min-height: var(--ui-comfort-tap);
  padding: var(--ui-pad-sm-y) var(--ui-pad-md-x);
  background: var(--accent-color);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--ui-fs-14);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}
.minigame-trigger-btn:active {
  opacity: 0.7;
}

/* 触发器在有描述时改为多行布局 */
.minigame-trigger:has(.minigame-trigger-guide) {
  flex-wrap: wrap;
}

/* ===== 2. 小游戏全屏覆盖层 ===== */

.minigame-overlay {
  /* absolute 而非 fixed：以 #app（整卡，max-width:500px）为定位基准，不是浏览器视口——
     否则宽屏桌面上小游戏遮罩会按整个窗口铺满，跟玩家看到的整卡对不上（同 #modal-container 的修复）。 */
  position: absolute;
  inset: 0;
  z-index: 8000;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 固定像素而非 cq 单位：overlay 现在挂在 #app（无 container-type 祖先），cqb/cqi 会退回按
     浏览器视口换算，宽屏桌面上会算出远超整卡宽度的内边距，把面板挤得只剩很小一块。 */
  padding: 16px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.minigame-overlay.active {
  opacity: 1;
}

.minigame-panel {
  width: 100%;
  max-width: min(420px, 92cqi);
  max-height: 90vh;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(1.5rem);
  transition: transform 0.25s ease;
}
.minigame-overlay.active .minigame-panel {
  transform: translateY(0);
}

/* 头部：标题 + 计时 */
.minigame-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-gap-8);
  padding: var(--ui-pad-md-y) var(--ui-pad-lg-x);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

/* 游戏说明（header 和 body 之间） */
.minigame-guide {
  font-size: var(--ui-fs-13);
  color: var(--text-secondary);
  text-align: center;
  padding: var(--ui-pad-sm-y) var(--ui-pad-lg-x);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.minigame-title {
  font-size: var(--ui-fs-16);
  font-weight: 700;
  color: var(--text-primary);
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.minigame-abort-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: calc(var(--font-size) * 1.375);
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease;
}
.minigame-abort-btn:hover,
.minigame-abort-btn:focus-visible {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.minigame-timer {
  flex-shrink: 0;
  font-size: var(--ui-fs-14);
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}
.minigame-timer.warning {
  color: var(--danger-color);
  animation: timer-pulse 0.6s ease-in-out infinite;
}
@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 游戏主体区域：内容少时居中，内容多时从顶部排列可滚动 */
.minigame-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--ui-pad-lg-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-gap-10);
}
/* 第一个子元素前面加弹性空间，最后一个后面也加，实现内容少时居中、多时靠顶 */
.minigame-body::before,
.minigame-body::after {
  content: '';
  flex: 1 0 0px;
}

.minigame-score-wrap {
  flex-shrink: 0;
  padding: 0 var(--ui-pad-lg-x) var(--ui-pad-md-y);
}
.minigame-score-wrap:empty {
  display: none;
}

.minigame-score {
  font-size: var(--ui-fs-16);
  font-weight: 700;
  color: var(--accent-color);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 结果弹层 */
.minigame-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-gap-8);
  padding: var(--ui-pad-md-y) var(--ui-pad-md-x);
  text-align: center;
  animation: result-appear 0.3s ease;
}
@keyframes result-appear {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

.minigame-result-text {
  font-size: var(--ui-fs-16);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
}
.minigame-result-note {
  font-size: var(--ui-fs-13);
  color: var(--text-secondary);
  line-height: 1.5;
}

.minigame-result-btns {
  display: flex;
  gap: var(--ui-gap-10);
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
.minigame-result-btns > .btn {
  min-width: 6rem;
}
/* 结果区可点：点任意位置关闭并跳转 */
.minigame-result-clickable {
  cursor: pointer;
}

/* ===== 2.5 共享游戏基础类 ===== */

/* 方形NxN网格容器：用 --mg-cols 控制列数 */
.mg-grid {
  display: grid;
  gap: var(--ui-gap-4);
  width: min(100%, 20rem);
  aspect-ratio: 1;
}
.mg-grid-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s, opacity 0.25s, box-shadow 0.15s;
  min-height: var(--ui-comfort-tap);
  font-family: inherit;
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--ui-fs-16);
  position: relative;
  overflow: hidden;
}
.mg-grid-cell:active { transform: scale(0.92); }
.mg-grid-cell.selected {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-secondary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 25%, transparent);
  transform: scale(1.05);
}
.mg-grid-cell.correct {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 15%, var(--bg-secondary));
}
.mg-grid-cell.wrong {
  animation: mg-cell-wrong 0.35s ease;
}
.mg-grid-cell.done {
  opacity: 0.25;
  pointer-events: none;
}
.mg-grid-cell.removing {
  animation: mg-remove 0.4s ease forwards;
  pointer-events: none;
}

/* 通用卡片按钮 */
.mg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ui-gap-4);
  padding: var(--ui-pad-md-y);
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
  font-family: inherit;
  color: var(--text-primary);
  min-height: var(--ui-comfort-tap);
}
.mg-card:active { transform: scale(0.93); }
.mg-card.selected {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 15%, var(--bg-secondary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 25%, transparent);
}

/* 三选一视觉内容 */
.mg-visual-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  word-break: break-word;
  width: 100%;
  height: 100%;
}
.mg-visual-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mg-visual-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
.mg-visual-color {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* SVG 圆形进度环 */
.mg-progress-ring {
  position: relative;
  width: min(100%, 12rem);
  aspect-ratio: 1;
  margin: 0 auto;
}
.mg-progress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.mg-progress-ring-bg {
  fill: none;
  stroke: var(--bg-tertiary);
}
.mg-progress-ring-fill {
  fill: none;
  stroke: var(--accent-color);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}
.mg-progress-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.mg-progress-ring-label {
  font-size: var(--ui-fs-13);
  font-weight: 500;
  color: var(--text-secondary);
}

/* 引导文字 */
.mg-guide-text {
  font-size: var(--ui-fs-14);
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
  width: 100%;
}

/* 操作按钮 */
.mg-action-btn {
  min-height: var(--ui-comfort-tap);
  padding: var(--ui-pad-md-y) var(--ui-pad-lg-x);
  background: var(--accent-color);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--ui-fs-16);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  align-self: center;
}
.mg-action-btn:active {
  opacity: 0.7;
  transform: scale(0.95);
}

/* QTE 单按钮：进度环 + 计数合为一体 */
.mg-qte-tap-btn {
  position: relative;
  width: min(100%, 10rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-secondary));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, box-shadow 0.15s;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-color) 30%, transparent);
  user-select: none;
}
.mg-qte-tap-btn:active {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color) 20%, transparent);
}
.mg-qte-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mg-qte-ring-fill {
  transition: stroke-dashoffset 0.15s ease;
}
.mg-qte-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.mg-qte-count {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.mg-qte-total {
  font-size: var(--ui-fs-13);
  color: var(--text-muted);
}

/* 阶段标签 */
.mg-phase-tag {
  display: inline-block;
  padding: var(--ui-pad-xs-y) var(--ui-pad-md-x);
  border-radius: 999px;
  font-size: var(--ui-fs-13);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent-color) 15%, var(--bg-secondary));
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
}

/* 共享动画 */
@keyframes mg-cell-wrong {
  0%, 100% { border-color: var(--border-color); }
  50% { border-color: var(--danger-color); background: color-mix(in srgb, var(--danger-color) 20%, var(--bg-secondary)); }
}
@keyframes mg-remove {
  from { opacity: 1; transform: scale(1) rotate(0deg); }
  to { opacity: 0; transform: scale(0) rotate(45deg); }
}
@keyframes mg-pop {
  from { opacity: 0; transform: scale(0.7) translateY(0.5rem); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes mg-float-up {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-2rem); }
}
@keyframes mg-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 40%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-color) 0%, transparent); }
}
@keyframes mg-ripple {
  from { transform: scale(0); opacity: 0.4; }
  to { transform: scale(2.5); opacity: 0; }
}
@keyframes mg-3d-flip {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(180deg); }
}

/* ===== 3. 各小游戏样式 ===== */

/* --- 石头剪刀布：对战区 + 选择按钮 --- */
.minigame-rps-status {
  font-size: var(--ui-fs-13);
  color: var(--text-muted);
  text-align: center;
}
.minigame-rps-score {
  font-size: var(--ui-fs-16);
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
}
.minigame-rps-arena {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-gap-10);
  width: 100%;
  padding: var(--ui-pad-md-y) 0;
}
.minigame-rps-fighter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-gap-6);
}
.minigame-rps-fighter-icon {
  width: 5.5rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: transform 0.3s, border-color 0.3s;
}
.minigame-rps-fighter-icon.minigame-rps-reveal {
  animation: mg-pop 0.35s ease;
  border-color: var(--accent-color);
}
.minigame-rps-fighter-label {
  font-size: var(--ui-fs-13);
  font-weight: 600;
  color: var(--text-secondary);
}
.minigame-rps-vs-text {
  font-size: var(--ui-fs-16);
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}
.minigame-rps-result-text {
  font-size: var(--ui-fs-16);
  font-weight: 700;
  text-align: center;
  min-height: 1.5em;
}
.minigame-rps-choices {
  display: flex;
  gap: var(--ui-gap-10);
  justify-content: center;
  width: 100%;
}
.minigame-rps-btn {
  flex: 1 1 0;
  max-width: 6rem;
}
.minigame-rps-btn .mg-card-icon {
  font-size: 2.2rem;
  line-height: 1;
}
.minigame-rps-btn .mg-card-label {
  font-size: var(--ui-fs-13);
  font-weight: 600;
  color: var(--text-secondary);
}

/* --- 骰子比大小：CSS点阵骰面 --- */
.minigame-dice-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: var(--ui-pad-md-y) 0;
  width: 100%;
}
.minigame-dice-face {
  width: 5rem;
  height: 5rem;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 0.5rem;
  gap: 2px;
}
.minigame-dice-dot {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--text-primary);
}
.minigame-dice-dot.hidden { visibility: hidden; }
.minigame-dice-face.rolling {
  animation: dice-roll 0.12s linear infinite;
}
.minigame-dice-face.numeric {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.minigame-dice-vs {
  font-size: var(--ui-fs-16);
  font-weight: 700;
  color: var(--text-muted);
}
.minigame-dice-label {
  font-size: var(--ui-fs-12);
  color: var(--text-secondary);
  text-align: center;
  margin-top: var(--ui-gap-4);
}
.minigame-dice-status {
  font-size: var(--ui-fs-14);
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}
@keyframes dice-roll {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(8deg) scale(1.05); }
  50% { transform: rotate(0deg) scale(1); }
  75% { transform: rotate(-8deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}

/* 这几个小游戏的外层包装 div 本身不设宽度时，子元素 width:min(100%,Nrem) 的
   百分比找不到确定的包含块基准会退化坍缩成格子自身最小可点尺寸——
   井字棋/数字速点/打地鼠/拼图棋盘因此被压成远小于设计尺寸的一小块。 */
.minigame-ttt,
.minigame-speedclick,
.minigame-whack,
.minigame-puzzle {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-gap-10);
}

/* --- 井字棋：CSS交叉线/圆环 --- */
.minigame-ttt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ui-gap-4);
  width: min(100%, 18rem);
  aspect-ratio: 1;
}
.minigame-ttt-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  aspect-ratio: 1;
  min-height: var(--ui-comfort-tap);
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.minigame-ttt-cell:disabled {
  opacity: 1;
  cursor: default;
}
.minigame-ttt-cell:active:not(:disabled) { background: var(--bg-tertiary); }
/* X 用 CSS 两条交叉线 */
.minigame-ttt-cell.x::before,
.minigame-ttt-cell.x::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 3px;
  background: var(--accent-color);
  border-radius: 2px;
}
.minigame-ttt-cell.x::before { transform: rotate(45deg); }
.minigame-ttt-cell.x::after { transform: rotate(-45deg); }
/* O 用 CSS 圆环 */
.minigame-ttt-cell.o::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  border: 3px solid var(--text-secondary);
  border-radius: 50%;
}
.minigame-ttt-cell.win {
  background: color-mix(in srgb, var(--accent-color) 20%, var(--bg-secondary));
  box-shadow: inset 0 0 0 2px var(--accent-color);
  animation: mg-pulse 1.2s ease-in-out infinite;
}
.minigame-ttt-status {
  font-size: var(--ui-fs-14);
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}

/* --- QTE 连点：圆形进度环 + 大按钮 --- */
.minigame-qte-ring-btn {
  width: min(100%, 12rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent-color);
  color: var(--text-on-accent);
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: inherit;
  transition: transform 0.08s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-color) 40%, transparent);
}
.minigame-qte-ring-btn:active { transform: scale(0.92); }
/* 涟漪效果 */
.minigame-qte-ring-btn .mg-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  animation: mg-ripple 0.6s ease-out forwards;
  pointer-events: none;
}

/* --- 长按充能：圆形进度环 + 按钮脉冲 --- */
.minigame-hold-ring-btn {
  width: min(100%, 10rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 3px solid var(--border-color);
  cursor: pointer;
  font-size: 1.3rem;
  font-weight: 600;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  min-height: var(--ui-comfort-tap);
}
.minigame-hold-ring-btn.active {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-secondary));
  animation: mg-hold-pulse 0.8s ease-in-out infinite;
}
@keyframes mg-hold-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.95); }
}

/* --- 停止条：渐变轨道 + 发光指针 --- */
.minigame-bar-track {
  width: 100%;
  height: 3rem;
  background: linear-gradient(90deg, var(--bg-tertiary), color-mix(in srgb, var(--accent-color) 8%, var(--bg-tertiary)), var(--bg-tertiary));
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
}
/* 刻度线 */
.minigame-bar-track::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent, transparent 9.5%, color-mix(in srgb, var(--border-color) 30%, transparent) 10%);
  pointer-events: none;
}
.minigame-bar-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--accent-color) 25%, transparent);
  border-left: 2px solid var(--accent-color);
  border-right: 2px solid var(--accent-color);
}
.minigame-bar-indicator {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 4px;
  background: var(--text-on-accent);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent-color), 0 0 16px color-mix(in srgb, var(--accent-color) 60%, transparent);
  transition: none;
}
.minigame-bar-indicator.hit {
  background: var(--accent-color);
  box-shadow: 0 0 12px var(--accent-color);
  animation: mg-bar-flash 0.3s ease 2;
}
.minigame-bar-indicator.miss {
  background: var(--danger-color);
  box-shadow: 0 0 12px var(--danger-color);
  animation: mg-bar-flash 0.3s ease 2;
}
@keyframes mg-bar-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* --- 数字速点：NxN 方形网格（列数由 JS inline style 设置） --- */
.minigame-speedclick-grid {
  display: grid;
  gap: var(--ui-gap-4);
  width: min(100%, 20rem);
  aspect-ratio: 1;
}
.minigame-speedclick-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-fs-16);
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s, opacity 0.2s, transform 0.1s, border-color 0.15s, box-shadow 0.15s;
  aspect-ratio: 1;
  min-height: var(--ui-comfort-tap);
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}
.minigame-speedclick-cell:active { transform: scale(0.9); }
.minigame-speedclick-cell.cleared {
  opacity: 0.2;
  pointer-events: none;
  background: var(--bg-tertiary);
}
.minigame-speedclick-cell.next {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 25%, transparent);
  animation: mg-pulse 1.5s ease-in-out infinite;
}
.minigame-speedclick-cell.wrong {
  animation: mg-cell-wrong 0.35s ease;
}
.minigame-speedclick-info {
  font-size: var(--ui-fs-14);
  color: var(--text-secondary);
  text-align: center;
}
.minigame-speedclick-next {
  font-size: var(--ui-fs-16);
  font-weight: 700;
  color: var(--accent-color);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- 打地鼠：NxN方形网格 + 弹出动画 --- */
.minigame-whack-grid {
  display: grid;
  gap: var(--ui-gap-6);
  width: min(100%, 20rem);
  aspect-ratio: 1;
}
.minigame-whack-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 洞：径向渐变深色 */
  background: radial-gradient(circle, color-mix(in srgb, var(--bg-tertiary) 100%, transparent) 60%, var(--bg-secondary) 100%);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  min-height: var(--ui-comfort-tap);
  font-family: inherit;
}
.minigame-whack-mole {
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: var(--accent-color);
  opacity: 0;
  transform: scale(0.3) translateY(40%);
  transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.minigame-whack-cell.active .minigame-whack-mole {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.minigame-whack-cell.hit .minigame-whack-mole {
  opacity: 0.4;
  transform: scale(0.5) rotate(20deg);
}

/* --- 停表挑战：大号等宽数字 --- */
.minigame-stopwatch-target {
  font-size: var(--ui-fs-13);
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.05em;
}
.minigame-stopwatch-display {
  font-size: calc(var(--font-size) * 4.5);
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  padding: var(--ui-pad-lg-x) var(--ui-pad-lg-x);
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 2px 12px color-mix(in srgb, var(--accent-color) 6%, transparent), 0 2px 8px rgba(0,0,0,0.1);
  min-width: 16rem;
  line-height: 1.2;
}
.minigame-stopwatch-diff {
  font-size: var(--ui-fs-14);
  font-weight: 600;
  text-align: center;
  margin-top: var(--ui-gap-8);
}
.minigame-stopwatch-diff.good { color: var(--accent-color); }
.minigame-stopwatch-diff.bad { color: var(--danger-color); }

/* --- 接物品：渐变区域 + 篮子 --- */
.minigame-catch-area {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 60vh;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-color) 12%, var(--bg-tertiary)), var(--bg-tertiary));
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  touch-action: none;
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--accent-color) 6%, transparent);
}
.minigame-catch-item {
  position: absolute;
  width: 1.8rem;
  height: 1.8rem;
  line-height: 1;
  transition: none;
  will-change: transform;
}
.minigame-catch-item--default {
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent-color) 40%, transparent);
}
.minigame-catch-item-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.minigame-catch-basket {
  position: absolute;
  bottom: 8%;
  height: 4px;
  background: var(--accent-color);
  border-radius: 2px;
  transition: left 0.05s linear;
  transform: translateX(-50%);
  will-change: left;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-color) 50%, transparent);
}
.minigame-catch-plus {
  position: absolute;
  font-size: var(--ui-fs-14);
  font-weight: 700;
  color: var(--accent-color);
  pointer-events: none;
  animation: mg-float-up 0.6s ease-out forwards;
}

/* --- 翻翻乐：3D翻转卡牌（不明牌记忆消除） --- */
.minigame-memory-grid {
  display: grid;
  gap: var(--ui-gap-6);
  width: min(100%, 20rem);
  margin: 0 auto;
}
.minigame-memory-card {
  perspective: 600px;
  cursor: pointer;
  min-height: var(--ui-comfort-tap);
  aspect-ratio: 1;
  padding: 0;
  background: none;
  border: none;
  appearance: none;
}
.minigame-memory-card-inner {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
}
.minigame-memory-card.flipped .minigame-memory-card-inner {
  transform: rotateY(180deg);
}
.minigame-memory-card-front,
.minigame-memory-card-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-color);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  font-size: 1.5rem;
  overflow: hidden;
  box-sizing: border-box;
}
/* 正面（未翻开时朝上，所有卡背面一样）：斜纹装饰清晰可见 */
.minigame-memory-card-front {
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--accent-color) 12%, var(--bg-secondary)),
    color-mix(in srgb, var(--accent-color) 12%, var(--bg-secondary)) 5px,
    color-mix(in srgb, var(--accent-color) 28%, var(--bg-secondary)) 5px,
    color-mix(in srgb, var(--accent-color) 28%, var(--bg-secondary)) 10px
  );
  color: var(--text-muted);
  border-color: color-mix(in srgb, var(--accent-color) 40%, var(--border-color));
}
/* 背面（翻开后显示内容） */
.minigame-memory-card-back {
  background: var(--bg-primary);
  color: var(--text-primary);
  transform: rotateY(180deg);
  border-color: var(--accent-color);
}
.minigame-memory-card-back img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.minigame-memory-card.matched .minigame-memory-card-inner {
  transform: rotateY(180deg);
}
.minigame-memory-card.matched {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* --- 拼图：选中框更明显 --- */
.minigame-puzzle-grid {
  display: grid;
  gap: var(--ui-gap-4);
  width: min(100%, 20rem);
  aspect-ratio: 1;
}
.minigame-puzzle-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-fs-14);
  font-weight: 600;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  aspect-ratio: 1;
  min-height: var(--ui-comfort-tap);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.minigame-puzzle-cell.selected {
  border-color: var(--accent-color);
  border-width: 3px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 30%, transparent), 0 4px 12px color-mix(in srgb, var(--accent-color) 20%, transparent);
  transform: scale(1.05);
  z-index: 2;
}
.minigame-puzzle-cell.correct {
  border-color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color) 10%, var(--bg-secondary));
}

/* --- 消除配对：明牌手速消除 + CSS图形 --- */
.minigame-match-grid {
  display: grid;
  gap: var(--ui-gap-4);
  width: min(100%, 20rem);
  margin: 0 auto;
}
.minigame-match-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, opacity 0.3s, transform 0.3s, box-shadow 0.15s;
  aspect-ratio: 1;
  min-height: var(--ui-comfort-tap);
  overflow: hidden;
}
.minigame-match-cell .mg-shape {
  width: 55%;
  height: 55%;
  transition: transform 0.15s;
}
.minigame-match-cell.selected {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-secondary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 25%, transparent);
  transform: scale(1.05);
}
.minigame-match-cell.removing {
  animation: mg-remove 0.4s ease forwards;
  pointer-events: none;
}
.minigame-match-cell.removed {
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}
.minigame-match-cell.wrong {
  animation: mg-cell-wrong 0.35s ease;
}

/* CSS 形状集合 */
.mg-shape-circle { border-radius: 50%; }
.mg-shape-diamond { transform: rotate(45deg); border-radius: 3px; }
.mg-shape-triangle {
  width: 0 !important;
  height: 0 !important;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-bottom: 1.7rem solid currentColor;
  background: none !important;
}
.mg-shape-star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.mg-shape-heart {
  clip-path: polygon(50% 85%, 5% 40%, 5% 20%, 25% 0%, 50% 15%, 75% 0%, 95% 20%, 95% 40%);
}
.mg-shape-cross {
  clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%);
}

/* --- 节奏点击：箭头下落 + 判定线 ---
   外层 .minigame-rhythm 本身不设宽度时，子元素 width:min(100%,20rem) 的
   百分比找不到确定的包含块基准会退化坍缩；这里显式给外层宽度撑起来。 */
.minigame-rhythm {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-gap-10);
}
.minigame-rhythm-field {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: min(100%, 20rem);
  height: min(50vh, 22rem);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.minigame-rhythm-lane {
  position: relative;
  border-right: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
}
.minigame-rhythm-lane:last-child { border-right: none; }
.minigame-rhythm-note {
  position: absolute;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  height: 2.5rem;
  color: var(--accent-color);
  will-change: top;
}
.minigame-rhythm-note.hit {
  color: var(--accent-color);
  opacity: 0;
  transition: opacity 0.2s;
}
.minigame-rhythm-note.miss {
  color: var(--danger-color);
  opacity: 0;
  transition: opacity 0.3s;
}
/* 判定线：距底部 10% 的位置，足够粗以便看到 */
.minigame-rhythm-hitline {
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent-color) 70%, transparent), 0 -2px 8px color-mix(in srgb, var(--accent-color) 30%, transparent);
  z-index: 2;
}
.minigame-rhythm-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ui-gap-4);
  width: min(100%, 20rem);
}
.minigame-rhythm-btn {
  min-height: var(--ui-comfort-tap);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: inherit;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.08s, border-color 0.08s;
}
.minigame-rhythm-btn:active { background: var(--bg-tertiary); }
.minigame-rhythm-btn.flash {
  background: color-mix(in srgb, var(--accent-color) 25%, var(--bg-secondary));
  border-color: var(--accent-color);
}
.minigame-rhythm-feedback {
  font-size: var(--ui-fs-16);
  font-weight: 700;
  text-align: center;
  min-height: 1.5em;
  animation: mg-pop 0.3s ease;
}

/* --- 记忆闪现：方形网格 + 闪烁光效 --- */
.minigame-pattern {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-gap-8);
  width: 100%;
}
.minigame-pattern-grid {
  display: grid;
  gap: var(--ui-gap-6);
  width: min(100%, 22rem);
  aspect-ratio: 1;
  margin: 0 auto;
}
.minigame-pattern-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  aspect-ratio: 1;
  min-height: var(--ui-comfort-tap);
}
.minigame-pattern-cell[data-phase="show"] { pointer-events: none; }
.minigame-pattern-cell.flash {
  background: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--accent-color) 40%, transparent);
}
.minigame-pattern-cell.selected {
  background: color-mix(in srgb, var(--accent-color) 25%, var(--bg-secondary));
  border-color: var(--accent-color);
}
.minigame-pattern-cell.correct {
  background: color-mix(in srgb, var(--accent-color) 20%, var(--bg-secondary));
  border-color: var(--accent-color);
}
.minigame-pattern-cell.wrong {
  background: color-mix(in srgb, var(--danger-color) 25%, var(--bg-secondary));
  border-color: var(--danger-color);
  animation: mg-cell-wrong 0.35s ease;
}
.minigame-pattern-info {
  font-size: var(--ui-fs-14);
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  min-height: 1.5em;
  padding: var(--ui-pad-sm-y) 0;
}

/* --- 拖拽排序（两种模式共用） --- */
.minigame-drag-sentence {
  font-size: var(--ui-fs-15);
  color: var(--text-primary);
  line-height: 2;
  text-align: center;
  width: 100%;
}
.minigame-drag-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  min-height: 2rem;
  padding: var(--ui-pad-xs-y) var(--ui-pad-sm-x);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-color) 5%, var(--bg-secondary));
  margin: 0 var(--ui-gap-4);
  vertical-align: middle;
  transition: border-color 0.15s, background 0.15s;
}
.minigame-drag-slot.filled {
  border-style: solid;
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-secondary));
}
.minigame-drag-slot.drop-hover {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 15%, var(--bg-secondary));
}
.minigame-drag-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-gap-6);
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  padding: var(--ui-pad-md-y);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent-color) 3%, var(--bg-secondary));
}
.minigame-drag-pool {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-gap-6);
  justify-content: center;
  width: 100%;
}
.minigame-drag-word {
  display: inline-flex;
  align-items: center;
  padding: var(--ui-pad-sm-y) var(--ui-pad-md-x);
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--ui-fs-14);
  color: var(--text-primary);
  min-height: var(--ui-comfort-tap);
  cursor: pointer;
  transition: border-color 0.15s, opacity 0.15s;
  user-select: none;
}
.minigame-drag-word:active {
  border-color: var(--accent-color);
}
.minigame-drag-word.placed {
  opacity: 0.4;
  pointer-events: none;
}
/* 通用反馈文字（正确/错误由 JS 通过 style.color 设置主题色） */
.minigame-drag-feedback {
  font-size: var(--ui-fs-14);
  font-weight: 600;
  text-align: center;
  animation: mg-pop 0.3s ease;
  min-height: 1.2em;
}

/* ===== 4. 结局图鉴 ===== */

.ending-gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 7500;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.ending-gallery-overlay.active {
  opacity: 1;
}

.ending-gallery-container {
  width: 100%;
  max-width: min(480px, 94cqi);
  max-height: 88vh;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(1.5rem);
  transition: transform 0.25s ease;
}
.ending-gallery-overlay.active .ending-gallery-container {
  transform: translateY(0);
}

.ending-gallery-header {
  display: flex;
  align-items: center;
  gap: var(--ui-gap-8);
  padding: var(--ui-pad-md-y) var(--ui-pad-lg-x);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.ending-gallery-title {
  flex: 1 1 auto;
  font-size: var(--ui-fs-16);
  font-weight: 700;
  color: var(--text-primary);
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.ending-gallery-counter {
  flex-shrink: 0;
  font-size: var(--ui-fs-13);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.ending-gallery-close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.ending-gallery-close:active {
  background: var(--bg-tertiary);
}

/* 图鉴网格 */
.ending-gallery-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--ui-pad-lg-x);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(7rem, 42cqi), 1fr));
  gap: var(--ui-gap-10);
  align-content: start;
}

.ending-gallery-tile {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.ending-gallery-tile:active {
  transform: scale(0.96);
}
.ending-gallery-tile.unlocked {
  border-color: color-mix(in srgb, var(--accent-color) 40%, var(--border-color));
}
.ending-gallery-tile.unlocked:active {
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent-color) 20%, transparent);
}
.ending-gallery-tile.locked {
  opacity: 0.6;
  cursor: default;
}
.ending-gallery-tile.locked:active {
  transform: none;
}

.ending-gallery-tile-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--bg-tertiary);
  pointer-events: auto;
}

.ending-gallery-tile-name {
  padding: var(--ui-pad-sm-y) var(--ui-pad-sm-x);
  font-size: var(--ui-fs-12);
  color: var(--text-primary);
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.ending-gallery-tile-lock {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--text-muted);
  background: var(--bg-tertiary);
}

.ending-gallery-tile-placeholder {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--text-muted);
  background: var(--bg-tertiary);
}

/* 图鉴详情弹窗 */
.ending-gallery-detail {
  position: fixed;
  inset: 0;
  z-index: 7600;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5cqb 5cqi;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ending-gallery-detail.active {
  opacity: 1;
}

.ending-gallery-detail-image {
  width: 100%;
  max-width: min(360px, 85cqi);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  margin: 0 auto var(--ui-gap-10);
  background: var(--bg-tertiary);
  pointer-events: auto;
}

.ending-gallery-detail-name {
  font-size: var(--ui-fs-16);
  font-weight: 700;
  color: var(--text-on-accent);
  text-align: center;
  margin-bottom: var(--ui-gap-6);
}

.ending-gallery-detail-desc {
  font-size: var(--ui-fs-14);
  color: color-mix(in srgb, var(--text-on-accent) 75%, transparent);
  text-align: center;
  line-height: 1.6;
  max-width: min(360px, 85cqi);
  margin: 0 auto;
}

.ending-gallery-detail-close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top, 1rem));
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  color: var(--text-on-accent);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s;
  min-height: var(--ui-comfort-tap);
  min-width: var(--ui-comfort-tap);
}
.ending-gallery-detail-close:active {
  background: rgba(255, 255, 255, 0.3);
}

/* ===== 5. 新美化组件样式 ===== */

/* --- 问答卡 --- */
.surface-qa-item {
  margin: var(--ui-gap-8) 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-secondary);
}
.surface-qa-question {
  padding: var(--ui-pad-md-y) var(--ui-pad-md-x);
  font-size: var(--ui-fs-14);
  font-weight: 600;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-secondary));
  border-bottom: 1px solid var(--border-color);
}
.surface-qa-answer {
  padding: var(--ui-pad-md-y) var(--ui-pad-md-x);
  font-size: var(--ui-fs-14);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ---------- 评分输入器弹窗 ---------- */
.widget-star-rating-dialog {
  display: flex;
  flex-direction: column;
  gap: var(--ui-gap-14);
  padding: var(--ui-pad-md-y) var(--ui-pad-md-x);
  min-width: 260px;
}
.widget-star-rating-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ui-gap-6);
}
.widget-star-rating-icon {
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.widget-star-rating-icon svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: var(--bg-tertiary);
  stroke: var(--border-color);
  stroke-width: 0.5;
  transition: fill 0.15s ease;
}
.widget-star-rating-icon:active {
  transform: scale(1.2);
}
.widget-star-rating-icon.active svg {
  fill: var(--accent-color);
  stroke: color-mix(in srgb, var(--accent-color) 80%, #000);
  filter: drop-shadow(0 1px 4px var(--accent-glow));
}
.widget-star-rating-icon.half svg {
  fill: var(--accent-color);
  stroke: color-mix(in srgb, var(--accent-color) 80%, #000);
  opacity: 0.5;
}
.widget-star-rating-footer {
  display: flex;
  justify-content: center;
}

/* ---------- 路牌（"我在xxx很想你" 扁平公路指示牌风格）---------- */
.surface-road-sign {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: var(--ui-gap-10) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 2px solid var(--accent-color);
}
/* 上层：主题色底 + 白字，扁平宽大 */
.surface-road-sign-upper {
  padding: 0.8rem 1.2rem;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.08em;
  background: var(--accent-color);
  color: var(--text-on-accent);
}
/* 下层：浅色底 + 深色字 */
.surface-road-sign-lower {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-gap-6);
  padding: 0.35rem 1rem;
  font-size: var(--ui-fs-13);
  font-weight: 600;
  letter-spacing: 0.12em;
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.surface-road-sign-arrow { font-size: 1rem; font-weight: 700; color: var(--accent-color); }
.surface-road-sign-location { white-space: nowrap; }
.surface-road-sign-upper:last-child { padding: 0.9rem 1.2rem; }

/* ---- 经典：标准公路牌，圆角+白边内嵌 ---- */
.surface-road-sign.classic {
  border-radius: var(--radius-md);
  border: 3px solid var(--text-on-accent);
  outline: 3px solid var(--accent-color);
}

/* ---- 霓虹：整块深色底 + 主题色描边文字 + 边框发光 ---- */
.surface-road-sign.neon {
  border: 1px solid color-mix(in srgb, var(--accent-color) 60%, transparent);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  box-shadow: 0 0 8px var(--accent-glow), inset 0 0 30px rgba(0,0,0,0.5);
  animation: sign-neon 3s ease-in-out infinite;
}
@keyframes sign-neon {
  0%,100% { border-color: color-mix(in srgb, var(--accent-color) 60%, transparent); }
  50%     { border-color: var(--accent-color); box-shadow: 0 0 14px var(--accent-glow), inset 0 0 30px rgba(0,0,0,0.5); }
}
.surface-road-sign.neon .surface-road-sign-upper {
  background: transparent;
  color: var(--text-on-accent);
  -webkit-text-stroke: 0.5px var(--accent-color);
  text-shadow: 0 0 8px var(--accent-glow);
  padding-bottom: 0.5rem;
}
.surface-road-sign.neon .surface-road-sign-lower {
  background: transparent;
  color: color-mix(in srgb, var(--accent-color) 50%, #aaa);
  font-size: var(--ui-fs-12);
  padding-top: 0.25rem;
  border-top: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
}
.surface-road-sign.neon .surface-road-sign-arrow {
  color: var(--accent-color);
  text-shadow: 0 0 6px var(--accent-glow);
}

/* ---- 简约：无边框无背景，纯文字+横线 ---- */
.surface-road-sign.minimal {
  border: none;
  border-radius: 0;
  overflow: visible;
}
.surface-road-sign.minimal .surface-road-sign-upper {
  background: none;
  color: var(--text-primary);
  font-size: 1.15rem;
  padding: 0 0 0.4rem;
  border-bottom: 2px solid var(--accent-color);
}
.surface-road-sign.minimal .surface-road-sign-lower {
  background: none;
  color: var(--text-muted);
  font-size: var(--ui-fs-11);
  padding: 0.3rem 0 0;
}
.surface-road-sign.minimal .surface-road-sign-arrow { color: var(--text-muted); }

/* ---- 复古：双线框+衬线+微斜 ---- */
.surface-road-sign.vintage {
  border: 4px double var(--accent-color);
  border-radius: 0;
  transform: rotate(-1.5deg);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.08);
}
.surface-road-sign.vintage .surface-road-sign-upper {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.15em;
}
.surface-road-sign.vintage .surface-road-sign-lower {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  letter-spacing: 0.2em;
}

/* --- 标题特效（通过动画/效果区分，不依赖颜色） --- */
.surface-title-effect {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
  margin: var(--ui-gap-10) 0;
  text-align: center;
  color: var(--text-primary);
}
.surface-title-effect.glow {
  text-shadow: 0 0 6px rgba(255,255,255,.3), 0 0 20px rgba(255,255,255,.15), 0 0 40px rgba(255,255,255,.08);
  animation: title-glow-pulse 2.5s ease-in-out infinite;
}
@keyframes title-glow-pulse {
  0%,100% { text-shadow: 0 0 6px rgba(255,255,255,.3), 0 0 20px rgba(255,255,255,.15), 0 0 40px rgba(255,255,255,.08); }
  50%     { text-shadow: 0 0 10px rgba(255,255,255,.5), 0 0 30px rgba(255,255,255,.3), 0 0 60px rgba(255,255,255,.15); }
}
.surface-title-effect.typewriter {
  font-family: "Courier New", Consolas, monospace;
  overflow: hidden; white-space: nowrap;
  border-right: 3px solid var(--text-primary);
  width: 0;
  animation: title-typewriter 2s steps(30,end) forwards, title-cursor-blink .8s step-end infinite;
  margin-left: auto; margin-right: auto;
}
@keyframes title-typewriter { from { width: 0; } to { width: 100%; } }
@keyframes title-cursor-blink { 0%,50% { border-right-color: var(--text-primary); } 51%,100% { border-right-color: transparent; } }
.surface-title-effect.stamp {
  display: inline-block;
  padding: var(--ui-pad-sm-y) var(--ui-pad-lg-x);
  border: 3px solid var(--text-primary);
  border-radius: var(--radius-sm);
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 rgba(0,0,0,.15);
  letter-spacing: .1em;
  position: relative;
}
.surface-title-effect.stamp::after {
  content: ''; position: absolute; inset: -1px;
  background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0,0,0,.03) 3px, rgba(0,0,0,.03) 6px);
  border-radius: inherit; pointer-events: none;
}
.surface-title-effect.underline {
  position: relative; display: inline-block; padding-bottom: .3em;
}
.surface-title-effect.underline::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%;
  background: var(--text-primary); border-radius: 2px;
  animation: title-underline-expand .6s ease-out forwards; transform-origin: left;
}
@keyframes title-underline-expand { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.surface-title-effect.glitch {
  position: relative; animation: title-glitch-shift 3s infinite;
}
.surface-title-effect.glitch::before,
.surface-title-effect.glitch::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%;
  text-align: center; pointer-events: none;
}
.surface-title-effect.glitch::before { clip-path: inset(0 0 60% 0); animation: title-glitch-top 2s infinite linear alternate-reverse; }
.surface-title-effect.glitch::after  { clip-path: inset(60% 0 0 0); animation: title-glitch-bottom 2.5s infinite linear alternate-reverse; }
@keyframes title-glitch-shift  { 0%,90%,100% { transform: none; } 92% { transform: skewX(-2deg); } 94% { transform: skewX(2deg); } }
@keyframes title-glitch-top    { 0%,85%,100% { transform: translateX(0); } 88% { transform: translateX(-3px); } 92% { transform: translateX(3px); } }
@keyframes title-glitch-bottom { 0%,80%,100% { transform: translateX(0); } 83% { transform: translateX(4px); } 87% { transform: translateX(-4px); } }

/* --- 标题特效：方框（双层边框 + 四角装饰线条） --- */
.surface-title-effect.box {
  display: inline-block;
  padding: var(--ui-pad-md-y) var(--ui-pad-lg-x);
  border: 2px solid var(--text-primary);
  outline: 1px solid color-mix(in srgb, var(--text-primary) 30%, transparent);
  outline-offset: 4px;
  position: relative;
}
.surface-title-effect.box::before,
.surface-title-effect.box::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--text-primary);
  border-style: solid;
}
.surface-title-effect.box::before {
  top: -6px; left: -6px;
  border-width: 2px 0 0 2px;
}
.surface-title-effect.box::after {
  bottom: -6px; right: -6px;
  border-width: 0 2px 2px 0;
}

/* --- 标题特效：横幅（带两端折角的飘带造型） --- */
.surface-title-effect.ribbon {
  display: inline-block;
  padding: var(--ui-pad-sm-y) 2rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.surface-title-effect.ribbon::before,
.surface-title-effect.ribbon::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
}
.surface-title-effect.ribbon::before {
  left: -0.8rem;
  border-width: 1.1em 0.8rem 1.1em 0;
  border-color: transparent var(--bg-tertiary) transparent transparent;
}
.surface-title-effect.ribbon::after {
  right: -0.8rem;
  border-width: 1.1em 0 1.1em 0.8rem;
  border-color: transparent transparent transparent var(--bg-tertiary);
}

/* --- 标题特效：分隔线（上下各有装饰线条，居中排列） --- */
.surface-title-effect.split {
  display: flex;
  align-items: center;
  gap: var(--ui-gap-10);
}
.surface-title-effect.split::before,
.surface-title-effect.split::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to var(--_dir, right),
    transparent,
    var(--text-primary) 30%,
    var(--text-primary) 70%,
    transparent
  );
}
.surface-title-effect.split::before { --_dir: right; }
.surface-title-effect.split::after  { --_dir: left;  }

/* --- 标题特效：淡入（从透明缓缓出现） --- */
.surface-title-effect.fade-in {
  animation: title-fade-in 1.5s ease-out forwards;
  opacity: 0;
}
@keyframes title-fade-in {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- 标题特效：弹入（从缩小弹入到正常） --- */
.surface-title-effect.bounce {
  animation: title-bounce-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}
@keyframes title-bounce-in {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.08); }
  80%  { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- 信息卡 --- */
/* --- 信息卡：基础样式 --- */
.surface-info-card {
  display: flex;
  gap: var(--ui-gap-10);
  padding: var(--ui-pad-md-y) var(--ui-pad-md-x);
  margin: var(--ui-gap-8) 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  align-items: flex-start;
}

/* 身份证件：左侧彩色边线，图片+信息横排 */
.surface-info-card.id-card {
  border-left: 4px solid var(--accent-color);
}

/* 工作牌：顶部彩色边线，居中纵向排列 */
.surface-info-card.work-badge {
  border-top: 3px solid var(--accent-color);
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 紧凑横排：去掉边框阴影，信息名和信息值紧贴在同一行，用冒号连接 */
.surface-info-card.compact {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: var(--ui-pad-sm-y) 0;
  flex-direction: column;
  gap: 0;
}
.surface-info-card.compact .surface-info-card-image {
  align-self: flex-start;
  margin-bottom: var(--ui-gap-6);
}
.surface-info-card.compact .surface-info-card-row {
  border-bottom: none;
  padding: 2px 0;
}
.surface-info-card.compact .surface-info-card-label {
  min-width: auto;
  padding-right: 0;
}
.surface-info-card.compact .surface-info-card-label::after {
  content: '：';
}

/* --- 信息卡：通用子元素样式 --- */
.surface-info-card-image {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  pointer-events: auto;
}
.surface-info-card.work-badge .surface-info-card-image {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
}
.surface-info-card-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.5;
}
.surface-info-card-row {
  display: flex;
  align-items: center;
  padding: var(--ui-pad-xs-y) 0;
  gap: 6px;
  border-bottom: 1px solid var(--border-light, rgba(128,128,128,0.12));
}
.surface-info-card-row:last-child {
  border-bottom: none;
}
.surface-info-card-label {
  flex-shrink: 0;
  min-width: 3.5em;
  padding-right: 4px;
  font-size: var(--ui-fs-12);
  font-weight: 600;
  color: var(--text-muted);
}
.surface-info-card-value {
  flex: 1;
  font-size: var(--ui-fs-13);
  font-weight: 600;
  color: var(--text-primary);
}

/* --- 刮刮卡 --- */
.surface-scratch-card {
  position: relative;
  width: min(100%, 18rem);
  min-height: 5rem;
  margin: var(--ui-gap-8) auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
}
.surface-scratch-cover {
  position: absolute;
  inset: 0;
  background: var(--scratch-cover-bg, var(--btn-primary-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-fs-14);
  font-weight: 600;
  color: var(--btn-primary-text);
  cursor: pointer;
  touch-action: none;
  z-index: 1;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  user-select: none;
}
.surface-scratch-cover--revealed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.surface-scratch-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  font-size: var(--ui-fs-16);
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  background: var(--bg-secondary);
  min-height: 5rem;
}

/* --- 弹幕（全屏不可点击遮罩层，文字从一侧飘到另一侧） --- */
.surface-danmaku {
  position: fixed;
  inset: 0;
  z-index: 5500;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 10vh 0;
  box-sizing: border-box;
}
.surface-danmaku-row {
  position: relative;
  height: 2rem;
  overflow: visible;
}
.surface-danmaku-item {
  position: absolute;
  white-space: nowrap;
  font-size: var(--ui-fs-14);
  font-weight: 500;
  color: var(--text-primary);
  opacity: 0.9;
  will-change: transform;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* 右到左：从右边缘飘到左边缘消失 */
.surface-danmaku--rtl .surface-danmaku-item {
  left: 100%;
  animation-name: danmaku-rtl;
}
@keyframes danmaku-rtl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-100% - 100vw)); }
}

/* 左到右：从左边缘飘到右边缘消失 */
.surface-danmaku--ltr .surface-danmaku-item {
  right: 100%;
  animation-name: danmaku-ltr;
}
@keyframes danmaku-ltr {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100% + 100vw)); }
}

/* --- 黑客终端 --- */
.surface-hacker {
  background: var(--bg-primary);
  color: var(--accent-color);
  font-family: "Courier New", "Consolas", monospace;
  font-size: var(--ui-fs-13);
  line-height: 1.6;
  padding: var(--ui-pad-md-y) var(--ui-pad-md-x);
  margin: var(--ui-gap-8) 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  box-shadow: inset 0 0 20px rgba(0, 255, 65, 0.05);
  overflow: hidden;
}
.surface-hacker-trigger {
  cursor: pointer;
  user-select: none;
  opacity: 0.7;
  animation: hacker-blink 1s step-end infinite;
}
.surface-hacker-line {
  white-space: pre-wrap;
  word-break: break-all;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.surface-hacker-line--shown {
  opacity: 1;
  transform: translateY(0);
}
.surface-hacker-cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  background: var(--accent-color);
  vertical-align: text-bottom;
  animation: hacker-blink 1s step-end infinite;
}
@keyframes hacker-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* --- 评分显示（SVG 图标） --- */
.surface-star-display {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-gap-4);
  align-items: center;
  margin: var(--ui-gap-6) 0;
}
.surface-star-display-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.surface-star-display-cell svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: var(--bg-tertiary);
  stroke: var(--border-color);
  stroke-width: 0.5;
  transition: fill 0.2s ease;
}
.surface-star-display-cell--full svg {
  fill: var(--accent-color);
  stroke: color-mix(in srgb, var(--accent-color) 80%, #000);
  filter: drop-shadow(0 1px 3px var(--accent-glow));
}
.surface-star-display-cell--half {
  position: relative;
  overflow: hidden;
}
.surface-star-display-cell--half svg {
  fill: var(--accent-color);
  stroke: color-mix(in srgb, var(--accent-color) 80%, #000);
  clip-path: inset(0 50% 0 0);
}
.surface-star-display-cell--empty svg {
  fill: var(--bg-tertiary);
  stroke: var(--border-color);
}
/* 数字样式 */
.surface-star-display-number {
  font-size: var(--ui-fs-16);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* 进度条样式 */
.surface-star-display-progress {
  flex: 1;
  min-width: 6rem;
  height: 0.6rem;
  background: var(--bg-tertiary);
  border-radius: 999px;
  overflow: hidden;
}
.surface-star-display-progress-fill {
  height: 100%;
  background: var(--accent-color);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.surface-star-display-label {
  font-size: var(--ui-fs-12);
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.surface-star-display-text {  font-size: var(--ui-fs-13);  font-weight: 600;  color: var(--text-secondary);  margin-left: var(--ui-gap-6);}

/* --- 星级评分输入 --- */
.star-rating-input-wrap {
  display: inline-flex;
  gap: var(--ui-gap-4);
  align-items: center;
  padding: var(--ui-pad-sm-y) 0;
}
.star-rating-input-icon {
  font-size: 1.6rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
  min-width: var(--ui-comfort-tap);
  min-height: var(--ui-comfort-tap);
  display: flex;
  align-items: center;
  justify-content: center;
}
.star-rating-input-icon:active {
  transform: scale(1.15);
}
.star-rating-input-icon.active {
  color: var(--accent-color);
}

/* --- 图鉴按钮（封面/结局页） --- */
.btn-gallery {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-gap-6);
  min-height: var(--ui-comfort-tap);
  padding: var(--ui-pad-sm-y) var(--ui-pad-lg-x);
  background: color-mix(in srgb, var(--accent-color) 15%, var(--bg-secondary));
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--accent-color) 35%, var(--border-color));
  border-radius: var(--radius-md);
  font-size: var(--ui-fs-14);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn-gallery:active {
  opacity: 0.7;
}