/* ============================================================
   星轨跑酷 · 样式（明亮卡通日景，仿地铁跑酷观感）
   ============================================================ */
:root {
  --ink: #1c3a5e;          /* 深蓝文字 */
  --ink-soft: #4a6b8c;
  --glass: rgba(255, 255, 255, 0.78);   /* 半透明白玻璃 */
  --glass-line: rgba(28, 58, 94, 0.12);
  --accent: #ffb020;       /* 活力橙 */
  --accent2: #ff6b9d;      /* 珊瑚粉 */
  --blue: #4fc3f7;
  --gold: #ffd166;
  --danger: #ef4444;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* hidden 属性的 display:none 来自 UA 样式表，优先级低于任何类选择器 ——
   一旦以后给面板/提示加了 display 规则，6 个面板会全部叠着显示。这里上保险。 */
[hidden] { display: none !important; }
html { background: #cfe4f5; }          /* 首屏底色，避免 iOS 加载时闪白 */
html, body { height: 100%; }
body {
  background: #8ec9f2;
  color: var(--ink);
  font-family: var(--sans);
  user-select: none; -webkit-user-select: none;
  overscroll-behavior: none;           /* 全局禁橡皮筋回弹 */
  /* 注意：这里不能全局 touch-action:none，否则手机菜单没法滚。
     只在"游戏中"锁住（body.playing 由 JS 切换）。 */
}
body.playing { overflow: hidden; }
body.playing #game { touch-action: none; }
body:not(.playing) { overflow: auto; }

/* ============ 画布 ============ */
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ============ HUD ============ */
.hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px)
           max(16px, env(safe-area-inset-right, 0px))
           0
           max(16px, env(safe-area-inset-left, 0px));
}
.score-block { text-align: left; }
.score-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em;
  color: rgba(28,58,94,0.75);
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}
.score-val {
  font-family: var(--mono); font-size: 30px; font-weight: 700;
  letter-spacing: 0.03em; color: #fff;
  text-shadow: 0 2px 10px rgba(28,58,94,0.45), 0 0 0 2px rgba(255,255,255,0.25);
  font-variant-numeric: tabular-nums;
}
.hud-right { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.hud-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: 999px; padding: 6px 12px;
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: #b7791f;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(28,58,94,0.18);
}
.icon-btn {
  /* 直接写最终尺寸：原来 width:34px 被 min-width:44px 完全覆盖，是死代码且容易误判 */
  width: 44px; height: 44px; border-radius: 50%;
  padding: 0;
  font: inherit;               /* button 默认不继承字体，字符/emoji 图标会掉回系统字体 */
  background: var(--glass); border: 1px solid var(--glass-line);
  color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(28,58,94,0.18);
}
.icon-btn.muted { color: rgba(28,58,94,0.35); text-decoration: line-through; }

.hud-bottom {
  position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px;
  flex-wrap: wrap;                  /* 6 个徽章在 375px 窄屏上放不下，必须换行 */
  justify-content: center;
  width: min(94vw, 620px);          /* 用 width 而不是 max-width：绝对定位 + 换行时 max-width 会被收缩适应压窄，白白多出好几行 */
}
.fx-badge {
  font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: 999px; padding: 6px 12px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(28,58,94,0.18);
  animation: badge-in 0.3s ease;
}
@keyframes badge-in { from { opacity: 0; transform: translateY(6px); } }

/* ============ 面板通用（白色圆角卡片） ============ */
.panel {
  position: fixed; z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(28,58,94,0.10);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(28,58,94,0.30);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  text-align: center;
  padding: 28px 30px;
  animation: panel-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
/* 注意：transform 不可叠加，关键帧里的 transform 会"替换"元素自身的 transform。
   四个面板都靠 translate(-50%,-50%) 居中，所以关键帧必须把 X 的 -50% 写全，
   否则每打开一次面板，第一帧都会丢掉居中、往右瞬移半个自身宽度再滑回来。 */
@keyframes panel-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.btn {
  display: inline-block; cursor: pointer; border: none; border-radius: 14px;
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  padding: 13px 26px; letter-spacing: 0.05em; color: #fff;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s;
}
.btn:active { transform: scale(0.96); }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 8px 24px rgba(255, 107, 157, 0.45);
}

.btn.ghost {
  background: rgba(28,58,94,0.07); color: var(--ink-soft);
  border: 1px solid rgba(28,58,94,0.14);
}


