:root {
  --bg: #0f1115; --panel: #171a21; --panel2: #1f2430;
  --text: #e6e8ee; --muted: #8b93a5;
  --accent: #4c8bf5; --accent2: #ffb020;
  --good: #34c77b; --mid: #ffb020; --bad: #ff5f56;
  --border: #2a3040;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  min-height: 100vh;
}
header { padding: 14px 20px 0; }
.head-top { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
h1 { font-size: 20px; margin: 0; letter-spacing: 1px; }
.meta { color: var(--muted); font-size: 13px; }
#part-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.part-btn {
  background: var(--panel); color: var(--muted);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 14px; cursor: pointer; font-size: 14px; transition: .15s;
}
.part-btn:hover { border-color: var(--accent); color: var(--text); }
.part-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.progress-bar { height: 6px; background: var(--panel); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
#progress { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .3s; border-radius: 3px; }

main { max-width: 720px; margin: 0 auto; padding: 0 20px 40px; }

.card3d { perspective: 1200px; }
.card-inner {
  position: relative; width: 100%; height: 440px;
  transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,.1,.2,1);
}
.card-inner.flipped { transform: rotateY(180deg); }
/* 切卡 / 切部位：瞬时归位不播翻面动画，避免动画前半程背面（已是下一张的翻面内容）短暂暴露 */
.card-inner.instant { transition: none; }
.card-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px;
}
.back { transform: rotateY(180deg); }

/* max-width + aspect-ratio：窄屏时按容器宽度收缩且保持正方形（不能写死 height，
 * 否则 aspect-ratio 不生效）。 */
.face-view { position: relative; width: 280px; max-width: 100%; aspect-ratio: 1 / 1; height: auto; }
.full { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.hl {
  position: absolute; border: 2px solid var(--accent2); border-radius: 4px;
  pointer-events: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.38);
}
.tag { position: absolute; left: 0; right: 0; bottom: -30px; text-align: center; color: var(--muted); font-size: 13px; }

.crop-view { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.crop { width: 320px; height: 320px; object-fit: cover; border-radius: 12px; }
textarea {
  width: 100%; max-width: 440px; background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: 14px;
  resize: vertical; font-family: inherit;
}

/* 翻面对照：整脸定位 + 部位放大 图文比对（back 面） */
.answer-figs { display: flex; gap: 10px; width: 100%; justify-content: center; align-items: center; margin-bottom: 4px; }
.af-item {
  position: relative; width: 210px; height: 210px; flex: none;
  overflow: hidden; border-radius: 10px; background: var(--panel2);
}
.af-item .full, .af-item .crop { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
/* 部位放大图容器按裁剪图宽高比自适应（JS 设宽高），完整显示不被方形容器裁边 */
.af-item.af-crop { width: auto; height: auto; }
.af-item.af-crop .crop { object-fit: fill; }
/* 高亮聚焦仅作用于图内（overflow 裁剪 box-shadow），不压暗图外文字 */
.af-item .hl { box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
/* 部位放大图上的关键点 + 几何量连线（SVG，不拦截点击/选中） */
.kpt-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
/* pre-line：整体卡描述含 \n（每部位一行），其余部位单行不受影响 */
.desc { font-size: 17px; line-height: 1.7; text-align: center; margin: 8px 0; white-space: pre-line; }
/* 仅整体：6 行描述缩小字号 + 左对齐 + 限高滚动，防 440px 卡片溢出 */
.desc.long { font-size: 14px; line-height: 1.6; text-align: left; max-height: 150px; overflow-y: auto; padding: 0 4px; }
.notes { color: var(--muted); font-size: 12px; text-align: center; max-width: 480px; }
.rate { display: flex; gap: 12px; margin-top: 16px; }
.rate button {
  padding: 12px 22px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel2); color: var(--text); font-size: 15px; cursor: pointer; transition: .15s;
}
.rate button:hover { border-color: var(--accent); transform: translateY(-1px); }
.rate button[data-r="1"]:hover { border-color: var(--bad); }
.rate button[data-r="3"]:hover { border-color: var(--good); }

.hint { text-align: center; color: var(--muted); font-size: 13px; margin: 18px 0 8px; }
.stats { text-align: center; color: var(--muted); font-size: 13px; }
.stats b { color: var(--text); }
.stats button {
  background: transparent; color: var(--accent); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; margin-left: 6px;
}
.stats button:hover { border-color: var(--accent); }

.hidden { display: none !important; }
.error { color: var(--bad); padding: 20px; text-align: center; }

.help {
  position: fixed; right: 16px; bottom: 60px; width: 280px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.5); z-index: 50;
}
.help h3 { margin: 0 0 10px; font-size: 15px; }
.help ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); line-height: 1.9; }
.help button { margin-top: 12px; }
.fab {
  position: fixed; right: 18px; bottom: 18px; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid var(--border); background: var(--panel2);
  color: var(--text); font-size: 18px; cursor: pointer; z-index: 40;
}
.fab:hover { border-color: var(--accent); }

/* ── 手机竖屏适配 ──────────────────────────────────────────────────────
 * 桌面设计里有三处写死的宽度都超过手机的卡片内容区（390px 视口下约 310px）：
 *   定位图 280（勉强）、放大图 320、翻面对照两图并排 210+10+210 = 430
 * 后两者会把页面撑出横向滚动条。这里把翻面对照改成上下堆叠、卡片高度交给
 * 内容决定；图片尺寸上限由 JS 按容器宽度收敛（见 app.js 的 contentWidth）。
 * 断点 540px：内容区 = 视口 − main 28 − 卡片 40，并排放得下需 ≥430px 内容区，
 * 即视口 ≥498px，留些余量。桌面与平板（内容区 640px）完全不受影响。 */
@media (max-width: 540px) {
  /* 卡片高度改为内容自适应 —— 堆叠后背面远高于写死的 440px */
  .card-inner { height: auto; }

  /* 窄屏不播 3D 翻转：两面高度差很大，动画期间高度突变反而突兀；
   * 直接切换 + 淡入，也更贴近手机闪卡「点一下就看答案」的手感。 */
  .card-inner, .card-inner.flipped { transform: none; transition: none; }
  .card-face {
    position: relative; inset: auto;
    backface-visibility: visible; -webkit-backface-visibility: visible;
    animation: face-in .18s ease both;
  }
  .card-face.back { transform: none; }
  .card-inner:not(.flipped) .card-face.back,
  .card-inner.flipped .card-face.front { display: none; }

  /* 翻面对照：两图上下堆叠，各占满可用宽度（并排会让每张只剩约 150px） */
  .answer-figs { flex-direction: column; gap: 12px; }

  /* 自评按钮：三个并排原本会挤到换行（「1 · 忘 / 了」） */
  .rate { gap: 8px; }
  .rate button { padding: 11px 14px; font-size: 14px; }

  /* 边距收紧，把宽度让给图片 */
  main { padding: 0 14px 32px; }
  header { padding: 12px 14px 0; }
  h1 { font-size: 18px; }
  .help { width: auto; left: 14px; right: 14px; }
}

@keyframes face-in { from { opacity: 0; } to { opacity: 1; } }