/* TELL · 白纸、墨字、一色翡翠。卡片翻牌是唯一的动效。 */
:root{
  --paper:#FFFFFF;
  --panel:#F5F6F7;
  --line:#E6E8EB;
  --ink:#141414;
  --ink-2:#4B4F55;
  --ink-3:#8A9097;
  --green:#059669;      /* 全页唯一满饱和色：对 / 人 */
  --green-soft:#E6F6EF;
  --amber:#B7791F;      /* 状态色，压过饱和 */
  --amber-soft:#FBF3E4;
  --red:#B3352F;        /* 状态色，压过饱和 */
  --red-soft:#F9EAE8;
  --font-display:"Playfair Display","Noto Serif SC",Georgia,"Times New Roman",serif;
  --font-body:"Manrope","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-read:"Lora","Noto Serif SC",Georgia,"Times New Roman",serif;
  --r:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
html[lang="zh-CN"]{ --font-read:"Noto Serif SC","Lora",Georgia,serif; --font-display:"Noto Serif SC","Playfair Display",serif; }
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100svh;display:flex;flex-direction:column}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.wrap{width:100%;max-width:640px;margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px}
.skip:focus{left:8px;z-index:50}

/* 顶栏 */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:12px;height:56px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--green);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1}
.brand-t{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:.08em}
.top-meta{flex:1;display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-no{font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.top-actions{display:flex;gap:6px}
.ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--ink-2);border:1px solid var(--line);background:#fff;font-weight:700;transition:background .15s var(--ease),transform .1s var(--ease)}
.ic:hover{background:var(--panel)}
.ic:active{transform:scale(.96)}
.ic.lang{width:auto;padding:0 10px;font-size:12px;letter-spacing:.06em}

/* 首屏 */
.intro{padding:34px 0 10px}
.intro-h{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,6vw,38px);line-height:1.12;margin:0 0 12px;letter-spacing:-.01em}
.intro-p{color:var(--ink-2);margin:0 0 18px;font-size:17px;max-width:46ch}
.intro.collapsed{padding:18px 0 0}
.intro.collapsed .intro-h{font-size:18px;margin-bottom:4px}
.intro.collapsed .intro-p,.intro.collapsed .legend{display:none}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--ink-2)}
.legend-col{flex-direction:column;gap:8px;margin:14px 0}
.lg{display:inline-flex;align-items:center;gap:8px}
.lg i{width:14px;height:14px;border-radius:4px;display:inline-block}
.lg.g i{background:var(--green)}.lg.y i{background:var(--amber)}.lg.r i{background:var(--red)}
.lg b{font-weight:500}

/* 进度 */
.progress{display:flex;gap:6px;margin:18px 0 14px}
.progress span{flex:1;height:5px;border-radius:99px;background:var(--line);transition:background .25s var(--ease)}
.progress span.cur{background:var(--ink-3)}
.progress span.g{background:var(--green)}.progress span.y{background:var(--amber)}.progress span.r{background:var(--red)}

