/* NINE CIRCLES — engraved ink & ember */
:root{
  --ink:#0b0a09; --ink2:#14110e; --panel:#171310e6;
  --bone:#d8cfc0; --bone-dim:#9a917f; --gold:#c9a35c; --gold-dim:#8a6f3e;
  --ember:#c4552a; --blood:#7e2020; --ice:#9fb8c8;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--ink);color:var(--bone);font-family:var(--serif);overflow:hidden;
  -webkit-font-smoothing:antialiased}
#app{height:100vh;height:100dvh;position:relative}
.hidden{display:none!important}
.screen{position:absolute;inset:0}
kbd{border:1px solid var(--gold-dim);border-radius:3px;padding:0 4px;font-family:inherit;font-size:.85em}

/* ---------- buttons ---------- */
.menu-btn{display:block;width:min(340px,80vw);margin:10px auto;padding:12px 18px;
  background:transparent;color:var(--bone);border:1px solid var(--gold-dim);
  font-family:var(--serif);font-size:17px;letter-spacing:.12em;cursor:pointer;
  transition:all .25s;text-transform:uppercase}
.menu-btn:hover{border-color:var(--gold);color:var(--gold);background:#c9a35c14;
  box-shadow:0 0 18px #c9a35c22}
.menu-btn.small{font-size:13px;padding:8px 14px;width:min(280px,70vw);opacity:.85}

/* ---------- title ---------- */
#title-screen{display:flex;align-items:center;justify-content:center}
#title-art{position:absolute;inset:0;z-index:0}
#title-art svg{width:100%;height:100%;display:block}
.title-inner{position:relative;z-index:1;text-align:center;padding:24px;
  text-shadow:0 2px 18px #000}
.title-eyebrow{font-style:italic;color:var(--bone-dim);letter-spacing:.2em;font-size:13px}
.game-title{font-size:clamp(44px,9vw,92px);font-weight:400;letter-spacing:.18em;
  color:var(--bone);margin:14px 0 2px}
.title-ring{color:var(--gold);font-size:.55em;vertical-align:.18em;margin:0 .15em;
  display:inline-block;animation:ringspin 40s linear infinite}
@keyframes ringspin{to{transform:rotate(360deg)}}
.title-sub{letter-spacing:.55em;text-transform:uppercase;color:var(--gold);font-size:14px;
  margin-bottom:22px}
.title-residue{min-height:22px;color:var(--ember);font-style:italic;font-size:14px;
  margin-bottom:10px;opacity:.9}
.title-menu{margin-top:8px}
.title-foot{margin-top:26px;font-size:11.5px;color:var(--bone-dim);letter-spacing:.06em}
.shelf-link{color:var(--bone-dim);text-decoration:none;letter-spacing:.12em;font-weight:600}
.shelf-link:hover{color:#c9a35c}

/* ---------- galleries ---------- */
.overlay{background:#000000d9;z-index:40;display:flex;align-items:center;justify-content:center}
.gallery-box{width:min(880px,94vw);max-height:88vh;overflow-y:auto;background:var(--panel);
  border:1px solid var(--gold-dim);padding:26px;text-align:center}
.gallery-box h2{letter-spacing:.25em;font-weight:400;color:var(--gold);text-transform:uppercase;
  font-size:20px;margin-bottom:6px}
.gallery-sub{color:var(--bone-dim);font-size:13px;font-style:italic;margin-bottom:18px}
.ending-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;
  margin:16px 0}
.ending-cell{border:1px solid #3a332a;padding:10px 8px;min-height:74px;font-size:12.5px;
  color:var(--bone);display:flex;flex-direction:column;justify-content:center;gap:4px}
.ending-cell.locked{color:#4a4238;font-size:20px}
.ending-cell .ek{font-size:10px;letter-spacing:.15em;text-transform:uppercase}
.ending-cell.k-death .ek{color:var(--blood)} .ending-cell.k-exit .ek{color:var(--gold)}
.ending-cell.k-true .ek{color:var(--ice)}
.witness-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.witness-slot{border:1px solid #3a332a;padding:14px 8px;font-size:13px;min-height:86px;
  display:flex;flex-direction:column;justify-content:center;gap:5px}
.witness-slot .w-circle{font-size:10px;letter-spacing:.18em;color:var(--bone-dim);
  text-transform:uppercase}
.witness-slot.lit{border-color:var(--gold-dim);color:var(--gold);
  box-shadow:inset 0 0 24px #c9a35c14}
.witness-slot.dark{color:#4a4238}
.verse-list{text-align:left;margin:14px 0}
.verse-item{border-left:2px solid var(--gold-dim);margin:12px 0;padding:6px 14px;
  font-style:italic;color:var(--bone);font-size:14.5px;line-height:1.55}
.verse-item .v-src{display:block;font-style:normal;font-size:11px;color:var(--bone-dim);
  letter-spacing:.12em;margin-top:5px;text-transform:uppercase}
.verse-item.locked{color:#4a4238;border-left-color:#3a332a;font-style:normal}

/* ---------- name entry ---------- */
.name-box{text-align:center;padding:30px}
.name-box p{color:var(--bone-dim);font-style:italic}
.name-box h2{font-weight:400;letter-spacing:.2em;margin:12px 0 22px;color:var(--gold)}
#name-input{background:transparent;border:none;border-bottom:1px solid var(--gold-dim);
  color:var(--bone);font-family:var(--serif);font-size:26px;text-align:center;width:280px;
  padding:6px;outline:none;letter-spacing:.1em}
#name-input:focus{border-bottom-color:var(--gold)}

/* ---------- game layout: full-bleed painting, floating panels ---------- */
#game-screen{display:block}
#game-main{position:absolute;inset:0}
#scene-wrap{position:absolute;inset:0;background:#000;overflow:hidden}
#depth-rail{position:absolute;left:0;top:0;bottom:0;width:64px;z-index:20;
  background:linear-gradient(90deg,#0d0a08c9,#0d0a0880);backdrop-filter:blur(3px);
  border-right:1px solid #c9a35c22}
#depth-rail svg{width:100%;height:100%;display:block}
#scene-art,#scene-art svg,#ending-art svg,#title-art{width:100%;height:100%}
#scene-art svg{display:block;object-fit:cover}

/* HUD — the Reliquary */
#hud{position:absolute;top:10px;right:12px;z-index:25;display:flex;gap:13px;align-items:center;
  background:linear-gradient(160deg,#1a1410e0,#0b0806e0);
  border:1px solid #c9a35c3d;padding:7px 18px;backdrop-filter:blur(4px);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  box-shadow:inset 0 0 18px #00000088,0 2px 12px #000a}
#hud::before{content:'';position:absolute;inset:3px;pointer-events:none;
  border:1px solid #c9a35c1c;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.relic{display:flex;align-items:center;gap:2px;cursor:help}
.relic svg{display:block}
.relic.flicker{animation:starflicker 1.9s steps(2,jump-none) infinite}
@keyframes starflicker{0%,44%,52%,68%,76%,100%{opacity:1}48%{opacity:.3}72%{opacity:.55}}
.sin-lit{filter:drop-shadow(0 0 3px #c4552a)}
.scythe-svg{filter:drop-shadow(0 0 3px #c4552a88);margin-left:5px}
.rail-marker{animation:markerin .9s ease-out}
@keyframes markerin{from{opacity:0}}

/* story panel — centered scrim over the painting */
#text-panel{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;z-index:15;
  width:min(900px,calc(100% - 140px));max-height:74%;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#5a4a32 transparent;
  padding:22px clamp(20px,3.5vw,44px) 26px;
  background:linear-gradient(180deg,#100d0ac6,#0b0a09ef);
  border:1px solid #c9a35c33;backdrop-filter:blur(7px);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  box-shadow:0 10px 44px #000d}
#text-panel::-webkit-scrollbar{width:7px}
#text-panel::-webkit-scrollbar-track{background:transparent}
#text-panel::-webkit-scrollbar-thumb{background:#453a2b;border-radius:4px}
#text-panel::-webkit-scrollbar-thumb:hover{background:#8a6f3e}
#region-name{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-dim);
  margin-bottom:7px;text-align:center}
#node-title{font-size:clamp(20px,2.6vw,26px);letter-spacing:.07em;color:var(--bone);
  margin-bottom:12px;text-align:center}
#node-title::after{content:'';display:block;width:64px;height:1px;margin:10px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
#node-text{font-size:clamp(15px,1.6vw,17px);line-height:1.7;color:var(--bone);
  white-space:pre-wrap}
#node-text em,.speech{color:#e8dfd0;font-style:italic}
#node-text .verse-quote{display:block;margin:12px 0 12px 18px;color:var(--gold);
  font-style:italic;line-height:1.6}

/* choices */
#choices{margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:10px}
.choice{background:#ffffff05;border:1px solid #38302566;color:var(--bone);text-align:left;
  font-family:var(--serif);font-size:15px;line-height:1.45;padding:11px 14px;cursor:pointer;
  transition:all .2s;position:relative}
.choice:hover{border-color:var(--gold);background:#c9a35c11;transform:translateX(3px)}
.choice .c-pre{color:var(--gold-dim);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;display:block;margin-bottom:3px}
.choice.gleam{border-color:var(--ember);animation:gleam 2.4s ease-in-out infinite}
.choice.gleam .c-pre{color:var(--ember)}
@keyframes gleam{0%,100%{box-shadow:0 0 4px #c4552a33}50%{box-shadow:0 0 20px #c4552a77;
  background:#c4552a14}}
.choice.verse-ward{border-color:var(--ice);color:var(--ice)}
.choice.verse-ward .c-pre{color:var(--ice)}
.choice.holy{border-color:#c8c39f;color:#e8e2c8}
.choice.holy .c-pre{color:#c8c39f}
.choice.holy:hover{border-color:#f0e8c8;background:#e8e2c811;box-shadow:0 0 16px #e8e2c822}
.choice.grim{border-color:#5a2020;color:#c99a8a}
.choice.grim .c-pre{color:#a33b3b}
.choice.grim:hover{border-color:#a33b3b;background:#7e202014;box-shadow:0 0 16px #7e202044}
.scythe-glyph{color:#c4552a;font-size:16px;margin-left:4px;cursor:help;
  text-shadow:0 0 8px #c4552a55}
.choice.corrupt{color:#b8a898}
.choice.corrupt:hover{border-color:var(--blood)}
.corrupt-word{display:inline-block;animation:shudder 3.5s ease-in-out infinite;color:#c98484}
@keyframes shudder{0%,92%,100%{transform:none;opacity:1}95%{transform:translateX(1px);opacity:.55}}

/* ---------- illustrated scenes ---------- */
.scene-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:kenburns 38s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.07) translate(-1.2%,1%)}}
.atmo{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.atmo .fogx{position:absolute;inset:-20%;
  background:radial-gradient(ellipse 60% 40% at 30% 80%,#00000066,transparent 70%),
             radial-gradient(ellipse 50% 35% at 75% 30%,#00000044,transparent 70%);
  animation:fogdrift 46s ease-in-out infinite alternate}
@keyframes fogdrift{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
.ember{position:absolute;bottom:-8px;border-radius:50%;pointer-events:none;
  animation:emberrise linear infinite}
@keyframes emberrise{
  0%{transform:translate(0,0) scale(1);opacity:0}
  8%{opacity:var(--eo,.7)}
  100%{transform:translate(var(--ex,20px),calc(-1 * var(--eh,300px))) scale(.4);opacity:0}}
.scene-grade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#0007 0,transparent 20%,transparent 48%,#0b0a09b8 100%)}
#scene-wrap::after{content:'';position:absolute;inset:10px;pointer-events:none;
  border:1px solid #c9a35c26;z-index:18}
.soul-medallion{float:right;width:92px;height:92px;border-radius:50%;object-fit:cover;
  border:2px solid var(--gold-dim);box-shadow:0 0 22px #c9a35c33,inset 0 0 12px #000;
  margin:0 0 10px 16px}
.witness-slot img.medallion{width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:1.5px solid var(--gold-dim);margin:0 auto 6px;display:block;
  box-shadow:0 0 14px #c9a35c44}
#node-text.dropcap::first-letter{float:left;font-size:3.1em;line-height:.85;
  padding:4px 8px 0 0;color:var(--gold);font-family:Georgia,serif}
#title-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:kenburns 55s ease-in-out infinite alternate}
#title-screen .title-inner{background:radial-gradient(ellipse 90% 90% at 50% 45%,#00000088,transparent)}

/* ---------- hell remembers ---------- */
.mem{display:block;font-style:italic;color:#b8ab93;border-left:2px solid var(--gold-dim);
  padding:2px 0 2px 14px;margin-bottom:4px}
.run-row{display:flex;align-items:baseline;gap:10px;padding:7px 10px;margin:4px 0;
  border:1px solid #2a241c;font-size:13px;text-align:left}
.run-row b{font-weight:400;color:var(--bone)}
.run-row.k-death b{color:#c99a8a}.run-row.k-exit b{color:var(--gold)}
.run-row.k-true b{color:var(--ice)}
.rr-n{color:#5a5040;font-size:11px;min-width:18px}
.rr-meta{color:var(--bone-dim);font-size:11.5px;flex:1}
.rr-dots{letter-spacing:.3em;font-size:12px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .scene-img,#title-hero-img,.title-ring{animation:none!important}
  .ember,.atmo .fogx{display:none}
  .para,#choices.late{animation-duration:.01s!important;animation-delay:0s!important}
  #game-screen.descending #scene-wrap::before{display:none}
}

/* ---------- delights: descent veil, unfurl, title wall, toast ---------- */
#game-screen.descending #scene-wrap::before{content:'';position:absolute;left:0;right:0;
  top:-30%;height:160%;z-index:30;pointer-events:none;
  background:linear-gradient(180deg,transparent,#000 32%,#000 62%,transparent);
  animation:veilfall .95s ease-in forwards}
@keyframes veilfall{from{transform:translateY(-105%)}to{transform:translateY(105%)}}
.para{opacity:0;animation:parain .55s ease forwards}
@keyframes parain{to{opacity:1}}
#choices.late{opacity:0;animation:parain .55s ease forwards}
#title-wall{display:flex;gap:8px;justify-content:center;align-items:center;
  margin:2px 0 12px;min-height:30px;flex-wrap:wrap}
#title-wall .tw-slot{width:27px;height:27px;border-radius:50%;border:1px solid #3a332a;
  background-color:#14100c;background-size:cover;background-position:center;opacity:.45}
#title-wall .tw-slot.lit{border-color:var(--gold-dim);opacity:1;
  box-shadow:0 0 10px #c9a35c55}
#title-wall .tw-label{font-size:11px;color:var(--gold-dim);letter-spacing:.16em;
  margin-left:8px;text-transform:uppercase}
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:99;
  background:#14100cee;border:1px solid #c9a35c44;color:var(--bone);padding:8px 20px;
  font-family:var(--serif);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transition:opacity .3s;pointer-events:none}
#toast.show{opacity:1}

/* ---------- act theming: the UI ascends with you ---------- */
[data-act="purgatorio"] #text-panel{
  background:linear-gradient(180deg,#141a26c8,#0e1420ef);border-color:#d8b86a44}
[data-act="purgatorio"] #region-name{color:#b89a5c}
[data-act="purgatorio"] #node-title::after{background:linear-gradient(90deg,transparent,#d8b86a,transparent)}
[data-act="purgatorio"] .choice:hover{border-color:#e8cc8a;background:#d8b86a14}
[data-act="purgatorio"] #hud{background:linear-gradient(160deg,#1a2030e0,#0c1018e0);border-color:#d8b86a4d}
[data-act="purgatorio"] .mem{border-left-color:#b89a5c}
[data-act="paradiso"] #text-panel{
  background:linear-gradient(180deg,#f8f2e4e8,#f2e8d2f2);border-color:#b8985a66;
  box-shadow:0 10px 44px #8a6f3e33;scrollbar-color:#b8985a transparent}
[data-act="paradiso"] #text-panel::-webkit-scrollbar-thumb{background:#c8ac74}
[data-act="paradiso"] #node-text{color:#4a3f2c}
[data-act="paradiso"] #node-text em,[data-act="paradiso"] .speech{color:#6a552e}
[data-act="paradiso"] #node-title{color:#5a4a2c}
[data-act="paradiso"] #region-name{color:#a5843e}
[data-act="paradiso"] #node-title::after{background:linear-gradient(90deg,transparent,#b8985a,transparent)}
[data-act="paradiso"] #node-text.dropcap::first-letter{color:#a5843e}
[data-act="paradiso"] .choice{background:#ffffff66;border-color:#b8985a55;color:#4a3f2c}
[data-act="paradiso"] .choice:hover{border-color:#a5843e;background:#fff8;color:#3a3020;
  box-shadow:0 0 14px #d8b86a55}
[data-act="paradiso"] .choice .c-pre{color:#a5843e}
[data-act="paradiso"] #hud{background:linear-gradient(160deg,#faf4e6e6,#f0e6d0e6);
  border-color:#b8985a66;box-shadow:inset 0 0 18px #b8985a22,0 2px 12px #8a6f3e33}
[data-act="paradiso"] #depth-rail{background:linear-gradient(90deg,#f4eeE0d0,#f4eee000);
  border-right-color:#b8985a44}
[data-act="paradiso"] .scene-grade{background:linear-gradient(180deg,#fff2 0,transparent 22%,transparent 55%,#f2e8d2a8 100%)}
[data-act="paradiso"] #scene-wrap::after{border-color:#b8985a3d}
[data-act="paradiso"] .verse-quote{color:#a5843e}

/* rising-light transition (the ascent's answer to the descent veil) */
#game-screen.ascending #scene-wrap::before{content:'';position:absolute;left:0;right:0;
  top:-30%;height:160%;z-index:30;pointer-events:none;
  background:linear-gradient(0deg,transparent,#fff8ec 32%,#fff8ecdd 62%,transparent);
  animation:lightrise .95s ease-out forwards}
@keyframes lightrise{from{transform:translateY(105%)}to{transform:translateY(-105%)}}

/* particles v2 */
.petal{position:absolute;top:-12px;border-radius:60% 40% 55% 45%;pointer-events:none;
  animation:petalfall linear infinite}
@keyframes petalfall{
  0%{transform:translate(0,-4vh) rotate(0deg);opacity:0}
  10%{opacity:var(--po,.8)}
  100%{transform:translate(var(--px,30px),108vh) rotate(var(--pr,300deg));opacity:.15}}
.mote{position:absolute;bottom:-10px;border-radius:50%;pointer-events:none;
  filter:blur(1px);animation:moterise linear infinite}
@keyframes moterise{
  0%{transform:translate(0,0) scale(.8);opacity:0}
  12%{opacity:var(--mo,.6)}
  100%{transform:translate(var(--mx,10px),-108vh) scale(1.15);opacity:0}}

/* choice hotkeys + entrance */
.choice{counter-increment:choicenum}
.choice .hotkey{position:absolute;top:6px;right:8px;font-size:9px;color:#8a7a5c66;
  letter-spacing:0;opacity:0;transition:opacity .2s}
.choice:hover .hotkey{opacity:1}
#text-panel{animation:panelin .5s ease-out}
@keyframes panelin{from{opacity:0;transform:translateX(-50%) translateY(14px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* title: gold-leaf lettering + act slideshow + act glyph buttons */
.game-title{background:linear-gradient(178deg,#f4ead2 20%,#e0c078 48%,#a5843e 62%,#e8d4a0 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 14px #00000088)}
.title-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.title-slide.s2{animation:slidecycle 42s ease-in-out infinite 14s}
.title-slide.s3{animation:slidecycle 42s ease-in-out infinite 28s}
@keyframes slidecycle{0%,66%,100%{opacity:0}8%,25%{opacity:1}33%{opacity:0}}
#btn-begin::before{content:'▼  ';color:var(--ember)}
#btn-ascent::before{content:'▲  ';color:#d8b86a}
#btn-ascent:hover{border-color:#e8cc8a;color:#e8cc8a}
#btn-rose::before{content:'✿  ';color:#f0e0b0}
#btn-rose:hover{border-color:#f4ead2;color:#f4ead2;box-shadow:0 0 22px #f4ead233}

/* ending screen: bloom for the true kind, staggered epilogues */
#ending-screen[data-kind="true"] .ending-inner{border-color:#e8d4a066;
  box-shadow:0 0 80px #e8d4a044,inset 0 0 40px #e8d4a011}
#ending-screen[data-kind="true"]::before{content:'';position:absolute;inset:-20%;
  background:radial-gradient(circle at 50% 45%,#f4ead233,transparent 55%);
  animation:bloom 6s ease-in-out infinite alternate;pointer-events:none}
@keyframes bloom{from{opacity:.5;transform:scale(1)}to{opacity:1;transform:scale(1.08)}}
#ending-screen[data-kind="exit"] .ending-inner{border-color:#c9a35c55}
.epi-line{opacity:0;animation:parain .7s ease forwards}
.epi-line:nth-child(2){animation-delay:.15s}.epi-line:nth-child(3){animation-delay:.3s}
.epi-line:nth-child(4){animation-delay:.45s}.epi-line:nth-child(5){animation-delay:.6s}
.epi-line:nth-child(6){animation-delay:.75s}.epi-line:nth-child(7){animation-delay:.9s}
.epi-line:nth-child(8){animation-delay:1.05s}.epi-line:nth-child(9){animation-delay:1.2s}

/* galleries: hover zoom, act sections */
.ending-cell{transition:transform .2s,box-shadow .2s;background-size:cover}
.ending-cell:not(.locked):hover{transform:scale(1.06);box-shadow:0 4px 18px #000a;z-index:2}
.act-head{grid-column:1/-1;font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-dim);margin:10px 0 2px;text-align:center}
.witness-slot.lit img.medallion{animation:medpulse 4s ease-in-out infinite}
@keyframes medpulse{0%,100%{box-shadow:0 0 14px #c9a35c44}50%{box-shadow:0 0 22px #c9a35c77}}

/* fades */
.fade-out{animation:fadeout .45s forwards}
.fade-in{animation:fadein .55s}
@keyframes fadeout{to{opacity:0}}
@keyframes fadein{from{opacity:0}}

/* ---------- ending ---------- */
#ending-screen{display:flex;align-items:center;justify-content:center;text-align:center}
#ending-art{position:absolute;inset:0}
.ending-inner{position:relative;z-index:1;max-width:680px;padding:28px;
  background:#000000a8;border:1px solid #ffffff1c;backdrop-filter:blur(2px)}
#ending-kind{font-size:11px;letter-spacing:.35em;text-transform:uppercase;margin-bottom:10px}
#ending-kind.k-death{color:var(--blood)} #ending-kind.k-exit{color:var(--gold)}
#ending-kind.k-true{color:var(--ice)}
#ending-title{font-weight:400;font-size:clamp(24px,4vw,36px);letter-spacing:.08em;
  margin-bottom:14px;color:var(--bone)}
#ending-text{font-size:16px;line-height:1.7;color:var(--bone);font-style:italic;
  white-space:pre-wrap}
#ending-inscribe{margin-top:16px;color:var(--gold);font-size:14px;min-height:20px}
#ending-epilogue{margin-top:14px;text-align:left;max-height:26vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#5a4a32 transparent}
.epi-head{font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-dim);text-align:center;margin-bottom:8px}
.epi-line{font-size:13px;line-height:1.6;color:var(--bone-dim);font-style:italic;
  margin:7px 0;padding-left:12px;border-left:1px solid #c9a35c33}
.epi-line b{color:var(--gold);font-weight:400;font-style:normal}
#btn-again{margin-top:22px}

/* ---------- debug ---------- */
#debug-panel{position:fixed;right:10px;top:10px;z-index:99;background:#000c;color:#9fe0a0;
  border:1px solid #2a5a2a;font:12px monospace;padding:10px;width:270px;max-height:92vh;
  overflow-y:auto}
#debug-panel button,#debug-panel select,#debug-panel input{font:11px monospace;margin:2px;
  background:#122;color:#9fe0a0;border:1px solid #2a5a2a;cursor:pointer}
#debug-panel .dbg-row{margin:4px 0}

/* ---------- responsive ---------- */
@media(max-width:720px){
  #depth-rail{width:32px}
  #hud{gap:8px;padding:5px 10px;transform:scale(.88);transform-origin:top right}
  #text-panel{width:calc(100% - 52px);left:calc(50% + 16px);max-height:74%;bottom:8px;
    padding:16px 16px 18px}
  #choices{grid-template-columns:1fr}
}

/* part of THE SHELF — its own line, visible on every screen size */
.shelf-line{margin-top:20px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-dim);opacity:.85}