/* ============================================================
   马里奥阅读进度条 · 独立样式（mario.css）
   搭配 mario.js 使用。雪碧图 /img/mario-runner.png。
   ============================================================ */

/* ============================================================
   马里奥阅读进度条 v2.1
   ------------------------------------------------------------
   · 雪碧图: /img/mario-runner.png（1:1 重装箱版：源图完整像素，
     零重采样、零调色板压缩，7 帧等宽装箱 31×41）
   · 帧序 = 站立 / 跑1 / 跑2 / 起跳 / 滞空 / 落地 / 庆祝
   · 位移、跳跃、朝向全部由 JS（rAF + transform）驱动
   · 想变大：改 --mario-scale（整数倍最锐利）
   ============================================================ */

#reading-track {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.1);
  z-index: 9999;
  pointer-events: none;   /* 修复旧版：轨道 3px + 马里奥上方隐形区域挡住页面点击 */
}

#reading-bar {
  width: 100%;
  height: 100%;
  background: rgba(100, 100, 100, 0.3);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

#pixel-runner {
  --mario-scale: 1;                            /* ← 想大一号改成 2；整数倍不糊 */
  --mario-w: 31px;                             /* 单帧格宽（雪碧图 1× 逻辑像素） */
  --mario-h: 41px;                             /* 单帧格高 */
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--mario-w) * var(--mario-scale));
  height: calc(var(--mario-h) * var(--mario-scale));
  will-change: transform;
  pointer-events: none;                        /* 容器不吃点击，只让身体本体吃 */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#pixel-runner .mario-flip,
#pixel-runner .mario-air,
#pixel-runner .mario-sprite {
  width: 100%;
  height: 100%;
  display: block;
}

/* 朝向层：JS 写 scaleX(±1) */
#pixel-runner .mario-flip {
  will-change: transform;
  transform: scaleX(1);                        /* 初始值内联，防止首帧空白 */
}

/* 跳跃/前倾层：JS 写 translate3d + rotate */
#pixel-runner .mario-air {
  transform-origin: 50% 100%;
  will-change: transform;
}

/* 帧层：JS 按 0..6 步进 background-position-x（7 帧 = 6 步） */
#pixel-runner .mario-sprite {
  background-image: url('/img/mario-runner.png');
  background-repeat: no-repeat;
  background-size: 700% 100%;
  background-position: 0% 0%;
  image-rendering: crisp-edges;                /* 旧版浏览器回退 */
  image-rendering: pixelated;                  /* 标准值放最后，理解它的浏览器以此为准 */
  cursor: pointer;
  pointer-events: auto;                        /* 彩蛋：点身体会跳 */
}

/* 尘土：落地/疾跑时 JS 触发，steps() 保持像素味。
   挂在 track 上（世界坐标），left 由 JS 在喷发瞬间写入落点，不跟随马里奥平移 */
#reading-track .mario-dust {
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  opacity: 0;
  color: rgba(120, 120, 120, 0.55);
  pointer-events: none;
}
#reading-track .mario-dust.play {
  animation: mario-dust-puff 0.3s steps(3, end) forwards;
}
#reading-track .mario-dust.big.play {
  animation-name: mario-dust-puff-big;
  animation-duration: 0.38s;
}

@keyframes mario-dust-puff {
  0%   { opacity: 0.8; box-shadow: -3px 0 0 currentColor, 3px 0 0 currentColor; }
  60%  { opacity: 0.5; box-shadow: -7px -2px 0 currentColor, 7px -2px 0 currentColor; }
  100% { opacity: 0;   box-shadow: -10px -3px 0 currentColor, 10px -3px 0 currentColor; }
}
@keyframes mario-dust-puff-big {
  0%   { opacity: 0.9;  box-shadow: -3px 0 0 currentColor, 3px 0 0 currentColor, 0 -2px 0 currentColor; }
  60%  { opacity: 0.55; box-shadow: -9px -3px 0 currentColor, 9px -3px 0 currentColor, 0 -6px 0 currentColor; }
  100% { opacity: 0;    box-shadow: -13px -4px 0 currentColor, 13px -4px 0 currentColor, 0 -9px 0 currentColor; }
}

/* ---------- 深浅色适配 ----------
   跟随系统，但被 Fluid 手动开关（data-user-color-scheme）覆盖，
   修复旧版“系统深 + 手动浅”时轨道仍是深色的错乱 */
@media (prefers-color-scheme: dark) {
  :root:not([data-user-color-scheme="light"]) #reading-track { background: rgba(255, 255, 255, 0.15); }
  :root:not([data-user-color-scheme="light"]) #reading-bar   { background: rgba(255, 255, 255, 0.4); }
  :root:not([data-user-color-scheme="light"]) #reading-track .mario-dust { color: rgba(210, 210, 210, 0.45); }
}
[data-user-color-scheme="dark"] #reading-track { background: rgba(255, 255, 255, 0.15) !important; }
[data-user-color-scheme="dark"] #reading-bar   { background: rgba(255, 255, 255, 0.4) !important; }
[data-user-color-scheme="dark"] #reading-track .mario-dust { color: rgba(210, 210, 210, 0.45) !important; }
[data-user-color-scheme="light"] #reading-track { background: rgba(0, 0, 0, 0.1) !important; }
[data-user-color-scheme="light"] #reading-bar   { background: rgba(100, 100, 100, 0.3) !important; }

/* 尊重减少动效偏好：JS 侧同步降级为静态定位 */
@media (prefers-reduced-motion: reduce) {
  #reading-track .mario-dust { display: none; }
}