/* レイアウト: 上に固定の年齢と速度、その下にステータス、情景、記録。
   本家に合わせた暗い画面とピンクのアクセント。 */
:root{
  --bg:#0A0A0C;
  --panel:#141417;
  --raised:#1C1C21;
  --line:#26262C;
  --fg:#ECECEE;
  --muted:#8B8B93;
  --pink:#E8417C;
  --green:#4ADE80;
  --amber:#D9A441;
  --teal:#2DD4BF;
  --rose:#EC4899;
  --font-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --font-serif:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-mono:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--font-body);font-size:15px;line-height:1.75;
  padding-left:max(14px,env(safe-area-inset-left,0px));
  padding-right:max(14px,env(safe-area-inset-right,0px));
  padding-block:max(18px,env(safe-area-inset-top,0px)) max(40px,env(safe-area-inset-bottom,0px));
  -webkit-font-smoothing:antialiased;
}
h1,h2,p,ol,ul,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
#view{max-width:520px;margin:0 auto}
.screen{display:flex;flex-direction:column;gap:16px}

.eyebrow{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.22em;color:var(--pink);text-transform:uppercase}
h1{font-family:var(--font-serif);font-weight:900;font-size:clamp(28px,8vw,38px);line-height:1.3;text-wrap:balance}
.lead{color:var(--muted);font-size:13.5px}
.spname{font-family:var(--font-serif);font-weight:900;font-size:clamp(30px,9vw,44px);line-height:1.2}
.sci{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-top:-10px}
.cause{color:var(--pink);font-size:15px;font-weight:500;margin-top:-8px}
.note{font-size:13px;color:var(--muted);border-left:2px solid var(--pink);padding-left:12px}
.fine{font-size:11.5px;color:var(--muted)}
.k{font-size:10.5px;letter-spacing:.08em;color:var(--muted)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px}
button{font-family:var(--font-body);cursor:pointer;border-radius:8px;transition:opacity .15s ease}
button:hover{opacity:.88}
.primary{background:var(--pink);border:0;color:#fff;padding:15px;font-size:16px;font-weight:700;letter-spacing:.04em}
.ghost{background:none;border:1px solid var(--line);color:var(--muted);padding:12px;font-size:13px}
.ghost:hover{color:var(--fg);border-color:var(--pink)}
.endrow{display:flex;flex-direction:column;gap:8px}

/* 抽選演出 */
.draw{min-height:60vh;justify-content:center;align-items:center;text-align:center;gap:10px}
.drawlab{font-size:12px;color:var(--muted);letter-spacing:.1em}
.drawname{font-family:var(--font-serif);font-size:clamp(34px,11vw,54px);font-weight:900}
.drawname.fixed{color:var(--fg);text-shadow:0 0 28px rgba(232,65,124,.45)}
.drawodds{font-family:var(--font-mono);font-size:12px;color:var(--muted)}

/* 上部固定 */
/* 年齢・速度・ステータスをひとまとまりで上に貼りつける。
   高さを決め打ちにすると端末ごとにずれるので、入れ子の sticky にしない。 */
.stickytop{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.topbar{padding-block:8px 10px;display:grid;gap:8px}
.agebox{display:flex;align-items:baseline;gap:2px}
.agenum{font-family:var(--font-serif);font-size:38px;font-weight:600;line-height:1}
.ageunit{font-size:14px;color:var(--muted)}
.agemeta{font-size:11.5px;color:var(--muted);grid-row:1;justify-self:end;align-self:center;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar{grid-template-columns:auto 1fr}
.agebox{grid-column:1}
.prog{grid-column:1/-1;height:3px;background:var(--line);border-radius:999px;overflow:hidden}
.progf{height:100%;width:0;background:var(--pink);transition:width .2s linear}
/* 速度だけ横に流す。一時停止と「次へ」は端末が狭くても常に見える。 */
.ctl{grid-column:1/-1;display:flex;gap:5px;min-width:0;align-items:stretch}
.spwrap{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.spwrap::-webkit-scrollbar{display:none}
.ctlbtn{
  flex:none;background:var(--raised);border:1px solid var(--line);color:var(--muted);
  font-size:12.5px;padding:8px 11px;border-radius:7px;font-variant-numeric:tabular-nums;
}
.ctlbtn.on{background:#3A3A42;color:var(--fg);border-color:#4A4A55}
.ctlbtn.pause{font-size:11px;padding:8px 13px}
.ctlbtn.next{flex:0 0 auto}
.ctlbtn.sp{padding:8px 9px}

/* ステータス */
.stathold{background:var(--bg);border-top:1px solid var(--line)}
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-block:9px}

/* 重点を選ぶ・蓄えを見る・その他 */
.striprow{display:flex;gap:6px;padding-bottom:9px;align-items:stretch}
.stripbtn{
  background:var(--raised);border:1px solid var(--line);color:var(--fg);
  font-family:inherit;font-size:12.5px;padding:8px 11px;border-radius:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
}
.stripbtn:hover{border-color:var(--pink)}
.fsel{flex:1 1 auto;min-width:0;text-align:left;font-weight:500}
.rsel{flex:0 0 auto;font-family:var(--font-mono);font-size:12px;color:var(--amber)}
.rsel.low{color:var(--pink);border-color:var(--pink)}
.more{flex:0 0 auto;width:38px;text-align:center;color:var(--muted);letter-spacing:1px}

/* 取り出しの画面 */
.sheetov{align-items:flex-end}
.sheet{
  width:100%;max-width:520px;max-height:88vh;overflow:auto;
  background:#101013;border:1px solid var(--line);border-radius:12px;
}
.sheeth{
  position:sticky;top:0;background:#101013;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;
}
.sheetk{font-weight:700;font-size:14.5px}
.sheetx{background:none;border:0;color:var(--muted);font-size:15px;cursor:pointer;padding:2px 4px}
.sheetb{padding:14px 16px 20px;display:flex;flex-direction:column;gap:12px}
.optlist{display:flex;flex-direction:column;gap:7px}
.opt{
  width:100%;text-align:left;background:var(--raised);border:1px solid var(--line);
  color:var(--fg);padding:12px 13px;border-radius:8px;display:flex;
  flex-direction:column;gap:4px;font-family:inherit;cursor:pointer;
}
.opt:hover{border-color:var(--pink)}
.opt.on{border-color:var(--pink)}
.opt.off{opacity:.42;cursor:default}
.opt.off:hover{border-color:var(--line)}
.optt{display:flex;justify-content:space-between;align-items:baseline;gap:9px}
.optl{font-size:14px;font-weight:500;min-width:0}
.optn{font-size:11.5px;color:var(--muted);line-height:1.7}
.optmark{font-size:10px;color:var(--pink);font-weight:700;flex:0 0 auto}
.optc{font-family:var(--font-mono);font-size:11.5px;color:var(--amber);flex:0 0 auto}
.fatbig{display:flex;align-items:baseline;gap:6px}
.fatn{font-family:var(--font-mono);font-size:34px;font-weight:600;color:var(--amber)}
.fatu{font-size:12px;color:var(--muted)}
.fatbar{height:5px;background:var(--line);border-radius:999px;overflow:hidden}
.fatbarf{height:100%;background:var(--amber);border-radius:999px;transition:width .3s ease}
.noteta{
  width:100%;min-height:76px;background:var(--raised);border:1px solid var(--line);
  color:var(--fg);font-family:inherit;font-size:14px;padding:11px;border-radius:8px;resize:vertical;
}
.focusnow{font-size:17px;font-weight:500;margin:0}
.panel.flash{outline:2px solid var(--pink);outline-offset:2px}
.stat{display:flex;flex-direction:column;gap:3px;min-width:0}
.sk{font-size:10.5px;color:var(--muted)}
.sv{font-family:var(--font-mono);font-size:16px;font-weight:600}
.s-hp{color:var(--green)} .s-fd{color:var(--amber)} .s-al{color:var(--teal)} .s-bd{color:var(--rose)}
.bt{display:block;height:3px;background:var(--line);border-radius:999px;overflow:hidden}
.bf{display:block;height:100%;background:var(--pink);border-radius:999px;transition:width .3s ease}
.b-hp{background:var(--green)} .b-fd{background:var(--amber)} .b-al{background:var(--teal)} .b-bd{background:var(--rose)}

/* 情景 */
.scenebox{padding:0;overflow:hidden;gap:0}
canvas.scene{
  display:block;width:100%;height:auto;aspect-ratio:120/54;
  image-rendering:pixelated;image-rendering:crisp-edges;
  border-radius:10px 10px 0 0;background:#06070b;
}
.screen > canvas.scene{border-radius:10px;border:1px solid var(--line)}
.cap{font-size:12.5px;color:var(--muted);padding:11px 14px}

/* 記録 */
.logbox{gap:0;padding:0}
.logh{display:flex;justify-content:space-between;align-items:baseline;padding:13px 14px 9px}
.khint{font-size:10.5px;color:var(--muted)}
.loglist li{
  display:grid;grid-template-columns:4.2em 1fr;gap:10px;align-items:baseline;
  padding:10px 14px;border-top:1px solid var(--line);cursor:pointer;
}
.loglist li.star{background:rgba(232,65,124,.07)}
.loglist li.star .lt::after{content:" \2606";color:var(--pink)}
.la{font-family:var(--font-mono);font-size:10.5px;color:var(--muted)}
.lt{font-size:13.5px;min-width:0}
.loglist li:first-child .lt{color:var(--teal)}
.loglist.end li:first-child .lt{color:var(--fg)}

/* 個体記録 */
.idcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.idrow{display:grid;grid-template-columns:6.5em 1fr;gap:10px;padding:9px 14px;border-top:1px solid var(--line);font-size:13px}
.idrow:first-child{border-top:0}
.ik{color:var(--muted);font-size:11.5px}
.iv{min-width:0;overflow-wrap:anywhere}

/* 大きな決断 */
.overlay{
  position:fixed;inset:0;z-index:40;background:rgba(5,5,8,.86);
  display:flex;align-items:center;justify-content:center;
  padding-left:max(12px,env(safe-area-inset-left,0px));
  padding-right:max(12px,env(safe-area-inset-right,0px));
  padding-block:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-bottom,0px));
}
.decision{
  width:100%;max-width:520px;max-height:100%;overflow:auto;
  background:#0E0E11;border:1px solid var(--line);border-radius:12px;padding:18px;
  display:flex;flex-direction:column;gap:14px;
}
.dhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--line);padding-bottom:11px}
.dlab{color:var(--pink);font-size:12px;font-weight:700}
.dage{font-size:11.5px;color:var(--muted)}
.dh{font-family:var(--font-serif);font-size:clamp(23px,6.5vw,30px);font-weight:900;line-height:1.35}
.dt{font-size:14.5px;color:#C9C9CF;line-height:1.95}
.dq{border-left:3px solid var(--green);padding:2px 0 2px 13px;display:flex;flex-direction:column;gap:5px}
.dq p{font-size:12.5px;color:#9FB8A6;line-height:1.85}
.dq cite{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);font-style:normal}
.dchoices{display:flex;flex-direction:column;gap:8px}
.dchoice{
  width:100%;display:grid;grid-template-columns:1.6em 1fr;gap:10px;align-items:baseline;text-align:left;
  background:var(--raised);border:1px solid var(--line);color:var(--fg);padding:14px;font-size:15px;
}
.dchoice:hover{border-color:var(--pink)}
.dnum{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.dlabel{font-weight:500;min-width:0}

/* 内訳の棒 */
.bars{display:flex;flex-direction:column;gap:7px}
.barrow{display:grid;grid-template-columns:9.5em 1fr 3.2em;gap:8px;align-items:center;font-size:11.5px}
.bl{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bv{font-family:var(--font-mono);font-size:11px;text-align:right;color:var(--muted)}
.barrow .bt{height:6px}

.oddsrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--line);padding-top:9px}
.ol{font-size:12.5px;color:var(--muted);min-width:0}
.ov{font-family:var(--font-mono);font-size:14px;font-weight:600;flex:none}
.ov.strong{color:var(--pink);font-size:16px}

.pastlist li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;border-top:1px solid var(--line);padding:7px 0;font-size:13px}
.pastlist li:first-child{border-top:0}
.pm{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);flex:none}

