:root {
  --bg: #11141b;
  --panel: rgba(25, 30, 41, .94);
  --panel2: #202737;
  --ink: #f4f1ea;
  --muted: #aab4c5;
  --line: rgba(255,255,255,.1);
  --accent: #f1c56a;
  --good: #70d69e;
  --warn: #f0b064;
  --bad: #ec7a7a;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:radial-gradient(circle at 50% -20%, #2a3140, var(--bg) 55%); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; }
body { min-height:100vh; overflow-x:hidden; }
button, input { font:inherit; }
button { color:inherit; }
#app { min-height:100vh; max-width:1600px; margin:0 auto; padding:12px 18px 22px; display:flex; flex-direction:column; }
.topbar { display:flex; gap:18px; align-items:center; justify-content:space-between; min-height:94px; }
.brand { display:flex; align-items:center; gap:12px; min-width:260px; }
.brand-mark { width:48px; height:48px; border:1px solid rgba(255,255,255,.18); border-radius:50%; display:grid; place-items:center; color:#17191f; background:linear-gradient(145deg,#f6d588,#c8933c); font-weight:900; font-size:24px; box-shadow:0 8px 30px rgba(0,0,0,.25); }
h1 { margin:0; font-family:Georgia, serif; font-size:26px; letter-spacing:.2px; }
.age-line { color:var(--muted); margin-top:2px; font-size:13px; }
.stats { flex:1; display:grid; grid-template-columns:1.2fr 1.2fr .9fr .9fr .9fr; gap:8px; max-width:960px; }
.stat { min-height:56px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); border:1px solid var(--line); border-radius:12px; padding:7px 10px; text-align:left; position:relative; overflow:hidden; }
.stat span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:1.1px; }
.stat strong { display:block; margin-top:2px; font-size:18px; font-variant-numeric:tabular-nums; }
.stat.goals { cursor:pointer; }
.stat.goals:hover { border-color:rgba(241,197,106,.5); }
.meter { height:4px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; margin-top:5px; }
.meter i { display:block; height:100%; width:100%; border-radius:99px; background:var(--good); transition:width .35s ease, background .35s ease; }
main { flex:1; display:grid; grid-template-rows:minmax(390px,1fr) auto; gap:12px; min-height:0; }
.scene-wrap { position:relative; min-height:390px; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:#222; box-shadow:0 22px 70px rgba(0,0,0,.35); }
#scene { display:block; width:100%; height:100%; min-height:390px; object-fit:cover; }
.scene-overlay { position:absolute; inset:0; pointer-events:none; }
.scene-overlay button { pointer-events:auto; }
.help-button, .journal-button, .pause-button { position:absolute; top:14px; border:1px solid rgba(255,255,255,.18); background:rgba(18,22,29,.82); backdrop-filter:blur(8px); border-radius:10px; padding:9px 12px; cursor:pointer; box-shadow:0 5px 20px rgba(0,0,0,.18); }
.help-button { right:88px; border-color:rgba(112,214,158,.65); color:#c7f5dc; }
.journal-button { left:14px; }
.pause-button { right:14px; }
.toast { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); max-width:min(620px,85%); background:rgba(15,18,24,.9); border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:10px 14px; text-align:center; box-shadow:0 8px 25px rgba(0,0,0,.3); font-size:14px; animation:toastIn .2s ease; }
@keyframes toastIn { from{ opacity:0; transform:translate(-50%,8px);} to{opacity:1; transform:translate(-50%,0);} }
.choice-zone { background:rgba(23,28,38,.72); border:1px solid var(--line); border-radius:18px; padding:12px; }
.choice-hint { min-height:28px; color:#d8deea; text-align:center; font-family:Georgia,serif; font-size:15px; padding:0 8px 8px; }
.choices { display:grid; grid-template-columns:1fr 1fr .88fr 1fr 1fr; gap:9px; }
.choice { min-height:86px; cursor:pointer; border:1px solid rgba(255,255,255,.11); border-radius:13px; background:linear-gradient(180deg,#2a3243,#202635); padding:9px 10px; display:flex; flex-direction:column; justify-content:center; transition:transform .12s ease,border-color .12s ease,background .12s ease; box-shadow:0 7px 20px rgba(0,0,0,.14); }
.choice:hover:not(:disabled) { transform:translateY(-2px); border-color:rgba(241,197,106,.55); background:linear-gradient(180deg,#333c50,#252c3b); }
.choice:active:not(:disabled) { transform:translateY(0); }
.choice .type { color:var(--accent); font-size:9px; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:4px; }
.choice .label { font-weight:750; font-size:14px; line-height:1.18; }
.choice .flavor { color:var(--muted); font-size:10px; margin-top:4px; line-height:1.2; }
.choice.nothing { background:linear-gradient(180deg,#373945,#272a34); }
.choice.nothing .type { color:#c3c7d0; }
.choice:disabled { opacity:.18; cursor:not-allowed; filter:grayscale(.7); }
.modal { position:fixed; inset:0; display:none; place-items:center; z-index:20; background:rgba(7,9,13,.72); backdrop-filter:blur(8px); padding:18px; }
.modal.open { display:grid; }
.panel { position:relative; width:min(680px,96vw); max-height:90vh; overflow:auto; background:linear-gradient(160deg,#252c3c,#171c27); border:1px solid rgba(255,255,255,.15); border-radius:20px; box-shadow:0 30px 100px rgba(0,0,0,.55); padding:28px; }
.start-panel { width:min(590px,96vw); }
.panel h2 { font:700 30px/1.05 Georgia,serif; margin:7px 0 12px; }
.panel p { color:#cad2df; line-height:1.55; }
.eyebrow { color:var(--accent); font-size:10px; letter-spacing:2px; font-weight:800; }
label { display:block; color:var(--muted); font-size:12px; margin-top:20px; }
input { display:block; width:100%; margin-top:6px; border:1px solid rgba(255,255,255,.15); border-radius:10px; padding:12px; background:#111722; color:white; outline:none; }
input:focus { border-color:#d6aa55; }
.presentation-row { display:flex; gap:8px; align-items:center; margin:14px 0 20px; }
.presentation-row > span { color:var(--muted); font-size:12px; margin-right:auto; }
.presentation { border:1px solid var(--line); background:#202737; border-radius:9px; padding:8px 14px; cursor:pointer; }
.presentation.active { border-color:#d5aa59; color:#ffe2a8; }
.primary,.secondary { width:100%; border:0; border-radius:11px; padding:12px 16px; font-weight:800; cursor:pointer; margin-top:8px; }
.primary { background:linear-gradient(145deg,#f1ce82,#c9933e); color:#19160f; }
.secondary { background:#30394c; border:1px solid var(--line); }
.close { position:absolute; top:12px; right:14px; border:0; background:transparent; color:#c9d1de; font-size:29px; cursor:pointer; }
.hidden { display:none !important; }
.info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.info-card { border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:12px; padding:12px; }
.info-card h3 { margin:0 0 5px; font-size:13px; color:#f0d18e; }
.info-card p { margin:0; font-size:12px; color:#bbc4d2; }
.timeline { list-style:none; padding:0; margin:15px 0 0; display:grid; gap:8px; }
.timeline li { padding:9px 10px; border-left:2px solid rgba(241,197,106,.45); background:rgba(255,255,255,.025); color:#c8d0dc; font-size:12px; }
.ending-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:17px 0; }
.ending-summary div { background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px; padding:10px; text-align:center; }
.ending-summary strong { display:block; font-size:19px; }
.ending-summary span { color:var(--muted); font-size:10px; text-transform:uppercase; }
@media(max-width:900px){
  #app{padding:8px}.topbar{align-items:flex-start;flex-direction:column}.brand{min-width:0}.stats{width:100%;grid-template-columns:repeat(5,1fr)}main{grid-template-rows:minmax(360px,52vh) auto}.choices{grid-template-columns:1fr 1fr}.choice.nothing{grid-column:1/-1;grid-row:1}.choices .choice:nth-child(4),.choices .choice:nth-child(5){margin-top:0}.choice{min-height:72px}.stat{padding:6px}.stat strong{font-size:14px}.stat span{font-size:8px}}
@media(max-width:520px){.stats{grid-template-columns:repeat(3,1fr)}.stat:nth-child(4),.stat:nth-child(5){grid-column:span 1}.scene-wrap,#scene{min-height:330px}.panel{padding:22px 18px}.info-grid{grid-template-columns:1fr}.ending-summary{grid-template-columns:1fr}}

/* Main menu + graveyard */
.menu-panel { width:min(610px,96vw); text-align:center; }
.menu-logo { width:82px; height:82px; margin:0 auto 18px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#f4d98f,#bd8434); color:#16140f; font:900 42px/1 Georgia,serif; box-shadow:0 18px 50px rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.28); }
.menu-panel .eyebrow { text-align:center; }
.menu-panel h2 { font-size:38px; }
.menu-panel p { max-width:510px; margin:0 auto 20px; }
.menu-panel #newLifeView { text-align:left; }
.menu-panel #newLifeView .eyebrow { text-align:left; }
.menu-panel #newLifeView h2 { font-size:30px; }
.menu-panel #newLifeView p { margin:0 0 12px; }
.grave-count { margin-top:14px; color:var(--muted); font-size:11px; letter-spacing:.3px; }
.menu-back { border:0; background:transparent; color:#e2c783; cursor:pointer; padding:0 0 14px; font-weight:700; }
.grave-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.grave-card { min-height:126px; border:1px solid rgba(255,255,255,.11); background:linear-gradient(180deg,#2b3240,#202632); border-radius:14px; padding:14px; cursor:pointer; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; transition:transform .12s ease,border-color .12s ease; }
.grave-card:hover { transform:translateY(-2px); border-color:rgba(241,197,106,.55); }
.grave-card .grave-stone { width:40px; height:44px; display:grid; place-items:center; border-radius:18px 18px 5px 5px; background:#697078; color:#d8dde0; font:700 20px Georgia,serif; margin-bottom:4px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.grave-card strong { font:700 17px Georgia,serif; }
.grave-card small { color:var(--muted); font-size:10px; }
.empty-graveyard { margin-top:18px; border:1px dashed rgba(255,255,255,.15); border-radius:14px; padding:30px 18px; color:var(--muted); text-align:center; }
.full-journal { max-height:none; }
.journal-note { font-size:12px; color:var(--muted)!important; }
.rare-inscription { border-left:2px solid #cda862; padding-left:10px; color:#e9d79f!important; }
.ending-panel { width:min(820px,96vw); }
@media(max-width:560px){.grave-grid{grid-template-columns:1fr}.menu-panel h2{font-size:32px}}

.people-list{margin:.55rem 0 0;padding-left:1.15rem;display:grid;gap:.42rem}.people-list li{line-height:1.35;color:var(--ink)}.people-card{grid-column:1/-1}.people-card .people-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));column-gap:1.4rem}

/* Pause + compact ending */
.pause-panel { width:min(480px,94vw); text-align:center; }
.pause-panel .eyebrow { text-align:center; }
.pause-panel p { margin-bottom:18px; }
.danger-button { border-color:rgba(236,122,122,.38); color:#ffd0d0; }
.ending-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:6px 0 20px; position:sticky; top:-28px; z-index:2; padding:10px 0; background:linear-gradient(180deg,#252c3c 70%,rgba(37,44,60,0)); }
.ending-actions .primary,.ending-actions .secondary { margin-top:0; min-height:46px; }
.life-highlights { list-style:none; padding:0; margin:10px 0 18px; display:grid; gap:8px; }
.life-highlights li { background:rgba(255,255,255,.035); border:1px solid var(--line); border-left:3px solid rgba(241,197,106,.7); border-radius:10px; padding:10px 12px; color:#d6dce5; font-size:12px; line-height:1.45; }
.life-highlights b { color:#f0d18e; }
.life-passed { padding:16px; border:1px dashed rgba(255,255,255,.15); border-radius:10px; text-align:center; color:var(--muted); font-family:Georgia,serif; font-style:italic; }
.ending-cause { font-family:Georgia,serif; font-size:16px; color:#e5dfd4 !important; }
@media(max-width:620px){.ending-actions{grid-template-columns:1fr;position:static;background:none}.help-button{right:86px}.pause-button{right:12px}}

/* Sleep-to-menu transition */
body.sleep-exit .topbar, body.sleep-exit .choice-zone, body.sleep-exit .scene-overlay { opacity:0; transition:opacity .25s ease; pointer-events:none; }
body.sleep-exit::after { content:""; position:fixed; inset:0; z-index:18; pointer-events:none; background:#000; opacity:var(--sleep-fade,0); }

.postdeath-nav { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.postdeath-nav .secondary, .postdeath-nav .menu-back { margin:0; min-height:40px; }
.postdeath-nav .menu-back { padding:9px 12px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.035); }
body.life-ended #pauseButton { display:none !important; }