/* 随机人生模拟 —— 界面实现
 * 基准 = mockups/界面小样-v1.html(2026-10-30 界面冻结,CR-001):
 * dir-3 月份牌骨架 × dir-1 数据人文配色。字体经 CDN,离线回退系统衬线/黑体。 */
:root{
  --paper:#F6F1E6; --paper2:#EFE8D8; --panel:#FBF7EC; --deadbg:#3A342A;
  --ink:#2A2722; --ink2:#6E6759; --ink3:#57513F;
  --teal:#0E7268; --clay:#C96F4A; --clayd:#A4502A;
  --plum:#8E5A7E; --blue:#7A8CA3; --ochre:#D9A441;
  --line:rgba(42,39,34,.16);
  --art:'ZCOOL XiaoWei','Noto Serif SC','Songti SC','SimSun',serif;
  --serif:'Noto Serif SC','Songti SC','SimSun',serif;
  --sans:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{ background:var(--paper); color:var(--ink); font:400 15px/1.75 var(--sans); }
.art{ font-family:var(--art); font-weight:400; }
sup{ font-size:10px; color:var(--ink2); }
sup a{ color:inherit; text-decoration:none; border-bottom:1px dotted rgba(110,103,89,.6); cursor:pointer; }
sup a:hover{ color:var(--teal); }

.screen{ display:none; min-height:100vh; }
.screen.on{ display:block; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 44px; }
.frame{ border:2px solid var(--teal); outline:1px solid rgba(14,114,104,.45); outline-offset:5px; }

/* ---------- 通用按钮 ---------- */
.btn-birth{ font:400 20px var(--art); letter-spacing:.5em; text-indent:.5em;
  color:var(--panel); background:var(--teal); border:none; padding:17px 54px; cursor:pointer;
  box-shadow:4px 4px 0 rgba(165,80,42,.85); transition:transform .12s, box-shadow .12s; }
.btn-birth:hover{ transform:translate(-1px,-1px); box-shadow:6px 6px 0 rgba(165,80,42,.85); }
.btn-gold{ font:400 16px var(--art); letter-spacing:.36em; text-indent:.36em;
  color:var(--panel); background:var(--teal); border:none; padding:14px 38px; cursor:pointer; box-shadow:3px 3px 0 rgba(165,80,42,.85); }
.btn-gold:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 rgba(165,80,42,.85); }
.repick{ font-size:13px; color:var(--ink2); background:none; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.repick:hover{ color:var(--teal); }
.textlink{ font-size:13px; color:var(--ink2); background:none; border:none; cursor:pointer;
  text-decoration:underline; text-underline-offset:4px; font-family:var(--sans); }
.textlink:hover{ color:var(--teal); }

/* ---------- U1 海报 ---------- */
#s1 .poster{ position:relative; margin:34px auto 26px; padding:58px 40px 0; text-align:center; overflow:hidden; }
#s1 .fan{ position:absolute; left:50%; top:120px; width:640px; height:640px; transform:translateX(-50%);
  border-radius:50%; pointer-events:none;
  background:repeating-conic-gradient(from -86deg, rgba(14,114,104,.13) 0deg 5deg, transparent 5deg 12deg);
  -webkit-mask:radial-gradient(circle, transparent 30%, #000 31%);
  mask:radial-gradient(circle, transparent 30%, #000 31%); }
#s1 .vside{ position:absolute; top:56px; writing-mode:vertical-rl; font:600 14px/1 var(--serif);
  letter-spacing:.5em; color:rgba(42,39,34,.78); }
#s1 .vside.l{ left:34px; } #s1 .vside.r{ right:34px; }
#s1 .med{ width:92px; height:92px; margin:6px auto 18px; border-radius:50%; border:2px solid var(--teal);
  display:flex; align-items:center; justify-content:center; position:relative;
  font:900 44px var(--serif); color:var(--teal); background:var(--panel); }
#s1 .med::after{ content:''; position:absolute; inset:5px; border:1px solid rgba(14,114,104,.4); border-radius:50%; }
#s1 h1{ font:400 58px/1.25 var(--art); letter-spacing:.18em; text-indent:.18em; }
#s1 .en{ font:500 13px var(--sans); letter-spacing:.5em; color:var(--teal); margin-top:8px; text-indent:.5em; }
#s1 .lede{ max-width:52ch; margin:16px auto 0; color:var(--ink2); font-size:14.5px; }
#s1 .btnrow{ display:flex; align-items:center; justify-content:center; gap:24px; margin:34px 0 40px; }
.mature{ font-size:14px; color:var(--ink2); max-width:34ch; text-align:left; line-height:1.6; }
.mature b{ color:var(--clayd); }
#s1 .banner{ margin:0 -44px; background:var(--clayd); color:var(--panel); font:500 13px var(--sans);
  letter-spacing:.4em; text-indent:.4em; padding:9px 0; }
