/* ============================================================
   fitness.css — 力量三项「沙粒字」（Gravity Letters 复刻）
   只被 fitness.html 引用。canvas 由 fitness.js 插入 .grav 最前面，
   铺满整个展台；字由成千上万颗沙粒砌成，可塌陷 / 切割 / 重建。
   ============================================================ */

body[data-chapter="fitness"] {
  --grav-bg: #08080a;
  --grav-ink: #f2f0ec;
  --grav-sand: #d2694a;
  --grav-mist: #7e7e86;
}

/* 一屏布局：canvas 吃满第一行 */
body[data-chapter="fitness"] .chapter-body {
  padding: 0;
  background: var(--grav-bg);
}

.grav {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--grav-bg);
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  /* 轻微的中心提亮，让沙粒字从暗底里浮起来 */
  background-image: radial-gradient(
    120% 90% at 50% 46%,
    rgb(210 105 74 / 0.055) 0%,
    rgb(8 8 10 / 0) 62%
  );
}

.grav-canvas {
  position: absolute;
  inset: 0;
  display: block;
  /* 拖拽/划动不被浏览器手势抢走 */
  touch-action: none;
}

/* WebGL 不可用时的降级：显示静态大字 */
.grav.mv-unsupported::after,
.grav.grav-unsupported::after {
  content: "";
}

.grav__fallback {
  display: none;
  position: absolute;
  inset: 0;
  margin: 0;
  place-content: center;
  text-align: center;
  font-family: var(--font-latin);
  font-weight: 800;
  font-size: clamp(44px, 12vw, 180px);
  letter-spacing: 0.02em;
  color: var(--grav-ink);
}

/* 屏幕阅读器拿到的纯文本（原版的 "screen readers get the plain text"） */
.grav__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------- 覆盖层 ---------------- */
.grav__hud {
  position: absolute;
  top: clamp(16px, 2.5vh, 28px);
  left: 0;
  right: 0;
  display: grid;
  justify-items: center;
  text-align: center;
  pointer-events: none; /* 指针事件全部落到 canvas */
  z-index: 2;
}

.grav__kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--grav-mist);
}

/* 中文动作名：跟着沙粒字切换 */
.grav__lift {
  margin: 8px 0 0;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.5em;
  color: rgb(242 240 236 / 0.55);
  transition: opacity 260ms var(--ease);
}
.grav__lift.is-swapping { opacity: 0; }

.grav__hint {
  margin: 6px 0 0;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgb(126 126 134 / 0.6);
}

/* 底部：页码 + 示意标注 */
.grav__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--bar-h, 64px) + 18px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 56px);
  z-index: 2;
  pointer-events: none;
}

.grav__count {
  margin: 0;
  font-family: var(--font-latin);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgb(242 240 236 / 0.72);
  font-variant-numeric: tabular-nums;
}
.grav__count-sep {
  margin: 0 6px;
  color: rgb(126 126 134 / 0.7);
}

.grav__note {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgb(126 126 134 / 0.5);
}

/* ---------------- 窄屏 ---------------- */
@media (max-width: 700px) {
  .grav__hint {
    padding: 0 28px;
    letter-spacing: 0.1em;
    line-height: 1.7;
  }
  .grav__lift { letter-spacing: 0.36em; }
  .grav__foot { padding: 0 18px; }
  .grav__note { font-size: 10px; }
}

/* 减少动态效果：静态字（动画逻辑由 JS 一并停掉） */
@media (prefers-reduced-motion: reduce) {
  .grav__lift { transition: none; }
}

/* 矮屏横向视口：压缩说明区，给沙粒字留出连续的安全高度。 */
@media (max-height: 500px) {
  .grav__hud { top: 12px; }
  .grav__kicker { font-size: 9px; letter-spacing: 0.28em; }
  .grav__lift { margin-top: 5px; font-size: 12px; letter-spacing: 0.28em; }
  .grav__hint { margin-top: 4px; font-size: 9px; letter-spacing: 0.08em; line-height: 1.35; }
  .grav__foot { bottom: calc(var(--bar-h, 46px) + 10px); }
}