/* ============ 菜单 ============ */
.menu-panel { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(400px, 92vw); }
/* 菜单内容（任务+技能+成就+角色）在小屏上必然超一屏 → 必须能滚，否则点不到开始 */
.menu-panel, .pause-panel, .over-panel, .revive-panel {
  max-height: 86vh;                /* 兜底：不支持 dvh 的浏览器会忽略下面那条，
                                      而 min(86vh,86dvh) 整条会因无法解析的单位失效 */
  max-height: min(86vh, 86dvh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* 防止滚动穿透到 body */
  scrollbar-width: thin;
  scrollbar-color: rgba(28,58,94,0.2) transparent;
}
.menu-panel::-webkit-scrollbar, .pause-panel::-webkit-scrollbar,
.over-panel::-webkit-scrollbar, .revive-panel::-webkit-scrollbar { width: 4px; }
.menu-panel::-webkit-scrollbar-thumb, .pause-panel::-webkit-scrollbar-thumb,
.over-panel::-webkit-scrollbar-thumb, .revive-panel::-webkit-scrollbar-thumb { background: rgba(28,58,94,0.2); border-radius: 2px; }
.menu-title h1 {
  font-size: 34px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(79, 195, 247, 0.35);
  margin-bottom: 6px;
}
.menu-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; color: var(--ink-soft); }
.menu-stats { display: flex; justify-content: center; gap: 40px; margin: 22px 0 20px; }
.menu-stat { display: flex; flex-direction: column; gap: 2px; }
.menu-stat .m-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--ink-soft); }
.menu-stat b { font-family: var(--mono); font-size: 24px; color: var(--ink); }
.menu-panel .btn.primary { width: 100%; margin-bottom: 18px; padding: 15px; font-size: 17px; }
.controls-hint {
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; font-size: 13px; color: var(--ink-soft);
}
.hint-row { display: flex; align-items: center; gap: 8px; }
kbd {
  display: inline-block; min-width: 24px; text-align: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  background: #fff; border: 1px solid rgba(28,58,94,0.2);
  border-radius: 6px; padding: 3px 6px; color: var(--ink);
  box-shadow: 0 2px 0 rgba(28,58,94,0.12);
}
.hint-row .touch { color: var(--ink-soft); font-style: normal; font-size: 12px; }
.menu-foot { margin-top: 20px; }
.menu-foot a { color: var(--ink-soft); text-decoration: none; font-size: 12px; font-family: var(--mono); letter-spacing: 0.08em; }


/* ============ 倒计时 ============ */
.countdown {
  position: fixed; z-index: 30; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.countdown b {
  font-family: var(--mono); font-size: 90px; font-weight: 800;
  color: #fff;
  text-shadow: 0 4px 0 rgba(28,58,94,0.35), 0 0 30px rgba(255, 255, 255, 0.6);
  animation: cd-pop 1s ease;
  display: block;
}
@keyframes cd-pop {
  0% { opacity: 0; transform: scale(1.9); }
  25% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.9); }
}
.countdown b.go { color: var(--gold); text-shadow: 0 4px 0 rgba(183,121,31,0.4), 0 0 30px rgba(255, 209, 102, 0.7); }

/* ============ 暂停 ============ */
.pause-panel { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, 90vw); }
.pause-panel h2 { font-size: 24px; margin-bottom: 18px; letter-spacing: 0.08em; color: var(--ink); }
.pause-btns, .over-btns { display: flex; flex-direction: column; gap: 10px; }
.pause-btns .btn, .over-btns .btn { width: 100%; }