.sitefoot{max-width:520px;margin:30px auto 0;border-top:1px solid var(--line);padding-top:13px;font-size:11px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- 追加のパネル ---- */
.ph{display:flex;justify-content:space-between;align-items:baseline;gap:12px}

/* 今年の重点 */
.focushint{margin-top:-4px}
.focusrow{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.focusbtn{background:var(--raised);border:1px solid var(--line);color:var(--muted);padding:11px;font-size:13.5px}
.focusbtn.on{background:#3A3A42;color:var(--fg);border-color:var(--pink)}

/* 状態 */
.bigstat{display:grid;grid-template-columns:3.6em 1fr 2.4em;gap:10px;align-items:center}
.bsk{font-size:12.5px;color:var(--muted)}
.bsv{font-family:var(--font-mono);font-size:13px;text-align:right}
.bigstat .bt{height:8px}
.big-v-hp{color:var(--green)} .big-v-fd{color:var(--amber)} .big-v-al{color:var(--teal)} .big-v-bd{color:var(--rose)}
.big-hp{background:var(--green)} .big-fd{background:var(--amber)} .big-al{background:var(--teal)} .big-bd{background:var(--rose)}
.statefoot{display:flex;justify-content:space-between;gap:12px;border-top:1px dashed var(--line);padding-top:10px;font-size:12px;color:var(--muted)}

/* 個体記録 */
.idpanel{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.idhead{display:flex;justify-content:space-between;gap:12px;background:var(--pink);color:#fff;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;padding:9px 14px}
.idbody{display:grid;grid-template-columns:84px 1fr;gap:14px;padding:14px}
canvas.portrait{width:84px;height:84px;object-fit:cover;image-rendering:pixelated;
  border:1px solid var(--line);border-radius:4px;background:#06070b}
.idfields{min-width:0;display:flex;flex-direction:column}
.idname{font-family:var(--font-serif);font-size:24px;font-weight:900;line-height:1.2;margin-bottom:8px}
.idfields .idrow{grid-template-columns:5.5em 1fr;padding:5px 0;border-top:1px solid var(--line);font-size:12.5px}
.mrz{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:.06em;
  margin:0;padding:10px 14px;border-top:1px dashed var(--line);white-space:pre;overflow-x:auto}

/* 同じときに生まれた個体たち */
.cohrow{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding:9px 0}
.cohleft{display:flex;flex-direction:column;min-width:0}
.cohn{font-size:14px;font-weight:500}
.cohg{font-size:11px;color:var(--muted)}
.cohs{font-size:11.5px;color:var(--muted);flex:none}
.cohs.gone{color:#5E5E66}

/* 人生地図 */
.lifemap{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.cell{aspect-ratio:1;border:1px solid var(--line);border-radius:3px;background:transparent}
.cell.filled{background:var(--pink);border-color:transparent}
.cell.edge{border-color:var(--pink);border-width:2px}

/* 生存曲線 */
.survsvg{width:100%;height:auto;display:block}
.survsvg .gridline{stroke:#26262C;stroke-width:1}
.survsvg .axis{fill:#8B8B93;font-size:8px;font-family:"Azeret Mono",monospace}
.survsvg .survline{fill:none;stroke:var(--teal);stroke-width:2}
.survsvg .survdot{fill:var(--teal)}
.survnow{font-size:12.5px;color:var(--teal)}

/* 記録の出典 */
.lsrc{display:block;font-size:11px;color:var(--muted);line-height:1.7;margin-top:3px}
.lsrclab{color:var(--teal);margin-right:5px}
.srcnote{line-height:1.8}

/* ---- 終わりのシーケンス ---- */
.ending{
  position:relative;min-height:78vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;cursor:pointer;
}
.skipbtn{
  position:absolute;top:0;right:0;background:none;border:1px solid var(--line);
  color:var(--muted);font-size:12.5px;padding:9px 18px;border-radius:999px;
}
.skipbtn:hover{color:var(--fg);border-color:var(--pink)}
.stage{display:flex;flex-direction:column;gap:14px;width:100%;animation:rise .45s ease both}
.stage.center{align-items:center;text-align:center}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.endbig{font-family:var(--font-serif);font-weight:900;font-size:clamp(28px,8.5vw,40px);line-height:1.3}
.endname{font-family:var(--font-serif);font-weight:900;font-size:clamp(30px,9vw,42px)}
.endyears{font-family:var(--font-mono);font-size:13px;color:var(--muted);letter-spacing:.14em}
.endline{font-size:15.5px;line-height:2;color:#C9C9CF;max-width:30em}
.endline.extra{color:var(--fg)}
.endsub{font-size:13px;color:var(--muted)}
.endage{font-family:var(--font-serif);font-size:17px;color:var(--muted)}
.ending .scene{max-width:100%}
.taphint{font-size:11.5px;color:var(--muted)}
.dots{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:90%}
.dot{width:6px;height:6px;border-radius:2px;background:var(--line)}
.dot.on{background:var(--teal)}

/* ---- 記録カード ---- */
.reccard{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#F4F2EC;color:#1A1A1E}
.rechead{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:#9E2F49;color:#fff;padding:9px 14px;font-size:11.5px}
.rechead .rt{font-family:var(--font-serif);font-weight:900;font-size:14px}
.rechead .rid{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em}
.recbody{padding:14px;display:flex;flex-direction:column;gap:13px}
.rectop{display:grid;grid-template-columns:76px 1fr;gap:13px;align-items:center}
.reccard canvas.portrait{width:76px;height:76px;border-radius:3px;border:1px solid #D4CEC0;background:#0A0A0C}
.rectitle{min-width:0}
.rname{font-family:var(--font-serif);font-weight:900;font-size:24px;line-height:1.2;color:#1A1A1E}
.rsub{font-size:11px;color:#7A7468}
.rdates{font-family:var(--font-mono);font-size:10.5px;color:#7A7468}
.recgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.reccell{display:flex;flex-direction:column;gap:1px;min-width:0}
.rk{font-size:10px;color:#8A8578}
.rv{font-size:13px;font-weight:700;color:#1A1A1E;overflow-wrap:anywhere}
.recbot{display:grid;grid-template-columns:1fr auto;gap:13px;align-items:end;border-top:1px solid #DED8CA;padding-top:11px}
.recmap{min-width:0;display:flex;flex-direction:column;gap:5px}
.lifemap.small{grid-template-columns:repeat(12,1fr);gap:2px}
.lifemap.small .cell{border-color:#D4CEC0}
.lifemap.small .cell.filled{background:#2E7A6A}
.lifemap.small .cell.edge{border-color:#9E2F49}
.recbig{display:flex;flex-direction:column;align-items:flex-end;text-align:right;max-width:11em}
.rbig{font-family:var(--font-serif);font-weight:900;font-size:30px;color:#2E7A6A;line-height:1}
.rbigk{font-size:9.5px;color:#7A7468;line-height:1.5}
.recfoot{font-size:11px;color:#7A7468;border-top:1px solid #DED8CA;padding-top:9px}

canvas.scene{aspect-ratio:200/92}
.idpanel canvas.portrait, .reccard canvas.portrait{aspect-ratio:1}

/* ---- SNSに投稿しやすく ---- */
.mediabox{gap:12px}
.mediarow{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.mediacard{display:flex;flex-direction:column;gap:6px;min-width:0}
.mediacard .md{flex:1 1 auto}
.mbtn{margin-top:auto}
.mthumb{position:relative;border-radius:7px;overflow:hidden;border:1px solid var(--line);background:#0A0A0C}
canvas.mthumbc{display:block;width:100%;height:auto;image-rendering:pixelated}
.msec{position:absolute;right:4px;bottom:4px;background:rgba(10,10,12,.78);color:#fff;
  font-size:9px;padding:2px 5px;border-radius:999px}
.mplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;background:rgba(242,240,232,.9);color:#17171C;
  display:flex;align-items:center;justify-content:center;font-size:11px;padding-left:2px}
.mt{font-family:var(--font-serif);font-size:13.5px;font-weight:600;line-height:1.3}
.md{font-size:10.5px;color:var(--muted);line-height:1.5}
.mbtn{background:#E6DEC4;border:0;color:#2A2416;font-size:12px;font-weight:700;padding:8px;border-radius:999px}

.overlay.media{align-items:center}
.mediaview{width:100%;max-width:360px;max-height:100%;overflow:auto;
  background:#0E0E11;border:1px solid var(--line);border-radius:12px;padding:14px;
  display:flex;flex-direction:column;gap:12px}
.mvhead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:10px}
.mvhead .x{background:none;border:0;color:var(--muted);font-size:17px;cursor:pointer;padding:2px 6px}
.mvhead .x:hover{color:var(--fg)}
canvas.mediaplayer{display:block;width:100%;height:auto;image-rendering:pixelated;border-radius:8px;background:#0A0A0C}
.mvbar{display:flex;justify-content:center}
.mvfoot{text-align:center}
.photostrip{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
canvas.photoimg{flex:none;width:72%;max-width:250px;height:auto;image-rendering:pixelated;
  border-radius:8px;scroll-snap-align:center;border:1px solid var(--line)}

/* ---- 死亡記録 ---- */
.backlink{background:none;border:0;color:var(--muted);font-size:12.5px;padding:0;text-align:left;cursor:pointer}
.backlink:hover{color:var(--fg)}
.deathhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px 0}
.dhl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--pink)}
.dhn{font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.dwhere{font-size:11.5px;color:var(--muted);letter-spacing:.06em}
.death .spname{margin-top:-6px}
.dsub{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);margin-top:-8px}
.dprose{font-size:14.5px;line-height:2.05;color:#C9C9CF}
.causebox{gap:8px}
.causev{color:var(--pink);font-weight:700}
.factgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
.factcell{background:var(--panel);padding:11px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.factcell .ik{font-size:10.5px}
.factcell .iv{font-size:13px;font-weight:500;overflow-wrap:anywhere}

.lifemap.marked .cell{display:flex;align-items:center;justify-content:center;font-size:7px;color:transparent}
.lifemap.marked .cell.mark{color:#fff;background:var(--pink);border-color:transparent;opacity:1!important;font-weight:700}

/* 時期タブ */
.stagetabs{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.stagetabs::-webkit-scrollbar{display:none}
.stagetab{flex:none;background:var(--raised);border:1px solid var(--line);color:var(--muted);
  font-size:12px;padding:7px 12px;border-radius:999px}
.stagetab.on{background:#3A3A42;color:var(--fg);border-color:var(--pink)}

/* 同じときに生まれた個体 */
.cohfull{border-top:1px solid var(--line);padding:11px 0;display:flex;flex-direction:column;gap:3px}
.cohfull.me{border-left:2px solid var(--pink);padding-left:11px}
.cohage{font-family:var(--font-serif);font-size:19px;font-weight:600}
.cohwho{font-size:12px;color:var(--muted)}
.cohtext{font-size:13px;line-height:1.9;color:#B4B4BC}

/* 団体 */
.orgtopic{font-family:var(--font-serif);font-size:16px;font-weight:600}
.orglinks{font-size:13px}
.orglinks a{color:var(--teal);text-decoration:none}
.orglinks a:hover{text-decoration:underline}

.sharetext{width:100%;box-sizing:border-box;background:var(--raised);border:1px solid var(--line);
  border-radius:6px;color:var(--fg);font-family:var(--font-body);font-size:12.5px;line-height:1.9;
  padding:11px;resize:vertical}

/* 一時停止中 */
.run.ispaused .scenebox{outline:1px solid var(--pink);outline-offset:-1px}
.run.ispaused .cap::after{content:" ・ 一時停止中";color:var(--pink)}

/* 前世の記録 */
.pastlist li{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:center}
canvas.pastthumb{width:62px;height:auto;aspect-ratio:200/92;image-rendering:pixelated;
  border-radius:4px;border:1px solid var(--line);background:#0A0A0C}
.pasttext{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-width:0}

/* ===== 明るい画面 ===== */
:root[data-theme="light"]{
  --bg:#F4F2EE;
  --panel:#FFFFFF;
  --raised:#EDEAE4;
  --line:#D8D3CA;
  --fg:#1A1A1E;
  --muted:#6E6A64;
  --pink:#C62862;
  --green:#1F8A4C;
  --amber:#9A6C12;
  --teal:#13807A;
  --rose:#C0317A;
  color-scheme:light;
}
:root[data-theme="light"] .sheet,
:root[data-theme="light"] .sheeth{background:#FFFFFF}
:root[data-theme="light"] .decision{background:#FFFFFF}
:root[data-theme="light"] .overlay{background:rgba(40,36,30,.6)}
:root[data-theme="dark"]{color-scheme:dark}

/* 共有用の1枚絵 */
.sharecard .sharecv{
  width:100%;height:auto;display:block;border:1px solid var(--line);
  border-radius:8px;background:#F4F2EC;margin-block:4px 2px;
}
.endrow .ghost{flex:0 0 auto}
button.bad{border-color:var(--pink)!important;color:var(--pink)}

/* LIFE PATH 2.0 — documentary & lineage */
.dprose{white-space:pre-line;font-size:15px;line-height:2.15;}
.life-story-scroll{max-height:65vh;overflow-y:auto;white-space:pre-line;text-align:left;width:min(620px,92vw);margin:24px auto;font-size:clamp(13px,2vw,17px);line-height:2.0;color:var(--text,#eee);padding:8px 16px;scrollbar-width:thin}
.family-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:15px 0}
.family-cell{display:flex;flex-direction:column;gap:7px;border:1px solid var(--line,#373737);border-radius:9px;padding:14px 11px}
.family-cell strong{font-size:19px;color:var(--accent,#e6e6eb)}
@media(max-width:420px){.family-cell{padding:10px 8px}.family-cell strong{font-size:16px}.life-story-scroll{max-height:65vh}}

/* LIFE PATH 3.0: encounter overlay, share controls, ability status */
.foelabel{margin:.4rem 0 .2rem;color:#edb1a0;font-weight:700;font-size:13px;line-height:1.5}
.abilityline{margin:.35rem 0 0;color:#adcfb4;font-size:12px;letter-spacing:.02em}
.worldconsent{display:flex;align-items:center;gap:10px;padding:12px 0;cursor:pointer;font-size:14px}
.worldconsent input{accent-color:#a8ceaa;min-width:20px;min-height:20px}
.worldstatus{color:var(--muted,#abb0af);font-size:12px;line-height:1.5}
.sharedworld .childbtn{margin-top:8px;width:100%;white-space:normal;min-height:48px}
.sharedworld button:disabled{opacity:.45;cursor:not-allowed}

/* 1-year cycle progress (not remaining lifespan) */
.yearlabel{grid-column:1/-1;min-height:12px;margin-top:-5px;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums;text-align:right}
.prog{height:5px}
.progf{will-change:width}

/* LIFE PATH 3.2 — visualized climate and readable life highlights */
.climatebar{margin:0;padding:9px 14px 5px;color:#aed9cf;font-size:12px;font-weight:700;letter-spacing:.08em;border-bottom:1px solid rgba(170,193,202,.09);}
.end-timeline{margin:14px auto 0;max-width:580px;width:min(90vw,580px);display:grid;gap:0;text-align:left;max-height:64vh;overflow-y:auto;}
.end-timeline-row{display:grid;grid-template-columns:minmax(78px,112px) 1fr;gap:15px;position:relative;padding:10px 4px 12px 15px;border-left:2px solid rgba(230,98,144,.35)}
.end-timeline-row::before{content:'';width:9px;height:9px;border-radius:50%;background:#e85e92;position:absolute;left:-5px;top:17px;box-shadow:0 0 8px rgba(235,82,138,.3)}
.end-timeline-age{color:#e2a9be;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.end-timeline-story strong{font-size:14px;color:#fff4f6;line-height:1.4}
.end-timeline-story p{font-size:13px;color:#bec8cf;margin:4px 0 0;line-height:1.6}
@media(max-width:520px){.end-timeline-row{grid-template-columns:74px 1fr;gap:8px;padding-left:10px}.end-timeline-story strong{font-size:13px}.end-timeline-story p{font-size:12px}}

/* ============================================================
   LIFE PATH 3.3 — 生まれる前の世界 (実装UI / mobile-first)
   ============================================================ */
.home33{gap:20px;padding-top:5px;padding-bottom:10px;overflow:visible}
.home-hero{position:relative;isolation:isolate;min-height:335px;padding:30px 7px 10px;overflow:hidden;border-radius:5px}
.home-hero::after{content:"";pointer-events:none;position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--bg) 3%,rgba(10,10,12,.7) 42%,transparent 95%),linear-gradient(0deg,var(--bg) 4%,transparent 62%)}
.home-stars{position:absolute;inset:0;z-index:-3;opacity:.83;background:
  radial-gradient(1px 1px at 12% 8%,#d3e3ff,transparent),radial-gradient(1px 1px at 34% 17%,#c1dfff,transparent),radial-gradient(1px 1px at 60% 13%,#fff,transparent),radial-gradient(2px 2px at 93% 18%,#bddeff,transparent),radial-gradient(1px 1px at 69% 35%,#fff,transparent),radial-gradient(1px 1px at 82% 48%,#c0f1ff,transparent),radial-gradient(1px 1px at 28% 66%,#fff,transparent),radial-gradient(1px 1px at 98% 69%,#aeeaff,transparent),radial-gradient(1px 1px at 45% 82%,#fff,transparent),radial-gradient(1px 1px at 8% 89%,#fff,transparent)}
.home-planet{position:absolute;z-index:-2;pointer-events:none;right:-118px;top:-55px;width:min(96vw,465px);height:min(96vw,465px);border-radius:50%;transform:rotate(-17deg);opacity:.72;
  background:radial-gradient(circle at 70% 28%,rgba(244,219,172,.73),transparent 3%),
    radial-gradient(ellipse at 61% 62%,rgba(35,130,94,.75) 0%,rgba(34,108,73,.58) 13%,transparent 25%),
    radial-gradient(ellipse at 40% 30%,rgba(40,128,112,.7) 0%,transparent 25%),
    radial-gradient(ellipse at 70% 48%,rgba(42,128,86,.67) 0%,transparent 18%),
    radial-gradient(ellipse at 38% 65%,rgba(45,128,89,.59) 0%,transparent 14%),
    radial-gradient(ellipse at 34% 18%,rgba(208,220,225,.6),transparent 20%),
    radial-gradient(circle at 68% 32%,#307daa 0%,#14375d 42%,#0b1e38 68%,#030c19 82%);
  box-shadow:inset 18px -22px 70px rgba(0,0,0,.85),inset -12px 10px 36px rgba(156,212,249,.3), 0 0 32px rgba(81,173,244,.23),0 0 85px rgba(36,111,203,.12);
}
.home-planet::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(185,225,255,.19);box-shadow:0 0 30px rgba(117,199,255,.19)}
.home-kicker{font:600 10px var(--font-mono);letter-spacing:.24em;color:#5abcb1;position:relative;margin-bottom:10px}
.home-pretitle{position:relative;color:#d4e2e2;font-size:13px;letter-spacing:.055em}
.home-number{position:relative;z-index:1;font:900 clamp(42px,11vw,69px)/1.16 var(--font-serif);letter-spacing:-.07em;white-space:nowrap;margin:12px 0 18px;filter:drop-shadow(0 4px 15px #040609)}
.home-number-one{color:#e45e86;font-size:1.28em;margin-left:4px;vertical-align:-.045em}
.home-copy{position:relative;max-width:96%;white-space:pre-line;font-size:clamp(13px,3.3vw,15px);line-height:2.04;color:#cdd3d6;text-shadow:0 2px 9px #05070a}
.home-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-bottom:1px solid var(--line);padding:0 0 18px}
.home-stat{min-width:0;display:flex;flex-direction:column;gap:5px}
.home-stat-number{font:600 clamp(32px,11vw,50px)/1.2 var(--font-serif);color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.home-stat-label{font-size:11.5px;color:var(--muted);line-height:1.7}
.home-theme{border-bottom:1px solid var(--line);padding:0 0 17px;display:flex;flex-direction:column;gap:7px}
.home-theme-line{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:14px}
.home-theme-line strong{font-weight:700;font-size:15px}
.home-theme-badge{font-size:11px;font-weight:700;border-radius:999px;background:#3ab9ad;color:#071515;padding:4px 12px;white-space:nowrap}
.home-theme p{font-size:13.5px;line-height:1.8;color:var(--muted)}
.home-disclaimer{font-size:10px;color:var(--muted);opacity:.72}
.home-online{display:flex;gap:13px;align-items:flex-start;padding-bottom:2px}
.home-live-dot{display:block;flex:none;width:12px;height:12px;border-radius:50%;background:#e65d87;box-shadow:0 0 0 7px rgba(234,66,118,.16),0 0 20px rgba(234,66,118,.42);margin:11px 7px 0 7px}
.home-online-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.home-online-text strong{font-size:14px;font-weight:600}
.home-online-text p{font-size:13px;color:#51cabb;line-height:1.8}
.home-online-text small{font-size:10px;color:var(--muted);line-height:1.7}
.home-memorial{display:flex;flex-direction:column;gap:10px}
.home-memorial-header{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.home-memorial-header h2{font-size:13px;font-weight:600;color:#c3c6ca;line-height:1.5}
.home-see-all{background:none;color:#ed638c;border:0;font-size:13px;font-weight:700;padding:2px 0;white-space:nowrap}
.home-memory-caption{font-size:11px;color:var(--muted)}
.home-memory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.home-memory{display:flex;flex-direction:column;min-width:0;overflow:hidden;text-align:left;background:#171c24;border:1px solid #303740;border-radius:10px;padding:0;color:var(--fg)}
.home-memory:hover,.home-memory:focus-visible{border-color:var(--pink)}
.home-memory-art{display:block;width:100%;height:auto;aspect-ratio:120/54;object-fit:cover;image-rendering:pixelated;background:#10334a}
.home-memory-info{display:flex;flex-direction:column;gap:0;padding:8px 8px 10px;min-width:0}
.home-memory-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.home-memory-sub{font-size:10px;color:#b4bcc5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.home-birthbar{position:sticky;z-index:22;bottom:max(0px,env(safe-area-inset-bottom));background:linear-gradient(0deg,var(--bg) 78%,rgba(10,10,12,.78));padding:12px 0 6px;display:flex;flex-direction:column;gap:8px;margin-top:1px}
.home-born{background:#e95d88;color:#130e15;width:100%;min-height:66px;font-size:24px;font-weight:800;border-radius:10px;box-shadow:0 10px 36px rgba(232,65,124,.17)}
.home-resume{min-height:43px;color:var(--fg);border-color:#5a5560}
.home-more{margin-top:3px;border:1px solid var(--line);border-radius:10px;padding:14px;color:var(--muted)}
.home-more > summary{font-size:12px;cursor:pointer;list-style-position:inside}
.home-more[open]{display:flex;flex-direction:column;gap:14px}
.home-more .panel{width:100%}
.home-archive{padding:9px 0 25px}
.home-archive>button.ghost{align-self:flex-start}
.home-archive>.home-memory{min-height:110px;display:grid;grid-template-columns:38% 1fr;align-items:center}
.home-archive>.home-memory .home-memory-art{aspect-ratio:120/54}
.home-archive>.home-memory .home-memory-name{font-size:15px}
@media(max-width:380px){
 .home-number{font-size:clamp(38px,10.4vw,55px)}
 .home-hero{min-height:345px}
 .home-memory-grid{gap:5px}
 .home-memory-info{padding:6px 5px 7px}
 .home-memory-name{font-size:11px}
 .home-memory-sub{font-size:9px}
 .home-stats{gap:10px}
}
@media(prefers-reduced-motion:reduce){.home-born{transition:none}}

/* Compact opening composition for small phones: memorial cards remain readable
   above the sticky birth action, without a giant empty hero gap. */
@media(max-width:540px){
 .home33{gap:12px}
 .home-hero{min-height:276px;padding-top:17px;padding-bottom:5px}
 .home-kicker{margin-bottom:6px}
 .home-number{margin:7px 0 10px}
 .home-copy{font-size:12.5px;line-height:1.82}
 .home-stats{padding-bottom:11px}
 .home-stat-number{font-size:38px}
 .home-theme{padding-bottom:11px;gap:4px}
 .home-online-text{gap:2px}
 .home-memorial{gap:6px}
 .home-born{min-height:60px;font-size:22px}
 .home-birthbar{padding:7px 0 4px}
}
@media(max-width:380px){.home-hero{min-height:275px}.home33{gap:10px}}
/* Top screen stays dark even when the player uses the optional light theme
   elsewhere; the cosmic visual and its text keep sufficient contrast. */
.home33{
 --bg:#0A0A0C;--fg:#ECECEE;--muted:#92949d;--line:#262c35;
 --panel:#141417;--raised:#1c1c21;
 background:var(--bg);color:var(--fg);
}

/* LIFE PATH 3.4 — offline archives and manual portable data export */
:root{--font-body:"Hiragino Sans","Noto Sans CJK JP","Yu Gothic",-apple-system,BlinkMacSystemFont,sans-serif;
--font-serif:"Hiragino Mincho ProN","Yu Mincho",Georgia,serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,monospace}
.offline-info .home-live-dot{background:#7bd2a4;box-shadow:0 0 10px #7bd2a450}
.life-backups{gap:10px}
.backup-import{cursor:pointer;display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center}
.backup-import input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@media(max-width:430px){.life-backups button,.backup-import{width:100%;font-size:13px}}

/* LIFE PATH 3.5: living scene and portrait record */
.livingbar{font-size:11px;letter-spacing:.03em;color:#c8dbc7;padding:4px 12px 9px;margin:0;line-height:1.5}
.certpanel{padding:16px;gap:12px}.certificatepreview{display:block;width:min(100%,385px);max-height:580px;object-fit:contain;margin:4px auto;border:1px solid rgba(232,207,202,.22);cursor:zoom-in;background:#101D22}
.certpanel button{width:100%;min-height:48px}.certoverlay{position:fixed;inset:0;z-index:7000;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;background:rgba(0,0,0,.94);padding:62px 10px 15px}.certificatefull{width:min(100%,620px);height:auto;object-fit:contain}.certclose{position:fixed;top:env(safe-area-inset-top,12px);right:15px;z-index:7010;background:#b84475;border:0;color:white;border-radius:20px;padding:11px 18px;font-weight:bold}