/* 1170億分の1 — style.css（試作版のデザインを引き継ぐ） */
:root{
  --bg:#E3E5DF; --paper:#EEF0EA; --ink:#1F221E; --sub:#5E635B; --line:#C5C9BF;
  --ochre:#9E3B22; --ochre-soft:#E9D3C9;
  --s1:#6B5A43; --s2:#8C7351; --s3:#A88E62; --s4:#7C8466; --s5:#5F7480; --s6:#3E4C5E;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#191B18; --paper:#22251F; --ink:#E3E5DF; --sub:#A3A99F; --line:#3A3E36;
    --ochre:#D9714F; --ochre-soft:#3A2A23;
    --s1:#8A7558; --s2:#A38763; --s3:#BCA276; --s4:#8F9878; --s5:#7890A0; --s6:#5F7590;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#191B18; --paper:#22251F; --ink:#E3E5DF; --sub:#A3A99F; --line:#3A3E36;
  --ochre:#D9714F; --ochre-soft:#3A2A23;
  --s1:#8A7558; --s2:#A38763; --s3:#BCA276; --s4:#8F9878; --s5:#7890A0; --s6:#5F7590;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);-webkit-text-size-adjust:100%}
body{min-height:100%;margin:0;background:var(--bg);color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{opacity:.5;cursor:default}
a{color:inherit}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
main{max-width:540px;margin:0 auto;padding:28px 20px 56px}
.serif{font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif}

/* intro */
.count{font-size:15px;color:var(--sub);margin:12px 0 0}
h1{font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;font-weight:800;font-size:clamp(44px,14vw,68px);line-height:1.08;margin:6px 0 18px;letter-spacing:.01em}
h1 small{display:block;font-size:.36em;font-weight:700;margin-top:10px;letter-spacing:.04em}
.lead{margin:0 0 26px;max-width:32em}
.err{color:var(--ochre);font-size:14px}

/* strata */
.strata{margin:0 0 8px}
.bar{display:flex;height:46px;border-radius:4px;position:relative}
.bar span{display:block;height:100%}
.bar span:first-child{border-radius:4px 0 0 4px}.bar span:last-child{border-radius:0 4px 4px 0}
.marker{position:absolute;top:-10px;bottom:-10px;width:3px;background:var(--ochre);transform:translateX(-1px)}
.marker::after{content:"";position:absolute;left:50%;top:-8px;width:14px;height:14px;border-radius:50%;background:var(--ochre);transform:translateX(-50%)}
.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 10px;margin:18px 0 0;padding:0;list-style:none;font-size:12px;color:var(--sub);line-height:1.5}
.legend li{display:flex;gap:6px;align-items:baseline}
.legend i{width:10px;height:10px;border-radius:2px;flex:none;transform:translateY(1px)}
.legend b{color:var(--ink);font-weight:700}
.cap{font-size:13px;color:var(--sub);margin:10px 0 0;line-height:1.6}

.go{display:block;width:100%;margin:28px 0 10px;padding:17px;border:none;border-radius:6px;background:var(--ink);color:var(--bg);font-weight:700;font-size:18px;font-family:"Shippori Mincho",serif}
.go:hover:not(:disabled){background:var(--ochre)}
.ghost{display:block;width:100%;margin:0 0 10px;padding:13px;border:1.5px solid var(--ink);border-radius:6px;background:transparent;font-weight:700;font-size:15px}
.ghost:hover{border-color:var(--ochre);color:var(--ochre)}
.warn{font-size:12px;color:var(--sub);line-height:1.7;margin:0}
.past{margin:30px 0 0}
.past h2{font-family:"Shippori Mincho",serif;font-size:17px;margin:0 0 8px}
.past ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.past li{border-bottom:1px solid var(--line);padding:9px 0;font-size:14px;line-height:1.55}
.past li span{color:var(--sub);display:block;font-size:12px}
details.src{margin:26px 0 0;border-top:1px solid var(--line);padding-top:12px}
details.src summary{cursor:pointer;font-size:14px;font-weight:700}
details.src p,details.src li{font-size:13px;color:var(--sub);line-height:1.7}
details.src ul{padding-left:1.2em;margin:6px 0}

/* birth */
.kicker{font-size:14px;color:var(--sub);margin:0}
.year{font-family:"Shippori Mincho",serif;font-weight:800;font-size:clamp(30px,10vw,54px);line-height:1.15;margin:4px 0 6px;white-space:nowrap}
.year small,.res .line1 small{font-size:.5em;margin-left:.1em}
.place{font-family:"Shippori Mincho",serif;font-size:21px;font-weight:700;margin:0 0 18px;line-height:1.5}
.place .fam{display:block;color:var(--ochre);font-size:18px}
dl.facts{margin:0 0 20px;display:grid;grid-template-columns:5.2em 1fr;gap:8px 14px;font-size:14.5px;line-height:1.6}
dl.facts dt{color:var(--sub);font-size:13px;line-height:1.5;padding-top:2px}
dl.facts dd{margin:0}
.note{background:var(--paper);border-left:3px solid var(--ochre);padding:12px 14px;font-size:14px;line-height:1.7;margin:0 0 6px}
.note small,.src-inline{display:block;color:var(--sub);font-size:11.5px;margin-top:4px}
.nameNote{font-size:12px;color:var(--sub);margin:6px 0 0}

/* life */
.lifehead{position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);padding:10px 0;border-bottom:1px solid var(--line);z-index:2;display:flex;align-items:baseline;gap:12px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.age{font-family:"Shippori Mincho",serif;font-weight:800;font-size:40px;line-height:1;min-width:2.2em}
.age small{font-size:16px;margin-left:2px}
.lifehead .who{font-size:13px;color:var(--sub);line-height:1.4;flex:1;min-width:0}
.speed{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:5px 12px;font-size:13px;white-space:nowrap}
.log{list-style:none;margin:0;padding:14px 0 0}
.log li{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);animation:in .4s ease-out}
.log li .a{font-family:"Shippori Mincho",serif;font-weight:700;color:var(--sub);font-size:14px;padding-top:1px}
.log li.hist .t{font-weight:700}
.log li.fam .t{color:var(--ink)}
.log li.fam .t::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ochre);margin:0 7px 2px 0;vertical-align:middle}
.log li.death .t{color:var(--ochre);font-weight:700}
.log li.choice .t{color:var(--sub);font-size:14px}
.log li.fact .t{color:var(--sub);font-size:13px;line-height:1.65}
.log li.fact .t small{display:block;font-size:11px;margin-top:2px}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ask{margin:16px 0 0;padding:16px;background:var(--paper);border-radius:6px;border:1px solid var(--line)}
.ask p{margin:0 0 10px;font-weight:700;line-height:1.65}
.ask button{display:block;width:100%;text-align:left;margin-top:8px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--bg);font-size:15px;line-height:1.5}
.ask button:hover{border-color:var(--ochre)}