/* ============ 结算 ============ */
.over-panel { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, 92vw); }
.over-emoji { font-size: 40px; }
.over-panel h2 { font-size: 22px; margin: 6px 0 16px; letter-spacing: 0.1em; color: var(--danger); }
.over-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.over-cell {
  background: rgba(28,58,94,0.05); border: 1px solid rgba(28,58,94,0.10);
  border-radius: 14px; padding: 12px 8px;
  display: flex; flex-direction: column; gap: 3px;
}
.over-cell .m-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-soft); }
.over-cell b { font-family: var(--mono); font-size: 22px; color: var(--ink); }
.over-cell em { font-style: normal; font-size: 11px; color: var(--danger); font-weight: 700; animation: badge-in 0.4s ease; }
/* 用语义类着色，不再依赖 DOM 顺序（增删格子不会串色） */
.over-cell.is-score b { color: var(--blue); }
.over-cell.is-coin b { color: #b7791f; }

/* ============ 任务面板 ============ */
.mission-panel {
  width: 100%; margin: 4px 0 16px; padding: 12px 14px;
  background: rgba(28,58,94,0.045); border: 1px solid rgba(28,58,94,0.10);
  border-radius: 16px; text-align: left;
}
.mission-title {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--ink-soft); margin-bottom: 9px; text-transform: uppercase;
}
.mission { margin-bottom: 9px; }
.mission:last-child { margin-bottom: 0; }
.m-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--ink); margin-bottom: 5px; gap: 8px;
}
.m-top b { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.m-bar { height: 5px; border-radius: 3px; background: rgba(28,58,94,0.10); overflow: hidden; }
.m-bar i {
  display: block; height: 100%; width: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #58c9f5, #3f8ef7);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));   /* 用 transform 而不是 width：不触发布局重排 */
  transition: transform 0.4s ease;
}

/* ============ 角色（换皮肤） ============ */
.char-row { display: flex; gap: 8px; }
.char-card {
  flex: 1; border-radius: 12px; padding: 9px 6px; cursor: pointer;
  border: 1px solid rgba(28,58,94,0.14); background: rgba(28,58,94,0.04);
  text-align: center; transition: transform 0.12s ease, border-color 0.2s ease, background 0.2s ease;
  user-select: none;
}

.char-card b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 3px; }
.char-card span { display: block; font-size: 10px; color: var(--ink-soft); font-family: var(--mono); }
.char-card.active { border-color: #3f8ef7; background: rgba(63,142,247,0.12); box-shadow: 0 0 0 2px rgba(63,142,247,0.18); }
.char-card .dotc { width: 22px; height: 22px; border-radius: 50%; margin: 0 auto 5px; box-shadow: inset 0 -3px 6px rgba(0,0,0,0.25); }

/* ============ 技能 / 成就 ============ */
.fold > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "▾"; font-size: 11px; color: var(--ink-soft); transition: transform 0.2s ease; }
.fold[open] > summary::after { transform: rotate(180deg); }
.fold > summary em { font-style: normal; font-size: 10px; color: var(--ink-soft); font-family: var(--mono); margin-left: auto; margin-right: 6px; }
.fold[open] > summary { margin-bottom: 8px; }
.skill-list, .ach-list {
  max-height: 210px; overflow-y: auto;
  overscroll-behavior: contain;   /* 滑到顶/底不要带动外层面板一起滚 */
  scrollbar-width: thin;
  scrollbar-color: rgba(28,58,94,0.2) transparent;
}
.skill-list::-webkit-scrollbar, .ach-list::-webkit-scrollbar { width: 4px; }
.skill-list::-webkit-scrollbar-thumb, .ach-list::-webkit-scrollbar-thumb { background: rgba(28,58,94,0.2); border-radius: 2px; }

.skill { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid rgba(28,58,94,0.06); }
.skill:last-child { border-bottom: none; }
.sk-ico { width: 26px; height: 26px; border-radius: 8px; background: rgba(63,142,247,0.10); display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.sk-mid { flex: 1; min-width: 0; text-align: left; }
.sk-mid b { display: block; font-size: 12px; color: var(--ink); }
.sk-mid span { display: block; font-size: 10px; color: var(--ink-soft); }
.sk-dots { display: flex; gap: 3px; margin-top: 3px; }
.sk-dots .dot { width: 14px; height: 3px; border-radius: 2px; background: rgba(28,58,94,0.14); }
.sk-dots .dot.on { background: #3f8ef7; }
.sk-buy {
  flex: none; border: none; cursor: pointer; font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 5px 9px; border-radius: 8px; background: #3f8ef7; color: #fff; transition: transform 0.1s ease;
}

.sk-buy.poor { background: rgba(28,58,94,0.15); color: var(--ink-soft); }
.sk-max { flex: none; font-size: 10px; color: #2f9e62; font-weight: 700; }

.ach { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid rgba(28,58,94,0.06); }
.ach:last-child { border-bottom: none; }
.ach .a-ico { font-size: 14px; width: 22px; text-align: center; flex: none; filter: grayscale(1); opacity: 0.5; }
.ach.done .a-ico { filter: none; opacity: 1; }
.ach .a-mid { flex: 1; min-width: 0; text-align: left; }
.ach .a-mid b { display: block; font-size: 12px; color: var(--ink); }
.ach .a-mid span { display: block; font-size: 10px; color: var(--ink-soft); margin-bottom: 3px; }
.ach .a-mid .m-bar { height: 3px; }
.ach em { font-style: normal; font-size: 10px; font-family: var(--mono); color: var(--ink-soft); flex: none; }
.ach.done b { color: #2f9e62; }

/* ============ 被追捕提示 ============ */
.chase-hud {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 74px); z-index: 30; width: min(320px, 74vw);
  padding: 9px 14px 10px;
  background: rgba(180, 26, 40, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(150, 10, 20, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  /* 动画放到 ::before 上：主元素有 backdrop-filter，自身做动画会强制每帧重算背景模糊 */
}
.chase-hud::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 10px 30px rgba(150, 10, 20, 0.42);
  animation: chasePulse 0.9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes chasePulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(150, 10, 20, 0.42); }
  50% { box-shadow: 0 10px 38px rgba(255, 60, 70, 0.78); }
}
.chase-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; }
.chase-top b { font-family: var(--mono); font-size: 13px; }
.chase-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.26); margin-top: 7px; overflow: hidden; }
.chase-bar i { display: block; height: 100%; width: 100%; background: #ffd166; transform-origin: left center; }
.chase-tip { margin-top: 5px; font-size: 10.5px; opacity: 0.86; }

/* ============ 复活 ============ */
.revive-panel {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(330px, 90vw); text-align: center;
}
.revive-panel h2 { font-size: 20px; margin: 6px 0 2px; }
.revive-tip { margin: 4px 0 12px; font-size: 13px; color: var(--ink-soft); }
.revive-tip b { color: #c98a1f; font-family: var(--mono); }
.revive-bar {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(28,58,94,0.12); margin-bottom: 16px;
}
.revive-bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent), #ff6b6b);
  transform-origin: left center;
}

