/* ══════════════════════════════════════════════════════════════
   火柴人快跑 · 样式
   · 颜色尽量复用 PaperMod 的主题变量，自动适配明暗模式
   · 无外部字体/图片依赖（CSP 同源白名单）
   ══════════════════════════════════════════════════════════════ */

#run-root {
  --run-accent: #ff5f6d;
  --run-accent2: #ff8a5b;
  margin: 1.2rem 0 2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ── 顶部信息条 ── */
.run-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--entry, #ffffff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 12px 12px 0 0;
  border-bottom: 0;
}

.run-brand { display: flex; flex-direction: column; line-height: 1.35; }
.run-brand strong { font-size: 16px; color: var(--primary, #1f1f1f); }
.run-brand span { font-size: 12px; color: var(--secondary, #6b7280); }

.run-board {
  display: flex;
  gap: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--primary, #1f1f1f);
}
#run-best { color: var(--run-accent); }
#run-coins { color: #d9a017; }

.run-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.run-tools button,
.run-tools .run-shop-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.4;
  color: var(--primary, #1f1f1f);
  text-decoration: none;
  background: var(--tertiary, #ececec);
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: filter 0.15s ease;
}
.run-tools button:hover,
.run-tools .run-shop-btn:hover { filter: brightness(0.96); }
.run-tools button[aria-pressed="true"] { opacity: 0.55; }
/* 商店按钮用彩色，和另外两个工具按钮区分开 */
.run-tools .run-shop-btn {
  color: #fff;
  background: linear-gradient(135deg, #4f7cff, #7b5cff);
  border-color: transparent;
}
.run-tools .run-shop-btn:hover { filter: brightness(1.06); }

/* ── 舞台 ── */
.run-stage {
  position: relative;
  width: 100%;
  background: #0d1b2a;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#run-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 3;
  touch-action: none;
  cursor: pointer;
}

/* ── 遮罩层（开始 / 暂停 / 结束） ── */
.run-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(8, 14, 24, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: opacity 0.18s ease;
}
.run-overlay.hidden { display: none; }

.run-card {
  width: min(420px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 18px 20px;
  text-align: center;
  background: var(--entry, #ffffff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}
.run-card h3 { margin: 0 0 8px; font-size: 19px; color: var(--primary, #1f1f1f); }

.run-ov-text {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--secondary, #5b6470);
}
.run-ov-text .run-big { display: block; font-size: 26px; font-weight: 800; color: var(--run-accent); }
.run-ov-text b { color: var(--primary, #1f1f1f); }
/* 遮罩里的商店入口（按钮样式，点开本页的商店弹层） */
.run-shop-link {
  display: inline-block;
  margin-top: 2px;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: #4f7cff;
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.run-shop-link:hover { filter: brightness(1.15); }
.run-ov-text em {
  display: inline-block;
  padding: 1px 7px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #4f7cff, #7b5cff);
  border-radius: 999px;
}

.run-primary {
  display: inline-block;
  padding: 10px 30px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--run-accent), var(--run-accent2));
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 10px 24px -12px rgba(255, 95, 109, 0.95);
  transition: transform 0.12s ease, filter 0.15s ease;
}
.run-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.run-primary:active { transform: translateY(0); }

.run-records { margin: 14px 0 0; padding: 0; list-style: none; }
.run-records li {
  display: flex;
  justify-content: space-between;
  padding: 3px 2px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--secondary, #5b6470);
  border-top: 1px dashed var(--border, #e0e0e0);
}
.run-records li:first-child { border-top: 0; }
.run-records li b { color: var(--primary, #1f1f1f); }

/* ── 浮动提示（新纪录等） ── */
.run-toast {
  position: absolute;
  top: 12px;
  left: 50%;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  background: rgba(20, 26, 40, 0.82);
  border-radius: 999px;
  transform: translate(-50%, -8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.run-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── 移动端按键 ── */
.run-controls {
  display: none;
  gap: 12px;
  margin-top: 12px;
}
.run-ctl {
  flex: 1;
  padding: 18px 0;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  color: var(--primary, #1f1f1f);
  background: var(--entry, #ffffff);
  border: 1px solid var(--border, #ddd);
  border-radius: 12px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
#run-jump { color: #fff; background: linear-gradient(135deg, #4f7cff, #7b5cff); border-color: transparent; }
#run-duck { color: #fff; background: linear-gradient(135deg, #2f9e6e, #4bbf8a); border-color: transparent; }
.run-ctl:active { filter: brightness(0.92); }

/* 触屏设备 / 窄屏展示虚拟按键 */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .run-controls { display: flex; }
  .run-brand span { display: none; }
  .run-foot kbd { display: none; }
}

/* ── 底部说明 ── */
.run-foot {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--secondary, #6b7280);
}
.run-foot kbd {
  padding: 1px 6px;
  font-family: inherit;
  font-size: 11px;
  color: var(--primary, #1f1f1f);
  background: var(--tertiary, #ececec);
  border: 1px solid var(--border, #ddd);
  border-radius: 5px;
}

/* 钱包余额 + 商店入口那一行 */
.run-wallet-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.run-wallet-bar #run-wallet {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary, #1f1f1f);
}
.run-wallet-bar a { color: #4f7cff; font-weight: 700; text-decoration: none; }
.run-wallet-bar a:hover { text-decoration: underline; }

/* 正文里的商店入口：长得像链接，其实是开弹层的按钮 */
.run-link-btn {
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: #4f7cff;
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.run-link-btn:hover { text-decoration: underline; }

/* 顶部工具条里的商店按钮（现在是 <button>，样式沿用 .run-shop-btn） */
.run-tools button.run-shop-btn { font-weight: 700; }

/* 排行榜按钮用金色，和商店的蓝紫区分开 */
.run-tools button#run-rank-btn {
  font-weight: 700;
  color: #46350a;
  background: linear-gradient(135deg, #ffd977, #e8a70e);
  border-color: transparent;
}
.run-tools button#run-rank-btn:hover { filter: brightness(1.05); }

/* ══ 跑酷页在大屏放宽正文宽度（与扫雷页同理） ══ */
@media (min-width: 900px) {
  .main:has(#run-root) { max-width: min(1100px, 94vw); }
}