#s1 .foot{ display:flex; justify-content:space-between; font-size:14px; color:var(--ink3); padding:14px 2px 60px; gap:14px; flex-wrap:wrap; }
#s1 .cont{ margin:-10px 0 30px; text-align:center; }
#s1 .cont .textlink{ font-size:14px; }
#s1 .eras{ text-align:center; margin:-6px 0 20px; font-size:12.5px; color:var(--ink2); opacity:.85; }
#s1 .eras .opt{ border:1px solid var(--line); border-radius:3px; padding:1px 10px; margin:0 3px; opacity:.5; }

/* ---------- U2 出生登记 ---------- */
#s2 .deciding{ text-align:center; padding:120px 0 30px; }
#s2 .compass{ width:150px; height:150px; margin:30px auto 0; border-radius:50%; border:2px solid var(--teal); position:relative; }
#s2 .compass::before{ content:''; position:absolute; inset:8px; border-radius:50%; border:1px dashed rgba(14,114,104,.4); }
#s2 .needle{ position:absolute; left:50%; top:50%; width:3px; height:56px; background:var(--clayd);
  transform-origin:50% 100%; transform:translate(-50%,-100%); animation:seek 1.1s ease-in-out infinite alternate; }
#s2 .needle::after{ content:''; position:absolute; top:-6px; left:-4px; border:5.5px solid transparent; border-bottom:9px solid var(--clayd); }
@keyframes seek{ from{ rotate:-38deg; } to{ rotate:34deg; } }
#s2 .dt{ font:400 20px var(--art); letter-spacing:.4em; text-indent:.4em; color:var(--teal); }
.reg{ display:none; grid-template-columns:430px 1fr; gap:40px; padding:56px 0 60px; align-items:start; }
.reg.on{ display:grid; }
.paper{ background:var(--panel); color:var(--ink); padding:30px 30px 26px; position:relative; }
.paper::before{ content:''; position:absolute; inset:7px; border:1px solid rgba(165,80,42,.35); pointer-events:none; }
.paper .ptitle{ text-align:center; font:900 22px var(--serif); letter-spacing:.3em; text-indent:.3em; color:var(--clayd); margin-bottom:2px; }
.paper .psub{ text-align:center; font-size:13px; color:var(--ink2); margin-bottom:16px; }
.frow{ display:flex; justify-content:space-between; align-items:baseline; padding:10px 2px; border-bottom:1px dashed rgba(110,101,83,.4); }
.frow .k{ font-size:13px; color:var(--ink2); flex:none; margin-right:12px; }
.frow .v{ font:600 16px var(--serif); text-align:right; }
.frow .v small{ font:400 11.5px var(--sans); color:var(--ink2); margin-left:6px; }
.frow .v .alt{ font:400 11px var(--sans); color:var(--clayd); border:1px dashed rgba(165,80,42,.5); border-radius:2px; padding:0 5px; margin-left:6px; }
.globebox{ text-align:center; }
.mapwrap{ position:relative; width:100%; }
.mapwrap canvas{ width:100%; height:auto; display:block; }
.pulse{ position:absolute; width:13px; height:13px; border-radius:50%; background:var(--clayd);
  transform:translate(-50%,-50%); box-shadow:0 0 0 3px rgba(165,80,42,.25); }
.pulse::after{ content:''; position:absolute; inset:-9px; border:2px solid rgba(165,80,42,.55); border-radius:50%;
  animation:pulse 1.8s ease-out infinite; }
