@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('assets/fonts/cinzel-latin.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/dm-mono-300-latin.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/dm-mono-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/dm-mono-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/inter-latin.woff2') format('woff2'); }

:root {
  --ink: #09090b;
  --bone: #d8d1c0;
  --dim-bone: #948d80;
  --silver: #aab1ac;
  --blood: #8d1c2b;
  --blood-bright: #c03748;
  --dream: #80a9a3;
  --mercy: #9ec9c0;
  --control: #b14a5a;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--ink); color: var(--bone); font-family: Inter, sans-serif; }
button { font: inherit; }
button:focus-visible,#game:focus-visible { outline: 2px solid #a45a67; outline-offset: 4px; }
button:focus:not(:focus-visible) { outline: none; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
svg { display: block; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#game-shell { position: relative; width: 100vw; height: 100vh; height: 100dvh; background: #08090b; isolation: isolate; }
#game { display: block; width: 100%; height: 100%; cursor: crosshair; }
#game-shell::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: radial-gradient(circle at center, transparent 44%, rgba(0,0,0,.3) 72%, rgba(0,0,0,.8) 118%); box-shadow: inset 0 0 90px rgba(0,0,0,.72); }
.hidden { display: none !important; }
.screen { position: absolute; inset: 0; z-index: 20; }

.loading-screen { z-index: 70; display: grid; place-content: center; justify-items: center; gap: 13px; background: radial-gradient(circle at 50% 42%, rgba(59,82,78,.14), transparent 26%), #060708; opacity: 1; transition: opacity .7s ease, visibility .7s; }
.loading-screen.ready { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-mark { position: relative; width: 92px; height: 92px; display: grid; place-items: center; margin-bottom: 10px; }
.loading-mark svg { width: 56px; height: 56px; fill: none; stroke: #809b95; stroke-width: 1; }
.loading-mark i { position: absolute; inset: 0; border: 1px solid rgba(128,155,149,.22); border-radius: 50%; border-top-color: #8b3c49; animation: loadspin 2.8s linear infinite; }
@keyframes loadspin { to { transform: rotate(360deg); } }
.loading-track { width: 220px; height: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.loading-track span { display: block; width: 5%; height: 100%; background: linear-gradient(90deg,#6d2432,#98aaa5); box-shadow: 0 0 12px rgba(134,170,162,.4); transition: width .35s ease; }
#loading-copy { color: #575e5b; font: 9px DM Mono, monospace; letter-spacing: .13em; text-transform: uppercase; }

#title-screen { display: none; align-items: center; padding-left: 8vw; background-image: linear-gradient(90deg, rgba(4,5,7,.98) 0%, rgba(5,6,8,.92) 25%, rgba(5,7,9,.52) 47%, rgba(3,5,7,.08) 72%), linear-gradient(0deg, rgba(2,3,4,.72) 0%, transparent 32%, rgba(2,3,4,.3) 100%), url('assets/branding/title-key-art.webp'); background-size: cover; background-position: center center; }
#title-screen.active { display: flex; }
.title-vignette { position: absolute; inset: 0; overflow: hidden; opacity: .9; }
.title-vignette::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 73% 18%, rgba(220,230,220,.08), transparent 19%), repeating-linear-gradient(90deg, transparent 0, transparent 3px, rgba(255,255,255,.007) 4px); mix-blend-mode: screen; }
.title-vignette::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.28) 72%, rgba(0,0,0,.78) 118%); }
.title-content { position: relative; z-index: 2; max-width: 700px; }
.eyebrow { color: #9da7a3; letter-spacing: .34em; font: 500 11px DM Mono, monospace; text-transform: uppercase; margin-bottom: 18px; }
h1 { margin: 0; font: 600 clamp(70px, 10vw, 146px)/.72 Cinzel, serif; letter-spacing: -.055em; color: #ddd7ca; text-shadow: 0 8px 50px #000; }
h1 span { color: transparent; -webkit-text-stroke: 1px rgba(208,214,205,.66); font-size: .8em; letter-spacing: .01em; }
.subtitle { margin: 35px 0 20px; letter-spacing: .32em; text-transform: uppercase; font: 500 11px DM Mono, monospace; color: #9b3140; }
.premise { color: #a49e93; font: 300 15px/1.8 Inter, sans-serif; max-width: 600px; }
.primary-btn, .ghost-btn { margin-top: 22px; padding: 16px 28px; color: #e0d9ca; border: 1px solid #75303b; background: linear-gradient(90deg, #681a28, #41151c); letter-spacing: .14em; text-transform: uppercase; font: 500 11px DM Mono, monospace; cursor: pointer; transition: .25s ease; }
.primary-btn:hover { transform: translateY(-2px); border-color: #be5262; box-shadow: 0 10px 32px rgba(93,20,32,.35); }
.ghost-btn { margin-left: 10px; background: rgba(10,10,12,.55); border-color: #555; }
.title-controls { margin-top: 30px; color: #5f615f; font: 10px DM Mono, monospace; letter-spacing: .08em; }
.chapter-mark { position: absolute; z-index: 2; right: 6vw; bottom: 6vh; color: #737a77; text-align: right; font: 9px/2 DM Mono, monospace; letter-spacing: .25em; }
.chapter-mark strong { color: #aaa69d; font: 500 15px Cinzel, serif; letter-spacing: .06em; }

#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; text-shadow: 0 2px 5px #000; }
.hud-top-left { position: absolute; left: 34px; top: 28px; }
.location { color: #9ea6a2; font: 500 10px DM Mono, monospace; letter-spacing: .22em; padding-bottom: 12px; border-bottom: 1px solid rgba(153,166,160,.25); width: 360px; }
.objective-wrap { margin-top: 17px; max-width: 390px; }
.objective-label { display: flex; align-items: center; gap: 7px; color: #797d79; font: 9px DM Mono, monospace; letter-spacing: .18em; margin-bottom: 7px; }
.objective-label svg { width: 13px; height: 13px; fill: none; stroke: #8d4a55; stroke-width: 1.5; }
#objective { color: #d5cfc3; font: 500 14px/1.35 Cinzel, serif; }
.hud-top-right { position: absolute; right: 34px; top: 30px; width: 245px; }
.meter-title { display: flex; justify-content: space-between; color: #aeabb0; font: 9px DM Mono, monospace; letter-spacing: .13em; }
.meter-title #blood-state { color: #b05a67; }
.meter-title.subtle { margin-top: 11px; color: #696d6b; }
.blood-track { position: relative; height: 5px; margin-top: 9px; background: repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0,rgba(255,255,255,.09) calc(20% - 2px),transparent calc(20% - 2px),transparent 20%); box-shadow: 0 0 0 1px rgba(255,255,255,.025); }
#blood-fill { height: 100%; width: 0; background: linear-gradient(90deg, #66202a, #bd3d50); box-shadow: 0 0 10px rgba(181,46,65,.5); transition: width .5s ease; }
#blood-pip { position: absolute; left: 0; top: -3px; height: 10px; width: 1px; background: #eedbd7; transition: left .5s ease; }
.hud-bottom-left { position: absolute; bottom: 26px; left: 30px; }
.vitals { display: flex; gap: 12px; align-items: center; }
.health-ring { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(183,57,73,.55); border-radius: 50%; box-shadow: inset 0 0 18px rgba(151,31,46,.25), 0 0 0 4px rgba(14,15,17,.7); font: 9px DM Mono, monospace; }
.health-ring svg { position: absolute; width: 30px; height: 30px; fill: none; stroke: rgba(177,59,75,.28); stroke-width: 1; }
.health-ring span { position: relative; z-index: 1; }
.bar { width: 154px; height: 3px; margin: 7px 0; background: rgba(255,255,255,.08); }
.bar i { display: block; height: 100%; transition: width .2s ease; }
.bar.health i { width: 100%; background: #9e3444; }
.bar.focus i { width: 100%; background: #739c97; }
.ability-row { display: flex; gap: 16px; margin-top: 14px; }
.ability { display: flex; align-items: center; gap: 6px; color: #777b78; font: 9px DM Mono, monospace; }
.ability b { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(151,160,155,.18); background: rgba(7,8,9,.72); transform: rotate(45deg); }
.ability b svg { width: 20px; height: 20px; fill: none; stroke: #8d9995; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-45deg); }
.ability:nth-child(2) b svg { stroke: #7ca49d; }
kbd { display: inline-grid; place-items: center; min-width: 25px; height: 24px; padding: 0 5px; color: #b9b5ad; border: 1px solid rgba(185,189,181,.28); background: rgba(5,6,7,.65); font: 9px DM Mono, monospace; }
.hud-bottom-right { position: absolute; right: 42px; bottom: 45px; }
.interaction { display: flex; align-items: center; gap: 12px; color: #d3cec3; font: 12px Cinzel, serif; animation: hover 2s ease-in-out infinite; }
.interaction::before { content: ''; width: 10px; height: 10px; margin-right: -2px; border: 1px solid #7e3f4a; transform: rotate(45deg); box-shadow: 0 0 12px rgba(126,63,74,.18); }
.interaction[data-glyph="echo"]::before,.interaction[data-glyph="bell"]::before,.interaction[data-glyph="gate"]::before { border-color: #719b94; border-radius: 50%; }
.interaction[data-glyph="person"]::before { border-color: #948b7e; transform: rotate(45deg) scale(.82); }
.interaction[data-glyph="body"]::before { border-color: #a04756; box-shadow: 0 0 16px rgba(160,71,86,.28); }
@keyframes hover { 50% { transform: translateY(-3px); } }
#crosshair { position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%); color: rgba(209,213,205,.45); font-size: 20px; }
#realm-tag { position: absolute; right: 34px; top: 110px; color: #515654; font: 9px DM Mono, monospace; letter-spacing: .3em; writing-mode: vertical-rl; }
.touch-controls { display: none; }
.boss-hud { position: absolute; top: 55px; left: 50%; width: min(520px,calc(100vw - 470px)); min-width: 360px; min-height: 72px; transform: translateX(-50%); display: grid; grid-template-columns: 58px 1fr; overflow: hidden; border: 1px solid rgba(163,175,169,.16); background: linear-gradient(90deg,rgba(5,6,7,.94),rgba(14,15,16,.86)); box-shadow: 0 16px 42px rgba(0,0,0,.46); text-shadow: 0 2px 8px #000; }
.boss-hud::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-top: 1px solid rgba(149,57,72,.22); background: linear-gradient(105deg,transparent 65%,rgba(134,42,57,.055)); }
.boss-hud img { width: 58px; height: 72px; object-fit: cover; object-position: 50% 19%; filter: saturate(.38) contrast(1.15); border-right: 1px solid rgba(180,190,185,.14); }
.boss-hud-copy { position: relative; z-index: 1; padding: 11px 15px 9px; min-width: 0; }
.boss-hud-heading { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.boss-hud-heading strong { overflow: hidden; color: #c9c5bc; font: 500 10px Cinzel,serif; letter-spacing: .12em; text-overflow: ellipsis; white-space: nowrap; }
.boss-hud-heading span { flex: none; color: #747a77; font: 8px DM Mono,monospace; letter-spacing: .1em; }
.boss-hud-track { position: relative; height: 4px; margin: 9px 0 7px; overflow: hidden; background: rgba(255,255,255,.055); }
.boss-hud-track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#6f2633,#a54858); box-shadow: 0 0 12px rgba(170,55,75,.44); transition: width .22s ease; }
.boss-hud-track b { position: absolute; left: 50%; top: -2px; width: 1px; height: 8px; background: rgba(225,220,210,.22); }
.boss-hud small { display: block; overflow: hidden; color: #777d79; font: 8px DM Mono,monospace; letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }
.boss-hud.phase-two { border-color: rgba(174,67,83,.35); box-shadow: 0 16px 42px rgba(0,0,0,.5),0 0 26px rgba(138,39,55,.12); }
.boss-hud.phase-two .boss-hud-track i { background: linear-gradient(90deg,#8e2537,#d05265); }

.panel { position: absolute; z-index: 25; }
.dialogue { left: 50%; transform: translateX(-50%); bottom: 34px; width: min(900px, calc(100vw - 50px)); min-height: 168px; display: grid; grid-template-columns: 148px 1fr; overflow: hidden; background: linear-gradient(100deg, rgba(8,9,10,.97), rgba(18,18,20,.94)); border: 1px solid rgba(162,165,157,.2); box-shadow: 0 18px 70px rgba(0,0,0,.7); }
.dialogue-portrait { position: relative; min-height: 168px; overflow: hidden; border-right: 1px solid rgba(150,161,156,.17); background: radial-gradient(circle, rgba(116,145,138,.12), transparent 65%); }
.dialogue-portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(9,10,11,.95)), linear-gradient(0deg, rgba(7,8,9,.9), transparent 45%); }
.dialogue-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: saturate(.72) contrast(1.08); transition: opacity .25s; }
.dialogue-portrait.absent img { opacity: 0; }
.dialogue-portrait[data-character="neriah"] img { object-position: 50% 31%; filter: saturate(.58) contrast(1.12) sepia(.04); }
.dialogue-portrait[data-character="veyra"] img { object-position: 50% 29%; filter: saturate(.66) contrast(1.1); }
.dialogue-portrait[data-character="malrec"] img { object-position: 50% 28%; filter: saturate(.5) contrast(1.13); }
.dialogue-portrait[data-character="orin"] img { object-position: 50% 30%; filter: saturate(.56) contrast(1.12); }
.dialogue-portrait[data-character="ilyen"] img { object-position: 50% 29%; filter: saturate(.6) contrast(1.1); }
.dialogue-portrait[data-character="vaelChild"] img { object-position: 50% 25%; filter: saturate(.56) contrast(1.09); }
.dialogue-portrait[data-character="choir"] img { object-position: 50% 18%; filter: saturate(.38) contrast(1.15); }
.dialogue-portrait[data-character="thorn"] img { object-position: 50% 20%; filter: saturate(.48) contrast(1.16); }
.dialogue-portrait[data-character="witness"] img { object-position: 50% 18%; filter: saturate(.32) contrast(1.18); }
.dialogue-portrait[data-character="bride"] img { object-position: 50% 18%; filter: saturate(.34) contrast(1.16); }
.dialogue-portrait[data-character="hunger"] img { object-position: 50% 22%; filter: saturate(.34) contrast(1.17); }
.dialogue-copy { padding: 24px 30px 18px; display: flex; flex-direction: column; }
#speaker { color: #a54856; font: 500 10px DM Mono, monospace; letter-spacing: .25em; }
#dialogue-text { flex: 1; min-height: 43px; color: #d2cdc1; font: 300 16px/1.6 Inter, sans-serif; margin: 12px 0; }
#dialogue-hint { align-self: end; margin-top: auto; padding: 6px 0 2px 12px; color: #777e7a; border: 0; background: transparent; cursor: pointer; text-align: right; font: 9px DM Mono, monospace; letter-spacing: .1em; }
#dialogue-hint:hover,#dialogue-hint:focus-visible { color: #b9c0bb; }

.choice-screen { display: grid; place-items: center; background: rgba(3,4,5,.78); backdrop-filter: blur(7px); }
.choice-card { width: min(800px, calc(100vw - 40px)); text-align: center; }
.choice-card h2, .ending-content h2, .journal-book h2 { margin: 0 0 12px; color: #d9d3c7; font: 600 35px Cinzel, serif; }
.choice-card > p { color: #97958e; font: 300 14px/1.7 Inter, sans-serif; max-width: 580px; margin: 0 auto 25px; }
.choice-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice-btn { position: relative; min-height: 178px; padding: 28px 28px 28px 90px; text-align: left; color: #ccc7bc; border: 1px solid #35383a; background: rgba(12,13,15,.92); cursor: pointer; transition: .25s ease; overflow: hidden; }
.choice-btn > svg { position: absolute; left: 25px; top: 31px; width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.1; opacity: .72; }
.choice-btn::after { content: ''; position: absolute; width: 140px; height: 140px; left: -64px; top: 18px; border: 1px solid currentColor; border-radius: 50%; opacity: .06; }
.choice-btn small { display: block; font: 9px DM Mono, monospace; letter-spacing: .2em; margin-bottom: 18px; }
.choice-btn strong { display: block; font: 500 23px Cinzel, serif; margin-bottom: 8px; }
.choice-btn span { color: #85857f; font: 12px/1.5 Inter, sans-serif; }
.choice-btn.mercy small { color: var(--mercy); }
.choice-btn.control small { color: var(--control); }
.choice-btn.mercy:hover { transform: translateY(-4px); border-color: #70948f; box-shadow: 0 16px 40px rgba(58,104,99,.18); }
.choice-btn.control:hover { transform: translateY(-4px); border-color: #98404e; box-shadow: 0 16px 40px rgba(116,34,47,.2); }

.journal-screen { display: grid; place-items: center; background: rgba(3,4,5,.87); backdrop-filter: blur(8px); }
.journal-book { width: min(940px, calc(100vw - 50px)); min-height: min(560px,calc(100vh - 40px)); min-height: min(560px,calc(100dvh - 40px)); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto; padding: 40px 46px; background: linear-gradient(110deg, #121315, #181819 48%, #111214 50%); border: 1px solid rgba(200,200,185,.13); box-shadow: 0 30px 100px #000; scrollbar-color: #5f343c #111214; scrollbar-width: thin; }
.journal-book header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid #343536; padding-bottom: 22px; }
.journal-book header button { flex: none; padding: 10px 12px; color: #7e817e; background: none; border: 1px solid rgba(145,63,76,.18); cursor: pointer; }
.journal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding-top: 28px; }
.journal-grid h3 { color: #818783; font: 500 10px DM Mono, monospace; text-transform: uppercase; letter-spacing: .2em; }
.asha-portrait { position: relative; height: 176px; margin: 0 0 12px; overflow: hidden; border: 1px solid #303333; background: #0a0c0d; }
.asha-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; filter: saturate(.63) contrast(1.08); transform: scale(1.025); transition: filter .45s, transform .45s; }
.asha-portrait::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(8,9,10,.75), transparent 48%), linear-gradient(0deg, rgba(8,9,10,.9), transparent 60%); }
.asha-portrait::after { content: ''; position: absolute; z-index: 2; width: 78px; height: 78px; right: 22px; top: 25px; border: 1px solid rgba(139,173,165,.18); border-radius: 50%; box-shadow: 0 0 30px transparent; transition: .45s; }
.asha-portrait #portrait-state { position: absolute; z-index: 3; left: 14px; bottom: 11px; color: #999f9b; font: 9px DM Mono, monospace; letter-spacing: .2em; text-transform: uppercase; }
.asha-portrait.blood-hidden img { filter: saturate(.63) contrast(1.08); }
.asha-portrait.blood-awakened::after { border-color: rgba(134,190,179,.4); box-shadow: 0 0 24px rgba(95,157,146,.16); }
.asha-portrait.blood-feared img { filter: saturate(.45) contrast(1.18) brightness(.86); transform: scale(1.045); }
.asha-portrait.blood-feared::after { border-color: rgba(160,66,82,.48); box-shadow: 0 0 25px rgba(130,42,58,.2); }
.asha-portrait.blood-monstrous img, .asha-portrait.blood-living-prison img { filter: saturate(.28) contrast(1.25) brightness(.72); transform: scale(1.07); }
.asha-portrait.blood-monstrous::after, .asha-portrait.blood-living-prison::after { border-color: rgba(186,62,81,.62); box-shadow: 0 0 34px rgba(151,38,56,.35), inset 0 0 22px rgba(151,38,56,.18); }
#clue-list { list-style: none; padding: 0; }
#clue-list li { padding: 12px 0 12px 22px; position: relative; border-bottom: 1px solid #292a2b; color: #afaca4; font: 13px/1.4 Inter, sans-serif; }
#clue-list li::before { content: '◊'; position: absolute; left: 0; color: #88404b; }
.alignment { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.alignment div { padding: 16px; display: flex; justify-content: space-between; border: 1px solid #303233; color: #777d79; font: 10px DM Mono, monospace; }
.alignment strong { color: #c5c2ba; font-size: 15px; }
blockquote { margin: 26px 0; padding-left: 18px; border-left: 2px solid #71323b; color: #aaa59b; font: italic 15px/1.7 Georgia, serif; }
#blood-note { color: #777a77; font: 12px/1.7 Inter, sans-serif; }
.seal-list { display: grid; gap: 6px; margin-top: 12px; }
.seal { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #292c2d; color: #676c69; font: 9px DM Mono, monospace; letter-spacing: .06em; text-transform: uppercase; }
.seal i { width: 12px; height: 12px; border: 1px solid #4b5150; border-radius: 50%; }
.seal i { position: relative; }
.seal i::before,.seal i::after { content: ''; position: absolute; pointer-events: none; }
.seal[data-kind="choir"] i::before { left: 3px; top: 1px; width: 1px; height: 8px; background: currentColor; box-shadow: 3px 0 currentColor,6px 0 currentColor; opacity: .7; }
.seal[data-kind="thorn"] i { border-radius: 0; transform: rotate(45deg); }
.seal[data-kind="thorn"] i::before { inset: 3px; border: 1px solid currentColor; }
.seal[data-kind="witness"] i { border-radius: 0; }
.seal[data-kind="witness"] i::before { left: 1px; top: 5px; width: 10px; height: 1px; background: currentColor; transform: rotate(-45deg); }
.seal[data-kind="bride"] i::before { inset: 2px; border: 1px dotted currentColor; border-radius: 50%; }
.seal[data-kind="hunger"] i { border-width: 2px; box-shadow: inset 0 0 0 3px #111214; }
.seal[data-kind="hunger"] i::before { inset: 3px; background: #050607; border-radius: 50%; }
.seal.mercy { color: #91bdb5; border-color: rgba(112,164,154,.25); }
.seal.control { color: #ac5563; border-color: rgba(157,65,79,.28); }
.seal.mercy i { background: #729f97; box-shadow: 0 0 10px rgba(114,159,151,.5); }
.seal.control i { background: #953747; box-shadow: 0 0 10px rgba(149,55,71,.5); }
.seal strong { color: inherit; font-weight: 500; }

.pause-screen { display: grid; place-items: center; background-image: linear-gradient(rgba(3,4,5,.9),rgba(3,4,5,.93)), url('assets/branding/title-key-art.webp'); background-size: cover; background-position: center; backdrop-filter: blur(10px); }
.pause-card { width: min(540px, calc(100vw - 36px)); padding: 44px; text-align: center; background: linear-gradient(145deg, rgba(20,21,23,.98), rgba(9,10,12,.98)); border: 1px solid rgba(188,190,181,.16); box-shadow: 0 30px 100px #000; }
.pause-card h2 { margin: 0; color: #d8d1c4; font: 600 42px Cinzel, serif; }
.pause-card > p { color: #747975; font: 11px DM Mono, monospace; }
.pause-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 25px; }
.pause-actions button { width: 100%; margin: 0; }
.pause-actions .primary-btn { grid-column: 1 / -1; }
.danger-btn { grid-column: 1 / -1; padding: 13px 22px; color: #7d555a; background: transparent; border: 1px solid #43252b; letter-spacing: .13em; text-transform: uppercase; font: 9px DM Mono, monospace; cursor: pointer; transition: .2s; }
.danger-btn:hover { color: #c06a77; border-color: #7b3541; }
.pause-help { margin-top: 22px; color: #4f5451; font: 9px DM Mono, monospace; letter-spacing: .08em; }

.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; } }

.ending-screen { display: grid; place-items: center; text-align: center; background-image: radial-gradient(circle at 50% 34%, rgba(74,103,99,.18), transparent 32%), linear-gradient(rgba(4,5,6,.83),rgba(4,5,6,.95)), var(--ending-art,url('assets/branding/title-key-art.webp')); background-size: auto,auto,cover; background-position: center; }
.ending-screen.mercy-ending { background-image: radial-gradient(circle at 50% 34%,rgba(88,156,145,.2),transparent 33%),linear-gradient(rgba(3,8,9,.8),rgba(3,5,6,.95)),var(--ending-art); }
.ending-screen.control-ending { background-image: radial-gradient(circle at 50% 34%,rgba(155,42,61,.2),transparent 31%),linear-gradient(rgba(8,3,5,.78),rgba(5,3,4,.96)),var(--ending-art); }
.ending-screen.control-ending .ending-content h2 { color: #d8c2c4; text-shadow: 0 0 30px rgba(151,44,62,.22); }
.ending-screen.mercy-ending .ending-content h2 { color: #d2ddd8; text-shadow: 0 0 30px rgba(89,150,139,.18); }
.ending-content { width: min(780px, calc(100vw - 45px)); }
.ending-content h2 { font-size: 45px; }
#ending-copy { max-width: 650px; margin: 18px auto 28px; color: #a4a097; font: 300 15px/1.8 Inter, sans-serif; }
.ending-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #2c2e2e; }
.ending-stats div { padding: 18px 10px; border-right: 1px solid #2c2e2e; }
.ending-stats div:last-child { border: 0; }
.ending-stats span { display: block; color: #666b68; font: 9px DM Mono, monospace; letter-spacing: .1em; text-transform: uppercase; }
.ending-stats strong { display: block; margin-top: 8px; color: #bbb7ae; font: 500 12px Cinzel, serif; }
.stinger { margin: 30px 0 0; color: #7a343f; font: italic 14px Georgia, serif; }

.toast { position: absolute; z-index: 40; top: 20%; left: 50%; transform: translateX(-50%); min-width: 310px; padding: 15px 24px; text-align: center; color: #c6c1b7; background: rgba(6,7,8,.92); border-top: 1px solid #703641; border-bottom: 1px solid #703641; font: 10px DM Mono, monospace; letter-spacing: .12em; text-transform: uppercase; animation: toastin .35s ease; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, -10px); } }
.clue-reveal { position: absolute; z-index: 34; top: 142px; right: 72px; width: min(390px,calc(100vw - 104px)); display: grid; grid-template-columns: 58px 1fr; gap: 15px; padding: 15px 17px; color: #bbb7ae; background: linear-gradient(105deg,rgba(7,8,9,.97),rgba(15,17,17,.93)); border: 1px solid rgba(138,154,148,.2); border-left: 2px solid #75404a; box-shadow: 0 18px 45px rgba(0,0,0,.48); animation: clueIn .46s cubic-bezier(.2,.75,.2,1); }
.clue-reveal.leaving { opacity: 0; transform: translateX(18px); transition: opacity .35s ease,transform .35s ease; }
.clue-reveal-mark { position: relative; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(139,160,153,.2); background: radial-gradient(circle,rgba(105,145,137,.1),transparent 68%); }
.clue-reveal-mark svg { width: 25px; height: 25px; fill: none; stroke: #91a8a2; stroke-width: 1; }
.clue-reveal-mark i { position: absolute; inset: 7px; border: 1px solid rgba(145,60,74,.26); transform: rotate(45deg); }
.clue-reveal-heading { display: flex; justify-content: space-between; gap: 12px; }
.clue-reveal-heading small { color: #8f4b57; font: 500 8px DM Mono,monospace; letter-spacing: .19em; }
.clue-reveal-heading span { color: #5f6663; font: 8px DM Mono,monospace; }
.clue-reveal p { margin: 8px 0 0; color: #aaa69e; font: 300 11px/1.5 Inter,sans-serif; }
@keyframes clueIn { from { opacity: 0; transform: translateX(25px); } }
#damage-flash { position: absolute; inset: 0; z-index: 13; pointer-events: none; box-shadow: inset 0 0 110px rgba(155,20,42,0); transition: .12s; }
#damage-flash.hit { box-shadow: inset 0 0 140px rgba(155,20,42,.65); }
.moral-flash { position: absolute; inset: 0; z-index: 48; overflow: hidden; pointer-events: none; opacity: 0; }
.moral-flash::before { content: ''; position: absolute; inset: -20%; }
.moral-flash i,.moral-flash b { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; border: 1px solid currentColor; border-radius: 50%; transform: translate(-50%,-50%); }
.moral-flash b { width: 160px; height: 160px; opacity: .5; }
.moral-flash.mercy { color: rgba(154,211,200,.7); }
.moral-flash.mercy::before { background: radial-gradient(circle,rgba(112,184,171,.25),transparent 42%); }
.moral-flash.control { color: rgba(205,70,91,.75); }
.moral-flash.control::before { background: linear-gradient(90deg,transparent 49.7%,rgba(183,48,70,.45) 50%,transparent 50.3%),radial-gradient(circle,rgba(133,29,48,.3),transparent 44%); }
.moral-flash.active { opacity: 1; animation: moralFade .78s ease-out both; }
.moral-flash.active i { animation: moralRing .72s ease-out both; }
.moral-flash.active b { animation: moralRing .72s .08s ease-out both; }
.moral-flash.control.active i,.moral-flash.control.active b { border-radius: 0; transform: translate(-50%,-50%) rotate(45deg); }
@keyframes moralFade { 0%{opacity:0} 14%{opacity:1} 100%{opacity:0} }
@keyframes moralRing { from{width:50px;height:50px;opacity:.85} to{width:80vmax;height:80vmax;opacity:0} }
#dream-transition { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; opacity: 0; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(69,103,96,.15), transparent 24%), #08090b; transition: opacity 1s ease; }
#dream-transition::before { content: ''; position: absolute; inset: -3%; z-index: 0; background-image: linear-gradient(90deg,rgba(4,5,6,.88),rgba(4,5,6,.42) 50%,rgba(4,5,6,.7)), linear-gradient(0deg,rgba(3,4,5,.9),transparent 52%,rgba(3,4,5,.52)), var(--transition-art,none); background-size: cover; background-position: center; filter: saturate(.55) contrast(1.08); transform: scale(1.02); transition: transform 3s ease; }
#dream-transition.active { opacity: 1; }
#dream-transition.active::before { transform: scale(1.06); }
#dream-transition > * { position: relative; z-index: 1; }

.boss-reveal { z-index: 56; display: grid; place-items: center; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; background: #050607; transition: opacity .55s ease, visibility .55s; }
.boss-reveal::before { content: ''; position: absolute; inset: -3%; background-image: linear-gradient(90deg,rgba(2,3,4,.94) 0%,rgba(3,4,5,.58) 48%,rgba(2,3,4,.8) 100%), linear-gradient(0deg,rgba(2,3,4,.9),transparent 44%,rgba(2,3,4,.7)), var(--boss-art,none); background-size: cover; background-position: center; filter: saturate(.45) contrast(1.18); transform: scale(1.04); transition: transform 2.3s ease; }
.boss-reveal::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.012) 4px), radial-gradient(circle at center,transparent 0 13%,rgba(0,0,0,.2) 35%,rgba(0,0,0,.72) 100%); }
.boss-reveal.active { opacity: 1; visibility: visible; }
.boss-reveal.active::before { transform: scale(1.09); }
.boss-reveal[data-boss="choir"]::before { background-position: center 19%; }
.boss-reveal[data-boss="thorn"]::before { background-position: center 21%; }
.boss-reveal[data-boss="witness"]::before { background-position: center 18%; }
.boss-reveal[data-boss="bride"]::before { background-position: center 18%; }
.boss-reveal[data-boss="hunger"]::before { background-position: center 22%; }
.boss-reveal-sigil { position: relative; z-index: 1; width: 154px; height: 154px; border: 1px solid rgba(184,199,193,.24); border-radius: 50%; box-shadow: 0 0 70px rgba(101,144,137,.12), inset 0 0 35px rgba(0,0,0,.7); }
.boss-reveal-sigil::before,.boss-reveal-sigil::after,.boss-reveal-sigil i,.boss-reveal-sigil b { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(157,67,82,.28); border-radius: 50%; transform: rotate(0); }
.boss-reveal-sigil::after { inset: 42px; border-color: rgba(202,213,207,.35); }
.boss-reveal-sigil i { inset: 50% 10px auto; height: 1px; border: 0; border-top: 1px solid rgba(202,213,207,.36); border-radius: 0; }
.boss-reveal-sigil b { inset: 10px 50% 10px auto; width: 1px; border: 0; border-left: 1px solid rgba(157,67,82,.38); border-radius: 0; }
.boss-reveal.active .boss-reveal-sigil { animation: bossSeal 7s linear infinite; }
@keyframes bossSeal { to { transform: rotate(360deg); } }
.boss-reveal-copy { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(760px,calc(100vw - 60px)); transform: translate(-50%,-50%); text-align: center; text-shadow: 0 3px 16px #000; }
.boss-reveal-copy small { color: #9b4a56; font: 500 9px DM Mono,monospace; letter-spacing: .36em; }
.boss-reveal-copy h2 { margin: 16px 0 10px; color: #ddd8cc; font: 600 clamp(29px,4.3vw,58px)/1.05 Cinzel,serif; letter-spacing: .025em; }
.boss-reveal-copy p { margin: 0; color: #aeb6b1; font: 500 10px DM Mono,monospace; letter-spacing: .24em; }
.boss-reveal-copy span { display: inline-block; max-width: 520px; margin-top: 78px; padding-top: 13px; border-top: 1px solid rgba(190,200,195,.18); color: #8a8e89; font: 300 11px/1.6 Inter,sans-serif; letter-spacing: .05em; }
#dream-transition .transition-seal { width: 84px; height: 84px; display: grid; place-items: center; margin-bottom: 25px; border: 1px solid rgba(129,158,151,.14); border-radius: 50%; animation: sealbreathe 3s ease-in-out infinite; }
#dream-transition .transition-seal svg { width: 52px; height: 52px; fill: none; stroke: rgba(128,165,157,.7); stroke-width: .8; }
#dream-transition small { color: #71323e; font: 9px DM Mono, monospace; letter-spacing: .3em; margin-bottom: 13px; }
#dream-transition span { max-width: 760px; padding: 0 24px; color: #aeb8b3; font: 500 18px/1.5 Cinzel, serif; letter-spacing: .16em; text-align: center; }
#dream-transition > i { width: 110px; height: 1px; margin-top: 26px; background: linear-gradient(90deg,transparent,#71414a,transparent); }
@keyframes sealbreathe { 50% { transform: scale(1.06) rotate(8deg); box-shadow: 0 0 38px rgba(84,133,123,.12); } }

body[data-blood="awakened"] #game-shell::after { box-shadow: inset 0 0 100px rgba(45,87,80,.18); }
body[data-blood="feared"] #game-shell::after { box-shadow: inset 0 0 120px rgba(73,30,42,.28); }
body[data-blood="monstrous"] #game-shell::after,
body[data-blood="living-prison"] #game-shell::after { background: radial-gradient(circle at center, transparent 34%, rgba(52,13,24,.18) 67%, rgba(0,0,0,.86) 114%); box-shadow: inset 0 0 150px rgba(105,25,43,.32); }
body[data-blood="feared"] #blood-state,
body[data-blood="monstrous"] #blood-state,
body[data-blood="living-prison"] #blood-state { text-shadow: 0 0 12px rgba(190,54,76,.55); }

@media (max-width: 700px) {
  #title-screen { padding: 8vw; background-position: 66% center; background-image: linear-gradient(90deg, rgba(4,5,7,.98), rgba(5,6,8,.86) 58%, rgba(3,5,7,.38)), linear-gradient(0deg, rgba(2,3,4,.8), transparent 45%), url('assets/branding/title-key-art.webp'); }
  .premise br { display: block; }
  .chapter-mark, .title-controls, #crosshair { display: none; }
  .choice-options, .journal-grid { grid-template-columns: 1fr; }
  .dialogue { grid-template-columns: 92px 1fr; width: calc(100vw - 24px); bottom: 18px; }
  .dialogue-copy { padding: 18px 18px 14px; }
  .journal-grid { gap: 20px; }
  .journal-book { padding: 28px 24px; overflow: auto; max-height: 88vh; max-height: 88dvh; }
  .choice-btn { min-height: 120px; }
  .hud-top-right { width: 170px; }
  .location { width: 240px; }
  .ability span { display: none; }
  .ending-stats { grid-template-columns: 1fr 1fr; }
  .boss-hud { top: 82px; width: calc(100vw - 24px); min-width: 0; grid-template-columns: 48px 1fr; }
  .boss-hud img { width: 48px; height: 66px; }
  .boss-hud small { display: none; }
  .clue-reveal { top: auto; right: 12px; bottom: 230px; width: calc(100vw - 24px); }
}

@media (max-width: 520px) {
  #title-screen { padding: 28px; background-position: 69% center; }
  h1 { font-size: clamp(62px,19vw,82px); }
  .title-content { width: 100%; }
  .premise { max-width: 340px; font-size: 13px; }
  #title-screen .primary-btn,#title-screen .ghost-btn { display: block; width: min(100%,300px); margin-left: 0; }
  .hud-top-left { left: 18px; top: 18px; }
  .hud-top-right { right: 18px; top: 18px; width: 145px; }
  .location { width: min(220px,54vw); }
  #objective { max-width: 56vw; font-size: 12px; }
  .dialogue { grid-template-columns: 76px 1fr; }
  .dialogue-copy { padding-left: 14px; padding-right: 14px; }
  #dialogue-text { font-size: 14px; line-height: 1.45; }
  .choice-card h2,.ending-content h2,.journal-book h2 { font-size: 29px; }
  .choice-btn { padding-left: 70px; }
  .choice-btn > svg { left: 18px; width: 34px; height: 34px; }
}

@media (hover: none) and (pointer: coarse), (max-width: 520px) {
  .hud-bottom-left { bottom: 138px; }
  .hud-bottom-right { bottom: 152px; }
  .ability-row { display: none; }
  .touch-controls { position: absolute; inset: auto 12px 12px; z-index: 18; display: flex; align-items: end; justify-content: space-between; gap: 12px; pointer-events: auto; text-shadow: none; }
  .touch-controls button { min-width: 46px; min-height: 46px; padding: 8px; color: #c8c4ba; border: 1px solid rgba(166,176,170,.34); border-radius: 8px; background: rgba(7,9,10,.82); box-shadow: inset 0 0 18px rgba(95,134,127,.08); font: 500 9px DM Mono,monospace; letter-spacing: .04em; touch-action: none; }
  .touch-controls button:active { border-color: #a64b5a; background: rgba(76,24,34,.9); }
  .touch-move { width: 142px; display: grid; grid-template-columns: repeat(3,46px); grid-template-rows: repeat(2,46px); gap: 2px; }
  .touch-move button:nth-child(1) { grid-column: 2; }
  .touch-move button:nth-child(2) { grid-column: 1; grid-row: 2; }
  .touch-move button:nth-child(3) { grid-column: 2; grid-row: 2; }
  .touch-move button:nth-child(4) { grid-column: 3; grid-row: 2; }
  .touch-actions { max-width: 190px; display: grid; grid-template-columns: repeat(3,minmax(54px,1fr)); gap: 4px; }
}

@media (max-height: 650px) {
  #title-screen { padding-left: 6vw; }
  h1 { font-size: clamp(58px,13vh,88px); }
  .subtitle { margin: 22px 0 12px; }
  .premise { font-size: 12px; line-height: 1.55; }
  .primary-btn,.ghost-btn { margin-top: 12px; padding: 12px 20px; }
  .title-controls { margin-top: 14px; }
  .dialogue { bottom: 14px; min-height: 132px; }
  .dialogue-portrait { min-height: 132px; }
  .dialogue-copy { padding-top: 17px; padding-bottom: 12px; }
  .choice-card { max-height: 94vh; overflow: auto; padding: 12px 0; }
  .choice-btn { min-height: 138px; padding-top: 20px; padding-bottom: 20px; }
  .boss-reveal-copy span { margin-top: 38px; }
  .journal-book { max-height: 94vh; overflow: auto; min-height: 0; }
}