:root { --night:#0b1021; --panel:rgba(13,20,36,0.78); --fg:#f6f1e7; --soft:rgba(246,241,231,0.62); --line:rgba(246,241,231,0.16); --pink:#f472b6; --gold:#fbbf24; --teal:#34d399; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--night);color:var(--fg);font-family:"Noto Sans SC","PingFang SC","Hiragino Sans",system-ui,sans-serif;font-size:16px;line-height:1.9}
#app{max-width:720px;margin:0 auto;padding:0 16px 60px}
.screen{min-height:100vh;padding:18px 0}
.hero{margin:12px 0 20px;text-align:center}
.hero h1{font-size:34px;margin:6px 0;letter-spacing:2px;color:var(--gold)}
.hero .sub{color:var(--soft);font-size:16px;margin:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px 20px 22px;backdrop-filter:blur(8px);box-shadow:0 12px 36px rgba(0,0,0,0.28);margin-top:16px}
.bg{display:none}
h2{font-size:22px;margin:8px 0 4px;letter-spacing:1px}
.body,.text,.ep{margin:10px 0 14px;text-align:justify}
.chTitle{font-size:17px;font-weight:700;display:block}
.chBlurb{font-size:13px;color:var(--soft);display:block;margin-top:4px}
.choices{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.ch{min-height:54px;text-align:left;padding:13px 15px;border-radius:13px;border:1.5px solid var(--line);background:rgba(246,241,231,0.06);color:var(--fg);font:inherit;font-size:16px;cursor:pointer;transition:background .2s,border-color .2s,transform .08s}
.ch:hover{background:rgba(246,241,231,0.12)}
.ch:active{transform:scale(.99)}
.ch.coll{border-color:rgba(160,160,255,0.35)}
.ch.pers{border-color:var(--pink)}
.ch.lock{opacity:.5;cursor:not-allowed;border-style:dashed}
.ch .myth{display:block;font-size:13px;color:var(--gold);margin-top:4px}
.ch .req{display:block;font-size:13px;color:var(--gold);margin-top:4px}
.ch .tag_flip{display:inline-block;background:var(--gold);color:#1f1f1f;border-radius:999px;padding:1px 10px;font-size:13px;margin-left:6px}
.tag_crisis{display:inline-block;background:var(--teal);color:#062418;border-radius:999px;padding:1px 10px;font-size:13px;margin-left:6px}
.prog{font-size:13px;color:var(--soft);letter-spacing:1px;margin-bottom:6px}
.date{font-size:13px;color:var(--gold);letter-spacing:2px}
.stats{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.stat{display:flex;align-items:center;gap:8px}
.sk{width:40px;font-size:13px;color:var(--soft)}
.sbar{flex:1;height:7px;background:rgba(246,241,231,0.08);border-radius:4px;overflow:hidden}
.sbar i{display:block;height:100%;background:var(--teal);border-radius:4px;transition:width .4s ease}
.sv{width:22px;text-align:right;font-size:13px;color:var(--soft);font-variant-numeric:tabular-nums}
.chose{color:var(--soft);font-size:15px;margin:10px 0 6px}
.rbody{margin:12px 0}
.delta{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.dl{border-radius:999px;padding:2px 10px;font-size:13px;color:#062418;background:var(--teal)}
.dl.down{background:#9a6a56;color:#fff}
.go{min-height:50px;width:100%;border:none;border-radius:14px;background:linear-gradient(135deg,var(--pink),var(--gold));color:#0b1021;font:inherit;font-size:17px;letter-spacing:4px;cursor:pointer;margin-top:10px}
.terrainCard{background:rgba(246,241,231,0.06);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:12px}
.twist{background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.4);border-radius:14px;padding:18px;margin:12px 0}
.bindBox{margin-top:12px}
.bindBox textarea{width:100%;min-height:110px;background:rgba(246,241,231,0.04);border:1px solid var(--line);border-radius:12px;color:var(--fg);padding:12px;font:inherit;resize:vertical}
.endCard{background:rgba(246,241,231,0.06);border:1px solid var(--line);border-radius:14px;padding:20px;margin:14px 0}
.quote{border-left:3px solid var(--pink);padding-left:14px;font-size:16px;margin:12px 0}
.tally{display:flex;gap:14px;flex-wrap:wrap;background:rgba(246,241,231,0.05);border-radius:12px;padding:10px 14px;font-size:14px;margin:12px 0}
.dim{font-size:13px;color:var(--soft)}
.fineline{font-size:18px;text-align:center;margin:14px 0;letter-spacing:2px}
.tiny{font-size:12px;color:var(--soft);margin-top:14px}
@media(max-width:480px){.hero h1{font-size:28px} .ch{font-size:15px}}