@keyframes pulse{ from{ transform:scale(.4); opacity:.9; } to{ transform:scale(1.6); opacity:0; } }
.globebox .coord{ font-size:13.5px; letter-spacing:.2em; color:var(--teal); margin-top:6px; }
.reg .go{ display:flex; align-items:center; gap:18px; margin-top:24px; }

/* ---------- U3 人生主屏 ---------- */
#s3 .head{ display:flex; justify-content:space-between; align-items:center; padding:24px 0 18px; border-bottom:1px solid rgba(14,114,104,.4); gap:16px; flex-wrap:wrap; }
#s3 .now{ display:flex; align-items:center; gap:16px; }
#s3 .yearcell{ width:86px; padding:8px 0 6px; text-align:center; background:var(--panel); color:var(--ink);
  font:900 30px/1.1 var(--serif); position:relative; border:1px solid rgba(14,114,104,.35); }
#s3 .yearcell small{ display:block; font:500 10px var(--sans); color:var(--clayd); }
#s3 .where{ font-size:13px; color:var(--ink2); }
#s3 .attrs{ display:flex; gap:22px; }
.attr{ text-align:center; }
.attr .k{ font-size:12px; color:var(--ink2); }
.attr .v{ font:600 20px var(--serif); color:var(--teal); }
#s3 .advline{ font:400 11px var(--sans); color:var(--ink2); display:flex; align-items:center; gap:8px; }
#s3 .advline .wheel{ width:11px; height:11px; border:2px solid var(--teal); border-top-color:transparent; border-radius:50%; animation:spin 1.1s linear infinite; }
#s3 .advline.paused .wheel{ animation:none; border-color:var(--ink2); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.cols{ display:grid; grid-template-columns:1fr 300px; gap:38px; padding:24px 0 70px; align-items:start; }
.scroll{ background:var(--panel); color:var(--ink); padding:6px 26px 22px; }
.ev{ display:grid; grid-template-columns:56px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid rgba(110,101,83,.3); }
.ev:last-child{ border-bottom:none; }
.ev .yr{ font:900 17px var(--serif); color:var(--clayd); text-align:center; border:1px solid rgba(165,80,42,.4); align-self:start; padding:2px 0; }
.ev.death .yr{ background:var(--clayd); color:var(--panel); }
.ev .tx{ font-size:14.5px; }
.ev.death .tx b{ color:var(--clayd); }
.ev .meta{ font-size:12px; color:var(--ink2); margin-top:1px; }
.ev .chip{ display:inline-block; font-size:11px; color:var(--ink2); border:1px solid rgba(110,101,83,.45); padding:0 8px; margin-right:8px; border-radius:2px; }
.fatetag{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-right:8px;
  background:var(--clayd); color:var(--panel); font:900 13px var(--serif); border-radius:3px;
  transform:rotate(-6deg); vertical-align:-5px; box-shadow:1px 1px 0 rgba(42,39,34,.3); }
.fatetxt{ font-size:11px; color:var(--clayd); letter-spacing:.1em; margin-right:6px; }
.node{ border:1px solid var(--teal); margin:14px 0; padding:16px 18px 18px; background:var(--paper); color:var(--ink); }
.node .q{ font:600 16px var(--serif); color:var(--teal); margin-bottom:10px; }
.node .q .stat{ font:500 11px var(--sans); color:var(--ink2); margin-left:10px; letter-spacing:.05em; }
.opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.opts.two{ grid-template-columns:repeat(2,1fr); }
.opt{ font:500 13px/1.55 var(--sans); text-align:left; color:var(--ink); background:var(--panel);
  border:1px solid rgba(14,114,104,.5); padding:11px 12px; cursor:pointer; }
