/* =========================================================
   ReflexTimer · 全站共用样式
   所有页面引用此文件，不要在页面里重复定义这些 class
   ========================================================= */
:root{
  --bg:#0f1115; --panel:#1a1d24; --line:#2a2f3a;
  --text:#d9dee5; --soft:#d3d7dd; --muted:#9aa0a6;
  --accent:#22c55e; --danger:#ef4444; --go:#166534;
  --radius:12px;
}
/* ---------- 浅色模式（2026-09-30）：同一台仪器的白天形态——象牙纸面 + 墨字 + 同款发丝线。
   GO 态深绿 #166534 + 柔白在纸面上反而更聚焦，两主题共用；accent 链接降档保对比度，
   但按钮/选中 pill 保留亮绿底 + 墨字（全主题一致的品牌锚点） ---------- */
html[data-theme="light"]{
  --bg:#f4f3ee; --panel:#fbfaf6; --line:#ddd9ce;
  --text:#22242a; --soft:#3f444c; --muted:#6f747e;
  --accent:#15803d; --danger:#dc2626;
}
html[data-theme="light"] .play[data-state="wait"]{color:#b91c1c}
html[data-theme="light"] .btn:not(.btn--ghost),
html[data-theme="light"] .preset[aria-pressed="true"]{background:#22c55e;border-color:#22c55e;color:#08210f}
html[data-theme="light"] #ratingTableBody tr.is-you td{background:rgba(21,128,61,.10);box-shadow:inset 3px 0 0 var(--accent)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text); line-height:1.65;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
}
img,svg{max-width:100%;height:auto}
main{max-width:820px;margin:0 auto;padding:24px 16px 64px}

/* ---------- 测量数字字体（仪器读数感；font-display:swap 非阻塞；
   结果面板/历史表初始 hidden/空，字体在玩出成绩前天然不下载） ---------- */
@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/fonts/jetbrains-mono-200.woff2") format("woff2");
  font-weight:200; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ---------- header（所有页面逐字一致） ---------- */
header{
  border-bottom:1px solid var(--line); padding:14px 16px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  max-width:820px; margin:0 auto;
}
header .brand{font-weight:700;text-decoration:none;color:var(--text);font-size:17px}
header nav{display:flex;gap:16px;flex-wrap:wrap}
header nav a{color:var(--muted);text-decoration:none;font-size:15px}
header nav a:hover,header nav a[aria-current="page"]{color:var(--accent)}

/* ---------- 主题切换（太阳/月亮纯 SVG，无 emoji；深色态显示太阳=去浅色，反之亦然） ---------- */
.theme-toggle{
  margin-left:auto; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.theme-toggle:hover{color:var(--text);border-color:var(--muted)}
.theme-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .icon-moon{display:none}
html[data-theme="light"] .theme-toggle .icon-sun{display:none}
html[data-theme="light"] .theme-toggle .icon-moon{display:inline}

/* ---------- 标题与正文 ---------- */
h1{font-size:clamp(26px,6vw,38px);line-height:1.25;margin-bottom:16px}
h2{font-size:clamp(20px,4.5vw,26px);margin:36px 0 12px}
h3{font-size:17px;margin:20px 0 6px}
p,li{color:var(--soft)}
p{margin:10px 0}
ul,ol{padding-left:22px;margin:10px 0}
a{color:var(--accent)}
strong{color:var(--text)}
.hint{color:var(--muted);font-size:14px}

/* ---------- 测试区（首页 / cps 页共用） ---------- */
/* 台面 = 全站 hero：桌面 min(64vh,640px)（折叠线露出结算卡上沿作视觉邀请）、
   移动端 56vh、圆角 24px；红线：板子高度永不超视口（wait→go 信号必须在视口内） */
.play{
  background:var(--panel); border:1px solid var(--line); border-radius:24px;
  min-height:min(64vh,640px); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; cursor:pointer; user-select:none;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  padding:24px; text-align:center; font-size:clamp(18px,4vw,24px);
  font-weight:600; margin:20px 0;
}
/* 等待态：深色底 + 红色描边/状态点，禁止全屏高饱和纯色（护眼红线，见 AGENTS.md 规则 13） */
.play[data-state="wait"]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger),0 0 28px rgba(239,68,68,.15);color:#fca5a5}
.play[data-state="wait"]::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--danger);box-shadow:0 0 12px rgba(239,68,68,.8)}
.play[data-state="wait"] .hint{color:var(--muted);opacity:1}
/* 行动态：允许全底绿（信号语义），深绿 green-800 + 柔白（2026-09-30 用户拍板：green-700 长时间盯着刺眼、纯白花眼） */
.play[data-state="go"]{background:var(--go);color:#e9f2ec;border-color:var(--go)}
.play[data-state="go"] .hint{color:inherit;opacity:.85}
/* 板内一切数字（Attempt N / 毫秒闪现 / CPS 倒计时）同为仪器读数 */
.play b{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400}
.result strong{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400}

/* ---------- 按钮 ---------- */
.btn{
  min-height:48px; min-width:120px; padding:0 24px; border:0; border-radius:var(--radius);
  background:var(--accent); color:#08210f; font:inherit; font-size:16px;
  font-weight:700; cursor:pointer;
}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn--ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.btn--ghost:hover{color:var(--text);border-color:var(--muted)}
.btn--sm{min-height:36px;min-width:0;padding:0 14px;font-size:14px;font-weight:600}

/* ---------- 游戏区双栏（桌面 ≥1024px；移动端保持单栏） ---------- */
@media (min-width:1024px){
  main,header,footer{max-width:1080px}
  .game-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
  .game-side h2{margin-top:20px}
}
.tool-row{margin:8px 0 0;text-align:right}

/* ---------- 时长选择（cps 页） ---------- */
.presets{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:16px 0}
.preset{
  min-height:44px; padding:0 18px; border:1px solid var(--line); border-radius:999px;
  background:var(--panel); color:var(--muted); font:inherit; font-size:15px;
  font-weight:600; cursor:pointer;
}
.preset:hover{color:var(--text)}
.preset[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#08210f}

/* ---------- 结果面板 ---------- */
.result{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; margin:16px 0; text-align:center;
}
.result .big{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:200;font-size:clamp(34px,9vw,56px);line-height:1.1}
.result .big small{font-size:.4em;font-weight:400;color:var(--muted)}

/* ---------- 结算面板：解读句 / 操作行 / 年龄解读（文案全在 HTML，JS 只做显隐） ---------- */
.rating-note{color:var(--muted);font-size:15px}
.result-actions{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:14px}
.result-actions a{font-size:14px}
.age-box{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.age-box .presets{margin:10px 0 0}
.age-out{margin-top:12px;font-size:15px}
.age-out b{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400}

/* ---------- 留存与情绪价值（规则 19）：个人纪录庆祝 + 本机历史榜名次 ---------- */
.pr-line{color:var(--accent);font-weight:600;margin:10px 0 0}
/* 只选直接子级 + 只数可见项：嵌套在 prRank 内部的单复数 span（round/rounds）不得继承分隔符
   （2026-09-30 实锤：裸 span+span 泄漏成 "of your 1 · round"）；
   用 ~ 而非 +：隐藏的兄弟（如未破纪录时的 prBest）不产生分隔符，也不阻断后续可见项的分隔
   （2026-10-07 实锤：prBest 隐藏时 prRank 前出现孤立的 "·"） */
.pr-line > span:not([hidden]) ~ span:not([hidden])::before{content:"· ";color:var(--muted)}
.pr-line b{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400}

/* ---------- 挑战链接落点横幅（#you= 来访）：仪器面板质感，不抢眼 ---------- */
.challenge{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 16px;margin:0 0 16px;color:var(--soft)}
.challenge b{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);font-weight:600}

/* ---------- 评级表「你的落点」高亮（结算后锚链跳过来的视觉落点） ---------- */
#ratingTableBody tr.is-you td{background:rgba(34,197,94,.10);box-shadow:inset 3px 0 0 var(--accent)}

/* ---------- 仪器图表（2026-09-30）：分布曲线 / 评级刻度尺 / CPS 纸带。
   颜色全走主题变量，双主题自动适配；you 游标用全站唯一强调绿（先例：评级表 is-you 行） ---------- */
.chart{margin:14px 0 6px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .curve{fill:none;stroke:var(--muted);stroke-width:1.5}
.chart .curve-fill{fill:var(--text);opacity:.05;stroke:none}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .tick line{stroke:var(--muted);stroke-width:1;opacity:.6}
.chart .tick text,.chart .tick-lbl{
  fill:var(--muted); font-size:10px; text-anchor:middle;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.chart .you line{stroke:var(--accent);stroke-width:2}
.chart .you circle{fill:var(--accent)}
.chart .you text{
  fill:var(--accent); font-size:11px; font-weight:700; text-anchor:middle;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.chart figcaption{text-align:center;margin-top:4px}
.tape rect{fill:var(--muted);opacity:.55}
.tape rect.peak{fill:var(--accent);opacity:1}
/* 浅色模式下曲线描边加深一档，纸面上不发虚 */
html[data-theme="light"] .chart .curve{stroke:var(--soft)}
html[data-theme="light"] .chart .curve-fill{opacity:.07}

/* ---------- FAQ 折叠（文字仍在源码里保 SEO，视觉减压） ---------- */
details{border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:8px 0}
summary{cursor:pointer;font-weight:600;color:var(--text)}
summary::marker{color:var(--muted)}
details p{margin:8px 0 2px}

/* ---------- KPI 四格 ---------- */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
.kpi div{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px;text-align:center}
.kpi .k{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.kpi .v{display:block;font-size:clamp(18px,4.2vw,22px);font-weight:400;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- 表格（评级表 / 历史记录） ---------- */
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
th,td{padding:10px;border:1px solid var(--line);text-align:left}
th{background:var(--panel);font-weight:600}
/* 历史记录 = 仪器台账：数字与日期用等宽，整表统一实验室质感 */
#histBody td{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400}

/* ---------- 广告位（固定高度，防 CLS 抖动；空态隐身，占位框绝不裸奔给用户看） ---------- */
.ad-slot{
  min-height:100px; margin:28px 0; display:flex; align-items:center;
  justify-content:center; color:var(--muted); font-size:13px;
  border:1px dashed var(--line); border-radius:var(--radius);
}
/* 未接入广告时（容器内只有注释、无任何子节点）整块不渲染 */
.ad-slot:empty{display:none}

/* ---------- footer（所有页面逐字一致） ---------- */
footer{
  border-top:1px solid var(--line); padding:24px 16px 40px;
  max-width:820px; margin:0 auto; display:flex; gap:18px;
  flex-wrap:wrap; align-items:center; font-size:14px;
}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--accent)}
footer .copy{color:var(--muted);margin-left:auto}

/* ---------- 无障碍与响应式 ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:600px){
  .play{min-height:56vh}
  .kpi{grid-template-columns:repeat(2,1fr)}
  table{font-size:14px}
  th,td{padding:8px}
  footer .copy{margin-left:0;width:100%}
}