:root{
  --ink:#1f2330; --ink-soft:#575e75; --paper:#efe7d4; --paper2:#f6f0e0; --card:#fffdf8;
  --line:#d8cfb8; --line-soft:#e7dfc9; --red:#c0392b; --black:#1f2330; --gold:#c99a1e;
  --accent:#2f6f6b; --accent-d:#245854; --accent2:#3a7ca5; --warn:#b5651d;
  --radius:16px; --radius-lg:20px; --shadow:0 6px 22px rgba(31,35,48,.10);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--paper);color:var(--ink);
  -webkit-user-select:none;user-select:none;
  overscroll-behavior:none;
}
#app{
  width:100%;max-width:520px;margin:0 auto;min-height:100vh;position:relative;overflow-x:hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.35), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(196,180,140,.20), transparent 46%),
    var(--paper);
}
.screen{display:none;flex-direction:column;min-height:100vh;
  padding:calc(16px + var(--safe-t)) 16px calc(22px + var(--safe-b))}
.screen.active{display:flex}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}

h1{font-size:26px;margin:0;letter-spacing:3px;color:var(--ink)}
h2{font-size:22px;margin:6px 0 2px}
h3{margin:6px 0}
.tagline{color:var(--ink-soft);font-size:12.5px;margin:5px 0 0;line-height:1.5}
.legal-note{font-size:11px;color:#a49d8c;margin-top:14px;line-height:1.5;text-align:center}

/* topbar / brand */
.topbar{padding:8px 2px 6px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{flex:0 0 auto;width:46px;height:46px;border-radius:14px;background:var(--accent);
  color:#f6f0e0;font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow)}
.offline-chip{margin-left:auto;font-size:11px;color:var(--accent-d);background:#e5f1ee;
  border:1px solid #bfe0d7;border-radius:20px;padding:4px 10px;display:flex;align-items:center;gap:5px;white-space:nowrap}
.offline-chip .dot{width:6px;height:6px;border-radius:50%;background:#2f9e6b;display:inline-block}

/* resume card */
.resume-card{background:var(--accent);color:#f4efe2;border-radius:var(--radius);padding:14px 16px;
  margin-top:14px;box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:center;gap:12px}
.resume-card .rc-txt{flex:1}
.resume-card .rc-k{font-size:12px;opacity:.85}
.resume-card .rc-v{font-size:16px;font-weight:800;margin-top:2px}
.resume-card .rc-go{font-size:22px}

/* emotion strip */
.emotion-strip{display:flex;gap:6px;overflow-x:auto;padding:12px 2px 6px;margin-top:6px;scrollbar-width:none}
.emotion-strip::-webkit-scrollbar{display:none}
.emotion-strip .em{flex:0 0 auto;font-size:11px;background:var(--card);border:1px solid var(--line);
  color:var(--ink-soft);padding:5px 10px;border-radius:20px;white-space:nowrap}
.emotion-strip .em b{color:var(--accent);font-weight:700;margin-right:3px}

/* chapter list */
.chapter-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.chapter-card{background:var(--card);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow);
  border-left:5px solid var(--accent);position:relative;overflow:hidden;transition:transform .12s}
.chapter-card:active{transform:scale(.99)}
.chapter-card.locked{opacity:.55;filter:grayscale(.4)}
.chapter-card .ch-no{font-size:12px;color:var(--accent);letter-spacing:2px;font-weight:700}
.chapter-card .ch-title{font-size:19px;font-weight:800;margin:3px 0}
.chapter-card .ch-sub{font-size:12.5px;color:var(--ink-soft);line-height:1.55}
.chapter-card .ch-meta{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.chapter-card .chip{font-size:11px;background:#efeade;color:var(--ink-soft);padding:3px 8px;border-radius:8px}
.chapter-card .lock{position:absolute;right:14px;top:14px;font-size:18px}
.chapter-card .prog{height:5px;background:#e9e3d3;border-radius:4px;margin-top:11px;overflow:hidden}
.chapter-card .prog>i{display:block;height:100%;background:var(--accent);width:0%;transition:width .4s}
.chapter-card .done-badge{position:absolute;right:12px;top:12px;font-size:11px;color:var(--accent);
  background:#e5f1ee;border-radius:20px;padding:2px 8px}

/* buttons */
.primary-btn{background:var(--accent);color:#f6f0e0;border:0;border-radius:13px;padding:14px;
  font-size:16px;font-weight:700;width:100%;margin-top:16px;cursor:pointer;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;gap:8px}
.primary-btn.slim{padding:12px;margin-top:12px;font-size:15px}
.primary-btn:active{transform:translateY(1px)}
.ghost-btn{background:transparent;border:1px dashed var(--line);color:var(--ink-soft);
  border-radius:12px;padding:12px;width:100%;margin-top:14px;cursor:pointer;font-size:13.5px;
  display:flex;align-items:center;justify-content:center;gap:7px}
.back{background:none;border:0;color:var(--ink-soft);font-size:15px;cursor:pointer;padding:6px 2px;align-self:flex-start;
  display:flex;align-items:center;gap:2px}
.back.small{font-size:22px;padding:4px}
.sub{font-size:12.5px;color:var(--ink-soft);margin:2px 0 10px}

/* chapter intro */
.emotion-curve{position:relative;height:112px;margin:14px 0 2px;padding:10px 10px 22px;
  background:var(--card);border-radius:14px;border:1px solid var(--line)}
.emotion-curve svg{width:100%;height:100%;overflow:visible}
.curve-cap{font-size:11.5px;color:#a49d8c;text-align:center;margin:2px 0 4px}
.goal{font-size:14px;line-height:1.7;background:#fbf3df;border:1px solid #eeddb6;border-radius:12px;padding:13px;color:#6b5a2e;margin-top:8px}
.case-chips{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.case-chips .cc{font-size:12.5px;background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:10px 12px;color:var(--ink-soft);display:flex;align-items:center;gap:10px}
.case-chips .cc .n{flex:0 0 22px;height:22px;border-radius:50%;background:#efeade;color:var(--accent);
  font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.case-chips .cc b{color:var(--ink);font-size:13.5px;display:block}
.case-chips .cc.done .n{background:var(--accent);color:#fff}

/* ===== PLAY ===== */
.play-screen{padding-top:calc(10px + var(--safe-t))}
.play-top{display:flex;align-items:center;gap:8px}
.play-title{flex:1;display:flex;flex-direction:column;line-height:1.3;min-width:0}
#play-title{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-block;font-size:11px;background:var(--accent);color:#fff;padding:2px 9px;border-radius:20px;width:fit-content;margin-top:3px}
.icon-btn{background:var(--card);border:1px solid var(--line);border-radius:11px;width:40px;height:40px;
  font-size:19px;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;flex:0 0 auto}

.mode-menu{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:10px 0 4px;overflow:hidden;box-shadow:var(--shadow)}
.mode-menu button{width:100%;background:none;border:0;border-bottom:1px solid var(--line-soft);
  padding:12px 14px;text-align:left;cursor:pointer;color:var(--ink-soft)}
.mode-menu button:last-child{border-bottom:0}
.mode-menu button b{color:var(--ink);font-size:14px;display:block}
.mode-menu button span{font-size:11.5px}
.mode-menu button.active{background:#eef6f4}
.mode-menu button.active b{color:var(--accent)}

.stage{display:flex;gap:10px;align-items:stretch;margin-top:10px}
.board-col{flex:1;min-width:0;display:flex;align-items:center;justify-content:center}
.board-wrap{position:relative;width:100%}
#board-host{width:100%}
#board-host svg{display:block;width:100%;height:auto;border-radius:14px;
  background:#f0e6cc;box-shadow:var(--shadow)}
.overlay-fx{position:absolute;inset:0;pointer-events:none;border-radius:14px}
.killmark{position:absolute;inset:0;border-radius:14px;background:rgba(18,16,26,.5);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px;pointer-events:none;
  transition:opacity .5s;z-index:5}
.killmark #killmark-txt{color:#f6f0e0;font-size:14px;font-weight:600;letter-spacing:1px}
.owning-fx{position:absolute;left:0;right:0;bottom:10px;text-align:center;pointer-events:none;
  font-size:13px;color:var(--warn);font-weight:700;opacity:0;transition:opacity .3s;z-index:6}
.owning-fx.show{opacity:1}

/* timeline scrubber */
.timeline{flex:0 0 42px;display:flex;flex-direction:column;align-items:center;padding:2px 0}
.tl-cap{font-size:10px;color:var(--ink-soft)}
.tl-cap.tl-top{color:var(--red);font-weight:700}
.tl-track{flex:1;width:8px;background:#e6ddc6;border-radius:8px;margin:8px 0;position:relative;cursor:pointer;touch-action:none}
.tl-fill{position:absolute;left:0;right:0;top:0;background:var(--gold);border-radius:8px 8px 0 0;height:0%}
.tl-thumb{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:20px;height:20px;
  border-radius:50%;background:var(--gold);border:3px solid var(--card);box-shadow:var(--shadow)}
.tl-step{font-size:11px;color:var(--ink-soft);margin-top:4px;font-weight:700}

.narrative{min-height:52px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 13px;margin:12px 0;font-size:14px;line-height:1.65;color:var(--ink)}
.narrative .human{color:var(--warn);font-weight:700}
.narrative .reveal{color:var(--accent);font-weight:600}
.narrative .gold{color:var(--gold);font-weight:700}

/* inline suspense */
.suspense-inline{background:var(--card);border:1px solid #eeddb6;border-radius:14px;padding:14px;
  margin:0 0 12px;box-shadow:var(--shadow);animation:rise .3s}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.suspense-tag{font-size:11px;letter-spacing:2px;color:var(--warn);font-weight:800}
.suspense-q{font-size:16px;font-weight:700;margin:8px 0 12px;line-height:1.5}
.opts{display:flex;flex-direction:column;gap:9px}
.opts button{background:#f4efe1;border:1px solid var(--line);border-radius:11px;padding:13px;text-align:left;
  font-size:14px;cursor:pointer;color:var(--ink);transition:.15s}
.opts button.correct{background:#e7f4ec;border-color:#8bc34a;color:#2e6b3e;font-weight:700}
.opts button.wrong{background:#fdeee9;border-color:#e0b39c;color:#a2542c}
.suspense-fb{margin-top:12px;font-size:14px;line-height:1.65;background:#eef6f4;border-radius:11px;padding:12px;color:#2f6f6b}
.suspense-fb .reveal{color:var(--accent);font-weight:700}
.suspense-fb .gain{display:block;margin-top:7px;color:var(--warn);font-weight:600}

/* controls */
.play-controls{display:flex;gap:8px;margin-top:auto;padding-top:6px}
.ctrl{flex:1;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px;
  font-size:14px;font-weight:700;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:6px}
.ctrl.primary{background:var(--accent);color:#f6f0e0;border:0;flex:1.5}
.ctrl.insight{flex:0 0 54px;color:var(--gold)}
.ctrl:active{transform:translateY(1px)}
.ctrl:disabled{opacity:.4}

/* modal */
.modal{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(20,18,26,.62);
  display:flex;align-items:center;justify-content:center;padding:22px;z-index:60}
.modal.hidden,.hidden{display:none!important}
.modal-card{background:var(--card);border-radius:20px;padding:22px;width:100%;max-width:400px;box-shadow:var(--shadow);animation:pop .25s}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.done-check{width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.done-check svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.summary{font-size:14.5px;line-height:1.7;color:var(--ink);text-align:center}
.case-stats{display:flex;gap:10px;margin:16px 0;flex-wrap:wrap}
.case-stats .st{background:#f4efe1;border-radius:10px;padding:10px 12px;font-size:12px;color:var(--ink-soft);flex:1;min-width:88px;text-align:center}
.case-stats .st b{display:block;font-size:20px;color:var(--ink);margin-top:2px}
.case-branch{margin:0 0 4px;padding:12px;background:#f4efe1;border-radius:11px;font-size:13px;line-height:1.6;color:#6b5a2e}
.case-branch b{color:var(--warn)}

/* radar */
.radar-host{display:flex;justify-content:center;margin:10px 0}
.persona{font-size:14px;line-height:1.7;background:#eef6f4;border-radius:12px;padding:14px;color:#2f6f6b}
.action-tip{font-size:13.5px;line-height:1.6;background:#fbf3df;border:1px solid #eeddb6;border-radius:12px;padding:13px;margin:12px 0;color:#6b5a2e}
.action-tip b{color:var(--warn)}

/* insights */
.insight-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.insight-item{background:var(--card);border-radius:12px;padding:13px;box-shadow:var(--shadow);border-left:4px solid var(--gold)}
.insight-item .ih{font-size:13.5px;font-weight:800;color:var(--ink)}
.insight-item .it{font-size:11.5px;color:#a49d8c;margin-top:3px}
.insight-item .ip{font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.5}

/* onboarding */
.onboard{position:fixed;inset:0;background:rgba(20,18,26,.72);z-index:80;display:flex;align-items:flex-end;justify-content:center;padding:18px;padding-bottom:calc(18px + var(--safe-b))}
.onboard-card{background:var(--card);border-radius:20px;padding:20px;width:100%;max-width:440px;box-shadow:var(--shadow);animation:rise .3s}
.ob-body h3{font-size:20px;margin:2px 0 8px}
.ob-body p{font-size:14px;line-height:1.7;color:var(--ink-soft);margin:0}
.ob-visual{height:120px;background:#f0e6cc;border-radius:14px;margin:12px 0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ob-nav{display:flex;align-items:center;gap:12px;margin-top:6px}
.ob-dots{display:flex;gap:6px;flex:1}
.ob-dots i{width:7px;height:7px;border-radius:50%;background:#d8cfb8}
.ob-dots i.on{background:var(--accent);width:18px;border-radius:5px}
.ob-nav .primary-btn{margin-top:0;width:auto;padding:11px 22px}
.ob-skip{background:none;border:0;color:#a49d8c;font-size:12.5px;margin-top:12px;width:100%;cursor:pointer}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(40px + var(--safe-b));transform:translateX(-50%);background:var(--ink);color:#f6f0e0;
  padding:11px 18px;border-radius:30px;font-size:13.5px;z-index:90;box-shadow:var(--shadow);animation:pop .2s;max-width:82%;text-align:center}

/* fx keyframes */
@keyframes pulseRing{0%{opacity:.9;r:19}50%{opacity:.35;r:24}100%{opacity:.9;r:19}}
.pulse{animation:pulseRing 1.1s ease-in-out infinite}
@keyframes fadeInPiece{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}