/* 最期と走馬灯 */
.end{margin:26px 0 0;padding:22px 0 0;border-top:2px solid var(--ink)}
.flash{list-style:none;margin:0 0 22px;padding:0}
.flash li{font-family:"Shippori Mincho",serif;font-size:16px;line-height:1.75;margin:0 0 14px;opacity:0;transition:opacity 1.4s ease}
.flash li.on{opacity:1}
.flash li .a{display:block;font-size:12px;color:var(--sub);font-family:"Zen Kaku Gothic New",sans-serif}
.flash li.fact{font-family:"Zen Kaku Gothic New",sans-serif;font-size:14px;color:var(--sub)}
.final{font-family:"Shippori Mincho",serif;font-weight:800;font-size:clamp(22px,6.4vw,28px);line-height:1.6;margin:0 0 6px;opacity:0;transition:opacity 1.6s ease}
.final.on{opacity:1}

/* 子孫の演出 */
.lineage-line{position:absolute;bottom:-8px;height:0;border-bottom:3px dashed var(--ochre);transform-origin:left;animation:grow 2.4s ease-out both}
.lineage-line::after{content:"";position:absolute;right:-2px;top:-5px;border-left:9px solid var(--ochre);border-top:5px solid transparent;border-bottom:5px solid transparent}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lineage{margin:26px 0 0}
.lineage-main{font-family:"Shippori Mincho",serif;font-weight:700;font-size:17px;color:var(--ochre);margin:0 0 6px}
.lineage-note{font-size:13px;color:var(--sub);line-height:1.7;margin:0}
.lineage-note small{display:block;font-size:11px;margin-top:2px}
/* result */
.res .line1{font-family:"Shippori Mincho",serif;font-weight:800;font-size:clamp(28px,9vw,42px);line-height:1.25;margin:4px 0 4px;white-space:nowrap}
.res .line3 span{display:block}
.res .line2{font-family:"Shippori Mincho",serif;font-size:19px;font-weight:700;margin:0 0 4px}
.res .fam{color:var(--ochre)}
.res .line3{color:var(--sub);margin:0 0 14px;font-size:14px;line-height:1.7}
.rfinal{font-family:"Shippori Mincho",serif;font-size:16px;margin:0 0 22px}
.stats{list-style:none;margin:22px 0 6px;padding:0;border-top:2px solid var(--ink)}
.stats li{border-bottom:1px solid var(--line);padding:11px 0;display:flex;justify-content:space-between;gap:16px;align-items:baseline;font-size:14px}
.stats b{font-family:"Shippori Mincho",serif;font-size:20px;white-space:nowrap}
.statsrc{font-size:11.5px;color:var(--sub);margin:0 0 20px}
.alive{font-family:"Shippori Mincho",serif;font-size:18px;line-height:1.8;margin:0 0 18px}
.shot{margin:12px 0 0}
.shot img{width:100%;display:block;border-radius:6px;border:1px solid var(--line)}
.shot p{font-size:12px;color:var(--sub);text-align:center;margin:6px 0 0}
.acts{display:flex;flex-direction:column;gap:8px;margin:18px 0 0}
.acts a,.acts button{display:block;text-align:center;text-decoration:none;padding:15px;border-radius:6px;font-weight:700;font-size:16px}
.acts .p{background:var(--ink);color:var(--bg);border:none}
.acts .g{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.recap{margin:24px 0 0}
.recap summary{cursor:pointer;font-weight:700;font-size:14px}

@media (min-width:700px){ main{padding-top:56px} }
@media (prefers-reduced-motion: reduce){
  .log li{animation:none}
  .flash li,.final{transition:none}
  .lineage-line{animation:none}
}

/* 言語の切り替えと英語版の調整 */
.topbar{display:flex;justify-content:flex-end;margin:-12px 0 0}
.langsw{font-size:13px;color:var(--sub);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px;line-height:1.2}
.langsw:hover{color:var(--ink);border-color:var(--sub)}
html:lang(en) h1{font-size:clamp(40px,12vw,64px);letter-spacing:0}
html:lang(en) h1 small{letter-spacing:0;font-size:.4em}
html:lang(en) dl.facts{grid-template-columns:6.6em 1fr}
html:lang(en) .log li{grid-template-columns:30px 1fr}
html:lang(en) .log li .a{text-align:right}
.res .fam .agep{white-space:nowrap}
html:lang(en) .res .fam .sep{display:none}
html:lang(en) .res .fam .agep{display:block;font-size:.9em}
@media (max-width:480px){html:lang(en) .legend{grid-template-columns:repeat(2,1fr)}}