:root{
  --bg:#fbf5e6; --bg2:#fffdf6; --panel:#ffffff; --line:#d9cdb2; --ink:#2e2a36; --muted:#7a7088;
  --cream:#fffdf6; --cardink:#2e2a36; --accent:#f2b63c; --accent-ink:#b4561c; --red:#c8402f; --green:#3f8f4a; --blue:#2f6fb5;
  --font:"DotGothic16","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh}
#app{max-width:460px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-right))}
.screen{padding:20px 0 40px;display:flex;flex-direction:column;gap:12px}
[hidden]{display:none!important}
button{font:inherit;color:var(--ink);background:var(--panel);border:2px solid var(--line);border-radius:0;padding:10px 14px;cursor:pointer}
button:hover:not([disabled]){border-color:var(--accent-ink)}
button:focus-visible,.card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button[disabled]{opacity:.35;cursor:default}
button.small{padding:5px 10px;font-size:13px}
button.primary{background:var(--accent);color:#2a2433;border-color:var(--accent-ink)}
a{color:var(--accent-ink)}
.pix{image-rendering:pixelated;image-rendering:crisp-edges}
.note{margin:4px 0 0;color:var(--muted);font-size:13px}

/* home */
.title{display:flex;gap:14px;align-items:center}
.title canvas{width:96px;height:96px;flex:none;border:3px solid var(--ink)}
.title h1{margin:0 0 4px;font-size:28px;font-weight:400;letter-spacing:.04em}
.title p{margin:0;font-size:13px;line-height:1.7;color:var(--muted)}
.step{font-size:15px;font-weight:400;margin:18px 0 0;color:var(--accent-ink);border-bottom:2px solid var(--line);padding-bottom:4px}
.samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.samples button{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center;text-align:left;padding:6px 8px;min-width:0}
.samples canvas{width:44px;height:44px}
.samples button>div{min-width:0}
.samples b{display:block;font-weight:400;font-size:13px;line-height:1.4}
.samples small{display:block;font-size:11px;color:var(--muted);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.years{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:4px}
.years button{padding:6px 0;font-size:13px}
.years button[aria-pressed="true"]{background:var(--accent);color:#2a2433;border-color:var(--accent-ink)}
.era{margin:0;font-size:13px;line-height:1.7;background:var(--bg2);padding:8px 10px;border-left:4px solid var(--accent)}
.seg{display:flex}
.seg button{flex:1;padding:6px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sheet{background:var(--cream);color:var(--cardink);border:3px solid var(--ink);box-shadow:0 4px 0 #2e2a3622}
.sheet .cap{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 10px;border-bottom:3px double var(--cardink);font-size:14px}
.sheet .cap span{font-size:11px;color:#6a6278}
.rank{list-style:none;margin:0;padding:0}
.rank li+li{border-top:1px dashed #b9b0a0}
.rank button{width:100%;display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;text-align:left;background:transparent;border:0;color:var(--cardink);padding:9px 10px}
.rank button:hover{background:#f2c14e55}
.rank .no{font-size:18px;color:#a3402f}
.rank .go{font-size:11px;color:#6a6278}
.dex{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:5px}
.dex div{border:2px dashed var(--line);padding:6px 8px;font-size:12px;color:var(--muted);min-width:0}
.dex div.got{border:2px solid var(--accent);color:var(--ink)}
.dex div small{display:block;font-size:10px;line-height:1.4;margin-top:2px}
.chip.change{border-color:var(--accent-ink);color:var(--accent-ink);border-style:dashed}
.next{background:var(--bg2);border-left:4px solid var(--accent-ink);padding:8px 10px;font-size:13px;line-height:1.7;margin:0}
footer{margin-top:20px;border-top:2px solid var(--line);padding-top:10px;font-size:11px;line-height:1.7;color:var(--muted)}
footer p{margin:0 0 6px}

/* play */
#play{min-height:100vh;min-height:100dvh;padding-top:12px;gap:8px}
.hud{display:grid;grid-template-columns:44px auto minmax(0,1fr);gap:10px;align-items:center}
.face{width:44px;height:44px;border:2px solid var(--ink)}
.when b{display:block;font-size:30px;font-weight:400;line-height:1}
.when span{font-size:13px;color:var(--muted)}
.money{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;color:var(--muted);line-height:1.5}
.money b{font-weight:400;color:var(--ink);font-size:16px}
.money b.neg{color:var(--red)}
.money b.up{color:var(--green)} .money b.down{color:var(--red)}
.co{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);min-height:18px}
.co span:first-child{color:var(--ink)}
.ties{display:flex;gap:6px;min-height:34px;align-items:flex-end;flex-wrap:wrap}
.ties figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:1px;transition:opacity .5s,filter .5s}
.ties canvas{width:30px;height:30px;border:2px solid var(--line);background:#efe6cf}
.ties figcaption{font-size:9px;color:var(--muted);line-height:1.1;max-width:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ties figure.up canvas{border-color:var(--green);animation:pop .6s}
.ties figure.down canvas{border-color:var(--red);animation:pop .6s}
@keyframes pop{50%{transform:scale(1.25)}}
.bar{height:6px;background:var(--bg2);border:1px solid var(--line)}
.bar i{display:block;height:100%;background:var(--accent-ink);width:0;transition:width .4s}
.ticker{margin:0;font-size:12px;color:var(--blue);min-height:18px;line-height:1.5}
.ticker.flash{animation:flash .8s}
@keyframes flash{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.talk{min-height:104px;background:var(--bg2);border:2px solid var(--line);padding:8px 12px}
.talk .who{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--accent-ink);margin-bottom:4px}
.talk .who span:last-child{color:var(--muted)}
.talk p{margin:0;font-size:15px;line-height:1.75}
.stage{display:flex;justify-content:center;padding:6px 0;touch-action:none;user-select:none;-webkit-user-select:none}
.card{position:relative;width:min(76vw,300px);aspect-ratio:1;border:4px solid var(--ink);background:var(--cream);box-shadow:0 6px 0 #2e2a3633;touch-action:none;cursor:grab;transition:transform .25s ease}
.card.drag{transition:none;cursor:grabbing}
.card canvas{width:100%;height:100%;display:block}
.card.ev{border-color:#8a7fa0}
.card .label{position:absolute;top:10px;max-width:70%;padding:6px 10px;background:#000c;color:#fff;font-size:15px;line-height:1.4;opacity:0;pointer-events:none}
.card .label.left{left:10px}
.card .label.right{right:10px;text-align:right}
.sprout{position:absolute;left:8px;bottom:8px;background:#2f6b3acc;color:#fff;font-size:12px;padding:3px 8px;line-height:1.4;max-width:calc(100% - 16px)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opts button{display:flex;align-items:center;gap:6px;min-height:52px;font-size:14px;line-height:1.4;text-align:left}
.opts button b{font-weight:400;flex:1}
.opts #bR{justify-content:flex-end;text-align:right}
.opts span{color:var(--accent-ink)}
.opts.ev #bL{display:none}
.opts.ev{grid-template-columns:1fr}
.opts.ev #bR{justify-content:center;text-align:center}
.playfoot{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}
.playfoot #hint{flex:1}

/* result */
.endhead{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center}
.endhead canvas{width:120px;height:120px;border:3px solid var(--ink)}
.endhead small{display:block;color:var(--muted);font-size:12px}
.endhead h2{margin:4px 0;font-size:24px;font-weight:400;line-height:1.35}
.endhead .nw{font-size:14px}
.turn{background:var(--cream);color:var(--cardink);border:3px solid var(--ink);padding:14px;font-size:17px;line-height:1.8}
.turn b{font-weight:400;background:linear-gradient(transparent 60%,#f2b63c88 60%)}
.chain{list-style:none;margin:0;padding:0 0 0 14px;border-left:3px solid var(--green);display:flex;flex-direction:column;gap:8px}
.chain li{overflow-wrap:anywhere;font-size:13px;line-height:1.6;position:relative}
.chain li::before{content:"";position:absolute;left:-20px;top:6px;width:9px;height:9px;background:var(--green)}
.chain li.seed::before{background:var(--accent)}
.chain li.end::before{background:var(--red)}
.chain .y{color:var(--muted);margin-right:6px}
.alt{font-size:13px;color:var(--muted);background:var(--bg2);padding:8px 10px;line-height:1.7}
.story{font-size:14px;line-height:1.85;margin:0}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2px solid var(--line)}
.stats div{display:flex;justify-content:space-between;gap:6px;padding:6px 8px 6px 0;border-bottom:1px dashed var(--line);font-size:13px}
.stats div span:first-child{color:var(--muted)}
.flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.flow li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;position:relative;padding:6px 0}
.flow li::before{content:"";position:absolute;left:25px;top:0;bottom:0;border-left:2px solid var(--line)}
.flow .t{font-size:12px;color:var(--muted);text-align:center;position:relative;z-index:1}
.flow .t b{display:block;font-weight:400;color:var(--ink);background:var(--bg);font-size:13px}
.flow .q{font-size:13px;margin-bottom:4px}
.flow .q i{font-style:normal;color:var(--green);font-size:11px;margin-left:6px}
.flow .os{display:flex;flex-wrap:wrap;gap:6px}
.flow li.turnpt .q{color:var(--accent-ink)}
.flow li.turnpt::after{content:"";position:absolute;left:18px;top:12px;width:16px;height:16px;border:2px solid var(--accent);background:var(--bg);z-index:0}
.chip{font-size:12px;padding:3px 9px;border:2px solid var(--line);line-height:1.5}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
button.chip{padding:3px 9px}
.chip.unk{border-style:dashed;color:var(--muted);min-width:46px}
.chip.seen{border-color:var(--blue);color:var(--blue)}
.share{width:100%;min-height:96px;font:inherit;font-size:13px;background:var(--bg2);color:var(--ink);border:2px solid var(--line);padding:8px;resize:vertical}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row a{display:inline-block;padding:10px 14px;border:2px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none}
.row a:hover{border-color:var(--accent-ink)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--accent);color:#2a2433;padding:8px 14px;font-size:14px;z-index:9;max-width:90vw}
/* もう一人のあなた */
.twins{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.twin{background:var(--panel);border:2px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:4px;min-width:0}
.twin:first-child{border-color:var(--accent-ink)}
.twin canvas{width:100%;aspect-ratio:1;height:auto;border:2px solid var(--ink)}
.twin small{font-size:11px;color:var(--muted)}
.twin b{font-weight:400;font-size:13px;line-height:1.5}
.twin ul{list-style:none;margin:2px 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:11px;line-height:1.5;flex:1}
.twin li .y{color:var(--muted);margin-right:4px}
.twin li.none{color:var(--muted)}
.tend{font-size:14px;color:var(--accent-ink);border-top:1px dashed var(--line);padding-top:4px}
.tnw{font-size:12px}
/* 資産の動き */
.chart{position:relative}
.chart svg{width:100%;height:auto;display:block;background:var(--panel);border:2px solid var(--line)}
.chart .g{stroke:#e9e0cc;stroke-width:1}.chart .g.z{stroke:#bfb39a}
.chart .ax{font-size:9px;fill:var(--muted);font-family:var(--font)}
.chart .w{stroke:#c9bfd9;stroke-width:1;stroke-dasharray:3 3}.chart .wl{font-size:8px;fill:var(--muted);font-family:var(--font)}
.chart .fork{stroke:var(--accent-ink);stroke-width:1.5;stroke-dasharray:4 2}.chart .fl{font-size:8px;fill:var(--accent-ink);font-family:var(--font)}
.chart .la{fill:none;stroke:#b4561c;stroke-width:2;stroke-linejoin:round}
.chart .lb{fill:none;stroke:#2f6fb5;stroke-width:2;stroke-linejoin:round;stroke-dasharray:5 3}
.chart .pa{fill:#b4561c;stroke:var(--panel);stroke-width:2}.chart .pb{fill:#2f6fb5;stroke:var(--panel);stroke-width:2}
.chart .dl{font-size:10px;fill:var(--ink);font-family:var(--font)}
.chart .hx{stroke:var(--muted);stroke-width:1}
.chart .tip{position:absolute;top:6px;width:150px;background:var(--ink);color:var(--bg);font-size:11px;padding:6px 8px;line-height:1.6;pointer-events:none;display:flex;flex-direction:column}
.chart .tip[hidden]{display:none}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;align-items:center}
.legend .note{margin:0;font-size:11px}
i.ka,i.kb{display:inline-block;width:14px;height:3px;vertical-align:middle;margin-right:4px}
i.ka{background:#b4561c}i.kb{background:repeating-linear-gradient(90deg,#2f6fb5 0 5px,transparent 5px 8px)}
.tip i.kb{background:#7fb0ea}
.tbl summary{font-size:12px;color:var(--muted);cursor:pointer}
.tbl table{border-collapse:collapse;font-size:12px;margin-top:6px;width:100%}
.tbl td,.tbl th{border-bottom:1px dashed var(--line);padding:2px 6px;text-align:right;font-weight:400}
/* あの人たちは、いま */
.epi{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.epi li{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center}
.epi canvas{width:40px;height:40px;border:2px solid var(--line);background:#efe6cf}
.epi b{display:block;font-weight:400;font-size:12px;color:var(--accent-ink)}
.epi span{font-size:13px;line-height:1.6}
/* お題 */
.odai{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.odai li{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.odai li span{color:var(--muted)}
.odai li.ok{color:var(--ink)}.odai li.ok span{color:var(--green)}
.odai li em{font-style:normal;font-size:11px;background:var(--accent);color:var(--ink);padding:0 6px}
/* 最後の一文の演出 */
.reveal{position:fixed;inset:0;background:var(--bg);z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;cursor:pointer}
.reveal canvas{width:min(60vw,240px);height:auto;aspect-ratio:1;border:4px solid var(--ink)}
.reveal .ry{font-weight:400;font-size:24px}
.reveal .rt{margin:0;min-height:5em;max-width:340px;text-align:center;font-size:26px;line-height:1.6;opacity:0}
.reveal .rt.long{font-size:17px;line-height:1.9}
.reveal .rt.show{animation:fadein .8s forwards}
.reveal .rs{font-size:11px;color:var(--muted)}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.title .mute{margin-top:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 章の扉と、大きな分かれ道 */
.card.chap{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent) inset}
#play.chap .talk{background:var(--accent);border-color:var(--accent-ink)}
#play.chap .talk .who span:first-child{font-size:15px;color:var(--ink)}
#play.chap .talk p{font-size:18px;line-height:1.6}
.sprout.chap{background:#b4561ccc}
.sprout.gone{background:#5a5468e0}
.flow li.chaphead{padding:12px 0 6px}
.flow li.chaphead .cq{font-size:15px;color:var(--accent-ink);border-bottom:2px solid var(--accent);padding-bottom:3px;margin-bottom:4px}
.flow .ways{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.flow .ways b{font-weight:400;color:var(--ink);background:#f2b63c55;padding:0 4px}
.flow .ways .unk{color:var(--muted);border:1px dashed var(--line);padding:0 4px}
.flow .q i.big{color:var(--accent-ink)}
.flow li.branch .q{font-size:14px}
.routes{font-size:14px;color:var(--accent-ink);margin:10px 0 0}