/* ============ 提示条 ============ */
.toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 84px); transform: translateX(-50%) translateY(-10px);
  background: linear-gradient(135deg, var(--accent), #f2872f);
  color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
  padding: 11px 22px; border-radius: 999px; z-index: 60;
  box-shadow: 0 10px 28px rgba(226,140,30,0.45);
  opacity: 0; transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ 移动端 ============ */
@media (max-width: 560px) {
  .score-val { font-size: 24px; }
  .menu-title h1 { font-size: 28px; }
  .menu-stats { gap: 30px; }
  .countdown b { font-size: 72px; }
  .panel { padding: 22px 20px; }
}

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

/* 双倍金币徽章 */
#fx-coin2x { color: #8a6300; border-color: rgba(255,201,60,0.55); background: rgba(255,214,102,0.22); }

/* 追捕提示条出现时，toast 下移避让，别盖在一起 */
body.chasing .toast { top: calc(env(safe-area-inset-top, 0px) + 152px); }

/* 游戏进行中：常驻 HUD 元素关掉背景模糊。
   它们背后是每帧重绘的 canvas，模糊等于每帧都要重算一次背景缓冲，移动端掉帧明显。
   面板出现时通常已经暂停渲染，保留 blur 没问题。 */
body.playing .hud-chip,
body.playing .icon-btn,
body.playing .fx-badge {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(255, 255, 255, 0.9);
}

/* 键盘 Tab 时的统一焦点环（鼠标点击不显示，避免干扰） */
:where(button, a, summary, [tabindex]):focus-visible {
  outline: 2px solid #3f8ef7;
  outline-offset: 2px;
  border-radius: 8px;
}

/* 横屏矮屏：面板再压一点，保证按钮还在视野里 */
@media (max-height: 480px) and (orientation: landscape) {
  .menu-panel, .pause-panel, .over-panel, .revive-panel { max-height: 94vh; max-height: min(94vh, 94dvh); padding: 16px 18px; }
  .menu-title h1 { font-size: 26px; }
  .skill-list, .ach-list { max-height: 150px; }
}

/* 触摸设备上 :hover 会在点击后粘滞保留（按钮一直亮着、卡片一直浮起）。
   只在真正支持悬停的设备上启用。触摸用户靠 :active 反馈。 */
@media (hover: hover) and (pointer: fine) {
  .btn.primary:hover { filter: brightness(1.06); box-shadow: 0 10px 30px rgba(255, 107, 157, 0.55); }
  .icon-btn:hover { color: #fff; background: rgba(255,255,255,0.92); }
  .char-card:hover { transform: translateY(-2px); border-color: rgba(63,142,247,0.5); }
  .sk-buy:hover { transform: translateY(-1px); }
  .btn.ghost:hover { color: var(--ink); background: rgba(28,58,94,0.1); }
  .menu-foot a:hover { color: var(--ink); }
}
.char-card:active, .sk-buy:active { transform: scale(0.96); }