/* The shell (title, menus, chapter cards) in the same world as the HUD: warm black falling into the painting,
   inscriptional capitals, one ochre hairline, red lead only for death. */
:root { --text-scale:1; }
body { font-size:calc(16px * var(--text-scale)); }
.primary { background:var(--ochre); color:#160f09; border-color:var(--ochre-hi); }
.primary:hover:not(:disabled) { background:var(--ochre-hi); color:#160f09; }
#title { position:fixed; inset:0; z-index:30; display:flex; flex-direction:column; gap:12px; }
#title .controls,#title .credit { color:var(--dim); font-size:12px; }
#title { color:var(--ink); align-items:stretch; justify-content:center; padding:6vh 8vw; text-align:left; background:linear-gradient(90deg,#0b0806f7 0%,#0b0806d9 34%,#0b080633 68%,#0b080600 100%),linear-gradient(0deg,#0b0806 0,#0b080600 30%),url('assets/painted/silt-stair.webp') 65% center/cover; }
.title-copy { width:min(560px,70vw); }
/* The lockup: the game's name is the wordmark; the slice title sits beneath it. */
#title .mark { margin:0 0 6px; letter-spacing:.14em; font:400 clamp(46px,5.6vw,84px)/1 var(--display); color:var(--ink); text-transform:uppercase; text-shadow:0 3px 22px #000; }
#title .sigil { display:none; }
#title .sigil canvas { width:100%; height:100%; display:block; }
#title h1 { font:400 clamp(15px,1.4vw,20px)/1.4 var(--display); letter-spacing:.28em; text-transform:uppercase; margin:0 0 30px; padding-top:14px; border-top:1px solid var(--rule); width:max-content; max-width:100%; color:var(--ochre-hi); text-shadow:0 2px 12px #000; }
#title .tagline { font:italic 400 calc(19px * var(--text-scale))/1.6 var(--body); color:var(--ink-2); margin-bottom:34px; }
/* The main menu is a column of inscriptions, not a stack of boxes. The live choice is marked with a lozenge. */
.title-actions { display:grid; width:min(320px,100%); gap:0; border-top:1px solid var(--rule-faint); }
.title-actions button,.title-actions button.primary { position:relative; min-height:50px; text-align:left; padding:12px 0 12px 26px; background:none; border:0; border-bottom:1px solid var(--rule-faint); border-radius:0; font:400 calc(15px * var(--text-scale)) var(--display); letter-spacing:.18em; text-transform:uppercase; color:var(--ink); }
.title-actions button::before { content:''; position:absolute; left:4px; top:50%; width:7px; height:7px; translate:0 -50%; rotate:45deg; border:1px solid var(--ochre); opacity:0; transition:opacity .2s, background-color .2s; }
.title-actions button:is(:hover,:focus-visible):not(:disabled) { background:linear-gradient(90deg,#c9a56b1c,#c9a56b00); color:#fff6e4; outline:none; }
.title-actions button:is(:hover,:focus-visible):not(:disabled)::before { opacity:1; background:var(--ochre); }
.title-actions button.primary:not(:disabled) { color:var(--ochre-hi); }
.title-actions button.primary:not(:disabled)::before { opacity:1; }
.title-actions button:disabled { color:var(--ink-3); opacity:1; }
#save-status { font-size:calc(13px * var(--text-scale)); font-style:italic; color:var(--ink-2); margin:18px 0 0; max-width:46ch; }
.title-footer { position:absolute; bottom:24px; left:8vw; right:5vw; display:flex; justify-content:space-between; gap:24px; font-size:12.5px; font-style:italic; color:var(--ink-3); }
#shell-dialog { color:var(--ink); background:var(--field); border:0; border-top:1px solid var(--rule); overflow:visible; width:min(1000px,92vw); max-height:92dvh; padding:0; box-shadow:0 22px 90px #000b; overscroll-behavior:contain; }
#shell-dialog::backdrop { background:radial-gradient(ellipse at center,#0b0806b3,#0b0806f2); backdrop-filter:blur(3px) saturate(.6); }
#shell-dialog > .shell-content { max-height:92dvh; overflow:auto; scrollbar-width:thin; scrollbar-color:#6d5536 transparent; }
.shell-content { padding:36px 44px; }
#shell-heading { font:400 clamp(22px,2.3vw,32px)/1.2 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin:0 0 24px; text-wrap:balance; }
#shell-dialog p { max-width:66ch; }
#shell-dialog h3 { font:400 calc(15px * var(--text-scale)) var(--display); letter-spacing:.12em; color:var(--brass); margin:20px 0 10px; }
.shell-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.shell-actions button { min-height:44px; padding:10px 22px; font:400 calc(13px * var(--text-scale)) var(--display); letter-spacing:.16em; text-transform:uppercase; background:none; }
.shell-actions button { border:0; border-radius:0; padding:10px 2px; box-shadow:inset 0 -1px var(--rule); }
.shell-actions button:hover:not(:disabled) { background:none; color:var(--ochre-hi); box-shadow:inset 0 -1px var(--ochre-hi); }
.shell-actions button.primary { background:none; color:var(--ochre-hi); box-shadow:inset 0 -1px var(--ochre); }
.shell-actions button.primary:hover:not(:disabled) { background:none; color:#fff3d8; box-shadow:inset 0 -1px var(--ochre-hi); }
.shell-actions button.primary:disabled { background:none; color:var(--ink-3); border-color:var(--rule); }
#shell-dialog .lead { font-size:calc(22px * var(--text-scale)); line-height:1.5; margin:22px 0; }
.fine { color:var(--dim); font-size:calc(12px * var(--text-scale)); }
.place-name { color:var(--brass); font-size:calc(13px * var(--text-scale)); }
#shell-dialog.chapter { width:min(800px,92vw); }
.chapter .shell-content { padding:44px 56px; }
#shell-dialog.shell-death { border-color:var(--minium); background:linear-gradient(180deg,#170c09f7,#0b0806fa); }
.shell-death #shell-heading { color:#efc2b2; }
.account { padding:16px 0 4px; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge); margin-bottom:20px; }
.account h3:first-child { margin-top:0; }
.account p { margin-bottom:16px; }
.account strong { color:var(--brass); font-weight:400; }
.personal-ending { font-style:italic; color:var(--dim); }
.survivor-word { color:var(--brass); }
.origin-layout { display:grid; grid-template-columns:230px 1fr; gap:32px; }
.origin-list { display:grid; gap:5px; align-content:start; }
.origin-list button { display:flex; align-items:center; padding:4px 8px 4px 4px; gap:10px; text-align:left; background:transparent; font-size:calc(13px * var(--text-scale)); }
.origin-list img { width:42px; height:42px; object-fit:cover; }
.origin-list button[aria-pressed=true] { background:linear-gradient(90deg,#c9a56b2e,#c9a56b00); box-shadow:inset 2px 0 var(--ochre-hi); color:#fff6e4; }
.origin-list small { font:400 10px var(--display); letter-spacing:.08em; color:var(--brass); }
.origin-list button { border:0; border-bottom:1px solid var(--rule-faint); border-radius:0; }
.origin-list img { border-radius:21px 21px 2px 2px; object-position:50% 22%; }
.origin-detail { display:grid; grid-template-columns:160px 1fr; gap:24px; align-content:start; }
.origin-portrait { width:160px; height:200px; object-fit:cover; object-position:50% 22%; border-radius:80px 80px 2px 2px; box-shadow:0 0 0 1px var(--rule), 0 10px 26px #000a; }
.origin-detail h3 { margin-top:0 !important; }
.origin-goal { font-size:calc(14px * var(--text-scale)); color:var(--dim); }
.kit { font-size:calc(13px * var(--text-scale)); line-height:1.65; border-top:1px solid var(--edge); padding-top:16px; margin-top:16px; }
.kit strong { color:var(--brass); font-weight:400; }
#shell-dialog label { display:grid; gap:6px; font-size:calc(14px * var(--text-scale)); }
#shell-dialog input:not([type=checkbox]):not([type=range]):not([type=radio]) { width:100%; min-width:0; min-height:42px; background:#0b0806; color:var(--ink); border:0; border-bottom:1px solid var(--ochre); border-radius:0; padding:8px 2px; font:inherit; caret-color:var(--ochre-hi); }
.origin-detail label { margin-top:22px; }
.inheritance { padding:12px 0; color:var(--dim); border-bottom:1px solid var(--edge); margin-bottom:24px; }
.arrival-person { display:flex; gap:16px; align-items:center; margin:24px 0; }
.arrival-person img { width:72px; height:90px; object-fit:cover; object-position:50% 22%; border-radius:36px 36px 2px 2px; box-shadow:0 0 0 1px var(--rule), 0 8px 20px #000a; }
.arrival-person p { color:var(--dim); }
.arrival-person strong { color:var(--ink); font:400 calc(17px * var(--text-scale)) var(--display); letter-spacing:.1em; text-transform:uppercase; }
.bequest { border:0; padding:0; margin:22px 0 8px; display:grid; gap:2px; }
.bequest legend { color:var(--brass); font:400 calc(15px * var(--text-scale)) var(--display); letter-spacing:.1em; padding:0 0 8px; }
#shell-dialog .bequest label { display:flex; align-items:center; gap:10px; padding:5px 0; cursor:pointer; }
.bequest input { width:17px; height:17px; margin:0; accent-color:var(--ochre); }
.bequest-line { color:var(--brass); font-size:calc(18px * var(--text-scale)); }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:44px; }
.settings-grid fieldset { border:0; padding:0; margin:0; min-width:0; }
.settings-grid legend { color:var(--brass); font:400 15px var(--display); letter-spacing:.12em; padding:0 0 14px; }
.settings-grid label { position:relative; margin-bottom:18px; }
.settings-grid output { position:absolute; right:0; color:var(--dim); }
.settings-grid input[type=range] { width:100%; height:24px; margin:0; background:none; -webkit-appearance:none; appearance:none; cursor:pointer; }
.settings-grid input[type=range]::-webkit-slider-runnable-track { height:2px; background:linear-gradient(90deg,var(--ochre),var(--rule)); }
.settings-grid input[type=range]::-moz-range-track { height:2px; background:var(--rule); }
.settings-grid input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; margin-top:-6px; rotate:45deg; background:var(--ochre-hi); border:2px solid var(--night); box-shadow:0 0 0 1px var(--ochre); }
.settings-grid input[type=range]::-moz-range-thumb { width:12px; height:12px; rotate:45deg; border-radius:0; background:var(--ochre-hi); border:2px solid var(--night); }
#shell-dialog label.check { display:flex; align-items:center; gap:12px; margin:20px 0; }
input[type=checkbox] { width:18px; height:18px; accent-color:var(--ochre); }
.text-sample { padding:14px 0; border-top:1px solid var(--edge); font-size:calc(16px * var(--text-scale)); }
.shortcuts { display:grid; grid-template-columns:auto 1fr; gap:15px 30px; }
.shortcuts dt { white-space:nowrap; }
.shortcuts dd { margin:0; }
.music-list { padding:0; list-style:none; }
.music-list li { padding:6px 0; }
.music-list span { margin-left:14px; color:var(--dim); font-size:12px; }
@media (max-height:800px) { .shell-content { padding:24px 32px; } .chapter .shell-content { padding:28px 40px; } #shell-heading { margin-bottom:18px; } .shell-actions { margin-top:20px; } .origin-layout { gap:24px; } .origin-detail { grid-template-columns:128px 1fr; gap:18px; } .origin-portrait { width:128px; height:176px; } .origin-list button { min-height:46px; } #title h1 { font-size:18px; } }
@media (max-width:900px) { .origin-detail { display:block; } .origin-portrait { float:right; width:100px; height:128px; margin:0 0 12px 15px; } .origin-layout { grid-template-columns:200px 1fr; } }
@media (max-width:680px) { #title { padding:30px; } .title-copy { width:100%; } #title .mark { font-size:40px; } #title h1 { font-size:14px; letter-spacing:.2em; } .title-footer { left:30px; bottom:16px; flex-direction:column; gap:4px; } .shell-content,.chapter .shell-content { padding:20px; } .origin-layout { display:block; } .origin-list { grid-template-columns:1fr 1fr; margin-bottom:22px; } .origin-detail { min-height:190px; } .settings-grid { grid-template-columns:1fr; gap:24px; } .shortcuts { grid-template-columns:1fr; gap:8px; } .shortcuts dd { margin-bottom:12px; } }

/* The pause menu is a narrow column of choices, like a game's, not a strip of buttons. */
#shell-dialog.shell-pause { width:min(400px,92vw); text-align:center; }
.shell-pause .shell-content { padding:34px 40px 30px; }
.shell-pause #shell-heading { font-size:calc(26px * var(--text-scale)); margin-bottom:6px; }
.shell-pause .shell-actions { flex-direction:column; gap:0; margin-top:22px; border-top:1px solid var(--rule-faint); }
.shell-pause .shell-actions button { width:100%; min-height:48px; border:0; border-bottom:1px solid var(--rule-faint); border-radius:0; box-shadow:none; }
.shell-pause .shell-actions button:is(:hover,:focus-visible):not(:disabled) { background:linear-gradient(90deg,#c9a56b00,#c9a56b1f,#c9a56b00); color:#fff6e4; outline:none; }
#shell-dialog kbd { font-size:12px; padding:3px 6px; color:var(--ochre-hi); border-bottom:1px solid var(--rule); }
.music-list { columns:2; column-gap:40px; }
.music-list li { break-inside:avoid; }
.music-list span { font:400 10px var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--brass); }

/* Chapter cards (arrival, death, the ending, a closed life, the last entries) are full-screen
   moments: the painted place behind, the words in a column, like the title. */
#shell-dialog.chapter { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; border:0; box-shadow:none;
  background:linear-gradient(90deg,#0b0806f7 0%,#0b0806e6 42%,#0b08068c 72%,#0b080633 100%),var(--chapter-plate) 65% center/cover; }
#shell-dialog.chapter::before { display:none; }
/* The card is opaque and fills the screen; blurring the live scene behind it only costs frames. */
#shell-dialog.chapter::backdrop { backdrop-filter:none; background:var(--night); }
#shell-dialog.chapter.shell-death { background:linear-gradient(90deg,#0d0605f7 0%,#0d0605e8 42%,#1a08058c 72%,#1a080540 100%),var(--chapter-plate) 65% center/cover; filter:saturate(.75); }
.chapter .shell-content { width:min(720px,92vw); max-height:100dvh; min-height:100dvh; padding:7vh 0 0 8vw !important; display:flex; flex-direction:column; justify-content:safe center; }
.chapter .sigil { width:84px; height:84px; margin:0 0 4px -10px; flex:none; }
.chapter .sigil canvas { width:100%; height:100%; display:block; }
.chapter #shell-heading { font-size:clamp(32px,3.6vw,52px); margin-bottom:14px; text-shadow:0 3px 18px #000; }
.chapter .lead { margin:12px 0 16px; }
/* The choices stay in reach however long the account runs. */
.chapter .shell-actions { position:sticky; bottom:0; margin-top:18px; padding:16px 0 5vh; background:linear-gradient(180deg,transparent,var(--night) 35%); }
.chapter.shell-death .shell-actions { background:linear-gradient(180deg,transparent,#0d0605 35%); }
.chapter .lead { text-shadow:0 2px 10px #000; }
.chapter .account,.chapter .inheritance { border-color:var(--rule-faint); }
@media (max-width:680px) { .chapter .shell-content { padding:8vh 6vw !important; } .chapter .shell-actions { position:static; padding-bottom:0; background:none !important; } }
.chapter .bequest { display:flex; flex-wrap:wrap; gap:2px 24px; }
.chapter .bequest legend { flex-basis:100%; }
@media (max-height:800px) { .chapter .sigil { display:none; } .chapter .shell-content { padding-top:5vh !important; } .chapter .account p { margin-bottom:10px; } .chapter .lead { margin:8px 0 10px; } }

/* A life is a person before it is an account. The portrait anchors the passage. */
#shell-dialog:is(.shell-closed,.shell-chronicle) .shell-content { width:min(1120px,100vw); padding:5vh 5vw 0 !important; }
:is(.shell-closed,.shell-chronicle) .sigil { display:none; }
.life-spread { display:grid; grid-template-columns:minmax(180px,280px) minmax(0,1fr); align-items:start; gap:42px; margin:20px 0; }
.life-portrait { margin:0; position:sticky; top:16px; }
.life-portrait > img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 24%; border-radius:999px 999px 2px 2px / 50% 50% 2px 2px; box-shadow:0 0 0 1px var(--rule), 0 14px 34px #000b; }
.life-portrait figcaption { padding:18px 0; color:var(--brass); font-size:calc(13px * var(--text-scale)); }
.life-portrait strong { display:block; color:var(--ink); font:400 clamp(24px,2.4vw,34px)/1.2 var(--display); margin:6px 0 10px; overflow-wrap:anywhere; }
.life-portrait span { color:#d5cbb8; font-size:calc(16px * var(--text-scale)); }
.life-dead > img { filter:grayscale(.9) contrast(.9); }
.life-record .life-fate { font-size:calc(23px * var(--text-scale)); margin-top:0; color:var(--brass); }
.life-record details { border-top:1px solid var(--rule-faint); padding:12px 0; }
.life-record summary { cursor:pointer; color:var(--brass); padding:4px 0; }
.life-record summary:hover { color:#fff1cf; }
.life-deeds { padding-left:20px; }
.life-deeds li { padding:5px 0 10px; line-height:1.45; }
.life-deeds li > span { display:block; color:#bbae97; font-size:calc(12px * var(--text-scale)); }
.life-handover { padding-top:3px; border-top:1px solid var(--rule-faint); }
.life-handover .bequest-line { margin-bottom:0; }
.life-ribbon { display:flex; flex:none; gap:8px; overflow-x:auto; padding:2px 2px 12px; scrollbar-width:thin; scrollbar-color:#92784a transparent; }
.life-ribbon button { flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:8px 16px 8px 8px; text-align:left; background:#0b0806cc; border:0; border-bottom:1px solid var(--rule-faint); border-radius:0; max-width:280px; }
.life-ribbon button[aria-pressed=true] { background:#c9a56b1f; box-shadow:inset 0 -2px var(--ochre-hi); }
.life-ribbon img { width:48px; height:60px; object-fit:cover; border-radius:24px 24px 2px 2px; }
.life-ribbon span { overflow-wrap:anywhere; }
.life-ribbon small,.life-ribbon em { display:block; font-size:calc(12px * var(--text-scale)); font-style:normal; color:#c9baa0; }
.life-ribbon small { color:var(--brass); }
.life-mystery { margin:18px 0 0; padding:0 0 12px; border-top:1px solid var(--rule-faint); }
.life-mystery p { margin-bottom:8px; }
.ember-date { color:var(--brass); font:400 calc(18px * var(--text-scale))/1.4 var(--display); letter-spacing:.12em; }
.ember-survivors { margin:20px 0; border-top:1px solid var(--rule-faint); padding-top:4px; }
.ember-survivors ul,.ember-dead ul { list-style:none; padding:0; margin:12px 0; }
.ember-survivors li { padding:10px 0; border-bottom:1px solid var(--rule-faint); overflow-wrap:anywhere; }
.ember-survivors strong { display:block; color:var(--ink); font-weight:400; font-size:calc(18px * var(--text-scale)); }
.ember-survivors li > span { display:block; margin:4px 0; color:var(--dim); }
.ember-dead { border-block:1px solid var(--rule-faint); padding:6px 0; }
.ember-dead summary { min-height:44px; padding:10px 0; cursor:pointer; color:var(--brass); }
.ember-dead summary:focus-visible { outline:1px solid var(--gold); outline-offset:3px; }
.ember-dead li { padding:4px 0; overflow-wrap:anywhere; }
.ember-work { margin-top:24px; color:var(--brass); }
#shell-dialog.shell-first-ember .shell-content { max-width:100%; overflow-wrap:anywhere; }
@media (max-height:500px) { .shell-first-ember .shell-content { padding:24px 6vw 0 !important; } .shell-first-ember .shell-actions { padding-bottom:20px; } }
.inheritance-person { display:flex; align-items:center; gap:18px; }
.inheritance-person > img { width:76px; height:96px; object-fit:cover; border-radius:38px 38px 2px 2px; box-shadow:0 0 0 1px var(--rule); flex:none; }
.inheritance-person strong { color:var(--ink); font:400 calc(19px * var(--text-scale)) var(--display); }
.inheritance-person p { margin:4px 0; line-height:1.35; }
.inheritance-person .bequest-line { font-size:calc(16px * var(--text-scale)); }
.inheritance > button { margin-top:12px; }
/* Title content scrolls as one composition, including its footer. */
#title { overflow-y:auto; justify-content:safe center; }
.title-copy { flex:none; }
.title-footer { position:static; margin-top:22px; flex:none; }
@media (max-height:800px) { #title { padding-top:28px; padding-bottom:24px; gap:8px; } #title .sigil { width:80px; height:80px; } #title .mark { margin-bottom:10px; } #title h1 { margin-bottom:16px; } #title .tagline { margin-bottom:18px; } }
@media (max-width:680px) {
  .life-spread { grid-template-columns:1fr; gap:14px; margin:12px 0; }
  .life-portrait { position:static; display:flex; align-items:center; gap:18px; }
  .life-portrait > img { width:100px; flex:none; }
  .life-portrait figcaption { padding:0; }
  .life-portrait strong { font-size:calc(24px * var(--text-scale)); }
  #shell-dialog:is(.shell-closed,.shell-chronicle) .shell-content { padding:24px 6vw 0 !important; }
  .life-ribbon { margin-bottom:12px; }
  .life-ribbon button { max-width:240px; }
  .life-ribbon img { width:40px; height:50px; }
}