
/* Life V8: reflect, remember, and keep the person visible. */
.life8-question{font-size:1.17rem;font-weight:650;line-height:1.8;margin:0 0 1rem}
.life8-reflection-choices{display:grid;grid-template-columns:1fr;gap:.65rem;padding:.7rem 0 1.25rem}
.life8-reflection-choices button{padding:1rem 1.15rem;text-align:left;border:1px solid var(--line,#bfc2c2);background:transparent;color:inherit;border-radius:10px;font:inherit;line-height:1.6;cursor:pointer}
.life8-reflection-choices button:hover,.life8-reflection-choices button:focus-visible{border-color:var(--accent,#645c4c);background:rgba(128,128,128,.09)}
.life8-ending-portrait{white-space:pre-line;line-height:2;max-width:70ch}
.life8-ending-timeline,.life8-ending-decisions{padding-left:1.45rem;margin:1rem 0 2rem;line-height:1.8}
.life8-ending-timeline li{margin:0 0 1rem;padding-left:.4rem}
.life8-ending-timeline li strong{display:inline-block;min-width:3.6em}
.life8-ending-timeline li span{display:inline}
.life8-ending-decisions li{margin-bottom:.6rem}
.life8-ending-answer{padding:.6rem 1rem;border-left:2px solid #a1a1a1}
.life8-farewell{margin:2rem 0 1rem;padding:1.1rem;border:1px solid var(--line,#bfc2c2);border-radius:12px}
.life8-farewell-options{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.life8-farewell-options button,.life8-copy-record{font:inherit;color:inherit;border:1px solid var(--line,#bfc2c2);background:transparent;border-radius:8px;padding:.7rem 1rem;cursor:pointer}
.life8-farewell-options button:focus-visible,.life8-copy-record:focus-visible{outline:2px solid #888;outline-offset:2px}
.life8-farewell-message{min-height:1.5em}
.life8-peer .depth-peer-text p{line-height:1.65}
@media(max-width:550px){.life8-ending-timeline,.life8-ending-decisions{font-size:.94rem}.life8-farewell-options button{flex:1 1 42%;text-align:center}}



/* V9.2: stationary geometry, with original scenery and age animations intact. */
html { scroll-behavior:auto !important; }
html,body,#gameView { overflow-anchor:none; }
.age-panel { height:500px; min-height:500px; }
.age-panel p#ageLead {
 height:162px;max-height:162px;min-height:0;
 overflow-y:auto;overscroll-behavior:contain;
 scrollbar-width:thin;
}
.age-line{font-variant-numeric:tabular-nums}
#eventList {height:420px;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;padding-right:8px;}
.event-section {min-width:0}
#eventList .event-copy {line-height:1.65}
#depthOldest{margin-top:9px;}
/* A choice stays within the viewport instead of inserting 600+ pixels
   between the age panel and life map on every decision year. */
#decisionPanel:not([hidden]){
 position:fixed;z-index:950;
 top:50%;left:50%;right:auto;bottom:auto;
 transform:translate(-50%,-50%);
 width:min(calc(100vw - 32px),660px);
 max-height:min(calc(100dvh - 36px),740px);
 overflow-y:auto;overscroll-behavior:contain;
 border-radius:14px;
 box-shadow:0 0 0 100vmax rgba(18,36,27,.44),0 24px 76px rgba(0,0,0,.22);
}
@media(max-width:760px) {
 .age-panel{height:500px;min-height:500px;}
 #eventList{height:360px;}
 #decisionPanel:not([hidden]){
  max-height:calc(100dvh - 32px);
  padding:22px 18px;
  border-radius:12px;
 }
}
@media(max-width:380px){
 .age-panel{height:530px;min-height:530px;}
}
@media(prefers-reduced-motion:reduce){
 .age-panel.age-changed .age-line,.age-art-sun,
 .game-view[data-running="true"] .age-panel::after,
 .game-view[data-running="true"] .age-art-hill.one,
 .game-view[data-running="true"] .age-art-hill.two,
 .life-map-cell.is-now,.event-list li:first-child,.living-clock.is-running .clock-beat {
  animation:none!important;transition:none!important;
 }
}

/* V10 — a path summary and an optional observer setting. */
.life10-path{font-size:11px;color:#355c44;max-width:100%;line-height:1.7;margin-top:3px;min-height:22px;position:relative;z-index:2}
.life10-auto-start{display:flex;align-items:flex-start;gap:12px;padding:16px;margin:10px 0 22px;border:1px solid #d6ded3;background:#f1f5ee;cursor:pointer}
.life10-auto-start input{flex:none;width:20px;height:20px;margin:3px 0 0;accent-color:#315845}
.life10-auto-start span,.life10-auto-start strong,.life10-auto-start small{display:block}
.life10-auto-start strong{font-size:13px;margin-bottom:5px}
.life10-auto-start small{font-size:11px;line-height:1.8;color:#647264}
.life-map-section{margin-top:30px;margin-bottom:16px}
@media(max-width:760px){.life10-path{font-size:10px;line-height:1.6}}