.opt i{ display:block; font:600 11px var(--serif); font-style:normal; color:var(--teal); margin-bottom:3px; }
.opt small{ display:block; font-size:11px; color:var(--ink2); margin-top:3px; }
.opt:hover,.opt.sel{ border-color:var(--teal); background:rgba(14,114,104,.1); }
.opt.sel{ cursor:default; }
.conseq{ display:none; margin-top:10px; font-size:13px; color:var(--teal); }
.conseq.on{ display:block; }
.reflect{ padding:10px 0 8px 14px; border-left:3px solid var(--plum); margin:12px 0; }
.reflect .q{ font:600 14px var(--serif); color:var(--plum); }
.reflect .rin{ display:flex; gap:8px; margin-top:8px; }
.reflect input{ flex:1; border:1px solid var(--line); background:var(--paper); padding:7px 11px; font:400 13px var(--sans); color:var(--ink); }
.reflect button{ border:1px solid var(--plum); background:transparent; color:var(--plum); padding:7px 14px; font:500 12.5px var(--sans); cursor:pointer; }
.reflect button.pri{ background:var(--plum); color:#FBF7EC; }
.reflect .a{ font-size:13px; color:var(--ink2); margin-top:6px; }
.screens4{ display:grid; gap:14px; position:sticky; top:16px; }
.hang{ background:var(--panel); color:var(--ink); padding:16px 14px 14px; text-align:center; position:relative; }
.hang::before{ content:''; position:absolute; inset:5px; border:1px solid rgba(14,114,104,.55); pointer-events:none; }
.hang .nm{ font:600 15px var(--serif); margin-top:2px; }
.hang .loc{ font-size:11px; color:var(--ink2); margin:2px 0 8px; }
.hang .st{ font-size:12.5px; border-top:1px dashed rgba(110,101,83,.4); padding-top:8px; }
.hang.dead{ background:var(--deadbg); color:#F0EADC; }
.hang.dead::before{ border-color:rgba(240,234,220,.35); }
.hang.dead .loc{ color:rgba(240,234,220,.65); }
.hang.dead .st{ color:#F0EADC; border-top-color:rgba(240,234,220,.25); }
.hang .seal{ display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center;
  background:var(--clayd); color:var(--panel); font:900 14px var(--serif); border-radius:3px; transform:rotate(-6deg); margin-bottom:6px; }
.screens4 .h4{ font:600 14px var(--serif); color:var(--teal); text-align:center; letter-spacing:.2em; }

/* ---------- U4 死亡结算(立轴) ---------- */
#s4 .axis{ max-width:860px; margin:40px auto 0; }
#s4 .paper{ padding:38px 44px 34px; }
#s4 .fin{ position:absolute; top:20px; right:26px; width:44px; height:44px; background:var(--clayd); color:var(--panel);
  display:flex; align-items:center; justify-content:center; font:900 22px var(--serif); transform:rotate(6deg); border-radius:3px; }
#s4 h2{ font:900 30px var(--serif); text-align:center; }
#s4 .cause{ text-align:center; font-size:13.5px; color:var(--ink2); margin-bottom:6px; }
#s4 .cause b{ color:var(--clayd); font-size:17px; }
.vsrow{ margin:13px 0; }
.vsrow .lbl{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px; }
.vsrow .lbl b{ font:600 15px var(--serif); }
.track{ height:14px; background:var(--paper2); }
.track i{ display:block; height:100%; }
.mirror{ border-top:2px solid rgba(165,80,42,.5); margin-top:14px; padding-top:10px; }
.mirror .m{ display:grid; grid-template-columns:1fr 26px 1fr; gap:6px; padding:7px 0; font-size:13.5px; align-items:center; }
.mirror .m i{ font-style:normal; text-align:center; color:var(--clayd); }
.mirror .m .you{ text-align:right; font-weight:700; }
table.peers{ width:100%; border-collapse:collapse; margin-top:6px; font-size:13px; }
table.peers th{ font:600 12px var(--serif); color:var(--clayd); text-align:left; padding:7px 10px; border-bottom:2px solid rgba(165,80,42,.5); }
table.peers td{ padding:8px 10px; border-bottom:1px dashed rgba(110,101,83,.4); }
table.peers td.m{ font-weight:600; }
table.peers tr.dead td{ color:#8B8371; }
table.peers tr.dead td:nth-child(4){ color:var(--clayd); }
table.peers tr.you td{ background:rgba(14,114,104,.06); }
#s4 .help{ margin:22px 0 0; background:var(--paper2); color:var(--ink2); font-size:13px; padding:12px 18px; }
#s4 .help b{ color:var(--clayd); }
#s4 .act{ text-align:center; padding:24px 0 64px; display:flex; gap:18px; justify-content:center; align-items:center; }

/* ---------- U5 数据来源 ---------- */
#s5 .axis{ max-width:980px; margin:40px auto 0; }
#s5 .paper{ padding:32px 38px 26px; margin-bottom:18px; }
#s5 h2{ font:900 24px var(--serif); text-align:center; color:var(--clayd); letter-spacing:.2em; }
#s5 .psub{ text-align:center; font-size:13px; color:var(--ink2); margin:4px 0 14px; }
#s5 h3{ font:600 17px var(--serif); color:var(--clayd); margin:20px 0 8px; letter-spacing:.1em; }
#s5 p.note{ font-size:13px; color:var(--ink2); margin-bottom:10px; }
table.src{ width:100%; border-collapse:collapse; font-size:13px; }
table.src th{ font:600 12px var(--serif); color:var(--clayd); text-align:left; padding:7px 10px; border-bottom:2px solid rgba(165,80,42,.5); }
table.src td{ padding:7px 10px; border-bottom:1px dashed rgba(110,101,83,.4); vertical-align:top; }
table.src td.m{ font-weight:600; }
table.src .alt{ color:var(--clayd); font-size:12px; }
table.src td.num{ font-variant-numeric:tabular-nums; }
.qrow{ display:flex; gap:10px; align-items:center; margin-bottom:12px; justify-content:center; }
.qrow label{ font-size:13px; color:var(--ink2); }
.qrow select{ border:1px solid rgba(14,114,104,.5); background:var(--panel); padding:7px 12px; font:400 13.5px var(--sans); color:var(--ink); cursor:pointer; min-width:220px; }
.calbox{ border-left:3px solid var(--clayd); padding:8px 0 8px 14px; margin:10px 0; font-size:13px; color:var(--ink2); }
.calbox b{ color:var(--ink); }
.calbox .formula{ font:400 12px var(--sans); color:var(--teal); background:var(--paper); border:1px dashed rgba(110,101,83,.4); padding:6px 10px; margin:8px 0; overflow-x:auto; white-space:nowrap; }
.notice{ font-size:13px; color:var(--ink2); padding:12px 0 70px; max-width:92ch; margin:0 auto; }
.notice b{ color:var(--clayd); }

/* ---------- 全局浮层(装载/错误) ---------- */
.overlay{ position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; background:rgba(246,241,230,.97); }
.overlay.on{ display:flex; }
.ovcard{ max-width:430px; width:88%; text-align:center; }
.ovcard h2{ font:900 22px var(--serif); margin-bottom:12px; }
.ovcard p{ font-size:13.5px; color:var(--ink2); margin-bottom:18px; }
.ovcard .err{ display:inline-block; font:600 12px var(--sans); letter-spacing:.2em; color:var(--clayd); border:1px solid rgba(165,80,42,.5); padding:2px 12px; margin-bottom:14px; }
.meter{ border:1px solid var(--line); height:10px; background:var(--panel); overflow:hidden; }
.meter i{ display:block; height:100%; width:60%; background:var(--teal); animation:load 1.4s ease-in-out infinite alternate; }
@keyframes load{ from{ width:35%; } to{ width:82%; } }

/* ---------- 响应式(能看即可,TBD-4) ---------- */
@media(max-width:960px){
  .wrap{ padding:0 18px; }
  .reg{ grid-template-columns:1fr; }
  .cols{ grid-template-columns:1fr; }
  .screens4{ position:static; }
  #s1 h1{ font-size:40px; }
  #s1 .vside{ display:none; }
  .opts{ grid-template-columns:1fr; }
  #s3 .attrs{ gap:14px; }
  #s4 .paper{ padding:26px 20px; }
}

/* 已决议的历史节点卡:选项禁点(避免误触) */
.node.resolved .opt{ opacity:.55; pointer-events:none; }
.node.resolved .conseq{ display:block; }