/* 题 */
.q-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-3);margin-bottom:4px}
.q-no{font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.q-genre{border:1px solid var(--line);border-radius:99px;padding:2px 10px}
.q-ask{font-family:var(--font-display);font-size:20px;margin:6px 0 14px;font-weight:600}

.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px;margin-bottom:12px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.card:hover{border-color:#D6DADF}
.card-tag{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.card-letter{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink-3);letter-spacing:.1em}
.speak{width:28px;height:28px;border-radius:8px;color:var(--ink-3);display:grid;place-items:center}
.speak:hover{background:var(--panel);color:var(--ink-2)}
.speak.on{color:var(--green)}
.card-text{font-family:var(--font-read);font-size:17.5px;line-height:1.62;color:var(--ink);white-space:pre-wrap;word-break:break-word}
html[lang="zh-CN"] .card-text{font-size:17px;line-height:1.85;letter-spacing:.01em}
.card-text.poem{font-size:17px;line-height:1.6}
.card-text .sent{border-radius:4px;transition:background .15s var(--ease)}
.card.pickable .card-text .sent{cursor:pointer;padding:1px 0;box-shadow:inset 0 -1px 0 var(--line)}
.card.pickable .card-text .sent:hover{background:var(--panel)}
.card-text .sent.hit{background:var(--green-soft);box-shadow:inset 0 -2px 0 var(--green)}
.card-text .sent.miss{background:var(--amber-soft);box-shadow:inset 0 -2px 0 var(--amber)}
.card-src{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:13px;color:var(--ink-2);display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.card-src .who{font-weight:700;color:var(--ink);white-space:nowrap}
.card-src.machine .who{color:var(--ink-3)}
.card-src.human .who{color:var(--green)}
.card-src a{color:var(--ink-2)}
.pick{display:block;width:100%;margin-top:12px;padding:11px 14px;border-radius:10px;border:1px solid var(--ink);font-weight:600;font-size:15px;transition:background .15s var(--ease),color .15s var(--ease),transform .1s var(--ease)}
.pick:hover{background:var(--ink);color:#fff}
.pick:active{transform:scale(.985)}
.card.locked .pick{display:none}
.card.is-machine{border-color:var(--ink);box-shadow:0 8px 24px -14px rgba(0,0,0,.25)}
.card.is-human{border-color:var(--green)}
.card.wrong-pick{border-color:var(--red)}

.step2{background:var(--panel);border-radius:12px;padding:12px 14px;margin:2px 0 12px;font-size:15px;animation:rise .25s var(--ease)}
.step2-p{margin:0}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.reveal{margin:4px 0 20px;animation:rise .25s var(--ease)}
.reveal-badge{display:inline-flex;align-items:center;gap:8px;border-radius:99px;padding:6px 12px 6px 8px;font-weight:700;font-size:14px}
.reveal-badge i{width:16px;height:16px;border-radius:5px}
.reveal-badge.g{background:var(--green-soft);color:var(--green)}.reveal-badge.g i{background:var(--green)}
.reveal-badge.y{background:var(--amber-soft);color:var(--amber)}.reveal-badge.y i{background:var(--amber)}
.reveal-badge.r{background:var(--red-soft);color:var(--red)}.reveal-badge.r i{background:var(--red)}
.reveal-tell{font-size:16px;color:var(--ink);margin:12px 0 14px;line-height:1.55;padding-left:12px;border-left:3px solid var(--line)}
.next,.share{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;border-radius:10px;padding:12px 22px;font-weight:700;font-size:15px;transition:transform .1s var(--ease),opacity .15s}
.next:hover,.share:hover{opacity:.9}
.next:active,.share:active{transform:scale(.98)}
.next{width:100%}
.ghost{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;padding:12px 18px;font-weight:600;font-size:15px;color:var(--ink-2)}
.ghost:hover{background:var(--panel)}

/* 结果 */
.result{padding:8px 0 20px;animation:rise .3s var(--ease)}
.res-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.res-score{font-family:var(--font-display);font-weight:700;font-size:64px;line-height:1;letter-spacing:-.02em}
.res-score small{font-size:22px;color:var(--ink-3);font-weight:600;margin-left:2px}
.res-grid{display:flex;gap:6px}
.res-grid span{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff}
.res-grid span.g{background:var(--green)}.res-grid span.y{background:var(--amber)}.res-grid span.r{background:var(--red)}
.res-persona{font-family:var(--font-display);font-style:italic;font-size:21px;margin:14px 0 20px;color:var(--ink);line-height:1.35}
.res-world{background:var(--panel);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.res-world h2,.res-heat h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;font-weight:700}
.world-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.world-list li{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;font-size:14px}
.world-list .wl-no{font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.world-list .wl-bar{height:8px;border-radius:99px;background:#fff;overflow:hidden;border:1px solid var(--line)}
.world-list .wl-bar i{display:block;height:100%;background:var(--red);opacity:.85}
.world-list .wl-pct{font-variant-numeric:tabular-nums;color:var(--ink-2);min-width:9ch;text-align:right}
.world-list li.you-r .wl-pct{color:var(--red);font-weight:700}
.world-beat{margin:12px 0 0;font-size:14px;color:var(--ink-2)}
.world-beat b{color:var(--ink)}
.world-empty{font-size:14px;color:var(--ink-3);margin:0}
.res-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.res-streak{font-size:14px;color:var(--ink-2);margin:0 0 4px}
.res-next{font-size:14px;color:var(--ink-3);margin:0 0 22px}
.res-next b{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.heat{display:grid;grid-template-columns:auto repeat(7,1fr);gap:4px;font-size:11px;color:var(--ink-3);align-items:center}
.heat .hl{padding-right:6px;white-space:nowrap}
.heat .hd{text-align:center;font-variant-numeric:tabular-nums}
.heat .hc{height:18px;border-radius:5px;background:var(--line)}
.heat .hc.g{background:var(--green)}.heat .hc.y{background:var(--amber)}.heat .hc.r{background:var(--red)}
.heat .hc.none{background:transparent;border:1px dashed var(--line)}

/* 回看 */
.review{padding:8px 0 24px}
.review .card{margin-bottom:10px}
.review .rv-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-3);margin:18px 0 8px}
.review .rv-head b{color:var(--ink-2)}
.review .rv-tell{font-size:14px;color:var(--ink-2);margin:0 0 6px;padding-left:10px;border-left:3px solid var(--line)}
.review .card-text{font-size:15.5px}
.rv-back{margin-top:6px}

/* 关于 */
.about{margin:36px 0 40px;padding-top:26px;border-top:1px solid var(--line);color:var(--ink-2);font-size:15px}
.about h2{font-family:var(--font-display);color:var(--ink);font-size:20px;margin:0 0 10px}
.about p{margin:0 0 12px;max-width:62ch}
.err{background:var(--red-soft);color:var(--red);border-radius:12px;padding:14px 16px;margin:16px 0}
.err p{margin:0}

/* 弹层 */
.modal{position:fixed;inset:0;z-index:40;background:rgba(20,20,20,.35);display:grid;place-items:end center;padding:0}
.modal-card{position:relative;background:#fff;width:100%;max-width:520px;border-radius:18px 18px 0 0;padding:22px 20px 24px;max-height:88svh;overflow:auto;animation:sheet .28s var(--ease)}
@media(min-width:600px){.modal{place-items:center}.modal-card{border-radius:18px;animation:rise .22s var(--ease)}}
@keyframes sheet{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.modal-card h2{font-family:var(--font-display);font-size:24px;margin:0 0 10px}
.modal-card h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:18px 0 8px}
.modal-x{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:10px;font-size:22px;color:var(--ink-3);display:grid;place-items:center;line-height:1}
.modal-x:hover{background:var(--panel)}
.help-list{margin:0;padding-left:20px;color:var(--ink-2)}
.help-list li{margin:6px 0}
.help-foot{font-size:14px;color:var(--ink-3);margin:6px 0 16px}
.modal-card .share{width:100%}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.stats-grid div{background:var(--panel);border-radius:10px;padding:10px 6px}
.stats-grid b{display:block;font-family:var(--font-display);font-size:26px;line-height:1.1}
.stats-grid small{color:var(--ink-3);font-size:11px}
.dist{display:grid;gap:5px}
.dist .row{display:grid;grid-template-columns:14px 1fr;gap:8px;align-items:center;font-size:12px;color:var(--ink-2)}
.dist .bar{height:18px;border-radius:5px;background:var(--line);position:relative;overflow:hidden}
.dist .bar i{display:block;height:100%;background:var(--ink-3);min-width:2px}
.dist .row.you .bar i{background:var(--green)}
.dist .bar b{position:absolute;right:6px;top:0;line-height:18px;font-size:11px;color:#fff;mix-blend-mode:difference}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px;font-size:14px;z-index:60;box-shadow:0 8px 24px -10px rgba(0,0,0,.4)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:380px){.res-score{font-size:54px}.top-meta{display:none}}
.about h3{font-size:15px;color:var(--ink);margin:14px 0 4px;font-weight:700}
.about-by{font-size:13px;color:var(--ink-3);margin-top:18px}