/* LuckyMay v8 — 足弓锻炼打卡页（2026-09-20）
   基底样式在 style.css。2026-09-15 重设计后设计令牌改名
   （cream→paper / grass→leaf / orange→sun / radius→r-card / shadow→shadow-card），
   本文件一律 var(--新名, 字面量) 取值，与重设计后的动物森友会纸感体系同源。 */

/* ---------- 档位卡 ---------- */
.foot-stage-card { display: flex; align-items: center; gap: 16px; }
.foot-stage-icon {
  width: 108px; height: 108px; flex: none; object-fit: cover;
  border-radius: 24px; border: 3px solid var(--paper-deep, #F1E5CC);
  background: var(--paper, #FFF9EE);
  box-shadow: var(--shadow-card, 0 8px 20px rgba(107, 85, 42, .10));
  transition: transform .3s ease;
}
.foot-stage-icon.stage-up { animation: foot-bloom 1.4s ease; }
@keyframes foot-bloom {
  0% { transform: scale(.9); filter: grayscale(.6) brightness(1.1); }
  55% { transform: scale(1.08); filter: brightness(1.12); }
  100% { transform: scale(1); filter: none; }
}
.foot-stage-info { flex: 1; min-width: 0; }
.foot-stage-info b { display: block; font-size: 19px; margin-bottom: 8px; }
.foot-stage-info small { display: block; margin-top: 7px; font-size: 12.5px; }

/* 经验条：纯进度条，任何数值都不出现（老大要求）。
   只反映当前档位区间内的进度，升档后归零重走。 */
.foot-exp-track {
  position: relative; height: 18px; border-radius: 999px;
  background: var(--paper-deep, #F1E5CC); overflow: hidden;
  border: 2px solid #fff; box-shadow: inset 0 1px 3px rgba(107, 85, 64, .15);
}
.foot-exp-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--leaf, #7FB069), var(--sun, #F2994A));
  border-radius: 999px; transition: width .8s cubic-bezier(.34, 1.3, .5, 1);
}

/* ---------- 动作卡 ---------- */
.foot-actions { display: grid; gap: 14px; }
@media (min-width: 768px) { .foot-actions { grid-template-columns: 1fr 1fr; } }

.foot-action {
  background: var(--card, #FFFDF8); border: 2px solid var(--paper-deep, #F1E5CC);
  border-radius: var(--r-card, 20px);
  box-shadow: var(--shadow-card, 0 8px 20px rgba(107, 85, 42, .10));
  overflow: hidden; margin: 0;
  transition: border-color .25s ease, opacity .25s ease;
}
.foot-action.running { border-color: var(--sun, #F2994A); }
.foot-action.done-today { border-color: var(--leaf, #7FB069); background: var(--leaf-mist, #E4F1DA); }
.foot-action.locked { opacity: .55; }

/* 示范视频：无播放器控件外壳，就是页面的一部分；当前档位的黏土脚角色 */
.foot-video-box {
  position: relative; background-color: var(--paper-deep, #F1E5CC);
  background-size: cover; background-position: center;
}
.foot-video {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
}
.foot-video-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--leaf, #7FB069);
  border-radius: 999px; padding: 3px 11px;
  box-shadow: var(--shadow-card, 0 8px 20px rgba(107, 85, 42, .10));
  opacity: 0; transform: scale(.7); transition: opacity .3s ease, transform .3s ease;
}
.foot-action.done-today .foot-video-badge { opacity: 1; transform: scale(1); }

.foot-action-body { padding: 13px 15px 15px; }
.foot-action-body b { display: block; font-size: 16.5px; margin-bottom: 2px; }
.foot-action-body .desc { display: block; font-size: 13px; color: var(--ink-soft, #857050); margin-bottom: 11px; }

/* 开始/倒计时按钮：同一颗按钮切换三态（开始 → 倒计时 → 已完成） */
.foot-start {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; font: inherit; font-weight: 700; font-size: 16px; color: #fff;
  background: var(--sun, #F2994A); border: none;
  border-radius: var(--r-btn, 14px); padding: 12px 16px;
  cursor: pointer; box-shadow: 0 4px 0 var(--sun-deep, #E07B39);
  transition: transform .12s ease;
  min-height: 48px; /* 触控目标 ≥44px */
}
.foot-start:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sun-deep, #E07B39); }
.foot-start:disabled { cursor: default; opacity: .55; transform: none; }
.foot-start:focus-visible { outline: 3px solid rgba(127, 176, 105, .55); outline-offset: 2px; }
.foot-action.done-today .foot-start { background: var(--leaf, #7FB069); box-shadow: 0 4px 0 var(--leaf-deep, #4E8C4A); opacity: 1; }
.foot-action.running .foot-start { background: var(--leaf, #7FB069); box-shadow: 0 4px 0 var(--leaf-deep, #4E8C4A); opacity: 1; }

/* 倒计时圆环（SVG stroke-dashoffset，由 foot.js 驱动） */
.count-ring { width: 26px; height: 26px; flex: none; transform: rotate(-90deg); }
.count-ring circle { fill: none; stroke-width: 3.4; }
.count-ring .ring-bg { stroke: rgba(255, 255, 255, .35); }
.count-ring .ring-fg {
  stroke: #fff; stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.count-time { font-variant-numeric: tabular-nums; letter-spacing: .5px; }

/* ---------- 全天完成庆祝：游戏 CG 式全屏动画 ----------
   无进度条、无播放器边框、无跳过按钮；5 秒播完自然淡出（老大 8/8 定过的偏好）。
   z-index 高于 .celebrate(80)/.tabbar(50)。 */
.foot-celebrate {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: #000;
}
.foot-celebrate.show { display: block; animation: foot-fade-in .45s ease; }
.foot-celebrate.leaving { animation: foot-fade-out .6s ease forwards; }
.foot-celebrate video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
@keyframes foot-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes foot-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* iOS Safari：100% 高度用 dvh 防地址栏收展跳动 */
@supports (height: 100dvh) {
  .foot-celebrate { height: 100dvh; }
}